@formkit/pro 0.122.21 → 0.123.0

package/mask/index.mjs

@@ -1 +1 @@
-import{createSectionFactory as e,createBaseSections as r,createMaskOverlaySections as a}from"../index.mjs";const l=e("mk"),{outer:n,wrapper:o,inner:s,label:i,prefix:t,suffix:d,help:p,messages:u,message:y,icon:m}=r(l),{overlayPlaceholder:$,overlayLiteral:b,overlayChar:v,overlayEnum:c,overlay:h,overlayParts:f,overlayInner:x}=a(l),I=l("input",(()=>({$el:"input",bind:"$attrs",attrs:{type:"$type",disabled:"$disabled",name:"$node.name",onBlur:"$handlers.blur",onInput:"$handlers.DOMInput",value:"$_maskValue",id:"$id","aria-describedby":"$describedBy"}})));export{l as createSection,p as help,m as icon,s as inner,i as label,I as maskInput,y as message,u as messages,n as outer,h as overlay,v as overlayChar,c as overlayEnum,x as overlayInner,b as overlayLiteral,f as overlayParts,$ as overlayPlaceholder,t as prefix,d as suffix,o as wrapper};
+import{createSectionFactory as e,createBaseSections as r,createMaskOverlaySections as a}from"../index.mjs";const l=e("mk"),{outer:o,wrapper:n,inner:s,label:d,prefix:i,suffix:t,help:p,messages:u,message:y,icon:$}=r(l),{overlayPlaceholder:m,overlayLiteral:b,overlayChar:c,overlayEnum:v,overlay:h,overlayParts:f,overlayInner:x}=a(l),I=l("input",(()=>({$el:"input",bind:"$attrs",attrs:{type:"$type",disabled:"$disabled",name:"$node.name",onBlur:"$handlers.blur",onInput:"$handlers.DOMInput",value:"$_maskValue",placeholder:"$placeholder",id:"$id","aria-describedby":"$describedBy"}})));export{l as createSection,p as help,$ as icon,s as inner,d as label,I as maskInput,y as message,u as messages,o as outer,h as overlay,c as overlayChar,v as overlayEnum,x as overlayInner,b as overlayLiteral,f as overlayParts,m as overlayPlaceholder,i as prefix,t as suffix,n as wrapper};

package/package.json

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

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:$,messages:p,message:f,icon:h}=t(r),m=r("input",(()=>({$el:"input",bind:"$attrs",attrs:{id:"$id",type:"range",max:"$max",name:"$node.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};
+import{createSectionFactory as e,createBaseSections as t,$if as n}from"../index.mjs";const l=e("rt"),{outer:a,wrapper:s,inner:r,label:o,prefix:i,suffix:$,help:d,messages:m,message:f,icon:h}=t(l),u=l("itemsWrapper",(()=>({$el:"span",attrs:{style:{"flex-direction":'$rightToLeft && "row-reverse" || undefined'},tabindex:"$value !== undefined && $value !== 0 && '-1' || '0'",id:"$id + _items_wrapper",onKeydown:"$handlers.handleWrapperKeydown","data-disabled":"$disabled",onBlur:"$handlers.handleWrapperBlur",onMouseleave:"$hoverHighlight && $handlers.handleMouseleave"}}))),p=l("ratingItem",(()=>({for:["item","index","$max"],$el:"span",attrs:{id:'$id + "_item_" + $index',onClick:"$handlers.handleItemClick($item)",draggable:"$hoverHighlight !== true && && $disabled !== true && true",onMousemove:"$handlers.handleMousemove($item)",onDragstart:"$handlers.handleDragstart($item)",onDragend:"$handlers.handleDragend",onTouchstart:"$handlers.handleTouchstart($item)",onTouchmove:"$handlers.handleTouchmove"}}))),c=l("template",(()=>({for:["increment","stepIndex","$stepsPerValue"],$el:null}))),g=l("itemLabel",(()=>({$el:"label",attrs:{id:'$id + "_label_" + $index + "_" + $stepIndex',for:'$id + "_" + $index + "_" + $stepIndex',"data-checked":'$value === $fns.getValue($item, $increment) && "true" || "false"',style:{width:'$fns.showLabel($fns.getValue($item, $increment), $stepIndex, $item) && "100%" || "0%"'}}}))),v=l("itemLabelInner",(()=>({$el:"span",children:"$fns.getValue($item, $increment)"}))),x=l("input",(()=>({$el:"input",attrs:{type:"radio",value:"$fns.getValue($item, $increment)",id:'$id + "_" + $index + "_" + $stepIndex',onFocus:"$handlers.handleFocus",tabindex:'$value === $fns.getValue($item, $increment) && "0" || "-1"',disabled:"$disabled",name:"$id",checked:"$value === $fns.getValue($item, $increment) && true",onKeydown:"$handlers.handleKeydown($fns.getValue($item, $increment))"}}))),I=l("onItemRow",(()=>({$el:"span",attrs:{style:{width:"$fns.getPercentage($itemsToPercentages, $item)",display:"flex",position:"relative",overflow:"hidden",top:"0",left:"0",bottom:"0"}}}))),b=l("offItemRow",(()=>({$el:"span",attrs:{style:{width:"$fns.getPercentage($itemsToPercentages, $item, false)",display:"flex","flex-direction":"row-reverse",position:"absolute",zIndex:"$offItemStyles && 100",overflow:"hidden",top:"0",right:"0"}}}))),w=l("onItemWrapper",(()=>({$el:"div",attrs:{style:{color:"$onColor"}}}))),y=l("offItemWrapper",(()=>({$el:"div",attrs:{style:{color:"$offColor"}}}))),_=()=>n("$slots.onItem",(()=>()=>"$slots.onItem"),n("$slots.default",(()=>()=>"$slots.default"),h("rating"))),V=()=>n("$slots.offItem",(()=>()=>"$slots.offItem"),n("$slots.default",(()=>()=>"$slots.default"),h("rating")));export{l as createSection,d as help,h as icon,r as inner,x as input,g as itemLabel,v as itemLabelInner,u as itemsWrapper,o as label,f as message,m as messages,V as offItem,b as offItemRow,y as offItemWrapper,_ as onItem,I as onItemRow,w as onItemWrapper,a as outer,i as prefix,p as ratingItem,$ as suffix,c as template,s as wrapper};

package/rating/rating.ts

@@ -1,23 +1,29 @@
 import { defaultIcon } from '@formkit/inputs'
-import rate from '../features/rate'
+import newRate from '../features/rate'
 import { FormKitProInput } from '@formkit/pro'
 import {
   outer,
   wrapper,
   label,
   inner,
-  onItems,
-  offItems,
   onItem,
   offItem,
-  input,
   itemsWrapper,
   help,
   messages,
+  ratingItem,
+  input,
   message,
   icon,
   prefix,
+  itemLabel,
+  itemLabelInner,
+  template,
   suffix,
+  onItemRow,
+  offItemRow,
+  onItemWrapper,
+  offItemWrapper,
 } from '../sections/ratingSections'
 
 /**
@@ -34,8 +40,18 @@ export const rating: FormKitProInput = {
       inner(
         icon('prefix'),
         prefix(),
-        itemsWrapper(onItems(onItem()), offItems(offItem())),
-        input(),
+        itemsWrapper(
+          ratingItem(
+            template(
+              itemLabel(
+                onItemRow(onItemWrapper(onItem())),
+                offItemRow(offItemWrapper(offItem())),
+                itemLabelInner()
+              ),
+              input()
+            )
+          )
+        ),
         suffix(),
         icon('suffix')
       )
@@ -54,7 +70,7 @@ export const rating: FormKitProInput = {
   /**
    * Additional features that make this input work.
    */
-  features: [rate, defaultIcon('rating', 'star')],
+  features: [newRate, defaultIcon('rating', 'star')],
 }
 
 export default rating

package/taglist/index.mjs

@@ -1 +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:l,wrapper:d,inner:s,icon:r,label:$,prefix:p,suffix:c,help:u,messages:b,message:v}=a(n),g=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",name:"$node.name",tabindex:"0",placeholder:"$state.loading && $inputStd.length === 0 && $ui.isLoading.value || $placeholder || undefined",role:"combobox",autocomplete:"off",autocapitalize:"none",readonly:"$attrs.readonly || $isLoadingOption || undefined || $multiple && $max && $value && $value.length >= $max",disabled:"$disabled || $disabledInternally || undefined","aria-autocomplete":"list","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined',"aria-describedBy":"$describedBy","aria-activedescendant":"$expanded && $activeDescendant || undefined"}}))),x=n("listboxButton",(()=>({$el:"button",attrs:{style:"$visibilityStyles",id:'$id + "_listbox_button"',type:"button",onClick:"$handlers.toggleListbox",tabindex:"-1","aria-label":"$expanded && $ui.close.value || $ui.open.value",disabled:"$disabled || undefined","aria-haspopup":"true","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined'}}))),h=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.tagClick && $handlers.tagClick($option)",onFocus:"$handlers.tagFocus && $handlers.tagFocus($option)",onBlur:"$handlers.tagBlur && $handlers.tagBlur($option)",onKeydown:"$handlers.searchInputTagKeydown && $handlers.searchInputTagKeydown($option)","data-is-tag":"true","data-active-selection":"$fns.isActiveSelection($activeSelectionValue, $option)"}}))),m=n("tag",(()=>({$el:"div",attrs:{id:'$id + "_tag_" + $index',role:"button"}}))),f=n("removeSelection",(()=>({$el:"button",if:"$selections.length > 0",attrs:{id:'$id + "_remove_selection_" + $index',tabindex:"-1","aria-label":"$ui.remove.value",type:"button",onClick:"$handlers.removeSelection && $handlers.removeSelection($option)",onTouchstart:"$handlers.removeSelection && $handlers.removeSelection($option)","aria-controls":"$id"}}))),y=n("tagLabel",(()=>({$el:"span"}))),_=n("tags",(()=>({$el:"div",attrs:{id:'$id + "_selections"',"aria-live":"polite"}}))),k=n("tagLoading","span"),S=function(t){const a=t("dropdownWrapper",(()=>({$el:"div",attrs:{id:'$id + "_popover"',popover:{if:"$usePopover",then:"$popover",else:void 0},"data-is-wrapper":!0,style:"$dropdownWrapperStyles",onScroll:"$handlers.scroll"}}))),i=t("listbox",(()=>({$el:"ul",if:"$expanded || $setForceExpanded",attrs:{style:"$listboxStyles",id:'$id + "_listbox"',role:"listbox","aria-activedescendant":"$activeDescendant","aria-labelledby":'$id + "_label"'}}))),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)",onBlur:"$handlers.blurListitem",role:"option","aria-selected":"$hidingValue === true && false || $fns.isSelected($option)","data-is-active":"$fns.isActive($option)",tabindex:"-1"}}))),l=t("loadMore",(()=>({$el:"li",if:"$state.loading || $state.hasNextPage",attrs:{id:'$id + "_load_more"',key:"loadMore",role:"option",onClick:"$handlers.selectOption($loadMoreOption)","aria-selected":"false","data-is-active":"$fns.isActive($loadMoreOption)",tabindex:"-1"}}))),d=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")),l(e("$state.loading && $optionLoadingCounter === 0 || $state.hasNextPage",d(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,g as input,$ as label,S as listbox,x as listboxButton,v as message,b as messages,l as outer,p as prefix,f as removeSelection,c as suffix,m as tag,y as tagLabel,k as tagLoading,h as tagWrapper,_ as tags,d as wrapper};
+import{$if as e,$attrs as t,createSectionFactory as i,createBaseSections as o}from"../index.mjs";import{icon as a}from"@formkit/inputs";const n=(e,t)=>()=>a(e,t),l=i("tl"),{outer:d,wrapper:s,inner:r,icon:$,label:p,prefix:u,suffix:c,help:g,messages:b,message:x}=o(l),v=l("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",name:"$node.name",tabindex:"0",placeholder:"$state.loading && $inputStd.length === 0 && $ui.isLoading.value || $placeholder || undefined",role:"combobox",autocomplete:"off",autocapitalize:"none",readonly:"$attrs.readonly || $isLoadingOption || undefined || $multiple && $max && $value && $value.length >= $max",disabled:"$disabled || $disabledInternally || undefined","aria-autocomplete":"list","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined',"aria-describedBy":"$describedBy","aria-activedescendant":"$expanded && $activeDescendant || undefined"}}))),h=l("listboxButton",(()=>({$el:"button",attrs:{style:"$visibilityStyles",id:'$id + "_listbox_button"',type:"button",onClick:"$handlers.toggleListbox",tabindex:"-1","aria-label":"$expanded && $ui.close.value || $ui.open.value",disabled:"$disabled || undefined","aria-haspopup":"true","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined'}}))),m=l("tagWrapper",(()=>({$el:"span",for:["option","index","$selections"],attrs:{id:'$id + "_tag-wrapper_" + $index',key:"$option.value","data-value":"$option.value",tabindex:"-1",onClick:"$handlers.tagClick && $handlers.tagClick($option)",onFocus:"$handlers.tagFocus && $handlers.tagFocus($option)",onBlur:"$handlers.tagBlur && $handlers.tagBlur($option)",onKeydown:"$handlers.searchInputTagKeydown && $handlers.searchInputTagKeydown($option)","data-is-tag":"true","data-active-selection":"$fns.isActiveSelection($activeSelectionValue, $option)"}}))),f=l("tag",(()=>({$el:"div",attrs:{id:'$id + "_tag_" + $index',role:"button"}}))),y=l("removeSelection",(()=>({$el:"button",if:"$selections.length > 0",attrs:{id:'$id + "_remove_selection_" + $index',tabindex:"-1","aria-label":"$ui.remove.value",type:"button",onClick:"$handlers.removeSelection && $handlers.removeSelection($option)",onTouchstart:"$handlers.removeSelection && $handlers.removeSelection($option)","aria-controls":"$id"}}))),_=l("tagLabel",(()=>({$el:"span"}))),k=l("tags",(()=>({$el:"div",attrs:{id:'$id + "_selections"',"aria-live":"polite"}}))),S=l("tagLoading","span"),w=function(i){const o=i("dropdownWrapper",(()=>({$el:"div",attrs:{id:'$id + "_popover"',popover:{if:"$usePopover",then:"$popover",else:void 0},"data-is-wrapper":!0,style:"$dropdownWrapperStyles",onScroll:"$handlers.scroll"}}))),a=i("listbox",(()=>({$el:"ul",if:"$expanded || $setForceExpanded",attrs:{style:"$listboxStyles",id:'$id + "_listbox"',role:"listbox","aria-activedescendant":"$activeDescendant","aria-labelledby":'$id + "_label"'}}))),l=i("listitem",(()=>({$el:"li",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":"$hidingValue === true && false || $fns.isSelected($option)","data-is-active":"$fns.isActive($option)",tabindex:"-1"}}))),d=i("loadMore",(()=>({$el:"li",if:"$state.loading || $state.hasNextPage",attrs:{id:'$id + "_load_more"',key:"loadMore",role:"option",onClick:"$handlers.selectOption($loadMoreOption)","aria-selected":"false","data-is-active":"$fns.isActive($loadMoreOption)",tabindex:"-1"}}))),s=i("loadMoreInner","span"),r=i("emptyMessage",(()=>({$el:"li",if:"$showEmptyMessage && $state.loading !== true",attrs:{id:'$id + "_empty_message"',key:"$emptyMessage",role:"presentation"}}))),$=i("emptyMessageInner","span"),p=i("option",(()=>({$el:"div",attrs:{"data-checked":"$fns.isSelected($option)"}}))),u=i("listitems",(()=>({$el:null,if:"$options.length",for:["option","index","$option.options || $options"]}))),c=i("innerListitems",(()=>({$el:null,for:["option","innerIndex","$option.options"]}))),g=i("listitemGroup",(()=>({$el:"li",attrs:{"aria-label":"$option.group",role:"group",onClick:"$handlers.listitemGroupClick",tabindex:"-1"}}))),b=i("groupLabel","span"),x=i("groupList",(()=>({$el:"ul",attrs:{role:"group"}})));return()=>o(a(r($("$emptyMessage")),u(e("$option.group",g(b("$option.group"),x(c(t((()=>({id:'$id + "_listitem_" + $index + "_" + $innerIndex'})),l(e("$fns.isSelected($option)",n("selected")),p("$option.label")))))),l(e("$fns.isSelected($option)",n("selected")),p("$option.label")))),d(e("$state.loading && $optionLoadingCounter === 0 || $state.hasNextPage",s(e("$state.loading",n("loader")),"$state.loading && $ui.isLoading.value || $ui.loadMore.value")))))}(l);export{l as createSection,g as help,$ as icon,r as inner,v as input,p as label,w as listbox,h as listboxButton,x as message,b as messages,d as outer,u as prefix,y as removeSelection,c as suffix,f as tag,_ as tagLabel,S as tagLoading,m as tagWrapper,k as tags,s as wrapper};

package/unit/index.mjs

@@ -0,0 +1 @@
+import{createSectionFactory as a,createBaseSections as e}from"../index.mjs";const n=a("tb"),{outer:l,inner:d,wrapper:o,label:t,prefix:r,suffix:i,help:u,messages:s,message:$,icon:c}=e(n),p=n("input",(()=>({$el:"input",bind:"$attrs",attrs:{name:"$node.name",type:"tel",autocomplete:"off",id:"$id",onClick:"$handlers.handleClick",onChange:"$handlers.handleInput",onInput:"$handlers.handleInput",onKeydown:"$handlers.handleKeyDown",onBeforeinput:"$handlers.handleBeforeInput",onBlur:"$handlers.handleBlur",onFocus:"$handlers.handleFocus",readonly:"$readonly",disabled:"$disabled",value:"$_displayValue","data-unit":"$unit","data-currency":"$currency","data-display-locale":"$displayLocale","data-value-locale":"$valueLocale","data-decimals":"$decimals","data-trailing":"$trailingZeros","data-numeric-value":"$_numericValue","data-align":"$_valueAlignAuto"}})));export{n as createSection,u as help,c as icon,d as inner,p as input,t as label,$ as message,s as messages,l as outer,r as prefix,i as suffix,o as wrapper};

package/unit/unit.ts

@@ -0,0 +1,58 @@
+import { FormKitProInput } from '@formkit/pro'
+import { options as optionsCore } from '@formkit/inputs'
+import {
+  outer,
+  inner,
+  input,
+  wrapper,
+  label,
+  help,
+  messages,
+  message,
+  prefix, 
+  suffix,
+  icon,
+} from '../sections/unitSections'
+import unitFeatures from '../features/unit'
+
+/**
+ * Input definition for a toggle group input.
+ * @public
+ */
+export const unit: FormKitProInput = {
+  /**
+   * The actual schema of the input, or a function that returns the schema.
+   */
+  schema: outer(
+    wrapper(
+      label('$label'),
+      inner(
+        icon('prefix'),
+        prefix(),
+        input(),
+        suffix(),
+        icon('suffix')
+      )
+    ),
+    help('$help'),
+    messages(message('$message.value'))
+  ),
+  /**
+   * The type of node, can be a list, group, or input.
+   */
+  type: 'input',
+
+  family: 'text',
+
+  /**
+   * An array of extra props to accept for this input.
+   */
+  props: [
+    'options'
+  ],
+
+  /**
+   * Additional features that make this input work.
+   */
+  features: [unitFeatures, optionsCore],
+}