@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.12 → 1.0.13

package/package.json

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

package/src/index.ts

@@ -8,6 +8,8 @@ export * from './shadcn/accordion';
 export * from './shadcn/spinner';
 export * from './shadcn/tooltip';
 export * from './shadcn/command';
+export * from './shadcn/switch';
+export * from './shadcn/collapsible';
 
 export * from './ui/tree';
 export { default as InputOTP } from './ui/InputOTP.vue';
@@ -157,7 +159,7 @@ export { default as Wrapper } from './ui/sidebar/Wrapper.vue';
 export { default as Skeleton } from './ui/skeleton.vue';
 export { default as Slider } from './ui/slider.vue';
 export { default as Sonner } from './ui/sonner.vue';
-export { default as Switch } from './ui/switch.vue';
+// export { default as Switch } from './ui/switch.vue';
 export { default as TabContent } from './ui/tab-content.vue';
 export { default as TabList } from './ui/tab-list.vue';
 export { default as TabPanel } from './ui/tab-panel.vue';

package/src/shadcn/collapsible/Collapsible.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { CollapsibleRootEmits, CollapsibleRootProps } from "reka-ui"
+import { CollapsibleRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<CollapsibleRootProps>()
+const emits = defineEmits<CollapsibleRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <CollapsibleRoot
+    v-slot="slotProps"
+    data-slot="collapsible"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </CollapsibleRoot>
+</template>

package/src/shadcn/collapsible/CollapsibleContent.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { CollapsibleContentProps } from "reka-ui"
+import { CollapsibleContent } from "reka-ui"
+
+const props = defineProps<CollapsibleContentProps>()
+</script>
+
+<template>
+  <CollapsibleContent
+    data-slot="collapsible-content"
+    v-bind="props"
+  >
+    <slot />
+  </CollapsibleContent>
+</template>

package/src/shadcn/collapsible/CollapsibleTrigger.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { CollapsibleTriggerProps } from "reka-ui"
+import { CollapsibleTrigger } from "reka-ui"
+
+const props = defineProps<CollapsibleTriggerProps>()
+</script>
+
+<template>
+  <CollapsibleTrigger
+    data-slot="collapsible-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </CollapsibleTrigger>
+</template>

package/src/shadcn/collapsible/index.ts

@@ -0,0 +1,3 @@
+export { default as Collapsible } from "./Collapsible.vue"
+export { default as CollapsibleContent } from "./CollapsibleContent.vue"
+export { default as CollapsibleTrigger } from "./CollapsibleTrigger.vue"

package/src/ui/select.vue

@@ -13,65 +13,53 @@
     }"
     @update:modelValue="$emit('update:modelValue', $event)"
   />
-  <Select v-else v-bind="singleProps" data-slot="select" :custom-class="customClass" @update:modelValue="$emit('update:modelValue', $event)" >
-    <slot />
-  </Select>
-</template>
-
-<script setup>
 
-import { ref, computed, defineProps, defineEmits, useAttrs } from 'vue';
+  <ShadcnSelect
+    v-else
+    v-model="internalValue"
+    :disabled="disabled"
+  >
+    <SelectTrigger class="w-full">
+      <SelectValue :placeholder="placeholder" />
+    </SelectTrigger>
 
-import SelectMultiple from './select-multiple.vue';
-import { Select } from '@/shadcn/select';
+    <SelectContent>
+      <SelectItem
+        v-for="opt in options"
+        :key="String(opt.value)"
+        :value="String(opt.value)"
+      >
+        {{ opt.label }}
+      </SelectItem>
+    </SelectContent>
+  </ShadcnSelect>
+</template>
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+import {
+  Select as ShadcnSelect,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from '@/shadcn/select'
 
 const props = defineProps({
-  modelValue: {
-    type: [String, Array],
-    default: '',
-  },
-  options: {
-    type: Array,
-    default: () => [],
-  },
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-    default: 'Select option',
-  },
-  title: {
-    type: String,
-    default: 'Select Options',
-  },
-  maxDisplay: {
-    type: Number,
-    default: 2,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  size: {
-    type: String,
-    default: 'default',
-  },
-  customClass: {
-    type: String,
-    default: '',
-  },
-});
+  modelValue: [String, Array],
+  options: { type: Array, default: () => [] },
+  multiple: Boolean,
+  placeholder: String,
+  disabled: Boolean,
+  customClass: String,
+})
 
+const emit = defineEmits(['update:modelValue'])
 
-const emit = defineEmits(['update:modelValue']);
-const $attrs = useAttrs();
-const mergedClass = computed(() => props.customClass || $attrs.class || '');
+const internalValue = computed({
+  get: () => props.modelValue,
+  set: v => emit('update:modelValue', v),
+})
 
-// Remove 'multiple' prop for single select, pass the rest
-const singleProps = computed(() => {
-  const { multiple, ...rest } = { ...props, class: mergedClass.value };
-  return rest;
-});
+const attrs = useAttrs()
+const mergedClass = computed(() => props.customClass || attrs.class || '')
 </script>

package/src/ui/slider.vue

@@ -1,36 +1,36 @@
-<template>
-  <Slider ref="sliderRef" :class="['relative flex w-full touch-none select-none items-center', customClass]" v-bind="props" />
-</template>
-
-<script setup>
-import { defineProps, useAttrs } from 'vue';
+<script setup lang="ts">
+import { computed } from "vue"
+import SliderBase from "@/shadcn/slider/Slider.vue"
 
 const props = defineProps({
   modelValue: {
     type: Number,
     default: 0,
   },
-  min: {
-    type: Number,
-    default: 0,
-  },
-  max: {
-    type: Number,
-    default: 100,
-  },
-  step: {
-    type: Number,
-    default: 1,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  customClass: {
-    type: [String, Array, Object],
-    default: '',
-  }
-});
+  min: Number,
+  max: Number,
+  step: Number,
+  disabled: Boolean,
+  class: String,
+})
+
+const emit = defineEmits<{
+  "update:modelValue": [value: number]
+}>()
 
-const $attrs = useAttrs();
+const value = computed({
+  get: () => [props.modelValue],
+  set: (v: number[]) => emit("update:modelValue", v[0]),
+})
 </script>
+
+<template>
+  <SliderBase
+    v-model="value"
+    :min="min"
+    :max="max"
+    :step="step"
+    :disabled="disabled"
+    :class="class"
+  />
+</template>

package/src/ui/switch.vue

@@ -1,50 +1,32 @@
 <script setup lang="ts">
-import { SwitchRoot, SwitchThumb } from 'reka-ui'
-import { defineProps, defineEmits, useAttrs, computed } from 'vue'
-import { cn } from './utils'
+import { computed } from 'vue'
+import BaseSwitch from '@/shadcn/switch/Switch.vue'
 
 const props = defineProps({
-  modelValue: Boolean,
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
   disabled: Boolean,
   class: String,
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
 
-const attrs = useAttrs()
-
-const rootAttrs = computed(() => {
-  const { checked, modelValue, disabled, ...rest } = attrs
-  return rest
+// 🔑 Bridge shadcn <-> Vue v-model
+const checked = computed({
+  get: () => props.modelValue,
+  set: (v: boolean) => emit('update:modelValue', v),
 })
 </script>
 
 <template>
-  <SwitchRoot
-    v-bind="rootAttrs"
-    :checked="modelValue"
+  <BaseSwitch
+    :checked="checked"
+    @update:checked="checked = $event"
     :disabled="disabled"
-    @update:checked="v => emit('update:modelValue', v)"
-    :class="cn(
-      'relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full transition-colors',
-      'bg-muted data-[state=checked]:bg-primary',
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-      'disabled:cursor-not-allowed disabled:opacity-50',
-      props.class
-    )"
-  >
-    <SwitchThumb
-      class="
-        pointer-events-none
-        block
-        h-5 w-5
-        rounded-full
-        bg-background
-        shadow-lg
-        transition-transform
-        translate-x-1
-        data-[state=checked]:translate-x-5
-      "
-    />
-  </SwitchRoot>
+    :class="class"
+  />
 </template>