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

package/es/editor/child-list-editor/components/child-list-item-editor.mjs

@@ -0,0 +1,238 @@
+import { defineComponent, createVNode, resolveComponent, withDirectives, vShow, ref, toRefs, computed, mergeProps } from 'vue';
+import { useDrop, useDrag } from 'vue3-dnd';
+import './child-list-item-editor.css';/* empty css                             */
+import { t, useNamespace, useGctFormValue } from '@gct-paas/core';
+
+const ChildListItemEditor = /* @__PURE__ */ defineComponent({
+  name: 'ChildListItemEditor',
+  props: {
+    // 列表长度
+    count: {
+      type: Number,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    },
+    node: {
+      type: Object,
+      required: true
+    },
+    fieldKey: {
+      type: String,
+      required: true
+    },
+    value: {
+      type: String,
+      required: true
+    },
+    showLabel: {
+      type: Boolean,
+      default: false
+    },
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    drag: {
+      type: Boolean
+    },
+    check: {
+      type: Boolean
+    },
+    delete: {
+      type: Boolean
+    },
+    editorType: {
+      type: String
+    },
+    editorProps: {
+      type: Object,
+      default: () => ({})
+    },
+    moveCard: {
+      type: Function,
+      required: true
+    }
+  },
+  emits: ['check', 'delete', 'update:title', 'update:value'],
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace('child-list-item-editor');
+    const isBeforeHover = ref(false);
+    const elRef = ref(null);
+    const dragRef = ref(null);
+    const {
+      checked,
+      node
+    } = toRefs(props);
+    const radio = computed({
+      get() {
+        return checked.value;
+      },
+      set() {
+        emit('check');
+      }
+    });
+    const [dropCollect, drop] = useDrop({
+      accept: 'child-list-item-editor',
+      collect(monitor) {
+        return {
+          handlerId: monitor.getHandlerId(),
+          isShallowOver: monitor.isOver({
+            shallow: true
+          })
+        };
+      },
+      hover(item, monitor) {
+        if (monitor.canDrop() === false || collect.value.isDragging === true) {
+          return;
+        }
+        const isOver = monitor.isOver({
+          shallow: true
+        });
+        if (props.node.id === item.id) {
+          return;
+        }
+        if (isOver) {
+          const rect = elRef.value.getBoundingClientRect();
+          const offset = monitor.getClientOffset();
+          let difference = 0;
+          {
+            const {
+              top,
+              height
+            } = rect;
+            const {
+              y
+            } = offset;
+            const half = height / 2;
+            difference = y - top - half;
+            if (difference < 0) {
+              isBeforeHover.value = true;
+            } else {
+              isBeforeHover.value = false;
+            }
+          }
+        }
+      },
+      drop(item, _monitor) {
+        if (props.node.id === item.id) {
+          return;
+        }
+        const dragIndex = item.index;
+        const hoverIndex = props.index;
+        props.moveCard(dragIndex, isBeforeHover.value ? hoverIndex : hoverIndex + 1);
+      }
+    });
+    const [collect, drag, preview] = useDrag({
+      type: 'child-list-item-editor',
+      item: () => {
+        return {
+          id: props.node.id,
+          index: props.index
+        };
+      },
+      collect: monitor => ({
+        isDragging: monitor.isDragging()
+      })
+    });
+    drag(dragRef);
+    drop(elRef);
+    preview(elRef);
+    const val = useGctFormValue();
+    const i18nConfigValue = computed({
+      get: () => {
+        if (node.value.data.i18nConfig) {
+          return node.value.data.i18nConfig;
+        }
+        return '';
+      },
+      set: val => {
+        node.value.data.i18nConfig = val;
+      }
+    });
+    const onDelete = () => {
+      emit('delete');
+    };
+    const renderEditor = () => {
+      if (props.editorType === 'i18n') {
+        return createVNode(resolveComponent("i18n-select-input"), mergeProps(props.editorProps, {
+          "i18nText": val.value,
+          "onUpdate:i18nText": $event => val.value = $event,
+          "i18nConfig": i18nConfigValue.value,
+          "onUpdate:i18nConfig": $event => i18nConfigValue.value = $event,
+          "inputExtraProps": {
+            showCount: true,
+            allowClear: false,
+            maxlength: 32,
+            size: 'small'
+          },
+          "forceUpdate": true,
+          "attr": props.fieldKey
+        }), null);
+      }
+      if (props.editorType === 'number') {
+        return createVNode(resolveComponent("a-input-number"), mergeProps(props.editorProps, {
+          "value": val.value,
+          "onUpdate:value": $event => val.value = $event,
+          "size": "small"
+        }), null);
+      }
+      return createVNode(resolveComponent("a-input"), mergeProps(props.editorProps, {
+        "value": val.value,
+        "onUpdate:value": $event => val.value = $event,
+        "size": "small"
+      }), null);
+    };
+    return {
+      ns,
+      radio,
+      elRef,
+      dragRef,
+      dropCollect,
+      collect,
+      isBeforeHover,
+      onDelete,
+      renderEditor
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "ref": "elRef",
+      "class": this.ns.b()
+    }, [this.drag ? createVNode("span", {
+      "ref": "dragRef",
+      "class": this.ns.e('drag')
+    }, [createVNode("i", {
+      "class": "iconfont icon-drag"
+    }, null)]) : null, this.showLabel === true ? createVNode("span", {
+      "class": this.ns.e('label')
+    }, [this.node.label]) : null, this.check ? createVNode("span", {
+      "class": this.ns.e('check')
+    }, [createVNode(resolveComponent("a-radio"), {
+      "checked": this.radio,
+      "onUpdate:checked": $event => this.radio = $event
+    }, null)]) : null, createVNode("span", {
+      "class": this.ns.e('editor')
+    }, [this.renderEditor()]), withDirectives(createVNode("span", {
+      "class": this.ns.e('delete')
+    }, [this.delete !== false ? createVNode(resolveComponent("a-popconfirm"), {
+      "placement": "topRight",
+      "title": t('sys.appDesigner.customAppHome.deleteConfirm'),
+      "onConfirm": this.onDelete
+    }, {
+      default: () => {
+        return createVNode("i", {
+          "class": "iconfont icon-shanchu"
+        }, null);
+      }
+    }) : null]), [[vShow, this.count > 1]]), this.dropCollect.isShallowOver && !this.collect.isDragging ? createVNode("div", {
+      "class": [this.ns.b('indicator'), this.ns.is('before', this.isBeforeHover)]
+    }, null) : null]);
+  }
+});
+
+export { ChildListItemEditor };

package/es/editor/child-list-editor/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    install(app: import('vue').App): void;
+};
+export default _default;

package/es/editor/child-list-editor/index.mjs

@@ -0,0 +1,13 @@
+import { widthEditorInstall } from '@gct-paas/core';
+import { DesignEditorType } from '../../constant/design-editor-type.mjs';
+import '../../constant/page-designer.mjs';
+import { ChildListEditor as ChildListEditor$1 } from './child-list-editor.mjs';
+import { ChildListEditorProvider } from './child-list-editor.provider.mjs';
+
+const ChildListEditor = widthEditorInstall(
+  DesignEditorType.CHILD_LIST_EDITOR,
+  () => new ChildListEditorProvider(),
+  ChildListEditor$1
+);
+
+export { ChildListEditor as default };

package/es/editor/content-tag-style/content-tag-style.css

@@ -0,0 +1,164 @@
+@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 */
+.gct-content-tag-style {
+  min-height: 26px;
+}
+.gct-content-tag-style__title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  line-height: 18px;
+}
+
+.gct-content-tag-style__check .ant-checkbox-inner::after {
+  top: 48%;
+  left: 20%;
+}
+.gct-content-tag-style__check .ant-checkbox-wrapper {
+  height: 18px;
+  display: flex;
+  align-items: center;
+}
+.gct-content-tag-style__check .ant-checkbox-wrapper .ant-checkbox {
+  top: 0;
+}
+.gct-content-tag-style__check .ant-checkbox-wrapper .ant-checkbox .ant-checkbox-inner {
+  width: 14px;
+  height: 14px;
+  border-radius: 4px;
+}
+.gct-content-tag-style__check .ant-checkbox-wrapper .ant-checkbox + span {
+  padding-left: 4px;
+  padding-right: 0;
+}
+
+.gct-content-tag-style__tag-icon {
+  width: 30px;
+  height: 20px;
+  margin-right: 10px;
+}
+
+.gct-content-tag-style__tag {
+  height: 24px;
+  display: flex;
+  align-items: center;
+}
+.gct-content-tag-style__tag .radius {
+  border-radius: 5px;
+  background-color: var(--ant-primary-color);
+}
+.gct-content-tag-style__tag .linear_radius {
+  border: 1px solid var(--ant-primary-color);
+  border-radius: 5px;
+}
+.gct-content-tag-style__tag .big_radius {
+  border-radius: 10px;
+  background-color: var(--ant-primary-color);
+}
+.gct-content-tag-style__tag .linear_big_radius {
+  border: 1px solid var(--ant-primary-color);
+  border-radius: 10px;
+}
+.gct-content-tag-style__tag .dashed_radius {
+  border: 1px dashed var(--ant-primary-color);
+  border-radius: 5px;
+}
+.gct-content-tag-style__tag .status {
+  border-radius: 4px;
+  border-top-left-radius: 15px;
+  background-color: var(--ant-primary-color);
+}
+
+.gct-content-tag-style__content {
+  margin-top: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.gct-content-tag-style__select {
+  height: 26px;
+  flex-grow: 1;
+}
+
+.gct-content-tag-style__color {
+  flex-shrink: 0;
+  width: 26px;
+  height: 26px;
+}
+
+.gct-content-tag-style__color-picker {
+  width: 26px;
+  height: 26px;
+  border: 1px solid var(--gct-color-border);
+  border-radius: 4px;
+  padding: 2px;
+}
+.gct-content-tag-style__color-picker .box,
+.gct-content-tag-style__color-picker .color-picker-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+}

package/es/editor/content-tag-style/content-tag-style.d.ts

@@ -0,0 +1,112 @@
+import { IEditorBasic } from '@gct-paas/core';
+import { DesignEditorType } from '../../constant';
+export interface IFieldInfoEditor extends IEditorBasic {
+    readonly type: DesignEditorType.CONTENT_TAG_STYLE;
+}
+export declare const ContentTagStyle: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    context: {
+        type: import('vue').PropType<IContext>;
+        default: () => {};
+    };
+    value: {
+        type: import('vue').PropType<IObject>;
+    };
+    model: {
+        type: import('vue').PropType<IEditorBasic>;
+        required: boolean;
+    };
+    c: {
+        type: import('vue').PropType<import('@gct-paas/core').IFormItemController>;
+        required: boolean;
+    };
+    itemModel: {
+        type: import('vue').PropType<import('@gct-paas/core').IFormEditItem>;
+    };
+    data: {
+        type: ObjectConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    keepalive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: import('vue').PropType<"small" | "medium" | "large">;
+    };
+    count: {
+        type: NumberConstructor;
+        default: number;
+    };
+    isEmptyText: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    context: {
+        type: import('vue').PropType<IContext>;
+        default: () => {};
+    };
+    value: {
+        type: import('vue').PropType<IObject>;
+    };
+    model: {
+        type: import('vue').PropType<IEditorBasic>;
+        required: boolean;
+    };
+    c: {
+        type: import('vue').PropType<import('@gct-paas/core').IFormItemController>;
+        required: boolean;
+    };
+    itemModel: {
+        type: import('vue').PropType<import('@gct-paas/core').IFormEditItem>;
+    };
+    data: {
+        type: ObjectConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    keepalive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: import('vue').PropType<"small" | "medium" | "large">;
+    };
+    count: {
+        type: NumberConstructor;
+        default: number;
+    };
+    isEmptyText: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    count: number;
+    readonly: boolean;
+    disabled: boolean;
+    context: IContext;
+    visible: boolean;
+    keepalive: boolean;
+    isEmptyText: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/editor/content-tag-style/content-tag-style.mjs

@@ -0,0 +1,103 @@
+import { defineComponent, computed, createVNode, resolveComponent, isVNode } from 'vue';
+import { useNamespace, useGctFormValue, TagTypeEnum, t, gctFormItemEditorProps } from '@gct-paas/core';
+import './content-tag-style.css';/* empty css                        */
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+const ContentTagStyle = /* @__PURE__ */ defineComponent({
+  name: 'ContentTagStyle',
+  props: gctFormItemEditorProps(),
+  setup() {
+    const ns = useNamespace('content-tag-style');
+    const keys = Object.keys(TagTypeEnum);
+    const val = useGctFormValue();
+    const check = computed({
+      get() {
+        return val.value?.check;
+      },
+      set(value) {
+        val.value = {
+          ...(val.value || {}),
+          check: value
+        };
+      }
+    });
+    const mode = computed({
+      get() {
+        return val.value?.mode || TagTypeEnum.RADIUS;
+      },
+      set(value) {
+        val.value = {
+          ...(val.value || {}),
+          mode: value
+        };
+      }
+    });
+    const color = computed({
+      get() {
+        return val.value?.color;
+      },
+      set(value) {
+        val.value = {
+          ...(val.value || {}),
+          color: value
+        };
+      }
+    });
+    return () => {
+      let _slot, _slot2;
+      return createVNode("div", {
+        "class": ns.b()
+      }, [createVNode("div", {
+        "class": ns.e('title')
+      }, [createVNode("span", {
+        "class": ns.e('label')
+      }, [t('sys.cardDesign.cfg_form.label_style')]), createVNode("span", {
+        "class": ns.e('check')
+      }, [createVNode(resolveComponent("a-checkbox"), {
+        "checked": check.value,
+        "onUpdate:checked": $event => check.value = $event,
+        "size": "small"
+      }, _isSlot(_slot = t('sys.cardDesign.cfg_form.cfg_content_tag_style')) ? _slot : {
+        default: () => [_slot]
+      })])]), check.value ? createVNode("div", {
+        "class": ns.e('content')
+      }, [createVNode("span", {
+        "class": ns.e('select')
+      }, [createVNode(resolveComponent("a-select"), {
+        "value": mode.value,
+        "onUpdate:value": $event => mode.value = $event,
+        "size": "small",
+        "placeholder": t('sys.chooseText')
+      }, _isSlot(_slot2 = keys.map(key => {
+        const val = TagTypeEnum[key];
+        const label = t(`sys.pageDesigner.${val}`);
+        return createVNode(resolveComponent("a-select-option"), {
+          "class": ns.e('option'),
+          "key": val,
+          "value": val,
+          "label": label
+        }, {
+          default: () => [createVNode("div", {
+            "class": ns.e('tag')
+          }, [createVNode("span", {
+            "class": [ns.e('tag-icon'), val]
+          }, null), createVNode("span", null, [label])])]
+        });
+      })) ? _slot2 : {
+        default: () => [_slot2]
+      })]), createVNode("span", {
+        "class": ns.e('color')
+      }, [createVNode(resolveComponent("color-editor"), {
+        "value": color.value,
+        "onUpdate:value": $event => color.value = $event,
+        "show-alpha": true,
+        "size": "small",
+        "class": ns.e('color-picker')
+      }, null)])]) : null]);
+    };
+  }
+});
+
+export { ContentTagStyle };

package/es/editor/content-tag-style/index.d.ts

@@ -0,0 +1,8 @@
+import { IEditorProvider } from '@gct-paas/core';
+export declare class Provider implements IEditorProvider {
+    component: string;
+}
+declare const _default: {
+    install(app: import('vue').App): void;
+};
+export default _default;

package/es/editor/content-tag-style/index.mjs

@@ -0,0 +1,15 @@
+import { widthEditorInstall } from '@gct-paas/core';
+import { ContentTagStyle as ContentTagStyle$1 } from './content-tag-style.mjs';
+import { DesignEditorType } from '../../constant/design-editor-type.mjs';
+import '../../constant/page-designer.mjs';
+
+class Provider {
+  component = "ContentTagStyle";
+}
+const ContentTagStyle = widthEditorInstall(
+  DesignEditorType.CONTENT_TAG_STYLE,
+  () => new Provider(),
+  ContentTagStyle$1
+);
+
+export { Provider, ContentTagStyle as default };