@varlet/ui 1.23.3 → 1.23.4-alpha.3

package/lib/uploader/uploader.css

@@ -0,0 +1 @@
+:root { --uploader-action-background: #f7f8fa; --uploader-action-icon-color: #888; --uploader-action-icon-size: 24px; --uploader-action-margin: 0 10px 10px 0; --uploader-file-size: 80px; --uploader-file-margin: 0 10px 10px 0; --uploader-file-name-background: #f7f8fa; --uploader-file-name-color: #888; --uploader-file-name-font-size: 12px; --uploader-file-name-padding: 10px; --uploader-file-text-align: center; --uploader-file-close-background: rgba(0, 0, 0, 0.3); --uploader-file-close-size: 24px; --uploader-file-close-icon-font-size: 14px; --uploader-file-close-icon-color: #fff; --uploader-file-cover-fit: cover; --uploader-file-cover-background: #f7f8fa; --uploader-preview-video-width: 100vw; --uploader-preview-video-height: 100vw; --uploader-file-indicator-height: 4px; --uploader-file-indicator-normal-color: var(--color-disabled); --uploader-file-indicator-success-color: var(--color-success); --uploader-file-indicator-error-color: var(--color-danger); --uploader-disabled-color: var(--color-disabled); --uploader-disabled-text-color: var(--color-text-disabled); --uploader-loading-background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0));}@keyframes var-uploader-loading-animation { from { transform: translateX(-100%); } to { transform: translateX(100%); }}.var-uploader { width: 100%;}.var-uploader__file-list { width: 100%; display: flex; flex-wrap: wrap;}.var-uploader__file { position: relative; width: var(--uploader-file-size); height: var(--uploader-file-size); margin: var(--uploader-file-margin); overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-uploader__file-name { position: absolute; width: 100%; height: 100%; line-height: calc(var(--uploader-file-size) - var(--uploader-file-name-padding) * 2); font-size: var(--uploader-file-name-font-size); z-index: 0; background: var(--uploader-file-name-background); padding: var(--uploader-file-name-padding); color: var(--uploader-file-name-color); text-align: var(--uploader-file-text-align); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; user-select: none; transition: background-color 0.25s;}.var-uploader__file-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: var(--uploader-file-cover-background); object-fit: var(--uploader-file-cover-fit); pointer-events: none; transition: background-color 0.25s;}.var-uploader__file-close { position: absolute; top: 0; right: 0; z-index: 2; border-top: var(--uploader-file-close-size) solid var(--uploader-file-close-background); border-left: var(--uploader-file-close-size) solid transparent;}.var-uploader__file-close-icon[var-uploader-cover] { position: absolute; top: calc(-1 * var(--uploader-file-close-size)); right: 0; font-size: var(--uploader-file-close-icon-font-size); color: var(--uploader-file-close-icon-color);}.var-uploader__file-indicator { position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: var(--uploader-file-indicator-height); transition: all 0.25s; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--uploader-file-indicator-normal-color);}.var-uploader__action { position: relative; display: flex; justify-content: center; align-items: center; color: var(--uploader-action-icon-color); width: var(--uploader-file-size); height: var(--uploader-file-size); background: var(--uploader-action-background); margin: var(--uploader-action-margin); transition: background-color 0.25s;}.var-uploader__action-icon[var-uploader-cover] { font-size: var(--uploader-action-icon-size);}.var-uploader__action-input { position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-uploader__preview[var-uploader-cover] { background: #000; box-shadow: none;}.var-uploader__preview-video { width: var(--uploader-preview-video-width); height: var(--uploader-preview-video-height);}.var-uploader--loading::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; animation: var-uploader-loading-animation 0.6s infinite; background: var(--uploader-loading-background); transition: background-color 0.25s;}.var-uploader--success { background: var(--uploader-file-indicator-success-color);}.var-uploader--error { background: var(--uploader-file-indicator-error-color);}.var-uploader--disabled { background: var(--uploader-disabled-color); color: var(--uploader-disabled-text-color);}

package/lib/uploader/uploader.less

@@ -0,0 +1,219 @@
+@uploader-action-background: #f7f8fa;
+@uploader-action-icon-color: #888;
+@uploader-action-icon-size: 24px;
+@uploader-action-margin: 0 10px 10px 0;
+@uploader-file-size: 80px;
+@uploader-file-margin: 0 10px 10px 0;
+@uploader-file-name-background: #f7f8fa;
+@uploader-file-name-color: #888;
+@uploader-file-name-font-size: 12px;
+@uploader-file-name-padding: 10px;
+@uploader-file-text-align: center;
+@uploader-file-close-background: rgba(0, 0, 0, 0.3);
+@uploader-file-close-size: 24px;
+@uploader-file-close-icon-font-size: 14px;
+@uploader-file-close-icon-color: #fff;
+@uploader-file-cover-fit: cover;
+@uploader-file-cover-background: #f7f8fa;
+@uploader-preview-video-width: 100vw;
+@uploader-preview-video-height: 100vw;
+@uploader-file-indicator-height: 4px;
+@uploader-file-indicator-normal-color: var(--color-disabled);
+@uploader-file-indicator-success-color: var(--color-success);
+@uploader-file-indicator-error-color: var(--color-danger);
+@uploader-disabled-color: var(--color-disabled);
+@uploader-disabled-text-color: var(--color-text-disabled);
+@uploader-loading-background: linear-gradient(
+  90deg,
+  hsla(0, 0%, 100%, 0),
+  hsla(0, 0%, 100%, 0.3),
+  hsla(0, 0%, 100%, 0)
+);
+
+:root {
+  --uploader-action-background: @uploader-action-background;
+  --uploader-action-icon-color: @uploader-action-icon-color;
+  --uploader-action-icon-size: @uploader-action-icon-size;
+  --uploader-action-margin: @uploader-action-margin;
+  --uploader-file-size: @uploader-file-size;
+  --uploader-file-margin: @uploader-file-margin;
+  --uploader-file-name-background: @uploader-file-name-background;
+  --uploader-file-name-color: @uploader-file-name-color;
+  --uploader-file-name-font-size: @uploader-file-name-font-size;
+  --uploader-file-name-padding: @uploader-file-name-padding;
+  --uploader-file-text-align: @uploader-file-text-align;
+  --uploader-file-close-background: @uploader-file-close-background;
+  --uploader-file-close-size: @uploader-file-close-size;
+  --uploader-file-close-icon-font-size: @uploader-file-close-icon-font-size;
+  --uploader-file-close-icon-color: @uploader-file-close-icon-color;
+  --uploader-file-cover-fit: @uploader-file-cover-fit;
+  --uploader-file-cover-background: @uploader-file-cover-background;
+  --uploader-preview-video-width: @uploader-preview-video-width;
+  --uploader-preview-video-height: @uploader-preview-video-height;
+  --uploader-file-indicator-height: @uploader-file-indicator-height;
+  --uploader-file-indicator-normal-color: @uploader-file-indicator-normal-color;
+  --uploader-file-indicator-success-color: @uploader-file-indicator-success-color;
+  --uploader-file-indicator-error-color: @uploader-file-indicator-error-color;
+  --uploader-disabled-color: @uploader-disabled-color;
+  --uploader-disabled-text-color: @uploader-disabled-text-color;
+  --uploader-loading-background: @uploader-loading-background;
+}
+
+@keyframes var-uploader-loading-animation {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}
+
+.var-uploader {
+  width: 100%;
+
+  &__file-list {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  &__file {
+    position: relative;
+    width: var(--uploader-file-size);
+    height: var(--uploader-file-size);
+    margin: var(--uploader-file-margin);
+    overflow: hidden;
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  &__file-name {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    line-height: calc(var(--uploader-file-size) - var(--uploader-file-name-padding) * 2);
+    font-size: var(--uploader-file-name-font-size);
+    z-index: 0;
+    background: var(--uploader-file-name-background);
+    padding: var(--uploader-file-name-padding);
+    color: var(--uploader-file-name-color);
+    text-align: var(--uploader-file-text-align);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    user-select: none;
+    transition: background-color 0.25s;
+  }
+
+  &__file-cover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    background: var(--uploader-file-cover-background);
+    object-fit: var(--uploader-file-cover-fit);
+    pointer-events: none;
+    transition: background-color 0.25s;
+  }
+
+  &__file-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 2;
+    border-top: var(--uploader-file-close-size) solid var(--uploader-file-close-background);
+    border-left: var(--uploader-file-close-size) solid transparent;
+  }
+
+  &__file-close-icon[var-uploader-cover] {
+    position: absolute;
+    top: calc(-1 * var(--uploader-file-close-size));
+    right: 0;
+    font-size: var(--uploader-file-close-icon-font-size);
+    color: var(--uploader-file-close-icon-color);
+  }
+
+  &__file-indicator {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    z-index: 2;
+    width: 100%;
+    height: var(--uploader-file-indicator-height);
+    transition: all 0.25s;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    background: var(--uploader-file-indicator-normal-color);
+  }
+
+  &__action {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--uploader-action-icon-color);
+    width: var(--uploader-file-size);
+    height: var(--uploader-file-size);
+    background: var(--uploader-action-background);
+    margin: var(--uploader-action-margin);
+    transition: background-color 0.25s;
+  }
+
+  &__action-icon[var-uploader-cover] {
+    font-size: var(--uploader-action-icon-size);
+  }
+
+  &__action-input {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  &__preview[var-uploader-cover] {
+    background: #000;
+    box-shadow: none;
+  }
+
+  &__preview-video {
+    width: var(--uploader-preview-video-width);
+    height: var(--uploader-preview-video-height);
+  }
+
+  &--loading {
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+      animation: var-uploader-loading-animation 0.6s infinite;
+      background: var(--uploader-loading-background);
+      transition: background-color 0.25s;
+    }
+  }
+
+  &--success {
+    background: var(--uploader-file-indicator-success-color);
+  }
+
+  &--error {
+    background: var(--uploader-file-indicator-error-color);
+  }
+
+  &--disabled {
+    background: var(--uploader-disabled-color);
+    color: var(--uploader-disabled-text-color);
+  }
+}

package/lib/utils/components.js

@@ -0,0 +1,276 @@
+"use strict";
+
+exports.__esModule = true;
+exports.pickProps = pickProps;
+exports.mount = mount;
+exports.mountInstance = mountInstance;
+exports.flatVNodes = flatVNodes;
+exports.useAtChildrenCounter = useAtChildrenCounter;
+exports.useAtParentIndex = useAtParentIndex;
+exports.useChildren = useChildren;
+exports.useParent = useParent;
+exports.keyInProvides = keyInProvides;
+exports.useValidation = useValidation;
+exports.addRouteListener = addRouteListener;
+exports.useTeleport = useTeleport;
+
+var _vue = require("vue");
+
+var _shared = require("./shared");
+
+var _excluded = ["collect", "clear"];
+
+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 _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+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); }
+
+function pickProps(props, propsKey) {
+  return Array.isArray(propsKey) ? propsKey.reduce((pickedProps, key) => {
+    pickedProps[key] = props[key];
+    return pickedProps;
+  }, {}) : props[propsKey];
+}
+
+function mount(component) {
+  var app = (0, _vue.createApp)(component);
+  var host = document.createElement('div');
+  document.body.appendChild(host);
+  return {
+    instance: app.mount(host),
+
+    unmount() {
+      app.unmount();
+      document.body.removeChild(host);
+    }
+
+  };
+}
+
+function mountInstance(component, props = {}, eventListener = {}) {
+  var Host = {
+    setup() {
+      return () => (0, _vue.h)(component, _extends({}, props, eventListener));
+    }
+
+  };
+  var {
+    unmount
+  } = mount(Host);
+  return {
+    unmountInstance: unmount
+  };
+}
+
+function flatVNodes(subTree) {
+  var vNodes = [];
+
+  var flat = subTree => {
+    if (subTree != null && subTree.component) {
+      flat(subTree == null ? void 0 : subTree.component.subTree);
+      return;
+    }
+
+    if (Array.isArray(subTree == null ? void 0 : subTree.children)) {
+      subTree.children.forEach(child => {
+        if ((0, _vue.isVNode)(child)) {
+          vNodes.push(child);
+          flat(child);
+        }
+      });
+    }
+  };
+
+  flat(subTree);
+  return vNodes;
+}
+
+function useAtChildrenCounter(key) {
+  var instances = (0, _vue.reactive)([]);
+  var parentInstance = (0, _vue.getCurrentInstance)();
+
+  var sortInstances = () => {
+    var vNodes = flatVNodes(parentInstance.subTree);
+    instances.sort((a, b) => {
+      return vNodes.indexOf(a.vnode) - vNodes.indexOf(b.vnode);
+    });
+  };
+
+  var collect = instance => {
+    instances.push(instance);
+    sortInstances();
+  };
+
+  var clear = instance => {
+    (0, _shared.removeItem)(instances, instance);
+  };
+
+  (0, _vue.provide)(key, {
+    collect,
+    clear,
+    instances
+  });
+  var length = (0, _vue.computed)(() => instances.length);
+  return {
+    length
+  };
+}
+
+function useAtParentIndex(key) {
+  if (!keyInProvides(key)) {
+    return {
+      index: null
+    };
+  }
+
+  var childrenCounter = (0, _vue.inject)(key);
+  var {
+    collect,
+    clear,
+    instances
+  } = childrenCounter;
+  var instance = (0, _vue.getCurrentInstance)();
+  (0, _vue.onMounted)(() => {
+    (0, _vue.nextTick)().then(() => collect(instance));
+  });
+  (0, _vue.onUnmounted)(() => {
+    (0, _vue.nextTick)().then(() => clear(instance));
+  });
+  var index = (0, _vue.computed)(() => instances.indexOf(instance));
+  return {
+    index
+  };
+}
+
+function useChildren(key) {
+  var childProviders = [];
+
+  var collect = childProvider => {
+    childProviders.push(childProvider);
+  };
+
+  var clear = childProvider => {
+    (0, _shared.removeItem)(childProviders, childProvider);
+  };
+
+  var bindChildren = parentProvider => {
+    (0, _vue.provide)(key, _extends({
+      collect,
+      clear
+    }, parentProvider));
+  };
+
+  return {
+    childProviders,
+    bindChildren
+  };
+}
+
+function useParent(key) {
+  if (!keyInProvides(key)) {
+    return {
+      parentProvider: null,
+      bindParent: null
+    };
+  }
+
+  var rawParentProvider = (0, _vue.inject)(key);
+
+  var {
+    collect,
+    clear
+  } = rawParentProvider,
+      parentProvider = _objectWithoutPropertiesLoose(rawParentProvider, _excluded);
+
+  var bindParent = childProvider => {
+    (0, _vue.onMounted)(() => collect(childProvider));
+    (0, _vue.onBeforeUnmount)(() => clear(childProvider));
+  };
+
+  return {
+    parentProvider,
+    bindParent
+  };
+}
+
+function keyInProvides(key) {
+  var instance = (0, _vue.getCurrentInstance)();
+  return key in instance.provides;
+}
+
+function useValidation() {
+  var errorMessage = (0, _vue.ref)('');
+
+  var validate = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(function* (rules, value, apis) {
+      if (!(0, _shared.isArray)(rules) || !rules.length) {
+        return true;
+      }
+
+      var resArr = yield Promise.all(rules.map(rule => rule(value, apis)));
+      return !resArr.some(res => {
+        if (res !== true) {
+          errorMessage.value = String(res);
+          return true;
+        }
+
+        return false;
+      });
+    });
+
+    return function validate(_x, _x2, _x3) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var resetValidation = () => {
+    errorMessage.value = '';
+  };
+
+  var validateWithTrigger = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(function* (validateTrigger, trigger, rules, value, apis) {
+      if (validateTrigger.includes(trigger)) {
+        ;
+        (yield validate(rules, value, apis)) && (errorMessage.value = '');
+      }
+    });
+
+    return function validateWithTrigger(_x4, _x5, _x6, _x7, _x8) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  return {
+    errorMessage,
+    validate,
+    resetValidation,
+    validateWithTrigger
+  };
+}
+
+function addRouteListener(cb) {
+  (0, _vue.onMounted)(() => {
+    window.addEventListener('hashchange', cb);
+    window.addEventListener('popstate', cb);
+  });
+  (0, _vue.onUnmounted)(() => {
+    window.removeEventListener('hashchange', cb);
+    window.removeEventListener('popstate', cb);
+  });
+}
+
+function useTeleport() {
+  var disabled = (0, _vue.ref)(false);
+  (0, _vue.onActivated)(() => {
+    disabled.value = false;
+  });
+  (0, _vue.onDeactivated)(() => {
+    disabled.value = true;
+  });
+  return {
+    disabled
+  };
+}