feat: syncronized simpli-web-sdk

Author: ftgibran

packages/@simpli/cli-scaffold/generator/index.js

@@ -56,7 +56,7 @@ module.exports = (api, options) => {
       'normalize-scss': '7.0.1',
       'register-service-worker': '1.5.2',
       'simple-line-icons': '2.4.1',
-      'simpli-web-sdk': '^1.0.0',
+      'simpli-web-sdk': '^1.1.0',
       'vue': '^2.5.17',
       'vue-chartjs': '3.4.0',
       'vue-chartkick': '0.5.0',

packages/@simpli/cli-scaffold/generator/injected/src/views/list/ListTemplateView.vue

@@ -53,16 +53,16 @@
               </thead>
 
               <tbody>
-              <tr v-for="(data, i) in collection.data" :key="i">
+              <tr v-for="(item, i) in collection.items" :key="i">
                 <td class="horiz nowrap">
-                  <a @click="pushByName('edit<%-model.name%>', collection.items[i].$id)" class="icon icon-pencil"></a>
+                  <a @click="pushByName('edit<%-model.name%>', item.$id)" class="icon icon-pencil"></a>
 <%_ if (model.resource.deletable) { _%>
-                  <a @click="openRemoveModal(collection.items[i])" class="icon icon-trash"></a>
+                  <a @click="openRemoveModal(item)" class="icon icon-trash"></a>
 <%_ } _%>
                 </td>
 
-                <td v-for="(value, key) in data" :key="key">
-                  <resource-render v-model="collection.items[i]" :field="key"/>
+                <td v-for="(field, j) in item.fieldsToRender" :key="j">
+                  <resource-render v-model="collection.items[i]" :field="field"/>
                 </td>
               </tr>
               </tbody>

packages/@simpli/cli-scaffold/generator/injected/src/views/persist/PersistTemplateView.vue

@@ -7,11 +7,11 @@
       </h1>
     </section>
 
-    <section class="container fluid">
+    <section class="container small">
       <await init name="find<%-origin.name%>Resp" class="my-20">
         <form class="elevated padded" @submit.prevent="$await.run(persist, 'persist')">
 
-          <div v-for="(schemaRow, field) in model.<%-model.resp.originAttr%>.$schema" :key="field">
+          <div v-for="(field, i) in model.<%-model.resp.originAttr%>.fieldsToInput" :key="i">
 <%_ if (model.arrayAtrrs.length) { _%>
             <resource-input v-model="model.<%-model.resp.originAttr%>" :field="field" :selectItems="resource[field]"/>
 <%_ } else { _%>

packages/@simpli/cli-scaffold/generator/template/src/scss/app.scss

@@ -5,6 +5,7 @@
 @import "~simple-line-icons/scss/simple-line-icons";
 @import "~linelay/build";
 @import "~simpli-web-sdk/scss/main";
+@import "~simpli-web-sdk/scss/utils";
 /********************************************************/
 
 @import "base";
@@ -47,113 +48,6 @@
   }
 }
 
-.display {
-  @extend .pal-black.text;
-
-  font-size: 36px;
-  font-weight: 600;
-  letter-spacing: 1px;
-
-  &.contrast {
-    @extend .pal-white.text;
-  }
-
-  @media screen and (max-width: $display-large) {
-    font-size: 32px;
-  }
-
-  @media screen and (max-width: $display-medium) {
-    font-size: 28px;
-  }
-
-  @media screen and (max-width: $display-small) {
-    font-size: 4.5vw;
-  }
-
-  &.huge {
-    font-size: 48px;
-
-    @media screen and (max-width: $display-large) {
-      font-size: 42px;
-    }
-
-    @media screen and (max-width: $display-medium) {
-      font-size: 36px;
-    }
-
-    @media screen and (max-width: $display-small) {
-      font-size: 5.5vw;
-    }
-  }
-
-  &.big {
-    font-size: 42px;
-
-    @media screen and (max-width: $display-large) {
-      font-size: 37px;
-    }
-
-    @media screen and (max-width: $display-medium) {
-      font-size: 32px;
-    }
-
-    @media screen and (max-width: $display-small) {
-      font-size: 5vw;
-    }
-  }
-
-  &.small {
-    font-size: 30px;
-    font-weight: 300;
-
-    @media screen and (max-width: $display-large) {
-      font-size: 27px;
-    }
-
-    @media screen and (max-width: $display-medium) {
-      font-size: 24px;
-    }
-
-    @media screen and (max-width: $display-small) {
-      font-size: 21px;
-    }
-  }
-
-  &.tiny {
-    font-size: 24px;
-    font-weight: 300;
-
-    @media screen and (max-width: $display-large) {
-      font-size: 22px;
-    }
-
-    @media screen and (max-width: $display-medium) {
-      font-size: 20px;
-    }
-
-    @media screen and (max-width: $display-small) {
-      font-size: 18px;
-    }
-  }
-
-  &.mini {
-    font-size: 18px;
-    font-weight: 300;
-
-    @media screen and (max-width: $display-large) {
-      font-size: 17px;
-    }
-
-    @media screen and (max-width: $display-medium) {
-      font-size: 16px;
-    }
-
-    @media screen and (max-width: $display-small) {
-      font-size: 15px;
-    }
-  }
-}
-
 .elevated {
   @extend .pal-white-90.bg;
   @extend .pal-black-10.box-shadow.deep-15;
@@ -189,115 +83,3 @@
     }
   }
 }
-
-.row {
-  max-width: calc(100% + #{2 * $padding-base});
-  margin: -$padding-base;
-  margin-bottom: $padding-base;
-
-  .col {
-    padding: $padding-base;
-    margin: 0;
-
-    &.inline {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-  }
-
-  &.wide {
-    max-width: calc(100% + #{$padding-base * 4});
-    margin: -#{$padding-base * 2};
-    margin-bottom: #{$padding-base * 2};
-
-    .col {
-      padding: #{$padding-base * 2};
-
-      &.inline {
-        padding-top: 0;
-        padding-bottom: 0;
-      }
-    }
-  }
-
-  &.compact {
-    max-width: calc(100% + #{$padding-base});
-    margin: -#{$padding-base / 2};
-    margin-bottom: #{$padding-base / 2};
-
-    .col {
-      padding: #{$padding-base / 2};
-
-      &.inline {
-        padding-top: 0;
-        padding-bottom: 0;
-      }
-    }
-  }
-
-  @media only screen and (max-width: $display-small) {
-    &, &.compact, &.wide {
-      max-width: calc(100% + #{$padding-base / 2});
-      margin: -#{$padding-base / 4};
-      margin-bottom: #{$padding-base / 4};
-
-      .col {
-        padding: #{$padding-base / 4};
-
-        &.inline {
-          padding-top: 0;
-          padding-bottom: 0;
-        }
-      }
-    }
-  }
-}
-
-.container {
-  width: $container-large-desktop;
-  margin: auto;
-
-  @media screen and (max-width: $display-extra-large) {
-    width: $container-desktop;
-  }
-
-  @media screen and (max-width: $display-large) {
-    width: $container-tablet;
-  }
-
-  @media screen and (max-width: $display-medium) {
-    width: auto;
-    margin: auto 10px;
-  }
-
-  &.fluid {
-    width: auto;
-    margin: auto 80px;
-
-    &.wide {
-      margin: auto 200px;
-    }
-
-    @media screen and (max-width: $display-large) {
-      &.center-mobile {
-        text-align: center;
-      }
-
-      margin: auto 40px;
-      &.wide {
-        margin: auto 100px;
-      }
-    }
-
-    @media screen and (max-width: $display-medium) {
-      &.center-mobile {
-        text-align: center;
-      }
-
-      margin: auto 10px;
-      &.wide {
-        margin: auto 20px;
-      }
-    }
-  }
-}