Add Border field and Improve Vue Script

assets/vendor/manager/src/components/helpers/Border.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { onBeforeMount, ref, computed, onMounted, inject, watch } from 'vue';
+import { ColorPicker } from 'vue-color-kit'
+
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps(['modelValue', 'field']);
+const constant = inject('constant', {});
+const theme = inject('theme', 'light');
+const data = ref({
+    'border_width' : '1',
+    'border_style' : 'solid',
+    'border_color' : {
+        light: '#ccc',
+        dark: '#ccc'
+    }
+})
+
+onBeforeMount(()=>{
+    if (typeof props.modelValue !== 'undefined' && props.modelValue !== '') {
+        data.value = {
+            ...data.value,
+            ...JSON.parse(props.modelValue)
+        };
+    }
+})
+
+onMounted(()=>{
+    document.addEventListener('click', function(event) {
+        const elem          = document.getElementById(props.field.input.id+'-colorpicker');
+        const circle_light  = document.getElementById(props.field.input.id+'-colorcircle-light');
+        const circle_dark   = document.getElementById(props.field.input.id+'-colorcircle-dark');
+        if (_showColorPicker.value === true) {
+            if (
+                elem 
+                && circle_light 
+                && !circle_light.contains(event.target) 
+                && !elem.contains(event.target)
+                && (
+                    (
+                        circle_dark
+                        && !circle_dark.contains(event.target)
+                    )
+                    || parseInt(constant.color_mode) === 0 
+                )
+            ) {
+                _showColorPicker.value = false;
+            }
+        }    
+    });
+})
+const _showColorPicker = ref(false);
+const _currentColor = ref('');
+const _currentColorMode = ref('light');
+function showColorPicker(colorMode) {
+    _currentColor.value     = data.value.border_color[colorMode];
+    _currentColorMode.value = colorMode;
+    _showColorPicker.value  = true;
+}
+
+function changeColor(color) {
+    const { r, g, b, a } = color.rgba;
+    if (r === 0, g === 0, b === 0, a === 0) {
+        data.value.border_color[_currentColorMode.value] = '';
+    } else {
+        data.value.border_color[_currentColorMode.value] = `rgba(${r}, ${g}, ${b}, ${a})`;
+    }
+}
+
+const border_text = computed(() => {
+  return JSON.stringify(data.value);
+})
+watch(border_text, (newText) => {
+    if (newText !== props.modelValue) {
+        emit('update:modelValue', newText);
+    }
+})
+</script>
+<template>
+    <div class="row g-3">
+        <div class="col-12">
+            <label :for="props.field.input.id + `_border_width`" class="form-label">{{ data.border_width }}px</label>
+            <input v-model="data.border_width" type="range" class="form-range" min="1" max="50" step="1" :id="props.field.input.id + `_border_width`">
+        </div>
+        <div class="col-6">
+            <label class="form-label" :for="props.field.input.id + `_border_style`">Border Style</label>
+            <select class="form-select" v-model="data.border_style" :id="props.field.input.id + `_border_style`">
+                <option value="solid">Solid</option>
+                <option value="dotted">Dotted</option>
+                <option value="dashed">Dashed</option>
+                <option value="double">Double</option>
+            </select>
+        </div>
+        <div class="col-6">
+            <div class="row">
+                <div :class="{
+                    'col-4 text-center' : (constant.color_mode === '1'),
+                    'col-12': (constant.color_mode !== '1')
+                }">
+                    <font-awesome-icon :id="props.field.input.id+`-colorcircle-light`" :icon="['fas', 'circle']" size="3x" class="border astroid-color-picker" :style="{'color': data.border_color.light}" @click="showColorPicker('light')" />
+                    <div v-if="constant.color_mode === '1'">Light</div>
+                </div>
+                <div v-if="constant.color_mode === '1'" class="col text-center py-3">
+                    <font-awesome-icon :icon="['fas', 'arrows-left-right']" />
+                </div>
+                <div v-if="constant.color_mode === '1'" class="col-4 text-center">
+                    <font-awesome-icon :id="props.field.input.id+`-colorcircle-dark`" :icon="['fas', 'circle']" size="3x" class="border astroid-color-picker" :style="{'color': data.border_color.dark}" @click="showColorPicker('dark')" />
+                    <div>Dark</div>
+                </div>
+            </div>
+            <input type="hidden" :name="props.field.input.name+`[font_color]`" :id="props.field.input.id+`_font_color`" v-model="props.modelValue['font_color']" />
+            <ColorPicker v-if="_showColorPicker"
+                :theme="theme"
+                :color="_currentColor"
+                :sucker-hide="true"
+                :sucker-canvas="null"
+                :sucker-area="[]"
+                :id="props.field.input.id+`-colorpicker`"
+                @changeColor="changeColor"
+            />
+        </div>
+    </div>
+    <input
+        :id="props.field.input.id"
+        :name="props.field.input.name"
+        :value="modelValue"
+        type="hidden"
+    />
+</template>

assets/vendor/manager/src/components/helpers/Fields.vue

@@ -19,6 +19,7 @@ import Icons from './Icons.vue';
 import Editor from './Editor.vue';
 import Categories from './Categories.vue';
 import Assignment from './Assignment.vue';
+import Border from './Border.vue';
 
 const emit = defineEmits(['update:contentlayout', 'update:loadPreset', 'update:getPreset', 'update:subFormState']);
 const props = defineProps({
@@ -111,7 +112,10 @@ function updateContentLayout() {
         <Colors v-model="props.scope[props.field.name]" :field="props.field" />
     </div>
     <div v-else-if="props.field.input.type === `astroidrange`">
-        <label :for="props.field.input.id" class="form-label">{{ props.scope[props.field.name] }}{{ props.field.input.postfix }}</label>
+        <div class="row">
+            <div class="col"><input type="number" class="form-control form-control-sm" aria-label="Range Number" v-model="props.scope[props.field.name]"></div>
+            <div class="col-auto"><label :for="props.field.input.id" class="form-label">{{ props.field.input.postfix }}</label></div>
+        </div>
         <input type="range" class="form-range" :name="props.field.input.name" v-model="props.scope[props.field.name]" :min="props.field.input.min" :max="props.field.input.max" :step="props.field.input.step" :id="props.field.input.id">
     </div>
     <div v-else-if="props.field.input.type === `astroidicon`">
@@ -178,4 +182,7 @@ function updateContentLayout() {
     <div v-else-if="props.field.input.type === `astroidassignment`" class="astroid-assignment">
         <Assignment v-model="props.scope[props.field.name]" :field="props.field" />
     </div>
+    <div v-else-if="props.field.input.type === `astroidborder`" class="astroid-border">
+        <Border v-model="props.scope[props.field.name]" :field="props.field" />
+    </div>
 </template>

assets/vendor/manager/src/components/helpers/Modal.vue

@@ -56,6 +56,9 @@ function saveModal(){
 function updateSubForm(value) {
     subFormOpen.value = value;
 }
+function sidebarClick(id) {
+    document.getElementById(id).scrollIntoView();
+}
 </script>
 <template>
     <div class="astroid-modal modal d-block" :id="props.element.type+`-`+props.element.id" tabindex="-1" aria-hidden="true">
@@ -71,7 +74,10 @@ function updateSubForm(value) {
                 </ul>
                 <div class="tab-content modal-body" :id="`modal-tab-content-`+props.element.id">
                     <div v-for="(fieldset, idx) in form.content" :key="fieldset.name" class="tab-pane fade" :class="{'show active' : idx === 0}" :id="fieldset.name+`-tab-pane-`+props.element.id" role="tabpanel" :aria-labelledby="fieldset.name+`-tab`" tabindex="0">
-                        <div v-for="(group, gid) in fieldset.childs" :key="gid" :class="`group-`+gid">
+                        <nav v-if="Object.keys(fieldset.childs).length > 3" class="nav nav-pills d-none d-xl-block flex-column position-fixed overflow-hidden top-50 start-0 translate-middle-y rounded-end-4">
+                            <a v-for="(group, gid) in fieldset.childs" :key="gid" class="nav-link bg-body-tertiary rounded-0" @click.prevent="sidebarClick(`group-`+gid+`-`+props.element.id)" href="#" :class="{'d-none' : gid === 'none' || group.title === ''}">{{ group.title }}</a>
+                        </nav>
+                        <div v-for="(group, gid) in fieldset.childs" :key="gid" :class="`group-`+gid" :id="`group-`+gid+`-`+props.element.id">
                             <div v-if="group.title || group.description" class="heading-group mb-4">
                                 <h5 v-if="group.title" class="astroid-heading-line"><span>{{ group.title }}</span></h5>
                                 <p v-if="group.description" class="form-text">{{ group.description }}</p>

assets/vendor/manager/src/components/helpers/Typography.vue

@@ -127,7 +127,7 @@ onMounted(()=>{
                         circle_dark
                         && !circle_dark.contains(event.target)
                     )
-                    || parseInt(props.field.input.options.colormode) === 0 
+                    || parseInt(constant.color_mode) === 0 
                 )
             ) {
                 _showColorPicker.value = false;
@@ -278,16 +278,16 @@ function getRandomInt(min, max) {
                     <div class="astroid-color">
                         <div class="row">
                             <div :class="{
-                                'col-4 text-center' : (props.field.input.options.colormode === '1'),
-                                'col-12': (props.field.input.options.colormode !== '1')
+                                'col-4 text-center' : (constant.color_mode === '1'),
+                                'col-12': (constant.color_mode !== '1')
                             }">
                                 <font-awesome-icon :id="props.field.input.id+`-colorcircle-light`" :icon="['fas', 'circle']" size="3x" class="border astroid-color-picker" :style="{'color': _color.light}" @click="showColorPicker('light')" />
-                                <div v-if="props.field.input.options.colormode === '1'">Light</div>
+                                <div v-if="constant.color_mode === '1'">Light</div>
                             </div>
-                            <div v-if="props.field.input.options.colormode === '1'" class="col text-center py-3">
+                            <div v-if="constant.color_mode === '1'" class="col text-center py-3">
                                 <font-awesome-icon :icon="['fas', 'arrows-left-right']" />
                             </div>
-                            <div v-if="props.field.input.options.colormode === '1'" class="col-4 text-center">
+                            <div v-if="constant.color_mode === '1'" class="col-4 text-center">
                                 <font-awesome-icon :id="props.field.input.id+`-colorcircle-dark`" :icon="['fas', 'circle']" size="3x" class="border astroid-color-picker" :style="{'color': _color.dark}" @click="showColorPicker('dark')" />
                                 <div>Dark</div>
                             </div>

framework/library/astroid/Admin.php

@@ -145,6 +145,7 @@ protected function manager()
             'tpl_template_name'     => $template->template,
             'template_title'        => $template->title,
             'enable_widget'         => $enable_widget,
+            'color_mode'            => $plg_color_mode,
             'astroid_version'       => Helper\Constants::$astroid_version,
             'astroid_link'          => Helper\Constants::$astroid_link,
             'document_link'         => Helper\Constants::$documentation_link,