pull/12/head
Matheus Clemente 2024-03-30 18:44:59 -03:00
parent 43b7e11998
commit 4589b701a2
7 changed files with 59 additions and 61 deletions

View File

@ -3,3 +3,5 @@
# SPDX-License-Identifier: MIT # SPDX-License-Identifier: MIT
dist dist
src/components/
src/lib/

View File

@ -2,7 +2,6 @@
import { createApp } from "../../lib/vue.esm-browser.js"; import { createApp } from "../../lib/vue.esm-browser.js";
import { VueCompendiumBrowser } from "../../components/components.vue.es.js"; import { VueCompendiumBrowser } from "../../components/components.vue.es.js";
/** /**
* Application class for the Compendium Browser. * Application class for the Compendium Browser.
* *
@ -24,7 +23,7 @@ export class CompendiumBrowserVueApplication extends Application {
this.vueRoot = null; this.vueRoot = null;
this.vueListenersActive = false; this.vueListenersActive = false;
this.vueComponents = { this.vueComponents = {
'compendium-browser': VueCompendiumBrowser "compendium-browser": VueCompendiumBrowser
}; };
} }
@ -32,13 +31,13 @@ export class CompendiumBrowserVueApplication extends Application {
static get defaultOptions() { static get defaultOptions() {
return {...super.defaultOptions, return {...super.defaultOptions,
classes: [ classes: [
'form', "form",
'compendium-browser' "compendium-browser"
], ],
popOut: true, popOut: true,
template: "modules/compendium-browser/templates/vue-compendium-browser.html", template: "modules/compendium-browser/templates/vue-compendium-browser.html",
id: 'compendium-browser', id: "compendium-browser",
title: game.i18n.localize('CMPBrowser.compendiumBrowser'), title: game.i18n.localize("CMPBrowser.compendiumBrowser"),
width: 800, width: 800,
height: 730, height: 730,
resizable: true, resizable: true,
@ -51,7 +50,7 @@ export class CompendiumBrowserVueApplication extends Application {
// is loaded in the create() method of their respective components. // is loaded in the create() method of their respective components.
return { return {
// @todo add more default options, like saved filters. // @todo add more default options, like saved filters.
defaultTab: this.options.defaultTab ?? 'creatures', defaultTab: this.options.defaultTab ?? "creatures",
}; };
} }
@ -72,7 +71,7 @@ export class CompendiumBrowserVueApplication extends Application {
data() { data() {
return { return {
context: context, context: context,
} };
}, },
// Define our character sheet component. // Define our character sheet component.
components: this.vueComponents, components: this.vueComponents,
@ -101,11 +100,11 @@ export class CompendiumBrowserVueApplication extends Application {
// If we don't have an active vueRoot, run Foundry's render and then mount // If we don't have an active vueRoot, run Foundry's render and then mount
// the Vue application to the form. // the Vue application to the form.
await this._render(force, options).catch(err => { await this._render(force, options).catch((err) => {
err.message = `An error occurred while rendering ${this.constructor.name} ${this.appId}: ${err.message}`; err.message = `An error occurred while rendering ${this.constructor.name} ${this.appId}: ${err.message}`;
console.error(err); console.error(err);
this._state = Application.RENDER_STATES.ERROR; this._state = Application.RENDER_STATES.ERROR;
}) });
// Mount our rendered app. // Mount our rendered app.
let $selector = $(`[data-appid="${this.appId}"] .compendium-browser-mount`); let $selector = $(`[data-appid="${this.appId}"] .compendium-browser-mount`);
@ -147,11 +146,11 @@ export class CompendiumBrowserVueApplication extends Application {
*/ */
activateVueListeners(html, repeat = false) { activateVueListeners(html, repeat = false) {
if (!this.options.editable) { if (!this.options.editable) {
html.find('input,select,textarea').attr('disabled', true); html.find("input,select,textarea").attr("disabled", true);
return; return;
} }
if (html.find('.archmage-v2-vue').length > 0) { if (html.find(".archmage-v2-vue").length > 0) {
this.vueListenersActive = true; this.vueListenersActive = true;
} }
@ -160,10 +159,9 @@ export class CompendiumBrowserVueApplication extends Application {
// Input listeners. // Input listeners.
let inputs = '.section input[type="text"], .section input[type="number"]'; let inputs = '.section input[type="text"], .section input[type="number"]';
html.on('focus', inputs, (event) => this._onFocus(event)); html.on("focus", inputs, (event) => this._onFocus(event));
} }
/** /**
* Handle focus events. * Handle focus events.
* *
@ -171,9 +169,9 @@ export class CompendiumBrowserVueApplication extends Application {
*/ */
_onFocus(event) { _onFocus(event) {
let target = event.currentTarget; let target = event.currentTarget;
setTimeout(function() { setTimeout(function () {
if (target == document.activeElement) { if (target == document.activeElement) {
$(target).trigger('select'); $(target).trigger("select");
} }
}, 100); }, 100);
} }

View File

@ -1,7 +1,7 @@
import { CompendiumBrowserVueApplication } from "./applications/compendium-browser.js";
import { preloadTemplates } from "./preloadTemplates.js"; import { preloadTemplates } from "./preloadTemplates.js";
import { dnd5eProvider } from "./providers/dnd5e.js"; import { dnd5eProvider } from "./providers/dnd5e.js";
import { registerSettings } from "./settings.js"; import { registerSettings } from "./settings.js";
import { CompendiumBrowserVueApplication } from './applications/compendium-browser.js';
const STOP_SEARCH = "StopSearchException"; const STOP_SEARCH = "StopSearchException";
const COMPENDIUM_BROWSER = "compendium-browser"; const COMPENDIUM_BROWSER = "compendium-browser";
@ -1588,15 +1588,15 @@ Hooks.once("setup", async () => {
/* ---------------------------------------------- */ /* ---------------------------------------------- */
Hooks.once('ready', () => { Hooks.once("ready", () => {
// Handle click events for the compendium browser. // Handle click events for the compendium browser.
document.addEventListener("click", (event) => { document.addEventListener("click", (event) => {
if (event?.target?.classList && event.target.classList.contains("open-compendium-browser")) { if (event?.target?.classList && event.target.classList.contains("open-compendium-browser")) {
// Retrieve the existing compendium browser, if any. // Retrieve the existing compendium browser, if any.
let compendiumBrowser = Object.values(ui.windows).find(app => app.constructor.name == 'CompendiumBrowserVueApplication'); let compendiumBrowser = Object.values(ui.windows).find((app) => app.constructor.name == "CompendiumBrowserVueApplication");
// Otherwise, build a new one. // Otherwise, build a new one.
if (!compendiumBrowser) { if (!compendiumBrowser) {
compendiumBrowser = new CompendiumBrowserVueApplication({ defaultTab: event.target.dataset.tab ?? 'creatures' }); compendiumBrowser = new CompendiumBrowserVueApplication({ defaultTab: event.target.dataset.tab ?? "creatures" });
} }
// Render the browser. // Render the browser.
compendiumBrowser.render(true); compendiumBrowser.render(true);
@ -1607,19 +1607,19 @@ Hooks.once('ready', () => {
/* ---------------------------------------------- */ /* ---------------------------------------------- */
Hooks.on("renderDocumentDirectory", (app, html, options) => { Hooks.on("renderDocumentDirectory", (app, html, options) => {
if (["actors", "items"].includes(options.tabName) && !options.cssId.toLowerCase().includes('compendium')) { if (["actors", "items"].includes(options.tabName) && !options.cssId.toLowerCase().includes("compendium")) {
const htmlElement = html[0]; const htmlElement = html[0];
let compendiumButton = ''; let compendiumButton = "";
if (options.tabName == "items") { if (options.tabName == "items") {
compendiumButton = ` compendiumButton = `
<div class="flexrow"> <div class="flexrow">
<button type="button" class="open-compendium-browser" data-tab="powers"><i class="fas fa-atlas"></i>${game.i18n.localize('CMPBrowser.Tab.SpellBrowser')}</button> <button type="button" class="open-compendium-browser" data-tab="powers"><i class="fas fa-atlas"></i>${game.i18n.localize("CMPBrowser.Tab.SpellBrowser")}</button>
<button type="button" class="open-compendium-browser" data-tab="items"><i class="fas fa-suitcase"></i>${game.i18n.localize('CMPBrowser.Tab.ItemBrowser')}</button> <button type="button" class="open-compendium-browser" data-tab="items"><i class="fas fa-suitcase"></i>${game.i18n.localize("CMPBrowser.Tab.ItemBrowser")}</button>
</div>`; </div>`;
} }
else { else {
compendiumButton = `<button type="button" class="open-compendium-browser" data-tab="creatures"><i class="fas fa-user"></i>${game.i18n.localize('CMPBrowser.Tab.NPCBrowser')}</button>`; compendiumButton = `<button type="button" class="open-compendium-browser" data-tab="creatures"><i class="fas fa-user"></i>${game.i18n.localize("CMPBrowser.Tab.NPCBrowser")}</button>`;
} }
// Append button. Click handler added in 'ready' hook. // Append button. Click handler added in 'ready' hook.
htmlElement.querySelector(".directory-footer").insertAdjacentHTML("beforeend", compendiumButton); htmlElement.querySelector(".directory-footer").insertAdjacentHTML("beforeend", compendiumButton);

View File

@ -1,2 +1,2 @@
// Main app. // Main app.
export { default as VueCompendiumBrowser } from './CompendiumBrowser.vue'; export { default as VueCompendiumBrowser } from "./CompendiumBrowser.vue";

View File

@ -6,7 +6,7 @@ export function getSafeValue(property, defaultValue) {
export function cssClass(string) { export function cssClass(string) {
return encodeURIComponent( return encodeURIComponent(
string.trim().toLowerCase() string.trim().toLowerCase()
).replace(/%[0-9A-F]{2}/gi, '-'); ).replace(/%[0-9A-F]{2}/gi, "-");
} }
export function numberFormat(value, dec = 0, sign = false) { export function numberFormat(value, dec = 0, sign = false) {
@ -18,7 +18,7 @@ export function numberFormat(value, dec = 0, sign = false) {
export function concat(...args) { export function concat(...args) {
return args.reduce((acc, cur) => { return args.reduce((acc, cur) => {
return acc + cur; return acc + cur;
}, ''); }, "");
} }
export async function getActor(actorData) { export async function getActor(actorData) {
@ -40,7 +40,7 @@ export async function getActor(actorData) {
*/ */
export function getActorModuleArt(actor) { export function getActorModuleArt(actor) {
// UUID doesn't exactly match the format used in the map currently. // UUID doesn't exactly match the format used in the map currently.
const actorMapId = actor.uuid.replace('.Actor', ''); const actorMapId = actor.uuid.replace(".Actor", "");
// Retrieve the art from the map, or fallback to the actor image. // Retrieve the art from the map, or fallback to the actor image.
const art = game.dnd5e.moduleArt.map.get(actorMapId); const art = game.dnd5e.moduleArt.map.get(actorMapId);
return art?.actor ?? actor.img; return art?.actor ?? actor.img;
@ -74,11 +74,11 @@ export async function getPackIndex(packNames = [], fields = []) {
* @param {string} uuid Document UUID to open. * @param {string} uuid Document UUID to open.
* @param {string} type Document type to open. Defaults to 'Actor'. * @param {string} type Document type to open. Defaults to 'Actor'.
*/ */
export function openDocument(uuid, type = 'Actor') { export function openDocument(uuid, type = "Actor") {
getDocumentClass(type).fromDropData({ getDocumentClass(type).fromDropData({
type: type, type: type,
uuid: uuid uuid: uuid
}).then(document => { }).then((document) => {
if (document?.sheet) { if (document?.sheet) {
document.sheet.render(true); document.sheet.render(true);
} }
@ -94,8 +94,8 @@ export function openDocument(uuid, type = 'Actor') {
* @param {Event} event Drag event. * @param {Event} event Drag event.
* @param {Object} entry Pack index entry object. * @param {Object} entry Pack index entry object.
*/ */
export function startDrag(event, entry, type = 'Actor') { export function startDrag(event, entry, type = "Actor") {
event.dataTransfer.setData('text/plain', JSON.stringify({ event.dataTransfer.setData("text/plain", JSON.stringify({
type: type, type: type,
uuid: entry.uuid uuid: entry.uuid
})); }));

View File

@ -1,14 +1,14 @@
import path from 'path' import path from "path";
import { defineConfig } from 'vite' import { defineConfig } from "vite";
import vue from '@vitejs/plugin-vue' import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [vue()], plugins: [vue()],
resolve: { resolve: {
alias: { alias: {
'@/': `${path.resolve(__dirname, 'src/vue')}/`, "@/": `${path.resolve(__dirname, "src/vue")}/`,
'@src/': `${path.resolve(__dirname, 'src')}/`, "@src/": `${path.resolve(__dirname, "src")}/`,
} }
}, },
css: { css: {
@ -18,30 +18,29 @@ export default defineConfig({
}, },
build: { build: {
sourcemap: true, sourcemap: true,
outDir: './src/components', outDir: "./src/components",
lib: { lib: {
entry: path.resolve(__dirname, 'src/vue/index.js'), entry: path.resolve(__dirname, "src/vue/index.js"),
name: 'v3ArchmageVueComponents', name: "v3ArchmageVueComponents",
formats: ['es'], // also supports 'umd' formats: ["es"], // also supports 'umd'
fileName: (format) => `components.vue.${format}.js`, fileName: (format) => `components.vue.${format}.js`,
}, },
rollupOptions: { rollupOptions: {
external: [ external: [
'vue', "vue",
], ],
output: { output: {
// Provide global variables to use in the UMD build // Provide global variables to use in the UMD build
// Add external deps here // Add external deps here
globals: { globals: {
vue: 'Vue', vue: "Vue",
}, },
// Map the external dependency to a local copy of Vue 3 esm. // Map the external dependency to a local copy of Vue 3 esm.
paths: { paths: {
vue: `../lib/vue.esm-browser.js` vue: "../lib/vue.esm-browser.js"
}, },
assetFileNames: (assetInfo) => { assetFileNames: (assetInfo) => {
if (assetInfo.name == 'style.css') if (assetInfo.name == "style.css") return "styles.vue.css";
return `styles.vue.css`;
return assetInfo.name; return assetInfo.name;
} }
}, },

View File

@ -1,14 +1,14 @@
import path from 'path' import path from "path";
import { defineConfig } from 'vite' import { defineConfig } from "vite";
import vue from '@vitejs/plugin-vue' import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [vue()], plugins: [vue()],
resolve: { resolve: {
alias: { alias: {
'@/': `${path.resolve(__dirname, 'src/vue')}/`, "@/": `${path.resolve(__dirname, "src/vue")}/`,
'@src/': `${path.resolve(__dirname, 'src')}/`, "@src/": `${path.resolve(__dirname, "src")}/`,
} }
}, },
// css: { // css: {
@ -20,30 +20,29 @@ export default defineConfig({
// }, // },
build: { build: {
sourcemap: true, sourcemap: true,
outDir: './dist/vue', outDir: "./dist/vue",
lib: { lib: {
entry: path.resolve(__dirname, 'src/vue/index.js'), entry: path.resolve(__dirname, "src/vue/index.js"),
name: 'CompendiumBrowserVue', name: "CompendiumBrowserVue",
formats: ['es'], // also supports 'umd' formats: ["es"], // also supports 'umd'
fileName: (format) => `components.vue.${format}.js`, fileName: (format) => `components.vue.${format}.js`,
}, },
rollupOptions: { rollupOptions: {
external: [ external: [
'vue', "vue",
], ],
output: { output: {
// Provide global variables to use in the UMD build // Provide global variables to use in the UMD build
// Add external deps here // Add external deps here
globals: { globals: {
vue: 'Vue', vue: "Vue",
}, },
// Map the external dependency to a local copy of Vue 3 esm. // Map the external dependency to a local copy of Vue 3 esm.
paths: { paths: {
vue: `../lib/vue.esm-browser.prod.js` vue: "../lib/vue.esm-browser.prod.js"
}, },
assetFileNames: (assetInfo) => { assetFileNames: (assetInfo) => {
if (assetInfo.name == 'style.css') if (assetInfo.name == "style.css") return "styles.vue.css";
return `styles.vue.css`;
return assetInfo.name; return assetInfo.name;
} }
}, },