@varlet/ui 1.23.4 → 1.23.5

package/lib/collapse-item/CollapseItem.js

@@ -0,0 +1,155 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _elements = require("../utils/elements");
+
+var _shared = require("../utils/shared");
+
+var _provide = require("./provide");
+
+var _props = require("./props");
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  class: "var-collapse-item-header__title"
+};
+var _hoisted_2 = {
+  class: "var-collapse-item-header__icon"
+};
+var _hoisted_3 = {
+  class: "var-collapse-item__wrap"
+};
+
+function render(_ctx, _cache) {
+  var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
+
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)({
+      'var-collapse-item': true,
+      'var-collapse-item__active': _ctx.offset && _ctx.isShow,
+      'var-collapse-item__disable': _ctx.disabled
+    })
+  }, [(0, _vue.createElementVNode)("div", {
+    class: "var-collapse-item-header",
+    onClick: _cache[0] || (_cache[0] = $event => _ctx.toggle())
+  }, [(0, _vue.createElementVNode)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.title), 1
+  /* TEXT */
+  )])]), (0, _vue.createElementVNode)("div", _hoisted_2, [(0, _vue.renderSlot)(_ctx.$slots, "icon", {}, () => [(0, _vue.createVNode)(_component_var_icon, {
+    name: _ctx.icon,
+    transition: 250,
+    class: (0, _vue.normalizeClass)({
+      'var-collapse-item-header__icon': true,
+      'var-collapse-item-header__open': _ctx.isShow && _ctx.icon === 'chevron-down',
+      'var-collapse-item-header__disable': _ctx.disabled
+    })
+  }, null, 8
+  /* PROPS */
+  , ["name", "class"])])])]), (0, _vue.withDirectives)((0, _vue.createElementVNode)("div", {
+    class: "var-collapse-item-content",
+    ref: "contentEl",
+    onTransitionend: _cache[1] || (_cache[1] = (...args) => _ctx.transitionend && _ctx.transitionend(...args))
+  }, [(0, _vue.createElementVNode)("div", _hoisted_3, [(0, _vue.renderSlot)(_ctx.$slots, "default")])], 544
+  /* HYDRATE_EVENTS, NEED_PATCH */
+  ), [[_vue.vShow, _ctx.show]])], 2
+  /* CLASS */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarCollapseItem',
+  components: {
+    VarIcon: _icon.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var {
+      index,
+      collapse,
+      bindCollapse
+    } = (0, _provide.useCollapse)();
+    var contentEl = (0, _vue.ref)(null);
+    var show = (0, _vue.ref)(false);
+    var isShow = (0, _vue.ref)(false);
+    var {
+      active,
+      offset,
+      updateItem
+    } = collapse;
+    var name = (0, _vue.computed)(() => props.name);
+
+    var init = (accordion, show) => {
+      if (active.value === undefined || accordion && (0, _shared.isArray)(active.value) || show === isShow.value) return;
+      isShow.value = show;
+      toggle(true);
+    };
+
+    var toggle = initOrAccordion => {
+      if (props.disabled) return;
+
+      if (!initOrAccordion) {
+        updateItem(props.name || index.value, !isShow.value);
+      }
+    };
+
+    var openPanel = () => {
+      if (!contentEl.value) return;
+      contentEl.value.style.height = '';
+      show.value = true;
+      (0, _vue.nextTick)(() => {
+        var {
+          offsetHeight
+        } = contentEl.value;
+        contentEl.value.style.height = 0 + 'px';
+        (0, _elements.requestAnimationFrame)(() => {
+          ;
+          contentEl.value.style.height = offsetHeight + 'px';
+        });
+      });
+    };
+
+    var closePanel = () => {
+      if (!contentEl.value) return;
+      contentEl.value.style.height = 0 + 'px';
+    };
+
+    var transitionend = () => {
+      if (!isShow.value) {
+        show.value = false;
+        contentEl.value.style.height = '';
+      }
+    };
+
+    var collapseItemProvider = {
+      index,
+      name,
+      init
+    };
+    bindCollapse(collapseItemProvider);
+    (0, _vue.watch)(isShow, value => {
+      if (value) openPanel();else closePanel();
+    });
+    return {
+      show,
+      isShow,
+      offset,
+      toggle,
+      contentEl,
+      transitionend
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/collapse-item/collapseItem.css

@@ -0,0 +1 @@
+:root { --collapse-background: #fff; --collapse-text-color: #232222; --collapse-header-font-size: var(--font-size-lg); --collapse-header-padding: 10px 16px; --collapse-content-font-size: var(--font-size-md); --collapse-content-padding: 0 16px 10px; --collapse-item-margin-top: 16px; --collapse-disable-color: #bdbdbd; --collapse-border-top: thin solid rgba(0, 0, 0, 0.12);}.var-collapse-item { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; position: relative; margin-top: 0; background: var(--collapse-background); color: var(--collapse-text-color); transition: margin-top 0.25s, background-color 0.25s;}.var-collapse-item::before { bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: -1; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);}.var-collapse-item:not(:first-child)::after { border-top: var(--collapse-border-top); content: ''; left: 0; position: absolute; right: 0; top: 0;}.var-collapse-item-header { align-items: center; display: flex; font-size: var(--collapse-header-font-size); outline: none; padding: var(--collapse-header-padding); justify-content: space-between; position: relative;}.var-collapse-item-header__title { transition: color 0.25s;}.var-collapse-item-header__icon { transform: rotate(0deg); opacity: 1;}.var-collapse-item-header__disable { opacity: 0;}.var-collapse-item-header__open { transform: rotate(-180deg);}.var-collapse-item-content { display: flex; font-size: var(--collapse-content-font-size); overflow: hidden; transition: all 0.25s;}.var-collapse-item__wrap { padding: var(--collapse-content-padding); word-break: break-all; flex: 1;}.var-collapse-item__active + .var-collapse-item,.var-collapse-item__active:not(:first-child) { margin-top: var(--collapse-item-margin-top);}.var-collapse-item__active + .var-collapse-item::after,.var-collapse-item__active:not(:first-child)::after { border-top: none;}.var-collapse-item__disable { color: var(--collapse-disable-color); cursor: not-allowed;}

package/lib/collapse-item/collapseItem.less

@@ -0,0 +1,105 @@
+@collapse-background: #fff;
+@collapse-text-color: #232222;
+@collapse-header-font-size: var(--font-size-lg);
+@collapse-header-padding: 10px 16px;
+@collapse-content-font-size: var(--font-size-md);
+@collapse-content-padding: 0 16px 10px;
+@collapse-item-margin-top: 16px;
+@collapse-disable-color: #bdbdbd;
+@collapse-border-top: thin solid rgba(0, 0, 0, 0.12);
+
+:root {
+  --collapse-background: @collapse-background;
+  --collapse-text-color: @collapse-text-color;
+  --collapse-header-font-size: @collapse-header-font-size;
+  --collapse-header-padding: @collapse-header-padding;
+  --collapse-content-font-size: @collapse-content-font-size;
+  --collapse-content-padding: @collapse-content-padding;
+  --collapse-item-margin-top: @collapse-item-margin-top;
+  --collapse-disable-color: @collapse-disable-color;
+  --collapse-border-top: @collapse-border-top;
+}
+
+.var-collapse-item {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  box-sizing: border-box;
+  position: relative;
+  margin-top: 0;
+  background: var(--collapse-background);
+  color: var(--collapse-text-color);
+  transition: margin-top 0.25s, background-color 0.25s;
+
+  &::before {
+    bottom: 0;
+    content: '';
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: -1;
+    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  }
+
+  &:not(:first-child)::after {
+    border-top: var(--collapse-border-top);
+    content: '';
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  &-header {
+    align-items: center;
+    display: flex;
+    font-size: var(--collapse-header-font-size);
+    outline: none;
+    padding: var(--collapse-header-padding);
+    justify-content: space-between;
+    position: relative;
+
+    &__title {
+      transition: color 0.25s;
+    }
+
+    &__icon {
+      transform: rotate(0deg);
+      opacity: 1;
+    }
+
+    &__disable {
+      opacity: 0;
+    }
+
+    &__open {
+      transform: rotate(-180deg);
+    }
+  }
+
+  &-content {
+    display: flex;
+    font-size: var(--collapse-content-font-size);
+    overflow: hidden;
+    transition: all 0.25s;
+  }
+
+  &__wrap {
+    padding: var(--collapse-content-padding);
+    word-break: break-all;
+    flex: 1;
+  }
+
+  &__active + &,
+  &__active:not(:first-child) {
+    margin-top: var(--collapse-item-margin-top);
+
+    &::after {
+      border-top: none;
+    }
+  }
+
+  &__disable {
+    color: var(--collapse-disable-color);
+    cursor: not-allowed;
+  }
+}

package/lib/collapse-item/index.js

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

package/lib/collapse-item/props.js

@@ -0,0 +1,21 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  name: {
+    type: [String, Number]
+  },
+  title: {
+    type: String
+  },
+  icon: {
+    type: String,
+    default: 'chevron-down'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+};
+exports.props = props;

package/lib/collapse-item/provide.js

@@ -0,0 +1,28 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useCollapse = useCollapse;
+
+var _components = require("../utils/components");
+
+var _provide = require("../collapse/provide");
+
+function useCollapse() {
+  var {
+    parentProvider,
+    bindParent
+  } = (0, _components.useParent)(_provide.COLLAPSE_BIND_COLLAPSE_ITEM_KEY);
+  var {
+    index
+  } = (0, _components.useAtParentIndex)(_provide.COLLAPSE_COUNT_COLLAPSE_ITEM_KEY);
+
+  if (!parentProvider || !bindParent || !index) {
+    throw Error('[Varlet] Collapse: <var-collapse-item/> must in <var-collapse>');
+  }
+
+  return {
+    index,
+    collapse: parentProvider,
+    bindCollapse: bindParent
+  };
+}

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

@@ -0,0 +1,4 @@
+require('../../styles/common.css')
+require('../../icon/icon.css')
+require('../collapseItem.css')
+require('../CollapseItemSfc.css')

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

@@ -0,0 +1,4 @@
+require('../../styles/common.less')
+require('../../icon/icon.less')
+require('../collapseItem.less')
+require('../CollapseItemSfc.less')

package/lib/context/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports._ContextComponent = void 0;
+
+var _vue = require("vue");
+
+var context = {
+  locks: {},
+  zIndex: 2000,
+  touchmoveForbid: true
+};
+
+var _ContextComponent = (0, _vue.reactive)(context);
+
+exports._ContextComponent = _ContextComponent;
+
+var _default = (0, _vue.reactive)(context);
+
+exports.default = _default;

package/lib/context/lock.js

@@ -0,0 +1,107 @@
+"use strict";
+
+exports.__esModule = true;
+exports.resolveLock = resolveLock;
+exports.addLock = addLock;
+exports.releaseLock = releaseLock;
+exports.useLock = useLock;
+
+var _vue = require("vue");
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function resolveLock() {
+  var lockCounts = Object.keys(_.default.locks).length;
+  lockCounts <= 0 ? document.body.classList.remove('var--lock') : document.body.classList.add('var--lock');
+}
+
+function addLock(uid) {
+  _.default.locks[uid] = 1;
+  resolveLock();
+}
+
+function releaseLock(uid) {
+  delete _.default.locks[uid];
+  resolveLock();
+}
+/**
+ * 组件锁操作
+ * @param props 组件props
+ * @param state 组件props中控制组件加锁的开关对应的key值
+ * @param use 组件props中控制组件加锁的开关是否可用对应的key值
+ */
+
+
+function useLock(props, state, use) {
+  var {
+    uid
+  } = (0, _vue.getCurrentInstance)();
+
+  if (use) {
+    (0, _vue.watch)(() => props[use], newValue => {
+      if (newValue === false) {
+        // 改变为禁用状态 组件解锁
+        releaseLock(uid);
+      } else if (newValue === true && props[state] === true) {
+        // 改变为启用状态 并且popup处于开启状态 组件加锁
+        addLock(uid);
+      }
+    });
+  }
+
+  (0, _vue.watch)(() => props[state], newValue => {
+    if (use && props[use] === false) {
+      return;
+    }
+
+    if (newValue === true) {
+      // popup开启 组件加锁
+      addLock(uid);
+    } else {
+      // popup关闭 组件解锁
+      releaseLock(uid);
+    }
+  });
+  (0, _vue.onBeforeMount)(() => {
+    if (use && props[use] === false) {
+      return;
+    }
+
+    if (props[state] === true) {
+      // popup处于开启状态 组件挂载 组件加锁
+      addLock(uid);
+    }
+  });
+  (0, _vue.onUnmounted)(() => {
+    if (use && props[use] === false) {
+      return;
+    }
+
+    if (props[state] === true) {
+      // popup处于开启状态 组件卸载 组件解锁
+      releaseLock(uid);
+    }
+  });
+  (0, _vue.onActivated)(() => {
+    if (use && props[use] === false) {
+      return;
+    }
+
+    if (props[state] === true) {
+      // popup处于开启状态 组件处于keepalive前台 组件加锁
+      addLock(uid);
+    }
+  });
+  (0, _vue.onDeactivated)(() => {
+    if (use && props[use] === false) {
+      return;
+    }
+
+    if (props[state] === true) {
+      // popup处于开启状态 组件处于keepalive后台 组件解锁
+      releaseLock(uid);
+    }
+  });
+}

package/lib/context/zIndex.js

@@ -0,0 +1,25 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useZIndex = useZIndex;
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _vue = require("vue");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function useZIndex(source, count) {
+  var zIndex = (0, _vue.ref)(_index.default.zIndex);
+  (0, _vue.watch)(source, newValue => {
+    if (newValue) {
+      _index.default.zIndex += count;
+      zIndex.value = _index.default.zIndex;
+    }
+  }, {
+    immediate: true
+  });
+  return {
+    zIndex
+  };
+}

package/lib/countdown/Countdown.js

@@ -0,0 +1,119 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _elements = require("../utils/elements");
+
+var _shared = require("../utils/shared");
+
+var SECOND = 1000;
+var MINUTE = 60 * SECOND;
+var HOUR = 60 * MINUTE;
+var DAY = 24 * HOUR;
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  class: "var-countdown"
+};
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "default", (0, _vue.normalizeProps)((0, _vue.guardReactiveProps)(_ctx.timeData)), () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.showTime), 1
+  /* TEXT */
+  )])]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarCountdown',
+  props: _props.props,
+
+  setup(props) {
+    var endTime = (0, _vue.ref)(0);
+    var isStart = (0, _vue.ref)(false);
+    var showTime = (0, _vue.ref)('');
+    var handle = (0, _vue.ref)(0);
+    var pauseTime = (0, _vue.ref)(0);
+    var timeData = (0, _vue.ref)({});
+
+    var formatTime = durationTime => {
+      var days = Math.floor(durationTime / DAY);
+      var hours = Math.floor(durationTime % DAY / HOUR);
+      var minutes = Math.floor(durationTime % HOUR / MINUTE);
+      var seconds = Math.floor(durationTime % MINUTE / SECOND);
+      var milliseconds = Math.floor(durationTime % SECOND);
+      var time = {
+        days,
+        hours,
+        minutes,
+        seconds,
+        milliseconds
+      };
+      timeData.value = time;
+      props.onChange == null ? void 0 : props.onChange(timeData.value);
+      showTime.value = (0, _shared.parseFormat)(props.format, time);
+    };
+
+    var countdown = () => {
+      var {
+        time,
+        onEnd,
+        autoStart
+      } = props;
+      var now = Date.now();
+      if (!endTime.value) endTime.value = now + (0, _shared.toNumber)(time);
+      var durationTime = endTime.value - now;
+      if (durationTime < 0) durationTime = 0;
+      pauseTime.value = durationTime;
+      formatTime(durationTime);
+
+      if (durationTime === 0) {
+        onEnd == null ? void 0 : onEnd();
+        return;
+      }
+
+      if (autoStart || isStart.value) handle.value = (0, _elements.requestAnimationFrame)(countdown);
+    }; // expose
+
+
+    var start = () => {
+      if (isStart.value) return;
+      isStart.value = true;
+      endTime.value = Date.now() + (pauseTime.value || (0, _shared.toNumber)(props.time));
+      countdown();
+    }; // expose
+
+
+    var pause = () => {
+      isStart.value = false;
+    }; // expose
+
+
+    var reset = () => {
+      endTime.value = 0;
+      isStart.value = false;
+      (0, _elements.cancelAnimationFrame)(handle.value);
+      countdown();
+    };
+
+    (0, _vue.watch)(() => props.time, () => reset(), {
+      immediate: true
+    });
+    return {
+      showTime,
+      timeData,
+      start,
+      pause,
+      reset
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/countdown/index.js

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

package/lib/countdown/props.js

@@ -0,0 +1,25 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  time: {
+    type: [String, Number],
+    default: 0
+  },
+  format: {
+    type: String,
+    default: 'HH : mm : ss'
+  },
+  autoStart: {
+    type: Boolean,
+    default: true
+  },
+  onEnd: {
+    type: Function
+  },
+  onChange: {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/countdown/style/index.js

@@ -0,0 +1,2 @@
+require('../../styles/common.css')
+require('../CountdownSfc.css')

package/lib/countdown/style/less.js

@@ -0,0 +1,2 @@
+require('../../styles/common.less')
+require('../CountdownSfc.less')