vueless 0.0.569 → 0.0.571

package/ui.text-files/UFiles.vue

@@ -7,6 +7,7 @@ import { UFiles } from "./constants.ts";
 import defaultConfig from "./config.ts";
 import useAttrs from "./useAttrs.ts";
 import { computed } from "vue";
+import { getRandomId } from "../utils/helper.ts";
 
 import type { UFilesProps } from "./types.ts";
 
@@ -15,6 +16,7 @@ defineOptions({ inheritAttrs: false });
 const props = withDefaults(defineProps<UFilesProps>(), {
   labelAlign: getDefault<UFilesProps>(defaultConfig, UFiles).labelAlign,
   size: getDefault<UFilesProps>(defaultConfig, UFiles).size,
+  fileList: () => [],
   dataTest: "",
 });
 
@@ -28,18 +30,20 @@ const emit = defineEmits([
 
 const { filesLabelAttrs, itemsAttrs, itemAttrs } = useAttrs(props);
 
-const formattedFileList = computed(() =>
-  props.fileList.map((file) => {
-    return {
-      id: file.name,
-      label: file.name,
-      url: URL.createObjectURL(file),
-      imageUrl: file.type.includes("image") ? URL.createObjectURL(file) : undefined,
-    };
-  }),
-);
+const formattedFileList = computed(() => {
+  return props.fileList.map((file) => {
+    if (file instanceof File) {
+      return {
+        id: getRandomId(),
+        label: file.name || "",
+        url: URL.createObjectURL(file),
+        imageUrl: file.type.includes("image") ? URL.createObjectURL(file) : undefined,
+      };
+    }
+  });
+});
 
-function onRemoveFile(fileId) {
+function onRemoveFile(fileId: string | number) {
   emit("remove", fileId);
 }
 </script>
@@ -57,11 +61,11 @@ function onRemoveFile(fileId) {
       <slot>
         <UFile
           v-for="(file, index) in formattedFileList"
-          :id="file.id"
-          :key="file.id"
-          :label="file.label"
-          :url="file.url"
-          :image-url="file.imageUrl"
+          :id="file?.id"
+          :key="file?.id"
+          :label="file?.label"
+          :url="file?.url"
+          :image-url="file?.imageUrl"
           :size="size"
           :removable="removable"
           v-bind="itemAttrs"

package/ui.text-files/types.ts

@@ -6,7 +6,7 @@ export interface UFilesProps {
   /**
    * List of file objects.
    */
-  fileList?: Array<object>;
+  fileList: File[];
 
   /**
    * File list label.

package/ui.text-notify/UNotify.vue

@@ -2,7 +2,7 @@
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import { merge } from "lodash-es";
 
-import { cx, getDefault, vuelessConfig } from "../utils/ui.ts";
+import { getDefault, vuelessConfig } from "../utils/ui.ts";
 import { useLocale } from "../composables/useLocale.ts";
 import useAttrs from "./useAttrs.ts";
 
@@ -11,7 +11,13 @@ import { UNotify, NOTIFY_TYPE, POSITION } from "./constants.ts";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 
-import type { UNotifyProps } from "./types.ts";
+import type {
+  UNotifyProps,
+  Notification,
+  NotifyEvent,
+  NotificationsWrapperRef,
+  NotificationType,
+} from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -20,8 +26,19 @@ const props = withDefaults(defineProps<UNotifyProps>(), {
   yPosition: getDefault<UNotifyProps>(defaultConfig, UNotify).yPosition,
   html: getDefault<UNotifyProps>(defaultConfig, UNotify).html,
   dataTest: "",
+  config: () => ({}),
 });
 
+const { tm } = useLocale();
+
+const notifications = ref<Notification[]>([]);
+const notifyPositionStyles = ref({});
+
+const notificationsWrapperRef = ref<NotificationsWrapperRef | null>(null);
+
+const i18nGlobal = tm(UNotify);
+const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
+
 const {
   config,
   wrapperAttrs,
@@ -33,17 +50,7 @@ const {
   warningIconAttrs,
   errorIconAttrs,
   closeIconAttrs,
-} = useAttrs(props);
-
-const { tm } = useLocale();
-
-const notifications = ref([]);
-const notifyPositionStyles = ref({});
-
-const notificationsWrapperRef = ref(null);
-
-const i18nGlobal = tm(UNotify);
-const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
+} = useAttrs(props, { notifications });
 
 onMounted(() => {
   window.addEventListener("resize", setPosition, { passive: true });
@@ -61,11 +68,11 @@ onBeforeUnmount(() => {
   window.removeEventListener("notifyClearAll", onClearAll);
 });
 
-function onNotifyStart(event) {
+function onNotifyStart(event: NotifyEvent) {
   notifications.value.push({ ...event.detail });
 }
 
-function onNotifyEnd(event) {
+function onNotifyEnd(event: NotifyEvent) {
   notifications.value = notifications.value.filter(
     (notification) => notification.id !== event.detail.id,
   );
@@ -75,25 +82,27 @@ function onClearAll() {
   notifications.value = [];
 }
 
-function onClickClose(targetNotification) {
+function onClickClose(targetNotification: Notification) {
   notifications.value = notifications.value.filter(
     (notification) => notification.id !== targetNotification.id,
   );
 }
 
-function getOffsetWidth(selector) {
-  return document.querySelector(selector)?.offsetWidth || 0;
+function getOffsetWidth(selector: string): number {
+  const element = document.querySelector(selector);
+
+  return element ? (element as HTMLElement).offsetWidth : 0;
 }
 
 function setPosition() {
   const positionClasses = vuelessConfig.component?.UNotify?.positionClasses;
-  const pageClass = positionClasses?.page || config.value.positionClasses.page;
-  const asideClass = positionClasses?.aside || config.value.positionClasses.aside;
+  const pageClass = positionClasses?.page || config.value?.positionClasses?.page;
+  const asideClass = positionClasses?.aside || config.value?.positionClasses?.aside;
   const pageWidth = getOffsetWidth(`${pageClass}`);
   const asideWidth = getOffsetWidth(`${asideClass}`);
-  const notifyWidth = notificationsWrapperRef.value.$el?.offsetWidth || 0;
+  const notifyWidth = notificationsWrapperRef.value?.$el.offsetWidth || 0;
 
-  const styles = {
+  const styles: Record<string, string> = {
     left: "auto",
     top: "auto",
     right: "auto",
@@ -115,23 +124,9 @@ function setPosition() {
   notifyPositionStyles.value = styles;
 }
 
-function getText(notificationText, type) {
+function getText(notificationText: string, type: NotificationType): string {
   return notificationText || currentLocale.value[type]?.default;
 }
-
-function getNotificationClasses(notification) {
-  if (notification.type === NOTIFY_TYPE.success) {
-    return cx([bodyAttrs.value.class, config.value.bodySuccess]);
-  }
-
-  if (notification.type === NOTIFY_TYPE.warning) {
-    return cx([bodyAttrs.value.class, config.value.bodyWarning]);
-  }
-
-  if (notification.type === NOTIFY_TYPE.error) {
-    return cx([bodyAttrs.value.class, config.value.bodyError]);
-  }
-}
 </script>
 
 <template>
@@ -139,21 +134,16 @@ function getNotificationClasses(notification) {
     ref="notificationsWrapperRef"
     :style="notifyPositionStyles"
     tag="div"
-    v-bind="{ ...config.transitionGroup, ...wrapperAttrs }"
+    v-bind="{ ...config?.transitionGroup, ...wrapperAttrs }"
   >
-    <div
-      v-for="notification in notifications"
-      :key="notification.id"
-      v-bind="bodyAttrs"
-      :class="getNotificationClasses(notification)"
-    >
+    <div v-for="notification in notifications" :key="notification.id" v-bind="bodyAttrs">
       <UIcon
         v-if="notification.type === NOTIFY_TYPE.success"
         color="green"
         variant="light"
         size="md"
         internal
-        :name="config.defaults.successIcon"
+        :name="config.defaults?.successIcon"
         v-bind="successIconAttrs"
         data-test="type-notify"
       />
@@ -164,7 +154,7 @@ function getNotificationClasses(notification) {
         variant="light"
         size="md"
         internal
-        :name="config.defaults.warningIcon"
+        :name="config.defaults?.warningIcon"
         v-bind="warningIconAttrs"
         data-test="type-notify"
       />
@@ -176,7 +166,7 @@ function getNotificationClasses(notification) {
         variant="light"
         size="md"
         internal
-        :name="config.defaults.errorIcon"
+        :name="config.defaults?.errorIcon"
         v-bind="errorIconAttrs"
       />
 
@@ -204,7 +194,7 @@ function getNotificationClasses(notification) {
         size="xs"
         internal
         interactive
-        :name="config.defaults.closeIcon"
+        :name="config.defaults?.closeIcon"
         v-bind="closeIconAttrs"
         @click="onClickClose(notification)"
       />

package/ui.text-notify/types.ts

@@ -2,6 +2,30 @@ import defaultConfig from "./config.ts";
 
 export type Config = Partial<typeof defaultConfig>;
 
+export type NotificationType = "success" | "warning" | "error";
+
+export type Notification = {
+  id: string;
+  type: NotificationType;
+  label: string;
+  description: string;
+};
+
+export interface NotifyEvent extends Event {
+  detail: Notification;
+}
+
+export interface NotificationsWrapperRef {
+  $el: HTMLElement;
+}
+
+declare global {
+  interface WindowEventMap {
+    notifyStart: NotifyEvent;
+    notifyEnd: NotifyEvent;
+  }
+}
+
 export interface UNotifyProps {
   /**
    * A position on the x-axis.