verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

refs #6256 refactor line break
gitea/salix-front/pipeline/head This commit looks good Details

This commit is contained in:
Carlos Satorres 2023-12-05 14:26:11 +01:00
parent b6fc7cd0b4
commit d328951ac1
2 changed files with 4 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ui/CardSummary.vue
View File

@ -122,10 +122,7 @@ watch(props, async () => {
} }
.value { .value {
color: var(--vn-text); color: var(--vn-text);
width: max-content;
overflow: hidden; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
} }
.header { .header {

22
src/components/ui/VnLv.vue
View File

@ -9,22 +9,12 @@ const $props = defineProps({
titleValue: { type: [Number, String, Boolean], default: null }, titleValue: { type: [Number, String, Boolean], default: null },
info: { type: String, default: null }, info: { type: String, default: null },
dash: { type: Boolean, default: true }, dash: { type: Boolean, default: true },
textOverflow: { type: String, default: 'ellipsis' },
}); });
const isBooleanValue = computed(() => typeof $props.value === 'boolean'); const isBooleanValue = computed(() => typeof $props.value === 'boolean');
const textOverflowClass = computed(() => {
if ($props.textOverflow === 'ellipsis') return 'line-break-text';
return 'ellipsis-text';
});
</script> </script>
<style scoped> <style scoped>
.ellipsis-text { .label,
white-space: nowrap; .value {
overflow: hidden;
text-overflow: ellipsis;
}
.line-break-text {
white-space: pre-line; white-space: pre-line;
hyphens: auto; hyphens: auto;
word-wrap: break-word; word-wrap: break-word;
@ -34,11 +24,7 @@ const textOverflowClass = computed(() => {
<div class="vn-label-value"> <div class="vn-label-value">
<div v-if="$props.label || $slots.label" class="label"> <div v-if="$props.label || $slots.label" class="label">
<slot name="label"> <slot name="label">
<span <span :title="$props.titleLabel ?? $props.label">{{ $props.label }}</span>
:title="$props.titleLabel ?? $props.label"
:class="textOverflowClass"
>{{ $props.label }}</span
>
</slot> </slot>
</div> </div>
<div class="value"> <div class="value">
@ -50,7 +36,7 @@ const textOverflowClass = computed(() => {
/> />
</span> </span>
<slot v-else name="value"> <slot v-else name="value">
<span :title="$props.value" :class="textOverflowClass"> <span :title="$props.value">
{{ $props.dash ? dashIfEmpty($props.value) : $props.value }} {{ $props.dash ? dashIfEmpty($props.value) : $props.value }}
</span> </span>
</slot> </slot>