Format Examples

PreviewFormat​

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

Currency​

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

Bytes​

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

Icon​

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

Icon Rounded​

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

Icon with custom class​

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

Attachment (Image)​

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

Attachment (Document)​

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

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" />

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

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

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

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

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]" />

Item Collections​

<HtmlFormat :value="tracks" />

Nested Complex Types​

<HtmlFormat :value="players" />

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>
Edit this page on GitHub