From 10b09237afd1a0919d909372702488b5f68d0e58 Mon Sep 17 00:00:00 2001
From: moh1434 <moh1434.ma@gmail.com>
Date: Wed, 22 Feb 2023 21:01:36 +0300
Subject: [PATCH 1/2] style:just add whitespace
---
README.md | 32 ++++++++++++++++----------------
1 file changed, 16 insertions(+), 16 deletions(-)
diff --git a/README.md b/README.md
index f440a8f..9109f1e 100644
--- a/README.md
+++ b/README.md
@@ -32,22 +32,22 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
### Vue
-| Snippet | Purpose |
-| ------------------ | ------------------------------------------------------------ |
-| `vbase` | Single file component base with SCSS |
-| `vbase-3` | Single File component Composition API with SCSS |
-| `vbase-3-setup` | Single File component setup Composition API with SCSS |
-| `vbase-3-reactive` | Single File component Composition API with Reactive and SCSS |
-| `vbase-css` | Single file component base with CSS |
-| `vbase-pcss` | Single file component base with PostCSS |
-| `vbase-styl` | Single file component base with Stylus |
-| `vbase-ts` | Single file component base with Typescript |
-| `vbase-ts-class` | Single file component base with Typescript Class Format |
-| `vbase-3-ts` | Single File component Composition API with Typescript |
-| `vbase-3-ts-setup` | Single File component setup Composition API with Typescript |
-| `vbase-ns` | Single file component with no styles |
-| `vbase-sass` | Single file component base with SASS |
-| `vbase-less` | Single file component base with LESS |
+| Snippet | Purpose |
+| ------------------------------ | ----------------------------------------------------------------------------- |
+| `vbase` | Single file component base with SCSS |
+| `vbase-3` | Single File component Composition API with SCSS |
+| `vbase-3-setup` | Single File component setup Composition API with SCSS |
+| `vbase-3-reactive` | Single File component Composition API with Reactive and SCSS |
+| `vbase-css` | Single file component base with CSS |
+| `vbase-pcss` | Single file component base with PostCSS |
+| `vbase-styl` | Single file component base with Stylus |
+| `vbase-ts` | Single file component base with Typescript |
+| `vbase-ts-class` | Single file component base with Typescript Class Format |
+| `vbase-3-ts` | Single File component Composition API with Typescript |
+| `vbase-3-ts-setup` | Single File component setup Composition API with Typescript |
+| `vbase-ns` | Single file component with no styles |
+| `vbase-sass` | Single file component base with SASS |
+| `vbase-less` | Single file component base with LESS |
### Template
From 374d6c62839391ac6850f464c6754553fe8a0b98 Mon Sep 17 00:00:00 2001
From: moh1434 <moh1434.ma@gmail.com>
Date: Wed, 22 Feb 2023 21:02:14 +0300
Subject: [PATCH 2/2] feat: add vbase-3-ts-setup-props-emits
---
README.md | 1 +
snippets/vue.json | 37 ++++++++++++++++++++++++++++++++++++-
2 files changed, 37 insertions(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 9109f1e..77a5bd2 100644
--- a/README.md
+++ b/README.md
@@ -45,6 +45,7 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
| `vbase-ts-class` | Single file component base with Typescript Class Format |
| `vbase-3-ts` | Single File component Composition API with Typescript |
| `vbase-3-ts-setup` | Single File component setup Composition API with Typescript |
+| `vbase-3-ts-setup-props-emits` | Single File Component Setup Composition API with Typescript, props, and emits |
| `vbase-ns` | Single file component with no styles |
| `vbase-sass` | Single file component base with SASS |
| `vbase-less` | Single file component base with LESS |
diff --git a/snippets/vue.json b/snippets/vue.json
index 578866c..798caf9 100644
--- a/snippets/vue.json
+++ b/snippets/vue.json
@@ -285,6 +285,41 @@
],
"description": "Base for Vue File Setup Composition API - Typescript"
},
+ "Vue Single File Component Setup Composition API with Typescript, props, and emits": {
+ "prefix": "vbase-3-ts-setup-props-emits",
+ "body": [
+ "<template>",
+ "\t<div>",
+ "",
+ "\t</div>",
+ "</template>",
+ "",
+ "<script setup lang=\"ts\">",
+ "export interface Props {",
+ "\tuser?: string",
+ "}",
+ "const props = withDefaults(defineProps<Props>(), {",
+ "\tuser: 'foo'",
+ "})",
+ "",
+ "const emits = defineEmits<{",
+ "\t(e: 'update:user', newValue: string): void",
+ "}>()",
+ "const onClick = () => emits('update:user', 'bar');",
+ "",
+ "//in parent component:",
+ "//\tv-model:user=\"userParentVariable\"",
+ "//OR:",
+ "//\t:user=\"userParentVariable\" @update:user=\"userParentVariable = $event\"",
+ "",
+ "</script>",
+ "",
+ "<style scoped>",
+ "",
+ "</style>"
+ ],
+ "description": "Base for Vue File Setup Composition API - Typescript with defineProps & defineEmits"
+ },
"Vue Single File Component with Class based Typescript format": {
"prefix": "vbase-ts-class",
"body": [
@@ -309,4 +344,4 @@
],
"description": "Base for Vue File with Class based Typescript format"
}
-}
+}
\ No newline at end of file