cnhis-design-vue 3.1.17-beta.1 → 3.1.17-beta.10

package/es/components/form-config/src/components/renderer/index.d.ts

@@ -0,0 +1,4 @@
+import CloseButton from './CloseButton.vue';
+import ComplexNode from './ComplexNode.vue';
+import DefaultNode from './DefaultNode.vue';
+export { CloseButton, ComplexNode, DefaultNode };

package/es/components/form-config/src/components/renderer/index.js

@@ -0,0 +1,3 @@
+export { default as CloseButton } from './CloseButton.js';
+export { default as ComplexNode } from './ComplexNode.js';
+export { default as DefaultNode } from './DefaultNode.js';

package/es/components/form-config/src/constants/index.d.ts

@@ -0,0 +1,64 @@
+import { UndefinedAble } from '../../../../../es/shared/types';
+import { InjectionKey, Ref } from 'vue';
+import { FormConfigItem } from '../../../../../es/components/form-config';
+export declare const WidgetTextMap: Map<string, string>;
+export declare enum EditAbleField {
+    NAME = "name",
+    NOTES = "notes",
+    DEFAULT_VALUE = "defaultValue",
+    LAYOUT_WIDTH_ENUM = "layoutWidthEnum",
+    DESC = "desc",
+    DEFAULT_EXPAND = "defaultExpand",
+    FOLD = "fold",
+    REQUIRED = "required",
+    EDITABLE = "editable"
+}
+export declare function widgetWidthOptionConfig(): {
+    option: {
+        text: string;
+        value: string;
+    }[];
+};
+export declare function isShowOptionConfig(): {
+    open: {
+        describe: string;
+        value: boolean;
+    };
+    close: {
+        describe: string;
+        value: boolean;
+    };
+};
+export declare function isNotFoldOptionConfig(): {
+    open: {
+        describe: string;
+        value: boolean;
+    };
+    close: {
+        describe: string;
+        value: boolean;
+    };
+};
+export declare function isEditOptionConfig(): {
+    open: {
+        describe: string;
+        value: boolean;
+    };
+    close: {
+        describe: string;
+        value: boolean;
+    };
+};
+export declare function isNullOptionConfig(): {
+    open: {
+        describe: string;
+        value: boolean;
+    };
+    close: {
+        describe: string;
+        value: boolean;
+    };
+};
+export declare const InjectionFieldList: InjectionKey<Ref<FormConfigItem[]>>;
+export declare const InjectionMaterialList: InjectionKey<Ref<FormConfigItem[]>>;
+export declare const InjectionActiveFieldItem: InjectionKey<Ref<UndefinedAble<FormConfigItem>>>;

package/es/components/form-config/src/constants/index.js

@@ -0,0 +1,60 @@
+const WidgetTextMap = /* @__PURE__ */ new Map([
+  ["LINE_BAR", "\u5206\u7EBF\u680F"],
+  ["NEWLINE", "\u5206\u884C\u7B26"]
+]);
+var EditAbleField = /* @__PURE__ */ ((EditAbleField2) => {
+  EditAbleField2["NAME"] = "name";
+  EditAbleField2["NOTES"] = "notes";
+  EditAbleField2["DEFAULT_VALUE"] = "defaultValue";
+  EditAbleField2["LAYOUT_WIDTH_ENUM"] = "layoutWidthEnum";
+  EditAbleField2["DESC"] = "desc";
+  EditAbleField2["DEFAULT_EXPAND"] = "defaultExpand";
+  EditAbleField2["FOLD"] = "fold";
+  EditAbleField2["REQUIRED"] = "required";
+  EditAbleField2["EDITABLE"] = "editable";
+  return EditAbleField2;
+})(EditAbleField || {});
+function widgetWidthOptionConfig() {
+  return {
+    option: [
+      { text: "\u6574\u884C", value: "ALL_LINE" },
+      { text: "\u534A\u884C", value: "HALF_LINE" },
+      { text: "5/6", value: "FIVE_SIX" },
+      { text: "2/3", value: "TWO_THREE" },
+      { text: "1/3", value: "ONE_THREE" },
+      { text: "3/4", value: "THREE_FOUR" },
+      { text: "1/4", value: "ONE_FOUR" },
+      { text: "1/6", value: "ONE_SIX" },
+      { text: "1/8", value: "ONE_EIGHT" }
+    ]
+  };
+}
+function isShowOptionConfig() {
+  return {
+    open: { describe: "\u9ED8\u8BA4\u5C55\u5F00", value: true },
+    close: { describe: "\u9ED8\u8BA4\u6536\u8D77", value: false }
+  };
+}
+function isNotFoldOptionConfig() {
+  return {
+    open: { describe: "\u53EF\u6298\u53E0", value: true },
+    close: { describe: "\u4E0D\u53EF\u6298\u53E0", value: false }
+  };
+}
+function isEditOptionConfig() {
+  return {
+    open: { describe: "\u53EF\u7F16\u8F91", value: true },
+    close: { describe: "\u4E0D\u53EF\u7F16\u8F91", value: false }
+  };
+}
+function isNullOptionConfig() {
+  return {
+    open: { describe: "\u5FC5\u586B", value: true },
+    close: { describe: "\u4E0D\u5FC5\u586B", value: false }
+  };
+}
+const InjectionFieldList = Symbol("InjectionFieldList");
+const InjectionMaterialList = Symbol("InjectionMaterialList");
+const InjectionActiveFieldItem = Symbol("InjectionActiveFieldItem");
+
+export { EditAbleField, InjectionActiveFieldItem, InjectionFieldList, InjectionMaterialList, WidgetTextMap, isEditOptionConfig, isNotFoldOptionConfig, isNullOptionConfig, isShowOptionConfig, widgetWidthOptionConfig };

package/es/components/form-config/src/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './usePresetRenderer';
+export * from './useSortalbeConfig';
+export * from './useConfigurationField';

package/es/components/form-config/src/hooks/index.js

@@ -0,0 +1,3 @@
+export { usePresetRenderer } from './usePresetRenderer.js';
+export { useSortableConfig } from './useSortalbeConfig.js';
+export { useConfigurationField } from './useConfigurationField.js';

package/es/components/form-config/src/hooks/useConfigurationField.d.ts

@@ -0,0 +1,7 @@
+import { FormConfigItem } from '../../../../../es/components/form-config';
+import { EditAbleField } from '../../../../../es/components/form-config/src/constants';
+import { FieldItem } from '../../../../../es/components/form-render';
+export declare function useConfigurationField(): {
+    generateFieldListByKeys: (keyList: EditAbleField[]) => FieldItem[];
+    generateFieldListByFieldItem: (fieldItem: FormConfigItem) => FieldItem[];
+};

package/es/components/form-config/src/hooks/useConfigurationField.js

@@ -0,0 +1,52 @@
+import { EditAbleField, widgetWidthOptionConfig, isShowOptionConfig, isNotFoldOptionConfig, isEditOptionConfig, isNullOptionConfig } from '../constants/index.js';
+
+function useConfigurationField() {
+  const fieldMap = /* @__PURE__ */ new Map([
+    [EditAbleField.NAME, { alias: "\u540D\u79F0", elem_width: 6, is_null: "0", html_type: "INPUT" }],
+    [EditAbleField.NOTES, { alias: "\u95EE\u53F7\u63D0\u793A", elem_width: 6, html_type: "INPUT" }],
+    [
+      EditAbleField.DEFAULT_VALUE,
+      { alias: "\u9ED8\u8BA4\u503C", elem_width: 6, html_type: "INPUT", validate: { max_length: 20 } }
+    ],
+    [
+      EditAbleField.LAYOUT_WIDTH_ENUM,
+      { alias: "\u5BBD\u5EA6", fieldType: "number", html_type: "SELECT", elem_width: 6, ...widgetWidthOptionConfig() }
+    ],
+    [EditAbleField.DESC, { alias: "\u8BF4\u660E\u6587\u672C", elem_width: 6, html_type: "INPUT", validate: { max_length: 30 } }],
+    [
+      EditAbleField.DEFAULT_EXPAND,
+      { alias: "\u662F\u5426\u9ED8\u8BA4\u5C55\u5F00", html_type: "SWITCH", elem_width: 6, ...isShowOptionConfig() }
+    ],
+    [EditAbleField.FOLD, { alias: "\u662F\u5426\u53EF\u6298\u53E0", html_type: "SWITCH", elem_width: 6, ...isNotFoldOptionConfig() }],
+    [EditAbleField.EDITABLE, { alias: "\u662F\u5426\u53EF\u7F16\u8F91", html_type: "SWITCH", elem_width: 6, ...isEditOptionConfig() }],
+    [EditAbleField.REQUIRED, { alias: "\u662F\u5426\u5FC5\u586B", html_type: "SWITCH", elem_width: 6, ...isNullOptionConfig() }]
+  ]);
+  function generateFieldListByKeys(keyList) {
+    return keyList.map((key) => {
+      return { ...fieldMap.get(key), val_key: key };
+    });
+  }
+  function generateFieldListByFieldItem(fieldItem) {
+    const htmlMap = new Map([
+      [
+        "LINE_BAR",
+        [EditAbleField.NAME, EditAbleField.LAYOUT_WIDTH_ENUM, EditAbleField.DEFAULT_EXPAND, EditAbleField.FOLD]
+      ],
+      ...["NEWLINE", "COMPLEX", "COMBINATION"].map((key) => [key, [EditAbleField.NAME, EditAbleField.LAYOUT_WIDTH_ENUM]])
+    ]);
+    const defaultItems = [
+      EditAbleField.NAME,
+      EditAbleField.DEFAULT_VALUE,
+      EditAbleField.LAYOUT_WIDTH_ENUM,
+      EditAbleField.DESC,
+      EditAbleField.NOTES,
+      EditAbleField.EDITABLE,
+      EditAbleField.REQUIRED
+    ];
+    const keys = htmlMap.get(fieldItem.type) || defaultItems;
+    return generateFieldListByKeys(keys);
+  }
+  return { generateFieldListByKeys, generateFieldListByFieldItem };
+}
+
+export { useConfigurationField };

package/es/components/form-config/src/hooks/usePresetRenderer.d.ts

@@ -0,0 +1,4 @@
+import { FormConfigItem } from '../types';
+export declare function usePresetRenderer(): {
+    getRenderer: (fieldItem: FormConfigItem) => import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | import("vue").FunctionalComponent<{}, {}>;
+};

package/es/components/form-config/src/hooks/usePresetRenderer.js

@@ -0,0 +1,41 @@
+import { isString, isArray, isFunction } from 'lodash-es';
+import { computed } from 'vue';
+import 'naive-ui';
+import '../../../index.js';
+import 'vuedraggable';
+import '../utils/index.js';
+import '@vicons/ionicons5';
+import ComplexNode from '../components/renderer/ComplexNode.js';
+import DefaultNode from '../components/renderer/DefaultNode.js';
+
+function usePresetRenderer() {
+  const renderDefaultNode = {
+    matcher: () => true,
+    renderer: DefaultNode
+  };
+  const renderComplexNode = {
+    matcher: ["COMPLEX", "COMBINATION"],
+    renderer: ComplexNode
+  };
+  const rendererWithPreset = computed(() => {
+    return [renderComplexNode, renderDefaultNode];
+  });
+  function getRenderer(fieldItem) {
+    return rendererWithPreset.value.find(({
+      matcher
+    }) => {
+      if (isString(matcher))
+        return matcher === fieldItem.type;
+      if (isArray(matcher))
+        return matcher.includes(fieldItem.type);
+      if (isFunction(matcher))
+        return matcher(fieldItem.type);
+      return matcher.test(fieldItem.type);
+    }).renderer;
+  }
+  return {
+    getRenderer
+  };
+}
+
+export { usePresetRenderer };

package/es/components/form-config/src/hooks/useSortalbeConfig.d.ts

@@ -0,0 +1,11 @@
+import Sortable from 'sortablejs';
+export declare function useSortableConfig(): {
+    getCommonConfig: () => {
+        onMove: ({ to, from }: Sortable.SortableEvent) => void;
+        onChoose: ({ target, item }: Sortable.SortableEvent) => void;
+        onUnchoose: ({ from, to, target, item }: Sortable.SortableEvent) => void;
+        tag: string;
+        animation: string;
+        'item-key': string;
+    };
+};

package/es/components/form-config/src/hooks/useSortalbeConfig.js

@@ -0,0 +1,27 @@
+function useSortableConfig() {
+  let timer = null;
+  function onChoose({ target, item }) {
+    timer = setTimeout(() => {
+      target.classList.add("is-choosing-area");
+      item.classList.add("is-choosing");
+    }, 200);
+  }
+  function onUnchoose({ from, to, target, item }) {
+    clearTimeout(timer);
+    [from, to, target].forEach((ele) => {
+      ele.classList.remove("is-choosing-area");
+    });
+    item.classList.remove("is-choosing");
+  }
+  let prevTo;
+  function onMove({ to, from }) {
+    prevTo == null ? void 0 : prevTo.classList.remove("is-choosing-area");
+    prevTo = to;
+    to !== from && from.classList.remove("is-choosing-area");
+    to.classList.add("is-choosing-area");
+  }
+  const getCommonConfig = () => ({ onMove, onChoose, onUnchoose, tag: "section", animation: "150", "item-key": "key" });
+  return { getCommonConfig };
+}
+
+export { useSortableConfig };

package/es/components/form-config/src/types/index.d.ts

@@ -0,0 +1,37 @@
+import { Component, FunctionalComponent } from 'vue';
+import { ArrayAble } from '../../../../../es/shared/types';
+interface Matcher {
+    (type: string): boolean;
+}
+export declare type FormConfigRenderer = {
+    matcher: ArrayAble<string> | RegExp | Matcher;
+    renderer: Component | FunctionalComponent;
+};
+export declare type FormConfigType = 'NEWLINE' | 'LINE_BAR' | 'OTHER' | string;
+export declare type FormConfigWidth = 'ALL_LINE' | 'HALF_LINE' | 'FIVE_SIX' | 'TWO_THREE' | 'ONE_THREE' | 'THREE_FOUR' | 'ONE_FOUR' | 'ONE_SIX' | 'ONE_EIGHT';
+export declare type FormConfigItem = {
+    key: string;
+    layoutWidthEnum: FormConfigWidth;
+    type: FormConfigType;
+    name: string;
+} & Partial<{
+    show: boolean;
+    defaultValue: any;
+    defaultExpand: boolean;
+    fold: boolean;
+    required: boolean;
+    editable: boolean;
+    notes: string;
+    desc: string;
+    children: FormConfigItem[];
+    __new: boolean;
+}>;
+export interface FormConfigTextFormatter {
+    (fieldItem: FormConfigItem, parsedText: string): string;
+}
+export interface FormConfigExpose {
+    loadData(payload: Record<'fieldList', FormConfigItem[]>): void;
+    validate(): Promise<unknown>;
+    getData(): Record<'fieldList' | 'materialList', FormConfigItem[]>;
+}
+export {};

package/es/components/form-config/src/utils/index.d.ts

@@ -0,0 +1,7 @@
+import { FormConfigItem, FormConfigWidth } from '../../../../../es/components/form-config';
+export declare function layoutWidthEnum2Column(layoutWidthEnum: FormConfigWidth): number;
+export declare function bindHover(fieldItem: FormConfigItem): {
+    onMouseenter: () => FormConfigItem;
+    onMouseleave: () => undefined;
+    'is-hovering': boolean;
+};

package/es/components/form-config/src/utils/index.js

@@ -0,0 +1,26 @@
+import { ref } from 'vue';
+
+function layoutWidthEnum2Column(layoutWidthEnum) {
+  const transferMap = {
+    ALL_LINE: 24,
+    HALF_LINE: 12,
+    FIVE_SIX: 20,
+    TWO_THREE: 16,
+    ONE_THREE: 8,
+    THREE_FOUR: 18,
+    ONE_FOUR: 6,
+    ONE_SIX: 4,
+    ONE_EIGHT: 3
+  };
+  return transferMap[layoutWidthEnum] || 12;
+}
+const hovering = ref();
+function bindHover(fieldItem) {
+  return {
+    onMouseenter: () => hovering.value = fieldItem,
+    onMouseleave: () => hovering.value = void 0,
+    "is-hovering": hovering.value === fieldItem
+  };
+}
+
+export { bindHover, layoutWidthEnum2Column };

package/es/components/form-config/style/index.css

@@ -0,0 +1,158 @@
+.form-config {
+  display: flex;
+  justify-content: space-between;
+}
+.form-config__material {
+  padding: 16px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  border-radius: 8px;
+  width: 200px;
+}
+.form-config__materialHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+}
+.form-config__materialContent {
+  padding: 16px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  border-radius: 8px;
+  border: 1px dashed rgba(128, 128, 128, 0.35);
+  overflow-y: auto;
+  max-height: var(--max-height);
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.form-config__materialContentItem {
+  cursor: move;
+  justify-content: flex-start;
+  grid-column: span var(--item-column) / span var(--item-column);
+}
+.form-config__displayWrapper {
+  padding: 16px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  border-radius: 8px;
+  min-width: 400px;
+  flex: 1;
+  padding: 16px 0;
+}
+.form-config__displayHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+}
+.form-config__displayContent {
+  padding: 16px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  border-radius: 8px;
+  border: 1px dashed rgba(128, 128, 128, 0.35);
+  overflow-y: auto;
+  max-height: var(--max-height);
+  height: fit-content;
+  display: grid !important;
+  grid-template-columns: repeat(24, minmax(0px, 1fr));
+  gap: 8px;
+}
+.form-config__displayContentItem {
+  grid-column: span var(--item-column) / span var(--item-column);
+  position: relative;
+}
+.form-config__config {
+  padding: 16px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  border-radius: 8px;
+  width: 240px;
+}
+.form-config__configHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+}
+.form-config__configContent {
+  padding: 16px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  border-radius: 8px;
+  border: 1px dashed rgba(128, 128, 128, 0.35);
+  overflow-y: auto;
+  border: none;
+  max-height: var(--max-height);
+}
+.form-config__renderer {
+  cursor: move;
+  width: 100%;
+  height: 100%;
+  justify-content: flex-start;
+}
+.form-config__renderer--default {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+  box-sizing: border-box;
+  user-select: none;
+  position: relative;
+}
+.form-config__renderer--complex {
+  border: 1px dashed skyblue;
+  border-radius: 8px;
+  padding: 8px;
+}
+.form-config__renderer--complexHeader {
+  display: flex;
+  justify-content: center;
+  padding: 8px;
+  margin-top: -8px;
+  position: relative;
+}
+.form-config__renderer--complex--grid {
+  display: grid !important;
+  grid-template-columns: repeat(24, minmax(0px, 1fr));
+  gap: 8px;
+  grid-column: span var(--item-column) / span var(--item-column);
+}
+.form-config__renderer--complex--flex {
+  display: flex;
+}
+.form-config .is-disabled {
+  background: #e5e5e5 !important;
+}
+.form-config .is-required {
+  padding-left: 16px !important;
+}
+.form-config .is-required::before {
+  position: absolute;
+  content: '*';
+  left: 8px;
+  color: red;
+}
+.form-config .is-active {
+  color: #5585f5 !important;
+}
+.form-config .is-choosing {
+  box-shadow: #5585f5 0 0 0 2px !important;
+  opacity: 0.7;
+}
+.form-config .is-choosing-area {
+  background: rgba(128, 128, 128, 0.1);
+}
+.form-config [is-hovering='true'] .form-config__renderer--closeButton {
+  visibility: visible;
+}
+.form-config .form-config__renderer--closeButton {
+  position: absolute;
+  visibility: hidden;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 4px;
+}