@tak-ps/vue-tabler 3.2.0 → 3.4.0

package/CHANGELOG.md

@@ -10,6 +10,14 @@
 
 ## Version History
 
+### v3.4.0
+
+- :rocket: Add `TablerSchema` component for creating forms from basic JSON Schemas
+
+### 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

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/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,29 +1,41 @@
 <template>
-<div>
-    <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='{
-            "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: {
@@ -39,6 +51,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        description: {
+            type: String,
+            default: '',
+        },
         rows: {
             type: Number,
             default: 1
@@ -53,6 +69,7 @@ export default {
     },
     data: function() {
         return {
+            help: false,
             current: ''
         }
     },
@@ -73,6 +90,10 @@ export default {
                 this.$emit('update:modelValue', this.current);
             }
         }
+    },
+    components: {
+        Help,
+        InfoSquareIcon
     }
 }
 </script>

package/components/Schema.vue

@@ -0,0 +1,128 @@
+<template>
+<div class='px-2 py-2'>
+    <div :key='key' v-for='key in Object.keys(schema.properties)' class='py-2 floating-input'>
+        <template v-if='schema.properties[key].enum'>
+            <TablerEnum
+                :label='key'
+                :disabled='disabled'
+                v-model='data[key]'
+                :options='schema.properties[key].enum'
+                :default='schema.properties[key].default'
+            />
+        </template>
+        <template v-else-if='schema.properties[key].type === "string"'>
+            <TablerInput :label='key' :disabled='disabled' v-model='data[key]'/>
+        </template>
+        <template v-else-if='schema.properties[key].type === "boolean"'>
+            <TablerToggle :label='key' :disabled='disabled' v-model='data[key]'/>
+        </template>
+        <template v-else-if='schema.properties[key].type === "array"'>
+            <div class='d-flex'>
+                <label class='form-label' v-text='key'/>
+                <div class='ms-auto'>
+                    <PlusIcon v-if='!disabled' @click='push(key)' class='cursor-pointer'/>
+                </div>
+            </div>
+
+            <div :key='i' v-for='(arr, i) of data[key]' class='border rounded my-2 py-2 mx-2 px-2'>
+                <div class='d-flex'>
+                    <div class='mx-2 my-2'>Entry <span v-text='i + 1'/></div>
+                    <div class='ms-auto mx-2 my-2'>
+                        <TrashIcon v-if='!disabled' @click='data[key].splice(i, 1)' class='cursor-pointer'/>
+                    </div>
+                </div>
+
+                <GenericSchema :schema='schema.properties[key].items' :disabled='disabled' v-model='data[key][i]' />
+            </div>
+        </template>
+        <template v-else>
+            <div class='row'>
+                <TablerInput :label='key' :rows='3' :disabled='disabled' v-model='data[key]'/>
+            </div>
+        </template>
+    </div>
+</div>
+</template>
+
+<script>
+import TablerInput from './Input.vue';
+import TablerToggle from './Toggle.vue';
+import TablerEnum from './Enum.vue';
+import {
+    PlusIcon,
+    TrashIcon,
+} from 'vue-tabler-icons'
+
+export default {
+    name: 'TablerSchema',
+    props: {
+        modelValue: {
+            type: Object,
+            required: true
+        },
+        schema: {
+            type: Object,
+            required: true
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data: function() {
+        return {
+            data: {},
+        };
+    },
+    watch: {
+        data: {
+            deep: true,
+            handler: function() {
+                this.$emit('update:modelValue', this.data);
+            }
+        },
+    },
+    mounted: async function() {
+        this.data = JSON.parse(JSON.stringify(this.modelValue));
+
+        for (const key of Object.keys(this.schema.properties)) {
+            if (this.schema.properties[key].display === 'table') {
+                this.edit[key] = new Map();
+            }
+        }
+
+        if (this.schema.type === 'object' && this.schema.properties) {
+            for (const key in this.schema.properties) {
+                if (!this.data[key] && this.schema.properties[key].type === 'array') {
+                    this.data[key] = [];
+                }
+            }
+        }
+    },
+    methods: {
+        remove: function(key, arr, i) {
+            this.edit[key].delete(arr);
+            this.data[key].splice(i, 1)
+        },
+        push: function(key) {
+            if (!this.schema.properties[key].items) this.data[key].push('');
+            if (this.schema.properties[key].items.type === 'object') {
+                this.data[key].push({});
+            } else if (this.schema.properties[key].items.type === 'array') {
+                this.data[key].push([]);
+            } else if (this.schema.properties[key].items.type === 'boolean') {
+                this.data[key].push(false);
+            } else {
+                this.data[key].push('');
+            }
+        }
+    },
+    components: {
+        PlusIcon,
+        TrashIcon,
+        TablerInput,
+        TablerToggle,
+        TablerEnum
+    }
+}
+</script>

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'
@@ -13,3 +14,4 @@ export { default as TablerEpoch } from './components/Epoch.vue';
 export { default as TablerEpochRange } from './components/EpochRange.vue';
 export { default as TablerMarkdown } from './components/Markdown.vue';
 export { default as TablerDelete } from './components/Delete.vue';
+export { default as TablerSchema } from './components/Schema.vue';

package/package.json

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