vueless 0.0.569 → 0.0.571

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

@@ -8,6 +8,14 @@ import {
 import UInputFile from "../../ui.form-input-file/UInputFile.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UInputFileProps } from "../types.ts";
+
+interface UInputFileArgs extends UInputFileProps {
+  slotTemplate?: string;
+  enum: "labelAlign" | "size";
+}
+
 export default {
   id: "30232",
   title: "Form Inputs & Controls / Input File",
@@ -21,9 +29,9 @@ export default {
   parameters: {
     ...getDocsDescription(UInputFile.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UInputFileArgs> = (args: UInputFileArgs) => ({
   components: { UInputFile },
   setup() {
     const slots = getSlotNames(UInputFile.__name);
@@ -42,17 +50,17 @@ const DefaultTemplate = (args) => ({
       v-model="files"
       v-model:error="error"
     >
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UInputFile>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UInputFileArgs> = (args: UInputFileArgs, { argTypes }) => ({
   components: { UInputFile, UCol },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `

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

@@ -0,0 +1,72 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export type ButtonSize = "xs" | "sm" | "md";
+
+export interface UInputFileProps {
+  /**
+   * Input value.
+   */
+  modelValue?: File | File[];
+
+  /**
+   * Input label.
+   */
+  label?: string;
+
+  /**
+   * Input description.
+   */
+  description?: string;
+
+  /**
+   * Error message.
+   */
+  error?: string;
+
+  /**
+   * Label placement.
+   */
+  labelAlign?: "top" | "topInside" | "topWithDesc";
+
+  /**
+   * Input size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Max file size in megabytes.
+   */
+  maxFileSize?: number;
+
+  /**
+   * Allowed file types.
+   */
+  allowedFileTypes?: string[];
+
+  /**
+   * Allow selecting multiple files.
+   */
+  multiple?: boolean;
+
+  /**
+   * Disable the input.
+   */
+  disabled?: boolean;
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: Config;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

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

@@ -0,0 +1,21 @@
+import { computed } from "vue";
+import useUI from "../composables/useUI.ts";
+
+import defaultConfig from "./config.ts";
+
+import type { UseAttrs } from "../types.ts";
+import type { UInputFileProps, Config } from "./types.ts";
+
+export default function useAttrs(props: UInputFileProps): UseAttrs<Config> {
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
+
+  const mutatedProps = computed(() => ({
+    error: Boolean(props.error),
+    label: Boolean(props.label),
+  }));
+
+  return {
+    config,
+    ...getKeysAttrs(mutatedProps),
+  };
+}

package/ui.form-input-file/{utilFileForm.js → utilFileForm.ts}

@@ -1,5 +1,5 @@
 const bytesInMegabyte = 1024 * 1024;
 
-export function getFileMbSize(file) {
+export function getFileMbSize(file: File) {
   return (file.size / bytesInMegabyte).toFixed(2);
 }

package/ui.form-input-money/UInputMoney.vue

@@ -1,234 +1,38 @@
-<template>
-  <UInput
-    :id="elementId"
-    ref="moneyInputRef"
-    v-model="formattedValue"
-    :size="size"
-    :label="localLabel"
-    :label-align="labelAlign"
-    :placeholder="placeholder"
-    :description="description"
-    :error="error"
-    :disabled="disabled"
-    inputmode="decimal"
-    :left-icon="leftIcon"
-    :right-icon="rightIcon"
-    v-bind="moneyInputAttrs"
-    :data-test="`${dataTest}-base-currency`"
-    @keyup="onKeyup"
-    @blur="onBlur"
-    @input="onInput"
-  >
-    <template #left>
-      <!-- @slot Use it to add something left. -->
-      <slot name="left" />
-    </template>
-
-    <template #left-icon>
-      <!-- @slot Use it to add icon before the text. -->
-      <slot name="left-icon" />
-    </template>
-
-    <template #right-icon>
-      <!-- @slot Use it to add icon after the text. -->
-      <slot name="right-icon" />
-    </template>
-
-    <template #right>
-      <!-- @slot Use it to add something right. -->
-      <slot name="right" />
-    </template>
-  </UInput>
-</template>
-
-<script setup>
+<script setup lang="ts">
 import { computed, ref, watch, onMounted, nextTick, useId } from "vue";
 
 import { getDefault } from "../utils/ui.ts";
 
 import UInput from "../ui.form-input/UInput.vue";
 
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
-import useFormatCurrency from "./useFormatCurrency.js";
-import { UInputMoney } from "./constants.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Input value.
-   */
-  modelValue: {
-    type: [String, Number],
-    default: "",
-  },
-  /**
-   * Input label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Label placement.
-   * @values top, topInside, topWithDesc, left, right
-   */
-  labelAlign: {
-    type: String,
-    default: getDefault(defaultConfig, UInputMoney).labelAlign,
-  },
-
-  /**
-   * Currency symbol.
-   */
-  symbol: {
-    type: String,
-    default: getDefault(defaultConfig, UInputMoney).symbol,
-  },
-
-  /**
-   * Input placeholder.
-   */
-  placeholder: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Input description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Error message.
-   */
-  error: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Input size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UInputMoney).size,
-  },
-
-  /**
-   * Left icon name.
-   */
-  leftIcon: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Right icon name.
-   */
-  rightIcon: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Minimal number of signs after the decimal separator (fractional part of a number).
-   */
-  minFractionDigits: {
-    type: Number,
-    default: getDefault(defaultConfig, UInputMoney).minFractionDigits,
-  },
-
-  /**
-   * Maximal number of signs after the decimal separator (fractional part of a number).
-   */
-  maxFractionDigits: {
-    type: Number,
-    default: getDefault(defaultConfig, UInputMoney).maxFractionDigits,
-  },
-
-  /**
-   * A symbol used to separate the integer part from the fractional part of a number.
-   */
-  decimalSeparator: {
-    type: String,
-    default: getDefault(defaultConfig, UInputMoney).decimalSeparator,
-  },
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
+import useFormatCurrency from "./useFormatCurrency.ts";
+import { UInputMoney } from "./constants.ts";
 
-  /**
-   *  A symbol used to separate the thousand parts of a number.
-   */
-  thousandsSeparator: {
-    type: String,
-    default: getDefault(defaultConfig, UInputMoney).thousandsSeparator,
-  },
-
-  /**
-   * Allow only positive values.
-   */
-  positiveOnly: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UInputMoney).positiveOnly,
-  },
-
-  /**
-   * Prefix to display before input value.
-   */
-  prefix: {
-    type: String,
-    default: getDefault(defaultConfig, UInputMoney).prefix,
-  },
+import type { UInputMoneyProps } from "./types.ts";
 
-  /**
-   * Set input read-only.
-   */
-  readonly: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UInputMoney).readonly,
-  },
-
-  /**
-   * Disable the input.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UInputMoney).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<UInputMoneyProps>(), {
+  labelAlign: getDefault<UInputMoneyProps>(defaultConfig, UInputMoney).labelAlign,
+  symbol: getDefault<UInputMoneyProps>(defaultConfig, UInputMoney).symbol,
+  size: getDefault<UInputMoneyProps>(defaultConfig, UInputMoney).size,
+  minFractionDigits: getDefault<UInputMoneyProps>(defaultConfig, UInputMoney).minFractionDigits,
+  maxFractionDigits: getDefault<UInputMoneyProps>(defaultConfig, UInputMoney).maxFractionDigits,
+  decimalSeparator: getDefault<UInputMoneyProps>(defaultConfig, UInputMoney).decimalSeparator,
+  thousandsSeparator: getDefault<UInputMoneyProps>(defaultConfig, UInputMoney).thousandsSeparator,
+  positiveOnly: getDefault<UInputMoneyProps>(defaultConfig, UInputMoney).positiveOnly,
+  prefix: getDefault<UInputMoneyProps>(defaultConfig, UInputMoney).prefix,
+  readonly: getDefault<UInputMoneyProps>(defaultConfig, UInputMoney).readonly,
+  disabled: getDefault<UInputMoneyProps>(defaultConfig, UInputMoney).disabled,
+  modelValue: "",
+  dataTest: "",
 });
 
 const emit = defineEmits(["update:modelValue", "keyup", "blur", "input"]);
 
-const moneyInputRef = ref(null);
+const moneyInputRef = ref<{ inputRef: HTMLInputElement } | null>(null);
 
 const elementId = props.id || useId();
 
@@ -256,19 +60,25 @@ const localLabel = computed(() => {
 });
 
 const input = computed(() => {
-  return moneyInputRef.value.inputRef;
+  return moneyInputRef.value?.inputRef || null;
 });
 
 watch(
   () => props.modelValue,
-  () => String(localValue.value) !== String(rawValue.value) && setValue(localValue.value),
+  () => {
+    if (String(localValue.value) !== String(rawValue.value)) {
+      setValue(localValue.value);
+    }
+  },
 );
 
 onMounted(() => {
-  setValue(localValue.value);
+  if (localValue.value) {
+    setValue(localValue.value);
+  }
 });
 
-function onKeyup(event) {
+function onKeyup(event: KeyboardEvent) {
   localValue.value = rawValue.value || "";
 
   nextTick(() => emit("keyup", event));
@@ -278,7 +88,7 @@ function onBlur() {
   nextTick(() => emit("blur"));
 }
 
-function onInput(value) {
+function onInput(value: InputEvent) {
   nextTick(() => emit("input", value));
 }
 
@@ -302,3 +112,46 @@ defineExpose({
   formattedValue,
 });
 </script>
+
+<template>
+  <UInput
+    :id="elementId"
+    ref="moneyInputRef"
+    v-model="formattedValue"
+    :size="size"
+    :label="localLabel"
+    :label-align="labelAlign"
+    :placeholder="placeholder"
+    :description="description"
+    :error="error"
+    :disabled="disabled"
+    inputmode="decimal"
+    :left-icon="leftIcon"
+    :right-icon="rightIcon"
+    v-bind="moneyInputAttrs"
+    :data-test="`${dataTest}-base-currency`"
+    @keyup="onKeyup"
+    @blur="onBlur"
+    @input="onInput"
+  >
+    <template #left>
+      <!-- @slot Use it to add something left. -->
+      <slot name="left" />
+    </template>
+
+    <template #left-icon>
+      <!-- @slot Use it to add icon before the text. -->
+      <slot name="left-icon" />
+    </template>
+
+    <template #right-icon>
+      <!-- @slot Use it to add icon after the text. -->
+      <slot name="right-icon" />
+    </template>
+
+    <template #right>
+      <!-- @slot Use it to add something right. -->
+      <slot name="right" />
+    </template>
+  </UInput>
+</template>

package/ui.form-input-money/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-money/storybook/{stories.js → stories.ts}

@@ -10,6 +10,14 @@ import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UButton from "../../ui.button/UButton.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UInputMoneyProps } from "../types.ts";
+
+interface UInputMoneyArgs extends UInputMoneyProps {
+  slotTemplate?: string;
+  enum: "labelAlign" | "size";
+}
+
 export default {
   id: "3030",
   title: "Form Inputs & Controls / Input Money",
@@ -24,9 +32,9 @@ export default {
   parameters: {
     ...getDocsDescription(UInputMoney.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UInputMoneyArgs> = (args: UInputMoneyArgs) => ({
   components: { UInputMoney, UIcon, UButton },
   setup() {
     const slots = getSlotNames(UInputMoney.__name);
@@ -38,17 +46,17 @@ const DefaultTemplate = (args) => ({
       v-bind="args"
       v-model="args.modelValue"
     >
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UInputMoney>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UInputMoneyArgs> = (args: UInputMoneyArgs, { argTypes }) => ({
   components: { UInputMoney, UCol },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   template: `
@@ -104,7 +112,7 @@ export const Prefix = DefaultTemplate.bind({});
 Prefix.args = { prefix: "+" };
 
 export const ReadOnly = DefaultTemplate.bind({});
-ReadOnly.args = { readOnly: true };
+ReadOnly.args = { readonly: true };
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };

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

@@ -0,0 +1,118 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface FormatOptions {
+  minFractionDigits: number;
+  maxFractionDigits: number;
+  decimalSeparator: string;
+  thousandsSeparator: string;
+  positiveOnly: boolean;
+  prefix: string;
+}
+
+export interface UInputMoneyProps {
+  /**
+   * Input value.
+   */
+  modelValue?: string | number;
+  /**
+   * Input label.
+   */
+  label?: string;
+
+  /**
+   * Label placement.
+   */
+  labelAlign?: "top" | "topInside" | "topWithDesc" | "left" | "right";
+
+  /**
+   * Currency symbol.
+   */
+  symbol?: string;
+
+  /**
+   * Input placeholder.
+   */
+  placeholder?: string;
+
+  /**
+   * Input description.
+   */
+  description?: string;
+
+  /**
+   * Error message.
+   */
+  error?: string;
+
+  /**
+   * Input size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Left icon name.
+   */
+  leftIcon?: string;
+
+  /**
+   * Right icon name.
+   */
+  rightIcon?: string;
+
+  /**
+   * Minimal number of signs after the decimal separator (fractional part of a number).
+   */
+  minFractionDigits?: number;
+
+  /**
+   * Maximal number of signs after the decimal separator (fractional part of a number).
+   */
+  maxFractionDigits?: number;
+
+  /**
+   * A symbol used to separate the integer part from the fractional part of a number.
+   */
+  decimalSeparator?: string;
+
+  /**
+   *  A symbol used to separate the thousand parts of a number.
+   */
+  thousandsSeparator?: string;
+
+  /**
+   * Allow only positive values.
+   */
+  positiveOnly?: boolean;
+
+  /**
+   * Prefix to display before input value.
+   */
+  prefix?: string;
+
+  /**
+   * Set input read-only.
+   */
+  readonly?: boolean;
+
+  /**
+   * Disable the input.
+   */
+  disabled?: boolean;
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: Config;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.form-input-money/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 { UInputMoneyProps, Config } from "./types.ts";
+
+export default function useAttrs(props: UInputMoneyProps): UseAttrs<Config> {
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
+
+  return {
+    config,
+    ...getKeysAttrs(),
+  };
+}