@maketribe/ms-app 3.0.14 → 3.0.15

package/dist/style/src/components/classify-search.scss

@@ -4,17 +4,20 @@
     display: flex;
 
     &-title {
+      flex-shrink: 0;
       text-align: right;
       font-size: 14px;
       line-height: 24px;
       margin-right: 10px;
     }
 
-    > .el-tag {
-      cursor: pointer;
+    &__conditions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 5px;
 
-      + .el-tag {
-        margin-left: 5px;
+      .el-tag {
+        cursor: pointer;
       }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maketribe/ms-app",
-  "version": "3.0.14",
+  "version": "3.0.15",
   "description": "",
   "main": "dist/cjs",
   "files": [
@@ -20,8 +20,8 @@
     "vue": "^3.3.4",
     "vue-codemirror": "^6.1.1",
     "vue-router": "^4.2.4",
-    "@maketribe/dm": "^3.0.9",
     "@maketribe/locale": "^1.0.5",
+    "@maketribe/dm": "^3.0.9",
     "@maketribe/request": "^1.1.10",
     "@maketribe/utils": "^1.1.3"
   },

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

@@ -0,0 +1,12 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { columnTextProps } from "../column-text";
+
+export const dateTypes = ["date", "year", "month", "datetime"] as const;
+
+export const columnDateProps = buildProps({
+  ...columnTextProps,
+  type: { default: "date", values: dateTypes },
+});
+
+export type ColumnDateProps = ExtractPropTypes<typeof columnDateProps>;

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

@@ -0,0 +1,47 @@
+import { isFunction } from "lodash-es";
+import { computed, defineComponent, unref } from "vue";
+import { dayjs } from "element-plus";
+
+import { useColumn } from "../../data-model/data-table/composables";
+import { MKColumnText } from "../column-text";
+import { columnDateProps } from "./column-date-options";
+
+export default defineComponent({
+  name: "MKColumnDate",
+  props: columnDateProps,
+  setup(props) {
+    const columnTextProps = computed(() => {
+      const { type, ...columnTextProps } = props;
+      return columnTextProps;
+    });
+
+    const type = computed(() => props.type);
+
+    const formatValue = (value: string) => {
+      const dayInstance = dayjs(value ?? null);
+
+      if (!dayInstance.isValid()) {
+        return;
+      }
+
+      switch (unref(type)) {
+        case "datetime":
+          return dayInstance.format("YYYY-MM-DD HH:mm:ss");
+        case "date":
+          return dayInstance.format("YYYY-MM-DD");
+        case "month":
+          return dayInstance.format("YYYY-MM");
+        case "year":
+          return dayInstance.format("YYYY");
+        default:
+          return props.formatValue(value);
+      }
+    };
+
+    return () => {
+      return (
+        <MKColumnText {...unref(columnTextProps)} formatValue={formatValue} />
+      );
+    };
+  },
+});

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

@@ -0,0 +1,6 @@
+import ColumnDate from "./column-date";
+
+export const MKColumnDate = ColumnDate;
+export default MKColumnDate;
+
+export * from "./column-date-options";

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

@@ -0,0 +1,16 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { columnProps } from "../../data-model/data-table/composables";
+
+export const columnSwitchProps = buildProps({
+  ...columnProps,
+  disabled: { type: Boolean, default: true },
+} as const);
+
+export type ColumnSwitchProps = ExtractPropTypes<typeof columnSwitchProps>;
+
+export const columnSwitchEmits = {
+  change: (value: boolean, row: any) => true,
+};
+
+export type ColumnSwitchEmits = typeof columnSwitchEmits;

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

@@ -0,0 +1,32 @@
+import { computed, defineComponent, unref } from "vue";
+import { ElSwitch } from "element-plus";
+
+import { useColumn } from "../../data-model/data-table/composables";
+import { columnSwitchEmits, columnSwitchProps } from "./column-switch-options";
+
+export default defineComponent({
+  name: "MKColumnSwitch",
+  props: columnSwitchProps,
+  emits: columnSwitchEmits,
+  setup(props, { emit }) {
+    const { value } = useColumn(props);
+
+    const disabled = computed(() => props.disabled);
+
+    const handleChange = (value: boolean) => {
+      emit("change", value, props.row);
+    };
+
+    return () => {
+      return (
+        <div class="mk-column-switch">
+          <ElSwitch
+            disabled={unref(disabled)}
+            modelValue={unref(value)}
+            onChange={handleChange as any}
+          />
+        </div>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,6 @@
+import ColumnSwitch from "./column-switch";
+
+export const MKColumnSwitch = ColumnSwitch;
+export default MKColumnSwitch;
+
+export * from "./column-switch-options";

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

@@ -0,0 +1,42 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { columnProps } from "../../data-model/data-table/composables";
+
+export const columnTagProps = buildProps({
+  ...columnProps,
+  type: {
+    default: "",
+    values: ["", "success", "warning", "info", "danger"],
+  },
+  effect: {
+    default: "light",
+    values: ["light", "dark"],
+  },
+  color: {
+    type: String,
+    default: "",
+  },
+  hit: {
+    type: Boolean,
+    default: false,
+  },
+  round: {
+    type: Boolean,
+    default: false,
+  },
+  width: {
+    type: String,
+    default: ""
+  },
+  options: {
+    type: Array<{
+      label: string;
+      value: any;
+      color: string;
+      type: "" | "success" | "warning" | "info" | "danger";
+    }>,
+    default: () => [],
+  },
+} as const);
+
+export type ColumnTagProps = ExtractPropTypes<typeof columnTagProps>;

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

@@ -0,0 +1,59 @@
+import { computed, defineComponent, unref } from "vue";
+import { ElTag } from "element-plus";
+
+import { useColumn } from "../../data-model/data-table/composables";
+import { columnTagProps } from "./column-tag-options";
+
+export default defineComponent({
+  name: "MKColumnTag",
+  props: columnTagProps,
+  setup(props) {
+    const { value } = useColumn(props);
+
+    const options = computed(() => props.options);
+
+    const tagStyle = computed(() => ({ width: props.width }));
+
+    const currentOption = computed(() =>
+      unref(options).find((option) => option.value === unref(value))
+    );
+
+    return () => {
+      const _currentOption = unref(currentOption);
+
+      let content;
+
+      if (!_currentOption) {
+        content = (
+          <ElTag
+            style={unref(tagStyle)}
+            disableTransitions
+            type={props.type}
+            effect={props.effect}
+            hit={props.hit}
+            color={props.color}
+            round={props.round}
+          >
+            {unref(value)}
+          </ElTag>
+        );
+      } else {
+        content = (
+          <ElTag
+            style={unref(tagStyle)}
+            disableTransitions
+            type={_currentOption.type}
+            effect={props.effect}
+            hit={props.hit}
+            color={_currentOption.color}
+            round={props.round}
+          >
+            {_currentOption.label || _currentOption.value}
+          </ElTag>
+        );
+      }
+
+      return <div class="mk-column-tag">{content}</div>;
+    };
+  },
+});

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

@@ -0,0 +1,6 @@
+import ColumnTag from "./column-tag";
+
+export const MKColumnTag = ColumnTag;
+export default MKColumnTag;
+
+export * from "./column-tag-options";

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

@@ -4,3 +4,6 @@ export * from "./column-text";
 export * from "./column-object-mapping-text";
 export * from "./column-select";
 export * from "./column-json";
+export * from "./column-date";
+export * from "./column-switch";
+export * from "./column-tag";

package/src/components/data-model/data-table/views/table-view/classify-search/classify-search-item/classify-search-item.tsx

@@ -89,7 +89,7 @@ export default defineComponent({
       return (
         <div class="mk-classify-search-item">
           {title}
-          {tags}
+          <div class="mk-classify-search-item__conditions">{tags}</div>
         </div>
       );
     };

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

@@ -17,9 +17,11 @@ export default defineComponent({
     );
 
     const valueFormat = computed(() => {
+      if (props.valueFormat) {
+        return props.valueFormat;
+      }
+
       switch (unref(type)) {
-        case "date":
-          return "YYYY-MM-DD";
         case "datetime":
           return "YYYY-MM-DD HH:mm:ss";
         case "month":
@@ -27,7 +29,7 @@ export default defineComponent({
         case "year":
           return "YYYY";
         default:
-          return props.valueFormat;
+          return "YYYY-MM-DD";
       }
     });
 

package/src/core/component/DataTableComponents.ts

@@ -55,5 +55,29 @@ export class DataTableComponents extends Components {
         () => import("../../components/column-components/column-json")
       ),
     });
+
+    this.registerComponent({
+      name: "MKColumnDate",
+      title: "日期时间",
+      component: defineAsyncComponent(
+        () => import("../../components/column-components/column-date")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKColumnSwitch",
+      title: "开关",
+      component: defineAsyncComponent(
+        () => import("../../components/column-components/column-switch")
+      ),
+    });
+
+    this.registerComponent({
+      name: "MKColumnTag",
+      title: "标签",
+      component: defineAsyncComponent(
+        () => import("../../components/column-components/column-tag")
+      ),
+    });
   }
 }

package/src/dataview/role/RoleTable.ts

@@ -7,7 +7,6 @@ import {
   ActionButton,
   EditButton,
   DeleteButton,
-  ClassifySearchItem,
 } from "@maketribe/dm";
 import { defineDataTable } from "../../define-data-table";
 import { Role } from "./RoleForm";

package/src/page/index/dv/local-log/index.vue

@@ -86,13 +86,13 @@ const handleViewLogClick = async (node: any) => {
 
 onMounted(() => {
   localLogTree.initdEvent.once(async () => {
-    await nextTick();
+    setTimeout(() => {
+      const node = unref(treeRef)?.treeRef?.getNode(localLogTree.rootNode!.id);
 
-    const node = unref(treeRef)?.treeRef?.getNode(localLogTree.rootNode!.id);
-
-    if (node) {
-      node.expand();
-    }
+      if (node) {
+        node.expand();
+      }
+    });
   });
 });
 </script>