feat: add vue-at demo for gh119 & misc

fritx/vue-at#119

public/code/index.yml

@@ -1,4 +1,5 @@
 - hello-world.jsx
+- vue-at-gh119.js
 - vue-at-element-2.x-input.js
 - vue-at-element-1.x-input.js
 - vue-threejs.js

public/code/vue-at-gh119.js

@@ -0,0 +1,49 @@
+// await loadJs('https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js')
+await loadJs('https://unpkg.com/[email protected]/dist/vue.min.js')
+
+// await loadJs('https://unpkg.com/vue-at')
+await loadJsForceUmd({
+  url: 'https://unpkg.com/[email protected]/dist/vue-at.js',
+  name: 'VueAt',
+})
+
+appendCss(`
+.container { padding: 20px }
+.editor { margin-top:20px; padding:4px 8px; height:120px; border:solid 1px gray; white-space:pre-wrap }
+.atwho-remove { cursor: pointer }
+`)
+
+window.atwhoRemoveItem = target => {
+  let tag = target.parentNode.parentNode
+  tag.parentNode.removeChild(tag)
+}
+
+let App = {
+  components: { At: VueAt },
+  template: `
+    <div class="container">
+      <h1>Demo for vue-at#119</h1>
+      <div v-for="link in links">
+        <a target="_blank" :href="link">{{link}}</a>
+      </div>
+      <at :members="members" v-model="input">
+        <template v-slot:embeddedItem="s">
+          <span><span class="tag">[ @{{ s.current }} <span class="atwho-remove" onclick="atwhoRemoveItem(this)">×</span> ]</span></span>
+        </template>
+        <div class="editor" contenteditable></div>
+      </at>
+    </div>
+  `,
+  data() {
+    return {
+      links: [
+        'https://github.com/fritx/vue-at',
+        'https://github.com/fritx/vue-at/issues/119',
+      ],
+      members: [
+        'fritx', 'linguokang', 'huangruichang'
+      ],
+      input: '<span data-at-embedded="" contenteditable="false"> <span class="tag">[ @fritx <span onclick="atwhoRemoveItem(this)" class="atwho-remove">×</span> ]</span> </span> <span data-at-embedded="" contenteditable="false"> <span class="tag">[ @huangruichang <span onclick="atwhoRemoveItem(this)" class="atwho-remove">×</span> ]</span> </span> '
+    }
+  }
+}

public/code/vue-threejs.js

@@ -1,8 +1,8 @@
 // await loadJs('https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js')
 await loadJs('https://unpkg.com/[email protected]/dist/vue.min.js')
 
-// await loadJs('https://unpkg.com/three@0.115.0/build/three.min.js')
-await loadJs('https://unpkg.com/three@0.81.2/build/three.min.js')
+// await loadJs('https://unpkg.com/three@0.81.2/build/three.min.js')
+await loadJs('https://unpkg.com/three@0.115.0/build/three.min.js')
 
 // await loadJs('https://unpkg.com/[email protected]/lib/VueThreejs.umd.min.js')
 await loadJs('https://unpkg.com/[email protected]/lib/VueThreejs.umd.js')
@@ -42,9 +42,6 @@ let App = {
       }
     }
   },
-  created() {
-    this.handleResize = _.debounce(this.handleResize, 2000)
-  },
   mounted() {
     mountNode.addEventListener('resize', this.handleResize)
   },
@@ -56,8 +53,6 @@ let App = {
       this.ui.rotation.x += 0.01
       this.ui.rotation.y += 0.01
     },
-    handleResize() {
-      triggerPreview()
-    }
+    handleResize: _.debounce(triggerPreview, 2000)
   }
 }

src/playground/Playground.tsx

@@ -188,7 +188,7 @@ export let Playground: React.FC = () => {
   return (
     <div className="page-playground">
       <Helmet>
-        <title>Playground</title>
+        <title>Playground{file ? ` - ${file}` : ''}</title>
         <style>{`html { overflow: hidden } #root { height: 100% }`}</style>
         <script>{preview}</script>
       </Helmet>