v-sistec-features 1.15.0 → 1.17.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "v-sistec-features",
   "private": false,
-  "version": "1.15.0",
+  "version": "1.17.0",
   "author": "Márlon Bento Azevedo (https://github.com/marlon-bento)",
   "repository": {
     "type": "git",

package/src/DatatableVue/components/VColumn.vue

@@ -7,7 +7,8 @@ import { inject, onMounted, useSlots, defineSlots } from 'vue';
 import { dataTableApiKey } from '../keys';
 
 defineSlots<{
-  body?: () => any, 
+  // props para o slot body 
+  body?: (props: { item: any }) => any,
 }>();
 interface VColumnProps {
   field?: string | null;
@@ -27,6 +28,7 @@ interface VColumnProps {
   param_ordering?: string;
   decreasing_value?: string;
   increasing_value?: string;
+  class_rules?: Record<string, (item: any) => boolean>;
 }
 const props = withDefaults(defineProps<VColumnProps>(), {
   field: null,
@@ -58,6 +60,7 @@ const props = withDefaults(defineProps<VColumnProps>(), {
   param_ordering: '',
   decreasing_value: '',
   increasing_value: '',
+  class_rules: () => ({}),
 });
 
 const slots = useSlots();
@@ -107,6 +110,7 @@ onMounted(() => {
     param_ordering: props.param_ordering,
     decreasing_value: props.decreasing_value,
     increasing_value: props.increasing_value,
+    class_rules: props.class_rules,
 
     bodySlot: slots.body,
     ...(props.type === 'text' && { limite_text: Number(props.limite_text) }),

package/src/DatatableVue/components/VDataTable.vue

@@ -326,13 +326,13 @@
                     <td v-for="col in renderedColumns" :key="col.field || col.header" :class="col.class_row">
                       <component v-if="col.bodySlot" :is="col.bodySlot" :item="item" :is-selected="isSelected(item)" />
                       <span @click="col.click ? col.click(item) : null"
-                        :class="col.class_item + (col.click ? ' cursor-pointer' : '')" v-else-if="col.type === 'text'">
+                        :class="computeClasses(col, item)" v-else-if="col.type === 'text'">
                         {{
                           limiteText(getSubItem(col.field, item, col.transform_function), col.limite_text ?? null)
                         }}</span>
 
                       <span @click="col.click ? col.click(item) : null" v-else-if="col.type === 'date'"
-                        :class="col.class_item + (col.click ? ' cursor-pointer' : '')">
+                        :class="computeClasses(col, item)">
                         <span v-if="col.format === 'complete'">{{ new Date(getSubItem(col.field, item)).toLocaleString()
                         }}</span>
                         <span v-if="col.format === 'simple'"> {{ new Date(getSubItem(col.field,
@@ -340,12 +340,12 @@
                         }} </span>
                       </span>
                       <div @click="col.click ? col.click(item) : null"
-                        :class="col.class_item + (col.click ? ' cursor-pointer' : '')" v-else-if="col.type === 'html'"
+                        :class="computeClasses(col, item)" v-else-if="col.type === 'html'"
                         v-html="getSubItem(col.field, item)">
                       </div>
 
                       <div @click="col.click ? col.click(item) : null"
-                        :class="col.class_item + (col.click ? ' cursor-pointer' : '')" v-else-if="col.type === 'img'">
+                        :class="computeClasses(col, item)" v-else-if="col.type === 'img'">
 
                         <div v-if="getSubItem(col.field, item)" v-bind="col.deactivate_img_preview ? {
                           class: 'container-img'
@@ -852,6 +852,26 @@ function tradePageEmit(): void {
   fetchDataWithDelay();
 
 }
+const computeClasses = (col: ColumnConfiguration, item: T) => {
+  // Pega a classe estática padrão
+  const classes = [col.class_item || ''];
+
+  // Se a coluna for clicável, adiciona cursor-pointer automaticamente
+  if (col.click) {
+    classes.push('cursor-pointer');
+  }
+
+  // Processa as regras dinâmicas (class_rules)
+  if (col.class_rules) {
+    for (const [className, ruleValidator] of Object.entries(col.class_rules)) {
+      if (typeof ruleValidator === 'function' && ruleValidator(item)) {
+        classes.push(className);
+      }
+    }
+  }
+
+  return classes.join(' ').trim();
+};
 
 defineExpose<ExposedFunctions<T>>({
   execute: fetchDataWithDelay,

package/src/DatatableVue/keys.ts

@@ -19,7 +19,7 @@ export interface ColumnConfiguration {
   param_ordering: string;
   decreasing_value: string;
   increasing_value: string;
-
+  class_rules?: Record<string, (item: any) => boolean>;
 }
 
 // A API que o VDataTable "fornece" para os filhos

package/src/iframeCommunicator/useThemeFromParent.ts

@@ -1,32 +1,48 @@
 import { useIframeCommunicator } from './useIframeCommunicator';
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 
-function handleThemeMessage(event: MessageEvent) {
-    if (event.data.type === 'setTheme') {
-        document.documentElement.setAttribute('data-bs-theme', event.data.theme);
-    }
-    if (event.data.type === 'setThemePrimary') {
-        document.documentElement.setAttribute('data-bs-theme-primary', event.data.themePrimary);
-    }
-    if (event.data.type === 'setThemeBase') {
-        document.documentElement.setAttribute('data-bs-theme-base', event.data.themeBase);
-    }
-    if (event.data.type === 'reload') {
-        location.reload();
-    }
-}
 
 /**
  * Um composable "tudo-em-um" que configura a comunicação de temas com a janela pai.
  * para usar, bastar importar e chamar useTheme() na raiz do component app do iframe
  */
 export function useTheme() {
-  // Usa o composable genérico, passando o handler de temas, assim ele já configura 
-  // o listener e o que é feito quando receber uma mensagem do pai referente a tema
-  const { sendMessage } = useIframeCommunicator(handleThemeMessage);
-
-  // passa uma mensagem para o pai avisando que o iframe está pronto para receber temas
-  onMounted(() => {
-    sendMessage({ type: 'iframeReady' });
-  });
+
+    // Usa o composable genérico, passando o handler de temas, assim ele já configura 
+    // o listener e o que é feito quando receber uma mensagem do pai referente a tema
+    const theme = ref('light');
+    const themePalette = ref('slate');
+    const themePrimary = ref('');
+
+    function handleThemeMessage(event: MessageEvent) {
+        const data = event.data;
+
+        // Validação básica para evitar erros se data for nulo
+        if (!data) return;
+
+        if (data.type === 'setTheme') {
+            document.documentElement.setAttribute('data-bs-theme', data.theme);
+            theme.value = data.theme;
+        }
+
+        if (data.type === 'setThemePrimary') {
+            document.documentElement.setAttribute('data-bs-theme-primary', data.themePrimary);
+            themePrimary.value = data.themePrimary;
+        }
+
+        if (data.type === 'setThemeBase') {
+            document.documentElement.setAttribute('data-bs-theme-base', data.themeBase);
+            themePalette.value = data.themeBase;
+        }
+
+        if (data.type === 'reload') {
+            location.reload();
+        }
+    }
+    const { sendMessage } = useIframeCommunicator(handleThemeMessage);
+
+    // passa uma mensagem para o pai avisando que o iframe está pronto para receber temas
+    onMounted(() => {
+        sendMessage({ type: 'iframeReady' });
+    });
 }

package/dist/useThemeFromParent-Bk-du0-V.js

@@ -1,29 +0,0 @@
-import { ref as o, onMounted as a, onUnmounted as d, readonly as r } from "vue";
-function i(e) {
-  const t = o(window.parent !== window);
-  function m(n, s = "*") {
-    t.value && window.parent.postMessage(n, s);
-  }
-  return a(() => {
-    e && window.addEventListener("message", e);
-  }), d(() => {
-    e && window.removeEventListener("message", e);
-  }), {
-    isInIframe: r(t),
-    // readonly para evitar modificação externa
-    sendMessage: m
-  };
-}
-function u(e) {
-  e.data.type === "setTheme" && document.documentElement.setAttribute("data-bs-theme", e.data.theme), e.data.type === "setThemePrimary" && document.documentElement.setAttribute("data-bs-theme-primary", e.data.themePrimary), e.data.type === "setThemeBase" && document.documentElement.setAttribute("data-bs-theme-base", e.data.themeBase), e.data.type === "reload" && location.reload();
-}
-function h() {
-  const { sendMessage: e } = i(u);
-  a(() => {
-    e({ type: "iframeReady" });
-  });
-}
-export {
-  h as a,
-  i as u
-};