@varlet/ui 3.20.5 → 3.20.6

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.5'
+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.5'
+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/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/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/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