@formkit/pro 1.0.0-alpha.9 → 1.0.0-alpha.90

package/rating/index.mjs

@@ -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:p,messages:$,message:f,icon:h}=t(r),m=r("input",(()=>({$el:"input",attrs:{id:"$id",type:"range",max:"$max",name:"$name",min:"0",disabled:"$disabled",step:"$step",onInput:"$handlers.DOMInput",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,p as help,h as icon,s as inner,m as input,v as itemsWrapper,a as label,f as message,$ 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};
+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",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};

package/rating/rating.ts

@@ -15,6 +15,9 @@ import {
   help,
   messages,
   message,
+  icon,
+  prefix,
+  suffix,
 } from '../sections/ratingSections'
 
 /**
@@ -28,7 +31,14 @@ export const rating: FormKitProInput = {
   schema: outer(
     wrapper(
       label('$label'),
-      inner(itemsWrapper(onItems(onItem()), offItems(offItem())), input())
+      inner(
+        icon('prefix'),
+        prefix(),
+        itemsWrapper(onItems(onItem()), offItems(offItem())),
+        input(),
+        suffix(),
+        icon('suffix')
+      )
     ),
     help('$help'),
     messages(message('$message'))

package/repeater/index.mjs

@@ -1 +1 @@
-import{createSectionFactory as e,createBaseSections as t}from"../index.mjs";const o=e("rp"),{outer:i,inner:l,prefix:n,suffix:r,help:$,messages:d,message:s,icon:a}=t(o),m=o("insertControl",(()=>({$el:"button",attrs:{disabled:"$value.length >= $max",onClick:"$fns.createInsert($item.__key)"}}))),f=o("addButton",(()=>({$formkit:"button",bind:"$addAttrs",if:"$addButton",disabled:"$value.length >= $max",onClick:"$fns.createAppend()"}))),u=o("removeControl",(()=>({$el:"button",attrs:{disabled:"$value.length <= $min",onClick:"$fns.createRemover($item.__key)"}}))),_=o("items",(()=>({$el:"ul",attrs:{role:"list"}}))),C=o("item",(()=>({$el:"li",for:["item","index","$value"],if:"$item.__key",attrs:{role:"listitem",key:"$item.__key","data-index":"$item.__index"}}))),c=o("downControl",(()=>({$el:"button",attrs:{disabled:"$index >= $value.length - 1",onClick:"$fns.createShift($item.__key, 1)"}}))),k=o("upControl",(()=>({$el:"button",attrs:{disabled:"$index <= 0",onClick:"$fns.createShift($item.__key, -1)"}}))),p=o("content","div"),b=o("fieldset",(()=>({$el:"fieldset",attrs:{id:"$id"}}))),x=o("legend","legend"),v=o("group",(()=>({$formkit:"group",id:"$item.__key",index:"$item.__index"}))),g=o("controls",(()=>({$el:"ul",if:"$removeControl || $addControl || $upControl || $downControl"}))),y=o("remove",(()=>({$el:"li",if:"$removeControl"}))),h=o("insert",(()=>({$el:"li",if:"$insertControl"}))),w=o("up",(()=>({$el:"li",if:"$upControl"}))),A=o("down",(()=>({$el:"li",if:"$downControl"}))),B=o("controlLabel","span");export{f as addButton,p as content,B as controlLabel,g as controls,o as createSection,A as down,c as downControl,b as fieldset,v as group,$ as help,a as icon,l as inner,h as insert,m as insertControl,C as item,_ as items,x as legend,s as message,d as messages,i as outer,n as prefix,y as remove,u as removeControl,r as suffix,w as up,k as upControl};
+import{createSectionFactory as e,createBaseSections as t}from"../index.mjs";const o=e("rp"),{outer:i,inner:n,prefix:l,suffix:$,help:r,messages:d,message:s,icon:a}=t(o),m=o("insertControl",(()=>({$el:"button",attrs:{disabled:"$value.length >= $max",onClick:"$fns.createInsert($item.__key)",type:"button"}}))),u=o("addButton",(()=>({$formkit:"button",bind:"$addAttrs",if:"$addButton",disabled:"$value.length >= $max",onClick:"$fns.createAppend()",type:"button"}))),f=o("removeControl",(()=>({$el:"button",attrs:{disabled:"$value.length <= $min",onClick:"$fns.createRemover($item.__key)",type:"button"}}))),b=o("items",(()=>({$el:"ul",attrs:{role:"list"}}))),p=o("item",(()=>({$el:"li",for:["item","index","$value"],if:"$item.__key",attrs:{role:"listitem",key:"$item.__key","data-index":"$item.__index"}}))),_=o("downControl",(()=>({$el:"button",attrs:{disabled:"$index >= $value.length - 1",onClick:"$fns.createShift($item.__key, 1)",type:"button"}}))),C=o("upControl",(()=>({$el:"button",attrs:{disabled:"$index <= 0",onClick:"$fns.createShift($item.__key, -1)",type:"button"}}))),c=o("content","div"),k=o("fieldset",(()=>({$el:"fieldset",attrs:{id:"$id",disabled:"$disabled"}}))),y=o("legend",(()=>({$el:"legend",if:"$label"}))),x=o("group",(()=>({$formkit:"group",id:"$item.__key",index:"$item.__index"}))),v=o("controls",(()=>({$el:"ul",if:"$removeControl || $insertControl || $upControl || $downControl"}))),g=o("remove",(()=>({$el:"li",if:"$removeControl"}))),h=o("insert",(()=>({$el:"li",if:"$insertControl"}))),w=o("up",(()=>({$el:"li",if:"$upControl"}))),A=o("down",(()=>({$el:"li",if:"$downControl"}))),B=o("controlLabel","span");export{u as addButton,c as content,B as controlLabel,v as controls,o as createSection,A as down,_ as downControl,k as fieldset,x as group,r as help,a as icon,n as inner,h as insert,m as insertControl,p as item,b as items,y as legend,s as message,d as messages,i as outer,l as prefix,g as remove,f as removeControl,$ as suffix,w as up,C as upControl};

package/repeater/repeater.ts

@@ -28,6 +28,7 @@ import {
 } from '../sections/repeaterSections'
 import repeats from '../features/repeats'
 import { localize, defaultIcon } from '@formkit/inputs'
+import { $if } from '../compose'
 
 /**
  * Input definition for a repeater input.
@@ -43,19 +44,27 @@ export const repeater: FormKitProInput = {
       help('$help'),
       inner(
         prefix(),
-        items(
-          item(
-            content(group('$slots.default')),
-            controls(
-              up(upControl(controlLabel('$ui.moveUp.value'), icon('moveUp'))),
-              remove(
-                removeControl(controlLabel('$ui.remove.value'), icon('remove'))
-              ),
-              insert(insertControl(controlLabel('$ui.add.value'), icon('add'))),
-              down(
-                downControl(
-                  controlLabel('$ui.moveDown.value'),
-                  icon('moveDown')
+        $if(
+          '$slots.default',
+          items(
+            item(
+              content(group('$slots.default')),
+              controls(
+                up(upControl(controlLabel('$ui.moveUp.value'), icon('moveUp'))),
+                remove(
+                  removeControl(
+                    controlLabel('$ui.remove.value'),
+                    icon('remove')
+                  )
+                ),
+                insert(
+                  insertControl(controlLabel('$ui.add.value'), icon('add'))
+                ),
+                down(
+                  downControl(
+                    controlLabel('$ui.moveDown.value'),
+                    icon('moveDown')
+                  )
                 )
               )
             )
@@ -63,7 +72,7 @@ export const repeater: FormKitProInput = {
         ),
         suffix()
       ),
-      addButton('$addLabel || ($ui.add.value + " " + $label)')
+      addButton('$addLabel || ($ui.add.value + " " + ($label || ""))')
     ),
     messages(message('$message.value'))
   ),

package/taglist/index.mjs

@@ -0,0 +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:x}=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",tabindex:"0",placeholder:"$isLoadingOption && $ui.isLoading.value || $placeholder || undefined",role:"combobox",autocomplete:"off",autocapitalize:"none",readonly:"$attrs.readonly || $isLoadingOption || undefined || $multiple && $max && $value && $value.length >= $max",disabled:"$disabled || 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"}}))),f=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'}}))),m=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.selectTag($option)"}}))),g=n("tag",(()=>({$el:"div",attrs:{id:'$id + "_tag_" + $index',role:"button"}}))),h=n("removeSelection",(()=>({$el:"button",if:"$_value !== undefined",attrs:{id:'$id + "_remove_selection_" + $index',tabindex:"-1",type:"button",onClick:"$disabled !== true && $handlers.removeSelection($option)","aria-controls":"$id"}}))),y=n("tagLabel",(()=>({$el:"span"}))),_=n("tags",(()=>({$el:"div",attrs:{id:'$id + "_selections"',"aria-live":"polite",onKeydown:"$handlers.keydown"}}))),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 || $forceExpanded",attrs:{style:"$listboxStyles",id:'$id + "_listbox"',role:"listbox","aria-activedescendant":"$activeDescendant"}}))),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)",role:"option","aria-selected":"$fns.isSelected($option)","data-is-active":"$fns.isActive($option)"}}))),d=t("loadMore",(()=>({$el:"li",if:"$state.loading || $state.hasNextPage",attrs:{id:'$id + "_load_more"',key:"loadMore",role:"option",onClick:"$handlers.loadMoreSelected","aria-selected":"false","data-is-active":"$fns.isActive($loadMoreOption)"}}))),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(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,v as input,$ as label,w as listbox,f as listboxButton,x as message,b as messages,d as outer,p as prefix,h as removeSelection,c as suffix,g as tag,y as tagLabel,k as tagLoading,m as tagWrapper,_ as tags,l as wrapper};

package/taglist/taglist.ts

@@ -0,0 +1,102 @@
+import { default as dropdownFeature } from '../features/dropdown'
+import { default as autocompleteFeature } from '../features/autocompletes'
+import { default as taglistFeature } from '../features/taglist'
+import {
+  dropdownKeyHandler,
+  dropdownDisplayHandler,
+  setSelectedOption,
+} from '../features/dropdownFeatures'
+import { getSelections } from '../features/taglistFeatures'
+import { options, defaultIcon, localize } from '@formkit/inputs'
+import { FormKitProInput } from '@formkit/pro'
+import {
+  outer,
+  wrapper,
+  inner,
+  label,
+  prefix,
+  tag,
+  tagWrapper,
+  tagLoading,
+  suffix,
+  help,
+  messages,
+  message,
+  listbox,
+  icon,
+  input,
+  listboxButton,
+  tags,
+  tagLabel,
+  removeSelection,
+} from '../sections/taglistSections'
+import { $if } from '../compose'
+
+/**
+ * Input definition for a taglist input.
+ * @public
+ */
+export const taglist: FormKitProInput = {
+  /**
+   * The actual schema of the input, or a function that returns the schema.
+   */
+  schema: outer(
+    wrapper(
+      label('$label'),
+      inner(
+        icon('prefix'),
+        prefix(),
+        tags(
+          tagWrapper(
+            tag(
+              $if(
+                '$state.loading',
+                tagLoading('$ui.isLoading.value'),
+                tagLabel('$option.label')
+              ),
+              removeSelection(icon('close'))
+            )
+          ),
+          input()
+        ),
+        $if('$state.loading', icon('loader')),
+        listboxButton(icon('select')),
+        listbox(),
+        suffix(),
+        icon('suffix')
+      )
+    ),
+    help('$help'),
+    messages(message('$message.value'))
+  ),
+  /**
+   * The type of node, can be a list, group, or input.
+   */
+  type: 'input',
+  /**
+   * In the dropdown family of inputs.
+   */
+  family: 'dropdown',
+  /**
+   * An array of extra props to accept for this input.
+   */
+  props: [],
+  /**
+   * Additional features that make this input work.
+   */
+  features: [
+    options,
+    taglistFeature,
+    dropdownFeature(
+      dropdownKeyHandler,
+      dropdownDisplayHandler(getSelections, setSelectedOption)
+    ),
+    autocompleteFeature(getSelections),
+    defaultIcon('select', 'select'),
+    defaultIcon('close', 'close'),
+    defaultIcon('selected', 'check'),
+    defaultIcon('loader', 'spinner'),
+    localize('isLoading'),
+    localize('loadMore'),
+  ],
+}

package/toggle/index.mjs

@@ -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:f,messages:b,message:d,icon:u}=l(o),c=o("input",(()=>({$el:"input",attrs:{type:"checkbox",id:"$id",value:"$_value",checked:"$checked",onInput:"$handlers.toggles",disabled:"$disabled"}}))),s=o("label",(()=>({if:"($label && $onValueLabel === undefined && $offValueLabel === undefined) || ($valueLabelDisplay === inner)",$el:"label",attrs:{for:"$id"},children:"$label"}))),h=o("altLabel",(()=>({$el:"label",if:"$label && ($onValueLabel || $offValueLabel) && $valueLabelDisplay !== hidden && $valueLabelDisplay !== inner",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,s as defaultLabel,f as help,u as icon,p as inner,L as innerLabel,c as input,i as label,d as message,b as messages,$ as outer,n as prefix,r as suffix,C as thumbWrapper,v as track,k as valueLabel,t as wrapper};
+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};

package/toggle/toggle.ts

@@ -59,6 +59,7 @@ export const toggle: FormKitProInput = {
     'trackColorOff',
     'trackColorOn',
     'valueLabelDisplay',
+    'altLabelPosition',
   ],
 
   /**

package/transferList/index.mjs

@@ -0,0 +1 @@
+import{createSectionFactory as e,createBaseSections as s}from"../index.mjs";const t=e("tf"),{outer:a,wrapper:r,inner:l,icon:i,prefix:o,suffix:n,help:d,messages:$,message:c}=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"'}}))),g=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'}}))),b=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"}))),h=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",tabindex:"0","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.sourceKeyDown",disabled:"$disabled","aria-label":"Search",role:"searchbox",class:'$classes.transferlistSearchInput + " " + $classes.sourceSearchInput'}}))),w=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'}}))),C=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'}}))),I=t("template",(()=>({for:["option","index","$options"],$el:null}))),S=t("sourceListItem",(()=>({if:"$targetOptionValues.includes($fns.optionValue($option)) === false",$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",onKeydown:"$targetOptionValues.includes($option.value) === false && $handlers.sourceKeyDown",role:"option",onClick:"$option.attrs.disabled !== true && $handlers.selectOption($option, true)",key:"$option.value",class:'$classes.transferlistListItem + " " + $classes.sourceListItem'}}))),k=t("sourceOption",(()=>({$el:"div",attrs:{"data-checked":"$selections && $selections.length > 0 && $fns.isSelected($option)",class:'$classes.transferlistOption + " " + $classes.sourceOption'}}))),H=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"),O=t("target",(()=>({$el:"div",attrs:{id:'$id + "_target"',class:'$classes.transferlist + " " + $classes.target'}}))),B=t("targetHeader",(()=>({$el:"div",attrs:{id:'$id + "_target_header"',role:"presentation",tabindex:"0",class:'$classes.transferlistHeader + " " + $classes.targetHeader'}}))),A=t("targetHeaderName",(()=>({if:"$target.label !== undefined",$el:"span",attrs:{id:'$id + "_target_header_name"',class:'$classes.transferlistHeaderName + " " + $classes.targetHeaderName'},children:"$target.label"}))),V=t("targetListItems",(()=>({$el:"ul",attrs:{id:"$id","aria-activedescendant":"$activeDescendant",onMouseover:"$handlers.onMouseEnter(false)",onMouseout:"$handlers.onMouseLeave(false)",class:'$classes.transferlistListItems + " " + $classes.targetListItems'}}))),E=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)",onKeydown:"$handlers.targetKeyDown",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'}}))),K=t("targetLoadMore",(()=>({$el:"li",if:"$targetLoading && $state.loading",attrs:{id:'$id + "_target_load_more"',key:"loadMore","aria-selected":"false",class:'$classes.transferlistLoadMore + " " + $classes.targetLoadMore'}}))),D=t("transferControls",(()=>({$el:"div",attrs:{id:'$id + "_transfer_controls"'}}))),N=t("transferButtonForward",(()=>({if:"$transferOnSelect !== true",$el:"button",attrs:{id:'$id + "_transfer_button_forward"',type:"button",disabled:"$selections.length === 0 || $sourceSelected === false || $state.loading || $disabled || ($max && $value && $value.length >= $max)",onClick:"$handlers.transferForward","aria-label":"$ui.addSelectedValues.value",title:"$ui.addSelectedValues.value",class:'$classes.transferlistButton + " " + $classes.transferButtonForward'}}))),T=t("transferButtonForwardAll",(()=>({$el:"button",attrs:{id:'$id + "_transfer_button_forward_all"',type:"button",disabled:"$options.length === $targetOptions.length || $state.loading || $disabled || ($max && $value && $value.length >= $max)",onClick:"$handlers.transferForwardAll","aria-label":"$ui.addAllValues.value",title:"$ui.addAllValues.value",class:'$classes.transferlistButton + " " + $classes.transferButtonForwardAll'}}))),P=t("transferButtonBackward",(()=>({if:"$transferOnSelect !== true",$el:"button",attrs:{id:'$id + "_transfer_button_backward"',onClick:"$handlers.transferBackward",type:"button",disabled:"$selections.length === 0 || $sourceSelected === true || $state.loading || $disabled","aria-label":"$ui.removeSelectedValues.value",title:"$ui.removeSelectedValues.value",class:'$classes.transferlistButton + " " + $classes.transferButtonBackward'}}))),j=t("transferButtonBackwardAll",(()=>({$el:"button",attrs:{id:'$id + "_transfer_button_backward_all"',onClick:"$handlers.transferBackwardAll",type:"button",disabled:"$targetOptions.length === 0 || $state.loading || $disabled","aria-label":"$ui.removeAllValues.value",title:"$ui.removeAllValues.value",class:'$classes.transferlistButton + " " + $classes.transferButtonBackwardAll'}}))),q=t("controlLabel","span"),z=t("sourceEmptyMessage",(()=>({$el:"li",if:"$showSourceEmptyMessage && $sourceEmptyMessage && $state.loading !== true",attrs:{id:'$id + "_source_empty_message"',key:"$sourceEmptyMessage",role:"presentation"}}))),G=t("targetEmptyMessage",(()=>({$el:"li",if:"$showTargetEmptyMessage && $targetEmptyMessage && $state.loading !== true",attrs:{id:'$id + "_empty_message"',key:"$emptyMessage",role:"presentation"}}))),J=t("emptyMessageInner","span");export{p as area,q as controlLabel,t as createSection,J as emptyMessageInner,u as fieldset,d as help,i as icon,l as inner,f as legend,x as loadMoreInner,c as message,$ as messages,a as outer,o as prefix,g as source,L as sourceControls,z as sourceEmptyMessage,_ as sourceHeader,h as sourceHeaderItemCount,b as sourceHeaderLabel,S as sourceListItem,C as sourceListItems,H as sourceLoadMore,k as sourceOption,y as sourceSearch,w as sourceSearchClear,M as sourceSearchInput,n as suffix,O as target,G as targetEmptyMessage,B as targetHeader,v as targetHeaderItemCount,m as targetHeaderLabel,A as targetHeaderName,E as targetListItem,V as targetListItems,K as targetLoadMore,F as targetOption,I as template,P as transferButtonBackward,j as transferButtonBackwardAll,N as transferButtonForward,T as transferButtonForwardAll,D as transferControls,r as wrapper};

package/transferList/transferList.ts

@@ -0,0 +1,191 @@
+import { FormKitProInput } from '@formkit/pro'
+import {
+  outer,
+  fieldset,
+  wrapper,
+  help,
+  controlLabel,
+  legend,
+  messages,
+  message,
+  target,
+  targetListItems,
+  targetListItem,
+  targetOption,
+  targetHeader,
+  targetHeaderItemCount,
+  targetHeaderLabel,
+  sourceHeaderLabel,
+  source,
+  sourceHeader,
+  sourceHeaderItemCount,
+  sourceControls,
+  sourceSearch,
+  sourceSearchInput,
+  sourceSearchClear,
+  sourceListItems,
+  sourceListItem,
+  sourceOption,
+  sourceLoadMore,
+  targetLoadMore,
+  template,
+  loadMoreInner,
+  transferControls,
+  transferButtonForward,
+  transferButtonBackward,
+  transferButtonForwardAll,
+  transferButtonBackwardAll,
+  icon,
+  sourceEmptyMessage,
+  targetEmptyMessage,
+  emptyMessageInner,
+} from '../sections/transferListSections'
+import { default as transferListFeature } from '../features/transferlist'
+import { options, defaultIcon, localize } from '@formkit/inputs'
+import { $if } from '../compose'
+
+/**
+ * Input definition for a transferlist input.
+ * @public
+ */
+export const transferlist: FormKitProInput = {
+  /**
+   * The actual schema of the input, or a function that returns the schema.
+   */
+  schema: outer(
+    fieldset(
+      legend('$label'),
+      help('$help'),
+      wrapper(
+        source(
+          sourceHeader(sourceHeaderLabel(), sourceHeaderItemCount()),
+          sourceControls(
+            sourceSearch(sourceSearchInput(), sourceSearchClear(icon('close')))
+          ),
+          sourceListItems(
+            sourceEmptyMessage(emptyMessageInner('$sourceEmptyMessage')),
+            template(
+              sourceListItem(
+                $if(
+                  '$transferOnSelect !== true && $fns.isSelected($option)',
+                  icon('selected')
+                ),
+                sourceOption('$option.label')
+              )
+            ),
+            sourceLoadMore(
+              loadMoreInner(
+                $if(
+                  '$targetLoading !== true && $state.loading',
+                  icon('loader')
+                ),
+                '$state.loading && $ui.isLoading.value || $ui.loadMore.value'
+              )
+            )
+          )
+        ),
+        transferControls(
+          transferButtonForwardAll(
+            controlLabel('$ui.addAllValues.value'),
+            icon('fastForward')
+          ),
+          transferButtonForward(
+            controlLabel('$ui.addSelectedValues.value'),
+            icon('moveRight')
+          ),
+          transferButtonBackward(
+            controlLabel('$ui.removeSelectedValues.value'),
+            icon('moveLeft')
+          ),
+          transferButtonBackwardAll(
+            controlLabel('$ui.removeAllValues.value'),
+            icon('rewind')
+          )
+        ),
+        target(
+          targetHeader(targetHeaderLabel(), targetHeaderItemCount()),
+          targetListItems(
+            targetEmptyMessage(emptyMessageInner('$targetEmptyMessage')),
+            targetListItem(
+              $if(
+                '$transferOnSelect !== true && $fns.isSelected($option)',
+                icon('selected')
+              ),
+              targetOption('$option.label')
+            ),
+            targetLoadMore(
+              loadMoreInner(
+                $if('$targetLoading && $state.loading', icon('loader')),
+                '$state.loading && $ui.isLoading.value || $ui.loadMore.value'
+              )
+            )
+          )
+        )
+      ),
+      messages(message('$message.value'))
+    )
+  ),
+
+  /**
+   * The type of node, can be a list, group, or input.
+   */
+  type: 'input',
+
+  /**
+   * An array of extra props to accept for this input.
+   */
+  props: [
+    'options',
+    'selections',
+    'activeValue',
+    'activeDescendant',
+    'sourceSelected',
+    'targetOptions',
+    'target',
+    'source',
+    'optionLoader',
+    'filterOptions',
+    'inputText',
+    'renderList',
+    'search',
+    'hasNextPage',
+    'page',
+    'targetOptionValues',
+    'targetLoading',
+    'searchable',
+    'sourceLabel',
+    'targetLabel',
+    'transferOnSelect',
+    'disabled',
+    'placeholder',
+    'filter',
+    'showSourceEmptyMessage',
+    'showTargetEmptyMessage',
+    'sourceEmptyMessage',
+    'targetEmptyMessage',
+    'clearOnSelect',
+    'max',
+    'debounce',
+  ],
+
+  /**
+   * Additional features that make this input work.
+   */
+  features: [
+    transferListFeature,
+    options,
+    defaultIcon('moveRight', 'right'),
+    defaultIcon('moveLeft', 'left'),
+    defaultIcon('fastForward', 'fastForward'),
+    defaultIcon('rewind', 'rewind'),
+    defaultIcon('close', 'close'),
+    defaultIcon('loader', 'spinner'),
+    defaultIcon('selected', 'check'),
+    localize('isLoading'),
+    localize('loadMore'),
+    localize('addAllValues'),
+    localize('addSelectedValues'),
+    localize('removeSelectedValues'),
+    localize('removeAllValues'),
+  ],
+}