EXT-1231: update the vue2 template

packages/cli/templates/vue2/README.md

@@ -0,0 +1,15 @@
+# Storyblok Vue 2 Field Plugin
+
+This project was created using Vue 2. It consists of a set of base functionalities, such as value updating, modal toggling and asset selection. This starter is intended to help developers when creating their own Storyblok Field Plugin.
+
+## Local Development
+
+To start the project locally, simply run:
+
+```bash
+yarn dev
+```
+
+## What's next?
+
+If you want to deploy your field plugin to Storyblok, you can do so by using our [CLI](https://www.npmjs.com/package/@storyblok/field-plugin-cli).

packages/cli/templates/vue2/package.json

@@ -4,14 +4,14 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --port 8080",
+    "dev": "vite",
     "build": "vite build",
     "test": "vitest run",
     "test:watch": "vitest watch",
     "deploy": "npm run build && npx @storyblok/field-plugin-cli@alpha deploy"
   },
   "dependencies": {
-    "@storyblok/field-plugin": "0.0.1-alpha.0",
+    "@storyblok/field-plugin": "0.0.1-alpha.1",
     "joi": "^17.7.0",
     "vue": "^2.7.14"
   },

packages/cli/templates/vue2/src/App.vue

@@ -1,83 +1,47 @@
 <template>
-  <div class="container">
-    <div class="buttons">
-      <button type="button" @click="toggleModal()">Toggle modal</button>
-    </div>
-    <form @submit.prevent="submit" aria-label="form">
-      <label for="name">Your name??</label>
-      <input
-        v-model="name"
-        name="name"
-        aria-label="name"
-        placeholder="Enter your name:"
+  <div>
+    <span v-if="plugin.type === 'loading'">Loading...</span>
+    <span v-else-if="plugin.type === 'error'">Error</span>
+    <div
+      v-else-if="plugin.type === 'loaded'"
+      class="field-plugin"
+    >
+      <ModalToggle
+        :is-modal-open="plugin.data.isModalOpen"
+        :set-modal-open="plugin.actions.setModalOpen"
+      />
+      <Counter
+        :data="plugin.data"
+        :set-value="plugin.actions.setValue"
       />
-      <button type="submit">Save</button>
-    </form>
-    <ValidationResult :model="modelForValidation" :schema="schema" />
+      <AssetSelector
+        :data="plugin.data"
+        :select-asset="plugin.actions.selectAsset"
+      />
+    </div>
   </div>
 </template>
 
-<script lang="ts">
-import joi from 'joi';
-import ValidationResult from './components/ValidationResult.vue';
-import './style.css';
-import { createFieldPlugin } from '@storyblok/field-plugin';
+<script>
+import './style.css'
+import { createFieldPlugin } from '@storyblok/field-plugin'
+import AssetSelector from './components/AssetSelector.vue'
+import Counter from './components/Counter.vue'
+import ModalToggle from './components/ModalToggle.vue'
 
 export default {
-  components: { ValidationResult },
+  components: {
+    AssetSelector,
+    Counter,
+    ModalToggle,
+  },
   data() {
     return {
-      actions: undefined,
-      cleanupSideEffects: undefined,
-      name: '',
-      schema: joi.object({
-        name: joi.string().min(3).max(6).required(),
-        _uid: joi.string(),
-        plugin: joi.string(),
-      }),
-    };
-  },
-  computed: {
-    modelForValidation() {
-      return {
-        name: this.name,
-      };
-    },
+      plugin: { type: 'loading' },
+    }
   },
   created() {
-    //TODO: Clean up the onUpdate argument inside createFieldType
-    const [actions, cleanupSideEffects] = createFieldPlugin((args) =>
-      console.log(args)
-    );
-    this.actions = actions;
-    this.cleanupSideEffects = cleanupSideEffects;
-  },
-  destroyed() {
-    this.cleanupSideEffects();
-  },
-
-  methods: {
-    submit() {
-      this.actions.setValue({ name: this.name });
-    },
+    createFieldPlugin((newState) => (this.plugin = newState))
   },
-};
-</script>
-
-<style scoped>
-.buttons {
-  display: flex;
-  gap: 1rem;
-}
-
-form {
-  margin-top: 1rem;
-  display: flex;
-  gap: 1rem;
-}
-
-input {
-  padding: 0.5rem 1rem;
-  width: 100%;
 }
-</style>
+</script>

packages/cli/templates/vue2/src/components/AssetSelector.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="asset-selector">
+    <button
+      class="btn"
+      @click="handleSelectAsset"
+    >
+      Select Asset
+    </button>
+    <span>Image Url: {{ imageUrl }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    selectAsset: {
+      type: Function,
+      required: true,
+    },
+    data: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      imageUrl: '',
+    }
+  },
+  methods: {
+    handleSelectAsset() {
+      this.selectAsset((filename) => {
+        this.imageUrl = filename
+      })
+    },
+  },
+}
+</script>

packages/cli/templates/vue2/src/components/Counter.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="increment">
+    <button
+      class="btn"
+      @click="handleIncrement"
+    >
+      Increment {{ label }}
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    setValue: Function,
+    data: Object,
+  },
+  computed: {
+    label() {
+      return typeof this.data.value !== 'number'
+        ? 0
+        : JSON.stringify(this.data.value)
+    },
+  },
+  methods: {
+    handleIncrement() {
+      this.setValue(
+        (typeof this.data.value === 'number' ? this.data.value : 0) + 1,
+      )
+    },
+  },
+}
+</script>

packages/cli/templates/vue2/src/components/ModalToggle.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="modal-toggle">
+    <button
+      class="btn"
+      type="button"
+      @click="handleToggleModal"
+    >
+      {{ isModalOpen ? 'Close' : 'Open' }} modal
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    setModalOpen: Function,
+    isModalOpen: Boolean,
+  },
+  methods: {
+    handleToggleModal() {
+      this.setModalOpen(!this.isModalOpen)
+    },
+  },
+}
+</script>