@shjjs/visual-ui 3.0.29 → 3.0.31

package/es/components/Media/components/Image/index.vue.mjs

@@ -1,7 +1,7 @@
 import o from "./index.vue2.mjs";
 /* empty css            */
 import t from "../../../../_virtual/_plugin-vue_export-helper.mjs";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-3ef4f9e8"]]);
+const _ = /* @__PURE__ */ t(o, [["__scopeId", "data-v-4863bb72"]]);
 export {
-  p as default
+  _ as default
 };

package/es/components/Media/components/Image/index.vue2.mjs

@@ -1,28 +1,28 @@
-import { defineComponent as a, computed as t, createElementBlock as i, openBlock as s, normalizeStyle as p } from "vue";
-import { upgradeImage as m } from "./version.mjs";
-const n = a({ name: "ShjImage" }), g = /* @__PURE__ */ a({
-  ...n,
+import { defineComponent as t, computed as s, createElementBlock as n, openBlock as p, normalizeStyle as m } from "vue";
+import { upgradeImage as u } from "./version.mjs";
+const l = t({ name: "ShjImage" }), g = /* @__PURE__ */ t({
+  ...l,
   props: {
     option: {}
   },
-  setup(o, { expose: r }) {
-    const e = t(() => m(o.option));
-    return r({
+  setup(r, { expose: i }) {
+    const e = s(() => u(r.option)), a = (o) => typeof o == "number" ? `${o}px` : o ?? "center";
+    return i({
       refresh: () => {
       },
       refreshView: () => {
       },
       refreshData: () => {
       }
-    }), (l, u) => (s(), i("div", {
+    }), (o, c) => (p(), n("div", {
       class: "image",
-      style: p({
+      style: m({
         "--image-url": `url('${e.value.base.url}')`,
-        "--image-border-radius": e.value.base.borderRadius + "px",
+        "--image-border-radius": (e.value.base.borderRadius ?? 0) + "px",
         "--image-repeat": e.value.base.mode === "repeat" ? "repeat" : "no-repeat",
         "--image-size": e.value.base.mode === "repeat" ? "auto" : e.value.base.mode,
-        "--image-position-x": e.value.base.positionX + "px",
-        "--image-position-y": e.value.base.positionY + "px"
+        "--image-position-x": a(e.value.base.positionX),
+        "--image-position-y": a(e.value.base.positionY)
       })
     }, null, 4));
   }

package/es/components/Media/components/Image/version.mjs

@@ -1,18 +1,18 @@
-import { cloneDeep as i } from "lodash";
-const r = "2.0.0", s = (e) => {
-  const o = i(e);
-  return o.version !== r ? {
+import { cloneDeep as n } from "lodash";
+const r = "2.0.0", t = (o) => {
+  const e = n(o);
+  return e.version !== r ? {
     base: {
-      url: o.url,
-      mode: o.mode,
-      positionX: o.positionX,
-      positionY: o.positionY,
-      borderRadius: o.borderRadius
+      url: e.url,
+      mode: e.mode,
+      positionX: e.positionX ?? "center",
+      positionY: e.positionY ?? "center",
+      borderRadius: e.borderRadius ?? 0
     },
     version: r
-  } : e;
+  } : o;
 };
 export {
   r as VERSION,
-  s as upgradeImage
+  t as upgradeImage
 };

package/es/components/Media/components/ImageDynamic/index.vue.mjs

@@ -1,7 +1,7 @@
 import o from "./index.vue2.mjs";
 /* empty css            */
 import t from "../../../../_virtual/_plugin-vue_export-helper.mjs";
-const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-7b570c4e"]]);
+const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-2305a074"]]);
 export {
-  c as default
+  a as default
 };

package/es/components/Media/components/ImageDynamic/index.vue2.mjs

@@ -1,4 +1,4 @@
-import { defineComponent as e, computed as s, ref as n, onMounted as u, nextTick as c, createElementBlock as l, openBlock as v, normalizeStyle as d } from "vue";
+import { defineComponent as a, computed as n, ref as u, onMounted as c, nextTick as l, createElementBlock as d, openBlock as f, normalizeStyle as v } from "vue";
 /* empty css                                     */
 /* empty css                                     */
 import "../../../Interaction/components/Tabs/index.mjs";
@@ -161,52 +161,52 @@ import "../../../Scene/components/Earth/index.mjs";
 import "../../../Deleted/components/StaticSwitch/index.mjs";
 import "../../../Deleted/components/RowScroll/index.mjs";
 import "../../../Deleted/components/Wavesurfer/index.mjs";
-import { SHJDatasourceV2 as f } from "../../../../commons/plugins/datasource/index.mjs";
-import { SHJParseEvent as p } from "../../../../commons/plugins/event/index.mjs";
+import { SHJDatasourceV2 as g } from "../../../../commons/plugins/datasource/index.mjs";
+import { SHJParseEvent as e } from "../../../../commons/plugins/event/index.mjs";
 import "lodash";
-import { upgradeImageDynamic as g } from "./version.mjs";
-import { useWatch as b } from "./hooks/useWatch.mjs";
-const x = e({ name: "ShjImageDynamic" }), Hr = /* @__PURE__ */ e({
+import { upgradeImageDynamic as b } from "./version.mjs";
+import { useWatch as h } from "./hooks/useWatch.mjs";
+const x = a({ name: "ShjImageDynamic" }), Ir = /* @__PURE__ */ a({
   ...x,
   props: {
     option: {},
     sources: {},
     useEvents: {}
   },
-  setup(o, { expose: a }) {
-    const t = s(() => g(o.option)), i = n(""), r = () => {
-      f.parse({
-        sources: o.sources,
-        callback: ({ data: m }) => {
+  setup(r, { expose: s }) {
+    const t = n(() => b(r.option)), p = (o) => typeof o == "number" ? `${o}px` : o ?? "center", m = u(""), i = () => {
+      g.parse({
+        sources: r.sources,
+        callback: ({ data: o }) => {
           try {
-            p.parseEvents(o.useEvents, "dataListener", m), i.value = m[0].data[0].src;
+            e.parseEvents(r.useEvents, "dataListener", o), m.value = o[0].data[0].src;
           } catch {
-            p.parseEvents(o.useEvents, "dataListener", null), i.value = "";
+            e.parseEvents(r.useEvents, "dataListener", null), m.value = "";
           }
         }
       });
     };
-    return u(() => {
-      c(() => {
-        r();
+    return c(() => {
+      l(() => {
+        i();
       });
-    }), b({ option: t.value, sources: o.sources }, r), a({
-      refresh: () => r(),
-      refreshView: () => r(),
-      refreshData: () => r()
-    }), (m, h) => (v(), l("div", {
+    }), h({ option: t.value, sources: r.sources }, i), s({
+      refresh: () => i(),
+      refreshView: () => i(),
+      refreshData: () => i()
+    }), (o, y) => (f(), d("div", {
       class: "image",
-      style: d({
-        "--image-url": `url('${i.value}')`,
-        "--image-border-radius": t.value.base.borderRadius + "px",
+      style: v({
+        "--image-url": `url('${m.value}')`,
+        "--image-border-radius": (t.value.base.borderRadius ?? 0) + "px",
         "--image-repeat": t.value.base.mode === "repeat" ? "repeat" : "no-repeat",
         "--image-size": t.value.base.mode === "repeat" ? "auto" : t.value.base.mode,
-        "--image-position-x": t.value.base.positionX + "px",
-        "--image-position-y": t.value.base.positionY + "px"
+        "--image-position-x": p(t.value.base.positionX),
+        "--image-position-y": p(t.value.base.positionY)
       })
     }, null, 4));
   }
 });
 export {
-  Hr as default
+  Ir as default
 };

package/es/components/Media/components/ImageDynamic/version.mjs

@@ -1,17 +1,17 @@
-import { cloneDeep as n } from "lodash";
-const i = "2.0.0", s = (e) => {
-  const o = n(e);
-  return o.version !== i ? {
+import { cloneDeep as r } from "lodash";
+const n = "2.0.0", t = (o) => {
+  const e = r(o);
+  return e.version !== n ? {
     base: {
-      mode: o.mode,
-      positionX: o.positionX,
-      positionY: o.positionY,
-      borderRadius: o.borderRadius
+      mode: e.mode,
+      positionX: e.positionX ?? "center",
+      positionY: e.positionY ?? "center",
+      borderRadius: e.borderRadius ?? 0
     },
-    version: i
-  } : e;
+    version: n
+  } : o;
 };
 export {
-  i as VERSION,
-  s as upgradeImageDynamic
+  n as VERSION,
+  t as upgradeImageDynamic
 };

package/es/components/Scene/components/Default/index.vue.mjs

@@ -1,7 +1,7 @@
 import o from "./index.vue2.mjs";
 /* empty css            */
 import t from "../../../../_virtual/_plugin-vue_export-helper.mjs";
-const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-e982c808"]]);
+const r = /* @__PURE__ */ t(o, [["__scopeId", "data-v-5075cbee"]]);
 export {
-  c as default
+  r as default
 };

package/es/components/Scene/components/Default/index.vue2.mjs

@@ -1,32 +1,32 @@
-import { defineComponent as a, computed as u, createElementBlock as l, openBlock as s, normalizeStyle as p } from "vue";
-import { upgradeDefault as d } from "./version.mjs";
-const i = a({ name: "ShjDefault" }), k = /* @__PURE__ */ a({
-  ...i,
+import { defineComponent as r, computed as d, createElementBlock as i, openBlock as l, normalizeStyle as p } from "vue";
+import { upgradeDefault as g } from "./version.mjs";
+const k = r({ name: "ShjDefault" }), f = /* @__PURE__ */ r({
+  ...k,
   props: {
     option: {},
     sources: {},
     useEvents: {}
   },
-  setup(r) {
-    const e = u(() => d(r.option)), c = () => {
+  setup(c) {
+    const e = d(() => g(c.option)), n = (o) => typeof o == "number" ? `${o}px` : o ?? "center", u = () => {
       try {
-        const o = e.value.background.image, n = e.value.background.color, t = e.value.background.size;
+        const o = e.value.background.image, a = e.value.background.color, t = e.value.background.size, s = t === "repeat" || t === "auto" ? "auto" : t;
         return {
-          background: o ? `url('${o}')` : n,
-          backgroundSize: t,
-          backgroundPosition: t === "auto" ? "0px 0px" : "center",
-          backgroundRepeat: t === "auto" ? "repeat" : "no-repeat"
+          background: o ? `url('${o}')` : a,
+          backgroundSize: s,
+          backgroundPosition: `${n(e.value.background.positionX)} ${n(e.value.background.positionY)}`,
+          backgroundRepeat: t === "repeat" || t === "auto" ? "repeat" : "no-repeat"
         };
       } catch {
         return {};
       }
     };
-    return (o, n) => (s(), l("div", {
+    return (o, a) => (l(), i("div", {
       class: "shj-default",
-      style: p(c())
+      style: p(u())
     }, null, 4));
   }
 });
 export {
-  k as default
+  f as default
 };

package/es/components/Scene/components/Default/version.mjs

@@ -1,9 +1,27 @@
-import { cloneDeep as o } from "lodash";
-const n = "2.0.0", s = (r) => {
-  const e = o(r) ?? {};
-  return e.version !== n ? (e.version = n, e) : r;
+import { cloneDeep as n } from "lodash";
+const e = "2.0.0", i = (r) => {
+  const o = n(r) ?? {};
+  return o.version !== e ? (o.version = e, {
+    ...o,
+    background: {
+      color: o.background?.color ?? "#00000000",
+      image: o.background?.image ?? "",
+      size: o.background?.size ?? "cover",
+      positionX: o.background?.positionX ?? "center",
+      positionY: o.background?.positionY ?? "center"
+    }
+  }) : {
+    ...r,
+    background: {
+      color: r.background?.color ?? "#00000000",
+      image: r.background?.image ?? "",
+      size: r.background?.size ?? "cover",
+      positionX: r.background?.positionX ?? "center",
+      positionY: r.background?.positionY ?? "center"
+    }
+  };
 };
 export {
-  n as VERSION,
-  s as upgradeDefault
+  e as VERSION,
+  i as upgradeDefault
 };

package/es/packages/components/Media/components/Image/index.vue.d.ts

@@ -6,6 +6,7 @@ declare const _sfc_main: import("vue").DefineComponent<import("vue").ExtractProp
     };
 }>, {
     option: import("vue").ComputedRef<IImageOption>;
+    formatBackgroundPosition: (value: "left" | "center" | "right" | "top" | "bottom" | number | undefined) => string;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     option: {
         type: any;

package/es/packages/components/Media/components/Image/types.d.ts

@@ -2,8 +2,8 @@ export interface IImageOption {
     base: {
         url: string;
         mode: string;
-        positionX: number;
-        positionY: number;
+        positionX: "left" | "center" | "right" | number;
+        positionY: "top" | "center" | "bottom" | number;
         borderRadius: number;
     };
     version: string;

package/es/packages/components/Media/components/ImageDynamic/index.vue.d.ts

@@ -14,6 +14,7 @@ declare const _sfc_main: import("vue").DefineComponent<import("vue").ExtractProp
     };
 }>, {
     option: import("vue").ComputedRef<IImageDynamicOption>;
+    formatBackgroundPosition: (value: "left" | "center" | "right" | "top" | "bottom" | number | undefined) => string;
     url: import("vue").Ref<string, string>;
     init: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/es/packages/components/Media/components/ImageDynamic/types.d.ts

@@ -1,8 +1,8 @@
 export interface IImageDynamicOption {
     base: {
         mode: string;
-        positionX: number;
-        positionY: number;
+        positionX: "left" | "center" | "right" | number;
+        positionY: "top" | "center" | "bottom" | number;
         borderRadius: number;
     };
     version: string;

package/es/packages/components/Scene/components/Default/index.vue.d.ts

@@ -15,6 +15,7 @@ declare const _sfc_main: import("vue").DefineComponent<import("vue").ExtractProp
     };
 }>, {
     option: import("vue").ComputedRef<IDefaultOption>;
+    formatBackgroundPosition: (value: "left" | "center" | "right" | "top" | "bottom" | number | undefined) => string;
     handleSceneStyle: () => StyleValue | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     option: {

package/es/packages/components/Scene/components/Default/types.d.ts

@@ -3,6 +3,8 @@ export interface IDefaultOption {
         color: string;
         image: string;
         size: string;
+        positionX: "left" | "center" | "right" | number;
+        positionY: "top" | "center" | "bottom" | number;
     };
     version: string;
 }