@formkit/pro 0.118.1 → 0.119.0

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@formkit/pro",
3
- "version": "0.118.1",
3
+ "version": "0.119.0",
4
4
  "description": "FormKit Pro — Form inputs and tools for high quality forms.",
5
5
  "main": "index.cjs",
6
6
  "module": "index.mjs",
@@ -44,8 +44,9 @@
44
44
  "vue"
45
45
  ],
46
46
  "dependencies": {
47
- "@formkit/core": "^1.3.0",
48
- "@formkit/inputs": "^1.3.0"
47
+ "@formkit/core": "^1.4.0",
48
+ "@formkit/drag-and-drop": "^0.0.5",
49
+ "@formkit/inputs": "^1.4.0"
49
50
  },
50
51
  "type": "module"
51
52
  }
package/taglist/index.mjs CHANGED
@@ -1 +1 @@
1
- import{$if as e,createSectionFactory as t,createBaseSections as a}from"../index.mjs";import{icon as i}from"@formkit/inputs";const o=(e,t)=>()=>i(e,t),n=t("tl"),{outer:d,wrapper:l,inner:s,icon:r,label:$,prefix:p,suffix:c,help:u,messages:b,message:h}=a(n),g=n("input",(()=>({$el:"input",bind:"$attrs",attrs:{id:"$id",type:"text",onClick:"$handlers.click",onBlur:"$handlers.blur",onKeydown:"$handlers.keydown",onInput:"$handlers.input",onFocus:"$handlers.focus",value:"$inputText",tabindex:"0",placeholder:"$state.loading && $inputStd.length === 0 && $ui.isLoading.value || $placeholder || undefined",role:"combobox",autocomplete:"off",autocapitalize:"none",readonly:"$attrs.readonly || $isLoadingOption || undefined || $multiple && $max && $value && $value.length >= $max",disabled:"$disabled || $disabledInternally || undefined",onTouchmove:"$handlers.touchmove",onTouchstart:"$handlers.touchmove",onTouchend:"$handlers.touchend","aria-autocomplete":"list","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined',"aria-describedBy":"$describedBy","aria-activedescendant":"$expanded && $activeDescendant || undefined"}}))),x=n("listboxButton",(()=>({$el:"button",attrs:{style:"$visibilityStyles",id:'$id + "_listbox_button"',type:"button",onClick:"$handlers.toggleListbox",tabindex:"-1",disabled:"$disabled || undefined","aria-haspopup":"true","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined'}}))),v=n("tagWrapper",(()=>({$el:"span",for:["option","index","$selections"],attrs:{id:'$id + "_tag-wrapper_" + $index',key:"$option.value","data-value":"$option.value",tabindex:"-1",onClick:"$handlers.tagClick && $handlers.tagClick($option)",onFocus:"$handlers.tagFocus && $handlers.tagFocus($option)",onBlur:"$handlers.tagBlur && $handlers.tagBlur($option)",onKeydown:"$handlers.searchInputTagKeydown && $handlers.searchInputTagKeydown($option)","data-active-selection":"$activeSelectionValue === $option.value"}}))),m=n("tag",(()=>({$el:"div",attrs:{id:'$id + "_tag_" + $index',role:"button"}}))),y=n("removeSelection",(()=>({$el:"button",if:"$selections.length > 0",attrs:{id:'$id + "_remove_selection_" + $index',tabindex:"-1",type:"button",onClick:"$handlers.removeSelection && $handlers.removeSelection($option)","aria-controls":"$id"}}))),f=n("tagLabel",(()=>({$el:"span"}))),_=n("tags",(()=>({$el:"div",attrs:{id:'$id + "_selections"',"aria-live":"polite"}}))),k=n("tagLoading","span"),w=function(t){const a=t("dropdownWrapper",(()=>({$el:"div",attrs:{id:'$id + "_dropdown_wrapper"',"data-is-wrapper":!0,style:"$dropdownWrapperStyles",onScroll:"$handlers.scroll"}}))),i=t("listbox",(()=>({$el:"ul",if:"$expanded || $setForceExpanded",attrs:{style:"$listboxStyles",id:'$id + "_listbox"',role:"listbox","aria-activedescendant":"$activeDescendant","aria-labelledby":'$id + "_label"'}}))),n=t("listitem",(()=>({$el:"li",for:["option","index","$options"],bind:"$option.attrs",attrs:{id:'$id + "_listitem_" + $index',"data-disabled":"$option.attrs.disabled","data-value":"$option.value",key:"$option.value",onClick:"$handlers.selectOption($option)",onBlur:"$handlers.blurListitem",role:"option","aria-selected":"$hidingValue === true && false || $fns.isSelected($option)","data-is-active":"$fns.isActive($option)",tabindex:"-1"}}))),d=t("loadMore",(()=>({$el:"li",if:"$state.loading || $state.hasNextPage",attrs:{id:'$id + "_load_more"',key:"loadMore",role:"option",onClick:"$handlers.selectOption($loadMoreOption)","aria-selected":"false","data-is-active":"$fns.isActive($loadMoreOption)",tabindex:"-1"}}))),l=t("loadMoreInner","span"),s=t("emptyMessage",(()=>({$el:"li",if:"$showEmptyMessage && $state.loading !== true",attrs:{id:'$id + "_empty_message"',key:"$emptyMessage",role:"presentation"}}))),r=t("emptyMessageInner","span"),$=t("option",(()=>({$el:"div",attrs:{"data-checked":"$fns.isSelected($option)"}})));return()=>a(i(s(r("$emptyMessage")),n(e("$fns.isSelected($option)",o("selected")),$("$option.label")),d(e("$state.loading && $isLoadingOptions || $state.hasNextPage",l(e("$state.loading",o("loader")),"$state.loading && $ui.isLoading.value || $ui.loadMore.value")))))}(n);export{n as createSection,u as help,r as icon,s as inner,g as input,$ as label,w as listbox,x as listboxButton,h as message,b as messages,d as outer,p as prefix,y as removeSelection,c as suffix,m as tag,f as tagLabel,k as tagLoading,v as tagWrapper,_ as tags,l as wrapper};
1
+ import{$if as e,createSectionFactory as t,createBaseSections as a}from"../index.mjs";import{icon as i}from"@formkit/inputs";const o=(e,t)=>()=>i(e,t),n=t("tl"),{outer:d,wrapper:l,inner:s,icon:r,label:$,prefix:p,suffix:c,help:u,messages:b,message:g}=a(n),x=n("input",(()=>({$el:"input",bind:"$attrs",attrs:{id:"$id",type:"text",onClick:"$handlers.click",onBlur:"$handlers.blur",onKeydown:"$handlers.keydown",onInput:"$handlers.input",onFocus:"$handlers.focus",value:"$inputText",tabindex:"0",placeholder:"$state.loading && $inputStd.length === 0 && $ui.isLoading.value || $placeholder || undefined",role:"combobox",autocomplete:"off",autocapitalize:"none",readonly:"$attrs.readonly || $isLoadingOption || undefined || $multiple && $max && $value && $value.length >= $max",disabled:"$disabled || $disabledInternally || undefined","aria-autocomplete":"list","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined',"aria-describedBy":"$describedBy","aria-activedescendant":"$expanded && $activeDescendant || undefined"}}))),h=n("listboxButton",(()=>({$el:"button",attrs:{style:"$visibilityStyles",id:'$id + "_listbox_button"',type:"button",onClick:"$handlers.toggleListbox",tabindex:"-1",disabled:"$disabled || undefined","aria-haspopup":"true","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined'}}))),v=n("tagWrapper",(()=>({$el:"span",for:["option","index","$selections"],attrs:{id:'$id + "_tag-wrapper_" + $index',key:"$option.value","data-value":"$option.value",tabindex:"-1",onClick:"$handlers.tagClick && $handlers.tagClick($option)",onFocus:"$handlers.tagFocus && $handlers.tagFocus($option)",onBlur:"$handlers.tagBlur && $handlers.tagBlur($option)",onKeydown:"$handlers.searchInputTagKeydown && $handlers.searchInputTagKeydown($option)","data-active-selection":"$activeSelectionValue === $option.value"}}))),m=n("tag",(()=>({$el:"div",attrs:{id:'$id + "_tag_" + $index',role:"button"}}))),y=n("removeSelection",(()=>({$el:"button",if:"$selections.length > 0",attrs:{id:'$id + "_remove_selection_" + $index',tabindex:"-1",type:"button",onClick:"$handlers.removeSelection && $handlers.removeSelection($option)",onTouchstart:"$handlers.removeSelection && $handlers.removeSelection($option)","aria-controls":"$id"}}))),f=n("tagLabel",(()=>({$el:"span"}))),_=n("tags",(()=>({$el:"div",attrs:{id:'$id + "_selections"',"aria-live":"polite"}}))),k=n("tagLoading","span"),S=function(t){const a=t("dropdownWrapper",(()=>({$el:"div",attrs:{id:'$id + "_dropdown_wrapper"',"data-is-wrapper":!0,style:"$dropdownWrapperStyles",onScroll:"$handlers.scroll"}}))),i=t("listbox",(()=>({$el:"ul",if:"$expanded || $setForceExpanded",attrs:{style:"$listboxStyles",id:'$id + "_listbox"',role:"listbox","aria-activedescendant":"$activeDescendant","aria-labelledby":'$id + "_label"'}}))),n=t("listitem",(()=>({$el:"li",for:["option","index","$options"],bind:"$option.attrs",attrs:{id:'$id + "_listitem_" + $index',"data-disabled":"$option.attrs.disabled","data-value":"$option.value",key:"$option.value",onClick:"$handlers.selectOption($option)",onBlur:"$handlers.blurListitem",role:"option","aria-selected":"$hidingValue === true && false || $fns.isSelected($option)","data-is-active":"$fns.isActive($option)",tabindex:"-1"}}))),d=t("loadMore",(()=>({$el:"li",if:"$state.loading || $state.hasNextPage",attrs:{id:'$id + "_load_more"',key:"loadMore",role:"option",onClick:"$handlers.selectOption($loadMoreOption)","aria-selected":"false","data-is-active":"$fns.isActive($loadMoreOption)",tabindex:"-1"}}))),l=t("loadMoreInner","span"),s=t("emptyMessage",(()=>({$el:"li",if:"$showEmptyMessage && $state.loading !== true",attrs:{id:'$id + "_empty_message"',key:"$emptyMessage",role:"presentation"}}))),r=t("emptyMessageInner","span"),$=t("option",(()=>({$el:"div",attrs:{"data-checked":"$fns.isSelected($option)"}})));return()=>a(i(s(r("$emptyMessage")),n(e("$fns.isSelected($option)",o("selected")),$("$option.label")),d(e("$state.loading && $optionLoadingCounter === 0 || $state.hasNextPage",l(e("$state.loading",o("loader")),"$state.loading && $ui.isLoading.value || $ui.loadMore.value")))))}(n);export{n as createSection,u as help,r as icon,s as inner,x as input,$ as label,S as listbox,h as listboxButton,g as message,b as messages,d as outer,p as prefix,y as removeSelection,c as suffix,m as tag,f as tagLabel,k as tagLoading,v as tagWrapper,_ as tags,l as wrapper};
@@ -45,7 +45,7 @@ export const taglist: FormKitProInput = {
45
45
  tagWrapper(
46
46
  tag(
47
47
  $if(
48
- '$state.loading && $currentOptionsLoading.includes($option.value)',
48
+ '$state.loading && $optionLoaderValues.includes($option.value)',
49
49
  tagLoading('$ui.isLoading.value'),
50
50
  tagLabel('$option.label')
51
51
  ),
@@ -1 +1 @@
1
- import{createSectionFactory as e,createBaseSections as l}from"../index.mjs";const i=e("tb"),{outer:a,inner:s,wrapper:t,label:o,prefix:r,suffix:n,help:$,messages:d,message:p,icon:b}=l(i),u=i("singleToggle",(()=>({bind:"$attrs",$el:"button",attrs:{id:"$id","aria-label":"$label","aria-pressed":"$fns.isChecked($onValue, $value)",role:"checkbox",onClick:"$handlers.toggleValue()",disabled:"$disabled",class:"$classes.input",onBlur:"$handlers.blur"}}))),c=i("multiToggle",(()=>({bind:"$attrs",$el:"button",attrs:{id:"$id+'_'+$index","aria-label":"$label","aria-pressed":"$fns.isChecked($option, $value)",role:'$multiple && "checkbox" || "radio"',onClick:"$handlers.toggleValue($option)",class:"$classes.input",title:"$option.help",disabled:"$disabled || $option.disabled",onBlur:"$handlers.blur"}}))),g=i("inputInner",(()=>({bind:"$attrs",$el:"span"}))),h=i("options",(()=>({$el:"ul",attrs:{id:"$id",role:"group","data-vertical":'$vertical && "true" || "false"',"aria-labelledby":"$id"}}))),x=i("option",(()=>({$el:"li",for:["option","index","$options"],attrs:{role:"listitem",key:"$option.value","data-index":"$index"}})));export{g as buttonInput,i as createSection,$ as help,b as icon,s as inner,o as label,p as message,d as messages,c as multiToggle,x as option,h as options,a as outer,r as prefix,u as singleToggle,n as suffix,t as wrapper};
1
+ import{createSectionFactory as e,createBaseSections as l}from"../index.mjs";const i=e("tb"),{outer:a,inner:t,wrapper:o,label:s,prefix:n,suffix:r,help:$,messages:d,message:p,icon:b}=l(i),u=i("singleToggle",(()=>({bind:"$attrs",$el:"button",attrs:{id:"$id",type:"button","aria-label":"$label","aria-pressed":"$fns.isChecked($onValue, $value)",role:"checkbox",onClick:"$handlers.toggleValue()",disabled:"$disabled",class:"$classes.input",onBlur:"$handlers.blur"}}))),c=i("multiToggle",(()=>({bind:"$attrs",$el:"button",attrs:{type:"button",id:"$id+'_'+$index","aria-label":"$label","aria-pressed":"$fns.isChecked($option, $value)",role:'$multiple && "checkbox" || "radio"',onClick:"$handlers.toggleValue($option)",class:"$classes.input",title:"$option.help",disabled:"$disabled || $option.disabled",onBlur:"$handlers.blur"}}))),g=i("inputInner",(()=>({bind:"$attrs",$el:"span"}))),h=i("options",(()=>({$el:"ul",attrs:{id:"$id",role:"group","data-vertical":'$vertical && "true" || "false"',"aria-labelledby":"$id"}}))),x=i("option",(()=>({$el:"li",for:["option","index","$options"],attrs:{role:"listitem",key:"$option.value","data-index":"$index"}})));export{g as buttonInput,i as createSection,$ as help,b as icon,t as inner,s as label,p as message,d as messages,c as multiToggle,x as option,h as options,a as outer,n as prefix,u as singleToggle,r as suffix,o as wrapper};
@@ -1 +1 @@
1
- import{createSectionFactory as e,createBaseSections as s}from"../index.mjs";const t=e("tf"),{outer:a,wrapper:r,inner:l,icon:o,prefix:i,suffix:n,help:d,messages:c,message:$}=s(t),u=t("fieldset",(()=>({$el:"fieldset",attrs:{id:'$id + "_fieldset"',role:"presentation","aria-describedby":{if:"$help",then:'$: "help-" + $id',else:void 0}}}))),f=t("legend",(()=>({if:"$label",$el:"legend"}))),p=t("area",(()=>({$el:"div",attrs:{id:'$id + "_area"'}}))),_=t("source",(()=>({$el:"div",attrs:{id:'$id + "_source"',class:'$classes.transferlist + " " + $classes.source'}}))),g=t("sourceHeader",(()=>({$el:"div",attrs:{id:'$id + "_source_header"',role:"presentation",class:'$classes.transferlistHeader + " " + $classes.sourceHeader'}}))),h=t("sourceHeaderLabel",(()=>({if:"$sourceLabel",$el:"label",attrs:{id:'$id + "_source_header_label"',for:'$id + "_source_search_input"',class:'$classes.transferlistHeaderLabel + " " + $classes.sourceHeaderLabel'},children:"$sourceLabel || $label"}))),b=t("sourceHeaderItemCount",(()=>({$el:"span",attrs:{id:'$id + "_source_header_item_count"',role:"presentation","aria-label":'$fns.getOptionCount() + " items"',class:'$classes.transferlistHeaderItemCount + " " + $classes.sourceHeaderItemCount'},children:"$fns.getOptionCount()"}))),m=t("targetHeaderLabel",(()=>({if:"$targetLabel",$el:"label",attrs:{id:'$id + "_target_header_label"',for:'$id + "_target_search_input"',class:'$classes.transferlistHeaderLabel + " " + $classes.targetHeaderLabel'},children:"$targetLabel || $label"}))),v=t("targetHeaderItemCount",(()=>({$el:"span",attrs:{id:'$id + "_target_header_item_count"',role:"presentation","aria-label":'$fns.getOptionCount(true) + " items"',class:'$classes.transferlistHeaderItemCount + " " + $classes.targetHeaderItemCount'},children:"$fns.getOptionCount(true)"}))),L=t("sourceControls",(()=>({$el:"div",if:"$searchable",attrs:{id:'$id + "_source_controls"',class:'$classes.transferlistControls + " " + $classes.sourceControls'}}))),y=t("sourceSearch",(()=>({if:"$searchable",$el:"div",attrs:{id:'$id + "_source_search"',class:'$classes.transferlistSearch + " " + $classes.sourceSearch'}}))),M=t("sourceSearchInput",(()=>({$el:"input",attrs:{id:'$id + "_source_search_input"',type:"text",placeholder:"$placeholder",onInput:"$handlers.onSearch",value:"$inputText",onKeydown:"$handlers.handleSourceSearchKeyDown",disabled:"$disabled","aria-label":"Search",role:"searchbox",class:'$classes.transferlistSearchInput + " " + $classes.sourceSearchInput'}}))),S=t("sourceSearchClear",(()=>({$el:"button",if:"$inputText !== undefined",attrs:{id:'$id + "_source_search_clear"',type:"button",onClick:"$handlers.clearSearch","aria-label":"Clear search",class:'$classes.transferlistSearchClear + " " + $classes.sourceSearchClear'}}))),w=t("sourceListItems",(()=>({$el:"ul",attrs:{id:'$id + "_source_list_items"',"aria-activedescendant":"$activeDescendant",onMouseover:"$handlers.onMouseEnter(true)",onMouseout:"$handlers.onMouseLeave(true)",role:"listbox","aria-multiselectable":"true","aria-roledescription":"List of options to choose from.",class:'$classes.transferlistListItems + " " + $classes.sourceListItems',onKeydown:"$handlers.sourceKeyDown",tabindex:"0",onFocus:"$handlers.sourceFocused"}}))),C=t("sourceListItem",(()=>({for:["option","index","$sourceOptions"],$el:"li",attrs:{id:'$id + "_source_list_item_" + $index',"data-value":"$option.value","aria-selected":"$selections && $selections.length > 0 && $fns.isSelected($option)","data-is-active":"$fns.isActive($option)","data-disabled":"$option.attrs.disabled",role:"option",onClick:"$option.attrs.disabled !== true && $handlers.selectOption($option, true)",key:"$option.value",class:'$classes.transferlistListItem + " " + $classes.sourceListItem'}}))),I=t("sourceOption",(()=>({$el:"div",attrs:{"data-checked":"$selections && $selections.length > 0 && $fns.isSelected($option)",class:'$classes.transferlistOption + " " + $classes.sourceOption'}}))),k=t("sourceLoadMore",(()=>({$el:"li",if:"$targetLoading !== true && $state.loading || $state.hasNextPage",attrs:{id:'$id + "_source_load_more"',key:"loadMore","aria-selected":"false",class:'$classes.transferlistLoadMore + " " + $classes.sourceLoadMore'}}))),x=t("loadMoreInner","span"),B=t("target",(()=>({$el:"div",attrs:{id:'$id + "_target"',class:'$classes.transferlist + " " + $classes.target'}}))),H=t("targetHeader",(()=>({$el:"div",attrs:{id:'$id + "_target_header"',role:"presentation",class:'$classes.transferlistHeader + " " + $classes.targetHeader'}}))),O=t("targetListItems",(()=>({$el:"ul",attrs:{id:"$id","aria-activedescendant":"$activeDescendant",onMouseover:"$handlers.onMouseEnter(false)",onMouseout:"$handlers.onMouseLeave(false)",class:'$classes.transferlistListItems + " " + $classes.targetListItems',tabindex:"0",onKeydown:"$handlers.targetKeyDown",onFocus:"$handlers.targetFocused"}}))),A=t("targetListItem",(()=>({for:["option","index","$targetOptions"],$el:"li",attrs:{id:'$id + "_target_list_item_" + $index',"data-disabled":"$option.attrs.disabled","data-value":"$option.value","aria-selected":"$selections && $selections.length && $fns.isSelected($option, $target)","data-is-active":"$fns.isActive($option)",role:"option",onClick:"$option.attrs.disabled !== true && $handlers.selectOption($option, false)",key:"$option.value",class:'$classes.transferlistListItem + " " + $classes.targetListItem'}}))),F=t("targetOption",(()=>({$el:"div",attrs:{id:'$id + "_target_list_item_" + $index',class:'$classes.transferlistOption + " " + $classes.targetOption'}}))),E=t("targetLoadMore",(()=>({$el:"li",if:"$targetLoading && $state.loading",attrs:{id:'$id + "_target_load_more"',key:"loadMore","aria-selected":"false",class:'$classes.transferlistLoadMore + " " + $classes.targetLoadMore'}}))),V=t("transferControls",(()=>({$el:"div",attrs:{id:'$id + "_transfer_controls"'}}))),K=t("transferButtonForward",(()=>({if:"$transferOnSelect !== true",$el:"button",attrs:{id:'$id + "_transfer_button_forward"',type:"button",disabled:"$selections.length === 0 || $sourceSelected === false || $disabled || ($max && $value && $value.length >= $max)",onClick:"$handlers.transferForward","aria-label":"$ui.addSelectedValues.value",title:"$ui.addSelectedValues.value",class:'$classes.transferlistButton + " " + $classes.transferButtonForward'}}))),D=t("transferButtonForwardAll",(()=>({$el:"button",attrs:{id:'$id + "_transfer_button_forward_all"',type:"button",disabled:"$options.length === $targetOptions.length || $disabled || ($max && $value && $value.length >= $max)",onClick:"$handlers.transferForwardAll","aria-label":"$ui.addAllValues.value",title:"$ui.addAllValues.value",class:'$classes.transferlistButton + " " + $classes.transferButtonForwardAll'}}))),T=t("transferButtonBackward",(()=>({if:"$transferOnSelect !== true",$el:"button",attrs:{id:'$id + "_transfer_button_backward"',onClick:"$handlers.transferBackward",type:"button",disabled:"$selections.length === 0 || $sourceSelected === true || $disabled","aria-label":"$ui.removeSelectedValues.value",title:"$ui.removeSelectedValues.value",class:'$classes.transferlistButton + " " + $classes.transferButtonBackward'}}))),N=t("transferButtonBackwardAll",(()=>({$el:"button",attrs:{id:'$id + "_transfer_button_backward_all"',onClick:"$handlers.transferBackwardAll",type:"button",disabled:"$targetOptions.length === 0 || $disabled","aria-label":"$ui.removeAllValues.value",title:"$ui.removeAllValues.value",class:'$classes.transferlistButton + " " + $classes.transferButtonBackwardAll'}}))),P=t("controlLabel","span"),j=t("sourceEmptyMessage",(()=>({$el:"li",if:"$showSourceEmptyMessage && $sourceEmptyMessage && $state.loading !== true",attrs:{id:'$id + "_source_empty_message"',key:"$sourceEmptyMessage",role:"presentation"}}))),q=t("targetEmptyMessage",(()=>({$el:"li",if:"$showTargetEmptyMessage && $targetEmptyMessage",attrs:{id:'$id + "_empty_message"',key:"$emptyMessage",role:"presentation"}}))),z=t("emptyMessageInner","span");export{p as area,P as controlLabel,t as createSection,z as emptyMessageInner,u as fieldset,d as help,o as icon,l as inner,f as legend,x as loadMoreInner,$ as message,c as messages,a as outer,i as prefix,_ as source,L as sourceControls,j as sourceEmptyMessage,g as sourceHeader,b as sourceHeaderItemCount,h as sourceHeaderLabel,C as sourceListItem,w as sourceListItems,k as sourceLoadMore,I as sourceOption,y as sourceSearch,S as sourceSearchClear,M as sourceSearchInput,n as suffix,B as target,q as targetEmptyMessage,H as targetHeader,v as targetHeaderItemCount,m as targetHeaderLabel,A as targetListItem,O as targetListItems,E as targetLoadMore,F as targetOption,T as transferButtonBackward,N as transferButtonBackwardAll,K as transferButtonForward,D as transferButtonForwardAll,V as transferControls,r as wrapper};
1
+ import{createSectionFactory as e,createBaseSections as s}from"../index.mjs";const t=e("tf"),{outer:a,wrapper:r,inner:l,icon:o,prefix:i,suffix:n,help:d,messages:c,message:$}=s(t),u=t("fieldset",(()=>({$el:"fieldset",attrs:{id:'$id + "_fieldset"',role:"presentation","aria-describedby":{if:"$help",then:'$: "help-" + $id',else:void 0}}}))),h=t("legend",(()=>({if:"$label",$el:"legend"}))),p=t("area",(()=>({$el:"div",attrs:{id:'$id + "_area"'}}))),f=t("source",(()=>({$el:"div",attrs:{id:'$id + "_source"',class:'$classes.transferlist + " " + $classes.source'}}))),_=t("sourceHeader",(()=>({$el:"div",attrs:{id:'$id + "_source_header"',role:"presentation",class:'$classes.transferlistHeader + " " + $classes.sourceHeader'}}))),m=t("sourceHeaderLabel",(()=>({if:"$sourceLabel",$el:"label",attrs:{id:'$id + "_source_header_label"',for:'$id + "_source_search_input"',class:'$classes.transferlistHeaderLabel + " " + $classes.sourceHeaderLabel'},children:"$sourceLabel || $label"}))),g=t("sourceHeaderItemCount",(()=>({$el:"span",attrs:{id:'$id + "_source_header_item_count"',role:"presentation","aria-label":'$sourceOptions.length " items"',class:'$classes.transferlistHeaderItemCount + " " + $classes.sourceHeaderItemCount'}}))),b=t("targetHeaderLabel",(()=>({if:"$targetLabel",$el:"label",attrs:{id:'$id + "_target_header_label"',for:'$id + "_target_search_input"',class:'$classes.transferlistHeaderLabel + " " + $classes.targetHeaderLabel'},children:"$targetLabel || $label"}))),v=t("targetHeaderItemCount",(()=>({$el:"span",attrs:{id:'$id + "_target_header_item_count"',role:"presentation","aria-label":'$targetOptions.length + " items"',class:'$classes.transferlistHeaderItemCount + " " + $classes.targetHeaderItemCount'},children:"$targetOptions.length"}))),L=t("sourceControls",(()=>({$el:"div",if:"$searchable",attrs:{id:'$id + "_source_controls"',class:'$classes.transferlistControls + " " + $classes.sourceControls'}}))),S=t("sourceSearch",(()=>({if:"$searchable",$el:"div",attrs:{id:'$id + "_source_search"',class:'$classes.transferlistSearch + " " + $classes.sourceSearch'}}))),y=t("sourceSearchInput",(()=>({$el:"input",attrs:{id:'$id + "_source_search_input"',type:"text",placeholder:"$placeholder",onInput:"$handlers.onSearch",value:"$inputText",onKeydown:"$handlers.sourceSearchKeydown",disabled:"$disabled","aria-label":"Search",role:"searchbox",autocomplete:"off",class:'$classes.transferlistSearchInput + " " + $classes.sourceSearchInput',onFocus:"$handlers.sourceSearchFocus",onBlur:"$handlers.sourceSearchBlur"}}))),I=t("sourceSearchClear",(()=>({$el:"button",if:'$inputText !== ""',attrs:{id:'$id + "_source_search_clear"',type:"button",onClick:"$handlers.clearSearch","aria-label":"Clear search",class:'$classes.transferlistSearchClear + " " + $classes.sourceSearchClear'}}))),k=t("sourceListItems",(()=>({$el:"ul",attrs:{id:'$id + "_source_list_items"',"aria-activedescendant":"$activeDescendant",onMouseenter:"$handlers.onMouseenter(true)",onMouseout:"$handlers.onMouseleave(true)",role:"listbox","aria-multiselectable":"true","aria-roledescription":"List of options to choose from.",class:'$classes.transferlistListItems + " " + $classes.sourceListItems',onKeydown:"$handlers.sourceListKeydown",tabindex:"$searchable || $sourceOptions.length === 0 && -1 || 0",onFocus:"$handlers.sourceListFocused",onBlur:"$handlers.sourceListBlurred"}}))),w=t("sourceListItem",(()=>({for:["option","index","$sourceOptions"],$el:"li",attrs:{id:'$id + "_source_list_item_" + $index',"data-value":"$option.value","aria-selected":"$transferOnSelect === false && $fns.isSelected($option, $selectedSourceItems)","data-is-active":"$fns.isActive($option, $activeValue)","data-disabled":"$option.attrs.disabled",role:"option",onClick:"$handlers.listitemClick($option, true)",onTouchstart:"$handlers.listitemTouchstart($option, true)",onTouchmove:"$handlers.listitemTouchmove($option, true)",onTouchend:"$handlers.listitemTouchend($option, true)",key:"$option.value",class:'$classes.transferlistListItem + " " + $classes.sourceListItem'}}))),M=t("sourceOption",(()=>({$el:"div",attrs:{"data-checked":"$fns.isSelected($option, $selectedSourceItems)",class:'$classes.transferlistOption + " " + $classes.sourceOption'}}))),C=t("sourceLoadMore",(()=>({$el:"li",if:"$state.loading || $state.hasNextPage",attrs:{id:'$id + "_source_load_more"',key:"loadMore",onClick:"$handlers.listitemClick($loadMoreOption)","aria-selected":"false","data-is-active":"$fns.isActive($loadMoreOption)",tabindex:"-1"}}))),B=t("loadMoreInner","span"),O=t("target",(()=>({$el:"div",attrs:{id:'$id + "_target"',class:'$classes.transferlist + " " + $classes.target'}}))),x=t("targetHeader",(()=>({$el:"div",attrs:{id:'$id + "_target_header"',role:"presentation",class:'$classes.transferlistHeader + " " + $classes.targetHeader'}}))),H=t("targetListItems",(()=>({$el:"ul",attrs:{id:"$id","aria-activedescendant":"$activeDescendant",onMouseenter:"$handlers.onMouseenter(false)",onMouseout:"$handlers.onMouseleave(false)",class:'$classes.transferlistListItems + " " + $classes.targetListItems',tabindex:"$targetOptions.length === 0 && -1 || 0",onKeydown:"$handlers.targetListKeydown",onFocus:"$handlers.targetListFocused",onBlur:"$handlers.targetListBlurred"}}))),T=t("targetListItem",(()=>({for:["option","index","$targetOptions"],$el:"li",attrs:{id:'$id + "_target_list_item_" + $index',"data-disabled":"$option.attrs.disabled","data-value":"$option.value","aria-selected":"$transferOnSelect === false && $fns.isSelected($option, $selectedTargetItems)","data-is-active":"$fns.isActive($option, $activeValue)",role:"option",onClick:"$handlers.listitemClick($option, false)",onTouchstart:"$handlers.listitemTouchstart($option, false)",onTouchmove:"$handlers.listitemTouchmove($option, false)",onTouchend:"$handlers.listitemTouchend($option, false)",key:"$option.value",class:'$classes.transferlistListItem + " " + $classes.targetListItem'}}))),F=t("targetOption",(()=>({$el:"div",attrs:{id:'$id + "_target_list_item_" + $index + "_option"',"data-checked":"$fns.isSelected($option, $selectedTargetItems)",class:'$classes.transferlistOption + " " + $classes.targetOption'}}))),A=t("targetLoadMore",(()=>({$el:"li",if:"$targetLoading && $state.loading",attrs:{id:'$id + "_target_load_more"',key:"loadMore","aria-selected":"false",class:'$classes.transferlistLoadMore + " " + $classes.targetLoadMore'}}))),V=t("transferControls",(()=>({$el:"div",attrs:{id:'$id + "_transfer_controls"'}}))),E=t("transferButtonForward",(()=>({if:"$transferOnSelect !== true",$el:"button",attrs:{id:'$id + "_transfer_button_forward"',type:"button",disabled:"$selectedSourceItems.length === 0 || $disabled || ($max && $value && $value.length >= $max)",onClick:"$handlers.transferForward","aria-label":"$ui.addSelectedValues.value",title:"$ui.addSelectedValues.value",class:'$classes.transferlistButton + " " + $classes.transferButtonForward'}}))),K=t("transferButtonForwardAll",(()=>({$el:"button",attrs:{id:'$id + "_transfer_button_forward_all"',type:"button",disabled:"$sourceOptions.length === 0 || $disabled || ($max && $value && $value.length >= $max)",onClick:"$handlers.transferForwardAll","aria-label":"$ui.addAllValues.value",title:"$ui.addAllValues.value",onFocus:"$handlers.transferForwardAllFocused",class:'$classes.transferlistButton + " " + $classes.transferButtonForwardAll'}}))),D=t("transferButtonBackward",(()=>({if:"$transferOnSelect !== true",$el:"button",attrs:{id:'$id + "_transfer_button_backward"',onClick:"$handlers.transferBackward",type:"button",disabled:"$selectedTargetItems.length === 0 || $targetOptions.length === 0 || $disabled","aria-label":"$ui.removeSelectedValues.value",title:"$ui.removeSelectedValues.value",class:'$classes.transferlistButton + " " + $classes.transferButtonBackward'}}))),N=t("transferButtonBackwardAll",(()=>({$el:"button",attrs:{id:'$id + "_transfer_button_backward_all"',onClick:"$handlers.transferBackwardAll",type:"button",disabled:"$targetOptions.length === 0 || $disabled","aria-label":"$ui.removeAllValues.value",title:"$ui.removeAllValues.value",class:'$classes.transferlistButton + " " + $classes.transferButtonBackwardAll'}}))),P=t("controlLabel","span"),j=t("sourceEmptyMessage",(()=>({$el:"li",if:"$showSourceEmptyMessage && $sourceEmptyMessage && $state.loading !== true",attrs:{id:'$id + "_source_empty_message"',key:"$sourceEmptyMessage",role:"presentation"}}))),q=t("targetEmptyMessage",(()=>({$el:"li",if:"$showTargetEmptyMessage && $targetEmptyMessage",attrs:{id:'$id + "_empty_message"',key:"$emptyMessage",role:"presentation"}}))),z=t("emptyMessageInner","span");export{p as area,P as controlLabel,t as createSection,z as emptyMessageInner,u as fieldset,d as help,o as icon,l as inner,h as legend,B as loadMoreInner,$ as message,c as messages,a as outer,i as prefix,f as source,L as sourceControls,j as sourceEmptyMessage,_ as sourceHeader,g as sourceHeaderItemCount,m as sourceHeaderLabel,w as sourceListItem,k as sourceListItems,C as sourceLoadMore,M as sourceOption,S as sourceSearch,I as sourceSearchClear,y as sourceSearchInput,n as suffix,O as target,q as targetEmptyMessage,x as targetHeader,v as targetHeaderItemCount,b as targetHeaderLabel,T as targetListItem,H as targetListItems,A as targetLoadMore,F as targetOption,D as transferButtonBackward,N as transferButtonBackwardAll,E as transferButtonForward,K as transferButtonForwardAll,V as transferControls,r as wrapper};
@@ -26,9 +26,8 @@ import {
26
26
  sourceListItems,
27
27
  sourceListItem,
28
28
  sourceOption,
29
- sourceLoadMore,
30
- targetLoadMore,
31
29
  loadMoreInner,
30
+ sourceLoadMore,
32
31
  transferControls,
33
32
  transferButtonForward,
34
33
  transferButtonBackward,
@@ -39,7 +38,7 @@ import {
39
38
  targetEmptyMessage,
40
39
  emptyMessageInner,
41
40
  } from '../sections/transferListSections'
42
- import { default as transferListFeature } from '../features/transferlist'
41
+ import { default as transferListFeature } from '../features/transferlist/index'
43
42
  import { options, defaultIcon, localize } from '@formkit/inputs'
44
43
  import { $if } from '../compose'
45
44
 
@@ -57,7 +56,16 @@ export const transferlist: FormKitProInput = {
57
56
  help('$help'),
58
57
  wrapper(
59
58
  source(
60
- sourceHeader(sourceHeaderLabel(), sourceHeaderItemCount()),
59
+ sourceHeader(
60
+ sourceHeaderLabel(),
61
+ sourceHeaderItemCount(
62
+ $if(
63
+ '$optionsLoadingCounter > 0',
64
+ icon('loader'),
65
+ '$fns.getSourceItemCount($selectedSourceItems)'
66
+ )
67
+ )
68
+ ),
61
69
  sourceControls(
62
70
  sourceSearch(sourceSearchInput(), sourceSearchClear(icon('close')))
63
71
  ),
@@ -65,18 +73,18 @@ export const transferlist: FormKitProInput = {
65
73
  sourceEmptyMessage(emptyMessageInner('$sourceEmptyMessage')),
66
74
  sourceListItem(
67
75
  $if(
68
- '$transferOnSelect !== true && $fns.isSelected($option)',
76
+ '$transferOnSelect !== true && $fns.isSelected($option, $selectedSourceItems)',
69
77
  icon('selected')
70
78
  ),
71
79
  sourceOption('$option.label')
72
80
  ),
73
81
  sourceLoadMore(
74
- loadMoreInner(
75
- $if(
76
- '$targetLoading !== true && $state.loading',
77
- icon('loader')
78
- ),
79
- '$state.loading && $ui.isLoading.value || $ui.loadMore.value'
82
+ $if(
83
+ '$state.loading && $optionLoadingCounter === 0 || $state.hasNextPage',
84
+ loadMoreInner(
85
+ $if('$state.loading', icon('loader')),
86
+ '$state.loading && $ui.isLoading.value || $ui.loadMore.value'
87
+ )
80
88
  )
81
89
  )
82
90
  )
@@ -100,7 +108,12 @@ export const transferlist: FormKitProInput = {
100
108
  )
101
109
  ),
102
110
  target(
103
- targetHeader(targetHeaderLabel(), targetHeaderItemCount()),
111
+ targetHeader(
112
+ targetHeaderLabel(),
113
+ targetHeaderItemCount(
114
+ '$fns.getTargetItemCount($selectedTargetItems)'
115
+ )
116
+ ),
104
117
  targetListItems(
105
118
  targetEmptyMessage(
106
119
  $if(
@@ -110,15 +123,15 @@ export const transferlist: FormKitProInput = {
110
123
  ),
111
124
  targetListItem(
112
125
  $if(
113
- '$transferOnSelect !== true && $fns.isSelected($option)',
126
+ '$transferOnSelect !== true && $fns.isSelected($option, $selectedTargetItems)',
114
127
  icon('selected')
115
128
  ),
116
- targetOption('$option.label')
117
- ),
118
- targetLoadMore(
119
- loadMoreInner(
120
- $if('$targetLoading && $state.loading', icon('loader')),
121
- '$state.loading && $ui.isLoading.value || $ui.loadMore.value'
129
+ targetOption(
130
+ $if(
131
+ '$fns.optionLoading($option, $optionLoaderValues)',
132
+ '$ui.isLoading.value',
133
+ '$option.label'
134
+ )
122
135
  )
123
136
  )
124
137
  )
@@ -136,43 +149,12 @@ export const transferlist: FormKitProInput = {
136
149
  /**
137
150
  * An array of extra props to accept for this input.
138
151
  */
139
- props: [
140
- 'options',
141
- 'selections',
142
- 'activeValue',
143
- 'activeDescendant',
144
- 'sourceSelected',
145
- 'targetOptions',
146
- 'sourceOptions',
147
- 'optionLoader',
148
- 'filterOptions',
149
- 'inputText',
150
- 'hasNextPage',
151
- 'page',
152
- 'targetOptionValues',
153
- 'targetLoading',
154
- 'searchable',
155
- 'sourceLabel',
156
- 'targetLabel',
157
- 'transferOnSelect',
158
- 'disabled',
159
- 'placeholder',
160
- 'filter',
161
- 'showSourceEmptyMessage',
162
- 'showTargetEmptyMessage',
163
- 'sourceEmptyMessage',
164
- 'targetEmptyMessage',
165
- 'clearOnSelect',
166
- 'max',
167
- 'debounce',
168
- ],
152
+ props: [],
169
153
 
170
154
  /**
171
155
  * Additional features that make this input work.
172
156
  */
173
157
  features: [
174
- transferListFeature,
175
- options,
176
158
  defaultIcon('moveRight', 'right'),
177
159
  defaultIcon('moveLeft', 'left'),
178
160
  defaultIcon('fastForward', 'fastForward'),
@@ -186,5 +168,7 @@ export const transferlist: FormKitProInput = {
186
168
  localize('addSelectedValues'),
187
169
  localize('removeSelectedValues'),
188
170
  localize('removeAllValues'),
171
+ options,
172
+ transferListFeature,
189
173
  ],
190
174
  }