@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.5 → 1.0.7

package/src/ui/select.vue

@@ -1,77 +1,77 @@
-<template>
-  <SelectMultiple
-    v-if="multiple"
-    v-bind="{
-      modelValue,
-      options,
-      placeholder,
-      title,
-      maxDisplay,
-      disabled,
-      size,
-      customClass: mergedClass
-    }"
-    @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';
-
-import SelectMultiple from './select-multiple.vue';
-import { Select } 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: '',
-  },
-});
-
-
-const emit = defineEmits(['update:modelValue']);
-const $attrs = useAttrs();
-const mergedClass = computed(() => props.customClass || $attrs.class || '');
-
-// Remove 'multiple' prop for single select, pass the rest
-const singleProps = computed(() => {
-  const { multiple, ...rest } = { ...props, class: mergedClass.value };
-  return rest;
-});
-</script>
+<template>
+  <SelectMultiple
+    v-if="multiple"
+    v-bind="{
+      modelValue,
+      options,
+      placeholder,
+      title,
+      maxDisplay,
+      disabled,
+      size,
+      customClass: mergedClass
+    }"
+    @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';
+
+import SelectMultiple from './select-multiple.vue';
+import { Select } 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: '',
+  },
+});
+
+
+const emit = defineEmits(['update:modelValue']);
+const $attrs = useAttrs();
+const mergedClass = computed(() => props.customClass || $attrs.class || '');
+
+// Remove 'multiple' prop for single select, pass the rest
+const singleProps = computed(() => {
+  const { multiple, ...rest } = { ...props, class: mergedClass.value };
+  return rest;
+});
+</script>

package/src/ui/separator.vue

@@ -1,60 +1,60 @@
-<template>
-  <Separator
-    :role="role"
-    :aria-orientation="orientation"
-    :aria-hidden="decorative"
-    :orientation="orientation"
-    :decorative="decorative"
-    :class="[
-      'relative shrink-0 bg-border',
-      orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
-      $attrs.class || '',
-    ]"
-    v-bind="$attrs"
-  >
-    <template v-if="text">
-      <div class="absolute inset-0 flex items-center">
-        <div :class="['relative flex w-full', alignClass]">
-          <span class="bg-background px-2 text-xs uppercase text-muted-foreground">{{ text }}</span>
-        </div>
-      </div>
-    </template>
-  </Separator>
-</template>
-
-<script setup>
-import { computed, defineProps, useAttrs } from 'vue';
-import { Separator } from '@/shadcn/separator';
-
-const props = defineProps({
-  orientation: {
-    type: String,
-    default: 'horizontal',
-    validator: v => ['horizontal', 'vertical'].includes(v),
-  },
-  role: {
-    type: String,
-    default: 'separator',
-  },
-  decorative: {
-    type: Boolean,
-    default: true,
-  },
-  text: String,
-  align: {
-    type: String,
-    default: 'center',
-    validator: v => ['start', 'center', 'end'].includes(v),
-  },
-});
-
-const $attrs = useAttrs();
-
-const alignClass = computed(() => {
-  return props.align === 'start'
-    ? 'justify-start'
-    : props.align === 'end'
-    ? 'justify-end'
-    : 'justify-center';
-});
-</script>
+<template>
+  <Separator
+    :role="role"
+    :aria-orientation="orientation"
+    :aria-hidden="decorative"
+    :orientation="orientation"
+    :decorative="decorative"
+    :class="[
+      'relative shrink-0 bg-border',
+      orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
+      $attrs.class || '',
+    ]"
+    v-bind="$attrs"
+  >
+    <template v-if="text">
+      <div class="absolute inset-0 flex items-center">
+        <div :class="['relative flex w-full', alignClass]">
+          <span class="bg-background px-2 text-xs uppercase text-muted-foreground">{{ text }}</span>
+        </div>
+      </div>
+    </template>
+  </Separator>
+</template>
+
+<script setup>
+import { computed, defineProps, useAttrs } from 'vue';
+import { Separator } from '@/shadcn/separator';
+
+const props = defineProps({
+  orientation: {
+    type: String,
+    default: 'horizontal',
+    validator: v => ['horizontal', 'vertical'].includes(v),
+  },
+  role: {
+    type: String,
+    default: 'separator',
+  },
+  decorative: {
+    type: Boolean,
+    default: true,
+  },
+  text: String,
+  align: {
+    type: String,
+    default: 'center',
+    validator: v => ['start', 'center', 'end'].includes(v),
+  },
+});
+
+const $attrs = useAttrs();
+
+const alignClass = computed(() => {
+  return props.align === 'start'
+    ? 'justify-start'
+    : props.align === 'end'
+    ? 'justify-end'
+    : 'justify-center';
+});
+</script>

package/src/ui/sheet.vue

@@ -1,50 +1,50 @@
-<script setup lang="ts">
-import { ref, watch, computed } from 'vue';
-import { cn } from '@/lib/utils';
-
-defineProps({
-  open: Boolean,
-  side: { type: String, default: 'right' },
-  class: String,
-});
-
-defineEmits(['update:open']);
-</script>
-<template>
-  <Teleport to="body">
-    <transition name="fade">
-      <div v-if="open" class="fixed inset-0 z-50 bg-black/50" data-slot="sheet-overlay" />
-    </transition>
-    <transition name="slide">
-      <div
-        v-if="open"
-        :data-slot="'sheet-content'"
-        :class="[
-          'bg-background fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out',
-          side === 'right' && 'inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
-          side === 'left' && 'inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
-          side === 'top' && 'inset-x-0 top-0 h-auto border-b',
-          side === 'bottom' && 'inset-x-0 bottom-0 h-auto border-t',
-          $props.class,
-        ]"
-      >
-        <slot />
-        <button
-          class="ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
-          @click="$emit('update:open', false)"
-        >
-          <span class="sr-only">Close</span>
-          <!-- Replace with your icon component -->
-          <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
-        </button>
-      </div>
-    </transition>
-  </Teleport>
-</template>
-<style scoped>
-.fade-enter-active, .fade-leave-active { transition: opacity .2s; }
-.fade-enter-from, .fade-leave-to { opacity: 0; }
-.slide-enter-active, .slide-leave-active { transition: all .3s cubic-bezier(.4,0,.2,1); }
-.slide-enter-from { transform: translateX(100%); }
-.slide-leave-to { transform: translateX(100%); }
-</style>
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import { cn } from '@/lib/utils';
+
+defineProps({
+  open: Boolean,
+  side: { type: String, default: 'right' },
+  class: String,
+});
+
+defineEmits(['update:open']);
+</script>
+<template>
+  <Teleport to="body">
+    <transition name="fade">
+      <div v-if="open" class="fixed inset-0 z-50 bg-black/50" data-slot="sheet-overlay" />
+    </transition>
+    <transition name="slide">
+      <div
+        v-if="open"
+        :data-slot="'sheet-content'"
+        :class="[
+          'bg-background fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out',
+          side === 'right' && 'inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+          side === 'left' && 'inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+          side === 'top' && 'inset-x-0 top-0 h-auto border-b',
+          side === 'bottom' && 'inset-x-0 bottom-0 h-auto border-t',
+          $props.class,
+        ]"
+      >
+        <slot />
+        <button
+          class="ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
+          @click="$emit('update:open', false)"
+        >
+          <span class="sr-only">Close</span>
+          <!-- Replace with your icon component -->
+          <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+<style scoped>
+.fade-enter-active, .fade-leave-active { transition: opacity .2s; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+.slide-enter-active, .slide-leave-active { transition: all .3s cubic-bezier(.4,0,.2,1); }
+.slide-enter-from { transform: translateX(100%); }
+.slide-leave-to { transform: translateX(100%); }
+</style>

package/src/ui/sidebar/BaseSidebar.vue

@@ -1,97 +1,97 @@
-<script setup lang="ts">
-import { cn } from '@/lib/utils';
-import Sheet from '@/ui/sheet.vue';
-import SheetContent from '@/ui/SheetContent.vue';
-import SheetHeader from '@/ui/SheetHeader.vue';
-import SheetTitle from '@/ui/SheetTitle.vue';
-import SheetDescription from '@/ui/SheetDescription.vue';
-import { inject } from 'vue';
-
-const SIDEBAR_WIDTH_MOBILE = '260px';
-
-const props = defineProps({
-  side: { type: String, default: 'left' },
-  variant: { type: String, default: 'sidebar' },
-  collapsible: { type: String, default: 'icon' },
-  class: { type: String, default: '' },
-});
-
-const sidebar = inject('sidebarContext');
-</script>
-<template>
-  <div
-    v-if="props.collapsible === 'none'"
-    data-slot="sidebar"
-    :class="cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', props.class)"
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
-  <Sheet
-    v-else-if="sidebar.isMobile"
-    :open="sidebar.openMobile"
-    @update:open="sidebar.setOpenMobile"
-    v-bind="$attrs"
-  >
-    <SheetContent
-      data-sidebar="sidebar"
-      data-slot="sidebar"
-      data-mobile="true"
-      class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
-      :style="{ '--sidebar-width': SIDEBAR_WIDTH_MOBILE }"
-      :side="props.side"
-    >
-      <SheetHeader class="sr-only">
-        <SheetTitle>Sidebar</SheetTitle>
-        <SheetDescription>Displays the mobile sidebar.</SheetDescription>
-      </SheetHeader>
-      <div class="flex h-full w-full flex-col">
-        <slot />
-      </div>
-    </SheetContent>
-  </Sheet>
-  <div
-    v-else
-    class="group peer text-sidebar-foreground hidden md:block h-full"
-    :data-state="sidebar.state"
-    :data-collapsible="sidebar.state === 'collapsed' ? props.collapsible : ''"
-    :data-variant="props.variant"
-    :data-side="props.side"
-    data-slot="sidebar"
-  >
-    <!-- Sidebar gap for desktop -->
-    <div
-      data-slot="sidebar-gap"
-      :class="cn(
-        'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
-        'group-data-[collapsible=offcanvas]:w-0',
-        'group-data-[side=right]:rotate-180',
-        props.variant === 'floating' || props.variant === 'inset'
-          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+var(--spacing-4))]'
-          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
-      )"
-    />
-    <div
-      data-slot="sidebar-container"
-      :class="cn(
-        'fixed inset-y-0 z-10 hidden h-full w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
-        props.side === 'left'
-          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
-          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
-        props.variant === 'floating' || props.variant === 'inset'
-          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-autocollapse)+var(--spacing-4)+2px)]'
-          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
-        props.class,
-      )"
-      v-bind="$attrs"
-    >
-      <div
-        data-sidebar="sidebar"
-        data-slot="sidebar-inner"
-        class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
-      >
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+import Sheet from '@/ui/sheet.vue';
+import SheetContent from '@/ui/SheetContent.vue';
+import SheetHeader from '@/ui/SheetHeader.vue';
+import SheetTitle from '@/ui/SheetTitle.vue';
+import SheetDescription from '@/ui/SheetDescription.vue';
+import { inject } from 'vue';
+
+const SIDEBAR_WIDTH_MOBILE = '260px';
+
+const props = defineProps({
+  side: { type: String, default: 'left' },
+  variant: { type: String, default: 'sidebar' },
+  collapsible: { type: String, default: 'icon' },
+  class: { type: String, default: '' },
+});
+
+const sidebar = inject('sidebarContext');
+</script>
+<template>
+  <div
+    v-if="props.collapsible === 'none'"
+    data-slot="sidebar"
+    :class="cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+  <Sheet
+    v-else-if="sidebar.isMobile"
+    :open="sidebar.openMobile"
+    @update:open="sidebar.setOpenMobile"
+    v-bind="$attrs"
+  >
+    <SheetContent
+      data-sidebar="sidebar"
+      data-slot="sidebar"
+      data-mobile="true"
+      class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+      :style="{ '--sidebar-width': SIDEBAR_WIDTH_MOBILE }"
+      :side="props.side"
+    >
+      <SheetHeader class="sr-only">
+        <SheetTitle>Sidebar</SheetTitle>
+        <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+      </SheetHeader>
+      <div class="flex h-full w-full flex-col">
+        <slot />
+      </div>
+    </SheetContent>
+  </Sheet>
+  <div
+    v-else
+    class="group peer text-sidebar-foreground hidden md:block h-full"
+    :data-state="sidebar.state"
+    :data-collapsible="sidebar.state === 'collapsed' ? props.collapsible : ''"
+    :data-variant="props.variant"
+    :data-side="props.side"
+    data-slot="sidebar"
+  >
+    <!-- Sidebar gap for desktop -->
+    <div
+      data-slot="sidebar-gap"
+      :class="cn(
+        'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+        'group-data-[collapsible=offcanvas]:w-0',
+        'group-data-[side=right]:rotate-180',
+        props.variant === 'floating' || props.variant === 'inset'
+          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+var(--spacing-4))]'
+          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+      )"
+    />
+    <div
+      data-slot="sidebar-container"
+      :class="cn(
+        'fixed inset-y-0 z-10 hidden h-full w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+        props.side === 'left'
+          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+        props.variant === 'floating' || props.variant === 'inset'
+          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-autocollapse)+var(--spacing-4)+2px)]'
+          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+        props.class,
+      )"
+      v-bind="$attrs"
+    >
+      <div
+        data-sidebar="sidebar"
+        data-slot="sidebar-inner"
+        class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

package/src/ui/sidebar/BasicSearch.vue

@@ -1,27 +1,27 @@
-<script setup lang="ts">
-import { Search } from 'lucide-vue-next';
-const props = defineProps({
-  class: String,
-  placeholder: { type: String, default: 'Search...' },
-  value: String,
-  onChange: Function,
-});
-function handleInput(e: Event) {
-  const target = e.target as HTMLInputElement;
-  props.onChange && props.onChange(target.value);
-}
-</script>
-<template>
-  <div :class="['mb-4 px-1', props.class]">
-    <div class="relative">
-      <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-      <input
-        type="text"
-        :placeholder="props.placeholder"
-        :value="props.value"
-        @input="handleInput"
-        class="w-full pl-9 pr-3 py-2 text-sm bg-muted/50 border border-border rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
-      />
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+import { Search } from 'lucide-vue-next';
+const props = defineProps({
+  class: String,
+  placeholder: { type: String, default: 'Search...' },
+  value: String,
+  onChange: Function,
+});
+function handleInput(e: Event) {
+  const target = e.target as HTMLInputElement;
+  props.onChange && props.onChange(target.value);
+}
+</script>
+<template>
+  <div :class="['mb-4 px-1', props.class]">
+    <div class="relative">
+      <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+      <input
+        type="text"
+        :placeholder="props.placeholder"
+        :value="props.value"
+        @input="handleInput"
+        class="w-full pl-9 pr-3 py-2 text-sm bg-muted/50 border border-border rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+      />
+    </div>
+  </div>
+</template>