vueless 0.0.1

package/ui.form-input-money/_components/RangeInput.vue

@@ -0,0 +1,356 @@
+<template>
+  <div>
+    <div class="money" :class="moneyClass">
+      <div class="money-wrapper" :class="disabledClass.startRange">
+        <label v-if="!hideLabel" class="money-label" :for="`startRange${id}`" :class="labelClass">
+          {{ label.startRange }}
+        </label>
+
+        <t-input
+          :id="`startRange${id}`"
+          class="money-input"
+          :placeholder="money.startRange.placeholder"
+          :model-value="money.startRange.sum"
+          :data-cy="`${dataCy}-start-range-input`"
+          :disabled="disabled.startRange"
+          inputmode="decimal"
+          @keyup="onKeyupInput"
+        />
+      </div>
+
+      <div class="money-wrapper" :class="disabledClass.endRange">
+        <label v-if="!hideLabel" class="money-label" :for="`endRange${id}`" :class="labelClass">
+          {{ label.endRange }}
+        </label>
+
+        <t-input
+          :id="`endRange${id}`"
+          class="money-input"
+          :placeholder="money.endRange.placeholder"
+          :model-value="money.endRange.sum"
+          :data-cy="`${dataCy}-end-range-input`"
+          :disabled="disabled.endRange"
+          inputmode="decimal"
+          @keyup="onKeyupInput"
+        />
+      </div>
+    </div>
+
+    <div v-if="error" class="error-message" :data-cy="`${dataCy}-error-message`">
+      {{ error }}
+    </div>
+  </div>
+</template>
+
+<script>
+import Cleave from "cleave.js";
+import { getRandomId } from "vueless/service.ui";
+import TInput from "vueless/library.vue-tailwind-3/t-input";
+
+export default {
+  components: {
+    TInput,
+  },
+
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    cleaveSettings: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    hideLabel: {
+      type: Boolean,
+      default: false,
+    },
+
+    id: {
+      type: String,
+      default: () => getRandomId(),
+    },
+
+    error: {
+      type: String,
+      default: "",
+    },
+
+    numeralDecimalScale: {
+      type: Object,
+      default: () => ({
+        startRange: 2,
+        endRange: 2,
+      }),
+    },
+
+    disabled: {
+      type: Object,
+      default: () => ({
+        startRange: false,
+        endRange: false,
+      }),
+    },
+
+    i18n: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    dataCy: {
+      type: String,
+      default: "",
+    },
+  },
+
+  emits: ["update:modelValue"],
+
+  data: () => ({
+    money: {
+      startRange: {
+        symbol: "",
+        sum: "",
+        placeholder: "",
+        label: "",
+      },
+      endRange: {
+        symbol: "",
+        sum: "",
+        placeholder: "",
+        label: "",
+      },
+    },
+  }),
+
+  computed: {
+    startRange() {
+      return this.$el.querySelector(`#startRange${this.id}`);
+    },
+
+    endRange() {
+      return this.$el.querySelector(`#endRange${this.id}`);
+    },
+
+    moneyClass() {
+      return {
+        "error-input": this.error,
+      };
+    },
+
+    disabledClass() {
+      return {
+        startRange: this.disabled.startRange ? "disabled" : "",
+        endRange: this.disabled.endRange ? "disabled" : "",
+      };
+    },
+
+    labelClass() {
+      return {
+        "error-label": this.error,
+      };
+    },
+
+    label() {
+      const separatedSymbol =
+        this.money?.startRange?.symbol || this.money?.startRange?.symbol ? "," : "";
+
+      const startRange = `${this.money?.startRange?.label}${separatedSymbol} ${this.money?.startRange?.symbol}`;
+      const endRange = `${this.money?.endRange?.label}${separatedSymbol} ${this.money?.endRange?.symbol}`;
+
+      return {
+        startRange,
+        endRange,
+      };
+    },
+  },
+
+  watch: {
+    money: {
+      handler: "onChangeMoney",
+      deep: true,
+    },
+    value: {
+      handler: "onChangeValue",
+      deep: true,
+    },
+  },
+
+  mounted() {
+    this.prefillInput();
+
+    this.cleaveStartRange = new Cleave(this.startRange, {
+      ...this.cleaveSettings,
+      numeralDecimalScale: this.numeralDecimalScale.startRange,
+    });
+
+    this.cleaveStartRange.setRawValue(this.money.startRange.sum);
+
+    this.cleaveEndRange = new Cleave(this.endRange, {
+      ...this.cleaveSettings,
+      numeralDecimalScale: this.numeralDecimalScale.endRange,
+    });
+
+    this.cleaveEndRange.setRawValue(this.money.endRange.sum);
+
+    this.addEventListeners(this.startRange);
+    this.addEventListeners(this.endRange);
+  },
+
+  beforeUnmount() {
+    this.removeEventListeners(this.startRange);
+    this.removeEventListeners(this.endRange);
+  },
+
+  methods: {
+    addEventListeners(element) {
+      element.addEventListener("paste", (event) => this.onPaste(event));
+      element.addEventListener("keydown", (event) => this.onKeydown(event));
+    },
+
+    removeEventListeners(element) {
+      element.removeEventListener("paste", (event) => this.onPaste(event));
+      element.removeEventListener("keydown", (event) => this.onKeydown(event));
+    },
+
+    onPaste(event) {
+      event.preventDefault();
+      event.target.value = (event.clipboardData || window.clipboardData)
+        .getData("text")
+        .replace(".", ",");
+    },
+
+    onKeydown(event) {
+      if (event.key === ".") {
+        event.preventDefault();
+        event.target.value += ",";
+      }
+    },
+
+    prefillInput() {
+      this.money.startRange = {
+        symbol: this.modelValue?.startRange?.symbol || "",
+        sum: this.modelValue?.startRange?.sum,
+        placeholder: this.modelValue?.startRange?.placeholder,
+        label: this.modelValue?.startRange?.label || this.i18n.amount,
+      };
+
+      this.money.endRange = {
+        symbol: this.modelValue?.endRange?.symbol || "",
+        sum: this.modelValue?.endRange?.sum,
+        placeholder: this.modelValue?.endRange?.placeholder,
+        label: this.modelValue?.endRange?.label || this.i18n.amount,
+      };
+    },
+
+    onChangeMoney() {
+      if (!this.cleaveStartRange || !this.cleaveEndRange) return;
+
+      let newMoney = {};
+
+      newMoney.startRange = this.cleaveStartRange?.getRawValue();
+
+      newMoney.endRange = this.cleaveEndRange?.getRawValue();
+
+      this.$emit("update:modelValue", newMoney);
+    },
+
+    onChangeValue(value) {
+      if (!this.cleaveStartRange || !this.cleaveEndRange) return;
+
+      this.cleaveStartRange.setRawValue(value.startRange);
+      this.cleaveEndRange.setRawValue(value.endRange);
+
+      this.onKeyupInput();
+    },
+
+    onKeyupInput() {
+      if (!this.cleaveStartRange || !this.cleaveEndRange) return;
+
+      this.money.startRange.sum = this.cleaveStartRange.getFormattedValue();
+
+      this.money.endRange.sum = this.cleaveEndRange.getFormattedValue();
+    },
+  },
+};
+</script>
+
+<style lang="postcss" scoped>
+.money {
+  @apply flex w-full;
+  @apply rounded-lg border border-gray-300 bg-white;
+  @apply transition-all duration-100;
+  @apply overflow-hidden;
+
+  &:hover {
+    @apply border-gray-400;
+  }
+
+  &:focus-within {
+    @apply border-gray-500 ring-4 ring-gray-600 ring-opacity-15;
+  }
+
+  &-wrapper {
+    @apply flex-auto;
+    @apply px-4 py-2.5;
+    @apply relative;
+
+    &:first-child {
+      &::after {
+        content: "";
+        @apply absolute right-0 top-2;
+        @apply bg-gray-300;
+        @apply h-[2.625rem] w-px;
+      }
+    }
+  }
+
+  &-label {
+    @apply block;
+    @apply whitespace-nowrap text-sm font-normal text-gray-500;
+    @apply pb-0.5;
+  }
+
+  &-input {
+    @apply text-base font-normal text-gray-900;
+    @apply rounded-none border-0 shadow-none ring-0;
+    @apply p-0;
+
+    &:focus {
+      @apply ring-0;
+    }
+  }
+}
+
+.error-message {
+  @apply text-xs font-normal text-red-500;
+  @apply mt-2 pl-4;
+}
+
+.error-label {
+  @apply text-red-500;
+}
+
+.error-input {
+  @apply border-red-300;
+
+  &:hover {
+    @apply border-red-400;
+  }
+
+  &:focus-within {
+    @apply border-red-500 ring-red-100;
+  }
+}
+
+.disabled {
+  @apply bg-gray-100 border-none;
+  @apply cursor-not-allowed;
+
+  &:deep(.money-input) {
+    @apply bg-gray-100;
+    @apply text-gray-900 opacity-100;
+  }
+}
+</style>

package/ui.form-input-money/_components/SingleInput.vue

@@ -0,0 +1,378 @@
+<template>
+  <div>
+    <div class="money" :class="moneyClass">
+      <label v-if="!hideLabel" class="money-label" :for="`moneyInput${id}`" :class="labelClass">
+        {{ label }}
+      </label>
+
+      <t-input
+        :id="`moneyInput${id}`"
+        ref="initialCurrency"
+        class="money-input"
+        :placeholder="placeholder"
+        :model-value="money.initialCurrency.sum"
+        :data-cy="`${dataCy}-base-currency`"
+        :disabled="disabled"
+        inputmode="decimal"
+        @keyup="onKeyupInput"
+        @blur="onBlur"
+        @input="onInput"
+      />
+
+      <div v-if="isShownRightSlot" class="money-slot-wrapper">
+        <slot name="right" />
+      </div>
+    </div>
+
+    <div v-if="error" class="error-message" :data-cy="`${dataCy}-error-message`">
+      {{ error }}
+    </div>
+  </div>
+</template>
+
+<script>
+import Cleave from "cleave.js";
+import { getRandomId } from "vueless/service.ui";
+import MoneyService, { SYMBOL_MINUS, DOUBLE_ZERO } from "vueless/service.money";
+import TInput from "vueless/library.vue-tailwind-3/t-input";
+
+export default {
+  components: {
+    TInput,
+  },
+
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    cleaveSettings: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    hideLabel: {
+      type: Boolean,
+      default: false,
+    },
+
+    id: {
+      type: String,
+      default: () => getRandomId(),
+    },
+
+    error: {
+      type: String,
+      default: "",
+    },
+
+    numeralDecimalScale: {
+      type: Number,
+      default: 2,
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    withMinus: {
+      type: Boolean,
+      default: false,
+    },
+
+    i18n: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    placeholder: {
+      type: String,
+      default: "",
+    },
+
+    dataCy: {
+      type: String,
+      default: "",
+    },
+  },
+
+  emits: ["update:modelValue", "keyup", "blur", "input"],
+
+  data() {
+    return {
+      cleaveMoneyInput: undefined,
+      money: {
+        initialCurrency: {
+          symbol: "",
+          sum: "",
+          label: "",
+        },
+      },
+    };
+  },
+
+  computed: {
+    isShownRightSlot() {
+      return !!this.$slots["right"];
+    },
+
+    moneyClass() {
+      return {
+        "error-input": this.error,
+        disabled: this.disabled,
+      };
+    },
+
+    labelClass() {
+      return {
+        "error-label": this.error,
+      };
+    },
+
+    label() {
+      const comma = this.money?.initialCurrency?.symbol ? "," : "";
+
+      return `${this.money?.initialCurrency?.label}${comma} ${this.money?.initialCurrency?.symbol}`;
+    },
+
+    isShownMinus() {
+      return this.withMinus ? SYMBOL_MINUS : "";
+    },
+
+    moneyInput() {
+      return this.$el.querySelector(`#moneyInput${this.id}`);
+    },
+  },
+
+  watch: {
+    money: {
+      handler: "onChangeMoney",
+      deep: true,
+    },
+    modelValue: {
+      handler: "onChangeValue",
+      deep: true,
+    },
+    withMinus: "onChangeWithMinus",
+  },
+
+  created() {
+    this.prefillInput();
+  },
+
+  mounted() {
+    this.cleaveMoneyInput = new Cleave(this.moneyInput, {
+      ...this.cleaveSettings,
+      numeralDecimalScale: this.numeralDecimalScale,
+      prefix: this.isShownMinus,
+    });
+
+    this.moneyInput.addEventListener("paste", (event) => this.onPaste(event));
+    this.moneyInput.addEventListener("keydown", (event) => this.onKeydown(event));
+
+    this.money.initialCurrency.sum = this.cleaveMoneyInput.getFormattedValue();
+  },
+
+  beforeUnmount() {
+    this.moneyInput.removeEventListener("paste", (event) => this.onPaste(event));
+    this.moneyInput.removeEventListener("keydown", (event) => this.onKeydown(event));
+  },
+
+  methods: {
+    onPaste(event) {
+      event.preventDefault();
+      event.target.value = (event.clipboardData || window.clipboardData)
+        .getData("text")
+        .replace(".", ",");
+    },
+
+    onKeydown(event) {
+      if (event.key === ".") {
+        event.preventDefault();
+        event.target.value += ",";
+      }
+    },
+
+    onChangeWithMinus() {
+      this.cleaveMoneyInput = new Cleave(this.moneyInput, {
+        ...this.cleaveSettings,
+        numeralDecimalScale: this.numeralDecimalScale,
+        prefix: this.isShownMinus,
+      });
+
+      this.money.initialCurrency.sum = this.cleaveMoneyInput.getFormattedValue();
+    },
+
+    prefillInput() {
+      const separatedSum = new MoneyService().separatedMoney(
+        Number(this.modelValue?.initialCurrency?.sum),
+      );
+
+      const sum =
+        separatedSum.penny === DOUBLE_ZERO
+          ? separatedSum.integer
+          : `${separatedSum.integer}${separatedSum.delimiter}${separatedSum.penny}`;
+
+      this.money.initialCurrency = {
+        symbol: this.modelValue?.initialCurrency?.symbol || "",
+        sum: Number(sum) === 0 ? "" : sum,
+        placeholder: this.modelValue?.initialCurrency?.placeholder,
+        label: this.modelValue?.initialCurrency?.label || this.i18n.amount,
+      };
+    },
+
+    onChangeMoney() {
+      if (!this.cleaveMoneyInput) return;
+
+      let preparedMoney = {
+        initialCurrency: {
+          label: this.money.initialCurrency.label,
+          symbol: this.money.initialCurrency.symbol,
+          placeholder: this.money.initialCurrency.placeholder,
+          sum: this.cleaveMoneyInput?.getRawValue(),
+        },
+      };
+
+      if (this.modelValue?.convertibleCurrency) {
+        preparedMoney.convertibleCurrency = {
+          symbol: this.modelValue?.convertibleCurrency?.symbol || "",
+          sum: this.modelValue?.convertibleCurrency?.sum || "",
+          placeholder: this.modelValue?.convertibleCurrency?.placeholder || "",
+          label: this.modelValue?.convertibleCurrency?.label || "",
+        };
+      }
+
+      if (this.modelValue?.firstRate) {
+        preparedMoney.firstRate = {
+          symbol: this.modelValue?.firstRate?.symbol || "",
+          sum: this.modelValue?.firstRate?.sum || "",
+          placeholder: this.modelValue?.firstRate?.placeholder || "",
+          label: this.modelValue?.firstRate?.label || "",
+        };
+      }
+
+      if (this.modelValue?.secondRate) {
+        preparedMoney.secondRate = {
+          symbol: this.modelValue?.secondRate?.symbol || "",
+          sum: this.modelValue?.secondRate?.sum || "",
+          placeholder: this.modelValue?.secondRate?.placeholder || "",
+          label: this.modelValue?.secondRate?.label || "",
+        };
+      }
+
+      this.$emit("update:modelValue", preparedMoney);
+    },
+
+    onChangeValue(value) {
+      if (!this.cleaveMoneyInput) return;
+
+      const inputElement = this.$refs?.initialCurrency?.$el;
+
+      const cursorStart = inputElement?.selectionStart;
+      const cursorEnd = inputElement?.selectionEnd;
+
+      this.cleaveMoneyInput.setRawValue(value.initialCurrency.sum);
+
+      if (cursorEnd && cursorStart) {
+        inputElement.setSelectionRange(cursorStart, cursorEnd);
+      }
+
+      this.money.initialCurrency.sum = this.cleaveMoneyInput.getFormattedValue();
+      this.money.initialCurrency.symbol = value.initialCurrency.symbol;
+    },
+
+    onKeyupInput(event) {
+      if (!this.cleaveMoneyInput) return;
+
+      this.money.initialCurrency.sum = this.cleaveMoneyInput.getFormattedValue();
+
+      this.$nextTick(() => {
+        this.$emit("keyup", event);
+      });
+    },
+
+    onBlur() {
+      this.$nextTick(() => {
+        this.$emit("blur");
+      });
+    },
+
+    onInput(event) {
+      this.$nextTick(() => {
+        this.$emit("input", event);
+      });
+    },
+  },
+};
+</script>
+
+<style lang="postcss" scoped>
+.money {
+  @apply flex;
+  @apply rounded-lg border border-gray-300 bg-white;
+  @apply px-4 py-2.5;
+  @apply transition-all duration-100;
+  @apply relative;
+
+  &:hover {
+    @apply border-gray-400;
+  }
+
+  &:focus-within {
+    @apply border-gray-500 ring-4 ring-gray-600 ring-opacity-15;
+  }
+
+  &-label {
+    @apply absolute block;
+    @apply whitespace-nowrap text-sm font-normal text-gray-500;
+    @apply pb-0.5;
+  }
+
+  &-input {
+    @apply text-base font-normal text-gray-900;
+    @apply rounded-none border-0 shadow-none ring-0;
+    @apply mt-[1.125rem] flex-auto py-0 pl-0 pr-4;
+
+    &:focus {
+      @apply ring-0;
+    }
+  }
+
+  &-slot-wrapper {
+    @apply flex w-full flex-1 items-center whitespace-nowrap;
+  }
+}
+
+.error-message {
+  @apply text-xs font-normal text-red-500;
+  @apply mt-2 pl-4;
+}
+
+.error-label {
+  @apply text-red-500;
+}
+
+.error-input {
+  @apply border-red-300;
+
+  &:hover {
+    @apply border-red-400;
+  }
+
+  &:focus-within {
+    @apply border-red-500 ring-red-100;
+  }
+}
+
+.disabled {
+  @apply bg-gray-100 border-none;
+  @apply cursor-not-allowed;
+
+  &:deep(.money-input) {
+    @apply bg-gray-100;
+    @apply text-gray-900 opacity-100;
+  }
+}
+</style>