@web-utils/component 2.0.10 → 2.0.11

package/dist/components/tab/index.js

@@ -1,31 +1,35 @@
-import { p as a } from "../../chunks/8c0142e0.js";
-import { n as s } from "../../chunks/5d4282fb.js";
-var o = function() {
-  var t = this, r = t.$createElement, e = t._self._c || r;
-  return e("div", {
+import { p as parentMixin } from "../../chunks/9d848bf6.js";
+import { n as normalizeComponent } from "../../chunks/3d28cc08.js";
+var render = function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
     staticClass: "vux-tab-wrap",
-    class: t.barPosition === "top" ? "vux-tab-bar-top" : ""
-  }, [e("div", {
+    class: _vm.barPosition === "top" ? "vux-tab-bar-top" : ""
+  }, [_c("div", {
     staticClass: "vux-tab-container"
-  }, [e("div", {
+  }, [_c("div", {
     ref: "nav",
     staticClass: "vux-tab",
     class: [{
-      "vux-tab-no-animate": !t.animate,
-      scrollable: t.scrollable
+      "vux-tab-no-animate": !_vm.animate,
+      scrollable: _vm.scrollable
     }]
-  }, [t._t("default"), t.animate ? e("div", {
+  }, [_vm._t("default"), _vm.animate ? _c("div", {
     staticClass: "vux-tab-ink-bar",
-    class: t.barClass,
-    style: t.barStyle
-  }, [t.customBarWidth ? e("span", {
+    class: _vm.barClass,
+    style: _vm.barStyle
+  }, [_vm.customBarWidth ? _c("span", {
     staticClass: "vux-tab-bar-inner",
-    style: t.innerBarStyle
-  }) : t._e()]) : t._e()], 2)])]);
-}, l = [];
-const c = {
+    style: _vm.innerBarStyle
+  }) : _vm._e()]) : _vm._e()], 2)])]);
+};
+var staticRenderFns = [];
+const Tab_vue_vue_type_style_index_0_lang = "";
+const __vue2_script = {
   name: "Tab",
-  mixins: [a],
+  mixins: [parentMixin],
   props: {
     lineWidth: {
       type: Number,
@@ -35,7 +39,7 @@ const c = {
     barActiveColor: String,
     animate: {
       type: Boolean,
-      default: !0
+      default: true
     },
     customBarWidth: [Function, String],
     scrollThreshold: {
@@ -45,47 +49,52 @@ const c = {
     barPosition: {
       type: String,
       default: "bottom",
-      validator(t) {
-        return ["bottom", "top"].indexOf(t) !== -1;
+      validator(val) {
+        return ["bottom", "top"].indexOf(val) !== -1;
       }
     }
   },
   data() {
     return {
       direction: "forward",
-      hasReady: !1
+      hasReady: false
     };
   },
   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)}%`;
+        const count = this.scrollable ? window.innerWidth / this.$children[this.currentIndex || 0].$el.getBoundingClientRect().width : this.number;
+        return `${this.currentIndex * (100 / count)}%`;
       }
       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)}%`;
+        const count = this.scrollable ? window.innerWidth / this.$children[this.currentIndex || 0].$el.getBoundingClientRect().width : this.number;
+        return `${(count - this.currentIndex - 1) * (100 / count)}%`;
       }
       return null;
     },
     innerBarStyle() {
       return {
-        width: typeof this.customBarWidth == "function" ? this.customBarWidth(this.currentIndex) : this.customBarWidth,
+        width: typeof this.customBarWidth === "function" ? this.customBarWidth(this.currentIndex) : this.customBarWidth,
         backgroundColor: this.barActiveColor || this.activeColor
       };
     },
     barStyle() {
-      const t = {
+      const commonStyle = {
         left: this.barLeft,
         right: this.barRight,
         display: "block",
         height: `${this.lineWidth}px`,
-        transition: this.hasReady ? null : "none"
+        transition: !this.hasReady ? "none" : null
       };
-      return this.customBarWidth ? t.backgroundColor = "transparent" : t.backgroundColor = this.barActiveColor || this.activeColor, t;
+      if (!this.customBarWidth) {
+        commonStyle.backgroundColor = this.barActiveColor || this.activeColor;
+      } else {
+        commonStyle.backgroundColor = "transparent";
+      }
+      return commonStyle;
     },
     barClass() {
       return {
@@ -98,48 +107,57 @@ const c = {
     }
   },
   watch: {
-    currentIndex(t, r) {
-      this.direction = t > r ? "forward" : "backward", this.$emit("on-index-change", t, r), this.hasReady && this.scrollToActiveTab();
+    currentIndex(newIndex, oldIndex) {
+      this.direction = newIndex > oldIndex ? "forward" : "backward";
+      this.$emit("on-index-change", newIndex, oldIndex);
+      this.hasReady && this.scrollToActiveTab();
     }
   },
   mounted() {
     this.$nextTick(() => {
       setTimeout(() => {
-        this.hasReady = !0;
+        this.hasReady = true;
       }, 0);
     });
   },
   methods: {
     scrollToActiveTab() {
-      if (!this.scrollable || !this.$children || !this.$children.length)
+      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);
+      }
+      const currentIndexTab = this.$children[this.currentIndex].$el;
+      let count = 0;
+      const step = () => {
+        const scrollDuration = 15;
+        const nav = this.$refs.nav;
+        nav.scrollLeft += (currentIndexTab.offsetLeft - (nav.offsetWidth - currentIndexTab.offsetWidth) / 2 - nav.scrollLeft) / scrollDuration;
+        if (++count < scrollDuration) {
+          window.requestAnimationFrame(step);
+        }
       };
-      window.requestAnimationFrame(e);
+      window.requestAnimationFrame(step);
     }
   }
-}, n = {};
-var h = /* @__PURE__ */ s(
-  c,
-  o,
-  l,
-  !1,
-  u,
+};
+const __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
+  false,
+  __vue2_injectStyles,
   null,
   null,
   null
 );
-function u(t) {
-  for (let r in n)
-    this[r] = n[r];
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
 }
-const m = /* @__PURE__ */ function() {
-  return h.exports;
+const Tab = /* @__PURE__ */ function() {
+  return __component__.exports;
 }();
 export {
-  m as default
+  Tab as default
 };

package/dist/components/tab/style.css

@@ -1 +1,122 @@
-.vux-tab-ink-bar{position:absolute;bottom:0;left:0;height:2px;text-align:center;background-color:#1989fa}.vux-tab-ink-bar-transition-forward{transition:right .3s cubic-bezier(.35,0,.25,1),left .3s cubic-bezier(.35,0,.25,1) .09s}.vux-tab-ink-bar-transition-backward{transition:right .3s cubic-bezier(.35,0,.25,1) .09s,left .3s cubic-bezier(.35,0,.25,1)}.vux-tab-bar-top .vux-tab-ink-bar{top:0}.vux-tab{position:relative;display:flex;height:36px;background-color:#fff}.vux-tab button{padding:0;background:0 0;border:0;outline:0;appearance:none}.vux-tab .vux-tab-item{display:block;flex:1 1 auto;box-sizing:border-box;width:100%;height:100%;color:#666;font-size:14px;line-height:36px;text-align:center;cursor:pointer}.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{display:block;height:100%;margin:auto;background-color:#1989fa;transition:width .3s cubic-bezier(.35,0,.25,1)}.vux-tab-item-badge{position:absolute;top:0;bottom:0;display:inline-block;box-sizing:border-box;min-width:18px;height:18px;margin:auto 0 auto 4px;padding:0 4px;font-size:11px;line-height:18px;vertical-align:middle;background-clip:padding-box;border-radius:30px}.vux-tab-wrap{position:relative;padding-top:36px}.vux-tab-container{position:absolute;top:0;right:0;left:0;height:36px;overflow:hidden}.scrollable{box-sizing:content-box;padding-bottom:17px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none}.scrollable .vux-tab-ink-bar{position:absolute;bottom:17px}.scrollable .vux-tab-item{flex:0 0 22%}
+/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
+/* 应用头部高度 */
+/* 页面宽度 */
+/* 侧栏宽度 */
+/* 标签高度 */
+/* 页面头部工具条高度 */
+.vux-tab-ink-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  text-align: center;
+  background-color: #1989fa;
+}
+.vux-tab-ink-bar-transition-forward {
+  transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1), left 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s;
+}
+.vux-tab-ink-bar-transition-backward {
+  transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s, left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+}
+.vux-tab-bar-top .vux-tab-ink-bar {
+  top: 0;
+}
+.vux-tab {
+  position: relative;
+  display: flex;
+  height: 36px;
+  background-color: #fff;
+}
+.vux-tab button {
+  padding: 0;
+  background: 0 0;
+  border: 0;
+  outline: 0;
+  appearance: none;
+}
+.vux-tab .vux-tab-item {
+  display: block;
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  color: #666;
+  font-size: 14px;
+  line-height: 36px;
+  text-align: center;
+  cursor: pointer;
+  /* background: linear-gradient(180deg, #e5e5e5, #e5e5e5, rgba(229, 229, 229, 0)) bottom left no-repeat; */
+  /* background-size: 100% 1px; */
+}
+.vux-tab .vux-tab-item.vux-tab-selected {
+  color: #1989fa;
+  border-bottom: 3px solid #1989fa;
+}
+.vux-tab-bar-top .vux-tab .vux-tab-item {
+  /* background: linear-gradient(180deg, #e5e5e5, #e5e5e5, rgba(229, 229, 229, 0)) top left no-repeat; */
+  /* background-size: 100% 1px; */
+}
+.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;
+}
+
+/** when=prop:custom-bar-width **/
+.vux-tab-bar-inner {
+  display: block;
+  height: 100%;
+  margin: auto;
+  background-color: #1989fa;
+  transition: width 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+}
+.vux-tab-item-badge {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: inline-block;
+  box-sizing: border-box;
+  min-width: 18px;
+  height: 18px;
+  margin: auto 0 auto 4px;
+  padding: 0 4px;
+  font-size: 11px;
+  line-height: 18px;
+  vertical-align: middle;
+  background-clip: padding-box;
+  border-radius: 30px;
+}
+.vux-tab-wrap {
+  position: relative;
+  padding-top: 36px;
+}
+.vux-tab-container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 36px;
+  overflow: hidden;
+}
+.scrollable {
+  box-sizing: content-box;
+  padding-bottom: 17px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+.scrollable::-webkit-scrollbar {
+  display: none;
+}
+.scrollable .vux-tab-ink-bar {
+  position: absolute;
+  bottom: 17px;
+}
+.scrollable .vux-tab-item {
+  flex: 0 0 22%;
+}

package/dist/components/tab-item/index.js

@@ -1,28 +1,31 @@
-import { c as n } from "../../chunks/8c0142e0.js";
-import { n as l } from "../../chunks/5d4282fb.js";
-var o = function() {
-  var e = this, t = e.$createElement, a = e._self._c || t;
-  return a("div", {
+import { c as childMixin } from "../../chunks/9d848bf6.js";
+import { n as normalizeComponent } from "../../chunks/3d28cc08.js";
+var render = function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
     staticClass: "vux-tab-item",
-    class: [e.currentSelected ? e.activeClass : "", {
-      "vux-tab-selected": e.currentSelected,
-      "vux-tab-disabled": e.disabled
+    class: [_vm.currentSelected ? _vm.activeClass : "", {
+      "vux-tab-selected": _vm.currentSelected,
+      "vux-tab-disabled": _vm.disabled
     }],
-    style: e.style,
+    style: _vm.style,
     on: {
-      click: e.onItemClick
+      "click": _vm.onItemClick
     }
-  }, [e._t("default"), typeof e.badgeLabel < "u" && e.badgeLabel !== "" ? a("span", {
+  }, [_vm._t("default"), typeof _vm.badgeLabel !== "undefined" && _vm.badgeLabel !== "" ? _c("span", {
     staticClass: "vux-tab-item-badge",
     style: {
-      background: e.badgeBackground,
-      color: e.badgeColor
+      background: _vm.badgeBackground,
+      color: _vm.badgeColor
     }
-  }, [e._v(" " + e._s(e.badgeLabel) + " ")]) : e._e()], 2);
-}, s = [];
-const i = {
+  }, [_vm._v(" " + _vm._s(_vm.badgeLabel) + " ")]) : _vm._e()], 2);
+};
+var staticRenderFns = [];
+const __vue2_script = {
   name: "TabItem",
-  mixins: [n],
+  mixins: [childMixin],
   props: {
     activeClass: {
       type: String
@@ -50,24 +53,26 @@ const i = {
       };
     }
   }
-}, r = {};
-var d = /* @__PURE__ */ l(
-  i,
-  o,
-  s,
-  !1,
-  c,
+};
+const __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  render,
+  staticRenderFns,
+  false,
+  __vue2_injectStyles,
   null,
   null,
   null
 );
-function c(e) {
-  for (let t in r)
-    this[t] = r[t];
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
 }
-const p = /* @__PURE__ */ function() {
-  return d.exports;
+const TabItem = /* @__PURE__ */ function() {
+  return __component__.exports;
 }();
 export {
-  p as default
+  TabItem as default
 };

package/dist/components/table-column/index.js

@@ -1,5 +1,5 @@
-import { n as o } from "../../chunks/5d4282fb.js";
-const i = {
+import { n as normalizeComponent } from "../../chunks/3d28cc08.js";
+const tableColumnProps = {
   props: {
     type: {
       type: String,
@@ -15,13 +15,13 @@ const i = {
     renderHeader: Function,
     sortable: {
       type: [Boolean, String],
-      default: !1
+      default: false
     },
     sortMethod: Function,
     sortBy: [String, Function, Array],
     resizable: {
       type: Boolean,
-      default: !0
+      default: true
     },
     columnKey: String,
     align: String,
@@ -29,7 +29,7 @@ const i = {
     showTooltipWhenOverflow: Boolean,
     showOverflowTooltip: {
       type: Boolean,
-      default: !0
+      default: true
     },
     fixed: [Boolean, String],
     formatter: Function,
@@ -41,7 +41,7 @@ const i = {
     filterPlacement: String,
     filterMultiple: {
       type: Boolean,
-      default: !0
+      default: true
     },
     index: [Number, Function],
     sortOrders: {
@@ -49,41 +49,43 @@ const i = {
       default() {
         return ["ascending", "descending", null];
       },
-      validator(n) {
-        return n.every((e) => ["ascending", "descending", null].indexOf(e) > -1);
+      validator(val) {
+        return val.every((order) => ["ascending", "descending", null].indexOf(order) > -1);
       }
     }
   }
-}, a = {
+};
+const __vue2_script = {
   name: "TableColumn",
-  functional: !0,
-  mixins: [i],
-  render(n, { data: e, props: t, children: r }) {
-    return n("ElTableColumn", {
-      ...e,
-      props: { ...t, showOverflowTooltip: ["selection", "single-selection", "index", "expand"].includes(t.type) ? !1 : t.showOverflowTooltip }
-    }, r);
+  functional: true,
+  mixins: [tableColumnProps],
+  render(createElement, { data, props, children }) {
+    return createElement("ElTableColumn", {
+      ...data,
+      props: { ...props, showOverflowTooltip: ["selection", "single-selection", "index", "expand"].includes(props.type) ? false : props.showOverflowTooltip }
+    }, children);
   }
 };
-let s, u;
-const l = {};
-var d = /* @__PURE__ */ o(
-  a,
-  s,
-  u,
-  !1,
-  c,
+let __vue2_render, __vue2_staticRenderFns;
+const __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  __vue2_script,
+  __vue2_render,
+  __vue2_staticRenderFns,
+  false,
+  __vue2_injectStyles,
   null,
   null,
   null
 );
-function c(n) {
-  for (let e in l)
-    this[e] = l[e];
+function __vue2_injectStyles(context) {
+  for (let o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
 }
-const p = /* @__PURE__ */ function() {
-  return d.exports;
+const TableColumn = /* @__PURE__ */ function() {
+  return __component__.exports;
 }();
 export {
-  p as default
+  TableColumn as default
 };