@una-ui/nuxt 0.53.0 → 0.54.0

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

@@ -1,133 +1,149 @@
-<script setup>
-import { computed, onMounted, ref } from "vue";
-import { cn, randomId } from "../../utils";
-import NIcon from "../elements/Icon.vue";
+<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'
+
 defineOptions({
-  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("~"));
+  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('~'))
+
 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"
-  };
-});
-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;
+    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
+
   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) {
-  emit("update:modelValue", event.target.value);
-  resizeTextarea();
+
+function onInput(event: Event): void {
+  emit('update:modelValue', (event.target as HTMLInputElement).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="cn(
-  una?.inputLeadingWrapper,
-  reverseClassVariants.leadingWrapper,
-  statusClassVariants.text
-)"
+        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>
@@ -138,18 +154,18 @@ defineExpose({
       :id
       ref="inputRef"
       :value="modelValue"
-      :type="props.type !== 'textarea' ? props.type : void 0"
+      :type="props.type !== 'textarea' ? props.type : undefined"
       :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 : void 0"
-      :rows="type === 'textarea' ? rows : void 0"
-      :cols="type === 'textarea' ? cols : void 0"
+      :resize="type === 'textarea' ? resize : undefined"
+      :rows="type === 'textarea' ? rows : undefined"
+      :cols="type === 'textarea' ? cols : undefined"
       v-bind="$attrs"
       @input="onInput"
     />
@@ -157,36 +173,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',
-  una?.inputStatusIconBase
-)"
+          '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/Slider.vue

@@ -1,63 +1,48 @@
-<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 setup lang="ts">
+import type { SliderRootEmits } from 'reka-ui'
+import type { NSliderProps } from '../../types'
+import { reactiveOmit } from '@vueuse/core'
+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 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>
@@ -68,10 +53,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/Switch.vue

@@ -1,33 +1,24 @@
-<script setup>
-import { reactivePick } from "@vueuse/core";
+<script setup lang="ts">
+import type { SwitchRootEmits } from 'reka-ui'
+import type { NSwitchProps } from '../../types'
+import { reactivePick } from '@vueuse/core'
 import {
   SwitchRoot,
   SwitchThumb,
-  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);
+  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)
 </script>
 
 <template>
@@ -35,10 +26,12 @@ 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
@@ -46,28 +39,34 @@ 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/form/FormControl.vue

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

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

@@ -1,21 +1,21 @@
-<script setup>
-import { useFormField } from "../../../composables/useFormField";
-import { cn } from "../../../utils";
-const props = defineProps({
-  class: { type: null, required: false },
-  una: { type: Object, required: false }
-});
-const { formDescriptionId } = useFormField();
+<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
-)"
+      'form-description',
+      props.una?.formDescription,
+      props.class,
+    )"
   >
     <slot />
   </p>