c-dhn-act - npm Package Compare versions

Comparing version 1.0.11 to 1.0.12

lib/c-dhn-infinite-scroll/index.js

@@ -52,20 +52,23 @@ import { nextTick } from 'vue';
         type: Number,
-        default: DEFAULT_DELAY,
+        default: DEFAULT_DELAY
     },
     distance: {
         type: Number,
-        default: DEFAULT_DISTANCE,
+        default: DEFAULT_DISTANCE
     },
     disabled: {
         type: Boolean,
-        default: false,
+        default: false
     },
     immediate: {
         type: Boolean,
-        default: true,
+        default: true
     },
+    root: {
+        type: Boolean,
+        default: false
+    }
 };
 const getScrollOptions = (el, instance) => {
-    return entries(attributes)
-        .reduce((acm, [name, option]) => {
+    return entries(attributes).reduce((acm, [name, option]) => {
         var _a, _b;
@@ -88,5 +91,5 @@ const { type, default: defaultValue } = option;
 };
-const handleScroll = (el, cb) => {
-    const { container, containerEl, instance, observer, lastScrollTop, } = el[SCOPE];
-    const { disabled, distance } = getScrollOptions(el, instance);
+const handleScroll = (el, cb, oldEl) => {
+    const { container, containerEl, instance, observer, lastScrollTop } = el[SCOPE];
+    const { disabled, distance } = getScrollOptions(oldEl || el, instance);
     const { clientHeight, scrollHeight, scrollTop } = containerEl;
@@ -104,3 +107,4 @@ const delta = scrollTop - lastScrollTop;
         const offsetTop = getOffsetTopDistance(el, containerEl);
-        shouldTrigger = scrollTop + clientHeight >= offsetTop + clientTop + height - distance;
+        shouldTrigger =
+            scrollTop + clientHeight >= offsetTop + clientTop + height - distance;
     }
@@ -111,5 +115,5 @@ if (shouldTrigger) {
 };
-function checkFull(el, cb) {
+function checkFull(el, cb, oldEl) {
     const { containerEl, instance } = el[SCOPE];
-    const { disabled } = getScrollOptions(el, instance);
+    const { disabled } = getScrollOptions(oldEl || el, instance);
     if (disabled)
@@ -129,21 +133,32 @@ return;
             if (!isFunction(cb)) {
-                throwError(SCOPE, '\'v-infinite-scroll\' binding value must be a function');
+                throwError(SCOPE, "'v-infinite-scroll' binding value must be a function");
             }
             yield nextTick();
-            const { delay, immediate } = getScrollOptions(el, instance);
+            const { delay, immediate, root } = getScrollOptions(el, instance);
+            let oldEl;
+            if (root) {
+                oldEl = el;
+                el = document.documentElement;
+            }
             const container = getScrollContainer(el, true);
-            const containerEl = container === window ? document.documentElement : container;
-            const onScroll = throttle(handleScroll.bind(null, el, cb), delay);
+            const containerEl = container === window
+                ? document.documentElement
+                : container;
+            const onScroll = throttle(handleScroll.bind(null, el, cb, oldEl), delay);
             if (!container)
                 return;
             el[SCOPE] = {
-                instance: (instance), container, containerEl,
-                delay, cb, onScroll,
-                lastScrollTop: containerEl.scrollTop,
+                instance: instance,
+                container,
+                containerEl,
+                delay,
+                cb,
+                onScroll,
+                lastScrollTop: containerEl.scrollTop
             };
             if (immediate) {
-                const observer = new MutationObserver(throttle(checkFull.bind(null, el, cb), CHECK_INTERVAL));
+                const observer = new MutationObserver(throttle(checkFull.bind(null, el, cb, oldEl), CHECK_INTERVAL));
                 el[SCOPE].observer = observer;
                 observer.observe(el, { childList: true, subtree: true });
-                checkFull(el, cb);
+                checkFull(el, cb, oldEl);
             }
@@ -153,7 +168,12 @@ container.addEventListener('scroll', onScroll);
     },
-    unmounted(el) {
+    unmounted(el, binding) {
+        const { instance } = binding;
+        const { root } = getScrollOptions(el, instance);
+        if (root) {
+            el = document.documentElement;
+        }
         const { container, onScroll } = el[SCOPE];
         container === null || container === void 0 ? void 0 : container.removeEventListener('scroll', onScroll);
         destroyObserver(el);
-    },
+    }
 };
@@ -160,0 +180,0 @@

lib/c-dhn-infinite-scroll/src/infiniteScroll.d.ts

@@ -1,2 +0,2 @@
-import type { ObjectDirective, ComponentPublicInstance } from 'vue';
+import { ObjectDirective, ComponentPublicInstance } from 'vue';
 export declare const SCOPE = "CDhnInfiniteScroll";
@@ -3,0 +3,0 @@ export declare const CHECK_INTERVAL = 50;

lib/c-dhn-tabs/index.js

@@ -1,2 +0,2 @@
-import { defineComponent, ref, computed, h, getCurrentInstance, provide, watch, onMounted, Fragment } from 'vue';
+import { defineComponent, h, ref, getCurrentInstance, provide, watch, onUpdated, onMounted, Fragment } from 'vue';
 
@@ -33,16 +33,5 @@ /**
     },
-    setup() {
-        const navOffset = ref(0);
-        const navStyle = computed(() => {
-            const dir = "X";
-            return {
-                transform: `translate${dir}(-${navOffset.value}px)`,
-            };
-        });
-        return {
-            navStyle,
-        };
-    },
+    setup() { },
     render() {
-        const { navStyle, panes, onTabClick } = this;
+        const { panes, onTabClick } = this;
         const tabs = panes.map((pane, index) => {
@@ -57,3 +46,2 @@ var _a, _b;
                     "c-dhn-tabs__item": true,
-                    "is-top": true,
                     "is-active": pane.active,
@@ -76,15 +64,9 @@ "is-disabled": pane.props.disabled,
             ref: "el$",
-            class: ["c-dhn-tabs__nav-wrap", "is-top"],
+            class: "c-dhn-tabs__nav-wrap",
         }, [
             h("div", {
-                class: "c-dhn-tabs__nav-scroll",
-                ref: "navScroll$",
-            }, [
-                h("div", {
-                    class: ["c-dhn-tabs__nav", `is-top`],
-                    ref: "nav$",
-                    style: navStyle,
-                    role: "tablist",
-                }, [tabs]),
-            ]),
+                class: "c-dhn-tabs__nav",
+                ref: "nav$",
+                role: "tablist",
+            }, [tabs]),
         ]);
@@ -112,3 +94,3 @@ },
         "input",
-        "update:modelValue"
+        "update:modelValue",
     ],
@@ -120,3 +102,2 @@ setup(props, { emit, slots }) {
         const instance = getCurrentInstance();
-        const nav$ = ref(null);
         const paneStatesMap = {};
@@ -193,2 +174,5 @@ provide("updatePaneState", (pane) => {
         };
+        onUpdated(() => {
+            setPaneInstances();
+        });
         onMounted(() => {
@@ -198,3 +182,2 @@ setPaneInstances();
         return {
-            nav$,
             currentName,
@@ -209,3 +192,3 @@ panes,
         const header = h("div", {
-            class: ["c-dhn-tabs__header", `is-top`],
+            class: ["c-dhn-tabs__header"],
         }, h(script$1, {
@@ -221,6 +204,3 @@ currentName,
         return h("div", {
-            class: {
-                "c-dhn-tabs": true,
-                [`el-tabs--top`]: true,
-            },
+            class: "c-dhn-tabs"
         }, [header, panels]);
@@ -227,0 +207,0 @@ },

lib/c-dhn-tabs/src/tab-nav.vue.d.ts

@@ -12,7 +12,3 @@ import { PropType } from "vue";
     };
-}, {
-    navStyle: import("vue").ComputedRef<{
-        transform: string;
-    }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     panes?: unknown;
@@ -19,0 +15,0 @@ onTabClick?: unknown;

lib/c-dhn-tabs/src/tabs.vue.d.ts

@@ -13,3 +13,2 @@ import { PropType } from "vue";
 }, {
-    nav$: any;
     currentName: import("vue").Ref<string>;
@@ -16,0 +15,0 @@ panes: import("vue").Ref<any[]>;

lib/index.cjs.js

@@ -6,5 +6,6 @@ 'use strict';
 var vue = require('vue');
-var utils = require('./utils/utils');
 var time = require('./utils/time');
+var vue$1 = require('swiper/vue');
 var throttle = require('lodash/throttle');
+var utils = require('./utils/utils');
 var dom = require('./utils/dom');
@@ -18,32 +19,2 @@ var throwError = require('./utils/error');
 
-var script$a = vue.defineComponent({
-    name: 'CDhnButton',
-    setup(props, { emit }) {
-        const handleClick = evt => {
-            let obj = utils.coerceTruthyValueToArray([]);
-            alert(obj);
-        };
-        return {
-            handleClick,
-        };
-    }
-});
-
-function render$8(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createBlock("div", null, [
-    vue.createVNode("button", {
-      class: "btn",
-      onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleClick && _ctx.handleClick(...args)))
-    }, "ceshi")
-  ]))
-}
-
-script$a.render = render$8;
-script$a.__file = "packages/button/src/button.vue";
-
-script$a.install = (app) => {
-    app.component(script$a.name, script$a);
-};
-const _CDhnButton = script$a;
-
 const updateTime = function (time$1) {
@@ -62,3 +33,3 @@ if (time$1) {
 };
-var script$9 = vue.defineComponent({
+var script$b = vue.defineComponent({
     name: "CDhnDateCountdown",
@@ -228,12 +199,12 @@ props: {
 
-script$9.render = render$7;
-script$9.__file = "packages/dateCountdown/src/dateCountdown.vue";
+script$b.render = render$7;
+script$b.__file = "packages/dateCountdown/src/dateCountdown.vue";
 
-script$9.install = (app) => {
-    app.component(script$9.name, script$9);
+script$b.install = (app) => {
+    app.component(script$b.name, script$b);
 };
-const _CDhnDateCountdown = script$9;
+const _CDhnDateCountdown = script$b;
 
 const ERROR_EVENT = "error";
-var script$8 = vue.defineComponent({
+var script$a = vue.defineComponent({
     name: "CDhnAvatar",
@@ -335,11 +306,11 @@ props: {
 
-script$8.render = render$6;
-script$8.__file = "packages/avatar/src/avatar.vue";
+script$a.render = render$6;
+script$a.__file = "packages/avatar/src/avatar.vue";
 
-script$8.install = (app) => {
-    app.component(script$8.name, script$8);
+script$a.install = (app) => {
+    app.component(script$a.name, script$a);
 };
-const _CDhnAvatar = script$8;
+const _CDhnAvatar = script$a;
 
-var script$7 = vue.defineComponent({
+var script$9 = vue.defineComponent({
     name: "CDhnCol",
@@ -395,11 +366,11 @@ props: {
 
-script$7.render = render$5;
-script$7.__file = "packages/col/src/col.vue";
+script$9.render = render$5;
+script$9.__file = "packages/col/src/col.vue";
 
-script$7.install = (app) => {
-    app.component(script$7.name, script$7);
+script$9.install = (app) => {
+    app.component(script$9.name, script$9);
 };
-const _CDhnCol = script$7;
+const _CDhnCol = script$9;
 
-var script$6 = vue.defineComponent({
+var script$8 = vue.defineComponent({
     name: "CDhnContainer",
@@ -416,11 +387,11 @@ });
 
-script$6.render = render$4;
-script$6.__file = "packages/container/src/container.vue";
+script$8.render = render$4;
+script$8.__file = "packages/container/src/container.vue";
 
-script$6.install = (app) => {
-    app.component(script$6.name, script$6);
+script$8.install = (app) => {
+    app.component(script$8.name, script$8);
 };
-const _CDhnContainer = script$6;
+const _CDhnContainer = script$8;
 
-var script$5 = vue.defineComponent({
+var script$7 = vue.defineComponent({
     name: "CDhnRow",
@@ -480,11 +451,11 @@ props: {
 
-script$5.render = render$3;
-script$5.__file = "packages/row/src/row.vue";
+script$7.render = render$3;
+script$7.__file = "packages/row/src/row.vue";
 
-script$5.install = (app) => {
-    app.component(script$5.name, script$5);
+script$7.install = (app) => {
+    app.component(script$7.name, script$7);
 };
-const _CDhnRow = script$5;
+const _CDhnRow = script$7;
 
-var script$4 = vue.defineComponent({
+var script$6 = vue.defineComponent({
     name: "CDhnText",
@@ -532,9 +503,9 @@ props: {
 
-script$4.render = render$2;
-script$4.__file = "packages/text/src/text.vue";
+script$6.render = render$2;
+script$6.__file = "packages/text/src/text.vue";
 
-script$4.install = (app) => {
-    app.component(script$4.name, script$4);
+script$6.install = (app) => {
+    app.component(script$6.name, script$6);
 };
-const _CDhnText = script$4;
+const _CDhnText = script$6;
 
@@ -559,3 +530,3 @@ /**
 
-var script$3 = vue.defineComponent({
+var script$5 = vue.defineComponent({
     name: "CDhnTabNav",
@@ -572,16 +543,5 @@ props: {
     },
-    setup() {
-        const navOffset = vue.ref(0);
-        const navStyle = vue.computed(() => {
-            const dir = "X";
-            return {
-                transform: `translate${dir}(-${navOffset.value}px)`,
-            };
-        });
-        return {
-            navStyle,
-        };
-    },
+    setup() { },
     render() {
-        const { navStyle, panes, onTabClick } = this;
+        const { panes, onTabClick } = this;
         const tabs = panes.map((pane, index) => {
@@ -596,3 +556,2 @@ var _a, _b;
                     "c-dhn-tabs__item": true,
-                    "is-top": true,
                     "is-active": pane.active,
@@ -615,15 +574,9 @@ "is-disabled": pane.props.disabled,
             ref: "el$",
-            class: ["c-dhn-tabs__nav-wrap", "is-top"],
+            class: "c-dhn-tabs__nav-wrap",
         }, [
             vue.h("div", {
-                class: "c-dhn-tabs__nav-scroll",
-                ref: "navScroll$",
-            }, [
-                vue.h("div", {
-                    class: ["c-dhn-tabs__nav", `is-top`],
-                    ref: "nav$",
-                    style: navStyle,
-                    role: "tablist",
-                }, [tabs]),
-            ]),
+                class: "c-dhn-tabs__nav",
+                ref: "nav$",
+                role: "tablist",
+            }, [tabs]),
         ]);
@@ -633,7 +586,7 @@ },
 
-script$3.__file = "packages/tabs/src/tab-nav.vue";
+script$5.__file = "packages/tabs/src/tab-nav.vue";
 
-var script$2 = vue.defineComponent({
+var script$4 = vue.defineComponent({
     name: "CDhnTabs",
-    components: { TabNav: script$3 },
+    components: { TabNav: script$5 },
     props: {
@@ -652,3 +605,3 @@ modelValue: {
         "input",
-        "update:modelValue"
+        "update:modelValue",
     ],
@@ -660,3 +613,2 @@ setup(props, { emit, slots }) {
         const instance = vue.getCurrentInstance();
-        const nav$ = vue.ref(null);
         const paneStatesMap = {};
@@ -733,2 +685,5 @@ vue.provide("updatePaneState", (pane) => {
         };
+        vue.onUpdated(() => {
+            setPaneInstances();
+        });
         vue.onMounted(() => {
@@ -738,3 +693,2 @@ setPaneInstances();
         return {
-            nav$,
             currentName,
@@ -749,4 +703,4 @@ panes,
         const header = vue.h("div", {
-            class: ["c-dhn-tabs__header", `is-top`],
-        }, vue.h(script$3, {
+            class: ["c-dhn-tabs__header"],
+        }, vue.h(script$5, {
             currentName,
@@ -761,6 +715,229 @@ panes,
         return vue.h("div", {
-            class: {
-                "c-dhn-tabs": true,
-                [`el-tabs--top`]: true,
+            class: "c-dhn-tabs"
+        }, [header, panels]);
+    },
+});
+
+script$4.__file = "packages/tabs/src/tabs.vue";
+
+script$4.install = (app) => {
+    app.component(script$4.name, script$4);
+};
+const _CDhnTabs = script$4;
+
+var script$3 = vue.defineComponent({
+    name: "CDhnSwiperNav",
+    components: { Swiper: vue$1.Swiper, SwiperSlide: vue$1.SwiperSlide },
+    props: {
+        panes: {
+            type: Array,
+            default: () => [],
+        },
+        currentIndex: {
+            type: Number,
+            default: "",
+        },
+        onTabClick: {
+            type: Function,
+            default: NOOP,
+        },
+        option: {
+            type: Object
+        }
+    },
+    setup(props) {
+        const swiper$ = { instance: null };
+        const updateSwiperState = vue.inject("updateSwiperState");
+        updateSwiperState(swiper$);
+        const { onTabClick } = props;
+        const swiperTabClick = (pane, tabName, ev) => {
+            var _a;
+            const index = props.panes.findIndex((item) => item.props.name === tabName);
+            (_a = swiper$.instance) === null || _a === void 0 ? void 0 : _a.slideTo(index);
+            onTabClick(pane, tabName, ev);
+        };
+        return { swiper$, swiperTabClick };
+    },
+    render() {
+        const { panes, swiper$, swiperTabClick, currentIndex, option } = this;
+        const tabs = panes.map((pane, index) => {
+            var _a, _b;
+            let tabName = pane.props.name || pane.index || `${index}`;
+            pane.index = `${index}`;
+            const tabLabelContent = ((_b = (_a = pane.instance.slots).label) === null || _b === void 0 ? void 0 : _b.call(_a)) || pane.props.label;
+            const tabindex = pane.active ? 0 : -1;
+            let content = vue.h("div", {
+                class: {
+                    "c-dhn-tabs__item": true,
+                    "is-active": pane.active,
+                    "is-disabled": pane.props.disabled,
+                },
+                id: `tab-${tabName}`,
+                key: `tab-${tabName}`,
+                "aria-controls": `pane-${tabName}`,
+                role: "tab",
+                "aria-selected": pane.active,
+                ref: `tab-${tabName}`,
+                tabindex: tabindex,
+                onClick: (ev) => {
+                    swiperTabClick(pane, tabName, ev);
+                },
+            }, [tabLabelContent]);
+            return vue.h(vue$1.SwiperSlide, null, { default: () => content });
+        });
+        return vue.h(vue$1.Swiper, Object.assign(Object.assign({}, option), { initialSlide: currentIndex, onSwiper: (swiper) => {
+                swiper$.instance = swiper;
+            } }), { default: () => [tabs] });
+    },
+});
+
+script$3.__file = "packages/swiper/src/swiper-nav.vue";
+
+var script$2 = vue.defineComponent({
+    name: "CDhnSwiper",
+    components: { SwiperNav: script$3 },
+    props: {
+        modelValue: {
+            type: String,
+            default: "",
+        },
+        beforeLeave: {
+            type: Function,
+            default: null,
+        },
+        option: {
+            type: Object,
+            default: () => {
+                return {
+                    centeredSlides: false,
+                    loop: false,
+                    slideToClickedSlide: true,
+                    allowTouchMove: true,
+                    slidesPerView: 3,
+                    spaceBetween: 15,
+                };
             },
+        },
+    },
+    emits: [
+        "tab-click",
+        "input",
+        "update:modelValue",
+    ],
+    setup(props, { emit, slots }) {
+        const currentName = vue.ref(props.modelValue || "0");
+        const currentIndex = vue.ref(0);
+        const pane = [];
+        const panes = vue.ref(pane);
+        const instance = vue.getCurrentInstance();
+        const paneStatesMap = {};
+        let swiperInstance = { instance: null };
+        vue.provide("updatePaneState", (pane) => {
+            paneStatesMap[pane.uid] = pane;
+        });
+        vue.provide("rootTabs", {
+            props,
+            currentName,
+        });
+        vue.provide("updateSwiperState", (swiper) => {
+            swiperInstance = swiper;
+        });
+        const changeCurrentName = (value) => {
+            currentName.value = value;
+            emit("input", value);
+            emit("update:modelValue", value);
+        };
+        const setCurrentName = (value) => {
+            if (currentName.value === value)
+                return;
+            const beforeLeave = props.beforeLeave;
+            const before = beforeLeave && beforeLeave(value, currentName.value);
+            if (before && isPromise(before)) {
+                before.then(() => {
+                    changeCurrentName(value);
+                }, () => {
+                });
+            }
+            else if (before !== false) {
+                changeCurrentName(value);
+            }
+        };
+        vue.watch(() => props.modelValue, (modelValue) => {
+            var _a;
+            setCurrentName(modelValue);
+            let index = panes.value.findIndex((pane) => pane.props.name === modelValue);
+            (_a = swiperInstance.instance) === null || _a === void 0 ? void 0 : _a.slideTo(index);
+        });
+        const getPaneInstanceFromSlot = (vnode, paneInstanceList = []) => {
+            Array.from((vnode.children || [])).forEach((node) => {
+                let type = node.type;
+                type = type.name || type;
+                if (type === "CDhnTabPane" && node.component) {
+                    paneInstanceList.push(node.component);
+                }
+                else if (type === vue.Fragment || type === "template") {
+                    getPaneInstanceFromSlot(node, paneInstanceList);
+                }
+            });
+            return paneInstanceList;
+        };
+        const setPaneInstances = (isForceUpdate = false) => {
+            if (slots.default) {
+                const children = instance === null || instance === void 0 ? void 0 : instance.subTree.children;
+                const content = Array.from(children).find(({ props }) => {
+                    return (props === null || props === void 0 ? void 0 : props.class) === "c-dhn-swipers__content";
+                });
+                if (!content)
+                    return;
+                const paneInstanceList = getPaneInstanceFromSlot(content).map((paneComponent) => {
+                    return paneStatesMap[paneComponent.uid];
+                });
+                const panesChanged = !((paneInstanceList.length === panes.value.length &&
+                    paneInstanceList.every((pane, index) => pane.uid === panes.value[index].uid)));
+                if (isForceUpdate || panesChanged) {
+                    panes.value = paneInstanceList;
+                    currentIndex.value = paneInstanceList.findIndex((pane) => pane.props.name === currentName.value);
+                }
+            }
+            else if (panes.value.length !== 0) {
+                panes.value = [];
+            }
+        };
+        const handleTabClick = (tab, tabName, event) => {
+            if (tab.props.disabled)
+                return;
+            setCurrentName(tabName);
+            emit("tab-click", tab, event);
+        };
+        vue.onUpdated(() => {
+            setPaneInstances();
+        });
+        vue.onMounted(() => {
+            setPaneInstances();
+        });
+        return {
+            currentName,
+            panes,
+            handleTabClick,
+            currentIndex,
+        };
+    },
+    render() {
+        var _a;
+        const { panes, handleTabClick, currentIndex, option } = this;
+        const header = vue.h("div", {
+            class: ["c-dhn-swipers__header"],
+        }, panes.length
+            ? vue.h(script$3, {
+                currentIndex,
+                panes,
+                onTabClick: handleTabClick,
+                option
+            })
+            : "");
+        const panels = vue.h("div", {
+            class: "c-dhn-swipers__content",
+        }, (_a = this.$slots) === null || _a === void 0 ? void 0 : _a.default());
+        return vue.h("div", {
+            class: "c-dhn-swiper",
         }, [header, panels]);
@@ -770,3 +947,3 @@ },
 
-script$2.__file = "packages/tabs/src/tabs.vue";
+script$2.__file = "packages/swiper/src/swiper.vue";
 
@@ -776,3 +953,3 @@ script$2.install = (app) => {
 };
-const _CDhnTabs = script$2;
+const _CDhnSwiper = script$2;
 
@@ -893,20 +1070,23 @@ var script$1 = vue.defineComponent({
         type: Number,
-        default: DEFAULT_DELAY,
+        default: DEFAULT_DELAY
     },
     distance: {
         type: Number,
-        default: DEFAULT_DISTANCE,
+        default: DEFAULT_DISTANCE
     },
     disabled: {
         type: Boolean,
-        default: false,
+        default: false
     },
     immediate: {
         type: Boolean,
-        default: true,
+        default: true
     },
+    root: {
+        type: Boolean,
+        default: false
+    }
 };
 const getScrollOptions = (el, instance) => {
-    return utils.entries(attributes)
-        .reduce((acm, [name, option]) => {
+    return utils.entries(attributes).reduce((acm, [name, option]) => {
         var _a, _b;
@@ -929,5 +1109,5 @@ const { type, default: defaultValue } = option;
 };
-const handleScroll = (el, cb) => {
-    const { container, containerEl, instance, observer, lastScrollTop, } = el[SCOPE];
-    const { disabled, distance } = getScrollOptions(el, instance);
+const handleScroll = (el, cb, oldEl) => {
+    const { container, containerEl, instance, observer, lastScrollTop } = el[SCOPE];
+    const { disabled, distance } = getScrollOptions(oldEl || el, instance);
     const { clientHeight, scrollHeight, scrollTop } = containerEl;
@@ -945,3 +1125,4 @@ const delta = scrollTop - lastScrollTop;
         const offsetTop = dom.getOffsetTopDistance(el, containerEl);
-        shouldTrigger = scrollTop + clientHeight >= offsetTop + clientTop + height - distance;
+        shouldTrigger =
+            scrollTop + clientHeight >= offsetTop + clientTop + height - distance;
     }
@@ -952,5 +1133,5 @@ if (shouldTrigger) {
 };
-function checkFull(el, cb) {
+function checkFull(el, cb, oldEl) {
     const { containerEl, instance } = el[SCOPE];
-    const { disabled } = getScrollOptions(el, instance);
+    const { disabled } = getScrollOptions(oldEl || el, instance);
     if (disabled)
@@ -970,21 +1151,32 @@ return;
             if (!isFunction(cb)) {
-                throwError__default['default'](SCOPE, '\'v-infinite-scroll\' binding value must be a function');
+                throwError__default['default'](SCOPE, "'v-infinite-scroll' binding value must be a function");
             }
             yield vue.nextTick();
-            const { delay, immediate } = getScrollOptions(el, instance);
+            const { delay, immediate, root } = getScrollOptions(el, instance);
+            let oldEl;
+            if (root) {
+                oldEl = el;
+                el = document.documentElement;
+            }
             const container = dom.getScrollContainer(el, true);
-            const containerEl = container === window ? document.documentElement : container;
-            const onScroll = throttle__default['default'](handleScroll.bind(null, el, cb), delay);
+            const containerEl = container === window
+                ? document.documentElement
+                : container;
+            const onScroll = throttle__default['default'](handleScroll.bind(null, el, cb, oldEl), delay);
             if (!container)
                 return;
             el[SCOPE] = {
-                instance: (instance), container, containerEl,
-                delay, cb, onScroll,
-                lastScrollTop: containerEl.scrollTop,
+                instance: instance,
+                container,
+                containerEl,
+                delay,
+                cb,
+                onScroll,
+                lastScrollTop: containerEl.scrollTop
             };
             if (immediate) {
-                const observer = new MutationObserver(throttle__default['default'](checkFull.bind(null, el, cb), CHECK_INTERVAL));
+                const observer = new MutationObserver(throttle__default['default'](checkFull.bind(null, el, cb, oldEl), CHECK_INTERVAL));
                 el[SCOPE].observer = observer;
                 observer.observe(el, { childList: true, subtree: true });
-                checkFull(el, cb);
+                checkFull(el, cb, oldEl);
             }
@@ -994,7 +1186,12 @@ container.addEventListener('scroll', onScroll);
     },
-    unmounted(el) {
+    unmounted(el, binding) {
+        const { instance } = binding;
+        const { root } = getScrollOptions(el, instance);
+        if (root) {
+            el = document.documentElement;
+        }
         const { container, onScroll } = el[SCOPE];
         container === null || container === void 0 ? void 0 : container.removeEventListener('scroll', onScroll);
         destroyObserver(el);
-    },
+    }
 };
@@ -1481,3 +1678,2 @@
 const components = [
-    _CDhnButton,
     _CDhnDateCountdown,
@@ -1490,2 +1686,3 @@ _CDhnAvatar,
     _CDhnTabs,
+    _CDhnSwiper,
     _CDhnTabPane,
@@ -1509,3 +1706,2 @@ _CDhnSeamlessScroll
 exports.CDhnAvatar = _CDhnAvatar;
-exports.CDhnButton = _CDhnButton;
 exports.CDhnCol = _CDhnCol;
@@ -1517,2 +1713,3 @@ exports.CDhnContainer = _CDhnContainer;
 exports.CDhnSeamlessScroll = _CDhnSeamlessScroll;
+exports.CDhnSwiper = _CDhnSwiper;
 exports.CDhnTabPane = _CDhnTabPane;
@@ -1519,0 +1716,0 @@ exports.CDhnTabs = _CDhnTabs;

lib/index.d.ts

 import { App } from 'vue';
-import CDhnButton from './c-dhn-button';
 import CDhnDateCountdown from './c-dhn-date-countdown';
@@ -10,6 +9,7 @@ import CDhnAvatar from './c-dhn-avatar';
 import CDhnTabs from './c-dhn-tabs';
+import CDhnSwiper from './c-dhn-swiper';
 import CDhnTabPane from './c-dhn-tab-pane';
 import CDhnInfiniteScroll from './c-dhn-infinite-scroll';
 import CDhnSeamlessScroll from './c-dhn-seamless-scroll';
-export { CDhnButton, CDhnDateCountdown, CDhnAvatar, CDhnCol, CDhnContainer, CDhnRow, CDhnText, CDhnTabs, CDhnTabPane, CDhnInfiniteScroll, CDhnSeamlessScroll };
+export { CDhnDateCountdown, CDhnAvatar, CDhnCol, CDhnContainer, CDhnRow, CDhnText, CDhnTabs, CDhnSwiper, CDhnTabPane, CDhnInfiniteScroll, CDhnSeamlessScroll };
 declare const _default: {
@@ -16,0 +16,0 @@ version: string;

lib/index.esm.js

@@ -1,38 +0,9 @@
-import { defineComponent, openBlock, createBlock, createVNode, reactive, watch, computed, toRefs, toDisplayString, createCommentVNode, ref, toRef, Fragment, renderSlot, inject, provide, h, getCurrentInstance, onMounted, withDirectives, vShow, nextTick } from 'vue';
-import { coerceTruthyValueToArray, entries } from './utils/utils';
+import { defineComponent, reactive, watch, computed, toRefs, openBlock, createBlock, createVNode, toDisplayString, createCommentVNode, ref, toRef, Fragment, renderSlot, inject, provide, h, getCurrentInstance, onUpdated, onMounted, withDirectives, vShow, nextTick } from 'vue';
 import { getCountdownTime } from './utils/time';
+import { Swiper, SwiperSlide } from 'swiper/vue';
 import throttle from 'lodash/throttle';
+import { entries } from './utils/utils';
 import { getScrollContainer, getOffsetTopDistance } from './utils/dom';
 import throwError from './utils/error';
 
-var script$a = defineComponent({
-    name: 'CDhnButton',
-    setup(props, { emit }) {
-        const handleClick = evt => {
-            let obj = coerceTruthyValueToArray([]);
-            alert(obj);
-        };
-        return {
-            handleClick,
-        };
-    }
-});
-
-function render$8(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createBlock("div", null, [
-    createVNode("button", {
-      class: "btn",
-      onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleClick && _ctx.handleClick(...args)))
-    }, "ceshi")
-  ]))
-}
-
-script$a.render = render$8;
-script$a.__file = "packages/button/src/button.vue";
-
-script$a.install = (app) => {
-    app.component(script$a.name, script$a);
-};
-const _CDhnButton = script$a;
-
 const updateTime = function (time) {
@@ -51,3 +22,3 @@ if (time) {
 };
-var script$9 = defineComponent({
+var script$b = defineComponent({
     name: "CDhnDateCountdown",
@@ -217,12 +188,12 @@ props: {
 
-script$9.render = render$7;
-script$9.__file = "packages/dateCountdown/src/dateCountdown.vue";
+script$b.render = render$7;
+script$b.__file = "packages/dateCountdown/src/dateCountdown.vue";
 
-script$9.install = (app) => {
-    app.component(script$9.name, script$9);
+script$b.install = (app) => {
+    app.component(script$b.name, script$b);
 };
-const _CDhnDateCountdown = script$9;
+const _CDhnDateCountdown = script$b;
 
 const ERROR_EVENT = "error";
-var script$8 = defineComponent({
+var script$a = defineComponent({
     name: "CDhnAvatar",
@@ -324,11 +295,11 @@ props: {
 
-script$8.render = render$6;
-script$8.__file = "packages/avatar/src/avatar.vue";
+script$a.render = render$6;
+script$a.__file = "packages/avatar/src/avatar.vue";
 
-script$8.install = (app) => {
-    app.component(script$8.name, script$8);
+script$a.install = (app) => {
+    app.component(script$a.name, script$a);
 };
-const _CDhnAvatar = script$8;
+const _CDhnAvatar = script$a;
 
-var script$7 = defineComponent({
+var script$9 = defineComponent({
     name: "CDhnCol",
@@ -384,11 +355,11 @@ props: {
 
-script$7.render = render$5;
-script$7.__file = "packages/col/src/col.vue";
+script$9.render = render$5;
+script$9.__file = "packages/col/src/col.vue";
 
-script$7.install = (app) => {
-    app.component(script$7.name, script$7);
+script$9.install = (app) => {
+    app.component(script$9.name, script$9);
 };
-const _CDhnCol = script$7;
+const _CDhnCol = script$9;
 
-var script$6 = defineComponent({
+var script$8 = defineComponent({
     name: "CDhnContainer",
@@ -405,11 +376,11 @@ });
 
-script$6.render = render$4;
-script$6.__file = "packages/container/src/container.vue";
+script$8.render = render$4;
+script$8.__file = "packages/container/src/container.vue";
 
-script$6.install = (app) => {
-    app.component(script$6.name, script$6);
+script$8.install = (app) => {
+    app.component(script$8.name, script$8);
 };
-const _CDhnContainer = script$6;
+const _CDhnContainer = script$8;
 
-var script$5 = defineComponent({
+var script$7 = defineComponent({
     name: "CDhnRow",
@@ -469,11 +440,11 @@ props: {
 
-script$5.render = render$3;
-script$5.__file = "packages/row/src/row.vue";
+script$7.render = render$3;
+script$7.__file = "packages/row/src/row.vue";
 
-script$5.install = (app) => {
-    app.component(script$5.name, script$5);
+script$7.install = (app) => {
+    app.component(script$7.name, script$7);
 };
-const _CDhnRow = script$5;
+const _CDhnRow = script$7;
 
-var script$4 = defineComponent({
+var script$6 = defineComponent({
     name: "CDhnText",
@@ -521,9 +492,9 @@ props: {
 
-script$4.render = render$2;
-script$4.__file = "packages/text/src/text.vue";
+script$6.render = render$2;
+script$6.__file = "packages/text/src/text.vue";
 
-script$4.install = (app) => {
-    app.component(script$4.name, script$4);
+script$6.install = (app) => {
+    app.component(script$6.name, script$6);
 };
-const _CDhnText = script$4;
+const _CDhnText = script$6;
 
@@ -548,3 +519,3 @@ /**
 
-var script$3 = defineComponent({
+var script$5 = defineComponent({
     name: "CDhnTabNav",
@@ -561,16 +532,5 @@ props: {
     },
-    setup() {
-        const navOffset = ref(0);
-        const navStyle = computed(() => {
-            const dir = "X";
-            return {
-                transform: `translate${dir}(-${navOffset.value}px)`,
-            };
-        });
-        return {
-            navStyle,
-        };
-    },
+    setup() { },
     render() {
-        const { navStyle, panes, onTabClick } = this;
+        const { panes, onTabClick } = this;
         const tabs = panes.map((pane, index) => {
@@ -585,3 +545,2 @@ var _a, _b;
                     "c-dhn-tabs__item": true,
-                    "is-top": true,
                     "is-active": pane.active,
@@ -604,15 +563,9 @@ "is-disabled": pane.props.disabled,
             ref: "el$",
-            class: ["c-dhn-tabs__nav-wrap", "is-top"],
+            class: "c-dhn-tabs__nav-wrap",
         }, [
             h("div", {
-                class: "c-dhn-tabs__nav-scroll",
-                ref: "navScroll$",
-            }, [
-                h("div", {
-                    class: ["c-dhn-tabs__nav", `is-top`],
-                    ref: "nav$",
-                    style: navStyle,
-                    role: "tablist",
-                }, [tabs]),
-            ]),
+                class: "c-dhn-tabs__nav",
+                ref: "nav$",
+                role: "tablist",
+            }, [tabs]),
         ]);
@@ -622,7 +575,7 @@ },
 
-script$3.__file = "packages/tabs/src/tab-nav.vue";
+script$5.__file = "packages/tabs/src/tab-nav.vue";
 
-var script$2 = defineComponent({
+var script$4 = defineComponent({
     name: "CDhnTabs",
-    components: { TabNav: script$3 },
+    components: { TabNav: script$5 },
     props: {
@@ -641,3 +594,3 @@ modelValue: {
         "input",
-        "update:modelValue"
+        "update:modelValue",
     ],
@@ -649,3 +602,2 @@ setup(props, { emit, slots }) {
         const instance = getCurrentInstance();
-        const nav$ = ref(null);
         const paneStatesMap = {};
@@ -722,2 +674,5 @@ provide("updatePaneState", (pane) => {
         };
+        onUpdated(() => {
+            setPaneInstances();
+        });
         onMounted(() => {
@@ -727,3 +682,2 @@ setPaneInstances();
         return {
-            nav$,
             currentName,
@@ -738,4 +692,4 @@ panes,
         const header = h("div", {
-            class: ["c-dhn-tabs__header", `is-top`],
-        }, h(script$3, {
+            class: ["c-dhn-tabs__header"],
+        }, h(script$5, {
             currentName,
@@ -750,6 +704,229 @@ panes,
         return h("div", {
-            class: {
-                "c-dhn-tabs": true,
-                [`el-tabs--top`]: true,
+            class: "c-dhn-tabs"
+        }, [header, panels]);
+    },
+});
+
+script$4.__file = "packages/tabs/src/tabs.vue";
+
+script$4.install = (app) => {
+    app.component(script$4.name, script$4);
+};
+const _CDhnTabs = script$4;
+
+var script$3 = defineComponent({
+    name: "CDhnSwiperNav",
+    components: { Swiper, SwiperSlide },
+    props: {
+        panes: {
+            type: Array,
+            default: () => [],
+        },
+        currentIndex: {
+            type: Number,
+            default: "",
+        },
+        onTabClick: {
+            type: Function,
+            default: NOOP,
+        },
+        option: {
+            type: Object
+        }
+    },
+    setup(props) {
+        const swiper$ = { instance: null };
+        const updateSwiperState = inject("updateSwiperState");
+        updateSwiperState(swiper$);
+        const { onTabClick } = props;
+        const swiperTabClick = (pane, tabName, ev) => {
+            var _a;
+            const index = props.panes.findIndex((item) => item.props.name === tabName);
+            (_a = swiper$.instance) === null || _a === void 0 ? void 0 : _a.slideTo(index);
+            onTabClick(pane, tabName, ev);
+        };
+        return { swiper$, swiperTabClick };
+    },
+    render() {
+        const { panes, swiper$, swiperTabClick, currentIndex, option } = this;
+        const tabs = panes.map((pane, index) => {
+            var _a, _b;
+            let tabName = pane.props.name || pane.index || `${index}`;
+            pane.index = `${index}`;
+            const tabLabelContent = ((_b = (_a = pane.instance.slots).label) === null || _b === void 0 ? void 0 : _b.call(_a)) || pane.props.label;
+            const tabindex = pane.active ? 0 : -1;
+            let content = h("div", {
+                class: {
+                    "c-dhn-tabs__item": true,
+                    "is-active": pane.active,
+                    "is-disabled": pane.props.disabled,
+                },
+                id: `tab-${tabName}`,
+                key: `tab-${tabName}`,
+                "aria-controls": `pane-${tabName}`,
+                role: "tab",
+                "aria-selected": pane.active,
+                ref: `tab-${tabName}`,
+                tabindex: tabindex,
+                onClick: (ev) => {
+                    swiperTabClick(pane, tabName, ev);
+                },
+            }, [tabLabelContent]);
+            return h(SwiperSlide, null, { default: () => content });
+        });
+        return h(Swiper, Object.assign(Object.assign({}, option), { initialSlide: currentIndex, onSwiper: (swiper) => {
+                swiper$.instance = swiper;
+            } }), { default: () => [tabs] });
+    },
+});
+
+script$3.__file = "packages/swiper/src/swiper-nav.vue";
+
+var script$2 = defineComponent({
+    name: "CDhnSwiper",
+    components: { SwiperNav: script$3 },
+    props: {
+        modelValue: {
+            type: String,
+            default: "",
+        },
+        beforeLeave: {
+            type: Function,
+            default: null,
+        },
+        option: {
+            type: Object,
+            default: () => {
+                return {
+                    centeredSlides: false,
+                    loop: false,
+                    slideToClickedSlide: true,
+                    allowTouchMove: true,
+                    slidesPerView: 3,
+                    spaceBetween: 15,
+                };
             },
+        },
+    },
+    emits: [
+        "tab-click",
+        "input",
+        "update:modelValue",
+    ],
+    setup(props, { emit, slots }) {
+        const currentName = ref(props.modelValue || "0");
+        const currentIndex = ref(0);
+        const pane = [];
+        const panes = ref(pane);
+        const instance = getCurrentInstance();
+        const paneStatesMap = {};
+        let swiperInstance = { instance: null };
+        provide("updatePaneState", (pane) => {
+            paneStatesMap[pane.uid] = pane;
+        });
+        provide("rootTabs", {
+            props,
+            currentName,
+        });
+        provide("updateSwiperState", (swiper) => {
+            swiperInstance = swiper;
+        });
+        const changeCurrentName = (value) => {
+            currentName.value = value;
+            emit("input", value);
+            emit("update:modelValue", value);
+        };
+        const setCurrentName = (value) => {
+            if (currentName.value === value)
+                return;
+            const beforeLeave = props.beforeLeave;
+            const before = beforeLeave && beforeLeave(value, currentName.value);
+            if (before && isPromise(before)) {
+                before.then(() => {
+                    changeCurrentName(value);
+                }, () => {
+                });
+            }
+            else if (before !== false) {
+                changeCurrentName(value);
+            }
+        };
+        watch(() => props.modelValue, (modelValue) => {
+            var _a;
+            setCurrentName(modelValue);
+            let index = panes.value.findIndex((pane) => pane.props.name === modelValue);
+            (_a = swiperInstance.instance) === null || _a === void 0 ? void 0 : _a.slideTo(index);
+        });
+        const getPaneInstanceFromSlot = (vnode, paneInstanceList = []) => {
+            Array.from((vnode.children || [])).forEach((node) => {
+                let type = node.type;
+                type = type.name || type;
+                if (type === "CDhnTabPane" && node.component) {
+                    paneInstanceList.push(node.component);
+                }
+                else if (type === Fragment || type === "template") {
+                    getPaneInstanceFromSlot(node, paneInstanceList);
+                }
+            });
+            return paneInstanceList;
+        };
+        const setPaneInstances = (isForceUpdate = false) => {
+            if (slots.default) {
+                const children = instance === null || instance === void 0 ? void 0 : instance.subTree.children;
+                const content = Array.from(children).find(({ props }) => {
+                    return (props === null || props === void 0 ? void 0 : props.class) === "c-dhn-swipers__content";
+                });
+                if (!content)
+                    return;
+                const paneInstanceList = getPaneInstanceFromSlot(content).map((paneComponent) => {
+                    return paneStatesMap[paneComponent.uid];
+                });
+                const panesChanged = !((paneInstanceList.length === panes.value.length &&
+                    paneInstanceList.every((pane, index) => pane.uid === panes.value[index].uid)));
+                if (isForceUpdate || panesChanged) {
+                    panes.value = paneInstanceList;
+                    currentIndex.value = paneInstanceList.findIndex((pane) => pane.props.name === currentName.value);
+                }
+            }
+            else if (panes.value.length !== 0) {
+                panes.value = [];
+            }
+        };
+        const handleTabClick = (tab, tabName, event) => {
+            if (tab.props.disabled)
+                return;
+            setCurrentName(tabName);
+            emit("tab-click", tab, event);
+        };
+        onUpdated(() => {
+            setPaneInstances();
+        });
+        onMounted(() => {
+            setPaneInstances();
+        });
+        return {
+            currentName,
+            panes,
+            handleTabClick,
+            currentIndex,
+        };
+    },
+    render() {
+        var _a;
+        const { panes, handleTabClick, currentIndex, option } = this;
+        const header = h("div", {
+            class: ["c-dhn-swipers__header"],
+        }, panes.length
+            ? h(script$3, {
+                currentIndex,
+                panes,
+                onTabClick: handleTabClick,
+                option
+            })
+            : "");
+        const panels = h("div", {
+            class: "c-dhn-swipers__content",
+        }, (_a = this.$slots) === null || _a === void 0 ? void 0 : _a.default());
+        return h("div", {
+            class: "c-dhn-swiper",
         }, [header, panels]);
@@ -759,3 +936,3 @@ },
 
-script$2.__file = "packages/tabs/src/tabs.vue";
+script$2.__file = "packages/swiper/src/swiper.vue";
 
@@ -765,3 +942,3 @@ script$2.install = (app) => {
 };
-const _CDhnTabs = script$2;
+const _CDhnSwiper = script$2;
 
@@ -882,20 +1059,23 @@ var script$1 = defineComponent({
         type: Number,
-        default: DEFAULT_DELAY,
+        default: DEFAULT_DELAY
     },
     distance: {
         type: Number,
-        default: DEFAULT_DISTANCE,
+        default: DEFAULT_DISTANCE
     },
     disabled: {
         type: Boolean,
-        default: false,
+        default: false
     },
     immediate: {
         type: Boolean,
-        default: true,
+        default: true
     },
+    root: {
+        type: Boolean,
+        default: false
+    }
 };
 const getScrollOptions = (el, instance) => {
-    return entries(attributes)
-        .reduce((acm, [name, option]) => {
+    return entries(attributes).reduce((acm, [name, option]) => {
         var _a, _b;
@@ -918,5 +1098,5 @@ const { type, default: defaultValue } = option;
 };
-const handleScroll = (el, cb) => {
-    const { container, containerEl, instance, observer, lastScrollTop, } = el[SCOPE];
-    const { disabled, distance } = getScrollOptions(el, instance);
+const handleScroll = (el, cb, oldEl) => {
+    const { container, containerEl, instance, observer, lastScrollTop } = el[SCOPE];
+    const { disabled, distance } = getScrollOptions(oldEl || el, instance);
     const { clientHeight, scrollHeight, scrollTop } = containerEl;
@@ -934,3 +1114,4 @@ const delta = scrollTop - lastScrollTop;
         const offsetTop = getOffsetTopDistance(el, containerEl);
-        shouldTrigger = scrollTop + clientHeight >= offsetTop + clientTop + height - distance;
+        shouldTrigger =
+            scrollTop + clientHeight >= offsetTop + clientTop + height - distance;
     }
@@ -941,5 +1122,5 @@ if (shouldTrigger) {
 };
-function checkFull(el, cb) {
+function checkFull(el, cb, oldEl) {
     const { containerEl, instance } = el[SCOPE];
-    const { disabled } = getScrollOptions(el, instance);
+    const { disabled } = getScrollOptions(oldEl || el, instance);
     if (disabled)
@@ -959,21 +1140,32 @@ return;
             if (!isFunction(cb)) {
-                throwError(SCOPE, '\'v-infinite-scroll\' binding value must be a function');
+                throwError(SCOPE, "'v-infinite-scroll' binding value must be a function");
             }
             yield nextTick();
-            const { delay, immediate } = getScrollOptions(el, instance);
+            const { delay, immediate, root } = getScrollOptions(el, instance);
+            let oldEl;
+            if (root) {
+                oldEl = el;
+                el = document.documentElement;
+            }
             const container = getScrollContainer(el, true);
-            const containerEl = container === window ? document.documentElement : container;
-            const onScroll = throttle(handleScroll.bind(null, el, cb), delay);
+            const containerEl = container === window
+                ? document.documentElement
+                : container;
+            const onScroll = throttle(handleScroll.bind(null, el, cb, oldEl), delay);
             if (!container)
                 return;
             el[SCOPE] = {
-                instance: (instance), container, containerEl,
-                delay, cb, onScroll,
-                lastScrollTop: containerEl.scrollTop,
+                instance: instance,
+                container,
+                containerEl,
+                delay,
+                cb,
+                onScroll,
+                lastScrollTop: containerEl.scrollTop
             };
             if (immediate) {
-                const observer = new MutationObserver(throttle(checkFull.bind(null, el, cb), CHECK_INTERVAL));
+                const observer = new MutationObserver(throttle(checkFull.bind(null, el, cb, oldEl), CHECK_INTERVAL));
                 el[SCOPE].observer = observer;
                 observer.observe(el, { childList: true, subtree: true });
-                checkFull(el, cb);
+                checkFull(el, cb, oldEl);
             }
@@ -983,7 +1175,12 @@ container.addEventListener('scroll', onScroll);
     },
-    unmounted(el) {
+    unmounted(el, binding) {
+        const { instance } = binding;
+        const { root } = getScrollOptions(el, instance);
+        if (root) {
+            el = document.documentElement;
+        }
         const { container, onScroll } = el[SCOPE];
         container === null || container === void 0 ? void 0 : container.removeEventListener('scroll', onScroll);
         destroyObserver(el);
-    },
+    }
 };
@@ -1470,3 +1667,2 @@
 const components = [
-    _CDhnButton,
     _CDhnDateCountdown,
@@ -1479,2 +1675,3 @@ _CDhnAvatar,
     _CDhnTabs,
+    _CDhnSwiper,
     _CDhnTabPane,
@@ -1498,2 +1695,2 @@ _CDhnSeamlessScroll
 export default index;
-export { _CDhnAvatar as CDhnAvatar, _CDhnButton as CDhnButton, _CDhnCol as CDhnCol, _CDhnContainer as CDhnContainer, _CDhnDateCountdown as CDhnDateCountdown, _CDhnInfiniteScroll as CDhnInfiniteScroll, _CDhnRow as CDhnRow, _CDhnSeamlessScroll as CDhnSeamlessScroll, _CDhnTabPane as CDhnTabPane, _CDhnTabs as CDhnTabs, _CDhnText as CDhnText };
+export { _CDhnAvatar as CDhnAvatar, _CDhnCol as CDhnCol, _CDhnContainer as CDhnContainer, _CDhnDateCountdown as CDhnDateCountdown, _CDhnInfiniteScroll as CDhnInfiniteScroll, _CDhnRow as CDhnRow, _CDhnSeamlessScroll as CDhnSeamlessScroll, _CDhnSwiper as CDhnSwiper, _CDhnTabPane as CDhnTabPane, _CDhnTabs as CDhnTabs, _CDhnText as CDhnText };

lib/utils/error.js

@@ -11,3 +11,3 @@ import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
     _this = _Error.call(this, m) || this;
-    _this.name = 'ElementPlusError';
+    _this.name = 'CDhnActUIError';
     return _this;
@@ -14,0 +14,0 @@ }

package.json

 {
 	"name": "c-dhn-act",
-	"version": "1.0.11",
+	"version": "1.0.12",
 	"description": "c-dhn-act component",
@@ -14,3 +14,4 @@ "author": "[e-mail]>",
 		"comutils": "1.1.9",
-		"lodash": "^4.17.21"
+		"lodash": "^4.17.21",
+		"swiper": "6.7.5"
 	},
@@ -17,0 +18,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

204987

increased by14.11%

Number of package files

67

increased by3.08%

Lines of code

5497

increased by14.05%

Worsened metrics

Dependency count

4

increased by33.33%

Number of low supply chain risk alerts

11

increased by22.22%

Dependency changes

• + Addedswiper@6.7.5

• + Addeddom7@3.0.0(transitive)

• + Addedssr-window@3.0.0(transitive)

• + Addedswiper@6.7.5(transitive)