fix: fixed component name

Author: burhanahmeed

README.md

@@ -64,6 +64,23 @@ Vue.use(Modal. {
 ### Props
 vue-modal-2 accept some props
 
+#### `headerOptions`
+options props for vue-modal-2 header
+- type: `Object`
+- default: `{}`
+
+__headerOptions key:__
+
+|key|type|default|desc|
+|---|---|---|---|
+|`headerOptions.title`|`String`|Modal title| Modal title on the left side|
+|`headerOptions.closeIcon`|`String`|`✕`|Close button icon on the right side|
+
+#### `footerOptions`
+options props for vue-modal-2 footer
+- type: `Object`
+- default: `{}`
+
 #### `noFooter`
 used to remove footer
 - type: `Boolean`

src/App.vue

@@ -3,8 +3,11 @@
     <img alt="Vue logo" src="./assets/logo.png" width="25%" />
     <p v-for="i in 10" :key="i">scroll down</p>
 
-    <ContainerModal
+    <modal-vue
       name="modal1"
+      :headerOptions="{
+        title: 'Delete?'
+      }"
       :footerOptions="{
         btn1OnClick: () => hell(),
         justify: 'flex-start',
@@ -19,19 +22,19 @@
         <!-- <div>Footer Name</div> -->
       </template>
       <div>content</div>
-    </ContainerModal>
+    </modal-vue>
     <button @click="open" class="button">Click Here</button>
 
     <p v-for="i in 10" :key="i">scroll up</p>
   </div>
 </template>
 
 <script>
-import ContainerModal from "./components/Container";
+// import ContainerModal from "./components/Container";
 export default {
   name: "App",
   components: {
-    ContainerModal,
+    // ContainerModal,
   },
   data() {
     return {

src/components/Container.vue

@@ -12,7 +12,7 @@
         id="vm2_box"
         :style="{ backgroundColor: modalBgColor, color: fontColor }"
       >
-        <withHeader v-if="!noHeader" @on-icon-click="handleClose">
+        <withHeader v-if="!noHeader" @on-icon-click="handleClose" :props="{...headerOptions}">
           <slot name="header" />
         </withHeader>
         <div v-if="hasDefaultSlot" style="margin: 15px">This is content</div>
@@ -38,6 +38,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    headerOptions: {
+      type: Object,
+      default: () => {},
+    },
     // visible: {
     //   type: Boolean,
     //   default: false,

src/components/withHeader.vue

@@ -13,16 +13,7 @@
 
 <script>
 export default {
-  props: {
-    title: {
-      type: String,
-      default: "Modal title",
-    },
-    closeIcon: {
-      type: String,
-      default: "&#x2715;",
-    },
-  },
+  props: ['props'],
   methods: {
     handleIconClick() {
       this.$emit("on-icon-click");
@@ -32,6 +23,18 @@ export default {
     hasDefaultSlot() {
       return !this.$slots.default;
     },
+    title () {
+      if (this.props && this.props.title) {
+        return this.props.title;
+      }
+      return "Modal title";
+    },
+    closeIcon () {
+      if (this.props && this.props.closeIcon) {
+        return this.props.closeIcon;
+      }
+      return "&#x2715;";
+    }
   },
 };
 </script>

src/index.js

@@ -10,7 +10,7 @@ const plugin = {
       return;
     }
 
-    const options = Object.assign(opts, optsDefault);
+    const options = Object.assign(optsDefault, opts);
 
     const root = new Vue();
 

src/main.js

@@ -3,7 +3,9 @@ import App from "./App.vue";
 import VM2 from "./index.js";
 
 Vue.config.productionTip = false;
-Vue.use(VM2);
+Vue.use(VM2, {
+  componentName: 'ModalVue'
+});
 new Vue({
   render: (h) => h(App)
 }).$mount("#app");