vueless 0.0.569 → 0.0.571

package/ui.form-input/types.ts

@@ -0,0 +1,103 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export type IconSize = "xs" | "sm" | "md";
+
+export interface UInputProps {
+  /**
+   * Input value.
+   */
+  modelValue?: string | number;
+
+  /**
+   * Input label.
+   */
+  label?: string;
+
+  /**
+   * Label placement.
+   */
+  labelAlign?: "top" | "topInside" | "topWithDesc" | "left" | "right";
+
+  /**
+   * Input placeholder.
+   */
+  placeholder?: string;
+
+  /**
+   * Input description.
+   */
+  description?: string;
+
+  /**
+   * Error message.
+   */
+  error?: string;
+
+  /**
+   * Input size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Left icon name.
+   */
+  leftIcon?: string;
+
+  /**
+   * Right icon name.
+   */
+  rightIcon?: string;
+
+  /**
+   * Maximum character length.
+   */
+  maxLength?: string | number;
+
+  /**
+   * Prevents some characters from input.
+   * You can use predefined values or own RegExp.
+   */
+  validationRule?: "symbol" | "string" | "stringAndNumber" | "number" | "integer";
+
+  /**
+   * Input type.
+   */
+  type?: "text" | "number" | "tel" | "email" | "url" | "search" | "password";
+
+  /**
+   * Set specific keyboard for mobile devices.
+   */
+  inputmode?: "text" | "decimal" | "numeric" | "tel" | "email" | "url" | "search" | "none";
+
+  /**
+   * Make input read-only.
+   */
+  readonly?: boolean;
+
+  /**
+   * Disable the input.
+   */
+  disabled?: boolean;
+
+  /**
+   * Disable browsers autocomplete.
+   */
+  noAutocomplete?: boolean;
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: Config;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.form-input/useAttrs.ts

@@ -0,0 +1,31 @@
+import { computed } from "vue";
+import useUI from "../composables/useUI.ts";
+
+import defaultConfig from "./config.ts";
+
+import type { ComputedRef } from "vue";
+import type { UseAttrs } from "../types.ts";
+import type { UInputProps, Config } from "./types.ts";
+
+type ComponentState = {
+  applyPasswordClasses: ComputedRef<boolean>;
+};
+
+export default function useAttrs(
+  props: UInputProps,
+  { applyPasswordClasses }: ComponentState,
+): UseAttrs<Config> {
+  const { config, getKeysAttrs } = useUI<Config>(defaultConfig, () => props.config);
+
+  const mutatedProps = computed(() => ({
+    error: Boolean(props.error),
+    label: Boolean(props.label),
+    /* component state, not a props */
+    typePassword: applyPasswordClasses.value,
+  }));
+
+  return {
+    config,
+    ...getKeysAttrs(mutatedProps),
+  };
+}

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

@@ -1,92 +1,4 @@
-<template>
-  <ULabel
-    :for="elementId"
-    :size="size"
-    :label="label"
-    :error="error"
-    :align="labelAlign"
-    :disabled="disabled"
-    :description="description"
-    v-bind="inputLabelAttrs"
-  >
-    <div ref="dropZoneRef" :ondrop="onDrop" v-bind="dropzoneAttrs">
-      <UText v-if="hasSlotContent($slots['top'])" :size="size" v-bind="descriptionTopAttrs">
-        <!-- @slot Use it to add something above the component content. -->
-        <slot name="top" />
-      </UText>
-
-      <div v-bind="contentAttrs">
-        <!-- @slot Use it to add something before the placeholder. -->
-        <slot name="left" />
-
-        <span v-if="!isValue" v-bind="placeholderAttrs" v-text="currentLocale.noFile" />
-
-        <UFiles
-          :size="size"
-          v-bind="fileListAttrs"
-          :file-list="fileList"
-          :removable="multiple && !disabled"
-          @remove="onClickRemoveItem"
-        >
-          <template #right="{ file }">
-            <slot name="right" :file="file" />
-          </template>
-        </UFiles>
-
-        <div v-bind="buttonsAttrs">
-          <template v-if="Array.isArray(currentFiles) || !currentFiles">
-            <UButton
-              filled
-              no-ring
-              :for="elementId"
-              tag="label"
-              variant="thirdary"
-              :size="buttonSize"
-              :right-icon="config.defaults.chooseFileIcon"
-              :label="currentLocale.uploadFile"
-              :disabled="disabled"
-              v-bind="chooseFileButtonAttrs"
-              :data-test="`${dataTest}-upload`"
-            />
-
-            <input
-              :id="elementId"
-              ref="fileInputRef"
-              type="file"
-              :disabled="disabled"
-              :accept="accept"
-              :multiple="multiple"
-              v-bind="inputAttrs"
-              @change="onChangeFile"
-            />
-          </template>
-
-          <UButton
-            v-if="isValue && !disabled"
-            round
-            square
-            filled
-            no-ring
-            variant="thirdary"
-            :size="buttonSize"
-            :disabled="disabled"
-            :left-icon="config.defaults.clearIcon"
-            v-bind="clearButtonAttrs"
-            :data-test="`${dataTest}-clear`"
-            @click="onClickResetFiles"
-          />
-        </div>
-      </div>
-
-      <UText v-if="hasSlotContent($slots['bottom'])" :size="size" v-bind="descriptionBottomAttrs">
-        <!-- @slot Use it to add something below the component content. -->
-        <slot name="bottom" />
-      </UText>
-    </div>
-  </ULabel>
-</template>
-
-<script setup>
+<script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, useId } from "vue";
 import { merge } from "lodash-es";
 
@@ -97,120 +9,27 @@ import UFiles from "../ui.text-files/UFiles.vue";
 
 import { getDefault } from "../utils/ui.ts";
 import { hasSlotContent } from "../utils/helper.ts";
-import { useLocale } from "../composables/useLocale.ts";
-
-import useAttrs from "./useAttrs.js";
-import { getFileMbSize } from "./utilFileForm.js";
-import { UInputFile } from "./constants.js";
-import defaultConfig from "./config.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Input value.
-   */
-  modelValue: {
-    type: [Array, File],
-    default: null,
-  },
-
-  /**
-   * Input label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Input description.
-   */
-  description: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Error message.
-   */
-  error: {
-    type: String,
-    default: "",
-  },
+import { getFileMbSize } from "./utilFileForm.ts";
 
-  /**
-   * Label placement.
-   * @values top, topInside, topWithDesc
-   */
-  labelAlign: {
-    type: String,
-    default: getDefault(defaultConfig, UInputFile).labelAlign,
-  },
-
-  /**
-   * Input size.
-   * @values sm, md, lg
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UInputFile).size,
-  },
-
-  /**
-   * Max file size in megabytes.
-   */
-  maxFileSize: {
-    type: Number,
-    default: getDefault(defaultConfig, UInputFile).maxFileSize,
-  },
+import useAttrs from "./useAttrs.ts";
+import { useLocale } from "../composables/useLocale.ts";
 
-  /**
-   * Allowed file types.
-   */
-  allowedFileTypes: {
-    type: Array,
-    default: () => getDefault(defaultConfig, UInputFile).allowedFileTypes,
-  },
+import { UInputFile } from "./constants.ts";
+import defaultConfig from "./config.ts";
 
-  /**
-   * Allow selecting multiple files.
-   */
-  multiple: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UInputFile).multiple,
-  },
+import type { UInputFileProps, ButtonSize } from "./types.ts";
 
-  /**
-   * Disable the input.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UInputFile).disabled,
-  },
-
-  /**
-   * Unique element id.
-   */
-  id: {
-    type: String,
-    default: "",
-  },
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
+defineOptions({ inheritAttrs: false });
 
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
+const props = withDefaults(defineProps<UInputFileProps>(), {
+  labelAlign: getDefault<UInputFileProps>(defaultConfig, UInputFile).labelAlign,
+  size: getDefault<UInputFileProps>(defaultConfig, UInputFile).size,
+  maxFileSize: getDefault<UInputFileProps>(defaultConfig, UInputFile).maxFileSize,
+  allowedFileTypes: getDefault<UInputFileProps>(defaultConfig, UInputFile).allowedFileTypes,
+  multiple: getDefault<UInputFileProps>(defaultConfig, UInputFile).multiple,
+  disabled: getDefault<UInputFileProps>(defaultConfig, UInputFile).disabled,
+  dataTest: "",
+  config: () => ({}),
 });
 
 const emit = defineEmits([
@@ -229,8 +48,8 @@ const emit = defineEmits([
 
 const { tm } = useLocale();
 
-const dropZoneRef = ref(null);
-const fileInputRef = ref(null);
+const dropZoneRef = ref<HTMLDivElement | null>(null);
+const fileInputRef = ref<HTMLInputElement | null>(null);
 
 const elementId = props.id || useId();
 
@@ -252,7 +71,7 @@ const {
 const i18nGlobal = tm(UInputFile);
 const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
-const currentFiles = computed({
+const currentFiles = computed<File | File[] | null>({
   get: () => props.modelValue,
   set: (newValue) => {
     const fallbackValue = props.multiple ? [] : null;
@@ -297,44 +116,49 @@ const buttonSize = computed(() => {
     lg: "md",
   };
 
-  return sizes[props.size];
+  return sizes[props.size] as ButtonSize;
 });
 
 onMounted(() => {
-  dropZoneRef.value.addEventListener("dragover", onDragOver);
-  dropZoneRef.value.addEventListener("dragleave", onDragLeave);
+  if (dropZoneRef.value) {
+    dropZoneRef.value.addEventListener("dragover", onDragOver);
+    dropZoneRef.value.addEventListener("dragleave", onDragLeave);
+  }
 });
 
 onBeforeUnmount(() => {
-  dropZoneRef.value.removeEventListener("dragover", onDragOver);
-  dropZoneRef.value.removeEventListener("dragleave", onDragLeave);
+  if (dropZoneRef.value) {
+    dropZoneRef.value.removeEventListener("dragover", onDragOver);
+    dropZoneRef.value.removeEventListener("dragleave", onDragLeave);
+  }
 });
 
-watch(
-  () => props.multiple,
-  () => {
-    if (!props.multiple && Array.isArray(currentFiles.value)) {
-      currentFiles.value = currentFiles.value[0];
-    }
+watch(() => props.multiple, normalizeFilesForMultipleMode);
 
-    if (props.multiple && !Array.isArray(currentFiles.value)) {
-      currentFiles.value = currentFiles.value ? [currentFiles.value] : [];
-    }
-  },
-);
+function normalizeFilesForMultipleMode() {
+  if (!props.multiple) return;
+
+  if (!Array.isArray(currentFiles.value)) {
+    currentFiles.value = currentFiles.value ? [currentFiles.value] : [];
+  }
+}
 
-function removeDuplicates(files) {
-  return files.filter((file) => !fileList.value.find((item) => item.name === file.name));
+function removeDuplicates(files: File[]) {
+  return files.filter(
+    (file) =>
+      file instanceof File &&
+      !fileList.value.some((item) => item instanceof File && item.name === file.name),
+  );
 }
 
-function validate(file) {
+function validate(file: File) {
   const targetFileSize = getFileMbSize(file);
 
   const isValidType = extensionNames.value.length
     ? extensionNames.value.some((item) => file.type.includes(item))
     : true;
 
-  const isValidSize = targetFileSize <= props.maxFileSize;
+  const isValidSize = Number(targetFileSize) <= props.maxFileSize;
 
   if (!isValidSize && props.maxFileSize) {
     currentError.value = currentLocale.value.sizeError;
@@ -345,20 +169,37 @@ function validate(file) {
   }
 }
 
-function onChangeFile(event) {
-  validate(event.target.files[0]);
+function onChangeFile(event: Event) {
+  const target = event.target as HTMLInputElement | null;
 
-  if (currentError.value) {
-    onClickResetFiles();
+  if (target && target.files) {
+    const file = target.files[0];
 
-    return;
-  }
+    validate(file);
 
-  currentFiles.value = props.multiple
-    ? [...(currentFiles.value || []), ...removeDuplicates(Array.from(event.target.files))]
-    : Array.from(event.target.files).at(0);
+    if (currentError.value) {
+      onClickResetFiles();
 
-  if (fileInputRef.value) fileInputRef.value.value = "";
+      return;
+    }
+
+    if (props.multiple) {
+      if (!Array.isArray(currentFiles.value)) {
+        currentFiles.value = currentFiles.value instanceof File ? [currentFiles.value] : [];
+      }
+
+      currentFiles.value = [
+        ...currentFiles.value,
+        ...removeDuplicates(
+          Array.from(target.files).filter((file): file is File => file instanceof File),
+        ),
+      ];
+    } else {
+      currentFiles.value = file instanceof File ? file : null;
+    }
+
+    if (fileInputRef.value) fileInputRef.value.value = "";
+  }
 }
 
 function onClickResetFiles() {
@@ -367,32 +208,39 @@ function onClickResetFiles() {
   if (fileInputRef.value) fileInputRef.value.value = "";
 }
 
-function onDragOver(event) {
+function onDragOver(event: DragEvent) {
   event.preventDefault();
 
-  dropZoneRef.value.classList.add(...config.value.dropzoneHover.split(" "));
+  if (dropZoneRef.value && config.value && config.value.dropzoneHover) {
+    dropZoneRef.value.classList.add(...config.value.dropzoneHover.split(" "));
+  }
 }
 
-function onDragLeave(event) {
+function onDragLeave(event: DragEvent) {
   event.preventDefault();
 
-  dropZoneRef.value.classList.remove(...config.value.dropzoneHover.split(" "));
+  if (dropZoneRef.value && config.value && config.value.dropzoneHover) {
+    dropZoneRef.value.classList.remove(...config.value.dropzoneHover.split(" "));
+  }
 }
 
-function onDrop(event) {
+function onDrop(event: DragEvent) {
   event.preventDefault();
 
-  let targetFiles = null;
+  let targetFiles: (File | null)[] = [];
 
-  if (event.dataTransfer.items) {
+  if (event.dataTransfer && event.dataTransfer.items) {
     targetFiles = [...event.dataTransfer.items]
       .filter((item) => item.kind === "file")
-      .map((item) => item.getAsFile());
-  } else {
+      .map((item) => item.getAsFile())
+      .filter((file): file is File => !file);
+  } else if (event.dataTransfer && event.dataTransfer.files) {
     targetFiles = [...event.dataTransfer.files];
   }
 
-  if (targetFiles.length) targetFiles.forEach(validate);
+  if (targetFiles.length) {
+    targetFiles.filter((file): file is File => !file).forEach(validate);
+  }
 
   nextTick(() => {
     if (currentError.value || !targetFiles.length) {
@@ -401,13 +249,108 @@ function onDrop(event) {
       return;
     }
 
+    const validFiles = targetFiles.filter((file): file is File => !file);
+
     currentFiles.value = props.multiple
-      ? [...(currentFiles.value || []), ...removeDuplicates(targetFiles)]
-      : targetFiles[0];
+      ? [
+          ...(Array.isArray(currentFiles.value) ? currentFiles.value : []),
+          ...removeDuplicates(validFiles),
+        ]
+      : validFiles[0];
   });
 }
 
-function onClickRemoveItem(id) {
-  currentFiles.value = currentFiles.value?.filter((file) => file.name !== id);
+function onClickRemoveItem(id: string | number) {
+  if (Array.isArray(currentFiles.value)) {
+    currentFiles.value = currentFiles.value.filter((file) => file.name !== id);
+  }
 }
 </script>
+
+<template>
+  <ULabel
+    :for="elementId"
+    :size="size"
+    :label="label"
+    :error="error"
+    :align="labelAlign"
+    :disabled="disabled"
+    :description="description"
+    v-bind="inputLabelAttrs"
+  >
+    <div ref="dropZoneRef" :ondrop="onDrop" v-bind="dropzoneAttrs">
+      <UText v-if="hasSlotContent($slots['top'])" :size="size" v-bind="descriptionTopAttrs">
+        <!-- @slot Use it to add something above the component content. -->
+        <slot name="top" />
+      </UText>
+
+      <div v-bind="contentAttrs">
+        <!-- @slot Use it to add something before the placeholder. -->
+        <slot name="left" />
+
+        <span v-if="!isValue" v-bind="placeholderAttrs" v-text="currentLocale.noFile" />
+
+        <UFiles
+          :size="size"
+          v-bind="fileListAttrs"
+          :file-list="fileList"
+          :removable="multiple && !disabled"
+          @remove="onClickRemoveItem"
+        >
+          <template #right="{ file }">
+            <slot name="right" :file="file" />
+          </template>
+        </UFiles>
+
+        <div v-bind="buttonsAttrs">
+          <template v-if="Array.isArray(currentFiles) || !currentFiles">
+            <UButton
+              filled
+              no-ring
+              :for="elementId"
+              tag="label"
+              variant="thirdary"
+              :size="buttonSize"
+              :right-icon="config.defaults?.chooseFileIcon"
+              :label="currentLocale.uploadFile"
+              :disabled="disabled"
+              v-bind="chooseFileButtonAttrs"
+              :data-test="`${dataTest}-upload`"
+            />
+
+            <input
+              :id="elementId"
+              ref="fileInputRef"
+              type="file"
+              :disabled="disabled"
+              :accept="accept"
+              :multiple="multiple"
+              v-bind="inputAttrs"
+              @change="onChangeFile"
+            />
+          </template>
+
+          <UButton
+            v-if="isValue && !disabled"
+            round
+            square
+            filled
+            no-ring
+            variant="thirdary"
+            :size="buttonSize"
+            :disabled="disabled"
+            :left-icon="config.defaults?.clearIcon"
+            v-bind="clearButtonAttrs"
+            :data-test="`${dataTest}-clear`"
+            @click="onClickResetFiles"
+          />
+        </div>
+      </div>
+
+      <UText v-if="hasSlotContent($slots['bottom'])" :size="size" v-bind="descriptionBottomAttrs">
+        <!-- @slot Use it to add something below the component content. -->
+        <slot name="bottom" />
+      </UText>
+    </div>
+  </ULabel>
+</template>

package/ui.form-input-file/storybook/Docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../../utils/storybook.ts";
 
-import * as stories from "./stories.js";
-import defaultConfig from "../config.js?raw"
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
 
 <Meta of={stories} />
 <Title of={stories} />