@varlet/ui 2.20.1 → 2.20.2

package/es/menu/menu.css

@@ -0,0 +1 @@
+:root { --menu-background-color: #fff;}.var-menu { display: inline-block;}.var-menu-enter-from,.var-menu-leave-to { opacity: 0; transform: scale(0.8);}.var-menu-enter-active,.var-menu-leave-active { transition-property: opacity, transform; transition-duration: 0.2s;}.var-menu--menu-background-color { background: var(--menu-background-color);}

package/es/menu/props.mjs

@@ -0,0 +1,50 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  show: Boolean,
+  disabled: Boolean,
+  trigger: {
+    type: String,
+    default: "click"
+  },
+  reference: String,
+  placement: {
+    type: String,
+    default: "cover-top-start"
+  },
+  strategy: {
+    type: String,
+    default: "absolute"
+  },
+  offsetX: {
+    type: [Number, String],
+    default: 0
+  },
+  offsetY: {
+    type: [Number, String],
+    default: 0
+  },
+  teleport: {
+    type: [String, Object, Boolean],
+    default: "body"
+  },
+  sameWidth: Boolean,
+  elevation: {
+    type: [Boolean, String, Number],
+    default: true
+  },
+  defaultStyle: {
+    type: Boolean,
+    default: true
+  },
+  popoverClass: String,
+  closeOnClickReference: Boolean,
+  onOpen: defineListenerProp(),
+  onOpened: defineListenerProp(),
+  onClose: defineListenerProp(),
+  onClosed: defineListenerProp(),
+  onClickOutside: defineListenerProp(),
+  "onUpdate:show": defineListenerProp()
+};
+export {
+  props
+};

package/es/menu/style/index.mjs

@@ -0,0 +1,4 @@
+import '../../styles/elevation.css'
+import '../../styles/common.css'
+import '../menu.css'
+import '../MenuSfc.css'

package/es/menu/usePopover.mjs

@@ -0,0 +1,333 @@
+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";
+import offset from "@popperjs/core/lib/modifiers/offset";
+import computeStyles from "@popperjs/core/lib/modifiers/computeStyles";
+import { useClickOutside, useVModel } from "@varlet/use";
+import { doubleRaf, getStyle, call } from "@varlet/shared";
+import { toPxNum } from "../utils/elements.mjs";
+import { onMounted, onUnmounted, ref, watch } from "vue";
+import { createPopper } from "@popperjs/core/lib/popper-lite";
+import { useZIndex } from "../context/zIndex.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) {
+        resize();
+        call(options.onOpen);
+      } else {
+        call(options.onClose);
+      }
+    }
+  });
+  const { zIndex } = useZIndex(() => show.value, 1);
+  let popoverInstance = null;
+  let enterPopover = false;
+  let enterHost = false;
+  const computeHostSize = () => {
+    const { width, height } = getStyle(host.value);
+    hostSize.value = {
+      width: toPxNum(width),
+      height: toPxNum(height)
+    };
+  };
+  const 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";
+    }
+  };
+  const handleHostMouseenter = () => {
+    if (options.trigger !== "hover") {
+      return;
+    }
+    enterHost = true;
+    open();
+  };
+  const handleHostMouseleave = () => __async(this, null, function* () {
+    if (options.trigger !== "hover") {
+      return;
+    }
+    enterHost = false;
+    yield doubleRaf();
+    if (enterPopover) {
+      return;
+    }
+    close();
+  });
+  const handlePopoverMouseenter = () => {
+    if (options.trigger !== "hover") {
+      return;
+    }
+    enterPopover = true;
+  };
+  const handlePopoverMouseleave = () => __async(this, null, function* () {
+    if (options.trigger !== "hover") {
+      return;
+    }
+    enterPopover = false;
+    yield doubleRaf();
+    if (enterHost) {
+      return;
+    }
+    close();
+  });
+  const handleHostClick = () => {
+    if (options.closeOnClickReference && show.value) {
+      close();
+    } else {
+      open();
+    }
+  };
+  const handlePopoverClose = () => {
+    close();
+  };
+  const handleClickOutside = (e) => {
+    if (options.trigger !== "click") {
+      return;
+    }
+    handlePopoverClose();
+    call(options.onClickOutside, e);
+  };
+  const handleClosed = () => {
+    resize();
+    call(options.onClosed);
+  };
+  const 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
+        };
+    }
+  };
+  const 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
+    };
+  };
+  const getReference = () => options.reference ? host.value.querySelector(options.reference) : host.value;
+  const resize = () => {
+    popoverInstance.setOptions(getPopperOptions());
+  };
+  const open = () => {
+    const { disabled } = options;
+    if (disabled) {
+      return;
+    }
+    show.value = true;
+    call(options["onUpdate:show"], true);
+  };
+  const close = () => {
+    show.value = false;
+    call(options["onUpdate:show"], false);
+  };
+  useClickOutside(getReference, "click", handleClickOutside);
+  watch(() => [options.offsetX, options.offsetY, options.placement, options.strategy], resize);
+  watch(() => options.disabled, close);
+  onMounted(() => {
+    var _a;
+    popoverInstance = createPopper((_a = getReference()) != null ? _a : host.value, popover.value, getPopperOptions());
+  });
+  onUnmounted(() => {
+    popoverInstance.destroy();
+  });
+  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,122 @@
+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 } from "../utils/components.mjs";
+import { props } from "./props.mjs";
+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, toDisplayString as _toDisplayString, createVNode as _createVNode, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_var_checkbox = _resolveComponent("var-checkbox");
+  const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
+  const _directive_ripple = _resolveDirective("ripple");
+  const _directive_hover = _resolveDirective("hover");
+  return _withDirectives((_openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(
+        _ctx.classes(_ctx.n(), _ctx.n("$--box"), _ctx.n(`--${_ctx.size}`), [_ctx.optionSelected, _ctx.n("--selected-color")], [_ctx.disabled, _ctx.n("--disabled")])
+      ),
+      onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+    },
+    [
+      _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"), _ctx.n("$--ellipsis")))
+          },
+          _toDisplayString(_ctx.label),
+          3
+          /* TEXT, CLASS */
+        )
+      ]),
+      _createVNode(_component_var_hover_overlay, {
+        hovering: _ctx.hovering && !_ctx.disabled
+      }, null, 8, ["hovering"])
+    ],
+    2
+    /* CLASS */
+  )), [
+    [_directive_ripple, { disabled: _ctx.disabled }],
+    [_directive_hover, _ctx.handleHovering, "desktop"]
+  ]);
+}
+const __sfc__ = defineComponent({
+  name,
+  directives: { Ripple, Hover },
+  components: {
+    VarCheckbox,
+    VarHoverOverlay
+  },
+  props,
+  setup(props2) {
+    const optionSelected = ref(false);
+    const selected = computed(() => optionSelected.value);
+    const label = computed(() => props2.label);
+    const value = computed(() => props2.value);
+    const { menuSelect, bindMenuSelect } = useMenuSelect();
+    const { size, multiple, onSelect, computeLabel } = menuSelect;
+    const { hovering, handleHovering } = useHoverOverlay();
+    const menuOptionProvider = {
+      label,
+      value,
+      selected,
+      sync
+    };
+    watch([() => props2.label, () => props2.value], computeLabel);
+    bindMenuSelect(menuOptionProvider);
+    function handleClick() {
+      if (props2.disabled) {
+        return;
+      }
+      handleSelect();
+    }
+    function handleSelect() {
+      if (multiple.value) {
+        optionSelected.value = !optionSelected.value;
+      }
+      onSelect(menuOptionProvider);
+    }
+    function sync(checked) {
+      optionSelected.value = checked;
+    }
+    return {
+      optionSelected,
+      size,
+      multiple,
+      hovering,
+      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: rgba(0, 0, 0, 0); color: var(--menu-option-text-color);}.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;}.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,8 @@
+const props = {
+  label: {},
+  value: {},
+  disabled: Boolean
+};
+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'

package/es/menu-select/MenuSelect.mjs

@@ -0,0 +1,113 @@
+import VarMenu from "../menu/index.mjs";
+import { defineComponent, computed, ref } from "vue";
+import { props } from "./props.mjs";
+import { createNamespace, formatElevation } from "../utils/components.mjs";
+import { useMenuOptions } from "./provide.mjs";
+import { useSelectController } from "../select/useSelectController.mjs";
+import { call } from "@varlet/shared";
+import { useVModel } from "@varlet/use";
+const { name, n, classes } = createNamespace("menu-select");
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_var_menu = _resolveComponent("var-menu");
+  return _openBlock(), _createBlock(_component_var_menu, {
+    ref: "menu",
+    class: _normalizeClass(_ctx.n()),
+    disabled: _ctx.disabled,
+    trigger: _ctx.trigger,
+    reference: _ctx.reference,
+    placement: _ctx.placement,
+    strategy: _ctx.strategy,
+    "offset-x": _ctx.offsetX,
+    "offset-y": _ctx.offsetY,
+    teleport: _ctx.teleport,
+    "same-width": _ctx.sameWidth,
+    elevation: _ctx.elevation,
+    "default-style": false,
+    "popover-class": _ctx.popoverClass,
+    "close-on-click-reference": _ctx.closeOnClickReference,
+    show: _ctx.show,
+    "onUpdate:show": _cache[0] || (_cache[0] = ($event) => _ctx.show = $event),
+    onOpen: _ctx.onOpen,
+    onOpened: _ctx.onOpened,
+    onClose: _ctx.onClose,
+    onClosed: _ctx.onClosed,
+    onClickOutside: _ctx.onClickOutside
+  }, {
+    menu: _withCtx(() => [
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.classes(_ctx.n("menu"), _ctx.formatElevation(_ctx.elevation, 3), [_ctx.scrollable, _ctx.n("--scrollable")]))
+        },
+        [
+          _renderSlot(_ctx.$slots, "options")
+        ],
+        2
+        /* CLASS */
+      )
+    ]),
+    default: _withCtx(() => [
+      _renderSlot(_ctx.$slots, "default")
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["class", "disabled", "trigger", "reference", "placement", "strategy", "offset-x", "offset-y", "teleport", "same-width", "elevation", "popover-class", "close-on-click-reference", "show", "onOpen", "onOpened", "onClose", "onClosed", "onClickOutside"]);
+}
+const __sfc__ = defineComponent({
+  name,
+  components: { VarMenu },
+  props,
+  setup(props2) {
+    const menu = ref(null);
+    const show = useVModel(props2, "show");
+    const { menuOptions, length, bindMenuOptions } = useMenuOptions();
+    const { computeLabel, getSelectedValue } = useSelectController({
+      modelValue: () => props2.modelValue,
+      multiple: () => props2.multiple,
+      optionProviders: () => menuOptions,
+      optionProvidersLength: () => length.value
+    });
+    const menuSelectProvider = {
+      size: computed(() => props2.size),
+      multiple: computed(() => props2.multiple),
+      computeLabel,
+      onSelect
+    };
+    bindMenuOptions(menuSelectProvider);
+    function onSelect(option) {
+      const { multiple, closeOnSelect } = props2;
+      call(props2["onUpdate:modelValue"], getSelectedValue(option));
+      if (!multiple && closeOnSelect) {
+        show.value = false;
+      }
+    }
+    function open() {
+      var _a;
+      (_a = menu.value) == null ? void 0 : _a.open();
+    }
+    function close() {
+      var _a;
+      (_a = menu.value) == null ? void 0 : _a.close();
+    }
+    function resize() {
+      var _a;
+      (_a = menu.value) == null ? void 0 : _a.resize();
+    }
+    return {
+      show,
+      menu,
+      n,
+      classes,
+      formatElevation,
+      open,
+      close,
+      resize
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/menu-select/index.mjs

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