v-sistec-features 1.0.0

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "v-sistec-features",
+  "private": false,
+  "version": "1.0.0",
+  "author": "Márlon Bento Azevedo (https://github.com/marlon-bento)",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/marlon-bento/v-sistec-features"
+  },
+  "description": "Componentes, composables, styles e ferramentas para o Sistec",
+  "license": "ISC",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./core": {
+      "import": "./dist/core.js",
+      "types": "./dist/core.d.ts"
+    },
+    "./iframeCommunicator": {
+      "import": "./dist/iframeCommunicator.js",
+      "types": "./dist/iframeCommunicator.d.ts"
+    },
+    "./style.css": {
+      "import": "./dist/v-sistec-features.css",
+      "require": "./dist/v-sistec-features.css"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "vite build && tsc"
+  },
+  "peerDependencies": {
+    "@tabler/icons-vue": "^3.35.0",
+    "vue": "^3.2.0"
+  },
+  "devDependencies": {
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/exec": "^7.1.0",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^11.0.6",
+    "@semantic-release/npm": "^12.0.2",
+    "@semantic-release/release-notes-generator": "^14.1.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "semantic-release": "^24.2.9",
+    "typescript": "~5.8.3",
+    "vite": "^7.1.7",
+    "vue": "^3.4.31"
+  },
+  "dependencies": {
+    "@tabler/core": "^1.4.0"
+  }
+}

package/src/core/index.ts

@@ -0,0 +1,3 @@
+export { 
+    SistecPlugin
+ } from './plugin';

package/src/core/plugin.ts

@@ -0,0 +1,39 @@
+import type { App } from 'vue';
+/*esse é o plugin que vai configurar as partes excenciais de todas as aplicações
+* do sistec
+*
+* Observações:
+* import de tabler-themes deve ser feito depois do tabler.min.css ou não funcionará
+* 
+* até o momento as funções são
+* - importar o css e js do tabler
+* - disponibilizar o tabler globalmente como window.bootstrap 
+* (as novas versões do tabler não incluem mais o bootstrap, então isso foi necessário)
+* 
+* - futuras funções podem ser adicionadas aqui
+* - como adicionar componentes globais
+* - adicionar diretivas globais
+* - adicionar filtros globais
+* - adicionar mixins globais
+* - adicionar propriedades globais
+* 
+* para usar o plugin, basta fazer app.use(SistecPlugin) na aplicação vue
+*/
+
+// Configurações do Tabler
+import '@tabler/core/dist/css/tabler.min.css';
+import '@tabler/core/dist/css/tabler-themes.min.css'
+import * as Tabler from '@tabler/core/dist/js/tabler.min.js';
+
+
+const SistecPlugin = {
+  // até o momento não usamos opções nem o app, mas deixei aqui caso precise no futuro
+  install: (_app: App, _options?: any) => {
+    // Disponibiliza o Tabler globalmente
+    (window as any).bootstrap = Tabler;
+
+    // futuros upgrades podem ser feitos aqui
+    // Ex: app.component('MeuComponente', MeuComponente);
+  }
+};
+export { SistecPlugin };

package/src/iframeCommunicator/index.ts

@@ -0,0 +1,4 @@
+// useIframeCommunicator serve para comunicação entre iframe e janela pai
+export * from './useIframeCommunicator';
+// useThemeFromParent serve para receber temas do pai e aplicar no iframe
+export * from './useThemeFromParent';

package/src/iframeCommunicator/useIframeCommunicator.ts

@@ -0,0 +1,39 @@
+import { onMounted, onUnmounted, readonly, ref } from 'vue';
+
+/**
+ * Um Composable para gerenciar a comunicação entre um iframe e sua janela pai.
+ * @param onMessageReceived - Uma função de callback que será executada quando uma mensagem for recebida do pai.
+ */
+export function useIframeCommunicator(onMessageReceived: (event: MessageEvent) => void) {
+
+  // Uma ref reativa para saber se o app está rodando dentro de um iframe
+  const isInIframe = ref(window.parent !== window);
+
+  /**
+   * Envia uma mensagem para a janela pai.
+   * @param message - O objeto da mensagem a ser enviado.
+   * @param targetOrigin - A origem do pai, para segurança. Padrão é '*'.
+   */
+  function sendMessage(message: any, targetOrigin: string = '*') {
+    if (isInIframe.value) {
+      window.parent.postMessage(message, targetOrigin);
+    }
+  }
+
+  // Configura o ouvinte de eventos quando o componente é montado
+  onMounted(() => {
+    window.addEventListener('message', onMessageReceived);
+  });
+
+  // Remove o ouvinte de eventos quando o componente é desmontado
+  onUnmounted(() => {
+    window.removeEventListener('message', onMessageReceived);
+  });
+
+  // Retorna os valores e funções que o componente poderá usar
+  return {
+    isInIframe: readonly(isInIframe), // readonly para evitar modificação externa
+    sendMessage
+  };
+}
+

package/src/iframeCommunicator/useThemeFromParent.ts

@@ -0,0 +1,32 @@
+import { useIframeCommunicator } from './useIframeCommunicator';
+import { onMounted } 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' });
+  });
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+// Re-exporta o plugin que está no módulo 'core'
+export * from './core';
+
+// Re-exporta tudo que está no módulo 'iframeCommunicator'
+export * from './iframeCommunicator';
+
+// Re-exporta tudo do Tabler Icons Vue para facilitar o uso
+export * from '@tabler/icons-vue';

package/src/types/global.d.ts

@@ -0,0 +1 @@
+declare module '@tabler/core/dist/js/tabler.min.js';