@varlet/ui 3.16.1 → 3.17.0

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

@@ -70,6 +70,8 @@ import Rate from './rate/index.mjs'
 import Result from './result/index.mjs'
 import Ripple from './ripple/index.mjs'
 import Row from './row/index.mjs'
+import SegmentedButton from './segmented-button/index.mjs'
+import SegmentedButtons from './segmented-buttons/index.mjs'
 import Select from './select/index.mjs'
 import Signature from './signature/index.mjs'
 import Skeleton from './skeleton/index.mjs'
@@ -166,6 +168,8 @@ export * from './rate/index.mjs'
 export * from './result/index.mjs'
 export * from './ripple/index.mjs'
 export * from './row/index.mjs'
+export * from './segmented-button/index.mjs'
+export * from './segmented-buttons/index.mjs'
 export * from './select/index.mjs'
 export * from './signature/index.mjs'
 export * from './skeleton/index.mjs'
@@ -262,6 +266,8 @@ import './rate/style/index.mjs'
 import './result/style/index.mjs'
 import './ripple/style/index.mjs'
 import './row/style/index.mjs'
+import './segmented-button/style/index.mjs'
+import './segmented-buttons/style/index.mjs'
 import './select/style/index.mjs'
 import './signature/style/index.mjs'
 import './skeleton/style/index.mjs'
@@ -286,7 +292,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.16.1'
+const version = '3.17.0'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
@@ -361,6 +367,8 @@ function install(app) {
   Result.install && app.use(Result)
   Ripple.install && app.use(Ripple)
   Row.install && app.use(Row)
+  SegmentedButton.install && app.use(SegmentedButton)
+  SegmentedButtons.install && app.use(SegmentedButtons)
   Select.install && app.use(Select)
   Signature.install && app.use(Signature)
   Skeleton.install && app.use(Skeleton)
@@ -461,6 +469,8 @@ export {
   Result,
   Ripple,
   Row,
+  SegmentedButton,
+  SegmentedButtons,
   Select,
   Signature,
   Skeleton,
@@ -561,6 +571,8 @@ export default {
   Result,
   Ripple,
   Row,
+  SegmentedButton,
+  SegmentedButtons,
   Select,
   Signature,
   Skeleton,

package/es/index.mjs

@@ -70,6 +70,8 @@ import Rate from './rate/index.mjs'
 import Result from './result/index.mjs'
 import Ripple from './ripple/index.mjs'
 import Row from './row/index.mjs'
+import SegmentedButton from './segmented-button/index.mjs'
+import SegmentedButtons from './segmented-buttons/index.mjs'
 import Select from './select/index.mjs'
 import Signature from './signature/index.mjs'
 import Skeleton from './skeleton/index.mjs'
@@ -166,6 +168,8 @@ export * from './rate/index.mjs'
 export * from './result/index.mjs'
 export * from './ripple/index.mjs'
 export * from './row/index.mjs'
+export * from './segmented-button/index.mjs'
+export * from './segmented-buttons/index.mjs'
 export * from './select/index.mjs'
 export * from './signature/index.mjs'
 export * from './skeleton/index.mjs'
@@ -190,7 +194,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.16.1'
+const version = '3.17.0'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)
@@ -265,6 +269,8 @@ function install(app) {
   Result.install && app.use(Result)
   Ripple.install && app.use(Ripple)
   Row.install && app.use(Row)
+  SegmentedButton.install && app.use(SegmentedButton)
+  SegmentedButtons.install && app.use(SegmentedButtons)
   Select.install && app.use(Select)
   Signature.install && app.use(Signature)
   Skeleton.install && app.use(Skeleton)
@@ -365,6 +371,8 @@ export {
   Result,
   Ripple,
   Row,
+  SegmentedButton,
+  SegmentedButtons,
   Select,
   Signature,
   Skeleton,
@@ -465,6 +473,8 @@ export default {
   Result,
   Ripple,
   Row,
+  SegmentedButton,
+  SegmentedButtons,
   Select,
   Signature,
   Skeleton,

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 {

package/es/segmented-button/SegmentedButton.mjs

@@ -0,0 +1,141 @@
+import { call, isArray } from "@varlet/shared";
+import { computed, defineComponent, ref } from "vue";
+import { useForm } from "../form/provide.mjs";
+import Hover from "../hover/index.mjs";
+import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
+import VarIcon from "../icon/index.mjs";
+import Ripple from "../ripple/index.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { props } from "./props.mjs";
+import { useSegmentedButtons } from "./provide.mjs";
+const { name, n, classes } = createNamespace("segmented-button");
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
+const _hoisted_1 = ["role", "aria-checked", "aria-disabled", "disabled", "tabindex"];
+function __render__(_ctx, _cache) {
+  const _component_var_icon = _resolveComponent("var-icon");
+  const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
+  const _directive_ripple = _resolveDirective("ripple");
+  const _directive_hover = _resolveDirective("hover");
+  return _withDirectives((_openBlock(), _createElementBlock("button", {
+    ref: "segmentedButton",
+    role: _ctx.segmentedButtons.multiple.value ? "checkbox" : "radio",
+    "aria-checked": _ctx.checked,
+    "aria-disabled": _ctx.formDisabled || _ctx.disabled || _ctx.formReadonly || _ctx.readonly,
+    disabled: _ctx.formDisabled || _ctx.disabled,
+    tabindex: _ctx.formDisabled || _ctx.disabled ? void 0 : "0",
+    class: _normalizeClass(
+      _ctx.classes(
+        _ctx.n(),
+        _ctx.n("$--box"),
+        _ctx.n(`--${_ctx.segmentedButtons.size.value}`),
+        [_ctx.checked, _ctx.n("--checked"), _ctx.n("--unchecked")],
+        [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
+      )
+    ),
+    type: "button",
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
+    onFocus: _cache[1] || (_cache[1] = ($event) => _ctx.isFocusing = true),
+    onBlur: _cache[2] || (_cache[2] = ($event) => _ctx.isFocusing = false)
+  }, [
+    _createElementVNode(
+      "div",
+      {
+        class: _normalizeClass(_ctx.n("content"))
+      },
+      [
+        _ctx.segmentedButtons.checkmark.value && _ctx.checked ? _renderSlot(_ctx.$slots, "checkmark", {
+          key: 0,
+          checked: _ctx.checked
+        }, () => [
+          _createVNode(_component_var_icon, {
+            class: _normalizeClass(_ctx.n("icon")),
+            "var-segmented-button-cover": "",
+            name: "check"
+          }, null, 8, ["class"])
+        ]) : _createCommentVNode("v-if", true),
+        _renderSlot(_ctx.$slots, "default", { checked: _ctx.checked })
+      ],
+      2
+      /* CLASS */
+    ),
+    _createVNode(_component_var_hover_overlay, {
+      hovering: !_ctx.formDisabled && !_ctx.disabled && _ctx.hovering,
+      focusing: !_ctx.formDisabled && !_ctx.disabled && _ctx.isFocusing
+    }, null, 8, ["hovering", "focusing"])
+  ], 42, _hoisted_1)), [
+    [_directive_ripple, { disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple }],
+    [_directive_hover, _ctx.handleHovering, "desktop"]
+  ]);
+}
+const __sfc__ = defineComponent({
+  name,
+  directives: { Ripple, Hover },
+  components: { VarHoverOverlay, VarIcon },
+  props,
+  setup(props2) {
+    const segmentedButton = ref();
+    const isFocusing = ref(false);
+    const checked = ref(false);
+    const { segmentedButtons, bindSegmentedButtons } = useSegmentedButtons();
+    const { hovering, handleHovering } = useHoverOverlay();
+    const { form } = useForm();
+    const segmentedButtonProvider = {
+      checked: computed(() => checked.value),
+      disabled: computed(() => (form == null ? void 0 : form.disabled.value) || props2.disabled),
+      isFocusing: computed(() => isFocusing.value),
+      sync,
+      toggle,
+      move
+    };
+    bindSegmentedButtons(segmentedButtonProvider);
+    function handleClick(event) {
+      if ((form == null ? void 0 : form.disabled.value) || props2.disabled) {
+        return;
+      }
+      call(props2.onClick, event);
+      toggle();
+    }
+    function toggle() {
+      if ((form == null ? void 0 : form.disabled.value) || props2.disabled) {
+        return;
+      }
+      if ((form == null ? void 0 : form.readonly.value) || props2.readonly) {
+        return;
+      }
+      segmentedButtons.onClick(props2.checkedValue, checked.value);
+    }
+    function sync(v) {
+      const nextChecked = isArray(v) ? v.includes(props2.checkedValue) : v === props2.checkedValue;
+      checked.value = nextChecked;
+      return nextChecked;
+    }
+    function move(selectWhenFocused) {
+      if ((form == null ? void 0 : form.disabled.value) || props2.disabled) {
+        return;
+      }
+      segmentedButton.value.focus();
+      if (selectWhenFocused && !(form == null ? void 0 : form.readonly.value) && !props2.readonly) {
+        segmentedButton.value.click();
+      }
+    }
+    return {
+      segmentedButton,
+      segmentedButtons,
+      isFocusing,
+      checked,
+      formDisabled: form == null ? void 0 : form.disabled,
+      formReadonly: form == null ? void 0 : form.readonly,
+      hovering,
+      n,
+      classes,
+      handleHovering,
+      handleClick,
+      toggle
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/segmented-button/index.mjs

@@ -0,0 +1,12 @@
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as segmentedButtonProps } from "./props.mjs";
+import SegmentedButton from "./SegmentedButton.mjs";
+withInstall(SegmentedButton);
+withPropsDefaultsSetter(SegmentedButton, segmentedButtonProps);
+const _SegmentedButtonComponent = SegmentedButton;
+var stdin_default = SegmentedButton;
+export {
+  _SegmentedButtonComponent,
+  stdin_default as default,
+  segmentedButtonProps
+};

package/es/segmented-button/props.mjs

@@ -0,0 +1,17 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  checkedValue: {
+    type: [String, Number, Boolean, Object, Array],
+    default: void 0
+  },
+  disabled: Boolean,
+  readonly: Boolean,
+  ripple: {
+    type: Boolean,
+    default: true
+  },
+  onClick: defineListenerProp()
+};
+export {
+  props
+};

package/es/segmented-button/provide.mjs

@@ -0,0 +1,16 @@
+import { assert } from "@varlet/shared";
+import { useParent } from "@varlet/use";
+import { SEGMENTED_BUTTONS_BIND_BUTTON_KEY } from "../segmented-buttons/provide.mjs";
+function useSegmentedButtons() {
+  const { bindParent, parentProvider } = useParent(
+    SEGMENTED_BUTTONS_BIND_BUTTON_KEY
+  );
+  assert(!!bindParent, "SegmentedButton", "<var-segmented-button/> must in <var-segmented-buttons/>");
+  return {
+    segmentedButtons: parentProvider,
+    bindSegmentedButtons: bindParent
+  };
+}
+export {
+  useSegmentedButtons
+};

package/es/segmented-button/segmentedButton.css

@@ -0,0 +1 @@
+:root { --segmented-button-text-color: var(--color-text); --segmented-button-checked-background: hsla(var(--hsl-primary), 0.2); --segmented-button-checked-text-color: var(--color-primary); --segmented-button-disabled-background: var(--color-disabled); --segmented-button-disabled-color: var(--color-text-disabled); --segmented-button-mini-padding: 0 8px; --segmented-button-small-padding: 0 12px; --segmented-button-normal-padding: 0 16px; --segmented-button-large-padding: 0 22px; --segmented-button-mini-height: 20px; --segmented-button-small-height: 28px; --segmented-button-normal-height: 36px; --segmented-button-large-height: 44px; --segmented-button-mini-font-size: var(--font-size-xs); --segmented-button-small-font-size: var(--font-size-sm); --segmented-button-normal-font-size: var(--font-size-md); --segmented-button-large-font-size: var(--font-size-lg);}.var-segmented-button { position: relative; display: inline-flex; justify-content: center; align-items: center; outline: none; border: none; background-color: transparent; color: var(--segmented-button-text-color); user-select: none; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background-color 0.25s, color 0.25s; -webkit-tap-highlight-color: transparent;}.var-segmented-button__content { display: inline-flex; align-items: center; justify-content: center;}.var-segmented-button__icon[var-segmented-button-cover] { font-size: 18px; margin-right: 6px;}.var-segmented-button--normal { height: var(--segmented-button-normal-height); padding: var(--segmented-button-normal-padding); font-size: var(--segmented-button-normal-font-size);}.var-segmented-button--large { height: var(--segmented-button-large-height); padding: var(--segmented-button-large-padding); font-size: var(--segmented-button-large-font-size);}.var-segmented-button--small { height: var(--segmented-button-small-height); padding: var(--segmented-button-small-padding); font-size: var(--segmented-button-small-font-size);}.var-segmented-button--mini { height: var(--segmented-button-mini-height); padding: var(--segmented-button-mini-padding); font-size: var(--segmented-button-mini-font-size);}.var-segmented-button--checked { background-color: var(--segmented-button-checked-background); color: var(--segmented-button-checked-text-color);}.var-segmented-button--disabled { color: var(--segmented-button-disabled-color); cursor: not-allowed;}.var-segmented-button--checked.var-segmented-button--disabled { background-color: var(--segmented-button-disabled-background);}

package/es/segmented-button/style/index.mjs

@@ -0,0 +1,5 @@
+import '../../styles/common.css'
+import '../../ripple/ripple.css'
+import '../../hover-overlay/hoverOverlay.css'
+import '../segmentedButton.css'
+import '../SegmentedButtonSfc.css'