new Component Pagination

lusaxweb · Mar 3, 2020 · 4fa316d · 4fa316d
1 parent a90c341
commit 4fa316d
Show file tree

Hide file tree

Showing 88 changed files with 8,147 additions and 164 deletions.
diff --git a/README.md b/README.md
@@ -42,7 +42,7 @@ Every day is being updated and working on **Vuesax 4**, we will announce each ne
 - [x] Checkbox
 - [ ] Chip
 - [ ] Collapse
-- [ ] Dialogs
+- [x] Dialogs
 - [ ] Divider
 - [ ] Dropdown
 - [ ] Images
@@ -52,8 +52,8 @@ Every day is being updated and working on **Vuesax 4**, we will announce each ne
 - [ ] Navbar
 - [x] Notification
 - [ ] Number Input
-- [ ] Pagination
-- [ ] Popup
+- [x] Pagination
+- [x] Popup
 - [ ] Progress
 - [x] Radio
 - [x] Select

diff --git a/packages/docs/.vuepress/components/Dialog/blur.vue b/packages/docs/.vuepress/components/Dialog/blur.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="center">
+    <vs-button dark @click="active=!active">
+      Open Dialog
+    </vs-button>
+    <vs-dialog blur v-model="active">
+      <template #header>
+        <h4 class="not-margin">
+          Welcome to <b>Vuesax</b>
+        </h4>
+      </template>
+
+
+      <div class="con-form">
+        <vs-input v-model="input1" placeholder="Email">
+          <template #icon>
+            @
+          </template>
+        </vs-input>
+        <vs-input type="password" v-model="input2" placeholder="Password">
+          <template #icon>
+            <i class='bx bxs-lock'></i>
+          </template>
+        </vs-input>
+        <div class="flex">
+          <vs-checkbox v-model="checkbox1">Remember me</vs-checkbox>
+          <a href="#">Forgot Password?</a>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="footer-dialog">
+          <vs-button block>
+            Sign In
+          </vs-button>
+
+          <div class="new">
+            New Here? <a href="#">Create New Account</a>
+          </div>
+        </div>
+      </template>
+    </vs-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data:() => ({
+    active: false,
+    input1: '',
+    input2: '',
+    checkbox1: false
+  })
+}
+</script>
+<style lang="stylus">
+getColor(vsColor, alpha = 1)
+    unquote("rgba(var(--vs-"+vsColor+"), "+alpha+")")
+getVar(var)
+    unquote("var(--vs-"+var+")")
+.not-margin
+  margin 0px
+  font-weight normal
+  padding 10px
+.con-form
+  width 100%
+  .flex
+    display flex
+    align-items center
+    justify-content space-between
+    a
+      font-size .8rem
+      opacity .7
+      &:hover
+        opacity 1
+  .vs-checkbox-label
+    font-size .8rem
+  .vs-input-content
+    margin 10px 0px
+    width calc(100%)
+    .vs-input
+      width 100%
+.footer-dialog
+  display flex
+  align-items center
+  justify-content center
+  flex-direction column
+  width calc(100%)
+  .new
+    margin 0px
+    margin-top 20px
+    padding: 0px
+    font-size .7rem
+    a
+      color getColor('primary') !important
+      margin-left 6px
+      &:hover
+        text-decoration underline
+  .vs-button
+    margin 0px
+</style>
diff --git a/packages/docs/.vuepress/components/Dialog/default.vue b/packages/docs/.vuepress/components/Dialog/default.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="center">
+    <vs-button @click="active=!active">
+      Open Dialog
+    </vs-button>
+    <vs-dialog v-model="active">
+      <template #header>
+        <h4 class="not-margin">
+          Welcome to <b>Vuesax</b>
+        </h4>
+      </template>
+
+
+      <div class="con-form">
+        <vs-input v-model="email" placeholder="Email">
+          <template #icon>
+            @
+          </template>
+        </vs-input>
+        <vs-input type="password" v-model="password" placeholder="Password">
+          <template #icon>
+            <i class='bx bxs-lock'></i>
+          </template>
+        </vs-input>
+        <div class="flex">
+          <vs-checkbox v-model="remember">Remember me</vs-checkbox>
+          <a href="#">Forgot Password?</a>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="footer-dialog">
+          <vs-button block>
+            Sign In
+          </vs-button>
+
+          <div class="new">
+            New Here? <a href="#">Create New Account</a>
+          </div>
+        </div>
+      </template>
+    </vs-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data:() => ({
+    active: false,
+    email: '',
+    password: '',
+    remember: false
+  })
+}
+</script>
+<style lang="stylus">
+getColor(vsColor, alpha = 1)
+    unquote("rgba(var(--vs-"+vsColor+"), "+alpha+")")
+getVar(var)
+    unquote("var(--vs-"+var+")")
+.not-margin
+  margin 0px
+  font-weight normal
+  padding 10px
+.con-form
+  width 100%
+  .flex
+    display flex
+    align-items center
+    justify-content space-between
+    a
+      font-size .8rem
+      opacity .7
+      &:hover
+        opacity 1
+  .vs-checkbox-label
+    font-size .8rem
+  .vs-input-content
+    margin 10px 0px
+    width calc(100%)
+    .vs-input
+      width 100%
+.footer-dialog
+  display flex
+  align-items center
+  justify-content center
+  flex-direction column
+  width calc(100%)
+  .new
+    margin 0px
+    margin-top 20px
+    padding: 0px
+    font-size .7rem
+    a
+      color getColor('primary') !important
+      margin-left 6px
+      &:hover
+        text-decoration underline
+  .vs-button
+    margin 0px
+</style>
diff --git a/packages/docs/.vuepress/components/Dialog/fullScreen.vue b/packages/docs/.vuepress/components/Dialog/fullScreen.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="center">
+    <vs-button gradient warn @click="active=!active">
+      Open Dialog
+    </vs-button>
+    <vs-dialog overflow-hidden full-screen v-model="active">
+      <template #header>
+        <h4 class="not-margin">
+          Welcome to <b>Vuesax</b>
+        </h4>
+      </template>
+
+
+      <div class="con-form">
+        <vs-input v-model="input1" placeholder="Email">
+          <template #icon>
+            @
+          </template>
+        </vs-input>
+        <vs-input type="password" v-model="input2" placeholder="Password">
+          <template #icon>
+            <i class='bx bxs-lock'></i>
+          </template>
+        </vs-input>
+        <div class="flex">
+          <vs-checkbox v-model="checkbox1">Remember me</vs-checkbox>
+          <a href="#">Forgot Password?</a>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="footer-dialog">
+          <vs-button block>
+            Sign In
+          </vs-button>
+
+          <div class="new">
+            New Here? <a href="#">Create New Account</a>
+          </div>
+        </div>
+      </template>
+    </vs-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data:() => ({
+    active: false,
+    input1: '',
+    input2: '',
+    checkbox1: false
+  })
+}
+</script>
+<style lang="stylus">
+getColor(vsColor, alpha = 1)
+    unquote("rgba(var(--vs-"+vsColor+"), "+alpha+")")
+getVar(var)
+    unquote("var(--vs-"+var+")")
+.not-margin
+  margin 0px
+  font-weight normal
+  padding 10px
+.con-form
+  width 100%
+  .flex
+    display flex
+    align-items center
+    justify-content space-between
+    a
+      font-size .8rem
+      opacity .7
+      &:hover
+        opacity 1
+  .vs-checkbox-label
+    font-size .8rem
+  .vs-input-content
+    margin 10px 0px
+    width calc(100%)
+    .vs-input
+      width 100%
+.footer-dialog
+  display flex
+  align-items center
+  justify-content center
+  flex-direction column
+  width calc(100%)
+  .new
+    margin 0px
+    margin-top 20px
+    padding: 0px
+    font-size .7rem
+    a
+      color getColor('primary') !important
+      margin-left 6px
+      &:hover
+        text-decoration underline
+  .vs-button
+    margin 0px
+</style>