vueless 0.0.3 → 0.0.4

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

@@ -1,418 +0,0 @@
-<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="descriptionIconSize"
-              v-bind="iconUploadFileAttrs"
-            />
-
-            <div
-              v-bind="descriptionAttrs"
-              v-text="`${i18n.selectOrDragImage} ${allowedFilesForUpload}`"
-            />
-          </div>
-
-          <div v-bind="listAttrs">
-            <UFiles :options="filesList" v-bind="filesAttrs">
-              <template #right="file">
-                <UIcon
-                  :name="config.iconCloseName"
-                  interactive
-                  :size="size"
-                  color="gray"
-                  v-bind="iconCloseAttrs"
-                  @click="onClickDeleteFile(file)"
-                />
-              </template>
-            </UFiles>
-          </div>
-
-          <UButton
-            :label="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 "vueless/ui.image-icon";
-import UButton from "vueless/ui.button";
-
-import UIService, { getRandomId } from "vueless/service.ui";
-import I18nServiceDefault from "@vueless/services/i18n";
-
-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 { getTranslation } = new I18nServiceDefault();
-
-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 i18n = computed(() => {
-  return {
-    selectOrDragImage: getTranslation("selectOrDragImage"),
-    selectFile: getTranslation("selectFile"),
-    canAttachFilesFormat: getTranslation("canAttachFilesFormat"),
-    cannotAttachFilesStart: getTranslation("cannotAttachFilesStart"),
-    cannotAttachFilesEnd: getTranslation("cannotAttachFilesEnd"),
-  };
-});
-
-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 `${i18n.value.canAttachFilesFormat} ${allowedFormat}`;
-});
-
-const descriptionIconSize = computed(() => {
-  const size = {
-    sm: "md",
-    md: "lg",
-    lg: "xl",
-  };
-
-  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(", ");
-
-    errorMessage.value = `${i18n.value.cannotAttachFilesStart} ${error} ${i18n.value.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>
-
-<i18n>
-en:
-  selectOrDragImage: Select or drag file in this area.
-  canAttachFilesFormat: "You can attach files in the format:"
-  cannotAttachFilesStart: "Attaching files in"
-  cannotAttachFilesEnd: "format is not supported."
-  selectFile: Select file
-ru:
-  selectOrDragImage: Выберите или перетащите файл в это окно.
-  canAttachFilesFormat: "Вы можете прикрепить файлы в формате:"
-  cannotAttachFilesStart: "Прикрепление файлов в формате"
-  cannotAttachFilesEnd: "не поддерживается."
-  selectFile: Выберите файл
-ua:
-  selectOrDragImage: Оберіть або перетягніть файл в це вікно.
-  canAttachFilesFormat: "Ви можете прикріпити файли у форматі:"
-  cannotAttachFilesStart: "Прикріплення файлів у форматі"
-  cannotAttachFilesEnd: "не підтримується."
-  selectFile: Оберіть файл
-</i18n>

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

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

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

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

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

@@ -1,5 +0,0 @@
-/*
-  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

@@ -1,126 +0,0 @@
-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: {
-    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 };