JSFiddle - React, Tailwind, and code Playground

by 16Carthik

HTML

<script type="x/template" id="new-post-modal-template">
    <modal :show="show">
               <div class="modal-body">
            <label class="form-label">
                category
                <input v-model="category" class="form-control" placeholder="type any">
            </label>
        </div>
        <div class="modal-footer text-right">
 			<button class="modal-default-button" @click="close()">
                exit
            </button>
            <button class="modal-default-button" @click="savePost()">
               save
            </button>
        </div>
    </modal>
</script>
<!-- template for the NewCommentModal component -->
<script type="x/template" id="new-comment-modal-template">
    <modal :show="show">
               <div class="modal-body">
            <label class="form-label">
                category
            	 <select v-model="selected" name="category">
					<option v-for="option in category" v-bind:value="option.value">
						{{ option.text }}</option>
				</select> 
            </label>
			<label class="form-label">
                <button class="" @click="showPostModal=false">add category</button>
            </label>
			<label class="form-label">
               subcategory
                <input v-model="subcategory" class="form-control" placeholder="">
            </label>
        </div>
        <div class="modal-footer text-right">
 			<button class="modal-default-button" @click="close()">
                exit
            </button>
            <button class="modal-default-button" @click="postComment()">
                save
            </button>
        </div>
    </modal>
</script>
<div id="popup">
<button @click="showNewPostModal = true">add category</button>
    <button @click="showNewCommentModal = true" refs="subcategory">add subcategory</button>
    <new-comment-modal :show="showNewCommentModal" @close="showNewCommentModal = false"></new-comment-modal>
    <new-post-modal :show="showNewPostModal"...

CSS

* {
    box-sizing: border-box;
}

.modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    transition: opacity .3s ease;
}

.modal-container {
    width: 300px;
    margin: 40px auto 0;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
    margin-top: 0;
    color: #42b983;
}

.modal-body {
    margin: 0px 0;
}

.text-right {
    text-align: right;
}

.form-label {
    display: block;
    margin-bottom: 1em;
}

.form-label > .form-control {
    margin-top: 0.5em;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.5em 1em;
    line-height: 1.5;
    border: 1px solid #ddd;
}

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

JavaScript

Vue.component('Modal', {
			  template: '#modal-template',
			  props: ['show'],
			  methods: {
			    close: function () {
			      this.$emit('close');
			    }
			  },
			  mounted: function () {
			    document.addEventListener("keydown", (e) => {
			      if (this.show && e.keyCode == 27) {
			        this.close();
			      }
			    });
			  }
			});
      Vue.component('NewPostModal', {
			  template: '#new-post-modal-template',
			  props: ['show'],
			  data: function () {
			    return {
			    	category: '',
			    };
			  },
			  methods: {
			    close: function () {
			      this.$emit('close');
			      console.log(this.category);
			    },
			    savePost: function () {
			      // Some save logic goes here...
			      this.close();
			    },
			    mounted() {
			        this.$root.$on('clickedSomething', () => {
			          //...
			        })
			      }
			  }
			});
		Vue.component('NewCommentModal', {
			  template: '#new-comment-modal-template',
			  props: ['show'],
			  data: function () {
			    return {
			    	subcategory:[],
					selected: '',
					category: [
				      { text: 'PURCHASING', value: 'PURCHASING' },
				      { text: 'LOREM', value: 'LOREM' },
				      { text: 'IPSUM', value: 'IPSUM' },
				    ]
			    };
			  },
			  methods: {
			    close: function () {
			      this.$emit('close');
			      console.log(this.selected);
			      console.log(this.subcategory);
			    },
			    postComment: function () {
			      // Some save logic goes here...
			      this.close();
			    },
			    addcategory: function(){
			    	/*this.$refs.savePost();*/
			    		// Vue.$refs.subcategory.showNewPostModal(),
			    		//NewPostModal.$emit('show');
			    		//NewPostModal.$root.$emit('clickedSomething')
			    }
			  }
			});
			new Vue({
			  el: `#${elementId}popup`,
			  data: {
				showPostModal: false,
			    showNewPostModal: false,
			    showNewCommentModal: false
			  }
			});