@tak-ps/vue-tabler 3.9.0 → 3.11.0

package/CHANGELOG.md

@@ -10,6 +10,14 @@
 
 ## Version History
 
+### v3.11.0
+
+- :tada: Add `TablerColour` Component
+
+### v3.10.0
+
+- :tada: Use uniform `TablerLabel` internal class for inputs & allow slot use to the right of label
+
 ### v3.9.0
 
 - :tada: Add `TablerRange`

package/components/List.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import TablerInput from './Input.vue';
+import TablerInput from './input/Input.vue';
 import {
     SettingsIcon
 } from 'vue-tabler-icons';

package/components/Schema.vue

@@ -63,9 +63,9 @@
 </template>
 
 <script>
-import TablerInput from './Input.vue';
-import TablerToggle from './Toggle.vue';
-import TablerEnum from './Enum.vue';
+import TablerInput from './input/Input.vue';
+import TablerToggle from './input/Toggle.vue';
+import TablerEnum from './input/Enum.vue';
 import {
     PlusIcon,
     TrashIcon,

package/components/input/Colour.vue

@@ -0,0 +1,98 @@
+<template>
+<div class='row'>
+    <TablerLabel :label='label' :description='description' :required='required'><slot/></TablerLabel>
+    <div class='col-12'>
+        <div class="row g-2">
+            <div :key='color' v-for='color in [
+                "dark", "white", "blue", "azure", "indigo", "purple", "pink", "red", "orange", "yellow", "lime"
+            ]'
+            class="col-auto">
+                <label class="form-colorinput">
+                    <input :disabled='disabled' v-model='current' :value='color' type="radio" class="form-colorinput-input">
+                    <span class="form-colorinput-color bg-dark" :class='[
+                        `bg-${color}`
+                    ]'></span>
+                </label>
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+import TablerLabel from '../internal/Label.vue';
+
+export default {
+    name: 'TablerEnum',
+    props: {
+        modelValue: {
+            type: String,
+            required: true
+        },
+        default: {
+            type: String,
+            required: false
+        },
+        required: {
+            type: Boolean,
+            required: false
+        },
+        description: {
+            type: String,
+            required: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        label: String,
+    },
+    data: function() {
+        return {
+            current: '',
+            invertColours: {
+                '#1d273b': 'dark',
+                '#ffffff': 'white',
+                '#206bc4': 'blue',
+                '#4299e1': 'azure',
+                '#4263eb': 'indigo',
+                '#ae3ec9': 'purple',
+                '#d6336c': 'pink',
+                '#d63939': 'red',
+                '#f76707': 'orange',
+                '#f59f00': 'yellow',
+                '#74b816': 'lime'
+            }
+            colours: {
+                dark: '#1d273b',
+                white: '#ffffff',
+                blue: '#206bc4',
+                azure: '#4299e1',
+                indigo: '#4263eb',
+                purple: '#ae3ec9',
+                pink: '#d6336c',
+                red: '#d63939',
+                orange: '#f76707',
+                yellow: '#f59f00',
+                lime: '#74b816'
+            }
+        }
+    },
+    mounted: function() {
+        if (!this.modelValue && this.default) this.current = this.invertColours[this.default]
+        else this.current = this.invertColours[this.modelValue];
+    },
+    watch: {
+        modelValue: function() {
+            this.current = this.invertColours[this.modelValue];
+        },
+        current: function() {
+            if (this.colours[this.current] === this.modelValue) return;
+            this.$emit('update:modelValue', this.colours[this.current]);
+        }
+    },
+    components: {
+        TablerLabel
+    }
+}
+</script>

package/components/{Enum.vue → input/Enum.vue}

@@ -1,19 +1,6 @@
 <template>
 <div class='row'>
-    <div class='col-12 d-flex'>
-        <span v-if='description' style='margin-right: 4px;'>
-            <InfoSquareIcon @click='help = true' size='20' class='cursor-pointer'/>
-            <Help v-if='help' @click='help = false' :label='label || placeholder' :description='description'/>
-        </span>
-        <label
-            v-if='label'
-            class="form-label"
-            v-text='label'
-            :class='{
-                "required": required
-            }'
-        ></label>
-    </div>
+    <TablerLabel :label='label' :description='description' :required='required'><slot/></TablerLabel>
     <div class='col-12'>
         <select v-model='current' :disabled='disabled' class='form-select'>
             <option :key='option' v-for='option in options' :value="option" v-text='option'></option>
@@ -23,10 +10,7 @@
 </template>
 
 <script>
-import {
-    InfoSquareIcon
-} from 'vue-tabler-icons';
-import Help from './Help.vue';
+import TablerLabel from '../internal/Label.vue';
 
 export default {
     name: 'TablerEnum',
@@ -76,8 +60,7 @@ export default {
         }
     },
     components: {
-        InfoSquareIcon,
-        Help
+        TablerLabel
     }
 }
 </script>

package/components/{Input.vue → input/Input.vue}

@@ -1,19 +1,6 @@
 <template>
 <div class='row'>
-    <div class='col-12 d-flex'>
-        <span v-if='description' style='margin-right: 4px;'>
-            <InfoSquareIcon @click='help = true' size='20' class='cursor-pointer'/>
-            <Help v-if='help' @click='help = false' :label='label || placeholder' :description='description'/>
-        </span>
-        <label
-            v-if='label'
-            class="form-label"
-            v-text='label'
-            :class='{
-                "required": required
-            }'
-        ></label>
-    </div>
+    <TablerLabel :label='label || placeholder' :description='description' :required='required'><slot/></TablerLabel>
     <div class='col-12'>
         <template v-if='!rows || rows <= 1'>
             <input :disabled='disabled' :value='modelValue' @input='event => current = event.target.value' :type='type' :class='{
@@ -31,10 +18,7 @@
 </template>
 
 <script>
-import {
-    InfoSquareIcon
-} from 'vue-tabler-icons';
-import Help from './Help.vue';
+import TablerLabel from '../internal/Label.vue';
 
 export default {
     name: 'TablerInput',
@@ -92,8 +76,7 @@ export default {
         }
     },
     components: {
-        Help,
-        InfoSquareIcon
+        TablerLabel
     }
 }
 </script>

package/components/{Range.vue → input/Range.vue}

@@ -1,19 +1,6 @@
 <template>
 <div class='row'>
-    <div class='col-12 d-flex'>
-        <span v-if='description' style='margin-right: 4px;'>
-            <InfoSquareIcon @click='help = true' size='20' class='cursor-pointer'/>
-            <Help v-if='help' @click='help = false' :label='label' :description='description'/>
-        </span>
-        <label
-            v-if='label'
-            class="form-label"
-            v-text='label'
-            :class='{
-                "required": required
-            }'
-        ></label>
-    </div>
+    <TablerLabel :label='label' :description='description' :required='required'><slot/></TablerLabel>
     <div class='col-12'>
         <input :disabled='disabled' v-model='current' type="range" class="form-range" :min="min" :max="max" :step="step">
     </div>
@@ -21,10 +8,7 @@
 </template>
 
 <script>
-import {
-    InfoSquareIcon
-} from 'vue-tabler-icons';
-import Help from './Help.vue';
+import TablerLabel from '../internal/Label.vue';
 
 export default {
     name: 'TablerRange',
@@ -72,8 +56,7 @@ export default {
         }
     },
     components: {
-        Help,
-        InfoSquareIcon
+        TablerLabel
     }
 }
 </script>

package/components/{Toggle.vue → input/Toggle.vue}

@@ -1,30 +1,15 @@
 <template>
 <div>
-    <div class='d-flex align-items-center'>
-        <span v-if='description' style='margin-right: 4px;'>
-            <InfoSquareIcon @click='help = true' size='20' class='cursor-pointer'/>
-            <Help v-if='help' @click='help = false' :label='label || placeholder' :description='description'/>
-        </span>
-        <label
-            v-if='label'
-            class='form-label my-1 mx-2'
-            :class='{
-                "required": required
-            }'
-            v-text='label'
-        />
-        <label class="ms-auto form-check form-switch pt-2">
+    <TablerLabel :label='label' :required='required' :description='description'>
+        <label class='form-switch'>
             <input v-model='current' :disabled='disabled' class="form-check-input" type="checkbox">
         </label>
-    </div>
+    </TablerLabel>
 </div>
 </template>
 
 <script>
-import {
-    InfoSquareIcon
-} from 'vue-tabler-icons';
-import Help from './Help.vue';
+import TablerLabel from '../internal/Label.vue';
 
 export default {
     name: 'TablerToggle',
@@ -68,8 +53,7 @@ export default {
         }
     },
     components: {
-        InfoSquareIcon,
-        Help
+        TablerLabel
     }
 }
 </script>

package/components/internal/Label.vue

@@ -0,0 +1,50 @@
+<template>
+<div class='col-12 d-flex my-1'>
+    <span v-if='description' class='align-self-center'>
+        <InfoSquareIcon @click='help = true' size='20' class='cursor-pointer'/>
+        <Help v-if='help' @click='help = false' :label='label || placeholder' :description='description'/>
+    </span>
+    <div
+        v-if='label'
+        class="align-self-center px-2"
+        v-text='label'
+        :class='{
+            "required": required
+        }'
+    ></div>
+    <div class='ms-auto align-self-center'>
+        <slot/>
+    </div>
+</div>
+</template>
+
+<script>
+import {
+    InfoSquareIcon
+} from 'vue-tabler-icons';
+import Help from '../Help.vue';
+
+export default {
+    name: 'TablerInternalLabel',
+    props: {
+        required: {
+            type: Boolean,
+            default: false,
+        },
+        description: {
+            type: String,
+            default: '',
+        },
+        label: String,
+    },
+    data: function() {
+        return {
+            help: false,
+        }
+    },
+    components: {
+        Help,
+        InfoSquareIcon
+    }
+}
+</script>

package/lib.js

@@ -1,19 +1,22 @@
+// Inputs
+export { default as TablerRange } from './components/input/Range.vue'
+export { default as TablerColours } from './components/input/Colour.vue'
+export { default as TablerSelect } from './components/input/Select.vue'
+export { default as TablerToggle } from './components/input/Toggle.vue'
+export { default as TablerInput } from './components/input/Input.vue'
+export { default as TablerEnum } from './components/input/Enum.vue';
+
 export { default as TablerDropdown } from './components/Dropdown.vue'
-export { default as TablerRange } from './components/Range.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'
 export { default as TablerList } from './components/List.vue'
 export { default as TablerHelp } from './components/Help.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';

package/package.json

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