Giga components migration

.gitmodules

@@ -0,0 +1,4 @@
+[submodule "pos-vue-framework"]
+	path = pos-vue-framework
+	url = git@github.com:gigasource/pos-vue-framework.git
+	branch = master

.storybook/config.js

@@ -14,7 +14,6 @@ addParameters({
 
 Vue.use(VueRouter);
 Vue.use(VueCompositionAPI);
-import '../src/plugins/vuetify';
 
 import {
   storiesOf, specs, describe, it,

babel.config.js

@@ -1,9 +1,7 @@
 module.exports = {
   presets: [
     'vca-jsx',
-    ['@vue/app',
-      {
-        "useBuiltIns": "entry"
-      }]
+    "@babel/preset-env",
+    ['@vue/app', { "useBuiltIns": "entry" }],
   ]
 }

jest.config.js

@@ -0,0 +1,19 @@
+const { defaults } = require('jest-config');
+
+module.exports = {
+  verbose: true,
+  preset: defaults.preset,
+  testMatch: [ "**/test/jest/**/*.test.js", ],
+  moduleFileExtensions: [
+    "js",
+    "json",
+    "vue",
+  ],
+  transform: {
+    ".*\\.(vue)$": "vue-jest",
+    ".*\\.(js)$": "babel-jest",
+  },
+  moduleNameMapper: {
+    '\\.(css|scss)$': '<rootDir>/test/jest/jest-style-mock.js',
+  }
+}

package.json

@@ -7,10 +7,11 @@
     "build": "vue-cli-service build --target lib --name GForm src/main.js",
     "build:storybook": "vue-cli-service build:storybook -c config/storybook",
     "serve:storybook": "vue-cli-service serve:storybook -p 8080 -c config/storybook",
-    "storybook": "start-storybook -p 8000"
+    "storybook": "start-storybook -p 8000",
+    "jest": "jest"
   },
   "module": "src/main.js",
-  "main": "dist/GForm.common.js",
+  "main": "src/main.js",
   "peerDependencies": {
     "bootstrap": "^4.1.3",
     "lodash": "latest",
@@ -47,7 +48,7 @@
     "@vue/babel-preset-jsx": "^1.1.0",
     "@vue/cli-plugin-babel": "3.11.0",
     "@vue/composition-api": "0.3.2",
-    "@vue/test-utils": "^1.0.0-beta.29",
+    "@vue/test-utils": "^1.1.2",
     "autoprefixer": "^9.6.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "10.0.3",
@@ -77,6 +78,7 @@
     "material-design-icons-iconfont": "^4.0.2",
     "node-sass": "^4.9.0",
     "nodemon": "^1.19.3",
+    "pos-vue-framework": "file:pos-vue-framework",
     "prettier": "^1.18.2",
     "resolve-url-loader": "^3.1.0",
     "roboto-fontface": "^0.10.0",
@@ -93,8 +95,7 @@
     "vue-loader": "^15.7.1",
     "vue-router": "^3.1.3",
     "vue-template-compiler": "^2.6.10",
-    "vue-the-mask": "^0.11.1",
-    "vuetify": "^1.3.12"
+    "vue-the-mask": "^0.11.1"
   },
   "postcss": {
     "plugins": {

src/components/ChoiceArrayHandler.js

@@ -1,5 +1,5 @@
 import { _fields, getChoiceName, getLabel, getValueFromPathFactory } from './utils';
-import { upperFirst, filter, values, assign, cloneDeep, map, get, set, isNil, isEmpty } from 'lodash-es';
+import { upperFirst, filter, values, assign, cloneDeep, map, get, set, isNil, isEmpty } from 'lodash';
 
 const _ = { upperFirst, filter, values, assign, cloneDeep, map, get, set, isNil, isEmpty };
 

src/components/ChoiceHandler.js

@@ -1,5 +1,5 @@
 import { _fields, getChoiceName, getLabel, getFields } from './utils';
-import { upperFirst, filter, values, assign, cloneDeep, map, get, set, isNil, isEmpty } from 'lodash-es';
+import { upperFirst, filter, values, assign, cloneDeep, map, get, set, isNil, isEmpty } from 'lodash';
 
 const _ = { upperFirst, filter, values, assign, cloneDeep, map, get, set, isNil, isEmpty };
 import { reactive, set as vSet, ref } from '@vue/composition-api';

src/components/GField.vue

@@ -23,7 +23,7 @@
   import ObjectArrayHandler from './ObjectArrayHandler';
   import { _fields, genField, getChoiceName, getLabel, getValueFromPathFactory, makeAddable } from './utils';
   import ChoiceHandler from './ChoiceHandler';
-  import { upperFirst, filter, values, assign, cloneDeep, map, get, set, isNil, isEmpty } from 'lodash-es';
+  import { upperFirst, filter, values, assign, cloneDeep, map, get, set, isNil, isEmpty } from 'lodash';
   import ChoiceArrayHandler from './ChoiceArrayHandler';
   import TableArrayHandler from './TableArrayHandler';
   import ObjectHandler from './ObjectHandler';

src/components/GFieldOld.vue

@@ -188,7 +188,7 @@
 
 <script>
   import { Fragment } from 'vue-fragment';
-  import { upperFirst, filter, values, assign, cloneDeep, map } from 'lodash-es';
+  import { upperFirst, filter, values, assign, cloneDeep, map } from 'lodash';
 
   const _ = { upperFirst, filter, values, assign, cloneDeep, map };
 

src/components/GInput.vue

@@ -45,7 +45,7 @@
 <script>
   //not required but this baseField has a lot of useful stuff already in it, check it out
   import { Fragment } from 'vue-fragment';
-  import { upperFirst, get } from 'lodash-es';
+  import { upperFirst, get } from 'lodash';
   import { VFlex, VSwitch, VSelect, VTextField, VIcon } from 'vuetify/lib';
   import dayjs from 'dayjs'
 

src/components/GTreeFactory.js

@@ -1,6 +1,6 @@
 import { reactive, set, computed } from '@vue/composition-api'
 import traverse from 'traverse'
-import { upperFirst, filter, values, assign, cloneDeep, map, get, set as lodashSet } from 'lodash-es';
+import { upperFirst, filter, values, assign, cloneDeep, map, get, set as lodashSet } from 'lodash';
 
 const _ = { upperFirst, filter, values, assign, cloneDeep, map, get, set: lodashSet };
 

src/components/ObjectArrayHandler.js

@@ -1,5 +1,5 @@
 import { getLabel, getValueFromPathFactory } from './utils';
-import { upperFirst, filter, values, assign, cloneDeep, map, get, set, isNil, isEmpty } from 'lodash-es';
+import { upperFirst, filter, values, assign, cloneDeep, map, get, set, isNil, isEmpty } from 'lodash';
 
 const _ = { upperFirst, filter, values, assign, cloneDeep, map, get, set, isNil, isEmpty };
 

src/components/ObjectHandler.js

@@ -1,5 +1,5 @@
 import { getLabel, getValueFromPathFactory, makeAddable, getFields } from './utils';
-import { upperFirst, filter, values, assign, cloneDeep, map, get, set, isNil, isEmpty } from 'lodash-es';
+import { upperFirst, filter, values, assign, cloneDeep, map, get, set, isNil, isEmpty } from 'lodash';
 
 const _ = { upperFirst, filter, values, assign, cloneDeep, map, get, set, isNil, isEmpty };
 

src/components/SimpleArrayHandler.js

@@ -1,5 +1,5 @@
 import { getLabel, getValueFromPathFactory } from './utils';
-import { upperFirst, filter, values, assign, cloneDeep, map, get, set, isNil, isEmpty } from 'lodash-es';
+import { upperFirst, filter, values, assign, cloneDeep, map, get, set, isNil, isEmpty } from 'lodash';
 
 const _ = { upperFirst, filter, values, assign, cloneDeep, map, get, set, isNil, isEmpty };
 

src/components/TableArrayHandler.js

@@ -1,5 +1,5 @@
 import { genField, getLabel, getValueFromPathFactory } from './utils';
-import { upperFirst, filter, values, assign, cloneDeep, map, get, set, isNil, isEmpty } from 'lodash-es';
+import { upperFirst, filter, values, assign, cloneDeep, map, get, set, isNil, isEmpty } from 'lodash';
 import Vue from 'vue';
 import { reactive, set as vSet, ref } from '@vue/composition-api';
 

src/components/utils.js

@@ -1,4 +1,4 @@
-import { upperFirst, filter, values, assign, cloneDeep, map, get, set, isNil, isEmpty } from 'lodash-es';
+import { upperFirst, filter, values, assign, cloneDeep, map, get, set, isNil, isEmpty } from 'lodash';
 import { reactive, set as vSet, ref } from '@vue/composition-api';
 
 const _ = { upperFirst, filter, values, assign, cloneDeep, map, get, set, isNil, isEmpty };

src/form/FormFactory.js

@@ -1,12 +1,12 @@
-import { computed } from '@vue/composition-api';
+import {computed} from '@vue/composition-api';
 
 export const _modelFactory = (props) => computed(() => {
   if (typeof props.field.key !== 'undefined') return props.model[props.field.key];
   return props.model;
 });
 
 export const flexFactory = (props) => computed(() => {
-  return props.noLayout ? 'xs12' : props.field.flex;
+  return props.noLayout ? 'xs-12' : props.field.flex;
 });
 
 export const _rootModelFactory = (props) => computed(() => {

src/form/GField.vue

@@ -1,85 +1,93 @@
 <template>
-	<v-tabs style="width: 100%" v-if="tabs" :class="{'tab-wrapper': fillHeight}">
-		<v-tab v-for="tab in getTabs()" :key="tab.name">{{tab.name}}</v-tab>
-		<v-tab-item v-for="tab in getTabs()" :key="tab.name" style="padding-top: 20px;">
-			<g-field :fields="tab.fields" :model="model" :path="path" :no-layout="noLayout"
-							 :fill-height="fillHeight" :rootModel="_rootModel"/>
-		</v-tab-item>
-		<slot name="tab-append"></slot>
-	</v-tabs>
+  <g-field :path="path" v-if="metadata" :fields="resolveMetadata()" :model="model" :no-layout="noLayout"/>
 
-	<v-layout row wrap :fill-height="fillHeight" v-else-if="fields">
-		<g-field v-for="(_field, index) in getFormFields()" :key="_field.key + index"
-						 :path="path"
-						 :field="_field" :model="model" :rootModel="_rootModel" :no-layout="noLayout"
-						 v-show="isVisible(_field)"/>
-		<v-flex xs12>
-			<v-chip v-for="(addField, index) in getAddFields()" v-show="isVisible(addField)" :key="addField.key + index"
-							color="#4dd8a7" text-color="white" @click="addNullValue(addField)">
-				<v-avatar>
-					<v-icon>add_circle</v-icon>
-				</v-avatar>
-				{{addField.label || addField.key}}
-			</v-chip>
-		</v-flex>
-	</v-layout>
+  <g-tabs slider-color="primary" style="width: 100%" v-else-if="tabs" :items="Object.keys(getTabs())"
+          :class="{'tab-wrapper': fillHeight}"
+          v-model="activeTab">
+    <template #tabs>
+      <g-tab v-for="(tab, index) in getTabs()" :item="`${index}`" :key="tab.name">{{tab.name}}</g-tab>
+    </template>
+    <template #default>
+      <g-tab-item class="pt-3" v-for="(tab, index) in getTabs()" :key="tab.name" :item="`${index}`">
+        <g-field :fields="tab.fields" :model="model" :path="path" :no-layout="noLayout" :fill-height="fillHeight"
+                 :rootModel="_rootModel"/>
+      </g-tab-item>
+      <slot name="tab-append"></slot>
+    </template>
+  </g-tabs>
 
-	<!--todo: object navigate-->
-	<component v-else :is="type" v-on="$listeners"
-						 :rootModel="_rootModel" :path="path"
-						 :model="model" :field="field" :in-array="inArray" :no-layout="noLayout">
-		<slot v-for="slot in Object.keys($slots)" :name="slot" :slot="slot"/>
-	</component>
+  <g-row no-gutters :class="fillHeight ? 'fill-height' : ''" v-else-if="fields">
+    <g-field v-for="(_field, index) in getFormFields()" :key="'field_' + _field.key + '_' + index"
+             :path="path"
+             :field="_field" :model="model" :rootModel="_rootModel" :no-layout="noLayout"
+             v-show="isVisible(_field)"/>
+    <g-col xs12>
+      <g-chip v-for="(addField, index) in getAddFields()" v-show="isVisible(addField)" :key="addField.key + index"
+              backgroundColor="#e5efff" textColor="primary" @click="addNullValue(addField)">
+        <g-avatar class="g-avatar__left">
+          <g-icon color="primary">add_circle</g-icon>
+        </g-avatar>
+        {{addField.label || addField.key}}
+      </g-chip>
+    </g-col>
+  </g-row>
+
+  <!--todo: object navigate-->
+  <component v-else :is="type" v-on="$listeners"
+             :rootModel="_rootModel" :path="path"
+             :model="model" :field="field" :in-array="inArray" :no-layout="noLayout" :fields="fields">
+    <slot v-for="slot in Object.keys($slots)" :name="slot" :slot="slot"/>
+  </component>
 </template>
 
 <script>
-  import { Fragment } from 'vue-fragment';
-  import { upperFirst, filter, values, assign, cloneDeep, map } from 'lodash-es';
+  import {Fragment} from 'vue-fragment';
+  import {upperFirst, filter, values, assign, cloneDeep, map} from 'lodash';
+  import Vue from 'vue';
 
-  const _ = { upperFirst, filter, values, assign, cloneDeep, map };
+  const _ = {upperFirst, filter, values, assign, cloneDeep, map};
 
   import {
-    VTabs,
-    VTab,
-    VTabItem,
-    VLayout,
-    VFlex,
-    VMenu,
-    VBtn,
-    VList,
-    VListTile,
-    VListTileTitle,
-    VIcon,
-    VExpandTransition
-  } from 'vuetify/lib';
-  import Vue from 'vue';
-  import { _modelFactory, _rootModelFactory, addObjectItem, flexFactory, genPath, getLabel, labelFactory } from './FormFactory';
+    _modelFactory,
+    _rootModelFactory,
+    flexFactory,
+    genPath,
+    getLabel,
+    labelFactory
+  } from './FormFactory';
 
   export default {
     components: {
-      Fragment, VTabs, VTab, VTabItem, VLayout, VFlex,
-      VMenu, VBtn, VList, VListTile, VListTileTitle, VIcon
+      Fragment,
     },
     name: 'GField',
     props: {
       model: null,
       rootModel: null,
       path: String,
+      metadata: null,
       fields: Array,
       field: Object,
       tabs: null,
       inArray: Boolean,
       noLayout: Boolean,
       domain: String,
       fillHeight: Boolean,
+      collapseStates: Object,
+      preprocess: [Boolean, String]
+    },
+    data() {
+      return {
+        activeTab: '0',
+      }
     },
     domain: ':domain',
     setup(props, context) {
       const _model = _modelFactory(props);
-      const flex = flexFactory(props)
+      const flex = flexFactory(props);
       const label = labelFactory(props);
       const _rootModel = _rootModelFactory(props);
-      return { _model, flex, label, getLabel, _rootModel }
+      return {_model, flex, label, getLabel, _rootModel}
     },
     computed: {
       type() {
@@ -94,18 +102,14 @@
       getFormFields() {
         return this.fields.filter(f => {
           if (!f.addable) return true;
-          if (typeof this.model[f.key] === 'undefined') return false;
-          return true;
+          return typeof this.model[f.key] !== 'undefined';
         })
       },
       getAddFields() {
         return this.fields.filter(f => {
           if (!f.addable) return false;
           if (typeof this.model[f.key] === 'undefined') return true;
-          if (f.type.includes('array') || f.type.includes('Array')) {
-            return true;
-          }
-          return false;
+          return !!(f.type.includes('array') || f.type.includes('Array'));
         })
       },
       addNullValue(field) {
@@ -120,8 +124,8 @@
       },
       getTabs() {
         const basic = _.filter(this.fields, f => ![].concat(..._.values(this.tabs)).includes(f.key)).map(f => f.key);
-        return _.map(_.assign({}, basic.length > 0 ? { basic } : {}, this.tabs), (tabFields, name) => {
-          return { name, fields: _.filter(this.fields, f => tabFields.includes(f.key)) };
+        return _.map(_.assign({}, basic.length > 0 ? {basic} : {}, this.tabs), (tabFields, name) => {
+          return {name, fields: _.filter(this.fields, f => tabFields.includes(f.key))};
         });
       },
       isVisible(field) {
@@ -138,6 +142,14 @@
             this.$set(this.model, field.key);
           }
         }
+      },
+      resolveMetadata() {
+        const preprocess = this.preprocess;
+        let result = this.fields;
+        if (preprocess) {
+          result = Vue.$gform.preprocess[typeof preprocess === 'string' ? preprocess : 'normalize'](this.metadata, result);
+        }
+        return result;
       }
     },
     created() {
@@ -149,3 +161,8 @@
     },
   };
 </script>
+<style scoped lang="scss">
+  ::v-deep .g-tab-items {
+    overflow: visible;
+  }
+</style>