@formkit/pro 0.111.9 → 0.111.10

package/package.json

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

package/slider/index.mjs

@@ -0,0 +1 @@
+import{createSectionFactory as a,createBaseSections as e}from"../index.mjs";const l=a("sl"),{outer:t,wrapper:s,inner:$,icon:i,label:n,prefix:r,suffix:o,help:d,messages:u,message:h}=e(l),c=l("chart",(()=>({$el:"div",if:"$chart"}))),m=l("chartBar",(()=>({$el:"div",for:["bar","index","$chart"],attrs:{"data-active":{if:"$isMulti",then:{if:"$_value.0 < $_value.1",then:"$bar.at >= $_value.0 && $bar.at <= $_value.1",else:"$bar.at >= $_value.1 && $bar.at <= $_value.0"},else:"$bar.at <= $_value"},style:{left:'$bar.at / ($max - $min) * 100 + "%"',width:'$: "calc(" + (100 / $chart.length) + "% - 2px)"',height:{if:"$largestBar",then:'$bar.value / $largestBar * 100 + "%"'}}}}))),p=l("sliderInner",(()=>({$el:"div",attrs:{"data-has-mark-labels":"$markLabels && $marks.length > 0"}}))),v=l("track",(()=>({$el:"div",attrs:{id:"$: 'track-' + $id",onClick:"$handlers.clickTrack"}}))),f=l("trackWrapper",(()=>({$el:"div"}))),b=l("trackInner",(()=>({$el:"div"}))),k=l("fill",(()=>({$el:"div",attrs:{style:"$fillStyles"}}))),_=l("linkedValues",(()=>({$el:"div"}))),x=l("maxValue",(()=>({$formkit:"number",bind:"$computedMaxInputAttrs",ignore:!0,value:{if:"$isMulti",then:"$_value.1",else:"$_value"},tabindex:{if:"$disabled",then:-1},onNode:"$handlers.maxNode",onBlur:"$handlers.inputBlur"}))),g=l("minValue",(()=>({$formkit:"number",bind:"$computedMinInputAttrs",ignore:!0,value:{if:"$isMulti",then:"$_value.0",else:"$_value"},tabindex:{if:"$disabled",then:-1},onNode:"$handlers.minNode",onBlur:"$handlers.inputBlur"}))),M=l("marks",(()=>({$el:"div",if:"$marks",class:"$classes.marks"}))),y=l("mark",(()=>({$el:"span",for:["step","index","$marks"],attrs:{"data-active":{if:"$isMulti",then:{if:"$_value.0 < $_value.1",then:"$step.at >= $_value.0 && $step.at <= $_value.1",else:"$step.at >= $_value.1 && $step.at <= $_value.0"},else:"$step.at <= $_value"},class:"$classes.mark",style:{left:'$step.at / ($max - $min) * 100 + "%"'}}}))),w=l("markLabel",(()=>({$el:"span",if:"$markLabels",children:"$step.label"}))),B=l("handles",(()=>({$el:"ul"}))),F=l("handleMax",(()=>({$el:"li",attrs:{"data-active":"$dragging","data-is-target":'$lastHandleInteraction === "max"',"data-handle":"max","data-show-tooltip":"$tooltip",class:"$: 'formkit-handle ' + $classes.handle + ' ' + $classes.handleMax",onFocus:"$handlers.focus",onClick:"$handlers.clickHandle",onMousedown:"$handlers.startDrag",onTouchstart:"$handlers.startDrag",style:"$maxHandleStyles",tabindex:{if:"$disabled",then:-1,else:0},onBlur:"$handlers.blur",onKeydown:"$handlers.keydown"}}))),H=l("handleMin",(()=>({$el:"li",if:"$isMulti",attrs:{"data-active":"$dragging","data-is-target":'$lastHandleInteraction === "min"',"data-handle":"min","data-show-tooltip":"$tooltip",class:"$: $classes.handle + ' ' + $classes.handleMin",onFocus:"$handlers.focus",onClick:"$handlers.clickHandle",onMousedown:"$handlers.startDrag",onTouchstart:"$handlers.startDrag",style:"$minHandleStyles",tabindex:{if:"$disabled",then:-1,else:0},onBlur:"$handlers.blur",onKeydown:"$handlers.keydown"}}))),I=l("tooltipMax",(()=>({$el:"div",if:'$tooltip === true || $tooltip === "auto"',children:{if:"$isMulti",then:{if:"$_value.0 < $_value.1",then:'$tooltipFormat($_value.1, "max")',else:'$tooltipFormat($_value.0, "max")'},else:'$tooltipFormat($_value, "max")'},attrs:{class:"$classes.tooltip + ' ' + $classes.tooltipMax"}}))),D=l("tooltipMin",(()=>({$el:"div",if:'$isMulti && ($tooltip === true || $tooltip === "auto")',children:{if:"$_value.0 < $_value.1",then:'$tooltipFormat($_value.0, "min")',else:'$tooltipFormat($_value.1, "min")'},attrs:{class:"$classes.tooltip + ' ' + $classes.tooltipMin"}})));export{c as chart,m as chartBar,l as createSection,k as fill,F as handleMax,H as handleMin,B as handles,d as help,i as icon,$ as inner,n as label,_ as linkedValues,y as mark,w as markLabel,M as marks,x as maxValue,h as message,u as messages,g as minValue,t as outer,r as prefix,p as sliderInner,o as suffix,I as tooltipMax,D as tooltipMin,v as track,b as trackInner,f as trackWrapper,s as wrapper};

package/slider/slider.ts

@@ -0,0 +1,97 @@
+import { FormKitProInput } from '@formkit/pro'
+import { default as sliderFeature } from '../features/slider'
+import {
+  outer,
+  wrapper,
+  label,
+  sliderInner,
+  icon,
+  prefix,
+  suffix,
+  help,
+  messages,
+  message,
+  minValue,
+  maxValue,
+  track,
+  trackWrapper,
+  trackInner,
+  fill,
+  marks,
+  mark,
+  markLabel,
+  handles,
+  handleMin,
+  handleMax,
+  tooltipMax,
+  tooltipMin,
+  linkedValues,
+  chart,
+  chartBar,
+} from '../sections/sliderSections'
+import { $if } from '../compose'
+
+/**
+ * Input definition for a slider input.
+ * @public
+ */
+export const slider: FormKitProInput = {
+  /**
+   * The actual schema of the input, or a function that returns the schema.
+   */
+  schema: outer(
+    wrapper(
+      label('$label'),
+      help('$help'),
+      sliderInner(
+        icon('prefix'),
+        prefix(),
+        track(
+          chart(chartBar()),
+          trackWrapper(
+            trackInner(
+              fill(),
+              marks(mark(markLabel())),
+              handles(handleMin(tooltipMin()), handleMax(tooltipMax()))
+            )
+          )
+        ),
+        suffix(),
+        icon('suffix'),
+        $if('$showInput && $isMulti === false', maxValue())
+      ),
+      $if('$showInput && $isMulti', linkedValues(minValue(), maxValue())),
+      messages(message('$message.value'))
+    )
+  ),
+  /**
+   * The type of node, can be a list, group, or input.
+   */
+  type: 'input',
+  /**
+   * In the dropdown family of inputs.
+   */
+  family: '',
+  /**
+   * An array of extra props to accept for this input.
+   */
+  props: [
+    'min',
+    'max',
+    'step',
+    'showInput',
+    'tooltip',
+    'tooltipFormat',
+    'inputAttrs',
+    'maxInputAttrs',
+    'minInputAttrs',
+    'marks',
+    'markLabels',
+    'snapToMarks',
+    'chart',
+  ],
+  /**
+   * Additional features that make this input work.
+   */
+  features: [sliderFeature],
+}