@maketribe/ms-app 4.0.0-alpha.1 → 4.0.0-alpha.2

package/dist/cjs/index-B7q-Gozb.cjs

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const index = require("./index-Du9ljflN.cjs");
+const utils = require("@maketribe/utils");
+const dateTypes = ["date", "year", "month", "datetime"];
+const columnDateProps = utils.buildProps({
+  ...index.columnTextProps,
+  type: { default: "date", values: dateTypes }
+});
+const ColumnDate = /* @__PURE__ */ vue.defineComponent({
+  name: "MKColumnDate",
+  props: columnDateProps,
+  setup(props) {
+    const columnTextProps = vue.computed(() => {
+      const {
+        type: type2,
+        ...columnTextProps2
+      } = props;
+      return columnTextProps2;
+    });
+    const type = vue.computed(() => props.type);
+    const formatValue = (value) => {
+      const dayInstance = elementPlus.dayjs(value ?? null);
+      if (!dayInstance.isValid()) {
+        return;
+      }
+      switch (vue.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 vue.createVNode(index.MKColumnText, vue.mergeProps(vue.unref(columnTextProps), {
+        "formatValue": formatValue
+      }), null);
+    };
+  }
+});
+const MKColumnDate = ColumnDate;
+exports.MKColumnDate = MKColumnDate;
+exports.columnDateProps = columnDateProps;
+exports.dateTypes = dateTypes;
+exports.default = MKColumnDate;
+//# sourceMappingURL=index-B7q-Gozb.cjs.map

package/dist/cjs/index-B7q-Gozb.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-B7q-Gozb.cjs","sources":["../../src/components/data-model/data-table/components/column-date/column-date-options.ts","../../src/components/data-model/data-table/components/column-date/column-date.tsx","../../src/components/data-model/data-table/components/column-date/index.ts"],"sourcesContent":["import { ExtractPropTypes } from \"vue\";\r\nimport { buildProps } from \"@maketribe/utils\";\r\nimport { columnTextProps } from \"../column-text\";\r\n\r\nexport const dateTypes = [\"date\", \"year\", \"month\", \"datetime\"] as const;\r\n\r\nexport const columnDateProps = buildProps({\r\n  ...columnTextProps,\r\n  type: { default: \"date\", values: dateTypes },\r\n});\r\n\r\nexport type ColumnDateProps = ExtractPropTypes<typeof columnDateProps>;\r\n","import { computed, defineComponent, unref } from \"vue\";\nimport { dayjs } from \"element-plus\";\n\nimport { MKColumnText } from \"../column-text\";\nimport { columnDateProps } from \"./column-date-options\";\n\nexport default defineComponent({\n  name: \"MKColumnDate\",\n  props: columnDateProps,\n  setup(props) {\n    const columnTextProps = computed(() => {\n      const { type, ...columnTextProps } = props;\n      return columnTextProps;\n    });\n\n    const type = computed(() => props.type);\n\n    const formatValue = (value: string) => {\n      const dayInstance = dayjs(value ?? null);\n\n      if (!dayInstance.isValid()) {\n        return;\n      }\n\n      switch (unref(type)) {\n        case \"datetime\":\n          return dayInstance.format(\"YYYY-MM-DD HH:mm:ss\");\n        case \"date\":\n          return dayInstance.format(\"YYYY-MM-DD\");\n        case \"month\":\n          return dayInstance.format(\"YYYY-MM\");\n        case \"year\":\n          return dayInstance.format(\"YYYY\");\n        default:\n          return props.formatValue(value);\n      }\n    };\n\n    return () => {\n      return (\n        <MKColumnText {...unref(columnTextProps)} formatValue={formatValue} />\n      );\n    };\n  },\n});\n","import ColumnDate from \"./column-date\";\r\n\r\nexport const MKColumnDate = ColumnDate;\r\nexport default MKColumnDate;\r\n\r\nexport * from \"./column-date-options\";\r\n"],"names":["buildProps","columnTextProps","defineComponent","name","props","columnDateProps","setup","computed","type","formatValue","value","dayInstance","dayjs","isValid","unref","format","_createVNode","MKColumnText","_mergeProps"],"mappings":";;;;;;AAIO,MAAM,YAAY,CAAC,QAAQ,QAAQ,SAAS,UAAU;AAEtD,MAAM,kBAAkBA,MAAAA,WAAW;AAAA,EACxC,GAAGC,MAAA;AAAA,EACH,MAAM,EAAE,SAAS,QAAQ,QAAQ,UAAU;AAC7C,CAAC;ACHD,MAAeC,iDAAgB;AAAA,EAC7BC,MAAM;AAAA,EACNC,OAAOC;AAAAA,EACPC,MAAMF,OAAO;AACX,UAAMH,kBAAkBM,IAAAA,SAAS,MAAM;AACrC,YAAM;AAAA,QAAEC,MAAAA;AAAAA,QAAM,GAAGP;AAAAA,MAAiB,IAAGG;AACrC,aAAOH;AAAAA,IACT,CAAC;AAED,UAAMO,OAAOD,IAAQ,SAAC,MAAMH,MAAMI,IAAI;AAEtC,UAAMC,cAAeC,WAAkB;AACrC,YAAMC,cAAcC,YAAAA,MAAMF,SAAS,IAAI;AAEvC,UAAI,CAACC,YAAYE,WAAW;AAC1B;AAAA,MACF;AAEA,cAAQC,IAAAA,MAAMN,IAAI,GAAC;AAAA,QACjB,KAAK;AACH,iBAAOG,YAAYI,OAAO,qBAAqB;AAAA,QACjD,KAAK;AACH,iBAAOJ,YAAYI,OAAO,YAAY;AAAA,QACxC,KAAK;AACH,iBAAOJ,YAAYI,OAAO,SAAS;AAAA,QACrC,KAAK;AACH,iBAAOJ,YAAYI,OAAO,MAAM;AAAA,QAClC;AACE,iBAAOX,MAAMK,YAAYC,KAAK;AAAA,MAClC;AAAA;AAGF,WAAO,MAAM;AACX,aAAAM,IAAA,YAAAC,MAAA,cAAAC,IAAA,WACoBJ,IAAK,MAACb,eAAe,GAAC;AAAA,QAAA,eAAeQ;AAAAA,MAAW,CAAA,GAAA,IAAA;AAAA;EAGxE;AACF,CAAC;AC1CM,MAAM,eAAe;;;;;"}

package/dist/cjs/index-B9EsQ10a.cjs

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const utils = require("@maketribe/utils");
+const dm = require("@maketribe/dm");
+const index = require("./index-DqS1nGyv.cjs");
+require("vue-router");
+require("element-plus");
+require("@maketribe/request");
+require("@maketribe/locale");
+require("lodash-es");
+const columnActionProps = utils.buildProps({
+  ...index.columnProps,
+  column: { type: dm.TableColumn, required: true },
+  buttons: { type: Array, default: () => [] }
+});
+const ColumnAction = /* @__PURE__ */ vue.defineComponent({
+  name: "MKColumnAction",
+  props: columnActionProps,
+  setup(props) {
+    const buttons = vue.computed(() => {
+      if (props.column instanceof dm.TableActionColumn) {
+        return props.column.buttons;
+      }
+      return props.buttons;
+    });
+    const handleColumnActionClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    return () => {
+      const buttonVnodes = vue.unref(buttons).filter((button) => button.predicate(props.row)).map((button) => vue.createVNode(index.MKButton, {
+        "icon": button.icon,
+        "label": button.label,
+        "type": button.type,
+        "link": true,
+        "onClick": () => button.handler(props.row)
+      }, null));
+      return vue.createVNode("span", {
+        "class": "mk-column-action",
+        "onClick": handleColumnActionClick
+      }, [buttonVnodes]);
+    };
+  }
+});
+const MKColumnAction = ColumnAction;
+exports.MKColumnAction = MKColumnAction;
+exports.default = MKColumnAction;
+//# sourceMappingURL=index-B9EsQ10a.cjs.map

package/dist/cjs/index-B9EsQ10a.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-B9EsQ10a.cjs","sources":["../../src/components/data-model/data-table/components/column-action/column-action-options.ts","../../src/components/data-model/data-table/components/column-action/column-action.tsx","../../src/components/data-model/data-table/components/column-action/index.ts"],"sourcesContent":["import { ExtractPropTypes } from \"vue\";\nimport { buildProps } from \"@maketribe/utils\";\nimport { TableColumn } from \"@maketribe/dm\";\nimport { columnProps } from \"../../composables\";\n\nexport const columnActionProps = buildProps({\n  ...columnProps,\n  column: { type: TableColumn, required: true },\n  buttons: { type: Array, default: () => [] }\n} as const);\n\nexport type ColumnActionProps = ExtractPropTypes<typeof columnActionProps>;\n","import { computed, defineComponent, unref } from \"vue\";\nimport { ElButton } from \"element-plus\";\n\nimport { columnActionProps } from \"./column-action-options\";\nimport { MKButton } from \"../../../../basic/button\";\nimport { ActionButton, TableActionColumn } from \"@maketribe/dm\";\n\nexport type MKColumnActionButton = {\n  name?: string;\n  label?: string;\n  type?: InstanceType<typeof ElButton>[\"type\"];\n  handler?: (row: any) => any;\n};\n\nexport default defineComponent({\n  name: \"MKColumnAction\",\n  props: columnActionProps,\n  setup(props) {\n    const buttons = computed(() => {\n      if (props.column instanceof TableActionColumn) {\n        return props.column.buttons;\n      }\n\n      return props.buttons as ActionButton[];\n    });\n\n    const handleColumnActionClick = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n    };\n\n    return () => {\n      const buttonVnodes = unref(buttons)\n        .filter((button) => button.predicate(props.row))\n        .map((button) => (\n          <MKButton\n            icon={button.icon}\n            label={button.label}\n            type={button.type}\n            link\n            onClick={() => button.handler(props.row)}\n          />\n        ));\n\n      return (\n        <span class=\"mk-column-action\" onClick={handleColumnActionClick}>\n          {buttonVnodes}\n        </span>\n      );\n    };\n  },\n});\n","import ColumnAction from \"./column-action\";\r\n\r\nexport const MKColumnAction = ColumnAction;\r\nexport default MKColumnAction;\r\n"],"names":["buildProps","columnProps","TableColumn","defineComponent","name","props","columnActionProps","setup","buttons","computed","column","TableActionColumn","handleColumnActionClick","e","preventDefault","stopPropagation","buttonVnodes","unref","filter","button","predicate","row","map","_createVNode","MKButton","icon","label","type","onClick","handler"],"mappings":";;;;;;;;;;;AAKO,MAAM,oBAAoBA,MAAAA,WAAW;AAAA,EAC1C,GAAGC,MAAA;AAAA,EACH,QAAQ,EAAE,MAAMC,gBAAa,UAAU,KAAK;AAAA,EAC5C,SAAS,EAAE,MAAM,OAAO,SAAS,MAAM,CAAA,EAAG;AAC5C,CAAU;ACKV,MAAeC,mDAAgB;AAAA,EAC7BC,MAAM;AAAA,EACNC,OAAOC;AAAAA,EACPC,MAAMF,OAAO;AACX,UAAMG,UAAUC,IAAAA,SAAS,MAAM;AAC7B,UAAIJ,MAAMK,kBAAkBC,sBAAmB;AAC7C,eAAON,MAAMK,OAAOF;AAAAA,MACtB;AAEA,aAAOH,MAAMG;AAAAA,IACf,CAAC;AAED,UAAMI,0BAA2BC,OAAkB;AACjDA,QAAEC,eAAc;AAChBD,QAAEE,gBAAe;AAAA;AAGnB,WAAO,MAAM;AACX,YAAMC,eAAeC,IAAAA,MAAMT,OAAO,EAC/BU,OAAQC,YAAWA,OAAOC,UAAUf,MAAMgB,GAAG,CAAC,EAC9CC,IAAKH,YAAMI,IAAA,YAAAC,gBAAA;AAAA,QAAA,QAEFL,OAAOM;AAAAA,QAAI,SACVN,OAAOO;AAAAA,QAAK,QACbP,OAAOQ;AAAAA,QAAI,QAAA;AAAA,QAAA,WAERC,MAAMT,OAAOU,QAAQxB,MAAMgB,GAAG;AAAA,MAAC,GAAA,IAAA,CAE3C;AAEH,aAAAE,IAAAA,YAAA,QAAA;AAAA,QAAA,SAAA;AAAA,QAAA,WAC0CX;AAAAA,MAAuB,GAAA,CAC5DI,YAAY,CAAA;AAAA;EAIrB;AACF,CAAC;ACjDM,MAAM,iBAAiB;;;"}

package/dist/cjs/index-BBcmou1e.cjs

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const utils = require("@maketribe/utils");
+const index = require("./index-DqS1nGyv.cjs");
+require("vue-router");
+require("@maketribe/dm");
+const elementPlus = require("element-plus");
+require("@maketribe/request");
+require("@maketribe/locale");
+require("lodash-es");
+const columnSelectProps = utils.buildProps({
+  ...index.columnProps
+});
+const columnSelectHeaderProps = utils.buildProps({});
+const ColumnSelectHeader = /* @__PURE__ */ vue.defineComponent({
+  name: "MKColumnSelectHeader",
+  props: columnSelectHeaderProps,
+  setup() {
+    const dataTable = vue.inject(index.DATA_TABLE_CONTEXT_KEY).dataTable;
+    const indeterminate = vue.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 = vue.computed({
+      get: () => !!dataTable.getSelection().length,
+      set: (isChecked2) => {
+        const primaryKey = dataTable.primaryKey;
+        if (isChecked2 || vue.unref(indeterminate)) {
+          dataTable.setSelection(dataTable.getList().map((item) => item[primaryKey]));
+          return;
+        }
+        dataTable.setSelection([]);
+      }
+    });
+    return () => {
+      return vue.createVNode("div", {
+        "class": "mk-column-selection-header"
+      }, [vue.createVNode(elementPlus.ElCheckbox, {
+        "disabled": !vue.unref(dataTable.getList().length),
+        "modelValue": vue.unref(isChecked),
+        "indeterminate": vue.unref(indeterminate),
+        "checked": vue.unref(isChecked),
+        "onChange": (v) => isChecked.value = v
+      }, null)]);
+    };
+  }
+});
+const ColumnSelect = /* @__PURE__ */ vue.defineComponent({
+  name: "MKColumnSelect",
+  props: columnSelectProps,
+  Header: ColumnSelectHeader,
+  setup(props) {
+    const dataTable = vue.inject(index.DATA_TABLE_CONTEXT_KEY).dataTable;
+    const i = vue.computed(() => props.index + 1);
+    const isSelected = vue.computed({
+      get: () => {
+        const primaryKey = dataTable.primaryKey;
+        return !!dataTable.getSelection().find((item) => item === props.row[primaryKey]);
+      },
+      set: (v) => {
+        const primaryKey = dataTable.primaryKey;
+        const item = dataTable.getSelection().find((item2) => item2 === props.row[primaryKey]);
+        if (v) {
+          if (item) {
+            return;
+          }
+          dataTable.setSelection(dataTable.getSelection().concat(props.row[primaryKey]));
+          return;
+        }
+        if (item) {
+          dataTable.setSelection(dataTable.getSelection().filter((item2) => item2 !== props.row[primaryKey]));
+        }
+      }
+    });
+    return () => {
+      return vue.createVNode("div", {
+        "class": ["mk-column-selection", vue.unref(isSelected) ? "is-selected" : ""]
+      }, [vue.createVNode("span", {
+        "class": "mk-column-selection__index"
+      }, [vue.unref(i)]), vue.createVNode("span", {
+        "class": "mk-column-selection__selection"
+      }, [vue.createVNode(elementPlus.ElCheckbox, {
+        "modelValue": vue.unref(isSelected),
+        "onUpdate:modelValue": (v) => isSelected.value = v
+      }, null)])]);
+    };
+  }
+});
+const MKColumnSelect = ColumnSelect;
+exports.MKColumnSelect = MKColumnSelect;
+exports.default = MKColumnSelect;
+//# sourceMappingURL=index-BBcmou1e.cjs.map

package/dist/cjs/index-BBcmou1e.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-BBcmou1e.cjs","sources":["../../src/components/data-model/data-table/components/column-select/column-select-options.ts","../../src/components/data-model/data-table/components/column-select/column-select-header-options.ts","../../src/components/data-model/data-table/components/column-select/column-select-header.tsx","../../src/components/data-model/data-table/components/column-select/column-select.tsx","../../src/components/data-model/data-table/components/column-select/index.ts"],"sourcesContent":["import { ExtractPropTypes } from \"vue\";\nimport { buildProps } from \"@maketribe/utils\";\nimport { columnProps } from \"../../composables\";\n\nexport const columnSelectProps = buildProps({\n  ...columnProps,\n});\n\nexport type ColumnSelectProps = ExtractPropTypes<typeof columnSelectProps>;\n","import { ExtractPropTypes } from \"vue\";\r\nimport { buildProps } from \"@maketribe/utils\";\r\n\r\nexport const columnSelectHeaderProps = buildProps({});\r\n\r\nexport type ColumnSelectHeaderProps = ExtractPropTypes<\r\n  typeof columnSelectHeaderProps\r\n>;\r\n","import { computed, defineComponent, inject, unref } from \"vue\";\nimport { columnSelectHeaderProps } from \"./column-select-header-options\";\nimport { ElCheckbox } from \"element-plus\";\nimport { DATA_TABLE_CONTEXT_KEY } from \"../../token\";\n\nexport default defineComponent({\n  name: \"MKColumnSelectHeader\",\n  props: columnSelectHeaderProps,\n  setup() {\n    const dataTable = inject(DATA_TABLE_CONTEXT_KEY)!.dataTable;\n\n    const indeterminate = computed(() => {\n      const primaryKey = dataTable.primaryKey;\n\n      const selection = dataTable.getSelection();\n\n      const list = dataTable.getList();\n\n      const pageSelection = list.filter((item) =>\n        selection.includes(item[primaryKey])\n      );\n\n      return pageSelection.length !== list.length && pageSelection.length > 0;\n    });\n\n    const isChecked = computed({\n      get: () => !!dataTable.getSelection().length,\n      set: (isChecked: boolean) => {\n        const primaryKey = dataTable.primaryKey;\n\n        if (isChecked || unref(indeterminate)) {\n          dataTable.setSelection(\n            dataTable.getList().map((item) => item[primaryKey])\n          );\n\n          return;\n        }\n\n        dataTable.setSelection([]);\n      },\n    });\n\n    return () => {\n      return (\n        <div class=\"mk-column-selection-header\">\n          <ElCheckbox\n            disabled={!unref(dataTable.getList().length)}\n            modelValue={unref(isChecked)}\n            indeterminate={unref(indeterminate)}\n            checked={unref(isChecked)}\n            onChange={(v: any) => (isChecked.value = v as boolean)}\n          />\n        </div>\n      );\n    };\n  },\n});\n","import { computed, defineComponent, inject, unref } from \"vue\";\nimport { columnSelectProps } from \"./column-select-options\";\nimport { ElCheckbox } from \"element-plus\";\nimport ColumnSelectHeader from \"./column-select-header\";\nimport { DATA_TABLE_CONTEXT_KEY } from \"../../token\";\n\nexport default defineComponent({\n  name: \"MKColumnSelect\",\n  props: columnSelectProps,\n  Header: ColumnSelectHeader,\n  setup(props) {\n    const dataTable = inject(DATA_TABLE_CONTEXT_KEY)!.dataTable;\n\n    const i = computed(() => props.index + 1);\n\n    const isSelected = computed({\n      get: () => {\n        const primaryKey = dataTable.primaryKey;\n\n        return !!dataTable\n          .getSelection()\n          .find((item) => item === props.row[primaryKey]);\n      },\n      set: (v: boolean) => {\n        const primaryKey = dataTable.primaryKey;\n\n        const item = dataTable\n          .getSelection()\n          .find((item) => item === props.row[primaryKey]);\n\n        if (v) {\n          if (item) {\n            return;\n          }\n\n          dataTable.setSelection(\n            dataTable.getSelection().concat(props.row[primaryKey])\n          );\n\n          return;\n        }\n\n        if (item) {\n          dataTable.setSelection(\n            dataTable\n              .getSelection()\n              .filter((item) => item !== props.row[primaryKey])\n          );\n        }\n      },\n    });\n\n    return () => {\n      return (\n        <div\n          class={[\n            \"mk-column-selection\",\n            unref(isSelected) ? \"is-selected\" : \"\",\n          ]}\n        >\n          <span class=\"mk-column-selection__index\">{unref(i)}</span>\n          <span class=\"mk-column-selection__selection\">\n            <ElCheckbox\n              modelValue={unref(isSelected)}\n              onUpdate:modelValue={(v: any) =>\n                (isSelected.value = v as boolean)\n              }\n            />\n          </span>\n        </div>\n      );\n    };\n  },\n});\n","import ColumnSelect from \"./column-select\";\r\n\r\nexport const MKColumnSelect = ColumnSelect;\r\n\r\nexport default MKColumnSelect;\r\n"],"names":["buildProps","columnProps","defineComponent","name","props","columnSelectHeaderProps","setup","dataTable","inject","DATA_TABLE_CONTEXT_KEY","indeterminate","computed","primaryKey","selection","getSelection","list","getList","pageSelection","filter","item","includes","length","isChecked","get","set","unref","setSelection","map","_createVNode","ElCheckbox","v","value","columnSelectProps","Header","ColumnSelectHeader","i","index","isSelected","find","row","concat"],"mappings":"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"}

package/dist/cjs/index-BI2LL0zE.cjs

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils = require("@maketribe/utils");
+const vue = require("vue");
+const index = require("./index-DqS1nGyv.cjs");
+const dm = require("@maketribe/dm");
+const elementPlus = require("element-plus");
+const formDetailProps = utils.buildProps({
+  modelValue: {
+    type: null
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  column: { type: dm.FormDetailColumn, required: true },
+  formWidth: {
+    type: String,
+    default: "400px"
+  }
+});
+const formDetailEmits = {
+  "update:model-value": (v) => true
+};
+utils.buildProps({
+  column: { type: dm.FormColumn, required: true }
+});
+function useFormItem() {
+  const dataFormItemContext = vue.inject(index.DATA_FORM_ITEM_CONTEXT_KEY);
+  const column = vue.computed(() => {
+    var _a;
+    return ((_a = vue.unref(dataFormItemContext)) == null ? void 0 : _a.column) ?? null;
+  });
+  const value = vue.computed({
+    get: () => {
+      const _column = vue.unref(column);
+      if (!_column) {
+        return;
+      }
+      return _column.getValue();
+    },
+    set: (v) => {
+      const _column = vue.unref(column);
+      if (!_column) {
+        return;
+      }
+      _column.setValue(v);
+    }
+  });
+  const disabled = vue.computed(() => {
+    var _a;
+    return ((_a = vue.unref(column)) == null ? void 0 : _a.disabled) ?? false;
+  });
+  return { column, value, disabled };
+}
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const FormDetail = /* @__PURE__ */ vue.defineComponent({
+  name: "MKFormDetail",
+  props: formDetailProps,
+  emits: formDetailEmits,
+  setup(props) {
+    const detailTable = vue.computed(() => props.column.detailTable);
+    const detailForm = vue.computed(() => props.column.detailForm);
+    const {
+      value
+    } = useFormItem();
+    vue.watch(vue.computed(() => vue.unref(value)), (value2) => {
+      const _detailTable = vue.unref(detailTable);
+      value2 = Array.isArray(value2) ? value2 : [];
+      _detailTable.setList(value2.map((item) => _detailTable.formatItem(item)));
+    });
+    const isShowDataForm = vue.ref(false);
+    vue.watch(detailTable, (dataTable, _, onCleanup) => {
+      const addRecordDisposable = dataTable.addRecordEvent.on(async ({
+        item
+      }) => {
+        const _dataForm = vue.unref(detailForm);
+        if (!_dataForm) {
+          console.warn(`没有对应的 (${dataTable.name}) DataForm 实现`);
+          return;
+        }
+        isShowDataForm.value = true;
+        _dataForm.addRecord(item);
+      });
+      const editRecordDisposable = dataTable.editRecordEvent.on(async ({
+        item
+      }) => {
+        const _dataForm = vue.unref(detailForm);
+        if (!_dataForm) {
+          console.warn(`没有对应的 (${dataTable.name}) DataForm 实现`);
+          return;
+        }
+        isShowDataForm.value = true;
+        try {
+          const response = await _dataForm.editRecord(item);
+          if (response.data.code !== 200) {
+            dm.Messager.error({
+              message: response.data.msg
+            });
+            isShowDataForm.value = false;
+            return;
+          }
+        } catch (e) {
+          console.error(e);
+          isShowDataForm.value = false;
+        }
+      });
+      onCleanup(() => {
+        addRecordDisposable.dispose();
+        editRecordDisposable.dispose();
+      });
+    }, {
+      immediate: true
+    });
+    vue.watch(detailForm, (dataForm, _, onCleanup) => {
+      const submittedDisposable = dataForm.submittedEvent.on(() => {
+        var _a;
+        isShowDataForm.value = false;
+        (_a = vue.unref(detailTable)) == null ? void 0 : _a.load();
+      });
+      const cancelDisposable = dataForm.cancelEvent.on(() => {
+        isShowDataForm.value = false;
+      });
+      onCleanup(() => {
+        submittedDisposable.dispose();
+        cancelDisposable.dispose();
+      });
+    }, {
+      immediate: true
+    });
+    return () => {
+      const dataForm = vue.unref(isShowDataForm) ? vue.createVNode(index.MKPageContainer, null, {
+        default: () => [vue.createVNode(index.DataForm, {
+          "dataForm": vue.unref(detailForm),
+          "autoLoad": false
+        }, null)]
+      }) : null;
+      return vue.createVNode("div", {
+        "class": "mk-form-detail"
+      }, [vue.createVNode(index.MKDataTable, {
+        "dataTable": vue.unref(detailTable),
+        "autoLoad": false
+      }, {
+        empty: () => vue.createVNode(elementPlus.ElEmpty, {
+          "image-size": 100
+        }, null)
+      }), vue.createVNode(elementPlus.ElDrawer, {
+        "class": "mk-form-detail__drawer",
+        "modelValue": vue.unref(isShowDataForm),
+        "onUpdate:modelValue": (v) => isShowDataForm.value = v,
+        "appendToBody": true,
+        "withHeader": false,
+        "width": "50%"
+      }, _isSlot(dataForm) ? dataForm : {
+        default: () => [dataForm]
+      })]);
+    };
+  }
+});
+const MKFormDetail = utils.withInstall(FormDetail);
+exports.MKFormDetail = MKFormDetail;
+exports.default = MKFormDetail;
+exports.formDetailEmits = formDetailEmits;
+exports.formDetailProps = formDetailProps;
+//# sourceMappingURL=index-BI2LL0zE.cjs.map

package/dist/cjs/index-BI2LL0zE.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-BI2LL0zE.cjs","sources":["../../src/components/data-model/data-form/components/form-detail/form-detail-options.ts","../../src/components/data-model/data-form/composables/use-form-item.ts","../../src/components/data-model/data-form/components/form-detail/form-detail.tsx","../../src/components/data-model/data-form/components/form-detail/index.ts"],"sourcesContent":["import { ExtractPropTypes } from \"vue\";\nimport { buildProps } from \"@maketribe/utils\";\nimport { FormDetailColumn } from \"@maketribe/dm\";\n\nexport const formDetailProps = buildProps({\n  modelValue: {\n    type: null,\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  column: { type: FormDetailColumn, required: true },\n  formWidth: {\n    type: String,\n    default: \"400px\",\n  },\n} as const);\n\nexport type FormDetailProps = ExtractPropTypes<typeof formDetailProps>;\n\nexport const formDetailEmits = {\n  \"update:model-value\": (v: any) => true,\n};\n\nexport type FormDetailEmits = ExtractPropTypes<typeof formDetailEmits>;\n","import { ExtractPropTypes, computed, inject, unref } from \"vue\";\nimport { DATA_FORM_ITEM_CONTEXT_KEY } from \"../token\";\nimport { FormColumn } from \"@maketribe/dm\";\nimport { buildProps } from \"@maketribe/utils\";\n\nexport const columnProps = buildProps({\n  column: { type: FormColumn, required: true },\n} as const);\n\nexport type ColumnProps = ExtractPropTypes<typeof columnProps>;\n\nexport function useFormItem() {\n  const dataFormItemContext = inject(DATA_FORM_ITEM_CONTEXT_KEY);\n  const column = computed(() => unref(dataFormItemContext)?.column ?? null);\n\n  const value = computed({\n    get: () => {\n      const _column = unref(column);\n\n      if (!_column) {\n        return;\n      }\n\n      return _column.getValue();\n    },\n    set: (v: any) => {\n      const _column = unref(column);\n\n      if (!_column) {\n        return;\n      }\n\n      _column.setValue(v);\n    },\n  });\n\n  const disabled = computed(() => unref(column)?.disabled ?? false);\n\n  return { column, value, disabled };\n}\n","import { computed, defineComponent, ref, unref, watch } from \"vue\";\r\nimport { MKPageContainer } from \"../../../../basic/page-container\";\r\nimport { MKDataTable } from \"../../../data-table\";\r\nimport DataForm from \"../../data-form.vue\";\r\nimport { formDetailEmits, formDetailProps } from \"./form-detail-options\";\r\nimport { useFormItem } from \"../../composables\";\r\nimport { ElDrawer, ElEmpty } from \"element-plus\";\r\nimport { Messager } from \"@maketribe/dm\";\r\n\r\nexport default defineComponent({\r\n  name: \"MKFormDetail\",\r\n  props: formDetailProps,\r\n  emits: formDetailEmits,\r\n  setup(props) {\r\n    const detailTable = computed(() => props.column.detailTable);\r\n    const detailForm = computed(() => props.column.detailForm!);\r\n\r\n    const { value } = useFormItem();\r\n\r\n    watch(\r\n      computed(() => unref(value)),\r\n      (value) => {\r\n        const _detailTable = unref(detailTable);\r\n\r\n        value = Array.isArray(value) ? value : [];\r\n\r\n        _detailTable.setList(\r\n          value.map((item: any) => _detailTable.formatItem(item))\r\n        );\r\n      }\r\n    );\r\n\r\n    const isShowDataForm = ref(false);\r\n\r\n    watch(\r\n      detailTable,\r\n      (dataTable, _, onCleanup) => {\r\n        const addRecordDisposable = dataTable.addRecordEvent.on(async ({ item }) => {\r\n          const _dataForm = unref(detailForm);\r\n\r\n          if (!_dataForm) {\r\n            console.warn(`没有对应的 (${dataTable.name}) DataForm 实现`);\r\n            return;\r\n          }\r\n\r\n          isShowDataForm.value = true;\r\n\r\n          _dataForm.addRecord(item);\r\n        });\r\n\r\n        const editRecordDisposable = dataTable.editRecordEvent.on(\r\n          async ({ item }) => {\r\n            const _dataForm = unref(detailForm);\r\n\r\n            if (!_dataForm) {\r\n              console.warn(`没有对应的 (${dataTable.name}) DataForm 实现`);\r\n              return;\r\n            }\r\n\r\n            isShowDataForm.value = true;\r\n\r\n            try {\r\n              const response = await _dataForm.editRecord(item);\r\n\r\n              if (response.data.code !== 200) {\r\n                Messager.error({ message: response.data.msg });\r\n                isShowDataForm.value = false;\r\n                return;\r\n              }\r\n            } catch (e) {\r\n              console.error(e);\r\n              isShowDataForm.value = false;\r\n            }\r\n          }\r\n        );\r\n\r\n        onCleanup(() => {\r\n          addRecordDisposable.dispose();\r\n          editRecordDisposable.dispose();\r\n        });\r\n      },\r\n      { immediate: true }\r\n    );\r\n\r\n    watch(\r\n      detailForm,\r\n      (dataForm, _, onCleanup) => {\r\n        const submittedDisposable = dataForm.submittedEvent.on(() => {\r\n          isShowDataForm.value = false;\r\n\r\n          unref(detailTable)?.load();\r\n        });\r\n\r\n        const cancelDisposable = dataForm.cancelEvent.on(() => {\r\n          isShowDataForm.value = false;\r\n        });\r\n\r\n        onCleanup(() => {\r\n          submittedDisposable.dispose();\r\n          cancelDisposable.dispose();\r\n        });\r\n      },\r\n      { immediate: true }\r\n    );\r\n\r\n    return () => {\r\n      const dataForm = unref(isShowDataForm) ? (\r\n        <MKPageContainer>\r\n          <DataForm dataForm={unref(detailForm)} autoLoad={false} />\r\n        </MKPageContainer>\r\n      ) : null;\r\n\r\n      return (\r\n        <div class=\"mk-form-detail\">\r\n          <MKDataTable\r\n            dataTable={unref(detailTable)}\r\n            autoLoad={false}\r\n            v-slots={{ empty: () => <ElEmpty image-size={100} /> }}\r\n          />\r\n          <ElDrawer\r\n            class=\"mk-form-detail__drawer\"\r\n            modelValue={unref(isShowDataForm)}\r\n            onUpdate:modelValue={(v) => (isShowDataForm.value = v)}\r\n            appendToBody\r\n            withHeader={false}\r\n            width=\"50%\"\r\n          >\r\n            {dataForm}\r\n          </ElDrawer>\r\n        </div>\r\n      );\r\n    };\r\n  },\r\n});\r\n","import { withInstall } from \"@maketribe/utils\";\r\nimport FormDetail from \"./form-detail\";\r\n\r\nexport const MKFormDetail = withInstall(FormDetail);\r\nexport default MKFormDetail;\r\n\r\nexport * from \"./form-detail-options\";\r\n"],"names":["buildProps","FormDetailColumn","FormColumn","inject","DATA_FORM_ITEM_CONTEXT_KEY","computed","unref","_isSlot","s","Object","prototype","toString","call","_isVNode","defineComponent","name","props","formDetailProps","emits","formDetailEmits","setup","detailTable","column","detailForm","value","useFormItem","watch","_detailTable","Array","isArray","setList","map","item","formatItem","isShowDataForm","ref","dataTable","_","onCleanup","addRecordDisposable","addRecordEvent","on","_dataForm","console","warn","addRecord","editRecordDisposable","editRecordEvent","response","editRecord","data","code","Messager","error","message","msg","e","dispose","immediate","dataForm","submittedDisposable","submittedEvent","load","cancelDisposable","cancelEvent","_createVNode","MKPageContainer","default","DataForm","MKDataTable","empty","ElEmpty","ElDrawer","v","withInstall"],"mappings":"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"}

package/dist/cjs/index-BKHmJq9t.cjs

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils = require("@maketribe/utils");
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const elIcons = require("@element-plus/icons-vue");
+const index = require("./index-tJqqtY57.cjs");
+const videoViewProps = utils.buildProps({
+  src: { type: String, required: true },
+  poster: { type: String, required: false },
+  dialogWidth: { type: String, default: "800px" }
+});
+const VideoView = /* @__PURE__ */ vue.defineComponent({
+  name: "MKVideoView",
+  props: videoViewProps,
+  setup(props) {
+    const isShowVideoDialog = vue.ref(false);
+    const videoEl = vue.ref(null);
+    const handleViewClick = () => {
+      isShowVideoDialog.value = true;
+    };
+    const handleDownloadClick = () => {
+      if (!props.src) {
+        return;
+      }
+      const a = document.createElement("a");
+      a.setAttribute("download", (/* @__PURE__ */ new Date()).getTime().toString());
+      a.target = "_blank";
+      a.href = props.src;
+      Object.assign(a.style, {
+        width: "1px",
+        height: "1px"
+      });
+      document.body.append(a);
+      a.click();
+      setTimeout(() => {
+        document.body.removeChild(a);
+      });
+    };
+    vue.watch(isShowVideoDialog, (isShowVideoDialog2) => {
+      if (!vue.unref(videoEl)) {
+        return;
+      }
+      if (!isShowVideoDialog2) {
+        vue.unref(videoEl).pause();
+        vue.unref(videoEl).currentTime = 0;
+      }
+    });
+    return () => vue.createVNode("div", {
+      "class": "mk-video-view"
+    }, [vue.createVNode(index.MKImageView, {
+      "src": props.src,
+      "showPreview": false
+    }, {
+      error: () => {
+        return vue.createVNode(vue.Fragment, null, [vue.createVNode(elementPlus.ElIcon, {
+          "size": "20"
+        }, {
+          default: () => [vue.createVNode(elIcons.Film, null, null)]
+        }), vue.createVNode("div", {
+          "class": "mk-video-view__tools"
+        }, [vue.createVNode(elementPlus.ElButton, {
+          "type": "primary",
+          "icon": elIcons.View,
+          "onClick": handleViewClick
+        }, null), vue.createVNode(elementPlus.ElButton, {
+          "type": "primary",
+          "icon": elIcons.Download,
+          "onClick": handleDownloadClick
+        }, null)])]);
+      }
+    }), vue.createVNode(elementPlus.ElDialog, {
+      "appendToBody": true,
+      "showClose": false,
+      "width": props.dialogWidth,
+      "modelValue": vue.unref(isShowVideoDialog),
+      "onUpdate:modelValue": (v) => {
+        isShowVideoDialog.value = v;
+      }
+    }, {
+      default: () => [vue.createVNode("video", {
+        "class": "mk-video-view__video",
+        "src": props.src,
+        "draggable": "false",
+        "preload": "true",
+        "controls": true,
+        "ref": (el) => videoEl.value = el
+      }, null)],
+      header: (scope) => {
+        return vue.createVNode("div", {
+          "class": "mk-video-view__dialog-header"
+        }, [vue.createVNode(elementPlus.ElButton, {
+          "type": "primary",
+          "icon": elIcons.Download,
+          "onClick": handleDownloadClick
+        }, {
+          default: () => [vue.createTextVNode("下载")]
+        }), vue.createVNode(elementPlus.ElButton, {
+          "icon": elIcons.Close,
+          "onClick": scope.close
+        }, null)]);
+      }
+    })]);
+  }
+});
+const MKVideoView = utils.withInstall(VideoView);
+exports.MKVideoView = MKVideoView;
+exports.default = MKVideoView;
+exports.videoViewProps = videoViewProps;
+//# sourceMappingURL=index-BKHmJq9t.cjs.map

package/dist/cjs/index-BKHmJq9t.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-BKHmJq9t.cjs","sources":["../../src/modules/ms/components/material-list/components/video-view/video-view-options.ts","../../src/modules/ms/components/material-list/components/video-view/video-view.tsx","../../src/modules/ms/components/material-list/components/video-view/index.ts"],"sourcesContent":["import { ExtractPropTypes } from \"vue\";\r\nimport { buildProps } from \"@maketribe/utils\";\r\n\r\nexport const videoViewProps = buildProps({\r\n  src: { type: String, required: true },\r\n  poster: { type: String, required: false },\r\n  dialogWidth: { type: String, default: \"800px\" },\r\n} as const);\r\n\r\nexport type VideoViewProps = ExtractPropTypes<typeof videoViewProps>;\r\n","import { Fragment, Ref, defineComponent, ref, unref, watch } from \"vue\";\r\nimport { ElButton, ElDialog, ElIcon } from \"element-plus\";\r\nimport { Film, View, Download, Close } from \"@element-plus/icons-vue\";\r\nimport MKImageView from \"../image-view\";\r\nimport { videoViewProps } from \"./video-view-options\";\r\n\r\nexport default defineComponent({\r\n  name: \"MKVideoView\",\r\n  props: videoViewProps,\r\n  setup(props) {\r\n    const isShowVideoDialog = ref(false);\r\n\r\n    const videoEl: Ref<HTMLVideoElement | null> = ref(null);\r\n\r\n    const handleViewClick = () => {\r\n      isShowVideoDialog.value = true;\r\n    };\r\n\r\n    const handleDownloadClick = () => {\r\n      if (!props.src) {\r\n        return;\r\n      }\r\n\r\n      const a = document.createElement(\"a\");\r\n      a.setAttribute(\"download\", new Date().getTime().toString());\r\n      a.target = \"_blank\";\r\n      a.href = props.src;\r\n      Object.assign(a.style, { width: \"1px\", height: \"1px\" });\r\n\r\n      document.body.append(a);\r\n      a.click();\r\n\r\n      setTimeout(() => {\r\n        document.body.removeChild(a);\r\n      });\r\n    };\r\n\r\n    watch(isShowVideoDialog, (isShowVideoDialog) => {\r\n      if (!unref(videoEl)) {\r\n        return;\r\n      }\r\n\r\n      if (!isShowVideoDialog) {\r\n        unref(videoEl)!.pause();\r\n        unref(videoEl)!.currentTime = 0;\r\n      }\r\n    });\r\n\r\n    return () => (\r\n      <div class=\"mk-video-view\">\r\n        <MKImageView\r\n          src={props.src}\r\n          showPreview={false}\r\n          v-slots={{\r\n            error: () => {\r\n              return (\r\n                <Fragment>\r\n                  <ElIcon size=\"20\">\r\n                    <Film />\r\n                  </ElIcon>\r\n                  <div class=\"mk-video-view__tools\">\r\n                    <ElButton\r\n                      type=\"primary\"\r\n                      icon={View}\r\n                      onClick={handleViewClick}\r\n                    />\r\n                    <ElButton\r\n                      type=\"primary\"\r\n                      icon={Download}\r\n                      onClick={handleDownloadClick}\r\n                    />\r\n                  </div>\r\n                </Fragment>\r\n              );\r\n            },\r\n          }}\r\n        />\r\n        <ElDialog\r\n          appendToBody\r\n          showClose={false}\r\n          width={props.dialogWidth}\r\n          modelValue={unref(isShowVideoDialog)}\r\n          onUpdate:modelValue={(v) => {\r\n            isShowVideoDialog.value = v;\r\n          }}\r\n          v-slots={{\r\n            header: (scope: any) => {\r\n              return (\r\n                <div class=\"mk-video-view__dialog-header\">\r\n                  <ElButton\r\n                    type=\"primary\"\r\n                    icon={Download}\r\n                    onClick={handleDownloadClick}\r\n                  >\r\n                    下载\r\n                  </ElButton>\r\n                  <ElButton icon={Close} onClick={scope.close} />\r\n                </div>\r\n              );\r\n            },\r\n          }}\r\n        >\r\n          <video\r\n            class=\"mk-video-view__video\"\r\n            src={props.src}\r\n            draggable=\"false\"\r\n            preload=\"true\"\r\n            controls\r\n            ref={(el: any) => (videoEl.value = el)}\r\n          />\r\n        </ElDialog>\r\n      </div>\r\n    );\r\n  },\r\n});\r\n","import { withInstall } from \"@maketribe/utils\";\r\nimport VideoView from \"./video-view\";\r\n\r\nexport const MKVideoView = withInstall(VideoView);\r\nexport default MKVideoView;\r\n\r\nexport * from \"./video-view-options\";\r\n"],"names":["buildProps","defineComponent","name","props","videoViewProps","setup","isShowVideoDialog","ref","videoEl","handleViewClick","value","handleDownloadClick","src","a","document","createElement","setAttribute","Date","getTime","toString","target","href","Object","assign","style","width","height","body","append","click","setTimeout","removeChild","watch","unref","pause","currentTime","_createVNode","MKImageView","error","_Fragment","ElIcon","default","Film","ElButton","View","Download","ElDialog","dialogWidth","v","el","header","scope","_createTextVNode","Close","close","withInstall"],"mappings":"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"}