@maketribe/ms-app 3.0.30 → 3.0.31

package/package.json

@@ -1,42 +1,39 @@
-{
-  "name": "@maketribe/ms-app",
-  "version": "3.0.30",
-  "description": "",
-  "main": "./src",
-  "publishConfig": {
-    "main": "dist/cjs",
-    "module": "dist/esm",
-    "types": "dist/esm/index.d.ts"
-  },
-  "scripts": {
-    "build": "npm run clean && npm run build:js && npm run build:type && npm run build:style",
-    "build:js": "rollup --config rollup.config.mjs",
-    "build:type": "npm run build:type:cjs && npm run build:type:esm",
-    "build:type:cjs": "vue-tsc --project tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist/cjs",
-    "build:type:esm": "vue-tsc --project tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist/esm",
-    "build:style": "gulp --required @esbuild-kit/cjs-loader buildStyle",
-    "clean": "rimraf dist"
-  },
-  "files": [
-    "dist"
-  ],
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@codemirror/lang-json": "^6.0.1",
-    "@element-plus/icons-vue": "^2.1.0",
-    "@maketribe/dm": "workspace:^",
-    "@maketribe/locale": "workspace:^",
-    "@maketribe/request": "workspace:^",
-    "@maketribe/utils": "workspace:^",
-    "element-plus": "^2.5.3",
-    "lodash-es": "^4.17.21",
-    "tinymce": "^6.8.2",
-    "ufo": "^1.3.1",
-    "vditor": "^3.9.6",
-    "vue": "^3.3.4",
-    "vue-codemirror": "^6.1.1",
-    "vue-router": "^4.2.4"
-  }
-}
+{
+  "name": "@maketribe/ms-app",
+  "version": "3.0.31",
+  "description": "",
+  "main": "dist/cjs",
+  "files": [
+    "dist"
+  ],
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@codemirror/lang-json": "^6.0.1",
+    "@element-plus/icons-vue": "^2.1.0",
+    "element-plus": "^2.5.3",
+    "lodash-es": "^4.17.21",
+    "tinymce": "^6.8.2",
+    "ufo": "^1.3.1",
+    "vditor": "^3.9.6",
+    "vue": "^3.3.4",
+    "vue-codemirror": "^6.1.1",
+    "vue-router": "^4.2.4",
+    "@maketribe/dm": "^3.0.11",
+    "@maketribe/locale": "^1.0.5",
+    "@maketribe/request": "^2.0.3",
+    "@maketribe/utils": "^1.1.4"
+  },
+  "scripts": {
+    "build": "npm run clean && npm run build:js && npm run build:type && npm run build:style",
+    "build:js": "rollup --config rollup.config.mjs",
+    "build:type": "npm run build:type:cjs && npm run build:type:esm",
+    "build:type:cjs": "vue-tsc --project tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist/cjs",
+    "build:type:esm": "vue-tsc --project tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist/esm",
+    "build:style": "gulp --required @esbuild-kit/cjs-loader buildStyle",
+    "clean": "rimraf dist"
+  },
+  "module": "dist/esm",
+  "types": "dist/esm/index.d.ts"
+}

package/src/components/button/button-options.ts

@@ -0,0 +1,22 @@
+import { ExtractPropTypes } from "vue";
+import { Button } from "@maketribe/dm";
+import { buildProps } from "@maketribe/utils";
+
+export const buttonProps = buildProps({
+  button: {
+    type: Button,
+    required: true,
+  },
+  link: {
+    type: Boolean,
+    default: false,
+  },
+} as const);
+
+export type ButtonProps = ExtractPropTypes<typeof buttonProps>;
+
+export const buttonEmits = {
+  click: () => true,
+};
+
+export type ButtonEmits = typeof buttonEmits;

package/src/components/button/button.tsx

@@ -0,0 +1,37 @@
+import { ElButton } from "element-plus";
+import { defineComponent } from "vue";
+import MKSvgIcon from "../svg-icon";
+import { buttonEmits, buttonProps } from "./button-options";
+
+export default defineComponent({
+  name: "MKButton",
+  props: buttonProps,
+  emits: buttonEmits,
+  setup(props, { emit }) {
+    const handleClick = () => {
+      emit("click");
+    };
+
+    return () => {
+      const icon = props.button.icon ? (
+        <MKSvgIcon iconClass={props.button.icon} />
+      ) : null;
+
+      const text = props.button.label ? (
+        <span class="mk-button__text">{props.button.label}</span>
+      ) : null;
+
+      return (
+        <ElButton
+          class="mk-button"
+          onClick={handleClick}
+          type={props.button.type}
+          link={props.link}
+        >
+          {icon}
+          {text}
+        </ElButton>
+      );
+    };
+  },
+});

package/src/components/button/index.ts

@@ -0,0 +1,7 @@
+import Button from "./button";
+
+export const MKButton = Button;
+
+export default MKButton;
+
+export * from "./button-options";

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

@@ -0,0 +1,11 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { TableActionColumn } from "@maketribe/dm";
+import { columnProps } from "../../data-model/data-table/composables";
+
+export const columnActionProps = buildProps({
+  ...columnProps,
+  column: { type: TableActionColumn, required: true },
+} as const);
+
+export type ColumnActionProps = ExtractPropTypes<typeof columnActionProps>;

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

@@ -0,0 +1,36 @@
+import { computed, defineComponent, inject, unref } from "vue";
+import { ElButton } from "element-plus";
+
+import { columnActionProps } from "./column-action-options";
+import MKButton from "../../button";
+
+export type MKColumnActionButton = {
+  name?: string;
+  label?: string;
+  type?: InstanceType<typeof ElButton>["type"];
+  handler?: (row: any) => any;
+};
+
+export default defineComponent({
+  name: "MKColumnAction",
+  props: columnActionProps,
+  setup(props) {
+    const buttons = computed(() => {
+      return props.column.buttons;
+    });
+
+    return () => {
+      const buttonVnodes = unref(buttons)
+        .filter((button) => button.predicate(props.row))
+        .map((button) => (
+          <MKButton
+            button={button}
+            link
+            onClick={() => button.handler(props.row)}
+          />
+        ));
+
+      return <span class="mk-column-action">{buttonVnodes}</span>;
+    };
+  },
+});

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

@@ -0,0 +1,4 @@
+import ColumnAction from "./column-action";
+
+export const MKColumnAction = ColumnAction;
+export default MKColumnAction;

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

@@ -0,0 +1,12 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { columnTextProps } from "../column-text";
+
+export const dateTypes = ["date", "year", "month", "datetime"] as const;
+
+export const columnDateProps = buildProps({
+  ...columnTextProps,
+  type: { default: "date", values: dateTypes },
+});
+
+export type ColumnDateProps = ExtractPropTypes<typeof columnDateProps>;

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

@@ -0,0 +1,47 @@
+import { isFunction } from "lodash-es";
+import { computed, defineComponent, unref } from "vue";
+import { dayjs } from "element-plus";
+
+import { useColumn } from "../../data-model/data-table/composables";
+import { MKColumnText } from "../column-text";
+import { columnDateProps } from "./column-date-options";
+
+export default defineComponent({
+  name: "MKColumnDate",
+  props: columnDateProps,
+  setup(props) {
+    const columnTextProps = computed(() => {
+      const { type, ...columnTextProps } = props;
+      return columnTextProps;
+    });
+
+    const type = computed(() => props.type);
+
+    const formatValue = (value: string) => {
+      const dayInstance = dayjs(value ?? null);
+
+      if (!dayInstance.isValid()) {
+        return;
+      }
+
+      switch (unref(type)) {
+        case "datetime":
+          return dayInstance.format("YYYY-MM-DD HH:mm:ss");
+        case "date":
+          return dayInstance.format("YYYY-MM-DD");
+        case "month":
+          return dayInstance.format("YYYY-MM");
+        case "year":
+          return dayInstance.format("YYYY");
+        default:
+          return props.formatValue(value);
+      }
+    };
+
+    return () => {
+      return (
+        <MKColumnText {...unref(columnTextProps)} formatValue={formatValue} />
+      );
+    };
+  },
+});

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

@@ -0,0 +1,6 @@
+import ColumnDate from "./column-date";
+
+export const MKColumnDate = ColumnDate;
+export default MKColumnDate;
+
+export * from "./column-date-options";

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

@@ -0,0 +1,9 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { columnProps } from "../../data-model/data-table/composables";
+
+export const columnImageProps = buildProps({
+  ...columnProps,
+} as const);
+
+export type ColumnImageProps = ExtractPropTypes<typeof columnImageProps>;

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

@@ -0,0 +1,20 @@
+import { defineComponent, unref } from "vue";
+import { useColumn } from "../../data-model/data-table/composables";
+import { columnImageProps } from "./column-image-options";
+import MKImageView from "../../image-view";
+
+export default defineComponent({
+  name: "MKColumnImage",
+  props: columnImageProps,
+  setup(props) {
+    const { value } = useColumn(props);
+
+    return () => {
+      if (!unref(value)) {
+        return null;
+      }
+
+      return <MKImageView src={unref(value)} />;
+    };
+  },
+});

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

@@ -0,0 +1,4 @@
+import ColumnImage from "./column-image";
+
+export const MKColumnImage = ColumnImage;
+export default MKColumnImage;

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

@@ -0,0 +1,13 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { columnProps } from "../../data-model/data-table/composables";
+
+export const columnJsonProps = buildProps({
+  ...columnProps,
+  buttonText: {
+    type: String,
+    default: "查看",
+  },
+} as const);
+
+export type ColumnJsonProps = ExtractPropTypes<typeof columnJsonProps>;

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

@@ -0,0 +1,41 @@
+import { Fragment, computed, defineComponent, ref, unref } from "vue";
+import { ElButton, ElDialog, ElScrollbar } from "element-plus";
+import { I18n } from "@maketribe/locale";
+import { useColumn } from "../../data-model/data-table/composables";
+import { columnJsonProps } from "./column-json-options";
+import { MKJsonEditor } from "../../json-editor";
+
+export default defineComponent({
+  name: "MKColumnJson",
+  props: columnJsonProps,
+  setup(props) {
+    const { value } = useColumn(props);
+
+    const isShowDialog = ref(false);
+
+    const buttonText = computed(() => props.buttonText);
+
+    const handleClick = () => {
+      isShowDialog.value = true;
+    };
+
+    return () => {
+      return (
+        <Fragment>
+          <ElButton onClick={handleClick}>{unref(buttonText)}</ElButton>
+
+          <ElDialog
+            class="mk-column-json__dialog"
+            appendToBody
+            modelValue={unref(isShowDialog)}
+            onUpdate:modelValue={(v: boolean) => (isShowDialog.value = v)}
+          >
+            <ElScrollbar height="100%">
+              <MKJsonEditor disabled modelValue={unref(value) as string} />
+            </ElScrollbar>
+          </ElDialog>
+        </Fragment>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,8 @@
+import { withInstall } from "@maketribe/utils";
+import ColumnJson from "./column-json";
+
+export const MKColumnJson = withInstall(ColumnJson);
+
+export default MKColumnJson;
+
+export * from "./column-json-options";

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-object-mapping-text/column-object-mapping-text-options.ts

@@ -0,0 +1,12 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { columnProps } from "../../data-model/data-table/composables";
+
+export const columnObjectMappingTextProps = buildProps({
+  ...columnProps,
+  mapping: { type: Object, required: true },
+} as const);
+
+export type ColumnObjectMappingTextProps = ExtractPropTypes<
+  typeof columnObjectMappingTextProps
+>;

package/src/components/column-components/column-object-mapping-text/column-object-mapping-text.tsx

@@ -0,0 +1,22 @@
+import { defineComponent } from "vue";
+import { columnObjectMappingTextProps } from "./column-object-mapping-text-options";
+import ColumnText from "../column-text";
+
+export default defineComponent({
+  name: "MKColumnObjectMappingText",
+  props: columnObjectMappingTextProps,
+  setup(props) {
+    const formatValue = (value: any) => props.mapping[value] ?? value;
+
+    return () => {
+      return (
+        <ColumnText
+          row={props.row}
+          column={props.column}
+          index={props.index}
+          formatValue={formatValue}
+        />
+      );
+    };
+  },
+});

package/src/components/column-components/column-object-mapping-text/index.ts

@@ -0,0 +1,6 @@
+import ColumnObjectMappingText from "./column-object-mapping-text";
+
+export const MKColumnObjectMappingText = ColumnObjectMappingText;
+export default MKColumnObjectMappingText;
+
+export * from "./column-object-mapping-text-options";

package/src/components/column-components/column-select/column-select-header-options.ts

@@ -0,0 +1,8 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+export const columnSelectHeaderProps = buildProps({});
+
+export type ColumnSelectHeaderProps = ExtractPropTypes<
+  typeof columnSelectHeaderProps
+>;

package/src/components/column-components/column-select/column-select-header.tsx

@@ -0,0 +1,57 @@
+import { computed, defineComponent, inject, unref } from "vue";
+import { columnSelectHeaderProps } from "./column-select-header-options";
+import { ElCheckbox } from "element-plus";
+import { DATATABLE_CONTEXT_KEY } from "../../data-model/data-table/token";
+
+export default defineComponent({
+  name: "MKColumnSelectHeader",
+  props: columnSelectHeaderProps,
+  setup() {
+    const dataTable = inject(DATATABLE_CONTEXT_KEY)!.dataTable;
+
+    const indeterminate = computed(() => {
+      const primaryKey = dataTable.primaryKey;
+
+      const selection = dataTable.getSelection();
+
+      const list = dataTable.getList();
+
+      const pageSelection = list.filter((item) =>
+        selection.includes(item[primaryKey])
+      );
+
+      return pageSelection.length !== list.length && pageSelection.length > 0;
+    });
+
+    const isChecked = computed({
+      get: () => !!dataTable.getSelection().length,
+      set: (isChecked: boolean) => {
+        const primaryKey = dataTable.primaryKey;
+
+        if (isChecked || unref(indeterminate)) {
+          dataTable.setSelection(
+            dataTable.getList().map((item) => item[primaryKey])
+          );
+
+          return;
+        }
+
+        dataTable.setSelection([]);
+      },
+    });
+
+    return () => {
+      return (
+        <div class="mk-column-selection-header">
+          <ElCheckbox
+            disabled={!unref(dataTable.getList().length)}
+            modelValue={unref(isChecked)}
+            indeterminate={unref(indeterminate)}
+            checked={unref(isChecked)}
+            onChange={(v: any) => (isChecked.value = v as boolean)}
+          />
+        </div>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,9 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { columnProps } from "../../data-model/data-table/composables";
+
+export const columnSelectProps = buildProps({
+  ...columnProps,
+});
+
+export type ColumnSelectProps = ExtractPropTypes<typeof columnSelectProps>;

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

@@ -0,0 +1,74 @@
+import { computed, defineComponent, inject, unref } from "vue";
+import { columnSelectProps } from "./column-select-options";
+import { ElCheckbox } from "element-plus";
+import ColumnSelectHeader from "./column-select-header";
+import { DATATABLE_CONTEXT_KEY } from "../../data-model/data-table/token";
+
+export default defineComponent({
+  name: "MKColumnSelect",
+  props: columnSelectProps,
+  Header: ColumnSelectHeader,
+  setup(props) {
+    const dataTable = inject(DATATABLE_CONTEXT_KEY)!.dataTable;
+
+    const i = computed(() => props.index + 1);
+
+    const isSelected = computed({
+      get: () => {
+        const primaryKey = dataTable.primaryKey;
+
+        return !!dataTable
+          .getSelection()
+          .find((item) => item === props.row[primaryKey]);
+      },
+      set: (v: boolean) => {
+        const primaryKey = dataTable.primaryKey;
+
+        const item = dataTable
+          .getSelection()
+          .find((item) => item === props.row[primaryKey]);
+
+        if (v) {
+          if (item) {
+            return;
+          }
+
+          dataTable.setSelection(
+            dataTable.getSelection().concat(props.row[primaryKey])
+          );
+
+          return;
+        }
+
+        if (item) {
+          dataTable.setSelection(
+            dataTable
+              .getSelection()
+              .filter((item) => item !== props.row[primaryKey])
+          );
+        }
+      },
+    });
+
+    return () => {
+      return (
+        <div
+          class={[
+            "mk-column-selection",
+            unref(isSelected) ? "is-selected" : "",
+          ]}
+        >
+          <span class="mk-column-selection__index">{unref(i)}</span>
+          <span class="mk-column-selection__selection">
+            <ElCheckbox
+              modelValue={unref(isSelected)}
+              onUpdate:modelValue={(v: any) =>
+                (isSelected.value = v as boolean)
+              }
+            />
+          </span>
+        </div>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,5 @@
+import ColumnSelect from "./column-select";
+
+export const MKColumnSelect = ColumnSelect;
+
+export default MKColumnSelect;