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

package/es/hooks/design-view/useDesigner.mjs

@@ -0,0 +1,109 @@
+import { Platform, FormComponents } from '@gct-paas/core';
+import { inject } from 'vue';
+import { isNewDesigner, methodMap, pageJson, platform } from './design-state.mjs';
+import { useDesignModal } from './designer/useDesignModal.mjs';
+import { useDesignPreview } from './designer/useDesignPreview.mjs';
+import { useDesignCache } from './designer/useDesignCache.mjs';
+import { useDesignSave } from './designer/useDesignSave.mjs';
+import { useDesignHistory } from './designer/useDesignHistory.mjs';
+import { useWidgetQuery } from './widget/useWidgetQuery.mjs';
+import { useWidgetRegistry } from './widget/useWidgetRegistry.mjs';
+import { useSelectedWidget } from './widget/useSelectedWidget.mjs';
+
+function useDesigner() {
+  const modal = useDesignModal();
+  const previewHook = useDesignPreview();
+  const cache = useDesignCache();
+  const saveHook = useDesignSave();
+  const history = useDesignHistory();
+  const widgetQuery = useWidgetQuery();
+  const registry = useWidgetRegistry();
+  function setPageJson(json) {
+    pageJson.pageConfig.hasFooter = platform.value === Platform.MOBILE || platform.value === Platform.PAD;
+    Object.assign(pageJson, json);
+    if (json.newDesigner !== true) {
+      pageJson.newDesigner = false;
+    }
+    cache.emitCache();
+  }
+  function checkWidgetMove() {
+    return true;
+  }
+  function handleAddDrag(newIndex, childrenList, scope, formID = "") {
+    const { setSelectedWidget, setFocusFormContainer } = useSelectedWidget();
+    const widget = childrenList[newIndex];
+    if (!widget) return;
+    const isInitGridComp = widget.type === FormComponents.Grid && !widget.children?.length;
+    if (isInitGridComp) return;
+    setSelectedWidget(childrenList[newIndex], scope);
+    setFocusFormContainer(childrenList[newIndex]?.preLocation || formID);
+    cache.emitCache();
+  }
+  return {
+    pageJson,
+    methodMap,
+    isNewDesigner,
+    // 拖拽相关
+    checkWidgetMove,
+    handleAddDrag,
+    // 协调
+    setPageJson,
+    // 保存与校验 (useDesignSave)
+    save: saveHook.save,
+    savePageJsonSnapshot: saveHook.savePageJsonSnapshot,
+    // 缓存撤销/重做 (useDesignCache)
+    emitCache: cache.emitCache,
+    undoOrRestore: cache.undoOrRestore,
+    // 预览 (useDesignPreview)
+    preview: previewHook.preview,
+    previewSandbox: previewHook.previewSandbox,
+    sandboxList: previewHook.sandboxList,
+    getDataList: previewHook.getDataList,
+    historyPreview: previewHook.historyPreview,
+    // 历史版本 (useDesignHistory)
+    pageDesignHistoryList: history.pageDesignHistoryList,
+    loadPageDesignHistoryList: history.loadPageDesignHistoryList,
+    loadPageDesignHistoryInfo: history.loadPageDesignHistoryInfo,
+    recover: history.recover,
+    deleteHistory: history.deleteHistory,
+    loading: history.loading,
+    // 组件查询 (useWidgetQuery)
+    allWidget: widgetQuery.allWidget,
+    allFormWidget: widgetQuery.allFormWidget,
+    excludeSubTableFormWidget: widgetQuery.excludeSubTableFormWidget,
+    allSubTableWidget: widgetQuery.allSubTableWidget,
+    allListWidget: widgetQuery.allListWidget,
+    allTableWidget: widgetQuery.allTableWidget,
+    allDeptWidget: widgetQuery.allDeptWidget,
+    allRefSelectWidget: widgetQuery.allRefSelectWidget,
+    getWidgetByScope: widgetQuery.getWidgetByScope,
+    // 弹框 (useDesignModal)
+    modalInfo: modal.modalInfo,
+    modalDesignState: modal.modalDesignState,
+    modalDesignId: modal.modalDesignId,
+    modalBody: modal.modalBody,
+    modalFooter: modal.modalFooter,
+    modalBottomBtn: modal.modalBottomBtn,
+    isGlobalModal: modal.isGlobalModal,
+    subTableInfo: modal.subTableInfo,
+    setModalDesignState: modal.setModalDesignState,
+    setModalInfo: modal.setModalInfo,
+    setSubTableModalDesignState: modal.setSubTableModalDesignState,
+    subTableModalState: modal.subTableModalState,
+    subTableModalId: modal.subTableModalId,
+    // 组件注册表 (useWidgetRegistry)
+    getAsyncWidget: registry.getAsyncWidget,
+    getWidgetHooks: registry.getWidgetHooks,
+    widgetEntry: registry.widgetEntry,
+    pluginConfigs: registry.pluginConfigs,
+    getWhiteList: registry.getWhiteList,
+    getBlackList: registry.getBlackList,
+    setPluginConfigs: registry.setPluginConfigs
+  };
+}
+function useDesignerController() {
+  const c = inject("designer");
+  return c;
+}
+
+export { useDesigner, useDesignerController };

package/es/hooks/design-view/utils/color.util.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 颜色工具函数集合
+ * 提供颜色格式转换等工具方法
+ */
+/**
+ * 将 rgb/rgba 颜色字符串转换为 HEX 格式
+ *
+ * @param {string} color rgb 或 rgba 格式的颜色字符串
+ * @returns {string} HEX 格式颜色字符串
+ */
+export declare const shadeColor: (color: string) => string;
+/**
+ * 将 r, g, b, a 分量转换为 HEX 颜色字符串
+ *
+ * @param {string | number} r 红色分量 (0-255)
+ * @param {string | number} g 绿色分量 (0-255)
+ * @param {string | number} b 蓝色分量 (0-255)
+ * @param {string | number} a 透明度 (0-1)，默认为 1
+ * @returns {string} HEX 格式颜色字符串
+ */
+export declare function rgba2hex(r: string | number, g: string | number, b: string | number, a?: string | number): string;

package/es/hooks/design-view/utils/color.util.mjs

@@ -0,0 +1,36 @@
+const shadeColor = (color) => {
+  let r = 0, g = 0, b = 0, a = 1;
+  let colorStr = "";
+  if (color.indexOf("rgba(") > -1) {
+    colorStr = color.replace("rgba(", "").replace(")", "");
+    const parts = colorStr.split(",");
+    r = parts[0] || 0;
+    g = parts[1] || 0;
+    b = parts[2] || 0;
+    a = parts[3] || 1;
+  } else if (color.indexOf("rgb(") > -1) {
+    colorStr = color.replace("rgb(", "").replace(")", "");
+    const parts = colorStr.split(",");
+    r = parts[0] || 0;
+    g = parts[1] || 0;
+    b = parts[2] || 0;
+  }
+  return rgba2hex(r, g, b, a);
+};
+function rgba2hex(r, g, b, a = 1) {
+  const rNum = parseInt(String(r));
+  const r1 = rNum.toString(16).length !== 2 ? "0" + rNum.toString(16) : rNum.toString(16);
+  const gNum = parseInt(String(g));
+  const g1 = gNum.toString(16).length !== 2 ? "0" + gNum.toString(16) : gNum.toString(16);
+  const bNum = parseInt(String(b));
+  const b1 = bNum.toString(16).length !== 2 ? "0" + bNum.toString(16) : bNum.toString(16);
+  const aNum = parseFloat(String(a));
+  let a1 = "";
+  if (aNum !== 1) {
+    const temp = Math.floor(256 * aNum);
+    a1 = temp.toString(16).length !== 2 ? "0" + temp.toString(16) : temp.toString(16);
+  }
+  return `#${r1}${g1}${b1}${a1}`.toUpperCase();
+}
+
+export { rgba2hex, shadeColor };

package/es/hooks/design-view/utils/field-schema.util.d.ts

@@ -0,0 +1,55 @@
+import { FieldMetaDTO, ModelMetaDTO } from '@gct-paas/api/apaas';
+import { LowCodeWidget } from '@gct-paas/schema';
+/**
+ * 字段 Schema 工具类
+ * 提供模型元数据和字段元数据的获取与缓存能力
+ */
+export declare class FieldSchema {
+    /** 模型元数据缓存 */
+    static modelData: Map<string, ModelMetaDTO>;
+    /** 字段元数据缓存 */
+    static fieldData: Map<string, Record<string, FieldMetaDTO>>;
+    /** 请求 Promise 缓存，防止同一时刻重复请求 */
+    static responsePromise: Map<string, Promise<void>>;
+    /** 是否静默模式（不显示错误提示） */
+    static silent: boolean;
+    /**
+     * 获取模型字段映射
+     *
+     * @param {string} modelKey 模型 key
+     * @param {boolean} useCache 是否使用缓存
+     * @returns {Promise<void>}
+     */
+    static getMap(modelKey: string, useCache?: boolean): Promise<void>;
+    /**
+     * 获取模型下字段信息
+     *
+     * @param {string} modelKey 模型 key
+     * @param {string} field 字段 key
+     * @param {boolean} useCache 是否使用缓存
+     * @returns {Promise<FieldMetaDTO>} 字段信息
+     */
+    static getConfigByField(modelKey: string, field: string, useCache?: boolean): Promise<FieldMetaDTO>;
+    /**
+     * 获取模型信息
+     *
+     * @param {string} modelKey 模型 key
+     * @returns {Promise<ModelMetaDTO>} 模型信息
+     */
+    static getConfigByModel(modelKey: string): Promise<ModelMetaDTO>;
+    /**
+     * 清除缓存
+     *
+     * @param {boolean} useRequest 是否同时清除请求 Promise 缓存
+     */
+    static clearCacheMap(useRequest?: boolean): void;
+}
+/**
+ * 初始化字段组件运行时数据
+ * 字段运行时需要同步的数据
+ *
+ * @param {LowCodeWidget.BasicSchema} widget 组件配置
+ * @param {boolean} isVanField 是否为普通字段
+ * @returns {Promise<FieldMetaDTO>} 字段元数据
+ */
+export declare function initFieldWidgetRuntime(widget: LowCodeWidget.BasicSchema, isVanField?: boolean): Promise<FieldMetaDTO>;

package/es/hooks/design-view/utils/field-schema.util.mjs

@@ -0,0 +1,96 @@
+class FieldSchema {
+  /** 模型元数据缓存 */
+  static modelData = /* @__PURE__ */ new Map();
+  /** 字段元数据缓存 */
+  static fieldData = /* @__PURE__ */ new Map();
+  /** 请求 Promise 缓存，防止同一时刻重复请求 */
+  static responsePromise = /* @__PURE__ */ new Map();
+  /** 是否静默模式（不显示错误提示） */
+  static silent = false;
+  /**
+   * 获取模型字段映射
+   *
+   * @param {string} modelKey 模型 key
+   * @param {boolean} useCache 是否使用缓存
+   * @returns {Promise<void>}
+   */
+  static async getMap(modelKey, useCache = true) {
+    if (!modelKey) return Promise.reject();
+    if (!this.responsePromise.has(modelKey) || !useCache) {
+      const P = (async () => {
+        const data = await _api.apaas.modelMeta.getDetail(
+          { modelKey }
+          // { errorMessageMode: this.silent ? 'none' : undefined },
+        );
+        this.modelData.set(modelKey, data);
+        if (data?.fieldMetaList) {
+          const fieldMap = data.fieldMetaList.reduce(
+            (total, curr) => {
+              if (curr.key) {
+                total[curr.key] = curr;
+              }
+              return total;
+            },
+            {}
+          );
+          if (fieldMap) {
+            this.fieldData.set(modelKey, fieldMap);
+          }
+        }
+      })();
+      this.responsePromise.set(modelKey, P);
+    }
+    return this.responsePromise.get(modelKey);
+  }
+  /**
+   * 获取模型下字段信息
+   *
+   * @param {string} modelKey 模型 key
+   * @param {string} field 字段 key
+   * @param {boolean} useCache 是否使用缓存
+   * @returns {Promise<FieldMetaDTO>} 字段信息
+   */
+  static async getConfigByField(modelKey, field, useCache = true) {
+    await this.getMap(modelKey, useCache);
+    return this.fieldData.get(modelKey)[field];
+  }
+  /**
+   * 获取模型信息
+   *
+   * @param {string} modelKey 模型 key
+   * @returns {Promise<ModelMetaDTO>} 模型信息
+   */
+  static async getConfigByModel(modelKey) {
+    await this.getMap(modelKey);
+    return this.modelData.get(modelKey);
+  }
+  /**
+   * 清除缓存
+   *
+   * @param {boolean} useRequest 是否同时清除请求 Promise 缓存
+   */
+  static clearCacheMap(useRequest = false) {
+    if (useRequest) {
+      this.responsePromise.clear();
+    }
+    this.modelData.clear();
+    this.fieldData.clear();
+  }
+}
+async function initFieldWidgetRuntime(widget, isVanField = false) {
+  const { modelKey, field, isCustomField, fieldName, readonly, fieldType } = widget.props;
+  if (!widget.isField && !isVanField || field === "table_name_") return {};
+  const fieldInfo = isCustomField ? { name: fieldName } : modelKey && await FieldSchema.getConfigByField(modelKey, field);
+  if ((!fieldInfo || fieldInfo.type !== fieldType) && !isCustomField)
+    return Promise.reject("该字段可能已经被删除");
+  if (fieldInfo.required && !readonly) {
+    widget.props.required = true;
+  }
+  widget.props.fieldRequired = fieldInfo.required;
+  if (fieldInfo?.specificConfig?.digits !== void 0) {
+    widget.props.precision = fieldInfo?.specificConfig?.digits;
+  }
+  return fieldInfo;
+}
+
+export { FieldSchema, initFieldWidgetRuntime };

package/es/hooks/design-view/widget/useSelectedWidget.d.ts

@@ -0,0 +1,53 @@
+import { IVue3DndItemOptions } from '../../../interface';
+import { SCOPE } from '@gct-paas/core';
+import { IBasicStyle, LowCodeModal, LowCodeWidget } from '@gct-paas/schema';
+import { Ref } from 'vue';
+export declare function useSelectedWidget(): {
+    setSelectedModal: (modal: Partial<LowCodeModal.Modal>) => void;
+    resetSelectedModal: () => void;
+    setSelectedWidget: (widget: Partial<LowCodeWidget.BasicSchema>, scope?: SCOPE) => void;
+    resetSelectedWidget: (scope?: SCOPE) => void;
+    selectedAllPropEditors: import('vue').ComputedRef<any>;
+    selectedAllStyleEditors: import('vue').ComputedRef<any>;
+    selectedAllEvents: import('vue').ComputedRef<any>;
+    selectedEvents: import('vue').WritableComputedRef<import('@gct-paas/schema').IBasicEvents, import('@gct-paas/schema').IBasicEvents>;
+    selectedProps: import('vue').ComputedRef<import('@gct-paas/schema').ICommonProps & import('@gct-paas/schema').IDisplayProps>;
+    selectedStyle: import('vue').ComputedRef<Partial<IBasicStyle>>;
+    selectedWidget: Ref<Partial<import('@gct-paas/schema').IBasicSchema>, Partial<import('@gct-paas/schema').IBasicSchema>>;
+    selectedRef: import('vue').ComputedRef<import('@gct-paas/schema').IBasicSchema>;
+    selectModalRef: import('vue').ComputedRef<import('@gct-paas/schema').IBasicSchema>;
+    focusFormContainer: import('vue').ComputedRef<{
+        isFocus: boolean;
+        formModelKey?: undefined;
+        formId?: undefined;
+        nodeType?: undefined;
+        /**子表关联父模型 */
+        refParentModelkey?: undefined;
+    } | {
+        isFocus: boolean;
+        formModelKey: any;
+        formId: string | undefined;
+        nodeType: any;
+        /**子表关联父模型 */
+        refParentModelkey: any;
+    } | {
+        isFocus: boolean;
+        formModelKey: string;
+        formId: string;
+        nodeType: string;
+        /**子表关联父模型 */
+        refParentModelkey?: undefined;
+    }>;
+    selectedAllDesingerConfig: import('vue').ComputedRef<import('@gct-paas/schema').IDesignerConfig | undefined>;
+    setFocusFormContainer: (formId: string) => void;
+    focusFormRef: import('vue').ComputedRef<Partial<import('@gct-paas/schema').IBasicSchema>>;
+    hoverRef: import('vue').ComputedRef<Partial<import('@gct-paas/schema').IBasicSchema>>;
+    setHoverWidget: (widget?: Partial<LowCodeWidget.BasicSchema>) => void;
+    selectedParentRef: import('vue').ComputedRef<import('@gct-paas/schema').IBasicSchema | undefined>;
+    setSelectedParentWidgets: (widgets: LowCodeWidget.BasicSchema[]) => void;
+    selectedParentsRef: import('vue').ComputedRef<import('@gct-paas/schema').IBasicSchema[]>;
+    selectedParentChildrenRef: import('vue').ComputedRef<import('@gct-paas/schema').IBasicSchema[]>;
+    setSelectedParentChildrenRef: (widgets: LowCodeWidget.BasicSchema[]) => void;
+    selectedConfigRef: import('vue').ComputedRef<IVue3DndItemOptions<import('@gct-paas/schema').IBasicSchema>>;
+    setSelectedConfig: (config: IVue3DndItemOptions) => void;
+};

package/es/hooks/design-view/widget/useSelectedWidget.mjs

@@ -0,0 +1,219 @@
+import { TreeHelper, FIELD_TYPE, FormComponents, BuiltinType, PanelEnum } from '@gct-paas/core';
+import { getCompPos, commonStyle } from '@gct-paas/schema';
+import { isEmpty, has, get, isArray } from 'lodash-es';
+import { ref, computed } from 'vue';
+import { useScope } from '../layout/useScope.mjs';
+import { usePage } from '../page/usePage.mjs';
+import { subTableModalState, subTableModalId, widgetInfo } from '../design-state.mjs';
+import { useWidgetQuery } from './useWidgetQuery.mjs';
+
+const fieldFormEvents = {};
+const fieldFormEditors = {};
+const fieldFormStyles = {};
+const selectedConfig = ref({ mode: "move" });
+const selectedParentChildren = ref([]);
+const selectedParentWidgets = ref([]);
+const selectedWidget = ref({});
+const selectedModal = ref({});
+const focusFormWidget = ref({});
+const hoverWidget = ref({});
+function useSelectedWidget() {
+  const { setScope, getScope, scopeData } = useScope();
+  const { togglePanel } = usePage();
+  const { allWidget } = useWidgetQuery();
+  const selectedRef = computed(() => {
+    if (!isEmpty(selectedModal.value) && isEmpty(selectedWidget.value)) {
+      return selectedModal.value;
+    } else {
+      return selectedWidget.value;
+    }
+  });
+  const selectedParentRef = computed(() => {
+    if (!selectedRef.value.id) {
+      return void 0;
+    }
+    return selectedParentWidgets.value[selectedParentWidgets.value.length - 1];
+  });
+  const selectedParentsRef = computed(() => {
+    if (!selectedRef.value.id) {
+      return [];
+    }
+    return selectedParentWidgets.value;
+  });
+  const selectedParentChildrenRef = computed(() => {
+    if (!selectedRef.value.id) {
+      return [];
+    }
+    return selectedParentChildren.value;
+  });
+  const selectedConfigRef = computed(() => {
+    return selectedConfig.value;
+  });
+  function setSelectedConfig(config) {
+    selectedConfig.value = config;
+  }
+  const setSelectedParentChildrenRef = (widgets) => {
+    selectedParentChildren.value = widgets;
+  };
+  const selectModalRef = computed(() => {
+    if (subTableModalState.value) {
+      const modalInfo = TreeHelper.findNode(scopeData.value, (node) => {
+        return getCompPos(node, FIELD_TYPE.MASTERSLAVE, FormComponents.Form) && node.preLocation === subTableModalId.value;
+      });
+      if (!modalInfo) {
+        return selectedRef.value;
+      }
+      return modalInfo;
+    }
+    return selectedRef.value;
+  });
+  const focusFormRef = computed(() => {
+    if ([
+      FormComponents.Form,
+      FormComponents.RdoForm,
+      FormComponents.MedProRdoForm,
+      FormComponents.CardList,
+      BuiltinType.MODAL,
+      FormComponents.FormProcess
+    ].includes(selectedRef.value.type)) {
+      return selectedRef.value;
+    }
+    return focusFormWidget.value;
+  });
+  const hoverRef = computed(() => {
+    return hoverWidget.value;
+  });
+  function setHoverWidget(widget = {}) {
+    hoverWidget.value = widget;
+  }
+  function setSelectedParentWidgets(widgets) {
+    selectedParentWidgets.value = widgets;
+  }
+  const setSelectedModal = (modal) => {
+    selectedModal.value = modal;
+    selectedWidget.value = {};
+    togglePanel(PanelEnum.WIDGET);
+  };
+  const resetSelectedModal = () => {
+    selectedModal.value = {};
+  };
+  const setSelectedWidget = (widget, scope) => {
+    selectedWidget.value = widget;
+    selectedModal.value = {};
+    if (scope) {
+      setScope(scope);
+    }
+    togglePanel(PanelEnum.WIDGET);
+  };
+  const resetSelectedWidget = (scope) => {
+    selectedWidget.value = {};
+    selectedParentWidgets.value = [];
+    selectedConfig.value = { mode: "move" };
+    focusFormWidget.value = {};
+    selectedParentChildren.value = [];
+    setScope(scope ? scope : getScope());
+  };
+  const selectedStyle = computed(() => {
+    if (!selectedRef.value.style) {
+      selectedRef.value.style = {};
+    }
+    return selectedRef.value.style || commonStyle;
+  });
+  const selectedProps = computed(() => {
+    return selectedRef.value.props;
+  });
+  const selectedEvents = computed({
+    get() {
+      return selectedRef.value.events;
+    },
+    set(val) {
+      selectedRef.value.events = val;
+    }
+  });
+  const selectedAllEvents = computed(() => {
+    const { type } = selectedRef.value;
+    const widgetEvents = widgetInfo.value.events;
+    const eventConfig = widgetEvents[type] || fieldFormEvents[type] || [];
+    if (typeof eventConfig === "function") {
+      return eventConfig(selectedRef.value);
+    } else {
+      return eventConfig;
+    }
+  });
+  const selectedAllPropEditors = computed(() => {
+    const { type } = selectedRef.value;
+    const widgetPropsEditors = widgetInfo.value.propEditors;
+    let preCompInfo;
+    if (has(selectedRef.value, "preLocation")) {
+      const { scopeData: scopeData2 } = useScope();
+      preCompInfo = TreeHelper.findNode(scopeData2.value, (widget) => {
+        return widget.id === get(selectedRef.value, "preLocation");
+      });
+    }
+    return widgetPropsEditors[type] && isArray(widgetPropsEditors[type]) ? widgetPropsEditors[type] : fieldFormEditors[type]?.(selectedRef.value, preCompInfo);
+  });
+  const selectedAllStyleEditors = computed(() => {
+    const { type } = selectedRef.value;
+    return widgetInfo.value.styleEditors[type] || fieldFormStyles[type]?.(selectedRef.value);
+  });
+  const selectedAllDesingerConfig = computed(() => {
+    return widgetInfo.value.designerConfig[selectedRef.value.type];
+  });
+  const setFocusFormContainer = (formId) => {
+    focusFormWidget.value = formId && allWidget.value.find((e) => e.id === formId) || {};
+  };
+  const focusFormContainer = computed(() => {
+    if (subTableModalState.value && focusFormRef.value.type === BuiltinType.MODAL) {
+      return {
+        isFocus: true
+      };
+    }
+    if (focusFormRef.value && focusFormRef.value?.props?.model) {
+      return {
+        isFocus: true,
+        formModelKey: focusFormRef.value?.props?.model,
+        formId: focusFormRef.value?.id,
+        nodeType: focusFormRef.value.props?.nodeType,
+        // 工作流节点类型
+        /**子表关联父模型 */
+        refParentModelkey: focusFormRef.value.props?.refParentModelkey
+      };
+    }
+    return {
+      isFocus: false,
+      formModelKey: "",
+      formId: "",
+      nodeType: ""
+    };
+  });
+  return {
+    setSelectedModal,
+    resetSelectedModal,
+    setSelectedWidget,
+    resetSelectedWidget,
+    selectedAllPropEditors,
+    selectedAllStyleEditors,
+    selectedAllEvents,
+    selectedEvents,
+    selectedProps,
+    selectedStyle,
+    selectedWidget,
+    selectedRef,
+    selectModalRef,
+    focusFormContainer,
+    selectedAllDesingerConfig,
+    setFocusFormContainer,
+    focusFormRef,
+    hoverRef,
+    setHoverWidget,
+    selectedParentRef,
+    setSelectedParentWidgets,
+    selectedParentsRef,
+    selectedParentChildrenRef,
+    setSelectedParentChildrenRef,
+    selectedConfigRef,
+    setSelectedConfig
+  };
+}
+
+export { useSelectedWidget };