@formkit/pro 1.0.0-alpha.90 → 1.0.0-alpha.90-98f8f67

package/mask/index.mjs

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

package/mask/mask.ts

@@ -11,8 +11,16 @@ import {
   message,
   icon,
   maskInput,
+  overlay,
+  overlayLiteral,
+  overlayChar,
+  overlayEnum,
+  overlayParts,
+  overlayPlaceholder,
+  overlayInner,
 } from '../sections/maskSections'
 import useMask from '../features/mask'
+import maskOverlay from '../features/maskOverlay'
 
 /**
  * Input definition for a mask input.
@@ -25,10 +33,27 @@ export const mask: FormKitProInput = {
   schema: outer(
     wrapper(
       label('$label'),
-      inner(icon('prefix'), prefix(), maskInput(), suffix(), icon('suffix'))
+      inner(
+        icon('prefix'),
+        prefix(),
+        overlay(
+          overlayInner(
+            overlayParts(
+              overlayPlaceholder('$part.value'),
+              overlayLiteral('$part.value'),
+              overlayChar('$part.value'),
+              overlayEnum('$part.value')
+            )
+          )
+        ),
+        maskInput(),
+        suffix(),
+        icon('suffix')
+      )
     ),
     help('$help'),
-    messages(message('$message.value'))
+    messages(message('$message.value')),
+    '$_overlayStyles'
   ),
   /**
    * The type of node, can be a list, group, or input.
@@ -47,6 +72,7 @@ export const mask: FormKitProInput = {
     'prefix',
     'suffix',
     'reverse',
+    'overlay',
   ],
 
   /**
@@ -57,5 +83,5 @@ export const mask: FormKitProInput = {
   /**
    * Additional features that make this input work.
    */
-  features: [useMask],
+  features: [maskOverlay, useMask],
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formkit/pro",
-  "version": "1.0.0-alpha.90",
+  "version": "1.0.0-alpha.90-98f8f67",
   "description": "FormKit Pro — Form inputs and tools for high quality forms.",
   "main": "index.cjs",
   "module": "index.mjs",
@@ -37,7 +37,7 @@
     "vue"
   ],
   "dependencies": {
-    "@formkit/inputs": "latest"
+    "@formkit/inputs": "^1.0.0-beta.15"
   },
   "type": "module"
 }

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",attrs:{id:"$id",type:"range",max:"$max",name:"$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 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:"$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};