@varlet/ui 3.5.1 → 3.5.3

package/es/lazy/index.mjs

@@ -0,0 +1,213 @@
+var __defProp = Object.defineProperty;
+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 __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 { getAllParentScroller } from "../utils/elements.mjs";
+import { removeItem, throttle, doubleRaf, inViewport, call } from "@varlet/shared";
+import { createCache } from "../utils/shared.mjs";
+const BACKGROUND_IMAGE_ARG_NAME = "background-image";
+const LAZY_LOADING = "lazy-loading";
+const LAZY_ERROR = "lazy-error";
+const LAZY_ATTEMPT = "lazy-attempt";
+const EVENTS = ["scroll", "wheel", "mousewheel", "resize", "animationend", "transitionend", "touchmove"];
+const PIXEL = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
+const lazyElements = [];
+const listenTargets = [];
+const imageCache = createCache(100);
+const defaultLazyOptions = {
+  loading: PIXEL,
+  error: PIXEL,
+  attempt: 3,
+  throttleWait: 300,
+  events: EVENTS
+};
+let checkAllWithThrottle = 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 _a;
+  if (listenTargets.includes(listenTarget)) {
+    return;
+  }
+  listenTargets.push(listenTarget);
+  (_a = defaultLazyOptions.events) == null ? void 0 : _a.forEach((event) => {
+    listenTarget.addEventListener(event, checkAllWithThrottle, { passive: true });
+  });
+}
+function unbindEvents() {
+  listenTargets.forEach((listenTarget) => {
+    var _a;
+    (_a = defaultLazyOptions.events) == null ? void 0 : _a.forEach((event) => {
+      listenTarget.removeEventListener(event, checkAllWithThrottle);
+    });
+  });
+  listenTargets.length = 0;
+}
+function createLazy(el, binding) {
+  var _a, _b;
+  const lazyOptions = {
+    loading: (_a = el.getAttribute(LAZY_LOADING)) != null ? _a : defaultLazyOptions.loading,
+    error: (_b = el.getAttribute(LAZY_ERROR)) != null ? _b : defaultLazyOptions.error,
+    attempt: el.getAttribute(LAZY_ATTEMPT) ? Number(el.getAttribute(LAZY_ATTEMPT)) : defaultLazyOptions.attempt
+  };
+  el._lazy = __spreadValues({
+    src: binding.value,
+    arg: binding.arg,
+    currentAttempt: 0,
+    state: "pending",
+    attemptLock: false
+  }, lazyOptions);
+  setSRC(el, PIXEL);
+  call(defaultLazyOptions.filter, el._lazy);
+}
+function createImage(el, attemptSRC) {
+  const 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++;
+  const { src: attemptSRC } = el._lazy;
+  if (imageCache.has(attemptSRC)) {
+    setSuccess(el, attemptSRC);
+    el._lazy.attemptLock = false;
+    return;
+  }
+  setLoading(el);
+  createImage(el, attemptSRC);
+}
+function check(el) {
+  return __async(this, null, function* () {
+    yield doubleRaf();
+    if (inViewport(el)) {
+      attemptLoad(el);
+    }
+  });
+}
+function checkAll() {
+  lazyElements.forEach((el) => check(el));
+}
+function add(el) {
+  return __async(this, null, function* () {
+    !lazyElements.includes(el) && lazyElements.push(el);
+    getAllParentScroller(el).forEach(bindEvents);
+    yield check(el);
+  });
+}
+function clear(el) {
+  removeItem(lazyElements, el);
+  lazyElements.length === 0 && unbindEvents();
+}
+function diff(el, binding) {
+  const { src, arg } = el._lazy;
+  return src !== binding.value || arg !== binding.arg;
+}
+function mounted(el, binding) {
+  return __async(this, null, function* () {
+    createLazy(el, binding);
+    yield add(el);
+  });
+}
+function updated(el, binding) {
+  return __async(this, null, function* () {
+    if (!diff(el, binding)) {
+      lazyElements.includes(el) && (yield check(el));
+      return;
+    }
+    yield mounted(el, binding);
+  });
+}
+function mergeLazyOptions(lazyOptions = {}) {
+  const { 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;
+}
+const Lazy = {
+  mounted,
+  unmounted: clear,
+  updated,
+  install(app, lazyOptions) {
+    mergeLazyOptions(lazyOptions);
+    checkAllWithThrottle = throttle(checkAll, defaultLazyOptions.throttleWait);
+    app.directive("lazy", this);
+  }
+};
+const _LazyComponent = Lazy;
+var stdin_default = Lazy;
+export {
+  PIXEL,
+  _LazyComponent,
+  stdin_default as default,
+  defaultLazyOptions,
+  imageCache
+};

package/es/link/Link.mjs

@@ -0,0 +1,87 @@
+import { computed, defineComponent, ref } from "vue";
+import { props } from "./props.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
+import { call, inMobile } from "@varlet/shared";
+const { name, n, classes } = createNamespace("link");
+import { renderSlot as _renderSlot, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.tag), _mergeProps(_ctx.linkProps, {
+    class: _ctx.classes(
+      _ctx.n(),
+      _ctx.n("$--box"),
+      _ctx.n("$--inline-flex"),
+      _ctx.n(`--${_ctx.type}`),
+      [_ctx.underline !== "none", _ctx.n(`--underline-${_ctx.underline}`)],
+      [_ctx.disabled, _ctx.n("--disabled")],
+      [_ctx.isFocusing && !_ctx.inMobile(), _ctx.n("--focusing")]
+    ),
+    style: {
+      color: _ctx.textColor,
+      fontSize: _ctx.toSizeUnit(_ctx.textSize)
+    },
+    onClick: _ctx.handleClick,
+    onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.isFocusing = true),
+    onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.isFocusing = false)
+  }), {
+    default: _withCtx(() => [
+      _renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 16, ["class", "style", "onClick"]);
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2) {
+    const isFocusing = ref(false);
+    const tag = computed(() => {
+      const { disabled, href, to } = props2;
+      if (disabled) {
+        return "span";
+      }
+      if (href) {
+        return "a";
+      }
+      if (to) {
+        return "router-link";
+      }
+      return "a";
+    });
+    const linkProps = computed(() => {
+      const { disabled, href, target, to, replace, rel } = props2;
+      if (disabled) {
+        return {};
+      }
+      if (href) {
+        return { href, target, rel };
+      }
+      if (to) {
+        return { to, target, replace };
+      }
+      return {};
+    });
+    function handleClick(e) {
+      if (props2.disabled) {
+        return;
+      }
+      call(props2.onClick, e);
+    }
+    return {
+      tag,
+      linkProps,
+      isFocusing,
+      inMobile,
+      n,
+      classes,
+      handleClick,
+      toSizeUnit
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/link/index.mjs

@@ -0,0 +1,12 @@
+import Link from "./Link.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as linkProps } from "./props.mjs";
+withInstall(Link);
+withPropsDefaultsSetter(Link, linkProps);
+const _LinkComponent = Link;
+var stdin_default = Link;
+export {
+  _LinkComponent,
+  stdin_default as default,
+  linkProps
+};

package/es/link/link.css

@@ -0,0 +1 @@
+:root { --link-default-color: #555; --link-primary-color: var(--color-primary); --link-danger-color: var(--color-danger); --link-success-color: var(--color-success); --link-warning-color: var(--color-warning); --link-info-color: var(--color-info); --link-disabled-color: var(--color-text-disabled); --link-font-size: var(--font-size-md); --link-focus-opacity: 0.8;}.var-link { position: relative; justify-content: center; align-items: center; outline: none; cursor: pointer; font-family: inherit; white-space: nowrap; text-decoration: none; font-size: var(--link-font-size); transition: opacity 0.15s; -webkit-tap-highlight-color: transparent;}.var-link--underline-always { text-decoration: underline;}.var-link--underline-hover:hover { text-decoration: underline;}.var-link--default { color: var(--link-default-color);}.var-link--primary { color: var(--link-primary-color);}.var-link--info { color: var(--link-info-color);}.var-link--success { color: var(--link-success-color);}.var-link--warning { color: var(--link-warning-color);}.var-link--danger { color: var(--link-danger-color);}.var-link--disabled { color: var(--link-disabled-color); cursor: not-allowed;}.var-link--focusing { opacity: var(--link-focus-opacity);}

package/es/link/props.mjs

@@ -0,0 +1,23 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  type: {
+    type: String,
+    default: "default"
+  },
+  href: String,
+  target: String,
+  rel: String,
+  to: [String, Object],
+  replace: Boolean,
+  underline: {
+    type: String,
+    default: "always"
+  },
+  disabled: Boolean,
+  textSize: [String, Number],
+  textColor: String,
+  onClick: defineListenerProp()
+};
+export {
+  props
+};

package/es/link/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../link.css'
+import '../LinkSfc.css'

package/es/list/List.mjs

@@ -0,0 +1,191 @@
+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 VarLoading from "../loading/index.mjs";
+import Ripple from "../ripple/index.mjs";
+import { defineComponent, ref, nextTick, watch } from "vue";
+import { getParentScroller, toPxNum } from "../utils/elements.mjs";
+import { props } from "./props.mjs";
+import { isNumber, getRect, call } from "@varlet/shared";
+import { createNamespace } from "../utils/components.mjs";
+import { t } from "../locale/index.mjs";
+import { onSmartMounted, onSmartUnmounted } from "@varlet/use";
+import { useTabItem } from "./provide.mjs";
+import { injectLocaleProvider } from "../locale-provider/provide.mjs";
+const { name, n, classes } = createNamespace("list");
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_var_loading = _resolveComponent("var-loading");
+  const _directive_ripple = _resolveDirective("ripple");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"))),
+      ref: "listEl"
+    },
+    [
+      _renderSlot(_ctx.$slots, "default"),
+      _ctx.loading ? _renderSlot(_ctx.$slots, "loading", { key: 0 }, () => {
+        var _a;
+        return [
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("loading"))
+            },
+            [
+              _createElementVNode(
+                "div",
+                {
+                  class: _normalizeClass(_ctx.n("loading-text"))
+                },
+                _toDisplayString((_a = _ctx.loadingText) != null ? _a : (_ctx.pt ? _ctx.pt : _ctx.t)("listLoadingText")),
+                3
+                /* TEXT, CLASS */
+              ),
+              _createVNode(_component_var_loading, {
+                size: "mini",
+                radius: 10
+              })
+            ],
+            2
+            /* CLASS */
+          )
+        ];
+      }) : _createCommentVNode("v-if", true),
+      _ctx.finished ? _renderSlot(_ctx.$slots, "finished", { key: 1 }, () => {
+        var _a;
+        return [
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("finished"))
+            },
+            _toDisplayString((_a = _ctx.finishedText) != null ? _a : (_ctx.pt ? _ctx.pt : _ctx.t)("listFinishedText")),
+            3
+            /* TEXT, CLASS */
+          )
+        ];
+      }) : _createCommentVNode("v-if", true),
+      _ctx.error ? _renderSlot(_ctx.$slots, "error", { key: 2 }, () => {
+        var _a;
+        return [
+          _withDirectives((_openBlock(), _createElementBlock(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("error")),
+              onClick: _cache[0] || (_cache[0] = (...args) => _ctx.load && _ctx.load(...args))
+            },
+            [
+              _createTextVNode(
+                _toDisplayString((_a = _ctx.errorText) != null ? _a : (_ctx.pt ? _ctx.pt : _ctx.t)("listErrorText")),
+                1
+                /* TEXT */
+              )
+            ],
+            2
+            /* CLASS */
+          )), [
+            [_directive_ripple]
+          ])
+        ];
+      }) : _createCommentVNode("v-if", true),
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.n("detector")),
+          ref: "detectorEl"
+        },
+        null,
+        2
+        /* CLASS */
+      )
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  directives: { Ripple },
+  components: { VarLoading },
+  props,
+  setup(props2) {
+    const listEl = ref(null);
+    const detectorEl = ref(null);
+    const { tabItem, bindTabItem } = useTabItem();
+    const { t: pt } = injectLocaleProvider();
+    let scroller;
+    call(bindTabItem, {});
+    if (tabItem) {
+      watch(() => tabItem.current.value, check);
+    }
+    watch(() => [props2.loading, props2.error, props2.finished], check);
+    onSmartMounted(() => {
+      scroller = getParentScroller(listEl.value);
+      scroller.addEventListener("scroll", check);
+      if (props2.immediateCheck) {
+        check();
+      }
+    });
+    onSmartUnmounted(removeScrollerListener);
+    function load() {
+      call(props2["onUpdate:error"], false);
+      call(props2["onUpdate:loading"], true);
+      call(props2.onLoad);
+    }
+    function isReachBottom() {
+      const { bottom: containerBottom } = getRect(scroller);
+      const { bottom: detectorBottom } = getRect(detectorEl.value);
+      return Math.floor(detectorBottom) - toPxNum(props2.offset) <= containerBottom;
+    }
+    function removeScrollerListener() {
+      if (!scroller) {
+        return;
+      }
+      scroller.removeEventListener("scroll", check);
+    }
+    function check() {
+      return __async(this, null, function* () {
+        yield nextTick();
+        if (props2.loading || props2.finished || props2.error || (tabItem == null ? void 0 : tabItem.current.value) === false || !isReachBottom()) {
+          return;
+        }
+        load();
+      });
+    }
+    return {
+      listEl,
+      detectorEl,
+      pt,
+      t,
+      isNumber,
+      load,
+      check,
+      n,
+      classes
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/list/index.mjs

@@ -0,0 +1,12 @@
+import List from "./List.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as listProps } from "./props.mjs";
+withInstall(List);
+withPropsDefaultsSetter(List, listProps);
+const _ListComponent = List;
+var stdin_default = List;
+export {
+  _ListComponent,
+  stdin_default as default,
+  listProps
+};

package/es/list/list.css

@@ -0,0 +1 @@
+:root { --list-loading-height: 50px; --list-finished-height: 50px; --list-error-height: 50px; --list-loading-color: #888; --list-finished-color: #888; --list-error-color: #888; --list-loading-font-size: var(--font-size-md); --list-finished-font-size: var(--font-size-md); --list-error-font-size: var(--font-size-md);}.var-list__detector { width: 100%;}.var-list__loading { display: flex; justify-content: center; align-items: center; width: 100%; height: var(--list-loading-height); font-size: var(--list-loading-font-size); color: var(--list-loading-color);}.var-list__loading-text { margin-right: 10px;}.var-list__finished { display: flex; justify-content: center; align-items: center; width: 100%; height: var(--list-finished-height); font-size: var(--list-finished-font-size); color: var(--list-finished-color);}.var-list__error { display: flex; justify-content: center; align-items: center; width: 100%; height: var(--list-error-height); font-size: var(--list-error-font-size); color: var(--list-error-color); cursor: pointer; -webkit-tap-highlight-color: transparent;}

package/es/list/props.mjs

@@ -0,0 +1,23 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  loading: Boolean,
+  immediateCheck: {
+    type: Boolean,
+    default: true
+  },
+  finished: Boolean,
+  error: Boolean,
+  offset: {
+    type: [String, Number],
+    default: 0
+  },
+  loadingText: String,
+  finishedText: String,
+  errorText: String,
+  onLoad: defineListenerProp(),
+  "onUpdate:loading": defineListenerProp(),
+  "onUpdate:error": defineListenerProp()
+};
+export {
+  props
+};

package/es/list/provide.mjs

@@ -0,0 +1,13 @@
+import { TAB_ITEM_BIND_LIST_KEY } from "../tab-item/provide.mjs";
+import { useParent } from "@varlet/use";
+function useTabItem() {
+  const { parentProvider, bindParent, index } = useParent(TAB_ITEM_BIND_LIST_KEY);
+  return {
+    index,
+    tabItem: parentProvider,
+    bindTabItem: bindParent
+  };
+}
+export {
+  useTabItem
+};

package/es/list/style/index.mjs

@@ -0,0 +1,5 @@
+import '../../styles/common.css'
+import '../../ripple/ripple.css'
+import '../../loading/loading.css'
+import '../list.css'
+import '../ListSfc.css'