@una-ui/nuxt 0.52.0 → 0.53.0

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

@@ -1,149 +1,133 @@
-<script setup lang="ts">
-import type { NInputProps } from '../../types'
-import { computed, onMounted, ref } from 'vue'
-import { cn, randomId } from '../../utils'
-import NIcon from '../elements/Icon.vue'
-
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { cn, randomId } from "../../utils";
+import NIcon from "../elements/Icon.vue";
 defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<NInputProps>(), {
-  size: 'md',
-  type: 'text',
-  resize: 'none',
-  rows: 0,
-})
-
-const emit = defineEmits(['leading', 'trailing', 'update:modelValue'])
-
-const slots = defineSlots<{
-  leading?: any
-  trailing?: any
-}>()
-
-const id = props.id ?? randomId('input')
-
-const isLeading = computed(() => props.leading || slots.leading)
-const isTrailing = computed(() => props.trailing || slots.trailing || props.status || props.loading)
-
-const inputVariants = ['outline', 'solid'] as const
-const hasVariant = computed(() => inputVariants.some(inputVariants => props.input?.includes(inputVariants)))
-const isBaseVariant = computed(() => props.input?.includes('~'))
-
+  inheritAttrs: false
+});
+const props = defineProps({
+  type: { type: null, required: false, default: "text" },
+  status: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  reverse: { type: Boolean, required: false },
+  modelValue: { type: [String, Number], required: false },
+  leading: { type: String, required: false },
+  trailing: { type: String, required: false },
+  input: { type: String, required: false },
+  size: { type: String, required: false, default: "md" },
+  id: { type: String, required: false },
+  autoresize: { type: [Boolean, Number], required: false },
+  resize: { type: [String, null], required: false, default: "none" },
+  rows: { type: Number, required: false, default: 0 },
+  cols: { type: Number, required: false },
+  una: { type: Object, required: false },
+  _inputWrapper: { type: Object, required: false }
+});
+const emit = defineEmits(["leading", "trailing", "update:modelValue"]);
+const slots = defineSlots();
+const id = props.id ?? randomId("input");
+const isLeading = computed(() => props.leading || slots.leading);
+const isTrailing = computed(() => props.trailing || slots.trailing || props.status || props.loading);
+const inputVariants = ["outline", "solid"];
+const hasVariant = computed(() => inputVariants.some((inputVariants2) => props.input?.includes(inputVariants2)));
+const isBaseVariant = computed(() => props.input?.includes("~"));
 const statusClassVariants = computed(() => {
   const input = {
-    info: 'input-status-info input-solid-info input-status-ring',
-    success: 'input-status-success input-solid-success input-status-ring',
-    warning: 'input-status-warning input-solid-warning input-status-ring',
-    error: 'input-status-error input-solid-error input-status-ring',
-    default: !hasVariant.value && !isBaseVariant.value ? 'input-default-variant' : '',
-  }
-
+    info: "input-status-info input-solid-info input-status-ring",
+    success: "input-status-success input-solid-success input-status-ring",
+    warning: "input-status-warning input-solid-warning input-status-ring",
+    error: "input-status-error input-solid-error input-status-ring",
+    default: !hasVariant.value && !isBaseVariant.value ? "input-default-variant" : ""
+  };
   const text = {
-    info: 'text-info',
-    success: 'text-success',
-    warning: 'text-warning',
-    error: 'text-error',
-    default: '',
-  }
-
+    info: "text-info",
+    success: "text-success",
+    warning: "text-warning",
+    error: "text-error",
+    default: ""
+  };
   const icon = {
-    info: props.una?.inputWarningIcon ?? 'input-info-icon',
-    success: props.una?.inputSuccessIcon ?? 'input-success-icon',
-    warning: props.una?.inputWarningIcon ?? 'input-warning-icon',
-    error: props.una?.inputErrorIcon ?? 'input-error-icon',
-    default: '',
-  }
-
+    info: props.una?.inputWarningIcon ?? "input-info-icon",
+    success: props.una?.inputSuccessIcon ?? "input-success-icon",
+    warning: props.una?.inputWarningIcon ?? "input-warning-icon",
+    error: props.una?.inputErrorIcon ?? "input-error-icon",
+    default: ""
+  };
   return {
-    input: input[props.status ?? 'default'],
-    text: text[props.status ?? 'default'],
-    icon: icon[props.status ?? 'default'],
-  }
-})
-
+    input: input[props.status ?? "default"],
+    text: text[props.status ?? "default"],
+    icon: icon[props.status ?? "default"]
+  };
+});
 const reverseClassVariants = computed(() => {
   const input = {
-    false: [{ 'input-leading-padding': isLeading.value }, { 'input-trailing-padding': isTrailing.value }],
-    true: [{ 'input-trailing-padding': isLeading.value }, { 'input-leading-padding': isTrailing.value }],
-  }
-
+    false: [{ "input-leading-padding": isLeading.value }, { "input-trailing-padding": isTrailing.value }],
+    true: [{ "input-trailing-padding": isLeading.value }, { "input-leading-padding": isTrailing.value }]
+  };
   return {
-    input: input[props.reverse ? 'true' : 'false'],
-    leadingWrapper: props.reverse ? 'input-trailing-wrapper' : 'input-leading-wrapper',
-    trailingWrapper: props.reverse ? 'input-leading-wrapper' : 'input-trailing-wrapper',
-  }
-})
-
-// html refs
-const inputRef = ref<HTMLTextAreaElement>()
-
-function resizeTextarea(): void {
-  if (!(props.type === 'textarea' && props.autoresize) || !inputRef.value)
-    return
-
-  inputRef.value.rows = props.rows
-
-  const styles = window.getComputedStyle(inputRef.value)
-  const paddingTop = Number.parseInt(styles.paddingTop)
-  const paddingBottom = Number.parseInt(styles.paddingBottom)
-  const padding = paddingTop + paddingBottom
-  const lineHeight = Number.parseInt(styles.lineHeight)
-  const { scrollHeight } = inputRef.value
-  const newRows = (scrollHeight - padding) / lineHeight
-
+    input: input[props.reverse ? "true" : "false"],
+    leadingWrapper: props.reverse ? "input-trailing-wrapper" : "input-leading-wrapper",
+    trailingWrapper: props.reverse ? "input-leading-wrapper" : "input-trailing-wrapper"
+  };
+});
+const inputRef = ref();
+function resizeTextarea() {
+  if (!(props.type === "textarea" && props.autoresize) || !inputRef.value)
+    return;
+  inputRef.value.rows = props.rows;
+  const styles = window.getComputedStyle(inputRef.value);
+  const paddingTop = Number.parseInt(styles.paddingTop);
+  const paddingBottom = Number.parseInt(styles.paddingBottom);
+  const padding = paddingTop + paddingBottom;
+  const lineHeight = Number.parseInt(styles.lineHeight);
+  const { scrollHeight } = inputRef.value;
+  const newRows = (scrollHeight - padding) / lineHeight;
   if (newRows > props.rows)
-    inputRef.value.rows = newRows
-
-  const maxAutoresizeRows = typeof props.autoresize === 'number' ? props.autoresize : Number.POSITIVE_INFINITY
+    inputRef.value.rows = newRows;
+  const maxAutoresizeRows = typeof props.autoresize === "number" ? props.autoresize : Number.POSITIVE_INFINITY;
   if (inputRef.value.rows > maxAutoresizeRows)
-    inputRef.value.rows = maxAutoresizeRows
+    inputRef.value.rows = maxAutoresizeRows;
 }
-
-function onInput(event: Event): void {
-  emit('update:modelValue', (event.target as HTMLInputElement).value)
-
-  resizeTextarea()
+function onInput(event) {
+  emit("update:modelValue", event.target.value);
+  resizeTextarea();
 }
-
 onMounted(() => {
-  resizeTextarea()
-})
-
+  resizeTextarea();
+});
 defineExpose({
   focus: () => inputRef.value?.focus(),
   blur: () => inputRef.value?.blur(),
   select: () => inputRef.value?.select(),
-  inputRef,
-})
+  inputRef
+});
 </script>
 
 <template>
   <div
     :size
     :class="cn(
-      'input-wrapper',
-      una?.inputWrapper,
-    )"
+  'input-wrapper',
+  una?.inputWrapper
+)"
     v-bind="_inputWrapper"
   >
     <div
       v-if="isLeading"
-      :class="[
-        una?.inputLeadingWrapper,
-        reverseClassVariants.leadingWrapper,
-        statusClassVariants.text,
-      ]"
+      :class="cn(
+  una?.inputLeadingWrapper,
+  reverseClassVariants.leadingWrapper,
+  statusClassVariants.text
+)"
     >
       <slot name="leading">
         <NIcon
           v-if="leading"
           :name="leading"
           :class="cn(
-            'input-leading',
-            una?.inputLeading,
-          )"
+  'input-leading',
+  una?.inputLeading
+)"
           @click="emit('leading')"
         />
       </slot>
@@ -154,18 +138,18 @@ defineExpose({
       :id
       ref="inputRef"
       :value="modelValue"
-      :type="props.type !== 'textarea' ? props.type : undefined"
+      :type="props.type !== 'textarea' ? props.type : void 0"
       :class="cn(
-        'input',
-        type === 'textarea' ? 'input-textarea' : 'input-input',
-        statusClassVariants.input,
-        reverseClassVariants.input,
-        una?.input,
-      )"
+  'input',
+  type === 'textarea' ? 'input-textarea' : 'input-input',
+  statusClassVariants.input,
+  reverseClassVariants.input,
+  una?.input
+)"
       :input
-      :resize="type === 'textarea' ? resize : undefined"
-      :rows="type === 'textarea' ? rows : undefined"
-      :cols="type === 'textarea' ? cols : undefined"
+      :resize="type === 'textarea' ? resize : void 0"
+      :rows="type === 'textarea' ? rows : void 0"
+      :cols="type === 'textarea' ? cols : void 0"
       v-bind="$attrs"
       @input="onInput"
     />
@@ -173,35 +157,36 @@ defineExpose({
     <div
       v-if="isTrailing"
       :class="cn(
-        una?.inputTrailingWrapper,
-        reverseClassVariants.trailingWrapper,
-        statusClassVariants.text,
-      )"
+  una?.inputTrailingWrapper,
+  reverseClassVariants.trailingWrapper,
+  statusClassVariants.text
+)"
     >
       <NIcon
         v-if="loading"
         :name="una?.inputLoadingIcon ?? 'input-loading-icon'"
         :class="cn(
-          'input-loading',
-          una?.inputLoading,
-        )"
+  'input-loading',
+  una?.inputLoading
+)"
       />
 
       <NIcon
         v-else-if="status"
         :name="statusClassVariants.icon"
         :class="cn(
-          'input-status-icon-base',
-        )"
+  'input-status-icon-base',
+  una?.inputStatusIconBase
+)"
       />
 
       <slot v-else name="trailing">
         <NIcon
           v-if="trailing"
           :class="cn(
-            'input-trailing',
-            una?.inputTrailing,
-          )"
+  'input-trailing',
+  una?.inputTrailing
+)"
           :name="trailing"
           @click="emit('trailing')"
         />

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

@@ -0,0 +1,31 @@
+import type { NInputProps } from '../../types/index.js';
+type __VLS_Slots = {
+    leading?: any;
+    trailing?: any;
+};
+declare const __VLS_component: import("vue").DefineComponent<NInputProps, {
+    focus: () => void | undefined;
+    blur: () => void | undefined;
+    select: () => void | undefined;
+    inputRef: import("vue").Ref<HTMLTextAreaElement | undefined, HTMLTextAreaElement | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    leading: (...args: any[]) => void;
+    trailing: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<NInputProps> & Readonly<{
+    onLeading?: ((...args: any[]) => any) | undefined;
+    onTrailing?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    size: string;
+    resize: string | null;
+    type: HTMLInputElement["type"] | "textarea";
+    rows: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,50 +1,63 @@
-<script setup lang="ts">
-import type { SliderRootEmits } from 'reka-ui'
-import type { NSliderProps } from '../../types'
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'
-import { computed } from 'vue'
-import { cn } from '../../utils'
-
-const props = withDefaults(defineProps<NSliderProps>(), {
-  slider: 'primary',
-})
-const emits = defineEmits<SliderRootEmits>()
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-const isVertical = computed(() => props.orientation === 'vertical')
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui";
+import { computed } from "vue";
+import { cn } from "../../utils";
+const props = defineProps({
+  slider: { type: String, required: false, default: "primary" },
+  size: { type: String, required: false },
+  una: { type: Object, required: false },
+  defaultValue: { type: Array, required: false },
+  modelValue: { type: [Array, null], required: false },
+  disabled: { type: Boolean, required: false },
+  orientation: { type: String, required: false },
+  dir: { type: String, required: false },
+  inverted: { type: Boolean, required: false },
+  min: { type: Number, required: false },
+  max: { type: Number, required: false },
+  step: { type: Number, required: false },
+  minStepsBetweenThumbs: { type: Number, required: false },
+  thumbAlignment: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  class: { type: null, required: false }
+});
+const emits = defineEmits(["update:modelValue", "valueCommit"]);
+const rootProps = reactiveOmit(props, ["class", "una", "slider", "una"]);
+const forwarded = useForwardPropsEmits(rootProps, emits);
+const isVertical = computed(() => props.orientation === "vertical");
 </script>
 
 <template>
   <SliderRoot
+    v-slot="{ modelValue }"
     :class="cn(
-      'slider-root',
-      isVertical && 'slider-root-vertical',
-      props.class,
-      props.una?.sliderRoot,
-      disabled && 'slider-disabled',
-    )"
+  'slider-root',
+  isVertical && 'slider-root-vertical',
+  props.class,
+  props.una?.sliderRoot,
+  disabled && 'slider-disabled'
+)"
     v-bind="forwarded"
     :slider="slider"
   >
     <slot name="slider-track">
       <SliderTrack
         :class="cn(
-          'slider-track',
-          isVertical && 'slider-track-vertical',
-          props.una?.sliderTrack,
-        )"
+  'slider-track',
+  isVertical && 'slider-track-vertical',
+  props.una?.sliderTrack
+)"
       >
         <slot name="slider-range">
           <SliderRange
             :class="cn(
-              'slider-range',
-              isVertical && 'slider-range-vertical',
-              props.una?.sliderRange,
-            )"
+  'slider-range',
+  isVertical && 'slider-range-vertical',
+  props.una?.sliderRange
+)"
           />
         </slot>
       </SliderTrack>
@@ -55,10 +68,10 @@ const isVertical = computed(() => props.orientation === 'vertical')
         v-for="(_, key) in modelValue"
         :key="key"
         :class="cn(
-          'slider-thumb',
-          isVertical && 'slider-thumb-vertical',
-          props.una?.sliderThumb,
-        )"
+  'slider-thumb',
+  isVertical && 'slider-thumb-vertical',
+  props.una?.sliderThumb
+)"
       />
     </slot>
   </SliderRoot>

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

@@ -0,0 +1,25 @@
+import type { NSliderProps } from '../../types/index.js';
+declare var __VLS_6: {}, __VLS_12: {}, __VLS_18: {};
+type __VLS_Slots = {} & {
+    'slider-track'?: (props: typeof __VLS_6) => any;
+} & {
+    'slider-range'?: (props: typeof __VLS_12) => any;
+} & {
+    'slider-thumb'?: (props: typeof __VLS_18) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<NSliderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (payload: number[] | undefined) => any;
+    valueCommit: (payload: number[]) => any;
+}, string, import("vue").PublicProps, Readonly<NSliderProps> & Readonly<{
+    "onUpdate:modelValue"?: ((payload: number[] | undefined) => any) | undefined;
+    onValueCommit?: ((payload: number[]) => any) | undefined;
+}>, {
+    slider: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,24 +1,33 @@
-<script setup lang="ts">
-import type { SwitchRootEmits } from 'reka-ui'
-import type { NSwitchProps } from '../../types'
-import { reactivePick } from '@vueuse/core'
+<script setup>
+import { reactivePick } from "@vueuse/core";
 import {
   SwitchRoot,
   SwitchThumb,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { cn } from '../../utils'
-import NIcon from '../elements/Icon.vue'
-
-const props = withDefaults(defineProps<NSwitchProps>(), {
-  size: 'md',
-  switchChecked: '~',
-  switchUnchecked: '~',
-})
-
-const emit = defineEmits<SwitchRootEmits>()
-
-const rootPropsEmits = useForwardPropsEmits(reactivePick(props, 'as', 'asChild', 'modelValue', 'defaultValue', 'disabled', 'id', 'name', 'required', 'value'), emit)
+  useForwardPropsEmits
+} from "reka-ui";
+import { cn } from "../../utils";
+import NIcon from "../elements/Icon.vue";
+const props = defineProps({
+  loading: { type: Boolean, required: false },
+  icon: { type: null, required: false },
+  checkedIcon: { type: null, required: false },
+  uncheckedIcon: { type: null, required: false },
+  size: { type: null, required: false, default: "md" },
+  switchChecked: { type: null, required: false, default: "~" },
+  switchUnchecked: { type: null, required: false, default: "~" },
+  una: { type: Object, required: false },
+  defaultValue: { type: Boolean, required: false },
+  modelValue: { type: [Boolean, null], required: false },
+  disabled: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  value: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const rootPropsEmits = useForwardPropsEmits(reactivePick(props, "as", "asChild", "modelValue", "defaultValue", "disabled", "id", "name", "required", "value"), emit);
 </script>
 
 <template>
@@ -26,12 +35,10 @@ const rootPropsEmits = useForwardPropsEmits(reactivePick(props, 'as', 'asChild',
     v-slot="{ modelValue }"
     v-bind="rootPropsEmits"
     :class="cn(
-      'peer switch',
-      una?.switch,
-      modelValue
-        ? una?.switchChecked
-        : una?.switchUnchecked,
-    )"
+  'peer switch',
+  una?.switch,
+  modelValue ? una?.switchChecked : una?.switchUnchecked
+)"
     :disabled="disabled || loading"
     :switch-checked
     :switch-unchecked
@@ -39,34 +46,28 @@ const rootPropsEmits = useForwardPropsEmits(reactivePick(props, 'as', 'asChild',
   >
     <SwitchThumb
       :class="cn(
-        'switch-thumb',
-        una?.switchThumb,
-        modelValue
-          ? 'switch-thumb-checked'
-          : 'switch-thumb-unchecked',
-        modelValue
-          ? una?.switchThumbChecked
-          : una?.switchThumbUnchecked,
-      )"
+  'switch-thumb',
+  una?.switchThumb,
+  modelValue ? 'switch-thumb-checked' : 'switch-thumb-unchecked',
+  modelValue ? una?.switchThumbChecked : una?.switchThumbUnchecked
+)"
     >
       <slot v-if="!loading" name="icon" :model-value>
         <NIcon
           :name="(modelValue ? checkedIcon : uncheckedIcon) || icon"
           :class="cn(
-            'switch-icon',
-            una?.switchIcon,
-            modelValue
-              ? ['switch-icon-checked', una?.switchIconChecked]
-              : ['switch-icon-unchecked', una?.switchIconUnchecked],
-          )"
+  'switch-icon',
+  una?.switchIcon,
+  modelValue ? ['switch-icon-checked', una?.switchIconChecked] : ['switch-icon-unchecked', una?.switchIconUnchecked]
+)"
         />
       </slot>
       <slot v-else name="loading-icon" :model-value>
         <NIcon
           :class="cn(
-            'switch-icon switch-loading-icon',
-            una?.switchLoading,
-          )"
+  'switch-icon switch-loading-icon',
+  una?.switchLoading
+)"
           :name="una?.switchLoadingIconName || 'switch-loading-icon-name'"
         />
       </slot>

package/dist/runtime/components/forms/Switch.vue.d.ts

@@ -0,0 +1,27 @@
+import type { NSwitchProps } from '../../types/index.js';
+declare var __VLS_10: {
+    modelValue: boolean;
+}, __VLS_15: {
+    modelValue: boolean;
+};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_10) => any;
+} & {
+    'loading-icon'?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<NSwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (payload: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<NSwitchProps> & Readonly<{
+    "onUpdate:modelValue"?: ((payload: boolean) => any) | undefined;
+}>, {
+    size: import("vue").HTMLAttributes["class"];
+    switchChecked: import("vue").HTMLAttributes["class"];
+    switchUnchecked: import("vue").HTMLAttributes["class"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,8 +1,7 @@
-<script lang="ts" setup>
-import { Slot } from 'reka-ui'
-import { useFormField } from '../../../composables/useFormField'
-
-const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+<script setup>
+import { Slot } from "reka-ui";
+import { useFormField } from "../../../composables/useFormField";
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 </script>
 
 <template>