Merge branch 'dev' into pr/306

.eslintrc.cjs

@@ -2,6 +2,8 @@ module.exports = {
   root: true,
   extends: ['@nuxt/eslint-config'],
   rules: {
+    'comma-dangle': ['error', 'never'],
+    'space-before-function-paren': ['error', 'always'],
     'vue/multi-word-component-names': 0,
     'vue/max-attributes-per-line': ['error', {
       singleline: {

.gitignore

@@ -7,3 +7,4 @@ dist
 .DS_Store
 .history
 .vercel
+.idea

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}

.release-it.json

@@ -0,0 +1,23 @@
+{
+  "git": {
+    "commitMessage": "chore(release): ${version}"
+  },
+  "npm": {
+    "publish": false
+  },
+  "github": {
+    "release": true,
+    "web": true
+  },
+  "hooks": {
+    "before:init": ["pnpm lint"]
+  },
+  "plugins": {
+    "@release-it/conventional-changelog": {
+      "preset": "conventionalcommits",
+      "infile": "CHANGELOG.md",
+      "header": "# Changelog",
+      "ignoreRecommendedBump": true
+    }
+  }
+}

CHANGELOG.md

@@ -1,6 +1,16 @@
 # Changelog
 
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+### [2.4.1](https://github.com/nuxtlabs/ui/compare/v2.4.0...v2.4.1) (2023-06-21)
+
+
+### Bug Fixes
+
+* **forms:** precise type assertion for `onInput` event handler ([#293](https://github.com/nuxtlabs/ui/issues/293)) ([457b7a9](https://github.com/nuxtlabs/ui/commit/457b7a9fb72e6469014b6ca18e7034dd5c6f44b8))
+* **module:** let `tailwindcss` viewer enabled by default ([4023fbe](https://github.com/nuxtlabs/ui/commit/4023fbec29e5b4d40fd23e8c2ae3d0cf23addc64)), closes [#292](https://github.com/nuxtlabs/ui/issues/292)
+* **module:** safelist aliases for input ([f719111](https://github.com/nuxtlabs/ui/commit/f719111abb94c81f3932927a0154b3e1bed73a9a))
+* **module:** safelist regex when a `:` was present before color ([f7e2082](https://github.com/nuxtlabs/ui/commit/f7e2082983c2eb650e95a9040aafde4ce2c88c54))
+* **Radio/Checkbox:** remove legacy `custom` ([3bac087](https://github.com/nuxtlabs/ui/commit/3bac0874f106a8ff7436b541f9d064c1c7c27464))
+
 
 ## [2.4.0](https://github.com/nuxtlabs/ui/compare/v2.3.0...v2.4.0) (2023-06-13)
 
@@ -619,4 +629,4 @@ All notable changes to this project will be documented in this file. See [standa
 * **Toggle:** add missing `computed` import ([0f09c9b](https://github.com/nuxtlabs/ui/commit/0f09c9baae501458af029f853c78b1c10a3ac133))
 * **Tooltip:** missing `ref` import ([b08a8cc](https://github.com/nuxtlabs/ui/commit/b08a8cc0ac79e89817e338281a81c477d5ec645a))
 * **useTimer:** remove log ([c6dcbd1](https://github.com/nuxtlabs/ui/commit/c6dcbd1b2b542dab1850504a60451a485e2d4004))
-* **VerticalNavigation:** add `v-if` on label ([79d8e08](https://github.com/nuxtlabs/ui/commit/79d8e086f0c61887c52da6fe4a13f1bdf7077227))
+* **VerticalNavigation:** add `v-if` on label ([79d8e08](https://github.com/nuxtlabs/ui/commit/79d8e086f0c61887c52da6fe4a13f1bdf7077227))

docs/components/content/ComponentCard.vue

@@ -7,7 +7,7 @@
           v-if="prop.type === 'boolean'"
           v-model="componentProps[prop.name]"
           :name="`prop-${prop.name}`"
-          variant="none"
+          tabindex="-1"
           :ui="{ wrapper: 'relative flex items-start justify-center' }"
         />
         <USelectMenu
@@ -18,6 +18,7 @@
           variant="none"
           :ui="{ width: 'w-32 !-mt-px', rounded: 'rounded-b-md', wrapper: 'relative inline-flex' }"
           class="!py-0"
+          tabindex="-1"
           :popper="{ strategy: 'fixed', placement: 'bottom-start' }"
         />
         <UInput
@@ -28,6 +29,7 @@
           variant="none"
           autocomplete="off"
           class="!py-0"
+          tabindex="-1"
           @update:model-value="val => componentProps[prop.name] = prop.type === 'number' ? Number(val) : val"
         />
       </div>

docs/components/content/examples/CheckboxExample.vue

@@ -1,5 +1,5 @@
 <script setup>
-const selected = ref(false)
+const selected = ref(true)
 </script>
 
 <template>

docs/components/content/examples/RangeExample.vue

@@ -0,0 +1,7 @@
+<script setup>
+const value = ref(50)
+</script>
+
+<template>
+  <URange v-model="value" />
+</template>

docs/content/1.getting-started/3.theming.md

@@ -33,7 +33,7 @@ Likewise, you can't define a `primary` color in your `tailwind.config.ts` as it
 We'd advise you to use those colors in your components and pages, e.g. `text-primary-500 dark:text-primary-400`, `bg-gray-100 dark:bg-gray-900`, etc. so your app automatically adapts when changing your `app.config.ts`.
 ::
 
-Components having a `color` prop like [Avatar](/elements/avatar#chip), [Badge](/elements/badge#style), [Button](/elements/button#style), [Input](/elements/input#style) (inherited in [Select](/forms/select) and [SelectMenu](/forms/select-menu)) and [Notification](/overlays/notification#timeout) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default Tailwind CSS colors.
+Components having a `color` prop like [Avatar](/elements/avatar#chip), [Badge](/elements/badge#style), [Button](/elements/button#style), [Input](/elements/input#style) (inherited in [Select](/forms/select) and [SelectMenu](/forms/select-menu)), [Radio](/forms/radio), [Checkbox](/forms/checkbox), [Toggle](/forms/toggle), [Range](/forms/range) and [Notification](/overlays/notification#timeout) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default Tailwind CSS colors.
 
 Variant classes of those components are defined with a syntax like `bg-{color}-500 dark:bg-{color}-400` so they can be used with any color. However, this means that Tailwind will not find those classes and therefore will not generate the corresponding CSS.
 

docs/content/3.forms/5.checkbox.md

@@ -14,7 +14,7 @@ Use a `v-model` to make the Checkbox reactive.
 #code
 ```vue
 <script setup>
-const selected = ref(false)
+const selected = ref(true)
 </script>
 
 <template>
@@ -36,14 +36,28 @@ props:
 ---
 ::
 
+### Style
+
+Use the `color` prop to change the style of the Checkbox.
+
+::component-card
+---
+baseProps:
+  name: 'checkbox2'
+  label: 'Label'
+props:
+  color: 'primary'
+---
+::
+
 ### Required
 
 Use the `required` prop to display a red star next to the label.
 
 ::component-card
 ---
 baseProps:
-  name: 'checkbox2'
+  name: 'checkbox3'
 props:
   label: 'Label'
   required: true
@@ -57,7 +71,7 @@ Use the `help` prop to display some text under the Checkbox.
 ::component-card
 ---
 baseProps:
-  name: 'checkbox3'
+  name: 'checkbox4'
 props:
   label: 'Label'
   help: 'Please check this box'

docs/content/3.forms/6.radio.md

@@ -50,14 +50,28 @@ props:
 ---
 ::
 
+### Style
+
+Use the `color` prop to change the style of the Radio.
+
+::component-card
+---
+baseProps:
+  name: 'radio2'
+  label: 'Label'
+props:
+  color: 'primary'
+---
+::
+
 ### Required
 
 Use the `required` prop to display a red star next to the label.
 
 ::component-card
 ---
 baseProps:
-  name: 'radio2'
+  name: 'radio3'
 props:
   label: 'Label'
   required: true
@@ -71,7 +85,7 @@ Use the `help` prop to display some text under the Radio.
 ::component-card
 ---
 baseProps:
-  name: 'radio3'
+  name: 'radio4'
 props:
   label: 'Label'
   help: 'Please choose one'
@@ -85,7 +99,7 @@ Use the `disabled` prop to disable the Radio.
 ::component-card
 ---
 baseProps:
-  name: 'radio4'
+  name: 'radio5'
   value: true
 props:
   disabled: true

docs/content/3.forms/7.toggle.md

@@ -26,6 +26,17 @@ const selected = ref(false)
 ```
 ::
 
+### Style
+
+Use the `color` prop to change the style of the Toggle.
+
+::component-card
+---
+props:
+  color: 'primary'
+---
+::
+
 ### Icon
 
 Use any icon from [Iconify](https://icones.js.org) by setting the `on-icon` and `off-icon` props by using this pattern: `i-{collection_name}-{icon_name}` or change it globally in `ui.toggle.default.onIcon` and `ui.toggle.default.offIcon`.

docs/content/3.forms/8.range.md

@@ -0,0 +1,101 @@
+---
+github: true
+description: Display a range field
+navigation:
+  badge: "Edge"
+---
+
+## Usage
+
+Use a `v-model` to make the Range reactive.
+
+::component-example
+#default
+:range-example
+
+#code
+```vue
+<script setup>
+const value = ref(50)
+</script>
+
+<template>
+  <URange v-model="value" />
+</template>
+```
+::
+
+### Style
+
+Use the `color` prop to change the visual style of the Range.
+
+::component-card
+---
+baseProps:
+  name: range'
+  placeholder: 'Search...'
+props:
+  color: 'primary'
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Range.
+
+::component-card
+---
+baseProps:
+  name: 'range'
+props:
+  size: 'md'
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Range.
+
+::component-card
+---
+baseProps:
+  name: 'range'
+props:
+  disabled: true
+---
+::
+
+### Min and Max
+
+Use the `min` and `max` prop to configure the Range.
+
+::component-card
+---
+baseProps:
+  name: 'range'
+props:
+  min: 0
+  max: 100
+---
+::
+
+### Step
+
+Use the `step` prop to change the step increment.
+
+::component-card
+---
+baseProps:
+  name: 'range'
+props:
+  step: 20
+---
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset