skyline-vue-admin 0.0.15 → 0.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/auto-complete-array-input/index.cjs +1 -1
- package/dist/components/auto-complete-array-input/index.cjs.map +1 -1
- package/dist/components/auto-complete-array-input/index.mjs +25 -22
- package/dist/components/auto-complete-array-input/index.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"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
|
|
1
|
+
"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;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +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
|
|
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 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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import "element-plus/es/components/form-item/style/css";
|
|
2
2
|
import "element-plus/es/components/select/style/css";
|
|
3
|
-
import { defineComponent as
|
|
3
|
+
import { defineComponent as h, computed as n, withDirectives as V, createVNode as m, mergeProps as D } from "vue";
|
|
4
4
|
import "../../hooks/useUser.mjs";
|
|
5
5
|
import "../../hooks/usePermission.mjs";
|
|
6
6
|
import "../../hooks/useMenu.mjs";
|
|
@@ -20,7 +20,7 @@ import { useReferenceArrayInput as w } from "../../hooks/useReferenceArrayInput.
|
|
|
20
20
|
import { skyConfig as x } from "../../setup/index.mjs";
|
|
21
21
|
import { useAsyncState as F } from "@vueuse/core";
|
|
22
22
|
import { ElFormItem as L, ElSelect as T, ElLoadingDirective as k } from "element-plus";
|
|
23
|
-
const ee = /* @__PURE__ */
|
|
23
|
+
const ee = /* @__PURE__ */ h({
|
|
24
24
|
name: "SkyAutoCompleteArrayInput",
|
|
25
25
|
inheritAttrs: !1,
|
|
26
26
|
props: {
|
|
@@ -46,52 +46,55 @@ const ee = /* @__PURE__ */ V({
|
|
|
46
46
|
}
|
|
47
47
|
},
|
|
48
48
|
setup(e, {
|
|
49
|
-
attrs:
|
|
49
|
+
attrs: s
|
|
50
50
|
}) {
|
|
51
|
-
const
|
|
52
|
-
formData:
|
|
51
|
+
const c = I(), {
|
|
52
|
+
formData: o,
|
|
53
53
|
editData: i
|
|
54
54
|
} = C(), {
|
|
55
|
-
getList:
|
|
55
|
+
getList: d,
|
|
56
56
|
listLoading: f,
|
|
57
57
|
listData: a,
|
|
58
58
|
reference: p
|
|
59
59
|
} = w(), y = n(() => e.label || e.source);
|
|
60
|
-
typeof
|
|
60
|
+
typeof o[e.source] > "u" && (o[e.source] = e.defaultValue), i.value && (o[e.source] = i.value[e.source]);
|
|
61
61
|
const g = (t) => {
|
|
62
|
-
const
|
|
63
|
-
|
|
62
|
+
const r = e.filterToQuery?.(t);
|
|
63
|
+
r && d(r);
|
|
64
64
|
};
|
|
65
65
|
let u;
|
|
66
66
|
const {
|
|
67
67
|
state: v,
|
|
68
68
|
isLoading: A
|
|
69
69
|
} = F(async () => {
|
|
70
|
-
const t =
|
|
71
|
-
if (t)
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
70
|
+
const t = o[e.source];
|
|
71
|
+
if (t) {
|
|
72
|
+
const r = Array.isArray(t) ? t : [t];
|
|
73
|
+
if (r.length)
|
|
74
|
+
return u = new AbortController(), x.dataProvider?.getMany?.(p, {
|
|
75
|
+
ids: r,
|
|
76
|
+
signal: u.signal
|
|
77
|
+
});
|
|
78
|
+
}
|
|
76
79
|
}, void 0, {
|
|
77
80
|
immediate: !0
|
|
78
81
|
}), l = (t) => {
|
|
79
|
-
const
|
|
82
|
+
const r = t[e.optionText], S = t[e.optionValue];
|
|
80
83
|
return {
|
|
81
|
-
label:
|
|
84
|
+
label: r,
|
|
82
85
|
value: S
|
|
83
86
|
};
|
|
84
87
|
}, b = n(() => a.value?.data ? a.value.data.map(l) : (v.value?.data || []).map(l));
|
|
85
|
-
return () =>
|
|
88
|
+
return () => V(
|
|
86
89
|
m(L, {
|
|
87
90
|
label: y.value,
|
|
88
91
|
prop: e.source,
|
|
89
92
|
rules: e.rules,
|
|
90
|
-
style:
|
|
93
|
+
style: c ? `grid-area: ${e.source}` : ""
|
|
91
94
|
}, {
|
|
92
95
|
default: () => [m(T, D({
|
|
93
|
-
modelValue:
|
|
94
|
-
"onUpdate:modelValue": (t) =>
|
|
96
|
+
modelValue: o[e.source],
|
|
97
|
+
"onUpdate:modelValue": (t) => o[e.source] = t,
|
|
95
98
|
multiple: !0,
|
|
96
99
|
filterable: !0,
|
|
97
100
|
remote: !0,
|
|
@@ -105,7 +108,7 @@ const ee = /* @__PURE__ */ V({
|
|
|
105
108
|
value: "value",
|
|
106
109
|
label: "label"
|
|
107
110
|
}
|
|
108
|
-
},
|
|
111
|
+
}, s), null)]
|
|
109
112
|
}),
|
|
110
113
|
// h(
|
|
111
114
|
// ElFormItem,
|
|
@@ -1 +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
|
|
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 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;"}
|