rahman541/index.html

## index.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">
</head>
<body>
<div id="app" class="container">
    <input type="text" id="input" v-model="message">

    The value is: {{ message }}
    <ul>
        <li v-for="name in names" v-text="name"></li>
    </ul>

    <message title="Title of message" body="Lorem ipdbwl"></message>

    <button @click="showModal=true">Show Modal</button>
    <modal v-show="showModal" @close="showModal = false">Content goes here</modal>

    <tabs>
        <tab name="Tab 1" :selected="true">Tab 1 content goes here</tab>
        <tab name="Tab 2">Tab 2 content goes here</tab>
    </tabs>

    <!-- <modal-card>
        <template slot="title">My Title</template>
        Content gii
        <template slot="footer">
            <button class="button is-success">Save changes</button>
            <button class="button">Cancel</button>
        </template>
    </modal-card> -->

    <progress-view inline-template>
        <div>
            <h1>Your progress of course is {{ completionRate }}</h1>

            <p><button @click="completionRate += 10">Update Completion Rate</button></p>
        </div>
    </progress-view>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    window.Event = new Vue();   // Listen on event Event.$on('applied',()=>...) emit event: Event.$emit('applied')

    Vue.component('message', {
        props: ['title', 'body'],
        data() {
            return {
                isVisible: true,
            }
        },
        template: `<article class="message" v-show="isVisible">
            <div class="message-header">
                <p>{{ title }}</p>
                <button class="delete" aria-label="delete" @click="hideMessage"></button>
            </div>
            <div class="message-body">
               {{ body }}
            </div>
        </article>`,
        methods: {
            hideMessage() {
                this.isVisible = false;
            }
        },
    });

    Vue.component('modal', {
        template: `<div class="modal is-active">
            <div class="modal-background"></div>
            <div class="modal-content">
                <div class="box">
                    <slot></slot>
                </div>
            </div>
            <button class="modal-close is-large" aria-label="close" @click='$emit("close")'></button>
        </div>`,
    });

    Vue.component('tabs', {
        template: `
        <div>
            <div class="tabs">
                <ul>
                    <li v-for="tab in tabs" :class="{'is-active': tab.isActive}">
                        <a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a>
                    </li>
                </ul>
            </div>

            <div class="tabs-details">
                <slot></slot>
            </div>
        </div>
    `,
        data() {
            return { tabs: [] };
        },
        created() {
            this.tabs = this.$children;
        },
        methods: {
            selectTab(selectedTab) {
                this.tabs.forEach(tab => {
                    tab.isActive = (tab.name == selectedTab.name);
                })
            }
        }
    });

    Vue.component('tab', {
        props: {
            name: { required: true },
            selected: { default: false },
        },
        template: `
        <div v-show="isActive"><slot></slot></div>
    `,
        data() {
            return {
                isActive: false
            }
        },
        computed: {
            href() {
                return '#' + this.name.toLowerCase().replace(/ /g, '-');
            }
        },
        mounted() {
            this.isActive = this.selected;
        }
    });

    // Example use of Named Slot
    Vue.component('modal-card', {
        template: `
        <div class="modal is-active">
            <div class="modal-background"></div>
            <div class="modal-card">
                <header class="modal-card-head">
                    <p class="modal-card-title"><slot name="title"></slot></p>
                    <button class="delete" aria-label="close"></button>
                </header>
                <section class="modal-card-body">
                    <slot>Default content goes here.</slot>
                </section>
                <footer class="modal-card-foot">
                    <slot name="footer">
                        <button class="button is-primary">Okay</button>
                    </slot>
                </footer>
            </div>
        </div>
    `,
        methods: {
        }
    });

    // Inline template: usage maybe for simple server fetching
    Vue.component('progress-view', {
        data() {
            return {
                completionRate: 50
            };
        }
    });

    new Vue({
        el: '#app',
        data: data = {
            message: 'Hello world',
            names: ['john', 'doe', 'dii'],
            showModal: false,
        },
    });
</script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css">
	</head>
	<body>
	<div id="app" class="container">
	<input type="text" id="input" v-model="message">

	The value is: {{ message }}
	<ul>
	<li v-for="name in names" v-text="name"></li>
	</ul>

	<message title="Title of message" body="Lorem ipdbwl"></message>

	<button @click="showModal=true">Show Modal</button>
	<modal v-show="showModal" @close="showModal = false">Content goes here</modal>

	<tabs>
	<tab name="Tab 1" :selected="true">Tab 1 content goes here</tab>
	<tab name="Tab 2">Tab 2 content goes here</tab>
	</tabs>

	<!-- <modal-card>
	<template slot="title">My Title</template>
	Content gii
	<template slot="footer">
	<button class="button is-success">Save changes</button>
	<button class="button">Cancel</button>
	</template>
	</modal-card> -->

	<progress-view inline-template>
	<div>
	<h1>Your progress of course is {{ completionRate }}</h1>

	<p><button @click="completionRate += 10">Update Completion Rate</button></p>
	</div>
	</progress-view>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
	window.Event = new Vue(); // Listen on event Event.$on('applied',()=>...) emit event: Event.$emit('applied')

	Vue.component('message', {
	props: ['title', 'body'],
	data() {
	return {
	isVisible: true,
	}
	},
	template: `<article class="message" v-show="isVisible">
	<div class="message-header">
	<p>{{ title }}</p>
	<button class="delete" aria-label="delete" @click="hideMessage"></button>
	</div>
	<div class="message-body">
	{{ body }}
	</div>
	</article>`,
	methods: {
	hideMessage() {
	this.isVisible = false;
	}
	},
	});

	Vue.component('modal', {
	template: `<div class="modal is-active">
	<div class="modal-background"></div>
	<div class="modal-content">
	<div class="box">
	<slot></slot>
	</div>
	</div>
	<button class="modal-close is-large" aria-label="close" @click='$emit("close")'></button>
	</div>`,
	});

	Vue.component('tabs', {
	template: `
	<div>
	<div class="tabs">
	<ul>
	<li v-for="tab in tabs" :class="{'is-active': tab.isActive}">
	<a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a>
	</li>
	</ul>
	</div>

	<div class="tabs-details">
	<slot></slot>
	</div>
	</div>
	`,
	data() {
	return { tabs: [] };
	},
	created() {
	this.tabs = this.$children;
	},
	methods: {
	selectTab(selectedTab) {
	this.tabs.forEach(tab => {
	tab.isActive = (tab.name == selectedTab.name);
	})
	}
	}
	});

	Vue.component('tab', {
	props: {
	name: { required: true },
	selected: { default: false },
	},
	template: `
	<div v-show="isActive"><slot></slot></div>
	`,
	data() {
	return {
	isActive: false
	}
	},
	computed: {
	href() {
	return '#' + this.name.toLowerCase().replace(/ /g, '-');
	}
	},
	mounted() {
	this.isActive = this.selected;
	}
	});

	// Example use of Named Slot
	Vue.component('modal-card', {
	template: `
	<div class="modal is-active">
	<div class="modal-background"></div>
	<div class="modal-card">
	<header class="modal-card-head">
	<p class="modal-card-title"><slot name="title"></slot></p>
	<button class="delete" aria-label="close"></button>
	</header>
	<section class="modal-card-body">
	<slot>Default content goes here.</slot>
	</section>
	<footer class="modal-card-foot">
	<slot name="footer">
	<button class="button is-primary">Okay</button>
	</slot>
	</footer>
	</div>
	</div>
	`,
	methods: {
	}
	});

	// Inline template: usage maybe for simple server fetching
	Vue.component('progress-view', {
	data() {
	return {
	completionRate: 50
	};
	}
	});

	new Vue({
	el: '#app',
	data: data = {
	message: 'Hello world',
	names: ['john', 'doe', 'dii'],
	showModal: false,
	},
	});
	</script>
	</body>
	</html>