skyline-vue-admin 0.0.12 → 0.0.14

package/dist/components/tree-with-details/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("element-plus/es/components/card/style/css");require("element-plus/es/components/col/style/css");require("element-plus/es/components/row/style/css");require("element-plus/es/components/skeleton/style/css");require("element-plus/es/components/tree/style/css");const e=require("vue");require("../../hooks/useUser.cjs");require("../../hooks/usePermission.cjs");require("../../hooks/useMenu.cjs");require("../../hooks/useTab.cjs");require("../../hooks/useRouteKeepAlive.cjs");require("../../hooks/useSize.cjs");require("../../hooks/useLang.cjs");require("../../hooks/useTheme.cjs");require("../../hooks/useList.cjs");require("../../hooks/useHiddenTitle.cjs");require("../../hooks/useForm.cjs");require("../../hooks/useShow.cjs");require("../../hooks/useReferenceArrayField.cjs");const v=require("../../hooks/useTreeWithDetails.cjs");require("../../hooks/useFormGrid.cjs");const g=require("../../hooks/useReferenceArrayInput.cjs"),h=require("../../setup/index.cjs"),m=require("@vueuse/core"),u=require("element-plus"),N=require("vue-router"),S=e.defineComponent({name:"SkyTreeWithDetails",inheritAttrs:!1,props:{create:Object,edit:Object,optionChildren:{type:String,default:"children"},optionName:{type:String,default:"name"},nodeKey:{type:String,default:"id"},size:{type:Number,default:30}},setup(t,{attrs:f}){const l=N.useRoute();let d;const{state:o,isLoading:c,execute:i}=m.useAsyncState(async a=>(d=new AbortController,h.skyConfig.dataProvider?.getList?.(l.meta.resource,{pagination:{page:1,perPage:t.size},filter:a,signal:d.signal})),void 0,{immediate:!0}),y=a=>{r.value===a[t.nodeKey]?r.value=void 0:r.value=a[t.nodeKey]},r=e.ref(),n=e.ref(),s=e.ref(0);v.useProvideTreeWithDetails({createSuccess:async a=>{await i(),s.value++,a.data?.[t.nodeKey]&&(n.value=a.data[t.nodeKey])},editSuccess:async()=>{await i()},deleteSuccess:async()=>{await i(),r.value=void 0}}),g.useProvideReferenceArrayInput({reference:l.meta.resource,getList:a=>i(0,a),listData:o,listLoading:c});const q=e.computed(()=>r.value?[r.value]:n.value?[n.value]:[]);return()=>e.createVNode("div",{class:"sky-tree-with-details"},[e.createVNode(u.ElRow,null,{default:()=>[e.createVNode(u.ElCol,{span:8},{default:()=>[e.createVNode(u.ElCard,null,{default:()=>[e.createVNode(u.ElSkeleton,{loading:c.value,animated:!0},{default:()=>[e.createVNode(u.ElTree,e.mergeProps({data:o.value?.data,props:{children:t.optionChildren,label:t.optionName},defaultExpandAll:!1,accordion:!0,expandOnClickNode:!1,nodeKey:t.nodeKey,"onNode-click":y,highlightCurrent:!0,currentNodeKey:r.value,defaultExpandedKeys:q.value},f),null)]})]})]}),e.createVNode(u.ElCol,{offset:1,span:15},{default:()=>[r.value?t.edit?e.h(t.edit,{key:r.value,dataId:r.value}):null:t.create?e.h(t.create,{key:s.value}):null]})]})])}});exports.SkyTreeWithDetails=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("element-plus/es/components/card/style/css");require("element-plus/es/components/col/style/css");require("element-plus/es/components/row/style/css");require("element-plus/es/components/skeleton/style/css");require("element-plus/es/components/tree/style/css");const e=require("vue");require("../../hooks/useUser.cjs");require("../../hooks/usePermission.cjs");require("../../hooks/useMenu.cjs");require("../../hooks/useTab.cjs");require("../../hooks/useRouteKeepAlive.cjs");require("../../hooks/useSize.cjs");require("../../hooks/useLang.cjs");require("../../hooks/useTheme.cjs");require("../../hooks/useList.cjs");require("../../hooks/useHiddenTitle.cjs");require("../../hooks/useForm.cjs");require("../../hooks/useShow.cjs");require("../../hooks/useReferenceArrayField.cjs");const h=require("../../hooks/useTreeWithDetails.cjs");require("../../hooks/useFormGrid.cjs");const m=require("../../hooks/useReferenceArrayInput.cjs"),C=require("../../setup/index.cjs"),S=require("@vueuse/core"),n=require("element-plus"),k=require("vue-router"),E=e.defineComponent({name:"SkyTreeWithDetails",inheritAttrs:!1,props:{create:Object,edit:Object,optionChildren:{type:String,default:"children"},optionName:{type:String,default:"name"},nodeKey:{type:String,default:"id"},size:{type:Number,default:30}},setup(t,{attrs:v}){const d=k.useRoute();let o;const{state:s,isLoading:c,execute:i}=S.useAsyncState(async a=>(o=new AbortController,C.skyConfig.dataProvider?.getList?.(d.meta.resource,{pagination:{page:1,perPage:t.size},filter:a,signal:o.signal})),void 0,{immediate:!0}),y=a=>{r.value===a[t.nodeKey]?r.value=void 0:r.value=a[t.nodeKey]},q=a=>{u.value=void 0,l.value=a[t.nodeKey]},g=()=>{l.value=void 0},r=e.ref(),u=e.ref(),l=e.ref(),f=e.ref(0);h.useProvideTreeWithDetails({createSuccess:async a=>{await i(),f.value++,a.data?.[t.nodeKey]&&(u.value=a.data[t.nodeKey])},editSuccess:async()=>{await i()},deleteSuccess:async()=>{await i(),r.value===u.value&&(u.value=void 0),r.value=void 0}}),m.useProvideReferenceArrayInput({reference:d.meta.resource,getList:a=>i(0,a),listData:s,listLoading:c});const N=e.computed(()=>r.value?[r.value]:u.value?[u.value]:l.value?[l.value]:[]);return()=>e.createVNode("div",{class:"sky-tree-with-details"},[e.createVNode(n.ElRow,null,{default:()=>[e.createVNode(n.ElCol,{span:8},{default:()=>[e.createVNode(n.ElCard,null,{default:()=>[e.createVNode(n.ElSkeleton,{loading:c.value,animated:!0},{default:()=>[e.createVNode(n.ElTree,e.mergeProps({data:s.value?.data,props:{children:t.optionChildren,label:t.optionName},defaultExpandAll:!1,accordion:!0,expandOnClickNode:!1,nodeKey:t.nodeKey,"onNode-click":y,"onNode-expand":q,"onNode-collapse":g,highlightCurrent:!0,currentNodeKey:r.value,defaultExpandedKeys:N.value},v),null)]})]})]}),e.createVNode(n.ElCol,{offset:1,span:15},{default:()=>[r.value?t.edit?e.h(t.edit,{key:r.value,dataId:r.value}):null:t.create?e.h(t.create,{key:f.value}):null]})]})])}});exports.SkyTreeWithDetails=E;
 //# sourceMappingURL=index.cjs.map

package/dist/components/tree-with-details/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/tree-with-details/index.tsx"],"sourcesContent":["import { useProvideReferenceArrayInput, useProvideTreeWithDetails } from '@/hooks'\nimport type { CreateResult, GetListResult, Identifier } from '@/provides'\nimport { skyConfig, type SkyComponent } from '@/setup'\nimport { useAsyncState } from '@vueuse/core'\nimport { ElCard, ElCol, ElRow, ElSkeleton, ElTree } from 'element-plus'\nimport { computed, defineComponent, h, ref } from 'vue'\nimport { useRoute } from 'vue-router'\n\nexport interface SkyTreeWithDetailsProps {\n  create?: SkyComponent\n  edit?: SkyComponent\n  optionChildren?: string\n  optionName?: string\n  nodeKey?: string\n  size?: number\n}\n\nexport const SkyTreeWithDetails = defineComponent<SkyTreeWithDetailsProps>({\n  name: 'SkyTreeWithDetails',\n  inheritAttrs: false,\n  props: {\n    create: Object,\n    edit: Object,\n    optionChildren: {\n      type: String,\n      default: 'children',\n    },\n    optionName: {\n      type: String,\n      default: 'name',\n    },\n    nodeKey: {\n      type: String,\n      default: 'id',\n    },\n    size: {\n      type: Number,\n      default: 30,\n    },\n  },\n  setup(props, { attrs }) {\n    const route = useRoute()\n\n    let controller: AbortController | undefined\n    const { state, isLoading, execute } = useAsyncState<\n      GetListResult | undefined,\n      [filter?: Record<string, unknown>]\n    >(\n      async (filter) => {\n        controller = new AbortController()\n        return skyConfig.dataProvider?.getList?.(route.meta.resource as string, {\n          pagination: { page: 1, perPage: props.size! },\n          filter,\n          signal: controller.signal,\n        })\n      },\n      undefined,\n      {\n        immediate: true,\n      },\n    )\n\n    const onNodeClick = (node: Record<string, unknown>) => {\n      if (editId.value === node[props.nodeKey!]) {\n        // 再次点击选中的节点，退出编辑\n        editId.value = undefined\n      } else {\n        editId.value = node[props.nodeKey!] as Identifier\n      }\n    }\n\n    const editId = ref<Identifier>()\n    const lastCreateId = ref<Identifier>()\n    const createNum = ref(0)\n\n    useProvideTreeWithDetails({\n      createSuccess: async (result: CreateResult) => {\n        await execute()\n        createNum.value++\n        if (result.data?.[props.nodeKey!]) {\n          lastCreateId.value = result.data[props.nodeKey!] as Identifier\n        }\n      },\n      editSuccess: async () => {\n        await execute()\n      },\n      deleteSuccess: async () => {\n        await execute()\n        editId.value = undefined\n      },\n    })\n\n    // 自动注入一次关联数据\n    useProvideReferenceArrayInput({\n      reference: route.meta.resource as string,\n      getList: (filter?: Record<string, unknown>) => execute(0, filter),\n      listData: state,\n      listLoading: isLoading,\n    })\n\n    const defaultExpandedKeys = computed(() => {\n      if (editId.value) {\n        return [editId.value]\n      } else if (lastCreateId.value) {\n        return [lastCreateId.value]\n      }\n      return []\n    })\n\n    return () => (\n      <div class=\"sky-tree-with-details\">\n        <ElRow>\n          <ElCol span={8}>\n            <ElCard>\n              <ElSkeleton loading={isLoading.value} animated>\n                <ElTree\n                  data={state.value?.data}\n                  props={{ children: props.optionChildren, label: props.optionName }}\n                  defaultExpandAll={false}\n                  accordion={true}\n                  expandOnClickNode={false}\n                  nodeKey={props.nodeKey}\n                  onNode-click={onNodeClick}\n                  highlightCurrent\n                  currentNodeKey={editId.value}\n                  defaultExpandedKeys={defaultExpandedKeys.value}\n                  {...attrs}\n                ></ElTree>\n              </ElSkeleton>\n            </ElCard>\n          </ElCol>\n          <ElCol offset={1} span={15}>\n            {editId.value\n              ? props.edit\n                ? h(props.edit, { key: editId.value, dataId: editId.value })\n                : null\n              : props.create\n                ? h(props.create, { key: createNum.value })\n                : null}\n          </ElCol>\n        </ElRow>\n      </div>\n    )\n  },\n})\n"],"names":["SkyTreeWithDetails","defineComponent","name","inheritAttrs","props","create","edit","optionChildren","type","default","optionName","nodeKey","size","attrs","route","useRoute","controller","execute","useAsyncState","filter","pagination","page","immediate","editId","ref","lastCreateId","createNum","useProvideTreeWithDetails","useProvideReferenceArrayInput","reference","listData","listLoading","defaultExpandedKeys","computed","_createVNode","state","onNodeClick","h"],"mappings":"qmCAiBAA,EAAAC,EAAAA,gBAAA,CACEC,KAAAA,qBACAC,aAAAA,GACAC,MAAAA,CACEC,OAAAA,OACAC,KAAAA,OACAC,eAAAA,CACEC,KAAAA,OACAC,QAAAA,YAEFC,WAAAA,CACEF,KAAAA,OACAC,QAAAA,QAEFE,QAAAA,CACEH,KAAAA,OACAC,QAAAA,MAEFG,KAAAA,CACEJ,KAAAA,OACAC,QAAAA,EACF,YAEaI,MAAAA,CAAM,EAAA,CACnB,MAAAC,EAAAC,EAAAA,SAAA,EAEA,IAAAC,4BAC0BC,QAAAA,CAAQ,EAAAC,EAAAA,cAAA,MAAAC,IAK9BH,EAAAA,IAAAA,qEAEEI,WAAAA,CAAcC,KAAAA,0CAGhB,CAAA,WAIAC,UAAAA,EACF,CAAA,oEAYFC,EAAAC,EAAAA,IAAA,EACAC,EAAAD,EAAAA,IAAA,EACAE,EAAAF,EAAAA,IAAA,CAAA,EAEAG,4BAAAA,gLAcE,CACF,CAAA,EAGAC,gCAAAA,CACEC,UAAAA,EAAAA,KAAAA,2BAEAC,SAAAA,EACAC,YAAAA,CACF,CAAA,EAEA,MAAAC,EAAAC,EAAAA,SAAA,YAEI,CAAAV,EAAA,KAAA,EACFE,EAAA,MACE,CAAAA,EAAA,KAAA,EAEF,CAAA,CACF,EAEA,MAAA,IAAAS,EAAAA,YAAA,MAAA,CAAO,MAAA,sDAAAzB,QAAAA,IAAAA,CAAAA,EAAAA,YAAAA,QAAAA,OAGa,EAAA,CAAAA,QAAAA,IAAAA,CAAAA,cAAAA,EAAAA,OAAAA,KAAAA,CAAAA,QAAAA,IAAAA,CAAAA,EAAAA,YAAAA,aAAAA,iBAE0B,SAAA,EAAA,EAAA,CAAAA,QAAAA,IAAAA,CAAAA,cAAAA,EAAAA,OAAAA,EAAAA,WAAAA,CAAA,KAAA0B,EAAA,OAAA,0DAGkC,iBAAA,GAC3C,UAAA,GACR,kBAAA,qBAEO,eAAAC,EACG,iBAAA,0BAEG,oBAAAJ,EAAA,KACkB,EAAAnB,CAAA,EAAA,IAAA,CAAA,CACrC,CAAA,CAAA,CAAA,CAAA,CAAA,2BAAA,OAAA,SAKS,EAAA,CAAAJ,QAAAA,IAAAA,CAAAA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,EAAAA,EAAAA,KAAAA,2BAGsC,CAAA,EAAA,KAAAL,EAAA,OAAAiC,EAAAA,EAAAjC,EAAA,OAAA,oBAIpD,CAAA,CAAA,KAKpB,CACF,CAAA"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/tree-with-details/index.tsx"],"sourcesContent":["import { useProvideReferenceArrayInput, useProvideTreeWithDetails } from '@/hooks'\nimport type { CreateResult, GetListResult, Identifier } from '@/provides'\nimport { skyConfig, type SkyComponent } from '@/setup'\nimport { useAsyncState } from '@vueuse/core'\nimport { ElCard, ElCol, ElRow, ElSkeleton, ElTree } from 'element-plus'\nimport { computed, defineComponent, h, ref } from 'vue'\nimport { useRoute } from 'vue-router'\n\nexport interface SkyTreeWithDetailsProps {\n  create?: SkyComponent\n  edit?: SkyComponent\n  optionChildren?: string\n  optionName?: string\n  nodeKey?: string\n  size?: number\n}\n\nexport const SkyTreeWithDetails = defineComponent<SkyTreeWithDetailsProps>({\n  name: 'SkyTreeWithDetails',\n  inheritAttrs: false,\n  props: {\n    create: Object,\n    edit: Object,\n    optionChildren: {\n      type: String,\n      default: 'children',\n    },\n    optionName: {\n      type: String,\n      default: 'name',\n    },\n    nodeKey: {\n      type: String,\n      default: 'id',\n    },\n    size: {\n      type: Number,\n      default: 30,\n    },\n  },\n  setup(props, { attrs }) {\n    const route = useRoute()\n\n    let controller: AbortController | undefined\n    const { state, isLoading, execute } = useAsyncState<\n      GetListResult | undefined,\n      [filter?: Record<string, unknown>]\n    >(\n      async (filter) => {\n        controller = new AbortController()\n        return skyConfig.dataProvider?.getList?.(route.meta.resource as string, {\n          pagination: { page: 1, perPage: props.size! },\n          filter,\n          signal: controller.signal,\n        })\n      },\n      undefined,\n      {\n        immediate: true,\n      },\n    )\n\n    const onNodeClick = (node: Record<string, unknown>) => {\n      if (editId.value === node[props.nodeKey!]) {\n        // 再次点击选中的节点，退出编辑\n        editId.value = undefined\n      } else {\n        editId.value = node[props.nodeKey!] as Identifier\n      }\n    }\n\n    const onNodeExpand = (node: Record<string, unknown>) => {\n      // 以最新的展开为准，取消创建时候的展开效果\n      lastCreateId.value = undefined\n      lastExpandId.value = node[props.nodeKey!] as Identifier\n    }\n\n    const onNodeCollapse = () => {\n      lastExpandId.value = undefined\n    }\n\n    const editId = ref<Identifier>()\n    const lastCreateId = ref<Identifier>()\n    const lastExpandId = ref<Identifier>()\n    const createNum = ref(0)\n\n    useProvideTreeWithDetails({\n      createSuccess: async (result: CreateResult) => {\n        await execute()\n        createNum.value++\n        if (result.data?.[props.nodeKey!]) {\n          lastCreateId.value = result.data[props.nodeKey!] as Identifier\n        }\n      },\n      editSuccess: async () => {\n        await execute()\n      },\n      deleteSuccess: async () => {\n        await execute()\n        if (editId.value === lastCreateId.value) {\n          lastCreateId.value = undefined\n        }\n        editId.value = undefined\n      },\n    })\n\n    // 自动注入一次关联数据\n    useProvideReferenceArrayInput({\n      reference: route.meta.resource as string,\n      getList: (filter?: Record<string, unknown>) => execute(0, filter),\n      listData: state,\n      listLoading: isLoading,\n    })\n\n    const defaultExpandedKeys = computed(() => {\n      if (editId.value) {\n        return [editId.value]\n      } else if (lastCreateId.value) {\n        return [lastCreateId.value]\n      } else if (lastExpandId.value) {\n        return [lastExpandId.value]\n      }\n      return []\n    })\n\n    return () => (\n      <div class=\"sky-tree-with-details\">\n        <ElRow>\n          <ElCol span={8}>\n            <ElCard>\n              <ElSkeleton loading={isLoading.value} animated>\n                <ElTree\n                  data={state.value?.data}\n                  props={{ children: props.optionChildren, label: props.optionName }}\n                  defaultExpandAll={false}\n                  accordion={true}\n                  expandOnClickNode={false}\n                  nodeKey={props.nodeKey}\n                  onNode-click={onNodeClick}\n                  onNode-expand={onNodeExpand}\n                  onNode-collapse={onNodeCollapse}\n                  highlightCurrent\n                  currentNodeKey={editId.value}\n                  defaultExpandedKeys={defaultExpandedKeys.value}\n                  {...attrs}\n                ></ElTree>\n              </ElSkeleton>\n            </ElCard>\n          </ElCol>\n          <ElCol offset={1} span={15}>\n            {editId.value\n              ? props.edit\n                ? h(props.edit, { key: editId.value, dataId: editId.value })\n                : null\n              : props.create\n                ? h(props.create, { key: createNum.value })\n                : null}\n          </ElCol>\n        </ElRow>\n      </div>\n    )\n  },\n})\n"],"names":["SkyTreeWithDetails","defineComponent","name","inheritAttrs","props","create","edit","optionChildren","type","default","optionName","nodeKey","size","attrs","route","useRoute","controller","execute","useAsyncState","filter","pagination","page","immediate","editId","ref","lastCreateId","lastExpandId","createNum","useProvideTreeWithDetails","useProvideReferenceArrayInput","reference","listData","listLoading","defaultExpandedKeys","computed","_createVNode","state","onNodeClick","onNodeExpand","onNodeCollapse","h"],"mappings":"qmCAiBAA,EAAAC,EAAAA,gBAAA,CACEC,KAAAA,qBACAC,aAAAA,GACAC,MAAAA,CACEC,OAAAA,OACAC,KAAAA,OACAC,eAAAA,CACEC,KAAAA,OACAC,QAAAA,YAEFC,WAAAA,CACEF,KAAAA,OACAC,QAAAA,QAEFE,QAAAA,CACEH,KAAAA,OACAC,QAAAA,MAEFG,KAAAA,CACEJ,KAAAA,OACAC,QAAAA,EACF,YAEaI,MAAAA,CAAM,EAAA,CACnB,MAAAC,EAAAC,EAAAA,SAAA,EAEA,IAAAC,4BAC0BC,QAAAA,CAAQ,EAAAC,EAAAA,cAAA,MAAAC,IAK9BH,EAAAA,IAAAA,qEAEEI,WAAAA,CAAcC,KAAAA,0CAGhB,CAAA,WAIAC,UAAAA,EACF,CAAA,sIAsBFC,EAAAC,EAAAA,IAAA,EACAC,EAAAD,EAAAA,IAAA,EACAE,EAAAF,EAAAA,IAAA,EACAG,EAAAH,EAAAA,IAAA,CAAA,EAEAI,4BAAAA,kKAaIL,EAAA,QAAAE,EAAA,sCAIF,CACF,CAAA,EAGAI,gCAAAA,CACEC,UAAAA,EAAAA,KAAAA,2BAEAC,SAAAA,EACAC,YAAAA,CACF,CAAA,EAEA,MAAAC,EAAAC,EAAAA,SAAA,YAEI,CAAAX,EAAA,KAAA,EACFE,EAAA,MACE,CAAAA,EAAA,KAAA,EACFC,EAAA,MACE,CAAAA,EAAA,KAAA,EAEF,CAAA,CACF,EAEA,MAAA,IAAAS,EAAAA,YAAA,MAAA,CAAO,MAAA,sDAAA1B,QAAAA,IAAAA,CAAAA,EAAAA,YAAAA,QAAAA,OAGa,EAAA,CAAAA,QAAAA,IAAAA,CAAAA,cAAAA,EAAAA,OAAAA,KAAAA,CAAAA,QAAAA,IAAAA,CAAAA,EAAAA,YAAAA,aAAAA,iBAE0B,SAAA,EAAA,EAAA,CAAAA,QAAAA,IAAAA,CAAAA,cAAAA,EAAAA,OAAAA,EAAAA,WAAAA,CAAA,KAAA2B,EAAA,OAAA,0DAGkC,iBAAA,GAC3C,UAAA,GACR,kBAAA,qBAEO,eAAAC,EACG,gBAAAC,EACE,kBAAAC,EACI,iBAAA,0BAEH,oBAAAN,EAAA,KACkB,EAAApB,CAAA,EAAA,IAAA,CAAA,CACrC,CAAA,CAAA,CAAA,CAAA,CAAA,2BAAA,OAAA,SAKS,EAAA,CAAAJ,QAAAA,IAAAA,CAAAA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,EAAAA,EAAAA,KAAAA,2BAGsC,CAAA,EAAA,KAAAL,EAAA,OAAAoC,EAAAA,EAAApC,EAAA,OAAA,oBAIpD,CAAA,CAAA,KAKpB,CACF,CAAA"}

package/dist/components/tree-with-details/index.mjs

@@ -3,7 +3,7 @@ import "element-plus/es/components/col/style/css";
 import "element-plus/es/components/row/style/css";
 import "element-plus/es/components/skeleton/style/css";
 import "element-plus/es/components/tree/style/css";
-import { defineComponent as g, ref as l, computed as h, createVNode as i, mergeProps as C, h as c } from "vue";
+import { defineComponent as C, ref as r, computed as K, createVNode as n, mergeProps as k, h as f } from "vue";
 import "../../hooks/useUser.mjs";
 import "../../hooks/usePermission.mjs";
 import "../../hooks/useMenu.mjs";
@@ -17,14 +17,14 @@ import "../../hooks/useHiddenTitle.mjs";
 import "../../hooks/useForm.mjs";
 import "../../hooks/useShow.mjs";
 import "../../hooks/useReferenceArrayField.mjs";
-import { useProvideTreeWithDetails as k } from "../../hooks/useTreeWithDetails.mjs";
+import { useProvideTreeWithDetails as E } from "../../hooks/useTreeWithDetails.mjs";
 import "../../hooks/useFormGrid.mjs";
-import { useProvideReferenceArrayInput as K } from "../../hooks/useReferenceArrayInput.mjs";
-import { skyConfig as S } from "../../setup/index.mjs";
-import { useAsyncState as N } from "@vueuse/core";
-import { ElRow as E, ElCol as f, ElCard as w, ElSkeleton as x, ElTree as b } from "element-plus";
-import { useRoute as A } from "vue-router";
-const te = /* @__PURE__ */ g({
+import { useProvideReferenceArrayInput as S } from "../../hooks/useReferenceArrayInput.mjs";
+import { skyConfig as x } from "../../setup/index.mjs";
+import { useAsyncState as w } from "@vueuse/core";
+import { ElRow as b, ElCol as p, ElCard as A, ElSkeleton as I, ElTree as P } from "element-plus";
+import { useRoute as D } from "vue-router";
+const ie = /* @__PURE__ */ C({
   name: "SkyTreeWithDetails",
   inheritAttrs: !1,
   props: {
@@ -48,56 +48,60 @@ const te = /* @__PURE__ */ g({
     }
   },
   setup(e, {
-    attrs: p
+    attrs: v
   }) {
-    const n = A();
-    let d;
+    const d = D();
+    let u;
     const {
-      state: u,
-      isLoading: m,
-      execute: r
-    } = N(async (a) => (d = new AbortController(), S.dataProvider?.getList?.(n.meta.resource, {
+      state: s,
+      isLoading: c,
+      execute: l
+    } = w(async (a) => (u = new AbortController(), x.dataProvider?.getList?.(d.meta.resource, {
       pagination: {
         page: 1,
         perPage: e.size
       },
       filter: a,
-      signal: d.signal
+      signal: u.signal
     })), void 0, {
       immediate: !0
     }), y = (a) => {
       t.value === a[e.nodeKey] ? t.value = void 0 : t.value = a[e.nodeKey];
-    }, t = l(), o = l(), s = l(0);
-    k({
+    }, g = (a) => {
+      i.value = void 0, o.value = a[e.nodeKey];
+    }, h = () => {
+      o.value = void 0;
+    }, t = r(), i = r(), o = r(), m = r(0);
+    E({
       createSuccess: async (a) => {
-        await r(), s.value++, a.data?.[e.nodeKey] && (o.value = a.data[e.nodeKey]);
+        await l(), m.value++, a.data?.[e.nodeKey] && (i.value = a.data[e.nodeKey]);
       },
       editSuccess: async () => {
-        await r();
+        await l();
       },
       deleteSuccess: async () => {
-        await r(), t.value = void 0;
+        await l(), t.value === i.value && (i.value = void 0), t.value = void 0;
       }
-    }), K({
-      reference: n.meta.resource,
-      getList: (a) => r(0, a),
-      listData: u,
-      listLoading: m
+    }), S({
+      reference: d.meta.resource,
+      getList: (a) => l(0, a),
+      listData: s,
+      listLoading: c
     });
-    const v = h(() => t.value ? [t.value] : o.value ? [o.value] : []);
-    return () => i("div", {
+    const N = K(() => t.value ? [t.value] : i.value ? [i.value] : o.value ? [o.value] : []);
+    return () => n("div", {
       class: "sky-tree-with-details"
-    }, [i(E, null, {
-      default: () => [i(f, {
+    }, [n(b, null, {
+      default: () => [n(p, {
         span: 8
       }, {
-        default: () => [i(w, null, {
-          default: () => [i(x, {
-            loading: m.value,
+        default: () => [n(A, null, {
+          default: () => [n(I, {
+            loading: c.value,
             animated: !0
           }, {
-            default: () => [i(b, C({
-              data: u.value?.data,
+            default: () => [n(P, k({
+              data: s.value?.data,
               props: {
                 children: e.optionChildren,
                 label: e.optionName
@@ -107,27 +111,29 @@ const te = /* @__PURE__ */ g({
               expandOnClickNode: !1,
               nodeKey: e.nodeKey,
               "onNode-click": y,
+              "onNode-expand": g,
+              "onNode-collapse": h,
               highlightCurrent: !0,
               currentNodeKey: t.value,
-              defaultExpandedKeys: v.value
-            }, p), null)]
+              defaultExpandedKeys: N.value
+            }, v), null)]
           })]
         })]
-      }), i(f, {
+      }), n(p, {
         offset: 1,
         span: 15
       }, {
-        default: () => [t.value ? e.edit ? c(e.edit, {
+        default: () => [t.value ? e.edit ? f(e.edit, {
           key: t.value,
           dataId: t.value
-        }) : null : e.create ? c(e.create, {
-          key: s.value
+        }) : null : e.create ? f(e.create, {
+          key: m.value
         }) : null]
       })]
     })]);
   }
 });
 export {
-  te as SkyTreeWithDetails
+  ie as SkyTreeWithDetails
 };
 //# sourceMappingURL=index.mjs.map

package/dist/components/tree-with-details/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/tree-with-details/index.tsx"],"sourcesContent":["import { useProvideReferenceArrayInput, useProvideTreeWithDetails } from '@/hooks'\nimport type { CreateResult, GetListResult, Identifier } from '@/provides'\nimport { skyConfig, type SkyComponent } from '@/setup'\nimport { useAsyncState } from '@vueuse/core'\nimport { ElCard, ElCol, ElRow, ElSkeleton, ElTree } from 'element-plus'\nimport { computed, defineComponent, h, ref } from 'vue'\nimport { useRoute } from 'vue-router'\n\nexport interface SkyTreeWithDetailsProps {\n  create?: SkyComponent\n  edit?: SkyComponent\n  optionChildren?: string\n  optionName?: string\n  nodeKey?: string\n  size?: number\n}\n\nexport const SkyTreeWithDetails = defineComponent<SkyTreeWithDetailsProps>({\n  name: 'SkyTreeWithDetails',\n  inheritAttrs: false,\n  props: {\n    create: Object,\n    edit: Object,\n    optionChildren: {\n      type: String,\n      default: 'children',\n    },\n    optionName: {\n      type: String,\n      default: 'name',\n    },\n    nodeKey: {\n      type: String,\n      default: 'id',\n    },\n    size: {\n      type: Number,\n      default: 30,\n    },\n  },\n  setup(props, { attrs }) {\n    const route = useRoute()\n\n    let controller: AbortController | undefined\n    const { state, isLoading, execute } = useAsyncState<\n      GetListResult | undefined,\n      [filter?: Record<string, unknown>]\n    >(\n      async (filter) => {\n        controller = new AbortController()\n        return skyConfig.dataProvider?.getList?.(route.meta.resource as string, {\n          pagination: { page: 1, perPage: props.size! },\n          filter,\n          signal: controller.signal,\n        })\n      },\n      undefined,\n      {\n        immediate: true,\n      },\n    )\n\n    const onNodeClick = (node: Record<string, unknown>) => {\n      if (editId.value === node[props.nodeKey!]) {\n        // 再次点击选中的节点，退出编辑\n        editId.value = undefined\n      } else {\n        editId.value = node[props.nodeKey!] as Identifier\n      }\n    }\n\n    const editId = ref<Identifier>()\n    const lastCreateId = ref<Identifier>()\n    const createNum = ref(0)\n\n    useProvideTreeWithDetails({\n      createSuccess: async (result: CreateResult) => {\n        await execute()\n        createNum.value++\n        if (result.data?.[props.nodeKey!]) {\n          lastCreateId.value = result.data[props.nodeKey!] as Identifier\n        }\n      },\n      editSuccess: async () => {\n        await execute()\n      },\n      deleteSuccess: async () => {\n        await execute()\n        editId.value = undefined\n      },\n    })\n\n    // 自动注入一次关联数据\n    useProvideReferenceArrayInput({\n      reference: route.meta.resource as string,\n      getList: (filter?: Record<string, unknown>) => execute(0, filter),\n      listData: state,\n      listLoading: isLoading,\n    })\n\n    const defaultExpandedKeys = computed(() => {\n      if (editId.value) {\n        return [editId.value]\n      } else if (lastCreateId.value) {\n        return [lastCreateId.value]\n      }\n      return []\n    })\n\n    return () => (\n      <div class=\"sky-tree-with-details\">\n        <ElRow>\n          <ElCol span={8}>\n            <ElCard>\n              <ElSkeleton loading={isLoading.value} animated>\n                <ElTree\n                  data={state.value?.data}\n                  props={{ children: props.optionChildren, label: props.optionName }}\n                  defaultExpandAll={false}\n                  accordion={true}\n                  expandOnClickNode={false}\n                  nodeKey={props.nodeKey}\n                  onNode-click={onNodeClick}\n                  highlightCurrent\n                  currentNodeKey={editId.value}\n                  defaultExpandedKeys={defaultExpandedKeys.value}\n                  {...attrs}\n                ></ElTree>\n              </ElSkeleton>\n            </ElCard>\n          </ElCol>\n          <ElCol offset={1} span={15}>\n            {editId.value\n              ? props.edit\n                ? h(props.edit, { key: editId.value, dataId: editId.value })\n                : null\n              : props.create\n                ? h(props.create, { key: createNum.value })\n                : null}\n          </ElCol>\n        </ElRow>\n      </div>\n    )\n  },\n})\n"],"names":["SkyTreeWithDetails","defineComponent","name","inheritAttrs","props","create","edit","optionChildren","type","default","optionName","nodeKey","size","attrs","route","useRoute","controller","execute","useAsyncState","filter","pagination","page","immediate","editId","ref","lastCreateId","createNum","useProvideTreeWithDetails","useProvideReferenceArrayInput","reference","listData","listLoading","defaultExpandedKeys","computed","_createVNode","state","onNodeClick","h"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAAA,KAAA,gBAAAC,EAAA;AAAA,EACEC,MAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,IACEC,QAAAA;AAAAA,IACAC,MAAAA;AAAAA,IACAC,gBAAAA;AAAAA,MACEC,MAAAA;AAAAA,MACAC,SAAAA;AAAAA;IAEFC,YAAAA;AAAAA,MACEF,MAAAA;AAAAA,MACAC,SAAAA;AAAAA;IAEFE,SAAAA;AAAAA,MACEH,MAAAA;AAAAA,MACAC,SAAAA;AAAAA;IAEFG,MAAAA;AAAAA,MACEJ,MAAAA;AAAAA,MACAC,SAAAA;AAAAA,IACF;AAAA;;IAEaI,OAAAA;AAAAA,EAAM,GAAA;AACnB,UAAAC,IAAAC,EAAA;AAEA,QAAAC;;;;MAC0BC,SAAAA;AAAAA,IAAQ,IAAAC,EAAA,OAAAC,OAK9BH,IAAAA,IAAAA,gBAAAA;MAEEI,YAAAA;AAAAA,QAAcC,MAAAA;AAAAA;;;;IAGhB,CAAA;MAIAC,WAAAA;AAAAA,IACF,CAAA;;OAYFC,IAAAC,EAAA,GACAC,IAAAD,EAAA,GACAE,IAAAF,EAAA,CAAA;AAEAG,IAAAA,EAAAA;AAAAA;;;;;;;;MAcE;AAAA,IACF,CAAA,GAGAC,EAAAA;AAAAA,MACEC,WAAAA,EAAAA,KAAAA;AAAAA;MAEAC,UAAAA;AAAAA,MACAC,aAAAA;AAAAA,IACF,CAAA;AAEA,UAAAC,IAAAC,EAAA,gBAEI,CAAAV,EAAA,KAAA,IACFE,EAAA,QACE,CAAAA,EAAA,KAAA,IAEF,CAAA,CACF;AAEA,WAAA,MAAAS,EAAA,OAAA;AAAA,MAAO,OAAA;AAAA;MAAAzB,SAAAA,MAAAA,CAAAA,EAAAA,GAAAA;AAAAA;MAGa,GAAA;AAAA,QAAAA,SAAAA,MAAAA,CAAAA,EAAAA,GAAAA,MAAAA;AAAAA,UAAAA,SAAAA,MAAAA,CAAAA,EAAAA,GAAAA;AAAAA;YAE0B,UAAA;AAAA,UAAA,GAAA;AAAA,YAAAA,SAAAA,MAAAA,CAAAA,EAAAA,GAAAA,EAAAA;AAAAA,cAAA,MAAA0B,EAAA,OAAA;AAAA;;;;cAGkC,kBAAA;AAAA,cAC3C,WAAA;AAAA,cACR,mBAAA;AAAA;cAEO,gBAAAC;AAAA,cACG,kBAAA;AAAA;cAEG,qBAAAJ,EAAA;AAAA,YACkB,GAAAnB,CAAA,GAAA,IAAA,CAAA;AAAA,UACrC,CAAA,CAAA;AAAA,QAAA,CAAA,CAAA;AAAA;QAAA,QAAA;AAAA;MAKS,GAAA;AAAA,QAAAJ,SAAAA,MAAAA,CAAAA,EAAAA,QAAAA,EAAAA,OAAAA,EAAAA,EAAAA,MAAAA;AAAAA;;QAGsC,CAAA,IAAA,OAAAL,EAAA,SAAAiC,EAAAjC,EAAA,QAAA;AAAA;;MAIpD,CAAA,CAAA;AAAA;EAKpB;AACF,CAAA;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/tree-with-details/index.tsx"],"sourcesContent":["import { useProvideReferenceArrayInput, useProvideTreeWithDetails } from '@/hooks'\nimport type { CreateResult, GetListResult, Identifier } from '@/provides'\nimport { skyConfig, type SkyComponent } from '@/setup'\nimport { useAsyncState } from '@vueuse/core'\nimport { ElCard, ElCol, ElRow, ElSkeleton, ElTree } from 'element-plus'\nimport { computed, defineComponent, h, ref } from 'vue'\nimport { useRoute } from 'vue-router'\n\nexport interface SkyTreeWithDetailsProps {\n  create?: SkyComponent\n  edit?: SkyComponent\n  optionChildren?: string\n  optionName?: string\n  nodeKey?: string\n  size?: number\n}\n\nexport const SkyTreeWithDetails = defineComponent<SkyTreeWithDetailsProps>({\n  name: 'SkyTreeWithDetails',\n  inheritAttrs: false,\n  props: {\n    create: Object,\n    edit: Object,\n    optionChildren: {\n      type: String,\n      default: 'children',\n    },\n    optionName: {\n      type: String,\n      default: 'name',\n    },\n    nodeKey: {\n      type: String,\n      default: 'id',\n    },\n    size: {\n      type: Number,\n      default: 30,\n    },\n  },\n  setup(props, { attrs }) {\n    const route = useRoute()\n\n    let controller: AbortController | undefined\n    const { state, isLoading, execute } = useAsyncState<\n      GetListResult | undefined,\n      [filter?: Record<string, unknown>]\n    >(\n      async (filter) => {\n        controller = new AbortController()\n        return skyConfig.dataProvider?.getList?.(route.meta.resource as string, {\n          pagination: { page: 1, perPage: props.size! },\n          filter,\n          signal: controller.signal,\n        })\n      },\n      undefined,\n      {\n        immediate: true,\n      },\n    )\n\n    const onNodeClick = (node: Record<string, unknown>) => {\n      if (editId.value === node[props.nodeKey!]) {\n        // 再次点击选中的节点，退出编辑\n        editId.value = undefined\n      } else {\n        editId.value = node[props.nodeKey!] as Identifier\n      }\n    }\n\n    const onNodeExpand = (node: Record<string, unknown>) => {\n      // 以最新的展开为准，取消创建时候的展开效果\n      lastCreateId.value = undefined\n      lastExpandId.value = node[props.nodeKey!] as Identifier\n    }\n\n    const onNodeCollapse = () => {\n      lastExpandId.value = undefined\n    }\n\n    const editId = ref<Identifier>()\n    const lastCreateId = ref<Identifier>()\n    const lastExpandId = ref<Identifier>()\n    const createNum = ref(0)\n\n    useProvideTreeWithDetails({\n      createSuccess: async (result: CreateResult) => {\n        await execute()\n        createNum.value++\n        if (result.data?.[props.nodeKey!]) {\n          lastCreateId.value = result.data[props.nodeKey!] as Identifier\n        }\n      },\n      editSuccess: async () => {\n        await execute()\n      },\n      deleteSuccess: async () => {\n        await execute()\n        if (editId.value === lastCreateId.value) {\n          lastCreateId.value = undefined\n        }\n        editId.value = undefined\n      },\n    })\n\n    // 自动注入一次关联数据\n    useProvideReferenceArrayInput({\n      reference: route.meta.resource as string,\n      getList: (filter?: Record<string, unknown>) => execute(0, filter),\n      listData: state,\n      listLoading: isLoading,\n    })\n\n    const defaultExpandedKeys = computed(() => {\n      if (editId.value) {\n        return [editId.value]\n      } else if (lastCreateId.value) {\n        return [lastCreateId.value]\n      } else if (lastExpandId.value) {\n        return [lastExpandId.value]\n      }\n      return []\n    })\n\n    return () => (\n      <div class=\"sky-tree-with-details\">\n        <ElRow>\n          <ElCol span={8}>\n            <ElCard>\n              <ElSkeleton loading={isLoading.value} animated>\n                <ElTree\n                  data={state.value?.data}\n                  props={{ children: props.optionChildren, label: props.optionName }}\n                  defaultExpandAll={false}\n                  accordion={true}\n                  expandOnClickNode={false}\n                  nodeKey={props.nodeKey}\n                  onNode-click={onNodeClick}\n                  onNode-expand={onNodeExpand}\n                  onNode-collapse={onNodeCollapse}\n                  highlightCurrent\n                  currentNodeKey={editId.value}\n                  defaultExpandedKeys={defaultExpandedKeys.value}\n                  {...attrs}\n                ></ElTree>\n              </ElSkeleton>\n            </ElCard>\n          </ElCol>\n          <ElCol offset={1} span={15}>\n            {editId.value\n              ? props.edit\n                ? h(props.edit, { key: editId.value, dataId: editId.value })\n                : null\n              : props.create\n                ? h(props.create, { key: createNum.value })\n                : null}\n          </ElCol>\n        </ElRow>\n      </div>\n    )\n  },\n})\n"],"names":["SkyTreeWithDetails","defineComponent","name","inheritAttrs","props","create","edit","optionChildren","type","default","optionName","nodeKey","size","attrs","route","useRoute","controller","execute","useAsyncState","filter","pagination","page","immediate","editId","ref","lastCreateId","lastExpandId","createNum","useProvideTreeWithDetails","useProvideReferenceArrayInput","reference","listData","listLoading","defaultExpandedKeys","computed","_createVNode","state","onNodeClick","onNodeExpand","onNodeCollapse","h"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAAA,KAAA,gBAAAC,EAAA;AAAA,EACEC,MAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,IACEC,QAAAA;AAAAA,IACAC,MAAAA;AAAAA,IACAC,gBAAAA;AAAAA,MACEC,MAAAA;AAAAA,MACAC,SAAAA;AAAAA;IAEFC,YAAAA;AAAAA,MACEF,MAAAA;AAAAA,MACAC,SAAAA;AAAAA;IAEFE,SAAAA;AAAAA,MACEH,MAAAA;AAAAA,MACAC,SAAAA;AAAAA;IAEFG,MAAAA;AAAAA,MACEJ,MAAAA;AAAAA,MACAC,SAAAA;AAAAA,IACF;AAAA;;IAEaI,OAAAA;AAAAA,EAAM,GAAA;AACnB,UAAAC,IAAAC,EAAA;AAEA,QAAAC;;;;MAC0BC,SAAAA;AAAAA,IAAQ,IAAAC,EAAA,OAAAC,OAK9BH,IAAAA,IAAAA,gBAAAA;MAEEI,YAAAA;AAAAA,QAAcC,MAAAA;AAAAA;;;;IAGhB,CAAA;MAIAC,WAAAA;AAAAA,IACF,CAAA;;;;;;OAsBFC,IAAAC,EAAA,GACAC,IAAAD,EAAA,GACAE,IAAAF,EAAA,GACAG,IAAAH,EAAA,CAAA;AAEAI,IAAAA,EAAAA;AAAAA;;;;;;;mBAaIL,EAAA,UAAAE,EAAA;MAIF;AAAA,IACF,CAAA,GAGAI,EAAAA;AAAAA,MACEC,WAAAA,EAAAA,KAAAA;AAAAA;MAEAC,UAAAA;AAAAA,MACAC,aAAAA;AAAAA,IACF,CAAA;AAEA,UAAAC,IAAAC,EAAA,gBAEI,CAAAX,EAAA,KAAA,IACFE,EAAA,QACE,CAAAA,EAAA,KAAA,IACFC,EAAA,QACE,CAAAA,EAAA,KAAA,IAEF,CAAA,CACF;AAEA,WAAA,MAAAS,EAAA,OAAA;AAAA,MAAO,OAAA;AAAA;MAAA1B,SAAAA,MAAAA,CAAAA,EAAAA,GAAAA;AAAAA;MAGa,GAAA;AAAA,QAAAA,SAAAA,MAAAA,CAAAA,EAAAA,GAAAA,MAAAA;AAAAA,UAAAA,SAAAA,MAAAA,CAAAA,EAAAA,GAAAA;AAAAA;YAE0B,UAAA;AAAA,UAAA,GAAA;AAAA,YAAAA,SAAAA,MAAAA,CAAAA,EAAAA,GAAAA,EAAAA;AAAAA,cAAA,MAAA2B,EAAA,OAAA;AAAA;;;;cAGkC,kBAAA;AAAA,cAC3C,WAAA;AAAA,cACR,mBAAA;AAAA;cAEO,gBAAAC;AAAA,cACG,iBAAAC;AAAA,cACE,mBAAAC;AAAA,cACI,kBAAA;AAAA;cAEH,qBAAAN,EAAA;AAAA,YACkB,GAAApB,CAAA,GAAA,IAAA,CAAA;AAAA,UACrC,CAAA,CAAA;AAAA,QAAA,CAAA,CAAA;AAAA;QAAA,QAAA;AAAA;MAKS,GAAA;AAAA,QAAAJ,SAAAA,MAAAA,CAAAA,EAAAA,QAAAA,EAAAA,OAAAA,EAAAA,EAAAA,MAAAA;AAAAA;;QAGsC,CAAA,IAAA,OAAAL,EAAA,SAAAoC,EAAApC,EAAA,QAAA;AAAA;;MAIpD,CAAA,CAAA;AAAA;EAKpB;AACF,CAAA;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skyline-vue-admin",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "publishConfig": {
     "access": "public"
   },