@varlet/ui 3.3.6 → 3.3.7-alpha.1721326819975

package/README.md

@@ -148,14 +148,6 @@ We recommend that [issue](https://github.com/varletjs/varlet/issues) be used for
   <img src="https://cdn.jsdelivr.net/gh/varletjs/varlet-static/sponsorkit/sponsors.svg">
 </a>
 
-### Sponsor this project
-
-Sponsor this project to support our better creation. It is recommended to use afdian to subscribe, and your avatar will appear in this project.
-
-#### Afdian
-
-<a href="https://afdian.net/a/haoziqaq">https://afdian.net/a/haoziqaq</a>
-
 #### Wechat / Alipay
 
 <img style="width: 25%" src="https://cdn.jsdelivr.net/gh/varletjs/varlet-static/wechat.jpg" />

package/README.zh-CN.md

@@ -150,11 +150,7 @@ createApp(App).use(Varlet).mount('#app')
 
 ### 赞助本项目
 
-赞助本项目，支持我们更好的创作。推荐使用爱发电进行订阅，您的头像将出现在本项目中。
-
-#### 爱发电
-
-<a href="https://afdian.net/a/haoziqaq">https://afdian.net/a/haoziqaq</a>
+赞助本项目，支持我们更好的创作。
 
 #### 微信 / 支付宝
 

package/es/card/Card.mjs

@@ -99,6 +99,18 @@ function __render__(_ctx, _cache) {
                   /* TEXT, CLASS */
                 )) : _createCommentVNode("v-if", true)
               ]),
+              _ctx.$slots.default ? (_openBlock(), _createElementBlock(
+                "div",
+                {
+                  key: 0,
+                  class: _normalizeClass(_ctx.n("content"))
+                },
+                [
+                  _renderSlot(_ctx.$slots, "default")
+                ],
+                2
+                /* CLASS */
+              )) : _createCommentVNode("v-if", true),
               _renderSlot(_ctx.$slots, "subtitle", {
                 slotClass: _ctx.n("subtitle")
               }, () => [
@@ -130,7 +142,7 @@ function __render__(_ctx, _cache) {
               _ctx.$slots.extra ? (_openBlock(), _createElementBlock(
                 "div",
                 {
-                  key: 0,
+                  key: 1,
                   class: _normalizeClass(_ctx.n("footer"))
                 },
                 [
@@ -142,7 +154,7 @@ function __render__(_ctx, _cache) {
               _ctx.$slots["floating-content"] && !_ctx.isRow ? (_openBlock(), _createElementBlock(
                 "div",
                 {
-                  key: 1,
+                  key: 2,
                   class: _normalizeClass(_ctx.n("floating-content")),
                   style: _normalizeStyle({
                     height: _ctx.contentHeight,

package/es/card/card.css

@@ -1 +1 @@
-:root { --card-padding: 0 0 15px 0; --card-background: var(--color-surface-container-highest); --card-outline-color: var(--color-outline); --card-border-radius: 4px; --card-image-width: 100%; --card-row-image-width: 140px; --card-image-height: 200px; --card-row-height: 140px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 15px 0 0 0; --card-title-row-margin: 12px 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 12px; --card-subtitle-margin: 10px 0 0 0; --card-subtitle-row-margin: -8px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-right: 13px; --card-footer-bottom: 9px; --card-footer-margin: 30px 0 0 0; --card-line-height: 22px; --card-row-line-height: 1.5; --card-floating-buttons-bottom: 16px; --card-floating-buttons-right: 16px; --card-floating-buttons-color: #fff; --card-close-button-icon-size: 24px; --card-close-button-size: 56px; --card-close-button-primary-color: #212121; --card-close-button-text-color: #fff; --card-close-button-border-radius: 50%;}.var-card { border-radius: var(--card-border-radius); overflow: hidden; width: 100%;}.var-card__floater { display: flex; flex-direction: column; position: static; line-height: var(--card-line-height); background: var(--card-background); transition: background-color 0.25s, color 0.25s; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__container { padding: var(--card-padding); flex-grow: 1; min-width: 0;}.var-card--layout-row .var-card__floater { min-height: var(--card-row-height); height: 100%; flex-direction: row; position: relative; line-height: var(--card-row-line-height);}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block; transition: all 0.25s;}.var-card--layout-row .var-card__image { width: var(--card-row-image-width); height: auto; display: block; flex-shrink: 0;}.var-card__title { font-size: var(--card-title-font-size); padding: var(--card-title-padding); margin: var(--card-title-margin); color: var(--card-title-color); word-break: break-word; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__title { max-width: 100%; overflow: hidden; margin: var(--card-title-row-margin); text-overflow: ellipsis; white-space: nowrap;}.var-card__subtitle { font-size: var(--card-subtitle-font-size); color: var(--card-subtitle-color); padding: var(--card-subtitle-padding); margin: var(--card-subtitle-margin); word-break: break-word; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__subtitle { margin: var(--card-subtitle-row-margin); text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}.var-card__description { font-size: var(--card-description-font-size); color: var(--card-description-color); margin: var(--card-description-margin); padding: var(--card-description-padding); word-break: break-all; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card__footer { display: flex; justify-content: flex-end; padding: var(--card-footer-padding); margin: var(--card-footer-margin); transition: all 0.25s;}.var-card--layout-row .var-card__footer { position: absolute; padding: 0; right: var(--card-footer-right); bottom: var(--card-footer-bottom);}.var-card__floating-content { overflow: hidden; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__floating-buttons { position: fixed; bottom: var(--card-floating-buttons-bottom); right: var(--card-floating-buttons-right); color: var(--card-floating-buttons-color);}.var-card__close-button[var-card-cover] { width: var(--card-close-button-size); height: var(--card-close-button-size); background-color: var(--card-close-button-primary-color); color: var(--card-close-button-text-color); border-radius: var(--card-close-button-border-radius);}.var-card__close-button-icon[var-card-cover] { font-size: var(--card-close-button-icon-size);}.var-card--outline { border: thin solid var(--card-outline-color);}
+:root { --card-padding: 0 0 15px 0; --card-background: var(--color-surface-container-highest); --card-outline-color: var(--color-outline); --card-border-radius: 4px; --card-image-width: 100%; --card-row-image-width: 140px; --card-image-height: 200px; --card-row-height: 140px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 15px 0 0 0; --card-title-row-margin: 12px 0; --card-content-padding: 0 16px; --card-content-margin: 16px 0 0 0; --card-content-color: var(--color-on-surface-variant); --card-content-font-size: 14px; --card-content-row-margin: 16px 0 0 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 12px; --card-subtitle-margin: 10px 0 0 0; --card-subtitle-row-margin: -8px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-right: 13px; --card-footer-bottom: 9px; --card-footer-margin: 30px 0 0 0; --card-line-height: 22px; --card-row-line-height: 1.5; --card-floating-buttons-bottom: 16px; --card-floating-buttons-right: 16px; --card-floating-buttons-color: #fff; --card-close-button-icon-size: 24px; --card-close-button-size: 56px; --card-close-button-primary-color: #212121; --card-close-button-text-color: #fff; --card-close-button-border-radius: 50%;}.var-card { border-radius: var(--card-border-radius); overflow: hidden; width: 100%;}.var-card__floater { display: flex; flex-direction: column; position: static; line-height: var(--card-line-height); background: var(--card-background); transition: background-color 0.25s, color 0.25s; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__container { padding: var(--card-padding); flex-grow: 1; min-width: 0;}.var-card--layout-row .var-card__floater { min-height: var(--card-row-height); height: 100%; flex-direction: row; position: relative; line-height: var(--card-row-line-height);}.var-card__content { padding: var(--card-content-padding); margin: var(--card-content-margin); font-size: var(--card-content-font-size); color: var(--card-content-color); transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__content { max-width: 100%; margin: var(--card-title-row-margin);}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block; transition: all 0.25s;}.var-card--layout-row .var-card__image { width: var(--card-row-image-width); height: auto; display: block; flex-shrink: 0;}.var-card__title { font-size: var(--card-title-font-size); padding: var(--card-title-padding); margin: var(--card-title-margin); color: var(--card-title-color); word-break: break-word; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__title { max-width: 100%; overflow: hidden; margin: var(--card-title-row-margin); text-overflow: ellipsis; white-space: nowrap;}.var-card__subtitle { font-size: var(--card-subtitle-font-size); color: var(--card-subtitle-color); padding: var(--card-subtitle-padding); margin: var(--card-subtitle-margin); word-break: break-word; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__subtitle { margin: var(--card-subtitle-row-margin); text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}.var-card__description { font-size: var(--card-description-font-size); color: var(--card-description-color); margin: var(--card-description-margin); padding: var(--card-description-padding); word-break: break-all; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card__footer { display: flex; justify-content: flex-end; padding: var(--card-footer-padding); margin: var(--card-footer-margin); transition: all 0.25s;}.var-card--layout-row .var-card__footer { position: absolute; padding: 0; right: var(--card-footer-right); bottom: var(--card-footer-bottom);}.var-card__floating-content { overflow: hidden; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__floating-buttons { position: fixed; bottom: var(--card-floating-buttons-bottom); right: var(--card-floating-buttons-right); color: var(--card-floating-buttons-color);}.var-card__close-button[var-card-cover] { width: var(--card-close-button-size); height: var(--card-close-button-size); background-color: var(--card-close-button-primary-color); color: var(--card-close-button-text-color); border-radius: var(--card-close-button-border-radius);}.var-card__close-button-icon[var-card-cover] { font-size: var(--card-close-button-icon-size);}.var-card--outline { border: thin solid var(--card-outline-color);}

package/es/context/lock.mjs

@@ -1,8 +1,10 @@
 import context from "./index.mjs";
 import { watch, onBeforeMount, onUnmounted, onDeactivated, onActivated, getCurrentInstance } from "vue";
+import { createNamespace } from "../utils/components.mjs";
+const { n } = createNamespace("");
 function resolveLock() {
   const lockCounts = Object.keys(context.locks).length;
-  lockCounts <= 0 ? document.body.classList.remove("var--lock") : document.body.classList.add("var--lock");
+  lockCounts <= 0 ? document.body.classList.remove(n("$--lock")) : document.body.classList.add(n("$--lock"));
 }
 function addLock(uid) {
   context.locks[uid] = 1;

package/es/index.bundle.mjs

@@ -265,7 +265,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.3.6'
+const version = '3.3.7-alpha.1721326819975'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -176,7 +176,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.3.6'
+const version = '3.3.7-alpha.1721326819975'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/menu-option/MenuOption.mjs

@@ -4,16 +4,17 @@ 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 { createNamespace, MaybeVNode } from "../utils/components.mjs";
 import { props } from "./props.mjs";
-import { preventDefault } from "@varlet/shared";
+import { preventDefault, isFunction } from "@varlet/shared";
 import { useEventListener } from "@varlet/use";
 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, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+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, 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");
@@ -52,9 +53,11 @@ function __render__(_ctx, _cache) {
         {
           class: _normalizeClass(_ctx.classes(_ctx.n("text"), _ctx.n("$--ellipsis")))
         },
-        _toDisplayString(_ctx.label),
-        3
-        /* TEXT, CLASS */
+        [
+          _createVNode(_component_maybe_v_node, { is: _ctx.labelVNode }, null, 8, ["is"])
+        ],
+        2
+        /* CLASS */
       )
     ]),
     _createVNode(_component_var_hover_overlay, {
@@ -71,7 +74,8 @@ const __sfc__ = defineComponent({
   directives: { Ripple, Hover },
   components: {
     VarCheckbox,
-    VarHoverOverlay
+    VarHoverOverlay,
+    MaybeVNode
   },
   props,
   setup(props2) {
@@ -79,13 +83,26 @@ const __sfc__ = defineComponent({
     const isFocusing = ref(false);
     const optionSelected = ref(false);
     const selected = computed(() => optionSelected.value);
-    const label = computed(() => props2.label);
+    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,
+            ripple: props2.ripple
+          },
+          optionSelected.value
+        ) : props2.label;
+      }
+    );
     const value = computed(() => props2.value);
     const { menuSelect, bindMenuSelect } = useMenuSelect();
     const { size, multiple, onSelect, computeLabel } = menuSelect;
     const { hovering, handleHovering } = useHoverOverlay();
     const menuOptionProvider = {
-      label,
+      label: labelVNode,
       value,
       selected,
       sync
@@ -136,6 +153,7 @@ const __sfc__ = defineComponent({
       multiple,
       hovering,
       isFocusing,
+      labelVNode,
       n,
       classes,
       handleHovering,

package/es/menu-option/props.mjs

@@ -5,7 +5,9 @@ const props = {
   ripple: {
     type: Boolean,
     default: true
-  }
+  },
+  // internal
+  option: Object
 };
 export {
   props

package/es/menu-select/MenuSelect.mjs

@@ -1,15 +1,17 @@
 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 { call, isArray, 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, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+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",
@@ -45,6 +47,22 @@ function __render__(_ctx, _cache) {
           class: _normalizeClass(_ctx.classes(_ctx.n("menu"), _ctx.formatElevation(_ctx.elevation, 3), [_ctx.scrollable, _ctx.n("--scrollable")]))
         },
         [
+          _ctx.menuSelectOptions.length ? (_openBlock(true), _createElementBlock(
+            _Fragment,
+            { key: 0 },
+            _renderList(_ctx.menuSelectOptions, (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
@@ -60,12 +78,13 @@ function __render__(_ctx, _cache) {
 }
 const __sfc__ = defineComponent({
   name,
-  components: { VarMenu },
+  components: { VarMenu, VarMenuOption },
   props,
   setup(props2) {
     const menu = ref(null);
     const menuOptionsRef = ref(null);
     const show = useVModel(props2, "show");
+    const menuSelectOptions = computed(() => isArray(props2.options) ? props2.options : []);
     const { menuOptions, length, bindMenuOptions } = useMenuOptions();
     const { computeLabel, getSelectedValue } = useSelectController({
       modelValue: () => props2.modelValue,
@@ -122,6 +141,7 @@ const __sfc__ = defineComponent({
       show,
       menu,
       menuOptionsRef,
+      menuSelectOptions,
       n,
       classes,
       formatElevation,

package/es/menu-select/props.mjs

@@ -21,6 +21,15 @@ const props = __spreadValues({
     type: [String, Number, Boolean, Array],
     default: void 0
   },
+  options: Array,
+  labelKey: {
+    type: String,
+    default: "label"
+  },
+  valueKey: {
+    type: String,
+    default: "value"
+  },
   size: {
     type: String,
     default: "normal"

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

@@ -1,5 +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'