sard 1.0.0 → 1.0.2

package/components/progress-circle/common.js

@@ -0,0 +1,7 @@
+//#region packages/sard/components/progress-circle/common.ts
+const defaultProgressCircleProps = {
+	percent: 0,
+	thickness: 4
+};
+//#endregion
+export { defaultProgressCircleProps };

package/components/progress-circle/index.css

@@ -0,0 +1 @@
+:root{--s-progress-circle-size:100px;--s-progress-circle-track-bg:var(--s-fill-color-secondary);--s-progress-circle-fill-bg:var(--s-color-primary);--s-progress-circle-text-font-size:var(--s-font-size);--s-progress-circle-status-font-size:18px;--s-progress-circle-color-success:var(--s-color-success);--s-progress-circle-color-warning:var(--s-color-warning);--s-progress-circle-color-error:var(--s-color-danger)}.s-progress-circle{position:relative;display:inline-flex;justify-content:center;align-items:center;width:var(--s-progress-circle-size);height:var(--s-progress-circle-size)}.s-progress-circle__graph{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.s-progress-circle__track{stroke:var(--s-progress-circle-track-bg)}.s-progress-circle__fill{stroke:var(--s-progress-circle-fill-bg);transition:stroke-dasharray var(--s-duration) ease}.s-progress-circle__text{font-size:var(--s-progress-circle-text-font-size)}.s-progress-circle__status{font-size:var(--s-progress-circle-status-font-size)}.s-progress-circle--success .s-progress-circle__fill{stroke:var(--s-progress-circle-color-success)}.s-progress-circle--success .s-progress-circle__status{color:var(--s-progress-circle-color-success)}.s-progress-circle--warning .s-progress-circle__fill{stroke:var(--s-progress-circle-color-warning)}.s-progress-circle--warning .s-progress-circle__status{color:var(--s-progress-circle-color-warning)}.s-progress-circle--error .s-progress-circle__fill{stroke:var(--s-progress-circle-color-error)}.s-progress-circle--error .s-progress-circle__status{color:var(--s-progress-circle-color-error)}

package/components/progress-circle/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _ProgressCircle from './progress-circle.vue';
+export declare const ProgressCircle: EnhancedComponent<typeof _ProgressCircle>;
+export default ProgressCircle;
+export type { ProgressCircleProps, ProgressCircleSlots } from './common';

package/components/progress-circle/index.js

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

package/components/progress-circle/progress-circle.d.ts

@@ -0,0 +1,18 @@
+import { type ProgressCircleProps, type ProgressCircleSlots } from './common';
+type __VLS_Slots = ProgressCircleSlots;
+declare const __VLS_base: import("vue").DefineComponent<ProgressCircleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressCircleProps> & Readonly<{}>, {
+    size: string;
+    color: string;
+    status: "success" | "warning" | "error";
+    percent: number;
+    trackColor: string;
+    thickness: 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/progress-circle/progress-circle.js

@@ -0,0 +1,100 @@
+import { createBem } from "../../utils/bem.js";
+import { defaultProgressCircleProps } from "./common.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString, unref } from "vue";
+import { CheckCircleFill, WarningFill, XCircleFill } from "@sard/icons";
+//#region packages/sard/components/progress-circle/progress-circle.vue
+const _hoisted_1 = ["stroke-width", "r"];
+const _hoisted_2 = [
+	"stroke-dasharray",
+	"stroke-width",
+	"r"
+];
+var progress_circle_default = /*@__PURE__*/ defineComponent({
+	__name: "progress-circle",
+	props: /*@__PURE__*/ mergeDefaults({
+		percent: {
+			type: Number,
+			required: false
+		},
+		color: {
+			type: String,
+			required: false
+		},
+		trackColor: {
+			type: String,
+			required: false
+		},
+		thickness: {
+			type: Number,
+			required: false
+		},
+		size: {
+			type: String,
+			required: false
+		},
+		status: {
+			type: String,
+			required: false
+		}
+	}, defaultProgressCircleProps),
+	setup(__props) {
+		const props = __props;
+		const bem = createBem("progress-circle");
+		const getRingPercent = (percent, r) => {
+			const perimeter = Math.PI * 2 * r;
+			return percent / 100 * perimeter + " " + perimeter;
+		};
+		const radius = computed(() => {
+			return 50 - props.thickness / 2;
+		});
+		const progressCircleClass = computed(() => {
+			return [bem.b(), bem.m(props.status, props.status)];
+		});
+		const progressCircleStyle = computed(() => {
+			return {
+				width: props.size,
+				height: props.size
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(progressCircleClass.value),
+				style: normalizeStyle(progressCircleStyle.value)
+			}, [(openBlock(), createElementBlock("svg", {
+				viewBox: "0 0 100 100",
+				class: normalizeClass(unref(bem).e("graph"))
+			}, [createElementVNode("circle", {
+				cx: "50",
+				cy: "50",
+				fill: "none",
+				class: normalizeClass(unref(bem).e("track")),
+				"stroke-width": __props.thickness,
+				r: radius.value,
+				style: normalizeStyle({ stroke: __props.trackColor })
+			}, null, 14, _hoisted_1), createElementVNode("circle", {
+				cx: "50",
+				cy: "50",
+				fill: "none",
+				class: normalizeClass(unref(bem).e("fill")),
+				"stroke-dashoffset": "0",
+				"stroke-linecap": "round",
+				transform: "rotate(-90)",
+				"stroke-dasharray": getRingPercent(__props.percent, radius.value),
+				"stroke-width": __props.thickness,
+				r: radius.value,
+				style: normalizeStyle({
+					transformOrigin: "center",
+					stroke: __props.color
+				})
+			}, null, 14, _hoisted_2)], 2)), renderSlot(_ctx.$slots, "default", {}, () => [!__props.status ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(bem).e("text"))
+			}, toDisplayString(__props.percent) + "%", 3)) : createCommentVNode("v-if", true), __props.status ? (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass(unref(bem).e("status"))
+			}, [__props.status === "success" ? (openBlock(), createBlock(unref(CheckCircleFill), { key: 0 })) : __props.status === "warning" ? (openBlock(), createBlock(unref(WarningFill), { key: 1 })) : __props.status === "error" ? (openBlock(), createBlock(unref(XCircleFill), { key: 2 })) : createCommentVNode("v-if", true)], 2)) : createCommentVNode("v-if", true)])], 6);
+		};
+	}
+});
+//#endregion
+export { progress_circle_default as default };

package/components/pull-down-refresh/common.d.ts

@@ -0,0 +1,26 @@
+import { type DefaultProps } from '../config';
+export type PullDownRefreshStatus = 'initial' | 'unready' | 'ready' | 'loading' | 'done' | 'recovering';
+export interface PullDownRefreshProps {
+    threshold?: number;
+    headerHeight?: number;
+    loading?: boolean;
+    transitionDuration?: number;
+    doneDuration?: number;
+    disabled?: boolean;
+}
+export declare const defaultPullDownRefreshProps: DefaultProps<PullDownRefreshProps>;
+export interface PullDownRefreshSlots {
+    default?(props: Record<string, never>): any;
+    unready?(props: {
+        progress: number;
+    }): any;
+    ready?(props: Record<string, never>): any;
+    loading?(props: Record<string, never>): any;
+    done?(props: Record<string, never>): any;
+}
+export interface PullDownRefreshEmits {
+    (e: 'refresh'): void;
+}
+export interface PullDownRefreshExpose {
+    enableToRefresh: (canRefresh: boolean) => void;
+}

package/components/pull-down-refresh/common.js

@@ -0,0 +1,11 @@
+//#region packages/sard/components/pull-down-refresh/common.ts
+const defaultPullDownRefreshProps = {
+	threshold: 50,
+	headerHeight: 50,
+	transitionDuration: 300,
+	doneDuration: 0,
+	loading: false,
+	disabled: false
+};
+//#endregion
+export { defaultPullDownRefreshProps };

package/components/pull-down-refresh/index.css

@@ -0,0 +1 @@
+:root{--s-pull-down-refresh-header-font-size:var(--s-font-size-sm);--s-pull-down-refresh-header-color:var(--s-text-color-tertiary);--s-pull-down-refresh-loading-font-size:18px}.s-pull-down-refresh{transition-property:transform}.s-pull-down-refresh__header{position:absolute;top:0;left:0;width:100%;display:flex;justify-content:center;align-items:center;transform:translateY(-100%);font-size:var(--s-pull-down-refresh-header-font-size);color:var(--s-pull-down-refresh-header-color)}.s-pull-down-refresh__loading{font-size:var(--s-pull-down-refresh-loading-font-size)}

package/components/pull-down-refresh/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _PullDownRefresh from './pull-down-refresh.vue';
+export declare const PullDownRefresh: EnhancedComponent<typeof _PullDownRefresh>;
+export default PullDownRefresh;
+export type { PullDownRefreshStatus, PullDownRefreshProps, PullDownRefreshSlots, PullDownRefreshEmits, PullDownRefreshExpose, } from './common';

package/components/pull-down-refresh/index.js

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

package/components/pull-down-refresh/pull-down-refresh.d.ts

@@ -0,0 +1,22 @@
+import { type PullDownRefreshProps, type PullDownRefreshSlots, type PullDownRefreshExpose } from './common';
+type __VLS_Slots = PullDownRefreshSlots;
+declare const __VLS_base: import("vue").DefineComponent<PullDownRefreshProps, PullDownRefreshExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    refresh: () => any;
+}, string, import("vue").PublicProps, Readonly<PullDownRefreshProps> & Readonly<{
+    onRefresh?: (() => any) | undefined;
+}>, {
+    loading: boolean;
+    threshold: number;
+    disabled: boolean;
+    transitionDuration: number;
+    headerHeight: number;
+    doneDuration: 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/pull-down-refresh/pull-down-refresh.js

@@ -0,0 +1,160 @@
+import { createBem } from "../../utils/bem.js";
+import { useTimeout } from "../../use/useTimeout.js";
+import { usePointerDown } from "../../use/usePointerDown.js";
+import loading_default from "../loading/loading.js";
+import { defaultPullDownRefreshProps } from "./common.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderSlot, unref, watch } from "vue";
+//#region packages/sard/components/pull-down-refresh/pull-down-refresh.vue
+var pull_down_refresh_default = /*@__PURE__*/ defineComponent({
+	__name: "pull-down-refresh",
+	props: /*@__PURE__*/ mergeDefaults({
+		threshold: {
+			type: Number,
+			required: false
+		},
+		headerHeight: {
+			type: Number,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false
+		},
+		transitionDuration: {
+			type: Number,
+			required: false
+		},
+		doneDuration: {
+			type: Number,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		}
+	}, defaultPullDownRefreshProps),
+	emits: ["refresh"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("pull-down-refresh");
+		const status = ref("initial");
+		const translateY = ref(0);
+		const progress = computed(() => {
+			return Math.min(translateY.value / props.threshold, 1);
+		});
+		const initialTimer = useTimeout();
+		const recoveringTimer = useTimeout();
+		const toLoading = () => {
+			recoveringTimer.clear();
+			initialTimer.clear();
+			status.value = "loading";
+			translateY.value = props.headerHeight;
+		};
+		const toRecovering = () => {
+			status.value = "recovering";
+			translateY.value = 0;
+			initialTimer.set(() => {
+				status.value = "initial";
+			}, props.transitionDuration);
+		};
+		const toDone = () => {
+			status.value = "done";
+			recoveringTimer.set(() => {
+				toRecovering();
+			}, props.doneDuration);
+		};
+		watch(() => props.loading, () => {
+			if (props.loading) toLoading();
+			else toDone();
+		});
+		onMounted(() => {
+			if (props.loading) toLoading();
+		});
+		let startX = 0;
+		let startY = 0;
+		let movable = false;
+		let lockDirection = "";
+		const isDragging = ref(false);
+		const onTouchStart = (event) => {
+			if (props.disabled || status.value !== "initial" || !canRefresh.value) return;
+			startX = event.touches[0].clientX;
+			startY = event.touches[0].clientY;
+			movable = true;
+		};
+		const onTouchMove = (event) => {
+			if (!movable || lockDirection && lockDirection !== "down") return;
+			const deltaX = event.touches[0].clientX - startX;
+			const deltaY = event.touches[0].clientY - startY;
+			if (!lockDirection) lockDirection = Math.abs(deltaY) >= Math.abs(deltaX) && deltaY > 0 ? "down" : "others";
+			if (lockDirection === "down") {
+				const offsetY = Math.max(deltaY, 0) / 2;
+				status.value = offsetY >= props.threshold ? "ready" : "unready";
+				translateY.value = offsetY;
+				isDragging.value = true;
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+		};
+		const onTouchEnd = () => {
+			movable = false;
+			lockDirection = "";
+			isDragging.value = false;
+			switch (status.value) {
+				case "unready":
+					toRecovering();
+					return;
+				case "ready":
+					toLoading();
+					emit("refresh");
+					return;
+			}
+		};
+		const onPointerDown = usePointerDown(onTouchStart, onTouchMove, onTouchEnd);
+		const canRefresh = ref(true);
+		const enableToRefresh = (can) => {
+			canRefresh.value = can;
+		};
+		__expose({ enableToRefresh });
+		const pullDownRefreshStyle = computed(() => {
+			return {
+				transform: `translate3d(0,${translateY.value}px,0)`,
+				transitionDuration: (isDragging.value ? 0 : props.transitionDuration) + "ms"
+			};
+		});
+		const headerStyle = computed(() => {
+			return { height: props.headerHeight + "px" };
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(unref(bem).b()),
+				style: normalizeStyle(pullDownRefreshStyle.value),
+				onTouchstart: onTouchStart,
+				onTouchmove: onTouchMove,
+				onTouchend: onTouchEnd,
+				onTouchcancel: onTouchEnd,
+				onPointerdown: _cache[0] || (_cache[0] = (...args) => unref(onPointerDown) && unref(onPointerDown)(...args))
+			}, [createElementVNode("div", {
+				class: normalizeClass(unref(bem).e("header")),
+				style: normalizeStyle(headerStyle.value)
+			}, [status.value === "unready" ? renderSlot(_ctx.$slots, "unready", {
+				key: 0,
+				progress: progress.value
+			}, () => [createVNode(loading_default, {
+				type: "clock",
+				class: normalizeClass(unref(bem).e("loading")),
+				animated: false,
+				progress: progress.value
+			}, null, 8, ["class", "progress"])]) : status.value === "ready" ? renderSlot(_ctx.$slots, "ready", { key: 1 }, () => [createVNode(loading_default, {
+				type: "clock",
+				class: normalizeClass(unref(bem).e("loading")),
+				animated: false
+			}, null, 8, ["class"])]) : status.value === "loading" ? renderSlot(_ctx.$slots, "loading", { key: 2 }, () => [createVNode(loading_default, {
+				type: "clock",
+				class: normalizeClass(unref(bem).e("loading"))
+			}, null, 8, ["class"])]) : status.value === "done" ? renderSlot(_ctx.$slots, "done", { key: 3 }) : createCommentVNode("v-if", true)], 6), renderSlot(_ctx.$slots, "default")], 38);
+		};
+	}
+});
+//#endregion
+export { pull_down_refresh_default as default };

package/components/puzzle-verify/common.d.ts

@@ -0,0 +1,13 @@
+import { type DefaultProps } from '../config';
+import { type SlideVerifyEmits, type SlideVerifyExpose, type SlideVerifyProps, type SlideVerifySlots } from '../slide-verify/common';
+export interface PuzzleVerifyProps extends SlideVerifyProps {
+    src?: string;
+    aspectRatio?: number;
+}
+export declare const defaultPuzzleVerifyProps: DefaultProps<PuzzleVerifyProps>;
+export interface PuzzleVerifySlots extends SlideVerifySlots {
+}
+export interface PuzzleVerifyEmits extends SlideVerifyEmits {
+}
+export interface PuzzleVerifyExpose extends SlideVerifyExpose {
+}

package/components/puzzle-verify/common.js

@@ -0,0 +1,4 @@
+//#region packages/sard/components/puzzle-verify/common.ts
+const defaultPuzzleVerifyProps = { resetWhenError: true };
+//#endregion
+export { defaultPuzzleVerifyProps };

package/components/puzzle-verify/index.css

@@ -0,0 +1 @@
+:root{--s-puzzle-verify-image-margin-bottom:var(--s-size-sm);--s-puzzle-verify-piece-width:var(--s-content-height);--s-puzzle-verify-piece-height:var(--s-content-height);--s-puzzle-verify-piece-box-shadow:2px 2px 15px rgba(0,0,0,.8);--s-puzzle-verify-hollow-box-shadow:inset 2px 2px 5px 0 rgba(0,0,0,.4)}.s-puzzle-verify{--valid-y: calc((100% - var(--s-puzzle-verify-piece-height)) * var(--y));--valid-target-x: calc((100% - var(--s-puzzle-verify-piece-width)) * var(--target-x));--valid-actual-x: calc((100% - var(--s-puzzle-verify-piece-width)) * var(--actual-x));--top: var(--valid-y);--right: calc(100% - var(--s-puzzle-verify-piece-width) - var(--valid-target-x));--bottom: calc(100% - var(--valid-y) - var(--s-puzzle-verify-piece-height));--left: var(--valid-target-x)}:root[dir=rtl] .s-puzzle-verify{--left: calc(100% - var(--s-puzzle-verify-piece-width) - var(--valid-target-x));--right: var(--valid-target-x)}.s-puzzle-verify__frame{position:relative;display:flex;padding-top:var(--padding-top);margin-bottom:var(--s-puzzle-verify-image-margin-bottom);overflow:hidden}.s-puzzle-verify__whole,.s-puzzle-verify__piece,.s-puzzle-verify__piece-img{position:absolute;top:0;left:0;width:100%;height:100%}.s-puzzle-verify__hollow{position:absolute;background-color:var(--s-white);top:var(--top);right:var(--right);bottom:var(--bottom);left:var(--left);box-shadow:var(--s-puzzle-verify-hollow-box-shadow)}.s-puzzle-verify__piece{inset-inline-start:var(--valid-actual-x);transform:translateX(calc(var(--valid-target-x) * -1));pointer-events:none;transition:var(--s-slide-verify-duration)}:root[dir=rtl] .s-puzzle-verify__piece{transform:translateX(var(--valid-target-x))}.s-puzzle-verify--down .s-puzzle-verify__piece{transition:none}.s-puzzle-verify__piece-img{clip-path:inset(var(--top) var(--right) var(--bottom) var(--left))}.s-puzzle-verify__piece-shadow{position:absolute;top:var(--top);right:var(--right);bottom:var(--bottom);left:var(--left);box-shadow:var(--s-puzzle-verify-piece-box-shadow);pointer-events:auto}

package/components/puzzle-verify/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _PuzzleVerify from './puzzle-verify.vue';
+export declare const PuzzleVerify: EnhancedComponent<typeof _PuzzleVerify>;
+export default PuzzleVerify;
+export type { PuzzleVerifyProps, PuzzleVerifySlots, PuzzleVerifyEmits, PuzzleVerifyExpose, } from './common';

package/components/puzzle-verify/index.js

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

package/components/puzzle-verify/puzzle-verify.d.ts

@@ -0,0 +1,32 @@
+import { type PuzzleVerifyProps, type PuzzleVerifySlots, type PuzzleVerifyExpose } from './common';
+type __VLS_Slots = PuzzleVerifySlots;
+declare const __VLS_base: import("vue").DefineComponent<PuzzleVerifyProps, PuzzleVerifyExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    start: (event: any) => any;
+    end: (event: any) => any;
+    change: (percent: number) => any;
+    move: (event: any) => any;
+}, string, import("vue").PublicProps, Readonly<PuzzleVerifyProps> & Readonly<{
+    onStart?: ((event: any) => any) | undefined;
+    onEnd?: ((event: any) => any) | undefined;
+    onChange?: ((percent: number) => any) | undefined;
+    onMove?: ((event: any) => any) | undefined;
+}>, {
+    text: string;
+    disabled: boolean;
+    src: string;
+    errorText: string;
+    targetPos: number;
+    successText: string;
+    resetWhenError: boolean;
+    showTarget: boolean;
+    verify: (result: import("../index.ts").SlideVerifyResult) => Promise<boolean> | boolean;
+    aspectRatio: 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/puzzle-verify/puzzle-verify.js

@@ -0,0 +1,149 @@
+import { createBem } from "../../utils/bem.js";
+import { clamp, random } from "../../utils/number.js";
+import { defaultPuzzleVerifyProps } from "./common.js";
+import slide_verify_default from "../slide-verify/slide-verify.js";
+import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, mergeDefaults, normalizeClass, normalizeStyle, openBlock, ref, unref } from "vue";
+//#region packages/sard/components/puzzle-verify/puzzle-verify.vue
+const _hoisted_1 = ["src"];
+const _hoisted_2 = ["src"];
+const defaultAspectRatio = 320 / 240;
+var puzzle_verify_default = /*@__PURE__*/ defineComponent({
+	__name: "puzzle-verify",
+	props: /*@__PURE__*/ mergeDefaults({
+		src: {
+			type: String,
+			required: false
+		},
+		aspectRatio: {
+			type: Number,
+			required: false
+		},
+		targetPos: {
+			type: Number,
+			required: false
+		},
+		text: {
+			type: String,
+			required: false
+		},
+		successText: {
+			type: String,
+			required: false
+		},
+		errorText: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		resetWhenError: {
+			type: Boolean,
+			required: false
+		},
+		showTarget: {
+			type: Boolean,
+			required: false
+		},
+		verify: {
+			type: Function,
+			required: false
+		}
+	}, defaultPuzzleVerifyProps),
+	emits: [
+		"start",
+		"move",
+		"end",
+		"change"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const bem = createBem("puzzle-verify");
+		const aspectRatio = ref(props.aspectRatio || defaultAspectRatio);
+		const onLoad = (event) => {
+			const { naturalWidth, naturalHeight } = event.target;
+			aspectRatio.value = naturalWidth / naturalHeight || defaultAspectRatio;
+		};
+		const percent = ref(0);
+		const onChange = (value) => {
+			percent.value = value;
+			emit("change", value);
+		};
+		const y = ref(random(20, 80));
+		const targetPos = computed(() => {
+			return clamp(props.targetPos ?? 100, 0, 100);
+		});
+		const slideVerifyRef = ref();
+		const reset = () => {
+			slideVerifyRef.value?.reset();
+			y.value = random(20, 80);
+		};
+		const isDown = ref(false);
+		const onStart = (event) => {
+			emit("start", event);
+			isDown.value = true;
+		};
+		const onEnd = (event) => {
+			emit("end", event);
+			isDown.value = false;
+		};
+		__expose({ reset });
+		const puzzleVerifyClass = computed(() => {
+			return [bem.b(), bem.m("down", isDown.value)];
+		});
+		const puzzleVerifyStyle = computed(() => {
+			return {
+				"--y": y.value / 100,
+				"--actual-x": percent.value / 100,
+				"--target-x": targetPos.value / 100,
+				"--padding-top": 1 / aspectRatio.value * 100 + "%"
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(puzzleVerifyClass.value),
+				style: normalizeStyle(puzzleVerifyStyle.value)
+			}, [createElementVNode("div", { class: normalizeClass(unref(bem).e("frame")) }, [
+				createElementVNode("img", {
+					class: normalizeClass(unref(bem).e("whole")),
+					src: __props.src,
+					onLoad
+				}, null, 42, _hoisted_1),
+				createElementVNode("div", { class: normalizeClass(unref(bem).e("hollow")) }, null, 2),
+				createElementVNode("div", { class: normalizeClass(unref(bem).e("piece")) }, [createElementVNode("img", {
+					mode: "widthFix",
+					class: normalizeClass(unref(bem).e("piece-img")),
+					src: __props.src
+				}, null, 10, _hoisted_2), createElementVNode("div", { class: normalizeClass(unref(bem).e("piece-shadow")) }, null, 2)], 2)
+			], 2), createVNode(slide_verify_default, {
+				ref_key: "slideVerifyRef",
+				ref: slideVerifyRef,
+				"target-pos": targetPos.value,
+				text: __props.text,
+				"success-text": __props.successText,
+				"error-text": __props.errorText,
+				disabled: __props.disabled,
+				"reset-when-error": __props.resetWhenError,
+				"show-target": __props.showTarget,
+				verify: __props.verify,
+				onStart,
+				onMove: _cache[0] || (_cache[0] = ($event) => emit("move", $event)),
+				onEnd,
+				onChange
+			}, null, 8, [
+				"target-pos",
+				"text",
+				"success-text",
+				"error-text",
+				"disabled",
+				"reset-when-error",
+				"show-target",
+				"verify"
+			])], 6);
+		};
+	}
+});
+//#endregion
+export { puzzle_verify_default as default };

package/components/qrcode/common.d.ts

@@ -0,0 +1,16 @@
+import { type DefaultProps } from '../config';
+export type QrcodeECL = 'L' | 'M' | 'Q' | 'H';
+export interface QrcodeProps {
+    text?: string;
+    ecl?: QrcodeECL;
+    size?: string;
+    color?: string;
+    bgColor?: string;
+    quietZoneModules?: number;
+    icon?: string;
+}
+export declare const defaultQrcodeProps: DefaultProps<QrcodeProps>;
+export interface QrcodeSlots {
+}
+export interface QrcodeEmits {
+}

package/components/qrcode/common.js

@@ -0,0 +1,11 @@
+//#region packages/sard/components/qrcode/common.ts
+const defaultQrcodeProps = {
+	ecl: "M",
+	size: "160px",
+	text: "",
+	color: "#000",
+	bgColor: "#fff",
+	quietZoneModules: 2
+};
+//#endregion
+export { defaultQrcodeProps };

package/components/qrcode/index.css

@@ -0,0 +1 @@
+.s-qrcode canvas{width:100%;height:100%}

package/components/qrcode/index.d.ts

@@ -0,0 +1,5 @@
+import { type EnhancedComponent } from '../../utils';
+import _Qrcode from './qrcode.vue';
+export declare const Qrcode: EnhancedComponent<typeof _Qrcode>;
+export default Qrcode;
+export type { QrcodeProps, QrcodeSlots, QrcodeECL } from './common';

package/components/qrcode/index.js

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