@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.6 → 1.0.9

package/src/ui/dialog-content.vue

@@ -1,36 +1,36 @@
-<template>
-  <DialogContent data-slot="dialog-content" :class="[
-    'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200 sm:max-w-lg',
-    dialogSizeVariants[size],
-    $attrs.class
-  ]" v-bind="$attrs">
-    <slot />
-    <DialogClose
-      class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground 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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4">
-      <X />
-      <span class="sr-only">Close</span>
-    </DialogClose>
-  </DialogContent>
-</template>
-
-<script setup>
-import { DialogContent, DialogClose } from '@/shadcn/dialog';
-import { X } from 'lucide-vue-next';
-
-const props = defineProps({
-  size: {
-    type: String,
-    default: 'lg',
-  },
-});
-
-const dialogSizeVariants = {
-  sm: 'sm:max-w-sm max-w-[calc(100%-2rem)]',
-  md: 'sm:max-w-md max-w-[calc(100%-2rem)]',
-  lg: 'sm:max-w-lg max-w-[calc(100%-2rem)]',
-  xl: 'sm:max-w-xl max-w-[calc(100%-2rem)]',
-  '2xl': 'sm:max-w-2xl max-w-[calc(100%-2rem)]',
-  '4xl': 'sm:max-w-4xl max-w-[calc(100%-2rem)]',
-  full: 'sm:max-w-[calc(100vw-2rem)] max-w-[calc(100%-2rem)]',
-};
-</script>
+<template>
+  <DialogContent data-slot="dialog-content" :class="[
+    'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-lg border shadow-lg duration-200 sm:max-w-lg',
+    dialogSizeVariants[size],
+    $attrs.class
+  ]" v-bind="$attrs">
+    <slot />
+    <DialogClose
+      class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground 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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4">
+      <X />
+      <span class="sr-only">Close</span>
+    </DialogClose>
+  </DialogContent>
+</template>
+
+<script setup>
+import { DialogContent, DialogClose } from '@/shadcn/dialog';
+import { X } from 'lucide-vue-next';
+
+const props = defineProps({
+  size: {
+    type: String,
+    default: 'lg',
+  },
+});
+
+const dialogSizeVariants = {
+  sm: 'sm:max-w-sm max-w-[calc(100%-2rem)]',
+  md: 'sm:max-w-md max-w-[calc(100%-2rem)]',
+  lg: 'sm:max-w-lg max-w-[calc(100%-2rem)]',
+  xl: 'sm:max-w-xl max-w-[calc(100%-2rem)]',
+  '2xl': 'sm:max-w-2xl max-w-[calc(100%-2rem)]',
+  '4xl': 'sm:max-w-4xl max-w-[calc(100%-2rem)]',
+  full: 'sm:max-w-[calc(100vw-2rem)] max-w-[calc(100%-2rem)]',
+};
+</script>

package/src/ui/dialog-description.vue

@@ -1,13 +1,13 @@
-<template>
-  <DialogDescription
-    data-slot="dialog-description"
-    :class="['text-muted-foreground text-sm', $attrs.class]"
-    v-bind="$attrs"
-  >
-    <slot />
-  </DialogDescription>
-</template>
-
-<script setup>
-import { DialogDescription } from '@/shadcn/dialog';
-</script>
+<template>
+  <DialogDescription
+    data-slot="dialog-description"
+    :class="['text-muted-foreground text-sm', $attrs.class]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </DialogDescription>
+</template>
+
+<script setup>
+import { DialogDescription } from '@/shadcn/dialog';
+</script>

package/src/ui/dialog-footer.vue

@@ -1,13 +1,13 @@
-<template>
-  <div
-    data-slot="dialog-footer"
-    :class="['flex flex-col-reverse gap-2 sm:flex-row sm:justify-end border-t p-2', $attrs.class]"
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
-</template>
-
-<script setup>
-// No additional logic needed
-</script>
+<template>
+  <div
+    data-slot="dialog-footer"
+    :class="['flex flex-col-reverse gap-2 sm:flex-row sm:justify-end border-t p-2', $attrs.class]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+// No additional logic needed
+</script>

package/src/ui/dialog-header.vue

@@ -1,13 +1,13 @@
-<template>
-  <div
-    data-slot="dialog-header"
-    :class="['flex flex-col gap-2 text-center pl-4 py-4 pr-5 sm:text-left border-b', $attrs.class]"
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
-</template>
-
-<script setup>
-// No additional logic needed
-</script>
+<template>
+  <div
+    data-slot="dialog-header"
+    :class="['flex flex-col gap-2 text-center pl-4 py-4 pr-5 sm:text-left border-b', $attrs.class]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+// No additional logic needed
+</script>

package/src/ui/dialog-overlay.vue

@@ -1,14 +1,14 @@
-<template>
-  <DialogOverlay
-    data-slot="dialog-overlay"
-    :class="[
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
-      $attrs.class
-    ]"
-    v-bind="$attrs"
-  />
-</template>
-
-<script setup>
-import { DialogOverlay } from 'reka-ui'
-</script>
+<template>
+  <DialogOverlay
+    data-slot="dialog-overlay"
+    :class="[
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+      $attrs.class
+    ]"
+    v-bind="$attrs"
+  />
+</template>
+
+<script setup>
+import { DialogOverlay } from 'reka-ui'
+</script>

package/src/ui/dialog-portal.vue

@@ -1,9 +1,9 @@
-<template>
-  <DialogPortal v-bind="$attrs">
-    <slot />
-  </DialogPortal>
-</template>
-
-<script setup>
-import { DialogPortal } from "reka-ui"
-</script>
+<template>
+  <DialogPortal v-bind="$attrs">
+    <slot />
+  </DialogPortal>
+</template>
+
+<script setup>
+import { DialogPortal } from "reka-ui"
+</script>

package/src/ui/dialog-title.vue

@@ -1,13 +1,13 @@
-<template>
-  <DialogTitle
-    data-slot="dialog-title"
-    :class="['text-lg leading-none font-semibold', $attrs.class]"
-    v-bind="$attrs"
-  >
-    <slot />
-  </DialogTitle>
-</template>
-
-<script setup>
-import { DialogTitle } from '@/shadcn/dialog';
-</script>
+<template>
+  <DialogTitle
+    data-slot="dialog-title"
+    :class="['text-lg leading-none font-semibold', $attrs.class]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </DialogTitle>
+</template>
+
+<script setup>
+import { DialogTitle } from '@/shadcn/dialog';
+</script>

package/src/ui/dialog-trigger.vue

@@ -1,9 +1,9 @@
-<template>
-  <DialogTrigger v-bind="$attrs">
-    <slot />
-  </DialogTrigger>
-</template>
-
-<script setup>
-import { DialogTrigger } from '@/shadcn/dialog';
-</script>
+<template>
+  <DialogTrigger v-bind="$attrs">
+    <slot />
+  </DialogTrigger>
+</template>
+
+<script setup>
+import { DialogTrigger } from '@/shadcn/dialog';
+</script>

package/src/ui/dialog.vue

@@ -1,9 +1,9 @@
-<template>
-  <Dialog v-bind="$attrs">
-    <slot />
-  </Dialog>
-</template>
-
-<script setup>
-import { Dialog } from '@/shadcn/dialog';
-</script>
+<template>
+  <Dialog v-bind="$attrs">
+    <slot />
+  </Dialog>
+</template>
+
+<script setup>
+import { Dialog } from '@/shadcn/dialog';
+</script>

package/src/ui/dismissible-badges-demo.vue

@@ -1,94 +1,94 @@
-<script setup>
-import { ref } from 'vue';
-import Badge from './badge.vue';
-import Button from './button.vue';
-import { CheckCircle } from 'lucide-vue-next';
-
-const initialTags = [
-  { id: 1, label: 'React', variant: 'soft-primary', size: 'md' },
-  { id: 2, label: 'TypeScript', variant: 'soft-info', size: 'md' },
-  { id: 3, label: 'Design System', variant: 'soft-teal', size: 'md' },
-  { id: 4, label: 'UI/UX', variant: 'soft-pink', size: 'md' },
-  { id: 5, label: 'Accessibility', variant: 'soft-success', size: 'md' },
-  { id: 6, label: 'Performance', variant: 'soft-warning', size: 'md' },
-];
-
-const initialFilters = [
-  { id: 1, label: 'Active', variant: 'soft-success', size: 'md' },
-  { id: 2, label: 'Pending', variant: 'soft-warning', size: 'md' },
-  { id: 3, label: 'Draft', variant: 'soft-neutral', size: 'md' },
-];
-
-const tags = ref([...initialTags]);
-const filters = ref([...initialFilters]);
-
-function removeTag(id) {
-  tags.value = tags.value.filter(tag => tag.id !== id);
-}
-function removeFilter(id) {
-  filters.value = filters.value.filter(filter => filter.id !== id);
-}
-function resetTags() {
-  tags.value = [...initialTags];
-}
-function resetFilters() {
-  filters.value = [...initialFilters];
-}
-</script>
-
-<template>
-  <div class="space-y-6 p-6 border rounded-lg">
-    <div>
-      <div class="flex items-center justify-between mb-3">
-        <h4 class="font-medium">Project Tags</h4>
-        <Button variant="outline" size="sm" @click="resetTags" :disabled="tags.length === initialTags.length">
-          Reset Tags
-        </Button>
-      </div>
-      <div class="flex flex-wrap gap-2 min-h-[2rem]">
-        <template v-if="tags.length > 0">
-          <Badge
-            v-for="tag in tags"
-            :key="tag.id"
-            :variant="tag.variant"
-            :size="tag.size"
-            dismissible
-            @dismiss="removeTag(tag.id)"
-          >
-            {{ tag.label }}
-          </Badge>
-        </template>
-        <p v-else class="text-sm text-muted-foreground">No tags selected</p>
-      </div>
-    </div>
-
-    <div>
-      <div class="flex items-center justify-between mb-3">
-        <h4 class="font-medium">Applied Filters</h4>
-        <Button variant="outline" size="sm" @click="resetFilters" :disabled="filters.length === initialFilters.length">
-          Reset Filters
-        </Button>
-      </div>
-      <div class="flex flex-wrap gap-2 min-h-[2rem]">
-        <template v-if="filters.length > 0">
-          <Badge
-            v-for="filter in filters"
-            :key="filter.id"
-            :variant="filter.variant"
-            :size="filter.size"
-            dismissible
-            @dismiss="removeFilter(filter.id)"
-          >
-            <CheckCircle />
-            {{ filter.label }}
-          </Badge>
-        </template>
-        <p v-else class="text-sm text-muted-foreground">No filters applied</p>
-      </div>
-    </div>
-
-    <div class="text-sm text-muted-foreground">
-      <p>Click the × button on any badge to remove it</p>
-    </div>
-  </div>
-</template>
+<script setup>
+import { ref } from 'vue';
+import Badge from './badge.vue';
+import Button from './button.vue';
+import { CheckCircle } from 'lucide-vue-next';
+
+const initialTags = [
+  { id: 1, label: 'React', variant: 'soft-primary', size: 'md' },
+  { id: 2, label: 'TypeScript', variant: 'soft-info', size: 'md' },
+  { id: 3, label: 'Design System', variant: 'soft-teal', size: 'md' },
+  { id: 4, label: 'UI/UX', variant: 'soft-pink', size: 'md' },
+  { id: 5, label: 'Accessibility', variant: 'soft-success', size: 'md' },
+  { id: 6, label: 'Performance', variant: 'soft-warning', size: 'md' },
+];
+
+const initialFilters = [
+  { id: 1, label: 'Active', variant: 'soft-success', size: 'md' },
+  { id: 2, label: 'Pending', variant: 'soft-warning', size: 'md' },
+  { id: 3, label: 'Draft', variant: 'soft-neutral', size: 'md' },
+];
+
+const tags = ref([...initialTags]);
+const filters = ref([...initialFilters]);
+
+function removeTag(id) {
+  tags.value = tags.value.filter(tag => tag.id !== id);
+}
+function removeFilter(id) {
+  filters.value = filters.value.filter(filter => filter.id !== id);
+}
+function resetTags() {
+  tags.value = [...initialTags];
+}
+function resetFilters() {
+  filters.value = [...initialFilters];
+}
+</script>
+
+<template>
+  <div class="space-y-6 p-6 border rounded-lg">
+    <div>
+      <div class="flex items-center justify-between mb-3">
+        <h4 class="font-medium">Project Tags</h4>
+        <Button variant="outline" size="sm" @click="resetTags" :disabled="tags.length === initialTags.length">
+          Reset Tags
+        </Button>
+      </div>
+      <div class="flex flex-wrap gap-2 min-h-[2rem]">
+        <template v-if="tags.length > 0">
+          <Badge
+            v-for="tag in tags"
+            :key="tag.id"
+            :variant="tag.variant"
+            :size="tag.size"
+            dismissible
+            @dismiss="removeTag(tag.id)"
+          >
+            {{ tag.label }}
+          </Badge>
+        </template>
+        <p v-else class="text-sm text-muted-foreground">No tags selected</p>
+      </div>
+    </div>
+
+    <div>
+      <div class="flex items-center justify-between mb-3">
+        <h4 class="font-medium">Applied Filters</h4>
+        <Button variant="outline" size="sm" @click="resetFilters" :disabled="filters.length === initialFilters.length">
+          Reset Filters
+        </Button>
+      </div>
+      <div class="flex flex-wrap gap-2 min-h-[2rem]">
+        <template v-if="filters.length > 0">
+          <Badge
+            v-for="filter in filters"
+            :key="filter.id"
+            :variant="filter.variant"
+            :size="filter.size"
+            dismissible
+            @dismiss="removeFilter(filter.id)"
+          >
+            <CheckCircle />
+            {{ filter.label }}
+          </Badge>
+        </template>
+        <p v-else class="text-sm text-muted-foreground">No filters applied</p>
+      </div>
+    </div>
+
+    <div class="text-sm text-muted-foreground">
+      <p>Click the × button on any badge to remove it</p>
+    </div>
+  </div>
+</template>

package/src/ui/drawer-content.vue

@@ -1,53 +1,53 @@
-<script setup>
-// DrawerContent.vue - Vue migration of DrawerContent from drawer.tsx
-import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue';
-import { computed } from 'vue';
-
-const props = defineProps({
-  size: {
-    type: String,
-    default: 'md',
-  },
-  direction: {
-    type: String,
-    default: 'right',
-  },
-  class: String,
-});
-
-const drawerSizeVariants = {
-  sm: 'sm:max-w-sm max-w-[calc(100%-2rem)]',
-  md: 'sm:max-w-md max-w-[calc(100%-2rem)]',
-  lg: 'sm:max-w-lg max-w-[calc(100%-2rem)]',
-  xl: 'sm:max-w-xl max-w-[calc(100%-2rem)]',
-  '2xl': 'sm:max-w-2xl max-w-[calc(100%-2rem)]',
-  '4xl': 'sm:max-w-4xl max-w-[calc(100%-2rem)]',
-  full: 'sm:max-w-[calc(100vw-2rem)] max-w-[calc(100%-2rem)]',
-};
-
-const contentClass = computed(() => {
-  return [
-    'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
-    drawerSizeVariants[props.size],
-    props.class,
-  ].join(' ');
-});
-</script>
-
-<template>
-  <DrawerPortal data-slot="drawer-portal">
-    <DrawerOverlay data-slot="drawer-overlay" />
-    <DrawerContent
-      v-bind="$attrs"
-      :class="contentClass"
-      data-slot="drawer-content"
-    >
-      <div class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
-      <slot />
-    </DrawerContent>
-  </DrawerPortal>
-</template>
-
-<style scoped>
-/* Add any necessary styles for drawer content and variants here */
-</style>
+<script setup>
+// DrawerContent.vue - Vue migration of DrawerContent from drawer.tsx
+import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue';
+import { computed } from 'vue';
+
+const props = defineProps({
+  size: {
+    type: String,
+    default: 'md',
+  },
+  direction: {
+    type: String,
+    default: 'right',
+  },
+  class: String,
+});
+
+const drawerSizeVariants = {
+  sm: 'sm:max-w-sm max-w-[calc(100%-2rem)]',
+  md: 'sm:max-w-md max-w-[calc(100%-2rem)]',
+  lg: 'sm:max-w-lg max-w-[calc(100%-2rem)]',
+  xl: 'sm:max-w-xl max-w-[calc(100%-2rem)]',
+  '2xl': 'sm:max-w-2xl max-w-[calc(100%-2rem)]',
+  '4xl': 'sm:max-w-4xl max-w-[calc(100%-2rem)]',
+  full: 'sm:max-w-[calc(100vw-2rem)] max-w-[calc(100%-2rem)]',
+};
+
+const contentClass = computed(() => {
+  return [
+    'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
+    drawerSizeVariants[props.size],
+    props.class,
+  ].join(' ');
+});
+</script>
+
+<template>
+  <DrawerPortal data-slot="drawer-portal">
+    <DrawerOverlay data-slot="drawer-overlay" />
+    <DrawerContent
+      v-bind="$attrs"
+      :class="contentClass"
+      data-slot="drawer-content"
+    >
+      <div class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+      <slot />
+    </DrawerContent>
+  </DrawerPortal>
+</template>
+
+<style scoped>
+/* Add any necessary styles for drawer content and variants here */
+</style>

package/src/ui/drawer-description.vue

@@ -1,23 +1,23 @@
-<script setup>
-// DrawerDescription.vue - Vue migration of DrawerDescription from drawer.tsx
-import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue';
-import { computed } from 'vue';
-
-defineProps({
-  class: String,
-});
-
-const descClass = computed(() => {
-  return ['text-muted-foreground text-sm', $props.class].join(' ');
-});
-</script>
-
-<template>
-  <VaulDrawerDescription v-bind="$attrs" :class="descClass" data-slot="drawer-description">
-    <slot />
-  </VaulDrawerDescription>
-</template>
-
-<style scoped>
-/* Add any necessary styles for drawer description here */
-</style>
+<script setup>
+// DrawerDescription.vue - Vue migration of DrawerDescription from drawer.tsx
+import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue';
+import { computed } from 'vue';
+
+defineProps({
+  class: String,
+});
+
+const descClass = computed(() => {
+  return ['text-muted-foreground text-sm', $props.class].join(' ');
+});
+</script>
+
+<template>
+  <VaulDrawerDescription v-bind="$attrs" :class="descClass" data-slot="drawer-description">
+    <slot />
+  </VaulDrawerDescription>
+</template>
+
+<style scoped>
+/* Add any necessary styles for drawer description here */
+</style>