@iamproperty/components 2.7.7 → 2.9.0

package/package.json

@@ -1,103 +1,108 @@
-{
-  "name": "@iamproperty/components",
-  "version": "2.7.7",
-  "private": false,
-  "description": "Component library for iamproperty",
-  "author": {
-    "name": "iamproperty"
-  },
-  "scripts": {
-    "serve": "vue-cli-service serve docs/main.js",
-    "build": "vue-cli-service build --target lib src/index.js",
-    "lint": "vue-cli-service lint",
-    "audit": "node local_modules/audit.js",
-    "build:docs": "npm run copy:svg && 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",
-    "compile:email": "sass assets/sass/email.scss assets/css/email.min.css --style=compressed && node local_modules/email-css.js",
-    "compile:error": "sass assets/sass/error.scss assets/css/error.min.css --style=compressed && node local_modules/error-css.js",
-    "dev": "npm run copy:svg && npm run serve",
-    "prepack": "npm run build",
-    "pull-request": "npm run test:unit && npm run test:scss && npm run test:approve && npm run compile:sass && npm run compile:js && npm run audit",
-    "test": "npm run test:unit && npm run test:scss && npm run test:visual",
-    "test:scss": "mocha tests/_sass.mjs",
-    "test:unit": "vue-cli-service test:unit",
-    "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",
-    "copy:svg": "copyfiles -u 2 assets/svg/* public/svg && copyfiles -u 2 assets/svg/**/* public/svg"
-  },
-  "main": "dist/components.umd.js",
-  "files": [
-    "assets/*",
-    "dist/*",
-    "src/*"
-  ],
-  "dependencies": {
-    "@babel/plugin-transform-runtime": "^7.16.7",
-    "@vue/eslint-config-standard": "^6.1.0",
-    "@vue/vue2-jest": "^27.0.0",
-    "bootstrap": "^5.1.3",
-    "cache-loader": "^4.1.0",
-    "glob": "^7.2.0",
-    "mocha": "^9.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"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.16.0",
-    "@babel/core": "^7.16.5",
-    "@babel/eslint-parser": "^7.16.5",
-    "@babel/preset-env": "^7.17.10",
-    "@fullhuman/postcss-purgecss": "^4.1.3",
-    "@popperjs/core": "^2.11.0",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-node-resolve": "^13.1.1",
-    "@rollup/plugin-replace": "^2.4.2",
-    "@vue/cli-plugin-babel": "^3.12.1",
-    "@vue/cli-plugin-eslint": "^5.0.4",
-    "@vue/cli-plugin-router": "^5.0.4",
-    "@vue/cli-plugin-unit-jest": "^5.0.4",
-    "@vue/cli-service": "^5.0.4",
-    "@vue/test-utils": "^1.3.0",
-    "babel-core": "^7.0.0-bridge.0",
-    "copyfiles": "^2.4.1",
-    "cross-env": "^7.0.3",
-    "eslint": "^7.32.0",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^5.2.0",
-    "eslint-plugin-standard": "^4.1.0",
-    "eslint-plugin-vue": "^7.20.0",
-    "file-loader": "^6.2.0",
-    "html-loader": "^2.1.2",
-    "jest-environment-puppeteer": "^6.0.3",
-    "jest-image-snapshot": "^4.5.1",
-    "jest-puppeteer": "^6.1.0",
-    "jest-puppeteer-preset": "^6.1.0",
-    "markdown-loader": "^8.0.0",
-    "postcss": "^8.4.7",
-    "postcss-css-variables": "^0.18.0",
-    "puppeteer": "^13.7.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-jest": "^3.0.7",
-    "vue-svg-loader": "^0.16.0",
-    "vue-template-compiler": "^2.6.14",
-    "webpack": "^5.72.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"
-  }
-}
+{
+  "name": "@iamproperty/components",
+  "version": "2.9.0",
+  "private": false,
+  "description": "Component library for iamproperty",
+  "author": {
+    "name": "iamproperty"
+  },
+  "scripts": {
+    "serve": "vue-cli-service serve docs/main.js",
+    "build": "vue-cli-service build --target lib src/index.js",
+    "lint": "vue-cli-service lint",
+    "audit": "node local_modules/audit.js",
+    "build:docs": "npm run copy:svg && 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:modules": "node node_modules/typescript/bin/tsc",
+    "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",
+    "compile:email": "sass assets/sass/email.scss assets/css/email.min.css --style=compressed && node local_modules/email-css.js",
+    "compile:error": "sass assets/sass/error.scss assets/css/error.min.css --style=compressed && node local_modules/error-css.js",
+    "dev": "npm run copy:svg && npm run serve",
+    "prepack": "npm run build",
+    "pull-request": "npm run test:unit && npm run test:scss && npm run test:approve && npm run compile:sass && npm run compile:modules && npm run compile:js && npm run audit",
+    "test": "npm run test:unit && npm run test:scss && npm run test:visual",
+    "test:scss": "mocha tests/_sass.mjs",
+    "test:unit": "vue-cli-service test:unit",
+    "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",
+    "copy:svg": "copyfiles -u 2 assets/svg/* public/svg && copyfiles -u 2 assets/svg/**/* public/svg"
+  },
+  "main": "dist/components.umd.js",
+  "files": [
+    "assets/*",
+    "dist/*",
+    "src/*"
+  ],
+  "dependencies": {
+    "@babel/plugin-transform-runtime": "^7.16.7",
+    "@vue/eslint-config-standard": "^6.1.0",
+    "@vue/vue2-jest": "^27.0.0",
+    "bootstrap": "^5.2.0",
+    "cache-loader": "^4.1.0",
+    "glob": "^7.2.0",
+    "mocha": "^9.2.0",
+    "sass": "^1.45.1",
+    "sass-loader": "^10.2.0",
+    "ts-loader": "^9.3.1",
+    "typescript": "^4.7.4",
+    "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.5",
+    "@babel/eslint-parser": "^7.16.5",
+    "@babel/preset-env": "^7.17.10",
+    "@fullhuman/postcss-purgecss": "^4.1.3",
+    "@popperjs/core": "^2.11.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^19.0.0",
+    "@rollup/plugin-node-resolve": "^13.1.1",
+    "@rollup/plugin-replace": "^2.4.2",
+    "@rollup/plugin-typescript": "^8.3.4",
+    "@vue/cli-plugin-babel": "^3.12.1",
+    "@vue/cli-plugin-eslint": "^5.0.4",
+    "@vue/cli-plugin-router": "^5.0.4",
+    "@vue/cli-plugin-unit-jest": "^5.0.4",
+    "@vue/cli-service": "^5.0.4",
+    "@vue/test-utils": "^1.3.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "copyfiles": "^2.4.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^7.32.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^5.2.0",
+    "eslint-plugin-standard": "^4.1.0",
+    "eslint-plugin-vue": "^7.20.0",
+    "file-loader": "^6.2.0",
+    "html-loader": "^2.1.2",
+    "jest-environment-puppeteer": "^6.0.3",
+    "jest-image-snapshot": "^4.5.1",
+    "jest-puppeteer": "^6.1.0",
+    "jest-puppeteer-preset": "^6.1.0",
+    "markdown-loader": "^8.0.0",
+    "postcss": "^8.4.7",
+    "postcss-css-variables": "^0.18.0",
+    "puppeteer": "^13.7.0",
+    "rollup": "^2.62.0",
+    "rollup-plugin-istanbul": "^3.0.0",
+    "sass-true": "^6.0.1",
+    "serve": "^13.0.2",
+    "terser": "5.1.0",
+    "ts-node": "^10.9.1",
+    "vue-jest": "^3.0.7",
+    "vue-svg-loader": "^0.16.0",
+    "vue-template-compiler": "^2.6.14",
+    "webpack": "^5.72.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"
+  }
+}

package/src/components/Accordion/Accordion.vue

@@ -1,22 +1,22 @@
-<template>
-  <div class="container accordion" ref="wrapper">
-    <slot></slot>
-  </div>
-</template>
-
-<style lang="scss">
-@import "../../../assets/sass/components/accordion.scss";
-</style>
-
-<script>
-import accordion from '../../../assets/js/modules/accordion.js'
-
-export default {
-  name: 'Accordion',
-  props: {
-  },
-  mounted(){
-    accordion(this.$refs.wrapper);
-  }
-}
-</script>
+<template>
+  <div class="container accordion" ref="wrapper">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/components/accordion.scss";
+</style>
+
+<script>
+import accordion from '../../../assets/ts/modules/accordion.ts'
+
+export default {
+  name: 'Accordion',
+  props: {
+  },
+  mounted(){
+    accordion(this.$refs.wrapper);
+  }
+}
+</script>

package/src/components/Accordion/AccordionItem.vue

@@ -1,52 +1,52 @@
-<template>
-
-  <details class="accordion-item" :id="createID(title)">
-    <summary :class="`${titlecolour?`bg-${titlecolour}`:''}`" v-on:click="show = true"><span class="accordion-header accordion-button h4">{{title}}<span v-if="badge" :class="`badge bg-${badgecolour}`">{{badge}}</span></span></summary>
-    <div class="accordion-body" v-if="show">
-      <slot></slot>
-    </div>
-  </details>
-</template>
-
-<script>
-import { safeID } from '../../helpers/strings'
-
-export default {
-  name: 'AccordionItem',
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    titlecolour: {
-      type: String,
-      required: false
-    },
-    badge: {
-      type: [Number, String],
-      required: false
-    },
-    badgecolour: {
-      type: String,
-      required: false,
-      default: 'light'
-    },
-    lazy: {
-      type: Boolean,
-      required: false
-    }
-  },
-  computed: {
-    createID () {
-      return (summary) => {
-        return `${safeID(summary)}`
-      }
-    }
-  },
-  data() {
-    return {
-      show: this.lazy ? false : true
-    }
-  }
-}
-</script>
+<template>
+
+  <details class="accordion-item" :id="createID(title)">
+    <summary :class="`${titlecolour?`bg-${titlecolour}`:''}`" v-on:click="show = true"><span class="accordion-header accordion-button h4">{{title}}<span v-if="badge" :class="`badge bg-${badgecolour}`">{{badge}}</span></span></summary>
+    <div class="accordion-body" v-if="show">
+      <slot></slot>
+    </div>
+  </details>
+</template>
+
+<script>
+import { safeID } from '../../helpers/strings'
+
+export default {
+  name: 'AccordionItem',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    titlecolour: {
+      type: String,
+      required: false
+    },
+    badge: {
+      type: [Number, String],
+      required: false
+    },
+    badgecolour: {
+      type: String,
+      required: false,
+      default: 'light'
+    },
+    lazy: {
+      type: Boolean,
+      required: false
+    }
+  },
+  computed: {
+    createID () {
+      return (summary) => {
+        return `${safeID(summary)}`
+      }
+    }
+  },
+  data() {
+    return {
+      show: this.lazy ? false : true
+    }
+  }
+}
+</script>

package/src/components/Accordion/README.md

@@ -1,35 +1,35 @@
-### Usage
-
-```
-<Accordion>
-  <AccordionItem title="Question 1">
-    <p>Accordion item content</p>
-  </AccordionItem>
-  <AccordionItem title="Question 2">
-    <p>Accordion item content</p>
-  </AccordionItem>
-</Accordion>
-```
-
-### Class modifiers
-
-- Adding a class of **.accordion--keep-open** to the accordion will stop the items from closing when another one is opened.
-- Adding a class of **.accordion--straight** to the accordion will remove the slight indentation of the accordion.
-
-
-### Accordion item Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| title | String | - | A question or statement |
-| titlecolour | String | - | Apply a colour the the accordion item title |
-| badge | String | - | Add a highlighted badge/tag to the accordion item title |
-| badgecolour | String | light | Apply a colour the badge |
-| lazy  | Boolean | - | If set the content of the tab will not loaded intially and will be loaded after the user has clicked on the accordion link. |
-
-
-### Accordion item Slots
-
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
+### Usage
+
+```
+<Accordion>
+  <AccordionItem title="Question 1">
+    <p>Accordion item content</p>
+  </AccordionItem>
+  <AccordionItem title="Question 2">
+    <p>Accordion item content</p>
+  </AccordionItem>
+</Accordion>
+```
+
+### Class modifiers
+
+- Adding a class of **.accordion--keep-open** to the accordion will stop the items from closing when another one is opened.
+- Adding a class of **.accordion--straight** to the accordion will remove the slight indentation of the accordion.
+
+
+### Accordion item Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| title | String | - | A question or statement |
+| titlecolour | String | - | Apply a colour the the accordion item title |
+| badge | String | - | Add a highlighted badge/tag to the accordion item title |
+| badgecolour | String | light | Apply a colour the badge |
+| lazy  | Boolean | - | If set the content of the tab will not loaded intially and will be loaded after the user has clicked on the accordion link. |
+
+
+### Accordion item Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
 | default | - | This is the content of the accordion item |

package/src/components/Alert/Alert.vue

@@ -1,39 +1,39 @@
-<template>
-  <div :class="`container alert pb-0 ${dismissible?'alert--dismissible fade show':''}`" ref="wrapper" :data-timeout="timeout" :style="timeout?`--animation-length: ${timeout}ms`:''">
-    <div :class="`alert__inner bg-${colour}`" role="alert">
-      <button v-if="dismissible" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-@import "../../../assets/sass/components/alert.scss";
-</style>
-
-<script>
-import alert from '../../../assets/js/modules/alert.js'
-
-export default {
-  name: 'Alert',
-  props: {
-    dismissible: {
-      type: String|Boolean,
-      required: false,
-      default: false
-    },
-    colour: {
-      type: String,
-      required: false,
-      default: 'primary'
-    },
-    timeout: {
-      type: String|Number,
-      required: false
-    }
-  },
-  mounted(){
-    alert(this.$refs.wrapper);
-  }
-}
-</script>
+<template>
+  <div :class="`container alert pb-0 ${dismissible?'alert--dismissible fade show':''}`" ref="wrapper" :data-timeout="timeout" :style="timeout?`--animation-length: ${timeout}ms`:''">
+    <div :class="`alert__inner bg-${colour}`" role="alert">
+      <button v-if="dismissible" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../../../assets/sass/components/alert.scss";
+</style>
+
+<script>
+import alert from '../../../assets/js/modules/alert.js'
+
+export default {
+  name: 'Alert',
+  props: {
+    dismissible: {
+      type: String|Boolean,
+      required: false,
+      default: false
+    },
+    colour: {
+      type: String,
+      required: false,
+      default: 'primary'
+    },
+    timeout: {
+      type: String|Number,
+      required: false
+    }
+  },
+  mounted(){
+    alert(this.$refs.wrapper);
+  }
+}
+</script>

package/src/components/Alert/README.md

@@ -1,29 +1,29 @@
-### Usage
-
-```
-<Alert class="alert--fixed" colour="info" dismissible timeout="6000">
-  <h2 class="h6">Self dismissing alert</h2>
-  <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p>
-</Alert>
-```
-
-### Class and data modifiers
-
-- Adding a class of **.alert--fixed** stick the alert box to the bottom of the page.
-- Adding a class of **.alert--dismissible** will add the correct padding for the having a btn to the right.
-
-
-### Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| dismissible | Boolean | - | Adds a close button which will remove the alert box after clicking it. |
-| colour | String | primary | Apply a background colour the alert box, any of the theme colours can be used. |
-| timeout | String or Number | - | Sets a timeout to remove the alert box. |
-
-
-### Slots
-
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
+### Usage
+
+```
+<Alert class="alert--fixed" colour="info" dismissible timeout="6000">
+  <h2 class="h6">Self dismissing alert</h2>
+  <p>Curabitur aliquet quam id dui posuere blandit. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p>
+</Alert>
+```
+
+### Class and data modifiers
+
+- Adding a class of **.alert--fixed** stick the alert box to the bottom of the page.
+- Adding a class of **.alert--dismissible** will add the correct padding for the having a btn to the right.
+
+
+### Properties
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| dismissible | Boolean | - | Adds a close button which will remove the alert box after clicking it. |
+| colour | String | primary | Apply a background colour the alert box, any of the theme colours can be used. |
+| timeout | String or Number | - | Sets a timeout to remove the alert box. |
+
+
+### Slots
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
 | default | - | This is the content of the alert box |