@varlet/ui 3.5.0 → 3.5.1

package/es/menu-select/MenuSelect.mjs

@@ -1,157 +0,0 @@
-import VarMenu from "../menu/index.mjs";
-import VarMenuOption from "../menu-option/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, preventDefault } from "@varlet/shared";
-import { useEventListener, useVModel } from "@varlet/use";
-import { focusChildElementByKey } from "../utils/elements.mjs";
-const { name, n, classes } = createNamespace("menu-select");
-import { renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, withCtx as _withCtx } from "vue";
-function __render__(_ctx, _cache) {
-  const _component_var_menu_option = _resolveComponent("var-menu-option");
-  const _component_var_menu = _resolveComponent("var-menu");
-  return _openBlock(), _createBlock(_component_var_menu, {
-    ref: "menu",
-    tabindex: "-1",
-    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,
-    "close-on-key-escape": false,
-    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",
-        {
-          ref: "menuOptionsRef",
-          class: _normalizeClass(_ctx.classes(_ctx.n("menu"), _ctx.formatElevation(_ctx.elevation, 3), [_ctx.scrollable, _ctx.n("--scrollable")]))
-        },
-        [
-          _ctx.options.length ? (_openBlock(true), _createElementBlock(
-            _Fragment,
-            { key: 0 },
-            _renderList(_ctx.options, (option) => {
-              return _openBlock(), _createBlock(_component_var_menu_option, {
-                key: option[_ctx.valueKey],
-                label: option[_ctx.labelKey],
-                value: option[_ctx.valueKey],
-                option,
-                ripple: option.ripple,
-                disabled: option.disabled
-              }, null, 8, ["label", "value", "option", "ripple", "disabled"]);
-            }),
-            128
-            /* KEYED_FRAGMENT */
-          )) : _createCommentVNode("v-if", true),
-          _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, VarMenuOption },
-  props,
-  setup(props2) {
-    const menu = ref(null);
-    const menuOptionsRef = 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);
-    useEventListener(() => window, "keydown", handleKeydown);
-    function onSelect(option) {
-      const { multiple, closeOnSelect } = props2;
-      call(props2["onUpdate:modelValue"], getSelectedValue(option));
-      if (!multiple && closeOnSelect) {
-        menu.value.$el.focus();
-        close();
-      }
-    }
-    function handleKeydown(event) {
-      if (props2.disabled || !show.value) {
-        return;
-      }
-      const { key } = event;
-      if (["Escape", "ArrowDown", "ArrowUp"].includes(key)) {
-        preventDefault(event);
-      }
-      if (key === "Escape") {
-        menu.value.$el.focus();
-        close();
-        call(props2.onKeyEscape);
-        return;
-      }
-      if (key === "ArrowDown" || key === "ArrowUp") {
-        focusChildElementByKey(menu.value.$el, menuOptionsRef.value, key);
-      }
-    }
-    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,
-      menuOptionsRef,
-      n,
-      classes,
-      formatElevation,
-      open,
-      close,
-      resize
-    };
-  }
-});
-__sfc__.render = __render__;
-var stdin_default = __sfc__;
-export {
-  stdin_default as default
-};

package/es/menu-select/index.mjs

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

package/es/menu-select/menuSelect.css

@@ -1 +0,0 @@
-:root { --menu-select-menu-max-height: 278px; --menu-select-menu-padding: 0; --menu-select-menu-border-radius: 2px; --menu-select-menu-background-color: var(--color-surface-container-high);}.var-menu-select__menu { padding: var(--menu-select-menu-padding); border-radius: var(--menu-select-menu-border-radius); background-color: var(--menu-select-menu-background-color);}.var-menu-select--scrollable { overflow-y: auto; max-height: var(--menu-select-menu-max-height);}

package/es/menu-select/props.mjs

@@ -1,77 +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));
-import { menuProps } from "../menu/index.mjs";
-import { defineListenerProp, pickProps } from "../utils/components.mjs";
-const props = __spreadProps(__spreadValues({
-  modelValue: {
-    type: [String, Number, Boolean, Array],
-    default: void 0
-  },
-  options: {
-    type: Array,
-    default: () => []
-  },
-  labelKey: {
-    type: String,
-    default: "label"
-  },
-  valueKey: {
-    type: String,
-    default: "value"
-  },
-  size: {
-    type: String,
-    default: "normal"
-  },
-  multiple: Boolean,
-  scrollable: Boolean,
-  closeOnSelect: {
-    type: Boolean,
-    default: true
-  },
-  "onUpdate:modelValue": defineListenerProp()
-}, pickProps(menuProps, [
-  "show",
-  "disabled",
-  "trigger",
-  "reference",
-  "placement",
-  "strategy",
-  "offsetX",
-  "offsetY",
-  "teleport",
-  "sameWidth",
-  "elevation",
-  "popoverClass",
-  "closeOnClickReference",
-  "onOpen",
-  "onOpened",
-  "onClose",
-  "onClosed",
-  "onClickOutside",
-  "onUpdate:show"
-])), {
-  // internal start
-  onKeyEscape: defineListenerProp()
-  // internal end
-});
-export {
-  props
-};

package/es/menu-select/provide.mjs

@@ -1,16 +0,0 @@
-import { useChildren } from "@varlet/use";
-const MENU_SELECT_BIND_MENU_OPTION_KEY = Symbol("MENU_SELECT_BIND_MENU_OPTION_KEY");
-function useMenuOptions() {
-  const { length, childProviders, bindChildren } = useChildren(
-    MENU_SELECT_BIND_MENU_OPTION_KEY
-  );
-  return {
-    length,
-    menuOptions: childProviders,
-    bindMenuOptions: bindChildren
-  };
-}
-export {
-  MENU_SELECT_BIND_MENU_OPTION_KEY,
-  useMenuOptions
-};

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

@@ -1,6 +0,0 @@
-import '../../styles/elevation.css'
-import '../../styles/common.css'
-import '../../menu/menu.css'
-import '../../menu-option/menuOption.css'
-import '../menuSelect.css'
-import '../MenuSelectSfc.css'

package/es/option/Option.mjs

@@ -1,173 +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 { useSelect } 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("option");
-import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, 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.optionSelected, _ctx.n("--selected-color")], [_ctx.disabled, _ctx.n("--disabled")])),
-    style: _normalizeStyle({
-      color: _ctx.optionSelected ? _ctx.focusColor : void 0
-    }),
-    tabindex: _ctx.disabled ? void 0 : "-1",
-    onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.isFocusing = true),
-    onBlur: _cache[3] || (_cache[3] = ($event) => _ctx.isFocusing = false),
-    onClick: _cache[4] || (_cache[4] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
-  }, [
-    _createElementVNode(
-      "div",
-      {
-        class: _normalizeClass(_ctx.classes(_ctx.n("cover"), [_ctx.optionSelected, _ctx.n("--selected-background")])),
-        style: _normalizeStyle({
-          background: _ctx.optionSelected ? _ctx.focusColor : void 0
-        })
-      },
-      null,
-      6
-      /* CLASS, STYLE */
-    ),
-    _ctx.multiple ? (_openBlock(), _createBlock(_component_var_checkbox, {
-      key: 0,
-      ref: "checkbox",
-      modelValue: _ctx.optionSelected,
-      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.optionSelected = $event),
-      "checked-color": _ctx.focusColor,
-      disabled: _ctx.disabled,
-      onClick: _cache[1] || (_cache[1] = _withModifiers(() => {
-      }, ["stop"])),
-      onChange: _ctx.handleSelect
-    }, null, 8, ["modelValue", "checked-color", "disabled", "onChange"])) : _createCommentVNode("v-if", true),
-    _renderSlot(_ctx.$slots, "default", { selected: _ctx.optionSelected }, () => [
-      _createElementVNode(
-        "div",
-        {
-          class: _normalizeClass(_ctx.classes(_ctx.n("text"), _ctx.n("$--ellipsis")))
-        },
-        [
-          _createVNode(_component_maybe_v_node, { is: _ctx.labelVNode }, null, 8, ["is"])
-        ],
-        2
-        /* CLASS */
-      )
-    ]),
-    _createVNode(_component_var_hover_overlay, {
-      hovering: _ctx.hovering && !_ctx.disabled,
-      focusing: _ctx.isFocusing && !_ctx.disabled
-    }, null, 8, ["hovering", "focusing"])
-  ], 46, _hoisted_1)), [
-    [_directive_ripple, { disabled: _ctx.disabled }],
-    [_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
-          },
-          optionSelected.value
-        ) : props2.label;
-      }
-    );
-    const value = computed(() => props2.value);
-    const { select, bindSelect } = useSelect();
-    const { multiple, focusColor, onSelect, computeLabel } = select;
-    const { hovering, handleHovering } = useHoverOverlay();
-    const optionProvider = {
-      label: labelVNode,
-      value,
-      selected,
-      sync
-    };
-    watch([() => props2.label, () => props2.value], computeLabel);
-    bindSelect(optionProvider);
-    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(optionProvider);
-    }
-    function sync(checked) {
-      optionSelected.value = checked;
-    }
-    return {
-      root,
-      optionSelected,
-      multiple,
-      focusColor,
-      hovering,
-      isFocusing,
-      labelVNode,
-      n,
-      classes,
-      handleHovering,
-      handleClick,
-      handleSelect
-    };
-  }
-});
-__sfc__.render = __render__;
-var stdin_default = __sfc__;
-export {
-  stdin_default as default
-};

package/es/option/index.mjs

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

package/es/option/option.css

@@ -1 +0,0 @@
-:root { --option-height: 38px; --option-padding: 0 12px; --option-font-size: 16px; --option-selected-background: var(--field-decorator-focus-color); --option-text-color: #555; --option-disabled-color: var(--color-text-disabled);}.var-option { position: relative; display: flex; align-items: center; height: var(--option-height); padding: var(--option-padding); cursor: pointer; -webkit-tap-highlight-color: transparent; color: var(--option-text-color); outline: none;}.var-option__cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.2; background: transparent;}.var-option__text { font-size: var(--option-font-size);}.var-option--selected-background { background: var(--option-selected-background);}.var-option--selected-color { color: var(--option-selected-background);}.var-option--disabled { color: var(--option-disabled-color); cursor: not-allowed;}

package/es/option/props.mjs

@@ -1,10 +0,0 @@
-const props = {
-  label: {},
-  value: {},
-  disabled: Boolean,
-  // internal
-  option: Object
-};
-export {
-  props
-};

package/es/option/provide.mjs

@@ -1,17 +0,0 @@
-import { useParent } from "@varlet/use";
-import { error } from "../utils/logger.mjs";
-import { SELECT_BIND_OPTION_KEY } from "../select/provide.mjs";
-function useSelect() {
-  const { index, parentProvider, bindParent } = useParent(SELECT_BIND_OPTION_KEY);
-  if (!bindParent) {
-    error("Option", "<var-option/> must in <var-select/>");
-  }
-  return {
-    index,
-    select: parentProvider,
-    bindSelect: bindParent
-  };
-}
-export {
-  useSelect
-};

package/es/option/style/index.mjs

@@ -1,6 +0,0 @@
-import '../../styles/common.css'
-import '../../ripple/ripple.css'
-import '../../hover-overlay/hoverOverlay.css'
-import '../../checkbox/checkbox.css'
-import '../option.css'
-import '../OptionSfc.css'

package/es/overlay/Overlay.mjs

@@ -1,85 +0,0 @@
-import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
-import { defineComponent, Teleport, Transition } from "vue";
-import { props } from "./props.mjs";
-import { useLock } from "../context/lock.mjs";
-import { useZIndex } from "../context/zIndex.mjs";
-import { createNamespace, useTeleport } from "../utils/components.mjs";
-import { call, preventDefault } from "@varlet/shared";
-
-
-import { useStack } from "../context/stack.mjs";
-import { useEventListener } from "@varlet/use";
-const {
-  name,
-  n
-} = createNamespace("overlay");
-var stdin_default = defineComponent({
-  name,
-  inheritAttrs: false,
-  props,
-  setup(props2, {
-    slots,
-    attrs
-  }) {
-    const {
-      zIndex
-    } = useZIndex(() => props2.show, 1);
-    const {
-      onStackTop
-    } = useStack(() => props2.show, zIndex);
-    const {
-      disabled
-    } = useTeleport();
-    useLock(() => props2.show, () => props2.lockScroll);
-    useEventListener(() => window, "keydown", handleKeydown);
-    function handleKeydown(event) {
-      if (!onStackTop() || event.key !== "Escape" || !props2.show) {
-        return;
-      }
-      call(props2.onKeyEscape);
-      if (!props2.closeOnKeyEscape) {
-        return;
-      }
-      preventDefault(event);
-      call(props2["onUpdate:show"], false);
-    }
-    function handleClickOverlay() {
-      call(props2.onClick);
-      call(props2["onUpdate:show"], false);
-    }
-    function renderOverlay() {
-      return _createVNode("div", _mergeProps({
-        "class": n(),
-        "style": {
-          zIndex: zIndex.value
-        }
-      }, attrs, {
-        "onClick": handleClickOverlay
-      }), [call(slots.default)]);
-    }
-    function renderTransitionOverlay() {
-      return _createVNode(Transition, {
-        "name": n("--fade")
-      }, {
-        default: () => [props2.show && renderOverlay()]
-      });
-    }
-    return () => {
-      const {
-        teleport
-      } = props2;
-      if (teleport) {
-        return _createVNode(Teleport, {
-          "to": teleport,
-          "disabled": disabled.value
-        }, {
-          default: () => [renderTransitionOverlay()]
-        });
-      }
-      return renderTransitionOverlay();
-    };
-  }
-});
-export {
-  stdin_default as default
-};

package/es/overlay/index.mjs

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

package/es/overlay/overlay.css

@@ -1 +0,0 @@
-:root { --overlay-background-color: rgba(0, 0, 0, 0.6);}.var-overlay { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--overlay-background-color); transition: all 0.25s;}.var-overlay--fade-enter-from,.var-overlay--fade-leave-to { opacity: 0;}.var-overlay--fade-enter-active,.var-overlay--fade-leave-active { transition: opacity 0.25s;}

package/es/overlay/props.mjs

@@ -1,19 +0,0 @@
-import { defineListenerProp } from "../utils/components.mjs";
-const props = {
-  show: Boolean,
-  lockScroll: {
-    type: Boolean,
-    default: true
-  },
-  teleport: [String, Object, Boolean],
-  closeOnKeyEscape: {
-    type: Boolean,
-    default: true
-  },
-  onClick: defineListenerProp(),
-  onKeyEscape: defineListenerProp(),
-  "onUpdate:show": defineListenerProp()
-};
-export {
-  props
-};

package/es/overlay/style/index.mjs

@@ -1,2 +0,0 @@
-import '../../styles/common.css'
-import '../overlay.css'