@una-ui/nuxt 0.51.6 → 0.52.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "configKey": "una",
-  "version": "0.51.6",
+  "version": "0.52.0",
   "compatibility": {
     "nuxt": ">=3.0.0"
   },

package/dist/module.mjs

@@ -8,7 +8,7 @@ import 'unocss';
 import 'unocss-preset-animations';
 
 const name = "@una-ui/nuxt";
-const version = "0.51.6";
+const version = "0.52.0";
 
 const module = defineNuxtModule({
   meta: {

package/dist/runtime/components/combobox/Combobox.vue

@@ -0,0 +1,316 @@
+<script lang="ts">
+import type { AcceptableValue, ComboboxRootEmits } from 'reka-ui'
+import type { ExtractItemType, NComboboxGroupProps, NComboboxProps } from '../../types'
+import { reactiveOmit } from '@vueuse/core'
+import { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '../../utils'
+</script>
+
+<script setup lang="ts" generic="T extends AcceptableValue">
+import { computed } from 'vue'
+import ComboboxAnchor from './ComboboxAnchor.vue'
+import ComboboxEmpty from './ComboboxEmpty.vue'
+import ComboboxGroup from './ComboboxGroup.vue'
+import ComboboxInput from './ComboboxInput.vue'
+import ComboboxItem from './ComboboxItem.vue'
+import ComboboxItemIndicator from './ComboboxItemIndicator.vue'
+import ComboboxList from './ComboboxList.vue'
+import ComboboxSeparator from './ComboboxSeparator.vue'
+import ComboboxTrigger from './ComboboxTrigger.vue'
+import ComboboxViewport from './ComboboxViewport.vue'
+
+const props = withDefaults(defineProps<NComboboxProps<T>>(), {
+  textEmpty: 'No items found.',
+  size: 'md',
+})
+const emits = defineEmits<ComboboxRootEmits<ExtractItemType<T>>>()
+
+const rootProps = reactiveOmit(props, [
+  'items',
+  'una',
+  'size',
+  'label',
+  'labelKey',
+  'valueKey',
+  'groupSeparator',
+  'textEmpty',
+  '_comboboxAnchor',
+  '_comboboxEmpty',
+  '_comboboxGroup',
+  '_comboboxInput',
+  '_comboboxItem',
+  '_comboboxItemIndicator',
+  '_comboboxLabel',
+  '_comboboxList',
+  '_comboboxSeparator',
+  '_comboboxTrigger',
+  '_comboboxViewport',
+  '_comboboxCheckbox',
+])
+
+const forwarded = useForwardPropsEmits(rootProps, emits)
+
+const labelKey = computed(() => props.labelKey?.toString() ?? 'label')
+const valueKey = computed(() => props.valueKey?.toString() ?? 'value')
+
+// 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] as any)
+})
+
+// Helper function to safely get a property from an item
+function getItemProperty<K extends string>(item: ExtractItemType<T> | null | undefined, key: K): any {
+  if (item == null)
+    return ''
+
+  return typeof item !== 'object' ? item : (item as Record<K, unknown>)[key]
+}
+
+// Find a matching item from the items list by its value
+function findItemByValue(value: unknown): ExtractItemType<T> | undefined {
+  if (!props.items)
+    return undefined
+
+  if (hasGroups.value) {
+    // Search in grouped items
+    for (const group of props.items as NComboboxGroupProps<ExtractItemType<T>>[]) {
+      const found = group.items?.find(item => getItemProperty(item, valueKey.value) === value)
+      if (found)
+        return found
+    }
+    return undefined
+  }
+  else {
+    // Search in flat items list
+    return (props.items as ExtractItemType<T>[]).find(item => getItemProperty(item, valueKey.value) === value)
+  }
+}
+
+// Display function that handles both single and multiple selections
+function getDisplayValue(val: unknown): string {
+  // Handle empty values
+  if (!val || (Array.isArray(val) && val.length === 0))
+    return ''
+
+  // Handle multiple selection (array values)
+  if (props.multiple && Array.isArray(val)) {
+    return val.map((v) => {
+      // For primitive values (string/number), find matching item to get label
+      if (typeof v !== 'object' || v === null) {
+        const item = findItemByValue(v)
+        return item ? getItemProperty(item, labelKey.value) : v
+      }
+
+      // For objects, try to get the label directly
+      return getItemProperty(v, labelKey.value) || getItemProperty(v, valueKey.value) || ''
+    }).filter(Boolean).join(', ')
+  }
+
+  // For single primitive value
+  if (typeof val !== 'object' || val === null) {
+    const item = findItemByValue(val)
+    return item ? getItemProperty(item, labelKey.value) : String(val || '')
+  }
+
+  // For single object, get its label
+  return getItemProperty(val as any, labelKey.value) || getItemProperty(val as any, valueKey.value) || ''
+}
+
+// Check if an item is selected in the current modelValue
+function isItemSelected(item: ExtractItemType<T> | null | undefined): boolean {
+  if (item == null)
+    return false
+
+  const itemValue = getItemProperty(item, valueKey.value)
+
+  // For multiple selection
+  if (props.multiple && Array.isArray(props.modelValue)) {
+    return props.modelValue.includes(itemValue)
+  }
+
+  // For single selection
+  return typeof props.modelValue === 'object' && props.modelValue !== null
+    ? getItemProperty(props.modelValue as ExtractItemType<T>, valueKey.value) === itemValue
+    : props.modelValue === itemValue
+}
+</script>
+
+<template>
+  <ComboboxRoot
+    v-slot="{ modelValue, open }"
+    data-slot="combobox"
+    :class="cn(
+      'combobox',
+      props.una?.combobox,
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <slot>
+      <ComboboxAnchor
+        v-bind="props._comboboxAnchor"
+        :una
+      >
+        <slot name="anchor">
+          <template
+            v-if="$slots.trigger || $slots.triggerRoot"
+          >
+            <slot name="trigger-wrapper">
+              <ComboboxTrigger
+                v-bind="props._comboboxTrigger"
+                :id
+                :status
+                :class="cn(
+                  'text-0.875em',
+                  props._comboboxTrigger?.class,
+                )"
+                :size
+              >
+                <slot name="trigger" :model-value :open />
+              </ComboboxTrigger>
+            </slot>
+          </template>
+
+          <template v-else>
+            <slot name="input-wrapper" :model-value :open>
+              <ComboboxInput
+                :id
+                :display-value="(val: unknown) => getDisplayValue(val)"
+                name="frameworks"
+                :status
+                :size
+                v-bind="props._comboboxInput"
+              />
+            </slot>
+          </template>
+        </slot>
+      </ComboboxAnchor>
+
+      <ComboboxList
+        v-bind="{ ...props._comboboxList, ...props._comboboxContent }"
+        :_comboboxPortal
+        :size
+        :una
+      >
+        <slot name="list">
+          <slot name="input-wrapper" :model-value :open>
+            <ComboboxInput
+              v-if="$slots.trigger || $slots.triggerRoot"
+              :size
+              :class="cn(
+                'border-0 border-b-1 rounded-none focus-visible:ring-0',
+                props._comboboxInput?.class,
+              )"
+              v-bind="props._comboboxInput"
+            />
+          </slot>
+
+          <slot name="header" />
+
+          <slot name="body">
+            <ComboboxViewport
+              v-bind="props._comboboxViewport"
+              :una
+            >
+              <ComboboxEmpty
+                v-bind="props._comboboxEmpty"
+                :una
+              >
+                <slot name="empty">
+                  {{ props.textEmpty }}
+                </slot>
+              </ComboboxEmpty>
+
+              <!-- Non-grouped items -->
+              <template v-if="!hasGroups">
+                <ComboboxGroup
+                  v-bind="props._comboboxGroup"
+                  :label="props.label"
+                  :una
+                >
+                  <slot name="group">
+                    <ComboboxItem
+                      v-for="item in items as ExtractItemType<T>[]"
+                      :key="getItemProperty(item, valueKey)"
+                      :value="props.multiple ? getItemProperty(item, valueKey) : item"
+                      :size
+                      v-bind="props._comboboxItem"
+                      :class="cn(
+                        'text-0.875em',
+                        props._comboboxItem?.class,
+                      )"
+                      :una
+                    >
+                      <slot name="item" :item="item" :selected="isItemSelected(item)">
+                        <slot name="label" :item="item">
+                          {{ getItemProperty(item, labelKey) }}
+                        </slot>
+
+                        <ComboboxItemIndicator
+                          v-bind="props._comboboxItemIndicator"
+                          :una
+                        >
+                          <slot name="item-indicator" :item="item">
+                            <NIcon name="i-lucide-check" />
+                          </slot>
+                        </ComboboxItemIndicator>
+                      </slot>
+                    </ComboboxItem>
+                  </slot>
+                </ComboboxGroup>
+              </template>
+
+              <!-- Grouped items -->
+              <template v-else>
+                <ComboboxGroup
+                  v-for="(group, i) in items as NComboboxGroupProps<ExtractItemType<T>>[]"
+                  :key="i"
+                  v-bind="props._comboboxGroup"
+                  :label="group.label"
+                  :una
+                >
+                  <ComboboxSeparator
+                    v-if="i > 0 && props.groupSeparator"
+                    v-bind="props._comboboxSeparator"
+                    :una
+                  />
+
+                  <slot name="group" :group="group">
+                    <ComboboxItem
+                      v-for="item in group.items"
+                      :key="getItemProperty(item, valueKey)"
+                      :value="props.multiple ? getItemProperty(item, valueKey) : item"
+                      :size
+                      v-bind="{ ...props._comboboxItem, ...group._comboboxItem }"
+                      :class="cn(
+                        'text-0.875em',
+                        props._comboboxItem?.class,
+                      )"
+                      :una
+                    >
+                      <slot name="item" :item="item" :group="group" :selected="isItemSelected(item)">
+                        <slot name="label" :item="item">
+                          {{ getItemProperty(item, labelKey) }}
+                        </slot>
+
+                        <ComboboxItemIndicator
+                          v-bind="props._comboboxItemIndicator"
+                          :una
+                        >
+                          <slot name="indicator" :item="item" />
+                        </ComboboxItemIndicator>
+                      </slot>
+                    </ComboboxItem>
+                  </slot>
+                </ComboboxGroup>
+              </template>
+            </ComboboxViewport>
+          </slot>
+
+          <slot name="footer" />
+        </slot>
+      </ComboboxList>
+    </slot>
+  </ComboboxRoot>
+</template>

package/dist/runtime/components/combobox/ComboboxAnchor.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { NComboboxAnchorProps } from '../../types'
+import { ComboboxAnchor, useForwardProps } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../utils'
+
+const props = defineProps<NComboboxAnchorProps>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ComboboxAnchor
+    data-slot="combobox-anchor"
+    v-bind="forwarded"
+    :class="cn(
+      'combobox-anchor',
+      props.una?.comboboxAnchor,
+      props.class,
+    )"
+  >
+    <slot />
+  </ComboboxAnchor>
+</template>

package/dist/runtime/components/combobox/ComboboxEmpty.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { NComboboxEmptyProps } from '../../types'
+import { ComboboxEmpty } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../utils'
+
+const props = defineProps<NComboboxEmptyProps>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxEmpty
+    data-slot="combobox-empty"
+    v-bind="delegatedProps"
+    :class="cn(
+      'combobox-empty',
+      props.una?.comboboxEmpty,
+      props.class,
+    )"
+  >
+    <slot />
+  </ComboboxEmpty>
+</template>

package/dist/runtime/components/combobox/ComboboxGroup.vue

@@ -0,0 +1,39 @@
+<script lang="ts">
+import type { AcceptableValue } from 'reka-ui'
+</script>
+
+<script setup lang="ts" generic="T extends AcceptableValue">
+import type { NComboboxGroupProps } from '../../types'
+import { ComboboxGroup } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../utils'
+import ComboboxLabel from './ComboboxLabel.vue'
+
+const props = defineProps<NComboboxGroupProps<T>>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxGroup
+    data-slot="combobox-group"
+    v-bind="delegatedProps"
+    :class="cn(
+      'combobox-group',
+      props.una?.comboboxGroup,
+      props.class,
+    )"
+  >
+    <ComboboxLabel
+      v-if="props.label"
+      :una
+    >
+      {{ props.label }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>

package/dist/runtime/components/combobox/ComboboxInput.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { ComboboxInputEmits } from 'reka-ui'
+import type { NComboboxInputProps } from '../../types'
+import { ComboboxInput, useForwardPropsEmits } from 'reka-ui'
+import { inject, onMounted, ref } from 'vue'
+import { isInComboboxListKey } from '../../utils/injectionKeys'
+import Input from '../forms/Input.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<NComboboxInputProps>(), {
+  leading: 'combobox-input-leading-icon',
+})
+
+const emits = defineEmits<ComboboxInputEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+const inputRef = ref<InstanceType<typeof Input>>()
+
+const isInList = inject(isInComboboxListKey, false)
+
+onMounted(() => {
+  if (isInList) {
+    inputRef.value?.focus()
+  }
+})
+</script>
+
+<template>
+  <ComboboxInput
+    v-bind="props"
+    as-child
+  >
+    <Input
+      ref="inputRef"
+      data-slot="command-input"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :_input-wrapper="{
+        'data-slot': 'command-input-wrapper',
+      }"
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </Input>
+  </ComboboxInput>
+</template>

package/dist/runtime/components/combobox/ComboboxItem.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts" generic="T">
+import type { ComboboxItemEmits } from 'reka-ui'
+import type { NComboboxItemProps } from '../../types'
+import { ComboboxItem, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../utils'
+
+const props = defineProps<NComboboxItemProps<T>>()
+const emits = defineEmits<ComboboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxItem
+    data-slot="combobox-item"
+    v-bind="forwarded"
+    :class="cn(
+      `combobox-item`,
+      props.una?.comboboxItem,
+      props.class,
+    )"
+  >
+    <slot />
+  </ComboboxItem>
+</template>

package/dist/runtime/components/combobox/ComboboxItemIndicator.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { NComboboxItemIndicatorProps } from '../../types'
+import { ComboboxItemIndicator, useForwardProps } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../utils'
+
+const props = withDefaults(defineProps<NComboboxItemIndicatorProps>(), {
+  icon: 'combobox-item-indicator-icon-name',
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ComboboxItemIndicator
+    data-slot="combobox-item-indicator"
+    v-bind="forwarded"
+    :class="cn(
+      'combobox-item-indicator',
+      props.una?.comboboxItemIndicator,
+      props.class,
+    )"
+  >
+    <slot>
+      <NIcon
+        :name="props.icon"
+        :class="cn(
+          'combobox-item-indicator-icon',
+          props.una?.comboboxItemIndicatorIcon,
+        )"
+      />
+    </slot>
+  </ComboboxItemIndicator>
+</template>

package/dist/runtime/components/combobox/ComboboxLabel.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { NComboboxLabelProps } from '../../types'
+import { ComboboxLabel } from 'reka-ui'
+import { cn } from '../../utils'
+
+const props = defineProps<NComboboxLabelProps>()
+</script>
+
+<template>
+  <ComboboxLabel
+    :class="cn(
+      'combobox-label',
+      props.una?.comboboxLabel,
+      props.class,
+    )"
+  >
+    <slot>
+      {{ props.label }}
+    </slot>
+  </ComboboxLabel>
+</template>

package/dist/runtime/components/combobox/ComboboxList.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { ComboboxContentEmits } from 'reka-ui'
+import type { NComboboxListProps } from '../../types'
+import { reactiveOmit } from '@vueuse/core'
+import { ComboboxContent, ComboboxPortal, useForwardPropsEmits } from 'reka-ui'
+import { provide } from 'vue'
+import { cn } from '../../utils'
+import { isInComboboxListKey } from '../../utils/injectionKeys'
+
+const props = withDefaults(defineProps<NComboboxListProps>(), {
+  position: 'popper',
+  align: 'center',
+  sideOffset: 4,
+})
+const emits = defineEmits<ComboboxContentEmits>()
+
+provide(isInComboboxListKey, true)
+
+const delegatedProps = reactiveOmit(props, 'class', 'viewportClass')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxPortal
+    v-bind="props._comboboxPortal"
+  >
+    <ComboboxContent
+      data-slot="combobox-list"
+      v-bind="forwarded"
+      :class="cn(
+        'origin-(--reka-combobox-content-transform-origin)',
+        'combobox-list',
+        props.una?.comboboxList,
+        props.class,
+      )"
+    >
+      <slot />
+    </ComboboxContent>
+  </ComboboxPortal>
+</template>

package/dist/runtime/components/combobox/ComboboxSeparator.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { NComboboxSeparatorProps } from '../../types'
+import { ComboboxSeparator } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../utils'
+
+const props = defineProps<NComboboxSeparatorProps>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxSeparator
+    data-slot="combobox-separator"
+    v-bind="delegatedProps"
+    :class="cn(
+      'combobox-separator',
+      props.una?.comboboxSeparator,
+      props.class,
+    )"
+  >
+    <slot />
+  </ComboboxSeparator>
+</template>