practical examples

Author: yyx990803

src/.vitepress/config.js

@@ -407,7 +407,7 @@ const sidebar = {
         },
         {
           text: 'List with Transitions',
-          link: '/examples/#list'
+          link: '/examples/#list-transition'
         },
         {
           text: 'TodoMVC',
@@ -480,12 +480,12 @@ module.exports = {
     optimizeDeps: {
       exclude: ['@vue/repl']
     },
-    server: {
-      host: true
-    },
     ssr: {
       external: ['@vue/repl']
     },
+    server: {
+      host: true
+    },
     build: {
       chunkSizeWarningLimit: Infinity
     },

src/examples/ExampleRepl.vue

@@ -2,7 +2,7 @@
 import { Repl, ReplStore } from '@vue/repl'
 import '@vue/repl/style.css'
 import data from './data.json'
-import { inject, watchEffect, version, Ref } from 'vue'
+import { computed, inject, watchEffect, version, Ref } from 'vue'
 
 const store = new ReplStore({
   defaultVueRuntimeURL: `https://unpkg.com/vue@${version}/dist/vue.esm-browser.js`
@@ -196,7 +196,12 @@ function toKebabTags(str: string): string {
 </script>
 
 <template>
-  <Repl :store="store" :showCompileOutput="false" :clearConsole="false" />
+  <Repl
+    :store="store"
+    :showImportMap="!preferSFC"
+    :showCompileOutput="false"
+    :clearConsole="false"
+  />
 </template>
 
 <style scoped>

src/examples/src/attribute-bindings/App/composition.js

@@ -16,7 +16,7 @@ export default {
 
     return {
       message,
-      isRef,
+      isRed,
       color,
       toggleRed,
       toggleColor

src/examples/src/list-transition/App/composition.js

@@ -1,9 +1,38 @@
+import { shuffle as _shuffle } from 'lodash-es'
+import { ref } from 'vue'
+
 export default {
   setup() {
-    const message = 'Hello World!'
+    const getInitialItems = () => [1, 2, 3, 4, 5]
+    const items = ref(getInitialItems())
+    let id = items.value.length + 1
+
+    function insert() {
+      const i = Math.round(Math.random() * items.value.length)
+      items.value.splice(i, 0, id++)
+    }
+
+    function reset() {
+      items.value = getInitialItems()
+    }
+
+    function shuffle() {
+      items.value = _shuffle(items.value)
+    }
+
+    function remove(item) {
+      const i = items.value.indexOf(item)
+      if (i > -1) {
+        items.value.splice(i, 1)
+      }
+    }
 
     return {
-      message
+      items,
+      insert,
+      reset,
+      shuffle,
+      remove
     }
   }
 }

src/examples/src/list-transition/App/options.js

@@ -1,7 +1,30 @@
+import { shuffle } from 'lodash-es'
+
+const getInitialItems = () => [1, 2, 3, 4, 5]
+let id = getInitialItems().length + 1
+
 export default {
   data() {
     return {
-      message: 'Hello World!'
+      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)
+      }
     }
   }
-}
+}

src/examples/src/list-transition/App/style.css

@@ -0,0 +1,32 @@
+.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 0.5s cubic-bezier(0.55, 0, 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;
+}

src/examples/src/list-transition/App/template.html

@@ -1 +1,10 @@
-<h1>{{ message }}</h1>
+<button @click="insert">insert at random index</button>
+<button @click="reset">reset</button>
+<button @click="shuffle">shuffle</button>
+
+<TransitionGroup tag="ul" name="fade" class="container">
+  <div v-for="item in items" class="item" :key="item">
+    {{ item }}
+    <button @click="remove(item)">x</button>
+  </div>
+</TransitionGroup>

src/examples/src/list-transition/description.txt

@@ -1 +1,2 @@
-Say Hello World with Vue!
+FLIP list transitions with the built-in <TransitionGroup>.
+https://aerotwist.com/blog/flip-your-animations/

src/examples/src/list-transition/import-map.json

@@ -0,0 +1,5 @@
+{
+  "imports": {
+    "lodash-es": "https://cdn.jsdelivr.net/npm/lodash-es/+esm"
+  }
+}

src/examples/src/modal/App/composition.js

@@ -1,9 +1,15 @@
+import Modal from './Modal.vue'
+import { ref } from 'vue'
+
 export default {
+  components: {
+    Modal
+  },
   setup() {
-    const message = 'Hello World!'
+    const showModal = ref(false)
 
     return {
-      message
+      showModal
     }
   }
 }