@una-ui/nuxt 0.53.0 → 0.54.1

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

@@ -1,87 +1,69 @@
-<script>
-import { computed } from "vue";
+<script lang="ts">
+import type { AcceptableValue, SelectRootEmits } from 'reka-ui'
+import type { NSelectProps, SelectGroup as SelectGroupType } from '../../../types'
+import { computed } from 'vue'
 </script>
 
-<script setup>
-import { SelectRoot, useForwardPropsEmits } from "reka-ui";
-import { cn, isEqualObject } from "../../../utils";
-import SelectContent from "./SelectContent.vue";
-import SelectGroup from "./SelectGroup.vue";
-import SelectItem from "./SelectItem.vue";
-import SelectLabel from "./SelectLabel.vue";
-import SelectSeparator from "./SelectSeparator.vue";
-import SelectTrigger from "./SelectTrigger.vue";
-import SelectValue from "./SelectValue.vue";
-const props = defineProps({
-  items: { type: Array, required: true },
-  itemKey: { type: null, required: false },
-  valueKey: { type: null, required: false },
-  label: { type: String, required: false },
-  groupSeparator: { type: Boolean, required: false },
-  _selectScrollUpButton: { type: Object, required: false },
-  _selectItemText: { type: Object, required: false },
-  _selectScrollDownButton: { type: Object, required: false },
-  _selectGroup: { type: Object, required: false },
-  _selectSeparator: { type: Object, required: false },
-  _selectContent: { type: Object, required: false },
-  _selectValue: { type: Object, required: false },
-  _selectTrigger: { type: Object, required: false },
-  _selectItem: { type: Object, required: false },
-  _selectLabel: { type: Object, required: false },
-  una: { type: Object, required: false },
-  open: { type: Boolean, required: false },
-  defaultOpen: { type: Boolean, required: false },
-  defaultValue: { type: null, required: false },
-  modelValue: { type: null, required: false },
-  by: { type: [String, Function], required: false },
-  dir: { type: String, required: false },
-  multiple: { type: Boolean, required: false },
-  autocomplete: { type: String, required: false },
-  disabled: { type: Boolean, required: false },
-  name: { type: String, required: false },
-  required: { type: Boolean, required: false },
-  class: { type: null, required: false },
-  size: { type: null, required: false, default: "sm" },
-  placeholder: { type: String, required: false },
-  selectItem: { type: null, required: false },
-  status: { type: String, required: false },
-  select: { type: String, required: false },
-  id: { type: String, required: false }
-});
-const emits = defineEmits(["update:modelValue", "update:open"]);
+<script setup lang="ts" generic="T extends AcceptableValue">
+import { SelectRoot, useForwardPropsEmits } from 'reka-ui'
+import { cn, isEqualObject } from '../../../utils'
+import SelectContent from './SelectContent.vue'
+import SelectGroup from './SelectGroup.vue'
+import SelectItem from './SelectItem.vue'
+import SelectLabel from './SelectLabel.vue'
+import SelectSeparator from './SelectSeparator.vue'
+import SelectTrigger from './SelectTrigger.vue'
+import SelectValue from './SelectValue.vue'
+
+const props = withDefaults(defineProps<NSelectProps<T>>(), {
+  size: 'sm',
+})
+
+const emits = defineEmits<SelectRootEmits<T>>()
+
+// Check if items are grouped
 const hasGroups = computed(() => {
-  return Array.isArray(props.items) && props.items.length > 0 && typeof props.items[0] === "object" && "items" in props.items[0];
-});
-const forwarded = useForwardPropsEmits(props, emits);
-function formatSelectedValue(value) {
-  if (!value || Array.isArray(value) && value.length === 0)
-    return null;
+  return Array.isArray(props.items) && props.items.length > 0
+    && typeof props.items[0] === 'object' && 'items' in (props.items[0] as any)
+})
+
+const forwarded = useForwardPropsEmits(props, emits)
+
+function formatSelectedValue(value: unknown) {
+  if (!value || (Array.isArray(value) && value.length === 0))
+    return null
+
   if (props.multiple && Array.isArray(value)) {
     return value.map((val) => {
-      if (props.valueKey && typeof val === "object") {
-        return val[props.valueKey];
+      if (props.valueKey && typeof val === 'object') {
+        return (val as Record<string, any>)[props.valueKey as string]
       }
-      return val;
-    }).join(", ");
+      return val
+    }).join(', ')
   }
-  if (props.valueKey && typeof value === "object") {
-    return value[props.valueKey];
+
+  if (props.valueKey && typeof value === 'object') {
+    return (value as Record<string, any>)[props.valueKey as string]
   }
-  return value;
+
+  return value
 }
-function isItemSelected(item, modelValue) {
+
+function isItemSelected(item: unknown, modelValue: unknown) {
   if (!modelValue)
-    return false;
+    return false
+
   if (props.multiple && Array.isArray(modelValue)) {
     return modelValue.some((val) => {
-      const valObj = typeof val === "object" && val ? val : { value: val };
-      const itemObj2 = typeof item === "object" && item ? item : { value: item };
-      return isEqualObject(valObj, itemObj2);
-    });
+      const valObj = typeof val === 'object' && val ? val : { value: val }
+      const itemObj = typeof item === 'object' && item ? item : { value: item }
+      return isEqualObject(valObj, itemObj)
+    })
   }
-  const modelObj = typeof modelValue === "object" && modelValue ? modelValue : { value: modelValue };
-  const itemObj = typeof item === "object" && item ? item : { value: item };
-  return isEqualObject(modelObj, itemObj);
+
+  const modelObj = typeof modelValue === 'object' && modelValue ? modelValue : { value: modelValue }
+  const itemObj = typeof item === 'object' && item ? item : { value: item }
+  return isEqualObject(modelObj, itemObj)
 }
 </script>
 
@@ -89,9 +71,9 @@ function isItemSelected(item, modelValue) {
   <SelectRoot
     v-slot="{ modelValue, open }"
     :class="cn(
-  props.una?.select,
-  props.class
-)"
+      props.una?.select,
+      props.class,
+    )"
     v-bind="forwarded"
   >
     <slot :model-value :open>
@@ -123,10 +105,10 @@ function isItemSelected(item, modelValue) {
       <SelectContent
         :size
         v-bind="{
-  ..._selectContent,
-  _selectScrollDownButton,
-  _selectScrollUpButton
-}"
+          ..._selectContent,
+          _selectScrollDownButton,
+          _selectScrollUpButton,
+        }"
         :una
       >
         <slot name="content" :items="items">
@@ -154,7 +136,7 @@ function isItemSelected(item, modelValue) {
                 :una
               >
                 <slot name="item" :item="item">
-                  {{ props.itemKey && item ? item[props.itemKey] : item }}
+                  {{ props.itemKey && item ? (item as any)[props.itemKey] : item }}
                 </slot>
                 <template #indicator>
                   <slot name="indicator" :item="item" />
@@ -165,7 +147,7 @@ function isItemSelected(item, modelValue) {
 
           <template v-if="hasGroups">
             <SelectGroup
-              v-for="(group, i) in items"
+              v-for="(group, i) in items as SelectGroupType<T>[]"
               :key="i"
               v-bind="props._selectGroup"
               :una
@@ -201,7 +183,7 @@ function isItemSelected(item, modelValue) {
                     :una
                   >
                     <slot name="item" :item="item">
-                      {{ props.itemKey ? item[props.itemKey] : item }}
+                      {{ props.itemKey ? (item as any)[props.itemKey] : item }}
                     </slot>
                     <template #indicator>
                       <slot name="indicator" :item="item" />

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

@@ -1,75 +1,58 @@
-<script setup>
+<script setup lang="ts">
+import type { SelectContentEmits } from 'reka-ui'
+import type { NSelectContentProps } from '../../../types'
 import {
   SelectContent,
   SelectPortal,
   SelectViewport,
-  useForwardPropsEmits
-} from "reka-ui";
-import { computed } from "vue";
-import { cn } from "../../../utils";
-import SelectScrollDownButton from "./SelectScrollDownButton.vue";
-import SelectScrollUpButton from "./SelectScrollUpButton.vue";
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../../utils'
+import SelectScrollDownButton from './SelectScrollDownButton.vue'
+import SelectScrollUpButton from './SelectScrollUpButton.vue'
+
 defineOptions({
-  inheritAttrs: false
-});
-const props = defineProps({
-  _selectScrollDownButton: { type: Object, required: false },
-  _selectScrollUpButton: { type: Object, required: false },
-  _selectSeparator: { type: Object, required: false },
-  una: { type: Object, required: false },
-  forceMount: { type: Boolean, required: false },
-  position: { type: String, required: false, default: "popper" },
-  bodyLock: { type: Boolean, required: false },
-  side: { type: null, required: false },
-  sideOffset: { type: Number, required: false },
-  align: { type: null, required: false },
-  alignOffset: { type: Number, required: false },
-  avoidCollisions: { type: Boolean, required: false },
-  collisionBoundary: { type: null, required: false },
-  collisionPadding: { type: [Number, Object], required: false },
-  arrowPadding: { type: Number, required: false },
-  sticky: { type: String, required: false },
-  hideWhenDetached: { type: Boolean, required: false },
-  positionStrategy: { type: String, required: false },
-  updatePositionStrategy: { type: String, required: false },
-  disableUpdateOnLayoutShift: { type: Boolean, required: false },
-  prioritizePosition: { type: Boolean, required: false },
-  reference: { type: null, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: null, required: false },
-  size: { type: null, required: false }
-});
-const emits = defineEmits(["closeAutoFocus", "escapeKeyDown", "pointerDownOutside"]);
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<NSelectContentProps>(),
+  {
+    position: 'popper',
+  },
+)
+const emits = defineEmits<SelectContentEmits>()
+
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
-  return delegated;
-});
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <SelectPortal>
     <SelectContent
       v-bind="{ ...forwarded, ...$attrs }"
-      :class="
-  cn(
-    'select-content',
-    position === 'popper' && 'select-content-popper',
-    props.class
-  )
-"
+      :class="cn(
+        'select-content',
+        position === 'popper'
+          && 'select-content-popper',
+        props.class,
+      )
+      "
     >
       <SelectScrollUpButton
         v-bind="_selectScrollUpButton"
       />
       <SelectViewport
-        :class="
-  cn(
-    'select-viewport',
-    position === 'popper' && 'select-viewport-popper'
-  )
-"
+        :class="cn(
+          'select-viewport',
+          position === 'popper' && 'select-viewport-popper')
+        "
       >
         <slot />
       </SelectViewport>

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

@@ -1,27 +1,25 @@
-<script setup>
-import { SelectGroup } 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 { NSelectGroupProps } from '../../../types'
+import { SelectGroup } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../../utils'
+
+const props = defineProps<NSelectGroupProps>()
+
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
-  return delegated;
-});
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
 </script>
 
 <template>
   <SelectGroup
     :class="cn(
-  'select-group',
-  props.una?.selectGroup,
-  props.class
-)"
+      'select-group',
+      props.una?.selectGroup,
+      props.class,
+    )"
     v-bind="delegatedProps"
   >
     <slot />

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

@@ -1,43 +1,37 @@
-<script setup>
+<script setup lang="ts">
+import type { NSelectItemProps } from '../../../types'
 import {
   SelectItem,
-  useForwardProps
-} from "reka-ui";
-import { computed } from "vue";
-import { cn } from "../../../utils";
-import SelectItemIndicator from "./SelectItemIndicator.vue";
-import SelectItemText from "./SelectItemText.vue";
-const props = defineProps({
-  selectItem: { type: null, required: false, default: "gray" },
-  isSelected: { type: Boolean, required: false },
-  _selectItemText: { type: Object, required: false },
-  _selectItemIndicator: { type: Object, required: false },
-  una: { type: Object, required: false },
-  value: { type: null, required: true },
-  disabled: { type: Boolean, required: false },
-  textValue: { type: String, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-  class: { type: null, required: false },
-  size: { type: null, required: false }
-});
+  useForwardProps,
+} from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../../utils'
+import SelectItemIndicator from './SelectItemIndicator.vue'
+import SelectItemText from './SelectItemText.vue'
+
+const props = withDefaults(defineProps<NSelectItemProps>(), {
+  selectItem: 'gray',
+})
+
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
-  return delegated;
-});
-const forwardedProps = useForwardProps(delegatedProps);
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <SelectItem
     v-bind="forwardedProps"
     :class="
-  cn(
-    'select-item',
-    props.una?.selectItem,
-    props.class
-  )
-"
+      cn(
+        'select-item',
+        props.una?.selectItem,
+        props.class,
+      )
+    "
     :select-item
   >
     <SelectItemIndicator

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

@@ -1,14 +1,12 @@
-<script setup>
-import { Primitive } from "reka-ui";
-import { cn } from "../../../utils";
-import Icon from "../../elements/Icon.vue";
-const props = defineProps({
-  icon: { type: null, required: false },
-  class: { type: null, required: false },
-  una: { type: Object, required: false },
-  asChild: { type: Boolean, required: false },
-  as: { type: null, required: false, default: "span" }
-});
+<script setup lang="ts">
+import type { NSelectItemIndicatorProps } from '../../../types'
+import { Primitive } from 'reka-ui'
+import { cn } from '../../../utils'
+import Icon from '../../elements/Icon.vue'
+
+const props = withDefaults(defineProps<NSelectItemIndicatorProps>(), {
+  as: 'span',
+})
 </script>
 
 <template>
@@ -16,17 +14,17 @@ const props = defineProps({
     aria-hidden
     v-bind="props"
     :class="cn(
-  'select-item-indicator',
-  props.una?.selectItemIndicator,
-  props.class
-)"
+      'select-item-indicator',
+      props.una?.selectItemIndicator,
+      props.class,
+    )"
   >
     <slot>
       <Icon
         :name="props.icon ?? 'select-item-indicator-icon'"
         :class="cn(
-  props.una?.selectItemIndicatorIcon
-)"
+          props.una?.selectItemIndicatorIcon,
+        )"
       />
     </slot>
   </Primitive>

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

@@ -1,12 +1,8 @@
-<script setup>
-import { SelectItemText } from "reka-ui";
-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 { NSelectItemTextProps } from '../../../types'
+import { SelectItemText } from 'reka-ui'
+
+const props = defineProps<NSelectItemTextProps>()
 </script>
 
 <template>

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

@@ -1,23 +1,18 @@
-<script setup>
-import { SelectLabel } from "reka-ui";
-import { cn } from "../../../utils";
-const props = defineProps({
-  una: { type: Object, required: false },
-  for: { 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 { NSelectLabelProps } from '../../../types'
+import { SelectLabel } from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = defineProps<NSelectLabelProps>()
 </script>
 
 <template>
   <SelectLabel
     :class="cn(
-  'select-label',
-  props.una?.selectLabel,
-  props.class
-)"
+      'select-label',
+      props.una?.selectLabel,
+      props.class,
+    )"
   >
     <slot />
   </SelectLabel>

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

@@ -1,30 +1,29 @@
-<script setup>
-import { SelectScrollDownButton, useForwardProps } from "reka-ui";
-import { computed } from "vue";
-import { cn } from "../../../utils";
-import Icon from "../../elements/Icon.vue";
-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 { NSelectScrollDownButtonProps } from '../../../types'
+import { SelectScrollDownButton, useForwardProps } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../../utils'
+import Icon from '../../elements/Icon.vue'
+
+const props = defineProps<NSelectScrollDownButtonProps>()
+
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
-  return delegated;
-});
-const forwardedProps = useForwardProps(delegatedProps);
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <SelectScrollDownButton
     v-bind="forwardedProps"
     :class="cn(
-  'select-scroll-down-button',
-  props.una?.selectScrollDownButton,
-  props.class
-)"
+      'select-scroll-down-button',
+      props.una?.selectScrollDownButton,
+      props.class,
+    )"
   >
     <slot>
       <Icon

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

@@ -1,30 +1,29 @@
-<script setup>
-import { SelectScrollUpButton, useForwardProps } from "reka-ui";
-import { computed } from "vue";
-import { cn } from "../../../utils";
-import Icon from "../../elements/Icon.vue";
-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 { NSelectScrollUpButtonProps } from '../../../types'
+import { SelectScrollUpButton, useForwardProps } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../../utils'
+import Icon from '../../elements/Icon.vue'
+
+const props = defineProps<NSelectScrollUpButtonProps>()
+
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
-  return delegated;
-});
-const forwardedProps = useForwardProps(delegatedProps);
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <SelectScrollUpButton
     v-bind="forwardedProps"
     :class="cn(
-  'select-scroll-up-button',
-  props.una?.selectScrollUpButton,
-  props.class
-)"
+      'select-scroll-up-button',
+      props.una?.selectScrollUpButton,
+      props.class,
+    )"
   >
     <slot>
       <Icon