vueless 0.0.4 → 0.0.5

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

@@ -0,0 +1,264 @@
+<template>
+  <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 setup>
+import { computed, ref, watch, onMounted, nextTick } from "vue";
+
+import UIService from "../service.ui";
+import { getRandomId } from "../service.ui";
+
+import { SYMBOL_MINUS } from "../ui.text-money/constants";
+
+import defaultConfig from "./configs/default.config";
+import { UInputMoney } from "./constants";
+
+import useAttrs from "./composables/attrs.composable";
+import useFormatCurrency from "./composables/useFormatCurrency";
+
+/* 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: "",
+  },
+
+  /**
+   * Show label outside the input block.
+   */
+  labelOutside: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputMoney).default.labelOutside,
+  },
+
+  /**
+   * Currency symbol.
+   */
+  symbol: {
+    type: String,
+    default: UIService.get(defaultConfig, UInputMoney).default.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: UIService.get(defaultConfig, UInputMoney).default.size,
+  },
+
+  /**
+   * Number of signs after the comma.
+   */
+  decimalScale: {
+    type: Number,
+    default: UIService.get(defaultConfig, UInputMoney).default.decimalScale,
+  },
+
+  /**
+   * 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,
+  },
+
+  /**
+   *  A symbol used to separate the thousand parts of a number.
+   */
+  thousandsSeparator: {
+    type: String,
+    default: UIService.get(defaultConfig, UInputMoney).default.thousandsSeparator,
+  },
+
+  /**
+   * 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/src/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/src/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 "../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/src/ui.form-input-number/composables/attrs.composable.js

@@ -0,0 +1,47 @@
+import useUI from "../../composable.ui";
+import { cva } from "../../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/src/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/src/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";

package/src/ui.form-input-number/index.stories.js

@@ -0,0 +1,103 @@
+import { getArgTypes } from "../service.storybook";
+
+import UInputNumber from "../ui.form-input-number";
+import UGroup from "../ui.container-group";
+
+export default {
+  id: "3050",
+  title: "Form Inputs & Controls / Input Number",
+  component: UInputNumber,
+  argTypes: {
+    ...getArgTypes(UInputNumber.name),
+    value: 1,
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UInputNumber },
+  setup() {
+    return { args };
+  },
+  data() {
+    return {
+      count: 1,
+    };
+  },
+  template: `
+    <UInputNumber v-model="count" v-bind="args" />
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UInputNumber, UGroup },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  data() {
+    return {
+      sizeValues: [
+        { count: 1, label: "sm" },
+        { count: 1, label: "md" },
+        { count: 1, label: "lg" },
+      ],
+    };
+  },
+  template: `
+    <UGroup size="lg">
+      <UInputNumber
+        v-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        :key="index"
+        :label="sizeValues[index].label"
+        v-model="sizeValues[index].count"
+      />
+    </UGroup>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  value: 1,
+  step: 1,
+  min: 1,
+  max: 100,
+};
+
+export const label = DefaultTemplate.bind({});
+label.args = {
+  value: 1,
+  step: 1,
+  min: 1,
+  max: 100,
+  label: "Year",
+};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {
+  value: 1,
+  step: 1,
+  min: 1,
+  max: 100,
+};
+
+export const valueLimit = DefaultTemplate.bind({});
+valueLimit.args = {
+  value: 1,
+  step: 1,
+  min: 5,
+  max: 10,
+  label: "Min is 5 | Max is 10",
+};
+
+export const step = DefaultTemplate.bind({});
+step.args = {
+  value: 1,
+  step: 5,
+  min: 1,
+  max: 100,
+  label: "Step is 5",
+};

package/src/ui.form-input-number/index.vue

@@ -0,0 +1,159 @@
+<template>
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+    <UButton
+      variant="thirdary"
+      size="sm"
+      filled
+      square
+      pill
+      :disabled="isRemoveButtonDisabled"
+      v-bind="removeButtonAttrs"
+      @click="onClickRemove"
+    >
+      <UIcon
+        :name="config.removeIconName"
+        :size="size"
+        :color="isRemoveButtonDisabled ? 'gray' : 'grayscale'"
+        :data-cy="`${dataCy}-remove`"
+        v-bind="removeIconAttrs"
+      />
+    </UButton>
+
+    <div v-bind="numberAttrs">
+      <div v-bind="valueAttrs" v-text="count" />
+      <div v-bind="textAttrs" v-text="label" />
+    </div>
+
+    <UButton
+      variant="thirdary"
+      size="sm"
+      filled
+      square
+      pill
+      :disabled="isAddButtonDisabled"
+      v-bind="addButtonAttrs"
+      @click="onClickAdd"
+    >
+      <UIcon
+        :name="config.addIconName"
+        :size="size"
+        :color="isAddButtonDisabled ? 'gray' : 'grayscale'"
+        :data-cy="`${dataCy}-add`"
+        v-bind="addIconAttrs"
+      />
+    </UButton>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import UIService from "../service.ui";
+
+import defaultConfig from "./configs/default.config";
+import { UInputNumber } from "./constants";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UInputNumber", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Input value.
+   */
+  modelValue: {
+    type: Number,
+    required: true,
+  },
+
+  /**
+   * Input step.
+   */
+  step: {
+    type: Number,
+    default: 1,
+  },
+
+  /**
+   * Input min value.
+   */
+  min: {
+    type: Number,
+    default: 1,
+  },
+
+  /**
+   * Input max value.
+   */
+  max: {
+    type: Number,
+    default: 999,
+  },
+
+  /**
+   * Input label below number.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Input size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UInputNumber).default.size,
+  },
+
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const {
+  config,
+  valueAttrs,
+  textAttrs,
+  removeButtonAttrs,
+  removeIconAttrs,
+  addButtonAttrs,
+  addIconAttrs,
+  wrapperAttrs,
+  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>