@web-utils/component 2.0.13 → 2.2.0

package/stateful/index.mjs

@@ -0,0 +1,84 @@
+import { n as _ } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+const g = {
+  name: "Stateful",
+  functional: !0,
+  props: {
+    tag: {
+      type: String,
+      default: "div"
+    },
+    draft: {
+      type: [Array, Boolean],
+      default: () => []
+    },
+    doing: {
+      type: [Array, Boolean],
+      default: () => []
+    },
+    overdue: {
+      type: [Array, Boolean],
+      default: () => []
+    },
+    error: {
+      type: [Array, Boolean],
+      default: () => []
+    },
+    done: {
+      type: [Array, Boolean],
+      default: () => []
+    },
+    closed: {
+      type: [Array, Boolean],
+      default: () => []
+    },
+    type: {
+      type: String,
+      validator: (r) => ["doing", "overdue", "error", "done", "closed"].indexOf(r) > -1
+    },
+    status: {
+      type: [String, Number]
+    },
+    size: {
+      type: String
+    }
+  },
+  render(r, { props: t, data: y, children: c }) {
+    const { draft: a, doing: n, overdue: o, error: s, done: l, closed: d, status: e, tag: f, size: u, type: p } = t, A = {
+      draft: Array.isArray(a) ? a.includes(e) : a,
+      doing: Array.isArray(n) ? n.includes(e) : n,
+      overdue: Array.isArray(o) ? o.includes(e) : o,
+      error: Array.isArray(s) ? s.includes(e) : s,
+      done: Array.isArray(l) ? l.includes(e) : l,
+      closed: Array.isArray(d) ? d.includes(e) : d
+    };
+    return r(f, y, [
+      r("span", {
+        style: { width: u, height: u },
+        class: ["stateful", p, A]
+      }),
+      c
+    ]);
+  }
+};
+let v, S;
+const i = {};
+var m = /* @__PURE__ */ _(
+  g,
+  v,
+  S,
+  !1,
+  B,
+  null,
+  null,
+  null
+);
+function B(r) {
+  for (let t in i)
+    this[t] = i[t];
+}
+const x = /* @__PURE__ */ function() {
+  return m.exports;
+}();
+export {
+  x as default
+};

package/stateful/style.css

@@ -0,0 +1 @@
+.stateful{vertical-align:middle;content:"";border-radius:2px;width:14px;height:14px;margin-right:6px;display:inline-block}.stateful.draft{background-color:#d7d7d7}.stateful.doing{background-color:#14ca7a}.stateful.overdue{background-color:#feae3d}.stateful.error{background-color:red}.stateful.done{background-color:#45a3e7}.stateful.closed{background-color:#d7d7d7}

package/static-pageable-table/index.mjs

@@ -0,0 +1,92 @@
+import { chunk as n } from "@web-utils/integrations/lodash";
+import { n as o } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+var i = function() {
+  var e = this, t = e.$createElement, a = e._self._c || t;
+  return a("div", {
+    staticClass: "static-pageable-table"
+  }, [a("ElTable", e._g(e._b({
+    attrs: {
+      size: "mini",
+      data: e.records
+    }
+  }, "ElTable", e.$attrs, !1), e.$listeners), [e._t("default", function() {
+    return [e._v("请添加表格列")];
+  })], 2), a("ElPagination", {
+    attrs: {
+      "current-page": e.page.page,
+      "hide-on-single-page": !0,
+      "page-size": e.page.limit,
+      total: e.page.total,
+      background: "",
+      layout: "total, prev, pager, next"
+    },
+    on: {
+      "current-change": function(s) {
+        e.page.page = s;
+      }
+    }
+  })], 1);
+}, l = [];
+const p = {
+  name: "StaticPageableTable",
+  props: {
+    rows: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      page: {
+        total: 0,
+        page: 1,
+        limit: 25
+      },
+      records: []
+    };
+  },
+  computed: {
+    observer() {
+      return {
+        page: this.page.page,
+        rows: this.rows
+      };
+    }
+  },
+  watch: {
+    rows() {
+      this.page.page = 1;
+    },
+    observer: {
+      immediate: !0,
+      handler() {
+        this.page.total = this.rows.length, this.fetchData();
+      }
+    }
+  },
+  methods: {
+    fetchData() {
+      this.records = n(this.rows, this.page.limit)[this.page.page - 1];
+    }
+  }
+}, r = {};
+var c = /* @__PURE__ */ o(
+  p,
+  i,
+  l,
+  !1,
+  g,
+  null,
+  null,
+  null
+);
+function g(e) {
+  for (let t in r)
+    this[t] = r[t];
+}
+const _ = /* @__PURE__ */ function() {
+  return c.exports;
+}();
+export {
+  _ as default
+};

package/static-pageable-table/style.css

@@ -0,0 +1 @@
+.static-pageable-table{flex:auto}

package/swiper/index.mjs

@@ -0,0 +1,183 @@
+var h = (t, e, s) => new Promise((i, r) => {
+  var d = (n) => {
+    try {
+      a(s.next(n));
+    } catch (o) {
+      r(o);
+    }
+  }, c = (n) => {
+    try {
+      a(s.throw(n));
+    } catch (o) {
+      r(o);
+    }
+  }, a = (n) => n.done ? i(n.value) : Promise.resolve(n.value).then(d, c);
+  a((s = s.apply(t, e)).next());
+});
+import { getEleWidth as u } from "@web-utils/core";
+import p from "@web-utils/component/resize-observer";
+import "@web-utils/component/resize-observer/style.css";
+import { n as f } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+var w = function() {
+  var t = this, e = t.$createElement, s = t._self._c || e;
+  return s("div", {
+    staticClass: "egd-swiper"
+  }, [s("ElButton", {
+    staticClass: "el-carousel__arrow el-carousel__arrow--left",
+    attrs: {
+      disabled: t.reachedLeft,
+      icon: "el-icon-arrow-left"
+    },
+    on: {
+      click: t.clickLeft
+    }
+  }), s("div", {
+    ref: "swiperBox",
+    staticClass: "egd-swiper-box",
+    on: {
+      wheel: function(i) {
+        return i.stopPropagation(), i.preventDefault(), t.onMouseWheel.apply(null, arguments);
+      }
+    }
+  }, [s("div", {
+    ref: "swiperContent",
+    staticClass: "egd-swiper-content",
+    style: t.swiperContentStyle
+  }, [t._t("default")], 2)]), s("ElButton", {
+    staticClass: "el-carousel__arrow el-carousel__arrow--right",
+    attrs: {
+      disabled: t.reachedRight,
+      icon: "el-icon-arrow-right"
+    },
+    on: {
+      click: t.clickRight
+    }
+  }), s("ResizeObserver", {
+    on: {
+      notify: t.resize
+    }
+  })], 1);
+}, m = [];
+const v = {
+  name: "Swiper",
+  components: {
+    ResizeObserver: p
+  },
+  data() {
+    return {
+      mouseDown: !1,
+      swiperBoxWith: 0,
+      swiperContentWidth: 0,
+      translateX: 0,
+      reachedLeft: !0,
+      reachedRight: !1,
+      childrenWidth: [],
+      swiperContentStyle: {
+        transitionDuration: "0ms",
+        transform: "translate3d(0px, 0px, 0px)"
+      }
+    };
+  },
+  mounted() {
+    return h(this, null, function* () {
+      yield this.layout();
+    });
+  },
+  updated() {
+    this.computeContentWidth();
+  },
+  methods: {
+    layout() {
+      return h(this, null, function* () {
+        yield this.$nextTick(), this.computeContentWidth(), this.resize();
+      });
+    },
+    resize() {
+      this.swiperBoxWith = this.$refs.swiperBox.offsetWidth;
+    },
+    computeContentWidth() {
+      let t = 0;
+      const e = [], { children: s } = this.$refs.swiperContent;
+      Array.prototype.forEach.call(s, (i) => {
+        const r = u(i);
+        t += r, e.push(r);
+      }), this.childrenWidth = e, this.swiperContentWidth = t;
+    },
+    updateDuration(t) {
+      this.swiperContentStyle.transitionDuration = t ? "300ms" : "0ms";
+    },
+    setTranslateX(t) {
+      this.swiperContentWidth <= this.swiperBoxWith || (t > 0 ? (this.translateX = 0, this.reachedLeft = !0, this.reachedRight = !1) : t - this.swiperBoxWith < -this.swiperContentWidth ? (this.translateX = -this.swiperContentWidth + this.swiperBoxWith, this.reachedLeft = !1, this.reachedRight = !0) : (this.translateX = t, this.reachedLeft = !1, this.reachedRight = !1), this.swiperContentStyle.transform = `translate3d(${this.translateX}px, 0px, 0px)`);
+    },
+    clickLeft() {
+      this.updateDuration(!0);
+      let t = this.translateX + this.swiperBoxWith, e = t;
+      if (t < 0) {
+        e = 0, t = -t;
+        for (let s = 0, i = this.childrenWidth.length; s < i && (e += this.childrenWidth[s], !(e >= t)); s++)
+          ;
+        e = -e;
+      }
+      this.setTranslateX(e);
+    },
+    clickRight() {
+      this.updateDuration(!0);
+      const t = Math.abs(this.translateX - this.swiperBoxWith);
+      let e = 0;
+      for (let s = 0, i = this.childrenWidth.length; s < i; s++)
+        if (e += this.childrenWidth[s], e >= t) {
+          e > t && (e -= this.childrenWidth[s]);
+          break;
+        }
+      this.setTranslateX(-e);
+    },
+    onMouseWheel(t) {
+      this.updateDuration(!0), t.deltaMode === WheelEvent.DOM_DELTA_LINE ? this.setTranslateX(this.translateX - t.deltaY * 30) : t.deltaMode === WheelEvent.DOM_DELTA_PAGE ? t.deltaY > 0 ? this.clickRight() : this.clickLeft() : this.setTranslateX(this.translateX - t.deltaY);
+    },
+    onMouseDown(t) {
+      this.mouseDown = !0, this.startX = t.clientX, this.translateXRaw = this.translateX, window.addEventListener("mousemove", this.onMouseMove, { passive: !1 }), window.addEventListener("mouseup", this.onMouseUp, { passive: !1 });
+    },
+    onMouseUp(t) {
+      this.mouseDown = !1, this.updateDuration(!0), this.$refs.swiperContent.addEventListener("transitionend", this.transitionend), this.$refs.swiperContent.addEventListener("webkitTransitionEnd", this.transitionend);
+      const e = t.clientX - this.startX;
+      if (e < 0) {
+        const s = this.translateX + e;
+        this.setTranslateX(s);
+      }
+      if (e > 0) {
+        const s = this.translateX + e;
+        this.setTranslateX(s);
+      }
+      window.removeEventListener("mousemove", this.onMouseMove), window.removeEventListener("mouseup", this.onMouseUp);
+    },
+    onMouseMove(t) {
+      this.mouseDown && requestAnimationFrame(() => {
+        const e = t.clientX - this.startX, s = this.translateXRaw + e;
+        this.setTranslateX(s);
+      });
+    },
+    transitionend() {
+      this.updateDuration(!1), this.$refs.swiperContent.removeEventListener("transitionend", this.transitionend), this.$refs.swiperContent.removeEventListener("webkitTransitionEnd", this.transitionend);
+    }
+  }
+}, l = {};
+var X = /* @__PURE__ */ f(
+  v,
+  w,
+  m,
+  !1,
+  _,
+  null,
+  null,
+  null
+);
+function _(t) {
+  for (let e in l)
+    this[e] = l[e];
+}
+const g = /* @__PURE__ */ function() {
+  return X.exports;
+}();
+export {
+  g as default
+};

package/swiper/style.css

@@ -0,0 +1 @@
+.egd-swiper{height:100%;padding:0 60px;position:relative}.egd-swiper .el-button.el-carousel__arrow{color:#fff;background-color:rgba(31,45,61,.11);border-color:rgba(31,45,61,.01);border-radius:50%;padding:0;font-size:12px}.egd-swiper .el-button.el-carousel__arrow i{cursor:unset}.egd-swiper .el-button.el-carousel__arrow.is-disabled{color:#fff;background-color:rgba(31,45,61,.11);border-color:rgba(31,45,61,.01)}.egd-swiper .egd-swiper-box{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:100%;overflow:hidden}.egd-swiper .egd-swiper-box .egd-swiper-content{flex-flow:row;width:100%;height:100%;padding-top:14px;transition-property:transform;display:flex;overflow:visible;transform:translate(0,0)}

package/tab/index.mjs

@@ -0,0 +1,147 @@
+import { p as a } from "../chunks/tab-mixin.tM9jcRT8.mjs";
+import { n as s } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+var o = function() {
+  var t = this, r = t.$createElement, e = t._self._c || r;
+  return e("div", {
+    staticClass: "vux-tab-wrap",
+    class: t.barPosition === "top" ? "vux-tab-bar-top" : ""
+  }, [e("div", {
+    staticClass: "vux-tab-container"
+  }, [e("div", {
+    ref: "nav",
+    staticClass: "vux-tab",
+    class: [{
+      "vux-tab-no-animate": !t.animate,
+      scrollable: t.scrollable
+    }]
+  }, [t._t("default"), t.animate ? e("div", {
+    staticClass: "vux-tab-ink-bar",
+    class: t.barClass,
+    style: t.barStyle
+  }, [t.customBarWidth ? e("span", {
+    staticClass: "vux-tab-bar-inner",
+    style: t.innerBarStyle
+  }) : t._e()]) : t._e()], 2)])]);
+}, l = [];
+const c = {
+  name: "Tab",
+  mixins: [a],
+  props: {
+    lineWidth: {
+      type: Number,
+      default: 3
+    },
+    activeColor: String,
+    barActiveColor: String,
+    animate: {
+      type: Boolean,
+      default: !0
+    },
+    customBarWidth: [Function, String],
+    scrollThreshold: {
+      type: Number,
+      default: 4
+    },
+    barPosition: {
+      type: String,
+      default: "bottom",
+      validator(t) {
+        return ["bottom", "top"].indexOf(t) !== -1;
+      }
+    }
+  },
+  data() {
+    return {
+      direction: "forward",
+      hasReady: !1
+    };
+  },
+  computed: {
+    barLeft() {
+      if (this.hasReady) {
+        const t = this.scrollable ? window.innerWidth / this.$children[this.currentIndex || 0].$el.getBoundingClientRect().width : this.number;
+        return `${this.currentIndex * (100 / t)}%`;
+      }
+      return null;
+    },
+    barRight() {
+      if (this.hasReady) {
+        const t = this.scrollable ? window.innerWidth / this.$children[this.currentIndex || 0].$el.getBoundingClientRect().width : this.number;
+        return `${(t - this.currentIndex - 1) * (100 / t)}%`;
+      }
+      return null;
+    },
+    // when prop:custom-bar-width
+    innerBarStyle() {
+      return {
+        width: typeof this.customBarWidth == "function" ? this.customBarWidth(this.currentIndex) : this.customBarWidth,
+        backgroundColor: this.barActiveColor || this.activeColor
+      };
+    },
+    // end
+    barStyle() {
+      const t = {
+        left: this.barLeft,
+        right: this.barRight,
+        display: "block",
+        height: `${this.lineWidth}px`,
+        transition: this.hasReady ? null : "none"
+      };
+      return this.customBarWidth ? t.backgroundColor = "transparent" : t.backgroundColor = this.barActiveColor || this.activeColor, t;
+    },
+    barClass() {
+      return {
+        "vux-tab-ink-bar-transition-forward": this.direction === "forward",
+        "vux-tab-ink-bar-transition-backward": this.direction === "backward"
+      };
+    },
+    scrollable() {
+      return this.number > this.scrollThreshold;
+    }
+  },
+  watch: {
+    currentIndex(t, r) {
+      this.direction = t > r ? "forward" : "backward", this.$emit("on-index-change", t, r), this.hasReady && this.scrollToActiveTab();
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.hasReady = !0;
+      }, 0);
+    });
+  },
+  methods: {
+    scrollToActiveTab() {
+      if (!this.scrollable || !this.$children || !this.$children.length)
+        return;
+      const t = this.$children[this.currentIndex].$el;
+      let r = 0;
+      const e = () => {
+        const i = this.$refs.nav;
+        i.scrollLeft += (t.offsetLeft - (i.offsetWidth - t.offsetWidth) / 2 - i.scrollLeft) / 15, ++r < 15 && window.requestAnimationFrame(e);
+      };
+      window.requestAnimationFrame(e);
+    }
+  }
+}, n = {};
+var h = /* @__PURE__ */ s(
+  c,
+  o,
+  l,
+  !1,
+  u,
+  null,
+  null,
+  null
+);
+function u(t) {
+  for (let r in n)
+    this[r] = n[r];
+}
+const m = /* @__PURE__ */ function() {
+  return h.exports;
+}();
+export {
+  m as default
+};

package/tab/style.css

@@ -0,0 +1 @@
+.vux-tab-ink-bar{text-align:center;background-color:#1989fa;height:2px;position:absolute;bottom:0;left:0}.vux-tab-ink-bar-transition-forward{transition:right .3s cubic-bezier(.35,0,.25,1),left .3s cubic-bezier(.35,0,.25,1) 90ms}.vux-tab-ink-bar-transition-backward{transition:right .3s cubic-bezier(.35,0,.25,1) 90ms,left .3s cubic-bezier(.35,0,.25,1)}.vux-tab-bar-top .vux-tab-ink-bar{top:0}.vux-tab{background-color:#fff;height:36px;display:flex;position:relative}.vux-tab button{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:0 0;border:0;outline:0;padding:0}.vux-tab .vux-tab-item{box-sizing:border-box;color:#666;text-align:center;cursor:pointer;flex:auto;width:100%;height:100%;font-size:14px;line-height:36px;display:block}.vux-tab .vux-tab-item.vux-tab-selected{color:#1989fa;border-bottom:3px solid #1989fa}.vux-tab-bar-top .vux-tab .vux-tab-item.vux-tab-selected{border-top:3px solid #1989fa;border-bottom:none}.vux-tab .vux-tab-item.vux-tab-disabled{color:#ddd}.vux-tab.vux-tab-no-animate .vux-tab-item.vux-tab-selected{background:0 0}.vux-tab-bar-inner{background-color:#1989fa;height:100%;margin:auto;transition:width .3s cubic-bezier(.35,0,.25,1);display:block}.vux-tab-item-badge{box-sizing:border-box;vertical-align:middle;background-clip:padding-box;border-radius:30px;min-width:18px;height:18px;margin:auto 0 auto 4px;padding:0 4px;font-size:11px;line-height:18px;display:inline-block;position:absolute;top:0;bottom:0}.vux-tab-wrap{padding-top:36px;position:relative}.vux-tab-container{height:36px;position:absolute;top:0;left:0;right:0;overflow:hidden}.scrollable{box-sizing:content-box;-webkit-overflow-scrolling:touch;padding-bottom:17px;overflow-x:auto;overflow-y:hidden}.scrollable::-webkit-scrollbar{display:none}.scrollable .vux-tab-ink-bar{position:absolute;bottom:17px}.scrollable .vux-tab-item{flex:0 0 22%}

package/tab-item/index.mjs

@@ -0,0 +1,73 @@
+import { c as n } from "../chunks/tab-mixin.tM9jcRT8.mjs";
+import { n as l } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+var o = function() {
+  var e = this, t = e.$createElement, a = e._self._c || t;
+  return a("div", {
+    staticClass: "vux-tab-item",
+    class: [e.currentSelected ? e.activeClass : "", {
+      "vux-tab-selected": e.currentSelected,
+      "vux-tab-disabled": e.disabled
+    }],
+    style: e.style,
+    on: {
+      click: e.onItemClick
+    }
+  }, [e._t("default"), typeof e.badgeLabel != "undefined" && e.badgeLabel !== "" ? a("span", {
+    staticClass: "vux-tab-item-badge",
+    style: {
+      background: e.badgeBackground,
+      color: e.badgeColor
+    }
+  }, [e._v(" " + e._s(e.badgeLabel) + " ")]) : e._e()], 2);
+}, s = [];
+const i = {
+  name: "TabItem",
+  mixins: [n],
+  props: {
+    activeClass: {
+      type: String
+    },
+    disabled: Boolean,
+    badgeBackground: {
+      type: String,
+      default: "#f74c31"
+    },
+    badgeColor: {
+      type: String,
+      default: "#fff"
+    },
+    badgeLabel: {
+      type: String
+    }
+  },
+  computed: {
+    style() {
+      return {
+        borderWidth: `${this.$parent.lineWidth}px`,
+        borderColor: this.$parent.activeColor,
+        color: this.currentSelected ? this.$parent.activeColor : this.disabled ? this.$parent.disabledColor : this.$parent.defaultColor,
+        border: this.$parent.animate ? "none" : "auto"
+      };
+    }
+  }
+}, r = {};
+var d = /* @__PURE__ */ l(
+  i,
+  o,
+  s,
+  !1,
+  c,
+  null,
+  null,
+  null
+);
+function c(e) {
+  for (let t in r)
+    this[t] = r[t];
+}
+const p = /* @__PURE__ */ function() {
+  return d.exports;
+}();
+export {
+  p as default
+};

package/table-column/index.mjs

@@ -0,0 +1,102 @@
+var u = Object.defineProperty, d = Object.defineProperties;
+var c = Object.getOwnPropertyDescriptors;
+var o = Object.getOwnPropertySymbols;
+var f = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
+var i = (n, e, t) => e in n ? u(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, l = (n, e) => {
+  for (var t in e || (e = {}))
+    f.call(e, t) && i(n, t, e[t]);
+  if (o)
+    for (var t of o(e))
+      p.call(e, t) && i(n, t, e[t]);
+  return n;
+}, r = (n, e) => d(n, c(e));
+import { n as g } from "../chunks/vueComponentNormalizer.JwmUNtgn.mjs";
+const m = {
+  props: {
+    type: {
+      type: String,
+      default: "default"
+    },
+    label: String,
+    className: String,
+    labelClassName: String,
+    property: String,
+    prop: String,
+    width: {},
+    minWidth: {},
+    renderHeader: Function,
+    sortable: {
+      type: [Boolean, String],
+      default: !1
+    },
+    sortMethod: Function,
+    sortBy: [String, Function, Array],
+    resizable: {
+      type: Boolean,
+      default: !0
+    },
+    columnKey: String,
+    align: String,
+    headerAlign: String,
+    showTooltipWhenOverflow: Boolean,
+    showOverflowTooltip: {
+      type: Boolean,
+      default: !0
+    },
+    fixed: [Boolean, String],
+    formatter: Function,
+    selectable: Function,
+    reserveSelection: Boolean,
+    filterMethod: Function,
+    filteredValue: Array,
+    filters: Array,
+    filterPlacement: String,
+    filterMultiple: {
+      type: Boolean,
+      default: !0
+    },
+    index: [Number, Function],
+    sortOrders: {
+      type: Array,
+      default() {
+        return ["ascending", "descending", null];
+      },
+      validator(n) {
+        return n.every((e) => ["ascending", "descending", null].indexOf(e) > -1);
+      }
+    }
+  }
+}, _ = {
+  name: "TableColumn",
+  functional: !0,
+  mixins: [m],
+  render(n, { data: e, props: t, children: s }) {
+    return n("ElTableColumn", r(l({}, e), {
+      props: r(l({}, t), {
+        showOverflowTooltip: ["selection", "single-selection", "index", "expand"].includes(t.type) ? !1 : t.showOverflowTooltip
+      })
+    }), s);
+  }
+};
+let y, S;
+const a = {};
+var v = /* @__PURE__ */ g(
+  _,
+  y,
+  S,
+  !1,
+  h,
+  null,
+  null,
+  null
+);
+function h(n) {
+  for (let e in a)
+    this[e] = a[e];
+}
+const x = /* @__PURE__ */ function() {
+  return v.exports;
+}();
+export {
+  x as default
+};