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

package/es/editor/custom-exp-menu-editor/components/custom-exp-menu-item.css

@@ -0,0 +1,156 @@
+@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-custom-exp-menu-item {
+  height: 32px;
+  background-color: #F2F4F7;
+  color: #242424;
+  font-size: 16px;
+  border-radius: 4px;
+  margin-bottom: 8px;
+  padding: 0 4px;
+  display: flex;
+  align-items: center;
+}
+.gct-custom-exp-menu-item__drag {
+  flex-shrink: 0;
+  cursor: pointer;
+  margin-right: 5px;
+}
+
+.gct-custom-exp-menu-item__icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-right: 5px;
+}
+.gct-custom-exp-menu-item__icon :first-child {
+  margin-top: -1px;
+}
+.gct-custom-exp-menu-item__icon .iconfont {
+  font-size: 14px;
+}
+
+.gct-custom-exp-menu-item__label {
+  flex-grow: 1;
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+}
+
+.gct-custom-exp-menu-item__actions {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.gct-custom-exp-menu-item__action-item {
+  cursor: pointer;
+}
+.gct-custom-exp-menu-item__action-item--delete {
+  display: none;
+}
+
+.gct-custom-exp-menu-item__action-item--edit {
+  display: none;
+}
+
+.gct-custom-exp-menu-item__action-item--home {
+  display: none;
+}
+.gct-custom-exp-menu-item__action-item--home.is-active {
+  display: block;
+}
+
+.gct-custom-exp-menu-item__action-item:hover {
+  color: var(--ant-primary-color);
+}
+.gct-custom-exp-menu-item__action-item:hover--delete {
+  display: block;
+}
+
+.gct-custom-exp-menu-item__action-item:hover--edit {
+  display: block;
+}
+
+.gct-custom-exp-menu-item__action-item.is-active {
+  opacity: 0.4;
+}
+.gct-custom-exp-menu-item__action-item.is-active:hover {
+  color: #242424;
+}
+
+.gct-custom-exp-menu-item:hover .gct-custom-exp-menu-item__action-item--delete {
+  display: block;
+}
+
+.gct-custom-exp-menu-item:hover .gct-custom-exp-menu-item__action-item--edit {
+  display: block;
+}
+
+.gct-custom-exp-menu-item:hover .gct-custom-exp-menu-item__action-item--home {
+  display: block;
+}

package/es/editor/custom-exp-menu-editor/components/custom-exp-menu-item.d.ts

@@ -0,0 +1,29 @@
+import { PropType } from 'vue';
+import { IMobileHomeMenuItem } from '@gct-paas/core';
+export declare const CustomExpMenuItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    isHidden: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    data: {
+        type: PropType<IMobileHomeMenuItem>;
+        required: true;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("edit" | "hidden" | "show" | "home" | "remove")[], "edit" | "hidden" | "show" | "home" | "remove", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    isHidden: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    data: {
+        type: PropType<IMobileHomeMenuItem>;
+        required: true;
+    };
+}>> & Readonly<{
+    onEdit?: ((...args: any[]) => any) | undefined;
+    onHidden?: ((...args: any[]) => any) | undefined;
+    onShow?: ((...args: any[]) => any) | undefined;
+    onHome?: ((...args: any[]) => any) | undefined;
+    onRemove?: ((...args: any[]) => any) | undefined;
+}>, {
+    isHidden: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/editor/custom-exp-menu-editor/components/custom-exp-menu-item.mjs

@@ -0,0 +1,134 @@
+import { defineComponent, createVNode, resolveComponent, withDirectives, vShow } from 'vue';
+import { useNamespace, t } from '@gct-paas/core';
+import './custom-exp-menu-item.css';/* empty css                           */
+import { toRefs } from '@vueuse/core';
+
+const CustomExpMenuItem = /* @__PURE__ */ defineComponent({
+  name: 'CustomExpMenuItem',
+  props: {
+    // 是否允许控制隐藏和显示
+    isHidden: {
+      type: Boolean,
+      default: true
+    },
+    data: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['home', 'remove', 'edit', 'hidden', 'show'],
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace('custom-exp-menu-item');
+    const {
+      data
+    } = toRefs(props);
+    const onDelete = e => {
+      e.stopPropagation();
+      emit('remove', data.value);
+    };
+    const onHome = e => {
+      e.stopPropagation();
+      if (data.value.isHome !== true) {
+        emit('home', data.value);
+      }
+    };
+    const onEdit = e => {
+      e.stopPropagation();
+      emit('edit', data.value);
+    };
+    const onHidden = e => {
+      e.stopPropagation();
+      if (data.value.isHidden !== true) {
+        emit('hidden', data.value);
+      } else {
+        emit('show', data.value);
+      }
+    };
+    return () => {
+      let icon = null;
+      if (data.value.icon) {
+        icon = data.value.icon.icon.startsWith('iconfont:') ? createVNode("i", {
+          "class": `iconfont ${data.value.icon.icon.replace('iconfont:', '')}`
+        }, null) : createVNode(resolveComponent("icon-next"), {
+          "value": data.value.icon.icon,
+          "color": data.value.icon.color,
+          "size": 16
+        }, null);
+      }
+      return createVNode("div", {
+        "class": ns.b()
+      }, [createVNode("div", {
+        "class": ns.e('drag'),
+        "title": t('sys.developer.designView.dragSort')
+      }, [createVNode("i", {
+        "class": "iconfont icon-drag"
+      }, null)]), createVNode("div", {
+        "class": ns.e('icon')
+      }, [icon]), createVNode("div", {
+        "class": ns.e('label')
+      }, [data.value.label]), createVNode("div", {
+        "class": ns.e('actions')
+      }, [data.value.isSystem ? null : createVNode("div", {
+        "class": [ns.e('action-item'), ns.em('action-item', 'delete')]
+      }, [createVNode(resolveComponent("a-tooltip"), {
+        "placement": "top"
+      }, {
+        default: () => createVNode(resolveComponent("a-popconfirm"), {
+          "title": t('sys.confirmExecution'),
+          "ok-text": t('sys.okText'),
+          "cancel-text": t('sys.cancelText'),
+          "onConfirm": onDelete
+        }, {
+          default: () => [createVNode("i", {
+            "class": "iconfont icon-shanchu"
+          }, null)]
+        }),
+        title: () => {
+          return createVNode("span", null, [t('sys.delete')]);
+        }
+      })]), createVNode("div", {
+        "class": [ns.e('action-item'), ns.em('action-item', 'edit')],
+        "title": t('sys.edit'),
+        "onClick": onEdit
+      }, [createVNode(resolveComponent("a-tooltip"), {
+        "placement": "top"
+      }, {
+        default: () => createVNode("i", {
+          "class": "iconfont icon-bianji"
+        }, null),
+        title: () => {
+          return createVNode("span", null, [t('sys.edit')]);
+        }
+      })]), createVNode("div", {
+        "class": [ns.e('action-item'), ns.em('action-item', 'home'), ns.is('active', data.value.isHome)],
+        "onClick": onHome
+      }, [createVNode(resolveComponent("a-tooltip"), {
+        "placement": "topRight",
+        "arrowPointAtCenter": true
+      }, {
+        default: () => createVNode("i", {
+          "class": "iconfont icon-zidingyi-zhuanqu"
+        }, null),
+        title: () => {
+          return createVNode("span", null, [data.value.isHome ? t('sys.developer.designView.info') : t('sys.developer.designView.info2')]);
+        }
+      })]), withDirectives(createVNode("div", {
+        "class": [ns.e('action-item'), ns.em('action-item', 'hidden')],
+        "onClick": onHidden
+      }, [createVNode(resolveComponent("a-tooltip"), {
+        "placement": "top"
+      }, {
+        default: () => createVNode("i", {
+          "class": `iconfont ${data.value.isHidden ? 'icon-baomi' : 'icon-chakan1'}`
+        }, null),
+        title: () => {
+          return createVNode("span", null, [data.value.isHidden ? t('sys.developer.designView.show') : t('sys.developer.designView.hidden')]);
+        }
+      })]), [[vShow, props.isHidden]])])]);
+    };
+  }
+});
+
+export { CustomExpMenuItem };

package/es/editor/custom-exp-menu-editor/custom-exp-menu-editor.css

@@ -0,0 +1,76 @@
+@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-custom-exp-menu-editor__button {
+  width: 100%;
+}
+.gct-custom-exp-menu-editor__button .ant-btn {
+  width: 100%;
+}
+
+.gct-custom-exp-menu-editor__info {
+  padding: 8px 0;
+  font-size: 12px;
+  color: #C3C3C3;
+}

package/es/editor/custom-exp-menu-editor/custom-exp-menu-editor.d.ts

@@ -0,0 +1,38 @@
+import { PropType } from 'vue';
+import { IFormItem, IMobileHomeMenuItem } from '@gct-paas/core';
+import { ICustomExpMenuModel } from './i-custom-exp-menu-model';
+export declare const CustomExpMenuEditor: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    itemModel: {
+        type: PropType<IFormItem>;
+        required: true;
+    };
+    model: {
+        type: PropType<ICustomExpMenuModel>;
+        required: true;
+    };
+    value: {
+        type: PropType<IMobileHomeMenuItem[]>;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    activeCount: import('vue').ComputedRef<number>;
+    val: import('vue').WritableComputedRef<IMobileHomeMenuItem[], IMobileHomeMenuItem[]>;
+    onAdd: (e: MouseEvent) => Promise<void>;
+    onRemove: (data: IMobileHomeMenuItem) => void;
+    onEdit: (_data: IMobileHomeMenuItem) => Promise<void>;
+    onHome: (data: IMobileHomeMenuItem) => void;
+    onHidden: (data: IMobileHomeMenuItem) => void;
+    onShow: (data: IMobileHomeMenuItem) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    itemModel: {
+        type: PropType<IFormItem>;
+        required: true;
+    };
+    model: {
+        type: PropType<ICustomExpMenuModel>;
+        required: true;
+    };
+    value: {
+        type: PropType<IMobileHomeMenuItem[]>;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/editor/custom-exp-menu-editor/custom-exp-menu-editor.mjs

@@ -0,0 +1,163 @@
+import { defineComponent, createVNode, resolveComponent, computed, isVNode } from 'vue';
+import { t, useNamespace, useGctFormValue } from '@gct-paas/core';
+import { CustomExpMenuItem } from './components/custom-exp-menu-item.mjs';
+import './custom-exp-menu-editor.css';/* empty css                             */
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+const CustomExpMenuEditor = /* @__PURE__ */ defineComponent({
+  name: 'CustomExpMenuEditor',
+  props: {
+    itemModel: {
+      type: Object,
+      required: true
+    },
+    model: {
+      type: Object,
+      required: true
+    },
+    value: {
+      type: Array
+    }
+  },
+  setup(_props) {
+    const ns = useNamespace('custom-exp-menu-editor');
+    const val = useGctFormValue();
+
+    // const { activeMax = 5 } = props.model;
+
+    const activeCount = computed(() => {
+      return val.value.filter(item => item.isHidden !== true).length;
+    });
+    const onAdd = async e => {
+      e.stopPropagation();
+      // const data = {
+      //   id: uuid(),
+      //   label: '',
+      //   menuMode: 'system',
+      //   presetType: 'message',
+      //   icon: {
+      //     icon: 'icon-park:all-application',
+      //     color: 'var(--van-text-color)',
+      //   },
+      //   selectIcon: {
+      //     icon: 'icon-park:all-application',
+      //     color: 'var(--ant-primary-color)',
+      //   },
+      //   isSystem: false,
+      //   isHidden: activeCount.value >= activeMax ? true : false,
+      //   isHome: false,
+      // } as IMobileHomeMenuItem;
+      // TODO: 模态待补充完善
+      // const res = await gct.openUtil.modal<IModalData>(
+      //   ExpMenuModal,
+      //   {
+      //     data,
+      //   },
+      //   {
+      //     title: t('sys.developer.designView.newMenu'),
+      //     width: '640px',
+      //     height: '640px',
+      //   },
+      // );
+      // if (res && res.ok && res.data) {
+      //   val.value.push(Object.assign(data, res.data[0] as IMobileHomeMenuItem));
+      //   // eslint-disable-next-line no-self-assign
+      //   val.value = val.value;
+      // }
+    };
+    const onRemove = data => {
+      val.value = val.value.filter(item => {
+        return item.id !== data.id;
+      });
+    };
+    const onEdit = async _data => {
+      // TODO: 模态待补充完善
+      // const i = val.value.findIndex(item => item.id === data.id);
+      // const _data = cloneDeep(val.value[i]);
+      // const res = await gct.openUtil.modal<IModalData>(
+      //   ExpMenuModal,
+      //   {
+      //     data,
+      //   },
+      //   {
+      //     title: t('sys.developer.designView.editMenu'),
+      //     width: '640px',
+      //     height: '640px',
+      //   },
+      // );
+      // if (res && res.ok && res.data) {
+      //   val.value.splice(
+      //     i,
+      //     1,
+      //     Object.assign(_data!, res.data[0] as IMobileHomeMenuItem),
+      //   );
+      //   // eslint-disable-next-line no-self-assign
+      //   val.value = val.value;
+      // }
+    };
+    const onHome = data => {
+      val.value.forEach(item => {
+        item.isHome = item === data;
+      });
+      // eslint-disable-next-line no-self-assign
+      val.value = val.value;
+    };
+    const onHidden = data => {
+      data.isHidden = true;
+      // eslint-disable-next-line no-self-assign
+      val.value = val.value;
+    };
+    const onShow = data => {
+      data.isHidden = false;
+      // eslint-disable-next-line no-self-assign
+      val.value = val.value;
+    };
+    return {
+      ns,
+      activeCount,
+      val,
+      onAdd,
+      onRemove,
+      onEdit,
+      onHome,
+      onHidden,
+      onShow
+    };
+  },
+  render() {
+    let _slot;
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("div", {
+      "class": this.ns.e('button')
+    }, [createVNode(resolveComponent("a-button"), {
+      "onClick": this.onAdd
+    }, _isSlot(_slot = t('sys.developer.designView.addMenu')) ? _slot : {
+      default: () => [_slot]
+    })]), createVNode("div", {
+      "class": this.ns.e('info')
+    }, [t('sys.developer.designView.suggest')]), createVNode("div", {
+      "class": this.ns.e('menus')
+    }, [createVNode(resolveComponent("vue3-dnd-draggable"), {
+      "items": this.val
+    }, {
+      draggableItem: ({
+        item
+      }) => {
+        return createVNode(CustomExpMenuItem, {
+          "isHidden": !(item.isHidden === false && this.activeCount === 1),
+          "data": item,
+          "onRemove": this.onRemove,
+          "onEdit": this.onEdit,
+          "onHome": this.onHome,
+          "onHidden": this.onHidden,
+          "onShow": this.onShow
+        }, null);
+      }
+    })])]);
+  }
+});
+
+export { CustomExpMenuEditor };

package/es/editor/custom-exp-menu-editor/custom-exp-menu-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/custom-exp-menu-editor/custom-exp-menu-editor.provider.mjs

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

package/es/editor/custom-exp-menu-editor/i-custom-exp-menu-model.d.ts

@@ -0,0 +1,23 @@
+import { IEditorBasic } from '@gct-paas/core';
+import { DesignEditorType } from '../../constant';
+/**
+ * 自定义导航菜单配置输入参数
+ *
+ * @author zhanghanrui
+ * @date 2024-08-24 14:08:24
+ * @export
+ * @interface ICustomExpMenuModel
+ * @extends {IEditorBasic}
+ */
+export interface ICustomExpMenuModel extends IEditorBasic {
+    readonly type: DesignEditorType.CUSTOM_EXP_MENU;
+    /**
+     * 最大激活数量，默认最大激活5个
+     *
+     * @default 5
+     * @author zhanghanrui
+     * @date 2024-08-24 14:08:09
+     * @type {number}
+     */
+    activeMax?: number;
+}

package/es/editor/custom-exp-menu-editor/index.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    install(app: import('vue').App): void;
+};
+export default _default;
+export type { ICustomExpMenuModel } from './i-custom-exp-menu-model';

package/es/editor/custom-exp-menu-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 { CustomExpMenuEditor as CustomExpMenuEditor$1 } from './custom-exp-menu-editor.mjs';
+import { ChildListEditorProvider } from './custom-exp-menu-editor.provider.mjs';
+
+const CustomExpMenuEditor = widthEditorInstall(
+  DesignEditorType.CUSTOM_EXP_MENU,
+  () => new ChildListEditorProvider(),
+  CustomExpMenuEditor$1
+);
+
+export { CustomExpMenuEditor as default };