@varlet/ui 2.20.0 → 2.20.1

package/es/menu/menu.css

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

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

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

package/es/menu/usePopover.mjs

@@ -1,333 +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";
-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

@@ -1,122 +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 } 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

@@ -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: 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

@@ -1,8 +0,0 @@
-const props = {
-  label: {},
-  value: {},
-  disabled: Boolean
-};
-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'

package/es/menu-select/MenuSelect.mjs

@@ -1,113 +0,0 @@
-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
-};