Add template title and sub + enhance combobox

vuejs/client/input.css

@@ -229,6 +229,8 @@ body {
   @apply pointer-events-none transition-transform h-4 w-4 fill-gray-600 dark:fill-gray-500;
 }
 
+
+
 .select-combobox-dropdown-container {
   @apply flex  w-fit mt-2;
 }
@@ -273,6 +275,12 @@ body {
   @apply transition duration-300 ease-in-out dark:opacity-90 text-sm font-bold m-0 dark:text-gray-300;
 }
 
+.input-combobox {
+  @apply hover:border-gray-600 outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-gray-200 focus:border-gray-300/0 dark:focus:border-gray-600/0 focus:ring-1 focus:valid:ring-green-500 focus:invalid:ring-red-500 text-sm leading-5.6 ease-in block w-full appearance-none rounded-t-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-2.5 md:py-1.5 font-normal text-gray-700 transition-all placeholder:text-gray-500 disabled:cursor-not-allowed
+  disabled:bg-gray-400 disabled:border-gray-400/0 dark:disabled:bg-gray-800 dark:disabled:border-gray-800/0 dark:disabled:text-gray-300 disabled:text-gray-700;
+}
+
+
 .input-regular {
   @apply hover:border-gray-600 outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-gray-200 focus:border-gray-300/0 dark:focus:border-gray-600/0 focus:ring-1 focus:valid:ring-green-500 focus:invalid:ring-red-500 text-sm leading-5.6 ease-in block w-full  appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-1.5 py-1 md:px-2.5 md:py-1.5 font-normal text-gray-700 transition-all placeholder:text-gray-500     disabled:cursor-not-allowed
   disabled:bg-gray-400 disabled:border-gray-400/0 dark:disabled:bg-gray-800 dark:disabled:border-gray-800/0 dark:disabled:text-gray-300 disabled:text-gray-700;
@@ -953,29 +961,29 @@ body {
 /* TITLE */
 
 .title-container {
-  @apply w-full col-span-12 break-words max-w-[80%] font-bold mb-2 dark:text-white/90 transition duration-300 ease-in-out text-2xl;
+  @apply capitalize-first w-full max-w-[80%] sm:max-w-[800px] col-span-12 break-words font-bold mb-2 dark:text-white/90 transition duration-300 ease-in-out text-2xl;
 }
 
 .title-card {
-  @apply w-full col-span-12  break-words max-w-[80%] mb-2 font-bold dark:text-white/90 transition duration-300 ease-in-out text-xl;
+  @apply capitalize-first w-full max-w-[80%] sm:max-w-[700px] col-span-12  break-words mb-2 font-bold dark:text-white/90 transition duration-300 ease-in-out text-xl;
 }
 
 .title-stat {
-  @apply w-full col-span-12  mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-400;
+  @apply capitalize-first w-full max-w-[80%] sm:max-w-[600px] col-span-12  mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-400;
 }
 
 /* SUBTITLE */
 
 .subtitle-container {
-  @apply leading-normal text-xl mb-0 lowercase;
+  @apply capitalize-first w-full max-w-[80%] sm:max-w-[800px] leading-normal text-xl mb-0 lowercase;
 }
 
 .subtitle-card {
-  @apply leading-normal text-base mb-0 lowercase;
+  @apply capitalize-first w-full max-w-[80%] sm:max-w-[700px] leading-normal text-base mb-0 lowercase;
 }
 
 .subtitle-stat {
-  @apply font-bold leading-normal text-sm mb-0 lowercase;
+  @apply capitalize-first w-full max-w-[80%] sm:max-w-[600px] font-bold leading-normal text-sm mb-0 lowercase;
 }
 
 /* STAT COMPONENT */

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

@@ -1,6 +1,8 @@
 <script setup>
 import { reactive, defineProps, computed, onBeforeMount } from "vue";
 import Container from "@components/Widget/Container.vue";
+import Title from "@components/Widget/Title.vue";
+import Subtitle from "@components/Widget/Subtitle.vue";
 import Combobox from "@components/Forms/Field/Combobox.vue";
 import Advanced from "@components/Form/Advanced.vue";
 import Raw from "@components/Form/Raw.vue";
@@ -26,6 +28,16 @@ import { v4 as uuidv4 } from "uuid";
 
 const props = defineProps({
   // id && value && method
+  title: {
+    type: String,
+    required: false,
+    default: "dashboard_templates_title_default",
+  },
+  subtitle: {
+    type: String,
+    required: false,
+    default: "dashboard_templates_subtitle_default",
+  },
   templates: {
     type: Object,
     required: true,
@@ -89,6 +101,8 @@ onBeforeMount(() => {
     :containerClass="`col-span-12 w-full m-1 p-1`"
     :columns="props.columns"
   >
+    <Title type="container" :title="props.title" />
+    <Subtitle type="container" :subtitle="props.subtitle" />
     <Container
       v-if="data.modes.length > 1 || data.templates.length > 1"
       :containerClass="`col-span-12 grid grid-cols-12`"

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

@@ -363,7 +363,7 @@ const emits = defineEmits(["inp"]);
             :aria-controls="`${props.id}-list`"
             :id="`${props.id}-combobox`"
             :class="[
-              'input-regular',
+              'input-combobox',
               inp.isValid ? 'valid' : 'invalid',
               props.inpClass,
             ]"

vuejs/client/src/lang/en.json

@@ -92,8 +92,10 @@
   "dashboard_easy_mode" : "Easy mode",
   "dashboard_easy_mode_title": "Step {step} of {total}  -  {name}",
   "dashboard_easy_mode_subtitle": "Easy mode will guide you using steps and additional information to help you configure your settings.",
-  "dashboard_easy_invalid": "{setting} in the step {step} is invalid",
-  "dashboard_easy_required": "{setting} in the step {step} is required",
+  "dashboard_easy_invalid": "{setting} in step {step} is invalid",
+  "dashboard_easy_required": "{setting} in step {step} is required",
+  "dashboard_templates_title_default": "Configuration templates",
+  "dashboard_templates_subtitle_default": "Manage your settings with available templates and using the mode that suits you best.",
   "inp_input_valid": "input valid",
   "inp_input_error_required": "input is required",
   "inp_input_error": "input is invalid",