@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.5 → 1.0.7

package/src/ui/scrollable-tabs-list.vue

@@ -1,148 +1,148 @@
-
-
-
-<script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, nextTick, useAttrs, defineProps } from 'vue'
-import { TabsList } from '@/shadcn/tabs'
-
-const props = defineProps({
-  class: {
-    type: [String, Array, Object],
-    default: ''
-  }
-})
-const attrs = useAttrs()
-
-const scrollContainerRef = ref<HTMLElement | null>(null)
-const canScrollLeft = ref(false)
-const canScrollRight = ref(false)
-const showButtons = ref(false)
-
-function checkScrollability() {
-  const container = scrollContainerRef.value
-  if (!container) return
-  const { scrollLeft, scrollWidth, clientWidth } = container
-  canScrollLeft.value = scrollLeft > 0
-  canScrollRight.value = scrollLeft < scrollWidth - clientWidth - 1
-  showButtons.value = scrollWidth > clientWidth
-}
-
-function scrollLeftFn() {
-  const container = scrollContainerRef.value
-  if (!container) return
-  container.scrollBy({ left: -200, behavior: 'smooth' })
-}
-
-function scrollRightFn() {
-  const container = scrollContainerRef.value
-  if (!container) return
-  container.scrollBy({ left: 200, behavior: 'smooth' })
-}
-
-let handleScroll: (() => void) | null = null;
-let handleResize: (() => void) | null = null;
-
-onMounted(() => {
-  nextTick(() => {
-    const container = scrollContainerRef.value
-    if (!container) return
-    handleScroll = () => checkScrollability()
-    handleResize = () => checkScrollability()
-    container.addEventListener('scroll', handleScroll)
-    window.addEventListener('resize', handleResize)
-    checkScrollability()
-  })
-})
-
-onBeforeUnmount(() => {
-  const container = scrollContainerRef.value
-  if (container && handleScroll) {
-    container.removeEventListener('scroll', handleScroll)
-  }
-  if (handleResize) {
-    window.removeEventListener('resize', handleResize)
-  }
-})
-</script>
-
-
-<template>
-  <div class="group relative w-full">
-    <!-- Left scroll button -->
-    <button
-      v-if="showButtons && canScrollLeft"
-      @click="scrollLeftFn"
-      class="absolute left-0 top-0 z-10 h-full w-10 flex min-w-0 max-w-48 w-auto shrink-0 items-center justify-center bg-gradient-to-r from-background via-background/95 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200 hover:from-background hover:via-background focus:outline-none focus:opacity-100 [&>span]:truncate [&>span]:block"
-      aria-label="Scroll tabs left"
-      type="button"
-    >
-      <svg
-        width="14"
-        height="14"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        class="text-primary hover:text-primary/80 transition-colors duration-150"
-      >
-        <path d="m15 18-6-6 6-6" />
-      </svg>
-    </button>
-
-    <!-- Scrollable container -->
-    <div
-      ref="scrollContainerRef"
-      class="w-full overflow-x-auto scrollbar-hide"
-    >
-      <TabsList
-        v-bind="attrs"
-        :class="[
-          'inline-flex items-center justify-start border-b border-border bg-transparent w-max',
-          '[&:has(.corner-cut-trigger)]:border-primary',
-          '[&:has(.corner-cut-trigger)]:gap-0',
-          '[&:has(.corner-cut-trigger)]:-space-x-[1px]',
-          showButtons && canScrollLeft ? 'pl-3' : '',
-          showButtons && canScrollRight ? 'pr-3' : '',
-          props.class
-        ]"
-      >
-        <slot />
-      </TabsList>
-    </div>
-
-    <!-- Right scroll button -->
-    <button
-      v-if="showButtons && canScrollRight"
-      @click="scrollRightFn"
-      class="absolute right-0 top-0 z-10 h-full w-10 flex items-center justify-center bg-gradient-to-l from-background via-background/95 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200 hover:from-background hover:via-background focus:outline-none focus:opacity-100"
-      aria-label="Scroll tabs right"
-      type="button"
-    >
-      <svg
-        width="14"
-        height="14"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        class="text-primary hover:text-primary/80 transition-colors duration-150"
-      >
-        <path d="m9 18 6-6-6-6" />
-      </svg>
-    </button>
-  </div>
-</template>
-
-<style scoped>
-.scrollbar-hide::-webkit-scrollbar {
-  display: none;
-}
-.scrollbar-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-</style>
+
+
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, nextTick, useAttrs, defineProps } from 'vue'
+import { TabsList } from '@/shadcn/tabs'
+
+const props = defineProps({
+  class: {
+    type: [String, Array, Object],
+    default: ''
+  }
+})
+const attrs = useAttrs()
+
+const scrollContainerRef = ref<HTMLElement | null>(null)
+const canScrollLeft = ref(false)
+const canScrollRight = ref(false)
+const showButtons = ref(false)
+
+function checkScrollability() {
+  const container = scrollContainerRef.value
+  if (!container) return
+  const { scrollLeft, scrollWidth, clientWidth } = container
+  canScrollLeft.value = scrollLeft > 0
+  canScrollRight.value = scrollLeft < scrollWidth - clientWidth - 1
+  showButtons.value = scrollWidth > clientWidth
+}
+
+function scrollLeftFn() {
+  const container = scrollContainerRef.value
+  if (!container) return
+  container.scrollBy({ left: -200, behavior: 'smooth' })
+}
+
+function scrollRightFn() {
+  const container = scrollContainerRef.value
+  if (!container) return
+  container.scrollBy({ left: 200, behavior: 'smooth' })
+}
+
+let handleScroll: (() => void) | null = null;
+let handleResize: (() => void) | null = null;
+
+onMounted(() => {
+  nextTick(() => {
+    const container = scrollContainerRef.value
+    if (!container) return
+    handleScroll = () => checkScrollability()
+    handleResize = () => checkScrollability()
+    container.addEventListener('scroll', handleScroll)
+    window.addEventListener('resize', handleResize)
+    checkScrollability()
+  })
+})
+
+onBeforeUnmount(() => {
+  const container = scrollContainerRef.value
+  if (container && handleScroll) {
+    container.removeEventListener('scroll', handleScroll)
+  }
+  if (handleResize) {
+    window.removeEventListener('resize', handleResize)
+  }
+})
+</script>
+
+
+<template>
+  <div class="group relative w-full">
+    <!-- Left scroll button -->
+    <button
+      v-if="showButtons && canScrollLeft"
+      @click="scrollLeftFn"
+      class="absolute left-0 top-0 z-10 h-full w-10 flex min-w-0 max-w-48 w-auto shrink-0 items-center justify-center bg-gradient-to-r from-background via-background/95 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200 hover:from-background hover:via-background focus:outline-none focus:opacity-100 [&>span]:truncate [&>span]:block"
+      aria-label="Scroll tabs left"
+      type="button"
+    >
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="text-primary hover:text-primary/80 transition-colors duration-150"
+      >
+        <path d="m15 18-6-6 6-6" />
+      </svg>
+    </button>
+
+    <!-- Scrollable container -->
+    <div
+      ref="scrollContainerRef"
+      class="w-full overflow-x-auto scrollbar-hide"
+    >
+      <TabsList
+        v-bind="attrs"
+        :class="[
+          'inline-flex items-center justify-start border-b border-border bg-transparent w-max',
+          '[&:has(.corner-cut-trigger)]:border-primary',
+          '[&:has(.corner-cut-trigger)]:gap-0',
+          '[&:has(.corner-cut-trigger)]:-space-x-[1px]',
+          showButtons && canScrollLeft ? 'pl-3' : '',
+          showButtons && canScrollRight ? 'pr-3' : '',
+          props.class
+        ]"
+      >
+        <slot />
+      </TabsList>
+    </div>
+
+    <!-- Right scroll button -->
+    <button
+      v-if="showButtons && canScrollRight"
+      @click="scrollRightFn"
+      class="absolute right-0 top-0 z-10 h-full w-10 flex items-center justify-center bg-gradient-to-l from-background via-background/95 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200 hover:from-background hover:via-background focus:outline-none focus:opacity-100"
+      aria-label="Scroll tabs right"
+      type="button"
+    >
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="text-primary hover:text-primary/80 transition-colors duration-150"
+      >
+        <path d="m9 18 6-6-6-6" />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+</style>

package/src/ui/select-multiple.vue

@@ -1,135 +1,135 @@
-<template>
-  <div class="space-y-4">
-    <Popover v-model:open="isOpen" :disabled="disabled">
-      <PopoverTrigger as="template">
-        <Button
-          variant="secondary"
-          :class="[
-            'justify-between border-input bg-input-background hover:bg-select-hover focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-            size === 'sm' ? 'h-8' : 'h-9',
-            customClass
-          ]"
-          role="combobox"
-          :aria-expanded="isOpen"
-          :disabled="disabled"
-        >
-          <div class="w-2/3 flex gap-1 flex-1">
-            <template v-if="modelValue.length === 0">
-              <span class="text-muted-foreground">{{ placeholder }}</span>
-            </template>
-            <template v-else-if="modelValue.length <= maxDisplay">
-              <Badge
-                v-for="(val, idx) in modelValue"
-                :key="val"
-                variant="soft-neutral"
-                class="text-xs shrink-0"
-              >
-                {{ getLabel(val) }}
-              </Badge>
-            </template>
-            <template v-else>
-              <Badge variant="soft-neutral" class="text-xs shrink-0">
-                {{ getLabel(modelValue[0]) }}
-              </Badge>
-              <Badge variant="soft-neutral" class="text-xs shrink-0">
-                +{{ modelValue.length - 1 }} more
-              </Badge>
-            </template>
-          </div>
-          <ChevronDownIcon class="h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent :class="['p-0', customClass]" align="start">
-        <div class="p-1">
-          <div class="p-3 pb-2">
-            <div class="text-sm font-medium">{{ title }}</div>
-          </div>
-          <div class="max-h-[200px] overflow-y-auto">
-            <div
-              v-for="option in options"
-              :key="option.id"
-              :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'
-              ]"
-              @click="!option.disabled && handleValueChange(option.id, !modelValue.includes(option.id))"
-            >
-              <Checkbox
-                :model-value="modelValue.includes(option.id)"
-                :disabled="option.disabled"
-                class="pointer-events-none"
-              />
-              <span class="flex-1 font-medium leading-none">{{ option.label }}</span>
-            </div>
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  </div>
-</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';
-
-const props = defineProps({
-  modelValue: {
-    type: Array,
-    default: () => [],
-  },
-  options: {
-    type: Array,
-    default: () => [],
-  },
-  placeholder: {
-    type: String,
-    default: 'Select options...',
-  },
-  title: {
-    type: String,
-    default: 'Select Options',
-  },
-  maxDisplay: {
-    type: Number,
-    default: 2,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  size: {
-    type: String,
-    default: 'default',
-  },
-  class: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-const $attrs = useAttrs();
-const isOpen = ref(false);
-const customClass = computed(() => props.class || $attrs.class || '');
-
-function getLabel(val) {
-  const found = props.options.find((o) => o.id === val);
-  return found ? found.label : val;
-}
-
-function handleValueChange(optionId, checked) {
-  let newValue = Array.isArray(props.modelValue) ? [...props.modelValue] : [];
-  if (checked) {
-    newValue.push(optionId);
-  } else {
-    newValue = newValue.filter((v) => v !== optionId);
-  }
-  emit('update:modelValue', newValue);
-}
-</script>
+<template>
+  <div class="space-y-4">
+    <Popover v-model:open="isOpen" :disabled="disabled">
+      <PopoverTrigger as="template">
+        <Button
+          variant="secondary"
+          :class="[
+            'justify-between border-input bg-input-background hover:bg-select-hover focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+            size === 'sm' ? 'h-8' : 'h-9',
+            customClass
+          ]"
+          role="combobox"
+          :aria-expanded="isOpen"
+          :disabled="disabled"
+        >
+          <div class="w-2/3 flex gap-1 flex-1">
+            <template v-if="modelValue.length === 0">
+              <span class="text-muted-foreground">{{ placeholder }}</span>
+            </template>
+            <template v-else-if="modelValue.length <= maxDisplay">
+              <Badge
+                v-for="(val, idx) in modelValue"
+                :key="val"
+                variant="soft-neutral"
+                class="text-xs shrink-0"
+              >
+                {{ getLabel(val) }}
+              </Badge>
+            </template>
+            <template v-else>
+              <Badge variant="soft-neutral" class="text-xs shrink-0">
+                {{ getLabel(modelValue[0]) }}
+              </Badge>
+              <Badge variant="soft-neutral" class="text-xs shrink-0">
+                +{{ modelValue.length - 1 }} more
+              </Badge>
+            </template>
+          </div>
+          <ChevronDownIcon class="h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent :class="['p-0', customClass]" align="start">
+        <div class="p-1">
+          <div class="p-3 pb-2">
+            <div class="text-sm font-medium">{{ title }}</div>
+          </div>
+          <div class="max-h-[200px] overflow-y-auto">
+            <div
+              v-for="option in options"
+              :key="option.id"
+              :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'
+              ]"
+              @click="!option.disabled && handleValueChange(option.id, !modelValue.includes(option.id))"
+            >
+              <Checkbox
+                :model-value="modelValue.includes(option.id)"
+                :disabled="option.disabled"
+                class="pointer-events-none"
+              />
+              <span class="flex-1 font-medium leading-none">{{ option.label }}</span>
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  </div>
+</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';
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  placeholder: {
+    type: String,
+    default: 'Select options...',
+  },
+  title: {
+    type: String,
+    default: 'Select Options',
+  },
+  maxDisplay: {
+    type: Number,
+    default: 2,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String,
+    default: 'default',
+  },
+  class: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+const $attrs = useAttrs();
+const isOpen = ref(false);
+const customClass = computed(() => props.class || $attrs.class || '');
+
+function getLabel(val) {
+  const found = props.options.find((o) => o.id === val);
+  return found ? found.label : val;
+}
+
+function handleValueChange(optionId, checked) {
+  let newValue = Array.isArray(props.modelValue) ? [...props.modelValue] : [];
+  if (checked) {
+    newValue.push(optionId);
+  } else {
+    newValue = newValue.filter((v) => v !== optionId);
+  }
+  emit('update:modelValue', newValue);
+}
+</script>