dtwojs/kdutify

Kdutify 2 module for Dtwo.js

Setup

1. Add @dtwojs/kdutify dependency to your project

yarn add --dev @dtwojs/kdutify # or npm install --save-dev @dtwojs/kdutify

2. Add @dtwojs/kdutify to the buildModules section of dtwo.config.js

:warning: If you are using Dtwo < 2.9.0, use modules instead.

{
  buildModules: [
    // Simple usage
    '@dtwojs/kdutify',

    // With options
    ['@dtwojs/kdutify', { /* module options */ }]
  ]
}

Using top level options

{
  buildModules: [
    '@dtwojs/kdutify'
  ],
  kdutify: {
    /* module options */
  }
}

Options

customVariables

• Type: Array
  • Items: String
• Default: []

Provide a way to customize Kdutify SASS variables.
Only works with tree-shaking.

Usage example :

// assets/variables.scss

// Variables you want to modify
$btn-border-radius: 0px;

// If you need to extend Kdutify SASS lists
$material-light: ( cards: blue );

@import '~kdutify/src/styles/styles.sass';

// dtwo.config.js
export default {
  kdutify: {
    customVariables: ['~/assets/variables.scss']
  }
}

defaultAssets

• Type: Object or Boolean
• Default:

{
  font: {
    family: 'Roboto' 
  },
  icons: 'mdi'
}

By default, automatically handle Roboto font & Material Design Icons.

These assets are handled automatically by default to provide a zero-configuration which let you play directly with Kdutify.

defaultAssets.font.family automatically adds the specified font (default Roboto) stylesheet from official google fonts to load the font with font-display: swap. If you have dtwo-webfontloader in your modules, it will use it automatically.

defaultAssets.font.size allows you to specify the root font size in your application.

:warning: If you choose a custom font family (i.e. not Roboto), it will automatically override Kdutify SASS variables ($body-font-family & font-size-root), but you will need tree-shaking to be enabled to have them correctly applied.

defaultAssets.icons automatically adds the icons stylesheet from a CDN to load all the icons (not optimized for production).
Here are the accepted values for this option :

| Value | Icons | |-------|-------| | 'mdi' (default) | Material Designs Icons (CDN) | 'md' | Material Icons (CDN) | 'fa' | Font Awesome 5 (CDN) | 'fa4' | Font Awesome 4 (CDN) | false | Disable auto add of the icons stylesheet

This option (if not set to false) will automatically override icons.iconfont Kdutify option so that Kdutify components use these icons.

You can also set the whole defaultAssets option to false to prevent any automatic add of these two assets.

optionsPath

• Type: String

Location of the Kdutify options that will be passed to Kdutify.

This file will be compiled by webpack, which means you'll benefit fast hot reload when changing these options, but also be able to use TypeScript without being forced to use TypeScript runtime.

// dtwo.config.js
export default {
  kdutify: {
    optionsPath: './kdutify.options.js'
  }
}

Note that you can also use Directory Aliases like '~/path/to/option.js'

All kdutify options are supported, it includes :

• Breakpoints
• Icons
• Internationalization (i18n)
• RTL (bidirectionality)
• Theme

// kdutify.options.js
export default {
  breakpoint: {},
  icons: {},
  lang: {},
  rtl: true,
  theme: {}
}

Notice that passing the Kdutify options directly to Module options is still supported, but it will trigger Dtwo entire rebuild if options are changed.

If you need to access Dtwo context within the options file, you need to export a function instead :

// kdutify.options.js
export default function ({ app }) {
  return {
    lang: {
      t: (key, ...params) => app.i18n.t(key, params)
    }
  }
}

treeShake

• Type: Object or Boolean
• Default: process.env.NODE_ENV === 'production'

Uses kdutify-loader to enable automatic tree-shaking. Enabled only for production by default.

You can set object as a set of options to manually import Kdutify modules globally:

| Key | Type | Value | | --- | --- | --- | | components | string[] | array of name of Kdutify components to import globally | | directives | string[] | array of name of Kdutify directives to import globally | | loaderOptions | function | loader option which applies to KdutifyLoaderPlugin | | transitions | string[] | array of name of Kdutify transitions to import globally |

TypeScript

If you're using TypeScript, you'll need to add @dtwojs/kdutify in your compilerOptions of your tsconfig.json :

{
  "compilerOptions": {
    "types": [
      "@types/node",
      "@dtwo/kdu-app",
      "@dtwojs/kdutify"
    ]
  }
}

You'll then be able to have autocompletion in Context (ctx.$kdutify) and Kdu instances (this.$kdutify).

Offline applications

If you're building an application that will need to work offline (more likely a PWA), you will need to bundle your fonts and icons in your app instead of using online resources.

It means you must set defaultAssets option to false.

For fonts, you may leverage CSS @font-face rule with local path of your fonts. You may find the google webfonts helper site useful for generating @font-face rules and sourcing replacement files for the default CDNs.

For icons, you can either use the same way than above, or leverage tree-shaken SVG libraries like Material Design Icons SVG or Font Awesome 5 SVG.

License

MIT License

Copyright (c) Dtwo Community