Format Examples

PreviewFormat

Useful for rendering Table Cell data into different customizable formats, e.g:

Currency

<PreviewFormat :value="50" :format="Formats.currency" />

$50.00

Bytes

<PreviewFormat :value="10000000" :format="Formats.bytes" />

9.54 MB

Icon

<PreviewFormat value="/profiles/1.jpg" :format="Formats.icon" />

Icon Rounded

<PreviewFormat value="/profiles/1.jpg" :format="Formats.iconRounded" />

Icon with custom class

<PreviewFormat value="/profiles/1.jpg" :format="Formats.icon" class="w-40 h-40 rounded-full" />

Attachment (Image)

<PreviewFormat value="/profiles/1.jpg" :format="Formats.attachment" />

1.jpg

Attachment (Document)

<PreviewFormat value="/content/hosting.md" :format="Formats.attachment" />

hosting.md

Attachment (Document) with classes

<PreviewFormat value="/content/hosting.md" :format="Formats.attachment" 
    class="text-xl text-indigo-700 font-semibold" icon-class="w-8 h-8" />

hosting.md

Link

<PreviewFormat value="https://servicestack.net/blazor" :format="Formats.link" />

https://servicestack.net/blazor

Link with class

<PreviewFormat value="https://servicestack.net/blazor" :format="Formats.link" class="text-xl font-semibold" />

https://servicestack.net/blazor

Link Email

<PreviewFormat value="user@email.com" :format="Formats.linkMailTo" />

user@email.com

Link Phone

<PreviewFormat value="555 123 4567" :format="Formats.linkTel" />

555 123 4567

Using Formatters

Your App and custom templates can also utilize @servicestack/vue's built-in formatting functions from:

import { useFormatters } from '@servicestack/vue'

const {
    Formats,             // Available format methods to use in <PreviewFormat />
    formatValue,         // Format any value or object graph
    currency,            // Format number as Currency
    bytes,               // Format number in human readable disk size
    link,                // Format URL as <a> link
    linkTel,             // Format Phone Number as <a> tel: link
    linkMailTo,          // Format email as <a> mailto: link
    icon,                // Format Image URL as an Icon
    iconRounded,         // Format Image URL as a full rounded Icon
    attachment,          // Format File attachment URL as an Attachment
    hidden,              // Format as empty string
    time,                // Format duration in time format
    relativeTime,        // Format Date as Relative Time from now
    relativeTimeFromMs,  // Format time in ms as Relative Time from now
    formatDate,          // Format as Date
    formatNumber,        // Format as Number
} = useFormatters()

Many of these formatting functions return rich HTML markup which will need to be rendered using Vue's v-html directive:

<span v-html="formatValue(value)"></span>

HtmlFormat

HtmlFormat can be used to render any Serializable object into a human-friendly HTML Format:

Single Model

<HtmlFormat :value="tracks[0]" />

Id	1
Name	Everythings Ruined
Artist	Faith No More
Album	Angel Dust
Year	1992

Item Collections

<HtmlFormat :value="tracks" />

Id	Name	Artist	Album	Year
1	Everythings Ruined	Faith No More	Angel Dust	1992
2	Lightning Crashes	Live	Throwing Copper	1994
3	Heart-Shaped Box	Nirvana	In Utero	1993
4	Alive	Pearl Jam	Ten	1991

Nested Complex Types

<HtmlFormat :value="players" />

First Name

Last Name

Phone Numbers

Profile

North

West

north@west.com

Kind	Number	Ext
Mobile	123-555-5555
Home	555-555-5555	123

User Name	north
Role	leader
Region	Australasia
High Score	100
Games Played	10
Cover Url	files/cover.docx
Created By	north@email.com

South

East

south@east.com

Kind	Number	Ext
Mobile	456-666-6666
Work	666-666-6666	456

User Name	south
Role	player
Region	Americas
High Score	50
Games Played	20
Cover Url	files/profile.jpg
Created By	south@email.com

Nested Complex Types with custom classes

When needed most default classes can be overridden with a custom classes function that can inspect the type, tag, depth, and row index to return a custom class. The TypeScript function shows an example of checking these different parameters to render a custom HTML resultset:

<HtmlFormat :value="players" :classes="classes" />

<script lang="ts">
function classes(type:'array'|'object', tag:'div'|'table'|'thead'|'th'|'tr'|'td',depth:number,cls:string,index?:number)
{
    if (type == 'array') {
        if (tag === 'th') return cls.replace('text-sm text-gray-500 font-medium',' ') + (depth == 0 
            ? 'text-xs uppercase font-semibold text-indigo-700'
            : 'text-xs font-medium text-gray-500')
        if (tag === 'tr') return depth > 0 || index! % 2 == 0 ? 'bg-white' : 'bg-yellow-50'
        if (tag === 'td' && depth > 0) return 'px-4 py-3 whitespace-nowrap text-xs'
    }
    return cls
}
</script>