@tak-ps/vue-tabler 3.7.0 → 3.8.0

package/CHANGELOG.md

@@ -10,6 +10,16 @@
 
 ## Version History
 
+### v3.8.0
+
+- :tada: Add Preliminary `Dropdown` component for modular Dropdowns
+
+### v3.7.1
+
+- :bug: Include missing components in `Enum` & `Toggle` comps
+- :rocket: `TablerSchema`: Default to empty string for description prop
+- :rocket: `TablerSchema`: Default to false for required prop
+
 ### v3.7.0
 
 - :rocket: Include `description` and `required` to `TablerSchema` and sub components

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,13 +16,18 @@
     </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>
 </template>
 
 <script>
+import {
+    InfoSquareIcon
+} from 'vue-tabler-icons';
+import Help from './Help.vue';
+
 export default {
     name: 'TablerEnum',
     props: {
@@ -69,6 +74,10 @@ export default {
             if (this.current === this.modelValue) return;
             this.$emit('update:modelValue', this.current);
         }
+    },
+    components: {
+        InfoSquareIcon,
+        Help
     }
 }
 </script>

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/Schema.vue

@@ -5,8 +5,8 @@
             <TablerEnum
                 :label='key'
                 :disabled='disabled'
-                :required='schema.properties[key].required'
-                :description='schema.properties[key].description'
+                :required='schema.properties[key].required || false'
+                :description='schema.properties[key].description || ""'
                 v-model='data[key]'
                 :options='schema.properties[key].enum'
                 :default='schema.properties[key].default'
@@ -16,8 +16,8 @@
             <TablerInput
                 :label='key'
                 :disabled='disabled'
-                :required='schema.properties[key].required'
-                :description='schema.properties[key].description'
+                :required='schema.properties[key].required || false'
+                :description='schema.properties[key].description || ""'
                 v-model='data[key]'
             />
         </template>
@@ -25,8 +25,8 @@
             <TablerToggle
                 :label='key'
                 :disabled='disabled'
-                :required='schema.properties[key].required'
-                :description='schema.properties[key].description'
+                :required='schema.properties[key].required || false'
+                :description='schema.properties[key].description || ""'
                 v-model='data[key]'
             />
         </template>

package/components/Toggle.vue

@@ -21,6 +21,11 @@
 </template>
 
 <script>
+import {
+    InfoSquareIcon
+} from 'vue-tabler-icons';
+import Help from './Help.vue';
+
 export default {
     name: 'TablerToggle',
     props: {
@@ -38,7 +43,7 @@ export default {
         },
         description: {
             type: String,
-            default: false
+            default: ''
         },
         label: {
             type: String,
@@ -62,5 +67,9 @@ export default {
             this.$emit('update:modelValue', this.current);
         }
     },
+    components: {
+        InfoSquareIcon,
+        Help
+    }
 }
 </script>

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.0",
+    "version": "3.8.0",
     "lib": "lib.js",
     "module": "lib.js",
     "description": "Tabler UI components for Vue3",