vueless 0.0.1

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

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

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

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

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

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

@@ -0,0 +1,107 @@
+import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+
+import UInputRating from "vueless/ui.form-input-rating";
+import URow from "vueless/ui.container-row";
+
+export default {
+  title: "Form Inputs & Controls / Input Rating",
+  component: UInputRating,
+  args: {
+    label: "Label",
+    value: 2,
+  },
+  argTypes: {
+    ...getArgTypes(UInputRating.name),
+  },
+};
+
+const DefaultTemplate = (args) => ({
+  components: { UInputRating },
+  setup() {
+    const slots = getSlotNames(UInputRating.name);
+
+    return { args, slots };
+  },
+  template: `
+    <UInputRating
+      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>
+
+    </UInputRating>
+  `,
+});
+
+const SlotTemplate = (args) => ({
+  components: { UInputRating },
+  setup() {
+    return { args };
+  },
+  template: `
+    <UInputRating
+      v-bind="args"
+      v-model="args.value"
+    >
+      ${args.slotTemplate}
+    </UInputRating>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes }) => ({
+  components: { UInputRating, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <UInputRating
+        v-for="(size, index) in sizes"
+        :size="size"
+        :key="index"
+        v-bind="args"
+      />
+    </URow>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const selectable = DefaultTemplate.bind({});
+selectable.args = { selectable: true };
+
+export const starsNumber = DefaultTemplate.bind({});
+starsNumber.args = { value: 4, starsNumber: 7 };
+
+export const error = DefaultTemplate.bind({});
+error.args = { error: "some error" };
+
+export const withoutCounter = DefaultTemplate.bind({});
+withoutCounter.args = { withCounter: false };
+
+export const slotCounter = SlotTemplate.bind({});
+slotCounter.args = {
+  slotTemplate: `
+    <template #counter>
+      some counter
+    </template>
+  `,
+};
+
+export const slotRight = SlotTemplate.bind({});
+slotRight.args = {
+  slotTemplate: `
+    <template #right>
+      🤘🤘🤘
+    </template>
+  `,
+};