sard 1.0.0 → 1.0.2

package/components/share-sheet/share-sheet.js

@@ -0,0 +1,138 @@
+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 { defaultShareSheetProps } from "./common.js";
+import { useShareSheet } from "./context.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeDefaults, normalizeClass, openBlock, ref, renderSlot, toDisplayString, unref, useSlots, watch, withCtx } from "vue";
+//#region packages/sard/components/share-sheet/share-sheet.vue
+var share_sheet_default = /*@__PURE__*/ defineComponent({
+	__name: "share-sheet",
+	props: /*@__PURE__*/ mergeDefaults({
+		title: {
+			type: String,
+			required: false
+		},
+		description: {
+			type: String,
+			required: false
+		},
+		cancel: {
+			type: String,
+			required: false
+		},
+		showCancel: {
+			type: Boolean,
+			required: false
+		},
+		visible: {
+			type: Boolean,
+			required: false
+		},
+		overlayClosable: {
+			type: Boolean,
+			required: false
+		},
+		beforeClose: {
+			type: Function,
+			required: false
+		}
+	}, defaultShareSheetProps),
+	emits: [
+		"update:visible",
+		"close",
+		"cancel",
+		"select",
+		"before-enter",
+		"enter",
+		"after-enter",
+		"enter-cancelled",
+		"before-leave",
+		"leave",
+		"after-leave",
+		"leave-cancelled",
+		"visible-hook"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const slots = useSlots();
+		const emit = __emit;
+		const bem = createBem("share-sheet");
+		const { t } = useTranslateWithPrefix("shareSheet");
+		const mergedShowCancel = computed(() => {
+			return !!(props.showCancel || props.cancel || !!slots.cancel);
+		});
+		const showTitle = computed(() => {
+			return !!(props.title || slots.title);
+		});
+		const showDescription = computed(() => {
+			return !!(props.description || slots.description);
+		});
+		const innerVisible = ref(props.visible);
+		watch(() => props.visible, () => {
+			innerVisible.value = props.visible;
+		});
+		const perhapsClose = (type) => {
+			if (isFunction(props.beforeClose)) {
+				const result = props.beforeClose(type);
+				if (result instanceof Promise) return result.then(() => {
+					innerVisible.value = false;
+					emit("update:visible", false);
+				}).catch(noop);
+				else if (result === false) return;
+			}
+			innerVisible.value = false;
+			emit("update:visible", false);
+		};
+		const onOverlayClick = () => {
+			emit("close");
+			if (props.overlayClosable) perhapsClose("close");
+		};
+		const onSelect = (item) => {
+			emit("select", { ...item });
+			perhapsClose("select");
+		};
+		const onCancel = () => {
+			emit("cancel");
+			perhapsClose("cancel");
+		};
+		const onVisibleHook = (name, el) => {
+			emit("visible-hook", name, el);
+			emit(name, el);
+		};
+		useShareSheet({ onSelect });
+		const shareSheetClass = computed(() => {
+			return bem.b();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(popup_default, {
+				effect: "slide-bottom",
+				visible: innerVisible.value,
+				onOverlayClick,
+				onVisibleHook
+			}, {
+				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(shareSheetClass.value) }, [
+					showTitle.value || showDescription.value ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(unref(bem).e("header"))
+					}, [showTitle.value ? (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), showDescription.value ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: normalizeClass(unref(bem).e("description"))
+					}, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])], 2)) : createCommentVNode("v-if", true)], 2)) : createCommentVNode("v-if", true),
+					createElementVNode("div", { class: normalizeClass(unref(bem).e("body")) }, [renderSlot(_ctx.$slots, "default")], 2),
+					mergedShowCancel.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", { class: normalizeClass(unref(bem).e("gap")) }, null, 2), createElementVNode("div", {
+						class: normalizeClass(unref(bem).e("cancel")),
+						onClick: onCancel
+					}, [renderSlot(_ctx.$slots, "cancel", {}, () => [createTextVNode(toDisplayString(__props.cancel || unref(t)("cancel")), 1)])], 2)], 64)) : createCommentVNode("v-if", true)
+				], 2)]),
+				_: 3
+			}, 8, ["visible"]);
+		};
+	}
+});
+//#endregion
+export { share_sheet_default as default };

package/components/sidebar/common.d.ts

@@ -0,0 +1,43 @@
+import type { InjectionKey } from 'vue';
+import { type ScrollIntoViewOptions } from '../../utils';
+export interface SidebarProps {
+    modelValue?: string | number;
+    round?: boolean;
+    line?: boolean;
+    scrollIntoViewOptions?: ScrollIntoViewOptions;
+}
+export interface SidebarSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface SidebarEmits {
+    (e: 'update:modelValue', value: string | number): void;
+    (e: 'change', value: string | number): void;
+}
+export interface SidebarExpose {
+}
+export interface SidebarMember {
+    el: HTMLElement | null;
+    name: string | number;
+}
+export interface SidebarContext {
+    current: any;
+    select: (member: SidebarMember) => void;
+    addMember: (member: SidebarMember) => void;
+    removeMember: (member: SidebarMember) => void;
+    round?: boolean;
+    line?: boolean;
+}
+export declare const sidebarContextKey: InjectionKey<SidebarContext>;
+export interface SidebarItemProps {
+    title?: string;
+    name: string | number;
+    disabled?: boolean;
+}
+export interface SidebarItemSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface SidebarItemEmits {
+    (e: 'click', event: MouseEvent): void;
+}
+export interface SidebarItemExpose {
+}

package/components/sidebar/common.js

@@ -0,0 +1,4 @@
+//#region packages/sard/components/sidebar/common.ts
+const sidebarContextKey = Symbol("sidebarContext");
+//#endregion
+export { sidebarContextKey };

package/components/sidebar/index.css

@@ -0,0 +1 @@
+:root{--s-sidebar-bg:var(--s-fill-color-tertiary);--s-sidebar-width:92px;--s-sidebar-item-padding-x:20px;--s-sidebar-item-padding-y:14px;--s-sidebar-item-font-size:var(--s-font-size-sm);--s-sidebar-item-color:var(--s-text-color-secondary);--s-sidebar-item-bg-active:var(--s-bg-color-extreme);--s-sidebar-item-color-active:var(--s-text-color-emphasis);--s-sidebar-item-font-weight-active:var(--s-font-weight-normal);--s-sidebar-line-width:3px;--s-sidebar-line-height:12px;--s-sidebar-line-bg:var(--s-color-primary);--s-sidebar-round-size:var(--s-border-radius)}.s-sidebar{overflow-x:hidden;overflow-y:auto;width:var(--s-sidebar-width);background:var(--s-sidebar-bg)}.s-sidebar-item{position:relative;padding:var(--s-sidebar-item-padding-y) var(--s-sidebar-item-padding-x);cursor:pointer;font-size:var(--s-sidebar-item-font-size);line-height:var(--s-line-height-snug);color:var(--s-sidebar-item-color);text-align:center}.s-sidebar-item:is(.is-current){font-weight:var(--s-sidebar-item-font-weight-active);color:var(--s-sidebar-item-color-active);background:var(--s-sidebar-item-bg-active)}.s-sidebar-item:is(.is-disabled){color:var(--s-text-color-disabled);cursor:var(--s-cursor-disabled)}.s-sidebar-item__title{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:2}.s-sidebar-item__line{position:absolute;top:50%;inset-inline-start:0;width:var(--s-sidebar-line-width);height:var(--s-sidebar-line-height);transform:translateY(-50%);background:var(--s-sidebar-line-bg)}.s-sidebar-item__round-top,.s-sidebar-item__round-bottom{position:absolute;inset-inline-end:0;width:var(--s-sidebar-round-size);height:var(--s-sidebar-round-size);background:var(--s-sidebar-item-bg-active);pointer-events:none}.s-sidebar-item__round-top::before,.s-sidebar-item__round-bottom::before{content:"";display:flex;width:100%;height:100%;background:var(--s-sidebar-bg)}.s-sidebar-item__round-top{bottom:100%}:root:not([dir=rtl]) .s-sidebar-item__round-top::before{border-bottom-right-radius:100%}:root[dir=rtl] .s-sidebar-item__round-top::before{border-bottom-left-radius:100%}.s-sidebar-item__round-bottom{top:100%}:root:not([dir=rtl]) .s-sidebar-item__round-bottom::before{border-top-right-radius:100%}:root[dir=rtl] .s-sidebar-item__round-bottom::before{border-top-left-radius:100%}

package/components/sidebar/index.d.ts

@@ -0,0 +1,7 @@
+import { type EnhancedComponent } from '../../utils';
+import _Sidebar from './sidebar.vue';
+import _SidebarItem from './sidebar-item.vue';
+export declare const Sidebar: EnhancedComponent<typeof _Sidebar>;
+export declare const SidebarItem: EnhancedComponent<typeof _SidebarItem>;
+export default Sidebar;
+export type { SidebarProps, SidebarSlots, SidebarEmits, SidebarExpose, SidebarItemProps, SidebarItemSlots, SidebarItemEmits, SidebarItemExpose, } from './common';

package/components/sidebar/index.js

@@ -0,0 +1,8 @@
+import { enhanceComponent } from "../../utils/component.js";
+import sidebar_default from "./sidebar.js";
+import sidebar_item_default from "./sidebar-item.js";
+//#region packages/sard/components/sidebar/index.ts
+const Sidebar = enhanceComponent(sidebar_default);
+const SidebarItem = enhanceComponent(sidebar_item_default);
+//#endregion
+export { Sidebar, Sidebar as default, SidebarItem };

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

@@ -0,0 +1,15 @@
+import { type SidebarItemProps, type SidebarItemSlots, type SidebarItemExpose } from './common';
+type __VLS_Slots = SidebarItemSlots;
+declare const __VLS_base: import("vue").DefineComponent<SidebarItemProps, SidebarItemExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<SidebarItemProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, 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/sidebar/sidebar-item.js

@@ -0,0 +1,83 @@
+import { createBem } from "../../utils/bem.js";
+import { sidebarContextKey } from "./common.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, inject, nextTick, normalizeClass, onMounted, onUnmounted, openBlock, reactive, renderSlot, toDisplayString, toRef, unref, useTemplateRef } from "vue";
+//#region packages/sard/components/sidebar/sidebar-item.vue
+var sidebar_item_default = /*@__PURE__*/ defineComponent({
+	__name: "sidebar-item",
+	props: {
+		title: {
+			type: String,
+			required: false
+		},
+		name: {
+			type: [String, Number],
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		}
+	},
+	emits: ["click"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("sidebar-item");
+		const context = inject(sidebarContextKey);
+		if (!context) throw new Error("SidebarItem must be included in Sidebar.");
+		const isCurrent = computed(() => {
+			return context.current === props.name;
+		});
+		const member = reactive({
+			el: useTemplateRef("item"),
+			name: toRef(() => props.name)
+		});
+		const select = () => {
+			context.select(member);
+		};
+		const onClick = (event) => {
+			emit("click", event);
+			if (!props.disabled) select();
+		};
+		onMounted(() => {
+			context.addMember(member);
+			if (isCurrent.value) nextTick(() => {
+				select();
+			});
+		});
+		onUnmounted(() => {
+			context.removeMember(member);
+		});
+		const sidebarItemClass = computed(() => {
+			return [
+				bem.b(),
+				bem.is("current", isCurrent.value),
+				bem.is("disabled", props.disabled)
+			];
+		});
+		__expose({});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref: "item",
+				class: normalizeClass(sidebarItemClass.value),
+				onClick
+			}, [
+				isCurrent.value && unref(context).round ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(unref(bem).e("round-top"))
+				}, null, 2)) : createCommentVNode("v-if", true),
+				isCurrent.value && unref(context).line ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(unref(bem).e("line"))
+				}, null, 2)) : createCommentVNode("v-if", true),
+				renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("div", { class: normalizeClass(unref(bem).e("title")) }, toDisplayString(__props.title), 3)]),
+				isCurrent.value && unref(context).round ? (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: normalizeClass(unref(bem).e("round-bottom"))
+				}, null, 2)) : createCommentVNode("v-if", true)
+			], 2);
+		};
+	}
+});
+//#endregion
+export { sidebar_item_default as default };

package/components/sidebar/sidebar.d.ts

@@ -0,0 +1,17 @@
+import { type SidebarProps, type SidebarSlots, type SidebarExpose } from './common';
+type __VLS_Slots = SidebarSlots;
+declare const __VLS_base: import("vue").DefineComponent<SidebarProps, SidebarExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (value: string | number) => any;
+    "update:modelValue": (value: string | number) => any;
+}, string, import("vue").PublicProps, Readonly<SidebarProps> & Readonly<{
+    onChange?: ((value: string | number) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, 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/sidebar/sidebar.js

@@ -0,0 +1,79 @@
+import { createBem } from "../../utils/bem.js";
+import { isNullish } from "../../utils/is.js";
+import { scrollToTarget } from "../../utils/geometry.js";
+import { sidebarContextKey } from "./common.js";
+import { createElementBlock, defineComponent, normalizeClass, openBlock, provide, reactive, ref, renderSlot, toRef, unref, useTemplateRef, watch } from "vue";
+//#region packages/sard/components/sidebar/sidebar.vue
+var sidebar_default = /*@__PURE__*/ defineComponent({
+	__name: "sidebar",
+	props: {
+		modelValue: {
+			type: [String, Number],
+			required: false
+		},
+		round: {
+			type: Boolean,
+			required: false
+		},
+		line: {
+			type: Boolean,
+			required: false
+		},
+		scrollIntoViewOptions: {
+			type: Object,
+			required: false
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("sidebar");
+		const innerCurrent = ref(props.modelValue);
+		const members = reactive([]);
+		const scrollRef = useTemplateRef("scroll");
+		const scrollIntoView = (name) => {
+			const member = members.find((member) => member.name === name);
+			if (!member) return;
+			scrollToTarget(scrollRef.value, member.el, {
+				...props.scrollIntoViewOptions,
+				vertical: true
+			});
+		};
+		watch(() => props.modelValue, () => {
+			if (!isNullish(props.modelValue) && props.modelValue !== innerCurrent.value) {
+				innerCurrent.value = props.modelValue;
+				scrollIntoView(props.modelValue);
+			}
+		});
+		provide(sidebarContextKey, reactive({
+			current: innerCurrent,
+			round: toRef(() => props.round),
+			line: toRef(() => props.line),
+			addMember(member) {
+				if (!members.includes(member)) members.push(member);
+			},
+			removeMember(member) {
+				const index = members.indexOf(member);
+				if (index !== -1) members.splice(index, 1);
+			},
+			select(member) {
+				const name = member.name;
+				if (name !== innerCurrent.value) {
+					innerCurrent.value = name;
+					emit("update:modelValue", name);
+					emit("change", name);
+				}
+			}
+		}));
+		__expose({});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref: "scroll",
+				class: normalizeClass(unref(bem).b())
+			}, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+export { sidebar_default as default };

package/components/signature/common.d.ts

@@ -0,0 +1,27 @@
+import { type DefaultProps } from '../config';
+export interface SignatureProps {
+    color?: string;
+    lineWidth?: number;
+    background?: string;
+    fullScreen?: boolean;
+    visible?: boolean;
+    cancelText?: string;
+    clearText?: string;
+    confirmText?: string;
+    type?: string;
+    quality?: number;
+}
+export declare const defaultSignatureProps: DefaultProps<SignatureProps>;
+export interface SignatureSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface SignatureEmits {
+    (e: 'update:visible', visible: boolean): void;
+    (e: 'confirm', dataURL: string): void;
+    (e: 'clear'): void;
+    (e: 'cancel'): void;
+}
+export interface SignatureExpose {
+    clear: () => void;
+    confirm: () => void;
+}

package/components/signature/common.js

@@ -0,0 +1,10 @@
+//#region packages/sard/components/signature/common.ts
+const defaultSignatureProps = {
+	lineWidth: 3,
+	fullScreen: false,
+	color: "#000",
+	type: "image/png",
+	quality: .92
+};
+//#endregion
+export { defaultSignatureProps };

package/components/signature/index.css

@@ -0,0 +1 @@
+:root{--s-signature-canvas-height:200px;--s-signature-canvas-bg:var(--s-white);--s-signature-full-bg:var(--s-fill-color-tertiary);--s-signature-full-gap:var(--s-size);--s-signature-side-width:52px}.dark{--s-signature-canvas-bg:var(--s-gray-900)}.s-signature__body{width:100%;height:var(--s-signature-canvas-height)}.s-signature__body canvas{width:100%;height:100%;background:var(--s-signature-canvas-bg)}.s-signature__footer{margin-top:10px}.s-signature__footer-content{display:flex;flex-direction:row}.s-signature__button-group{display:flex;margin-inline-start:auto;gap:10px}.s-signature__button-group .s-button{padding:0 16px}.s-signature--full{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--s-signature-full-bg);touch-action:none;display:flex;flex-direction:row-reverse;direction:ltr}.s-signature--full .s-signature__content{display:flex;flex-direction:row-reverse;flex:1;min-height:0;direction:ltr}.s-signature--full .s-signature__body{width:calc(100vw - var(--s-signature-side-width));height:100%;padding:calc(var(--s-signature-full-gap) + var(--s-status-bar-height)) var(--s-signature-full-gap) calc(var(--s-signature-full-gap) + var(--s-safe-bottom)) 0}.s-signature--full .s-signature__footer{position:relative;width:var(--s-signature-side-width);height:100%;margin-top:0}.s-signature--full .s-signature__footer-content{position:absolute;right:100%;bottom:0;width:100vh;height:var(--s-signature-side-width);padding-inline-start:calc(var(--s-signature-full-gap) + var(--s-status-bar-height));padding-inline-end:calc(var(--s-signature-full-gap) + var(--s-safe-bottom));align-items:center;transform-origin:right bottom;transform:rotate(90deg)}

package/components/signature/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Signature from './signature.vue';
+export declare const Signature: EnhancedComponent<typeof _Signature>;
+export default Signature;
+export type { SignatureProps, SignatureSlots, SignatureEmits, SignatureExpose } from './common';

package/components/signature/index.js

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

package/components/signature/signature.d.ts

@@ -0,0 +1,32 @@
+import { type SignatureProps, type SignatureSlots, type SignatureExpose } from './common';
+type __VLS_Slots = SignatureSlots;
+declare const __VLS_base: import("vue").DefineComponent<SignatureProps, SignatureExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    clear: () => any;
+    cancel: () => any;
+    "update:visible": (visible: boolean) => any;
+    confirm: (dataURL: string) => any;
+}, string, import("vue").PublicProps, Readonly<SignatureProps> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    onConfirm?: ((dataURL: string) => any) | undefined;
+}>, {
+    background: string;
+    type: string;
+    visible: boolean;
+    color: string;
+    cancelText: string;
+    confirmText: string;
+    quality: number;
+    lineWidth: number;
+    fullScreen: boolean;
+    clearText: string;
+}, {}, {}, {}, 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;
+    };
+};