@varlet/ui 3.5.1 → 3.5.2

package/es/menu/usePopover.mjs

@@ -0,0 +1,362 @@
+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 flip from "@popperjs/core/lib/modifiers/flip.js";
+import offset from "@popperjs/core/lib/modifiers/offset.js";
+import computeStyles from "@popperjs/core/lib/modifiers/computeStyles.js";
+import { onWindowResize, useClickOutside, useEventListener, useVModel } from "@varlet/use";
+import { doubleRaf, getStyle, call, preventDefault } from "@varlet/shared";
+import { toPxNum } from "../utils/elements.mjs";
+import { onMounted, onUnmounted, ref, watch } from "vue";
+import { createPopper } from "@popperjs/core/lib/popper-lite.js";
+import { useZIndex } from "../context/zIndex.mjs";
+import { useStack } from "../context/stack.mjs";
+function usePopover(options) {
+  const host = ref(null);
+  const popover = ref(null);
+  const hostSize = ref({ width: 0, height: 0 });
+  const show = useVModel(options, "show", {
+    passive: true,
+    defaultValue: false,
+    emit(_event, value) {
+      if (value) {
+        call(options.onOpen);
+      } else {
+        call(options.onClose);
+      }
+    }
+  });
+  const { zIndex } = useZIndex(() => show.value, 1);
+  useStack(() => show.value, zIndex);
+  let popoverInstance = null;
+  let enterPopover = false;
+  let enterHost = false;
+  useEventListener(() => window, "keydown", handleKeydown);
+  useClickOutside(getReference, "click", handleClickOutside);
+  onWindowResize(resize);
+  watch(() => [options.offsetX, options.offsetY, options.placement, options.strategy], resize);
+  watch(() => options.disabled, close);
+  watch(
+    () => show.value,
+    (newValue) => {
+      if (newValue) {
+        resize();
+      }
+    }
+  );
+  onMounted(() => {
+    var _a;
+    popoverInstance = createPopper((_a = getReference()) != null ? _a : host.value, popover.value, getPopperOptions());
+  });
+  onUnmounted(() => {
+    popoverInstance.destroy();
+  });
+  function computeHostSize() {
+    if (!host.value) {
+      return;
+    }
+    const { width, height } = getStyle(host.value);
+    hostSize.value = {
+      width: toPxNum(width),
+      height: toPxNum(height)
+    };
+  }
+  function getTransformOrigin() {
+    switch (options.placement) {
+      case "top":
+      case "cover-bottom":
+        return "bottom";
+      case "top-start":
+      case "right-end":
+      case "cover-bottom-start":
+        return "bottom left";
+      case "top-end":
+      case "left-end":
+      case "cover-bottom-end":
+        return "bottom right";
+      case "bottom":
+      case "cover-top":
+        return "top";
+      case "bottom-start":
+      case "right-start":
+      case "cover-top-start":
+        return "top left";
+      case "bottom-end":
+      case "left-start":
+      case "cover-top-end":
+        return "top right";
+      case "left":
+      case "cover-right":
+        return "right";
+      case "right":
+      case "cover-left":
+        return "left";
+    }
+  }
+  function handleHostMouseenter() {
+    if (options.trigger !== "hover") {
+      return;
+    }
+    enterHost = true;
+    open();
+  }
+  function handleHostMouseleave() {
+    return __async(this, null, function* () {
+      if (options.trigger !== "hover") {
+        return;
+      }
+      enterHost = false;
+      yield doubleRaf();
+      if (enterPopover) {
+        return;
+      }
+      close();
+    });
+  }
+  function handlePopoverMouseenter() {
+    if (options.trigger !== "hover") {
+      return;
+    }
+    enterPopover = true;
+  }
+  function handlePopoverMouseleave() {
+    return __async(this, null, function* () {
+      if (options.trigger !== "hover") {
+        return;
+      }
+      enterPopover = false;
+      yield doubleRaf();
+      if (enterHost) {
+        return;
+      }
+      close();
+    });
+  }
+  function handleHostClick() {
+    if (options.trigger !== "click") {
+      return;
+    }
+    if (options.closeOnClickReference && show.value) {
+      close();
+      return;
+    }
+    open();
+  }
+  function handlePopoverClose() {
+    close();
+  }
+  function handleClickOutside(e) {
+    if (options.trigger !== "click") {
+      return;
+    }
+    handlePopoverClose();
+    call(options.onClickOutside, e);
+  }
+  function handleClosed() {
+    resize();
+    call(options.onClosed);
+  }
+  function getPosition() {
+    const { offsetX, offsetY, placement } = options;
+    computeHostSize();
+    const offset2 = {
+      x: toPxNum(offsetX),
+      y: toPxNum(offsetY)
+    };
+    switch (placement) {
+      case "cover-top":
+        return {
+          placement: "bottom",
+          skidding: offset2.x,
+          distance: offset2.y - hostSize.value.height
+        };
+      case "cover-top-start":
+        return {
+          placement: "bottom-start",
+          skidding: offset2.x,
+          distance: offset2.y - hostSize.value.height
+        };
+      case "cover-top-end":
+        return {
+          placement: "bottom-end",
+          skidding: offset2.x,
+          distance: offset2.y - hostSize.value.height
+        };
+      case "cover-bottom":
+        return {
+          placement: "top",
+          skidding: offset2.x,
+          distance: -offset2.y - hostSize.value.height
+        };
+      case "cover-bottom-start":
+        return {
+          placement: "top-start",
+          skidding: offset2.x,
+          distance: -offset2.y - hostSize.value.height
+        };
+      case "cover-bottom-end":
+        return {
+          placement: "top-end",
+          skidding: offset2.x,
+          distance: -offset2.y - hostSize.value.height
+        };
+      case "cover-left":
+        return {
+          placement: "right",
+          skidding: offset2.y,
+          distance: offset2.x - hostSize.value.width
+        };
+      case "cover-right":
+        return {
+          placement: "left",
+          skidding: offset2.y,
+          distance: -offset2.x - hostSize.value.width
+        };
+      case "left":
+      case "left-start":
+      case "left-end":
+        return {
+          placement,
+          skidding: offset2.y,
+          distance: -offset2.x
+        };
+      case "top":
+      case "top-start":
+      case "top-end":
+        return {
+          placement,
+          skidding: offset2.x,
+          distance: -offset2.y
+        };
+      case "bottom":
+      case "bottom-start":
+      case "bottom-end":
+        return {
+          placement,
+          skidding: offset2.x,
+          distance: offset2.y
+        };
+      case "right":
+      case "right-start":
+      case "right-end":
+        return {
+          placement,
+          skidding: offset2.y,
+          distance: offset2.x
+        };
+    }
+  }
+  function getPopperOptions() {
+    const { placement, skidding, distance } = getPosition();
+    const modifiers = [
+      __spreadProps(__spreadValues({}, flip), {
+        enabled: show.value
+      }),
+      __spreadProps(__spreadValues({}, offset), {
+        options: {
+          offset: [skidding, distance]
+        }
+      }),
+      __spreadProps(__spreadValues({}, computeStyles), {
+        options: {
+          adaptive: false,
+          gpuAcceleration: false
+        },
+        enabled: show.value
+      }),
+      {
+        name: "applyTransformOrigin",
+        enabled: show.value,
+        phase: "beforeWrite",
+        fn({ state }) {
+          state.styles.popper.transformOrigin = getTransformOrigin();
+        }
+      }
+    ];
+    return {
+      placement,
+      modifiers,
+      strategy: options.strategy
+    };
+  }
+  function getReference() {
+    return options.reference ? host.value.querySelector(options.reference) : host.value;
+  }
+  function handleKeydown(event) {
+    const { closeOnKeyEscape = false } = options;
+    if (event.key === "Escape" && closeOnKeyEscape && show.value) {
+      preventDefault(event);
+      close();
+    }
+  }
+  function resize() {
+    popoverInstance.setOptions(getPopperOptions());
+  }
+  function open() {
+    if (options.disabled) {
+      return;
+    }
+    show.value = true;
+    call(options["onUpdate:show"], true);
+  }
+  function close() {
+    show.value = false;
+    call(options["onUpdate:show"], false);
+  }
+  return {
+    show,
+    popover,
+    zIndex,
+    host,
+    hostSize,
+    handleHostClick,
+    handleHostMouseenter,
+    handleHostMouseleave,
+    handlePopoverClose,
+    handlePopoverMouseenter,
+    handlePopoverMouseleave,
+    handleClosed,
+    resize,
+    open,
+    close
+  };
+}
+export {
+  usePopover
+};

package/es/menu-option/MenuOption.mjs

@@ -0,0 +1,171 @@
+import VarCheckbox from "../checkbox/index.mjs";
+import Ripple from "../ripple/index.mjs";
+import Hover from "../hover/index.mjs";
+import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
+import { defineComponent, computed, ref, watch } from "vue";
+import { useMenuSelect } from "./provide.mjs";
+import { createNamespace, MaybeVNode } from "../utils/components.mjs";
+import { props } from "./props.mjs";
+import { preventDefault, isFunction } from "@varlet/shared";
+import { useEventListener } from "@varlet/use";
+const { name, n, classes } = createNamespace("menu-option");
+import { normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, createVNode as _createVNode, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
+const _hoisted_1 = ["tabindex"];
+function __render__(_ctx, _cache) {
+  const _component_var_checkbox = _resolveComponent("var-checkbox");
+  const _component_maybe_v_node = _resolveComponent("maybe-v-node");
+  const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
+  const _directive_ripple = _resolveDirective("ripple");
+  const _directive_hover = _resolveDirective("hover");
+  return _withDirectives((_openBlock(), _createElementBlock("div", {
+    ref: "root",
+    class: _normalizeClass(
+      _ctx.classes(_ctx.n(), _ctx.n("$--box"), _ctx.n(`--${_ctx.size}`), [_ctx.optionSelected, _ctx.n("--selected-color")], [_ctx.disabled, _ctx.n("--disabled")])
+    ),
+    tabindex: _ctx.disabled ? void 0 : "-1",
+    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
+    onFocus: _cache[3] || (_cache[3] = ($event) => _ctx.isFocusing = true),
+    onBlur: _cache[4] || (_cache[4] = ($event) => _ctx.isFocusing = false)
+  }, [
+    _createElementVNode(
+      "div",
+      {
+        class: _normalizeClass(_ctx.classes(_ctx.n("cover"), [_ctx.optionSelected, _ctx.n("--selected-background")]))
+      },
+      null,
+      2
+      /* CLASS */
+    ),
+    _ctx.multiple ? (_openBlock(), _createBlock(_component_var_checkbox, {
+      key: 0,
+      ref: "checkbox",
+      modelValue: _ctx.optionSelected,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.optionSelected = $event),
+      disabled: _ctx.disabled,
+      onClick: _cache[1] || (_cache[1] = _withModifiers(() => {
+      }, ["stop"])),
+      onChange: _ctx.handleSelect
+    }, null, 8, ["modelValue", "disabled", "onChange"])) : _createCommentVNode("v-if", true),
+    _renderSlot(_ctx.$slots, "default", {}, () => [
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.classes(_ctx.n("text")))
+        },
+        [
+          _createVNode(_component_maybe_v_node, {
+            class: _normalizeClass(_ctx.n("$--ellipsis")),
+            is: _ctx.labelVNode
+          }, null, 8, ["class", "is"])
+        ],
+        2
+        /* CLASS */
+      )
+    ]),
+    _createVNode(_component_var_hover_overlay, {
+      hovering: _ctx.hovering && !_ctx.disabled,
+      focusing: _ctx.isFocusing && !_ctx.disabled
+    }, null, 8, ["hovering", "focusing"])
+  ], 42, _hoisted_1)), [
+    [_directive_ripple, { disabled: _ctx.disabled || !_ctx.ripple }],
+    [_directive_hover, _ctx.handleHovering, "desktop"]
+  ]);
+}
+const __sfc__ = defineComponent({
+  name,
+  directives: { Ripple, Hover },
+  components: {
+    VarCheckbox,
+    VarHoverOverlay,
+    MaybeVNode
+  },
+  props,
+  setup(props2) {
+    const root = ref();
+    const isFocusing = ref(false);
+    const optionSelected = ref(false);
+    const selected = computed(() => optionSelected.value);
+    const labelVNode = computed(
+      () => {
+        var _a;
+        return isFunction(props2.label) ? props2.label(
+          (_a = props2.option) != null ? _a : {
+            label: props2.label,
+            value: props2.value,
+            disabled: props2.disabled,
+            ripple: props2.ripple
+          },
+          optionSelected.value
+        ) : props2.label;
+      }
+    );
+    const value = computed(() => props2.value);
+    const { menuSelect, bindMenuSelect } = useMenuSelect();
+    const { size, multiple, onSelect, computeLabel } = menuSelect;
+    const { hovering, handleHovering } = useHoverOverlay();
+    const menuOptionProvider = {
+      label: labelVNode,
+      value,
+      selected,
+      sync
+    };
+    watch([() => props2.label, () => props2.value], computeLabel);
+    bindMenuSelect(menuOptionProvider);
+    useEventListener(() => window, "keydown", handleKeydown);
+    useEventListener(() => window, "keyup", handleKeyup);
+    function handleClick() {
+      if (props2.disabled) {
+        return;
+      }
+      handleSelect();
+    }
+    function handleKeydown(event) {
+      if (!isFocusing.value) {
+        return;
+      }
+      if (event.key === " " || event.key === "Enter") {
+        preventDefault(event);
+      }
+      if (event.key === "Enter") {
+        root.value.click();
+      }
+    }
+    function handleKeyup(event) {
+      if (!isFocusing.value) {
+        return;
+      }
+      if (event.key === " ") {
+        preventDefault(event);
+        root.value.click();
+      }
+    }
+    function handleSelect() {
+      if (multiple.value) {
+        optionSelected.value = !optionSelected.value;
+      }
+      onSelect(menuOptionProvider);
+    }
+    function sync(checked) {
+      optionSelected.value = checked;
+    }
+    return {
+      root,
+      optionSelected,
+      size,
+      multiple,
+      hovering,
+      isFocusing,
+      labelVNode,
+      n,
+      classes,
+      handleHovering,
+      handleClick,
+      handleSelect
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/menu-option/index.mjs

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

package/es/menu-option/menuOption.css

@@ -0,0 +1 @@
+:root { --menu-option-normal-height: 38px; --menu-option-small-height: 30px; --menu-option-mini-height: 24px; --menu-option-large-height: 46px; --menu-option-padding: 0 12px; --menu-option-normal-font-size: var(--font-size-md); --menu-option-small-font-size: var(--font-size-sm); --menu-option-mini-font-size: var(--font-size-xs); --menu-option-large-font-size: var(--font-size-lg); --menu-option-selected-background: var(--color-primary); --menu-option-text-color: #555; --menu-option-disabled-color: var(--color-text-disabled);}.var-menu-option { position: relative; display: flex; align-items: center; padding: var(--menu-option-padding); cursor: pointer; -webkit-tap-highlight-color: transparent; color: var(--menu-option-text-color); outline: none;}.var-menu-option__cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.2; background: transparent;}.var-menu-option__text { display: flex; align-items: center; overflow-x: hidden;}.var-menu-option--normal { height: var(--menu-option-normal-height); font-size: var(--menu-option-normal-font-size);}.var-menu-option--large { height: var(--menu-option-large-height); font-size: var(--menu-option-large-font-size);}.var-menu-option--small { height: var(--menu-option-small-height); font-size: var(--menu-option-small-font-size);}.var-menu-option--mini { height: var(--menu-option-mini-height); font-size: var(--menu-option-mini-font-size);}.var-menu-option--selected-background { background: var(--menu-option-selected-background);}.var-menu-option--selected-color { color: var(--menu-option-selected-background);}.var-menu-option--disabled { color: var(--menu-option-disabled-color); cursor: not-allowed;}

package/es/menu-option/props.mjs

@@ -0,0 +1,14 @@
+const props = {
+  label: {},
+  value: {},
+  disabled: Boolean,
+  ripple: {
+    type: Boolean,
+    default: true
+  },
+  // internal
+  option: Object
+};
+export {
+  props
+};

package/es/menu-option/provide.mjs

@@ -0,0 +1,19 @@
+import { useParent } from "@varlet/use";
+import { error } from "../utils/logger.mjs";
+import { MENU_SELECT_BIND_MENU_OPTION_KEY } from "../menu-select/provide.mjs";
+function useMenuSelect() {
+  const { index, parentProvider, bindParent } = useParent(
+    MENU_SELECT_BIND_MENU_OPTION_KEY
+  );
+  if (!bindParent) {
+    error("MenuOption", "<var-menu-option/> must in <var-menu-select/>");
+  }
+  return {
+    index,
+    menuSelect: parentProvider,
+    bindMenuSelect: bindParent
+  };
+}
+export {
+  useMenuSelect
+};

package/es/menu-option/style/index.mjs

@@ -0,0 +1,5 @@
+import '../../styles/common.css'
+import '../../ripple/ripple.css'
+import '../../checkbox/checkbox.css'
+import '../menuOption.css'
+import '../MenuOptionSfc.css'