@varlet/ui 1.23.4 → 1.23.5

package/lib/tab-item/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports._TabItemComponent = void 0;
+
+var _TabItem = _interopRequireDefault(require("./TabItem.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_TabItem.default.install = function (app) {
+  app.component(_TabItem.default.name, _TabItem.default);
+};
+
+var _TabItemComponent = _TabItem.default;
+exports._TabItemComponent = _TabItemComponent;
+var _default = _TabItem.default;
+exports.default = _default;

package/lib/tab-item/props.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  name: {
+    type: [String, Number]
+  }
+};
+exports.props = props;

package/lib/tab-item/provide.js

@@ -0,0 +1,28 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useTabsItems = useTabsItems;
+
+var _components = require("../utils/components");
+
+var _provide = require("../tabs-items/provide");
+
+function useTabsItems() {
+  var {
+    parentProvider,
+    bindParent
+  } = (0, _components.useParent)(_provide.TABS_ITEMS_BIND_TAB_ITEM_KEY);
+  var {
+    index
+  } = (0, _components.useAtParentIndex)(_provide.TABS_ITEMS_COUNT_TAB_ITEM_KEY);
+
+  if (!parentProvider || !bindParent || !index) {
+    throw Error('<var-tab-item/> must in <var-tabs-items/>');
+  }
+
+  return {
+    index,
+    tabsItems: parentProvider,
+    bindTabsItems: bindParent
+  };
+}

package/lib/tab-item/style/index.js

@@ -0,0 +1,4 @@
+require('../../styles/common.css')
+require('../../swipe-item/swipeItem.css')
+require('../tabItem.css')
+require('../TabItemSfc.css')

package/lib/tab-item/style/less.js

@@ -0,0 +1,4 @@
+require('../../styles/common.less')
+require('../../swipe-item/swipeItem.less')
+require('../tabItem.less')
+require('../TabItemSfc.less')

package/lib/tab-item/tabItem.css

@@ -0,0 +1 @@
+.var-tab-item--inactive[var-tab-item-cover] { overflow: visible; height: 0;}

package/lib/tab-item/tabItem.less

@@ -0,0 +1,6 @@
+.var-tab-item {
+  &--inactive[var-tab-item-cover] {
+    overflow: visible;
+    height: 0;
+  }
+}

package/lib/table/Table.js

@@ -0,0 +1,53 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _elements = require("../utils/elements");
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  class: "var-table var-elevation--1 var--box"
+};
+var _hoisted_2 = {
+  class: "var-table__main"
+};
+var _hoisted_3 = {
+  key: 0,
+  class: "var-table__footer"
+};
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", _hoisted_2, [(0, _vue.createElementVNode)("table", {
+    class: "var-table__table",
+    style: (0, _vue.normalizeStyle)({
+      width: _ctx.toSizeUnit(_ctx.fullWidth)
+    })
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 4
+  /* STYLE */
+  )]), _ctx.$slots.footer ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_3, [(0, _vue.renderSlot)(_ctx.$slots, "footer")])) : (0, _vue.createCommentVNode)("v-if", true)]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarTable',
+  props: {
+    fullWidth: {
+      type: [Number, String],
+      default: '100%'
+    }
+  },
+
+  setup() {
+    return {
+      toSizeUnit: _elements.toSizeUnit
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/table/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports._TableComponent = void 0;
+
+var _Table = _interopRequireDefault(require("./Table.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_Table.default.install = function (app) {
+  app.component(_Table.default.name, _Table.default);
+};
+
+var _TableComponent = _Table.default;
+exports._TableComponent = _TableComponent;
+var _default = _Table.default;
+exports.default = _default;

package/lib/table/style/index.js

@@ -0,0 +1,4 @@
+require('../../styles/common.css')
+require('../../styles/elevation.css')
+require('../table.css')
+require('../TableSfc.css')

package/lib/table/style/less.js

@@ -0,0 +1,4 @@
+require('../../styles/common.less')
+require('../../styles/elevation.less')
+require('../table.less')
+require('../TableSfc.less')

package/lib/table/table.css

@@ -0,0 +1 @@
+:root { --table-background: #fff; --table-border-radius: 2px; --table-thead-border-bottom: thin solid rgba(0, 0, 0, 0.12); --table-thead-th-text-color: rgba(0, 0, 0, 0.6); --table-thead-th-font-size: 14px; --table-thead-tr-border-bottom: thin solid rgba(0, 0, 0, 0.12); --table-tbody-tr-hover-background: #eee; --table-tbody-tr-border-bottom: thin solid rgba(0, 0, 0, 0.12); --table-tbody-td-font-size: 16px; --table-row-height: 46px; --table-row-padding: 0 16px; --table-footer-border-top: thin solid rgba(0, 0, 0, 0.12);}.var-table { width: 100%; background: var(--table-background); border-radius: var(--table-border-radius); transition: 0.25s background-color;}.var-table * { box-sizing: border-box;}.var-table__main { width: 100%; overflow-x: auto;}.var-table__main > table { min-width: 100%; display: table; border-spacing: 0; border-collapse: collapse; line-height: normal;}.var-table__main > table thead { display: table-header-group; border-bottom: var(--table-thead-border-bottom);}.var-table__main > table thead tr th { color: var(--table-thead-th-text-color); font-size: var(--table-thead-th-font-size);}.var-table__main > table thead tr:not(:last-child) { border-bottom: var(--table-thead-tr-border-bottom);}.var-table__main > table tbody { display: table-row-group;}.var-table__main > table tbody tr { display: table-row; outline: 0; vertical-align: middle;}.var-table__main > table tbody tr:hover { background: var(--table-tbody-tr-hover-background);}.var-table__main > table tbody tr:not(:last-child) { border-bottom: var(--table-tbody-tr-border-bottom);}.var-table__main > table tbody td { font-size: var(--table-tbody-td-font-size);}.var-table__main > table th { display: table-cell; height: var(--table-row-height); padding: var(--table-row-padding); font-weight: 500; text-align: left;}.var-table__main > table td { display: table-cell; padding: var(--table-row-padding); height: var(--table-row-height); text-align: left;}.var-table__footer { width: 100%; min-height: var(--table-row-height); border-top: var(--table-footer-border-top);}

package/lib/table/table.less

@@ -0,0 +1,110 @@
+@table-background: #fff;
+@table-border-radius: 2px;
+@table-thead-border-bottom: thin solid rgba(0, 0, 0, 0.12);
+@table-thead-th-text-color: rgba(0, 0, 0, 0.6);
+@table-thead-th-font-size: 14px;
+@table-thead-tr-border-bottom: thin solid rgba(0, 0, 0, 0.12);
+@table-tbody-tr-hover-background: #eee;
+@table-tbody-tr-border-bottom: thin solid rgba(0, 0, 0, 0.12);
+@table-tbody-td-font-size: 16px;
+@table-row-height: 46px;
+@table-row-padding: 0 16px;
+@table-footer-border-top: thin solid rgba(0, 0, 0, 0.12);
+
+:root {
+  --table-background: @table-background;
+  --table-border-radius: @table-border-radius;
+  --table-thead-border-bottom: @table-thead-border-bottom;
+  --table-thead-th-text-color: @table-thead-th-text-color;
+  --table-thead-th-font-size: @table-thead-th-font-size;
+  --table-thead-tr-border-bottom: @table-thead-tr-border-bottom;
+  --table-tbody-tr-hover-background: @table-tbody-tr-hover-background;
+  --table-tbody-tr-border-bottom: @table-tbody-tr-border-bottom;
+  --table-tbody-td-font-size: @table-tbody-td-font-size;
+  --table-row-height: @table-row-height;
+  --table-row-padding: @table-row-padding;
+  --table-footer-border-top: @table-footer-border-top;
+}
+
+.var-table {
+  width: 100%;
+  background: var(--table-background);
+  border-radius: var(--table-border-radius);
+  transition: 0.25s background-color;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  &__main {
+    width: 100%;
+    overflow-x: auto;
+
+    > table {
+      min-width: 100%;
+      display: table;
+      border-spacing: 0;
+      border-collapse: collapse;
+      line-height: normal;
+
+      thead {
+        display: table-header-group;
+        border-bottom: var(--table-thead-border-bottom);
+
+        tr {
+          th {
+            color: var(--table-thead-th-text-color);
+            font-size: var(--table-thead-th-font-size);
+          }
+
+          &:not(:last-child) {
+            border-bottom: var(--table-thead-tr-border-bottom);
+          }
+        }
+      }
+
+      tbody {
+        display: table-row-group;
+
+        tr {
+          display: table-row;
+          outline: 0;
+          vertical-align: middle;
+
+          &:hover {
+            background: var(--table-tbody-tr-hover-background);
+          }
+
+          &:not(:last-child) {
+            border-bottom: var(--table-tbody-tr-border-bottom);
+          }
+        }
+
+        td {
+          font-size: var(--table-tbody-td-font-size);
+        }
+      }
+
+      th {
+        display: table-cell;
+        height: var(--table-row-height);
+        padding: var(--table-row-padding);
+        font-weight: 500;
+        text-align: left;
+      }
+
+      td {
+        display: table-cell;
+        padding: var(--table-row-padding);
+        height: var(--table-row-height);
+        text-align: left;
+      }
+    }
+  }
+
+  &__footer {
+    width: 100%;
+    min-height: var(--table-row-height);
+    border-top: var(--table-footer-border-top);
+  }
+}

package/lib/tabs/Tabs.js

@@ -0,0 +1,208 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _sticky = _interopRequireDefault(require("../sticky"));
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _provide = require("./provide");
+
+var _shared = require("../utils/shared");
+
+var _elements = require("../utils/elements");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createBlock)((0, _vue.resolveDynamicComponent)(_ctx.sticky ? 'var-sticky' : _ctx.Transition), {
+    "offset-top": _ctx.sticky ? _ctx.offsetTop : null
+  }, {
+    default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", (0, _vue.mergeProps)({
+      class: ["var-tabs var--box", ["var-tabs--item-" + _ctx.itemDirection, "var-tabs--layout-" + _ctx.layoutDirection + "-padding", _ctx.elevation ? "var-elevation--4" : null, _ctx.fixedBottom ? 'var-tabs--fixed-bottom' : null]],
+      style: {
+        background: _ctx.color
+      }
+    }, _ctx.$attrs), [(0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(["var-tabs__tab-wrap", [_ctx.scrollable ? "var-tabs--layout-" + _ctx.layoutDirection + "-scrollable" : null, "var-tabs--layout-" + _ctx.layoutDirection]]),
+      ref: "scrollerEl"
+    }, [(0, _vue.renderSlot)(_ctx.$slots, "default"), (0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(["var-tabs__indicator", ["var-tabs--layout-" + _ctx.layoutDirection + "-indicator"]]),
+      style: (0, _vue.normalizeStyle)({
+        width: _ctx.layoutDirection === 'horizontal' ? _ctx.indicatorWidth : _ctx.toSizeUnit(_ctx.indicatorSize),
+        height: _ctx.layoutDirection === 'horizontal' ? _ctx.toSizeUnit(_ctx.indicatorSize) : _ctx.indicatorHeight,
+        transform: _ctx.layoutDirection === 'horizontal' ? "translateX(" + _ctx.indicatorX + ")" : "translateY(" + _ctx.indicatorY + ")",
+        background: _ctx.indicatorColor || _ctx.activeColor
+      })
+    }, null, 6
+    /* CLASS, STYLE */
+    )], 2
+    /* CLASS */
+    )], 16
+    /* FULL_PROPS */
+    )]),
+    _: 3
+    /* FORWARDED */
+
+  }, 8
+  /* PROPS */
+  , ["offset-top"]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarTabs',
+  components: {
+    VarSticky: _sticky.default
+  },
+  inheritAttrs: false,
+  props: _props.props,
+
+  setup(props) {
+    var indicatorWidth = (0, _vue.ref)('0px');
+    var indicatorHeight = (0, _vue.ref)('0px');
+    var indicatorX = (0, _vue.ref)('0px');
+    var indicatorY = (0, _vue.ref)('0px');
+    var scrollable = (0, _vue.ref)(false);
+    var scrollerEl = (0, _vue.ref)(null);
+    var active = (0, _vue.computed)(() => props.active);
+    var activeColor = (0, _vue.computed)(() => props.activeColor);
+    var inactiveColor = (0, _vue.computed)(() => props.inactiveColor);
+    var disabledColor = (0, _vue.computed)(() => props.disabledColor);
+    var itemDirection = (0, _vue.computed)(() => props.itemDirection);
+    var {
+      tabList,
+      bindTabList,
+      length
+    } = (0, _provide.useTabList)();
+
+    var onTabClick = tab => {
+      var _tab$name$value, _props$onUpdateActiv;
+
+      var currentActive = (_tab$name$value = tab.name.value) != null ? _tab$name$value : tab.index.value;
+      var {
+        active,
+        onChange,
+        onClick
+      } = props;
+      (_props$onUpdateActiv = props['onUpdate:active']) == null ? void 0 : _props$onUpdateActiv.call(props, currentActive);
+      onClick == null ? void 0 : onClick(currentActive);
+      currentActive !== active && (onChange == null ? void 0 : onChange(currentActive));
+    };
+
+    var matchName = () => {
+      return tabList.find(({
+        name
+      }) => props.active === name.value);
+    };
+
+    var matchIndex = () => {
+      return tabList.find(({
+        index
+      }) => props.active === index.value);
+    };
+
+    var matchBoundary = () => {
+      var _props$onUpdateActiv2, _props$onUpdateActiv3;
+
+      if (length.value === 0) {
+        return;
+      }
+
+      var {
+        active
+      } = props;
+      (0, _shared.isNumber)(active) ? active > length.value - 1 ? (_props$onUpdateActiv2 = props['onUpdate:active']) == null ? void 0 : _props$onUpdateActiv2.call(props, length.value - 1) : (_props$onUpdateActiv3 = props['onUpdate:active']) == null ? void 0 : _props$onUpdateActiv3.call(props, 0) : null;
+      return matchIndex();
+    };
+
+    var watchScrollable = () => {
+      scrollable.value = tabList.length >= 5;
+    };
+
+    var moveIndicator = ({
+      element
+    }) => {
+      var el = element.value;
+
+      if (props.layoutDirection === 'horizontal') {
+        indicatorWidth.value = (el == null ? void 0 : el.offsetWidth) + "px";
+        indicatorX.value = (el == null ? void 0 : el.offsetLeft) + "px";
+      } else {
+        indicatorHeight.value = (el == null ? void 0 : el.offsetHeight) + "px";
+        indicatorY.value = (el == null ? void 0 : el.offsetTop) + "px";
+      }
+    };
+
+    var scrollToCenter = ({
+      element
+    }) => {
+      if (!scrollable.value) {
+        return;
+      }
+
+      var scroller = scrollerEl.value;
+      var el = element.value;
+
+      if (props.layoutDirection === 'horizontal') {
+        var left = el.offsetLeft + el.offsetWidth / 2 - scroller.offsetWidth / 2;
+        (0, _elements.scrollTo)(scroller, {
+          left,
+          animation: _shared.linear
+        });
+      } else {
+        var top = el.offsetTop + el.offsetHeight / 2 - scroller.offsetHeight / 2;
+        (0, _elements.scrollTo)(scroller, {
+          top,
+          animation: _shared.linear
+        });
+      }
+    }; // expose
+
+
+    var resize = () => {
+      var tab = matchName() || matchIndex() || matchBoundary();
+
+      if (!tab || tab.disabled.value) {
+        return;
+      }
+
+      watchScrollable();
+      moveIndicator(tab);
+      scrollToCenter(tab);
+    };
+
+    var tabsProvider = {
+      active,
+      activeColor,
+      inactiveColor,
+      disabledColor,
+      itemDirection,
+      resize,
+      onTabClick
+    };
+    bindTabList(tabsProvider);
+    (0, _vue.watch)(() => length.value, () => (0, _vue.nextTick)().then(resize));
+    (0, _vue.watch)(() => props.active, resize);
+    (0, _vue.onMounted)(() => window.addEventListener('resize', resize));
+    (0, _vue.onUnmounted)(() => window.removeEventListener('resize', resize));
+    return {
+      indicatorWidth,
+      indicatorHeight,
+      indicatorX,
+      indicatorY,
+      scrollable,
+      scrollerEl,
+      Transition: _vue.Transition,
+      toSizeUnit: _elements.toSizeUnit,
+      resize
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/tabs/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports._TabsComponent = void 0;
+
+var _Tabs = _interopRequireDefault(require("./Tabs.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_Tabs.default.install = function (app) {
+  app.component(_Tabs.default.name, _Tabs.default);
+};
+
+var _TabsComponent = _Tabs.default;
+exports._TabsComponent = _TabsComponent;
+var _default = _Tabs.default;
+exports.default = _default;

package/lib/tabs/props.js

@@ -0,0 +1,70 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+
+var _components = require("../utils/components");
+
+var _props = require("../sticky/props");
+
+function directionValidator(direction) {
+  return ['horizontal', 'vertical'].includes(direction);
+}
+
+var props = {
+  active: {
+    type: [String, Number],
+    default: 0
+  },
+  layoutDirection: {
+    type: String,
+    default: 'horizontal',
+    validator: directionValidator
+  },
+  itemDirection: {
+    type: String,
+    default: 'horizontal',
+    validator: directionValidator
+  },
+  fixedBottom: {
+    type: Boolean,
+    default: false
+  },
+  activeColor: {
+    type: String
+  },
+  inactiveColor: {
+    type: String
+  },
+  disabledColor: {
+    type: String
+  },
+  color: {
+    type: String
+  },
+  indicatorColor: {
+    type: String
+  },
+  indicatorSize: {
+    type: [String, Number]
+  },
+  elevation: {
+    type: Boolean,
+    default: false
+  },
+  sticky: {
+    type: Boolean,
+    default: false
+  },
+  offsetTop: (0, _components.pickProps)(_props.props, 'offsetTop'),
+  onClick: {
+    type: Function
+  },
+  onChange: {
+    type: Function
+  },
+  'onUpdate:active': {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/tabs/provide.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useTabList = useTabList;
+exports.TABS_COUNT_TAB_KEY = exports.TABS_BIND_TAB_KEY = void 0;
+
+var _components = require("../utils/components");
+
+var TABS_BIND_TAB_KEY = Symbol('TABS_BIND_TAB_KEY');
+exports.TABS_BIND_TAB_KEY = TABS_BIND_TAB_KEY;
+var TABS_COUNT_TAB_KEY = Symbol('TABS_COUNT_TAB_KEY');
+exports.TABS_COUNT_TAB_KEY = TABS_COUNT_TAB_KEY;
+
+function useTabList() {
+  var {
+    childProviders,
+    bindChildren
+  } = (0, _components.useChildren)(TABS_BIND_TAB_KEY);
+  var {
+    length
+  } = (0, _components.useAtChildrenCounter)(TABS_COUNT_TAB_KEY);
+  return {
+    length,
+    tabList: childProviders,
+    bindTabList: bindChildren
+  };
+}

package/lib/tabs/style/index.js

@@ -0,0 +1,5 @@
+require('../../styles/common.css')
+require('../../styles/elevation.css')
+require('../../sticky/sticky.css')
+require('../tabs.css')
+require('../TabsSfc.css')

package/lib/tabs/style/less.js

@@ -0,0 +1,5 @@
+require('../../styles/common.less')
+require('../../styles/elevation.less')
+require('../../sticky/sticky.less')
+require('../tabs.less')
+require('../TabsSfc.less')

package/lib/tabs/tabs.css

@@ -0,0 +1 @@
+:root { --tabs-item-horizontal-height: 44px; --tabs-item-vertical-height: 66px; --tabs-radius: 2px; --tabs-padding: 12px; --tabs-indicator-size: 2px; --tabs-indicator-background: var(--color-primary); --tabs-background: #fff;}.var-tabs { border-radius: var(--tabs-radius); background: var(--tabs-background); overflow: hidden; transition: background-color 0.25s;}.var-tabs__tab-wrap { position: relative; display: flex; height: 100%;}.var-tabs__indicator { position: absolute; z-index: 10; transition-property: width, transform; transition-duration: 0.3s;}.var-tabs--layout-horizontal { flex-direction: row;}.var-tabs--layout-horizontal-scrollable { overflow-x: auto; overflow-y: hidden;}.var-tabs--layout-horizontal-padding { padding: 0 var(--tabs-padding);}.var-tabs--layout-horizontal-indicator { left: 0; bottom: 0; height: var(--tabs-indicator-size); background: var(--tabs-indicator-background);}.var-tabs--layout-vertical { flex-direction: column;}.var-tabs--layout-vertical-scrollable { overflow-x: hidden; overflow-y: auto;}.var-tabs--layout-vertical-padding { padding: 0;}.var-tabs--layout-vertical-indicator { left: 0; top: 0; width: var(--tabs-indicator-size); background: var(--tabs-indicator-background);}.var-tabs--item-horizontal { height: var(--tabs-item-horizontal-height);}.var-tabs--item-vertical { height: var(--tabs-item-vertical-height);}.var-tabs--fixed-bottom { position: fixed; width: 100%; left: 0; bottom: 0; z-index: 99;}