npm - @opentinyvue/vue-carousel - Versions diffs - 2.21.0 → 3.21.0 - Mend

@opentinyvue/vue-carousel 2.21.0 → 3.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/lib/index.js +1 -1
package/lib/mobile-first.js +156 -148
package/lib/pc.js +155 -148
package/package.json +3 -3
package/src/index.d.ts +147 -1
package/src/mobile-first.vue.d.ts +82 -1
package/src/pc.vue.d.ts +79 -1

package/lib/index.js CHANGED Viewed

@@ -99,7 +99,7 @@ var Carousel = defineComponent({
     });
   }
 });
-var version = "2.21.0";
+var version = "3.21.0";
 Carousel.install = function(Vue) {
   Vue.component(Carousel.name, Carousel);
 };

package/lib/mobile-first.js CHANGED Viewed

@@ -1,38 +1,42 @@
 import { renderless, api } from '@opentinyvue/vue-renderless/carousel/vue';
 import { defineComponent, props, setup } from '@opentinyvue/vue-common';
 import { IconChevronLeft, IconChevronRight, IconChevronUp, IconChevronDown } from '@opentinyvue/vue-icon';
+import { openBlock, createElementBlock, withModifiers, createElementVNode, normalizeStyle, withDirectives, normalizeClass, createBlock, resolveDynamicComponent, vShow, createCommentVNode, renderSlot, Fragment, renderList, toDisplayString } from 'vue';
-function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
-  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
-  if (render) {
-    options.render = render;
-    options.staticRenderFns = staticRenderFns;
-    options._compiled = true;
+function _createForOfIteratorHelperLoose(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (t) return (t = t.call(r)).next.bind(t);
+  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
+    t && (r = t);
+    var o = 0;
+    return function() {
+      return o >= r.length ? { done: true } : { done: false, value: r[o++] };
+    };
   }
-  var hook;
-  if (injectStyles) {
-    hook = injectStyles;
-  }
-  if (hook) {
-    if (options.functional) {
-      options._injectStyles = hook;
-      var originalRender = options.render;
-      options.render = function renderWithStyleInjection(h, context) {
-        hook.call(context);
-        return originalRender(h, context);
-      };
-    } else {
-      var existing = options.beforeCreate;
-      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
-    }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
   }
-  return {
-    exports: scriptExports,
-    options
-  };
 }
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+var _export_sfc = function _export_sfc2(sfc, props) {
+  var target = sfc.__vccOpts || sfc;
+  for (var _iterator = _createForOfIteratorHelperLoose(props), _step; !(_step = _iterator()).done; ) {
+    var _step$value = _step.value, key = _step$value[0], val = _step$value[1];
+    target[key] = val;
+  }
+  return target;
+};
-var __vue2_script = defineComponent({
+var _sfc_main = defineComponent({
   emits: ["change", "complete"],
   props: [].concat(props, ["initialIndex", "height", "trigger", "autoplay", "interval", "indicatorPosition", "indicatorStyle", "arrow", "type", "showTitle", "loop", "aspectRatio", "swipeable", "lite", "beforeSwipe"]),
   setup: function setup$1(props2, context) {
@@ -50,130 +54,134 @@ var __vue2_script = defineComponent({
     IconChevronDown: IconChevronDown()
   }
 });
-var render = function render2() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", {
-    staticClass: "relative overflow-hidden rounded",
-    attrs: {
-      "data-tag": "tiny-carousel"
-    },
-    on: {
-      "mouseenter": function mouseenter($event) {
-        $event.stopPropagation();
-        return _vm.handleMouseEnter.apply(null, arguments);
-      },
-      "mouseleave": function mouseleave($event) {
-        $event.stopPropagation();
-        return _vm.handleMouseLeave.apply(null, arguments);
-      }
-    }
-  }, [_c("div", {
-    ref: "carousel",
-    staticClass: "relative overflow-hidden rounded",
-    style: _vm.state.style,
-    attrs: {
-      "data-tag": "tiny-carousel-block"
-    },
-    on: {
-      "touchstart": _vm.touchstart,
-      "touchmove": _vm.touchmove,
-      "touchend": _vm.touchend
-    }
-  }, [_vm.state.hasButtons ? _c("button", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: (_vm.arrow === "always" || _vm.state.hover) && (_vm.loop || _vm.state.activeIndex > 0),
-      expression: "(arrow === 'always' || state.hover) && (loop || state.activeIndex > 0)"
-    }],
-    staticClass: "absolute group border-none outline-0 p-0 m-0 h-8 w-8 cursor-pointer z-[3] rounded-full bg-color-bg-3 active:bg-color-bg-7 text-color-text-inverse text-center text-xs flex items-center justify-center hover:bg-color-bg-7",
-    class: [_vm.type === "vertical" ? "top-4 left-1/2" : "left-4 top-1/2 -translate-y-4"],
-    attrs: {
-      "type": "button"
-    },
-    on: {
-      "mouseenter": function mouseenter($event) {
-        return _vm.handleButtonEnter("left");
-      },
-      "mouseleave": _vm.handleButtonLeave,
-      "click": function click($event) {
-        $event.stopPropagation();
-        return _vm.throttledArrowClick(_vm.state.activeIndex - 1);
-      }
-    }
-  }, [_c(_vm.type === "vertical" ? "icon-chevron-up" : "icon-chevron-left", {
-    tag: "component",
-    staticClass: "w-4.5 h-4.5 opacity-50 fill-color-icon-primary group-active:fill-color-bg-2 group-hover:fill-color-bg-1"
-  })], 1) : _vm._e(), _vm.state.hasButtons ? _c("button", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: (_vm.arrow === "always" || _vm.state.hover) && (_vm.loop || _vm.state.activeIndex < _vm.state.items.length - 1),
-      expression: "(arrow === 'always' || state.hover) && (loop || state.activeIndex < state.items.length - 1)"
-    }],
-    staticClass: "absolute group border-none outline-0 p-0 m-0 h-8 w-8 cursor-pointer z-[3] rounded-full bg-color-bg-3 active:bg-color-bg-7 text-color-text-inverse text-center text-xs flex items-center justify-center hover:bg-color-bg-7",
-    class: [_vm.type === "vertical" ? "top-auto left-1/2 bottom-4" : "right-4 top-1/2 -translate-y-4"],
-    attrs: {
-      "type": "button"
+var _hoisted_1 = ["onMouseenter", "onClick"];
+var _hoisted_2 = {
+  key: 0,
+  "data-tag": "tiny-carousel-label"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock(
+    "div",
+    {
+      "data-tag": "tiny-carousel",
+      class: "relative overflow-hidden rounded",
+      onMouseenter: _cache[9] || (_cache[9] = withModifiers(function() {
+        return _ctx.handleMouseEnter && _ctx.handleMouseEnter.apply(_ctx, arguments);
+      }, ["stop"])),
+      onMouseleave: _cache[10] || (_cache[10] = withModifiers(function() {
+        return _ctx.handleMouseLeave && _ctx.handleMouseLeave.apply(_ctx, arguments);
+      }, ["stop"]))
     },
-    on: {
-      "mouseenter": function mouseenter($event) {
-        return _vm.handleButtonEnter("right");
-      },
-      "mouseleave": _vm.handleButtonLeave,
-      "click": function click($event) {
-        $event.stopPropagation();
-        return _vm.throttledArrowClick(_vm.state.activeIndex + 1);
-      }
-    }
-  }, [_c(_vm.type === "vertical" ? "icon-chevron-down" : "icon-chevron-right", {
-    tag: "component",
-    staticClass: "w-4.5 h-4.5 opacity-50 fill-color-icon-primary group-active:fill-color-bg-2 group-hover:fill-color-bg-1"
-  })], 1) : _vm._e(), _vm._t("default")], 2), _vm.state.hasIndicators ? _c("ul", {
-    class: ["list-none m-0 py-0 px-1 z-[2] flex justify-center items-center", _vm.type === "vertical" && _vm.indicatorPosition !== "outside" ? "flex-col left-4 bottom-0 transform-none w-1 h-full py-1 px-0" : "w-full h-1 left-0 bottom-4", _vm.indicatorPosition === "outside" ? "static mt-2" : "absolute", _vm.state.hasLabel ? "left-0 right-0 text-center transform-none" : "", _vm.showTitle ? "left-auto right-3 bottom-1 transform-none bg-transparent" : ""],
-    attrs: {
-      "data-tag": "tiny-carousel-body"
-    }
-  }, _vm._l(_vm.state.items, function(item, index) {
-    return _c("li", {
-      key: index,
-      class: ["group cursor-pointer", _vm.type === "vertical" ? "block h-auto mb-1.5 mx-0 p-0 first:pl-0 last:pr-0" : "inline-block h-1 p-0 my-0 mr-1.5", _vm.state.hasLabel ? "py-1.5 px-1" : ""],
-      attrs: {
-        "data-tag": "tiny-carousel-list"
+    [createElementVNode(
+      "div",
+      {
+        "data-tag": "tiny-carousel-block",
+        onTouchstart: _cache[6] || (_cache[6] = function() {
+          return _ctx.touchstart && _ctx.touchstart.apply(_ctx, arguments);
+        }),
+        onTouchmove: _cache[7] || (_cache[7] = function() {
+          return _ctx.touchmove && _ctx.touchmove.apply(_ctx, arguments);
+        }),
+        onTouchend: _cache[8] || (_cache[8] = function() {
+          return _ctx.touchend && _ctx.touchend.apply(_ctx, arguments);
+        }),
+        ref: "carousel",
+        class: "relative overflow-hidden rounded",
+        style: normalizeStyle(_ctx.state.style)
       },
-      on: {
-        "mouseenter": function mouseenter($event) {
-          return _vm.throttledIndicatorHover(index);
+      [_ctx.state.hasButtons ? withDirectives((openBlock(), createElementBlock(
+        "button",
+        {
+          key: 0,
+          type: "button",
+          class: normalizeClass(["absolute group border-none outline-0 p-0 m-0 h-8 w-8 cursor-pointer z-[3] rounded-full bg-color-bg-3 active:bg-color-bg-7 text-color-text-inverse text-center text-xs flex items-center justify-center hover:bg-color-bg-7", [_ctx.type === "vertical" ? "top-4 left-1/2" : "left-4 top-1/2 -translate-y-4"]]),
+          onMouseenter: _cache[0] || (_cache[0] = function($event) {
+            return _ctx.handleButtonEnter("left");
+          }),
+          onMouseleave: _cache[1] || (_cache[1] = function() {
+            return _ctx.handleButtonLeave && _ctx.handleButtonLeave.apply(_ctx, arguments);
+          }),
+          onClick: _cache[2] || (_cache[2] = withModifiers(function($event) {
+            return _ctx.throttledArrowClick(_ctx.state.activeIndex - 1);
+          }, ["stop"]))
         },
-        "click": function click($event) {
-          $event.stopPropagation();
-          return _vm.handleIndicatorClick(index);
-        }
-      }
-    }, [_c("button", {
-      class: _vm.m(["block border-none outline-0 p-0 m-0 cursor-pointer rounded-sm", _vm.indicatorPosition === "outside" || _vm.indicatorStyle === "light" ? "bg-color-bg-3 hover:bg-color-brand" : "bg-color-bg-6 hover:bg-color-bg-5", _vm.state.hasLabel ? "py-0.5 px-4.5 text-xs" : "", _vm.type === "vertical" ? "h-1 w-1" : "w-1 h-1", index === _vm.state.activeIndex ? _vm.type === "vertical" ? "h-4 w-1" : "w-4 h-1" : "", index === _vm.state.activeIndex ? _vm.indicatorPosition === "outside" || _vm.indicatorStyle === "light" ? "bg-color-brand" : "bg-color-bg-1" : ""]),
-      attrs: {
-        "type": "button"
-      }
-    }, [_vm.state.hasLabel ? _c("span", {
-      attrs: {
-        "data-tag": "tiny-carousel-label"
-      }
-    }, [_vm._v(_vm._s(item.label))]) : _vm._e()])]);
-  }), 0) : _vm._e()]);
-};
-var staticRenderFns = [];
-var __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles);
-function __vue2_injectStyles(context) {
-  for (var o in __cssModules) {
-    this[o] = __cssModules[o];
-  }
+        [(openBlock(), createBlock(resolveDynamicComponent(_ctx.type === "vertical" ? "icon-chevron-up" : "icon-chevron-left"), {
+          class: "w-4.5 h-4.5 opacity-50 fill-color-icon-primary group-active:fill-color-bg-2 group-hover:fill-color-bg-1"
+        }))],
+        34
+        /* CLASS, NEED_HYDRATION */
+      )), [[vShow, (_ctx.arrow === "always" || _ctx.state.hover) && (_ctx.loop || _ctx.state.activeIndex > 0)]]) : createCommentVNode("v-if", true), _ctx.state.hasButtons ? withDirectives((openBlock(), createElementBlock(
+        "button",
+        {
+          key: 1,
+          type: "button",
+          class: normalizeClass(["absolute group border-none outline-0 p-0 m-0 h-8 w-8 cursor-pointer z-[3] rounded-full bg-color-bg-3 active:bg-color-bg-7 text-color-text-inverse text-center text-xs flex items-center justify-center hover:bg-color-bg-7", [_ctx.type === "vertical" ? "top-auto left-1/2 bottom-4" : "right-4 top-1/2 -translate-y-4"]]),
+          onMouseenter: _cache[3] || (_cache[3] = function($event) {
+            return _ctx.handleButtonEnter("right");
+          }),
+          onMouseleave: _cache[4] || (_cache[4] = function() {
+            return _ctx.handleButtonLeave && _ctx.handleButtonLeave.apply(_ctx, arguments);
+          }),
+          onClick: _cache[5] || (_cache[5] = withModifiers(function($event) {
+            return _ctx.throttledArrowClick(_ctx.state.activeIndex + 1);
+          }, ["stop"]))
+        },
+        [(openBlock(), createBlock(resolveDynamicComponent(_ctx.type === "vertical" ? "icon-chevron-down" : "icon-chevron-right"), {
+          class: "w-4.5 h-4.5 opacity-50 fill-color-icon-primary group-active:fill-color-bg-2 group-hover:fill-color-bg-1"
+        }))],
+        34
+        /* CLASS, NEED_HYDRATION */
+      )), [[vShow, (_ctx.arrow === "always" || _ctx.state.hover) && (_ctx.loop || _ctx.state.activeIndex < _ctx.state.items.length - 1)]]) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")],
+      36
+      /* STYLE, NEED_HYDRATION */
+    ), _ctx.state.hasIndicators ? (openBlock(), createElementBlock(
+      "ul",
+      {
+        key: 0,
+        "data-tag": "tiny-carousel-body",
+        class: normalizeClass(["list-none m-0 py-0 px-1 z-[2] flex justify-center items-center", _ctx.type === "vertical" && _ctx.indicatorPosition !== "outside" ? "flex-col left-4 bottom-0 transform-none w-1 h-full py-1 px-0" : "w-full h-1 left-0 bottom-4", _ctx.indicatorPosition === "outside" ? "static mt-2" : "absolute", _ctx.state.hasLabel ? "left-0 right-0 text-center transform-none" : "", _ctx.showTitle ? "left-auto right-3 bottom-1 transform-none bg-transparent" : ""])
+      },
+      [(openBlock(true), createElementBlock(
+        Fragment,
+        null,
+        renderList(_ctx.state.items, function(item, index) {
+          return openBlock(), createElementBlock("li", {
+            "data-tag": "tiny-carousel-list",
+            key: index,
+            class: normalizeClass(["group cursor-pointer", _ctx.type === "vertical" ? "block h-auto mb-1.5 mx-0 p-0 first:pl-0 last:pr-0" : "inline-block h-1 p-0 my-0 mr-1.5", _ctx.state.hasLabel ? "py-1.5 px-1" : ""]),
+            onMouseenter: function onMouseenter($event) {
+              return _ctx.throttledIndicatorHover(index);
+            },
+            onClick: withModifiers(function($event) {
+              return _ctx.handleIndicatorClick(index);
+            }, ["stop"])
+          }, [createElementVNode(
+            "button",
+            {
+              type: "button",
+              class: normalizeClass(_ctx.m(["block border-none outline-0 p-0 m-0 cursor-pointer rounded-sm", _ctx.indicatorPosition === "outside" || _ctx.indicatorStyle === "light" ? "bg-color-bg-3 hover:bg-color-brand" : "bg-color-bg-6 hover:bg-color-bg-5", _ctx.state.hasLabel ? "py-0.5 px-4.5 text-xs" : "", _ctx.type === "vertical" ? "h-1 w-1" : "w-1 h-1", index === _ctx.state.activeIndex ? _ctx.type === "vertical" ? "h-4 w-1" : "w-4 h-1" : "", index === _ctx.state.activeIndex ? _ctx.indicatorPosition === "outside" || _ctx.indicatorStyle === "light" ? "bg-color-brand" : "bg-color-bg-1" : ""]))
+            },
+            [_ctx.state.hasLabel ? (openBlock(), createElementBlock(
+              "span",
+              _hoisted_2,
+              toDisplayString(item.label),
+              1
+              /* TEXT */
+            )) : createCommentVNode("v-if", true)],
+            2
+            /* CLASS */
+          )], 42, _hoisted_1);
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      ))],
+      2
+      /* CLASS */
+    )) : createCommentVNode("v-if", true)],
+    32
+    /* NEED_HYDRATION */
+  );
 }
-var mobileFirst = /* @__PURE__ */ function() {
-  return __component__.exports;
-}();
+var mobileFirst = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export { mobileFirst as default };

package/lib/pc.js CHANGED Viewed

@@ -2,38 +2,42 @@ import { renderless, api } from '@opentinyvue/vue-renderless/carousel/vue';
 import { defineComponent, props, setup } from '@opentinyvue/vue-common';
 import { iconChevronLeft, iconChevronRight, iconChevronUp, iconChevronDown } from '@opentinyvue/vue-icon';
 import '@opentinyvue/vue-theme/carousel/index.css';
+import { openBlock, createElementBlock, normalizeClass, withModifiers, createElementVNode, normalizeStyle, createVNode, Transition, withCtx, withDirectives, createBlock, resolveDynamicComponent, vShow, createCommentVNode, renderSlot, Fragment, renderList, toDisplayString } from 'vue';
-function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
-  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
-  if (render) {
-    options.render = render;
-    options.staticRenderFns = staticRenderFns;
-    options._compiled = true;
+function _createForOfIteratorHelperLoose(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (t) return (t = t.call(r)).next.bind(t);
+  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
+    t && (r = t);
+    var o = 0;
+    return function() {
+      return o >= r.length ? { done: true } : { done: false, value: r[o++] };
+    };
   }
-  var hook;
-  if (injectStyles) {
-    hook = injectStyles;
-  }
-  if (hook) {
-    if (options.functional) {
-      options._injectStyles = hook;
-      var originalRender = options.render;
-      options.render = function renderWithStyleInjection(h, context) {
-        hook.call(context);
-        return originalRender(h, context);
-      };
-    } else {
-      var existing = options.beforeCreate;
-      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
-    }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
   }
-  return {
-    exports: scriptExports,
-    options
-  };
 }
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+var _export_sfc = function _export_sfc2(sfc, props) {
+  var target = sfc.__vccOpts || sfc;
+  for (var _iterator = _createForOfIteratorHelperLoose(props), _step; !(_step = _iterator()).done; ) {
+    var _step$value = _step.value, key = _step$value[0], val = _step$value[1];
+    target[key] = val;
+  }
+  return target;
+};
-var __vue2_script = defineComponent({
+var _sfc_main = defineComponent({
   emits: ["change", "complete"],
   props: [].concat(props, ["initialIndex", "height", "trigger", "autoplay", "interval", "indicatorPosition", "arrow", "type", "showTitle", "loop", "disabled", "swipeable", "lite", "beforeSwipe"]),
   setup: function setup$1(props2, context) {
@@ -51,130 +55,133 @@ var __vue2_script = defineComponent({
     IconChevronDown: iconChevronDown()
   }
 });
-var render = function render2() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", {
-    staticClass: "tiny-carousel",
-    class: {
-      "tiny-carousel--card": _vm.type === "card"
-    },
-    on: {
-      "mouseenter": function mouseenter($event) {
-        $event.stopPropagation();
-        return _vm.handleMouseEnter.apply(null, arguments);
-      },
-      "mouseleave": function mouseleave($event) {
-        $event.stopPropagation();
-        return _vm.handleMouseLeave.apply(null, arguments);
-      }
-    }
-  }, [_c("div", {
-    staticClass: "tiny-carousel__container",
-    style: {
-      height: _vm.height
-    }
-  }, [_c("transition", {
-    attrs: {
-      "name": _vm.type === "vertical" ? "tiny-transition-carousel-arrow-top" : "tiny-transition-carousel-arrow-left"
-    }
-  }, [_vm.state.hasButtons ? _c("button", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: (_vm.arrow === "always" || _vm.state.hover) && (_vm.loop || _vm.state.activeIndex > 0),
-      expression: "(arrow === 'always' || state.hover) && (loop || state.activeIndex > 0)"
-    }],
-    class: ["tiny-carousel__arrow", _vm.type === "vertical" ? "tiny-carousel__arrow-top" : "tiny-carousel__arrow-left", _vm.disabled && _vm.state.activeIndex === 0 ? "tiny-carousel__arrow-disabled" : ""],
-    attrs: {
-      "type": "button",
-      "disabled": _vm.loop && _vm.disabled && _vm.state.activeIndex === 0
-    },
-    on: {
-      "mouseenter": function mouseenter($event) {
-        return _vm.handleButtonEnter("left");
-      },
-      "mouseleave": _vm.handleButtonLeave,
-      "click": function click($event) {
-        $event.stopPropagation();
-        return _vm.throttledArrowClick(_vm.state.activeIndex - 1);
-      }
-    }
-  }, [_c(_vm.type === "vertical" ? "icon-chevron-up" : "icon-chevron-left", {
-    tag: "component",
-    staticClass: "tiny-svg-size"
-  })], 1) : _vm._e()]), _c("transition", {
-    attrs: {
-      "name": _vm.type === "vertical" ? "tiny-transition-carousel-arrow-bottom" : "tiny-transition-carousel-arrow-right"
-    }
-  }, [_vm.state.hasButtons ? _c("button", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: (_vm.arrow === "always" || _vm.state.hover) && (_vm.loop || _vm.state.activeIndex < _vm.state.items.length - 1),
-      expression: "(arrow === 'always' || state.hover) && (loop || state.activeIndex < state.items.length - 1)"
-    }],
-    class: ["tiny-carousel__arrow", _vm.type === "vertical" ? "tiny-carousel__arrow-bottom" : "tiny-carousel__arrow-right", _vm.disabled && _vm.state.activeIndex === _vm.state.items.length - 1 ? "tiny-carousel__arrow-disabled" : ""],
-    attrs: {
-      "type": "button",
-      "disabled": _vm.loop && _vm.disabled && _vm.state.activeIndex === _vm.state.items.length - 1
+var _hoisted_1 = ["disabled"];
+var _hoisted_2 = ["disabled"];
+var _hoisted_3 = ["onMouseenter", "onClick"];
+var _hoisted_4 = {
+  type: "button",
+  class: "tiny-carousel__button"
+};
+var _hoisted_5 = {
+  key: 0
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock(
+    "div",
+    {
+      class: normalizeClass([{
+        "tiny-carousel--card": _ctx.type === "card"
+      }, "tiny-carousel"]),
+      onMouseenter: _cache[6] || (_cache[6] = withModifiers(function() {
+        return _ctx.handleMouseEnter && _ctx.handleMouseEnter.apply(_ctx, arguments);
+      }, ["stop"])),
+      onMouseleave: _cache[7] || (_cache[7] = withModifiers(function() {
+        return _ctx.handleMouseLeave && _ctx.handleMouseLeave.apply(_ctx, arguments);
+      }, ["stop"]))
     },
-    on: {
-      "mouseenter": function mouseenter($event) {
-        return _vm.handleButtonEnter("right");
+    [createElementVNode(
+      "div",
+      {
+        style: normalizeStyle({
+          height: _ctx.height
+        }),
+        class: "tiny-carousel__container"
       },
-      "mouseleave": _vm.handleButtonLeave,
-      "click": function click($event) {
-        $event.stopPropagation();
-        return _vm.throttledArrowClick(_vm.state.activeIndex + 1);
-      }
-    }
-  }, [_c(_vm.type === "vertical" ? "icon-chevron-down" : "icon-chevron-right", {
-    tag: "component",
-    staticClass: "tiny-svg-size"
-  })], 1) : _vm._e()]), _vm._t("default")], 2), _vm.state.hasIndicators ? _c("ul", {
-    staticClass: "tiny-carousel__indicators",
-    class: {
-      "tiny-carousel__indicators-labels": _vm.state.hasLabel,
-      "tiny-carousel__indicators-title": _vm.showTitle,
-      "tiny-carousel__indicators-vertical": _vm.type === "vertical",
-      "tiny-carousel__indicators-outside": _vm.indicatorPosition === "outside" || _vm.type === "card"
-    }
-  }, _vm._l(_vm.state.items, function(item, index) {
-    return _c("li", {
-      key: index,
-      staticClass: "tiny-carousel__indicator",
-      class: {
-        "is-active": index === _vm.state.activeIndex
+      [createVNode(Transition, {
+        name: _ctx.type === "vertical" ? "tiny-transition-carousel-arrow-top" : "tiny-transition-carousel-arrow-left"
+      }, {
+        default: withCtx(function() {
+          return [_ctx.state.hasButtons ? withDirectives((openBlock(), createElementBlock("button", {
+            key: 0,
+            type: "button",
+            class: normalizeClass(["tiny-carousel__arrow", _ctx.type === "vertical" ? "tiny-carousel__arrow-top" : "tiny-carousel__arrow-left", _ctx.disabled && _ctx.state.activeIndex === 0 ? "tiny-carousel__arrow-disabled" : ""]),
+            disabled: _ctx.loop && _ctx.disabled && _ctx.state.activeIndex === 0,
+            onMouseenter: _cache[0] || (_cache[0] = function($event) {
+              return _ctx.handleButtonEnter("left");
+            }),
+            onMouseleave: _cache[1] || (_cache[1] = function() {
+              return _ctx.handleButtonLeave && _ctx.handleButtonLeave.apply(_ctx, arguments);
+            }),
+            onClick: _cache[2] || (_cache[2] = withModifiers(function($event) {
+              return _ctx.throttledArrowClick(_ctx.state.activeIndex - 1);
+            }, ["stop"]))
+          }, [(openBlock(), createBlock(resolveDynamicComponent(_ctx.type === "vertical" ? "icon-chevron-up" : "icon-chevron-left"), {
+            class: "tiny-svg-size"
+          }))], 42, _hoisted_1)), [[vShow, (_ctx.arrow === "always" || _ctx.state.hover) && (_ctx.loop || _ctx.state.activeIndex > 0)]]) : createCommentVNode("v-if", true)];
+        }),
+        _: 1
+        /* STABLE */
+      }, 8, ["name"]), createVNode(Transition, {
+        name: _ctx.type === "vertical" ? "tiny-transition-carousel-arrow-bottom" : "tiny-transition-carousel-arrow-right"
+      }, {
+        default: withCtx(function() {
+          return [_ctx.state.hasButtons ? withDirectives((openBlock(), createElementBlock("button", {
+            key: 0,
+            type: "button",
+            class: normalizeClass(["tiny-carousel__arrow", _ctx.type === "vertical" ? "tiny-carousel__arrow-bottom" : "tiny-carousel__arrow-right", _ctx.disabled && _ctx.state.activeIndex === _ctx.state.items.length - 1 ? "tiny-carousel__arrow-disabled" : ""]),
+            disabled: _ctx.loop && _ctx.disabled && _ctx.state.activeIndex === _ctx.state.items.length - 1,
+            onMouseenter: _cache[3] || (_cache[3] = function($event) {
+              return _ctx.handleButtonEnter("right");
+            }),
+            onMouseleave: _cache[4] || (_cache[4] = function() {
+              return _ctx.handleButtonLeave && _ctx.handleButtonLeave.apply(_ctx, arguments);
+            }),
+            onClick: _cache[5] || (_cache[5] = withModifiers(function($event) {
+              return _ctx.throttledArrowClick(_ctx.state.activeIndex + 1);
+            }, ["stop"]))
+          }, [(openBlock(), createBlock(resolveDynamicComponent(_ctx.type === "vertical" ? "icon-chevron-down" : "icon-chevron-right"), {
+            class: "tiny-svg-size"
+          }))], 42, _hoisted_2)), [[vShow, (_ctx.arrow === "always" || _ctx.state.hover) && (_ctx.loop || _ctx.state.activeIndex < _ctx.state.items.length - 1)]]) : createCommentVNode("v-if", true)];
+        }),
+        _: 1
+        /* STABLE */
+      }, 8, ["name"]), renderSlot(_ctx.$slots, "default")],
+      4
+      /* STYLE */
+    ), _ctx.state.hasIndicators ? (openBlock(), createElementBlock(
+      "ul",
+      {
+        key: 0,
+        class: normalizeClass([{
+          "tiny-carousel__indicators-labels": _ctx.state.hasLabel,
+          "tiny-carousel__indicators-title": _ctx.showTitle,
+          "tiny-carousel__indicators-vertical": _ctx.type === "vertical",
+          "tiny-carousel__indicators-outside": _ctx.indicatorPosition === "outside" || _ctx.type === "card"
+        }, "tiny-carousel__indicators"])
       },
-      on: {
-        "mouseenter": function mouseenter($event) {
-          return _vm.throttledIndicatorHover(index);
-        },
-        "click": function click($event) {
-          $event.stopPropagation();
-          return _vm.handleIndicatorClick(index);
-        }
-      }
-    }, [_c("button", {
-      staticClass: "tiny-carousel__button",
-      attrs: {
-        "type": "button"
-      }
-    }, [_vm.state.hasLabel ? _c("span", [_vm._v(_vm._s(item.label))]) : _vm._e()])]);
-  }), 0) : _vm._e()]);
-};
-var staticRenderFns = [];
-var __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles);
-function __vue2_injectStyles(context) {
-  for (var o in __cssModules) {
-    this[o] = __cssModules[o];
-  }
+      [(openBlock(true), createElementBlock(
+        Fragment,
+        null,
+        renderList(_ctx.state.items, function(item, index) {
+          return openBlock(), createElementBlock("li", {
+            key: index,
+            class: normalizeClass([{
+              "is-active": index === _ctx.state.activeIndex
+            }, "tiny-carousel__indicator"]),
+            onMouseenter: function onMouseenter($event) {
+              return _ctx.throttledIndicatorHover(index);
+            },
+            onClick: withModifiers(function($event) {
+              return _ctx.handleIndicatorClick(index);
+            }, ["stop"])
+          }, [createElementVNode("button", _hoisted_4, [_ctx.state.hasLabel ? (openBlock(), createElementBlock(
+            "span",
+            _hoisted_5,
+            toDisplayString(item.label),
+            1
+            /* TEXT */
+          )) : createCommentVNode("v-if", true)])], 42, _hoisted_3);
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      ))],
+      2
+      /* CLASS */
+    )) : createCommentVNode("v-if", true)],
+    34
+    /* CLASS, NEED_HYDRATION */
+  );
 }
-var pc = /* @__PURE__ */ function() {
-  return __component__.exports;
-}();
+var pc = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export { pc as default };

package/package.json CHANGED Viewed

@@ -1,14 +1,14 @@
 {
   "name": "@opentinyvue/vue-carousel",
-  "version": "2.21.0",
+  "version": "3.21.0",
   "description": "",
   "main": "./lib/index.js",
   "module": "./lib/index.js",
   "sideEffects": false,
   "type": "module",
   "dependencies": {
-    "@opentinyvue/vue-common": "~2.21.0",
-    "@opentinyvue/vue-icon": "~2.21.0",
+    "@opentinyvue/vue-common": "~3.21.0",
+    "@opentinyvue/vue-icon": "~3.21.0",
     "@opentinyvue/vue-renderless": "~3.21.0",
     "@opentinyvue/vue-theme": "~3.21.0"
   },

package/src/index.d.ts CHANGED Viewed

@@ -1,2 +1,148 @@
-declare const _default: any;
+declare const _default: import("@vue/runtime-core").DefineComponent<{
+    _constants: {
+        type: ObjectConstructor;
+        default: () => {
+            CHILD_NAME: string;
+        };
+    };
+    initialIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: StringConstructor;
+    trigger: {
+        type: StringConstructor;
+        default: string;
+    };
+    autoplay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    interval: {
+        type: NumberConstructor;
+        default: number;
+    };
+    loop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indicatorPosition: StringConstructor;
+    arrow: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    showTitle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    aspectRatio: {
+        type: StringConstructor;
+        default: string;
+    };
+    indicatorStyle: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    swipeable: BooleanConstructor;
+    lite: BooleanConstructor;
+    beforeSwipe: FunctionConstructor;
+    tiny_mode: StringConstructor;
+    tiny_mode_root: BooleanConstructor;
+    tiny_template: (ObjectConstructor | FunctionConstructor)[];
+    tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
+    tiny_chart_theme: ObjectConstructor;
+}, () => import("@vue/runtime-core").VNode<import("@vue/runtime-core").RendererNode, import("@vue/runtime-core").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+    _constants: {
+        type: ObjectConstructor;
+        default: () => {
+            CHILD_NAME: string;
+        };
+    };
+    initialIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: StringConstructor;
+    trigger: {
+        type: StringConstructor;
+        default: string;
+    };
+    autoplay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    interval: {
+        type: NumberConstructor;
+        default: number;
+    };
+    loop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    indicatorPosition: StringConstructor;
+    arrow: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    showTitle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    aspectRatio: {
+        type: StringConstructor;
+        default: string;
+    };
+    indicatorStyle: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    swipeable: BooleanConstructor;
+    lite: BooleanConstructor;
+    beforeSwipe: FunctionConstructor;
+    tiny_mode: StringConstructor;
+    tiny_mode_root: BooleanConstructor;
+    tiny_template: (ObjectConstructor | FunctionConstructor)[];
+    tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
+    tiny_chart_theme: ObjectConstructor;
+}>>, {
+    disabled: boolean;
+    type: string;
+    tiny_mode_root: boolean;
+    _constants: Record<string, any>;
+    trigger: string;
+    showTitle: boolean;
+    arrow: string;
+    aspectRatio: string;
+    swipeable: boolean;
+    initialIndex: number;
+    autoplay: boolean;
+    interval: number;
+    indicatorStyle: string;
+    loop: boolean;
+    lite: boolean;
+}, {}>;
 export default _default;

package/src/mobile-first.vue.d.ts CHANGED Viewed

@@ -1,2 +1,83 @@
-declare const _default: any;
+declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
+    type?: any;
+    tiny_mode?: any;
+    tiny_mode_root?: any;
+    tiny_template?: any;
+    tiny_renderless?: any;
+    _constants?: any;
+    tiny_theme?: any;
+    tiny_chart_theme?: any;
+    height?: any;
+    trigger?: any;
+    showTitle?: any;
+    arrow?: any;
+    aspectRatio?: any;
+    swipeable?: any;
+    initialIndex?: any;
+    autoplay?: any;
+    interval?: any;
+    indicatorPosition?: any;
+    indicatorStyle?: any;
+    loop?: any;
+    lite?: any;
+    beforeSwipe?: any;
+}>, {
+    t: (this: any, path: any, options?: any) => any;
+    vm: any;
+    f: (props: any, attrs?: {}) => {};
+    a: (attrs: any, filters: any, include: any) => {};
+    d: (props: any) => void;
+    dp: (props: any) => void;
+    gcls: (key: any) => any;
+    m: (...cssClasses: any[]) => string;
+}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("change" | "complete")[], "change" | "complete", import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<{
+    type?: any;
+    tiny_mode?: any;
+    tiny_mode_root?: any;
+    tiny_template?: any;
+    tiny_renderless?: any;
+    _constants?: any;
+    tiny_theme?: any;
+    tiny_chart_theme?: any;
+    height?: any;
+    trigger?: any;
+    showTitle?: any;
+    arrow?: any;
+    aspectRatio?: any;
+    swipeable?: any;
+    initialIndex?: any;
+    autoplay?: any;
+    interval?: any;
+    indicatorPosition?: any;
+    indicatorStyle?: any;
+    loop?: any;
+    lite?: any;
+    beforeSwipe?: any;
+}>>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onComplete?: ((...args: any[]) => any) | undefined;
+}, {
+    readonly type?: any;
+    readonly tiny_mode?: any;
+    readonly tiny_mode_root?: any;
+    readonly tiny_template?: any;
+    readonly tiny_renderless?: any;
+    readonly _constants?: any;
+    readonly tiny_theme?: any;
+    readonly tiny_chart_theme?: any;
+    readonly height?: any;
+    readonly trigger?: any;
+    readonly showTitle?: any;
+    readonly arrow?: any;
+    readonly aspectRatio?: any;
+    readonly swipeable?: any;
+    readonly initialIndex?: any;
+    readonly autoplay?: any;
+    readonly interval?: any;
+    readonly indicatorPosition?: any;
+    readonly indicatorStyle?: any;
+    readonly loop?: any;
+    readonly lite?: any;
+    readonly beforeSwipe?: any;
+}, {}>;
 export default _default;

package/src/pc.vue.d.ts CHANGED Viewed

@@ -1,2 +1,80 @@
-declare const _default: any;
+declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
+    disabled?: any;
+    type?: any;
+    tiny_mode?: any;
+    tiny_mode_root?: any;
+    tiny_template?: any;
+    tiny_renderless?: any;
+    _constants?: any;
+    tiny_theme?: any;
+    tiny_chart_theme?: any;
+    height?: any;
+    trigger?: any;
+    showTitle?: any;
+    arrow?: any;
+    swipeable?: any;
+    initialIndex?: any;
+    autoplay?: any;
+    interval?: any;
+    indicatorPosition?: any;
+    loop?: any;
+    lite?: any;
+    beforeSwipe?: any;
+}>, {
+    t: (this: any, path: any, options?: any) => any;
+    vm: any;
+    f: (props: any, attrs?: {}) => {};
+    a: (attrs: any, filters: any, include: any) => {};
+    d: (props: any) => void;
+    dp: (props: any) => void;
+    gcls: (key: any) => any;
+    m: (...cssClasses: any[]) => string;
+}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("change" | "complete")[], "change" | "complete", import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<{
+    disabled?: any;
+    type?: any;
+    tiny_mode?: any;
+    tiny_mode_root?: any;
+    tiny_template?: any;
+    tiny_renderless?: any;
+    _constants?: any;
+    tiny_theme?: any;
+    tiny_chart_theme?: any;
+    height?: any;
+    trigger?: any;
+    showTitle?: any;
+    arrow?: any;
+    swipeable?: any;
+    initialIndex?: any;
+    autoplay?: any;
+    interval?: any;
+    indicatorPosition?: any;
+    loop?: any;
+    lite?: any;
+    beforeSwipe?: any;
+}>>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onComplete?: ((...args: any[]) => any) | undefined;
+}, {
+    readonly disabled?: any;
+    readonly type?: any;
+    readonly tiny_mode?: any;
+    readonly tiny_mode_root?: any;
+    readonly tiny_template?: any;
+    readonly tiny_renderless?: any;
+    readonly _constants?: any;
+    readonly tiny_theme?: any;
+    readonly tiny_chart_theme?: any;
+    readonly height?: any;
+    readonly trigger?: any;
+    readonly showTitle?: any;
+    readonly arrow?: any;
+    readonly swipeable?: any;
+    readonly initialIndex?: any;
+    readonly autoplay?: any;
+    readonly interval?: any;
+    readonly indicatorPosition?: any;
+    readonly loop?: any;
+    readonly lite?: any;
+    readonly beforeSwipe?: any;
+}, {}>;
 export default _default;