@formkit/pro 0.119.12 → 0.119.14

package/autocomplete/autocomplete.ts

@@ -26,6 +26,7 @@ import dropdownFamily from '../features/dropdown-family/index'
 import autocompleteProps from '../features/dropdown-family/autocomplete/props'
 import searchInput from '../features/dropdown-family/searchInput'
 import autocompleteFeatures from '../features/dropdown-family/autocomplete'
+import usePopover from '../features/popover'
 
 /**
  * Input definition for a autocomplete input.
@@ -136,5 +137,6 @@ export const autocomplete: FormKitProInput = {
       searchInput,
       autocompleteFeatures
     ),
+    usePopover,
   ],
 }

package/autocomplete/index.mjs

@@ -1 +1 @@
-import{$if as e,createSectionFactory as i,createBaseSections as t}from"../index.mjs";import{icon as n}from"@formkit/inputs";const o=(e,i)=>()=>n(e,i),a=i("ac"),{outer:d,wrapper:l,inner:s,icon:$,label:r,prefix:p,suffix:c,help:u,messages:b,message:h}=t(a),v=a("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 || undefined",placeholder:"$state.loading && $ui.isLoading.value || $placeholder || undefined",tabindex:'$disabled && "-1" || 0',role:"combobox",autocomplete:"off",autocapitalize:"none",readonly:"$attrs.readonly || $state.loading || $multiple && $max && $value && $value.length >= $max && $hasHighlightedRange !== true || undefined","data-selection-appearance":"$selectionAppearance",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"}}))),m=a("listboxButton",(()=>({$el:"div",attrs:{style:"$visibilityStyles",id:'$id + "_listbox_button"',role:"button",onClick:"$handlers.toggleListbox",tabindex:'$disabled && "-1" || 0',"aria-haspopup":"true","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined',"aria-disabled":"$disabled || $state.loading || undefined","data-disabled":"$disabled || $disabledInternally || undefined"}}))),x=a("selectionWrapper",(()=>({for:["option","index","$selections"],$el:"div",attrs:{id:'$id + "_selection_wrapper_" + $index',key:"$option.value","data-value":"$option.value",tabindex:'$disabled && "-1" || 1',onKeydown:"$handlers.selectionKeydown && $handlers.selectionKeydown($multiple && $option || undefined)",onClick:"$handlers.selectionClick && $handlers.selectionClick($multiple && $option || undefined)",onFocus:"$handlers.selectionFocus && $handlers.selectionFocus($multiple && $option || undefined)",onBlur:"$handlers.selectionBlur && $handlers.selectionBlur($multiple && $option || undefined)","data-active-selection":"$activeSelectionValue === $option.value"}}))),f=a("selection",(()=>({$el:"div",attrs:{id:'$id + "_selection_" + $index'}}))),y=a("selections",(()=>({$el:"div",attrs:{"aria-live":"polite",id:'$id + "_selections"'}}))),g=a("removeSelection",(()=>({$el:"button",attrs:{id:'$selectionAppearance === "option" && $multiple && $id + "_remove_selection_" + $index || $id + "_remove_selection"',tabindex:"-1",type:"button",onClick:"$handlers.removeSelection && $handlers.removeSelection($multiple && $option || undefined)",onTouchend:"$handlers.removeSelection && $handlers.removeSelection($multiple && $option || undefined)","aria-controls":"$id"}}))),_=a("optionLoading","span"),k=a("option",(()=>({$el:"div",if:"$value !== undefined"}))),w=function(i){const t=i("dropdownWrapper",(()=>({$el:"div",attrs:{id:'$id + "_dropdown_wrapper"',"data-is-wrapper":!0,style:"$dropdownWrapperStyles",onScroll:"$handlers.scroll"}}))),n=i("listbox",(()=>({$el:"ul",if:"$expanded || $setForceExpanded",attrs:{style:"$listboxStyles",id:'$id + "_listbox"',role:"listbox","aria-activedescendant":"$activeDescendant","aria-labelledby":'$id + "_label"'}}))),a=i("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=i("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=i("loadMoreInner","span"),s=i("emptyMessage",(()=>({$el:"li",if:"$showEmptyMessage && $state.loading !== true",attrs:{id:'$id + "_empty_message"',key:"$emptyMessage",role:"presentation"}}))),$=i("emptyMessageInner","span"),r=i("option",(()=>({$el:"div",attrs:{"data-checked":"$fns.isSelected($option)"}})));return()=>t(n(s($("$emptyMessage")),a(e("$fns.isSelected($option)",o("selected")),r("$option.label")),d(e("$state.loading && $optionLoadingCounter === 0 || $state.hasNextPage",l(e("$state.loading",o("loader")),"$state.loading && $ui.isLoading.value || $ui.loadMore.value")))))}(a);export{a as createSection,u as help,$ as icon,s as inner,v as input,r as label,w as listbox,m as listboxButton,h as message,b as messages,k as option,_ as optionLoading,d as outer,p as prefix,g as removeSelection,f as selection,x as selectionWrapper,y as selections,c as suffix,l as wrapper};
+import{$if as e,createSectionFactory as i,createBaseSections as t}from"../index.mjs";import{icon as n}from"@formkit/inputs";const o=(e,i)=>()=>n(e,i),a=i("ac"),{outer:d,wrapper:l,inner:s,icon:$,label:r,prefix:p,suffix:c,help:u,messages:v,message:b}=t(a),h=a("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 || undefined",name:"$node.name",placeholder:"$state.loading && $ui.isLoading.value || $placeholder || undefined",tabindex:'$disabled && "-1" || 0',role:"combobox",autocomplete:"off",autocapitalize:"none",readonly:"$attrs.readonly || $state.loading || $multiple && $max && $value && $value.length >= $max && $hasHighlightedRange !== true || undefined","data-selection-appearance":"$selectionAppearance",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"}}))),m=a("listboxButton",(()=>({$el:"div",attrs:{style:"$visibilityStyles",id:'$id + "_listbox_button"',role:"button",onClick:"$handlers.toggleListbox",tabindex:'$disabled && "-1" || 0',"aria-haspopup":"true","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined',"aria-disabled":"$disabled || $state.loading || undefined","data-disabled":"$disabled || $disabledInternally || undefined"}}))),f=a("selectionWrapper",(()=>({for:["option","index","$selections"],$el:"div",attrs:{id:'$id + "_selection_wrapper_" + $index',key:"$option.value","data-value":"$option.value",tabindex:'$disabled && "-1" || 1',onKeydown:"$handlers.selectionKeydown && $handlers.selectionKeydown($multiple && $option || undefined)",onClick:"$handlers.selectionClick && $handlers.selectionClick($multiple && $option || undefined)",onFocus:"$handlers.selectionFocus && $handlers.selectionFocus($multiple && $option || undefined)",onBlur:"$handlers.selectionBlur && $handlers.selectionBlur($multiple && $option || undefined)","data-active-selection":"$activeSelectionValue === $option.value"}}))),x=a("selection",(()=>({$el:"div",attrs:{id:'$id + "_selection_" + $index'}}))),y=a("selections",(()=>({$el:"div",attrs:{"aria-live":"polite",id:'$id + "_selections"'}}))),g=a("removeSelection",(()=>({$el:"button",attrs:{id:'$selectionAppearance === "option" && $multiple && $id + "_remove_selection_" + $index || $id + "_remove_selection"',tabindex:"-1",type:"button",onClick:"$handlers.removeSelection && $handlers.removeSelection($multiple && $option || undefined)",onTouchend:"$handlers.removeSelection && $handlers.removeSelection($multiple && $option || undefined)","aria-controls":"$id"}}))),_=a("optionLoading","span"),k=a("option",(()=>({$el:"div",if:"$value !== undefined"}))),S=function(i){const t=i("dropdownWrapper",(()=>({$el:"div",attrs:{id:'$id + "_popover"',popover:{if:"$usePopover",then:"$popover",else:void 0},"data-is-wrapper":!0,style:"$dropdownWrapperStyles",onScroll:"$handlers.scroll"}}))),n=i("listbox",(()=>({$el:"ul",if:"$expanded || $setForceExpanded",attrs:{style:"$listboxStyles",id:'$id + "_listbox"',role:"listbox","aria-activedescendant":"$activeDescendant","aria-labelledby":'$id + "_label"'}}))),a=i("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=i("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=i("loadMoreInner","span"),s=i("emptyMessage",(()=>({$el:"li",if:"$showEmptyMessage && $state.loading !== true",attrs:{id:'$id + "_empty_message"',key:"$emptyMessage",role:"presentation"}}))),$=i("emptyMessageInner","span"),r=i("option",(()=>({$el:"div",attrs:{"data-checked":"$fns.isSelected($option)"}})));return()=>t(n(s($("$emptyMessage")),a(e("$fns.isSelected($option)",o("selected")),r("$option.label")),d(e("$state.loading && $optionLoadingCounter === 0 || $state.hasNextPage",l(e("$state.loading",o("loader")),"$state.loading && $ui.isLoading.value || $ui.loadMore.value")))))}(a);export{a as createSection,u as help,$ as icon,s as inner,h as input,r as label,S as listbox,m as listboxButton,b as message,v as messages,k as option,_ as optionLoading,d as outer,p as prefix,g as removeSelection,x as selection,f as selectionWrapper,y as selections,c as suffix,l as wrapper};

package/colorpicker/colorpicker.ts

@@ -45,6 +45,7 @@ import {
 import { $if } from '../compose'
 import { defaultIcon, options, localize } from '@formkit/inputs'
 import colorFeature from '../features/color'
+import usePopover from '../features/popover'
 
 /**
  * Input definition for a colorpicker input.
@@ -69,7 +70,7 @@ export const colorpicker: FormKitProInput = {
           swatchPreview(canvasSwatchPreview(), $if('$showValue', valueString()))
         ),
         $if(
-          '$inline || $panelIsOpen)',
+          '$inline || $expanded)',
           panel(
             $if(
               '$showPanelClose && ($inline === undefined || $inline === false)',
@@ -155,6 +156,7 @@ export const colorpicker: FormKitProInput = {
    */
   features: [
     colorFeature,
+    usePopover,
     options,
     defaultIcon('eyeDropper', 'color'),
     defaultIcon('close', 'close'),

package/colorpicker/index.mjs

@@ -1 +1 @@
-import{createSectionFactory as e,createBaseSections as a}from"../index.mjs";const s=e("cp"),{outer:l,wrapper:t,inner:i,label:r,prefix:n,suffix:d,help:$,messages:o,message:c,icon:h}=a(s),u=s("swatchPreview",(()=>({$el:"div",attrs:{class:"$classes.swatchPreview",tabindex:{if:"$disabled",then:-1,else:0},onClick:"$handlers.inputPreviewClick",onFocusout:"$handlers.inputPreviewFocusout",onKeydown:"$handlers.inputPreviewKeydown",role:"button","aria-valuetext":'$: "Current color: " + $value'}}))),p=s("valueString",(()=>({$el:"span",attrs:{class:"$classes.valueString"},children:{if:'$format === "hex"',then:"$hex",else:{if:'$format === "rgba"',then:"$rgbaString",else:{if:'$format === "hsla"',then:"$hslaString",else:""}}}}))),v=s("panel",(()=>({$el:"div",attrs:{id:"$id",class:"$classes.panel",onKeydown:"$handlers.panelKeydown","aria-role":{if:"$layout === popover",then:"dialog"},"aria-modal":{if:"$layout === popover",then:"true"},"aria-label":"$label",style:{position:{if:"$inline === undefined || $inline === false",then:"absolute"}}}}))),w=s("panelClose",(()=>({$el:"button",attrs:{type:"button",class:"$classes.panelClose",onClick:"$handlers.closePanel",tabindex:{if:"$showPanelClose",then:-1,else:0},onKeydown:"$handlers.panelCloseKeydown","aria-label":"$ui.close.value"}}))),b=s("controlGroup",(()=>({$el:"div",attrs:{class:"$classes.controlGroup","data-eye-dropper":"$hasNativeEyeDropper && $eyeDropper",role:"group"}}))),f=s("LS",(()=>({$el:"div",attrs:{class:"$classes.LS"}}))),g=s("canvasLS",(()=>({$el:"canvas",attrs:{id:'$: "canvas-ls-" + $id',class:'$classes.canvas + " " + $classes.canvasLS',width:256,height:256,"aria-hidden":"true"}}))),y=s("controlLS",(()=>({$el:"div",attrs:{tabindex:{if:"$disabled",then:-1,else:0},class:'$classes.control + " " + $classes.controlLS',onKeydown:"$handlers.lsKeydown",style:{left:'$controlLSPosition.x + "%"',top:'$controlLSPosition.y + "%"',backgroundColor:'$: "hsl(" + $hsla.h + "deg, " + ($hsla.s / 255) * 100 + "%, " + ($hsla.l / 255) * 100 + "%)"'},role:"slider","aria-valuemin":0,"aria-valuemax":1,"aria-valuetext":'$: "Lightness: " + $hslaPercent.l + "%, Saturation: " + $hslaPercent.s + "%"'}}))),m=s("hue",(()=>({$el:"div",attrs:{class:"$classes.hue"}}))),x=s("canvasHue",(()=>({$el:"canvas",attrs:{id:'$: "canvas-hue-" + $id',class:'$classes.canvas + " " + $classes.canvasHue',width:256,height:10,"aria-hidden":"true"}}))),F=s("controlHue",(()=>({$el:"div",attrs:{tabindex:{if:"$disabled",then:-1,else:0},onKeydown:"$handlers.hueControlKeydown",class:'$classes.control + " " + $classes.controlHue',style:{left:'$: "min(max(" + (($hsla.h / 360) * 100) + "%, 3px), calc(100% - 3px))"',backgroundColor:'$: "hsl(" + $hsla.h + "deg, 100%, 50%)"'},role:"slider","aria-valuemin":0,"aria-valuemax":360,"aria-valuenow":"$h"}}))),K=s("alpha",(()=>({$el:"div",attrs:{class:"$classes.alpha"}}))),S=s("canvasAlpha",(()=>({$el:"canvas",attrs:{id:'$: "canvas-alpha-" + $id',class:'$classes.canvas + " " + $classes.canvasAlpha',width:256,height:10,"aria-hidden":"true"}}))),L=s("controlAlpha",(()=>({$el:"div",attrs:{tabindex:{if:"$disabled",then:-1,else:0},onKeydown:"$handlers.alphaControlKeydown",class:'$classes.control + " " + $classes.controlAlpha',style:{left:'$: "min(max(" + ($hsla.a * 100) + "%, 3px), calc(100% - 3px))"',backgroundImage:'$: "linear-gradient(to right, hsla(" + $hsla.h + "deg, " + ($hsla.s / 255) * 100 + "%, " + ($hsla.l / 255) * 100 + "%, " + $hsla.a + "), hsla(" + $hsla.h + "deg, " + ($hsla.s / 255) * 100 + "%, " + ($hsla.l / 255) * 100 + "%, " + $hsla.a + ")), linear-gradient(to right, white, white)"'},role:"slider","aria-valuemin":0,"aria-valuemax":1,"aria-valuenow":"$hsla.a"}}))),G=s("preview",(()=>({$el:"div",attrs:{class:"$classes.preview"}}))),I=s("canvasPreview",(()=>({$el:"canvas",attrs:{id:'$: "canvas-preview-" + $id',class:'$classes.canvas + " " + $classes.canvasPreview',width:33,height:33,"aria-hidden":"true"}}))),C=s("canvasSwatchPreview",(()=>({$el:"div",attrs:{class:"$classes.canvasSwatchPreviewWrapper"},children:[{$el:"canvas",attrs:{id:'$: "canvas-swatch-preview-" + $id',class:'$classes.canvas + " " + $classes.canvasSwatchPreview',width:33,height:33,"aria-hidden":"true"}}]}))),P=s("eyeDropper",(()=>({$el:"div",attrs:{tabindex:{if:"$disabled",then:-1,else:0},role:"button",onKeydown:"$handlers.eyeDropperKeydown",id:'$: "eye-dropper-" + $id',class:"$classes.eyeDropper"}}))),k=s("formatField",(()=>({$el:"div",attrs:{class:"$classes.formatField"}}))),H=s("colorInputGroup",(()=>({$el:"div",attrs:{class:"$classes.colorInputGroup","aria-role":"group"}}))),T=s("hexField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.hexFieldGroup'},children:[{$el:"input",attrs:{onInput:"$handlers.hexInput",onKeydown:"$handlers.hexKeydown",onFocus:"$handlers.hexFocus",onBlur:"$handlers.hexBlur",id:'$: "hex-" + $id',tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",class:'$classes.colorField + " " + $classes.hexField',value:"$hex",autocomplete:"off"}},{$el:"label",children:"HEX",attrs:{for:'$: "hex-" + $id',class:"$classes.fieldLabel"}}]}))),A=s("rField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.rFieldGroup'},children:[{$el:"input",attrs:{id:'$: "r-" + $id',onInput:'$handlers.rangeLimitInput("rgba", 0, 255)',onKeydown:'$handlers.rangeLimitKeydown("rgba", 0, 255, 1)',type:"number",class:'$classes.colorField + " " + $classes.rField',min:0,max:255,step:1,tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$rgba.r",autocomplete:"off"}},{$el:"label",children:"R",attrs:{for:'$: "r-" + $id',class:"$classes.fieldLabel"}}]}))),D=s("gField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.gFieldGroup'},children:[{$el:"input",attrs:{id:'$: "g-" + $id',onInput:'$handlers.rangeLimitInput("rgba", 0, 255)',onKeydown:'$handlers.rangeLimitKeydown("rgba", 0, 255, 1)',type:"number",class:'$classes.colorField + " " + $classes.gField',min:0,max:255,step:1,tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$rgba.g",autocomplete:"off"}},{$el:"label",children:"G",attrs:{for:'$: "g-" + $id',class:"$classes.fieldLabel"}}]}))),B=s("bField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.bFieldGroup'},children:[{$el:"input",attrs:{id:'$: "b-" + $id',onInput:'$handlers.rangeLimitInput("rgba", 0, 255)',onKeydown:'$handlers.rangeLimitKeydown("rgba", 0, 255, 1)',type:"number",class:'$classes.colorField + " " + $classes.bField',min:0,max:255,step:1,tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$rgba.b",autocomplete:"off"}},{$el:"label",children:"B",attrs:{for:'$: "b-" + $id',class:"$classes.fieldLabel"}}]}))),E=s("aField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.aFieldGroup'},children:[{$el:"input",attrs:{id:'$: "a-" + $id',onInput:'$handlers.rangeLimitInput("alpha", 0, 1)',onKeydown:'$handlers.rangeLimitKeydown("alpha", 0, 1, 0.01)',type:"text",class:'$classes.colorField + " " + $classes.aField',value:"$rgba.a",tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",autocomplete:"off"},"aria-valuemin":0,"aria-valuemax":1,"aria-valuenow":"$rgba.a"},{$el:"label",children:"A",attrs:{for:'$: "a-" + $id',class:"$classes.fieldLabel"}}]}))),N=s("hField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.hFieldGroup'},children:[{$el:"input",attrs:{id:'$: "h-" + $id',onInput:'$handlers.rangeLimitInput("hsla", 0, 360)',onKeydown:'$handlers.rangeLimitKeydown("hsla", 0, 360, 1)',type:"text",class:'$classes.colorField + " " + $classes.hField',tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$hslaPercent.h",autocomplete:"off","aria-valuemin":0,"aria-valuemax":360,"aria-valuenow":"$hsla.h"}},{$el:"label",children:"H",attrs:{for:'$: "h-" + $id',class:"$classes.fieldLabel"}}]}))),R=s("sField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.sFieldGroup'},children:[{$el:"input",attrs:{id:'$: "s-" + $id',onInput:'$handlers.rangeLimitInput("hsla", 0, 100)',onKeydown:'$handlers.rangeLimitKeydown("hsla", 0, 100, 1)',type:"text",class:'$classes.colorField + " " + $classes.sField',tabindex:{if:"$disabled",then:-1,else:0},value:"$hslaPercent.s",autocomplete:"off","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":"$hsla.s"}},{$el:"label",children:"S",attrs:{for:'$: "s-" + $id',class:"$classes.fieldLabel"}}]}))),U=s("lField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.lFieldGroup'},children:[{$el:"input",attrs:{id:'$: "l-" + $id',onInput:'$handlers.rangeLimitInput("hsla", 0, 100)',onKeydown:'$handlers.rangeLimitKeydown("hsla", 0, 100, 1)',type:"text",class:'$classes.colorField + " " + $classes.lField',tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$hslaPercent.l",autocomplete:"off","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":"$hsla.l"}},{$el:"label",children:"L",attrs:{for:'$: "l-" + $id',class:"$classes.fieldLabel"}}]}))),W=s("formatSwitcher",(()=>({$el:"div",attrs:{class:"$classes.formatSwitcher",onClick:"$handlers.toggleFormat",tabindex:{if:"$disabled",then:-1,else:0},onKeydown:"$handlers.formatSwitcherKeydown",role:"button","aria-label":"$ui.next.value"}}))),X=s("swatches",(()=>({$el:"div",attrs:{id:'$: "swatches-" + $id',class:"$classes.swatches","data-keyboard-nav":"$swatchIsUsingKeyboardNav"}}))),j=s("swatch",(()=>({$el:"div",for:["swatch","index","$options"],if:"$swatch",attrs:{if:"$swatch.group",then:{class:"$classes.swatchGroup"},else:{class:"$classes.swatch",title:"$swatch.label"}},children:{if:"$swatch.group",then:[{$el:"span",attrs:{class:"$classes.swatchGroupLabel"},children:"$swatch.group"},{$el:"div",for:["groupSwatch","swatchIndex","$swatch.options"],attrs:{class:"$classes.swatch",title:"$groupSwatch.label"},children:[{$el:"canvas",attrs:{class:"$classes.swatchCanvas",width:21,height:21,onClick:"$handlers.swatchClick",onKeydown:"$handlers.swatchKeydown",tabindex:{if:"$: ($focusedSwatch === $fns.anyToHsvaString($groupSwatch.value, 0))",then:{if:"$disabled",then:-1,else:0},else:-1},key:'$groupSwatch.label + "-" + $groupSwatch.value',"data-color":"$fns.anyToHsvaString($groupSwatch.value, 0)","data-color-precise":"$fns.anyToHsvaString($groupSwatch.value, 2)","data-group":"$index","data-label":"$swatch.label",role:"button","aria-label":"$swatch.label"}}]}],else:{$el:"canvas",attrs:{class:"$classes.swatchCanvas",width:21,height:21,onClick:"$handlers.swatchClick",onKeydown:"$handlers.swatchKeydown",tabindex:{if:"$: ($focusedSwatch === $fns.anyToHsvaString($swatch.value, 0))",then:{if:"$disabled",then:-1,else:0},else:-1},key:'$swatch.label + "-" + $swatch.value',"data-color":"$fns.anyToHsvaString($swatch.value, 0)","data-color-precise":"$fns.anyToHsvaString($swatch.value, 2)","data-group":0,"data-label":"$swatch.label",role:"button","aria-label":"$swatch.label"}}}})));export{f as LS,E as aField,K as alpha,B as bField,S as canvasAlpha,x as canvasHue,g as canvasLS,I as canvasPreview,C as canvasSwatchPreview,H as colorInputGroup,L as controlAlpha,b as controlGroup,F as controlHue,y as controlLS,s as createSection,P as eyeDropper,k as formatField,W as formatSwitcher,D as gField,N as hField,$ as help,T as hexField,m as hue,h as icon,i as inner,U as lField,r as label,c as message,o as messages,l as outer,v as panel,w as panelClose,n as prefix,G as preview,A as rField,R as sField,d as suffix,j as swatch,u as swatchPreview,X as swatches,p as valueString,t as wrapper};
+import{createSectionFactory as e,createBaseSections as a}from"../index.mjs";const s=e("cp"),{outer:l,wrapper:t,inner:i,label:r,prefix:n,suffix:d,help:$,messages:o,message:c,icon:h}=a(s),u=s("swatchPreview",(()=>({$el:"div",attrs:{id:"$id",class:"$classes.swatchPreview",tabindex:{if:"$disabled",then:-1,else:0},onClick:"$handlers.inputPreviewClick",onFocusout:"$handlers.inputPreviewFocusout",onKeydown:"$handlers.inputPreviewKeydown",role:"button","aria-valuetext":'$: "Current color: " + $value'}}))),p=s("valueString",(()=>({$el:"span",attrs:{class:"$classes.valueString"},children:{if:'$format === "hex"',then:"$hex",else:{if:'$format === "rgba"',then:"$rgbaString",else:{if:'$format === "hsla"',then:"$hslaString",else:""}}}}))),v=s("panel",(()=>({$el:"div",attrs:{id:'$: $id + "_popover"',class:"$classes.panel",onKeydown:"$handlers.panelKeydown","aria-role":{if:"$layout === popover",then:"dialog"},"aria-modal":{if:"$layout === popover",then:"true"},"aria-label":"$label",popover:"$popover",style:{if:"$usePopover",then:{margin:0,top:'$popoverCoordinates.y + "px"',left:'$popoverCoordinates.x + "px"'},else:{position:{if:"$inline === undefined || $inline === false",then:"absolute"}}}}}))),w=s("panelClose",(()=>({$el:"button",attrs:{type:"button",class:"$classes.panelClose",onClick:"$handlers.closePanel",tabindex:{if:"$showPanelClose",then:-1,else:0},onKeydown:"$handlers.panelCloseKeydown","aria-label":"$ui.close.value"}}))),b=s("controlGroup",(()=>({$el:"div",attrs:{class:"$classes.controlGroup","data-eye-dropper":"$hasNativeEyeDropper && $eyeDropper",role:"group"}}))),f=s("LS",(()=>({$el:"div",attrs:{class:"$classes.LS"}}))),g=s("canvasLS",(()=>({$el:"canvas",attrs:{id:'$: "canvas-ls-" + $id',class:'$classes.canvas + " " + $classes.canvasLS',width:256,height:256,"aria-hidden":"true"}}))),y=s("controlLS",(()=>({$el:"div",attrs:{tabindex:{if:"$disabled",then:-1,else:0},class:'$classes.control + " " + $classes.controlLS',onKeydown:"$handlers.lsKeydown",style:{left:'$controlLSPosition.x + "%"',top:'$controlLSPosition.y + "%"',backgroundColor:'$: "hsl(" + $hsla.h + "deg, " + ($hsla.s / 255) * 100 + "%, " + ($hsla.l / 255) * 100 + "%)"'},role:"slider","aria-valuemin":0,"aria-valuemax":1,"aria-valuetext":'$: "Lightness: " + $hslaPercent.l + "%, Saturation: " + $hslaPercent.s + "%"'}}))),m=s("hue",(()=>({$el:"div",attrs:{class:"$classes.hue"}}))),x=s("canvasHue",(()=>({$el:"canvas",attrs:{id:'$: "canvas-hue-" + $id',class:'$classes.canvas + " " + $classes.canvasHue',width:256,height:10,"aria-hidden":"true"}}))),F=s("controlHue",(()=>({$el:"div",attrs:{tabindex:{if:"$disabled",then:-1,else:0},onKeydown:"$handlers.hueControlKeydown",class:'$classes.control + " " + $classes.controlHue',style:{left:'$: "min(max(" + (($hsla.h / 360) * 100) + "%, 3px), calc(100% - 3px))"',backgroundColor:'$: "hsl(" + $hsla.h + "deg, 100%, 50%)"'},role:"slider","aria-valuemin":0,"aria-valuemax":360,"aria-valuenow":"$h"}}))),K=s("alpha",(()=>({$el:"div",attrs:{class:"$classes.alpha"}}))),S=s("canvasAlpha",(()=>({$el:"canvas",attrs:{id:'$: "canvas-alpha-" + $id',class:'$classes.canvas + " " + $classes.canvasAlpha',width:256,height:10,"aria-hidden":"true"}}))),L=s("controlAlpha",(()=>({$el:"div",attrs:{tabindex:{if:"$disabled",then:-1,else:0},onKeydown:"$handlers.alphaControlKeydown",class:'$classes.control + " " + $classes.controlAlpha',style:{left:'$: "min(max(" + ($hsla.a * 100) + "%, 3px), calc(100% - 3px))"',backgroundImage:'$: "linear-gradient(to right, hsla(" + $hsla.h + "deg, " + ($hsla.s / 255) * 100 + "%, " + ($hsla.l / 255) * 100 + "%, " + $hsla.a + "), hsla(" + $hsla.h + "deg, " + ($hsla.s / 255) * 100 + "%, " + ($hsla.l / 255) * 100 + "%, " + $hsla.a + ")), linear-gradient(to right, white, white)"'},role:"slider","aria-valuemin":0,"aria-valuemax":1,"aria-valuenow":"$hsla.a"}}))),G=s("preview",(()=>({$el:"div",attrs:{class:"$classes.preview"}}))),C=s("canvasPreview",(()=>({$el:"canvas",attrs:{id:'$: "canvas-preview-" + $id',class:'$classes.canvas + " " + $classes.canvasPreview',width:33,height:33,"aria-hidden":"true"}}))),I=s("canvasSwatchPreview",(()=>({$el:"div",attrs:{class:"$classes.canvasSwatchPreviewWrapper"},children:[{$el:"canvas",attrs:{id:'$: "canvas-swatch-preview-" + $id',class:'$classes.canvas + " " + $classes.canvasSwatchPreview',width:33,height:33,"aria-hidden":"true"}}]}))),P=s("eyeDropper",(()=>({$el:"div",attrs:{tabindex:{if:"$disabled",then:-1,else:0},role:"button",onKeydown:"$handlers.eyeDropperKeydown",id:'$: "eye-dropper-" + $id',class:"$classes.eyeDropper"}}))),k=s("formatField",(()=>({$el:"div",attrs:{class:"$classes.formatField"}}))),H=s("colorInputGroup",(()=>({$el:"div",attrs:{class:"$classes.colorInputGroup","aria-role":"group"}}))),T=s("hexField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.hexFieldGroup'},children:[{$el:"input",attrs:{onInput:"$handlers.hexInput",onKeydown:"$handlers.hexKeydown",onFocus:"$handlers.hexFocus",onBlur:"$handlers.hexBlur",id:'$: "hex-" + $id',tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",class:'$classes.colorField + " " + $classes.hexField',value:"$hex",autocomplete:"off"}},{$el:"label",children:"HEX",attrs:{for:'$: "hex-" + $id',class:"$classes.fieldLabel"}}]}))),A=s("rField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.rFieldGroup'},children:[{$el:"input",attrs:{id:'$: "r-" + $id',onInput:'$handlers.rangeLimitInput("rgba", 0, 255)',onKeydown:'$handlers.rangeLimitKeydown("rgba", 0, 255, 1)',type:"number",class:'$classes.colorField + " " + $classes.rField',min:0,max:255,step:1,tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$rgba.r",autocomplete:"off"}},{$el:"label",children:"R",attrs:{for:'$: "r-" + $id',class:"$classes.fieldLabel"}}]}))),D=s("gField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.gFieldGroup'},children:[{$el:"input",attrs:{id:'$: "g-" + $id',onInput:'$handlers.rangeLimitInput("rgba", 0, 255)',onKeydown:'$handlers.rangeLimitKeydown("rgba", 0, 255, 1)',type:"number",class:'$classes.colorField + " " + $classes.gField',min:0,max:255,step:1,tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$rgba.g",autocomplete:"off"}},{$el:"label",children:"G",attrs:{for:'$: "g-" + $id',class:"$classes.fieldLabel"}}]}))),B=s("bField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.bFieldGroup'},children:[{$el:"input",attrs:{id:'$: "b-" + $id',onInput:'$handlers.rangeLimitInput("rgba", 0, 255)',onKeydown:'$handlers.rangeLimitKeydown("rgba", 0, 255, 1)',type:"number",class:'$classes.colorField + " " + $classes.bField',min:0,max:255,step:1,tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$rgba.b",autocomplete:"off"}},{$el:"label",children:"B",attrs:{for:'$: "b-" + $id',class:"$classes.fieldLabel"}}]}))),E=s("aField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.aFieldGroup'},children:[{$el:"input",attrs:{id:'$: "a-" + $id',onInput:'$handlers.rangeLimitInput("alpha", 0, 1)',onKeydown:'$handlers.rangeLimitKeydown("alpha", 0, 1, 0.01)',type:"text",class:'$classes.colorField + " " + $classes.aField',value:"$rgba.a",tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",autocomplete:"off"},"aria-valuemin":0,"aria-valuemax":1,"aria-valuenow":"$rgba.a"},{$el:"label",children:"A",attrs:{for:'$: "a-" + $id',class:"$classes.fieldLabel"}}]}))),N=s("hField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.hFieldGroup'},children:[{$el:"input",attrs:{id:'$: "h-" + $id',onInput:'$handlers.rangeLimitInput("hsla", 0, 360)',onKeydown:'$handlers.rangeLimitKeydown("hsla", 0, 360, 1)',type:"text",class:'$classes.colorField + " " + $classes.hField',tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$hslaPercent.h",autocomplete:"off","aria-valuemin":0,"aria-valuemax":360,"aria-valuenow":"$hsla.h"}},{$el:"label",children:"H",attrs:{for:'$: "h-" + $id',class:"$classes.fieldLabel"}}]}))),R=s("sField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.sFieldGroup'},children:[{$el:"input",attrs:{id:'$: "s-" + $id',onInput:'$handlers.rangeLimitInput("hsla", 0, 100)',onKeydown:'$handlers.rangeLimitKeydown("hsla", 0, 100, 1)',type:"text",class:'$classes.colorField + " " + $classes.sField',tabindex:{if:"$disabled",then:-1,else:0},value:"$hslaPercent.s",autocomplete:"off","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":"$hsla.s"}},{$el:"label",children:"S",attrs:{for:'$: "s-" + $id',class:"$classes.fieldLabel"}}]}))),U=s("lField",(()=>({$el:"div",attrs:{class:'$classes.fieldGroup + " " + $classes.lFieldGroup'},children:[{$el:"input",attrs:{id:'$: "l-" + $id',onInput:'$handlers.rangeLimitInput("hsla", 0, 100)',onKeydown:'$handlers.rangeLimitKeydown("hsla", 0, 100, 1)',type:"text",class:'$classes.colorField + " " + $classes.lField',tabindex:{if:"$disabled",then:-1,else:0},disabled:"$disabled",value:"$hslaPercent.l",autocomplete:"off","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":"$hsla.l"}},{$el:"label",children:"L",attrs:{for:'$: "l-" + $id',class:"$classes.fieldLabel"}}]}))),W=s("formatSwitcher",(()=>({$el:"div",attrs:{class:"$classes.formatSwitcher",onClick:"$handlers.toggleFormat",tabindex:{if:"$disabled",then:-1,else:0},onKeydown:"$handlers.formatSwitcherKeydown",role:"button","aria-label":"$ui.next.value"}}))),X=s("swatches",(()=>({$el:"div",attrs:{id:'$: "swatches-" + $id',class:"$classes.swatches","data-keyboard-nav":"$swatchIsUsingKeyboardNav"}}))),_=s("swatch",(()=>({$el:"div",for:["swatch","index","$options"],if:"$swatch",attrs:{if:"$swatch.group",then:{class:"$classes.swatchGroup"},else:{class:"$classes.swatch",title:"$swatch.label"}},children:{if:"$swatch.group",then:[{$el:"span",attrs:{class:"$classes.swatchGroupLabel"},children:"$swatch.group"},{$el:"div",for:["groupSwatch","swatchIndex","$swatch.options"],attrs:{class:"$classes.swatch",title:"$groupSwatch.label"},children:[{$el:"canvas",attrs:{class:"$classes.swatchCanvas",width:21,height:21,onClick:"$handlers.swatchClick",onKeydown:"$handlers.swatchKeydown",tabindex:{if:"$: ($focusedSwatch === $fns.anyToHsvaString($groupSwatch.value, 0))",then:{if:"$disabled",then:-1,else:0},else:-1},key:'$groupSwatch.label + "-" + $groupSwatch.value',"data-color":"$fns.anyToHsvaString($groupSwatch.value, 0)","data-color-precise":"$fns.anyToHsvaString($groupSwatch.value, 2)","data-group":"$index","data-label":"$swatch.label",role:"button","aria-label":"$swatch.label"}}]}],else:{$el:"canvas",attrs:{class:"$classes.swatchCanvas",width:21,height:21,onClick:"$handlers.swatchClick",onKeydown:"$handlers.swatchKeydown",tabindex:{if:"$: ($focusedSwatch === $fns.anyToHsvaString($swatch.value, 0))",then:{if:"$disabled",then:-1,else:0},else:-1},key:'$swatch.label + "-" + $swatch.value',"data-color":"$fns.anyToHsvaString($swatch.value, 0)","data-color-precise":"$fns.anyToHsvaString($swatch.value, 2)","data-group":0,"data-label":"$swatch.label",role:"button","aria-label":"$swatch.label"}}}})));export{f as LS,E as aField,K as alpha,B as bField,S as canvasAlpha,x as canvasHue,g as canvasLS,C as canvasPreview,I as canvasSwatchPreview,H as colorInputGroup,L as controlAlpha,b as controlGroup,F as controlHue,y as controlLS,s as createSection,P as eyeDropper,k as formatField,W as formatSwitcher,D as gField,N as hField,$ as help,T as hexField,m as hue,h as icon,i as inner,U as lField,r as label,c as message,o as messages,l as outer,v as panel,w as panelClose,n as prefix,G as preview,A as rField,R as sField,d as suffix,_ as swatch,u as swatchPreview,X as swatches,p as valueString,t as wrapper};

package/datepicker/datepicker.ts

@@ -51,6 +51,7 @@ import {
   panelClose,
 } from '../sections/datepickerSections'
 import { useCalendar } from '../features/calendar'
+import usePopover from '../features/popover'
 import { defaultIcon, localize } from '@formkit/inputs'
 import maskOverlay from '../features/maskOverlay'
 
@@ -144,6 +145,7 @@ export const datepicker: FormKitProInput = {
   features: [
     maskOverlay,
     useCalendar,
+    usePopover,
     localize('next'),
     localize('prev'),
     localize('changeDate'),

package/datepicker/index.mjs

@@ -1 +1 @@
-import{createSectionFactory as e,createBaseSections as a,createMaskOverlaySections as n}from"../index.mjs";const t=e("dp"),{outer:l,wrapper:o,inner:r,icon:d,label:$,prefix:s,suffix:i,help:u,messages:y,message:h}=a(t),p=t("input",(()=>({$el:"input",bind:"$attrs",attrs:{name:"$node.name",id:"$id",onKeydown:"$handlers.inputKeydown",value:"$inputText",onInput:"$handlers.dateInput",onClick:"$pickerOnly && $handlers.open",onBlur:"$handlers._blur",onFocus:"$handlers.focus",readonly:"$pickerOnly || $expanded",disabled:"$disabled"}}))),m=t("panelWrapper",(()=>({$el:"div",if:"$expanded",attrs:{id:"$id + _panels",role:"dialog",onBlur:"$handlers._blurOut()",tabindex:"-1","aria-modal":"true","aria-label":"Choose date","data-panel":"$panel"}}))),b=t("next",(()=>({$el:"button",if:"$showPagination",attrs:{id:"$id + _next_button",type:"button",onClick:"$handlers.next"}}))),f=t("nextLabel","span"),c=t("prev",(()=>({$el:"button",if:"$showPagination",attrs:{id:"$id + _prev_button",type:"button",onClick:"$handlers.prev"}}))),v=t("prevLabel","span"),k=t("calendar",(()=>({if:'$panel === "day"',$el:"table",for:["month","$calendar"],attrs:{key:'$fns.format($month.monthDay, "YYYY-MM")'}}))),x=t("calendarWeeks",(()=>({$el:"tbody"}))),w=t("calendarHeader",(()=>({$el:"thead"}))),_=t("weekDays",(()=>({$el:"tr"}))),D=t("weekDay",(()=>({$el:"th",for:["day","$month.weeks.0"],attrs:{"aria-label":'$fns.format($day, "dddd")'}}))),C=t("week",(()=>({$el:"tr",for:["week","$month.weeks"]}))),B=t("dayCell",(()=>({$el:"td",for:["day","$week"],attrs:{key:'$: "day" + $fns.format($day, "D")',onClick:"$handlers.setDate($day)",onKeydown:"$handlers.keyDown",onMouseenter:"$handlers.mouseEnter($day)",onMouseleave:"$handlers.mouseLeave",onBlur:"$handlers._blurOut(day)",tabindex:'$fns.sameDay($day) && "0" || "-1"',"data-is-extra":"$fns.notInMonth($month.monthDay, $day)","data-disabled":"$fns.isDisabled($day)","aria-selected":"$fns.isSelected($day)","aria-label":'$fns.format($day, "long")'}}))),M=t("day","div"),Y=t("openButton",(()=>({$el:"div",attrs:{style:"$visibilityStyles",id:'$id + "_listbox_button"',type:"div",role:"button",onClick:"$handlers.open",onKeydown:"$handlers.openKeydown",tabIndex:'$pickerOnly && "-1" || "0"',"data-disabled":"$disabled","aria-disabled":"$disabled","aria-label":'$value && ($ui.changeDate.value + ", " + $inputText) || $ui.chooseDate.value',"aria-haspopup":"true","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined'}}))),K=t("years",(()=>({if:'$panel === "year"',$el:"ul"}))),O=t("year",(()=>({for:["year","$years"],$el:"li",attrs:{key:'$: "year" + $fns.format($year, "YYYY")',onClick:"$handlers.setDate($year)",onKeydown:"$handlers.keyDown",onMouseenter:"$handlers.mouseEnter($year)",onMouseleave:"$handlers.mouseLeave",onBlur:"$handlers._blurOut(year)",tabindex:'$fns.sameYear($year) && "0" || "-1"',"aria-selected":"$fns.isSelected($year)","data-disabled":"$fns.isDisabledYear($year)"}}))),g=t("months",(()=>({if:'$panel === "month"',$el:"ul"}))),I=t("month",(()=>({$el:"li",for:["month","$months"],attrs:{key:'$: "month" + $fns.format($month, "M")',onClick:"$handlers.setDate($month)",onKeydown:"$handlers.keyDown",onMouseenter:"$handlers.mouseEnter($month)",onMouseleave:"$handlers.mouseLeave",onBlur:"$handlers._blurOut(month)",tabindex:'$fns.sameMonth($month) && "0" || "-1"',"aria-selected":"$fns.isSelected($month)","data-disabled":"$fns.isDisabledMonth($month)"}}))),T=t("panelHeader",(()=>({$el:"header",attrs:{"aria-live":"polite"}}))),H=t("yearsHeader",(()=>({$el:"div",if:'$panel === "year"'}))),L=t("monthsHeader",(()=>({$el:"div",if:'$panel === "month"'}))),P=t("daysHeader",(()=>({$el:"div",if:'$panel === "day"'}))),S=t("timeHeader",(()=>({$el:"div",if:'$panel === "time"'}))),E=t("yearButton",(()=>({$el:"button",attrs:{type:"button",id:"$id + _year_button",onClick:"$handlers.jumpTo(year)"},children:"$fns.format($renderedDate, $yearFormat)"}))),F=t("monthButton",(()=>({$el:"button",attrs:{type:"button",id:"$id + _month_button",onClick:"$handlers.jumpTo(month)"},children:"$fns.format($renderedDate, $monthButtonFormat)"}))),j=t("dayButton",(()=>({$el:"button",attrs:{type:"button",id:"$id + _day_button",onClick:"$handlers.jumpTo(day)",tabindex:"2"},children:"$fns.format($renderedDate, $dayButtonFormat)"}))),W=t("removeSelection",(()=>({$el:"button",if:"$clearable && $_value",attrs:{id:'$id + "_remove_selection"',type:"button",onClick:"$handlers.clear","aria-controls":"$id"}}))),q=t("time",(()=>({$el:"div",if:'$panel === "time"'}))),z=t("timeInput",(()=>({$el:"input",attrs:{type:"time",value:"$localTime",onInput:"$handlers.localTime",onKeydown:"$handlers.keyDown",spellcheck:"false",onBlur:"$handlers._blurOut(time)"}}))),A=t("panelClose",(()=>({$el:"button",if:"$showPanelClose && ($inline === undefined || $inline === false)",attrs:{type:"button",class:"$classes.panelClose",onClick:"$handlers.closePanel",tabindex:-1,"aria-label":"$ui.close.value"}}))),{overlayPlaceholder:G,overlayLiteral:J,overlayChar:N,overlayEnum:Q,overlay:R,overlayParts:U,overlayInner:V}=n(t),X=t("panel","div");export{k as calendar,w as calendarHeader,x as calendarWeeks,t as createSection,M as day,j as dayButton,B as dayCell,P as daysHeader,u as help,d as icon,r as inner,p as input,$ as label,h as message,y as messages,I as month,F as monthButton,g as months,L as monthsHeader,b as next,f as nextLabel,Y as openButton,l as outer,R as overlay,N as overlayChar,Q as overlayEnum,V as overlayInner,J as overlayLiteral,U as overlayParts,G as overlayPlaceholder,X as panel,A as panelClose,T as panelHeader,m as panelWrapper,s as prefix,c as prev,v as prevLabel,W as removeSelection,i as suffix,q as time,S as timeHeader,z as timeInput,C as week,D as weekDay,_ as weekDays,o as wrapper,O as year,E as yearButton,K as years,H as yearsHeader};
+import{createSectionFactory as e,createBaseSections as a,createMaskOverlaySections as n}from"../index.mjs";const t=e("dp"),{outer:o,wrapper:l,inner:r,icon:d,label:$,prefix:s,suffix:i,help:u,messages:y,message:p}=a(t),h=t("input",(()=>({$el:"input",bind:"$attrs",attrs:{name:"$node.name",id:"$id",onKeydown:"$handlers.inputKeydown",value:"$inputText",onInput:"$handlers.dateInput",onClick:"$pickerOnly && $handlers.open",onBlur:"$handlers._blur",onFocus:"$handlers.focus",readonly:"$pickerOnly || $expanded",disabled:"$disabled"}}))),m=t("panelWrapper",(()=>({$el:"div",if:"$expanded",attrs:{id:'$id + "_popover"',role:"dialog",onBlur:"$handlers._blurOut()",tabindex:"-1",popover:"$popover","aria-modal":"true","aria-label":"Choose date","data-panel":"$panel",style:{if:"$usePopover",then:{margin:0,top:'$popoverCoordinates.y + "px"',left:'$popoverCoordinates.x + "px"',width:'$popoverCoordinates.width + "px"'}}}}))),b=t("next",(()=>({$el:"button",if:"$showPagination",attrs:{id:"$id + _next_button",type:"button",onClick:"$handlers.next"}}))),f=t("nextLabel","span"),c=t("prev",(()=>({$el:"button",if:"$showPagination",attrs:{id:"$id + _prev_button",type:"button",onClick:"$handlers.prev"}}))),v=t("prevLabel","span"),k=t("calendar",(()=>({if:'$panel === "day"',$el:"table",for:["month","$calendar"],attrs:{key:'$fns.format($month.monthDay, "YYYY-MM")'}}))),x=t("calendarWeeks",(()=>({$el:"tbody"}))),w=t("calendarHeader",(()=>({$el:"thead"}))),_=t("weekDays",(()=>({$el:"tr"}))),C=t("weekDay",(()=>({$el:"th",for:["day","$month.weeks.0"],attrs:{"aria-label":'$fns.format($day, "dddd")'}}))),D=t("week",(()=>({$el:"tr",for:["week","$month.weeks"]}))),B=t("dayCell",(()=>({$el:"td",for:["day","$week"],attrs:{key:'$: "day" + $fns.format($day, "D")',onClick:"$handlers.setDate($day)",onKeydown:"$handlers.keyDown",onMouseenter:"$handlers.mouseEnter($day)",onMouseleave:"$handlers.mouseLeave",onBlur:"$handlers._blurOut(day)",tabindex:'$fns.sameDay($day) && "0" || "-1"',"data-is-extra":"$fns.notInMonth($month.monthDay, $day)","data-disabled":"$fns.isDisabled($day)","aria-selected":"$fns.isSelected($day)","aria-label":'$fns.format($day, "long")'}}))),M=t("day","div"),Y=t("openButton",(()=>({$el:"div",attrs:{style:"$visibilityStyles",id:'$id + "_listbox_button"',type:"div",role:"button",onClick:"$handlers.open",onKeydown:"$handlers.openKeydown",tabIndex:'$pickerOnly && "-1" || "0"',"data-disabled":"$disabled","aria-disabled":"$disabled","aria-label":'$value && ($ui.changeDate.value + ", " + $inputText) || $ui.chooseDate.value',"aria-haspopup":"true","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined'}}))),g=t("years",(()=>({if:'$panel === "year"',$el:"ul"}))),K=t("year",(()=>({for:["year","$years"],$el:"li",attrs:{key:'$: "year" + $fns.format($year, "YYYY")',onClick:"$handlers.setDate($year)",onKeydown:"$handlers.keyDown",onMouseenter:"$handlers.mouseEnter($year)",onMouseleave:"$handlers.mouseLeave",onBlur:"$handlers._blurOut(year)",tabindex:'$fns.sameYear($year) && "0" || "-1"',"aria-selected":"$fns.isSelected($year)","data-disabled":"$fns.isDisabledYear($year)"}}))),O=t("months",(()=>({if:'$panel === "month"',$el:"ul"}))),I=t("month",(()=>({$el:"li",for:["month","$months"],attrs:{key:'$: "month" + $fns.format($month, "M")',onClick:"$handlers.setDate($month)",onKeydown:"$handlers.keyDown",onMouseenter:"$handlers.mouseEnter($month)",onMouseleave:"$handlers.mouseLeave",onBlur:"$handlers._blurOut(month)",tabindex:'$fns.sameMonth($month) && "0" || "-1"',"aria-selected":"$fns.isSelected($month)","data-disabled":"$fns.isDisabledMonth($month)"}}))),P=t("panelHeader",(()=>({$el:"header",attrs:{"aria-live":"polite"}}))),T=t("yearsHeader",(()=>({$el:"div",if:'$panel === "year"'}))),H=t("monthsHeader",(()=>({$el:"div",if:'$panel === "month"'}))),L=t("daysHeader",(()=>({$el:"div",if:'$panel === "day"'}))),S=t("timeHeader",(()=>({$el:"div",if:'$panel === "time"'}))),E=t("yearButton",(()=>({$el:"button",attrs:{type:"button",id:"$id + _year_button",onClick:"$handlers.jumpTo(year)"},children:"$fns.format($renderedDate, $yearFormat)"}))),F=t("monthButton",(()=>({$el:"button",attrs:{type:"button",id:"$id + _month_button",onClick:"$handlers.jumpTo(month)"},children:"$fns.format($renderedDate, $monthButtonFormat)"}))),j=t("dayButton",(()=>({$el:"button",attrs:{type:"button",id:"$id + _day_button",onClick:"$handlers.jumpTo(day)",tabindex:"2"},children:"$fns.format($renderedDate, $dayButtonFormat)"}))),W=t("removeSelection",(()=>({$el:"button",if:"$clearable && $_value",attrs:{id:'$id + "_remove_selection"',type:"button",onClick:"$handlers.clear","aria-controls":"$id"}}))),q=t("time",(()=>({$el:"div",if:'$panel === "time"'}))),z=t("timeInput",(()=>({$el:"input",attrs:{type:"time",value:"$localTime",onInput:"$handlers.localTime",onKeydown:"$handlers.keyDown",spellcheck:"false",onBlur:"$handlers._blurOut(time)"}}))),A=t("panelClose",(()=>({$el:"button",if:"$showPanelClose && ($inline === undefined || $inline === false)",attrs:{type:"button",class:"$classes.panelClose",onClick:"$handlers.closePanel",tabindex:-1,"aria-label":"$ui.close.value"}}))),{overlayPlaceholder:G,overlayLiteral:J,overlayChar:N,overlayEnum:Q,overlay:R,overlayParts:U,overlayInner:V}=n(t),X=t("panel","div");export{k as calendar,w as calendarHeader,x as calendarWeeks,t as createSection,M as day,j as dayButton,B as dayCell,L as daysHeader,u as help,d as icon,r as inner,h as input,$ as label,p as message,y as messages,I as month,F as monthButton,O as months,H as monthsHeader,b as next,f as nextLabel,Y as openButton,o as outer,R as overlay,N as overlayChar,Q as overlayEnum,V as overlayInner,J as overlayLiteral,U as overlayParts,G as overlayPlaceholder,X as panel,A as panelClose,P as panelHeader,m as panelWrapper,s as prefix,c as prev,v as prevLabel,W as removeSelection,i as suffix,q as time,S as timeHeader,z as timeInput,D as week,C as weekDay,_ as weekDays,l as wrapper,K as year,E as yearButton,g as years,T as yearsHeader};

package/dropdown/dropdown.ts

@@ -35,6 +35,7 @@ import dropdownFamily from '../features/dropdown-family/index'
 import dropdownProps from '../features/dropdown-family/dropdown/props'
 import selectorHandlers from '../features/dropdown-family/selector'
 import dropdownFeatures from '../features/dropdown-family/dropdown'
+import usePopover from '../features/popover'
 
 /**
  * Input definition for a dropdown input.
@@ -146,5 +147,6 @@ export const dropdown: FormKitProInput = {
       selectorHandlers,
       dropdownFeatures
     ),
+    usePopover,
   ],
 }

package/dropdown/index.mjs

@@ -1 +1 @@
-import{$if as e,createSectionFactory as i,createBaseSections as t}from"../index.mjs";import{icon as a}from"@formkit/inputs";const n=(e,i)=>()=>a(e,i),o=i("dd"),{outer:d,wrapper:l,inner:s,icon:r,label:$,prefix:p,suffix:c,help:u,messages:b,message:v}=t(o),g=o("selector",(()=>({$el:"button",bind:"$attrs",attrs:{id:"$id",type:"button",onClick:"$handlers.click",onBlur:"$handlers.blur",onFocus:"$handlers.focus",onKeydown:"$handlers.keydown",tabindex:"0",disabled:"$disabled || $disabledInternally || undefined","aria-haspopup":"listbox","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined',"aria-describedBy":"$describedBy"}}))),h=o("selectionWrapper",(()=>({if:"$option || $state.loading",$el:"div"}))),x=o("selection",(()=>({$el:"div"}))),f=o("placeholder",(()=>({$el:"div",attrs:{key:"placeholder","data-is-placeholder":"true","aria-hidden":'$placeholder === undefined && "true" || undefined',style:{opacity:'$placeholder === undefined && "0" || undefined',"pointer-events":'$placeholder === undefined && "none" || undefined'}}}))),y=o("optionLoading","span"),_=o("option",(()=>({$el:"div"}))),m=o("removeSelection",(()=>({$el:"div",attrs:{id:'$selectionAppearance === "tags" && $id + "_remove_selection_" + $index || $id + "_remove_selection"',tabindex:"-1",type:"button",key:"$value",onClick:'$handlers.removeSelection && $handlers.removeSelection($selectionAppearance === "tags" && $option || undefined)',onTouchstart:'$handlers.removeSelection && $handlers.removeSelection($selectionAppearance === "tags" && $option || undefined)',"aria-controls":"$id"}}))),k=o("selectionsWrapper",(()=>({$el:"div",attrs:{id:'$id + "_selections_wrapper"'}}))),w=o("selections",(()=>({$el:"div",attrs:{"aria-live":"polite","aria-hidden":'$lastVisibleIndex && "true" || undefined',"data-test":"$lastVisibleIndex",id:'$id + "_selections"'}}))),S=o("truncationCount",(()=>({$el:"div",attrs:{id:'$id + "_truncation_count"'}}))),M=o("selectionsItem",(()=>({$el:"div",for:["selectionLabel","index","$formattedSelections"],attrs:{id:'$id + "_selections_item_" + $index',"data-check":"$selectionLabel",key:"$selectionLabel","aria-hidden":'$lastVisibleIndex && $index > $lastVisibleIndex && "true" || undefined',style:{visibility:'$lastVisibleIndex && $index > $lastVisibleIndex && "hidden" || undefined'}},children:'$selectionLabel || ""'}))),I=o("tagWrapper",(()=>({$el:"span",for:["option","index","$selections"],attrs:{id:'$id + "_tag-wrapper_" + $index',key:"$option.value","data-value":"$option.value",tabindex:"0",onClick:"$handlers.tagClick && $handlers.tagClick($option)",onKeydown:"$handlers.selectorTagKeydownHandler($option)",onFocus:"$handlers.tagFocus && $handlers.tagFocus($option)",onBlur:"$handlers.tagBlur && $handlers.tagBlur($option)","data-active-selection":"$activeSelectionValue === $option.value"}}))),L=o("tag",(()=>({$el:"div",attrs:{id:'$id + "_tag_" + $index',role:"button",tabindex:"0"}}))),C=o("tagLabel",(()=>({$el:"span"}))),V=o("tagsWrapper",(()=>({$el:"span",attrs:{id:'$id + "_tags_wrapper"',"aria-live":"polite"}}))),B=o("tags",(()=>({$el:"span",attrs:{id:'$id + "_selections"'}}))),W=o("tagLoading","span"),A=function(i){const t=i("dropdownWrapper",(()=>({$el:"div",attrs:{id:'$id + "_dropdown_wrapper"',"data-is-wrapper":!0,style:"$dropdownWrapperStyles",onScroll:"$handlers.scroll"}}))),a=i("listbox",(()=>({$el:"ul",if:"$expanded || $setForceExpanded",attrs:{style:"$listboxStyles",id:'$id + "_listbox"',role:"listbox","aria-activedescendant":"$activeDescendant","aria-labelledby":'$id + "_label"'}}))),o=i("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=i("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=i("loadMoreInner","span"),s=i("emptyMessage",(()=>({$el:"li",if:"$showEmptyMessage && $state.loading !== true",attrs:{id:'$id + "_empty_message"',key:"$emptyMessage",role:"presentation"}}))),r=i("emptyMessageInner","span"),$=i("option",(()=>({$el:"div",attrs:{"data-checked":"$fns.isSelected($option)"}})));return()=>t(a(s(r("$emptyMessage")),o(e("$fns.isSelected($option)",n("selected")),$("$option.label")),d(e("$state.loading && $optionLoadingCounter === 0 || $state.hasNextPage",l(e("$state.loading",n("loader")),"$state.loading && $ui.isLoading.value || $ui.loadMore.value")))))}(o);export{o as createSection,u as help,r as icon,s as inner,$ as label,A as listbox,v as message,b as messages,_ as option,y as optionLoading,d as outer,f as placeholder,p as prefix,m as removeSelection,x as selection,h as selectionWrapper,g as selector,w as selectorSelections,M as selectorSelectionsItem,k as selectorSelectionsWrapper,c as suffix,L as tag,C as tagLabel,W as tagLoading,I as tagWrapper,B as tags,V as tagsWrapper,S as truncationCount,l as wrapper};
+import{$if as e,createSectionFactory as i,createBaseSections as t}from"../index.mjs";import{icon as a}from"@formkit/inputs";const n=(e,i)=>()=>a(e,i),o=i("dd"),{outer:d,wrapper:l,inner:s,icon:r,label:$,prefix:p,suffix:c,help:u,messages:v,message:b}=t(o),g=o("selector",(()=>({$el:"button",bind:"$attrs",attrs:{id:"$id",type:"button",onClick:"$handlers.click",onBlur:"$handlers.blur",onFocus:"$handlers.focus",onKeydown:"$handlers.keydown",tabindex:"0",name:"$node.name",disabled:"$disabled || $disabledInternally || undefined","aria-haspopup":"listbox","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined',"aria-describedBy":"$describedBy"}}))),h=o("selectionWrapper",(()=>({if:"$option || $state.loading",$el:"div"}))),x=o("selection",(()=>({$el:"div"}))),f=o("placeholder",(()=>({$el:"div",attrs:{key:"placeholder","data-is-placeholder":"true","aria-hidden":'$placeholder === undefined && "true" || undefined',style:{opacity:'$placeholder === undefined && "0" || undefined',"pointer-events":'$placeholder === undefined && "none" || undefined'}}}))),m=o("optionLoading","span"),y=o("option",(()=>({$el:"div"}))),_=o("removeSelection",(()=>({$el:"div",attrs:{id:'$selectionAppearance === "tags" && $id + "_remove_selection_" + $index || $id + "_remove_selection"',tabindex:"-1",type:"button",key:"$value",onClick:'$handlers.removeSelection && $handlers.removeSelection($selectionAppearance === "tags" && $option || undefined)',onTouchstart:'$handlers.removeSelection && $handlers.removeSelection($selectionAppearance === "tags" && $option || undefined)',"aria-controls":"$id"}}))),k=o("selectionsWrapper",(()=>({$el:"div",attrs:{id:'$id + "_selections_wrapper"'}}))),S=o("selections",(()=>({$el:"div",attrs:{"aria-live":"polite","aria-hidden":'$lastVisibleIndex && "true" || undefined',"data-test":"$lastVisibleIndex",id:'$id + "_selections"'}}))),w=o("truncationCount",(()=>({$el:"div",attrs:{id:'$id + "_truncation_count"'}}))),M=o("selectionsItem",(()=>({$el:"div",for:["selectionLabel","index","$formattedSelections"],attrs:{id:'$id + "_selections_item_" + $index',"data-check":"$selectionLabel",key:"$selectionLabel","aria-hidden":'$lastVisibleIndex && $index > $lastVisibleIndex && "true" || undefined',style:{visibility:'$lastVisibleIndex && $index > $lastVisibleIndex && "hidden" || undefined'}},children:'$selectionLabel || ""'}))),I=o("tagWrapper",(()=>({$el:"span",for:["option","index","$selections"],attrs:{id:'$id + "_tag-wrapper_" + $index',key:"$option.value","data-value":"$option.value",tabindex:"0",onClick:"$handlers.tagClick && $handlers.tagClick($option)",onKeydown:"$handlers.selectorTagKeydownHandler($option)",onFocus:"$handlers.tagFocus && $handlers.tagFocus($option)",onBlur:"$handlers.tagBlur && $handlers.tagBlur($option)","data-active-selection":"$activeSelectionValue === $option.value"}}))),L=o("tag",(()=>({$el:"div",attrs:{id:'$id + "_tag_" + $index',role:"button",tabindex:"0"}}))),C=o("tagLabel",(()=>({$el:"span"}))),V=o("tagsWrapper",(()=>({$el:"span",attrs:{id:'$id + "_tags_wrapper"',"aria-live":"polite"}}))),B=o("tags",(()=>({$el:"span",attrs:{id:'$id + "_selections"'}}))),W=o("tagLoading","span"),A=function(i){const t=i("dropdownWrapper",(()=>({$el:"div",attrs:{id:'$id + "_popover"',popover:{if:"$usePopover",then:"$popover",else:void 0},"data-is-wrapper":!0,style:"$dropdownWrapperStyles",onScroll:"$handlers.scroll"}}))),a=i("listbox",(()=>({$el:"ul",if:"$expanded || $setForceExpanded",attrs:{style:"$listboxStyles",id:'$id + "_listbox"',role:"listbox","aria-activedescendant":"$activeDescendant","aria-labelledby":'$id + "_label"'}}))),o=i("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=i("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=i("loadMoreInner","span"),s=i("emptyMessage",(()=>({$el:"li",if:"$showEmptyMessage && $state.loading !== true",attrs:{id:'$id + "_empty_message"',key:"$emptyMessage",role:"presentation"}}))),r=i("emptyMessageInner","span"),$=i("option",(()=>({$el:"div",attrs:{"data-checked":"$fns.isSelected($option)"}})));return()=>t(a(s(r("$emptyMessage")),o(e("$fns.isSelected($option)",n("selected")),$("$option.label")),d(e("$state.loading && $optionLoadingCounter === 0 || $state.hasNextPage",l(e("$state.loading",n("loader")),"$state.loading && $ui.isLoading.value || $ui.loadMore.value")))))}(o);export{o as createSection,u as help,r as icon,s as inner,$ as label,A as listbox,b as message,v as messages,y as option,m as optionLoading,d as outer,f as placeholder,p as prefix,_ as removeSelection,x as selection,h as selectionWrapper,g as selector,S as selectorSelections,M as selectorSelectionsItem,k as selectorSelectionsWrapper,c as suffix,L as tag,C as tagLabel,W as tagLoading,I as tagWrapper,B as tags,V as tagsWrapper,w as truncationCount,l as wrapper};