docs: update alert docs

packages/docs/docs/.vitepress/docs/documentation/components/alert.md

@@ -147,20 +147,6 @@ In this example you can click on the buttons and dynamically change the color va
 
 Add an icon to the alert easily with the slot **icon**
 
-<VsAlert color="warn" >
-  <template #title>
-  Default Icons
-  </template>
-Vuesax does not use any library or default icon source, with this we give you the freedom to use the one you prefer All the components that use a default icon somewhere like the close one in an <b>Alert</b> or a <b>Popup</b> will be an <b>svg</b> for not having to install any type of external font, and it can be replaced with an icon of your preference<code style="padding: .25rem .5rem;font-size:.85rem;background-color:var(--vs-theme-bg2);border-radius: 3px;">slot="icon"</code>
-</VsAlert>
-
-<VsAlert color="success" style="margin:10px 0 0 0 ">
-  <template #title>
-  Vuesax Docs Icons
-  </template>
-These documents and examples use the <a href="https://boxicons.com/" target="_blank">boxicons</a> component library, it is not mandatory or necessary for the use of Vuesax but we recommend it for its wide range of icons and how they visually complement the framework
-</VsAlert>
-
 </card>
 
 <card subtitle="Title">

packages/docs/docs/.vitepress/docs/documentation/components/button.md

@@ -169,27 +169,6 @@ If you need an icon-only button use the `icon` property, the property is a `bool
 
 This property makes the button have a specific size making it the same width and height, do not use when it is icon and text
 
-<div>
-  <div>
-    <div class="warning custom-block">
-      <p class="custom-block-title">
-        Iconos por defecto
-      </p>
-      <p>
-        Vuesax no usa ninguna librería o fuente de iconos por defecto, con esto damos la libertad de usar la que prefieras Todos los componentes que usen en algún lugar un icono por defecto como el de close en un <b>Alert</b> o un <b>Popup</b> va a ser un <b>svg</b> para no tener que instalar ningún tipo de fuente externa, y se podrá sustituir con un <code>slot="icon"</code> por el icono de su preferencia
-      </p>
-    </div>
-    <div class="tip custom-block">
-      <p class="custom-block-title">
-        Vuesax Docs Icons
-      </p>
-      <p>
-        Estos documentos y los ejemplos usan la libreria de componentes <a target="_blank" href="https://boxicons.com/">boxicons</a>, no es obligatoria o necesaria para el uso de Vuesax pero la recomendamos por su amplia gama de iconos y como complementan visualmente el framework
-      </p>
-    </div>
-  </div>
-</div>
-
 </Card>
 
 <Card subtitle="IconText">

packages/docs/docs/.vitepress/docs/zh/documentation/components/alert.md

@@ -73,22 +73,7 @@ Alert 组件是用于显示重要信息的组件。通常使用弹出框或滑
 
 ## Icon
 
-使用 slot 可以简单将图标添加到 Alert
-**icon**
-
-<VsAlert color="warn" >
-  <template #title>
-  Default Icons
-  </template>
-Vuesax does not use any library or default icon source, with this we give you the freedom to use the one you prefer All the components that use a default icon somewhere like the close one in an <b>Alert</b> or a <b>Popup</b> will be an <b>svg</b> for not having to install any type of external font, and it can be replaced with an icon of your preference<code style="padding: .25rem .5rem;font-size:.85rem;background-color:var(--vs-theme-bg2);border-radius: 3px;">slot="icon"</code>
-</VsAlert>
-
-<VsAlert color="success" style="margin:10px 0 0 0 ">
-  <template #title>
-  Vuesax Docs Icons
-  </template>
-These documents and examples use the <a href="https://boxicons.com/" target="_blank">boxicons</a> component library, it is not mandatory or necessary for the use of Vuesax but we recommend it for its wide range of icons and how they visually complement the framework
-</VsAlert>
+使用 slot 可以轻松将图标添加到警告组件
 
 </card>
 

packages/docs/docs/.vitepress/theme/components/Content/Home/HomePage1/HomeTitle.tsx

@@ -5,7 +5,7 @@ import { VsButton } from 'vuesax-ts'
 const HomeContent = defineComponent({
   name: 'HomeContent',
   setup() {
-    const { site, frontmatter, isDark, lang } = useData()
+    const { site, frontmatter, lang } = useData()
     const router = useRouter()
     const to = () => {
       router.go('/documentation/components/button')

packages/docs/docs/.vitepress/theme/global-components/template/Alert/Animate.vue

@@ -17,7 +17,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { VsAlert } from 'vuesax-ts'
+import { VsAlert, VsButton } from 'vuesax-ts'
 
 const activeShow = ref(true)
 </script>

packages/docs/docs/.vitepress/theme/global-components/template/Alert/Closable.vue

@@ -17,7 +17,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { VsAlert } from 'vuesax-ts'
+import { VsAlert, VsButton } from 'vuesax-ts'
 
 const activeShow = ref(true)
 </script>

packages/docs/docs/.vitepress/theme/global-components/template/Alert/Color.vue

@@ -21,14 +21,14 @@
         :active="color === 'success'"
         @click="color = 'success'"
         flat
-        success
+        color="success"
         >Success</VsButton
       >
       <VsButton
         :active="color === 'danger'"
         @click="color = 'danger'"
         flat
-        danger
+        color="danger"
         >Danger</VsButton
       >
       <VsButton
@@ -65,9 +65,9 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { VsAlert } from 'vuesax-ts'
+import { Color, VsAlert, VsButton } from 'vuesax-ts'
 
-const color = ref('primary')
+const color = ref<Color>('primary')
 </script>
 
 <style scoped>

packages/docs/docs/.vitepress/theme/global-components/template/Alert/Footer.vue

@@ -17,5 +17,5 @@
 </template>
 
 <script setup lang="ts">
-import { VsAlert } from 'vuesax-ts'
+import { VsAlert, VsButton } from 'vuesax-ts'
 </script>

packages/docs/docs/.vitepress/theme/global-components/template/Alert/TimeClose.vue

@@ -15,7 +15,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { VsAlert } from 'vuesax-ts'
+import { VsAlert, VsButton } from 'vuesax-ts'
 
 const progress = ref(0)
 const active = ref(false)

packages/docs/docs/.vitepress/theme/global-components/template/Pagination/Color.vue

@@ -25,7 +25,6 @@ import { VsRadio, VsPagination, Color } from 'vuesax-ts'
 
 const page = ref(1)
 const color = ref<Color>('success')
-
 </script>
 <style lang="scss">
 .con-pagination {

packages/vuesax/src/components/button/__test__/Button.cy.tsx

@@ -23,7 +23,7 @@ describe('Button', () => {
       cy.mount(<VsButton color={status as Color}>{status}</VsButton>)
       cy.get('.vs-button')
         .should('have.attr', 'style')
-        .and('include', `--vs-color:${color};`)
+        .and('include', `--vs-color: ${color};`)
     })
   })
 

packages/vuesax/src/components/button/base/style.scss

@@ -196,12 +196,7 @@
         padding: 10px;
       }
   }
-  &--circle {
-    border-radius: 25px;
-  }
-  &--square {
-    border-radius: 0px;
-  }
+
   &--size-xl {
     border-radius: 20px;
     .vs-button__content {
@@ -253,6 +248,12 @@
       }
     }
   }
+  &--circle {
+    border-radius: 25px;
+  }
+  &--square {
+    border-radius: 0px;
+  }
 }
 
 // Type Button Style