remove directives

src/base/variable.less

@@ -282,8 +282,8 @@
 
 @InactiveFieldBorder: var(--InactiveFieldBorder, rgba(0, 0, 0, 0.65));
 @ActiveFieldBorder: var(--ActiveFieldBorder, #000093);
-@LabelColor: (--LabelColor, rgba(0, 0, 0, 0.65));
-@GrayText: (--GrayText, rgba(0, 0, 0, 0.65));
+@LabelColor: var(--LabelColor, rgba(0, 0, 0, 0.65));
+@GrayText: var(--GrayText, rgba(0, 0, 0, 0.65));
 
 @PrimaryGrey80: var(--PrimaryGrey80, rgba(0, 0, 0, 0.65));
 

src/components/NBtn/NBtn.stories.js

@@ -46,7 +46,7 @@ export default {
 const Template = (args, { argTypes }) => ({
   components: { NitrozenBtn },
   props: Object.keys(argTypes),
-  template: ' <nitrozen-btn v-flat-btn v-bind="$props">Flat</nitrozen-btn>',
+  template: ' <nitrozen-btn v-bind="$props">Flat</nitrozen-btn>',
 });
 
 export const Flat = Template.bind({})
@@ -59,7 +59,7 @@ Flat.args = {
 const StrokedButton = (args, { argTypes }) => ({
   components: { NitrozenBtn },
   props: Object.keys(argTypes),
-  template: '<nitrozen-btn v-bind="$props" v-stroke-btn>Stroked</nitrozen-btn>',
+  template: '<nitrozen-btn v-bind="$props" >Stroked</nitrozen-btn>',
 });
 
 export const Stroked = StrokedButton.bind({})

src/components/NBtn/NBtn.vue

@@ -1,17 +1,11 @@
 <script>
 import NButtonContent from './NBtnContent';
-import strokeBtn from './../../directives/NStrokeBtn.js'
-import flatBtn from './../../directives/NFlatBtn.js'
 
 export default {
     name: 'nitrozen-button',
     components: {
         NButtonContent
     },
-    directives: {
-        strokeBtn,
-        flatBtn
-    },
     props: {
         href: {
             type: String,
@@ -51,6 +45,14 @@ export default {
         },
         state:{
             type:String
+        },
+        flat: {
+            type: Boolean,
+            default: false
+        },
+        stroke: {
+            type: Boolean,
+            default: false
         }
     },
     render(createElement) {
@@ -59,7 +61,9 @@ export default {
                 showProgress: this.showProgress,
                 icon: this.icon,
                 size:this.size,
-                iconColor:this.iconColor
+                iconColor:this.iconColor,
+                flat: this.flat,
+                stroke: this.stroke,
             }
         }, this.$slots.default)
 

src/components/NBtn/NBtnContent.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="n-button-content" :class="{'disable-click':showProgress}">
+<div class="n-button-content" :class="'nitrozenButtonClass'">
     <div class="social-icon" v-if="icon">
         <nitrozen-icon v-if="icon" :name="icon" :size="getIconSize" :color="iconColor"/>
     </div>
@@ -31,6 +31,15 @@ export default {
         iconColor:{
             type:String,
             default:"#FFFFFF"
+        },
+        flat: {
+            type: Boolean
+        },
+        stroke: {
+            type: Boolean
+        },
+        theme: {
+            type: String
         }
     },
     computed: {
@@ -41,6 +50,17 @@ export default {
         'large': 18
       }
       return iconSize[this.size]
+    },
+    nitrozenButtonClass() {
+            return {
+                'disable-click':this.showProgress,
+                'n-flat-button': this.flat == true,
+                'n-flat-button-primary': this.flat == true && this.theme == 'primary',
+                'n-flat-button-secondary': this.flat == true && this.theme == 'secondary',
+                'n-button-stroke': this.stroke == true,
+                'n-button-stroke-primary': this.stroke == true && this.theme == 'primary',
+                'n-button-stroke-secondary': this.stroke == true && this.theme == 'secondary',
+        }
     }
   }
 }

src/components/NDialog/NDialog.vue

@@ -32,7 +32,7 @@
               <nitrozen-button
                 v-if="positiveButtonLabel"
                 :theme="`${theme || 'secondary'}`"
-                v-flatBtn
+
                 class="nitrozen-dialog-footer-button-margin"
                 @click="close(positiveButtonLabel)"
                 >{{ positiveButtonLabel }}</nitrozen-button
@@ -47,7 +47,7 @@
               <nitrozen-button
                 v-if="negativeButtonLabel"
                 :theme="`${theme || 'secondary'}`"
-                v-strokeBtn
+
                 @click="close(negativeButtonLabel)"
                 >{{ negativeButtonLabel }}</nitrozen-button
               >
@@ -62,17 +62,13 @@
 import NitrozenUuid from "./../../utils/NUuid";
 import NitrozenButton from "./../NBtn";
 import NitrozenInline from "./../NInline";
-import { flatBtn, strokeBtn } from "./../../directives/index";
+
 export default {
   name: "nitrozen-dialog",
   components: {
     NitrozenButton,
     NitrozenInline,
   },
-  directives: {
-    flatBtn,
-    strokeBtn,
-  },
   props: {
     /**
      * Unique identifier

src/components/NMenu/NMenu.vue

@@ -2,7 +2,6 @@
   <transition>
     <div
       :id="id"
-      v-clickOutside="closeMenu"
       class="nitrozen-menu-content"
       :class="{'nitrozen-default-menu': !inverted}"
       @click="toggleMenu = !toggleMenu"
@@ -25,13 +24,9 @@
 
 <script>
 import NitrozenUuid from "./../../utils/NUuid";
-import clickOutside from "./../../directives/NClickOutside";
 import NitrozenInline from "../NInline";
 export default {
   name: "nitrozen-menu",
-  directives: {
-    clickOutside,
-  },
   components: {
     "nitrozen-inline": NitrozenInline,
   },

src/entry-lib.js

@@ -1,5 +1,4 @@
 
 // export * from './components/NSnackbar';
 
-export * from './components';
-export * from './directives';
+export * from './components';

src/pages/button.vue

@@ -12,11 +12,11 @@
 
     <!-- Flat Stroke Button -->
     <div class="rounded">
-        <nitrozen-button v-stroke-btn :content="'Primary Stroke'"></nitrozen-button>
+        <nitrozen-button  :content="'Primary Stroke'"></nitrozen-button>
         <div class="hover-new">
-            <nitrozen-button v-stroke-btn :content="'Hover Stroke'"></nitrozen-button>
+            <nitrozen-button  :content="'Hover Stroke'"></nitrozen-button>
         </div>
-        <nitrozen-button v-stroke-btn :content="'Disabled Stroke'" :disabled="true"></nitrozen-button>
+        <nitrozen-button  :content="'Disabled Stroke'" :disabled="true"></nitrozen-button>
     </div>
 
     <!-- Rounded Button -->
@@ -30,11 +30,11 @@
 
     <!-- Rounded Stroke Button -->
     <div class="rounded">
-        <nitrozen-button v-stroke-btn :content="'Rounded'" :rounded="true"></nitrozen-button>
+        <nitrozen-button  :content="'Rounded'" :rounded="true"></nitrozen-button>
         <div class="hover-new">
-            <nitrozen-button v-stroke-btn :content="'Hover'" :rounded="true"></nitrozen-button>
+            <nitrozen-button  :content="'Hover'" :rounded="true"></nitrozen-button>
         </div>
-        <nitrozen-button v-stroke-btn :content="'Disabled'" :rounded="true" :disabled="true"></nitrozen-button>
+        <nitrozen-button  :content="'Disabled'" :rounded="true" :disabled="true"></nitrozen-button>
     </div>
 
     <!-- <div class="rounded">
@@ -53,11 +53,11 @@
 
     <!-- Secondary Stroke Button -->
     <!-- <div class="rounded">
-       <nitrozen-button v-stroke-btn :content="'Primary'" :theme="'secondary'"></nitrozen-button>
+       <nitrozen-button  :content="'Primary'" :theme="'secondary'"></nitrozen-button>
        <div class="hover-new">
-          <nitrozen-button v-stroke-btn :content="'Hover'" :theme="'secondary'"></nitrozen-button>         
+          <nitrozen-button  :content="'Hover'" :theme="'secondary'"></nitrozen-button>         
        </div>
-       <nitrozen-button v-stroke-btn :content="'Disabled'" :disabled="true" :theme="'secondary'"></nitrozen-button>
+       <nitrozen-button  :content="'Disabled'" :disabled="true" :theme="'secondary'"></nitrozen-button>
     </div> -->
 
     <!-- Secondary Rounded Button -->
@@ -71,11 +71,11 @@
 
     <!-- Secondary Rounded Stroke Button -->
     <!-- <div class="rounded">
-       <nitrozen-button v-stroke-btn :content="'Primary'" :rounded="true" :theme="'secondary'"></nitrozen-button>
+       <nitrozen-button  :content="'Primary'" :rounded="true" :theme="'secondary'"></nitrozen-button>
        <div class="hover-new">
-          <nitrozen-button v-stroke-btn :content="'Hover'" :rounded="true" :theme="'secondary'"></nitrozen-button>         
+          <nitrozen-button  :content="'Hover'" :rounded="true" :theme="'secondary'"></nitrozen-button>         
        </div>
-       <nitrozen-button v-stroke-btn :content="'Disabled'" :rounded="true" :disabled="true" :theme="'secondary'"></nitrozen-button>
+       <nitrozen-button  :content="'Disabled'" :rounded="true" :disabled="true" :theme="'secondary'"></nitrozen-button>
     </div> -->
 
     <div class="rounded">

src/pages/custom-form-demo.vue

@@ -7,7 +7,7 @@
       v-model="emptyResponse"
       @change="formResponseChanged"
     />
-    <nitrozen-button v-flat-btn @click="sendResponse">Submit</nitrozen-button>
+    <nitrozen-button  @click="sendResponse">Submit</nitrozen-button>
   </div>
 </template>
 <script>