add cache + continue multiple

src/client/vite/input.css

@@ -537,7 +537,7 @@ body {
 }
 
 .layout-settings-multiple-group {
-  @apply mt-4 rounded border border-gray-500/50 dark:border-gray-500 p-4 sm:gap-x-8 gap-y-8 col-span-12 grid grid-cols-12 w-full relative bg-gray-200/50 dark:bg-gray-800/80;
+  @apply mt-4 rounded border border-gray-500/50 dark:border-gray-500 p-4 sm:gap-x-8 gap-y-8 col-span-12 grid grid-cols-12 w-full relative bg-gray-200/50 dark:bg-gray-900/10;
 }
 
 
@@ -1137,7 +1137,7 @@ body {
 }
 
 .button-group-multiple {
-  @apply flex justify-center items-center mx-4;
+  @apply col-span-12 flex justify-center items-center mx-4;
 }
 
 .button-group-instance {

src/client/vite/src/components/Form/Advanced.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { defineProps, reactive, onMounted, onUnmounted } from "vue";
+import { defineProps, reactive, onMounted, onUnmounted, KeepAlive } from "vue";
 import MessageUnmatch from "@components/Message/Unmatch.vue";
 import Container from "@components/Widget/Container.vue";
 import Fields from "@components/Form/Fields.vue";
@@ -284,25 +284,30 @@ onUnmounted(() => {
     </Filter>
     <MessageUnmatch v-if="!data.format.length" />
     <template v-for="plugin in data.format">
-      <Container
-        data-is="content"
-        data-advanced-form-plugin
-        v-if="plugin.name === data.currPlugin"
-        class="form-advanced-plugin-container"
-      >
-        <Title type="content" :title="plugin.name" />
-        <Subtitle type="content" :subtitle="plugin.description" />
+      <KeepAlive>
+        <Container
+          data-is="content"
+          data-advanced-form-plugin
+          v-if="plugin.name === data.currPlugin"
+          class="form-advanced-plugin-container"
+        >
+          <Title type="content" :title="plugin.name" />
+          <Subtitle type="content" :subtitle="plugin.description" />
 
-        <Container class="layout-settings">
-          <template
-            v-for="(setting, name, index) in plugin.settings"
-            :key="index"
-          >
-            <Fields :setting="setting" />
-          </template>
+          <Container class="layout-settings">
+            <template
+              v-for="(setting, name, index) in plugin.settings"
+              :key="index"
+            >
+              <Fields :setting="setting" />
+            </template>
+          </Container>
+          <GroupMultiple
+            v-if="plugin.multiples"
+            :multiples="plugin.multiples"
+          />
         </Container>
-        <GroupMultiple v-if="plugin.multiples" :multiples="plugin.multiples" />
-      </Container>
+      </KeepAlive>
     </template>
     <Button
       v-if="data.format.length"

src/client/vite/src/components/Forms/Group/Multiple.vue

@@ -6,7 +6,7 @@ import Fields from "@components/Form/Fields.vue";
 import Subtitle from "@components/Widget/Subtitle.vue";
 import Container from "@components/Widget/Container.vue";
 
-/** 
+/**
   @name Forms/Group/Multiple.vue
   @description This Will regroup all multiples settings with add and remove logic.
   This component under the hood is rendering default fields but by group with possibility to add or remove a multiple group.
@@ -178,9 +178,9 @@ const props = defineProps({
 
 const multiples = reactive({
   // Store value of multiple group
-  // By default, all multiples are visible
-  // But when clicking toggle, we can hide them by removing the key from the array
-  visible: [],
+  // By default, all multiples are invisible
+  invisible: [],
+  toDelete: [],
 });
 
 const buttonAdd = {
@@ -199,7 +199,33 @@ const buttonToggle = {
   containerClass: "flex justify-center",
 };
 
-function addGroup() {}
+const buttonDelete = {
+  text: "action_remove",
+  color: "error",
+  size: "normal",
+  type: "button",
+  containerClass: "flex justify-center",
+};
+
+function setInvisible(id) {
+  multiples.invisible.push(id);
+}
+
+function delInvisible(id) {
+  multiples.invisible = multiples.invisible.filter((v) => v !== id);
+}
+
+function toggleVisible(id) {
+  if (multiples.invisible.includes(id)) {
+    delInvisible(id);
+  } else {
+    setInvisible(id);
+  }
+}
+
+function delGroup(multName, groupName) {
+  multiples.toDelete.push({ multName: multName, groupName: groupName });
+}
 </script>
 
 <template>
@@ -212,17 +238,32 @@ function addGroup() {}
     >
       <Container class="col-span-12 flex items-center">
         <Subtitle :subtitle="multName.replaceAll('-', ' ')" />
-        <ButtonGroup :buttons="[buttonAdd, buttonToggle]" />
+        <ButtonGroup
+          @click="toggleVisible(`${multName}${id}`)"
+          :buttons="[buttonAdd, buttonToggle]"
+        />
       </Container>
 
-      <template v-for="(group, groupName, id) in props.multiples[multName]">
-        <Container class="layout-settings-multiple-group">
+      <template
+        v-for="(group, groupName, groupId) in props.multiples[multName]"
+      >
+        <Container
+          class="layout-settings-multiple-group"
+          :aria-hidden="multiples.invisible.includes(`${multName}${id}`)"
+          v-show="
+            multiples.invisible.includes(`${multName}${id}`) ? false : true
+          "
+        >
           <Subtitle
             :subtitle="`${multName.replaceAll('-', ' ')} #${+groupName + 1}`"
           />
-          <template v-for="(setting, settingName, id) in group">
+          <template v-for="(setting, settingName, settingId) in group">
             <Fields :setting="setting" :tabId="props.tabId" />
           </template>
+          <ButtonGroup
+            @click="delGroup(multName, groupName)"
+            :buttons="[buttonDelete]"
+          />
         </Container>
       </template>
     </Container>

src/client/vite/src/components/Widget/ButtonGroup.vue

@@ -10,7 +10,7 @@ import { onMounted, reactive, ref } from "vue";
   @example
   {
     id: "group-btn",
-    groupClass : "justify-center",
+    boutonGroupClass : "justify-center",
     buttons: [
       {
         id: "open-modal-btn",
@@ -35,7 +35,7 @@ import { onMounted, reactive, ref } from "vue";
     ],
   }
   @param {array} buttons - List of buttons to display. Button component is used.
-  @param {string} [groupClass=""] - Additional class for the flex container
+  @param {string} [boutonGroupClass=""] - Additional class for the flex container
 */
 
 const props = defineProps({
@@ -44,7 +44,7 @@ const props = defineProps({
     required: true,
     default: [],
   },
-  groupClass: {
+  boutonGroupClass: {
     type: String,
     required: false,
     default: "",
@@ -59,7 +59,7 @@ const groupEl = ref(null);
 
 onMounted(() => {
   group.class =
-    props.groupClass || groupEl.value.closest("[data-is]")
+    props.boutonGroupClass || groupEl.value.closest("[data-is]")
       ? `button-group-${groupEl.value
           .closest("[data-is]")
           .getAttribute("data-is")}`
@@ -70,7 +70,7 @@ onMounted(() => {
 <template>
   <div
     ref="groupEl"
-    :class="[group.class, props.groupClass]"
+    :class="[group.class, props.boutonGroupClass]"
     v-if="props.buttons.length > 0"
   >
     <Button