This repository has been deprecated and the files have been moved to Design system monorepo on Dec. 4th, 2023.
Dialtone Vue is a library of Vue components for Dialtone. The goal is to simplify and standardize the use of common UI patterns and behaviour across all Dialpad projects.
Dialtone Vue is available in Vue 2 as well as Vue 3:
You can install the Dialtone Vue library into your project via the following commands:
- Vue 2:
npm install @dialpad/dialtone @dialpad/dialtone-vue - Vue 3:
npm install @dialpad/dialtone @dialpad/dialtone-vue@vue3
First you must globally import Dialtone's css:
import '@dialpad/dialtone/lib/dist/css/dialtone.min.css';or
@import 'node_modules/@dialpad/dialtone/lib/dist/css/dialtone.min.css';Dialtone Vue components can be imported directly from the package. Some components also export named constants, which can be imported as well:
import { DtInput, VALIDATION_MESSAGE_TYPES } from '@dialpad/dialtone-vue';Projects using Dialtone Vue should be aware of the requirements:
- Dialtone classes must be made available globally (to avoid duplication, Dialtone Vue does not do this for you).
- A tool like Webpack must be used to package the SFC components from Dialtone Vue.
- LESS preprocessor support for Vue SFC
<style>blocks.
These requirements are enforced via peer dependencies of Dialtone Vue when possible.
Dialtone Vue uses JoyPixels to render emojis. If you are using the emoji components, Dialtone Vue will use the free JoyPixels assets hosted on JSDelivr CDN by default. You may wish to use self-hosted JoyPixels assets such as the SVGs only available to premium license holders. In order to do this, set your custom asset URL with the following functions for small and large emojis during initialization of your app:
import { setEmojiAssetUrlSmall, setEmojiAssetUrlLarge } from '@dialpad/dialtone-vue/emoji'
// 16px and smaller
setEmojiAssetUrlSmall('https://my.example.website.com/joypixels/svg/unicode/32/', '.png')
// larger than 16px
setEmojiAssetUrlLarge('https://my.example.website.com/joypixels/svg/unicode/', '.svg')You may access the emoji.json data for all emojis Dialtone Vue supports via executing the following function
import { getEmojiData } from '@dialpad/dialtone-vue/emoji'
const emojiData = getEmojiData();If you would like to contribute to Dialtone Vue the first step is to get the project running locally. Follow the below quickstart to do so.
- Clone the repo
git clone https://github.com/dialpad/dialtone-vue.git - Install dependencies
npm run install:all - Run local dev server
npm start - Visit local dev server at http://localhost:9011/
Next read the more detailed contributor documentation in CONTRIBUTING.md.
Dialtone Vue is a new project, and as such it is under constant development as we add new components and refine existing ones. Please refer to the jira board to see what we are currently working on and what we have planned for the future.
Requesting a feature or reporting a bug? Please do so at the below links:
Please also feel free to contact us via the #dialtone Slack channel with any questions