@una-ui/nuxt 0.7.0-beta.1 → 0.8.0-beta.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@una-ui/nuxt",
   "configKey": "una",
-  "version": "0.7.0-beta.1",
+  "version": "0.8.0-beta.1",
   "compatibility": {
     "nuxt": ">=3.0.0"
   },

package/dist/module.mjs

@@ -1,12 +1,13 @@
-import { defineNuxtModule, createResolver, addComponentsDir, addPlugin, installModule, addImportsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addComponentsDir, addPlugin, addImportsDir, installModule } from '@nuxt/kit';
 import extendUnocssOptions from './una.config.mjs';
 import 'unocss';
+import 'unocss-preset-animations';
 import '@una-ui/preset';
 import '@una-ui/preset/prefixes';
 import '@una-ui/extractor-vue-script';
 
 const name = "@una-ui/nuxt";
-const version = "0.7.0-beta.1";
+const version = "0.8.0-beta.1";
 
 const module = defineNuxtModule({
   meta: {
@@ -45,6 +46,12 @@ const module = defineNuxtModule({
       global: options.global,
       watch: nuxt.options.dev
     });
+    addComponentsDir({
+      path: resolve(runtimeDir, "components/forms", "select"),
+      prefix: options.prefix,
+      global: options.global,
+      watch: nuxt.options.dev
+    });
     addComponentsDir({
       path: resolve(runtimeDir, "components", "misc"),
       prefix: options.prefix,
@@ -63,6 +70,7 @@ const module = defineNuxtModule({
     }
     if (!options.dev)
       nuxt.options.unocss = extendUnocssOptions(nuxt.options.unocss);
+    addImportsDir(resolve(runtimeDir, "utils", "cn"));
     await installModule("radix-vue/nuxt");
     await installModule("@unocss/nuxt");
     await installModule("@nuxtjs/color-mode", {

package/dist/runtime/components/elements/Button.vue

@@ -4,6 +4,7 @@ import { createReusableTemplate } from '@vueuse/core'
 import NIcon from '../elements/Icon.vue'
 import type { NButtonProps } from '../../types'
 import NLink from '../elements/Link.vue'
+import { cn } from '../../utils'
 
 defineOptions({
   inheritAttrs: false,
@@ -29,16 +30,18 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
     :is="to ? NLink : 'button'"
     :to="to"
     :type="to ? null : type"
-    class="btn"
-    :class="[
+    :class="cn(
       !hasVariant && !isBaseVariant ? una?.btnDefaultVariant : null,
+      'btn',
       { 'btn-reverse': reverse },
+      props.class,
       una?.btn,
-    ]"
+    )"
     :disabled="to ? null : disabled || loading"
     :btn="btn"
     :aria-label="icon ? label : null"
     v-bind="$attrs"
+    :size="size"
   >
     <DefineTemplate v-if="loading">
       <slot name="loading">
@@ -89,8 +92,8 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
       <NIcon
         v-if="trailing"
         :name="trailing"
-        :class="una?.btnTrailing"
         btn="trailing"
+        :class="una?.btnTrailing"
       />
     </slot>
   </Component>

package/dist/runtime/components/forms/Slider.vue

@@ -21,7 +21,6 @@ const isVertical = computed(() => props.orientation === 'vertical')
     :class="cn(
       'slider-root',
       isVertical && 'slider-root-vertical',
-      props.size,
       props.class,
       props.una?.sliderRoot,
       disabled && 'slider-disabled',

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

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import type { SelectRootEmits } from 'radix-vue'
+import {
+  useForwardPropsEmits,
+} from 'radix-vue'
+import type { NSelectProps } from '../../../types'
+import { isEqualObject, omitProps } from '../../../utils'
+import SelectRoot from './SelectRoot.vue'
+import SelectTrigger from './SelectTrigger.vue'
+import SelectGroup from './SelectGroup.vue'
+import SelectItem from './SelectItem.vue'
+import SelectLabel from './SelectLabel.vue'
+import SelectContent from './SelectContent.vue'
+import SelectValue from './SelectValue.vue'
+import SelectSeparator from './SelectSeparator.vue'
+
+const props = withDefaults(defineProps<NSelectProps>(), {
+  size: 'sm',
+})
+const emits = defineEmits<SelectRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const transformerValue = computed(() => {
+  if (typeof forwarded.value.modelValue === 'object') {
+    if (forwarded.value.valueAttribute)
+      return forwarded.value.modelValue[forwarded.value.valueAttribute]
+
+    if (forwarded.value.itemAttribute)
+      return forwarded.value.modelValue[forwarded.value.itemAttribute]
+  }
+
+  return forwarded.value.modelValue
+})
+
+provide('selectModelValue', forwarded.value.modelValue)
+</script>
+
+<template>
+  <SelectRoot
+    v-bind="omitProps(forwarded, ['items', 'multipleGroup', 'itemAttribute', 'placeholder', 'label', 'id'])"
+  >
+    <SelectTrigger
+      :id="forwarded.id"
+      :size="forwarded.size"
+      :status="forwarded.status"
+      v-bind="forwarded._selectTrigger"
+    >
+      <slot name="trigger" :value="forwarded.modelValue">
+        <SelectValue
+          v-bind="forwarded._selectValue"
+          :placeholder="forwarded._selectValue?.placeholder || forwarded.placeholder"
+        >
+          <slot :value="forwarded.modelValue">
+            {{ transformerValue }}
+          </slot>
+        </SelectValue>
+      </slot>
+    </SelectTrigger>
+
+    <SelectContent
+      :size="forwarded.size"
+      v-bind="{
+        ...forwarded._selectContent,
+        _selectScrollDownButton: forwarded._selectScrollDownButton,
+        _selectScrollUpButton: forwarded._selectScrollUpButton,
+        _selectViewport: forwarded._selectViewport,
+      }"
+    >
+      <slot name="content" :items="forwarded.items">
+        <!--  single-group -->
+        <template v-if="!forwarded.multipleGroup">
+          <SelectLabel
+            v-if="forwarded.label"
+            v-bind="forwarded._selectLabel"
+          >
+            <slot name="label" :label="forwarded.label">
+              {{ forwarded.label }}
+            </slot>
+          </SelectLabel>
+
+          <template
+            v-for="item in items"
+            :key="item"
+          >
+            <SelectItem
+              :value="item"
+              :size="forwarded.size"
+              v-bind="{ ...forwarded._selectItem, ...item._selectItem }"
+              :is-selected="isEqualObject(item, forwarded.modelValue)"
+            >
+              <slot name="item" :item="item">
+                {{ props.itemAttribute ? item[props.itemAttribute] : item }}
+              </slot>
+            </SelectItem>
+          </template>
+        </template>
+
+        <!-- multiple-group -->
+        <template
+          v-else
+        >
+          <SelectGroup
+            v-for="(groupItems, i) in items"
+            :key="i"
+            v-bind="forwarded._selectGroup"
+          >
+            <SelectSeparator
+              v-if="i > 0"
+              v-bind="forwarded._selectSeparator"
+            />
+
+            <slot name="group" :items="groupItems">
+              <SelectLabel
+                v-if="groupItems.label"
+                :size="forwarded.size"
+                v-bind="{ ...forwarded._selectLabel, ...groupItems._selectLabel }"
+              >
+                <slot name="label" :label="groupItems.label">
+                  {{ groupItems.label }}
+                </slot>
+              </SelectLabel>
+
+              <template
+                v-for="groupItem in groupItems.items"
+                :key="groupItem"
+              >
+                <SelectItem
+                  :value="groupItem "
+                  :size="forwarded.size"
+                  v-bind="{ ...forwarded._selectItem, ...groupItems?._selectItem, ...groupItem._selectItem }"
+                  :is-selected="groupItem === transformerValue"
+                >
+                  <slot name="item" :item="groupItem">
+                    {{ props.itemAttribute ? groupItem[props.itemAttribute] : groupItem }}
+                  </slot>
+                </SelectItem>
+              </template>
+            </slot>
+          </SelectGroup>
+        </template>
+        <slot />
+      </slot>
+    </SelectContent>
+  </SelectRoot>
+</template>

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

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  SelectContent,
+  type SelectContentEmits,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '../../../utils'
+import type { NSelectContentProps } from '../../../types'
+import SelectScrollDownButton from './SelectScrollDownButton.vue'
+import SelectScrollUpButton from './SelectScrollUpButton.vue'
+
+defineOptions({
+  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)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="cn(
+        'select-content',
+        position === 'popper'
+          && 'select-content-popper',
+        props.class,
+      )
+      "
+    >
+      <SelectScrollUpButton
+        v-bind="forwarded._selectScrollUpButton"
+      />
+      <SelectViewport
+        :class="cn(
+          'select-viewport',
+          position === 'popper' && 'select-viewport-popper')"
+        v-bind="forwarded._selectViewport"
+      >
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton
+        v-bind="forwarded._selectScrollDownButton"
+      />
+    </SelectContent>
+  </SelectPortal>
+</template>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SelectGroup } from 'radix-vue'
+import { cn } from '../../../utils'
+import type { NSelectGroupProps } from '../../../types'
+
+const props = defineProps<NSelectGroupProps>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectGroup :class="cn('select-group', props.class)" v-bind="delegatedProps">
+    <slot />
+  </SelectGroup>
+</template>

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

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import {
+  SelectItem,
+  useForwardProps,
+} from 'radix-vue'
+import { cn } from '../../../utils'
+import type { NSelectItemProps, NSelectProps } from '../../../types'
+import SelectItemText from './SelectItemText.vue'
+import SelectItemIndicator from './SelectItemIndicator.vue'
+
+const props = withDefaults(defineProps<NSelectItemProps>(), {})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+const modelValue = inject<NSelectProps>('selectModelValue')
+
+const isSelected = computed(() => {
+  return props.isSelected || modelValue === props.value
+})
+</script>
+
+<template>
+  <SelectItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'select-item',
+        props.class,
+        props.una?.selectItem,
+      )
+    "
+    :select-item="selectItem"
+    :aria-selected="isSelected"
+    :aria-checked="isSelected"
+    :is-selected="isSelected"
+    :data-state="true ? 'checked' : 'unchecked'"
+  >
+    <SelectItemIndicator
+      v-if="isSelected"
+      v-bind="forwardedProps._selectItemIndicator"
+    >
+      <slot name="item-indicator" />
+    </SelectItemIndicator>
+
+    <SelectItemText
+      v-bind="forwardedProps._selectItemText"
+    >
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { Primitive } from 'radix-vue'
+import type { NSelectItemIndicatorProps } from '../../../types'
+import { cn } from '../../../utils'
+import Icon from '../../elements/Icon.vue'
+
+const props = withDefaults(defineProps<NSelectItemIndicatorProps>(), {
+  as: 'span',
+})
+</script>
+
+<template>
+  <Primitive
+    aria-hidden
+    v-bind="props"
+    :class="cn(
+      'select-item-indicator',
+      props.class,
+      props.una?.selectItemIndicator,
+    )"
+  >
+    <slot>
+      <Icon
+        :name="props.icon ?? 'select-item-indicator-icon'"
+        :class="cn(
+          props.una?.selectItemIndicatorIcon,
+        )"
+      />
+    </slot>
+  </Primitive>
+</template>

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

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { SelectItemText } from 'radix-vue'
+import type { NSelectItemTextProps } from '../../../types'
+
+const props = defineProps<NSelectItemTextProps>()
+</script>
+
+<template>
+  <SelectItemText v-bind="props">
+    <slot />
+  </SelectItemText>
+</template>

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { SelectLabel } from 'radix-vue'
+import { cn } from '../../../utils'
+import type { NSelectLabelProps } from '../../../types'
+
+const props = defineProps<NSelectLabelProps>()
+</script>
+
+<template>
+  <SelectLabel :class="cn('select-label', props.class)">
+    <slot />
+  </SelectLabel>
+</template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { SelectRootEmits } from 'radix-vue'
+import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
+import type { NSelectRootProps } from '../../../types'
+import { cn } from '../../../utils'
+
+const props = defineProps<NSelectRootProps>()
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <SelectRoot
+    :class="cn(
+      'select-root',
+      props.class,
+      props.una?.selectRoot,
+    )"
+    v-bind="forwarded"
+  >
+    <slot />
+  </SelectRoot>
+</template>

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SelectScrollDownButton, useForwardProps } from 'radix-vue'
+import Icon from '../../elements/Icon.vue'
+import { cn } from '../../../utils'
+import type { NSelectScrollDownButtonProps } from '../../../types'
+
+const props = defineProps<NSelectScrollDownButtonProps>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton v-bind="forwardedProps" :class="cn('select-scroll-down-button', props.class)">
+    <slot>
+      <Icon
+        :name="forwardedProps?.una?.selectScrollDownButtonIcon || 'select-scroll-down-button-icon'"
+      />
+    </slot>
+  </SelectScrollDownButton>
+</template>

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SelectScrollUpButton, useForwardProps } from 'radix-vue'
+import Icon from '../../elements/Icon.vue'
+import { cn } from '../../../utils'
+import type { NSelectScrollUpButtonProps } from '../../../types'
+
+const props = defineProps<NSelectScrollUpButtonProps>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton v-bind="forwardedProps" :class="cn('select-scroll-up-button', props.class)">
+    <slot>
+      <Icon
+        :name="forwardedProps?.una?.selectScrollUpButtonIcon || 'select-scroll-up-button-icon'"
+      />
+    </slot>
+  </SelectScrollUpButton>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SelectSeparator } from 'radix-vue'
+import { cn } from '../../../utils'
+import type { NSelectSeparator } from '../../../types'
+
+const props = defineProps<NSelectSeparator>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectSeparator v-bind="delegatedProps" :class="cn('select-separator', props.class)" />
+</template>

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

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SelectTrigger, useForwardProps } from 'radix-vue'
+import { cn } from '../../../utils'
+import type { NSelectTriggerProps } from '../../../types'
+import Button from '../../elements/Button.vue'
+
+const props = withDefaults(defineProps<NSelectTriggerProps>(), {
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+
+const statusClassVariants = computed(() => {
+  const btn = {
+    info: 'btn-outline-info',
+    success: 'btn-outline-success',
+    warning: 'btn-outline-warning',
+    error: 'btn-outline-error',
+    default: props?.una?.btnDefaultVariant ?? 'btn-outline-white',
+  }
+
+  const text = {
+    info: 'text-info',
+    success: 'text-success',
+    warning: 'text-warning',
+    error: 'text-error',
+    default: 'text-muted',
+  }
+
+  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: 'select-trigger-trailing-icon',
+  }
+
+  return {
+    btn: btn[props.status ?? 'default'],
+    text: text[props.status ?? 'default'],
+    icon: icon[props.status ?? 'default'],
+  }
+})
+</script>
+
+<template>
+  <SelectTrigger
+    as-child
+  >
+    <Button
+      v-bind="forwardedProps"
+      :class="cn(
+        'select-trigger justify-between font-normal',
+        props.class,
+      )"
+      :trailing="statusClassVariants.icon"
+      :una="{
+        ...props.una,
+        ...{
+          btnLeading: cn(
+            'select-trigger-leading',
+            props.una?.btnLeading,
+          ),
+          btnTrailing: cn(
+            'select-trigger-trailing',
+            props.una?.btnTrailing,
+            statusClassVariants.text,
+          ),
+          btnDefaultVariant: statusClassVariants.btn,
+        },
+      }"
+    >
+      <slot />
+    </Button>
+  </SelectTrigger>
+</template>

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { SelectValue } from 'radix-vue'
+import type { NSelectValueProps } from '../../../types'
+
+const props = defineProps<NSelectValueProps>()
+</script>
+
+<template>
+  <SelectValue
+    :class="{ 'select-value': !props.placeholder }"
+    v-bind="props"
+  >
+    <slot />
+  </SelectValue>
+</template>

package/dist/runtime/types/button.d.ts

@@ -1,4 +1,8 @@
-export interface NButtonProps {
+import type { HTMLAttributes } from 'vue';
+interface Extensions {
+    class?: HTMLAttributes['class'];
+}
+export interface NButtonProps extends Extensions {
     /**
      * Change the button type.
      *
@@ -78,6 +82,15 @@ export interface NButtonProps {
      * trailing="i-heroicons-information-circle text-green-500 dark:text-green-400 text-2xl"
      */
     trailing?: string;
+    /**
+     * Allows you to change the size of the input.
+     *
+     * @default sm
+     *
+     * @example
+     * size="sm" | size="2cm" | size="2rem" | size="2px"
+     */
+    size?: string;
     /**
      * `UnaUI` preset configuration
      *
@@ -94,3 +107,4 @@ export interface NButtonProps {
         btnLoadingIcon?: string;
     };
 }
+export {};