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

package/es/components/editor/style/border-editor/border-box.css

@@ -0,0 +1,144 @@
+.border-box[data-v-a5616984] {
+  display: flex;
+  align-items: center;
+}
+.border-box .border-div[data-v-a5616984] {
+  width: 60px;
+  height: 60px;
+  padding: 6px;
+  border-radius: 4px;
+  border: 1px solid var(--gct-color-border);
+  margin-right: 15px;
+}
+.border-box .border-div-inner[data-v-a5616984] {
+  border: 1px dashed var(--gct-color-border);
+  border-radius: 4px;
+  position: relative;
+  width: 48px;
+  height: 48px;
+}
+.border-box .border-div .rect[data-v-a5616984] {
+  cursor: pointer;
+  border: 1px solid #e3e3e3;
+  width: 10px;
+  height: 10px;
+  border-radius: 1px;
+}
+.border-box .border-div .center[data-v-a5616984] {
+  cursor: pointer;
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border: 1px solid #c3c3c3;
+}
+.border-box .border-div .top[data-v-a5616984] {
+  position: absolute;
+  top: -1px;
+  left: 50%;
+  width: 22px;
+  height: 2px;
+  background-color: #c3c3c3;
+  z-index: 3;
+  transform: translate(-50%, 0);
+}
+.border-box .border-div .top-rect[data-v-a5616984] {
+  position: absolute;
+  top: -1px;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+.border-box .border-div .bottom[data-v-a5616984] {
+  position: absolute;
+  bottom: -1px;
+  left: 50%;
+  width: 22px;
+  height: 2px;
+  z-index: 3;
+  background-color: #c3c3c3;
+  transform: translate(-50%, 0);
+}
+.border-box .border-div .bottom-rect[data-v-a5616984] {
+  position: absolute;
+  bottom: -1px;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+.border-box .border-div .left[data-v-a5616984] {
+  position: absolute;
+  top: 50%;
+  left: -1px;
+  width: 2px;
+  z-index: 3;
+  height: 22px;
+  background-color: #c3c3c3;
+  transform: translate(0, -50%);
+}
+.border-box .border-div .left-rect[data-v-a5616984] {
+  position: absolute;
+  top: 50%;
+  left: -1px;
+  transform: translate(0, -50%);
+}
+.border-box .border-div .right[data-v-a5616984] {
+  position: absolute;
+  top: 50%;
+  right: -1px;
+  width: 2px;
+  height: 22px;
+  z-index: 3;
+  background-color: #c3c3c3;
+  transform: translate(0, -50%);
+}
+.border-box .border-div .right-rect[data-v-a5616984] {
+  position: absolute;
+  top: 50%;
+  right: -1px;
+  transform: translate(0, -50%);
+}
+.border-box .border-editor[data-v-a5616984] {
+  flex: 1;
+}
+.border-box .border-editor .row[data-v-a5616984] {
+  margin-bottom: 4px;
+  align-items: center;
+}
+.border-box .border-editor .border-col[data-v-a5616984] {
+  border-bottom: 1px solid #c3c3c3;
+  padding-bottom: 5px;
+  display: flex;
+  align-items: center;
+  width: 50%;
+}
+.border-box .border-editor .border-col .border-text[data-v-a5616984] {
+  margin-right: 12px;
+}
+.border-box .border-editor .border-col .input-wrap[data-v-a5616984] {
+  flex: 1;
+}
+.border-box .border-editor .border-col .input-wrap .border-input[data-v-a5616984] {
+  border: none;
+  outline: none;
+  text-align: center;
+  vertical-align: middle;
+  background-color: transparent;
+  width: 100%;
+}
+.focus[data-v-a5616984] {
+  background-color: var(--ant-primary-color) !important;
+}
+.focus-line[data-v-a5616984] {
+  border: 1px solid var(--ant-primary-color) !important;
+}
+[data-v-a5616984] .gct-select-arrow {
+  color: #212528;
+  position: absolute;
+  top: 50%;
+  right: 45px;
+}
+[data-v-a5616984] .ant-input-number-handler-wrap {
+  z-index: 2;
+}

package/es/components/editor/style/border-editor/border-box.vue.d.ts

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

package/es/components/editor/style/border-editor/border-box.vue2.mjs

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

package/es/components/editor/style/border-editor/border-box.vue3.mjs

@@ -0,0 +1,305 @@
+import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, unref, createVNode, withCtx, createTextVNode, toDisplayString, isRef, normalizeStyle } from 'vue';
+import { BorderStyle, t, emitFieldSet, presetColor } from '@gct-paas/core';
+import { parsePos, parseBorderItem, parseValueUnit } from './util.mjs';
+
+const _hoisted_1 = { class: "border-box" };
+const _hoisted_2 = { class: "border-div" };
+const _hoisted_3 = { class: "border-div-inner" };
+const _hoisted_4 = { class: "border-editor" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "border-box",
+  props: {
+    value: {}
+  },
+  emits: ["update:value"],
+  setup(__props, { emit: __emit }) {
+    const options = ref([
+      {
+        label: "1",
+        value: 1
+      },
+      {
+        label: "2",
+        value: 2
+      },
+      {
+        label: "3",
+        value: 3
+      },
+      {
+        label: "4",
+        value: 4
+      },
+      {
+        label: "5",
+        value: 5
+      }
+    ]);
+    const borderStyleOpt = [
+      {
+        label: t(`sys.pageDesigner.borderStyle.${BorderStyle.NONE}`),
+        value: BorderStyle.NONE
+      },
+      {
+        label: t(`sys.pageDesigner.borderStyle.${BorderStyle.SOLID}`),
+        value: BorderStyle.SOLID
+      },
+      {
+        label: t(`sys.pageDesigner.borderStyle.${BorderStyle.DOTTED}`),
+        value: BorderStyle.DOTTED
+      },
+      {
+        label: t(`sys.pageDesigner.borderStyle.${BorderStyle.DASHED}`),
+        value: BorderStyle.DASHED
+      }
+    ];
+    const defaultBorder = {
+      style: BorderStyle.NONE,
+      color: "#F0F0F0",
+      width: 1
+    };
+    const props = __props;
+    const emit = __emit;
+    const local = computed(() => {
+      const v = props.value;
+      const pos2 = parsePos(v);
+      const item = parseBorderItem(pos2, v);
+      let borderItem = {
+        style: item?.style || defaultBorder.style,
+        color: item?.color || defaultBorder.color,
+        width: defaultBorder.width
+      };
+      if (item?.width) {
+        const { value } = parseValueUnit(item.width);
+        borderItem.width = value;
+      }
+      return {
+        pos: pos2,
+        ...borderItem
+      };
+    });
+    const { pos, style, color, width } = emitFieldSet(local, (_f, _v, obj) => {
+      const eachBorder = {
+        style: obj.style,
+        color: obj.color,
+        width: obj.width + "px"
+      };
+      let tags = ["top", "right", "bottom", "left"];
+      switch (obj.pos) {
+        case "borderTop":
+          tags = ["top"];
+          break;
+        case "borderRight":
+          tags = ["right"];
+          break;
+        case "borderBottom":
+          tags = ["bottom"];
+          break;
+        case "borderLeft":
+          tags = ["left"];
+          break;
+      }
+      const result = {};
+      tags.forEach((tag) => {
+        result[tag] = { ...eachBorder };
+      });
+      emit("update:value", result);
+    });
+    const onWidthBlur = () => {
+      if (!width.value) {
+        width.value = 1;
+      }
+    };
+    const handleUpdateColor = (_e, v) => {
+      color.value = v;
+    };
+    return (_ctx, _cache) => {
+      const _component_a_tooltip = resolveComponent("a-tooltip");
+      const _component_a_col = resolveComponent("a-col");
+      const _component_a_select = resolveComponent("a-select");
+      const _component_a_row = resolveComponent("a-row");
+      const _component_a_input_number = resolveComponent("a-input-number");
+      const _component_a_auto_complete = resolveComponent("a-auto-complete");
+      const _component_down_outlined = resolveComponent("down-outlined");
+      const _component_color_picker = resolveComponent("color-picker");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, [
+            createElementVNode("div", {
+              class: normalizeClass(["top", unref(pos) === "borderTop" ? "focus" : null])
+            }, null, 2),
+            createVNode(_component_a_tooltip, null, {
+              title: withCtx(() => [
+                createTextVNode(toDisplayString(unref(t)("sys.pageDesigner.topBorder")), 1)
+              ]),
+              default: withCtx(() => [
+                createElementVNode("div", {
+                  class: normalizeClass(["top-rect rect", unref(pos) === "borderTop" ? "focus-line" : null]),
+                  onClick: _cache[0] || (_cache[0] = ($event) => pos.value = "borderTop")
+                }, null, 2)
+              ]),
+              _: 1
+            }),
+            createElementVNode("div", {
+              class: normalizeClass(["left", unref(pos) === "borderLeft" ? "focus" : null])
+            }, null, 2),
+            createVNode(_component_a_tooltip, null, {
+              title: withCtx(() => [
+                createTextVNode(toDisplayString(unref(t)("sys.pageDesigner.leftBorder")), 1)
+              ]),
+              default: withCtx(() => [
+                createElementVNode("div", {
+                  class: normalizeClass(["left-rect rect", unref(pos) === "borderLeft" ? "focus-line" : null]),
+                  onClick: _cache[1] || (_cache[1] = ($event) => pos.value = "borderLeft")
+                }, null, 2)
+              ]),
+              _: 1
+            }),
+            createElementVNode("div", {
+              class: normalizeClass(["bottom", unref(pos) === "borderBottom" ? "focus" : null])
+            }, null, 2),
+            createVNode(_component_a_tooltip, null, {
+              title: withCtx(() => [
+                createTextVNode(toDisplayString(unref(t)("sys.pageDesigner.bottomBorder")), 1)
+              ]),
+              default: withCtx(() => [
+                createElementVNode("div", {
+                  class: normalizeClass(["bottom-rect rect", unref(pos) === "borderBottom" ? "focus-line" : null]),
+                  onClick: _cache[2] || (_cache[2] = ($event) => pos.value = "borderBottom")
+                }, null, 2)
+              ]),
+              _: 1
+            }),
+            createElementVNode("div", {
+              class: normalizeClass(["right", unref(pos) === "borderRight" ? "focus" : null])
+            }, null, 2),
+            createVNode(_component_a_tooltip, null, {
+              title: withCtx(() => [
+                createTextVNode(toDisplayString(unref(t)("sys.pageDesigner.rightBorder")), 1)
+              ]),
+              default: withCtx(() => [
+                createElementVNode("div", {
+                  class: normalizeClass(["right-rect rect", unref(pos) === "borderRight" ? "focus-line" : null]),
+                  onClick: _cache[3] || (_cache[3] = ($event) => pos.value = "borderRight")
+                }, null, 2)
+              ]),
+              _: 1
+            }),
+            createVNode(_component_a_tooltip, null, {
+              title: withCtx(() => [
+                createTextVNode(toDisplayString(unref(t)("sys.pageDesigner.whole")), 1)
+              ]),
+              default: withCtx(() => [
+                createElementVNode("div", {
+                  class: normalizeClass(["center", unref(pos) === "borderAll" ? "focus-line" : null]),
+                  onClick: _cache[4] || (_cache[4] = ($event) => pos.value = "borderAll")
+                }, null, 2)
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        createElementVNode("div", _hoisted_4, [
+          createVNode(_component_a_row, { class: "row" }, {
+            default: withCtx(() => [
+              createVNode(_component_a_col, { span: 6 }, {
+                default: withCtx(() => [..._cache[8] || (_cache[8] = [
+                  createTextVNode("线型", -1)
+                ])]),
+                _: 1
+              }),
+              createVNode(_component_a_col, { span: 18 }, {
+                default: withCtx(() => [
+                  createVNode(_component_a_select, {
+                    value: unref(style),
+                    "onUpdate:value": _cache[5] || (_cache[5] = ($event) => isRef(style) ? style.value = $event : null),
+                    options: borderStyleOpt,
+                    style: { "width": "100%" },
+                    size: "small"
+                  }, null, 8, ["value"])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_a_row, { class: "row" }, {
+            default: withCtx(() => [
+              createVNode(_component_a_col, { span: 6 }, {
+                default: withCtx(() => [..._cache[9] || (_cache[9] = [
+                  createTextVNode("线宽", -1)
+                ])]),
+                _: 1
+              }),
+              createVNode(_component_a_col, {
+                span: 18,
+                class: "relative"
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_a_auto_complete, {
+                    value: unref(width),
+                    "onUpdate:value": _cache[7] || (_cache[7] = ($event) => isRef(width) ? width.value = $event : null),
+                    options: options.value
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(_component_a_input_number, {
+                        value: unref(width),
+                        "onUpdate:value": _cache[6] || (_cache[6] = ($event) => isRef(width) ? width.value = $event : null),
+                        min: 0,
+                        controls: true,
+                        precision: 0,
+                        style: { "width": "100%" },
+                        size: "small",
+                        "addon-after": "px",
+                        onBlur: onWidthBlur
+                      }, null, 8, ["value"])
+                    ]),
+                    _: 1
+                  }, 8, ["value", "options"]),
+                  createVNode(_component_down_outlined, { class: "ant-select-arrow gct-select-arrow" })
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_a_row, { class: "row" }, {
+            default: withCtx(() => [
+              createVNode(_component_a_col, { span: 6 }, {
+                default: withCtx(() => [..._cache[10] || (_cache[10] = [
+                  createTextVNode("颜色", -1)
+                ])]),
+                _: 1
+              }),
+              createVNode(_component_a_col, { span: 18 }, {
+                default: withCtx(() => [
+                  createVNode(_component_color_picker, {
+                    preset: unref(presetColor),
+                    color: unref(color),
+                    "onUpdate:color": handleUpdateColor
+                  }, {
+                    icon: withCtx(() => [
+                      createElementVNode("div", {
+                        style: normalizeStyle({
+                          width: "22px",
+                          height: "22px",
+                          backgroundColor: unref(color),
+                          borderRadius: "4px"
+                        })
+                      }, null, 4)
+                    ]),
+                    _: 1
+                  }, 8, ["preset", "color"])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ])
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };

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

@@ -0,0 +1,64 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */

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

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

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

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

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

@@ -0,0 +1,60 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, unref, createBlock, isRef, createCommentVNode } from 'vue';
+import { useNamespace, emitFieldSet } from '@gct-paas/core';
+import BorderBox from './border-box.vue2.mjs';
+import BorderRadiu from './border-radius.vue2.mjs';
+import { pick } from 'lodash-es';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "border-editor",
+  props: {
+    value: {},
+    showArea: { default: () => ["radius", "basics"] }
+  },
+  emits: ["update:value"],
+  setup(__props, { emit: __emit }) {
+    const ns = useNamespace("border-editor");
+    const props = __props;
+    const emit = __emit;
+    const local = computed(() => {
+      const v = props.value;
+      const boxValue2 = v ? pick(v, ["top", "bottom", "left", "right"]) : void 0;
+      const borderRadius2 = v ? pick(v, [
+        "topLeftRadius",
+        "topRightRadius",
+        "bottomRightRadius",
+        "bottomLeftRadius"
+      ]) : void 0;
+      return {
+        borderRadius: borderRadius2,
+        boxValue: boxValue2
+      };
+    });
+    const { boxValue, borderRadius } = emitFieldSet(local, (_k, _v, obj) => {
+      const result = {
+        ...obj.borderRadius || {},
+        ...obj.boxValue || {}
+      };
+      emit("update:value", result);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([unref(ns).b()])
+      }, [
+        __props.showArea.includes("radius") ? (openBlock(), createBlock(BorderRadiu, {
+          key: 0,
+          value: unref(borderRadius),
+          "onUpdate:value": _cache[0] || (_cache[0] = ($event) => isRef(borderRadius) ? borderRadius.value = $event : null),
+          class: normalizeClass([unref(ns).e("border-box"), "mb-16px"])
+        }, null, 8, ["value", "class"])) : createCommentVNode("", true),
+        __props.showArea.includes("basics") ? (openBlock(), createBlock(BorderBox, {
+          key: 1,
+          value: unref(boxValue),
+          "onUpdate:value": _cache[1] || (_cache[1] = ($event) => isRef(boxValue) ? boxValue.value = $event : null),
+          class: normalizeClass([unref(ns).e("border-box")])
+        }, null, 8, ["value", "class"])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+
+export { _sfc_main as default };