Skip to content

Commit 9367869

Browse files
vis97cvis97c
committed
feat: inline small objects in table
1 parent b8f5448 commit 9367869

File tree

2 files changed

+106
-74
lines changed

2 files changed

+106
-74
lines changed

‎packages/components-vue/src/components/value/Complex.vue‎

Lines changed: 92 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -54,69 +54,100 @@
5454
<span v-else-if="!property?.createNode">-</span>
5555
</div>
5656
<!-- Object only -->
57-
<Modal
58-
v-else-if="typeof value === 'object' && value !== null && Object.keys(value).length"
59-
class="--txtSize"
60-
:theme="modalTheme || theme"
61-
:title="property?.alias"
62-
>
63-
<template #toggle="{ toggleModal }">
64-
<ActionLink
65-
v-if="'name' in value"
66-
:theme="theme"
67-
:tooltip="t('see_value')"
68-
tooltip-as-text
69-
tooltip-position="bottom"
70-
size="sm"
71-
@click="toggleModal"
72-
>
73-
<IconFa name="lemon" force-regular />
74-
<span>{{ value.name }}</span>
75-
</ActionLink>
76-
<ActionButtonToggle
77-
v-else
78-
:theme="theme"
79-
:tooltip="t('see_value')"
80-
tooltip-as-text
81-
tooltip-position="bottom"
82-
size="sm"
83-
round
84-
@click="toggleModal"
57+
<template v-else-if="typeof value === 'object' && value !== null && Object.keys(value).length">
58+
<!-- Small object with small values -->
59+
<div
60+
v-if="
61+
Object.keys(value).length <= 3 &&
62+
Object.values(value).every((v) => typeof v === 'string' && v.length <= 7)
63+
"
64+
class="flx --flxRow --flx-start-center --gap-5"
65+
>
66+
<template
67+
v-for="([childValueName, childValue], childValueIndex) in sort(value)"
68+
:key="childValueIndex"
8569
>
86-
<IconFa name="lemon" />
87-
<IconFa name="lemon" force-regular />
88-
</ActionButtonToggle>
89-
</template>
90-
<template #default="{ model, invertedTheme }">
91-
<ul v-if="model" class="flx --flxColumn --minWidth-220 --txtSize-sm" :class="classes">
92-
<li
93-
v-for="([childValueName, childValue], childValueIndex) in sort(value)"
94-
:key="childValueIndex"
95-
class="flx --flxColumn --flx-center-start --gap-5 --flx-fit"
70+
<ValueSimple
71+
v-bind="{
72+
value: childValue,
73+
property: {
74+
value: childValueName,
75+
alias: _.capitalize(_.startCase(childValueName)),
76+
},
77+
readonly,
78+
theme,
79+
modalTheme,
80+
classes,
81+
verbose,
82+
}"
83+
/>
84+
<span v-if="childValueIndex < Object.keys(value).length - 1">⋅</span>
85+
</template>
86+
</div>
87+
<!-- Any other object -->
88+
<Modal v-else class="--txtSize" :theme="modalTheme || theme" :title="property?.alias">
89+
<template #toggle="{ toggleModal }">
90+
<ActionLink
91+
v-if="'name' in value"
92+
:theme="theme"
93+
:tooltip="t('see_value')"
94+
tooltip-as-text
95+
tooltip-position="bottom"
96+
size="sm"
97+
@click="toggleModal"
9698
>
97-
<span class="--txtSize-xs">
98-
{{ _.capitalize(_.startCase(childValueName)) }}
99-
</span>
100-
<!-- Recursion -->
101-
<Complex
102-
v-bind="{
103-
value: childValue,
104-
node,
105-
property: {
106-
value: childValueName,
107-
alias: _.capitalize(_.startCase(childValueName)),
108-
},
109-
readonly,
110-
theme: invertedTheme,
111-
modalTheme: modalTheme || theme,
112-
}"
113-
:class="classes"
114-
verbose
115-
/>
116-
</li>
117-
</ul>
118-
</template>
119-
</Modal>
99+
<IconFa name="lemon" force-regular />
100+
<span>{{ value.name }}</span>
101+
</ActionLink>
102+
<ActionButtonToggle
103+
v-else
104+
:theme="theme"
105+
:tooltip="t('see_value')"
106+
tooltip-as-text
107+
tooltip-position="bottom"
108+
size="sm"
109+
round
110+
@click="toggleModal"
111+
>
112+
<IconFa name="lemon" />
113+
<IconFa name="lemon" force-regular />
114+
</ActionButtonToggle>
115+
</template>
116+
<template #default="{ model, invertedTheme }">
117+
<ul
118+
v-if="model"
119+
class="flx --flxColumn --minWidth-220 --txtSize-sm"
120+
:class="classes"
121+
>
122+
<li
123+
v-for="([childValueName, childValue], childValueIndex) in sort(value)"
124+
:key="childValueIndex"
125+
class="flx --flxColumn --flx-center-start --gap-5 --flx-fit"
126+
>
127+
<span class="--txtSize-xs">
128+
{{ _.capitalize(_.startCase(childValueName)) }}
129+
</span>
130+
<!-- Recursion -->
131+
<Complex
132+
v-bind="{
133+
value: childValue,
134+
node,
135+
property: {
136+
value: childValueName,
137+
alias: _.capitalize(_.startCase(childValueName)),
138+
},
139+
readonly,
140+
theme: invertedTheme,
141+
modalTheme: modalTheme || theme,
142+
}"
143+
:class="classes"
144+
verbose
145+
/>
146+
</li>
147+
</ul>
148+
</template>
149+
</Modal>
150+
</template>
120151
<!-- Plain value -->
121152
<ValueSimple
122153
v-else

‎packages/components-vue/src/components/value/Simple.vue‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,22 @@
22
<template>
33
<div class="flx --flxRow --flx-start-center --gap-5" :class="classes">
44
<!-- Boolean only -->
5-
<InputToggle
6-
v-if="typeof value === 'boolean'"
7-
:label="verbose ? property?.alias : undefined"
8-
:checked="value"
9-
:theme="theme"
10-
disabled
11-
/>
5+
<span v-if="typeof value === 'boolean'" :title="property?.alias">
6+
<InputToggle
7+
:label="verbose ? property?.alias : undefined"
8+
:checked="value"
9+
:theme="theme"
10+
disabled
11+
/>
12+
</span>
1213

1314
<!-- String, Color -->
14-
<InputColor
15+
<span
1516
v-else-if="typeof value === 'string' && validator.isHexColor(value)"
16-
:model-value="value"
17-
:theme="theme"
18-
disabled
19-
/>
17+
:title="property?.alias"
18+
>
19+
<InputColor :model-value="value" :theme="theme" disabled />
20+
</span>
2021

2122
<!-- String, Date -->
2223
<span
@@ -85,7 +86,7 @@
8586
</Modal>
8687

8788
<!-- Plain data, short string, number or no data -->
88-
<span v-else>
89+
<span v-else :title="property?.alias">
8990
{{ typeof value === "string" || typeof value === "number" ? value ?? "-" : "-" }}
9091
</span>
9192
</div>

0 commit comments

Comments
 (0)