@tak-ps/vue-tabler 2.11.0 → 3.0.0

package/CHANGELOG.md

@@ -10,6 +10,14 @@
 
 ## Version History
 
+### v3.0.0
+
+- :rocket: Standardize Enum Component
+
+### v2.12.0
+
+- :tada: Add `TablerDelete` component
+
 ### v2.11.0
 
 - :tada: Add `TablerMarkdown` component

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/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>
 

package/components/Select.vue

@@ -3,14 +3,14 @@
     <a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-text='current'></a>
     <div class="dropdown-menu dropdown-menu-end">
         <a
-            :key='value'
-            v-for='value in values'
-            @click='current = value'
+            :key='option'
+            v-for='option in options'
+            @click='current = option'
             class="dropdown-item"
             :class='{
-                active: value === current
+                active: option === current
             }'
-            v-text='value'
+            v-text='option'
         ></a>
     </div>
 </div>
@@ -20,8 +20,18 @@
 export default {
     name: 'TablerSelect',
     props: {
-        default: String,
-        values: Array
+        modelValue: {
+            type: String,
+            required: true,
+        },
+        default: {
+            type: String,
+            required: false
+        },
+        options: {
+            type: Array,
+            required: true
+        },
     },
     data: function() {
         return {
@@ -30,17 +40,17 @@ export default {
     },
     watch: {
         current: function() {
-            this.$emit('select', this.current);
+            if (this.modelValue !== this.current) {
+                this.$emit('update:modelValue', this.current);
+            }
         }
     },
     mounted: function() {
         if (!this.default) {
-            this.current = this.values[0];
+            this.current = this.options[0];
         } else {
             this.current = this.default;
         }
     },
-    methods: {
-    },
 }
 </script>

package/lib.js

@@ -1,31 +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';
-import TablerMarkdown from './components/Markdown.vue';
-
-export {
-    TablerEnum,
-    TablerBytes,
-    TablerEpoch,
-    TablerMarkdown,
-    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.11.0",
-    "main": "lib.js",
+    "version": "3.0.0",
+    "lib": "lib.js",
     "module": "lib.js",
     "description": "Tabler UI components for Vue3",
     "scripts": {