From f54ebf00e2c17803892862f9d59f8982f7051e40 Mon Sep 17 00:00:00 2001
From: Selemondev <selemondev@Selemondevs-MacBook-Pro.local>
Date: Sun, 10 Sep 2023 10:45:20 +0300
Subject: [PATCH] Add UButtonGroup with three UButton components

---
 packages/nuxt-ui-vue/src/App.vue              |  6 +++-
 .../elements/Button/UButtonGroup.vue          |  8 ++---
 packages/nuxt-ui-vue/tailwind.config.js       | 32 +++++++++++++++++++
 3 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/packages/nuxt-ui-vue/src/App.vue b/packages/nuxt-ui-vue/src/App.vue
index e811412..c4f92d0 100755
--- a/packages/nuxt-ui-vue/src/App.vue
+++ b/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>
diff --git a/packages/nuxt-ui-vue/src/components/elements/Button/UButtonGroup.vue b/packages/nuxt-ui-vue/src/components/elements/Button/UButtonGroup.vue
index 1e729f0..6a417df 100755
--- a/packages/nuxt-ui-vue/src/components/elements/Button/UButtonGroup.vue
+++ b/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
diff --git a/packages/nuxt-ui-vue/tailwind.config.js b/packages/nuxt-ui-vue/tailwind.config.js
index 393ff3b..061ace1 100755
--- a/packages/nuxt-ui-vue/tailwind.config.js
+++ b/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: {