@varlet/ui 1.23.4-alpha.0 → 1.23.4-alpha.4

package/lib/tabs/tabs.less

@@ -0,0 +1,93 @@
+@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;
+
+:root {
+  --tabs-item-horizontal-height: @tabs-item-horizontal-height;
+  --tabs-item-vertical-height: @tabs-item-vertical-height;
+  --tabs-radius: @tabs-radius;
+  --tabs-padding: @tabs-padding;
+  --tabs-indicator-size: @tabs-indicator-size;
+  --tabs-indicator-background: @tabs-indicator-background;
+  --tabs-background: @tabs-background;
+}
+
+.var-tabs {
+  border-radius: var(--tabs-radius);
+  background: var(--tabs-background);
+  overflow: hidden;
+  transition: background-color 0.25s;
+
+  &__tab-wrap {
+    position: relative;
+    display: flex;
+    height: 100%;
+  }
+
+  &__indicator {
+    position: absolute;
+    z-index: 10;
+    transition-property: width, transform;
+    transition-duration: 0.3s;
+  }
+
+  &--layout-horizontal {
+    flex-direction: row;
+
+    &-scrollable {
+      overflow-x: auto;
+      overflow-y: hidden;
+    }
+
+    &-padding {
+      padding: 0 var(--tabs-padding);
+    }
+
+    &-indicator {
+      left: 0;
+      bottom: 0;
+      height: var(--tabs-indicator-size);
+      background: var(--tabs-indicator-background);
+    }
+  }
+
+  &--layout-vertical {
+    flex-direction: column;
+
+    &-scrollable {
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+
+    &-padding {
+      padding: 0;
+    }
+
+    &-indicator {
+      left: 0;
+      top: 0;
+      width: var(--tabs-indicator-size);
+      background: var(--tabs-indicator-background);
+    }
+  }
+
+  &--item-horizontal {
+    height: var(--tabs-item-horizontal-height);
+  }
+
+  &--item-vertical {
+    height: var(--tabs-item-vertical-height);
+  }
+
+  &--fixed-bottom {
+    position: fixed;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    z-index: 99;
+  }
+}

package/lib/tabs-items/TabsItems.js

@@ -0,0 +1,107 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _swipe = _interopRequireDefault(require("../swipe"));
+
+var _vue = require("vue");
+
+var _provide = require("./provide");
+
+var _props = require("./props");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function render(_ctx, _cache) {
+  var _component_var_swipe = (0, _vue.resolveComponent)("var-swipe");
+
+  return (0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_swipe, {
+    class: "var-tabs-items",
+    ref: "swipe",
+    loop: _ctx.loop,
+    touchable: _ctx.canSwipe,
+    indicator: false,
+    onChange: _ctx.handleSwipeChange
+  }, {
+    default: (0, _vue.withCtx)(() => [(0, _vue.renderSlot)(_ctx.$slots, "default")]),
+    _: 3
+    /* FORWARDED */
+
+  }, 8
+  /* PROPS */
+  , ["loop", "touchable", "onChange"]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarTabsItems',
+  components: {
+    VarSwipe: _swipe.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var swipe = (0, _vue.ref)(null);
+    var {
+      tabItemList,
+      bindTabItem,
+      length
+    } = (0, _provide.useTabItem)();
+
+    var matchName = active => {
+      return tabItemList.find(({
+        name
+      }) => active === name.value);
+    };
+
+    var matchIndex = active => {
+      return tabItemList.find(({
+        index
+      }) => active === index.value);
+    };
+
+    var matchActive = active => {
+      return matchName(active) || matchIndex(active);
+    };
+
+    var handleActiveChange = newValue => {
+      var _swipe$value;
+
+      var newActiveTabItemProvider = matchActive(newValue);
+
+      if (!newActiveTabItemProvider) {
+        return;
+      }
+
+      tabItemList.forEach(({
+        setCurrent
+      }) => setCurrent(false));
+      newActiveTabItemProvider.setCurrent(true);
+      (_swipe$value = swipe.value) == null ? void 0 : _swipe$value.to(newActiveTabItemProvider.index.value);
+    };
+
+    var handleSwipeChange = currentIndex => {
+      var _tabItem$name$value, _props$onUpdateActiv;
+
+      var tabItem = tabItemList.find(({
+        index
+      }) => index.value === currentIndex);
+      var active = (_tabItem$name$value = tabItem.name.value) != null ? _tabItem$name$value : tabItem.index.value;
+      (_props$onUpdateActiv = props['onUpdate:active']) == null ? void 0 : _props$onUpdateActiv.call(props, active);
+    };
+
+    var tabsItemsProvider = {};
+    bindTabItem(tabsItemsProvider);
+    (0, _vue.watch)(() => props.active, handleActiveChange);
+    (0, _vue.watch)(() => length.value, () => handleActiveChange(props.active));
+    return {
+      swipe,
+      handleSwipeChange
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/tabs-items/index.js

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

package/lib/tabs-items/props.js

@@ -0,0 +1,22 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  active: {
+    type: [String, Number],
+    default: 0
+  },
+  canSwipe: {
+    type: Boolean,
+    default: true
+  },
+  loop: {
+    type: Boolean,
+    default: false
+  },
+  'onUpdate:active': {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/tabs-items/provide.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useTabItem = useTabItem;
+exports.TABS_ITEMS_COUNT_TAB_ITEM_KEY = exports.TABS_ITEMS_BIND_TAB_ITEM_KEY = void 0;
+
+var _components = require("../utils/components");
+
+var TABS_ITEMS_BIND_TAB_ITEM_KEY = Symbol('TABS_ITEMS_BIND_TAB_ITEM_KEY');
+exports.TABS_ITEMS_BIND_TAB_ITEM_KEY = TABS_ITEMS_BIND_TAB_ITEM_KEY;
+var TABS_ITEMS_COUNT_TAB_ITEM_KEY = Symbol('TABS_ITEMS_COUNT_TAB_ITEM_KEY');
+exports.TABS_ITEMS_COUNT_TAB_ITEM_KEY = TABS_ITEMS_COUNT_TAB_ITEM_KEY;
+
+function useTabItem() {
+  var {
+    bindChildren,
+    childProviders
+  } = (0, _components.useChildren)(TABS_ITEMS_BIND_TAB_ITEM_KEY);
+  var {
+    length
+  } = (0, _components.useAtChildrenCounter)(TABS_ITEMS_COUNT_TAB_ITEM_KEY);
+  return {
+    length,
+    tabItemList: childProviders,
+    bindTabItem: bindChildren
+  };
+}

package/lib/tabs-items/style/index.js

@@ -0,0 +1,3 @@
+require('../../styles/common.css')
+require('../../swipe/swipe.css')
+require('../TabsItemsSfc.css')

package/lib/tabs-items/style/less.js

@@ -0,0 +1,3 @@
+require('../../styles/common.less')
+require('../../swipe/swipe.less')
+require('../TabsItemsSfc.less')

package/lib/themes/dark/actionSheet.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--action-sheet-background': '#1e1e1e',
+  '--action-sheet-title-color': '#aaa',
+  '--action-sheet-action-item-color': '#fff'
+};
+exports.default = _default;

package/lib/themes/dark/badge.js

@@ -0,0 +1,8 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--badge-default-color': '#555'
+};
+exports.default = _default;

package/lib/themes/dark/button.js

@@ -0,0 +1,8 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--button-default-color': '#303030'
+};
+exports.default = _default;

package/lib/themes/dark/card.js

@@ -0,0 +1,11 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--card-background': '#303030',
+  '--card-title-color': '#ffffff',
+  '--card-subtitle-color': '#aaaaaa',
+  '--card-description-color': '#aaaaaa'
+};
+exports.default = _default;

package/lib/themes/dark/cell.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--cell-desc-color': '#aaa',
+  '--cell-border-color': '#545454'
+};
+exports.default = _default;

package/lib/themes/dark/checkbox.js

@@ -0,0 +1,8 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--checkbox-unchecked-color': '#fff'
+};
+exports.default = _default;

package/lib/themes/dark/chip.js

@@ -0,0 +1,8 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--chip-default-color': '#555'
+};
+exports.default = _default;

package/lib/themes/dark/collapse.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--collapse-background': '#303030',
+  '--collapse-text-color': '#fff',
+  '--collapse-border-top': 'thin solid rgba(255, 255, 255, 0.12)'
+};
+exports.default = _default;

package/lib/themes/dark/datePicker.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--date-picker-main-color': '#fff',
+  '--date-picker-body-background-color': '#303030',
+  '--day-picker-head-item-color': '#aaaaaa'
+};
+exports.default = _default;

package/lib/themes/dark/dialog.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--dialog-background': '#1e1e1e',
+  '--dialog-message-color': '#bbb'
+};
+exports.default = _default;

package/lib/themes/dark/divider.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--divider-color': 'rgba(255, 255, 255, 0.2)',
+  '--divider-text-color': '#aaa'
+};
+exports.default = _default;

package/lib/themes/dark/index.js

@@ -0,0 +1,75 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _actionSheet = _interopRequireDefault(require("./actionSheet"));
+
+var _badge = _interopRequireDefault(require("./badge"));
+
+var _button = _interopRequireDefault(require("./button"));
+
+var _card = _interopRequireDefault(require("./card"));
+
+var _cell = _interopRequireDefault(require("./cell"));
+
+var _checkbox = _interopRequireDefault(require("./checkbox"));
+
+var _chip = _interopRequireDefault(require("./chip"));
+
+var _collapse = _interopRequireDefault(require("./collapse"));
+
+var _datePicker = _interopRequireDefault(require("./datePicker"));
+
+var _dialog = _interopRequireDefault(require("./dialog"));
+
+var _divider = _interopRequireDefault(require("./divider"));
+
+var _input = _interopRequireDefault(require("./input"));
+
+var _pagination = _interopRequireDefault(require("./pagination"));
+
+var _picker = _interopRequireDefault(require("./picker"));
+
+var _popup = _interopRequireDefault(require("./popup"));
+
+var _pullRefresh = _interopRequireDefault(require("./pullRefresh"));
+
+var _radio = _interopRequireDefault(require("./radio"));
+
+var _select = _interopRequireDefault(require("./select"));
+
+var _skeleton = _interopRequireDefault(require("./skeleton"));
+
+var _steps = _interopRequireDefault(require("./steps"));
+
+var _switch = _interopRequireDefault(require("./switch"));
+
+var _tab = _interopRequireDefault(require("./tab"));
+
+var _table = _interopRequireDefault(require("./table"));
+
+var _timePicker = _interopRequireDefault(require("./timePicker"));
+
+var _uploader = _interopRequireDefault(require("./uploader"));
+
+var _tabs = _interopRequireDefault(require("./tabs"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var _default = _extends({
+  // common
+  '--color-body': '#1e1e1e',
+  '--color-text': '#fff',
+  '--color-primary': '#4a7afe',
+  '--color-info': '#10afef',
+  '--color-success': '#10c48f',
+  '--color-warning': '#ff8800',
+  '--color-danger': '#ef5350',
+  '--color-disabled': '#404040',
+  '--color-text-disabled': '#757575'
+}, _button.default, _cell.default, _card.default, _timePicker.default, _datePicker.default, _skeleton.default, _tabs.default, _tab.default, _popup.default, _dialog.default, _actionSheet.default, _chip.default, _badge.default, _uploader.default, _collapse.default, _pullRefresh.default, _switch.default, _steps.default, _pagination.default, _table.default, _input.default, _select.default, _radio.default, _checkbox.default, _divider.default, _picker.default);
+
+exports.default = _default;

package/lib/themes/dark/input.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--input-input-text-color': '#fff',
+  '--input-blur-color': 'rgb(255, 255, 255, .7)'
+};
+exports.default = _default;

package/lib/themes/dark/pagination.js

@@ -0,0 +1,12 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--pagination-list-bg-color': '#303030',
+  '--pagination-hover-bg-color': '#25293a',
+  '--pagination-list-active-bg-color': '#25293a',
+  '--pagination-list-active-color': '#4a7afe',
+  '--pagination-item-background': '#303030'
+};
+exports.default = _default;

package/lib/themes/dark/picker.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--picker-background': '#1e1e1e',
+  '--picker-cancel-button-text-color': '#aaa',
+  '--picker-picked-border': '1px solid rgba(255, 255, 255, 0.12)'
+};
+exports.default = _default;

package/lib/themes/dark/popup.js

@@ -0,0 +1,8 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--popup-content-background-color': '#1e1e1e'
+};
+exports.default = _default;

package/lib/themes/dark/pullRefresh.js

@@ -0,0 +1,8 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--pull-refresh-background': '#303030'
+};
+exports.default = _default;

package/lib/themes/dark/radio.js

@@ -0,0 +1,8 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--radio-unchecked-color': '#fff'
+};
+exports.default = _default;

package/lib/themes/dark/select.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--select-select-text-color': '#fff',
+  '--select-blur-color': 'rgb(255, 255, 255, .7)',
+  '--select-scroller-background': '#303030'
+};
+exports.default = _default;

package/lib/themes/dark/skeleton.js

@@ -0,0 +1,11 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--skeleton-card-background-color': 'hsla(0,0%,100%,.12)',
+  '--skeleton-animation-background': "linear-gradient(\n        90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.05),hsla(0,0%,100%,0))\n      ",
+  '--skeleton-avatar-background-color': 'hsla(0,0%,100%,.12)',
+  '--skeleton-title-background-color': 'hsla(0,0%,100%,.12)'
+};
+exports.default = _default;

package/lib/themes/dark/steps.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--step-content-color': 'rgba(255, 255, 255, .38)',
+  '--step-content-active-color': '#fff',
+  '--step-line-background': '#fff'
+};
+exports.default = _default;

package/lib/themes/dark/switch.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--switch-track-background': '#727272',
+  '--switch-handle-background': '#727272'
+};
+exports.default = _default;

package/lib/themes/dark/tab-item.js

@@ -0,0 +1,8 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--tab-item-content-color': '#aaa'
+};
+exports.default = _default;

package/lib/themes/dark/tab.js

@@ -0,0 +1,8 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--tab-inactive-color': 'rgba(255, 255, 255, .65)'
+};
+exports.default = _default;

package/lib/themes/dark/table.js

@@ -0,0 +1,12 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--table-background': '#303030',
+  '--table-thead-th-text-color': 'rgba(255, 255, 255, 0.6)',
+  '--table-tbody-tr-hover-background': '#4c4b4b',
+  '--table-thead-border-bottom': 'thin solid rgba(255, 255, 255, 0.12)',
+  '--table-tbody-tr-border-bottom': 'thin solid rgba(255, 255, 255, 0.12)'
+};
+exports.default = _default;

package/lib/themes/dark/tabs.js

@@ -0,0 +1,8 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--tabs-background': '#1e1e1e'
+};
+exports.default = _default;

package/lib/themes/dark/timePicker.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--time-picker-clock-container-background': '#545454',
+  '--time-picker-body-background': '#403f3f',
+  '--time-picker-clock-item-disable-color': '#aaaaaa'
+};
+exports.default = _default;

package/lib/themes/dark/uploader.js

@@ -0,0 +1,12 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  '--uploader-action-background': '#303030',
+  '--uploader-action-icon-color': '#fff',
+  '--uploader-file-name-background': '#303030',
+  '--uploader-file-name-color': '#aaa',
+  '--uploader-file-cover-background': '#303030'
+};
+exports.default = _default;