fix: update docs style

oil-oil · Sep 14, 2023 · a39d87f · a39d87f
1 parent 279d31a
commit a39d87f
Show file tree

Hide file tree

Showing 15 changed files with 159 additions and 230 deletions.
diff --git a/packages/docs/docs/.vitepress/docs/documentation/components/button.md b/packages/docs/docs/.vitepress/docs/documentation/components/button.md
@@ -8,7 +8,7 @@ props :
       description: Change the color of the button and some of its sub components.
       default: primary
       usageUrl: button#color
-    - name: style button
+    - name: style
       type: Prop
       values: flat | border | gradient | transparent | dashed | shadow | relief | floating
       description: Change the style of the button and its status.

diff --git a/packages/docs/docs/.vitepress/docs/documentation/components/card.md b/packages/docs/docs/.vitepress/docs/documentation/components/card.md
@@ -0,0 +1,15 @@
+# Card
+
+<card>
+
+## Default
+
+Add a card with the vs-card component for the structure of this component we have several slots:
+
+- title
+- text
+- buttons
+- interactions
+- img
+
+</card>
diff --git a/packages/docs/docs/.vitepress/theme/Layout.tsx b/packages/docs/docs/.vitepress/theme/Layout.tsx
@@ -2,6 +2,7 @@ import { Highlighter, getHighlighter } from 'shiki'
 import { useData } from 'vitepress'
 import { defineComponent, ref, provide, onMounted } from 'vue'
 import { useLoading } from 'vuesax-ts'
+import './style.scss'
 
 import Config from './components/Config'
 import VSContent from './components/Content'

diff --git a/packages/docs/docs/.vitepress/theme/components/Content/Home/HomePage1/style.scss b/packages/docs/docs/.vitepress/theme/components/Content/Home/HomePage1/style.scss
@@ -1,15 +1,5 @@
 $color_1: var(--vs-theme-color);
 
-h1 {
-	font-weight: normal;
-	color: $color_1;
-}
-
-a {
-	text-decoration: underline;
-	color: $color_1;
-}
-
 .page {
 	width: 100%;
 	position: relative;
@@ -61,7 +51,6 @@ a {
 			border-radius: 17px;
 			margin: 0 10px 0 0;
 
-
 			.bx {
 				font-size: 1.5rem;
 			}
@@ -79,7 +68,6 @@ a {
 				font-size: 1.3rem;
 			}
 		}
-
 	}
 }
 
@@ -107,7 +95,6 @@ a {
 	}
 }
 
-
 @media (max-width: 1400px) {
 	.features-part {
 		transform: scale(0.8);
@@ -123,7 +110,6 @@ a {
 			display: none;
 		}
 
-
 		.features-part {
 			transform: scale(0.7);
 			right: auto;
@@ -132,22 +118,19 @@ a {
 	}
 }
 
-
 @media (max-width: 760px) {
 	.page {
 		.title-part {
 			display: none;
 		}
 
-
 		.features-part {
 			transform: scale(0.7);
 			left: -18%;
 		}
 	}
 }
 
-
 @media (max-width: 470px) {
 	.page {
 		.features-part {
@@ -156,4 +139,4 @@ a {
 			left: -25%;
 		}
 	}
-}
+}
diff --git a/packages/docs/docs/.vitepress/theme/components/Sidebar/RightSidebar.tsx b/packages/docs/docs/.vitepress/theme/components/Sidebar/RightSidebar.tsx
@@ -50,9 +50,11 @@ const RightSidebar = defineComponent({
       elements.value = Array.from(document.getElementsByTagName('h2'))
       window.addEventListener('scroll', scrollEvent)
     })
+
     onUnmounted(() => {
       window.removeEventListener('scroll', scrollEvent)
     })
+
     return () => (
       <div class={['right-sidebar']}>
         {elements.value.map((item, index) => (

diff --git a/packages/docs/docs/.vitepress/theme/global-components/template/API.tsx b/packages/docs/docs/.vitepress/theme/global-components/template/API.tsx
@@ -2,8 +2,8 @@ import { useData } from 'vitepress'
 import { defineComponent } from 'vue'
 import { VsTable, VsTh, VsTr, VsTd } from 'vuesax-ts'
 
-const DocsApi = defineComponent({
-  name: 'DocsApi',
+const DocsAPI = defineComponent({
+  name: 'DocsAPI',
   setup() {
     const { frontmatter } = useData()
     return () => (
@@ -49,7 +49,11 @@ const DocsApi = defineComponent({
                             <VsTh>
                               {line.usageUrl && (
                                 <a href={line.usageUrl}>
-                                  Usage<i class="bx bx-code-block"></i>
+                                  Usage
+                                  <i
+                                    style="margin-left: 4px"
+                                    class="bx bx-code-block"
+                                  />
                                 </a>
                               )}
                             </VsTh>
@@ -106,13 +110,17 @@ const DocsApi = defineComponent({
                             <VsTd>
                               {line.usageUrl && (
                                 <a href={line.usageUrl}>
-                                  Usage<i class="bx bx-code-block"></i>
+                                  Usage
+                                  <i
+                                    style="margin-left: 4px"
+                                    class="bx bx-code-block"
+                                  />
                                 </a>
                               )}
                             </VsTd>
                             <VsTd>
                               <a
-                                href={`https://github.com/lusaxweb/vuesax/issues/new?title=[Alert]%20prop%20(${line.name})%20-%20Your%20Bug%20Name&body=**Steps%20to%20Reproduce**%0A1.%20Do%20something%0A2.%20Do%20something%20else.%0A3.%20Do%20one%20last%20thing.%0A%0A**Expected**%0AThe%20icon%20should%20do%20this%0A%0A**Result**%0AThe%20icon%20does%20not%20do%20this%0A%0A**Testcase**%0A(fork%20this%20to%20get%20started)%0Ahttp://jsfiddle.net/example-bug/1/`}
+                                href={`https://github.com/oil-oil/vuesax-ts/issues/new?title=[Alert]%20prop%20(${line.name})%20-%20Your%20Bug%20Name&body=**Steps%20to%20Reproduce**%0A1.%20Do%20something%0A2.%20Do%20something%20else.%0A3.%20Do%20one%20last%20thing.%0A%0A**Expected**%0AThe%20icon%20should%20do%20this%0A%0A**Result**%0AThe%20icon%20does%20not%20do%20this%0A%0A**Testcase**%0A(fork%20this%20to%20get%20started)%0Ahttp://jsfiddle.net/example-bug/1/`}
                               >
                                 <i class="bx bx-bug"></i>
                               </a>
@@ -131,4 +139,4 @@ const DocsApi = defineComponent({
   }
 })
 
-export default DocsApi
+export default DocsAPI
diff --git a/packages/docs/docs/.vitepress/theme/global-components/template/Button/Href.vue b/packages/docs/docs/.vitepress/theme/global-components/template/Button/Href.vue
@@ -1,9 +1,14 @@
 <template>
   <div class="center">
-    <VsButton href="http://vuesax.com/" color="success" flat>
+    <VsButton href="https://github.com/oil-oil/vuesax-ts" color="success" flat>
       Href - Replace Url
     </VsButton>
-    <VsButton href="http://vuesax.com/" blank color="danger" flat>
+    <VsButton
+      href="https://github.com/oil-oil/vuesax-ts"
+      blank
+      color="danger"
+      flat
+    >
       Href - Open External (blank)
     </VsButton>
   </div>

diff --git a/packages/docs/docs/.vitepress/theme/global-components/template/Button/Size.vue b/packages/docs/docs/.vitepress/theme/global-components/template/Button/Size.vue
@@ -1,19 +1,19 @@
 <template>
   <div class="center">
     <VsButton size="xl" :active="active === 0" @click="active = 0">
-      XLarge
+      XL size
     </VsButton>
     <VsButton size="lg" :active="active === 1" @click="active = 1">
-      Large
+      LG size
     </VsButton>
     <VsButton size="md" :active="active === 2" @click="active = 2">
-      Default
+      MD size
     </VsButton>
     <VsButton size="sm" :active="active === 3" @click="active = 3">
-      Small
+      SM size
     </VsButton>
     <VsButton size="xs" :active="active === 4" @click="active = 4">
-      Mini
+      XS size
     </VsButton>
   </div>
 </template>

diff --git a/packages/docs/docs/.vitepress/theme/global-components/template/Card/Default.vue b/packages/docs/docs/.vitepress/theme/global-components/template/Card/Default.vue
@@ -0,0 +1,26 @@
+<template>
+  <VsCard>
+    <template #title>
+      <h3>Pot with a plant</h3>
+    </template>
+    <template #img>
+      <img src="/foto5.png" alt="" />
+    </template>
+    <template #text>
+      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
+    </template>
+    <template #interactions>
+      <VsButton color="danger" icon>
+        <i class="bx bx-heart"></i>
+      </VsButton>
+      <VsButton shadow>
+        <i class="bx bx-chat"></i>
+        <span style="margin-left: 4px"> 54 </span>
+      </VsButton>
+    </template>
+  </VsCard>
+</template>
+
+<script setup lang="ts">
+import { VsCard, VsButton } from 'vuesax-ts'
+</script>
diff --git a/packages/docs/docs/.vitepress/theme/index.ts b/packages/docs/docs/.vitepress/theme/index.ts
@@ -6,7 +6,6 @@ import 'boxicons/css/boxicons.min.css'
 
 import Card from './global-components/Card'
 import Layout from './Layout.tsx'
-import './style.scss'
 
 const theme: Theme = {
   Layout,