fix bugs

lusaxweb · Sep 29, 2020 · f1b48b2 · f1b48b2
1 parent c515d44
commit f1b48b2
Show file tree

Hide file tree

Showing 71 changed files with 753 additions and 160 deletions.
diff --git a/packages/docs/.vuepress/components/Input/default.vue b/packages/docs/.vuepress/components/Input/default.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="center content-inputs">
-    <vs-input block v-model="value" placeholder="Name" />
+    <vs-input v-model="value" placeholder="Name" />
   </div>
 </template>
 <script>

diff --git a/packages/docs/.vuepress/components/Sidebar/group.vue b/packages/docs/.vuepress/components/Sidebar/group.vue
@@ -141,7 +141,7 @@
 <script>
 export default {
   data:() => ({
-    active: 'home',
+    active: 'Instagram',
   })
 }
 </script>

diff --git a/packages/docs/.vuepress/components/Sidebar/right.vue b/packages/docs/.vuepress/components/Sidebar/right.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="hidden">
+    <vs-sidebar
+      right
+      absolute
+      v-model="active"
+      open
+      >
+      <template #logo>
+        <svg class="logo-nav" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 401.69 98.4"><g id="Capa_2" data-name="Capa 2"><g id="Capa_1-2" data-name="Capa 1"><path d="M105.79,27.23h12.78l16.12,44.65L150.9,27.23h12.77L141.48,85.56h-13.4Z"/><path d="M168.29,82.12Q164,77.77,164,69.53V42.63h12.23V69.26q0,4.26,2,6.25c1.36,1.33,3.45,2,6.29,2a13.73,13.73,0,0,0,5.75-1.22A16,16,0,0,0,195,73.06V42.63h12.22V85.56H195.91l-.45-4.08a23.47,23.47,0,0,1-15.12,5Q172.54,86.47,168.29,82.12Z"/><path d="M222.22,80.8q-6.37-5.65-6.38-16.8,0-10.5,5.57-16.39t16.26-5.89q9.78,0,15.17,5.12t5.39,13.72v7.79H227.16c.6,3.32,2.13,5.65,4.57,7s6.06,2,10.83,2a39.59,39.59,0,0,0,7-.64,31.7,31.7,0,0,0,6.11-1.63v8.7q-6,2.72-15.67,2.72Q228.61,86.47,222.22,80.8Zm25.32-20V58.48q0-8-9.51-8c-4,0-6.79.8-8.42,2.4s-2.45,4.24-2.45,7.92Z"/><path d="M272.81,85.83a31.36,31.36,0,0,1-7.07-1.72V74a31.67,31.67,0,0,0,7,1.94,44,44,0,0,0,7.52.68,23.39,23.39,0,0,0,6.47-.59,2.33,2.33,0,0,0,1.77-2.4,2.8,2.8,0,0,0-1.63-2.53,39.68,39.68,0,0,0-6.25-2.36c-.91-.24-2.06-.6-3.44-1.08q-6.35-2.09-9.29-5c-2-1.93-2.94-4.64-2.94-8.15q0-6.24,4.57-9.51t14.36-3.26a47.58,47.58,0,0,1,7.29.55,34.85,34.85,0,0,1,6.2,1.45V53.77a24.42,24.42,0,0,0-5.52-1.72,30.87,30.87,0,0,0-6-.64,25.74,25.74,0,0,0-6.43.59c-1.39.4-2.08,1.17-2.08,2.31a2.47,2.47,0,0,0,1.49,2.31,38.75,38.75,0,0,0,5.75,2l3,.91A34.78,34.78,0,0,1,295.63,63a10.69,10.69,0,0,1,4,4.21,13.91,13.91,0,0,1,1.23,6.25q0,6.43-4.8,9.74t-14.22,3.31A63,63,0,0,1,272.81,85.83Z"/><path d="M312,83q-4.39-3.49-4.39-9.83A12.49,12.49,0,0,1,312.16,63q4.57-3.75,13.18-3.76H338V58a8.13,8.13,0,0,0-.95-4.26,5.63,5.63,0,0,0-3.35-2.26,24.6,24.6,0,0,0-6.84-.73A44.66,44.66,0,0,0,312.75,53v-8.6a36,36,0,0,1,7.47-2,55.67,55.67,0,0,1,9.19-.73q20.29,0,20.29,16.58V85.56H339.11l-.64-3.89q-5.25,4.8-15.58,4.8A17,17,0,0,1,312,83Zm21.19-5.89A12.69,12.69,0,0,0,338,73.6V66.81H325.61q-7.16,0-7.15,5.89,0,5.7,7.78,5.7A17.2,17.2,0,0,0,333.17,77.09Z"/><path d="M372,63.73l-15.85-21.1h13.23l9.24,12.5,9.23-12.5h13.23L385.3,63.73l16.39,21.83H388.38L378.6,72.43l-9.79,13.13H355.5Z"/><polygon points="92.25 8.05 75.25 8.05 46.14 53.12 17.04 8.05 0.04 8.05 46.15 79.45 92.25 8.05"/><polygon points="46.15 87.39 7.11 26.94 0 26.94 46.14 98.4 92.29 26.94 85.18 26.94 46.15 87.39"/><polygon points="70.34 1.37 46.14 38.17 21.95 1.37 39.75 5.87 39.75 0 52.54 0 52.54 5.87 70.34 1.37"/></g></g></svg>
+      </template>
+      <template #header>
+
+      </template>
+      <vs-sidebar-item id="home">
+        <template #icon>
+          <i class='bx bx-home'></i>
+        </template>
+        Home
+      </vs-sidebar-item>
+      <vs-sidebar-item id="market">
+        <template #icon>
+          <i class='bx bx-grid-alt'></i>
+        </template>
+        Market Overview
+      </vs-sidebar-item>
+      <vs-sidebar-item id="Music">
+        <template #icon>
+          <i class='bx bxs-music'></i>
+        </template>
+        Music
+      </vs-sidebar-item>
+      <vs-sidebar-item id="donate">
+        <template #icon>
+          <i class='bx bxs-donate-heart' ></i>
+        </template>
+        Donate
+      </vs-sidebar-item>
+      <vs-sidebar-item id="drink">
+        <template #icon>
+          <i class='bx bx-drink'></i>
+        </template>
+        Drink
+      </vs-sidebar-item>
+      <vs-sidebar-item id="shopping">
+        <template #icon>
+          <i class='bx bxs-shopping-bags'></i>
+        </template>
+        Shopping
+      </vs-sidebar-item>
+      <vs-sidebar-item id="chat">
+        <template #icon>
+          <i class='bx bx-chat' ></i>
+        </template>
+        Chat
+      </vs-sidebar-item>
+      <template #footer>
+        <vs-row justify="space-between">
+          <vs-avatar>
+            <img src="/avatars/avatar-5.png" alt="">
+          </vs-avatar>
+
+          <vs-avatar badge-color="danger" badge-position="top-right">
+            <i class='bx bx-bell' ></i>
+
+            <template #badge>
+              28
+            </template>
+          </vs-avatar>
+        </vs-row>
+      </template>
+    </vs-sidebar>
+  </div>
+</template>
+<script>
+export default {
+  data:() => ({
+    active: 'home',
+  })
+}
+</script>
+<style lang="stylus">
+  .hidden
+    overflow hidden
+    position relative
+    min-height 600px
+</style>
diff --git a/packages/docs/.vuepress/components/button/icon.vue b/packages/docs/.vuepress/components/button/icon.vue
@@ -10,7 +10,7 @@
 
     <vs-button
       icon
-      color="success"
+      success
       flat
       :active="active == 1"
       @click="active = 1"
@@ -20,7 +20,7 @@
 
     <vs-button
       icon
-      color="danger"
+      danger
       border
       :active="active == 2"
       @click="active = 2"
@@ -30,7 +30,7 @@
 
     <vs-button
       icon
-      color="warn"
+      warn
       gradient
       :active="active == 3" @click="active = 3"
     >

diff --git a/packages/docs/.vuepress/dist b/packages/docs/.vuepress/dist
diff --git a/packages/docs/docs/components/Dialog.md b/packages/docs/docs/components/Dialog.md
@@ -143,6 +143,17 @@ PROPS:
             <vs-dialog prevent-close v-model="active">
               ...
             </vs-dialog>
+  - name: v-on:close
+    type: Methods
+    values: function
+    description: return function when closing the dialog.
+    default: null
+    link: null
+    usage: null
+    code: >
+            <vs-dialog @close="handleClose" v-model="active">
+              ...
+            </vs-dialog>
 
 SLOTS:
   - name: slot name

diff --git a/packages/docs/docs/components/Loading.md b/packages/docs/docs/components/Loading.md
@@ -644,8 +644,39 @@ You can change the loading background with the property `loading`
 
 <div slot="template">
 
-  ```html{3,4,5}
-    ...
+  ```html
+    <div ref="target" id="target" class="center">
+      <div :style="`background: ${color};`" class="con-input">
+        <input v-model="color" type="color">
+        <i class='bx bxs-color-fill'></i>
+      </div>
+      <vs-button flat :color="color" @click="openLoading">Open Loading</vs-button>
+    </div>
+  ```
+
+</div>
+
+<div slot="script">
+
+  ```html
+    <script>
+      export default {
+        data: () => ({
+          color: '#7a76cb',
+        }),
+        methods: {
+          openLoading() {
+            const loading = this.$vs.loading({
+              background: this.color,
+              color: '#fff'
+            })
+            setTimeout(() => {
+              loading.close()
+            }, 3000)
+          }
+        }
+      }
+    </script>
   ```
 
 </div>

diff --git a/packages/docs/docs/components/Sidebar.md b/packages/docs/docs/components/Sidebar.md
@@ -166,6 +166,17 @@ PROPS:
             <vs-sidebar-item
               href="http://vuesax.com/"
             >
+  - name: right
+    type: Boolean
+    values: true,false
+    description: Determines if the component is positioned to the right
+    default: null
+    link: null
+    usage: null
+    code: >
+            <vs-sidebar right>
+              ...
+            </vs-sidebar>
 
 SLOTS:
   - name: logo
@@ -1210,6 +1221,109 @@ You can define if the sidebar is visible or hidden with the open property, this
 
 <card>
 
+## Position Right
+
+Change the position of the sidebar to the right and its animation with the `right` property
+
+<div slot="example">
+  <Sidebar-right />
+</div>
+
+<div slot="template">
+
+  ```html{2}
+    <vs-sidebar
+      right
+      absolute
+      v-model="active"
+      open
+      >
+      <template #logo>
+        ...
+      </template>
+      <template #header>
+
+      </template>
+      <vs-sidebar-item id="home">
+        <template #icon>
+          <i class='bx bx-home'></i>
+        </template>
+        Home
+      </vs-sidebar-item>
+      <vs-sidebar-item id="market">
+        <template #icon>
+          <i class='bx bx-grid-alt'></i>
+        </template>
+        Market Overview
+      </vs-sidebar-item>
+      <vs-sidebar-item id="Music">
+        <template #icon>
+          <i class='bx bxs-music'></i>
+        </template>
+        Music
+      </vs-sidebar-item>
+      <vs-sidebar-item id="donate">
+        <template #icon>
+          <i class='bx bxs-donate-heart' ></i>
+        </template>
+        Donate
+      </vs-sidebar-item>
+      <vs-sidebar-item id="drink">
+        <template #icon>
+          <i class='bx bx-drink'></i>
+        </template>
+        Drink
+      </vs-sidebar-item>
+      <vs-sidebar-item id="shopping">
+        <template #icon>
+          <i class='bx bxs-shopping-bags'></i>
+        </template>
+        Shopping
+      </vs-sidebar-item>
+      <vs-sidebar-item id="chat">
+        <template #icon>
+          <i class='bx bx-chat' ></i>
+        </template>
+        Chat
+      </vs-sidebar-item>
+      <template #footer>
+        <vs-row justify="space-between">
+          <vs-avatar>
+            <img src="/avatars/avatar-5.png" alt="">
+          </vs-avatar>
+
+          <vs-avatar badge-color="danger" badge-position="top-right">
+            <i class='bx bx-bell' ></i>
+
+            <template #badge>
+              28
+            </template>
+          </vs-avatar>
+        </vs-row>
+      </template>
+    </vs-sidebar>
+  ```
+
+</div>
+
+<div slot="script">
+
+  ```html
+    <script>
+      export default {
+        data:() => ({
+          active: 'home',
+        })
+      }
+    </script>
+  ```
+
+</div>
+
+</card>
+
+<card>
+
 ## API
 
 </card>
diff --git a/packages/docs/es/docs/components/Dialog.md b/packages/docs/es/docs/components/Dialog.md
@@ -143,6 +143,17 @@ PROPS:
             <vs-dialog prevent-close v-model="active">
               ...
             </vs-dialog>
+  - name: v-on:close
+    type: Methods
+    values: function
+    description: función de retorno al cerrar el dialog.
+    default: null
+    link: null
+    usage: null
+    code: >
+            <vs-dialog @close="handleClose" v-model="active">
+              ...
+            </vs-dialog>
 
 SLOTS:
   - name: slot name

diff --git a/packages/docs/es/docs/components/Loading.md b/packages/docs/es/docs/components/Loading.md
@@ -644,8 +644,39 @@ Puedes cambiar el background del loading con la propiedad `loading`
 
 <div slot="template">
 
-  ```html{3,4,5}
-    ...
+  ```html
+    <div ref="target" id="target" class="center">
+      <div :style="`background: ${color};`" class="con-input">
+        <input v-model="color" type="color">
+        <i class='bx bxs-color-fill'></i>
+      </div>
+      <vs-button flat :color="color" @click="openLoading">Open Loading</vs-button>
+    </div>
+  ```
+
+</div>
+
+<div slot="script">
+
+  ```html
+    <script>
+      export default {
+        data: () => ({
+          color: '#7a76cb',
+        }),
+        methods: {
+          openLoading() {
+            const loading = this.$vs.loading({
+              background: this.color,
+              color: '#fff'
+            })
+            setTimeout(() => {
+              loading.close()
+            }, 3000)
+          }
+        }
+      }
+    </script>
   ```
 
 </div>