@volverjs/ui-vue 0.0.9-beta.4 → 0.0.9-beta.5

package/README.md

@@ -1,13 +1,13 @@
 <div align="center">
   
-[![volverjs](.storybook/static/volverjs-beta.svg)](https://volverjs.github.io/ui-vue)
+[![volverjs](.storybook/static/volverjs-ui-vue.svg)](https://volverjs.github.io/ui-vue)
 
 ## @volverjs/ui-vue
 
 `vue` `components` `component-library` `design-system` \
 `input` `button` `accordion` `badge` `combobox` `breadcrumb` `dialog`\
 `checkbox` `radio` `textarea` `badge`
-  
+
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=volverjs_ui-vue&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=volverjs_ui-vue) [![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=volverjs_ui-vue&metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=volverjs_ui-vue) [![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=volverjs_ui-vue&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=volverjs_ui-vue) [![Depfu](https://badges.depfu.com/badges/4b0c9d8ea210e93aa7a181e7252716f2/status.svg)](https://depfu.com) [![Depfu](https://badges.depfu.com/badges/4b0c9d8ea210e93aa7a181e7252716f2/overview.svg)](https://depfu.com/github/volverjs/ui-vue?project_id=38572)
 
 <br>

package/auto-imports.d.ts

@@ -7,6 +7,7 @@ declare global {
   const EffectScope: typeof import('vue')['EffectScope']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const composables: typeof import('./src/composables/index')['default']
   const computed: typeof import('vue')['computed']
   const computedAsync: typeof import('@vueuse/core')['computedAsync']
   const computedEager: typeof import('@vueuse/core')['computedEager']
@@ -115,6 +116,7 @@ declare global {
   const unrefElement: typeof import('@vueuse/core')['unrefElement']
   const until: typeof import('@vueuse/core')['until']
   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useAlert: typeof import('./src/composables/index')['useAlert']
   const useAnimate: typeof import('@vueuse/core')['useAnimate']
   const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
   const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']

package/dist/composables/alert/useAlert.d.ts

@@ -0,0 +1,27 @@
+import type { Alert } from '@/types/alert';
+/**
+ * @description Composable to access alert groups, alerts and functions to add, remove and get alerts by group.
+ * @example
+ *  const { groups, alerts, addAlert, removeAlert, getAlerts } = useAlert()
+ *  addAlert({
+ *      title: 'Success!',
+ *      modifiers: 'success',
+ *  })
+ *
+ *  `<vv-alert-group :items="alerts" :onClose="removeAlert" />`
+ *
+ *  @returns  {
+ *      alerts: ComputedRef<Alert[]> reactive list of alerts default group,
+ *      groups: ReactiveRef<Map<string, Map<string, Alert>>>,
+ *      addAlert: Function to add alert,
+ *      removeAlert: Function to remove alert,
+ *      getAlerts: Function to get alerts by group
+ *  }
+ */
+export declare const useAlert: () => {
+    groups: Map<string, Map<string, Alert>>;
+    alerts: globalThis.ComputedRef<Alert[]>;
+    addAlert: ({ id, group, title, icon, content, footer, modifiers, dismissable, autoClose, }?: Partial<Alert>) => void;
+    removeAlert: (id: string | number, group?: string) => void;
+    getAlerts: (group?: string) => globalThis.ComputedRef<Alert[]>;
+};

package/dist/composables/index.d.ts

@@ -0,0 +1,2 @@
+import { useAlert } from './alert/useAlert';
+export { useAlert };

package/dist/composables/index.es.js

@@ -0,0 +1,81 @@
+import { reactive, computed } from "vue";
+const DEFAULT_ALERT_AUTO_CLOSE = 1e4;
+const DEFAULT_ALERT_MODIFIERS = "info";
+const DEFAULT_ALERT_DISMISSABLE = true;
+const DEFAULT_ALERT_GROUP = "default";
+const DEFAULT_ALERT_INFO_ICON = "information";
+const DEFAULT_ALERT_SUCCESS_ICON = "check-circle";
+const DEFAULT_ALERT_WARNING_ICON = "warning";
+const DEFAULT_ALERT_DANGER_ICON = "error";
+const DefaultAlertIconMap = /* @__PURE__ */ new Map([
+  ["success", DEFAULT_ALERT_SUCCESS_ICON],
+  ["info", DEFAULT_ALERT_INFO_ICON],
+  ["warning", DEFAULT_ALERT_WARNING_ICON],
+  ["danger", DEFAULT_ALERT_DANGER_ICON]
+]);
+const groups = reactive(
+  /* @__PURE__ */ new Map([
+    [DEFAULT_ALERT_GROUP, /* @__PURE__ */ new Map()]
+  ])
+);
+const useAlert = () => {
+  const addAlert = ({
+    id = crypto.randomUUID(),
+    group = DEFAULT_ALERT_GROUP,
+    title,
+    icon = DEFAULT_ALERT_INFO_ICON,
+    content,
+    footer,
+    modifiers = DEFAULT_ALERT_MODIFIERS,
+    dismissable = DEFAULT_ALERT_DISMISSABLE,
+    autoClose = DEFAULT_ALERT_AUTO_CLOSE
+  } = {}) => {
+    if (!groups.has(group)) {
+      groups.set(group, /* @__PURE__ */ new Map());
+    }
+    const groupMap = groups.get(group);
+    const normalizedModifiers = typeof modifiers === "string" ? modifiers.split(" ") : modifiers;
+    if (!icon) {
+      const alertModifier = normalizedModifiers.find(
+        (modifier) => DefaultAlertIconMap.has(modifier)
+      );
+      if (alertModifier) {
+        icon = DefaultAlertIconMap.get(alertModifier);
+      }
+    }
+    groupMap == null ? void 0 : groupMap.set(id.toString(), {
+      id,
+      group,
+      title,
+      icon,
+      content,
+      footer,
+      modifiers,
+      dismissable,
+      autoClose,
+      timestamp: Date.now()
+    });
+  };
+  const removeAlert = (id, group = DEFAULT_ALERT_GROUP) => {
+    const groupMap = groups.get(group);
+    groupMap == null ? void 0 : groupMap.delete(id.toString());
+  };
+  const getAlerts = (group = DEFAULT_ALERT_GROUP) => {
+    return computed(() => {
+      const groupMap = groups.get(group);
+      return groupMap && groupMap instanceof Map ? Array.from(groupMap == null ? void 0 : groupMap.values()).sort(
+        (a, b) => a.timestamp - b.timestamp
+      ) : [];
+    });
+  };
+  return {
+    groups,
+    alerts: getAlerts(),
+    addAlert,
+    removeAlert,
+    getAlerts
+  };
+};
+export {
+  useAlert
+};

package/dist/composables/index.umd.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).composables={},e.vue)}(this,(function(e,t){"use strict";const o="default",n="information",i=new Map([["success","check-circle"],["info",n],["warning","warning"],["danger","error"]]),s=t.reactive(new Map([[o,new Map]]));e.useAlert=()=>{const e=(e=o)=>t.computed((()=>{const t=s.get(e);return t&&t instanceof Map?Array.from(null==t?void 0:t.values()).sort(((e,t)=>e.timestamp-t.timestamp)):[]}));return{groups:s,alerts:e(),addAlert:({id:e=crypto.randomUUID(),group:t=o,title:r,icon:a=n,content:l,footer:u,modifiers:c="info",dismissable:f=true,autoClose:d=1e4}={})=>{s.has(t)||s.set(t,new Map);const p=s.get(t),m="string"==typeof c?c.split(" "):c;if(!a){const e=m.find((e=>i.has(e)));e&&(a=i.get(e))}null==p||p.set(e.toString(),{id:e,group:t,title:r,icon:a,content:l,footer:u,modifiers:c,dismissable:f,autoClose:d,timestamp:Date.now()})},removeAlert:(e,t=o)=>{const n=s.get(t);null==n||n.delete(e.toString())},getAlerts:e}},Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));

package/dist/constants.d.ts

@@ -1,6 +1,7 @@
 import type { InjectionKey, Ref } from 'vue';
 import type { Emitter } from 'mitt';
 import type { Volver } from './Volver';
+import type { AlertModifiers } from './types/alert';
 export declare const DEFAULT_ICONIFY_PROVIDER = "vv";
 export declare enum Side {
     left = "left",
@@ -86,3 +87,12 @@ export declare const INJECTION_KEY_ALERT_GROUP: InjectionKey<{
         close: string;
     }> | undefined;
 }>;
+export declare const DEFAULT_ALERT_AUTO_CLOSE = 10000;
+export declare const DEFAULT_ALERT_MODIFIERS = "info";
+export declare const DEFAULT_ALERT_DISMISSABLE = true;
+export declare const DEFAULT_ALERT_GROUP = "default";
+export declare const DEFAULT_ALERT_INFO_ICON = "information";
+export declare const DEFAULT_ALERT_SUCCESS_ICON = "check-circle";
+export declare const DEFAULT_ALERT_WARNING_ICON = "warning";
+export declare const DEFAULT_ALERT_DANGER_ICON = "error";
+export declare const DefaultAlertIconMap: Map<AlertModifiers, string>;

package/dist/icons.es.js

@@ -1,5 +1,5 @@
 const prefix$2 = "normal";
-const lastModified$2 = 1685977703;
+const lastModified$2 = 1686056093;
 const icons$3 = {
   add: {
     body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 12h16m-8-8v16"/>'
@@ -614,7 +614,7 @@ const normal = {
   height: height$1
 };
 const prefix$1 = "detailed";
-const lastModified$1 = 1685977702;
+const lastModified$1 = 1686056093;
 const icons$2 = {
   add: {
     body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 15.999h24m-12-12v24"/>'
@@ -1227,7 +1227,7 @@ const detailed = {
   height
 };
 const prefix = "simple";
-const lastModified = 1685977703;
+const lastModified = 1686056093;
 const icons$1 = {
   add: {
     body: '<path fill="none" stroke="currentColor" stroke-linecap="round" d="M.5 8h15M8 .5v15"/>'