Add UButtonGroup with three UButton components

Author: Selemondev

packages/nuxt-ui-vue/src/App.vue

@@ -3,6 +3,10 @@
 
 <template>
   <div class="grid place-items-center w-full min-h-screen">
-    <UAvatar src="https://github.com/selemondev.pg" icon="ph:moon" />
+    <UButtonGroup size="sm" orientation="horizontal">
+      <UButton icon="ph:music-notes" label="Music" />
+      <UButton icon="ph:music-notes" label="Music" color="red" />
+      <UButton icon="ph:music-notes" label="Music" color="red" />
+    </UButtonGroup>
   </div>
 </template>

packages/nuxt-ui-vue/src/components/elements/Button/UButtonGroup.vue

@@ -7,16 +7,16 @@ import { useVariants } from '../../../composables/useVariants'
 
 const props = defineProps({
   ...getVariantPropsWithClassesList<UButtonGroup>(),
-  vertical: {
-    type: Boolean,
-    default: false,
+  orientation: {
+    type: String,
+    default: 'horizontal',
   },
 })
 
 const variant = computed(() => {
   const customProps = {
     ...props,
-    variant: props.vertical ? 'vertical' : 'horizontal',
+    variant: props.orientation === 'vertical' ? 'vertical' : 'horizontal',
   }
   return useVariants<UButtonGroup>(
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment

packages/nuxt-ui-vue/tailwind.config.js

@@ -1,9 +1,41 @@
+/* eslint-disable no-unused-expressions */
+import tailwindColors from './node_modules/tailwindcss/colors'
+
+const colorSafeList = []
+
+const deprecated = ['lightBlue', 'warmGray', 'trueGray', 'coolGray', 'blueGray']
+
+for (const colorName in tailwindColors) {
+  if (deprecated.includes(colorName))
+    continue
+
+  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
+
+  const pallette = tailwindColors[colorName]
+
+  if (typeof pallette === 'object') {
+    shades.forEach((shade) => {
+      if (shade in pallette) {
+        colorSafeList.push(`text-${colorName}-${shade}`),
+        colorSafeList.push(`accent-${colorName}-${shade}`),
+        colorSafeList.push(`bg-${colorName}-${shade}`),
+        colorSafeList.push(`hover:enabled:bg-${colorName}-${shade}`),
+        colorSafeList.push(`focus:bg-${colorName}-${shade}`),
+        colorSafeList.push(`ring-${colorName}-${shade}`),
+        colorSafeList.push(`focus:ring-${colorName}-${shade}`),
+        colorSafeList.push(`border-${colorName}-${shade}`)
+      }
+    })
+  }
+}
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   darkMode: 'class',
+  safelist: colorSafeList,
   theme: {
     extend: {
+      colors: tailwindColors,
       backgroundColor: ['disabled'],
       textColor: ['disabled'],
       fontFamily: {