feat(ui): tweaks and improvements

CyCraft · Jul 20, 2023 · a82ae41 · a82ae41
1 parent 7f13053
commit a82ae41
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 13 deletions.
diff --git a/packages/ui/src/components/TableTd.vue b/packages/ui/src/components/TableTd.vue
@@ -18,9 +18,10 @@ const cellValueRaw = computed<any>(() => {
 })
 
 const cellValueParsed = computed<string>(() => {
-  const { parseValue } = props.column
+  const { parseValue, parseMarkdown } = props.column
   const rawValue = cellValueRaw.value
-  return parseValue ? parseValue({ value: rawValue, data: props.row }) : rawValue
+  const parsed = parseValue ? parseValue({ value: rawValue, data: props.row }) : rawValue
+  return parseMarkdown ? parseMarkdown(parsed) : parsed
 })
 
 const cellAttrs = computed<{ class: string | undefined; style: string | undefined }>(() => {
@@ -71,17 +72,20 @@ async function handleClick(index: number): Promise<void> {
 
 <template>
   <td class="magnetar-table-td">
-    <div :class="cellAttrs.class" :style="cellAttrs.style">
-      <div>{{ 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 :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>
   </td>
 </template>
 

diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
@@ -40,6 +40,23 @@ export type MUIColumn<T extends Record<string, any>, Label extends string = stri
   sortable?: boolean | { orderBy: 'asc' | 'desc'; position: number }
   /** Shows action buttons next to the cell value */
   buttons?: MUIButton<T, Label>[]
+  /**
+   * You can define a function as your markdown parser. Whatever value will be parsed as markdown content, and shows inside the cell with `v-html`.
+   * - first executes `parseValue` if defined
+   * - if your value is not a string, you need to define `parseValue` which MUST convert it to a string
+   * ```html
+   * <div v-html="starkdown(parseValue({ value, data }))" />
+   * ```
+   * @example
+   * ```
+   * import { starkdown } from 'starkdown'
+   * const column: MUIColumn<Record<string, any>> = {
+   *   // ...
+   *   parseMarkdown: starkdown
+   * }
+   * ```
+   */
+  parseMarkdown?: (text: string) => string
 }
 
 export type MUIPagination = {