start adding auto style to title and subtitle

vuejs/client/input.css

@@ -1069,14 +1069,19 @@ body {
   @apply col-span-12 grid grid-cols-12 gap-3 py-2;
 }
 
+.list-details-flex {
+  @apply justify-between items-center;
+}
+
 /* TITLE */
 
-.title-container {
+
+.title-card {
   @apply capitalize-first break-word w-full max-w-[80%] sm:max-w-[800px] col-span-12 font-bold dark:text-white/90 transition duration-300 ease-in-out text-[1.3rem] text-[#344767] tracking-normal;
 }
 
-.title-card {
-  @apply capitalize-first break-word w-full max-w-[80%] sm:max-w-[700px] col-span-12  font-bold dark:text-white/90 transition duration-300 ease-in-out text-xl text-[#344767] tracking-normal;
+.title-form {
+  @apply capitalize-first break-word w-full max-w-[80%] sm:max-w-[800px] col-span-12 font-bold dark:text-white/90 transition duration-300 ease-in-out text-xl text-[#344767] tracking-normal;
 }
 
 .title-content {
@@ -1103,19 +1108,19 @@ body {
   @apply mb-2.5;
 }
 
-.no-subtitle.title-container,
 .no-subtitle.title-card,
 .no-subtitle.title-content,
-.no-subtitle.title-min { 
+.no-subtitle.title-min,
+.no-subtitle.title-form { 
   @apply mb-2;
 }
 
 
-.no-subtitle.title-stat{ 
+.no-subtitle.title-stat { 
   @apply mb-0;
 }
 
-.is-subtitle.title-container,
+.is-subtitle.title-form,
 .is-subtitle.title-card,
 .is-subtitle.title-modal,
 .is-subtitle.title-stat,
@@ -1127,12 +1132,13 @@ body {
 /* SUBTITLE */
 
 
-.subtitle-container {
+
+.subtitle-card {
   @apply capitalize-first break-word dark:text-gray-300 col-span-12 break-words w-full max-w-[80%] sm:max-w-[800px] leading-normal text-[1.1rem] mb-0 lowercase;
 }
 
-.subtitle-card {
-  @apply capitalize-first break-word dark:text-gray-300 col-span-12 break-words w-full max-w-[80%] sm:max-w-[700px] leading-normal text-base mb-0 lowercase;
+.subtitle-form {
+  @apply capitalize-first break-word dark:text-gray-300 col-span-12 break-words w-full max-w-[80%] sm:max-w-[800px] leading-normal text-[1.05rem] mb-0 lowercase;
 }
 
 .subtitle-content {

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

@@ -274,6 +274,7 @@ onUnmounted(() => {
 <template>
   <Container
     data-advanced-form
+    data-is="form"
     :tag="'form'"
     method="POST"
     :containerClass="`form-advanced-container`"
@@ -299,6 +300,7 @@ onUnmounted(() => {
     </div>
     <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"

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

@@ -136,6 +136,7 @@ onUnmounted(() => {
 <template>
   <Container
     data-easy-form
+    data-is="form"
     :tag="'form'"
     method="POST"
     :containerClass="`form-easy-container`"
@@ -146,6 +147,7 @@ onUnmounted(() => {
 
     <template v-for="(step, id) in data.base">
       <Container
+        data-is="content"
         data-easy-form-step
         v-if="data.currStep === id"
         class="form-easy-step-container"

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

@@ -137,7 +137,8 @@ const buttonSave = {
 
 <template>
   <Container
-    data-raw-form
+    data-raw-
+    data-is="form"
     :tag="'form'"
     method="POST"
     :containerClass="'form-raw-container'"

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

@@ -80,6 +80,7 @@ onMounted(() => {
       'input-header-container',
       props.popovers.length ? 'popover' : 'no-popover',
     ]"
+    data-is="header-field"
   >
     <div>
       <label

vuejs/client/src/components/List/Details.vue

@@ -74,7 +74,7 @@ const unmatch = {
 </script>
 
 <template>
-  <Grid>
+  <Grid data-is="list-details">
     <Filter
       v-if="props.filters.length"
       @filter="(v) => (data.format = v)"
@@ -94,7 +94,7 @@ const unmatch = {
         ]"
         v-bind="item.attrs || {}"
       >
-        <Flex :flexClass="'justify-between items-center'">
+        <Flex :flexClass="'list-details-flex'">
           <Text :tag="'p'" :text="item.text" />
           <div>
             <PopoverGroup :popovers="item.popovers" />

vuejs/client/src/components/List/Pairs.vue

@@ -29,7 +29,7 @@ const gridClass = computed(() => {
 });
 </script>
 <template>
-  <ul v-if="props.pairs" :class="['list-pairs-container']">
+  <ul data-is="list-pairs" v-if="props.pairs" :class="['list-pairs-container']">
     <li v-for="item in props.pairs" :class="['list-pairs-item', gridClass]">
       <span class="list-pairs-title">
         {{ $t(item["key"], item["key"]) }}

vuejs/client/src/components/Widget/Button.vue

@@ -131,6 +131,7 @@ onMounted(() => {
     :columns="props.columns"
   >
     <button
+      data-is="button"
       :type="props.type"
       ref="btnEl"
       :id="btn.id"

vuejs/client/src/components/Widget/GridLayout.vue

@@ -100,7 +100,12 @@ onMounted(() => {
 <template>
   <!-- modal -->
   <template v-if="props.type === 'modal'">
-    <div data-modal class="layout-modal-container hidden" :id="container.id">
+    <div
+      :data-is="`${props.type}`"
+      data-modal
+      class="layout-modal-container hidden"
+      :id="container.id"
+    >
       <div class="layout-backdrop"></div>
       <div class="layout-modal-wrap" :data-hide-el="container.id">
         <div class="layout-modal">
@@ -128,7 +133,7 @@ onMounted(() => {
       ref="flowEl"
       :id="container.id"
       :is="props.link ? 'a' : 'div'"
-      data-grid-layout
+      :data-is="`${props.type}`"
       :class="[
         containerClass,
         gridClass,

vuejs/client/src/components/Widget/Subtitle.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from "vue";
+import { computed, onMounted, reactive, ref } from "vue";
 /**
   @name Widget/Subtitle.vue
   @description This component is a general subtitle wrapper.
@@ -8,13 +8,13 @@ import { computed } from "vue";
     subtitle: "Total Users",
     type: "card",
     subtitleClass: "text-lg",
-    subtitleColor : "info",
+    color : "info",
     tag: "h2"
   }
   @param {string} subtitle -  Can be a translation key or by default raw text.
   @param {string} [type="card"] - The type of title between "container", "card", "content", "min" or "stat"
   @param {string} [tag=""] - The tag of the subtitle. Can be h1, h2, h3, h4, h5, h6 or p. If empty, will be determine by the type of subtitle.
-  @param {string} [subtitleColor=""] - The color of the subtitle between error, success, warning, info or tailwind color
+  @param {string} [color=""] - The color of the subtitle between error, success, warning, info or tailwind color
   @param {string} [subtitleClass=""] - Additional class, useful when component is used directly on a grid system
 */
 
@@ -33,7 +33,7 @@ const props = defineProps({
     required: false,
     default: "",
   },
-  subtitleColor: {
+  color: {
     type: String,
     required: false,
     default: "",
@@ -50,22 +50,29 @@ const tag = computed(() => {
   return "p";
 });
 
-const baseClass = computed(() => {
-  if (props.type === "container") return "subtitle-container";
-  if (props.type === "card") return "subtitle-card";
-  if (props.type === "stat") return "subtitle-stat";
-  if (props.type === "min") return "subtitle-min";
-  if (props.type === "content") return "subtitle-content";
-  return "subtitle-card";
+const subtitle = reactive({
+  class: "",
+});
+
+const subtitleEl = ref(null);
+
+onMounted(() => {
+  subtitle.class =
+    props.subtitleClass || subtitleEl.value.closest("[data-is]")
+      ? `subtitle-${subtitleEl.value
+          .closest("[data-is]")
+          .getAttribute("data-is")}`
+      : "subtitle-card";
 });
 </script>
 
 <template>
   <component
+    ref="subtitleEl"
     data-subtitle
     :is="tag"
     v-if="props.subtitle"
-    :class="[props.subtitleClass, props.subtitleColor, baseClass]"
+    :class="[subtitle.class, props.color]"
   >
     {{ $t(props.subtitle, props.subtitle) }}
   </component>

vuejs/client/src/components/Widget/Title.vue

@@ -8,13 +8,13 @@ import { computed, onMounted, reactive, ref } from "vue";
     title: "Total Users",
     type: "card",
     titleClass: "text-lg",
-    titleColor : "info",
+    color : "info",
     tag: "h2"
   }
   @param {string} title -  Can be a translation key or by default raw text.
   @param {string} [type="card"] - The type of title between "container", "card", "content", "min" or "stat"
   @param {string} [tag=""] - The tag of the title. Can be h1, h2, h3, h4, h5, h6 or p. If empty, will be determine by the type of title.
-  @param {string} [titleColor=""] - The color of the title between error, success, warning, info or tailwind color
+  @param {string} [color=""] - The color of the title between error, success, warning, info or tailwind color
   @param {string} [titleClass=""] - Additional class, useful when component is used directly on a grid system
 */
 
@@ -33,7 +33,7 @@ const props = defineProps({
     required: false,
     default: "",
   },
-  titleColor: {
+  color: {
     type: String,
     required: false,
     default: "",
@@ -47,6 +47,7 @@ const props = defineProps({
 
 const title = reactive({
   isSubtitle: false,
+  class: "",
 });
 
 const titleEl = ref(null);
@@ -58,16 +59,6 @@ const tag = computed(() => {
   return "p";
 });
 
-const baseClass = computed(() => {
-  if (props.type === "container") return "title-container";
-  if (props.type === "card") return "title-card";
-  if (props.type === "content") return "title-content";
-  if (props.type === "min") return "title-min";
-  if (props.type === "stat") return "title-stat";
-  if (props.type === "modal") return "title-modal";
-  return "title-card";
-});
-
 // Add or remove margin bottom
 const isSubtitleClass = computed(() => {
   return title.isSubtitle ? "is-subtitle" : "no-subtitle";
@@ -78,6 +69,11 @@ onMounted(() => {
   const nextSibling = titleEl.value.nextElementSibling;
   title.isSubtitle =
     !nextSibling || !nextSibling.hasAttribute("data-subtitle") ? false : true;
+
+  title.class =
+    props.titleClass || titleEl.value.closest("[data-is]")
+      ? `title-${titleEl.value.closest("[data-is]").getAttribute("data-is")}`
+      : "title-card";
 });
 </script>
 
@@ -87,7 +83,7 @@ onMounted(() => {
     data-title
     :is="tag"
     v-if="props.title"
-    :class="[props.titleClass, props.titleColor, isSubtitleClass, baseClass]"
+    :class="[props.color, isSubtitleClass, title.class]"
   >
     {{ $t(props.title, props.title) }}
   </component>