sard 1.0.0 → 1.0.2

package/components/tabs/tabs.js

@@ -0,0 +1,135 @@
+import { createBem } from "../../utils/bem.js";
+import { scrollToTarget } from "../../utils/geometry.js";
+import { useResizeObserver } from "../../use/useResizeObserver.js";
+import { defaultTabsProps, tabContextKey } from "./common.js";
+import tab_default from "./tab.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeDefaults, mergeProps, normalizeClass, normalizeStyle, onMounted, openBlock, provide, reactive, ref, renderList, renderSlot, unref, useModel, useTemplateRef, watch } from "vue";
+//#region packages/sard/components/tabs/tabs.vue
+var tabs_default = /*@__PURE__*/ defineComponent({
+	__name: "tabs",
+	props: /*@__PURE__*/ mergeDefaults({
+		modelValue: {
+			type: null,
+			required: false
+		},
+		options: {
+			type: Array,
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		scrollable: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultTabsProps),
+	emits: ["update:modelValue", "change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("tabs");
+		const innerValue = useModel(props, "modelValue");
+		const members = [];
+		provide(tabContextKey, reactive({
+			value: innerValue,
+			addMember(member) {
+				members.push(member);
+			},
+			removeMember(member) {
+				const index = members.indexOf(member);
+				if (index !== -1) members.splice(index, 1);
+			},
+			select(member) {
+				if (innerValue.value !== member.value) {
+					innerValue.value = member.value;
+					emit("change", member.value);
+				}
+			}
+		}));
+		const lineLeft = ref(0);
+		const lineAnimated = ref(false);
+		const wrapperRef = useTemplateRef("wrapper");
+		function updateLineLeft(animated) {
+			const member = members.find((item) => item.value === innerValue.value);
+			if (member) {
+				const tabRect = member.el.getBoundingClientRect();
+				const wrapperRect = wrapperRef.value.getBoundingClientRect();
+				lineLeft.value = tabRect.left - wrapperRect.left + tabRect.width / 2;
+				lineAnimated.value = false;
+				if (animated) lineAnimated.value = true;
+			}
+		}
+		const onLineTransitionEnd = () => {
+			lineAnimated.value = false;
+		};
+		onMounted(() => {
+			updateLineLeft(false);
+		});
+		watch([
+			innerValue,
+			() => props.type,
+			() => props.options
+		], () => {
+			if (props.type === "line") updateLineLeft(true);
+		}, { flush: "post" });
+		const wrapperSize = useResizeObserver(wrapperRef);
+		watch(() => wrapperSize.width, (width, oldWidth) => {
+			if (Math.abs(width - oldWidth) > 1) updateLineLeft(false);
+		});
+		const lineStyle = computed(() => {
+			return {
+				left: lineLeft.value + "px",
+				transitionDuration: lineAnimated.value ? "" : "0s"
+			};
+		});
+		const scrollRef = useTemplateRef("scroll");
+		const needScrollToTab = computed(() => {
+			return props.type === "line" || props.type === "pill" && props.scrollable;
+		});
+		const scrollToTab = (animated) => {
+			const member = members.find((item) => item.value === innerValue.value);
+			if (!member) return;
+			scrollToTarget(scrollRef.value, member.el, {
+				animated,
+				position: "center"
+			});
+		};
+		onMounted(() => {
+			if (needScrollToTab.value) scrollToTab(false);
+		});
+		watch([
+			innerValue,
+			() => props.type,
+			() => props.options
+		], () => {
+			if (needScrollToTab.value) scrollToTab(true);
+		}, { flush: "post" });
+		const tabsClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m(props.type),
+				bem.m("scrollable", props.scrollable)
+			];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref: "scroll",
+				class: normalizeClass(tabsClass.value)
+			}, [createElementVNode("div", {
+				ref: "wrapper",
+				class: normalizeClass(unref(bem).e("wrapper"))
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (item, index) => {
+				return openBlock(), createBlock(tab_default, mergeProps({ key: index }, { ref_for: true }, item), null, 16);
+			}), 128))]), __props.type === "line" ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(bem).e("line")),
+				style: normalizeStyle(lineStyle.value),
+				onTransitionend: onLineTransitionEnd
+			}, [renderSlot(_ctx.$slots, "line")], 38)) : createCommentVNode("v-if", true)], 2)], 2);
+		};
+	}
+});
+//#endregion
+export { tabs_default as default };

package/components/tag/common.d.ts

@@ -0,0 +1,17 @@
+import { type DefaultProps } from '../config';
+export interface TagProps {
+    color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
+    variant?: 'filled' | 'solid' | 'outlined';
+    round?: boolean;
+    mark?: 'left' | 'right';
+    size?: 'small' | 'medium' | 'large';
+    closable?: boolean;
+}
+export declare const defaultTagProps: DefaultProps<TagProps>;
+export interface TagSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface TagEmits {
+    (e: 'click', event: MouseEvent): void;
+    (e: 'close', event: any): void;
+}

package/components/tag/common.js

@@ -0,0 +1,8 @@
+//#region packages/sard/components/tag/common.ts
+const defaultTagProps = {
+	color: "default",
+	variant: "filled",
+	size: "medium"
+};
+//#endregion
+export { defaultTagProps };

package/components/tag/index.css

@@ -0,0 +1 @@
+:root{--s-tag-color:var(--s-white);--s-tag-height-sm:16px;--s-tag-padding-sm:0 4px;--s-tag-font-size-sm:var(--s-font-size-xs);--s-tag-border-radius-sm:var(--s-border-radius-sm);--s-tag-height:20px;--s-tag-padding:0 6px;--s-tag-font-size:var(--s-font-size-sm);--s-tag-border-radius:var(--s-border-radius-sm);--s-tag-height-lg:24px;--s-tag-padding-lg:0 8px;--s-tag-font-size-lg:var(--s-font-size);--s-tag-border-radius-lg:var(--s-border-radius);--s-tag-close-margin-start:var(--s-size-2xs)}.s-tag{display:inline-flex;justify-content:center;align-items:center;align-self:center;border:1px solid rgba(0,0,0,0);color:var(--s-tag-color);line-height:var(--s-line-height-tight)}.s-tag--solid-default{color:var(--s-white);background-color:var(--s-gray-600)}.s-tag--outlined-default{color:var(--s-gray-600);background-color:rgba(0,0,0,0);border:1px solid var(--s-gray-600)}.s-tag--filled-default{color:var(--s-gray-600);background-color:rgba(var(--s-gray-600-rgb), var(--s-opacity-theme-bg))}.s-tag--solid-primary{color:var(--s-white);background-color:var(--s-color-primary)}.s-tag--outlined-primary{color:var(--s-color-primary);background-color:rgba(0,0,0,0);border:1px solid var(--s-color-primary)}.s-tag--filled-primary{color:var(--s-color-primary);background-color:rgba(var(--s-color-primary-rgb), var(--s-opacity-theme-bg))}.s-tag--solid-success{color:var(--s-white);background-color:var(--s-color-success)}.s-tag--outlined-success{color:var(--s-color-success);background-color:rgba(0,0,0,0);border:1px solid var(--s-color-success)}.s-tag--filled-success{color:var(--s-color-success);background-color:rgba(var(--s-color-success-rgb), var(--s-opacity-theme-bg))}.s-tag--solid-warning{color:var(--s-white);background-color:var(--s-color-warning)}.s-tag--outlined-warning{color:var(--s-color-warning);background-color:rgba(0,0,0,0);border:1px solid var(--s-color-warning)}.s-tag--filled-warning{color:var(--s-color-warning);background-color:rgba(var(--s-color-warning-rgb), var(--s-opacity-theme-bg))}.s-tag--solid-danger{color:var(--s-white);background-color:var(--s-color-danger)}.s-tag--outlined-danger{color:var(--s-color-danger);background-color:rgba(0,0,0,0);border:1px solid var(--s-color-danger)}.s-tag--filled-danger{color:var(--s-color-danger);background-color:rgba(var(--s-color-danger-rgb), var(--s-opacity-theme-bg))}.s-tag--small{height:var(--s-tag-height-sm);padding:var(--s-tag-padding-sm);font-size:var(--s-tag-font-size-sm);border-radius:var(--s-tag-border-radius-sm)}.s-tag--medium{height:var(--s-tag-height);padding:var(--s-tag-padding);font-size:var(--s-tag-font-size);border-radius:var(--s-tag-border-radius)}.s-tag--large{height:var(--s-tag-height-lg);padding:var(--s-tag-padding-lg);font-size:var(--s-tag-font-size-lg);border-radius:var(--s-tag-border-radius-lg)}.s-tag--round{border-radius:var(--s-border-radius-full)}:root:not([dir=rtl]) .s-tag--mark-left{border-top-left-radius:var(--s-border-radius-full);border-bottom-left-radius:var(--s-border-radius-full)}:root[dir=rtl] .s-tag--mark-left{border-top-right-radius:var(--s-border-radius-full);border-bottom-right-radius:var(--s-border-radius-full)}:root:not([dir=rtl]) .s-tag--mark-right{border-top-right-radius:var(--s-border-radius-full);border-bottom-right-radius:var(--s-border-radius-full)}:root[dir=rtl] .s-tag--mark-right{border-top-left-radius:var(--s-border-radius-full);border-bottom-left-radius:var(--s-border-radius-full)}.s-tag__close{display:flex;justify-content:center;align-items:center;margin-inline-start:var(--s-tag-close-margin-start);cursor:pointer}

package/components/tag/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Tag from './tag.vue';
+export declare const Tag: EnhancedComponent<typeof _Tag>;
+export default Tag;
+export type { TagProps, TagSlots, TagEmits } from './common';

package/components/tag/index.js

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

package/components/tag/tag.d.ts

@@ -0,0 +1,24 @@
+import { type TagProps, type TagSlots } from './common';
+type __VLS_Slots = TagSlots;
+declare const __VLS_base: import("vue").DefineComponent<TagProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: MouseEvent) => any;
+    close: (event: any) => any;
+}, string, import("vue").PublicProps, Readonly<TagProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    onClose?: ((event: any) => any) | undefined;
+}>, {
+    mark: "left" | "right";
+    size: "small" | "medium" | "large";
+    color: "default" | "primary" | "success" | "warning" | "danger";
+    closable: boolean;
+    round: boolean;
+    variant: "filled" | "solid" | "outlined";
+}, {}, {}, {}, 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/tag/tag.js

@@ -0,0 +1,60 @@
+import { createBem } from "../../utils/bem.js";
+import { defaultTagProps } from "./common.js";
+import { computed, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeDefaults, normalizeClass, openBlock, renderSlot, unref, withModifiers } from "vue";
+import { Close } from "@sard/icons";
+//#region packages/sard/components/tag/tag.vue
+var tag_default = /*@__PURE__*/ defineComponent({
+	__name: "tag",
+	props: /*@__PURE__*/ mergeDefaults({
+		color: {
+			type: String,
+			required: false
+		},
+		variant: {
+			type: String,
+			required: false
+		},
+		round: {
+			type: Boolean,
+			required: false
+		},
+		mark: {
+			type: String,
+			required: false
+		},
+		size: {
+			type: String,
+			required: false
+		},
+		closable: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultTagProps),
+	emits: ["click", "close"],
+	setup(__props) {
+		const props = __props;
+		const bem = createBem("tag");
+		const tagClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m(`${props.variant}-${props.color}`),
+				bem.m(props.size),
+				bem.m("round", props.round),
+				bem.m(`mark-${props.mark}`, !!props.mark)
+			];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(tagClass.value),
+				onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("click", $event))
+			}, [renderSlot(_ctx.$slots, "default"), __props.closable ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(bem).e("close")),
+				onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.$emit("close", $event), ["stop"]))
+			}, [createVNode(unref(Close))], 2)) : createCommentVNode("v-if", true)], 2);
+		};
+	}
+});
+//#endregion
+export { tag_default as default };

package/components/text/common.d.ts

@@ -0,0 +1,16 @@
+import { type DefaultProps } from '../config';
+export interface TextProps {
+    color?: 'default' | 'secondary' | 'tertiary' | 'fourth' | 'primary' | 'success' | 'warning' | 'danger';
+    size?: 'small' | 'medium' | 'large';
+    truncated?: boolean;
+    lineClamp?: number;
+    tag?: string;
+}
+export declare const defaultTextProps: DefaultProps<TextProps>;
+export interface TextSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface TextEmits {
+}
+export interface TextExpose {
+}

package/components/text/common.js

@@ -0,0 +1,9 @@
+//#region packages/sard/components/text/common.ts
+const defaultTextProps = {
+	color: "default",
+	size: "medium",
+	truncated: false,
+	tag: "span"
+};
+//#endregion
+export { defaultTextProps };

package/components/text/index.css

@@ -0,0 +1 @@
+:root{--s-text-font-size-sm:var(--s-font-size-sm);--s-text-font-size:var(--s-font-size);--s-text-font-size-lg:var(--s-font-size-lg)}.s-text--default{color:var(--s-text-color-primary)}.s-text--secondary{color:var(--s-text-color-secondary)}.s-text--tertiary{color:var(--s-text-color-tertiary)}.s-text--fourth{color:var(--s-text-color-fourth)}.s-text--primary{color:var(--s-color-primary)}.s-text--success{color:var(--s-color-success)}.s-text--warning{color:var(--s-color-warning)}.s-text--danger{color:var(--s-color-danger)}.s-text--small{font-size:var(--s-text-font-size-sm)}.s-text--medium{font-size:var(--s-text-font-size)}.s-text--large{font-size:var(--s-text-font-size-lg)}.s-text--truncated{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.s-text--line-clamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}

package/components/text/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Text from './text.vue';
+export declare const Text: EnhancedComponent<typeof _Text>;
+export default Text;
+export type { TextProps, TextSlots, TextEmits } from './common';

package/components/text/index.js

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

package/components/text/text.d.ts

@@ -0,0 +1,17 @@
+import { type TextProps, type TextSlots } from './common';
+type __VLS_Slots = TextSlots;
+declare const __VLS_base: import("vue").DefineComponent<TextProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TextProps> & Readonly<{}>, {
+    size: "small" | "medium" | "large";
+    color: "default" | "secondary" | "tertiary" | "fourth" | "primary" | "success" | "warning" | "danger";
+    tag: string;
+    truncated: boolean;
+    lineClamp: number;
+}, {}, {}, {}, 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/text/text.js

@@ -0,0 +1,57 @@
+import { createBem } from "../../utils/bem.js";
+import { defaultTextProps } from "./common.js";
+import { computed, createBlock, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, renderSlot, resolveDynamicComponent, withCtx } from "vue";
+//#region packages/sard/components/text/text.vue
+var text_default = /*@__PURE__*/ defineComponent({
+	__name: "text",
+	props: /*@__PURE__*/ mergeDefaults({
+		color: {
+			type: String,
+			required: false
+		},
+		size: {
+			type: String,
+			required: false
+		},
+		truncated: {
+			type: Boolean,
+			required: false
+		},
+		lineClamp: {
+			type: Number,
+			required: false
+		},
+		tag: {
+			type: String,
+			required: false
+		}
+	}, defaultTextProps),
+	setup(__props) {
+		const props = __props;
+		const bem = createBem("text");
+		const textClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m(props.color),
+				bem.m(props.size),
+				bem.m("truncated", props.truncated),
+				bem.m("line-clamp", !!(props.lineClamp && props.lineClamp > 0))
+			];
+		});
+		const textStyle = computed(() => {
+			if (props.lineClamp && props.lineClamp > 0) return { "-webkit-line-clamp": props.lineClamp };
+			return {};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(props.tag), {
+				class: normalizeClass(textClass.value),
+				style: normalizeStyle(textStyle.value)
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["class", "style"]);
+		};
+	}
+});
+//#endregion
+export { text_default as default };

package/components/timeline/common.d.ts

@@ -0,0 +1,15 @@
+export interface TimelineProps {
+}
+export interface TimelineSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface TimelineItemProps {
+    title?: string;
+    time?: string;
+}
+export interface TimelineItemSlots {
+    default?(props: Record<string, never>): any;
+    icon?(props: Record<string, never>): any;
+    title?(props: Record<string, never>): any;
+    time?(props: Record<string, never>): any;
+}

package/components/timeline/index.css

@@ -0,0 +1 @@
+:root{--s-timeline-item-header-width:48px;--s-timeline-item-line-width:1px;--s-timeline-item-line-dotted-before-height:7px;--s-timeline-item-line-color:var(--s-border-color);--s-timeline-item-icon-wrapper-margin-y:3px;--s-timeline-item-icon-font-size:24px;--s-timeline-item-icon-color:var(--s-fill-color);--s-timeline-item-dot-size:8px;--s-timeline-item-dot-bg:var(--s-fill-color-secondary);--s-timeline-item-body-padding-top:3px;--s-timeline-item-body-padding-bottom:24px;--s-timeline-item-title-margin-bottom:6px;--s-timeline-item-title-font-size:var(--s-font-size-lg);--s-timeline-item-description-margin-bottom:6px;--s-timeline-item-description-font-size:var(--s-font-size);--s-timeline-item-time-font-size:var(--s-font-size-sm);--s-timeline-item-time-color:var(--s-text-color-tertiary)}.s-timeline-item{display:flex}.s-timeline-item:first-child .s-timeline-item__line--before{opacity:0}.s-timeline-item:last-child .s-timeline-item__line--after{opacity:0}.s-timeline-item__header{display:flex;flex-direction:column;align-items:center;flex:none;width:var(--s-timeline-item-header-width)}.s-timeline-item__icon-wrapper{margin:var(--s-timeline-item-icon-wrapper-margin-y) 0}.s-timeline-item__icon{font-size:var(--s-timeline-item-icon-font-size);line-height:var(--s-line-height-none);color:var(--s-timeline-item-icon-color)}.s-timeline-item__dot{width:var(--s-timeline-item-dot-size);height:var(--s-timeline-item-dot-size);border-radius:50%;background:var(--s-timeline-item-dot-bg)}.s-timeline-item__line{width:var(--s-timeline-item-line-width);background:var(--s-timeline-item-line-color)}.s-timeline-item__line--after{flex:1}.s-timeline-item--dotted .s-timeline-item__line--before{height:var(--s-timeline-item-line-dotted-before-height)}.s-timeline-item__body{flex:1;padding-top:var(--s-timeline-item-body-padding-top);padding-bottom:var(--s-timeline-item-body-padding-bottom)}.s-timeline-item__title{margin-bottom:var(--s-timeline-item-title-margin-bottom);font-size:var(--s-timeline-item-title-font-size);font-weight:var(--s-font-weight-bold)}.s-timeline-item__description{margin-bottom:var(--s-timeline-item-description-margin-bottom);font-size:var(--s-timeline-item-description-font-size)}.s-timeline-item__time{font-size:var(--s-timeline-item-time-font-size);color:var(--s-timeline-item-time-color)}

package/components/timeline/index.d.ts

@@ -0,0 +1,7 @@
+import { type EnhancedComponent } from '../../utils';
+import _Timeline from './timeline.vue';
+import _TimelineItem from './timeline-item.vue';
+export declare const Timeline: EnhancedComponent<typeof _Timeline>;
+export declare const TimelineItem: EnhancedComponent<typeof _TimelineItem>;
+export default Timeline;
+export type { TimelineProps, TimelineSlots } from './common';

package/components/timeline/index.js

@@ -0,0 +1,8 @@
+import { enhanceComponent } from "../../utils/component.js";
+import timeline_default from "./timeline.js";
+import timeline_item_default from "./timeline-item.js";
+//#region packages/sard/components/timeline/index.ts
+const Timeline = enhanceComponent(timeline_default);
+const TimelineItem = enhanceComponent(timeline_item_default);
+//#endregion
+export { Timeline, Timeline as default, TimelineItem };

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

@@ -0,0 +1,11 @@
+import { type TimelineItemProps, type TimelineItemSlots } from './common';
+type __VLS_Slots = TimelineItemSlots;
+declare const __VLS_base: import("vue").DefineComponent<TimelineItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TimelineItemProps> & Readonly<{}>, {}, {}, {}, {}, 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/timeline/timeline-item.js

@@ -0,0 +1,48 @@
+import { createBem } from "../../utils/bem.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useSlots } from "vue";
+//#region packages/sard/components/timeline/timeline-item.vue
+var timeline_item_default = /*@__PURE__*/ defineComponent({
+	__name: "timeline-item",
+	props: {
+		title: {
+			type: String,
+			required: false
+		},
+		time: {
+			type: String,
+			required: false
+		}
+	},
+	setup(__props) {
+		const slots = useSlots();
+		const bem = createBem("timeline-item");
+		const itemClass = computed(() => {
+			return [bem.b(), bem.m("dotted", !slots.icon)];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(itemClass.value) }, [createElementVNode("div", { class: normalizeClass(unref(bem).e("header")) }, [
+				createElementVNode("div", { class: normalizeClass([unref(bem).e("line"), unref(bem).em("line", "before")]) }, null, 2),
+				createElementVNode("div", { class: normalizeClass(unref(bem).e("icon-wrapper")) }, [slots.icon ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(bem).e("icon"))
+				}, [renderSlot(_ctx.$slots, "icon")], 2)) : (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(bem).e("dot"))
+				}, null, 2))], 2),
+				createElementVNode("div", { class: normalizeClass([unref(bem).e("line"), unref(bem).em("line", "after")]) }, null, 2)
+			], 2), createElementVNode("div", { class: normalizeClass(unref(bem).e("body")) }, [
+				__props.title || slots.title ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(bem).e("title"))
+				}, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])], 2)) : createCommentVNode("v-if", true),
+				slots.default ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(bem).e("description"))
+				}, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("v-if", true),
+				createElementVNode("div", { class: normalizeClass(unref(bem).e("time")) }, [renderSlot(_ctx.$slots, "time", {}, () => [createTextVNode(toDisplayString(__props.time), 1)])], 2)
+			], 2)], 2);
+		};
+	}
+});
+//#endregion
+export { timeline_item_default as default };

package/components/timeline/timeline.d.ts

@@ -0,0 +1,11 @@
+import { type TimelineProps, type TimelineSlots } from './common';
+type __VLS_Slots = TimelineSlots;
+declare const __VLS_base: import("vue").DefineComponent<TimelineProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TimelineProps> & Readonly<{}>, {}, {}, {}, {}, 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/timeline/timeline.js

@@ -0,0 +1,14 @@
+import { createBem } from "../../utils/bem.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+//#region packages/sard/components/timeline/timeline.vue
+var timeline_default = /*@__PURE__*/ defineComponent({
+	__name: "timeline",
+	setup(__props) {
+		const bem = createBem("timeline");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(bem).b()) }, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+export { timeline_default as default };

package/components/toast/common.d.ts

@@ -0,0 +1,24 @@
+import { type DefaultProps } from '../config';
+import type { MotionEmits } from '../motion';
+export interface ToastProps {
+    type?: 'text' | 'loading' | 'success' | 'fail';
+    title?: string | number;
+    visible?: boolean;
+    position?: 'top' | 'center' | 'bottom';
+    overlay?: boolean;
+    transparent?: boolean;
+    timeout?: number;
+}
+export declare const defaultToastProps: DefaultProps<ToastProps>;
+export interface ToastSlots {
+    default?(props?: any): any;
+    icon?(props?: any): any;
+    title?(props?: any): any;
+}
+export interface ToastEmits extends MotionEmits {
+    (e: 'update:visible', visible: boolean): void;
+}
+export interface ToastExpose {
+    reHideLater: () => void;
+    cancelHide: () => void;
+}

package/components/toast/common.js

@@ -0,0 +1,10 @@
+//#region packages/sard/components/toast/common.ts
+const defaultToastProps = {
+	type: "text",
+	position: "center",
+	overlay: false,
+	transparent: false,
+	timeout: 1500
+};
+//#endregion
+export { defaultToastProps };

package/components/toast/imperative.d.ts

@@ -0,0 +1,18 @@
+import type { TransitionHookCallbacks } from '../popup/common';
+import type { ToastProps } from './common';
+export interface ToastOptions extends ToastProps, TransitionHookCallbacks {
+}
+export interface ToastShowFunction {
+    (optionsOrTitle?: string | number | ToastOptions, options?: ToastOptions, internalType?: ToastOptions['type']): void;
+}
+export interface ToastSimpleShowFunction {
+    (optionsOrTitle?: string | number | ToastOptions, options?: ToastOptions): void;
+}
+export type ToastFunction = ToastSimpleShowFunction & {
+    success: ToastSimpleShowFunction;
+    fail: ToastSimpleShowFunction;
+    loading: ToastSimpleShowFunction;
+    hide: () => void;
+};
+export declare function createToast(defaultOptions?: ToastOptions): ToastFunction;
+export declare const toast: ToastFunction;

package/components/toast/imperative.js

@@ -0,0 +1,43 @@
+import { isConfigObject } from "../../utils/is.js";
+import { createImperativeComponent } from "../../utils/createImperativeComponent.js";
+import toast_default from "./toast.js";
+//#region packages/sard/components/toast/imperative.ts
+function createToast(defaultOptions) {
+	const imperative = createImperativeComponent(toast_default, defaultOptions, {
+		onShow(expose) {
+			expose.reHideLater();
+		},
+		onHide(expose) {
+			expose.cancelHide();
+		}
+	});
+	const show = (optionsOrTitle, options = {}, internalType) => {
+		if (isConfigObject(optionsOrTitle)) options = optionsOrTitle;
+		else options.title = optionsOrTitle;
+		options.type = internalType;
+		imperative.show(options);
+	};
+	const success = (optionsOrTitle, options) => {
+		show(optionsOrTitle, options, "success");
+	};
+	const fail = (optionsOrTitle, options) => {
+		show(optionsOrTitle, options, "fail");
+	};
+	const loading = (optionsOrTitle, options) => {
+		show(optionsOrTitle, options, "loading");
+	};
+	const hide = () => {
+		imperative.hide();
+	};
+	const toast = (optionsOrTitle, options) => {
+		show(optionsOrTitle, options, "text");
+	};
+	toast.success = success;
+	toast.fail = fail;
+	toast.loading = loading;
+	toast.hide = hide;
+	return toast;
+}
+const toast = createToast();
+//#endregion
+export { createToast, toast };

package/components/toast/index.css

@@ -0,0 +1 @@
+:root{--s-toast-top:10%;--s-toast-bottom:10%;--s-toast-font-size:var(--s-font-size);--s-toast-width:120px;--s-toast-min-height-icon-only:var(--s-toast-width);--s-toast-padding-x:var(--s-size);--s-toast-padding-y:var(--s-size);--s-toast-border-radius:var(--s-border-radius-lg);--s-toast-color:var(--s-white);--s-toast-bg:var(--s-overlay-illegible);--s-toast-text-max-width:80%;--s-toast-text-padding-y:10px;--s-toast-icon-margin-bottom:var(--s-size-xs);--s-toast-icon-size:36px;--s-toast-icon-loading-size:30px;--s-toast-title-font-size:var(--s-toast-font-size)}.s-toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--s-toast-padding-y) var(--s-toast-padding-x);border-radius:var(--s-toast-border-radius);background:var(--s-toast-bg);touch-action:none}.s-toast__popup{width:max-content;max-width:var(--s-toast-text-max-width)}.s-toast__popup--top{top:var(--s-toast-top);bottom:auto}.s-toast__popup--bottom{top:auto;bottom:var(--s-toast-bottom)}.s-toast__icon{display:flex;justify-content:center;align-items:center;width:var(--s-toast-icon-size);height:var(--s-toast-icon-size);margin-bottom:var(--s-toast-icon-margin-bottom);text-align:center;font-size:var(--s-toast-icon-size);color:var(--s-toast-color)}.s-toast__icon:is(.is-loading){font-size:var(--s-toast-icon-loading-size)}.s-toast__title{font-size:var(--s-toast-title-font-size);line-height:var(--s-line-height-normal);text-align:center;color:var(--s-toast-color)}.s-toast:is(.is-text){padding-top:var(--s-toast-text-padding-y);padding-bottom:var(--s-toast-text-padding-y);word-break:break-all}.s-toast:not(.is-text){width:var(--s-toast-width);min-height:var(--s-toast-min-height-icon-only)}

package/components/toast/index.d.ts

@@ -0,0 +1,6 @@
+import { type EnhancedComponent } from '../../utils';
+import _Toast from './toast.vue';
+export declare const Toast: EnhancedComponent<typeof _Toast>;
+export default Toast;
+export type { ToastProps, ToastSlots, ToastEmits, ToastExpose } from './common';
+export * from './imperative';

package/components/toast/index.js

@@ -0,0 +1,7 @@
+import { enhanceComponent } from "../../utils/component.js";
+import toast_default from "./toast.js";
+import { createToast, toast } from "./imperative.js";
+//#region packages/sard/components/toast/index.ts
+const Toast = enhanceComponent(toast_default);
+//#endregion
+export { Toast, Toast as default, createToast, toast };