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

package/lib/input/index.js

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

package/lib/input/input.css

@@ -0,0 +1 @@
+:root { --input-input-text-color: #555; --input-error-color: var(--color-danger); --input-blur-color: #888; --input-focus-color: var(--color-primary); --input-placeholder-size: 16px; --input-textarea-height: auto; --input-textarea-padding-top: 8px; --input-icon-padding: 16px 0 0; --input-icon-size: 20px; --input-line-size: 1px; --input-line-spread-size: 2px; --input-disabled-color: var(--color-text-disabled);}.var-input-footer-margin-enter-from,.var-input-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-input-footer-margin-enter-active,.var-input-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-input { width: 100%; color: var(--input-input-text-color);}.var-input__controller { width: 100%; display: flex; position: relative;}.var-input__wrap { position: relative; flex-grow: 1; display: flex; flex-direction: column; padding-top: var(--input-placeholder-size);}.var-input__icon { display: flex; align-items: center; padding: var(--input-icon-padding); font-size: 20px;}.var-input__placeholder { position: absolute; top: 50%; left: 0; transform-origin: left; transition-property: top, transform; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--input-placeholder-size) / 2)) scale(1); font-size: var(--input-placeholder-size); color: var(--input-blur-color);}.var-input__textarea-placeholder { position: absolute; top: 0; left: 0; transform-origin: left; transition: transform 0.3s; transform: translate(0, calc(var(--input-textarea-padding-top) + var(--input-placeholder-size))) scale(1); font-size: var(--input-placeholder-size); color: var(--input-blur-color);}.var-input__autocomplete { width: 0; height: 0; padding: 0; border: none; outline: none; font-size: 0;}.var-input__input { width: 100%; height: 32px; padding: 0; outline: none; border: none; background: transparent; color: var(--input-input-text-color); caret-color: var(--input-focus-color); font: inherit;}.var-input__line { width: 100%; height: var(--input-line-size); background: var(--input-blur-color);}.var-input__dot { width: 100%; height: var(--input-line-spread-size); background: var(--input-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-input__clear-icon[var-input-cover] { display: flex; margin-left: 4px;}.var-input--textarea { padding-top: var(--input-textarea-padding-top); height: var(--input-textarea-height);}.var-input--placeholder-hint { top: 0; transform: translate(0, 0) scale(0.75);}.var-input--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-input--non-hint { padding-top: 0;}.var-input--placeholder-hidden { visibility: hidden;}.var-input--focus { color: var(--input-focus-color);}.var-input--spread { transform: scaleX(1);}.var-input--disabled { -webkit-text-fill-color: var(--input-disabled-color); opacity: 1; color: var(--input-disabled-color);}.var-input--error { color: var(--input-error-color);}.var-input--line-disabled { background: var(--input-disabled-color);}.var-input--line-error { background: var(--input-error-color);}.var-input--caret-error { caret-color: var(--input-error-color);}

package/lib/input/input.less

@@ -0,0 +1,183 @@
+@input-input-text-color: #555;
+@input-error-color: var(--color-danger);
+@input-blur-color: #888;
+@input-focus-color: var(--color-primary);
+@input-placeholder-size: 16px;
+@input-textarea-height: auto;
+@input-textarea-padding-top: 8px;
+@input-icon-padding: 16px 0 0;
+@input-icon-size: 20px;
+@input-line-size: 1px;
+@input-line-spread-size: 2px;
+@input-disabled-color: var(--color-text-disabled);
+
+:root {
+  --input-input-text-color: @input-input-text-color;
+  --input-error-color: @input-error-color;
+  --input-blur-color: @input-blur-color;
+  --input-focus-color: @input-focus-color;
+  --input-placeholder-size: @input-placeholder-size;
+  --input-textarea-height: @input-textarea-height;
+  --input-textarea-padding-top: @input-textarea-padding-top;
+  --input-icon-padding: @input-icon-padding;
+  --input-icon-size: @input-icon-size;
+  --input-line-size: @input-line-size;
+  --input-line-spread-size: @input-line-spread-size;
+  --input-disabled-color: @input-disabled-color;
+}
+
+.var {
+  &-input-footer-margin-enter-from,
+  &-input-footer-margin-leave-to {
+    opacity: 0;
+    margin-top: 2px !important;
+  }
+
+  &-input-footer-margin-enter-active,
+  &-input-footer-margin-leave-active {
+    transition: 0.2s all var(--cubic-bezier);
+  }
+}
+
+.var-input {
+  width: 100%;
+  color: var(--input-input-text-color);
+
+  &__controller {
+    width: 100%;
+    display: flex;
+    position: relative;
+  }
+
+  &__wrap {
+    position: relative;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    padding-top: var(--input-placeholder-size);
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    padding: var(--input-icon-padding);
+    font-size: 20px;
+  }
+
+  &__placeholder {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform-origin: left;
+    transition-property: top, transform;
+    transition-duration: 0.3s;
+    transform: translate(0, calc(-50% + var(--input-placeholder-size) / 2)) scale(1);
+    font-size: var(--input-placeholder-size);
+    color: var(--input-blur-color);
+  }
+
+  &__textarea-placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform-origin: left;
+    transition: transform 0.3s;
+    transform: translate(0, calc(var(--input-textarea-padding-top) + var(--input-placeholder-size))) scale(1);
+    font-size: var(--input-placeholder-size);
+    color: var(--input-blur-color);
+  }
+
+  &__autocomplete {
+    width: 0;
+    height: 0;
+    padding: 0;
+    border: none;
+    outline: none;
+    font-size: 0;
+  }
+
+  &__input {
+    width: 100%;
+    height: 32px;
+    padding: 0;
+    outline: none;
+    border: none;
+    background: transparent;
+    color: var(--input-input-text-color);
+    caret-color: var(--input-focus-color);
+    font: inherit;
+  }
+
+  &__line {
+    width: 100%;
+    height: var(--input-line-size);
+    background: var(--input-blur-color);
+  }
+
+  &__dot {
+    width: 100%;
+    height: var(--input-line-spread-size);
+    background: var(--input-focus-color);
+    transform: scaleX(0);
+    transform-origin: center;
+    transition: transform 0.3s var(--cubic-bezier);
+  }
+
+  &__clear-icon[var-input-cover] {
+    display: flex;
+    margin-left: 4px;
+  }
+
+  &--textarea {
+    padding-top: var(--input-textarea-padding-top);
+    height: var(--input-textarea-height);
+  }
+
+  &--placeholder-hint {
+    top: 0;
+    transform: translate(0, 0) scale(0.75);
+  }
+
+  &--placeholder-non-hint {
+    top: 50%;
+    transform: translate(0, -50%) scale(1);
+  }
+
+  &--non-hint {
+    padding-top: 0;
+  }
+
+  &--placeholder-hidden {
+    visibility: hidden;
+  }
+
+  &--focus {
+    color: var(--input-focus-color);
+  }
+
+  &--spread {
+    transform: scaleX(1);
+  }
+
+  &--disabled {
+    -webkit-text-fill-color: var(--input-disabled-color);
+    opacity: 1;
+    color: var(--input-disabled-color);
+  }
+
+  &--error {
+    color: var(--input-error-color);
+  }
+
+  &--line-disabled {
+    background: var(--input-disabled-color);
+  }
+
+  &--line-error {
+    background: var(--input-error-color);
+  }
+
+  &--caret-error {
+    caret-color: var(--input-error-color);
+  }
+}

package/lib/input/props.js

@@ -0,0 +1,96 @@
+"use strict";
+
+exports.__esModule = true;
+exports.typeValidator = typeValidator;
+exports.props = void 0;
+
+function typeValidator(type) {
+  return ['text', 'password', 'number'].includes(type);
+}
+
+var props = {
+  modelValue: {
+    type: String
+  },
+  type: {
+    type: String,
+    default: 'text',
+    validator: typeValidator
+  },
+  textarea: {
+    type: Boolean,
+    default: false
+  },
+  rows: {
+    type: [String, Number],
+    default: 8
+  },
+  placeholder: {
+    type: String
+  },
+  line: {
+    type: Boolean,
+    default: true
+  },
+  hint: {
+    type: Boolean,
+    default: true
+  },
+  textColor: {
+    type: String
+  },
+  focusColor: {
+    type: String
+  },
+  blurColor: {
+    type: String
+  },
+  maxlength: {
+    type: [String, Number]
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  clearable: {
+    type: Boolean,
+    default: false
+  },
+  resize: {
+    type: Boolean,
+    default: false
+  },
+  validateTrigger: {
+    type: Array,
+    default: () => ['onInput', 'onClear']
+  },
+  rules: {
+    type: Array
+  },
+  onFocus: {
+    type: Function
+  },
+  onBlur: {
+    type: Function
+  },
+  onClick: {
+    type: Function
+  },
+  onClear: {
+    type: Function
+  },
+  onInput: {
+    type: Function
+  },
+  onChange: {
+    type: Function
+  },
+  'onUpdate:modelValue': {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/input/provide.js

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

package/lib/input/style/index.js

@@ -0,0 +1,5 @@
+require('../../styles/common.css')
+require('../../icon/icon.css')
+require('../../form-details/formDetails.css')
+require('../input.css')
+require('../InputSfc.css')

package/lib/input/style/less.js

@@ -0,0 +1,5 @@
+require('../../styles/common.less')
+require('../../icon/icon.less')
+require('../../form-details/formDetails.less')
+require('../input.less')
+require('../InputSfc.less')

package/lib/lazy/index.js

@@ -0,0 +1,247 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports._LazyComponent = exports.defaultLazyOptions = exports.imageCache = exports.PIXEL = void 0;
+
+var _elements = require("../utils/elements");
+
+var _shared = require("../utils/shared");
+
+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); }); }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var BACKGROUND_IMAGE_ARG_NAME = 'background-image';
+var LAZY_LOADING = 'lazy-loading';
+var LAZY_ERROR = 'lazy-error';
+var LAZY_ATTEMPT = 'lazy-attempt';
+var EVENTS = ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'];
+var PIXEL = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
+exports.PIXEL = PIXEL;
+var lazyElements = [];
+var listenTargets = [];
+var imageCache = (0, _shared.createCache)(100);
+exports.imageCache = imageCache;
+var defaultLazyOptions = {
+  loading: PIXEL,
+  error: PIXEL,
+  attempt: 3,
+  throttleWait: 300,
+  events: EVENTS
+};
+exports.defaultLazyOptions = defaultLazyOptions;
+var checkAllWithThrottle = (0, _shared.throttle)(checkAll, defaultLazyOptions.throttleWait);
+
+function setSRC(el, src) {
+  if (el._lazy.arg === BACKGROUND_IMAGE_ARG_NAME) {
+    el.style.backgroundImage = "url(" + src + ")";
+  } else {
+    el.setAttribute('src', src);
+  }
+}
+
+function setLoading(el) {
+  el._lazy.loading && setSRC(el, el._lazy.loading);
+  checkAll();
+}
+
+function setError(el) {
+  el._lazy.error && setSRC(el, el._lazy.error);
+  el._lazy.state = 'error';
+  clear(el);
+  checkAll();
+}
+
+function setSuccess(el, attemptSRC) {
+  setSRC(el, attemptSRC);
+  el._lazy.state = 'success';
+  clear(el);
+  checkAll();
+}
+
+function bindEvents(listenTarget) {
+  var _defaultLazyOptions$e;
+
+  if (listenTargets.includes(listenTarget)) {
+    return;
+  }
+
+  listenTargets.push(listenTarget);
+  (_defaultLazyOptions$e = defaultLazyOptions.events) == null ? void 0 : _defaultLazyOptions$e.forEach(event => {
+    listenTarget.addEventListener(event, checkAllWithThrottle, {
+      passive: true
+    });
+  });
+}
+
+function unbindEvents() {
+  listenTargets.forEach(listenTarget => {
+    var _defaultLazyOptions$e2;
+
+    (_defaultLazyOptions$e2 = defaultLazyOptions.events) == null ? void 0 : _defaultLazyOptions$e2.forEach(event => {
+      listenTarget.removeEventListener(event, checkAllWithThrottle);
+    });
+  });
+  listenTargets.length = 0;
+}
+
+function createLazy(el, binding) {
+  var _el$getAttribute, _el$getAttribute2;
+
+  var lazyOptions = {
+    loading: (_el$getAttribute = el.getAttribute(LAZY_LOADING)) != null ? _el$getAttribute : defaultLazyOptions.loading,
+    error: (_el$getAttribute2 = el.getAttribute(LAZY_ERROR)) != null ? _el$getAttribute2 : defaultLazyOptions.error,
+    attempt: el.getAttribute(LAZY_ATTEMPT) ? Number(el.getAttribute(LAZY_ATTEMPT)) : defaultLazyOptions.attempt
+  };
+  el._lazy = _extends({
+    src: binding.value,
+    arg: binding.arg,
+    currentAttempt: 0,
+    state: 'pending',
+    attemptLock: false
+  }, lazyOptions);
+  setSRC(el, PIXEL);
+  defaultLazyOptions.filter == null ? void 0 : defaultLazyOptions.filter(el._lazy);
+}
+
+function createImage(el, attemptSRC) {
+  var image = new Image();
+  image.src = attemptSRC;
+  el._lazy.preloadImage = image;
+  image.addEventListener('load', () => {
+    el._lazy.attemptLock = false;
+    imageCache.add(attemptSRC);
+    setSuccess(el, attemptSRC);
+  });
+  image.addEventListener('error', () => {
+    el._lazy.attemptLock = false;
+    el._lazy.currentAttempt >= el._lazy.attempt ? setError(el) : attemptLoad(el);
+  });
+}
+
+function attemptLoad(el) {
+  if (el._lazy.attemptLock) {
+    return;
+  }
+
+  el._lazy.attemptLock = true;
+  el._lazy.currentAttempt++;
+  var {
+    src: attemptSRC
+  } = el._lazy;
+
+  if (imageCache.has(attemptSRC)) {
+    setSuccess(el, attemptSRC);
+    el._lazy.attemptLock = false;
+    return;
+  }
+
+  setLoading(el);
+  createImage(el, attemptSRC);
+}
+
+function check(_x) {
+  return _check.apply(this, arguments);
+}
+
+function _check() {
+  _check = _asyncToGenerator(function* (el) {
+    ;
+    (yield (0, _elements.inViewport)(el)) && attemptLoad(el);
+  });
+  return _check.apply(this, arguments);
+}
+
+function checkAll() {
+  lazyElements.forEach(el => check(el));
+}
+
+function add(_x2) {
+  return _add.apply(this, arguments);
+}
+
+function _add() {
+  _add = _asyncToGenerator(function* (el) {
+    !lazyElements.includes(el) && lazyElements.push(el);
+    (0, _elements.getAllParentScroller)(el).forEach(bindEvents);
+    yield check(el);
+  });
+  return _add.apply(this, arguments);
+}
+
+function clear(el) {
+  (0, _shared.removeItem)(lazyElements, el);
+  lazyElements.length === 0 && unbindEvents();
+}
+
+function diff(el, binding) {
+  var {
+    src,
+    arg
+  } = el._lazy;
+  return src !== binding.value || arg !== binding.arg;
+}
+
+function mounted(_x3, _x4) {
+  return _mounted.apply(this, arguments);
+}
+
+function _mounted() {
+  _mounted = _asyncToGenerator(function* (el, binding) {
+    createLazy(el, binding);
+    yield add(el);
+  });
+  return _mounted.apply(this, arguments);
+}
+
+function updated(_x5, _x6) {
+  return _updated.apply(this, arguments);
+}
+
+function _updated() {
+  _updated = _asyncToGenerator(function* (el, binding) {
+    if (!diff(el, binding)) {
+      lazyElements.includes(el) && (yield check(el));
+      return;
+    }
+
+    yield mounted(el, binding);
+  });
+  return _updated.apply(this, arguments);
+}
+
+function mergeLazyOptions(lazyOptions = {}) {
+  var {
+    events,
+    loading,
+    error,
+    attempt,
+    throttleWait,
+    filter
+  } = lazyOptions;
+  defaultLazyOptions.events = events != null ? events : defaultLazyOptions.events;
+  defaultLazyOptions.loading = loading != null ? loading : defaultLazyOptions.loading;
+  defaultLazyOptions.error = error != null ? error : defaultLazyOptions.error;
+  defaultLazyOptions.attempt = attempt != null ? attempt : defaultLazyOptions.attempt;
+  defaultLazyOptions.throttleWait = throttleWait != null ? throttleWait : defaultLazyOptions.throttleWait;
+  defaultLazyOptions.filter = filter;
+}
+
+var Lazy = {
+  mounted,
+  unmounted: clear,
+  updated,
+
+  install(app, lazyOptions) {
+    mergeLazyOptions(lazyOptions);
+    checkAllWithThrottle = (0, _shared.throttle)(checkAll, defaultLazyOptions.throttleWait);
+    app.directive('lazy', this);
+  }
+
+};
+var _LazyComponent = Lazy;
+exports._LazyComponent = _LazyComponent;
+var _default = Lazy;
+exports.default = _default;

package/lib/less.js

@@ -0,0 +1,62 @@
+require('./action-sheet/style/less')
+require('./app-bar/style/less')
+require('./back-top/style/less')
+require('./badge/style/less')
+require('./button/style/less')
+require('./card/style/less')
+require('./cell/style/less')
+require('./checkbox/style/less')
+require('./checkbox-group/style/less')
+require('./chip/style/less')
+require('./col/style/less')
+require('./collapse/style/less')
+require('./collapse-item/style/less')
+require('./context/style/less')
+require('./countdown/style/less')
+require('./counter/style/less')
+require('./date-picker/style/less')
+require('./dialog/style/less')
+require('./divider/style/less')
+require('./form/style/less')
+require('./form-details/style/less')
+require('./icon/style/less')
+require('./image/style/less')
+require('./image-preview/style/less')
+require('./index-anchor/style/less')
+require('./index-bar/style/less')
+require('./input/style/less')
+require('./lazy/style/less')
+require('./list/style/less')
+require('./loading/style/less')
+require('./locale/style/less')
+require('./menu/style/less')
+require('./option/style/less')
+require('./pagination/style/less')
+require('./picker/style/less')
+require('./popup/style/less')
+require('./progress/style/less')
+require('./pull-refresh/style/less')
+require('./radio/style/less')
+require('./radio-group/style/less')
+require('./rate/style/less')
+require('./ripple/style/less')
+require('./row/style/less')
+require('./select/style/less')
+require('./skeleton/style/less')
+require('./slider/style/less')
+require('./snackbar/style/less')
+require('./space/style/less')
+require('./step/style/less')
+require('./steps/style/less')
+require('./sticky/style/less')
+require('./style-provider/style/less')
+require('./swipe/style/less')
+require('./swipe-item/style/less')
+require('./switch/style/less')
+require('./tab/style/less')
+require('./tab-item/style/less')
+require('./table/style/less')
+require('./tabs/style/less')
+require('./tabs-items/style/less')
+require('./time-picker/style/less')
+require('./uploader/style/less')