@maketribe/ms-app 3.0.27 → 3.0.29

package/src/components/index.ts

@@ -1,23 +0,0 @@
-export * from "./data-model";
-export * from "./form-components";
-export * from "./column-components";
-export * from "./condition-components";
-export * from "./svg-icon";
-export * from "./config-provider";
-export * from "./image-view";
-export * from "./video-view";
-export * from "./file-view";
-export * from "./data-table-select-dialog";
-export * from "./data-table-select";
-export * from "./data-select";
-export * from "./pagination";
-export * from "./markdown-editor";
-export * from "./rich-text-editor";
-export * from "./system-provider";
-export * from "./material-list";
-export * from "./material-select";
-export * from "./role-permission-config";
-export * from "./image-select";
-export * from "./verify-dialog";
-export * from "./json-editor";
-export * from "./upload-file";

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

@@ -1,8 +0,0 @@
-import { defineAsyncComponent } from "vue";
-import { withInstall } from "@maketribe/utils";
-
-export const MKJsonEditor = withInstall(
-  defineAsyncComponent(() => import("./json-editor"))
-);
-
-export default MKJsonEditor;

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

@@ -1,21 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-
-export const jsonEditorProps = buildProps({
-  modelValue: {
-    type: null,
-    required: true,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-} as const);
-
-export type JsonEditorProps = ExtractPropTypes<typeof jsonEditorProps>;
-
-export const jsonEditorEmits = {
-  "update:model-value": (modelValue: string) => true,
-};
-
-export type jsonEditorEmits = typeof jsonEditorEmits;

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

@@ -1,28 +0,0 @@
-import { computed, defineComponent, unref } from "vue";
-import { Codemirror } from "vue-codemirror";
-import { json } from "@codemirror/lang-json";
-import { jsonEditorEmits, jsonEditorProps } from "./json-editor-options";
-
-export default defineComponent({
-  name: "MKJsonEditor",
-  props: jsonEditorProps,
-  emits: jsonEditorEmits,
-  setup(props, { emit }) {
-    const modelValue = computed({
-      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}
-          extensions={[json()]}
-        />
-      );
-    };
-  },
-});

package/src/components/markdown-editor/index.ts

@@ -1,10 +0,0 @@
-import { defineAsyncComponent } from "vue";
-import { withInstall } from "@maketribe/utils";
-
-const _MarkdownEditor = defineAsyncComponent(() => import("./markdown-editor"));
-
-export const MKMarkdownEditor = withInstall(_MarkdownEditor);
-
-export default MKMarkdownEditor;
-
-export * from "./markdown-editor-options";

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

@@ -1,17 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-
-export const markdownEditorProps = buildProps({
-  modelValue: {
-    type: String,
-    required: true,
-  },
-} as const);
-
-export type MarkdownEditorProps = ExtractPropTypes<typeof markdownEditorProps>;
-
-export const markdownEditorEmits = {
-  "update:model-value": (modelValue: string) => true,
-};
-
-export type MarkdownEditorEmits = typeof markdownEditorEmits;

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

@@ -1,136 +0,0 @@
-import {
-  Ref,
-  computed,
-  defineComponent,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  unref,
-} from "vue";
-// @ts-ignore
-import Vditor from "vditor";
-import {
-  markdownEditorEmits,
-  markdownEditorProps,
-} from "./markdown-editor-options";
-import { Disposable, createDisposable } from "@maketribe/utils";
-import { MKMaterialSelect } from "../material-select";
-
-let uid = 0;
-
-export default defineComponent({
-  name: "MKMarkdownEditor",
-  props: markdownEditorProps,
-  emits: markdownEditorEmits,
-  setup(props, { emit }) {
-    const markdownEl: Ref<HTMLElement | null> = ref(null);
-
-    const _uid = uid++;
-
-    const modelValue = computed({
-      get: () => props.modelValue,
-      set: (v: string) => emit("update:model-value", v),
-    });
-
-    onMounted(() => {
-      const disposable = new Disposable();
-
-      const vditor = new Vditor(unref(markdownEl)!, {
-        cache: { id: `vditor${_uid}` },
-        toolbar: [
-          "emoji",
-          "headings",
-          "bold",
-          "italic",
-          "strike",
-          "link",
-          "|",
-          "list",
-          "ordered-list",
-          "check",
-          "outdent",
-          "indent",
-          "|",
-          "quote",
-          "line",
-          "code",
-          "inline-code",
-          "insert-before",
-          "insert-after",
-          "|",
-          {
-            name: "material",
-            tipPosition: "s",
-            tip: "素材",
-            icon: `<svg><use xlink:href="#icon-image" /></svg>`,
-            click: async () => {
-              const response = await MKMaterialSelect();
-
-              if (!response.success) {
-                return;
-              }
-
-              vditor.insertValue(`![图片](${response.path})`);
-            },
-          },
-          "record",
-          "table",
-          "|",
-          "undo",
-          "redo",
-          "|",
-          "fullscreen",
-          "edit-mode",
-          {
-            name: "more",
-            toolbar: [
-              "both",
-              "code-theme",
-              "content-theme",
-              "export",
-              "outline",
-              "preview",
-              "devtools",
-              "info",
-              "help",
-            ],
-          },
-        ],
-        after: () => {
-          vditor!.setValue(modelValue.value || "");
-
-          const _markdownEl = unref(markdownEl)!;
-
-          const handleContentChange = () => {
-            modelValue.value = vditor!.getValue();
-          };
-
-          _markdownEl.addEventListener("input", handleContentChange);
-          _markdownEl.addEventListener("keydown", handleContentChange);
-          _markdownEl.addEventListener("keyup", handleContentChange);
-          _markdownEl.addEventListener("paste", handleContentChange);
-
-          disposable.register(
-            createDisposable(() => {
-              _markdownEl.removeEventListener("input", handleContentChange);
-              _markdownEl.removeEventListener("keydown", handleContentChange);
-              _markdownEl.removeEventListener("keyup", handleContentChange);
-              _markdownEl.removeEventListener("paste", handleContentChange);
-            })
-          );
-        },
-      });
-
-      onBeforeUnmount(() => {
-        disposable.dispose();
-        vditor?.destroy();
-      });
-    });
-
-    return () => {
-      return (
-        <div ref={((el: HTMLElement) => (markdownEl.value = el)) as any}></div>
-      );
-    };
-  },
-});

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

@@ -1,7 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import MaterialList from "./material-list.vue";
-
-export const MKMaterialList = withInstall(MaterialList);
-export default MKMaterialList;
-
-export * from "./material-list-options";

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>