@gct-paas/design 0.1.4-dev.6 → 0.1.4-dev.8

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

@@ -0,0 +1,143 @@
+import { defineComponent, createVNode, resolveComponent, computed, isVNode, nextTick } from 'vue';
+import '../../hooks/design-view/useDesigner.mjs';
+import '../../hooks/design-view/useGlobal.mjs';
+import '../../hooks/design-view/usePage.mjs';
+import '../../hooks/design-view/usePageOccupy.mjs';
+import '../../hooks/design-view/usePropEditor.mjs';
+import '../../hooks/design-view/useScope.mjs';
+import '../../hooks/design-view/useSelectedWidget.mjs';
+import '@gct-paas/schema';
+import '../../hooks/design-view/useToolkit.mjs';
+import '../../hooks/design-view/useWidget.mjs';
+import '../../hooks/develop/useCacheHistory.mjs';
+import { t, useNamespace, useForm } from '@gct-paas/core';
+import { useDesignViewController } from '../../hooks/use-design-view-controller/use-design-view-controller.mjs';
+import 'qx-util';
+import 'lodash-es';
+import '../../constant/page-designer.mjs';
+import { NodeRegister } from '../../register/node/node.register.mjs';
+import { ChildListItemEditor } from './components/child-list-item-editor.mjs';
+import './child-list-editor.css';/* empty css                        */
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+const ChildListEditor = /* @__PURE__ */ defineComponent({
+  name: 'ChildListEditor',
+  components: {
+    ChildListItemEditor
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace('child-list-editor');
+    const form = useForm();
+    const designView = useDesignViewController();
+    const p = NodeRegister.get(props.model.childDesignType, designView.store.prefix);
+    const items = computed(() => {
+      if (designView.store.selected) {
+        const list = designView.store.getChildren(designView.store.selected.id);
+        return list;
+      }
+      return [];
+    });
+    const create = async () => {
+      if (p && designView.store.selected) {
+        const data = await p.create();
+        data.data.name = `${data.data.name}${items.value.length + 1}`;
+        designView.store.setNode(designView.store.selected.id, data);
+      }
+    };
+    const onAdd = e => {
+      e.stopPropagation();
+      create();
+    };
+    const defaultSelectC = form.item[props.model.defaultSelectChildKey || 'defaultKey'];
+    const init = () => {
+      if (items.value && items.value.length === 0) {
+        nextTick(() => {
+          if (defaultSelectC && items.value.length > 0) {
+            defaultSelectC.value = items.value[0]?.id;
+          }
+        });
+      }
+    };
+    const checkVal = computed(() => {
+      if (defaultSelectC) {
+        return defaultSelectC.value;
+      }
+      return '';
+    });
+    const onCheckChange = id => {
+      defaultSelectC.value = id;
+    };
+    const onDelete = id => {
+      designView.store.deleteNode(id);
+    };
+    const moveCard = (dragIndex, dropIndex) => {
+      const item = items.value[dragIndex];
+      designView.store.setNode(props.data.id, item, dropIndex);
+    };
+    init();
+    return {
+      ns,
+      designView,
+      p,
+      items,
+      checkVal,
+      moveCard,
+      onAdd,
+      onCheckChange,
+      onDelete
+    };
+  },
+  render() {
+    let _slot;
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("div", {
+      "class": this.ns.e('header')
+    }, [createVNode("div", {
+      "class": this.ns.e('title')
+    }, [this.model.title]), createVNode("div", {
+      "class": this.ns.e('add')
+    }, [this.model.add !== false ? createVNode(resolveComponent("a-button"), {
+      "type": "link",
+      "size": "small",
+      "onClick": this.onAdd
+    }, _isSlot(_slot = t('sys.add')) ? _slot : {
+      default: () => [_slot]
+    }) : null])]), createVNode("div", {
+      "class": this.ns.e('content')
+    }, [this.items.map((item, i) => {
+      return createVNode(resolveComponent("child-list-item-editor"), {
+        "count": this.items.length,
+        "index": i,
+        "node": item,
+        "value": item.data[this.model.childEditFieldKey || 'name'],
+        "onUpdate:value": $event => item.data[this.model.childEditFieldKey || 'name'] = $event,
+        "fieldKey": this.model.childEditFieldKey,
+        "showLabel": this.model.showLabel,
+        "drag": this.model.sort,
+        "check": this.model.select,
+        "delete": this.model.delete,
+        "editorType": this.model.editorType,
+        "editorProps": this.model.editorProps,
+        "checked": this.checkVal === item.id,
+        "onCheck": () => this.onCheckChange(item.id),
+        "onDelete": () => this.onDelete(item.id),
+        "moveCard": this.moveCard
+      }, null);
+    })])]);
+  }
+});
+
+export { ChildListEditor };

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

@@ -0,0 +1,13 @@
+import { IEditorProvider } from '@gct-paas/core';
+/**
+ * 子项编辑器
+ *
+ * @author zhanghanrui
+ * @date 2024-07-29 14:07:02
+ * @export
+ * @class ChildListEditorProvider
+ * @implements {IEditorProvider}
+ */
+export declare class ChildListEditorProvider implements IEditorProvider {
+    component: string;
+}

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

@@ -0,0 +1,5 @@
+class ChildListEditorProvider {
+  component = "child-list-editor";
+}
+
+export { ChildListEditorProvider };

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

@@ -0,0 +1,112 @@
+@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-child-list-item-editor {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 4px;
+  border-radius: 4px;
+  background-color: #F0F0F0;
+  margin-bottom: 4px;
+}
+.gct-child-list-item-editor__drag {
+  cursor: pointer;
+  flex-shrink: 0;
+  padding: 0 4px;
+}
+
+.gct-child-list-item-editor__check {
+  flex-shrink: 0;
+  margin-top: -3px;
+}
+
+.gct-child-list-item-editor__label {
+  flex-shrink: 0;
+  padding: 0 10px 0 0;
+}
+
+.gct-child-list-item-editor__editor {
+  flex-grow: 1;
+  text-align: left;
+}
+
+.gct-child-list-item-editor__delete {
+  cursor: pointer;
+  flex-shrink: 0;
+  padding: 0 6px;
+}
+
+.gct-child-list-item-editor-indicator {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 2px;
+  background-color: #E0E3EA;
+  z-index: 1;
+}
+.gct-child-list-item-editor-indicator.is-before {
+  top: 0;
+  bottom: unset;
+}

package/es/editor/child-list-editor/components/child-list-item-editor.d.ts

@@ -0,0 +1,133 @@
+import { PropType } from 'vue';
+import { IDesignNode } from '../../../interface';
+export declare const ChildListItemEditor: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    count: {
+        type: NumberConstructor;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    node: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+    fieldKey: {
+        type: StringConstructor;
+        required: true;
+    };
+    value: {
+        type: StringConstructor;
+        required: true;
+    };
+    showLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    checked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    drag: {
+        type: BooleanConstructor;
+    };
+    check: {
+        type: BooleanConstructor;
+    };
+    delete: {
+        type: BooleanConstructor;
+    };
+    editorType: {
+        type: StringConstructor;
+    };
+    editorProps: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    moveCard: {
+        type: FunctionConstructor;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    radio: import('vue').WritableComputedRef<boolean, boolean>;
+    elRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    dragRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    dropCollect: import('vue').Ref<{
+        handlerId: string | symbol | null;
+        isShallowOver: boolean;
+    }, {
+        handlerId: string | symbol | null;
+        isShallowOver: boolean;
+    }>;
+    collect: import('vue').Ref<{
+        isDragging: boolean;
+    }, {
+        isDragging: boolean;
+    }>;
+    isBeforeHover: import('vue').Ref<boolean, boolean>;
+    onDelete: () => void;
+    renderEditor: () => import("vue/jsx-runtime").JSX.Element;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("delete" | "update:value" | "check" | "update:title")[], "delete" | "update:value" | "check" | "update:title", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    count: {
+        type: NumberConstructor;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+    node: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+    fieldKey: {
+        type: StringConstructor;
+        required: true;
+    };
+    value: {
+        type: StringConstructor;
+        required: true;
+    };
+    showLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    checked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    drag: {
+        type: BooleanConstructor;
+    };
+    check: {
+        type: BooleanConstructor;
+    };
+    delete: {
+        type: BooleanConstructor;
+    };
+    editorType: {
+        type: StringConstructor;
+    };
+    editorProps: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    moveCard: {
+        type: FunctionConstructor;
+        required: true;
+    };
+}>> & Readonly<{
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+    onDelete?: ((...args: any[]) => any) | undefined;
+    onCheck?: ((...args: any[]) => any) | undefined;
+    "onUpdate:title"?: ((...args: any[]) => any) | undefined;
+}>, {
+    delete: boolean;
+    drag: boolean;
+    check: boolean;
+    showLabel: boolean;
+    checked: boolean;
+    editorProps: Record<string, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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 };