giime 0.0.20 → 0.0.22

package/lib/components/src/composite/dialogForm/DialogForm.vue2.js

@@ -0,0 +1,175 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+require('../../../../utils/index.js');
+var elementPlus = require('element-plus');
+var VNodeRenderer = require('../../common/VNodeRenderer.js');
+var dialogForm = require('./dialogForm.js');
+var event = require('../../../../utils/src/elementPlus/event.js');
+
+var _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "GmDialogForm"
+  },
+  __name: "DialogForm",
+  props: dialogForm.dialogFormProps,
+  emits: dialogForm.dialogFormEmits,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const events = event.getGmEvent(elementPlus.dialogEmits, emit);
+    const dialogForm = vue.ref();
+    __expose({
+      dialogForm
+    });
+    const slots = vue.useSlots();
+    const formItemLists = vue.computed(() => {
+      const list = slots?.default?.();
+      return list;
+    });
+    const formRef = vue.ref();
+    const resetFormHandle = () => {
+      formRef.value.resetFields();
+      emit("reset", formRef.value);
+    };
+    const submitFormHandle = () => {
+      formRef.value.validate((valid, fields) => {
+        if (valid) {
+          emit("submit", props.formData);
+        } else {
+          emit("vaildFail", fields);
+        }
+      });
+    };
+    const cancelHandle = () => {
+      emit("update:modelValue", false);
+    };
+    return (_ctx, _cache) => {
+      const _component_gm_form_item_module = vue.resolveComponent("gm-form-item-module");
+      const _component_gm_form = vue.resolveComponent("gm-form");
+      const _component_gm_button = vue.resolveComponent("gm-button");
+      const _component_gm_dialog = vue.resolveComponent("gm-dialog");
+      return vue.openBlock(), vue.createBlock(_component_gm_dialog, vue.mergeProps({
+        ref_key: "dialogForm",
+        ref: dialogForm,
+        class: "gm-px-[32px]",
+        style: { "--el-dialog-width": _ctx.width ? _ctx.width : "493px" }
+      }, props, vue.toHandlers(vue.unref(events))), {
+        header: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "header", {}, () => [
+            vue.createElementVNode(
+              "div",
+              null,
+              vue.toDisplayString(_ctx.title),
+              1
+              /* TEXT */
+            )
+          ])
+        ]),
+        footer: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "footer", vue.normalizeProps(vue.guardReactiveProps({ formData: _ctx.formData, formRef: formRef.value })), () => [
+            vue.createVNode(_component_gm_button, { onClick: cancelHandle }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode("\u53D6\u6D88")
+              ]),
+              _: 1
+              /* STABLE */
+            }),
+            vue.createVNode(_component_gm_button, {
+              type: "primary",
+              plain: "",
+              onClick: resetFormHandle
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode("\u91CD\u7F6E")
+              ]),
+              _: 1
+              /* STABLE */
+            }),
+            vue.createVNode(_component_gm_button, {
+              loading: _ctx.loading,
+              type: "primary",
+              onClick: submitFormHandle
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode("\u786E\u5B9A")
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["loading"])
+          ])
+        ]),
+        default: vue.withCtx(() => [
+          vue.createVNode(_component_gm_form, {
+            ref_key: "formRef",
+            ref: formRef,
+            model: _ctx.formData,
+            rules: _ctx.rules,
+            "label-width": _ctx.labelWidth
+          }, {
+            default: vue.withCtx(() => [
+              vue.createCommentVNode(" json \u5F62\u5F0F \u9ED8\u8BA4\u5728 \u6700\u4E0A\u8FB9 "),
+              (vue.openBlock(true), vue.createElementBlock(
+                vue.Fragment,
+                null,
+                vue.renderList(_ctx.formItemList, (item) => {
+                  return vue.openBlock(), vue.createBlock(_component_gm_form_item_module, vue.mergeProps({
+                    key: item.field
+                  }, item, {
+                    modelValue: _ctx.formData[item.field],
+                    "onUpdate:modelValue": ($event) => _ctx.formData[item.field] = $event
+                  }), null, 16, ["modelValue", "onUpdate:modelValue"]);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              )),
+              vue.createCommentVNode(" slot \u5185\u5BB9 "),
+              (vue.openBlock(true), vue.createElementBlock(
+                vue.Fragment,
+                null,
+                vue.renderList(formItemLists.value, (item) => {
+                  return vue.openBlock(), vue.createElementBlock(
+                    vue.Fragment,
+                    {
+                      key: item.label
+                    },
+                    [
+                      vue.createCommentVNode(" \u4F7F\u7528 \u7EDF\u4E00\u5904\u7406item\u7EC4\u4EF6 gm-form-item-module "),
+                      item.type.name === "GmFormItemModule" ? (vue.openBlock(), vue.createBlock(_component_gm_form_item_module, vue.mergeProps({ key: 0 }, { ...item.props, children: item.children }, {
+                        modelValue: _ctx.formData[item.props.field],
+                        "onUpdate:modelValue": ($event) => _ctx.formData[item.props.field] = $event
+                      }), null, 16, ["modelValue", "onUpdate:modelValue"])) : (vue.openBlock(), vue.createElementBlock(
+                        vue.Fragment,
+                        { key: 1 },
+                        [
+                          vue.createCommentVNode(" \u4F7F\u7528 form \u9ED8\u8BA4 item \u7EC4\u4EF6 gm-form-item "),
+                          vue.createCommentVNode(` v-if="item.type.name === 'GmFormItem'" `),
+                          vue.createVNode(vue.unref(VNodeRenderer.default), { vnode: item }, null, 8, ["vnode"])
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      ))
+                    ],
+                    64
+                    /* STABLE_FRAGMENT */
+                  );
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["model", "rules", "label-width"])
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["style"]);
+    };
+  }
+});
+
+exports.default = _sfc_main;
+//# sourceMappingURL=DialogForm.vue2.js.map

package/lib/components/src/composite/dialogForm/DialogForm.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogForm.vue2.js","sources":["../../../../../../../packages/components/src/composite/dialogForm/DialogForm.vue"],"sourcesContent":["<template>\r\n  <gm-dialog ref=\"dialogForm\" class=\"gm-px-[32px]\" :style=\"{ '--el-dialog-width': width ? width : '493px' }\" v-bind=\"props\" v-on=\"events\">\r\n    <template #header>\r\n      <slot name=\"header\">\r\n        <div>{{ title }}</div>\r\n      </slot>\r\n    </template>\r\n\r\n    <gm-form ref=\"formRef\" :model=\"formData\" :rules=\"rules\" :label-width=\"labelWidth\">\r\n      <!-- json 形式 默认在 最上边 -->\r\n      <template v-for=\"item in formItemList\" :key=\"item.field\">\r\n        <gm-form-item-module v-bind=\"item\" v-model=\"formData[item.field]\" />\r\n      </template>\r\n      <!-- slot 内容 -->\r\n      <template v-for=\"item in formItemLists\" :key=\"item.label\">\r\n        <!-- 使用 统一处理item组件 gm-form-item-module -->\r\n        <template v-if=\"item.type.name === 'GmFormItemModule'\">\r\n          <gm-form-item-module v-bind=\"{ ...item.props, children: item.children }\" v-model=\"formData[item.props.field]\" />\r\n        </template>\r\n        <!-- 使用 form 默认 item 组件 gm-form-item -->\r\n        <!-- v-if=\"item.type.name === 'GmFormItem'\" -->\r\n        <template v-else>\r\n          <VNodeRenderer :vnode=\"item\" />\r\n        </template>\r\n      </template>\r\n    </gm-form>\r\n\r\n    <template #footer>\r\n      <slot name=\"footer\" v-bind=\"{ formData, formRef }\">\r\n        <gm-button @click=\"cancelHandle\">取消</gm-button>\r\n        <gm-button type=\"primary\" plain @click=\"resetFormHandle\">重置</gm-button>\r\n        <gm-button :loading=\"loading\" type=\"primary\" @click=\"submitFormHandle\">确定</gm-button>\r\n      </slot>\r\n    </template>\r\n  </gm-dialog>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, ref } from 'vue';\r\nimport { getGmEvent } from '@giime/utils';\r\nimport { dialogEmits as elDialogEmits } from 'element-plus';\r\nimport VNodeRenderer from '../../common/VNodeRenderer';\r\nimport { dialogFormEmits, dialogFormProps } from './dialogForm';\r\nimport type { DialogInstance } from '../../base';\r\nimport type { VNode } from 'vue';\r\nimport type { FormItemModuleProps } from '../formItemModule/formItemModule';\r\ndefineOptions({\r\n  name: 'GmDialogForm',\r\n});\r\nconst props = defineProps(dialogFormProps);\r\nconst emit = defineEmits(dialogFormEmits);\r\nconst events = getGmEvent(elDialogEmits, emit);\r\nconst dialogForm = ref<DialogInstance>();\r\ndefineExpose({\r\n  dialogForm,\r\n});\r\ntype GmDialotFormItemVNode = VNode & {\r\n  type: {\r\n    name: string;\r\n  };\r\n  props: FormItemModuleProps;\r\n};\r\nconst slots = defineSlots<{\r\n  header?(): any;\r\n  footer?(): any;\r\n  default?(): GmDialotFormItemVNode[];\r\n}>();\r\n// 合并 json 及 插槽数据\r\nconst formItemLists = computed(() => {\r\n  const list = slots?.default?.();\r\n  // const list = slots?.form?.().filter(item => item.type.name === 'GmFormItemModule');\r\n  // const propsList = list?.map(item => {\r\n  //   return {\r\n  //     ...item.props,\r\n  //     children: item.children,\r\n  //   };\r\n  // }) as FormItemModuleProps[];\r\n  // const itemList = [...props.formItemList, ...propsList];\r\n  return list;\r\n});\r\nconst formRef = ref();\r\nconst resetFormHandle = () => {\r\n  formRef.value.resetFields();\r\n  emit('reset', formRef.value);\r\n};\r\nconst submitFormHandle = () => {\r\n  formRef.value.validate((valid: any, fields: any) => {\r\n    if (valid) {\r\n      emit('submit', props.formData);\r\n    } else {\r\n      emit('vaildFail', fields);\r\n    }\r\n  });\r\n};\r\nconst cancelHandle = () => {\r\n  emit('update:modelValue', false);\r\n};\r\n</script>\r\n<style scoped></style>\r\n"],"names":["getGmEvent","elDialogEmits","ref","_useSlots","computed"],"mappings":";;;;;;;;;;;;;;;;;;;AAiDA,IAAA,MAAM,KAAQ,GAAA,OAAA,CAAA;AACd,IAAA,MAAM,IAAO,GAAA,MAAA,CAAA;AACb,IAAM,MAAA,MAAA,GAASA,gBAAW,CAAAC,uBAAA,EAAe,IAAI,CAAA,CAAA;AAC7C,IAAA,MAAM,aAAaC,OAAoB,EAAA,CAAA;AACvC,IAAa,QAAA,CAAA;AAAA,MACX,UAAA;AAAA,KACD,CAAA,CAAA;AAOD,IAAA,MAAM,QAAQC,YAAA,EAAA,CAAA;AAMd,IAAM,MAAA,aAAA,GAAgBC,aAAS,MAAM;AACnC,MAAM,MAAA,IAAA,GAAO,OAAO,OAAU,IAAA,CAAA;AAS9B,MAAO,OAAA,IAAA,CAAA;AAAA,KACR,CAAA,CAAA;AACD,IAAA,MAAM,UAAUF,OAAI,EAAA,CAAA;AACpB,IAAA,MAAM,kBAAkB,MAAM;AAC5B,MAAA,OAAA,CAAQ,MAAM,WAAY,EAAA,CAAA;AAC1B,MAAK,IAAA,CAAA,OAAA,EAAS,QAAQ,KAAK,CAAA,CAAA;AAAA,KAC7B,CAAA;AACA,IAAA,MAAM,mBAAmB,MAAM;AAC7B,MAAA,OAAA,CAAQ,KAAM,CAAA,QAAA,CAAS,CAAC,KAAA,EAAY,MAAgB,KAAA;AAClD,QAAA,IAAI,KAAO,EAAA;AACT,UAAK,IAAA,CAAA,QAAA,EAAU,MAAM,QAAQ,CAAA,CAAA;AAAA,SACxB,MAAA;AACL,UAAA,IAAA,CAAK,aAAa,MAAM,CAAA,CAAA;AAAA,SAC1B;AAAA,OACD,CAAA,CAAA;AAAA,KACH,CAAA;AACA,IAAA,MAAM,eAAe,MAAM;AACzB,MAAA,IAAA,CAAK,qBAAqB,KAAK,CAAA,CAAA;AAAA,KACjC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/src/composite/dialogForm/dialogForm.d.ts

@@ -0,0 +1,99 @@
+import type { FormItemModuleProps } from '../formItemModule/formItemModule';
+export declare const dialogFormProps: {
+    formItemList: {
+        type: {
+            (arrayLength: number): FormItemModuleProps[];
+            (...items: FormItemModuleProps[]): FormItemModuleProps[];
+            new (arrayLength: number): FormItemModuleProps[];
+            new (...items: FormItemModuleProps[]): FormItemModuleProps[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: () => never[];
+    };
+    formData: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    rules: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+    labelWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    appendToBody: BooleanConstructor;
+    appendTo: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string & {}) | (() => string) | ((new (...args: any[]) => string & {}) | (() => string))[], unknown, unknown, "body", boolean>;
+    beforeClose: {
+        readonly type: import("vue").PropType<import("element-plus").DialogBeforeCloseFn>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    destroyOnClose: BooleanConstructor;
+    closeOnClickModal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    closeOnPressEscape: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    lockScroll: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    modal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    openDelay: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
+    closeDelay: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
+    top: {
+        readonly type: import("vue").PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    modelValue: BooleanConstructor;
+    modalClass: StringConstructor;
+    width: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    zIndex: {
+        readonly type: import("vue").PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    trapFocus: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    headerAriaLevel: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
+    center: BooleanConstructor;
+    alignCenter: BooleanConstructor;
+    closeIcon: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>) | ((new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any>))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    draggable: BooleanConstructor;
+    overflow: BooleanConstructor;
+    fullscreen: BooleanConstructor;
+    showClose: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    title: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+    ariaLevel: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
+};
+export declare const dialogFormEmits: {
+    submit: (formData: any) => boolean;
+    reset: (formRef: any) => boolean;
+    vaildFail: (fields: any) => boolean;
+    open: () => boolean;
+    opened: () => boolean;
+    close: () => boolean;
+    closed: () => boolean;
+    "update:modelValue": (value: boolean) => boolean;
+    openAutoFocus: () => boolean;
+    closeAutoFocus: () => boolean;
+};

package/lib/components/src/composite/dialogForm/dialogForm.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var dialog = require('../../base/dialog/dialog.js');
+
+const dialogFormProps = {
+  ...dialog.dialogProps,
+  // 表单JSON配置
+  formItemList: {
+    type: Array,
+    default: () => []
+  },
+  // 表单数据
+  formData: {
+    type: Object,
+    default: () => ({})
+  },
+  // 表单验证规则
+  rules: {
+    type: Object,
+    default: () => {
+    }
+  },
+  // label 宽度
+  labelWidth: {
+    type: String,
+    default: ""
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  }
+};
+const dialogFormEmits = {
+  ...dialog.dialogEmits,
+  submit: (formData) => !!formData,
+  reset: (formRef) => !!formRef,
+  vaildFail: (fields) => !!fields
+};
+
+exports.dialogFormEmits = dialogFormEmits;
+exports.dialogFormProps = dialogFormProps;
+//# sourceMappingURL=dialogForm.js.map

package/lib/components/src/composite/dialogForm/dialogForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogForm.js","sources":["../../../../../../../packages/components/src/composite/dialogForm/dialogForm.ts"],"sourcesContent":["import { dialogEmits, dialogProps } from '../../base/dialog/dialog';\r\nimport type { FormItemModuleProps } from '../formItemModule/formItemModule';\r\nexport const dialogFormProps = {\r\n  ...dialogProps,\r\n  // 表单JSON配置\r\n  formItemList: {\r\n    type: Array<FormItemModuleProps>,\r\n    default: () => [],\r\n  },\r\n  // 表单数据\r\n  formData: {\r\n    type: Object,\r\n    default: () => ({}),\r\n  },\r\n  // 表单验证规则\r\n  rules: {\r\n    type: Object,\r\n    default: () => {},\r\n  },\r\n  // label 宽度\r\n  labelWidth: {\r\n    type: String,\r\n    default: '',\r\n  },\r\n  loading: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n};\r\n\r\nexport const dialogFormEmits = {\r\n  ...dialogEmits,\r\n  submit: (formData: any) => !!formData,\r\n  reset: (formRef: any) => !!formRef,\r\n  vaildFail: (fields: any) => !!fields,\r\n};\r\n"],"names":["dialogProps","dialogEmits"],"mappings":";;;;AAEO,MAAM,eAAkB,GAAA;AAAA,EAC7B,GAAGA,kBAAA;AAAA;AAAA,EAEH,YAAc,EAAA;AAAA,IACZ,IAAM,EAAA,KAAA;AAAA,IACN,OAAA,EAAS,MAAM,EAAC;AAAA,GAClB;AAAA;AAAA,EAEA,QAAU,EAAA;AAAA,IACR,IAAM,EAAA,MAAA;AAAA,IACN,OAAA,EAAS,OAAO,EAAC,CAAA;AAAA,GACnB;AAAA;AAAA,EAEA,KAAO,EAAA;AAAA,IACL,IAAM,EAAA,MAAA;AAAA,IACN,SAAS,MAAM;AAAA,KAAC;AAAA,GAClB;AAAA;AAAA,EAEA,UAAY,EAAA;AAAA,IACV,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,EAAA;AAAA,GACX;AAAA,EACA,OAAS,EAAA;AAAA,IACP,IAAM,EAAA,OAAA;AAAA,IACN,OAAS,EAAA,KAAA;AAAA,GACX;AACF,EAAA;AAEO,MAAM,eAAkB,GAAA;AAAA,EAC7B,GAAGC,kBAAA;AAAA,EACH,MAAQ,EAAA,CAAC,QAAkB,KAAA,CAAC,CAAC,QAAA;AAAA,EAC7B,KAAO,EAAA,CAAC,OAAiB,KAAA,CAAC,CAAC,OAAA;AAAA,EAC3B,SAAW,EAAA,CAAC,MAAgB,KAAA,CAAC,CAAC,MAAA;AAChC;;;;;"}