feat(scaffold): Improved SCSS

ftgibran · ftgibran · commit 8bd9090e81f8 · 2018-05-14T15:33:42.000-03:00
diff --git a/packages/@simpli/cli-scaffold/generator/index.js b/packages/@simpli/cli-scaffold/generator/index.js
@@ -51,7 +51,6 @@ module.exports = (api, options) => {
     dependencies: {
       '@types/lodash': '4.14.104',
       '@types/papaparse': '4.1.33',
-      'animate.css': '3.6.1',
       'chart.js': '2.7.2',
       'chartkick': '2.3.3',
       'class-transformer': '0.1.9',
@@ -64,7 +63,7 @@ module.exports = (api, options) => {
       'normalize-scss': '7.0.1',
       'register-service-worker': '1.1.1',
       'simple-line-icons': '2.4.1',
-      'simpli-ts-vue': '1.3.1',
+      'simpli-ts-vue': '1.6.1',
       'vue': '2.5.16',
       'vue-chartjs': '3.2.1',
       'vue-chartkick': '0.2.1',
@@ -77,6 +76,7 @@ module.exports = (api, options) => {
       'vue-resource': '1.5.0',
       'vue-router': '3.0.1',
       'vue-snotify': '3.0.4',
+      'vue-spinner': '1.0.3',
       'vuex': '3.0.1',
       'vuex-class': '0.3.0'
     },
diff --git a/packages/@simpli/cli-scaffold/generator/injected/src/views/list/ListTemplateView.vue b/packages/@simpli/cli-scaffold/generator/injected/src/views/list/ListTemplateView.vue
@@ -43,10 +43,6 @@
     toRemove = new <%-model.name%>()
 <%_ } _%>
 
-    async mounted() {
-      await this.collection.search()
-    }
-
     openPersist(item: <%-model.name%>) {
       pushByName('edit<%-model.name%>', item.$id)
     }
diff --git a/packages/@simpli/cli-scaffold/generator/injected/src/views/persist/PersistTemplateView.vue b/packages/@simpli/cli-scaffold/generator/injected/src/views/persist/PersistTemplateView.vue
@@ -5,38 +5,44 @@
       {{ $t("classes.<%-origin.name%>.title") }}
     </h1>
 
-    <section class="verti scroll weight-1 items-center-top p-30">
-      <form @submit.prevent="persist" class="elevated w-full max-w-650 p-20">
+    <await name="get" class="verti scroll weight-1 items-center-top p-30">
+      <form @submit.prevent="submit" class="elevated w-full max-w-650 p-20">
 <%_ for (var i in origin.attrs) { var attr = origin.attrs[i] _%>
 <%-attr.buildPersist(origin.name, model.resp.originAttr)-%>
 <%_ } _%>
         <hr class="mb-20"/>
 
-        <div class="verti items-center">
+        <await name="persist" class="verti items-center">
           <button type="submit" class="accent">{{ $t("persist.submit") }}</button>
-        </div>
+        </await>
       </form>
-    </section>
+    </await>
   </div>
 </template>
 
 <script lang="ts">
   import {Component, Prop, Vue} from 'vue-property-decorator'
   <%-model.injectIntoDependence().build()%>
-  import {successAndPush} from '@/simpli'
+  import {$, successAndPush} from '@/simpli'
 
   @Component
   export default class Persist<%-origin.name%>View extends Vue {
     @Prop({type: [String, Number]}) id?: string
     model = new <%-model.name%>()
 
     async mounted() {
+      await $.await.init('get')
       await this.model.find(this.id || 0)
+      await $.await.done('get')
     }
 
     async persist() {
       await this.model.<%-model.resp.originAttr%>.validate()
       await this.model.<%-model.resp.originAttr%>.save()
+    }
+
+    async submit() {
+      await $.await.run(this.persist, 'persist')
       successAndPush('system.success.persist', '/<%-kebabCase(origin.name)%>/list')
     }
   }
diff --git a/packages/@simpli/cli-scaffold/generator/template/src/App.vue b/packages/@simpli/cli-scaffold/generator/template/src/App.vue
@@ -1,6 +1,8 @@
 <template>
   <div>
-    <router-view/>
+    <transition name="fade-y" mode="out-in">
+      <router-view/>
+    </transition>
     <vue-snotify :class="toastStyle"/>
   </div>
 </template>
@@ -22,10 +24,6 @@ export default class App extends Vue {
 
   toastStyle: ToastStyle = ToastDefaultStyle
 
-  constructor() {
-    super()
-  }
-
   // When the user or system signs in
   signInEvent() {
     //
diff --git a/packages/@simpli/cli-scaffold/generator/template/src/assets/img/bg.jpg b/packages/@simpli/cli-scaffold/generator/template/src/assets/img/bg.jpg
diff --git a/packages/@simpli/cli-scaffold/generator/template/src/bootstrap/await.ts b/packages/@simpli/cli-scaffold/generator/template/src/bootstrap/await.ts
@@ -0,0 +1,40 @@
+import {$} from '@/simpli'
+
+import PulseLoader from 'vue-spinner/src/PulseLoader.vue'
+import GridLoader from 'vue-spinner/src/GridLoader.vue'
+import ClipLoader from 'vue-spinner/src/ClipLoader.vue'
+import RiseLoader from 'vue-spinner/src/RiseLoader.vue'
+import BeatLoader from 'vue-spinner/src/BeatLoader.vue'
+import SyncLoader from 'vue-spinner/src/SyncLoader.vue'
+import RotateLoader from 'vue-spinner/src/RotateLoader.vue'
+import FadeLoader from 'vue-spinner/src/FadeLoader.vue'
+import PacmanLoader from 'vue-spinner/src/PacmanLoader.vue'
+import SquareLoader from 'vue-spinner/src/SquareLoader.vue'
+import ScaleLoader from 'vue-spinner/src/ScaleLoader.vue'
+import SkewLoader from 'vue-spinner/src/SkewLoader.vue'
+import MoonLoader from 'vue-spinner/src/MoonLoader.vue'
+import RingLoader from 'vue-spinner/src/RingLoader.vue'
+import BounceLoader from 'vue-spinner/src/BounceLoader.vue'
+import DotLoader from 'vue-spinner/src/DotLoader.vue'
+
+$.await.addLoader('PulseLoader', PulseLoader)
+$.await.addLoader('GridLoader', GridLoader)
+$.await.addLoader('ClipLoader', ClipLoader)
+$.await.addLoader('RiseLoader', RiseLoader)
+$.await.addLoader('BeatLoader', BeatLoader)
+$.await.addLoader('SyncLoader', SyncLoader)
+$.await.addLoader('RotateLoader', RotateLoader)
+$.await.addLoader('FadeLoader', FadeLoader)
+$.await.addLoader('PacmanLoader', PacmanLoader)
+$.await.addLoader('SquareLoader', SquareLoader)
+$.await.addLoader('ScaleLoader', ScaleLoader)
+$.await.addLoader('SkewLoader', SkewLoader)
+$.await.addLoader('MoonLoader', MoonLoader)
+$.await.addLoader('RingLoader', RingLoader)
+$.await.addLoader('BounceLoader', BounceLoader)
+$.await.addLoader('DotLoader', DotLoader)
+
+$.await.defaultTransition = 'fade'
+$.await.defaultSpinner = 'ScaleLoader'
+$.await.defaultSpinnerColor = '#21AEB6'
+$.await.defaultSpinnerPadding = '0'
diff --git a/packages/@simpli/cli-scaffold/generator/template/src/components/Sidebar.vue b/packages/@simpli/cli-scaffold/generator/template/src/components/Sidebar.vue
@@ -15,11 +15,11 @@
           </span>
         </h1>
       </div>
-      <div class="horiz items-center">
-        <h3 class="truncate">
-          <!--{{user.email}}-->
-        </h3>
-      </div>
+      <!--<div class="horiz items-center">-->
+      <!--<h3 class="truncate">-->
+      <!--{{user.email}}-->
+      <!--</h3>-->
+      <!--</div>-->
       <div class="weight-1" :class="{ 'desktop-tablet': !menu }">
         <ul class="verti h-full p-0 py-10">
 
diff --git a/packages/@simpli/cli-scaffold/generator/template/src/components/modals/ModalRemove.vue b/packages/@simpli/cli-scaffold/generator/template/src/components/modals/ModalRemove.vue
@@ -1,5 +1,5 @@
 <template>
-  <modal v-if="active" class="animated fadeIn">
+  <modal v-if="active">
     <div class="verti">
       <div class="horiz">
         <h4 class="weight-1 mt-0 mr-10">
diff --git a/packages/@simpli/cli-scaffold/generator/template/src/locale/en-US/lang.ts b/packages/@simpli/cli-scaffold/generator/template/src/locale/en-US/lang.ts
@@ -55,19 +55,25 @@ export default {
       unauthorized: 'Restricted Access',
       noServer: 'Could not connect to server',
       validation: 'Validation error',
-      required: 'Field \'{0}\' is required',
-      invalidEmail: 'Field \'{0}\' must be e-mail',
-      invalidDate: 'Field \'{0}\' has not valid date',
+      required: 'The field \'{0}\' is required',
+      invalidEmail: 'The field \'{0}\' must be e-mail',
+      invalidDate: 'The field \'{0}\' has not valid date',
       passwordLength: 'The password must have between {0} and {1} characters',
       samePassword: 'The fields password must match',
-      length: 'Field \'{0}\' must have between {1} and {2} characters',
-      maxLength: 'Field \'{0}\' must not exceed {0} characters',
-      minLength: 'Field \'{0}\' must have at least {0} characters',
-      min: 'Field \'{0}\' must have a minimum value of {1}',
-      max: 'Field \'{0}\' must have a maximum value of {1}',
-      invalidAlpha: 'Field \'{0}\' must contain only letters',
-      invalidAlphanumeric: 'Field \'{0}\' must contain only letters and numbers',
+      length: 'The field \'{0}\' must have between {1} and {2} characters',
+      maxLength: 'The field \'{0}\' must not exceed {0} characters',
+      minLength: 'The field \'{0}\' must have at least {0} characters',
+      min: 'The field \'{0}\' must have a minimum value of {1}',
+      max: 'The field \'{0}\' must have a maximum value of {1}',
+      invalidAlpha: 'The field \'{0}\' must contain only letters',
+      invalidAlphanumeric: 'The field \'{0}\' must contain only letters and numbers',
       invalidCreditCard: 'Invalid card credit number',
+      format: 'Wrong format for field \'{0}\'',
+      phoneFormat: 'Wrong format for phone number',
+      zipcodeFormat: 'Wrong format for zip code',
+      rgFormat: 'Wrong format for RG document',
+      cpfFormat: 'Wrong format for CPF document',
+      cnpjFormat: 'Wrong format for CNPJ document',
     },
   },
 
diff --git a/packages/@simpli/cli-scaffold/generator/template/src/locale/pt-BR/lang.ts b/packages/@simpli/cli-scaffold/generator/template/src/locale/pt-BR/lang.ts
@@ -68,6 +68,12 @@ export default {
       invalidAlpha: 'Campo \'{0}\' deve conter apenas letras',
       invalidAlphanumeric: 'Campo \'{0}\' deve conter apenas letras e números',
       invalidCreditCard: 'Número de cartão de crédito inválido',
+      format: 'Campo \'{0}\' está com a formatação errada',
+      phoneFormat: 'O número de telefone está com a formatação errada',
+      zipcodeFormat: 'O CEP está com a formatação errada',
+      rgFormat: 'O RG está com a formatação errada',
+      cpfFormat: 'O CPF está com a formatação errada',
+      cnpjFormat: 'O CNPJ está com a formatação errada',
     },
   },
 
diff --git a/packages/@simpli/cli-scaffold/generator/template/src/main.ts b/packages/@simpli/cli-scaffold/generator/template/src/main.ts
@@ -3,6 +3,7 @@ import App from './App.vue'
 
 import '@/bootstrap/app'
 import '@/bootstrap/vendor'
+import '@/bootstrap/await'
 
 import {$} from '@/simpli'
 import {store} from '@/store'
diff --git a/packages/@simpli/cli-scaffold/generator/template/src/scss/base.scss b/packages/@simpli/cli-scaffold/generator/template/src/scss/base.scss
@@ -1,9 +1,4 @@
-$accent-color: #21AEB6 !default;
-$light-percentage: 55% !default;
-$dark-accent: darken($accent-color, 10) !default;
-$light-accent-bg: desaturate(lighten($accent-color, $light-percentage), 30%) !default;
-$light-accent-text: desaturate(lighten($accent-color, $light-percentage - 25%), 40%) !default;
-$light-bg: #f5f5f5 !default;
+@import "variables";
 
 * {
   box-sizing: border-box;
@@ -42,13 +37,13 @@ section {
   /* Track */
   ::-webkit-scrollbar-track {
     background: lighten($accent-color, 40%);
-    border-radius: 5px;
+    border-radius: 0 0 5px 5px;
   }
 
   /* Handle */
   ::-webkit-scrollbar-thumb {
     background: $accent-color;
-    border-radius: 5px;
+    border-radius: 0 0 5px 5px;
   }
 
   /* Handle on hover */
@@ -239,6 +234,16 @@ div.accent-bg {
   transition-timing-function: ease-in;
 }
 
+.await-spinner {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .v-spinner {
+    display: flex;
+  }
+}
+
 .multiselect {
 
   .multiselect__option--highlight {
diff --git a/packages/@simpli/cli-scaffold/generator/template/src/scss/main.scss b/packages/@simpli/cli-scaffold/generator/template/src/scss/main.scss
@@ -1,11 +1,9 @@
 $simple-line-font-path: "~simple-line-icons/fonts/";
-$light-bg: white;
-$body-bg: #fbfbfb;
+@import "variables";
 
 @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600');
 @import "~normalize-scss/sass/normalize";
 @import "~simple-line-icons/scss/simple-line-icons.scss";
-@import "~animate.css";
 @import "base.scss";
 @import "~linelay/build.scss";
 
@@ -29,6 +27,18 @@ body {
   @import "~vue-snotify/styles/dark.scss";
 }
 
+.fade-enter-active, .fade-leave-active,
+.fade-y-enter-active, .fade-y-leave-active {
+  transition: opacity ease-out .4s, transform ease-out .4s;
+}
+.fade-enter, .fade-leave-to,
+.fade-y-enter, .fade-y-leave-to {
+  opacity: 0;
+}
+.fade-y-enter, .fade-y-leave-to {
+  transform: translateY(-20px);
+}
+
 td .icon {
   display: block;
   margin: 5px;
@@ -41,20 +51,26 @@ td .icon {
 aside.menu {
   background: white;
   border-right: 1px solid #dfdfdf;
+  padding: 0;
   z-index: 2;
 
   li {
     list-style-type: none;
     padding: 0;
+    margin-left: 4px;
 
     a {
-      text-transform: uppercase;
+      display: flex;
+      align-items: center;
+      font-size: 11px;
       text-decoration: none;
-      color: black;
+      text-transform: uppercase;
+      margin: 2px 0;
+      color: rgba(0, 0, 0, 0.6);
       width: 100%;
-      display: block;
       padding: 10px;
-      font-size: 13px;
+      transition: color ease-out 0.4s, background ease-out 0.4s, border-left ease-out 0.3s;
+      border-radius: 10px 0 0 10px;
       @extend .transition;
 
       &:hover, &.router-link-active {
@@ -213,4 +229,4 @@ aside.menu {
 input:not([type=submit]):not([type=checkbox]):not([type=radio]).search, textarea.search, select.search {
   border-radius: 16px;
   padding-left: 10px;
-}
+}
diff --git a/packages/@simpli/cli-scaffold/generator/template/src/scss/variables.scss b/packages/@simpli/cli-scaffold/generator/template/src/scss/variables.scss
@@ -0,0 +1,8 @@
+$accent-color: #21AEB6 !default;
+$light-percentage: 55% !default;
+$dark-accent: darken($accent-color, 10) !default;
+$light-accent-bg: desaturate(lighten($accent-color, $light-percentage), 30%) !default;
+$light-accent-text: desaturate(lighten($accent-color, $light-percentage - 25%), 40%) !default;
+$light-bg: white;
+
+$body-bg: whitesmoke;
diff --git a/packages/@simpli/cli-scaffold/generator/template/src/store/modules/auth.ts b/packages/@simpli/cli-scaffold/generator/template/src/store/modules/auth.ts
@@ -2,7 +2,7 @@
 import {ActionTree, GetterTree, Module, MutationTree} from 'vuex'
 import * as types from '@/store/mutation-types'
 import {AuthState, RootState} from '@/types/store'
-import {$, encrypt, push, successAndPush, errorAndPush, infoAndPush} from '@/simpli'
+import {$, encrypt, sleep, push, successAndPush, errorAndPush, infoAndPush} from '@/simpli'
 <%_ var auth = rootOptions.scaffoldSetup.auth _%>
 <%_ var signInApi = auth.api.signIn _%>
 <%_ var authApi = auth.api.auth _%>
@@ -47,8 +47,16 @@ const actions: ActionTree<AuthState, RootState> = {
     const loginResp: <%-loginRespModel.name%> = new <%-loginRespModel.name%>()
 <%-rootOptions.scaffoldSetup.auth.buildPasswordEncrypt()-%>
 
-    await model.validate()
-    await loginResp.<%-signInApi.name%>(model)
+    try {
+      $.await.init('login')
+      await sleep(1000)
+      await model.validate()
+      await loginResp.<%-signInApi.name%>(model)
+      $.await.done('login')
+    } catch (e) {
+      $.await.error('login')
+      throw e
+    }
 
 <%-rootOptions.scaffoldSetup.auth.buildSetItem('loginResp')-%>
 
diff --git a/packages/@simpli/cli-scaffold/generator/template/src/views/LoginView.vue b/packages/@simpli/cli-scaffold/generator/template/src/views/LoginView.vue
diff --git a/packages/@simpli/cli-scaffold/generator/template/src/views/layouts/DefaultPanelLayout.vue b/packages/@simpli/cli-scaffold/generator/template/src/views/layouts/DefaultPanelLayout.vue
diff --git a/packages/@simpli/cli/lib/scaffold/Scaffold.js b/packages/@simpli/cli/lib/scaffold/Scaffold.js
diff --git a/packages/@simpli/cli/lib/scaffold/setup/Attr.js b/packages/@simpli/cli/lib/scaffold/setup/Attr.js
diff --git a/packages/@simpli/cli/lib/server/Server.js b/packages/@simpli/cli/lib/server/Server.js
