@iamproperty/components 2.2.0 → 2.3.0

package/package.json

@@ -1,36 +1,42 @@
 {
   "name": "@iamproperty/components",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "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",
     "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"
   },
@@ -44,13 +50,13 @@
     "@rollup/plugin-commonjs": "^19.0.0",
     "@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.4.5",
+    "cache-loader": "^4.1.0",
     "cross-env": "^7.0.3",
     "eslint": "^7.32.0",
     "eslint-plugin-import": "^2.25.3",
@@ -68,21 +74,17 @@
     "rollup": "^2.62.0",
     "rollup-plugin-istanbul": "^3.0.0",
     "sass-true": "^6.0.1",
-    "serve": "^12.0.1",
+    "serve": "^13.0.2",
     "terser": "5.1.0",
-    "vue-loader": "^15.9.8",
-    "vue-svg-loader": "^0.16.0",
-    "vue-template-compiler": "^2.6.14"
+    "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/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/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/assets/sass/elements/media.scss

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