@geektech/geek-ui - npm Package Compare versions

Comparing version 0.2.4 to 0.3.0

dist/index.js

@@ -1,4 +0,93 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass, renderSlot, ref, createBlock, createCommentVNode, onMounted, watch, toRefs, computed, Teleport, unref, withDirectives, createElementVNode, createVNode, Transition, withCtx, vShow, createTextVNode, toDisplayString, Fragment, renderList, vModelText, normalizeStyle } from "vue";
-const _hoisted_1$3 = ["disabled"];
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, unref, renderSlot, onMounted, ref, createBlock, createCommentVNode, watch, toRefs, Teleport, withDirectives, createElementVNode, createVNode, Transition, withCtx, vShow, createTextVNode, toDisplayString, Fragment, renderList, vModelText, normalizeStyle, reactive, provide, watchEffect, onBeforeUnmount, inject, getCurrentInstance, useSlots } from "vue";
+const colProps = {
+  span: {
+    type: Number,
+    default: 24
+  },
+  offset: {
+    type: Number
+  },
+  xs: {
+    type: [Number, Object]
+  },
+  sm: {
+    type: [Number, Object]
+  },
+  md: {
+    type: [Number, Object]
+  },
+  lg: {
+    type: [Number, Object]
+  },
+  xl: {
+    type: [Number, Object]
+  },
+  xxl: {
+    type: [Number, Object]
+  }
+};
+const opt = Object.prototype.toString;
+function isString(obj) {
+  return opt.call(obj) === "[object String]";
+}
+function isNumber(obj) {
+  return opt.call(obj) === "[object Number]" && obj === obj;
+}
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  __name: "col",
+  props: colProps,
+  setup(__props) {
+    const props = __props;
+    const COMPONENT = "g-col";
+    const classes = computed(() => {
+      const { span, offset, xs, sm, md, lg, xl, xxl } = props;
+      const result = {
+        [`${COMPONENT}-${span}`]: !xs && !sm && !md && !lg && !xl && !xxl,
+        [`${COMPONENT}-offset-${offset}`]: offset && offset > 0
+      };
+      const screenList = { xs, sm, md, lg, xl, xxl };
+      Object.keys(screenList).forEach((screen) => {
+        const screenValue = screenList[screen];
+        if (screenValue && isNumber(screenValue)) {
+          result[`${COMPONENT}-${screen}-${screenValue}`] = true;
+        }
+      });
+      return result;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([COMPONENT, unref(classes)])
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2);
+    };
+  }
+});
+const col_vue_vue_type_style_index_0_lang = "";
+_sfc_main$j.name = "GCol";
+_sfc_main$j.install = function(app) {
+  app.component(_sfc_main$j.name, _sfc_main$j);
+};
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  __name: "row",
+  setup(__props) {
+    const COMPONENT = "g-row";
+    onMounted(() => {
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(COMPONENT)
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ]);
+    };
+  }
+});
+const row_vue_vue_type_style_index_0_lang = "";
+_sfc_main$i.name = "GRow";
+_sfc_main$i.install = function(app) {
+  app.component(_sfc_main$i.name, _sfc_main$i);
+};
+const _hoisted_1$7 = ["disabled"];
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "button",
@@ -17,3 +106,3 @@ props: {
         renderSlot(_ctx.$slots, "default")
-      ], 10, _hoisted_1$3);
+      ], 10, _hoisted_1$7);
     };
@@ -23,11 +112,11 @@ }
 const button_vue_vue_type_style_index_0_lang = "";
-_sfc_main$6.name = "GButton";
-_sfc_main$6.install = function(app) {
-  app.component(_sfc_main$6.name, _sfc_main$6);
+_sfc_main$h.name = "GButton";
+_sfc_main$h.install = function(app) {
+  app.component(_sfc_main$h.name, _sfc_main$h);
 };
-const _hoisted_1$2 = { key: 0 };
-const _hoisted_2$1 = { key: 1 };
-const _hoisted_3$1 = { key: 2 };
+const _hoisted_1$6 = { key: 0 };
+const _hoisted_2$4 = { key: 1 };
+const _hoisted_3$3 = { key: 2 };
 const _hoisted_4$1 = { key: 3 };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "text",
@@ -47,7 +136,7 @@ props: {
       }, [
-        __props.code ? (openBlock(), createElementBlock("code", _hoisted_1$2, [
+        __props.code ? (openBlock(), createElementBlock("code", _hoisted_1$6, [
           renderSlot(_ctx.$slots, "default")
-        ])) : __props.underline ? (openBlock(), createElementBlock("u", _hoisted_2$1, [
+        ])) : __props.underline ? (openBlock(), createElementBlock("u", _hoisted_2$4, [
           renderSlot(_ctx.$slots, "default")
-        ])) : __props.del ? (openBlock(), createElementBlock("del", _hoisted_3$1, [
+        ])) : __props.del ? (openBlock(), createElementBlock("del", _hoisted_3$3, [
           renderSlot(_ctx.$slots, "default")
@@ -62,7 +151,7 @@ ])) : __props.strong ? (openBlock(), createElementBlock("strong", _hoisted_4$1, [
 const text_vue_vue_type_style_index_0_lang = "";
-_sfc_main$5.name = "GText";
-_sfc_main$5.install = function(app) {
-  app.component(_sfc_main$5.name, _sfc_main$5);
+_sfc_main$g.name = "GText";
+_sfc_main$g.install = function(app) {
+  app.component(_sfc_main$g.name, _sfc_main$g);
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "icon",
@@ -82,8 +171,8 @@ props: {
 const icon_vue_vue_type_style_index_0_lang = "";
-_sfc_main$4.name = "GIcon";
-_sfc_main$4.install = function(app) {
-  app.component(_sfc_main$4.name, _sfc_main$4);
+_sfc_main$f.name = "GIcon";
+_sfc_main$f.install = function(app) {
+  app.component(_sfc_main$f.name, _sfc_main$f);
 };
-const _hoisted_1$1 = ["disabled"];
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$5 = ["disabled"];
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "tag",
@@ -110,3 +199,3 @@ props: {
         renderSlot(_ctx.$slots, "default"),
-        __props.closable ? (openBlock(), createBlock(_sfc_main$4, {
+        __props.closable ? (openBlock(), createBlock(_sfc_main$f, {
           key: 0,
@@ -116,3 +205,3 @@ name: "close",
         })) : createCommentVNode("", true)
-      ], 8, _hoisted_1$1)) : createCommentVNode("", true);
+      ], 8, _hoisted_1$5)) : createCommentVNode("", true);
     };
@@ -122,10 +211,6 @@ }
 const tag_vue_vue_type_style_index_0_lang = "";
-_sfc_main$3.name = "GTag";
-_sfc_main$3.install = function(app) {
-  app.component(_sfc_main$3.name, _sfc_main$3);
+_sfc_main$e.name = "GTag";
+_sfc_main$e.install = function(app) {
+  app.component(_sfc_main$e.name, _sfc_main$e);
 };
-const opt = Object.prototype.toString;
-function isString(obj) {
-  return opt.call(obj) === "[object String]";
-}
 const querySelector = (selectors, container) => {
@@ -228,3 +313,3 @@ var _a;
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "modal",
@@ -303,3 +388,3 @@ props: modalProps,
                   }, [
-                    createVNode(unref(_sfc_main$4), { name: "close" })
+                    createVNode(unref(_sfc_main$f), { name: "close" })
                   ], 2)) : createCommentVNode("", true)
@@ -316,3 +401,3 @@ ], 2)) : createCommentVNode("", true),
                   renderSlot(_ctx.$slots, "footer", {}, () => [
-                    !_ctx.hideCancel ? (openBlock(), createBlock(unref(_sfc_main$6), {
+                    !_ctx.hideCancel ? (openBlock(), createBlock(unref(_sfc_main$h), {
                       key: 0,
@@ -326,3 +411,3 @@ onClick: handleCancel
                     })) : createCommentVNode("", true),
-                    createVNode(unref(_sfc_main$6), {
+                    createVNode(unref(_sfc_main$h), {
                       type: "primary",
@@ -352,5 +437,5 @@ onClick: handleOk
 const modal_vue_vue_type_style_index_0_lang = "";
-_sfc_main$2.name = "GModal";
-_sfc_main$2.install = function(app) {
-  app.component(_sfc_main$2.name, _sfc_main$2);
+_sfc_main$d.name = "GModal";
+_sfc_main$d.install = function(app) {
+  app.component(_sfc_main$d.name, _sfc_main$d);
 };
@@ -378,5 +463,5 @@ const paginationProps = {
 };
-const _hoisted_1 = { class: "pages" };
-const _hoisted_2 = ["onClick"];
-const _hoisted_3 = ["onClick"];
+const _hoisted_1$4 = { class: "pages" };
+const _hoisted_2$3 = ["onClick"];
+const _hoisted_3$2 = ["onClick"];
 const _hoisted_4 = {
@@ -388,3 +473,3 @@ key: 0,
 const _hoisted_6 = /* @__PURE__ */ createElementVNode("span", { class: "desc" }, "\u9875", -1);
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "pagination",
@@ -470,3 +555,3 @@ props: paginationProps,
       }, [
-        createElementVNode("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_1$4, [
           createElementVNode("div", {
@@ -476,3 +561,3 @@ class: normalizeClass(["page-item page-item--prev", { "page-item--disabled": currentPage.value == 1 }]),
           }, [
-            createVNode(_sfc_main$4, { name: "left" })
+            createVNode(_sfc_main$f, { name: "left" })
           ], 2),
@@ -487,7 +572,7 @@ (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pagers), (item, index2) => {
                 onClick: ($event) => onClickEllipsis(index2)
-              }, " \xB7\xB7\xB7 ", 8, _hoisted_2)) : (openBlock(), createElementBlock("div", {
+              }, " \xB7\xB7\xB7 ", 8, _hoisted_2$3)) : (openBlock(), createElementBlock("div", {
                 key: 1,
                 class: normalizeClass(["page-item", { "page-item--current": item.isCurrent }]),
                 onClick: ($event) => change(item)
-              }, toDisplayString(item.page), 11, _hoisted_3))
+              }, toDisplayString(item.page), 11, _hoisted_3$2))
             ], 64);
@@ -499,3 +584,3 @@ }), 128)),
           }, [
-            createVNode(_sfc_main$4, { name: "right" })
+            createVNode(_sfc_main$f, { name: "right" })
           ], 2)
@@ -516,3 +601,3 @@ ]),
           _hoisted_6,
-          createVNode(_sfc_main$6, {
+          createVNode(_sfc_main$h, {
             type: "primary",
@@ -532,7 +617,7 @@ onClick: confirm
 const pagination_vue_vue_type_style_index_0_lang = "";
-_sfc_main$1.name = "GPagination";
-_sfc_main$1.install = function(app) {
-  app.component(_sfc_main$1.name, _sfc_main$1);
+_sfc_main$c.name = "GPagination";
+_sfc_main$c.install = function(app) {
+  app.component(_sfc_main$c.name, _sfc_main$c);
 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "scrollbar-box",
@@ -561,7 +646,758 @@ props: {
 const scrollbarBox_vue_vue_type_style_index_0_lang = "";
-_sfc_main.name = "GScrollbarBox";
+_sfc_main$b.name = "GScrollbarBox";
+_sfc_main$b.install = function(app) {
+  app.component(_sfc_main$b.name, _sfc_main$b);
+};
+var Direction = /* @__PURE__ */ ((Direction2) => {
+  Direction2["Horizontal"] = "horizontal";
+  Direction2["Vertical"] = "vertical";
+  return Direction2;
+})(Direction || {});
+var AnimationName = /* @__PURE__ */ ((AnimationName2) => {
+  AnimationName2["Slide"] = "slide";
+  AnimationName2["Fade"] = "fade";
+  return AnimationName2;
+})(AnimationName || {});
+var ArrowInMode = /* @__PURE__ */ ((ArrowInMode2) => {
+  ArrowInMode2["Always"] = "always";
+  ArrowInMode2["Hover"] = "hover";
+  ArrowInMode2["Never"] = "never";
+  return ArrowInMode2;
+})(ArrowInMode || {});
+var IndicatorPosition = /* @__PURE__ */ ((IndicatorPosition2) => {
+  IndicatorPosition2["Tob"] = "top";
+  IndicatorPosition2["Bottom"] = "bottom";
+  IndicatorPosition2["Left"] = "left";
+  IndicatorPosition2["Right"] = "right";
+  return IndicatorPosition2;
+})(IndicatorPosition || {});
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "carousel-arrow",
+  props: {
+    direction: { default: Direction.Horizontal },
+    arrowInMode: { default: ArrowInMode.Hover }
+  },
+  emits: ["previousClick", "nextClick"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const COMPONENT = "g-carousel-arrow";
+    const previousIconName = computed(() => props.direction === Direction.Horizontal ? "left" : "top");
+    const nextIconName = computed(() => props.direction === Direction.Horizontal ? "right" : "bottom");
+    const onPreviousClick = (ev) => {
+      emit("previousClick", ev);
+    };
+    const onNextClick = (ev) => {
+      emit("nextClick", ev);
+    };
+    const cls = computed(() => {
+      return {
+        [`${COMPONENT}-hover`]: props.arrowInMode === ArrowInMode.Hover
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(unref(_sfc_main$f), {
+          class: normalizeClass([COMPONENT, unref(cls)]),
+          name: unref(previousIconName),
+          onClick: onPreviousClick
+        }, null, 8, ["class", "name"]),
+        createVNode(unref(_sfc_main$f), {
+          class: normalizeClass([COMPONENT, unref(cls)]),
+          name: unref(nextIconName),
+          onClick: onNextClick
+        }, null, 8, ["class", "name"])
+      ], 64);
+    };
+  }
+});
+const carouselArrow_vue_vue_type_style_index_0_lang = "";
+const _hoisted_1$3 = ["onClick"];
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "carousel-indicator",
+  props: {
+    count: { default: 2 },
+    activeIndex: { default: 0 },
+    position: { default: IndicatorPosition.Bottom }
+  },
+  emits: ["select"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const COMPONENT = "g-carousel-indicator";
+    const onSelect = (index2) => {
+      if (index2 !== props.activeIndex) {
+        emit("select", index2);
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([COMPONENT, `${COMPONENT}-${props.position}`])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.count, (n, index2) => {
+          return openBlock(), createElementBlock("span", {
+            key: index2,
+            class: normalizeClass([
+              `${COMPONENT}-item`,
+              {
+                [`${COMPONENT}-item-active`]: index2 === __props.activeIndex
+              }
+            ]),
+            onClick: ($event) => onSelect(index2)
+          }, null, 10, _hoisted_1$3);
+        }), 128))
+      ], 2);
+    };
+  }
+});
+const carouselIndicator_vue_vue_type_style_index_0_lang = "";
+const carouselInjectionKey = Symbol("carousel");
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "carousel",
+  props: {
+    current: { default: 0 },
+    autoPlay: { type: Boolean, default: false },
+    autoPlayInterval: { default: 3e3 },
+    animationInterval: { default: 500 },
+    animationName: { default: AnimationName.Slide },
+    direction: { default: Direction.Horizontal },
+    arrowInMode: { default: ArrowInMode.Hover },
+    indicator: { type: Boolean, default: true },
+    indicatorPosition: { default: IndicatorPosition.Bottom },
+    disableOnInteraction: { type: Boolean, default: true },
+    hoverToPause: { type: Boolean, default: true }
+  },
+  emits: ["update:current", "change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const COMPONENT = "g-carousel";
+    const carousel = ref();
+    const components2 = ref([]);
+    const count = computed(() => {
+      return components2.value.length;
+    });
+    const currentIndex = ref(0);
+    const slideDirection = ref();
+    const isPause = ref(false);
+    const addComponent = (uid) => {
+      components2.value.push(uid);
+    };
+    const previousIndex = ref();
+    const nextIndex = computed(() => {
+      let next;
+      if (currentIndex.value === count.value - 1) {
+        next = 0;
+      } else {
+        next = currentIndex.value + 1;
+      }
+      return next;
+    });
+    const carouselContext = reactive({
+      components: components2,
+      currentIndex,
+      previousIndex,
+      nextIndex,
+      slideDirection,
+      animationInterval: props.animationInterval,
+      addComponent,
+      animationName: props.animationName
+    });
+    provide(carouselInjectionKey, carouselContext);
+    const hasIndicator = computed(() => {
+      return props.indicator && components2.value.length > 1;
+    });
+    const hasArrow = computed(() => {
+      return props.arrowInMode !== ArrowInMode.Never && components2.value.length > 1;
+    });
+    let animationTimer = 0;
+    const slideTo = (options) => {
+      const { targetIndex, isToPrevious = false, isManual = false } = options;
+      if (!animationTimer && targetIndex !== currentIndex.value) {
+        previousIndex.value = currentIndex.value;
+        currentIndex.value = targetIndex;
+        slideDirection.value = isToPrevious ? "to-prev" : "to-next";
+        animationTimer = window.setTimeout(() => {
+          animationTimer = 0;
+        }, props.animationInterval);
+        emit("update:current", currentIndex.value);
+        emit("change", currentIndex.value, previousIndex.value, isManual);
+      }
+    };
+    const getPreviousIndex = () => {
+      let previous;
+      if (currentIndex.value === 0) {
+        previous = count.value - 1;
+      } else {
+        previous = currentIndex.value - 1;
+      }
+      return previous;
+    };
+    const onPreviousClick = () => slideTo({
+      targetIndex: getPreviousIndex(),
+      isToPrevious: true,
+      isManual: true
+    });
+    const onNextClick = () => slideTo({
+      targetIndex: nextIndex.value,
+      isManual: true
+    });
+    const onSelect = (index2) => slideTo({
+      targetIndex: index2,
+      isToPrevious: index2 < currentIndex.value,
+      isManual: true
+    });
+    const onStart = () => {
+      if (props.hoverToPause) {
+        isPause.value = true;
+      }
+    };
+    const onStop = () => {
+      if (props.hoverToPause) {
+        isPause.value = false;
+      }
+    };
+    let intervalTimer = 0;
+    const clearTimer = () => {
+      if (intervalTimer) {
+        window.clearInterval(intervalTimer);
+      }
+    };
+    watchEffect(() => {
+      var _a;
+      const shouldInterval = ((_a = components2.value) == null ? void 0 : _a.length) > 1 && !isPause.value && props.autoPlayInterval > 0;
+      clearTimer();
+      if (shouldInterval) {
+        intervalTimer = window.setInterval(() => {
+          slideTo({
+            targetIndex: nextIndex.value
+          });
+        }, props.autoPlayInterval);
+      }
+    });
+    onBeforeUnmount(() => {
+      clearTimer();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "carousel",
+        ref: carousel,
+        class: normalizeClass(COMPONENT),
+        onMouseenter: onStop,
+        onMouseleave: onStart
+      }, [
+        createElementVNode("div", {
+          ref: "carouselWrap",
+          class: normalizeClass([`${COMPONENT}-slide`, `${COMPONENT}-${__props.direction}`, `${COMPONENT}-${slideDirection.value}`]),
+          onMouseenter: onStop,
+          onMouseleave: onStart
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 34),
+        unref(hasArrow) ? (openBlock(), createBlock(_sfc_main$a, {
+          key: 0,
+          direction: __props.direction,
+          "arrow-in-mode": __props.arrowInMode,
+          onPreviousClick,
+          onNextClick
+        }, null, 8, ["direction", "arrow-in-mode"])) : createCommentVNode("", true),
+        unref(hasIndicator) ? (openBlock(), createBlock(_sfc_main$9, {
+          key: 1,
+          count: unref(count),
+          "active-index": currentIndex.value,
+          position: __props.indicatorPosition,
+          onSelect
+        }, null, 8, ["count", "active-index", "position"])) : createCommentVNode("", true)
+      ], 544);
+    };
+  }
+});
+const carousel_vue_vue_type_style_index_0_lang = "";
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "carousel-item",
+  setup(__props) {
+    const COMPONENT = "g-carousel-item";
+    const context = inject(carouselInjectionKey, {});
+    const instance = getCurrentInstance();
+    const index2 = computed(() => {
+      var _a, _b, _c;
+      return (_c = (_b = context.components) == null ? void 0 : _b.indexOf((_a = instance == null ? void 0 : instance.uid) != null ? _a : -1)) != null ? _c : -1;
+    });
+    const isCurrent = computed(() => index2.value === context.currentIndex);
+    const carouselDynamicClass = computed(() => {
+      const { previousIndex, nextIndex, animationName, slideDirection } = context;
+      return {
+        [`${COMPONENT}-prev`]: index2.value === previousIndex,
+        [`${COMPONENT}-next`]: index2.value === nextIndex,
+        [`${COMPONENT}-current`]: isCurrent.value,
+        [`${COMPONENT}-slide-in`]: animationName === AnimationName.Slide && isCurrent.value,
+        [`${COMPONENT}-slide-out`]: animationName === AnimationName.Slide && index2.value === previousIndex
+      };
+    });
+    const animationStyle = computed(() => {
+      const { transitionTimingFunction, animationInterval } = context;
+      return {
+        transitionTimingFunction,
+        transitionDuration: `${animationInterval}ms`,
+        animationTimingFunction: "cubic-bezier(0.34, 0.69, 0.1, 1)",
+        animationDuration: `${animationInterval}ms`
+      };
+    });
+    const style = computed(() => {
+      return {
+        ...animationStyle.value
+      };
+    });
+    onMounted(() => {
+      context.addComponent(instance == null ? void 0 : instance.uid);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([COMPONENT, unref(carouselDynamicClass)]),
+        style: normalizeStyle(unref(style))
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 6);
+    };
+  }
+});
+const carouselItem_vue_vue_type_style_index_0_lang = "";
+_sfc_main$8.name = "GCarousel";
+_sfc_main$7.name = "GCarouselItem";
+_sfc_main$8.install = function(app) {
+  app.component(_sfc_main$8.name, _sfc_main$8);
+};
+_sfc_main$7.install = function(app) {
+  app.component(_sfc_main$7.name, _sfc_main$7);
+};
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "timeline",
+  setup(__props) {
+    const COMPONENT = "g-timeline";
+    onMounted(() => {
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(COMPONENT)
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ]);
+    };
+  }
+});
+const timeline_vue_vue_type_style_index_0_lang = "";
+const _hoisted_1$2 = { key: 1 };
+const _hoisted_2$2 = { key: 1 };
+const _hoisted_3$1 = ["innerHTML"];
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "timeline-item",
+  props: {
+    title: null,
+    time: null,
+    content: null
+  },
+  setup(__props) {
+    const COMPONENT = "g-timeline-item";
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(COMPONENT)
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(`${COMPONENT}-line-wrap`)
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(`${COMPONENT}-line-wrap-dot`)
+          }, null, 2),
+          createElementVNode("div", {
+            class: normalizeClass(`${COMPONENT}-line-wrap-line`)
+          }, null, 2)
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(`${COMPONENT}-content-wrap`)
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(`${COMPONENT}-content-wrap-header`)
+          }, [
+            createElementVNode("div", {
+              class: normalizeClass(`${COMPONENT}-content-wrap-header-time`)
+            }, [
+              useSlots().time ? renderSlot(_ctx.$slots, "time", { key: 0 }) : (openBlock(), createElementBlock("span", _hoisted_1$2, toDisplayString(__props.time), 1))
+            ], 2),
+            createElementVNode("div", {
+              class: normalizeClass(`${COMPONENT}-content-wrap-header-title`)
+            }, [
+              useSlots().title ? renderSlot(_ctx.$slots, "title", { key: 0 }) : (openBlock(), createElementBlock("span", _hoisted_2$2, toDisplayString(__props.title), 1))
+            ], 2)
+          ], 2),
+          useSlots().content ? renderSlot(_ctx.$slots, "content", { key: 0 }) : (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass(`${COMPONENT}-content-wrap-content`),
+            innerHTML: __props.content
+          }, null, 10, _hoisted_3$1))
+        ], 2)
+      ]);
+    };
+  }
+});
+const timelineItem_vue_vue_type_style_index_0_lang = "";
+_sfc_main$6.name = "GTimeline";
+_sfc_main$5.name = "GTimelineItem";
+_sfc_main$6.install = function(app) {
+  app.component(_sfc_main$6.name, _sfc_main$6);
+};
+_sfc_main$5.install = function(app) {
+  app.component(_sfc_main$5.name, _sfc_main$5);
+};
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "loading",
+  setup(__props) {
+    const COMPONENT = "g-loading";
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$f), {
+        class: normalizeClass([COMPONENT]),
+        name: "loading"
+      }, null, 8, ["class"]);
+    };
+  }
+});
+const loading_vue_vue_type_style_index_0_lang = "";
+_sfc_main$4.name = "GLoading";
+_sfc_main$4.install = function(app) {
+  app.component(_sfc_main$4.name, _sfc_main$4);
+};
+const lineProps = {
+  percent: {
+    type: Number,
+    default: 0
+  },
+  animation: {
+    type: Boolean,
+    default: false
+  },
+  strokeWidth: {
+    type: Number
+  },
+  width: {
+    type: [Number, String]
+  },
+  color: String,
+  trackColor: String
+};
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "line",
+  props: lineProps,
+  setup(__props) {
+    const props = __props;
+    const COMPONENT = "g-progress-line";
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(`${COMPONENT}-wrapper`)
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(COMPONENT)
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass(`${COMPONENT}-bar`),
+            style: normalizeStyle({
+              width: `${props.percent * 100}%`,
+              height: `${props.strokeWidth || 8}px`,
+              backgroundColor: props.trackColor
+            })
+          }, null, 6)
+        ])
+      ], 2);
+    };
+  }
+});
+const line_vue_vue_type_style_index_0_lang = "";
+const circleProps = {
+  percent: {
+    type: Number,
+    default: 0
+  },
+  animation: {
+    type: Boolean,
+    default: false
+  },
+  strokeWidth: {
+    type: Number,
+    default: 2
+  },
+  width: {
+    type: [Number, String]
+  },
+  color: String,
+  trackColor: String
+};
+const _hoisted_1$1 = ["viewBox"];
+const _hoisted_2$1 = ["cx", "cy", "r", "stroke-width"];
+const _hoisted_3 = ["cx", "cy", "r", "stroke-width"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "circle",
+  props: circleProps,
+  setup(__props) {
+    const props = __props;
+    const COMPONENT = "g-progress-circle";
+    const mergedWidth = computed(() => {
+      var _a;
+      return Number((_a = props.width) != null ? _a : 64);
+    });
+    const radius = computed(() => (mergedWidth.value - props.strokeWidth) / 2);
+    const perimeter = computed(() => Math.PI * 2 * radius.value);
+    const center = computed(() => mergedWidth.value / 2);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(`${COMPONENT}-wrapper`)
+      }, [
+        (openBlock(), createElementBlock("svg", {
+          viewBox: `0 0 ${unref(mergedWidth)} ${unref(mergedWidth)}`,
+          class: normalizeClass(`${COMPONENT}-svg`)
+        }, [
+          createElementVNode("circle", {
+            class: normalizeClass(COMPONENT),
+            fill: "none",
+            cx: unref(center),
+            cy: unref(center),
+            r: unref(radius),
+            "stroke-width": props.strokeWidth,
+            style: normalizeStyle({
+              stroke: props.trackColor
+            })
+          }, null, 12, _hoisted_2$1),
+          createElementVNode("circle", {
+            class: normalizeClass(`${COMPONENT}-bar`),
+            fill: "none",
+            cx: unref(center),
+            cy: unref(center),
+            r: unref(radius),
+            "stroke-width": props.strokeWidth,
+            style: normalizeStyle({
+              stroke: props.color,
+              strokeDasharray: unref(perimeter),
+              strokeDashoffset: (props.percent >= 1 ? 0 : 1 - props.percent) * unref(perimeter)
+            })
+          }, null, 14, _hoisted_3)
+        ], 10, _hoisted_1$1))
+      ], 2);
+    };
+  }
+});
+const circle_vue_vue_type_style_index_0_lang = "";
+const progressProps = {
+  type: {
+    type: String,
+    default: "line"
+  },
+  percent: {
+    type: Number,
+    default: 0
+  },
+  animation: {
+    type: Boolean,
+    default: false
+  },
+  strokeWidth: {
+    type: Number
+  },
+  width: {
+    type: [Number, String]
+  },
+  color: {
+    type: String
+  },
+  trackColor: String
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "progress",
+  props: progressProps,
+  setup(__props) {
+    const props = __props;
+    const COMPONENT = "g-progress";
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(COMPONENT)
+      }, [
+        props.type === "line" ? (openBlock(), createBlock(_sfc_main$3, {
+          key: 0,
+          animation: props.animation,
+          percent: props.percent,
+          color: props.color,
+          "track-color": props.trackColor,
+          width: props.width,
+          "stroke-width": props.strokeWidth
+        }, null, 8, ["animation", "percent", "color", "track-color", "width", "stroke-width"])) : props.type === "circle" ? (openBlock(), createBlock(_sfc_main$2, {
+          key: 1,
+          animation: props.animation,
+          percent: props.percent,
+          color: props.color,
+          "track-color": props.trackColor,
+          width: props.width,
+          "stroke-width": props.strokeWidth
+        }, null, 8, ["animation", "percent", "color", "track-color", "width", "stroke-width"])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const progress_vue_vue_type_style_index_0_lang = "";
+_sfc_main$1.name = "GProgress";
+_sfc_main$1.install = function(app) {
+  app.component(_sfc_main$1.name, _sfc_main$1);
+};
+const _hoisted_1 = ["rowspan", "colspan"];
+const _hoisted_2 = ["rowspan", "colspan"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "table",
+  props: {
+    header: { default: () => [] },
+    data: { default: () => [] },
+    headerSticky: { type: Boolean, default: true },
+    headerStickyTop: { default: 0 }
+  },
+  setup(__props) {
+    const props = __props;
+    const COMPONENT = "g-table";
+    const pushRow = (original, rows, dinks) => {
+      const cols = [];
+      let children = [];
+      dinks.forEach((dink) => {
+        dink.rowSpan++;
+      });
+      original.forEach((element) => {
+        var _a, _b, _c, _d;
+        const col = {
+          key: element.key,
+          display: element.display,
+          width: element.width,
+          rowSpan: 1,
+          colSpan: (_b = (_a = element.children) == null ? void 0 : _a.length) != null ? _b : 1,
+          parents: (_c = element.parents) != null ? _c : []
+        };
+        if ((_d = element.children) == null ? void 0 : _d.length) {
+          col.parents.forEach((parent) => {
+            var _a2;
+            parent.colSpan += ((_a2 = element.children) == null ? void 0 : _a2.length) - 1;
+          });
+          element.children.forEach((child) => {
+            child.parents = col.parents.concat(col);
+          });
+          children = children.concat(element.children);
+        } else {
+          dinks.push(col);
+        }
+        cols.push(col);
+      });
+      rows.push(cols);
+      if (children.length)
+        pushRow(children, rows, dinks);
+    };
+    const headerRows = computed(() => {
+      const rows = [];
+      pushRow(props.header, rows, []);
+      return rows;
+    });
+    const pushKeys = (original, keys) => {
+      original.forEach((element) => {
+        var _a;
+        if ((_a = element.children) == null ? void 0 : _a.length) {
+          pushKeys(element.children, keys);
+        } else {
+          keys.push(element.key);
+        }
+      });
+    };
+    const headerKeys = computed(() => {
+      const keys = [];
+      pushKeys(props.header, keys);
+      return keys;
+    });
+    const pushRemoveCells = (cells, area) => {
+      const [minRowIndex, minColIndex] = area.min;
+      const [maxRowIndex, maxColIndex] = area.max;
+      for (let rowIndex = minRowIndex; rowIndex <= maxRowIndex; rowIndex++) {
+        for (let colIndex = minColIndex; colIndex <= maxColIndex; colIndex++) {
+          if (rowIndex === minRowIndex && colIndex === minColIndex)
+            continue;
+          cells.push(`${rowIndex}-${colIndex}`);
+        }
+      }
+    };
+    const removedCells = computed(() => {
+      const cells = [];
+      const { data } = props;
+      data.forEach((raw, rowIndex) => {
+        headerKeys.value.forEach((key, colIndex) => {
+          const rowSpan = raw[`${key}-row-span`] || 1;
+          const colSpan = raw[`${key}-col-span`] || 1;
+          if (rowSpan > 1 || colSpan > 1) {
+            pushRemoveCells(cells, {
+              min: [rowIndex, colIndex],
+              max: [rowIndex + rowSpan - 1, colIndex + colSpan - 1]
+            });
+          }
+        });
+      });
+      return cells;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("table", {
+        class: normalizeClass(COMPONENT),
+        width: "100%"
+      }, [
+        createElementVNode("thead", {
+          class: normalizeClass(__props.headerSticky ? `${COMPONENT}-header-sticky` : ""),
+          style: normalizeStyle({ top: `${__props.headerStickyTop}px` })
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(headerRows), (cols, index2) => {
+            return openBlock(), createElementBlock("tr", { key: index2 }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(cols, (col) => {
+                return openBlock(), createElementBlock("th", {
+                  key: col.key,
+                  rowspan: col.rowSpan,
+                  colspan: col.colSpan,
+                  style: normalizeStyle({ width: col.width })
+                }, toDisplayString(col.display), 13, _hoisted_1);
+              }), 128))
+            ]);
+          }), 128))
+        ], 6),
+        createElementVNode("tbody", null, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.data, (dataRow, rowIndex) => {
+            return openBlock(), createElementBlock("tr", { key: rowIndex }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(headerKeys), (key, colIndex) => {
+                var _a, _b;
+                return openBlock(), createElementBlock(Fragment, null, [
+                  !unref(removedCells).includes(`${rowIndex}-${colIndex}`) ? (openBlock(), createElementBlock("td", {
+                    key,
+                    rowspan: (_a = dataRow[`${key}-row-span`]) != null ? _a : 1,
+                    colspan: (_b = dataRow[`${key}-col-span`]) != null ? _b : 1
+                  }, toDisplayString(dataRow[key]), 9, _hoisted_2)) : createCommentVNode("", true)
+                ], 64);
+              }), 256))
+            ]);
+          }), 128))
+        ])
+      ]);
+    };
+  }
+});
+const table_vue_vue_type_style_index_0_lang = "";
+_sfc_main.name = "GTable";
 _sfc_main.install = function(app) {
   app.component(_sfc_main.name, _sfc_main);
 };
-const components = [_sfc_main$6, _sfc_main$5, _sfc_main$4, _sfc_main$3, _sfc_main$2, _sfc_main$1, _sfc_main];
+const components = [
+  _sfc_main$j,
+  _sfc_main$i,
+  _sfc_main$h,
+  _sfc_main$g,
+  _sfc_main$f,
+  _sfc_main$e,
+  _sfc_main$d,
+  _sfc_main$c,
+  _sfc_main$b,
+  _sfc_main$8,
+  _sfc_main$7,
+  _sfc_main$6,
+  _sfc_main$5,
+  _sfc_main$4,
+  _sfc_main$1,
+  _sfc_main
+];
 const install = (app) => {
@@ -576,10 +1412,19 @@ components.forEach((item) => {
 export {
-  _sfc_main$6 as GButton,
-  _sfc_main$4 as GIcon,
-  _sfc_main$2 as GModal,
-  _sfc_main$1 as GPagination,
-  _sfc_main as GScrollbarBox,
-  _sfc_main$3 as GTag,
-  _sfc_main$5 as GText,
+  _sfc_main$h as GButton,
+  _sfc_main$8 as GCarousel,
+  _sfc_main$7 as GCarouselItem,
+  _sfc_main$j as GCol,
+  _sfc_main$f as GIcon,
+  _sfc_main$4 as GLoading,
+  _sfc_main$d as GModal,
+  _sfc_main$c as GPagination,
+  _sfc_main$1 as GProgress,
+  _sfc_main$i as GRow,
+  _sfc_main$b as GScrollbarBox,
+  _sfc_main as GTable,
+  _sfc_main$e as GTag,
+  _sfc_main$g as GText,
+  _sfc_main$6 as GTimeline,
+  _sfc_main$5 as GTimelineItem,
   index as default
 };

package.json

 {
   "name": "@geektech/geek-ui",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "type": "module",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -28,2 +28,17 @@ # Geek UI Quick Start
 
+## Change theme
+
+Reset var
+
+```css
+
+:root {
+  --primary-color: @cover-theme-primary-color;
+  --primary-light: @cover-theme-primary-light;
+  --primary-lighter: @cover-theme-primary-lighter;
+  --primary-dark: @cover-theme-primary-dark;
+  --primary-darker: @cover-theme-primary-darker;
+}
+```
+
 ## Import as need
@@ -30,0 +45,0 @@

No alert changes

Improved metrics

Total package byte prevSize

209216

increased by121.12%

Lines of code

8249

increased by184.35%

Number of lines in readme file

53

increased by39.47%

No dependency changes