basket

.eslintrc.yml

@@ -6,4 +6,7 @@ extends:
   - 'plugin:vue/base'
   - '@vue/typescript'
   - prettier
-rules: {}
+rules:
+  'no-console':
+    - error
+    - allow: ['warn', 'error']

.vscode/settings.json

@@ -4,5 +4,13 @@
 	"vetur.validation.templateProps": true,
 	"vetur.validation.interpolation": true,
     "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "cSpell.words": [
+        "Astrologia",
+        "Kamal",
+        "Kamalātmikā",
+        "Yantra",
+        "protovue",
+        "tmik"
+    ]
 }

doc/INDEX.md

@@ -1,19 +1,29 @@
 DOCUMENTATION
 =============
 
+First Initialization
+---------------------
 
-## First Initialization
+```bash
+npm init vite-app protovue
+cd protovue
+npm install
+npm install typescript
+  > ...
+  > tsconfig.json, shims-vue.d.ts, main.ts, index.html
+see [vue3+typescript+vite](https://stackoverflow.com/questions/63724523/how-to-add-typescript-to-vue-3-and-vite-project#64438876)
+npm run dev
+```
+Logo
+-----
 
-* npm init vite-app vapara-vue3
-* cd vapara-vue3
-  * npm install
-  * npm install typescript
-    * ...tsconfig.json, shims-vue.d.ts, main.ts, index.html
-    * see [vue3+typescript+vite](https://stackoverflow.com/questions/63724523/how-to-add-typescript-to-vue-3-and-vite-project#64438876)
-  * npm run dev
+inspired by [Astrologia: Yantra de Śrī Kamalātmikā Devī](https://sriganesa.blogspot.com/2014/03/yantra-de-sri-kamalatmika-devi.html)
 
-## Logo
+Hints
+-----
+
+### Vue3/Typescript
+
+* use defineComponent for Component
+* console.log not accepted except warn and error
 
-inspired by 
-Astrologia: Yantra de Śrī Kamalātmikā Devī
-https://sriganesa.blogspot.com/2014/03/yantra-de-sri-kamalatmika-devi.html

src/App.vue

@@ -1,19 +1,23 @@
 <template>
   <div
-    class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6"
+    class="space-y-2 bg-white rounded-xl mx-auto max-w-sm py-8 px-8 shadow-md sm:space-y-0 sm:space-x-6 sm:flex sm:py-4 sm:items-center"
   >
     <img alt="Vue logo" src="./assets/logo.png" width="150" />
-    <div class="text-center space-y-2 sm:text-left">
+    <div class="space-y-2 text-center sm:text-left">
       <div class="space-y-0.5">
-        <p class="text-lg text-black font-semibold">{{ title }}</p>
-        <p class="text-gray-500 font-medium">{{ subtitle }}</p>
+        <p class="font-semibold text-lg text-black">
+          {{ title }}
+        </p>
+        <p class="font-medium text-gray-500">
+          {{ subtitle }}
+        </p>
       </div>
     </div>
   </div>
   <div
-    class="m-1 py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6"
+    class="space-y-2 bg-white rounded-xl m-1 mx-auto max-w-sm py-8 px-8 shadow-md sm:space-y-0 sm:space-x-6 sm:flex sm:py-4 sm:items-center"
   >
-    <HelloWorld msg="Votre panier" :n="a" />
+    <Basket msg="basket" />
   </div>
   <footer style="margin-top: 2em">
     {{ license }} :
@@ -27,11 +31,11 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import HelloWorld from './components/HelloWorld.vue'
+import Basket from './components/Basket.vue'
 
 export default defineComponent({
   components: {
-    HelloWorld
+    Basket
   },
   setup() {
     return {
@@ -40,8 +44,7 @@ export default defineComponent({
       version: APP_VERSION,
       repository: APP_REPOSITORY,
       license: APP_LICENSE,
-      subtitle: 'La Boutik Ǧ1',
-      a: 5
+      subtitle: 'proof of concept'
     }
   }
 })

src/components/Basket.vue

@@ -0,0 +1,37 @@
+<template>
+  <h1>{{ msg }}</h1>
+  <button
+    class="border border-purple-200 rounded-full font-semibold py-1 px-4 text-sm text-purple-600 hover:bg-purple-600 hover:border-transparent hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
+    @click="count++"
+  >
+    inc product {{ count }}
+  </button>
+  <button
+    class="border border-purple-200 rounded-full font-semibold py-1 px-4 text-sm text-purple-600 hover:bg-purple-600 hover:border-transparent hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
+    @click="inc"
+  >
+    inc
+  </button>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  props: {
+    msg: { type: String, required: true }
+  },
+  setup() {
+    return {
+      count: ref(0)
+    }
+  },
+  methods: {
+    inc() {
+      // console.log('log count')
+      console.warn('warn count')
+      console.error('err count')
+      this.count++
+    }
+  }
+})
+</script>

src/components/HelloWorld.vue

@@ -1,36 +0,0 @@
-<template>
-  <h1>{{ msg }}</h1>
-  <button
-    class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
-    @click="count++"
-  >
-    inc product {{ count }}
-  </button>
-  <button
-    class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
-    @click="inc"
-  >
-    inc
-  </button>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
-export default defineComponent({
-  props: {
-    msg: { type: String, required: true },
-    n: { type: Number, required: true }
-  },
-  setup() {
-    return {
-      count: ref(0)
-    }
-  },
-  methods: {
-    inc() {
-      console.log('increment count')
-      this.count++
-    }
-  }
-})
-</script>