@gct-paas/schema 0.1.4-dev.10

package/es/schema/modal/modal.mjs

@@ -0,0 +1,182 @@
+import { BuiltinType, Platform, PropGroup, StyleGroup, buildShortUUID } from '@gct-paas/core';
+import { widget as widget$1 } from './modal-body.mjs';
+import { widget as widget$2 } from './modal-footer.mjs';
+
+const widget = {
+  id: "",
+  /**默认是WEB 添加的时候会根据当前环境改变 */
+  platform: Platform.WEB,
+  /**系统用的name */
+  name: "sys.pageDesigner.modal",
+  alias: "",
+  /**用户新建编辑的name */
+  modalName: "",
+  type: BuiltinType.MODAL,
+  js: "",
+  css: "",
+  children: [widget$1, widget$2],
+  props: {
+    modalTitle: "弹窗",
+    unitType: "px",
+    modalWidth: 800,
+    isSubTableModal: false,
+    bindSubTableId: "",
+    createModalTitle: "新建弹窗",
+    editModalTitle: "编辑弹窗",
+    hasFooter: true,
+    openMode: "modal",
+    /**just mobile */
+    mUnitType: "%",
+    mModalWidth: 80
+  },
+  style: {
+    paddingAll: "16",
+    paddingTop: "16",
+    paddingRight: "16",
+    paddingBottom: "16",
+    paddingLeft: "16"
+  },
+  events: {},
+  i18n: {},
+  runJs: "",
+  los: {},
+  icon: "icon-motaikuang1",
+  isField: false
+};
+const propEditorList = [
+  {
+    component: "text-editor",
+    name: "modalTitle",
+    label: "sys.pageDesigner.modalTitleName",
+    group: PropGroup.BASIC,
+    _config: {
+      showCount: true,
+      maxlength: 32
+    },
+    hidden: (widget2) => {
+      return widget2.props.isSubTableModal;
+    }
+  },
+  {
+    component: "input-unit-editor",
+    name: { unitType: "unitType", modalWidth: "modalWidth" },
+    label: "sys.pageDesigner.modalWidthProp",
+    group: PropGroup.MODAL,
+    hidden: (widget2) => {
+      return widget2.platform === Platform.MOBILE;
+    }
+  },
+  {
+    component: "input-unit-editor",
+    name: { unitType: "mUnitType", modalWidth: "mModalWidth" },
+    label: "sys.pageDesigner.modalHeightProp",
+    group: PropGroup.MODAL,
+    hidden: (widget2) => {
+      return widget2.platform !== Platform.MOBILE;
+    },
+    _config: {
+      filterUnitType: "px"
+    }
+  },
+  {
+    component: "text-editor",
+    name: "createModalTitle",
+    label: "sys.pageDesigner.createModalTitle",
+    group: PropGroup.MODALTITLECONFIG,
+    _config: {
+      i18n: true
+    },
+    hidden: (widget2) => {
+      return !widget2.props.isSubTableModal;
+    }
+  },
+  {
+    component: "text-editor",
+    name: "editModalTitle",
+    label: "sys.pageDesigner.editModalTitle",
+    group: PropGroup.MODALTITLECONFIG,
+    _config: {
+      i18n: true
+    },
+    hidden: (widget2) => {
+      return !widget2.props.isSubTableModal;
+    }
+  },
+  {
+    component: "select-editor",
+    name: "openMode",
+    label: "sys.appDesigner.openMode",
+    group: PropGroup.MODAL,
+    hidden: (widget2) => {
+      return widget2.platform !== Platform.WEB;
+    },
+    _config: {
+      options: () => {
+        return [
+          {
+            label: "打开弹窗页面",
+            value: "modal"
+          },
+          {
+            label: "右侧划入页面",
+            value: "drawer"
+          }
+        ];
+      }
+    },
+    changeCallback: (widget2, value) => {
+      if (value === "drawer") {
+        widget2.props.unitType = "%";
+        widget2.props.modalWidth = 80;
+      } else {
+        widget2.props.unitType = "px";
+        widget2.props.modalWidth = 800;
+      }
+    }
+  },
+  {
+    component: "switch-editor",
+    name: "hasFooter",
+    label: "sys.pageDesigner.operateButton",
+    group: PropGroup.BUTTON,
+    hidden: (widget2) => {
+      return widget2.props.isSubTableModal;
+    }
+  }
+];
+const styleEditorList = [
+  {
+    component: "color-editor",
+    name: "backgroundColor",
+    label: "sys.pageDesigner.backgroundColor",
+    group: StyleGroup.BACKGROUND
+  },
+  {
+    component: "margin-editor",
+    group: StyleGroup.MARGIN,
+    _config: {
+      hiddenMarginOrPadding: "margin"
+    }
+  }
+];
+const eventList = [
+  {
+    name: "onMounted",
+    title: "sys.pageDesigner.onMounted",
+    params: []
+  }
+];
+const runCallback = () => {
+};
+const beforeCreate = (widget2) => {
+  widget2.children[0].id = buildShortUUID(widget2.children[0].type);
+  widget2.children[1].id = buildShortUUID(widget2.children[1].type);
+};
+const designerConfig = {
+  basicProps: {
+    key_label: "弹窗",
+    alias_hidden: true
+  }
+};
+
+export { beforeCreate, designerConfig, eventList, propEditorList, runCallback, styleEditorList, widget };

package/es/types/index.d.ts

@@ -0,0 +1 @@
+import '@gct-paas/core/types';

package/es/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './schema';
+export * from './schema-style';
+export * from './widget-info/widget-info';

package/es/utils/schema/index.d.ts

@@ -0,0 +1,45 @@
+import { LowCodeWidget } from '../../interface';
+/**
+ * 获取组件所属位置
+ *
+ * @export
+ * @param {LowCodeWidget.BasicSchema} widget
+ * @param {string} fieldType
+ * @param {string} componentType
+ * @return {*}
+ */
+export declare function getCompPos(widget: LowCodeWidget.BasicSchema, fieldType: string, componentType: string): boolean;
+/**
+ * 是否是表单字段类型
+ *
+ * @export
+ * @param {LowCodeWidget.BasicSchema} widget
+ * @return {boolean}
+ */
+export declare function isFormFieldType(widget: LowCodeWidget.BasicSchema): boolean;
+/**
+ * 初始化国际化处理
+ *
+ * @export
+ * @param {LowCodeWidget.BasicSchema['props']} props
+ */
+export declare function transformI18n(props: LowCodeWidget.BasicSchema['props']): void;
+/**
+ * 克隆组件schema
+ *
+ * @export
+ * @param {LowCodeWidget.BasicSchema} widgetSchema
+ * @return {*}  {LowCodeWidget.BasicSchema}
+ */
+export declare function cloneWidget(widgetSchema: LowCodeWidget.BasicSchema): LowCodeWidget.BasicSchema;
+/**
+ * 递归获取所有非字段组件
+ *
+ * @param {LowCodeWidget.BasicSchema} item
+ * @param {string[]} [types=[]]
+ * @returns {*}  {string[]}
+ */
+export declare function deepFindNotField(item: IObject[]): {
+    [x: string]: any;
+    [x: symbol]: any;
+}[];

package/es/utils/schema/index.mjs

@@ -0,0 +1,49 @@
+import { buildShortUUID, t, MaterialEnum } from '@gct-paas/core';
+import { cloneDeep, has } from 'lodash-es';
+import { getWidgetInfo } from '../widget-info/widget-info.mjs';
+
+function getCompPos(widget, fieldType, componentType) {
+  return widget.type === componentType && has(widget, "preLocation") && new RegExp(`^${fieldType}_`).test(widget.preLocation);
+}
+function isFormFieldType(widget) {
+  return [
+    MaterialEnum.MaterialFormField,
+    MaterialEnum.MaterialSubTableModalField,
+    MaterialEnum.DescriptionsFormField
+  ].includes(widget.materialType);
+}
+function transformI18n(props) {
+  const reg = /^\$\{(\S+)\}$/;
+  for (const key in props) {
+    const value = props[key];
+    if (reg.test(value)) {
+      props[key] = t(value.match(reg)?.[1]);
+    }
+  }
+}
+function cloneWidget(widgetSchema) {
+  const instance = cloneDeep(widgetSchema);
+  instance.id = buildShortUUID(instance.type);
+  instance.alias = t(instance.name);
+  if (instance.formItem) {
+    instance.props.label = t(instance.name);
+  }
+  const widgetInfo = getWidgetInfo(instance.platform);
+  if (widgetInfo) {
+    widgetInfo.beforeCreate?.[instance.type]?.(instance);
+  }
+  transformI18n(instance.props);
+  return instance;
+}
+function deepFindNotField(item) {
+  return item.map((node) => ({ ...node })).filter((node) => {
+    if (node.props?.model) {
+      return predicate(node);
+    }
+    node.children = node.children && deepFindNotField(node.children);
+    return predicate(node);
+  });
+}
+const predicate = (node) => !node.formItem;
+
+export { cloneWidget, deepFindNotField, getCompPos, isFormFieldType, transformI18n };

package/es/utils/schema-style/index.d.ts

@@ -0,0 +1,108 @@
+/**
+ * 样式计算工具类
+ * 提供样式单位转换、属性映射、样式属性处理等公共方法
+ */
+/**
+ * 将像素值转换为对应单位
+ * 在移动环境下转换为 vw，其他环境保持 px
+ *
+ * @param pxValue - 像素值
+ * @returns 转换后的单位值字符串
+ */
+export declare function pxToVw(pxValue: number): string;
+/**
+ * 添加 px 单位到样式值
+ *
+ * @param value - 样式值
+ * @returns 带 px 单位和 !important 的样式字符串
+ */
+export declare function addPxUnit(value?: string): string;
+/**
+ * 添加 !important 标志到样式值（不添加单位）
+ *
+ * @param value - 样式值
+ * @returns 带 !important 的样式字符串
+ */
+export declare function addImportant(value?: string): string;
+/**
+ * 格式化边框样式对象
+ *
+ * @param border - 边框配置对象，包含 borderWidth、borderStyle、borderColor
+ * @returns 格式化后的边框样式字符串
+ */
+export declare function formatBorder(border?: IObject): string;
+/**
+ * 字体样式处理配置
+ */
+interface IFontConfig {
+    fontAttrs: string[];
+    mapAttrs: Record<string, {
+        attr: string;
+        callback?: (value: any) => any;
+    }>;
+}
+/**
+ * 从字体配置对象中提取并转换字体样式
+ *
+ * @param font - 字体配置对象
+ * @param config - 字体样式处理配置（可选，使用默认配置）
+ * @returns 转换后的样式对象
+ */
+export declare function extractFontStyle(font: IObject, config?: IFontConfig): IObject;
+/**
+ * 将样式属性对象转换为 CSS 样式字符串格式
+ *
+ * @param styleProps - 样式属性对象
+ * @returns 转换后的样式对象（含单位和 !important）
+ */
+export declare function propsToStyle(styleProps?: IObject): IObject;
+/**
+ * 将单个样式属性值转换为带单位的 CSS 字符串
+ *
+ * @param prop - 属性名
+ * @param value - 属性值
+ * @returns 转换后的样式值字符串
+ */
+export declare function makeStyleProp(prop: string, value: string): string;
+/**
+ * 对齐方式到 Flex 对齐值的映射
+ */
+export declare const ALIGN_TO_FLEX_MAP: Record<string, string>;
+/**
+ * 将对齐属性值转换为 Flex 对齐值
+ *
+ * @param align - 对齐方式（left、center、right、justify）
+ * @returns 对应的 Flex 对齐值
+ */
+export declare function transAlign2flex(align: string): string;
+/**
+ * 生成位置和尺寸样式对象
+ *
+ * @param style - 样式配置对象
+ * @returns 位置和尺寸样式对象
+ */
+export declare function generatePositionStyles(style: IObject): IObject;
+/**
+ * 生成背景和间距样式对象
+ *
+ * @param style - 样式配置对象
+ * @returns 背景和间距样式对象
+ */
+export declare function generateSpacingStyles(style: IObject): IObject;
+/**
+ * 生成边框样式对象
+ *
+ * @param style - 样式配置对象
+ * @returns 边框样式对象
+ */
+export declare function generateBorderStyles(style: IObject): IObject;
+/**
+ * 生成完整的包装样式对象
+ * 合并位置、间距、边框等所有样式
+ *
+ * @param style - 样式配置对象
+ * @param ignoringStyle - 需要忽略的样式属性数组
+ * @returns 合并后的完整样式对象
+ */
+export declare function generateWrapperStyle(style: IObject, ignoringStyle?: string[]): IObject;
+export {};

package/es/utils/schema-style/index.mjs

@@ -0,0 +1,155 @@
+import { isEmpty, pick, isNil } from 'lodash-es';
+
+function pxToVw(pxValue) {
+  return pxValue + "px";
+}
+function addPxUnit(value) {
+  return isEmpty(value) ? "" : `${value}px !important`;
+}
+function addImportant(value) {
+  return isEmpty(value) ? "" : `${value} !important`;
+}
+function formatBorder(border) {
+  if (!border || isEmpty(border.borderWidth)) return "";
+  return `${border.borderWidth}px ${border.borderStyle || "solid"} ${border.borderColor || "transparent"} !important`;
+}
+const DEFAULT_FONT_CONFIG = {
+  fontAttrs: [
+    "fontWeight",
+    "fontSize",
+    "color",
+    "textDecorationLine",
+    "textAlign"
+  ],
+  mapAttrs: {
+    bold: {
+      attr: "fontWeight",
+      callback: (value) => {
+        return value ? 700 : 400;
+      }
+    },
+    italic: {
+      attr: "fontStyle",
+      callback: (value) => {
+        return value ? "italic" : "normal";
+      }
+    },
+    textDecoration: {
+      attr: "textDecorationLine"
+    },
+    fontSize: {
+      attr: "fontSize",
+      callback: (value) => {
+        return value ? pxToVw(value) : "";
+      }
+    },
+    align: {
+      attr: "textAlign"
+    }
+  }
+};
+function extractFontStyle(font, config = DEFAULT_FONT_CONFIG) {
+  if (!font) return {};
+  const result = {};
+  Object.assign(result, pick(font, config.fontAttrs));
+  if (typeof config.mapAttrs === "object") {
+    Object.keys(config.mapAttrs).forEach((k) => {
+      const { attr, callback } = config.mapAttrs[k];
+      result[attr] = typeof callback === "function" ? callback(font[k]) : font[k];
+    });
+  }
+  return result;
+}
+function propsToStyle(styleProps = {}) {
+  const wStyle = {};
+  for (const prop in styleProps) {
+    wStyle[prop] = makeStyleProp(prop, styleProps[prop]);
+  }
+  return wStyle;
+}
+const NOT_NEED_PX_STYLE = [
+  "opacity",
+  "zIndex",
+  "fontWeight",
+  "lineHeight",
+  "letterSpacing",
+  "wordSpacing",
+  "textAlign",
+  "textDecoration",
+  "textTransform",
+  "fontStyle",
+  "textDecorationLine"
+];
+function makeStyleProp(prop, value) {
+  if (isNil(value) || isEmpty(value)) {
+    return "";
+  }
+  if (NOT_NEED_PX_STYLE.includes(prop)) {
+    return value + " !important";
+  }
+  return value + "px !important";
+}
+const ALIGN_TO_FLEX_MAP = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end",
+  justify: "space-between"
+};
+function transAlign2flex(align) {
+  return ALIGN_TO_FLEX_MAP[align] || align;
+}
+function generatePositionStyles(style) {
+  return {
+    position: addImportant(style.position),
+    top: addPxUnit(style.top),
+    left: addPxUnit(style.left),
+    right: addPxUnit(style.right),
+    bottom: addPxUnit(style.bottom),
+    width: addPxUnit(style.width),
+    height: addPxUnit(style.height)
+  };
+}
+function generateSpacingStyles(style) {
+  return {
+    backgroundColor: addImportant(style.backgroundColor),
+    marginTop: addPxUnit(style.marginTop),
+    marginRight: addPxUnit(style.marginRight),
+    marginBottom: addPxUnit(style.marginBottom),
+    marginLeft: addPxUnit(style.marginLeft),
+    paddingTop: addPxUnit(style.paddingTop),
+    paddingRight: addPxUnit(style.paddingRight),
+    paddingBottom: addPxUnit(style.paddingBottom),
+    paddingLeft: addPxUnit(style.paddingLeft)
+  };
+}
+function generateBorderStyles(style) {
+  return {
+    borderLeft: formatBorder(style.borderLeft),
+    borderRight: formatBorder(style.borderRight),
+    borderBottom: formatBorder(style.borderBottom),
+    borderTop: formatBorder(style.borderTop),
+    borderTopRightRadius: addPxUnit(style.borderTopRightRadius),
+    borderTopLeftRadius: addPxUnit(style.borderTopLeftRadius),
+    borderBottomRightRadius: addPxUnit(style.borderBottomRightRadius),
+    borderBottomLeftRadius: addPxUnit(style.borderBottomLeftRadius)
+  };
+}
+function generateWrapperStyle(style, ignoringStyle = []) {
+  const styleData = {
+    ...generatePositionStyles(style),
+    ...generateSpacingStyles(style),
+    ...generateBorderStyles(style)
+  };
+  ignoringStyle.forEach((key) => {
+    delete styleData[key];
+  });
+  Object.keys(styleData).forEach((key) => {
+    const val = styleData[key];
+    if (isNil(val) || isEmpty(val)) {
+      delete styleData[key];
+    }
+  });
+  return styleData;
+}
+
+export { ALIGN_TO_FLEX_MAP, addImportant, addPxUnit, extractFontStyle, formatBorder, generateBorderStyles, generatePositionStyles, generateSpacingStyles, generateWrapperStyle, makeStyleProp, propsToStyle, pxToVw, transAlign2flex };

package/es/utils/widget-info/widget-info.d.ts

@@ -0,0 +1,104 @@
+import { ExportWidgetBeforeCreate, ExportWidgetBlackList, ExportWidgetCallback, ExportWidgetDesignerConfig, ExportWidgetEvents, ExportWidgetHooks, ExportWidgetPropEditors, ExportWidgetSchema, ExportWidgetStyleEditors, ExportWidgetWhiteList, IWidgetInfo, IWidgetInfoItem } from '../../interface';
+import { Platform } from '@gct-paas/core';
+/**
+ * 设计界面所有组件配置信息
+ *
+ * @export
+ * @class WidgetInfo
+ * @implements {IWidgetInfo}
+ */
+declare class WidgetInfo implements IWidgetInfo {
+    events: ExportWidgetEvents;
+    propEditors: ExportWidgetPropEditors;
+    schema: ExportWidgetSchema;
+    callback: ExportWidgetCallback;
+    beforeCreate: ExportWidgetBeforeCreate;
+    styleEditors: ExportWidgetStyleEditors;
+    designerConfig: ExportWidgetDesignerConfig;
+    hooks: ExportWidgetHooks;
+    whiteList: ExportWidgetWhiteList;
+    blackList: ExportWidgetBlackList;
+}
+/**
+ * 网页端组件配置信息
+ */
+export declare const webWidgetInfo: WidgetInfo;
+/**
+ * 移动端组件配置信息
+ */
+export declare const mobileWidgetInfo: WidgetInfo;
+/**
+ * 平板端组件配置信息
+ */
+export declare const padWidgetInfo: WidgetInfo;
+/**
+ * 获取指定平台的组件配置信息
+ *
+ * @export
+ * @param {Platform} [platform] 平台类型
+ * @return {*}  {IWidgetInfo} 组件配置信息
+ */
+export declare function getWidgetInfo(platform?: Platform): IWidgetInfo;
+/**
+ * 注册单一组件信息
+ *
+ * @export
+ * @param {IWidgetInfo} widgetInfo
+ * @param {string} type
+ * @param {IObject} module
+ */
+export declare function registerWidgetItem(widgetInfo: IWidgetInfo, type: string, module: IObject): void;
+/**
+ * 注册网页端单一组件信息
+ *
+ * @export
+ * @param {IObject} module
+ * @param {string} type
+ */
+export declare function registerWebWidgetItem(module: IObject, type: string): void;
+/**
+ * 注册移动端单一组件信息
+ *
+ * @export
+ * @param {IObject} module
+ * @param {string} type
+ */
+export declare function registerMobileWidgetItem(module: IObject, type: string): void;
+/**
+ * 注册平板端单一组件信息
+ *
+ * @export
+ * @param {IObject} module
+ * @param {string} type
+ */
+export declare function registerPadWidgetItem(module: IObject, type: string): void;
+/**
+ * 注册单一组件信息（插件方式）
+ *
+ * @export
+ * @param {IWidgetInfo} widgetInfo
+ * @param {IWidgetInfoItem} designer
+ */
+export declare function registerPluginWidgetItem(widgetInfo: IWidgetInfo, designer: IWidgetInfoItem): void;
+/**
+ * 注册网页端插件组件配置
+ *
+ * @export
+ * @param {IWidgetInfoItem} designer
+ */
+export declare function registerWebPluginWidgetItem(designer: IWidgetInfoItem): void;
+/**
+ * 注册移动端插件组件配置
+ *
+ * @export
+ * @param {IWidgetInfoItem} designer
+ */
+export declare function registerMobilePluginWidgetItem(designer: IWidgetInfoItem): void;
+/**
+ * 注册平板端插件组件配置
+ *
+ * @export
+ * @param {IWidgetInfoItem} designer
+ */
+export declare function registerPadPluginWidgetItem(designer: IWidgetInfoItem): void;
+export {};