vueless 0.0.503 → 0.0.505

package/ui.text-money/types.ts

@@ -0,0 +1,101 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UMoneyProps {
+  /**
+   * Money value.
+   */
+  value?: number;
+
+  /**
+   * Money size.
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+
+  /**
+   * Money color.
+   */
+  color?:
+    | "brand"
+    | "grayscale"
+    | "gray"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "white";
+
+  /**
+   * Money currency symbol.
+   */
+  symbol?: string;
+
+  /**
+   * Money currency symbol align.
+   */
+  symbolAlign?: "right" | "left";
+
+  /**
+   * Add space between currency symbol and sum.
+   */
+  symbolDivided?: boolean;
+
+  /**
+   * Money sign.
+   */
+  sign?: "default" | "positive" | "negative";
+
+  /**
+   * Minimal number of signs after the decimal separator (fractional part of a number).
+   */
+  minFractionDigits?: number;
+
+  /**
+   * Maximal number of signs after the decimal separator (fractional part of a number).
+   */
+  maxFractionDigits?: number;
+
+  /**
+   * A symbol used to separate the integer part from the fractional part of a number.
+   */
+  decimalSeparator?: string;
+
+  /**
+   *  A symbol used to separate the thousand parts of a number.
+   */
+  thousandsSeparator?: string;
+
+  /**
+   * Money align.
+   */
+  align?: "right" | "left";
+
+  /**
+   * Make money planned (add brackets).
+   */
+  planned?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.text-money/useAttrs.ts

@@ -0,0 +1,18 @@
+import useUI from "../composables/useUI.ts";
+
+import defaultConfig from "./config.ts";
+
+import type { UseAttrs } from "../types.ts";
+import type { UMoneyProps, Config } from "./types.ts";
+
+export function useAttrs(props: UMoneyProps): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+
+  const keysAttrs = getKeysAttrs();
+
+  return {
+    config,
+    ...keysAttrs,
+    hasSlotContent,
+  };
+}

package/ui.text-money/{utilMoney.js → utilMoney.ts}

@@ -9,7 +9,7 @@ export const SINGLE_ZERO = "0";
 export const DOUBLE_ZERO = "00";
 
 export function separatedMoney(
-  money,
+  money: number,
   minFractionDigits = 0,
   maxFractionDigits = 2,
   decimalSeparator = ",",

package/ui.text-notify/UNotify.vue

@@ -1,130 +1,25 @@
-<template>
-  <TransitionGroup
-    ref="notificationsWrapperRef"
-    :style="notifyPositionStyles"
-    tag="div"
-    v-bind="{ ...config.transitionGroup, ...wrapperAttrs }"
-  >
-    <div
-      v-for="notification in notifications"
-      :key="notification.id"
-      v-bind="bodyAttrs"
-      :class="getNotificationClasses(notification)"
-    >
-      <UIcon
-        v-if="notification.type === NOTIFY_TYPE.success"
-        color="green"
-        variant="light"
-        size="md"
-        internal
-        :name="config.defaults.successIcon"
-        v-bind="successIconAttrs"
-        data-test="type-notify"
-      />
-
-      <UIcon
-        v-else-if="notification.type === NOTIFY_TYPE.warning"
-        color="orange"
-        variant="light"
-        size="md"
-        internal
-        :name="config.defaults.warningIcon"
-        v-bind="warningIconAttrs"
-        data-test="type-notify"
-      />
-
-      <UIcon
-        v-else-if="notification.type === NOTIFY_TYPE.error"
-        data-test="type-notify"
-        color="red"
-        variant="light"
-        size="md"
-        internal
-        :name="config.defaults.errorIcon"
-        v-bind="errorIconAttrs"
-      />
-
-      <div v-bind="contentAttrs">
-        <template v-if="html">
-          <span v-bind="labelAttrs" v-html="notification.label" />
-          <span
-            v-bind="descriptionAttrs"
-            v-html="getText(notification.description, notification.type)"
-          />
-        </template>
-
-        <template v-else>
-          <span v-bind="labelAttrs" v-text="notification.label" />
-          <span
-            v-bind="descriptionAttrs"
-            v-text="getText(notification.description, notification.type)"
-          />
-        </template>
-      </div>
-
-      <UIcon
-        color="gray"
-        variant="light"
-        size="xs"
-        internal
-        interactive
-        :name="config.defaults.closeIcon"
-        v-bind="closeIconAttrs"
-        @click="onClickClose(notification)"
-      />
-    </div>
-  </TransitionGroup>
-</template>
-
-<script setup>
+<script lang="ts" setup>
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import { merge } from "lodash-es";
 
 import { cx, getDefault, vuelessConfig } from "../utils/ui.ts";
 import { useLocale } from "../composables/useLocale.ts";
-import useAttrs from "./useAttrs.js";
+import useAttrs from "./useAttrs.ts";
 
-import defaultConfig from "./config.js";
-import { UNotify, NOTIFY_TYPE, POSITION } from "./constants.js";
+import defaultConfig from "./config.ts";
+import { UNotify, NOTIFY_TYPE, POSITION } from "./constants.ts";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 
+import type { UNotifyProps } from "./types.ts";
+
 defineOptions({ inheritAttrs: false });
 
-const props = defineProps({
-  /**
-   * A position on the x-axis.
-   * @values left, center, right
-   */
-  xPosition: {
-    type: String,
-    default: getDefault(defaultConfig, UNotify).xPosition,
-  },
-
-  /**
-   * A position on the y-axis.
-   * @values top, bottom
-   */
-  yPosition: {
-    type: String,
-    default: getDefault(defaultConfig, UNotify).yPosition,
-  },
-
-  /**
-   * Use html to render you own content.
-   */
-  html: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UNotify).html,
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
+const props = withDefaults(defineProps<UNotifyProps>(), {
+  xPosition: getDefault<UNotifyProps>(defaultConfig, UNotify).xPosition,
+  yPosition: getDefault<UNotifyProps>(defaultConfig, UNotify).yPosition,
+  html: getDefault<UNotifyProps>(defaultConfig, UNotify).html,
+  dataTest: "",
 });
 
 const {
@@ -238,3 +133,81 @@ function getNotificationClasses(notification) {
   }
 }
 </script>
+
+<template>
+  <TransitionGroup
+    ref="notificationsWrapperRef"
+    :style="notifyPositionStyles"
+    tag="div"
+    v-bind="{ ...config.transitionGroup, ...wrapperAttrs }"
+  >
+    <div
+      v-for="notification in notifications"
+      :key="notification.id"
+      v-bind="bodyAttrs"
+      :class="getNotificationClasses(notification)"
+    >
+      <UIcon
+        v-if="notification.type === NOTIFY_TYPE.success"
+        color="green"
+        variant="light"
+        size="md"
+        internal
+        :name="config.defaults.successIcon"
+        v-bind="successIconAttrs"
+        data-test="type-notify"
+      />
+
+      <UIcon
+        v-else-if="notification.type === NOTIFY_TYPE.warning"
+        color="orange"
+        variant="light"
+        size="md"
+        internal
+        :name="config.defaults.warningIcon"
+        v-bind="warningIconAttrs"
+        data-test="type-notify"
+      />
+
+      <UIcon
+        v-else-if="notification.type === NOTIFY_TYPE.error"
+        data-test="type-notify"
+        color="red"
+        variant="light"
+        size="md"
+        internal
+        :name="config.defaults.errorIcon"
+        v-bind="errorIconAttrs"
+      />
+
+      <div v-bind="contentAttrs">
+        <template v-if="html">
+          <span v-bind="labelAttrs" v-html="notification.label" />
+          <span
+            v-bind="descriptionAttrs"
+            v-html="getText(notification.description, notification.type)"
+          />
+        </template>
+
+        <template v-else>
+          <span v-bind="labelAttrs" v-text="notification.label" />
+          <span
+            v-bind="descriptionAttrs"
+            v-text="getText(notification.description, notification.type)"
+          />
+        </template>
+      </div>
+
+      <UIcon
+        color="gray"
+        variant="light"
+        size="xs"
+        internal
+        interactive
+        :name="config.defaults.closeIcon"
+        v-bind="closeIconAttrs"
+        @click="onClickClose(notification)"
+      />
+    </div>
+  </TransitionGroup>
+</template>

package/ui.text-notify/storybook/Docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source, Markdown } 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} />

package/ui.text-notify/storybook/{stories.js → stories.ts}

@@ -6,6 +6,13 @@ import UNotify from "../../ui.text-notify/UNotify.vue";
 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";
+
+interface UNotifyArgs extends UNotifyProps {
+  slotTemplate?: string;
+}
+
 /**
  * The `UNotify` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.text-notify)
  */
@@ -23,9 +30,9 @@ export default {
       },
     },
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UNotifyArgs> = (args: UNotifyArgs) => ({
   components: { UNotify, UButton },
   setup() {
     function onClick() {
@@ -42,16 +49,16 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UNotify class="m-4" v-bind="args">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UNotify>
     <UButton label="Show notify" @click="onClick"/>
   `,
 });
 
-const TypesTemplate = (args) => ({
+const TypesTemplate: StoryFn<UNotifyArgs> = (args: UNotifyArgs) => ({
   components: { UNotify, UButton, UCol },
   setup() {
-    function onClick(type) {
+    function onClick(type: string) {
       if (type === "success") {
         notify({
           type,

package/ui.text-notify/types.ts

@@ -0,0 +1,25 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UNotifyProps {
+  /**
+   * A position on the x-axis.
+   */
+  xPosition?: "left" | "center" | "right";
+
+  /**
+   * A position on the y-axis.
+   */
+  yPosition?: "top" | "bottom";
+
+  /**
+   * Use html to render you own content.
+   */
+  html?: boolean;
+
+  /**
+   * Component config object.
+   */
+  config?: Partial<typeof defaultConfig>;
+}

package/ui.text-notify/useAttrs.ts

@@ -0,0 +1,18 @@
+import useUI from "../composables/useUI.ts";
+
+import defaultConfig from "./config.ts";
+
+import type { UseAttrs } from "../types.ts";
+import type { UNotifyProps, Config } from "./types.ts";
+
+export default function useAttrs(props: UNotifyProps): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+
+  const keysAttrs = getKeysAttrs();
+
+  return {
+    config,
+    ...keysAttrs,
+    hasSlotContent,
+  };
+}

package/ui.text-notify/utilNotify.ts

@@ -0,0 +1,140 @@
+import { getRandomId, vuelessConfig } from "../utils/ui.ts";
+import { DELAY_BETWEEN_CLONES, DURATION, LOCAL_STORAGE_ID, NOTIFY_TYPE } from "./constants.ts";
+
+interface NotifyConfig {
+  type?: (typeof NOTIFY_TYPE)[keyof typeof NOTIFY_TYPE];
+  label?: string;
+  description?: string;
+  duration?: number;
+  ignoreDuplicates?: boolean;
+}
+
+interface NotifyEventDetail {
+  type: (typeof NOTIFY_TYPE)[keyof typeof NOTIFY_TYPE];
+  id: string;
+  label: string;
+  description: string;
+  duration: number;
+}
+
+interface VuelessNotifyConfig {
+  duration?: {
+    short?: number;
+    medium?: number;
+    long?: number;
+  };
+}
+
+const globalNotifyDuration = (vuelessConfig.component?.UNotify as VuelessNotifyConfig)?.duration;
+const notifyClearAllEvent: Event = new Event("notifyClearAll");
+
+let lastMessageTime: Date | undefined = undefined;
+let lastMessage: string | undefined = undefined;
+
+export function notify({
+  type,
+  label = "",
+  description = "",
+  duration,
+  ignoreDuplicates,
+}: NotifyConfig = {}): void {
+  const notifyDuration: number = duration || globalNotifyDuration?.short || DURATION.short;
+
+  const isSameMessage = Boolean(
+    lastMessage === description &&
+      lastMessageTime &&
+      new Date().getTime() - lastMessageTime.getTime() < DELAY_BETWEEN_CLONES,
+  );
+
+  if ((isSameMessage || !description) && ignoreDuplicates) {
+    return;
+  }
+
+  lastMessageTime = new Date();
+  lastMessage = description;
+
+  const eventDetail: NotifyEventDetail = {
+    type: type as (typeof NOTIFY_TYPE)[keyof typeof NOTIFY_TYPE],
+    id: getRandomId(),
+    label,
+    description,
+    duration: notifyDuration,
+  };
+
+  const notifyStart: CustomEvent<NotifyEventDetail> = new CustomEvent("notifyStart", {
+    detail: eventDetail,
+  });
+  const notifyEnd: CustomEvent<NotifyEventDetail> = new CustomEvent("notifyEnd", {
+    detail: eventDetail,
+  });
+
+  window.dispatchEvent(notifyStart);
+
+  setTimeout(() => window.dispatchEvent(notifyEnd), notifyDuration);
+}
+
+export function notifySuccess({
+  label,
+  description,
+  duration,
+  ignoreDuplicates,
+}: Omit<NotifyConfig, "type"> = {}): void {
+  notify({
+    label,
+    description,
+    ignoreDuplicates,
+    type: NOTIFY_TYPE.success,
+    duration: duration || globalNotifyDuration?.short || DURATION.short,
+  });
+}
+
+export function notifyWarning({
+  label,
+  description,
+  duration,
+  ignoreDuplicates,
+}: Omit<NotifyConfig, "type"> = {}): void {
+  notify({
+    label,
+    description,
+    ignoreDuplicates,
+    type: NOTIFY_TYPE.warning,
+    duration: duration || globalNotifyDuration?.medium || DURATION.medium,
+  });
+}
+
+export function notifyError({
+  label,
+  description,
+  duration,
+  ignoreDuplicates,
+}: Omit<NotifyConfig, "type"> = {}): void {
+  notify({
+    label,
+    description,
+    ignoreDuplicates,
+    type: NOTIFY_TYPE.error,
+    duration: duration || globalNotifyDuration?.long || DURATION.long,
+  });
+}
+
+export function clearNotifications(): void {
+  window.dispatchEvent(notifyClearAllEvent);
+}
+
+export function setDelayedNotify(settings: NotifyConfig): void {
+  localStorage.setItem(LOCAL_STORAGE_ID, JSON.stringify(settings));
+}
+
+export function getDelayedNotify(): void {
+  const notifyData: NotifyConfig | null = JSON.parse(
+    localStorage.getItem(LOCAL_STORAGE_ID) || "null",
+  );
+
+  clearNotifications();
+
+  if (notifyData) {
+    notify(notifyData);
+    localStorage.removeItem(LOCAL_STORAGE_ID);
+  }
+}