vueless 0.0.2 → 0.0.3

package/ui.form-input-money/Docs.mdx

@@ -0,0 +1,16 @@
+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-money/composables/attrs.composable.js

@@ -0,0 +1,13 @@
+import useUI from "vueless/composable.ui";
+
+import defaultConfig from "../configs/default.config";
+
+export default function useAttrs(props) {
+  const { getAttrs } = useUI(defaultConfig, () => props.config);
+
+  const inputAttrs = getAttrs("input", { isComponent: true });
+
+  return {
+    inputAttrs,
+  };
+}

package/ui.form-input-money/composables/useFormatCurrency.js

@@ -0,0 +1,82 @@
+import { onMounted, nextTick, ref, onBeforeUnmount, toValue, watch } from "vue";
+
+import FormatService from "../services/format.service";
+
+export default function useFormatCurrency(elementId, options) {
+  let prevValue = "";
+  let inputElement = null;
+
+  const formattedValue = ref("");
+  const rawValue = ref("");
+
+  // update value according to updated options
+  watch(
+    () => toValue(options),
+    () => setValue(formattedValue.value),
+    { deep: true },
+  );
+
+  onMounted(() => {
+    inputElement = document.querySelector(elementId);
+    inputElement.addEventListener("input", onInput);
+
+    onInput(formattedValue.value);
+  });
+
+  onBeforeUnmount(() => {
+    inputElement.removeEventListener("input", onInput);
+  });
+
+  // Use to set input value manually
+  function setValue(value) {
+    const localFormattedValue = FormatService.getFormattedValue(value, toValue(options));
+
+    formattedValue.value = localFormattedValue;
+    rawValue.value = FormatService.getRawValue(localFormattedValue, toValue(options));
+
+    prevValue = formattedValue.value;
+  }
+
+  async function onInput(event) {
+    if (!event.target) return;
+
+    await nextTick(async () => {
+      let cursorStart = inputElement.selectionStart;
+      let cursorEnd = inputElement.selectionEnd;
+
+      const hasValueInputValue = cursorEnd === 1 && cursorStart === 1;
+      const value = event.target ? event.target.value : "";
+
+      const localFormattedValue = FormatService.getFormattedValue(value, toValue(options));
+
+      const currentValueOffsetLength = localFormattedValue
+        .split("")
+        .filter((value) => value === toValue(options).thousandsSeparator).length;
+
+      const prevValueOffsetLength = prevValue
+        .split("")
+        .filter((value) => value === toValue(options).thousandsSeparator).length;
+
+      const prefixLength = toValue(options).prefix.length;
+      const offset = currentValueOffsetLength - prevValueOffsetLength;
+
+      formattedValue.value = localFormattedValue || toValue(options).prefix;
+      rawValue.value = FormatService.getRawValue(localFormattedValue, toValue(options));
+
+      await nextTick(() => {
+        if (localFormattedValue.length === cursorEnd) return;
+
+        if (hasValueInputValue && prefixLength) {
+          cursorStart += prefixLength;
+          cursorEnd += prefixLength;
+        }
+
+        inputElement.setSelectionRange(cursorStart + offset, cursorEnd + offset);
+      });
+
+      prevValue = formattedValue.value;
+    });
+  }
+
+  return { rawValue, formattedValue, setValue };
+}

package/ui.form-input-money/configs/default.config.js

@@ -0,0 +1,16 @@
+export default /*tw*/ {
+  input: "",
+  defaultVariants: {
+    symbol: "$",
+    size: "md",
+    decimalScale: 2,
+    decimalSeparator: ",",
+    thousandsSeparator: " ",
+    labelOutside: false,
+    positiveOnly: false,
+    rawValuePrefix: false,
+    minus: false,
+    readonly: false,
+    disabled: false,
+  },
+};

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

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UInputMoney = "UInputMoney";

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

@@ -2,12 +2,15 @@ import { getArgTypes, getSlotNames } from "vueless/service.storybook";
 
 import UInputMoney from "vueless/ui.form-input-money";
 import URow from "vueless/ui.container-row";
+import UGroup from "vueless/ui.container-group";
 
 export default {
+  id: "3030",
   title: "Form Inputs & Controls / Input Money",
   component: UInputMoney,
   args: {
-    value: "",
+    label: "Label",
+    inputValue: 245000.42,
   },
   argTypes: {
     ...getArgTypes(UInputMoney.name),
@@ -24,7 +27,7 @@ const DefaultTemplate = (args) => ({
   template: `
     <UInputMoney
       v-bind="args"
-      v-model="args.value"
+      v-model="args.inputValue"
     >
       <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
         <template v-if="args[slot]">{{ args[slot] }}</template>
@@ -33,66 +36,91 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const VariantsTemplate = (args, { argTypes }) => ({
+const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { UInputMoney, URow },
   setup() {
     return {
       args,
-      variants: argTypes.type.options,
+      sizes: argTypes.size.options,
     };
   },
   template: `
     <URow>
-      <div v-for="(variant, index) in variants" :key="index">
-        <UInputMoney
-          :type="variant"
-          v-bind="args"
-        />
-      </div>
+      <UInputMoney
+        v-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        :key="index"
+      />
     </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",
-    },
+const LabelPlacementTemplate = (args) => ({
+  components: { UInputMoney, UGroup },
+  setup() {
+    return {
+      args,
+    };
   },
-};
+  template: `
+    <UGroup size="lg">
+      <UInputMoney
+        v-bind="args"
+        :label-outside="true"
+        label="top"
+      />
+
+      <UInputMoney
+        v-bind="args"
+        :label-outside="false"
+        label="topInside"
+      />
+    </UGroup>
+  `,
+});
 
-export const type = VariantsTemplate.bind({});
-type.args = {};
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const symbol = DefaultTemplate.bind({});
+symbol.args = { symbol: "€" };
 
-export const separatedInitialCurrency = DefaultTemplate.bind({});
-separatedInitialCurrency.args = { type: "convertible", separatedInitialCurrency: true };
+export const labelOutside = LabelPlacementTemplate.bind({});
+labelOutside.args = {};
 
-export const hideLabel = DefaultTemplate.bind({});
-hideLabel.args = { hideLabel: true };
+export const placeholder = DefaultTemplate.bind({});
+placeholder.args = { placeholder: "Placeholder" };
 
 export const error = DefaultTemplate.bind({});
-error.args = { error: "some error" };
+error.args = { error: "Some error." };
+
+export const description = DefaultTemplate.bind({});
+description.args = { description: "Some description." };
+
+export const decimalScale = DefaultTemplate.bind({});
+decimalScale.args = { decimalScale: 4 };
+
+export const decimalSeparator = DefaultTemplate.bind({});
+decimalSeparator.args = { decimalSeparator: "." };
+
+export const thousandsSeparator = DefaultTemplate.bind({});
+thousandsSeparator.args = { thousandsSeparator: "-" };
+
+export const rawValuePrefix = DefaultTemplate.bind({});
+rawValuePrefix.args = { rawValuePrefix: true };
 
 export const positiveOnly = DefaultTemplate.bind({});
 positiveOnly.args = { positiveOnly: true };
 
-export const withMinus = DefaultTemplate.bind({});
-withMinus.args = { withMinus: true };
+export const minus = DefaultTemplate.bind({});
+minus.args = { minus: true };
+
+export const readOnly = DefaultTemplate.bind({});
+readOnly.args = { readOnly: true };
+
+export const disabled = DefaultTemplate.bind({});
+disabled.args = { disabled: true };