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

package/es/components/modal-name-editor/modal-name-editor.mjs

@@ -0,0 +1,174 @@
+import { defineComponent, createVNode, resolveComponent, ref, computed, watch, nextTick } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import { onClickOutside } from '@vueuse/core';
+import './modal-name-editor.css';/* empty css                        */
+
+// TODO: Change 的变更需要抛出给上层组件，上层使用的地方进行相应的修改，不是里边干
+// import { useReportDataSetDesignStore } from '../report-data-set-design/store';
+// import { useReportViewController } from '../report-design/hooks';
+
+const ModalNameEditor = /* @__PURE__ */ defineComponent({
+  name: 'ModalNameEditor',
+  props: {
+    value: {
+      type: String,
+      default: '未命名'
+    },
+    defaultName: {
+      type: String,
+      default: '未命名名称'
+    },
+    // save: {
+    //   type: Function as PropType<(name: string) => Promise<void>>,
+    //   required: true,
+    // },
+    max: {
+      type: Number,
+      default: 100
+    }
+  },
+  emits: ['update:value', 'change'],
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace('modal-name-editor');
+    // const store = useReportDataSetDesignStore();
+    // 是否正在编辑
+    const isEdit = ref(false);
+    // 开始编辑时，记录旧值
+    // const oldVal = ref<string>('');\
+    // 报表设计界面总控制器
+    // const c = useReportViewController();
+    // 输入框实例
+    const nameInputRef = ref();
+    // 输入框的值
+    const name = ref(props.value);
+    // 显示的名称（可能是 defaultName）
+    const displayName = computed(() => {
+      return name.value || props.defaultName;
+    });
+    const isError = computed(() => {
+      if (displayName.value.length > props.max) {
+        return true;
+      }
+      return false;
+    });
+    // 输入值发生变更时，重新赋值组件内编辑
+    watch(() => props.value, () => {
+      if (name.value !== props.value) {
+        name.value = props.value;
+      }
+    });
+    // 是否正在保存
+    const isSaving = ref(false);
+    // 用户是否已经开始修改（用于区分是否还应该显示默认名称）
+    const hasUserModified = ref(false);
+    // val
+    const val = computed({
+      get() {
+        // 如果正在编辑且用户已经修改过，则直接显示 name.value（即使为空）
+        if (isEdit.value && hasUserModified.value) {
+          return name.value;
+        }
+        return displayName.value;
+      },
+      set(val) {
+        hasUserModified.value = true; // 标记用户已经修改
+        const trimmedVal = val.trim();
+        if (name.value !== trimmedVal) {
+          name.value = trimmedVal;
+          emit('update:value', trimmedVal);
+        }
+      }
+    });
+    // 开启编辑
+    const onEditName = () => {
+      // oldVal.value = val.value;
+      isEdit.value = true;
+      hasUserModified.value = false; // 重置修改标记
+      nextTick(() => {
+        nameInputRef.value.focus();
+        nameInputRef.value.select();
+      });
+    };
+    // 保存编辑
+    const onSaveName = async () => {
+      // 只有当名称不为空且不是使用默认名称时才保存
+      if (name.value && name.value.trim()) {
+        isSaving.value = true;
+        try {
+          // await props.save(name.value);
+          emit('update:value', name.value);
+        } finally {
+          isSaving.value = false;
+        }
+      }
+      isEdit.value = false;
+      hasUserModified.value = false; // 重置修改标记
+    };
+    // 触发保存
+    const onBlurOrEnter = () => {
+      if (isEdit.value) {
+        if (isError.value === true) {
+          nextTick(() => {
+            nameInputRef.value.focus();
+            nameInputRef.value.select();
+          });
+          return;
+        }
+        onSaveName();
+        isEdit.value = false;
+      }
+    };
+    // 点击外面时，关闭编辑
+    onClickOutside(nameInputRef, async () => {
+      onBlurOrEnter();
+    });
+    const onChange = () => {
+      // c.state.modified = true;
+      // store.isChanged = true;
+      emit('change');
+    };
+    return {
+      ns,
+      isEdit,
+      isError,
+      isSaving,
+      val,
+      nameInputRef,
+      onEditName,
+      onBlurOrEnter,
+      onChange
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("div", {
+      "class": [this.ns.e('name'), this.ns.is('hidden', this.isEdit)],
+      "title": this.val,
+      "onDblclick": this.onEditName
+    }, [this.val]), createVNode("div", {
+      "class": [this.ns.e('input'), this.ns.is('hidden', !this.isEdit)]
+    }, [this.isSaving ? createVNode(resolveComponent("loading-outlined"), null, null) : null, createVNode(resolveComponent("a-input"), {
+      "value": this.val,
+      "onUpdate:value": $event => this.val = $event,
+      "ref": "nameInputRef",
+      "size": "small",
+      "bordered": false,
+      "onBlur": this.onBlurOrEnter,
+      "onPressEnter": this.onBlurOrEnter,
+      "disabled": this.isSaving,
+      "onChange": this.onChange
+    }, null), createVNode("div", {
+      "class": [this.ns.e('error-info'), this.ns.is('hidden', !this.isError)]
+    }, [`最大${this.max}字`])]), createVNode("div", {
+      "class": [this.ns.e('edit'), this.ns.is('hidden', this.isEdit)],
+      "onClick": this.onEditName
+    }, [createVNode("i", {
+      "class": "iconfont icon-bianji"
+    }, null)])]);
+  }
+});
+
+export { ModalNameEditor };

package/es/components/panel/index.d.ts

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

package/es/components/panel/index.mjs

@@ -0,0 +1,9 @@
+import { PanelContent } from './panel-content/panel-content.mjs';
+
+const Panel = {
+  install(app) {
+    app.component(PanelContent.name, PanelContent);
+  }
+};
+
+export { Panel as default };

package/es/components/panel/panel-content/panel-content.css

@@ -0,0 +1,183 @@
+@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-panel-content {
+  height: 100%;
+  border-left: 1px solid #e0e3ea;
+  overflow: hidden auto;
+  background-color: #FFF;
+  --gct-form-item-label-color: #242424;
+}
+.gct-panel-content .gct-gct-form-item .ant-form-item-label {
+  --gct-form-item-label-align: left;
+}
+.gct-panel-content .gct-gct-form-item__left {
+  float: right;
+}
+.gct-panel-content .gct-gct-form-item__label, .gct-panel-content .ant-form-item-label, .gct-panel-content .ant-checkbox-group {
+  --gct-form-item-label-font-size: 12px;
+  --gct-form-item-checkbox-width: 5px;
+  --gct-form-item-checkbox-height: 7px;
+}
+.gct-panel-content__paths {
+  height: 42px;
+}
+
+.gct-panel-content__content {
+  height: calc(100% - 42px);
+}
+
+.gct-panel-content .gct-form-collapse {
+  border-left: none;
+  border-right: none;
+}
+.gct-panel-content .gct-form-collapse:first-child {
+  border-top: none;
+}
+.gct-panel-content .gct-form-collapse.ant-collapse > .ant-collapse-item {
+  border-bottom-width: 0;
+}
+.gct-panel-content .ant-input,
+.gct-panel-content .ant-select {
+  color: #666;
+}
+.gct-panel-content .ant-input-show-count-suffix {
+  color: #c3c3c3;
+}
+.gct-panel-content .ant-input-affix-wrapper-sm {
+  padding: 2px 7px;
+}
+.gct-panel-content .ant-input-number-sm input {
+  height: 26px;
+}
+.gct-panel-content .ant-select-single.ant-select-sm:not(.ant-select-customize-input) .ant-select-selector {
+  height: 28px;
+}
+.gct-panel-content .ant-select-multiple.ant-select-sm:not(.ant-select-customize-input) .ant-select-selector {
+  min-height: 28px;
+}
+.gct-panel-content .ant-select-single.ant-select-sm:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-item,
+.gct-panel-content .ant-select-single.ant-select-sm:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-placeholder,
+.gct-panel-content .ant-select-single.ant-select-sm:not(.ant-select-customize-input) .ant-select-selector::after {
+  line-height: 26px;
+}
+.gct-panel-content .ant-select-multiple.ant-select-sm .ant-select-selection-item {
+  height: 20px;
+  line-height: 17px;
+}
+.gct-panel-content .ant-select-selection-placeholder,
+.gct-panel-content .ant-input::placeholder {
+  color: #c3c3c3;
+}
+.gct-panel-content .ant-form .ant-form-item {
+  margin-bottom: 8px;
+}
+.gct-panel-content .in-row-no-bottom {
+  margin-bottom: 0 !important;
+}
+.gct-panel-content .ant-form-vertical .ant-form-item-label {
+  padding-bottom: 2px;
+}
+.gct-panel-content .ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow {
+  right: 12px;
+}
+.gct-panel-content .ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
+  padding: 0;
+}
+.gct-panel-content .ant-collapse,
+.gct-panel-content .ant-input,
+.gct-panel-content .ant-collapse-header,
+.gct-panel-content .ant-btn,
+.gct-panel-content .ant-select,
+.gct-panel-content .ant-form .ant-form-item,
+.gct-panel-content .ant-breadcrumb {
+  font-size: 12px;
+}
+.gct-panel-content span.ant-radio + * {
+  padding-right: 8px;
+  padding-left: 6px;
+}
+.gct-panel-content .ant-radio-inner {
+  width: 12px;
+  height: 12px;
+}
+.gct-panel-content .ant-input-number,
+.gct-panel-content .ant-input-number-group-addon {
+  font-size: 12px;
+}
+.gct-panel-content .style-pane .ant-form-item {
+  min-height: 28px;
+  margin-bottom: 8px;
+}
+.gct-panel-content .suffix-number-input .ant-input-number-group > .ant-input-number:first-child {
+  border-radius: 2px;
+}
+.gct-panel-content .suffix-number-input .ant-input-number-group-addon {
+  padding: 0 16px 0 8px;
+  border: 0;
+  background-color: transparent;
+}
+.gct-panel-content {
+  --gct-form-item-label-color: #242424;
+}

package/es/components/panel/panel-content/panel-content.d.ts

@@ -0,0 +1,19 @@
+import { PropType } from 'vue';
+import { IEditForm } from '@gct-paas/core';
+export declare const PanelContent: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    context: {
+        type: PropType<IContext>;
+        default: () => {};
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    c: import('../../..').IDesignViewController;
+    formModel: import('vue').ComputedRef<IEditForm | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    context: {
+        type: PropType<IContext>;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    context: IContext;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/panel/panel-content/panel-content.mjs

@@ -0,0 +1,73 @@
+import { defineComponent, createVNode, computed } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import { isFunction } from 'lodash-es';
+import { PanelPath } from '../panel-path/panel-path.mjs';
+import { PanelForm } from '../panel-form/panel-form.mjs';
+import '../../../hooks/design-view/design-state.mjs';
+import '@gct-paas/schema';
+import '../../../hooks/design-view/layout/useScope.mjs';
+import '../../../hooks/design-view/global/useGlobal.mjs';
+import '@vueuse/core';
+import '../../../hooks/develop/useCacheHistory.mjs';
+import 'ant-design-vue';
+import '../../../hooks/design-view/widget/useSelectedWidget.mjs';
+import '../../../hooks/design-view/widget/useWidget.mjs';
+import '../../../hooks/design-view/page/usePage.mjs';
+import '../../../hooks/design-view/page/usePageOccupy.mjs';
+import '../../../hooks/design-view/layout/useToolkit.mjs';
+import { useDesignViewController } from '../../../hooks/use-design-view-controller/use-design-view-controller.mjs';
+import '../../../hooks/use-model-field/use-model-field.mjs';
+import 'qx-util';
+import '../../../constant/page-designer.mjs';
+import { NodeRegister } from '../../../register/node/node.register.mjs';
+import './panel-content.css';/* empty css                    */
+
+const PanelContent = /* @__PURE__ */ defineComponent({
+  name: 'PanelContent',
+  props: {
+    context: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  setup(props) {
+    const ns = useNamespace('panel-content');
+    const c = useDesignViewController();
+    const formModel = computed(() => {
+      if (c.store.selected) {
+        const p = NodeRegister.get(c.store.selected.type, c.store.prefix);
+        if (p) {
+          if (isFunction(p.model)) {
+            // 如果提供者的model是函数，则调用函数获取模型
+            return p.model(props.context, c.store.selected);
+          }
+          return p.model;
+        }
+      }
+      return null;
+    });
+    return {
+      ns,
+      c,
+      formModel
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("div", {
+      "class": this.ns.e('paths')
+    }, [createVNode(PanelPath, null, null)]), createVNode("div", {
+      "class": this.ns.e('content')
+    }, [this.c.store.selected && this.formModel ? createVNode(PanelForm, {
+      "key": this.c.store.selected.id,
+      "model": this.formModel,
+      "node": this.c.store.selected,
+      "context": this.context
+    }, null) : null])]);
+  }
+});
+
+export { PanelContent };

package/es/components/panel/panel-form/panel-form.css

@@ -0,0 +1,67 @@
+@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-design-panel-form {
+  height: 100%;
+}

package/es/components/panel/panel-form/panel-form.d.ts

@@ -0,0 +1,62 @@
+import { PropType } from 'vue';
+import { IEditForm } from '@gct-paas/core';
+import { IDesignNode, IDesignNodeData } from '../../../interface';
+export declare const PanelForm: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    model: {
+        type: PropType<IEditForm>;
+        required: true;
+    };
+    node: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+    context: {
+        type: PropType<IContext>;
+        default: () => {};
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    data: import('vue').Ref<{
+        id: string;
+        order?: number | undefined;
+        label: string;
+        type: string;
+        updateDate: number;
+        data: {
+            [x: string]: any;
+            [x: symbol]: any;
+            name?: string | undefined;
+        };
+        parentId?: string | undefined;
+        clone: () => IDesignNode;
+    }, IDesignNode<IDesignNodeData> | {
+        id: string;
+        order?: number | undefined;
+        label: string;
+        type: string;
+        updateDate: number;
+        data: {
+            [x: string]: any;
+            [x: symbol]: any;
+            name?: string | undefined;
+        };
+        parentId?: string | undefined;
+        clone: () => IDesignNode;
+    }>;
+    formData: import('vue').WritableComputedRef<IDesignNodeData, IDesignNodeData>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    model: {
+        type: PropType<IEditForm>;
+        required: true;
+    };
+    node: {
+        type: PropType<IDesignNode>;
+        required: true;
+    };
+    context: {
+        type: PropType<IContext>;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    context: IContext;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/panel/panel-form/panel-form.mjs

@@ -0,0 +1,76 @@
+import { defineComponent, createVNode, resolveComponent, ref, computed } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import '../../../hooks/design-view/design-state.mjs';
+import '@gct-paas/schema';
+import 'lodash-es';
+import '../../../hooks/design-view/layout/useScope.mjs';
+import '../../../hooks/design-view/global/useGlobal.mjs';
+import '@vueuse/core';
+import '../../../hooks/develop/useCacheHistory.mjs';
+import 'ant-design-vue';
+import '../../../hooks/design-view/widget/useSelectedWidget.mjs';
+import '../../../hooks/design-view/widget/useWidget.mjs';
+import '../../../hooks/design-view/page/usePage.mjs';
+import '../../../hooks/design-view/page/usePageOccupy.mjs';
+import '../../../hooks/design-view/layout/useToolkit.mjs';
+import { useDesignViewController } from '../../../hooks/use-design-view-controller/use-design-view-controller.mjs';
+import '../../../hooks/use-model-field/use-model-field.mjs';
+import 'qx-util';
+import './panel-form.css';/* empty css                 */
+
+const PanelForm = /* @__PURE__ */ defineComponent({
+  name: 'PanelForm',
+  props: {
+    model: {
+      type: Object,
+      required: true
+    },
+    node: {
+      type: Object,
+      required: true
+    },
+    context: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  setup(props) {
+    const ns = useNamespace('design-panel-form');
+    const c = useDesignViewController();
+    const data = ref(props.node);
+    const formData = computed({
+      get() {
+        return data.value.data;
+      },
+      set(val) {
+        Object.assign(data.value.data, val);
+        console.debug('[ 保存的val ] >', data.value.data);
+        c.store.updateNode(data.value);
+      }
+    });
+    return {
+      ns,
+      data,
+      formData
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode(resolveComponent("gct-edit-form"), {
+      "class": "h-full",
+      "embed": true,
+      "model": this.model,
+      "data": this.formData,
+      "onUpdate:data": $event => this.formData = $event,
+      "context": {
+        ...this.context,
+        id: undefined
+      }
+    }, null)]);
+  }
+});
+
+export { PanelForm };