@una-ui/nuxt 0.53.0 → 0.54.1

package/dist/runtime/components/forms/select/SelectSeparator.vue

@@ -1,27 +1,25 @@
-<script setup>
-import { SelectSeparator } from "reka-ui";
-import { computed } from "vue";
-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 },
-  size: { type: null, required: false }
-});
+<script setup lang="ts">
+import type { NSelectSeparator } from '../../../types'
+import { SelectSeparator } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../../utils'
+
+const props = defineProps<NSelectSeparator>()
+
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
-  return delegated;
-});
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <SelectSeparator
     v-bind="delegatedProps"
     :class="cn(
-  'select-separator',
-  props.una?.selectSeparator,
-  props.class
-)"
+      'select-separator',
+      props.una?.selectSeparator,
+      props.class,
+    )"
   />
 </template>

package/dist/runtime/components/forms/select/SelectTrigger.vue

@@ -1,68 +1,43 @@
-<script setup>
-import { reactiveOmit } from "@vueuse/core";
-import { SelectIcon, SelectTrigger, useForwardProps } from "reka-ui";
-import { computed } from "vue";
-import { cn, randomId } from "../../../utils";
-import Button from "../../elements/Button.vue";
-import Icon from "../../elements/Icon.vue";
-const props = defineProps({
-  id: { type: String, required: false },
-  select: { type: String, required: false, default: "solid-white" },
-  status: { type: String, required: false },
-  una: { type: Object, required: false },
-  disabled: { type: Boolean, required: false },
-  reference: { type: null, required: false },
-  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 },
-  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 },
-  btn: { type: String, required: false },
-  leading: { type: String, required: false },
-  trailing: { type: String, required: false },
-  size: { type: String, required: false },
-  square: { type: null, required: false },
-  rounded: { type: null, required: false },
-  class: { type: void 0, 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 }
-});
-const forwardedProps = useForwardProps(reactiveOmit(props, "class", "status", "una", "select"));
+<script setup lang="ts">
+import type { NSelectTriggerProps } from '../../../types'
+import { reactiveOmit } from '@vueuse/core'
+import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui'
+import { computed } from 'vue'
+import { cn, randomId } from '../../../utils'
+import Button from '../../elements/Button.vue'
+import Icon from '../../elements/Icon.vue'
+
+const props = withDefaults(defineProps<NSelectTriggerProps>(), {
+  select: 'solid-white',
+})
+
+const forwardedProps = useForwardProps(reactiveOmit(props, 'class', 'status', 'una', 'select'))
+
 const statusClassVariants = computed(() => {
   const btn = {
-    info: "btn-outline-info",
-    success: "btn-outline-success",
-    warning: "btn-outline-warning",
-    error: "btn-outline-error",
-    default: ""
-  };
+    info: 'btn-outline-info',
+    success: 'btn-outline-success',
+    warning: 'btn-outline-warning',
+    error: 'btn-outline-error',
+    default: '',
+  }
+
   const icon = {
-    info: props.una?.selectTriggerInfoIcon ?? "select-trigger-info-icon",
-    success: props.una?.selectTriggerSuccessIcon ?? "select-trigger-success-icon",
-    warning: props.una?.selectTriggerWarningIcon ?? "select-trigger-warning-icon",
-    error: props.una?.selectTriggerErrorIcon ?? "select-trigger-error-icon",
-    default: props?.trailing ?? props.una?.selectTriggerTrailingIcon ?? "select-trigger-trailing-icon"
-  };
+    info: props.una?.selectTriggerInfoIcon ?? 'select-trigger-info-icon',
+    success: props.una?.selectTriggerSuccessIcon ?? 'select-trigger-success-icon',
+    warning: props.una?.selectTriggerWarningIcon ?? 'select-trigger-warning-icon',
+    error: props.una?.selectTriggerErrorIcon ?? 'select-trigger-error-icon',
+    default: props?.trailing ?? props.una?.selectTriggerTrailingIcon ?? 'select-trigger-trailing-icon',
+  }
+
   return {
-    btn: btn[props.status ?? "default"],
-    icon: icon[props.status ?? "default"]
-  };
-});
-const id = computed(() => props.id ?? randomId("select-trigger"));
-const status = computed(() => props.status ?? "default");
+    btn: btn[props.status ?? 'default'],
+    icon: icon[props.status ?? 'default'],
+  }
+})
+
+const id = computed(() => props.id ?? randomId('select-trigger'))
+const status = computed(() => props.status ?? 'default')
 </script>
 
 <template>
@@ -72,22 +47,23 @@ const status = computed(() => props.status ?? "default");
     <Button
       v-bind="forwardedProps"
       :id
-      :select="statusClassVariants.btn ? void 0 : props.select"
+      :select="statusClassVariants.btn ? undefined : props.select"
       :data-status="status"
       :class="cn(
-  'select-trigger justify-between font-normal',
-  props.class
-)"
+        'select-trigger justify-between font-normal',
+        props.una?.selectTrigger,
+        props.class,
+      )"
       :una="{
-  ...props.una,
-  btn: props.una?.selectTrigger,
-  btnLeading: cn(
-    'select-trigger-leading',
-    props.una?.btnLeading,
-    props.una?.selectTriggerLeading
-  ),
-  btnDefaultVariant: statusClassVariants.btn
-}"
+        ...props.una,
+        btn: props.una?.selectTrigger,
+        btnLeading: cn(
+          'select-trigger-leading',
+          props.una?.btnLeading,
+          props.una?.selectTriggerLeading,
+        ),
+        btnDefaultVariant: statusClassVariants.btn,
+      }"
     >
       <slot />
 
@@ -99,10 +75,10 @@ const status = computed(() => props.status ?? "default");
             :data-status="status"
             :name="statusClassVariants.icon"
             :class="cn(
-  'select-trigger-trailing rtl:mr-auto ltr:ml-auto',
-  props.una?.btnTrailing,
-  props.una?.selectTriggerTrailing
-)"
+              'select-trigger-trailing rtl:mr-auto ltr:ml-auto',
+              props.una?.btnTrailing,
+              props.una?.selectTriggerTrailing,
+            )"
           />
         </SelectIcon>
       </template>

package/dist/runtime/components/forms/select/SelectValue.vue

@@ -1,23 +1,18 @@
-<script setup>
-import { SelectValue } from "reka-ui";
-import { cn } from "../../../utils";
-const props = defineProps({
-  una: { type: Object, required: false },
-  placeholder: { type: String, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: null, required: false },
-  size: { type: null, required: false }
-});
+<script setup lang="ts">
+import type { NSelectValueProps } from '../../../types'
+import { SelectValue } from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = defineProps<NSelectValueProps>()
 </script>
 
 <template>
   <SelectValue
     :class="cn(
-  'select-value',
-  props.una?.selectValue,
-  props.class
-)"
+      'select-value',
+      props.una?.selectValue,
+      props.class,
+    )"
     v-bind="props"
   >
     <slot />

package/dist/runtime/components/misc/ThemeSwitcher.vue

@@ -1,55 +1,71 @@
-<script setup>
-import { useColorMode } from "#imports";
-import { useToggle } from "@vueuse/core";
-import { capitalize, computed } from "vue";
-import { useUnaSettings } from "../../composables/useUnaSettings";
-import { useUnaThemes } from "../../composables/useUnaThemes";
-import { RADIUS } from "../../constants";
-import Button from "../elements/Button.vue";
-import Label from "../elements/Label.vue";
-import Popover from "../elements/popover/Popover.vue";
-import Separator from "../elements/Separator.vue";
-const colorMode = useColorMode();
-const [value, toggle] = useToggle();
-const { primaryThemes, grayThemes } = useUnaThemes();
-const { settings, reset } = useUnaSettings();
-const currentPrimaryThemeHex = computed(() => settings.value.primaryColors?.["--una-primary-hex"]);
+<script setup lang="ts">
+import { useColorMode } from '#imports'
+import { useToggle } from '@vueuse/core'
+import { capitalize, computed } from 'vue'
+import { useUnaSettings } from '../../composables/useUnaSettings'
+import { useUnaThemes } from '../../composables/useUnaThemes'
+import { RADIUS } from '../../constants'
+import Button from '../elements/Button.vue'
+import Label from '../elements/Label.vue'
+import Popover from '../elements/popover/Popover.vue'
+import Separator from '../elements/Separator.vue'
+
+const colorMode = useColorMode()
+
+const [value, toggle] = useToggle()
+const { primaryThemes, grayThemes } = useUnaThemes()
+const { settings, reset } = useUnaSettings()
+
+const currentPrimaryThemeHex = computed(() => settings.value.primaryColors?.['--una-primary-hex'])
 const currentPrimaryThemeName = computed(() => {
-  const theme = primaryThemes.find(([, theme2]) => theme2["--una-primary-hex"] === currentPrimaryThemeHex.value);
-  return theme ? theme[0] : "";
-});
-const currentGrayThemeHex = computed(() => settings.value.grayColors?.["--una-gray-hex"]);
+  const theme = primaryThemes.find(([, theme]) => theme['--una-primary-hex'] === currentPrimaryThemeHex.value)
+  return theme ? theme[0] : ''
+})
+const currentGrayThemeHex = computed(() => settings.value.grayColors?.['--una-gray-hex'])
 const currentGrayThemeName = computed(() => {
-  const theme = grayThemes.find(([, theme2]) => theme2["--una-gray-hex"] === currentGrayThemeHex.value);
-  return theme ? theme[0] : "";
-});
-function updatePrimaryTheme(theme) {
-  settings.value.primary = theme;
+  const theme = grayThemes.find(([, theme]) => theme['--una-gray-hex'] === currentGrayThemeHex.value)
+  return theme ? theme[0] : ''
+})
+
+// update theme in storage
+function updatePrimaryTheme(theme: string): void {
+  settings.value.primary = theme
 }
-function updateGrayTheme(theme) {
-  settings.value.gray = theme;
+
+function updateGrayTheme(theme: string): void {
+  settings.value.gray = theme
 }
-function shuffleTheme() {
+
+function shuffleTheme(): void {
   if (primaryThemes.length > 0 && grayThemes.length > 0 && RADIUS.length > 0) {
-    const safeGetPrimaryTheme = () => {
-      const index = Math.floor(Math.random() * primaryThemes.length);
-      return primaryThemes[index]?.[0];
-    };
-    const safeGetGrayTheme = () => {
-      const index = Math.floor(Math.random() * grayThemes.length);
-      return grayThemes[index]?.[0];
-    };
-    const safeGetRadius = () => {
-      const index = Math.floor(Math.random() * RADIUS.length);
-      return RADIUS[index];
-    };
-    const randomPrimaryTheme = safeGetPrimaryTheme();
-    const randomGrayTheme = safeGetGrayTheme();
-    const randomRadius = safeGetRadius();
-    updatePrimaryTheme(randomPrimaryTheme);
-    updateGrayTheme(randomGrayTheme);
-    settings.value.radius = randomRadius;
-    toggle();
+    // Safe way to access random elements with proper typing
+    const safeGetPrimaryTheme = (): string => {
+      const index = Math.floor(Math.random() * primaryThemes.length)
+      // Force type assertion for TypeScript
+      return primaryThemes[index]?.[0] as string
+    }
+
+    const safeGetGrayTheme = (): string => {
+      const index = Math.floor(Math.random() * grayThemes.length)
+      // Force type assertion for TypeScript
+      return grayThemes[index]?.[0] as string
+    }
+
+    const safeGetRadius = (): number => {
+      const index = Math.floor(Math.random() * RADIUS.length)
+      // Force type assertion for TypeScript
+      return RADIUS[index] as number
+    }
+
+    // Get random values with correct typing
+    const randomPrimaryTheme = safeGetPrimaryTheme()
+    const randomGrayTheme = safeGetGrayTheme()
+    const randomRadius = safeGetRadius()
+
+    updatePrimaryTheme(randomPrimaryTheme)
+    updateGrayTheme(randomGrayTheme)
+    settings.value.radius = randomRadius
+    toggle()
   }
 }
 </script>
@@ -133,8 +149,10 @@ function shuffleTheme() {
               btn="solid-gray"
               size="xs"
               :class="
-  r === settings.radius ? 'ring-2 ring-primary' : ''
-"
+                r === settings.radius
+                  ? 'ring-2 ring-primary'
+                  : ''
+              "
               @click="settings.radius = r"
             >
               {{ r }}
@@ -197,8 +215,8 @@ function shuffleTheme() {
             label="Shuffle"
             leading="i-lucide-paintbrush"
             :una="{
-  btnLeading: value ? 'rotate-6 transform' : '-rotate-6'
-}"
+              btnLeading: value ? 'rotate-6 transform' : '-rotate-6',
+            }"
             @click="shuffleTheme"
           />
         </div>

package/dist/runtime/components/navigation/breadcrumb/Breadcrumb.vue

@@ -1,37 +1,24 @@
-<script setup>
-import { cn } from "../../../utils";
-import DropdownMenu from "../../elements/dropdown-menu/DropdownMenu.vue";
-import BreadcrumbEllipsis from "./BreadcrumbEllipsis.vue";
-import BreadcrumbItem from "./BreadcrumbItem.vue";
-import BreadcrumbLink from "./BreadcrumbLink.vue";
-import BreadcrumbList from "./BreadcrumbList.vue";
-import BreadcrumbRoot from "./BreadcrumbRoot.vue";
-import BreadcrumbSeparator from "./BreadcrumbSeparator.vue";
-const props = defineProps({
-  items: { type: Array, required: true },
-  separator: { type: String, required: false },
-  ellipsis: { type: String, required: false },
-  size: { type: String, required: false },
-  _breadcrumbSeparator: { type: Object, required: false },
-  _breadcrumbItem: { type: Object, required: false },
-  _breadcrumbRoot: { type: Object, required: false },
-  _breadcrumbList: { type: Object, required: false },
-  _breadcrumbLink: { type: Object, required: false },
-  _breadcrumbEllipsis: { type: Object, required: false },
-  una: { type: Object, required: false },
-  class: { type: null, required: false },
-  breadcrumbActive: { type: String, required: false },
-  breadcrumbInactive: { type: String, required: false }
-});
+<script lang="ts" setup>
+import type { NBreadcrumbProps } from '../../../types'
+import { cn } from '../../../utils'
+import DropdownMenu from '../../elements/dropdown-menu/DropdownMenu.vue'
+import BreadcrumbEllipsis from './BreadcrumbEllipsis.vue'
+import BreadcrumbItem from './BreadcrumbItem.vue'
+import BreadcrumbLink from './BreadcrumbLink.vue'
+import BreadcrumbList from './BreadcrumbList.vue'
+import BreadcrumbRoot from './BreadcrumbRoot.vue'
+import BreadcrumbSeparator from './BreadcrumbSeparator.vue'
+
+const props = defineProps<NBreadcrumbProps>()
 </script>
 
 <template>
   <BreadcrumbRoot
     :class="cn(
-  'breadcrumb',
-  props.class,
-  props.una?.breadcrumb
-)"
+      'breadcrumb',
+      props.class,
+      props.una?.breadcrumb,
+    )"
     :una
     :size
     v-bind="_breadcrumbRoot"
@@ -60,9 +47,9 @@ const props = defineProps({
                   :breadcrumb-inactive="props.breadcrumbInactive"
                   :size
                   v-bind="{
-  ...item,
-  ..._breadcrumbLink
-}"
+                    ...item,
+                    ..._breadcrumbLink,
+                  }"
                 >
                   <slot :item="item" :index="i" :is-active="i === items.length - 1" />
                 </BreadcrumbLink>
@@ -73,8 +60,8 @@ const props = defineProps({
                       :modal="false"
                       :items="item.children"
                       :_dropdown-menu-item="{
-  ..._breadcrumbLink
-}"
+                        ..._breadcrumbLink,
+                      }"
                     >
                       <BreadcrumbEllipsis
                         :size
@@ -87,7 +74,7 @@ const props = defineProps({
               </slot>
             </BreadcrumbItem>
             <BreadcrumbSeparator
-              v-if="i < props.items.length - 1"
+              v-if="i < props.items!.length - 1"
               :icon="props.separator"
               :size
               :una

package/dist/runtime/components/navigation/breadcrumb/BreadcrumbEllipsis.vue

@@ -1,12 +1,13 @@
-<script setup>
-import { cn } from "../../../utils";
-import Icon from "../../elements/Icon.vue";
-const props = defineProps({
-  icon: { type: String, required: false, default: "breadcrumb-ellipsis-icon" },
-  size: { type: String, required: false, default: "sm" },
-  una: { type: Object, required: false },
-  class: { type: null, required: false }
-});
+<script lang="ts" setup>
+import type { NBreadcrumbEllipsisProps } from '../../../types'
+import { cn } from '../../../utils'
+import Icon from '../../elements/Icon.vue'
+
+const props = withDefaults(defineProps<NBreadcrumbEllipsisProps>(), {
+  icon: 'breadcrumb-ellipsis-icon',
+  size: 'sm',
+  square: 9,
+})
 </script>
 
 <template>
@@ -14,10 +15,10 @@ const props = defineProps({
     role="presentation"
     aria-hidden="true"
     :class="cn(
-  'breadcrumb-ellipsis',
-  props.class,
-  props.una?.breadcrumbEllipsis
-)"
+      'breadcrumb-ellipsis',
+      props.class,
+      props.una?.breadcrumbEllipsis,
+    )"
     :size
   >
     <slot>

package/dist/runtime/components/navigation/breadcrumb/BreadcrumbItem.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 lang="ts" setup>
+import type { NBreadcrumbItemProps } from '../../../types'
+import { cn } from '../../../utils'
+
+const props = defineProps<NBreadcrumbItemProps>()
 </script>
 
 <template>
   <li
     :class="cn(
-  'breadcrumb-item',
-  props.class,
-  props.una?.breadcrumbItem
-)"
+      'breadcrumb-item',
+      props.class,
+      props.una?.breadcrumbItem,
+    )"
   >
     <slot />
   </li>

package/dist/runtime/components/navigation/breadcrumb/BreadcrumbLink.vue

@@ -1,60 +1,40 @@
-<script setup>
-import { computed } from "vue";
-import { cn } from "../../../utils";
-import Button from "../../elements/Button.vue";
-const props = defineProps({
-  active: { type: Boolean, required: false, default: false },
-  breadcrumbActive: { type: String, required: false, default: "~" },
-  breadcrumbInactive: { type: String, required: false, default: "~" },
-  class: { type: null, required: false },
-  type: { type: String, required: false },
-  loadingPlacement: { type: String, required: false },
-  icon: { type: Boolean, required: false },
-  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 },
-  btn: { type: String, required: false },
-  leading: { type: String, required: false },
-  trailing: { type: String, required: false },
-  size: { type: String, required: false, default: "sm" },
-  una: { type: Object, required: false },
-  square: { type: null, required: false },
-  rounded: { type: null, 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 lang="ts" setup>
+import type { NBreadcrumbLinkProps } from '../../../types'
+import { computed } from 'vue'
+import { cn } from '../../../utils'
+import Button from '../../elements/Button.vue'
+
+const props = withDefaults(defineProps<NBreadcrumbLinkProps>(), {
+  active: false,
+  breadcrumbActive: '~',
+  breadcrumbInactive: '~',
+  size: 'sm',
+})
+
 const activeAttrs = computed(() => {
   if (!props.active) {
     return {
-      "data-state": "inactive"
-    };
+      'data-state': 'inactive',
+    }
   }
+
   return {
-    "aria-disabled": true,
-    "tabindex": -1,
-    "data-state": "active",
-    "aria-current": "page"
-  };
-});
+    'aria-disabled': true,
+    'tabindex': -1,
+    'data-state': 'active',
+    'aria-current': 'page',
+  }
+})
 </script>
 
 <template>
   <Button
     v-bind="{ ...props, ...activeAttrs }"
     :class="cn(
-  'breadcrumb-link',
-  { 'cursor-text': active }
-)"
-    :to="disabled ? void 0 : props.to"
+      'breadcrumb-link',
+      { 'cursor-text': active },
+    )"
+    :to="disabled ? undefined : props.to"
   >
     <slot />
   </Button>

package/dist/runtime/components/navigation/breadcrumb/BreadcrumbList.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 lang="ts" setup>
+import type { NBreadcrumbListProps } from '../../../types'
+import { cn } from '../../../utils'
+
+const props = defineProps<NBreadcrumbListProps>()
 </script>
 
 <template>
   <ol
     :class="cn(
-  'breadcrumb-list',
-  props.class,
-  props.una?.breadcrumbList
-)"
+      'breadcrumb-list',
+      props.class,
+      props.una?.breadcrumbList,
+    )"
   >
     <slot />
   </ol>