Merge pull request #80 from selemondev/docs/avatar

docs(app): #65 avatar
selemondev · Aug 7, 2023 · 9967c8b · 9967c8b
2 parents de3ace5 + cbc4f27
commit 9967c8b
Show file tree

Hide file tree

Showing 16 changed files with 483 additions and 72 deletions.
diff --git a/docs/docs/.vitepress/cache/deps/_metadata.json b/docs/docs/.vitepress/cache/deps/_metadata.json
@@ -5,7 +5,7 @@
     "vue": {
       "src": "../../../../../node_modules/.pnpm/vue@3.3.4/node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "55f5b7ef",
+      "fileHash": "b291f0df",
       "needsInterop": false
     },
     "vitepress > @vue/devtools-api": {
@@ -17,7 +17,7 @@
     "@vueuse/core": {
       "src": "../../../../../node_modules/.pnpm/@vueuse+core@10.2.1_vue@3.3.4/node_modules/@vueuse/core/index.mjs",
       "file": "@vueuse_core.js",
-      "fileHash": "bd7f5936",
+      "fileHash": "6eac3fcf",
       "needsInterop": false
     }
   },

diff --git a/docs/docs/.vitepress/config.ts b/docs/docs/.vitepress/config.ts
@@ -52,6 +52,7 @@ export default defineConfig({
           items: [
             { text: 'Accordion', link: '/guide/components/accordion.md' },
             { text: 'Alert', link: '/guide/components/alert.md' },
+            { text: 'Avatar', link: '/guide/components/avatar.md'}
           ]
         }
       ],

diff --git a/docs/docs/components/Avatar/avatarBasic.vue b/docs/docs/components/Avatar/avatarBasic.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <div class="flex space-x-3">
+      <WAvatar src="https://github.com/selemondev.png" name="Selemondev" initials="SB" />
+      <WAvatar src="https://github.com/Ryggs.png" name="Ryan Giggs" initials="RG" />
+      <WAvatar src="https://github.com/atinux.png" name="Sebastian Chopin" initials="SC" />
+      <WAvatar src="https://github.com/yyx990803.png" name="Evan You" initials="EY" />
+      <WAvatar src="https://github.com/danielroe.png" name="Daniel Roe" initials="DR" />
+      <WAvatar src="https://github.com/baroshem.png" name="Jakub Andrzejewski" initials="JA" />
+      <WAvatar src="https://github.com/posva.png" name="Eduardo" initials="E" />
+      <WAvatar src="https://github.com/pi0.png" name="Pooya Parsa" initials="PP" />
+      <WAvatar src="https://github.com/alvarosabu.png" name="Alvaro Sabu" initials="AS" />
+      <WAvatar src="https://github.com/webfansplz.png" name="Webfansplz" initials="WP" />
+      <WAvatar src="https://github.com/danielkellyio.png" name="Daniel Kelly" initials="DK" />
+    </div>
+  </div>
+</template>
diff --git a/docs/docs/components/Avatar/avatarChip.vue b/docs/docs/components/Avatar/avatarChip.vue
@@ -0,0 +1,28 @@
+<template>
+    <div>
+        <div class="flex space-x-3">
+            <WAvatar src="https://github.com/selemondev.png" name="Selemondev" initials="SB" chip-color="green" chip-text="online"
+                chip-position="top-right" />
+            <WAvatar src="https://github.com/Ryggs.png" name="Ryan Giggs" initials="RG" chip-color="green" chip-text="online"
+                chip-position="top-left" />
+            <WAvatar src="https://github.com/atinux.png" name="Sebastian Chopin" initials="SC" chip-color="green" chip-text="online"
+                chip-position="bottom-right" />
+            <WAvatar src="https://github.com/yyx990803.png" name="Evan You" initials="EY" chip-color="green" chip-text="online"
+                chip-position="bottom-left" />
+
+
+            <WAvatar src="https://github.com/danielroe.png" name="Daniel Roe" initials="DR" chip-color="red" chip-text="offline"
+                chip-position="top-right" />
+            <WAvatar src="https://github.com/baroshem.png" name="Jakub Andrzejewski" initials="JA" chip-color="yellow"
+                chip-position="bottom-left" />
+            <WAvatar src="https://github.com/posva.png" name="Eduardo" initials="E" chip-color="orange" chip-position="top-left" />
+            <WAvatar src="https://github.com/pi0.png" name="Pooya Parsa" initials="PP" chip-color="purple" chip-position="bottom-right" />
+            <WAvatar src="https://github.com/alvarosabu.png" name="Alvaro Sabu" initials="AS" chip-color="blue" chip-position="top-right" />
+            <WAvatar src="https://github.com/webfansplz.png" name="Webfansplz" initials="WP" chip-color="green"
+                chip-position="bottom-left" />
+            <WAvatar src="https://github.com/danielkellyio.png" name="Daniel Kelly" initials="DK" chip-color="violet"
+                chip-position="bottom-right" />
+    </div>
+</div>
+</template>
+
diff --git a/docs/docs/components/Avatar/avatarFallbackIcon.vue b/docs/docs/components/Avatar/avatarFallbackIcon.vue
@@ -0,0 +1,7 @@
+<template>
+    <div>
+      <div class="flex space-x-3">
+        <WAvatar />
+      </div>
+    </div>
+  </template>
diff --git a/docs/docs/components/Avatar/avatarGroup.vue b/docs/docs/components/Avatar/avatarGroup.vue
@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <div class="flex space-x-3">
+            <WAvatarGroup>
+                <WAvatar src="https://github.com/selemondev.png" name="Selemondev" initials="SB" />
+                <WAvatar src="https://github.com/Ryggs.png" name="Ryan Giggs" initials="RG" />
+                <WAvatar src="https://github.com/atinux.png" name="Sebastian Chopin" initials="SC" />
+                <WAvatar src="https://github.com/yyx990803.png" name="Evan You" initials="EY" />
+                <WAvatar src="https://github.com/danielroe.png" name="Daniel Roe" initials="DR" />
+                <WAvatar src="https://github.com/baroshem.png" name="Jakub Andrzejewski" initials="JA" />
+                <WAvatar src="https://github.com/posva.png" name="Eduardo" initials="E" />
+                <WAvatar src="https://github.com/pi0.png" name="Pooya Parsa" initials="PP" />
+                <WAvatar src="https://github.com/alvarosabu.png" name="Alvaro Sabu" initials="AS" />
+                <WAvatar src="https://github.com/webfansplz.png" name="Webfansplz" initials="WP" />
+                <WAvatar src="https://github.com/danielkellyio.png" name="Daniel Kelly" initials="DK" />
+            </WAvatarGroup>
+        </div>
+    </div>
+</template>
diff --git a/docs/docs/components/Avatar/avatarGroupMax.vue b/docs/docs/components/Avatar/avatarGroupMax.vue
@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <div class="flex space-x-3">
+            <WAvatarGroup :max="5" size="xl" >
+                <WAvatar src="https://github.com/selemondev.png" name="Selemondev" initials="SB" />
+                <WAvatar src="https://github.com/Ryggs.png" name="Ryan Giggs" initials="RG" />
+                <WAvatar src="https://github.com/atinux.png" name="Sebastian Chopin" initials="SC" />
+                <WAvatar src="https://github.com/yyx990803.png" name="Evan You" initials="EY" />
+                <WAvatar src="https://github.com/danielroe.png" name="Daniel Roe" initials="DR" />
+                <WAvatar src="https://github.com/baroshem.png" name="Jakub Andrzejewski" initials="JA" />
+                <WAvatar src="https://github.com/posva.png" name="Eduardo" initials="E" />
+                <WAvatar src="https://github.com/pi0.png" name="Pooya Parsa" initials="PP" />
+                <WAvatar src="https://github.com/alvarosabu.png" name="Alvaro Sabu" initials="AS" />
+                <WAvatar src="https://github.com/webfansplz.png" name="Webfansplz" initials="WP" />
+                <WAvatar src="https://github.com/danielkellyio.png" name="Daniel Kelly" initials="DK" />
+            </WAvatarGroup>
+        </div>
+    </div>
+</template>
diff --git a/docs/docs/components/Avatar/avatarIcon.vue b/docs/docs/components/Avatar/avatarIcon.vue
@@ -0,0 +1,8 @@
+<template>
+    <div>
+      <div class="flex space-x-3">
+        <WAvatar icon="ph:sun" />
+        <WAvatar icon="ph:moon" />
+      </div>
+    </div>
+  </template>
diff --git a/docs/docs/components/Avatar/avatarInitials.vue b/docs/docs/components/Avatar/avatarInitials.vue
@@ -0,0 +1,7 @@
+<template>
+    <div>
+      <div class="flex space-x-3">
+        <WAvatar name="Selemon" initials="SB" />
+      </div>
+    </div>
+  </template>
diff --git a/docs/docs/components/Avatar/avatarName.vue b/docs/docs/components/Avatar/avatarName.vue
@@ -0,0 +1,7 @@
+<template>
+    <div>
+      <div class="flex space-x-3">
+        <WAvatar name="Selemon" />
+      </div>
+    </div>
+  </template>
diff --git a/docs/docs/components/Avatar/avatarSize.vue b/docs/docs/components/Avatar/avatarSize.vue
@@ -0,0 +1,13 @@
+<template>
+    <div>
+        <div class="flex space-x-3">
+            <WAvatar src="https://github.com/selemondev.png" name="Selemondev" initials="SB" size="3xl" />
+            <WAvatar src="https://github.com/Ryggs.png" name="Ryan Giggs" initials="RG" size="2xl" />
+            <WAvatar src="https://github.com/atinux.png" name="Sebastian Chopin" initials="SC" size="xl" />
+            <WAvatar src="https://github.com/yyx990803.png" name="Evan You" initials="EY" size="lg" />
+            <WAvatar src="https://github.com/danielroe.png" name="Daniel Roe" initials="DR" size="md" />
+            <WAvatar src="https://github.com/baroshem.png" name="Jakub Andrzejewski" initials="JA" size="sm" />
+        </div>
+    </div>
+</template>
+
diff --git a/docs/docs/guide/components/accordion.md b/docs/docs/guide/components/accordion.md
@@ -57,7 +57,7 @@ You can use the `accordionItembody` preset to set the transition of the `WAccord
 
 By default, the transition is set to `duration-500`
 
-## Presets
+## Preset
 
 ```js
   WAccordion: {

diff --git a/docs/docs/guide/components/alert.md b/docs/docs/guide/components/alert.md
@@ -99,4 +99,140 @@ You can also create a custom alert component as demonstrated below:
 
 <demo src="../../components/Alert/alertCustom.vue" />
 
+## Preset
+
+```js
+  WAlert: {
+    base: {
+      root: 'w-full relative overflow-hidden rounded-md px-3 py-2.5',
+      alertTitle: 'text-lg font-semibold',
+      alertFlexBetween: 'flex justify-between items-center w-full',
+      alertBody: 'text-sm leading-none mt-2.5',
+      alertCloseIcon: 'w-6 h-6 block',
+      alertIsLeading: 'space-x-1',
+      alertIconIsLeading: 'pr-1.5',
+      alertIsNotLeading: 'space-x-2',
+      alertCloseButtonClass: 'p-0.5 rounded-md -m-1 block transition duration-200 ease-in',
+    },
+    variants: {
+      'default': {
+        root: 'bg-yellow-500 text-white w-full',
+        alertCloseButtonClass: 'text-white py-1 px-1 hover:bg-yellow-800',
+      },
+      'default-light': {
+        root: [
+          'border border-yellow-500 bg-yellow-100 text-yellow-800 dark:bg-yellow-500/20 dark:text-yellow-500 hover:bg-yellow-800 hover:text-white duration-200 ease-in dark:hover:bg-yellow-800 dark:hover:text-white',
+        ],
+        alertCloseButtonClass: 'hover:text-white py-1 px-1 hover:bg-yellow-900 !active:text-white',
+      },
+      'default-dashed': {
+        root: [
+          'border border-dashed border-yellow-500 text-yellow-800 hover:bg-yellow-800 hover:text-white duration-200 ease-in',
+        ],
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-yellow-900',
+      },
+      'default-outline': {
+        root: [
+          'border border-yellow-500 text-yellow-800 hover:bg-yellow-800 hover:text-white duration-200 ease-in',
+        ],
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-yellow-900',
+      },
+      'primary': {
+        root: 'bg-blue-500 text-white',
+        alertCloseButtonClass: 'text-white py-1 px-1 hover:bg-blue-800',
+      },
+      'primary-light': {
+        root: [
+          'border border-blue-500 bg-blue-100 text-blue-800 dark:bg-blue-500/20 dark:text-blue-500 hover:bg-blue-800 hover:text-white duration-200 ease-in dark:hover:bg-blue-800 dark:hover:text-white',
+        ],
+        alertCloseButtonClass: 'hover:text-white py-1 px-1 hover:bg-blue-900 !active:text-white',
+      },
+
+      'primary-outline': {
+        root: [
+          'border border-blue-500 text-blue-800 hover:bg-blue-800 hover:text-white duration-200 ease-in',
+        ],
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-blue-900',
+      },
+
+      'primary-dashed': {
+        root: [
+          'border border-dashed border-blue-500 text-blue-800 hover:bg-blue-800 hover:text-white duration-200 ease-in',
+        ],
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-blue-900',
+      },
+      'success': {
+        root: 'bg-green-500 text-white',
+        alertCloseButtonClass: 'text-white py-1 px-1 hover:bg-green-800',
+      },
+
+      'success-light': {
+        root: [
+          'border border-green-500 bg-green-100 text-green-800 dark:bg-green-500/20 dark:text-[#0CC57D] hover:bg-green-800 hover:text-white duration-200 ease-in dark:hover:bg-green-800 dark:hover:text-white',
+        ],
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-green-900',
+      },
+
+      'success-outline': {
+        root: [
+          'border border-green-500 text-green-800 hover:bg-green-800 hover:text-white duration-200 ease-in',
+        ],
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-green-900',
+      },
+
+      'success-dashed': {
+        root: [
+          'border border-dashed border-green-500 text-green-800 hover:bg-green-800 hover:text-white duration-200 ease-in',
+        ],
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-green-900',
+      },
+      'warning': {
+        root: 'bg-orange-500 text-white',
+        alertCloseButtonClass: 'text-white hover:text-white py-1 px-1 hover:bg-orange-800',
+      },
+      'warning-light': {
+        root: [
+          'border border-orange-500 bg-orange-100 text-orange-800 dark:bg-[#362C1E] dark:text-[#F5A525] hover:bg-orange-800 hover:text-white duration-200 ease-in dark:hover:bg-orange-800 dark:hover:text-white',
+        ],
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-orange-900',
+      },
+      'warning-outline': {
+        root: [
+          'border border-orange-500 text-orange-800 hover:bg-orange-800 hover:text-white duration-200 ease-in',
+        ],
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-orange-900',
+      },
+      'warning-dashed': {
+        root: [
+          'border border-dashed border-orange-500 text-orange-800 hover:bg-orange-800 hover:text-white duration-200 ease-in',
+        ],
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-orange-900',
+      },
+      'danger': {
+        root: 'bg-red-500 text-white',
+        alertCloseButtonClass: 'text-white hover:text-white py-1 px-1 hover:bg-red-800',
+      },
+      'danger-light': {
+        root: [
+          'border border-red-500 bg-red-100 text-red-800 dark:bg-red-500/20 dark:text-red-500 hover:bg-red-800 dark:hover:bg-red-800 dark:hover:text-white hover:text-white duration-200 ease-in',
+        ],
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-red-900',
+      },
+      'danger-outline': {
+        root: [
+          'border border-red-500 text-red-800 hover:bg-red-800 hover:text-white duration-200 ease-in',
+        ],
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-red-900',
+      },
+      'danger-dashed': {
+        root: [
+          'border border-dashed border-red-500 text-red-800 hover:bg-red-800 hover:text-white duration-200 ease-in',
+        ],
+        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-red-900',
+      },
+    },
+  },
+
+```
+