@maketribe/ms-app 3.0.4 → 3.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maketribe/ms-app",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "description": "",
   "main": "dist/cjs",
   "files": [
@@ -14,10 +14,11 @@
     "element-plus": "^2.3.7",
     "vue": "^3.3.4",
     "ufo": "^1.3.1",
+    "tinymce": "^6.8.0",
+    "vditor": "^3.9.6",
     "lodash-es": "^4.17.21",
     "vue-router": "^4.2.4",
-    "@maketribe/dm": "^3.0.3",
-    "@maketribe/dm-ui": "^3.0.2",
+    "@maketribe/dm": "^3.0.4",
     "@maketribe/utils": "^1.1.1",
     "@maketribe/locale": "^1.0.5",
     "@maketribe/request": "^1.1.2"

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-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-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;

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

@@ -0,0 +1,10 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { columnProps } from "../../data-model/data-table/composables";
+
+export const columnTextProps = buildProps({
+  ...columnProps,
+  formatValue: { type: Function, default: (value: any) => value },
+});
+
+export type ColumnTextProps = ExtractPropTypes<typeof columnTextProps>;

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

@@ -0,0 +1,18 @@
+import { computed, defineComponent, unref } from "vue";
+
+import { columnTextProps } from "./column-text-options";
+import { useColumn } from "../../data-model/data-table/composables";
+
+export default defineComponent({
+  name: "MKColumnText",
+  props: columnTextProps,
+  setup(props) {
+    const { value } = useColumn(props);
+
+    const formatValue = computed(() => props.formatValue(unref(value)));
+
+    return () => {
+      return <span>{unref(formatValue)}</span>;
+    };
+  },
+});

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

@@ -0,0 +1,6 @@
+import ColumnText from "./column-text";
+
+export const MKColumnText = ColumnText;
+export default MKColumnText;
+
+export * from "./column-text-options";

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

@@ -0,0 +1,5 @@
+export * from "./column-action";
+export * from "./column-image";
+export * from "./column-text";
+export * from "./column-object-mapping-text";
+export * from "./column-select";

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

@@ -0,0 +1,21 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+import {
+  dataFilterConditionProps,
+  BETWEEN_OPTION,
+} from "../../data-model/data-filter-form";
+
+export const conditionDateProps = buildProps({
+  ...dataFilterConditionProps,
+  defaultOperator: {
+    type: String,
+    default: BETWEEN_OPTION.value,
+  },
+  type: {
+    type: String,
+    default: "date",
+  },
+} as const);
+
+export type ConditionDateProps = ExtractPropTypes<typeof conditionDateProps>;

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

@@ -0,0 +1,68 @@
+import { computed, defineComponent, unref } from "vue";
+import { ElDatePicker } from "element-plus";
+import { Operator } from "@maketribe/dm";
+
+import { conditionDateProps } from "./condition-date-options";
+import {
+  useDataFilterCondition,
+  BETWEEN_OPTION,
+  GREATER_THAN_EQUAL_OPTION,
+  GREATER_THAN_OPTION,
+  LESS_THAN_EQUAL_OPTION,
+  LESS_THAN_OPTION,
+} from "../../data-model/data-filter-form";
+
+export default defineComponent({
+  name: "MKConditionDate",
+  props: conditionDateProps,
+  setup(props, { expose }) {
+    const { value, isBetween } = useDataFilterCondition({
+      ...props,
+      operator: props.defaultOperator as Operator,
+      operatorOptions: [
+        BETWEEN_OPTION,
+        LESS_THAN_OPTION,
+        LESS_THAN_EQUAL_OPTION,
+        GREATER_THAN_OPTION,
+        GREATER_THAN_EQUAL_OPTION,
+      ],
+    });
+
+    const type = computed(() => {
+      if (props.type === "datetime") {
+        return unref(isBetween) ? "datetimerange" : "datetime";
+      }
+
+      return unref(isBetween) ? "daterange" : props.type;
+    });
+
+    const valueFormat = computed(() => {
+      const _type = unref(type);
+
+      return ["datetime", "datetimerange"].includes(_type)
+        ? "YYYY-MM-DD HH:mm:ss"
+        : "YYYY-MM-DD";
+    });
+
+    expose({
+      isEmpty() {
+        return value.value[0] === null || value.value[1] === null;
+      },
+      reset() {
+        value.value = [null, null];
+      },
+    });
+
+    return () => {
+      return (
+        <ElDatePicker
+          class="mk-condition-date"
+          modelValue={unref(value)}
+          onUpdate:modelValue={(v) => (value.value = v)}
+          type={unref(type) as any}
+          valueFormat={unref(valueFormat)}
+        />
+      );
+    };
+  },
+});

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

@@ -0,0 +1,7 @@
+import { withInstall } from "@maketribe/utils";
+import ConditionDate from "./condition-date";
+
+export const MKConditionDate = withInstall(ConditionDate);
+export default MKConditionDate;
+
+export * from "./condition-date-options";

package/src/components/condition-components/condition-input/condition-input-options.ts

@@ -0,0 +1,10 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+import { dataFilterConditionProps } from "../../data-model/data-filter-form";
+
+export const conditionInputProps = buildProps({
+  ...dataFilterConditionProps,
+} as const);
+
+export type ConditionInputProps = ExtractPropTypes<typeof conditionInputProps>;

package/src/components/condition-components/condition-input/condition-input.tsx

@@ -0,0 +1,41 @@
+import { defineComponent, unref } from "vue";
+import { ElInput } from "element-plus";
+
+import { conditionInputProps } from "./condition-input-options";
+import {
+  useDataFilterCondition,
+  CONTAIN_OPTION,
+  EQUAL_OPTION,
+} from "../../data-model/data-filter-form";
+
+export default defineComponent({
+  name: "MKConditionInput",
+  props: conditionInputProps,
+  setup(props, { expose }) {
+    const { value } = useDataFilterCondition({
+      ...props,
+      operator: CONTAIN_OPTION.value,
+      operatorOptions: [CONTAIN_OPTION, EQUAL_OPTION],
+    });
+
+    expose({
+      isEmpty() {
+        return value.value == null;
+      },
+      reset() {
+        value.value = null;
+      },
+    });
+
+    return () => {
+      return (
+        <ElInput
+          class="mk-condition-input"
+          modelValue={unref(value)}
+          onUpdate:modelValue={(v) => (value.value = v)}
+          placeholder="请输入关键字"
+        />
+      );
+    };
+  },
+});

package/src/components/condition-components/condition-input/index.ts

@@ -0,0 +1,7 @@
+import { withInstall } from "@maketribe/utils";
+import ConditionInput from "./condition-input";
+
+export const MKConditionInput = withInstall(ConditionInput);
+export default MKConditionInput;
+
+export * from "./condition-input-options";

package/src/components/condition-components/condition-number/condition-number-options.ts

@@ -0,0 +1,22 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+import {
+  dataFilterConditionProps,
+  EQUAL_OPTION,
+} from "../../data-model/data-filter-form";
+
+export const conditionNumberProps = buildProps({
+  ...dataFilterConditionProps,
+  defaultValue: {
+    default: null,
+  },
+  defaultOperator: {
+    type: String,
+    default: EQUAL_OPTION.value,
+  },
+});
+
+export type ConditionNumberProps = ExtractPropTypes<
+  typeof conditionNumberProps
+>;