@formkit/pro 0.123.6 → 0.124.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -7
- package/autocomplete/index.mjs +1 -1
- package/currency/currency.ts +49 -0
- package/currency/index.mjs +1 -0
- package/dropdown/index.mjs +1 -1
- package/index.cjs +1 -1
- package/index.mjs +1 -1
- package/package.json +1 -1
- package/rating/index.mjs +1 -1
- package/taglist/index.mjs +1 -1
- package/taglist/taglist.ts +1 -1
- package/unit/index.mjs +1 -1
package/README.md
CHANGED
|
@@ -6,6 +6,7 @@ FormKit Pro is a first party library of professional grade "synthetic" inputs fo
|
|
|
6
6
|
- Datepicker
|
|
7
7
|
- Dropdown
|
|
8
8
|
- Colorpicker
|
|
9
|
+
- Currency
|
|
9
10
|
- Mask
|
|
10
11
|
- Rating
|
|
11
12
|
- Repeater
|
|
@@ -13,8 +14,6 @@ FormKit Pro is a first party library of professional grade "synthetic" inputs fo
|
|
|
13
14
|
- Taglist
|
|
14
15
|
- Toggle
|
|
15
16
|
- Transfer List
|
|
16
|
-
- Slider
|
|
17
|
-
- Combobox
|
|
18
17
|
|
|
19
18
|
## Usage
|
|
20
19
|
|
|
@@ -36,14 +35,17 @@ import { createProPlugin, autocomplete } from '@formkit/pro'
|
|
|
36
35
|
import App from 'App.vue'
|
|
37
36
|
|
|
38
37
|
const pro = createProPlugin('{your-project-key}', {
|
|
39
|
-
autocomplete
|
|
38
|
+
autocomplete,
|
|
40
39
|
})
|
|
41
40
|
|
|
42
41
|
const app = createApp(App)
|
|
43
42
|
|
|
44
|
-
app.use(
|
|
45
|
-
|
|
46
|
-
|
|
43
|
+
app.use(
|
|
44
|
+
plugin,
|
|
45
|
+
defaultConfig({
|
|
46
|
+
plugins: [pro],
|
|
47
|
+
})
|
|
48
|
+
)
|
|
47
49
|
```
|
|
48
50
|
|
|
49
51
|
## License
|
|
@@ -51,4 +53,3 @@ app.use(plugin, defaultConfig({
|
|
|
51
53
|
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).
|
|
52
54
|
|
|
53
55
|
By using this software, you agree to the abide by the [included license](./LICENSE).
|
|
54
|
-
|
package/autocomplete/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{$if as e,$attrs as i,createSectionFactory as t,createBaseSections as o}from"../index.mjs";import{icon as n}from"@formkit/inputs";const a=(e,i)=>()=>n(e,i),l=t("ac"),{outer:d,wrapper:s,inner:$,icon:r,label:p,prefix:
|
|
1
|
+
import{$if as e,$attrs as i,createSectionFactory as t,createBaseSections as o}from"../index.mjs";import{icon as n}from"@formkit/inputs";const a=(e,i)=>()=>n(e,i),l=t("ac"),{outer:d,wrapper:s,inner:$,icon:r,label:p,prefix:c,suffix:u,help:v,messages:b,message:m}=o(l),h=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 || undefined",name:"$node.name",placeholder:"$state.loading && $ui.isLoading.value || $placeholder || undefined",tabindex:'$disabled && "-1" || 0',role:"combobox",autocomplete:'$attrs.autocomplete || "off"',autocapitalize:"none",readonly:"$attrs.readonly || $state.loading || $multiple && $max && $value && $value.length >= $max && $hasHighlightedRange !== true || undefined","data-selection-appearance":"$selectionAppearance",disabled:"$disabled || $disabledInternally || undefined",onTouchmove:"$handlers.touchmove",onTouchstart:"$handlers.touchmove",onTouchend:"$handlers.touchend","aria-autocomplete":"list","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined',"aria-describedBy":"$describedBy","aria-activedescendant":"$expanded && $activeDescendant || undefined"}}))),x=l("listboxButton",(()=>({$el:"div",attrs:{style:"$visibilityStyles",id:'$id + "_listbox_button"',role:"button","aria-label":"$expanded && $ui.close.value || $ui.open.value",onClick:"$handlers.toggleListbox",onKeydown:"$handlers.toggleListboxKeydown",tabindex:'$disabled && "-1" || 0',"aria-haspopup":"true","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined',"aria-disabled":"$disabled || $state.loading || undefined","data-disabled":"$disabled || $disabledInternally || undefined"}}))),f=l("selectionWrapper",(()=>({for:["option","index","$selections"],$el:"div",attrs:{id:'$id + "_selection_wrapper_" + $index',key:"$option.value","data-value":"$option.value",tabindex:'$disabled && "-1" || 1',onKeydown:"$handlers.selectionKeydown && $handlers.selectionKeydown($multiple && $option || undefined)",onClick:"$handlers.selectionClick && $handlers.selectionClick($multiple && $option || undefined)",onFocus:"$handlers.selectionFocus && $handlers.selectionFocus($multiple && $option || undefined)",onBlur:"$handlers.selectionBlur && $handlers.selectionBlur($multiple && $option || undefined)","data-is-selection":"true","data-active-selection":"$fns.isActiveSelection && $fns.isActiveSelection($activeSelectionValue, $option)"}}))),g=l("selection",(()=>({$el:"div",attrs:{id:'$id + "_selection_" + $index'}}))),y=l("selections",(()=>({$el:"div",attrs:{"aria-live":"polite",id:'$id + "_selections"'}}))),_=l("removeSelection",(()=>({$el:"button",attrs:{id:'$selectionAppearance === "option" && $multiple && $id + "_remove_selection_" + $index || $id + "_remove_selection"',tabindex:"0",title:"$ui.remove.value",type:"button","aria-label":"$ui.remove.value",onClick:"$handlers.removeSelection && $handlers.removeSelection($multiple && $option || undefined)",onTouchend:"$handlers.removeSelection && $handlers.removeSelection($multiple && $option || undefined)","aria-controls":"$id"}}))),k=l("optionLoading","span"),S=l("option",(()=>({$el:"div",if:"$value !== undefined"}))),w=function(t){const o=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"}}))),n=t("listbox",(()=>({$el:"ul",if:"$expanded || $setForceExpanded",attrs:{style:"$listboxStyles",id:'$id + "_listbox"',role:"listbox","aria-activedescendant":"$activeDescendant","aria-labelledby":'$id + "_label"'}}))),l=t("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=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"}}))),s=t("loadMoreInner","span"),$=t("emptyMessage",(()=>({$el:"li",if:"$showEmptyMessage && $state.loading !== true",attrs:{id:'$id + "_empty_message"',key:"$emptyMessage",role:"presentation"}}))),r=t("emptyMessageInner","span"),p=t("option",(()=>({$el:"div",attrs:{"data-checked":"$fns.isSelected($option)"}}))),c=t("listitems",(()=>({$el:null,if:"$options.length",for:["option","index","$option.options || $options"]}))),u=t("innerListitems",(()=>({$el:null,for:["option","innerIndex","$option.options"]}))),v=t("listitemGroup",(()=>({$el:"li",attrs:{"aria-label":"$option.group",role:"group",onClick:"$handlers.listitemGroupClick",tabindex:"-1"}}))),b=t("groupLabel","span"),m=t("groupList",(()=>({$el:"ul",attrs:{role:"group"}})));return()=>o(n($(r("$emptyMessage")),c(e("$option.group",v(b("$option.group"),m(u(i((()=>({id:'$id + "_listitem_" + $index + "_" + $innerIndex'})),l(e("$fns.isSelected($option)",a("selected")),p("$option.label")))))),l(e("$fns.isSelected($option)",a("selected")),p("$option.label")))),d(e("$state.loading && $optionLoadingCounter === 0 || $state.hasNextPage",s(e("$state.loading",a("loader")),"$state.loading && $ui.isLoading.value || $ui.loadMore.value")))))}(l);export{l as createSection,v as help,r as icon,$ as inner,h as input,p as label,w as listbox,x as listboxButton,m as message,b as messages,S as option,k as optionLoading,d as outer,c as prefix,_ as removeSelection,g as selection,f as selectionWrapper,y as selections,u as suffix,s as wrapper};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { FormKitProInput } from '@formkit/pro'
|
|
2
|
+
import {
|
|
3
|
+
outer,
|
|
4
|
+
inner,
|
|
5
|
+
input,
|
|
6
|
+
wrapper,
|
|
7
|
+
label,
|
|
8
|
+
help,
|
|
9
|
+
messages,
|
|
10
|
+
message,
|
|
11
|
+
prefix,
|
|
12
|
+
suffix,
|
|
13
|
+
icon,
|
|
14
|
+
} from '../sections/currencySections'
|
|
15
|
+
import currencyFeatures from '../features/currency'
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Input definition for a toggle group input.
|
|
19
|
+
* @public
|
|
20
|
+
*/
|
|
21
|
+
export const currency: FormKitProInput = {
|
|
22
|
+
/**
|
|
23
|
+
* The actual schema of the input, or a function that returns the schema.
|
|
24
|
+
*/
|
|
25
|
+
schema: outer(
|
|
26
|
+
wrapper(
|
|
27
|
+
label('$label'),
|
|
28
|
+
inner(icon('prefix'), prefix(), input(), suffix(), icon('suffix'))
|
|
29
|
+
),
|
|
30
|
+
help('$help'),
|
|
31
|
+
messages(message('$message.value'))
|
|
32
|
+
),
|
|
33
|
+
/**
|
|
34
|
+
* The type of node, can be a list, group, or input.
|
|
35
|
+
*/
|
|
36
|
+
type: 'input',
|
|
37
|
+
|
|
38
|
+
family: 'text',
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* An array of extra props to accept for this input.
|
|
42
|
+
*/
|
|
43
|
+
props: ['options'],
|
|
44
|
+
|
|
45
|
+
/**
|
|
46
|
+
* Additional features that make this input work.
|
|
47
|
+
*/
|
|
48
|
+
features: [currencyFeatures],
|
|
49
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{createSectionFactory as e,createBaseSections as a}from"../index.mjs";const n=e("cr"),{outer:l,inner:t,wrapper:d,label:o,prefix:r,suffix:i,help:u,messages:s,message:p,icon:$}=a(n),c=n("input",(()=>({$el:"input",bind:"$attrs",attrs:{name:"$node.name",type:"tel",autocomplete:"$attrs.autocomplete || off",id:"$id",onChange:"$handlers.handleInput",onInput:"$handlers.handleInput",onKeydown:"$handlers.handleKeyDown",onBeforeinput:"$handlers.handleBeforeInput",readonly:"$readonly",disabled:"$disabled","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,$ as icon,t as inner,c as input,o as label,p as message,s as messages,l as outer,r as prefix,i as suffix,d as wrapper};
|
package/dropdown/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{$if as e,$attrs as i,createSectionFactory as t,createBaseSections as n}from"../index.mjs";import{icon as a}from"@formkit/inputs";const o=(e,i)=>()=>a(e,i),l=t("dd"),{outer:d,wrapper:s,inner:r,icon:$,label:p,prefix:c,suffix:u,help:g,messages:
|
|
1
|
+
import{$if as e,$attrs as i,createSectionFactory as t,createBaseSections as n}from"../index.mjs";import{icon as a}from"@formkit/inputs";const o=(e,i)=>()=>a(e,i),l=t("dd"),{outer:d,wrapper:s,inner:r,icon:$,label:p,prefix:c,suffix:u,help:g,messages:v,message:b}=n(l),f=l("selector",(()=>({$el:"button",bind:"$attrs",attrs:{id:"$id",type:"button",onClick:"$handlers.click",onBlur:"$handlers.blur",onFocus:"$handlers.focus",onKeydown:"$handlers.keydown",tabindex:"0",name:"$node.name",disabled:"$disabled || $disabledInternally || undefined","aria-haspopup":"listbox","aria-expanded":"$expanded","aria-controls":'$expanded && $id + "_listbox" || undefined',"aria-describedBy":"$describedBy"}}))),x=l("selectionWrapper",(()=>({if:"$option || $state.loading",$el:"div"}))),h=l("selection",(()=>({$el:"div"}))),m=l("placeholder",(()=>({$el:"div",attrs:{key:"placeholder","data-is-placeholder":"true","aria-hidden":'$placeholder === undefined && "true" || undefined',style:{opacity:'$placeholder === undefined && "0" || undefined',"pointer-events":'$placeholder === undefined && "none" || undefined'}}}))),_=l("optionLoading","span"),y=l("option",(()=>({$el:"div"}))),k=l("removeSelection",(()=>({$el:"div",attrs:{id:'$selectionAppearance === "tags" && $id + "_remove_selection_" + $index || $id + "_remove_selection"',tabindex:"-1",type:"button",key:"$value","aria-label":"$ui.remove.value",onClick:'$handlers.removeSelection && $handlers.removeSelection($selectionAppearance === "tags" && $option || undefined)',onTouchstart:'$handlers.removeSelection && $handlers.removeSelection($selectionAppearance === "tags" && $option || undefined)',"aria-controls":"$id"}}))),S=l("selectionsWrapper",(()=>({$el:"div",attrs:{id:'$id + "_selections_wrapper"'}}))),w=l("selections",(()=>({$el:"div",attrs:{"aria-live":"polite","aria-hidden":'$lastVisibleIndex && "true" || undefined',"data-test":"$lastVisibleIndex",id:'$id + "_selections"'}}))),I=l("truncationCount",(()=>({$el:"div",attrs:{id:'$id + "_truncation_count"'}}))),L=l("selectionsItem",(()=>({$el:"div",for:["selectionLabel","index","$formattedSelections"],attrs:{id:'$id + "_selections_item_" + $index',"data-check":"$selectionLabel",key:"$selectionLabel","aria-hidden":'$lastVisibleIndex && $index > $lastVisibleIndex && "true" || undefined',style:{visibility:'$lastVisibleIndex && $index > $lastVisibleIndex && "hidden" || undefined'}},children:'$selectionLabel || ""'}))),C=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)",onKeydown:"$handlers.selectorTagKeydownHandler($option)",onFocus:"$handlers.tagFocus && $handlers.tagFocus($option)",onBlur:"$handlers.tagBlur && $handlers.tagBlur($option)","data-is-tag":"true","data-active-selection":"$fns.isActiveSelection && $fns.isActiveSelection($activeSelectionValue, $option)"}}))),M=l("tag",(()=>({$el:"div",attrs:{id:'$id + "_tag_" + $index',role:"button",tabindex:"-1"}}))),V=l("tagLabel",(()=>({$el:"span"}))),A=l("tagsWrapper",(()=>({$el:"span",attrs:{id:'$id + "_tags_wrapper"',"aria-live":"polite"}}))),B=l("tags",(()=>({$el:"span",attrs:{id:'$id + "_selections"'}}))),W=l("tagLoading","span"),F=function(t){const n=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"}}))),a=t("listbox",(()=>({$el:"ul",if:"$expanded || $setForceExpanded",attrs:{style:"$listboxStyles",id:'$id + "_listbox"',role:"listbox","aria-activedescendant":"$activeDescendant","aria-labelledby":'$id + "_label"'}}))),l=t("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=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"}}))),s=t("loadMoreInner","span"),r=t("emptyMessage",(()=>({$el:"li",if:"$showEmptyMessage && $state.loading !== true",attrs:{id:'$id + "_empty_message"',key:"$emptyMessage",role:"presentation"}}))),$=t("emptyMessageInner","span"),p=t("option",(()=>({$el:"div",attrs:{"data-checked":"$fns.isSelected($option)"}}))),c=t("listitems",(()=>({$el:null,if:"$options.length",for:["option","index","$option.options || $options"]}))),u=t("innerListitems",(()=>({$el:null,for:["option","innerIndex","$option.options"]}))),g=t("listitemGroup",(()=>({$el:"li",attrs:{"aria-label":"$option.group",role:"group",onClick:"$handlers.listitemGroupClick",tabindex:"-1"}}))),v=t("groupLabel","span"),b=t("groupList",(()=>({$el:"ul",attrs:{role:"group"}})));return()=>n(a(r($("$emptyMessage")),c(e("$option.group",g(v("$option.group"),b(u(i((()=>({id:'$id + "_listitem_" + $index + "_" + $innerIndex'})),l(e("$fns.isSelected($option)",o("selected")),p("$option.label")))))),l(e("$fns.isSelected($option)",o("selected")),p("$option.label")))),d(e("$state.loading && $optionLoadingCounter === 0 || $state.hasNextPage",s(e("$state.loading",o("loader")),"$state.loading && $ui.isLoading.value || $ui.loadMore.value")))))}(l);export{l as createSection,g as help,$ as icon,r as inner,p as label,F as listbox,b as message,v as messages,y as option,_ as optionLoading,d as outer,m as placeholder,c as prefix,k as removeSelection,h as selection,x as selectionWrapper,f as selector,w as selectorSelections,L as selectorSelectionsItem,S as selectorSelectionsWrapper,u as suffix,M as tag,V as tagLabel,W as tagLoading,C as tagWrapper,B as tags,A as tagsWrapper,I as truncationCount,s as wrapper};
|