@gct-paas/design 0.1.4-dev.7 → 0.1.4-dev.9

package/es/components/editor/style/font-editor/font-style-group.vue2.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from './font-style-group.vue3.mjs';
+import './font-style-group.css';/* empty css                      */
+import _export_sfc from '../../../../_virtual/_plugin-vue_export-helper.mjs';
+
+const FontStyleGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7df87cdb"]]);
+
+export { FontStyleGroup as default };

package/es/components/editor/style/font-editor/font-style-group.vue3.mjs

@@ -0,0 +1,105 @@
+import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, unref, createVNode, withCtx, createTextVNode, toDisplayString } from 'vue';
+import { BoldOutlined, ItalicOutlined, UnderlineOutlined, StrikethroughOutlined } from '@ant-design/icons-vue';
+import { emitFieldSet, t, TextDecoration } from '@gct-paas/core';
+import { DefaultFont } from './util.mjs';
+
+const _hoisted_1 = { class: "font-style-box" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "font-style-group",
+  props: {
+    value: {}
+  },
+  emits: ["update:value"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const local = computed(() => {
+      const defaultFont = {
+        bold: DefaultFont.bold,
+        italic: DefaultFont.italic,
+        textDecoration: DefaultFont.textDecoration
+      };
+      return props.value || defaultFont;
+    });
+    const { bold, italic, textDecoration } = emitFieldSet(local, (_k, _v, obj) => {
+      emit("update:value", obj);
+    });
+    const changeFontStyle = (key) => {
+      if (key === "bold") {
+        bold.value = !bold.value;
+      } else if (key === "italic") {
+        italic.value = !italic.value;
+      }
+    };
+    const changeTextDecoration = (v) => {
+      if (textDecoration.value === v) {
+        textDecoration.value = TextDecoration.NONE;
+      } else {
+        textDecoration.value = v;
+      }
+    };
+    return (_ctx, _cache) => {
+      const _component_a_tooltip = resolveComponent("a-tooltip");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          class: normalizeClass(["icon-box", unref(bold) ? "selected" : null]),
+          onClick: _cache[0] || (_cache[0] = ($event) => changeFontStyle("bold"))
+        }, [
+          createVNode(_component_a_tooltip, null, {
+            title: withCtx(() => [
+              createTextVNode(toDisplayString(unref(t)("sys.pageDesigner.bold")), 1)
+            ]),
+            default: withCtx(() => [
+              createVNode(unref(BoldOutlined))
+            ]),
+            _: 1
+          })
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(["icon-box", unref(italic) ? "selected" : null]),
+          onClick: _cache[1] || (_cache[1] = ($event) => changeFontStyle("italic"))
+        }, [
+          createVNode(_component_a_tooltip, null, {
+            title: withCtx(() => [
+              createTextVNode(toDisplayString(unref(t)("sys.pageDesigner.italic")), 1)
+            ]),
+            default: withCtx(() => [
+              createVNode(unref(ItalicOutlined))
+            ]),
+            _: 1
+          })
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(["icon-box", unref(textDecoration) === unref(TextDecoration).UNDERLINE ? "selected" : null]),
+          onClick: _cache[2] || (_cache[2] = ($event) => changeTextDecoration(unref(TextDecoration).UNDERLINE))
+        }, [
+          createVNode(_component_a_tooltip, null, {
+            title: withCtx(() => [
+              createTextVNode(toDisplayString(unref(t)("sys.pageDesigner.underline")), 1)
+            ]),
+            default: withCtx(() => [
+              createVNode(unref(UnderlineOutlined))
+            ]),
+            _: 1
+          })
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(["icon-box", unref(textDecoration) === unref(TextDecoration).LINETHROUGH ? "selected" : null]),
+          onClick: _cache[3] || (_cache[3] = ($event) => changeTextDecoration(unref(TextDecoration).LINETHROUGH))
+        }, [
+          createVNode(_component_a_tooltip, null, {
+            title: withCtx(() => [
+              createTextVNode(toDisplayString(unref(t)("sys.pageDesigner.linethrough")), 1)
+            ]),
+            default: withCtx(() => [
+              createVNode(unref(StrikethroughOutlined))
+            ]),
+            _: 1
+          })
+        ], 2)
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/editor/style/font-editor/util.d.ts

@@ -0,0 +1,2 @@
+import { IFont } from '@gct-paas/core';
+export declare const DefaultFont: IFont;

package/es/components/editor/style/font-editor/util.mjs

@@ -0,0 +1,12 @@
+import { TextDecoration, TextAlign } from '@gct-paas/core';
+
+const DefaultFont = {
+  fontSize: "14px",
+  color: "#000000",
+  align: TextAlign.LEFT,
+  bold: false,
+  italic: false,
+  textDecoration: TextDecoration.NONE
+};
+
+export { DefaultFont };

package/es/components/editor/style/position-editor/position-editor.css

@@ -0,0 +1,158 @@
+.position-editor[data-v-cc7cb9d8] {
+  width: 100%;
+}
+.ant-select[data-v-cc7cb9d8] {
+  width: 100%;
+}
+.ab-btn-box[data-v-cc7cb9d8] {
+  display: flex;
+  justify-content: space-around;
+}
+.position-box[data-v-cc7cb9d8] {
+  position: relative;
+  width: 100%;
+  height: 150px;
+  margin-top: 10px;
+}
+.position-box .next-input input[data-v-cc7cb9d8] {
+  background-color: transparent;
+  width: 100%;
+  border: none;
+  outline: none;
+}
+.position-box .top-div[data-v-cc7cb9d8] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 0;
+  border-left: 30px solid transparent;
+  border-right: 30px solid transparent;
+  border-top: 30px solid #d5f6f3;
+  transition: all 0.3s ease;
+}
+.position-box .top-div .next-input.next-medium[data-v-cc7cb9d8] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -30px;
+  height: 30px !important;
+  background: transparent;
+  width: 100%;
+}
+.position-box .top-div input[data-v-cc7cb9d8] {
+  text-align: center;
+  line-height: 30px;
+  height: 30px;
+  padding: 0;
+  border: none;
+  outline: none;
+}
+.position-box .top-div[data-v-cc7cb9d8]:hover {
+  border-top: 30px solid #b9ddda;
+}
+.position-box .right-div[data-v-cc7cb9d8] {
+  position: absolute;
+  top: 5px;
+  bottom: 5px;
+  right: 0;
+  width: 0;
+  border-top: 30px solid transparent;
+  border-bottom: 30px solid transparent;
+  border-right: 30px solid #d5f6f3;
+  transition: all 0.3s ease;
+}
+.position-box .right-div .next-input.next-medium[data-v-cc7cb9d8] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -30px;
+  width: 30px;
+  margin: auto;
+  background: transparent;
+}
+.position-box .right-div .next-input.next-medium input[data-v-cc7cb9d8] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -15px;
+  margin: auto;
+  width: 60px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  padding: 0 13px;
+  border: none;
+  outline: none;
+}
+.position-box .right-div[data-v-cc7cb9d8]:hover {
+  border-right: 30px solid #b9ddda;
+}
+.position-box .bottom-div[data-v-cc7cb9d8] {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 0;
+  border-left: 30px solid transparent;
+  border-right: 30px solid transparent;
+  border-bottom: 30px solid #d5f6f3;
+  transition: all 0.3s ease;
+}
+.position-box .bottom-div .next-input.next-medium[data-v-cc7cb9d8] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -30px;
+  height: 30px !important;
+  background: transparent;
+  width: 100%;
+}
+.position-box .bottom-div .next-input.next-medium input[data-v-cc7cb9d8] {
+  text-align: center;
+  line-height: 30px;
+  height: 30px;
+  padding: 0;
+  border: none;
+  outline: none;
+}
+.position-box .bottom-div[data-v-cc7cb9d8]:hover {
+  border-bottom: 30px solid #b9ddda;
+}
+.position-box .left-div[data-v-cc7cb9d8] {
+  position: absolute;
+  top: 5px;
+  bottom: 5px;
+  left: 0;
+  width: 0;
+  border-top: 30px solid transparent;
+  border-bottom: 30px solid transparent;
+  border-left: 30px solid #d5f6f3;
+  transition: all 0.3s ease;
+}
+.position-box .left-div .next-input.next-medium[data-v-cc7cb9d8] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -30px;
+  width: 30px;
+  margin: auto;
+  background: transparent;
+}
+.position-box .left-div .next-input.next-medium input[data-v-cc7cb9d8] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -15px;
+  margin: auto;
+  width: 60px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  padding: 0 13px;
+  border: none;
+  outline: none;
+}
+.position-box .left-div[data-v-cc7cb9d8]:hover {
+  border-left: 30px solid #b9ddda;
+}

package/es/components/editor/style/position-editor/position-editor.vue.d.ts

@@ -0,0 +1,12 @@
+import { IPosition } from '@gct-paas/core';
+type __VLS_Props = {
+    value?: IPosition;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:value": (value: IPosition | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: IPosition | undefined) => any) | undefined;
+}>, {
+    value: IPosition;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/es/components/editor/style/position-editor/position-editor.vue2.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from './position-editor.vue3.mjs';
+import './position-editor.css';/* empty css                     */
+import _export_sfc from '../../../../_virtual/_plugin-vue_export-helper.mjs';
+
+const PositionEditor = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cc7cb9d8"]]);
+
+export { PositionEditor as default };

package/es/components/editor/style/position-editor/position-editor.vue3.mjs

@@ -0,0 +1,242 @@
+import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, createVNode, isRef, unref, withCtx, createCommentVNode, createElementVNode, withDirectives, vModelText } from 'vue';
+import UpleftIcon from '../../../icon/upleft-icon.vue2.mjs';
+import DownleftIcon from '../../../icon/downleft-icon.vue2.mjs';
+import DownrightIcon from '../../../icon/downright-icon.vue2.mjs';
+import UprightIcon from '../../../icon/upright-icon.vue2.mjs';
+import { Postion, emitFieldSet, t } from '@gct-paas/core';
+import { merge } from 'lodash-es';
+
+const _hoisted_1 = { class: "position-editor" };
+const _hoisted_2 = {
+  key: 0,
+  class: "ab-btn-box",
+  style: { "margin-top": "10px" }
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "position-box"
+};
+const _hoisted_4 = { class: "top-div" };
+const _hoisted_5 = { class: "next-input next-medium next-noborder" };
+const _hoisted_6 = { class: "right-div" };
+const _hoisted_7 = { class: "next-input next-medium next-noborder" };
+const _hoisted_8 = { class: "bottom-div" };
+const _hoisted_9 = { class: "next-input next-medium next-noborder" };
+const _hoisted_10 = { class: "left-div" };
+const _hoisted_11 = { class: "next-input next-medium next-noborder" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "position-editor",
+  props: {
+    value: { default: () => ({}) }
+  },
+  emits: ["update:value"],
+  setup(__props, { emit: __emit }) {
+    const positionOptions = [
+      {
+        label: Postion.RELATIVE,
+        value: Postion.RELATIVE
+      },
+      {
+        label: Postion.ABSOLUTE,
+        value: Postion.ABSOLUTE
+      },
+      {
+        label: Postion.FIXED,
+        value: Postion.FIXED
+      },
+      {
+        label: Postion.STICKY,
+        value: Postion.STICKY
+      }
+    ];
+    const props = __props;
+    const emit = __emit;
+    const local = computed(() => {
+      const result = {
+        top: void 0,
+        left: void 0,
+        bottom: void 0,
+        right: void 0,
+        position: void 0
+      };
+      merge(result, props.value || {});
+      return result;
+    });
+    const { top, left, bottom, right, position } = emitFieldSet(
+      local,
+      (k, v, obj) => {
+        const emitObj = k === "position" && !v ? void 0 : obj;
+        emit("update:value", emitObj);
+      }
+    );
+    let absolutePos = "";
+    const handleClickAbsolutePos = (pos) => {
+      absolutePos = pos;
+      switch (absolutePos) {
+        case "upLeft":
+          top.value = "0";
+          left.value = "0";
+          right.value = "";
+          bottom.value = "";
+          break;
+        case "downLeft":
+          top.value = "";
+          left.value = "0";
+          right.value = "";
+          bottom.value = "0";
+          break;
+        case "upRight":
+          top.value = "0";
+          left.value = "";
+          right.value = "0";
+          bottom.value = "";
+          break;
+        case "downRight":
+          top.value = "";
+          left.value = "";
+          right.value = "0";
+          bottom.value = "0";
+          break;
+      }
+    };
+    const clearPosition = () => {
+      top.value = "";
+      left.value = "";
+      right.value = "";
+      bottom.value = "";
+    };
+    return (_ctx, _cache) => {
+      const _component_a_select = resolveComponent("a-select");
+      const _component_a_tooltip = resolveComponent("a-tooltip");
+      const _component_a_button = resolveComponent("a-button");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_component_a_select, {
+          value: unref(position),
+          "onUpdate:value": _cache[0] || (_cache[0] = ($event) => isRef(position) ? position.value = $event : null),
+          options: positionOptions,
+          "allow-clear": "",
+          size: "small",
+          onClear: clearPosition
+        }, null, 8, ["value"]),
+        unref(position) === "absolute" ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createVNode(_component_a_button, {
+            size: "middle",
+            onClick: _cache[1] || (_cache[1] = ($event) => handleClickAbsolutePos("upLeft"))
+          }, {
+            icon: withCtx(() => [
+              createVNode(_component_a_tooltip, {
+                title: unref(t)("sys.pageDesigner.upLeft")
+              }, {
+                default: withCtx(() => [
+                  createVNode(UpleftIcon)
+                ]),
+                _: 1
+              }, 8, ["title"])
+            ]),
+            _: 1
+          }),
+          createVNode(_component_a_button, {
+            size: "middle",
+            onClick: _cache[2] || (_cache[2] = ($event) => handleClickAbsolutePos("upRight"))
+          }, {
+            icon: withCtx(() => [
+              createVNode(_component_a_tooltip, {
+                title: unref(t)("sys.pageDesigner.upRight")
+              }, {
+                default: withCtx(() => [
+                  createVNode(UprightIcon)
+                ]),
+                _: 1
+              }, 8, ["title"])
+            ]),
+            _: 1
+          }),
+          createVNode(_component_a_button, {
+            size: "middle",
+            onClick: _cache[3] || (_cache[3] = ($event) => handleClickAbsolutePos("downLeft"))
+          }, {
+            icon: withCtx(() => [
+              createVNode(_component_a_tooltip, {
+                title: unref(t)("sys.pageDesigner.downLeft")
+              }, {
+                default: withCtx(() => [
+                  createVNode(DownleftIcon)
+                ]),
+                _: 1
+              }, 8, ["title"])
+            ]),
+            _: 1
+          }),
+          createVNode(_component_a_button, {
+            size: "middle",
+            onClick: _cache[4] || (_cache[4] = ($event) => handleClickAbsolutePos("downRight"))
+          }, {
+            icon: withCtx(() => [
+              createVNode(_component_a_tooltip, {
+                title: unref(t)("sys.pageDesigner.downRight")
+              }, {
+                default: withCtx(() => [
+                  createVNode(DownrightIcon)
+                ]),
+                _: 1
+              }, 8, ["title"])
+            ]),
+            _: 1
+          })
+        ])) : createCommentVNode("", true),
+        !["", "static", null, void 0].includes(unref(position)) ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          createElementVNode("div", _hoisted_4, [
+            createElementVNode("span", _hoisted_5, [
+              withDirectives(createElementVNode("input", {
+                "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => isRef(top) ? top.value = $event : null),
+                placeholder: "auto",
+                maxlength: "4",
+                autocomplete: "off"
+              }, null, 512), [
+                [vModelText, unref(top)]
+              ])
+            ])
+          ]),
+          createElementVNode("div", _hoisted_6, [
+            createElementVNode("span", _hoisted_7, [
+              withDirectives(createElementVNode("input", {
+                "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => isRef(right) ? right.value = $event : null),
+                placeholder: "auto",
+                maxlength: "4",
+                autocomplete: "off"
+              }, null, 512), [
+                [vModelText, unref(right)]
+              ])
+            ])
+          ]),
+          createElementVNode("div", _hoisted_8, [
+            createElementVNode("span", _hoisted_9, [
+              withDirectives(createElementVNode("input", {
+                "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => isRef(bottom) ? bottom.value = $event : null),
+                placeholder: "auto",
+                maxlength: "4",
+                autocomplete: "off"
+              }, null, 512), [
+                [vModelText, unref(bottom)]
+              ])
+            ])
+          ]),
+          createElementVNode("div", _hoisted_10, [
+            createElementVNode("span", _hoisted_11, [
+              withDirectives(createElementVNode("input", {
+                "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => isRef(left) ? left.value = $event : null),
+                placeholder: "auto",
+                maxlength: "4",
+                autocomplete: "off"
+              }, null, 512), [
+                [vModelText, unref(left)]
+              ])
+            ])
+          ])
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/editor/style/spacing-editor/spacing-editor.css

@@ -0,0 +1,135 @@
+.ant-input-number[data-v-18c72ccf]::before {
+  content: 'px';
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 3px;
+  font-size: 12px;
+  color: #797a7d;
+}
+.ant-input-number[data-v-18c72ccf] input {
+  padding-left: 4px;
+  font-size: 12px;
+}
+.spacing-editor__container[data-v-18c72ccf] {
+  display: flex;
+  justify-content: center;
+}
+.spacing-editor__container .box[data-v-18c72ccf] {
+  position: relative;
+  width: 176px;
+  height: 98px;
+  margin-top: 30px;
+  border: 1px solid var(--gct-color-border);
+  border-radius: 4px;
+}
+.spacing-editor__container .box .box-inner[data-v-18c72ccf] {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 104px;
+  height: 52px;
+  transform: translate(-50%, -50%);
+  border: 1px dashed var(--gct-color-border);
+  border-radius: 4px;
+}
+.spacing-editor__container .box .box-inner-line[data-v-18c72ccf] {
+  position: absolute;
+  background-color: #c3c3c3;
+}
+.spacing-editor__container .box .box-inner-line.highlight[data-v-18c72ccf] {
+  background-color: var(--ant-primary-color);
+}
+.spacing-editor__container .box .box-inner-line.line-top[data-v-18c72ccf],
+.spacing-editor__container .box .box-inner-line.line-bottom[data-v-18c72ccf] {
+  top: -13px;
+  right: 50%;
+  width: 2px;
+  height: 13px;
+  transform: translateX(-50%);
+}
+.spacing-editor__container .box .box-inner-line.line-top.line-padding[data-v-18c72ccf],
+.spacing-editor__container .box .box-inner-line.line-bottom.line-padding[data-v-18c72ccf] {
+  top: 0;
+  height: 12px;
+}
+.spacing-editor__container .box .box-inner-line.line-bottom[data-v-18c72ccf] {
+  top: unset;
+  bottom: -13px;
+}
+.spacing-editor__container .box .box-inner-line.line-bottom.line-padding[data-v-18c72ccf] {
+  top: unset;
+  bottom: 0;
+}
+.spacing-editor__container .box .box-inner-line.line-left[data-v-18c72ccf],
+.spacing-editor__container .box .box-inner-line.line-right[data-v-18c72ccf] {
+  top: 50%;
+  left: -18px;
+  width: 18px;
+  height: 2px;
+  transform: translateY(-50%);
+}
+.spacing-editor__container .box .box-inner-line.line-left.line-padding[data-v-18c72ccf],
+.spacing-editor__container .box .box-inner-line.line-right.line-padding[data-v-18c72ccf] {
+  left: 0;
+}
+.spacing-editor__container .box .box-inner-line.line-right[data-v-18c72ccf] {
+  right: -18px;
+  left: unset;
+}
+.spacing-editor__container .box .box-inner-line.line-right.line-padding[data-v-18c72ccf] {
+  right: 0;
+  left: unset;
+}
+.spacing-editor__container .box .input[data-v-18c72ccf] {
+  position: absolute;
+  min-width: 0;
+  width: 48px !important;
+  height: 24px;
+  padding: 0 3px;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  border-radius: 4px;
+  color: #212528;
+}
+.spacing-editor__container .box .input[data-v-18c72ccf]:has(:focus) {
+  border-color: var(--ant-primary-color);
+}
+.spacing-editor__container .box .top[data-v-18c72ccf] {
+  top: -14px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.spacing-editor__container .box .right[data-v-18c72ccf] {
+  top: 50%;
+  right: -24px;
+  transform: translateY(-50%);
+}
+.spacing-editor__container .box .bottom[data-v-18c72ccf] {
+  bottom: -14px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.spacing-editor__container .box .left[data-v-18c72ccf] {
+  top: 50%;
+  left: -24px;
+  transform: translateY(-50%);
+}
+.spacing-editor__container .box .center[data-v-18c72ccf] {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+[data-v-18c72ccf] .ant-tabs-nav {
+  margin-bottom: 0;
+}
+[data-v-18c72ccf] .ant-tabs-nav-wrap {
+  padding: 0 12px;
+}
+[data-v-18c72ccf] .ant-tabs-tab {
+  padding: 4px 0;
+  font-size: 12px;
+}
+[data-v-18c72ccf] .ant-input-affix-wrapper-focused {
+  box-shadow: 0 0 0 1px var(--ant-primary-color) !important;
+}