Merge pull request #673 from templaza/v3

v3.0.15

assets/vendor/astroid/scss/joomla/_base.scss

@@ -22,4 +22,29 @@ ul.tags {
 }
 .pagenavigation .pagination a {
   padding: 5px 15px;
+}
+.as-btn-text {
+  --bs-btn-padding-x: 0;
+  --bs-btn-padding-y: 0;
+  position: relative;
+  text-decoration: none;
+  &:after {
+    position: absolute;
+    content: '';
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    border-bottom: 1px solid var(--bs-border-color);
+    transition: transform 0.2s ease;
+    -ms-transform: scaleX(0);
+    transform: scaleX(0);
+    transform-origin: 0 0;
+  }
+  &:hover {
+    text-decoration: none;
+    &:after {
+      -ms-transform: scaleX(1);
+      transform: scaleX(1);
+    }
+  }
 }

assets/vendor/astroid/scss/utilities/_animations.scss

@@ -561,6 +561,7 @@
 }
 
 .as-effect-light-up {
+	transition: filter 0.3s ease-in-out;
 	&:hover {
 		filter: brightness( 100% ) contrast( 113% ) saturate( 159% ) blur( 0.2px ) hue-rotate( 0deg );
 	}

assets/vendor/astroid/scss/utilities/_carousel.scss

@@ -160,6 +160,22 @@
     .slick-next {
       color: white;
     }
+    .slick-dots {
+      li {
+        button {
+          &:before {
+            border-color: white;
+          }
+        }
+        &.slick-active {
+          button {
+            &:before {
+              background-color: white;
+            }
+          }
+        }
+      }
+    }
   }
 }
 
@@ -169,5 +185,21 @@
     .slick-next {
       color: #1a1a1a;
     }
+    .slick-dots {
+      li {
+        button {
+          &:before {
+            border-color: #1a1a1a;
+          }
+        }
+        &.slick-active {
+          button {
+            &:before {
+              background-color: #1a1a1a;
+            }
+          }
+        }
+      }
+    }
   }
 }

assets/vendor/astroid/scss/widgets/_grid.scss

@@ -19,4 +19,7 @@
     background: none;
     border: none;
   }
+  .card-img-overlay {
+    top: auto;
+  }
 }

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

@@ -0,0 +1,129 @@
+<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>
+                <option value="none">None</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

@@ -27,6 +27,18 @@ function checkShow(field) {
     }
     return true;
 }
+function checkShowGroup(fields) {
+    let hasField = false;
+    if (fields.length) {
+        fields.forEach(field => {
+            if (typeof field.ngShow === 'string' && checkShow(field)) {
+                hasField = true;
+                return hasField;
+            }
+        });
+    }
+    return hasField;
+}
 function saveModal(){
     let allowSave = true;
     if (subFormOpen.value.value) {
@@ -56,6 +68,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 +86,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" v-show="checkShowGroup(group.fields)" @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" v-show="checkShowGroup(group.fields)">
                             <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/SubForm.vue

@@ -8,11 +8,13 @@ const props = defineProps(['modelValue', 'field']);
 const items = ref([]);
 const edit  = ref(false);
 const params = ref(new Object());
+const itemLabel = ref('');
 const currentIdx = ref(-1);
 onBeforeMount(()=>{
     if (props.modelValue) {
         items.value = JSON.parse(props.modelValue);
     }
+    itemLabel.value = props.field.input.form.index !== '' ? props.field.input.form.index : 'title';
 })
 
 function listUpdated() {
@@ -114,7 +116,7 @@ function deleteItem(index) {
                 <div>
                     <div class="card card-body">
                         <div class="d-flex justify-content-between align-items-center">
-                            <div><i class="item-move fa-solid fa-up-down me-3"></i>{{ element.params.find((param) => param.name === 'title') ? element.params.find((param) => param.name === 'title').value : 'Item ' + (index+1) }}</div>
+                            <div><i class="item-move fa-solid fa-up-down me-3"></i>{{ element.params.find((param) => param.name === itemLabel) ? element.params.find((param) => param.name === itemLabel).value : 'Item ' + (index+1) }}</div>
                             <div class="toolbar">
                                 <a href="#" title="Edit" class="me-2" @click.prevent="editItem(index)"><i class="fa-solid fa-gear"></i></a>
                                 <a href="#" title="Duplicate" class="me-2" @click.prevent="duplicateItem(element,index)"><i class="fa-solid fa-copy"></i></a>

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>

astroid.xml

@@ -3,8 +3,8 @@
    <name>Astroid Framework</name>
    <libraryname>astroid</libraryname>
    <author>Astroid Framework Team</author>
-   <creationDate>April 2024</creationDate>
-   <version>3.0.14</version>
+   <creationDate>June 2024</creationDate>
+   <version>3.0.15</version>
    <url>https://astroidframe.work/</url>
    <copyright>Copyright (C) 2024 TemPlaza, Inc. All rights reserved.</copyright>
    <license>GNU General Public License version 3 or later; see LICENSE.txt</license>

astroid_framework.xml

@@ -1,13 +1,13 @@
 <updates>
     <update>
         <name>Astroid Framework</name>
-        <version>3.0.14</version>
+        <version>3.0.15</version>
         <infourl title="Astroid Framework">https://astroidframe.work/</infourl>
         <element>astroid</element>
         <type>library</type>
         <client>0</client>
         <downloads>
-            <downloadurl type="full" format="zip">https://github.com/templaza/astroid-framework/releases/download/v3.0.14/astroid-framework-3.0.14.zip</downloadurl>
+            <downloadurl type="full" format="zip">https://github.com/templaza/astroid-framework/releases/download/v3.0.15/astroid-framework-3.0.15.zip</downloadurl>
         </downloads>
         <tags>
             <tag>stable</tag>