@varlet/ui 1.23.4-alpha.4 → 1.23.4

package/lib/uploader/uploader.css

@@ -1 +0,0 @@
-: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

@@ -1,219 +0,0 @@
-@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

@@ -1,276 +0,0 @@
-"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
-  };
-}