@tak-ps/vue-tabler 3.78.1 → 3.79.0

package/components/Schema.vue

@@ -106,7 +106,8 @@
     </div>
 </template>
 
-<script>
+<script setup>
+import { ref, watch, onMounted } from 'vue'
 import TablerInput from './input/Input.vue';
 import TablerToggle from './input/Toggle.vue';
 import TablerEnum from './input/Enum.vue';
@@ -116,83 +117,63 @@ import {
     IconTrash,
 } from '@tabler/icons-vue';
 
-export default {
-    name: 'TablerSchema',
-    components: {
-        IconPlus,
-        IconTrash,
-        TablerInput,
-        TablerToggle,
-        TablerEnum,
-        TablerLoading
+const props = defineProps({
+    modelValue: {
+        type: Object,
+        required: true
     },
-    props: {
-        modelValue: {
-            type: Object,
-            required: true
-        },
-        schema: {
-            type: Object,
-            required: true
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        }
-    },
-    emits: [
-        'update:modelValue'
-    ],
-    data: function() {
-        return {
-            loading: true,
-            s: {},
-            data: {},
-        };
-    },
-    watch: {
-        data: {
-            deep: true,
-            handler: function() {
-                this.$emit('update:modelValue', this.data);
-            }
-        },
+    schema: {
+        type: Object,
+        required: true
     },
-    mounted: async function() {
-        this.loading = true;
-        this.data = JSON.parse(JSON.stringify(this.modelValue));
-        this.s = JSON.parse(JSON.stringify(this.schema));
+    disabled: {
+        type: Boolean,
+        default: false
+    }
+})
 
-        if (this.s.type === 'object' && this.s.properties) {
-            for (const req of (this.s.required || [])) {
-                this.s.properties[req].required = true;
-            }
+const emit = defineEmits(['update:modelValue'])
 
-            for (const key in this.s.properties) {
-                if (!this.data[key] && this.s.properties[key].type === 'array') {
-                    this.data[key] = [];
-                }
-            }
+const loading = ref(true)
+const s = ref({})
+const data = ref({})
+
+const push = (key) => {
+    if (!props.schema.properties[key].items) data.value[key].push('');
+    if (props.schema.properties[key].items.type === 'object') {
+        data.value[key].push({});
+    } else if (props.schema.properties[key].items.type === 'array') {
+        data.value[key].push([]);
+    } else if (props.schema.properties[key].items.type === 'boolean') {
+        data.value[key].push(false);
+    } else {
+        data.value[key].push('');
+    }
+}
+
+// Watch for data changes
+watch(data, () => {
+    emit('update:modelValue', data.value);
+}, { deep: true })
+
+// Mounted lifecycle
+onMounted(async () => {
+    loading.value = true;
+    data.value = JSON.parse(JSON.stringify(props.modelValue));
+    s.value = JSON.parse(JSON.stringify(props.schema));
+
+    if (s.value.type === 'object' && s.value.properties) {
+        for (const req of (s.value.required || [])) {
+            s.value.properties[req].required = true;
         }
 
-        this.loading = false;
-    },
-    methods: {
-        remove: function(key, arr, i) {
-            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('');
+        for (const key in s.value.properties) {
+            if (!data.value[key] && s.value.properties[key].type === 'array') {
+                data.value[key] = [];
             }
         }
     }
-}
+
+    loading.value = false;
+})
 </script>

package/components/Slidedown.vue

@@ -0,0 +1,104 @@
+<template>
+    <div
+        class="hover-expandable rounded position-relative px-2 py-2"
+        :class="{ 'is-expanded': isExpanded }"
+    >
+
+    <div class='mb-2'>
+        <slot/>
+    </div>
+
+    <div class="expandable-content-wrapper" ref="contentWrapperRef">
+      <div class="expandable-content-inner p-3">
+        <slot name="expanded"></slot>
+      </div>
+    </div>
+
+    <div class="arrow-container" @click="toggle" title="Toggle content">
+        <IconChevronDown
+            size="24"
+            stroke="1.5"
+            class='arrow'
+            :class="{ 'expanded': isExpanded }"
+        />
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import {
+    IconChevronDown
+} from '@tabler/icons-vue';
+
+const isExpanded = ref(false);
+
+const contentWrapperRef = ref(null);
+
+function toggle() {
+  isExpanded.value = !isExpanded.value;
+  const el = contentWrapperRef.value;
+
+  if (el) {
+    if (isExpanded.value) {
+      el.style.maxHeight = el.scrollHeight + 'px';
+    } else {
+      el.style.maxHeight = null;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.hover-expandable {
+    border: 1px solid var(--tblr-border-color);
+    transition: border-color 0.2s ease;
+}
+
+.hover-expandable:not(.is-expanded):hover {
+    border: 1px solid color-mix(in srgb, var(--tblr-border-color), white 25%);
+}
+
+.hover-expandable:not(.is-expanded):hover .arrow-container {
+    border-color: var(--tblr-primary-rgb);
+}
+
+.hover-expandable:not(.is-expanded):hover .arrow {
+    color: var(--tblr-secondary-color, white);
+}
+
+.expandable-content-wrapper {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease-out;
+}
+
+.arrow-container {
+    border: 1px solid var(--tblr-border-color);
+    border-radius: 50%;
+    background-color: var(--tblr-border-color);
+    color: var(--tblr-body-color);
+    position: absolute;
+    bottom: -12px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.arrow {
+    transition: transform 0.3s ease-out, color 0.2s ease;
+}
+
+.arrow.expanded {
+    transform: rotate(180deg);
+}
+</style>
+
+

package/components/input/Colour.vue

@@ -36,90 +36,89 @@
     </div>
 </template>
 
-<script>
-import TablerLabel from '../internal/Label.vue';
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+import TablerLabel from '../internal/Label.vue'
 
-export default {
-    name: 'TablerColour',
-    components: {
-        TablerLabel
+const props = defineProps({
+    modelValue: {
+        type: String,
+        required: true
     },
-    props: {
-        modelValue: {
-            type: String,
-            required: true
-        },
-        autofocus: {
-            type: Boolean,
-            default: false
-        },
-        default: {
-            type: String,
-            required: false
-        },
-        required: {
-            type: Boolean,
-            required: false
-        },
-        description: {
-            type: String,
-            required: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false,
-        },
-        label: String,
+    autofocus: {
+        type: Boolean,
+        default: false
     },
-    emits: [
-        'blur', 'update:modelValue'
-    ],
-    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'
-            }
-        }
+    default: {
+        type: String,
+        default: ''
     },
-    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]);
-        }
+    required: {
+        type: Boolean,
+        default: false
     },
-    mounted: function() {
-        if (!this.modelValue && this.default) {
-            this.current = this.invertColours[this.default]
-        } else {
-            this.current = this.invertColours[this.modelValue];
-        }
-    }
+    description: {
+        type: String,
+        default: ''
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    label: {
+        type: String,
+        default: ''
+    },
+})
+
+const emit = defineEmits([
+    'blur', 'update:modelValue'
+])
+
+const current = ref('')
+
+const invertColours = {
+    '#1d273b': 'dark',
+    '#ffffff': 'white',
+    '#206bc4': 'blue',
+    '#4299e1': 'azure',
+    '#4263eb': 'indigo',
+    '#ae3ec9': 'purple',
+    '#d6336c': 'pink',
+    '#d63939': 'red',
+    '#f76707': 'orange',
+    '#f59f00': 'yellow',
+    '#74b816': 'lime'
 }
+
+const colours = {
+    dark: '#1d273b',
+    white: '#ffffff',
+    blue: '#206bc4',
+    azure: '#4299e1',
+    indigo: '#4263eb',
+    purple: '#ae3ec9',
+    pink: '#d6336c',
+    red: '#d63939',
+    orange: '#f76707',
+    yellow: '#f59f00',
+    lime: '#74b816'
+}
+
+watch(() => props.modelValue, (newValue) => {
+    current.value = invertColours[newValue]
+})
+
+watch(current, (newValue) => {
+    if (colours[newValue] === props.modelValue) return
+    emit('update:modelValue', colours[newValue])
+})
+
+onMounted(() => {
+    if (!props.modelValue && props.default) {
+        current.value = invertColours[props.default]
+    } else {
+        current.value = invertColours[props.modelValue]
+    }
+})
 </script>

package/components/input/Enum.vue

@@ -27,70 +27,64 @@
     </div>
 </template>
 
-<script>
-import TablerLabel from '../internal/Label.vue';
+<script setup>
+import { ref, watch } from 'vue'
+import TablerLabel from '../internal/Label.vue'
 
-export default {
-    name: 'TablerEnum',
-    components: {
-        TablerLabel
+const props = defineProps({
+    modelValue: {
+        type: String,
+        required: true
     },
-    props: {
-        modelValue: {
-            type: String,
-            required: true
-        },
-        autofocus: {
-            type: Boolean,
-            default: false
-        },
-        default: {
-            type: String,
-            required: false
-        },
-        required: {
-            type: Boolean,
-            required: false
-        },
-        description: {
-            type: String,
-            required: false
-        },
-        options: {
-            type: Array,
-            required: true
-        },
-        disabled: {
-            type: Boolean,
-            default: false,
-        },
-        label: String,
+    autofocus: {
+        type: Boolean,
+        default: false
     },
-    emits: [
-        'blur',
-        'update:modelValue'
-    ],
-    data: function() {
-        const data = {
-            current: ''
-        }
+    default: {
+        type: String,
+        default: ''
+    },
+    required: {
+        type: Boolean,
+        default: false
+    },
+    description: {
+        type: String,
+        default: ''
+    },
+    options: {
+        type: Array,
+        required: true
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    label: {
+        type: String,
+        default: ''
+    },
+})
 
-        if (!this.modelValue && this.default) {
-            data.current = this.default
-        } else {
-            data.current = this.modelValue;
-        }
+const emit = defineEmits([
+    'blur',
+    'update:modelValue'
+])
 
-        return data;
-    },
-    watch: {
-        modelValue: function() {
-            this.current = this.modelValue;
-        },
-        current: function() {
-            if (this.current === this.modelValue) return;
-            this.$emit('update:modelValue', this.current);
-        }
-    }
+// Initialize current value
+const current = ref('')
+if (!props.modelValue && props.default) {
+    current.value = props.default
+} else {
+    current.value = props.modelValue
 }
+
+watch(() => props.modelValue, (newValue) => {
+    current.value = newValue
+})
+
+watch(current, (newValue) => {
+    if (newValue === props.modelValue) return
+    emit('update:modelValue', newValue)
+})
 </script>

package/components/input/FileInput.vue

@@ -41,63 +41,66 @@
     </div>
 </template>
 
-<script>
-import TablerLabel from '../internal/Label.vue';
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import TablerLabel from '../internal/Label.vue'
 
-export default {
-    name: 'TablerFileInput',
-    components: {
-        TablerLabel
+const props = defineProps({
+    modelValue: {
+        type: [String, Number],
+        required: true
     },
-    props: {
-        modelValue: {
-            type: [String, Number],
-            required: true
-        },
-        autofocus: {
-            type: Boolean,
-            default: false
-        },
-        loading: {
-            type: Boolean,
-            default: false
-        },
-        required: {
-            type: Boolean,
-            default: false,
-        },
-        disabled: {
-            type: Boolean,
-            default: false,
-        },
-        accept: {
-            type: String,
-        },
-        description: {
-            type: String,
-            default: '',
-        },
-        label: String,
-        placeholder: String,
-        error: String,
+    autofocus: {
+        type: Boolean,
+        default: false
     },
-    emits: ['blur', 'change'],
-    data: function() {
-        return {
-            help: false,
-            internal_error: '',
-        }
+    loading: {
+        type: Boolean,
+        default: false
     },
-    computed: {
-        errorstr: function() {
-            if (this.error) return this.error;
-            return this.internal_error;
-        },
+    required: {
+        type: Boolean,
+        default: false,
     },
-    mounted: function() {
-        if (this.autofocus) {
-            this.$refs['text-input'].focus();
-        }
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    accept: {
+        type: String,
+        default: ''
+    },
+    description: {
+        type: String,
+        default: '',
+    },
+    label: {
+        type: String,
+        default: ''
+    },
+    placeholder: {
+        type: String,
+        default: ''
+    },
+    error: {
+        type: String,
+        default: ''
+    },
+})
+
+defineEmits(['blur', 'change'])
+
+const textInput = ref(null)
+const internal_error = ref('')
+
+const errorstr = computed(() => {
+    if (props.error) return props.error
+    return internal_error.value
+})
+
+onMounted(() => {
+    if (props.autofocus) {
+        textInput.value.focus()
     }
-}
+})
 </script>