@ui-toolkit/components

Installation

npm i @ui-toolkit/components

import { ComponentName } from '@ui-toolkit/components';

export default {
  components: {
    ComponentName,
  },
};

Remember all components should be imported with named imports to use tree-shaking.

ui-link

Ui Link lets us use a generic link tag that will auto determine whether to use a router-link from vue router or a regular anchor element based on the presence of the to attribute. There are no props, as it just passes through all defined attributes to the underlying elements. Please refer to the Vue Router documentation for props related to the Vue Router. Refer to the W3C html anchor tag docs for attributes related to anchor tags.

usage

<ui-link href="http://www.google.com" target="_blank">Sample of Anchor Link</ui-link>
<ui-link to="http://www.google.com">Sample of Router Link</ui-link>

ui-copy

Ui Copy makes it incredibly easy to add a "click to copy" feature to any html element. Simply wrap the text with the Ui Copy component and click it.

props

name	type	default
value	Boolean
text	String
color	String	rgb(99, 99, 99)
background	String	white
no-tooltip	String

value is readonly for v-model. text allows you to specify what to put in the clipboard if it's different from what's displayed. e.g. If you want an unformatted date in the clipboard but a human readable date on the UI. color and background can be any valid css color. no-tooltip disables the built in tooltip if you want to implement your own. It should be combined with v-model.

usage

<ui-copy>This text will be copied into the clipboard.</ui-copy>

text allows you specify exactly what to copy.

<ui-copy text="This text will copy.">This text will not be copied.</ui-copy>

<ui-copy :text="new Date().toISOString()">Click to copy current date.</ui-copy>

Use v-model to implement custom tooltip. value will be true for 800ms.

<ui-copy v-model="copied" no-tooltip>Text</ui-copy>
<span v-show="copied">You copied the text!</span>

Customize colors.

<ui-copy color="white" background="black">Text</ui-copy>

ui-datetime

UI Datetime receives a date and returns a span containing a locale formatted readable date. There are some basic configuration options to make it versatile.

props

name	type	required
date	String, Date	true
locale	String	true
date-style	String
time-style	String

date will use the native Date constructor if the input is a string. locale must be a BCP 47 language tag. date-style and time-style must be one of the following strings: "short", "medium", "long". If both date-style & time-style are left undefined, it defaults to only a "short" date.

usage

<ui-datetime
  date="2020-09-02T20:32:38.405Z"
  locale="en"
  date-style="short"
  time-style="short"
/>

9/2/2020, 3:32 PM

It's fully BCP 47 compatible so region tags are allowed for more specific .

<ui-datetime
  date="2020-09-02T20:32:38.405Z"
  locale="en-GB"
  date-style="short"
  time-style="short"
/>

02/09/2020, 15:32

you can use only date-style or time-style alone to display just the date or time.

<ui-datetime date="2020-09-02T20:32:38.405Z" locale="fr" date-style="long" />

mercredi 2 septembre 2020

ui-currency

Ui Currency exists to make currency formatting uniform & straightforward while giving flexibility wherever needed. It divides the currency into four core parts.

symbol
- The currency sign ($)
integer
- The integer value of the amount, it comes before the decimal
fraction
- The fractional part of the amount, this value includes the decimal
currency
- The currency code itself (USD)

There are two ways to use it. The default usage simply returns formatted currency with each part of the currency in spans with corresponding class names. The second method uses a scoped slot to expose the formatted currency data for custom formatting.

::: tip NOTE A fallback for Intl.numberFormat.formatToParts is provided so no polyfill is required when used in IE 11. It will simply render only one span. :::

props

name	type	required	default
amount	Number, String	true
currency	String	true
locale	String		'en-US'
hideCurrency	Boolean		false
symbolClass	String
integerClass	String
fractionClass	String
currencyClass	String

default usage

<ui-currency amount="1234.56" />

becomes

<span>
  <span class="symbol">$</span>
  <span class="integer">1,234</span>
  <span class="fraction">.56</span>
  <span class="currency"> USD</span>
</span>

slot usage

<ui-currency amount="1297.14" v-slot="{ parts }">
  <span>{{ parts.symbol }}</span>
  <span>{{ parts.integer }}</span>
  <span>{{ parts.fraction }}</span>
  <span> {{ parts.currency }}</span>
</ui-currency>

Custom classes

Class props are provided to allow simple addition of classes to the child elements. You can apply as many classes as needed.

<ui-currency
  amount="1234.56"
  hide-currency
  symbol-class="small"
  integer-class="bigger green"
  fraction-class="big"
  currency-class="smaller"
/>

::: tip REMEMBER If you want to use css to style the spans generated by ui-currency in a scoped component, you need to use the ::v-deep selector. :::