vueless 0.0.2 → 0.0.3

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

@@ -1,260 +1,264 @@
 <template>
-  <div class="mono-money-input">
-    <SingleInput
-      v-if="isShownInput.single"
-      ref="input"
-      v-model="form"
-      :hide-label="hideLabel"
-      :cleave-settings="cleaveSettings"
-      :error="error"
-      :numeral-decimal-scale="numeralDecimalScale.initialCurrency"
-      :disabled="disabled.initialCurrency"
-      :with-minus="withMinus"
-      :i18n="i18n"
-      :placeholder="placeholder"
-      :data-cy="dataCy"
-      @keyup="onKeyupInput"
-      @blur="onBlur"
-      @input="onInput"
-    >
-      <template #right>
-        <!-- @slot Use it to add right slot. -->
-        <slot name="right" />
-      </template>
-    </SingleInput>
-
-    <RangeInput
-      v-if="isShownInput.range"
-      v-model="form"
-      :hide-label="hideLabel"
-      :cleave-settings="cleaveSettings"
-      :error="error"
-      :numeral-decimal-scale="numeralDecimalScale"
-      :disabled="disabled"
-      :i18n="i18n"
-      :data-cy="dataCy"
-    />
-
-    <ConvertibleInput
-      v-if="isShownInput.convertible"
-      ref="input"
-      v-model="form"
-      :hide-label="hideLabel"
-      :cleave-settings="cleaveSettings"
-      :error="error"
-      :base-currency-symbol="baseCurrencySymbol"
-      :numeral-decimal-scale="numeralDecimalScale"
-      :disabled="disabled"
-      :with-minus="withMinus"
-      :i18n="i18n"
-      :data-cy="dataCy"
-    >
-      <template #right>
-        <!-- @slot Use it to add right slot. -->
-        <slot name="right" />
-      </template>
-    </ConvertibleInput>
-  </div>
+  <UInput
+    :id="id"
+    ref="moneyInputRef"
+    v-model="formattedValue"
+    :size="size"
+    :label="localLabel"
+    :label-outside="labelOutside"
+    :placeholder="placeholder"
+    :description="description"
+    :error="error"
+    :disabled="disabled"
+    inputmode="decimal"
+    :data-cy="`${dataCy}-base-currency`"
+    v-bind="inputAttrs"
+    @keyup="onKeyup"
+    @blur="onBlur"
+    @input="onInput"
+  >
+    <template #left>
+      <!-- @slot Use it to add something left. -->
+      <slot name="left" />
+    </template>
+
+    <template #right>
+      <!-- @slot Use it to add something right. -->
+      <slot name="right" />
+    </template>
+
+    <template #right-icon>
+      <!-- @slot Use it to add right icon. -->
+      <slot name="right-icon" />
+    </template>
+  </UInput>
 </template>
 
-<script>
-import I18nServiceDefault from "vueless/service.i18n";
+<script setup>
+import { computed, ref, watch, onMounted, nextTick } from "vue";
+
+import UIService from "vueless/service.ui";
+import { getRandomId } from "vueless/service.ui";
 
-import SingleInput from "./_components/SingleInput.vue";
-import RangeInput from "./_components/RangeInput.vue";
-import ConvertibleInput from "./_components/ConvertibleInput.vue";
+import { SYMBOL_MINUS } from "../ui.text-money/constants";
 
-const SINGLE = "single";
-const RANGE = "range";
-const CONVERTIBLE = "convertible";
+import defaultConfig from "./configs/default.config";
+import { UInputMoney } from "./constants";
 
-export default {
-  name: "UInputMoney",
+import useAttrs from "./composables/attrs.composable";
+import useFormatCurrency from "./composables/useFormatCurrency";
 
-  components: {
-    ConvertibleInput,
-    RangeInput,
-    SingleInput,
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UInputMoney", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Input value.
+   */
+  modelValue: {
+    type: [String, Number],
+    default: "",
+  },
+  /**
+   * Input label.
+   */
+  label: {
+    type: String,
+    default: "",
   },
 
-  props: {
-    /**
-     * Set input money value.
-     */
-    modelValue: {
-      type: Object,
-      default: () => ({}),
-    },
-
-    /**
-     * Set component type.
-     * @values single, range, convertible
-     */
-    type: {
-      type: String,
-      default: SINGLE,
-    },
-
-    /**
-     * Set base currency symbol for CONVERTIBLE type (For example, "₴". It's possible to use the symbol of any currency).
-     */
-    baseCurrencySymbol: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Hide / show label.
-     */
-    hideLabel: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Set error text.
-     */
-    error: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Allows only positive values.
-     */
-    positiveOnly: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Show / hide minus sign.
-     */
-    withMinus: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Set the numeral decimal scale after the comma.
-     */
-    numeralDecimalScale: {
-      type: Object,
-      default: () => ({
-        initialCurrency: 2,
-        convertibleCurrency: 2,
-        firstRate: 4,
-        secondRate: 4,
-        startRange: 2,
-        endRange: 2,
-      }),
-    },
-
-    /**
-     * Set disabled options for component types.
-     */
-    disabled: {
-      type: Object,
-      default: () => ({
-        initialCurrency: false,
-        convertibleCurrency: false,
-        firstRate: false,
-        secondRate: false,
-        startRange: false,
-        endRange: false,
-      }),
-    },
-    /**
-     * Set placeholder text.
-     */
-    placeholder: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+  /**
+   * Show label outside the input block.
+   */
+  labelOutside: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputMoney).default.labelOutside,
   },
 
-  emits: ["update:modelValue", "keyup", "blur", "input"],
+  /**
+   * Currency symbol.
+   */
+  symbol: {
+    type: String,
+    default: UIService.get(defaultConfig, UInputMoney).default.symbol,
+  },
 
-  setup() {
-    const { getTranslation } = new I18nServiceDefault();
+  /**
+   * Input placeholder.
+   */
+  placeholder: {
+    type: String,
+    default: "",
+  },
 
-    return { getTranslation };
+  /**
+   * Input description.
+   */
+  description: {
+    type: String,
+    default: "",
   },
 
-  data: () => ({
-    cleaveSettings: {
-      numeral: true,
-      numeralThousandsGroupStyle: "thousand",
-      delimiter: " ",
-      numeralDecimalMark: ",",
-      numeralPositiveOnly: false,
-      rawValueTrimPrefix: true,
-    },
-  }),
-
-  computed: {
-    i18n() {
-      return {
-        rate: this.getTranslation("rate"),
-        amount: this.getTranslation("amount"),
-      };
-    },
-
-    isShownInput() {
-      return {
-        single: this.type === SINGLE,
-        range: this.type === RANGE,
-        convertible: this.type === CONVERTIBLE,
-      };
-    },
-
-    form: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit("update:modelValue", value);
-      },
-    },
+  /**
+   * Error message.
+   */
+  error: {
+    type: String,
+    default: "",
   },
 
-  created() {
-    this.cleaveSettings.numeralPositiveOnly = this.positiveOnly;
-    this.form = this.modelValue;
+  /**
+   * Input size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UInputMoney).default.size,
   },
 
-  methods: {
-    onKeyupInput(event) {
-      this.$emit("keyup", event);
-    },
+  /**
+   * Number of signs after the comma.
+   */
+  decimalScale: {
+    type: Number,
+    default: UIService.get(defaultConfig, UInputMoney).default.decimalScale,
+  },
 
-    onBlur() {
-      this.$emit("blur");
-    },
+  /**
+   * A symbol used to separate the integer part from the fractional part of a number.
+   */
+  decimalSeparator: {
+    type: String,
+    default: UIService.get(defaultConfig, UInputMoney).default.decimalSeparator,
+  },
 
-    onInput(event) {
-      this.$emit("input", event);
-    },
+  /**
+   *  A symbol used to separate the thousand parts of a number.
+   */
+  thousandsSeparator: {
+    type: String,
+    default: UIService.get(defaultConfig, UInputMoney).default.thousandsSeparator,
   },
-};
-</script>
 
-<i18n>
-en:
-  rate: "Rate"
-  amount: "Amount"
-ru:
-  rate: "Курс"
-  amount: "Сумма"
-ua:
-  rate: "Курс"
-  amount: "Сума"
-</i18n>
+  /**
+   * Allow only positive values.
+   */
+  positiveOnly: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputMoney).default.positiveOnly,
+  },
+
+  /**
+   * Show prefix in the raw value number.
+   */
+  rawValuePrefix: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputMoney).default.rawValuePrefix,
+  },
+
+  /**
+   * Show minus sign.
+   */
+  minus: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputMoney).default.minus,
+  },
+
+  /**
+   * Set input read-only.
+   */
+  readonly: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputMoney).default.readonly,
+  },
+
+  /**
+   * Disable the input.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputMoney).default.disabled,
+  },
+
+  /**
+   * Unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "keyup", "blur", "input"]);
+
+const moneyInputRef = ref(null);
+
+const { inputAttrs } = useAttrs(props);
+
+const { formattedValue, rawValue, setValue } = useFormatCurrency(`#${props.id}`, () => ({
+  decimalScale: props.decimalScale,
+  decimalSeparator: props.decimalSeparator,
+  thousandsSeparator: props.thousandsSeparator,
+  positiveOnly: props.positiveOnly,
+  rawValuePrefix: props.rawValuePrefix,
+  prefix: props.minus ? SYMBOL_MINUS : "",
+}));
+
+const localValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+const localLabel = computed(() => {
+  const comma = props.symbol && props.label ? "," : "";
+  const symbol = props.label ? props.symbol : "";
+
+  return `${props.label}${comma} ${symbol}`.trim();
+});
+
+const input = computed(() => {
+  return moneyInputRef.value.input;
+});
+
+watch(
+  () => props.modelValue,
+  () => String(localValue.value) !== String(rawValue.value) && setValue(localValue.value),
+);
+
+defineExpose({ input, rawValue, formattedValue });
+
+onMounted(() => {
+  setValue(localValue.value);
+});
+
+function onKeyup(event) {
+  localValue.value = rawValue.value || "";
+
+  nextTick(() => emit("keyup", event));
+}
+
+function onBlur() {
+  nextTick(() => emit("blur"));
+}
+
+function onInput(value) {
+  nextTick(() => emit("input", value));
+}
+</script>

package/ui.form-input-money/services/format.service.js

@@ -0,0 +1,72 @@
+export default class FormatService {
+  static isNumberValueRegExp = /^[\d,.\s-]+$/;
+  static rawDecimalMark = ".";
+  static comma = ",";
+
+  static getRawValue(value, options) {
+    const { thousandsSeparator, decimalSeparator, rawValuePrefix, prefix } = options;
+
+    value = String(value).endsWith(decimalSeparator)
+      ? String(value).replace(decimalSeparator, "")
+      : String(value);
+
+    const rawValueWithPrefix = value
+      .replaceAll(thousandsSeparator, "")
+      .replace(decimalSeparator, ".");
+
+    return rawValuePrefix ? rawValueWithPrefix : rawValueWithPrefix.replace(prefix, "");
+  }
+
+  static getFormattedValue(value, options) {
+    const { thousandsSeparator, decimalSeparator, decimalScale, 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(this.comma, decimalSeparator)
+      .split(decimalSeparator)
+      .slice(0, 2)
+      .map((value, index) => (index ? value.replaceAll(thousandsSeparator, "") : value))
+      .join(decimalSeparator);
+
+    value = String(value)
+      .replace(invalidValuesRegExp, "")
+      .replace(doubleValueRegExp, "$1")
+      .replaceAll(decimalSeparator, this.rawDecimalMark);
+
+    const isNumber = this.isNumberValueRegExp.test(value);
+    const isFloat = value.endsWith(this.rawDecimalMark) || value.endsWith(".0");
+
+    if (!value || !isNumber || isFloat) {
+      return `${prefix}${value.replaceAll(this.rawDecimalMark, decimalSeparator)}`;
+    }
+
+    const intlNumber = new Intl.NumberFormat("en-US", {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: decimalScale,
+      signDisplay: positiveOnly ? "never" : "negative",
+      roundingMode: "floor",
+    });
+
+    const rawValue = this.getRawValue(value, {
+      decimalSeparator,
+      thousandsSeparator,
+      prefix,
+      rawValuePrefix: false,
+    });
+
+    const formattedValue = intlNumber.formatToParts(parseFloat(rawValue) || 0).map((part) => {
+      if (part.type === "group") part.value = thousandsSeparator;
+      if (part.type === "decimal") part.value = decimalSeparator;
+      if (part.type === "fraction") part.value = part.value.padEnd(decimalScale, "0");
+
+      return part;
+    });
+
+    formattedValue.unshift({ value: prefix, type: "minusSign" });
+
+    return formattedValue.map((part) => part.value).join("");
+  }
+}

package/ui.form-input-number/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "vueless/service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-input-number/composables/attrs.composable.js

@@ -0,0 +1,47 @@
+import useUI from "vueless/composable.ui";
+import { cva } from "vueless/service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+  const { value, text } = config.value;
+
+  const cvaValue = cva({
+    base: value.base,
+    variants: value.variants,
+    compoundVariants: value.compoundVariants,
+  });
+
+  const cvaText = cva({
+    base: text.base,
+    variants: text.variants,
+    compoundVariants: text.compoundVariants,
+  });
+
+  const textClasses = computed(() => cvaText({ size: props.size }));
+
+  const valueClasses = computed(() => cvaValue({ size: props.size }));
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const numberAttrs = getAttrs("number");
+  const removeButtonAttrs = getAttrs("removeButton", { isComponent: true });
+  const removeIconAttrs = getAttrs("removeIcon", { isComponent: true });
+  const addButtonAttrs = getAttrs("addButton", { isComponent: true });
+  const addIconAttrs = getAttrs("addIcon", { isComponent: true });
+  const valueAttrs = getAttrs("value", { classes: valueClasses });
+  const textAttrs = getAttrs("text", { classes: textClasses });
+
+  return {
+    config,
+    valueAttrs,
+    textAttrs,
+    removeButtonAttrs,
+    removeIconAttrs,
+    addButtonAttrs,
+    addIconAttrs,
+    wrapperAttrs,
+    numberAttrs,
+  };
+}

package/ui.form-input-number/configs/default.config.js

@@ -0,0 +1,33 @@
+export default /*tw*/ {
+  wrapper: "flex items-center space-x-6",
+  number: "flex items-center flex-col",
+  removeButton: "",
+  removeIcon: "",
+  removeIconName: "remove",
+  addButton: "",
+  addIcon: "",
+  addIconName: "add",
+  value: {
+    base: "font-bold select-none !leading-none",
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+      },
+    },
+  },
+  text: {
+    base: "pt-1 !leading-none text-gray-500",
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+};

package/ui.form-input-number/constants/index.js

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UInputNumber = "UInputNumber";