0.9.6 • Published 3 years ago
@jadetree/controls v0.9.6
@jadetree/controls
Vue controls for the Jade Tree budgeting software.
Install jadetree-currency using npm or yarn:
$ yarn install @jadetree/controls
You can then register Jade Tree Controls as a Vue plugin:
import Vue from 'vue';
import { JtControls } from '@jadetree/controls';
Vue.use(JtControls);
This will automatically register the control components for use in Vue component
template files. To use custom Vue Formulate fields,
import the JtFormulateLibrary
object and add it to the Vue Formulate plugin
initializer.
import Vue from 'vue';
import { JtFormulateLibrary } from '@jadetree/controls';
import VueFormulate from 'vue-formulate';
// Setup Formulate with Jade Tree Customizations
Vue.use(VueFormulate, {
classes: {
outer: (
context: { labelPosition: string | boolean },
classes: string[],
) => (
context.labelPosition === 'float'
? ['formulate-input--float']
: classes
),
element: (
context: { labelPosition: string | boolean },
classes: string[],
) => classes.concat([
...(context.labelPosition === 'float' ? ['formulate-float-label'] : []),
]),
},
library: {
...JtFormulateLibrary,
},
slotComponents: {
label: 'JtFormulateLabel',
},
});
Jade Tree Controls include Tailwind CSS themes by
default, and can be imported into your Vue application directly. It is
recommended to skip PurgeCSS on the imported styles unless you point PurgeCSS
to the @jadetree/controls
folder to find the style usages.
/* In your application.css file */
/*! purgecss start ignore */
@import "@jadetree/controls/assets/tailwind/jt-controls.css";
/*! purgecss end ignore */
Included Components
- Button
- Calendar (using date-fns)
- Currency Formulate Field (using @jadetree/currency)
- Check Box Formulate Field
- Date Picker Field
- Dialog
- Floating Label Formulate Fields
- Modal Controls
- Popup Controls
- Select and Combo Box
- Spinner
Installation
Install Jade Tree Controls by running:
# Yarn
yarn add @jadetree/controls
# or, npm
npm install @jadetree/controls
Contribute
- Issue Tracker: https://github.com/asymworks/jadetree-controls/issues
- Source Code: https://github.com/asymworks/jadetree-controls
API Documentation
In Work
License
The project is licensed under the BSD license.