@deck9/ui 0.3.3 → 0.4.0

package/dist/index.es.js

@@ -0,0 +1 @@
+var e=Object.defineProperty,r=Object.getOwnPropertySymbols,t=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable,n=(r,t,i)=>t in r?e(r,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):r[t]=i,a=(e,a)=>{for(var o in a||(a={}))t.call(a,o)&&n(e,o,a[o]);if(r)for(var o of r(a))i.call(a,o)&&n(e,o,a[o]);return e};import{defineComponent as o,computed as l,unref as s,openBlock as d,createBlock as u,mergeProps as c,createCommentVNode as p,createElementBlock as f,normalizeClass as g,createElementVNode as y,toDisplayString as m,createVNode as b}from"vue";import{FontAwesomeIcon as v}from"@fortawesome/vue-fontawesome";import{library as x}from"@fortawesome/fontawesome-svg-core";import*as h from"@fortawesome/free-solid-svg-icons";x.add(h.faChartPie,h.faCheck,h.faCheckCircle,h.faChevronDown,h.faChevronLeft,h.faChevronRight,h.faChevronUp,h.faCircleNotch,h.faClipboard,h.faCog,h.faDoorOpen,h.faEllipsisH,h.faEnvelope,h.faExclamationTriangle,h.faFingerprint,h.faGlobe,h.faHandPointRight,h.faInfoCircle,h.faPencilAlt,h.faPlayCircle,h.faPlus,h.faPlusCircle,h.faRobot,h.faSave,h.faShieldAlt,h.faTimes,h.faTrash,h.faUser,h.faUserShield);var k=[...Object.keys(x.definitions.fas)].sort();const C=o({props:{name:{type:String,required:!0,default:"user"}},setup(e){const r=e,t=l((()=>!!k.includes(r.name)||(console.warn("could not load icon, because it is not available",r.name),!1)));return(r,i)=>s(t)?(d(),u(s(v),c({key:0,icon:["fas",e.name]},r.$attrs),null,16,["icon"])):p("",!0)}}),q=["aria-label","tabindex"],w={key:0,class:"absolute inset-0 flex items-center justify-center"},S=o({props:{label:{type:String,required:!0},size:{type:null,required:!1,default:"medium"},type:{type:null,required:!1,default:"primary"},isLoading:{type:Boolean,required:!1,default:!1},isDisabled:{type:Boolean,required:!1,default:!1},icon:{type:String,required:!1},iconPosition:{type:null,required:!1,default:"right"}},emits:["onClick"],setup(e,{emit:r}){const t=e,i=l((()=>{const e={"text-white bg-blue-600 border-transparent hover:bg-blue-700 active:bg-blue-700 dark:ring-blue-800 ring-offset-2 dark:ring-offset-grey-900":"primary"===t.type,"text-blue-600 bg-grey-100 border-transparent hover:bg-blue-100 hover:text-blue-700 active:bg-grey-100 ring-blue-300 ring-offset-2 dark:ring-offset-grey-900":"light"===t.type,"text-grey-50 bg-grey-700 border-transparent hover:bg-grey-800 active:bg-grey-700 ring-grey-500 dark:ring-grey-400 dark:ring-opacity-50 ring-offset-2 dark:ring-offset-grey-900":"dark"===t.type},r={"pointer-events-none opacity-75 cursor-not-allowed":t.isDisabled},i={"px-4 py-1 text-xs leading-5 mono-100 rounded-lg":"small"===t.size,"px-5 py-2 text-sm leading-4 font-medium rounded-lg":"medium"===t.size,"px-8 py-3 text-base leading-6 font-medium rounded-lg":"large"===t.size};return a(a(a({},e),r),i)})),n=l((()=>{const e={"mr-2 -ml-1":["small","medium"].includes(t.size)&&"left"===t.iconPosition,"mr-4 -ml-2":["large"].includes(t.size)&&"left"===t.iconPosition},r={"ml-3 -mr-1":["small","medium"].includes(t.size)&&"right"===t.iconPosition,"ml-3 -mr-3":["large"].includes(t.size)&&"right"===t.iconPosition},i={"text-white":"primary"===t.type,"text-blue-600":"light"===t.type,"text-grey-50":"dark"===t.type};return a(a(a({},e),r),i)}));function o(){t.isDisabled||r("onClick")}return(r,t)=>(d(),f("button",{class:g(["relative inline-flex items-center focus:outline-none focus:ring active:ring transition duration-150 ease-in-out",s(i)]),type:"button","aria-label":e.label,tabindex:e.isDisabled?"-1":void 0,onClick:o},[y("div",{class:g(!e.isLoading||"invisible")},[e.icon&&"left"===e.iconPosition?(d(),u(C,{key:0,name:e.icon,class:g(s(n))},null,8,["name","class"])):p("",!0),y("span",null,m(e.label),1),e.icon&&"right"===e.iconPosition?(d(),u(C,{key:1,name:e.icon,class:g(s(n))},null,8,["name","class"])):p("",!0)],2),e.isLoading?(d(),f("span",w,[b(C,{class:"animate-spin",name:"circle-notch"})])):p("",!0)],10,q))}});var z,P=new Uint8Array(16);function D(){if(!z&&!(z="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||"undefined"!=typeof msCrypto&&"function"==typeof msCrypto.getRandomValues&&msCrypto.getRandomValues.bind(msCrypto)))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return z(P)}var j=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;function I(e){return"string"==typeof e&&j.test(e)}for(var O=[],R=0;R<256;++R)O.push((R+256).toString(16).substr(1));const V={class:"relative flex items-start"},B={class:"flex items-center h-5"},E=["checked","id"],L={class:"ml-2 text-sm leading-5"},U=["for"],T={key:0,class:"text-grey-700 dark:text-grey-400 mono-0 casual-60"},A=o({props:{id:{type:String,required:!1,default:function(e,r,t){var i=(e=e||{}).random||(e.rng||D)();if(i[6]=15&i[6]|64,i[8]=63&i[8]|128,r){t=t||0;for(var n=0;n<16;++n)r[t+n]=i[n];return r}return function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,t=(O[e[r+0]]+O[e[r+1]]+O[e[r+2]]+O[e[r+3]]+"-"+O[e[r+4]]+O[e[r+5]]+"-"+O[e[r+6]]+O[e[r+7]]+"-"+O[e[r+8]]+O[e[r+9]]+"-"+O[e[r+10]]+O[e[r+11]]+O[e[r+12]]+O[e[r+13]]+O[e[r+14]]+O[e[r+15]]).toLowerCase();if(!I(t))throw TypeError("Stringified UUID is invalid");return t}(i)}()},label:{type:String,required:!0},modelValue:{type:Boolean,required:!0},description:{type:String,required:!1},checked:{type:Boolean,required:!1}},emits:["update:modelValue"],setup:e=>(r,t)=>(d(),f("div",V,[y("div",B,[y("input",{class:"h-4 w-4 border-grey-600 dark:text-blue-500 dark:border-grey-300 dark:checked:border-blue-500 dark:focus:ring-blue-900 dark:focus:ring-offset-grey-800 rounded-sm",type:"checkbox",checked:e.modelValue,id:e.id},null,8,E)]),y("div",L,[y("label",{for:e.id,class:"font-medium text-grey-900 dark:text-grey-200 casual-25"},m(e.label),9,U),e.description?(d(),f("p",T,m(e.description),1)):p("",!0)])]))}),H={class:"relative"},$=["placeholder","type","tabindex"],F=o({props:{type:{type:String,required:!0,default:"text"},placeholder:{type:String,required:!1},size:{type:null,required:!1,default:"medium"},icon:{type:String,required:!1},isDisabled:{type:Boolean,required:!1,default:!1}},emits:["onInput"],setup(e,{emit:r}){const t=e,i=l((()=>({"px-3 py-1 rounded font-normal":"small"===t.size,"px-4 py-3 rounded font-normal":"medium"===t.size,"px-6 py-3 rounded font-normal":"large"===t.size,"pl-10":t.icon&&"small"===t.size,"pl-12":t.icon&&("medium"===t.size||"large"===t.size)}))),n=l((()=>({"pointer-events-none opacity-50 cursor-not-allowed":t.isDisabled}))),o=l((()=>({"text-xs leading-4":"small"===t.size,"text-sm leading-4":"medium"===t.size,"text-base leading-4":"large"===t.size}))),u=function(e){r("onInput",(null==e?void 0:e.target).value)};return(r,t)=>(d(),f("div",H,[y("input",{class:g(["mono-50 bg-grey-50 text-grey-800 placeholder-grey-600 border-grey-300 dark:bg-grey-800 dark:text-grey-100 dark:placeholder-grey-400 dark:border-grey-700 focus:border-blue-400 focus:ring-blue-400 dark:focus:border-blue-800 dark:focus:ring-blue-800",a(a(a({},s(i)),s(o)),s(n))]),placeholder:e.placeholder,type:e.type,tabindex:e.isDisabled?"-1":void 0,onInput:u},null,42,$),e.icon?(d(),f("span",{key:0,class:g(["absolute left-0 inset-y-0 inline-flex items-center justify-center text-grey-700 dark:text-grey-100 px-4",s(o)])},[b(C,{name:e.icon},null,8,["name"])],2)):p("",!0)]))}}),G={class:"inline-block text-blue-900 text-sm font-medium"},N=["for"],J={key:0},K=o({props:{id:{type:String,required:!0},label:{type:String,required:!0},description:{type:String,required:!0}},setup:e=>(r,t)=>(d(),f("span",G,[y("label",{for:e.id},m(e.label),9,N),e.description?(d(),f("span",J,m(e.description),1)):p("",!0)]))});export{S as D9Button,A as D9Checkbox,C as D9Icon,F as D9Input,K as D9Label,k as icons};

package/dist/index.umd.js

@@ -0,0 +1 @@
+var __defProp=Object.defineProperty,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,r,t)=>r in e?__defProp(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,__spreadValues=(e,r)=>{for(var t in r||(r={}))__hasOwnProp.call(r,t)&&__defNormalProp(e,t,r[t]);if(__getOwnPropSymbols)for(var t of __getOwnPropSymbols(r))__propIsEnum.call(r,t)&&__defNormalProp(e,t,r[t]);return e};!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("vue"),require("@fortawesome/vue-fontawesome"),require("@fortawesome/fontawesome-svg-core"),require("@fortawesome/free-solid-svg-icons")):"function"==typeof define&&define.amd?define(["exports","vue","@fortawesome/vue-fontawesome","@fortawesome/fontawesome-svg-core","@fortawesome/free-solid-svg-icons"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self).ui={},e.Vue,e.vueFontawesome,e.fontawesomeSvgCore,e.fasIcons)}(this,(function(e,r,t,o,n){"use strict";function a(e){if(e&&e.__esModule)return e;var r={__proto__:null,[Symbol.toStringTag]:"Module"};return e&&Object.keys(e).forEach((function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var i=a(n);o.library.add(i.faChartPie,i.faCheck,i.faCheckCircle,i.faChevronDown,i.faChevronLeft,i.faChevronRight,i.faChevronUp,i.faCircleNotch,i.faClipboard,i.faCog,i.faDoorOpen,i.faEllipsisH,i.faEnvelope,i.faExclamationTriangle,i.faFingerprint,i.faGlobe,i.faHandPointRight,i.faInfoCircle,i.faPencilAlt,i.faPlayCircle,i.faPlus,i.faPlusCircle,i.faRobot,i.faSave,i.faShieldAlt,i.faTimes,i.faTrash,i.faUser,i.faUserShield);var l=[...Object.keys(o.library.definitions.fas)].sort();const s=r.defineComponent({props:{name:{type:String,required:!0,default:"user"}},setup(e){const o=e,n=r.computed((()=>!!l.includes(o.name)||(console.warn("could not load icon, because it is not available",o.name),!1)));return(o,a)=>r.unref(n)?(r.openBlock(),r.createBlock(r.unref(t.FontAwesomeIcon),r.mergeProps({key:0,icon:["fas",e.name]},o.$attrs),null,16,["icon"])):r.createCommentVNode("",!0)}}),d=["aria-label","tabindex"],u={key:0,class:"absolute inset-0 flex items-center justify-center"},c=r.defineComponent({props:{label:{type:String,required:!0},size:{type:null,required:!1,default:"medium"},type:{type:null,required:!1,default:"primary"},isLoading:{type:Boolean,required:!1,default:!1},isDisabled:{type:Boolean,required:!1,default:!1},icon:{type:String,required:!1},iconPosition:{type:null,required:!1,default:"right"}},emits:["onClick"],setup(e,{emit:t}){const o=e,n=r.computed((()=>{const e={"text-white bg-blue-600 border-transparent hover:bg-blue-700 active:bg-blue-700 dark:ring-blue-800 ring-offset-2 dark:ring-offset-grey-900":"primary"===o.type,"text-blue-600 bg-grey-100 border-transparent hover:bg-blue-100 hover:text-blue-700 active:bg-grey-100 ring-blue-300 ring-offset-2 dark:ring-offset-grey-900":"light"===o.type,"text-grey-50 bg-grey-700 border-transparent hover:bg-grey-800 active:bg-grey-700 ring-grey-500 dark:ring-grey-400 dark:ring-opacity-50 ring-offset-2 dark:ring-offset-grey-900":"dark"===o.type},r={"pointer-events-none opacity-75 cursor-not-allowed":o.isDisabled},t={"px-4 py-1 text-xs leading-5 mono-100 rounded-lg":"small"===o.size,"px-5 py-2 text-sm leading-4 font-medium rounded-lg":"medium"===o.size,"px-8 py-3 text-base leading-6 font-medium rounded-lg":"large"===o.size};return __spreadValues(__spreadValues(__spreadValues({},e),r),t)})),a=r.computed((()=>{const e={"mr-2 -ml-1":["small","medium"].includes(o.size)&&"left"===o.iconPosition,"mr-4 -ml-2":["large"].includes(o.size)&&"left"===o.iconPosition},r={"ml-3 -mr-1":["small","medium"].includes(o.size)&&"right"===o.iconPosition,"ml-3 -mr-3":["large"].includes(o.size)&&"right"===o.iconPosition},t={"text-white":"primary"===o.type,"text-blue-600":"light"===o.type,"text-grey-50":"dark"===o.type};return __spreadValues(__spreadValues(__spreadValues({},e),r),t)}));function i(){o.isDisabled||t("onClick")}return(t,o)=>(r.openBlock(),r.createElementBlock("button",{class:r.normalizeClass(["relative inline-flex items-center focus:outline-none focus:ring active:ring transition duration-150 ease-in-out",r.unref(n)]),type:"button","aria-label":e.label,tabindex:e.isDisabled?"-1":void 0,onClick:i},[r.createElementVNode("div",{class:r.normalizeClass(!e.isLoading||"invisible")},[e.icon&&"left"===e.iconPosition?(r.openBlock(),r.createBlock(s,{key:0,name:e.icon,class:r.normalizeClass(r.unref(a))},null,8,["name","class"])):r.createCommentVNode("",!0),r.createElementVNode("span",null,r.toDisplayString(e.label),1),e.icon&&"right"===e.iconPosition?(r.openBlock(),r.createBlock(s,{key:1,name:e.icon,class:r.normalizeClass(r.unref(a))},null,8,["name","class"])):r.createCommentVNode("",!0)],2),e.isLoading?(r.openBlock(),r.createElementBlock("span",u,[r.createVNode(s,{class:"animate-spin",name:"circle-notch"})])):r.createCommentVNode("",!0)],10,d))}});var p,f=new Uint8Array(16);function m(){if(!p&&!(p="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||"undefined"!=typeof msCrypto&&"function"==typeof msCrypto.getRandomValues&&msCrypto.getRandomValues.bind(msCrypto)))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return p(f)}var g=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;function y(e){return"string"==typeof e&&g.test(e)}for(var b=[],k=0;k<256;++k)b.push((k+256).toString(16).substr(1));const v={class:"relative flex items-start"},h={class:"flex items-center h-5"},_=["checked","id"],x={class:"ml-2 text-sm leading-5"},C=["for"],V={key:0,class:"text-grey-700 dark:text-grey-400 mono-0 casual-60"},w=r.defineComponent({props:{id:{type:String,required:!1,default:function(e,r,t){var o=(e=e||{}).random||(e.rng||m)();if(o[6]=15&o[6]|64,o[8]=63&o[8]|128,r){t=t||0;for(var n=0;n<16;++n)r[t+n]=o[n];return r}return function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,t=(b[e[r+0]]+b[e[r+1]]+b[e[r+2]]+b[e[r+3]]+"-"+b[e[r+4]]+b[e[r+5]]+"-"+b[e[r+6]]+b[e[r+7]]+"-"+b[e[r+8]]+b[e[r+9]]+"-"+b[e[r+10]]+b[e[r+11]]+b[e[r+12]]+b[e[r+13]]+b[e[r+14]]+b[e[r+15]]).toLowerCase();if(!y(t))throw TypeError("Stringified UUID is invalid");return t}(o)}()},label:{type:String,required:!0},modelValue:{type:Boolean,required:!0},description:{type:String,required:!1},checked:{type:Boolean,required:!1}},emits:["update:modelValue"],setup:e=>(t,o)=>(r.openBlock(),r.createElementBlock("div",v,[r.createElementVNode("div",h,[r.createElementVNode("input",{class:"h-4 w-4 border-grey-600 dark:text-blue-500 dark:border-grey-300 dark:checked:border-blue-500 dark:focus:ring-blue-900 dark:focus:ring-offset-grey-800 rounded-sm",type:"checkbox",checked:e.modelValue,id:e.id},null,8,_)]),r.createElementVNode("div",x,[r.createElementVNode("label",{for:e.id,class:"font-medium text-grey-900 dark:text-grey-200 casual-25"},r.toDisplayString(e.label),9,C),e.description?(r.openBlock(),r.createElementBlock("p",V,r.toDisplayString(e.description),1)):r.createCommentVNode("",!0)])]))}),S={class:"relative"},P=["placeholder","type","tabindex"],B=r.defineComponent({props:{type:{type:String,required:!0,default:"text"},placeholder:{type:String,required:!1},size:{type:null,required:!1,default:"medium"},icon:{type:String,required:!1},isDisabled:{type:Boolean,required:!1,default:!1}},emits:["onInput"],setup(e,{emit:t}){const o=e,n=r.computed((()=>({"px-3 py-1 rounded font-normal":"small"===o.size,"px-4 py-3 rounded font-normal":"medium"===o.size,"px-6 py-3 rounded font-normal":"large"===o.size,"pl-10":o.icon&&"small"===o.size,"pl-12":o.icon&&("medium"===o.size||"large"===o.size)}))),a=r.computed((()=>({"pointer-events-none opacity-50 cursor-not-allowed":o.isDisabled}))),i=r.computed((()=>({"text-xs leading-4":"small"===o.size,"text-sm leading-4":"medium"===o.size,"text-base leading-4":"large"===o.size}))),l=function(e){t("onInput",(null==e?void 0:e.target).value)};return(t,o)=>(r.openBlock(),r.createElementBlock("div",S,[r.createElementVNode("input",{class:r.normalizeClass(["mono-50 bg-grey-50 text-grey-800 placeholder-grey-600 border-grey-300 dark:bg-grey-800 dark:text-grey-100 dark:placeholder-grey-400 dark:border-grey-700 focus:border-blue-400 focus:ring-blue-400 dark:focus:border-blue-800 dark:focus:ring-blue-800",__spreadValues(__spreadValues(__spreadValues({},r.unref(n)),r.unref(i)),r.unref(a))]),placeholder:e.placeholder,type:e.type,tabindex:e.isDisabled?"-1":void 0,onInput:l},null,42,P),e.icon?(r.openBlock(),r.createElementBlock("span",{key:0,class:r.normalizeClass(["absolute left-0 inset-y-0 inline-flex items-center justify-center text-grey-700 dark:text-grey-100 px-4",r.unref(i)])},[r.createVNode(s,{name:e.icon},null,8,["name"])],2)):r.createCommentVNode("",!0)]))}}),q={class:"inline-block text-blue-900 text-sm font-medium"},z=["for"],E={key:0},D=r.defineComponent({props:{id:{type:String,required:!0},label:{type:String,required:!0},description:{type:String,required:!0}},setup:e=>(t,o)=>(r.openBlock(),r.createElementBlock("span",q,[r.createElementVNode("label",{for:e.id},r.toDisplayString(e.label),9,z),e.description?(r.openBlock(),r.createElementBlock("span",E,r.toDisplayString(e.description),1)):r.createCommentVNode("",!0)]))});e.D9Button=c,e.D9Checkbox=w,e.D9Icon=s,e.D9Input=B,e.D9Label=D,e.icons=l,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));

package/dist/src/Button/Button.vue.d.ts

@@ -0,0 +1,111 @@
+import { ColorScheme, PositionHorizontal, Size } from "../types";
+declare const _sfc_main: import("vue").DefineComponent<{
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    size: {
+        type: null;
+        required: false;
+        default: string;
+    };
+    type: {
+        type: null;
+        required: false;
+        default: string;
+    };
+    isLoading: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    isDisabled: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        required: false;
+    };
+    iconPosition: {
+        type: null;
+        required: false;
+        default: string;
+    };
+}, {
+    emit: (e: "onClick") => void;
+    props: {
+        label: string;
+        size: Size;
+        type: ColorScheme;
+        isLoading: boolean;
+        isDisabled: boolean;
+        icon?: string | undefined;
+        iconPosition: PositionHorizontal;
+    };
+    buttonClasses: import("vue").ComputedRef<{
+        "px-4 py-1 text-xs leading-5 mono-100 rounded-lg": boolean;
+        "px-5 py-2 text-sm leading-4 font-medium rounded-lg": boolean;
+        "px-8 py-3 text-base leading-6 font-medium rounded-lg": boolean;
+        "pointer-events-none opacity-75 cursor-not-allowed": boolean;
+        "text-white bg-blue-600 border-transparent hover:bg-blue-700 active:bg-blue-700 dark:ring-blue-800 ring-offset-2 dark:ring-offset-grey-900": boolean;
+        "text-blue-600 bg-grey-100 border-transparent hover:bg-blue-100 hover:text-blue-700 active:bg-grey-100 ring-blue-300 ring-offset-2 dark:ring-offset-grey-900": boolean;
+        "text-grey-50 bg-grey-700 border-transparent hover:bg-grey-800 active:bg-grey-700 ring-grey-500 dark:ring-grey-400 dark:ring-opacity-50 ring-offset-2 dark:ring-offset-grey-900": boolean;
+    }>;
+    iconClasses: import("vue").ComputedRef<{
+        "text-white": boolean;
+        "text-blue-600": boolean;
+        "text-grey-50": boolean;
+        "ml-3 -mr-1": boolean;
+        "ml-3 -mr-3": boolean;
+        "mr-2 -ml-1": boolean;
+        "mr-4 -ml-2": boolean;
+    }>;
+    onClick: () => void;
+    D9Icon: import("vue").DefineComponent<{
+        name: {
+            type: StringConstructor;
+            required: true;
+            default: string;
+        };
+    }, {
+        props: {
+            name: string;
+        };
+        isIconAvailable: import("vue").ComputedRef<boolean>;
+        FontAwesomeIcon: import("vue").ComponentPublicInstance<import("@fortawesome/vue-fontawesome").FontAwesomeIconProps, {}, {}, {}, {}, {}, import("@fortawesome/vue-fontawesome").FontAwesomeIconProps, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+        name?: unknown;
+    } & {
+        name: string;
+    } & {}>, {
+        name: string;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "onClick"[], "onClick", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    label?: unknown;
+    size?: unknown;
+    type?: unknown;
+    isLoading?: unknown;
+    isDisabled?: unknown;
+    icon?: unknown;
+    iconPosition?: unknown;
+} & {
+    label: string;
+    type: any;
+    size: any;
+    isLoading: boolean;
+    isDisabled: boolean;
+    iconPosition: any;
+} & {
+    icon?: string | undefined;
+}> & {
+    onOnClick?: ((...args: any[]) => any) | undefined;
+}, {
+    type: any;
+    size: any;
+    isLoading: boolean;
+    isDisabled: boolean;
+    iconPosition: any;
+}>;
+export default _sfc_main;

package/dist/src/Checkbox/Checkbox.vue.d.ts

@@ -0,0 +1,42 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    id: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    description: {
+        type: StringConstructor;
+        required: false;
+    };
+    checked: {
+        type: BooleanConstructor;
+        required: false;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    id?: unknown;
+    label?: unknown;
+    modelValue?: unknown;
+    description?: unknown;
+    checked?: unknown;
+} & {
+    label: string;
+    id: string;
+    modelValue: boolean;
+    checked: boolean;
+} & {
+    description?: string | undefined;
+}> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    id: string;
+    checked: boolean;
+}>;
+export default _sfc_main;

package/dist/src/Icon/Icon.vue.d.ts

@@ -0,0 +1,20 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    name: {
+        type: StringConstructor;
+        required: true;
+        default: string;
+    };
+}, {
+    props: {
+        name: string;
+    };
+    isIconAvailable: import("vue").ComputedRef<boolean>;
+    FontAwesomeIcon: import("vue").ComponentPublicInstance<import("@fortawesome/vue-fontawesome").FontAwesomeIconProps, {}, {}, {}, {}, {}, import("@fortawesome/vue-fontawesome").FontAwesomeIconProps, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    name?: unknown;
+} & {
+    name: string;
+} & {}>, {
+    name: string;
+}>;
+export default _sfc_main;

package/dist/src/Input/Input.vue.d.ts

@@ -0,0 +1,90 @@
+import { Size } from "../types";
+declare const _sfc_main: import("vue").DefineComponent<{
+    type: {
+        type: StringConstructor;
+        required: true;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        required: false;
+    };
+    size: {
+        type: null;
+        required: false;
+        default: string;
+    };
+    icon: {
+        type: StringConstructor;
+        required: false;
+    };
+    isDisabled: {
+        type: BooleanConstructor;
+        required: false;
+        default: boolean;
+    };
+}, {
+    props: {
+        type: string;
+        placeholder?: string | undefined;
+        size: Size;
+        icon?: string | undefined;
+        isDisabled: boolean;
+    };
+    emit: (e: "onInput", value: string) => void;
+    inputClasses: import("vue").ComputedRef<{
+        "px-3 py-1 rounded font-normal": boolean;
+        "px-4 py-3 rounded font-normal": boolean;
+        "px-6 py-3 rounded font-normal": boolean;
+        "pl-10": boolean | "" | undefined;
+        "pl-12": boolean | "" | undefined;
+    }>;
+    disabledClasses: import("vue").ComputedRef<{
+        "pointer-events-none opacity-50 cursor-not-allowed": boolean;
+    }>;
+    textSizeClasses: import("vue").ComputedRef<{
+        "text-xs leading-4": boolean;
+        "text-sm leading-4": boolean;
+        "text-base leading-4": boolean;
+    }>;
+    onInput: (payload: Event) => void;
+    D9Icon: import("vue").DefineComponent<{
+        name: {
+            type: StringConstructor;
+            required: true;
+            default: string;
+        };
+    }, {
+        props: {
+            name: string;
+        };
+        isIconAvailable: import("vue").ComputedRef<boolean>;
+        FontAwesomeIcon: import("vue").ComponentPublicInstance<import("@fortawesome/vue-fontawesome").FontAwesomeIconProps, {}, {}, {}, {}, {}, import("@fortawesome/vue-fontawesome").FontAwesomeIconProps, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+        name?: unknown;
+    } & {
+        name: string;
+    } & {}>, {
+        name: string;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "onInput"[], "onInput", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    type?: unknown;
+    placeholder?: unknown;
+    size?: unknown;
+    icon?: unknown;
+    isDisabled?: unknown;
+} & {
+    type: string;
+    size: any;
+    isDisabled: boolean;
+} & {
+    icon?: string | undefined;
+    placeholder?: string | undefined;
+}> & {
+    onOnInput?: ((...args: any[]) => any) | undefined;
+}, {
+    type: string;
+    size: any;
+    isDisabled: boolean;
+}>;
+export default _sfc_main;

package/dist/src/Label/Label.vue.d.ts

@@ -0,0 +1,23 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    description: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    id?: unknown;
+    label?: unknown;
+    description?: unknown;
+} & {
+    description: string;
+    label: string;
+    id: string;
+} & {}>, {}>;
+export default _sfc_main;

package/dist/src/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import { DefineComponent } from "vue";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/package.json

@@ -1,21 +1,22 @@
 {
   "name": "@deck9/ui",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "The UI components used in deck9 software applications.",
   "author": "Philipp Reinking <philipp@deck9.co> (https://deck9.co)",
   "scripts": {
-    "build-storybook": "build-storybook",
+    "dev": "vite",
+    "check": "vue-tsc --noEmit",
+    "build": "vue-tsc --noEmit && vite build",
+    "serve": "vite preview",
     "storybook": "start-storybook -p 6006",
-    "build": "vite build"
-  },
-  "main": "./dist/ui.umd.js",
-  "module": "./dist/ui.es.js",
-  "exports": {
-    ".": {
-      "import": "./dist/ui.es.js",
-      "require": "./dist/ui.umd.js"
-    }
+    "build-storybook": "build-storybook"
   },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/src/index.d.ts",
   "dependencies": {
     "@deck9/tailwindcss-recursive-font-helper": "^1.0.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
@@ -24,51 +25,36 @@
     "@fortawesome/vue-fontawesome": "^3.0.0-4",
     "@tailwindcss/forms": "^0.3.3",
     "@tailwindcss/typography": "^0.4.1",
-    "core-js": "^3.6.5",
-    "rollup": "^2.57.0",
-    "tailwindcss": "^2.2.7",
-    "uuid": "^3.4.0"
+    "tailwindcss": "^2.2.15",
+    "uuid": "^8.3.2",
+    "vue": "^3.2.13"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
-    "@rollup/plugin-typescript": "^8.2.5",
-    "@storybook/addon-a11y": "^6.3.7",
-    "@storybook/addon-actions": "^6.3.7",
-    "@storybook/addon-docs": "^6.3.7",
-    "@storybook/addon-essentials": "^6.3.7",
-    "@storybook/addon-links": "^6.3.7",
+    "@storybook/addon-a11y": "^6.3.8",
+    "@storybook/addon-actions": "^6.3.8",
+    "@storybook/addon-docs": "^6.3.8",
+    "@storybook/addon-essentials": "^6.3.8",
+    "@storybook/addon-links": "^6.3.8",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.3.7",
-    "@storybook/manager-webpack5": "^6.3.7",
-    "@storybook/vue3": "^6.3.7",
+    "@storybook/builder-webpack5": "^6.3.8",
+    "@storybook/manager-webpack5": "^6.3.8",
+    "@storybook/vue3": "^6.3.8",
     "@types/uuid": "^8.3.1",
-    "@typescript-eslint/eslint-plugin": "^4.29.2",
-    "@typescript-eslint/parser": "^4.29.2",
+    "@typescript-eslint/eslint-plugin": "^4.31.2",
+    "@typescript-eslint/parser": "^4.31.2",
     "@vitejs/plugin-vue": "^1.9.0",
     "@vue/cli-plugin-babel": "^4.5.13",
     "@vue/cli-plugin-eslint": "^4.5.13",
-    "@vue/cli-plugin-typescript": "~4.5.0",
-    "@vue/cli-service": "^4.5.13",
-    "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
-    "autoprefixer": "^10.3.2",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.2",
-    "css-loader": "^3.6.0",
-    "eslint": "^7.32.0",
+    "eslint": "^6.8.0",
     "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-vue": "^7.0.0",
-    "less": "^4.1.1",
+    "eslint-plugin-vue": "^7.18.0",
     "less-loader": "^10.0.1",
-    "postcss": "^8.3.6",
-    "prettier": "^2.2.1",
     "storybook-dark-mode": "^1.0.8",
-    "typescript": "~4.1.5",
+    "typescript": "^4.4.3",
     "vite": "^2.5.10",
-    "vue": "^3.2.4",
-    "vue-class-component": "^8.0.0-0",
-    "vue-loader": "^16.5.0",
+    "vite-plugin-dts": "^0.8.1",
     "vue-tsc": "^0.3.0"
   },
   "browserslist": [
@@ -77,7 +63,7 @@
     "not dead"
   ],
   "bugs": {
-    "url": "https://github.com/Deck9/ui/issues"
+    "url": "https://github.com/deck9/ui/issues"
   },
   "homepage": "https://github.com/Deck9/ui#readme",
   "keywords": [

package/.editorconfig

@@ -1,5 +0,0 @@
-root = true
-
-[*]
-indent_style = space
-indent_size = 2

package/.eslintrc.js

@@ -1,25 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true,
-  },
-  extends: [
-    "plugin:vue/vue3-essential",
-    "eslint:recommended",
-    "@vue/typescript/recommended",
-    "@vue/prettier",
-    "@vue/prettier/@typescript-eslint",
-  ],
-  parserOptions: {
-    ecmaVersion: 2020,
-    parser: "@typescript-eslint/parser",
-  },
-  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-  },
-  globals: {
-    defineEmits: "readonly",
-    defineProps: "readonly",
-  },
-};

package/.github/workflows/release-package.yml

@@ -1,18 +0,0 @@
-name: Publish on NPM Registry
-on:
-  release:
-    types: [created]
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      # Setup .npmrc file to publish to npm
-      - uses: actions/setup-node@v2
-        with:
-          node-version: 14
-          registry-url: "https://registry.npmjs.org"
-      # - run: npm ci
-      - run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.storybook/main.ts

@@ -1,38 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-a11y",
-    {
-      name: '@storybook/addon-postcss',
-      options: {
-        postcssLoaderOptions: {
-          implementation: require('postcss'),
-        },
-      },
-    },
-    "storybook-dark-mode",
-  ],
-  "core": {
-    "builder": "webpack5"
-  },
-
-  webpackFinal: async (config) => {
-
-    config.module.rules.push({
-      test: /\.less$/,
-      use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
-      include: path.resolve(__dirname, '../'),
-    });
-
-    config.resolve.alias["@"] = path.resolve(__dirname, '../src');
-
-    return config;
-  },
-}

package/.storybook/preview.ts

@@ -1,39 +0,0 @@
-import "../styles/app.less";
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-  darkMode: {
-    classTarget: 'html',
-    stylePreview: true
-  },
-  backgrounds: {
-    default: 'dark',
-    values: [
-      {
-        name: 'white',
-        value: '#ffffff',
-      },
-      {
-        name: 'light',
-        value: '#ebf1ff',
-      },
-      {
-        name: 'dark',
-        value: '#0f172a',
-      },
-    ],
-    grid: {
-      cellSize: 16,
-      opacity: 0.2,
-      cellAmount: 6,
-      offsetX: 16, // default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
-      offsetY: 16, // default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
-    },
-  },
-}

package/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
-};

package/dist/types.d.ts

@@ -1,5 +0,0 @@
-export declare type ColorScheme = "light" | "dark" | "primary";
-export declare type Size = "small" | "medium" | "large";
-export declare type PositionHorizontal = "left" | "right";
-export declare type PositionVertical = "top" | "bottom";
-export declare type PositionBoth = PositionHorizontal | PositionVertical | "center";