vueless 0.0.2 → 0.0.4

package/ui.form-input-money/index.stories.js

@@ -1,98 +0,0 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
-
-import UInputMoney from "vueless/ui.form-input-money";
-import URow from "vueless/ui.container-row";
-
-export default {
-  title: "Form Inputs & Controls / Input Money",
-  component: UInputMoney,
-  args: {
-    value: "",
-  },
-  argTypes: {
-    ...getArgTypes(UInputMoney.name),
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UInputMoney },
-  setup() {
-    const slots = getSlotNames(UInputMoney.name);
-
-    return { args, slots };
-  },
-  template: `
-    <UInputMoney
-      v-bind="args"
-      v-model="args.value"
-    >
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
-    </UInputMoney>
-  `,
-});
-
-const VariantsTemplate = (args, { argTypes }) => ({
-  components: { UInputMoney, URow },
-  setup() {
-    return {
-      args,
-      variants: argTypes.type.options,
-    };
-  },
-  template: `
-    <URow>
-      <div v-for="(variant, index) in variants" :key="index">
-        <UInputMoney
-          :type="variant"
-          v-bind="args"
-        />
-      </div>
-    </URow>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {
-  type: "convertible",
-  baseCurrencySymbol: "₴",
-  value: {
-    initialCurrency: {
-      symbol: "₴",
-      sum: "",
-      placeholder: "",
-      label: "UAH",
-    },
-    convertibleCurrency: {
-      symbol: "$",
-      sum: "",
-      placeholder: "",
-      label: "",
-    },
-    firstRate: {
-      symbol: "$",
-      sum: "29",
-      placeholder: "",
-      label: "USD",
-    },
-  },
-};
-
-export const type = VariantsTemplate.bind({});
-type.args = {};
-
-export const separatedInitialCurrency = DefaultTemplate.bind({});
-separatedInitialCurrency.args = { type: "convertible", separatedInitialCurrency: true };
-
-export const hideLabel = DefaultTemplate.bind({});
-hideLabel.args = { hideLabel: true };
-
-export const error = DefaultTemplate.bind({});
-error.args = { error: "some error" };
-
-export const positiveOnly = DefaultTemplate.bind({});
-positiveOnly.args = { positiveOnly: true };
-
-export const withMinus = DefaultTemplate.bind({});
-withMinus.args = { withMinus: true };

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

@@ -1,260 +0,0 @@
-<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>
-</template>
-
-<script>
-import I18nServiceDefault from "vueless/service.i18n";
-
-import SingleInput from "./_components/SingleInput.vue";
-import RangeInput from "./_components/RangeInput.vue";
-import ConvertibleInput from "./_components/ConvertibleInput.vue";
-
-const SINGLE = "single";
-const RANGE = "range";
-const CONVERTIBLE = "convertible";
-
-export default {
-  name: "UInputMoney",
-
-  components: {
-    ConvertibleInput,
-    RangeInput,
-    SingleInput,
-  },
-
-  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: "",
-    },
-  },
-
-  emits: ["update:modelValue", "keyup", "blur", "input"],
-
-  setup() {
-    const { getTranslation } = new I18nServiceDefault();
-
-    return { getTranslation };
-  },
-
-  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);
-      },
-    },
-  },
-
-  created() {
-    this.cleaveSettings.numeralPositiveOnly = this.positiveOnly;
-    this.form = this.modelValue;
-  },
-
-  methods: {
-    onKeyupInput(event) {
-      this.$emit("keyup", event);
-    },
-
-    onBlur() {
-      this.$emit("blur");
-    },
-
-    onInput(event) {
-      this.$emit("input", event);
-    },
-  },
-};
-</script>
-
-<i18n>
-en:
-  rate: "Rate"
-  amount: "Amount"
-ru:
-  rate: "Курс"
-  amount: "Сумма"
-ua:
-  rate: "Курс"
-  amount: "Сума"
-</i18n>

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

@@ -1,33 +0,0 @@
-import { getArgTypes } from "vueless/service.storybook";
-
-import UInputNumber from "vueless/ui.form-input-number";
-
-export default {
-  title: "Form Inputs & Controls / Input Number",
-  component: UInputNumber,
-  argTypes: {
-    ...getArgTypes(UInputNumber.name),
-    value: 1,
-  },
-};
-
-const DefaultTemplate = (args) => ({
-  components: { UInputNumber },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UInputNumber v-model="count" v-bind="args" />
-  `,
-  data: () => ({
-    count: 1,
-  }),
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = {
-  value: 1,
-  step: 1,
-  min: 1,
-  max: 100,
-};

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

@@ -1,127 +0,0 @@
-<template>
-  <div class="mono-counter" :data-cy="dataCy">
-    <div class="mono-counter-button" @click="onClickMinus">
-      <UIcon name="remove" size="xs" :data-cy="`${dataCy}-minus`" />
-    </div>
-
-    <div class="mono-counter-value">
-      {{ count }}
-    </div>
-
-    <div class="mono-counter-button" @click="onClickPlus">
-      <UIcon class="plus" name="add" size="xs" :data-cy="`${dataCy}-plus`" />
-    </div>
-  </div>
-</template>
-
-<script>
-import UIcon from "vueless/ui.image-icon";
-
-export default {
-  name: "UInputNumber",
-
-  components: {
-    UIcon,
-  },
-
-  props: {
-    /**
-     * Set value.
-     */
-    modelValue: {
-      type: Number,
-      required: true,
-    },
-
-    /**
-     * Set step size.
-     */
-    step: {
-      type: Number,
-      default: 1,
-    },
-
-    /**
-     * Set min value.
-     */
-    min: {
-      type: Number,
-      default: 1,
-    },
-
-    /**
-     * Set max value.
-     */
-    max: {
-      type: Number,
-      default: 999,
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["update:modelValue"],
-
-  computed: {
-    count: {
-      get() {
-        return this.modelValue;
-      },
-
-      set(value) {
-        this.$emit("update:modelValue", value);
-      },
-    },
-  },
-
-  methods: {
-    onClickMinus() {
-      const newCount = this.count - this.step;
-
-      this.count = newCount >= this.min ? newCount : this.count;
-    },
-
-    onClickPlus() {
-      const newCount = this.count + this.step;
-
-      this.count = newCount <= this.max ? newCount : this.count;
-    },
-  },
-};
-</script>
-
-<style lang="postcss" scoped>
-.mono-counter {
-  @apply flex items-center justify-between;
-  @apply space-x-3;
-
-  &-button {
-    @apply flex items-center justify-center;
-    @apply h-6 w-6 rounded-full;
-    @apply bg-gray-100;
-    @apply cursor-pointer;
-
-    &:hover {
-      @apply bg-gray-200;
-    }
-
-    &:active {
-      @apply bg-gray-300;
-    }
-  }
-
-  &-value {
-    @apply select-none text-sm font-normal;
-    -moz-user-select: -moz-none;
-    -o-user-select: none;
-    -khtml-user-select: none;
-    -webkit-user-select: none;
-  }
-}
-</style>