@una-ui/nuxt 0.53.0 → 0.54.1

package/dist/runtime/components/elements/card/CardContent.vue

@@ -1,18 +1,17 @@
-<script setup>
-import { cn } from "../../../utils";
-const props = defineProps({
-  una: { type: Object, required: false },
-  class: { type: null, required: false }
-});
+<script setup lang="ts">
+import type { NCardContentProps } from '../../../types'
+import { cn } from '../../../utils'
+
+const props = defineProps<NCardContentProps>()
 </script>
 
 <template>
   <div
     :class="cn(
-  'card-content',
-  props.una?.cardContent,
-  props.class
-)"
+      'card-content',
+      props.una?.cardContent,
+      props.class,
+    )"
   >
     <slot />
   </div>

package/dist/runtime/components/elements/card/CardDescription.vue

@@ -1,18 +1,17 @@
-<script setup>
-import { cn } from "../../../utils";
-const props = defineProps({
-  una: { type: Object, required: false },
-  class: { type: null, required: false }
-});
+<script setup lang="ts">
+import type { NCardDescriptionProps } from '../../../types'
+import { cn } from '../../../utils'
+
+const props = defineProps<NCardDescriptionProps>()
 </script>
 
 <template>
   <p
     :class="cn(
-  'card-description',
-  props.una?.cardDescription,
-  props.class
-)"
+      'card-description',
+      props.una?.cardDescription,
+      props.class,
+    )"
   >
     <slot />
   </p>

package/dist/runtime/components/elements/card/CardFooter.vue

@@ -1,18 +1,17 @@
-<script setup>
-import { cn } from "../../../utils";
-const props = defineProps({
-  una: { type: Object, required: false },
-  class: { type: null, required: false }
-});
+<script setup lang="ts">
+import type { NCardFooterProps } from '../../../types'
+import { cn } from '../../../utils'
+
+const props = defineProps<NCardFooterProps>()
 </script>
 
 <template>
   <div
     :class="cn(
-  'card-footer',
-  props.una?.cardFooter,
-  props.class
-)"
+      'card-footer',
+      props.una?.cardFooter,
+      props.class,
+    )"
   >
     <slot />
   </div>

package/dist/runtime/components/elements/card/CardHeader.vue

@@ -1,18 +1,17 @@
-<script setup>
-import { cn } from "../../../utils";
-const props = defineProps({
-  una: { type: Object, required: false },
-  class: { type: null, required: false }
-});
+<script setup lang="ts">
+import type { NCardHeaderProps } from '../../../types'
+import { cn } from '../../../utils'
+
+const props = defineProps<NCardHeaderProps>()
 </script>
 
 <template>
   <div
     :class="cn(
-  'card-header',
-  props.una?.cardHeader,
-  props.class
-)"
+      'card-header',
+      props.una?.cardHeader,
+      props.class,
+    )"
   >
     <slot />
   </div>

package/dist/runtime/components/elements/card/CardTitle.vue

@@ -1,20 +1,19 @@
-<script setup>
-import { cn } from "../../../utils";
-const props = defineProps({
-  una: { type: Object, required: false },
-  class: { type: null, required: false }
-});
+<script setup lang="ts">
+import type { NCardTitleProps } from '../../../types'
+import { cn } from '../../../utils'
+
+const props = defineProps<NCardTitleProps>()
 </script>
 
 <template>
   <h3
     :class="
-  cn(
-    'card-title',
-    props.una?.cardTitle,
-    props.class
-  )
-"
+      cn(
+        'card-title',
+        props.una?.cardTitle,
+        props.class,
+      )
+    "
   >
     <slot />
   </h3>

package/dist/runtime/components/elements/collapsible/Collapsible.vue

@@ -1,18 +1,14 @@
-<script setup>
-import { CollapsibleRoot, useForwardPropsEmits } from "reka-ui";
-import CollapsibleContent from "./CollapsibleContent.vue";
-import CollapsibleTrigger from "./CollapsibleTrigger.vue";
-const props = defineProps({
-  _collapsibleContent: { type: Object, required: false },
-  defaultOpen: { type: Boolean, required: false },
-  open: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false },
-  unmountOnHide: { type: Boolean, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false }
-});
-const emits = defineEmits(["update:open"]);
-const forwarded = useForwardPropsEmits(props, emits);
+<script setup lang="ts">
+import type { CollapsibleRootEmits } from 'reka-ui'
+import type { NCollapsibleProps } from '../../../types'
+import { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'
+import CollapsibleContent from './CollapsibleContent.vue'
+import CollapsibleTrigger from './CollapsibleTrigger.vue'
+
+const props = defineProps<NCollapsibleProps>()
+const emits = defineEmits<CollapsibleRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>

package/dist/runtime/components/elements/collapsible/CollapsibleContent.vue

@@ -1,21 +1,18 @@
-<script setup>
-import { CollapsibleContent } from "reka-ui";
-import { cn } from "../../../utils";
-const props = defineProps({
-  forceMount: { type: Boolean, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: null, required: false }
-});
+<script setup lang="ts">
+import type { NCollapsibleContentProps } from '../../../types'
+import { CollapsibleContent } from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = defineProps<NCollapsibleContentProps>()
 </script>
 
 <template>
   <CollapsibleContent
     v-bind="props"
     :class="cn(
-  'collapsible-content',
-  props.class
-)"
+      'collapsible-content',
+      props.class,
+    )"
   >
     <slot />
   </CollapsibleContent>

package/dist/runtime/components/elements/collapsible/CollapsibleTrigger.vue

@@ -1,9 +1,8 @@
-<script setup>
-import { CollapsibleTrigger } from "reka-ui";
-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false }
-});
+<script setup lang="ts">
+import type { CollapsibleTriggerProps } from 'reka-ui'
+import { CollapsibleTrigger } from 'reka-ui'
+
+const props = defineProps<CollapsibleTriggerProps>()
 </script>
 
 <template>

package/dist/runtime/components/elements/dialog/Dialog.vue

@@ -1,47 +1,39 @@
-<script setup>
-import { reactivePick } from "@vueuse/core";
-import { DialogRoot, DialogTrigger, useForwardPropsEmits, VisuallyHidden } from "reka-ui";
-import { computed } from "vue";
-import { randomId } from "../../../utils";
-import DialogContent from "./DialogContent.vue";
-import DialogDescription from "./DialogDescription.vue";
-import DialogFooter from "./DialogFooter.vue";
-import DialogHeader from "./DialogHeader.vue";
-import DialogScrollContent from "./DialogScrollContent.vue";
-import DialogTitle from "./DialogTitle.vue";
+<script setup lang="ts">
+import type { DialogRootEmits } from 'reka-ui'
+import type { NDialogProps } from '../../../types'
+import { reactivePick } from '@vueuse/core'
+import { DialogRoot, DialogTrigger, useForwardPropsEmits, VisuallyHidden } from 'reka-ui'
+import { computed } from 'vue'
+import { randomId } from '../../../utils'
+import DialogContent from './DialogContent.vue'
+import DialogDescription from './DialogDescription.vue'
+import DialogFooter from './DialogFooter.vue'
+import DialogHeader from './DialogHeader.vue'
+import DialogScrollContent from './DialogScrollContent.vue'
+import DialogTitle from './DialogTitle.vue'
+
 defineOptions({
-  inheritAttrs: false
-});
-const props = defineProps({
-  title: { type: String, required: false },
-  description: { type: String, required: false },
-  scrollable: { type: Boolean, required: false },
-  _dialogTitle: { type: Object, required: false },
-  _dialogDescription: { type: Object, required: false },
-  _dialogHeader: { type: Object, required: false },
-  _dialogFooter: { type: Object, required: false },
-  _dialogContent: { type: Object, required: false },
-  una: { type: Object, required: false },
-  open: { type: Boolean, required: false },
-  defaultOpen: { type: Boolean, required: false },
-  modal: { type: Boolean, required: false },
-  preventClose: { type: Boolean, required: false },
-  showClose: { type: Boolean, required: false, default: true },
-  overlay: { type: Boolean, required: false, default: true },
-  _dialogClose: { type: Object, required: false },
-  _dialogOverlay: { type: Object, required: false }
-});
-const emits = defineEmits(["update:open"]);
-const DEFAULT_TITLE = randomId("dialog-title");
-const DEFAULT_DESCRIPTION = randomId("dialog-description");
-const title = computed(() => props.title ?? DEFAULT_TITLE);
-const description = computed(() => props.description ?? DEFAULT_DESCRIPTION);
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<NDialogProps>(), {
+  showClose: true,
+  overlay: true,
+})
+const emits = defineEmits<DialogRootEmits>()
+const DEFAULT_TITLE = randomId('dialog-title')
+const DEFAULT_DESCRIPTION = randomId('dialog-description')
+
+const title = computed(() => props.title ?? DEFAULT_TITLE)
+const description = computed(() => props.description ?? DEFAULT_DESCRIPTION)
+
 const rootProps = reactivePick(props, [
-  "open",
-  "defaultOpen",
-  "modal"
-]);
-const rootPropsEmits = useForwardPropsEmits(rootProps, emits);
+  'open',
+  'defaultOpen',
+  'modal',
+])
+
+const rootPropsEmits = useForwardPropsEmits(rootProps, emits)
 </script>
 
 <template>
@@ -60,7 +52,7 @@ const rootPropsEmits = useForwardPropsEmits(rootProps, emits);
       :prevent-close
       :una
     >
-      <VisuallyHidden v-if="title === DEFAULT_TITLE || !!$slots.title || (description === DEFAULT_DESCRIPTION || !!$slots.description)">
+      <VisuallyHidden v-if="(title === DEFAULT_TITLE || !!$slots.title) || (description === DEFAULT_DESCRIPTION || !!$slots.description)">
         <DialogTitle v-if="title === DEFAULT_TITLE || !!$slots.title">
           {{ title }}
         </DialogTitle>

package/dist/runtime/components/elements/dialog/DialogClose.vue

@@ -1,37 +1,14 @@
-<script setup>
-import { DialogClose } from "reka-ui";
-import Button from "../Button.vue";
-const props = defineProps({
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  type: { type: String, required: false },
-  loadingPlacement: { type: String, required: false },
-  icon: { type: Boolean, required: false, default: true },
-  disabled: { type: Boolean, required: false },
-  reverse: { type: Boolean, required: false },
-  loading: { type: Boolean, required: false },
-  block: { type: Boolean, required: false },
-  to: { type: null, required: false },
-  label: { type: String, required: false, default: "i-close" },
-  btn: { type: String, required: false, default: "ghost-gray" },
-  leading: { type: String, required: false },
-  trailing: { type: String, required: false },
-  size: { type: String, required: false },
-  una: { type: Object, required: false },
-  square: { type: null, required: false, default: "2em" },
-  rounded: { type: null, required: false },
-  class: { type: null, required: false },
-  breadcrumbActive: { type: String, required: false },
-  breadcrumbInactive: { type: String, required: false },
-  paginationSelected: { type: String, required: false },
-  paginationUnselected: { type: String, required: false },
-  dropdownMenu: { type: String, required: false },
-  toggleOn: { type: String, required: false },
-  toggleOff: { type: String, required: false },
-  navigationMenu: { type: String, required: false },
-  navigationMenuLink: { type: String, required: false },
-  ariaLabel: { type: String, required: false }
-});
+<script setup lang="ts">
+import type { NDialogCloseProps } from '../../../types'
+import { DialogClose } from 'reka-ui'
+import Button from '../Button.vue'
+
+const props = withDefaults(defineProps<NDialogCloseProps>(), {
+  btn: 'ghost-gray',
+  label: 'i-close',
+  square: '2em',
+  icon: true,
+})
 </script>
 
 <template>

package/dist/runtime/components/elements/dialog/DialogContent.vue

@@ -1,47 +1,42 @@
-<script setup>
-import { reactiveOmit } from "@vueuse/core";
+<script setup lang="ts">
+import type { DialogContentEmits } from 'reka-ui'
+import type { NDialogContentProps } from '../../../types'
+import { reactiveOmit } from '@vueuse/core'
 import {
   DialogContent,
   DialogPortal,
-  useForwardPropsEmits
-} from "reka-ui";
-import { computed } from "vue";
-import { cn } from "../../../utils";
-import DialogClose from "./DialogClose.vue";
-import DialogOverlay from "./DialogOverlay.vue";
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../../utils'
+import DialogClose from './DialogClose.vue'
+import DialogOverlay from './DialogOverlay.vue'
+
 defineOptions({
-  inheritAttrs: false
-});
-const props = defineProps({
-  preventClose: { type: Boolean, required: false },
-  showClose: { type: Boolean, required: false, default: true },
-  overlay: { type: Boolean, required: false, default: true },
-  _dialogClose: { type: Object, required: false },
-  _dialogOverlay: { type: Object, required: false },
-  una: { type: Object, required: false },
-  forceMount: { type: Boolean, required: false },
-  trapFocus: { type: Boolean, required: false },
-  disableOutsidePointerEvents: { type: Boolean, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: null, required: false }
-});
-const emits = defineEmits(["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"]);
-const delegatedProps = reactiveOmit(props, ["class", "una", "_dialogOverlay", "_dialogClose"]);
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<NDialogContentProps>(), {
+  showClose: true,
+  overlay: true,
+})
+const emits = defineEmits<DialogContentEmits>()
+const delegatedProps = reactiveOmit(props, ['class', 'una', '_dialogOverlay', '_dialogClose'])
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 const contentEvents = computed(() => {
   if (props.preventClose) {
     return {
-      pointerDownOutside: (e) => e.preventDefault(),
-      interactOutside: (e) => e.preventDefault(),
-      escapeKeyDown: (e) => e.preventDefault(),
-      closeAutoFocus: (e) => e.preventDefault()
-    };
+      pointerDownOutside: (e: Event) => e.preventDefault(),
+      interactOutside: (e: Event) => e.preventDefault(),
+      escapeKeyDown: (e: Event) => e.preventDefault(),
+      closeAutoFocus: (e: Event) => e.preventDefault(),
+    }
   }
+
   return {
-    closeAutoFocus: (e) => e.preventDefault()
-  };
-});
+    closeAutoFocus: (e: Event) => e.preventDefault(),
+  }
+})
 </script>
 
 <template>
@@ -55,11 +50,11 @@ const contentEvents = computed(() => {
     <DialogContent
       v-bind="{ ...forwarded, ...$attrs }"
       :class="cn(
-  '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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-48%',
-  'dialog-content',
-  props.una?.dialogContent,
-  props.class
-)"
+        '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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-48%',
+        'dialog-content',
+        props.una?.dialogContent,
+        props.class,
+      )"
       v-on="contentEvents"
     >
       <slot />

package/dist/runtime/components/elements/dialog/DialogDescription.vue

@@ -1,25 +1,24 @@
-<script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { DialogDescription, useForwardProps } from "reka-ui";
-import { cn } from "../../../utils";
-const props = defineProps({
-  una: { type: Object, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: null, required: false }
-});
-const delegatedProps = reactiveOmit(props, "class", "una");
-const forwardedProps = useForwardProps(delegatedProps);
+<script setup lang="ts">
+import type { NDialogDescriptionProps } from '../../../types'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogDescription, useForwardProps } from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = defineProps<NDialogDescriptionProps>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'una')
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <DialogDescription
     v-bind="forwardedProps"
     :class="cn(
-  'dialog-description 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-48%',
-  props.una?.dialogDescription,
-  props.class
-)"
+      'dialog-description 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-48%',
+      props.una?.dialogDescription,
+      props.class,
+    )"
   >
     <slot />
   </DialogDescription>

package/dist/runtime/components/elements/dialog/DialogFooter.vue

@@ -1,18 +1,17 @@
-<script setup>
-import { cn } from "../../../utils";
-const props = defineProps({
-  una: { type: Object, required: false },
-  class: { type: null, required: false }
-});
+<script setup lang="ts">
+import type { NDialogFooterProps } from '../../../types'
+import { cn } from '../../../utils'
+
+const props = defineProps<NDialogFooterProps>()
 </script>
 
 <template>
   <div
     :class="cn(
-  'dialog-footer',
-  props.una?.dialogFooter,
-  props.class
-)"
+      'dialog-footer',
+      props.una?.dialogFooter,
+      props.class,
+    )"
   >
     <slot />
   </div>

package/dist/runtime/components/elements/dialog/DialogHeader.vue

@@ -1,18 +1,17 @@
-<script setup>
-import { cn } from "../../../utils";
-const props = defineProps({
-  una: { type: Object, required: false },
-  class: { type: null, required: false }
-});
+<script setup lang="ts">
+import type { NDialogHeaderProps } from '../../../types'
+import { cn } from '../../../utils'
+
+const props = defineProps<NDialogHeaderProps>()
 </script>
 
 <template>
   <div
     :class="cn(
-  'dialog-header',
-  props.una?.dialogHeader,
-  props.class
-)"
+      'dialog-header',
+      props.una?.dialogHeader,
+      props.class,
+    )"
   >
     <slot />
   </div>

package/dist/runtime/components/elements/dialog/DialogOverlay.vue

@@ -1,21 +1,19 @@
-<script setup>
-import { DialogOverlay } from "reka-ui";
-import { cn } from "../../../utils";
-const props = defineProps({
-  una: { type: Object, required: false },
-  class: { type: null, required: false },
-  scrollable: { type: Boolean, required: false }
-});
+<script lang="ts" setup>
+import type { NDialogOverlayProps } from '../../../types'
+import { DialogOverlay } from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = defineProps<NDialogOverlayProps>()
 </script>
 
 <template>
   <DialogOverlay
     :class="cn(
-  'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-  !props.scrollable ? 'dialog-overlay' : 'dialog-scroll-overlay',
-  props.una?.dialogOverlay,
-  props.class
-)"
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      !props.scrollable ? 'dialog-overlay' : 'dialog-scroll-overlay',
+      props.una?.dialogOverlay,
+      props.class,
+    )"
   >
     <slot />
   </DialogOverlay>