@maketribe/ms-app 3.0.30 → 3.0.32

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

@@ -0,0 +1,34 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import {
+  ColumnEventData,
+  columnProps,
+} from "../../data-model/data-table/composables";
+
+export const columnLinkProps = buildProps({
+  ...columnProps,
+  type: {
+    values: [
+      "",
+      "default",
+      "success",
+      "warning",
+      "info",
+      "text",
+      "primary",
+      "danger",
+    ],
+    default: "primary",
+  },
+  formatValue: {
+    type: Function,
+  },
+} as const);
+
+export type ColumnLinkProps = ExtractPropTypes<typeof columnLinkProps>;
+
+export const columnLinkEmits = {
+  click: (data: ColumnEventData) => true,
+};
+
+export type ColumnLinkEmits = typeof columnLinkEmits;

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

@@ -0,0 +1,27 @@
+import { ElButton } from "element-plus";
+import { defineComponent } from "vue";
+import { columnLinkEmits, columnLinkProps } from "./column-link-options";
+import MKColumnText from "../column-text";
+
+export default defineComponent({
+  name: "MKColumnLink",
+  props: columnLinkProps,
+  emits: columnLinkEmits,
+  setup(props, { emit }) {
+    const handleClick = () => {
+      emit("click", {
+        row: props.row,
+        index: props.index,
+        column: props.column,
+      });
+    };
+
+    return () => {
+      return (
+        <ElButton type={props.type} onClick={handleClick} link>
+          <MKColumnText {...props} />
+        </ElButton>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,7 @@
+import ColumnLink from "./column-link";
+
+export const MKColumnLink = ColumnLink;
+
+export default ColumnLink;
+
+export * from "./column-link-options";

package/src/components/column-components/column-object-mapping-text/column-object-mapping-text-options.ts

@@ -0,0 +1,12 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { columnProps } from "../../data-model/data-table/composables";
+
+export const columnObjectMappingTextProps = buildProps({
+  ...columnProps,
+  mapping: { type: Object, required: true },
+} as const);
+
+export type ColumnObjectMappingTextProps = ExtractPropTypes<
+  typeof columnObjectMappingTextProps
+>;

package/src/components/column-components/column-object-mapping-text/column-object-mapping-text.tsx

@@ -0,0 +1,22 @@
+import { defineComponent } from "vue";
+import { columnObjectMappingTextProps } from "./column-object-mapping-text-options";
+import ColumnText from "../column-text";
+
+export default defineComponent({
+  name: "MKColumnObjectMappingText",
+  props: columnObjectMappingTextProps,
+  setup(props) {
+    const formatValue = (value: any) => props.mapping[value] ?? value;
+
+    return () => {
+      return (
+        <ColumnText
+          row={props.row}
+          column={props.column}
+          index={props.index}
+          formatValue={formatValue}
+        />
+      );
+    };
+  },
+});

package/src/components/column-components/column-object-mapping-text/index.ts

@@ -0,0 +1,6 @@
+import ColumnObjectMappingText from "./column-object-mapping-text";
+
+export const MKColumnObjectMappingText = ColumnObjectMappingText;
+export default MKColumnObjectMappingText;
+
+export * from "./column-object-mapping-text-options";

package/src/components/column-components/column-select/column-select-header-options.ts

@@ -0,0 +1,8 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+export const columnSelectHeaderProps = buildProps({});
+
+export type ColumnSelectHeaderProps = ExtractPropTypes<
+  typeof columnSelectHeaderProps
+>;

package/src/components/column-components/column-select/column-select-header.tsx

@@ -0,0 +1,57 @@
+import { computed, defineComponent, inject, unref } from "vue";
+import { columnSelectHeaderProps } from "./column-select-header-options";
+import { ElCheckbox } from "element-plus";
+import { DATATABLE_CONTEXT_KEY } from "../../data-model/data-table/token";
+
+export default defineComponent({
+  name: "MKColumnSelectHeader",
+  props: columnSelectHeaderProps,
+  setup() {
+    const dataTable = inject(DATATABLE_CONTEXT_KEY)!.dataTable;
+
+    const indeterminate = computed(() => {
+      const primaryKey = dataTable.primaryKey;
+
+      const selection = dataTable.getSelection();
+
+      const list = dataTable.getList();
+
+      const pageSelection = list.filter((item) =>
+        selection.includes(item[primaryKey])
+      );
+
+      return pageSelection.length !== list.length && pageSelection.length > 0;
+    });
+
+    const isChecked = computed({
+      get: () => !!dataTable.getSelection().length,
+      set: (isChecked: boolean) => {
+        const primaryKey = dataTable.primaryKey;
+
+        if (isChecked || unref(indeterminate)) {
+          dataTable.setSelection(
+            dataTable.getList().map((item) => item[primaryKey])
+          );
+
+          return;
+        }
+
+        dataTable.setSelection([]);
+      },
+    });
+
+    return () => {
+      return (
+        <div class="mk-column-selection-header">
+          <ElCheckbox
+            disabled={!unref(dataTable.getList().length)}
+            modelValue={unref(isChecked)}
+            indeterminate={unref(indeterminate)}
+            checked={unref(isChecked)}
+            onChange={(v: any) => (isChecked.value = v as boolean)}
+          />
+        </div>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,9 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { columnProps } from "../../data-model/data-table/composables";
+
+export const columnSelectProps = buildProps({
+  ...columnProps,
+});
+
+export type ColumnSelectProps = ExtractPropTypes<typeof columnSelectProps>;

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

@@ -0,0 +1,74 @@
+import { computed, defineComponent, inject, unref } from "vue";
+import { columnSelectProps } from "./column-select-options";
+import { ElCheckbox } from "element-plus";
+import ColumnSelectHeader from "./column-select-header";
+import { DATATABLE_CONTEXT_KEY } from "../../data-model/data-table/token";
+
+export default defineComponent({
+  name: "MKColumnSelect",
+  props: columnSelectProps,
+  Header: ColumnSelectHeader,
+  setup(props) {
+    const dataTable = inject(DATATABLE_CONTEXT_KEY)!.dataTable;
+
+    const i = computed(() => props.index + 1);
+
+    const isSelected = computed({
+      get: () => {
+        const primaryKey = dataTable.primaryKey;
+
+        return !!dataTable
+          .getSelection()
+          .find((item) => item === props.row[primaryKey]);
+      },
+      set: (v: boolean) => {
+        const primaryKey = dataTable.primaryKey;
+
+        const item = dataTable
+          .getSelection()
+          .find((item) => item === props.row[primaryKey]);
+
+        if (v) {
+          if (item) {
+            return;
+          }
+
+          dataTable.setSelection(
+            dataTable.getSelection().concat(props.row[primaryKey])
+          );
+
+          return;
+        }
+
+        if (item) {
+          dataTable.setSelection(
+            dataTable
+              .getSelection()
+              .filter((item) => item !== props.row[primaryKey])
+          );
+        }
+      },
+    });
+
+    return () => {
+      return (
+        <div
+          class={[
+            "mk-column-selection",
+            unref(isSelected) ? "is-selected" : "",
+          ]}
+        >
+          <span class="mk-column-selection__index">{unref(i)}</span>
+          <span class="mk-column-selection__selection">
+            <ElCheckbox
+              modelValue={unref(isSelected)}
+              onUpdate:modelValue={(v: any) =>
+                (isSelected.value = v as boolean)
+              }
+            />
+          </span>
+        </div>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,5 @@
+import ColumnSelect from "./column-select";
+
+export const MKColumnSelect = ColumnSelect;
+
+export default MKColumnSelect;

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 { ColumnEventData, 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: (data: ColumnEventData & { value: boolean }) => true,
+};
+
+export type ColumnSwitchEmits = typeof columnSwitchEmits;

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

@@ -0,0 +1,37 @@
+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", {
+        row: props.row,
+        column: props.column,
+        index: props.index,
+        value,
+      });
+    };
+
+    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/column-text/column-text-options.ts

@@ -0,0 +1,10 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { columnProps } from "../../data-model/data-table/composables";
+
+export const columnTextProps = buildProps({
+  ...columnProps,
+  formatValue: { type: Function, default: (value: any) => value },
+});
+
+export type ColumnTextProps = ExtractPropTypes<typeof columnTextProps>;

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

@@ -0,0 +1,18 @@
+import { computed, defineComponent, unref } from "vue";
+
+import { columnTextProps } from "./column-text-options";
+import { useColumn } from "../../data-model/data-table/composables";
+
+export default defineComponent({
+  name: "MKColumnText",
+  props: columnTextProps,
+  setup(props) {
+    const { value } = useColumn(props);
+
+    const formatValue = computed(() => props.formatValue(unref(value)));
+
+    return () => {
+      return <span class="mk-column-text">{unref(formatValue)}</span>;
+    };
+  },
+});

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

@@ -0,0 +1,6 @@
+import ColumnText from "./column-text";
+
+export const MKColumnText = ColumnText;
+export default MKColumnText;
+
+export * from "./column-text-options";

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

@@ -0,0 +1,10 @@
+export * from "./column-action";
+export * from "./column-image";
+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";
+export * from "./column-link";

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

@@ -0,0 +1,25 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+import {
+  dataFilterConditionProps,
+  BETWEEN_OPTION,
+} from "../../data-model/data-filter-form";
+
+export const conditionDateProps = buildProps({
+  ...dataFilterConditionProps,
+  defaultOperator: {
+    type: String,
+    default: BETWEEN_OPTION.value,
+  },
+  type: {
+    type: String,
+    default: "date",
+  },
+  teleported:{
+    type:Boolean,
+    default:false
+  }
+} as const);
+
+export type ConditionDateProps = ExtractPropTypes<typeof conditionDateProps>;

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

@@ -0,0 +1,70 @@
+import { computed, defineComponent, unref } from "vue";
+import { ElDatePicker } from "element-plus";
+import { Operator } from "@maketribe/dm";
+
+import { conditionDateProps } from "./condition-date-options";
+import {
+  useDataFilterCondition,
+  BETWEEN_OPTION,
+  GREATER_THAN_EQUAL_OPTION,
+  GREATER_THAN_OPTION,
+  LESS_THAN_EQUAL_OPTION,
+  LESS_THAN_OPTION,
+} from "../../data-model/data-filter-form";
+
+export default defineComponent({
+  name: "MKConditionDate",
+  props: conditionDateProps,
+  setup(props, { expose }) {
+    const { value, isBetween } = useDataFilterCondition({
+      ...props,
+      operator: props.defaultOperator as Operator,
+      operatorOptions: [
+        BETWEEN_OPTION,
+        LESS_THAN_OPTION,
+        LESS_THAN_EQUAL_OPTION,
+        GREATER_THAN_OPTION,
+        GREATER_THAN_EQUAL_OPTION,
+      ],
+    });
+
+    const type = computed(() => {
+      if (props.type === "datetime") {
+        return unref(isBetween) ? "datetimerange" : "datetime";
+      }
+
+      return unref(isBetween) ? "daterange" : props.type;
+    });
+
+    const valueFormat = computed(() => {
+      const _type = unref(type);
+
+      return ["datetime", "datetimerange"].includes(_type)
+        ? "YYYY-MM-DD HH:mm:ss"
+        : "YYYY-MM-DD";
+    });
+
+    expose({
+      isEmpty() {
+        return value.value[0] === null || value.value[1] === null;
+      },
+      reset() {
+        value.value = [null, null];
+      },
+    });
+
+    return () => {
+      var ElDatePickerComponent = ElDatePicker as any;
+      return (
+        <ElDatePickerComponent
+          teleported={props.teleported}
+          class="mk-condition-date"
+          modelValue={unref(value)}
+          onUpdate:modelValue={(v: any) => (value.value = v)}
+          type={unref(type) as any}
+          valueFormat={unref(valueFormat)}
+        />
+      );
+    };
+  },
+});

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

@@ -0,0 +1,7 @@
+import { withInstall } from "@maketribe/utils";
+import ConditionDate from "./condition-date";
+
+export const MKConditionDate = withInstall(ConditionDate);
+export default MKConditionDate;
+
+export * from "./condition-date-options";

package/src/components/condition-components/condition-input/condition-input-options.ts

@@ -0,0 +1,10 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+import { dataFilterConditionProps } from "../../data-model/data-filter-form";
+
+export const conditionInputProps = buildProps({
+  ...dataFilterConditionProps,
+} as const);
+
+export type ConditionInputProps = ExtractPropTypes<typeof conditionInputProps>;

package/src/components/condition-components/condition-input/condition-input.tsx

@@ -0,0 +1,41 @@
+import { defineComponent, unref } from "vue";
+import { ElInput } from "element-plus";
+
+import { conditionInputProps } from "./condition-input-options";
+import {
+  useDataFilterCondition,
+  CONTAIN_OPTION,
+  EQUAL_OPTION,
+} from "../../data-model/data-filter-form";
+
+export default defineComponent({
+  name: "MKConditionInput",
+  props: conditionInputProps,
+  setup(props, { expose }) {
+    const { value } = useDataFilterCondition({
+      ...props,
+      operator: CONTAIN_OPTION.value,
+      operatorOptions: [CONTAIN_OPTION, EQUAL_OPTION],
+    });
+
+    expose({
+      isEmpty() {
+        return value.value == null;
+      },
+      reset() {
+        value.value = null;
+      },
+    });
+
+    return () => {
+      return (
+        <ElInput
+          class="mk-condition-input"
+          modelValue={unref(value)}
+          onUpdate:modelValue={(v) => (value.value = v)}
+          placeholder="请输入关键字"
+        />
+      );
+    };
+  },
+});

package/src/components/condition-components/condition-input/index.ts

@@ -0,0 +1,7 @@
+import { withInstall } from "@maketribe/utils";
+import ConditionInput from "./condition-input";
+
+export const MKConditionInput = withInstall(ConditionInput);
+export default MKConditionInput;
+
+export * from "./condition-input-options";