update forms

* better password input icon position
* keep only combobox plugins on advanced component
* start Templates component to merge and handle all needed forms type (advanced, raw...)

vuejs/client/input.css

@@ -346,7 +346,7 @@ body {
 }
 
 .input-pw-container {
-  @apply absolute flex right-2 h-5 w-5;
+  @apply absolute flex top-[0.35rem] md:top-2 right-2 h-5 w-5;
 }
 
 .input-pw-svg {

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

@@ -1,23 +1,16 @@
 <script setup>
-import { reactive, defineProps, onMounted, ref } from "vue";
+import { defineProps, reactive, onMounted } from "vue";
 import Container from "@components/Widget/Container.vue";
 import Fields from "@components/Form/Fields.vue";
 import Title from "@components/Widget/Title.vue";
 import Subtitle from "@components/Widget/Subtitle.vue";
 import Combobox from "@components/Forms/Field/Combobox.vue";
 import { v4 as uuidv4 } from "uuid";
-
 /**
   @name Form/Advanced.vue
   @description This component is used to create a complete advanced form with plugin selection.
   @example
-  const data = [
-    {
-      name: "plugin name",
-      type: "pro",
-      description: "plugin description",
-      page: "/page",
-      settings: [
+  template: [
         {
           columns: { pc: 6, tablet: 12, mobile: 12 },
           id: "test-check",
@@ -41,53 +34,35 @@ import { v4 as uuidv4 } from "uuid";
           inpType: "input",
         },
       ],
-    },
-  ];
-  @param {object} forms - List of advanced forms that contains settings.
+  @param {object} template - Template object with plugin and settings data.
+  @param {string} containerClass - Container
+  @param {object} columns - Columns object.
 */
 
 const props = defineProps({
   // id && value && method
-  forms: {
-    type: Object,
+  template: {
+    type: Array,
     required: true,
     default: {},
   },
+
+  containerClass: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  columns: {
+    type: Object,
+    required: false,
+    default: {},
+  },
 });
 
-const comboboxPlugin = {
-  id: uuidv4(),
-  name: uuidv4(),
-  disabled: false,
-  required: false,
-  label: "dashboard_plugins",
-  tabId: "1",
-  columns: { pc: 4, tablet: 6, mobile: 12 },
-};
-
-const comboboxTemplate = {
-  id: uuidv4(),
-  name: uuidv4(),
-  disabled: false,
-  required: false,
-  label: "dashboard_templates",
-  tabId: "1",
-  columns: { pc: 4, tablet: 6, mobile: 12 },
-};
-
 const data = reactive({
-  currTemplate: "",
   currPlugin: "",
 });
 
-function getFirstTemplate() {
-  return Object.keys(props.forms)[0];
-}
-
-function getTemplateNames() {
-  return Object.keys(props.forms);
-}
-
 function getFirstPlugin(form) {
   return form[0]["name"];
 }
@@ -102,11 +77,19 @@ function getPluginNames(form) {
   return pluginNames;
 }
 
+const comboboxPlugin = {
+  id: uuidv4(),
+  name: uuidv4(),
+  disabled: false,
+  required: false,
+  label: "dashboard_plugins",
+  tabId: "1",
+  columns: { pc: 4, tablet: 6, mobile: 12 },
+};
+
 onMounted(() => {
   // Get first props.forms template name
-  data.currTemplate = getFirstTemplate();
-  // Get first plugin name
-  data.currPlugin = getFirstPlugin(props.forms[data.currTemplate]);
+  data.currPlugin = getFirstPlugin(props.template);
 });
 </script>
 
@@ -117,44 +100,34 @@ onMounted(() => {
     :containerClass="`col-span-12 w-full m-1 p-1`"
     :columns="props.columns"
   >
-    <template v-for="(template, template_name) in props.forms">
+    <Container :containerClass="`grid grid-cols-12 col-span-12 w-full m-1 p-1`">
+      <Combobox
+        v-bind="comboboxPlugin"
+        :value="getFirstPlugin(props.template)"
+        :values="getPluginNames(props.template)"
+        @inp="data.currPlugin = $event"
+      />
+    </Container>
+    <template v-for="plugin in props.template">
       <Container
-        :containerClass="`col-span-12 grid grid-cols-12`"
-        v-if="template_name === data.currTemplate"
+        v-if="plugin.name === data.currPlugin"
+        class="col-span-12 w-full"
       >
-        <Combobox
-          v-bind="comboboxTemplate"
-          :value="getFirstTemplate()"
-          :values="getTemplateNames()"
-          @inp="data.currPlugin = $event"
-        />
-        <Combobox
-          v-bind="comboboxPlugin"
-          :value="getFirstPlugin(template)"
-          :values="getPluginNames(template)"
-          @inp="data.currPlugin = $event"
-        />
-        <template v-for="plugin in template">
-          <Container
-            v-if="plugin.name === data.currPlugin"
-            class="col-span-12 w-full"
-          >
-            <Title type="card" :title="plugin.name" />
-            <Subtitle type="card" :subtitle="plugin.description" />
+        <Title type="card" :title="plugin.name" />
+        <Subtitle type="card" :subtitle="plugin.description" />
 
-            <Container
-              style="max-height: 300px; overflow: auto"
-              class="grid grid-cols-12 w-full relative"
-            >
-              <template
-                v-for="(setting, name, index) in plugin.settings"
-                :key="index"
-              >
-                <Fields :setting="setting" />
-              </template>
-            </Container>
-          </Container>
-        </template> </Container
-    ></template>
+        <Container
+          style="max-height: 300px; overflow: auto"
+          class="grid grid-cols-12 w-full relative"
+        >
+          <template
+            v-for="(setting, name, index) in plugin.settings"
+            :key="index"
+          >
+            <Fields :setting="setting" />
+          </template>
+        </Container>
+      </Container>
+    </template>
   </Container>
 </template>

vuejs/client/src/components/Form/Templates.vue

@@ -0,0 +1,105 @@
+<script setup>
+import { reactive, defineProps, onMounted, ref } from "vue";
+import Container from "@components/Widget/Container.vue";
+import Fields from "@components/Form/Fields.vue";
+import Title from "@components/Widget/Title.vue";
+import Subtitle from "@components/Widget/Subtitle.vue";
+import Combobox from "@components/Forms/Field/Combobox.vue";
+import { v4 as uuidv4 } from "uuid";
+
+/**
+  @name Form/Settings.vue
+  @description This component is used to create a complete  settings form with all modes (advanced, raw, easy).
+  @example
+  const data = [
+    {
+      name: "plugin name",
+      type: "pro",
+      description: "plugin description",
+      page: "/page",
+      settings: [
+        {
+          columns: { pc: 6, tablet: 12, mobile: 12 },
+          id: "test-check",
+          value: "yes",
+          label: "Checkbox",
+          name: "checkbox",
+          required: true,
+          hideLabel: false,
+          headerClass: "text-red-500",
+          inpType: "checkbox",
+        },
+        {
+          id: "test-input",
+          value: "yes",
+          type: "text",
+          name: "test-input",
+          disabled: false,
+          required: true,
+          label: "Test input",
+          pattern: "(test)",
+          inpType: "input",
+        },
+      ],
+    },
+  ];
+  @param {object} templates - List of advanced templates that contains settings.
+*/
+
+const props = defineProps({
+  // id && value && method
+  templates: {
+    type: Object,
+    required: true,
+    default: {},
+  },
+});
+
+const comboboxTemplate = {
+  id: uuidv4(),
+  name: uuidv4(),
+  disabled: false,
+  required: false,
+  label: "dashboard_templates",
+  tabId: "1",
+  columns: { pc: 4, tablet: 6, mobile: 12 },
+};
+
+const data = reactive({
+  currTemplate: "",
+  currPlugin: "",
+});
+
+function getFirstTemplate() {
+  return Object.keys(props.templates)[0];
+}
+
+function getTemplateNames() {
+  return Object.keys(props.templates);
+}
+
+onMounted(() => {
+  // Get first props.templates template name
+  data.currTemplate = getFirstTemplate();
+});
+</script>
+
+<template>
+  <Container
+    :tag="'form'"
+    method="POST"
+    :containerClass="`col-span-12 w-full m-1 p-1`"
+    :columns="props.columns"
+  >
+    <template v-for="(template, template_name) in props.templates">
+      <Container :containerClass="`col-span-12 grid grid-cols-12`">
+        <Combobox
+          v-bind="comboboxTemplate"
+          :value="getFirstTemplate()"
+          :values="getTemplateNames()"
+          @inp="data.currPlugin = $event"
+        />
+      </Container>
+    </template>
+  </Container>
+</template>

vuejs/client/src/components/Forms/Field/Input.vue

@@ -237,7 +237,7 @@ onMounted(() => {
       >
         <button
           :tabindex="contentIndex"
-          @click="copyClipboard()"
+          @click.prevent="copyClipboard()"
           :class="[props.disabled ? 'disabled' : 'enabled']"
           class="input-clipboard-button"
           :aria-describedby="`${props.id}-clipboard-text`"
@@ -268,7 +268,7 @@ onMounted(() => {
           :tabindex="contentIndex"
           :aria-description="$t('inp_input_password_desc')"
           :aria-controls="props.id"
-          @click="inp.showInp = inp.showInp ? false : true"
+          @click.prevent="inp.showInp = inp.showInp ? false : true"
           :class="[props.disabled ? 'disabled' : 'enabled']"
           class="input-pw-button"
         >

vuejs/client/src/pages/global-config/globalConfig.vue

@@ -9447,7 +9447,7 @@ const data = {
 <template>
   <DashboardLayout>
     <div class="col-span-12 grid grid-cols-12 card">
-      <Advanced :forms="data.advanced" />
+      <Advanced :template="data.advanced.default" />
     </div>
   </DashboardLayout>
 </template>

vuejs/client/src/pages/test/Test.vue

@@ -36,7 +36,7 @@ const selectData = {
 const inputData = {
   id: "test-input",
   value: "yes",
-  type: "text",
+  type: "password",
   name: "test-input",
   disabled: false,
   required: true,