@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.17 → 1.0.18
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/dist/perisai-ui.es.js +575 -584
- package/dist/perisai-ui.umd.js +1 -1
- package/package.json +1 -1
- package/src/shadcn/select/SelectTrigger.vue +1 -1
- package/src/ui/SelectTrigger.vue +1 -1
- package/src/ui/select-multiple.vue +46 -46
package/package.json
CHANGED
|
@@ -21,7 +21,7 @@ const forwardedProps = useForwardProps(delegatedProps)
|
|
|
21
21
|
:data-size="size"
|
|
22
22
|
v-bind="forwardedProps"
|
|
23
23
|
:class="cn(
|
|
24
|
-
'!border-
|
|
24
|
+
'!border-input !bg-input-background hover:!bg-select-hover focus-visible:!border-ring focus-visible:!ring-ring/50 data-[placeholder]:!text-gray-400 [&_svg:not([class*=\'text-\'])]:!text-gray-400 focus-visible:!ring-blue-500/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex w-full items-center justify-between gap-2 rounded-lg !border px-4 py-2.5 text-sm !text-white transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
|
|
25
25
|
props.class,
|
|
26
26
|
)"
|
|
27
27
|
>
|
package/src/ui/SelectTrigger.vue
CHANGED
|
@@ -12,7 +12,7 @@ defineProps({
|
|
|
12
12
|
data-slot="select-trigger"
|
|
13
13
|
:data-size="size"
|
|
14
14
|
:class="cn(
|
|
15
|
-
'border-
|
|
15
|
+
'justify-between border-input bg-input-background hover:bg-select-hover focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] data-[placeholder]:text-gray-400 [&_svg:not([class*=\'text-\'])]:text-gray-400 focus-visible:ring-blue-500/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex w-full items-center gap-2 border px-4 py-2.5 text-sm text-white transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:min-h-9 data-[size=sm]:min-h-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 *:data-[slot=select-value]:overflow-hidden [&_[data-slot=select-value]_div]:flex [&_[data-slot=select-value]_div]:items-center [&_[data-slot=select-value]_div]:gap-2 [&_[data-slot=select-value]_.text-xs]:hidden [&_[data-slot=select-value]_svg]:shrink-0',
|
|
16
16
|
$props.class,
|
|
17
17
|
)"
|
|
18
18
|
v-bind="$attrs"
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
</template>
|
|
20
20
|
<template v-else-if="modelValue.length <= maxDisplay">
|
|
21
21
|
<Badge
|
|
22
|
-
v-for="
|
|
22
|
+
v-for="val in modelValue"
|
|
23
23
|
:key="val"
|
|
24
24
|
variant="soft-neutral"
|
|
25
25
|
class="text-xs shrink-0"
|
|
@@ -47,19 +47,23 @@
|
|
|
47
47
|
<div class="max-h-[200px] overflow-y-auto">
|
|
48
48
|
<div
|
|
49
49
|
v-for="option in options"
|
|
50
|
-
:key="option.
|
|
50
|
+
:key="option.value"
|
|
51
51
|
:class="[
|
|
52
52
|
'relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-2 text-sm outline-hidden select-none transition-colors',
|
|
53
|
-
option.disabled
|
|
53
|
+
option.disabled
|
|
54
|
+
? 'opacity-50 cursor-not-allowed'
|
|
55
|
+
: 'hover:bg-accent hover:text-accent-foreground'
|
|
54
56
|
]"
|
|
55
|
-
@click="!option.disabled && handleValueChange(option.
|
|
57
|
+
@click="!option.disabled && handleValueChange(option.value, !isSelected(option.value))"
|
|
56
58
|
>
|
|
57
59
|
<Checkbox
|
|
58
|
-
:model-value="
|
|
60
|
+
:model-value="isSelected(option.value)"
|
|
59
61
|
:disabled="option.disabled"
|
|
60
62
|
class="pointer-events-none"
|
|
61
63
|
/>
|
|
62
|
-
<span class="flex-1 font-medium leading-none">
|
|
64
|
+
<span class="flex-1 font-medium leading-none">
|
|
65
|
+
{{ option.label }}
|
|
66
|
+
</span>
|
|
63
67
|
</div>
|
|
64
68
|
</div>
|
|
65
69
|
</div>
|
|
@@ -69,14 +73,14 @@
|
|
|
69
73
|
</template>
|
|
70
74
|
|
|
71
75
|
<script setup>
|
|
72
|
-
import { ref, computed, defineProps, defineEmits, useAttrs } from 'vue'
|
|
73
|
-
import Popover from './popover.vue'
|
|
74
|
-
import PopoverTrigger from './PopoverTrigger.vue'
|
|
75
|
-
import PopoverContent from './PopoverContent.vue'
|
|
76
|
-
import Button from './button.vue'
|
|
77
|
-
import Badge from './badge.vue'
|
|
78
|
-
import Checkbox from './checkbox.vue'
|
|
79
|
-
import ChevronDownIcon from 'lucide-vue-next/dist/esm/icons/chevron-down'
|
|
76
|
+
import { ref, computed, defineProps, defineEmits, useAttrs } from 'vue'
|
|
77
|
+
import Popover from './popover.vue'
|
|
78
|
+
import PopoverTrigger from './PopoverTrigger.vue'
|
|
79
|
+
import PopoverContent from './PopoverContent.vue'
|
|
80
|
+
import Button from './button.vue'
|
|
81
|
+
import Badge from './badge.vue'
|
|
82
|
+
import Checkbox from './checkbox.vue'
|
|
83
|
+
import ChevronDownIcon from 'lucide-vue-next/dist/esm/icons/chevron-down'
|
|
80
84
|
|
|
81
85
|
const props = defineProps({
|
|
82
86
|
modelValue: {
|
|
@@ -87,49 +91,45 @@ const props = defineProps({
|
|
|
87
91
|
type: Array,
|
|
88
92
|
default: () => [],
|
|
89
93
|
},
|
|
90
|
-
placeholder:
|
|
91
|
-
|
|
92
|
-
default: 'Select options...',
|
|
93
|
-
},
|
|
94
|
-
title: {
|
|
95
|
-
type: String,
|
|
96
|
-
default: 'Select Options',
|
|
97
|
-
},
|
|
94
|
+
placeholder: String,
|
|
95
|
+
title: String,
|
|
98
96
|
maxDisplay: {
|
|
99
97
|
type: Number,
|
|
100
98
|
default: 2,
|
|
101
99
|
},
|
|
102
|
-
disabled:
|
|
103
|
-
type: Boolean,
|
|
104
|
-
default: false,
|
|
105
|
-
},
|
|
100
|
+
disabled: Boolean,
|
|
106
101
|
size: {
|
|
107
102
|
type: String,
|
|
108
103
|
default: 'default',
|
|
109
104
|
},
|
|
110
|
-
class:
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
105
|
+
class: String,
|
|
106
|
+
})
|
|
107
|
+
|
|
108
|
+
const emit = defineEmits(['update:modelValue'])
|
|
109
|
+
const $attrs = useAttrs()
|
|
110
|
+
const isOpen = ref(false)
|
|
111
|
+
|
|
112
|
+
const customClass = computed(() => props.class || $attrs.class || '')
|
|
115
113
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
const customClass = computed(() => props.class || $attrs.class || '');
|
|
114
|
+
function isSelected(value) {
|
|
115
|
+
return Array.isArray(props.modelValue) && props.modelValue.includes(value)
|
|
116
|
+
}
|
|
120
117
|
|
|
121
|
-
function getLabel(
|
|
122
|
-
const found = props.options.find(
|
|
123
|
-
return found ? found.label :
|
|
118
|
+
function getLabel(value) {
|
|
119
|
+
const found = props.options.find(o => o.value === value)
|
|
120
|
+
return found ? found.label : value
|
|
124
121
|
}
|
|
125
122
|
|
|
126
|
-
function handleValueChange(
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
123
|
+
function handleValueChange(value, checked) {
|
|
124
|
+
const current = Array.isArray(props.modelValue) ? props.modelValue : []
|
|
125
|
+
let next = [...current]
|
|
126
|
+
|
|
127
|
+
if (checked && !next.includes(value)) {
|
|
128
|
+
next.push(value)
|
|
129
|
+
} else if (!checked) {
|
|
130
|
+
next = next.filter(v => v !== value)
|
|
132
131
|
}
|
|
133
|
-
|
|
132
|
+
|
|
133
|
+
emit('update:modelValue', next)
|
|
134
134
|
}
|
|
135
|
-
</script>
|
|
135
|
+
</script>
|