feat(table): support passing plain string to text cell link option (#…

…303)

docs/components/table.md

@@ -317,6 +317,66 @@ const options = useTable({
 
 The records are each row of data in the table and the cell is each item within the record. You may define various types of cells such as text, pill, or date.
 
+### Text cell
+
+You may use `type: 'text'` cell to define the cell as a text type. Use this cell to display any kind of text. However, when displaying more data with more specific formats, consider using other cell types such as `type: 'number'` or `type: 'day'`.
+
+```ts
+const options = useTable({
+  orders: ['name'],
+  columns: {
+    age: {
+      label: 'Name',
+      cell: {
+        type: 'text'
+      }
+    }
+  }
+})
+```
+
+Below are the complete list of options you may pass to the text type cell.
+
+```ts
+export interface TableCellNumber {
+  // Type of the cell. Must be `text`.
+  type: 'text'
+
+  // The alignment of the value in the cell. Defaults to `left`.
+  align?: 'left' | 'center' | 'right'
+
+  // Icon to display in front of the value.
+  icon?: any
+
+  // The value for the cell. If omitted, it will use the value
+  // from the record.
+  value?: string | null
+
+  // URL to link the value. When specified, cell becomes a link.
+  link?: string | null
+
+  // Color of the value. Defaults to `neutral`.
+  color?: TableCellValueColor
+
+  // Color of the icon. If not defined, it will use the same
+  // color as `color` option.
+  iconColor?: TableCellValueColor
+
+  // When defined, this callback gets called when user clicks
+  // on the cell.
+  onClick?(value: any, record: any): void
+}
+
+export type TableCellValueColor =
+  | 'neutral'
+  | 'soft'
+  | 'mute'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'danger'
+```
+
 ### Number cell
 
 You may use `type: 'number'` cell to define the cell as a number type. It has several number-specific options and also it changes the font style to monospace so that all numbers in the table get aligned.

lib/components/STableCellText.vue

@@ -20,7 +20,7 @@ const props = defineProps<{
   getter?: string | null | ((value: any, record: any) => string | null)
   color?: Color | ((value: any, record: any) => Color)
   iconColor?: Color | ((value: any, record: any) => Color)
-  link?(value: any, record: any): string
+  link?: string | null | ((value: any, record: any) => string)
   onClick?(value: any, record: any): void
 }>()
 
@@ -34,6 +34,12 @@ const _value = computed(() => {
     : props.getter
 })
 
+const _link = computed(() => {
+  return typeof props.link === 'function'
+    ? props.link(props.value, props.record)
+    : props.link
+})
+
 const _color = computed(() => {
   return typeof props.color === 'function'
     ? props.color(props.value, props.record)
@@ -52,7 +58,7 @@ const _iconColor = computed(() => {
     <SLink
       v-if="_value"
       class="container"
-      :href="link?.(value, record)"
+      :href="_link"
       :role="onClick ? 'button' : null"
       @click="() => onClick?.(value, record)"
     >

lib/composables/Table.ts

@@ -80,7 +80,7 @@ export interface TableCellText extends TableCellBase {
   align?: 'left' | 'center' | 'right'
   icon?: any
   value?: string | null | ((value: any, record: any) => string | null)
-  link?(value: any, record: any): string
+  link?: string | null | ((value: any, record: any) => string)
   color?: TableCellValueColor | ((value: any, record: any) => TableCellValueColor)
   iconColor?: TableCellValueColor | ((value: any, record: any) => TableCellValueColor)
   onClick?(value: any, record: any): void

stories/components/STable.01_Playground.story.vue

@@ -192,11 +192,11 @@ const table = useTable({
       label: 'Name',
       dropdown: dropdownName,
       grow: true,
-      cell: {
+      cell: (_, record) => ({
         type: 'text',
         icon: markRaw(IconImageSquare),
-        link: (_value, record) => record.link
-      }
+        link: record.link
+      })
     },
 
     status: {