@maketribe/ms-app 3.0.28 → 3.0.29

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

@@ -1,190 +0,0 @@
-import {
-  Fragment,
-  computed,
-  ref,
-  unref,
-  watch,
-  defineComponent,
-  Ref,
-} from "vue";
-import { ElSelect } from "element-plus";
-import { Grid } from "@element-plus/icons-vue";
-import { isEqual } from "lodash-es";
-import { Where } from "@maketribe/request";
-import MKDataTableSelectDialog from "../data-table-select-dialog";
-import {
-  dataTableSelectEmits,
-  dataTableSelectProps,
-} from "./data-table-select-options";
-
-export default defineComponent({
-  name: "MKDataTableSelect",
-  inheritAttrs: false,
-  props: dataTableSelectProps,
-  emits: dataTableSelectEmits,
-  setup(props, { emit }) {
-    const dataTable = computed(() => props.dataTable);
-
-    const dataViewRequest = computed(() => unref(dataTable).dataViewRequest);
-
-    const loadingRecords = ref(false);
-
-    const isShowDialog = ref(false);
-
-    const modelValue = computed({
-      get: () => props.modelValue,
-      set: (v) => emit("update:model-value", v),
-    });
-
-    const values = ref(unref(modelValue));
-
-    const primaryFieldName = computed(
-      () => props.primaryFieldName ?? unref(dataTable).primaryKey
-    );
-
-    const loadRecords = async () => {
-      try {
-        loadingRecords.value = true;
-
-        const _dataTable = unref(dataTable);
-
-        const selection = unref(values);
-
-        const recordIds = Array.isArray(selection)
-          ? selection
-          : selection
-          ? [selection]
-          : [];
-
-        let existingRecords = _dataTable!
-          .getList()
-          .filter((item) => recordIds.includes(item[unref(primaryFieldName)]));
-
-        if (existingRecords.length !== recordIds.length) {
-          const notExistingRecords = recordIds.filter(
-            (id) =>
-              !existingRecords.find(
-                (item) => item[unref(primaryFieldName)] === id
-              )
-          );
-
-          const where = new Where();
-          where.addCondition(
-            unref(primaryFieldName),
-            "in",
-            `(${notExistingRecords.map((id) => JSON.stringify(id)).join(",")})`
-          );
-
-          const response = await unref(dataViewRequest).allList({
-            data: { condition: where },
-          });
-
-          if (response.data.code !== 200) {
-            return existingRecords;
-          }
-
-          existingRecords = [...existingRecords, ...response.data.data];
-        }
-
-        return recordIds.map((id) =>
-          existingRecords.find((item) => item[unref(primaryFieldName)] === id)
-        );
-      } finally {
-        loadingRecords.value = false;
-      }
-    };
-
-    const currentRecords: Ref<any[]> = ref([]);
-
-    watch(
-      computed(() => props.multiple),
-      (multiple) => {
-        values.value = multiple ? [] : null;
-      }
-    );
-
-    watch(
-      modelValue,
-      async (modelValue) => {
-        let _values: any;
-        if (props.objectValue) {
-          _values = props.multiple
-            ? modelValue?.map(
-                (item: any) => item[unref(dataTable).primaryKey]
-              ) ?? []
-            : modelValue?.[unref(dataTable).primaryKey] ?? null;
-        } else {
-          _values = modelValue;
-        }
-
-        if (!isEqual(_values, unref(values))) {
-          values.value = _values;
-        }
-      },
-      { immediate: true }
-    );
-
-    watch(
-      values,
-      async (values) => {
-        currentRecords.value = await loadRecords();
-
-        emit("recordsChange", currentRecords.value);
-
-        if (modelValue.value !== values) {
-          if (props.objectValue) {
-            modelValue.value = props.multiple
-              ? [...currentRecords.value]
-              : currentRecords.value[0] ?? null;
-          } else {
-            modelValue.value = values;
-          }
-        }
-      },
-      { immediate: true }
-    );
-
-    const options = computed(() =>
-      unref(currentRecords).map((record) => ({
-        value: record[unref(dataTable)!.primaryKey],
-        label: record[props.labelFieldName],
-        isDisabled: true,
-      }))
-    );
-
-    return () => {
-      const _options = unref(options);
-
-      return (
-        <Fragment>
-          <span
-            class="mk-data-table-select"
-            onMousedown={(e: MouseEvent) => {
-              if (!props.disabled) {
-                isShowDialog.value = true;
-              }
-            }}
-          >
-            <ElSelect
-              disabled={props.disabled}
-              multiple={props.multiple}
-              loading={unref(loadingRecords)}
-              suffixIcon={Grid}
-              popperClass="mk-data-table-select__popper"
-              clearable
-              modelValue={props.multiple ? _options : _options[0] ?? null}
-            />
-          </span>
-          <MKDataTableSelectDialog
-            dataTable={unref(props.dataTable)}
-            multiple={props.multiple}
-            modelValue={unref(isShowDialog)}
-            onUpdate:model-value={(v: boolean) => (isShowDialog.value = v)}
-            selection={unref(modelValue)}
-            onUpdate:selection={(v: any) => (values.value = v)}
-          />
-        </Fragment>
-      );
-    };
-  },
-});

package/src/components/data-table-select/index.ts

@@ -1,6 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import DataTableSelect from "./data-table-select";
-
-export const MKDataTableSelect = withInstall(DataTableSelect);
-
-export default MKDataTableSelect;

package/src/components/data-table-select-dialog/data-table-select-dialog-options.ts

@@ -1,33 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-import { DataTable } from "@maketribe/dm";
-
-export const dataTableSelectDialogProps = buildProps({
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-  selection: {
-    type: null,
-  },
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-  dataTable: {
-    type: DataTable<any>,
-    required: true,
-  },
-} as const);
-
-export type DataTableSelectDialogProps = ExtractPropTypes<
-  typeof dataTableSelectDialogProps
->;
-
-export const dataTableSelectDialogEmits = {
-  "update:model-value": (modelValue: any) => typeof modelValue === "boolean",
-  "update:selection": (modelValue: any) => true,
-  confirm: () => true,
-};
-
-export const DataTableSelectDialogEmits = typeof dataTableSelectDialogEmits;

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

@@ -1,154 +0,0 @@
-import {
-  defineComponent,
-  Fragment,
-  computed,
-  unref,
-  watch,
-  Ref,
-  ref,
-} from "vue";
-import { ElButton, ElDialog } from "element-plus";
-import { MKDataTable } from "../data-model";
-
-import {
-  dataTableSelectDialogEmits,
-  dataTableSelectDialogProps,
-} from "./data-table-select-dialog-options";
-import { DataTable, TableSelectCacheColumn } from "@maketribe/dm";
-
-export default defineComponent({
-  name: "MKDataTableSelectDialog",
-  props: dataTableSelectDialogProps,
-  emits: dataTableSelectDialogEmits,
-  setup(props, { emit }) {
-    const dataTable: Ref<DataTable | null> = ref(null);
-
-    const loading = computed(() => unref(dataTable)!.loading);
-
-    const isShowDialog = computed({
-      get: () => props.modelValue,
-      set: (v) => emit("update:model-value", v),
-    });
-
-    const handleConfirm = () => {
-      if (props.multiple) {
-        emit("update:selection", unref(dataTable)!.getSelection());
-      } else {
-        emit("update:selection", unref(dataTable)!.getSelection()[0] || "");
-      }
-
-      isShowDialog.value = false;
-
-      emit("confirm");
-    };
-
-    const handleCancel = () => {
-      isShowDialog.value = false;
-    };
-
-    watch(
-      computed(() => props.dataTable),
-      (table) => {
-        dataTable.value = table;
-        dataTable.value.setSelectionColumn(
-          new TableSelectCacheColumn({ multiple: props.multiple })
-        );
-      },
-      { immediate: true }
-    );
-
-    watch(
-      computed(() => props.multiple),
-      (multiple) => {
-        if (dataTable.value) {
-          dataTable.value.selectionColumn.multiple = multiple;
-        }
-      }
-    );
-
-    watch(
-      isShowDialog,
-      (isShowDialog, _, onCleanup) => {
-        const _dataTable = unref(dataTable)!;
-
-        if (!isShowDialog) {
-          _dataTable.clearSelection();
-          return;
-        }
-
-        const handleColumnState = () => {
-          const selection = props.selection;
-          _dataTable.setSelection(
-            Array.isArray(selection) ? selection : selection ? [selection] : []
-          );
-
-          const actionColumn = _dataTable.getColumn("$action");
-
-          if (actionColumn) {
-            actionColumn.visible = false;
-          }
-        };
-
-        if (_dataTable.initd) {
-          handleColumnState();
-          return;
-        }
-
-        const disposable = _dataTable.initdEvent.once(handleColumnState);
-
-        onCleanup(() => {
-          disposable.dispose();
-        });
-      },
-      { immediate: true }
-    );
-
-    watch(
-      computed(() => props.selection),
-      (selection) => {
-        if (props.multiple) {
-          unref(dataTable)?.setSelection(
-            Array.isArray(selection) ? selection : []
-          );
-        } else {
-          unref(dataTable)?.setSelection(selection ? [selection] : []);
-        }
-      }
-    );
-
-    return () => {
-      return (
-        <ElDialog
-          class="mk-data-table-select-dialog"
-          width="80%"
-          appendToBody
-          modelValue={unref(isShowDialog)}
-          onUpdate:modelValue={(v) => {
-            isShowDialog.value = v;
-          }}
-          v-slots={{
-            default: () =>
-              // TODO 后面需要做成不是否重新渲染DOM,现在主要是选中有问题。在multiple切换的时候
-              unref(isShowDialog) ? (
-                <div class="mk-data-table-select-dialog__main">
-                  <MKDataTable
-                    v-loading={unref(loading)}
-                    dataTable={unref(dataTable)!}
-                    selection
-                  />
-                </div>
-              ) : null,
-            footer: () => (
-              <Fragment>
-                <ElButton type="primary" onClick={handleConfirm}>
-                  确定
-                </ElButton>
-                <ElButton onClick={handleCancel}>取消</ElButton>
-              </Fragment>
-            ),
-          }}
-        />
-      );
-    };
-  },
-});

package/src/components/data-table-select-dialog/index.ts

@@ -1,7 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import DataTableSelectDialog from "./data-table-select-dialog";
-
-export const MKDataTableSelectDialog = withInstall(DataTableSelectDialog);
-export default MKDataTableSelectDialog;
-
-export * from "./data-table-select-dialog-options";

package/src/components/file-view/file-view-options.ts

@@ -1,8 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-
-export const fileViewProps = buildProps({
-  src: { type: String, required: true },
-} as const);
-
-export type FileViewProps = ExtractPropTypes<typeof fileViewProps>;

package/src/components/file-view/file-view.tsx

@@ -1,40 +0,0 @@
-import { defineComponent } from "vue";
-import { ElButton, ElIcon } from "element-plus";
-import { Document, Download } from "@element-plus/icons-vue";
-import { fileViewProps } from "./file-view-options";
-
-export default defineComponent({
-  name: "MKFileView",
-  props: fileViewProps,
-  setup(props) {
-    const handleDownloadClick = () => {
-      const a = document.createElement("a");
-      a.setAttribute("download", new Date().getTime().toString());
-      a.target = "_blank";
-      a.href = props.src;
-      Object.assign(a.style, { width: "1px", height: "1px" });
-
-      document.body.append(a);
-      a.click();
-
-      setTimeout(() => {
-        document.body.removeChild(a);
-      });
-    };
-
-    return () => (
-      <div class="mk-file-view">
-        <ElIcon size="20">
-          <Document />
-        </ElIcon>
-        <div class="mk-file-view__tools">
-          <ElButton
-            type="primary"
-            icon={Download}
-            onClick={handleDownloadClick}
-          />
-        </div>
-      </div>
-    );
-  },
-});

package/src/components/file-view/index.ts

@@ -1,7 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import FileView from "./file-view";
-
-export const MKFileView = withInstall(FileView);
-export default MKFileView;
-
-export * from "./file-view-options";

package/src/components/form-components/form-data-select/form-data-select-options.ts

@@ -1,23 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-import { DataTable } from "@maketribe/dm";
-import { columnProps } from "../../data-model/data-form/composables";
-
-export const formDataSelectProps = buildProps({
-  ...columnProps,
-  source: {
-    type: Object,
-  },
-  options: {
-    type: Array,
-  },
-  dataTable: {
-    type: DataTable<any>,
-  },
-  formatOptions: {
-    type: Function,
-    default: (value: any) => value as any,
-  },
-} as const);
-
-export type FormDataSelectProps = ExtractPropTypes<typeof formDataSelectProps>;

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

@@ -1,28 +0,0 @@
-import { computed, defineComponent, unref } from "vue";
-
-import { useFormItem } from "../../data-model/data-form/composables";
-import { formDataSelectProps } from "./form-data-select-options";
-import { MKDataSelect } from "../../data-select";
-
-export type DataOptionItem = { value: any; label: string };
-
-export default defineComponent({
-  name: "MKFormDataSelect",
-  props: formDataSelectProps,
-  setup(props) {
-    const { value, column, disabled } = useFormItem();
-
-    return () => {
-      return (
-        <MKDataSelect
-          disabled={unref(disabled)}
-          modelValue={unref(value)}
-          dataTable={props.dataTable}
-          options={props.options}
-          source={props.source}
-          onUpdate:model-value={(v: any) => (value.value = v)}
-        />
-      );
-    };
-  },
-});

package/src/components/form-components/form-data-select/index.ts

@@ -1,7 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import FormDataSelect from "./form-data-select";
-
-export const MKFormDataSelect = withInstall(FormDataSelect);
-export default MKFormDataSelect;
-
-export * from "./form-data-select-options";

package/src/components/form-components/form-data-table-select/form-data-table-select-options.ts

@@ -1,19 +0,0 @@
-import { DataTable } from "@maketribe/dm";
-import { buildProps } from "@maketribe/utils";
-import { columnProps } from "../../data-model/data-form/composables";
-
-export const formDataTableSelectProps = buildProps({
-  ...columnProps,
-  labelFieldName: {
-    type: String,
-    required: true,
-  },
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-  dataTable: {
-    type: DataTable<any>,
-    required: true,
-  },
-} as const);

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

@@ -1,32 +0,0 @@
-import { computed, defineComponent, unref } from "vue";
-import { MKDataTableSelect } from "../../data-table-select";
-import { formDataTableSelectProps } from "./form-data-table-select-options";
-import { useFormItem } from "../../data-model/data-form/composables";
-
-export default defineComponent({
-  name: "MKFormDataTableSelect",
-  props: formDataTableSelectProps,
-  setup(props) {
-    const { column, value, disabled } = useFormItem();
-
-    const handleRecordsChange = (records: any[]) => {
-      const _column = unref(column);
-
-      if (_column) {
-        _column.additionalEventData = { records };
-      }
-    };
-
-    return () => {
-      return (
-        <MKDataTableSelect
-          modelValue={unref(value)}
-          disabled={unref(disabled)}
-          onUpdate:model-value={(v) => (value.value = v)}
-          onRecordsChange={handleRecordsChange}
-          {...props}
-        />
-      );
-    };
-  },
-});

package/src/components/form-components/form-data-table-select/index.ts

@@ -1,7 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import FormDataTableSelect from "./form-data-table-select";
-
-export const MKFormDataTableSelect = withInstall(FormDataTableSelect);
-export default MKFormDataTableSelect;
-
-export * from "./form-data-table-select-options";

package/src/components/form-components/form-date-picker/form-date-picker-options.ts

@@ -1,18 +0,0 @@
-import { buildProps } from "@maketribe/utils";
-import { columnProps } from "../../data-model/data-form/composables";
-import { ExtractPropTypes } from "vue";
-
-export const datePickerTypes = ["date", "year", "month", "datetime"] as const;
-
-export const formDatePickerProps = buildProps({
-  ...columnProps,
-  type: {
-    default: "date",
-    values: datePickerTypes,
-  },
-  valueFormat: {
-    type: String,
-  },
-});
-
-export type FormDatePickerProps = ExtractPropTypes<typeof formDatePickerProps>;

package/src/components/form-components/form-date-picker/form-date-picker.tsx

@@ -1,49 +0,0 @@
-import { computed, defineComponent, unref } from "vue";
-import { ElDatePicker } from "element-plus";
-import {
-  datePickerTypes,
-  formDatePickerProps,
-} from "./form-date-picker-options";
-import { useFormItem } from "../../data-model/data-form/composables";
-
-export default defineComponent({
-  name: "MKFormDatePicker",
-  props: formDatePickerProps,
-  setup(props) {
-    const { value, disabled } = useFormItem();
-
-    const type = computed(() =>
-      datePickerTypes.includes(props.type) ? props.type : "date"
-    );
-
-    const valueFormat = computed(() => {
-      if (props.valueFormat) {
-        return props.valueFormat;
-      }
-
-      switch (unref(type)) {
-        case "datetime":
-          return "YYYY-MM-DD HH:mm:ss";
-        case "month":
-          return "YYYY-MM";
-        case "year":
-          return "YYYY";
-        default:
-          return "YYYY-MM-DD";
-      }
-    });
-
-    return () => {
-      return (
-        <ElDatePicker
-          class="mk-form-date-picker"
-          type={unref(type)}
-          valueFormat={unref(valueFormat)}
-          disabled={unref(disabled)}
-          modelValue={unref(value)}
-          onUpdate:modelValue={(v: any) => (value.value = v)}
-        />
-      );
-    };
-  },
-});

package/src/components/form-components/form-date-picker/index.ts

@@ -1,8 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import FormDatePicker from "./form-date-picker";
-
-export const MKFormDatePicker = withInstall(FormDatePicker);
-
-export default MKFormDatePicker;
-
-export * from "./form-date-picker-options";

package/src/components/form-components/form-detail/form-detail-options.ts

@@ -1,15 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-import { FormDetailColumn } from "@maketribe/dm";
-import { columnProps } from "../../data-model/data-form/composables";
-
-export const formDetailProps = buildProps({
-  ...columnProps,
-  column: { type: FormDetailColumn, required: true },
-  formWidth: {
-    type: String,
-    default: "400px",
-  },
-} as const);
-
-export type FormDetailProps = ExtractPropTypes<typeof formDetailProps>;