@tak-ps/vue-tabler 1.0.1 → 1.1.0

package/.eslintrc

@@ -0,0 +1,17 @@
+{
+    "root": true,
+    "globals": {}, 
+    "env": {
+        "node": true
+    },
+    "extends": [
+        "plugin:vue/essential",
+        "eslint:recommended"
+    ],
+    "parserOptions": {
+        "parser": "@babel/eslint-parser"
+    },
+    "rules": {
+        "vue/multi-word-component-names": 1
+    }
+}

package/CHANGELOG.md

@@ -10,6 +10,10 @@
 
 ## Version History
 
+### v1.1.0
+
+- :rocket: Add new components & linting
+
 ### v1.0.1
 
 - :bug: package.json fixes for exporting as module

package/babel.config.json

@@ -0,0 +1,5 @@
+{
+    "presets": [
+        "@vue/cli-plugin-babel/preset"
+    ]
+}

package/components/Err.vue

@@ -0,0 +1,39 @@
+<template>
+    <Modal>
+        <button type="button" class="btn-close" @click='close' aria-label="Close"></button>
+            <div class="modal-status bg-yellow"></div>
+            <div class="modal-body text-center py-4">
+                <AlertCircleIcon/>
+                <h3>Website Error</h3>
+                <div class="text-muted" v-text='err.message'></div>
+            </div>
+            <div class="modal-footer">
+                <div class="w-100">
+                    <div class="row">
+                        <div class="col"><a @click='close' class="cursor-pointer btn w-100">OK</a></div>
+                    </div>
+                </div>
+          </div>
+    </Modal>
+</template>
+
+<script>
+import Modal from './Modal.vue';
+import {
+    AlertCircleIcon
+} from 'vue-tabler-icons'
+
+export default {
+    name: 'Err',
+    props: ['err'],
+    methods: {
+        close: function() {
+            this.$emit('close');
+        }
+    },
+    components: {
+        Modal,
+        AlertCircleIcon
+    }
+}
+</script>

package/components/Modal.vue

@@ -0,0 +1,15 @@
+<template>
+<div class="modal modal-blur fade show" tabindex="-1" style="display: block;" aria-modal="true" role="dialog">
+      <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
+            <div class="modal-content">
+                <slot/>
+            </div>
+      </div>
+</div>
+</template>
+
+<script>
+export default {
+    name: 'Modal',
+}
+</script>

package/components/Progress.vue

@@ -0,0 +1,20 @@
+<template>
+<div class="progress progress-xs">
+    <div
+        class="progress-bar bg-primary"
+        :style='`width: ${percent * 100}%;`'
+    ></div>
+</div>
+</template>
+
+<script>
+export default {
+    name: 'TablerProgress',
+    props: {
+        percent: {
+            type: Number,
+            default: 1
+        }
+    }
+}
+</script>

package/lib.js

@@ -1,5 +1,11 @@
+import Err from './components/Err.vue'
 import Select from './components/Select.vue'
+import Modal from './components/Modal.vue'
+import Progress from './components/Progress.vue'
 
 export {
-    Select
+    Err,
+    Select,
+    Modal,
+    Progress
 }

package/package.json

@@ -1,12 +1,13 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "1.0.1",
+    "version": "1.1.0",
     "main": "lib.js",
     "module": "lib.js",
     "description": "Tabler UI components for Vue3",
     "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "lint": "eslint lib.js components/*.vue"
     },
     "repository": {
         "type": "git",
@@ -17,5 +18,12 @@
     "bugs": {
         "url": "https://github.com/tak-ps/vue-tabler/issues"
     },
-    "homepage": "https://github.com/tak-ps/vue-tabler#readme"
+    "homepage": "https://github.com/tak-ps/vue-tabler#readme",
+    "dependencies": {
+        "@babel/eslint-parser": "^7.19.1",
+        "@vue/cli-plugin-babel": "^5.0.8",
+        "eslint": "^8.28.0",
+        "eslint-plugin-vue": "^9.8.0",
+        "vue-tabler-icons": "^2.16.0"
+    }
 }