@formkit/pro 0.119.12 → 0.119.14

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.119.12",
3
+ "version": "0.119.14",
4
4
  "description": "FormKit Pro — Form inputs and tools for high quality forms.",
5
5
  "main": "index.cjs",
6
6
  "module": "index.mjs",
@@ -44,9 +44,9 @@
44
44
  "vue"
45
45
  ],
46
46
  "dependencies": {
47
- "@formkit/core": "^1.5.1",
48
- "@formkit/inputs": "^1.5.1",
49
- "@formkit/drag-and-drop": "0.0.7"
47
+ "@formkit/core": "^1.5.2",
48
+ "@formkit/drag-and-drop": "0.0.7",
49
+ "@formkit/inputs": "^1.5.2"
50
50
  },
51
51
  "type": "module"
52
52
  }
package/rating/index.mjs CHANGED
@@ -1 +1 @@
1
- import{createSectionFactory as e,createBaseSections as t,$if as o}from"../index.mjs";const r=e("rt"),{outer:i,wrapper:l,inner:s,label:a,prefix:n,suffix:d,help:$,messages:p,message:f,icon:h}=t(r),m=r("input",(()=>({$el:"input",bind:"$attrs",attrs:{id:"$id",type:"range",max:"$max",name:"$name",min:"0",disabled:"$disabled",step:"$step",onInput:"$handlers.DOMInput",onBlur:"$handlers.blur",value:"$value",style:{position:"absolute",zIndex:"0",top:0,right:0,bottom:0,opacity:"0"}}}))),v=r("itemsWrapper",(()=>({$el:"div",attrs:{style:{position:"relative",zIndex:"2"},id:"$id + _items_wrapper",onMousemove:"$hoverHighlight && $handlers.ratingHoverOver",onMouseleave:"$hoverHighlight && $handlers.ratingHoverOut",onTouchstart:"$handlers.ratingHoverOver",onTouchmove:"$handlers.ratingHoverOver",onTouchend:"$handlers.handleClick",onClick:"$handlers.handleClick"}}))),u=r("onItems",(()=>({$el:"div",attrs:{id:'$id + "_on_wrapper"',style:{position:"relative",display:"flex",width:'$onWidth + "%"',top:"0",bottom:"0",left:"0",overflow:"hidden",color:"$onColor"}}}))),x=r("offItems",(()=>({$el:"div",attrs:{id:'$id + "_off_wrapper"',style:{position:"absolute",display:"flex",flexDirection:"row-reverse",width:'$offWidth + "%"',top:"0",bottom:"0",right:"0",overflow:"hidden",color:"$offColor"}}}))),g=r("onItemWrapper",(()=>({$el:"div",for:["item","index","$max"],attrs:{style:{flex:"$wrapperWidth"}}}))),c=r("offItemWrapper",(()=>({$el:"div",for:["item","index","$max"],attrs:{style:{flex:"$wrapperWidth"}}}))),I=()=>g(o("$slots.onItem",(()=>()=>"$slots.onItem"),o("$slots.default",(()=>()=>"$slots.default"),h("rating")))),w=()=>c(o("$slots.offItem",(()=>()=>"$slots.offItem"),o("$slots.default",(()=>()=>"$slots.default"),h("rating"))));export{r as createSection,$ as help,h as icon,s as inner,m as input,v as itemsWrapper,a as label,f as message,p as messages,w as offItem,x as offItems,I as onItem,u as onItems,i as outer,n as prefix,d as suffix,l as wrapper};
1
+ import{createSectionFactory as e,createBaseSections as t,$if as o}from"../index.mjs";const r=e("rt"),{outer:i,wrapper:l,inner:s,label:a,prefix:n,suffix:d,help:$,messages:p,message:f,icon:h}=t(r),m=r("input",(()=>({$el:"input",bind:"$attrs",attrs:{id:"$id",type:"range",max:"$max",name:"$node.name",min:"0",disabled:"$disabled",step:"$step",onInput:"$handlers.DOMInput",onBlur:"$handlers.blur",value:"$value",style:{position:"absolute",zIndex:"0",top:0,right:0,bottom:0,opacity:"0"}}}))),v=r("itemsWrapper",(()=>({$el:"div",attrs:{style:{position:"relative",zIndex:"2"},id:"$id + _items_wrapper",onMousemove:"$hoverHighlight && $handlers.ratingHoverOver",onMouseleave:"$hoverHighlight && $handlers.ratingHoverOut",onTouchstart:"$handlers.ratingHoverOver",onTouchmove:"$handlers.ratingHoverOver",onTouchend:"$handlers.handleClick",onClick:"$handlers.handleClick"}}))),u=r("onItems",(()=>({$el:"div",attrs:{id:'$id + "_on_wrapper"',style:{position:"relative",display:"flex",width:'$onWidth + "%"',top:"0",bottom:"0",left:"0",overflow:"hidden",color:"$onColor"}}}))),x=r("offItems",(()=>({$el:"div",attrs:{id:'$id + "_off_wrapper"',style:{position:"absolute",display:"flex",flexDirection:"row-reverse",width:'$offWidth + "%"',top:"0",bottom:"0",right:"0",overflow:"hidden",color:"$offColor"}}}))),g=r("onItemWrapper",(()=>({$el:"div",for:["item","index","$max"],attrs:{style:{flex:"$wrapperWidth"}}}))),c=r("offItemWrapper",(()=>({$el:"div",for:["item","index","$max"],attrs:{style:{flex:"$wrapperWidth"}}}))),I=()=>g(o("$slots.onItem",(()=>()=>"$slots.onItem"),o("$slots.default",(()=>()=>"$slots.default"),h("rating")))),w=()=>c(o("$slots.offItem",(()=>()=>"$slots.offItem"),o("$slots.default",(()=>()=>"$slots.default"),h("rating"))));export{r as createSection,$ as help,h as icon,s as inner,m as input,v as itemsWrapper,a as label,f as message,p as messages,w as offItem,x as offItems,I as onItem,u as onItems,i as outer,n as prefix,d as suffix,l as wrapper};
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: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};
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:l,wrapper:d,inner:s,icon:r,label:$,prefix:p,suffix:c,help:u,messages:b,message:g}=a(n),v=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",name:"$node.name",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"}}))),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'}}))),h=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"}}))),f=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"}}))),y=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 + "_popover"',popover:{if:"$usePopover",then:"$popover",else:void 0},"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"}}))),l=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"}}))),d=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")),l(e("$state.loading && $optionLoadingCounter === 0 || $state.hasNextPage",d(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,v as input,$ as label,S as listbox,x as listboxButton,g as message,b as messages,l as outer,p as prefix,f as removeSelection,c as suffix,m as tag,y as tagLabel,k as tagLoading,h as tagWrapper,_ as tags,d as wrapper};
@@ -26,6 +26,7 @@ import dropdownFamily from '../features/dropdown-family/index'
26
26
  import taglistProps from '../features/dropdown-family/taglist/props'
27
27
  import searchInput from '../features/dropdown-family/searchInput'
28
28
  import taglistFeatures from '../features/dropdown-family/taglist/index'
29
+ import usePopover from '../features/popover'
29
30
 
30
31
  /**
31
32
  * Input definition for a taglist input.
@@ -88,5 +89,6 @@ export const taglist: FormKitProInput = {
88
89
  defaultIcon('loader', 'spinner'),
89
90
  localize('isLoading'),
90
91
  localize('loadMore'),
92
+ usePopover,
91
93
  ],
92
94
  }
package/toggle/index.mjs CHANGED
@@ -1 +1 @@
1
- import{createSectionFactory as e,createBaseSections as l,$if as a}from"../index.mjs";const o=e("tg"),{outer:$,wrapper:t,label:i,prefix:n,suffix:r,help:b,messages:f,message:u,icon:d}=l(o),s=o("input",(()=>({$el:"input",bind:"$attrs",attrs:{type:"checkbox",id:"$id",value:"$value",checked:"$checked",onInput:"$handlers.toggles",onBlur:"$handlers.blur",disabled:"$disabled"}}))),c=o("label",(()=>({if:"($label && $onValueLabel === undefined && $offValueLabel === undefined) || ($valueLabelDisplay === inner) && $altLabelPosition !== true",$el:"label",attrs:{for:"$id"},children:"$label"}))),h=o("altLabel",(()=>({$el:"label",if:"($label && ($onValueLabel || $offValueLabel) && $valueLabelDisplay !== hidden && $valueLabelDisplay !== inner) || $altLabelPosition === true",attrs:{for:"$id","data-label-alt":"true",style:{color:{if:"$checked",then:"$valueLabelColorOn",else:"$valueLabelColorOff"}}},children:"$label"}))),L=o("innerLabel",(()=>({$el:"div",if:"$valueLabelDisplay === inner && ($checked && $onValueLabel || $offValueLabel)",attrs:{style:{color:{if:"$checked",then:"$valueLabelColorOn",else:"$valueLabelColorOff"}}},children:{if:"$checked",then:"$onValueLabel",else:"$offValueLabel"}}))),k=o("valueLabel",(()=>({$el:"label",if:"$valueLabelDisplay !== hidden && $valueLabelDisplay !== inner && (($checked === true && $onValueLabel) || ($checked === false && $offValueLabel))",attrs:{for:"$id"},children:{if:"$checked && $onValueLabel",then:"$onValueLabel",else:{if:"$offValueLabel",then:"$offValueLabel"}}}))),p=o("inner",(()=>({$el:"label",attrs:{for:"$id",id:"$id + '_label'"}}))),v=o("track",(()=>({$el:"div",attrs:{style:{backgroundColor:{if:"$checked",then:"$trackColorOn",else:"$trackColorOff"}}}}))),V=o("thumb",(()=>({$el:"div",attrs:{style:{color:{if:"$checked",then:"$iconColorOn",else:"$iconColorOff"},backgroundColor:{if:"$checked",then:"$thumbColorOn",else:"$thumbColorOff"}}}}))),C=()=>V(a("$slots.default","$slots.default",d("thumb")));export{h as altLabel,o as createSection,c as defaultLabel,b as help,d as icon,p as inner,L as innerLabel,s as input,i as label,u as message,f as messages,$ as outer,n as prefix,r as suffix,C as thumbWrapper,v as track,k as valueLabel,t as wrapper};
1
+ import{createSectionFactory as e,createBaseSections as l,$if as a}from"../index.mjs";const o=e("tg"),{outer:$,wrapper:t,label:n,prefix:i,suffix:r,help:b,messages:f,message:d,icon:u}=l(o),s=o("input",(()=>({$el:"input",bind:"$attrs",attrs:{type:"checkbox",id:"$id",value:"$value",name:"$node.name",checked:"$checked",onInput:"$handlers.toggles",onBlur:"$handlers.blur",disabled:"$disabled"}}))),c=o("label",(()=>({if:"($label && $onValueLabel === undefined && $offValueLabel === undefined) || ($valueLabelDisplay === inner) && $altLabelPosition !== true",$el:"label",attrs:{for:"$id"},children:"$label"}))),h=o("altLabel",(()=>({$el:"label",if:"($label && ($onValueLabel || $offValueLabel) && $valueLabelDisplay !== hidden && $valueLabelDisplay !== inner) || $altLabelPosition === true",attrs:{for:"$id","data-label-alt":"true",style:{color:{if:"$checked",then:"$valueLabelColorOn",else:"$valueLabelColorOff"}}},children:"$label"}))),L=o("innerLabel",(()=>({$el:"div",if:"$valueLabelDisplay === inner && ($checked && $onValueLabel || $offValueLabel)",attrs:{style:{color:{if:"$checked",then:"$valueLabelColorOn",else:"$valueLabelColorOff"}}},children:{if:"$checked",then:"$onValueLabel",else:"$offValueLabel"}}))),k=o("valueLabel",(()=>({$el:"label",if:"$valueLabelDisplay !== hidden && $valueLabelDisplay !== inner && (($checked === true && $onValueLabel) || ($checked === false && $offValueLabel))",attrs:{for:"$id"},children:{if:"$checked && $onValueLabel",then:"$onValueLabel",else:{if:"$offValueLabel",then:"$offValueLabel"}}}))),p=o("inner",(()=>({$el:"label",attrs:{for:"$id",id:"$id + '_label'"}}))),v=o("track",(()=>({$el:"div",attrs:{style:{backgroundColor:{if:"$checked",then:"$trackColorOn",else:"$trackColorOff"}}}}))),V=o("thumb",(()=>({$el:"div",attrs:{style:{color:{if:"$checked",then:"$iconColorOn",else:"$iconColorOff"},backgroundColor:{if:"$checked",then:"$thumbColorOn",else:"$thumbColorOff"}}}}))),C=()=>V(a("$slots.default","$slots.default",u("thumb")));export{h as altLabel,o as createSection,c as defaultLabel,b as help,u as icon,p as inner,L as innerLabel,s as input,n as label,d as message,f as messages,$ as outer,i as prefix,r as suffix,C as thumbWrapper,v as track,k as valueLabel,t as wrapper};