@una-ui/nuxt 0.31.0-beta.1 → 0.32.0-beta.1

package/dist/module.json

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

package/dist/module.mjs

@@ -7,7 +7,7 @@ import 'unocss';
 import 'unocss-preset-animations';
 
 const name = "@una-ui/nuxt";
-const version = "0.31.0-beta.1";
+const version = "0.32.0-beta.1";
 
 const module = defineNuxtModule({
   meta: {
@@ -148,6 +148,20 @@ const module = defineNuxtModule({
       watch: nuxt.options.dev,
       priority: 10
     });
+    addComponentsDir({
+      path: resolve(runtimeDir, "components", "overlays"),
+      prefix: options.prefix,
+      global: options.global,
+      watch: nuxt.options.dev,
+      priority: 10
+    });
+    addComponentsDir({
+      path: resolve(runtimeDir, "components/overlays", "toast"),
+      prefix: options.prefix,
+      global: options.global,
+      watch: nuxt.options.dev,
+      priority: 10
+    });
     if (options.themeable) {
       addPlugin(resolve(runtimeDir, "plugins", "theme.client"));
       addPlugin(resolve(runtimeDir, "plugins", "theme.server"));
@@ -163,6 +177,14 @@ const module = defineNuxtModule({
     await installModule("radix-vue/nuxt", {
       prefix: options.prefix
     });
+    await installModule("@vee-validate/nuxt", {
+      componentNames: {
+        Form: `${options.prefix}Form`,
+        // Field: `${options.prefix}FormField`,
+        FieldArray: `${options.prefix}FormFieldArray`,
+        ErrorMessage: `${options.prefix}FormErrorMessage`
+      }
+    });
     addImportsDir(resolve(runtimeDir, "composables"));
   }
 });

package/dist/runtime/components/data/table/TableLoading.vue

@@ -48,7 +48,6 @@ const delegatedProps = computed(() => {
             v-bind="props._tableProgress"
             :class="cn(
               props._tableProgress?.class,
-              'bg-transparent',
             )"
           />
         </slot>

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

@@ -28,6 +28,8 @@ const mergeVariants = computed(() => {
   }
 })
 
+const loadingPlacement = computed(() => props.loadingPlacement === 'leading' && props.icon ? 'label' : props.loadingPlacement)
+
 const btnVariants = ['solid', 'outline', 'soft', 'ghost', 'link', 'text'] as const
 
 const hasVariant = computed(() =>
@@ -91,7 +93,6 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
     </slot>
 
     <ReuseTemplate v-if="loading && loadingPlacement === 'label'" />
-
     <slot v-else>
       <NIcon
         v-if="label && icon"

package/dist/runtime/components/elements/Link.vue.d.ts

@@ -30,6 +30,7 @@ declare global {
         dir: any;
     };
     const __VLS_unref: typeof import('vue').unref;
+    const __VLS_placeholder: any;
     const __VLS_nativeElements: {
         a: HTMLAnchorElement;
         abbr: HTMLElement;
@@ -231,6 +232,11 @@ declare global {
         };
     } ? NonNullable<P> : never : T extends (props: infer P, ...args: any) => any ? P : {};
     type __VLS_IsFunction<T, K> = K extends keyof T ? __VLS_IsAny<T[K]> extends false ? unknown extends T[K] ? false : true : false : false;
+    type __VLS_NormalizeComponentEvent<Props, Events, onEvent extends keyof Props, Event extends keyof Events, CamelizedEvent extends keyof Events> = (__VLS_IsFunction<Props, onEvent> extends true ? Props : __VLS_IsFunction<Events, Event> extends true ? {
+        [K in onEvent]?: Events[Event];
+    } : __VLS_IsFunction<Events, CamelizedEvent> extends true ? {
+        [K in onEvent]?: Events[CamelizedEvent];
+    } : Props) & Record<string, unknown>;
     type __VLS_UnionToIntersection<U> = (U extends unknown ? (arg: U) => unknown : never) extends ((arg: infer P) => unknown) ? P : never;
     type __VLS_OverloadUnionInner<T, U = unknown> = U & T extends (...args: infer A) => infer R ? U extends T ? never : __VLS_OverloadUnionInner<T, Pick<T, keyof T> & U & ((...args: A) => R)> | ((...args: A) => R) : never;
     type __VLS_OverloadUnion<T> = Exclude<__VLS_OverloadUnionInner<(() => never) & T>, T extends () => never ? never : () => never>;
@@ -286,7 +292,6 @@ declare global {
     function __VLS_makeOptional<T>(t: T): {
         [K in keyof T]?: T[K];
     };
-    function __VLS_nonNullable<T>(t: T): T extends null | undefined ? never : T;
     function __VLS_asFunctionalComponent<T, K = T extends new (...args: any) => any ? InstanceType<T> : unknown>(t: T, instance?: K): T extends new (...args: any) => any ? (props: (K extends {
         $props: infer Props;
     } ? Props : any) & Record<string, unknown>, ctx?: any) => __VLS_Element & {

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

@@ -63,5 +63,5 @@ const delegatedProps = computed(() => {
 </template>
 
 <style scoped>
-.increase.progress-indeterminate{animation:progress-increase 2s ease-in-out infinite}.decrease.progress-indeterminate{animation:progress-indeterminate-decrease 2s ease-in-out .9s infinite}@keyframes progress-decrease{0%{left:-90%;width:90%}to{left:110%;width:10%}}@keyframes progress-increase{0%{left:-5%;width:5%}to{left:130%;width:150%}}
+.increase.progress-indeterminate{animation:progress-indeterminate-increase 2s ease-in-out infinite}.decrease.progress-indeterminate{animation:progress-indeterminate-decrease 2s ease-in-out .5s infinite}@keyframes progress-indeterminate-decrease{0%{left:-90%;width:90%}to{left:110%;width:10%}}@keyframes progress-indeterminate-increase{0%{left:-5%;width:5%}to{left:130%;width:150%}}
 </style>

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

@@ -13,6 +13,7 @@ const props = withDefaults(defineProps<NToggleProps>(), {
 })
 
 const emits = defineEmits<ToggleEmits>()
+const slots = defineSlots<any>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -34,7 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     :toggle-on
     :as="Button"
   >
-    <template v-for="(_, name) in $slots" #[name]="slotData">
+    <template v-for="(_, name) in slots" #[name]="slotData">
       <slot :name="name" v-bind="slotData" />
     </template>
   </Toggle>

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

@@ -12,6 +12,8 @@ const props = withDefaults(defineProps<NDialogCloseProps>(), {
   label: 'i-close',
 })
 
+const slots = defineSlots<any>()
+
 const delegatedProps = reactiveOmit(props, 'class')
 </script>
 
@@ -25,7 +27,7 @@ const delegatedProps = reactiveOmit(props, 'class')
         v-bind="delegatedProps"
         :class="cn('dialog-close', props.class)"
       >
-        <template v-for="(_, name) in $slots" #[name]="slotData">
+        <template v-for="(_, name) in slots" #[name]="slotData">
           <slot :name="name" v-bind="slotData" />
         </template>
       </Button>

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

@@ -42,7 +42,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       @interact-outside="event => {
         if (preventClose) return event.preventDefault()
       }"
-      @escape-key-down="event => {
+      @escape-key-down="(event:any) => {
         if (preventClose) return event.preventDefault()
       }"
     >

package/dist/runtime/components/elements/dropdown-menu/DropdownMenuItem.vue

@@ -10,6 +10,8 @@ const props = withDefaults(defineProps<NDropdownMenuItemProps>(), {
   dropdownMenuItem: '~',
 })
 
+const slots = defineSlots<any>()
+
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
 
@@ -29,7 +31,7 @@ const forwardedProps = useForwardProps(delegatedProps)
         :dropdown-menu-item
         :class="cn(
           'dropdown-menu-item-base w-full justify-start font-normal rounded-sm px-2',
-          forwardedProps.inset && !(forwardedProps.leading || $slots.leading) && 'pl-8',
+          forwardedProps.inset && !(forwardedProps.leading || slots.leading) && 'pl-8',
           props.class,
         )"
         btn="~"
@@ -39,7 +41,7 @@ const forwardedProps = useForwardProps(delegatedProps)
           ...forwardedProps.una,
         }"
       >
-        <template v-for="(_, name) in $slots" #[name]="slotData">
+        <template v-for="(_, name) in slots" #[name]="slotData">
           <slot :name="name" v-bind="slotData" />
         </template>
 

package/dist/runtime/components/elements/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -12,6 +12,8 @@ const props = withDefaults(defineProps<NDropdownMenuSubTriggerProps>(), {
   dropdownMenuItem: '~',
 })
 
+const slots = defineSlots<any>()
+
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
 
@@ -31,7 +33,7 @@ const forwardedProps = useForwardProps(delegatedProps)
         :dropdown-menu-item
         :class="cn(
           'dropdown-menu-sub-trigger w-full justify-start font-normal rounded-sm px-2',
-          forwardedProps.inset && !(forwardedProps.leading || $slots.leading) && 'pl-8',
+          forwardedProps.inset && !(forwardedProps.leading || slots.leading) && 'pl-8',
           props.class,
         )"
         btn="~"

package/dist/runtime/components/elements/pagination/PaginationListItem.vue

@@ -11,6 +11,8 @@ const props = withDefaults(defineProps<NPaginationListItemProps>(), {
   square: true,
 })
 
+const slots = defineSlots<any>()
+
 const delegatedProps = computed(() => {
   const { value: __, class: _, ...delegated } = props
 
@@ -38,7 +40,7 @@ const forwardedProps = useForwardProps(delegatedProps)
         props.class,
       )"
     >
-      <template v-for="(_, name) in $slots" #[name]="slotData">
+      <template v-for="(_, name) in slots" #[name]="slotData">
         <slot :name="name" v-bind="slotData" />
       </template>
     </Button>

package/dist/runtime/components/forms/Form/FormControl.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { Slot } from 'radix-vue'
+import { useFormField } from '../../../composables/useFormField'
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+</script>
+
+<template>
+  <Slot
+    :id="formItemId"
+    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+    :aria-invalid="!!error"
+  >
+    <slot />
+  </Slot>
+</template>

package/dist/runtime/components/forms/Form/FormDescription.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { NFormDescriptionProps } from '../../../types'
+import { useFormField } from '../../../composables/useFormField'
+import { cn } from '../../../utils'
+
+const props = defineProps<NFormDescriptionProps>()
+
+const { formDescriptionId } = useFormField()
+</script>
+
+<template>
+  <p
+    :id="formDescriptionId"
+    :class="cn(
+      'form-description',
+      props.una?.formDescription,
+      props.class,
+    )"
+  >
+    <slot />
+  </p>
+</template>

package/dist/runtime/components/forms/Form/FormField.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import type { NFormFieldProps } from '../../../types'
+import { Field } from 'vee-validate'
+import { computed } from 'vue'
+import { cn } from '../../../utils'
+import FormFieldDefaultSlot from '../../slots/FormFieldDefault'
+import FormControl from './FormControl.vue'
+import FormDescription from './FormDescription.vue'
+import FormItem from './FormItem.vue'
+import FormLabel from './FormLabel.vue'
+import FormMessage from './FormMessage.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<NFormFieldProps>()
+
+const statusClassVariants = computed(() => {
+  const text = {
+    info: 'text-info',
+    success: 'text-success',
+    warning: 'text-warning',
+    error: 'text-error',
+    default: 'text-muted',
+  }
+
+  return text[props.status ?? 'default']
+})
+</script>
+
+<template>
+  <Field
+    v-slot="{ componentField, errorMessage }"
+    :name
+  >
+    <FormItem
+      :class="cn(
+        props.class,
+      )"
+    >
+      <slot name="top">
+        <div
+          :class="cn(
+            'form-field-top-wrapper',
+            una?.formFieldTopWrapper,
+          )"
+        >
+          <div
+            v-if="label || hint || description"
+            :class="cn(
+              'form-field-top-wrapper',
+              una?.formFieldTopWrapper,
+            )"
+          >
+            <div
+              v-if="label || hint"
+              :class="cn(
+                'form-field-top-wrapper-inner',
+                una?.formFieldTopWrapperInner,
+              )"
+            >
+              <div
+                :class="cn(
+                  'form-field-label-wrapper',
+                  una?.formFieldLabelWrapper,
+                )"
+              >
+                <slot name="label">
+                  <FormLabel
+                    :una
+                  >
+                    <span>
+                      {{ label }}
+                    </span>
+
+                    <span
+                      v-if="required"
+                      :class="cn(
+                        'form-field-label-required',
+                        una?.formFieldLabelRequired,
+                      )"
+                    />
+                  </FormLabel>
+                </slot>
+              </div>
+
+              <slot name="hint">
+                <span
+                  v-if="hint"
+                  :class="cn(
+                    'form-field-hint',
+                    una?.formFieldHint,
+                  )"
+                >
+                  {{ hint }}
+                </span>
+              </slot>
+            </div>
+
+            <slot name="description">
+              <FormDescription
+                v-if="description"
+                :una
+              >
+                {{ description }}
+              </FormDescription>
+            </slot>
+          </div>
+        </div>
+      </slot>
+
+      <FormControl>
+        <FormFieldDefaultSlot
+          :status="!errorMessage ? status : 'error'"
+          v-bind="componentField"
+        >
+          <slot />
+        </FormFieldDefaultSlot>
+      </FormControl>
+
+      <slot name="bottom">
+        <div
+          :class="cn(
+            'form-field-bottom-wrapper',
+            una?.formFieldBottomWrapper,
+          )"
+        >
+          <slot name="message">
+            <div
+              v-if="message && !errorMessage"
+              :class="cn(
+                'form-field-message-wrapper',
+                una?.formFieldMessageWrapper,
+              )"
+            >
+              <FormDescription
+                :class="cn(
+                  'form-field-message',
+                  una?.formMessage,
+                  statusClassVariants,
+                )"
+              >
+                {{ message }}
+              </FormDescription>
+            </div>
+
+            <FormMessage
+              v-else
+            />
+          </slot>
+        </div>
+      </slot>
+    </FormItem>
+  </Field>
+</template>

package/dist/runtime/components/forms/Form/FormItem.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { NFormItemProps } from '../../../types'
+import { provide } from 'vue'
+import { cn, randomId } from '../../../utils'
+import { FORM_ITEM_INJECTION_KEY } from '../../../utils/injectionKeys'
+
+const props = defineProps<NFormItemProps>()
+
+const id = randomId('form')
+provide(FORM_ITEM_INJECTION_KEY, id)
+</script>
+
+<template>
+  <div
+    :class="cn(
+      'form-item',
+      props.una?.formItem,
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/forms/Form/FormLabel.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { NFormLabelProps } from '../../../types'
+import { useFormField } from '../../../composables/useFormField'
+import { cn } from '../../../utils'
+import Label from '../../elements/Label.vue'
+
+const props = defineProps<NFormLabelProps>()
+
+const { formItemId } = useFormField()
+</script>
+
+<template>
+  <Label
+    :class="cn(
+      'form-label',
+      props.una?.formLabel,
+      props.class,
+    )"
+    :for="formItemId"
+  >
+    <slot />
+  </Label>
+</template>

package/dist/runtime/components/forms/Form/FormMessage.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import type { NFormMessageProps } from '../../../types'
+import { ErrorMessage } from 'vee-validate'
+import { toValue } from 'vue'
+import { useFormField } from '../../../composables/useFormField'
+import { cn } from '../../../utils'
+
+const props = defineProps<NFormMessageProps>()
+
+const { name, formMessageId } = useFormField()
+</script>
+
+<template>
+  <ErrorMessage
+    :id="formMessageId"
+    as="p"
+    :name="toValue(name)"
+    :class="cn(
+      'form-message',
+      props.una?.formMessage,
+      props.class,
+    )"
+  />
+</template>

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

@@ -21,7 +21,7 @@ const slots = defineSlots<{
   trailing?: any
 }>()
 
-const id = computed(() => props.id ?? randomId('input'))
+const id = props.id ?? randomId('input')
 
 const isLeading = computed(() => props.leading || slots.leading)
 const isTrailing = computed(() => props.trailing || slots.trailing || props.status || props.loading)
@@ -113,9 +113,11 @@ onMounted(() => {
 
 <template>
   <div
-    input="wrapper"
-    :size="size"
-    :class="una?.inputWrapper"
+    :size
+    :class="cn(
+      'input-wrapper',
+      una?.inputWrapper,
+    )"
   >
     <div
       v-if="isLeading"
@@ -129,27 +131,29 @@ onMounted(() => {
         <NIcon
           v-if="leading"
           :name="leading"
-          input="leading"
-          :class="una?.inputLeading"
+          :class="cn(
+            'input-leading',
+            una?.inputLeading,
+          )"
           @click="emit('leading')"
         />
       </slot>
     </div>
 
-    <Component
+    <component
       :is="props.type !== 'textarea' ? 'input' : 'textarea'"
-      :id="id"
+      :id
       ref="textarea"
       :value="modelValue"
       :type="props.type !== 'textarea' ? props.type : undefined"
-      class="input"
       :class="cn(
+        'input',
         type === 'textarea' ? 'input-textarea' : 'input-input',
         statusClassVariants.input,
         reverseClassVariants.input,
         una?.input,
       )"
-      :input="input"
+      :input
       :resize="type === 'textarea' ? resize : undefined"
       :rows="type === 'textarea' ? rows : undefined"
       :cols="type === 'textarea' ? cols : undefined"
@@ -167,22 +171,28 @@ onMounted(() => {
     >
       <NIcon
         v-if="loading"
-        input="loading"
         :name="una?.inputLoadingIcon ?? 'input-loading-icon'"
-        :class="una?.inputLoading"
+        :class="cn(
+          'input-loading',
+          una?.inputLoading,
+        )"
       />
 
       <NIcon
         v-else-if="status"
-        input="status-icon-base"
         :name="statusClassVariants.icon"
+        :class="cn(
+          'input-status-icon-base',
+        )"
       />
 
       <slot v-else name="trailing">
         <NIcon
           v-if="trailing"
-          input="trailing"
-          :class="una?.inputTrailing"
+          :class="cn(
+            'input-trailing',
+            una?.inputTrailing,
+          )"
           :name="trailing"
           @click="emit('trailing')"
         />

package/dist/runtime/components/overlays/Toaster.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { NToasterProps } from '../../types'
+import { reactivePick } from '@vueuse/core'
+import { useToast } from '../../composables/useToast'
+import Toast from './toast/Toast.vue'
+import ToastProvider from './toast/ToastProvider.vue'
+import ToastViewport from './toast/ToastViewport.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<NToasterProps>()
+const slots = defineSlots<any>()
+
+const rootProps = reactivePick(props, ['duration', 'label', 'swipeDirection', 'swipeThreshold'])
+
+const { toasts } = useToast()
+</script>
+
+<template>
+  <ToastProvider
+    v-bind="rootProps"
+  >
+    <slot>
+      <Toast
+        v-for="t in toasts"
+        :key="t.id"
+        v-bind="{ ..._toast, ...$attrs, ...t }"
+      >
+        <template v-for="(_, name) in slots" #[name]="slotData">
+          <slot :name="name" v-bind="slotData" />
+        </template>
+      </Toast>
+    </slot>
+
+    <ToastViewport v-bind="_toastViewport" />
+  </ToastProvider>
+</template>