vueless 0.0.579 → 0.0.580

package/ui.text-notify/UNotify.vue

@@ -2,31 +2,22 @@
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import { merge } from "lodash-es";
 
-import { getDefault, vuelessConfig } from "../utils/ui.ts";
+import useUI from "../composables/useUI.ts";
+import { getDefaults, vuelessConfig } from "../utils/ui.ts";
 import { useLocale } from "../composables/useLocale.ts";
-import useAttrs from "./useAttrs.ts";
 
 import defaultConfig from "./config.ts";
-import { UNotify, NOTIFY_TYPE, POSITION } from "./constants.ts";
+import { UNotify, NotificationType, NotificationPosition } from "./constants.ts";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 
-import type {
-  UNotifyProps,
-  Notification,
-  NotifyEvent,
-  NotificationsWrapperRef,
-  NotificationType,
-} from "./types.ts";
+import type { Props, Config, NotifyEvent, Notification, NotificationsWrapperRef } from "./types.ts";
+import type { Transition } from "../types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UNotifyProps>(), {
-  xPosition: getDefault<UNotifyProps>(defaultConfig, UNotify).xPosition,
-  yPosition: getDefault<UNotifyProps>(defaultConfig, UNotify).yPosition,
-  html: getDefault<UNotifyProps>(defaultConfig, UNotify).html,
-  dataTest: "",
-  config: () => ({}),
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, UNotify),
 });
 
 const { tm } = useLocale();
@@ -39,19 +30,6 @@ const notificationsWrapperRef = ref<NotificationsWrapperRef | null>(null);
 const i18nGlobal = tm(UNotify);
 const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
-const {
-  config,
-  wrapperAttrs,
-  bodyAttrs,
-  contentAttrs,
-  labelAttrs,
-  descriptionAttrs,
-  successIconAttrs,
-  warningIconAttrs,
-  errorIconAttrs,
-  closeIconAttrs,
-} = useAttrs(props, { notifications });
-
 onMounted(() => {
   window.addEventListener("resize", setPosition, { passive: true });
   window.addEventListener("notifyStart", onNotifyStart);
@@ -111,22 +89,55 @@ function setPosition() {
 
   styles[props.yPosition] = "0px";
 
-  if (props.xPosition === POSITION.center) {
+  if (props.xPosition === NotificationPosition.Center) {
     styles.left = `calc(50% - ${notifyWidth / 2}px)`;
   } else {
     styles[props.xPosition] = "0px";
   }
 
-  if (pageWidth && props.xPosition !== POSITION.right) {
+  if (pageWidth && props.xPosition !== NotificationPosition.Right) {
     styles.left = `${asideWidth + pageWidth / 2 - notifyWidth / 2}px`;
   }
 
   notifyPositionStyles.value = styles;
 }
 
-function getText(notificationText: string, type: NotificationType): string {
+function getText(notificationText: string, type: Notification["type"]): string {
   return notificationText || currentLocale.value[type]?.default;
 }
+
+function getBodyAttrs(type: Notification["type"]) {
+  if (type === NotificationType.Success) {
+    return bodySuccessAttrs.value;
+  }
+
+  if (type === NotificationType.Warning) {
+    return bodyWarningAttrs.value;
+  }
+
+  if (type === NotificationType.Error) {
+    return bodyErrorAttrs.value;
+  }
+}
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const {
+  config,
+  wrapperAttrs,
+  bodySuccessAttrs,
+  bodyWarningAttrs,
+  bodyErrorAttrs,
+  contentAttrs,
+  labelAttrs,
+  descriptionAttrs,
+  successIconAttrs,
+  warningIconAttrs,
+  errorIconAttrs,
+  closeIconAttrs,
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -134,39 +145,44 @@ function getText(notificationText: string, type: NotificationType): string {
     ref="notificationsWrapperRef"
     :style="notifyPositionStyles"
     tag="div"
-    v-bind="{ ...config?.transitionGroup, ...wrapperAttrs }"
+    v-bind="{ ...(config?.transitionGroup as Transition), ...wrapperAttrs }"
+    :data-test="dataTest"
   >
-    <div v-for="notification in notifications" :key="notification.id" v-bind="bodyAttrs">
+    <div
+      v-for="notification in notifications"
+      :key="notification.id"
+      v-bind="getBodyAttrs(notification.type)"
+    >
       <UIcon
-        v-if="notification.type === NOTIFY_TYPE.success"
+        v-if="notification.type === NotificationType.Success"
         color="green"
         variant="light"
         size="md"
         internal
-        :name="config.defaults?.successIcon"
+        :name="config.defaults.successIcon"
         v-bind="successIconAttrs"
         data-test="type-notify"
       />
 
       <UIcon
-        v-else-if="notification.type === NOTIFY_TYPE.warning"
+        v-else-if="notification.type === NotificationType.Warning"
         color="orange"
         variant="light"
         size="md"
         internal
-        :name="config.defaults?.warningIcon"
+        :name="config.defaults.warningIcon"
         v-bind="warningIconAttrs"
         data-test="type-notify"
       />
 
       <UIcon
-        v-else-if="notification.type === NOTIFY_TYPE.error"
+        v-else-if="notification.type === NotificationType.Error"
         data-test="type-notify"
         color="red"
         variant="light"
         size="md"
         internal
-        :name="config.defaults?.errorIcon"
+        :name="config.defaults.errorIcon"
         v-bind="errorIconAttrs"
       />
 
@@ -194,8 +210,9 @@ function getText(notificationText: string, type: NotificationType): string {
         size="xs"
         internal
         interactive
-        :name="config.defaults?.closeIcon"
+        :name="config.defaults.closeIcon"
         v-bind="closeIconAttrs"
+        :data-test="`${dataTest}-close`"
         @click="onClickClose(notification)"
       />
     </div>

package/ui.text-notify/config.ts

@@ -11,9 +11,9 @@ export default /*tw*/ {
     mb-3 flex w-full items-center justify-center gap-3 rounded-2xl bg-gray-900/90
     p-4 shadow-[0_4px_16px_rgba(17,24,39,0.5)] backdrop-blur-md md:shadow-[0_0px_12px_rgba(0,0,0,0.25)]
   `,
-  bodySuccess: "bg-[radial-gradient(100.16%_500.78%_at_0%_50%,rgba(74,222,128,0.1)_2.17%,transparent)]",
-  bodyWarning: "bg-[radial-gradient(100.16%_500.78%_at_0%_50%,rgba(251,146,60,0.2)_2.17%,transparent)]",
-  bodyError: "bg-[radial-gradient(100.16%_500.78%_at_0%_50%,rgba(251,113,133,0.2)_2.17%,transparent)]",
+  bodySuccess: "{>body} bg-[radial-gradient(100.16%_500.78%_at_0%_50%,rgba(74,222,128,0.1)_2.17%,transparent)]",
+  bodyWarning: "{>body} bg-[radial-gradient(100.16%_500.78%_at_0%_50%,rgba(251,146,60,0.2)_2.17%,transparent)]",
+  bodyError: "{>body} bg-[radial-gradient(100.16%_500.78%_at_0%_50%,rgba(251,113,133,0.2)_2.17%,transparent)]",
   content: "w-full flex flex-col max-w-full text-sm text-gray-200",
   label: "mb-0.5 font-medium",
   description: "break-words font-normal",

package/ui.text-notify/constants.ts

@@ -3,27 +3,25 @@
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
 export const UNotify = "UNotify";
-
 export const LOCAL_STORAGE_ID = "vueless:notify";
+export const DELAY_BETWEEN_CLONES = 1000;
 
-export const NOTIFY_TYPE = {
-  success: "success",
-  warning: "warning",
-  error: "error",
-};
-
-export const POSITION = {
-  left: "left",
-  right: "right",
-  top: "top",
-  bottom: "bottom",
-  center: "center",
-};
+export enum NotificationType {
+  Success = "success",
+  Warning = "warning",
+  Error = "error",
+}
 
-export const DURATION = {
-  short: 4000,
-  medium: 8000,
-  long: 12000,
-};
+export enum NotificationPosition {
+  Left = "left",
+  Right = "right",
+  Top = "top",
+  Bottom = "bottom",
+  Center = "center",
+}
 
-export const DELAY_BETWEEN_CLONES = 1000;
+export enum NotificationDuration {
+  Short = 4000,
+  Medium = 8000,
+  Long = 12000,
+}

package/ui.text-notify/storybook/stories.ts

@@ -12,9 +12,9 @@ import UButton from "../../ui.button/UButton.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
-import type { UNotifyProps } from "../types.ts";
+import type { Props } from "../types.ts";
 
-interface UNotifyArgs extends UNotifyProps {
+interface UNotifyArgs extends Props {
   slotTemplate?: string;
 }
 

package/ui.text-notify/types.ts

@@ -1,8 +1,8 @@
 import defaultConfig from "./config.ts";
+import type { ComponentConfig } from "../types.ts";
+import { NotificationType } from "./constants.ts";
 
-export type Config = Partial<typeof defaultConfig>;
-
-export type NotificationType = "success" | "warning" | "error";
+export type Config = typeof defaultConfig;
 
 export type Notification = {
   id: string;
@@ -26,7 +26,7 @@ declare global {
   }
 }
 
-export interface UNotifyProps {
+export interface Props {
   /**
    * A position on the x-axis.
    */
@@ -45,5 +45,10 @@ export interface UNotifyProps {
   /**
    * Component config object.
    */
-  config?: Config;
+  config?: ComponentConfig<Config>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
 }

package/ui.text-notify/utilNotify.ts

@@ -1,9 +1,14 @@
 import { vuelessConfig } from "../utils/ui.ts";
 import { getRandomId } from "../utils/helper.ts";
-import { DELAY_BETWEEN_CLONES, DURATION, LOCAL_STORAGE_ID, NOTIFY_TYPE } from "./constants.ts";
+import {
+  LOCAL_STORAGE_ID,
+  DELAY_BETWEEN_CLONES,
+  NotificationDuration,
+  NotificationType,
+} from "./constants.ts";
 
 interface NotifyConfig {
-  type?: (typeof NOTIFY_TYPE)[keyof typeof NOTIFY_TYPE];
+  type?: NotificationType;
   label?: string;
   description?: string;
   duration?: number;
@@ -11,7 +16,7 @@ interface NotifyConfig {
 }
 
 interface NotifyEventDetail {
-  type: (typeof NOTIFY_TYPE)[keyof typeof NOTIFY_TYPE];
+  type: NotificationType;
   id: string;
   label: string;
   description: string;
@@ -39,7 +44,8 @@ export function notify({
   duration,
   ignoreDuplicates,
 }: NotifyConfig = {}): void {
-  const notifyDuration: number = duration || globalNotifyDuration?.short || DURATION.short;
+  const notifyDuration: number =
+    duration || globalNotifyDuration?.short || NotificationDuration.Short;
 
   const isSameMessage = Boolean(
     lastMessage === description &&
@@ -55,7 +61,7 @@ export function notify({
   lastMessage = description;
 
   const eventDetail: NotifyEventDetail = {
-    type: type as (typeof NOTIFY_TYPE)[keyof typeof NOTIFY_TYPE],
+    type: type as NotificationType,
     id: getRandomId(),
     label,
     description,
@@ -84,8 +90,8 @@ export function notifySuccess({
     label,
     description,
     ignoreDuplicates,
-    type: NOTIFY_TYPE.success,
-    duration: duration || globalNotifyDuration?.short || DURATION.short,
+    type: NotificationType.Success,
+    duration: duration || globalNotifyDuration?.short || NotificationDuration.Short,
   });
 }
 
@@ -99,8 +105,8 @@ export function notifyWarning({
     label,
     description,
     ignoreDuplicates,
-    type: NOTIFY_TYPE.warning,
-    duration: duration || globalNotifyDuration?.medium || DURATION.medium,
+    type: NotificationType.Warning,
+    duration: duration || globalNotifyDuration?.medium || NotificationDuration.Medium,
   });
 }
 
@@ -114,8 +120,8 @@ export function notifyError({
     label,
     description,
     ignoreDuplicates,
-    type: NOTIFY_TYPE.error,
-    duration: duration || globalNotifyDuration?.long || DURATION.long,
+    type: NotificationType.Error,
+    duration: duration || globalNotifyDuration?.long || NotificationDuration.Long,
   });
 }
 

package/utils/helper.ts

@@ -1,3 +1,4 @@
+import type { UnknownObject } from "../types.ts";
 import { Comment, Text, Fragment } from "vue";
 
 import type { Slot, VNode } from "vue";
@@ -5,7 +6,7 @@ import type { Slot, VNode } from "vue";
 /**
  * Deeply clone given object (same as lodash.cloneDeep).
  */
-export function cloneDeep(entity: unknown, cache = new WeakMap()): unknown {
+export function cloneDeep(entity: unknown, cache = new WeakMap()): unknown | UnknownObject {
   // primitives
   if (Object(entity) !== entity || !entity) {
     return entity;
@@ -42,13 +43,12 @@ export function cloneDeep(entity: unknown, cache = new WeakMap()): unknown {
 /**
  * Creates a debounced function with delay (same as lodash.debounce).
  */
-export function createDebounce(func: () => void, ms: number) {
+export function createDebounce<T extends unknown[]>(func: (...args: T) => void, ms: number) {
   let timeout: ReturnType<typeof setTimeout>;
 
-  return function (...args: []) {
+  return function (this: unknown, ...args: T) {
     clearTimeout(timeout);
-    // @ts-expect-error - this implicitly has type any because it does not have a type annotation.
-    timeout = setTimeout(() => func.apply(this as unknown, args), ms);
+    timeout = setTimeout(() => func.apply(this, args), ms);
   };
 }
 

package/utils/storybook.ts

@@ -14,7 +14,7 @@ interface Types {
 }
 
 export interface ArgType {
-  control?: "text" | "date" | "number" | "boolean" | "array" | "select" | false;
+  control?: "text" | "date" | "number" | "boolean" | "array" | "select" | "object" | false;
   options?: string[];
   table?: TableConfig;
   name?: string;
@@ -113,6 +113,16 @@ export function getArgTypes(componentName: string | undefined) {
       };
     }
 
+    if (attribute.enum?.length === 1) {
+      types[attribute.name] = {
+        control: "object",
+        table: {
+          defaultValue: { summary: attribute.default || "" },
+          type: { summary: attribute.enum.join(" | ") },
+        },
+      };
+    }
+
     if (type === "string" || type.includes("string")) {
       types[attribute.name] = {
         control: "text",

package/utils/ui.ts

@@ -8,6 +8,7 @@ import {
   GRAYSCALE_COLOR,
   DEFAULT_BRAND_COLOR,
   TAILWIND_MERGE_EXTENSION,
+  SYSTEM_NON_PROPS_DEFAULTS,
   NESTED_COMPONENT_PATTERN_REG_EXP,
 } from "../constants.js";
 
@@ -21,13 +22,13 @@ import type {
 } from "../types.ts";
 
 interface MergedConfigOptions {
-  defaultConfig: Component;
-  globalConfig: Component;
-  propsConfig?: Component;
+  defaultConfig: unknown;
+  globalConfig: unknown;
+  propsConfig?: unknown;
   vuelessStrategy?: Strategies;
 }
 
-type getMergedConfig = (options: MergedConfigOptions) => Component;
+type GetMergedConfig = (options: MergedConfigOptions) => unknown;
 
 /**
  * Load Vueless config from the project root.
@@ -82,7 +83,7 @@ export const {
   },
 });
 
-export const getMergedConfig = createGetMergedConfig(cx) as getMergedConfig;
+export const getMergedConfig = createGetMergedConfig(cx) as GetMergedConfig;
 
 /* This allows skipping some CVA config keys in vueless config. */
 export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVariants = {} }) =>
@@ -111,23 +112,32 @@ export function getDefault<T>(defaultConfig: Component, name: ComponentNames) {
   return {
     ...defaults,
     dataTest: "",
-    config: () => {},
+    config: () => ({}),
   };
 }
 
 /**
  * Return default values for component props, icons, etc..
  */
-export function getDefaults<T>(defaultConfig: Component, name: ComponentNames) {
-  const componentDefaults = cloneDeep(defaultConfig.defaults) || {};
+export function getDefaults<Props, Config>(defaultConfig: Config, name: ComponentNames) {
+  const componentDefaults = cloneDeep((defaultConfig as Component).defaults) || {};
   const globalDefaults = cloneDeep(vuelessConfig.component?.[name]?.defaults) || {};
 
-  const defaults = merge(componentDefaults, globalDefaults) as T & Defaults;
+  const defaults = merge(componentDefaults, globalDefaults) as Props & Defaults;
 
   if (defaults.color) {
     defaults.color = getColor(defaults.color as BrandColors);
   }
 
+  /* Remove non a props defaults. */
+  for (const key in defaults) {
+    const isNonPropIcon = /Icon/.test(key) && !/(leftIcon|rightIcon)/.test(key);
+
+    if (SYSTEM_NON_PROPS_DEFAULTS.includes(key) || isNonPropIcon) {
+      delete defaults[key];
+    }
+  }
+
   return {
     ...defaults,
     dataTest: "",