@varlet/ui 3.20.4 → 3.20.6

package/es/action-sheet/style/index.mjs

@@ -3,5 +3,5 @@ import '../../icon/icon.css'
 import '../../ripple/ripple.css'
 import '../../popup/popup.css'
 import '../actionSheet.css'
-import '../ActionSheetSfc.css'
 import '../ActionItemSfc.css'
+import '../ActionSheetSfc.css'

package/es/image-preview/ImagePreview.mjs

@@ -1,6 +1,7 @@
 import { call, clamp, preventDefault, toNumber } from "@varlet/shared";
 import { useEventListener, useTouch, useVModel } from "@varlet/use";
 import { computed, defineComponent, ref } from "vue";
+import VarButton from "../button/index.mjs";
 import VarIcon from "../icon/index.mjs";
 import VarPopup from "../popup/index.mjs";
 import VarSwipe from "../swipe/index.mjs";
@@ -21,6 +22,7 @@ function __render__(_ctx, _cache) {
   const _component_var_swipe_item = _resolveComponent("var-swipe-item");
   const _component_var_swipe = _resolveComponent("var-swipe");
   const _component_var_icon = _resolveComponent("var-icon");
+  const _component_var_button = _resolveComponent("var-button");
   const _component_var_popup = _resolveComponent("var-popup");
   return _openBlock(), _createBlock(_component_var_popup, {
     show: _ctx.show,
@@ -110,13 +112,23 @@ function __render__(_ctx, _cache) {
         /* FORWARDED */
       }, 16, ["class", "touchable", "indicator", "initial-index", "loop", "onChange"]),
       _renderSlot(_ctx.$slots, "close-icon", {}, () => [
-        _ctx.closeable ? (_openBlock(), _createBlock(_component_var_icon, {
+        _ctx.closeable ? (_openBlock(), _createBlock(_component_var_button, {
           key: 0,
           class: _normalizeClass(_ctx.n("close-icon")),
-          name: "close-circle",
+          text: "",
+          round: "",
           "var-image-preview-cover": "",
           onClick: _ctx.close
-        }, null, 8, ["class", "onClick"])) : _createCommentVNode("v-if", true)
+        }, {
+          default: _withCtx(() => [
+            _createVNode(_component_var_icon, {
+              class: _normalizeClass(_ctx.n("close-icon-image")),
+              name: "window-close"
+            }, null, 8, ["class"])
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["class", "onClick"])) : _createCommentVNode("v-if", true)
       ]),
       _ctx.$slots.extra ? (_openBlock(), _createElementBlock(
         "div",
@@ -138,6 +150,7 @@ function __render__(_ctx, _cache) {
 const __sfc__ = defineComponent({
   name,
   components: {
+    VarButton,
     VarSwipe,
     VarSwipeItem,
     VarPopup,

package/es/image-preview/imagePreview.css

@@ -1 +1 @@
-:root { --image-preview-swipe-indicators-text-color: #ddd; --image-preview-swipe-indicators-padding: 16px 0; --image-preview-zoom-container-background: #000; --image-preview-close-icon-top: 14px; --image-preview-close-icon-right: 14px; --image-preview-extra-top: 14px; --image-preview-extra-left: 14px; --image-preview-close-icon-size: 22px; --image-preview-close-icon-color: #fff;}.var-image-preview__popup[var-image-preview-cover] { height: 100%; background: var(--image-preview-zoom-container-background);}.var-image-preview__swipe[var-image-preview-cover] { width: 100vw; height: 100%;}.var-image-preview__swipe-item[var-image-preview-cover] { overflow: hidden;}.var-image-preview__close-icon[var-image-preview-cover] { position: absolute; top: var(--image-preview-close-icon-top); right: var(--image-preview-close-icon-right); color: var(--image-preview-close-icon-color); font-size: var(--image-preview-close-icon-size);}.var-image-preview__extra { position: absolute; top: var(--image-preview-extra-top); left: var(--image-preview-extra-left);}.var-image-preview__indicators { position: absolute; top: 0; width: 100%; padding: var(--image-preview-swipe-indicators-padding); color: var(--image-preview-swipe-indicators-text-color); text-align: center;}.var-image-preview__image { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none;}.var-image-preview--prevent { -webkit-touch-callout: none; pointer-events: none;}.var-image-preview__zoom-container { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100%; transition: transform 0.2s;}
+:root { --image-preview-swipe-indicators-text-color: #ddd; --image-preview-swipe-indicators-padding: 16px 0; --image-preview-zoom-container-background: #000; --image-preview-close-icon-top: 8px; --image-preview-close-icon-right: 14px; --image-preview-extra-top: 14px; --image-preview-extra-left: 14px; --image-preview-close-icon-size: 22px; --image-preview-close-icon-color: #fff;}.var-image-preview__popup[var-image-preview-cover] { height: 100%; background: var(--image-preview-zoom-container-background);}.var-image-preview__swipe[var-image-preview-cover] { width: 100vw; height: 100%;}.var-image-preview__swipe-item[var-image-preview-cover] { overflow: hidden;}.var-image-preview__close-icon[var-image-preview-cover] { position: absolute; top: var(--image-preview-close-icon-top); right: var(--image-preview-close-icon-right); color: var(--image-preview-close-icon-color);}.var-image-preview__close-icon-image { font-size: var(--image-preview-close-icon-size);}.var-image-preview__extra { position: absolute; top: var(--image-preview-extra-top); left: var(--image-preview-extra-left);}.var-image-preview__indicators { position: absolute; top: 0; width: 100%; padding: var(--image-preview-swipe-indicators-padding); color: var(--image-preview-swipe-indicators-text-color); text-align: center;}.var-image-preview__image { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none;}.var-image-preview--prevent { -webkit-touch-callout: none; pointer-events: none;}.var-image-preview__zoom-container { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100%; transition: transform 0.2s;}

package/es/image-preview/style/index.mjs

@@ -1,4 +1,9 @@
 import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../../hover-overlay/hoverOverlay.css'
+import '../../ripple/ripple.css'
+import '../../loading/loading.css'
+import '../../button/button.css'
 import '../../icon/icon.css'
 import '../../swipe/swipe.css'
 import '../../swipe-item/swipeItem.css'

package/es/index.bundle.mjs

@@ -310,7 +310,7 @@ import './tree-menu/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.20.4'
+const version = '3.20.6'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -206,7 +206,7 @@ export * from './tree-menu/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.20.4'
+const version = '3.20.6'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/paper/Paper.mjs

@@ -7,7 +7,7 @@ import { createNamespace, formatElevation } from "../utils/components.mjs";
 import { toSizeUnit } from "../utils/elements.mjs";
 import { props } from "./props.mjs";
 const { name, n, classes } = createNamespace("paper");
-import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
 function __render__(_ctx, _cache) {
   const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
   const _directive_ripple = _resolveDirective("ripple");
@@ -20,7 +20,9 @@ function __render__(_ctx, _cache) {
           _ctx.n(),
           _ctx.n("$--box"),
           [_ctx.variant === "standard", _ctx.formatElevation(_ctx.elevation, 2)],
-          [_ctx.onClick || !_ctx.normalizedHoverable.disabled, _ctx.n("--cursor")],
+          [!_ctx.disabled && (_ctx.onClick || !_ctx.normalizedHoverable.disabled), _ctx.n("--cursor")],
+          [_ctx.disabled, _ctx.n("--disabled")],
+          [!_ctx.disabled && _ctx.normalizedActive.enabled, _ctx.n("--active")],
           [_ctx.round, _ctx.n("--round")],
           [_ctx.surfaceLow, _ctx.n("--surface-low")],
           [_ctx.variant === "outlined", _ctx.n("--outlined")],
@@ -31,21 +33,26 @@ function __render__(_ctx, _cache) {
       style: _normalizeStyle({
         width: _ctx.toSizeUnit(_ctx.width),
         height: _ctx.toSizeUnit(_ctx.height),
-        "border-radius": _ctx.toSizeUnit(_ctx.radius)
+        "border-radius": _ctx.toSizeUnit(_ctx.radius),
+        "--paper-active-color": _ctx.normalizedActive.color
       }),
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
     },
     [
       _renderSlot(_ctx.$slots, "default"),
       _createVNode(_component_var_hover_overlay, {
-        hovering: !_ctx.normalizedHoverable.disabled ? _ctx.hovering : false,
+        class: _normalizeClass(_ctx.n("active-overlay")),
+        hovering: !_ctx.disabled && _ctx.normalizedActive.enabled
+      }, null, 8, ["class", "hovering"]),
+      _createVNode(_component_var_hover_overlay, {
+        hovering: !_ctx.disabled && !_ctx.normalizedHoverable.disabled ? _ctx.hovering : false,
         color: _ctx.normalizedHoverable.color
       }, null, 8, ["hovering", "color"])
     ],
     6
     /* CLASS, STYLE */
   )), [
-    [_directive_ripple, { disabled: _ctx.normalizedRipple.disabled, color: _ctx.normalizedRipple.color }],
+    [_directive_ripple, { disabled: _ctx.disabled || _ctx.normalizedRipple.disabled, color: _ctx.normalizedRipple.color }],
     [_directive_hover, _ctx.handleHovering, "desktop"]
   ]);
 }
@@ -61,6 +68,7 @@ const __sfc__ = defineComponent({
     const { hovering, handleHovering } = useHoverOverlay();
     const normalizedRipple = computed(() => normalizeRipple(props2.ripple));
     const normalizedHoverable = computed(() => normalizeHoverable(props2.hoverable));
+    const normalizedActive = computed(() => normalizeActive(props2.active));
     function normalizeRipple(value) {
       if (isPlainObject(value)) {
         return {
@@ -85,7 +93,22 @@ const __sfc__ = defineComponent({
         color: void 0
       };
     }
+    function normalizeActive(value) {
+      if (isPlainObject(value)) {
+        return {
+          enabled: true,
+          color: value.color
+        };
+      }
+      return {
+        enabled: value,
+        color: void 0
+      };
+    }
     function handleClick(e) {
+      if (props2.disabled) {
+        return;
+      }
       call(props2.onClick, e);
     }
     return {
@@ -95,6 +118,7 @@ const __sfc__ = defineComponent({
       surfaceLow,
       normalizedRipple,
       normalizedHoverable,
+      normalizedActive,
       hovering,
       handleHovering,
       toSizeUnit,

package/es/paper/paper.css

@@ -1 +1 @@
-:root { --paper-background: var(--color-surface-container-highest); --paper-surface-low-background: var(--color-surface-container-highest); --paper-outlined-background: transparent; --paper-filled-background: hsl(0, 0%, 93%); --paper-outline-color: var(--color-outline); --paper-border-radius: 4px;}.var-paper { position: relative; background: var(--paper-background); transition: background-color 0.25s; overflow: hidden; border-radius: var(--paper-border-radius); -webkit-tap-highlight-color: transparent;}.var-paper--round { border-radius: 50%;}.var-paper--cursor { cursor: pointer;}.var-paper--surface-low { background: var(--paper-surface-low-background);}.var-paper--outlined { border: thin solid var(--paper-outline-color); background: var(--paper-outlined-background);}.var-paper--filled { background: var(--paper-filled-background);}
+:root { --paper-background: var(--color-surface-container-highest); --paper-surface-low-background: var(--color-surface-container-highest); --paper-outlined-background: transparent; --paper-filled-background: hsl(0, 0%, 93%); --paper-outline-color: var(--color-outline); --paper-border-radius: 4px; --paper-active-color: var(--color-primary); --paper-active-opacity: 0.2;}.var-paper { position: relative; background: var(--paper-background); transition: background-color 0.25s; overflow: hidden; border-radius: var(--paper-border-radius); -webkit-tap-highlight-color: transparent;}.var-paper--round { border-radius: 50%;}.var-paper--cursor { cursor: pointer;}.var-paper--disabled { cursor: not-allowed;}.var-paper--active { color: var(--paper-active-color);}.var-paper__active-overlay { color: var(--paper-active-color);}.var-paper__active-overlay.var-hover-overlay--hovering { opacity: var(--paper-active-opacity);}.var-paper--surface-low { background: var(--paper-surface-low-background);}.var-paper--outlined { border: thin solid var(--paper-outline-color); background: var(--paper-outlined-background);}.var-paper--filled { background: var(--paper-filled-background);}

package/es/paper/props.mjs

@@ -22,6 +22,11 @@ const props = {
     type: [Boolean, Object],
     default: false
   },
+  active: {
+    type: [Boolean, Object],
+    default: false
+  },
+  disabled: Boolean,
   onClick: defineListenerProp()
 };
 export {

package/es/snackbar/style/index.mjs

@@ -1,7 +1,7 @@
 import '../../styles/common.css'
-import '../SnackbarSfc.css'
 import '../../styles/elevation.css'
 import '../../loading/loading.css'
 import '../../icon/icon.css'
 import '../snackbar.css'
 import '../coreSfc.css'
+import '../SnackbarSfc.css'

package/es/themes/dark/imagePreview.mjs

@@ -2,7 +2,7 @@ var stdin_default = {
   "--image-preview-swipe-indicators-text-color": "#ddd",
   "--image-preview-swipe-indicators-padding": "16px 0",
   "--image-preview-zoom-container-background": "#000",
-  "--image-preview-close-icon-top": "14px",
+  "--image-preview-close-icon-top": "8px",
   "--image-preview-close-icon-right": "14px",
   "--image-preview-extra-top": "14px",
   "--image-preview-extra-left": "14px",

package/es/themes/dark/paper.mjs

@@ -3,7 +3,9 @@ var stdin_default = {
   "--paper-outlined-background": "transparent",
   "--paper-filled-background": "var(--color-surface-container-highest)",
   "--paper-outline-color": "var(--color-outline)",
-  "--paper-border-radius": "4px"
+  "--paper-border-radius": "4px",
+  "--paper-active-color": "var(--color-primary)",
+  "--paper-active-opacity": "0.2"
 };
 export {
   stdin_default as default

package/es/themes/md3-dark/imagePreview.mjs

@@ -2,7 +2,7 @@ var stdin_default = {
   "--image-preview-swipe-indicators-text-color": "#ddd",
   "--image-preview-swipe-indicators-padding": "16px 0",
   "--image-preview-zoom-container-background": "#000",
-  "--image-preview-close-icon-top": "14px",
+  "--image-preview-close-icon-top": "8px",
   "--image-preview-close-icon-right": "14px",
   "--image-preview-extra-top": "14px",
   "--image-preview-extra-left": "14px",

package/es/themes/md3-dark/paper.mjs

@@ -4,7 +4,9 @@ var stdin_default = {
   "--paper-outlined-background": "transparent",
   "--paper-filled-background": "var(--color-surface-container-highest)",
   "--paper-outline-color": "var(--color-outline)",
-  "--paper-border-radius": "12px"
+  "--paper-border-radius": "12px",
+  "--paper-active-color": "var(--color-primary)",
+  "--paper-active-opacity": "0.2"
 };
 export {
   stdin_default as default

package/es/themes/md3-light/imagePreview.mjs

@@ -2,7 +2,7 @@ var stdin_default = {
   "--image-preview-swipe-indicators-text-color": "#ddd",
   "--image-preview-swipe-indicators-padding": "16px 0",
   "--image-preview-zoom-container-background": "#000",
-  "--image-preview-close-icon-top": "14px",
+  "--image-preview-close-icon-top": "8px",
   "--image-preview-close-icon-right": "14px",
   "--image-preview-extra-top": "14px",
   "--image-preview-extra-left": "14px",

package/es/themes/md3-light/paper.mjs

@@ -4,7 +4,9 @@ var stdin_default = {
   "--paper-outlined-background": "transparent",
   "--paper-filled-background": "var(--color-surface-container-highest)",
   "--paper-outline-color": "var(--color-outline)",
-  "--paper-border-radius": "12px"
+  "--paper-border-radius": "12px",
+  "--paper-active-color": "var(--color-primary)",
+  "--paper-active-opacity": "0.2"
 };
 export {
   stdin_default as default