chore: more examples

packages/vue/examples/classic/markdown.html

@@ -0,0 +1,63 @@
+<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>

packages/vue/examples/classic/tree.html

@@ -0,0 +1,127 @@
+<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>

packages/vue/examples/composition/markdown.html

@@ -0,0 +1,63 @@
+<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>

packages/vue/examples/composition/svg.html

@@ -1,5 +1,7 @@
 <script src="../../dist/vue.global.js"></script>
 <script>
+const { ref, reactive, computed, createApp } = Vue
+
 // math helper...
 function valueToPoint (value, index, total) {
   var x     = 0
@@ -24,7 +26,7 @@ const AxisLabel = {
   },
   setup(props) {
     return {
-      point: Vue.computed(() => valueToPoint(
+      point: computed(() => valueToPoint(
         +props.stat.value + 10,
         props.index,
         props.total
@@ -54,7 +56,7 @@ const Polygraph = {
   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)
@@ -95,8 +97,8 @@ const App = {
     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 },
@@ -132,7 +134,7 @@ const App = {
   }
 }
 
-Vue.createApp().mount(App, '#demo')
+createApp().mount(App, '#demo')
 </script>
 
 <style>

packages/vue/examples/composition/tree.html

@@ -0,0 +1,130 @@
+<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>

packages/vue/examples/transition/list.html

@@ -0,0 +1,85 @@
+<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>

packages/vue/examples/transition/modal.html

@@ -0,0 +1,132 @@
+<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>