@tak-ps/vue-tabler 2.10.0 → 2.12.0

package/CHANGELOG.md

@@ -10,6 +10,14 @@
 
 ## Version History
 
+### v2.12.0
+
+- :tada: Add `TablerDelete` component
+
+### v2.11.0
+
+- :tada: Add `TablerMarkdown` component
+
 ### v2.10.0
 
 - :tada: Add Normalize Option to BreadCrumb component

package/components/Bytes.vue

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

package/components/Delete.vue

@@ -0,0 +1,49 @@
+<template>
+<div>
+    <div @click='modal = true' class="btn btn-outline-danger">
+        <span v-text='label'/>
+    </div>
+
+    <TablerModal v-if='modal'>
+        <button type="button" class="btn-close" @click='modal = false' aria-label="Close"></button>
+        <div class="modal-status bg-red"></div>
+        <div class="modal-header text-center py-4">
+            Deletion Confirmation
+        </div>
+        <div class="modal-body text-center py-4">
+            Are you sure you wish to perform this deletion?
+        </div>
+        <div class="modal-footer">
+            <div @click='$emit("delete")' class="btn btn-danger">
+                <TrashIcon/><span class='mx-2' v-text='label'/>
+            </div>
+        </div>
+    </TablerModal>
+</div>
+</template>
+
+<script>
+import TablerModal from './Modal.vue';
+import {
+    TrashIcon
+} from 'vue-tabler-icons';
+
+export default {
+    name: 'TablerDelete',
+    props: {
+        label: {
+            type: String,
+            default: 'Delete'
+        }
+    },
+    data: function() {
+        return {
+            modal: false
+        }
+    },
+    components: {
+        TrashIcon,
+        TablerModal
+    }
+}
+</script>

package/components/Epoch.vue

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

package/components/Err.vue

@@ -1,19 +1,19 @@
 <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 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>
+        </div>
     </Modal>
 </template>
 
@@ -24,7 +24,7 @@ import {
 } from 'vue-tabler-icons'
 
 export default {
-    name: 'Err',
+    name: 'TablerErr',
     props: ['err'],
     methods: {
         close: function() {

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

@@ -1,29 +1,15 @@
-import TablerError from './components/Err.vue'
-import TablerSelect from './components/Select.vue'
-import TablerList from './components/List.vue'
-import TablerModal from './components/Modal.vue'
-import TablerProgress from './components/Progress.vue'
-import TablerLoading from './components/Loading.vue'
-import TablerToggle from './components/Toggle.vue'
-import TablerInput from './components/Input.vue'
-import TablerBreadCrumb from './components/BreadCrumb.vue';
-import TablerBytes from './components/Bytes.vue';
-import TablerEnum from './components/Enum.vue';
-import TablerEpoch from './components/Epoch.vue';
-import TablerEpochRange from './components/EpochRange.vue';
-
-export {
-    TablerEnum,
-    TablerBytes,
-    TablerEpoch,
-    TablerEpochRange,
-    TablerBreadCrumb,
-    TablerError,
-    TablerSelect,
-    TablerLoading,
-    TablerModal,
-    TablerProgress,
-    TablerToggle,
-    TablerInput,
-    TablerList
-}
+export { default as TablerError } from './components/Err.vue'
+export { default as TablerList } from './components/List.vue'
+export { default as TablerSelect } from './components/Select.vue'
+export { default as TablerModal } from './components/Modal.vue'
+export { default as TablerProgress } from './components/Progress.vue'
+export { default as TablerLoading } from './components/Loading.vue'
+export { default as TablerToggle } from './components/Toggle.vue'
+export { default as TablerInput } from './components/Input.vue'
+export { default as TablerBreadCrumb } from './components/BreadCrumb.vue';
+export { default as TablerBytes } from './components/Bytes.vue';
+export { default as TablerEnum } from './components/Enum.vue';
+export { default as TablerEpoch } from './components/Epoch.vue';
+export { default as TablerEpochRange } from './components/EpochRange.vue';
+export { default as TablerMarkdown } from './components/Markdown.vue';
+export { default as TablerDelete } from './components/Delete.vue';

package/package.json

@@ -1,8 +1,8 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "2.10.0",
-    "main": "lib.js",
+    "version": "2.12.0",
+    "lib": "lib.js",
     "module": "lib.js",
     "description": "Tabler UI components for Vue3",
     "scripts": {
@@ -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"
     }
 }