@varlet/ui 3.16.0 → 3.16.2

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 '../ActionItemSfc.css'
 import '../ActionSheetSfc.css'
+import '../ActionItemSfc.css'

package/es/card/Card.mjs

@@ -18,7 +18,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { call, doubleRaf, getRect } from "@varlet/shared";
+import { call, doubleRaf, getRect, isPlainObject } from "@varlet/shared";
 import { computed, defineComponent, nextTick, ref, watch } from "vue";
 import VarButton from "../button/index.mjs";
 import { useLock } from "../context/lock.mjs";
@@ -51,7 +51,7 @@ function __render__(_ctx, _cache) {
           [_ctx.variant === "outlined" || _ctx.outline, _ctx.n("--outline")],
           [_ctx.variant === "filled", _ctx.n("--filled")],
           [_ctx.surfaceLow, _ctx.n("--surface-low")],
-          [_ctx.hoverable, _ctx.n("--cursor")],
+          [!_ctx.normalizedHoverable.disabled, _ctx.n("--cursor")],
           [_ctx.variant === "standard" || _ctx.outline, _ctx.formatElevation(_ctx.elevation, 1)]
         )
       ),
@@ -186,8 +186,9 @@ function __render__(_ctx, _cache) {
             /* CLASS */
           ),
           _createVNode(_component_var_hover_overlay, {
-            hovering: _ctx.hoverable && !_ctx.floated ? _ctx.hovering : false
-          }, null, 8, ["hovering"]),
+            hovering: !_ctx.normalizedHoverable.disabled && !_ctx.floated ? _ctx.hovering : false,
+            color: _ctx.normalizedHoverable.color
+          }, null, 8, ["hovering", "color"]),
           _ctx.showFloatingButtons ? (_openBlock(), _createElementBlock(
             "div",
             {
@@ -242,7 +243,7 @@ function __render__(_ctx, _cache) {
     6
     /* CLASS, STYLE */
   )), [
-    [_directive_ripple, { disabled: !_ctx.ripple || _ctx.floater }],
+    [_directive_ripple, { disabled: _ctx.normalizedRipple.disabled || _ctx.floater, color: _ctx.normalizedRipple.color }],
     [_directive_hover, _ctx.handleHovering, "desktop"]
   ]);
 }
@@ -274,6 +275,8 @@ const __sfc__ = defineComponent({
     const showFloatingButtons = ref(false);
     const floated = ref(false);
     const { zIndex } = useZIndex(() => props2.floating, 1);
+    const normalizedRipple = computed(() => normalizeRipple(props2.ripple));
+    const normalizedHoverable = computed(() => normalizeHoverable(props2.hoverable));
     let dropdownFloaterTop = "auto";
     let dropdownFloaterLeft = "auto";
     let dropper = null;
@@ -327,9 +330,33 @@ const __sfc__ = defineComponent({
           floaterOverflow.value = "auto";
           floated.value = true;
         }),
-        props2.ripple ? RIPPLE_DELAY : 0
+        normalizedRipple.value.disabled ? 0 : RIPPLE_DELAY
       );
     }
+    function normalizeRipple(value) {
+      if (isPlainObject(value)) {
+        return {
+          disabled: !!value.disabled,
+          color: value.color
+        };
+      }
+      return {
+        disabled: !value,
+        color: void 0
+      };
+    }
+    function normalizeHoverable(value) {
+      if (isPlainObject(value)) {
+        return {
+          disabled: !!value.disabled,
+          color: value.color
+        };
+      }
+      return {
+        disabled: !value,
+        color: void 0
+      };
+    }
     function dropdown() {
       clearTimeout(dropper);
       clearTimeout(floater.value);
@@ -378,6 +405,8 @@ const __sfc__ = defineComponent({
       zIndex,
       isRow,
       surfaceLow,
+      normalizedRipple,
+      normalizedHoverable,
       hovering,
       handleHovering,
       showFloatingButtons,

package/es/card/props.mjs

@@ -16,7 +16,10 @@ const props = {
     default: "column"
   },
   surface: String,
-  hoverable: Boolean,
+  hoverable: {
+    type: [Boolean, Object],
+    default: false
+  },
   floating: Boolean,
   floatingDuration: {
     type: Number,
@@ -30,7 +33,10 @@ const props = {
     type: [Boolean, Number, String],
     default: true
   },
-  ripple: Boolean,
+  ripple: {
+    type: [Boolean, Object],
+    default: false
+  },
   onClick: defineListenerProp(),
   "onUpdate:floating": defineListenerProp(),
   /**

package/es/hover-overlay/HoverOverlay.mjs

@@ -3,16 +3,17 @@ import { defineComponent } from "vue";
 import { createNamespace } from "../utils/components.mjs";
 import { props } from "./props.mjs";
 const { name, n, classes } = createNamespace("hover-overlay");
-import { normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 function __render__(_ctx, _cache) {
   return _openBlock(), _createElementBlock(
     "div",
     {
-      class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.hovering, _ctx.n("--hovering")], [_ctx.focusing && !_ctx.inMobile(), _ctx.n("--focusing")]))
+      class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.hovering, _ctx.n("--hovering")], [_ctx.focusing && !_ctx.inMobile(), _ctx.n("--focusing")])),
+      style: _normalizeStyle({ color: _ctx.color })
     },
     null,
-    2
-    /* CLASS */
+    6
+    /* CLASS, STYLE */
   );
 }
 const __sfc__ = defineComponent({

package/es/hover-overlay/props.mjs

@@ -1,6 +1,7 @@
 const props = {
   hovering: Boolean,
-  focusing: Boolean
+  focusing: Boolean,
+  color: String
 };
 export {
   props

package/es/index.bundle.mjs

@@ -286,7 +286,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.16.0'
+const version = '3.16.2'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -190,7 +190,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.16.0'
+const version = '3.16.2'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/otp-input/OtpInput.mjs

@@ -17,7 +17,7 @@ function __render__(_ctx, _cache) {
     "div",
     {
       ref: "rootEl",
-      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"))),
+      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), _ctx.n(`--align-${_ctx.align}`))),
       style: _normalizeStyle({
         "--otp-input-gutter": _ctx.gutterStyle,
         "--otp-input-cell-height": _ctx.cellHeightStyle,
@@ -398,6 +398,7 @@ const __sfc__ = defineComponent({
       cellMaxWidthStyle,
       resolvedInputmode,
       nativeInputType,
+      align: props2.align,
       n,
       classes,
       setInputRef,

package/es/otp-input/otpInput.css

@@ -1 +1 @@
-:root { --otp-input-gutter: 8px; --otp-input-cell-height: 48px; --otp-input-cell-max-width: 48px; --otp-input-input-font-size: 20px;}.var-otp-input { display: inline-flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 100%;}.var-otp-input__cells { display: flex; align-items: center; justify-content: center; gap: var(--otp-input-gutter); width: 100%; max-width: 100%;}.var-otp-input__cell { flex: 1 1 0; min-width: 0; height: var(--otp-input-cell-height); max-width: var(--otp-input-cell-max-width);}.var-otp-input__separator { display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; flex-shrink: 0;}.var-otp-input__details { width: 100%;}.var-otp-input .var-input__input { text-align: center; font-size: var(--otp-input-input-font-size); text-transform: none; height: 100%;}.var-otp-input .var-field-decorator__middle { justify-content: center;}.var-otp-input .var-field-decorator--outlined .var-field-decorator__controller,.var-otp-input .var-field-decorator--filled .var-field-decorator__controller,.var-otp-input .var-field-decorator--small.var-field-decorator--outlined .var-field-decorator__controller,.var-otp-input .var-field-decorator--small.var-field-decorator--filled .var-field-decorator__controller { padding-left: 0; padding-right: 0;}.var-otp-input .var-field-decorator--standard .var-field-decorator__controller,.var-otp-input .var-field-decorator--standard .var-field-decorator__middle { height: 100%;}.var-otp-input .var-field-decorator--standard .var-field-decorator__middle,.var-otp-input .var-field-decorator--standard .var-field-decorator__icon,.var-otp-input .var-field-decorator--standard .var-field-decorator--middle-non-hint,.var-otp-input .var-field-decorator--standard .var-field-decorator--icon-non-hint { margin-top: 0; margin-bottom: 0;}.var-otp-input .var-field-decorator--outlined .var-field-decorator__controller,.var-otp-input .var-field-decorator--outlined .var-field-decorator__middle { height: 100%;}.var-otp-input .var-field-decorator--outlined .var-field-decorator__middle,.var-otp-input .var-field-decorator--outlined .var-field-decorator__icon { margin-top: 0; margin-bottom: 0;}.var-otp-input .var-field-decorator--filled .var-field-decorator__controller,.var-otp-input .var-field-decorator--filled .var-field-decorator__middle { height: 100%;}.var-otp-input .var-field-decorator--filled .var-field-decorator__middle,.var-otp-input .var-field-decorator--filled .var-field-decorator__icon,.var-otp-input .var-field-decorator--filled .var-field-decorator--middle-non-hint,.var-otp-input .var-field-decorator--filled .var-field-decorator--icon-non-hint { margin-top: 0; margin-bottom: 0;}.var-otp-input .var-input,.var-otp-input .var-field-decorator,.var-otp-input .var-field-decorator__container,.var-otp-input .var-field-decorator__main,.var-otp-input .var-field-decorator__body { height: 100%;}
+:root { --otp-input-gutter: 8px; --otp-input-cell-height: 48px; --otp-input-cell-max-width: 48px; --otp-input-input-font-size: 20px;}.var-otp-input { display: inline-flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 100%;}.var-otp-input__cells { display: flex; align-items: center; justify-content: center; gap: var(--otp-input-gutter); width: 100%; max-width: 100%;}.var-otp-input__cell { flex: 1 1 0; min-width: 0; height: var(--otp-input-cell-height); max-width: var(--otp-input-cell-max-width);}.var-otp-input__separator { display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; flex-shrink: 0;}.var-otp-input__details { width: 100%;}.var-otp-input--align-start .var-otp-input__cells { justify-content: flex-start;}.var-otp-input--align-start .var-otp-input__details,.var-otp-input--align-start .var-otp-input__details .var-form-details__error-message,.var-otp-input--align-start .var-otp-input__details .var-form-details__extra-message { text-align: left;}.var-otp-input--align-center .var-otp-input__cells { justify-content: center;}.var-otp-input--align-center .var-otp-input__details,.var-otp-input--align-center .var-otp-input__details .var-form-details__error-message,.var-otp-input--align-center .var-otp-input__details .var-form-details__extra-message { text-align: center;}.var-otp-input--align-end .var-otp-input__cells { justify-content: flex-end;}.var-otp-input--align-end .var-otp-input__details,.var-otp-input--align-end .var-otp-input__details .var-form-details__error-message,.var-otp-input--align-end .var-otp-input__details .var-form-details__extra-message { text-align: right;}.var-otp-input .var-input__input { text-align: center; font-size: var(--otp-input-input-font-size); text-transform: none; height: 100%;}.var-otp-input .var-field-decorator__middle { justify-content: center;}.var-otp-input .var-field-decorator--outlined .var-field-decorator__controller,.var-otp-input .var-field-decorator--filled .var-field-decorator__controller,.var-otp-input .var-field-decorator--small.var-field-decorator--outlined .var-field-decorator__controller,.var-otp-input .var-field-decorator--small.var-field-decorator--filled .var-field-decorator__controller { padding-left: 0; padding-right: 0;}.var-otp-input .var-field-decorator--standard .var-field-decorator__controller,.var-otp-input .var-field-decorator--standard .var-field-decorator__middle { height: 100%;}.var-otp-input .var-field-decorator--standard .var-field-decorator__middle,.var-otp-input .var-field-decorator--standard .var-field-decorator__icon,.var-otp-input .var-field-decorator--standard .var-field-decorator--middle-non-hint,.var-otp-input .var-field-decorator--standard .var-field-decorator--icon-non-hint { margin-top: 0; margin-bottom: 0;}.var-otp-input .var-field-decorator--outlined .var-field-decorator__controller,.var-otp-input .var-field-decorator--outlined .var-field-decorator__middle { height: 100%;}.var-otp-input .var-field-decorator--outlined .var-field-decorator__middle,.var-otp-input .var-field-decorator--outlined .var-field-decorator__icon { margin-top: 0; margin-bottom: 0;}.var-otp-input .var-field-decorator--filled .var-field-decorator__controller,.var-otp-input .var-field-decorator--filled .var-field-decorator__middle { height: 100%;}.var-otp-input .var-field-decorator--filled .var-field-decorator__middle,.var-otp-input .var-field-decorator--filled .var-field-decorator__icon,.var-otp-input .var-field-decorator--filled .var-field-decorator--middle-non-hint,.var-otp-input .var-field-decorator--filled .var-field-decorator--icon-non-hint { margin-top: 0; margin-bottom: 0;}.var-otp-input .var-input,.var-otp-input .var-field-decorator,.var-otp-input .var-field-decorator__container,.var-otp-input .var-field-decorator__main,.var-otp-input .var-field-decorator__body { height: 100%;}

package/es/otp-input/props.mjs

@@ -52,6 +52,10 @@ const props = __spreadProps(__spreadValues({
     type: [String, Number],
     default: 8
   },
+  align: {
+    type: String,
+    default: "center"
+  },
   validateTrigger: {
     type: Array,
     default: () => ["onInput", "onComplete"]

package/es/paper/Paper.mjs

@@ -1,4 +1,4 @@
-import { call } from "@varlet/shared";
+import { call, isPlainObject } from "@varlet/shared";
 import { computed, defineComponent } from "vue";
 import Hover from "../hover/index.mjs";
 import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
@@ -20,7 +20,7 @@ function __render__(_ctx, _cache) {
           _ctx.n(),
           _ctx.n("$--box"),
           _ctx.formatElevation(_ctx.elevation, 2),
-          [_ctx.onClick || _ctx.hoverable, _ctx.n("--cursor")],
+          [_ctx.onClick || !_ctx.normalizedHoverable.disabled, _ctx.n("--cursor")],
           [_ctx.round, _ctx.n("--round")],
           [_ctx.surfaceLow, _ctx.n("--surface-low")],
           [_ctx.inline, _ctx.n("$--inline-flex")]
@@ -36,13 +36,14 @@ function __render__(_ctx, _cache) {
     [
       _renderSlot(_ctx.$slots, "default"),
       _createVNode(_component_var_hover_overlay, {
-        hovering: _ctx.hoverable ? _ctx.hovering : false
-      }, null, 8, ["hovering"])
+        hovering: !_ctx.normalizedHoverable.disabled ? _ctx.hovering : false,
+        color: _ctx.normalizedHoverable.color
+      }, null, 8, ["hovering", "color"])
     ],
     6
     /* CLASS, STYLE */
   )), [
-    [_directive_ripple, { disabled: !_ctx.ripple }],
+    [_directive_ripple, { disabled: _ctx.normalizedRipple.disabled, color: _ctx.normalizedRipple.color }],
     [_directive_hover, _ctx.handleHovering, "desktop"]
   ]);
 }
@@ -56,6 +57,32 @@ const __sfc__ = defineComponent({
   setup(props2) {
     const surfaceLow = computed(() => props2.surface === "low");
     const { hovering, handleHovering } = useHoverOverlay();
+    const normalizedRipple = computed(() => normalizeRipple(props2.ripple));
+    const normalizedHoverable = computed(() => normalizeHoverable(props2.hoverable));
+    function normalizeRipple(value) {
+      if (isPlainObject(value)) {
+        return {
+          disabled: !!value.disabled,
+          color: value.color
+        };
+      }
+      return {
+        disabled: !value,
+        color: void 0
+      };
+    }
+    function normalizeHoverable(value) {
+      if (isPlainObject(value)) {
+        return {
+          disabled: !!value.disabled,
+          color: value.color
+        };
+      }
+      return {
+        disabled: !value,
+        color: void 0
+      };
+    }
     function handleClick(e) {
       call(props2.onClick, e);
     }
@@ -64,6 +91,8 @@ const __sfc__ = defineComponent({
       classes,
       formatElevation,
       surfaceLow,
+      normalizedRipple,
+      normalizedHoverable,
       hovering,
       handleHovering,
       toSizeUnit,

package/es/paper/props.mjs

@@ -4,14 +4,20 @@ const props = {
     type: [Boolean, Number, String],
     default: false
   },
-  ripple: Boolean,
+  ripple: {
+    type: [Boolean, Object],
+    default: false
+  },
   radius: [Number, String],
   width: [Number, String],
   height: [Number, String],
   round: Boolean,
   inline: Boolean,
   surface: String,
-  hoverable: Boolean,
+  hoverable: {
+    type: [Boolean, Object],
+    default: false
+  },
   onClick: defineListenerProp()
 };
 export {