Update markup to match existing CSS

pull/12/head
Matt Smith 2024-03-29 20:19:17 -05:00
parent 961219d9b6
commit 2327f2cdea
6 changed files with 75 additions and 81 deletions

View File

@ -1,17 +1,17 @@
import { openBlock as r, createElementBlock as o, createElementVNode as g, normalizeClass as m, Fragment as y, renderList as w, createCommentVNode as _, toDisplayString as v, renderSlot as T, resolveComponent as f, createVNode as i, withCtx as b, createTextVNode as h } from "../lib/vue.esm-browser.js"; import { openBlock as r, createElementBlock as o, normalizeClass as m, Fragment as T, renderList as y, createCommentVNode as _, toDisplayString as w, renderSlot as h, resolveComponent as f, createVNode as l, createElementVNode as v, withCtx as b, createTextVNode as g } from "../lib/vue.esm-browser.js";
function k(...t) { function C(...t) {
return t.reduce((a, e) => a + e, ""); return t.reduce((a, e) => a + e, "");
} }
const p = (t, a) => { const p = (t, a) => {
const e = t.__vccOpts || t; const e = t.__vccOpts || t;
for (const [l, s] of a) for (const [u, s] of a)
e[l] = s; e[u] = s;
return e; return e;
}, x = { }, k = {
name: "Tabs", name: "Tabs",
props: ["context", "actor", "group", "tabs", "flags"], props: ["context", "actor", "group", "tabs", "flags"],
setup() { setup() {
return { concat: k }; return { concat: C };
}, },
data() { data() {
return { return {
@ -34,61 +34,59 @@ const p = (t, a) => {
const t = (a = Object.values(this.tabs)) == null ? void 0 : a.find((e) => e.active); const t = (a = Object.values(this.tabs)) == null ? void 0 : a.find((e) => e.active);
Object.values(this.tabs).forEach((e) => console.log(e)), console.log("Active", t), this.currentTab = (t == null ? void 0 : t.key) ?? "creatures", this.changeTab(!1); Object.values(this.tabs).forEach((e) => console.log(e)), console.log("Active", t), this.currentTab = (t == null ? void 0 : t.key) ?? "creatures", this.changeTab(!1);
} }
}, C = { class: "section section--tabs flexshrink" }, $ = ["data-group"], B = ["data-tab"], S = { key: 1 }; }, x = ["data-group"], $ = ["data-tab"], B = { key: 1 };
function N(t, a, e, l, s, u) { function S(t, a, e, u, s, i) {
return r(), o("section", C, [ return r(), o("nav", {
g("nav", { class: m(`tabs tabs--${e.group}`),
class: m("sheet-tabs tabs tabs--" + e.group), "data-group": e.group
"data-group": e.group }, [
(r(!0), o(T, null, y(e.tabs, (n, c) => (r(), o("span", {
key: "tab-" + e.group + "-" + c
}, [ }, [
(r(!0), o(y, null, w(e.tabs, (n, c) => (r(), o("span", { n.hidden ? _("", !0) : (r(), o("a", {
key: "tab-" + e.group + "-" + c key: 0,
onClick: a[0] || (a[0] = (...d) => i.changeTab && i.changeTab(...d)),
class: m(i.getTabClass(n, c)),
"data-tab": c
}, [ }, [
n.hidden ? _("", !0) : (r(), o("a", { n.icon ? (r(), o("i", {
key: 0, key: 0,
onClick: a[0] || (a[0] = (...d) => u.changeTab && u.changeTab(...d)), class: m(u.concat("fas ", n.icon))
class: m(u.getTabClass(n, c)), }, null, 2)) : _("", !0),
"data-tab": c n.hideLabel ? _("", !0) : (r(), o("span", B, w(n.label), 1))
}, [ ], 10, $))
n.icon ? (r(), o("i", { ]))), 128))
key: 0, ], 10, x);
class: m(l.concat("fas ", n.icon))
}, null, 2)) : _("", !0),
n.hideLabel ? _("", !0) : (r(), o("span", S, v(n.label), 1))
], 10, B))
]))), 128))
], 10, $)
]);
} }
const O = /* @__PURE__ */ p(x, [["render", N]]), V = { const N = /* @__PURE__ */ p(k, [["render", S]]), O = {
name: "Tab", name: "Tab",
props: ["context", "actor", "tab", "group", "classes"] props: ["context", "actor", "tab", "group", "classes"]
}, z = ["data-group", "data-tab"]; }, V = ["data-group", "data-tab"];
function I(t, a, e, l, s, u) { function z(t, a, e, u, s, i) {
return r(), o("div", { return r(), o("div", {
class: m("tab " + e.tab.key + (e.tab.active ? " active" : "") + (e.classes ? " " + e.classes : "")), class: m("tab " + e.tab.key + (e.tab.active ? " active" : "") + (e.classes ? " " + e.classes : "")),
"data-group": e.group, "data-group": e.group,
"data-tab": e.tab.key "data-tab": e.tab.key
}, [ }, [
T(t.$slots, "default") h(t.$slots, "default")
], 10, z); ], 10, V);
} }
const P = /* @__PURE__ */ p(V, [["render", I]]), j = { const I = /* @__PURE__ */ p(O, [["render", z]]), P = {
name: "Stub", name: "Stub",
props: ["context"] props: ["context"]
}; };
function E(t, a, e, l, s, u) { function j(t, a, e, u, s, i) {
return r(), o("h1", null, [ return r(), o("h1", null, [
T(t.$slots, "default", {}, void 0, !0) h(t.$slots, "default", {}, void 0, !0)
]); ]);
} }
const M = /* @__PURE__ */ p(j, [["render", E], ["__scopeId", "data-v-ceecbcd3"]]), A = { const E = /* @__PURE__ */ p(P, [["render", j], ["__scopeId", "data-v-ceecbcd3"]]), M = {
name: "ArchmageCompendiumBrowser", name: "ArchmageCompendiumBrowser",
props: ["context"], props: ["context"],
components: { components: {
Tabs: O, Tabs: N,
Tab: P, Tab: I,
Stub: M Stub: E
// CompendiumBrowserCreatures, // CompendiumBrowserCreatures,
// CompendiumBrowserPowers, // CompendiumBrowserPowers,
// CompendiumBrowserItems // CompendiumBrowserItems
@ -137,56 +135,54 @@ const M = /* @__PURE__ */ p(j, [["render", E], ["__scopeId", "data-v-ceecbcd3"]]
async mounted() { async mounted() {
console.log("Compendium browser mounted."); console.log("Compendium browser mounted.");
} }
}, F = { class: "compendium-browser-vue flexcol" }, L = { class: "container container--top" }, D = { class: "container container--bottom" }; }, A = { class: "compendium-browser-vue parent flexcol" }, F = { class: "content" };
function G(t, a, e, l, s, u) { function L(t, a, e, u, s, i) {
const n = f("Tabs"), c = f("Stub"), d = f("Tab"); const n = f("Tabs"), c = f("Stub"), d = f("Tab");
return r(), o("div", F, [ return r(), o("div", A, [
g("section", L, [ l(n, {
i(n, { group: "primary",
group: "primary", tabs: s.tabs.primary
tabs: s.tabs.primary }, null, 8, ["tabs"]),
}, null, 8, ["tabs"]) v("section", F, [
]), l(d, {
g("section", D, [
i(d, {
group: "primary", group: "primary",
tab: s.tabs.primary.creatures, tab: s.tabs.primary.creatures,
classes: "container container--bottom flexrow" classes: "container container--bottom flexrow"
}, { }, {
default: b(() => [ default: b(() => [
i(c, null, { l(c, null, {
default: b(() => [ default: b(() => [
h("Creatures") g("Creatures")
]), ]),
_: 1 _: 1
}) })
]), ]),
_: 1 _: 1
}, 8, ["tab"]), }, 8, ["tab"]),
i(d, { l(d, {
group: "primary", group: "primary",
tab: s.tabs.primary.powers, tab: s.tabs.primary.powers,
classes: "container container--bottom flexrow" classes: "container container--bottom flexrow"
}, { }, {
default: b(() => [ default: b(() => [
i(c, null, { l(c, null, {
default: b(() => [ default: b(() => [
h("Spells") g("Spells")
]), ]),
_: 1 _: 1
}) })
]), ]),
_: 1 _: 1
}, 8, ["tab"]), }, 8, ["tab"]),
i(d, { l(d, {
group: "primary", group: "primary",
tab: s.tabs.primary.items, tab: s.tabs.primary.items,
classes: "container container--bottom flexrow" classes: "container container--bottom flexrow"
}, { }, {
default: b(() => [ default: b(() => [
i(c, null, { l(c, null, {
default: b(() => [ default: b(() => [
h("Items") g("Items")
]), ]),
_: 1 _: 1
}) })
@ -196,8 +192,8 @@ function G(t, a, e, l, s, u) {
]) ])
]); ]);
} }
const H = /* @__PURE__ */ p(A, [["render", G]]); const G = /* @__PURE__ */ p(M, [["render", L]]);
export { export {
H as VueCompendiumBrowser G as VueCompendiumBrowser
}; };
//# sourceMappingURL=components.vue.es.js.map //# sourceMappingURL=components.vue.es.js.map

File diff suppressed because one or more lines are too long

View File

@ -33,14 +33,14 @@ export class CompendiumBrowserVueApplication extends Application {
return {...super.defaultOptions, return {...super.defaultOptions,
classes: [ classes: [
'form', 'form',
'compendium-browser-dialog' '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: 1024, width: 800,
height: 775, height: 730,
resizable: true, resizable: true,
}; };
} }

View File

@ -1,3 +1,3 @@
<form class="{{cssClass}} compendium-browser-mount" onsubmit="return false" autocomplete="off"> <form class="compendium-browser-mount {{cssClass}}" onsubmit="return false" autocomplete="off">
<compendium-browser :context="context">Failed to render Vue component.</compendium-browser> <compendium-browser :context="context">Failed to render Vue component.</compendium-browser>
</form> </form>

View File

@ -1,12 +1,12 @@
<template> <template>
<div class="compendium-browser-vue flexcol"> <div class="compendium-browser-vue parent flexcol">
<!-- Tabs. --> <!-- Tabs. -->
<section class="container container--top"> <!-- <section class="container container--top"> -->
<Tabs group="primary" :tabs="tabs.primary"/> <Tabs group="primary" :tabs="tabs.primary"/>
</section> <!-- </section> -->
<!-- Filters + Content. --> <!-- Filters + Content. -->
<section class="container container--bottom"> <section class="content">
<!-- <!--
Render each tab wrapper and their contents. The CompendiumBrowser<Type> components Render each tab wrapper and their contents. The CompendiumBrowser<Type> components

View File

@ -1,14 +1,12 @@
<template> <template>
<section class="section section--tabs flexshrink"> <nav :class="`tabs tabs--${group}`" :data-group="group">
<nav :class="'sheet-tabs tabs tabs--' + group" :data-group="group"> <span v-for="(tab, tabKey) in tabs" :key="'tab-' + group + '-' + tabKey">
<span v-for="(tab, tabKey) in tabs" :key="'tab-' + group + '-' + tabKey"> <a @click="changeTab" :class="getTabClass(tab, tabKey)" :data-tab="tabKey" v-if="!tab.hidden">
<a @click="changeTab" :class="getTabClass(tab, tabKey)" :data-tab="tabKey" v-if="!tab.hidden"> <i v-if="tab.icon" :class="concat('fas ', tab.icon)"></i>
<i v-if="tab.icon" :class="concat('fas ', tab.icon)"></i> <span v-if="!tab.hideLabel">{{tab.label}}</span>
<span v-if="!tab.hideLabel">{{tab.label}}</span> </a>
</a> </span>
</span> </nav>
</nav>
</section>
</template> </template>
<script> <script>