@veritree/ui 0.54.0 → 0.56.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/mixins/form-control.js
CHANGED
|
@@ -61,7 +61,7 @@ export const formControlStyleMixin = {
|
|
|
61
61
|
return [
|
|
62
62
|
this.headless
|
|
63
63
|
? `${this.name}`
|
|
64
|
-
: 'leading-0 flex w-full max-w-full appearance-none placeholder:font-light placeholder:text-gray-500 items-center justify-between rounded border border-solid px-3 py-2 font-inherit text-base text-inherit file:hidden focus:border-
|
|
64
|
+
: 'leading-0 flex w-full max-w-full relative appearance-none placeholder:font-light placeholder:text-gray-500 items-center justify-between rounded border border-solid px-3 py-2 font-inherit text-base text-inherit file:hidden focus:border-gray-600 focus:placeholder:text-gray-400',
|
|
65
65
|
// variant styles
|
|
66
66
|
this.headless
|
|
67
67
|
? `${this.name}--${this.variant}`
|
|
@@ -69,6 +69,8 @@ export const formControlStyleMixin = {
|
|
|
69
69
|
? 'border-error-300'
|
|
70
70
|
: this.isSuccess
|
|
71
71
|
? 'border-success-300'
|
|
72
|
+
: this.isOutline
|
|
73
|
+
? 'border-gray-700'
|
|
72
74
|
: 'border-gray-300',
|
|
73
75
|
// height styles
|
|
74
76
|
this.headless
|
|
@@ -84,5 +86,11 @@ export const formControlStyleMixin = {
|
|
|
84
86
|
: null,
|
|
85
87
|
];
|
|
86
88
|
},
|
|
89
|
+
|
|
90
|
+
// not all places as form control is used needs outline,
|
|
91
|
+
// so this is here mostly as a placeholder
|
|
92
|
+
isOutline() {
|
|
93
|
+
return null
|
|
94
|
+
}
|
|
87
95
|
},
|
|
88
96
|
};
|
package/package.json
CHANGED
|
@@ -11,6 +11,17 @@
|
|
|
11
11
|
@keydown.up.prevent="onKeyDownOrUp"
|
|
12
12
|
@keydown.esc.stop="onKeyEsc"
|
|
13
13
|
>
|
|
14
|
+
<template v-if="hasBadge">
|
|
15
|
+
<span
|
|
16
|
+
:class="[
|
|
17
|
+
headless
|
|
18
|
+
? 'listbox-button__badge'
|
|
19
|
+
: 'absolute -right-2 -top-2 grid h-5 min-w-[20px] place-content-center rounded-full bg-gray-800 text-xs font-medium text-white',
|
|
20
|
+
]"
|
|
21
|
+
>
|
|
22
|
+
{{ valueLength }}
|
|
23
|
+
</span>
|
|
24
|
+
</template>
|
|
14
25
|
<span :class="[headless ? 'listbox-button__text' : 'truncate text-left']">
|
|
15
26
|
<slot></slot>
|
|
16
27
|
</span>
|
|
@@ -59,6 +70,10 @@ export default {
|
|
|
59
70
|
return this.apiListbox().componentContent;
|
|
60
71
|
},
|
|
61
72
|
|
|
73
|
+
multiple() {
|
|
74
|
+
return this.apiListbox().multiple;
|
|
75
|
+
},
|
|
76
|
+
|
|
62
77
|
items() {
|
|
63
78
|
return this.apiListbox().items;
|
|
64
79
|
},
|
|
@@ -70,6 +85,22 @@ export default {
|
|
|
70
85
|
lastMenuItem() {
|
|
71
86
|
return this.items[this.items.length - 1];
|
|
72
87
|
},
|
|
88
|
+
|
|
89
|
+
valueLength() {
|
|
90
|
+
if (this.multiple) {
|
|
91
|
+
return this.apiListbox().valueComputed.length;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
return 0;
|
|
95
|
+
},
|
|
96
|
+
|
|
97
|
+
hasBadge() {
|
|
98
|
+
return this.valueLength > 0;
|
|
99
|
+
},
|
|
100
|
+
|
|
101
|
+
isOutline() {
|
|
102
|
+
return this.valueLength > 0;
|
|
103
|
+
},
|
|
73
104
|
},
|
|
74
105
|
|
|
75
106
|
mounted() {
|