@sdata/web-vue 1.19.0 → 2.1.0

package/es/qr-code/index.js

@@ -0,0 +1,10 @@
+import { getComponentPrefix, setGlobalConfig } from "../_utils/global-config.js";
+import qr_code_default from "./qr-code.js";
+//#region components/qr-code/index.ts
+var QrCode = Object.assign(qr_code_default, { install: (app, options) => {
+	setGlobalConfig(app, options);
+	const componentPrefix = getComponentPrefix(options);
+	app.component(componentPrefix + qr_code_default.name, qr_code_default);
+} });
+//#endregion
+export { QrCode as default };

package/es/qr-code/qr-code-status.js

@@ -0,0 +1,5 @@
+import qr_code_status_vue_vue_type_script_setup_true_lang_default from "./qr-code-status.vue_vue_type_script_setup_true_lang.js";
+//#region components/qr-code/qr-code-status.vue
+var qr_code_status_default = qr_code_status_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { qr_code_status_default as default };

package/es/qr-code/qr-code-status.vue.d.ts

@@ -0,0 +1,8 @@
+import type { QrCodeStatusProps } from './types';
+declare const __VLS_export: import("vue").DefineComponent<QrCodeStatusProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    refresh: () => any;
+}, string, import("vue").PublicProps, Readonly<QrCodeStatusProps> & Readonly<{
+    onRefresh?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/es/qr-code/qr-code-status.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,30 @@
+import Spin from "../spin/index.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, normalizeProps, openBlock, unref } from "vue";
+//#region components/qr-code/qr-code-status.vue?vue&type=script&setup=true&lang.ts
+var qr_code_status_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "qr-code-status",
+	props: {
+		prefixCls: {},
+		status: {},
+		spinProps: {}
+	},
+	emits: ["refresh"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const handleRefresh = () => {
+			emit("refresh");
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(`${__props.prefixCls}-status`) }, [__props.status === "loading" ? (openBlock(), createBlock(unref(Spin), normalizeProps(mergeProps({ key: 0 }, __props.spinProps)), null, 16)) : __props.status === "expired" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("p", { class: normalizeClass(`${__props.prefixCls}-expired`) }, "二维码已过期", 2), createElementVNode("button", {
+				type: "button",
+				class: normalizeClass(`${__props.prefixCls}-refresh-btn`),
+				onClick: handleRefresh
+			}, " 刷新 ", 2)], 64)) : __props.status === "scanned" ? (openBlock(), createElementBlock("p", {
+				key: 2,
+				class: normalizeClass(`${__props.prefixCls}-scanned`)
+			}, "二维码已扫码", 2)) : createCommentVNode("", true)], 2);
+		};
+	}
+});
+//#endregion
+export { qr_code_status_vue_vue_type_script_setup_true_lang_default as default };

package/es/qr-code/qr-code.js

@@ -0,0 +1,5 @@
+import qr_code_vue_vue_type_script_setup_true_lang_default from "./qr-code.vue_vue_type_script_setup_true_lang.js";
+//#region components/qr-code/qr-code.vue
+var qr_code_default = qr_code_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { qr_code_default as default };

package/es/qr-code/qr-code.vue.d.ts

@@ -0,0 +1,167 @@
+import type { PropType, VNodeChild } from 'vue';
+import type { SpinProps } from '../spin';
+import type { QrCodeErrorLevel, QrCodeIconSize, QrCodeStatusRenderInfo, QrCodeStatusType, QrCodeType, QrCodeValue } from './types';
+type __VLS_Slots = {
+    icon?: () => VNodeChild;
+    status?: (props: QrCodeStatusRenderInfo) => VNodeChild;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: PropType<QrCodeValue>;
+        required: false;
+    };
+    type: {
+        type: PropType<QrCodeType>;
+        default: string;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    iconAlt: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    iconSize: {
+        type: PropType<QrCodeIconSize>;
+        default: number;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    bgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    bordered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    errorLevel: {
+        type: PropType<QrCodeErrorLevel>;
+        default: string;
+    };
+    boostLevel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    marginSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    status: {
+        type: PropType<QrCodeStatusType>;
+        default: string;
+    };
+    statusRender: {
+        type: PropType<(info: QrCodeStatusRenderInfo) => VNodeChild>;
+        default: undefined;
+    };
+    spinProps: {
+        type: PropType<SpinProps>;
+        default: undefined;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    refresh: () => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: PropType<QrCodeValue>;
+        required: false;
+    };
+    type: {
+        type: PropType<QrCodeType>;
+        default: string;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    iconAlt: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    iconSize: {
+        type: PropType<QrCodeIconSize>;
+        default: number;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    bgColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    bordered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    errorLevel: {
+        type: PropType<QrCodeErrorLevel>;
+        default: string;
+    };
+    boostLevel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    marginSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    status: {
+        type: PropType<QrCodeStatusType>;
+        default: string;
+    };
+    statusRender: {
+        type: PropType<(info: QrCodeStatusRenderInfo) => VNodeChild>;
+        default: undefined;
+    };
+    spinProps: {
+        type: PropType<SpinProps>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onRefresh?: (() => any) | undefined;
+}>, {
+    type: QrCodeType;
+    color: string;
+    size: number;
+    icon: string;
+    bordered: boolean;
+    status: QrCodeStatusType;
+    spinProps: Partial<{
+        dot: boolean;
+        loading: boolean;
+        hideIcon: boolean;
+    }> & Omit<{
+        readonly dot: boolean;
+        readonly loading: boolean;
+        readonly hideIcon: boolean;
+        readonly size?: number | undefined;
+        readonly tip?: string | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "dot" | "loading" | "hideIcon">;
+    iconAlt: string;
+    iconSize: QrCodeIconSize;
+    bgColor: string;
+    errorLevel: QrCodeErrorLevel;
+    boostLevel: boolean;
+    marginSize: number;
+    statusRender: (info: QrCodeStatusRenderInfo) => VNodeChild;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/es/qr-code/qr-code.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,313 @@
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import { _asyncToGenerator } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/asyncToGenerator.js";
+import qr_code_status_default from "./qr-code-status.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, useSlots, watch } from "vue";
+import QRCode from "qrcode";
+//#region components/qr-code/qr-code.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["innerHTML"];
+var _hoisted_2 = ["src", "alt"];
+var qr_code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "QrCode" }), {}, {
+	__name: "qr-code",
+	props: {
+		/**
+		* @zh 扫描后的文本
+		* @en Text encoded in the QR code
+		*/
+		value: {
+			type: [String, Array],
+			required: false
+		},
+		/**
+		* @zh 渲染类型
+		* @en Render type
+		* @values 'canvas', 'svg'
+		*/
+		type: {
+			type: String,
+			default: "canvas"
+		},
+		/**
+		* @zh 二维码中的图片地址
+		* @en Image source rendered at the center of QR code
+		*/
+		icon: {
+			type: String,
+			default: ""
+		},
+		/**
+		* @zh 图片描述
+		* @en Image alt text
+		*/
+		iconAlt: {
+			type: String,
+			default: "qr-code-icon"
+		},
+		/**
+		* @zh 二维码尺寸
+		* @en QR code size
+		*/
+		size: {
+			type: Number,
+			default: 160
+		},
+		/**
+		* @zh 二维码中图片尺寸
+		* @en Center image size
+		*/
+		iconSize: {
+			type: [Number, Object],
+			default: 40
+		},
+		/**
+		* @zh 二维码前景色
+		* @en Foreground color of QR code
+		*/
+		color: {
+			type: String,
+			default: "#1D2129"
+		},
+		/**
+		* @zh 二维码背景色
+		* @en Background color of QR code
+		*/
+		bgColor: {
+			type: String,
+			default: "transparent"
+		},
+		/**
+		* @zh 是否显示边框
+		* @en Whether to show border
+		*/
+		bordered: {
+			type: Boolean,
+			default: true
+		},
+		/**
+		* @zh 二维码纠错等级
+		* @en Error correction level
+		* @values 'L', 'M', 'Q', 'H'
+		*/
+		errorLevel: {
+			type: String,
+			default: "M"
+		},
+		/**
+		* @zh 是否启用增强纠错（由底层库决定是否生效）
+		* @en Whether to enable boost-level optimization
+		*/
+		boostLevel: {
+			type: Boolean,
+			default: true
+		},
+		/**
+		* @zh 留白（安静区）大小
+		* @en Margin size in module units
+		*/
+		marginSize: {
+			type: Number,
+			default: 0
+		},
+		/**
+		* @zh 二维码状态
+		* @en QR code status
+		* @values 'active', 'expired', 'loading', 'scanned'
+		*/
+		status: {
+			type: String,
+			default: "active"
+		},
+		/**
+		* @zh 自定义状态渲染
+		* @en Custom status renderer
+		*/
+		statusRender: {
+			type: Function,
+			default: void 0
+		},
+		/**
+		* @zh 加载态 spin 参数
+		* @en Spin props for loading status
+		*/
+		spinProps: {
+			type: Object,
+			default: void 0
+		}
+	},
+	emits: ["refresh"],
+	setup(__props, { emit: __emit }) {
+		const RenderNode = defineComponent({
+			name: "RenderNode",
+			props: { node: {
+				type: [
+					Object,
+					String,
+					Number,
+					Boolean,
+					Array
+				],
+				default: null
+			} },
+			setup(renderProps) {
+				return () => renderProps.node;
+			}
+		});
+		const slots = useSlots();
+		const props = __props;
+		const emit = __emit;
+		const prefixCls = getPrefixCls("qr-code");
+		const canvasRef = ref();
+		const svgMarkup = ref("");
+		const handleRefresh = () => {
+			emit("refresh");
+		};
+		const mergedValue = computed(() => {
+			var _props$value;
+			if (Array.isArray(props.value)) return props.value.join("\n");
+			return (_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : "";
+		});
+		const hasValue = computed(() => Boolean(mergedValue.value));
+		const hasIcon = computed(() => Boolean(props.icon || slots.icon));
+		const inactiveStatus = computed(() => props.status === "active" ? null : props.status);
+		const iconWidth = computed(() => typeof props.iconSize === "number" ? props.iconSize : props.iconSize.width);
+		const iconHeight = computed(() => typeof props.iconSize === "number" ? props.iconSize : props.iconSize.height);
+		const iconStyle = computed(() => ({
+			width: `${iconWidth.value}px`,
+			height: `${iconHeight.value}px`
+		}));
+		const customStatusNode = computed(() => {
+			if (!inactiveStatus.value || !props.statusRender) return null;
+			return props.statusRender({
+				status: inactiveStatus.value,
+				onRefresh: handleRefresh
+			});
+		});
+		const rootClass = computed(() => [prefixCls, {
+			[`${prefixCls}-borderless`]: !props.bordered,
+			[`${prefixCls}-has-status`]: Boolean(inactiveStatus.value)
+		}]);
+		const rootStyle = computed(() => ({
+			width: `${props.size}px`,
+			height: `${props.size}px`,
+			backgroundColor: props.bgColor
+		}));
+		const qrBgColor = computed(() => props.bgColor === "transparent" ? "#ffffff" : props.bgColor);
+		const qrOptions = computed(() => ({
+			errorCorrectionLevel: props.errorLevel,
+			margin: props.marginSize,
+			width: props.size,
+			color: {
+				dark: props.color,
+				light: qrBgColor.value
+			}
+		}));
+		const renderCanvas = function() {
+			var _ref = _asyncToGenerator(function* () {
+				if (!canvasRef.value || !hasValue.value) return;
+				try {
+					yield QRCode.toCanvas(canvasRef.value, mergedValue.value, _objectSpread2({}, qrOptions.value));
+				} catch (_unused) {}
+			});
+			return function renderCanvas() {
+				return _ref.apply(this, arguments);
+			};
+		}();
+		const renderSvg = function() {
+			var _ref2 = _asyncToGenerator(function* () {
+				if (!hasValue.value) {
+					svgMarkup.value = "";
+					return;
+				}
+				try {
+					svgMarkup.value = yield QRCode.toString(mergedValue.value, _objectSpread2(_objectSpread2({}, qrOptions.value), {}, { type: "svg" }));
+				} catch (_unused2) {
+					svgMarkup.value = "";
+				}
+			});
+			return function renderSvg() {
+				return _ref2.apply(this, arguments);
+			};
+		}();
+		const renderCode = function() {
+			var _ref3 = _asyncToGenerator(function* () {
+				if (!hasValue.value) {
+					svgMarkup.value = "";
+					return;
+				}
+				yield nextTick();
+				if (props.type === "canvas") {
+					yield renderCanvas();
+					return;
+				}
+				yield renderSvg();
+			});
+			return function renderCode() {
+				return _ref3.apply(this, arguments);
+			};
+		}();
+		watch(() => [
+			mergedValue.value,
+			props.type,
+			props.size,
+			props.color,
+			props.bgColor,
+			props.errorLevel,
+			props.marginSize,
+			props.boostLevel
+		], () => {
+			renderCode();
+		}, {
+			immediate: true,
+			flush: "post"
+		});
+		return (_ctx, _cache) => {
+			return hasValue.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(rootClass.value),
+				style: normalizeStyle(rootStyle.value)
+			}, [
+				__props.status !== "active" ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(`${unref(prefixCls)}-cover`)
+				}, [customStatusNode.value ? (openBlock(), createBlock(unref(RenderNode), {
+					key: 0,
+					node: customStatusNode.value
+				}, null, 8, ["node"])) : renderSlot(_ctx.$slots, "status", {
+					key: 1,
+					status: __props.status,
+					onRefresh: handleRefresh
+				}, () => [createVNode(qr_code_status_default, {
+					"prefix-cls": unref(prefixCls),
+					status: __props.status,
+					"spin-props": __props.spinProps,
+					onRefresh: handleRefresh
+				}, null, 8, [
+					"prefix-cls",
+					"status",
+					"spin-props"
+				])])], 2)) : createCommentVNode("", true),
+				__props.type === "canvas" ? (openBlock(), createElementBlock("canvas", {
+					key: 1,
+					ref_key: "canvasRef",
+					ref: canvasRef,
+					class: normalizeClass(`${unref(prefixCls)}-canvas`)
+				}, null, 2)) : (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: normalizeClass(`${unref(prefixCls)}-svg`),
+					innerHTML: svgMarkup.value
+				}, null, 10, _hoisted_1)),
+				hasIcon.value ? (openBlock(), createElementBlock("div", {
+					key: 3,
+					class: normalizeClass(`${unref(prefixCls)}-icon`)
+				}, [renderSlot(_ctx.$slots, "icon", {}, () => [__props.icon ? (openBlock(), createElementBlock("img", {
+					key: 0,
+					src: __props.icon,
+					alt: __props.iconAlt,
+					style: normalizeStyle(iconStyle.value)
+				}, null, 12, _hoisted_2)) : createCommentVNode("", true)])], 2)) : createCommentVNode("", true)
+			], 6)) : createCommentVNode("", true);
+		};
+	}
+}));
+//#endregion
+export { qr_code_vue_vue_type_script_setup_true_lang_default as default };

package/es/qr-code/style/css.js

@@ -0,0 +1,2 @@
+import "../../style/index.css";
+import "./index.css";

package/es/qr-code/style/index.css

@@ -0,0 +1,106 @@
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
+.sd-qr-code {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 10px;
+  overflow: hidden;
+  background-color: var(--sd-color-bg-2);
+  border: 1px solid var(--sd-color-border-2);
+  border-radius: var(--sd-border-radius-medium);
+}
+.sd-qr-code-borderless {
+  padding: 0;
+  border-color: transparent;
+}
+.sd-qr-code-canvas, .sd-qr-code-svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.sd-qr-code-svg {
+  line-height: 0;
+}
+.sd-qr-code-svg svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.sd-qr-code-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+  background-color: var(--sd-color-bg-2);
+  border-radius: var(--sd-border-radius-medium);
+  transform: translate(-50%, -50%);
+}
+.sd-qr-code-icon img {
+  display: block;
+}
+.sd-qr-code-cover {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.88);
+}
+.sd-qr-code-status {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  color: var(--sd-color-text-1);
+  font-size: 14px;
+  line-height: 1.5715;
+}
+.sd-qr-code-expired, .sd-qr-code-scanned {
+  margin: 0;
+  font-weight: 500;
+}
+.sd-qr-code-expired {
+  color: rgb(var(--sd-danger-6));
+}
+.sd-qr-code-scanned {
+  color: rgb(var(--sd-success-6));
+}
+.sd-qr-code-refresh-btn {
+  padding: 0;
+  color: rgb(var(--sd-primary-6));
+  font-size: 13px;
+  line-height: 1.5715;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.sd-qr-code-refresh-btn:hover {
+  color: rgb(var(--sd-primary-7));
+}
+.sd-qr-code-refresh-btn:focus-visible {
+  outline: 1px solid rgb(var(--sd-primary-6));
+  outline-offset: 4px;
+}

package/es/qr-code/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.scss';
+import './index.scss';

package/es/qr-code/style/index.js

@@ -0,0 +1,2 @@
+import "../../style/index.scss";
+import "./index.scss";