@iamproperty/components 2.1.0 → 2.3.2

package/package.json

@@ -1,91 +1,90 @@
 {
   "name": "@iamproperty/components",
-  "version": "2.1.0",
+  "version": "2.3.2",
   "private": false,
   "description": "Component library for iamproperty",
   "author": {
     "name": "iamproperty"
   },
-  "license": "UNLICENSED",
   "scripts": {
-    "dev": "npm run serve",
     "serve": "vue-cli-service serve docs/main.js",
     "build": "vue-cli-service build --target lib src/index.js",
-    "build:docs": "vue-cli-service build docs/main.js",
     "test:unit": "vue-cli-service test:unit",
-    "test:visual": "cross-env TEST_MODE=visual vue-cli-service test:unit --forceExit --detectOpenHandles",
-    "test:approve": "cross-env TEST_MODE=visual vue-cli-service test:unit --forceExit --detectOpenHandles --updateSnapshot",
-    "test": "npm run test:unit && npm run test:visual",
     "lint": "vue-cli-service lint",
-    "compile:sass": "sass assets/sass/main.scss assets/css/style.min.css --style=compressed && sass assets/sass/core.scss assets/css/core.min.css --style=compressed",
+    "audit": "node local_modules/audit.js",
+    "build:docs": "vue-cli-service build docs/main.js",
     "compile:js": "rollup --environment BUNDLE:true --config rollup.config.js --sourcemap && terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=assets/js/scripts.bundle.js.map,includeSources,url=scripts.bundle.min.js.map\" --output assets/js/scripts.bundle.min.js assets/js/scripts.bundle.js",
+    "compile:sass": "sass assets/sass/main.scss assets/css/style.min.css --style=compressed && sass assets/sass/core.scss assets/css/core.min.css --style=compressed",
+    "dev": "npm run serve",
     "prepack": "npm run build",
-    "audit": "node local_modules/audit.js",
-    "pull-request": "npm run test:unit && npm run test:approve && npm run compile:sass && npm run compile:js && npm run audit"
+    "pull-request": "npm run test:unit && npm run test:approve && npm run compile:sass && npm run compile:js && npm run audit",
+    "test": "npm run test:unit && npm run test:visual",
+    "test:approve": "cross-env TEST_MODE=visual vue-cli-service test:unit --forceExit --detectOpenHandles --updateSnapshot",
+    "test:visual": "cross-env TEST_MODE=visual vue-cli-service test:unit --forceExit --detectOpenHandles"
   },
   "main": "dist/components.umd.js",
+  "files": [
+    "assets/*",
+    "dist/*",
+    "src/*"
+  ],
   "dependencies": {
+    "@babel/plugin-transform-runtime": "^7.16.7",
     "@vue/eslint-config-standard": "^6.1.0",
     "bootstrap": "^5.1.3",
     "glob": "^7.2.0",
-    "glob-parent": "^6.0.2",
-    "puppeteer-core": "^11.0.0",
-    "sass": "^1.43.4",
+    "sass": "^1.45.1",
     "sass-loader": "^10.2.0",
     "vue": "^2.6.14",
+    "vue-loader": "^15.9.8",
     "vue-markdown-loader": "^2.5.0",
     "vue-router": "^3.5.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.0",
-    "@babel/core": "^7.16.0",
-    "@babel/eslint-parser": "^7.16.3",
-    "@babel/preset-env": "^7.16.4",
-    "@popperjs/core": "^2.10.2",
+    "@babel/core": "^7.16.5",
+    "@babel/eslint-parser": "^7.16.5",
+    "@babel/preset-env": "^7.16.5",
+    "@popperjs/core": "^2.11.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@rollup/plugin-node-resolve": "^13.1.1",
     "@rollup/plugin-replace": "^2.4.2",
-    "@vue/cli-plugin-babel": "^4.5.15",
-    "@vue/cli-plugin-eslint": "^4.5.15",
+    "@vue/cli-plugin-babel": "^3.12.1",
+    "@vue/cli-plugin-eslint": "^3.1.1",
     "@vue/cli-plugin-router": "^4.5.15",
     "@vue/cli-plugin-unit-jest": "^4.5.15",
     "@vue/cli-service": "^4.5.15",
     "@vue/test-utils": "^1.3.0",
-    "babel-jest": "^27.3.1",
+    "cache-loader": "^4.1.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.2.0",
+    "eslint": "^7.32.0",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^5.1.1",
+    "eslint-plugin-promise": "^5.2.0",
     "eslint-plugin-standard": "^4.1.0",
     "eslint-plugin-vue": "^7.20.0",
-    "html-loader": "^3.0.1",
+    "html-loader": "^2.1.2",
     "jest-environment-puppeteer": "^5.0.4",
     "jest-image-snapshot": "^4.5.1",
-    "jest-puppeteer": "^6.0.0",
-    "jest-puppeteer-preset": "^6.0.0",
+    "jest-puppeteer": "^5.0.4",
+    "jest-puppeteer-preset": "^5.0.4",
     "markdown-loader": "^6.0.0",
-    "puppeteer": "^10.2.0",
-    "rollup": "^2.60.0",
+    "puppeteer": "^10.4.0",
+    "rollup": "^2.62.0",
     "rollup-plugin-istanbul": "^3.0.0",
     "sass-true": "^6.0.1",
     "serve": "^13.0.2",
     "terser": "5.1.0",
-    "vue-loader": "^15.9.8",
-    "vue-svg-loader": "^0.16.0",
+    "vue-svg-loader": "^0.10.0",
     "vue-template-compiler": "^2.6.14",
     "webpack": "^4.46.0"
   },
+  "license": "UNLICENSED",
+  "localURL": "http://localhost:8080",
   "registry-url": "https://registry.npmjs.com",
   "repository": {
     "type": "git",
     "url": "git://github.com/iamproperty/iamproperty-vue-component-library.git"
-  },
-  "files": [
-    "assets/*",
-    "dist/*",
-    "src/*"
-  ],
-  "localURL": "http://localhost:8080"
+  }
 }

package/src/components/Accordion/AccordionItem.vue

@@ -12,7 +12,7 @@
 import { safeID } from '../../helpers/strings'
 
 export default {
-  name: 'Accordion',
+  name: 'AccordionItem',
   props: {
     title: {
       type: String,
@@ -23,7 +23,7 @@ export default {
       required: false
     },
     badge: {
-      type: String,
+      type: [Number, String],
       required: false
     },
     badgecolour: {

package/src/components/Card/Card.vue

@@ -32,7 +32,7 @@ export default {
     titleclass: {
       type: String,
       required: false,
-      default: 'h2'
+      default: 'h4'
     },
     title: {
       type: String,

package/src/components/Header/Header.vue

@@ -1,9 +1,9 @@
 <template>
-  <header class="header">
+  <header class="header-banner">
     <div class="container">
       <!-- Space for a breadcrumb trail -->
       <slot name="breadcrumb"></slot>
-      <div class="header__inner">
+      <div class="header-banner__inner">
         <h1 v-html="title"></h1>
         <slot></slot>
       </div>

package/src/components/Nav/Nav.vue

@@ -9,7 +9,7 @@
         <div class="row">
           <div class="col mw-md-fit-content nav__logo">
             <a href="/" class="text-decoration-none mb-0">
-              <Logo :id="logo" :path="logopath" :desc="logotext"></Logo>
+              <Logo :id="logo" :path="logopath" :desc="logotext" class="pb-0"></Logo>
             </a>
           </div>
 

package/src/components/Tabs/Tabs.vue

@@ -36,15 +36,19 @@ export default {
 
         for (const [key, value] of Object.entries(this.$slots.default)) {
           
-          let tabTitle = value.componentOptions.propsData.title;
-
-          let tab = {
-            name: this.tabsID,
-            id: this.tabsID+"_tab"+i++,
-            tabTitle: tabTitle
+          // Check if the value in the object is actually a tab and has the correct data
+          if(value.componentOptions && value.componentOptions.propsData && value.componentOptions.propsData.title){
+            
+            let tabTitle = value.componentOptions.propsData.title;
+            
+            let tab = {
+              name: this.tabsID,
+              id: this.tabsID+"_tab"+i++,
+              tabTitle: tabTitle
+            }
+
+            tabLinks.push(tab);
           }
-
-          tabLinks.push(tab);
         }
 
         return tabLinks;

package/src/elements/Table/README.md

@@ -53,3 +53,10 @@ this.$el.addEventListener('sorted', function (e) {
   console.log('Table sorted')
 }, false);
 ```
+
+// Re-ordered via drag and drop
+this.$el.addEventListener('reordered', function (e) { 
+      
+  console.log('Table re-ordered')
+}, false);
+```

package/src/foundations/YoutubeVideo/README.md

@@ -0,0 +1,11 @@
+### Usage
+
+```
+<YoutubeVideo video="lROFZaJcVug" ></YoutubeVideo>
+```
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| video | String | property | Video id from youtube |

package/src/foundations/YoutubeVideo/YoutubeVideo.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="youtube-embed ratio ratio-16x9" ref="wrapper">
+      <a :href="`https://www.youtube.com/watch?v=${video}`" target="_blank" title="Investments Video" :data-id="video">
+        <img :src="`https://img.youtube.com/vi/${video}/maxresdefault.jpg`" alt="">
+        <span class="btn btn-secondary">Play Video</span>
+      </a>
+  </div>
+</template>
+<script>
+import youtubeVideo from '../../../assets/js/modules/youtubevideo.js'
+
+export default {
+  name: 'YoutuveVideo',
+  props: {
+    video: {
+      type: String,
+      required: true
+    }
+  },
+  mounted(){
+    new youtubeVideo(this.$refs.wrapper);
+  }
+}
+</script>

package/src/index.js

@@ -6,6 +6,7 @@ export { default as Table } from './elements/Table/Table.vue'
 export { default as Input } from './elements/Input/Input.vue'
 // Components
 export { default as Accordion } from './components/Accordion/Accordion.vue'
+export { default as AccordionItem } from './components/Accordion/AccordionItem.vue'
 export { default as Banner } from './components/Banner/Banner.vue'
 export { default as Card } from './components/Card/Card.vue'
 export { default as CardDeck } from './components/CardDeck/CardDeck.vue'

package/assets/sass/elements/media.scss

@@ -1,3 +0,0 @@
-img {
-  max-width: 100%;
-}