@czxingyu/xycomponents 0.1.0

package/dist/segmented/index.d.ts

@@ -0,0 +1,56 @@
+export declare const XySegmented: import("../shared/install").SFCWithInstall<{
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./types").XySegmentedProps> & Readonly<{
+        onChange?: ((value: import("./types").XySegmentedValue, event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import("./types").XySegmentedValue) => any) | undefined;
+    }>, import("./types").XySegmentedExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        change: (value: import("./types").XySegmentedValue, event: Event) => any;
+        "update:modelValue": (value: import("./types").XySegmentedValue) => any;
+    }, import("vue").PublicProps, {
+        block: boolean;
+        vertical: boolean;
+        disabled: boolean;
+        required: boolean;
+        options: readonly import("./types").XySegmentedOptionInput[];
+        readonly: boolean;
+        shape: import("./types").XySegmentedShape;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./types").XySegmentedProps> & Readonly<{
+        onChange?: ((value: import("./types").XySegmentedValue, event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import("./types").XySegmentedValue) => any) | undefined;
+    }>, import("./types").XySegmentedExpose, {}, {}, {}, {
+        block: boolean;
+        vertical: boolean;
+        disabled: boolean;
+        required: boolean;
+        options: readonly import("./types").XySegmentedOptionInput[];
+        readonly: boolean;
+        shape: import("./types").XySegmentedShape;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./types").XySegmentedProps> & Readonly<{
+    onChange?: ((value: import("./types").XySegmentedValue, event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: import("./types").XySegmentedValue) => any) | undefined;
+}>, import("./types").XySegmentedExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: import("./types").XySegmentedValue, event: Event) => any;
+    "update:modelValue": (value: import("./types").XySegmentedValue) => any;
+}, string, {
+    block: boolean;
+    vertical: boolean;
+    disabled: boolean;
+    required: boolean;
+    options: readonly import("./types").XySegmentedOptionInput[];
+    readonly: boolean;
+    shape: import("./types").XySegmentedShape;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./types").XySegmentedSlots;
+})>;
+export default XySegmented;
+export type { XySegmentedClassNames, XySegmentedContent, XySegmentedExpose, XySegmentedOption, XySegmentedOptionInput, XySegmentedOptionSlotProps, XySegmentedOrientation, XySegmentedProps, XySegmentedShape, XySegmentedSemanticDom, XySegmentedSemanticProps, XySegmentedSlots, XySegmentedStyles, XySegmentedValue, } from "./types";

package/dist/segmented/index.js

@@ -0,0 +1,6 @@
+import { withInstall as e } from "../shared/install.js";
+import t from "./segmented.js";
+//#region components/segmented/index.ts
+var n = e(t);
+//#endregion
+export { n as XySegmented, n as default };

package/dist/segmented/segmented.js

@@ -0,0 +1,7 @@
+import e from "../_virtual/_plugin-vue_export-helper.js";
+import t from "./segmented.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                          */
+//#region components/segmented/segmented.vue
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-473abb4b"]]);
+//#endregion
+export { n as default };

package/dist/segmented/segmented.vue.d.ts

@@ -0,0 +1,25 @@
+import type { XySegmentedExpose, XySegmentedProps, XySegmentedSlots, XySegmentedValue } from "./types";
+type __VLS_Slots = XySegmentedSlots;
+declare const __VLS_base: import("vue").DefineComponent<XySegmentedProps, XySegmentedExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: XySegmentedValue, event: Event) => any;
+    "update:modelValue": (value: XySegmentedValue) => any;
+}, string, import("vue").PublicProps, Readonly<XySegmentedProps> & Readonly<{
+    onChange?: ((value: XySegmentedValue, event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: XySegmentedValue) => any) | undefined;
+}>, {
+    block: boolean;
+    vertical: boolean;
+    disabled: boolean;
+    required: boolean;
+    options: readonly import("./types").XySegmentedOptionInput[];
+    readonly: boolean;
+    shape: import("./types").XySegmentedShape;
+}, {}, {}, {}, 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/dist/segmented/segmented.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,332 @@
+import { resolveSemanticClassNames as e, resolveSemanticStyles as t } from "../core/shared/index.js";
+import { focusElement as n, getRovingFocusIndex as r } from "../core/a11y/index.js";
+import { getXyClassNames as i, useXyConfig as a } from "../core/config/index.js";
+import { useXyFormControl as o } from "../core/control/index.js";
+import { useElementSize as s } from "../core/resize/index.js";
+import ee from "../icon/icon.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as te, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, getCurrentInstance as ne, nextTick as h, normalizeClass as g, normalizeStyle as _, onMounted as re, openBlock as v, ref as y, renderList as b, renderSlot as x, unref as S, useId as C, watch as w } from "vue";
+//#region components/segmented/segmented.vue?vue&type=script&setup=true&lang.ts
+var ie = [
+	"id",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-disabled",
+	"aria-invalid",
+	"aria-orientation",
+	"aria-readonly"
+], ae = ["data-segment-item", "title"], oe = [
+	"id",
+	"aria-label",
+	"aria-readonly",
+	"checked",
+	"data-segment-value",
+	"disabled",
+	"name",
+	"required",
+	"tabindex",
+	"value",
+	"onChange",
+	"onKeydown"
+], T = /*@__PURE__*/ m({
+	name: "XySegmented",
+	__name: "segmented",
+	props: {
+		ariaLabel: {
+			type: String,
+			required: !1
+		},
+		block: {
+			type: Boolean,
+			required: !1,
+			default: !1
+		},
+		classNames: {
+			type: [
+				Function,
+				null,
+				Array
+			],
+			required: !1,
+			skipCheck: !0
+		},
+		defaultValue: {
+			type: [Number, String],
+			required: !1
+		},
+		disabled: {
+			type: Boolean,
+			required: !1,
+			default: !1
+		},
+		modelValue: {
+			type: [Number, String],
+			required: !1
+		},
+		name: {
+			type: String,
+			required: !1
+		},
+		options: {
+			type: Array,
+			required: !1,
+			default: () => []
+		},
+		orientation: {
+			type: String,
+			required: !1
+		},
+		readonly: {
+			type: Boolean,
+			required: !1,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			required: !1,
+			default: !1
+		},
+		shape: {
+			type: String,
+			required: !1,
+			default: "default"
+		},
+		size: {
+			type: String,
+			required: !1
+		},
+		status: {
+			type: String,
+			required: !1
+		},
+		styles: {
+			type: [
+				Function,
+				null,
+				Array
+			],
+			required: !1,
+			skipCheck: !0
+		},
+		vertical: {
+			type: Boolean,
+			required: !1,
+			default: !1
+		}
+	},
+	emits: ["change", "update:modelValue"],
+	setup(T, { expose: se, emit: E }) {
+		let D = m({
+			name: "XySegmentedContentValue",
+			props: { content: {
+				required: !1,
+				type: null
+			} },
+			setup(e) {
+				return () => {
+					let t = e.content;
+					return typeof t == "function" ? t() : t ?? "";
+				};
+			}
+		}), O = T, k = E, A = ne(), j = C(), M = `xy-segmented-${j}`, N = y(), P = y([]), F = y([]), I = y({ opacity: 0 }), L = o(() => O), R = a(), z = l(() => {
+			let e = A?.vnode.props ?? {};
+			return Object.prototype.hasOwnProperty.call(e, "modelValue") || Object.prototype.hasOwnProperty.call(e, "model-value");
+		}), B = l(() => O.options.map((e) => typeof e == "object" && e ? {
+			...e,
+			label: e.label ?? String(e.value)
+		} : {
+			label: String(e),
+			value: e
+		}));
+		function V() {
+			return B.value.find((e) => !e.disabled)?.value;
+		}
+		let H = y(O.defaultValue ?? V()), U = l(() => z.value ? O.modelValue : H.value), W = l(() => O.orientation ?? (O.vertical ? "vertical" : "horizontal")), G = l(() => O.name ?? M), K = l(() => B.value.findIndex((e) => Object.is(e.value, U.value))), q = l(() => ({
+			block: O.block,
+			disabled: L.disabled.value,
+			itemCount: B.value.length,
+			orientation: W.value,
+			readonly: L.readonly.value,
+			shape: O.shape,
+			size: L.size.value,
+			status: L.status.value,
+			value: U.value
+		})), J = l(() => e(O.classNames, q.value)), Y = l(() => t(O.styles, q.value)), ce = l(() => i(R.value, "segmented")), { height: le, width: ue } = s(N);
+		function de(e, t) {
+			P.value[t] = e instanceof HTMLElement ? e : void 0;
+		}
+		function fe(e, t) {
+			F.value[t] = e instanceof HTMLInputElement ? e : void 0;
+		}
+		function X(e) {
+			return L.disabled.value || !!e.disabled;
+		}
+		function Z(e) {
+			return Object.is(e.value, U.value);
+		}
+		function pe(e) {
+			return e.ariaLabel ? e.ariaLabel : typeof e.label == "number" || typeof e.label == "string" ? String(e.label) : e.title ?? String(e.value);
+		}
+		function me(e, t) {
+			return X(e) ? -1 : Z(e) || K.value < 0 && B.value.findIndex((e) => !X(e)) === t ? 0 : -1;
+		}
+		function Q() {
+			let e = N.value, t = P.value[K.value];
+			if (!e || !t || K.value < 0) {
+				I.value = { opacity: 0 };
+				return;
+			}
+			let n = e.getBoundingClientRect(), r = t.getBoundingClientRect();
+			I.value = {
+				height: `${r.height}px`,
+				opacity: 1,
+				transform: `translate3d(${r.left - n.left}px, ${r.top - n.top}px, 0)`,
+				width: `${r.width}px`
+			};
+		}
+		function he() {
+			B.value.forEach((e, t) => {
+				let n = F.value[t];
+				n && (n.checked = Z(e));
+			});
+		}
+		function $(e, t) {
+			X(e) || L.readonly.value || Z(e) || (z.value || (H.value = e.value), k("update:modelValue", e.value), k("change", e.value, t), L.notifyChange(e.value), z.value && h(he));
+		}
+		function ge(e, t) {
+			if (X(e) || L.readonly.value) {
+				t.target.checked = Z(e);
+				return;
+			}
+			$(e, t);
+		}
+		function _e(e) {
+			L.readonly.value && e.preventDefault();
+		}
+		function ve(e, t) {
+			if (L.disabled.value || L.readonly.value) return;
+			let i = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 0;
+			if (i === 0) return;
+			e.preventDefault();
+			let a = r({
+				currentIndex: t,
+				isDisabled: (e) => X(B.value[e]),
+				itemCount: B.value.length,
+				offset: i
+			});
+			if (a < 0) return;
+			let o = F.value[a], s = B.value[a];
+			n(o), s && $(s, e);
+		}
+		function ye(e) {
+			let t = e === void 0 ? K.value >= 0 ? K.value : B.value.findIndex((e) => !X(e)) : B.value.findIndex((t) => Object.is(t.value, e));
+			return t < 0 || X(B.value[t]) ? !1 : n(F.value[t]);
+		}
+		return w(B, (e) => {
+			P.value.length = e.length, F.value.length = e.length, !z.value && !e.some((e) => !e.disabled && Object.is(e.value, H.value)) && (H.value = V()), h(Q);
+		}, { deep: !0 }), w([
+			K,
+			ue,
+			le,
+			W
+		], () => void h(Q), { immediate: !0 }), re(Q), se({
+			focus: ye,
+			get inputs() {
+				return F.value.filter((e) => e !== void 0);
+			},
+			updateIndicator: Q,
+			get value() {
+				return U.value;
+			}
+		}), (e, t) => (v(), d("div", {
+			id: S(L).id.value,
+			ref_key: "rootRef",
+			ref: N,
+			class: g([
+				ce.value,
+				`xy-segmented--${S(L).size.value}`,
+				`xy-segmented--${W.value}`,
+				`xy-segmented--${T.shape}`,
+				S(L).status.value ? `xy-segmented--${S(L).status.value}` : "",
+				{
+					"xy-segmented--block": T.block,
+					"xy-segmented--disabled": S(L).disabled.value,
+					"xy-segmented--readonly": S(L).readonly.value
+				},
+				J.value.root
+			]),
+			style: _(Y.value.root),
+			role: "radiogroup",
+			"aria-label": T.ariaLabel || void 0,
+			"aria-labelledby": T.ariaLabel ? void 0 : S(L).labelledBy.value,
+			"aria-describedby": S(L).describedBy.value,
+			"aria-disabled": S(L).disabled.value || void 0,
+			"aria-invalid": S(L).status.value === "error" || void 0,
+			"aria-orientation": W.value,
+			"aria-readonly": S(L).readonly.value || void 0
+		}, [f("span", {
+			class: g(["xy-segmented__indicator", J.value.indicator]),
+			style: _([I.value, Y.value.indicator]),
+			"aria-hidden": "true"
+		}, null, 6), (v(!0), d(c, null, b(B.value, (t, n) => (v(), d("label", {
+			key: `${typeof t.value}:${String(t.value)}`,
+			ref_for: !0,
+			ref: (e) => de(e, n),
+			class: g(["xy-segmented__item", [
+				{
+					"xy-segmented__item--checked": Z(t),
+					"xy-segmented__item--disabled": X(t)
+				},
+				t.className,
+				J.value.item
+			]]),
+			"data-segment-item": String(t.value),
+			style: _([t.style, Y.value.item]),
+			title: t.title
+		}, [f("input", {
+			id: t.id ?? `${S(j)}-${n}`,
+			ref_for: !0,
+			ref: (e) => fe(e, n),
+			class: g(["xy-segmented__native", J.value.native]),
+			type: "radio",
+			"aria-label": pe(t),
+			"aria-readonly": S(L).readonly.value || void 0,
+			checked: Z(t),
+			"data-segment-value": String(t.value),
+			disabled: X(t),
+			name: G.value,
+			required: T.required,
+			style: _(Y.value.native),
+			tabindex: me(t, n),
+			value: t.value,
+			onChange: (e) => ge(t, e),
+			onClick: _e,
+			onKeydown: (e) => ve(e, n)
+		}, null, 46, oe), f("span", {
+			class: g(["xy-segmented__label", J.value.label]),
+			style: _(Y.value.label)
+		}, [t.icon || e.$slots.icon ? (v(), d("span", {
+			key: 0,
+			class: g(["xy-segmented__icon", J.value.icon]),
+			style: _(Y.value.icon),
+			"aria-hidden": "true"
+		}, [x(e.$slots, "icon", {
+			checked: Z(t),
+			index: n,
+			option: t
+		}, () => [typeof t.icon == "string" ? (v(), u(ee, {
+			key: 0,
+			name: t.icon,
+			size: 14
+		}, null, 8, ["name"])) : (v(), u(S(D), {
+			key: 1,
+			content: t.icon
+		}, null, 8, ["content"]))], !0)], 6)) : te("", !0), x(e.$slots, "option", {
+			checked: Z(t),
+			index: n,
+			option: t
+		}, () => [p(S(D), { content: t.label }, null, 8, ["content"])], !0)], 6)], 14, ae))), 128))], 14, ie));
+	}
+});
+//#endregion
+export { T as default };

package/dist/segmented/types.d.ts

@@ -0,0 +1,67 @@
+import type { CSSProperties, VNodeChild } from "vue";
+import type { XyControlStatus, XySemanticClassNames, XySemanticStyles, XySize } from "../core";
+import type { XyIconName } from "../icon";
+export type XySegmentedValue = number | string;
+export type XySegmentedContent = VNodeChild | (() => VNodeChild);
+export type XySegmentedOrientation = "horizontal" | "vertical";
+export type XySegmentedShape = "default" | "round";
+export interface XySegmentedOption {
+    ariaLabel?: string;
+    className?: string;
+    disabled?: boolean;
+    icon?: XyIconName | Exclude<XySegmentedContent, string>;
+    id?: string;
+    label?: XySegmentedContent;
+    style?: CSSProperties;
+    title?: string;
+    value: XySegmentedValue;
+}
+export type XySegmentedOptionInput = XySegmentedValue | XySegmentedOption;
+export type XySegmentedSemanticDom = "icon" | "indicator" | "item" | "label" | "native" | "root";
+export interface XySegmentedSemanticProps {
+    block: boolean;
+    disabled: boolean;
+    itemCount: number;
+    orientation: XySegmentedOrientation;
+    readonly: boolean;
+    shape: XySegmentedShape;
+    size: XySize;
+    status?: XyControlStatus;
+    value?: XySegmentedValue;
+}
+export type XySegmentedClassNames = XySemanticClassNames<XySegmentedSemanticDom, XySegmentedSemanticProps>;
+export type XySegmentedStyles = XySemanticStyles<XySegmentedSemanticDom, XySegmentedSemanticProps>;
+export interface XySegmentedProps {
+    ariaLabel?: string;
+    block?: boolean;
+    classNames?: XySegmentedClassNames;
+    defaultValue?: XySegmentedValue;
+    disabled?: boolean;
+    modelValue?: XySegmentedValue;
+    name?: string;
+    options?: readonly XySegmentedOptionInput[];
+    orientation?: XySegmentedOrientation;
+    readonly?: boolean;
+    required?: boolean;
+    shape?: XySegmentedShape;
+    size?: XySize;
+    status?: XyControlStatus;
+    styles?: XySegmentedStyles;
+    /** @deprecated Use orientation="vertical" instead. */
+    vertical?: boolean;
+}
+export interface XySegmentedOptionSlotProps {
+    checked: boolean;
+    index: number;
+    option: XySegmentedOption;
+}
+export interface XySegmentedSlots {
+    icon?: (props: XySegmentedOptionSlotProps) => VNodeChild;
+    option?: (props: XySegmentedOptionSlotProps) => VNodeChild;
+}
+export interface XySegmentedExpose {
+    focus: (value?: XySegmentedValue) => boolean;
+    inputs: HTMLInputElement[];
+    updateIndicator: () => void;
+    value: XySegmentedValue | undefined;
+}