sard 1.0.0 → 1.0.2

package/components/accordion/index.js

@@ -0,0 +1,8 @@
+import { enhanceComponent } from "../../utils/component.js";
+import accordion_default from "./accordion.js";
+import accordion_item_default from "./accordion-item.js";
+//#region packages/sard/components/accordion/index.ts
+const Accordion = enhanceComponent(accordion_default);
+const AccordionItem = enhanceComponent(accordion_item_default);
+//#endregion
+export { Accordion, Accordion as default, AccordionItem };

package/components/action-sheet/action-sheet-item.d.ts

@@ -0,0 +1,18 @@
+import { type ActionSheetItemProps, type ActionSheetItemSlots } from './common';
+type __VLS_Slots = ActionSheetItemSlots;
+declare const __VLS_base: import("vue").DefineComponent<ActionSheetItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<ActionSheetItemProps> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {
+    loading: 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/action-sheet/action-sheet-item.js

@@ -0,0 +1,72 @@
+import { createBem } from "../../utils/bem.js";
+import loading_default from "../loading/loading.js";
+import { useActionSheetItem } from "./context.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString, unref, useSlots } from "vue";
+//#region packages/sard/components/action-sheet/action-sheet-item.vue
+var action_sheet_item_default = /*@__PURE__*/ defineComponent({
+	__name: "action-sheet-item",
+	props: {
+		label: {
+			type: String,
+			required: false
+		},
+		value: {
+			type: null,
+			required: false
+		},
+		description: {
+			type: String,
+			required: false
+		},
+		color: {
+			type: String,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const slots = useSlots();
+		const emit = __emit;
+		const bem = createBem("action-sheet");
+		const { select } = useActionSheetItem(props);
+		const itemStyle = computed(() => {
+			return { color: props.color };
+		});
+		const onClick = () => {
+			if (!props.disabled && !props.loading) {
+				emit("click");
+				select();
+			}
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass([
+					unref(bem).e("item"),
+					unref(bem).is("disabled", props.disabled),
+					unref(bem).is("loading", props.loading)
+				]),
+				style: normalizeStyle(itemStyle.value),
+				onClick
+			}, [!props.loading ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", { class: normalizeClass(unref(bem).e("item-label")) }, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(props.label), 1)])], 2), props.description || slots.description ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(bem).e("item-description"))
+			}, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(props.description), 1)])], 2)) : createCommentVNode("v-if", true)], 64))], 64)) : (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass(unref(bem).e("loading"))
+			}, [createVNode(loading_default)], 2))], 6);
+		};
+	}
+});
+//#endregion
+export { action_sheet_item_default as default };

package/components/action-sheet/action-sheet.d.ts

@@ -0,0 +1,49 @@
+import { type ActionSheetItemProps, type ActionSheetProps, type ActionSheetSlots } from './common';
+import type { MotionHookName } from '../motion/common';
+type __VLS_Slots = ActionSheetSlots;
+declare const __VLS_base: import("vue").DefineComponent<ActionSheetProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (item: ActionSheetItemProps, index: number) => any;
+    cancel: () => any;
+    close: () => any;
+    "before-enter": (el: Element) => any;
+    enter: (el: Element) => any;
+    "after-enter": (el: Element) => any;
+    "enter-cancelled": (el: Element) => any;
+    "before-leave": (el: Element) => any;
+    leave: (el: Element) => any;
+    "after-leave": (el: Element) => any;
+    "leave-cancelled": (el: Element) => any;
+    "visible-hook": (name: MotionHookName, el: Element) => any;
+    "update:visible": (visible: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<ActionSheetProps> & Readonly<{
+    onSelect?: ((item: ActionSheetItemProps, index: number) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+    "onBefore-enter"?: ((el: Element) => any) | undefined;
+    onEnter?: ((el: Element) => any) | undefined;
+    "onAfter-enter"?: ((el: Element) => any) | undefined;
+    "onEnter-cancelled"?: ((el: Element) => any) | undefined;
+    "onBefore-leave"?: ((el: Element) => any) | undefined;
+    onLeave?: ((el: Element) => any) | undefined;
+    "onAfter-leave"?: ((el: Element) => any) | undefined;
+    "onLeave-cancelled"?: ((el: Element) => any) | undefined;
+    "onVisible-hook"?: ((name: MotionHookName, el: Element) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+}>, {
+    cancel: string;
+    visible: boolean;
+    overlayClosable: boolean;
+    description: string;
+    itemList: ActionSheetItemProps[];
+    showCancel: boolean;
+    beforeClose: import("./common").ActionSheetBeforeClose;
+    internalContext: import("./context").UseActionSheetReturn;
+}, {}, {}, {}, 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/action-sheet/action-sheet.js

@@ -0,0 +1,160 @@
+import { createBem } from "../../utils/bem.js";
+import { isFunction } from "../../utils/is.js";
+import { noop } from "../../utils/utils.js";
+import popup_default from "../popup/popup.js";
+import { useActionSheet } from "./context.js";
+import action_sheet_item_default from "./action-sheet-item.js";
+import { defaultActionSheetProps } from "./common.js";
+import { useTranslateWithPrefix } from "../../locale/index.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeDefaults, mergeProps, normalizeClass, openBlock, reactive, readonly, ref, renderList, renderSlot, toDisplayString, unref, useSlots, watch, withCtx } from "vue";
+//#region packages/sard/components/action-sheet/action-sheet.vue
+var action_sheet_default = /*@__PURE__*/ defineComponent({
+	__name: "action-sheet",
+	props: /*@__PURE__*/ mergeDefaults({
+		description: {
+			type: String,
+			required: false
+		},
+		itemList: {
+			type: Array,
+			required: false
+		},
+		cancel: {
+			type: String,
+			required: false
+		},
+		showCancel: {
+			type: Boolean,
+			required: false
+		},
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		overlayClosable: {
+			type: Boolean,
+			required: false
+		},
+		beforeClose: {
+			type: Function,
+			required: false
+		},
+		internalContext: {
+			type: Object,
+			required: false
+		}
+	}, defaultActionSheetProps),
+	emits: [
+		"update:visible",
+		"close",
+		"cancel",
+		"select",
+		"before-enter",
+		"enter",
+		"after-enter",
+		"enter-cancelled",
+		"before-leave",
+		"leave",
+		"after-leave",
+		"leave-cancelled",
+		"visible-hook"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const slots = useSlots();
+		const emit = __emit;
+		const bem = createBem("action-sheet");
+		const { t } = useTranslateWithPrefix("actionSheet");
+		const mergedShowCancel = computed(() => {
+			return !!(props.showCancel || props.cancel || slots.cancel);
+		});
+		const showDescription = computed(() => {
+			return !!(props.description || slots.description);
+		});
+		const innerVisible = ref(props.visible);
+		watch(() => props.visible, () => {
+			innerVisible.value = props.visible;
+		});
+		const loading = reactive({
+			cancel: false,
+			select: false,
+			close: false
+		});
+		const readonlyLoading = readonly(loading);
+		const asyncSet = /* @__PURE__ */ new Set();
+		watch(innerVisible, () => {
+			if (innerVisible.value === false) {
+				asyncSet.forEach((obj) => {
+					obj.valid = false;
+				});
+				Object.assign(loading, {
+					cancel: false,
+					select: false,
+					close: false
+				});
+			}
+		}, { flush: "sync" });
+		function perhapsClose(type, item, index) {
+			if (isFunction(props.beforeClose)) {
+				const result = type === "select" ? props.beforeClose(type, readonlyLoading, item, index) : props.beforeClose(type, readonlyLoading);
+				if (result instanceof Promise) return result.then(() => {
+					innerVisible.value = false;
+					emit("update:visible", false);
+				}).catch(noop);
+				else if (result === false) return;
+			}
+			innerVisible.value = false;
+			emit("update:visible", false);
+		}
+		const onOverlayClick = () => {
+			if (props.overlayClosable) {
+				emit("close");
+				perhapsClose("close");
+			}
+		};
+		const onSelect = (item, index) => {
+			if (!item.disabled && !item.loading) {
+				item = { ...item };
+				emit("select", item, index);
+				perhapsClose("select", item, index);
+			}
+		};
+		const onCancel = () => {
+			emit("cancel");
+			perhapsClose("cancel");
+		};
+		const onVisibleHook = (name, el) => {
+			emit("visible-hook", name, el);
+			emit(name, el);
+		};
+		(props.internalContext || useActionSheet()).setSelectCallback(onSelect);
+		const actionSheetClass = computed(() => {
+			return [bem.b(), bem.m("headless", !showDescription.value)];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(popup_default, {
+				effect: "slide-bottom",
+				visible: innerVisible.value,
+				onOverlayClick,
+				onVisibleHook
+			}, {
+				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(actionSheetClass.value) }, [
+					showDescription.value ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(unref(bem).e("description"))
+					}, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])], 2)) : createCommentVNode("v-if", true),
+					createElementVNode("div", { class: normalizeClass(unref(bem).e("content")) }, [__props.itemList && __props.itemList.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(__props.itemList, (item, i) => {
+						return openBlock(), createBlock(action_sheet_item_default, mergeProps({ key: i }, { ref_for: true }, item), null, 16);
+					}), 128)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")], 2),
+					mergedShowCancel.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", { class: normalizeClass(unref(bem).e("gap")) }, null, 2), createElementVNode("div", {
+						class: normalizeClass(unref(bem).e("cancel")),
+						onClick: onCancel
+					}, [renderSlot(_ctx.$slots, "cancel", {}, () => [createTextVNode(toDisplayString(__props.cancel || unref(t)("cancel")), 1)])], 2)], 64)) : createCommentVNode("v-if", true)
+				], 2)]),
+				_: 3
+			}, 8, ["visible"]);
+		};
+	}
+});
+//#endregion
+export { action_sheet_default as default };

package/components/action-sheet/common.d.ts

@@ -0,0 +1,55 @@
+import { type DefaultProps } from '../config';
+import type { MotionEmits } from '../motion';
+import { type UseActionSheetReturn } from './context';
+export interface ActionSheetBeforeClose {
+    (type: 'close' | 'cancel', loading: {
+        readonly cancel: boolean;
+        readonly select: boolean;
+        readonly close: boolean;
+    }): any;
+    (type: 'select', loading: {
+        readonly cancel: boolean;
+        readonly select: boolean;
+        readonly close: boolean;
+    }, item: ActionSheetItemProps, index: number): any;
+}
+export interface ActionSheetProps {
+    description?: string;
+    itemList?: ActionSheetItemProps[];
+    cancel?: string;
+    showCancel?: boolean;
+    visible?: boolean;
+    overlayClosable?: boolean;
+    beforeClose?: ActionSheetBeforeClose;
+    internalContext?: UseActionSheetReturn;
+}
+export declare const defaultActionSheetProps: DefaultProps<ActionSheetProps>;
+export interface ActionSheetEmits extends MotionEmits {
+    (e: 'update:visible', visible: boolean): void;
+    (e: 'close'): void;
+    (e: 'cancel'): void;
+    (e: 'select', item: ActionSheetItemProps, index: number): void;
+}
+export interface ActionSheetSlots {
+    default?(props?: any): any;
+    description?(props?: any): any;
+    cancel?(props?: any): any;
+}
+export interface ActionSheetExpose {
+}
+export interface ActionSheetItemProps {
+    label?: string;
+    value?: any;
+    description?: string;
+    color?: string;
+    loading?: boolean;
+    disabled?: boolean;
+}
+export interface ActionSheetItemEmits {
+    (e: 'click'): void;
+}
+export interface ActionSheetItemSlots {
+    default?(props?: Record<string, never>): any;
+    label?(props?: Record<string, never>): any;
+    description?(props?: Record<string, never>): any;
+}

package/components/action-sheet/common.js

@@ -0,0 +1,4 @@
+//#region packages/sard/components/action-sheet/common.ts
+const defaultActionSheetProps = { overlayClosable: true };
+//#endregion
+export { defaultActionSheetProps };

package/components/action-sheet/context.d.ts

@@ -0,0 +1,16 @@
+import { type InjectionKey, type Ref } from 'vue';
+import { type ActionSheetItemProps } from './common';
+export interface ActionSheetContext {
+    select: (item: ActionSheetItemProps) => void;
+    addMember: (item: ActionSheetItemProps) => void;
+    removeMember: (item: ActionSheetItemProps) => void;
+}
+export declare const actionSheetContextKey: InjectionKey<ActionSheetContext>;
+export interface UseActionSheetReturn {
+    items: Ref<ActionSheetItemProps[]>;
+    setSelectCallback: (callback: (item: ActionSheetItemProps, index: number) => void) => void;
+}
+export declare function useActionSheet(): UseActionSheetReturn;
+export declare function useActionSheetItem(item: ActionSheetItemProps): {
+    select: () => void;
+};

package/components/action-sheet/context.js

@@ -0,0 +1,50 @@
+import { reactiveComputed } from "../../use/reactiveComputed.js";
+import { inject, onMounted, onUnmounted, provide, ref, useAttrs } from "vue";
+//#region packages/sard/components/action-sheet/context.ts
+const actionSheetContextKey = Symbol("ActionSheetContext");
+function useActionSheet() {
+	const items = ref([]);
+	let selectCallback = null;
+	const setSelectCallback = (callback) => {
+		selectCallback = callback;
+	};
+	provide(actionSheetContextKey, {
+		select: (item) => {
+			const index = items.value.indexOf(item);
+			selectCallback?.(item, index);
+		},
+		addMember: (item) => {
+			if (!items.value.includes(item)) items.value.push(item);
+		},
+		removeMember: (item) => {
+			const index = items.value.indexOf(item);
+			if (index > -1) items.value.splice(index, 1);
+		}
+	});
+	return {
+		items,
+		setSelectCallback
+	};
+}
+function useActionSheetItem(item) {
+	const context = inject(actionSheetContextKey);
+	if (!context) throw new Error("ActionSheetItem must be included in ActionSheet.");
+	const attrs = useAttrs();
+	const member = reactiveComputed(() => {
+		return {
+			...item,
+			...attrs
+		};
+	});
+	onMounted(() => {
+		context.addMember(member);
+	});
+	onUnmounted(() => {
+		context.removeMember(member);
+	});
+	return { select: () => {
+		context.select(member);
+	} };
+}
+//#endregion
+export { actionSheetContextKey, useActionSheet, useActionSheetItem };

package/components/action-sheet/imperative.d.ts

@@ -0,0 +1,18 @@
+import { type TransitionHookCallbacks } from '../popup/common';
+import { type ActionSheetItemProps, type ActionSheetProps } from './common';
+export interface ActionSheetOptions extends ActionSheetProps, TransitionHookCallbacks {
+    onClose?: () => void;
+    onCancel?: () => void;
+    onSelect?: (item: ActionSheetItemProps) => void;
+}
+export interface ActionSheetShowFunction {
+    (options?: ActionSheetOptions): void;
+}
+export interface ActionSheetSimpleShowFunction {
+    (options: ActionSheetOptions): void;
+}
+export type ActionSheetFunction = ActionSheetSimpleShowFunction & {
+    hide: () => void;
+};
+export declare function createActionSheet(defaultOptions?: ActionSheetOptions): ActionSheetFunction;
+export declare const actionSheet: ActionSheetFunction;

package/components/action-sheet/imperative.js

@@ -0,0 +1,20 @@
+import action_sheet_default from "./action-sheet.js";
+import { createImperativeComponent } from "../../utils/createImperativeComponent.js";
+//#region packages/sard/components/action-sheet/imperative.ts
+function createActionSheet(defaultOptions) {
+	const imperative = createImperativeComponent(action_sheet_default, defaultOptions);
+	const show = (options) => {
+		imperative.show(options);
+	};
+	const hide = () => {
+		imperative.hide();
+	};
+	const actionSheet = (options) => {
+		show(options);
+	};
+	actionSheet.hide = hide;
+	return actionSheet;
+}
+const actionSheet = createActionSheet();
+//#endregion
+export { actionSheet, createActionSheet };

package/components/action-sheet/index.css

@@ -0,0 +1 @@
+:root{--s-action-sheet-border-radius:var(--s-border-radius-xl);--s-action-sheet-border-color:var(--s-border-color);--s-action-sheet-bg:var(--s-bg-color-elevated);--s-action-sheet-bg-active:var(--s-bg-color-active);--s-action-sheet-description-padding:var(--s-size);--s-action-sheet-description-font-size:var(--s-font-size);--s-action-sheet-description-color:var(--s-text-color-tertiary);--s-action-sheet-gap-height:var(--s-size-xs);--s-action-sheet-gap-bg:var(--s-fill-color-fourth);--s-action-sheet-item-min-height:var(--s-content-height-lg);--s-action-sheet-item-padding:var(--s-content-padding);--s-action-sheet-item-color-disabled:var(--s-text-color-disabled);--s-action-sheet-item-label-font-size:var(--s-font-size-lg);--s-action-sheet-item-label-line-height:var(--s-line-height-normal);--s-action-sheet-item-label-color:var(--s-text-color-primary);--s-action-sheet-item-description-margin-top:var(--s-size-2xs);--s-action-sheet-item-description-font-size:var(--s-font-size-sm);--s-action-sheet-item-description-line-height:var(--s-line-height-normal);--s-action-sheet-item-description-color:var(--s-text-color-tertiary);--s-action-sheet-loading-font-size:var(--s-size-lg);--s-action-sheet-loading-color:var(--s-text-color-fourth);--s-action-sheet-cancel-min-height:var(--s-content-height-lg);--s-action-sheet-cancel-padding:var(--s-content-padding);--s-action-sheet-cancel-font-size:var(--s-font-size-lg);--s-action-sheet-cancel-line-height:var(--s-line-height-normal);--s-action-sheet-cancel-color:var(--s-text-color-primary)}.s-action-sheet{padding-bottom:var(--s-safe-bottom);border-top-left-radius:var(--s-action-sheet-border-radius);border-top-right-radius:var(--s-action-sheet-border-radius);background:var(--s-action-sheet-bg);touch-action:none}.s-action-sheet__description{position:relative;padding:var(--s-action-sheet-description-padding);font-size:var(--s-action-sheet-description-font-size);text-align:center;color:var(--s-action-sheet-description-color)}.s-action-sheet__description:after{position:absolute;z-index:1;pointer-events:none;touch-action:none;opacity:1;content:"";left:0;right:0;transform:scaleY(0.5);bottom:0;border-bottom:var(--s-border-width) var(--s-border-style) var(--s-action-sheet-border-color);transform-origin:bottom center}.s-action-sheet__gap{height:var(--s-action-sheet-gap-height);background:var(--s-action-sheet-gap-bg)}.s-action-sheet__item{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--s-action-sheet-item-min-height);padding:var(--s-action-sheet-item-padding);cursor:pointer}.s-action-sheet__item:not(:first-child)::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-action-sheet-border-color);transform-origin:top center}.s-action-sheet__item:is(.is-disabled) .s-action-sheet__item-label{color:var(--s-action-sheet-item-color-disabled)}.s-action-sheet__item:is(.is-disabled,.is-loading){cursor:not-allowed}.s-action-sheet__item:not(.is-disabled,.is-loading):active{background:var(--s-action-sheet-bg-active)}.s-action-sheet__item-label{font-size:var(--s-action-sheet-item-label-font-size);line-height:var(--s-action-sheet-item-label-line-height);color:var(--s-action-sheet-item-label-color)}.s-action-sheet__item-description{margin-top:var(--s-action-sheet-item-description-margin-top);font-size:var(--s-action-sheet-item-description-font-size);line-height:var(--s-action-sheet-item-description-line-height);color:var(--s-action-sheet-item-description-color)}.s-action-sheet__loading{display:flex;font-size:var(--s-action-sheet-loading-font-size);color:var(--s-action-sheet-loading-color)}.s-action-sheet__cancel{display:flex;justify-content:center;align-items:center;min-height:var(--s-action-sheet-cancel-min-height);padding:var(--s-action-sheet-cancel-padding);font-size:var(--s-action-sheet-cancel-font-size);line-height:var(--s-action-sheet-cancel-line-height);color:var(--s-action-sheet-cancel-color);cursor:pointer}.s-action-sheet__cancel:active{background:var(--s-action-sheet-bg-active)}.s-action-sheet--headless .s-action-sheet__item:first-child{border-top-left-radius:var(--s-action-sheet-border-radius);border-top-right-radius:var(--s-action-sheet-border-radius)}

package/components/action-sheet/index.d.ts

@@ -0,0 +1,9 @@
+import { type EnhancedComponent } from '../../utils';
+import _ActionSheet from './action-sheet.vue';
+import _ActionSheetItem from './action-sheet-item.vue';
+export declare const ActionSheet: EnhancedComponent<typeof _ActionSheet>;
+export declare const ActionSheetItem: EnhancedComponent<typeof _ActionSheetItem>;
+export default ActionSheet;
+export type { ActionSheetProps, ActionSheetEmits, ActionSheetSlots, ActionSheetItemProps, ActionSheetItemEmits, ActionSheetItemSlots, ActionSheetBeforeClose, } from './common';
+export * from './imperative';
+export type { ActionSheetContext } from './context';

package/components/action-sheet/index.js

@@ -0,0 +1,9 @@
+import { enhanceComponent } from "../../utils/component.js";
+import action_sheet_item_default from "./action-sheet-item.js";
+import action_sheet_default from "./action-sheet.js";
+import { actionSheet, createActionSheet } from "./imperative.js";
+//#region packages/sard/components/action-sheet/index.ts
+const ActionSheet = enhanceComponent(action_sheet_default);
+const ActionSheetItem = enhanceComponent(action_sheet_item_default);
+//#endregion
+export { ActionSheet, ActionSheet as default, ActionSheetItem, actionSheet, createActionSheet };

package/components/alert/alert.d.ts

@@ -0,0 +1,22 @@
+import { type AlertProps, type AlertSlots } from './common';
+type __VLS_Slots = AlertSlots;
+declare const __VLS_base: import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    background: string;
+    type: "primary" | "success" | "warning" | "danger";
+    color: string;
+    showIcon: boolean;
+    closable: boolean;
+    square: 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/alert/alert.js

@@ -0,0 +1,78 @@
+import { createBem } from "../../utils/bem.js";
+import { defaultAlertProps } from "./common.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref } from "vue";
+import { CheckCircleFill, Close, InfoCircleFill, WarningFill, XCircleFill } from "@sard/icons";
+//#region packages/sard/components/alert/alert.vue
+var alert_default = /*@__PURE__*/ defineComponent({
+	__name: "alert",
+	props: /*@__PURE__*/ mergeDefaults({
+		showIcon: {
+			type: Boolean,
+			required: false
+		},
+		closable: {
+			type: Boolean,
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		color: {
+			type: String,
+			required: false
+		},
+		background: {
+			type: String,
+			required: false
+		},
+		square: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultAlertProps),
+	emits: ["close"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("alert");
+		const visible = ref(true);
+		const onClose = () => {
+			visible.value = false;
+			emit("close");
+		};
+		const alertClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m(props.type),
+				bem.m("square", props.square)
+			];
+		});
+		const alertStyle = computed(() => {
+			return {
+				color: props.color,
+				background: props.background
+			};
+		});
+		return (_ctx, _cache) => {
+			return visible.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(alertClass.value),
+				style: normalizeStyle(alertStyle.value)
+			}, [
+				__props.showIcon ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(bem).e("icon"))
+				}, [renderSlot(_ctx.$slots, "icon", {}, () => [__props.type === "primary" ? (openBlock(), createBlock(unref(InfoCircleFill), { key: 0 })) : __props.type === "success" ? (openBlock(), createBlock(unref(CheckCircleFill), { key: 1 })) : __props.type === "warning" ? (openBlock(), createBlock(unref(WarningFill), { key: 2 })) : __props.type === "danger" ? (openBlock(), createBlock(unref(XCircleFill), { key: 3 })) : createCommentVNode("v-if", true)])], 2)) : createCommentVNode("v-if", true),
+				createElementVNode("div", { class: normalizeClass(unref(bem).e("content")) }, [renderSlot(_ctx.$slots, "default")], 2),
+				__props.closable ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(bem).e("close")),
+					onClick: onClose
+				}, [createVNode(unref(Close))], 2)) : createCommentVNode("v-if", true)
+			], 6)) : createCommentVNode("v-if", true);
+		};
+	}
+});
+//#endregion
+export { alert_default as default };

package/components/alert/common.d.ts

@@ -0,0 +1,17 @@
+import { type DefaultProps } from '../config';
+export interface AlertProps {
+    showIcon?: boolean;
+    closable?: boolean;
+    type?: 'primary' | 'success' | 'warning' | 'danger';
+    color?: string;
+    background?: string;
+    square?: boolean;
+}
+export declare const defaultAlertProps: DefaultProps<AlertProps>;
+export interface AlertSlots {
+    default?(props: Record<string, never>): any;
+    icon?(props: Record<string, never>): any;
+}
+export interface AlertEmits {
+    (e: 'close'): void;
+}

package/components/alert/common.js

@@ -0,0 +1,4 @@
+//#region packages/sard/components/alert/common.ts
+const defaultAlertProps = { type: "primary" };
+//#endregion
+export { defaultAlertProps };

package/components/alert/index.css

@@ -0,0 +1 @@
+:root{--s-alert-padding:var(--s-content-padding);--s-alert-font-size:var(--s-font-size);--s-alert-border-radius:var(--s-border-radius);--s-alert-icon-margin-end:var(--s-size-xs);--s-alert-close-font-size:var(--s-font-size);--s-alert-close-padding:var(--s-size-xs)}.s-alert{display:flex;align-items:center;padding:var(--s-alert-padding);font-size:var(--s-alert-font-size);border-radius:var(--s-alert-border-radius)}.s-alert--primary{color:var(--s-color-primary);background:rgba(var(--s-color-primary-rgb), var(--s-opacity-theme-bg))}.s-alert--success{color:var(--s-color-success);background:rgba(var(--s-color-success-rgb), var(--s-opacity-theme-bg))}.s-alert--warning{color:var(--s-color-warning);background:rgba(var(--s-color-warning-rgb), var(--s-opacity-theme-bg))}.s-alert--danger{color:var(--s-color-danger);background:rgba(var(--s-color-danger-rgb), var(--s-opacity-theme-bg))}.s-alert__icon{margin-inline-end:var(--s-alert-icon-margin-end);line-height:1}.s-alert__content{flex:1;overflow:hidden}.s-alert__close{font-size:var(--s-alert-close-font-size);padding:var(--s-alert-close-padding);margin:calc(var(--s-alert-close-padding)*-1);margin-inline-start:0;cursor:pointer}.s-alert--square{border-radius:0}

package/components/alert/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Alert from './alert.vue';
+export declare const Alert: EnhancedComponent<typeof _Alert>;
+export default Alert;
+export type { AlertProps, AlertSlots, AlertEmits } from './common';

package/components/alert/index.js

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