@tak-ps/vue-tabler 3.1.3 → 3.3.0

package/CHANGELOG.md

@@ -10,6 +10,14 @@
 
 ## Version History
 
+### v3.3.0
+
+- :rocket: Add `Human` mode (and make it the default) to `Epoch` and `EpochRange`
+
+### v3.2.0
+
+- :rocket: Add `required` Property to labelled components
+
 ### v3.1.3
 
 - :bug: `Toggle`: Fix modelValue watch state

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>
@@ -20,6 +27,10 @@ export default {
             type: String,
             required: false
         },
+        required: {
+            type: Boolean,
+            required: false
+        },
         options: {
             type: Array,
             required: true

package/components/Epoch.vue

@@ -12,16 +12,50 @@ export default {
         },
         format: {
             type: String,
-            default: 'ISO'
+            default: 'Human'
+        }
+    },
+    data: function() {
+        return {
+            suffix: {
+                1: 'st',
+                2: 'nd',
+                3: 'rd'
+            },
+            months: [
+                'January',
+                'February',
+                'March',
+                'April',
+                'May',
+                'June',
+                'July',
+                'August',
+                'September',
+                'October',
+                'November',
+                'December'
+            ]
         }
     },
     computed: {
         display: function() {
             const date = new Date(this.date)
+
             if (this.format === 'ISO') {
                 return date.toISOString()
                     .replace('T', ' ')
                     .replace(/:[0-9]+\.[0-9]+[A-Z]/, '');
+            } else if (this.format === 'Human') {
+                const day = String(date.getUTCDate());
+                const suffix = this.suffix[day.slice(day.length - 1)] || 'th';
+
+                const res = `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padEnd(2, '0')}, ${this.months[date.getUTCMonth()]} ${date.getUTCDate()}${suffix}`;
+                if (date.getFullYear() === new Date().getFullYear()) {
+                    return res;
+                } else {
+                    return res + `, ${date.getFullYear()}`;
+                }
             } else {
                 return date.toString();
             }

package/components/EpochRange.vue

@@ -6,6 +6,10 @@
 export default {
     name: 'EpochRange',
     props: {
+        format: {
+            type: String,
+            default: 'Human'
+        },
         start: {
             type: Number,
             required: true
@@ -15,17 +19,71 @@ export default {
             required: true
         },
     },
+    data: function() {
+        return {
+            suffix: {
+                1: 'st',
+                2: 'nd',
+                3: 'rd'
+            },
+            months: [
+                'January',
+                'February',
+                'March',
+                'April',
+                'May',
+                'June',
+                'July',
+                'August',
+                'September',
+                'October',
+                'November',
+                'December'
+            ]
+        }
+    },
     computed: {
         display: function() {
-            const start = new Date(this.start)
-            const end = new Date(this.end)
+            if (this.format === 'ISO') {
+                const start = new Date(this.start)
+                const end = new Date(this.end)
+
+                const start_dt = start.toISOString().replace(/[A-Z].*/, '');
+                const end_dt = end.toISOString().replace(/[A-Z].*/, '');
+                if (start_dt === end_dt) {
+                    return `${start.toISOString().replace(/[A-Z]/, ' ').replace(/:[0-9]+\.[0-9]+[A-Z]/, '')} - ${end.toISOString().replace(/^.*?[A-Z]/, '').replace(/:[0-9]+\.[0-9]+[A-Z]/, '')}`;
+                } else {
+                    return `${start.toISOString().replace(/[A-Z]/, ' ').replace(/:[0-9]+\.[0-9]+[A-Z]/, '')} - ${end.toISOString().replace(/[A-Z]/, ' ').replace(/:[0-9]+\.[0-9]+[A-Z]/, '')}`;
+                }
+            } else if (this.format === 'Human') {
+                const start = new Date(this.start)
+                const end = new Date(this.end)
+
+                const start_day = String(start.getUTCDate());
+                const start_day_suffix = this.suffix[start_day.slice(start_day.length - 1)] || 'th';
+                const end_day = String(end.getUTCDate());
+                const end_day_suffix = this.suffix[end_day.slice(end_day.length - 1)] || 'th';
+
+                const start_month = `${this.months[start.getUTCMonth()]} ${start.getUTCDate()}${start_day_suffix}`;
+                const end_month = `${this.months[end.getUTCMonth()]} ${end.getUTCDate()}${end_day_suffix}`;
+                const start_time = `${String(start.getHours()).padStart(2, '0')}:${String(start.getMinutes()).padEnd(2, '0')}`;
+                const end_time = `${String(end.getHours()).padStart(2, '0')}:${String(end.getMinutes()).padEnd(2, '0')}`;
 
-            const start_dt = start.toISOString().replace(/[A-Z].*/, '');
-            const end_dt = end.toISOString().replace(/[A-Z].*/, '');
-            if (start_dt === end_dt) {
-                return `${start.toISOString().replace(/[A-Z]/, ' ').replace(/:[0-9]+\.[0-9]+[A-Z]/, '')} - ${end.toISOString().replace(/^.*?[A-Z]/, '').replace(/:[0-9]+\.[0-9]+[A-Z]/, '')}`;
-            } else {
-                return `${start.toISOString().replace(/[A-Z]/, ' ').replace(/:[0-9]+\.[0-9]+[A-Z]/, '')} - ${end.toISOString().replace(/[A-Z]/, ' ').replace(/:[0-9]+\.[0-9]+[A-Z]/, '')}`;
+                if (start.getFullYear() === end.getFullYear() && start.getFullYear() === new Date().getFullYear()) {
+                    if (start.getUTCMonth() === end.getUTCMonth() && start.getUTCDate() === end.getUTCDate()) {
+                        return `${start_month} ${start_time} - ${end_time}`;
+                    } else {
+                        return `${start_month} ${start_time} - ${end_month} ${end_time}`;
+                    }
+                } else if (start.getFullYear() === end.getFullYear()) {
+                    if (start.getUTCMonth() === end.getUTCMonth() && start.getUTCDate() === end.getUTCDate()) {
+                        return `${start_month}, ${start.getFullYear()} ${start_time} - ${end_time}`;
+                    } else {
+                        return `${start_month}, ${start.getFullYear()} ${start_time} - ${end_month} ${end_time}`;
+                    }
+                } else {
+                    return `${start_month} ${start.getFullYear()}, ${start_time} - ${end_month} ${end.getFullYear()}, ${end_time}`;
+                }
             }
         }
     }

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

@@ -0,0 +1,50 @@
+<template>
+    <Modal>
+        <button type="button" class="btn-close" @click='close' aria-label="Close"></button>
+        <div class="modal-status bg-yellow"></div>
+        <div class="modal-header d-flex">
+            <span class='modal-title' v-text='label'></span>
+        </div>
+        <div class="modal-body text-center py-4">
+            <div class="text-muted" v-text='description'></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>
+    </Modal>
+</template>
+
+<script>
+import Modal from './Modal.vue';
+import {
+    InfoSquareIcon
+} from 'vue-tabler-icons'
+
+export default {
+    name: 'TablerHelp',
+    props: {
+        label: {
+            type: String,
+            require: false,
+            default: 'Help'
+        },
+        description: {
+            type: String,
+            require: true
+        }
+    },
+    methods: {
+        close: function() {
+            this.$emit('close');
+        }
+    },
+    components: {
+        Modal,
+        InfoSquareIcon
+    }
+}
+</script>

package/components/Input.vue

@@ -1,22 +1,41 @@
 <template>
-<div>
-    <label v-if='label' class="form-label" v-text='label'></label>
-
-    <template v-if='!rows || rows <= 1'>
-        <input :disabled='disabled' :value='modelValue' @input='event => current = event.target.value' :type='type' :class='{
-            "is-invalid": error
-        }' class="form-control" :placeholder='label||placeholder||""'/>
-    </template>
-    <template v-else>
-        <textarea style='white-space: pre;' :disabled='disabled' :rows='rows' :value='modelValue' @input='event => current = event.target.value' :type='type' :class='{
-            "is-invalid": error
-        }' class="form-control" :placeholder='label||placeholder||""'/>
-    </template>
-    <div v-if='error' v-text='error' class="invalid-feedback"></div>
+<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>
+    <div class='col-12'>
+        <template v-if='!rows || rows <= 1'>
+            <input :disabled='disabled' :value='modelValue' @input='event => current = event.target.value' :type='type' :class='{
+                "is-invalid": error
+            }' class="form-control" :placeholder='label||placeholder||""'/>
+        </template>
+        <template v-else>
+            <textarea style='white-space: pre;' :disabled='disabled' :rows='rows' :value='modelValue' @input='event => current = event.target.value' :type='type' :class='{
+                "is-invalid": error
+            }' class="form-control" :placeholder='label||placeholder||""'/>
+        </template>
+        <div v-if='error' v-text='error' class="invalid-feedback"></div>
+    </div>
 </div>
 </template>
 
 <script>
+import {
+    InfoSquareIcon
+} from 'vue-tabler-icons';
+import Help from './Help.vue';
+
 export default {
     name: 'TablerInput',
     props: {
@@ -24,10 +43,18 @@ export default {
             type: [String, Number],
             required: true
         },
+        required: {
+            type: Boolean,
+            default: false,
+        },
         disabled: {
             type: Boolean,
             default: false,
         },
+        description: {
+            type: String,
+            default: '',
+        },
         rows: {
             type: Number,
             default: 1
@@ -42,6 +69,7 @@ export default {
     },
     data: function() {
         return {
+            help: false,
             current: ''
         }
     },
@@ -62,6 +90,10 @@ export default {
                 this.$emit('update:modelValue', this.current);
             }
         }
+    },
+    components: {
+        Help,
+        InfoSquareIcon
     }
 }
 </script>

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 {

package/lib.js

@@ -1,5 +1,6 @@
 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'

package/package.json

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