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

package/lib/utils/elements.js

@@ -0,0 +1,261 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getLeft = getLeft;
+exports.getTop = getTop;
+exports.getScrollTop = getScrollTop;
+exports.getScrollLeft = getScrollLeft;
+exports.inViewport = inViewport;
+exports.getTranslate = getTranslate;
+exports.isHidden = isHidden;
+exports.getParentScroller = getParentScroller;
+exports.getAllParentScroller = getAllParentScroller;
+exports.requestAnimationFrame = requestAnimationFrame;
+exports.cancelAnimationFrame = cancelAnimationFrame;
+exports.nextTickFrame = nextTickFrame;
+exports.doubleRaf = doubleRaf;
+exports.scrollTo = scrollTo;
+exports.formatStyleVars = formatStyleVars;
+exports.toSizeUnit = exports.toPxNum = exports.isVh = exports.isVw = exports.isPercent = exports.isPx = exports.isRem = void 0;
+
+var _shared = require("./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 getLeft(element) {
+  var {
+    left
+  } = element.getBoundingClientRect();
+  return left + (document.body.scrollLeft || document.documentElement.scrollLeft);
+}
+
+function getTop(element) {
+  var {
+    top
+  } = element.getBoundingClientRect();
+  return top + (document.body.scrollTop || document.documentElement.scrollTop);
+}
+
+function getScrollTop(element) {
+  var top = 'scrollTop' in element ? element.scrollTop : element.pageYOffset; // iOS scroll bounce cause minus scrollTop
+
+  return Math.max(top, 0);
+}
+
+function getScrollLeft(element) {
+  var left = 'scrollLeft' in element ? element.scrollLeft : element.pageXOffset;
+  return Math.max(left, 0);
+}
+
+function inViewport(_x) {
+  return _inViewport.apply(this, arguments);
+}
+
+function _inViewport() {
+  _inViewport = _asyncToGenerator(function* (element) {
+    yield doubleRaf();
+    var {
+      top,
+      bottom,
+      left,
+      right
+    } = element.getBoundingClientRect();
+    var {
+      innerWidth,
+      innerHeight
+    } = window;
+    var xInViewport = left <= innerWidth && right >= 0;
+    var yInViewport = top <= innerHeight && bottom >= 0;
+    return xInViewport && yInViewport;
+  });
+  return _inViewport.apply(this, arguments);
+}
+
+function getTranslate(el) {
+  var {
+    transform
+  } = window.getComputedStyle(el);
+  return +transform.slice(transform.lastIndexOf(',') + 2, transform.length - 1);
+}
+
+function isHidden(el) {
+  var {
+    width,
+    height
+  } = el.getBoundingClientRect();
+  return width === 0 && height === 0;
+}
+
+function getParentScroller(el) {
+  var element = el;
+
+  while (element) {
+    if (!element.parentNode) {
+      break;
+    }
+
+    element = element.parentNode;
+
+    if (element === document.body || element === document.documentElement) {
+      break;
+    }
+
+    var scrollRE = /(scroll|auto)/;
+    var {
+      overflowY,
+      overflow
+    } = window.getComputedStyle(element);
+
+    if (scrollRE.test(overflowY) || scrollRE.test(overflow)) {
+      return element;
+    }
+  }
+
+  return window;
+}
+
+function getAllParentScroller(el) {
+  var allParentScroller = [];
+  var element = el;
+
+  while (element !== window) {
+    element = getParentScroller(element);
+    allParentScroller.push(element);
+  }
+
+  return allParentScroller;
+} // example 1rem
+
+
+var isRem = value => (0, _shared.isString)(value) && value.endsWith('rem'); // example 1 || 1px
+
+
+exports.isRem = isRem;
+
+var isPx = value => (0, _shared.isString)(value) && value.endsWith('px') || (0, _shared.isNumber)(value); // example 1%
+
+
+exports.isPx = isPx;
+
+var isPercent = value => (0, _shared.isString)(value) && value.endsWith('%'); // example 1vw
+
+
+exports.isPercent = isPercent;
+
+var isVw = value => (0, _shared.isString)(value) && value.endsWith('vw'); // example 1vh
+
+
+exports.isVw = isVw;
+
+var isVh = value => (0, _shared.isString)(value) && value.endsWith('vh'); // example return 1
+
+
+exports.isVh = isVh;
+
+var toPxNum = value => {
+  if ((0, _shared.isNumber)(value)) {
+    return value;
+  }
+
+  if (isPx(value)) {
+    return +value.replace('px', '');
+  }
+
+  if (isVw(value)) {
+    return +value.replace('vw', '') * window.innerWidth / 100;
+  }
+
+  if (isVh(value)) {
+    return +value.replace('vh', '') * window.innerHeight / 100;
+  }
+
+  if (isRem(value)) {
+    var num = +value.replace('rem', '');
+    var rootFontSize = window.getComputedStyle(document.documentElement).fontSize;
+    return num * parseFloat(rootFontSize);
+  }
+
+  if ((0, _shared.isString)(value)) {
+    return (0, _shared.toNumber)(value);
+  } // % and other
+
+
+  return 0;
+}; // example return 1px 1% 1vw 1vh 1rem null
+
+
+exports.toPxNum = toPxNum;
+
+var toSizeUnit = value => {
+  if (value == null) {
+    return undefined;
+  }
+
+  if (isPercent(value) || isVw(value) || isVh(value) || isRem(value)) {
+    return value;
+  }
+
+  return toPxNum(value) + "px";
+};
+
+exports.toSizeUnit = toSizeUnit;
+
+function requestAnimationFrame(fn) {
+  return globalThis.requestAnimationFrame ? globalThis.requestAnimationFrame(fn) : globalThis.setTimeout(fn, 16);
+}
+
+function cancelAnimationFrame(handle) {
+  globalThis.cancelAnimationFrame ? globalThis.cancelAnimationFrame(handle) : globalThis.clearTimeout(handle);
+}
+
+function nextTickFrame(fn) {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(fn);
+  });
+}
+
+function doubleRaf() {
+  return new Promise(resolve => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(resolve);
+    });
+  });
+}
+
+function scrollTo(element, {
+  top = 0,
+  left = 0,
+  duration = 300,
+  animation
+}) {
+  var startTime = Date.now();
+  var scrollTop = getScrollTop(element);
+  var scrollLeft = getScrollLeft(element);
+  return new Promise(resolve => {
+    var frame = () => {
+      var progress = (Date.now() - startTime) / duration;
+
+      if (progress < 1) {
+        var nextTop = scrollTop + (top - scrollTop) * animation(progress);
+        var nextLeft = scrollLeft + (left - scrollLeft) * animation(progress);
+        element.scrollTo(nextLeft, nextTop);
+        requestAnimationFrame(frame);
+      } else {
+        element.scrollTo(left, top);
+        resolve();
+      }
+    };
+
+    requestAnimationFrame(frame);
+  });
+}
+
+function formatStyleVars(styleVars) {
+  return Object.entries(styleVars != null ? styleVars : {}).reduce((styles, [key, value]) => {
+    var cssVar = key.startsWith('--') ? key : "--" + (0, _shared.kebabCase)(key);
+    styles[cssVar] = value;
+    return styles;
+  }, {});
+}

package/lib/utils/jest.js

@@ -0,0 +1,252 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getTouch = getTouch;
+exports.mockDoubleRaf = mockDoubleRaf;
+exports.trigger = trigger;
+exports.mockOffset = mockOffset;
+exports.mockImageNaturalSize = mockImageNaturalSize;
+exports.triggerDrag = triggerDrag;
+exports.mockTranslate = mockTranslate;
+exports.mockFileReader = mockFileReader;
+exports.mockStubs = mockStubs;
+exports.mockConsole = mockConsole;
+exports.mockScrollTo = mockScrollTo;
+exports.delay = void 0;
+
+var _vue = require("vue");
+
+var _testUtils = require("@vue/test-utils");
+
+var _shared = require("./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); }); }; }
+
+var delay = time => new Promise(resolve => setTimeout(resolve, time));
+
+exports.delay = delay;
+
+function getTouch(el, x, y) {
+  return {
+    identifier: Date.now(),
+    target: el,
+    pageX: x,
+    pageY: y,
+    clientX: x,
+    clientY: y,
+    radiusX: 2.5,
+    radiusY: 2.5,
+    rotationAngle: 10,
+    force: 0.5
+  };
+}
+
+function mockDoubleRaf() {
+  var originMethod = window.requestAnimationFrame;
+  Object.assign(window, {
+    requestAnimationFrame(fn) {
+      setTimeout(fn, 16);
+    }
+
+  });
+  return {
+    mockRestore() {
+      window.requestAnimationFrame = originMethod;
+    }
+
+  };
+}
+
+function trigger(wrapper, eventName, x = 0, y = 0, offsetX = 0, offsetY = 0) {
+  var el = 'element' in wrapper ? wrapper.element : wrapper;
+  var touchList = [getTouch(el, x, y)];
+  var event = document.createEvent('CustomEvent');
+  event.initCustomEvent(eventName, true, true, {});
+  Object.assign(event, {
+    clientX: x,
+    clientY: y,
+    offsetX,
+    offsetY,
+    touches: touchList,
+    targetTouches: touchList,
+    changedTouches: touchList
+  });
+  el.dispatchEvent(event);
+  return (0, _vue.nextTick)();
+}
+
+function mockOffset({
+  offsetWidth,
+  offsetHeight,
+  clientWidth,
+  clientHeight,
+  offsetLeft,
+  offsetTop
+} = {}) {
+  Object.defineProperties(HTMLElement.prototype, {
+    offsetWidth: {
+      get() {
+        return offsetWidth != null ? offsetWidth : parseFloat(window.getComputedStyle(this).width) || 0;
+      }
+
+    },
+    offsetHeight: {
+      get() {
+        return offsetHeight != null ? offsetHeight : parseFloat(window.getComputedStyle(this).height) || 0;
+      }
+
+    },
+    clientWidth: {
+      get() {
+        return clientWidth != null ? clientWidth : parseFloat(window.getComputedStyle(this).width) || 0;
+      }
+
+    },
+    clientHeight: {
+      get() {
+        return clientHeight != null ? clientHeight : parseFloat(window.getComputedStyle(this).height) || 0;
+      }
+
+    },
+    offsetLeft: {
+      get() {
+        return offsetLeft != null ? offsetLeft : parseFloat(window.getComputedStyle(this).marginLeft) || 0;
+      }
+
+    },
+    offsetTop: {
+      get() {
+        return offsetTop != null ? offsetTop : parseFloat(window.getComputedStyle(this).marginTop) || 0;
+      }
+
+    },
+    offsetParent: {
+      get() {
+        var _this$parentNode;
+
+        return (_this$parentNode = this.parentNode) != null ? _this$parentNode : {};
+      }
+
+    }
+  });
+}
+
+function mockImageNaturalSize(naturalWidth, naturalHeight) {
+  Object.defineProperties(HTMLImageElement.prototype, {
+    naturalWidth: {
+      get() {
+        return naturalWidth;
+      }
+
+    },
+    naturalHeight: {
+      get() {
+        return naturalHeight;
+      }
+
+    }
+  });
+}
+
+function triggerDrag(_x) {
+  return _triggerDrag.apply(this, arguments);
+}
+
+function _triggerDrag() {
+  _triggerDrag = _asyncToGenerator(function* (el, x = 0, y = 0) {
+    yield trigger(el, 'touchstart', 0, 0);
+    yield trigger(el, 'touchmove', x / 4, y / 4);
+    yield trigger(el, 'touchmove', x / 3, y / 3);
+    yield trigger(el, 'touchmove', x / 2, y / 2);
+    yield trigger(el, 'touchmove', x, y);
+    yield trigger(el, 'touchend', x, y);
+  });
+  return _triggerDrag.apply(this, arguments);
+}
+
+function mockTranslate() {
+  var originMethod = window.getComputedStyle;
+  var XRE = /translateX\((\d+)px\)/;
+  var YRE = /translateY\((\d+)px\)/;
+  Object.assign(window, {
+    getComputedStyle: el => {
+      var _styles$transform$mat, _styles$transform$mat2, _styles$transform$mat3, _styles$transform$mat4;
+
+      var styles = originMethod.call(window, el);
+      var x = (_styles$transform$mat = (_styles$transform$mat2 = styles.transform.match(XRE)) == null ? void 0 : _styles$transform$mat2[1]) != null ? _styles$transform$mat : 0;
+      var y = (_styles$transform$mat3 = (_styles$transform$mat4 = styles.transform.match(YRE)) == null ? void 0 : _styles$transform$mat4[1]) != null ? _styles$transform$mat3 : 0;
+      styles.transform = "matrix(1, 0, 0, 1, " + x + ", " + y + ")";
+      return styles;
+    }
+  });
+  return {
+    mockRestore() {
+      window.getComputedStyle = originMethod;
+    }
+
+  };
+}
+
+function mockFileReader(url) {
+  var originMethod = window.FileReader;
+
+  class FileReader {
+    constructor() {
+      this.result = '';
+    }
+
+    onload() {}
+
+    readAsDataURL() {
+      this.result = url;
+      this.onload();
+    }
+
+  }
+
+  Object.assign(window, {
+    FileReader
+  });
+  return {
+    mockRestore() {
+      window.FileReader = originMethod;
+    }
+
+  };
+}
+
+function mockStubs() {
+  var originStubs = _testUtils.config.global.stubs;
+  _testUtils.config.global.stubs = {};
+  return {
+    mockRestore() {
+      _testUtils.config.global.stubs = originStubs;
+    }
+
+  };
+}
+
+function mockConsole(method, fn = () => {}) {
+  var originMethod = console[method];
+  console[method] = fn;
+  return {
+    mockRestore() {
+      console[method] = originMethod;
+    }
+
+  };
+}
+
+function mockScrollTo(Element) {
+  Element.prototype.scrollTo = function (x, y) {
+    if ((0, _shared.isPlainObject)(x)) {
+      this.scrollLeft = x.left;
+      this.scrollTop = x.top;
+    } else {
+      this.scrollLeft = x;
+      this.scrollTop = y;
+    }
+  };
+}

package/lib/utils/shared.js

@@ -0,0 +1,214 @@
+"use strict";
+
+exports.__esModule = true;
+exports.parseFormat = parseFormat;
+exports.kebabCase = kebabCase;
+exports.uniq = exports.inBrowser = exports.dt = exports.easeInOutCubic = exports.cubic = exports.linear = exports.createCache = exports.debounce = exports.throttle = exports.removeItem = exports.isEmpty = exports.isURL = exports.isArray = exports.isPlainObject = exports.isNumber = exports.isBool = exports.isString = exports.isHTMLSupportVideo = exports.isHTMLSupportImage = exports.toNumber = void 0;
+
+var toNumber = val => {
+  if (val == null) return 0;
+
+  if (isString(val)) {
+    val = parseFloat(val);
+    val = Number.isNaN(val) ? 0 : val;
+    return val;
+  }
+
+  if (isBool(val)) return Number(val);
+  return val;
+};
+
+exports.toNumber = toNumber;
+
+var isHTMLSupportImage = val => {
+  if (val == null) {
+    return false;
+  }
+
+  return val.startsWith('data:image') || /\.(png|jpg|gif|jpeg|svg)$/.test(val);
+};
+
+exports.isHTMLSupportImage = isHTMLSupportImage;
+
+var isHTMLSupportVideo = val => {
+  if (val == null) {
+    return false;
+  }
+
+  return val.startsWith('data:video') || /\.(mp4|webm|ogg)$/.test(val);
+};
+
+exports.isHTMLSupportVideo = isHTMLSupportVideo;
+
+var isString = val => typeof val === 'string';
+
+exports.isString = isString;
+
+var isBool = val => typeof val === 'boolean';
+
+exports.isBool = isBool;
+
+var isNumber = val => typeof val === 'number';
+
+exports.isNumber = isNumber;
+
+var isPlainObject = val => Object.prototype.toString.call(val) === '[object Object]';
+
+exports.isPlainObject = isPlainObject;
+
+var isArray = val => Array.isArray(val);
+
+exports.isArray = isArray;
+
+var isURL = val => {
+  if (!val) {
+    return false;
+  }
+
+  return /^(http)|(\.*\/)/.test(val);
+};
+
+exports.isURL = isURL;
+
+var isEmpty = val => val === undefined || val === null || val === '' || Array.isArray(val) && !val.length;
+
+exports.isEmpty = isEmpty;
+
+var removeItem = (arr, item) => {
+  if (arr.length) {
+    var index = arr.indexOf(item);
+
+    if (index > -1) {
+      return arr.splice(index, 1);
+    }
+  }
+};
+
+exports.removeItem = removeItem;
+
+var throttle = (method, mustRunDelay = 200) => {
+  var timer;
+  var start = 0;
+  return function loop(...args) {
+    var now = Date.now();
+    var elapsed = now - start;
+
+    if (!start) {
+      start = now;
+    }
+
+    if (timer) {
+      window.clearTimeout(timer);
+    }
+
+    if (elapsed >= mustRunDelay) {
+      method.apply(this, args);
+      start = now;
+    } else {
+      timer = window.setTimeout(() => {
+        loop.apply(this, args);
+      }, mustRunDelay - elapsed);
+    }
+  };
+};
+
+exports.throttle = throttle;
+
+var debounce = (method, delay = 200) => {
+  var timer;
+  return function (...args) {
+    timer && window.clearTimeout(timer);
+    timer = window.setTimeout(() => {
+      method.apply(this, args);
+    }, delay);
+  };
+};
+
+exports.debounce = debounce;
+
+var createCache = max => {
+  var cache = [];
+  return {
+    cache,
+
+    has(key) {
+      return this.cache.includes(key);
+    },
+
+    add(key) {
+      if (this.has(key)) {
+        return;
+      }
+
+      this.cache.length === max && cache.shift();
+      this.cache.push(key);
+    },
+
+    remove(key) {
+      this.has(key) && removeItem(this.cache, key);
+    },
+
+    clear() {
+      this.cache.length = 0;
+    }
+
+  };
+};
+
+exports.createCache = createCache;
+
+var linear = value => value;
+
+exports.linear = linear;
+
+var cubic = value => Math.pow(value, 3);
+
+exports.cubic = cubic;
+
+var easeInOutCubic = value => value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2;
+
+exports.easeInOutCubic = easeInOutCubic;
+
+function parseFormat(format, time) {
+  var scannedTimes = Object.values(time);
+  var scannedFormats = ['DD', 'HH', 'mm', 'ss'];
+  var padValues = [24, 60, 60, 1000];
+  scannedFormats.forEach((scannedFormat, index) => {
+    if (!format.includes(scannedFormat)) {
+      scannedTimes[index + 1] += scannedTimes[index] * padValues[index];
+    } else {
+      format = format.replace(scannedFormat, String(scannedTimes[index]).padStart(2, '0'));
+    }
+  });
+
+  if (format.includes('S')) {
+    var ms = String(scannedTimes[scannedTimes.length - 1]).padStart(3, '0');
+
+    if (format.includes('SSS')) {
+      format = format.replace('SSS', ms);
+    } else if (format.includes('SS')) {
+      format = format.replace('SS', ms.slice(0, 2));
+    } else {
+      format = format.replace('S', ms.slice(0, 1));
+    }
+  }
+
+  return format;
+}
+
+var dt = (value, defaultText) => value == null ? defaultText : value;
+
+exports.dt = dt;
+
+var inBrowser = () => typeof window !== 'undefined';
+
+exports.inBrowser = inBrowser;
+
+var uniq = arr => [...new Set(arr)];
+
+exports.uniq = uniq;
+
+function kebabCase(str) {
+  var reg = /([^-])([A-Z])/g;
+  return str.replace(reg, '$1-$2').replace(reg, '$1-$2').toLowerCase();
+}