@formkit/pro 1.0.0-alpha.6 → 1.0.0-alpha.60

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:x,message:b}=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",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:"$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,b as message,x 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,98 @@
+import { default as dropdownFeature } from '../features/dropdown'
+import { default as autocompleteFeature } from '../features/autocompletes'
+import { default as taglistFeature } from '../features/taglist'
+import {
+  dropdownKeyHandler,
+  dropdownDisplayHandler,
+} 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)),
+    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",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',
   ],
 
   /**