sard 1.0.0 → 1.0.2

package/components/scroll-spy/scroll-spy.d.ts

@@ -0,0 +1,17 @@
+import { type ScrollSpyProps, type ScrollSpySlots, type ScrollSpyExpose } from './common';
+type __VLS_Slots = ScrollSpySlots;
+declare const __VLS_base: import("vue").DefineComponent<ScrollSpyProps, ScrollSpyExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (value: string | number) => any;
+    "update:modelValue": (value: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<ScrollSpyProps> & Readonly<{
+    onChange?: ((value: string | number) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/scroll-spy/scroll-spy.js

@@ -0,0 +1,63 @@
+import { createBem } from "../../utils/bem.js";
+import { isNullish } from "../../utils/is.js";
+import { useScrollSpy } from "../../use/useScrollSpy.js";
+import { scrollSpyContextKey } from "./common.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, provide, reactive, renderSlot, toRef, unref, useTemplateRef, watch } from "vue";
+//#region packages/sard/components/scroll-spy/scroll-spy.vue
+var scroll_spy_default = /*@__PURE__*/ defineComponent({
+	__name: "scroll-spy",
+	props: {
+		modelValue: {
+			type: [String, Number],
+			required: false
+		},
+		offset: {
+			type: Number,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("scroll-spy");
+		const scrollRef = useTemplateRef("scroll");
+		const { innerCurrent, anchorRectList, register, unregister, scrollTo, update } = useScrollSpy(scrollRef, reactive({
+			startOffset: toRef(() => props.offset),
+			defaultCurrent: props.modelValue,
+			getSpiedRect() {
+				return scrollRef.value.getBoundingClientRect();
+			},
+			onChange(name) {
+				emit("update:modelValue", name);
+				emit("change", name);
+			}
+		}));
+		provide(scrollSpyContextKey, {
+			register,
+			unregister
+		});
+		watch(() => props.modelValue, () => {
+			if (!isNullish(props.modelValue) && anchorRectList.value.find((item) => item[0] === props.modelValue) && props.modelValue !== innerCurrent.value) {
+				innerCurrent.value = props.modelValue;
+				scrollTo(props.modelValue);
+			}
+		});
+		__expose({
+			scrollTo,
+			update
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref: "scroll",
+				class: normalizeClass([unref(bem).b(), unref(bem).is("disabled", __props.disabled)])
+			}, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+export { scroll_spy_default as default };

package/components/search/common.d.ts

@@ -0,0 +1,37 @@
+import { type DefaultProps } from '../config';
+export interface SearchProps {
+    modelValue?: string;
+    placeholder?: string;
+    shape?: 'round' | 'square';
+    background?: string;
+    inputBackground?: string;
+    inputColor?: string;
+    readonly?: boolean;
+    disabled?: boolean;
+    align?: 'left' | 'center' | 'right';
+    cancel?: string;
+    search?: string;
+    focus?: boolean;
+}
+export declare const defaultSearchProps: DefaultProps<SearchProps>;
+export interface SearchSlots {
+    prepend?(props: Record<string, never>): any;
+    append?(props: Record<string, never>): any;
+    'input-prepend'?(props: Record<string, never>): any;
+    'input-append'?(props: Record<string, never>): any;
+}
+export interface SearchEmits {
+    (e: 'update:modelValue', value: string): void;
+    (e: 'input', value: string): void;
+    (e: 'change', value: string): void;
+    (e: 'cancel'): void;
+    (e: 'search', value: string): void;
+    (e: 'click', event: MouseEvent): void;
+    (e: 'clear'): void;
+    (e: 'focus', event: FocusEvent): void;
+    (e: 'blur', event: FocusEvent): void;
+}
+export interface SearchExpose {
+    focus: () => void;
+    blur: () => void;
+}

package/components/search/common.js

@@ -0,0 +1,7 @@
+//#region packages/sard/components/search/common.ts
+const defaultSearchProps = {
+	shape: "square",
+	focus: false
+};
+//#endregion
+export { defaultSearchProps };

package/components/search/index.css

@@ -0,0 +1 @@
+:root{--s-search-padding-x:var(--s-size-sm);--s-search-padding-y:var(--s-size-xs);--s-search-bg:var(--s-bg-color-container);--s-search-input-bg:var(--s-fill-color-tertiary);--s-search-input-bg-disabled:var(--s-bg-color-disabled);--s-search-icon-color:var(--s-text-color-fourth);--s-search-icon-font-size:var(--s-font-size)}.s-search{display:flex;align-items:stretch;padding:var(--s-search-padding-y) var(--s-search-padding-x);background:var(--s-search-bg)}.s-search--show-action{padding-inline-end:0}.s-search__input-wrapper{flex:1}.s-search__input{background:var(--s-search-input-bg)}.s-search__input--round{border-radius:var(--s-border-radius-full)}.s-search__prepend,.s-search__append{display:flex;align-items:center;flex:none}.s-search__prepend .s-button,.s-search__append .s-button{height:100%}.s-search__icon{font-size:var(--s-search-icon-font-size);color:var(--s-search-icon-color)}.s-search--disabled .s-search__input{background:var(--s-search-input-bg-disabled)}

package/components/search/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Search from './search.vue';
+export declare const Search: EnhancedComponent<typeof _Search>;
+export default Search;
+export type { SearchProps, SearchSlots, SearchEmits } from './common';

package/components/search/index.js

@@ -0,0 +1,6 @@
+import { enhanceComponent } from "../../utils/component.js";
+import search_default from "./search.js";
+//#region packages/sard/components/search/index.ts
+const Search = enhanceComponent(search_default);
+//#endregion
+export { Search, Search as default };

package/components/search/search.d.ts

@@ -0,0 +1,44 @@
+import { type SearchProps, type SearchSlots, type SearchExpose } from './common';
+type __VLS_Slots = SearchSlots;
+declare const __VLS_base: import("vue").DefineComponent<SearchProps, SearchExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    input: (value: string) => any;
+    search: (value: string) => any;
+    clear: () => any;
+    blur: (event: FocusEvent) => any;
+    cancel: () => any;
+    change: (value: string) => any;
+    click: (event: MouseEvent) => any;
+    focus: (event: FocusEvent) => any;
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<SearchProps> & Readonly<{
+    onInput?: ((value: string) => any) | undefined;
+    onSearch?: ((value: string) => any) | undefined;
+    onClear?: (() => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    search: string;
+    background: string;
+    readonly: boolean;
+    cancel: string;
+    focus: boolean;
+    disabled: boolean;
+    modelValue: string;
+    shape: "round" | "square";
+    placeholder: string;
+    align: "left" | "center" | "right";
+    inputBackground: string;
+    inputColor: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/search/search.js

@@ -0,0 +1,212 @@
+import { createBem } from "../../utils/bem.js";
+import button_default from "../button/button.js";
+import input_default from "../input/input.js";
+import { defaultSearchProps } from "./common.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString, unref, useModel, useSlots, useTemplateRef, withCtx } from "vue";
+import { Search } from "@sard/icons";
+//#region packages/sard/components/search/search.vue
+var search_default = /*@__PURE__*/ defineComponent({
+	__name: "search",
+	props: /*@__PURE__*/ mergeDefaults({
+		modelValue: {
+			type: String,
+			required: false
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		shape: {
+			type: String,
+			required: false
+		},
+		background: {
+			type: String,
+			required: false
+		},
+		inputBackground: {
+			type: String,
+			required: false
+		},
+		inputColor: {
+			type: String,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		align: {
+			type: String,
+			required: false
+		},
+		cancel: {
+			type: String,
+			required: false
+		},
+		search: {
+			type: String,
+			required: false
+		},
+		focus: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultSearchProps),
+	emits: [
+		"update:modelValue",
+		"input",
+		"change",
+		"cancel",
+		"search",
+		"click",
+		"clear",
+		"focus",
+		"blur"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const slots = useSlots();
+		const emit = __emit;
+		const bem = createBem("search");
+		const innerValue = useModel(props, "modelValue");
+		const onInput = (value) => {
+			innerValue.value = value;
+			emit("input", value);
+		};
+		const onChange = (value) => {
+			emit("change", value);
+		};
+		const onConfirm = () => {
+			emit("search", innerValue.value);
+		};
+		const onSubmit = (event) => {
+			event.preventDefault();
+			onConfirm();
+		};
+		const onCancel = () => {
+			innerValue.value = "";
+			emit("cancel");
+		};
+		const onClick = (event) => {
+			emit("click", event);
+		};
+		const onClear = () => {
+			emit("clear");
+		};
+		const onFocus = (event) => {
+			emit("focus", event);
+		};
+		const onBlur = (event) => {
+			emit("blur", event);
+		};
+		const searchClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m("show-action", props.cancel || props.search),
+				bem.m("disabled", props.disabled)
+			];
+		});
+		const searchStyle = computed(() => {
+			return { backgroundColor: props.background };
+		});
+		const inputClass = computed(() => {
+			return [bem.e("input"), bem.em("input", props.shape)];
+		});
+		const inputStyle = computed(() => {
+			return {
+				textAlign: props.align,
+				color: props.inputColor,
+				backgroundColor: props.inputBackground
+			};
+		});
+		const inputRef = useTemplateRef("input");
+		__expose({
+			focus() {
+				inputRef.value?.focus();
+			},
+			blur() {
+				inputRef.value?.blur();
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("form", {
+				class: normalizeClass(searchClass.value),
+				style: normalizeStyle(searchStyle.value),
+				onClick,
+				onSubmit
+			}, [
+				slots.prepend ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(bem).e("prepend"))
+				}, [renderSlot(_ctx.$slots, "prepend")], 2)) : createCommentVNode("v-if", true),
+				createElementVNode("div", { class: normalizeClass(unref(bem).e("input-wrapper")) }, [createVNode(input_default, {
+					ref: "input",
+					type: "search",
+					inputmode: "search",
+					"model-value": unref(innerValue),
+					clearable: "",
+					showClearOnlyFocus: "",
+					readonly: __props.readonly,
+					disabled: __props.disabled,
+					placeholder: __props.placeholder,
+					borderless: "",
+					class: normalizeClass(inputClass.value),
+					style: normalizeStyle(inputStyle.value),
+					focus: __props.focus,
+					"onUpdate:modelValue": onInput,
+					onChange,
+					onSearch: onConfirm,
+					onClear,
+					onFocus,
+					onBlur
+				}, createSlots({
+					prepend: withCtx(() => [renderSlot(_ctx.$slots, "input-prepend", {}, () => [createVNode(unref(Search), { class: normalizeClass(unref(bem).e("icon")) }, null, 8, ["class"])])]),
+					_: 2
+				}, [slots["input-append"] ? {
+					name: "append",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "input-append")]),
+					key: "0"
+				} : void 0]), 1032, [
+					"model-value",
+					"readonly",
+					"disabled",
+					"placeholder",
+					"class",
+					"style",
+					"focus"
+				])], 2),
+				__props.cancel || __props.search || slots.append ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(bem).e("append"))
+				}, [
+					__props.cancel ? (openBlock(), createBlock(button_default, {
+						key: 0,
+						variant: "link",
+						"auto-height": "",
+						onClick: onCancel
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.cancel), 1)]),
+						_: 1
+					})) : createCommentVNode("v-if", true),
+					__props.search ? (openBlock(), createBlock(button_default, {
+						key: 1,
+						variant: "link",
+						"auto-height": "",
+						onClick: onConfirm
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.search), 1)]),
+						_: 1
+					})) : createCommentVNode("v-if", true),
+					renderSlot(_ctx.$slots, "append")
+				], 2)) : createCommentVNode("v-if", true)
+			], 38);
+		};
+	}
+});
+//#endregion
+export { search_default as default };

package/components/segmented/common.d.ts

@@ -0,0 +1,54 @@
+import { type DefaultProps } from '../config';
+import { type OptionKeys } from '../../use';
+import type { InjectionKey } from 'vue';
+export type SegmentedOption = {
+    [key: PropertyKey]: any;
+} | string | number | boolean;
+export type SegmentedSize = 'small' | 'medium' | 'large';
+export interface SegmentedProps {
+    modelValue?: any;
+    disabled?: boolean;
+    readonly?: boolean;
+    size?: SegmentedSize;
+    direction?: 'horizontal' | 'vertical';
+    shape?: 'square' | 'round';
+    options?: SegmentedOption[];
+    optionKeys?: OptionKeys;
+    validateEvent?: boolean;
+    ellipsis?: boolean;
+}
+export declare const defaultSegmentedProps: DefaultProps<SegmentedProps>;
+export interface SegmentedSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface SegmentedEmits {
+    (e: 'update:modelValue', value: any): void;
+    (e: 'change', value: any): void;
+}
+export interface SegmentedExpose {
+}
+export interface SegmentedContext {
+    disabled: SegmentedProps['disabled'];
+    readonly: SegmentedProps['readonly'];
+    size: SegmentedProps['size'];
+    shape: SegmentedProps['shape'];
+    ellipsis: boolean;
+    value: any;
+    toggle: (value: any) => void;
+}
+export declare const segmentedContextKey: InjectionKey<SegmentedContext>;
+export interface SegmentedItemProps {
+    label?: string | number;
+    value?: string | number | boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+}
+export declare const defaultSegmentedItemProps: DefaultProps<SegmentedItemProps>;
+export interface SegmentedItemSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface SegmentedItemEmits {
+    (e: 'click', event: MouseEvent): void;
+}
+export interface SegmentedItemExpose {
+}

package/components/segmented/common.js

@@ -0,0 +1,12 @@
+//#region packages/sard/components/segmented/common.ts
+const defaultSegmentedProps = {
+	size: "medium",
+	shape: "square",
+	direction: "horizontal",
+	validateEvent: true,
+	ellipsis: true
+};
+const segmentedContextKey = Symbol("segmentedContext");
+const defaultSegmentedItemProps = {};
+//#endregion
+export { defaultSegmentedItemProps, defaultSegmentedProps, segmentedContextKey };

package/components/segmented/index.css

@@ -0,0 +1 @@
+:root{--s-segmented-min-height-sm:var(--s-content-height-2xs);--s-segmented-min-height:var(--s-content-height-xs);--s-segmented-min-height-lg:var(--s-content-height-sm);--s-segmented-padding:var(--s-size-3xs);--s-segmented-font-size:var(--s-font-size);--s-segmented-bg:var(--s-fill-color-secondary);--s-segmented-border-radius:var(--s-border-radius);--s-segmented-pointer-bg:var(--s-bg-color-container);--s-segmented-pointer-box-shadow:var(--s-box-shadow-tertiary);--s-segmented-item-padding:var(--s-size-sm);--s-segmented-item-padding-sm:var(--s-size-xs);--s-segmented-item-color:var(--s-text-color-secondary);--s-segmented-item-color-active:var(--s-text-color-emphasis);--s-segmented-item-bg-active:var(--s-bg-color-active-dark)}.s-segmented{display:flex;align-items:stretch;min-height:var(--s-segmented-min-height);padding:var(--s-segmented-padding);border-radius:var(--s-segmented-border-radius);background:var(--s-segmented-bg);font-size:var(--s-segmented-font-size)}.s-segmented--vertical{display:inline-flex}.s-segmented--vertical .s-segmented__wrapper{flex-direction:column}.s-segmented--vertical .s-segmented__pointer{width:100%}.s-segmented--small{min-height:var(--s-segmented-min-height-sm)}.s-segmented--large{min-height:var(--s-segmented-min-height-lg)}.s-segmented--round{border-radius:var(--s-border-radius-full)}.s-segmented--round .s-segmented__pointer{border-radius:var(--s-border-radius-full)}.s-segmented__pointer{position:absolute;top:0;inset-inline-start:0;height:100%;border-radius:calc(var(--s-segmented-border-radius) - 2px);background:var(--s-segmented-pointer-bg);box-shadow:var(--s-segmented-pointer-box-shadow);transition:transform var(--s-duration);--final-offset: var(--offset);transform:translate3d(var(--final-offset), 0, 0)}:root[dir=rtl] .s-segmented--horizontal .s-segmented__pointer{--final-offset: calc(var(--offset) * -1)}.s-segmented--vertical .s-segmented__pointer{transform:translate3d(0, var(--final-offset), 0)}.s-segmented__wrapper{position:relative;display:flex;align-items:stretch;width:100%}.s-segmented-item{position:relative;display:flex;justify-content:center;align-items:center;flex:1;min-width:0;min-height:calc(var(--s-segmented-min-height) - var(--s-segmented-padding)*2);padding:0 var(--s-segmented-item-padding);border-radius:calc(var(--s-segmented-border-radius) - 2px);color:var(--s-segmented-item-color)}.s-segmented-item--small{min-height:calc(var(--s-segmented-min-height-sm) - var(--s-segmented-padding)*2)}.s-segmented-item--large{min-height:calc(var(--s-segmented-min-height-lg) - var(--s-segmented-padding)*2)}.s-segmented-item--round{border-radius:var(--s-border-radius-full)}.s-segmented-item:not(.is-disabled,.is-readonly,.is-selected){cursor:pointer}.s-segmented-item:not(.is-disabled,.is-readonly,.is-selected):active{background:var(--s-segmented-item-bg-active)}.s-segmented-item:is(.is-selected){color:var(--s-segmented-item-color-active)}.s-segmented-item:is(.is-disabled){color:var(--s-text-color-disabled);cursor:var(--s-cursor-disabled)}.s-segmented-item--ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

package/components/segmented/index.d.ts

@@ -0,0 +1,7 @@
+import { type EnhancedComponent } from '../../utils';
+import _Segmented from './segmented.vue';
+import _SegmentedItem from './segmented-item.vue';
+export declare const Segmented: EnhancedComponent<typeof _Segmented>;
+export declare const SegmentedItem: EnhancedComponent<typeof _SegmentedItem>;
+export default Segmented;
+export type { SegmentedProps, SegmentedSlots, SegmentedEmits, SegmentedExpose, SegmentedSize, SegmentedItemProps, SegmentedItemSlots, SegmentedItemEmits, SegmentedItemExpose, } from './common';

package/components/segmented/index.js

@@ -0,0 +1,8 @@
+import { enhanceComponent } from "../../utils/component.js";
+import segmented_item_default from "./segmented-item.js";
+import segmented_default from "./segmented.js";
+//#region packages/sard/components/segmented/index.ts
+const Segmented = enhanceComponent(segmented_default);
+const SegmentedItem = enhanceComponent(segmented_item_default);
+//#endregion
+export { Segmented, Segmented as default, SegmentedItem };

package/components/segmented/segmented-item.d.ts

@@ -0,0 +1,20 @@
+import { type SegmentedItemProps, type SegmentedItemSlots, type SegmentedItemExpose } from './common';
+type __VLS_Slots = SegmentedItemSlots;
+declare const __VLS_base: import("vue").DefineComponent<SegmentedItemProps, SegmentedItemExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<SegmentedItemProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    label: string | number;
+    readonly: boolean;
+    value: string | number | boolean;
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/segmented/segmented-item.js

@@ -0,0 +1,72 @@
+import { createBem } from "../../utils/bem.js";
+import { useFormContext } from "../form/common.js";
+import { defaultSegmentedItemProps, segmentedContextKey } from "./common.js";
+import { computed, createElementBlock, createTextVNode, defineComponent, inject, mergeDefaults, normalizeClass, openBlock, renderSlot, toDisplayString } from "vue";
+//#region packages/sard/components/segmented/segmented-item.vue
+var segmented_item_default = /*@__PURE__*/ defineComponent({
+	__name: "segmented-item",
+	props: /*@__PURE__*/ mergeDefaults({
+		label: {
+			type: [String, Number],
+			required: false
+		},
+		value: {
+			type: [
+				String,
+				Number,
+				Boolean
+			],
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultSegmentedItemProps),
+	emits: ["click"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("segmented-item");
+		const context = inject(segmentedContextKey);
+		if (!context) throw new Error("SegmentedItem must be included in Segmented.");
+		const formContext = useFormContext();
+		const isSelected = computed(() => {
+			return context.value === props.value;
+		});
+		const isDisabled = computed(() => {
+			return formContext?.disabled || context?.disabled || props.disabled;
+		});
+		const isReadonly = computed(() => {
+			return formContext?.readonly || context?.readonly || props.readonly;
+		});
+		const onClick = (event) => {
+			if (!isDisabled.value && !isReadonly.value) context.toggle(props.value);
+			emit("click", event);
+		};
+		__expose({});
+		const segmentedItemClass = computed(() => {
+			return [
+				bem.b(),
+				bem.is("selected", isSelected.value),
+				bem.is("disabled", isDisabled.value),
+				bem.is("readonly", isReadonly.value),
+				bem.m("ellipsis", context.ellipsis),
+				bem.m(context.size),
+				bem.m(context.shape)
+			];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(segmentedItemClass.value),
+				onClick
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 2);
+		};
+	}
+});
+//#endregion
+export { segmented_item_default as default };

package/components/segmented/segmented.d.ts

@@ -0,0 +1,28 @@
+import { type SegmentedProps, type SegmentedSlots, type SegmentedExpose } from './common';
+type __VLS_Slots = SegmentedSlots;
+declare const __VLS_base: import("vue").DefineComponent<SegmentedProps, SegmentedExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (value: any) => any;
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<SegmentedProps> & Readonly<{
+    onChange?: ((value: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+    options: import("./common").SegmentedOption[];
+    readonly: boolean;
+    size: import("./common").SegmentedSize;
+    direction: "horizontal" | "vertical";
+    disabled: boolean;
+    modelValue: any;
+    shape: "square" | "round";
+    ellipsis: boolean;
+    optionKeys: import("../../use").OptionKeys;
+    validateEvent: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};