Merge pull request #182 from gofynd/Fix-search-icon-v2-dialog

Fix search icon v2 dialog publish-npm

src/base/variable.less

@@ -73,6 +73,8 @@
 
 @PrimaryColorHover:#E7EEFF;
 
+@Gray1:#3D3D3D;
+
 
 //Success Color
 @SemanticSuccess: #0A5F23;

src/components/NDialog2/NDialog2.less

@@ -0,0 +1,81 @@
+@import "./../../base/base.less";
+
+.nitrozen-dialog-backdrop {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+
+  .nitrozen-dialog {
+    font-family: @PrimaryFont;
+    background: #fff;
+    min-width: 280px;
+    border: 1px solid @BorderColor;
+    border-radius: 3px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .nitrozen-dialog-header,
+  .nitrozen-dialog-footer {
+    display: flex;
+  }
+
+  .nitrozen-dialog-header {
+    margin: 24px 0;
+    padding: 0 24px;
+    height: 40px;
+    line-height: 24px;
+    font-size: 16px;
+    font-weight: bold;
+    color: @TypographyPrimaryColor;
+    justify-content: space-between;
+    border-bottom: 1px solid @BorderColor;
+    .nitrozen-inline-svg {
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+      /deep/svg {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+
+  .nitrozen-dialog-footer {
+    margin: 24px 0 24px;
+    padding: 0 24px;
+    height: 36px;
+    justify-content: flex-end;
+    .nitrozen-dialog-footer-button-margin{
+      margin-right: 16px;
+    } 
+  }
+
+  .nitrozen-dialog-body {
+    flex: 1;
+    padding: 0 24px;
+    position: relative;
+    line-height: 19px;
+    font-size: 14px;
+    color: @TypographyPrimaryColor;
+    overflow: auto;
+    .nitrozen-scrollbar;
+  }
+}
+
+.nitrozen-dialog-fade-enter,
+.nitrozen-dialog-fade-leave-active {
+  opacity: 0;
+}
+
+.nitrozen-dialog-fade-enter-active,
+.nitrozen-dialog-fade-leave-active {
+  transition: opacity 0.5s ease;
+}

src/components/NDialog2/NDialog2.vue

@@ -0,0 +1,167 @@
+<template>
+  <div v-show="isModalVisible" :id="id">
+    <transition name="nitrozen-dialog-fade">
+      <div class="nitrozen-dialog-backdrop" @click="backdropClick">
+        <dialog
+          ref="dialog"
+          class="nitrozen-dialog"
+          :aria-labelledby="id + '_title'"
+          :aria-describedby="id + '_desc'"
+        >
+          <header
+            class="nitrozen-dialog-header"
+            v-show="title"
+            :id="id + '_title'"
+          >
+            <slot name="header">
+              {{ title }}
+              <nitrozen-inline
+                v-if="showCloseButton"
+                title="close"
+                @click="close('close')"
+                icon="cross-large"
+              ></nitrozen-inline>
+            </slot>
+          </header>
+          <section class="nitrozen-dialog-body" :id="id + '_desc'">
+            <slot name="body"></slot>
+          </section>
+          <footer class="nitrozen-dialog-footer">
+            <slot name="footer">
+              <nitrozen-button
+                v-if="secondaryButtonLabel"
+                :theme="'secondary'"
+                class="nitrozen-dialog-footer-button-margin"
+                @click="close(secondaryButtonLabel)"
+                >{{ secondaryButtonLabel }}</nitrozen-button
+              >
+              <nitrozen-button
+                v-if="primaryButtonLabel"
+                @click="close(primaryButtonLabel)"
+                :appearance="`${type === 'destructive' ? 'negative' : ''}`"
+                >{{ primaryButtonLabel }}</nitrozen-button
+              >
+            </slot>
+          </footer>
+        </dialog>
+      </div>
+    </transition>
+  </div>
+</template>
+<script>
+import NitrozenUuid from "./../../utils/NUuid";
+import NitrozenButtonV2 from "./../NBtn2";
+import NitrozenInline from "./../NInline";
+export default {
+  name: "nitrozen-dialog-v2",
+  components: {
+    'nitrozen-button':NitrozenButtonV2,
+    NitrozenInline,
+  },
+  props: {
+    /**
+     * Unique identifier
+     */
+    id: {
+      type: [Number, String],
+      default: () => "nitrozen-dialog-" + NitrozenUuid(),
+    },
+    /**
+     * title of dialog
+     */
+    title: {
+      type: String,
+    },
+       /**
+        * Type of dialog type = [destructive,dialog]*  of dialog
+     */
+    type: {
+      type: String,
+      default:'dialog'
+    },
+  },
+  data: () => {
+    return {
+      data: null,
+      dismissible: true,
+      isModalVisible: false,
+      primaryButtonLabel: false,
+      secondaryButtonLabel: false,
+      showCloseButton: false,
+    };
+  },
+  methods: {
+    open(config = {}) {
+      // background scroll disabled on nitrozen dialog open
+      document.body.style.top = `-${window.scrollY}px`;
+      document.body.style.position = "fixed";
+
+      this.isModalVisible = true;
+      if (config.height != undefined)
+        this.$refs["dialog"].style.height = config.height;
+      if (config.width != undefined)
+        this.$refs["dialog"].style.width = config.width;
+      if (config.secondaryButtonLabel != undefined) {
+        this.secondaryButtonLabel = config.secondaryButtonLabel;
+      }
+      if (config.primaryButtonLabel != undefined) {
+        this.primaryButtonLabel = config.primaryButtonLabel;
+      }
+      if (config.neutralButtonLabel != undefined) {
+        this.neutralButtonLabel = config.neutralButtonLabel;
+      }
+      if (config.dismissible != undefined) {
+        this.dismissible = config.dismissible;
+      }
+      if (config.showCloseButton != undefined) {
+        this.showCloseButton = config.showCloseButton;
+      }
+      if (config.data != undefined) {
+        this.data = config.data;
+      }
+      this.$emit("open");
+      return this;
+    },
+    close(data) {
+      // background scroll enable on nitrozen dialog close
+      const scrollY = document.body.style.top;
+      document.body.style.position = "";
+      document.body.style.top = "";
+      window.scrollTo(0, parseInt(scrollY || "0") * -1);
+
+      this.isModalVisible = false;
+      this.$emit("close", data);
+      return this;
+    },
+    isOpen() {
+      return this.isModalVisible;
+    },
+    backdropClick(e) {
+      // close dialog on outside click
+      const dialog = this.$refs["dialog"];
+      if (this.dismissible && dialog && !dialog.contains(e.target)) {
+        this.close(null);
+      }
+    },
+    handleESCKey: function(event) {
+      // ESC key detection
+      if (event.keyCode == 27 && this.dismissible && this.isOpen()) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.close("close");
+      }
+    },
+  },
+  created() {
+    if (typeof document !== "undefined") {
+      document.addEventListener("keydown", this.handleESCKey);
+    }
+  },
+  destroyed() {
+    document.removeEventListener("keydown", this.handleESCKey);
+  },
+};
+</script>
+<style lang="less">
+@import "./NDialog2.less";
+</style>

src/components/NDialog2/index.js

@@ -0,0 +1,3 @@
+import NDialogV2 from './NDialog2';
+export { NDialogV2 }
+export default NDialogV2;

src/components/NDropdown/DropdownLoader.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="loader-container">
+    <div class="dropdown-loader"></div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Dropdown-loader'
+}
+</script>
+<style lang="less" scoped>
+.loader-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+}
+
+.dropdown-loader {
+  width: 10px;
+  margin: 10px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  animation: l5 1s infinite linear alternate;
+}
+
+@keyframes l5 {
+  0% {
+    box-shadow: 15px 0 rgba(46, 49, 190, 1), -15px 0 rgba(46, 49, 190, 0.2);
+    background: rgba(46, 49, 190, 1);
+  }
+
+  33% {
+    box-shadow: 15px 0 rgba(46, 49, 190, 1), -15px 0 rgba(46, 49, 190, 0.2);
+    background: rgba(46, 49, 190, 0.2);
+  }
+
+  66% {
+    box-shadow: 15px 0 rgba(46, 49, 190, 0.2), -15px 0 rgba(46, 49, 190, 1);
+    background: rgba(46, 49, 190, 0.2);
+  }
+
+  100% {
+    box-shadow: 15px 0 rgba(46, 49, 190, 0.2), -15px 0 rgba(46, 49, 190, 1);
+    background: rgba(46, 49, 190, 1);
+  }
+}</style>

src/components/NDropdown/NDropdown.less

@@ -116,8 +116,10 @@
 
     .nitrozen-option-logo {
       height: 24px;
-      width: auto;
+      width: 24px;
+      border-radius: 4px;
       padding-right: 8px;
+
     }
 
     .nitrozen-option-image{
@@ -192,17 +194,26 @@
 
 .nitrozen-dropdown-empty {
   display: flex;
+  align-items: center;
   .nitrozen-add-btn {
     width: 25px;
     height: 25px;
   }
-  p {
+  .nitrozen-option-add-option {
     margin: 0px;
     color: @SecondaryColor;
     font-weight: 700;
     font-size: 12px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
   }
   svg path{
     fill: @SecondaryColor;
   }
+}
+.loader-container{
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }