@varlet/ui 3.16.2 → 3.17.1

package/README.md

@@ -26,7 +26,7 @@ Varlet is a `Vue3` component library based on Material Design 2 and 3, supportin
 
 ### Features
 
-- 🚀   Provide 60+ high quality general purpose components
+- 🚀   Provide 70+ high quality general purpose components
 - 🚀   Components are very lightweight
 - 💪   Developed by Chinese, complete Chinese and English documentation and logistics support
 - 🛠️   Support on-demand introduction

package/README.zh-CN.md

@@ -26,7 +26,7 @@ Varlet 是一个 `Vue3` 组件库，基于 Material Design 2 和 3，支持移
 
 ### 特性
 
-- 🚀   提供 60+ 个高质量通用组件
+- 🚀   提供 70+ 个高质量通用组件
 - 🚀   组件十分轻量
 - 💪   由国人开发，完善的中英文文档和后勤保障
 - 🛠️   支持按需引入

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/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.2'
+const version = '3.17.1'
 
 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.2'
+const version = '3.17.1'
 
 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/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'

package/es/segmented-buttons/SegmentedButtons.mjs

@@ -0,0 +1,218 @@
+import { call, callOrReturn, isArray } from "@varlet/shared";
+import { useEventListener } from "@varlet/use";
+import { computed, defineComponent, nextTick, watch } from "vue";
+import VarFormDetails from "../form-details/index.mjs";
+import { useForm } from "../form/provide.mjs";
+import VarSegmentedButton from "../segmented-button/index.mjs";
+import { createNamespace, MaybeVNode, useValidation } from "../utils/components.mjs";
+import {
+  props
+} from "./props.mjs";
+import { useSegmentedButtons } from "./provide.mjs";
+const { name, n, classes } = createNamespace("segmented-buttons");
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode } from "vue";
+const _hoisted_1 = ["role"];
+function __render__(_ctx, _cache) {
+  const _component_maybe_v_node = _resolveComponent("maybe-v-node");
+  const _component_var_segmented_button = _resolveComponent("var-segmented-button");
+  const _component_var_form_details = _resolveComponent("var-form-details");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n("wrap"))
+    },
+    [
+      _createElementVNode("div", {
+        role: _ctx.multiple ? "group" : "radiogroup",
+        class: _normalizeClass([_ctx.n(), _ctx.hasError ? _ctx.n("--error") : null])
+      }, [
+        _ctx.options.length ? (_openBlock(true), _createElementBlock(
+          _Fragment,
+          { key: 0 },
+          _renderList(_ctx.options, (option) => {
+            return _openBlock(), _createBlock(_component_var_segmented_button, {
+              key: _ctx.getOptionValue(option),
+              "checked-value": _ctx.getOptionValue(option),
+              disabled: option.disabled,
+              ripple: option.ripple
+            }, {
+              default: _withCtx(() => [
+                _createVNode(_component_maybe_v_node, {
+                  is: _ctx.renderOptionLabel(option)
+                }, null, 8, ["is"])
+              ]),
+              _: 2
+              /* DYNAMIC */
+            }, 1032, ["checked-value", "disabled", "ripple"]);
+          }),
+          128
+          /* KEYED_FRAGMENT */
+        )) : _createCommentVNode("v-if", true),
+        _renderSlot(_ctx.$slots, "default")
+      ], 10, _hoisted_1),
+      _createVNode(_component_var_form_details, { "error-message": _ctx.errorMessage }, null, 8, ["error-message"])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    VarFormDetails,
+    VarSegmentedButton,
+    MaybeVNode
+  },
+  props,
+  setup(props2) {
+    const { length, buttons, bindButtons } = useSegmentedButtons();
+    const { bindForm } = useForm();
+    const {
+      errorMessage,
+      validateWithTrigger: vt,
+      validate: v,
+      // expose
+      resetValidation
+    } = useValidation();
+    const segmentedButtonsProvider = {
+      multiple: computed(() => props2.multiple),
+      checkmark: computed(() => props2.checkmark),
+      size: computed(() => props2.size),
+      onClick
+    };
+    const segmentedButtonsValidationProvider = {
+      validate,
+      reset,
+      resetValidation
+    };
+    watch(() => props2.modelValue, syncButtons);
+    watch(() => length.value, syncButtons);
+    bindButtons(segmentedButtonsProvider);
+    call(bindForm, segmentedButtonsValidationProvider);
+    useEventListener(() => window, "keydown", handleKeydown);
+    useEventListener(() => window, "keyup", handleKeyup);
+    function getSafeModelValue() {
+      return props2.multiple ? isArray(props2.modelValue) ? props2.modelValue : [] : props2.modelValue;
+    }
+    function isChecked(value) {
+      const modelValue = getSafeModelValue();
+      return isArray(modelValue) ? modelValue.includes(value) : modelValue === value;
+    }
+    function renderOptionLabel(option) {
+      return callOrReturn(option[props2.labelKey], option, isChecked(getOptionValue(option)));
+    }
+    function getOptionValue(option) {
+      return option[props2.valueKey];
+    }
+    function handleKeydown(event) {
+      const focusingButtonIndex = buttons.findIndex(({ isFocusing }) => isFocusing.value);
+      if (focusingButtonIndex === -1) {
+        return;
+      }
+      const hasMoveableButton = buttons.some(
+        ({ disabled }, index) => index === focusingButtonIndex ? false : !disabled.value
+      );
+      if (!hasMoveableButton) {
+        return;
+      }
+      if (["ArrowLeft", "ArrowRight"].includes(event.key)) {
+        event.preventDefault();
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+      }
+      if (event.key === "ArrowLeft") {
+        moveButton(focusingButtonIndex, "prev");
+        return;
+      }
+      if (event.key === "ArrowRight") {
+        moveButton(focusingButtonIndex, "next");
+        return;
+      }
+      if (event.key === "Enter") {
+        buttons[focusingButtonIndex].toggle();
+      }
+    }
+    function handleKeyup(event) {
+      const focusingButtonIndex = buttons.findIndex(({ isFocusing }) => isFocusing.value);
+      if (focusingButtonIndex === -1) {
+        return;
+      }
+      if (event.key !== " ") {
+        return;
+      }
+      event.preventDefault();
+      buttons[focusingButtonIndex].toggle();
+    }
+    function moveButton(fromIndex, method) {
+      while (true) {
+        fromIndex += method === "prev" ? -1 : 1;
+        if (fromIndex < 0) {
+          fromIndex = buttons.length - 1;
+        }
+        if (fromIndex > buttons.length - 1) {
+          fromIndex = 0;
+        }
+        const button = buttons[fromIndex];
+        if (!button.disabled.value) {
+          button.move(!props2.multiple);
+          break;
+        }
+      }
+    }
+    function validateWithTrigger(trigger) {
+      nextTick(() => {
+        vt(props2.validateTrigger, trigger, props2.rules, getSafeModelValue());
+      });
+    }
+    function onClick(changedValue, checked) {
+      validateWithTrigger("onClick");
+      if (!props2.multiple) {
+        if (checked) {
+          return;
+        }
+        change(changedValue);
+        return;
+      }
+      const modelValue = getSafeModelValue();
+      if (checked) {
+        change(modelValue.filter((value) => value !== changedValue));
+        return;
+      }
+      change([...modelValue, changedValue]);
+    }
+    function syncButtons() {
+      const modelValue = getSafeModelValue();
+      buttons.forEach(({ sync }) => sync(modelValue));
+    }
+    function change(changedModelValue) {
+      call(props2["onUpdate:modelValue"], changedModelValue);
+      call(props2.onChange, changedModelValue);
+      validateWithTrigger("onChange");
+    }
+    const hasError = computed(() => !!errorMessage.value);
+    function validate() {
+      return v(props2.rules, getSafeModelValue());
+    }
+    function reset() {
+      call(props2["onUpdate:modelValue"], props2.multiple ? [] : void 0);
+      resetValidation();
+    }
+    return {
+      errorMessage,
+      n,
+      classes,
+      renderOptionLabel,
+      getOptionValue,
+      hasError,
+      validate,
+      reset,
+      resetValidation
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/segmented-buttons/index.mjs

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

package/es/segmented-buttons/props.mjs

@@ -0,0 +1,38 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  modelValue: {
+    type: [String, Number, Boolean, Object, Array],
+    default: void 0
+  },
+  options: {
+    type: Array,
+    default: () => []
+  },
+  labelKey: {
+    type: String,
+    default: "label"
+  },
+  valueKey: {
+    type: String,
+    default: "value"
+  },
+  multiple: Boolean,
+  checkmark: {
+    type: Boolean,
+    default: true
+  },
+  size: {
+    type: String,
+    default: "normal"
+  },
+  validateTrigger: {
+    type: Array,
+    default: () => ["onChange"]
+  },
+  rules: [Array, Function, Object],
+  onChange: defineListenerProp(),
+  "onUpdate:modelValue": defineListenerProp()
+};
+export {
+  props
+};

package/es/segmented-buttons/provide.mjs

@@ -0,0 +1,16 @@
+import { useChildren } from "@varlet/use";
+const SEGMENTED_BUTTONS_BIND_BUTTON_KEY = /* @__PURE__ */ Symbol("SEGMENTED_BUTTONS_BIND_BUTTON_KEY");
+function useSegmentedButtons() {
+  const { bindChildren, childProviders, length } = useChildren(
+    SEGMENTED_BUTTONS_BIND_BUTTON_KEY
+  );
+  return {
+    length,
+    buttons: childProviders,
+    bindButtons: bindChildren
+  };
+}
+export {
+  SEGMENTED_BUTTONS_BIND_BUTTON_KEY,
+  useSegmentedButtons
+};

package/es/segmented-buttons/segmentedButtons.css

@@ -0,0 +1 @@
+:root { --segmented-buttons-border-color: var(--color-outline); --segmented-buttons-border-radius: 4px; --segmented-buttons-border-width: 1px; --segmented-buttons-error-border-color: var(--color-danger); --segmented-buttons-error-color: var(--color-danger); --segmented-buttons-error-checked-background: hsla(var(--hsl-danger), 0.12);}.var-segmented-buttons { display: inline-flex; max-width: 100%; overflow: hidden; border: var(--segmented-buttons-border-width) solid var(--segmented-buttons-border-color); border-radius: var(--segmented-buttons-border-radius);}.var-segmented-buttons__wrap { display: inline-flex; flex-direction: column; align-items: flex-start;}.var-segmented-buttons .var-segmented-button:not(:last-child) { border-right: var(--segmented-buttons-border-width) solid var(--segmented-buttons-border-color);}.var-segmented-buttons--error { border-color: var(--segmented-buttons-error-border-color);}.var-segmented-buttons--error .var-segmented-button { color: var(--segmented-buttons-error-color);}.var-segmented-buttons--error .var-segmented-button:not(:last-child) { border-right-color: var(--segmented-buttons-error-border-color);}.var-segmented-buttons--error .var-segmented-button--checked { background-color: var(--segmented-buttons-error-checked-background); color: var(--segmented-buttons-error-color);}

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

@@ -0,0 +1,7 @@
+import '../../styles/common.css'
+import '../../form-details/formDetails.css'
+import '../../ripple/ripple.css'
+import '../../hover-overlay/hoverOverlay.css'
+import '../../segmented-button/segmentedButton.css'
+import '../segmentedButtons.css'
+import '../SegmentedButtonsSfc.css'

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/style.mjs

@@ -70,6 +70,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'