@evance/evance-ui 1.0.37 → 1.0.39

package/dist/cjs/chunks/EvMessage.vue_vue_type_script_setup_true_lang-kfQFmKrG.cjs

@@ -0,0 +1,234 @@
+"use strict";
+/*! Evance UI v1.0.39 | MIT License */
+const vue = require("vue");
+const EvIcon_vue_vue_type_style_index_0_lang = require("./EvIcon.vue_vue_type_style_index_0_lang-8acRhMGV.cjs");
+const CancelIcon = require("./CancelIcon-DZkI8lei.cjs");
+const ChevronDownIcon = require("./ChevronDownIcon-BDUU6NtC.cjs");
+const EvButton_vue_vue_type_script_setup_true_lang = require("./EvButton.vue_vue_type_script_setup_true_lang-Biaf9nHR.cjs");
+const modelProxy = require("./modelProxy-DMlLwZWj.cjs");
+const icons = require("./icons-DW3wRMYZ.cjs");
+const tag = require("./tag-CuF0rfkt.cjs");
+const component = require("./component-AtNT2fuh.cjs");
+const props = require("./props-BjI4Mhey.cjs");
+const appearance = require("./appearance-9TqLI0d5.cjs");
+const locale = require("./locale-BKUGcsc_.cjs");
+const hasSlotWithContent = require("./hasSlotWithContent-BXiH__4c.cjs");
+const EvHeading_vue_vue_type_style_index_0_lang = require("./EvHeading.vue_vue_type_style_index_0_lang-Bmo1m3TS.cjs");
+const EvButtonGroup_vue_vue_type_script_setup_true_lang = require("./EvButtonGroup.vue_vue_type_script_setup_true_lang-DKGkGHGk.cjs");
+const modifiers = require("./modifiers-CK5BaTQh.cjs");
+const isFunctions = require("./is-functions-BhjwCVcN.cjs");
+const makeEvMessageProps = props.propsFactory(
+  {
+    description: String,
+    dismissDelay: {
+      type: [Boolean, Number],
+      default: 0
+    },
+    dismissible: [Boolean, Object],
+    expandable: Boolean,
+    icon: icons.IconProp,
+    modelValue: {
+      type: [Boolean, Object],
+      default: true
+    },
+    title: String,
+    actions: Array,
+    ...appearance.makeAppearanceProps({
+      variant: "tonal"
+    }),
+    ...tag.makeTagProps({
+      tag: "section"
+    }),
+    ...component.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__ */ vue.defineComponent({
+  __name: "EvMessage",
+  props: {
+    ...makeEvMessageProps()
+  },
+  emits: [
+    "dismissed",
+    "click:dismiss",
+    "click:expand",
+    "update:modelValue"
+  ],
+  setup(__props, { emit }) {
+    const props2 = __props;
+    const slots = vue.useSlots();
+    const hasDefaultSlot = hasSlotWithContent.hasSlotWithContent(slots, "default");
+    const hasActionSlot = hasSlotWithContent.hasSlotWithContent(slots, "action");
+    const modelProxy$1 = modelProxy.useModelProxy(props2, "modelValue");
+    const isExpanded = vue.shallowRef(false);
+    const { t } = locale.useLocaleFunctions();
+    const iconGlyph = vue.computed(() => {
+      return props2.icon ? props2.icon : icons.appearanceIcon(props2.appearance);
+    });
+    const showExpandable = vue.computed(() => {
+      return (hasDefaultSlot.value || !!props2.description || hasActionSlot.value || !!actions.value.length) && (!props2.expandable || isExpanded.value);
+    });
+    const variantModifier = vue.computed(() => {
+      return modifiers.makeClassName(props2.variant, "is-variant");
+    });
+    function dismiss() {
+      if (!props2.dismissDelay) {
+        modelProxy$1.value = false;
+      } else if (isFunctions.isNumber(props2.dismissDelay)) {
+        const delay = props2.dismissDelay;
+        setTimeout(() => {
+          modelProxy$1.value = false;
+          emit("dismissed");
+        }, delay);
+      }
+      emit("click:dismiss");
+    }
+    function expand() {
+      isExpanded.value = !isExpanded.value;
+      emit("click:expand", isExpanded.value);
+    }
+    const actions = vue.computed(() => {
+      if (!props2.actions) {
+        return [];
+      }
+      const values = [];
+      for (const action of props2.actions) {
+        const actionDefaults = {
+          appearance: props2.variant === "bold" ? "inverse" : props2.appearance,
+          variant: "link",
+          size: "small"
+        };
+        values.push(Object.assign(actionDefaults, action));
+      }
+      return values;
+    });
+    function onEnter(el) {
+      vue.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) {
+      vue.nextTick(() => {
+        const element = el;
+        element.style.height = getComputedStyle(element).height;
+        requestAnimationFrame(() => {
+          element.style.height = "0px";
+        });
+      });
+    }
+    return (_ctx, _cache) => {
+      return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props2.tag), {
+        class: vue.normalizeClass([
+          "ev-message",
+          variantModifier.value,
+          vue.unref(modifiers.appearanceModifier)(props2.appearance),
+          props2.class
+        ])
+      }, {
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", _hoisted_1, [
+            vue.renderSlot(_ctx.$slots, "icon", {}, () => [
+              vue.createVNode(EvIcon_vue_vue_type_style_index_0_lang._sfc_main, { glyph: iconGlyph.value }, null, 8, ["glyph"])
+            ])
+          ]),
+          vue.createElementVNode("div", _hoisted_2, [
+            vue.createVNode(vue.unref(EvHeading_vue_vue_type_style_index_0_lang._sfc_main), {
+              class: "ev-message--title",
+              size: "small",
+              text: props2.title
+            }, null, 8, ["text"]),
+            vue.createVNode(vue.Transition, {
+              name: "transition-message",
+              onBeforeEnter: onEnter,
+              onAfterEnter,
+              onLeave
+            }, {
+              default: vue.withCtx(() => [
+                showExpandable.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+                  vue.unref(hasDefaultSlot) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+                    vue.renderSlot(_ctx.$slots, "default")
+                  ])) : !!props2.description ? (vue.openBlock(), vue.createElementBlock("div", {
+                    key: 1,
+                    class: "ev-message--description",
+                    innerHTML: props2.description
+                  }, null, 8, _hoisted_5)) : vue.createCommentVNode("", true),
+                  vue.unref(hasActionSlot) || actions.value.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+                    vue.renderSlot(_ctx.$slots, "actions", {}, () => [
+                      vue.createVNode(vue.unref(EvButtonGroup_vue_vue_type_script_setup_true_lang._sfc_main), { items: actions.value }, null, 8, ["items"])
+                    ])
+                  ])) : vue.createCommentVNode("", true)
+                ])) : vue.createCommentVNode("", true)
+              ]),
+              _: 3
+            })
+          ]),
+          props2.expandable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+            vue.createVNode(EvButton_vue_vue_type_script_setup_true_lang._sfc_main, {
+              rounded: "",
+              class: vue.normalizeClass([{ "is-expanded": isExpanded.value }]),
+              "aria-label": vue.unref(t)("expand"),
+              icon: vue.unref(ChevronDownIcon.ChevronDownIcon),
+              size: "small",
+              variant: "subtle",
+              onClick: expand
+            }, null, 8, ["class", "aria-label", "icon"])
+          ])) : vue.createCommentVNode("", true),
+          vue.createVNode(vue.Transition, { name: "transition-fade" }, {
+            default: vue.withCtx(() => [
+              props2.dismissible ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+                vue.createVNode(EvButton_vue_vue_type_script_setup_true_lang._sfc_main, {
+                  rounded: "",
+                  "aria-label": vue.unref(t)("dismiss"),
+                  icon: vue.unref(CancelIcon.CancelIcon),
+                  size: "small",
+                  variant: "subtle",
+                  onClick: dismiss
+                }, null, 8, ["aria-label", "icon"])
+              ])) : vue.createCommentVNode("", true)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 3
+      }, 8, ["class"])), [
+        [vue.vShow, vue.unref(modelProxy$1)]
+      ]);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;
+exports.makeEvMessageProps = makeEvMessageProps;
+//# sourceMappingURL=EvMessage.vue_vue_type_script_setup_true_lang-kfQFmKrG.cjs.map

package/dist/cjs/chunks/EvMessage.vue_vue_type_script_setup_true_lang-kfQFmKrG.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvMessage.vue_vue_type_script_setup_true_lang-kfQFmKrG.cjs","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":["propsFactory","IconProp","makeAppearanceProps","makeTagProps","makeComponentProps","_useSlots","hasSlotWithContent","modelProxy","useModelProxy","props","shallowRef","useLocaleFunctions","computed","appearanceIcon","makeClassName","isNumber","nextTick"],"mappings":"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"}

package/dist/cjs/chunks/EvNotification.vue_vue_type_script_setup_true_lang-CUCRuhmN.cjs

@@ -0,0 +1,96 @@
+"use strict";
+/*! Evance UI v1.0.39 | MIT License */
+const vue = require("vue");
+const EvMessage_vue_vue_type_script_setup_true_lang = require("./EvMessage.vue_vue_type_script_setup_true_lang-kfQFmKrG.cjs");
+const props = require("./props-BjI4Mhey.cjs");
+const EvSurface_vue_vue_type_script_setup_true_lang = require("./EvSurface.vue_vue_type_script_setup_true_lang-CUK_W9FB.cjs");
+const modelProxy = require("./modelProxy-DMlLwZWj.cjs");
+const stack = require("./stack-CTC_-fXm.cjs");
+const helpers = require("./helpers-D5sNmblP.cjs");
+const makeEvNotificationProps = props.propsFactory(
+  {
+    timeout: Number,
+    zIndex: {
+      type: [Number, String],
+      default: 2e3
+    },
+    ...EvMessage_vue_vue_type_script_setup_true_lang.makeEvMessageProps({
+      tag: "div",
+      dismissible: true,
+      dismissDelay: true,
+      variant: "subtle"
+    })
+  },
+  "EvNotification"
+);
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "EvNotification",
+  props: {
+    ...makeEvNotificationProps()
+  },
+  emits: ["dismiss", "update:modelValue"],
+  setup(__props, { emit }) {
+    const props2 = __props;
+    vue.useSlots();
+    const model = modelProxy.useModelProxy(props2, "modelValue");
+    const timeout = modelProxy.useModelProxy(props2, "timeout");
+    const messageProps = vue.computed(() => {
+      return helpers.omit(helpers.filterComponentProps(EvMessage_vue_vue_type_script_setup_true_lang._sfc_main, props2), ["modelValue"]);
+    });
+    function dismiss() {
+      model.value = false;
+      emit("dismiss");
+    }
+    const { stackStyles } = stack.useStack(model, vue.toRef(props2, "zIndex"), false);
+    vue.watch(timeout, () => {
+      if (!timeout.value) {
+        stopTimer();
+      } else {
+        startTimer();
+      }
+    });
+    vue.onMounted(() => {
+      if (!timeout.value) {
+        return;
+      }
+      startTimer();
+    });
+    let timer = null;
+    function startTimer() {
+      timer = setTimeout(() => {
+        dismiss();
+      }, timeout.value);
+    }
+    function stopTimer() {
+      clearTimeout(timer);
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(EvSurface_vue_vue_type_script_setup_true_lang._sfc_main), {
+        class: "ev-notification",
+        role: "alert",
+        rounded: "small",
+        elevation: "overlay",
+        style: vue.normalizeStyle([vue.unref(stackStyles)])
+      }, {
+        default: vue.withCtx(() => [
+          vue.createVNode(vue.unref(EvMessage_vue_vue_type_script_setup_true_lang._sfc_main), vue.mergeProps(messageProps.value, { "onClick:dismiss": dismiss }), {
+            icon: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "icon")
+            ]),
+            default: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "default")
+            ]),
+            actions: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "actions")
+            ]),
+            _: 3
+          }, 16)
+        ]),
+        _: 3
+      }, 8, ["style"]);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;
+exports.makeEvNotificationProps = makeEvNotificationProps;
+//# sourceMappingURL=EvNotification.vue_vue_type_script_setup_true_lang-CUCRuhmN.cjs.map

package/dist/cjs/chunks/EvNotification.vue_vue_type_script_setup_true_lang-CUCRuhmN.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvNotification.vue_vue_type_script_setup_true_lang-CUCRuhmN.cjs","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":["propsFactory","makeEvMessageProps","_useSlots","useModelProxy","props","computed","omit","filterComponentProps","EvMessage","useStack","toRef","watch","onMounted"],"mappings":";;;;;;;;;AAmBO,MAAM,0BAA0BA,MAAA;AAAA,EACnC;AAAA,IACI,SAAS;AAAA,IACT,QAAQ;AAAA,MACJ,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IACb;AAAA,IAEA,GAAGC,iEAAmB;AAAA,MAClB,KAAK;AAAA,MACL,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,IACZ,CAAA;AAAA,EACL;AAAA,EACA;AACJ;;;;;;;;;ACtBcC;AAKR,UAAA,QAAQC,WAAAA,cAAcC,QAAO,YAAY;AACzC,UAAA,UAAUD,WAAAA,cAAcC,QAAO,SAAS;AACxC,UAAA,eAAeC,IAAAA,SAAS,MAAM;AAChC,aAAOC,QAAAA,KAAKC,QAAAA,qBAAqBC,8CAAAA,WAAWJ,MAAK,GAAG,CAAC,YAAY,CAAC;AAAA,IAAA,CACrE;AAKD,aAAS,UAAU;AACf,YAAM,QAAQ;AACd,WAAK,SAAS;AAAA,IAAA;AAGZ,UAAA,EAAE,YAAgB,IAAAK,eAAS,OAAOC,IAAAA,MAAMN,QAAO,QAAQ,GAAG,KAAK;AAErEO,QAAA,MAAM,SAAS,MAAM;AACb,UAAA,CAAC,QAAQ,OAAO;AACN,kBAAA;AAAA,MAAA,OACP;AACQ,mBAAA;AAAA,MAAA;AAAA,IACf,CACH;AAEDC,QAAAA,UAAU,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/cjs/chunks/EvNotifications.vue_vue_type_script_setup_true_lang-Cn_-qD7x.cjs

@@ -0,0 +1,154 @@
+"use strict";
+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 */
+const vue = require("vue");
+const EvNotification_vue_vue_type_script_setup_true_lang = require("./EvNotification.vue_vue_type_script_setup_true_lang-CUCRuhmN.cjs");
+const teleport = require("./teleport-9T8Nz38S.cjs");
+const stack = require("./stack-CTC_-fXm.cjs");
+const EvNotificationServiceSymbol = Symbol.for("ev:notification-service");
+function injectNotifications() {
+  const service = vue.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", vue.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 = vue.isRef(props.modelValue) ? props.modelValue : vue.shallowRef(true);
+    vue.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 vue.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__ */ vue.defineComponent({
+  __name: "EvNotifications",
+  setup(__props) {
+    const teleportTarget = teleport.useTeleport(vue.shallowRef(false));
+    const service = injectNotifications();
+    const notifications = service.notifications;
+    const zIndex = vue.computed(() => {
+      return stack.getLastZIndex() ?? 2e3;
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.Teleport, { to: vue.unref(teleportTarget) }, [
+        vue.createVNode(vue.TransitionGroup, {
+          name: "transition-notification",
+          class: "ev-notifications",
+          tag: "div",
+          style: vue.normalizeStyle({
+            zIndex: zIndex.value
+          })
+        }, {
+          default: vue.withCtx(() => [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(notifications), (notification, index) => {
+              return vue.openBlock(), vue.createBlock(vue.unref(EvNotification_vue_vue_type_script_setup_true_lang._sfc_main), vue.mergeProps({
+                key: notification.id
+              }, notification.props, {
+                dismissible: index === 0 ? notification.props.dismissible : false,
+                timeout: index === 0 ? notification.props.timeout : void 0,
+                onDismiss: ($event) => vue.unref(service).dismiss(notification.id)
+              }), {
+                icon: vue.withCtx(() => [
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(notification.slots.icon)))
+                ]),
+                default: vue.withCtx(() => [
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(notification.slots.default)))
+                ]),
+                actions: vue.withCtx(() => [
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(notification.slots.actions)))
+                ]),
+                _: 2
+              }, 1040, ["dismissible", "timeout", "onDismiss"]);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["style"])
+      ], 8, ["to"]);
+    };
+  }
+});
+exports.EvNotificationServiceSymbol = EvNotificationServiceSymbol;
+exports.EvNotificationsManager = EvNotificationsManager;
+exports._sfc_main = _sfc_main;
+exports.useNotification = useNotification;
+//# sourceMappingURL=EvNotifications.vue_vue_type_script_setup_true_lang-Cn_-qD7x.cjs.map

package/dist/cjs/chunks/EvNotifications.vue_vue_type_script_setup_true_lang-Cn_-qD7x.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvNotifications.vue_vue_type_script_setup_true_lang-Cn_-qD7x.cjs","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":["inject","ref","isRef","shallowRef","watch","slots","h","useTeleport","computed","getLastZIndex"],"mappings":";;;;;;;;;AAIa,MAAA,8BACT,OAAO,IAAI,yBAAyB;AAKjC,SAAS,sBAAsB;AAC5B,QAAA,UAAUA,WAAO,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,yCAAgBC,IAAoB,IAAA,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,QAAQC,UAAM,MAAM,UAAU,IAC9B,MAAM,aACNC,eAAW,IAAI;AACrBC,QAAA,MAAM,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,OAAOC,WAAU;AAC5B,eAAAC,MAAE,WAAY,OAAOD,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,iBAAiBE,SAAAA,YAAYJ,IAAW,WAAA,KAAK,CAAC;AACpD,UAAM,UAAU,oBAAoB;AACpC,UAAM,gBAAgB,QAAQ;AAExB,UAAA,SAASK,IAAAA,SAAS,MAAM;AAC1B,aAAOC,MAAAA,cAAmB,KAAA;AAAA,IAAA,CAC7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}