sard 1.0.0 → 1.0.2

package/components/picker-view/common.d.ts

@@ -0,0 +1,52 @@
+import type { ClassValue, ComponentInternalInstance, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, StyleValue, WritableComputedRef } from 'vue';
+import { type DefaultProps } from '../config';
+export declare const pickerViewProps: {
+    value: {
+        type: PropType<number[]>;
+        default(): never[];
+        validator(val: any): boolean;
+    };
+    indicatorStyle: {
+        type: PropType<StyleValue>;
+    };
+    indicatorClass: {
+        type: PropType<ClassValue>;
+    };
+    maskStyle: {
+        type: PropType<StyleValue>;
+    };
+    maskClass: {
+        type: PropType<ClassValue>;
+    };
+};
+export type PickerViewPrivateProps = ExtractPropTypes<typeof pickerViewProps>;
+export type PickerViewProps = ExtractPublicPropTypes<typeof pickerViewProps>;
+export declare const defaultPickerViewProps: DefaultProps<PickerViewProps>;
+export interface PickerViewSlots {
+    default?(): any;
+}
+export interface PickerViewEmits {
+    (e: 'update:value', value: number[]): void;
+    (e: 'change', value: number[]): void;
+}
+export interface PickerViewExpose {
+}
+export interface PickerViewColumnProps {
+}
+export declare const defaultPickerViewColumnProps: DefaultProps<PickerViewColumnProps>;
+export interface PickerViewColumnSlots {
+    default?(): any;
+}
+export interface PickerViewColumnEmits {
+}
+export interface PickerViewColumnExpose {
+}
+export interface PickerViewContext {
+    maskStyle: any;
+    maskClass: any;
+    indicatorClass: any;
+    indicatorStyle: any;
+    height: number;
+    getColumnValue: (ins: ComponentInternalInstance) => WritableComputedRef<number>;
+}
+export declare const pickerViewContextKey: InjectionKey<PickerViewContext>;

package/components/picker-view/common.js

@@ -0,0 +1,21 @@
+//#region packages/sard/components/picker-view/common.ts
+const pickerViewProps = {
+	value: {
+		type: Array,
+		default() {
+			return [];
+		},
+		validator(val) {
+			return Array.isArray(val) && val.filter((val) => typeof val === "number").length === val.length;
+		}
+	},
+	indicatorStyle: { type: null },
+	indicatorClass: { type: null },
+	maskStyle: { type: null },
+	maskClass: { type: null }
+};
+const defaultPickerViewProps = {};
+const defaultPickerViewColumnProps = {};
+const pickerViewContextKey = Symbol("formContext");
+//#endregion
+export { defaultPickerViewColumnProps, defaultPickerViewProps, pickerViewContextKey, pickerViewProps };

package/components/picker-view/index.css

@@ -0,0 +1 @@
+:root{--s-picker-view-height:240px;--s-picker-view-font-size:var(--s-font-size-lg);--s-picker-view-color:var(--s-text-color-primary);--s-picker-view-indicator-height:var(--s-content-height-lg);--s-picker-view-indicator-border-color:var(--s-border-color);--s-picker-view-mask-bg-image:linear-gradient(to bottom, rgba(var(--s-bg-color-elevated-rgb), 0.95), rgba(var(--s-bg-color-elevated-rgb), 0.6)),linear-gradient(to top, rgba(var(--s-bg-color-elevated-rgb), 0.95), rgba(var(--s-bg-color-elevated-rgb), 0.6))}.s-picker-view{height:var(--s-picker-view-height);-webkit-user-select:none;user-select:none;touch-action:none}.s-picker-view__wrapper{display:flex;position:relative;overflow:hidden;height:100%}.s-picker-view-column{flex:1;position:relative;height:100%;overflow:hidden}.s-picker-view-column__group{height:100%;overflow:hidden}.s-picker-view-column__indicator,.s-picker-view-column__mask{position:absolute;left:0;width:100%;z-index:3;pointer-events:none}.s-picker-view-column__mask{top:0;height:100%;margin:0 auto;background-image:var(--s-picker-view-mask-bg-image);background-position:top,bottom;background-size:100% 102px;background-repeat:no-repeat;transform:translateZ(0)}.s-picker-view-column__indicator{height:var(--s-picker-view-indicator-height);top:50%;transform:translateY(-50%)}.s-picker-view-column__indicator::before,.s-picker-view-column__indicator::after{content:" ";position:absolute;left:0;right:0;height:1px}.s-picker-view-column__indicator::before{top:0;border-top:1px solid var(--s-picker-view-indicator-border-color);transform-origin:0 0;transform:scaleY(0.5)}.s-picker-view-column__indicator::after{bottom:0;border-bottom:1px solid var(--s-picker-view-indicator-border-color);transform-origin:0 100%;transform:scaleY(0.5)}.s-picker-view-column__content{position:absolute;top:0;left:0;width:100%;will-change:transform;padding:102px 0;cursor:pointer}.s-picker-view-column__content>*{height:var(--picker-view-indicator-height);overflow:hidden}

package/components/picker-view/index.d.ts

@@ -0,0 +1,7 @@
+import { type EnhancedComponent } from '../../utils';
+import _PickerView from './picker-view';
+import _PickerViewColumn from './picker-view-column';
+export declare const PickerView: EnhancedComponent<typeof _PickerView>;
+export declare const PickerViewColumn: EnhancedComponent<typeof _PickerViewColumn>;
+export default PickerView;
+export type { PickerViewProps, PickerViewSlots, PickerViewEmits, PickerViewExpose, PickerViewColumnProps, PickerViewColumnSlots, PickerViewColumnEmits, PickerViewColumnExpose, } from './common';

package/components/picker-view/index.js

@@ -0,0 +1,8 @@
+import { enhanceComponent } from "../../utils/component.js";
+import picker_view_default from "./picker-view.js";
+import picker_view_column_default from "./picker-view-column.js";
+//#region packages/sard/components/picker-view/index.ts
+const PickerView = enhanceComponent(picker_view_default);
+const PickerViewColumn = enhanceComponent(picker_view_column_default);
+//#endregion
+export { PickerView, PickerView as default, PickerViewColumn };

package/components/picker-view/picker-view-column.d.ts

@@ -0,0 +1,3 @@
+import { type PickerViewColumnSlots } from './common';
+declare const _default: import("vue").DefineSetupFnComponent<import("vue").ExtractPublicPropTypes<unknown>, {}, PickerViewColumnSlots>;
+export default _default;

package/components/picker-view/picker-view-column.js

@@ -0,0 +1,137 @@
+import { createBem } from "../../utils/bem.js";
+import { flatVNode } from "../../utils/vnode.js";
+import { defineSetupFnComponent } from "../../utils/component.js";
+import { Friction } from "../../utils/scroller/Friction.js";
+import { Spring } from "../../utils/scroller/Spring.js";
+import { usePointerDown } from "../../use/usePointerDown.js";
+import { useResizeObserver } from "../../use/useResizeObserver.js";
+import { useScroller } from "../../utils/scroller/useScroller.js";
+import { pickerViewContextKey } from "./common.js";
+import { computed, createVNode, getCurrentInstance, inject, nextTick, onMounted, ref, useTemplateRef, watch } from "vue";
+//#region packages/sard/components/picker-view/picker-view-column.tsx
+var picker_view_column_default = defineSetupFnComponent((_props, { slots }) => {
+	const bem = createBem("picker-view-column");
+	const rootRef = ref(null);
+	const contentRef = ref(null);
+	const instance = getCurrentInstance();
+	const context = inject(pickerViewContextKey);
+	const columnValue = context.getColumnValue(instance);
+	const itemCount = ref(0);
+	const indicatorHeight = ref(48);
+	useResizeObserver(useTemplateRef("indicator"), (size) => {
+		if (size.height > 0) indicatorHeight.value = size.height;
+	});
+	const maskSize = computed(() => (context.height - indicatorHeight.value) / 2);
+	const { update, scrollTo, isIdle, handleTouchStart, handleTouchMove, handleTouchEnd } = useScroller(contentRef, {
+		enableY: true,
+		enableX: false,
+		enableSnap: true,
+		itemSize: indicatorHeight.value,
+		friction: new Friction(1e-4),
+		spring: new Spring(2, 90, 20),
+		onSnap: (index) => {
+			if (!isNaN(index) && index !== columnValue.value) columnValue.value = index;
+		},
+		onTap: (event) => {
+			handleTap(event);
+		}
+	});
+	let updatesScrollerRequest;
+	function updatesScroller() {
+		if (!updatesScrollerRequest && indicatorHeight.value) {
+			updatesScrollerRequest = true;
+			nextTick(() => {
+				updatesScrollerRequest = false;
+				const current = Math.max(Math.min(columnValue.value, itemCount.value - 1), 0);
+				update(current * indicatorHeight.value, void 0, indicatorHeight.value);
+			});
+		}
+	}
+	watch([
+		indicatorHeight,
+		itemCount,
+		() => context.height,
+		columnValue
+	], () => {
+		updatesScroller();
+	});
+	onMounted(() => {
+		updatesScroller();
+	});
+	let oldDeltaY = 0;
+	function handleWheel(event) {
+		const deltaY = oldDeltaY + event.deltaY;
+		if (Math.abs(deltaY) > 10) {
+			oldDeltaY = 0;
+			let current = Math.min(columnValue.value + (deltaY < 0 ? -1 : 1), itemCount.value - 1);
+			columnValue.value = current = Math.max(current, 0);
+			scrollTo(current * indicatorHeight.value);
+		} else oldDeltaY = deltaY;
+		event.preventDefault();
+	}
+	function handleTap({ changedTouches: [{ clientY }] }) {
+		const el = rootRef.value;
+		if (isIdle()) {
+			const r = clientY - el.getBoundingClientRect().top - context.height / 2;
+			const o = indicatorHeight.value / 2;
+			if (!(Math.abs(r) <= o)) {
+				const a = Math.ceil((Math.abs(r) - o) / indicatorHeight.value);
+				const s = r < 0 ? -a : a;
+				let current = Math.min(columnValue.value + s, itemCount.value - 1);
+				columnValue.value = current = Math.max(current, 0);
+				scrollTo(current * indicatorHeight.value);
+			}
+		}
+	}
+	const onTouchStart = (event) => {
+		handleTouchStart(event);
+	};
+	const onTouchMove = (event) => {
+		handleTouchMove(event);
+		event.stopPropagation();
+	};
+	const onTouchEnd = (event) => {
+		handleTouchEnd(event);
+	};
+	const onPointerDown = usePointerDown(onTouchStart, onTouchMove, onTouchEnd);
+	return () => {
+		const defaultSlots = slots.default?.();
+		itemCount.value = flatVNode(defaultSlots).length;
+		const padding = `${maskSize.value}px 0`;
+		return createVNode("div", {
+			"ref": rootRef,
+			"class": bem.b(),
+			"onTouchstart": onTouchStart,
+			"onTouchmove": onTouchMove,
+			"onTouchend": onTouchEnd,
+			"onTouchcancel": onTouchEnd,
+			"onPointerdown": onPointerDown
+		}, [createVNode("div", {
+			"class": bem.e("group"),
+			"onWheel": handleWheel
+		}, [
+			createVNode("div", {
+				"class": [bem.e("mask"), context.maskClass],
+				"style": [`background-size: 100% ${maskSize.value}px;`, context.maskStyle]
+			}, null),
+			createVNode("div", {
+				"ref": "indicator",
+				"class": [bem.e("indicator"), context.indicatorClass],
+				"style": context.indicatorStyle
+			}, null),
+			createVNode("div", {
+				"ref": contentRef,
+				"class": [bem.e("content")],
+				"style": {
+					padding,
+					"--picker-view-indicator-height": `${indicatorHeight.value}px`
+				}
+			}, [defaultSlots])
+		])]);
+	};
+}, {
+	name: "PickerViewColumn",
+	slots: null
+});
+//#endregion
+export { picker_view_column_default as default };

package/components/picker-view/picker-view.d.ts

@@ -0,0 +1,21 @@
+import { type PickerViewEmits, type PickerViewSlots } from './common';
+declare const _default: import("vue").DefineSetupFnComponent<import("vue").ExtractPublicPropTypes<{
+    value: {
+        type: import("vue").PropType<number[]>;
+        default(): never[];
+        validator(val: any): boolean;
+    };
+    indicatorStyle: {
+        type: import("vue").PropType<import("vue").StyleValue>;
+    };
+    indicatorClass: {
+        type: import("vue").PropType<import("vue").ClassValue>;
+    };
+    maskStyle: {
+        type: import("vue").PropType<import("vue").StyleValue>;
+    };
+    maskClass: {
+        type: import("vue").PropType<import("vue").ClassValue>;
+    };
+}>, PickerViewEmits, PickerViewSlots>;
+export default _default;

package/components/picker-view/picker-view.js

@@ -0,0 +1,67 @@
+import { createBem } from "../../utils/bem.js";
+import { flatVNode } from "../../utils/vnode.js";
+import { defineSetupFnComponent } from "../../utils/component.js";
+import { useResizeObserver } from "../../use/useResizeObserver.js";
+import { pickerViewContextKey, pickerViewProps } from "./common.js";
+import { computed, createVNode, provide, reactive, ref, toRef, useTemplateRef, watch } from "vue";
+//#region packages/sard/components/picker-view/picker-view.tsx
+var picker_view_default = defineSetupFnComponent((props, { slots, emit }) => {
+	const bem = createBem("picker-view");
+	const rootRef = useTemplateRef("root");
+	const innerValue = reactive([...props.value]);
+	watch(() => props.value, (value) => {
+		innerValue.length = value.length;
+		value.forEach((val, index) => {
+			if (val !== innerValue[index]) innerValue.splice(index, 1, val);
+		});
+	});
+	const columnsRef = ref([]);
+	function getItemIndex(vnode) {
+		return columnsRef.value.indexOf(vnode);
+	}
+	const getColumnValue = (columnInstance) => {
+		return computed({
+			get() {
+				const index = getItemIndex(columnInstance.vnode);
+				return innerValue[index] || 0;
+			},
+			set(current) {
+				const index = getItemIndex(columnInstance.vnode);
+				if (index < 0) return;
+				if (innerValue[index] !== current) {
+					innerValue[index] = current;
+					const value = innerValue.map((val) => val);
+					emit("update:value", value);
+					emit("change", value);
+				}
+			}
+		});
+	};
+	const height = ref(48);
+	useResizeObserver(rootRef, (size) => {
+		height.value = size.height;
+	});
+	provide(pickerViewContextKey, reactive({
+		maskStyle: toRef(() => props.maskStyle),
+		maskClass: toRef(() => props.maskClass),
+		indicatorClass: toRef(() => props.indicatorClass),
+		indicatorStyle: toRef(() => props.indicatorStyle),
+		height,
+		getColumnValue
+	}));
+	return () => {
+		const defaultSlots = slots.default && slots.default();
+		columnsRef.value = flatVNode(defaultSlots);
+		return createVNode("div", {
+			"ref": "root",
+			"class": bem.b()
+		}, [createVNode("div", { "class": bem.e("wrapper") }, [defaultSlots])]);
+	};
+}, {
+	name: "PickerView",
+	props: pickerViewProps,
+	emits: ["change", "update:value"],
+	slots: null
+});
+//#endregion
+export { picker_view_default as default };

package/components/popout/common.d.ts

@@ -0,0 +1,52 @@
+import { type DefaultProps } from '../config';
+import type { MotionEmits } from '../motion';
+export type PopoutBeforeClose = (type: 'close' | 'cancel' | 'confirm', loading: {
+    readonly cancel: boolean;
+    readonly confirm: boolean;
+    readonly close: boolean;
+}) => any;
+export interface PopoutProps {
+    visible?: boolean;
+    title?: string;
+    type?: 'compact' | 'loose';
+    showCancel?: boolean;
+    cancelText?: string;
+    showConfirm?: boolean;
+    confirmText?: string;
+    confirmDisabled?: boolean;
+    showClose?: boolean;
+    showFooter?: boolean;
+    overlay?: boolean;
+    overlayClass?: string;
+    overlayStyle?: string;
+    background?: string;
+    transparent?: boolean;
+    overlayClosable?: boolean;
+    beforeClose?: PopoutBeforeClose;
+    showShadow?: boolean;
+    destroyOnClose?: boolean;
+    lazy?: boolean;
+}
+export declare const defaultPopoutProps: DefaultProps<PopoutProps>;
+export interface PopoutSlots {
+    default?(props: Record<string, never>): any;
+    title?(props: Record<string, never>): any;
+    cancel?(props: {
+        onClick: () => void;
+        loading: boolean;
+        text: string;
+    }): any;
+    confirm?(props: {
+        onClick: () => void;
+        loading: boolean;
+        text: string;
+        disabled?: boolean;
+    }): any;
+    'title-prepend'?(props: Record<string, never>): any;
+}
+export interface PopoutEmits extends MotionEmits {
+    (e: 'update:visible', visible: boolean): void;
+    (e: 'close'): void;
+    (e: 'cancel'): void;
+    (e: 'confirm'): void;
+}

package/components/popout/common.js

@@ -0,0 +1,14 @@
+//#region packages/sard/components/popout/common.ts
+const defaultPopoutProps = {
+	type: "compact",
+	showCancel: void 0,
+	showConfirm: true,
+	showClose: true,
+	showFooter: true,
+	overlay: true,
+	overlayClosable: true,
+	lazy: void 0,
+	destroyOnClose: void 0
+};
+//#endregion
+export { defaultPopoutProps };

package/components/popout/index.css

@@ -0,0 +1 @@
+:root{--s-popout-border-radius:var(--s-border-radius-xl);--s-popout-bg:var(--s-bg-color-elevated);--s-popout-close-padding:var(--s-size);--s-popout-close-font-size:var(--s-font-size-lg);--s-popout-close-color:var(--s-text-color-secondary);--s-popout-header-compact-height:var(--s-content-height);--s-popout-header-loose-height:var(--s-content-height);--s-popout-header-loose-padding-x:60px;--s-popout-title-font-size:var(--s-font-size-lg);--s-popout-title-color:var(--s-text-color-emphasis);--s-popout-footer-padding-y:var(--s-content-padding-y);--s-popout-footer-padding-x:var(--s-content-padding-x);--s-popout-button-gap:var(--s-size)}.s-popout{max-height:100%;padding-bottom:var(--s-safe-bottom);border-top-left-radius:var(--s-popout-border-radius);border-top-right-radius:var(--s-popout-border-radius);background:var(--s-popout-bg)}.s-popout--divided{box-shadow:var(--s-box-shadow)}.s-popout__header{position:relative;display:flex;align-items:center}.s-popout__header--compact{height:var(--s-popout-header-compact-height)}.s-popout__header--loose{height:var(--s-popout-header-loose-height);padding-inline-start:var(--s-popout-header-loose-padding-x);padding-inline-end:var(--s-popout-header-loose-padding-x)}.s-popout__button-wrap{position:relative;display:flex;flex-direction:column;z-index:1;height:100%}.s-popout__button-wrap--end{margin-inline-start:auto}.s-popout__title{position:absolute;left:0;right:0;display:flex;justify-content:center;align-items:center;width:70%;height:100%;margin-inline-start:auto;margin-inline-end:auto;text-align:center;font-size:var(--s-popout-title-font-size);font-weight:var(--s-font-weight-bold);color:var(--s-popout-title-color);overflow:hidden}.s-popout__title-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.s-popout__close{position:absolute;top:0;inset-inline-end:0;height:100%;border-width:0;font-size:var(--s-popout-close-font-size);color:var(--s-popout-close-color)}.s-popout__footer{display:flex;align-items:center;gap:var(--s-popout-button-gap);padding:var(--s-popout-footer-padding-y) var(--s-popout-footer-padding-x)}.s-popout__footer-button{flex:1 1 0}

package/components/popout/index.d.ts

@@ -0,0 +1,6 @@
+import { type EnhancedComponent } from '../../utils';
+import _Popout from './popout.vue';
+export declare const Popout: EnhancedComponent<typeof _Popout>;
+export default Popout;
+export type { PopoutProps, PopoutSlots, PopoutEmits, PopoutBeforeClose } from './common';
+export * from './useFormPopout';

package/components/popout/index.js

@@ -0,0 +1,7 @@
+import { enhanceComponent } from "../../utils/component.js";
+import popout_default from "./popout.js";
+import { omitFormPopoutProps, useFormPopout } from "./useFormPopout.js";
+//#region packages/sard/components/popout/index.ts
+const Popout = enhanceComponent(popout_default);
+//#endregion
+export { Popout, Popout as default, omitFormPopoutProps, useFormPopout };

package/components/popout/popout.d.ts

@@ -0,0 +1,61 @@
+import { type PopoutProps, type PopoutSlots } from './common';
+import type { MotionHookName } from '../motion/common';
+type __VLS_Slots = PopoutSlots;
+declare const __VLS_base: import("vue").DefineComponent<PopoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    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;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<PopoutProps> & Readonly<{
+    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;
+    onConfirm?: (() => any) | undefined;
+}>, {
+    title: string;
+    background: string;
+    type: "compact" | "loose";
+    visible: boolean;
+    overlay: boolean;
+    overlayClass: string;
+    overlayStyle: string;
+    transparent: boolean;
+    overlayClosable: boolean;
+    destroyOnClose: boolean;
+    lazy: boolean;
+    showCancel: boolean;
+    beforeClose: import("./common").PopoutBeforeClose;
+    cancelText: string;
+    showConfirm: boolean;
+    confirmText: string;
+    confirmDisabled: boolean;
+    showClose: boolean;
+    showFooter: boolean;
+    showShadow: 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;
+    };
+};