intelligent-system-design-language 0.3.22 → 0.3.23

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

@@ -37,269 +37,269 @@ export function generatePinnedVuetifyDatatableComponent(id, document, pinnedFiel
         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 = {
+    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)}'
+        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>
+    }, { 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));
 }