@formkit/pro 1.0.0-alpha.68 → 1.0.0-alpha.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formkit/pro",
-  "version": "1.0.0-alpha.68",
+  "version": "1.0.0-alpha.69",
   "description": "FormKit Pro — Form inputs and tools for high quality forms.",
   "main": "index.cjs",
   "module": "index.mjs",

package/taglist/taglist.ts

@@ -4,6 +4,7 @@ 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'
@@ -86,7 +87,10 @@ export const taglist: FormKitProInput = {
   features: [
     options,
     taglistFeature,
-    dropdownFeature(dropdownKeyHandler, dropdownDisplayHandler(getSelections)),
+    dropdownFeature(
+      dropdownKeyHandler,
+      dropdownDisplayHandler(getSelections, setSelectedOption)
+    ),
     autocompleteFeature(getSelections),
     defaultIcon('select', 'select'),
     defaultIcon('close', 'close'),

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:o,prefix:i,suffix:n,help:d,messages:c,message:$}=s(t),u=t("fieldset",(()=>({$el:"fieldset",attrs:{id:'$id + "_fieldset"',role:"presentation","aria-describedby":{if:"$help",then:'$: "help-" + $id',else:void 0}}}))),f=t("legend",(()=>({if:"$label",$el:"legend"}))),p=t("area",(()=>({$el:"div",attrs:{id:'$id + "_area"'}}))),_=t("source",(()=>({$el:"div",attrs:{id:'$id + "_source"',class:'$classes.transferlist + " " + $classes.source'}}))),g=t("sourceHeader",(()=>({$el:"div",attrs:{id:'$id + "_source_header"',role:"presentation",class:'$classes.transferlistHeader + " " + $classes.sourceHeader'}}))),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","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}))),k=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'}}))),H=t("sourceOption",(()=>({$el:"div",attrs:{"data-checked":"$selections && $selections.length > 0 && $fns.isSelected($option)",class:'$classes.transferlistOption + " " + $classes.sourceOption'}}))),S=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'}}))),O=t("loadMoreInner","span"),B=t("target",(()=>({$el:"div",attrs:{id:'$id + "_target"',class:'$classes.transferlist + " " + $classes.target'}}))),x=t("targetHeader",(()=>({$el:"div",attrs:{id:'$id + "_target_header"',role:"presentation",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"}))),E=t("targetListItems",(()=>({$el:"ul",attrs:{id:"$id","aria-activedescendant":"$activeDescendant",onMouseover:"$handlers.onMouseEnter(false)",onMouseout:"$handlers.onMouseLeave(false)",class:'$classes.transferlistListItems + " " + $classes.targetListItems'}}))),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)",onKeydown:"$handlers.targetKeyDown",role:"option",onClick:"$option.attrs.disabled !== true && $handlers.selectOption($option, false)",key:"$option.value",class:'$classes.transferlistListItem + " " + $classes.targetListItem'}}))),K=t("targetOption",(()=>({$el:"div",attrs:{id:'$id + "_target_list_item_" + $index',class:'$classes.transferlistOption + " " + $classes.targetOption'}}))),D=t("targetLoadMore",(()=>({$el:"li",if:"$targetLoading && $state.loading",attrs:{id:'$id + "_target_load_more"',key:"loadMore","aria-selected":"false",class:'$classes.transferlistLoadMore + " " + $classes.targetLoadMore'}}))),N=t("transferControls",(()=>({$el:"div",attrs:{id:'$id + "_transfer_controls"'}}))),T=t("transferButtonForward",(()=>({if:"$transferOnSelect !== true",$el:"button",attrs:{id:'$id + "_transfer_button_forward"',type:"button",disabled:"$selections.length === 0 || $sourceSelected === false || $state.loading || $disabled",onClick:"$handlers.transferForward","aria-label":"Add selected values",class:'$classes.transferlistButton + " " + $classes.transferButtonForward'}}))),V=t("transferButtonForwardAll",(()=>({$el:"button",attrs:{id:'$id + "_transfer_button_forward_all"',type:"button",disabled:"$options.length === $targetOptions.length || $state.loading || $disabled",onClick:"$handlers.transferForwardAll","aria-label":"Transfer all options",class:'$classes.transferlistButton + " " + $classes.transferButtonForwardAll'}}))),R=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":"Remove selected values",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 || $state.loading || $disabled","aria-label":"Remove all values",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 && $state.loading !== true",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,o as icon,l as inner,f as legend,O as loadMoreInner,$ as message,c as messages,a as outer,i as prefix,_ as source,L as sourceControls,q as sourceEmptyMessage,g as sourceHeader,h as sourceHeaderItemCount,b as sourceHeaderLabel,k as sourceListItem,C as sourceListItems,S as sourceLoadMore,H as sourceOption,y as sourceSearch,w as sourceSearchClear,M as sourceSearchInput,n as suffix,B as target,z as targetEmptyMessage,x as targetHeader,v as targetHeaderItemCount,m as targetHeaderLabel,A as targetHeaderName,F as targetListItem,E as targetListItems,D as targetLoadMore,K as targetOption,I as template,R as transferButtonBackward,P as transferButtonBackwardAll,T as transferButtonForward,V as transferButtonForwardAll,N as transferControls,r as wrapper};

package/transferList/transferList.ts

@@ -0,0 +1,192 @@
+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 {
+  dropdownDisplayHandler,
+  getSelections,
+} from '../features/dropdownFeatures'
+import { setSelectedOption } 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('$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.removeAllSelectedValues.value'),
+            icon('rewind')
+          )
+        ),
+        target(
+          targetHeader(targetHeaderLabel(), targetHeaderItemCount()),
+          targetListItems(
+            targetEmptyMessage(emptyMessageInner('$targetEmptyMessage')),
+            targetListItem(
+              $if('$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',
+    'disableDragAndDrop',
+    'searchable',
+    'sourceLabel',
+    'targetLabel',
+    'addOnSelect',
+    'removeOnSelect',
+    'transferOnSelect',
+    'disabled',
+    'placeholder',
+    'filter',
+    'showSourceEmptyMessage',
+    'showTargetEmptyMessage',
+    'sourceEmptyMessage',
+    'targetEmptyMessage',
+  ],
+
+  /**
+   * Additional features that make this input work.
+   */
+  features: [
+    transferListFeature(
+      dropdownDisplayHandler(getSelections, setSelectedOption)
+    ),
+    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'),
+  ],
+}