From 33bac0b50965fb9c83ba3be4616dbbeac3a9700e Mon Sep 17 00:00:00 2001
From: Vasily Kuzin <exer7um@gmail.com>
Date: Sat, 6 Aug 2022 21:10:55 +0300
Subject: [PATCH] Add vue-template snippets #2

Snippets:
- vfor
- vmodel
- von
- vel-props
- vslot-named
- vimg
- vstyle
- vstyle-obj
- vclass
- vclass-ter
- vtrans
- vtrans-group
- vrlink
- vrlink-param
---
 package.json                        |  4 ++
 snippets/vue-template.code-snippets | 92 +++++++++++++++++++++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 snippets/vue-template.code-snippets

diff --git a/package.json b/package.json
index b04a7c9..fa83583 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,10 @@
       {
         "language": "vue",
         "path": "./snippets/vue.code-snippets"
+      },
+      {
+        "language": "html",
+        "path": "./snippets/vue-template.code-snippets"
       }
     ]
   }
diff --git a/snippets/vue-template.code-snippets b/snippets/vue-template.code-snippets
new file mode 100644
index 0000000..b2a0ba9
--- /dev/null
+++ b/snippets/vue-template.code-snippets
@@ -0,0 +1,92 @@
+{
+  "Vue v-for": {
+    "prefix": "vfor",
+    "body": [
+      "<${1:div} v-for=\"${2:item} in ${2:item}s\" :key=\"${2:item}.id\">",
+      "\t{{ ${2:item} }}",
+      "</${1:div}>"
+    ],
+    "description": "v-for statement"
+  },
+  "Vue v-model Directive": {
+    "prefix": "vmodel",
+    "body": ["<input v-model=\"${1:data}\" type=\"text\" />"],
+    "description": "v-model directive"
+  },
+  "Vue v-on Shortcut Directive": {
+    "prefix": "von",
+    "body": ["@click=\"${1:handler}(${2})\""],
+    "description": "v-on click handler"
+  },
+  "Vue Component with Props Binding": {
+    "prefix": "vel-props",
+    "body": ["<${1:component} :${1:propName}=\"${0}\"></${1:component}>"],
+    "description": "component element with props"
+  },
+  "Vue Named Slot": {
+    "prefix": "vslot-named",
+    "body": ["<template v-slot:${0:name}>${1:defaultcontent}</template>"],
+    "description": "named slot"
+  },
+  "Vue Image Source Binding": {
+    "prefix": "vimg",
+    "body": [
+      "<img :src=\"${1:imageSrc}\" :alt=\"${2:altText}\"/>"
+    ],
+    "description": "image source binding"
+  },
+  "Vue Style Binding": {
+    "prefix": "vstyle",
+    "body": [":style=\"{ fontSize: ${2:data} + 'px' }\""],
+    "description": "vue inline style binding"
+  },
+  "Vue Style Binding Object": {
+    "prefix": "vstyle-obj",
+    "body": [
+      ":style=\"[${2:styleObjectA}, ${3:styleObjectB]}\""
+    ],
+    "description": "vue inline style binding, objects"
+  },
+  "Vue Class Binding": {
+    "prefix": "vclass",
+    "body": [":class=\"{ '${2:classList}': ${1:condition} }\""],
+    "description": "vue class binding"
+  },
+  "Vue Class Binding Ternary": {
+    "prefix": "vclass-ter",
+    "body": [
+      ":class=\"[${1:condition} ? '${2:classListOnTrue}' : '${3:classListOnFalse}']\""
+    ],
+    "description": "vue ternary class binding"
+  },
+  "Vue Transition": {
+    "prefix": "vtrans",
+    "body": [
+      "<Transition name=\"${1:transitionName}\">",
+      "\t${0}",
+      "</Transition>"
+    ],
+    "description": "vue transition component"
+  },
+  "Vue Transition Group": {
+    "prefix": "vtrans-group",
+    "body": [
+      "<TransitionGroup name=\"${1:transitionName}\">",
+      "\t${0}",
+      "</TransitionGroup>"
+    ],
+    "description": "vue transition group component"
+  },
+  "Vue Routing Link": {
+    "prefix": "vrlink",
+    "body": ["<router-link to=\"/${1:path}\">${2:linkTitle}</router-link>"],
+    "description": "vue router link"
+  },
+  "Vue Routing Link with param": {
+    "prefix": "vrlink-param",
+    "body": [
+      "<router-link :to=\"`/${1:path}/${${2:param}}`\">${3:linkTitle}</router-link>"
+    ],
+    "description": "vue router link with param"
+  },
+}