vueless 0.0.102 → 0.0.104

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.102",
+  "version": "0.0.104",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.container-modal-confirm/index.vue

@@ -169,7 +169,8 @@ const isShownModal = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
-const currentLocale = computed(() => merge(tm("UModalConfirm"), props.config.i18n));
+const i18nGlobal = tm(UModalConfirm);
+const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
 function closeModal() {
   isShownModal.value = false;

package/ui.data-list/index.vue

@@ -218,7 +218,8 @@ const {
 } = useAttrs(props);
 const { tm } = useLocale();
 
-const currentLocale = computed(() => merge(tm("UDataList"), props.config.i18n));
+const i18nGlobal = tm(UDataListName);
+const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
 function onDragMove(event) {
   const isDisabledNestingItem = event.draggedContext.element.isDisabledNesting;

package/ui.data-table/index.vue

@@ -427,7 +427,8 @@ const isFooterSticky = computed(
     isCheckedMoreOneTableItems.value,
 );
 
-const currentLocale = computed(() => merge(tm("UTable"), props.config.i18n));
+const i18nGlobal = tm(UTable);
+const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
 const normalizedColumns = computed(() => TableService.normalizeColumns(props.columns));
 

package/ui.dropdown-list/index.vue

@@ -242,7 +242,8 @@ const { tm } = useLocale();
 
 defineExpose({ pointerSet, pointerBackward, pointerForward, pointerReset, addPointerElement });
 
-const currentLocale = computed(() => merge(tm("UDropdownList"), props.config.i18n));
+const i18nGlobal = tm(UDropdownList);
+const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
 const addOptionKeyCombination = computed(() => {
   return isMac ? "(⌘ + Enter)" : "(Ctrl + Enter)";

package/ui.form-calendar/index.vue

@@ -348,7 +348,8 @@ const isCurrentView = computed(() => ({
   year: currentView.value === VIEW.year,
 }));
 
-const currentLocale = computed(() => merge(tm("UCalendar"), props.config.i18n));
+const i18nGlobal = tm(UCalendar);
+const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
 const locale = computed(() => {
   const { months, weekdays } = currentLocale.value;
@@ -370,13 +371,15 @@ const locale = computed(() => {
 const userFormatLocale = computed(() => {
   const { months, weekdays } = currentLocale.value;
 
-  const monthsLonghand = props.config.i18n?.months?.userFormat
-    ? months.userFormat
-    : months.longhand;
+  const monthsLonghand =
+    Boolean(props.config.i18n?.months?.userFormat) || Boolean(i18nGlobal?.months?.userFormat)
+      ? months.userFormat
+      : months.longhand;
 
-  const weekdaysLonghand = props.config.i18n?.weekdays?.userFormat
-    ? weekdays.userFormat
-    : weekdays.longhand;
+  const weekdaysLonghand =
+    Boolean(props.config.i18n?.weekdays?.userFormat) || Boolean(i18nGlobal?.weekdays?.userFormat)
+      ? weekdays.userFormat
+      : weekdays.longhand;
 
   // formatted locale
   return {

package/ui.form-date-picker/index.vue

@@ -259,7 +259,8 @@ function onBlur(event) {
 function formatUserDate(data) {
   if (props.dateFormat !== STANDARD_USER_FORMAT) return data;
 
-  const currentLocale = merge(tm("UDatePicker"), props.config.i18n);
+  const i18nGlobal = tm(UDatePicker);
+  const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
   let prefix = "";
   const formattedDate = data.charAt(0).toUpperCase() + data.toLowerCase().slice(1);
@@ -273,15 +274,15 @@ function formatUserDate(data) {
   const isTomorrow = isSameDay(addDays(today, 1), selectedDate);
 
   if (isToday) {
-    prefix = currentLocale.today;
+    prefix = currentLocale.value.today;
   }
 
   if (isYesterday) {
-    prefix = currentLocale.yesterday;
+    prefix = currentLocale.value.yesterday;
   }
 
   if (isTomorrow) {
-    prefix = currentLocale.tomorrow;
+    prefix = currentLocale.value.tomorrow;
   }
 
   return prefix ? `${prefix}, ${formattedDateWithoutDay}` : formattedDate;

package/ui.form-date-picker-range/index.vue

@@ -432,8 +432,10 @@ const localValue = computed({
 });
 
 const { isMobileBreakpoint } = useBreakpoint();
+const i18nGlobal = tm(UDatePickerRange);
+
 const rangeInputName = computed(() => `rangeInput-${props.id}`);
-const currentLocale = computed(() => merge(tm("UDatePickerRange"), props.config.i18n));
+const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
 const locale = computed(() => {
   const { months, weekdays } = currentLocale.value;
@@ -455,13 +457,15 @@ const locale = computed(() => {
 const userFormatLocale = computed(() => {
   const { months, weekdays } = currentLocale.value;
 
-  const monthsLonghand = props.config.i18n?.months?.userFormat
-    ? months.userFormat
-    : months.longhand;
+  const monthsLonghand =
+    Boolean(props.config.i18n?.months?.userFormat) || Boolean(i18nGlobal?.months?.userFormat)
+      ? months.userFormat
+      : months.longhand;
 
-  const weekdaysLonghand = props.config.i18n?.weekdays?.userFormat
-    ? weekdays.userFormat
-    : weekdays.longhand;
+  const weekdaysLonghand =
+    Boolean(props.config.i18n?.weekdays?.userFormat) || Boolean(i18nGlobal?.weekdays?.userFormat)
+      ? weekdays.userFormat
+      : weekdays.longhand;
 
   // formatted locale
   return {

package/ui.form-input-file/composables/attrs.composable.js

@@ -6,7 +6,7 @@ import defaultConfig from "../configs/default.config";
 
 export function useAttrs(props) {
   const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { dropzoneWrapper, placeholder } = config.value;
+  const { dropzoneWrapper, placeholder, selectedItem } = config.value;
 
   const cvaDropzoneWrapper = cva({
     base: dropzoneWrapper.base,
@@ -20,6 +20,12 @@ export function useAttrs(props) {
     compoundVariants: placeholder.compoundVariants,
   });
 
+  const cvaSelectedItem = cva({
+    base: selectedItem.base,
+    variants: selectedItem.variants,
+    compoundVariants: selectedItem.compoundVariants,
+  });
+
   const dropzoneWrapperClasses = computed(() =>
     cvaDropzoneWrapper({
       error: Boolean(props.error),
@@ -35,20 +41,25 @@ export function useAttrs(props) {
     }),
   );
 
+  const selectedItemClasses = computed(() =>
+    cvaSelectedItem({
+      size: props.size,
+    }),
+  );
+
   const labelAttrs = getAttrs("label", { isComponent: true });
   const buttonAttrs = getAttrs("button", { isComponent: true });
   const dropzoneWrapperAttrs = getAttrs("dropzoneWrapper", { classes: dropzoneWrapperClasses });
   const descriptionAttrs = getAttrs("description", { isComponent: true });
+  const contentWrapperAttrs = getAttrs("contentWrapper");
   const buttonWrapperAttrs = getAttrs("buttonWrapper");
-  const placeholderWrapperAttrs = getAttrs("placeholderWrapper");
-  const placeholderAttrs = getAttrs("placeholder", {
-    classes: placeholderClasses,
-    isComponent: true,
-  });
-  const placeholderIconAttrs = getAttrs("placeholderIcon", { isComponent: true });
+  const placeholderAttrs = getAttrs("placeholder", { classes: placeholderClasses });
   const clearIconAttrs = getAttrs("clearIcon", { isComponent: true });
+  const chooseFileIconAttrs = getAttrs("chooseFileIcon", { isComponent: true });
   const chooseFileIconNameAttrs = getAttrs("chooseFileIconName", { isComponent: true });
   const inputAttrs = getAttrs("input");
+  const fileListAttrs = getAttrs("fileList");
+  const selectedItemAttrs = getAttrs("selectedItem", { classes: selectedItemClasses });
 
   return {
     config,
@@ -57,11 +68,13 @@ export function useAttrs(props) {
     buttonAttrs,
     dropzoneWrapperAttrs,
     descriptionAttrs,
-    buttonWrapperAttrs,
-    placeholderWrapperAttrs,
-    placeholderIconAttrs,
+    contentWrapperAttrs,
     clearIconAttrs,
     chooseFileIconNameAttrs,
     placeholderAttrs,
+    fileListAttrs,
+    buttonWrapperAttrs,
+    selectedItemAttrs,
+    chooseFileIconAttrs,
   };
 }

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

@@ -26,10 +26,20 @@ export default /*tw*/ {
     ],
   },
   description: "text-gray-700",
-  buttonWrapper: "relative mt-3 flex w-full gap-52 justify-between rounded bg-brand-50 p-4",
-  placeholderWrapper: "flex items-center gap-2",
+  contentWrapper: "relative mt-3 flex w-full gap-6 justify-between items-start rounded bg-brand-50 p-4",
+  fileList: "pr-4 shrink-0 text-gray-700 flex-grow flex flex-col gap-4",
   placeholder: {
-    base: "pr-4 shrink-0 text-ellipsis overflow-hidden text-gray-700 text-nowrap",
+    base: "pr-4 shrink-0 text-gray-700 flex-grow",
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+      },
+    },
+  },
+  selectedItem: {
+    base: "pr-4 shrink-0 text-gray-700 flex-grow",
     variants: {
       size: {
         sm: "text-sm",
@@ -39,25 +49,25 @@ export default /*tw*/ {
     },
   },
   button: "hover:cursor-pointer",
-  placeholderIcon: "-rotate-45",
-  placeholderIconName: "attach_file",
   chooseFileIcon: "",
-  chooseFileIconName: "upload_file",
+  chooseFileIconName: "attach_file",
   clearIcon: "",
   clearIconName: "close",
-  dropzoneWrapperHover: "border-gray-400 bg-gray-50",
+  dropzoneWrapperHover: "border-gray-400",
   dropzoneWrapperError: "hover:border-red-400 border-red-300",
   input: "sr-only pointer-events-none size-0 opacity-0",
+  buttonWrapper: "flex gap-4 items-center",
   i18n: {
     sizeError: "File size is too big.",
     formatError: "Format is not supported.",
     noFile: "No file selected",
-    uploadFile: "Upload file",
+    uploadFile: "Choose file",
   },
   defaultVariants: {
     size: "md",
     labelAlign: "topInside",
     allowedFileTypes: [],
-    maxFileSize: 100,
+    multiple: false,
+    maxFileSize: 0,
   },
 };

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

@@ -3,58 +3,64 @@
     <div ref="dropZoneRef" :ondrop="onDrop" v-bind="dropzoneWrapperAttrs">
       <UText :size="nestedComponentSize" v-bind="descriptionAttrs" :html="description" />
 
-      <div v-bind="buttonWrapperAttrs">
-        <div v-bind="placeholderWrapperAttrs">
+      <div v-bind="contentWrapperAttrs">
+        <slot name="left" />
+        <span v-if="!isValue" v-bind="placeholderAttrs" v-text="currentLocale.noFile" />
+        <div v-else v-bind="fileListAttrs">
+          <template v-if="props.multiple">
+            <span
+              v-for="(file, idx) in currentFiles"
+              v-bind="selectedItemAttrs"
+              :key="idx"
+              v-text="file.name"
+            />
+          </template>
+          <span v-else v-bind="selectedItemAttrs" v-text="currentFiles.name" />
+        </div>
+
+        <div v-bind="buttonWrapperAttrs">
+          <template v-if="Array.isArray(currentFiles) || !currentFiles">
+            <UButton
+              class="hover:cursor-pointer"
+              :label="currentLocale.uploadFile"
+              variant="thirdary"
+              filled
+              :size="nestedComponentSize"
+              v-bind="buttonAttrs"
+              tag="label"
+              :for="id"
+            >
+              <template #right>
+                <UIcon
+                  internal
+                  :size="nestedComponentSize"
+                  :name="config.chooseFileIconName"
+                  v-bind="chooseFileIconAttrs"
+                />
+              </template>
+            </UButton>
+
+            <input
+              :id="id"
+              ref="fileInputRef"
+              :multiple="multiple"
+              type="file"
+              :accept="accept"
+              v-bind="inputAttrs"
+              @change="onChangeFile"
+            />
+          </template>
           <UIcon
-            pill
+            v-if="isValue"
+            interactive
             internal
             :size="nestedComponentSize"
-            :name="config.placeholderIconName"
-            v-bind="placeholderIconAttrs"
+            :name="config.clearIconName"
+            pill
+            v-bind="clearIconAttrs"
+            @click="onClickResetFiles"
           />
-          <span v-bind="placeholderAttrs" v-text="placeholder" />
         </div>
-
-        <template v-if="!currentFiles.length">
-          <UButton
-            class="hover:cursor-pointer"
-            :label="currentLocale.uploadFile"
-            variant="thirdary"
-            filled
-            :size="nestedComponentSize"
-            v-bind="buttonAttrs"
-            tag="label"
-            :for="id"
-          >
-            <template #right>
-              <UIcon
-                internal
-                :size="nestedComponentSize"
-                :name="config.chooseFileIconName"
-                v-bind="chooseFileIconAttrs"
-              />
-            </template>
-          </UButton>
-
-          <input
-            :id="id"
-            ref="fileInputRef"
-            type="file"
-            :accept="accept"
-            v-bind="inputAttrs"
-            @change="onChangeFile"
-          />
-        </template>
-        <UIcon
-          v-else
-          interactive
-          internal
-          :size="nestedComponentSize"
-          :name="config.clearIconName"
-          pill
-          v-bind="clearIconAttrs"
-          @click="onClickResetFiles"
-        />
       </div>
     </div>
   </ULabel>
@@ -87,7 +93,7 @@ const props = defineProps({
    */
   label: {
     type: String,
-    default: "Label",
+    default: "",
   },
 
   /**
@@ -95,7 +101,7 @@ const props = defineProps({
    */
   description: {
     type: String,
-    default: "Some description here",
+    default: "",
   },
 
   /**
@@ -108,8 +114,16 @@ const props = defineProps({
   },
 
   modelValue: {
-    type: Array,
-    default: () => [],
+    type: [Array, File],
+    default: null,
+  },
+
+  /**
+   * Allow select multiple files.
+   */
+  multiple: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputFile).default.multiple,
   },
 
   /**
@@ -175,20 +189,26 @@ const {
   buttonAttrs,
   dropzoneWrapperAttrs,
   descriptionAttrs,
-  buttonWrapperAttrs,
-  placeholderWrapperAttrs,
-  placeholderIconAttrs,
+  contentWrapperAttrs,
   clearIconAttrs,
   chooseFileIconAttrs,
   placeholderAttrs,
   inputAttrs,
+  fileListAttrs,
+  buttonWrapperAttrs,
+  selectedItemAttrs,
 } = useAttrs(props);
 
-const currentLocale = computed(() => merge(tm("UInputFile"), props.config.i18n));
+const i18nGlobal = tm(UInputFile);
+const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
 const currentFiles = computed({
   get: () => props.modelValue,
-  set: (newValue) => emit("update:modelValue", newValue),
+  set: (newValue) => {
+    const fallbackValue = props.multiple ? [] : null;
+
+    emit("update:modelValue", newValue || fallbackValue);
+  },
 });
 
 const currentError = computed({
@@ -196,16 +216,23 @@ const currentError = computed({
   set: (newValue) => emit("update:error", newValue),
 });
 
-const accept = computed(() => {
-  return props.allowedFileTypes.join(",");
-});
-
 const extensionNames = computed(() => {
   return props.allowedFileTypes.map((type) => type.replace(".", ""));
 });
 
-const placeholder = computed(() => {
-  return currentFiles.value.length ? currentFiles.value[0].name : currentLocale.value.noFile;
+const allowedFileTypeFormats = computed(() => {
+  return props.allowedFileTypes.map((type) => (type.startsWith(".") ? type : `.${type}`));
+});
+
+const accept = computed(() => {
+  return allowedFileTypeFormats.value.join(",");
+});
+
+const isValue = computed(() => {
+  return (
+    (Array.isArray(currentFiles.value) && currentFiles.value.length) ||
+    (!Array.isArray(currentFiles.value) && currentFiles.value)
+  );
 });
 
 const nestedComponentSize = computed(() => {
@@ -237,7 +264,7 @@ function validate(file) {
 
   const isValidSize = targetFileSize <= props.maxFileSize;
 
-  if (!isValidSize) {
+  if (!isValidSize && props.maxFileSize) {
     currentError.value = currentLocale.value.sizeError;
   }
 
@@ -255,11 +282,15 @@ function onChangeFile(event) {
     return;
   }
 
-  currentFiles.value = Array.from(event.target.files);
+  currentFiles.value = props.multiple
+    ? [...currentFiles.value, Array.from(event.target.files).at(0)]
+    : Array.from(event.target.files).at(0);
+
+  if (fileInputRef.value) fileInputRef.value.value = "";
 }
 
 function onClickResetFiles() {
-  currentFiles.value = [];
+  currentFiles.value = null;
 
   if (fileInputRef.value) fileInputRef.value.value = "";
 }
@@ -267,13 +298,13 @@ function onClickResetFiles() {
 function onDragOver(event) {
   event.preventDefault();
 
-  dropZoneRef.value.classList.add(config.value.dropzoneWrapperHover.split(" "));
+  dropZoneRef.value.classList.add(...config.value.dropzoneWrapperHover.split(" "));
 }
 
 function onDragLeave(event) {
   event.preventDefault();
 
-  dropZoneRef.value.classList.remove(config.value.dropzoneWrapperHover.split(" "));
+  dropZoneRef.value.classList.remove(...config.value.dropzoneWrapperHover.split(" "));
 }
 
 function onDrop(event) {
@@ -296,7 +327,7 @@ function onDrop(event) {
       return;
     }
 
-    currentFiles.value = [targetFile];
+    currentFiles.value = props.multiple ? [...currentFiles.value, targetFile] : targetFile;
   });
 }
 </script>

package/ui.form-select/index.vue

@@ -500,7 +500,8 @@ const {
   dropdownListAttrs,
 } = useAttrs(props, { isTop, isOpen, selectedLabel });
 
-const currentLocale = computed(() => merge(tm("USelect"), props.config.i18n));
+const i18nGlobal = tm(USelect);
+const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
 const inputPlaceholder = computed(() => {
   const message = currentLocale.value.addMore;

package/ui.form-switch/index.vue

@@ -158,7 +158,8 @@ const emit = defineEmits(["update:modelValue"]);
 
 const { tm } = useLocale();
 
-const currentLocale = computed(() => merge(tm("USwitch"), props.config.i18n));
+const i18nGlobal = tm(USwitch);
+const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
 const checkedValue = computed({
   get: () => props.modelValue,

package/ui.notify/index.vue

@@ -142,7 +142,8 @@ const notifyPositionStyles = ref({});
 
 const notificationsWrapperRef = ref(null);
 
-const currentLocale = computed(() => merge(tm("UNotify"), props.config.i18n));
+const i18nGlobal = tm(UNotify);
+const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
 onMounted(() => {
   window.addEventListener("resize", setPosition, { passive: true });

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.102",
+  "version": "0.0.104",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -3448,7 +3448,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "\"Label\""
+              "default": "\"\""
             },
             {
               "name": "description",
@@ -3457,7 +3457,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "\"Some description here\""
+              "default": "\"\""
             },
             {
               "name": "labelAlign",
@@ -3472,9 +3472,18 @@
               "name": "modelValue",
               "value": {
                 "kind": "expression",
-                "type": "array"
+                "type": "array|File"
               },
-              "default": "[]"
+              "default": "null"
+            },
+            {
+              "name": "multiple",
+              "description": "Allow select multiple files.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
             },
             {
               "name": "maxFileSize",
@@ -3483,7 +3492,7 @@
                 "kind": "expression",
                 "type": "number"
               },
-              "default": "100"
+              "default": "0"
             },
             {
               "name": "allowedFileTypes",
@@ -3539,6 +3548,11 @@
               "name": "update:error"
             }
           ],
+          "slots": [
+            {
+              "name": "left"
+            }
+          ],
           "source": {
             "module": "vueless/ui.form-input-file/index.vue",
             "symbol": "default"

package/assets/icons/upload_file.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M452-203.43h60v-201.96l82.48 82.48 42-42L480-517.15 325.76-362.91l42 42L452-405.39v201.96ZM222.15-74.02q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-675.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34h361.48l222.59 222.59v521.48q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-515.7Zm326.7-557.83v-186h-326.7v675.7h515.7v-489.7h-189Zm-326.7-186v186-186 675.7-675.7Z"/></svg>