intelligent-system-design-language 0.3.13

package/out/cli/components/vue/vue-mixin.js

@@ -0,0 +1,338 @@
+import * as path from 'node:path';
+import * as fs from 'node:fs';
+import { expandToNode, joinToNode, toString } from 'langium/generate';
+export function generateVueMixin(description) {
+    const generatedFileDir = path.join(description, "system", "sheets", "vue");
+    const generatedFilePath = path.join(generatedFileDir, "VueRenderingMixin.mjs");
+    if (!fs.existsSync(generatedFileDir)) {
+        fs.mkdirSync(generatedFileDir, { recursive: true });
+    }
+    const customComponents = {
+        'i-attribute': 'Attribute',
+        'i-resource': 'Resource',
+        'i-document-link': 'DocumentLink',
+        'i-prosemirror': 'ProseMirror',
+        'i-roll-visualizer': 'RollVisualizer',
+        'i-paperdoll': 'Paperdoll',
+        "i-calculator": "Calculator",
+        "i-text-field": "TextField",
+        "i-datetime": "DateTime",
+        "i-tracker": "Tracker",
+        "i-macro": "MacroField",
+        "i-measured-template": "MeasuredTemplateField",
+        "i-extended-choice": "ExtendedChoiceField",
+        "i-dice": "DiceField",
+        "i-bonuses": "DamageBonuses",
+        "i-resistances": "DamageResistances",
+        "i-boolean": "BooleanField",
+        "i-die": "DieField",
+        "i-string": "StringMethodField",
+        "i-number": "NumberField",
+        "i-string-choice": "StringChoiceField",
+        "i-string-choices": "StringChoicesField",
+        "i-parent-property-reference": "ParentPropertyReferenceField",
+        "i-self-property-reference": "SelfPropertyReferenceField",
+        "i-money": "MoneyField",
+        "i-inventory": "Inventory",
+        "i-damage-track": "DamageTrack",
+    };
+    const fileNode = expandToNode `
+        import { createApp } from "../../../lib/vue.esm-browser.js";
+        import * as Vuetify from "../../../lib/vuetify.esm.js";
+        import { ${joinToNode(Object.values(customComponents), c => expandToNode `${c}`, { separator: ", " })} } from "./components/components.vue.es.mjs";
+
+        /**
+         * Vue rendering mixin for ApplicationV2.
+         *
+         * @param {Constructor} BaseApplication
+         * @returns {VueApplication}
+         */
+        export default function VueRenderingMixin(BaseApplication) {
+
+            class VueApplication extends BaseApplication {
+
+                /** Vue application instance created with createApp(). */
+                vueApp = null;
+
+                /** Vue root for the mounted application instance. */
+                vueRoot = null;
+
+                /** Constant to force updates on change. */
+                _renderKey = 0;
+
+                /**
+                 * Object to store vue parts.
+                 *
+                 * @example
+                 * vueParts = {
+                 *   'document-sheet': {
+                 *     component: DocumentSheetVue,
+                 *     template: \`<document-sheet :context="context">Failed to render</document-sheet>\`
+                 *   },
+                 *   'foobar': {
+                 *     component: Foobar,
+                 *     template: \`<foobar :context="context"/>\`
+                 *   }
+                 * }
+                 */
+                vueParts = {};
+
+                /**
+                 * Getter for vueComponents
+                 *
+                 * Retrieves an object of component tags to component instances from the vueParts property.
+                 *
+                 * @example
+                 * {
+                 *   'document-sheet': DocumentSheet,
+                 *   'foobar': Foobar,
+                 * }
+                 *
+                 * @returns {object} Object with component tags mapped to components.
+                 */
+                get vueComponents() {
+                    const components = {};
+                    for (let [key, part] of Object.entries(this.vueParts)) {
+                        if (part?.component) {
+                            components[key] = part.component;
+                        }
+                    }
+                    return components;
+                }
+
+                /**
+                 * Getter for vueTemplates
+                 *
+                 * Retrieves an array of template part strings to render.
+                 *
+                 * @example
+                 * [
+                 *   '<document-sheet :context="context">Failed to render</document-sheet>',
+                 *   '<foobar :context="context"/>'
+                 * ]
+                 *
+                 * @returns {Array} Array of vue template mount points.
+                 */
+                get vueTemplates() {
+                    return Object.values(this.vueParts).map((part) => part.template);
+                }
+
+                vueData(context) {
+                    return {
+                        context: context
+                    };
+                }
+
+                _getProvidedData() {
+                    // This is a placeholder for any data you want to provide to the Vue app.
+                    // You can override this method in your subclass to provide additional data.
+                    return {};
+                }
+
+                /**
+                 * Render the outer framing HTMLElement and mount the Vue application.
+                 *
+                 * This occurs when the application is opened, but not on subsequent renders.
+                 *
+                 * @param {RenderOptions} options
+                 * @returns {Promise<HTMLElement>}
+                 *
+                 * @protected
+                 * @override
+                 */
+                async _renderFrame(options) {
+                    // Retrieve the context and element.
+                    const context = await this._prepareContext(options);
+                    const element = await super._renderFrame(options);
+
+                    // Grab our application target and render our parts.
+                    const target = this.hasFrame ? element.querySelector(".window-content") : element;
+                    target.innerHTML = this.vueTemplates.join("");
+
+                    const aliases = {
+                        collapse: 'fas fa-chevron-up',
+                        complete: 'fas fa-check',
+                        cancel: 'fas fa-times-circle',
+                        close: 'fas fa-times',
+                        delete: 'fas fa-times-circle',
+                        // delete (e.g. v-chip close)
+                        clear: 'fas fa-times-circle',
+                        // delete (e.g. v-chip close)
+                        success: 'fas fa-check-circle',
+                        info: 'fas fa-info-circle',
+                        warning: 'fas fa-exclamation',
+                        error: 'fas fa-exclamation-triangle',
+                        prev: 'fas fa-chevron-left',
+                        next: 'fas fa-chevron-right',
+                        checkboxOn: 'fas fa-check-square',
+                        checkboxOff: 'far fa-square',
+                        // note 'far'
+                        checkboxIndeterminate: 'fas fa-minus-square',
+                        delimiter: 'fas fa-circle',
+                        // for carousel
+                        sortAsc: 'fas fa-arrow-up',
+                        sortDesc: 'fas fa-arrow-down',
+                        expand: 'fas fa-chevron-down',
+                        menu: 'fas fa-bars',
+                        subgroup: 'fas fa-caret-down',
+                        dropdown: 'fas fa-caret-down',
+                        radioOn: 'far fa-dot-circle',
+                        radioOff: 'far fa-circle',
+                        edit: 'fas fa-edit',
+                        ratingEmpty: 'far fa-star',
+                        ratingFull: 'fas fa-star',
+                        ratingHalf: 'fas fa-star-half',
+                        loading: 'fas fa-sync',
+                        first: 'fas fa-step-backward',
+                        last: 'fas fa-step-forward',
+                        unfold: 'fas fa-arrows-alt-v',
+                        file: 'fas fa-paperclip',
+                        plus: 'fas fa-plus',
+                        minus: 'fas fa-minus',
+                        calendar: 'fas fa-calendar',
+                        treeviewCollapse: 'fas fa-caret-down',
+                        treeviewExpand: 'fas fa-caret-right',
+                        eyeDropper: 'fas fa-eye-dropper'
+                    };
+                    const fa = {
+                        component: Vuetify.components.VClassIcon
+                    };
+
+                    const vueData = this.vueData(context);
+                    console.log("Vue App Data:", vueData, this.document);
+
+                    // Create and store the Vue application instance.
+                    this.vueApp = createApp({
+                        // Data available in the template.
+                        data() {
+                            return vueData;
+                        },
+                        // Components allowed by the application.
+                        components: this.vueComponents,
+                        // Method to update the template data on subsequent changes.
+                        methods: {
+                            updateContext(newContext) {
+                                // Note that 'this' refers to this.vueApp, not the full AppV2 instance.
+                                for (let key of Object.keys(this.context)) {
+                                    if (newContext[key]) {
+                                        this.context[key] = newContext[key];
+                                    }
+                                }
+                            }
+                        },
+                        watch: {
+                            "context._renderKey": {
+                                handler: function (newVal, oldVal) {
+                                    this.$nextTick(() => {
+                                        const changeEvent = new Event("change", { bubbles: true });
+                                        this.$el.dispatchEvent(changeEvent);
+                                    });
+                                }
+                            }
+                        }
+                    });
+                    ${joinToNode(Object.keys(customComponents), c => expandToNode `this.vueApp.component("${c}", ${customComponents[c]});`, { appendNewLineIfNotEmpty: true })}
+                    const vuetify = Vuetify.createVuetify({
+                        icons: {
+                            defaultSet: 'fa',
+                            aliases,
+                            sets: {
+                                fa,
+                            },
+                        },
+                        components: {
+                            VNumberInput: Vuetify.components.VNumberInput
+                        }
+                    });
+                    this.vueApp.use(vuetify);
+
+                    // Expose global Foundry variables.
+                    this.vueApp.config.globalProperties.game = game;
+                    this.vueApp.config.globalProperties.CONFIG = CONFIG;
+                    this.vueApp.config.globalProperties.foundry = foundry;
+
+                    // Expose the document.
+                    this.vueApp.provide("rawDocument", this.document);
+                    this.vueApp.provide("rawSheet", this);
+
+                    // Expose any extras
+                    const providedData = this._getProvidedData();
+                    for (let key of Object.keys(providedData)) {
+                        this.vueApp.provide(key, providedData[key]);
+                    }
+
+                    // Mount and store the vue application.
+                    this.vueRoot = this.vueApp.mount(target);
+
+                    return element;
+                }
+
+                /**
+                 * Handle updates for the Vue application instance.
+                 *
+                 * Normally, this would render the HTML for the content within the application.
+                 * However, for Vue, all we want to do is update the 'context' property that's
+                 * passed into the Vue application instance.
+                 *
+                 * Unlike _renderFrame(), this occurs on every update for the application.
+                 *
+                 * @param {ApplicationRenderContext} context
+                 * @param {RenderOptions} options
+                 * @returns {Promise<string>}
+                 *
+                 * @protected
+                 * @override
+                 */
+                async _renderHTML(context, options) {
+                    // Force certain updates.
+                    this._renderKey++;
+                    context._renderKey = this._renderKey;
+                    // Update the application root with new values.
+                    this.vueRoot.updateContext(context);
+                    // Return doesn't matter, Vue handles updates.
+
+                    // If game.tooltip has an element, reactivate it
+                    if (game.tooltip.element) {
+                        const element = game.tooltip.element;
+                        game.tooltip.deactivate();
+                        game.tooltip.activate(element);
+                    }
+                }
+
+                /** @override */
+                _replaceHTML(result, content, options) {
+                    // Pass. We don't need this in Vue land! But Foundry itself does...
+                }
+
+                /**
+                 * Closes the application and unmounts the vue application instance.
+                 *
+                 * @param {ApplicationClosingOptions} options
+                 * @returns {Promise<BaseApplication>}
+                 *
+                 * @override
+                 */
+                async close(options = {}) {
+                    if (this.options.form.submitOnClose && this.isEditable) {
+                        await this.submit();
+                    }
+                    // Unmount the vue instance.
+                    if (this.vueApp) this.vueApp.unmount();
+                    await super.close(options);
+                }
+
+                async _onFirstRender(context) {
+                    super._onFirstRender(context);
+
+                    // Replace the .application class with .vue-application
+                    this.element.classList.remove("application");
+                    this.element.classList.add("vue-application");
+                }
+            }
+
+            return VueApplication;
+        }   
+    `.appendNewLine();
+    fs.writeFileSync(generatedFilePath, toString(fileNode));
+}
+//# sourceMappingURL=vue-mixin.js.map

package/out/cli/components/vue/vue-mixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue-mixin.js","sourceRoot":"","sources":["../../../../src/cli/components/vue/vue-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEtE,MAAM,UAAU,gBAAgB,CAAC,WAAmB;IAChD,MAAM,gBAAgB,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;IAC3E,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,uBAAuB,CAAC,CAAC;IAE/E,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAE;QAClC,EAAE,CAAC,SAAS,CAAC,gBAAgB,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;KACvD;IAED,MAAM,gBAAgB,GAAG;QACrB,aAAa,EAAE,WAAW;QAC1B,YAAY,EAAE,UAAU;QACxB,iBAAiB,EAAE,cAAc;QACjC,eAAe,EAAE,aAAa;QAC9B,mBAAmB,EAAE,gBAAgB;QACrC,aAAa,EAAE,WAAW;QAC1B,cAAc,EAAE,YAAY;QAC5B,cAAc,EAAE,WAAW;QAC3B,YAAY,EAAE,UAAU;QACxB,WAAW,EAAE,SAAS;QACtB,SAAS,EAAE,YAAY;QACvB,qBAAqB,EAAE,uBAAuB;QAC9C,mBAAmB,EAAE,qBAAqB;QAC1C,QAAQ,EAAE,WAAW;QACrB,WAAW,EAAE,eAAe;QAC5B,eAAe,EAAE,mBAAmB;QACpC,WAAW,EAAE,cAAc;QAC3B,OAAO,EAAE,UAAU;QACnB,UAAU,EAAE,mBAAmB;QAC/B,UAAU,EAAE,aAAa;QACzB,iBAAiB,EAAE,mBAAmB;QACtC,kBAAkB,EAAE,oBAAoB;QACxC,6BAA6B,EAAE,8BAA8B;QAC7D,2BAA2B,EAAE,4BAA4B;QACzD,SAAS,EAAE,YAAY;QACvB,aAAa,EAAE,WAAW;QAC1B,gBAAgB,EAAE,aAAa;KAClC,CAAC;IAEF,MAAM,QAAQ,GAAG,YAAY,CAAA;;;mBAGd,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,YAAY,CAAA,GAAG,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAgMrF,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAyC,EAAE,CAAC,CAAC,EAAE,CAAC,YAAY,CAAA,0BAA0B,CAAC,MAAM,gBAAgB,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,uBAAuB,EAAE,IAAI,EAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqG/M,CAAC,aAAa,EAAE,CAAC;IAElB,EAAE,CAAC,aAAa,CAAC,iBAAiB,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC;AAC5D,CAAC"}

package/out/cli/components/vue/vue-pinned-datatable-component-generator.js

@@ -0,0 +1,306 @@
+import * as path from 'node:path';
+import * as fs from 'node:fs';
+import { expandToNode, joinToNode, toString } from 'langium/generate';
+import { isAction, isActor, isColorParam, isDocument, isIconParam, isLabelParam, isPage } from "../../../language/generated/ast.js";
+import { getAllOfType } from '../utils.js';
+import { AstUtils } from 'langium';
+export function generatePinnedVuetifyDatatableComponent(id, document, pinnedField, destination, entry) {
+    var _a, _b;
+    const type = isActor(document) ? 'actor' : 'item';
+    const page = AstUtils.getContainerOfType(pinnedField, isPage);
+    const pageName = page ? page.name : document.name;
+    const generatedFileDir = path.join(destination, "system", "templates", "vue", type, document.name.toLowerCase(), "components", "datatables");
+    const generatedFilePath = path.join(generatedFileDir, `${document.name.toLowerCase()}${pageName}${pinnedField.name}VuetifyDatatable.vue`);
+    if (!fs.existsSync(generatedFileDir)) {
+        fs.mkdirSync(generatedFileDir, { recursive: true });
+    }
+    const iconParam = pinnedField.params.find(p => isIconParam(p));
+    const labelParam = pinnedField.params.find(p => isLabelParam(p));
+    const icon = (_a = iconParam === null || iconParam === void 0 ? void 0 : iconParam.value) !== null && _a !== void 0 ? _a : "fa-solid fa-thumbtack";
+    const label = (_b = labelParam === null || labelParam === void 0 ? void 0 : labelParam.value) !== null && _b !== void 0 ? _b : `${document.name}.${pinnedField.name}`;
+    // Create a mapping of document types to their actions
+    const documentActionsMap = new Map();
+    if (entry) {
+        // Get all documents (actors and items) from the entry
+        const allDocuments = entry.documents;
+        for (const doc of allDocuments) {
+            if (doc.body && doc.name) {
+                const actions = getAllOfType(doc.body, isAction, false);
+                if (actions.length > 0) {
+                    documentActionsMap.set(doc.name.toLowerCase(), actions);
+                }
+            }
+        }
+    }
+    // Helper function to get action label
+    function getActionLabel(action) {
+        const parentDocument = AstUtils.getContainerOfType(action, isDocument);
+        return `${parentDocument === null || parentDocument === void 0 ? void 0 : parentDocument.name}.${action.name}`;
+    }
+    const fileNode = expandToNode `
+<script setup>
+    import { ref, computed, inject, onMounted, watch } from "vue";
+
+    const props = defineProps({
+        systemPath: String,
+        context: Object,
+        primaryColor: String,
+        secondaryColor: String,
+        tertiaryColor: String
+    });
+    
+    const document = inject('rawDocument');
+    const search = ref('');
+    const loading = ref(false);
+
+    // Function to get actions for a specific document type
+    const getActionsForType = (itemType) => {
+        const actionsMap = {
+            ${joinToNode(Array.from(documentActionsMap.entries()), ([docType, actions]) => expandToNode `'${docType}': [${joinToNode(actions, action => {
+        var _a, _b, _c, _d;
+        return expandToNode `{ 
+                        name: '${action.name.toLowerCase()}', 
+                        icon: '${(_b = (_a = action.params.find(p => isIconParam(p))) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "fa-solid fa-bolt"}',
+                        color: '${(_d = (_c = action.params.find(p => isColorParam(p))) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : "primary"}',
+                        label: '${getActionLabel(action)}'
+                    }`;
+    }, { separator: ', ' })}]`, { separator: ',\n            ' })}
+        };
+        return actionsMap[itemType.toLowerCase()] || [];
+    };
+
+    // Get all pinned items from the actor's items collection
+    const data = computed(() => {
+        if (!document || !document.items) return [];
+        
+        return Array.from(document.items.values())
+            .filter(item => item.system?.pinned === true)
+            .sort((a, b) => a.name.localeCompare(b.name));
+    });
+
+    const humanize = (str) => {
+        if (!str) return "";
+        let humanized = str.replace(/_/g, " ");
+        humanized = humanized.replace("system.", "").replaceAll(".", " ");
+        humanized = humanized.charAt(0).toUpperCase() + humanized.slice(1);
+        return humanized;
+    };
+
+    const editItem = (item) => {
+        const foundryItem = document.items.get(item._id);
+        foundryItem.sheet.render(true);
+    };
+
+    const sendItemToChat = async (item) => {
+        const foundryItem = document.items.get(item._id);
+        const chatDescription = foundryItem.description ?? foundryItem.system.description;
+        const content = await renderTemplate("systems/${id}/system/templates/chat/standard-card.hbs", { 
+            cssClass: "${id}",
+            document: foundryItem,
+            hasEffects: foundryItem.effects?.size > 0,
+            description: chatDescription,
+            hasDescription: chatDescription != ""
+        });
+        ChatMessage.create({
+            content: content,
+            speaker: ChatMessage.getSpeaker(),
+            style: CONST.CHAT_MESSAGE_STYLES.IC
+        });
+    };
+
+    const deleteItem = async (item) => {
+        const foundryItem = document.items.get(item._id);
+        const shouldDelete = await Dialog.confirm({
+            title: "Delete Confirmation",
+            content: \`<p>Are you sure you would like to delete the "\${foundryItem.name}" Item?</p>\`,
+            defaultYes: false
+        });
+        if (shouldDelete) foundryItem.delete();
+    };
+
+    const customItemAction = async (item, actionName) => {
+        const foundryItem = document.items.get(item._id);
+        const event = { currentTarget: { dataset: { action: actionName } } };
+        foundryItem.sheet._onAction(event);
+    };
+
+    const togglePin = async (item) => {
+        const foundryItem = document.items.get(item._id);
+        await foundryItem.update({"system.pinned": !foundryItem.system.pinned});
+    };
+
+    const bindDragDrop = () => {
+        try {
+            if (document.sheet.element) {
+                document.sheet.dragDrop.forEach((d) => d.bind(document.sheet.element));
+            }
+        } catch (e) {
+            console.error(e);
+        }
+    };
+    
+    // Bind drag drop after component mount
+    setTimeout(() => bindDragDrop(), 100);
+</script>
+
+<template>
+    <v-card flat class="isdl-datatable pt-2">
+        <v-card-title class="d-flex align-center pe-1" style="height: 40px;">
+            <v-icon icon="${icon}" size="small" />
+            &nbsp; {{ game.i18n.localize("${label}") }}
+            <v-spacer></v-spacer>
+            <v-text-field
+                    v-model="search"
+                    density="compact"
+                    label="Search"
+                    prepend-inner-icon="fa-solid fa-magnify"
+                    variant="outlined"
+                    flat
+                    hide-details
+                    single-line
+                    clearable
+                    style="margin: 0; margin-right: 8px;"
+            ></v-text-field>
+        </v-card-title>
+        <v-divider></v-divider>
+        
+        <v-data-table
+            v-model:search="search"
+            :items="data"
+            :search="search"
+            hover
+            density="compact"
+            hide-default-footer
+            items-per-page=-1
+            style="background: none;"
+            class="custom-datatable"
+            :sort-by="[{ key: 'system.pinned', order: 'desc' }, { key: 'name', order: 'asc' }]"
+        >
+            <template #headers>
+                <tr>
+                    <th class="text-left font-weight-medium" style="width: 40px;"></th>
+                    <th class="text-left font-weight-medium" style="width: 50px;">{{ game.i18n.localize("Image") }}</th>
+                    <th class="text-left font-weight-medium">{{ game.i18n.localize("Name") }}</th>
+                    <th class="text-center font-weight-medium" style="width: 100px;">{{ game.i18n.localize("Type") }}</th>
+                    <th class="text-center font-weight-medium" style="width: 150px;">{{ game.i18n.localize("Actions") }}</th>
+                </tr>
+            </template>
+
+            <!-- Pin toggle slot -->
+            <template v-slot:item="{ item }">
+                <tr :data-item-id="item._id" :data-document-id="document._id" :data-uuid="item.uuid">
+                    <td class="text-center" style="width: 40px;">
+                        <v-btn
+                            icon
+                            size="small"
+                            variant="text"
+                            @click="togglePin(item)"
+                            :data-tooltip="'Unpin'"
+                        >
+                            <v-icon 
+                                icon="fa-solid fa-thumbtack"
+                                :color="primaryColor || '#ffd700'"
+                                size="small"
+                            ></v-icon>
+                        </v-btn>
+                    </td>
+
+                    <!-- Image slot -->
+                    <td style="width: 50px;">
+                        <v-avatar size="32" rounded="0">
+                            <v-img :src="item.img" :alt="item.name" cover></v-img>
+                        </v-avatar>
+                    </td>
+
+                    <!-- Name slot -->
+                    <td>
+                        <div class="d-flex align-center" :data-tooltip="item.system.description">
+                            <div class="font-weight-medium">{{ item.name }}</div>
+                        </div>
+                    </td>
+
+                    <!-- Type slot -->
+                    <td class="text-center" style="width: 100px;">
+                        <v-chip 
+                            size="small" 
+                            variant="outlined" 
+                            class="text-caption"
+                            color="primary"
+                        >
+                            {{ item.type }}
+                        </v-chip>
+                    </td>
+
+                    <!-- Actions slot -->
+                    <td class="text-center" style="width: 150px;">
+                        <div class="d-flex align-center justify-center ga-1">
+                            <template v-for="action in getActionsForType(item.type)" :key="action.name">
+                                <v-tooltip :text="game.i18n.localize(action.label)">
+                                    <template v-slot:activator="{ props }">
+                                        <v-btn
+                                            v-bind="props"
+                                            :icon="action.icon"
+                                            size="x-small"
+                                            variant="text"
+                                            :color="action.color"
+                                            @click="customItemAction(item, action.name)"
+                                        ></v-btn>
+                                    </template>
+                                </v-tooltip>
+                            </template>
+                            <v-tooltip text="Edit">
+                                <template v-slot:activator="{ props }">
+                                    <v-btn
+                                        v-bind="props"
+                                        icon="fa-solid fa-edit"
+                                        size="x-small"
+                                        variant="text"
+                                        @click="editItem(item)"
+                                    ></v-btn>
+                                </template>
+                            </v-tooltip>
+                            <v-tooltip text="Send to Chat">
+                                <template v-slot:activator="{ props }">
+                                    <v-btn
+                                        v-bind="props"
+                                        icon="fa-solid fa-message"
+                                        size="x-small"
+                                        variant="text"
+                                        @click="sendItemToChat(item)"
+                                    ></v-btn>
+                                </template>
+                            </v-tooltip>
+                            <v-tooltip text="Delete">
+                                <template v-slot:activator="{ props }">
+                                    <v-btn
+                                        v-bind="props"
+                                        icon="fa-solid fa-trash"
+                                        size="x-small"
+                                        variant="text"
+                                        color="error"
+                                        @click="deleteItem(item)"
+                                    ></v-btn>
+                                </template>
+                            </v-tooltip>
+                        </div>
+                    </td>
+                </tr>
+            </template>
+
+            <!-- No data slot -->
+            <template v-slot:no-data>
+                <div class="text-center pa-4">
+                    <v-icon size="48" color="grey-lighten-1">fa-solid fa-thumbtack</v-icon>
+                    <div class="text-h6 mt-2">No pinned items</div>
+                    <div class="text-body-2 text-medium-emphasis">
+                        Pin items from your inventory to see them here
+                    </div>
+                </div>
+            </template>
+        </v-data-table>
+    </v-card>
+</template>
+    `.appendNewLine();
+    fs.writeFileSync(generatedFilePath, toString(fileNode));
+}
+//# sourceMappingURL=vue-pinned-datatable-component-generator.js.map

package/out/cli/components/vue/vue-pinned-datatable-component-generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue-pinned-datatable-component-generator.js","sourceRoot":"","sources":["../../../../src/cli/components/vue/vue-pinned-datatable-component-generator.ts"],"names":[],"mappings":"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"}