@opentiny/tiny-engine-toolbar-media 1.0.1

package/dist/index.js

@@ -0,0 +1,383 @@
+import "./style.css";
+import { ref as V, computed as M, reactive as z, toRaw as R, watchEffect as j, watch as G, onMounted as H, onUnmounted as J, resolveComponent as C, openBlock as v, createElementBlock as W, createElementVNode as i, Fragment as K, renderList as Q, normalizeClass as Y, createVNode as b, withCtx as p, toDisplayString as c, createTextVNode as I, createBlock as E, createCommentVNode as N, pushScopeId as Z, popScopeId as $ } from "vue";
+import { Popover as ee, Input as te, Switch as ie } from "@opentiny/vue";
+import { IconWebPlus as D } from "@opentiny/vue-icon";
+import { useLayout as h } from "@opentiny/tiny-engine-controller";
+import { getCanvasType as ne, setCanvasType as oe } from "@opentiny/tiny-engine-canvas";
+const se = (d, l) => {
+  const r = d.__vccOpts || d;
+  for (const [n, u] of l)
+    r[n] = u;
+  return r;
+}, ae = {
+  components: {
+    TinyPopover: ee,
+    TinyInput: te,
+    TinySwitch: ie
+  },
+  props: {
+    data: {
+      type: Object,
+      default: () => ({})
+    },
+    isCanvas: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  setup(d, { emit: l }) {
+    let r = null, n = "", u = "";
+    const { layoutState: _ } = h(), m = V(!1), w = V(!1), x = V(!1), T = V(ne() === "absolute"), s = M(() => h().getDimension()), y = M(() => s.value.scale * 100), t = z({
+      activeIndex: 0,
+      guideValue: "",
+      width: "",
+      scaleValue: "",
+      readonly: !1,
+      viewWidth: null,
+      moreData: {
+        title: "添加大断点",
+        list: [
+          {
+            icon: D(),
+            text: "1280px"
+          },
+          {
+            icon: D(),
+            text: "1440px"
+          },
+          {
+            icon: D(),
+            text: "1920px"
+          }
+        ],
+        tips: "将鼠标悬停在断点上以了解更多信息"
+      },
+      textData: {
+        title: "画布设置",
+        width: "宽度",
+        scale: "缩放",
+        list: [
+          {
+            text: "自由布局"
+          }
+        ],
+        vision: "视觉预览"
+      },
+      guideOptions: [
+        {
+          value: "选项1",
+          label: "No guide"
+        },
+        {
+          value: "选项2",
+          label: "Line guide(960px)"
+        },
+        {
+          value: "选项3",
+          label: "Filled guide(960px)"
+        }
+      ],
+      media: [
+        {
+          idx: 0,
+          view: "mdx",
+          icon: "IconDesktopView",
+          liked: "desktop-large",
+          width: "1920px",
+          minWidth: "1200px",
+          maxWidth: "1920px",
+          title: "大屏",
+          subTitle: "1200px 及以上",
+          content: "此处添加的样式将适用于 1200 像素及以上，除非它们在更大的断点处进行编辑",
+          enContent: "Style added here will apply at 1200px and up,unless they′re edited at a larger breakpoint"
+        },
+        {
+          idx: 1,
+          view: "desktop",
+          icon: "IconDesktopView",
+          liked: "laptop-cut-corner",
+          width: "1200px",
+          minWidth: "992px",
+          maxWidth: "1200px",
+          title: "PC 端",
+          subTitle: "基本断点",
+          content: "桌面端样式适用于所有断点，除非它们在更大或更小的断点处进行编辑，在这里开始你的布局。",
+          enContent: "Desktop styles apply at all breakpoints,unless they′re edited at a larger or smaller breakpoints. Start your stying here."
+        },
+        {
+          idx: 2,
+          view: "tablet",
+          icon: "IconTabletView",
+          liked: "tablet-portrait",
+          width: "992px",
+          minWidth: "768px",
+          maxWidth: "992px",
+          title: "平板",
+          subTitle: "992px 及以下",
+          content: "此处添加的样式将适用于 992 像素及以下，除非它们在较小的断点处进行编辑。",
+          enContent: "styles added here will apply at 992px and down,unless they′re edited at smaller breakpoints."
+        },
+        {
+          idx: 3,
+          view: "lanMobile",
+          icon: "IconMobileView",
+          liked: "mobile-landscape",
+          width: "768px",
+          minWidth: "480px",
+          maxWidth: "768px",
+          title: "手机横屏",
+          subTitle: "768px 及以下",
+          content: "此处添加的样式将适用于 768 像素及以下，除非它们在较小的断点处进行编辑。",
+          enContent: "styles added here will apply at 768px and down,unless they′re edited at smaller breakpoints."
+        },
+        {
+          idx: 4,
+          view: "mobile",
+          icon: "IconMobileView",
+          liked: "mobile-portrai",
+          width: "480px",
+          minWidth: "240px",
+          maxWidth: "480px",
+          title: "手机竖屏",
+          subTitle: "480px 及以下",
+          content: "此处添加的样式将适用于 480 像素及以下。",
+          enContent: "styles added here will apply at 480px and down."
+        }
+      ]
+    }), L = () => {
+      w.value = !1;
+    }, B = () => {
+      r = setTimeout(() => {
+        m.value = !0;
+      }, 1e3);
+    }, F = () => {
+      m.value = !1, clearTimeout(r);
+    }, U = () => {
+      _.toolbars.visiblePopover = !0, x.value = !0;
+    }, A = () => {
+      _.toolbars.visiblePopover = !1, x.value = !1;
+    }, P = (e) => {
+      const o = document.querySelector(".reference-text"), a = o == null ? void 0 : o.contains(e.target);
+      o !== e.target && !a && (_.toolbars.visiblePopover = !1);
+    }, g = t.media.reduce((e, o, a) => (e[o.view] = { ...R(o), index: a }, e), {}), S = (e) => {
+      d.isCanvas ? (h().setDimension({
+        deviceType: e.view,
+        width: e.width,
+        minWidth: e.minWidth,
+        maxWidth: e.maxWidth
+      }), t.width = parseInt(e.width, 10), t.scaleValue = y.value.toFixed(2), t.readonly = e.view !== "mdx") : (t.activeIndex = e.idx, l("setViewPort", e.width));
+    }, f = (e, o) => {
+      const a = g[o];
+      t.activeIndex = g[o].index, h().setDimension({
+        deviceType: a.view,
+        width: e ? `${e}px` : a.width,
+        minWidth: a.minWidth,
+        maxWidth: a.maxWidth
+      });
+    }, O = (e) => {
+      const o = "^[0-9]*$", a = h().getDimension();
+      switch (String(e).match(o) ? String(e) === "0" || Number(e) < 240 ? (t.width = 240, n = 240) : Number(e) > 1920 ? (t.width = 1920, n = 1920) : n = e : t.width = n || parseInt(a.width), !0) {
+        case (1200 < Number(t.width) && Number(t.width) <= 1920):
+          f(e, "mdx");
+          break;
+        case (992 < Number(t.width) && Number(t.width) <= 1200):
+          f(e, "desktop");
+          break;
+        case (768 < Number(t.width) && Number(t.width) <= 992):
+          f(e, "tablet");
+          break;
+        case (480 < Number(t.width) && Number(t.width) <= 768):
+          f(e, "lanMobile");
+          break;
+        case (240 <= Number(t.width) && Number(t.width) <= 480):
+          f(e, "mobile");
+          break;
+      }
+    }, X = (e) => {
+      const o = g.mdx, a = "^[0-9]*$";
+      String(e).match(a) ? Number(e) > 100 ? t.scaleValue = 100 : Number(e) < 20 ? t.scaleValue = 20 : u = e : t.scaleValue = u || parseInt(o.scale), h().setDimension({
+        deviceType: o.view,
+        width: o.width,
+        minWidth: o.minWidth,
+        maxWidth: o.maxWidth,
+        scale: Number(t.scaleValue) / 100
+      });
+    }, q = (e) => {
+      oe(e ? "absolute" : "normal");
+    };
+    return j(
+      () => {
+        const e = s.value.deviceType || "desktop";
+        t.activeIndex = g[e].index || 0, S(g[e]);
+      },
+      { flush: "post" }
+    ), G(
+      () => h().getDimension().width,
+      (e) => {
+        const o = parseInt(e, 10);
+        Number.isInteger(o) && o !== t.width && (t.width = o);
+      }
+    ), H(() => {
+      document.addEventListener("click", P);
+    }), J(() => {
+      document.removeEventListener("click", P);
+    }), {
+      scale: y,
+      state: t,
+      active: w,
+      flag: x,
+      hide: L,
+      layoutState: _,
+      visible: m,
+      showTips: B,
+      hideTips: F,
+      timer: r,
+      dimension: s,
+      setViewPort: S,
+      showPopover: U,
+      hidePopover: A,
+      widthChange: O,
+      scaleChange: X,
+      isAbsolute: T,
+      changeCanvasType: q
+    };
+  }
+}, k = (d) => (Z("data-v-c1e7d8e3"), d = d(), $(), d), le = { class: "toolbar-wrap" }, de = { class: "toolbar-icon-wrap" }, ce = ["onClick"], re = { class: "media-content" }, pe = { class: "media-title" }, he = {
+  key: 0,
+  class: "sub-title"
+}, ue = { class: "content" }, me = { class: "reference-text" }, we = /* @__PURE__ */ k(() => /* @__PURE__ */ i("span", { class: "symbol" }, "PX", -1)), xe = /* @__PURE__ */ k(() => /* @__PURE__ */ i("span", { class: "symbol" }, "%", -1)), ve = { class: "content-wrap text-content" }, be = { class: "title text-title" }, _e = { class: "setting" }, ye = { for: "" }, ge = /* @__PURE__ */ k(() => /* @__PURE__ */ i("span", null, "PX", -1)), fe = { for: "" }, ke = /* @__PURE__ */ k(() => /* @__PURE__ */ i("span", null, "%", -1)), Ve = { class: "more-setting" }, Ce = /* @__PURE__ */ k(() => /* @__PURE__ */ i("div", null, [
+  /* @__PURE__ */ i("span", null, /* @__PURE__ */ c("自由布局"))
+], -1));
+function We(d, l, r, n, u, _) {
+  const m = C("svg-icon"), w = C("tiny-popover"), x = C("tiny-input"), T = C("tiny-switch");
+  return v(), W("div", le, [
+    i("div", de, [
+      (v(!0), W(K, null, Q(n.state.media, (s, y) => (v(), W("span", {
+        key: y,
+        class: Y(["icon", { active: n.state.activeIndex === y, "is-rotate": s.view === "lanMobile" }]),
+        onClick: (t) => n.setViewPort(s)
+      }, [
+        b(w, {
+          trigger: "hover",
+          width: "225",
+          "append-to-body": "",
+          "open-delay": 1e3,
+          "popper-class": "media-icon-popover"
+        }, {
+          reference: p(() => [
+            b(m, {
+              name: s.liked,
+              class: "media-icon"
+            }, null, 8, ["name"])
+          ]),
+          default: p(() => [
+            i("div", re, [
+              i("div", pe, [
+                i("div", null, c(s.title), 1),
+                s.subTitle ? (v(), W("div", he, [
+                  I(" （"),
+                  s.view === "desktop" ? (v(), E(m, {
+                    key: 0,
+                    name: "stars"
+                  })) : N("", !0),
+                  I(),
+                  i("span", null, c(s.subTitle), 1),
+                  I("） ")
+                ])) : N("", !0)
+              ]),
+              i("div", ue, c(s.content), 1)
+            ])
+          ]),
+          _: 2
+        }, 1024)
+      ], 10, ce))), 128))
+    ]),
+    r.isCanvas ? (v(), E(w, {
+      key: 0,
+      width: "290",
+      trigger: "click",
+      "popper-class": "toolbar-media-popper"
+    }, {
+      reference: p(() => [
+        b(w, {
+          trigger: "hover",
+          "open-delay": 1e3,
+          "popper-class": "toolbar-right-popover",
+          "append-to-body": "",
+          content: "画布设置"
+        }, {
+          reference: p(() => [
+            i("span", me, [
+              i("span", null, [
+                i("span", null, c(parseInt(n.state.width)), 1),
+                we
+              ]),
+              i("span", null, [
+                i("span", null, c(n.scale.toFixed(2)), 1),
+                xe
+              ])
+            ])
+          ]),
+          _: 1
+        })
+      ]),
+      default: p(() => [
+        i("div", ve, [
+          i("span", be, c(n.state.textData.title), 1),
+          i("div", _e, [
+            i("div", null, [
+              i("label", ye, c(n.state.textData.width), 1),
+              b(x, {
+                modelValue: n.state.width,
+                "onUpdate:modelValue": l[0] || (l[0] = (s) => n.state.width = s),
+                onChange: n.widthChange
+              }, {
+                suffix: p(() => [
+                  ge
+                ]),
+                _: 1
+              }, 8, ["modelValue", "onChange"])
+            ]),
+            i("div", null, [
+              i("label", fe, c(n.state.textData.scale), 1),
+              b(x, {
+                modelValue: n.state.scaleValue,
+                "onUpdate:modelValue": l[1] || (l[1] = (s) => n.state.scaleValue = s),
+                readonly: n.state.readonly,
+                onChange: n.scaleChange
+              }, {
+                suffix: p(() => [
+                  ke
+                ]),
+                _: 1
+              }, 8, ["modelValue", "readonly", "onChange"])
+            ])
+          ]),
+          i("ul", Ve, [
+            i("li", null, [
+              Ce,
+              i("div", null, [
+                b(T, {
+                  modelValue: n.isAbsolute,
+                  "onUpdate:modelValue": l[2] || (l[2] = (s) => n.isAbsolute = s),
+                  onChange: n.changeCanvasType
+                }, null, 8, ["modelValue", "onChange"])
+              ])
+            ])
+          ])
+        ])
+      ]),
+      _: 1
+    })) : N("", !0)
+  ]);
+}
+const Te = /* @__PURE__ */ se(ae, [["render", We], ["__scopeId", "data-v-c1e7d8e3"]]), Ee = {
+  id: "media",
+  title: "media",
+  icon: "",
+  align: "center",
+  component: Te
+};
+export {
+  Ee as default
+};

package/dist/style.css

@@ -0,0 +1 @@
+.toolbar-wrap[data-v-c1e7d8e3]{display:flex;align-items:center}.toolbar-wrap .reference-text[data-v-c1e7d8e3]{cursor:pointer;height:var(--base-top-panel-height);line-height:var(--base-top-panel-height);padding:0 7px;color:var(--ti-lowcode-toolbar-breadcrumb-color);display:inline-block}.toolbar-wrap .reference-text>span[data-v-c1e7d8e3]:last-child{margin-left:8px}.toolbar-wrap .toolbar-icon-wrap[data-v-c1e7d8e3]{display:flex;flex-wrap:nowrap;align-items:center;gap:6px}.toolbar-wrap .toolbar-icon-wrap .icon[data-v-c1e7d8e3]{width:32px;height:32px;display:inline-flex;justify-content:center;align-items:center;border-radius:6px}.toolbar-wrap .toolbar-icon-wrap .icon svg[data-v-c1e7d8e3]{cursor:pointer;color:var(--ti-lowcode-toolbar-title-color);outline:none;width:22px;height:22px;margin-top:-.5px}.toolbar-wrap .toolbar-icon-wrap .icon.active[data-v-c1e7d8e3],.toolbar-wrap .toolbar-icon-wrap .icon[data-v-c1e7d8e3]:hover{background:var(--ti-lowcode-toolbar-view-active-bg)}.toolbar-wrap .toolbar-icon-wrap .icon.active svg[data-v-c1e7d8e3]{color:var(--ti-lowcode-common-primary-color)}.toolbar-wrap .more-setting .setting-item[data-v-c1e7d8e3]{display:flex;justify-content:space-between;padding:12px}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@opentiny/tiny-engine-toolbar-media",
+  "version": "1.0.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@opentiny/vue": "^3.8.0",
+    "vue": "3.2.45"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "vite": "^4.3.7"
+  }
+}