@varlet/ui 3.5.1 → 3.5.2

package/es/image-preview/index.mjs

@@ -0,0 +1,87 @@
+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));
+import VarImagePreview from "./ImagePreview.mjs";
+import { nextTick, reactive } from "vue";
+import { inBrowser, isArray, isString, call } from "@varlet/shared";
+import { mountInstance, withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as imagePreviewProps } from "./props.mjs";
+let singletonOptions;
+let defaultOptions = {};
+function normalizeOptions(options = {}) {
+  if (isString(options)) {
+    return __spreadProps(__spreadValues({}, defaultOptions), { images: [options] });
+  }
+  if (isArray(options)) {
+    return __spreadProps(__spreadValues({}, defaultOptions), { images: options });
+  }
+  return __spreadValues(__spreadValues({}, defaultOptions), options);
+}
+function ImagePreview(options) {
+  if (!inBrowser()) {
+    return;
+  }
+  ImagePreview.close();
+  const imagePreviewOptions = normalizeOptions(options);
+  const reactiveImagePreviewOptions = reactive(imagePreviewOptions);
+  reactiveImagePreviewOptions.teleport = "body";
+  singletonOptions = reactiveImagePreviewOptions;
+  const { unmountInstance } = mountInstance(VarImagePreview, reactiveImagePreviewOptions, {
+    onClose: () => call(reactiveImagePreviewOptions.onClose),
+    onClosed: () => {
+      call(reactiveImagePreviewOptions.onClosed);
+      unmountInstance();
+      singletonOptions === reactiveImagePreviewOptions && (singletonOptions = null);
+    },
+    onRouteChange: () => {
+      unmountInstance();
+      singletonOptions === reactiveImagePreviewOptions && (singletonOptions = null);
+    },
+    "onUpdate:show": (value) => {
+      reactiveImagePreviewOptions.show = value;
+    }
+  });
+  reactiveImagePreviewOptions.show = true;
+}
+ImagePreview.close = () => {
+  if (singletonOptions != null) {
+    const prevSingletonOptions = singletonOptions;
+    singletonOptions = null;
+    nextTick().then(() => {
+      prevSingletonOptions.show = false;
+    });
+  }
+};
+ImagePreview.setDefaultOptions = (options) => {
+  defaultOptions = options;
+};
+ImagePreview.resetDefaultOptions = () => {
+  defaultOptions = {};
+};
+ImagePreview.Component = VarImagePreview;
+withInstall(VarImagePreview);
+withInstall(VarImagePreview, ImagePreview);
+withPropsDefaultsSetter(ImagePreview, imagePreviewProps);
+const _ImagePreviewComponent = VarImagePreview;
+var stdin_default = ImagePreview;
+export {
+  _ImagePreviewComponent,
+  stdin_default as default,
+  imagePreviewProps
+};

package/es/image-preview/props.mjs

@@ -0,0 +1,52 @@
+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;
+};
+import { defineListenerProp, pickProps } from "../utils/components.mjs";
+import { swipeProps } from "../swipe/index.mjs";
+import { popupProps } from "../popup/index.mjs";
+const props = __spreadValues(__spreadValues({
+  show: Boolean,
+  imagePreventDefault: Boolean,
+  images: {
+    type: Array,
+    default: () => []
+  },
+  initialIndex: {
+    type: [String, Number],
+    default: 0
+  },
+  zoom: {
+    type: [String, Number],
+    default: 2
+  },
+  closeable: Boolean,
+  "onUpdate:show": defineListenerProp(),
+  onLongPress: defineListenerProp()
+}, pickProps(swipeProps, ["loop", "indicator", "onChange"])), pickProps(popupProps, [
+  "lockScroll",
+  "teleport",
+  "closeOnKeyEscape",
+  "onOpen",
+  "onClose",
+  "onOpened",
+  "onClosed",
+  "onKeyEscape",
+  // internal for function call closes the dialog
+  "onRouteChange"
+]));
+export {
+  props
+};

package/es/image-preview/style/index.mjs

@@ -0,0 +1,7 @@
+import '../../styles/common.css'
+import '../../icon/icon.css'
+import '../../swipe/swipe.css'
+import '../../swipe-item/swipeItem.css'
+import '../../popup/popup.css'
+import '../imagePreview.css'
+import '../ImagePreviewSfc.css'

package/es/index-anchor/IndexAnchor.mjs

@@ -0,0 +1,85 @@
+import VarSticky from "../sticky/index.mjs";
+import { computed, defineComponent, ref, Transition } from "vue";
+import { useIndexBar } from "./provide.mjs";
+import { props } from "./props.mjs";
+import { createNamespace } from "../utils/components.mjs";
+const { name, n, classes } = createNamespace("index-anchor");
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, mergeProps as _mergeProps, createElementVNode as _createElementVNode, resolveDynamicComponent as _resolveDynamicComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.sticky ? _ctx.n("$-sticky") : _ctx.Transition), {
+    "offset-top": _ctx.sticky ? _ctx.stickyOffsetTop : null,
+    "z-index": _ctx.sticky ? _ctx.zIndex : null,
+    disabled: _ctx.disabled && !_ctx.cssMode,
+    "css-mode": _ctx.cssMode,
+    ref: "anchorEl"
+  }, {
+    default: _withCtx(() => [
+      _createElementVNode(
+        "div",
+        _mergeProps({
+          class: _ctx.n()
+        }, _ctx.$attrs),
+        [
+          _renderSlot(_ctx.$slots, "default", {}, () => [
+            _createTextVNode(
+              _toDisplayString(_ctx.name),
+              1
+              /* TEXT */
+            )
+          ])
+        ],
+        16
+        /* FULL_PROPS */
+      )
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["offset-top", "z-index", "disabled", "css-mode"]);
+}
+const __sfc__ = defineComponent({
+  name,
+  components: { VarSticky },
+  inheritAttrs: false,
+  props,
+  setup(props2) {
+    const disabled = ref(false);
+    const name2 = computed(() => props2.index);
+    const anchorEl = ref(null);
+    const { index, indexBar, bindIndexBar } = useIndexBar();
+    const { active, sticky, cssMode, stickyOffsetTop, zIndex } = indexBar;
+    const indexAnchorProvider = {
+      index,
+      name: name2,
+      setDisabled,
+      getOffsetTop
+    };
+    bindIndexBar(indexAnchorProvider);
+    function getOffsetTop() {
+      if (!anchorEl.value) {
+        return 0;
+      }
+      return anchorEl.value.$el ? anchorEl.value.$el.offsetTop : anchorEl.value.offsetTop;
+    }
+    function setDisabled(value) {
+      disabled.value = value;
+    }
+    return {
+      n,
+      classes,
+      name: name2,
+      anchorEl,
+      active,
+      sticky,
+      zIndex,
+      disabled,
+      cssMode,
+      stickyOffsetTop,
+      Transition
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/index-anchor/IndexAnchorSfc.css

@@ -0,0 +1 @@
+.var-index-anchor { position: relative;}

package/es/index-anchor/index.mjs

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

package/es/index-anchor/props.mjs

@@ -0,0 +1,6 @@
+const props = {
+  index: [Number, String]
+};
+export {
+  props
+};

package/es/index-anchor/provide.mjs

@@ -0,0 +1,19 @@
+import { useParent } from "@varlet/use";
+import { error } from "../utils/logger.mjs";
+import { INDEX_BAR_BIND_INDEX_ANCHOR_KEY } from "../index-bar/provide.mjs";
+function useIndexBar() {
+  const { parentProvider, index, bindParent } = useParent(
+    INDEX_BAR_BIND_INDEX_ANCHOR_KEY
+  );
+  if (!bindParent) {
+    error("IndexAnchor", 'You should use this component in "IndexBar"');
+  }
+  return {
+    index,
+    indexBar: parentProvider,
+    bindIndexBar: bindParent
+  };
+}
+export {
+  useIndexBar
+};

package/es/index-anchor/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../../sticky/sticky.css'
+import '../IndexAnchorSfc.css'

package/es/index-bar/IndexBar.mjs

@@ -0,0 +1,219 @@
+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 { computed, defineComponent, ref, watch, onBeforeUnmount, onDeactivated, onActivated } from "vue";
+import {
+  isPlainObject,
+  toNumber,
+  doubleRaf,
+  requestAnimationFrame,
+  getRect,
+  getScrollLeft,
+  getScrollTop,
+  call
+} from "@varlet/shared";
+import { easeInOutCubic } from "../utils/shared.mjs";
+import { getParentScroller, scrollTo as varScrollTo, toPxNum } from "../utils/elements.mjs";
+import { useIndexAnchors } from "./provide.mjs";
+import { props } from "./props.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { onSmartMounted } from "@varlet/use";
+const { name, n, classes } = createNamespace("index-bar");
+import { renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode } from "vue";
+const _hoisted_1 = ["onClick"];
+function __render__(_ctx, _cache) {
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n()),
+      ref: "barEl"
+    },
+    [
+      _renderSlot(_ctx.$slots, "default"),
+      _createElementVNode(
+        "ul",
+        {
+          class: _normalizeClass(_ctx.n("anchor-list")),
+          style: _normalizeStyle({ zIndex: _ctx.toNumber(_ctx.zIndex) + 2, display: _ctx.hideList ? "none" : "block" })
+        },
+        [
+          (_openBlock(true), _createElementBlock(
+            _Fragment,
+            null,
+            _renderList(_ctx.anchorNameList, (anchorName) => {
+              return _openBlock(), _createElementBlock("li", {
+                key: anchorName,
+                class: _normalizeClass(_ctx.classes(_ctx.n("anchor-item"), [_ctx.active === anchorName, _ctx.n("anchor-item--active")])),
+                style: _normalizeStyle({ color: _ctx.active === anchorName && _ctx.highlightColor ? _ctx.highlightColor : void 0 }),
+                onClick: ($event) => _ctx.anchorClick({ anchorName, manualCall: true })
+              }, [
+                _renderSlot(_ctx.$slots, "anchor-name", { anchorName }, () => [
+                  _createTextVNode(
+                    _toDisplayString(anchorName),
+                    1
+                    /* TEXT */
+                  )
+                ])
+              ], 14, _hoisted_1);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ],
+        6
+        /* CLASS, STYLE */
+      )
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  props,
+  setup(props2) {
+    const clickedName = ref("");
+    const barEl = ref(null);
+    const anchorNameList = ref([]);
+    const active = ref();
+    const sticky = computed(() => props2.sticky);
+    const cssMode = computed(() => props2.stickyCssMode);
+    const stickyOffsetTop = computed(() => toPxNum(props2.stickyOffsetTop));
+    const zIndex = computed(() => props2.zIndex);
+    const { length, indexAnchors, bindIndexAnchors } = useIndexAnchors();
+    let scroller = null;
+    let isDeactivated = false;
+    const indexBarProvider = {
+      active,
+      sticky,
+      cssMode,
+      stickyOffsetTop,
+      zIndex
+    };
+    watch(
+      () => length.value,
+      () => __async(this, null, function* () {
+        yield doubleRaf();
+        anchorNameList.value = indexAnchors.filter(({ name: name2 }) => name2.value != null).map(({ name: name2 }) => name2.value);
+      })
+    );
+    onSmartMounted(setupScroller);
+    onBeforeUnmount(removeScrollerListener);
+    onDeactivated(() => {
+      isDeactivated = true;
+      removeScrollerListener();
+    });
+    onActivated(() => {
+      if (!isDeactivated || active.value === void 0) return;
+      anchorClick({
+        anchorName: active.value,
+        options: { event: false }
+      });
+      isDeactivated = false;
+    });
+    bindIndexAnchors(indexBarProvider);
+    function emitEvent(anchor, options) {
+      const anchorName = isPlainObject(anchor) ? anchor.name.value : anchor;
+      if (anchorName === active.value || anchorName === void 0) return;
+      active.value = anchorName;
+      if ((options == null ? void 0 : options.event) !== false) {
+        call(props2.onChange, anchorName);
+      }
+    }
+    function getOffsetTop() {
+      const { top: parentTop } = getRect(scroller);
+      const { top: targetTop } = getRect(barEl.value);
+      const scrollTop = getScrollTop(scroller);
+      return scrollTop - parentTop + targetTop;
+    }
+    function handleScroll() {
+      const scrollTop = getScrollTop(scroller);
+      const scrollHeight = scroller === window ? document.body.scrollHeight : scroller.scrollHeight;
+      const offsetTop = getOffsetTop();
+      indexAnchors.forEach((anchor, index) => {
+        const anchorTop = anchor.getOffsetTop();
+        const top = scrollTop - anchorTop + stickyOffsetTop.value - offsetTop;
+        const distance = index === indexAnchors.length - 1 ? scrollHeight : indexAnchors[index + 1].getOffsetTop() - anchor.getOffsetTop();
+        anchor.setDisabled(true);
+        if (top >= 0 && top < distance && clickedName.value === "") {
+          anchor.setDisabled(false);
+          emitEvent(anchor);
+        }
+      });
+    }
+    function anchorClick(_0) {
+      return __async(this, arguments, function* ({ anchorName, manualCall = false, options }) {
+        if (manualCall) {
+          call(props2.onClick, anchorName);
+        }
+        if (anchorName === active.value && !isDeactivated) {
+          return;
+        }
+        const indexAnchor = indexAnchors.find(({ name: name2 }) => anchorName === name2.value);
+        if (!indexAnchor) {
+          return;
+        }
+        const offsetTop = getOffsetTop();
+        const indexAnchorTop = indexAnchor.getOffsetTop();
+        const top = indexAnchorTop - stickyOffsetTop.value + offsetTop;
+        const left = getScrollLeft(scroller);
+        clickedName.value = anchorName;
+        emitEvent(anchorName, options);
+        yield varScrollTo(scroller, {
+          left,
+          top,
+          animation: easeInOutCubic,
+          duration: toNumber(props2.duration)
+        });
+        yield doubleRaf();
+        clickedName.value = "";
+      });
+    }
+    function setupScroller() {
+      scroller = getParentScroller(barEl.value);
+      scroller.addEventListener("scroll", handleScroll);
+    }
+    function removeScrollerListener() {
+      if (!scroller) {
+        return;
+      }
+      scroller.removeEventListener("scroll", handleScroll);
+    }
+    function scrollTo(index, options) {
+      requestAnimationFrame(() => anchorClick({ anchorName: index, options }));
+    }
+    return {
+      barEl,
+      active,
+      zIndex,
+      anchorNameList,
+      n,
+      classes,
+      toNumber,
+      scrollTo,
+      anchorClick
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/index-bar/index.mjs

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

package/es/index-bar/indexBar.css

@@ -0,0 +1 @@
+:root { --index-bar-list-right: 0; --index-bar-list-top: 50%; --index-bar-list-left: auto; --index-bar-list-bottom: auto; --index-bar-list-transform: translate(0, -50%); --index-bar-list-item-font-size: var(--font-size-xs); --index-bar-list-item-color: var(--color-primary); --index-bar-list-item-active-color: var(--color-danger); --index-bar-list-item-height: 14px; --index-bar-list-item-padding: 0 10px;}.var-index-bar { position: relative;}.var-index-bar__anchor-list { position: fixed; right: var(--index-bar-list-right); top: var(--index-bar-list-top); left: var(--index-bar-list-left); bottom: var(--index-bar-list-bottom); transform: var(--index-bar-list-transform); list-style: none; padding: 0; margin: 0;}.var-index-bar__anchor-item { font-size: var(--index-bar-list-item-font-size); display: flex; align-items: center; height: var(--index-bar-list-item-height); justify-content: center; padding: var(--index-bar-list-item-padding); color: var(--index-bar-list-item-color); cursor: pointer; -webkit-tap-highlight-color: transparent;}.var-index-bar__anchor-item--active { color: var(--index-bar-list-item-active-color);}

package/es/index-bar/props.mjs

@@ -0,0 +1,27 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  sticky: {
+    type: Boolean,
+    default: true
+  },
+  stickyOffsetTop: {
+    type: [String, Number],
+    default: 0
+  },
+  stickyCssMode: Boolean,
+  hideList: Boolean,
+  zIndex: {
+    type: [Number, String],
+    default: 1
+  },
+  highlightColor: String,
+  duration: {
+    type: [Number, String],
+    default: 0
+  },
+  onClick: defineListenerProp(),
+  onChange: defineListenerProp()
+};
+export {
+  props
+};

package/es/index-bar/provide.mjs

@@ -0,0 +1,16 @@
+import { useChildren } from "@varlet/use";
+const INDEX_BAR_BIND_INDEX_ANCHOR_KEY = Symbol("INDEX_BAR_BIND_INDEX_ANCHOR_KEY");
+function useIndexAnchors() {
+  const { bindChildren, length, childProviders } = useChildren(
+    INDEX_BAR_BIND_INDEX_ANCHOR_KEY
+  );
+  return {
+    length,
+    indexAnchors: childProviders,
+    bindIndexAnchors: bindChildren
+  };
+}
+export {
+  INDEX_BAR_BIND_INDEX_ANCHOR_KEY,
+  useIndexAnchors
+};

package/es/index-bar/style/index.mjs

@@ -0,0 +1,3 @@
+import '../../styles/common.css'
+import '../indexBar.css'
+import '../IndexBarSfc.css'