sard 1.0.0 → 1.0.2

package/components/tabbar/tabbar.js

@@ -0,0 +1,67 @@
+import { createBem } from "../../utils/bem.js";
+import { defaultTabbarProps, tabbarContextKey } from "./common.js";
+import { computed, createElementBlock, defineComponent, mergeDefaults, normalizeClass, openBlock, provide, reactive, ref, renderSlot, toRef, watch } from "vue";
+//#region packages/sard/components/tabbar/tabbar.vue
+var tabbar_default = /*@__PURE__*/ defineComponent({
+	__name: "tabbar",
+	props: /*@__PURE__*/ mergeDefaults({
+		current: {
+			type: [Number, String],
+			required: false
+		},
+		color: {
+			type: String,
+			required: false
+		},
+		activeColor: {
+			type: String,
+			required: false
+		},
+		bordered: {
+			type: Boolean,
+			required: false
+		},
+		fixed: {
+			type: Boolean,
+			required: false
+		},
+		safeAreaInsetBottom: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultTabbarProps),
+	emits: ["update:current", "change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("tabbar");
+		const innerCurrent = ref(props.current);
+		watch(() => props.current, () => {
+			if (props.current !== innerCurrent.value) innerCurrent.value = props.current;
+		});
+		const select = (name) => {
+			innerCurrent.value = name;
+			emit("update:current", name);
+			emit("change", name);
+		};
+		provide(tabbarContextKey, reactive({
+			color: toRef(() => props.color),
+			activeColor: toRef(() => props.activeColor),
+			current: innerCurrent,
+			select
+		}));
+		const tabbarClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m("bordered", props.bordered),
+				bem.m("fixed", props.fixed),
+				bem.m("safe", props.safeAreaInsetBottom)
+			];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(tabbarClass.value) }, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+export { tabbar_default as default };

package/components/tabbar-pit/common.d.ts

@@ -0,0 +1,10 @@
+export interface TabbarPitProps {
+    safeAreaInsetBottom?: boolean;
+}
+export interface TabbarPitSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface TabbarPitEmits {
+}
+export interface TabbarPitExpose {
+}

package/components/tabbar-pit/index.css

@@ -0,0 +1 @@
+.s-tabbar-pit{height:var(--s-tabbar-height)}.s-tabbar-pit--safe{height:calc(var(--s-tabbar-height) + var(--s-safe-bottom))}

package/components/tabbar-pit/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _TabbarPit from './tabbar-pit.vue';
+export declare const TabbarPit: EnhancedComponent<typeof _TabbarPit>;
+export default TabbarPit;
+export type { TabbarPitProps, TabbarPitSlots, TabbarPitEmits, TabbarPitExpose } from './common';

package/components/tabbar-pit/index.js

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

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

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

@@ -0,0 +1,23 @@
+import { createBem } from "../../utils/bem.js";
+import { computed, createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot } from "vue";
+//#region packages/sard/components/tabbar-pit/tabbar-pit.vue
+var tabbar_pit_default = /*@__PURE__*/ defineComponent({
+	__name: "tabbar-pit",
+	props: { safeAreaInsetBottom: {
+		type: Boolean,
+		required: false
+	} },
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const bem = createBem("tabbar-pit");
+		__expose({});
+		const tabbarPitClass = computed(() => {
+			return [bem.b(), bem.m("safe", props.safeAreaInsetBottom)];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(tabbarPitClass.value) }, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+export { tabbar_pit_default as default };

package/components/table/common.d.ts

@@ -0,0 +1,113 @@
+import type { ClassValue, CSSProperties, InjectionKey } from 'vue';
+import { type DefaultProps } from '../config';
+export interface TableProps<T = any> {
+    columns?: TableColumnProps<T>[];
+    data?: T[];
+    height?: string | number;
+    maxHeight?: string | number;
+    striped?: boolean;
+    bordered?: boolean;
+    underlined?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    showHeader?: boolean;
+    rowClassName?: ClassValue | ((data: {
+        row: T;
+        rowIndex: number;
+    }) => ClassValue);
+    rowStyle?: CSSProperties | ((data: {
+        row: T;
+        rowIndex: number;
+    }) => CSSProperties);
+    cellClassName?: ClassValue | ((data: {
+        row: T;
+        column: TableColumnProps<T>;
+        rowIndex: number;
+        columnIndex: number;
+    }) => ClassValue);
+    cellStyle?: CSSProperties | ((data: {
+        row: T;
+        column: TableColumnProps<T>;
+        rowIndex: number;
+        columnIndex: number;
+    }) => CSSProperties);
+    headerRowClassName?: ClassValue | ((data: {
+        row: TableHeaderColumn[];
+        rowIndex: number;
+    }) => ClassValue);
+    headerRowStyle?: CSSProperties | ((data: {
+        row: TableHeaderColumn[];
+        rowIndex: number;
+    }) => CSSProperties);
+    headerCellClassName?: ClassValue | ((data: {
+        row: TableHeaderColumn[];
+        rowIndex: number;
+        column: TableColumnProps<T>;
+        columnIndex: number;
+    }) => ClassValue);
+    headerCellStyle?: CSSProperties | ((data: {
+        row: TableHeaderColumn[];
+        rowIndex: number;
+        column: TableColumnProps<T>;
+        columnIndex: number;
+    }) => CSSProperties);
+    spanMethod?: (data: {
+        row: T;
+        rowIndex: number;
+        column: TableColumnProps<T>;
+        columnIndex: number;
+    }) => [number, number] | {
+        rowspan: number;
+        colspan: number;
+    } | void;
+}
+export declare const defaultTableProps: DefaultProps<TableProps>;
+export interface TableSlots {
+    default?(props: Record<string, never>): any;
+    /** Dynamic named slots keyed by column.slot for custom cell rendering. */
+    [columnSlot: string]: ((props: any) => any) | undefined;
+}
+export interface TableContext {
+}
+export declare const tableContextKey: InjectionKey<TableContext>;
+export interface TableColumnProps<T = any> {
+    label?: string;
+    prop?: keyof T | (string & {});
+    width?: string | number;
+    minWidth?: string | number;
+    fixed?: boolean | 'start' | 'end';
+    renderHeader?: (data: {
+        column: TableColumnProps<T>;
+        index: number;
+    }) => any;
+    formatter?: (data: {
+        row: T;
+        column: TableColumnProps<T>;
+        rowIndex: number;
+        columnIndex: number;
+    }) => any;
+    /** Named slot for custom cell rendering in the parent template. */
+    slot?: string;
+    align?: 'start' | 'center' | 'end';
+    headerAlign?: 'start' | 'center' | 'end';
+    className?: string;
+    columns?: TableColumnProps[];
+    /**
+     * @private
+     */
+    fixedFirst?: boolean;
+    /**
+     * @private
+     */
+    fixedLast?: boolean;
+}
+export interface TableColProps {
+    index: number;
+    column: TableColumnProps;
+}
+export interface TableHeaderColumn {
+    column: TableColumnProps<any>;
+    rowspan: number;
+    colspan: number;
+    left: number;
+    right: number;
+}

package/components/table/common.js

@@ -0,0 +1,9 @@
+//#region packages/sard/components/table/common.ts
+const defaultTableProps = {
+	columns: () => [],
+	data: () => [],
+	showHeader: true
+};
+const tableContextKey = Symbol("tableContext");
+//#endregion
+export { defaultTableProps, tableContextKey };

package/components/table/index.css

@@ -0,0 +1 @@
+:root{--s-table-border-color:var(--s-border-color);--s-table-bg:var(--s-bg-color-container);--s-table-bg-striped:var(--s-fill-color-tertiary);--s-table-header-bg:var(--s-bg-color-container);--s-table-cell-padding-sm:4px 6px;--s-table-cell-padding:4px 8px;--s-table-cell-padding-lg:6px 12px;--s-table-font-size-sm:var(--s-font-size-sm);--s-table-font-size:var(--s-font-size);--s-table-font-size-lg:var(--s-font-size)}.s-table{position:relative;min-width:100%;background:var(--s-table-bg);font-size:var(--s-table-font-size)}.s-table__wrapper{height:100%}.s-table__scroll{height:100%;overflow:auto}.s-table table{box-sizing:border-box;table-layout:fixed;border-collapse:separate;border-spacing:0;min-width:100%}.s-table__header{position:sticky;top:0;z-index:2}.s-table__cell{box-sizing:border-box;position:relative;text-align:start;padding:var(--s-table-cell-padding);background:var(--s-table-bg)}.s-table__cell:is(th){background:var(--s-table-header-bg)}.s-table__cell:is(.is-fixed){position:sticky;z-index:1}.s-table--underlined .s-table__cell{border-bottom:1px solid var(--s-border-color)}.s-table--underlined::after{content:"";position:absolute;z-index:3;background:var(--s-border-color);bottom:0;left:0;width:100%;height:1px}.s-table--bordered .s-table__wrapper::before{content:"";position:absolute;z-index:3;background:var(--s-border-color);top:0;left:0;width:100%;height:1px}.s-table--bordered .s-table__wrapper::after{content:"";position:absolute;z-index:3;background:var(--s-border-color);top:0;left:0;width:1px;height:100%}.s-table--bordered table{border-top:1px solid var(--s-border-color);border-left:1px solid var(--s-border-color)}.s-table--bordered .s-table__cell{border-right:1px solid var(--s-border-color);border-bottom:1px solid var(--s-border-color)}.s-table--bordered::before{content:"";position:absolute;z-index:3;background:var(--s-border-color);top:0;right:0;width:1px;height:100%}.s-table--bordered::after{content:"";position:absolute;z-index:3;background:var(--s-border-color);bottom:0;left:0;width:100%;height:1px}.s-table--striped tr:nth-child(2n) .s-table__cell{background:var(--s-table-bg-striped)}.s-table__cell:is(.is-first,.is-last)::before{content:"";position:absolute;top:0;bottom:0;width:10px;overflow:hidden;pointer-events:none}.s-table--scroll-none .s-table__cell:is(.is-first)::before,.s-table--scroll-start .s-table__cell:is(.is-first)::before{inset-inline-end:100%;box-shadow:var(--s-box-shadow-right)}:root[dir=rtl] .s-table--scroll-none .s-table__cell:is(.is-first)::before,:root[dir=rtl] .s-table--scroll-start .s-table__cell:is(.is-first)::before{box-shadow:var(--s-box-shadow-left)}.s-table--scroll-none .s-table__cell:is(.is-last),.s-table--scroll-end .s-table__cell:is(.is-last){border-right:none}.s-table--scroll-none .s-table__cell:is(.is-last)::before,.s-table--scroll-end .s-table__cell:is(.is-last)::before{inset-inline-start:100%;box-shadow:var(--s-box-shadow-left)}:root[dir=rtl] .s-table--scroll-none .s-table__cell:is(.is-last)::before,:root[dir=rtl] .s-table--scroll-end .s-table__cell:is(.is-last)::before{box-shadow:var(--s-box-shadow-right)}.s-table--small{font-size:var(--s-table-font-size-sm)}.s-table--small .s-table__cell{padding:var(--s-table-cell-padding-sm)}.s-table--large{font-size:var(--s-table-font-size-lg)}.s-table--large .s-table__cell{padding:var(--s-table-cell-padding-lg)}

package/components/table/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Table from './table.vue';
+export declare const Table: EnhancedComponent<typeof _Table>;
+export default Table;
+export type { TableProps, TableSlots, TableColumnProps, TableHeaderColumn } from './common';

package/components/table/index.js

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

package/components/table/table-col.d.ts

@@ -0,0 +1,4 @@
+import { type TableColProps } from './common';
+declare const __VLS_export: import("vue").DefineComponent<TableColProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TableColProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/components/table/table-col.js

@@ -0,0 +1,40 @@
+import { addUnit } from "../../utils/utils.js";
+import { useResizeObserver } from "../../use/useResizeObserver.js";
+import { useColumnConsume } from "./useColumn.js";
+import { createElementBlock, defineComponent, normalizeStyle, openBlock, useTemplateRef } from "vue";
+//#region packages/sard/components/table/table-col.vue
+var table_col_default = /*@__PURE__*/ defineComponent({
+	__name: "table-col",
+	props: {
+		index: {
+			type: Number,
+			required: true
+		},
+		column: {
+			type: Object,
+			required: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const colRef = useTemplateRef("col");
+		const member = useColumnConsume(props);
+		useResizeObserver(colRef, (size) => {
+			member.width = size.width;
+		});
+		const getColStyle = (column) => {
+			let style = {};
+			if (column.width) style.width = style.minWidth = style.maxWidth = addUnit(column.width);
+			if (column.minWidth) style.minWidth = addUnit(column.minWidth);
+			return style;
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("col", {
+				ref: "col",
+				style: normalizeStyle(getColStyle(__props.column))
+			}, null, 4);
+		};
+	}
+});
+//#endregion
+export { table_col_default as default };

package/components/table/table.d.ts

@@ -0,0 +1,19 @@
+import { type TableProps, type TableSlots } from './common';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TableProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: TableSlots;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};