@tripup-company/element-ui-extended 0.0.52 → 0.0.55

package/dist/src/index.d.ts

@@ -1,3 +1,4 @@
+import "./styles/index.scss";
 export { default as CompositeTable } from "./components/CompositeTable/index.vue";
 export { default as GenericFilters } from "./components/GenericFilters/index.vue";
 export { default as FilterRow } from "./components/GenericFilters/FilterRow.vue";

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,mDAAmD,CAAC;AACjG,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4CAA4C,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,mDAAmD,CAAC;AACjG,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4CAA4C,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/src/models/meta-model.d.ts

@@ -1,6 +1,6 @@
-import { Meta } from "../types/meta";
+import { Meta } from "@/types/meta";
 import BaseModel from "./base-model";
-import { Pagination } from "../types/pagination";
+import { Pagination } from "@/types/pagination";
 export default class MetaModel extends BaseModel implements Meta {
     include: [];
     custom: [];

package/dist/src/models/meta-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta-model.d.ts","sourceRoot":"","sources":["../../../src/models/meta-model.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,SAAU,YAAW,IAAI;IAC9D,OAAO,EAAE,EAAE,CAAC;IACZ,MAAM,EAAE,EAAE,CAAC;IACX,UAAU,EAAE,UAAU,CAAC;gBAEX,IAAI,QAAK;CAGtB"}
+{"version":3,"file":"meta-model.d.ts","sourceRoot":"","sources":["../../../src/models/meta-model.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,SAAU,YAAW,IAAI;IAC9D,OAAO,EAAE,EAAE,CAAC;IACZ,MAAM,EAAE,EAAE,CAAC;IACX,UAAU,EAAE,UAAU,CAAC;gBAEX,IAAI,QAAK;CAGtB"}

package/dist/src/repositories/base-repository.d.ts

@@ -1,7 +1,7 @@
 import { Write } from "./contracts/write";
 import { Read } from "./contracts/read";
-import { Collection } from "../types/collection";
-import { AxiosInstance } from "../types/axiosInterface";
+import { Collection } from "@/types/collection";
+import { AxiosInstance } from "@/types/axiosInterface";
 export default abstract class BaseRepository<T> implements Write<T>, Read<T> {
     protected baseUrl: string;
     protected request: AxiosInstance;

package/dist/src/repositories/base-repository.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-repository.d.ts","sourceRoot":"","sources":["../../../src/repositories/base-repository.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,cAAc,CAAC,CAAC,CAAE,YAAW,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;IAC1E,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,OAAO,EAAE,aAAa,CAAC;gBAErB,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa;IAKrE,OAAO,CAAC,IAAI,EAAE,GAAG,GAAG,CAAC;IAIrB,iBAAiB,CAAC,IAAI,EAAE,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC;IAS3C,MAAM,CAAC,IAAI,EAAE,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC;IAc3B,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,SAAO,GAAG,OAAO,CAAC,CAAC,CAAC;IAgBvD,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC;IAepC,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,SAAO,GAAG,OAAO,CAAC,CAAC,CAAC;IAe/C,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,SAAO,EAAE,MAAM,SAAK,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;CAexE"}
+{"version":3,"file":"base-repository.d.ts","sourceRoot":"","sources":["../../../src/repositories/base-repository.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEvD,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,cAAc,CAAC,CAAC,CAAE,YAAW,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;IAC1E,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,OAAO,EAAE,aAAa,CAAC;gBAErB,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa;IAKrE,OAAO,CAAC,IAAI,EAAE,GAAG,GAAG,CAAC;IAIrB,iBAAiB,CAAC,IAAI,EAAE,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC;IAS3C,MAAM,CAAC,IAAI,EAAE,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC;IAc3B,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,SAAO,GAAG,OAAO,CAAC,CAAC,CAAC;IAgBvD,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC;IAepC,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,SAAO,GAAG,OAAO,CAAC,CAAC,CAAC;IAe/C,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,SAAO,EAAE,MAAM,SAAK,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;CAexE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tripup-company/element-ui-extended",
-  "version": "0.0.52",
+  "version": "0.0.55",
   "main": "./dist/element-ui-extended.umd.js",
   "scripts": {
     "serve": "vue-cli-service serve && tsc --emitDeclarationOnly",
@@ -57,8 +57,7 @@
     "src/repositories/*",
     "src/lang/*",
     "src/types/*",
-    "src/filters.js",
-    "src/filters-top.js"
+    "src/styles/*"
   ],
   "typings": "./dist/src/index.d.ts",
   "description": "## Project setup ``` npm install ```",

package/src/components/CompositeTable/index.vue

@@ -62,14 +62,14 @@
 
 <script>
 import Vue from "vue";
-import GenericFilter from "../GenericFilters/index";
-import GenericPaginator from "../GenericPaginator";
+import GenericFilter from "@/components/GenericFilters/index";
+import GenericPaginator from "@/components/GenericPaginator";
 import GenericTable from "@/components/GenericTable";
 import ListQueryService from "@/services/list-query-service";
 import LocalStorageService from "@/services/local-storage-service";
 import MetaModel from "@/models/meta-model";
 import QuickSearchFilter from "@/components/GenericFilters/QuickSearchFilter";
-import FilterConverter from "../GenericFilters/filter-convertor";
+import FilterConverter from "@/components/GenericFilters/filter-convertor";
 export default {
   components: {
     QuickSearchFilter,

package/src/components/CreateForm/index.vue

@@ -41,8 +41,8 @@
 
 <script>
 import getResolution from "@/services/resolutions";
-import NewColumn from "../PartColumn/NewColumn";
-import BaseModel from '../../models/base-model';
+import NewColumn from "@/components/PartColumn/NewColumn";
+import BaseModel from '@/models/base-model';
 export default {
   name: "CreateForm",
   components: { NewColumn },

package/src/components/PartColumn/NewColumn.vue

@@ -34,8 +34,8 @@
 <script>
 
 import Vue from 'vue';
-import getResolution from '../../services/resolutions';
-import NewField from '../NewField';
+import getResolution from "@/services/resolutions";
+import NewField from "@/components/NewField";
 import lodash from "lodash";
 const _ = lodash;
 export default {

package/src/components/PartForm/index.vue

@@ -12,23 +12,23 @@
   </el-row>
 </template>
 <script>
-import getResolution from '../../services/resolutions';
+import getResolution from "@/services/resolutions";
 
 export default {
-  name: 'PartForm',
+  name: "PartForm",
   props: {
     header: {
       type: String,
-      default: '',
+      default: "",
     },
     bodyStyle: {
       type: String,
-      default: '',
+      default: "",
     },
     rowResolution: {
       type: Object,
-      default: function() {
-        return getResolution('fullFromSm');
+      default: function () {
+        return getResolution("fullFromSm");
       },
     },
   },

package/src/components/UpdateForm/index.vue

@@ -10,18 +10,21 @@
     <el-card class="m-b-20" shadow="always">
       <div slot="header" class="clearfix">
         <el-row type="flex" justify="space-between">
-        <el-col class="flex align-center justify-start" :span="6">
-          <h3 class="m-b-0">{{ formLocal.object }} view</h3>
-        </el-col>
-        <el-col class="flex align-center justify-end is-justify-end el-row--flex" :span="6">
-          <slot name="actions" />
-          <el-button
+          <el-col class="flex align-center justify-start" :span="6">
+            <h3 class="m-b-0">{{ formLocal.object }} view</h3>
+          </el-col>
+          <el-col
+            class="flex align-center justify-end is-justify-end el-row--flex"
+            :span="6"
+          >
+            <slot name="actions" />
+            <el-button
               class="delete-icon pull-right"
               icon="el-icon-delete"
               size="mini"
               @click="deleteModel"
-          />
-        </el-col>
+            />
+          </el-col>
         </el-row>
       </div>
       <el-row :gutter="20">
@@ -47,17 +50,17 @@
 </template>
 
 <script>
-import getResolution from '../../services/resolutions';
-import BaseModel from '../../models/base-model';
-import PartForm from '../PartForm';
-import EditColumn from '../PartColumn/EditColumn';
+import getResolution from "@/services/resolutions";
+import BaseModel from "@/models/base-model";
+import PartForm from "@/components/PartForm";
+import EditColumn from "@/components/PartColumn/EditColumn";
 
 export default {
-  name: 'UpdateForm',
+  name: "UpdateForm",
   components: { PartForm, EditColumn },
   provide() {
     const data = {};
-    ['loading'].forEach((key) => {
+    ["loading"].forEach((key) => {
       Object.defineProperty(data, key, {
         enumerable: true,
         get: () => this[key],
@@ -79,7 +82,7 @@ export default {
       default: () => {
         return {
           rules: null,
-        }
+        };
       },
     },
     errors: {
@@ -91,7 +94,7 @@ export default {
   },
   data() {
     return {
-      colResolutionLg: getResolution('fullResolution'),
+      colResolutionLg: getResolution("fullResolution"),
     };
   },
   computed: {
@@ -100,38 +103,40 @@ export default {
         return this.form;
       },
       set(value) {
-        this.$emit('update:form', this.form);
+        this.$emit("update:form", this.form);
       },
     },
   },
   methods: {
     updateValue(data) {
-      this.$refs['form'].validateField(data.field, (invalid) => {
+      this.$refs["form"].validateField(data.field, (invalid) => {
         if (!invalid) {
-          this.$refs['form'].clearValidate();
-          this.$emit('save:value', data);
+          this.$refs["form"].clearValidate();
+          this.$emit("save:value", data);
         } else {
-          this.$message.error('Validation error');
+          this.$message.error("Validation error");
         }
       });
     },
-    deleteModel(){
-      this.$confirm('This will permanently delete data. Continue?', 'Warning', {
-        confirmButtonText: 'OK',
-        cancelButtonText: 'Cancel',
-        type: 'warning',
-      }).then(() => {
-        this.$message({
-          type: 'success',
-          message: 'Delete completed',
-        });
-        this.$emit('delete:model');
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: 'Delete canceled',
+    deleteModel() {
+      this.$confirm("This will permanently delete data. Continue?", "Warning", {
+        confirmButtonText: "OK",
+        cancelButtonText: "Cancel",
+        type: "warning",
+      })
+        .then(() => {
+          this.$message({
+            type: "success",
+            message: "Delete completed",
+          });
+          this.$emit("delete:model");
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "Delete canceled",
+          });
         });
-      });
     },
   },
 };

package/src/models/meta-model.ts

@@ -1,6 +1,6 @@
-import { Meta } from "../types/meta";
+import { Meta } from "@/types/meta";
 import BaseModel from "./base-model";
-import { Pagination } from "../types/pagination";
+import { Pagination } from "@/types/pagination";
 
 export default class MetaModel extends BaseModel implements Meta {
   include: [];

package/src/repositories/base-repository.ts

@@ -1,8 +1,8 @@
 import { Write } from "./contracts/write";
 import { Read } from "./contracts/read";
-import { Collection } from "../types/collection";
+import { Collection } from "@/types/collection";
 
-import { AxiosInstance } from "../types/axiosInterface";
+import { AxiosInstance } from "@/types/axiosInterface";
 
 export default abstract class BaseRepository<T> implements Write<T>, Read<T> {
   protected baseUrl: string;
@@ -28,7 +28,7 @@ export default abstract class BaseRepository<T> implements Write<T>, Read<T> {
   
   create(item: T): Promise<T> {
     return new Promise<T>((resolve, reject) => {
-      this.request.$request({
+      this.request.request({
         url: this.baseUrl,
         method: 'post',
         data: item,
@@ -42,7 +42,7 @@ export default abstract class BaseRepository<T> implements Write<T>, Read<T> {
 
   update(id: string, item: T, include = "--"): Promise<T> {
     return new Promise<T>((resolve, reject) => {
-      this.request.$request({
+      this.request.request({
         url: this.baseUrl + "/" + id + "?include=" + include,
         method: "patch",
         data: item,
@@ -58,7 +58,7 @@ export default abstract class BaseRepository<T> implements Write<T>, Read<T> {
 
   delete(id: string): Promise<boolean> {
     return new Promise<boolean>((resolve, reject) => {
-      this.request.$request({
+      this.request.request({
         url: this.baseUrl + "/" + id,
         method: "delete",
       })
@@ -73,7 +73,7 @@ export default abstract class BaseRepository<T> implements Write<T>, Read<T> {
 
   findOne(id: string, include = "--"): Promise<T> {
     return new Promise<T>((resolve, reject) => {
-      this.request.$request({
+      this.request.request({
         url: this.baseUrl + "/" + id + "?include=" + include,
         method: "get",
       })
@@ -88,7 +88,7 @@ export default abstract class BaseRepository<T> implements Write<T>, Read<T> {
 
   all(query: string, include = "--", filter = ""): Promise<Collection<T>> {
     return new Promise<Collection<T>>((resolve, reject) => {
-      this.request.$request({
+      this.request.request({
         url: this.baseUrl + "?include=" + include + (filter === "" ? '' : ('&selectFilter=' + filter)),
         method: "get",
         params: query,

package/src/styles/editable-field-component.scss

@@ -0,0 +1,74 @@
+.editable-cell {
+  .el-input {
+    &__suffix {
+      right: 63px;
+    }
+  }
+  &__input {
+    float: left;
+    margin-right: 5px;
+  }
+
+  &__actions {
+    position: absolute;
+    z-index: 1000;
+    width: 60px;
+    right: 0;
+    top: 4px;
+  }
+
+  &__editor {
+    .el-checkbox {
+      margin-left: 16px;
+    }
+  }
+  &__text {
+    overflow: auto;
+    border: 1px solid transparent;
+    -webkit-appearance: none;
+    background-color: #FFFFFF;
+    color: #606266;
+    display: inline-block;
+    font-size: inherit;
+    max-height: 102px;
+    line-height: 34px;
+    outline: none;
+    padding: 0 15px;
+    width: 100%;
+
+    .edit-icon {
+      visibility: hidden;
+      margin: 3px 3px 3px 0;
+      position: absolute;
+      right: 0;
+    }
+
+    &__slot {
+      height: 34px;
+    }
+
+
+
+    &:hover {
+      background-color: #f5f7fa;
+      background-image: none;
+      border-radius: 4px;
+      border: 1px solid #DCDFE6;
+      box-sizing: border-box;
+
+      .edit-icon {
+        visibility: visible;
+        margin: 3px 3px 3px 0;
+        position: absolute;
+        right: 0;
+      }
+    }
+  }
+}
+.editable-cell.new-field {
+  .el-input {
+    &__suffix {
+      right: 3px;
+    }
+  }
+}

package/src/styles/index.scss

@@ -0,0 +1,218 @@
+@import "variables";
+@import 'spacing';
+@import 'editable-field-component';
+
+body {
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+  font-weight: 700;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+#app {
+  height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+.no-padding {
+  padding: 0px !important;
+}
+
+.padding-content {
+  padding: 4px 0;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
+
+.fr {
+  float: right;
+}
+
+.fl {
+  float: left;
+}
+
+.pr-5 {
+  padding-right: 5px;
+}
+
+.pl-5 {
+  padding-left: 5px;
+}
+
+.block {
+  display: block;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.inlineBlock {
+  display: block;
+}
+
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+
+code {
+  background: #eef1f6;
+  padding: 15px 16px;
+  margin-bottom: 20px;
+  display: block;
+  line-height: 36px;
+  font-size: 15px;
+  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
+
+  a {
+    color: #337ab7;
+    cursor: pointer;
+
+    &:hover {
+      color: rgb(32, 160, 255);
+    }
+  }
+}
+
+.warn-content {
+  background: rgba(66, 185, 131, .1);
+  border-radius: 2px;
+  padding: 1rem;
+  line-height: 1.6rem;
+  word-spacing: .05rem;
+
+  a {
+    color: #42b983;
+    font-weight: 600;
+  }
+}
+@media (min-width: $sm){
+  .app-container {
+    padding: 20px;
+  }
+}
+
+.components-container {
+  margin: 30px 50px;
+  position: relative;
+}
+
+.pagination-container {
+  margin-top: 30px;
+}
+
+.text-center {
+  text-align: center
+}
+
+.sub-navbar {
+  height: 50px;
+  line-height: 50px;
+  position: relative;
+  width: 100%;
+  text-align: right;
+  padding-right: 20px;
+  transition: 600ms ease position;
+  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
+
+  .subtitle {
+    font-size: 20px;
+    color: #fff;
+  }
+
+  &.draft {
+    background: #d0d0d0;
+  }
+
+  &.deleted {
+    background: #d0d0d0;
+  }
+}
+
+.link-type,
+.link-type:focus {
+  color: #337ab7;
+  cursor: pointer;
+
+  &:hover {
+    color: rgb(32, 160, 255);
+  }
+}
+
+.filter-container {
+  padding-bottom: 10px;
+
+  .filter-item {
+    display: inline-block;
+    vertical-align: middle;
+    margin-bottom: 10px;
+  }
+}
+
+//refine vue-multiselect plugin
+.multiselect {
+  line-height: 16px;
+}
+
+.multiselect--active {
+  z-index: 1000 !important;
+}
+.el-date-transparent {
+  margin-left: -15px;
+  input {
+    border: none !important;
+    background: transparent !important;
+  }
+}
+
+#app .hideSidebar .nav-icon {
+  margin-left: 20px;
+}
+
+.form-item-min-margin {
+  /*.el-form-item {
+    margin-bottom: 0px;
+  }*/
+   .el-textarea__inner {
+     line-height: 36px;
+     margin-bottom: 10px;
+   }
+}

package/src/styles/spacing.scss

@@ -0,0 +1,39 @@
+/*
+This .scss loop will create "margin helpers" and "padding helpers" for use in your web projects.
+It will generate several classes such as:
+.m-r-10 which gives margin-right 10 pixels.
+.m-r-15 gives MARGIN to the RIGHT 15 pixels.
+.m-t-15 gives MARGIN to the TOP 15 pixels and so on.
+.p-b-5 gives PADDING to the BOTTOM of 5 pixels
+.p-l-40 gives PADDING to the LEFT of 40 pixels
+The first letter is "m" or "p" for MARGIN or PADDING
+Second letter is "t", "b", "l", or "r" for TOP, BOTTOM, LEFT, or RIGHT
+Third letter is the number of spacing in pixels. Adjust the amounts generated by editing the $spaceamounts variable below.
+*/
+
+$spaceamounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100); // Adjust this to include the pixel amounts you need.
+$sides: (top, bottom, left, right); // Leave this variable alone
+
+@each $space in $spaceamounts {
+    @each $side in $sides {
+        .m-#{str-slice($side, 0, 1)}-#{$space} {
+            margin-#{$side}: #{$space}px !important;
+        }
+
+        .p-#{str-slice($side, 0, 1)}-#{$space} {
+            padding-#{$side}: #{$space}px !important;
+        }
+    }
+}
+
+.m-w-1200 {
+  max-width: 1200px;
+}
+
+.w-300 {
+  width: 300px;
+}
+
+.w-100 {
+  width: 100% !important;
+}

package/src/styles/variables.scss

@@ -0,0 +1,4 @@
+$sm: 768px !default;
+$md: 992px !default;
+$lg: 1200px !default;
+$xl: 1920px !default;