fix(ui): type fixes and change slot implementation

CyCraft · Jul 20, 2023 · 88b8c72 · 88b8c72
1 parent 5048393
commit 88b8c72
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 18 deletions.
diff --git a/packages/ui/src/components/MagnetarTable.vue b/packages/ui/src/components/MagnetarTable.vue
@@ -229,10 +229,10 @@ async function setOrderBy(
         <tr v-for="row in rows" :key="row.id">
           <template
             v-for="(column, columnIndex) in columns"
-            :key="column.fieldPath + 'td' + row.id"
+            :key="(column.fieldPath || column.slot) + 'td' + row.id"
           >
-            <slot :name="`cell-${column.fieldPath || `${columnIndex}`}`">
-              <TableTd :row="row" :column="column" :parseLabel="parseLabel" />
+            <slot :name="column.slot || columnIndex" v-bind="{ data: row }">
+              <TableTd :row="row" :column="column" :parseLabel="parseLabel"> </TableTd>
             </slot>
           </template>
         </tr>

diff --git a/packages/ui/src/components/TableTd.vue b/packages/ui/src/components/TableTd.vue
@@ -72,20 +72,18 @@ async function handleClick(index: number): Promise<void> {
 
 <template>
   <td class="magnetar-table-td">
-    <slot :name="`column-${column.fieldPath || ''}`" v-bind="{ data: row, value: cellValueRaw }">
-      <div :class="cellAttrs.class" :style="cellAttrs.style">
-        <div v-if="column.parseMarkdown" v-html="cellValueParsed" />
-        <div v-if="!column.parseMarkdown">{{ cellValueParsed }}</div>
-        <button
-          v-for="(button, i) in buttonAttrArr"
-          :key="button?.label"
-          :disabled="button.disabled || undefined"
-          @click.stop="() => handleClick(i)"
-        >
-          {{ button.label }}
-        </button>
-      </div>
-    </slot>
+    <div :class="cellAttrs.class" :style="cellAttrs.style">
+      <div v-if="column.parseMarkdown" v-html="cellValueParsed" />
+      <div v-if="!column.parseMarkdown">{{ cellValueParsed }}</div>
+      <button
+        v-for="(button, i) in buttonAttrArr"
+        :key="button?.label"
+        :disabled="button.disabled || undefined"
+        @click.stop="() => handleClick(i)"
+      >
+        {{ button.label }}
+      </button>
+    </div>
   </td>
 </template>
 

diff --git a/packages/ui/src/components/TestTable.vue b/packages/ui/src/components/TestTable.vue
@@ -24,6 +24,7 @@ const columns: MUIColumn<Item>[] = [
     buttons: [{ label: 'Copy', handler: ({ value }) => alert(`copied to clipboard ${value}`) }],
   },
   { label: 'Title', fieldPath: 'title', sortable: true },
+  { label: 'Custom Slot', slot: 'somecolumn' },
   {
     label: 'Is it done?',
     fieldPath: 'isDone',
@@ -76,7 +77,11 @@ const filters: MUIFilter<Item>[] = [
       :columns="columns"
       :filters="filters"
       :pagination="{ limit: 10 }"
-    />
+    >
+      <template #somecolumn="{ data }">
+        <pre>{{ data }}</pre>
+      </template>
+    </MagnetarTable>
   </div>
 </template>
 

diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
@@ -57,6 +57,10 @@ export type MUIColumn<T extends Record<string, any>, Label extends string = stri
    * ```
    */
   parseMarkdown?: (text: string) => string
+  /**
+   * When set this will be the name of the slot you can use to edit the column cells via Vue slots.
+   */
+  slot?: string
 }
 
 export type MUIPagination = {