@varlet/ui 2.17.0 → 2.18.0-alpha.1697472019506

package/es/action-sheet/actionSheet.css

@@ -1 +1 @@
-:root { --action-sheet-border-radius: 2px; --action-sheet-title-color: #888; --action-sheet-title-padding: 10px 16px; --action-sheet-title-font-size: 14px; --action-sheet-action-item-height: 48px; --action-sheet-action-item-padding: 0 18px; --action-sheet-action-item-color: #333; --action-sheet-action-item-disabled-color: var(--color-text-disabled); --action-sheet-icon-margin: 0 20px 0 0; --action-sheet-icon-size: 24px; --action-sheet-background: #fff;}.var-action-sheet { padding: 10px 0; background: var(--action-sheet-background); transition: background-color 0.25s;}.var-action-sheet__popup-radius { border-radius: var(--action-sheet-border-radius);}.var-action-sheet__title { padding: var(--action-sheet-title-padding); color: var(--action-sheet-title-color); font-size: var(--action-sheet-title-font-size);}.var-action-sheet__action-item { display: flex; align-items: center; height: var(--action-sheet-action-item-height); padding: var(--action-sheet-action-item-padding); color: var(--action-sheet-action-item-color); cursor: pointer;}.var-action-sheet__action-name { overflow: auto; max-height: var(--action-sheet-action-item-height);}.var-action-sheet__action-icon[var-action-sheet-cover] { margin: var(--action-sheet-icon-margin); width: var(--action-sheet-icon-size); height: var(--action-sheet-icon-size); font-size: var(--action-sheet-icon-size);}.var-action-sheet--disabled { color: var(--action-sheet-action-item-disabled-color) !important; cursor: not-allowed;}
+:root { --action-sheet-border-radius: 2px; --action-sheet-border-top: none; --action-sheet-title-color: #888; --action-sheet-title-padding: 10px 16px; --action-sheet-title-font-size: 14px; --action-sheet-action-item-height: 48px; --action-sheet-action-item-padding: 0 18px; --action-sheet-action-item-color: #333; --action-sheet-action-item-disabled-color: var(--color-text-disabled); --action-sheet-icon-margin: 0 20px 0 0; --action-sheet-icon-size: 24px; --action-sheet-background: #fff;}.var-action-sheet { padding: 10px 0; background: var(--action-sheet-background); transition: background-color 0.25s;}.var-action-sheet__popup-radius { border-radius: var(--action-sheet-border-radius); border-top: var(--action-sheet-border-top);}.var-action-sheet__title { padding: var(--action-sheet-title-padding); color: var(--action-sheet-title-color); font-size: var(--action-sheet-title-font-size);}.var-action-sheet__action-item { display: flex; align-items: center; height: var(--action-sheet-action-item-height); padding: var(--action-sheet-action-item-padding); color: var(--action-sheet-action-item-color); cursor: pointer;}.var-action-sheet__action-name { overflow: auto; max-height: var(--action-sheet-action-item-height);}.var-action-sheet__action-icon[var-action-sheet-cover] { margin: var(--action-sheet-icon-margin); width: var(--action-sheet-icon-size); height: var(--action-sheet-icon-size); font-size: var(--action-sheet-icon-size);}.var-action-sheet--disabled { color: var(--action-sheet-action-item-disabled-color) !important; cursor: not-allowed;}

package/es/dialog/dialog.css

@@ -1 +1 @@
-:root { --dialog-width: 280px; --dialog-border-radius: 3px; --dialog-title-padding: 20px 20px 0; --dialog-message-color: #888; --dialog-message-padding: 12px 20px; --dialog-message-line-height: 24px; --dialog-message-font-size: var(--font-size-md); --dialog-title-font-size: var(--font-size-lg); --dialog-actions-padding: 0 12px 12px; --dialog-button-margin-left: 6px; --dialog-title-color: #555; --dialog-confirm-button-color: var(--color-primary); --dialog-cancel-button-color: var(--color-primary); --dialog-background: #fff;}.var-dialog { width: var(--dialog-width); border-radius: var(--dialog-border-radius); background: var(--dialog-background); transition: 0.25s background-color;}.var-dialog__popup[var-dialog-cover] { background: transparent;}.var-dialog__title { font-size: var(--dialog-title-font-size); font-weight: 400; padding: var(--dialog-title-padding); color: var(--dialog-title-color);}.var-dialog__message { padding: var(--dialog-message-padding); color: var(--dialog-message-color); line-height: var(--dialog-message-line-height); font-size: var(--dialog-message-font-size);}.var-dialog__actions { display: flex; justify-content: flex-end; padding: var(--dialog-actions-padding);}.var-dialog__button[var-dialog-cover] { margin-left: var(--dialog-button-margin-left); background-color: transparent; box-shadow: none;}.var-dialog__button[var-dialog-cover]:active { box-shadow: none;}.var-dialog__confirm-button[var-dialog-cover] { color: var(--dialog-confirm-button-color);}.var-dialog__cancel-button[var-dialog-cover] { color: var(--dialog-cancel-button-color);}
+:root { --dialog-width: 280px; --dialog-border-radius: 3px; --dialog-title-padding: 20px 20px 0; --dialog-message-color: #888; --dialog-message-padding: 12px 20px; --dialog-message-line-height: 24px; --dialog-message-font-size: var(--font-size-md); --dialog-title-font-size: var(--font-size-lg); --dialog-actions-padding: 0 12px 12px; --dialog-button-margin-left: 6px; --dialog-title-color: #555; --dialog-confirm-button-color: var(--color-primary); --dialog-cancel-button-color: var(--color-primary); --dialog-background: #fff;}.var-dialog { width: var(--dialog-width); border-radius: var(--dialog-border-radius); background: var(--dialog-background); transition: 0.25s background-color;}.var-dialog__popup[var-dialog-cover] { background: transparent;}.var-dialog__title { font-size: var(--dialog-title-font-size); font-weight: 400; padding: var(--dialog-title-padding); color: var(--dialog-title-color);}.var-dialog__message { padding: var(--dialog-message-padding); color: var(--dialog-message-color); line-height: var(--dialog-message-line-height); font-size: var(--dialog-message-font-size); word-wrap: break-word;}.var-dialog__actions { display: flex; justify-content: flex-end; padding: var(--dialog-actions-padding);}.var-dialog__button[var-dialog-cover] { margin-left: var(--dialog-button-margin-left); background-color: transparent; box-shadow: none;}.var-dialog__button[var-dialog-cover]:active { box-shadow: none;}.var-dialog__confirm-button[var-dialog-cover] { color: var(--dialog-confirm-button-color);}.var-dialog__cancel-button[var-dialog-cover] { color: var(--dialog-cancel-button-color);}

package/es/drag/Drag.mjs

@@ -42,7 +42,7 @@ import { props } from "./props.mjs";
 import { createNamespace, useTeleport, call } from "../utils/components.mjs";
 import { toPxNum } from "../utils/elements.mjs";
 import { onSmartMounted, onWindowResize, useTouch } from "@varlet/use";
-import { clamp, getRect } from "@varlet/shared";
+import { clamp, getRect, preventDefault } from "@varlet/shared";
 const { name, n, classes } = createNamespace("drag");
 import { renderSlot as _renderSlot, mergeProps as _mergeProps, createElementVNode as _createElementVNode, Teleport as _Teleport, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 function __render__(_ctx, _cache) {
@@ -109,7 +109,7 @@ const __sfc__ = defineComponent({
           return;
         }
         moveTouch(event);
-        event.preventDefault();
+        preventDefault(event);
         enableTransition.value = false;
         dragged.value = true;
         if (props2.direction.includes("x")) {

package/es/form/Form.mjs

@@ -22,7 +22,7 @@ import { defineComponent, computed } from "vue";
 import { props } from "./props.mjs";
 import { useFormItems } from "./provide.mjs";
 import { call, createNamespace } from "../utils/components.mjs";
-import { find } from "@varlet/shared";
+import { find, preventDefault } from "@varlet/shared";
 import { getParentScroller, getTop, scrollTo, toPxNum } from "../utils/elements.mjs";
 import { linear } from "../utils/shared.mjs";
 const { name, n } = createNamespace("form");
@@ -67,13 +67,13 @@ const __sfc__ = defineComponent({
     }
     function handleSubmit(event) {
       return __async(this, null, function* () {
-        event.preventDefault();
+        preventDefault(event);
         const valid = yield validate();
         call(props2.onSubmit, valid);
       });
     }
     function handleReset(event) {
-      event.preventDefault();
+      preventDefault(event);
       reset();
       call(props2.onReset);
     }

package/es/image-preview/ImagePreview.mjs

@@ -3,7 +3,7 @@ import VarSwipeItem from "../swipe-item/index.mjs";
 import VarIcon from "../icon/index.mjs";
 import VarPopup from "../popup/index.mjs";
 import { defineComponent, ref, computed, watch } from "vue";
-import { toNumber, clamp } from "@varlet/shared";
+import { toNumber, clamp, preventDefault } from "@varlet/shared";
 import { useEventListener, useTouch } from "@varlet/use";
 import { props } from "./props.mjs";
 import { call, createNamespace } from "../utils/components.mjs";
@@ -308,7 +308,7 @@ const __sfc__ = defineComponent({
       (_a = swipeRef.value) == null ? void 0 : _a.to(idx, options);
     }
     function preventImageDefault(event) {
-      props2.imagePreventDefault && props2.show && event.preventDefault();
+      props2.imagePreventDefault && props2.show && preventDefault(event);
     }
     return {
       swipeRef,

package/es/index-bar/indexBar.css

@@ -1 +1 @@
-:root { --index-bar-list-item-font-size: var(--font-size-xs); --index-bar-list-item-color: var(--color-primary); --index-bar-list-item-active-color: var(--color-danger); --index-bar-list-item-height: 14px; --index-bar-list-item-padding: 0 10px;}.var-index-bar { position: relative;}.var-index-bar__anchor-list { position: fixed; right: 0; top: 50%; transform: translate(0, -50%); list-style: none; padding: 0; margin: 0;}.var-index-bar__anchor-item { font-size: var(--index-bar-list-item-font-size); display: flex; align-items: center; height: var(--index-bar-list-item-height); justify-content: center; padding: var(--index-bar-list-item-padding); color: var(--index-bar-list-item-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-index-bar__anchor-item--active { color: var(--index-bar-list-item-active-color);}
+:root { --index-bar-list-right: 0; --index-bar-list-top: 50%; --index-bar-list-left: auto; --index-bar-list-bottom: auto; --index-bar-list-transform: translate(0, -50%); --index-bar-list-item-font-size: var(--font-size-xs); --index-bar-list-item-color: var(--color-primary); --index-bar-list-item-active-color: var(--color-danger); --index-bar-list-item-height: 14px; --index-bar-list-item-padding: 0 10px;}.var-index-bar { position: relative;}.var-index-bar__anchor-list { position: fixed; right: var(--index-bar-list-right); top: var(--index-bar-list-top); left: var(--index-bar-list-left); bottom: var(--index-bar-list-bottom); transform: var(--index-bar-list-transform); list-style: none; padding: 0; margin: 0;}.var-index-bar__anchor-item { font-size: var(--index-bar-list-item-font-size); display: flex; align-items: center; height: var(--index-bar-list-item-height); justify-content: center; padding: var(--index-bar-list-item-padding); color: var(--index-bar-list-item-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-index-bar__anchor-item--active { color: var(--index-bar-list-item-active-color);}

package/es/index.bundle.mjs

@@ -45,6 +45,8 @@ import Loading from './loading/index.mjs'
 import LoadingBar from './loading-bar/index.mjs'
 import Locale from './locale/index.mjs'
 import Menu from './menu/index.mjs'
+import MenuOption from './menu-option/index.mjs'
+import MenuSelect from './menu-select/index.mjs'
 import Option from './option/index.mjs'
 import Overlay from './overlay/index.mjs'
 import Pagination from './pagination/index.mjs'
@@ -129,6 +131,8 @@ export * from './loading/index.mjs'
 export * from './loading-bar/index.mjs'
 export * from './locale/index.mjs'
 export * from './menu/index.mjs'
+export * from './menu-option/index.mjs'
+export * from './menu-select/index.mjs'
 export * from './option/index.mjs'
 export * from './overlay/index.mjs'
 export * from './pagination/index.mjs'
@@ -213,6 +217,8 @@ import './loading/style/index.mjs'
 import './loading-bar/style/index.mjs'
 import './locale/style/index.mjs'
 import './menu/style/index.mjs'
+import './menu-option/style/index.mjs'
+import './menu-select/style/index.mjs'
 import './option/style/index.mjs'
 import './overlay/style/index.mjs'
 import './pagination/style/index.mjs'
@@ -250,7 +256,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '2.17.0'
+const version = '2.18.0-alpha.1697472019506'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
@@ -300,6 +306,8 @@ function install(app) {
   LoadingBar.install && app.use(LoadingBar)
   Locale.install && app.use(Locale)
   Menu.install && app.use(Menu)
+  MenuOption.install && app.use(MenuOption)
+  MenuSelect.install && app.use(MenuSelect)
   Option.install && app.use(Option)
   Overlay.install && app.use(Overlay)
   Pagination.install && app.use(Pagination)
@@ -388,6 +396,8 @@ export {
   LoadingBar,
   Locale,
   Menu,
+  MenuOption,
+  MenuSelect,
   Option,
   Overlay,
   Pagination,
@@ -476,6 +486,8 @@ export default {
   LoadingBar,
   Locale,
   Menu,
+  MenuOption,
+  MenuSelect,
   Option,
   Overlay,
   Pagination,

package/es/index.mjs

@@ -45,6 +45,8 @@ import Loading from './loading/index.mjs'
 import LoadingBar from './loading-bar/index.mjs'
 import Locale from './locale/index.mjs'
 import Menu from './menu/index.mjs'
+import MenuOption from './menu-option/index.mjs'
+import MenuSelect from './menu-select/index.mjs'
 import Option from './option/index.mjs'
 import Overlay from './overlay/index.mjs'
 import Pagination from './pagination/index.mjs'
@@ -129,6 +131,8 @@ export * from './loading/index.mjs'
 export * from './loading-bar/index.mjs'
 export * from './locale/index.mjs'
 export * from './menu/index.mjs'
+export * from './menu-option/index.mjs'
+export * from './menu-select/index.mjs'
 export * from './option/index.mjs'
 export * from './overlay/index.mjs'
 export * from './pagination/index.mjs'
@@ -166,7 +170,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '2.17.0'
+const version = '2.18.0-alpha.1697472019506'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
@@ -216,6 +220,8 @@ function install(app) {
   LoadingBar.install && app.use(LoadingBar)
   Locale.install && app.use(Locale)
   Menu.install && app.use(Menu)
+  MenuOption.install && app.use(MenuOption)
+  MenuSelect.install && app.use(MenuSelect)
   Option.install && app.use(Option)
   Overlay.install && app.use(Overlay)
   Pagination.install && app.use(Pagination)
@@ -304,6 +310,8 @@ export {
   LoadingBar,
   Locale,
   Menu,
+  MenuOption,
+  MenuSelect,
   Option,
   Overlay,
   Pagination,
@@ -392,6 +400,8 @@ export default {
   LoadingBar,
   Locale,
   Menu,
+  MenuOption,
+  MenuSelect,
   Option,
   Overlay,
   Pagination,

package/es/input/Input.mjs

@@ -2,7 +2,7 @@ import VarFormDetails from "../form-details/index.mjs";
 import VarFieldDecorator from "../field-decorator/index.mjs";
 import { defineComponent, ref, computed, nextTick } from "vue";
 import { props } from "./props.mjs";
-import { isEmpty, toNumber } from "@varlet/shared";
+import { isEmpty, preventDefault, toNumber } from "@varlet/shared";
 import { useValidation, createNamespace, call } from "../utils/components.mjs";
 import { useForm } from "../form/provide.mjs";
 import { onSmartMounted, useId } from "@varlet/use";
@@ -314,7 +314,7 @@ const __sfc__ = defineComponent({
         return;
       }
       focus();
-      e.preventDefault();
+      preventDefault(e);
     }
     function reset() {
       call(props2["onUpdate:modelValue"], "");

package/es/menu/style/index.mjs

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

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,11 @@
+import MenuOption from "./MenuOption.mjs";
+import { withInstall } from "../utils/components.mjs";
+withInstall(MenuOption);
+import { props } from "./props.mjs";
+const _MenuOptionComponent = MenuOption;
+var stdin_default = MenuOption;
+export {
+  _MenuOptionComponent,
+  stdin_default as default,
+  props as 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,110 @@
+import VarMenu from "../menu/index.mjs";
+import { defineComponent, computed, ref } from "vue";
+import { props } from "./props.mjs";
+import { createNamespace, call, useVModel } from "../utils/components.mjs";
+import { useMenuOptions } from "./provide.mjs";
+import { useSelectController } from "../select/useSelectController.mjs";
+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": _ctx.defaultStyle,
+    "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("scroller"), [_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", "default-style", "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,
+      open,
+      close,
+      resize
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/menu-select/index.mjs

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

package/es/menu-select/menuSelect.css

@@ -0,0 +1 @@
+:root { --menu-select-scroller-max-height: 278px; --menu-select-scroller-padding: 4px 0; --menu-select-scroller-border-radius: 2px;}.var-menu-select__scroller { padding: var(--menu-select-scroller-padding); border-radius: var(--menu-select-scroller-border-radius);}.var-menu-select--scrollable { overflow-y: auto; max-height: var(--menu-select-scroller-max-height);}

package/es/menu-select/props.mjs

@@ -0,0 +1,58 @@
+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",
+  "defaultStyle",
+  "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'