vueless 0.0.4 → 0.0.5

package/src/ui.form-input-file/index.vue

@@ -0,0 +1,385 @@
+<template>
+  <div v-bind="wrapperAttrs">
+    <div v-if="!hasSlotContent(slots['default'])">
+      <ULabel
+        :label="props.label"
+        :description="props.description"
+        :align="labelAlign"
+        :error="errorMessage"
+        v-bind="labelAttrs"
+      >
+        <div :id="fileId" :data-cy="dataCy" v-bind="uploadAttrs">
+          <div v-if="!filesData.length" v-bind="blockAttrs">
+            <UIcon
+              :name="config.iconUploadFileName"
+              color="gray"
+              :size="componentSize"
+              v-bind="iconUploadFileAttrs"
+            />
+
+            <div
+              v-bind="descriptionAttrs"
+              v-text="`${config.i18n.selectOrDragImage} ${allowedFilesForUpload}`"
+            />
+          </div>
+
+          <div v-bind="listAttrs">
+            <UFiles :options="filesList" v-bind="filesAttrs">
+              <template #right="file">
+                <UIcon
+                  :name="config.iconCloseName"
+                  interactive
+                  :size="componentSize"
+                  color="gray"
+                  v-bind="iconCloseAttrs"
+                  @click="onClickDeleteFile(file)"
+                />
+              </template>
+            </UFiles>
+          </div>
+
+          <UButton
+            :label="config.i18n.selectFile"
+            :size="size"
+            variant="thirdary"
+            filled
+            :data-cy="`${dataCy}-upload`"
+            v-bind="buttonAttrs"
+            @click="onClickUploadFile"
+          />
+
+          <DragDrop :id="uppyId" :uppy="uppy" v-bind="uppyUploadAttrs" />
+        </div>
+      </ULabel>
+    </div>
+
+    <div v-else :id="fileId" :data-cy="dataCy" v-bind="uploadSlotAttrs" @click="onClickUploadFile">
+      <slot />
+
+      <DragDrop :id="uppyId" :uppy="uppy" v-bind="uppyUploadAttrs" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Uppy from "@uppy/core";
+import DragDrop from "@uppy/vue/src/drag-drop";
+
+import { computed, onBeforeUnmount, onMounted, ref, useSlots, watch } from "vue";
+
+import UIcon from "../ui.image-icon";
+import UButton from "../ui.button";
+
+import UIService, { getRandomId } from "../service.ui";
+
+import { UInputFile } from "./constants";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UInputFile" });
+
+const props = defineProps({
+  /**
+   * Set label.
+   */
+  label: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Set description.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Set label placement related from the default slot.
+   * @values topInside, top, left, right
+   */
+  labelOutside: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputFile).default.labelOutside,
+  },
+
+  /**
+   * Set files data.
+   */
+  files: {
+    type: Array,
+    default: () => [],
+  },
+
+  /**
+   * Selected files will be imported when a form will be submitted
+   */
+  local: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputFile).default.local,
+  },
+
+  /**
+   * Set max file size in megabytes.
+   */
+  maxFileSize: {
+    type: Number,
+    default: UIService.get(defaultConfig, UInputFile).default.maxFileSize,
+  },
+
+  /**
+   * Allow to select multiple files.
+   */
+  multiple: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputFile).default.multiple,
+  },
+
+  /**
+   * Set max number files for upload
+   */
+  maxFiles: {
+    type: Number,
+    default: UIService.get(defaultConfig, UInputFile).default.maxFiles,
+  },
+
+  /**
+   * Set allowed file types.
+   */
+  allowedFileTypes: {
+    type: Array,
+    default: () => UIService.get(defaultConfig, UInputFile).default.allowedFileTypes,
+  },
+
+  /**
+   * Set error text for component.
+   */
+  error: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Set size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UInputFile).default.size,
+  },
+
+  /**
+   * Generates unique element id.
+   * @ignore
+   */
+  id: {
+    type: String,
+    default: () => getRandomId(),
+  },
+
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const slots = useSlots();
+
+const emit = defineEmits(["changeFiles", "deleteFile"]);
+
+const filesData = ref([]);
+const selectedFiles = ref([]);
+const errorMessage = ref("");
+const dragOver = ref(false);
+const errorFilesTypes = ref([]);
+
+const {
+  config,
+  uploadAttrs,
+  buttonAttrs,
+  iconUploadFileAttrs,
+  iconCloseAttrs,
+  wrapperAttrs,
+  labelAttrs,
+  blockAttrs,
+  descriptionAttrs,
+  listAttrs,
+  uppyUploadAttrs,
+  uploadSlotAttrs,
+  filesAttrs,
+  hasSlotContent,
+} = useAttrs(props, { errorMessage, dragOver });
+
+const filesList = computed(() => {
+  return filesData.value.map((file) => {
+    return {
+      text: file.name,
+      id: file.id,
+    };
+  });
+});
+
+const labelAlign = computed(() => {
+  return props.labelOutside ? "top" : "topInside";
+});
+
+const fileId = computed(() => {
+  return `file-${props.id}`;
+});
+
+const uppyId = computed(() => {
+  return `uppy-${props.id}`;
+});
+
+const fileUpload = computed(() => {
+  return document.getElementById(fileId.value);
+});
+
+const uppyUpload = computed(() => {
+  return document.getElementById(uppyId.value);
+});
+
+const allowedFilesForUpload = computed(() => {
+  const allowedFormat = props.allowedFileTypes.join(", ");
+
+  return `${config.value.i18n.canAttachFilesFormat} ${allowedFormat}`;
+});
+
+const componentSize = computed(() => {
+  const size = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+  };
+
+  return size[props.size];
+});
+
+const maxFileSizeInBytes = computed(() => {
+  return props.maxFileSize * Math.pow(2, 20);
+});
+
+const maxFilesNumber = computed(() => {
+  return props.multiple ? props.maxFiles : 1;
+});
+
+const uppy = computed(() =>
+  new Uppy({
+    id: uppyId.value,
+    restrictions: {
+      maxFileSize: maxFileSizeInBytes,
+      maxNumberOfFiles: maxFilesNumber,
+      allowedFileTypes: props.allowedFileTypes,
+    },
+  }).on("restriction-failed", (file, error) => {
+    const isFile = errorFilesTypes.value.find((item) => item === file.extension);
+
+    if (error && !isFile) errorFilesTypes.value.push(`.${file.extension}`);
+  }),
+);
+
+watch(selectedFiles, onChangeSelectedFiles, { deep: true });
+watch(() => props.files, onChangeFiles, { deep: true });
+watch(errorFilesTypes, onChangeErrorFilesTypes, { deep: true });
+watch(() => props.error, onChangeError, { deep: true, immediate: true });
+
+onMounted(() => {
+  uppy.value.on("file-added", () => {
+    uploadFiles();
+  });
+
+  addEventListener("dragover", () => (dragOver.value = true));
+
+  if (uppyUpload.value) {
+    uppyUpload.value.addEventListener("dragover", onDragOver, true);
+    uppyUpload.value.addEventListener("dragleave", onDragLeave, true);
+  }
+});
+
+onBeforeUnmount(() => {
+  removeEventListener("dragover", () => (dragOver.value = true));
+  uppyUpload.value.removeEventListener("dragover", onDragOver, true);
+  uppyUpload.value.removeEventListener("dragleave", onDragLeave, true);
+});
+
+function onClickUploadFile() {
+  document.querySelector(`#${fileId.value} .uppy-Root button`).click();
+}
+
+function uploadFiles() {
+  const { files } = uppy.value.getState();
+
+  selectedFiles.value = Object.values(files);
+}
+
+function onDragOver() {
+  fileUpload.value.classList.add(config.fileUploadHover);
+}
+
+function onDragLeave() {
+  fileUpload.value.classList.remove(config.fileUploadHover);
+  dragOver.value = false;
+}
+
+function onChangeSelectedFiles() {
+  uppy.value.cancelAll();
+
+  const selectedFilesData = selectedFiles.value.map((file) => {
+    file.data.id = getRandomId();
+
+    return file.data;
+  });
+
+  if (!props.error && errorMessage.value) {
+    errorMessage.value = "";
+    errorFilesTypes.value = [];
+  }
+
+  if (props.local) filesData.value = selectedFilesData;
+
+  emit("changeFiles", selectedFilesData);
+}
+
+function onChangeFiles() {
+  filesData.value = props.files;
+
+  if (!props.error && errorMessage.value) {
+    errorMessage.value = "";
+    errorFilesTypes.value = [];
+  }
+
+  onDragLeave();
+}
+
+function onChangeError() {
+  errorMessage.value = props.error;
+}
+
+function onChangeErrorFilesTypes() {
+  if (errorFilesTypes.value.length) {
+    let error = errorFilesTypes.value.join(", ");
+    const localization = config.value.i18n;
+
+    errorMessage.value = `${localization.cannotAttachFilesStart} ${error} ${localization.cannotAttachFilesEnd}`;
+  }
+}
+
+function onClickDeleteFile(data) {
+  const index = filesData.value.findIndex((file) => file.id === data.file.id);
+
+  if (~index) {
+    filesData.value.splice(index, 1);
+
+    uppy.value.removeFile(data.file.id);
+
+    emit("deleteFile", data.file.id);
+
+    if (props.local) emit("changeFiles", filesData.value);
+  }
+}
+</script>

package/src/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 "../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/src/ui.form-input-money/composables/attrs.composable.js

@@ -0,0 +1,13 @@
+import useUI from "../../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/src/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/src/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/src/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/src/ui.form-input-money/index.stories.js

@@ -0,0 +1,126 @@
+import { getArgTypes, getSlotNames } from "../service.storybook";
+
+import UInputMoney from "../ui.form-input-money";
+import URow from "../ui.container-row";
+import UGroup from "../ui.container-group";
+
+export default {
+  id: "3030",
+  title: "Form Inputs & Controls / Input Money",
+  component: UInputMoney,
+  args: {
+    label: "Label",
+    inputValue: 245000.42,
+  },
+  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.inputValue"
+    >
+      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
+        <template v-if="args[slot]">{{ args[slot] }}</template>
+      </template>
+    </UInputMoney>
+  `,
+});
+
+const SizesTemplate = (args, { argTypes } = {}) => ({
+  components: { UInputMoney, URow },
+  setup() {
+    return {
+      args,
+      sizes: argTypes.size.options,
+    };
+  },
+  template: `
+    <URow>
+      <UInputMoney
+        v-for="(size, index) in sizes"
+        v-bind="args"
+        :size="size"
+        :key="index"
+      />
+    </URow>
+  `,
+});
+
+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 Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const sizes = SizesTemplate.bind({});
+sizes.args = {};
+
+export const symbol = DefaultTemplate.bind({});
+symbol.args = { symbol: "€" };
+
+export const labelOutside = LabelPlacementTemplate.bind({});
+labelOutside.args = {};
+
+export const placeholder = DefaultTemplate.bind({});
+placeholder.args = { placeholder: "Placeholder" };
+
+export const error = DefaultTemplate.bind({});
+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 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 };