@varlet/ui 1.23.3-alpha.1 → 1.23.4-alpha.2

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; }}

package/lib/loading/loading.less

@@ -0,0 +1,420 @@
+@import '../styles/var';
+
+@loading-normal-width: 50px;
+@loading-normal-height: @font-size-md + 2;
+
+@loading-large-width: 64px;
+@loading-large-height: @font-size-lg + 2;
+
+@loading-small-width: 36px;
+@loading-small-height: @font-size-sm + 2;
+
+@loading-mini-width: 22px;
+@loading-mini-height: @font-size-xs + 2;
+
+.var-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &__circle {
+    display: flex;
+
+    &-block {
+      display: inline-block;
+      animation: circle 1.8s linear infinite;
+
+      svg {
+        display: block;
+        width: 100%;
+        height: 100%;
+
+        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;
+      }
+    }
+  }
+
+  &__wave {
+    @loading-wave-size-item-width: 5px;
+    @loading-wave-size-item-margin: 5px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &-large {
+      width: @loading-large-width;
+      height: @loading-large-height;
+    }
+
+    &-normal {
+      width: @loading-normal-width;
+      height: @loading-normal-height;
+    }
+
+    &-small {
+      width: @loading-small-width;
+      height: @loading-small-height;
+    }
+
+    &-mini {
+      width: @loading-mini-width;
+      height: @loading-mini-height;
+    }
+
+    &-item {
+      height: 100%;
+      display: inline-block;
+      animation: 1.2s ease-in-out infinite wave;
+
+      &:nth-child(1) {
+        animation-delay: -1.2s;
+        margin-left: 0;
+      }
+
+      &:nth-child(2) {
+        animation-delay: -1.1s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: -1s;
+      }
+
+      &:nth-child(4) {
+        animation-delay: -0.9s;
+      }
+
+      &:nth-child(5) {
+        animation-delay: -0.8s;
+      }
+    }
+
+    &-item-large {
+      width: @loading-wave-size-item-width;
+      margin-left: @loading-wave-size-item-margin;
+    }
+
+    &-item-normal {
+      width: @loading-wave-size-item-width - 1;
+      margin-left: @loading-wave-size-item-margin - 1;
+    }
+
+    &-item-small {
+      width: @loading-wave-size-item-width - 2;
+      margin-left: @loading-wave-size-item-margin - 2;
+    }
+
+    &-item-mini {
+      width: @loading-wave-size-item-width - 3;
+      margin-left: @loading-wave-size-item-margin - 3;
+    }
+
+    @keyframes wave {
+      0%,
+      40%,
+      100% {
+        transform: scaleY(0.4);
+      }
+      20% {
+        transform: scaleY(1);
+      }
+    }
+  }
+
+  &__cube {
+    @loading-cube-size-item-width: 10px;
+    @loading-cube-size-item-height: 10px;
+    @loading-cube-size-item-margin: 5px;
+
+    display: flex;
+    align-items: center;
+
+    &-large {
+      width: @loading-large-width;
+      height: @loading-large-height;
+    }
+
+    &-normal {
+      width: @loading-normal-width;
+      height: @loading-normal-height;
+    }
+
+    &-small {
+      width: @loading-small-width;
+      height: @loading-small-height;
+    }
+
+    &-mini {
+      width: @loading-mini-width;
+      height: @loading-mini-height;
+    }
+
+    &-item {
+      display: inline-block;
+      transform-origin: right bottom;
+      animation: 1.5s ease infinite cube;
+
+      &:nth-child(1) {
+        animation-delay: 0.2s;
+        margin-left: 0;
+      }
+
+      &:nth-child(2) {
+        animation-delay: 0.4s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 0.6s;
+      }
+
+      &:nth-child(4) {
+        animation-delay: 0.8s;
+      }
+    }
+
+    &-item-large {
+      height: @loading-cube-size-item-height;
+      width: @loading-cube-size-item-width;
+      margin-left: @loading-cube-size-item-margin;
+    }
+
+    &-item-normal {
+      height: @loading-cube-size-item-height - 2;
+      width: @loading-cube-size-item-width - 2;
+      margin-left: @loading-cube-size-item-margin - 1;
+    }
+
+    &-item-small {
+      height: @loading-cube-size-item-height - 4;
+      width: @loading-cube-size-item-width - 4;
+      margin-left: @loading-cube-size-item-margin - 2;
+    }
+
+    &-item-mini {
+      height: @loading-cube-size-item-height - 6;
+      width: @loading-cube-size-item-width - 6;
+      margin-left: @loading-cube-size-item-margin - 3;
+    }
+
+    @keyframes cube {
+      0% {
+        opacity: 1;
+        transform: scale(1);
+      }
+      100% {
+        opacity: 0;
+        transform: rotate(90deg) scale(0.3);
+      }
+    }
+  }
+
+  &__rect {
+    @loading-rect-size-item-width: 8px;
+    @loading-rect-size-item-height: 100%;
+
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+
+    &-large {
+      width: @loading-large-width;
+      height: @loading-large-height;
+    }
+
+    &-normal {
+      width: @loading-normal-width;
+      height: @loading-normal-height;
+    }
+
+    &-small {
+      width: @loading-small-width;
+      height: @loading-small-height;
+    }
+
+    &-mini {
+      width: @loading-mini-width;
+      height: @loading-mini-height;
+    }
+
+    &-item {
+      animation: 2s ease-in-out infinite rect;
+
+      &:nth-child(1) {
+        animation-delay: 1.75s;
+      }
+
+      &:nth-child(2) {
+        animation-delay: 1.5s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 1.25s;
+      }
+
+      &:nth-child(4) {
+        animation-delay: 1s;
+      }
+
+      &:nth-child(5) {
+        animation-delay: 0.75s;
+      }
+
+      &:nth-child(6) {
+        animation-delay: 0.5s;
+      }
+
+      &:nth-child(7) {
+        animation-delay: 0.25s;
+      }
+
+      &:nth-child(8) {
+        animation-delay: 0s;
+      }
+    }
+
+    &-item-large {
+      height: @loading-rect-size-item-height;
+      width: @loading-rect-size-item-width;
+    }
+
+    &-item-normal {
+      height: @loading-rect-size-item-height * 0.9;
+      width: @loading-rect-size-item-width * 0.8;
+    }
+
+    &-item-small {
+      height: @loading-rect-size-item-height * 0.8;
+      width: @loading-rect-size-item-width * 0.6;
+    }
+
+    &-item-mini {
+      height: @loading-rect-size-item-height * 0.7;
+      width: @loading-rect-size-item-width * 0.4;
+    }
+
+    @keyframes rect {
+      0% {
+        opacity: 0.3;
+      }
+      25% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.3;
+      }
+      65% {
+        opacity: 1;
+      }
+      100% {
+        opacity: 0.3;
+      }
+    }
+  }
+
+  &__disappear {
+    @loading-disappear-size-item-width: 15px;
+    @loading-disappear-size-item-height: 15px;
+
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-flow: nowrap;
+
+    &-large {
+      width: @loading-large-width;
+      height: @loading-large-height;
+    }
+
+    &-normal {
+      width: @loading-normal-width;
+      height: @loading-normal-height;
+    }
+
+    &-small {
+      width: @loading-small-width;
+      height: @loading-small-height;
+    }
+
+    &-mini {
+      width: @loading-mini-width;
+      height: @loading-mini-height;
+    }
+
+    &-item {
+      border-radius: 50%;
+      animation: 0.5s ease-in-out infinite alternate disappear;
+
+      &:nth-child(1) {
+        animation-delay: -0.4s;
+      }
+
+      &:nth-child(2) {
+        animation-delay: -0.2s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 0s;
+      }
+    }
+
+    &-item-large {
+      height: @loading-disappear-size-item-height;
+      width: @loading-disappear-size-item-width;
+    }
+
+    &-item-normal {
+      height: @loading-disappear-size-item-height * 0.8;
+      width: @loading-disappear-size-item-width * 0.8;
+    }
+
+    &-item-small {
+      height: @loading-disappear-size-item-height * 0.6;
+      width: @loading-disappear-size-item-width * 0.6;
+    }
+
+    &-item-mini {
+      height: @loading-disappear-size-item-height * 0.4;
+      width: @loading-disappear-size-item-width * 0.4;
+    }
+
+    @keyframes disappear {
+      0% {
+        opacity: 1;
+      }
+      100% {
+        opacity: 0;
+      }
+    }
+  }
+}

package/lib/loading/props.js

@@ -0,0 +1,39 @@
+"use strict";
+
+exports.__esModule = true;
+exports.typeValidator = typeValidator;
+exports.sizeValidator = sizeValidator;
+exports.props = void 0;
+
+function typeValidator(type) {
+  return ['circle', 'wave', 'cube', 'rect', 'disappear'].includes(type);
+}
+
+function sizeValidator(size) {
+  return ['normal', 'mini', 'small', 'large'].includes(size);
+}
+
+var props = {
+  // loading类型
+  type: {
+    type: String,
+    default: 'circle',
+    validator: typeValidator
+  },
+  radius: {
+    type: [String, Number],
+    default: 15
+  },
+  // loading尺寸
+  size: {
+    type: String,
+    default: 'normal',
+    validator: sizeValidator
+  },
+  // loading颜色
+  color: {
+    type: String,
+    default: 'currentColor'
+  }
+};
+exports.props = props;

package/lib/loading/style/index.js

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

package/lib/loading/style/less.js

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

package/lib/locale/en-US.js

@@ -0,0 +1,107 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  // Dialog
+  dialogTitle: 'Hint',
+  dialogConfirmButtonText: 'Confirm',
+  dialogCancelButtonText: 'Cancel',
+  // ActionSheet
+  actionSheetTitle: 'Select One',
+  // List
+  listLoadingText: 'Loading',
+  listFinishedText: 'No more',
+  listErrorText: 'Load fail',
+  // Picker
+  pickerTitle: 'Pick it',
+  pickerConfirmButtonText: 'Confirm',
+  pickerCancelButtonText: 'Cancel',
+  // date-picker
+  datePickerMonthDict: {
+    '01': {
+      name: 'January',
+      abbr: 'JAN'
+    },
+    '02': {
+      name: 'February',
+      abbr: 'FEB'
+    },
+    '03': {
+      name: 'March',
+      abbr: 'MAR'
+    },
+    '04': {
+      name: 'April',
+      abbr: 'APR'
+    },
+    '05': {
+      name: 'May',
+      abbr: 'MAY'
+    },
+    '06': {
+      name: 'June',
+      abbr: 'JUN'
+    },
+    '07': {
+      name: 'July',
+      abbr: 'JUL'
+    },
+    '08': {
+      name: 'August',
+      abbr: 'AUG'
+    },
+    '09': {
+      name: 'September',
+      abbr: 'SEP'
+    },
+    '10': {
+      name: 'October',
+      abbr: 'OCT'
+    },
+    '11': {
+      name: 'November',
+      abbr: 'NOV'
+    },
+    '12': {
+      name: 'December',
+      abbr: 'DEC'
+    }
+  },
+  datePickerWeekDict: {
+    '0': {
+      name: 'Sunday',
+      abbr: 'S'
+    },
+    '1': {
+      name: 'Monday',
+      abbr: 'M'
+    },
+    '2': {
+      name: 'Tuesday',
+      abbr: 'T'
+    },
+    '3': {
+      name: 'Wednesday',
+      abbr: 'W'
+    },
+    '4': {
+      name: 'Thursday',
+      abbr: 'T'
+    },
+    '5': {
+      name: 'Friday',
+      abbr: 'F'
+    },
+    '6': {
+      name: 'Saturday',
+      abbr: 'S'
+    }
+  },
+  datePickerSelected: ' selected',
+  // pagination
+  paginationItem: '',
+  paginationPage: 'page',
+  paginationJump: 'Go to'
+};
+exports.default = _default;