vueless 0.0.569 → 0.0.571

package/ui.form-input-search/UInputSearch.vue

@@ -1,84 +1,4 @@
-<template>
-  <UInput
-    :id="elementId"
-    ref="inputRef"
-    :model-value="localValue"
-    :size="size"
-    :disabled="disabled"
-    :readonly="readonly"
-    :label-align="labelAlign"
-    :label="label"
-    :error="error"
-    :description="description"
-    :placeholder="placeholder"
-    inputmode="search"
-    :left-icon="leftIcon"
-    v-bind="searchInputAttrs"
-    :data-test="dataTest"
-    @update:model-value="onUpdateValue"
-    @keyup.enter="onKeyupEnter"
-  >
-    <template #left>
-      <!-- @slot Use it to add something before the text. -->
-      <slot name="left" />
-    </template>
-
-    <template #left-icon>
-      <!-- @slot Use it to add icon before the text. -->
-      <slot name="left-icon" />
-    </template>
-
-    <template #right-icon>
-      <UIcon
-        v-if="localValue"
-        internal
-        interactive
-        color="gray"
-        :name="config.defaults.clearIcon"
-        :size="iconSize"
-        v-bind="clearIconAttrs"
-        :data-test="`${dataTest}-clear`"
-        @click="onClickClear"
-      />
-
-      <!-- @slot Use it to add icon after the text. -->
-      <slot
-        name="right-icon"
-        :icon-name="config.defaults.searchIcon"
-        :icon-size="iconSize"
-        :search-button-label="searchButtonLabel"
-      >
-        <UIcon
-          v-if="!searchButtonLabel"
-          internal
-          interactive
-          :size="iconSize"
-          :name="rightIcon || config.defaults.searchIcon"
-          v-bind="searchIconAttrs"
-          :data-test="`${dataTest}-search-icon`"
-          @click="onClickSearch"
-        />
-      </slot>
-    </template>
-
-    <template #right>
-      <!-- @slot Use it to add something after the text. -->
-      <slot name="right">
-        <UButton
-          v-if="searchButtonLabel"
-          :label="searchButtonLabel"
-          :size="buttonSize"
-          no-ring
-          v-bind="searchButtonAttrs"
-          :data-test="`${dataTest}-search-button`"
-          @click="onClickSearch"
-        />
-      </slot>
-    </template>
-  </UInput>
-</template>
-
-<script setup>
+<script setup lang="ts">
 import { computed, useId, ref, watchEffect } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
@@ -87,150 +7,23 @@ import UButton from "../ui.button/UButton.vue";
 import { getDefault } from "../utils/ui.ts";
 import { createDebounce } from "../utils/helper.ts";
 
-import { UInputSearch } from "./constants.js";
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
+import { UInputSearch } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
 
-defineOptions({ inheritAttrs: false });
+import type { UInputSearchProps, IconSize, ButtonSize } from "./types.ts";
 
-const props = defineProps({
-  /**
-   * Search input value.
-   */
-  modelValue: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Input size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UInputSearch).size,
-  },
-
-  /**
-   * Input placeholder.
-   */
-  placeholder: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Label placement.
-   * @values top, topInside, topWithDesc, left, right
-   */
-  labelAlign: {
-    type: String,
-    default: getDefault(defaultConfig, UInputSearch).labelAlign,
-  },
-
-  /**
-   * Input label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Input description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Error message.
-   */
-  error: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Minimum character length for search.
-   */
-  minLength: {
-    type: [Number, String],
-    default: getDefault(defaultConfig, UInputSearch).minLength,
-  },
-
-  /**
-   * Search button label.
-   */
-  searchButtonLabel: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Time in milliseconds before value emit.
-   */
-  debounce: {
-    type: [Number, String],
-    default: getDefault(defaultConfig, UInputSearch).debounce,
-  },
-
-  /**
-   * Left icon name.
-   */
-  leftIcon: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Right icon name.
-   */
-  rightIcon: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Make input read-only.
-   */
-  readonly: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UInputSearch).readonly,
-  },
-
-  /**
-   * Make input disabled.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UInputSearch).disabled,
-  },
-
-  /**
-   * Unique element id.
-   */
-  id: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
+defineOptions({ inheritAttrs: false });
 
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
+const props = withDefaults(defineProps<UInputSearchProps>(), {
+  size: getDefault<UInputSearchProps>(defaultConfig, UInputSearch).size,
+  labelAlign: getDefault<UInputSearchProps>(defaultConfig, UInputSearch).labelAlign,
+  minLength: getDefault<UInputSearchProps>(defaultConfig, UInputSearch).minLength,
+  debounce: getDefault<UInputSearchProps>(defaultConfig, UInputSearch).debounce,
+  readonly: getDefault<UInputSearchProps>(defaultConfig, UInputSearch).readonly,
+  disabled: getDefault<UInputSearchProps>(defaultConfig, UInputSearch).disabled,
+  dataTest: "",
+  config: () => ({}),
 });
 
 const emit = defineEmits([
@@ -271,7 +64,7 @@ const iconSize = computed(() => {
     lg: "md",
   };
 
-  return sizes[props.size];
+  return sizes[props.size] as IconSize;
 });
 
 const buttonSize = computed(() => {
@@ -281,7 +74,7 @@ const buttonSize = computed(() => {
     lg: "lg",
   };
 
-  return sizes[props.size];
+  return sizes[props.size] as ButtonSize;
 });
 
 watchEffect(() => {
@@ -333,3 +126,83 @@ defineExpose({
   inputRef,
 });
 </script>
+
+<template>
+  <UInput
+    :id="elementId"
+    ref="inputRef"
+    :model-value="localValue"
+    :size="size"
+    :disabled="disabled"
+    :readonly="readonly"
+    :label-align="labelAlign"
+    :label="label"
+    :error="error"
+    :description="description"
+    :placeholder="placeholder"
+    inputmode="search"
+    :left-icon="leftIcon"
+    v-bind="searchInputAttrs"
+    :data-test="dataTest"
+    @update:model-value="onUpdateValue"
+    @keyup.enter="onKeyupEnter"
+  >
+    <template #left>
+      <!-- @slot Use it to add something before the text. -->
+      <slot name="left" />
+    </template>
+
+    <template #left-icon>
+      <!-- @slot Use it to add icon before the text. -->
+      <slot name="left-icon" />
+    </template>
+
+    <template #right-icon>
+      <UIcon
+        v-if="localValue"
+        internal
+        interactive
+        color="gray"
+        :name="config.defaults?.clearIcon"
+        :size="iconSize"
+        v-bind="clearIconAttrs"
+        :data-test="`${dataTest}-clear`"
+        @click="onClickClear"
+      />
+
+      <!-- @slot Use it to add icon after the text. -->
+      <slot
+        name="right-icon"
+        :icon-name="config.defaults?.searchIcon"
+        :icon-size="iconSize"
+        :search-button-label="searchButtonLabel"
+      >
+        <UIcon
+          v-if="!searchButtonLabel"
+          internal
+          interactive
+          :size="iconSize"
+          :name="rightIcon || config.defaults?.searchIcon"
+          v-bind="searchIconAttrs"
+          :data-test="`${dataTest}-search-icon`"
+          @click="onClickSearch"
+        />
+      </slot>
+    </template>
+
+    <template #right>
+      <!-- @slot Use it to add something after the text. -->
+      <slot name="right">
+        <UButton
+          v-if="searchButtonLabel"
+          :label="searchButtonLabel"
+          :size="buttonSize"
+          no-ring
+          v-bind="searchButtonAttrs"
+          :data-test="`${dataTest}-search-button`"
+          @click="onClickSearch"
+        />
+      </slot>
+    </template>
+  </UInput>
+</template>

package/ui.form-input-search/storybook/Docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../../utils/storybook.ts";
 
-import * as stories from "./stories.js";
-import defaultConfig from "../config.js?raw"
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.form-input-search/storybook/{stories.js → stories.ts}

@@ -10,6 +10,14 @@ import UButton from "../../ui.button/UButton.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UInputSearchProps } from "../types.ts";
+
+interface UInputSearchArgs extends UInputSearchProps {
+  slotTemplate?: string;
+  enum: "size";
+}
+
 export default {
   id: "3040",
   title: "Form Inputs & Controls / Input Search",
@@ -20,9 +28,9 @@ export default {
   parameters: {
     ...getDocsDescription(UInputSearch.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UInputSearchArgs> = (args: UInputSearchArgs) => ({
   components: { UInputSearch, UButton, UIcon },
   setup() {
     const slots = getSlotNames(UInputSearch.__name);
@@ -31,17 +39,17 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UInputSearch v-bind="args" v-model="args.modelValue">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UInputSearch>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UInputSearchArgs> = (args: UInputSearchArgs, { argTypes }) => ({
   components: { UInputSearch, URow },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `

package/ui.form-input-search/types.ts

@@ -0,0 +1,93 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export type IconSize = "xs" | "sm" | "md";
+export type ButtonSize = "xs" | "md" | "lg";
+
+export interface UInputSearchProps {
+  /**
+   * Search input value.
+   */
+  modelValue?: string;
+
+  /**
+   * Input size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Input placeholder.
+   */
+  placeholder?: string;
+
+  /**
+   * Label placement.
+   */
+  labelAlign?: "top" | "topInside" | "topWithDesc" | "left" | "right";
+
+  /**
+   * Input label.
+   */
+  label?: string;
+
+  /**
+   * Input description.
+   */
+  description?: string;
+
+  /**
+   * Error message.
+   */
+  error?: string;
+
+  /**
+   * Minimum character length for search.
+   */
+  minLength?: number | string;
+
+  /**
+   * Search button label.
+   */
+  searchButtonLabel?: string;
+
+  /**
+   * Time in milliseconds before value emit.
+   */
+  debounce?: number | string;
+
+  /**
+   * Left icon name.
+   */
+  leftIcon?: string;
+
+  /**
+   * Right icon name.
+   */
+  rightIcon?: string;
+
+  /**
+   * Make input read-only.
+   */
+  readonly?: boolean;
+
+  /**
+   * Make input disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: Config;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.form-input-search/useAttrs.ts

@@ -0,0 +1,15 @@
+import useUI from "../composables/useUI.ts";
+
+import defaultConfig from "./config.ts";
+
+import type { UseAttrs } from "../types.ts";
+import type { UInputSearchProps, Config } from "./types.ts";
+
+export default function useAttrs(props: UInputSearchProps): UseAttrs<Config> {
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
+
+  return {
+    config,
+    ...getKeysAttrs(),
+  };
+}

package/ui.form-radio/URadio.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, inject, onMounted, ref, watchEffect, toValue, useId } from "vue";
 
 import ULabel from "../ui.form-label/ULabel.vue";

package/ui.form-radio-group/URadioGroup.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, provide } from "vue";
 
 import ULabel from "../ui.form-label/ULabel.vue";

package/ui.navigation-pagination/UPagination.vue

@@ -10,7 +10,7 @@ import defaultConfig from "./config.ts";
 import { UPagination } from "./constants.ts";
 import useAttrs from "./useAttrs.ts";
 
-import type { UPaginationProps } from "./types.ts";
+import type { UPaginationProps, ButtonSize, IconSize } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -24,6 +24,7 @@ const props = withDefaults(defineProps<UPaginationProps>(), {
   showFirst: getDefault<UPaginationProps>(defaultConfig, UPagination).showFirst,
   showLast: getDefault<UPaginationProps>(defaultConfig, UPagination).showLast,
   dataTest: "",
+  config: () => ({}),
 });
 
 const emit = defineEmits([
@@ -70,7 +71,7 @@ const buttonSize = computed(() => {
     lg: "md",
   };
 
-  return sizes[props.size];
+  return sizes[props.size] as ButtonSize;
 });
 
 const iconSize = computed(() => {
@@ -80,11 +81,11 @@ const iconSize = computed(() => {
     lg: "md",
   };
 
-  return sizes[props.size];
+  return sizes[props.size] as IconSize;
 });
 
 const totalPages = computed(() => {
-  return props.perPage > 0 ? Math.ceil(props.total / props.perPage) : 0;
+  return props.perPage > 0 && props.total ? Math.ceil(props.total / props.perPage) : 0;
 });
 
 const pageButtons = computed(() => {
@@ -108,11 +109,11 @@ const pageButtons = computed(() => {
 });
 
 const prevIsDisabled = computed(() => {
-  return props.disabled || currentPage.value === null || currentPage.value <= 1;
+  return props.disabled || !currentPage.value || currentPage.value <= 1;
 });
 
 const nextIsDisabled = computed(() => {
-  return props.disabled || currentPage.value === null || currentPage.value >= totalPages.value;
+  return props.disabled || !currentPage.value || currentPage.value >= totalPages.value;
 });
 
 function selectPage(page: number) {
@@ -120,14 +121,13 @@ function selectPage(page: number) {
 }
 
 function goToPrevPage() {
-  currentPage.value = currentPage.value === null ? 1 : Math.max(currentPage.value - 1, 1);
+  currentPage.value = !currentPage.value ? 1 : Math.max(currentPage.value - 1, 1);
 }
 
 function goToNextPage() {
-  currentPage.value =
-    currentPage.value === null
-      ? totalPages.value
-      : Math.min(currentPage.value + 1, totalPages.value);
+  currentPage.value = !currentPage.value
+    ? totalPages.value
+    : Math.min(currentPage.value + 1, totalPages.value);
 }
 
 function goToFirstPage() {
@@ -159,7 +159,7 @@ function goToLastPage() {
           v-if="!firstLabel"
           internal
           :size="iconSize"
-          :name="config.defaults.firstIcon"
+          :name="config.defaults?.firstIcon"
           v-bind="firstIconAttrs"
         />
       </slot>
@@ -182,7 +182,7 @@ function goToLastPage() {
           v-if="!prevLabel"
           internal
           :size="iconSize"
-          :name="config.defaults.prevIcon"
+          :name="config.defaults?.prevIcon"
           v-bind="prevIconAttrs"
         />
       </slot>
@@ -244,7 +244,7 @@ function goToLastPage() {
           v-if="!nextLabel"
           internal
           :size="iconSize"
-          :name="config.defaults.nextIcon"
+          :name="config.defaults?.nextIcon"
           v-bind="nextIconAttrs"
         />
       </slot>
@@ -268,7 +268,7 @@ function goToLastPage() {
           v-if="!lastLabel"
           internal
           :size="iconSize"
-          :name="config.defaults.lastIcon"
+          :name="config.defaults?.lastIcon"
           v-bind="lastIconAttrs"
         />
       </slot>

package/ui.navigation-pagination/types.ts

@@ -2,6 +2,9 @@ import defaultConfig from "./config.ts";
 
 export type Config = Partial<typeof defaultConfig>;
 
+export type ButtonSize = "xs" | "sm" | "md";
+export type IconSize = "xs" | "sm" | "md";
+
 export interface UPaginationProps {
   /**
    * Current page number.

package/ui.navigation-progress/UProgress.vue

@@ -10,7 +10,7 @@ import { UProgress, VARIANT } from "./constants.ts";
 import StepperProgress from "./StepperProgress.vue";
 import UHeader from "../ui.text-header/UHeader.vue";
 
-import type { UProgressProps } from "./types.ts";
+import type { UProgressProps, HeaderSize } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -26,6 +26,20 @@ const props = withDefaults(defineProps<UProgressProps>(), {
 
 const { progressAttrs, wrapperAttrs, indicatorAttrs, stepAttrs, stepperAttrs } = useAttrs(props);
 
+const headerSize = computed(() => {
+  const sizes = {
+    "2xs": "xs",
+    xs: "xs",
+    sm: "sm",
+    md: "sm",
+    lg: "lg",
+    xl: "xl",
+    "2xl": "2xl",
+  };
+
+  return sizes[props.size] as HeaderSize;
+});
+
 const isSteps = computed(() => Array.isArray(props.max));
 
 const realMax = computed(() => {
@@ -91,7 +105,7 @@ function isActiveStep(index: number) {
           :value="value"
           :max="max"
         >
-          <UHeader v-if="isVariant.stepper" :label="String(step)" :size="size" />
+          <UHeader v-if="isVariant.stepper" :label="String(step)" :size="headerSize" />
           <template v-else>{{ step }}</template>
         </slot>
       </template>

package/ui.navigation-progress/types.ts

@@ -2,6 +2,8 @@ import defaultConfig from "./config.ts";
 
 export type Config = Partial<typeof defaultConfig>;
 
+export type HeaderSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+
 export interface UProgressProps {
   /**
    * Progress value (current step).