@opensig/opendesign/lib/toast/OToastList.vue.js

"use strict";
const vue = require("vue");
const OToast_vue_vue_type_script_setup_true_lang = require("./OToast.vue.js");
const is = require("../_utils/is.js");
const uniqueId = require("../_utils/unique-id.js");
const types = require("./types.js");
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "OToastList",
  props: types.toastListProps,
  setup(__props, { expose: __expose }) {
    const props = __props;
    const getUniqueId = uniqueId.useGetUniqueId();
    const optionList = vue.ref([]);
    const add = (params) => {
      const option = {
        id: getUniqueId(),
        ...params
      };
      optionList.value.push(option);
      return option.id;
    };
    const remove = (idx) => {
      optionList.value.splice(idx, 1);
    };
    const removeAll = () => {
      optionList.value = [];
      is.isFunction(props.onDestroy) && props.onDestroy();
    };
    const close = (id) => {
      const idx = optionList.value.findIndex((option) => option.id === id);
      remove(idx);
    };
    const handleDurationEnd = (item) => {
      const { id, onDurationEnd } = item;
      onDurationEnd == null ? void 0 : onDurationEnd();
      close(id);
    };
    const handleClose = (item, ev) => {
      const { id, onClose } = item;
      onClose == null ? void 0 : onClose(ev);
      close(id);
    };
    __expose({ add, close, remove, removeAll });
    return (_ctx, _cache) => {
      return optionList.value.length ? (vue.openBlock(), vue.createElementBlock(
        "div",
        {
          key: 0,
          class: vue.normalizeClass(["o-toast-list", [`o-toast-list-${props.position}`]])
        },
        [
          vue.createVNode(vue.TransitionGroup, { name: "o-toast-fade" }, {
            default: vue.withCtx(() => [
              (vue.openBlock(true), vue.createElementBlock(
                vue.Fragment,
                null,
                vue.renderList(optionList.value, (item) => {
                  return vue.openBlock(), vue.createBlock(OToast_vue_vue_type_script_setup_true_lang, {
                    key: item.id,
                    duration: item.duration,
                    onDurationEnd: ($event) => handleDurationEnd(item),
                    onClose: (ev) => {
                      handleClose(item, ev);
                    }
                  }, {
                    default: vue.withCtx(() => [
                      vue.unref(is.isString)(item.content) ? (vue.openBlock(), vue.createElementBlock(
                        vue.Fragment,
                        { key: 0 },
                        [
                          vue.createTextVNode(
                            vue.toDisplayString(item.content),
                            1
                            /* TEXT */
                          )
                        ],
                        64
                        /* STABLE_FRAGMENT */
                      )) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.content), { key: 1 }))
                    ]),
                    _: 2
                    /* DYNAMIC */
                  }, 1032, ["duration", "onDurationEnd", "onClose"]);
                }),
                128
                /* KEYED_FRAGMENT */
              ))
            ]),
            _: 1
            /* STABLE */
          })
        ],
        2
        /* CLASS */
      )) : vue.createCommentVNode("v-if", true);
    };
  }
});
module.exports = _sfc_main;