added Dialog.vue component

DanielTerletzkiy · Dec 29, 2021 · 1d71f99 · 1d71f99
1 parent 016397e
commit 1d71f99
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 3 deletions.
diff --git a/DOCS/DemoView.vue b/DOCS/DemoView.vue
@@ -110,7 +110,7 @@
         <d-text-field color="primary" filled label="Default Select" v-model="selectedIcon" select
                       :items="['Cube', 'Anchor', 'Layers Alt']"/>
 
-        <d-text-field placeholder="test" color="primary" full-width filled label="Icon Select Autocomplete"
+        <d-text-field placeholder="test" color="primary" full-width inlined label="Icon Select Autocomplete"
                       text="name" v-model="selectedIcons" autocomplete
                       :items="iconItems">
           <template v-slot:label="{ item, index }">
@@ -123,8 +123,8 @@
             </d-label>
           </template>
           <template slot="item" slot-scope="{item}">
-              <d-icon :name="item.icon" :icon-style="item.iconStyle"/>
-              {{ item.name }}
+            <d-icon :name="item.icon" :icon-style="item.iconStyle"/>
+            {{ item.name }}
           </template>
         </d-text-field>
 
@@ -198,6 +198,58 @@
 
     <div class="my-4"/>
 
+    <d-card elevation block>
+      <d-card-title>
+        <d-icon name="comment-alt" color="primary" :size="30"/>
+        Dialogs!
+      </d-card-title>
+      <d-card-content>
+        <d-btn filled color="primary" @click="()=>openDialog=true">
+          Open Dialog
+        </d-btn>
+        <d-dialog v-model="openDialog" :persistent="persistentDialog">
+          <d-card width="400px">
+            <d-card-title>
+              YesNo Dialog
+            </d-card-title>
+            <d-card-subtitle>
+              <d-checkbox v-model="persistentDialog" size="24" off-icon="lock-open-alt" on-icon="lock-alt">Persistent</d-checkbox>
+            </d-card-subtitle>
+            <d-divider class="mx-3"/>
+            <d-column gap>
+              <d-column block>
+                <d-row>
+                  <d-column>
+                    <d-card-title class="font-size-large font-weight-bold" style="text-transform: uppercase"
+                                  :color="yesNo.answer === 'yes' ? 'success' : 'error'">
+                      {{ yesNo.answer }}
+                    </d-card-title>
+                    <d-card-subtitle>
+                      Answer
+                    </d-card-subtitle>
+                  </d-column>
+                  <d-spacer/>
+                  <d-icon-button @click="()=>yesNoApi()">
+                    <d-icon name="sync"/>
+                  </d-icon-button>
+                </d-row>
+                <d-image height="300px" :src="yesNo.image"/>
+              </d-column>
+              <d-spacer/>
+              <d-row class="pa-1" elevation="1">
+                <d-spacer/>
+                <d-btn color="primary" glow @click="()=>openDialog=false">
+                  Close
+                </d-btn>
+              </d-row>
+            </d-column>
+          </d-card>
+        </d-dialog>
+      </d-card-content>
+    </d-card>
+
+    <div class="my-4"/>
+
     <d-card elevation block>
       <d-card-title>
         <d-icon name="scenery" color="primary" :size="30"/>
@@ -478,13 +530,25 @@ export default {
 
     openSelectMenu: false,
 
+    openDialog: false,
+    persistentDialog: false,
+    yesNo: {},
+
     progressValue: 0,
 
     openAccordion: 0,
 
     tabs: 0,
   }),
 
+  watch: {
+    openDialog(state) {
+      if (state) {
+        this.yesNoApi()
+      }
+    }
+  },
+
   mounted() {
     this.$notify('Hello there', 'General Kenobi', 'success')
 
@@ -504,6 +568,19 @@ export default {
         this.$vuelize.theme.themes.light.primary = this.processColor(color)
 
       }
+    },
+    yesNoApi: async function () {
+      fetch("https://yesno.wtf/api")
+          .then(function (response) {
+            return response.json();
+          })
+          .then((data) => {
+            console.log(data);
+            this.yesNo = data
+          })
+          .catch(function (error) {
+            console.error(error);
+          });
     }
   }
 }

diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
@@ -0,0 +1,63 @@
+<template>
+  <fade-transition>
+    <d-function-wrapper :classes="['d-dialog', ...classesObject]" v-bind="{...$props, ...$attrs}"
+                        @click="$emit('click')"
+                        v-if="value">
+      <div class="d-dialog__backdrop" @click.self="handleClick"/>
+      <div class="d-dialog__content">
+        <slot name="default">
+          hello there
+        </slot>
+      </div>
+    </d-function-wrapper>
+  </fade-transition>
+</template>
+
+<script>
+export default {
+  name: "Dialog",
+
+  props: {
+    value: Boolean,
+    persistent: Boolean
+  },
+
+  methods: {
+    handleClick() {
+      if (!this.persistent) {
+        this.close()
+      }
+    },
+    close() {
+      this.$emit('input', false)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.d-dialog {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 4;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &__backdrop {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: black;
+    opacity: 0.5;
+    user-select: none;
+  }
+
+  &__content {
+    z-index: 5;
+  }
+}
+</style>
diff --git a/src/index.js b/src/index.js
@@ -50,6 +50,7 @@ import DNotificationWrapper from "./components/notification/NotificationWrapper.
 import DBadge from "./components/badge/Badge.vue";
 import DLabel from "./components/label/Label.vue";
 import DProgressbar from "./components/progress/Progressbar.vue";
+import DDialog from "./components/dialog/Dialog.vue";
 
 export default Vue => {
 
@@ -86,6 +87,7 @@ export default Vue => {
     Vue.component("d-badge", DBadge);
     Vue.component("d-label", DLabel);
     Vue.component("d-progressbar", DProgressbar);
+    Vue.component("d-dialog", DDialog);
 
 
     //-----------------------