@varlet/ui 2.20.1 → 2.20.2

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: #fff;}.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,57 @@
+var __defProp = Object.defineProperty;
+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;
+};
+import { menuProps } from "../menu/index.mjs";
+import { defineListenerProp, pickProps } from "../utils/components.mjs";
+const props = __spreadValues({
+  modelValue: {
+    default: void 0
+  },
+  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"
+]));
+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,5 @@
+import '../../styles/elevation.css'
+import '../../styles/common.css'
+import '../../menu/menu.css'
+import '../menuSelect.css'
+import '../MenuSelectSfc.css'

package/es/option/Option.mjs

@@ -0,0 +1,127 @@
+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 } from "../utils/components.mjs";
+import { props } from "./props.mjs";
+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, 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.optionSelected, _ctx.n("--selected-color")], [_ctx.disabled, _ctx.n("--disabled")])),
+      style: _normalizeStyle({
+        color: _ctx.optionSelected ? _ctx.focusColor : void 0
+      }),
+      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")])),
+          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", {}, () => [
+        _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"])
+    ],
+    6
+    /* CLASS, STYLE */
+  )), [
+    [_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 { select, bindSelect } = useSelect();
+    const { multiple, focusColor, onSelect, computeLabel } = select;
+    const { hovering, handleHovering } = useHoverOverlay();
+    const optionProvider = {
+      label,
+      value,
+      selected,
+      sync
+    };
+    watch([() => props2.label, () => props2.value], computeLabel);
+    bindSelect(optionProvider);
+    function handleClick() {
+      if (props2.disabled) {
+        return;
+      }
+      handleSelect();
+    }
+    function handleSelect() {
+      if (multiple.value) {
+        optionSelected.value = !optionSelected.value;
+      }
+      onSelect(optionProvider);
+    }
+    function sync(checked) {
+      optionSelected.value = checked;
+    }
+    return {
+      optionSelected,
+      multiple,
+      focusColor,
+      hovering,
+      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: rgba(0, 0, 0, 0); color: var(--option-text-color);}.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,8 @@
+const props = {
+  label: {},
+  value: {},
+  disabled: Boolean
+};
+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 '../../checkbox/checkbox.css'
+import '../../select/select.css'
+import '../option.css'
+import '../OptionSfc.css'

package/es/overlay/Overlay.mjs

@@ -0,0 +1,68 @@
+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 } from "@varlet/shared";
+
+
+const {
+  name,
+  n
+} = createNamespace("overlay");
+var stdin_default = defineComponent({
+  name,
+  inheritAttrs: false,
+  props,
+  setup(props2, {
+    slots,
+    attrs
+  }) {
+    const {
+      zIndex
+    } = useZIndex(() => props2.show, 1);
+    const {
+      disabled
+    } = useTeleport();
+    useLock(() => props2.show, () => props2.lockScroll);
+    function handleClickOverlay() {
+      call(props2.onClick);
+      call(props2["onUpdate:show"], false);
+    }
+    function renderOverlay() {
+      return _createVNode("div", _mergeProps({
+        "class": n(),
+        "style": {
+          zIndex: zIndex.value - 1
+        }
+      }, 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,14 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  show: Boolean,
+  lockScroll: {
+    type: Boolean,
+    default: true
+  },
+  teleport: [String, Object, Boolean],
+  onClick: defineListenerProp(),
+  "onUpdate:show": defineListenerProp()
+};
+export {
+  props
+};

package/es/overlay/style/index.mjs

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