@maketribe/ms-app 3.0.18 → 3.0.20

package/dist/style/src/components/upload-image.scss

@@ -1,55 +1,117 @@
 .mk-upload-image {
-  position: relative;
-  width: var(--mk-upload-image-size);
-  height: var(--mk-upload-image-size);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  line-height: 0;
 
-  &__upload {
-    width: 100%;
-    height: 100%;
-  }
+  &-item {
+    display: inline-block;
+    width: 180px;
+    height: 180px;
+    border: 1px dashed var(--el-border-color);
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: var(--el-transition-duration-fast);
 
-  &__select {
-    width: var(--mk-upload-image-size);
-    height: var(--mk-upload-image-size);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 20px;
-  }
+    &:hover {
+      border-color: var(--el-color-primary);
 
-  &__image {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    justify-content: center;
-    align-content: center;
-  }
+      .mk-upload-image-item__mask {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
 
-  .el-image {
-    width: 100%;
-    height: 100%;
-  }
+    .mk-upload-file {
+      width: 100%;
+      height: 100%;
+    }
 
-  &__mask {
-    display: none;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: calc(100% - 2px);
-    height: calc(100% - 2px);
-    background-color: rgba(0, 0, 0, 0.5);
-    font-size: 20px;
-    color: white;
-    justify-content: center;
-    align-items: center;
-    border-radius: 6px;
+    &__wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      font-size: 28px;
+      color: #8c939d;
+    }
 
-    .mk-svg-icon {
-      cursor: pointer;
+    &__image {
+      width: 100%;
+      height: 100%;
     }
-  }
 
-  &.is-image:hover &__mask {
-    display: flex;
+    &__mask {
+      display: none;
+      position: absolute;
+      gap: 15px;
+      font-size: 18px;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.3);
+      color: white;
+    }
   }
 }
+
+// .mk-upload-image {
+//   position: relative;
+//   width: var(--mk-upload-image-size);
+//   height: var(--mk-upload-image-size);
+
+//   &__upload {
+//     width: 100%;
+//     height: 100%;
+//   }
+
+//   &__select {
+//     width: var(--mk-upload-image-size);
+//     height: var(--mk-upload-image-size);
+//     display: flex;
+//     justify-content: center;
+//     align-items: center;
+//     font-size: 20px;
+//   }
+
+//   &__image {
+//     display: flex;
+//     width: 100%;
+//     height: 100%;
+//     justify-content: center;
+//     align-content: center;
+//   }
+
+//   .el-image {
+//     width: 100%;
+//     height: 100%;
+//   }
+
+//   &__mask {
+//     display: none;
+//     position: absolute;
+//     left: 0;
+//     top: 0;
+//     width: calc(100% - 2px);
+//     height: calc(100% - 2px);
+//     background-color: rgba(0, 0, 0, 0.5);
+//     font-size: 20px;
+//     color: white;
+//     justify-content: center;
+//     align-items: center;
+//     border-radius: 6px;
+
+//     .mk-svg-icon {
+//       cursor: pointer;
+//     }
+//   }
+
+//   &.is-image:hover &__mask {
+//     display: flex;
+//   }
+// }

package/dist/style/src/index.scss

@@ -10,4 +10,6 @@
 
   --mk-border-color: #cccccc;
   --mk-border: 1px solid var(--mk-border-color);
+
+  --mk-mask-background-color: rgba(0, 0, 0, 0.1);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maketribe/ms-app",
-  "version": "3.0.18",
+  "version": "3.0.20",
   "description": "",
   "main": "dist/cjs",
   "files": [
@@ -20,10 +20,10 @@
     "vue": "^3.3.4",
     "vue-codemirror": "^6.1.1",
     "vue-router": "^4.2.4",
+    "@maketribe/dm": "^3.0.10",
     "@maketribe/locale": "^1.0.5",
-    "@maketribe/utils": "^1.1.4",
-    "@maketribe/dm": "^3.0.9",
-    "@maketribe/request": "^1.1.11"
+    "@maketribe/request": "^1.1.11",
+    "@maketribe/utils": "^1.1.4"
   },
   "scripts": {
     "build": "npm run clean && npm run build:js && npm run build:type && npm run build:style",

package/src/components/data-model/data-table/views/table/table.tsx

@@ -1,8 +1,9 @@
 import { computed, defineComponent, unref } from "vue";
-import { ElEmpty, ElTable, ElTableColumn } from "element-plus";
+import { Column, ElEmpty, ElTable, ElTableColumn } from "element-plus";
 import { tableProps } from "./table-options";
 import { MKDataTableColumn } from "../../data-table-column";
 import MKDataTableColumnComponent from "../../data-table-column-component";
+import { OrderType } from "@maketribe/dm";
 
 export default defineComponent({
   name: "MKTable",
@@ -10,6 +11,19 @@ export default defineComponent({
   setup(props, { slots }) {
     const dataTable = computed(() => props.dataTable);
 
+    type SortChangeEvent = { column: Column; prop: string; order: string };
+    const handleSortChange = ({ column, prop, order }: SortChangeEvent) => {
+      let orderType: OrderType | null = null;
+
+      if (order === "descending") {
+        orderType = OrderType.DESC;
+      } else if (order === "ascending") {
+        orderType = OrderType.ASC;
+      }
+
+      unref(dataTable).sorter.setColumnSort(prop, orderType);
+    };
+
     return () => {
       const columns = unref(dataTable)
         .getColumns()
@@ -24,6 +38,7 @@ export default defineComponent({
             align: column.align || "center",
             reserveSelection: true,
             type: column.type === null ? "default" : column.type,
+            sortable: column.sortable,
           };
 
           if (!column.visible) {
@@ -69,6 +84,7 @@ export default defineComponent({
         <ElTable
           data={unref(dataTable).getList()}
           rowKey={unref(dataTable).primaryKey}
+          onSort-change={handleSortChange}
           show-overflow-tooltip
           border
           stripe

package/src/components/form-components/form-image-upload/form-image-upload-options.ts

@@ -1,13 +1,9 @@
 import { ExtractPropTypes } from "vue";
 import { buildProps } from "@maketribe/utils";
-import { WebFileUpload } from "@maketribe/request";
 import { columnProps } from "../../data-model/data-form/composables";
 
 export const formImageUploadProps = buildProps({
   ...columnProps,
-  upload: {
-    type: WebFileUpload,
-  },
 });
 
 export type FormImageUploadProps = ExtractPropTypes<

package/src/components/form-components/form-image-upload/form-image-upload.tsx

@@ -1,7 +1,7 @@
 import { defineComponent, unref } from "vue";
 import { formImageUploadProps } from "./form-image-upload-options";
 import { useFormItem } from "../../data-model/data-form/composables";
-import { MKUploadImage } from "../../upload-image";
+import { MKUploadImage } from "../../upload-file";
 
 export default defineComponent({
   name: "MKFormImageUpload",
@@ -13,7 +13,6 @@ export default defineComponent({
       return (
         <MKUploadImage
           {...unref(column)?.componentProps}
-          upload={props.upload}
           modelValue={unref(value)}
           onUpload:model-value={(v: any) => (value.value = v)}
         />

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

@@ -5,6 +5,5 @@ export * from "./form-detail";
 export * from "./form-data-table-select";
 export * from "./form-image-upload";
 export * from "./form-detail-select";
-export * from "./form-image-list";
 export * from "./form-date-picker";
 export * from "./form-rich-text-editor";

package/src/components/index.ts

@@ -7,11 +7,9 @@ export * from "./config-provider";
 export * from "./image-view";
 export * from "./video-view";
 export * from "./file-view";
-export * from "./upload-file";
 export * from "./data-table-select-dialog";
 export * from "./data-table-select";
 export * from "./data-select";
-export * from "./upload-image";
 export * from "./pagination";
 export * from "./markdown-editor";
 export * from "./rich-text-editor";
@@ -22,3 +20,4 @@ export * from "./role-permission-config";
 export * from "./image-select";
 export * from "./verify-dialog";
 export * from "./json-editor";
+export * from "./upload-file";

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

@@ -22,14 +22,16 @@
           <template v-if="currentMaterialType">
             {{ currentMaterialType.label }}大小不超过
             {{ currentMaterialType.limit }} M
-            <MKUploadFile
-              :upload="materialMan.upload"
+            <MKWebFileUploadContext
+              :web-file-upload="materialMan.upload"
               :accept="currentMaterialType.accept"
             >
-              <ElButton type="primary">
-                选择{{ currentMaterialType.label }}
-              </ElButton>
-            </MKUploadFile>
+              <MKUploadFile>
+                <ElButton type="primary">
+                  选择{{ currentMaterialType.label }}
+                </ElButton>
+              </MKUploadFile>
+            </MKWebFileUploadContext>
           </template>
         </div>
       </div>
@@ -69,9 +71,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, unref, watch } from "vue";
+import { computed, unref } from "vue";
 import { ElPagination } from "element-plus";
-import { MKUploadFile } from "../upload-file";
+// 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";

package/src/components/upload-file/context/MaterialUploadContext.ts

@@ -0,0 +1,33 @@
+import { MKMaterialSelect } from "../../material-select";
+import { MaterialType } from "../../../dataview";
+import { UploadContext, UploadResult } from "./UploadContext";
+
+export type MaterialUploadContextOptions = {
+  allowMaterialTypeValues?: MaterialType["value"][];
+};
+
+export class MaterialUploadContext extends UploadContext {
+  allowMaterialTypeValues: MaterialType["value"][];
+
+  constructor(options: MaterialUploadContextOptions = {}) {
+    super();
+
+    this.allowMaterialTypeValues = options.allowMaterialTypeValues || [];
+  }
+
+  setAllowMaterialTypeValues(allowMaterialTypeValues: MaterialType["value"][]) {
+    this.allowMaterialTypeValues = allowMaterialTypeValues;
+  }
+
+  async selectFile(): Promise<UploadResult> {
+    const materialSelectResult = await MKMaterialSelect({
+      allowMaterialTypeValues: this.allowMaterialTypeValues,
+    });
+
+    return {
+      success: true,
+      path: materialSelectResult.path,
+      msg: "",
+    };
+  }
+}

package/src/components/upload-file/context/UploadContext.ts

@@ -0,0 +1,21 @@
+import { InjectionKey } from "vue";
+
+export type UploadResult = {
+  success: boolean;
+  path: string;
+  msg: string;
+};
+
+export interface UploadContextCtx {
+  uploadContext: UploadContext;
+}
+
+export const UploadContextCtxKey = Symbol(
+  "UploadContextCtxKey"
+) as InjectionKey<UploadContextCtx>;
+
+export class UploadContext {
+  selectFile(): Promise<UploadResult> {
+    throw new Error();
+  }
+}

package/src/components/{new-upload-file → upload-file/context}/WebFileUploadContext.ts

@@ -1,17 +1,21 @@
 import { WebFileUpload } from "@maketribe/request";
 import { UploadContext, UploadResult } from "./UploadContext";
-import { MSAppClient } from "../../core";
+import { MSAppClient } from "../../../core";
 
 export type WebFileUploadContextOptions = {
   webFileUpload?: WebFileUpload;
+  accept?: string;
 };
 
 export class WebFileUploadContext extends UploadContext {
   webFileUpload: WebFileUpload;
+  accept: string;
 
   constructor(options: WebFileUploadContextOptions = {}) {
     super();
 
+    this.accept = options.accept || "";
+
     this.webFileUpload =
       options.webFileUpload ??
       new WebFileUpload({
@@ -19,10 +23,23 @@ export class WebFileUploadContext extends UploadContext {
       });
   }
 
+  setAccept(accept: string) {
+    this.accept = accept;
+  }
+
+  setWebFileUpload(webFileUpload: WebFileUpload) {
+    this.webFileUpload = webFileUpload;
+  }
+
   async selectFile(): Promise<UploadResult> {
     const input = document.createElement("input");
 
     input.type = "file";
+
+    if (this.accept) {
+      input.accept = this.accept;
+    }
+
     Object.assign(input.style, {
       width: "1px",
       height: "1px",
@@ -41,6 +58,8 @@ export class WebFileUploadContext extends UploadContext {
       input.addEventListener("change", handleFileChange);
 
       document.body.append(input);
+
+      input.click();
     });
 
     if (!file) {

package/src/components/upload-file/context/index.ts

@@ -0,0 +1,7 @@
+export * from "./UploadContext";
+export * from "./WebFileUploadContext";
+export * from "./MaterialUploadContext";
+export * from "./material-upload-context";
+export * from "./material-upload-context-options";
+export * from "./web-file-upload-context";
+export * from "./web-file-upload-context-options";

package/src/components/upload-file/context/material-upload-context-options.ts

@@ -0,0 +1,13 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { MaterialType } from "../../../dataview";
+
+export const materialUploadContextProps = buildProps({
+  allowMaterialTypeValues: {
+    type: Array<MaterialType["value"]>,
+  },
+} as const);
+
+export type MaterialUploadContextProps = ExtractPropTypes<
+  typeof materialUploadContextProps
+>;

package/src/components/upload-file/context/material-upload-context.tsx

@@ -0,0 +1,34 @@
+import { computed, defineComponent, inject, unref, watch } from "vue";
+import { materialUploadContextProps } from "./material-upload-context-options";
+import { MaterialUploadContext } from "./MaterialUploadContext";
+import { UploadContextCtxKey } from "./UploadContext";
+import { withInstall } from "@maketribe/utils";
+
+const _MaterialUploadContext = defineComponent({
+  name: "MKMaterialUploadContext",
+  props: materialUploadContextProps,
+  inheritAttrs: false,
+  setup(props, { slots }) {
+    const allowMaterialTypeValues = computed(
+      () => props.allowMaterialTypeValues
+    );
+
+    const materialUploadContext = new MaterialUploadContext({
+      allowMaterialTypeValues: unref(allowMaterialTypeValues) ?? [],
+    });
+
+    watch(allowMaterialTypeValues, (allowMaterialTypeValues) => {
+      materialUploadContext.setAllowMaterialTypeValues(
+        allowMaterialTypeValues ?? []
+      );
+    });
+
+    inject(UploadContextCtxKey, { uploadContext: materialUploadContext });
+
+    return () => {
+      return slots.default?.();
+    };
+  },
+});
+
+export const MKMaterialUploadContext = withInstall(_MaterialUploadContext);

package/src/components/upload-file/context/web-file-upload-context-options.ts

@@ -0,0 +1,16 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { WebFileUpload } from "@maketribe/request";
+
+export const webFileUploadContextProps = buildProps({
+  accept: {
+    type: String,
+  },
+  webFileUpload: {
+    type: WebFileUpload,
+  },
+} as const);
+
+export type WebFileUploadContextProps = ExtractPropTypes<
+  typeof webFileUploadContextProps
+>;

package/src/components/upload-file/context/web-file-upload-context.tsx

@@ -0,0 +1,37 @@
+import { computed, defineComponent, provide, unref, watch } from "vue";
+import { WebFileUpload } from "@maketribe/request";
+import { webFileUploadContextProps } from "./web-file-upload-context-options";
+import { WebFileUploadContext } from "./WebFileUploadContext";
+import { UploadContextCtxKey } from "./UploadContext";
+import { withInstall } from "@maketribe/utils";
+
+const _WebFileUploadContext = defineComponent({
+  name: "MKWebFileUploadContext",
+  props: webFileUploadContextProps,
+  inheritAttrs: false,
+  setup(props, { slots }) {
+    const accept = computed(() => props.accept);
+    const webFileUpload = computed(() => props.webFileUpload);
+
+    const webFileUploadContext = new WebFileUploadContext();
+
+    watch(
+      computed(() => [unref(accept), unref(webFileUpload)] as any),
+      ([accept, webFileUpload]: [string, WebFileUpload]) => {
+        webFileUploadContext.setAccept(accept ?? "");
+        if (webFileUpload) {
+          webFileUploadContext.setWebFileUpload(webFileUpload);
+        }
+      },
+      { immediate: true }
+    );
+
+    provide(UploadContextCtxKey, { uploadContext: webFileUploadContext });
+
+    return () => {
+      return slots.default?.();
+    };
+  },
+});
+
+export const MKWebFileUploadContext = withInstall(_WebFileUploadContext);

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

@@ -1,5 +1,11 @@
-import { withInstall } from "@maketribe/utils";
-import UploadFile from "./upload-file";
+import { MKUploadFile } from "./upload-file";
+
+export { MKUploadFile };
 
-export const MKUploadFile = withInstall(UploadFile);
 export default MKUploadFile;
+
+export * from "./upload-file";
+export * from "./context";
+export * from "./ui";
+
+export * from "./upload-file-options";

package/src/components/upload-file/ui/index.ts

@@ -0,0 +1 @@
+export * from "./upload-image";

package/src/components/upload-file/ui/upload-image/index.ts

@@ -0,0 +1,7 @@
+import { withInstall } from "@maketribe/utils";
+import UploadImage from "./upload-image";
+
+export const MKUploadImage = withInstall(UploadImage);
+export default MKUploadImage;
+
+export * from "./upload-image-options";

package/src/components/{upload-image → upload-file/ui/upload-image}/upload-image-options.ts

@@ -1,24 +1,25 @@
 import { ExtractPropTypes } from "vue";
 import { buildProps } from "@maketribe/utils";
-import { WebFileUpload } from "@maketribe/request";
+import { MaterialUploadContext, UploadContext } from "../../context";
 
 export const uploadImageProps = buildProps({
-  size: {
-    type: String,
-    default: "150px",
-  },
-  upload: {
-    type: WebFileUpload,
+  uploadContext: {
+    type: UploadContext,
+    default: () => new MaterialUploadContext(),
   },
   modelValue: {
-    type: String,
+    type: [String, Array<String>],
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
   },
-});
+} as const);
 
 export type UploadImageProps = ExtractPropTypes<typeof uploadImageProps>;
 
 export const uploadImageEmits = {
-  "update:model-value": (modelValue: any) => true,
+  "update:modelValue": (path: string | string[]) => true,
 };
 
 export type UploadImageEmits = typeof uploadImageEmits;