skyline-vue-admin 0.0.15 → 0.0.17

package/dist/components/auto-complete-array-input/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("element-plus/es/components/form-item/style/css");require("element-plus/es/components/select/style/css");const t=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");const V=require("../../hooks/useForm.cjs");require("../../hooks/useShow.cjs");require("../../hooks/useReferenceArrayField.cjs");require("../../hooks/useTreeWithDetails.cjs");const I=require("../../hooks/useFormGrid.cjs"),h=require("../../hooks/useReferenceArrayInput.cjs"),p=require("../../setup/index.cjs"),C=require("@vueuse/core"),i=require("element-plus"),D=t.defineComponent({name:"SkyAutoCompleteArrayInput",inheritAttrs:!1,props:{source:{type:String,required:!0},label:String,optionText:{type:String,default:"name"},optionValue:{type:String,default:"id"},filterToQuery:Function,rules:Object,defaultValue:{type:Array,default:()=>[]}},setup(e,{attrs:c}){const d=I.useFormGrid(),{formData:u,editData:a}=V.useForm(),{getList:f,listLoading:m,listData:n,reference:y}=h.useReferenceArrayInput(),q=t.computed(()=>e.label||e.source);typeof u[e.source]>"u"&&(u[e.source]=e.defaultValue),a.value&&(u[e.source]=a.value[e.source]);const g=r=>{const o=e.filterToQuery?.(r);o&&f(o)};let l;const{state:v,isLoading:A}=C.useAsyncState(async()=>{const r=u[e.source];if(r)return l=new AbortController,p.skyConfig.dataProvider?.getMany?.(y,{ids:Array.isArray(r)?r:[r],signal:l.signal})},void 0,{immediate:!0}),s=r=>{const o=r[e.optionText],b=r[e.optionValue];return{label:o,value:b}},S=t.computed(()=>n.value?.data?n.value.data.map(s):(v.value?.data||[]).map(s));return()=>t.withDirectives(t.createVNode(i.ElFormItem,{label:q.value,prop:e.source,rules:e.rules,style:d?`grid-area: ${e.source}`:""},{default:()=>[t.createVNode(i.ElSelect,t.mergeProps({modelValue:u[e.source],"onUpdate:modelValue":r=>u[e.source]=r,multiple:!0,filterable:!0,remote:!0,reserveKeyword:!0,remoteShowSuffix:!0,remoteMethod:g,loading:m.value,debounce:500,options:S.value,props:{value:"value",label:"label"}},c),null)]}),[[i.ElLoadingDirective,A.value]])}});exports.SkyAutoCompleteArrayInput=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("element-plus/es/components/form-item/style/css");require("element-plus/es/components/select/style/css");const u=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");const V=require("../../hooks/useForm.cjs");require("../../hooks/useShow.cjs");require("../../hooks/useReferenceArrayField.cjs");require("../../hooks/useTreeWithDetails.cjs");const h=require("../../hooks/useFormGrid.cjs"),I=require("../../hooks/useReferenceArrayInput.cjs"),p=require("../../setup/index.cjs"),C=require("@vueuse/core"),i=require("element-plus"),D=u.defineComponent({name:"SkyAutoCompleteArrayInput",inheritAttrs:!1,props:{source:{type:String,required:!0},label:String,optionText:{type:String,default:"name"},optionValue:{type:String,default:"id"},filterToQuery:Function,rules:Object,defaultValue:{type:Array,default:()=>[]}},setup(e,{attrs:c}){const d=h.useFormGrid(),{formData:o,editData:a}=V.useForm(),{getList:f,listLoading:m,listData:n,reference:y}=I.useReferenceArrayInput(),q=u.computed(()=>e.label||e.source);typeof o[e.source]>"u"&&(o[e.source]=e.defaultValue),a.value&&(o[e.source]=a.value[e.source]);const g=r=>{const t=e.filterToQuery?.(r);t&&f(t)};let l;const{state:v,isLoading:A}=C.useAsyncState(async()=>{const r=o[e.source];if(r){const t=Array.isArray(r)?r:[r];if(t.length)return l=new AbortController,p.skyConfig.dataProvider?.getMany?.(y,{ids:t,signal:l.signal})}},void 0,{immediate:!0}),s=r=>{const t=r[e.optionText],b=r[e.optionValue];return{label:t,value:b}},S=u.computed(()=>n.value?.data?n.value.data.map(s):(v.value?.data||[]).map(s));return()=>u.withDirectives(u.createVNode(i.ElFormItem,{label:q.value,prop:e.source,rules:e.rules,style:d?`grid-area: ${e.source}`:""},{default:()=>[u.createVNode(i.ElSelect,u.mergeProps({modelValue:o[e.source],"onUpdate:modelValue":r=>o[e.source]=r,multiple:!0,filterable:!0,remote:!0,reserveKeyword:!0,remoteShowSuffix:!0,remoteMethod:g,loading:m.value,debounce:500,options:S.value,props:{value:"value",label:"label"}},c),null)]}),[[i.ElLoadingDirective,A.value]])}});exports.SkyAutoCompleteArrayInput=D;
 //# sourceMappingURL=index.cjs.map

package/dist/components/auto-complete-array-input/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/auto-complete-array-input/index.tsx"],"sourcesContent":["import { useForm, useFormGrid, useReferenceArrayInput } from '@/hooks'\r\nimport type { GetManyResult, Identifier } from '@/provides'\r\nimport { skyConfig } from '@/setup'\r\nimport { useAsyncState } from '@vueuse/core'\r\nimport {\r\n  ElFormItem,\r\n  ElLoadingDirective,\r\n  ElSelect,\r\n  type FormItemRule,\r\n  type SelectProps,\r\n} from 'element-plus'\r\nimport { computed, defineComponent, withDirectives, type PropType } from 'vue'\r\n\r\nexport interface SkyAutoCompleteArrayInputProps {\r\n  source: string\r\n  label?: string\r\n  optionText?: string\r\n  optionValue?: string\r\n  filterToQuery?: (searchText: string) => Record<string, unknown>\r\n  rules?: FormItemRule | FormItemRule[]\r\n  defaultValue?: Identifier[]\r\n}\r\n\r\nexport const SkyAutoCompleteArrayInput = defineComponent<\r\n  SkyAutoCompleteArrayInputProps & Partial<SelectProps>\r\n>({\r\n  name: 'SkyAutoCompleteArrayInput',\r\n  inheritAttrs: false,\r\n  props: {\r\n    source: {\r\n      type: String,\r\n      required: true,\r\n    },\r\n    label: String,\r\n    // placeholder: String,\r\n    optionText: {\r\n      type: String,\r\n      default: 'name',\r\n    },\r\n    optionValue: {\r\n      type: String,\r\n      default: 'id',\r\n    },\r\n    filterToQuery: Function as PropType<SkyAutoCompleteArrayInputProps['filterToQuery']>,\r\n    rules: Object,\r\n    defaultValue: {\r\n      type: Array,\r\n      default: () => [],\r\n    },\r\n  },\r\n  setup(props, { attrs }) {\r\n    const formGrid = useFormGrid()\r\n    const { formData, editData } = useForm()!\r\n    const { getList, listLoading, listData, reference } = useReferenceArrayInput()!\r\n    const title = computed<string>(() => props.label || props.source)\r\n\r\n    if (typeof formData[props.source] === 'undefined') {\r\n      formData[props.source] = props.defaultValue!\r\n    }\r\n\r\n    if (editData.value) {\r\n      formData[props.source] = editData.value[props.source]\r\n    }\r\n\r\n    const remoteMethod = (search: string) => {\r\n      const filter = props.filterToQuery?.(search)\r\n      if (filter) {\r\n        getList(filter)\r\n      }\r\n    }\r\n\r\n    let controller: AbortController | undefined\r\n    const { state: theReferenceArrayData, isLoading } = useAsyncState<GetManyResult | undefined>(\r\n      async () => {\r\n        const data = formData[props.source] as Identifier[] | Identifier | undefined\r\n\r\n        if (data) {\r\n          controller = new AbortController()\r\n          return skyConfig.dataProvider?.getMany?.(reference, {\r\n            ids: Array.isArray(data) ? data : [data],\r\n            signal: controller.signal,\r\n          })\r\n        }\r\n      },\r\n      undefined,\r\n      {\r\n        immediate: true,\r\n      },\r\n    )\r\n\r\n    const getOptionItem = (item: Record<string, unknown>) => {\r\n      const label = item[props.optionText!] as string\r\n      const value = item[props.optionValue!] as Identifier\r\n      return {\r\n        label,\r\n        value,\r\n      }\r\n    }\r\n\r\n    const options = computed(() => {\r\n      if (listData.value?.data) {\r\n        return (\r\n          listData.value.data\r\n            // .filter((item) => {\r\n            //   const value = item[props.optionValue] as Identifier\r\n            //   return !formData[props.source]?.includes(value)\r\n            // })\r\n            .map(getOptionItem)\r\n        )\r\n      }\r\n\r\n      const editArr = theReferenceArrayData.value?.data || []\r\n      // create = []\r\n      // edit = theReferenceArrayData.value?.data\r\n      return editArr.map(getOptionItem)\r\n    })\r\n\r\n    return () =>\r\n      withDirectives(\r\n        <ElFormItem\r\n          label={title.value}\r\n          prop={props.source}\r\n          rules={props.rules}\r\n          style={formGrid ? `grid-area: ${props.source}` : ''}\r\n        >\r\n          <ElSelect\r\n            modelValue={formData[props.source] as Identifier[]}\r\n            onUpdate:modelValue={(v) => (formData[props.source] = v)}\r\n            multiple\r\n            filterable\r\n            remote\r\n            reserveKeyword\r\n            remoteShowSuffix\r\n            remoteMethod={remoteMethod}\r\n            loading={listLoading.value}\r\n            debounce={500}\r\n            options={options.value}\r\n            props={{ value: 'value', label: 'label' }}\r\n            {...attrs}\r\n          >\r\n            {/* {options.value.map((option) => (\r\n              <ElOption key={option.value} label={option.label} value={option.value} />\r\n            ))} */}\r\n          </ElSelect>\r\n        </ElFormItem>,\r\n        // h(\r\n        //   ElFormItem,\r\n        //   {\r\n        //     label: title.value,\r\n        //     prop: props.source,\r\n        //     rules: props.rules,\r\n        //     style: formGrid ? `grid-area: ${props.source}` : '',\r\n        //   },\r\n        //   {\r\n        //     default: () =>\r\n        //       h(\r\n        //         ElSelect,\r\n        //         {\r\n        //           modelValue: formData[props.source] as Identifier[],\r\n        //           'onUpdate:modelValue': (v) => (formData[props.source] = v),\r\n        //           multiple: true,\r\n        //           filterable: true,\r\n        //           remote: true,\r\n        //           reserveKeyword: true,\r\n        //           remoteShowSuffix: true,\r\n        //           remoteMethod,\r\n        //           loading: listLoading.value,\r\n        //           debounce: 500,\r\n        //           ...attrs,\r\n        //         },\r\n        //         {\r\n        //           default: () =>\r\n        //             options.value.map((option) => (\r\n        //               <ElOption key={option.value} label={option.label} value={option.value} />\r\n        //             )),\r\n        //         },\r\n        //       ),\r\n        //   },\r\n        // ),\r\n        [[ElLoadingDirective, isLoading.value]],\r\n      )\r\n  },\r\n})\r\n"],"names":["SkyAutoCompleteArrayInput","defineComponent","name","inheritAttrs","props","source","type","required","label","optionText","default","optionValue","filterToQuery","rules","defaultValue","attrs","formGrid","useFormGrid","editData","reference","title","computed","formData","filter","search","controller","state","isLoading","data","skyConfig","ids","immediate","item","value","options","listData","getOptionItem","withDirectives","_createVNode","ElFormItem","remoteMethod"],"mappings":"q7BAuBAA,EAAAC,EAAAA,gBAAA,CAGEC,KAAAA,4BACAC,aAAAA,GACAC,MAAAA,CACEC,OAAAA,CACEC,KAAAA,OACAC,SAAAA,IAEFC,MAAAA,OAEAC,WAAAA,CACEH,KAAAA,OACAI,QAAAA,QAEFC,YAAAA,CACEL,KAAAA,OACAI,QAAAA,MAEFE,cAAAA,SACAC,MAAAA,OACAC,aAAAA,CACER,KAAAA,oBAEF,YAEaS,MAAAA,CAAM,EAAA,CACnB,MAAAC,EAAAC,EAAAA,YAAA,cACkBC,SAAAA,mDACsBC,UAAAA,8BACxCC,EAAAC,EAAAA,SAAA,IAAAjB,EAAA,OAAAA,EAAA,MAAA,iEAOEkB,EAAAA,EAAAA,MAAAA,EAAAA,EAAAA,MAAAA,EAAAA,MAAAA,eAIA,MAAAC,EAAAnB,EAAA,gBAAAoB,CAAA,EACAD,SAKF,IAAAE,QACQC,MAAAA,EAA8BC,UAAAA,6BAElC,MAAAC,EAAAN,EAAAlB,EAAA,MAAA,EAEA,GAAAwB,EACEH,OAAAA,EAAAA,IAAAA,gBACAI,YAAA,cAAA,UAAAV,EAAA,CACEW,IAAAA,MAAAA,QAAAA,CAAAA,EAAAA,EAAAA,CAAAA,CAAAA,iBAEF,CAAA,WAKFC,UAAAA,EACF,CAAA,QAIA,MAAAvB,EAAAwB,EAAA5B,EAAA,UAAA,EACA6B,EAAAD,EAAA5B,EAAA,WAAA,iBAGE6B,MAAAA,IAIJC,EAAAb,EAAAA,SAAA,IACEc,EAAA,OAAA,6CAcA,IAAAC,CAAA,CACF,EAEA,MAAA,IAAAC,EAAAA,eAAAC,EAAAA,YAAAC,aAAA,2CAKwB,MAAAvB,EAAA,cAAAZ,EAAA,MAAA,GAAA,EACiC,EAAA,CAAAM,QAAAA,IAAAA,CAAAA,cAAAA,EAAAA,SAAAA,EAAAA,WAAAA,CAAA,WAAAY,EAAAlB,EAAA,MAAA,yCAIO,SAAA,GAAA,WAAA,GAAA,OAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,aAAAoC,kBAO9B,SAAA,2BAGjBP,MAAAA,QAAgBzB,MAAAA,OAAe,CAAC,EAAAO,CAAA,EAAA,IAAA,CAAA,CAChC,CAAA,mCA2CnB,CACF,CAAA"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/auto-complete-array-input/index.tsx"],"sourcesContent":["import { useForm, useFormGrid, useReferenceArrayInput } from '@/hooks'\r\nimport type { GetManyResult, Identifier } from '@/provides'\r\nimport { skyConfig } from '@/setup'\r\nimport { useAsyncState } from '@vueuse/core'\r\nimport {\r\n  ElFormItem,\r\n  ElLoadingDirective,\r\n  ElSelect,\r\n  type FormItemRule,\r\n  type SelectProps,\r\n} from 'element-plus'\r\nimport { computed, defineComponent, withDirectives, type PropType } from 'vue'\r\n\r\nexport interface SkyAutoCompleteArrayInputProps {\r\n  source: string\r\n  label?: string\r\n  optionText?: string\r\n  optionValue?: string\r\n  filterToQuery?: (searchText: string) => Record<string, unknown>\r\n  rules?: FormItemRule | FormItemRule[]\r\n  defaultValue?: Identifier[]\r\n}\r\n\r\nexport const SkyAutoCompleteArrayInput = defineComponent<\r\n  SkyAutoCompleteArrayInputProps & Partial<SelectProps>\r\n>({\r\n  name: 'SkyAutoCompleteArrayInput',\r\n  inheritAttrs: false,\r\n  props: {\r\n    source: {\r\n      type: String,\r\n      required: true,\r\n    },\r\n    label: String,\r\n    // placeholder: String,\r\n    optionText: {\r\n      type: String,\r\n      default: 'name',\r\n    },\r\n    optionValue: {\r\n      type: String,\r\n      default: 'id',\r\n    },\r\n    filterToQuery: Function as PropType<SkyAutoCompleteArrayInputProps['filterToQuery']>,\r\n    rules: Object,\r\n    defaultValue: {\r\n      type: Array,\r\n      default: () => [],\r\n    },\r\n  },\r\n  setup(props, { attrs }) {\r\n    const formGrid = useFormGrid()\r\n    const { formData, editData } = useForm()!\r\n    const { getList, listLoading, listData, reference } = useReferenceArrayInput()!\r\n    const title = computed<string>(() => props.label || props.source)\r\n\r\n    if (typeof formData[props.source] === 'undefined') {\r\n      formData[props.source] = props.defaultValue!\r\n    }\r\n\r\n    if (editData.value) {\r\n      formData[props.source] = editData.value[props.source]\r\n    }\r\n\r\n    const remoteMethod = (search: string) => {\r\n      const filter = props.filterToQuery?.(search)\r\n      if (filter) {\r\n        getList(filter)\r\n      }\r\n    }\r\n\r\n    let controller: AbortController | undefined\r\n    const { state: theReferenceArrayData, isLoading } = useAsyncState<GetManyResult | undefined>(\r\n      async () => {\r\n        const data = formData[props.source] as Identifier[] | Identifier | undefined\r\n\r\n        if (data) {\r\n          const ids = Array.isArray(data) ? data : [data]\r\n          if (ids.length) {\r\n            controller = new AbortController()\r\n            return skyConfig.dataProvider?.getMany?.(reference, {\r\n              ids,\r\n              signal: controller.signal,\r\n            })\r\n          }\r\n        }\r\n      },\r\n      undefined,\r\n      {\r\n        immediate: true,\r\n      },\r\n    )\r\n\r\n    const getOptionItem = (item: Record<string, unknown>) => {\r\n      const label = item[props.optionText!] as string\r\n      const value = item[props.optionValue!] as Identifier\r\n      return {\r\n        label,\r\n        value,\r\n      }\r\n    }\r\n\r\n    const options = computed(() => {\r\n      if (listData.value?.data) {\r\n        return (\r\n          listData.value.data\r\n            // .filter((item) => {\r\n            //   const value = item[props.optionValue] as Identifier\r\n            //   return !formData[props.source]?.includes(value)\r\n            // })\r\n            .map(getOptionItem)\r\n        )\r\n      }\r\n\r\n      const editArr = theReferenceArrayData.value?.data || []\r\n      // create = []\r\n      // edit = theReferenceArrayData.value?.data\r\n      return editArr.map(getOptionItem)\r\n    })\r\n\r\n    return () =>\r\n      withDirectives(\r\n        <ElFormItem\r\n          label={title.value}\r\n          prop={props.source}\r\n          rules={props.rules}\r\n          style={formGrid ? `grid-area: ${props.source}` : ''}\r\n        >\r\n          <ElSelect\r\n            modelValue={formData[props.source] as Identifier[]}\r\n            onUpdate:modelValue={(v) => (formData[props.source] = v)}\r\n            multiple\r\n            filterable\r\n            remote\r\n            reserveKeyword\r\n            remoteShowSuffix\r\n            remoteMethod={remoteMethod}\r\n            loading={listLoading.value}\r\n            debounce={500}\r\n            options={options.value}\r\n            props={{ value: 'value', label: 'label' }}\r\n            {...attrs}\r\n          >\r\n            {/* {options.value.map((option) => (\r\n              <ElOption key={option.value} label={option.label} value={option.value} />\r\n            ))} */}\r\n          </ElSelect>\r\n        </ElFormItem>,\r\n        // h(\r\n        //   ElFormItem,\r\n        //   {\r\n        //     label: title.value,\r\n        //     prop: props.source,\r\n        //     rules: props.rules,\r\n        //     style: formGrid ? `grid-area: ${props.source}` : '',\r\n        //   },\r\n        //   {\r\n        //     default: () =>\r\n        //       h(\r\n        //         ElSelect,\r\n        //         {\r\n        //           modelValue: formData[props.source] as Identifier[],\r\n        //           'onUpdate:modelValue': (v) => (formData[props.source] = v),\r\n        //           multiple: true,\r\n        //           filterable: true,\r\n        //           remote: true,\r\n        //           reserveKeyword: true,\r\n        //           remoteShowSuffix: true,\r\n        //           remoteMethod,\r\n        //           loading: listLoading.value,\r\n        //           debounce: 500,\r\n        //           ...attrs,\r\n        //         },\r\n        //         {\r\n        //           default: () =>\r\n        //             options.value.map((option) => (\r\n        //               <ElOption key={option.value} label={option.label} value={option.value} />\r\n        //             )),\r\n        //         },\r\n        //       ),\r\n        //   },\r\n        // ),\r\n        [[ElLoadingDirective, isLoading.value]],\r\n      )\r\n  },\r\n})\r\n"],"names":["SkyAutoCompleteArrayInput","defineComponent","name","inheritAttrs","props","source","type","required","label","optionText","default","optionValue","filterToQuery","rules","defaultValue","attrs","formGrid","useFormGrid","editData","reference","title","computed","formData","filter","search","controller","state","isLoading","data","ids","skyConfig","immediate","item","value","options","listData","getOptionItem","withDirectives","_createVNode","ElFormItem","remoteMethod"],"mappings":"q7BAuBAA,EAAAC,EAAAA,gBAAA,CAGEC,KAAAA,4BACAC,aAAAA,GACAC,MAAAA,CACEC,OAAAA,CACEC,KAAAA,OACAC,SAAAA,IAEFC,MAAAA,OAEAC,WAAAA,CACEH,KAAAA,OACAI,QAAAA,QAEFC,YAAAA,CACEL,KAAAA,OACAI,QAAAA,MAEFE,cAAAA,SACAC,MAAAA,OACAC,aAAAA,CACER,KAAAA,oBAEF,YAEaS,MAAAA,CAAM,EAAA,CACnB,MAAAC,EAAAC,EAAAA,YAAA,cACkBC,SAAAA,mDACsBC,UAAAA,8BACxCC,EAAAC,EAAAA,SAAA,IAAAjB,EAAA,OAAAA,EAAA,MAAA,iEAOEkB,EAAAA,EAAAA,MAAAA,EAAAA,EAAAA,MAAAA,EAAAA,MAAAA,eAIA,MAAAC,EAAAnB,EAAA,gBAAAoB,CAAA,EACAD,SAKF,IAAAE,QACQC,MAAAA,EAA8BC,UAAAA,6BAElC,MAAAC,EAAAN,EAAAlB,EAAA,MAAA,EAEA,GAAAwB,EAAA,CACE,MAAAC,EAAA,MAAA,QAAAD,CAAA,EAAAA,EAAA,CAAAA,CAAA,cAEEH,OAAAA,EAAAA,IAAAA,gBACAK,YAAA,cAAA,UAAAX,EAAA,sBAGA,CAAA,CAEJ,WAIAY,UAAAA,EACF,CAAA,QAIA,MAAAvB,EAAAwB,EAAA5B,EAAA,UAAA,EACA6B,EAAAD,EAAA5B,EAAA,WAAA,iBAGE6B,MAAAA,IAIJC,EAAAb,EAAAA,SAAA,IACEc,EAAA,OAAA,6CAcA,IAAAC,CAAA,CACF,EAEA,MAAA,IAAAC,EAAAA,eAAAC,EAAAA,YAAAC,aAAA,2CAKwB,MAAAvB,EAAA,cAAAZ,EAAA,MAAA,GAAA,EACiC,EAAA,CAAAM,QAAAA,IAAAA,CAAAA,cAAAA,EAAAA,SAAAA,EAAAA,WAAAA,CAAA,WAAAY,EAAAlB,EAAA,MAAA,yCAIO,SAAA,GAAA,WAAA,GAAA,OAAA,GAAA,eAAA,GAAA,iBAAA,GAAA,aAAAoC,kBAO9B,SAAA,2BAGjBP,MAAAA,QAAgBzB,MAAAA,OAAe,CAAC,EAAAO,CAAA,EAAA,IAAA,CAAA,CAChC,CAAA,mCA2CnB,CACF,CAAA"}

package/dist/components/auto-complete-array-input/index.mjs

@@ -1,6 +1,6 @@
 import "element-plus/es/components/form-item/style/css";
 import "element-plus/es/components/select/style/css";
-import { defineComponent as V, computed as n, withDirectives as h, createVNode as m, mergeProps as D } from "vue";
+import { defineComponent as h, computed as n, withDirectives as V, createVNode as m, mergeProps as D } from "vue";
 import "../../hooks/useUser.mjs";
 import "../../hooks/usePermission.mjs";
 import "../../hooks/useMenu.mjs";
@@ -20,7 +20,7 @@ import { useReferenceArrayInput as w } from "../../hooks/useReferenceArrayInput.
 import { skyConfig as x } from "../../setup/index.mjs";
 import { useAsyncState as F } from "@vueuse/core";
 import { ElFormItem as L, ElSelect as T, ElLoadingDirective as k } from "element-plus";
-const ee = /* @__PURE__ */ V({
+const ee = /* @__PURE__ */ h({
   name: "SkyAutoCompleteArrayInput",
   inheritAttrs: !1,
   props: {
@@ -46,52 +46,55 @@ const ee = /* @__PURE__ */ V({
     }
   },
   setup(e, {
-    attrs: d
+    attrs: s
   }) {
-    const s = I(), {
-      formData: r,
+    const c = I(), {
+      formData: o,
       editData: i
     } = C(), {
-      getList: c,
+      getList: d,
       listLoading: f,
       listData: a,
       reference: p
     } = w(), y = n(() => e.label || e.source);
-    typeof r[e.source] > "u" && (r[e.source] = e.defaultValue), i.value && (r[e.source] = i.value[e.source]);
+    typeof o[e.source] > "u" && (o[e.source] = e.defaultValue), i.value && (o[e.source] = i.value[e.source]);
     const g = (t) => {
-      const o = e.filterToQuery?.(t);
-      o && c(o);
+      const r = e.filterToQuery?.(t);
+      r && d(r);
     };
     let u;
     const {
       state: v,
       isLoading: A
     } = F(async () => {
-      const t = r[e.source];
-      if (t)
-        return u = new AbortController(), x.dataProvider?.getMany?.(p, {
-          ids: Array.isArray(t) ? t : [t],
-          signal: u.signal
-        });
+      const t = o[e.source];
+      if (t) {
+        const r = Array.isArray(t) ? t : [t];
+        if (r.length)
+          return u = new AbortController(), x.dataProvider?.getMany?.(p, {
+            ids: r,
+            signal: u.signal
+          });
+      }
     }, void 0, {
       immediate: !0
     }), l = (t) => {
-      const o = t[e.optionText], S = t[e.optionValue];
+      const r = t[e.optionText], S = t[e.optionValue];
       return {
-        label: o,
+        label: r,
         value: S
       };
     }, b = n(() => a.value?.data ? a.value.data.map(l) : (v.value?.data || []).map(l));
-    return () => h(
+    return () => V(
       m(L, {
         label: y.value,
         prop: e.source,
         rules: e.rules,
-        style: s ? `grid-area: ${e.source}` : ""
+        style: c ? `grid-area: ${e.source}` : ""
       }, {
         default: () => [m(T, D({
-          modelValue: r[e.source],
-          "onUpdate:modelValue": (t) => r[e.source] = t,
+          modelValue: o[e.source],
+          "onUpdate:modelValue": (t) => o[e.source] = t,
           multiple: !0,
           filterable: !0,
           remote: !0,
@@ -105,7 +108,7 @@ const ee = /* @__PURE__ */ V({
             value: "value",
             label: "label"
           }
-        }, d), null)]
+        }, s), null)]
       }),
       // h(
       //   ElFormItem,

package/dist/components/auto-complete-array-input/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/auto-complete-array-input/index.tsx"],"sourcesContent":["import { useForm, useFormGrid, useReferenceArrayInput } from '@/hooks'\r\nimport type { GetManyResult, Identifier } from '@/provides'\r\nimport { skyConfig } from '@/setup'\r\nimport { useAsyncState } from '@vueuse/core'\r\nimport {\r\n  ElFormItem,\r\n  ElLoadingDirective,\r\n  ElSelect,\r\n  type FormItemRule,\r\n  type SelectProps,\r\n} from 'element-plus'\r\nimport { computed, defineComponent, withDirectives, type PropType } from 'vue'\r\n\r\nexport interface SkyAutoCompleteArrayInputProps {\r\n  source: string\r\n  label?: string\r\n  optionText?: string\r\n  optionValue?: string\r\n  filterToQuery?: (searchText: string) => Record<string, unknown>\r\n  rules?: FormItemRule | FormItemRule[]\r\n  defaultValue?: Identifier[]\r\n}\r\n\r\nexport const SkyAutoCompleteArrayInput = defineComponent<\r\n  SkyAutoCompleteArrayInputProps & Partial<SelectProps>\r\n>({\r\n  name: 'SkyAutoCompleteArrayInput',\r\n  inheritAttrs: false,\r\n  props: {\r\n    source: {\r\n      type: String,\r\n      required: true,\r\n    },\r\n    label: String,\r\n    // placeholder: String,\r\n    optionText: {\r\n      type: String,\r\n      default: 'name',\r\n    },\r\n    optionValue: {\r\n      type: String,\r\n      default: 'id',\r\n    },\r\n    filterToQuery: Function as PropType<SkyAutoCompleteArrayInputProps['filterToQuery']>,\r\n    rules: Object,\r\n    defaultValue: {\r\n      type: Array,\r\n      default: () => [],\r\n    },\r\n  },\r\n  setup(props, { attrs }) {\r\n    const formGrid = useFormGrid()\r\n    const { formData, editData } = useForm()!\r\n    const { getList, listLoading, listData, reference } = useReferenceArrayInput()!\r\n    const title = computed<string>(() => props.label || props.source)\r\n\r\n    if (typeof formData[props.source] === 'undefined') {\r\n      formData[props.source] = props.defaultValue!\r\n    }\r\n\r\n    if (editData.value) {\r\n      formData[props.source] = editData.value[props.source]\r\n    }\r\n\r\n    const remoteMethod = (search: string) => {\r\n      const filter = props.filterToQuery?.(search)\r\n      if (filter) {\r\n        getList(filter)\r\n      }\r\n    }\r\n\r\n    let controller: AbortController | undefined\r\n    const { state: theReferenceArrayData, isLoading } = useAsyncState<GetManyResult | undefined>(\r\n      async () => {\r\n        const data = formData[props.source] as Identifier[] | Identifier | undefined\r\n\r\n        if (data) {\r\n          controller = new AbortController()\r\n          return skyConfig.dataProvider?.getMany?.(reference, {\r\n            ids: Array.isArray(data) ? data : [data],\r\n            signal: controller.signal,\r\n          })\r\n        }\r\n      },\r\n      undefined,\r\n      {\r\n        immediate: true,\r\n      },\r\n    )\r\n\r\n    const getOptionItem = (item: Record<string, unknown>) => {\r\n      const label = item[props.optionText!] as string\r\n      const value = item[props.optionValue!] as Identifier\r\n      return {\r\n        label,\r\n        value,\r\n      }\r\n    }\r\n\r\n    const options = computed(() => {\r\n      if (listData.value?.data) {\r\n        return (\r\n          listData.value.data\r\n            // .filter((item) => {\r\n            //   const value = item[props.optionValue] as Identifier\r\n            //   return !formData[props.source]?.includes(value)\r\n            // })\r\n            .map(getOptionItem)\r\n        )\r\n      }\r\n\r\n      const editArr = theReferenceArrayData.value?.data || []\r\n      // create = []\r\n      // edit = theReferenceArrayData.value?.data\r\n      return editArr.map(getOptionItem)\r\n    })\r\n\r\n    return () =>\r\n      withDirectives(\r\n        <ElFormItem\r\n          label={title.value}\r\n          prop={props.source}\r\n          rules={props.rules}\r\n          style={formGrid ? `grid-area: ${props.source}` : ''}\r\n        >\r\n          <ElSelect\r\n            modelValue={formData[props.source] as Identifier[]}\r\n            onUpdate:modelValue={(v) => (formData[props.source] = v)}\r\n            multiple\r\n            filterable\r\n            remote\r\n            reserveKeyword\r\n            remoteShowSuffix\r\n            remoteMethod={remoteMethod}\r\n            loading={listLoading.value}\r\n            debounce={500}\r\n            options={options.value}\r\n            props={{ value: 'value', label: 'label' }}\r\n            {...attrs}\r\n          >\r\n            {/* {options.value.map((option) => (\r\n              <ElOption key={option.value} label={option.label} value={option.value} />\r\n            ))} */}\r\n          </ElSelect>\r\n        </ElFormItem>,\r\n        // h(\r\n        //   ElFormItem,\r\n        //   {\r\n        //     label: title.value,\r\n        //     prop: props.source,\r\n        //     rules: props.rules,\r\n        //     style: formGrid ? `grid-area: ${props.source}` : '',\r\n        //   },\r\n        //   {\r\n        //     default: () =>\r\n        //       h(\r\n        //         ElSelect,\r\n        //         {\r\n        //           modelValue: formData[props.source] as Identifier[],\r\n        //           'onUpdate:modelValue': (v) => (formData[props.source] = v),\r\n        //           multiple: true,\r\n        //           filterable: true,\r\n        //           remote: true,\r\n        //           reserveKeyword: true,\r\n        //           remoteShowSuffix: true,\r\n        //           remoteMethod,\r\n        //           loading: listLoading.value,\r\n        //           debounce: 500,\r\n        //           ...attrs,\r\n        //         },\r\n        //         {\r\n        //           default: () =>\r\n        //             options.value.map((option) => (\r\n        //               <ElOption key={option.value} label={option.label} value={option.value} />\r\n        //             )),\r\n        //         },\r\n        //       ),\r\n        //   },\r\n        // ),\r\n        [[ElLoadingDirective, isLoading.value]],\r\n      )\r\n  },\r\n})\r\n"],"names":["SkyAutoCompleteArrayInput","defineComponent","name","inheritAttrs","props","source","type","required","label","optionText","default","optionValue","filterToQuery","rules","defaultValue","attrs","formGrid","useFormGrid","editData","reference","title","computed","formData","filter","search","controller","state","isLoading","data","skyConfig","ids","immediate","item","value","options","listData","getOptionItem","withDirectives","_createVNode","ElFormItem","remoteMethod"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAAA,KAAA,gBAAAC,EAAA;AAAA,EAGEC,MAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,IACEC,QAAAA;AAAAA,MACEC,MAAAA;AAAAA,MACAC,UAAAA;AAAAA;IAEFC,OAAAA;AAAAA;AAAAA,IAEAC,YAAAA;AAAAA,MACEH,MAAAA;AAAAA,MACAI,SAAAA;AAAAA;IAEFC,aAAAA;AAAAA,MACEL,MAAAA;AAAAA,MACAI,SAAAA;AAAAA;IAEFE,eAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,cAAAA;AAAAA,MACER,MAAAA;AAAAA;IAEF;AAAA;;IAEaS,OAAAA;AAAAA,EAAM,GAAA;AACnB,UAAAC,IAAAC,EAAA;;MACkBC,UAAAA;AAAAA;;;;MACsBC,WAAAA;AAAAA,aACxCC,IAAAC,EAAA,MAAAjB,EAAA,SAAAA,EAAA,MAAA;4EAOEkB,EAAAA,EAAAA,MAAAA,IAAAA,EAAAA,MAAAA,EAAAA,MAAAA;;AAIA,YAAAC,IAAAnB,EAAA,gBAAAoB,CAAA;AACA,MAAAD;;AAKF,QAAAE;;MACQC,OAAAA;AAAAA,MAA8BC,WAAAA;AAAAA;AAElC,YAAAC,IAAAN,EAAAlB,EAAA,MAAA;AAEA,UAAAwB;AACEH,eAAAA,IAAAA,IAAAA,gBAAAA,GACAI,EAAA,cAAA,UAAAV,GAAA;AAAA,UACEW,KAAAA,MAAAA,QAAAA,CAAAA,IAAAA,IAAAA,CAAAA,CAAAA;AAAAA;QAEF,CAAA;AAAA;MAKFC,WAAAA;AAAAA,IACF,CAAA;AAIA,YAAAvB,IAAAwB,EAAA5B,EAAA,UAAA,GACA6B,IAAAD,EAAA5B,EAAA,WAAA;;;QAGE6B,OAAAA;AAAAA;OAIJC,IAAAb,EAAA,MACEc,EAAA,OAAA,mDAcA,IAAAC,CAAA,CACF;AAEA,WAAA,MAAAC;AAAA,MAAAC,EAAAC,GAAA;AAAA;;;QAKwB,OAAAvB,IAAA,cAAAZ,EAAA,MAAA,KAAA;AAAA,MACiC,GAAA;AAAA,QAAAM,SAAAA,MAAAA,CAAAA,EAAAA,GAAAA,EAAAA;AAAAA,UAAA,YAAAY,EAAAlB,EAAA,MAAA;AAAA;UAIO,UAAA;AAAA,UAAA,YAAA;AAAA,UAAA,QAAA;AAAA,UAAA,gBAAA;AAAA,UAAA,kBAAA;AAAA,UAAA,cAAAoC;AAAA;UAO9B,UAAA;AAAA;;YAGjBP,OAAAA;AAAAA,YAAgBzB,OAAAA;AAAAA,UAAe;AAAA,QAAC,GAAAO,CAAA,GAAA,IAAA,CAAA;AAAA,MAChC,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;EA2CnB;AACF,CAAA;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/auto-complete-array-input/index.tsx"],"sourcesContent":["import { useForm, useFormGrid, useReferenceArrayInput } from '@/hooks'\r\nimport type { GetManyResult, Identifier } from '@/provides'\r\nimport { skyConfig } from '@/setup'\r\nimport { useAsyncState } from '@vueuse/core'\r\nimport {\r\n  ElFormItem,\r\n  ElLoadingDirective,\r\n  ElSelect,\r\n  type FormItemRule,\r\n  type SelectProps,\r\n} from 'element-plus'\r\nimport { computed, defineComponent, withDirectives, type PropType } from 'vue'\r\n\r\nexport interface SkyAutoCompleteArrayInputProps {\r\n  source: string\r\n  label?: string\r\n  optionText?: string\r\n  optionValue?: string\r\n  filterToQuery?: (searchText: string) => Record<string, unknown>\r\n  rules?: FormItemRule | FormItemRule[]\r\n  defaultValue?: Identifier[]\r\n}\r\n\r\nexport const SkyAutoCompleteArrayInput = defineComponent<\r\n  SkyAutoCompleteArrayInputProps & Partial<SelectProps>\r\n>({\r\n  name: 'SkyAutoCompleteArrayInput',\r\n  inheritAttrs: false,\r\n  props: {\r\n    source: {\r\n      type: String,\r\n      required: true,\r\n    },\r\n    label: String,\r\n    // placeholder: String,\r\n    optionText: {\r\n      type: String,\r\n      default: 'name',\r\n    },\r\n    optionValue: {\r\n      type: String,\r\n      default: 'id',\r\n    },\r\n    filterToQuery: Function as PropType<SkyAutoCompleteArrayInputProps['filterToQuery']>,\r\n    rules: Object,\r\n    defaultValue: {\r\n      type: Array,\r\n      default: () => [],\r\n    },\r\n  },\r\n  setup(props, { attrs }) {\r\n    const formGrid = useFormGrid()\r\n    const { formData, editData } = useForm()!\r\n    const { getList, listLoading, listData, reference } = useReferenceArrayInput()!\r\n    const title = computed<string>(() => props.label || props.source)\r\n\r\n    if (typeof formData[props.source] === 'undefined') {\r\n      formData[props.source] = props.defaultValue!\r\n    }\r\n\r\n    if (editData.value) {\r\n      formData[props.source] = editData.value[props.source]\r\n    }\r\n\r\n    const remoteMethod = (search: string) => {\r\n      const filter = props.filterToQuery?.(search)\r\n      if (filter) {\r\n        getList(filter)\r\n      }\r\n    }\r\n\r\n    let controller: AbortController | undefined\r\n    const { state: theReferenceArrayData, isLoading } = useAsyncState<GetManyResult | undefined>(\r\n      async () => {\r\n        const data = formData[props.source] as Identifier[] | Identifier | undefined\r\n\r\n        if (data) {\r\n          const ids = Array.isArray(data) ? data : [data]\r\n          if (ids.length) {\r\n            controller = new AbortController()\r\n            return skyConfig.dataProvider?.getMany?.(reference, {\r\n              ids,\r\n              signal: controller.signal,\r\n            })\r\n          }\r\n        }\r\n      },\r\n      undefined,\r\n      {\r\n        immediate: true,\r\n      },\r\n    )\r\n\r\n    const getOptionItem = (item: Record<string, unknown>) => {\r\n      const label = item[props.optionText!] as string\r\n      const value = item[props.optionValue!] as Identifier\r\n      return {\r\n        label,\r\n        value,\r\n      }\r\n    }\r\n\r\n    const options = computed(() => {\r\n      if (listData.value?.data) {\r\n        return (\r\n          listData.value.data\r\n            // .filter((item) => {\r\n            //   const value = item[props.optionValue] as Identifier\r\n            //   return !formData[props.source]?.includes(value)\r\n            // })\r\n            .map(getOptionItem)\r\n        )\r\n      }\r\n\r\n      const editArr = theReferenceArrayData.value?.data || []\r\n      // create = []\r\n      // edit = theReferenceArrayData.value?.data\r\n      return editArr.map(getOptionItem)\r\n    })\r\n\r\n    return () =>\r\n      withDirectives(\r\n        <ElFormItem\r\n          label={title.value}\r\n          prop={props.source}\r\n          rules={props.rules}\r\n          style={formGrid ? `grid-area: ${props.source}` : ''}\r\n        >\r\n          <ElSelect\r\n            modelValue={formData[props.source] as Identifier[]}\r\n            onUpdate:modelValue={(v) => (formData[props.source] = v)}\r\n            multiple\r\n            filterable\r\n            remote\r\n            reserveKeyword\r\n            remoteShowSuffix\r\n            remoteMethod={remoteMethod}\r\n            loading={listLoading.value}\r\n            debounce={500}\r\n            options={options.value}\r\n            props={{ value: 'value', label: 'label' }}\r\n            {...attrs}\r\n          >\r\n            {/* {options.value.map((option) => (\r\n              <ElOption key={option.value} label={option.label} value={option.value} />\r\n            ))} */}\r\n          </ElSelect>\r\n        </ElFormItem>,\r\n        // h(\r\n        //   ElFormItem,\r\n        //   {\r\n        //     label: title.value,\r\n        //     prop: props.source,\r\n        //     rules: props.rules,\r\n        //     style: formGrid ? `grid-area: ${props.source}` : '',\r\n        //   },\r\n        //   {\r\n        //     default: () =>\r\n        //       h(\r\n        //         ElSelect,\r\n        //         {\r\n        //           modelValue: formData[props.source] as Identifier[],\r\n        //           'onUpdate:modelValue': (v) => (formData[props.source] = v),\r\n        //           multiple: true,\r\n        //           filterable: true,\r\n        //           remote: true,\r\n        //           reserveKeyword: true,\r\n        //           remoteShowSuffix: true,\r\n        //           remoteMethod,\r\n        //           loading: listLoading.value,\r\n        //           debounce: 500,\r\n        //           ...attrs,\r\n        //         },\r\n        //         {\r\n        //           default: () =>\r\n        //             options.value.map((option) => (\r\n        //               <ElOption key={option.value} label={option.label} value={option.value} />\r\n        //             )),\r\n        //         },\r\n        //       ),\r\n        //   },\r\n        // ),\r\n        [[ElLoadingDirective, isLoading.value]],\r\n      )\r\n  },\r\n})\r\n"],"names":["SkyAutoCompleteArrayInput","defineComponent","name","inheritAttrs","props","source","type","required","label","optionText","default","optionValue","filterToQuery","rules","defaultValue","attrs","formGrid","useFormGrid","editData","reference","title","computed","formData","filter","search","controller","state","isLoading","data","ids","skyConfig","immediate","item","value","options","listData","getOptionItem","withDirectives","_createVNode","ElFormItem","remoteMethod"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuBA,MAAAA,KAAA,gBAAAC,EAAA;AAAA,EAGEC,MAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,IACEC,QAAAA;AAAAA,MACEC,MAAAA;AAAAA,MACAC,UAAAA;AAAAA;IAEFC,OAAAA;AAAAA;AAAAA,IAEAC,YAAAA;AAAAA,MACEH,MAAAA;AAAAA,MACAI,SAAAA;AAAAA;IAEFC,aAAAA;AAAAA,MACEL,MAAAA;AAAAA,MACAI,SAAAA;AAAAA;IAEFE,eAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,cAAAA;AAAAA,MACER,MAAAA;AAAAA;IAEF;AAAA;;IAEaS,OAAAA;AAAAA,EAAM,GAAA;AACnB,UAAAC,IAAAC,EAAA;;MACkBC,UAAAA;AAAAA;;;;MACsBC,WAAAA;AAAAA,aACxCC,IAAAC,EAAA,MAAAjB,EAAA,SAAAA,EAAA,MAAA;4EAOEkB,EAAAA,EAAAA,MAAAA,IAAAA,EAAAA,MAAAA,EAAAA,MAAAA;;AAIA,YAAAC,IAAAnB,EAAA,gBAAAoB,CAAA;AACA,MAAAD;;AAKF,QAAAE;;MACQC,OAAAA;AAAAA,MAA8BC,WAAAA;AAAAA;AAElC,YAAAC,IAAAN,EAAAlB,EAAA,MAAA;AAEA,UAAAwB,GAAA;AACE,cAAAC,IAAA,MAAA,QAAAD,CAAA,IAAAA,IAAA,CAAAA,CAAA;;AAEEH,iBAAAA,IAAAA,IAAAA,gBAAAA,GACAK,EAAA,cAAA,UAAAX,GAAA;AAAA;;UAGA,CAAA;AAAA,MAEJ;AAAA;MAIAY,WAAAA;AAAAA,IACF,CAAA;AAIA,YAAAvB,IAAAwB,EAAA5B,EAAA,UAAA,GACA6B,IAAAD,EAAA5B,EAAA,WAAA;;;QAGE6B,OAAAA;AAAAA;OAIJC,IAAAb,EAAA,MACEc,EAAA,OAAA,mDAcA,IAAAC,CAAA,CACF;AAEA,WAAA,MAAAC;AAAA,MAAAC,EAAAC,GAAA;AAAA;;;QAKwB,OAAAvB,IAAA,cAAAZ,EAAA,MAAA,KAAA;AAAA,MACiC,GAAA;AAAA,QAAAM,SAAAA,MAAAA,CAAAA,EAAAA,GAAAA,EAAAA;AAAAA,UAAA,YAAAY,EAAAlB,EAAA,MAAA;AAAA;UAIO,UAAA;AAAA,UAAA,YAAA;AAAA,UAAA,QAAA;AAAA,UAAA,gBAAA;AAAA,UAAA,kBAAA;AAAA,UAAA,cAAAoC;AAAA;UAO9B,UAAA;AAAA;;YAGjBP,OAAAA;AAAAA,YAAgBzB,OAAAA;AAAAA,UAAe;AAAA,QAAC,GAAAO,CAAA,GAAA,IAAA,CAAA;AAAA,MAChC,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;EA2CnB;AACF,CAAA;"}

package/dist/components/avatar-input/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("element-plus/es/components/form-item/style/css");require("element-plus/es/components/icon/style/css");require("element-plus/es/components/upload/style/css");const a=require("vue"),C=require("../../icons/EpPlus.cjs"),l=require("element-plus"),E=require("@vueuse/core"),F=require("vue-router");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");const R=require("../../hooks/useForm.cjs");require("../../hooks/useShow.cjs");require("../../hooks/useReferenceArrayField.cjs");require("../../hooks/useTreeWithDetails.cjs");const p=require("../../hooks/useFormGrid.cjs");require("../../hooks/useReferenceArrayInput.cjs");const L=require("../../hooks/useUpload.cjs"),y=require("../../setup/index.cjs"),P=require("../can-access/index.cjs"),V=a.defineComponent({name:"SkyAvatarInput",inheritAttrs:!1,props:{reference:{type:String,required:!0},source:{type:String,required:!0},label:String,rules:Object,dataId:{type:String,default:"id"},dataName:{type:String,default:"name"},dataUrl:{type:String,default:"url"},fileList:{type:Array,default:()=>[]}},setup(t,{slots:d,attrs:h}){const S=F.useRoute(),b=p.useFormGrid(),{formData:i,editData:o}=R.useForm(),w=a.computed(()=>t.label||t.source),{fileList:u}=L.useUpload(t.fileList),n=a.useTemplateRef("uploadRef"),U=S.meta;o.value&&(i[t.source]=o.value[t.source]);const k=async r=>{n.value?.clearFiles();const e=r[0];e.uid=l.genFileId(),n.value?.handleStart(e),n.value?.submit()},I=()=>{const r=u.value[0]?.id;if(r)i[t.source]=r;else{const e=u.value[0]?.raw;e?.data?.id&&(i[t.source]=e.data.id)}};let s;const{isLoading:c}=E.useAsyncState(async()=>{const r=i[t.source];if(r){s=new AbortController;const e=await y.skyConfig.dataProvider?.getOne?.(t.reference,{id:r,signal:s.signal});if(e?.data)return u.value=[{id:e.data[t.dataId],name:e.data[t.dataName],url:e.data[t.dataUrl]}],e}},void 0,{immediate:!0}),f=a.ref(""),v=a.shallowRef(),m=a.shallowRef(),q=a.ref(),g=a.ref(),N=async r=>{const e=await y.skyConfig.dataProvider?.getUploadConfig?.({file:r});e?.data&&(f.value=e.data.action,v.value=e.data.data,m.value=e.data.headers,q.value=e.data.method,g.value=e.data.name,r.data={id:e.data.file.id,name:e.data.file.name,url:e.data.file.url})};return()=>a.createVNode(P.SkyCanAccess,{resource:U.resource,action:["create","edit"],column:t.source},{default:()=>[a.createVNode(l.ElFormItem,{class:"sky-avatar-input",label:w.value,prop:t.source,rules:t.rules,style:b?`grid-area: ${t.source}`:""},{default:()=>[a.createVNode(l.ElUpload,a.mergeProps({ref:"uploadRef",action:f.value,method:q.value,name:g.value,withCredentials:t.withCredentials,multiple:t.multiple,limit:1,beforeUpload:N,onSuccess:I,onExceed:k,headers:m.value,data:v.value,listType:"picture-card",fileList:u.value,"onUpdate:file-list":r=>u.value=r,autoUpload:!0,showFileList:!1,disabled:c.value,accept:"image/*"},h),{default:()=>u.value.length?a.withDirectives(a.createVNode("div",{class:"sky-avatar-input__preview",style:{backgroundImage:`url(${u.value[0].url})`}},null),[[l.ElLoadingDirective,c.value||u.value[0].status!=="success"]]):a.createVNode(l.ElIcon,null,{default:()=>[a.createVNode(C.EpPlus,null,null)]}),file:r=>{if(d.default){const e=d.default();return a.h(a.Fragment,e.map(A=>a.cloneVNode(A,{...r})))}}})]})]})}});exports.SkyAvatarInput=V;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("element-plus/es/components/form-item/style/css");require("element-plus/es/components/icon/style/css");require("element-plus/es/components/upload/style/css");const r=require("vue"),U=require("../../icons/EpPlus.cjs"),l=require("element-plus"),E=require("vue-router");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");const k=require("../../hooks/useForm.cjs");require("../../hooks/useShow.cjs");require("../../hooks/useReferenceArrayField.cjs");require("../../hooks/useTreeWithDetails.cjs");const w=require("../../hooks/useFormGrid.cjs");require("../../hooks/useReferenceArrayInput.cjs");const I=require("../../hooks/useUpload.cjs"),V=require("../can-access/index.cjs"),R=r.defineComponent({name:"SkyAvatarInput",inheritAttrs:!1,props:{source:{type:String,required:!0},label:String,rules:Object,dataName:{type:String,default:"name"},dataUrl:{type:String,default:"url"}},setup(e,{slots:s,attrs:c}){const d=E.useRoute(),m=w.useFormGrid(),{formData:i,editData:n}=k.useForm(),v=r.computed(()=>e.label||e.source),{fileList:t,action:f,data:q,headers:p,method:g,name:y,beforeUpload:S}=I.useUpload(),o=r.useTemplateRef("uploadRef"),h=d.meta;if(n.value){const u=n.value[e.source];i[e.source]=u,t.value=[{upload:u,name:u[e.dataName],url:u[e.dataUrl]}]}const b=async u=>{o.value?.clearFiles();const a=u[0];a.uid=l.genFileId(),o.value?.handleStart(a),o.value?.submit()},F=()=>{const u=t.value[0]?.upload;if(u)i[e.source]=u;else{const a=t.value[0]?.raw;a?.upload&&(i[e.source]=a.upload)}};return()=>r.createVNode(V.SkyCanAccess,{resource:h.resource,action:["create","edit"],column:e.source},{default:()=>[r.createVNode(l.ElFormItem,{class:"sky-avatar-input",label:v.value,prop:e.source,rules:e.rules,style:m?`grid-area: ${e.source}`:""},{default:()=>[r.createVNode(l.ElUpload,r.mergeProps({ref:"uploadRef",action:f.value,method:g.value,name:y.value,withCredentials:e.withCredentials,multiple:e.multiple,limit:1,beforeUpload:S,onSuccess:F,onExceed:b,headers:p.value,data:q.value,listType:"picture-card",fileList:t.value,"onUpdate:file-list":u=>t.value=u,autoUpload:!0,showFileList:!1,accept:"image/*"},c),{default:()=>t.value.length?r.withDirectives(r.createVNode("div",{class:"sky-avatar-input__preview",style:{backgroundImage:`url(${t.value[0].url})`}},null),[[l.ElLoadingDirective,t.value[0].status!=="success"]]):r.createVNode(l.ElIcon,null,{default:()=>[r.createVNode(U.EpPlus,null,null)]}),file:u=>{if(s.default){const a=s.default();return r.h(r.Fragment,a.map(N=>r.cloneVNode(N,{...u})))}}})]})]})}});exports.SkyAvatarInput=R;
 //# sourceMappingURL=index.cjs.map

package/dist/components/avatar-input/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/avatar-input/index.tsx"],"sourcesContent":["import { EpPlus } from '@/icons/EpPlus'\nimport type { GetOneResult, Identifier, SkyUploadRawFile } from '@/provides'\nimport {\n  ElFormItem,\n  ElIcon,\n  ElLoadingDirective,\n  ElUpload,\n  genFileId,\n  type FormItemRule,\n  type UploadFile,\n  type UploadInstance,\n  type UploadProps,\n  type UploadRawFile,\n} from 'element-plus'\nimport {\n  cloneVNode,\n  computed,\n  defineComponent,\n  Fragment,\n  h,\n  ref,\n  shallowRef,\n  useTemplateRef,\n  withDirectives,\n} from 'vue'\nimport { useAsyncState } from '@vueuse/core'\nimport { useRoute } from 'vue-router'\nimport { useForm, useFormGrid, useUpload, type SkyUploadUserFile } from '@/hooks'\nimport { skyConfig } from '@/setup'\nimport { SkyCanAccess } from '../can-access'\nimport type { SkyLayoutRouteMeta } from '@/router'\n\nexport interface SkyOssAvatarInputProps {\n  reference: string\n  source: string\n  label?: string\n  rules?: FormItemRule | FormItemRule[]\n  dataId?: string\n  dataName?: string\n  dataUrl?: string\n  fileList?: SkyUploadUserFile[]\n}\n\nexport const SkyAvatarInput = defineComponent<SkyOssAvatarInputProps & Partial<UploadProps>>({\n  name: 'SkyAvatarInput',\n  inheritAttrs: false,\n  props: {\n    reference: {\n      type: String,\n      required: true,\n    },\n    source: {\n      type: String,\n      required: true,\n    },\n    label: String,\n    rules: Object,\n    dataId: {\n      type: String,\n      default: 'id',\n    },\n    dataName: {\n      type: String,\n      default: 'name',\n    },\n    dataUrl: {\n      type: String,\n      default: 'url',\n    },\n    fileList: {\n      type: Array,\n      default: () => [],\n    },\n  },\n  setup(props, { slots, attrs }) {\n    const route = useRoute()\n    const formGrid = useFormGrid()\n    const { formData, editData } = useForm()!\n    const title = computed<string>(() => props.label || props.source)\n    // init fileList\n    const { fileList } = useUpload(props.fileList!)\n    const uploadRef = useTemplateRef<UploadInstance>('uploadRef')\n    const routeMeta = route.meta as SkyLayoutRouteMeta\n\n    if (editData.value) {\n      formData[props.source] = editData.value[props.source]\n    }\n\n    const onExceed = async (files: File[]) => {\n      uploadRef.value?.clearFiles()\n      const file = files[0] as UploadRawFile\n      file.uid = genFileId()\n      uploadRef.value?.handleStart(file)\n      uploadRef.value?.submit()\n    }\n\n    const onSuccess = () => {\n      const id = fileList.value[0]?.id\n      if (id) {\n        formData[props.source] = id\n      } else {\n        const raw = fileList.value[0]?.raw as SkyUploadRawFile | undefined\n        if (raw?.data?.id) {\n          formData[props.source] = raw.data.id\n        }\n      }\n    }\n\n    let controller: AbortController | undefined\n    const { isLoading } = useAsyncState<GetOneResult | undefined>(\n      async () => {\n        const id = formData[props.source]\n        if (id) {\n          controller = new AbortController()\n          const res = await skyConfig.dataProvider?.getOne?.(props.reference, {\n            id: id as Identifier,\n            signal: controller.signal,\n          })\n\n          if (res?.data) {\n            fileList.value = [\n              {\n                id: res.data[props.dataId!] as Identifier,\n                name: res.data[props.dataName!] as string,\n                url: res.data[props.dataUrl!] as string,\n              },\n            ]\n            return res\n          }\n        }\n      },\n      undefined,\n      {\n        immediate: true,\n      },\n    )\n\n    const action = ref('')\n    const data = shallowRef<Record<string, unknown>>()\n    const headers = shallowRef<Record<string, unknown>>()\n    const method = ref()\n    const name = ref<string>()\n    const beforeUpload = async (rawFile: SkyUploadRawFile) => {\n      const res = await skyConfig.dataProvider?.getUploadConfig?.({\n        file: rawFile,\n      })\n      if (res?.data) {\n        action.value = res.data.action\n        data.value = res.data.data\n        headers.value = res.data.headers\n        method.value = res.data.method\n        name.value = res.data.name\n        rawFile.data = {\n          id: res.data.file.id,\n          name: res.data.file.name,\n          url: res.data.file.url,\n        }\n      }\n    }\n\n    return () => (\n      <SkyCanAccess resource={routeMeta.resource} action={['create', 'edit']} column={props.source}>\n        <ElFormItem\n          class=\"sky-avatar-input\"\n          label={title.value}\n          prop={props.source}\n          rules={props.rules}\n          style={formGrid ? `grid-area: ${props.source}` : ''}\n        >\n          <ElUpload\n            ref=\"uploadRef\"\n            action={action.value}\n            method={method.value}\n            name={name.value}\n            withCredentials={props.withCredentials}\n            multiple={props.multiple}\n            limit={1}\n            beforeUpload={beforeUpload}\n            onSuccess={onSuccess}\n            onExceed={onExceed}\n            headers={headers.value}\n            data={data.value}\n            listType=\"picture-card\"\n            fileList={fileList.value}\n            onUpdate:file-list={(fs: SkyUploadUserFile[]) => (fileList.value = fs)}\n            autoUpload={true}\n            showFileList={false}\n            disabled={isLoading.value}\n            // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes/accept\n            accept={'image/*'}\n            {...attrs}\n          >\n            {{\n              default: () =>\n                fileList.value.length ? (\n                  withDirectives(\n                    <div\n                      class=\"sky-avatar-input__preview\"\n                      style={{ backgroundImage: `url(${fileList.value[0]!.url})` }}\n                    ></div>,\n                    [\n                      [\n                        ElLoadingDirective,\n                        isLoading.value || fileList.value[0]!.status !== 'success',\n                      ],\n                    ],\n                  )\n                ) : (\n                  <ElIcon>\n                    <EpPlus />\n                  </ElIcon>\n                ),\n              file: (scope: { file: UploadFile; index: number }) => {\n                if (slots.default) {\n                  const vnodes = slots.default()\n                  return h(\n                    Fragment,\n                    vnodes.map((vnode) => cloneVNode(vnode, { ...scope })),\n                  )\n                }\n              },\n            }}\n          </ElUpload>\n        </ElFormItem>\n      </SkyCanAccess>\n    )\n  },\n})\n"],"names":["SkyAvatarInput","defineComponent","name","inheritAttrs","props","reference","type","required","source","label","rules","dataId","default","dataName","dataUrl","fileList","attrs","route","useRoute","formGrid","useFormGrid","editData","title","computed","useUpload","uploadRef","useTemplateRef","routeMeta","formData","onExceed","files","file","id","raw","controller","isLoading","res","skyConfig","url","immediate","action","ref","data","shallowRef","headers","method","beforeUpload","rawFile","onSuccess","fs","vnodes","slots","h","Fragment","vnode","cloneVNode"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/avatar-input/index.tsx"],"sourcesContent":["import { EpPlus } from '@/icons/EpPlus'\nimport type { SkyUploadRawFile } from '@/provides'\nimport {\n  ElFormItem,\n  ElIcon,\n  ElLoadingDirective,\n  ElUpload,\n  genFileId,\n  type FormItemRule,\n  type UploadFile,\n  type UploadInstance,\n  type UploadProps,\n  type UploadRawFile,\n} from 'element-plus'\nimport {\n  cloneVNode,\n  computed,\n  defineComponent,\n  Fragment,\n  h,\n  useTemplateRef,\n  withDirectives,\n} from 'vue'\nimport { useRoute } from 'vue-router'\nimport { useForm, useFormGrid, useUpload, type FormContext, type SkyUploadUserFile } from '@/hooks'\nimport { SkyCanAccess } from '../can-access'\nimport type { SkyLayoutRouteMeta } from '@/router'\n\nexport interface SkyOssAvatarInputProps {\n  source: string\n  label?: string\n  rules?: FormItemRule | FormItemRule[]\n  dataName?: string\n  dataUrl?: string\n}\n\nexport const SkyAvatarInput = defineComponent<SkyOssAvatarInputProps & Partial<UploadProps>>({\n  name: 'SkyAvatarInput',\n  inheritAttrs: false,\n  props: {\n    source: {\n      type: String,\n      required: true,\n    },\n    label: String,\n    rules: Object,\n    dataName: {\n      type: String,\n      default: 'name',\n    },\n    dataUrl: {\n      type: String,\n      default: 'url',\n    },\n  },\n  setup(props, { slots, attrs }) {\n    const route = useRoute()\n    const formGrid = useFormGrid()\n    const { formData, editData } = useForm()! as FormContext<\n      Record<string, Record<string, unknown>>\n    >\n    const title = computed<string>(() => props.label || props.source)\n    // init fileList\n    const { fileList, action, data, headers, method, name, beforeUpload } = useUpload()\n    const uploadRef = useTemplateRef<UploadInstance>('uploadRef')\n    const routeMeta = route.meta as SkyLayoutRouteMeta\n\n    if (editData.value) {\n      const ed = editData.value[props.source] as Record<string, unknown>\n      formData[props.source] = ed\n      fileList.value = [\n        {\n          upload: ed,\n          name: ed[props.dataName!] as string,\n          url: ed[props.dataUrl!] as string,\n        },\n      ]\n    }\n\n    const onExceed = async (files: File[]) => {\n      uploadRef.value?.clearFiles()\n      const file = files[0] as UploadRawFile\n      file.uid = genFileId()\n      uploadRef.value?.handleStart(file)\n      uploadRef.value?.submit()\n    }\n\n    const onSuccess = () => {\n      const upload = fileList.value[0]?.upload\n      if (upload) {\n        formData[props.source] = upload\n      } else {\n        const raw = fileList.value[0]?.raw as SkyUploadRawFile | undefined\n        if (raw?.upload) {\n          formData[props.source] = raw.upload\n        }\n      }\n    }\n\n    return () => (\n      <SkyCanAccess resource={routeMeta.resource} action={['create', 'edit']} column={props.source}>\n        <ElFormItem\n          class=\"sky-avatar-input\"\n          label={title.value}\n          prop={props.source}\n          rules={props.rules}\n          style={formGrid ? `grid-area: ${props.source}` : ''}\n        >\n          <ElUpload\n            ref=\"uploadRef\"\n            action={action.value}\n            method={method.value}\n            name={name.value}\n            withCredentials={props.withCredentials}\n            multiple={props.multiple}\n            limit={1}\n            beforeUpload={beforeUpload}\n            onSuccess={onSuccess}\n            onExceed={onExceed}\n            headers={headers.value}\n            data={data.value}\n            listType=\"picture-card\"\n            fileList={fileList.value}\n            onUpdate:file-list={(fs: SkyUploadUserFile[]) => (fileList.value = fs)}\n            autoUpload={true}\n            showFileList={false}\n            // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes/accept\n            accept={'image/*'}\n            {...attrs}\n          >\n            {{\n              default: () =>\n                fileList.value.length ? (\n                  withDirectives(\n                    <div\n                      class=\"sky-avatar-input__preview\"\n                      style={{ backgroundImage: `url(${fileList.value[0]!.url})` }}\n                    ></div>,\n                    [[ElLoadingDirective, fileList.value[0]!.status !== 'success']],\n                  )\n                ) : (\n                  <ElIcon>\n                    <EpPlus />\n                  </ElIcon>\n                ),\n              file: (scope: { file: UploadFile; index: number }) => {\n                if (slots.default) {\n                  const vnodes = slots.default()\n                  return h(\n                    Fragment,\n                    vnodes.map((vnode) => cloneVNode(vnode, { ...scope })),\n                  )\n                }\n              },\n            }}\n          </ElUpload>\n        </ElFormItem>\n      </SkyCanAccess>\n    )\n  },\n})\n"],"names":["SkyAvatarInput","defineComponent","name","inheritAttrs","props","source","type","required","label","rules","dataName","default","dataUrl","attrs","route","useRoute","formGrid","useFormGrid","editData","title","computed","beforeUpload","uploadRef","useTemplateRef","routeMeta","formData","upload","url","onExceed","files","file","onSuccess","fs","fileList","vnodes","slots","h","Fragment","vnode","cloneVNode"],"mappings":"yjCAoCAA,EAAAC,EAAAA,gBAAA,CACEC,KAAAA,iBACAC,aAAAA,GACAC,MAAAA,CACEC,OAAAA,CACEC,KAAAA,OACAC,SAAAA,IAEFC,MAAAA,OACAC,MAAAA,OACAC,SAAAA,CACEJ,KAAAA,OACAK,QAAAA,QAEFC,QAAAA,CACEN,KAAAA,OACAK,QAAAA,KACF,oBAEoBE,MAAAA,CAAM,EAAA,CAC1B,MAAAC,EAAAC,EAAAA,SAAA,EACAC,EAAAC,EAAAA,YAAA,cACkBC,SAAAA,eAGlBC,EAAAC,EAAAA,SAAA,IAAAhB,EAAA,OAAAA,EAAA,MAAA,wDAEuDiB,aAAAA,iBACvDC,EAAAC,EAAAA,eAAA,WAAA,EACAC,EAAAV,EAAA,2CAIEW,EAAAA,EAAAA,MAAAA,EAAAA,YAGIC,OAAAA,EACAxB,KAAAA,EAAAA,EAAAA,QAAAA,EACAyB,IAAAA,EAAAA,EAAAA,OAAAA,CACF,CAAA,CAEJ,CAEA,MAAAC,EAAA,MAAAC,GAAA,CACEP,EAAAA,OAAAA,WAAAA,EACA,MAAAQ,EAAAD,EAAA,CAAA,EACAC,EAAAA,IAAAA,YAAAA,EACAR,EAAAA,OAAAA,YAAAA,CAAAA,EACAA,EAAAA,OAAAA,OAAAA,qCAKA,GAAAI,EACED,EAAAA,EAAAA,MAAAA,EAAAA,MACF,0DAKA,+DAI0C,OAAA,CAAA,SAAA,MAAA,EAA4B,OAAArB,EAAA,MAAsB,EAAA,CAAAO,QAAAA,IAAAA,CAAAA,EAAAA,YAAAA,aAAAA,CAAA,MAAA,6DAKtE,MAAAK,EAAA,cAAAZ,EAAA,MAAA,GAAA,EACiC,EAAA,CAAAO,QAAAA,IAAAA,CAAAA,cAAAA,EAAAA,SAAAA,EAAAA,WAAAA,CAAA,IAAA,6GAQzB,MAAA,EAChB,aAAAU,EACkB,UAAAU,EACN,SAAAH,+BAGJ,SAAA,gCAEQ,qBAAAI,GAAAC,EAAA,MAAAD,EAC8C,WAAA,GACtD,aAAA,mBAGC,EAAAnB,CAAA,EAAA,kEAMG,MAAA,2EAGiD,8FAG9DF,QAAAA,IAAAA,CAAAA,EAAAA,YAAAA,EAAAA,OAAAA,KAAAA,IAAAA,CAAAA,2BAQD,MAAAuB,EAAAC,EAAA,QAAA,EACA,OAAAC,EAAAA,EAAAC,EAAAA,SAAAH,EAAA,IAAAI,GAAAC,EAAAA,WAAAD,EAAA,SAIF,CACF,CAAC,CAAA,CAAA,CAAA,CAAA,CAAA,GAMb,CACF,CAAA"}

package/dist/components/avatar-input/index.d.ts

@@ -1,13 +1,9 @@
 import { FormItemRule, UploadProps } from 'element-plus';
-import { SkyUploadUserFile } from '../../hooks';
 export interface SkyOssAvatarInputProps {
-    reference: string;
     source: string;
     label?: string;
     rules?: FormItemRule | FormItemRule[];
-    dataId?: string;
     dataName?: string;
     dataUrl?: string;
-    fileList?: SkyUploadUserFile[];
 }
 export declare const SkyAvatarInput: import('vue').DefineComponent<SkyOssAvatarInputProps & Partial<UploadProps>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkyOssAvatarInputProps & Partial<UploadProps>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/avatar-input/index.mjs

@@ -1,11 +1,10 @@
 import "element-plus/es/components/form-item/style/css";
 import "element-plus/es/components/icon/style/css";
 import "element-plus/es/components/upload/style/css";
-import { defineComponent as L, computed as F, useTemplateRef as R, ref as u, shallowRef as y, createVNode as i, mergeProps as D, withDirectives as N, h as P, Fragment as x, cloneVNode as q } from "vue";
-import { EpPlus as G } from "../../icons/EpPlus.mjs";
-import { ElFormItem as O, ElUpload as T, ElLoadingDirective as V, ElIcon as _, genFileId as $ } from "element-plus";
-import { useAsyncState as j } from "@vueuse/core";
-import { useRoute as M } from "vue-router";
+import { defineComponent as E, computed as F, useTemplateRef as k, createVNode as r, mergeProps as I, withDirectives as R, h as A, Fragment as C, cloneVNode as D } from "vue";
+import { EpPlus as L } from "../../icons/EpPlus.mjs";
+import { ElFormItem as N, ElUpload as x, ElLoadingDirective as G, ElIcon as P, genFileId as T } from "element-plus";
+import { useRoute as V } from "vue-router";
 import "../../hooks/useUser.mjs";
 import "../../hooks/usePermission.mjs";
 import "../../hooks/useMenu.mjs";
@@ -16,33 +15,24 @@ import "../../hooks/useLang.mjs";
 import "../../hooks/useTheme.mjs";
 import "../../hooks/useList.mjs";
 import "../../hooks/useHiddenTitle.mjs";
-import { useForm as z } from "../../hooks/useForm.mjs";
+import { useForm as _ } from "../../hooks/useForm.mjs";
 import "../../hooks/useShow.mjs";
 import "../../hooks/useReferenceArrayField.mjs";
 import "../../hooks/useTreeWithDetails.mjs";
-import { useFormGrid as B } from "../../hooks/useFormGrid.mjs";
+import { useFormGrid as $ } from "../../hooks/useFormGrid.mjs";
 import "../../hooks/useReferenceArrayInput.mjs";
-import { useUpload as H } from "../../hooks/useUpload.mjs";
-import { skyConfig as h } from "../../setup/index.mjs";
-import { SkyCanAccess as J } from "../can-access/index.mjs";
-const we = /* @__PURE__ */ L({
+import { useUpload as j } from "../../hooks/useUpload.mjs";
+import { SkyCanAccess as q } from "../can-access/index.mjs";
+const pe = /* @__PURE__ */ E({
   name: "SkyAvatarInput",
   inheritAttrs: !1,
   props: {
-    reference: {
-      type: String,
-      required: !0
-    },
     source: {
       type: String,
       required: !0
     },
     label: String,
     rules: Object,
-    dataId: {
-      type: String,
-      default: "id"
-    },
     dataName: {
       type: String,
       default: "name"
@@ -50,112 +40,90 @@ const we = /* @__PURE__ */ L({
     dataUrl: {
       type: String,
       default: "url"
-    },
-    fileList: {
-      type: Array,
-      default: () => []
     }
   },
-  setup(t, {
-    slots: d,
-    attrs: S
+  setup(e, {
+    slots: i,
+    attrs: s
   }) {
-    const b = M(), w = B(), {
-      formData: l,
-      editData: n
-    } = z(), U = F(() => t.label || t.source), {
-      fileList: r
-    } = H(t.fileList), o = R("uploadRef"), I = b.meta;
-    n.value && (l[t.source] = n.value[t.source]);
-    const k = async (a) => {
-      o.value?.clearFiles();
-      const e = a[0];
-      e.uid = $(), o.value?.handleStart(e), o.value?.submit();
-    }, A = () => {
-      const a = r.value[0]?.id;
-      if (a)
-        l[t.source] = a;
+    const n = V(), c = $(), {
+      formData: o,
+      editData: m
+    } = _(), d = F(() => e.label || e.source), {
+      fileList: a,
+      action: p,
+      data: f,
+      headers: v,
+      method: g,
+      name: h,
+      beforeUpload: y
+    } = j(), u = k("uploadRef"), S = n.meta;
+    if (m.value) {
+      const t = m.value[e.source];
+      o[e.source] = t, a.value = [{
+        upload: t,
+        name: t[e.dataName],
+        url: t[e.dataUrl]
+      }];
+    }
+    const b = async (t) => {
+      u.value?.clearFiles();
+      const l = t[0];
+      l.uid = T(), u.value?.handleStart(l), u.value?.submit();
+    }, U = () => {
+      const t = a.value[0]?.upload;
+      if (t)
+        o[e.source] = t;
       else {
-        const e = r.value[0]?.raw;
-        e?.data?.id && (l[t.source] = e.data.id);
-      }
-    };
-    let s;
-    const {
-      isLoading: c
-    } = j(async () => {
-      const a = l[t.source];
-      if (a) {
-        s = new AbortController();
-        const e = await h.dataProvider?.getOne?.(t.reference, {
-          id: a,
-          signal: s.signal
-        });
-        if (e?.data)
-          return r.value = [{
-            id: e.data[t.dataId],
-            name: e.data[t.dataName],
-            url: e.data[t.dataUrl]
-          }], e;
+        const l = a.value[0]?.raw;
+        l?.upload && (o[e.source] = l.upload);
       }
-    }, void 0, {
-      immediate: !0
-    }), m = u(""), f = y(), v = y(), p = u(), g = u(), C = async (a) => {
-      const e = await h.dataProvider?.getUploadConfig?.({
-        file: a
-      });
-      e?.data && (m.value = e.data.action, f.value = e.data.data, v.value = e.data.headers, p.value = e.data.method, g.value = e.data.name, a.data = {
-        id: e.data.file.id,
-        name: e.data.file.name,
-        url: e.data.file.url
-      });
     };
-    return () => i(J, {
-      resource: I.resource,
+    return () => r(q, {
+      resource: S.resource,
       action: ["create", "edit"],
-      column: t.source
+      column: e.source
     }, {
-      default: () => [i(O, {
+      default: () => [r(N, {
         class: "sky-avatar-input",
-        label: U.value,
-        prop: t.source,
-        rules: t.rules,
-        style: w ? `grid-area: ${t.source}` : ""
+        label: d.value,
+        prop: e.source,
+        rules: e.rules,
+        style: c ? `grid-area: ${e.source}` : ""
       }, {
-        default: () => [i(T, D({
+        default: () => [r(x, I({
           ref: "uploadRef",
-          action: m.value,
-          method: p.value,
-          name: g.value,
-          withCredentials: t.withCredentials,
-          multiple: t.multiple,
+          action: p.value,
+          method: g.value,
+          name: h.value,
+          withCredentials: e.withCredentials,
+          multiple: e.multiple,
           limit: 1,
-          beforeUpload: C,
-          onSuccess: A,
-          onExceed: k,
+          beforeUpload: y,
+          onSuccess: U,
+          onExceed: b,
           headers: v.value,
           data: f.value,
           listType: "picture-card",
-          fileList: r.value,
-          "onUpdate:file-list": (a) => r.value = a,
+          fileList: a.value,
+          "onUpdate:file-list": (t) => a.value = t,
           autoUpload: !0,
           showFileList: !1,
-          disabled: c.value,
           accept: "image/*"
-        }, S), {
-          default: () => r.value.length ? N(i("div", {
+        }, s), {
+          default: () => a.value.length ? R(r("div", {
             class: "sky-avatar-input__preview",
             style: {
-              backgroundImage: `url(${r.value[0].url})`
+              backgroundImage: `url(${a.value[0].url})`
             }
-          }, null), [[V, c.value || r.value[0].status !== "success"]]) : i(_, null, {
-            default: () => [i(G, null, null)]
+          }, null), [[G, a.value[0].status !== "success"]]) : r(P, null, {
+            default: () => [r(L, null, null)]
           }),
-          file: (a) => {
-            if (d.default) {
-              const e = d.default();
-              return P(x, e.map((E) => q(E, {
-                ...a
+          file: (t) => {
+            if (i.default) {
+              const l = i.default();
+              return A(C, l.map((w) => D(w, {
+                ...t
               })));
             }
           }
@@ -165,6 +133,6 @@ const we = /* @__PURE__ */ L({
   }
 });
 export {
-  we as SkyAvatarInput
+  pe as SkyAvatarInput
 };
 //# sourceMappingURL=index.mjs.map

package/dist/components/avatar-input/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/avatar-input/index.tsx"],"sourcesContent":["import { EpPlus } from '@/icons/EpPlus'\nimport type { GetOneResult, Identifier, SkyUploadRawFile } from '@/provides'\nimport {\n  ElFormItem,\n  ElIcon,\n  ElLoadingDirective,\n  ElUpload,\n  genFileId,\n  type FormItemRule,\n  type UploadFile,\n  type UploadInstance,\n  type UploadProps,\n  type UploadRawFile,\n} from 'element-plus'\nimport {\n  cloneVNode,\n  computed,\n  defineComponent,\n  Fragment,\n  h,\n  ref,\n  shallowRef,\n  useTemplateRef,\n  withDirectives,\n} from 'vue'\nimport { useAsyncState } from '@vueuse/core'\nimport { useRoute } from 'vue-router'\nimport { useForm, useFormGrid, useUpload, type SkyUploadUserFile } from '@/hooks'\nimport { skyConfig } from '@/setup'\nimport { SkyCanAccess } from '../can-access'\nimport type { SkyLayoutRouteMeta } from '@/router'\n\nexport interface SkyOssAvatarInputProps {\n  reference: string\n  source: string\n  label?: string\n  rules?: FormItemRule | FormItemRule[]\n  dataId?: string\n  dataName?: string\n  dataUrl?: string\n  fileList?: SkyUploadUserFile[]\n}\n\nexport const SkyAvatarInput = defineComponent<SkyOssAvatarInputProps & Partial<UploadProps>>({\n  name: 'SkyAvatarInput',\n  inheritAttrs: false,\n  props: {\n    reference: {\n      type: String,\n      required: true,\n    },\n    source: {\n      type: String,\n      required: true,\n    },\n    label: String,\n    rules: Object,\n    dataId: {\n      type: String,\n      default: 'id',\n    },\n    dataName: {\n      type: String,\n      default: 'name',\n    },\n    dataUrl: {\n      type: String,\n      default: 'url',\n    },\n    fileList: {\n      type: Array,\n      default: () => [],\n    },\n  },\n  setup(props, { slots, attrs }) {\n    const route = useRoute()\n    const formGrid = useFormGrid()\n    const { formData, editData } = useForm()!\n    const title = computed<string>(() => props.label || props.source)\n    // init fileList\n    const { fileList } = useUpload(props.fileList!)\n    const uploadRef = useTemplateRef<UploadInstance>('uploadRef')\n    const routeMeta = route.meta as SkyLayoutRouteMeta\n\n    if (editData.value) {\n      formData[props.source] = editData.value[props.source]\n    }\n\n    const onExceed = async (files: File[]) => {\n      uploadRef.value?.clearFiles()\n      const file = files[0] as UploadRawFile\n      file.uid = genFileId()\n      uploadRef.value?.handleStart(file)\n      uploadRef.value?.submit()\n    }\n\n    const onSuccess = () => {\n      const id = fileList.value[0]?.id\n      if (id) {\n        formData[props.source] = id\n      } else {\n        const raw = fileList.value[0]?.raw as SkyUploadRawFile | undefined\n        if (raw?.data?.id) {\n          formData[props.source] = raw.data.id\n        }\n      }\n    }\n\n    let controller: AbortController | undefined\n    const { isLoading } = useAsyncState<GetOneResult | undefined>(\n      async () => {\n        const id = formData[props.source]\n        if (id) {\n          controller = new AbortController()\n          const res = await skyConfig.dataProvider?.getOne?.(props.reference, {\n            id: id as Identifier,\n            signal: controller.signal,\n          })\n\n          if (res?.data) {\n            fileList.value = [\n              {\n                id: res.data[props.dataId!] as Identifier,\n                name: res.data[props.dataName!] as string,\n                url: res.data[props.dataUrl!] as string,\n              },\n            ]\n            return res\n          }\n        }\n      },\n      undefined,\n      {\n        immediate: true,\n      },\n    )\n\n    const action = ref('')\n    const data = shallowRef<Record<string, unknown>>()\n    const headers = shallowRef<Record<string, unknown>>()\n    const method = ref()\n    const name = ref<string>()\n    const beforeUpload = async (rawFile: SkyUploadRawFile) => {\n      const res = await skyConfig.dataProvider?.getUploadConfig?.({\n        file: rawFile,\n      })\n      if (res?.data) {\n        action.value = res.data.action\n        data.value = res.data.data\n        headers.value = res.data.headers\n        method.value = res.data.method\n        name.value = res.data.name\n        rawFile.data = {\n          id: res.data.file.id,\n          name: res.data.file.name,\n          url: res.data.file.url,\n        }\n      }\n    }\n\n    return () => (\n      <SkyCanAccess resource={routeMeta.resource} action={['create', 'edit']} column={props.source}>\n        <ElFormItem\n          class=\"sky-avatar-input\"\n          label={title.value}\n          prop={props.source}\n          rules={props.rules}\n          style={formGrid ? `grid-area: ${props.source}` : ''}\n        >\n          <ElUpload\n            ref=\"uploadRef\"\n            action={action.value}\n            method={method.value}\n            name={name.value}\n            withCredentials={props.withCredentials}\n            multiple={props.multiple}\n            limit={1}\n            beforeUpload={beforeUpload}\n            onSuccess={onSuccess}\n            onExceed={onExceed}\n            headers={headers.value}\n            data={data.value}\n            listType=\"picture-card\"\n            fileList={fileList.value}\n            onUpdate:file-list={(fs: SkyUploadUserFile[]) => (fileList.value = fs)}\n            autoUpload={true}\n            showFileList={false}\n            disabled={isLoading.value}\n            // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes/accept\n            accept={'image/*'}\n            {...attrs}\n          >\n            {{\n              default: () =>\n                fileList.value.length ? (\n                  withDirectives(\n                    <div\n                      class=\"sky-avatar-input__preview\"\n                      style={{ backgroundImage: `url(${fileList.value[0]!.url})` }}\n                    ></div>,\n                    [\n                      [\n                        ElLoadingDirective,\n                        isLoading.value || fileList.value[0]!.status !== 'success',\n                      ],\n                    ],\n                  )\n                ) : (\n                  <ElIcon>\n                    <EpPlus />\n                  </ElIcon>\n                ),\n              file: (scope: { file: UploadFile; index: number }) => {\n                if (slots.default) {\n                  const vnodes = slots.default()\n                  return h(\n                    Fragment,\n                    vnodes.map((vnode) => cloneVNode(vnode, { ...scope })),\n                  )\n                }\n              },\n            }}\n          </ElUpload>\n        </ElFormItem>\n      </SkyCanAccess>\n    )\n  },\n})\n"],"names":["SkyAvatarInput","defineComponent","name","inheritAttrs","props","reference","type","required","source","label","rules","dataId","default","dataName","dataUrl","fileList","attrs","route","useRoute","formGrid","useFormGrid","editData","title","computed","useUpload","uploadRef","useTemplateRef","routeMeta","formData","onExceed","files","file","id","raw","controller","isLoading","res","skyConfig","url","immediate","action","ref","data","shallowRef","headers","method","beforeUpload","rawFile","onSuccess","fs","vnodes","slots","h","Fragment","vnode","cloneVNode"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/avatar-input/index.tsx"],"sourcesContent":["import { EpPlus } from '@/icons/EpPlus'\nimport type { SkyUploadRawFile } from '@/provides'\nimport {\n  ElFormItem,\n  ElIcon,\n  ElLoadingDirective,\n  ElUpload,\n  genFileId,\n  type FormItemRule,\n  type UploadFile,\n  type UploadInstance,\n  type UploadProps,\n  type UploadRawFile,\n} from 'element-plus'\nimport {\n  cloneVNode,\n  computed,\n  defineComponent,\n  Fragment,\n  h,\n  useTemplateRef,\n  withDirectives,\n} from 'vue'\nimport { useRoute } from 'vue-router'\nimport { useForm, useFormGrid, useUpload, type FormContext, type SkyUploadUserFile } from '@/hooks'\nimport { SkyCanAccess } from '../can-access'\nimport type { SkyLayoutRouteMeta } from '@/router'\n\nexport interface SkyOssAvatarInputProps {\n  source: string\n  label?: string\n  rules?: FormItemRule | FormItemRule[]\n  dataName?: string\n  dataUrl?: string\n}\n\nexport const SkyAvatarInput = defineComponent<SkyOssAvatarInputProps & Partial<UploadProps>>({\n  name: 'SkyAvatarInput',\n  inheritAttrs: false,\n  props: {\n    source: {\n      type: String,\n      required: true,\n    },\n    label: String,\n    rules: Object,\n    dataName: {\n      type: String,\n      default: 'name',\n    },\n    dataUrl: {\n      type: String,\n      default: 'url',\n    },\n  },\n  setup(props, { slots, attrs }) {\n    const route = useRoute()\n    const formGrid = useFormGrid()\n    const { formData, editData } = useForm()! as FormContext<\n      Record<string, Record<string, unknown>>\n    >\n    const title = computed<string>(() => props.label || props.source)\n    // init fileList\n    const { fileList, action, data, headers, method, name, beforeUpload } = useUpload()\n    const uploadRef = useTemplateRef<UploadInstance>('uploadRef')\n    const routeMeta = route.meta as SkyLayoutRouteMeta\n\n    if (editData.value) {\n      const ed = editData.value[props.source] as Record<string, unknown>\n      formData[props.source] = ed\n      fileList.value = [\n        {\n          upload: ed,\n          name: ed[props.dataName!] as string,\n          url: ed[props.dataUrl!] as string,\n        },\n      ]\n    }\n\n    const onExceed = async (files: File[]) => {\n      uploadRef.value?.clearFiles()\n      const file = files[0] as UploadRawFile\n      file.uid = genFileId()\n      uploadRef.value?.handleStart(file)\n      uploadRef.value?.submit()\n    }\n\n    const onSuccess = () => {\n      const upload = fileList.value[0]?.upload\n      if (upload) {\n        formData[props.source] = upload\n      } else {\n        const raw = fileList.value[0]?.raw as SkyUploadRawFile | undefined\n        if (raw?.upload) {\n          formData[props.source] = raw.upload\n        }\n      }\n    }\n\n    return () => (\n      <SkyCanAccess resource={routeMeta.resource} action={['create', 'edit']} column={props.source}>\n        <ElFormItem\n          class=\"sky-avatar-input\"\n          label={title.value}\n          prop={props.source}\n          rules={props.rules}\n          style={formGrid ? `grid-area: ${props.source}` : ''}\n        >\n          <ElUpload\n            ref=\"uploadRef\"\n            action={action.value}\n            method={method.value}\n            name={name.value}\n            withCredentials={props.withCredentials}\n            multiple={props.multiple}\n            limit={1}\n            beforeUpload={beforeUpload}\n            onSuccess={onSuccess}\n            onExceed={onExceed}\n            headers={headers.value}\n            data={data.value}\n            listType=\"picture-card\"\n            fileList={fileList.value}\n            onUpdate:file-list={(fs: SkyUploadUserFile[]) => (fileList.value = fs)}\n            autoUpload={true}\n            showFileList={false}\n            // https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes/accept\n            accept={'image/*'}\n            {...attrs}\n          >\n            {{\n              default: () =>\n                fileList.value.length ? (\n                  withDirectives(\n                    <div\n                      class=\"sky-avatar-input__preview\"\n                      style={{ backgroundImage: `url(${fileList.value[0]!.url})` }}\n                    ></div>,\n                    [[ElLoadingDirective, fileList.value[0]!.status !== 'success']],\n                  )\n                ) : (\n                  <ElIcon>\n                    <EpPlus />\n                  </ElIcon>\n                ),\n              file: (scope: { file: UploadFile; index: number }) => {\n                if (slots.default) {\n                  const vnodes = slots.default()\n                  return h(\n                    Fragment,\n                    vnodes.map((vnode) => cloneVNode(vnode, { ...scope })),\n                  )\n                }\n              },\n            }}\n          </ElUpload>\n        </ElFormItem>\n      </SkyCanAccess>\n    )\n  },\n})\n"],"names":["SkyAvatarInput","defineComponent","name","inheritAttrs","props","source","type","required","label","rules","dataName","default","dataUrl","attrs","route","useRoute","formGrid","useFormGrid","editData","title","computed","beforeUpload","uploadRef","useTemplateRef","routeMeta","formData","upload","url","onExceed","files","file","onSuccess","fs","fileList","vnodes","slots","h","Fragment","vnode","cloneVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAAA,KAAA,gBAAAC,EAAA;AAAA,EACEC,MAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,IACEC,QAAAA;AAAAA,MACEC,MAAAA;AAAAA,MACAC,UAAAA;AAAAA;IAEFC,OAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,UAAAA;AAAAA,MACEJ,MAAAA;AAAAA,MACAK,SAAAA;AAAAA;IAEFC,SAAAA;AAAAA,MACEN,MAAAA;AAAAA,MACAK,SAAAA;AAAAA,IACF;AAAA;;;IAEoBE,OAAAA;AAAAA,EAAM,GAAA;AAC1B,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAA;;MACkBC,UAAAA;AAAAA,aAGlBC,IAAAC,EAAA,MAAAhB,EAAA,SAAAA,EAAA,MAAA;;;;;;;MAEuDiB,cAAAA;AAAAA,aACvDC,IAAAC,EAAA,WAAA,GACAC,IAAAV,EAAA;;;AAIEW,MAAAA,EAAAA,EAAAA,MAAAA,IAAAA;QAGIC,QAAAA;AAAAA,QACAxB,MAAAA,EAAAA,EAAAA,QAAAA;AAAAA,QACAyB,KAAAA,EAAAA,EAAAA,OAAAA;AAAAA,MACF,CAAA;AAAA,IAEJ;AAEA,UAAAC,IAAA,OAAAC,MAAA;AACEP,MAAAA,EAAAA,OAAAA,WAAAA;AACA,YAAAQ,IAAAD,EAAA,CAAA;AACAC,MAAAA,EAAAA,MAAAA,EAAAA,GACAR,EAAAA,OAAAA,YAAAA,CAAAA,GACAA,EAAAA,OAAAA,OAAAA;AAAAA;;AAKA,UAAAI;AACED,QAAAA,EAAAA,EAAAA,MAAAA,IAAAA;AAAAA,WACF;;;MAKA;AAAA;;;MAI0C,QAAA,CAAA,UAAA,MAAA;AAAA,MAA4B,QAAArB,EAAA;AAAA,IAAsB,GAAA;AAAA,MAAAO,SAAAA,MAAAA,CAAAA,EAAAA,GAAAA;AAAAA,QAAA,OAAA;AAAA;;;QAKtE,OAAAK,IAAA,cAAAZ,EAAA,MAAA,KAAA;AAAA,MACiC,GAAA;AAAA,QAAAO,SAAAA,MAAAA,CAAAA,EAAAA,GAAAA,EAAAA;AAAAA,UAAA,KAAA;AAAA;;;;;UAQzB,OAAA;AAAA,UAChB,cAAAU;AAAA,UACkB,WAAAU;AAAA,UACN,UAAAH;AAAA;;UAGJ,UAAA;AAAA;UAEQ,sBAAA,CAAAI,MAAAC,EAAA,QAAAD;AAAA,UAC8C,YAAA;AAAA,UACtD,cAAA;AAAA;QAGC,GAAAnB,CAAA,GAAA;AAAA;YAMG,OAAA;AAAA;;YAGiD;AAAA;YAG9DF,SAAAA,MAAAA,CAAAA,EAAAA,GAAAA,MAAAA,IAAAA,CAAAA;AAAAA;;;AAQD,oBAAAuB,IAAAC,EAAA,QAAA;AACA,qBAAAC,EAAAC,GAAAH,EAAA,IAAA,CAAAI,MAAAC,EAAAD,GAAA;AAAA;;YAIF;AAAA,UACF;AAAA,QAAC,CAAA,CAAA;AAAA,MAAA,CAAA,CAAA;AAAA;EAMb;AACF,CAAA;"}

package/dist/components/can-access/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../hooks/useUser.cjs");const o=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");require("../../hooks/useTreeWithDetails.cjs");require("../../hooks/useFormGrid.cjs");require("../../hooks/useReferenceArrayInput.cjs");const r=require("vue"),u=require("../../setup/index.cjs"),c=require("vue-router"),q=r.defineComponent({name:"SkyCanAccess",props:{resource:{type:[String,Array],required:!0},action:{type:[String,Array],required:!0},row:[String,Number],column:[String,Number]},setup(i,{slots:e}){const t=c.useRouter(),{permissions:n}=o.usePermission(),s=r.computed(()=>t.hasRoute(u.skyConfig.loginRouteName)?u.skyConfig.dataProvider?.canAccess?.(i,n.value):!0);return()=>s.value?e.default?.():e.empty?.()}});exports.SkyCanAccess=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../hooks/useUser.cjs");const o=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");require("../../hooks/useTreeWithDetails.cjs");require("../../hooks/useFormGrid.cjs");require("../../hooks/useReferenceArrayInput.cjs");const r=require("../../setup/index.cjs"),u=require("vue"),c=require("vue-router"),q=u.defineComponent({name:"SkyCanAccess",props:{resource:{type:[String,Array],required:!0},action:{type:[String,Array],required:!0},row:[String,Number],column:[String,Number]},setup(i,{slots:e}){const t=c.useRouter(),{permissions:n}=o.usePermission(),s=u.computed(()=>t.hasRoute(r.skyConfig.loginRouteName)?r.skyConfig.dataProvider?.canAccess?.(i,n.value):!0);return()=>s.value?e.default?.():e.empty?.()}});exports.SkyCanAccess=q;
 //# sourceMappingURL=index.cjs.map

package/dist/components/can-access/index.mjs

@@ -14,8 +14,8 @@ import "../../hooks/useReferenceArrayField.mjs";
 import "../../hooks/useTreeWithDetails.mjs";
 import "../../hooks/useFormGrid.mjs";
 import "../../hooks/useReferenceArrayInput.mjs";
-import { defineComponent as n, computed as u } from "vue";
 import { skyConfig as t } from "../../setup/index.mjs";
+import { defineComponent as n, computed as u } from "vue";
 import { useRouter as s } from "vue-router";
 const x = /* @__PURE__ */ n({
   name: "SkyCanAccess",