yc-design-vue 1.7.6 → 1.7.7

package/es/Card/CardMeta.vue.js

@@ -1,7 +1,70 @@
-import _sfc_main from "./CardMeta.vue2.js";
-/* empty css              */
-import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const CardMeta = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3afd68ef"]]);
+import { defineComponent, createElementBlock, openBlock, createElementVNode, createCommentVNode, renderSlot, createTextVNode, toDisplayString, unref, createBlock, resolveDynamicComponent } from "vue";
+import "../node_modules/tinycolor2/esm/tinycolor.js";
+import "../_shared/utils/dom.js";
+import "../_shared/utils/time.js";
+import { getSlotFunction } from "../_shared/utils/vue-utils.js";
+import "../Empty/index.js";
+/* empty css                             */
+import useContext from "./hooks/useContext.js";
+const _hoisted_1 = { class: "yc-card-meta" };
+const _hoisted_2 = { class: "yc-card-meta-content" };
+const _hoisted_3 = {
+  key: 0,
+  class: "yc-card-meta-title text-ellipsis"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "yc-card-meta-description"
+};
+const _hoisted_5 = { class: "yc-card-meta-footer" };
+const _hoisted_6 = {
+  key: 0,
+  class: "yc-card-meta-avatar"
+};
+const _hoisted_7 = {
+  key: 1,
+  class: "yc-card-actions"
+};
+const _hoisted_8 = { class: "yc-card-actions-right text-ellipsis" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "CardMeta"
+  },
+  __name: "CardMeta",
+  props: {
+    title: { default: "" },
+    description: { default: "" }
+  },
+  setup(__props) {
+    const { slots } = useContext().inject();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          _ctx.$slots.title || _ctx.title ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            renderSlot(_ctx.$slots, "title", {}, () => [
+              createTextVNode(toDisplayString(_ctx.title), 1)
+            ])
+          ])) : createCommentVNode("", true),
+          _ctx.$slots.description || _ctx.description ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            renderSlot(_ctx.$slots, "description", {}, () => [
+              createTextVNode(toDisplayString(_ctx.description), 1)
+            ])
+          ])) : createCommentVNode("", true)
+        ]),
+        createElementVNode("div", _hoisted_5, [
+          _ctx.$slots.avatar ? (openBlock(), createElementBlock("div", _hoisted_6, [
+            renderSlot(_ctx.$slots, "avatar")
+          ])) : createCommentVNode("", true),
+          unref(slots).actions ? (openBlock(), createElementBlock("div", _hoisted_7, [
+            createElementVNode("div", _hoisted_8, [
+              (openBlock(), createBlock(resolveDynamicComponent(unref(getSlotFunction)(unref(slots).actions))))
+            ])
+          ])) : createCommentVNode("", true)
+        ])
+      ]);
+    };
+  }
+});
 export {
-  CardMeta as default
+  _sfc_main as default
 };

package/es/Card/CardMeta.vue3.js

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

package/es/Card/index.css

@@ -1 +1 @@
-.yc-card{position:relative;background:var(--color-bg-2);transition:box-shadow .2s cubic-bezier(0, 0, 1, 1),-webkit-box-shadow .2s cubic-bezier(0, 0, 1, 1);font-size:14px;display:flex;flex-direction:column}.yc-card .yc-card-header{overflow:hidden;border-bottom:1px solid var(--color-neutral-3);display:flex;justify-content:space-between;align-items:center}.yc-card .yc-card-header .yc-card-header-title{flex:1;font-size:16px;color:var(--color-text-1);font-weight:500;line-height:1.5715}.yc-card .yc-card-header .yc-card-header-extra{color:rgb(var(--primary-6))}.yc-card .yc-card-body{color:var(--color-text-2)}.yc-card .yc-card-body .yc-card-cover{overflow:hidden}.yc-card .yc-card-body .yc-card-actions{margin-top:20px;display:flex;align-items:center;justify-content:flex-end}.yc-card .yc-card-body .yc-card-actions .yc-card-actions-right{cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text-2);transition:color .2s cubic-bezier(0, 0, 1, 1)}.yc-card-bordered{border:1px solid var(--color-neutral-3);border-radius:2px}.yc-card-bordered .yc-card-body .yc-card-cover{border-radius:2px 2px 0 0}.yc-card-hoverable:hover{box-shadow:0 4px 10px rgb(var(--gray-2))}.yc-card-loading .yc-card-body .yc-spin{width:100%}.yc-card.yc-card-contain-grid>.yc-card-body{margin:0 -1px;padding:0;display:flex;flex-wrap:wrap}.yc-card-size-mini .yc-card-header{height:40px;padding:10px 16px}.yc-card-size-mini .yc-card-body{padding:16px 16px}.yc-card-size-small .yc-card-header{height:40px;padding:8px 16px}.yc-card-size-small .yc-card-body{padding:12px 16px}.yc-card-size-medium .yc-card-header{height:46px;padding:10px 16px}.yc-card-size-medium .yc-card-body{padding:16px 16px}.yc-card-size-large .yc-card-header{height:40px;padding:10px 16px}.yc-card-size-large .yc-card-body{padding:16px 16px}.yc-card-meta{display:flex;flex-direction:column;gap:20px}.yc-card-meta .yc-card-meta-content{display:flex;flex-direction:column;gap:4px}.yc-card-meta .yc-card-meta-content .yc-card-meta-title{font-size:16px;color:var(--color-text-1);font-weight:500;line-height:24px}.yc-card-meta .yc-card-meta-content .yc-card-meta-description{font-size:14px;color:var(--color-text-2);font-weight:500;line-height:21px}.yc-card-meta .yc-card-meta-footer{display:flex;justify-content:space-between}.yc-card-meta .yc-card-meta-footer .yc-card-actions{display:flex;align-items:center;justify-content:flex-end}.yc-card-meta .yc-card-meta-footer .yc-card-actions .yc-card-actions-right{cursor:pointer;color:var(--color-text-2);transition:color .2s cubic-bezier(0, 0, 1, 1);display:flex;align-items:center;justify-content:center;gap:12px}.yc-card-grid{position:relative;width:33.33%;box-shadow:1px 0 0 0 var(--color-neutral-3),0 1px 0 0 var(--color-neutral-3),1px 1px 0 0 var(--color-neutral-3),1px 0 0 0 var(--color-neutral-3) inset,0 1px 0 0 var(--color-neutral-3) inset}.yc-card-grid::before{content:'';pointer-events:none;position:absolute;height:100%;width:100%;transition:box-shadow .2s cubic-bezier(0, 0, 1, 1)}.yc-card-grid:deep(.yc-card){background:none;box-shadow:none}.yc-card-grid-hoverable:hover{z-index:1}.yc-card-grid-hoverable:hover::before{box-shadow:0 4px 10px rgb(var(--gray-2))}.yc-card-grid-hoverable:hover::before body[yc-design-theme='dark']{box-shadow:0 4px 10px rgba(var(--gray-1), 40%)}
+.yc-card{position:relative;background:var(--color-bg-2);transition:box-shadow .2s cubic-bezier(0, 0, 1, 1),-webkit-box-shadow .2s cubic-bezier(0, 0, 1, 1);font-size:14px;display:flex;flex-direction:column}.yc-card .yc-card-header{overflow:hidden;border-bottom:1px solid var(--color-neutral-3);display:flex;justify-content:space-between;align-items:center}.yc-card .yc-card-header .yc-card-header-title{flex:1;font-size:16px;color:var(--color-text-1);font-weight:500;line-height:1.5715}.yc-card .yc-card-header .yc-card-header-extra{color:rgb(var(--primary-6))}.yc-card .yc-card-body{color:var(--color-text-2)}.yc-card .yc-card-body .yc-card-cover{overflow:hidden}.yc-card .yc-card-body .yc-card-actions{margin-top:20px;display:flex;align-items:center;justify-content:flex-end}.yc-card .yc-card-body .yc-card-actions .yc-card-actions-right{cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text-2);transition:color .2s cubic-bezier(0, 0, 1, 1)}.yc-card-bordered{border:1px solid var(--color-neutral-3);border-radius:2px}.yc-card-bordered .yc-card-body .yc-card-cover{border-radius:2px 2px 0 0}.yc-card-hoverable:hover{box-shadow:0 4px 10px rgb(var(--gray-2))}.yc-card-loading .yc-card-body .yc-spin{width:100%}.yc-card.yc-card-contain-grid>.yc-card-body{margin:0 -1px;padding:0;display:flex;flex-wrap:wrap}.yc-card-size-mini .yc-card-header{height:40px;padding:10px 16px}.yc-card-size-mini .yc-card-body{padding:16px 16px}.yc-card-size-small .yc-card-header{height:40px;padding:8px 16px}.yc-card-size-small .yc-card-body{padding:12px 16px}.yc-card-size-medium .yc-card-header{height:46px;padding:10px 16px}.yc-card-size-medium .yc-card-body{padding:16px 16px}.yc-card-size-large .yc-card-header{height:40px;padding:10px 16px}.yc-card-size-large .yc-card-body{padding:16px 16px}.yc-card-meta{display:flex;flex-direction:column;gap:20px}.yc-card-meta .yc-card-meta-content{display:flex;flex-direction:column;gap:4px}.yc-card-meta .yc-card-meta-content .yc-card-meta-title{font-size:16px;color:var(--color-text-1);font-weight:500;line-height:24px}.yc-card-meta .yc-card-meta-content .yc-card-meta-description{font-size:14px;color:var(--color-text-2);font-weight:500;line-height:21px}.yc-card-meta .yc-card-meta-footer{display:flex;justify-content:space-between}.yc-card-meta .yc-card-meta-footer .yc-card-actions{display:flex;align-items:center;justify-content:flex-end}.yc-card-meta .yc-card-meta-footer .yc-card-actions .yc-card-actions-right{cursor:pointer;color:var(--color-text-2);transition:color .2s cubic-bezier(0, 0, 1, 1);display:flex;align-items:center;justify-content:center;gap:12px}.yc-card-grid{position:relative;width:33.33%;box-shadow:1px 0 0 0 var(--color-neutral-3),0 1px 0 0 var(--color-neutral-3),1px 1px 0 0 var(--color-neutral-3),1px 0 0 0 var(--color-neutral-3) inset,0 1px 0 0 var(--color-neutral-3) inset}.yc-card-grid::before{content:'';pointer-events:none;position:absolute;height:100%;width:100%;transition:box-shadow .2s cubic-bezier(0, 0, 1, 1)}.yc-card-grid .yc-card{background:none;box-shadow:none}.yc-card-grid-hoverable:hover{z-index:1}.yc-card-grid-hoverable:hover::before{box-shadow:0 4px 10px rgb(var(--gray-2))}.yc-card-grid-hoverable:hover::before body[yc-design-theme='dark']{box-shadow:0 4px 10px rgba(var(--gray-1), 40%)}

package/es/Card/index.js

@@ -1,17 +1,20 @@
-import _Card from "./Card.vue.js";
-import CardMeta from "./CardMeta.vue.js";
-import CardGrid from "./CardGrid.vue.js";
-const Card = Object.assign(_Card, {
-  meta: CardMeta,
-  grid: CardGrid,
+import _sfc_main from "./Card.vue.js";
+/* empty css          */
+import _sfc_main$2 from "./CardMeta.vue.js";
+/* empty css              */
+import _sfc_main$1 from "./CardGrid.vue.js";
+/* empty css              */
+const Card = Object.assign(_sfc_main, {
+  meta: _sfc_main$2,
+  grid: _sfc_main$1,
   install: (app) => {
-    app.component("Yc" + _Card.name, _Card);
-    app.component("Yc" + CardMeta.name, CardMeta);
-    app.component("Yc" + CardGrid.name, CardGrid);
+    app.component("Yc" + _sfc_main.name, _sfc_main);
+    app.component("Yc" + _sfc_main$2.name, _sfc_main$2);
+    app.component("Yc" + _sfc_main$1.name, _sfc_main$1);
   }
 });
 export {
-  CardGrid,
-  CardMeta,
+  _sfc_main$1 as CardGrid,
+  _sfc_main$2 as CardMeta,
   Card as default
 };

package/es/Carousel/Carousel.vue.js

@@ -1,7 +1,133 @@
-import _sfc_main from "./Carousel.vue2.js";
-/* empty css              */
-import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const _Carousel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c790779f"]]);
+import { defineComponent, ref, watch, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, unref, Fragment, renderList, createBlock, resolveDynamicComponent, createVNode } from "vue";
+import "../node_modules/tinycolor2/esm/tinycolor.js";
+import "../_shared/utils/dom.js";
+import { isObject } from "../_shared/utils/is.js";
+import "../_shared/utils/time.js";
+import "../Empty/index.js";
+/* empty css                             */
+import useContext from "./hooks/useContext.js";
+import _sfc_main$2 from "./CarouselArrow.vue.js";
+/* empty css                   */
+import _sfc_main$1 from "./CarouselIndicator.vue.js";
+/* empty css                       */
+const _hoisted_1 = {
+  key: 0,
+  class: "yc-carousel-indicator-wrapper"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "yc-carousel-arrow-wrapper"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "Carousel"
+  },
+  __name: "Carousel",
+  props: {
+    current: { default: void 0 },
+    defaultCurrent: { default: 1 },
+    autoPlay: { type: [Boolean, Object], default: false },
+    moveSpeed: { default: 500 },
+    animationName: { default: "slide" },
+    trigger: { default: "click" },
+    direction: { default: "horizontal" },
+    showArrow: { default: "always" },
+    arrowClass: { default: "" },
+    indicatorType: { default: "dot" },
+    indicatorPosition: { default: "bottom" },
+    indicatorClass: { default: "" },
+    transitionTimingFunction: { default: "cubic-bezier(0.34, 0.69, 0.1, 1)" }
+  },
+  emits: ["update:current", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { slideTo, computedCurrent, autoPlay, carouselItems } = useContext().provide(props, emits);
+    const autoPlayTimer = ref(0);
+    const stopAutoPlay = () => {
+      if (!autoPlayTimer.value) return;
+      clearInterval(autoPlayTimer.value);
+      autoPlayTimer.value = 0;
+    };
+    const setAutoPlay = () => {
+      var _a;
+      if (!autoPlay.value) return;
+      stopAutoPlay();
+      autoPlayTimer.value = window.setInterval(
+        () => {
+          slideTo(computedCurrent.value + 1);
+        },
+        ((_a = autoPlay.value) == null ? void 0 : _a.interval) ?? 3e3
+      );
+    };
+    const handleChange = async (index) => {
+      stopAutoPlay();
+      await slideTo(index);
+      setAutoPlay();
+    };
+    watch(
+      () => autoPlay.value,
+      () => {
+        stopAutoPlay();
+        setAutoPlay();
+      },
+      {
+        immediate: true
+      }
+    );
+    onBeforeUnmount(() => {
+      stopAutoPlay();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "yc-carousel",
+          `yc-carousel-animation-${_ctx.animationName}`,
+          {
+            "yc-carousel-indicator-outer": _ctx.indicatorPosition == "outer"
+          }
+        ])
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(["yc-carousel-slide", `yc-carousel-direction-${_ctx.direction}`]),
+          onMouseenter: _cache[0] || (_cache[0] = ($event) => {
+            var _a;
+            return unref(isObject)(unref(autoPlay)) && ((_a = unref(autoPlay)) == null ? void 0 : _a.hoverToPause) && stopAutoPlay();
+          }),
+          onMouseleave: _cache[1] || (_cache[1] = ($event) => {
+            var _a;
+            return unref(isObject)(unref(autoPlay)) && ((_a = unref(autoPlay)) == null ? void 0 : _a.hoverToPause) && setAutoPlay();
+          })
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(carouselItems), (node, i) => {
+            return openBlock(), createBlock(resolveDynamicComponent(node), {
+              index: i + 1
+            }, null, 8, ["index"]);
+          }), 256))
+        ], 34),
+        _ctx.indicatorType != "never" ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createVNode(_sfc_main$1, {
+            "indicator-class": _ctx.indicatorClass,
+            trigger: _ctx.trigger,
+            "indicator-position": _ctx.indicatorPosition,
+            "indicator-type": _ctx.indicatorType,
+            onChange: handleChange
+          }, null, 8, ["indicator-class", "trigger", "indicator-position", "indicator-type"])
+        ])) : createCommentVNode("", true),
+        _ctx.showArrow != "never" ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createVNode(_sfc_main$2, {
+            type: "pre",
+            onChange: handleChange
+          }),
+          createVNode(_sfc_main$2, {
+            type: "next",
+            onChange: handleChange
+          })
+        ])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
 export {
-  _Carousel as default
+  _sfc_main as default
 };

package/es/Carousel/Carousel.vue3.js

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

package/es/Carousel/CarouselArrow.vue.js

@@ -1,7 +1,55 @@
-import _sfc_main from "./CarouselArrow.vue2.js";
-/* empty css                   */
-import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const CarouselArrow = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d5943292"]]);
+import { defineComponent, toRefs, computed, createElementBlock, openBlock, normalizeClass, unref, createVNode } from "vue";
+import "../node_modules/tinycolor2/esm/tinycolor.js";
+import "../_shared/utils/dom.js";
+import "../_shared/utils/time.js";
+import "../Empty/index.js";
+/* empty css                             */
+import _sfc_main$1 from "../_shared/icons/IconArrowRight.vue.js";
+import useContext from "./hooks/useContext.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "CarouselArrow",
+  props: {
+    type: {}
+  },
+  emits: ["change"],
+  setup(__props) {
+    const props = __props;
+    const { type } = toRefs(props);
+    const { showArrow, direction, arrowClass, computedCurrent } = useContext().inject();
+    const rotate = computed(() => {
+      if (type.value == "next") {
+        return direction.value == "horizontal" ? 0 : 90;
+      } else {
+        return direction.value == "horizontal" ? 180 : -90;
+      }
+    });
+    const positionClass = computed(() => {
+      if (type.value == "next") {
+        return direction.value == "horizontal" ? "yc-carousel-arrow-right" : "yc-carousel-arrow-bottom";
+      } else {
+        return direction.value == "horizontal" ? "yc-carousel-arrow-left" : "yc-carousel-arrow-top";
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "yc-carousel-arrow",
+          positionClass.value,
+          unref(arrowClass),
+          {
+            "yc-carousel-arrow-show-hover": unref(showArrow) == "hover"
+          }
+        ]),
+        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit(
+          "change",
+          unref(type) == "next" ? unref(computedCurrent) + 1 : unref(computedCurrent) - 1
+        ))
+      }, [
+        createVNode(unref(_sfc_main$1), { rotate: rotate.value }, null, 8, ["rotate"])
+      ], 2);
+    };
+  }
+});
 export {
-  CarouselArrow as default
+  _sfc_main as default
 };

package/es/Carousel/CarouselArrow.vue3.js

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

package/es/Carousel/CarouselIndicator.vue.js

@@ -1,7 +1,57 @@
-import _sfc_main from "./CarouselIndicator.vue2.js";
-/* empty css                       */
-import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const CarouselIndicator = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-da680813"]]);
+import { defineComponent, createElementBlock, openBlock, normalizeClass, createCommentVNode, Fragment, renderList, unref, normalizeStyle } from "vue";
+import "../node_modules/tinycolor2/esm/tinycolor.js";
+import { valueToPx } from "../_shared/utils/dom.js";
+import "../_shared/utils/time.js";
+import "../Empty/index.js";
+/* empty css                             */
+import useContext from "./hooks/useContext.js";
+const _hoisted_1 = ["onMouseenter", "onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "CarouselIndicator",
+  props: {
+    trigger: {},
+    indicatorType: {},
+    indicatorPosition: {},
+    indicatorClass: {}
+  },
+  emits: ["change"],
+  setup(__props) {
+    const { length, computedCurrent } = useContext().inject();
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "yc-carousel-indicator",
+          `yc-carousel-indicator-shape-${_ctx.indicatorType}`,
+          `yc-carousel-indicator-position-${_ctx.indicatorPosition}`,
+          _ctx.indicatorClass
+        ])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(length), (i) => {
+          return openBlock(), createElementBlock("div", {
+            key: i,
+            class: normalizeClass([
+              "yc-carousel-indicator-item",
+              {
+                "yc-carousel-indicator-item-active": unref(computedCurrent) == i
+              }
+            ]),
+            onMouseenter: ($event) => _ctx.trigger == "hover" && unref(computedCurrent) != i && _ctx.$emit("change", i),
+            onClick: ($event) => _ctx.trigger == "click" && unref(computedCurrent) != i && _ctx.$emit("change", i)
+          }, null, 42, _hoisted_1);
+        }), 128)),
+        _ctx.indicatorType == "slider" ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "yc-carousel-indicator-item-slider",
+          style: normalizeStyle({
+            width: ["top", "bottom", "outer"].includes(_ctx.indicatorPosition) ? unref(valueToPx)(48 / unref(length)) : "",
+            height: ["left", "right"].includes(_ctx.indicatorPosition) ? unref(valueToPx)(48 / unref(length)) : "",
+            transform: ["top", "bottom", "outer"].includes(_ctx.indicatorPosition) ? `translateX(calc(${unref(valueToPx)(48 / unref(length) * unref(computedCurrent))} - 100%))` : `translateY(calc(${unref(valueToPx)(48 / unref(length) * unref(computedCurrent))} - 100%))`
+          })
+        }, null, 4)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
 export {
-  CarouselIndicator as default
+  _sfc_main as default
 };

package/es/Carousel/CarouselIndicator.vue3.js

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

package/es/Carousel/CarouselItem.vue.js

@@ -1,7 +1,55 @@
-import _sfc_main from "./CarouselItem.vue2.js";
-/* empty css                  */
-import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const CarouselItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ff083354"]]);
+import { defineComponent, useAttrs, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, renderSlot } from "vue";
+import useContext from "./hooks/useContext.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "CarouselItem"
+  },
+  __name: "CarouselItem",
+  setup(__props) {
+    const {
+      moveType,
+      preIndex,
+      computedCurrent,
+      direction,
+      moveSpeed,
+      animationName,
+      transitionTimingFunction,
+      getValidIndex
+    } = useContext().inject();
+    const attrs = useAttrs();
+    const index = computed(() => attrs.index);
+    const slideClass = computed(() => {
+      if (animationName.value != "slide" || computedCurrent.value == preIndex.value || preIndex.value != index.value && computedCurrent.value != index.value) {
+        return;
+      }
+      const slideDirection = direction.value == "horizontal" ? "-x" : "-y";
+      const slideType = preIndex.value == index.value ? "-out" : "-in";
+      const siideMoveType = moveType.value == "positive" ? "" : "-reverse";
+      return `yc-carousel-slide${slideDirection}${slideType}${siideMoveType}`;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "yc-carousel-item",
+          slideClass.value,
+          {
+            "yc-carousel-item-current": index.value == unref(getValidIndex)(unref(computedCurrent)),
+            "yc-carousel-item-prev": index.value == unref(getValidIndex)(unref(computedCurrent) - 1),
+            "yc-carousel-item-next": index.value == unref(getValidIndex)(unref(computedCurrent) + 1)
+          }
+        ]),
+        style: normalizeStyle({
+          transitionTimingFunction: unref(transitionTimingFunction),
+          animationTimingFunction: unref(transitionTimingFunction),
+          transitionDuration: unref(moveSpeed) + "ms",
+          animationDuration: unref(moveSpeed) + "ms"
+        })
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 6);
+    };
+  }
+});
 export {
-  CarouselItem as default
+  _sfc_main as default
 };

package/es/Carousel/CarouselItem.vue3.js

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

package/es/Carousel/hooks/useContext.js

@@ -6,7 +6,8 @@ import { findComponentsFromVnodes } from "../../_shared/utils/vue-utils.js";
 import "../../Empty/index.js";
 /* empty css                                */
 import useControlValue from "../../_shared/utils/control.js";
-import CarouselItem from "../CarouselItem.vue.js";
+import _sfc_main from "../CarouselItem.vue.js";
+/* empty css                   */
 const CAROUSEL_CONTEXT_KEY = "carousel-context";
 const useContext = () => {
   const provide$1 = (props, emits) => {
@@ -26,7 +27,7 @@ const useContext = () => {
       var _a;
       return findComponentsFromVnodes(
         ((_a = slots.default) == null ? void 0 : _a.call(slots)) || [],
-        CarouselItem.name
+        _sfc_main.name
       );
     });
     const length = computed(() => {

package/es/Carousel/index.js

@@ -1,13 +1,15 @@
-import _Carousel from "./Carousel.vue.js";
-import CarouselItem from "./CarouselItem.vue.js";
-const Carousel = Object.assign(_Carousel, {
-  item: CarouselItem,
+import _sfc_main from "./Carousel.vue.js";
+/* empty css              */
+import _sfc_main$1 from "./CarouselItem.vue.js";
+/* empty css                  */
+const Carousel = Object.assign(_sfc_main, {
+  item: _sfc_main$1,
   install: (app) => {
-    app.component("Yc" + _Carousel.name, _Carousel);
-    app.component("Yc" + CarouselItem.name, CarouselItem);
+    app.component("Yc" + _sfc_main.name, _sfc_main);
+    app.component("Yc" + _sfc_main$1.name, _sfc_main$1);
   }
 });
 export {
-  CarouselItem,
+  _sfc_main$1 as CarouselItem,
   Carousel as default
 };