sard 1.0.0 → 1.0.2

package/components/dialog/dialog.js

@@ -0,0 +1,273 @@
+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 { useTranslateWithPrefix } from "../../locale/index.js";
+import button_default from "../button/button.js";
+import { defaultDialogProps } from "./common.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeDefaults, mergeProps, normalizeClass, openBlock, reactive, readonly, ref, renderSlot, toDisplayString, unref, watch, withCtx } from "vue";
+import { Close } from "@sard/icons";
+//#region packages/sard/components/dialog/dialog.vue
+var dialog_default = /*@__PURE__*/ defineComponent({
+	__name: "dialog",
+	props: /*@__PURE__*/ mergeDefaults({
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		message: {
+			type: String,
+			required: false
+		},
+		headed: {
+			type: Boolean,
+			required: false
+		},
+		buttonType: {
+			type: String,
+			required: false
+		},
+		showCancel: {
+			type: Boolean,
+			required: false
+		},
+		cancelText: {
+			type: String,
+			required: false
+		},
+		showConfirm: {
+			type: Boolean,
+			required: false
+		},
+		confirmText: {
+			type: String,
+			required: false
+		},
+		overlayClosable: {
+			type: Boolean,
+			required: false
+		},
+		beforeClose: {
+			type: Function,
+			required: false
+		},
+		cancelProps: {
+			type: Object,
+			required: false
+		},
+		confirmProps: {
+			type: Object,
+			required: false
+		}
+	}, defaultDialogProps),
+	emits: [
+		"update:visible",
+		"close",
+		"cancel",
+		"confirm",
+		"before-enter",
+		"enter",
+		"after-enter",
+		"enter-cancelled",
+		"before-leave",
+		"leave",
+		"after-leave",
+		"leave-cancelled",
+		"visible-hook"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("dialog");
+		const { t } = useTranslateWithPrefix("dialog");
+		const innerVisible = ref(props.visible);
+		watch(() => props.visible, () => {
+			innerVisible.value = props.visible;
+		});
+		const loading = reactive({
+			cancel: false,
+			confirm: 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,
+					confirm: false,
+					close: false
+				});
+			}
+		}, { flush: "sync" });
+		const perhapsClose = (type) => {
+			emit(type);
+			if (isFunction(props.beforeClose)) {
+				const result = props.beforeClose(type, readonlyLoading);
+				if (result instanceof Promise) {
+					loading[type] = true;
+					const obj = { valid: true };
+					asyncSet.add(obj);
+					return result.then(() => {
+						if (obj.valid) {
+							innerVisible.value = false;
+							emit("update:visible", false);
+						}
+					}).catch(noop).finally(() => {
+						loading[type] = false;
+						asyncSet.delete(obj);
+					});
+				} else if (result === false) return;
+			}
+			innerVisible.value = false;
+			emit("update:visible", false);
+		};
+		const onOverlayClick = () => {
+			if (props.overlayClosable) perhapsClose("close");
+		};
+		const onClose = () => {
+			perhapsClose("close");
+		};
+		const onConfirm = () => {
+			perhapsClose("confirm");
+		};
+		const onCancel = () => {
+			perhapsClose("cancel");
+		};
+		const onVisibleHook = (name, el) => {
+			emit("visible-hook", name, el);
+			emit(name, el);
+		};
+		const buttonProps = computed(() => {
+			return {
+				text: {
+					cancel: {
+						variant: "text",
+						color: "secondary",
+						size: "large"
+					},
+					confirm: {
+						variant: "text",
+						color: "primary",
+						size: "large"
+					}
+				},
+				round: {
+					cancel: {
+						variant: "filled",
+						color: "primary",
+						round: true
+					},
+					confirm: {
+						variant: "solid",
+						color: "primary",
+						round: true
+					}
+				}
+			}[props.buttonType];
+		});
+		const dialogClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m("headed", props.headed),
+				bem.m("untitled", !props.title),
+				bem.m(props.buttonType)
+			];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(popup_default, {
+				effect: "zoom",
+				visible: __props.visible,
+				class: normalizeClass(unref(bem).e("popup")),
+				onOverlayClick,
+				onVisibleHook
+			}, {
+				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(dialogClass.value) }, [
+					__props.headed ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(unref(bem).e("header"))
+					}, [__props.title ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(unref(bem).e("title"))
+					}, toDisplayString(__props.title), 3)) : createCommentVNode("v-if", true), createElementVNode("div", { class: normalizeClass(unref(bem).e("close")) }, [createVNode(button_default, {
+						variant: "link",
+						color: "secondary",
+						size: "large",
+						block: "",
+						onClick: onClose
+					}, {
+						default: withCtx(() => [createVNode(unref(Close))]),
+						_: 1
+					})], 2)], 2)) : createCommentVNode("v-if", true),
+					!__props.headed && __props.title || __props.message ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: normalizeClass(unref(bem).e("body"))
+					}, [!__props.headed && __props.title ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(unref(bem).e("title"))
+					}, toDisplayString(__props.title), 3)) : createCommentVNode("v-if", true), __props.message ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: normalizeClass(unref(bem).e("message"))
+					}, [createElementVNode("span", null, toDisplayString(__props.message), 1)], 2)) : createCommentVNode("v-if", true)], 2)) : createCommentVNode("v-if", true),
+					renderSlot(_ctx.$slots, "default"),
+					createElementVNode("div", { class: normalizeClass(unref(bem).e("footer")) }, [
+						__props.showCancel ? (openBlock(), createBlock(button_default, mergeProps({
+							key: 0,
+							class: unref(bem).e("button"),
+							loading: loading.cancel,
+							variant: buttonProps.value.cancel.variant,
+							color: buttonProps.value.cancel.color,
+							size: buttonProps.value.cancel.size,
+							round: buttonProps.value.cancel.round,
+							block: ""
+						}, __props.cancelProps, { onClick: onCancel }), {
+							default: withCtx(() => [createTextVNode(toDisplayString(__props.cancelText || unref(t)("cancel")), 1)]),
+							_: 1
+						}, 16, [
+							"class",
+							"loading",
+							"variant",
+							"color",
+							"size",
+							"round"
+						])) : createCommentVNode("v-if", true),
+						__props.showCancel && __props.buttonType === "text" ? (openBlock(), createElementBlock("div", {
+							key: 1,
+							class: normalizeClass(unref(bem).e("divider"))
+						}, null, 2)) : createCommentVNode("v-if", true),
+						__props.showConfirm ? (openBlock(), createBlock(button_default, mergeProps({
+							key: 2,
+							class: unref(bem).e("button"),
+							loading: loading.confirm,
+							variant: buttonProps.value.confirm.variant,
+							color: buttonProps.value.confirm.color,
+							size: buttonProps.value.confirm.size,
+							round: buttonProps.value.confirm.round,
+							block: ""
+						}, __props.confirmProps, { onClick: onConfirm }), {
+							default: withCtx(() => [createTextVNode(toDisplayString(__props.confirmText || unref(t)("confirm")), 1)]),
+							_: 1
+						}, 16, [
+							"class",
+							"loading",
+							"variant",
+							"color",
+							"size",
+							"round"
+						])) : createCommentVNode("v-if", true)
+					], 2)
+				], 2)]),
+				_: 3
+			}, 8, ["visible", "class"]);
+		};
+	}
+});
+//#endregion
+export { dialog_default as default };

package/components/dialog/imperative.d.ts

@@ -0,0 +1,20 @@
+import { type TransitionHookCallbacks } from '../popup/common';
+import { type DialogProps } from './common';
+export interface DialogOptions extends DialogProps, TransitionHookCallbacks {
+    onClose?: () => void;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+}
+export interface DialogSimpleShowFunction {
+    (optionsOrTitle: string | DialogOptions, options?: DialogOptions): void;
+}
+export interface DialogShowFunction {
+    (optionsOrTitle: string | DialogOptions, options?: DialogOptions, internalOptions?: DialogOptions): void;
+}
+export type DialogFunction = DialogSimpleShowFunction & {
+    alert: DialogSimpleShowFunction;
+    confirm: DialogSimpleShowFunction;
+    hide: () => void;
+};
+export declare function createDialog(defaultOptions?: DialogOptions): DialogFunction;
+export declare const dialog: DialogFunction;

package/components/dialog/imperative.js

@@ -0,0 +1,36 @@
+import { createImperativeComponent } from "../../utils/createImperativeComponent.js";
+import dialog_default from "./dialog.js";
+//#region packages/sard/components/dialog/imperative.ts
+const defaultDialogOptions = {
+	headed: false,
+	buttonType: "text",
+	showCancel: false
+};
+function createDialog(defaultOptions) {
+	const imperative = createImperativeComponent(dialog_default, defaultOptions);
+	const show = (optionsOrTitle, options = {}, internalOptions) => {
+		if (optionsOrTitle && typeof optionsOrTitle === "object") options = optionsOrTitle;
+		else options.title = optionsOrTitle;
+		options = Object.assign({}, defaultDialogOptions, options, internalOptions);
+		imperative.show(options);
+	};
+	const alert = (optionsOrTitle, options) => {
+		show(optionsOrTitle, options, { showCancel: false });
+	};
+	const confirm = (optionsOrTitle, options) => {
+		show(optionsOrTitle, options, { showCancel: true });
+	};
+	const hide = () => {
+		imperative.hide();
+	};
+	const dialog = (optionsOrTitle, options) => {
+		show(optionsOrTitle, options, { showCancel: false });
+	};
+	dialog.alert = alert;
+	dialog.confirm = confirm;
+	dialog.hide = hide;
+	return dialog;
+}
+const dialog = createDialog(defaultDialogOptions);
+//#endregion
+export { createDialog, dialog };

package/components/dialog/index.css

@@ -0,0 +1 @@
+:root{--s-dialog-width:320px;--s-dialog-max-width:90%;--s-dialog-border-color:var(--s-border-color);--s-dialog-bg:var(--s-bg-color-elevated);--s-dialog-radius:var(--s-border-radius-xl);--s-dialog-header-padding-y:var(--s-size);--s-dialog-header-padding-x:var(--s-size);--s-dialog-body-padding-x:var(--s-size);--s-dialog-body-padding-y:var(--s-size-xl);--s-dialog-body-gap:var(--s-size-xs);--s-dialog-title-font-size:var(--s-font-size-lg);--s-dialog-title-headed-font-size:var(--s-font-size);--s-dialog-close-font-size:var(--s-font-size-lg);--s-dialog-message-font-size:var(--s-font-size);--s-dialog-message-color:var(--s-text-color-secondary);--s-dialog-footer-round-padding-x:var(--s-size);--s-dialog-footer-round-padding-y:var(--s-size);--s-dialog-footer-round-gap:var(--s-size)}.s-dialog{width:var(--s-dialog-width);max-width:100%;background:var(--s-dialog-bg);border-radius:var(--s-dialog-radius)}.s-dialog__popup{max-width:var(--s-dialog-max-width)}.s-dialog__header{position:relative;display:flex;justify-content:space-between;align-items:center;padding:var(--s-dialog-header-padding-y) var(--s-dialog-header-padding-x)}.s-dialog__header::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-dialog-border-color);transform-origin:bottom center}.s-dialog__title{font-size:var(--s-dialog-title-font-size);font-weight:var(--s-font-weight-bold);text-align:center}.s-dialog__close{flex:none;z-index:1;margin-top:calc(var(--s-dialog-header-padding-y)*-1);margin-inline-end:calc(var(--s-dialog-header-padding-x)*-1);margin-bottom:calc(var(--s-dialog-header-padding-y)*-1);margin-inline-start:auto}.s-dialog__body{display:flex;flex-direction:column;padding:var(--s-dialog-body-padding-y) var(--s-dialog-body-padding-x);gap:var(--s-dialog-body-gap)}.s-dialog__message{font-size:var(--s-dialog-message-font-size);text-align:center;color:var(--s-dialog-message-color)}.s-dialog__footer{position:relative;display:flex}.s-dialog__button{flex:1}.s-dialog__divider{position:relative;flex:none}.s-dialog__divider::before{position:absolute;z-index:1;pointer-events:none;touch-action:none;opacity:1;content:"";top:0;bottom:0;transform:scaleX(0.5);inset-inline-start:0;border-inline-start:var(--s-border-width) var(--s-border-style) var(--s-dialog-border-color);transform-origin:left center}:root[dir=rtl] .s-dialog__divider::before{transform-origin:right center}.s-dialog--headed .s-dialog__title{font-size:var(--s-dialog-title-headed-font-size)}.s-dialog--untitled .s-dialog__header{padding-bottom:0}.s-dialog--untitled .s-dialog__header::after{display:none}.s-dialog--untitled.s-dialog--headed .s-dialog__body{padding-top:0}.s-dialog--round .s-dialog__footer{padding-inline-start:var(--s-dialog-footer-round-padding-x);padding-inline-end:var(--s-dialog-footer-round-padding-x);padding-bottom:var(--s-dialog-footer-round-padding-y);gap:var(--s-dialog-footer-round-gap)}.s-dialog--text .s-dialog__footer::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-dialog-border-color);transform-origin:top center}.s-dialog--text .s-dialog__button{border-radius:0}:root:not([dir=rtl]) .s-dialog--text .s-dialog__button:first-child{border-bottom-left-radius:var(--s-dialog-radius)}:root[dir=rtl] .s-dialog--text .s-dialog__button:first-child{border-bottom-right-radius:var(--s-dialog-radius)}:root:not([dir=rtl]) .s-dialog--text .s-dialog__button:last-child{border-bottom-right-radius:var(--s-dialog-radius)}:root[dir=rtl] .s-dialog--text .s-dialog__button:last-child{border-bottom-left-radius:var(--s-dialog-radius)}

package/components/dialog/index.d.ts

@@ -0,0 +1,6 @@
+import { type EnhancedComponent } from '../../utils';
+import _Dialog from './dialog.vue';
+export declare const Dialog: EnhancedComponent<typeof _Dialog>;
+export default Dialog;
+export type { DialogProps, DialogSlots, DialogEmits } from './common';
+export * from './imperative';

package/components/dialog/index.js

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

package/components/divider/common.d.ts

@@ -0,0 +1,15 @@
+import { type DefaultProps } from '../config';
+export interface DividerProps {
+    type?: 'solid' | 'dashed' | 'dotted';
+    hairline?: boolean;
+    position?: 'left' | 'right' | 'center';
+    vertical?: boolean;
+}
+export declare const defaultDividerProps: DefaultProps<DividerProps>;
+export interface DividerSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface DividerEmits {
+}
+export interface DividerExpose {
+}

package/components/divider/common.js

@@ -0,0 +1,8 @@
+//#region packages/sard/components/divider/common.ts
+const defaultDividerProps = {
+	type: "solid",
+	hairline: true,
+	position: "center"
+};
+//#endregion
+export { defaultDividerProps };

package/components/divider/divider.d.ts

@@ -0,0 +1,16 @@
+import { type DividerProps, type DividerSlots, type DividerExpose } from './common';
+type __VLS_Slots = DividerSlots;
+declare const __VLS_base: import("vue").DefineComponent<DividerProps, DividerExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DividerProps> & Readonly<{}>, {
+    vertical: boolean;
+    position: "left" | "right" | "center";
+    type: "solid" | "dashed" | "dotted";
+    hairline: 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/divider/divider.js

@@ -0,0 +1,51 @@
+import { createBem } from "../../utils/bem.js";
+import { defaultDividerProps } from "./common.js";
+import { computed, createElementBlock, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, renderSlot, useSlots } from "vue";
+//#region packages/sard/components/divider/divider.vue
+var divider_default = /*@__PURE__*/ defineComponent({
+	__name: "divider",
+	props: /*@__PURE__*/ mergeDefaults({
+		type: {
+			type: String,
+			required: false
+		},
+		hairline: {
+			type: Boolean,
+			required: false
+		},
+		position: {
+			type: String,
+			required: false
+		},
+		vertical: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultDividerProps),
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const slots = useSlots();
+		const bem = createBem("divider");
+		__expose({});
+		const dividerClass = computed(() => {
+			return [
+				bem.b(),
+				bem.m(props.position),
+				bem.m("vertical", props.vertical),
+				bem.m("hairline", props.hairline),
+				bem.m("only-line", !slots.default)
+			];
+		});
+		const dividerStyle = computed(() => {
+			return { borderStyle: props.type };
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(dividerClass.value),
+				style: normalizeStyle(dividerStyle.value)
+			}, [renderSlot(_ctx.$slots, "default")], 6);
+		};
+	}
+});
+//#endregion
+export { divider_default as default };

package/components/divider/index.css

@@ -0,0 +1 @@
+:root{--s-divider-margin-y:var(--s-size);--s-divider-margin-x:var(--s-size-xs);--s-divider-gap:var(--s-size);--s-divider-color:var(--s-text-color-tertiary);--s-divider-border-color:var(--s-border-color);--s-divider-left-width:10%;--s-divider-right-width:10%;--s-divider-vertical-height:1em}.s-divider{display:flex;align-items:center;margin:var(--s-divider-margin-y) 0;gap:var(--s-divider-gap);border-width:0;border-color:var(--s-divider-border-color);color:var(--s-divider-color)}.s-divider::before,.s-divider::after{display:block;flex:1;border-color:inherit;border-style:inherit;border-width:1px 0 0;content:""}.s-divider--only-line::after{display:none}.s-divider--left::before{max-width:var(--s-divider-left-width)}.s-divider--right::after{max-width:var(--s-divider-right-width)}.s-divider--vertical{display:inline-block;height:var(--s-divider-vertical-height);margin:0 var(--s-divider-margin-x);vertical-align:middle}.s-divider--vertical::before{height:100%;border-width:0 0 0 1px}.s-divider--vertical::after{display:none}.s-divider--hairline::before,.s-divider--hairline::after{transform:scaleY(0.5)}.s-divider--vertical.s-divider--hairline::before{transform:scaleX(0.5)}

package/components/divider/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Divider from './divider.vue';
+export declare const Divider: EnhancedComponent<typeof _Divider>;
+export default Divider;
+export type { DividerProps, DividerSlots, DividerEmits, DividerExpose } from './common';

package/components/divider/index.js

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

package/components/dnd/common.d.ts

@@ -0,0 +1,72 @@
+import { type UnwrapRef, type InjectionKey } from 'vue';
+export interface DndProps<T> {
+    list?: T[];
+}
+export interface DndSlots<T> {
+    default?(props: {
+        list: DndListItem<T>[];
+    }): any;
+}
+export interface DndEmits<T> {
+    'item-drag-start': [event: {
+        itemIndex: number;
+    }];
+    'item-drag-move': [event: {
+        itemIndex: number;
+        insertIndex: number;
+    }];
+    'item-drop': [event: {
+        itemIndex: number;
+        insertIndex: number;
+    }];
+    'update:list': [list: T[]];
+}
+export interface DndExpose {
+}
+export interface DndListItem<T> {
+    data: UnwrapRef<T>;
+    itemInfo: DndItemInfo;
+    key: string;
+}
+export interface DndItemInfo {
+    offset: number;
+    dragging: boolean;
+}
+export interface DndContext<T> {
+    list: DndListItem<T>[];
+    dragging: boolean;
+    currentHeight: number;
+    dragStart: (itemIndex: number) => void;
+    dragMove: (itemIndex: number, insertIndex: number) => void;
+    drop: (itemIndex: number, insertIndex: number) => void;
+    rectItems: (() => DOMRect)[];
+    addRectItem: (getRect: () => DOMRect) => void;
+    removeRectItem: (getRect: () => DOMRect) => void;
+}
+export declare const dndContextKey: InjectionKey<DndContext<any>>;
+export interface DndItemProps {
+    itemInfo: DndItemInfo;
+}
+export interface DndItemSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface DndItemEmits {
+}
+export interface DndItemExpose {
+}
+export interface DndItemContext {
+    immediateStart: () => void;
+    start: () => void;
+    move: (delta: number) => void;
+    end: () => void;
+}
+export declare const dndItemContextKey: InjectionKey<DndItemContext>;
+export interface DndHandleProps {
+}
+export interface DndHandleSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface DndHandleEmits {
+}
+export interface DndHandleExpose {
+}

package/components/dnd/common.js

@@ -0,0 +1,5 @@
+//#region packages/sard/components/dnd/common.ts
+const dndContextKey = Symbol("dndContext");
+const dndItemContextKey = Symbol("dndItemContext");
+//#endregion
+export { dndContextKey, dndItemContextKey };

package/components/dnd/dnd-handle.d.ts

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

@@ -0,0 +1,56 @@
+import { createBem } from "../../utils/bem.js";
+import { usePointerDown } from "../../use/usePointerDown.js";
+import { useSimulatedPress } from "../../use/useSimulatedPress.js";
+import { dndItemContextKey } from "./common.js";
+import { computed, createElementBlock, defineComponent, inject, normalizeClass, openBlock, ref, renderSlot, unref, withModifiers } from "vue";
+//#region packages/sard/components/dnd/dnd-handle.vue
+var dnd_handle_default = /*@__PURE__*/ defineComponent({
+	__name: "dnd-handle",
+	setup(__props, { expose: __expose }) {
+		const bem = createBem("dnd-handle");
+		const itemContext = inject(dndItemContextKey);
+		if (!itemContext) throw new Error("DndHandle must be included in DndItem.");
+		const dragging = ref(false);
+		const onDragTouchStart = (event) => {
+			itemContext.immediateStart();
+			onDragSimulatedPressTouchStart(event);
+		};
+		const onDragTouchMove = (event) => {
+			onDragSimulatedPressTouchMove(event);
+		};
+		const onDragTouchEnd = () => {
+			dragging.value = false;
+			onDragSimulatedPressTouchEnd();
+		};
+		const [onDragSimulatedPressTouchStart, onDragSimulatedPressTouchMove, onDragSimulatedPressTouchEnd] = useSimulatedPress({
+			start: () => {
+				dragging.value = true;
+				itemContext.start();
+			},
+			move: (_, { delta }) => {
+				itemContext.move(delta.y);
+			},
+			end: () => {
+				itemContext.end();
+			},
+			duration: 150
+		});
+		const onDragPointerDown = usePointerDown(onDragTouchStart, onDragTouchMove, onDragTouchEnd);
+		__expose({});
+		const dndHandleClass = computed(() => {
+			return [bem.b(), bem.m("dragging", dragging)];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(dndHandleClass.value),
+				onTouchstart: withModifiers(onDragTouchStart, ["stop", "prevent"]),
+				onTouchmove: withModifiers(onDragTouchMove, ["stop", "prevent"]),
+				onTouchend: onDragTouchEnd,
+				onTouchcancel: onDragTouchEnd,
+				onPointerdown: _cache[0] || (_cache[0] = withModifiers((...args) => unref(onDragPointerDown) && unref(onDragPointerDown)(...args), ["stop"]))
+			}, [renderSlot(_ctx.$slots, "default")], 34);
+		};
+	}
+});
+//#endregion
+export { dnd_handle_default as default };

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

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