A vue3 based ui library optimized for desktop applications with drag and drop in mind.

Installation

npm install @kizmann/nano-ui [or] yarn add @kizmann/nano-ui

Dependencies

This package is dependent of @kizmann/pico-js as well as moment.

CDN Usage

<script src="//unpkg.com/@kizmann/nano-ui@latest/dist/nano-ui.js"></script>
<link rel="stylesheet" href="//unpkg.com/@kizmann/nano-ui@latest/dist/nano-ui.css">
<link rel="stylesheet" href="//unpkg.com/@kizmann/nano-ui@latest/dist/themes/light.css">

App.use(nano.Install);

Module Usage

import { Install } from "@kizmann/nano-ui";

App.use(Install);

@import "@kizmann/nano-ui/nano/index.scss";

Demo

Click me to see demo 🐱

ES5/6 Precompile

Incase you are not using the babel plugins (ES6) used in babel.config.js you will encounter errors while compiling. To prevent that its required to add an alias to your webpack.config.js.

webpack.config.js

module.exports = {
    resolve: {
        alias: {
            '@kizmann/nano-ui': '@kizmann/nano-ui/dist/nano-ui.js'
        }
    }
}

webpack.mix.js

mix.webpackConfig({
    resolve: {
        alias: {
            '@kizmann/nano-ui': '@kizmann/nano-ui/dist/nano-ui.js'
        }
    }
});

Visual Studio Code Autocomplete

When using VS Code with the ES5 fix from above you need to create or add to your existsing jsconfig.json this alias to enable correct autocomplete.

jsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@kizmann/nano-ui": ["node_modules/@kizmann/nano-ui/src/index.js"]
    }
  }
}

Input Elements

These are the html replacements for input, button, etc.

NButton
Classic button

NInpt
Classic input field

NTextarea
Classic textarea

NInputNumber
Number input with steps and formats

NSelect
Single or multiselect field

NCascader
Tree select box

NCheckbox
Classic checkbox or grouped checkboxes

NRadio
Classic radio groups

NSwitch
On/off toggle like on iOS

NDatepicker
Datepicker for single or daterange

NTimepicker
Regular timepicker

NDatetimepicker (WIP)
Description following soon

NTransfer
Transfers items into a list, also supports drag and drop

List Elements

These are components which are used to disaplay items.

NDraglist
Drag and drop list with tree support

NDraggrid
Drag and drop grid with virtual scrolling

NTable
Drag and drop table with tree support

NPaginator
Description following soon

Overlay Elements

These components display information above your application layer.

NPopover
Popover element (tooltip e.g.)

NModal
Classic modal component

NConfirm
Confirmation box

Notify
Notification popup

Other Elements

These components display information above your application layer.

NForm
Description following soon

NTabs
Description following soon

NLoader
Description following soon

NMap
Description following soon

NScrollbar
Description following soon

NVirtualscroller
Description following soon