vueless 0.0.3 → 0.0.4

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

@@ -1,264 +0,0 @@
-<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 "vueless/service.ui";
-import { getRandomId } from "vueless/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/ui.form-input-money/services/format.service.js

@@ -1,72 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,5 +0,0 @@
-/*
-  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/ui.form-input-number/index.stories.js

@@ -1,103 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UInputNumber from "vueless/ui.form-input-number";
-import UGroup from "vueless/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/ui.form-input-number/index.vue

@@ -1,159 +0,0 @@
-<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 "vueless/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>