feat: spa

.travis.yml

@@ -15,7 +15,7 @@ script:
 jobs:
   include:
   - stage: Lint and Test
-    script: yarn lint && yarn test && yarn test:e2e:headless
+    script: yarn lint && yarn test
   - stage: Pre-release
     if: branch = master
     before_deploy:

babel.config.js

@@ -12,13 +12,13 @@ if (process.env.VUE_CLI_BUILD_TARGET === "app") {
 
 const uiPresets = [
   [
-    '@vue/app',
+    "@vue/app",
     {
       useBuiltIns: false,
       polyfills: false,
-      corejs: 2,
-    },
-  ],
+      corejs: 2
+    }
+  ]
 ];
 
 const presets = mode === "prod" ? uiPresets : appPresets;

demo/pages/menu-popover-default.vue

@@ -14,13 +14,6 @@
   </div>
 </template>
 
-<style scoped>
-.page {
-  margin-top: 100px;
-  margin-left: 100px;
-}
-</style>
-
 <script>
 export default {
   data() {

demo/pages/menu-selection.vue

@@ -1,33 +1,49 @@
 <template>
   <div class="page">
-    <button data-cy-highlight-next @click="highlightNext">Highlight Next</button>
-    <button data-cy-highlight-previous @click="highlightPrevious">Highlight Previous</button>
+    <button data-cy-highlight-next @click="highlightNext">
+      Highlight Next
+    </button>
+    <button data-cy-highlight-previous @click="highlightPrevious">
+      Highlight Previous
+    </button>
     <fd-menu
       highlights-selection
       ref="menu"
       :highlightedUid.sync="highlightedUid"
       :selectedUid.sync="selectedUid"
     >
       <fd-menu-list>
-        <fd-menu-item data-cy-item-a-0 uid="a-id-0" value="a-value-0">a-title-0</fd-menu-item>
-        <fd-menu-item data-cy-item-a-1 uid="a-id-1" value="a-value-1">a-title-1</fd-menu-item>
-        <fd-menu-item data-cy-item-a-2 uid="a-id-2" value="a-value-2">a-title-2</fd-menu-item>
+        <fd-menu-item data-cy-item-a-0 uid="a-id-0" value="a-value-0"
+          >a-title-0</fd-menu-item
+        >
+        <fd-menu-item data-cy-item-a-1 uid="a-id-1" value="a-value-1"
+          >a-title-1</fd-menu-item
+        >
+        <fd-menu-item data-cy-item-a-2 uid="a-id-2" value="a-value-2"
+          >a-title-2</fd-menu-item
+        >
       </fd-menu-list>
     </fd-menu>
-    <p>highlightedUid: <span data-highlighted-uid>{{highlightedUid}}</span></p>
-    <p>selectedUid: <span data-selected-uid>{{selectedUid}}</span></p>
+    <p>
+      highlightedUid: <span data-highlighted-uid>{{ highlightedUid }}</span>
+    </p>
+    <p>
+      selectedUid: <span data-selected-uid>{{ selectedUid }}</span>
+    </p>
     <label>
       Highlight Uid:
       <input
         data-cy-uid-to-highlight
         type="text"
         v-model="uidToBeHighlighted"
-      >
+      />
     </label>
     <button
       data-cy-perform-highlight
-      @click="highlightedUid=uidToBeHighlighted"
-    >Highlight</button>
+      @click="highlightedUid = uidToBeHighlighted"
+    >
+      Highlight
+    </button>
   </div>
 </template>
 
@@ -46,15 +62,7 @@ export default {
       uidToBeHighlighted: null,
       highlightedUid: null,
       selectedUid: null
-    }
+    };
   }
 };
 </script>
-
-<style scoped>
-.page {
-  margin-top: 100px;
-  margin-left: 100px;
-  margin-right: 100px;
-}
-</style>

package.json

@@ -20,15 +20,17 @@
     "lint": "vue-cli-service lint --no-fix --max-warnings 0 --max-errors 0 src",
     "bootstrap": "yarn install",
     "build:docs": "cross-env NODE_OPTIONS=--max_old_space_size=8192 node src/tools/index && NODE_ENV=production; NODE_OPTIONS=--max_old_space_size=8192 vue-cli-service build src/docs/index.js",
-    "build:docs:netlify": "yarn build:docs --NETLIFY",
+    "build:docs:netlify": "yarn generate-api && cross-env NODE_ENV=production FDV_SPA=true webpack --progress --hide-modules --NETLIFY",
     "build:ui:dev": "vue-cli-service build --target lib --report --name FundamentalVue src/index.js --mode development",
     "deploy:docs": "yarn build:docs  && gh-pages -d dist",
     "lint:dev": "vue-cli-service lint",
     "lint:pre-commit": "printf \"running pre-commit lint...\"  && yarn lint && printf \"done!\n\"",
     "release": "./scripts/publish-release.sh",
     "release:create": "create-release",
     "std-version": "standard-version -m \"chore(release): version %s build ${TRAVIS_BUILD_NUMBER} [ci skip]\"",
-    "test:watch": "vue-cli-service test:unit --watch"
+    "test:watch": "vue-cli-service test:unit --watch",
+    "spadev": "cross-env NODE_ENV=development FDV_SPA=true webpack-dev-server --open --hot",
+    "spabuild": "cross-env NODE_ENV=production FDV_SPA=true webpack --progress --hide-modules"
   },
   "main": "dist/FundamentalVue.cjs.js",
   "module": "dist/FundamentalVue.esm.js",
@@ -48,11 +50,11 @@
     "popper.js": "^1.15.0"
   },
   "devDependencies": {
+    "prismjs": "^1.16.0",
     "@babel/cli": "^7.4.4",
     "@types/jest": "^24.0.13",
     "@types/webpack": "^4.4.34",
     "@vue/cli-plugin-babel": "^3.8.0",
-    "@vue/cli-plugin-e2e-cypress": "^3.8.0",
     "@vue/cli-plugin-eslint": "^3.8.0",
     "@vue/cli-plugin-unit-jest": "^3.8.0",
     "@vue/cli-service": "^3.8.0",
@@ -74,13 +76,14 @@
     "fundamental-styles": "^0.1.0",
     "gh-pages": "^2.0.1",
     "github-assistant": "^0.3.0",
-    "highlight.js": "^9.15.8",
+    "globby": "^10.0.1",
     "html-loader": "^0.5.5",
     "klaw-sync": "^6.0.0",
     "markdown-it": "^9.0.0",
     "markdown-it-vue": "^1.0.9",
     "markdown-loader": "^5.0.0",
     "pre-commit": "^1.2.2",
+    "prerender-spa-plugin": "^3.4.0",
     "rimraf": "^2.6.3",
     "rollup": "^1.12.5",
     "rollup-plugin-commonjs": "^10.0.0",
@@ -92,7 +95,9 @@
     "vue": "^2.6.10",
     "vue-router": "^3.0.6",
     "vue-template-compiler": "^2.6.10",
-    "vue-virtual-scroller": "^1.0.0-rc.2"
+    "vue-virtual-scroller": "^1.0.0-rc.2",
+    "webpack-chain": "^6.0.0",
+    "webpack-cli": "^3.3.5"
   },
   "peerDependencies": {
     "fundamental-styles": "^0.1.0",

src/components/Form/Controls/Checkbox.vue

@@ -1,18 +1,18 @@
 <template>
   <input
-    type="checkbox"
-    :id="inputId"
     :class="inputClasses"
     :disabled="disabled ? '' : null"
     :checked="checked ? true : false"
     @change="updateInput"
-    :value="value"
     v-on="$listeners"
-    v-bind="$attrs"
+    :value="value"
+    type="checkbox"
   />
 </template>
 
 <script>
+// v-bind="$attrs" -->
+// :id="inputId"
 import { isInputElement } from "./Helper";
 import { withoutDuplicates } from "./../../../util";
 import InputMixin from "./InputMixin";
@@ -21,7 +21,7 @@ import { $modelValueWithDefault, $valueWithDefault } from "./Helper/prop";
 export default {
   name: "FdCheckbox",
   mixins: [InputMixin],
-  inheritAttrs: false,
+  inheritAttrs: true,
   inject: {
     // We need the form item so that we can say tell the form item
     // to render the checked-style

src/components/Form/Controls/Input.vue

@@ -2,18 +2,17 @@
   <textarea
     v-if="type === 'textarea'"
     :class="inputClasses"
-    :id="inputId"
     :readonly="readonly ? '' : null"
     :disabled="disabled ? '' : null"
     :placeholder="placeholder"
     :value="value"
     v-on="listeners"
     v-bind="$attrs"
+    :id="inputId"
   />
   <input
     v-else
     :class="inputClasses_"
-    :id="inputId"
     :readonly="readonly ? '' : null"
     :disabled="disabled ? '' : null"
     :type="type"
@@ -23,6 +22,7 @@
     @focus="handleFocus"
     v-on="listeners"
     v-bind="$attrs"
+    :id="inputId"
   />
 </template>
 

src/components/Form/Controls/Radio.vue

@@ -2,7 +2,6 @@
   <input
     type="radio"
     :class="inputClasses"
-    :id="inputId"
     :disabled="disabled ? '' : null"
     :checked="checked ? true : false"
     :value="value"
@@ -13,6 +12,7 @@
 </template>
 
 <script>
+// :id="inputId"
 import InputMixin from "./InputMixin";
 import { $valueWithDefault, $modelValueWithDefault } from "./Helper/prop";
 

src/components/Form/Controls/Select.vue

@@ -1,7 +1,6 @@
 <template>
   <select
     :class="inputClasses"
-    :id="inputId"
     :readonly="readonly ? '' : null"
     :disabled="disabled ? '' : null"
     :value="value"
@@ -14,6 +13,7 @@
 </template>
 
 <script>
+// :id="inputId"
 import InputMixin from "./InputMixin";
 import { $valueWithDefault } from "./Helper/prop";
 

src/components/Form/FormItem.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="fd-form__item" :class="classes">
-    <slot v-if="!hasLabel" />
-    <FormLabel v-if="hasLabel">
-      <slot v-if="check" />
-      {{ label }}
-    </FormLabel>
-    <slot v-if="!check && hasLabel" />
+    <slot />
     <slot name="message" />
   </div>
 </template>
@@ -21,7 +16,7 @@
 //    Normal Input:
 //  input(type=text; id=a; placeholder="Field placeholder text") .fd-form__control
 //  span .fd-form__message
-//    Som Text
+//    Some Text
 //
 // Radio/Check-Inputs: Renders Label, Radio Button (both in one block) and Some Text (new block)
 // Note: Input is now inside the label.
@@ -31,12 +26,10 @@
 //     Option 1
 
 import { Uid } from "./../../mixins";
-import FormLabel from "./FormLabel.vue";
 
 export default {
-  name: "FdFormItem",
   mixins: [Uid],
-  components: { FormLabel },
+  name: "FdFormItem",
   provide() {
     return {
       formItem: this,
@@ -47,8 +40,7 @@ export default {
     $formGroup: { from: "formGroup", default: null }
   },
   props: {
-    inline: { type: Boolean, default: null },
-    label: { type: String, default: null }
+    inline: { type: Boolean, default: false }
   },
   methods: {
     setCheck(check) {

src/components/Form/FormLabel.vue

@@ -1,5 +1,6 @@
 <template>
-  <label class="fd-form__label" v-bind="attributes">
+  <label class="fd-form__label" :aria-required="String(required)">
+    <slot name="control" />
     <slot />
     <template v-if="required"
       >*</template
@@ -10,26 +11,18 @@
 <script>
 export default {
   name: "FdFormLabel",
-  inject: {
-    itemId: { default: null }
-  },
-  computed: {
-    attributes() {
-      return {
-        for: this.for,
-        ariaRequired: this.required ? "true" : null,
-        ...this.$attrs
-      };
-    },
-    for() {
-      return this.itemId;
-    }
-  },
   props: {
+    inline: {
+      type: Boolean,
+      default: false
+    },
     required: {
       default: false,
       type: Boolean
     }
+  },
+  inject: {
+    itemId: { default: null }
   }
 };
 </script>