yc-design-vue 1.7.6 → 1.7.7

package/es/Notification/Notification.vue.js

@@ -1,7 +1,128 @@
-import _sfc_main from "./Notification.vue2.js";
-/* empty css                  */
-import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const _Notification = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-dad0f3e0"]]);
+import { defineComponent, toRefs, watch, onMounted, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createElementVNode, createCommentVNode, createBlock, resolveDynamicComponent, withCtx } from "vue";
+import { TYPE_ICON_MAP } from "../_shared/constants/index.js";
+import "../node_modules/tinycolor2/esm/tinycolor.js";
+import "../_shared/utils/dom.js";
+import { isUndefined, isFunction } from "../_shared/utils/is.js";
+import "../_shared/utils/time.js";
+import { getSlotFunction } from "../_shared/utils/vue-utils.js";
+import "../Empty/index.js";
+/* empty css                             */
+import _sfc_main$1 from "../_shared/components/IconButton.vue.js";
+/* empty css                                    */
+/* empty css                                         */
+import { useTimeoutFn } from "../node_modules/@vueuse/shared/index.js";
+const _hoisted_1 = { class: "yc-notification-left" };
+const _hoisted_2 = {
+  key: 0,
+  class: "yc-notification-icon"
+};
+const _hoisted_3 = { class: "yc-notification-right" };
+const _hoisted_4 = {
+  key: 0,
+  class: "yc-notification-title"
+};
+const _hoisted_5 = {
+  key: 1,
+  class: "yc-notification-content"
+};
+const _hoisted_6 = {
+  key: 2,
+  class: "yc-notification-footer"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "Notification"
+  },
+  __name: "Notification",
+  props: {
+    type: { default: "info" },
+    content: { type: [String, Array, Function], default: "" },
+    title: { type: [String, Array, Function], default: "" },
+    icon: { type: Function, default: void 0 },
+    id: { default: "" },
+    style: { default: () => {
+      return {};
+    } },
+    class: { default: "" },
+    showIcon: { type: Boolean, default: true },
+    closable: { type: Boolean, default: false },
+    duration: { default: 3e3 },
+    isReset: { type: Boolean, default: false },
+    footer: { type: Function, default: void 0 },
+    closeIcon: { type: Function, default: void 0 },
+    closeIconElement: { type: Function, default: void 0 },
+    onClose: { type: Function, default: void 0 },
+    onDestory: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { type, id, duration, class: className, isReset } = toRefs(props);
+    const { onClose, onDestory } = props;
+    const { start, stop } = useTimeoutFn(
+      () => {
+        onDestory == null ? void 0 : onDestory(id.value);
+        onClose == null ? void 0 : onClose(id.value);
+      },
+      () => duration.value,
+      {
+        immediate: false
+      }
+    );
+    watch(
+      () => isReset.value,
+      (newVal) => {
+        if (duration.value <= 0 || !newVal) return;
+        stop();
+        start();
+      }
+    );
+    const handleClose = () => {
+      stop();
+      onDestory == null ? void 0 : onDestory(id.value);
+      onClose == null ? void 0 : onClose(id.value);
+    };
+    onMounted(() => {
+      if (duration.value <= 0) return;
+      start();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("li", {
+        role: "alert",
+        class: normalizeClass(["yc-notification", `yc-notification-${unref(type)}`, unref(className)]),
+        style: normalizeStyle(_ctx.style)
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          _ctx.showIcon ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon ?? unref(TYPE_ICON_MAP)[unref(type)])))
+          ])) : createCommentVNode("", true)
+        ]),
+        createElementVNode("div", _hoisted_3, [
+          !unref(isUndefined)(_ctx.title) ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            (openBlock(), createBlock(resolveDynamicComponent(unref(getSlotFunction)(_ctx.title))))
+          ])) : createCommentVNode("", true),
+          !unref(isUndefined)(_ctx.content) ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            (openBlock(), createBlock(resolveDynamicComponent(unref(getSlotFunction)(_ctx.content))))
+          ])) : createCommentVNode("", true),
+          unref(isFunction)(_ctx.footer) ? (openBlock(), createElementBlock("div", _hoisted_6, [
+            (openBlock(), createBlock(resolveDynamicComponent(_ctx.footer)))
+          ])) : createCommentVNode("", true)
+        ]),
+        _ctx.closable ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "yc-notification-close-btn",
+          onClick: handleClose
+        }, [
+          _ctx.closeIconElement ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.closeIconElement), { key: 0 })) : (openBlock(), createBlock(unref(_sfc_main$1), { key: 1 }, {
+            default: withCtx(() => [
+              _ctx.closeIcon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.closeIcon), { key: 0 })) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }))
+        ])) : createCommentVNode("", true)
+      ], 6);
+    };
+  }
+});
 export {
-  _Notification as default
+  _sfc_main as default
 };

package/es/Notification/Notification.vue3.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./Notification.vue.js";
+/* empty css                  */
+export {
+  _sfc_main as default
+};

package/es/Notification/NotificationList.vue.js

@@ -1,7 +1,36 @@
-import _sfc_main from "./NotificationList.vue2.js";
-/* empty css                      */
-import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const _NotificationList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-79a39152"]]);
+import { defineComponent, computed, createBlock, openBlock, TransitionGroup, normalizeClass, withCtx, createElementBlock, Fragment, renderList, mergeProps } from "vue";
+import _sfc_main$1 from "./Notification.vue.js";
+/* empty css                  */
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NotificationList",
+  props: {
+    notificationList: { default: () => [] },
+    position: { default: "topRight" }
+  },
+  setup(__props) {
+    const props = __props;
+    const animationName = computed(() => {
+      const dir = props.position.includes("Right") ? "right" : "left";
+      return `slide-${dir}-notification`;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(TransitionGroup, {
+        name: animationName.value,
+        class: normalizeClass(["yc-notification-list", `yc-notification-list-${_ctx.position}`]),
+        tag: "div"
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.notificationList, (notification) => {
+            return openBlock(), createBlock(_sfc_main$1, mergeProps({
+              key: notification.id
+            }, { ref_for: true }, notification), null, 16);
+          }), 128))
+        ]),
+        _: 1
+      }, 8, ["name", "class"]);
+    };
+  }
+});
 export {
-  _NotificationList as default
+  _sfc_main as default
 };

package/es/Notification/NotificationList.vue3.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./NotificationList.vue.js";
+/* empty css                      */
+export {
+  _sfc_main as default
+};

package/es/Notification/index.js

@@ -1,6 +1,8 @@
 import { reactive, render, h, nextTick } from "vue";
-import _Notification from "./Notification.vue.js";
-import _NotificationList from "./NotificationList.vue.js";
+import _sfc_main from "./Notification.vue.js";
+/* empty css                  */
+import _sfc_main$1 from "./NotificationList.vue.js";
+/* empty css                      */
 import "../node_modules/tinycolor2/esm/tinycolor.js";
 import "../_shared/utils/dom.js";
 import { isString } from "../_shared/utils/is.js";
@@ -29,7 +31,7 @@ const open = (props, type = "info") => {
     document.body.appendChild(notificationContainer);
     container.set(position, notificationContainer);
     render(
-      h(_NotificationList, {
+      h(_sfc_main$1, {
         notificationList: list,
         position
       }),
@@ -95,10 +97,10 @@ const NotificationMethod = {
     removeContainer(position);
   }
 };
-const Notification = Object.assign(_Notification, {
+const Notification = Object.assign(_sfc_main, {
   install: (app) => {
     app.config.globalProperties.$notification = Object.assign(
-      _Notification,
+      _sfc_main,
       NotificationMethod
     );
   },

package/es/OverflowList/index.css

@@ -1 +1 @@
-.yc-overflow-list{position:relative;display:flex;align-items:center}.yc-overflow-list:deep(.yc-tag){flex-shrink:0;overflow:hidden;left:0;right:0}.yc-overflow-list:deep(.yc-tag) .yc-tag-label{text-wrap:nowrap}.yc-overflow-list .yc-overflow-tag{position:absolute}.yc-overflow-list-from-start .yc-overflow-tag{left:0}.yc-overflow-list-from-end .yc-overflow-tag{right:0}
+.yc-overflow-list{position:relative;display:flex;align-items:center}.yc-overflow-list .yc-tag{flex-shrink:0;overflow:hidden;left:0;right:0}.yc-overflow-list .yc-tag .yc-tag-label{text-wrap:nowrap}.yc-overflow-list .yc-overflow-tag{position:absolute}.yc-overflow-list-from-start .yc-overflow-tag{left:0}.yc-overflow-list-from-end .yc-overflow-tag{right:0}

package/es/OverflowList/index.js

@@ -1,7 +1,8 @@
-import _OverflowList from "./index.vue.js";
-const OverflowList = Object.assign(_OverflowList, {
+import _sfc_main from "./index.vue.js";
+/* empty css           */
+const OverflowList = Object.assign(_sfc_main, {
   install: (app) => {
-    app.component("Yc" + _OverflowList.name, _OverflowList);
+    app.component("Yc" + _sfc_main.name, _sfc_main);
   }
 });
 export {

package/es/OverflowList/index.vue.js

@@ -1,7 +1,122 @@
-import _sfc_main from "./index.vue2.js";
-/* empty css           */
-import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const _OverflowList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f1578bcc"]]);
+import { defineComponent, useSlots, toRefs, ref, computed, watch, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createCommentVNode, Fragment, renderList, createBlock, resolveDynamicComponent, renderSlot, createVNode, withCtx, createTextVNode, toDisplayString } from "vue";
+import { unrefElement, useResizeObserver } from "../node_modules/@vueuse/core/index.js";
+import "../node_modules/tinycolor2/esm/tinycolor.js";
+import { throttle, sleep, valueToPx } from "../_shared/utils/dom.js";
+import "../_shared/utils/time.js";
+import { findComponentsFromVnodes } from "../_shared/utils/vue-utils.js";
+import "../Empty/index.js";
+/* empty css                             */
+import Tag from "../Tag/index.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "OverflowList"
+  },
+  __name: "index",
+  props: {
+    min: { default: 0 },
+    margin: { default: 8 },
+    from: { default: "end" }
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const slots = useSlots();
+    const props = __props;
+    const emits = __emit;
+    const { min, margin, from } = toRefs(props);
+    const max = ref(1e4);
+    const widths = ref([]);
+    const tags = computed(() => {
+      var _a;
+      return findComponentsFromVnodes(
+        ((_a = slots.default) == null ? void 0 : _a.call(slots)) || [],
+        Tag.name
+      );
+    });
+    const listRef = ref();
+    const overflowRef = ref();
+    const overFlowWidth = computed(() => {
+      if (!overflowRef.value) return margin.value;
+      return unrefElement(overflowRef).offsetWidth + margin.value;
+    });
+    const overflowNumber = computed(() => {
+      return tags.value.length - max.value;
+    });
+    useResizeObserver(
+      listRef,
+      throttle(async () => {
+        await sleep(0);
+        let maxCount = 0;
+        let totalWidth = 0;
+        const listWidth = listRef.value.offsetWidth;
+        for (let i = 0; i < widths.value.length; i++) {
+          const gap = i > 0 ? margin.value : 0;
+          const newWidth = totalWidth + gap + widths.value[i];
+          if (newWidth > listWidth) {
+            break;
+          }
+          totalWidth = newWidth;
+          maxCount++;
+        }
+        max.value = maxCount > min.value ? maxCount : min.value;
+      }, 180)
+    );
+    watch(
+      () => max.value,
+      () => {
+        emits("change", overflowNumber.value);
+      }
+    );
+    watch(
+      () => tags.value.length,
+      async () => {
+        max.value = 1e5;
+        await sleep(0);
+        const cur = [...document.querySelectorAll("#overflowTag")].map((item) => {
+          return item.offsetWidth;
+        });
+        widths.value = cur;
+      },
+      {
+        immediate: true
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["yc-overflow-list", `yc-overflow-list-from-${unref(from)}`]),
+        style: normalizeStyle({
+          gap: unref(valueToPx)(unref(margin)),
+          padding: unref(from) == "start" ? `0 0 0 ${unref(valueToPx)(overFlowWidth.value)}` : ` 0 ${unref(valueToPx)(overFlowWidth.value)} 0 0`
+        }),
+        ref_key: "listRef",
+        ref: listRef
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(tags.value, (node, i) => {
+          return openBlock(), createElementBlock(Fragment, { key: i }, [
+            i < max.value ? (openBlock(), createBlock(resolveDynamicComponent(node), {
+              key: 0,
+              id: "overflowTag"
+            })) : createCommentVNode("", true)
+          ], 64);
+        }), 128)),
+        max.value < tags.value.length ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "yc-overflow-tag",
+          ref_key: "overflowRef",
+          ref: overflowRef
+        }, [
+          renderSlot(_ctx.$slots, "overflow", { number: overflowNumber.value }, () => [
+            createVNode(unref(Tag), null, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(`+${overflowNumber.value}`), 1)
+              ]),
+              _: 1
+            })
+          ])
+        ], 512)) : createCommentVNode("", true)
+      ], 6);
+    };
+  }
+});
 export {
-  _OverflowList as default
+  _sfc_main as default
 };

package/es/OverflowList/index.vue3.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./index.vue.js";
+/* empty css           */
+export {
+  _sfc_main as default
+};

package/es/PageHeader/index.css

@@ -1 +1 @@
-.yc-page-header{padding:16px 0px;display:flex;flex-direction:column;gap:12px}.yc-page-header .yc-page-header-wrapper{padding:0 20px 0 24px}.yc-page-header .yc-page-header-wrapper .yc-page-header-header{display:flex;justify-content:space-between;align-items:center;line-height:28px}.yc-page-header .yc-page-header-wrapper .yc-page-header-header .yc-page-header-main{display:flex;flex-wrap:wrap;align-items:center}.yc-page-header .yc-page-header-wrapper .yc-page-header-header .yc-page-header-main .yc-icon-button{margin-right:12px;color:var(--color-text-2);font-size:14px}.yc-page-header .yc-page-header-wrapper .yc-page-header-header .yc-page-header-main .yc-icon-button:deep(.yc-icon){transform:rotate(180deg)}.yc-page-header .yc-page-header-wrapper .yc-page-header-header .yc-page-header-main .yc-page-header-title{color:var(--color-text-1);font-weight:600;font-size:20px}.yc-page-header .yc-page-header-wrapper .yc-page-header-header .yc-page-header-main .yc-page-header-subtitle{color:var(--color-text-3);font-size:14px}.yc-page-header .yc-page-header-wrapper .yc-page-header-header .yc-page-header-extra{overflow:hidden;white-space:nowrap}.yc-page-header .yc-page-header-content{padding:20px 32px;border-top:1px solid var(--color-neutral-3)}
+.yc-page-header{padding:16px 0px;display:flex;flex-direction:column;gap:12px}.yc-page-header .yc-page-header-wrapper{padding:0 20px 0 24px}.yc-page-header .yc-page-header-wrapper .yc-page-header-header{display:flex;justify-content:space-between;align-items:center;line-height:28px}.yc-page-header .yc-page-header-wrapper .yc-page-header-header .yc-page-header-main{display:flex;flex-wrap:wrap;align-items:center}.yc-page-header .yc-page-header-wrapper .yc-page-header-header .yc-page-header-main .yc-icon-button{margin-right:12px;color:var(--color-text-2);font-size:14px}.yc-page-header .yc-page-header-wrapper .yc-page-header-header .yc-page-header-main .yc-icon-button .yc-icon{transform:rotate(180deg)}.yc-page-header .yc-page-header-wrapper .yc-page-header-header .yc-page-header-main .yc-page-header-title{color:var(--color-text-1);font-weight:600;font-size:20px}.yc-page-header .yc-page-header-wrapper .yc-page-header-header .yc-page-header-main .yc-page-header-subtitle{color:var(--color-text-3);font-size:14px}.yc-page-header .yc-page-header-wrapper .yc-page-header-header .yc-page-header-extra{overflow:hidden;white-space:nowrap}.yc-page-header .yc-page-header-content{padding:20px 32px;border-top:1px solid var(--color-neutral-3)}

package/es/PageHeader/index.js

@@ -1,7 +1,8 @@
-import _PageHeader from "./index.vue.js";
-const PageHeader = Object.assign(_PageHeader, {
+import _sfc_main from "./index.vue.js";
+/* empty css           */
+const PageHeader = Object.assign(_sfc_main, {
   install: (app) => {
-    app.component("Yc" + _PageHeader.name, _PageHeader);
+    app.component("Yc" + _sfc_main.name, _sfc_main);
   }
 });
 export {

package/es/PageHeader/index.vue.js

@@ -1,7 +1,97 @@
-import _sfc_main from "./index.vue2.js";
-/* empty css           */
-import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const _PageHeader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-be47dbe3"]]);
+import { defineComponent, createElementBlock, openBlock, createElementVNode, createCommentVNode, renderSlot, createVNode, createBlock, unref, withCtx, createTextVNode, toDisplayString } from "vue";
+import "../node_modules/tinycolor2/esm/tinycolor.js";
+import "../_shared/utils/dom.js";
+import "../_shared/utils/time.js";
+import "../Empty/index.js";
+/* empty css                             */
+import _sfc_main$2 from "../_shared/icons/IconArrowRight.vue.js";
+import Divider from "../Divider/index.js";
+import _sfc_main$1 from "../_shared/components/IconButton.vue.js";
+/* empty css                                    */
+/* empty css                                         */
+const _hoisted_1 = { class: "yc-page-header" };
+const _hoisted_2 = { class: "yc-page-header-wrapper" };
+const _hoisted_3 = {
+  key: 0,
+  class: "yc-page-header-breadcrumb"
+};
+const _hoisted_4 = { class: "yc-page-header-header" };
+const _hoisted_5 = { class: "yc-page-header-main" };
+const _hoisted_6 = {
+  key: 0,
+  class: "yc-page-header-title text-ellipsis"
+};
+const _hoisted_7 = {
+  key: 2,
+  class: "yc-page-header-subtitle text-ellipsis"
+};
+const _hoisted_8 = {
+  key: 0,
+  class: "yc-page-header-extra"
+};
+const _hoisted_9 = {
+  key: 0,
+  class: "yc-page-header-content"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PageHeader"
+  },
+  __name: "index",
+  props: {
+    title: { default: "" },
+    subtitle: { default: "" },
+    showBack: { type: Boolean, default: true }
+  },
+  emits: ["back"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          _ctx.$slots.breadcrumb ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            renderSlot(_ctx.$slots, "breadcrumb")
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_4, [
+            createElementVNode("div", _hoisted_5, [
+              createVNode(unref(_sfc_main$1), {
+                size: 14,
+                "hover-size": 30,
+                onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("back", $event))
+              }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "back-icon", {}, () => [
+                    createVNode(unref(_sfc_main$2))
+                  ])
+                ]),
+                _: 3
+              }),
+              _ctx.$slots.title || _ctx.title ? (openBlock(), createElementBlock("div", _hoisted_6, [
+                renderSlot(_ctx.$slots, "title", {}, () => [
+                  createTextVNode(toDisplayString(_ctx.title), 1)
+                ])
+              ])) : createCommentVNode("", true),
+              _ctx.$slots.subtitle || _ctx.subtitle ? (openBlock(), createBlock(unref(Divider), {
+                key: 1,
+                direction: "vertical"
+              })) : createCommentVNode("", true),
+              _ctx.$slots.subtitle || _ctx.subtitle ? (openBlock(), createElementBlock("div", _hoisted_7, [
+                renderSlot(_ctx.$slots, "subtitle", {}, () => [
+                  createTextVNode(toDisplayString(_ctx.subtitle), 1)
+                ])
+              ])) : createCommentVNode("", true)
+            ]),
+            _ctx.$slots.extra ? (openBlock(), createElementBlock("div", _hoisted_8, [
+              renderSlot(_ctx.$slots, "extra")
+            ])) : createCommentVNode("", true)
+          ])
+        ]),
+        _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_9, [
+          renderSlot(_ctx.$slots, "default")
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
 export {
-  _PageHeader as default
+  _sfc_main as default
 };

package/es/PageHeader/index.vue3.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./index.vue.js";
+/* empty css           */
+export {
+  _sfc_main as default
+};