@maketribe/ms-app 3.0.22 → 3.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maketribe/ms-app",
-  "version": "3.0.22",
+  "version": "3.0.24",
   "description": "",
   "main": "dist/cjs",
   "files": [
@@ -21,9 +21,9 @@
     "vue-codemirror": "^6.1.1",
     "vue-router": "^4.2.4",
     "@maketribe/dm": "^3.0.10",
-    "@maketribe/request": "^1.1.11",
-    "@maketribe/locale": "^1.0.5",
-    "@maketribe/utils": "^1.1.4"
+    "@maketribe/utils": "^1.1.4",
+    "@maketribe/request": "^1.1.12",
+    "@maketribe/locale": "^1.0.5"
   },
   "scripts": {
     "build": "npm run clean && npm run build:js && npm run build:type && npm run build:style",

package/src/components/column-components/column-link/column-link-options.ts

@@ -0,0 +1,34 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import {
+  ColumnEventData,
+  columnProps,
+} from "../../data-model/data-table/composables";
+
+export const columnLinkProps = buildProps({
+  ...columnProps,
+  type: {
+    values: [
+      "",
+      "default",
+      "success",
+      "warning",
+      "info",
+      "text",
+      "primary",
+      "danger",
+    ],
+    default: "primary",
+  },
+  formatValue: {
+    type: Function,
+  },
+} as const);
+
+export type ColumnLinkProps = ExtractPropTypes<typeof columnLinkProps>;
+
+export const columnLinkEmits = {
+  click: (data: ColumnEventData) => true,
+};
+
+export type ColumnLinkEmits = typeof columnLinkEmits;

package/src/components/column-components/column-link/column-link.tsx

@@ -0,0 +1,27 @@
+import { ElButton } from "element-plus";
+import { defineComponent } from "vue";
+import { columnLinkEmits, columnLinkProps } from "./column-link-options";
+import MKColumnText from "../column-text";
+
+export default defineComponent({
+  name: "MKColumnLink",
+  props: columnLinkProps,
+  emits: columnLinkEmits,
+  setup(props, { emit }) {
+    const handleClick = () => {
+      emit("click", {
+        row: props.row,
+        index: props.index,
+        column: props.column,
+      });
+    };
+
+    return () => {
+      return (
+        <ElButton type={props.type} onClick={handleClick} link>
+          <MKColumnText {...props} />
+        </ElButton>
+      );
+    };
+  },
+});

package/src/components/column-components/column-link/index.ts

@@ -0,0 +1,7 @@
+import ColumnLink from "./column-link";
+
+export const MKColumnLink = ColumnLink;
+
+export default ColumnLink;
+
+export * from "./column-link-options";

package/src/components/column-components/column-switch/column-switch-options.ts

@@ -1,6 +1,6 @@
 import { ExtractPropTypes } from "vue";
 import { buildProps } from "@maketribe/utils";
-import { columnProps } from "../../data-model/data-table/composables";
+import { ColumnEventData, columnProps } from "../../data-model/data-table/composables";
 
 export const columnSwitchProps = buildProps({
   ...columnProps,
@@ -10,7 +10,7 @@ export const columnSwitchProps = buildProps({
 export type ColumnSwitchProps = ExtractPropTypes<typeof columnSwitchProps>;
 
 export const columnSwitchEmits = {
-  change: (value: boolean, row: any) => true,
+  change: (data: ColumnEventData & { value: boolean }) => true,
 };
 
 export type ColumnSwitchEmits = typeof columnSwitchEmits;

package/src/components/column-components/column-switch/column-switch.tsx

@@ -14,7 +14,12 @@ export default defineComponent({
     const disabled = computed(() => props.disabled);
 
     const handleChange = (value: boolean) => {
-      emit("change", value, props.row);
+      emit("change", {
+        row: props.row,
+        column: props.column,
+        index: props.index,
+        value,
+      });
     };
 
     return () => {

package/src/components/column-components/index.ts

@@ -7,3 +7,4 @@ export * from "./column-json";
 export * from "./column-date";
 export * from "./column-switch";
 export * from "./column-tag";
+export * from "./column-link";

package/src/components/data-model/data-table/composables/use-column.ts

@@ -3,6 +3,8 @@ import { ExtractPropTypes, computed } from "vue";
 import { TableColumn } from "@maketribe/dm";
 import { buildProps } from "@maketribe/utils";
 
+export type ColumnEventData = { row: any; column: TableColumn; index: number };
+
 export const columnProps = buildProps({
   row: { type: Object, required: true },
   column: { type: TableColumn, required: true },

package/src/components/form-components/form-data-table-select/form-data-table-select.tsx

@@ -4,7 +4,7 @@ import { formDataTableSelectProps } from "./form-data-table-select-options";
 import { useFormItem } from "../../data-model/data-form/composables";
 
 export default defineComponent({
-  name: "MKFormDataTableSelelct",
+  name: "MKFormDataTableSelect",
   props: formDataTableSelectProps,
   setup(props) {
     const { column, value, disabled } = useFormItem();

package/src/components/json-editor/json-editor-options.ts

@@ -3,7 +3,7 @@ import { buildProps } from "@maketribe/utils";
 
 export const jsonEditorProps = buildProps({
   modelValue: {
-    type: String,
+    type: null,
     required: true,
   },
   disabled: {

package/src/components/json-editor/json-editor.tsx

@@ -4,18 +4,19 @@ import { json } from "@codemirror/lang-json";
 import { jsonEditorEmits, jsonEditorProps } from "./json-editor-options";
 
 export default defineComponent({
-  name: "MKCodeMirror",
+  name: "MKJsonEditor",
   props: jsonEditorProps,
   emits: jsonEditorEmits,
   setup(props, { emit }) {
     const modelValue = computed({
-      get: () => props.modelValue,
+      get: () => (props.modelValue as string) || "",
       set: (v: string) => emit("update:model-value", v),
     });
 
     return () => {
       return (
         <Codemirror
+          class="mk-json-editor"
           modelValue={unref(modelValue)}
           onUpdate:modelValue={(v: string) => (modelValue.value = v)}
           disabled={props.disabled}

package/src/core/component/ConfigComponents.ts

@@ -1,3 +1,4 @@
+import { defineAsyncComponent } from "vue";
 import { ElInput, ElInputNumber } from "element-plus";
 import { Components } from "@maketribe/dm";
 
@@ -19,5 +20,13 @@ export class ConfigComponents extends Components {
       title: "数值输入框",
       component: ElInputNumber,
     });
+
+    this.registerComponent({
+      name: "MKConfigJsonEditor",
+      title: "JSON",
+      component: defineAsyncComponent(
+        () => import("../../components/json-editor")
+      ),
+    });
   }
 }

package/src/core/component/DataTableComponents.ts

@@ -79,5 +79,13 @@ export class DataTableComponents extends Components {
         () => import("../../components/column-components/column-tag")
       ),
     });
+
+    this.registerComponent({
+      name: "MKColumnLink",
+      title: "链接",
+      component: defineAsyncComponent(
+        () => import("../../components/column-components/column-link")
+      ),
+    });
   }
 }

package/src/dataview/config/ConfigForm.ts

@@ -48,6 +48,7 @@ export class ConfigForm
           options: [
             { value: "string", label: "字符串" },
             { value: "int", label: "整数" },
+            { value: "json", label: "JSON" },
           ],
           onChange: () => {
             this.handleTypeChange(this.data);
@@ -63,6 +64,21 @@ export class ConfigForm
         label: "配置值",
         required: true,
         defaultValue: null,
+        rules: [
+          {
+            validator: (rule, value, callback) => {
+              if (this.data?.type === "json") {
+                try {
+                  JSON.parse(value);
+                } catch (e) {
+                  callback(new Error("JSON格式错误"));
+                }
+              }
+
+              callback();
+            },
+          },
+        ],
         componentInfo: this.resolveType(defaultType),
       }),
     ]);
@@ -86,21 +102,28 @@ export class ConfigForm
   formatItem(item: Config): Config {
     let value = item.value;
 
-    try {
-      value = JSON.parse(item.value);
-    } catch (e) {}
+    if (item.type !== "json") {
+      try {
+        value = JSON.parse(item.value);
+      } catch (e) {}
+    }
 
     return { ...item, value };
   }
 
   formatSubmitData(data: any) {
-    return { ...data, value: JSON.stringify(data.value) };
+    return {
+      ...data,
+      value: data.type === "json" ? data.value : JSON.stringify(data.value),
+    };
   }
 
   resolveType(type: string) {
     switch (type) {
       case "int":
         return "MKConfigInputNumber";
+      case "json":
+        return "MKConfigJsonEditor";
       default:
         return "MKConfigInput";
     }