@evance/evance-ui 1.0.37 → 1.0.39

package/dist/esm/chunks/EvMessage.vue_vue_type_script_setup_true_lang-BFg-IyFu.mjs

@@ -0,0 +1,235 @@
+/*! Evance UI v1.0.39 | MIT License */
+import { defineComponent, useSlots, shallowRef, computed, withDirectives, createBlock, openBlock, resolveDynamicComponent, normalizeClass, unref, withCtx, createElementVNode, createElementBlock, createCommentVNode, createVNode, renderSlot, Transition, vShow, nextTick } from "vue";
+import { _ as _sfc_main$1 } from "./EvIcon.vue_vue_type_style_index_0_lang-CPjmQFT9.mjs";
+import { C as CancelIcon } from "./CancelIcon-DpLSA4l5.mjs";
+import { C as ChevronDownIcon } from "./ChevronDownIcon-l17avEhT.mjs";
+import { _ as _sfc_main$4 } from "./EvButton.vue_vue_type_script_setup_true_lang-CoaQ8dbb.mjs";
+import { u as useModelProxy } from "./modelProxy-Cr9fGue2.mjs";
+import { I as IconProp, a as appearanceIcon } from "./icons-COe4waWk.mjs";
+import { m as makeTagProps } from "./tag-DdrTn8yN.mjs";
+import { m as makeComponentProps } from "./component-D8Vj5yiG.mjs";
+import { p as propsFactory } from "./props-bP0y56e4.mjs";
+import { b as makeAppearanceProps } from "./appearance-Deh7P6ml.mjs";
+import { u as useLocaleFunctions } from "./locale-BwEhCAcl.mjs";
+import { h as hasSlotWithContent } from "./hasSlotWithContent-DAWNVOsN.mjs";
+import { _ as _sfc_main$2 } from "./EvHeading.vue_vue_type_style_index_0_lang-Bip9dH74.mjs";
+import { _ as _sfc_main$3 } from "./EvButtonGroup.vue_vue_type_script_setup_true_lang-gHPt4Ag2.mjs";
+import { m as makeClassName, a as appearanceModifier } from "./modifiers-D0oZiWPs.mjs";
+import { l as isNumber } from "./is-functions-Bryy4vNN.mjs";
+const makeEvMessageProps = propsFactory(
+  {
+    description: String,
+    dismissDelay: {
+      type: [Boolean, Number],
+      default: 0
+    },
+    dismissible: [Boolean, Object],
+    expandable: Boolean,
+    icon: IconProp,
+    modelValue: {
+      type: [Boolean, Object],
+      default: true
+    },
+    title: String,
+    actions: Array,
+    ...makeAppearanceProps({
+      variant: "tonal"
+    }),
+    ...makeTagProps({
+      tag: "section"
+    }),
+    ...makeComponentProps()
+  },
+  "EvMessage"
+);
+const _hoisted_1 = { class: "ev-message--icon" };
+const _hoisted_2 = { class: "ev-message--content" };
+const _hoisted_3 = {
+  key: 0,
+  class: "ev-message--expandable"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "ev-message--description"
+};
+const _hoisted_5 = ["innerHTML"];
+const _hoisted_6 = {
+  key: 2,
+  class: "ev-message--actions"
+};
+const _hoisted_7 = {
+  key: 0,
+  class: "ev-message--expand"
+};
+const _hoisted_8 = {
+  key: 0,
+  class: "ev-message--dismiss"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "EvMessage",
+  props: {
+    ...makeEvMessageProps()
+  },
+  emits: [
+    "dismissed",
+    "click:dismiss",
+    "click:expand",
+    "update:modelValue"
+  ],
+  setup(__props, { emit }) {
+    const props = __props;
+    const slots = useSlots();
+    const hasDefaultSlot = hasSlotWithContent(slots, "default");
+    const hasActionSlot = hasSlotWithContent(slots, "action");
+    const modelProxy = useModelProxy(props, "modelValue");
+    const isExpanded = shallowRef(false);
+    const { t } = useLocaleFunctions();
+    const iconGlyph = computed(() => {
+      return props.icon ? props.icon : appearanceIcon(props.appearance);
+    });
+    const showExpandable = computed(() => {
+      return (hasDefaultSlot.value || !!props.description || hasActionSlot.value || !!actions.value.length) && (!props.expandable || isExpanded.value);
+    });
+    const variantModifier = computed(() => {
+      return makeClassName(props.variant, "is-variant");
+    });
+    function dismiss() {
+      if (!props.dismissDelay) {
+        modelProxy.value = false;
+      } else if (isNumber(props.dismissDelay)) {
+        const delay = props.dismissDelay;
+        setTimeout(() => {
+          modelProxy.value = false;
+          emit("dismissed");
+        }, delay);
+      }
+      emit("click:dismiss");
+    }
+    function expand() {
+      isExpanded.value = !isExpanded.value;
+      emit("click:expand", isExpanded.value);
+    }
+    const actions = computed(() => {
+      if (!props.actions) {
+        return [];
+      }
+      const values = [];
+      for (const action of props.actions) {
+        const actionDefaults = {
+          appearance: props.variant === "bold" ? "inverse" : props.appearance,
+          variant: "link",
+          size: "small"
+        };
+        values.push(Object.assign(actionDefaults, action));
+      }
+      return values;
+    });
+    function onEnter(el) {
+      nextTick(() => {
+        const element = el;
+        element.style.height = "auto";
+        const height = getComputedStyle(element).height;
+        element.style.height = "0px";
+        requestAnimationFrame(() => {
+          element.style.height = height;
+        });
+      });
+    }
+    function onAfterEnter(el) {
+      const element = el;
+      element.style.height = "auto";
+    }
+    function onLeave(el) {
+      nextTick(() => {
+        const element = el;
+        element.style.height = getComputedStyle(element).height;
+        requestAnimationFrame(() => {
+          element.style.height = "0px";
+        });
+      });
+    }
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createBlock(resolveDynamicComponent(props.tag), {
+        class: normalizeClass([
+          "ev-message",
+          variantModifier.value,
+          unref(appearanceModifier)(props.appearance),
+          props.class
+        ])
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            renderSlot(_ctx.$slots, "icon", {}, () => [
+              createVNode(_sfc_main$1, { glyph: iconGlyph.value }, null, 8, ["glyph"])
+            ])
+          ]),
+          createElementVNode("div", _hoisted_2, [
+            createVNode(unref(_sfc_main$2), {
+              class: "ev-message--title",
+              size: "small",
+              text: props.title
+            }, null, 8, ["text"]),
+            createVNode(Transition, {
+              name: "transition-message",
+              onBeforeEnter: onEnter,
+              onAfterEnter,
+              onLeave
+            }, {
+              default: withCtx(() => [
+                showExpandable.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                  unref(hasDefaultSlot) ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                    renderSlot(_ctx.$slots, "default")
+                  ])) : !!props.description ? (openBlock(), createElementBlock("div", {
+                    key: 1,
+                    class: "ev-message--description",
+                    innerHTML: props.description
+                  }, null, 8, _hoisted_5)) : createCommentVNode("", true),
+                  unref(hasActionSlot) || actions.value.length ? (openBlock(), createElementBlock("div", _hoisted_6, [
+                    renderSlot(_ctx.$slots, "actions", {}, () => [
+                      createVNode(unref(_sfc_main$3), { items: actions.value }, null, 8, ["items"])
+                    ])
+                  ])) : createCommentVNode("", true)
+                ])) : createCommentVNode("", true)
+              ]),
+              _: 3
+            })
+          ]),
+          props.expandable ? (openBlock(), createElementBlock("div", _hoisted_7, [
+            createVNode(_sfc_main$4, {
+              rounded: "",
+              class: normalizeClass([{ "is-expanded": isExpanded.value }]),
+              "aria-label": unref(t)("expand"),
+              icon: unref(ChevronDownIcon),
+              size: "small",
+              variant: "subtle",
+              onClick: expand
+            }, null, 8, ["class", "aria-label", "icon"])
+          ])) : createCommentVNode("", true),
+          createVNode(Transition, { name: "transition-fade" }, {
+            default: withCtx(() => [
+              props.dismissible ? (openBlock(), createElementBlock("div", _hoisted_8, [
+                createVNode(_sfc_main$4, {
+                  rounded: "",
+                  "aria-label": unref(t)("dismiss"),
+                  icon: unref(CancelIcon),
+                  size: "small",
+                  variant: "subtle",
+                  onClick: dismiss
+                }, null, 8, ["aria-label", "icon"])
+              ])) : createCommentVNode("", true)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 3
+      }, 8, ["class"])), [
+        [vShow, unref(modelProxy)]
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _,
+  makeEvMessageProps as m
+};
+//# sourceMappingURL=EvMessage.vue_vue_type_script_setup_true_lang-BFg-IyFu.mjs.map

package/dist/esm/chunks/EvMessage.vue_vue_type_script_setup_true_lang-BFg-IyFu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvMessage.vue_vue_type_script_setup_true_lang-BFg-IyFu.mjs","sources":["../../../src/components/EvMessage/EvMessage.ts","../../../src/components/EvMessage/EvMessage.vue"],"sourcesContent":["import { AppearanceProp, makeAppearanceProps, propsFactory } from \"@/util\";\nimport { PropType, Ref } from \"vue\";\nimport { IconProp, IconValue } from \"@/composables/icons\";\nimport { makeTagProps } from \"@/composables/tag\";\nimport { makeComponentProps } from \"@/composables/component\";\nimport { EvButtonProps } from \"@/components/EvButton\";\n\ntype ModelValueProp = boolean | Ref<boolean>;\ntype EvMessageVariant = \"subtle\" | \"tonal\" | \"bold\";\n\n/**\n * # EvMessageProps\n */\nexport interface EvMessageProps {\n    description?: string;\n    dismissible?: boolean;\n    expandable?: boolean;\n    icon?: IconValue;\n    modelValue?: Ref<boolean>;\n    title?: string;\n    variant?: EvMessageVariant;\n    actions?: EvButtonProps[];\n    appearance?: AppearanceProp;\n    onDismiss?: () => void;\n}\n\nexport interface EvMessageSlots {\n    icon?: any;\n    default?: any;\n    actions?: any;\n}\n\n/**\n * # makeEvMessageProps\n */\nexport const makeEvMessageProps = propsFactory(\n    {\n        description: String,\n        dismissDelay: {\n            type: [Boolean, Number],\n            default: 0,\n        },\n        dismissible: [Boolean, Object] as PropType<ModelValueProp>,\n        expandable: Boolean,\n        icon: IconProp,\n        modelValue: {\n            type: [Boolean, Object] as PropType<ModelValueProp>,\n            default: true,\n        },\n        title: String,\n        actions: Array as PropType<EvButtonProps[]>,\n\n        ...makeAppearanceProps({\n            variant: \"tonal\",\n        }),\n        ...makeTagProps({\n            tag: \"section\",\n        }),\n        ...makeComponentProps(),\n    },\n    \"EvMessage\",\n);\n","<script setup lang=\"ts\">\n/**\n * # EvMessage\n *\n * `<ev-message />`\n */\nimport \"./EvMessage.scss\";\nimport { appearanceModifier, isNumber, makeClassName } from \"@/util\";\nimport EvIcon from \"../EvIcon/EvIcon.vue\";\nimport { CancelIcon, ChevronDownIcon } from \"@/icons\";\nimport { computed, nextTick, shallowRef } from \"vue\";\nimport EvButton from \"@/components/EvButton/EvButton.vue\";\nimport { useModelProxy } from \"@/composables/modelProxy\";\nimport { appearanceIcon } from \"@/composables/icons\";\nimport { makeEvMessageProps } from \"./EvMessage\";\nimport { useLocaleFunctions } from \"@/composables/locale\";\nimport { EvButtonProps } from \"@/components/EvButton\";\nimport { hasSlotWithContent } from \"@/composables/hasSlotWithContent\";\nimport { EvButtonGroup, EvHeading } from \"@/components\";\n\nconst props = defineProps({\n    ...makeEvMessageProps(),\n});\nconst slots = defineSlots<{\n    actions(): never;\n    default(): never;\n    icon(): never;\n}>();\nconst hasDefaultSlot = hasSlotWithContent(slots, \"default\");\nconst hasActionSlot = hasSlotWithContent(slots, \"action\");\nconst modelProxy = useModelProxy(props, \"modelValue\");\nconst isExpanded = shallowRef(false);\nconst { t } = useLocaleFunctions();\n\n// Emit\nconst emit = defineEmits([\n    \"dismissed\",\n    \"click:dismiss\",\n    \"click:expand\",\n    \"update:modelValue\",\n]);\n\n/**\n * ## Icon Glyph\n */\nconst iconGlyph = computed(() => {\n    return props.icon ? props.icon : appearanceIcon(props.appearance);\n});\n\nconst showExpandable = computed(() => {\n    return (\n        (hasDefaultSlot.value ||\n            !!props.description ||\n            hasActionSlot.value ||\n            !!actions.value.length) &&\n        (!props.expandable || isExpanded.value)\n    );\n});\n\nconst variantModifier = computed(() => {\n    return makeClassName(props.variant, \"is-variant\");\n});\n\n/**\n * ## On Click Dismiss\n */\nfunction dismiss(): void {\n    if (!props.dismissDelay) {\n        modelProxy.value = false;\n    } else if (isNumber(props.dismissDelay)) {\n        const delay = props.dismissDelay;\n        setTimeout(() => {\n            modelProxy.value = false;\n            emit(\"dismissed\");\n        }, delay);\n    }\n    emit(\"click:dismiss\");\n}\n\n/**\n * ## On Click Expand\n */\nfunction expand(): void {\n    isExpanded.value = !isExpanded.value;\n    emit(\"click:expand\", isExpanded.value);\n}\n\n/**\n * # Actions\n */\nconst actions = computed(() => {\n    if (!props.actions) {\n        return [];\n    }\n    const values = [];\n    for (const action of props.actions) {\n        const actionDefaults: EvButtonProps = {\n            appearance: props.variant === \"bold\" ? \"inverse\" : props.appearance,\n            variant: \"link\",\n            size: \"small\",\n        };\n        values.push(Object.assign(actionDefaults, action));\n    }\n    return values;\n});\n\n/**\n * # onEnter\n * @param el\n */\nfunction onEnter(el: Element) {\n    nextTick(() => {\n        const element = el as HTMLElement;\n        element.style.height = \"auto\";\n        const height = getComputedStyle(element).height;\n        element.style.height = \"0px\";\n        requestAnimationFrame(() => {\n            element.style.height = height;\n        });\n    });\n}\n\n/**\n * # onAfterEnter\n * @param el\n */\nfunction onAfterEnter(el: Element) {\n    const element = el as HTMLElement;\n    element.style.height = \"auto\";\n}\n\n/**\n * # onLeave\n * @param el\n */\nfunction onLeave(el: Element) {\n    nextTick(() => {\n        const element = el as HTMLElement;\n        element.style.height = getComputedStyle(element).height;\n        requestAnimationFrame(() => {\n            element.style.height = \"0px\";\n        });\n    });\n}\n</script>\n\n<template>\n    <component\n        :is=\"props.tag\"\n        v-show=\"modelProxy\"\n        :class=\"[\n            'ev-message',\n            variantModifier,\n            appearanceModifier(props.appearance),\n            props.class,\n        ]\">\n        <div class=\"ev-message--icon\">\n            <slot name=\"icon\">\n                <ev-icon :glyph=\"iconGlyph\" />\n            </slot>\n        </div>\n        <div class=\"ev-message--content\">\n            <ev-heading\n                class=\"ev-message--title\"\n                size=\"small\"\n                :text=\"props.title\" />\n            <transition\n                name=\"transition-message\"\n                @before-enter=\"onEnter\"\n                @after-enter=\"onAfterEnter\"\n                @leave=\"onLeave\">\n                <div v-if=\"showExpandable\" class=\"ev-message--expandable\">\n                    <div v-if=\"hasDefaultSlot\" class=\"ev-message--description\">\n                        <slot name=\"default\" />\n                    </div>\n                    <div\n                        v-else-if=\"!!props.description\"\n                        class=\"ev-message--description\"\n                        v-html=\"props.description\"></div>\n                    <div\n                        v-if=\"hasActionSlot || actions.length\"\n                        class=\"ev-message--actions\">\n                        <slot name=\"actions\">\n                            <ev-button-group :items=\"actions\" />\n                        </slot>\n                    </div>\n                </div>\n            </transition>\n        </div>\n        <div v-if=\"props.expandable\" class=\"ev-message--expand\">\n            <ev-button\n                rounded\n                :class=\"[{ 'is-expanded': isExpanded }]\"\n                :aria-label=\"t('expand')\"\n                :icon=\"ChevronDownIcon\"\n                size=\"small\"\n                variant=\"subtle\"\n                @click=\"expand\" />\n        </div>\n        <transition name=\"transition-fade\">\n            <div v-if=\"props.dismissible\" class=\"ev-message--dismiss\">\n                <ev-button\n                    rounded\n                    :aria-label=\"t('dismiss')\"\n                    :icon=\"CancelIcon\"\n                    size=\"small\"\n                    variant=\"subtle\"\n                    @click=\"dismiss\" />\n            </div>\n        </transition>\n    </component>\n</template>\n"],"names":["_useSlots"],"mappings":"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"}

package/dist/esm/chunks/EvNotification.vue_vue_type_script_setup_true_lang-69zTibRQ.mjs

@@ -0,0 +1,97 @@
+/*! Evance UI v1.0.39 | MIT License */
+import { defineComponent, useSlots, computed, toRef, watch, onMounted, createBlock, openBlock, unref, normalizeStyle, withCtx, createVNode, mergeProps, renderSlot } from "vue";
+import { m as makeEvMessageProps, _ as _sfc_main$2 } from "./EvMessage.vue_vue_type_script_setup_true_lang-BFg-IyFu.mjs";
+import { p as propsFactory } from "./props-bP0y56e4.mjs";
+import { _ as _sfc_main$1 } from "./EvSurface.vue_vue_type_script_setup_true_lang-DGWAbwd7.mjs";
+import { u as useModelProxy } from "./modelProxy-Cr9fGue2.mjs";
+import { u as useStack } from "./stack-CpdRdS0l.mjs";
+import { o as omit, f as filterComponentProps } from "./helpers-CujiujPK.mjs";
+const makeEvNotificationProps = propsFactory(
+  {
+    timeout: Number,
+    zIndex: {
+      type: [Number, String],
+      default: 2e3
+    },
+    ...makeEvMessageProps({
+      tag: "div",
+      dismissible: true,
+      dismissDelay: true,
+      variant: "subtle"
+    })
+  },
+  "EvNotification"
+);
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "EvNotification",
+  props: {
+    ...makeEvNotificationProps()
+  },
+  emits: ["dismiss", "update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    useSlots();
+    const model = useModelProxy(props, "modelValue");
+    const timeout = useModelProxy(props, "timeout");
+    const messageProps = computed(() => {
+      return omit(filterComponentProps(_sfc_main$2, props), ["modelValue"]);
+    });
+    function dismiss() {
+      model.value = false;
+      emit("dismiss");
+    }
+    const { stackStyles } = useStack(model, toRef(props, "zIndex"), false);
+    watch(timeout, () => {
+      if (!timeout.value) {
+        stopTimer();
+      } else {
+        startTimer();
+      }
+    });
+    onMounted(() => {
+      if (!timeout.value) {
+        return;
+      }
+      startTimer();
+    });
+    let timer = null;
+    function startTimer() {
+      timer = setTimeout(() => {
+        dismiss();
+      }, timeout.value);
+    }
+    function stopTimer() {
+      clearTimeout(timer);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$1), {
+        class: "ev-notification",
+        role: "alert",
+        rounded: "small",
+        elevation: "overlay",
+        style: normalizeStyle([unref(stackStyles)])
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(_sfc_main$2), mergeProps(messageProps.value, { "onClick:dismiss": dismiss }), {
+            icon: withCtx(() => [
+              renderSlot(_ctx.$slots, "icon")
+            ]),
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            actions: withCtx(() => [
+              renderSlot(_ctx.$slots, "actions")
+            ]),
+            _: 3
+          }, 16)
+        ]),
+        _: 3
+      }, 8, ["style"]);
+    };
+  }
+});
+export {
+  _sfc_main as _,
+  makeEvNotificationProps as m
+};
+//# sourceMappingURL=EvNotification.vue_vue_type_script_setup_true_lang-69zTibRQ.mjs.map

package/dist/esm/chunks/EvNotification.vue_vue_type_script_setup_true_lang-69zTibRQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvNotification.vue_vue_type_script_setup_true_lang-69zTibRQ.mjs","sources":["../../../src/components/EvNotification/EvNotification.ts","../../../src/components/EvNotification/EvNotification.vue"],"sourcesContent":["import { propsFactory } from \"@/util\";\nimport {\n    EvMessageProps,\n    EvMessageSlots,\n    makeEvMessageProps,\n} from \"../EvMessage\";\n\n/**\n * # EvNotificationProps\n */\nexport interface EvNotificationProps extends EvMessageProps {\n    timeout?: number;\n}\n\nexport interface EvNotificationSlots extends EvMessageSlots {}\n\n/**\n * # makeEvNotificationProps\n */\nexport const makeEvNotificationProps = propsFactory(\n    {\n        timeout: Number,\n        zIndex: {\n            type: [Number, String],\n            default: 2000,\n        },\n\n        ...makeEvMessageProps({\n            tag: \"div\" as const,\n            dismissible: true,\n            dismissDelay: true as const,\n            variant: \"subtle\",\n        }),\n    },\n    \"EvNotification\",\n);\n","<script setup lang=\"ts\">\nimport \"./EvNotification.scss\";\nimport { makeEvNotificationProps } from \"./EvNotification\";\nimport { EvMessage } from \"../EvMessage\";\nimport { EvSurface } from \"../EvSurface\";\nimport { filterComponentProps, omit } from \"@/util\";\nimport { computed, onMounted, toRef, watch } from \"vue\";\nimport { useModelProxy } from \"@/composables/modelProxy\";\nimport { useStack } from \"@/composables/stack\";\n\nconst props = defineProps({\n    ...makeEvNotificationProps(),\n});\nconst slots = defineSlots<{\n    actions(): never;\n    default(): never;\n    icon(): never;\n}>();\nconst model = useModelProxy(props, \"modelValue\");\nconst timeout = useModelProxy(props, \"timeout\");\nconst messageProps = computed(() => {\n    return omit(filterComponentProps(EvMessage, props), [\"modelValue\"]);\n});\n\n// Emit\nconst emit = defineEmits([\"dismiss\", \"update:modelValue\"]);\n\nfunction dismiss() {\n    model.value = false;\n    emit(\"dismiss\");\n}\n\nconst { stackStyles } = useStack(model, toRef(props, \"zIndex\"), false);\n\nwatch(timeout, () => {\n    if (!timeout.value) {\n        stopTimer();\n    } else {\n        startTimer();\n    }\n});\n\nonMounted(() => {\n    if (!timeout.value) {\n        return;\n    }\n    startTimer();\n});\n\nlet timer: any = null;\nfunction startTimer() {\n    timer = setTimeout(() => {\n        dismiss();\n    }, timeout.value);\n}\n\nfunction stopTimer() {\n    clearTimeout(timer);\n}\n</script>\n\n<template>\n    <ev-surface\n        class=\"ev-notification\"\n        role=\"alert\"\n        rounded=\"small\"\n        elevation=\"overlay\"\n        :style=\"[stackStyles]\">\n        <ev-message v-bind=\"messageProps\" @click:dismiss=\"dismiss\">\n            <template #icon>\n                <slot name=\"icon\" />\n            </template>\n            <template #default>\n                <slot name=\"default\" />\n            </template>\n            <template #actions>\n                <slot name=\"actions\" />\n            </template>\n        </ev-message>\n    </ev-surface>\n</template>\n"],"names":["_useSlots","EvMessage"],"mappings":";;;;;;;;AAmBO,MAAM,0BAA0B;AAAA,EACnC;AAAA,IACI,SAAS;AAAA,IACT,QAAQ;AAAA,MACJ,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IACb;AAAA,IAEA,GAAG,mBAAmB;AAAA,MAClB,KAAK;AAAA,MACL,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,IACZ,CAAA;AAAA,EACL;AAAA,EACA;AACJ;;;;;;;;;ACtBcA;AAKR,UAAA,QAAQ,cAAc,OAAO,YAAY;AACzC,UAAA,UAAU,cAAc,OAAO,SAAS;AACxC,UAAA,eAAe,SAAS,MAAM;AAChC,aAAO,KAAK,qBAAqBC,aAAW,KAAK,GAAG,CAAC,YAAY,CAAC;AAAA,IAAA,CACrE;AAKD,aAAS,UAAU;AACf,YAAM,QAAQ;AACd,WAAK,SAAS;AAAA,IAAA;AAGZ,UAAA,EAAE,YAAgB,IAAA,SAAS,OAAO,MAAM,OAAO,QAAQ,GAAG,KAAK;AAErE,UAAM,SAAS,MAAM;AACb,UAAA,CAAC,QAAQ,OAAO;AACN,kBAAA;AAAA,MAAA,OACP;AACQ,mBAAA;AAAA,MAAA;AAAA,IACf,CACH;AAED,cAAU,MAAM;AACR,UAAA,CAAC,QAAQ,OAAO;AAChB;AAAA,MAAA;AAEO,iBAAA;AAAA,IAAA,CACd;AAED,QAAI,QAAa;AACjB,aAAS,aAAa;AAClB,cAAQ,WAAW,MAAM;AACb,gBAAA;AAAA,MAAA,GACT,QAAQ,KAAK;AAAA,IAAA;AAGpB,aAAS,YAAY;AACjB,mBAAa,KAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/chunks/EvNotifications.vue_vue_type_script_setup_true_lang-k-EdWMKB.mjs

@@ -0,0 +1,155 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+/*! Evance UI v1.0.39 | MIT License */
+import { inject, ref, isRef, shallowRef, watch, h, defineComponent, computed, createBlock, openBlock, Teleport, unref, createVNode, TransitionGroup, normalizeStyle, withCtx, createElementBlock, Fragment, renderList, mergeProps, resolveDynamicComponent } from "vue";
+import { _ as _sfc_main$1 } from "./EvNotification.vue_vue_type_script_setup_true_lang-69zTibRQ.mjs";
+import { u as useTeleport } from "./teleport-5fTECMmY.mjs";
+import { g as getLastZIndex } from "./stack-CpdRdS0l.mjs";
+const EvNotificationServiceSymbol = Symbol.for("ev:notification-service");
+function injectNotifications() {
+  const service = inject(EvNotificationServiceSymbol);
+  if (!service) {
+    throw new Error(
+      "Evance UI: Unable to find inject notification service."
+    );
+  }
+  return service;
+}
+function useNotification() {
+  const service = injectNotifications();
+  return {
+    add: (props, slots) => {
+      return service.add(props, slots);
+    },
+    dismiss: (id) => {
+      return service.dismiss(id);
+    }
+  };
+}
+class EvNotificationsManager {
+  constructor() {
+    __publicField(this, "notifications", ref([]));
+    __publicField(this, "num", 0);
+  }
+  /**
+   * ## add
+   *
+   * @param props
+   * @param slots
+   */
+  add(props, slots) {
+    const id = ++this.num;
+    const renderedProps = this.createProps(id, props);
+    const renderedSlots = this.createSlots(slots);
+    this.notifications.value.unshift({
+      id,
+      props: renderedProps,
+      slots: renderedSlots
+    });
+    return {
+      id,
+      dismiss: () => {
+        this.dismiss(id);
+      }
+    };
+  }
+  /**
+   * ## createProps
+   *
+   * @param id
+   * @param props
+   * @private
+   */
+  createProps(id, props) {
+    const model = isRef(props.modelValue) ? props.modelValue : shallowRef(true);
+    watch(model, () => {
+      this.dismiss(id);
+    });
+    return Object.assign(props, {
+      modelValue: model
+    });
+  }
+  /**
+   * ## createSlots
+   *
+   * @private
+   * @param slots
+   */
+  createSlots(slots) {
+    const internalSlots = slots ?? {};
+    const renderedSlots = {};
+    for (const key in internalSlots) {
+      const component = internalSlots[key];
+      renderedSlots[key] = (props, slots2) => {
+        return h(component, props, slots2);
+      };
+    }
+    return renderedSlots;
+  }
+  /**
+   * # dismiss
+   *
+   * @param id
+   */
+  dismiss(id) {
+    const index = this.notifications.value.findIndex(
+      (notification) => notification.id === id
+    );
+    this.notifications.value.splice(index, 1);
+  }
+}
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "EvNotifications",
+  setup(__props) {
+    const teleportTarget = useTeleport(shallowRef(false));
+    const service = injectNotifications();
+    const notifications = service.notifications;
+    const zIndex = computed(() => {
+      return getLastZIndex() ?? 2e3;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, { to: unref(teleportTarget) }, [
+        createVNode(TransitionGroup, {
+          name: "transition-notification",
+          class: "ev-notifications",
+          tag: "div",
+          style: normalizeStyle({
+            zIndex: zIndex.value
+          })
+        }, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(notifications), (notification, index) => {
+              return openBlock(), createBlock(unref(_sfc_main$1), mergeProps({
+                key: notification.id
+              }, notification.props, {
+                dismissible: index === 0 ? notification.props.dismissible : false,
+                timeout: index === 0 ? notification.props.timeout : void 0,
+                onDismiss: ($event) => unref(service).dismiss(notification.id)
+              }), {
+                icon: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(notification.slots.icon)))
+                ]),
+                default: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(notification.slots.default)))
+                ]),
+                actions: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(notification.slots.actions)))
+                ]),
+                _: 2
+              }, 1040, ["dismissible", "timeout", "onDismiss"]);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["style"])
+      ], 8, ["to"]);
+    };
+  }
+});
+export {
+  EvNotificationsManager as E,
+  _sfc_main as _,
+  EvNotificationServiceSymbol as a,
+  useNotification as u
+};
+//# sourceMappingURL=EvNotifications.vue_vue_type_script_setup_true_lang-k-EdWMKB.mjs.map

package/dist/esm/chunks/EvNotifications.vue_vue_type_script_setup_true_lang-k-EdWMKB.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvNotifications.vue_vue_type_script_setup_true_lang-k-EdWMKB.mjs","sources":["../../../src/composables/notification.ts","../../../src/components/EvNotifications/EvNotificationsManager.ts","../../../src/components/EvNotifications/EvNotifications.vue"],"sourcesContent":["import { inject, InjectionKey } from \"vue\";\nimport { EvNotificationsManager } from \"@/components/EvNotifications\";\nimport { EvNotificationProps, EvNotificationSlots } from \"@/components\";\n\nexport const EvNotificationServiceSymbol: InjectionKey<EvNotificationsManager> =\n    Symbol.for(\"ev:notification-service\");\n\n/**\n * # injectNotifications\n */\nexport function injectNotifications() {\n    const service = inject(EvNotificationServiceSymbol);\n    if (!service) {\n        throw new Error(\n            \"Evance UI: Unable to find inject notification service.\",\n        );\n    }\n    return service;\n}\n\n/**\n * # useNotification\n */\nexport function useNotification() {\n    const service = injectNotifications();\n    return {\n        add: (props: EvNotificationProps, slots?: EvNotificationSlots) => {\n            return service.add(props, slots);\n        },\n        dismiss: (id: number) => {\n            return service.dismiss(id);\n        },\n    };\n}\n","import { h, isRef, ref, shallowRef, VNode, VNodeProps, watch } from \"vue\";\nimport { Notification } from \"./EvNotifications\";\nimport {\n    EvNotificationProps,\n    EvNotificationSlots,\n} from \"@/components/EvNotification\";\n\n/**\n * # EvNotificationsManager\n */\nexport class EvNotificationsManager {\n    public readonly notifications = ref<Notification[]>([]);\n    private num = 0;\n\n    /**\n     * ## add\n     *\n     * @param props\n     * @param slots\n     */\n    public add(props: EvNotificationProps, slots?: EvNotificationSlots) {\n        const id = ++this.num;\n        const renderedProps = this.createProps(id, props);\n        const renderedSlots = this.createSlots(slots);\n        this.notifications.value.unshift({\n            id,\n            props: renderedProps as object,\n            slots: renderedSlots as object,\n        });\n        return {\n            id,\n            dismiss: () => {\n                this.dismiss(id);\n            },\n        };\n    }\n\n    /**\n     * ## createProps\n     *\n     * @param id\n     * @param props\n     * @private\n     */\n    private createProps(id: number, props: EvNotificationProps) {\n        const model = isRef(props.modelValue)\n            ? props.modelValue\n            : shallowRef(true);\n        watch(model, () => {\n            this.dismiss(id);\n        });\n        return Object.assign(props as VNodeProps, {\n            modelValue: model,\n        });\n    }\n\n    /**\n     * ## createSlots\n     *\n     * @private\n     * @param slots\n     */\n    private createSlots(slots?: EvNotificationSlots) {\n        const internalSlots = slots ?? {};\n        const renderedSlots: {\n            [key: string]: (props: any, slots: any) => VNode;\n        } = {};\n        for (const key in internalSlots) {\n            const component = internalSlots[key as keyof EvNotificationSlots];\n            renderedSlots[key] = (props, slots) => {\n                return h(component!, props, slots);\n            };\n        }\n        return renderedSlots;\n    }\n\n    /**\n     * # dismiss\n     *\n     * @param id\n     */\n    public dismiss(id: number) {\n        const index = this.notifications.value.findIndex(\n            (notification) => notification.id === id,\n        );\n        this.notifications.value.splice(index, 1);\n    }\n}\n","<script setup lang=\"ts\">\nimport \"./EvNotifications.scss\";\nimport { EvNotification } from \"../EvNotification\";\nimport { computed, shallowRef } from \"vue\";\nimport { useTeleport } from \"@/composables/teleport\";\nimport { injectNotifications } from \"@/composables/notification\";\nimport { getLastZIndex } from \"@/composables/stack\";\n\nconst teleportTarget = useTeleport(shallowRef(false));\nconst service = injectNotifications();\nconst notifications = service.notifications;\n\nconst zIndex = computed(() => {\n    return getLastZIndex() ?? 2000;\n});\n</script>\n\n<template>\n    <teleport :to=\"teleportTarget\">\n        <transition-group\n            name=\"transition-notification\"\n            class=\"ev-notifications\"\n            tag=\"div\"\n            :style=\"{\n                zIndex,\n            }\">\n            <ev-notification\n                v-for=\"(notification, index) in notifications\"\n                :key=\"notification.id\"\n                v-bind=\"notification.props as object\"\n                :dismissible=\"\n                    index === 0 ? notification.props.dismissible : false\n                \"\n                :timeout=\"index === 0 ? notification.props.timeout : undefined\"\n                @dismiss=\"service.dismiss(notification.id)\">\n                <template #icon\n                    ><component :is=\"notification.slots.icon\"\n                /></template>\n                <template #default\n                    ><component :is=\"notification.slots.default\"\n                /></template>\n                <template #actions\n                    ><component :is=\"notification.slots.actions\"\n                /></template>\n            </ev-notification>\n        </transition-group>\n    </teleport>\n</template>\n"],"names":["slots"],"mappings":";;;;;;;;AAIa,MAAA,8BACT,OAAO,IAAI,yBAAyB;AAKjC,SAAS,sBAAsB;AAC5B,QAAA,UAAU,OAAO,2BAA2B;AAClD,MAAI,CAAC,SAAS;AACV,UAAM,IAAI;AAAA,MACN;AAAA,IACJ;AAAA,EAAA;AAEG,SAAA;AACX;AAKO,SAAS,kBAAkB;AAC9B,QAAM,UAAU,oBAAoB;AAC7B,SAAA;AAAA,IACH,KAAK,CAAC,OAA4B,UAAgC;AACvD,aAAA,QAAQ,IAAI,OAAO,KAAK;AAAA,IACnC;AAAA,IACA,SAAS,CAAC,OAAe;AACd,aAAA,QAAQ,QAAQ,EAAE;AAAA,IAAA;AAAA,EAEjC;AACJ;ACvBO,MAAM,uBAAuB;AAAA,EAA7B;AACa,yCAAgB,IAAoB,EAAE;AAC9C,+BAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQP,IAAI,OAA4B,OAA6B;AAC1D,UAAA,KAAK,EAAE,KAAK;AAClB,UAAM,gBAAgB,KAAK,YAAY,IAAI,KAAK;AAC1C,UAAA,gBAAgB,KAAK,YAAY,KAAK;AACvC,SAAA,cAAc,MAAM,QAAQ;AAAA,MAC7B;AAAA,MACA,OAAO;AAAA,MACP,OAAO;AAAA,IAAA,CACV;AACM,WAAA;AAAA,MACH;AAAA,MACA,SAAS,MAAM;AACX,aAAK,QAAQ,EAAE;AAAA,MAAA;AAAA,IAEvB;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUI,YAAY,IAAY,OAA4B;AAClD,UAAA,QAAQ,MAAM,MAAM,UAAU,IAC9B,MAAM,aACN,WAAW,IAAI;AACrB,UAAM,OAAO,MAAM;AACf,WAAK,QAAQ,EAAE;AAAA,IAAA,CAClB;AACM,WAAA,OAAO,OAAO,OAAqB;AAAA,MACtC,YAAY;AAAA,IAAA,CACf;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASG,YAAY,OAA6B;AACvC,UAAA,gBAAgB,SAAS,CAAC;AAChC,UAAM,gBAEF,CAAC;AACL,eAAW,OAAO,eAAe;AACvB,YAAA,YAAY,cAAc,GAAgC;AAChE,oBAAc,GAAG,IAAI,CAAC,OAAOA,WAAU;AAC5B,eAAA,EAAE,WAAY,OAAOA,MAAK;AAAA,MACrC;AAAA,IAAA;AAEG,WAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQJ,QAAQ,IAAY;AACjB,UAAA,QAAQ,KAAK,cAAc,MAAM;AAAA,MACnC,CAAC,iBAAiB,aAAa,OAAO;AAAA,IAC1C;AACA,SAAK,cAAc,MAAM,OAAO,OAAO,CAAC;AAAA,EAAA;AAEhD;;;;AC/EA,UAAM,iBAAiB,YAAY,WAAW,KAAK,CAAC;AACpD,UAAM,UAAU,oBAAoB;AACpC,UAAM,gBAAgB,QAAQ;AAExB,UAAA,SAAS,SAAS,MAAM;AAC1B,aAAO,cAAmB,KAAA;AAAA,IAAA,CAC7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}