update

vim/UltiSnips/css.snippets

@@ -1,16 +1,10 @@
-snippet mediamin "media query min:"
-@media (min-width: $1${2:em}) {
+snippet @m "@media ..."
+@media ($(1{min}-width: $2${3:em}) {
   $0
 }
 endsnippet
 
-snippet mediamax "media query min:"
-@media (max-width: $1${2:em}) {
-	$0
-}
-endsnippet
-
-snippet bglg "background: linear-gradient"
+snippet bglg "background: linear-gradient ..."
 background-color: ${1:transparent};
 background: linear-gradient(
               ${2:to bottom},
@@ -18,3 +12,81 @@ background: linear-gradient(
               ${4:transparent}
             );
 endsnippet
+
+snippet flex "display: flex ..."
+display: flex;
+flex-direction: ${1:row};
+justify-content: ${2:center};
+align-items: ${3:center};
+endsnippet
+
+snippet w "width: ;"
+width: ${1:100%};
+$0
+endsnippet
+
+snippet h "height: ;"
+height: ${1:100%};
+$0
+endsnippet
+
+snippet bgc "background-color: ;"
+background-color: ${1:transparent};
+$0
+endsnippet
+
+snippet t "top: ... ;"
+top: ${1:100%};
+endsnippet
+
+snippet b "bottom: ... ;"
+bottom: ${1:100%};
+endsnippet
+
+snippet l "left: ... ;"
+left: ${1:100%};
+endsnippet
+
+snippet r "right: ... ;"
+right: ${1:100%};
+endsnippet
+
+snippet m "margin: ... ;"
+margin: ${1:0};
+endsnippet
+
+snippet mt "margin-top: ... ;"
+margin-top: ${1:0};
+endsnippet
+
+snippet mb "margin-bottom: ... ;"
+margin-bottom: ${1:0};
+endsnippet
+
+snippet ml "margin-left: ... ;"
+margin-left: ${1:0};
+endsnippet
+
+snippet mr "margin-right: ... ;"
+margin-right: ${1:0};
+endsnippet
+
+snippet m "padding: ... ;"
+padding: ${1:0};
+endsnippet
+
+snippet pt "padding-top: ... ;"
+padding-top: ${1:0};
+endsnippet
+
+snippet pb "padding-bottom: ... ;"
+padding-bottom: ${1:0};
+endsnippet
+
+snippet pl "padding-left: ... ;"
+padding-left: ${1:0};
+endsnippet
+
+snippet pr "padding-right: ... ;"
+padding-right: ${1:0};
+endsnippet

vim/UltiSnips/javascript.snippets

@@ -1,3 +1,27 @@
 snippet todo "// TODO"
 // TODO $0
 endsnippet
+
+snippet cl "console.log( ... )"
+console.log($0);
+endsnippet
+
+snippet if "if ( ... ) { ... }"
+if ($1) {
+  $0
+}
+endsnippet
+
+snippet ifelse "if ( ... ) { ... } else { ... }"
+if ($1) {
+  $2
+} else {
+  $0
+}
+endsnippet
+
+snippet for "for ( ... ) { ... }"
+for (let ${1:index} = ${2:0}; $1 $3; $1${4:++}) {
+  $0
+}
+endsnippet

vim/UltiSnips/scss.snippets

@@ -1,3 +1,5 @@
+extends css
+
 snippet befabs "&::before (absolute) skeleton"
 &::before {
 	content: '';

vim/UltiSnips/vue.snippets

@@ -1,4 +1,4 @@
-extends html, javascript, css, scss
+extends html, javascript, scss
 
 snippet vue "Default template"
 <template>
@@ -23,3 +23,36 @@ export default {
 <style lang="scss" scoped>
 </style>
 endsnippet
+
+snippet byinput "Beufy Input Field"
+<div class="field"> <!-- $1 -->
+  <label class="label">$1</label>
+  <div class="control">
+    <input class="input"
+     name="$2"
+     ${3:type="${4:text}"}
+     v-model="${5:$2}">
+  </div>
+</div>$0
+endsnippet
+
+snippet byselect "Buefy Select Field"
+<div class="field"> <!-- $1 -->
+  <label class="label">$1</label> 
+  <div class="control">
+    <div class="select">
+      <select name="$2"
+              :v-model="$2">
+	$0
+      </select>
+    </div>
+  </div>
+</div>
+endsnippet
+
+snippet nt "this.$nextTick( () => { ... })"
+this.$nextTick( () => {
+  $0
+})
+endsnippet
+

vimrc

@@ -1022,6 +1022,7 @@ inoremap {:w<cr>   :w<cr>
 inoremap {{       {}<left>
 inoremap {<CR>    {<CR>}<C-o>O
 inoremap {;       {<CR>};<C-o>O
+inoremap {,       {<CR>},<C-o>O
 inoremap {{{      {{}}<Left><Left>
 
 inoremap ((       ()<Left>
@@ -1054,8 +1055,6 @@ iabbrev functin function
 iabbrev positin position
 
 " css
-iabbrev w100; width: 100%;
-iabbrev h100; height: 100%;
 iabbrev pabs; position: absolute;
 iabbrev pfix; position: fixed;
 iabbrev prel; position: relative;
@@ -1063,20 +1062,12 @@ iabbrev fdr; flex-direction: row;
 iabbrev fdc; flex-direction: column;
 iabbrev jcc; justify-content: center;
 iabbrev aic; align-items: center;
-iabbrev m0; margin: 0;
 iabbrev t0; top: 0;
 iabbrev b0; bottom: 0;
 iabbrev l0; left: 0;
 iabbrev r0; right: 0;
-iabbrev t100; top: 100%;
-iabbrev b100; bottom: 100%;
-iabbrev l100; left: 100%;
-iabbrev r100; right: 100%;
 
-iabbrev w: width:;<left>
-iabbrev h: height:;<left>
 iabbrev ct'' content-type: '';
-iabbrev bgc: background-color:;<left>
 
 "}}}