vueless 0.0.569 → 0.0.571

package/ui.form-input-money/{useFormatCurrency.js → useFormatCurrency.ts}

@@ -1,10 +1,12 @@
 import { onMounted, nextTick, ref, onBeforeUnmount, toValue, watch } from "vue";
 
-import FormatService from "./utilFormat.js";
+import { getRawValue, getFormattedValue } from "./utilFormat.ts";
 
-export default function useFormatCurrency(elementId, options) {
+import type { FormatOptions } from "./types.ts";
+
+export default function useFormatCurrency(elementId: string = "", options: () => FormatOptions) {
   let prevValue = "";
-  let inputElement = null;
+  let inputElement: HTMLInputElement | null = null;
 
   const formattedValue = ref("");
   const rawValue = ref("");
@@ -17,41 +19,48 @@ export default function useFormatCurrency(elementId, options) {
   );
 
   onMounted(() => {
-    inputElement = document.getElementById(elementId);
-    inputElement.addEventListener("input", onInput);
+    inputElement = document.getElementById(elementId) as HTMLInputElement;
 
-    onInput(formattedValue.value);
+    if (inputElement) {
+      inputElement.addEventListener("input", onInput);
+      onInput(formattedValue.value as unknown as InputEvent);
+    }
   });
 
   onBeforeUnmount(() => {
-    inputElement.removeEventListener("input", onInput);
+    if (inputElement) {
+      inputElement.removeEventListener("input", onInput);
+    }
   });
 
   // Use to set input value manually
-  function setValue(value) {
-    const localFormattedValue = FormatService.getFormattedValue(value, toValue(options));
+  function setValue(value: string | number) {
+    const localFormattedValue = getFormattedValue(value, toValue(options));
 
     formattedValue.value = localFormattedValue;
-    rawValue.value = FormatService.getRawValue(localFormattedValue, toValue(options));
+    rawValue.value = getRawValue(localFormattedValue, toValue(options));
 
     prevValue = formattedValue.value;
   }
 
-  async function onInput(event) {
+  async function onInput(event: Event) {
     if (!event.target) return;
 
     await nextTick(async () => {
+      if (!inputElement) return;
+
       let cursorStart = inputElement.selectionStart;
       let cursorEnd = inputElement.selectionEnd;
 
       const hasValueInputValue = cursorEnd === 1 && cursorStart === 1;
-      const value = event.target ? event.target.value : "";
+      const input = event.target as HTMLInputElement;
+      const value = input.value || "";
 
-      const localFormattedValue = FormatService.getFormattedValue(value, toValue(options));
+      const localFormattedValue = getFormattedValue(value, toValue(options));
 
       const currentValueOffsetLength = localFormattedValue
         .split("")
-        .filter((value) => value === toValue(options).thousandsSeparator).length;
+        .filter((value: string) => value === toValue(options).thousandsSeparator).length;
 
       const prevValueOffsetLength = prevValue
         .split("")
@@ -61,17 +70,19 @@ export default function useFormatCurrency(elementId, options) {
       const offset = currentValueOffsetLength - prevValueOffsetLength;
 
       formattedValue.value = localFormattedValue || toValue(options).prefix;
-      rawValue.value = FormatService.getRawValue(localFormattedValue, toValue(options));
+      rawValue.value = getRawValue(localFormattedValue, toValue(options));
 
       await nextTick(() => {
-        if (localFormattedValue.length === cursorEnd) return;
+        if (localFormattedValue.length === cursorEnd || !cursorStart || !cursorEnd) return;
 
         if (hasValueInputValue && prefixLength) {
           cursorStart += prefixLength;
           cursorEnd += prefixLength;
         }
 
-        inputElement.setSelectionRange(cursorStart + offset, cursorEnd + offset);
+        if (inputElement) {
+          inputElement.setSelectionRange(cursorStart + offset, cursorEnd + offset);
+        }
       });
 
       prevValue = formattedValue.value;

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

@@ -0,0 +1,83 @@
+import type { FormatOptions } from "./types.ts";
+
+const isNumberValueRegExp = /^[\d,.\s-]+$/;
+const rawDecimalMark = ".";
+const comma = ",";
+
+export function getRawValue(value: string | number, options: FormatOptions): string {
+  const { thousandsSeparator, decimalSeparator, prefix } = options;
+
+  value = String(value).endsWith(decimalSeparator)
+    ? String(value).replace(decimalSeparator, "")
+    : String(value);
+
+  const rawValueWithPrefix = value
+    .replaceAll(thousandsSeparator, "")
+    .replace(decimalSeparator, ".");
+
+  return rawValueWithPrefix.replace(prefix, "");
+}
+
+export function getFormattedValue(value: string | number, options: FormatOptions): string {
+  const {
+    thousandsSeparator,
+    decimalSeparator,
+    minFractionDigits,
+    maxFractionDigits,
+    prefix,
+    positiveOnly,
+  } = options;
+
+  const invalidValuesRegExp = new RegExp("[^\\d,\\d.\\s-" + decimalSeparator + "]", "g");
+  const doubleValueRegExp = new RegExp("([,\\.\\s-" + decimalSeparator + "])+", "g");
+
+  // slice to first decimal mark
+  value = String(value)
+    .replaceAll(comma, decimalSeparator)
+    .split(decimalSeparator)
+    .slice(0, 2)
+    .map((value: string, index: number) =>
+      index ? value.replaceAll(thousandsSeparator, "") : value,
+    )
+    .join(decimalSeparator);
+
+  value = String(value)
+    .replace(invalidValuesRegExp, "")
+    .replace(doubleValueRegExp, "$1")
+    .replaceAll(decimalSeparator, rawDecimalMark);
+
+  const isNumber = isNumberValueRegExp.test(value);
+  const isFloat = value.endsWith(rawDecimalMark) || value.endsWith(".0");
+
+  if (!value || !isNumber || isFloat) {
+    return `${prefix}${value.replaceAll(rawDecimalMark, decimalSeparator)}`;
+  }
+
+  const intlNumberOptions: Intl.NumberFormatOptions = {
+    minimumFractionDigits:
+      minFractionDigits <= maxFractionDigits ? minFractionDigits : maxFractionDigits,
+    maximumFractionDigits: maxFractionDigits,
+  };
+
+  if (positiveOnly) {
+    intlNumberOptions.signDisplay = "never";
+  }
+
+  const intlNumber = new Intl.NumberFormat("en-US", intlNumberOptions);
+
+  const rawValue = getRawValue(value, {
+    decimalSeparator,
+    thousandsSeparator,
+    prefix,
+    minFractionDigits: 0,
+    maxFractionDigits: 2,
+    positiveOnly: false,
+  });
+
+  const formattedValue = intlNumber
+    .format(parseFloat(rawValue))
+    .replaceAll(comma, thousandsSeparator)
+    .replaceAll(rawDecimalMark, decimalSeparator);
+
+  return prefix + formattedValue;
+}

package/ui.form-input-number/UInputNumber.vue

@@ -1,3 +1,70 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import UIcon from "../ui.image-icon/UIcon.vue";
+import UButton from "../ui.button/UButton.vue";
+import ULabel from "../ui.form-label/ULabel.vue";
+import { getDefault } from "../utils/ui.ts";
+
+import defaultConfig from "./config.ts";
+import { UInputNumber } from "./constants.ts";
+import useAttrs from "./useAttrs.ts";
+
+import type { UInputNumberProps } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<UInputNumberProps>(), {
+  step: getDefault<UInputNumberProps>(defaultConfig, UInputNumber).step,
+  min: getDefault<UInputNumberProps>(defaultConfig, UInputNumber).min,
+  max: getDefault<UInputNumberProps>(defaultConfig, UInputNumber).max,
+  labelAlign: getDefault<UInputNumberProps>(defaultConfig, UInputNumber).labelAlign,
+  size: getDefault<UInputNumberProps>(defaultConfig, UInputNumber).size,
+  disabled: getDefault<UInputNumberProps>(defaultConfig, UInputNumber).disabled,
+  dataTest: "",
+  config: () => ({}),
+});
+
+const emit = defineEmits([
+  /**
+   * Triggers when the input value changes.
+   * @property {number} modelValue
+   */
+  "update:modelValue",
+]);
+
+const {
+  config,
+  valueAttrs,
+  labelAttrs,
+  removeButtonAttrs,
+  removeIconAttrs,
+  addButtonAttrs,
+  addIconAttrs,
+  numberAttrs,
+} = useAttrs(props);
+
+const count = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+const isAddButtonDisabled = computed(() => count.value >= props.max);
+const isRemoveButtonDisabled = computed(() => count.value <= props.min);
+
+function onClickRemove() {
+  const newCount = count.value - props.step;
+
+  count.value = newCount >= props.min ? newCount : count.value;
+}
+
+function onClickAdd() {
+  const newCount = count.value + props.step;
+
+  count.value = newCount <= props.max ? newCount : count.value;
+}
+</script>
+
 <template>
   <ULabel
     :label="label"
@@ -24,7 +91,7 @@
       <UIcon
         internal
         :size="size"
-        :name="config.defaults.removeIcon"
+        :name="config.defaults?.removeIcon"
         :color="isRemoveButtonDisabled ? 'gray' : 'grayscale'"
         v-bind="removeIconAttrs"
       />
@@ -48,164 +115,10 @@
       <UIcon
         internal
         :size="size"
-        :name="config.defaults.addIcon"
+        :name="config.defaults?.addIcon"
         :color="isAddButtonDisabled ? 'gray' : 'grayscale'"
         v-bind="addIconAttrs"
       />
     </UButton>
   </ULabel>
 </template>
-
-<script setup>
-import { computed } from "vue";
-
-import UIcon from "../ui.image-icon/UIcon.vue";
-import UButton from "../ui.button/UButton.vue";
-import ULabel from "../ui.form-label/ULabel.vue";
-import { getDefault } from "../utils/ui.ts";
-
-import defaultConfig from "./config.js";
-import { UInputNumber } from "./constants.js";
-import useAttrs from "./useAttrs.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Input value.
-   */
-  modelValue: {
-    type: Number,
-    required: true,
-  },
-
-  /**
-   * Input step.
-   */
-  step: {
-    type: Number,
-    default: getDefault(defaultConfig, UInputNumber).step,
-  },
-
-  /**
-   * Input min value.
-   */
-  min: {
-    type: Number,
-    default: getDefault(defaultConfig, UInputNumber).min,
-  },
-
-  /**
-   * Input max value.
-   */
-  max: {
-    type: Number,
-    default: getDefault(defaultConfig, UInputNumber).max,
-  },
-
-  /**
-   * Input label below number.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Label placement.
-   * @values top, topWithDesc, left, right
-   */
-  labelAlign: {
-    type: String,
-    default: getDefault(defaultConfig, UInputNumber).labelAlign,
-  },
-
-  /**
-   * Input description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Error message.
-   */
-  error: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Input size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UInputNumber).size,
-  },
-
-  /**
-   * Disable the input.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UInputNumber).disabled,
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits([
-  /**
-   * Triggers when the input value changes.
-   * @property {number} modelValue
-   */
-  "update:modelValue",
-]);
-
-const {
-  config,
-  valueAttrs,
-  labelAttrs,
-  removeButtonAttrs,
-  removeIconAttrs,
-  addButtonAttrs,
-  addIconAttrs,
-  numberAttrs,
-} = useAttrs(props);
-
-const count = computed({
-  get: () => props.modelValue,
-  set: (value) => emit("update:modelValue", value),
-});
-
-const isAddButtonDisabled = computed(() => count.value >= props.max);
-const isRemoveButtonDisabled = computed(() => count.value <= props.min);
-
-function onClickRemove() {
-  const newCount = count.value - props.step;
-
-  count.value = newCount >= props.min ? newCount : count.value;
-}
-
-function onClickAdd() {
-  const newCount = count.value + props.step;
-
-  count.value = newCount <= props.max ? newCount : count.value;
-}
-</script>

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

@@ -8,6 +8,14 @@ import {
 import UInputNumber from "../../ui.form-input-number/UInputNumber.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UInputNumberProps } from "../types.ts";
+
+interface UInputNumberArgs extends UInputNumberProps {
+  slotTemplate?: string;
+  enum: "size";
+}
+
 export default {
   id: "3050",
   title: "Form Inputs & Controls / Input Number",
@@ -22,9 +30,9 @@ export default {
   parameters: {
     ...getDocsDescription(UInputNumber.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UInputNumberArgs> = (args: UInputNumberArgs) => ({
   components: { UInputNumber },
   setup() {
     const slots = getSlotNames(UInputNumber.__name);
@@ -33,17 +41,17 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UInputNumber v-bind="args" v-model="args.modelValue">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UInputNumber>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UInputNumberArgs> = (args: UInputNumberArgs, { argTypes }) => ({
   components: { UInputNumber, UCol },
   setup() {
     return {
       args,
-      options: argTypes[args.enum].options,
+      options: argTypes?.[args.enum]?.options,
     };
   },
   data() {
@@ -74,7 +82,7 @@ Default.args = { step: 1, min: 1, max: 100 };
 
 export const Label = DefaultTemplate.bind({});
 Label.args = {
-  value: 1,
+  modelValue: 1,
   step: 1,
   min: 1,
   max: 100,
@@ -84,7 +92,7 @@ Label.args = {
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = {
   enum: "size",
-  value: 1,
+  modelValue: 1,
   step: 1,
   min: 1,
   max: 100,
@@ -92,7 +100,7 @@ Sizes.args = {
 
 export const ValueLimit = DefaultTemplate.bind({});
 ValueLimit.args = {
-  value: 1,
+  modelValue: 1,
   step: 1,
   min: 5,
   max: 10,
@@ -101,7 +109,7 @@ ValueLimit.args = {
 
 export const Step = DefaultTemplate.bind({});
 Step.args = {
-  value: 1,
+  modelValue: 1,
   step: 5,
   min: 1,
   max: 100,

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

@@ -0,0 +1,65 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UInputNumberProps {
+  /**
+   * Input value.
+   */
+  modelValue: number;
+
+  /**
+   * Input step.
+   */
+  step?: number;
+
+  /**
+   * Input min value.
+   */
+  min?: number;
+
+  /**
+   * Input max value.
+   */
+  max?: number;
+
+  /**
+   * Input label below number.
+   */
+  label?: string;
+
+  /**
+   * Label placement.
+   */
+  labelAlign?: "top" | "topWithDesc" | "left" | "right";
+
+  /**
+   * Input description.
+   */
+  description?: string;
+
+  /**
+   * Error message.
+   */
+  error?: string;
+
+  /**
+   * Input size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Disable the input.
+   */
+  disabled?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Config;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

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