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

package/lib/list/List.js

@@ -0,0 +1,157 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _loading = _interopRequireDefault(require("../loading"));
+
+var _ripple = _interopRequireDefault(require("../ripple"));
+
+var _vue = require("vue");
+
+var _elements = require("../utils/elements");
+
+var _props = require("./props");
+
+var _shared = require("../utils/shared");
+
+var _locale = require("../locale");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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-list var--box",
+  ref: "listEl"
+};
+var _hoisted_2 = {
+  class: "var-list__loading"
+};
+var _hoisted_3 = {
+  class: "var-list__loading-text"
+};
+var _hoisted_4 = {
+  class: "var-list__finished"
+};
+var _hoisted_5 = {
+  class: "var-list__detector",
+  ref: "detectorEl"
+};
+
+function render(_ctx, _cache) {
+  var _component_var_loading = (0, _vue.resolveComponent)("var-loading");
+
+  var _directive_ripple = (0, _vue.resolveDirective)("ripple");
+
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "default"), _ctx.loading ? (0, _vue.renderSlot)(_ctx.$slots, "loading", {
+    key: 0
+  }, () => [(0, _vue.createElementVNode)("div", _hoisted_2, [(0, _vue.createElementVNode)("div", _hoisted_3, (0, _vue.toDisplayString)(_ctx.dt(_ctx.loadingText, _ctx.pack.listLoadingText)), 1
+  /* TEXT */
+  ), (0, _vue.createVNode)(_component_var_loading, {
+    size: "mini",
+    radius: 10
+  })])]) : (0, _vue.createCommentVNode)("v-if", true), _ctx.finished ? (0, _vue.renderSlot)(_ctx.$slots, "finished", {
+    key: 1
+  }, () => [(0, _vue.createElementVNode)("div", _hoisted_4, (0, _vue.toDisplayString)(_ctx.dt(_ctx.finishedText, _ctx.pack.listFinishedText)), 1
+  /* TEXT */
+  )]) : (0, _vue.createCommentVNode)("v-if", true), _ctx.error ? (0, _vue.renderSlot)(_ctx.$slots, "error", {
+    key: 2
+  }, () => [(0, _vue.withDirectives)((0, _vue.createElementVNode)("div", {
+    class: "var-list__error",
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.load && _ctx.load(...args))
+  }, [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.dt(_ctx.errorText, _ctx.pack.listErrorText)), 1
+  /* TEXT */
+  )], 512
+  /* NEED_PATCH */
+  ), [[_directive_ripple]])]) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", _hoisted_5, null, 512
+  /* NEED_PATCH */
+  )], 512
+  /* NEED_PATCH */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarList',
+  directives: {
+    Ripple: _ripple.default
+  },
+  components: {
+    VarLoading: _loading.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var listEl = (0, _vue.ref)(null);
+    var detectorEl = (0, _vue.ref)(null);
+    var scroller = window;
+
+    var load = () => {
+      var _props$onUpdateError, _props$onUpdateLoadi;
+
+      (_props$onUpdateError = props['onUpdate:error']) == null ? void 0 : _props$onUpdateError.call(props, false);
+      (_props$onUpdateLoadi = props['onUpdate:loading']) == null ? void 0 : _props$onUpdateLoadi.call(props, true);
+      props.onLoad == null ? void 0 : props.onLoad();
+    };
+
+    var isReachBottom = () => {
+      var containerBottom = scroller === window ? window.innerHeight : scroller.getBoundingClientRect().bottom;
+      var {
+        bottom: detectorBottom
+      } = detectorEl.value.getBoundingClientRect();
+      return detectorBottom - (0, _elements.toPxNum)(props.offset) <= containerBottom;
+    }; // expose
+
+
+    var check = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator(function* () {
+        yield (0, _vue.nextTick)();
+
+        if ((0, _elements.isHidden)(listEl.value)) {
+          return;
+        }
+
+        var {
+          loading,
+          finished,
+          error
+        } = props;
+
+        if (!loading && !finished && !error && isReachBottom()) {
+          load();
+        }
+      });
+
+      return function check() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
+    (0, _vue.onMounted)(() => {
+      scroller = (0, _elements.getParentScroller)(listEl.value);
+      props.immediateCheck && check();
+      scroller.addEventListener('scroll', check);
+    });
+    (0, _vue.onUnmounted)(() => {
+      scroller.removeEventListener('scroll', check);
+    });
+    return {
+      pack: _locale.pack,
+      listEl,
+      detectorEl,
+      dt: _shared.dt,
+      isNumber: _shared.isNumber,
+      load,
+      check
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/list/index.js

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

package/lib/list/list.css

@@ -0,0 +1 @@
+:root { --list-loading-height: 50px; --list-finished-height: 50px; --list-error-height: 50px; --list-loading-color: #888; --list-finished-color: #888; --list-error-color: #888; --list-loading-font-size: var(--font-size-md); --list-finished-font-size: var(--font-size-md); --list-error-font-size: var(--font-size-md);}.var-list__detector { width: 100%;}.var-list__loading { display: flex; justify-content: center; align-items: center; width: 100%; height: var(--list-loading-height); font-size: var(--list-loading-font-size); color: var(--list-loading-color);}.var-list__loading-text { margin-right: 10px;}.var-list__finished { display: flex; justify-content: center; align-items: center; width: 100%; height: var(--list-finished-height); font-size: var(--list-finished-font-size); color: var(--list-finished-color);}.var-list__error { display: flex; justify-content: center; align-items: center; width: 100%; height: var(--list-error-height); font-size: var(--list-error-font-size); color: var(--list-error-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

package/lib/list/list.less

@@ -0,0 +1,63 @@
+@list-loading-height: 50px;
+@list-finished-height: 50px;
+@list-error-height: 50px;
+@list-loading-color: #888;
+@list-finished-color: #888;
+@list-error-color: #888;
+@list-loading-font-size: var(--font-size-md);
+@list-finished-font-size: var(--font-size-md);
+@list-error-font-size: var(--font-size-md);
+
+:root {
+  --list-loading-height: @list-loading-height;
+  --list-finished-height: @list-finished-height;
+  --list-error-height: @list-error-height;
+  --list-loading-color: @list-loading-color;
+  --list-finished-color: @list-finished-color;
+  --list-error-color: @list-error-color;
+  --list-loading-font-size: @list-loading-font-size;
+  --list-finished-font-size: @list-finished-font-size;
+  --list-error-font-size: @list-error-font-size;
+}
+
+.var-list {
+  &__detector {
+    width: 100%;
+  }
+
+  &__loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: var(--list-loading-height);
+    font-size: var(--list-loading-font-size);
+    color: var(--list-loading-color);
+  }
+
+  &__loading-text {
+    margin-right: 10px;
+  }
+
+  &__finished {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: var(--list-finished-height);
+    font-size: var(--list-finished-font-size);
+    color: var(--list-finished-color);
+  }
+
+  &__error {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: var(--list-error-height);
+    font-size: var(--list-error-font-size);
+    color: var(--list-error-color);
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+}

package/lib/list/props.js

@@ -0,0 +1,45 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  immediateCheck: {
+    type: Boolean,
+    default: true
+  },
+  finished: {
+    type: Boolean,
+    default: false
+  },
+  error: {
+    type: Boolean,
+    default: false
+  },
+  offset: {
+    type: [String, Number],
+    default: 0
+  },
+  loadingText: {
+    type: String
+  },
+  finishedText: {
+    type: String
+  },
+  errorText: {
+    type: String
+  },
+  onLoad: {
+    type: Function
+  },
+  'onUpdate:loading': {
+    type: Function
+  },
+  'onUpdate:error': {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/list/style/index.js

@@ -0,0 +1,5 @@
+require('../../styles/common.css')
+require('../../ripple/ripple.css')
+require('../../loading/loading.css')
+require('../list.css')
+require('../ListSfc.css')

package/lib/list/style/less.js

@@ -0,0 +1,5 @@
+require('../../styles/common.less')
+require('../../ripple/ripple.less')
+require('../../loading/loading.less')
+require('../list.less')
+require('../ListSfc.less')

package/lib/loading/Loading.js

@@ -0,0 +1,93 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _shared = require("../utils/shared");
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  class: "var--box var-loading"
+};
+var _hoisted_2 = {
+  key: 0,
+  class: "var-loading__circle"
+};
+
+var _hoisted_3 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("svg", {
+  viewBox: "25 25 50 50"
+}, [/*#__PURE__*/(0, _vue.createElementVNode)("circle", {
+  cx: "50",
+  cy: "50",
+  r: "20",
+  fill: "none"
+})], -1
+/* HOISTED */
+));
+
+var _hoisted_4 = [_hoisted_3];
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [_ctx.type === 'circle' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_2, [(0, _vue.createElementVNode)("span", {
+    class: "var-loading__circle-block",
+    style: (0, _vue.normalizeStyle)({
+      width: _ctx.toNumber(_ctx.radius) * 2 + 'px',
+      height: _ctx.toNumber(_ctx.radius) * 2 + 'px'
+    })
+  }, _hoisted_4, 4
+  /* STYLE */
+  )])) : (0, _vue.createCommentVNode)("v-if", true), ((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.loadingTypeDict, (nums, key) => {
+    return (0, _vue.openBlock)(), (0, _vue.createElementBlock)(_vue.Fragment, {
+      key: key
+    }, [_ctx.type === key ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+      key: 0,
+      class: (0, _vue.normalizeClass)("var-loading__" + key + " var-loading__" + key + "-" + _ctx.size)
+    }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(nums, num => {
+      return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+        key: num + key,
+        style: (0, _vue.normalizeStyle)({
+          backgroundColor: _ctx.color
+        }),
+        class: (0, _vue.normalizeClass)("var-loading__" + key + "-item var-loading__" + key + "-item-" + _ctx.size)
+      }, null, 6
+      /* CLASS, STYLE */
+      );
+    }), 128
+    /* KEYED_FRAGMENT */
+    ))], 2
+    /* CLASS */
+    )) : (0, _vue.createCommentVNode)("v-if", true)], 64
+    /* STABLE_FRAGMENT */
+    );
+  }), 128
+  /* KEYED_FRAGMENT */
+  ))]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarLoading',
+  props: _props.props,
+
+  setup() {
+    var loadingTypeDict = {
+      wave: 5,
+      cube: 4,
+      rect: 8,
+      disappear: 3
+    };
+    return {
+      loadingTypeDict,
+      toNumber: _shared.toNumber
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/loading/index.js

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

package/lib/loading/loading.css

@@ -0,0 +1 @@
+.var-loading { display: flex; justify-content: center; align-items: center;}.var-loading__circle { display: flex;}.var-loading__circle-block { display: inline-block; animation: circle 1.8s linear infinite;}.var-loading__circle-block svg { display: block; width: 100%; height: 100%;}.var-loading__circle-block svg circle { animation: circular 1.5s ease-in-out infinite; stroke: currentColor; stroke-width: 3; stroke-linecap: round;}@keyframes circle { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@keyframes circular { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120; }}.var-loading__wave { display: flex; align-items: center; justify-content: center;}.var-loading__wave-large { width: 64px; height: 18px;}.var-loading__wave-normal { width: 50px; height: 16px;}.var-loading__wave-small { width: 36px; height: 14px;}.var-loading__wave-mini { width: 22px; height: 12px;}.var-loading__wave-item { height: 100%; display: inline-block; animation: 1.2s ease-in-out infinite wave;}.var-loading__wave-item:nth-child(1) { animation-delay: -1.2s; margin-left: 0;}.var-loading__wave-item:nth-child(2) { animation-delay: -1.1s;}.var-loading__wave-item:nth-child(3) { animation-delay: -1s;}.var-loading__wave-item:nth-child(4) { animation-delay: -0.9s;}.var-loading__wave-item:nth-child(5) { animation-delay: -0.8s;}.var-loading__wave-item-large { width: 5px; margin-left: 5px;}.var-loading__wave-item-normal { width: 4px; margin-left: 4px;}.var-loading__wave-item-small { width: 3px; margin-left: 3px;}.var-loading__wave-item-mini { width: 2px; margin-left: 2px;}@keyframes wave { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); }}.var-loading__cube { display: flex; align-items: center;}.var-loading__cube-large { width: 64px; height: 18px;}.var-loading__cube-normal { width: 50px; height: 16px;}.var-loading__cube-small { width: 36px; height: 14px;}.var-loading__cube-mini { width: 22px; height: 12px;}.var-loading__cube-item { display: inline-block; transform-origin: right bottom; animation: 1.5s ease infinite cube;}.var-loading__cube-item:nth-child(1) { animation-delay: 0.2s; margin-left: 0;}.var-loading__cube-item:nth-child(2) { animation-delay: 0.4s;}.var-loading__cube-item:nth-child(3) { animation-delay: 0.6s;}.var-loading__cube-item:nth-child(4) { animation-delay: 0.8s;}.var-loading__cube-item-large { height: 10px; width: 10px; margin-left: 5px;}.var-loading__cube-item-normal { height: 8px; width: 8px; margin-left: 4px;}.var-loading__cube-item-small { height: 6px; width: 6px; margin-left: 3px;}.var-loading__cube-item-mini { height: 4px; width: 4px; margin-left: 2px;}@keyframes cube { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: rotate(90deg) scale(0.3); }}.var-loading__rect { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;}.var-loading__rect-large { width: 64px; height: 18px;}.var-loading__rect-normal { width: 50px; height: 16px;}.var-loading__rect-small { width: 36px; height: 14px;}.var-loading__rect-mini { width: 22px; height: 12px;}.var-loading__rect-item { animation: 2s ease-in-out infinite rect;}.var-loading__rect-item:nth-child(1) { animation-delay: 1.75s;}.var-loading__rect-item:nth-child(2) { animation-delay: 1.5s;}.var-loading__rect-item:nth-child(3) { animation-delay: 1.25s;}.var-loading__rect-item:nth-child(4) { animation-delay: 1s;}.var-loading__rect-item:nth-child(5) { animation-delay: 0.75s;}.var-loading__rect-item:nth-child(6) { animation-delay: 0.5s;}.var-loading__rect-item:nth-child(7) { animation-delay: 0.25s;}.var-loading__rect-item:nth-child(8) { animation-delay: 0s;}.var-loading__rect-item-large { height: 100%; width: 8px;}.var-loading__rect-item-normal { height: 90%; width: 6.4px;}.var-loading__rect-item-small { height: 80%; width: 4.8px;}.var-loading__rect-item-mini { height: 70%; width: 3.2px;}@keyframes rect { 0% { opacity: 0.3; } 25% { opacity: 1; } 50% { opacity: 0.3; } 65% { opacity: 1; } 100% { opacity: 0.3; }}.var-loading__disappear { display: flex; justify-content: space-around; align-items: center; flex-flow: nowrap;}.var-loading__disappear-large { width: 64px; height: 18px;}.var-loading__disappear-normal { width: 50px; height: 16px;}.var-loading__disappear-small { width: 36px; height: 14px;}.var-loading__disappear-mini { width: 22px; height: 12px;}.var-loading__disappear-item { border-radius: 50%; animation: 0.5s ease-in-out infinite alternate disappear;}.var-loading__disappear-item:nth-child(1) { animation-delay: -0.4s;}.var-loading__disappear-item:nth-child(2) { animation-delay: -0.2s;}.var-loading__disappear-item:nth-child(3) { animation-delay: 0s;}.var-loading__disappear-item-large { height: 15px; width: 15px;}.var-loading__disappear-item-normal { height: 12px; width: 12px;}.var-loading__disappear-item-small { height: 9px; width: 9px;}.var-loading__disappear-item-mini { height: 6px; width: 6px;}@keyframes disappear { 0% { opacity: 1; } 100% { opacity: 0; }}