-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathVueJS Script.xml
102 lines (102 loc) · 7.04 KB
/
VueJS Script.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<templateSet group="VueJS Script">
<template name="vdata" value="data() { return { $KEY$: $VALUE$ } },$END$" description="Component data as a function" toReformat="false" toShortenFQNames="true">
<variable name="KEY" expression="" defaultValue=""key"" alwaysStopAt="true" />
<variable name="VALUE" expression="" defaultValue=""value"" alwaysStopAt="true" />
<context>
<option name="JAVA_SCRIPT" value="true" />
</context>
</template>
<template name="vbase" value="<template> <div> </div> </template> <script> export default { $END$ } </script> <style scoped> </style>" description="Single file component base" toReformat="false" toShortenFQNames="true">
<context>
<option name="JAVA_SCRIPT" value="true" />
</context>
</template>
<template name="vmethod" value="methods: { $NAME$() { $END$ } }," description="Vue method" toReformat="false" toShortenFQNames="true">
<variable name="NAME" expression="" defaultValue=""name"" alwaysStopAt="true" />
<context>
<option name="JAVA_SCRIPT" value="true" />
</context>
</template>
<template name="vcomputed" value="computed: { $NAME$() { return this.$PROPERTY$ } }," description="Vue computed property" toReformat="false" toShortenFQNames="true">
<variable name="NAME" expression="" defaultValue=""name"" alwaysStopAt="true" />
<variable name="PROPERTY" expression="" defaultValue=""data"" alwaysStopAt="true" />
<context>
<option name="JAVA_SCRIPT" value="true" />
</context>
</template>
<template name="vwatcher" value="watch: { data($newValue$, $oldValue$) { $END$ } }," description="Vue watcher with new and old value args" toReformat="false" toShortenFQNames="true">
<variable name="newValue" expression="" defaultValue=""newValue"" alwaysStopAt="true" />
<variable name="oldValue" expression="" defaultValue=""oldValue"" alwaysStopAt="true" />
<context>
<option name="JAVA_SCRIPT" value="true" />
</context>
</template>
<template name="vprop" value="props: { $propName$: { type: $number$, default: $END$ }, }," description="Props with type and default" toReformat="false" toShortenFQNames="true">
<variable name="propName" expression="" defaultValue=""propName"" alwaysStopAt="true" />
<variable name="number" expression="" defaultValue=""Number"" alwaysStopAt="true" />
<context>
<option name="JAVA_SCRIPT" value="true" />
</context>
</template>
<template name="vimport" value="import $NAME$ from './components/$NAME$.vue';" description="Import one component into another" toReformat="false" toShortenFQNames="true">
<variable name="NAME" expression="" defaultValue=""New"" alwaysStopAt="true" />
<context>
<option name="JAVA_SCRIPT" value="true" />
</context>
</template>
<template name="vimport-c" value="components: { $New$, }," description="Import one component into another within the export statement" toReformat="false" toShortenFQNames="true">
<variable name="New" expression="" defaultValue=""New"" alwaysStopAt="true" />
<context>
<option name="JAVA_SCRIPT" value="true" />
</context>
</template>
<template name="vimport-export" value="import $NAME$ from '~components/$NAME$.vue' export default { components: { $NAME$ }, }" description="Import one component into another and use it within the export statement" toReformat="false" toShortenFQNames="true">
<variable name="NAME" expression="" defaultValue=""Name"" alwaysStopAt="true" />
<context>
<option name="JAVA_SCRIPT" value="true" />
</context>
</template>
<template name="vfilter" value="filters: { $fnName$: function($value$) { return $value$;$END$ } }," description="Vue filter" toReformat="false" toShortenFQNames="true">
<variable name="fnName" expression="" defaultValue=""fnName"" alwaysStopAt="true" />
<variable name="value" expression="" defaultValue=""value"" alwaysStopAt="true" />
<context>
<option name="JAVA_SCRIPT" value="true" />
</context>
</template>
<template name="vmixin" value="const $mixinName$ = { mounted() { console.log('hello from mixin!') }, }" description="Create a Vue Mixin" toReformat="false" toShortenFQNames="true">
<variable name="mixinName" expression="" defaultValue=""mixingName"" alwaysStopAt="true" />
<context>
<option name="JAVA_SCRIPT" value="true" />
</context>
</template>
<template name="vmixin-use" value="mixins: [$mixinName$]," description="Bring a mixin into a component to use" toReformat="false" toShortenFQNames="true">
<variable name="mixinName" expression="" defaultValue=""mixinName"" alwaysStopAt="true" />
<context>
<option name="JAVA_SCRIPT" value="true" />
</context>
</template>
<template name="vc-direct" value="Vue.directive('$directiveName$', { bind(el, binding, vnode) { el.style.$arg$ = binding.value.$arg$; } });" description="Vue create a custom directive" toReformat="false" toShortenFQNames="true">
<variable name="directiveName" expression="" defaultValue=""directiveName"" alwaysStopAt="true" />
<variable name="arg" expression="" defaultValue=""arg"" alwaysStopAt="true" />
<context>
<option name="JAVA_SCRIPT" value="true" />
</context>
</template>
<template name="vimport-lib" value="import { $libName$ } from '$libName$'" description="Import a library" toReformat="false" toShortenFQNames="true">
<variable name="libName" expression="" defaultValue=""libName"" alwaysStopAt="true" />
<context>
<option name="JAVA_SCRIPT" value="true" />
</context>
</template>
<template name="vimport-gsap" value="import { TimelineMax, $Ease$ } from 'gsap'" description="Import GreenSock with Timeline and Eases" toReformat="false" toShortenFQNames="true">
<variable name="Ease" expression="" defaultValue=""Ease"" alwaysStopAt="true" />
<context>
<option name="JAVA_SCRIPT" value="true" />
</context>
</template>
<template name="vanimhook-js" value="methods: { beforeEnter(el) { console.log('beforeEnter'); }, enter(el, done) { console.log('enter'); done(); }, beforeLeave(el) { console.log('beforeLeave'); }, leave(el, done) { console.log('leave'); done(); }, }," description="Using the Transition component JS hooks in methods" toReformat="false" toShortenFQNames="true">
<context>
<option name="JAVA_SCRIPT" value="true" />
</context>
</template>
</templateSet>