@veritree/ui 0.19.2-26 → 0.19.2-28
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
package/nuxt.js
CHANGED
|
@@ -5,6 +5,7 @@ const components = [
|
|
|
5
5
|
'./src/components/Alert',
|
|
6
6
|
'./src/components/Avatar',
|
|
7
7
|
'./src/components/Button',
|
|
8
|
+
'./src/components/Checkbox',
|
|
8
9
|
'./src/components/Drawer',
|
|
9
10
|
'./src/components/Dialog',
|
|
10
11
|
'./src/components/Disclosure',
|
|
@@ -14,6 +15,7 @@ const components = [
|
|
|
14
15
|
'./src/components/Image',
|
|
15
16
|
'./src/components/Popover',
|
|
16
17
|
'./src/components/ProgressBar',
|
|
18
|
+
'./src/components/Skeleton',
|
|
17
19
|
'./src/components/Tabs',
|
|
18
20
|
];
|
|
19
21
|
|
package/package.json
CHANGED
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<input
|
|
3
|
+
type="checkbox"
|
|
4
|
+
v-model="modelValueComputed"
|
|
5
|
+
:value="value"
|
|
6
|
+
:checked="checked"
|
|
7
|
+
:disabled="disabled"
|
|
8
|
+
:indeterminate="indeterminate"
|
|
9
|
+
:class="[
|
|
10
|
+
headless
|
|
11
|
+
? 'input-checkbox'
|
|
12
|
+
: 'h-[18px] w-[18px] shrink-0 appearance-none rounded border border-solid bg-no-repeat align-middle focus-visible:ring-2 focus-visible:ring-white',
|
|
13
|
+
headless
|
|
14
|
+
? `input-checkbox--${variant}`
|
|
15
|
+
: isError
|
|
16
|
+
? 'border-error-300'
|
|
17
|
+
: 'border-gray-300',
|
|
18
|
+
checked
|
|
19
|
+
? headless
|
|
20
|
+
? 'input-checkbox--checked'
|
|
21
|
+
: 'border-secondary-300 bg-secondary-300'
|
|
22
|
+
: null,
|
|
23
|
+
disabled
|
|
24
|
+
? headless
|
|
25
|
+
? 'input-checkbox--disabled'
|
|
26
|
+
: 'pointer-events-none bg-gray-100'
|
|
27
|
+
: null,
|
|
28
|
+
indeterminate
|
|
29
|
+
? headless
|
|
30
|
+
? 'input-checkbox--indeterminate'
|
|
31
|
+
: 'border-secondary-200 bg-secondary-200'
|
|
32
|
+
: null,
|
|
33
|
+
]"
|
|
34
|
+
v-bind="$attrs"
|
|
35
|
+
@change="onChange"
|
|
36
|
+
/>
|
|
37
|
+
</template>
|
|
38
|
+
|
|
39
|
+
<script>
|
|
40
|
+
/**
|
|
41
|
+
* Notes:
|
|
42
|
+
* - Not tested with an array yet
|
|
43
|
+
*/
|
|
44
|
+
export default {
|
|
45
|
+
props: {
|
|
46
|
+
disabled: {
|
|
47
|
+
type: Boolean,
|
|
48
|
+
default: false,
|
|
49
|
+
},
|
|
50
|
+
indeterminate: {
|
|
51
|
+
type: Boolean,
|
|
52
|
+
default: false,
|
|
53
|
+
},
|
|
54
|
+
headless: {
|
|
55
|
+
type: Boolean,
|
|
56
|
+
default: false,
|
|
57
|
+
},
|
|
58
|
+
modelValue: {
|
|
59
|
+
type: [Array, Boolean],
|
|
60
|
+
default: null,
|
|
61
|
+
},
|
|
62
|
+
variant: {
|
|
63
|
+
type: [String, Object, Function],
|
|
64
|
+
default: '',
|
|
65
|
+
},
|
|
66
|
+
value: {
|
|
67
|
+
type: [Boolean, Object],
|
|
68
|
+
default: null,
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
|
|
72
|
+
data() {
|
|
73
|
+
return {
|
|
74
|
+
checked: false,
|
|
75
|
+
};
|
|
76
|
+
},
|
|
77
|
+
|
|
78
|
+
computed: {
|
|
79
|
+
modelValueComputed: {
|
|
80
|
+
get() {
|
|
81
|
+
return this.modelValue;
|
|
82
|
+
},
|
|
83
|
+
set(value) {
|
|
84
|
+
this.$emit('update:modelValue', value);
|
|
85
|
+
},
|
|
86
|
+
},
|
|
87
|
+
|
|
88
|
+
isError() {
|
|
89
|
+
return this.variant === 'error';
|
|
90
|
+
},
|
|
91
|
+
},
|
|
92
|
+
|
|
93
|
+
watch: {
|
|
94
|
+
indeterminate(newVal) {
|
|
95
|
+
this.checked = !newVal;
|
|
96
|
+
this.$el.indeterminate = newVal;
|
|
97
|
+
},
|
|
98
|
+
|
|
99
|
+
checked(newVal) {
|
|
100
|
+
if (newVal) {
|
|
101
|
+
this.$el.indeterminate = false;
|
|
102
|
+
this.$emit('update:indeterminate', false);
|
|
103
|
+
}
|
|
104
|
+
},
|
|
105
|
+
},
|
|
106
|
+
|
|
107
|
+
mounted() {
|
|
108
|
+
if (this.indeterminate) {
|
|
109
|
+
this.$el.indeterminate = this.indeterminate;
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
|
|
113
|
+
methods: {
|
|
114
|
+
onChange(event) {
|
|
115
|
+
this.checked = event.target.checked;
|
|
116
|
+
},
|
|
117
|
+
},
|
|
118
|
+
};
|
|
119
|
+
</script>
|
|
120
|
+
|
|
121
|
+
<style scoped>
|
|
122
|
+
input:not(.input-checkbox):checked,
|
|
123
|
+
input:not(.input-checkbox):indeterminate {
|
|
124
|
+
background-size: cover;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
input:not(.input-checkbox):checked {
|
|
128
|
+
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.00016 16.17L4.83016 12L3.41016 13.41L9.00016 19L21.0002 7.00003L19.5902 5.59003L9.00016 16.17Z' fill='%23ffffff'/%3E%3Cpath d='M9.00016 16.17L4.83016 12L3.41016 13.41L9.00016 19L21.0002 7.00003L19.5902 5.59003L9.00016 16.17Z' fill='%23ffffff' /%3E%3C/svg%3E%0A");
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
input:not(.input-checkbox):indeterminate {
|
|
132
|
+
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13H5V11H19V13Z' fill='%23ffffff'/%3E%3Cpath d='M19 13H5V11H19V13Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
|
|
133
|
+
}
|
|
134
|
+
</style>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<component :is="as" :class="[headless ? 'input-checkbox-text' : 'text-sm']"
|
|
3
|
+
><slot />
|
|
4
|
+
</component>
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<script>
|
|
8
|
+
export default {
|
|
9
|
+
props: {
|
|
10
|
+
as: {
|
|
11
|
+
type: String,
|
|
12
|
+
default: 'div',
|
|
13
|
+
},
|
|
14
|
+
headless: {
|
|
15
|
+
type: Boolean,
|
|
16
|
+
default: false,
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
};
|
|
20
|
+
</script>
|