--- /dev/null
+<script src="https://unpkg.com/marked@0.3.6"></script>
+<script src="https://unpkg.com/lodash@4.16.0"></script>
+<script src="../../dist/vue.global.js"></script>
+
+<div id="editor">
+ <textarea :value="input" @input="update"></textarea>
+ <div v-html="compiledMarkdown"></div>
+</div>
+
+<script>
+const App = {
+ data: {
+ input: '# hello'
+ },
+ computed: {
+ compiledMarkdown() {
+ return marked(this.input, { sanitize: true })
+ }
+ },
+ methods: {
+ update: _.debounce(function (e) {
+ this.input = e.target.value
+ }, 300)
+ }
+}
+
+Vue.createApp().mount(App, '#editor')
+</script>
+
+<style>
+html, body, #editor {
+ margin: 0;
+ height: 100%;
+ font-family: 'Helvetica Neue', Arial, sans-serif;
+ color: #333;
+}
+
+textarea, #editor div {
+ display: inline-block;
+ width: 49%;
+ height: 100%;
+ vertical-align: top;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 0 20px;
+}
+
+textarea {
+ border: none;
+ border-right: 1px solid #ccc;
+ resize: none;
+ outline: none;
+ background-color: #f6f6f6;
+ font-size: 14px;
+ font-family: 'Monaco', courier, monospace;
+ padding: 20px;
+}
+
+code {
+ color: #f66;
+}
+</style>
--- /dev/null
+<script src="../../dist/vue.global.js"></script>
+
+<!-- item template -->
+<script type="text/x-template" id="item-template">
+ <li>
+ <div
+ :class="{bold: isFolder}"
+ @click="toggle"
+ @dblclick="changeType">
+ {{model.name}}
+ <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
+ </div>
+ <ul v-show="open" v-if="isFolder">
+ <tree-item
+ class="item"
+ v-for="model in model.children"
+ :model="model">
+ </tree-item>
+ <li class="add" @click="addChild">+</li>
+ </ul>
+ </li>
+</script>
+<!-- item script -->
+<script>
+const TreeItem = {
+ name: 'TreeItem', // necessary for self-reference
+ template: '#item-template',
+ props: {
+ model: Object
+ },
+ data() {
+ return {
+ open: false
+ }
+ },
+ computed: {
+ isFolder() {
+ return this.model.children &&
+ this.model.children.length
+ }
+ },
+ methods: {
+ toggle() {
+ if (this.isFolder) {
+ this.open = !this.open
+ }
+ },
+ changeType() {
+ if (!this.isFolder) {
+ this.model.children = []
+ this.addChild()
+ this.open = true
+ }
+ },
+ addChild() {
+ this.model.children.push({
+ name: 'new stuff'
+ })
+ }
+ }
+}
+</script>
+
+<p>(You can double click on an item to turn it into a folder.)</p>
+
+<!-- the app root element -->
+<ul id="demo">
+ <tree-item class="item" :model="treeData"></tree-item>
+</ul>
+
+<script>
+const App = {
+ components: {
+ TreeItem
+ },
+ data: {
+ treeData: {
+ name: 'My Tree',
+ children: [
+ { name: 'hello' },
+ { name: 'wat' },
+ {
+ name: 'child folder',
+ children: [
+ {
+ name: 'child folder',
+ children: [
+ { name: 'hello' },
+ { name: 'wat' }
+ ]
+ },
+ { name: 'hello' },
+ { name: 'wat' },
+ {
+ name: 'child folder',
+ children: [
+ { name: 'hello' },
+ { name: 'wat' }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ }
+}
+
+Vue.createApp().mount(App, '#demo')
+</script>
+
+<style>
+ body {
+ font-family: Menlo, Consolas, monospace;
+ color: #444;
+ }
+ .item {
+ cursor: pointer;
+ }
+ .bold {
+ font-weight: bold;
+ }
+ ul {
+ padding-left: 1em;
+ line-height: 1.5em;
+ list-style-type: dot;
+ }
+</style>
--- /dev/null
+<script src="https://unpkg.com/marked@0.3.6"></script>
+<script src="https://unpkg.com/lodash@4.16.0"></script>
+<script src="../../dist/vue.global.js"></script>
+
+<div id="editor">
+ <textarea :value="input" @input="update"></textarea>
+ <div v-html="output"></div>
+</div>
+
+<script>
+const { ref, computed } = Vue
+
+const App = {
+ setup() {
+ const input = ref('# hello')
+ const output = computed(() => marked(input.value, { sanitize: true }))
+ const update = _.debounce(e => { input.value = e.target.value })
+
+ return {
+ input,
+ output,
+ update
+ }
+ }
+}
+
+Vue.createApp().mount(App, '#editor')
+</script>
+
+<style>
+html, body, #editor {
+ margin: 0;
+ height: 100%;
+ font-family: 'Helvetica Neue', Arial, sans-serif;
+ color: #333;
+}
+
+textarea, #editor div {
+ display: inline-block;
+ width: 49%;
+ height: 100%;
+ vertical-align: top;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 0 20px;
+}
+
+textarea {
+ border: none;
+ border-right: 1px solid #ccc;
+ resize: none;
+ outline: none;
+ background-color: #f6f6f6;
+ font-size: 14px;
+ font-family: 'Monaco', courier, monospace;
+ padding: 20px;
+}
+
+code {
+ color: #f66;
+}
+</style>
<script src="../../dist/vue.global.js"></script>
<script>
+const { ref, reactive, computed, createApp } = Vue
+
// math helper...
function valueToPoint (value, index, total) {
var x = 0
},
setup(props) {
return {
- point: Vue.computed(() => valueToPoint(
+ point: computed(() => valueToPoint(
+props.stat.value + 10,
props.index,
props.total
template: '#polygraph-template',
setup(props) {
return {
- points: Vue.computed(() => {
+ points: computed(() => {
const total = props.stats.length
return props.stats.map((stat, i) => {
const point = valueToPoint(stat.value, i, total)
Polygraph
},
setup() {
- const newLabel = Vue.ref('')
- const stats = Vue.reactive([
+ const newLabel = ref('')
+ const stats = reactive([
{ label: 'A', value: 100 },
{ label: 'B', value: 100 },
{ label: 'C', value: 100 },
}
}
-Vue.createApp().mount(App, '#demo')
+createApp().mount(App, '#demo')
</script>
<style>
--- /dev/null
+<script src="../../dist/vue.global.js"></script>
+
+<!-- item template -->
+<script type="text/x-template" id="item-template">
+ <li>
+ <div
+ :class="{bold: isFolder}"
+ @click="toggle"
+ @dblclick="changeType">
+ {{model.name}}
+ <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
+ </div>
+ <ul v-if="isFolder" v-show="open">
+ <tree-item
+ class="item"
+ v-for="model in model.children"
+ :model="model">
+ </tree-item>
+ <li class="add" @click="addChild">+</li>
+ </ul>
+ </li>
+</script>
+<!-- item script -->
+<script>
+const { reactive, computed, toRefs } = Vue
+
+const TreeItem = {
+ name: 'TreeItem', // necessary for self-reference
+ template: '#item-template',
+ props: {
+ model: Object
+ },
+ setup(props) {
+ const state = reactive({
+ open: false,
+ isFolder: computed(() => {
+ return props.model.children && props.model.children.length
+ })
+ })
+
+ function toggle() {
+ state.open = !state.open
+ }
+
+ function changeType() {
+ if (!state.isFolder) {
+ props.model.children = []
+ addChild()
+ state.open = true
+ }
+ }
+
+ function addChild() {
+ props.model.children.push({ name: 'new stuff' })
+ }
+
+ return {
+ ...toRefs(state),
+ toggle,
+ changeType,
+ addChild
+ }
+ }
+}
+</script>
+
+<p>(You can double click on an item to turn it into a folder.)</p>
+
+<!-- the app root element -->
+<ul id="demo">
+ <tree-item class="item" :model="treeData"></tree-item>
+</ul>
+
+<script>
+const App = {
+ components: {
+ TreeItem
+ },
+ data: {
+ treeData: {
+ name: 'My Tree',
+ children: [
+ { name: 'hello' },
+ { name: 'wat' },
+ {
+ name: 'child folder',
+ children: [
+ {
+ name: 'child folder',
+ children: [
+ { name: 'hello' },
+ { name: 'wat' }
+ ]
+ },
+ { name: 'hello' },
+ { name: 'wat' },
+ {
+ name: 'child folder',
+ children: [
+ { name: 'hello' },
+ { name: 'wat' }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ }
+}
+
+Vue.createApp().mount(App, '#demo')
+</script>
+
+<style>
+ body {
+ font-family: Menlo, Consolas, monospace;
+ color: #444;
+ }
+ .item {
+ cursor: pointer;
+ }
+ .bold {
+ font-weight: bold;
+ }
+ ul {
+ padding-left: 1em;
+ line-height: 1.5em;
+ list-style-type: dot;
+ }
+</style>
--- /dev/null
+<script src="https://cdn.jsdelivr.net/lodash/4.3.0/lodash.min.js"></script>
+<script src="../../dist/vue.global.js"></script>
+
+<div id="app">
+ <button @click="insert">insert at random index</button>
+ <button @click="reset">reset</button>
+ <button @click="shuffle">shuffle</button>
+ <transition-group tag="ul" name="fade" class="container">
+ <item v-for="item in items"
+ class="item"
+ :msg="item"
+ :key="item"
+ @rm="remove(item)">
+ </item>
+ </transition-group>
+</div>
+
+<script>
+const getInitialItems = () => [1, 2, 3, 4, 5]
+let id = getInitialItems().length + 1
+
+const Item = {
+ props: ['msg'],
+ template: `<div>{{ msg }} <button @click="$emit('rm')">x</button></div>`
+}
+
+const App = {
+ components: {
+ Item
+ },
+ data() {
+ return {
+ items: getInitialItems()
+ }
+ },
+ methods: {
+ insert () {
+ const i = Math.round(Math.random() * this.items.length)
+ this.items.splice(i, 0, id++)
+ },
+ reset () {
+ this.items = getInitialItems()
+ },
+ shuffle () {
+ this.items = _.shuffle(this.items)
+ },
+ remove (item) {
+ const i = this.items.indexOf(item)
+ if (i > -1) {
+ this.items.splice(i, 1)
+ }
+ }
+ }
+}
+
+Vue.createApp().mount(App, '#app')
+</script>
+
+<style>
+.container {
+ position: relative;
+ padding: 0;
+}
+.item {
+ width: 100%;
+ height: 30px;
+ background-color: #f3f3f3;
+ border: 1px solid #666;
+ box-sizing: border-box;
+}
+/* 1. declare transition */
+.fade-move, .fade-enter-active, .fade-leave-active {
+ transition: all .5s cubic-bezier(.55,0,.1,1);
+}
+/* 2. declare enter from and leave to state */
+.fade-enter-from, .fade-leave-to {
+ opacity: 0;
+ transform: scaleY(0.01) translate(30px, 0);
+}
+/* 3. ensure leaving items are taken out of layout flow so that moving
+ animations can be calculated correctly. */
+.fade-leave-active {
+ position: absolute;
+}
+</style>
--- /dev/null
+<script src="../../dist/vue.global.js"></script>
+
+<!-- template for the modal component -->
+<script type="text/x-template" id="modal-template">
+ <transition name="modal">
+ <div v-if="show" class="modal-mask">
+ <div class="modal-wrapper">
+ <div class="modal-container">
+
+ <div class="modal-header">
+ <slot name="header">
+ default header
+ </slot>
+ </div>
+
+ <div class="modal-body">
+ <slot name="body">
+ default body
+ </slot>
+ </div>
+
+ <div class="modal-footer">
+ <slot name="footer">
+ default footer
+ <button class="modal-default-button" @click="$emit('close')">
+ OK
+ </button>
+ </slot>
+ </div>
+ </div>
+ </div>
+ </div>
+ </transition>
+</script>
+<script>
+const Modal = {
+ template: '#modal-template',
+ props: ['show']
+}
+</script>
+
+<!-- modal container that lives outside of app root -->
+<div id="modal-container"></div>
+
+<!-- app -->
+<div id="app">
+ <button id="show-modal" @click="showModal = true">Show Modal</button>
+ <portal target="#modal-container">
+ <!-- use the modal component, pass in the prop -->
+ <modal :show="showModal" @close="showModal = false">
+ <template #header>
+ <h3>custom header</h3>
+ </template>
+ </modal>
+ </portal>
+</div>
+
+<script>
+const App = {
+ components: { Modal },
+ data: {
+ showModal: false
+ }
+}
+Vue.createApp().mount(App, '#app')
+</script>
+
+<style>
+.modal-mask {
+ position: fixed;
+ z-index: 9998;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, .5);
+ display: table;
+ transition: opacity .3s ease;
+}
+
+.modal-wrapper {
+ display: table-cell;
+ vertical-align: middle;
+}
+
+.modal-container {
+ width: 300px;
+ margin: 0px auto;
+ 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: 20px 0;
+}
+
+.modal-default-button {
+ float: right;
+}
+
+/*
+ * The following styles are auto-applied to elements with
+ * transition="modal" when their visibility is toggled
+ * by Vue.js.
+ *
+ * You can easily play with the modal transition by editing
+ * these styles.
+ */
+
+.modal-enter-from {
+ opacity: 0;
+}
+
+.modal-leave-to {
+ opacity: 0;
+}
+
+.modal-enter-from .modal-container,
+.modal-leave-to .modal-container {
+ -webkit-transform: scale(1.1);
+ transform: scale(1.1);
+}
+</style>
projects / thirdparty / vuejs / core.git / commitdiff
