@formkit/pro 0.117.7 → 0.118.0

package/package.json

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

package/togglebuttons/index.mjs

@@ -0,0 +1 @@
+import{createSectionFactory as e,createBaseSections as l}from"../index.mjs";const i=e("tb"),{outer:a,inner:s,wrapper:t,label:o,prefix:r,suffix:n,help:$,messages:d,message:p,icon:b}=l(i),u=i("singleToggle",(()=>({bind:"$attrs",$el:"button",attrs:{id:"$id","aria-label":"$label","aria-pressed":"$fns.isChecked($onValue, $value)",role:"checkbox",onClick:"$handlers.toggleValue()",disabled:"$disabled",class:"$classes.input",onBlur:"$handlers.blur"}}))),c=i("multiToggle",(()=>({bind:"$attrs",$el:"button",attrs:{id:"$id+'_'+$index","aria-label":"$label","aria-pressed":"$fns.isChecked($option, $value)",role:'$multiple && "checkbox" || "radio"',onClick:"$handlers.toggleValue($option)",class:"$classes.input",title:"$option.help",disabled:"$disabled || $option.disabled",onBlur:"$handlers.blur"}}))),g=i("inputInner",(()=>({bind:"$attrs",$el:"span"}))),h=i("options",(()=>({$el:"ul",attrs:{id:"$id",role:"group","data-vertical":'$vertical && "true" || "false"',"aria-labelledby":"$id"}}))),x=i("option",(()=>({$el:"li",for:["option","index","$options"],attrs:{role:"listitem",key:"$option.value","data-index":"$index"}})));export{g as buttonInput,i as createSection,$ as help,b as icon,s as inner,o as label,p as message,d as messages,c as multiToggle,x as option,h as options,a as outer,r as prefix,u as singleToggle,n as suffix,t as wrapper};

package/togglebuttons/togglebuttons.ts

@@ -0,0 +1,98 @@
+import { FormKitProInput } from '@formkit/pro'
+import { options as optionsCore } from '@formkit/inputs'
+import { $if } from '../compose'
+import {
+  outer,
+  wrapper,
+  label,
+  singleToggle,
+  multiToggle,
+  buttonInput,
+  options,
+  option,
+  help,
+  messages,
+  message,
+  prefix, 
+  suffix,
+  icon,
+} from '../sections/togglebuttonsSections'
+import togglebuttonsFeatures from '../features/togglebuttons'
+
+/**
+ * Input definition for a toggle group input.
+ * @public
+ */
+export const togglebuttons: FormKitProInput = {
+  /**
+   * The actual schema of the input, or a function that returns the schema.
+   */
+  schema: outer(
+    $if(
+      '$options',
+      wrapper(
+        label('$label'),
+        options(
+          option(
+            multiToggle(
+              $if(
+                '$fns.isChecked($option) === true',
+                buttonInput(
+                  '$slots.default || $slots.on || ' +
+                  '$option.onLabel || $option.label'
+                ),
+                buttonInput(
+                  '$slots.default || $slots.off || ' +
+                  '$option.offLabel || $option.label'
+                )
+              ),
+            )
+          )
+        )
+      ),
+      wrapper(
+        $if(
+          '$label && ($slots.default || $slots.on || $onLabel)',
+          label('$label'),
+        ),
+        singleToggle(
+          icon('prefix'),
+          prefix(),
+          $if(
+            '$_isChecked === true',
+            buttonInput(
+              '$slots.default || $slots.on || '+
+              '$onLabel || $label'
+            ),
+            buttonInput(
+              '$slots.default || $slots.off || '+
+              '$offLabel || $label'
+            )
+          ),
+          suffix(),
+          icon('suffix'),
+        ),
+      ),
+    ),
+    help('$help'),
+    messages(message('$message.value'))
+  ),
+  /**
+   * The type of node, can be a list, group, or input.
+   */
+  type: 'input',
+
+  family: 'button',
+
+  /**
+   * An array of extra props to accept for this input.
+   */
+  props: [
+    'options'
+  ],
+
+  /**
+   * Additional features that make this input work.
+   */
+  features: [togglebuttonsFeatures, optionsCore],
+}