@varlet/ui 1.23.4-alpha.8 → 1.23.4

package/lib/tab-item/index.js

@@ -1,17 +0,0 @@
-"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

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

package/lib/tab-item/provide.js

@@ -1,28 +0,0 @@
-"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

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

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

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

package/lib/tab-item/tabItem.css

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

package/lib/tab-item/tabItem.less

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

package/lib/table/Table.js

@@ -1,53 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-"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

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

package/lib/table/style/less.js

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

package/lib/table/table.css

@@ -1 +0,0 @@
-: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

@@ -1,110 +0,0 @@
-@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

@@ -1,208 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-"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

@@ -1,70 +0,0 @@
-"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

@@ -1,27 +0,0 @@
-"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

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

package/lib/tabs/style/less.js

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

package/lib/tabs/tabs.css

@@ -1 +0,0 @@
-: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;}