@varlet/ui 1.23.3 → 1.23.4-alpha.3

package/lib/index-anchor/props.js

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

package/lib/index-anchor/provide.js

@@ -0,0 +1,28 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useIndexBar = useIndexBar;
+
+var _components = require("../utils/components");
+
+var _provide = require("../index-bar/provide");
+
+function useIndexBar() {
+  var {
+    parentProvider,
+    bindParent
+  } = (0, _components.useParent)(_provide.INDEX_BAR_BIND_INDEX_ANCHOR_KEY);
+  var {
+    index
+  } = (0, _components.useAtParentIndex)(_provide.INDEX_BAR_COUNT_INDEX_ANCHOR_KEY);
+
+  if (!parentProvider || !bindParent) {
+    throw Error('[Varlet] IndexAnchor: You should use this component in "IndexBar"');
+  }
+
+  return {
+    index,
+    indexBar: parentProvider,
+    bindIndexBar: bindParent
+  };
+}

package/lib/index-anchor/style/index.js

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

package/lib/index-anchor/style/less.js

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

package/lib/index-bar/IndexBar.js

@@ -0,0 +1,186 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _shared = require("../utils/shared");
+
+var _elements = require("../utils/elements");
+
+var _provide = require("./provide");
+
+var _props = require("./props");
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  class: "var-index-bar",
+  ref: "barEl"
+};
+var _hoisted_2 = ["onClick"];
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "default"), (0, _vue.createElementVNode)("ul", {
+    class: "var-index-bar__anchor-list",
+    style: (0, _vue.normalizeStyle)({
+      zIndex: _ctx.toNumber(_ctx.zIndex) + 2,
+      display: _ctx.hideList ? 'none' : 'block'
+    })
+  }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.anchorNameList, anchorName => {
+    return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
+      key: anchorName,
+      class: (0, _vue.normalizeClass)(["var-index-bar__anchor-item", {
+        'var-index-bar__anchor-item--active': _ctx.active === anchorName
+      }]),
+      style: (0, _vue.normalizeStyle)({
+        color: _ctx.active === anchorName && _ctx.highlightColor ? _ctx.highlightColor : ''
+      }),
+      onClick: $event => _ctx.anchorClick(anchorName)
+    }, (0, _vue.toDisplayString)(anchorName), 15
+    /* TEXT, CLASS, STYLE, PROPS */
+    , _hoisted_2);
+  }), 128
+  /* KEYED_FRAGMENT */
+  ))], 4
+  /* STYLE */
+  )], 512
+  /* NEED_PATCH */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarIndexBar',
+  props: _props.props,
+
+  setup(props) {
+    var {
+      length,
+      indexAnchors,
+      bindIndexAnchors
+    } = (0, _provide.useIndexAnchors)();
+    var scrollEl = (0, _vue.ref)(null);
+    var clickedName = (0, _vue.ref)('');
+    var scroller = (0, _vue.ref)(null);
+    var barEl = (0, _vue.ref)(null);
+    var anchorNameList = (0, _vue.ref)([]);
+    var active = (0, _vue.ref)();
+    var sticky = (0, _vue.computed)(() => props.sticky);
+    var cssMode = (0, _vue.computed)(() => props.cssMode);
+    var stickyOffsetTop = (0, _vue.computed)(() => props.stickyOffsetTop);
+    var zIndex = (0, _vue.computed)(() => props.zIndex);
+    var indexBarProvider = {
+      active,
+      sticky,
+      cssMode,
+      stickyOffsetTop,
+      zIndex
+    };
+    bindIndexAnchors(indexBarProvider);
+
+    var emitEvent = anchor => {
+      var anchorName = (0, _shared.isPlainObject)(anchor) ? anchor.name.value : anchor;
+      if (anchorName === active.value) return;
+      active.value = anchorName;
+      props.onChange == null ? void 0 : props.onChange(anchorName);
+    };
+
+    var handleScroll = () => {
+      var {
+        scrollTop,
+        scrollHeight
+      } = scrollEl.value;
+      var {
+        offsetTop
+      } = barEl.value;
+      indexAnchors.forEach((anchor, index) => {
+        var anchorTop = anchor.ownTop.value;
+        var top = scrollTop - anchorTop + stickyOffsetTop.value - offsetTop;
+        var distance = index === indexAnchors.length - 1 ? scrollHeight : indexAnchors[index + 1].ownTop.value - anchor.ownTop.value;
+
+        if (top >= 0 && top < distance && !clickedName.value) {
+          if (index && !props.cssMode) {
+            indexAnchors[index - 1].setDisabled(true);
+          }
+
+          anchor.setDisabled(false);
+          emitEvent(anchor);
+        }
+      });
+    };
+
+    var anchorClick = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator(function* (anchorName, manualCall) {
+        if (manualCall) props.onClick == null ? void 0 : props.onClick(anchorName);
+        if (anchorName === active.value) return;
+        var indexAnchor = indexAnchors.find(({
+          name
+        }) => anchorName === name.value);
+        if (!indexAnchor) return;
+        var top = indexAnchor.ownTop.value;
+        var left = (0, _elements.getScrollLeft)(scrollEl.value);
+        clickedName.value = anchorName;
+        emitEvent(anchorName);
+        yield (0, _elements.scrollTo)(scrollEl.value, {
+          left,
+          top,
+          animation: _shared.easeInOutCubic,
+          duration: (0, _shared.toNumber)(props.duration)
+        });
+        (0, _elements.nextTickFrame)(() => {
+          clickedName.value = '';
+        });
+      });
+
+      return function anchorClick(_x, _x2) {
+        return _ref.apply(this, arguments);
+      };
+    }(); // expose
+
+
+    var scrollTo = index => {
+      (0, _elements.requestAnimationFrame)(() => anchorClick(index, true));
+    };
+
+    (0, _vue.watch)(() => length.value, () => (0, _vue.nextTick)(() => {
+      indexAnchors.forEach(({
+        name,
+        setOwnTop
+      }) => {
+        if (name.value) anchorNameList.value.push(name.value);
+        setOwnTop();
+      });
+    }));
+    (0, _vue.onMounted)(() => {
+      var _scroller$value;
+
+      scroller.value = (0, _elements.getParentScroller)(barEl.value);
+      scrollEl.value = scroller.value === window ? scroller.value.document.documentElement : scroller.value;
+      (_scroller$value = scroller.value) == null ? void 0 : _scroller$value.addEventListener('scroll', handleScroll);
+    });
+    (0, _vue.onBeforeUnmount)(() => {
+      var _scroller$value2;
+
+      (_scroller$value2 = scroller.value) == null ? void 0 : _scroller$value2.removeEventListener('scroll', handleScroll);
+    });
+    return {
+      barEl,
+      active,
+      zIndex,
+      anchorNameList,
+      toNumber: _shared.toNumber,
+      scrollTo,
+      anchorClick
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/index-bar/index.js

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

package/lib/index-bar/indexBar.css

@@ -0,0 +1 @@
+:root { --index-bar-list-item-font-size: var(--font-size-xs); --index-bar-list-item-color: var(--color-primary); --index-bar-list-item-active-color: var(--color-danger); --index-bar-list-item-height: 14px; --index-bar-list-item-padding: 0 10px;}.var-index-bar { position: relative;}.var-index-bar__anchor-list { position: fixed; right: 0; top: 50%; transform: translate(0, -50%); list-style: none; padding: 0; margin: 0;}.var-index-bar__anchor-item { font-size: var(--index-bar-list-item-font-size); display: flex; align-items: center; height: var(--index-bar-list-item-height); justify-content: center; padding: var(--index-bar-list-item-padding); color: var(--index-bar-list-item-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-index-bar__anchor-item--active { color: var(--index-bar-list-item-active-color);}

package/lib/index-bar/indexBar.less

@@ -0,0 +1,43 @@
+@index-bar-list-item-font-size: var(--font-size-xs);
+@index-bar-list-item-color: var(--color-primary);
+@index-bar-list-item-active-color: var(--color-danger);
+@index-bar-list-item-height: 14px;
+@index-bar-list-item-padding: 0 10px;
+
+:root {
+  --index-bar-list-item-font-size: @index-bar-list-item-font-size;
+  --index-bar-list-item-color: @index-bar-list-item-color;
+  --index-bar-list-item-active-color: @index-bar-list-item-active-color;
+  --index-bar-list-item-height: @index-bar-list-item-height;
+  --index-bar-list-item-padding: @index-bar-list-item-padding;
+}
+
+.var-index-bar {
+  position: relative;
+
+  &__anchor-list {
+    position: fixed;
+    right: 0;
+    top: 50%;
+    transform: translate(0, -50%);
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  &__anchor-item {
+    font-size: var(--index-bar-list-item-font-size);
+    display: flex;
+    align-items: center;
+    height: var(--index-bar-list-item-height);
+    justify-content: center;
+    padding: var(--index-bar-list-item-padding);
+    color: var(--index-bar-list-item-color);
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+    &--active {
+      color: var(--index-bar-list-item-active-color);
+    }
+  }
+}

package/lib/index-bar/props.js

@@ -0,0 +1,40 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  sticky: {
+    type: Boolean,
+    default: true
+  },
+  stickyOffsetTop: {
+    type: Number,
+    default: 0
+  },
+  cssMode: {
+    type: Boolean,
+    default: false
+  },
+  hideList: {
+    type: Boolean,
+    default: false
+  },
+  zIndex: {
+    type: [Number, String],
+    default: 1
+  },
+  highlightColor: {
+    type: String
+  },
+  duration: {
+    type: [Number, String],
+    default: 0
+  },
+  onClick: {
+    type: Function
+  },
+  onChange: {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/index-bar/provide.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useIndexAnchors = useIndexAnchors;
+exports.INDEX_BAR_COUNT_INDEX_ANCHOR_KEY = exports.INDEX_BAR_BIND_INDEX_ANCHOR_KEY = void 0;
+
+var _components = require("../utils/components");
+
+var INDEX_BAR_BIND_INDEX_ANCHOR_KEY = Symbol('INDEX_BAR_BIND_INDEX_ANCHOR_KEY');
+exports.INDEX_BAR_BIND_INDEX_ANCHOR_KEY = INDEX_BAR_BIND_INDEX_ANCHOR_KEY;
+var INDEX_BAR_COUNT_INDEX_ANCHOR_KEY = Symbol('INDEX_BAR_COUNT_INDEX_ANCHOR_KEY');
+exports.INDEX_BAR_COUNT_INDEX_ANCHOR_KEY = INDEX_BAR_COUNT_INDEX_ANCHOR_KEY;
+
+function useIndexAnchors() {
+  var {
+    bindChildren,
+    childProviders
+  } = (0, _components.useChildren)(INDEX_BAR_BIND_INDEX_ANCHOR_KEY);
+  var {
+    length
+  } = (0, _components.useAtChildrenCounter)(INDEX_BAR_COUNT_INDEX_ANCHOR_KEY);
+  return {
+    length,
+    indexAnchors: childProviders,
+    bindIndexAnchors: bindChildren
+  };
+}

package/lib/index-bar/style/index.js

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

package/lib/index-bar/style/less.js

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

package/lib/index.js

@@ -0,0 +1,195 @@
+const ActionSheet = require('./action-sheet')
+const AppBar = require('./app-bar')
+const BackTop = require('./back-top')
+const Badge = require('./badge')
+const Button = require('./button')
+const Card = require('./card')
+const Cell = require('./cell')
+const Checkbox = require('./checkbox')
+const CheckboxGroup = require('./checkbox-group')
+const Chip = require('./chip')
+const Col = require('./col')
+const Collapse = require('./collapse')
+const CollapseItem = require('./collapse-item')
+const Context = require('./context')
+const Countdown = require('./countdown')
+const Counter = require('./counter')
+const DatePicker = require('./date-picker')
+const Dialog = require('./dialog')
+const Divider = require('./divider')
+const Form = require('./form')
+const FormDetails = require('./form-details')
+const Icon = require('./icon')
+const Image = require('./image')
+const ImagePreview = require('./image-preview')
+const IndexAnchor = require('./index-anchor')
+const IndexBar = require('./index-bar')
+const Input = require('./input')
+const Lazy = require('./lazy')
+const List = require('./list')
+const Loading = require('./loading')
+const Locale = require('./locale')
+const Menu = require('./menu')
+const Option = require('./option')
+const Pagination = require('./pagination')
+const Picker = require('./picker')
+const Popup = require('./popup')
+const Progress = require('./progress')
+const PullRefresh = require('./pull-refresh')
+const Radio = require('./radio')
+const RadioGroup = require('./radio-group')
+const Rate = require('./rate')
+const Ripple = require('./ripple')
+const Row = require('./row')
+const Select = require('./select')
+const Skeleton = require('./skeleton')
+const Slider = require('./slider')
+const Snackbar = require('./snackbar')
+const Space = require('./space')
+const Step = require('./step')
+const Steps = require('./steps')
+const Sticky = require('./sticky')
+const StyleProvider = require('./style-provider')
+const Swipe = require('./swipe')
+const SwipeItem = require('./swipe-item')
+const Switch = require('./switch')
+const Tab = require('./tab')
+const TabItem = require('./tab-item')
+const Table = require('./table')
+const Tabs = require('./tabs')
+const TabsItems = require('./tabs-items')
+const TimePicker = require('./time-picker')
+const Uploader = require('./uploader')
+
+
+function install(app) {
+  ActionSheet.install && app.use(ActionSheet)
+  AppBar.install && app.use(AppBar)
+  BackTop.install && app.use(BackTop)
+  Badge.install && app.use(Badge)
+  Button.install && app.use(Button)
+  Card.install && app.use(Card)
+  Cell.install && app.use(Cell)
+  Checkbox.install && app.use(Checkbox)
+  CheckboxGroup.install && app.use(CheckboxGroup)
+  Chip.install && app.use(Chip)
+  Col.install && app.use(Col)
+  Collapse.install && app.use(Collapse)
+  CollapseItem.install && app.use(CollapseItem)
+  Context.install && app.use(Context)
+  Countdown.install && app.use(Countdown)
+  Counter.install && app.use(Counter)
+  DatePicker.install && app.use(DatePicker)
+  Dialog.install && app.use(Dialog)
+  Divider.install && app.use(Divider)
+  Form.install && app.use(Form)
+  FormDetails.install && app.use(FormDetails)
+  Icon.install && app.use(Icon)
+  Image.install && app.use(Image)
+  ImagePreview.install && app.use(ImagePreview)
+  IndexAnchor.install && app.use(IndexAnchor)
+  IndexBar.install && app.use(IndexBar)
+  Input.install && app.use(Input)
+  Lazy.install && app.use(Lazy)
+  List.install && app.use(List)
+  Loading.install && app.use(Loading)
+  Locale.install && app.use(Locale)
+  Menu.install && app.use(Menu)
+  Option.install && app.use(Option)
+  Pagination.install && app.use(Pagination)
+  Picker.install && app.use(Picker)
+  Popup.install && app.use(Popup)
+  Progress.install && app.use(Progress)
+  PullRefresh.install && app.use(PullRefresh)
+  Radio.install && app.use(Radio)
+  RadioGroup.install && app.use(RadioGroup)
+  Rate.install && app.use(Rate)
+  Ripple.install && app.use(Ripple)
+  Row.install && app.use(Row)
+  Select.install && app.use(Select)
+  Skeleton.install && app.use(Skeleton)
+  Slider.install && app.use(Slider)
+  Snackbar.install && app.use(Snackbar)
+  Space.install && app.use(Space)
+  Step.install && app.use(Step)
+  Steps.install && app.use(Steps)
+  Sticky.install && app.use(Sticky)
+  StyleProvider.install && app.use(StyleProvider)
+  Swipe.install && app.use(Swipe)
+  SwipeItem.install && app.use(SwipeItem)
+  Switch.install && app.use(Switch)
+  Tab.install && app.use(Tab)
+  TabItem.install && app.use(TabItem)
+  Table.install && app.use(Table)
+  Tabs.install && app.use(Tabs)
+  TabsItems.install && app.use(TabsItems)
+  TimePicker.install && app.use(TimePicker)
+  Uploader.install && app.use(Uploader)
+}
+
+
+module.exports = {
+  install,
+  ActionSheet,
+  AppBar,
+  BackTop,
+  Badge,
+  Button,
+  Card,
+  Cell,
+  Checkbox,
+  CheckboxGroup,
+  Chip,
+  Col,
+  Collapse,
+  CollapseItem,
+  Context,
+  Countdown,
+  Counter,
+  DatePicker,
+  Dialog,
+  Divider,
+  Form,
+  FormDetails,
+  Icon,
+  Image,
+  ImagePreview,
+  IndexAnchor,
+  IndexBar,
+  Input,
+  Lazy,
+  List,
+  Loading,
+  Locale,
+  Menu,
+  Option,
+  Pagination,
+  Picker,
+  Popup,
+  Progress,
+  PullRefresh,
+  Radio,
+  RadioGroup,
+  Rate,
+  Ripple,
+  Row,
+  Select,
+  Skeleton,
+  Slider,
+  Snackbar,
+  Space,
+  Step,
+  Steps,
+  Sticky,
+  StyleProvider,
+  Swipe,
+  SwipeItem,
+  Switch,
+  Tab,
+  TabItem,
+  Table,
+  Tabs,
+  TabsItems,
+  TimePicker,
+  Uploader
+}