@tak-ps/vue-tabler 3.7.1 → 3.8.0

package/CHANGELOG.md

@@ -10,6 +10,10 @@
 
 ## Version History
 
+### v3.8.0
+
+- :tada: Add Preliminary `Dropdown` component for modular Dropdowns
+
 ### v3.7.1
 
 - :bug: Include missing components in `Enum` & `Toggle` comps

package/components/Dropdown.vue

@@ -0,0 +1,32 @@
+<template>
+<div class="dropdown">
+    <div type="button" ref='button' :id='id' data-bs-toggle="dropdown" aria-expanded="false" class='border rounded' style='height: 36px;'>
+            <slot>
+                <SettingsIcon style='cursor-pointer'/>
+            </slot>
+    </div>
+    <ul class="dropdown-menu" :aria-labelledby='id'>
+        <slot name='dropdown'>
+            Dropdown Content
+        </slot>
+    </ul>
+</div>
+</template>
+
+<script>
+import {
+    SettingsIcon
+} from 'vue-tabler-icon';
+
+export default {
+    name: 'TablerDropdown',
+    data: function() {
+        return {
+            id: 'tabler-dropdown-' + Math.random().toString(36).substr(2, 9) + '-' + Date.now().toString(36)
+        }
+    },
+    components: {
+        SettingsIcon
+    }
+}
+</script>

package/components/Enum.vue

@@ -16,7 +16,7 @@
     </div>
     <div class='col-12'>
         <select v-model='current' :disabled='disabled' class='form-select'>
-            <option v-for='option in options' :value="option" v-text='option'></option>
+            <option :key='option' v-for='option in options' :value="option" v-text='option'></option>
         </select>
     </div>
 </div>

package/components/EpochRange.vue

@@ -84,6 +84,8 @@ export default {
                 } else {
                     return `${start_month} ${start.getFullYear()}, ${start_time} - ${end_month} ${end.getFullYear()}, ${end_time}`;
                 }
+            } else {
+                return 'Invalid Format'
             }
         }
     }

package/components/Help.vue

@@ -20,9 +20,6 @@
 
 <script>
 import Modal from './Modal.vue';
-import {
-    InfoSquareIcon
-} from 'vue-tabler-icons'
 
 export default {
     name: 'TablerHelp',
@@ -44,7 +41,6 @@ export default {
     },
     components: {
         Modal,
-        InfoSquareIcon
     }
 }
 </script>

package/components/Toggle.vue

@@ -43,7 +43,7 @@ export default {
         },
         description: {
             type: String,
-            default: false
+            default: ''
         },
         label: {
             type: String,

package/lib.js

@@ -1,3 +1,4 @@
+export { default as TablerDropdown } from './components/Dropdown.vue'
 export { default as TablerPager } from './components/Pager.vue'
 export { default as TablerNone } from './components/None.vue'
 export { default as TablerError } from './components/Err.vue'

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "3.7.1",
+    "version": "3.8.0",
     "lib": "lib.js",
     "module": "lib.js",
     "description": "Tabler UI components for Vue3",