open-index/open-npm huggingface dataset:
npm package: @jadetree/controls
Description: Vue Controls for Jade Tree
Author: Jonathan Krauss
Latest version: 0.9.6

@jadetree/controls
==================

[Vue](https://vuejs.org/) controls for the Jade Tree budgeting software.

Install jadetree-currency using npm or yarn:

```shell
$ yarn install @jadetree/controls
```

You can then register Jade Tree Controls as a Vue plugin:

```javascript
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](https://vueformulate.com/) fields,
import the `JtFormulateLibrary` object and add it to the Vue Formulate plugin
initializer.

```typescript
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](https://tailwindcss.com/) 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.

```css
/* 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](https://date-fns.org))
- Currency Formulate Field (using [@jadetree/currency](https://github.com/asymworks/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:

```shell
# 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.
npm package: @jadetree/currency
Description: Localized Currency Library for Jade Tree
Author: Jonathan Krauss
Latest version: 0.8.19

@jadetree/currency
==================

Javascript localized currency handling and formatting library for the Jade Tree
budgeting software using Unicode CLDR data.

Install jadetree-currency using npm or yarn:

```shell
$ yarn install @jadetree/currency
```

Using jadetree-currency is easy:

```javascript
import { Money, Currency, Locale } from '@jadetree/currency';

// Load l10n data from the locales sub-package
import { de_AT, de_DE } from '@jadetree/currency/locales/de';
import { en_US } from '@jadetree/currency/locales/en';

/* CommonJS (Node.js) Syntax */
const { Money, Currency, Locale } = require('@jadetree/currency');
const { de_AT, de_DE } = require('@jadetree/currency/locales/de');
const { en_US } = require('@jadetree/currency/locales/en');

// Create a Money Object with USD $4.00
const m = new Money('4.00', 'USD');

// Add and Subtract Amounts
const m2 = m.add(1).subtract('0.50');

// Format into a localized string
m2.format(en_US);     // '$4.50'
m2.format(de_DE);     // '4,50\u00a0$'

// Localized parsing works too, with default currency for the locale
const m3 = new Money('1 234,56', de_AT);
m3.format(en_US);     // €1,234.56
```

For use in a browser without additional packaging (e.g. when a backend API can
determine which locale data to serve), the files in the dist directory may be
included as script tags, as in the following example which loads only the
German localization data to reduce transfer and load time.

```html
<script type="text/javascript" src="https://unpkg.com/@jadetree/currency/index.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/@jadetree/currency/locales/de.min.js"></script>
```

For a working example of jt-currency in a single HTML page, open the index.html
file in the demo folder in your browser.

```shell
git clone https://github.com/asymworks/jadetree-currency.git
cd jadetree-currency/demo
open index.html
```

Features
--------

- Major world currency data from ISO 4217 included
- Localization data for currency and number formatting included and integrated -
no external internationalization or localization helper libraries required
- Flexible formatting options
- Handles any type of money input: strings, numbers, Decimals
- Only one dependency

Installation
------------

Install jadetree-currency by running:

```shell
yarn add @jadetree/currency
```

Contribute
----------

- Issue Tracker: https://github.com/asymworks/jadetree-currency/issues
- Source Code: https://github.com/asymworks/jadetree-currency

API Documentation
-----------------

In Work

License
-------

The project is licensed under the BSD license.
npm package: @jadetree/ui
Description: Jade Tree UI Components
Author: Jonathan Krauss
Latest version: 0.2.3

Jade Tree UI Library
--------------------

Use as NPM (requires bundler for imported CSS):
```typescript
import JtAutocomplete from '@jadetree/ui';

// Register the Web Component
JtAutocomplete.register();

// Create a new Web Component
const host = document.createElement('div');
host.innerHTML = `
<jt-autocomplete>
    <input type="text" list="options" />
    <datalist id="options">
        <option>Apples</option>
        <option>Bananas</option>
        <option>Cereal</option>
    </datalist>
</jt-autocomplete>
`;
```

Use in browser as ES6 Module
```html
<head>
    <link rel="stylesheet" href="https://unpkg.com/@jadetree/ui/css/autocomplete.min.css" />
</head>
<body>
    <div>
        <jt-autocomplete>
            <input type="text" list="options" />
            <datalist id="options">
                <option>Apples</option>
                <option>Bananas</option>
                <option>Cereal</option>
            </datalist>
        </jt-autocomplete>
    </div>
    <script type="module">
        import JtAutocomplete from 'https://unpkg.com/@jadetree/ui';

        // Register the Web Component
        JtAutocomplete.register();
    </script>
</body>
```

Use in browser as IIFE
```html
<head>
    <link rel="stylesheet" href="https://unpkg.com/@jadetree/ui/css/autocomplete.min.css" />
    <script src="https//unpkg.com/@jadetree/ui/dist/components/autocomplete.iife.min.js"></script>
</head>
<body>
    <div>
        <!-- the web component is automatically registered by the IIFE -->
        <jt-autocomplete>
            <input type="text" list="options" />
            <datalist id="options">
                <option>Apples</option>
                <option>Bananas</option>
                <option>Cereal</option>
            </datalist>
        </jt-autocomplete>
    </div>
</body>
```

## User-Defined Item Templates
The `JtAutocomplete` and `JtSelect` support user-defined templates for listbox
items, which allow the developer to define custom markup for each list entry.
Use these with care, as the inner HTML of the `<template>` tag is evaluated
with the JavaScript interpreter. **Do not pass user-defined input to the item
template without first sanitizing it**.