@opendesign-plus/components 0.0.1-rc.10 → 0.0.1-rc.101

package/dist/treeshaking/components/header-user/OHeaderUser.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,124 @@
+import icon_chevron_down_default from "../../_virtual/~icons/components/icon-chevron-down.mjs";
+import icon_avatar_line_default from "../../_virtual/~icons/components/icon-avatar-line.mjs";
+import AppAvatar_default from "../common/AppAvatar.mjs";
+import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, normalizeClass, normalizeStyle, openBlock, ref, renderList, toDisplayString, unref, vShow, watch, withCtx, withDirectives } from "vue";
+import { OBadge, ODropdown, ODropdownItem, OIcon } from "@opensig/opendesign";
+import { useScreen } from "@opendesign-plus/composables";
+import { useElementSize } from "@vueuse/core";
+// src/components/header-user/OHeaderUser.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "user-info"
+};
+var _hoisted_2 = { class: "info-wrap hover-icon-rotate" };
+var _hoisted_3 = { key: 1 };
+var OHeaderUser_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "OHeaderUser",
+	props: {
+		token: {},
+		lang: {},
+		noticeTotal: {},
+		userInfo: {},
+		options: {},
+		customSize: { default: 20 },
+		simple: {
+			type: Boolean,
+			default: false
+		},
+		itemRadius: { default: 4 }
+	},
+	emits: ["login", "logout"],
+	setup(__props, { emit: __emit }) {
+		const { lePadV } = useScreen();
+		const props = __props;
+		const emit = __emit;
+		const isUserHidden = inject("isUserHidden");
+		const autoSimple = computed(() => props.simple || isUserHidden?.value);
+		const login = () => {
+			emit("login");
+		};
+		const jumpToPage = (val) => {
+			if (val?.logout) emit("logout");
+			else window.open(val.url, val.target);
+		};
+		const headerUserRef = ref();
+		const { width: headerUserWidth } = useElementSize(headerUserRef);
+		const reportHeaderUserWidth = inject("reportHeaderUserWidth");
+		watch(headerUserWidth, (width) => {
+			if (props.userInfo?.username && !autoSimple.value) reportHeaderUserWidth?.(Math.ceil(width));
+		}, { immediate: true });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "headerUserRef",
+				ref: headerUserRef,
+				class: "header-user"
+			}, [!__props.token ? (openBlock(), createBlock(unref(OIcon), {
+				key: 0,
+				onClick: login,
+				class: "avatar-icon"
+			}, {
+				default: withCtx(() => [createVNode(unref(icon_avatar_line_default))]),
+				_: 1
+			})) : createCommentVNode("", true), createVNode(Transition, { name: "header-user-zoom-in" }, {
+				default: withCtx(() => [__props.token ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(ODropdown), {
+					trigger: unref(lePadV) ? "click" : "hover",
+					optionWidthMode: "auto",
+					optionPosition: unref(lePadV) ? "br" : "bottom",
+					"option-wrap-class": `user-dropdown ${__props.lang === "en" ? "is-en" : ""}`
+				}, {
+					dropdown: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (item) => {
+						return openBlock(), createBlock(unref(ODropdownItem), {
+							key: item.label,
+							onClick: ($event) => jumpToPage(item),
+							style: normalizeStyle({ "--dropdown-item-radius": `${__props.itemRadius}px` })
+						}, {
+							default: withCtx(() => [item?.total ? (openBlock(), createBlock(unref(OBadge), {
+								key: 0,
+								value: item.total,
+								color: "danger",
+								class: normalizeClass(["header-message message", { "notice-not": !item.total }])
+							}, {
+								default: withCtx(() => [createTextVNode(toDisplayString(item.label), 1)]),
+								_: 2
+							}, 1032, ["value", "class"])) : (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(item.label), 1))]),
+							_: 2
+						}, 1032, ["onClick", "style"]);
+					}), 128))]),
+					default: withCtx(() => [createElementVNode("div", _hoisted_2, [createVNode(unref(OBadge), {
+						value: __props.noticeTotal,
+						dot: true,
+						color: "danger",
+						class: normalizeClass(["header-message user-avatar", { "notice-not": !__props.noticeTotal }])
+					}, {
+						default: withCtx(() => [createVNode(AppAvatar_default, {
+							avatar: __props.userInfo?.photo,
+							name: __props.userInfo?.username,
+							"custom-size": __props.customSize
+						}, null, 8, [
+							"avatar",
+							"name",
+							"custom-size"
+						])]),
+						_: 1
+					}, 8, ["value", "class"]), __props.userInfo?.username ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [withDirectives(createElementVNode("p", {
+						ref: "userNameRef",
+						class: "user-account"
+					}, toDisplayString(__props.userInfo?.username), 513), [[vShow, !autoSimple.value]]), withDirectives(createVNode(unref(OIcon), {
+						ref: "userIconRef",
+						class: "icon"
+					}, {
+						default: withCtx(() => [createVNode(unref(icon_chevron_down_default))]),
+						_: 1
+					}, 512), [[vShow, !autoSimple.value]])], 64)) : createCommentVNode("", true)])]),
+					_: 1
+				}, 8, [
+					"trigger",
+					"optionPosition",
+					"option-wrap-class"
+				])])) : createCommentVNode("", true)]),
+				_: 1
+			})], 512);
+		};
+	}
+});
+export { OHeaderUser_vue_vue_type_script_setup_true_lang_default as default };

package/dist/treeshaking/components/header-user/OHeaderUser.vue_vue_type_style_index_0_scoped_01df49a0_lang.css

@@ -0,0 +1,207 @@
+.hover-icon-rotate .o-icon[data-v-01df49a0] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-01df49a0] {
+    transform: rotate(-180deg);
+}
+}
+.header-user[data-v-01df49a0] {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 0.15s;
+}
+.avatar-icon[data-v-01df49a0] {
+  font-size: 24px;
+  color: var(--o-color-info2);
+  cursor: pointer;
+}
+@media (hover: hover) {
+.avatar-icon[data-v-01df49a0]:hover {
+    color: var(--o-color-primary2);
+}
+}
+.avatar-icon[data-v-01df49a0]:active {
+  color: var(--o-color-primary3);
+}
+@media (max-width: 1200px) {
+.avatar-icon[data-v-01df49a0] {
+    font-size: var(--o-icon_size_control-s);
+}
+}
+.user-info[data-v-01df49a0] {
+  height: 100%;
+  min-width: 32px;
+  display: flex;
+  cursor: pointer;
+}
+.info-wrap[data-v-01df49a0] {
+  height: calc(100% - 10px);
+  margin: 5px 0;
+  display: flex;
+  align-items: center;
+}
+.info-wrap .icon[data-v-01df49a0] {
+  margin-left: 4px;
+}
+.user-avatar[data-v-01df49a0] {
+  margin-right: 4px;
+}
+.user-avatar[data-v-01df49a0] .o-badge-content {
+  --badge-dot-size: 6px;
+  right: 6px;
+  top: 2px;
+}
+.o-badge[data-v-01df49a0] {
+  display: flex;
+}
+.o-dropdown[data-v-01df49a0] {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.o-dropdown-item[data-v-01df49a0] {
+  white-space: nowrap;
+  background: var(--o-color-control5-light);
+  --dropdown-item-color: var(--o-color-info2);
+  padding: var(--o-gap-1) var(--o-gap-3);
+  height: 32px;
+  --dropdown-item-text-size: 14px;
+  --dropdown-item-text-height: 22px;
+}
+@media (hover: hover) {
+.o-dropdown-item[data-v-01df49a0]:hover {
+    background: var(--o-color-control2-light);
+}
+}
+.o-dropdown-item[data-v-01df49a0]:active {
+  color: var(--o-color-primary1);
+  background: var(--o-color-control3-light);
+  font-weight: 600;
+}
+.notice-not[data-v-01df49a0] .o-badge-content {
+  display: none;
+}
+.user-account[data-v-01df49a0] {
+  color: var(--o-color-info1);
+  max-width: 96px;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.user-account[data-v-01df49a0] {
+    font-size: 14px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.user-account[data-v-01df49a0] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.user-account[data-v-01df49a0] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.user-account[data-v-01df49a0] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.user-account[data-v-01df49a0] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.user-account[data-v-01df49a0] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (min-width: 1201px) and (max-width: 1680px) and (min-width: 1201px) and (max-width: 1680px) {
+.user-account[data-v-01df49a0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 1201px) and (max-width: 1680px) and (min-width: 841px) and (max-width: 1200px) {
+.user-account[data-v-01df49a0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 1201px) and (max-width: 1680px) and (min-width: 601px) and (max-width: 840px) {
+.user-account[data-v-01df49a0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 1201px) and (max-width: 1680px) and (max-width: 600px) {
+.user-account[data-v-01df49a0] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 1200px) {
+.user-account[data-v-01df49a0] {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (max-width: 1200px) and (min-width: 1201px) and (max-width: 1680px) {
+.user-account[data-v-01df49a0] {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (max-width: 1200px) and (min-width: 841px) and (max-width: 1200px) {
+.user-account[data-v-01df49a0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 1200px) and (min-width: 601px) and (max-width: 840px) {
+.user-account[data-v-01df49a0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 1200px) and (max-width: 600px) {
+.user-account[data-v-01df49a0] {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 840px) {
+.header-user[data-v-01df49a0] {
+    min-width: auto;
+}
+.header-user .user-info[data-v-01df49a0] {
+    min-width: 24px;
+}
+.header-user .user-info .info-wrap[data-v-01df49a0] {
+    height: auto;
+    margin: 0;
+}
+.header-user .user-info .info-wrap .user-avatar[data-v-01df49a0] {
+    margin-right: 0;
+}
+.header-user .user-info .info-wrap .user-account[data-v-01df49a0] {
+    display: none;
+}
+.header-user .user-info .info-wrap .icon[data-v-01df49a0] {
+    display: none;
+}
+}

package/dist/treeshaking/components/header-user/OHeaderUser.vue_vue_type_style_index_1_lang.css

@@ -0,0 +1,31 @@
+.hover-icon-rotate .o-icon {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon {
+    transform: rotate(-180deg);
+}
+}
+@media (max-width: 840px) {
+.user-dropdown .o-divider {
+    display: none;
+}
+.user-dropdown .o-icon {
+    display: none;
+}
+.user-dropdown .o-badge-content {
+    right: 0 !important;
+    transform: translate(0, 0) scale(0.5);
+    transform-origin: top right;
+    min-width: 18px;
+    width: fit-content;
+    height: 18px;
+    font-size: 12px;
+    line-height: 18px;
+}
+.user-dropdown .o-badge-content .o-badge-label {
+    transform: scale(1);
+    font-size: 12px;
+    line-height: 18px;
+}
+}

package/dist/treeshaking/components/header-user/index.d.ts

@@ -0,0 +1,131 @@
+import { App } from 'vue';
+declare const OHeaderUser: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./OHeaderUser.vue').UserPropsT> & Readonly<{
+        onLogin?: (() => any) | undefined;
+        onLogout?: (() => any) | undefined;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        login: () => any;
+        logout: () => any;
+    }, import('vue').PublicProps, {
+        simple: boolean;
+        itemRadius: number;
+        customSize: number;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        headerUserRef: HTMLDivElement;
+        userNameRef: HTMLParagraphElement;
+        userIconRef: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: Partial<{
+                button: boolean;
+                disabled: boolean;
+                loading: boolean;
+            }> & Omit<{
+                readonly loading: boolean;
+                readonly disabled: boolean;
+                readonly button: boolean;
+                readonly icon?: import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any> | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "loading" | "disabled" | "button">;
+            $attrs: import('vue').Attrs;
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: HTMLDivElement;
+            $options: import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+                icon: {
+                    type: import('vue').PropType<import('vue').Component>;
+                };
+                button: {
+                    type: BooleanConstructor;
+                };
+                disabled: {
+                    type: BooleanConstructor;
+                };
+                loading: {
+                    type: BooleanConstructor;
+                };
+            }>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+                button: boolean;
+                disabled: boolean;
+                loading: boolean;
+            }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import('vue').nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+        } & Readonly<{
+            button: boolean;
+            disabled: boolean;
+            loading: boolean;
+        }> & Omit<Readonly<import('vue').ExtractPropTypes<{
+            icon: {
+                type: import('vue').PropType<import('vue').Component>;
+            };
+            button: {
+                type: BooleanConstructor;
+            };
+            disabled: {
+                type: BooleanConstructor;
+            };
+            loading: {
+                type: BooleanConstructor;
+            };
+        }>> & Readonly<{}>, "loading" | "disabled" | "button"> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: {
+                default?(_: {}): any;
+            };
+        }) | null;
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('./OHeaderUser.vue').UserPropsT> & Readonly<{
+        onLogin?: (() => any) | undefined;
+        onLogout?: (() => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        simple: boolean;
+        itemRadius: number;
+        customSize: number;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('./OHeaderUser.vue').UserPropsT> & Readonly<{
+    onLogin?: (() => any) | undefined;
+    onLogout?: (() => any) | undefined;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    login: () => any;
+    logout: () => any;
+}, string, {
+    simple: boolean;
+    itemRadius: number;
+    customSize: number;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & {
+    install(app: App): void;
+};
+export { OHeaderUser };

package/dist/treeshaking/components/header-user/index.mjs

@@ -0,0 +1,6 @@
+import OHeaderUser_default from "./OHeaderUser.mjs";
+// src/components/header-user/index.ts
+var OHeaderUser = Object.assign(OHeaderUser_default, { install(app) {
+	app.component("OHeaderUser", OHeaderUser_default);
+} });
+export { OHeaderUser };

package/dist/treeshaking/components/html-viewer/OHtmlViewer.mjs

@@ -0,0 +1,6 @@
+import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export-helper.mjs";
+import OHtmlViewer_vue_vue_type_script_setup_true_lang_default from "./OHtmlViewer.vue_vue_type_script_setup_true_lang.mjs";
+import './OHtmlViewer.vue_vue_type_style_index_0_scoped_2f5d08df_lang.css';
+// src/components/html-viewer/OHtmlViewer.vue
+var OHtmlViewer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(OHtmlViewer_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-2f5d08df"]]);
+export { OHtmlViewer_default as default };

package/dist/treeshaking/components/html-viewer/OHtmlViewer.vue.d.ts

@@ -0,0 +1,29 @@
+type __VLS_Props = {
+    src?: string;
+    html?: string;
+    title?: string;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        loading?(_: {}): any;
+        error?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    error: (error: unknown) => any;
+    loaded: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onError?: ((error: unknown) => any) | undefined;
+    onLoaded?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/treeshaking/components/html-viewer/OHtmlViewer.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,87 @@
+import { useI18n } from "../../i18n/index.mjs";
+import { parseHtml } from "./utils.mjs";
+import { computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, defineComponent, nextTick, onMounted, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, watch, withDirectives } from "vue";
+import { isClient } from "@opensig/opendesign";
+import { buildVueDompurifyHTMLDirective } from "vue-dompurify-html";
+// src/components/html-viewer/OHtmlViewer.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "o-html-viewer" };
+var _hoisted_2 = ["aria-label"];
+var _hoisted_3 = {
+	key: 2,
+	class: "o-html-viewer__status"
+};
+var _hoisted_4 = {
+	key: 3,
+	class: "o-html-viewer__status is-error"
+};
+var SCOPE = ".o-html-viewer__body";
+var OHtmlViewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "OHtmlViewer",
+	props: {
+		src: {},
+		html: {},
+		title: {}
+	},
+	emits: ["loaded", "error"],
+	setup(__props, { emit: __emit }) {
+		const vDompurifyHtml = buildVueDompurifyHTMLDirective();
+		const props = __props;
+		const emit = __emit;
+		const { t } = useI18n();
+		const innerHtml = ref(props.html ?? "");
+		const loading = ref(false);
+		const loadError = ref("");
+		const parsed = computed(() => {
+			if (!innerHtml.value) return {
+				body: "",
+				styleCss: ""
+			};
+			return parseHtml(innerHtml.value, SCOPE);
+		});
+		const resolvedBody = computed(() => parsed.value.body);
+		const docStyle = computed(() => parsed.value.styleCss);
+		async function loadFromSrc() {
+			if (!props.src || !isClient) return;
+			loading.value = true;
+			loadError.value = "";
+			try {
+				const res = await fetch(props.src);
+				if (!res.ok) throw new Error(`Failed to load document: ${res.status} ${res.statusText}`);
+				innerHtml.value = await res.text();
+			} catch (err) {
+				innerHtml.value = "";
+				loadError.value = err instanceof Error ? err.message : String(err);
+				emit("error", err);
+			} finally {
+				loading.value = false;
+			}
+		}
+		onMounted(() => {
+			if (!props.html && props.src) loadFromSrc();
+		});
+		watch(() => [props.html, props.src], ([html, src]) => {
+			if (html !== void 0) {
+				if (innerHtml.value !== html) innerHtml.value = html;
+				loading.value = false;
+				loadError.value = "";
+				return;
+			}
+			if (src && isClient) loadFromSrc();
+		});
+		watch(resolvedBody, (val) => {
+			if (val) nextTick(() => emit("loaded"));
+		}, { immediate: true });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [docStyle.value ? (openBlock(), createBlock(resolveDynamicComponent("style"), {
+				key: 0,
+				textContent: docStyle.value
+			}, null, 8, ["textContent"])) : createCommentVNode("", true), resolvedBody.value ? withDirectives((openBlock(), createElementBlock("div", {
+				key: 1,
+				class: "o-html-viewer__body",
+				role: "document",
+				"aria-label": __props.title ?? unref(t)("htmlViewer.title")
+			}, null, 8, _hoisted_2)), [[unref(vDompurifyHtml), resolvedBody.value]]) : loading.value ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "loading", {}, () => [createTextVNode(toDisplayString(unref(t)("htmlViewer.loading")), 1)], true)])) : loadError.value ? (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "error", {}, () => [createTextVNode(toDisplayString(loadError.value), 1)], true)])) : createCommentVNode("", true)]);
+		};
+	}
+});
+export { OHtmlViewer_vue_vue_type_script_setup_true_lang_default as default };