chore(release): 2.4.1

Also prevents parsing colors already safelisted initially.

.release-it.json

@@ -0,0 +1,22 @@
+{
+  "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",
+      "ignoreRecommendedBump": true
+    }
+  }
+}

CHANGELOG.md

@@ -1,3 +1,16 @@
+
+
+### [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))
+
 # 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.
@@ -619,4 +632,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))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxthq/ui",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "repository": "https://github.com/nuxtlabs/ui",
   "license": "MIT",
   "exports": {
@@ -25,7 +25,7 @@
     "lint": "eslint .",
     "typecheck": "nuxi typecheck",
     "prepare": "nuxi prepare docs",
-    "release": "pnpm lint && standard-version && git push --follow-tags"
+    "release": "release-it"
   },
   "dependencies": {
     "@egoist/tailwindcss-icons": "^1.1.0",
@@ -55,6 +55,7 @@
     "@nuxt/module-builder": "^0.4.0",
     "@nuxthq/studio": "^0.13.2",
     "@nuxtjs/plausible": "^0.2.1",
+    "@release-it/conventional-changelog": "^5.1.1",
     "@types/lodash-es": "^4.17.7",
     "@types/node": "^20.3.1",
     "@vueuse/nuxt": "^10.1.2",
@@ -62,7 +63,7 @@
     "nuxt": "^3.5.3",
     "nuxt-component-meta": "^0.5.3",
     "nuxt-lodash": "^2.4.1",
-    "standard-version": "^9.5.0",
+    "release-it": "^15.11.0",
     "unbuild": "^1.2.1",
     "vue-tsc": "1.6.3"
   }

src/colors.ts

@@ -92,6 +92,11 @@ const safelistByComponent = {
     variants: ['focus-visible']
   }],
   input: (colorsAsRegex) => [{
+    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    variants: ['dark']
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+  }, {
     pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
     variants: ['dark', 'dark:focus']
   }, {
@@ -111,6 +116,12 @@ const safelistByComponent = {
   }]
 }
 
+const safelistComponentAliasesMap = {
+  'USelect': 'UInput',
+  'USelectMenu': 'UInput',
+  'UTextarea': 'UInput'
+}
+
 const colorsAsRegex = (colors: string[]): string => colors.join('|')
 
 export const excludeColors = (colors: object) => Object.keys(omit(colors, colorsToExclude)).map(color => kebabCase(color)) as string[]
@@ -128,34 +139,41 @@ export const generateSafelist = (colors: string[]) => {
   ]
 }
 
-export const customSafelistExtractor = (prefix, content: string, colors: string[]) => {
+export const customSafelistExtractor = (prefix, content: string, colors: string[], safelistColors: string[]) => {
   const classes = []
-  const regex = /<(\w+)\s+[^>:]*color=["']([^"']+)["'][^>]*>/gs
+  const regex = /<(\w+)\s+(?![^>]*:color\b)[^>]*\bcolor=["']([^"']+)["'][^>]*>/gs
+
   const matches = content.matchAll(regex)
 
+  const components = Object.keys(safelistByComponent).map(component => `${prefix}${component.charAt(0).toUpperCase() + component.slice(1)}`)
+
   for (const match of matches) {
     const [, component, color] = match
 
-    if (!colors.includes(color)) {
+    if (!colors.includes(color) || safelistColors.includes(color)) {
       continue
     }
 
-    if (Object.keys(safelistByComponent).map(component => `${prefix}${component.charAt(0).toUpperCase() + component.slice(1)}`).includes(component)) {
+    let name = safelistComponentAliasesMap[component] ? safelistComponentAliasesMap[component] : component
-      const name = component.replace(prefix, '').toLowerCase()
 
-      const matchClasses = safelistByComponent[name](color).flatMap(group => {
+    if (!components.includes(name)) {
-        return ['', ...(group.variants || [])].flatMap(variant => {
+      continue
-          const matches = group.pattern.source.match(/\(([^)]+)\)/g)
-
-          return matches.map(match => {
-            const colorOptions = match.substring(1, match.length - 1).split('|')
-            return colorOptions.map(color => `${variant ? variant + ':' : ''}` + group.pattern.source.replace(match, color))
-          }).flat()
-        })
-      })
-
-      classes.push(...matchClasses)
     }
+
+    name = name.replace(prefix, '').toLowerCase()
+
+    const matchClasses = safelistByComponent[name](color).flatMap(group => {
+      return ['', ...(group.variants || [])].flatMap(variant => {
+        const matches = group.pattern.source.match(/\(([^)]+)\)/g)
+
+        return matches.map(match => {
+          const colorOptions = match.substring(1, match.length - 1).split('|')
+          return colorOptions.map(color => `${variant ? variant + ':' : ''}` + group.pattern.source.replace(match, color))
+        }).flat()
+      })
+    })
+
+    classes.push(...matchClasses)
   }
 
   return classes

src/module.ts

@@ -133,7 +133,6 @@ export default defineNuxtModule<ModuleOptions>({
 
     await installModule('@nuxtjs/color-mode', { classSuffix: '' })
     await installModule('@nuxtjs/tailwindcss', {
-      viewer: false,
       exposeConfig: true,
       config: {
         darkMode: 'class',
@@ -157,7 +156,7 @@ export default defineNuxtModule<ModuleOptions>({
             vue: (content) => {
               return [
                 ...defaultExtractor(content),
-                ...customSafelistExtractor(options.prefix, content, nuxt.options.appConfig.ui.colors)
+                ...customSafelistExtractor(options.prefix, content, nuxt.options.appConfig.ui.colors, options.safelistColors)
               ]
             }
           }

src/runtime/components/forms/Checkbox.vue

@@ -12,7 +12,7 @@
         :indeterminate="indeterminate"
         type="checkbox"
         class="form-checkbox"
-        :class="[ui.base, ui.rounded, ui.custom]"
+        :class="[ui.base, ui.rounded]"
         v-bind="$attrs"
         @focus="$emit('focus', $event)"
         @blur="$emit('blur', $event)"

src/runtime/components/forms/Input.vue

@@ -156,7 +156,7 @@ export default defineComponent({
     }
 
     const onInput = (event: InputEvent) => {
-      emit('update:modelValue', (event.target as any).value)
+      emit('update:modelValue', (event.target as HTMLInputElement).value)
     }
 
     onMounted(() => {

src/runtime/components/forms/Radio.vue

@@ -10,7 +10,7 @@
         :disabled="disabled"
         type="radio"
         class="form-radio"
-        :class="[ui.base, ui.custom]"
+        :class="[ui.base]"
         v-bind="$attrs"
         @focus="$emit('focus', $event)"
         @blur="$emit('blur', $event)"

src/runtime/components/forms/Select.vue

@@ -173,7 +173,7 @@ export default defineComponent({
     const ui = computed<Partial<typeof appConfig.ui.select>>(() => defu({}, props.ui, appConfig.ui.select))
 
     const onInput = (event: InputEvent) => {
-      emit('update:modelValue', (event.target as any).value)
+      emit('update:modelValue', (event.target as HTMLInputElement).value)
     }
 
     const guessOptionValue = (option: any) => {

src/runtime/components/forms/Textarea.vue

@@ -143,7 +143,7 @@ export default defineComponent({
     const onInput = (event: InputEvent) => {
       autoResize()
 
-      emit('update:modelValue', (event.target as any).value)
+      emit('update:modelValue', (event.target as HTMLInputElement).value)
     }
 
     watch(() => props.modelValue, () => {