@maketribe/ms-app 3.0.29 → 3.0.31

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,21 @@
+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",
+  },
+} as const);
+
+export type ConditionDateProps = ExtractPropTypes<typeof conditionDateProps>;

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

@@ -0,0 +1,68 @@
+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 () => {
+      return (
+        <ElDatePicker
+          class="mk-condition-date"
+          modelValue={unref(value)}
+          onUpdate:modelValue={(v) => (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";

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

@@ -0,0 +1,22 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+
+import {
+  dataFilterConditionProps,
+  EQUAL_OPTION,
+} from "../../data-model/data-filter-form";
+
+export const conditionNumberProps = buildProps({
+  ...dataFilterConditionProps,
+  defaultValue: {
+    default: null,
+  },
+  defaultOperator: {
+    type: String,
+    default: EQUAL_OPTION.value,
+  },
+});
+
+export type ConditionNumberProps = ExtractPropTypes<
+  typeof conditionNumberProps
+>;

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

@@ -0,0 +1,74 @@
+import { ElInputNumber } from "element-plus";
+import { defineComponent, unref } from "vue";
+import { Operator } from "@maketribe/dm";
+
+import {
+  useDataFilterCondition,
+  BETWEEN_OPTION,
+  EQUAL_OPTION,
+  GREATER_THAN_EQUAL_OPTION,
+  GREATER_THAN_OPTION,
+  LESS_THAN_EQUAL_OPTION,
+  LESS_THAN_OPTION,
+} from "../../data-model/data-filter-form";
+import { conditionNumberProps } from "./condition-number-options";
+
+export default defineComponent({
+  name: "MKConditionNumber",
+  props: conditionNumberProps,
+  setup(props, { expose }) {
+    const { value, isBetween } = useDataFilterCondition({
+      ...props,
+      operator: props.defaultOperator as Operator,
+      operatorOptions: [
+        EQUAL_OPTION,
+        BETWEEN_OPTION,
+        LESS_THAN_OPTION,
+        LESS_THAN_EQUAL_OPTION,
+        GREATER_THAN_OPTION,
+        GREATER_THAN_EQUAL_OPTION,
+      ],
+    });
+
+    expose({
+      isEmpty() {
+        return value.value == null;
+      },
+      reset() {
+        value.value = null;
+      },
+    });
+
+    return () => {
+      const children = unref(isBetween) ? (
+        <span>
+          <ElInputNumber
+            modelValue={unref(value)[0]}
+            onUpdate:modelValue={(v) => (value.value[0] = v)}
+            controls-position="right"
+          />
+
+          <ElInputNumber
+            modelValue={unref(value)[1]}
+            onUpdate:modelValue={(v) => (value.value[1] = v)}
+            controls-position="right"
+          />
+        </span>
+      ) : (
+        <ElInputNumber
+          modelValue={unref(value)}
+          onUpdate:modelValue={(v) => (value.value = v)}
+          controls-position="right"
+        />
+      );
+
+      return (
+        <div
+          class={["mk-condition-number", unref(isBetween) ? "is-between" : ""]}
+        >
+          {children}
+        </div>
+      );
+    };
+  },
+});

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

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

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

@@ -0,0 +1,31 @@
+import { ExtractPropTypes } from "vue";
+import { buildProps } from "@maketribe/utils";
+import { DataTable } from "@maketribe/dm";
+import { dataFilterConditionProps } from "../../data-model/data-filter-form";
+
+export const conditionSelectProps = buildProps({
+  ...dataFilterConditionProps,
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  source: {
+    type: Object,
+  },
+  options: {
+    type: Array,
+  },
+  dataTable: {
+    type: DataTable<any>,
+  },
+});
+
+export type ConditionSelectProps = ExtractPropTypes<
+  typeof conditionSelectProps
+>;
+
+export const conditionSelectEmit = {
+  "update:model-value": (modelValue: any) => true,
+};
+
+export type ConditionSelectEmit = typeof conditionSelectEmit;

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

@@ -0,0 +1,56 @@
+import { defineComponent, unref } from "vue";
+
+import { conditionSelectProps } from "./condition-select-options";
+import {
+  useDataFilterCondition,
+  IN_OPTION,
+  NOT_IN_OPTION,
+} from "../../data-model/data-filter-form";
+import { MKDataSelect } from "../../data-select";
+
+export default defineComponent({
+  name: "MKConditionSelect",
+  props: conditionSelectProps,
+  setup(props, { expose }) {
+    const { value } = useDataFilterCondition({
+      ...props,
+      defaultValue: props.defaultValue
+        ? props.defaultValue
+        : props.multiple
+        ? []
+        : "",
+      operator: IN_OPTION.value,
+      operatorOptions: [IN_OPTION, NOT_IN_OPTION],
+    });
+
+    expose({
+      isEmpty() {
+        if (props.multiple) {
+          return !Array.isArray(value.value) || value.value.length === 0;
+        }
+
+        return value.value == null;
+      },
+      reset() {
+        if (props.multiple) {
+          value.value = [];
+        } else {
+          value.value = null;
+        }
+      },
+    });
+
+    return () => {
+      return (
+        <MKDataSelect
+          modelValue={unref(value)}
+          dataTable={props.dataTable}
+          options={props.options}
+          source={props.source!}
+          multiple={props.multiple}
+          onUpdate:model-value={(v: any) => (value.value = v)}
+        />
+      );
+    };
+  },
+});

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

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

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

@@ -0,0 +1,4 @@
+export * from "./condition-input";
+export * from "./condition-date";
+export * from "./condition-number";
+export * from "./condition-select";

package/src/components/config-provider/config-provider-options.ts

@@ -0,0 +1,24 @@
+import { ExtractPropTypes } from "vue";
+import { Components } from "@maketribe/dm";
+import { buildProps } from "@maketribe/utils";
+import { I18n } from "@maketribe/locale";
+
+export const configProviderProps = buildProps({
+  dataTableComponents: {
+    type: Components,
+  },
+  dataFormComponents: {
+    type: Components,
+  },
+  dataFilterComponents: {
+    type: Components,
+  },
+  whereFilterComponents: {
+    type: Components,
+  },
+  i18n: {
+    type: I18n,
+  },
+});
+
+export type ConfigProviderProps = ExtractPropTypes<typeof configProviderProps>;

package/src/components/config-provider/config-provider.tsx

@@ -0,0 +1,21 @@
+import { computed, defineComponent, provide, renderSlot, unref } from "vue";
+import { provideGlobalConfig } from "./use-global-config";
+import { configProviderProps } from "./config-provider-options";
+import { ElConfigProvider } from "element-plus";
+
+export default defineComponent({
+  name: "MKConfigProvider",
+  inheritAttrs: false,
+  props: configProviderProps,
+  setup(props, { slots }) {
+    provideGlobalConfig(props);
+
+    const currentLocale = computed(() => props.i18n?.currentLanguage as any);
+
+    return () => (
+      <ElConfigProvider locale={unref(currentLocale)}>
+        {renderSlot(slots, "default")}
+      </ElConfigProvider>
+    );
+  },
+});

package/src/components/config-provider/constants.ts

@@ -0,0 +1,8 @@
+import { InjectionKey, Ref } from "vue";
+import { ConfigProviderProps } from "./config-provider-options";
+
+export type ConfigProviderContext = Partial<ConfigProviderProps>;
+
+export const CONFIG_PROVIDER_CONTEXT_KEY: InjectionKey<
+  Ref<ConfigProviderContext>
+> = Symbol("configProviderContextKey");

package/src/components/config-provider/index.ts

@@ -0,0 +1,9 @@
+import { withInstall } from "@maketribe/utils";
+import ConfigProvider from "./config-provider";
+
+export const MKConfigProvider = withInstall(ConfigProvider);
+
+export default MKConfigProvider;
+
+export * from "./use-global-config";
+export * from "./constants";