@formkit/pro 0.126.4 → 0.126.6

package/README.md

@@ -3,38 +3,55 @@
 FormKit Pro is a first party library of professional grade "synthetic" inputs for the FormKit form building framework. This growing list of inputs currently includes:
 
 - Autocomplete
+- Currency
 - Datepicker
 - Dropdown
 - Colorpicker
-- Currency
 - Mask
 - Rating
 - Repeater
 - Slider
 - Taglist
 - Toggle
+- Toggle Buttons
 - Transfer List
+- Slider
 
-## Development
+## Usage
 
-FormKit Pro has two development environments, a vite instance in the `examples` directory and a nuxt instance in `examples-nuxt`.
+To use FormKit Pro follow these steps:
 
-To run vite `pnpm run dev`
+1. Register for a free account at: https://formkit.com/pro
+2. Create a new project and copy the project key.
+3. Follow installation instructions for the pro package.
 
-To run nuxt  `pnpm run dev-nuxt`
+### Installation
 
-## Testing
+FormKit Pro is a FormKit plugin that is installed just like any other plugin. To configure FormKit Pro, import the `createProPlugin` from the `@formkit/pro` library. This function takes 2 arguments, your project key, and any pro inputs you want to use.
 
-FormKit Pro contains two testing frameworks: vitest and playwright. Tests are currently run against source code and not what is built.
+```js
+// main.js
+import { createApp } from 'vue'
+import { plugin, defaultConfig } from '@formkit/vue'
+import { createProPlugin, autocomplete } from '@formkit/pro'
+import App from 'App.vue'
 
-To run vitests: `pnpm test`.
+const pro = createProPlugin('{your-project-key}', {
+  autocomplete,
+})
 
-To run playwright tests (have a dev server pointing to port 3000) and in a separate terminal run `npx playwright test`.
+const app = createApp(App)
 
-## CI
+app.use(
+  plugin,
+  defaultConfig({
+    plugins: [pro],
+  })
+)
+```
 
-FormKit Pro runs Vitests and playwright in Github actions when pushes or releases are made on either the `master` or `next` branch. When pushing to any other branch, only vitests are run in the CI.
+## License
 
-## Publishing
+Although using FormKit Pro in production requires a paid license, you may use these these inputs for free during your entire development process. You will not be charged until after your project goes into production. For pricing details, please visit [formkit.com/pro](https://formkit.com/pro).
 
-In order to publish a new verison of FormKit Pro, use the command: `pnpm run publish`. `next` and `dev` tags can be published on any non-master branch. In order to publish, you must have the appropriate npm authToken in your `.npmrc`.
+By using this software, you agree to the abide by the [included license](./LICENSE).

package/datepicker/datepicker.ts

@@ -94,12 +94,8 @@ export const datepicker: FormKitProInput = {
             years(year('$fns.format($year, $yearFormat)')),
             months(month('$fns.format($month, $monthFormat)')),
             calendar(
-              calendarHeader(
-                weekDays(weekDay('$fns.format($day, $weekdayFormat)'))
-              ),
-              calendarWeeks(
-                week(dayCell(day('$fns.format($day, $dateFormat)')))
-              )
+              calendarHeader(weekDays(weekDay('$day.3'))),
+              calendarWeeks(week(dayCell(day('$day.1'))))
             ),
             time(timeInput())
           )

package/datepicker/index.mjs

@@ -1 +1 @@
-import{createSectionFactory as e,createBaseSections as a,createMaskOverlaySections as n}from"../index.mjs";const t=/* #__PURE__ */e("dp"),{outer:o,wrapper:l,inner:r,icon:d,label:$,prefix:s,suffix:i,help:u,messages:y,message:p}=/* #__PURE__ */a(t),h=t("input",(()=>({$el:"input",bind:"$attrs",attrs:{name:"$node.name",id:"$id",onKeydown:"$handlers.inputKeydown",value:"$inputText",onInput:"$handlers.dateInput",onClick:"$pickerOnly && $handlers.open",onBlur:"$handlers._blur",onFocus:"$handlers.focus",readonly:"$pickerOnly || $expanded",disabled:"$disabled"}}))),m=t("panelWrapper",(()=>({$el:"div",if:"$expanded",attrs:{id:'$id + "_popover"',role:"dialog",onBlur:"$handlers._blurOut()",tabindex:"-1",popover:"$popover","aria-modal":"true","aria-label":"Choose date","data-panel":"$panel",style:{if:"$usePopover",then:{margin:0,top:'$popoverCoordinates.y + "px"',left:'$popoverCoordinates.x + "px"',width:'$popoverCoordinates.width + "px"'}}}}))),b=t("next",(()=>({$el:"button",if:"$showPagination",attrs:{id:"$id + _next_button",type:"button",onClick:"$handlers.next"}}))),f=t("nextLabel","span"),c=t("prev",(()=>({$el:"button",if:"$showPagination",attrs:{id:"$id + _prev_button",type:"button",onClick:"$handlers.prev"}}))),v=t("prevLabel","span"),k=t("calendar",(()=>({if:'$panel === "day"',$el:"table",for:["month","$calendar"],attrs:{key:'$fns.format($month.monthDay, "YYYY-MM")'}}))),x=t("calendarWeeks",(()=>({$el:"tbody"}))),w=t("calendarHeader",(()=>({$el:"thead"}))),_=t("weekDays",(()=>({$el:"tr"}))),C=t("weekDay",(()=>({$el:"th",for:["day","$month.weeks.0"],attrs:{"aria-label":'$fns.format($day, "dddd")'}}))),D=t("week",(()=>({$el:"tr",for:["week","$month.weeks"]}))),B=t("dayCell",(()=>({$el:"td",for:["day","$week"],attrs:{key:'$: "day" + $fns.format($day, "D")',onClick:"$handlers.setDate($day)",onKeydown:"$handlers.keyDown",onMouseenter:"$handlers.mouseEnter($day)",onMouseleave:"$handlers.mouseLeave",onBlur:"$handlers._blurOut(day)",tabindex:'$fns.sameDay($day) && "0" || "-1"',"data-is-extra":"$fns.notInMonth($month.monthDay, $day)","data-disabled":"$fns.isDisabled($day)","aria-selected":"$fns.isSelected($day)","aria-label":'$fns.format($day, "long")'}}))),M=t("day","div"),Y=t("openButton",(()=>({$el:"div",attrs:{style:"$visibilityStyles",id:'$id + "_listbox_button"',type:"div",role:"button",onClick:"$handlers.open",onKeydown:"$handlers.openKeydown",tabIndex:'$pickerOnly && "-1" || "0"',"data-disabled":"$disabled","aria-disabled":"$disabled","aria-label":'$value && ($ui.changeDate.value + ", " + $inputText) || $ui.chooseDate.value',"aria-haspopup":"true","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined'}}))),g=t("years",(()=>({if:'$panel === "year"',$el:"ul",attrs:{id:'$id + "_years"'}}))),K=t("year",(()=>({for:["year","$years"],$el:"li",attrs:{key:'$: "year" + $fns.format($year, "YYYY")',onClick:"$handlers.setDate($year)",onKeydown:"$handlers.keyDown",onMouseenter:"$handlers.mouseEnter($year)",onMouseleave:"$handlers.mouseLeave",onBlur:"$handlers._blurOut(year)",tabindex:'$fns.sameYear($year) && "0" || "-1"',"aria-selected":"$fns.isSelected($year)","data-disabled":"$fns.isDisabledYear($year)"}}))),O=t("months",(()=>({if:'$panel === "month"',$el:"ul"}))),I=t("month",(()=>({$el:"li",for:["month","$months"],attrs:{key:'$: "month" + $fns.format($month, "M")',onClick:"$handlers.setDate($month)",onKeydown:"$handlers.keyDown",onMouseenter:"$handlers.mouseEnter($month)",onMouseleave:"$handlers.mouseLeave",onBlur:"$handlers._blurOut(month)",tabindex:'$fns.sameMonth($month) && "0" || "-1"',"aria-selected":"$fns.isSelected($month)","data-disabled":"$fns.isDisabledMonth($month)"}}))),P=t("panelHeader",(()=>({$el:"header",attrs:{"aria-live":"polite"}}))),T=t("yearsHeader",(()=>({$el:"div",if:'$panel === "year"'}))),H=t("monthsHeader",(()=>({$el:"div",if:'$panel === "month"'}))),L=t("daysHeader",(()=>({$el:"div",if:'$panel === "day"'}))),S=t("timeHeader",(()=>({$el:"div",if:'$panel === "time"'}))),E=t("yearButton",(()=>({$el:"button",attrs:{type:"button",id:"$id + _year_button",onClick:"$handlers.jumpTo(year)"},children:"$fns.format($renderedDate, $yearFormat)"}))),F=t("monthButton",(()=>({$el:"button",attrs:{type:"button",id:"$id + _month_button",onClick:"$handlers.jumpTo(month)"},children:"$fns.format($renderedDate, $monthButtonFormat)"}))),j=t("dayButton",(()=>({$el:"button",attrs:{type:"button",id:"$id + _day_button",onClick:"$handlers.jumpTo(day)",tabindex:"2"},children:"$fns.format($renderedDate, $dayButtonFormat)"}))),W=t("removeSelection",(()=>({$el:"button",if:"$clearable && $_value",attrs:{id:'$id + "_remove_selection"',type:"button",onClick:"$handlers.clear","aria-controls":"$id"}}))),q=t("time",(()=>({$el:"div",if:'$panel === "time"'}))),z=t("timeInput",(()=>({$el:"input",attrs:{type:"time",value:"$localTime",onInput:"$handlers.localTime",onKeydown:"$handlers.keyDown",spellcheck:"false",onBlur:"$handlers._blurOut(time)"}}))),A=t("panelClose",(()=>({$el:"button",if:"$showPanelClose && ($inline === undefined || $inline === false)",attrs:{type:"button",class:"$classes.panelClose",onClick:"$handlers.closePanel",tabindex:-1,"aria-label":"$ui.close.value"}}))),{overlayPlaceholder:G,overlayLiteral:J,overlayChar:N,overlayEnum:Q,overlay:R,overlayParts:U,overlayInner:V}=/* #__PURE__ */n(t),X=t("panel","div");export{k as calendar,w as calendarHeader,x as calendarWeeks,t as createSection,M as day,j as dayButton,B as dayCell,L as daysHeader,u as help,d as icon,r as inner,h as input,$ as label,p as message,y as messages,I as month,F as monthButton,O as months,H as monthsHeader,b as next,f as nextLabel,Y as openButton,o as outer,R as overlay,N as overlayChar,Q as overlayEnum,V as overlayInner,J as overlayLiteral,U as overlayParts,G as overlayPlaceholder,X as panel,A as panelClose,P as panelHeader,m as panelWrapper,s as prefix,c as prev,v as prevLabel,W as removeSelection,i as suffix,q as time,S as timeHeader,z as timeInput,D as week,C as weekDay,_ as weekDays,l as wrapper,K as year,E as yearButton,g as years,T as yearsHeader};
+import{createSectionFactory as e,createBaseSections as a,createMaskOverlaySections as n}from"../index.mjs";const t=/* #__PURE__ */e("dp"),{outer:l,wrapper:o,inner:r,icon:d,label:$,prefix:s,suffix:i,help:y,messages:u,message:p}=/* #__PURE__ */a(t),h=t("input",(()=>({$el:"input",bind:"$attrs",attrs:{name:"$node.name",id:"$id",onKeydown:"$handlers.inputKeydown",value:"$inputText",onInput:"$handlers.dateInput",onClick:"$pickerOnly && $handlers.open",onBlur:"$handlers._blur",onFocus:"$handlers.focus",readonly:"$pickerOnly || $expanded",disabled:"$disabled"}}))),m=t("panelWrapper",(()=>({$el:"div",if:"$expanded",attrs:{id:'$id + "_popover"',role:"dialog",onBlur:"$handlers._blurOut()",tabindex:"-1",popover:"$popover","aria-modal":"true","aria-label":"Choose date","data-panel":"$panel",style:{if:"$usePopover",then:{margin:0,top:'$popoverCoordinates.y + "px"',left:'$popoverCoordinates.x + "px"',width:'$popoverCoordinates.width + "px"'}}}}))),b=t("next",(()=>({$el:"button",if:"$showPagination",attrs:{id:"$id + _next_button",type:"button",onClick:"$handlers.next"}}))),c=t("nextLabel","span"),f=t("prev",(()=>({$el:"button",if:"$showPagination",attrs:{id:"$id + _prev_button",type:"button",onClick:"$handlers.prev"}}))),v=t("prevLabel","span"),k=t("calendar",(()=>({if:'$panel === "day"',$el:"table",for:["month","$calendar"],attrs:{key:'$fns.format($month.monthDay, "YYYY-MM")'}}))),x=t("calendarWeeks",(()=>({$el:"tbody"}))),w=t("calendarHeader",(()=>({$el:"thead"}))),_=t("weekDays",(()=>({$el:"tr"}))),C=t("weekDay",(()=>({$el:"th",for:["day","$month.weeks.0"],attrs:{"aria-label":'$fns.format($day.0, "dddd")'}}))),D=t("week",(()=>({$el:"tr",for:["week","weekIndex","$month.weeks"]}))),B=t("dayCell",(()=>({$el:"td",for:["day","dayIndex","$week"],attrs:{key:"$day.0",onClick:"$handlers.setDate($day.0)",onKeydown:"$handlers.keyDown",onMouseenter:"$handlers.mouseEnter($day.0)",onMouseleave:"$handlers.mouseLeave",onBlur:"$handlers._blurOut(day)",tabindex:'$fns.sameDay($day.0) && "0" || "-1"',"data-is-extra":"$fns.notInMonth($month.monthDay, $day.0)","data-disabled":"$fns.isDisabled($day.0)","aria-selected":"$selectedWeek === $weekIndex && $selectedDay === $dayIndex","aria-label":"$day.2"}}))),M=t("day","div"),I=t("openButton",(()=>({$el:"div",attrs:{style:"$visibilityStyles",id:'$id + "_listbox_button"',type:"div",role:"button",onClick:"$handlers.open",onKeydown:"$handlers.openKeydown",tabIndex:'$pickerOnly && "-1" || "0"',"data-disabled":"$disabled","aria-disabled":"$disabled","aria-label":'$value && ($ui.changeDate.value + ", " + $inputText) || $ui.chooseDate.value',"aria-haspopup":"true","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined'}}))),Y=t("years",(()=>({if:'$panel === "year"',$el:"ul",attrs:{id:'$id + "_years"'}}))),K=t("year",(()=>({for:["year","$years"],$el:"li",attrs:{key:'$: "year" + $fns.format($year, "YYYY")',onClick:"$handlers.setDate($year)",onKeydown:"$handlers.keyDown",onMouseenter:"$handlers.mouseEnter($year)",onMouseleave:"$handlers.mouseLeave",onBlur:"$handlers._blurOut(year)",tabindex:'$fns.sameYear($year) && "0" || "-1"',"aria-selected":"$selectedYear === $year","data-disabled":"$fns.isDisabledYear($year)","data-test":"$year","aria-label":"$fns.format($year, $yearFormat)"}}))),O=t("months",(()=>({if:'$panel === "month"',$el:"ul"}))),g=t("month",(()=>({$el:"li",for:["month","index","$months"],attrs:{key:"$month",onClick:"$handlers.setDate($month)",onKeydown:"$handlers.keyDown",onMouseenter:"$handlers.mouseEnter($month)",onMouseleave:"$handlers.mouseLeave",onBlur:"$handlers._blurOut(month)",tabindex:'$fns.sameMonth($month) && "0" || "-1"',"aria-selected":"$selectedMonth === $month","data-disabled":"$fns.isDisabledMonth($month)"}}))),P=t("panelHeader",(()=>({$el:"header",attrs:{"aria-live":"polite"}}))),T=t("yearsHeader",(()=>({$el:"div",if:'$panel === "year"'}))),H=t("monthsHeader",(()=>({$el:"div",if:'$panel === "month"'}))),L=t("daysHeader",(()=>({$el:"div",if:'$panel === "day"'}))),F=t("timeHeader",(()=>({$el:"div",if:'$panel === "time"'}))),E=t("yearButton",(()=>({$el:"button",attrs:{type:"button",id:"$id + _year_button",onClick:"$handlers.jumpTo(year)"},children:"$fns.format($renderedDate, $yearFormat)"}))),j=t("monthButton",(()=>({$el:"button",attrs:{type:"button",id:"$id + _month_button",onClick:"$handlers.jumpTo(month)"},children:"$fns.format($renderedDate, $monthButtonFormat)"}))),W=t("dayButton",(()=>({$el:"button",attrs:{type:"button",id:"$id + _day_button",onClick:"$handlers.jumpTo(day)",tabindex:"2"},children:"$fns.format($renderedDate, $dayButtonFormat)"}))),S=t("removeSelection",(()=>({$el:"button",if:"$clearable && $_value",attrs:{id:'$id + "_remove_selection"',type:"button",onClick:"$handlers.clear","aria-controls":"$id"}}))),q=t("time",(()=>({$el:"div",if:'$panel === "time"'}))),z=t("timeInput",(()=>({$el:"input",attrs:{type:"time",value:"$localTime",onInput:"$handlers.localTime",onKeydown:"$handlers.keyDown",spellcheck:"false",onBlur:"$handlers._blurOut(time)"}}))),A=t("panelClose",(()=>({$el:"button",if:"$showPanelClose && ($inline === undefined || $inline === false)",attrs:{type:"button",class:"$classes.panelClose",onClick:"$handlers.closePanel",tabindex:-1,"aria-label":"$ui.close.value"}}))),{overlayPlaceholder:G,overlayLiteral:J,overlayChar:N,overlayEnum:Q,overlay:R,overlayParts:U,overlayInner:V}=/* #__PURE__ */n(t),X=t("panel","div");export{k as calendar,w as calendarHeader,x as calendarWeeks,t as createSection,M as day,W as dayButton,B as dayCell,L as daysHeader,y as help,d as icon,r as inner,h as input,$ as label,p as message,u as messages,g as month,j as monthButton,O as months,H as monthsHeader,b as next,c as nextLabel,I as openButton,l as outer,R as overlay,N as overlayChar,Q as overlayEnum,V as overlayInner,J as overlayLiteral,U as overlayParts,G as overlayPlaceholder,X as panel,A as panelClose,P as panelHeader,m as panelWrapper,s as prefix,f as prev,v as prevLabel,S as removeSelection,i as suffix,q as time,F as timeHeader,z as timeInput,D as week,C as weekDay,_ as weekDays,o as wrapper,K as year,E as yearButton,Y as years,T as yearsHeader};