@tak-ps/vue-tabler 2.9.0 → 2.11.0

package/CHANGELOG.md

@@ -10,6 +10,15 @@
 
 ## Version History
 
+### v2.11.0
+
+- :tada: Add `TablerMarkdown` component
+
+### v2.10.0
+
+- :tada: Add Normalize Option to BreadCrumb component
+- :bug: Move `whitespace: pre;` to text area to avoid breaking date inputs
+
 ### v2.9.0
 
 - :bug: Add `white-space: pre;` to text area to retain newline characters

package/components/BreadCrumb.vue

@@ -10,7 +10,8 @@
         }'
     >
         <a v-if='crumb_it === crumbs.length - 1' v-text='crumb'></a>
-        <a v-else @click='$router.push("/" + crumbs.splice(0, crumb_it + 1).join("/").toLowerCase())' class='cursor-pointer' v-text='crumb'></a>
+        <a v-else-if='normalize' @click='$router.push("/" + crumbs.splice(0, crumb_it + 1).join("/").toLowerCase())' class='cursor-pointer' v-text='crumb'></a>
+        <a v-else @click='$router.push("/" + crumbs.splice(0, crumb_it + 1).join("/"))' class='cursor-pointer' v-text='crumb'></a>
     </li>
 </ol>
 </template>
@@ -18,12 +19,23 @@
 <script>
 export default {
     name: 'BreadCrumb',
+    props: {
+        normalize: {
+            type: Boolean,
+            default: true,
+            description: 'Perform Title Casing on URL Components'
+        }
+    },
     data: function() {
         return {
             crumbs: this.$route.path.split('/').filter((crumb) => {
                 return crumb.length;
             }).map((crumb) => {
-                return `${crumb[0].toUpperCase()}${crumb.slice(1, crumb.length)}`;
+                if (this.normalize) {
+                    return `${crumb[0].toUpperCase()}${crumb.slice(1, crumb.length)}`;
+                } else {
+                    return `${crumb[0]}${crumb.slice(1, crumb.length)}`;
+                }
             })
         }
     },

package/components/Bytes.vue

@@ -4,7 +4,7 @@
 
 <script>
 export default {
-    name: 'Bytes',
+    name: 'TablerBytes',
     props: {
         bytes: {
             type: Number,

package/components/Epoch.vue

@@ -4,7 +4,7 @@
 
 <script>
 export default {
-    name: 'Epoch',
+    name: 'TablerEpoch',
     props: {
         date: {
             type: Number,

package/components/Err.vue

@@ -24,7 +24,7 @@ import {
 } from 'vue-tabler-icons'
 
 export default {
-    name: 'Err',
+    name: 'TablerErr',
     props: ['err'],
     methods: {
         close: function() {

package/components/Input.vue

@@ -1,5 +1,5 @@
 <template>
-<div style='white-space: pre;'>
+<div>
     <label v-if='label' class="form-label" v-text='label'></label>
 
     <template v-if='!rows || rows <= 1'>
@@ -8,7 +8,7 @@
         }' class="form-control" :placeholder='label||placeholder||""'/>
     </template>
     <template v-else>
-        <textarea :disabled='disabled' :rows='rows' :value='modelValue' @input='event => current = event.target.value' :type='type' :class='{
+        <textarea style='white-space: pre;' :disabled='disabled' :rows='rows' :value='modelValue' @input='event => current = event.target.value' :type='type' :class='{
             "is-invalid": error
         }' class="form-control" :placeholder='label||placeholder||""'/>
     </template>

package/components/Loading.vue

@@ -25,7 +25,7 @@
 
 <script>
 export default {
-    name: 'Loading',
+    name: 'TablerLoading',
     props: {
         inline: {
             type: Boolean,

package/components/Markdown.vue

@@ -0,0 +1,23 @@
+<template>
+<div v-html='html'></div>
+</template>
+
+<script>
+import showdown from 'showdown';
+
+export default {
+    name: 'TablerMarkdown',
+    props: {
+        markdown: {
+            type: String,
+            required: true
+        }
+    },
+    computed: {
+        html: function() {
+            const converter = new showdown.Converter();
+            return converter.makeHtml(this.markdown);
+        }
+    }
+}
+</script>

package/components/Modal.vue

@@ -10,6 +10,6 @@
 
 <script>
 export default {
-    name: 'Modal',
+    name: 'TablerModal',
 }
 </script>

package/lib.js

@@ -11,11 +11,13 @@ import TablerBytes from './components/Bytes.vue';
 import TablerEnum from './components/Enum.vue';
 import TablerEpoch from './components/Epoch.vue';
 import TablerEpochRange from './components/EpochRange.vue';
+import TablerMarkdown from './components/Markdown.vue';
 
 export {
     TablerEnum,
     TablerBytes,
     TablerEpoch,
+    TablerMarkdown,
     TablerEpochRange,
     TablerBreadCrumb,
     TablerError,
@@ -25,5 +27,5 @@ export {
     TablerProgress,
     TablerToggle,
     TablerInput,
-    TablerList
+    TablerList,
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "2.9.0",
+    "version": "2.11.0",
     "main": "lib.js",
     "module": "lib.js",
     "description": "Tabler UI components for Vue3",
@@ -24,6 +24,7 @@
         "@vue/cli-plugin-babel": "^5.0.8",
         "eslint": "^8.28.0",
         "eslint-plugin-vue": "^9.8.0",
+        "showdown": "^2.1.0",
         "vue-tabler-icons": "^2.16.0"
     }
 }