@tak-ps/vue-tabler 3.1.2 → 3.2.0

package/CHANGELOG.md

@@ -10,6 +10,15 @@
 
 ## Version History
 
+### v3.2.0
+
+- :rocket: Add `required` Property to labelled components
+
+### v3.1.3
+
+- :bug: `Toggle`: Fix modelValue watch state
+- :bug: `Enum`: Fix modelValue watch state
+
 ### v3.1.2
 
 - :rocket: `Toggle`: Increase padding between label and toggle

package/components/Enum.vue

@@ -1,6 +1,13 @@
 <template>
 <div>
-    <label v-if='label' class="form-label" v-text='label'></label>
+    <label
+        v-if='label'
+        class="form-label"
+        :class='{
+            "required": required
+        }'
+        v-text='label'
+    ></label>
 
     <select v-model='current' :disabled='disabled' class='form-select'>
         <option v-for='option in options' :value="option" v-text='option'></option>
@@ -10,7 +17,7 @@
 
 <script>
 export default {
-    name: 'TablerInput',
+    name: 'TablerEnum',
     props: {
         modelValue: {
             type: String,
@@ -20,6 +27,10 @@ export default {
             type: String,
             required: false
         },
+        required: {
+            type: Boolean,
+            required: false
+        },
         options: {
             type: Array,
             required: true
@@ -40,6 +51,9 @@ export default {
         else this.current = this.modelValue;
     },
     watch: {
+        modelValue: function() {
+            this.current = this.modelValue;
+        },
         current: function() {
             if (this.current === this.modelValue) return;
             this.$emit('update:modelValue', this.current);

package/components/Err.vue

@@ -6,6 +6,7 @@
             <AlertCircleIcon/>
             <h3>Website Error</h3>
             <div class="text-muted" v-text='err.message'></div>
+            <pre v-if='err.body' v-text='err.body'></pre>
         </div>
         <div class="modal-footer">
             <div class="w-100">

package/components/Input.vue

@@ -1,6 +1,13 @@
 <template>
 <div>
-    <label v-if='label' class="form-label" v-text='label'></label>
+    <label
+        v-if='label'
+        class="form-label"
+        v-text='label'
+        :class='{
+            "required": required
+        }'
+    ></label>
 
     <template v-if='!rows || rows <= 1'>
         <input :disabled='disabled' :value='modelValue' @input='event => current = event.target.value' :type='type' :class='{
@@ -24,6 +31,10 @@ export default {
             type: [String, Number],
             required: true
         },
+        required: {
+            type: Boolean,
+            default: false,
+        },
         disabled: {
             type: Boolean,
             default: false,

package/components/List.vue

@@ -1,6 +1,13 @@
 <template>
 <div class="dropdown">
-    <label class='form-label' v-text='label'></label>
+    <label
+        v-if='label'
+        class='form-label'
+        :class='{
+            "required": required
+        }'
+        v-text='label'
+    ></label>
     <div type="button" ref='button' id="list-menu-button" data-bs-toggle="dropdown" aria-expanded="false" class='border rounded' style='height: 36px;'>
         <div class='d-flex mx-2'>
             <span v-if='ele' style='padding-top: 6px;' v-text='ele[namekey]'/>
@@ -41,6 +48,10 @@ export default {
             type: String,
             default: ''
         },
+        required: {
+            type: Boolean,
+            default: false
+        },
         disabled: {
             type: Boolean,
             default: false

package/components/Toggle.vue

@@ -1,7 +1,14 @@
 <template>
 <div>
     <div class='d-flex align-items-center'>
-        <label class='form-label my-1 mx-2' v-text='label'/>
+        <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">
             <input v-model='current' :disabled='disabled' class="form-check-input" type="checkbox">
         </label>
@@ -21,7 +28,14 @@ export default {
             type: Boolean,
             default: false
         },
-        label: String
+        required: {
+            type: Boolean,
+            default: false
+        },
+        label: {
+            type: String,
+            default: ''
+        }
     },
     data: function() {
         return {
@@ -32,6 +46,9 @@ export default {
         this.current = this.modelValue;
     },
     watch: {
+        modelValue: function() {
+            this.current = this.modelValue;
+        },
         current: function() {
             if (this.current === this.modelValue) return;
             this.$emit('update:modelValue', this.current);

package/package.json

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