@varlet/ui 3.5.1 → 3.5.2

package/es/utils/components.mjs

@@ -0,0 +1,240 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { useEventListener } from "@varlet/use";
+import {
+  createApp,
+  h,
+  ref,
+  onActivated,
+  onDeactivated,
+  Comment,
+  Fragment,
+  defineComponent
+} from "vue";
+import {
+  createNamespaceFn,
+  hasOwn,
+  isArray,
+  isFunction,
+  isPlainObject,
+  isString,
+  normalizeToArray
+} from "@varlet/shared";
+function pickProps(props, propsKey) {
+  return isArray(propsKey) ? propsKey.reduce((pickedProps, key) => {
+    pickedProps[key] = props[key];
+    return pickedProps;
+  }, {}) : props[propsKey];
+}
+function withInstall(component, target) {
+  const componentWithInstall = target != null ? target : component;
+  componentWithInstall.install = function(app) {
+    const { name } = component;
+    if (name) {
+      app.component(name, component);
+    }
+  };
+  return componentWithInstall;
+}
+function withPropsDefaultsSetter(target, props) {
+  target.setPropsDefaults = function(defaults) {
+    Object.entries(defaults).forEach(([key, value]) => {
+      const prop = props[key];
+      if (prop == null) {
+        return;
+      }
+      if (isPlainObject(prop)) {
+        props[key] = __spreadProps(__spreadValues({}, prop), {
+          default: value
+        });
+        return;
+      }
+      props[key] = {
+        type: prop,
+        default: value
+      };
+    });
+  };
+}
+function mount(component) {
+  const app = createApp(component);
+  const host = document.createElement("div");
+  document.body.appendChild(host);
+  return {
+    instance: app.mount(host),
+    unmount() {
+      app.unmount();
+      if (host.parentNode) {
+        document.body.removeChild(host);
+      }
+    }
+  };
+}
+function mountInstance(component, props = {}, eventListener = {}) {
+  const Host = {
+    setup() {
+      return () => h(component, __spreadValues(__spreadValues({}, props), eventListener));
+    }
+  };
+  const { unmount } = mount(Host);
+  return { unmountInstance: unmount };
+}
+function flatFragment(vNodes) {
+  const result = [];
+  vNodes.forEach((vNode) => {
+    if (vNode.type === Comment) {
+      return;
+    }
+    if (vNode.type === Fragment && isArray(vNode.children)) {
+      vNode.children.forEach((item) => {
+        result.push(item);
+      });
+      return;
+    }
+    result.push(vNode);
+  });
+  return result;
+}
+function isZodRule(rule) {
+  return isPlainObject(rule) && isFunction(rule.safeParseAsync);
+}
+function isZodResult(result) {
+  return isPlainObject(result) && hasOwn(result, "success");
+}
+function useValidation() {
+  const errorMessage = ref("");
+  const validate = (ruleOrRules, value, apis) => __async(this, null, function* () {
+    const rules = normalizeToArray(ruleOrRules).filter((rule) => isZodRule(rule) || isFunction(rule));
+    const results = yield Promise.all(
+      rules.map((rule) => isZodRule(rule) ? rule.safeParseAsync(value) : rule(value, apis))
+    );
+    resetValidation();
+    return !results.some((result) => {
+      if (isZodResult(result)) {
+        if (result.success === false) {
+          errorMessage.value = result.error.issues[0].message;
+          return true;
+        }
+      } else if (result !== true) {
+        errorMessage.value = String(result);
+        return true;
+      }
+      return false;
+    });
+  });
+  const resetValidation = () => {
+    errorMessage.value = "";
+  };
+  const validateWithTrigger = (validateTrigger, trigger, rules, value, apis) => __async(this, null, function* () {
+    if (validateTrigger.includes(trigger)) {
+      ;
+      (yield validate(rules, value, apis)) && (errorMessage.value = "");
+    }
+  });
+  return {
+    errorMessage,
+    validate,
+    resetValidation,
+    validateWithTrigger
+  };
+}
+function useRouteListener(listener) {
+  useEventListener(() => window, "hashchange", listener);
+  useEventListener(() => window, "popstate", listener);
+}
+function useTeleport() {
+  const disabled = ref(false);
+  onActivated(() => {
+    disabled.value = false;
+  });
+  onDeactivated(() => {
+    disabled.value = true;
+  });
+  return {
+    disabled
+  };
+}
+const createNamespace = createNamespaceFn("var");
+function defineListenerProp(fallback) {
+  return {
+    type: [Function, Array],
+    default: fallback
+  };
+}
+function formatElevation(elevation, defaultLevel) {
+  if (elevation === false) {
+    return null;
+  }
+  if (elevation === true && defaultLevel) {
+    elevation = defaultLevel;
+  }
+  return `var-elevation--${elevation}`;
+}
+const MaybeVNode = defineComponent({
+  props: {
+    is: {
+      type: [String, Object]
+    },
+    tag: {
+      type: String,
+      default: "span"
+    }
+  },
+  setup(props) {
+    return () => isString(props.is) ? h(props.tag, props.is) : props.is;
+  }
+});
+export {
+  MaybeVNode,
+  createNamespace,
+  defineListenerProp,
+  flatFragment,
+  formatElevation,
+  isZodResult,
+  isZodRule,
+  mount,
+  mountInstance,
+  pickProps,
+  useRouteListener,
+  useTeleport,
+  useValidation,
+  withInstall,
+  withPropsDefaultsSetter
+};

package/es/utils/elements.mjs

@@ -0,0 +1,221 @@
+import {
+  isNumber,
+  isObject,
+  isString,
+  kebabCase,
+  toNumber,
+  isWindow,
+  inBrowser,
+  getRect,
+  getStyle,
+  getScrollTop,
+  getScrollLeft,
+  isNumeric
+} from "@varlet/shared";
+import { error } from "./logger.mjs";
+function getLeft(element) {
+  const { left } = getRect(element);
+  return left + (document.body.scrollLeft || document.documentElement.scrollLeft);
+}
+function getTop(element) {
+  const { top } = getRect(element);
+  return top + (document.body.scrollTop || document.documentElement.scrollTop);
+}
+function getTranslateY(el) {
+  const { transform } = getStyle(el);
+  return +transform.slice(transform.lastIndexOf(",") + 2, transform.length - 1);
+}
+function getParentScroller(el) {
+  let element = el;
+  while (element) {
+    if (!element.parentNode) {
+      break;
+    }
+    element = element.parentNode;
+    if (element === document.body || element === document.documentElement) {
+      break;
+    }
+    const scrollRE = /(scroll|auto)/;
+    const { overflowY, overflow } = getStyle(element);
+    if (scrollRE.test(overflowY) || scrollRE.test(overflow)) {
+      return element;
+    }
+  }
+  return window;
+}
+function getAllParentScroller(el) {
+  const allParentScroller = [];
+  let element = el;
+  while (!isWindow(element)) {
+    element = getParentScroller(element);
+    allParentScroller.push(element);
+  }
+  return allParentScroller;
+}
+function getTarget(target, componentName) {
+  if (isString(target)) {
+    const el = document.querySelector(target);
+    if (!el) {
+      error(componentName, "target element cannot found");
+    }
+    return el;
+  }
+  if (isObject(target)) return target;
+  error(componentName, 'type of prop "target" should be a selector or an element object');
+}
+function getViewportSize() {
+  const { width, height } = getRect(window);
+  return {
+    vw: width,
+    vh: height,
+    vMin: Math.min(width, height),
+    vMax: Math.max(width, height)
+  };
+}
+const isRem = (value) => isString(value) && value.endsWith("rem");
+const isEm = (value) => isString(value) && value.endsWith("em") && !value.endsWith("rem");
+const isPx = (value) => isString(value) && value.endsWith("px") || isNumber(value);
+const isPercent = (value) => isString(value) && value.endsWith("%");
+const isVw = (value) => isString(value) && value.endsWith("vw");
+const isVh = (value) => isString(value) && value.endsWith("vh");
+const isVMin = (value) => isString(value) && value.endsWith("vmin");
+const isVMax = (value) => isString(value) && value.endsWith("vmax");
+const isCalc = (value) => isString(value) && value.startsWith("calc(");
+const isVar = (value) => isString(value) && value.startsWith("var(");
+const toPxNum = (value) => {
+  if (isNumeric(value)) {
+    return Number(value);
+  }
+  if (isPx(value)) {
+    return +value.replace("px", "");
+  }
+  if (!inBrowser()) {
+    return 0;
+  }
+  const { vw, vh, vMin, vMax } = getViewportSize();
+  if (isVw(value)) {
+    return +value.replace("vw", "") * vw / 100;
+  }
+  if (isVh(value)) {
+    return +value.replace("vh", "") * vh / 100;
+  }
+  if (isVMin(value)) {
+    return +value.replace("vmin", "") * vMin / 100;
+  }
+  if (isVMax(value)) {
+    return +value.replace("vmax", "") * vMax / 100;
+  }
+  if (isRem(value)) {
+    const num = +value.replace("rem", "");
+    const rootFontSize = getStyle(document.documentElement).fontSize;
+    return num * parseFloat(rootFontSize);
+  }
+  if (isString(value)) {
+    return toNumber(value);
+  }
+  return 0;
+};
+const toSizeUnit = (value) => {
+  if (value == null) {
+    return void 0;
+  }
+  if (isNumeric(value)) {
+    return `${value}px`;
+  }
+  return String(value);
+};
+const multiplySizeUnit = (value, quantity = 1) => {
+  if (value == null) {
+    return void 0;
+  }
+  const legalSize = toSizeUnit(value);
+  const unit = legalSize.match(/(vh|%|r?em|px|vw|vmin|vmax)$/)[0];
+  return `${parseFloat(legalSize) * quantity}${unit}`;
+};
+function scrollTo(element, { top = 0, left = 0, duration = 300, animation }) {
+  const startTime = Date.now();
+  const scrollTop = getScrollTop(element);
+  const scrollLeft = getScrollLeft(element);
+  return new Promise((resolve) => {
+    const frame = () => {
+      const progress = (Date.now() - startTime) / duration;
+      if (progress < 1) {
+        const nextTop = scrollTop + (top - scrollTop) * animation(progress);
+        const 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]) => {
+    const cssVar = key.startsWith("--") ? key : `--${kebabCase(key)}`;
+    styles[cssVar] = value;
+    return styles;
+  }, {});
+}
+function padStartFlex(style) {
+  return style === "start" || style === "end" ? `flex-${style}` : style;
+}
+const focusableSelector = ["button", "input", "select", "textarea", "[tabindex]", "[href]"].map((s) => `${s}:not([disabled])`).join(", ");
+function focusChildElementByKey(hostElement, parentElement, key) {
+  var _a;
+  const focusableElements = parentElement.querySelectorAll(focusableSelector);
+  if (!focusableElements.length) {
+    return;
+  }
+  const isActiveHostElement = [hostElement, ...Array.from(hostElement.querySelectorAll(focusableSelector))].findIndex(
+    (el) => el === document.activeElement
+  ) !== -1;
+  const activeElementIndex = Array.from(focusableElements).findIndex((el) => el === document.activeElement);
+  if (key === "ArrowDown") {
+    if (isActiveHostElement && activeElementIndex === -1 || activeElementIndex === focusableElements.length - 1) {
+      focusableElements[0].focus();
+      return;
+    }
+    if (activeElementIndex !== -1 && activeElementIndex < focusableElements.length - 1) {
+      focusableElements[activeElementIndex + 1].focus();
+      return;
+    }
+  }
+  if (key === "ArrowUp") {
+    if (isActiveHostElement && activeElementIndex === -1 || activeElementIndex === 0) {
+      (_a = focusableElements[focusableElements.length - 1]) == null ? void 0 : _a.focus();
+      return;
+    }
+    if (activeElementIndex > 0) {
+      focusableElements[activeElementIndex - 1].focus();
+    }
+  }
+}
+export {
+  focusChildElementByKey,
+  formatStyleVars,
+  getAllParentScroller,
+  getLeft,
+  getParentScroller,
+  getTarget,
+  getTop,
+  getTranslateY,
+  getViewportSize,
+  isCalc,
+  isEm,
+  isPercent,
+  isPx,
+  isRem,
+  isVMax,
+  isVMin,
+  isVar,
+  isVh,
+  isVw,
+  multiplySizeUnit,
+  padStartFlex,
+  scrollTo,
+  toPxNum,
+  toSizeUnit
+};

package/es/utils/logger.mjs

@@ -0,0 +1,10 @@
+function error(source, message) {
+  throw Error(`Varlet [${source}]: ${message}`);
+}
+function warn(source, message) {
+  console.warn(`Varlet [${source}]: ${message}`);
+}
+export {
+  error,
+  warn
+};

package/es/utils/shared.mjs

@@ -0,0 +1,58 @@
+import { isString, removeItem } from "@varlet/shared";
+const isHTMLSupportImage = (val) => {
+  if (!isString(val)) {
+    return false;
+  }
+  return val.startsWith("data:image") || /\.(png|jpg|gif|jpeg|svg|webp|ico)$/i.test(val);
+};
+const isHTMLSupportVideo = (val) => {
+  if (!isString(val)) {
+    return false;
+  }
+  return val.startsWith("data:video") || /\.(mp4|webm|ogg)$/.test(val);
+};
+const createCache = (max) => {
+  const 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;
+    }
+  };
+};
+const linear = (value) => value;
+const cubic = (value) => value ** 3;
+const easeInOutCubic = (value) => value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2;
+const padStart = (str, maxLength, fillString = "") => {
+  if (str === void 0) {
+    str = "";
+  }
+  if (str.length >= maxLength) {
+    return str;
+  }
+  const len = maxLength - str.length;
+  const repeatCount = Math.floor(len / fillString.length);
+  return fillString.repeat(repeatCount) + fillString.slice(0, len % fillString.length) + str;
+};
+export {
+  createCache,
+  cubic,
+  easeInOutCubic,
+  isHTMLSupportImage,
+  isHTMLSupportVideo,
+  linear,
+  padStart
+};