sard 1.0.0 → 1.0.2

package/components/cascader-popout/cascader-popout.js

@@ -0,0 +1,139 @@
+import { isEmptyBinding } from "../../utils/utils.js";
+import popout_default from "../popout/popout.js";
+import { omitFormPopoutProps, useFormPopout } from "../popout/useFormPopout.js";
+import cascader_default from "../cascader/cascader.js";
+import { defaultCascaderPopoutProps } from "./common.js";
+import { createBlock, createVNode, defineComponent, isRef, mergeDefaults, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region packages/sard/components/cascader-popout/cascader-popout.vue
+var cascader_popout_default = /*@__PURE__*/ defineComponent({
+	__name: "cascader-popout",
+	props: /*@__PURE__*/ mergeDefaults({
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		resettable: {
+			type: Boolean,
+			required: false
+		},
+		validateEvent: {
+			type: Boolean,
+			required: false
+		},
+		showConfirm: {
+			type: Boolean,
+			required: false
+		},
+		modelValue: {
+			type: [
+				String,
+				Number,
+				Array
+			],
+			required: false
+		},
+		options: {
+			type: Array,
+			required: false
+		},
+		fieldKeys: {
+			type: Object,
+			required: false
+		},
+		optionKeys: {
+			type: Object,
+			required: false
+		},
+		hintText: {
+			type: String,
+			required: false
+		},
+		labelRender: {
+			type: Function,
+			required: false
+		},
+		changeOnSelect: {
+			type: Boolean,
+			required: false
+		},
+		allLevels: {
+			type: Boolean,
+			required: false
+		},
+		multiple: {
+			type: Boolean,
+			required: false
+		},
+		checkStrictly: {
+			type: Boolean,
+			required: false
+		},
+		lazy: {
+			type: Boolean,
+			required: false
+		},
+		load: {
+			type: Function,
+			required: false
+		}
+	}, defaultCascaderPopoutProps),
+	emits: [
+		"update:visible",
+		"update:modelValue",
+		"change",
+		"select",
+		"confirm",
+		"before-enter",
+		"enter",
+		"after-enter",
+		"enter-cancelled",
+		"before-leave",
+		"leave",
+		"after-leave",
+		"leave-cancelled",
+		"visible-hook"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const omittedProps = omitFormPopoutProps(props);
+		const { innerVisible, draftValue, onChange, onConfirm, onVisibleHook } = useFormPopout(props, emit, { onChange() {
+			if (!props.showConfirm && !isEmptyBinding(draftValue.value)) {
+				onConfirm(false);
+				innerVisible.value = false;
+			}
+		} });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(popout_default, {
+				visible: unref(innerVisible),
+				"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => isRef(innerVisible) ? innerVisible.value = $event : null),
+				title: __props.title,
+				"show-confirm": __props.showConfirm,
+				onConfirm: unref(onConfirm),
+				onVisibleHook: unref(onVisibleHook)
+			}, {
+				default: withCtx(() => [createVNode(cascader_default, mergeProps(unref(omittedProps), {
+					"model-value": unref(draftValue),
+					onSelect: _cache[0] || (_cache[0] = (option, tabIndex) => _ctx.$emit("select", option, tabIndex)),
+					onChange: unref(onChange)
+				}), {
+					top: withCtx(({ tabIndex }) => [renderSlot(_ctx.$slots, "top", { tabIndex })]),
+					_: 3
+				}, 16, ["model-value", "onChange"])]),
+				_: 3
+			}, 8, [
+				"visible",
+				"title",
+				"show-confirm",
+				"onConfirm",
+				"onVisibleHook"
+			]);
+		};
+	}
+});
+//#endregion
+export { cascader_popout_default as default };

package/components/cascader-popout/common.d.ts

@@ -0,0 +1,21 @@
+import { type CascaderOption, type CascaderProps } from '../cascader/common';
+import { type DefaultProps } from '../config';
+import { type FormPopoutProps } from '../popout/useFormPopout';
+import type { MotionEmits } from '../motion';
+export interface CascaderPopoutProps extends FormPopoutProps, CascaderProps {
+}
+export declare const defaultCascaderPopoutProps: DefaultProps<CascaderPopoutProps>;
+export interface CascaderPopoutSlots {
+    top?(props: {
+        tabIndex: number;
+    }): any;
+}
+export interface CascaderPopoutEmits extends MotionEmits {
+    (e: 'update:visible', visible: boolean): void;
+    (e: 'update:modelValue', value: any, selectedOptions: CascaderOption[]): void;
+    (e: 'change', value: any, selectedOptions: CascaderOption[]): void;
+    (e: 'select', option: CascaderOption, tabIndex: number): void;
+    (e: 'confirm'): void;
+}
+export interface CascaderPopoutExpose {
+}

package/components/cascader-popout/common.js

@@ -0,0 +1,7 @@
+//#region packages/sard/components/cascader-popout/common.ts
+const defaultCascaderPopoutProps = {
+	showConfirm: true,
+	validateEvent: true
+};
+//#endregion
+export { defaultCascaderPopoutProps };

package/components/cascader-popout/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _CascaderPopout from './cascader-popout.vue';
+export declare const CascaderPopout: EnhancedComponent<typeof _CascaderPopout>;
+export default CascaderPopout;
+export type { CascaderPopoutProps, CascaderPopoutSlots, CascaderPopoutEmits, CascaderPopoutExpose, } from './common';

package/components/cascader-popout/index.js

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

package/components/check-icon/check-icon.d.ts

@@ -0,0 +1,7 @@
+import { type CheckIconProps } from './common';
+declare const __VLS_export: import("vue").DefineComponent<CheckIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CheckIconProps> & Readonly<{}>, {
+    type: "empty" | "check" | "dot" | "dash";
+    shape: "circle" | "square";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/components/check-icon/check-icon.js

@@ -0,0 +1,40 @@
+import { createBem } from "../../utils/bem.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, unref } from "vue";
+import { Check, CheckCircleFill, CheckSquareFill, Dash, DashCircleFill, DashSquareFill, RecordCircle } from "@sard/icons";
+//#region packages/sard/components/check-icon/check-icon.vue
+var check_icon_default = /*@__PURE__*/ defineComponent({
+	__name: "check-icon",
+	props: {
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		shape: {
+			type: String,
+			required: false,
+			default: "square"
+		},
+		type: {
+			type: String,
+			required: false,
+			default: "check"
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const bem = createBem("check-icon");
+		const checkIconClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m(props.shape),
+				bem.m(props.type),
+				bem.is("disabled", props.disabled)
+			];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(checkIconClass.value) }, [__props.disabled && __props.type === "check" ? (openBlock(), createBlock(unref(Check), { key: 0 })) : __props.disabled && __props.type === "dash" ? (openBlock(), createBlock(unref(Dash), { key: 1 })) : __props.type === "check" && __props.shape === "circle" ? (openBlock(), createBlock(unref(CheckCircleFill), { key: 2 })) : __props.type === "check" && __props.shape === "square" ? (openBlock(), createBlock(unref(CheckSquareFill), { key: 3 })) : __props.type === "dash" && __props.shape === "circle" ? (openBlock(), createBlock(unref(DashCircleFill), { key: 4 })) : __props.type === "dash" && __props.shape === "square" ? (openBlock(), createBlock(unref(DashSquareFill), { key: 5 })) : __props.type === "dot" ? (openBlock(), createBlock(unref(RecordCircle), { key: 6 })) : createCommentVNode("v-if", true)], 2);
+		};
+	}
+});
+//#endregion
+export { check_icon_default as default };

package/components/check-icon/common.d.ts

@@ -0,0 +1,5 @@
+export interface CheckIconProps {
+    disabled?: boolean;
+    shape?: 'circle' | 'square';
+    type?: 'empty' | 'check' | 'dot' | 'dash';
+}

package/components/check-icon/index.css

@@ -0,0 +1 @@
+:root{--s-check-icon-size:1em;--s-check-icon-square-radius:.15em;--s-check-icon-border-color:var(--s-border-color-dark);--s-check-icon-border-color-disabled:var(--s-border-color-dark);--s-check-icon-color-disabled:var(--s-text-color-disabled);--s-check-icon-bg-disabled:var(--s-bg-color-disabled)}.s-check-icon{display:flex;justify-content:center;align-items:center;width:var(--s-check-icon-size);height:var(--s-check-icon-size);border:1px solid var(--s-check-icon-border-color)}.s-check-icon--square{border-radius:var(--s-check-icon-square-radius)}.s-check-icon--circle{border-radius:50%}.s-check-icon--check,.s-check-icon--dot,.s-check-icon--dash{border-color:rgba(0,0,0,0)}.s-check-icon:is(.is-disabled){color:var(--s-check-icon-color-disabled);background:var(--s-check-icon-bg-disabled);border-color:var(--s-check-icon-border-color-disabled)}

package/components/checkbox/checkbox-group.d.ts

@@ -0,0 +1,30 @@
+import { type CheckboxGroupProps, type CheckboxGroupSlots } from './common';
+type __VLS_Slots = CheckboxGroupSlots;
+declare const __VLS_base: import("vue").DefineComponent<CheckboxGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (value: any[]) => any;
+    click: (event: MouseEvent) => any;
+    "update:modelValue": (value: any[]) => any;
+}, string, import("vue").PublicProps, Readonly<CheckboxGroupProps> & Readonly<{
+    onChange?: ((value: any[]) => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any[]) => any) | undefined;
+}>, {
+    options: import("./common").CheckboxGroupOption[];
+    readonly: boolean;
+    size: string;
+    direction: "horizontal" | "vertical";
+    type: import("./common").IconType;
+    disabled: boolean;
+    modelValue: any[];
+    optionKeys: import("../../use").OptionKeys;
+    validateEvent: boolean;
+    checkedColor: 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/checkbox/checkbox-group.js

@@ -0,0 +1,102 @@
+import { createBem } from "../../utils/bem.js";
+import { useOptionKeys } from "../../use/useOptionKeys.js";
+import { useFormItemContext } from "../form/common.js";
+import { checkboxContextKey, defaultCheckboxGroupProps } from "./common.js";
+import checkbox_default from "./checkbox.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createTextVNode, defineComponent, mergeDefaults, normalizeClass, openBlock, provide, reactive, ref, renderList, renderSlot, toDisplayString, toRef, unref, useSlots, watch, withCtx } from "vue";
+//#region packages/sard/components/checkbox/checkbox-group.vue
+var checkbox_group_default = /*@__PURE__*/ defineComponent({
+	__name: "checkbox-group",
+	props: /*@__PURE__*/ mergeDefaults({
+		modelValue: {
+			type: Array,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
+		size: {
+			type: String,
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		checkedColor: {
+			type: String,
+			required: false
+		},
+		direction: {
+			type: String,
+			required: false
+		},
+		validateEvent: {
+			type: Boolean,
+			required: false
+		},
+		options: {
+			type: Array,
+			required: false
+		},
+		optionKeys: {
+			type: Object,
+			required: false
+		}
+	}, defaultCheckboxGroupProps),
+	emits: [
+		"click",
+		"update:modelValue",
+		"change"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		useSlots();
+		const emit = __emit;
+		const bem = createBem("checkbox-group");
+		const { getLabel, getValue, getKey } = useOptionKeys(props);
+		const formItemContext = useFormItemContext();
+		const innerValue = ref(props.modelValue || []);
+		watch(() => props.modelValue, () => {
+			innerValue.value = props.modelValue || [];
+			if (props.validateEvent) formItemContext?.onChange();
+		});
+		const toggle = (value) => {
+			const nextValue = innerValue.value.includes(value) ? innerValue.value.filter((v) => v !== value) : innerValue.value.concat(value);
+			innerValue.value = nextValue;
+			emit("update:modelValue", nextValue);
+			emit("change", nextValue);
+		};
+		provide(checkboxContextKey, reactive({
+			disabled: toRef(() => props.disabled),
+			readonly: toRef(() => props.readonly),
+			size: toRef(() => props.size),
+			type: toRef(() => props.type),
+			checkedColor: toRef(() => props.checkedColor),
+			value: innerValue,
+			toggle
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass([unref(bem).b(), unref(bem).m(__props.direction)]) }, [renderSlot(_ctx.$slots, "default", {
+				toggle,
+				value: innerValue.value
+			}, () => [__props.options ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(__props.options, (option) => {
+				return openBlock(), createBlock(checkbox_default, {
+					key: unref(getKey)(unref(getValue)(option)),
+					value: unref(getValue)(option),
+					"validate-event": false
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(getLabel)(option)), 1)]),
+					_: 2
+				}, 1032, ["value"]);
+			}), 128)) : createCommentVNode("v-if", true)])], 2);
+		};
+	}
+});
+//#endregion
+export { checkbox_group_default as default };

package/components/checkbox/checkbox.d.ts

@@ -0,0 +1,30 @@
+import { type CheckboxProps, type CheckboxSlots } from './common';
+type __VLS_Slots = CheckboxSlots;
+declare const __VLS_base: import("vue").DefineComponent<CheckboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (checked: boolean) => any;
+    click: (event: MouseEvent) => any;
+    "update:checked": (checked: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<CheckboxProps> & Readonly<{
+    onChange?: ((checked: boolean) => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    "onUpdate:checked"?: ((checked: boolean) => any) | undefined;
+}>, {
+    label: string;
+    checked: boolean;
+    indeterminate: boolean;
+    readonly: boolean;
+    size: string;
+    value: any;
+    type: import("./common").IconType;
+    disabled: boolean;
+    validateEvent: boolean;
+    checkedColor: 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/checkbox/checkbox.js

@@ -0,0 +1,145 @@
+import { createBem } from "../../utils/bem.js";
+import { useFormContext, useFormItemContext } from "../form/common.js";
+import { checkboxContextKey, defaultCheckboxProps } from "./common.js";
+import check_icon_default from "../check-icon/check-icon.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeDefaults, normalizeClass, normalizeStyle, openBlock, provide, ref, renderSlot, toDisplayString, unref, useSlots, watch } from "vue";
+//#region packages/sard/components/checkbox/checkbox.vue
+var checkbox_default = /*@__PURE__*/ defineComponent({
+	__name: "checkbox",
+	props: /*@__PURE__*/ mergeDefaults({
+		checked: {
+			type: Boolean,
+			required: false
+		},
+		indeterminate: {
+			type: Boolean,
+			required: false
+		},
+		value: {
+			type: null,
+			required: false
+		},
+		label: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
+		size: {
+			type: String,
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		checkedColor: {
+			type: String,
+			required: false
+		},
+		validateEvent: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultCheckboxProps),
+	emits: [
+		"click",
+		"update:checked",
+		"change"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const slots = useSlots();
+		const emit = __emit;
+		const bem = createBem("checkbox");
+		const groupContext = inject(checkboxContextKey, null);
+		const formContext = useFormContext();
+		const formItemContext = useFormItemContext();
+		const isDisabled = computed(() => {
+			return formContext?.disabled || groupContext?.disabled || props.disabled;
+		});
+		const isReadonly = computed(() => {
+			return formContext?.readonly || groupContext?.readonly || props.readonly;
+		});
+		const innerChecked = ref(groupContext ? groupContext.value.includes(props.value) : props.checked);
+		if (groupContext) watch(() => groupContext.value, () => {
+			innerChecked.value = groupContext.value.includes(props.value);
+		});
+		else {
+			watch(() => props.checked, () => {
+				innerChecked.value = props.checked;
+			});
+			watch(innerChecked, () => {
+				if (props.validateEvent) formItemContext?.onChange();
+			});
+		}
+		const onClick = (event) => {
+			if (!isDisabled.value && !isReadonly.value) if (groupContext) groupContext.toggle(props.value);
+			else {
+				innerChecked.value = !innerChecked.value;
+				emit("update:checked", innerChecked.value);
+				emit("change", innerChecked.value);
+			}
+			emit("click", event);
+		};
+		provide(checkboxContextKey, null);
+		const checkboxClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m("checked", innerChecked.value),
+				bem.m("disabled", isDisabled.value),
+				bem.m("readonly", isReadonly.value)
+			];
+		});
+		const checkIconShape = computed(() => {
+			return props.type ?? groupContext?.type ?? "square";
+		});
+		const checkIconType = computed(() => {
+			return innerChecked.value ? "check" : props.indeterminate ? "dash" : "empty";
+		});
+		const iconColor = computed(() => {
+			return innerChecked.value && !isDisabled.value ? props.checkedColor ?? groupContext?.checkedColor : void 0;
+		});
+		const iconClass = computed(() => {
+			return [
+				bem.e("icon"),
+				bem.em("icon", "checked", innerChecked.value),
+				bem.em("icon", "indeterminate", props.indeterminate)
+			];
+		});
+		const iconStyle = computed(() => {
+			return {
+				fontSize: props.size ?? groupContext?.size,
+				color: iconColor.value
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(checkboxClass.value),
+				onClick
+			}, [createElementVNode("div", {
+				class: normalizeClass(iconClass.value),
+				style: normalizeStyle(iconStyle.value)
+			}, [renderSlot(_ctx.$slots, "icon", { checked: innerChecked.value }, () => [createVNode(check_icon_default, {
+				shape: checkIconShape.value,
+				type: checkIconType.value,
+				disabled: isDisabled.value
+			}, null, 8, [
+				"shape",
+				"type",
+				"disabled"
+			])])], 6), slots.default || __props.label ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(bem).e("label"))
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 2)) : createCommentVNode("v-if", true)], 2);
+		};
+	}
+});
+//#endregion
+export { checkbox_default as default };

package/components/checkbox/common.d.ts

@@ -0,0 +1,65 @@
+import { type DefaultProps } from '../config';
+import { type OptionKeys } from '../../use';
+import type { InjectionKey } from 'vue';
+export type IconType = 'square' | 'circle';
+export interface CheckboxProps {
+    checked?: boolean;
+    indeterminate?: boolean;
+    value?: any;
+    label?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    size?: string;
+    type?: IconType;
+    checkedColor?: string;
+    validateEvent?: boolean;
+}
+export declare const defaultCheckboxProps: DefaultProps<CheckboxProps>;
+export interface CheckboxSlots {
+    default?(props: Record<string, never>): any;
+    icon?(props: {
+        checked: boolean;
+    }): any;
+}
+export interface CheckboxEmits {
+    (e: 'click', event: MouseEvent): void;
+    (e: 'update:checked', checked: boolean): void;
+    (e: 'change', checked: boolean): void;
+}
+export type CheckboxGroupOption = {
+    [key: PropertyKey]: any;
+} | string | number | boolean;
+export interface CheckboxGroupProps {
+    modelValue?: any[];
+    disabled?: boolean;
+    readonly?: boolean;
+    size?: string;
+    type?: IconType;
+    checkedColor?: string;
+    direction?: 'horizontal' | 'vertical';
+    validateEvent?: boolean;
+    options?: CheckboxGroupOption[];
+    optionKeys?: OptionKeys;
+}
+export declare const defaultCheckboxGroupProps: DefaultProps<CheckboxGroupProps>;
+export interface CheckboxGroupSlots {
+    default?(props: {
+        toggle: (value: any) => void;
+        value: any[];
+    }): any;
+}
+export interface CheckboxGroupEmits {
+    (e: 'click', event: MouseEvent): void;
+    (e: 'update:modelValue', value: any[]): void;
+    (e: 'change', value: any[]): void;
+}
+export interface CheckboxContext {
+    disabled: CheckboxGroupProps['disabled'];
+    readonly: CheckboxGroupProps['readonly'];
+    size: CheckboxGroupProps['size'];
+    type: CheckboxGroupProps['type'];
+    checkedColor: CheckboxGroupProps['checkedColor'];
+    value: any[];
+    toggle: (value: any) => void;
+}
+export declare const checkboxContextKey: InjectionKey<CheckboxContext>;

package/components/checkbox/common.js

@@ -0,0 +1,9 @@
+//#region packages/sard/components/checkbox/common.ts
+const defaultCheckboxProps = { validateEvent: true };
+const defaultCheckboxGroupProps = {
+	direction: "vertical",
+	validateEvent: true
+};
+const checkboxContextKey = Symbol("checkboxContext");
+//#endregion
+export { checkboxContextKey, defaultCheckboxGroupProps, defaultCheckboxProps };

package/components/checkbox/index.css

@@ -0,0 +1 @@
+:root{--s-checkbox-group-column-gap:var(--s-size-sm);--s-checkbox-group-row-gap:var(--s-size-xs);--s-checkbox-icon-font-size:20px;--s-checkbox-icon-color:var(--s-text-color-fourth);--s-checkbox-icon-color-checked:var(--s-color-primary);--s-checkbox-icon-color-disabled:var(--s-text-color-disabled);--s-checkbox-label-margin-start:var(--s-size-xs)}.s-checkbox{display:flex;align-items:center;cursor:pointer}.s-checkbox__icon{font-size:var(--s-checkbox-icon-font-size);line-height:var(--s-line-height-none);color:var(--s-checkbox-icon-color);transition:color var(--s-duration)}.s-checkbox__icon--checked,.s-checkbox__icon--indeterminate{color:var(--s-checkbox-icon-color-checked)}.s-checkbox__label{margin-inline-start:var(--s-checkbox-label-margin-start)}.s-checkbox--readonly{cursor:unset}.s-checkbox--disabled{cursor:var(--s-cursor-disabled)}.s-checkbox--disabled .s-checkbox__icon{color:var(--s-checkbox-icon-color-disabled)}.s-checkbox--disabled .s-checkbox__label{color:var(--s-text-color-disabled);cursor:var(--s-cursor-disabled)}.s-checkbox-group{display:flex;row-gap:var(--s-checkbox-group-row-gap);column-gap:var(--s-checkbox-group-column-gap)}.s-checkbox-group--horizontal{flex-direction:row;flex-wrap:wrap}.s-checkbox-group--vertical{flex-direction:column}

package/components/checkbox/index.d.ts

@@ -0,0 +1,7 @@
+import { type EnhancedComponent } from '../../utils';
+import _Checkbox from './checkbox.vue';
+import _CheckboxGroup from './checkbox-group.vue';
+export declare const Checkbox: EnhancedComponent<typeof _Checkbox>;
+export declare const CheckboxGroup: EnhancedComponent<typeof _CheckboxGroup>;
+export default Checkbox;
+export type { CheckboxProps, CheckboxSlots, CheckboxEmits, CheckboxGroupProps, CheckboxGroupSlots, CheckboxGroupEmits, } from './common';

package/components/checkbox/index.js

@@ -0,0 +1,8 @@
+import { enhanceComponent } from "../../utils/component.js";
+import checkbox_default from "./checkbox.js";
+import checkbox_group_default from "./checkbox-group.js";
+//#region packages/sard/components/checkbox/index.ts
+const Checkbox = enhanceComponent(checkbox_default);
+const CheckboxGroup = enhanceComponent(checkbox_group_default);
+//#endregion
+export { Checkbox, Checkbox as default, CheckboxGroup };