sard 1.0.0 → 1.0.2

package/components/swiper/useSwiperData.js

@@ -0,0 +1,228 @@
+import { isNumber } from "../../utils/is.js";
+import { computed, ref, watch } from "vue";
+//#region packages/sard/components/swiper/useSwiperData.ts
+function useSwiperData() {
+	const swiperSize = ref(0);
+	const offset = ref(0);
+	const spaceBetween = ref(0);
+	const slidesPerView = ref(1);
+	const slidesPerGroup = ref(1);
+	const centeredSlides = ref(false);
+	const loop = ref(false);
+	const activeIndex = ref(0);
+	const slides = ref([]);
+	const pageCount = computed(() => {
+		const len = slides.value.length;
+		if (centeredSlides.value) return Math.ceil(len / slidesPerGroup.value);
+		return Math.max(Math.ceil((len - slidesPerView.value) / slidesPerGroup.value) + 1, 0);
+	});
+	const contentSize = computed(() => {
+		return Math.max(slides.value.reduce((total, slide) => total + slide.size + spaceBetween.value, 0) - spaceBetween.value, 0);
+	});
+	const startEdge = computed(() => {
+		if (centeredSlides.value) {
+			let groupSize = 0;
+			for (let i = 0; i < slidesPerGroup.value; i++) {
+				const slideSize = slides.value[i].size;
+				groupSize += (i !== slidesPerGroup.value - 1 ? spaceBetween.value : 0) + slideSize;
+			}
+			return swiperSize.value / 2 - groupSize / 2;
+		} else return 0;
+	});
+	const endEdge = computed(() => {
+		if (centeredSlides.value) {
+			const len = slides.value.length;
+			const lastCount = len % slidesPerGroup.value || slidesPerGroup.value;
+			let groupSize = 0;
+			for (let i = len - 1; i >= len - lastCount; i--) {
+				const slideSize = slides.value[i].size;
+				groupSize += (i !== len - lastCount ? spaceBetween.value : 0) + slideSize;
+			}
+			return swiperSize.value / 2 + groupSize / 2 - contentSize.value;
+		} else return swiperSize.value - contentSize.value;
+	});
+	function getOffsetByIndex(index) {
+		if (loop.value) {
+			if (index < 0) return swiperSize.value + spaceBetween.value;
+			else if (index >= pageCount.value) return -contentSize.value - spaceBetween.value;
+		}
+		const beforeSize = slides.value.slice(0, index * slidesPerGroup.value).reduce((total, slide) => total + slide.size + spaceBetween.value, 0);
+		if (centeredSlides.value) {
+			let groupSize = 0;
+			for (let i = 0; i < slidesPerGroup.value; i++) {
+				const slide = slides.value[index * slidesPerGroup.value + i];
+				if (!slide) break;
+				groupSize += (i !== slidesPerGroup.value - 1 ? spaceBetween.value : 0) + slide.size;
+			}
+			return swiperSize.value / 2 - groupSize / 2 - beforeSize;
+		} else if (index >= pageCount.value - 1) return swiperSize.value - contentSize.value;
+		else return beforeSize * -1;
+	}
+	function getOffsetWithIndex(index) {
+		if (loop.value) {
+			if (index < 0) return {
+				offset: getOffsetByIndex(-1),
+				index: pageCount.value - 1
+			};
+			else if (index >= pageCount.value) return {
+				offset: getOffsetByIndex(pageCount.value),
+				index: 0
+			};
+		} else index = Math.max(Math.min(pageCount.value - 1, index), 0);
+		return {
+			offset: getOffsetByIndex(index),
+			index
+		};
+	}
+	function getNearestOffset(forceSide) {
+		let before = 0;
+		let after = 0;
+		let length = slides.value.length;
+		function iteratorGroup(cursor, callback) {
+			let index = 0;
+			for (let i = 0; i < length;) {
+				let groupSize = 0;
+				for (let j = 0; j < slidesPerGroup.value; j++) {
+					const slideSize = slides.value[i].size;
+					groupSize += slideSize + (j < slidesPerGroup.value - 1 ? spaceBetween.value : 0);
+				}
+				before = i === 0 ? 0 : after;
+				after = i === 0 ? groupSize + spaceBetween.value / 2 : before + groupSize + spaceBetween.value;
+				if (cursor >= before && cursor <= after) {
+					const result = callback(i, before, groupSize);
+					if (isNumber(result)) {
+						index = result;
+						break;
+					}
+				}
+				if (i < length - 1) i = Math.min(i + slidesPerGroup.value, length - 1);
+				else break;
+			}
+			return getOffsetWithIndex(index);
+		}
+		let _offset = offset.value;
+		if (centeredSlides.value) {
+			if (_offset >= swiperSize.value / 2) return getOffsetWithIndex(0);
+			else if (_offset <= swiperSize.value / 2 - contentSize.value) return getOffsetWithIndex(pageCount.value - 1);
+			return iteratorGroup(swiperSize.value / 2 - _offset, (i) => {
+				if (forceSide) if (forceSide === "before") return i / slidesPerGroup.value - 1;
+				else return i / slidesPerGroup.value + 1;
+				else return i / slidesPerGroup.value;
+			});
+		} else {
+			if (loop.value) {
+				if (_offset > 0) if (forceSide) return getOffsetWithIndex(forceSide === "before" ? -1 : 0);
+				else return getOffsetWithIndex(_offset > swiperSize.value / 2 ? -1 : 0);
+				else if (_offset < swiperSize.value - contentSize.value) if (forceSide) return getOffsetWithIndex(forceSide === "before" ? pageCount.value - 1 : pageCount.value);
+				else return getOffsetWithIndex(_offset < swiperSize.value / 2 - contentSize.value ? pageCount.value : pageCount.value - 1);
+			} else if (_offset >= 0) return getOffsetWithIndex(0);
+			else if (_offset <= swiperSize.value - contentSize.value) return getOffsetWithIndex(pageCount.value - 1);
+			const cursor = -_offset;
+			return iteratorGroup(cursor, (i, before, groupSize) => {
+				if (forceSide) if (forceSide === "before") return i / slidesPerGroup.value;
+				else return i / slidesPerGroup.value + 1;
+				else {
+					const slideCenter = i === 0 ? groupSize / 2 : before + groupSize / 2 + spaceBetween.value / 2;
+					if (cursor < slideCenter) return i / slidesPerGroup.value;
+					else return i / slidesPerGroup.value + 1;
+				}
+			});
+		}
+	}
+	function getPreviousNearestOffset() {
+		return getNearestOffset("before");
+	}
+	function getNextNearestOffset() {
+		return getNearestOffset("after");
+	}
+	function getNextIndex() {
+		let index = activeIndex.value;
+		if (loop.value) return index >= pageCount.value ? 0 : index + 1;
+		return index >= pageCount.value - 1 ? 0 : index + 1;
+	}
+	function getPreviousIndex() {
+		let index = activeIndex.value;
+		if (loop.value) return index <= -1 ? pageCount.value - 1 : index - 1;
+		return index <= 0 ? pageCount.value - 1 : index - 1;
+	}
+	function getNextIndexOffset() {
+		return getOffsetWithIndex(getNextIndex());
+	}
+	function getPreviousIndexOffset() {
+		return getOffsetWithIndex(getPreviousIndex());
+	}
+	function normalizeLoopOffset(nextOffset) {
+		const firstMember = slides.value[0];
+		const lastMember = slides.value[slides.value.length - 1];
+		firstMember.offset = 0;
+		lastMember.offset = 0;
+		if (nextOffset > spaceBetween.value && nextOffset < swiperSize.value + spaceBetween.value) lastMember.offset = -contentSize.value - spaceBetween.value;
+		else if (nextOffset >= swiperSize.value + spaceBetween.value) nextOffset = swiperSize.value - contentSize.value;
+		else if (nextOffset < swiperSize.value - contentSize.value - spaceBetween.value && nextOffset > -contentSize.value - spaceBetween.value) firstMember.offset = contentSize.value + spaceBetween.value;
+		else if (nextOffset <= -contentSize.value - spaceBetween.value) nextOffset = 0;
+		return nextOffset;
+	}
+	function snapTo(index) {
+		offset.value = getOffsetByIndex(index);
+	}
+	function snapToStart() {
+		offset.value = 0;
+	}
+	function snapToEnd() {
+		offset.value = swiperSize.value - contentSize.value;
+	}
+	function snapToNearest() {
+		offset.value = getNearestOffset().offset;
+	}
+	function snapToPreviousNearest() {
+		offset.value = getPreviousNearestOffset().offset;
+	}
+	function snapToNextNearest() {
+		offset.value = getNextNearestOffset().offset;
+	}
+	function setSlides(_slides) {
+		slides.value = _slides;
+		updateSlidesSize();
+	}
+	function updateSlidesSize() {
+		const slideSize = (swiperSize.value - (slidesPerView.value - 1) * spaceBetween.value) / slidesPerView.value;
+		slides.value.forEach((slide) => {
+			slide.size = slideSize;
+		});
+	}
+	watch(swiperSize, () => {
+		updateSlidesSize();
+		snapTo(activeIndex.value);
+	});
+	return {
+		offset,
+		swiperSize,
+		contentSize,
+		startEdge,
+		endEdge,
+		activeIndex,
+		slidesPerView,
+		slidesPerGroup,
+		spaceBetween,
+		centeredSlides,
+		loop,
+		pageCount,
+		setSlides,
+		getOffsetByIndex,
+		getNearestOffset,
+		getPreviousNearestOffset,
+		getNextNearestOffset,
+		snapToStart,
+		snapToEnd,
+		snapToNearest,
+		snapToPreviousNearest,
+		snapToNextNearest,
+		getNextIndex,
+		getPreviousIndex,
+		getNextIndexOffset,
+		getPreviousIndexOffset,
+		normalizeLoopOffset
+	};
+}
+//#endregion
+export { useSwiperData };

package/components/swiper/useSwiperNested.d.ts

@@ -0,0 +1,5 @@
+export interface SwiperNestedParentContext {
+}
+export declare function useSwiperNested(): {
+    nestedParentContext: SwiperNestedParentContext | null;
+};

package/components/swiper/useSwiperNested.js

@@ -0,0 +1,10 @@
+import { inject, provide } from "vue";
+//#region packages/sard/components/swiper/useSwiperNested.ts
+const SWIPER_NESTED_KEY = Symbol("swiperNested");
+function useSwiperNested() {
+	const nestedParentContext = inject(SWIPER_NESTED_KEY, null);
+	provide(SWIPER_NESTED_KEY, {});
+	return { nestedParentContext };
+}
+//#endregion
+export { useSwiperNested };

package/components/switch/common.d.ts

@@ -0,0 +1,27 @@
+import { type DefaultProps } from '../config';
+export interface SwitchProps {
+    modelValue?: any;
+    disabled?: boolean;
+    readonly?: boolean;
+    loading?: boolean;
+    size?: string;
+    checkedColor?: string;
+    uncheckedColor?: string;
+    checkedValue?: any;
+    uncheckedValue?: any;
+    beforeUpdate?: (value: any) => Promise<any>;
+    validateEvent?: boolean;
+    checkedText?: string;
+    uncheckedText?: string;
+}
+export declare const defaultSwitchProps: DefaultProps<SwitchProps>;
+export interface SwitchSlots {
+    'checked-text'?(props: Record<string, never>): any;
+    'unchecked-text'?(props: Record<string, never>): any;
+}
+export interface SwitchEmits {
+    (e: 'click', event: MouseEvent): void;
+    (e: 'update:modelValue', value: any): void;
+    (e: 'change', value: any): void;
+    (e: 'update:loading', loading: boolean): void;
+}

package/components/switch/common.js

@@ -0,0 +1,8 @@
+//#region packages/sard/components/switch/common.ts
+const defaultSwitchProps = {
+	checkedValue: true,
+	uncheckedValue: false,
+	validateEvent: true
+};
+//#endregion
+export { defaultSwitchProps };

package/components/switch/index.css

@@ -0,0 +1 @@
+:root{--s-switch-size:30px;--s-switch-width:calc(var(--s-switch-size)/6*10);--s-switch-height:var(--s-switch-size);--s-switch-bg:var(--s-fill-color-secondary);--s-switch-bg-checked:var(--s-color-primary);--s-switch-opacity-loading:var(--s-opacity-loading);--s-switch-thumb-gap:3px;--s-switch-thumb-width:calc(var(--s-switch-height) - var(--s-switch-thumb-gap)*2);--s-switch-thumb-height:var(--s-switch-thumb-width);--s-switch-thumb-radius:var(--s-border-radius-full);--s-switch-thumb-bg:var(--s-white);--s-switch-thumb-color:var(--s-gray-600);--s-switch-text-min-margin:9px;--s-switch-text-max-margin:calc(var(--s-switch-thumb-width) + var(--s-switch-text-min-margin));--s-switch-text-color:var(--s-white);--s-switch-text-font-size:var(--s-font-size)}.dark{--s-switch-thumb-bg:var(--s-gray-200)}.s-switch{--s-switch-overflow-margin:calc(100% + var(--s-switch-text-max-margin) + var(--s-switch-thumb-gap));position:relative;display:inline-flex;width:fit-content;height:var(--s-switch-height);border-radius:var(--s-border-radius-full);font-size:var(--s-switch-size);vertical-align:middle;background:var(--s-switch-bg);cursor:pointer;transition:background-color var(--s-duration),opacity var(--s-duration)}.s-switch--checked{background:var(--s-switch-bg-checked)}.s-switch--disabled{opacity:var(--s-opacity-disabled);cursor:not-allowed}.s-switch--readonly{cursor:unset}.s-switch--loading{opacity:var(--s-switch-opacity-loading);cursor:wait}.s-switch__thumb{position:absolute;top:var(--s-switch-thumb-gap);display:flex;justify-content:center;align-items:center;width:var(--s-switch-thumb-width);height:var(--s-switch-thumb-height);inset-inline-start:var(--s-switch-thumb-gap);border-radius:var(--s-border-radius-full);color:var(--s-switch-thumb-color);background:var(--s-switch-thumb-bg);transition:var(--s-duration)}.s-switch__text{overflow:hidden;height:100%;min-width:var(--s-switch-width);padding-inline-start:var(--s-switch-text-max-margin);padding-inline-end:var(--s-switch-text-min-margin);border-radius:var(--s-border-radius-full);transition:padding var(--s-duration)}.s-switch__text-checked,.s-switch__text-unchecked{position:relative;display:flex;justify-content:center;align-items:center;height:100%;flex:none;text-align:center;font-size:var(--s-switch-text-font-size);line-height:var(--s-line-height-none);color:var(--s-switch-text-color);pointer-events:none;transition:margin var(--s-duration)}.s-switch__text-checked{margin-inline-start:calc(var(--s-switch-overflow-margin)*-1);margin-inline-end:var(--s-switch-overflow-margin)}.s-switch__text-unchecked{margin-inline-start:0;margin-inline-end:0;top:-100%}.s-switch--checked .s-switch__thumb{inset-inline-start:calc(100% - var(--s-switch-thumb-width) - var(--s-switch-thumb-gap))}.s-switch--checked .s-switch__text{padding-inline-start:var(--s-switch-text-min-margin);padding-inline-end:var(--s-switch-text-max-margin)}.s-switch--checked .s-switch__text-checked{margin-inline-start:0;margin-inline-end:0}.s-switch--checked .s-switch__text-unchecked{margin-inline-start:var(--s-switch-overflow-margin);margin-inline-end:calc(var(--s-switch-overflow-margin)*-1)}

package/components/switch/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Switch from './switch.vue';
+export declare const Switch: EnhancedComponent<typeof _Switch>;
+export default Switch;
+export type { SwitchProps, SwitchEmits } from './common';

package/components/switch/index.js

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

package/components/switch/switch.d.ts

@@ -0,0 +1,35 @@
+import { type SwitchProps, type SwitchSlots } from './common';
+type __VLS_Slots = SwitchSlots;
+declare const __VLS_base: import("vue").DefineComponent<SwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (value: any) => any;
+    click: (event: MouseEvent) => any;
+    "update:modelValue": (value: any) => any;
+    "update:loading": (loading: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<SwitchProps> & Readonly<{
+    onChange?: ((value: any) => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onUpdate:loading"?: ((loading: boolean) => any) | undefined;
+}>, {
+    readonly: boolean;
+    size: string;
+    beforeUpdate: (value: any) => Promise<any>;
+    loading: boolean;
+    disabled: boolean;
+    modelValue: any;
+    validateEvent: boolean;
+    checkedColor: string;
+    uncheckedColor: string;
+    checkedValue: any;
+    uncheckedValue: any;
+    checkedText: string;
+    uncheckedText: 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/switch/switch.js

@@ -0,0 +1,137 @@
+import { createBem, cssVarName } from "../../utils/bem.js";
+import loading_default from "../loading/loading.js";
+import { useFormContext, useFormItemContext } from "../form/common.js";
+import { defaultSwitchProps } from "./common.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, watch } from "vue";
+//#region packages/sard/components/switch/switch.vue
+var switch_default = /*@__PURE__*/ defineComponent({
+	__name: "switch",
+	props: /*@__PURE__*/ mergeDefaults({
+		modelValue: {
+			type: null,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false
+		},
+		size: {
+			type: String,
+			required: false
+		},
+		checkedColor: {
+			type: String,
+			required: false
+		},
+		uncheckedColor: {
+			type: String,
+			required: false
+		},
+		checkedValue: {
+			type: null,
+			required: false
+		},
+		uncheckedValue: {
+			type: null,
+			required: false
+		},
+		beforeUpdate: {
+			type: Function,
+			required: false
+		},
+		validateEvent: {
+			type: Boolean,
+			required: false
+		},
+		checkedText: {
+			type: String,
+			required: false
+		},
+		uncheckedText: {
+			type: String,
+			required: false
+		}
+	}, defaultSwitchProps),
+	emits: [
+		"click",
+		"update:modelValue",
+		"change",
+		"update:loading"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("switch");
+		const formContext = useFormContext();
+		const formItemContext = useFormItemContext();
+		const isDisabled = computed(() => {
+			return formContext?.disabled || props.disabled;
+		});
+		const isReadonly = computed(() => {
+			return formContext?.readonly || props.readonly;
+		});
+		const innerValue = ref(props.modelValue);
+		watch(() => props.modelValue, () => {
+			innerValue.value = props.modelValue;
+			if (props.validateEvent) formItemContext?.onChange();
+		});
+		const innerLoading = ref(props.loading);
+		watch(() => props.loading, () => {
+			innerLoading.value = props.loading;
+		});
+		const isChecked = computed(() => {
+			return innerValue.value === props.checkedValue;
+		});
+		const onClick = async (event) => {
+			emit("click", event);
+			if (isDisabled.value || isReadonly.value || innerLoading.value) return;
+			const nextValue = innerValue.value === props.checkedValue ? props.uncheckedValue : props.checkedValue;
+			if (props.beforeUpdate) try {
+				innerLoading.value = true;
+				await props.beforeUpdate(nextValue);
+			} catch {
+				return;
+			} finally {
+				innerLoading.value = false;
+			}
+			innerValue.value = nextValue;
+			emit("update:modelValue", nextValue);
+			emit("change", nextValue);
+		};
+		const switchClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m("checked", isChecked.value),
+				bem.m("readonly", isReadonly.value),
+				bem.m("disabled", isDisabled.value),
+				bem.m("loading", innerLoading.value)
+			];
+		});
+		const switchStyle = computed(() => {
+			return {
+				[cssVarName("switch-size")]: props.size,
+				backgroundColor: isChecked.value ? props.checkedColor : props.uncheckedColor
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(switchClass.value),
+				style: normalizeStyle(switchStyle.value),
+				onClick
+			}, [createElementVNode("div", { class: normalizeClass(unref(bem).e("thumb")) }, [innerLoading.value ? (openBlock(), createBlock(loading_default, {
+				key: 0,
+				size: "0.5em"
+			})) : createCommentVNode("v-if", true)], 2), createElementVNode("div", { class: normalizeClass(unref(bem).e("text")) }, [createElementVNode("div", { class: normalizeClass(unref(bem).e("text-checked")) }, [renderSlot(_ctx.$slots, "checked-text", {}, () => [createTextVNode(toDisplayString(__props.checkedText), 1)])], 2), createElementVNode("div", { class: normalizeClass(unref(bem).e("text-unchecked")) }, [renderSlot(_ctx.$slots, "unchecked-text", {}, () => [createTextVNode(toDisplayString(__props.uncheckedText), 1)])], 2)], 2)], 6);
+		};
+	}
+});
+//#endregion
+export { switch_default as default };

package/components/tabbar/common.d.ts

@@ -0,0 +1,38 @@
+import type { InjectionKey } from 'vue';
+import { type DefaultProps } from '../config';
+export interface TabbarProps {
+    current?: number | string;
+    color?: string;
+    activeColor?: string;
+    bordered?: boolean;
+    fixed?: boolean;
+    safeAreaInsetBottom?: boolean;
+}
+export declare const defaultTabbarProps: DefaultProps<TabbarProps>;
+export interface TabbarSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface TabbarEmits {
+    (e: 'update:current', current: number | string): void;
+    (e: 'change', current: number | string): void;
+}
+export interface TabbarItemProps {
+    name?: string | number;
+    text?: string;
+}
+export interface TabbarItemSlots {
+    default?(props: Record<string, never>): any;
+    icon?(props: {
+        active: boolean;
+    }): any;
+}
+export interface TabbarItemEmits {
+    (e: 'click', event: MouseEvent): void;
+}
+export interface TabbarContext {
+    color: TabbarProps['color'];
+    activeColor: TabbarProps['activeColor'];
+    current: any;
+    select: (name: string | number) => void;
+}
+export declare const tabbarContextKey: InjectionKey<TabbarContext>;

package/components/tabbar/common.js

@@ -0,0 +1,5 @@
+//#region packages/sard/components/tabbar/common.ts
+const defaultTabbarProps = { bordered: true };
+const tabbarContextKey = Symbol("tabbarContext");
+//#endregion
+export { defaultTabbarProps, tabbarContextKey };

package/components/tabbar/index.css

@@ -0,0 +1 @@
+:root{--s-tabbar-z-index:var(--s-z-index-secondary);--s-tabbar-height:50px;--s-tabbar-border-color:var(--s-border-color);--s-tabbar-bg:var(--s-bg-color-container);--s-tabbar-color:var(--s-text-color-secondary);--s-tabbar-item-color-active:var(--s-color-primary);--s-tabbar-item-icon-margin-bottom:var(--s-size-2xs);--s-tabbar-item-icon-font-size:var(--s-size-lg);--s-tabbar-item-text-font-size:var(--s-font-size-sm)}.s-tabbar{display:flex;align-items:stretch;height:var(--s-tabbar-height);color:var(--s-tabbar-color);background:var(--s-tabbar-bg)}.s-tabbar--fixed{position:fixed;bottom:0;left:0;width:100%;z-index:var(--s-tabbar-z-index)}.s-tabbar--safe{height:calc(var(--s-tabbar-height) + var(--s-safe-bottom));padding-bottom:var(--s-safe-bottom)}.s-tabbar--bordered::before{position:absolute;z-index:1;pointer-events:none;touch-action:none;opacity:1;content:"";left:0;right:0;transform:scaleY(0.5);top:0;border-top:var(--s-border-width) var(--s-border-style) var(--s-tabbar-border-color);transform-origin:top center}.s-tabbar__item{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;font-size:var(--s-tabbar-item-text-font-size);line-height:var(--s-line-height-tight);color:var(--s-tabbar-color);cursor:pointer}.s-tabbar__item--current{color:var(--s-tabbar-item-color-active)}.s-tabbar__icon{margin-bottom:var(--s-tabbar-item-icon-margin-bottom);font-size:var(--s-tabbar-item-icon-font-size);line-height:var(--s-line-height-none)}

package/components/tabbar/index.d.ts

@@ -0,0 +1,7 @@
+import { type EnhancedComponent } from '../../utils';
+import _Tabbar from './tabbar.vue';
+import _TabbarItem from './tabbar-item.vue';
+export declare const Tabbar: EnhancedComponent<typeof _Tabbar>;
+export declare const TabbarItem: EnhancedComponent<typeof _TabbarItem>;
+export default Tabbar;
+export type { TabbarProps, TabbarSlots, TabbarEmits, TabbarItemProps, TabbarItemSlots, TabbarItemEmits, } from './common';

package/components/tabbar/index.js

@@ -0,0 +1,8 @@
+import { enhanceComponent } from "../../utils/component.js";
+import tabbar_default from "./tabbar.js";
+import tabbar_item_default from "./tabbar-item.js";
+//#region packages/sard/components/tabbar/index.ts
+const Tabbar = enhanceComponent(tabbar_default);
+const TabbarItem = enhanceComponent(tabbar_item_default);
+//#endregion
+export { Tabbar, Tabbar as default, TabbarItem };

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

@@ -0,0 +1,15 @@
+import { type TabbarItemProps, type TabbarItemSlots } from './common';
+type __VLS_Slots = TabbarItemSlots;
+declare const __VLS_base: import("vue").DefineComponent<TabbarItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<TabbarItemProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => 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/tabbar/tabbar-item.js

@@ -0,0 +1,47 @@
+import { createBem } from "../../utils/bem.js";
+import { tabbarContextKey } from "./common.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, inject, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString, unref } from "vue";
+//#region packages/sard/components/tabbar/tabbar-item.vue
+var tabbar_item_default = /*@__PURE__*/ defineComponent({
+	__name: "tabbar-item",
+	props: {
+		name: {
+			type: [String, Number],
+			required: false
+		},
+		text: {
+			type: String,
+			required: false
+		}
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("tabbar");
+		const context = inject(tabbarContextKey);
+		if (!context) throw new Error("TabbarItem must be included in Tabbar.");
+		const isCurrent = computed(() => {
+			return context.current === props.name;
+		});
+		const onClick = (event) => {
+			if (props.name !== void 0) context.select(props.name);
+			emit("click", event);
+		};
+		const tabbarItemClass = computed(() => {
+			return [bem.e("item"), bem.em("item", "current", isCurrent.value)];
+		});
+		const tabbarItemStyle = computed(() => {
+			return { color: isCurrent.value ? context.activeColor : context.color };
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(tabbarItemClass.value),
+				style: normalizeStyle(tabbarItemStyle.value),
+				onClick
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("div", { class: normalizeClass(unref(bem).e("icon")) }, [renderSlot(_ctx.$slots, "icon", { active: isCurrent.value })], 2), createElementVNode("div", { class: normalizeClass(unref(bem).e("text")) }, toDisplayString(__props.text), 3)])], 6);
+		};
+	}
+});
+//#endregion
+export { tabbar_item_default as default };

package/components/tabbar/tabbar.d.ts

@@ -0,0 +1,24 @@
+import { type TabbarProps, type TabbarSlots } from './common';
+type __VLS_Slots = TabbarSlots;
+declare const __VLS_base: import("vue").DefineComponent<TabbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (current: string | number) => any;
+    "update:current": (current: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<TabbarProps> & Readonly<{
+    onChange?: ((current: string | number) => any) | undefined;
+    "onUpdate:current"?: ((current: string | number) => any) | undefined;
+}>, {
+    fixed: boolean;
+    color: string;
+    bordered: boolean;
+    safeAreaInsetBottom: boolean;
+    current: number | string;
+    activeColor: 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;
+    };
+};