@brumaombra/ui-vintage 0.7.8 → 0.7.9

package/src/components/ui/dialog/DialogFooter.vue

@@ -1,18 +1,19 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <div
-    data-slot="dialog-footer"
-    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
-  >
-    <slot />
-  </div>
-</template>
-
+    <div data-slot="dialog-footer" :class="cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        props.class
+    )
+        ">
+        <slot />
+    </div>
+</template>

package/src/components/ui/dialog/DialogHeader.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <div data-slot="dialog-header" :class="cn('flex flex-col gap-1.5', props.class)">
-    <slot />
-  </div>
-</template>
+    <div data-slot="dialog-header" :class="cn('flex flex-col gap-1.5', props.class)">
+        <slot />
+    </div>
+</template>

package/src/components/ui/dialog/DialogOverlay.vue

@@ -1,17 +1,22 @@
 <script setup lang="ts">
-import type { DialogOverlayProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogOverlay } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { DialogOverlayProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DialogOverlay } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <DialogOverlay data-slot="dialog-overlay" v-bind="delegatedProps" :class="cn('fixed inset-0 isolate z-50 bg-black/45 backdrop-blur-[2px] transition-[opacity,backdrop-filter] ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', props.class)">
-    <slot />
-  </DialogOverlay>
-</template>
+    <DialogOverlay data-slot="dialog-overlay" v-bind="delegatedProps" :class="cn(
+        'fixed inset-0 isolate z-50 bg-black/45 backdrop-blur-[2px] transition-[opacity,backdrop-filter] ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        props.class
+    )
+        ">
+        <slot />
+    </DialogOverlay>
+</template>

package/src/components/ui/dialog/DialogScrollContent.vue

@@ -1,57 +1,59 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  DialogClose,
-  DialogContent,
-  DialogOverlay,
-  DialogPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "../../../lib/utils"
-import { Button } from "../button"
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DialogClose, DialogContent, DialogOverlay, DialogPortal, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import { Button } from '../button';
 
 defineOptions({
-  inheritAttrs: false,
-})
+    inheritAttrs: false
+});
 
+// Props
 const props = withDefaults(defineProps<DialogContentProps & {
-  class?: HTMLAttributes["class"]
-  showCloseButton?: boolean
+    class?: HTMLAttributes['class'];
+    showCloseButton?: boolean;
 }>(), {
-  showCloseButton: false,
-})
-const emits = defineEmits<DialogContentEmits>()
+    showCloseButton: false
+});
 
-const delegatedProps = reactiveOmit(props, "class")
+// Emits
+const emits = defineEmits<DialogContentEmits>();
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <DialogPortal>
-    <DialogOverlay class="fixed inset-0 isolate z-50 grid place-items-center overflow-y-auto bg-black/45 backdrop-blur-[2px] transition-[opacity,backdrop-filter] ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
-      <DialogContent :class="cn(
-        'relative z-50 my-6 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded border border-border bg-card p-6 text-card-foreground outline-none duration-200 sm:max-w-[425px]',
-        props.class,
-      )
-        " v-bind="{ ...$attrs, ...forwarded }" @pointer-down-outside="(event) => {
-          const originalEvent = event.detail.originalEvent;
-          const target = originalEvent.target as HTMLElement;
-          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
-            event.preventDefault();
-          }
-        }">
-        <slot />
+    <DialogPortal>
+        <DialogOverlay class="fixed inset-0 isolate z-50 grid place-items-center overflow-y-auto bg-black/45 backdrop-blur-[2px] transition-[opacity,backdrop-filter] ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
+            <DialogContent :class="cn(
+                'relative z-50 my-6 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded border border-border bg-card p-6 text-card-foreground outline-none duration-200 sm:max-w-106.25',
+                props.class
+            )
+                " v-bind="{ ...$attrs, ...forwarded }" @pointer-down-outside="
+                    (event) => {
+                        const originalEvent = event.detail.originalEvent;
+                        const target = originalEvent.target as HTMLElement;
+                        if (
+                            originalEvent.offsetX > target.clientWidth ||
+                            originalEvent.offsetY > target.clientHeight
+                        ) {
+                            event.preventDefault();
+                        }
+                    }
+                ">
+                <slot />
 
-        <DialogClose v-if="props.showCloseButton" data-slot="dialog-close" as-child>
-          <Button variant="ghost" size="icon-sm" class="absolute top-4 right-4 p-0.5">
-            <span aria-hidden="true">X</span>
-            <span class="sr-only">Close</span>
-          </Button>
-        </DialogClose>
-      </DialogContent>
-    </DialogOverlay>
-  </DialogPortal>
-</template>
+                <DialogClose v-if="props.showCloseButton" data-slot="dialog-close" as-child>
+                    <Button variant="ghost" size="icon-sm" class="absolute top-4 right-4 p-0.5">
+                        <span aria-hidden="true">X</span>
+                        <span class="sr-only">Close</span>
+                    </Button>
+                </DialogClose>
+            </DialogContent>
+        </DialogOverlay>
+    </DialogPortal>
+</template>

package/src/components/ui/dialog/DialogTitle.vue

@@ -1,19 +1,20 @@
 <script setup lang="ts">
-import type { DialogTitleProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogTitle, useForwardProps } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { DialogTitleProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DialogTitle, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <DialogTitle data-slot="dialog-title" v-bind="forwardedProps" :class="cn('text-base font-semibold', props.class)">
-    <slot />
-  </DialogTitle>
-</template>
+    <DialogTitle data-slot="dialog-title" v-bind="forwardedProps" :class="cn('text-base font-semibold', props.class)">
+        <slot />
+    </DialogTitle>
+</template>

package/src/components/ui/dialog/DialogTrigger.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { DialogTriggerProps } from "reka-ui"
-import { DialogTrigger } from "reka-ui"
+import type { DialogTriggerProps } from 'reka-ui';
+import { DialogTrigger } from 'reka-ui';
 
-const props = defineProps<DialogTriggerProps>()
+// Props
+const props = defineProps<DialogTriggerProps>();
 </script>
 
 <template>
-  <DialogTrigger data-slot="dialog-trigger" v-bind="props">
-    <slot />
-  </DialogTrigger>
-</template>
+    <DialogTrigger data-slot="dialog-trigger" v-bind="props">
+        <slot />
+    </DialogTrigger>
+</template>

package/src/components/ui/dialog/index.ts

@@ -1,10 +1,10 @@
-export { default as Dialog } from "./Dialog.vue"
-export { default as DialogClose } from "./DialogClose.vue"
-export { default as DialogContent } from "./DialogContent.vue"
-export { default as DialogDescription } from "./DialogDescription.vue"
-export { default as DialogFooter } from "./DialogFooter.vue"
-export { default as DialogHeader } from "./DialogHeader.vue"
-export { default as DialogOverlay } from "./DialogOverlay.vue"
-export { default as DialogScrollContent } from "./DialogScrollContent.vue"
-export { default as DialogTitle } from "./DialogTitle.vue"
-export { default as DialogTrigger } from "./DialogTrigger.vue"
+export { default as Dialog } from './Dialog.vue';
+export { default as DialogClose } from './DialogClose.vue';
+export { default as DialogContent } from './DialogContent.vue';
+export { default as DialogDescription } from './DialogDescription.vue';
+export { default as DialogFooter } from './DialogFooter.vue';
+export { default as DialogHeader } from './DialogHeader.vue';
+export { default as DialogOverlay } from './DialogOverlay.vue';
+export { default as DialogScrollContent } from './DialogScrollContent.vue';
+export { default as DialogTitle } from './DialogTitle.vue';
+export { default as DialogTrigger } from './DialogTrigger.vue';

package/src/components/ui/field/Field.vue

@@ -1,20 +1,18 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import type { FieldVariants } from "."
-import { cn } from "../../../lib/utils"
-import { fieldVariants } from "."
+import type { HTMLAttributes } from 'vue';
+import type { FieldVariants } from '.';
+import { cn } from '../../../lib/utils';
+import { fieldVariants } from '.';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-  orientation?: FieldVariants["orientation"]
-}>()
+    class?: HTMLAttributes['class'];
+    orientation?: FieldVariants['orientation'];
+}>();
 </script>
 
 <template>
-  <div role="group" data-slot="field" :data-orientation="orientation" :class="cn(
-    fieldVariants({ orientation }),
-    props.class,
-  )">
-    <slot />
-  </div>
-</template>
+    <div role="group" data-slot="field" :data-orientation="orientation" :class="cn(fieldVariants({ orientation }), props.class)">
+        <slot />
+    </div>
+</template>

package/src/components/ui/field/FieldContent.vue

@@ -1,17 +1,19 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <div data-slot="field-content" :class="cn(
-    'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',
-    props.class,
-  )">
-    <slot />
-  </div>
-</template>
+    <div data-slot="field-content" :class="cn(
+        'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',
+        props.class
+    )
+        ">
+        <slot />
+    </div>
+</template>

package/src/components/ui/field/FieldDescription.vue

@@ -1,19 +1,21 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <p data-slot="field-description" :class="cn(
-    'text-xs leading-5 font-normal text-(--text-secondary-light) dark:text-(--text-secondary-dark) group-has-[[data-orientation=horizontal]]/field:text-balance',
-    'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
-    '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
-    props.class,
-  )">
-    <slot />
-  </p>
-</template>
+    <p data-slot="field-description" :class="cn(
+        'text-xs leading-5 font-normal text-(--text-secondary-light) dark:text-(--text-secondary-dark) group-has-data-[orientation=horizontal]/field:text-balance',
+        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        props.class
+    )
+        ">
+        <slot />
+    </p>
+</template>

package/src/components/ui/field/FieldError.vue

@@ -1,48 +1,51 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { computed } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-  errors?: Array<string | { message: string | undefined } | undefined>
-}>()
+    class?: HTMLAttributes['class'];
+    errors?: Array<string | { message: string | undefined } | undefined>;
+}>();
 
 const content = computed(() => {
-  if (!props.errors || props.errors.length === 0)
-    return null
-
-  const uniqueErrors = [
-    ...new Map(
-      props.errors
-        .filter(Boolean)
-        .map((error) => {
-          const message = typeof error === "string" ? error : error?.message
-          return [message, error]
-        }),
-    ).values(),
-  ]
-
-  if (uniqueErrors.length === 1 && uniqueErrors[0]) {
-    return typeof uniqueErrors[0] === "string" ? uniqueErrors[0] : uniqueErrors[0].message
-  }
-
-  return uniqueErrors.map(error => typeof error === "string" ? error : error?.message)
-})
+    if (!props.errors || props.errors.length === 0) return null;
+
+    const uniqueErrors = [
+        ...new Map(
+            props.errors.filter(Boolean).map((error) => {
+                const message =
+                    typeof error === 'string' ? error : error?.message;
+                return [message, error];
+            })
+        ).values()
+    ];
+
+    if (uniqueErrors.length === 1 && uniqueErrors[0]) {
+        return typeof uniqueErrors[0] === 'string'
+            ? uniqueErrors[0]
+            : uniqueErrors[0].message;
+    }
+
+    return uniqueErrors.map((error) =>
+        typeof error === 'string' ? error : error?.message
+    );
+});
 </script>
 
 <template>
-  <div v-if="$slots.default || content" role="alert" data-slot="field-error" :class="cn('text-destructive text-xs font-normal', props.class)">
-    <slot v-if="$slots.default" />
-
-    <template v-else-if="typeof content === 'string'">
-      {{ content }}
-    </template>
-
-    <ul v-else-if="Array.isArray(content)" class="ml-4 flex list-disc flex-col gap-1">
-      <li v-for="(error, index) in content" :key="index">
-        {{ error }}
-      </li>
-    </ul>
-  </div>
-</template>
+    <div v-if="$slots.default || content" role="alert" data-slot="field-error" :class="cn('text-destructive text-xs font-normal', props.class)">
+        <slot v-if="$slots.default" />
+
+        <template v-else-if="typeof content === 'string'">
+            {{ content }}
+        </template>
+
+        <ul v-else-if="Array.isArray(content)" class="ml-4 flex list-disc flex-col gap-1">
+            <li v-for="(error, index) in content" :key="index">
+                {{ error }}
+            </li>
+        </ul>
+    </div>
+</template>

package/src/components/ui/field/FieldGroup.vue

@@ -1,17 +1,19 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <div data-slot="field-group" :class="cn(
-    'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
-    props.class,
-  )">
-    <slot />
-  </div>
-</template>
+    <div data-slot="field-group" :class="cn(
+        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',
+        props.class
+    )
+        ">
+        <slot />
+    </div>
+</template>

package/src/components/ui/field/FieldLabel.vue

@@ -1,20 +1,22 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
-import { Label } from '../label'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
+import { Label } from '../label';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <Label data-slot="field-label" :class="cn(
-    'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
-    'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
-    'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
-    props.class,
-  )">
-    <slot />
-  </Label>
-</template>
+    <Label data-slot="field-label" :class="cn(
+        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-4',
+        'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+        props.class
+    )
+        ">
+        <slot />
+    </Label>
+</template>

package/src/components/ui/field/FieldLegend.vue

@@ -1,20 +1,22 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-  variant?: "legend" | "label"
-}>()
+    class?: HTMLAttributes['class'];
+    variant?: 'legend' | 'label';
+}>();
 </script>
 
 <template>
-  <legend data-slot="field-legend" :data-variant="variant" :class="cn(
-    'mb-3 font-semibold',
-    'data-[variant=legend]:text-base',
-    'data-[variant=label]:text-sm',
-    props.class,
-  )">
-    <slot />
-  </legend>
-</template>
+    <legend data-slot="field-legend" :data-variant="variant" :class="cn(
+        'mb-3 font-semibold',
+        'data-[variant=legend]:text-base',
+        'data-[variant=label]:text-sm',
+        props.class
+    )
+        ">
+        <slot />
+    </legend>
+</template>

package/src/components/ui/field/FieldSeparator.vue

@@ -1,21 +1,23 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
-import { Separator } from '../separator'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
+import { Separator } from '../separator';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <div data-slot="field-separator" :data-content="!!$slots.default" :class="cn(
-    'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
-    props.class,
-  )">
-    <Separator class="absolute inset-0 top-1/2" />
-    <span v-if="$slots.default" class="bg-background text-muted-foreground relative mx-auto block w-fit px-2" data-slot="field-separator-content">
-      <slot />
-    </span>
-  </div>
-</template>
+    <div data-slot="field-separator" :data-content="!!$slots.default" :class="cn(
+        'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
+        props.class
+    )
+        ">
+        <Separator class="absolute inset-0 top-1/2" />
+        <span v-if="$slots.default" class="bg-background text-muted-foreground relative mx-auto block w-fit px-2" data-slot="field-separator-content">
+            <slot />
+        </span>
+    </div>
+</template>