@maketribe/ms-app 3.0.38 → 3.0.40

package/src/components/material-list/material-group-form-popover.vue

@@ -1,78 +0,0 @@
-<template>
-  <ElPopover
-    v-model:visible="visible"
-    title="添加素材分组"
-    effect="light"
-    placement="right"
-    trigger="click"
-    width="320"
-  >
-    <template #reference>
-      <slot></slot>
-    </template>
-
-    <div>
-      <MKDataForm :data-form="materialGroupForm" v-loading="loading">
-        <MKForm :data-form="materialGroupForm" />
-      </MKDataForm>
-      <div
-        style="
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-        "
-      >
-        <ElButton
-          type="primary"
-          :loading="!allowSubmit"
-          @click="handleSaveClick"
-        >
-          保存
-        </ElButton>
-        <ElButton @click="handleCancelClick">取消</ElButton>
-      </div>
-    </div>
-  </ElPopover>
-</template>
-
-<script setup lang="ts">
-import { Ref, computed, ref, unref } from "vue";
-import { ElMessage } from "element-plus";
-import { MKDataForm, MKForm } from "../data-model/data-form";
-import { MaterialGroupForm, MaterialMan } from "../../dataview/material";
-
-const props = defineProps({
-  materialMan: {
-    type: MaterialMan,
-    required: true,
-  },
-  materialGroupForm: {
-    type: MaterialGroupForm,
-    required: true,
-  },
-});
-
-const visible: Ref<boolean> = ref(false);
-
-const loading = computed(() => props.materialGroupForm.loading);
-const allowSubmit = computed(
-  () => !!(unref(loading) || !props.materialGroupForm.allowSubmit)
-);
-
-const handleSaveClick = async () => {
-  const result = await props.materialGroupForm.submit();
-
-  if (result.data.code !== 200) {
-    ElMessage.error(result.data.msg);
-    return;
-  }
-
-  props.materialMan.materialGroupTree.load();
-
-  visible.value = false;
-};
-
-const handleCancelClick = () => {
-  visible.value = false;
-};
-</script>

package/src/components/material-list/material-group.vue

@@ -1,145 +0,0 @@
-<template>
-  <div class="mk-material-group" v-loading="loading">
-    <div class="mk-material-group__header">
-      <div class="mk-material-group__header-title">素材分组</div>
-      <MaterialGroupFromPopper
-        :material-man="materialMan"
-        :material-group-form="materialGroupForm"
-      >
-        <ElButton
-          @click="handleAddClick"
-          :icon="Plus"
-          size="small"
-          type="primary"
-        >
-        </ElButton>
-      </MaterialGroupFromPopper>
-    </div>
-    <div class="mk-material-group__main">
-      <ElScrollbar height="100%">
-        <MKDataTable
-          :auto-load="false"
-          :data-table="materialGroupTree"
-          highlight-current
-        >
-          <MKTree :data-tree="materialGroupTree" @nodeClick="handleNodeClick">
-            <template #node-tools="{ data }">
-              <div class="mk-material-group__tools" @click.stop>
-                <ElTooltip content="添加">
-                  <span class="mk-material-group__tools-item">
-                    <MaterialGroupFromPopper
-                      :material-man="materialMan"
-                      :material-group-form="materialGroupForm"
-                    >
-                      <ElIcon @click="handleAddClick(data.data)">
-                        <Plus />
-                      </ElIcon>
-                    </MaterialGroupFromPopper>
-                  </span>
-                </ElTooltip>
-                <ElTooltip content="编辑">
-                  <span class="mk-material-group__tools-item">
-                    <MaterialGroupFromPopper
-                      :material-man="materialMan"
-                      :material-group-form="materialGroupForm"
-                    >
-                      <ElIcon @click="handleEditClick(data.data)">
-                        <Edit />
-                      </ElIcon>
-                    </MaterialGroupFromPopper>
-                  </span>
-                </ElTooltip>
-                <ElTooltip content="删除">
-                  <span class="mk-material-group__tools-item">
-                    <ElIcon @click="handleDeleteClick(data.data)">
-                      <Delete />
-                    </ElIcon>
-                  </span>
-                </ElTooltip>
-              </div>
-            </template>
-          </MKTree>
-        </MKDataTable>
-      </ElScrollbar>
-    </div>
-    <div class="mk-material-group__footer"></div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, nextTick, reactive } from "vue";
-import { ElMessage, ElMessageBox } from "element-plus";
-import { Plus, Edit, Delete } from "@element-plus/icons-vue";
-import {
-  MaterialMan,
-  MaterialGroupNode,
-  MaterialGroupForm,
-} from "../../dataview";
-import { MKDataTable, MKTree } from "../data-model/data-table";
-
-import { useI18n } from "../../composables";
-import MaterialGroupFromPopper from "./material-group-form-popover.vue";
-import { DataTreeNode } from "@maketribe/dm";
-
-const props = defineProps({
-  materialMan: {
-    type: MaterialMan,
-    required: true,
-  },
-});
-
-const i18n = useI18n()!;
-
-const materialGroupForm = reactive(
-  new MaterialGroupForm()
-) as MaterialGroupForm;
-
-const materialGroupTree = computed(() => props.materialMan.materialGroupTree);
-
-const loading = computed(() => props.materialMan.materialGroupTree.loading);
-
-const handleNodeClick = (item: DataTreeNode<MaterialGroupNode>) => {
-  if (!item.children.length) {
-    props.materialMan.setCurrentMaterialGroup(item.data);
-  }
-};
-
-const handleAddClick = async (parent?: MaterialGroupNode) => {
-  materialGroupForm.addRecord();
-
-  await nextTick();
-
-  materialGroupForm.setData({
-    ...materialGroupForm.data,
-    parentGroupId: parent?.id || null,
-  } as MaterialGroupNode);
-};
-
-const handleEditClick = (item: MaterialGroupNode) => {
-  materialGroupForm.editRecord(item);
-};
-
-const handleDeleteClick = async (item: MaterialGroupNode) => {
-  const isConfirm = await ElMessageBox.confirm(
-    i18n.translate("mk.dataTablePage.deleteMessage"),
-    i18n.translate("mk.dataTablePage.deleteTitle"),
-    { type: "warning" }
-  ).then(
-    () => true,
-    () => false
-  );
-
-  if (!isConfirm) {
-    return;
-  }
-
-  const result = await props.materialMan.materialGroupTree.deleteAfterRefresh(
-    item
-  );
-
-  if (result.data.code !== 200) {
-    ElMessage.error(result.data.msg);
-    return;
-  }
-};
-</script>

package/src/components/material-list/material-item.vue

@@ -1,26 +0,0 @@
-<template>
-  <ElCard class="mk-material-item" shadow="never">
-    <div class="mk-material-item__preview">
-      <MaterialComponent :src="material.path" />
-    </div>
-    <div class="mk-material-item__title">{{ material.desc }}</div>
-  </ElCard>
-</template>
-
-<script setup lang="ts">
-import { Material, MaterialTable } from "../../dataview";
-import { computed, toRaw } from "vue";
-
-const props = defineProps({
-  materialTable: { type: MaterialTable, required: true },
-  material: { type: Object, required: true },
-});
-
-const MaterialComponent = computed(() => {
-  const component =
-    props.materialTable.resolveMaterialComponent(props.material as Material) ||
-    props.materialTable.materialComponents.resolveComponent("MKFileView")!;
-
-  return toRaw(component.component);
-});
-</script>

package/src/components/material-list/material-list-options.ts

@@ -1,24 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-import { Material, MaterialMan } from "../../dataview";
-
-export const materialListProps = buildProps({
-  materialMan: {
-    type: MaterialMan,
-    required: true,
-  },
-  selectable: {
-    type: Boolean,
-    default: false,
-  },
-  selectedPath: {
-    type: String,
-  },
-} as const);
-
-export type MaterialListProps = ExtractPropTypes<typeof materialListProps>;
-
-export const materialListEmits = {
-  "update:selected-path": (path: any) => true,
-  selectedChange: (material: Material) => true,
-};

package/src/components/material-list/material-list.vue

@@ -1,153 +0,0 @@
-<template>
-  <div class="mk-material-list">
-    <MaterialGroup :material-man="materialMan" />
-    <div class="mk-material-list__main" v-loading="loading">
-      <div class="mk-material-list__header">
-        <div class="mk-material-list__header-left">
-          <div class="mk-material-list__types">
-            <div
-              v-for="item of materialTypes"
-              :key="item.value"
-              :class="[
-                'mk-material-list__type',
-                currentMaterialTypeId === item.value ? 'is-active' : '',
-              ]"
-              @click="handleMaterialTypeClick(item)"
-            >
-              {{ item.label }}
-            </div>
-          </div>
-        </div>
-        <div class="mk-material-list__header-right">
-          <template v-if="currentMaterialType">
-            {{ currentMaterialType.label }}大小不超过
-            {{ currentMaterialType.limit }} M
-            <MKWebFileUploadContext
-              :web-file-upload="materialMan.upload"
-              :accept="currentMaterialType.accept"
-            >
-              <MKUploadFile>
-                <ElButton type="primary">
-                  选择{{ currentMaterialType.label }}
-                </ElButton>
-              </MKUploadFile>
-            </MKWebFileUploadContext>
-          </template>
-        </div>
-      </div>
-
-      <div class="mk-material-list__body">
-        <ElScrollbar height="100%">
-          <div class="mk-material-list__wrapper">
-            <MaterialItem
-              v-for="material of materialList"
-              :key="material.id"
-              :class="[
-                'mk-material-list__item',
-                value === material.path ? 'is-current' : '',
-              ]"
-              :material-table="materialTable"
-              :material="material"
-              @click.capture="handleMaterialItemClick($event, material)"
-            />
-          </div>
-        </ElScrollbar>
-        <div class="mk-material-list__footer">
-          <ElPagination
-            class="mk-data-table-pagination"
-            :background="true"
-            :pageSizes="unref(pageSizes)"
-            :currentPage="unref(currentPage)"
-            :pageSize="unref(pageSize)"
-            :total="unref(totalRecCount)"
-            layout="prev, pager, next"
-            @current-change="changeCurrentPage"
-            @size-change="changePageSize"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, unref } from "vue";
-import { ElPagination } from "element-plus";
-// import { MKUploadFile } from "../upload-file/upload-file";
-// import { MKWebFileUploadContext } from "../upload-file/context/web-file-upload-context";
-import { MaterialType, Material } from "../../dataview";
-import MaterialGroup from "./material-group.vue";
-import MaterialItem from "./material-item.vue";
-import { materialListProps, materialListEmits } from "./material-list-options";
-
-defineOptions({ name: "MKMaterialList" });
-
-const props = defineProps(materialListProps);
-
-const emit = defineEmits(materialListEmits);
-
-props.materialMan.init();
-
-const loading = computed(() => props.materialMan.materialTable.loading);
-
-const value = computed({
-  get: () => {
-    return props.selectable ? props.selectedPath ?? null : null;
-  },
-  set: (v) => {
-    emit("update:selected-path", v);
-  },
-});
-
-const materialTable = computed(() => props.materialMan.materialTable);
-const pageSizes = computed(() => unref(materialTable).pageSizes);
-const currentPage = computed({
-  get: () => unref(materialTable).currentPage,
-  set: (v) => {
-    unref(materialTable).pageTo(v);
-  },
-});
-const pageSize = computed({
-  get: () => unref(materialTable).pageSize,
-  set: (v) => {
-    unref(materialTable).setPageSize(v);
-  },
-});
-const totalRecCount = computed(() => unref(materialTable).totalRecCount);
-const changeCurrentPage = (v: number) => {
-  currentPage.value = v;
-};
-const changePageSize = (v: number) => {
-  pageSize.value = v;
-};
-
-const materialList = computed(() => unref(materialTable).getList());
-const materialTypes = computed(() => props.materialMan.getMaterialType());
-const currentMaterialTypeId = computed(
-  () => props.materialMan.currentMaterialTypeId
-);
-
-const currentMaterialType = computed(
-  () => props.materialMan.currentMaterialType
-);
-
-const handleMaterialTypeClick = (materialType: MaterialType) => {
-  if (materialType.value === unref(currentMaterialTypeId)) {
-    return;
-  }
-
-  props.materialMan.setCurrentMaterialTypeId(materialType.value);
-};
-
-const handleMaterialItemClick = (event: MouseEvent, material: Material) => {
-  if (!props.selectable) {
-    return;
-  }
-
-  event.preventDefault();
-  event.stopPropagation();
-
-  value.value = material.path;
-  emit("selectedChange", material);
-};
-</script>

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

@@ -1,17 +0,0 @@
-import { App } from "vue";
-import { SFCWithInstall } from "@maketribe/utils";
-import MaterialSelect from "./material-select-api";
-
-const _MaterialSelect = MaterialSelect as SFCWithInstall<
-  typeof MaterialSelect
-> &
-  typeof MaterialSelect;
-
-_MaterialSelect.install = (app: App) => {
-  _MaterialSelect._context = app._context;
-};
-
-export default _MaterialSelect;
-export const MKMaterialSelect = _MaterialSelect;
-
-export * from "./material-select-type";

package/src/components/material-select/material-select-api.ts

@@ -1,55 +0,0 @@
-import { AppContext, createVNode, render } from "vue";
-import MaterialSelectConstructor from "./material-select";
-import type {
-  IMKMaterialSelect,
-  MKMaterialSelectOptions,
-} from "./material-select-type";
-import { Material } from "../../dataview";
-
-const initInstance = (
-  props: any,
-  container: HTMLElement,
-  appContext: AppContext | null = null
-) => {
-  const vnode = createVNode(MaterialSelectConstructor, props);
-
-  vnode.appContext = appContext;
-
-  render(vnode, container);
-
-  return vnode.component;
-};
-
-const showDialog = (options: any, appContext?: AppContext | null) => {
-  const container = document.createElement("div");
-
-  const instance = initInstance(options, container, appContext)!;
-
-  return instance.proxy;
-};
-
-async function MaterialSelect(
-  options?: MKMaterialSelectOptions,
-  appContext?: AppContext
-) {
-  options?.allowMaterialTypeValues;
-  return new Promise((resolve, reject) => {
-    showDialog(
-      {
-        ...options,
-        allowMaterialTypeValues: options?.allowMaterialTypeValues ?? ["1"],
-        onMaterialChange: (material: Material) => {
-          resolve({ success: true, data: material, path: material.path });
-        },
-        onCancel: () => {
-          resolve({ success: false, data: null, path: "" });
-        },
-      },
-      appContext ?? (MaterialSelect as unknown as IMKMaterialSelect)._context
-    );
-  });
-}
-
-(MaterialSelect as IMKMaterialSelect)._context = null;
-
-export default MaterialSelect as IMKMaterialSelect;

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

@@ -1,22 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { Material, MaterialMan, MaterialType } from "../../dataview";
-import { buildProps } from "@maketribe/utils";
-
-export const materialSelectProps = buildProps({
-  materialMan: { type: MaterialMan },
-  modelValue: { type: String },
-  allowMaterialTypeValues: {
-    type: Array<MaterialType["value"]>,
-  },
-});
-
-export type MaterialSelectProps = ExtractPropTypes<typeof materialSelectProps>;
-
-export const materialSelectEmits = {
-  materialChange: (material: Material) => true,
-  "update:model-value": (path: any) => typeof path === "string",
-  select: (path: any) => typeof path === "string",
-  cancel: () => true,
-};
-
-export const MaterialSelectEmits = typeof materialSelectEmits;

package/src/components/material-select/material-select-type.ts

@@ -1,21 +0,0 @@
-import { Material, MaterialMan, MaterialType } from "../../dataview";
-import type { AppContext } from "vue";
-
-export interface MKMaterialSelectOptions {
-  materialMan?: MaterialMan;
-  allowMaterialTypeValues: MaterialType["value"][];
-}
-
-export type MaterialSelectResult = {
-  success: boolean;
-  data: Material | null;
-  path: string;
-};
-
-export interface IMKMaterialSelect {
-  (
-    options?: MKMaterialSelectOptions,
-    appContext?: AppContext
-  ): Promise<MaterialSelectResult>;
-  _context: AppContext | null;
-}

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

@@ -1,106 +0,0 @@
-import {
-  Ref,
-  computed,
-  defineComponent,
-  reactive,
-  ref,
-  unref,
-  watch,
-} from "vue";
-import { ElDialog, ElButton } from "element-plus";
-import MaterialList from "../material-list/material-list.vue";
-import {
-  materialSelectEmits,
-  materialSelectProps,
-} from "./material-select-options";
-import { MSAppClient, MaterialComponents } from "../../core";
-import { Material, MaterialMan } from "../../dataview";
-
-export default defineComponent({
-  name: "MKMaterialSelect",
-  props: materialSelectProps,
-  emits: materialSelectEmits,
-  setup(props, { emit }) {
-    const materialMan =
-      props.materialMan ??
-      (reactive(
-        new MaterialMan({
-          components: new MaterialComponents(),
-          httpRequest: MSAppClient.instance!.httpRequest,
-        })
-      ) as MaterialMan);
-
-    const selectedPath = ref("");
-    const selectedMaterial: Ref<Material | null> = ref(null);
-    const visible: Ref<boolean> = ref(true);
-
-    watch(
-      computed(() => props.modelValue),
-      (modelValue) => {
-        selectedPath.value = modelValue || "";
-      },
-      { immediate: true }
-    );
-
-    watch(
-      computed(() => props.allowMaterialTypeValues),
-      (allowMaterialTypeValues) => {
-        materialMan.setAllowAccessMaterialTypeValues(
-          allowMaterialTypeValues ?? []
-        );
-      },
-      { immediate: true }
-    );
-
-    const handleConfirmClick = () => {
-      visible.value = false;
-      emit("update:model-value", unref(selectedPath));
-      emit("select", unref(selectedPath));
-      emit("materialChange", unref(selectedMaterial)!);
-    };
-
-    const handleCancelClick = () => {
-      visible.value = false;
-      emit("cancel");
-    };
-
-    return () => {
-      return (
-        <ElDialog
-          width="70%"
-          modelValue={unref(visible)}
-          onUpdate:modelValue={(v: boolean) => {
-            visible.value = v;
-          }}
-          destroyOnClose
-          appendToBody
-          showClose={false}
-          modal-class="mk-material-select"
-          v-slots={{
-            footer: () => {
-              return (
-                <span class="mk-material-select__footer">
-                  <ElButton type="primary" onClick={handleConfirmClick}>
-                    确定
-                  </ElButton>
-                  <ElButton onClick={handleCancelClick}>取消</ElButton>
-                </span>
-              );
-            },
-          }}
-        >
-          <MaterialList
-            selectedPath={unref(selectedPath)}
-            onSelectedChange={(material: Material) => {
-              selectedPath.value = material.path;
-              selectedMaterial.value = material;
-            }}
-            class="mk-material-select__list"
-            materialMan={materialMan}
-            selectable={true}
-          />
-        </ElDialog>
-      );
-    };
-  },
-});

package/src/components/pagination/index.ts

@@ -1,7 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import Pagination from "./pagination";
-
-export const MKPagination = withInstall(Pagination);
-export default MKPagination;
-
-export * from "./pagination-options";

package/src/components/pagination/pagination-options.tsx

@@ -1,30 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-
-export const paginationProps = buildProps({
-  total: {
-    type: Number,
-    required: true,
-  },
-  currentPage: {
-    type: Number,
-    required: true,
-  },
-  pageSize: {
-    type: Number,
-    required: true,
-  },
-  pageSizes: {
-    type: Array<number>,
-    required: true,
-  },
-} as const);
-
-export type PaginationProps = ExtractPropTypes<typeof paginationProps>;
-
-export const paginationEmits = {
-  "update:currentPage": (currentPage: any) => typeof currentPage === "number",
-  "update:pageSize": (pageSize: any) => typeof pageSize === "number",
-};
-
-export type PaginationEmits = typeof paginationEmits;