@maketribe/ms-app 3.0.38 → 3.0.39

package/src/components/form-components/form-data-table-select/form-data-table-select-options.ts

@@ -1,19 +0,0 @@
-import { DataTable } from "@maketribe/dm";
-import { buildProps } from "@maketribe/utils";
-import { columnProps } from "../../data-model/data-form/composables";
-
-export const formDataTableSelectProps = buildProps({
-  ...columnProps,
-  labelFieldName: {
-    type: String,
-    required: true,
-  },
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-  dataTable: {
-    type: DataTable<any>,
-    required: true,
-  },
-} as const);

package/src/components/form-components/form-data-table-select/form-data-table-select.tsx

@@ -1,32 +0,0 @@
-import { computed, defineComponent, unref } from "vue";
-import { MKDataTableSelect } from "../../data-table-select";
-import { formDataTableSelectProps } from "./form-data-table-select-options";
-import { useFormItem } from "../../data-model/data-form/composables";
-
-export default defineComponent({
-  name: "MKFormDataTableSelect",
-  props: formDataTableSelectProps,
-  setup(props) {
-    const { column, value, disabled } = useFormItem();
-
-    const handleRecordsChange = (records: any[]) => {
-      const _column = unref(column);
-
-      if (_column) {
-        _column.additionalEventData = { records };
-      }
-    };
-
-    return () => {
-      return (
-        <MKDataTableSelect
-          modelValue={unref(value)}
-          disabled={unref(disabled)}
-          onUpdate:model-value={(v) => (value.value = v)}
-          onRecordsChange={handleRecordsChange}
-          {...props}
-        />
-      );
-    };
-  },
-});

package/src/components/form-components/form-data-table-select/index.ts

@@ -1,7 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import FormDataTableSelect from "./form-data-table-select";
-
-export const MKFormDataTableSelect = withInstall(FormDataTableSelect);
-export default MKFormDataTableSelect;
-
-export * from "./form-data-table-select-options";

package/src/components/form-components/form-date-picker/form-date-picker-options.ts

@@ -1,18 +0,0 @@
-import { buildProps } from "@maketribe/utils";
-import { columnProps } from "../../data-model/data-form/composables";
-import { ExtractPropTypes } from "vue";
-
-export const datePickerTypes = ["date", "year", "month", "datetime"] as const;
-
-export const formDatePickerProps = buildProps({
-  ...columnProps,
-  type: {
-    default: "date",
-    values: datePickerTypes,
-  },
-  valueFormat: {
-    type: String,
-  },
-});
-
-export type FormDatePickerProps = ExtractPropTypes<typeof formDatePickerProps>;

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

@@ -1,49 +0,0 @@
-import { computed, defineComponent, unref } from "vue";
-import { ElDatePicker } from "element-plus";
-import {
-  datePickerTypes,
-  formDatePickerProps,
-} from "./form-date-picker-options";
-import { useFormItem } from "../../data-model/data-form/composables";
-
-export default defineComponent({
-  name: "MKFormDatePicker",
-  props: formDatePickerProps,
-  setup(props) {
-    const { value, disabled } = useFormItem();
-
-    const type = computed(() =>
-      datePickerTypes.includes(props.type) ? props.type : "date"
-    );
-
-    const valueFormat = computed(() => {
-      if (props.valueFormat) {
-        return props.valueFormat;
-      }
-
-      switch (unref(type)) {
-        case "datetime":
-          return "YYYY-MM-DD HH:mm:ss";
-        case "month":
-          return "YYYY-MM";
-        case "year":
-          return "YYYY";
-        default:
-          return "YYYY-MM-DD";
-      }
-    });
-
-    return () => {
-      return (
-        <ElDatePicker
-          class="mk-form-date-picker"
-          type={unref(type)}
-          valueFormat={unref(valueFormat)}
-          disabled={unref(disabled)}
-          modelValue={unref(value)}
-          onUpdate:modelValue={(v: any) => (value.value = v)}
-        />
-      );
-    };
-  },
-});

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

@@ -1,8 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import FormDatePicker from "./form-date-picker";
-
-export const MKFormDatePicker = withInstall(FormDatePicker);
-
-export default MKFormDatePicker;
-
-export * from "./form-date-picker-options";

package/src/components/form-components/form-detail/form-detail-options.ts

@@ -1,15 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-import { FormDetailColumn } from "@maketribe/dm";
-import { columnProps } from "../../data-model/data-form/composables";
-
-export const formDetailProps = buildProps({
-  ...columnProps,
-  column: { type: FormDetailColumn, required: true },
-  formWidth: {
-    type: String,
-    default: "400px",
-  },
-} as const);
-
-export type FormDetailProps = ExtractPropTypes<typeof formDetailProps>;

package/src/components/form-components/form-detail/form-detail.tsx

@@ -1,112 +0,0 @@
-import { computed, defineComponent, ref, unref, watch } from "vue";
-import { MKDataFormPage, MKDataTable } from "../../data-model";
-import { formDetailProps } from "./form-detail-options";
-import { useFormItem } from "../../data-model/data-form/composables";
-import { ElDrawer, ElEmpty } from "element-plus";
-import { Disposable } from "@maketribe/utils";
-
-export default defineComponent({
-  name: "MKFormDetail",
-  props: formDetailProps,
-  setup(props) {
-    const detailTable = computed(() => props.column.detailTable);
-    const detailForm = computed(() => props.column.detailForm!);
-
-    const { value } = useFormItem();
-
-    const isShowDrawer = ref(false);
-
-    watch(
-      computed(() => unref(value)),
-      (value) => {
-        const _detailTable = unref(detailTable);
-
-        value = Array.isArray(value) ? value : [];
-
-        _detailTable.setList(
-          value.map((item: any) => _detailTable.formatItem(item))
-        );
-      }
-    );
-
-    watch(
-      detailTable,
-      (detailTable, _, onCleanUp) => {
-        detailTable.dataFilter.setReady();
-
-        const disposable = new Disposable();
-
-        disposable.register(
-          detailTable.editRecordEvent.on(({ item }) => {
-            unref(detailForm).editRecord(item);
-
-            isShowDrawer.value = true;
-          })
-        );
-
-        disposable.register(
-          detailTable.addRecordEvent.on(async () => {
-            isShowDrawer.value = true;
-
-            await unref(detailForm).addRecord();
-          })
-        );
-
-        onCleanUp(() => {
-          disposable.dispose();
-        });
-      },
-      { immediate: true }
-    );
-
-    watch(
-      detailForm,
-      (detailForm, _, onCleanup) => {
-        const submittedEventDisposable = detailForm.submittedEvent.on(() => {
-          isShowDrawer.value = false;
-
-          unref(detailTable).load();
-        });
-
-        onCleanup(() => {
-          submittedEventDisposable.dispose();
-        });
-      },
-      { immediate: true }
-    );
-
-    const handleDrawerCancel = () => {
-      isShowDrawer.value = false;
-    };
-
-    return () => {
-      const dataForm = unref(isShowDrawer) ? (
-        <MKDataFormPage
-          dataForm={unref(detailForm)}
-          autoLoad={false}
-          onCancel={handleDrawerCancel}
-        />
-      ) : null;
-
-      return (
-        <div class="mk-form-detail">
-          <MKDataTable
-            dataTable={unref(detailTable)}
-            autoLoad={false}
-            v-slots={{ empty: () => <ElEmpty image-size={100} /> }}
-          />
-          <ElDrawer
-            class="mk-form-detail__drawer"
-            modelValue={unref(isShowDrawer)}
-            onUpdate:modelValue={(v) => (isShowDrawer.value = v)}
-            appendToBody
-            withHeader={false}
-            width="50%"
-          >
-            {dataForm}
-          </ElDrawer>
-        </div>
-      );
-    };
-  },
-});

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

@@ -1,7 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import FormDetail from "./form-detail";
-
-export const MKFormDetail = withInstall(FormDetail);
-export default MKFormDetail;
-
-export * from "./form-detail-options";

package/src/components/form-components/form-detail-select/form-detail-select-options.ts

@@ -1,39 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-import { DataTable, FormDetailColumn } from "@maketribe/dm";
-import { columnProps } from "../../data-model/data-form/composables";
-
-export const formDetailSelectProps = buildProps({
-  ...columnProps,
-  modelValue: {
-    type: null,
-  },
-  labelFieldName: {
-    type: String,
-    required: true,
-  },
-  saveFieldName: {
-    type: String,
-    required: true,
-  },
-  primaryFieldName: {
-    type: String,
-  },
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-  dataTable: {
-    type: DataTable<any>,
-    required: true,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  column: { type: FormDetailColumn, required: true },
-} as const);
-
-export type FormDetailSelectProps = ExtractPropTypes<
-  typeof formDetailSelectProps
->;

package/src/components/form-components/form-detail-select/form-detail-select.tsx

@@ -1,68 +0,0 @@
-import { computed, defineComponent, unref, watch } from "vue";
-import MKDataTableSelect from "../../data-table-select";
-import { formDetailSelectProps } from "./form-detail-select-options";
-import { useFormItem } from "../../data-model/data-form/composables";
-import { isEqual } from "lodash-es";
-
-export default defineComponent({
-  name: "MKFormDetailSelect",
-  inheritAttrs: false,
-  props: formDetailSelectProps,
-  setup(props) {
-    const { value } = useFormItem();
-
-    const detailTable = computed(() => props.column.detailTable);
-
-    const selected = computed({
-      get: () => {
-        const list = unref(detailTable).getList();
-
-        if (!list) {
-          return null;
-        }
-
-        return props.multiple
-          ? [...list].map((item) => item[props.saveFieldName])
-          : list[0][props.saveFieldName] ?? null;
-      },
-      set: (v) => {
-        if (props.multiple) {
-          value.value = v.map((item: any) => ({ [props.saveFieldName]: item }));
-        } else {
-          value.value = v ? { [props.saveFieldName]: v } : null;
-        }
-      },
-    });
-
-    watch(
-      value,
-      (value) => {
-        const _value = unref(detailTable)
-          .getList()
-          .map((item) => item[props.saveFieldName]);
-
-        if (isEqual(value, _value)) {
-          return;
-        }
-
-        unref(detailTable).dataFilter.setReady();
-        unref(detailTable).load();
-      },
-      { immediate: true }
-    );
-
-    return () => {
-      return (
-        <MKDataTableSelect
-          modelValue={unref(selected)}
-          onUpdate:model-value={(v: any) => (selected.value = v)}
-          labelFieldName={props.labelFieldName}
-          primaryFieldName={props.primaryFieldName}
-          multiple={props.multiple}
-          disabled={props.disabled}
-          dataTable={props.dataTable}
-        />
-      );
-    };
-  },
-});

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

@@ -1,5 +0,0 @@
-import FormDetailSelect from "./form-detail-select";
-
-export const MKFormDetailSelect = FormDetailSelect;
-
-export default MKFormDetailSelect;

package/src/components/form-components/form-icon-select/form-icon-select-options.ts

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

package/src/components/form-components/form-icon-select/form-icon-select.tsx

@@ -1,71 +0,0 @@
-import { Ref, defineComponent, onMounted, ref, unref, watch } from "vue";
-import * as elIcons from "@element-plus/icons-vue";
-import { useFormItem } from "../../data-model/data-form/composables";
-import SvgIcon from "../../svg-icon";
-import { formIconSelectProps } from "./form-icon-select-options";
-import { ElScrollbar, useFormItem as elUseFormItem } from "element-plus";
-
-export default defineComponent({
-  name: "MKFormIconSelect",
-  props: formIconSelectProps,
-  setup() {
-    const icons: Ref<string[]> = ref([]);
-
-    const { value } = useFormItem();
-
-    const { formItem: elFormItem } = elUseFormItem();
-
-    const handleClick = (icon: string) => {
-      value.value = icon;
-    };
-
-    onMounted(() => {
-      const svgList: NodeListOf<SVGElement> = document.querySelectorAll(
-        'body > svg[aria-hidden="true"]'
-      );
-
-      let iconList: string[] = [];
-
-      for (const svg of Array.from(svgList)) {
-        const symbols = svg.querySelectorAll("symbol");
-
-        iconList = iconList.concat(
-          Array.from(symbols).map((symbol) => symbol.id.replace(/^icon-/, ""))
-        );
-      }
-
-      icons.value = [...Object.keys(elIcons), ...iconList];
-    });
-
-    watch(
-      value,
-      () => {
-        elFormItem?.validate?.("change");
-      },
-      { flush: "post" }
-    );
-
-    return () => {
-      const _value = unref(value);
-
-      const children = unref(icons).map((icon) => (
-        <span
-          key={icon}
-          class={[
-            "mk-form-icon-select__icon-item",
-            icon === _value ? "is-active" : "",
-          ]}
-          onClick={() => handleClick(icon)}
-        >
-          <SvgIcon iconClass={icon} />
-        </span>
-      ));
-
-      return (
-        <div class="mk-form-icon-select">
-          <ElScrollbar height="100%">{children}</ElScrollbar>
-        </div>
-      );
-    };
-  },
-});

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

@@ -1,5 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import FormIconSelect from "./form-icon-select";
-
-export const MKFormIconSelect = withInstall(FormIconSelect);
-export default MKFormIconSelect;

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

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

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

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

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

@@ -1,5 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import FormImageUpload from "./form-image-upload";
-
-export const MKFormImageUpload = withInstall(FormImageUpload);
-export default MKFormImageUpload;

package/src/components/form-components/form-radio-box/form-radio-box-options.ts

@@ -1,32 +0,0 @@
-import { ExtractPropTypes } from "vue";
-import { buildProps } from "@maketribe/utils";
-import { columnProps } from "../../data-model/data-form/composables";
-import { DataTable } from "@maketribe/dm";
-
-export const radioBoxProps = buildProps({
-  ...columnProps,
-  source: {
-    type: Object,
-  },
-  options: {
-    type: Array,
-  },
-  dataTable: {
-    type: DataTable,
-  },
-  formatOptions: {
-    type: Function,
-    default: (item: any) => {
-      const value = item.value ?? item.id ?? item.name;
-      const label = item.label ?? item.desc ?? item.title ?? item.name;
-
-      return { value, label };
-    },
-  },
-} as const);
-
-export type RadioBoxProps = ExtractPropTypes<typeof radioBoxProps>;
-
-export const radioBoxEmits = {};
-
-export type RadioBoxEmits = typeof radioBoxEmits;

package/src/components/form-components/form-radio-box/form-radio-box.tsx

@@ -1,83 +0,0 @@
-import { computed, defineComponent, unref, ComputedRef, watch } from "vue";
-import { ElRadioGroup, ElRadio } from "element-plus";
-import { DataSource, isDataTable } from "@maketribe/dm";
-import { radioBoxProps } from "./form-radio-box-options";
-import { useFormItem } from "../../data-model/data-form/composables";
-
-export type DataOptionItem = { value: any; label: string };
-
-export default defineComponent({
-  name: "MKFormRadioBox",
-  inheritAttrs: false,
-  props: radioBoxProps,
-  setup(props, { emit }) {
-    const { value, disabled } = useFormItem();
-
-    const options: ComputedRef<DataOptionItem[]> = computed(() => {
-      if (props.dataTable) {
-        return props.dataTable
-          .getList()
-          .map((item) => props.formatOptions(item));
-      }
-
-      if (Array.isArray(props.options)) {
-        return props.options.map((item) => props.formatOptions(item));
-      }
-
-      if (props.source) {
-        const source = props.source;
-
-        switch (source.type) {
-          case DataSource.DATA:
-            return Array.isArray(source.value)
-              ? source.value.map((item) => props.formatOptions(item))
-              : [];
-
-          case DataSource.DATATABLE:
-            const dataTable = source.value;
-
-            if (isDataTable(dataTable)) {
-              return dataTable
-                .getList()
-                .map((item) => props.formatOptions(item));
-            }
-
-            return [];
-
-          default:
-            return [];
-        }
-      }
-
-      return [];
-    });
-
-    watch(
-      computed(() => props.dataTable),
-      (dataTable) => {
-        dataTable?.dataFilter.setReady();
-        dataTable?.load();
-      },
-      { immediate: true }
-    );
-
-    return () => {
-      const children = unref(options).map((item: any) => {
-        if (!item.label) {
-          return null;
-        }
-
-        return <ElRadio label={item.value}>{item.label}</ElRadio>;
-      });
-      return (
-        <ElRadioGroup
-          disabled={unref(disabled)}
-          modelValue={unref(value)}
-          onUpdate:modelValue={(v: any) => (value.value = v)}
-        >
-          {children}
-        </ElRadioGroup>
-      );
-    };
-  },
-});

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

@@ -1,7 +0,0 @@
-import { withInstall } from "@maketribe/utils";
-import FormRadioBox from "./form-radio-box";
-
-export const MKFormRadioBox = withInstall(FormRadioBox);
-export default MKFormRadioBox;
-
-export * from "./form-radio-box-options";

package/src/components/form-components/form-rich-text-editor/form-rich-text-editor-options.ts

@@ -1,6 +0,0 @@
-import { buildProps } from "@maketribe/utils";
-import { columnProps } from "../../data-model/data-form/composables";
-
-export const formRichTextEditorProps = buildProps({
-  ...columnProps,
-});

package/src/components/form-components/form-rich-text-editor/form-rich-text-editor.tsx

@@ -1,22 +0,0 @@
-import { defineComponent, unref } from "vue";
-import { useFormItem } from "../../data-model/data-form/composables";
-import { MKRichTextEditor } from "../../rich-text-editor";
-
-export default defineComponent({
-  name: "MKFormRichTextEditor",
-  setup(props) {
-    const { value, disabled } = useFormItem();
-
-    return () => {
-      return (
-        <MKRichTextEditor
-          modelValue={unref(value)}
-          onUpdate:model-value={(v: string) => {
-            value.value = v;
-          }}
-          disabled={unref(disabled)}
-        />
-      );
-    };
-  },
-});