@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.17 → 1.0.19

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.0.17",
+  "version": "1.0.19",
   "main": "dist/perisai-ui.umd.js",
   "module": "dist/perisai-ui.es.js",
   "scripts": {

package/src/shadcn/select/SelectTrigger.vue

@@ -21,7 +21,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     :data-size="size"
     v-bind="forwardedProps"
     :class="cn(
-      '!border-neutral-600 data-[placeholder]:!text-gray-400 [&_svg:not([class*=\'text-\'])]:!text-gray-400 focus-visible:!border-blue-500 focus-visible:!ring-blue-500/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:!bg-neutral-600 flex w-full items-center justify-between gap-2 rounded-lg !border !bg-neutral-700 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',
+      '!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',
       props.class,
     )"
   >

package/src/ui/SelectGroup.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
 import { SelectGroup as RekaSelectGroup } from "reka-ui"
+import { cn } from "./utils"
+
+const props = defineProps({
+  class: String
+})
 </script>
 
 <template>
   <RekaSelectGroup
     data-slot="select-group"
+    :class="cn(props.class)"
     v-bind="$attrs"
   >
     <slot />

package/src/ui/SelectTrigger.vue

@@ -12,7 +12,7 @@ defineProps({
     data-slot="select-trigger"
     :data-size="size"
     :class="cn(
-      'border-gray-700 data-[placeholder]:text-gray-400 [&_svg:not([class*=\'text-\'])]:text-gray-400 focus-visible:border-blue-500 focus-visible:ring-blue-500/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-gray-750 flex w-full items-center justify-between gap-2 rounded-lg border bg-gray-800 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',
+      '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',
       $props.class,
     )"
     v-bind="$attrs"

package/src/ui/SelectValue.vue

@@ -1,9 +1,18 @@
 <script setup lang="ts">
 import { SelectValue } from '@/shadcn/select';
+import { cn } from './utils';
+
+const props = defineProps({
+  class: String,
+});
 </script>
 
 <template>
-  <SelectValue data-slot="select-value" v-bind="$attrs">
+  <SelectValue 
+    data-slot="select-value" 
+    :class="cn(props.class)"
+    v-bind="$attrs"
+  >
     <slot />
   </SelectValue>
 </template>

package/src/ui/select-multiple.vue

@@ -19,7 +19,7 @@
             </template>
             <template v-else-if="modelValue.length <= maxDisplay">
               <Badge
-                v-for="(val, idx) in modelValue"
+                v-for="val in modelValue"
                 :key="val"
                 variant="soft-neutral"
                 class="text-xs shrink-0"
@@ -47,19 +47,23 @@
           <div class="max-h-[200px] overflow-y-auto">
             <div
               v-for="option in options"
-              :key="option.id"
+              :key="option.value"
               :class="[
                 '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',
-                option.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-accent hover:text-accent-foreground'
+                option.disabled
+                  ? 'opacity-50 cursor-not-allowed'
+                  : 'hover:bg-accent hover:text-accent-foreground'
               ]"
-              @click="!option.disabled && handleValueChange(option.id, !modelValue.includes(option.id))"
+              @click="!option.disabled && handleValueChange(option.value, !isSelected(option.value))"
             >
               <Checkbox
-                :model-value="modelValue.includes(option.id)"
+                :model-value="isSelected(option.value)"
                 :disabled="option.disabled"
                 class="pointer-events-none"
               />
-              <span class="flex-1 font-medium leading-none">{{ option.label }}</span>
+              <span class="flex-1 font-medium leading-none">
+                {{ option.label }}
+              </span>
             </div>
           </div>
         </div>
@@ -69,14 +73,14 @@
 </template>
 
 <script setup>
-import { ref, computed, defineProps, defineEmits, useAttrs } from 'vue';
-import Popover from './popover.vue';
-import PopoverTrigger from './PopoverTrigger.vue';
-import PopoverContent from './PopoverContent.vue';
-import Button from './button.vue';
-import Badge from './badge.vue';
-import Checkbox from './checkbox.vue';
-import ChevronDownIcon from 'lucide-vue-next/dist/esm/icons/chevron-down';
+import { ref, computed, defineProps, defineEmits, useAttrs } from 'vue'
+import Popover from './popover.vue'
+import PopoverTrigger from './PopoverTrigger.vue'
+import PopoverContent from './PopoverContent.vue'
+import Button from './button.vue'
+import Badge from './badge.vue'
+import Checkbox from './checkbox.vue'
+import ChevronDownIcon from 'lucide-vue-next/dist/esm/icons/chevron-down'
 
 const props = defineProps({
   modelValue: {
@@ -87,49 +91,45 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
-  placeholder: {
-    type: String,
-    default: 'Select options...',
-  },
-  title: {
-    type: String,
-    default: 'Select Options',
-  },
+  placeholder: String,
+  title: String,
   maxDisplay: {
     type: Number,
     default: 2,
   },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
+  disabled: Boolean,
   size: {
     type: String,
     default: 'default',
   },
-  class: {
-    type: String,
-    default: '',
-  },
-});
+  class: String,
+})
+
+const emit = defineEmits(['update:modelValue'])
+const $attrs = useAttrs()
+const isOpen = ref(false)
+
+const customClass = computed(() => props.class || $attrs.class || '')
 
-const emit = defineEmits(['update:modelValue']);
-const $attrs = useAttrs();
-const isOpen = ref(false);
-const customClass = computed(() => props.class || $attrs.class || '');
+function isSelected(value) {
+  return Array.isArray(props.modelValue) && props.modelValue.includes(value)
+}
 
-function getLabel(val) {
-  const found = props.options.find((o) => o.id === val);
-  return found ? found.label : val;
+function getLabel(value) {
+  const found = props.options.find(o => o.value === value)
+  return found ? found.label : value
 }
 
-function handleValueChange(optionId, checked) {
-  let newValue = Array.isArray(props.modelValue) ? [...props.modelValue] : [];
-  if (checked) {
-    newValue.push(optionId);
-  } else {
-    newValue = newValue.filter((v) => v !== optionId);
+function handleValueChange(value, checked) {
+  const current = Array.isArray(props.modelValue) ? props.modelValue : []
+  let next = [...current]
+
+  if (checked && !next.includes(value)) {
+    next.push(value)
+  } else if (!checked) {
+    next = next.filter(v => v !== value)
   }
-  emit('update:modelValue', newValue);
+
+  emit('update:modelValue', next)
 }
-</script>
+</script>

package/src/ui/select.vue

@@ -18,19 +18,24 @@
     v-else
     v-model="internalValue"
     :disabled="disabled"
+    :class="mergedClass"
   >
     <SelectTrigger class="w-full">
-      <SelectValue :placeholder="placeholder" />
+      <slot name="trigger">
+        <SelectValue :placeholder="placeholder" />
+      </slot>
     </SelectTrigger>
 
-    <SelectContent>
-      <SelectItem
-        v-for="opt in options"
-        :key="String(opt.value)"
-        :value="String(opt.value)"
-      >
-        {{ opt.label }}
-      </SelectItem>
+    <SelectContent :class="contentClass">
+      <slot name="content">
+        <SelectItem
+          v-for="opt in options"
+          :key="String(opt.value)"
+          :value="String(opt.value)"
+        >
+          {{ opt.label }}
+        </SelectItem>
+      </slot>
     </SelectContent>
   </ShadcnSelect>
 </template>
@@ -43,6 +48,8 @@ import {
   SelectContent,
   SelectItem,
 } from '@/shadcn/select'
+import { cn } from './utils'
+import SelectMultiple from './select-multiple.vue'
 
 const props = defineProps({
   modelValue: [String, Array],
@@ -51,6 +58,10 @@ const props = defineProps({
   placeholder: String,
   disabled: Boolean,
   customClass: String,
+  contentClass: String,
+  title: String,
+  maxDisplay: { type: Number, default: 3 },
+  size: { type: String, default: 'default' },
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -61,5 +72,5 @@ const internalValue = computed({
 })
 
 const attrs = useAttrs()
-const mergedClass = computed(() => props.customClass || attrs.class || '')
+const mergedClass = computed(() => cn(props.customClass, attrs.class as string))
 </script>