@formkit/pro 0.109.0-eb2057e

package/rating/rating.ts

@@ -0,0 +1,60 @@
+import { defaultIcon } from '@formkit/inputs'
+import rate from '../features/rate'
+import { FormKitProInput } from '@formkit/pro'
+import {
+  outer,
+  wrapper,
+  label,
+  inner,
+  onItems,
+  offItems,
+  onItem,
+  offItem,
+  input,
+  itemsWrapper,
+  help,
+  messages,
+  message,
+  icon,
+  prefix,
+  suffix,
+} from '../sections/ratingSections'
+
+/**
+ * Input definition for a rating input.
+ * @public
+ */
+export const rating: FormKitProInput = {
+  /**
+   * The actual schema of the input, or a function that returns the schema.
+   */
+  schema: outer(
+    wrapper(
+      label('$label'),
+      inner(
+        icon('prefix'),
+        prefix(),
+        itemsWrapper(onItems(onItem()), offItems(offItem())),
+        input(),
+        suffix(),
+        icon('suffix')
+      )
+    ),
+    help('$help'),
+    messages(message('$message'))
+  ),
+  /**
+   * The type of node, can be a list, group, or input.
+   */
+  type: 'input',
+  /**
+   * An array of extra props to accept for this input.
+   */
+  props: [],
+  /**
+   * Additional features that make this input work.
+   */
+  features: [rate, defaultIcon('rating', 'star')],
+}
+
+export default rating

package/repeater/index.mjs

@@ -0,0 +1 @@
+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

@@ -0,0 +1,112 @@
+import { FormKitProInput } from '@formkit/pro'
+import {
+  outer,
+  fieldset,
+  legend,
+  inner,
+  prefix,
+  items,
+  item,
+  icon,
+  content,
+  group,
+  controls,
+  remove,
+  removeControl,
+  insert,
+  insertControl,
+  addButton,
+  up,
+  upControl,
+  down,
+  downControl,
+  suffix,
+  help,
+  messages,
+  message,
+  controlLabel,
+} from '../sections/repeaterSections'
+import repeats from '../features/repeats'
+import { localize, defaultIcon } from '@formkit/inputs'
+import { $if } from '../compose'
+
+/**
+ * Input definition for a repeater input.
+ * @public
+ */
+export const repeater: FormKitProInput = {
+  /**
+   * The actual schema of the input, or a function that returns the schema.
+   */
+  schema: outer(
+    fieldset(
+      legend('$label'),
+      help('$help'),
+      inner(
+        prefix(),
+        $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')
+                  )
+                )
+              )
+            )
+          )
+        ),
+        suffix()
+      ),
+      addButton('$addLabel || ($ui.add.value + " " + ($label || ""))')
+    ),
+    messages(message('$message.value'))
+  ),
+  /**
+   * The type of node, can be a list, group, or input.
+   */
+  type: 'list',
+  /**
+   * An array of extra props to accept for this input.
+   */
+  props: [
+    'min',
+    'max',
+    'total',
+    'upControl',
+    'downControl',
+    'removeControl',
+    'insertControl',
+    'addLabel',
+    'addButton',
+    'addAttrs',
+  ],
+  /**
+   * Additional features that make this input work.
+   */
+  features: [
+    repeats,
+    localize('remove'),
+    localize('add'),
+    localize('moveUp'),
+    localize('moveDown'),
+    defaultIcon('remove', 'trash'),
+    defaultIcon('add', 'add'),
+    defaultIcon('moveUp', 'arrowUp'),
+    defaultIcon('moveDown', 'arrowDown'),
+  ],
+}

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

@@ -0,0 +1 @@
+import{createSectionFactory as e,createBaseSections as l,$if as a}from"../index.mjs";const o=e("tg"),{outer:$,wrapper:t,label:i,prefix:n,suffix:r,help:b,messages:f,message:u,icon:d}=l(o),s=o("input",(()=>({$el:"input",bind:"$attrs",attrs:{type:"checkbox",id:"$id",value:"$_value",checked:"$checked",onInput:"$handlers.toggles",onBlur:"$handlers.blur",disabled:"$disabled"}}))),c=o("label",(()=>({if:"($label && $onValueLabel === undefined && $offValueLabel === undefined) || ($valueLabelDisplay === inner) && $altLabelPosition !== true",$el:"label",attrs:{for:"$id"},children:"$label"}))),h=o("altLabel",(()=>({$el:"label",if:"($label && ($onValueLabel || $offValueLabel) && $valueLabelDisplay !== hidden && $valueLabelDisplay !== inner) || $altLabelPosition === true",attrs:{for:"$id","data-label-alt":"true",style:{color:{if:"$checked",then:"$valueLabelColorOn",else:"$valueLabelColorOff"}}},children:"$label"}))),L=o("innerLabel",(()=>({$el:"div",if:"$valueLabelDisplay === inner && ($checked && $onValueLabel || $offValueLabel)",attrs:{style:{color:{if:"$checked",then:"$valueLabelColorOn",else:"$valueLabelColorOff"}}},children:{if:"$checked",then:"$onValueLabel",else:"$offValueLabel"}}))),k=o("valueLabel",(()=>({$el:"label",if:"$valueLabelDisplay !== hidden && $valueLabelDisplay !== inner && (($checked === true && $onValueLabel) || ($checked === false && $offValueLabel))",attrs:{for:"$id"},children:{if:"$checked && $onValueLabel",then:"$onValueLabel",else:{if:"$offValueLabel",then:"$offValueLabel"}}}))),p=o("inner",(()=>({$el:"label",attrs:{for:"$id",id:"$id + '_label'"}}))),v=o("track",(()=>({$el:"div",attrs:{style:{backgroundColor:{if:"$checked",then:"$trackColorOn",else:"$trackColorOff"}}}}))),V=o("thumb",(()=>({$el:"div",attrs:{style:{color:{if:"$checked",then:"$iconColorOn",else:"$iconColorOff"},backgroundColor:{if:"$checked",then:"$thumbColorOn",else:"$thumbColorOff"}}}}))),C=()=>V(a("$slots.default","$slots.default",d("thumb")));export{h as altLabel,o as createSection,c as defaultLabel,b as help,d as icon,p as inner,L as innerLabel,s as input,i as label,u as message,f as messages,$ as outer,n as prefix,r as suffix,C as thumbWrapper,v as track,k as valueLabel,t as wrapper};

package/toggle/toggle.ts

@@ -0,0 +1,69 @@
+import { FormKitProInput } from '@formkit/pro'
+import {
+  outer,
+  wrapper,
+  inner,
+  prefix,
+  input,
+  track,
+  suffix,
+  help,
+  messages,
+  message,
+  thumbWrapper,
+  defaultLabel,
+  altLabel,
+  innerLabel,
+  valueLabel,
+} from '../sections/toggleSections'
+import toggles from '../features/toggles'
+
+/**
+ * Input definition for a toggle input.
+ * @public
+ */
+export const toggle: FormKitProInput = {
+  /**
+   * The actual schema of the input, or a function that returns the schema.
+   */
+  schema: outer(
+    wrapper(
+      altLabel(),
+      inner(prefix(), input(), track(innerLabel(), thumbWrapper()), suffix()),
+      valueLabel(),
+      defaultLabel()
+    ),
+    help('$help'),
+    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: [
+    'checked',
+    'thumbColorOff',
+    'thumbColorOn',
+    'iconColorOff',
+    'iconColorOn',
+    'valueLabelColorOff',
+    'valueLabelColorOn',
+    'offValue',
+    'offValueLabel',
+    'onValue',
+    'onValueLabel',
+    'thumbIcon',
+    'trackColorOff',
+    'trackColorOn',
+    'valueLabelDisplay',
+    'altLabelPosition',
+  ],
+
+  /**
+   * Additional features that make this input work.
+   */
+  features: [toggles],
+}

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"'}}))),_=t("source",(()=>({$el:"div",attrs:{id:'$id + "_source"',class:'$classes.transferlist + " " + $classes.source'}}))),g=t("sourceHeader",(()=>({$el:"div",attrs:{id:'$id + "_source_header"',role:"presentation",class:'$classes.transferlistHeader + " " + $classes.sourceHeader'}}))),h=t("sourceHeaderLabel",(()=>({if:"$sourceLabel",$el:"label",attrs:{id:'$id + "_source_header_label"',for:'$id + "_source_search_input"',class:'$classes.transferlistHeaderLabel + " " + $classes.sourceHeaderLabel'},children:"$sourceLabel || $label"}))),b=t("sourceHeaderItemCount",(()=>({$el:"span",attrs:{id:'$id + "_source_header_item_count"',role:"presentation","aria-label":'$fns.getOptionCount() + " items"',class:'$classes.transferlistHeaderItemCount + " " + $classes.sourceHeaderItemCount'},children:"$fns.getOptionCount()"}))),m=t("targetHeaderLabel",(()=>({if:"$targetLabel",$el:"label",attrs:{id:'$id + "_target_header_label"',for:'$id + "_target_search_input"',class:'$classes.transferlistHeaderLabel + " " + $classes.targetHeaderLabel'},children:"$targetLabel || $label"}))),v=t("targetHeaderItemCount",(()=>({$el:"span",attrs:{id:'$id + "_target_header_item_count"',role:"presentation","aria-label":'$fns.getOptionCount(true) + " items"',class:'$classes.transferlistHeaderItemCount + " " + $classes.targetHeaderItemCount'},children:"$fns.getOptionCount(true)"}))),L=t("sourceControls",(()=>({$el:"div",if:"$searchable",attrs:{id:'$id + "_source_controls"',class:'$classes.transferlistControls + " " + $classes.sourceControls'}}))),y=t("sourceSearch",(()=>({if:"$searchable",$el:"div",attrs:{id:'$id + "_source_search"',class:'$classes.transferlistSearch + " " + $classes.sourceSearch'}}))),M=t("sourceSearchInput",(()=>({$el:"input",attrs:{id:'$id + "_source_search_input"',type:"text",placeholder:"$placeholder",onInput:"$handlers.onSearch",value:"$inputText",onKeydown:"$handlers.handleSourceSearchKeyDown",disabled:"$disabled","aria-label":"Search",role:"searchbox",class:'$classes.transferlistSearchInput + " " + $classes.sourceSearchInput'}}))),S=t("sourceSearchClear",(()=>({$el:"button",if:"$inputText !== undefined",attrs:{id:'$id + "_source_search_clear"',type:"button",onClick:"$handlers.clearSearch","aria-label":"Clear search",class:'$classes.transferlistSearchClear + " " + $classes.sourceSearchClear'}}))),w=t("sourceListItems",(()=>({$el:"ul",attrs:{id:'$id + "_source_list_items"',"aria-activedescendant":"$activeDescendant",onMouseover:"$handlers.onMouseEnter(true)",onMouseout:"$handlers.onMouseLeave(true)",role:"listbox","aria-multiselectable":"true","aria-roledescription":"List of options to choose from.",class:'$classes.transferlistListItems + " " + $classes.sourceListItems',onKeydown:"$handlers.sourceKeyDown",tabindex:"0",onFocus:"$handlers.sourceFocused"}}))),C=t("sourceListItem",(()=>({for:["option","index","$sourceOptions"],$el:"li",attrs:{id:'$id + "_source_list_item_" + $index',"data-value":"$option.value","aria-selected":"$selections && $selections.length > 0 && $fns.isSelected($option)","data-is-active":"$fns.isActive($option)","data-disabled":"$option.attrs.disabled",role:"option",onClick:"$option.attrs.disabled !== true && $handlers.selectOption($option, true)",key:"$option.value",class:'$classes.transferlistListItem + " " + $classes.sourceListItem'}}))),I=t("sourceOption",(()=>({$el:"div",attrs:{"data-checked":"$selections && $selections.length > 0 && $fns.isSelected($option)",class:'$classes.transferlistOption + " " + $classes.sourceOption'}}))),k=t("sourceLoadMore",(()=>({$el:"li",if:"$targetLoading !== true && $state.loading || $state.hasNextPage",attrs:{id:'$id + "_source_load_more"',key:"loadMore","aria-selected":"false",class:'$classes.transferlistLoadMore + " " + $classes.sourceLoadMore'}}))),H=t("loadMoreInner","span"),x=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",class:'$classes.transferlistHeader + " " + $classes.targetHeader'}}))),O=t("targetHeaderName",(()=>({if:"$target.label !== undefined",$el:"span",attrs:{id:'$id + "_target_header_name"',class:'$classes.transferlistHeaderName + " " + $classes.targetHeaderName'},children:"$target.label"}))),A=t("targetListItems",(()=>({$el:"ul",attrs:{id:"$id","aria-activedescendant":"$activeDescendant",onMouseover:"$handlers.onMouseEnter(false)",onMouseout:"$handlers.onMouseLeave(false)",class:'$classes.transferlistListItems + " " + $classes.targetListItems',tabindex:"0",onKeydown:"$handlers.targetKeyDown",onFocus:"$handlers.targetFocused"}}))),F=t("targetListItem",(()=>({for:["option","index","$targetOptions"],$el:"li",attrs:{id:'$id + "_target_list_item_" + $index',"data-disabled":"$option.attrs.disabled","data-value":"$option.value","aria-selected":"$selections && $selections.length && $fns.isSelected($option, $target)","data-is-active":"$fns.isActive($option)",role:"option",onClick:"$option.attrs.disabled !== true && $handlers.selectOption($option, false)",key:"$option.value",class:'$classes.transferlistListItem + " " + $classes.targetListItem'}}))),E=t("targetOption",(()=>({$el:"div",attrs:{id:'$id + "_target_list_item_" + $index',class:'$classes.transferlistOption + " " + $classes.targetOption'}}))),V=t("targetLoadMore",(()=>({$el:"li",if:"$targetLoading && $state.loading",attrs:{id:'$id + "_target_load_more"',key:"loadMore","aria-selected":"false",class:'$classes.transferlistLoadMore + " " + $classes.targetLoadMore'}}))),K=t("transferControls",(()=>({$el:"div",attrs:{id:'$id + "_transfer_controls"'}}))),D=t("transferButtonForward",(()=>({if:"$transferOnSelect !== true",$el:"button",attrs:{id:'$id + "_transfer_button_forward"',type:"button",disabled:"$selections.length === 0 || $sourceSelected === false || $disabled || ($max && $value && $value.length >= $max)",onClick:"$handlers.transferForward","aria-label":"$ui.addSelectedValues.value",title:"$ui.addSelectedValues.value",class:'$classes.transferlistButton + " " + $classes.transferButtonForward'}}))),N=t("transferButtonForwardAll",(()=>({$el:"button",attrs:{id:'$id + "_transfer_button_forward_all"',type:"button",disabled:"$options.length === $targetOptions.length || $disabled || ($max && $value && $value.length >= $max)",onClick:"$handlers.transferForwardAll","aria-label":"$ui.addAllValues.value",title:"$ui.addAllValues.value",class:'$classes.transferlistButton + " " + $classes.transferButtonForwardAll'}}))),T=t("transferButtonBackward",(()=>({if:"$transferOnSelect !== true",$el:"button",attrs:{id:'$id + "_transfer_button_backward"',onClick:"$handlers.transferBackward",type:"button",disabled:"$selections.length === 0 || $sourceSelected === true || $disabled","aria-label":"$ui.removeSelectedValues.value",title:"$ui.removeSelectedValues.value",class:'$classes.transferlistButton + " " + $classes.transferButtonBackward'}}))),P=t("transferButtonBackwardAll",(()=>({$el:"button",attrs:{id:'$id + "_transfer_button_backward_all"',onClick:"$handlers.transferBackwardAll",type:"button",disabled:"$targetOptions.length === 0 || $disabled","aria-label":"$ui.removeAllValues.value",title:"$ui.removeAllValues.value",class:'$classes.transferlistButton + " " + $classes.transferButtonBackwardAll'}}))),j=t("controlLabel","span"),q=t("sourceEmptyMessage",(()=>({$el:"li",if:"$showSourceEmptyMessage && $sourceEmptyMessage && $state.loading !== true",attrs:{id:'$id + "_source_empty_message"',key:"$sourceEmptyMessage",role:"presentation"}}))),z=t("targetEmptyMessage",(()=>({$el:"li",if:"$showTargetEmptyMessage && $targetEmptyMessage",attrs:{id:'$id + "_empty_message"',key:"$emptyMessage",role:"presentation"}}))),G=t("emptyMessageInner","span");export{p as area,j as controlLabel,t as createSection,G as emptyMessageInner,u as fieldset,d as help,i as icon,l as inner,f as legend,H as loadMoreInner,c as message,$ as messages,a as outer,o as prefix,_ as source,L as sourceControls,q as sourceEmptyMessage,g as sourceHeader,b as sourceHeaderItemCount,h as sourceHeaderLabel,C as sourceListItem,w as sourceListItems,k as sourceLoadMore,I as sourceOption,y as sourceSearch,S as sourceSearchClear,M as sourceSearchInput,n as suffix,x as target,z as targetEmptyMessage,B as targetHeader,v as targetHeaderItemCount,m as targetHeaderLabel,O as targetHeaderName,F as targetListItem,A as targetListItems,V as targetLoadMore,E as targetOption,T as transferButtonBackward,P as transferButtonBackwardAll,D as transferButtonForward,N as transferButtonForwardAll,K as transferControls,r as wrapper};

package/transferList/transferList.ts

@@ -0,0 +1,194 @@
+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,
+  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')),
+            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(
+              $if(
+                '$state.loading === false',
+                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',
+    'sourceOptions',
+    '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'),
+  ],
+}