From 900cbae3e3c57e1a583bfe13048318f96eadfa7c Mon Sep 17 00:00:00 2001 From: Chris Adams Date: Wed, 28 Feb 2024 15:42:27 +0100 Subject: [PATCH 01/83] add: initial docs for currency and unit inputs --- .examples/currency/currency-default.vue | 17 ++ .examples/currency/currency-props-explore.vue | 27 ++++ .examples/currency/currency-simple-locale.vue | 47 ++++++ .examples/unit/unit-default.vue | 25 +++ .examples/unit/unit-type-switcher.vue | 38 +++++ inputs/currency.md | 146 ++++++++++++++++++ inputs/unit.md | 144 +++++++++++++++++ 7 files changed, 444 insertions(+) create mode 100644 .examples/currency/currency-default.vue create mode 100644 .examples/currency/currency-props-explore.vue create mode 100644 .examples/currency/currency-simple-locale.vue create mode 100644 .examples/unit/unit-default.vue create mode 100644 .examples/unit/unit-type-switcher.vue create mode 100644 inputs/currency.md create mode 100644 inputs/unit.md diff --git a/.examples/currency/currency-default.vue b/.examples/currency/currency-default.vue new file mode 100644 index 00000000..80890c30 --- /dev/null +++ b/.examples/currency/currency-default.vue @@ -0,0 +1,17 @@ + + + diff --git a/.examples/currency/currency-props-explore.vue b/.examples/currency/currency-props-explore.vue new file mode 100644 index 00000000..59fdac0b --- /dev/null +++ b/.examples/currency/currency-props-explore.vue @@ -0,0 +1,27 @@ + + + diff --git a/.examples/currency/currency-simple-locale.vue b/.examples/currency/currency-simple-locale.vue new file mode 100644 index 00000000..70b238b5 --- /dev/null +++ b/.examples/currency/currency-simple-locale.vue @@ -0,0 +1,47 @@ + + + diff --git a/.examples/unit/unit-default.vue b/.examples/unit/unit-default.vue new file mode 100644 index 00000000..bb1de13e --- /dev/null +++ b/.examples/unit/unit-default.vue @@ -0,0 +1,25 @@ + + + diff --git a/.examples/unit/unit-type-switcher.vue b/.examples/unit/unit-type-switcher.vue new file mode 100644 index 00000000..0286715e --- /dev/null +++ b/.examples/unit/unit-type-switcher.vue @@ -0,0 +1,38 @@ + + + diff --git a/inputs/currency.md b/inputs/currency.md new file mode 100644 index 00000000..aad212a1 --- /dev/null +++ b/inputs/currency.md @@ -0,0 +1,146 @@ +--- +title: Currency +description: The currency input is used to create locale/currency specific parsed content +--- + +::InputPageHero +--- +type: "Currency" +--- +:: + +:PageToc + +:ProInstallSnippet + +## Currency Input + +The currency input is used to create locale/currency specific parsed content + +::Example +--- +name: "Currency input defaults" +file: "_content/_examples/currency/currency-default.vue" +--- +:: + +## Props + +### Currency + +The `currency` prop is the three letter currency code and sets the proper formatting for the specified currency and also sets default decimal places for that currency. For a full list of supported currency types check: https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes + +### Locale + +By default the locale will use what you have set in your `formkit.config.ts` as the desired locale. However you can override this with the `displayLocale` prop. For example, `en-US`, `de-DE`, `en-IN`, `zh-CN`, etc, etc. + + +::Example +--- +name: "Currency and Locale settings" +file: "_content/_examples/currency/currency-simple-locale.vue" +--- +:: + +## Currency Additional Props + +### Decimals + +By default the decimals will display when the value contains the currency/locale decimal separator and will automatically know how many decimal places to display for the given currency, however you can override this. By setting `decimals` to `false` or `0`, the value will not allow decimals. + +You can also choose to set a minimum number of decimals with the `minDecimals` prop. For example, you always want to show 2 decimal places you would set `minDecimals="2"`. + +### Minimum and Maximum Values + +Similar to a number input, you can set a `min` and `max` value. + +### Step + +Again, similar to a number input you can use the up/down keys to step the value. By default the step is `1` but you can override that with this prop. + +### Value Formatting + +Default value output is the value as a string to reduce issues with large number enumertation issues. However you can format the value as a string and include the currency symbol, grouping, decimal, etc as it is shown in the input. + +::Example +--- +name: "Currecy Prop Exploration" +file: "_content/_examples/currency/currency-props-explore.vue" +--- +:: + +## Props & Attributes + +::ReferenceTable +--- +input: "currency" +data: [ + { + prop: "currency", + type: "string", + default: "USD", + description: "Set the specified currency to use for this input" + }, + { + prop: "displayLocale", + type: "string", + default: "en-US", + description: "Set the desired display locale to use for this input" + }, + { + prop: "decimals", + type: "boolean|number", + default: "null", + description: "Choose to either completely disallow decimals or override the maximum number of decimals for the input" + }, + { + prop: "minDecimals", + type: "number", + default: "null", + description: "Choose to show a minimum number of decimals should your input require this" + }, + { + prop: "min", + type: "number", + default: "null", + description: "Minimum numeric value allowed. If zero or above, negatives will not be allowed" + }, + { + prop: "max", + type: "number", + default: "null", + description: "Maximum numeric value allowed for this input" + }, + { + prop: "step", + type: "number", + default: "1", + description: "When using the up/down keys, how much to modify the current value." + }, + { + prop: "valueFormat", + type: "string", + default: "number", + description: "Choose between number and string whether you want a numeric value or a parsed string value" + }, +] +--- +:: + + +## Sections + +:SectionKeysIntro + +### Currency input diagram + +::FormKitInputDiagram +--- +prefix-icon-content: "" +suffix-icon-content: "" +label-content: "Currency Input" +input-content: "$1,234.56" +help-content: "How much do you want to donate?" +message-content: "That's a lot of money" +--- +:: diff --git a/inputs/unit.md b/inputs/unit.md new file mode 100644 index 00000000..3ae6b391 --- /dev/null +++ b/inputs/unit.md @@ -0,0 +1,144 @@ +--- +title: Unit +description: The unit input is used to create locale/currency specific parsed content for percentages, temperatures and measurements +--- + +::InputPageHero +--- +type: "Unit" +--- +:: + +:PageToc + +:ProInstallSnippet + +## Unit Input + +The unit input is used to create locale/currency specific parsed content for percentages, temperatures and measurements + +::Example +--- +name: "Unit input defaults" +file: "_content/_examples/unit/unit-default.vue" +--- +:: + +## Props + +### Unit + +The `unit` prop is the type of unit you want to display from percentages, temperatures, measurements, etc. A full list of allowed unit types are listed below: + +::ColumnList +--- +listItems: ['acre', 'bit', 'byte', 'celsius', 'centimeter', 'day', 'degree', 'fahrenheit', 'fluid-ounce', 'foot', 'gallon', 'gigabit', 'gigabyte', 'gram', 'hectare', 'hour', 'inch', 'kilobit', 'kilobyte', 'kilogram', 'kilometer', 'liter', 'megabit', 'megabyte', 'meter', 'microsecond', 'mile', 'mile-scandinavian', 'milliliter', 'millimeter', 'millisecond', 'minute', 'month', 'nanosecond', 'ounce', 'percent', 'petabyte', 'pound', 'second', 'stone', 'terabit', 'terabyte', 'week', 'yard', 'year'] +--- +:: + +::Example +--- +name: "Unit type examples" +file: "_content/_examples/unit/unit-type-switcher.vue" +--- +:: + +### Locale + +By default the locale will use what you have set in your `formkit.config.ts` as the desired locale. However you can override this with the `displayLocale` prop. For example, `en-US`, `de-DE`, `en-IN`, `zh-CN`, etc, etc. + +## Unit Additional Props + +### Decimals + +By default the decimals will display when the value contains the unit/locale decimal separator and will show default formatting decimal places to display for the given unit, however you can override this. By setting `decimals` to `false` or `0`, the value will not allow decimals or setting decimals to a numeric value will limit the maximum decimal places to that value. + +You can also choose to set a minimum number of decimals with the `minDecimals` prop. For example, you always want to show 2 decimal places you would set `minDecimals="2"`. + +### Minimum and Maximum Values + +Similar to a number input, you can set a `min` and `max` value. + +### Step + +Again, similar to a number input you can use the up/down keys to step the value. By default the step is `1` but you can override that with this prop. + +### Value Formatting + +Default value output is the value as a string to reduce issues with large number enumertation issues. However you can format the value as a string and include the currency symbol, grouping, decimal, etc as it is shown in the input. + +## Props & Attributes + +::ReferenceTable +--- +input: "unit" +data: [ + { + prop: "unit", + type: "string", + default: "percent", + description: "Set the specified unit to use for this input" + }, + { + prop: "displayLocale", + type: "string", + default: "en-US", + description: "Set the desired display locale to use for this input" + }, + { + prop: "decimals", + type: "boolean|number", + default: "null", + description: "Choose to either completely disallow decimals or override the maximum number of decimals for the input" + }, + { + prop: "minDecimals", + type: "number", + default: "null", + description: "Choose to show a minimum number of decimals should your input require this" + }, + { + prop: "min", + type: "number", + default: "null", + description: "Minimum numeric value allowed. If zero or above, negatives will not be allowed" + }, + { + prop: "max", + type: "number", + default: "null", + description: "Maximum numeric value allowed for this input" + }, + { + prop: "step", + type: "number", + default: "1", + description: "When using the up/down keys, how much to modify the current value." + }, + { + prop: "valueFormat", + type: "string", + default: "number", + description: "Choose between number and string whether you want a numeric value or a parsed string value" + }, +] +--- +:: + + +## Sections + +:SectionKeysIntro + +### Unit input diagram + +::FormKitInputDiagram +--- +prefix-icon-content: "" +suffix-icon-content: "" +label-content: "Unit Input" +input-content: "1,234.56%" +help-content: "Help text goes here" +message-content: "Any messages would appear here" +--- +:: From 883298d911e90a233e33b83a99c6e78e1de4d9b5 Mon Sep 17 00:00:00 2001 From: Chris Adams Date: Mon, 4 Mar 2024 14:15:37 -0500 Subject: [PATCH 02/83] fix: updates to currency examples --- .examples/currency/currency-default.vue | 6 +++++- .examples/currency/currency-props-explore.vue | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/.examples/currency/currency-default.vue b/.examples/currency/currency-default.vue index 80890c30..f960ada3 100644 --- a/.examples/currency/currency-default.vue +++ b/.examples/currency/currency-default.vue @@ -10,7 +10,11 @@ const value = ref(false) --> - + 
{{ value }}
 diff --git a/.examples/currency/currency-props-explore.vue b/.examples/currency/currency-props-explore.vue index 59fdac0b..02923306 100644 --- a/.examples/currency/currency-props-explore.vue +++ b/.examples/currency/currency-props-explore.vue @@ -20,6 +20,7 @@ const value = ref(false) displayLocale="en-US" decimals="4" minDecimals="2" + value="123.1234" /> 
{{ value }}
From 550fa3d6bf9efeafe6abf8bdfda103012de74c8b Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Thu, 25 Apr 2024 11:03:14 -0400 Subject: [PATCH 03/83] docs: adds examples for option groups --- .examples/_data/citiesByState.js | 638 ++++++++++++++++++ .../autocomplete-option-groups.vue | 20 + .examples/dropdown/dropdown-option-groups.vue | 20 + .examples/taglist/taglist-option-groups.vue | 19 + changelog-pro/68.v.0.123.0.md | 10 +- inputs/autocomplete.md | 129 +++- inputs/dropdown.md | 124 +++- inputs/taglist.md | 239 +++++++ 8 files changed, 1173 insertions(+), 26 deletions(-) create mode 100644 .examples/_data/citiesByState.js create mode 100644 .examples/autocomplete-pro/autocomplete-option-groups.vue create mode 100644 .examples/dropdown/dropdown-option-groups.vue create mode 100644 .examples/taglist/taglist-option-groups.vue diff --git a/.examples/_data/citiesByState.js b/.examples/_data/citiesByState.js new file mode 100644 index 00000000..2d11b112 --- /dev/null +++ b/.examples/_data/citiesByState.js @@ -0,0 +1,638 @@ +export default [ + { + group: 'Alabama', + options: [ + { label: 'Birmingham', population: 209880, value: 'Birmingham, Alabama' }, + { label: 'Montgomery', population: 198218, value: 'Montgomery, Alabama' }, + { label: 'Mobile', population: 189572, value: 'Mobile, Alabama' }, + ], + }, + { + group: 'Alaska', + options: [ + { label: 'Anchorage', population: 291247, value: 'Anchorage, Alaska' }, + { label: 'Fairbanks', population: 31516, value: 'Fairbanks, Alaska' }, + { label: 'Juneau', population: 32113, value: 'Juneau, Alaska' }, + ], + }, + { + group: 'Arizona', + options: [ + { label: 'Phoenix', population: 1445632, value: 'Phoenix, Arizona' }, + { label: 'Tucson', population: 548073, value: 'Tucson, Arizona' }, + { label: 'Mesa', population: 518012, value: 'Mesa, Arizona' }, + ], + }, + { + group: 'Arkansas', + options: [ + { + label: 'Little Rock', + population: 197312, + value: 'Little Rock, Arkansas', + }, + { label: 'Fort Smith', population: 87818, value: 'Fort Smith, Arkansas' }, + { + label: 'Fayetteville', + population: 87016, + value: 'Fayetteville, Arkansas', + }, + ], + }, + { + group: 'California', + options: [ + { + label: 'Los Angeles', + population: 3976322, + value: 'Los Angeles, California', + }, + { + label: 'San Diego', + population: 1394928, + value: 'San Diego, California', + }, + { label: 'San Jose', population: 1026654, value: 'San Jose, California' }, + ], + }, + { + group: 'Colorado', + options: [ + { label: 'Denver', population: 693060, value: 'Denver, Colorado' }, + { + label: 'Colorado Springs', + population: 478221, + value: 'Colorado Springs, Colorado', + }, + { label: 'Aurora', population: 366623, value: 'Aurora, Colorado' }, + ], + }, + { + group: 'Connecticut', + options: [ + { + label: 'Bridgeport', + population: 148654, + value: 'Bridgeport, Connecticut', + }, + { + label: 'New Haven', + population: 130250, + value: 'New Haven, Connecticut', + }, + { label: 'Hartford', population: 123243, value: 'Hartford, Connecticut' }, + ], + }, + { + group: 'Delaware', + options: [ + { label: 'Wilmington', population: 70676, value: 'Wilmington, Delaware' }, + { label: 'Dover', population: 38458, value: 'Dover, Delaware' }, + { label: 'Newark', population: 33387, value: 'Newark, Delaware' }, + ], + }, + { + group: 'Florida', + options: [ + { + label: 'Jacksonville', + population: 892062, + value: 'Jacksonville, Florida', + }, + { label: 'Miami', population: 470914, value: 'Miami, Florida' }, + { label: 'Tampa', population: 399700, value: 'Tampa, Florida' }, + ], + }, + { + group: 'Georgia', + options: [ + { label: 'Atlanta', population: 498044, value: 'Atlanta, Georgia' }, + { label: 'Augusta', population: 197166, value: 'Augusta, Georgia' }, + { label: 'Columbus', population: 195769, value: 'Columbus, Georgia' }, + ], + }, + { + group: 'Hawaii', + options: [ + { label: 'Honolulu', population: 374658, value: 'Honolulu, Hawaii' }, + { + label: 'East Honolulu', + population: 49105, + value: 'East Honolulu, Hawaii', + }, + { label: 'Pearl City', population: 47698, value: 'Pearl City, Hawaii' }, + ], + }, + { + group: 'Idaho', + options: [ + { label: 'Boise', population: 228959, value: 'Boise, Idaho' }, + { label: 'Meridian', population: 106804, value: 'Meridian, Idaho' }, + { label: 'Nampa', population: 106475, value: 'Nampa, Idaho' }, + ], + }, + { + group: 'Illinois', + options: [ + { label: 'Chicago', population: 2705994, value: 'Chicago, Illinois' }, + { label: 'Aurora', population: 199602, value: 'Aurora, Illinois' }, + { label: 'Rockford', population: 147051, value: 'Rockford, Illinois' }, + ], + }, + { + group: 'Indiana', + options: [ + { + label: 'Indianapolis', + population: 867125, + value: 'Indianapolis, Indiana', + }, + { label: 'Fort Wayne', population: 270402, value: 'Fort Wayne, Indiana' }, + { label: 'Evansville', population: 118930, value: 'Evansville, Indiana' }, + ], + }, + { + group: 'Iowa', + options: [ + { label: 'Des Moines', population: 214778, value: 'Des Moines, Iowa' }, + { + label: 'Cedar Rapids', + population: 132228, + value: 'Cedar Rapids, Iowa', + }, + { label: 'Davenport', population: 101532, value: 'Davenport, Iowa' }, + ], + }, + { + group: 'Kansas', + options: [ + { label: 'Wichita', population: 389938, value: 'Wichita, Kansas' }, + { + label: 'Overland Park', + population: 195494, + value: 'Overland Park, Kansas', + }, + { + label: 'Kansas City', + population: 152960, + value: 'Kansas City, Kansas', + }, + ], + }, + { + group: 'Kentucky', + options: [ + { + label: 'Louisville', + population: 615366, + value: 'Louisville, Kentucky', + }, + { label: 'Lexington', population: 314488, value: 'Lexington, Kentucky' }, + { + label: 'Bowling Green', + population: 70846, + value: 'Bowling Green, Kentucky', + }, + ], + }, + { + group: 'Louisiana', + options: [ + { + label: 'New Orleans', + population: 393292, + value: 'New Orleans, Louisiana', + }, + { + label: 'Baton Rouge', + population: 227715, + value: 'Baton Rouge, Louisiana', + }, + { + label: 'Shreveport', + population: 194920, + value: 'Shreveport, Louisiana', + }, + ], + }, + { + group: 'Maine', + options: [ + { label: 'Portland', population: 66591, value: 'Portland, Maine' }, + { label: 'Lewiston', population: 36136, value: 'Lewiston, Maine' }, + { label: 'Bangor', population: 31666, value: 'Bangor, Maine' }, + ], + }, + { + group: 'Maryland', + options: [ + { label: 'Baltimore', population: 611648, value: 'Baltimore, Maryland' }, + { label: 'Columbia', population: 105162, value: 'Columbia, Maryland' }, + { label: 'Germantown', population: 90601, value: 'Germantown, Maryland' }, + ], + }, + { + group: 'Massachusetts', + options: [ + { label: 'Boston', population: 694583, value: 'Boston, Massachusetts' }, + { + label: 'Worcester', + population: 185877, + value: 'Worcester, Massachusetts', + }, + { + label: 'Springfield', + population: 154341, + value: 'Springfield, Massachusetts', + }, + ], + }, + { + group: 'Michigan', + options: [ + { label: 'Detroit', population: 673104, value: 'Detroit, Michigan' }, + { + label: 'Grand Rapids', + population: 200217, + value: 'Grand Rapids, Michigan', + }, + { label: 'Warren', population: 134587, value: 'Warren, Michigan' }, + ], + }, + { + group: 'Minnesota', + options: [ + { + label: 'Minneapolis', + population: 422331, + value: 'Minneapolis, Minnesota', + }, + { + label: 'Saint Paul', + population: 306621, + value: 'Saint Paul, Minnesota', + }, + { label: 'Rochester', population: 118935, value: 'Rochester, Minnesota' }, + ], + }, + { + group: 'Mississippi', + options: [ + { label: 'Jackson', population: 153701, value: 'Jackson, Mississippi' }, + { label: 'Gulfport', population: 71496, value: 'Gulfport, Mississippi' }, + { + label: 'Southaven', + population: 54418, + value: 'Southaven, Mississippi', + }, + ], + }, + { + group: 'Missouri', + options: [ + { + label: 'Kansas City', + population: 488943, + value: 'Kansas City, Missouri', + }, + { + label: 'Saint Louis', + population: 302838, + value: 'Saint Louis, Missouri', + }, + { + label: 'Springfield', + population: 167376, + value: 'Springfield, Missouri', + }, + ], + }, + { + group: 'Montana', + options: [ + { label: 'Billings', population: 110263, value: 'Billings, Montana' }, + { label: 'Missoula', population: 74727, value: 'Missoula, Montana' }, + { + label: 'Great Falls', + population: 58402, + value: 'Great Falls, Montana', + }, + ], + }, + { + group: 'Nebraska', + options: [ + { label: 'Omaha', population: 478192, value: 'Omaha, Nebraska' }, + { label: 'Lincoln', population: 287401, value: 'Lincoln, Nebraska' }, + { label: 'Bellevue', population: 54734, value: 'Bellevue, Nebraska' }, + ], + }, + { + group: 'Nevada', + options: [ + { label: 'Las Vegas', population: 635628, value: 'Las Vegas, Nevada' }, + { label: 'Henderson', population: 320189, value: 'Henderson, Nevada' }, + { label: 'Reno', population: 255601, value: 'Reno, Nevada' }, + ], + }, + { + group: 'New Hampshire', + options: [ + { + label: 'Manchester', + population: 112525, + value: 'Manchester, New Hampshire', + }, + { label: 'Nashua', population: 89536, value: 'Nashua, New Hampshire' }, + { label: 'Concord', population: 43172, value: 'Concord, New Hampshire' }, + ], + }, + { + group: 'New Jersey', + options: [ + { label: 'Newark', population: 282011, value: 'Newark, New Jersey' }, + { + label: 'Jersey City', + population: 265549, + value: 'Jersey City, New Jersey', + }, + { label: 'Paterson', population: 145948, value: 'Paterson, New Jersey' }, + ], + }, + { + group: 'New Mexico', + options: [ + { + label: 'Albuquerque', + population: 560218, + value: 'Albuquerque, New Mexico', + }, + { + label: 'Las Cruces', + population: 102512, + value: 'Las Cruces, New Mexico', + }, + { + label: 'Rio Rancho', + population: 99710, + value: 'Rio Rancho, New Mexico', + }, + ], + }, + { + group: 'New York', + options: [ + { + label: 'New York City', + population: 8175133, + value: 'New York City, New York', + }, + { label: 'Buffalo', population: 261310, value: 'Buffalo, New York' }, + { label: 'Rochester', population: 210565, value: 'Rochester, New York' }, + ], + }, + { + group: 'North Carolina', + options: [ + { + label: 'Charlotte', + population: 731424, + value: 'Charlotte, North Carolina', + }, + { + label: 'Raleigh', + population: 474069, + value: 'Raleigh, North Carolina', + }, + { + label: 'Greensboro', + population: 299035, + value: 'Greensboro, North Carolina', + }, + ], + }, + { + group: 'North Dakota', + options: [ + { label: 'Fargo', population: 113658, value: 'Fargo, North Dakota' }, + { label: 'Bismarck', population: 61272, value: 'Bismarck, North Dakota' }, + { + label: 'Grand Forks', + population: 56791, + value: 'Grand Forks, North Dakota', + }, + ], + }, + { + group: 'Ohio', + options: [ + { label: 'Columbus', population: 822553, value: 'Columbus, Ohio' }, + { label: 'Cleveland', population: 396815, value: 'Cleveland, Ohio' }, + { label: 'Cincinnati', population: 296943, value: 'Cincinnati, Ohio' }, + ], + }, + { + group: 'Oklahoma', + options: [ + { + label: 'Oklahoma City', + population: 649021, + value: 'Oklahoma City, Oklahoma', + }, + { label: 'Tulsa', population: 403505, value: 'Tulsa, Oklahoma' }, + { label: 'Norman', population: 110925, value: 'Norman, Oklahoma' }, + ], + }, + { + group: 'Oregon', + options: [ + { label: 'Portland', population: 647805, value: 'Portland, Oregon' }, + { label: 'Salem', population: 154637, value: 'Salem, Oregon' }, + { label: 'Eugene', population: 156185, value: 'Eugene, Oregon' }, + ], + }, + { + group: 'Pennsylvania', + options: [ + { + label: 'Philadelphia', + population: 1584138, + value: 'Philadelphia, Pennsylvania', + }, + { + label: 'Pittsburgh', + population: 303625, + value: 'Pittsburgh, Pennsylvania', + }, + { + label: 'Allentown', + population: 120207, + value: 'Allentown, Pennsylvania', + }, + ], + }, + { + group: 'Rhode Island', + options: [ + { + label: 'Providence', + population: 179883, + value: 'Providence, Rhode Island', + }, + { label: 'Warwick', population: 82039, value: 'Warwick, Rhode Island' }, + { label: 'Cranston', population: 80566, value: 'Cranston, Rhode Island' }, + ], + }, + { + group: 'South Carolina', + options: [ + { + label: 'Charleston', + population: 130113, + value: 'Charleston, South Carolina', + }, + { + label: 'Columbia', + population: 129272, + value: 'Columbia, South Carolina', + }, + { + label: 'North Charleston', + population: 115382, + value: 'North Charleston, South Carolina', + }, + ], + }, + { + group: 'South Dakota', + options: [ + { + label: 'Sioux Falls', + population: 153888, + value: 'Sioux Falls, South Dakota', + }, + { + label: 'Rapid City', + population: 69030, + value: 'Rapid City, South Dakota', + }, + { label: 'Aberdeen', population: 28489, value: 'Aberdeen, South Dakota' }, + ], + }, + { + group: 'Tennessee', + options: [ + { label: 'Nashville', population: 689447, value: 'Nashville, Tennessee' }, + { label: 'Memphis', population: 650618, value: 'Memphis, Tennessee' }, + { label: 'Knoxville', population: 186239, value: 'Knoxville, Tennessee' }, + ], + }, + { + group: 'Texas', + options: [ + { label: 'Houston', population: 2320268, value: 'Houston, Texas' }, + { + label: 'San Antonio', + population: 1547253, + value: 'San Antonio, Texas', + }, + { label: 'Dallas', population: 1317929, value: 'Dallas, Texas' }, + ], + }, + { + group: 'Utah', + options: [ + { + label: 'Salt Lake City', + population: 200567, + value: 'Salt Lake City, Utah', + }, + { + label: 'West Valley City', + population: 135248, + value: 'West Valley City, Utah', + }, + { label: 'Provo', population: 115264, value: 'Provo, Utah' }, + ], + }, + { + group: 'Vermont', + options: [ + { label: 'Burlington', population: 42284, value: 'Burlington, Vermont' }, + { + label: 'South Burlington', + population: 18998, + value: 'South Burlington, Vermont', + }, + { label: 'Essex', population: 21291, value: 'Essex, Vermont' }, + ], + }, + { + group: 'Virginia', + options: [ + { + label: 'Virginia Beach', + population: 450435, + value: 'Virginia Beach, Virginia', + }, + { label: 'Norfolk', population: 242742, value: 'Norfolk, Virginia' }, + { + label: 'Chesapeake', + population: 240397, + value: 'Chesapeake, Virginia', + }, + ], + }, + { + group: 'Washington', + options: [ + { label: 'Seattle', population: 744955, value: 'Seattle, Washington' }, + { label: 'Spokane', population: 219190, value: 'Spokane, Washington' }, + { label: 'Tacoma', population: 217827, value: 'Tacoma, Washington' }, + ], + }, + { + group: 'West Virginia', + options: [ + { + label: 'Charleston', + population: 51400, + value: 'Charleston, West Virginia', + }, + { + label: 'Huntington', + population: 46413, + value: 'Huntington, West Virginia', + }, + { + label: 'Morgantown', + population: 30505, + value: 'Morgantown, West Virginia', + }, + ], + }, + { + group: 'Wisconsin', + options: [ + { label: 'Milwaukee', population: 594833, value: 'Milwaukee, Wisconsin' }, + { label: 'Madison', population: 233209, value: 'Madison, Wisconsin' }, + { label: 'Green Bay', population: 104578, value: 'Green Bay, Wisconsin' }, + ], + }, + { + group: 'Wyoming', + options: [ + { label: 'Cheyenne', population: 59466, value: 'Cheyenne, Wyoming' }, + { label: 'Casper', population: 57913, value: 'Casper, Wyoming' }, + { label: 'Laramie', population: 32959, value: 'Laramie, Wyoming' }, + ], + }, + { + value: 1, + label: '1', + }, + { + value: 2, + label: '2', + }, +] diff --git a/.examples/autocomplete-pro/autocomplete-option-groups.vue b/.examples/autocomplete-pro/autocomplete-option-groups.vue new file mode 100644 index 00000000..e85eaa7b --- /dev/null +++ b/.examples/autocomplete-pro/autocomplete-option-groups.vue @@ -0,0 +1,20 @@ + + + + + diff --git a/.examples/dropdown/dropdown-option-groups.vue b/.examples/dropdown/dropdown-option-groups.vue new file mode 100644 index 00000000..0eee1743 --- /dev/null +++ b/.examples/dropdown/dropdown-option-groups.vue @@ -0,0 +1,20 @@ + + + + + diff --git a/.examples/taglist/taglist-option-groups.vue b/.examples/taglist/taglist-option-groups.vue new file mode 100644 index 00000000..fa9fd6c6 --- /dev/null +++ b/.examples/taglist/taglist-option-groups.vue @@ -0,0 +1,19 @@ + + + + + diff --git a/changelog-pro/68.v.0.123.0.md b/changelog-pro/68.v.0.123.0.md index 7c1bd9e8..ed04db22 100644 --- a/changelog-pro/68.v.0.123.0.md +++ b/changelog-pro/68.v.0.123.0.md @@ -2,9 +2,15 @@ ### April 25, 2024 -### ⚠️ Breaking Changes +::Callout +--- +type: "warning" +name: "Breaking Changes" +--- -- The rating input has been rewritten to be based on a radio group to provide better accessibility. While the API remains the same, be sure to update your theme at `themes.formkit.com`. +The rating input has been rewritten to be based on a radio group to provide better accessibility. While the API remains the same, be sure to update your theme at `themes.formkit.com`. + +:: ### 💪 New Features diff --git a/inputs/autocomplete.md b/inputs/autocomplete.md index 771c9365..57616adb 100644 --- a/inputs/autocomplete.md +++ b/inputs/autocomplete.md @@ -353,6 +353,21 @@ file: [ --- :: +## Option groups + +If you would like the listitems in the listbox to be grouped, pass the `options` prop an array of objects and include the property `group`: + +::Example +--- +name: "Autocomplete" +min-height: 550 +file: [ + "_content/_examples/autocomplete-pro/autocomplete-option-groups.vue", + "_content/_examples/_data/citiesByState.js" +] +--- +:: + ## Full example @@ -838,14 +853,12 @@ schema: [ --- :: -### Inner listbox structure - -Below is the inner options list (`listbox`) structure from the diagrams above: +### Listbox structure ::FormKitInputDiagram --- hide-on-small: true -class: "input-diagram--autocomplete" +class: "input-diagram--dropdown" schema: [ { name: "dropdownWrapper", @@ -865,20 +878,108 @@ schema: [ ] }, { - name: "listitem", - class: "flex flex-grow", - position: "right", + name: "listitems", + children: [{ + name: 'listitem', + class: "flex flex-grow", + position: "right", + children: [ + { + name: "selectedIcon", + content: "✔️" + }, + { + name: "option", + content: "Gray", + position: "right", + class: "flex flex-grow" + }, + ] + }] + }, + { + name: "loadMore", children: [ { - name: "selectedIcon", - content: "✔️" + name: "loadMoreInner", + children: [ + { + name: "loaderIcon", + content: "⏳", + class: "text-center" + } + ] }, + ] + }, + ] + }, + ] + } +] +--- +:: + +### Grouped Listbox Structure + +::FormKitInputDiagram +--- +hide-on-small: true +class: "input-diagram--dropdown" +schema: [ + { + name: "dropdownWrapper", + position: "right", + children: [ + { + name: "listbox", + position: "right", + children: [ + { + name: "emptyMessage", + children: [ { - name: "option", - content: "Serena", - position: "right", - class: "flex flex-grow" - }, + name: "emptyMessageInner", + content: "No options to display.", + } + ] + }, + { + name: "listitems", + children: [ + { + name: 'listitemGroup', + children: [ + { + name: 'groupLabel' + }, + { + name: 'groupList', + children: [ + { + name: 'innerListitems', + children: [{ + name: 'listitem', + class: "flex flex-grow", + position: "right", + children: [ + { + name: "selectedIcon", + content: "✔️" + }, + { + name: "option", + content: "Gray", + position: "right", + class: "flex flex-grow" + }, + ] + }] + } + ] + } + ] + } ] }, { diff --git a/inputs/dropdown.md b/inputs/dropdown.md index 53a92ea5..ebc026f2 100644 --- a/inputs/dropdown.md +++ b/inputs/dropdown.md @@ -306,6 +306,22 @@ file: [ --- :: +## Option groups + +If you would like the listitems in the listbox to be grouped, pass the `options` prop an array of objects and include the property `group`: + +::Example +--- +name: "Dropdown" +min-height: 550 +file: [ + "_content/_examples/dropdown/dropdown-option-groups.vue", + "_content/_examples/_data/citiesByState.js" +] +--- +:: + + ## Props & Attributes ::ReferenceTable @@ -538,20 +554,108 @@ schema: [ ] }, { - name: "listitem", - class: "flex flex-grow", - position: "right", + name: "listitems", + children: [{ + name: 'listitem', + class: "flex flex-grow", + position: "right", + children: [ + { + name: "selectedIcon", + content: "✔️" + }, + { + name: "option", + content: "Gray", + position: "right", + class: "flex flex-grow" + }, + ] + }] + }, + { + name: "loadMore", children: [ { - name: "selectedIcon", - content: "✔️" + name: "loadMoreInner", + children: [ + { + name: "loaderIcon", + content: "⏳", + class: "text-center" + } + ] }, + ] + }, + ] + }, + ] + } +] +--- +:: + +### Grouped Listbox Structure + +::FormKitInputDiagram +--- +hide-on-small: true +class: "input-diagram--dropdown" +schema: [ + { + name: "dropdownWrapper", + position: "right", + children: [ + { + name: "listbox", + position: "right", + children: [ + { + name: "emptyMessage", + children: [ { - name: "option", - content: "Gray", - position: "right", - class: "flex flex-grow" - }, + name: "emptyMessageInner", + content: "No options to display.", + } + ] + }, + { + name: "listitems", + children: [ + { + name: 'listitemGroup', + children: [ + { + name: 'groupLabel' + }, + { + name: 'groupList', + children: [ + { + name: 'innerListitems', + children: [{ + name: 'listitem', + class: "flex flex-grow", + position: "right", + children: [ + { + name: "selectedIcon", + content: "✔️" + }, + { + name: "option", + content: "Gray", + position: "right", + class: "flex flex-grow" + }, + ] + }] + } + ] + } + ] + } ] }, { diff --git a/inputs/taglist.md b/inputs/taglist.md index 1aa4afda..9cb4df61 100644 --- a/inputs/taglist.md +++ b/inputs/taglist.md @@ -266,6 +266,22 @@ file: [ --- :: +## Option groups + +If you would like the listitems in the listbox to be grouped, pass the `options` prop an array of objects and include the property `group`: + +::Example +--- +name: "Taglist" +min-height: 550 +file: [ + "_content/_examples/taglist/taglist-option-groups.vue", + "_content/_examples/_data/citiesByState.js" +] +--- +:: + + ## Full example @@ -469,6 +485,229 @@ data: [ --- :: +## Sections + +:SectionKeysIntro + +### Listbox structure + +::FormKitInputDiagram +--- +hide-on-small: true +class: "input-diagram--dropdown" +schema: [ + { + name: "dropdownWrapper", + position: "right", + children: [ + { + name: "listbox", + position: "right", + children: [ + { + name: "emptyMessage", + children: [ + { + name: "emptyMessageInner", + content: "No options to display.", + } + ] + }, + { + name: "listitems", + children: [{ + name: 'listitem', + class: "flex flex-grow", + position: "right", + children: [ + { + name: "selectedIcon", + content: "✔️" + }, + { + name: "option", + content: "Gray", + position: "right", + class: "flex flex-grow" + }, + ] + }] + }, + { + name: "loadMore", + children: [ + { + name: "loadMoreInner", + children: [ + { + name: "loaderIcon", + content: "⏳", + class: "text-center" + } + ] + }, + ] + }, + ] + }, + ] + } +] +--- +:: + +### Grouped Listbox Structure + +::FormKitInputDiagram +--- +hide-on-small: true +class: "input-diagram--dropdown" +schema: [ + { + name: "dropdownWrapper", + position: "right", + children: [ + { + name: "listbox", + position: "right", + children: [ + { + name: "emptyMessage", + children: [ + { + name: "emptyMessageInner", + content: "No options to display.", + } + ] + }, + { + name: "listitems", + children: [ + { + name: 'listitemGroup', + children: [ + { + name: 'groupLabel' + }, + { + name: 'groupList', + children: [ + { + name: 'innerListitems', + children: [{ + name: 'listitem', + class: "flex flex-grow", + position: "right", + children: [ + { + name: "selectedIcon", + content: "✔️" + }, + { + name: "option", + content: "Gray", + position: "right", + class: "flex flex-grow" + }, + ] + }] + } + ] + } + ] + } + ] + }, + { + name: "loadMore", + children: [ + { + name: "loadMoreInner", + children: [ + { + name: "loaderIcon", + content: "⏳", + class: "text-center" + } + ] + }, + ] + }, + ] + }, + ] + } +] +--- +:: + +#### Taglist selections + +::FormKitInputDiagram +--- +hide-on-small: true +class: "input-diagram--dropdown-outer" +schema: [ + { + name: "selector", + class: "flex flex-grow", + children: [ + { + name: "tagsWrapper", + class: "flex flex-grow", + children: [ + { + name: "tags", + class: "flex flex-grow border-solid", + children: [ + { + name: "tagWrapper", + children: [ + { + name: "tag", + class: 'flex', + children: [ + { + name: "tagLabel", + content: 'Gray' + }, + { + name: "removeSelection", + content: '×' + } + ] + }, + ] + }, + { + name: "tagWrapper", + children: [ + { + name: "tag", + class: 'flex', + children: [ + { + name: "tagLabel", + content: 'Blue' + }, + { + name: "removeSelection", + content: '×' + } + ] + }, + ] + } + ], + }, + ] + }, + ] + } +] +--- +:: + ## Accessibility All FormKit inputs are designed with the following accessibility considerations in mind. Help us continually improve accessibility for all by filing accessibility issues [here](https://github.com/formkit/formkit/issues/new?assignees=&labels=%F0%9F%90%9B+bug-report%2C%E2%9B%91+Needs+triage&projects=&template=bug-report.yml): From 4461b1fc4758ad80d7745d45bc12a20fe999c89a Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Thu, 25 Apr 2024 11:14:25 -0400 Subject: [PATCH 04/83] docs: removes ungrouped options from citiesByState --- .examples/_data/citiesByState.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/.examples/_data/citiesByState.js b/.examples/_data/citiesByState.js index 2d11b112..55cb98c8 100644 --- a/.examples/_data/citiesByState.js +++ b/.examples/_data/citiesByState.js @@ -627,12 +627,4 @@ export default [ { label: 'Laramie', population: 32959, value: 'Laramie, Wyoming' }, ], }, - { - value: 1, - label: '1', - }, - { - value: 2, - label: '2', - }, ] From 20f225584bfa81f8fecbe2a319b452f0b7c2c21c Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Thu, 25 Apr 2024 13:48:10 -0400 Subject: [PATCH 05/83] docs: adds changelog for FormKit Pro v.0.123.1 --- changelog-pro/69.v.0.123.1.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 changelog-pro/69.v.0.123.1.md diff --git a/changelog-pro/69.v.0.123.1.md b/changelog-pro/69.v.0.123.1.md new file mode 100644 index 00000000..11c23df5 --- /dev/null +++ b/changelog-pro/69.v.0.123.1.md @@ -0,0 +1,8 @@ +## 0.123.1 + +### April 25, 2024 + +### 🐛 Bug fixes + +- Fixes issue with `autocomplete` and `taglist` inputs where cloning during search prevented lookup of values with pojos. + From 76c247883cb686122b36c0847b12499abe1b35aa Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Fri, 26 Apr 2024 09:59:57 -0400 Subject: [PATCH 06/83] docs: Adds changelog for FormKit Pro v0.123.2 --- changelog-pro/70.v.0.123.2.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 changelog-pro/70.v.0.123.2.md diff --git a/changelog-pro/70.v.0.123.2.md b/changelog-pro/70.v.0.123.2.md new file mode 100644 index 00000000..14ee125a --- /dev/null +++ b/changelog-pro/70.v.0.123.2.md @@ -0,0 +1,7 @@ +## 0.123.2 + +### April 26, 2024 + +### 🐛 Bug fixes + +- Fixes issue [#1335](https://github.com/formkit/formkit/issues/1335) where the `options` prop typings for dropdown family inputs were incorrect. From c920369cb378d3342a8a53551b063f84def7eecc Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Fri, 26 Apr 2024 12:10:54 -0400 Subject: [PATCH 07/83] docs: adds changelog for FormKit Pro v0.123.3 --- changelog-pro/71.v.0.123.3.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 changelog-pro/71.v.0.123.3.md diff --git a/changelog-pro/71.v.0.123.3.md b/changelog-pro/71.v.0.123.3.md new file mode 100644 index 00000000..a91a05f9 --- /dev/null +++ b/changelog-pro/71.v.0.123.3.md @@ -0,0 +1,7 @@ +## 0.123.3 + +### April 26, 2024 + +### 🐛 Bug fixes + +- Fixes issue where filtering option groups were not being filtered down via search to individual listitem. From bcc828bd22c75b98fd28112f92a1dd69e941a841 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Fri, 26 Apr 2024 15:41:05 -0400 Subject: [PATCH 08/83] docs: adds changelog for FormKit Pro v0.123.4 --- changelog-pro/72.v.0.123.4.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 changelog-pro/72.v.0.123.4.md diff --git a/changelog-pro/72.v.0.123.4.md b/changelog-pro/72.v.0.123.4.md new file mode 100644 index 00000000..9829a932 --- /dev/null +++ b/changelog-pro/72.v.0.123.4.md @@ -0,0 +1,7 @@ +## 0.123.4 + +### April 26, 2024 + +### 🐛 Bug fixes + +- Fixes issue where attempting to deselect a list item from the dropdown family inputs with a value of pojo was not working as expected. From 52d8bceab94663db2c8a36d748da06e300349a24 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Fri, 26 Apr 2024 17:37:48 -0400 Subject: [PATCH 09/83] docs: Adds changelog for FormKit Pro v0.123.5 --- changelog-pro/73.v.0.123.5.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 changelog-pro/73.v.0.123.5.md diff --git a/changelog-pro/73.v.0.123.5.md b/changelog-pro/73.v.0.123.5.md new file mode 100644 index 00000000..22beb265 --- /dev/null +++ b/changelog-pro/73.v.0.123.5.md @@ -0,0 +1,13 @@ +## 0.123.5 + +### April 26, 2024 + +### 🐛 Bug fixes + +- Fixes dropdown family issue where the loading state of all selections would end at the same time, even if their await times were different because the values were pojos. + +- Fixes dropdown family issue where value of pojo would sometimes cause issues with setting the active descendant. + +- Fixes dropdown family where active selection via. keyhandlers on taglist tags was not working properly. + +- Prevents focus state of tag via. keydown if text input is present. From b4cf017f531201391b5490067b0564cd34957e1d Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Sat, 27 Apr 2024 12:41:00 -0400 Subject: [PATCH 10/83] docs: adds changelog for FormKit Pro v0.123.6 --- changelog-pro/74.v.0.123.6.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 changelog-pro/74.v.0.123.6.md diff --git a/changelog-pro/74.v.0.123.6.md b/changelog-pro/74.v.0.123.6.md new file mode 100644 index 00000000..5d3d2566 --- /dev/null +++ b/changelog-pro/74.v.0.123.6.md @@ -0,0 +1,7 @@ +## 0.123.6 + +### April 27, 2024 + +### 🐛 Bug fixes + +- Fixes dropdown family issue where hydration mismatch occurs when loading option with value of pojo that can't be reduced to a string as temporary label. From 7d1c21f141abcbf9a44c6e25e3321e2d25f0f324 Mon Sep 17 00:00:00 2001 From: Chris Ellinger Date: Wed, 1 May 2024 10:51:00 -0400 Subject: [PATCH 11/83] docs: adds new bronze sponsor logo --- getting-started/community.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/getting-started/community.md b/getting-started/community.md index 4f31b57b..6500ca6c 100644 --- a/getting-started/community.md +++ b/getting-started/community.md @@ -75,6 +75,15 @@ Community involvement and contributions are one of the most important aspects of class="docs-partner" src="https://cdn.formk.it/web-assets/sponsors/zammad_logo-transparent.png" alt="PerByte logo" + style="display:inline-block;vertical-align: middle;width: 60px;margin-right: 25px;" + /> + + + + Wedgworth's Inc logo From a5621db4e7721e97c92ea8e56fb909fe1abaef4f Mon Sep 17 00:00:00 2001 From: Chris Ellinger Date: Wed, 1 May 2024 11:08:30 -0400 Subject: [PATCH 12/83] docs: correct resizing placed on wrong logo --- getting-started/community.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/getting-started/community.md b/getting-started/community.md index 6500ca6c..b7d1310c 100644 --- a/getting-started/community.md +++ b/getting-started/community.md @@ -75,7 +75,7 @@ Community involvement and contributions are one of the most important aspects of class="docs-partner" src="https://cdn.formk.it/web-assets/sponsors/zammad_logo-transparent.png" alt="PerByte logo" - style="display:inline-block;vertical-align: middle;width: 60px;margin-right: 25px;" + style="display:inline-block;vertical-align: middle;width: 120px;margin-right: 25px;" /> @@ -84,7 +84,7 @@ Community involvement and contributions are one of the most important aspects of class="docs-partner" src="https://cdn.formk.it/web-assets/sponsors/bronze-sponsor_wedgworth.png" alt="Wedgworth's Inc logo" - style="display:inline-block;vertical-align: middle;width: 120px;margin-right: 25px;" + style="display:inline-block;vertical-align: middle;width: 60px;margin-right: 25px;" /> From 8d812e0434f636d90f1926b7cde302acecb27e9d Mon Sep 17 00:00:00 2001 From: Chris Ellinger Date: Thu, 2 May 2024 16:32:48 -0400 Subject: [PATCH 13/83] docs:removes old sponsors from community page --- getting-started/community.md | 20 +------------------- 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/getting-started/community.md b/getting-started/community.md index b7d1310c..5194bd87 100644 --- a/getting-started/community.md +++ b/getting-started/community.md @@ -39,25 +39,7 @@ Community involvement and contributions are one of the most important aspects of /> -### Silver sponsors - - - Peak Crypto logo - - - - SurveyJS logo - + ### Bronze sponsors From cc1ddbdc18b58f60e866d55fce84d419b5b8e4a1 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Mon, 6 May 2024 10:32:10 -0400 Subject: [PATCH 14/83] docs: removes unit docs for now --- inputs/unit.md | 144 ------------------------------------------------- 1 file changed, 144 deletions(-) delete mode 100644 inputs/unit.md diff --git a/inputs/unit.md b/inputs/unit.md deleted file mode 100644 index 3ae6b391..00000000 --- a/inputs/unit.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Unit -description: The unit input is used to create locale/currency specific parsed content for percentages, temperatures and measurements ---- - -::InputPageHero ---- -type: "Unit" ---- -:: - -:PageToc - -:ProInstallSnippet - -## Unit Input - -The unit input is used to create locale/currency specific parsed content for percentages, temperatures and measurements - -::Example ---- -name: "Unit input defaults" -file: "_content/_examples/unit/unit-default.vue" ---- -:: - -## Props - -### Unit - -The `unit` prop is the type of unit you want to display from percentages, temperatures, measurements, etc. A full list of allowed unit types are listed below: - -::ColumnList ---- -listItems: ['acre', 'bit', 'byte', 'celsius', 'centimeter', 'day', 'degree', 'fahrenheit', 'fluid-ounce', 'foot', 'gallon', 'gigabit', 'gigabyte', 'gram', 'hectare', 'hour', 'inch', 'kilobit', 'kilobyte', 'kilogram', 'kilometer', 'liter', 'megabit', 'megabyte', 'meter', 'microsecond', 'mile', 'mile-scandinavian', 'milliliter', 'millimeter', 'millisecond', 'minute', 'month', 'nanosecond', 'ounce', 'percent', 'petabyte', 'pound', 'second', 'stone', 'terabit', 'terabyte', 'week', 'yard', 'year'] ---- -:: - -::Example ---- -name: "Unit type examples" -file: "_content/_examples/unit/unit-type-switcher.vue" ---- -:: - -### Locale - -By default the locale will use what you have set in your `formkit.config.ts` as the desired locale. However you can override this with the `displayLocale` prop. For example, `en-US`, `de-DE`, `en-IN`, `zh-CN`, etc, etc. - -## Unit Additional Props - -### Decimals - -By default the decimals will display when the value contains the unit/locale decimal separator and will show default formatting decimal places to display for the given unit, however you can override this. By setting `decimals` to `false` or `0`, the value will not allow decimals or setting decimals to a numeric value will limit the maximum decimal places to that value. - -You can also choose to set a minimum number of decimals with the `minDecimals` prop. For example, you always want to show 2 decimal places you would set `minDecimals="2"`. - -### Minimum and Maximum Values - -Similar to a number input, you can set a `min` and `max` value. - -### Step - -Again, similar to a number input you can use the up/down keys to step the value. By default the step is `1` but you can override that with this prop. - -### Value Formatting - -Default value output is the value as a string to reduce issues with large number enumertation issues. However you can format the value as a string and include the currency symbol, grouping, decimal, etc as it is shown in the input. - -## Props & Attributes - -::ReferenceTable ---- -input: "unit" -data: [ - { - prop: "unit", - type: "string", - default: "percent", - description: "Set the specified unit to use for this input" - }, - { - prop: "displayLocale", - type: "string", - default: "en-US", - description: "Set the desired display locale to use for this input" - }, - { - prop: "decimals", - type: "boolean|number", - default: "null", - description: "Choose to either completely disallow decimals or override the maximum number of decimals for the input" - }, - { - prop: "minDecimals", - type: "number", - default: "null", - description: "Choose to show a minimum number of decimals should your input require this" - }, - { - prop: "min", - type: "number", - default: "null", - description: "Minimum numeric value allowed. If zero or above, negatives will not be allowed" - }, - { - prop: "max", - type: "number", - default: "null", - description: "Maximum numeric value allowed for this input" - }, - { - prop: "step", - type: "number", - default: "1", - description: "When using the up/down keys, how much to modify the current value." - }, - { - prop: "valueFormat", - type: "string", - default: "number", - description: "Choose between number and string whether you want a numeric value or a parsed string value" - }, -] ---- -:: - - -## Sections - -:SectionKeysIntro - -### Unit input diagram - -::FormKitInputDiagram ---- -prefix-icon-content: "" -suffix-icon-content: "" -label-content: "Unit Input" -input-content: "1,234.56%" -help-content: "Help text goes here" -message-content: "Any messages would appear here" ---- -:: From 08f5c98c873b98f18a380f1d32f589913274145a Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Tue, 7 May 2024 08:33:55 -0400 Subject: [PATCH 15/83] docs: updates currency docs --- inputs/currency.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/inputs/currency.md b/inputs/currency.md index aad212a1..b2a0fdd8 100644 --- a/inputs/currency.md +++ b/inputs/currency.md @@ -28,7 +28,7 @@ file: "_content/_examples/currency/currency-default.vue" ### Currency -The `currency` prop is the three letter currency code and sets the proper formatting for the specified currency and also sets default decimal places for that currency. For a full list of supported currency types check: https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes +The `currency` prop is the three letter currency code and sets the proper formatting for the specified currency. For a full list of supported currency types check: https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes ### Locale From 675832ae2b027ae9c585cee609258dd8627f5e16 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Tue, 7 May 2024 09:47:55 -0400 Subject: [PATCH 16/83] docs: updates currency docs --- inputs/currency.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/inputs/currency.md b/inputs/currency.md index b2a0fdd8..b526e832 100644 --- a/inputs/currency.md +++ b/inputs/currency.md @@ -46,9 +46,9 @@ file: "_content/_examples/currency/currency-simple-locale.vue" ### Decimals -By default the decimals will display when the value contains the currency/locale decimal separator and will automatically know how many decimal places to display for the given currency, however you can override this. By setting `decimals` to `false` or `0`, the value will not allow decimals. +By default the decimals will display when the value contains the currency/locale decimal separator and will automatically know how many decimal places to display for the given currency. If you would like to prevent decimals from being displayed, set `decimals` to `false` or `0`, the value will not allow decimals. -You can also choose to set a minimum number of decimals with the `minDecimals` prop. For example, you always want to show 2 decimal places you would set `minDecimals="2"`. +You can also choose to set a minimum number of decimals with the `minDecimals` prop. For example, setting the prop `minDecimals="2"` to will always show 2 decimal points. ### Minimum and Maximum Values From d4ffaac356dd5d72c085c5279df504955986e226 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Tue, 7 May 2024 09:53:38 -0400 Subject: [PATCH 17/83] docs: updates currency docs again --- inputs/currency.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/inputs/currency.md b/inputs/currency.md index b526e832..ee36231d 100644 --- a/inputs/currency.md +++ b/inputs/currency.md @@ -48,7 +48,7 @@ file: "_content/_examples/currency/currency-simple-locale.vue" By default the decimals will display when the value contains the currency/locale decimal separator and will automatically know how many decimal places to display for the given currency. If you would like to prevent decimals from being displayed, set `decimals` to `false` or `0`, the value will not allow decimals. -You can also choose to set a minimum number of decimals with the `minDecimals` prop. For example, setting the prop `minDecimals="2"` to will always show 2 decimal points. +You can also choose to set a minimum number of decimals with the `minDecimals` prop. For example, setting the prop `minDecimals="2"` will always show 2 decimal points. ### Minimum and Maximum Values From 760b7b0477337302ec51eaecadd1ea1783e77663 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Tue, 7 May 2024 11:11:14 -0400 Subject: [PATCH 18/83] docs: updates currency docs, adds changelog for FormKit Pro v0.124.0 --- .examples/currency/currency-simple-locale.vue | 8 ++++---- changelog-pro/75.v.0.124.0.md | 7 +++++++ inputs/currency.md | 18 +++++++----------- 3 files changed, 18 insertions(+), 15 deletions(-) create mode 100644 changelog-pro/75.v.0.124.0.md diff --git a/.examples/currency/currency-simple-locale.vue b/.examples/currency/currency-simple-locale.vue index 70b238b5..15fecbe3 100644 --- a/.examples/currency/currency-simple-locale.vue +++ b/.examples/currency/currency-simple-locale.vue @@ -13,7 +13,7 @@ const value = ref(false) @@ -21,7 +21,7 @@ const value = ref(false) @@ -29,7 +29,7 @@ const value = ref(false) @@ -37,7 +37,7 @@ const value = ref(false) diff --git a/changelog-pro/75.v.0.124.0.md b/changelog-pro/75.v.0.124.0.md new file mode 100644 index 00000000..17e4d977 --- /dev/null +++ b/changelog-pro/75.v.0.124.0.md @@ -0,0 +1,7 @@ +## 0.124.0 + +### May 7, 2024 + +### 💪 New features + +- Adds [`currency` input](/inputs/currency). diff --git a/inputs/currency.md b/inputs/currency.md index ee36231d..83a93483 100644 --- a/inputs/currency.md +++ b/inputs/currency.md @@ -13,9 +13,9 @@ type: "Currency" :ProInstallSnippet -## Currency Input +## Basic example -The currency input is used to create locale/currency specific parsed content +The `currency` input allows for restricted input of values based on the provided currency and locale. ::Example --- @@ -32,7 +32,7 @@ The `currency` prop is the three letter currency code and sets the proper format ### Locale -By default the locale will use what you have set in your `formkit.config.ts` as the desired locale. However you can override this with the `displayLocale` prop. For example, `en-US`, `de-DE`, `en-IN`, `zh-CN`, etc, etc. +By default, the locale used will be that of what is set in your `formkit.config.ts`. This can be overriden with the `display-locale` prop. For example, `en`, `de`, `en-IN`, `zh-CN`, etc, etc. ::Example @@ -46,21 +46,17 @@ file: "_content/_examples/currency/currency-simple-locale.vue" ### Decimals -By default the decimals will display when the value contains the currency/locale decimal separator and will automatically know how many decimal places to display for the given currency. If you would like to prevent decimals from being displayed, set `decimals` to `false` or `0`, the value will not allow decimals. +If you would like to prevent decimals from being displayed, set `decimals` to `false` or `0`. -You can also choose to set a minimum number of decimals with the `minDecimals` prop. For example, setting the prop `minDecimals="2"` will always show 2 decimal points. +You can also choose to set a minimum number of decimals with the `min-decimals` prop. For example, setting the prop `min-decimals="2"` will always show 2 decimal points. ### Minimum and Maximum Values -Similar to a number input, you can set a `min` and `max` value. +Setting the props `min` or `max` will prevent entry of a higher or lower value. ### Step -Again, similar to a number input you can use the up/down keys to step the value. By default the step is `1` but you can override that with this prop. - -### Value Formatting - -Default value output is the value as a string to reduce issues with large number enumertation issues. However you can format the value as a string and include the currency symbol, grouping, decimal, etc as it is shown in the input. +Value scan be incremented and decremented by use of the up/down keys. The degree by which the value changes is determined by the `step` prop. ::Example --- From 2652ef8a223f1375904fb68dbfdc46ca63fd668e Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Tue, 7 May 2024 11:35:24 -0400 Subject: [PATCH 19/83] docs: removes currency example from docs --- essentials/examples.md | 8 -------- 1 file changed, 8 deletions(-) diff --git a/essentials/examples.md b/essentials/examples.md index 67cb3923..3108381a 100644 --- a/essentials/examples.md +++ b/essentials/examples.md @@ -145,14 +145,6 @@ title: "Number input with custom step buttons" A custom input with +1 and -1 step buttons. Made using createInput(). :: -::ExampleCard ---- -href: "https://formkit.link/68e51abc7431687edc8f9ff008477b3d" -title: "A currency input with currency selector" ---- -A simple custom input that allows users to select a currency and enter a value. Made using createInput(). -:: - ::ExampleCard --- href: "https://formkit.link/de8e6530b80717f5229813258e739e7b" From 73263d238285167cbfaf5766d9150c8664e53c1e Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Tue, 7 May 2024 12:50:38 -0400 Subject: [PATCH 20/83] docs: adds changelog for FormKit Pro v.0.124.1 --- changelog-pro/76.v.0.124.1.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 changelog-pro/76.v.0.124.1.md diff --git a/changelog-pro/76.v.0.124.1.md b/changelog-pro/76.v.0.124.1.md new file mode 100644 index 00000000..a1d37b0e --- /dev/null +++ b/changelog-pro/76.v.0.124.1.md @@ -0,0 +1,7 @@ +## 0.124.1 + +### May 7, 2024 + +### 🐛 Bug fixes + +- Fixes max recursion bug in `currency` input in Safari. From d2b0092dfb6558f24f60d06d9245e6f07fedc4ad Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Tue, 7 May 2024 13:29:34 -0400 Subject: [PATCH 21/83] docs: adds docs for FormKit Pro v0.124.2 --- changelog-pro/77.v.0.124.2.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 changelog-pro/77.v.0.124.2.md diff --git a/changelog-pro/77.v.0.124.2.md b/changelog-pro/77.v.0.124.2.md new file mode 100644 index 00000000..2f073a9e --- /dev/null +++ b/changelog-pro/77.v.0.124.2.md @@ -0,0 +1,7 @@ +## 0.124.2 + +### May 7, 2024 + +### 🐛 Bug fixes + +- Removes type `tel` from `currency` input. Now uses attr `inputmode` instead. From 5943f97d6417a1b3ec29c1153fce390c5e082520 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Wed, 8 May 2024 07:29:16 -0400 Subject: [PATCH 22/83] docs: adds changelog for FormKit Pro v0.125.0 --- changelog-pro/78.v.0.125.0.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 changelog-pro/78.v.0.125.0.md diff --git a/changelog-pro/78.v.0.125.0.md b/changelog-pro/78.v.0.125.0.md new file mode 100644 index 00000000..9df7f2af --- /dev/null +++ b/changelog-pro/78.v.0.125.0.md @@ -0,0 +1,7 @@ +## 0.125.0 + +### May 8, 2024 + +### 🐛 Bug fixes + +- Fixes issue preventing tree shaking of FormKit Pro inputs. From 055edc0a0e9dae4b7bfe94652506f293c9ae3d78 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Wed, 8 May 2024 10:40:59 -0400 Subject: [PATCH 23/83] docs: removes reverse mask example --- inputs/mask.md | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/inputs/mask.md b/inputs/mask.md index 71fbee8b..fa1c433c 100644 --- a/inputs/mask.md +++ b/inputs/mask.md @@ -319,24 +319,6 @@ label: "Values can't match the mask" Your prefix and suffix content can't match the mask. For instance, if your mask has a digit token #, your prefix/suffix can't contain numbers. :: -## Running the mask in reverse - -In specific circumstances, you may want to run your mask in reverse. The mask will test if user input fulfills the mask from right to left. This is common in currency-type inputs and can be applied by adding the `reverse` prop: - -::Example ---- -name: "Mask input" -file: "_content/_examples/mask/reverse.vue" ---- -:: - -::Callout ---- -type: "warning" -label: "Shift mode requirement" ---- -Running a mask in reverse only works in shift mode. -:: ## Mask values From acc55328f4f2dccd800cd82db49a48a5c729e8ad Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Thu, 9 May 2024 11:16:49 -0400 Subject: [PATCH 24/83] docs: adds changelog for FormKit Pro v0.125.1 --- changelog-pro/79.v.0.125.1.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 changelog-pro/79.v.0.125.1.md diff --git a/changelog-pro/79.v.0.125.1.md b/changelog-pro/79.v.0.125.1.md new file mode 100644 index 00000000..3bf4f57c --- /dev/null +++ b/changelog-pro/79.v.0.125.1.md @@ -0,0 +1,8 @@ +## 0.125.1 + +### May 9, 2024 + +### 🐛 Bug fixes + +- Fixes issues with dropdown family inputs introduced by 0.125.0 [#1346](https://github.com/formkit/formkit/issues/1346) and +[#1345](https://github.com/formkit/formkit/issues/1345) From 059279f4a7ef58c8d6fdef1a758b6e61c9e5e744 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Fri, 10 May 2024 09:59:49 -0400 Subject: [PATCH 25/83] docs: adds keyboard interactions table to currency input --- inputs/currency.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/inputs/currency.md b/inputs/currency.md index 83a93483..c0dd801e 100644 --- a/inputs/currency.md +++ b/inputs/currency.md @@ -140,3 +140,16 @@ help-content: "How much do you want to donate?" message-content: "That's a lot of money" --- :: +### Keyboard Interactions + +::KeyboardEventsTable +--- +data: [ + { + event: ["up", "down"], + separator: '', + description: "Increments through input value by current amount.", + }, +] +--- +:: \ No newline at end of file From aa4eefc208cf95bb724403a48ad1f284f401f2e9 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Fri, 10 May 2024 10:00:21 -0400 Subject: [PATCH 26/83] docs: makes slight edit to keyboard interactions for currency input --- inputs/currency.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/inputs/currency.md b/inputs/currency.md index c0dd801e..c9011c33 100644 --- a/inputs/currency.md +++ b/inputs/currency.md @@ -148,7 +148,7 @@ data: [ { event: ["up", "down"], separator: '', - description: "Increments through input value by current amount.", + description: "Increments through input value by current step amount.", }, ] --- From c658cbff26c750dbe30edc35e10c57c0341d32c2 Mon Sep 17 00:00:00 2001 From: Andrew Boyd Date: Fri, 10 May 2024 10:19:05 -0400 Subject: [PATCH 27/83] docs: adds more pro changelogs --- changelog-pro/80.v.0.125.2.md | 7 +++++++ changelog-pro/81.v.0.125.3.md | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 changelog-pro/80.v.0.125.2.md create mode 100644 changelog-pro/81.v.0.125.3.md diff --git a/changelog-pro/80.v.0.125.2.md b/changelog-pro/80.v.0.125.2.md new file mode 100644 index 00000000..a8a9bee1 --- /dev/null +++ b/changelog-pro/80.v.0.125.2.md @@ -0,0 +1,7 @@ +## 0.125.2 + +### May 9, 2024 + +### 🐛 Bug fixes + +- Fixes issue where Slider input `min` and `max` values were not being applied reactively to associated inputs when `show-inputs` prop was enabled. [#1341](https://github.com/formkit/formkit/issues/1341) diff --git a/changelog-pro/81.v.0.125.3.md b/changelog-pro/81.v.0.125.3.md new file mode 100644 index 00000000..05c80485 --- /dev/null +++ b/changelog-pro/81.v.0.125.3.md @@ -0,0 +1,7 @@ +## 0.125.3 + +### May 10, 2024 + +### 🐛 Bug fixes + +- Fixes issue where Slider number inputs were unable to accept decimal input. [#1341](https://github.com/formkit/formkit/issues/1341) From 33b2cb0f730c36f7fb34b584f5024fe7f459630e Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Fri, 10 May 2024 11:20:09 -0400 Subject: [PATCH 28/83] docs: adds changelog for FormKit Pro v0.125.4 --- changelog-pro/82.v.0.125.4.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 changelog-pro/82.v.0.125.4.md diff --git a/changelog-pro/82.v.0.125.4.md b/changelog-pro/82.v.0.125.4.md new file mode 100644 index 00000000..e7f920d8 --- /dev/null +++ b/changelog-pro/82.v.0.125.4.md @@ -0,0 +1,7 @@ +## 0.125.4 + +### May 10, 2024 + +### 🐛 Bug fixes + +- Fixes issue where `currency` input when using either the `max` or `min` prop did not allow the use of decimal points [#1344](https://github.com/formkit/formkit/issues/1344). From 216a6c51f0cee3838b054b9d82779ddb9cb2eee5 Mon Sep 17 00:00:00 2001 From: Justin Schroeder Date: Tue, 14 May 2024 13:42:42 -0400 Subject: [PATCH 29/83] feat: 1.6.3 changelog --- api-reference/context.md | 15 +++++++++++++++ changelog/32.v1.6.2.md | 15 +++++++++------ 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/api-reference/context.md b/api-reference/context.md index 255ab776..2fb1ea38 100644 --- a/api-reference/context.md +++ b/api-reference/context.md @@ -175,11 +175,26 @@ Current state of the input: * list, or form, this is true if any children have errors on them. */ errors: boolean + /** + * Determines if the input should be considered "invalid" — note that this + * is not the opposite of the valid state. A valid input is one where the + * input is not loading, not pending validation, not unsettled, and + * passes all validation rules. An invalid input is one whose validation + * rules are not explicitly not passing, and those rules are visible to the user. + */ + invalid: boolean | undefined /** * The loading state of the input or form. This property is only added while * the input is loading and is removed when loading is complete. */ loading: true | undefined + /** + * If the input is passing all validation rules. This state will remain + * in its current state until validation has completed, so if the input + * is not passing, and you have a long running validation rule this will + * remaining not passing until that rule has resolved. + */ + passing?: boolean /** * Indicates if the input is has the "required" validation rule. */ diff --git a/changelog/32.v1.6.2.md b/changelog/32.v1.6.2.md index 198eb653..92930941 100644 --- a/changelog/32.v1.6.2.md +++ b/changelog/32.v1.6.2.md @@ -1,9 +1,12 @@ -## 1.6.2 +## 1.6.3 -### April 8, 2024 +### May 14, 2024 -### 🐛 Bug fixes +## 💪 New Features +- New clear on submit option for local storage +- New `context.state.passing` property indicates whether or not a given input is passing all its validation rules. -- Widens unocss compatibility for the `@formkit/themes` package ([#1281](https://github.com/formkit/formkit/issues/1281)). -- Small German translation fix ([#1293](https://github.com/formkit/formkit/issues/1293)). -- Adds additional dependencies to the `create-app` cli command ([#1233](https://github.com/formkit/formkit/issues/1233)). \ No newline at end of file +## 🐛 Bug fixes +- Fixes auto animate plugin for FormKit components ([#1354](https://github.com/formkit/formkit/issues/1354)). +- On multi-step inputs `beforeStepChange` is no longer called when the step cannot be advanced ([#1191](https://github.com/formkit/formkit/issues/1191)). +- Quickly typing into an input no longer causes an invalid state flicker ([#1324](https://github.com/formkit/formkit/issues/1324)). \ No newline at end of file From dc0ab8a11eb8dc2ad9a5324c8e388348a3e62d70 Mon Sep 17 00:00:00 2001 From: Andrew Boyd Date: Tue, 14 May 2024 14:21:33 -0400 Subject: [PATCH 30/83] docs: updates pro changelog and adds colorpicker alpha example --- .examples/colorpicker/alpha.vue | 16 ++++++++++++++++ changelog-pro/63.v.0.122.17.md | 2 +- changelog-pro/83.v.0.125.5.md | 13 +++++++++++++ inputs/colorpicker.md | 18 ++++++++++++++++++ 4 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 .examples/colorpicker/alpha.vue create mode 100644 changelog-pro/83.v.0.125.5.md diff --git a/.examples/colorpicker/alpha.vue b/.examples/colorpicker/alpha.vue new file mode 100644 index 00000000..059777cb --- /dev/null +++ b/.examples/colorpicker/alpha.vue @@ -0,0 +1,16 @@ + diff --git a/changelog-pro/63.v.0.122.17.md b/changelog-pro/63.v.0.122.17.md index 802dfd94..b779c62c 100644 --- a/changelog-pro/63.v.0.122.17.md +++ b/changelog-pro/63.v.0.122.17.md @@ -2,6 +2,6 @@ ### April 22, 2024 -### 🐛 Features +### 💪 New Features - Makes `optionsLoader` function available as a prop for dropdown family inputs. \ No newline at end of file diff --git a/changelog-pro/83.v.0.125.5.md b/changelog-pro/83.v.0.125.5.md new file mode 100644 index 00000000..1c9a28ff --- /dev/null +++ b/changelog-pro/83.v.0.125.5.md @@ -0,0 +1,13 @@ +## 0.125.5 + +### May 14, 2024 + +### 💪 New Features + +- The `colorpicker` input now has an `alpha` prop which allows users to disable the alpha channel in the color picker [#1302](https://github.com/formkit/formkit/issues/1302) + +### 🐛 Bug fixes + +- Fixes issue where `dropdown` family inputs' listbox position would be incorrect when opened, inverted, and filtered while in `popover` mode. [#1310](https://github.com/formkit/formkit/issues/1310) +- Fixes issue where `dropdown` family inputs could trigger a javascript error due to having `id` attributes that were valid yet incompatible with `querySelector` syntax. [#1313](https://github.com/formkit/formkit/issues/1313) +- Fixes issue where linked inputs for the `slider` would not have reactive `min` and `max` properties. [#1341](https://github.com/formkit/formkit/issues/1341) diff --git a/inputs/colorpicker.md b/inputs/colorpicker.md index 92e06939..4805ef12 100644 --- a/inputs/colorpicker.md +++ b/inputs/colorpicker.md @@ -51,6 +51,18 @@ There may be times where you wish to show one format to users as a default but r --- :: +### Disabling the alpha channel + +You can disable the alpha channel in the `colorpicker` by setting the `alpha` prop to `false`. This will enforce full opacity on values. Any values with an alpha channel will be converted to full opacity. + +::Example +--- + name: "Color input" + file: "_content/_examples/colorpicker/alpha.vue" + minHeight: 400 +--- +:: + ## Swatches Swatches are provided using the `options` prop and use the same `options` API as the `select`, `dropdown`, `autocomplete` and `taglist` inputs from FormKit. @@ -138,6 +150,12 @@ data: [ default: "hex", description: "The format that the colorpicker input should show in the input preview and be the default setting for the picker panel input. Can be set to hex, hsla or rgba.", }, + { + prop: "alpha", + type: "boolean", + default: "true", + description: "When set to false the alpha channel will be disabled in the color picker.", + }, { prop: "value-format", type: "string", From f11bfc73ab5dceda73d623d89c94b1ca63e9a266 Mon Sep 17 00:00:00 2001 From: Andrew Boyd Date: Tue, 14 May 2024 14:29:52 -0400 Subject: [PATCH 31/83] chore: fix heading level in changelog --- changelog/{32.v1.6.2.md => 33.v1.6.2.md} | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) rename changelog/{32.v1.6.2.md => 33.v1.6.2.md} (93%) diff --git a/changelog/32.v1.6.2.md b/changelog/33.v1.6.2.md similarity index 93% rename from changelog/32.v1.6.2.md rename to changelog/33.v1.6.2.md index 92930941..479e1ca2 100644 --- a/changelog/32.v1.6.2.md +++ b/changelog/33.v1.6.2.md @@ -2,11 +2,11 @@ ### May 14, 2024 -## 💪 New Features +### 💪 New Features - New clear on submit option for local storage - New `context.state.passing` property indicates whether or not a given input is passing all its validation rules. -## 🐛 Bug fixes +### 🐛 Bug fixes - Fixes auto animate plugin for FormKit components ([#1354](https://github.com/formkit/formkit/issues/1354)). - On multi-step inputs `beforeStepChange` is no longer called when the step cannot be advanced ([#1191](https://github.com/formkit/formkit/issues/1191)). - Quickly typing into an input no longer causes an invalid state flicker ([#1324](https://github.com/formkit/formkit/issues/1324)). \ No newline at end of file From c3f4a1bdbc973f01670dc2b9f544634d388f6bd1 Mon Sep 17 00:00:00 2001 From: Andrew Boyd Date: Tue, 14 May 2024 15:24:51 -0400 Subject: [PATCH 32/83] docs: adds changelog for pro --- changelog-pro/84.v.0.125.6.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 changelog-pro/84.v.0.125.6.md diff --git a/changelog-pro/84.v.0.125.6.md b/changelog-pro/84.v.0.125.6.md new file mode 100644 index 00000000..6ad2dbff --- /dev/null +++ b/changelog-pro/84.v.0.125.6.md @@ -0,0 +1,7 @@ +## 0.125.5 + +### May 14, 2024 + +### 🐛 Bug fixes + +- Fixes issue where schema sections in Pro inputs with existing `meta` keys were not being assigned programmatic `meta` values. This was preventing the `eachSection` helper function from being able access some sections — which in turn was preventing the AutoAnimate plugin from being able to be applied to repeater items. Whew... this one was a doozy. 😅 \ No newline at end of file From 60e92e4a45f34d594aedb09ff822957612767584 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Tue, 14 May 2024 16:01:54 -0400 Subject: [PATCH 33/83] docs: adds changelog for formkit pro v0.125.7 --- changelog-pro/85.v.0.125.7.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 changelog-pro/85.v.0.125.7.md diff --git a/changelog-pro/85.v.0.125.7.md b/changelog-pro/85.v.0.125.7.md new file mode 100644 index 00000000..518f85cc --- /dev/null +++ b/changelog-pro/85.v.0.125.7.md @@ -0,0 +1,7 @@ +## 0.125.7 + +### May 14, 2024 + +### 🐛 Bug fixes + +- Fixes issue where auto-animate plugin would conflict with drag and drop animations on repeater input. \ No newline at end of file From 51d94c0cc326ac3514b2db5571b73ec0ad834ad9 Mon Sep 17 00:00:00 2001 From: Andrew Boyd Date: Tue, 21 May 2024 13:19:48 -0400 Subject: [PATCH 34/83] chore: fix typo in changelog --- changelog-pro/84.v.0.125.6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelog-pro/84.v.0.125.6.md b/changelog-pro/84.v.0.125.6.md index 6ad2dbff..66b7cdcd 100644 --- a/changelog-pro/84.v.0.125.6.md +++ b/changelog-pro/84.v.0.125.6.md @@ -1,4 +1,4 @@ -## 0.125.5 +## 0.125.6 ### May 14, 2024 From 59bfa3921513466876ece75cc382f61683340463 Mon Sep 17 00:00:00 2001 From: Andrew Boyd Date: Tue, 21 May 2024 13:25:32 -0400 Subject: [PATCH 35/83] docs: updates changelogs --- changelog-pro/86.v.0.125.8.md | 7 +++++++ changelog-pro/87.v.0.125.9.md | 7 +++++++ changelog/33.v1.6.2.md | 14 +++++--------- changelog/34.v1.6.3.md | 12 ++++++++++++ 4 files changed, 31 insertions(+), 9 deletions(-) create mode 100644 changelog-pro/86.v.0.125.8.md create mode 100644 changelog-pro/87.v.0.125.9.md create mode 100644 changelog/34.v1.6.3.md diff --git a/changelog-pro/86.v.0.125.8.md b/changelog-pro/86.v.0.125.8.md new file mode 100644 index 00000000..b8861707 --- /dev/null +++ b/changelog-pro/86.v.0.125.8.md @@ -0,0 +1,7 @@ +## 0.125.8 + +### May 16, 2024 + +### 🐛 Bug fixes + +- Checks that document contains popover element before attempting mutation on it to prevent possible unhandled exceptions with `datepicker` panel. \ No newline at end of file diff --git a/changelog-pro/87.v.0.125.9.md b/changelog-pro/87.v.0.125.9.md new file mode 100644 index 00000000..326dae3a --- /dev/null +++ b/changelog-pro/87.v.0.125.9.md @@ -0,0 +1,7 @@ +## 0.125.9 + +### May 21, 2024 + +### 🐛 Bug fixes + +- Fixes missing `label` slot in type definition of `currency` input. \ No newline at end of file diff --git a/changelog/33.v1.6.2.md b/changelog/33.v1.6.2.md index 479e1ca2..c05215b1 100644 --- a/changelog/33.v1.6.2.md +++ b/changelog/33.v1.6.2.md @@ -1,12 +1,8 @@ -## 1.6.3 +## 1.6.2 -### May 14, 2024 - -### 💪 New Features -- New clear on submit option for local storage -- New `context.state.passing` property indicates whether or not a given input is passing all its validation rules. +### April 8, 2024 ### 🐛 Bug fixes -- Fixes auto animate plugin for FormKit components ([#1354](https://github.com/formkit/formkit/issues/1354)). -- On multi-step inputs `beforeStepChange` is no longer called when the step cannot be advanced ([#1191](https://github.com/formkit/formkit/issues/1191)). -- Quickly typing into an input no longer causes an invalid state flicker ([#1324](https://github.com/formkit/formkit/issues/1324)). \ No newline at end of file +- Widens unocss compatibility for the @formkit/themes package [#1281](https://github.com/formkit/formkit/pull/1281). +- Small German translation fix [#1293](https://github.com/formkit/formkit/issues/1293). +- Adds additional dependencies to the create-app cli command [#1233](https://github.com/formkit/formkit/issues/1233). diff --git a/changelog/34.v1.6.3.md b/changelog/34.v1.6.3.md new file mode 100644 index 00000000..479e1ca2 --- /dev/null +++ b/changelog/34.v1.6.3.md @@ -0,0 +1,12 @@ +## 1.6.3 + +### May 14, 2024 + +### 💪 New Features +- New clear on submit option for local storage +- New `context.state.passing` property indicates whether or not a given input is passing all its validation rules. + +### 🐛 Bug fixes +- Fixes auto animate plugin for FormKit components ([#1354](https://github.com/formkit/formkit/issues/1354)). +- On multi-step inputs `beforeStepChange` is no longer called when the step cannot be advanced ([#1191](https://github.com/formkit/formkit/issues/1191)). +- Quickly typing into an input no longer causes an invalid state flicker ([#1324](https://github.com/formkit/formkit/issues/1324)). \ No newline at end of file From ad5b7b1f52776efe879fb056685f00fcfb9d2354 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Fri, 24 May 2024 08:06:01 -0400 Subject: [PATCH 36/83] docs: adds changelog for FormKit Pro v0.126.0, adds to transferlist docs --- changelog-pro/88.v.0.126.0.md | 12 ++++++++++++ inputs/transfer-list.md | 33 ++++++++++++++++++++++++++++++++- 2 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 changelog-pro/88.v.0.126.0.md diff --git a/changelog-pro/88.v.0.126.0.md b/changelog-pro/88.v.0.126.0.md new file mode 100644 index 00000000..9c3515ba --- /dev/null +++ b/changelog-pro/88.v.0.126.0.md @@ -0,0 +1,12 @@ +## 0.126.0 + +### May 24, 2024 + +### 💪 New features + +- Adds ability to search and filter target optoins of the `transferlist` input [#1374](https://github.com/formkit/formkit/issues/1374). + + +### 🐛 Bug fixes + +- Fixes `transferlist` accessibility issue [#1364](https://github.com/formkit/formkit/issues/1364). \ No newline at end of file diff --git a/inputs/transfer-list.md b/inputs/transfer-list.md index 62813c11..daa4b0e9 100644 --- a/inputs/transfer-list.md +++ b/inputs/transfer-list.md @@ -379,7 +379,13 @@ data: [ prop: "searchable", type: "boolean", default: "false", - description: "Enables the search input." + description: "Enables the search input for the source list." + }, + { + prop: "target-searchable", + type: "boolean", + default: "false", + description: "Enables the search input for the target list." }, { prop: "source-label", @@ -666,6 +672,31 @@ schema: [ } ] }, + { + name: "targetControls", + children: [ + { + name: "targetSearch", + class: "flex", + children: [ + { + name: "targetSearchInput", + class: "large" + }, + { + name: "targetSearchClear", + class: "small", + children: [ + { + name: "closeIcon", + content: "✕" + } + ] + } + ] + } + ] + }, { name: "targetListItems", children: [ From 1c42f6d6ba0db8f9ed7a9ab976777542d759db77 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Fri, 24 May 2024 10:35:52 -0400 Subject: [PATCH 37/83] docs: fixes type in v0.126.0 changelog --- changelog-pro/88.v.0.126.0.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelog-pro/88.v.0.126.0.md b/changelog-pro/88.v.0.126.0.md index 9c3515ba..a70cf8e3 100644 --- a/changelog-pro/88.v.0.126.0.md +++ b/changelog-pro/88.v.0.126.0.md @@ -4,7 +4,7 @@ ### 💪 New features -- Adds ability to search and filter target optoins of the `transferlist` input [#1374](https://github.com/formkit/formkit/issues/1374). +- Adds ability to search and filter target options of the `transferlist` input [#1374](https://github.com/formkit/formkit/issues/1374). ### 🐛 Bug fixes From 0ba695e7b187b18fab9745487071815568f9692b Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Fri, 24 May 2024 11:12:02 -0400 Subject: [PATCH 38/83] docs: adds changelog for FormKit Pro v0.126.1 --- changelog-pro/89.v.0.126.1.md | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 changelog-pro/89.v.0.126.1.md diff --git a/changelog-pro/89.v.0.126.1.md b/changelog-pro/89.v.0.126.1.md new file mode 100644 index 00000000..adea1339 --- /dev/null +++ b/changelog-pro/89.v.0.126.1.md @@ -0,0 +1,10 @@ +## 0.126.1 + +### May 24, 2024 + + +### 🐛 Bug fixes + +- Fixes `transferlist` issue where target options that had been loaded by `option-loader` could not be filtered properly. + +- Fixes `transferlist` issue where occasionally the active-descendant was not set during filtration. \ No newline at end of file From 4e90c0654858406dea6ebbe098195202caf74928 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Fri, 24 May 2024 11:55:17 -0400 Subject: [PATCH 39/83] docs: adds changelog for FormKit Pro v0.126.2 --- changelog-pro/90.v.0.126.2.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 changelog-pro/90.v.0.126.2.md diff --git a/changelog-pro/90.v.0.126.2.md b/changelog-pro/90.v.0.126.2.md new file mode 100644 index 00000000..32a0c4a7 --- /dev/null +++ b/changelog-pro/90.v.0.126.2.md @@ -0,0 +1,8 @@ +## 0.126.2 + +### May 24, 2024 + + +### 🐛 Bug fixes + +- Fixes `datepicker` hydration attribute mismatch [#1152](https://github.com/formkit/formkit/issues/1152). \ No newline at end of file From 1902fa2fdd99ebb3f7fbb96ec9c7be341055e29e Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Fri, 24 May 2024 12:49:26 -0400 Subject: [PATCH 40/83] docs: adds changelog for FormKit Pro v0.126.3 --- changelog-pro/91.v.0.126.3.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 changelog-pro/91.v.0.126.3.md diff --git a/changelog-pro/91.v.0.126.3.md b/changelog-pro/91.v.0.126.3.md new file mode 100644 index 00000000..a58e302d --- /dev/null +++ b/changelog-pro/91.v.0.126.3.md @@ -0,0 +1,8 @@ +## 0.126.3 + +### May 24, 2024 + + +### 🐛 Bug fixes + +- Fixes `datepicker` "selected" date issue related to usage of `max-date` being set before current date [#1355](https://github.com/formkit/formkit/issues/1355). \ No newline at end of file From 327f43b5bbadbdbabf5fdfdfee0344eb7f98793b Mon Sep 17 00:00:00 2001 From: Justin Schroeder Date: Tue, 28 May 2024 13:39:37 -0400 Subject: [PATCH 41/83] docs: adds 1.6.4 to changelog --- changelog/35.v1.6.4.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 changelog/35.v1.6.4.md diff --git a/changelog/35.v1.6.4.md b/changelog/35.v1.6.4.md new file mode 100644 index 00000000..0cfe70a6 --- /dev/null +++ b/changelog/35.v1.6.4.md @@ -0,0 +1,8 @@ +## 1.6.4 + +### May 28, 2024 + +### 🐛 Bug fixes + +- Fixes a bug with validation rule observers that caused rules with external dependencies to stop firing when placed in a certain sequence ([#1371](https://github.com/formkit/formkit/issues/1371)). +- Fixes a bug that caused inputs with no validation rules to receive the `data-invalid` attribute on reset (regression in 1.6.3) ([#1376](https://github.com/formkit/formkit/issues/1376)) \ No newline at end of file From 94953d75b934e86d119adf7ecac2f94a2d4b3f99 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Tue, 28 May 2024 13:39:45 -0400 Subject: [PATCH 42/83] docs: adds changelog for FormKit Pro v0.126.4 --- changelog-pro/92.v.0.126.4.md | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 changelog-pro/92.v.0.126.4.md diff --git a/changelog-pro/92.v.0.126.4.md b/changelog-pro/92.v.0.126.4.md new file mode 100644 index 00000000..a7fdad25 --- /dev/null +++ b/changelog-pro/92.v.0.126.4.md @@ -0,0 +1,10 @@ +## 0.126.4 + +### May 28, 2024 + + +### 🐛 Bug fixes + +- Fixes `datepicker` min-date and max-date display error issue [#1101](https://github.com/formkit/formkit/issues/1101). + +- Fixes `autocomplete` of type multiple issue with tabindex of 1: [#1382](https://github.com/formkit/formkit/issues/1382). \ No newline at end of file From f2ef2d32bf4fe1a1cdb613bb93d778d8fb4c3cfa Mon Sep 17 00:00:00 2001 From: Justin Schroeder Date: Tue, 28 May 2024 14:14:33 -0400 Subject: [PATCH 43/83] docs: 1.6.5 changelog: --- changelog/36.v1.6.5.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 changelog/36.v1.6.5.md diff --git a/changelog/36.v1.6.5.md b/changelog/36.v1.6.5.md new file mode 100644 index 00000000..32960ec3 --- /dev/null +++ b/changelog/36.v1.6.5.md @@ -0,0 +1,7 @@ +## 1.6.5 + +### May 28, 2024 + +### 🐛 Bug fixes + +- Fixes a bug that causes the `data-invalid` attribute to not be removed when conditionally removing validation rules ([#1384](https://github.com/formkit/formkit/issues/1384)). From 1bbf4568b1cb0cd05fa2b8902887a78dbd0f1ae7 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Mon, 3 Jun 2024 08:19:26 -0400 Subject: [PATCH 44/83] docs: adds changelog for FormKit Pro v0.126.5 --- changelog-pro/93.v.0.126.5.md | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 changelog-pro/93.v.0.126.5.md diff --git a/changelog-pro/93.v.0.126.5.md b/changelog-pro/93.v.0.126.5.md new file mode 100644 index 00000000..74712c31 --- /dev/null +++ b/changelog-pro/93.v.0.126.5.md @@ -0,0 +1,8 @@ +## 0.126.5 + +### June 3, 2024 + + +### 🐛 Bug fixes + +- Performance improvement for `datepicker` input when hovering over day cells [#1360](https://github.com/formkit/formkit/issues/1360). \ No newline at end of file From 45afde8f4c4e6e39ef3cdac30b4a5ebbe0d5b578 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Mon, 3 Jun 2024 13:55:23 -0400 Subject: [PATCH 45/83] docs: adds changelog for FormKit Pro v0.126.6 and updates emoji in FormKit Pro v0.126.5 --- changelog-pro/93.v.0.126.5.md | 2 +- changelog-pro/94.v.0.126.6.md | 9 +++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 changelog-pro/94.v.0.126.6.md diff --git a/changelog-pro/93.v.0.126.5.md b/changelog-pro/93.v.0.126.5.md index 74712c31..cdf50ccf 100644 --- a/changelog-pro/93.v.0.126.5.md +++ b/changelog-pro/93.v.0.126.5.md @@ -3,6 +3,6 @@ ### June 3, 2024 -### 🐛 Bug fixes +### 🏎 Performance - Performance improvement for `datepicker` input when hovering over day cells [#1360](https://github.com/formkit/formkit/issues/1360). \ No newline at end of file diff --git a/changelog-pro/94.v.0.126.6.md b/changelog-pro/94.v.0.126.6.md new file mode 100644 index 00000000..839adde8 --- /dev/null +++ b/changelog-pro/94.v.0.126.6.md @@ -0,0 +1,9 @@ +## 0.126.6 + +### June 3, 2024 + +### 🐛 Bug fixes + +- Fixes issue where in certain cases datepicker would set parent form as `dirty` with initial value [#844](https://github.com/formkit/formkit/issues/844). + +- Fixes issue where `datepicker` min-date prop was not reactive [#976](https://github.com/formkit/formkit/issues/976). \ No newline at end of file From 5c3d5724488f0f842bf8eb7848bc62af7a763bee Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Wed, 5 Jun 2024 09:00:58 -0400 Subject: [PATCH 46/83] docs: adds changelog for FormKit Pro v0.126.7 --- changelog-pro/95.v.0.126.7.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 changelog-pro/95.v.0.126.7.md diff --git a/changelog-pro/95.v.0.126.7.md b/changelog-pro/95.v.0.126.7.md new file mode 100644 index 00000000..60deb8fb --- /dev/null +++ b/changelog-pro/95.v.0.126.7.md @@ -0,0 +1,7 @@ +## 0.126.7 + +### June 5, 2024 + +### 🐛 Bug fixes + +- Fixes `datepicker` issue where navigating outside of the current month would close the datepicker [#1394](https://github.com/formkit/formkit/issues/1394). \ No newline at end of file From de9a6962ddfc3428c810281fdec1364c204b4aee Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Wed, 5 Jun 2024 09:12:43 -0400 Subject: [PATCH 47/83] fix: adds changelog for FormKit pro v0.126.8 --- changelog-pro/96.v.0.126.8.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 changelog-pro/96.v.0.126.8.md diff --git a/changelog-pro/96.v.0.126.8.md b/changelog-pro/96.v.0.126.8.md new file mode 100644 index 00000000..da21e2a3 --- /dev/null +++ b/changelog-pro/96.v.0.126.8.md @@ -0,0 +1,7 @@ +## 0.126.8 + +### June 5, 2024 + +### 🐛 Bug fixes + +- Fixes `currency` issue where FormKit's DOM input event was not emitted [#1366](https://github.com/formkit/formkit/issues/1366). \ No newline at end of file From d5dc2785efa654d7c62d7f0fb98ed8736176b171 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Wed, 5 Jun 2024 12:52:21 -0400 Subject: [PATCH 48/83] docs: adjusts version number of FormKit Pro v0.126.9 changelog --- changelog-pro/97.v.0.126.9.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 changelog-pro/97.v.0.126.9.md diff --git a/changelog-pro/97.v.0.126.9.md b/changelog-pro/97.v.0.126.9.md new file mode 100644 index 00000000..a2633da3 --- /dev/null +++ b/changelog-pro/97.v.0.126.9.md @@ -0,0 +1,7 @@ +## 0.126.9 + +### June 5, 2024 + +### 🐛 Bug fixes + +- Fixes tabfocus issue for datepicker and mask where tabbing into input field would always select the last enum. [#999](https://github.com/formkit/formkit/issues/999). \ No newline at end of file From 93fc420701ec7fecc356aabc7fafdf60a070df2a Mon Sep 17 00:00:00 2001 From: Nicolas Hedger <649677+nhedger@users.noreply.github.com> Date: Fri, 7 Jun 2024 20:16:07 +0200 Subject: [PATCH 49/83] Fix typo --- plugins/multi-step.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/multi-step.md b/plugins/multi-step.md index ab9447e0..6abde285 100644 --- a/plugins/multi-step.md +++ b/plugins/multi-step.md @@ -197,7 +197,7 @@ file: [ --- :: -## Programatic Nagivation +## Programmatic Navigation The multi-step node is equipped with convenient helper functions designed to facilitate programmatic navigation between any of its steps. These functions include: From 79cbebaa5ae68a7457cfab2a36accc69fe44eb1a Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Mon, 10 Jun 2024 08:10:01 -0400 Subject: [PATCH 50/83] docs: adds changelog for FormKit Pro v0.126.10 --- changelog-pro/98.v.0.126.10.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 changelog-pro/98.v.0.126.10.md diff --git a/changelog-pro/98.v.0.126.10.md b/changelog-pro/98.v.0.126.10.md new file mode 100644 index 00000000..fb9d7590 --- /dev/null +++ b/changelog-pro/98.v.0.126.10.md @@ -0,0 +1,7 @@ +## 0.126.10 + +### June 10, 2024 + +### 🐛 Bug fixes + +- Fixes issue where programatically setting the value of the `autocomplete` input with type `multiple` would trigger a focus state on the input itself [#1400](https://github.com/formkit/formkit/issues/1400). \ No newline at end of file From def0f1b2d6849196e6709f046983dd2b0c5e39d2 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Thu, 13 Jun 2024 06:22:06 -0400 Subject: [PATCH 51/83] docs: adds changelog for FormKit Pro v0.126.11 --- changelog-pro/99.v.0.126.11.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 changelog-pro/99.v.0.126.11.md diff --git a/changelog-pro/99.v.0.126.11.md b/changelog-pro/99.v.0.126.11.md new file mode 100644 index 00000000..8eec5f4c --- /dev/null +++ b/changelog-pro/99.v.0.126.11.md @@ -0,0 +1,7 @@ +## 0.126.11 + +### June 13, 2024 + +### 🐛 Bug fixes + +- Fixes build issue with FormKit Pro legacy genesis styles. \ No newline at end of file From 7d66d28aab5636e0046d664c2808a62cb7bf39eb Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Mon, 1 Jul 2024 13:38:06 -0400 Subject: [PATCH 52/83] docs: adds changelog for FormKit Pro v0.126.12 --- changelog-pro/100.v.0.126.12.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 changelog-pro/100.v.0.126.12.md diff --git a/changelog-pro/100.v.0.126.12.md b/changelog-pro/100.v.0.126.12.md new file mode 100644 index 00000000..2bb03c8a --- /dev/null +++ b/changelog-pro/100.v.0.126.12.md @@ -0,0 +1,7 @@ +## 0.126.12 + +### July 1, 2024 + +### 🐛 Bug fixes + +- Fixes issue where `loadOnCreated` prop would not verify `optionsLoader` before invoking [#1434](https://github.com/formkit/formkit/issues/1434). \ No newline at end of file From fc1a785afeb807ea8a0a9f1bbb9e3cf25db67ea7 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Thu, 11 Jul 2024 09:18:38 -0400 Subject: [PATCH 53/83] docs: adds changelog for FormKit Pro v0.126.13 --- changelog-pro/101.v.0.126.13.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 changelog-pro/101.v.0.126.13.md diff --git a/changelog-pro/101.v.0.126.13.md b/changelog-pro/101.v.0.126.13.md new file mode 100644 index 00000000..ac69e7e9 --- /dev/null +++ b/changelog-pro/101.v.0.126.13.md @@ -0,0 +1,7 @@ +## 0.126.13 + +### July 11, 2024 + +### 🐛 Bug fixes + +- Fixes issue where querySelector in repeater drag and drop feature was used incorrectly [#1417](https://github.com/formkit/formkit/issues/1417). \ No newline at end of file From 64d7210599adb78959efee2eabedfab425f86d2e Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Mon, 29 Jul 2024 11:04:41 -0400 Subject: [PATCH 54/83] docs: adds changelog for FormKit Pro v0.126.14 --- changelog-pro/102.v.0.126.14.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 changelog-pro/102.v.0.126.14.md diff --git a/changelog-pro/102.v.0.126.14.md b/changelog-pro/102.v.0.126.14.md new file mode 100644 index 00000000..4a97c0db --- /dev/null +++ b/changelog-pro/102.v.0.126.14.md @@ -0,0 +1,7 @@ +## 0.126.14 + +### July 29, 2024 + +### 🐛 Bug fixes + +- Fixes regression caused by performance update where date object was converted into tuple [#1439](https://github.com/formkit/formkit/issues/1439). \ No newline at end of file From d644351a6e44549f56f0e35a83f3ac54547325c0 Mon Sep 17 00:00:00 2001 From: Karl Swedberg Date: Wed, 31 Jul 2024 08:36:21 -0400 Subject: [PATCH 55/83] Address typos and punctuation issues on custom-inputs page --- essentials/custom-inputs.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/essentials/custom-inputs.md b/essentials/custom-inputs.md index 5bc3a21b..950a2959 100644 --- a/essentials/custom-inputs.md +++ b/essentials/custom-inputs.md @@ -49,7 +49,7 @@ New inputs require an [input definition](#input-definition). Input definitions c ### Input definition -Input definitions are objects that contain the necessary information to initialize an input — like which [props to accept](#adding-props), what [schema or component to render](#schema-vs-component), and if any additional [feature functions](#adding-features) should be included. The shape of the definition object is: +Input definitions are objects that contain the necessary information to initialize an input — like which [props to accept](#adding-props), what [schema or component to render](#schema-vs-component), and any additional [feature functions](#adding-features) that should be included. The shape of the definition object is: ```js { @@ -78,7 +78,7 @@ file: "_content/_examples/custom-input/custom-input.vue" --- :: -Even though this simplistic example doesn’t contain any input/output mechanism, it still qualifies as a full input. It can have a value, run validation rules (they wont be displayed, but they can block form submissions), and execute plugins. Fundamentally, all inputs are [core nodes](/essentials/architecture#node) and the input’s definition provides the mechanisms to interact with that node. +Even though this simple example doesn’t contain any input/output mechanism, it still qualifies as a full input. It can have a value, run validation rules (they won’t be displayed, but they can block form submissions), and execute plugins. Fundamentally, all inputs are [core nodes](/essentials/architecture#node) and the input’s definition provides the mechanisms to interact with that node. ### Global custom inputs @@ -167,7 +167,7 @@ The primary takeaway is if you are planning to use a custom input on multiple pr ### Future proofing -In the future, FormKit may expand to support additional frameworks (ex: React or Svelte. If this is something you are interested in, let us know!.) Writing your inputs using schema means your inputs will be compatible (perhaps minimal changes) with those frameworks too. +In the future, FormKit may expand to support additional frameworks (ex: React or Svelte. If this is something you are interested in, let us know!.) Writing your inputs using schema means your inputs will be compatible (perhaps with minimal changes) with those frameworks too. ## Schema inputs @@ -198,7 +198,7 @@ The `input` section in the diagram above is typically what you’ll swap out whe #### Using `createInput` to extend the base schema -To create inputs using the base schema you can use the `createInput()` utility from the `@formkit/vue` package. This function accepts 3 arguments: +To create inputs using the base schema, you can use the `createInput()` utility from the `@formkit/vue` package. This function accepts 3 arguments: - (required) A schema node _or_ a Vue component, which it inserts into the base schema at the `input` section (see diagram above). - (optional) An object of [input definition](#input-definition) properties to merge with an auto-generated one. @@ -246,12 +246,12 @@ In the above example, we were able to re-create the same features as the `create type: "info" label: "Custom inputs vs Vue component wrappers" --- -When writing a custom FormKit input while using Vue components it is recommended to not use the FormKit components inside, custom inputs are meant to be written like regular inputs with the advantage of using the FormKit context prop to add the functionality that FormKit requires, if your case is to use a FormKit component with default values, it is recommended instead to use a Vue component wrapper and directly call that component, FormKit inputs work in any level of nesting, or you can also consider using FormKit's input export feature to add features and change attrs and props. +When writing a custom FormKit input while using Vue components, it is recommended to not use the FormKit components inside. Custom inputs are meant to be written like regular inputs with the advantage of using the FormKit context prop to add the functionality that FormKit requires. If your case is to use a FormKit component with default values, it is recommended instead to use a Vue component wrapper and directly call that component because FormKit inputs work in any level of nesting. Alternatively, you could use FormKit's input export feature to add features and change attrs and props. :: For most users, [passing a Vue component to `createInput`](#using-createinput-to-extend-the-base-schema) provides a good balance between customization and value-added features. If you’d like to completely eject from schema-based inputs all together, you can pass a component directly to an input definition. -Component inputs receive a single prop — [the `context` object](/essentials/configuration). It’s then up to you to write a component to encompasses the desired features of FormKit (labels, help text, message display, etc.). Checkout the [input checklist](#input-checklist) for a list of what you’ll want to output. +Component inputs receive a single prop — [the `context` object](/essentials/configuration). It’s then up to you to write a component that encompasses the desired features of FormKit (labels, help text, message display, etc.). Checkout the [input checklist](#input-checklist) for a list of what you’ll want to output. ## Input & output values @@ -262,7 +262,7 @@ Inputs have two critical roles: ### Receiving input -You can receive input from any user interaction and the input can set its value to any type of data. Inputs are _not_ limited to strings and numbers — they can happily store Arrays, Objects, or custom data structures. +You can receive input from any user interaction, and the input can set its value to any type of data. Inputs are _not_ limited to strings and numbers — they can happily store Arrays, Objects, or custom data structures. Fundamentally, all an input needs to do is call `node.input(value)` with a value. The `node.input()` method is automatically debounced, so feel free to call it frequently — like every keystroke. Typically, this looks like binding to the `input` event. @@ -372,7 +372,7 @@ file: [ ### Add props method (`node.addProps()`) -You can dynamically add props using the `node.addProps()` method in any runtime environment where you have access to the node. For custom inputs this is particularly helpful when used in a features. Both array notation and object notation are supported (see above). +You can dynamically add props using the `node.addProps()` method in any runtime environment where you have access to the node. For custom inputs this is particularly helpful when used in a features array. Both array notation and object notation are supported (see above). ::Example --- @@ -403,11 +403,11 @@ As an example, let's imagine you want to build an input that allows users to ent ## TypeScript support -FormKit is written in TypeScript and includes type definitions for all of its core inputs. If you are writing your own inputs and would like to provide TypeScript support you can define your own inputs using two module augmentations: +FormKit is written in TypeScript and includes type definitions for all of its core inputs. If you are writing your own inputs and would like to provide TypeScript support, you can define your own inputs using two module augmentations: ### Adding prop types -The `type` prop of the `` component is a string that is used as the key of a discriminated union of props (`FormKitInputProps`). By augmenting this type your custom inputs can define their own prop types. To do so you must augment the `FormKitInputProps` type to add your own custom types: +The `type` prop of the `` component is a string that is used as the key of a discriminated union of props (`FormKitInputProps`). By augmenting this type, your custom inputs can define their own prop types. To do so, you must augment the `FormKitInputProps` type to add your own custom types: ```ts declare module '@formkit/inputs' { @@ -450,7 +450,7 @@ declare module '@formkit/inputs' { } ``` -In the example above, we use `FormKitBaseSlots` — a TypeScript utility to add all the "basic" slots that most custom inputs implement, like `outer`, `label`, `help`, `message`, etc. However you could also define your own slots entirely from scratch, or augment `FormKitBaseSlots` to add additional slots (`FormKitBaseSlots & YourCustomSlots`). +In the example above, we use `FormKitBaseSlots` — a TypeScript utility to add all the "basic" slots that most custom inputs implement, like `outer`, `label`, `help`, `message`, etc. However, you could also define your own slots entirely from scratch, or augment `FormKitBaseSlots` to add additional slots (`FormKitBaseSlots & YourCustomSlots`). ```ts declare module '@formkit/inputs' { @@ -484,7 +484,7 @@ Below are some examples of custom inputs. They are not intended to be comprehens ### Simple text input -This is the simplest possible input and does not leverage any of FormKit’s built in DOM structure and only outputs a text input — however it is a fully functional member of the group it is nested inside of and able to read and write values. +This is the simplest possible input and does not leverage any of FormKit’s built-in DOM structure. It only outputs a text input — however, it is a fully functional member of the group it is nested inside of and able to read and write values. ::Example --- From 54c5cc8e63cb6c1f56b39f17c35fad66de6c9709 Mon Sep 17 00:00:00 2001 From: Karl Swedberg Date: Wed, 31 Jul 2024 10:31:39 -0400 Subject: [PATCH 56/83] =?UTF-8?q?Fix=20it's=20=E2=86=92=20its?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- inputs/meta.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/inputs/meta.md b/inputs/meta.md index e631f332..9732f994 100644 --- a/inputs/meta.md +++ b/inputs/meta.md @@ -13,7 +13,7 @@ type: "Meta" The `meta` input is meant to store arbitrary data that is not intended for display to end users. This input is hidden by default and can be used to store data that is not part of the form's schema. -Unlike the [hidden](/inputs/hidden) input (which renders an `` element), `meta` does not render *any* DOM elements so it’s value is in memory only and as such it can store any value type. In TypeScript its value is defined as `any`. +Unlike the [hidden](/inputs/hidden) input (which renders an `` element), `meta` does not render *any* DOM elements so its value is in memory only and as such it can store any value type. In TypeScript its value is defined as `any`. ## Basic example From 4cfa2a814ce9f625cfe127cbb31894e1d77deeba Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Thu, 1 Aug 2024 09:06:03 -0400 Subject: [PATCH 57/83] docs: adds changelog for FormKit Pro v0.126.15 --- changelog-pro/103.v.0.126.15.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 changelog-pro/103.v.0.126.15.md diff --git a/changelog-pro/103.v.0.126.15.md b/changelog-pro/103.v.0.126.15.md new file mode 100644 index 00000000..8b9845f0 --- /dev/null +++ b/changelog-pro/103.v.0.126.15.md @@ -0,0 +1,11 @@ +## 0.126.15 + +### August 1, 2024 + +### 🐛 Bug fixes + +- Fixes mask issue where autofill on Chrome browser would not update the input's value [#1315](https://github.com/formkit/formkit/issues/1315). + +- Fixes issue where the repeater would not render its controls and base height when the default slot was empty [#1465](https://github.com/formkit/formkit/issues/1465). + +- Fixes issue where mask input type attribute was incorrect [#1467](https://github.com/formkit/formkit/issues/1467). \ No newline at end of file From 103ce65a5720d31cd53c3607cc9093766ae2223b Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Thu, 1 Aug 2024 14:20:56 -0400 Subject: [PATCH 58/83] docs: adds changelog for FormKit Pro v0.126.16 --- changelog-pro/104.v.0.126.16.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 changelog-pro/104.v.0.126.16.md diff --git a/changelog-pro/104.v.0.126.16.md b/changelog-pro/104.v.0.126.16.md new file mode 100644 index 00000000..d941bf0a --- /dev/null +++ b/changelog-pro/104.v.0.126.16.md @@ -0,0 +1,7 @@ +## 0.126.16 + +### August 1, 2024 + +### 🐛 Bug fixes + +- Fixes mask issue related to [#1315](https://github.com/formkit/formkit/issues/1315) where autofill would work on the first time but not the second. \ No newline at end of file From 10d66e7bed466bd22511f4d7572fd468a97465fe Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Tue, 20 Aug 2024 11:16:33 -0400 Subject: [PATCH 59/83] docs: adds docs for unit input --- .examples/unit/unit-default.vue | 109 +++++++++++++--- .examples/unit/unit-type-switcher.vue | 38 ------ .examples/unit/unit-value-unit.vue | 14 +++ inputs/unit.md | 173 ++++++++++++++++++++++++++ 4 files changed, 277 insertions(+), 57 deletions(-) delete mode 100644 .examples/unit/unit-type-switcher.vue create mode 100644 .examples/unit/unit-value-unit.vue create mode 100644 inputs/unit.md diff --git a/.examples/unit/unit-default.vue b/.examples/unit/unit-default.vue index bb1de13e..439af418 100644 --- a/.examples/unit/unit-default.vue +++ b/.examples/unit/unit-default.vue @@ -1,25 +1,96 @@ diff --git a/.examples/unit/unit-type-switcher.vue b/.examples/unit/unit-type-switcher.vue deleted file mode 100644 index 0286715e..00000000 --- a/.examples/unit/unit-type-switcher.vue +++ /dev/null @@ -1,38 +0,0 @@ - - - diff --git a/.examples/unit/unit-value-unit.vue b/.examples/unit/unit-value-unit.vue new file mode 100644 index 00000000..ba86b2b1 --- /dev/null +++ b/.examples/unit/unit-value-unit.vue @@ -0,0 +1,14 @@ + diff --git a/inputs/unit.md b/inputs/unit.md new file mode 100644 index 00000000..1432ca5e --- /dev/null +++ b/inputs/unit.md @@ -0,0 +1,173 @@ +--- +title: Unit +description: The unit input is used to create locale/unit specific parsed content for percentages, temperatures and measurements. +--- + +::InputPageHero +--- +type: "Unit" +--- +:: + +:PageToc + +:ProInstallSnippet + +## Unit Input + +The `unit` input allows for restricted input of values based on the provided unit (distance, weight, temperature, etc.) and locale. + +::Example +--- +name: "Unit input defaults" +file: "_content/_examples/unit/unit-default.vue" +--- +:: + +## Props + +### Unit + +The `unit` prop is the type of unit you want to display. A full list of allowed unit types are listed below: + +::ColumnList +--- +listItems: ['acre', 'bit', 'byte', 'celsius', 'centimeter', 'day', 'degree', 'fahrenheit', 'fluid-ounce', 'foot', 'gallon', 'gigabit', 'gigabyte', 'gram', 'hectare', 'hour', 'inch', 'kilobit', 'kilobyte', 'kilogram', 'kilometer', 'liter', 'megabit', 'megabyte', 'meter', 'microsecond', 'mile', 'mile-scandinavian', 'milliliter', 'millimeter', 'millisecond', 'minute', 'month', 'nanosecond', 'ounce', 'percent', 'petabyte', 'pound', 'second', 'stone', 'terabit', 'terabyte', 'week', 'yard', 'year'] +--- +:: + +### Locale + +By default the locale will use what you have set in your `formkit.config.ts` as the desired locale. However you can override this with the `displayLocale` prop. For example, `en-US`, `de-DE`, `en-IN`, `zh-CN`, etc, etc. + +### Decimals + +By default the decimals will display when the value contains the unit/locale decimal separator and will show default formatting decimal places to display for the given unit, however you can override this. By setting `decimals` to `false` or `0`, the value will not allow decimals or setting decimals to a numeric value will limit the maximum decimal places to that value. + +You can also choose to set a minimum number of decimals with the `minDecimals` prop. For example, you always want to show 2 decimal places you would set `minDecimals="2"`. + +### Minimum and Maximum Values + +Similar to a number input, you can set a `min` and `max` value. + +### Step + +Again, similar to a number input you can use the up/down keys to step the value. By default the step is `1` but you can override that with this prop. + +### Value Formatting + +Default value output is the value as a string to reduce issues with large number enumertation issues. However you can format the value as a string and include the currency symbol, grouping, decimal, etc as it is shown in the input. + +### Value unit + +The unit input also allowed for first-party conversion of one unit type to another. In this example, we will use `unit` of type `mile`, but the value +itself will be converted to `kilometers` when setting `value-unit` to `kilometer`. + +::Example +--- +name: "Unit type examples" +file: "_content/_examples/unit/unit-value-unit.vue" +--- +:: + +::Callout +--- +type: "warning" +label: "Mixed unit types" +--- +In order to convert one unit to another, they must be in the same taxonomy (so for example, you can not convert kilometers to liters). +:: + +## Props & Attributes + +::ReferenceTable +--- +input: "unit" +data: [ + { + prop: "unit", + type: "string", + default: "percent", + description: "Set the specified unit to use for this input" + }, + { + prop: "displayLocale", + type: "string", + default: "en-US", + description: "Set the desired display locale to use for this input" + }, + { + prop: "decimals", + type: "boolean|number", + default: "null", + description: "Choose to either completely disallow decimals or override the maximum number of decimals for the input" + }, + { + prop: "minDecimals", + type: "number", + default: "null", + description: "Choose to show a minimum number of decimals should your input require this" + }, + { + prop: "min", + type: "number", + default: "null", + description: "Minimum numeric value allowed. If zero or above, negatives will not be allowed" + }, + { + prop: "max", + type: "number", + default: "null", + description: "Maximum numeric value allowed for this input" + }, + { + prop: "step", + type: "number", + default: "1", + description: "When using the up/down keys, how much to modify the current value." + }, + { + prop: "valueDecimals", + type: "string | number", + default: undefined, + description: "Determines the allowed number of decimals for the valueUnit." + }, + { + prop: "valueFormat", + type: "string", + default: "number", + description: "Choose between number and string whether you want a numeric value or a parsed string value" + }, + { + prop: "valueUnit", + type: "string", + default: "undefined", + description: "Used to convert the user-inputted value from one unit to another" + }, + { + prop: "unitFormatting", + type: "string | boolean", + default: true, + description: "When set to false, no formatting will be applied for the given unit type." + }, +] +--- +:: + + +## Sections + +:SectionKeysIntro + +### Unit input diagram + +::FormKitInputDiagram +--- +prefix-icon-content: "" +suffix-icon-content: "" +label-content: "Unit Input" +input-content: "1,234.56%" +help-content: "Help text goes here" +message-content: "Any messages would appear here" +--- +:: From ebd99b0fb81e204595fc544a538b3b23608955f0 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Tue, 20 Aug 2024 11:30:23 -0400 Subject: [PATCH 60/83] fixes typo --- inputs/unit.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/inputs/unit.md b/inputs/unit.md index 1432ca5e..555613e6 100644 --- a/inputs/unit.md +++ b/inputs/unit.md @@ -1,6 +1,6 @@ --- title: Unit -description: The unit input is used to create locale/unit specific parsed content for percentages, temperatures and measurements. +description: The unit input allows for restricted input of values based on the provided unit (distance, weight, temperature, etc.) and locale. --- ::InputPageHero @@ -60,7 +60,7 @@ Default value output is the value as a string to reduce issues with large number ### Value unit -The unit input also allowed for first-party conversion of one unit type to another. In this example, we will use `unit` of type `mile`, but the value +The unit input also allows for first-party conversion of one unit type to another. In this example, we will use `unit` of type `mile`, but the value itself will be converted to `kilometers` when setting `value-unit` to `kilometer`. ::Example @@ -166,7 +166,7 @@ data: [ prefix-icon-content: "" suffix-icon-content: "" label-content: "Unit Input" -input-content: "1,234.56%" +input-content: "100 mi" help-content: "Help text goes here" message-content: "Any messages would appear here" --- From cb4d762add1d750cd88d2284a289cc95414aec37 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Tue, 20 Aug 2024 11:45:15 -0400 Subject: [PATCH 61/83] docs: adds changelog for FormKit Pro v0.127.0 --- changelog-pro/105.v.0.127.0.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 changelog-pro/105.v.0.127.0.md diff --git a/changelog-pro/105.v.0.127.0.md b/changelog-pro/105.v.0.127.0.md new file mode 100644 index 00000000..fb4bc23b --- /dev/null +++ b/changelog-pro/105.v.0.127.0.md @@ -0,0 +1,15 @@ +## 0.127.0 + +### August 20, 2024 + +### 💪 New Features + +- Adds `unit` input . + +### 🐛 Bug fixes + +- Fixes issue where dropdown family inputs did not work well when using validation and auto-animate ([#1182](https://github.com/formkit/formkit/issues/1182)). + +- Fixes issue where selecting a currently "selected" option from the listbox did not close the listbox (when `close-on-select` was set to true) ([#1126](https://github.com/formkit/formkit/issues/1126)). + + From ac8269f40ce59d5d1f5bc7d827f534b2669b1dab Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Tue, 20 Aug 2024 11:57:04 -0400 Subject: [PATCH 62/83] removes erroneous changelog items --- changelog-pro/105.v.0.127.0.md | 7 ------- 1 file changed, 7 deletions(-) diff --git a/changelog-pro/105.v.0.127.0.md b/changelog-pro/105.v.0.127.0.md index fb4bc23b..bb0ea7a7 100644 --- a/changelog-pro/105.v.0.127.0.md +++ b/changelog-pro/105.v.0.127.0.md @@ -6,10 +6,3 @@ - Adds `unit` input . -### 🐛 Bug fixes - -- Fixes issue where dropdown family inputs did not work well when using validation and auto-animate ([#1182](https://github.com/formkit/formkit/issues/1182)). - -- Fixes issue where selecting a currently "selected" option from the listbox did not close the listbox (when `close-on-select` was set to true) ([#1126](https://github.com/formkit/formkit/issues/1126)). - - From 37a0e45f57e73ea474b96a05e7d1f240738ed60d Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Wed, 21 Aug 2024 07:03:18 -0400 Subject: [PATCH 63/83] docs: adds examples to unit docs --- .examples/unit/unit-decimals.vue | 27 ++++++++ .examples/unit/unit-default.vue | 96 ---------------------------- .examples/unit/unit-display.vue | 18 ++++++ .examples/unit/unit-locale.vue | 35 ++++++++++ .examples/unit/unit-min-max.vue | 27 ++++++++ .examples/unit/unit-step.vue | 19 ++++++ .examples/unit/unit-value-format.vue | 32 ++++++++++ .examples/unit/unit.vue | 27 ++++++++ inputs/unit.md | 50 ++++++++++++++- 9 files changed, 233 insertions(+), 98 deletions(-) create mode 100644 .examples/unit/unit-decimals.vue delete mode 100644 .examples/unit/unit-default.vue create mode 100644 .examples/unit/unit-display.vue create mode 100644 .examples/unit/unit-locale.vue create mode 100644 .examples/unit/unit-min-max.vue create mode 100644 .examples/unit/unit-step.vue create mode 100644 .examples/unit/unit-value-format.vue create mode 100644 .examples/unit/unit.vue diff --git a/.examples/unit/unit-decimals.vue b/.examples/unit/unit-decimals.vue new file mode 100644 index 00000000..7ca25f4f --- /dev/null +++ b/.examples/unit/unit-decimals.vue @@ -0,0 +1,27 @@ + + + diff --git a/.examples/unit/unit-default.vue b/.examples/unit/unit-default.vue deleted file mode 100644 index 439af418..00000000 --- a/.examples/unit/unit-default.vue +++ /dev/null @@ -1,96 +0,0 @@ - - - diff --git a/.examples/unit/unit-display.vue b/.examples/unit/unit-display.vue new file mode 100644 index 00000000..a2a2f725 --- /dev/null +++ b/.examples/unit/unit-display.vue @@ -0,0 +1,18 @@ + + + diff --git a/.examples/unit/unit-locale.vue b/.examples/unit/unit-locale.vue new file mode 100644 index 00000000..84308fb0 --- /dev/null +++ b/.examples/unit/unit-locale.vue @@ -0,0 +1,35 @@ + + + diff --git a/.examples/unit/unit-min-max.vue b/.examples/unit/unit-min-max.vue new file mode 100644 index 00000000..d7a49c65 --- /dev/null +++ b/.examples/unit/unit-min-max.vue @@ -0,0 +1,27 @@ + + + diff --git a/.examples/unit/unit-step.vue b/.examples/unit/unit-step.vue new file mode 100644 index 00000000..b0a65e9d --- /dev/null +++ b/.examples/unit/unit-step.vue @@ -0,0 +1,19 @@ + + + diff --git a/.examples/unit/unit-value-format.vue b/.examples/unit/unit-value-format.vue new file mode 100644 index 00000000..7bf3d0e4 --- /dev/null +++ b/.examples/unit/unit-value-format.vue @@ -0,0 +1,32 @@ + + + diff --git a/.examples/unit/unit.vue b/.examples/unit/unit.vue new file mode 100644 index 00000000..d7042140 --- /dev/null +++ b/.examples/unit/unit.vue @@ -0,0 +1,27 @@ + + + diff --git a/inputs/unit.md b/inputs/unit.md index 555613e6..053f0507 100644 --- a/inputs/unit.md +++ b/inputs/unit.md @@ -20,7 +20,7 @@ The `unit` input allows for restricted input of values based on the provided uni ::Example --- name: "Unit input defaults" -file: "_content/_examples/unit/unit-default.vue" +file: "_content/_examples/unit/unit.vue" --- :: @@ -36,27 +36,73 @@ listItems: ['acre', 'bit', 'byte', 'celsius', 'centimeter', 'day', 'degree', 'fa --- :: +### Unit display + +The display length can be modified by the `unitDisplay` property. Accepted values are `short`, `narrow`, and `long`. + +::Example +--- +name: "Unit input defaults" +file: "_content/_examples/unit/unit-display.vue" +--- +:: + ### Locale By default the locale will use what you have set in your `formkit.config.ts` as the desired locale. However you can override this with the `displayLocale` prop. For example, `en-US`, `de-DE`, `en-IN`, `zh-CN`, etc, etc. +::Example +--- +name: "Unit input defaults" +file: "_content/_examples/unit/unit-locale.vue" +--- +:: + ### Decimals By default the decimals will display when the value contains the unit/locale decimal separator and will show default formatting decimal places to display for the given unit, however you can override this. By setting `decimals` to `false` or `0`, the value will not allow decimals or setting decimals to a numeric value will limit the maximum decimal places to that value. You can also choose to set a minimum number of decimals with the `minDecimals` prop. For example, you always want to show 2 decimal places you would set `minDecimals="2"`. +::Example +--- +name: "Unit input defaults" +file: "_content/_examples/unit/unit-decimals.vue" +--- +:: + ### Minimum and Maximum Values Similar to a number input, you can set a `min` and `max` value. +::Example +--- +name: "Unit input defaults" +file: "_content/_examples/unit/unit-min-max.vue" +--- +:: + ### Step Again, similar to a number input you can use the up/down keys to step the value. By default the step is `1` but you can override that with this prop. +::Example +--- +name: "Unit input defaults" +file: "_content/_examples/unit/unit-step.vue" +--- +:: + ### Value Formatting -Default value output is the value as a string to reduce issues with large number enumertation issues. However you can format the value as a string and include the currency symbol, grouping, decimal, etc as it is shown in the input. +The value of the input itself defaults to a number but can be formatted as a string to include information about the unit itself. + +::Example +--- +name: "Unit input defaults" +file: "_content/_examples/unit/unit-value-format.vue" +--- +:: ### Value unit From af5835abcd7bb0de4afb7dde8a584d4c42b78cfd Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Wed, 21 Aug 2024 07:04:59 -0400 Subject: [PATCH 64/83] docs: adds prop for unitDisplay --- inputs/unit.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/inputs/unit.md b/inputs/unit.md index 053f0507..258d035b 100644 --- a/inputs/unit.md +++ b/inputs/unit.md @@ -191,10 +191,10 @@ data: [ description: "Used to convert the user-inputted value from one unit to another" }, { - prop: "unitFormatting", - type: "string | boolean", - default: true, - description: "When set to false, no formatting will be applied for the given unit type." + prop: "unitDisplay", + type: "string ('narrow' | 'short' | 'long')", + default: "short", + description: "Determines the length of the how the unit is represented." }, ] --- From ee6a4df3666a415dacdf826364f10e158b3bf970 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Wed, 21 Aug 2024 08:02:54 -0400 Subject: [PATCH 65/83] docs: adds pre tag to unit example --- .examples/unit/unit.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.examples/unit/unit.vue b/.examples/unit/unit.vue index d7042140..bd81f028 100644 --- a/.examples/unit/unit.vue +++ b/.examples/unit/unit.vue @@ -21,7 +21,7 @@ const initialValues = { - {{ value }} + 
{{ value }}
 From 6267439591d560bbb0a27b2774ba618ada7125d5 Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Wed, 21 Aug 2024 08:16:36 -0400 Subject: [PATCH 66/83] docs: adds labels to unit examples --- .examples/unit/unit-display.vue | 24 +++++++++++++++++++--- .examples/unit/unit.vue | 35 ++++++++++++++++++++++++++++----- 2 files changed, 51 insertions(+), 8 deletions(-) diff --git a/.examples/unit/unit-display.vue b/.examples/unit/unit-display.vue index a2a2f725..144494de 100644 --- a/.examples/unit/unit-display.vue +++ b/.examples/unit/unit-display.vue @@ -10,9 +10,27 @@ const initialValues = { diff --git a/.examples/unit/unit.vue b/.examples/unit/unit.vue index bd81f028..fc3ea11c 100644 --- a/.examples/unit/unit.vue +++ b/.examples/unit/unit.vue @@ -16,11 +16,36 @@ const initialValues = { :value="initialValues" > - - - - - + + + + + 
{{ value }}
 From e32a4493135180bf0fccc18fbca86f0b9faa8a0d Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Wed, 21 Aug 2024 08:23:40 -0400 Subject: [PATCH 67/83] docs: adds another pre tag wrap to value in unit example --- .examples/unit/{unit-value-unit.vue => value-unit.vue} | 4 +--- inputs/unit.md | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) rename .examples/unit/{unit-value-unit.vue => value-unit.vue} (67%) diff --git a/.examples/unit/unit-value-unit.vue b/.examples/unit/value-unit.vue similarity index 67% rename from .examples/unit/unit-value-unit.vue rename to .examples/unit/value-unit.vue index ba86b2b1..3342cdb1 100644 --- a/.examples/unit/unit-value-unit.vue +++ b/.examples/unit/value-unit.vue @@ -7,8 +7,6 @@ name="value" value-unit="kilometer" /> - - 
In kilometers: {{ value && value.value }}
- + 
In kilometers: {{ value && value.value }}
 diff --git a/inputs/unit.md b/inputs/unit.md index 258d035b..4572f9db 100644 --- a/inputs/unit.md +++ b/inputs/unit.md @@ -112,7 +112,7 @@ itself will be converted to `kilometers` when setting `value-unit` to `kilometer ::Example --- name: "Unit type examples" -file: "_content/_examples/unit/unit-value-unit.vue" +file: "_content/_examples/unit/value-unit.vue" --- :: From 4f66cfd527f31841df8f19624578d500bbbaf3ca Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Wed, 21 Aug 2024 08:30:12 -0400 Subject: [PATCH 68/83] docs: adjusts latest pro changelog by adding link --- changelog-pro/105.v.0.127.0.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/changelog-pro/105.v.0.127.0.md b/changelog-pro/105.v.0.127.0.md index bb0ea7a7..00e7e84b 100644 --- a/changelog-pro/105.v.0.127.0.md +++ b/changelog-pro/105.v.0.127.0.md @@ -4,5 +4,6 @@ ### 💪 New Features -- Adds `unit` input . +- Adds [`unit` input](/inputs/unit). + From 4ea039e08397e8f23dc985e1370257843d93fa3b Mon Sep 17 00:00:00 2001 From: Sasha Milenkovic Date: Wed, 11 Sep 2024 07:59:18 -0400 Subject: [PATCH 69/83] docs: adds changelog for FormKit Pro v0.127.1 and unitless example --- .examples/unit/unitless.vue | 6 ++++++ changelog-pro/106.v0.127.1.md | 10 ++++++++++ inputs/unit.md | 20 ++++++++++++++++---- 3 files changed, 32 insertions(+), 4 deletions(-) create mode 100644 .examples/unit/unitless.vue create mode 100644 changelog-pro/106.v0.127.1.md diff --git a/.examples/unit/unitless.vue b/.examples/unit/unitless.vue new file mode 100644 index 00000000..57e2933a --- /dev/null +++ b/.examples/unit/unitless.vue @@ -0,0 +1,6 @@ + diff --git a/changelog-pro/106.v0.127.1.md b/changelog-pro/106.v0.127.1.md new file mode 100644 index 00000000..cafec809 --- /dev/null +++ b/changelog-pro/106.v0.127.1.md @@ -0,0 +1,10 @@ +## 0.127.1 + +### September 11, 2024 + +### 💪 New Features + +- Makes `unit` property optional in [`unit` input](/inputs/unit) to allow for + unitless values. + + diff --git a/inputs/unit.md b/inputs/unit.md index 4572f9db..8ed04b1d 100644 --- a/inputs/unit.md +++ b/inputs/unit.md @@ -116,6 +116,18 @@ file: "_content/_examples/unit/value-unit.vue" --- :: +### Unitless + +The `unit` prop is optional, allowing for unitless values. + +::Example +--- +name: "Unit type examples" +file: "_content/_examples/unit/unitless.vue" +--- +:: + + ::Callout --- type: "warning" @@ -128,13 +140,13 @@ In order to convert one unit to another, they must be in the same taxonomy (so f ::ReferenceTable --- -input: "unit" +input: "unit" data: [ { prop: "unit", - type: "string", - default: "percent", - description: "Set the specified unit to use for this input" + type: "string | undefined", + description: "Set the specified unit to use for this input. If undefined, will + allow for unitless values." }, { prop: "displayLocale", From c5932457547d9245de729debe9ecd14c2f8555db Mon Sep 17 00:00:00 2001 From: Justin Schroeder Date: Thu, 12 Sep 2024 11:57:18 -0400 Subject: [PATCH 70/83] feat: adds 1.6.6 changelog --- changelog/36.v1.6.5.md | 2 +- changelog/37.v1.6.6.md | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 changelog/37.v1.6.6.md diff --git a/changelog/36.v1.6.5.md b/changelog/36.v1.6.5.md index 32960ec3..2b71c368 100644 --- a/changelog/36.v1.6.5.md +++ b/changelog/36.v1.6.5.md @@ -4,4 +4,4 @@ ### 🐛 Bug fixes -- Fixes a bug that causes the `data-invalid` attribute to not be removed when conditionally removing validation rules ([#1384](https://github.com/formkit/formkit/issues/1384)). +- Fixes a bug that caused cleanup issues in Vue 3.5+ ([#1496](https://github.com/vuejs/core/issues/1496)). diff --git a/changelog/37.v1.6.6.md b/changelog/37.v1.6.6.md new file mode 100644 index 00000000..71b99683 --- /dev/null +++ b/changelog/37.v1.6.6.md @@ -0,0 +1,7 @@ +## 1.6.6 + +### Sept 12, 2024 + +### 🐛 Bug fixes + +- Fixes a bug that caused cleanup issues in Vue 3.5+. From 42b018d7f7d9769fd75a0baff245acaf7dfb1305 Mon Sep 17 00:00:00 2001 From: Justin Schroeder Date: Thu, 12 Sep 2024 13:35:52 -0400 Subject: [PATCH 71/83] fix: changelog --- changelog/37.v1.6.6.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelog/37.v1.6.6.md b/changelog/37.v1.6.6.md index 71b99683..b4492aff 100644 --- a/changelog/37.v1.6.6.md +++ b/changelog/37.v1.6.6.md @@ -4,4 +4,4 @@ ### 🐛 Bug fixes -- Fixes a bug that caused cleanup issues in Vue 3.5+. +- Fixes a bug that caused [cleanup issues]() in Vue 3.5+. From 140f0dfe517ba720337fbd89638f5bcc81d2464b Mon Sep 17 00:00:00 2001 From: Karl Swedberg Date: Fri, 13 Sep 2024 10:33:02 -0400 Subject: [PATCH 72/83] Fix typos and a handful of punctuation issues --- _install/astro.md | 2 +- _install/cli.md | 2 +- _install/config.md | 2 +- _install/nuxt.md | 2 +- _install/pro-nuxt.md | 4 ++-- _install/pro.md | 2 +- _install/styling-css.md | 4 ++-- _install/styling-tailwind.md | 2 +- _install/styling-uno.md | 4 ++-- _install/styling-windi.md | 4 ++-- _install/tailwind-install-instructions.md | 2 +- 11 files changed, 15 insertions(+), 15 deletions(-) diff --git a/_install/astro.md b/_install/astro.md index 12547643..9955e1a0 100644 --- a/_install/astro.md +++ b/_install/astro.md @@ -40,7 +40,7 @@ label: "Vue Components" Astro does not let you use FormKit directly inside Astro files, so you should create a wrapper around your forms. :: -Now you can add FormKit to your Astro Vue components, so that you can create a component inside the components folder: +Now you can add FormKit to your Astro Vue components by creating a component inside the components folder: ```html