vueless 0.0.2 → 0.0.4

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

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

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