@varlet/ui 3.5.0 → 3.5.1

package/es/menu/usePopover.mjs

@@ -1,362 +0,0 @@
-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

@@ -1,172 +0,0 @@
-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, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
-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

@@ -1,12 +0,0 @@
-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

@@ -1 +0,0 @@
-: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

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

package/es/menu-option/provide.mjs

@@ -1,19 +0,0 @@
-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

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