@indielayer/ui 1.0.0-alpha.3 → 1.0.0-alpha.7

package/README.md

@@ -1,102 +1,40 @@
-<a href="https://indielayer.com/">
-  <img src="https://user-images.githubusercontent.com/3942799/90314498-25807a80-df0c-11ea-9e3a-b2b919bc9f10.png" alt="Indielayer" width="300" />
-</a>
+![IndielayerUI-Logo-Dark](.github/logo_dark.svg#gh-dark-mode-only)
+![IndielayerUI-Logo-Light](.github/logo.svg#gh-light-mode-only)
 
-> Tools for creators.
+<p>
+  <a href="https://github.com/indielayer/ui/actions/workflows/update_docs.yml"><img src="https://github.com/indielayer/ui/actions/workflows/update_docs.yml/badge.svg?branch=main&event=push" alt="Update docs"></a>
+  <a href="https://www.npmjs.com/package/@indielayer/ui/v/alpha"><img src="https://badgen.net/npm/dm/@indielayer/ui" alt="Downloads"></a>
+  <a href="https://www.npmjs.com/package/@indielayer/ui/v/alpha"><img src="https://badgen.net/npm/v/@indielayer/ui/alpha" alt="Version"></a>
+  <a href="https://www.npmjs.com/package/@indielayer/ui"><img src="https://badgen.net/npm/license/@indielayer/ui" alt="License"></a>
+</p>
 
-## Indielayer UI
+Vue 3 & Nuxt 3 UI Components built with Tailwind 3. **Build and prototype fast web applications.** 🚀
 
-> [Tailwind CSS](https://tailwindcss.com) UI components for Vue.js 3 / Nuxt.js 3. Build and prototype fast web applications.
+## 📖 Documentation
+Read the <a href="https://indielayer.com/ui">Online Documentation</a>.
 
-- [📖 Documentation](https://indielayer.com/ui)
-
-### Quickstart
+## Quickstart
 ```bash
 npm init @indielayer/ui
 ```
 
-## Getting Started
-
-> [tailwindcss](https://tailwindcss.com) version >= 3.0 must be already present in your application
-
-#### 1. Add `@indielayer/ui` dependency to your project
-
-```bash
-# using npm
-npm install @indielayer/ui --save-dev
-
-# using yarn
-yarn add @indielayer/ui --dev
-```
-
-#### 2. Add Indielayer UI Tailwind CSS preset `tailwind-preset.js` to your Tailwind CSS configuration file `tailwind.config.js` with the purge css configurations
+---
 
-```javascript
-// tailwind.config.js
-const indielayer = require('@indielayer/ui/tailwind.preset')
+### Development
 
-module.exports = {
-  darkMode: 'class',
-  // load indielayer ui presets
-  presets: [indielayer()],
-  // allow PurgeCSS to analyze components
-  content: [
-    './index.html',
-    './src/**/*.{vue,js,ts,jsx,tsx}',
-    'node_modules/@indielayer/ui/**/*',
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
-```
-
-### 3. Load the plugin
-#### Load the plugin in your Vue 3 application
-
-```javascript
-import { createApp } from 'vue'
-import UI from '@indielayer/ui'
-import '@indielayer/ui/styles'
-
-const app = createApp(App)
+- Clone repository
+- Ensure you have the latest LTS version of Node.js installed
+- Install dependencies with `pnpm install`
+- Run `pnpm dev` to enter dev mode watch
+- Develop docs with `pnpm run docs`
 
-app.use(UI, { prefix: 'X' })
+### Documentation
 
-// or
-import {
-  XButton,
-  XInput,
-  // ...
-} from '@indielayer/ui'
+The documentation is located inside [/packages/docs](./packages/docs)
 
-app.component('XButton', XButton)
-app.component('XInput', XInput)
-```
-
-#### Load the module in your Nuxt 3 application
+- Run `pnpm build` once from project root to build the UI library
+- Run `pnpm run docs` from project root to enter docs dev mode
 
-```javascript
-import { defineNuxtConfig } from 'nuxt'
-
-export default defineNuxtConfig({
-  css: ["~/assets/css/tailwind.css"],
-  modules: [
-    '@indielayer/ui/nuxt'
-  ],
-  build: {
-    postcss: {
-      postcssOptions: {
-        plugins: {
-          'tailwindcss/nesting': {},
-          tailwindcss: {},
-          autoprefixer: {},
-        },
-      },
-    },
-  },
-})
-```
+## License
 
-[📖 &nbsp;Read more](https://indielayer.com/ui)
+[MIT](./LICENSE)

package/lib/components/badge/Badge.vue.d.ts

@@ -12,6 +12,8 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"left" | "right">;
         default: string;
     };
+    offsetX: (NumberConstructor | StringConstructor)[];
+    offsetY: (NumberConstructor | StringConstructor)[];
     animated: BooleanConstructor;
     outlined: BooleanConstructor;
     icon: StringConstructor;
@@ -29,6 +31,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     styles: import("vue").ComputedRef<string>;
+    offsetStyle: import("vue").ComputedRef<any>;
     positionClasses: import("vue").ComputedRef<string[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     tag: {
@@ -43,6 +46,8 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"left" | "right">;
         default: string;
     };
+    offsetX: (NumberConstructor | StringConstructor)[];
+    offsetY: (NumberConstructor | StringConstructor)[];
     animated: BooleanConstructor;
     outlined: BooleanConstructor;
     icon: StringConstructor;

package/lib/components/checkbox/Checkbox.vue.d.ts

@@ -67,7 +67,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: (value: string) => boolean;
     };
 }>> & {
-    [x: `on${string}`]: ((...args: any[]) => any) | undefined;
+    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
     readonly: boolean;
     glow: boolean;

package/lib/components/drawer/Drawer.vue.d.ts

@@ -32,7 +32,7 @@ declare const _default: import("vue").DefineComponent<{
     detached: import("vue").Ref<boolean>;
     value: import("vue").Ref<boolean>;
     open: () => void;
-    close: (e?: PointerEvent) => void;
+    close: (e?: PointerEvent | undefined) => void;
     onBeforeEnter: (el: HTMLElement) => void;
     onEnter: (el: HTMLElement, done: () => void) => void;
     onBeforeLeave: (el: HTMLElement) => void;
@@ -63,11 +63,11 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    height: string | number;
+    width: string | number;
     position: "top" | "bottom" | "left" | "right";
     to: string | HTMLElement;
     modelValue: boolean;
-    height: string | number;
-    width: string | number;
     backdrop: boolean;
 }>;
 export default _default;

package/lib/components/icon/Icon.vue.d.ts

@@ -13,7 +13,11 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: (value: string) => boolean;
     };
 }, {
-    icons: any;
+    attrs: import("vue").Ref<{}>;
+    isWrapSVG: import("vue").Ref<boolean>;
+    computedIcon: import("vue").Ref<string>;
+    computedFilled: import("vue").Ref<boolean>;
+    computedViewBox: import("vue").Ref<string>;
     sizeClasses: import("vue").ComputedRef<"h-3 w-3" | "h-4 w-4" | "h-6 w-6" | "h-9 w-9" | "h-5 w-5">;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     icon: {

package/lib/components/input/Input.vue.d.ts

@@ -21,6 +21,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     inputClass: StringConstructor;
+    block: BooleanConstructor;
     modelValue: import("vue").PropType<[string, number, boolean, object, []]>;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -79,6 +80,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     inputClass: StringConstructor;
+    block: BooleanConstructor;
     modelValue: import("vue").PropType<[string, number, boolean, object, []]>;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -99,12 +101,13 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: (value: string) => boolean;
     };
 }>> & {
-    [x: `on${string}`]: ((...args: any[]) => any) | undefined;
+    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
     readonly: boolean;
     dir: string;
     required: boolean;
     type: string;
+    block: boolean;
     disabled: boolean;
     loading: boolean;
     validateOnInput: boolean;

package/lib/components/menu/Menu.vue.d.ts

@@ -8,8 +8,14 @@ declare const _default: import("vue").DefineComponent<{
     collapseIcon: StringConstructor;
     expanded: BooleanConstructor;
     disabled: BooleanConstructor;
-    rounded: BooleanConstructor;
-    filled: BooleanConstructor;
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
@@ -27,8 +33,14 @@ declare const _default: import("vue").DefineComponent<{
     collapseIcon: StringConstructor;
     expanded: BooleanConstructor;
     disabled: BooleanConstructor;
-    rounded: BooleanConstructor;
-    filled: BooleanConstructor;
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;

package/lib/components/menu/MenuItem.vue.d.ts

@@ -15,8 +15,14 @@ declare const _default: import("vue").DefineComponent<{
     icon: StringConstructor;
     iconRight: StringConstructor;
     loading: BooleanConstructor;
-    rounded: BooleanConstructor;
-    filled: BooleanConstructor;
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     selected: BooleanConstructor;
     disabled: BooleanConstructor;
     color: {
@@ -37,6 +43,7 @@ declare const _default: import("vue").DefineComponent<{
         icon: string | undefined;
         size: import("../../composables/common").Size;
         filled: boolean;
+        value: string | number | undefined;
         rounded: boolean;
         item: Record<string, any>;
         to: string | undefined;
@@ -46,14 +53,13 @@ declare const _default: import("vue").DefineComponent<{
         loading: boolean;
         exact: boolean;
         inactive: boolean;
-        value: string | number | undefined;
         onActive: ((...args: any[]) => any) | undefined;
         target: string | undefined;
         selected: boolean;
     }>;
     htmlTag: string;
     isActive: import("vue").Ref<boolean>;
-    cssVariables: import("vue").ComputedRef<string | Record<string, string>>;
+    cssVariables: import("vue").ComputedRef<Record<string, string>>;
     onItemClick: (e: Event) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("active" | "click")[], "active" | "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     item: {
@@ -72,8 +78,14 @@ declare const _default: import("vue").DefineComponent<{
     icon: StringConstructor;
     iconRight: StringConstructor;
     loading: BooleanConstructor;
-    rounded: BooleanConstructor;
-    filled: BooleanConstructor;
+    rounded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     selected: BooleanConstructor;
     disabled: BooleanConstructor;
     color: {

package/lib/components/radio/Radio.vue.d.ts

@@ -65,7 +65,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: (value: string) => boolean;
     };
 }>> & {
-    [x: `on${string}`]: ((...args: any[]) => any) | undefined;
+    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
     readonly: boolean;
     glow: boolean;

package/lib/components/select/Select.vue.d.ts

@@ -86,7 +86,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: (value: string) => boolean;
     };
 }>> & {
-    [x: `on${string}`]: ((...args: any[]) => any) | undefined;
+    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
     readonly: boolean;
     required: boolean;

package/lib/components/slider/Slider.vue.d.ts

@@ -81,7 +81,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: (value: string) => boolean;
     };
 }>> & {
-    [x: `on${string}`]: ((...args: any[]) => any) | undefined;
+    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
     readonly: boolean;
     required: boolean;

package/lib/components/tab/Tab.vue.d.ts

@@ -1,7 +1,6 @@
 declare const _default: import("vue").DefineComponent<{
     value: {
         type: (NumberConstructor | StringConstructor)[];
-        required: true;
     };
     tag: {
         type: StringConstructor;
@@ -11,6 +10,7 @@ declare const _default: import("vue").DefineComponent<{
     label: StringConstructor;
     icon: StringConstructor;
     disabled: BooleanConstructor;
+    exact: BooleanConstructor;
     size: {
         readonly type: import("vue").PropType<import("../../composables/common").Size>;
         readonly validator: (value: string) => boolean;
@@ -18,15 +18,18 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     variant: any;
     grow: any;
-    cLabel: import("vue").ComputedRef<string | number>;
+    elRef: import("vue").Ref<any>;
+    cLabel: import("vue").ComputedRef<string | number | undefined>;
+    cValue: import("vue").ComputedRef<string | number | undefined>;
+    cSize: import("vue").ComputedRef<any>;
     tabs: any;
+    sizeClasses: import("vue").ComputedRef<"" | "text-xs" | "text-sm" | "text-lg" | "text-xl">;
     teleportTo: import("vue").Ref<null>;
     onClickTab: () => void;
     selected: import("vue").Ref<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     value: {
         type: (NumberConstructor | StringConstructor)[];
-        required: true;
     };
     tag: {
         type: StringConstructor;
@@ -36,6 +39,7 @@ declare const _default: import("vue").DefineComponent<{
     label: StringConstructor;
     icon: StringConstructor;
     disabled: BooleanConstructor;
+    exact: BooleanConstructor;
     size: {
         readonly type: import("vue").PropType<import("../../composables/common").Size>;
         readonly validator: (value: string) => boolean;
@@ -43,5 +47,6 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     tag: string;
     disabled: boolean;
+    exact: boolean;
 }>;
 export default _default;

package/lib/components/tab/TabGroup.vue.d.ts

@@ -5,12 +5,21 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"line" | "block">;
         default: string;
     };
+    align: {
+        type: PropType<"left" | "right" | "center">;
+        default: string;
+    };
     ghost: BooleanConstructor;
     grow: BooleanConstructor;
+    exact: BooleanConstructor;
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
     };
+    size: {
+        readonly type: PropType<import("../../composables/common").Size>;
+        readonly validator: (value: string) => boolean;
+    };
 }, {
     scrollRef: import("vue").Ref<any>;
     wrapperRef: import("vue").Ref<HTMLElement | undefined>;
@@ -24,17 +33,28 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"line" | "block">;
         default: string;
     };
+    align: {
+        type: PropType<"left" | "right" | "center">;
+        default: string;
+    };
     ghost: BooleanConstructor;
     grow: BooleanConstructor;
+    exact: BooleanConstructor;
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
     };
+    size: {
+        readonly type: PropType<import("../../composables/common").Size>;
+        readonly validator: (value: string) => boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     color: string;
+    align: "left" | "right" | "center";
     ghost: boolean;
+    exact: boolean;
     variant: "line" | "block";
     grow: boolean;
 }>;

package/lib/components/table/Table.vue.d.ts

@@ -6,6 +6,7 @@ export declare type Header = {
     align?: Align;
     value: string;
     text: string;
+    width: string | number;
 };
 declare const _default: import("vue").DefineComponent<{
     headers: {

package/lib/components/textarea/Textarea.vue.d.ts

@@ -5,6 +5,7 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    rows: NumberConstructor;
     max: NumberConstructor;
     maxlength: NumberConstructor;
     min: NumberConstructor;
@@ -16,6 +17,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     preventEnter: BooleanConstructor;
     inputClass: StringConstructor;
+    block: BooleanConstructor;
     modelValue: import("vue").PropType<[string, number, boolean, object, []]>;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -55,6 +57,7 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    rows: NumberConstructor;
     max: NumberConstructor;
     maxlength: NumberConstructor;
     min: NumberConstructor;
@@ -66,6 +69,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     preventEnter: BooleanConstructor;
     inputClass: StringConstructor;
+    block: BooleanConstructor;
     modelValue: import("vue").PropType<[string, number, boolean, object, []]>;
     name: StringConstructor;
     readonly: BooleanConstructor;
@@ -86,11 +90,12 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: (value: string) => boolean;
     };
 }>> & {
-    [x: `on${string}`]: ((...args: any[]) => any) | undefined;
+    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
     readonly: boolean;
     dir: string;
     required: boolean;
+    block: boolean;
     disabled: boolean;
     loading: boolean;
     validateOnInput: boolean;

package/lib/components/toggle/Toggle.vue.d.ts

@@ -65,7 +65,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: (value: string) => boolean;
     };
 }>> & {
-    [x: `on${string}`]: ((...args: any[]) => any) | undefined;
+    [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
     readonly: boolean;
     glow: boolean;

package/lib/composables/colors.d.ts

@@ -17,7 +17,7 @@ export declare const useColors: {
         getPalette: (color: string) => ColorPalette;
         getColorOpacity: (color: string, opacity: number) => string;
     };
-    props(defaultColor?: string): {
+    props(defaultColor?: string | undefined): {
         readonly color: {
             readonly type: StringConstructor;
             readonly default: string | undefined;

package/lib/composables/css.d.ts

@@ -1,5 +1,5 @@
-export declare const useCSS: (namespace?: string) => {
-    get: (name: string, value: string, theme?: string, modifier?: string) => string;
-    variable: (name: string, theme?: string, modifier?: string) => string;
-    variables: (object: Record<string, string | object>, theme?: string, modifier?: string) => Record<string, string>;
+export declare const useCSS: (namespace?: string | undefined) => {
+    get: (name: string, value: string, theme?: string | undefined, modifier?: string | undefined) => string;
+    variable: (name: string, theme?: string | undefined, modifier?: string | undefined) => string;
+    variables: (object: Record<string, string | object>, theme?: string | undefined, modifier?: string | undefined) => Record<string, string>;
 };

package/lib/create.d.ts

@@ -4,6 +4,7 @@ export interface IndielayerUIOptions {
     prefix?: string;
     components?: any;
     colors?: ColorLibrary;
+    icons?: any;
 }
 declare const create: (createOptions?: IndielayerUIOptions) => {
     install: (app: App, installOptions?: IndielayerUIOptions) => void;