@devappsnpm/vue-kit 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 DevApps
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,82 @@
+# @devapps/vue-kit
+
+Um toolkit Vue 3 + TypeScript que fornece uma base arquitetural robusta para aplicações frontend que consomem APIs Laravel.
+
+## 1. Introdução
+O pacote `@devapps/vue-kit` providencia infraestrutura padronizada para:
+- Cliente HTTP (wrapper sobre o Axios)
+- Autenticação (JWT e Sanctum/Cookie)
+- Services Base e Stores do Pinia
+- Formulários com extração de erros 422 do Laravel
+- Gerenciamento de Paginação
+- CLI para scaffolding e geração de módulos (services, stores, types, views)
+- Componentes de UI compartilhados (Modals, Toasts)
+
+## 2. Instalação
+```bash
+npm install @devapps/vue-kit
+npm install -D typescript vue pinia
+```
+
+## 3. Configuração
+Configure a instância do `VueKit`, tipicamente no seu `src/main.ts` ou num arquivo dedicado de configuração:
+```ts
+import { createVueKit } from '@devapps/vue-kit'
+
+export const vueKit = createVueKit({
+  api: {
+    baseURL: import.meta.env.VITE_API_URL,
+    auth: { driver: 'jwt' } // ou 'cookie'
+  }
+})
+```
+
+## 4. Autenticação
+Você pode configurar o driver de autenticação da seguinte maneira:
+- **JWT**: `auth: { driver: 'jwt' }` (Utiliza `localStorage` por padrão para salvar os tokens).
+- **Cookie (Sanctum)**: `auth: { driver: 'cookie', csrf: { enabled: true, endpoint: '/sanctum/csrf-cookie' } }`.
+
+## 5. Services & Stores
+Estenda a classe `BaseService` ou utilize `CrudService` para interagir com a sua API.
+
+Utilize o `defineCrudStore` para criar rapidamente stores do Pinia completas com todas as funcionalidades de CRUD:
+```ts
+import { defineCrudStore, CrudService } from '@devapps/vue-kit'
+
+class CustomerService extends CrudService<Customer> {
+  constructor() { super(vueKit.http, '/customers') }
+}
+
+export const useCustomerStore = defineCrudStore('customer', () => new CustomerService())
+```
+
+## 6. Formulários (Forms)
+A classe `Form<T>` gerencia reativamente o estado, submissão e os erros de validação, integrando-se de maneira transparente aos formatos de resposta padrão do Laravel.
+```ts
+import { Form } from '@devapps/vue-kit'
+
+const form = reactive(new Form({ name: '' }))
+await form.submit(async (data) => service.store(data))
+```
+
+## 7. CLI (Geração de Código)
+A CLI gera módulos boilerplate perfeitamente estruturados para acelerar seu desenvolvimento.
+```bash
+npx devapps-vue make:module Customer --type=crud --ui=modal
+```
+
+Comandos disponíveis:
+- `make:module <Name> [--type=basic|resource|crud|dashboard] [--ui=modal|page]`
+- `make:component <Name>`
+- `make:page <Name>`
+- `make:service <Name>`
+- `make:store <Name>`
+- `make:type <Name>`
+
+## 8. Componentes de UI
+Nós fornecemos um entrypoint separado contendo utilitários de UI baseados em Tailwind CSS:
+```ts
+import { BaseModal, ConfirmDeleteModal, ToastContainer, useToast } from '@devapps/vue-kit/ui'
+```
+
+Adicione o `ToastContainer` no layout principal da sua aplicação (App.vue) e utilize o composable `useToast` em qualquer lugar para exibir notificações na tela.

package/bin/devapps-vue.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+import { run } from "../dist/cli/index.js";
+run();

package/dist/index.cjs

@@ -0,0 +1,556 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  BaseService: () => BaseService,
+  CrudService: () => CrudService,
+  Form: () => Form,
+  HttpClient: () => HttpClient,
+  HttpError: () => HttpError,
+  LocalStorageTokenStorage: () => LocalStorageTokenStorage,
+  Pagination: () => Pagination,
+  SessionStorageTokenStorage: () => SessionStorageTokenStorage,
+  createVueKit: () => createVueKit,
+  defineCrudStore: () => defineCrudStore
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/core/http/HttpClient.ts
+var import_axios = __toESM(require("axios"), 1);
+
+// src/core/http/auth/JwtAuthDriver.ts
+var JwtAuthDriver = class {
+  constructor(storage) {
+    this.storage = storage;
+  }
+  storage;
+  configure(client) {
+    client.interceptors.request.use((config) => {
+      const token = this.storage.get();
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`;
+      }
+      return config;
+    });
+  }
+  clear() {
+    this.storage.remove();
+  }
+};
+
+// src/core/http/auth/CookieAuthDriver.ts
+var MUTATING_METHODS = /* @__PURE__ */ new Set(["post", "put", "patch", "delete"]);
+var CookieAuthDriver = class {
+  constructor(csrf) {
+    this.csrf = csrf;
+  }
+  csrf;
+  csrfInitialization = null;
+  configure(client) {
+    client.defaults.withCredentials = true;
+    client.defaults.withXSRFToken = true;
+    client.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
+    if (this.csrf?.enabled) {
+      client.interceptors.request.use(async (config) => {
+        const method = config.method?.toLowerCase();
+        if (method && MUTATING_METHODS.has(method)) {
+          await this.ensureCsrfCookie(client);
+        }
+        return config;
+      });
+    }
+  }
+  clear() {
+    this.csrfInitialization = null;
+  }
+  ensureCsrfCookie(client) {
+    if (!this.csrfInitialization) {
+      const endpoint = this.csrf?.endpoint ?? "/sanctum/csrf-cookie";
+      this.csrfInitialization = client.get(endpoint).then(() => void 0);
+    }
+    return this.csrfInitialization;
+  }
+};
+
+// src/core/http/auth/LocalStorageTokenStorage.ts
+var LocalStorageTokenStorage = class {
+  constructor(key) {
+    this.key = key;
+  }
+  key;
+  get() {
+    if (typeof localStorage === "undefined") return null;
+    return localStorage.getItem(this.key);
+  }
+  set(token) {
+    if (typeof localStorage === "undefined") return;
+    localStorage.setItem(this.key, token);
+  }
+  remove() {
+    if (typeof localStorage === "undefined") return;
+    localStorage.removeItem(this.key);
+  }
+};
+
+// src/core/http/auth/SessionStorageTokenStorage.ts
+var SessionStorageTokenStorage = class {
+  constructor(key) {
+    this.key = key;
+  }
+  key;
+  get() {
+    if (typeof sessionStorage === "undefined") return null;
+    return sessionStorage.getItem(this.key);
+  }
+  set(token) {
+    if (typeof sessionStorage === "undefined") return;
+    sessionStorage.setItem(this.key, token);
+  }
+  remove() {
+    if (typeof sessionStorage === "undefined") return;
+    sessionStorage.removeItem(this.key);
+  }
+};
+
+// src/core/http/HttpError.ts
+var HttpError = class _HttpError extends Error {
+  status;
+  errors;
+  response;
+  constructor(message, status, errors, response) {
+    super(message);
+    this.name = "HttpError";
+    this.status = status;
+    this.errors = errors;
+    this.response = response;
+  }
+  static fromAxiosError(error) {
+    const status = error.response?.status ?? null;
+    const data = error.response?.data;
+    const message = (typeof data === "object" && data && "message" in data ? data.message : void 0) ?? error.message ?? "Unexpected HTTP error.";
+    const errors = typeof data === "object" && data && "errors" in data ? data.errors : void 0;
+    return new _HttpError(message, status, errors, error.response);
+  }
+};
+
+// src/core/http/interceptors/response.interceptor.ts
+function registerResponseInterceptor(client, handlers) {
+  client.interceptors.response.use(
+    (response) => response,
+    (error) => {
+      const httpError = HttpError.fromAxiosError(error);
+      if (httpError.status === 401) {
+        handlers?.onUnauthorized?.();
+      }
+      return Promise.reject(httpError);
+    }
+  );
+}
+
+// src/core/http/HttpClient.ts
+var HttpClient = class {
+  client;
+  authDriver;
+  constructor(config) {
+    this.client = import_axios.default.create({
+      baseURL: config.baseURL,
+      timeout: config.timeout ?? 3e4,
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json"
+      }
+    });
+    this.authDriver = this.createAuthDriver(config);
+    this.authDriver?.configure(this.client);
+    registerResponseInterceptor(this.client, config.handlers);
+  }
+  createAuthDriver(config) {
+    const auth = config.auth;
+    if (!auth || auth.driver === "none") {
+      return void 0;
+    }
+    if (auth.driver === "cookie") {
+      return new CookieAuthDriver(auth.csrf);
+    }
+    if (auth.driver === "jwt") {
+      return new JwtAuthDriver(this.resolveTokenStorage(auth.tokenStorage));
+    }
+    return void 0;
+  }
+  resolveTokenStorage(tokenStorage) {
+    if (tokenStorage && "get" in tokenStorage && "set" in tokenStorage) {
+      return tokenStorage;
+    }
+    const key = tokenStorage?.key ?? "auth_token";
+    if (tokenStorage?.type === "sessionStorage") {
+      return new SessionStorageTokenStorage(key);
+    }
+    return new LocalStorageTokenStorage(key);
+  }
+  /** Clears whatever authentication state the configured driver holds (token, csrf, etc). */
+  clearAuth() {
+    this.authDriver?.clear();
+  }
+  instance() {
+    return this.client;
+  }
+};
+
+// src/config/createVueKit.ts
+function createVueKit(config) {
+  const httpConfig = { baseURL: config.api.baseURL };
+  if (config.api.timeout !== void 0) httpConfig.timeout = config.api.timeout;
+  if (config.api.auth !== void 0) httpConfig.auth = config.api.auth;
+  if (config.api.handlers !== void 0) httpConfig.handlers = config.api.handlers;
+  const http = new HttpClient(httpConfig);
+  return { http, config };
+}
+
+// src/core/services/BaseService.ts
+var BaseService = class {
+  constructor(http) {
+    this.http = http;
+  }
+  http;
+  get(url, params) {
+    return this.http.instance().get(url, { params });
+  }
+  post(url, data, params) {
+    return this.http.instance().post(url, data, { params });
+  }
+  put(url, data, params) {
+    return this.http.instance().put(url, data, { params });
+  }
+  patch(url, data, params) {
+    return this.http.instance().patch(url, data, { params });
+  }
+  delete(url, params) {
+    return this.http.instance().delete(url, { params });
+  }
+};
+
+// src/core/services/CrudService.ts
+var CrudService = class extends BaseService {
+  constructor(http, resourcePath) {
+    super(http);
+    this.resourcePath = resourcePath;
+  }
+  resourcePath;
+  /** GET /resource — paginated list */
+  async index(params) {
+    const response = await this.get(
+      this.resourcePath,
+      params
+    );
+    return response.data;
+  }
+  /** GET /resource/:id */
+  async show(id, params) {
+    const response = await this.get(
+      `${this.resourcePath}/${id}`,
+      params
+    );
+    return response.data;
+  }
+  /** POST /resource */
+  async store(data) {
+    const response = await this.post(this.resourcePath, data);
+    return response.data;
+  }
+  /** PUT /resource/:id */
+  async update(id, data) {
+    const response = await this.put(
+      `${this.resourcePath}/${id}`,
+      data
+    );
+    return response.data;
+  }
+  /** DELETE /resource/:id */
+  async destroy(id) {
+    await this.delete(`${this.resourcePath}/${id}`);
+  }
+};
+
+// src/core/stores/CrudStore.ts
+var import_pinia = require("pinia");
+var import_vue = require("vue");
+
+// src/core/pagination/Pagination.ts
+var Pagination = class {
+  meta;
+  links;
+  constructor(meta, links) {
+    this.meta = meta;
+    this.links = links;
+  }
+  get currentPage() {
+    return this.meta.current_page;
+  }
+  get lastPage() {
+    return this.meta.last_page;
+  }
+  get perPage() {
+    return this.meta.per_page;
+  }
+  get total() {
+    return this.meta.total;
+  }
+  get from() {
+    return this.meta.from;
+  }
+  get to() {
+    return this.meta.to;
+  }
+  get isFirstPage() {
+    return this.meta.current_page === 1;
+  }
+  get isLastPage() {
+    return this.meta.current_page === this.meta.last_page;
+  }
+  get hasPrevPage() {
+    return this.links.prev !== null;
+  }
+  get hasNextPage() {
+    return this.links.next !== null;
+  }
+  /** Total number of pages. */
+  get pageCount() {
+    return this.meta.last_page;
+  }
+  /** Array of page numbers for rendering a paginator UI. */
+  pages() {
+    return Array.from({ length: this.meta.last_page }, (_, i) => i + 1);
+  }
+  /** Build the next page params or null if on last page. */
+  nextPageParams() {
+    if (this.isLastPage) return null;
+    return { page: this.meta.current_page + 1 };
+  }
+  /** Build the prev page params or null if on first page. */
+  prevPageParams() {
+    if (this.isFirstPage) return null;
+    return { page: this.meta.current_page - 1 };
+  }
+};
+
+// src/core/stores/CrudStore.ts
+function defineCrudStore(id, serviceFactory) {
+  return (0, import_pinia.defineStore)(id, () => {
+    const service = serviceFactory();
+    const items = (0, import_vue.ref)([]);
+    const item = (0, import_vue.ref)(null);
+    const loading = (0, import_vue.ref)(false);
+    const saving = (0, import_vue.ref)(false);
+    const deleting = (0, import_vue.ref)(false);
+    const error = (0, import_vue.ref)(null);
+    const pagination = (0, import_vue.ref)(null);
+    function setError(err) {
+      if (err instanceof HttpError) {
+        error.value = err.message;
+      } else if (err instanceof Error) {
+        error.value = err.message;
+      } else {
+        error.value = "An unexpected error occurred.";
+      }
+    }
+    async function fetchAll(params) {
+      loading.value = true;
+      error.value = null;
+      try {
+        const result = await service.index(params);
+        items.value = result.data;
+        pagination.value = new Pagination(result.meta, result.links);
+      } catch (err) {
+        setError(err);
+        throw err;
+      } finally {
+        loading.value = false;
+      }
+    }
+    async function fetchOne(id2) {
+      loading.value = true;
+      error.value = null;
+      try {
+        const result = await service.show(id2);
+        item.value = result.data;
+      } catch (err) {
+        setError(err);
+        throw err;
+      } finally {
+        loading.value = false;
+      }
+    }
+    async function create(data) {
+      saving.value = true;
+      error.value = null;
+      try {
+        const result = await service.store(data);
+        return result.data;
+      } catch (err) {
+        setError(err);
+        throw err;
+      } finally {
+        saving.value = false;
+      }
+    }
+    async function update(id2, data) {
+      saving.value = true;
+      error.value = null;
+      try {
+        const result = await service.update(id2, data);
+        return result.data;
+      } catch (err) {
+        setError(err);
+        throw err;
+      } finally {
+        saving.value = false;
+      }
+    }
+    async function remove(id2) {
+      deleting.value = true;
+      error.value = null;
+      try {
+        await service.destroy(id2);
+        items.value = items.value.filter((i) => i.uuid !== id2);
+      } catch (err) {
+        setError(err);
+        throw err;
+      } finally {
+        deleting.value = false;
+      }
+    }
+    function $reset() {
+      items.value = [];
+      item.value = null;
+      loading.value = false;
+      saving.value = false;
+      deleting.value = false;
+      error.value = null;
+      pagination.value = null;
+    }
+    return {
+      items,
+      item,
+      loading,
+      saving,
+      deleting,
+      error,
+      pagination,
+      fetchAll,
+      fetchOne,
+      create,
+      update,
+      remove,
+      $reset
+    };
+  });
+}
+
+// src/core/forms/Form.ts
+var Form = class {
+  data;
+  errors = {};
+  processing = false;
+  success = false;
+  _initial;
+  constructor(initialData) {
+    this._initial = { ...initialData };
+    this.data = { ...initialData };
+  }
+  async submit(callback) {
+    this.processing = true;
+    this.success = false;
+    this.clearErrors();
+    try {
+      await callback(this.data);
+      this.success = true;
+    } catch (error) {
+      if (error instanceof HttpError && error.status === 422 && error.errors) {
+        this.setErrors(error.errors);
+      } else {
+        throw error;
+      }
+    } finally {
+      this.processing = false;
+    }
+  }
+  reset() {
+    this.data = { ...this._initial };
+    this.clearErrors();
+    this.success = false;
+    this.processing = false;
+  }
+  resetField(field) {
+    this.data[field] = this._initial[field];
+    this.clearError(field);
+  }
+  clearErrors() {
+    this.errors = {};
+  }
+  clearError(field) {
+    const updated = { ...this.errors };
+    delete updated[field];
+    this.errors = updated;
+  }
+  /**
+   * Accepts Laravel-style error bags: `{ field: ['msg1', 'msg2'] }`.
+   * Only the first message per field is stored.
+   */
+  setErrors(errors) {
+    const mapped = {};
+    for (const [field, messages] of Object.entries(errors)) {
+      const key = field;
+      const first = messages[0];
+      if (first !== void 0) {
+        mapped[key] = first;
+      }
+    }
+    this.errors = mapped;
+  }
+  /** True when the form has any validation error. */
+  get hasErrors() {
+    return Object.keys(this.errors).length > 0;
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BaseService,
+  CrudService,
+  Form,
+  HttpClient,
+  HttpError,
+  LocalStorageTokenStorage,
+  Pagination,
+  SessionStorageTokenStorage,
+  createVueKit,
+  defineCrudStore
+});
+//# sourceMappingURL=index.cjs.map