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

package/lib/time-picker/utils.js

@@ -0,0 +1,148 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getIsDisableSecond = exports.getIsDisableMinute = exports.getNumberTime = exports.convertHour = exports.notConvert = void 0;
+
+var _props = require("./props");
+
+var _shared = require("../utils/shared");
+
+var notConvert = (format, ampm) => format === '24hr' || ampm === 'am';
+
+exports.notConvert = notConvert;
+
+var convertHour = (format, ampm, hour) => {
+  var index = _props.hoursAmpm.findIndex(hourAmpm => (0, _shared.toNumber)(hourAmpm) === (0, _shared.toNumber)(hour));
+
+  var getHour = notConvert(format, ampm) ? hour : _props.hours24[index];
+  return {
+    hourStr: getHour,
+    hourNum: (0, _shared.toNumber)(getHour)
+  };
+};
+
+exports.convertHour = convertHour;
+
+var getNumberTime = time => {
+  var [hour, minute, second] = time.split(':');
+  return {
+    hour: (0, _shared.toNumber)(hour),
+    minute: (0, _shared.toNumber)(minute),
+    second: (0, _shared.toNumber)(second)
+  };
+};
+
+exports.getNumberTime = getNumberTime;
+
+var getIsDisableMinute = values => {
+  var _values$allowedTime, _values$allowedTime2;
+
+  var {
+    time,
+    format,
+    ampm,
+    hour,
+    max,
+    min,
+    disableHour
+  } = values;
+  var {
+    hourStr,
+    hourNum
+  } = convertHour(format, ampm, hour);
+  var isBetweenMinMax = false;
+  var isAllow = false;
+  if (disableHour.includes(hourStr)) return true;
+
+  if (max && !min) {
+    var {
+      hour: maxHour,
+      minute: maxMinute
+    } = getNumberTime(max);
+    isBetweenMinMax = maxHour === hourNum && time > maxMinute;
+  }
+
+  if (!max && min) {
+    var {
+      hour: minHour,
+      minute: minMinute
+    } = getNumberTime(min);
+    isBetweenMinMax = minHour === hourNum && time < minMinute;
+  }
+
+  if (max && min) {
+    var {
+      hour: _maxHour,
+      minute: _maxMinute
+    } = getNumberTime(max);
+    var {
+      hour: _minHour,
+      minute: _minMinute
+    } = getNumberTime(min);
+    isBetweenMinMax = _minHour === hourNum && time < _minMinute || _maxHour === hourNum && time > _maxMinute;
+  }
+
+  if ((_values$allowedTime = values.allowedTime) != null && _values$allowedTime.minutes) isAllow = (_values$allowedTime2 = values.allowedTime) == null ? void 0 : _values$allowedTime2.minutes(time);
+  return isBetweenMinMax || isAllow;
+};
+
+exports.getIsDisableMinute = getIsDisableMinute;
+
+var getIsDisableSecond = values => {
+  var _values$allowedTime3, _values$allowedTime4;
+
+  var {
+    time,
+    format,
+    ampm,
+    hour,
+    minute,
+    max,
+    min,
+    disableHour
+  } = values;
+  var {
+    hourStr,
+    hourNum
+  } = convertHour(format, ampm, hour);
+  var isBetweenMinMax = false;
+  var isAllow = false;
+  if (disableHour.includes(hourStr)) return true;
+
+  if (max && !min) {
+    var {
+      hour: maxHour,
+      minute: maxMinute,
+      second: maxSecond
+    } = getNumberTime(max);
+    isBetweenMinMax = maxHour === hourNum && maxMinute < minute || maxMinute === minute && time > maxSecond;
+  }
+
+  if (!max && min) {
+    var {
+      hour: minHour,
+      minute: minMinute,
+      second: minSecond
+    } = getNumberTime(min);
+    isBetweenMinMax = minHour === hourNum && minMinute > minute || minMinute === minute && time > minSecond;
+  }
+
+  if (max && min) {
+    var {
+      hour: _maxHour2,
+      minute: _maxMinute2,
+      second: _maxSecond
+    } = getNumberTime(max);
+    var {
+      hour: _minHour2,
+      minute: _minMinute2,
+      second: _minSecond
+    } = getNumberTime(min);
+    isBetweenMinMax = _maxHour2 === hourNum && _maxMinute2 < minute || _minHour2 === hourNum && _minMinute2 > minute || _maxHour2 === hourNum && _maxMinute2 === minute && time > _maxSecond || _minHour2 === hourNum && _minMinute2 === minute && time < _minSecond;
+  }
+
+  if ((_values$allowedTime3 = values.allowedTime) != null && _values$allowedTime3.seconds) isAllow = (_values$allowedTime4 = values.allowedTime) == null ? void 0 : _values$allowedTime4.seconds(time);
+  return isBetweenMinMax || isAllow;
+};
+
+exports.getIsDisableSecond = getIsDisableSecond;

package/lib/uploader/Uploader.js

@@ -0,0 +1,433 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _formDetails = _interopRequireDefault(require("../form-details"));
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _popup = _interopRequireDefault(require("../popup"));
+
+var _imagePreview = _interopRequireDefault(require("../image-preview"));
+
+var _ripple = _interopRequireDefault(require("../ripple"));
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _shared = require("../utils/shared");
+
+var _components = require("../utils/components");
+
+var _provide = require("../form/provide");
+
+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 fid = 0;
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  class: "var-uploader var--box"
+};
+var _hoisted_2 = {
+  class: "var-uploader__file-list"
+};
+var _hoisted_3 = ["onClick"];
+var _hoisted_4 = {
+  class: "var-uploader__file-name"
+};
+var _hoisted_5 = ["onClick"];
+var _hoisted_6 = ["src", "alt"];
+var _hoisted_7 = ["multiple", "accept", "capture", "disabled"];
+var _hoisted_8 = ["src"];
+
+function render(_ctx, _cache) {
+  var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
+
+  var _component_var_form_details = (0, _vue.resolveComponent)("var-form-details");
+
+  var _component_var_popup = (0, _vue.resolveComponent)("var-popup");
+
+  var _directive_ripple = (0, _vue.resolveDirective)("ripple");
+
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", _hoisted_2, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.modelValue, f => {
+    return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+      class: (0, _vue.normalizeClass)(["var-uploader__file var-elevation--2", [f.state === 'loading' ? 'var-uploader--loading' : null]]),
+      key: f.id,
+      onClick: $event => _ctx.preview(f)
+    }, [(0, _vue.createElementVNode)("div", _hoisted_4, (0, _vue.toDisplayString)(f.name || f.url), 1
+    /* TEXT */
+    ), _ctx.removable ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+      key: 0,
+      class: "var-uploader__file-close",
+      onClick: (0, _vue.withModifiers)($event => _ctx.handleRemove(f), ["stop"])
+    }, [(0, _vue.createVNode)(_component_var_icon, {
+      class: "var-uploader__file-close-icon",
+      "var-uploader-cover": "",
+      name: "delete"
+    })], 8
+    /* PROPS */
+    , _hoisted_5)) : (0, _vue.createCommentVNode)("v-if", true), f.cover ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("img", {
+      key: 1,
+      class: "var-uploader__file-cover",
+      style: (0, _vue.normalizeStyle)({
+        objectFit: f.fit
+      }),
+      src: f.cover,
+      alt: f.name
+    }, null, 12
+    /* STYLE, PROPS */
+    , _hoisted_6)) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(["var-uploader__file-indicator", [f.state === 'success' ? 'var-uploader--success' : null, f.state === 'error' ? 'var-uploader--error' : null]])
+    }, null, 2
+    /* CLASS */
+    )], 10
+    /* CLASS, PROPS */
+    , _hoisted_3)), [[_directive_ripple, {
+      disabled: _ctx.disabled || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly || !_ctx.ripple
+    }]]);
+  }), 128
+  /* KEYED_FRAGMENT */
+  )), !_ctx.maxlength || _ctx.modelValue.length < _ctx.maxlength ? (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(["var--relative", [!_ctx.$slots.default ? 'var-uploader__action var-elevation--2' : null, _ctx.disabled || _ctx.formDisabled ? 'var-uploader--disabled' : null]])
+  }, [(0, _vue.createElementVNode)("input", {
+    class: "var-uploader__action-input",
+    type: "file",
+    multiple: _ctx.multiple,
+    accept: _ctx.accept,
+    capture: _ctx.capture,
+    disabled: _ctx.disabled || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly,
+    onChange: _cache[0] || (_cache[0] = (...args) => _ctx.handleChange && _ctx.handleChange(...args))
+  }, null, 40
+  /* PROPS, HYDRATE_EVENTS */
+  , _hoisted_7), (0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createVNode)(_component_var_icon, {
+    class: "var-uploader__action-icon",
+    "var-uploader-cover": "",
+    name: "plus"
+  })])], 2
+  /* CLASS */
+  )), [[_directive_ripple, {
+    disabled: _ctx.disabled || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly || !_ctx.ripple || _ctx.$slots.default
+  }]]) : (0, _vue.createCommentVNode)("v-if", true)]), (0, _vue.createVNode)(_component_var_form_details, {
+    "error-message": _ctx.errorMessage,
+    "maxlength-text": _ctx.maxlengthText
+  }, null, 8
+  /* PROPS */
+  , ["error-message", "maxlength-text"]), (0, _vue.createVNode)(_component_var_popup, {
+    class: "var-uploader__preview",
+    "var-uploader-cover": "",
+    position: "center",
+    show: _ctx.showPreview,
+    "onUpdate:show": _cache[1] || (_cache[1] = $event => _ctx.showPreview = $event),
+    onClosed: _cache[2] || (_cache[2] = $event => _ctx.currentPreview = null)
+  }, {
+    default: (0, _vue.withCtx)(() => {
+      var _ctx$currentPreview, _ctx$currentPreview2;
+
+      return [_ctx.currentPreview && _ctx.isHTMLSupportVideo((_ctx$currentPreview = _ctx.currentPreview) == null ? void 0 : _ctx$currentPreview.url) ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("video", {
+        key: 0,
+        class: "var-uploader__preview-video",
+        playsinline: "true",
+        "webkit-playsinline": "true",
+        "x5-playsinline": "true",
+        "x5-video-player-type": "h5",
+        "x5-video-player-fullscreen": "false",
+        controls: "",
+        src: (_ctx$currentPreview2 = _ctx.currentPreview) == null ? void 0 : _ctx$currentPreview2.url
+      }, null, 8
+      /* PROPS */
+      , _hoisted_8)) : (0, _vue.createCommentVNode)("v-if", true)];
+    }),
+    _: 1
+    /* STABLE */
+
+  }, 8
+  /* PROPS */
+  , ["show"])]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarUploader',
+  directives: {
+    Ripple: _ripple.default
+  },
+  components: {
+    VarIcon: _icon.default,
+    VarPopup: _popup.default,
+    VarFormDetails: _formDetails.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var showPreview = (0, _vue.ref)(false);
+    var currentPreview = (0, _vue.ref)(null);
+    var maxlengthText = (0, _vue.computed)(() => {
+      var {
+        maxlength,
+        modelValue: {
+          length
+        }
+      } = props;
+      return (0, _shared.isNumber)(maxlength) ? length + " / " + maxlength : '';
+    });
+    var {
+      form,
+      bindForm
+    } = (0, _provide.useForm)();
+    var {
+      errorMessage,
+      validateWithTrigger: vt,
+      validate: v,
+      // expose
+      resetValidation
+    } = (0, _components.useValidation)();
+
+    var preview = varFile => {
+      var {
+        disabled,
+        readonly,
+        previewed
+      } = props;
+
+      if (form != null && form.disabled.value || form != null && form.readonly.value || disabled || readonly || !previewed) {
+        return;
+      }
+
+      var {
+        url
+      } = varFile;
+
+      if ((0, _shared.isString)(url) && (0, _shared.isHTMLSupportImage)(url)) {
+        (0, _imagePreview.default)(url);
+        return;
+      }
+
+      if ((0, _shared.isString)(url) && (0, _shared.isHTMLSupportVideo)(url)) {
+        currentPreview.value = varFile;
+        showPreview.value = true;
+      }
+    };
+
+    var createVarFile = file => {
+      return {
+        id: fid++,
+        url: '',
+        cover: '',
+        name: file.name,
+        file
+      };
+    };
+
+    var getFiles = event => {
+      var el = event.target;
+      var {
+        files: fileList
+      } = el;
+      return Array.from(fileList);
+    };
+
+    var resolver = varFile => {
+      return new Promise(resolve => {
+        var fileReader = new FileReader();
+
+        fileReader.onload = () => {
+          var base64 = fileReader.result;
+          varFile.file.type.startsWith('image') && (varFile.cover = base64);
+          varFile.url = base64;
+          resolve(varFile);
+        };
+
+        fileReader.readAsDataURL(varFile.file);
+      });
+    };
+
+    var getResolvers = varFiles => varFiles.map(resolver);
+
+    var getBeforeReaders = varFiles => {
+      var {
+        onBeforeRead
+      } = props;
+      return varFiles.map(varFile => {
+        return new Promise(resolve => {
+          var valid = onBeforeRead ? onBeforeRead((0, _vue.reactive)(varFile)) : true;
+          Promise.resolve(valid).then(valid => resolve({
+            valid,
+            varFile
+          }));
+        });
+      });
+    };
+
+    var handleChange = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator(function* (event) {
+        var _props$onUpdateModel;
+
+        var {
+          maxsize,
+          maxlength,
+          modelValue,
+          onOversize,
+          onAfterRead,
+          readonly,
+          disabled
+        } = props;
+
+        if (form != null && form.disabled.value || form != null && form.readonly.value || disabled || readonly) {
+          return;
+        }
+
+        var getValidSizeVarFile = varFiles => {
+          return varFiles.filter(varFile => {
+            if (varFile.file.size > (0, _shared.toNumber)(maxsize)) {
+              onOversize == null ? void 0 : onOversize((0, _vue.reactive)(varFile));
+              return false;
+            }
+
+            return true;
+          });
+        };
+
+        var getValidLengthVarFiles = varFiles => {
+          var limit = Math.min(varFiles.length, (0, _shared.toNumber)(maxlength) - modelValue.length);
+          return varFiles.slice(0, limit);
+        }; // limit
+
+
+        var files = getFiles(event);
+        var varFiles = files.map(createVarFile);
+        varFiles = maxsize != null ? getValidSizeVarFile(varFiles) : varFiles;
+        varFiles = maxlength != null ? getValidLengthVarFiles(varFiles) : varFiles; // pre resolve
+
+        var resolvedVarFiles = yield Promise.all(getResolvers(varFiles));
+        var validationVarFiles = yield Promise.all(getBeforeReaders(resolvedVarFiles));
+        var validVarFiles = validationVarFiles.filter(({
+          valid
+        }) => valid).map(({
+          varFile
+        }) => varFile);
+        (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, [...modelValue, ...validVarFiles]);
+        event.target.value = '';
+        validVarFiles.forEach(varFile => onAfterRead == null ? void 0 : onAfterRead((0, _vue.reactive)(varFile)));
+      });
+
+      return function handleChange(_x) {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
+    var handleRemove = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(function* (removedVarFile) {
+        var _props$onUpdateModel2;
+
+        var {
+          disabled,
+          readonly,
+          modelValue,
+          onBeforeRemove,
+          onRemove
+        } = props;
+
+        if (form != null && form.disabled.value || form != null && form.readonly.value || disabled || readonly) {
+          return;
+        }
+
+        if (onBeforeRemove && !(yield onBeforeRemove(removedVarFile))) {
+          return;
+        }
+
+        var expectedFiles = modelValue.filter(varFile => varFile !== removedVarFile);
+        onRemove == null ? void 0 : onRemove(removedVarFile);
+        validateWithTrigger('onRemove');
+        (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, expectedFiles);
+      });
+
+      return function handleRemove(_x2) {
+        return _ref2.apply(this, arguments);
+      };
+    }(); // expose
+
+
+    var getSuccess = () => props.modelValue.filter(varFile => varFile.state === 'success'); // expose
+
+
+    var getError = () => props.modelValue.filter(varFile => varFile.state === 'error'); // expose
+
+
+    var getLoading = () => props.modelValue.filter(varFile => varFile.state === 'loading');
+
+    var varFileUtils = {
+      getSuccess,
+      getError,
+      getLoading
+    };
+
+    var validateWithTrigger = trigger => {
+      (0, _vue.nextTick)(() => {
+        var {
+          validateTrigger,
+          rules,
+          modelValue
+        } = props;
+        vt(validateTrigger, trigger, rules, modelValue, varFileUtils);
+      });
+    };
+
+    var callReset = false; // expose
+
+    var validate = () => v(props.rules, props.modelValue, varFileUtils); // expose
+
+
+    var reset = () => {
+      var _props$onUpdateModel3;
+
+      callReset = true;
+      (_props$onUpdateModel3 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel3.call(props, []);
+      resetValidation();
+    };
+
+    var uploaderProvider = {
+      validate,
+      resetValidation,
+      reset
+    };
+    bindForm == null ? void 0 : bindForm(uploaderProvider);
+    (0, _vue.watch)(() => props.modelValue, () => {
+      !callReset && validateWithTrigger('onChange');
+      callReset = false;
+    }, {
+      deep: true
+    });
+    return {
+      showPreview,
+      currentPreview,
+      errorMessage,
+      maxlengthText,
+      isHTMLSupportVideo: _shared.isHTMLSupportVideo,
+      isHTMLSupportImage: _shared.isHTMLSupportImage,
+      formDisabled: form == null ? void 0 : form.disabled,
+      formReadonly: form == null ? void 0 : form.readonly,
+      preview,
+      handleChange,
+      handleRemove,
+      getSuccess,
+      getError,
+      getLoading,
+      validate,
+      resetValidation,
+      reset
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/uploader/index.js

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

package/lib/uploader/props.js

@@ -0,0 +1,74 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  accept: {
+    type: String,
+    default: 'image/*'
+  },
+  capture: {
+    type: [String, Boolean],
+    default: undefined
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  removable: {
+    type: Boolean,
+    default: true
+  },
+  maxlength: {
+    type: [Number, String]
+  },
+  maxsize: {
+    type: [Number, String]
+  },
+  previewed: {
+    type: Boolean,
+    default: true
+  },
+  ripple: {
+    type: Boolean,
+    default: true
+  },
+  validateTrigger: {
+    type: Array,
+    default: () => ['onChange', 'onRemove']
+  },
+  rules: {
+    type: Array
+  },
+  onBeforeRead: {
+    type: Function
+  },
+  onAfterRead: {
+    type: Function
+  },
+  onBeforeRemove: {
+    type: Function
+  },
+  onRemove: {
+    type: Function
+  },
+  onOversize: {
+    type: Function
+  },
+  'onUpdate:modelValue': {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/uploader/provide.js

@@ -0,0 +1,3 @@
+"use strict";
+
+exports.__esModule = true;

package/lib/uploader/style/index.js

@@ -0,0 +1,8 @@
+require('../../styles/common.css')
+require('../../styles/elevation.css')
+require('../../form-details/formDetails.css')
+require('../../icon/icon.css')
+require('../../popup/popup.css')
+require('../../image-preview/imagePreview.css')
+require('../uploader.css')
+require('../UploaderSfc.css')

package/lib/uploader/style/less.js

@@ -0,0 +1,8 @@
+require('../../styles/common.less')
+require('../../styles/elevation.less')
+require('../../form-details/formDetails.less')
+require('../../icon/icon.less')
+require('../../popup/popup.less')
+require('../../image-preview/imagePreview.less')
+require('../uploader.less')
+require('../UploaderSfc.less')