@varlet/ui 3.5.1 → 3.5.3

package/es/menu-select/MenuSelect.mjs

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

@@ -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
+};

package/es/menu-select/menuSelect.css

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

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

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

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

@@ -0,0 +1,172 @@
+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 } 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.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

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

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

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

package/es/option/provide.mjs

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

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

@@ -0,0 +1,84 @@
+import { defineComponent, Teleport, Transition, mergeProps as _mergeProps, createVNode as _createVNode } 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

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

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

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

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