@indielayer/ui 0.2.3 → 1.0.0-alpha.2

package/README.md

@@ -10,6 +10,11 @@
 
 - [📖 Documentation](https://indielayer.com/ui)
 
+### Quickstart
+```bash
+npm init @indielayer/ui
+```
+
 ## Getting Started
 
 > [tailwindcss](https://tailwindcss.com) version >= 3.0 must be already present in your application
@@ -19,6 +24,7 @@
 ```bash
 # using npm
 npm install @indielayer/ui --save-dev
+
 # using yarn
 yarn add @indielayer/ui --dev
 ```
@@ -30,22 +36,29 @@ yarn add @indielayer/ui --dev
 const indielayer = require('@indielayer/ui/tailwind.preset')
 
 module.exports = {
+  darkMode: 'class',
   // load indielayer ui presets
-  presets: [indielayer],
+  presets: [indielayer()],
   // allow PurgeCSS to analyze components
   content: [
-    'node_modules/@indielayer/ui/src/**/*.vue',
-    './src/**/*.vue',
+    './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
+#### 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)
 
@@ -53,27 +66,30 @@ app.use(UI, { prefix: 'X' })
 
 // or
 import {
-  Input,
-  Button,
+  XButton,
+  XInput,
   // ...
 } from '@indielayer/ui'
 
-app.component('XButton', Button)
-app.component('XInput', Input)
+app.component('XButton', XButton)
+app.component('XInput', XInput)
 ```
 
-#### Load the module in your nuxt 3 application
+#### Load the module in your Nuxt 3 application
 
 ```javascript
-import { defineNuxtConfig } from 'nuxt3'
+import { defineNuxtConfig } from 'nuxt'
 
 export default defineNuxtConfig({
   css: ["~/assets/css/tailwind.css"],
-  buildModules: ['@indielayer/ui/nuxt'],
+  modules: [
+    '@indielayer/ui/nuxt'
+  ],
   build: {
     postcss: {
       postcssOptions: {
         plugins: {
+          'tailwindcss/nesting': {},
           tailwindcss: {},
           autoprefixer: {},
         },

package/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/lib/components/alert/Alert.vue.d.ts

@@ -0,0 +1,42 @@
+import { type PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: PropType<"success" | "warning" | "error" | "info" | undefined>;
+    glow: BooleanConstructor;
+    light: BooleanConstructor;
+    outlined: BooleanConstructor;
+    removable: BooleanConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+}, {
+    styles: import("vue").ComputedRef<(string | object)[]>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "remove"[], "remove", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: PropType<"success" | "warning" | "error" | "info" | undefined>;
+    glow: BooleanConstructor;
+    light: BooleanConstructor;
+    outlined: BooleanConstructor;
+    removable: BooleanConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+}>> & {
+    onRemove?: ((...args: any[]) => any) | undefined;
+}, {
+    tag: string;
+    glow: boolean;
+    light: boolean;
+    outlined: boolean;
+    removable: boolean;
+    color: string;
+}>;
+export default _default;

package/lib/components/avatar/Avatar.vue.d.ts

@@ -0,0 +1,49 @@
+declare const _default: import("vue").DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: StringConstructor;
+    alt: StringConstructor;
+    image: StringConstructor;
+    outlined: BooleanConstructor;
+    rounded: BooleanConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly validator: (value: string) => boolean;
+    };
+}, {
+    avatarIcon: string;
+    source: import("vue").Ref<string | undefined>;
+    initials: import("vue").ComputedRef<string>;
+    sizeClasses: import("vue").ComputedRef<"h-6 w-6 text-xs" | "h-9 w-9 text-sm" | "h-12 w-12 text-lg" | "h-[3.75rem] w-[3.75rem] text-xl" | "h-10 w-10">;
+    styles: import("vue").ComputedRef<Record<string, 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: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: StringConstructor;
+    alt: StringConstructor;
+    image: StringConstructor;
+    outlined: BooleanConstructor;
+    rounded: BooleanConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly validator: (value: string) => boolean;
+    };
+}>>, {
+    tag: string;
+    outlined: boolean;
+    color: string;
+    rounded: boolean;
+}>;
+export default _default;

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

@@ -0,0 +1,70 @@
+import { type PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    position: {
+        type: PropType<"top" | "bottom">;
+        default: string;
+    };
+    align: {
+        type: PropType<"left" | "right">;
+        default: string;
+    };
+    animated: BooleanConstructor;
+    outlined: BooleanConstructor;
+    icon: StringConstructor;
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: PropType<import("../../composables/common").Size>;
+        readonly validator: (value: string) => boolean;
+    };
+}, {
+    styles: import("vue").ComputedRef<string>;
+    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: {
+        type: StringConstructor;
+        default: string;
+    };
+    position: {
+        type: PropType<"top" | "bottom">;
+        default: string;
+    };
+    align: {
+        type: PropType<"left" | "right">;
+        default: string;
+    };
+    animated: BooleanConstructor;
+    outlined: BooleanConstructor;
+    icon: StringConstructor;
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: PropType<import("../../composables/common").Size>;
+        readonly validator: (value: string) => boolean;
+    };
+}>>, {
+    tag: string;
+    outlined: boolean;
+    color: string;
+    position: "top" | "bottom";
+    align: "left" | "right";
+    animated: boolean;
+    show: boolean;
+}>;
+export default _default;

package/lib/components/breadcrumbs/Breadcrumbs.vue.d.ts

@@ -0,0 +1,30 @@
+import { type PropType } from 'vue';
+export declare type BreadcrumbItem = {
+    label: string;
+    to?: string | object;
+    href?: string;
+    color?: string;
+    icon?: string;
+    shadow?: boolean;
+    underline?: boolean;
+};
+declare const _default: import("vue").DefineComponent<{
+    items: PropType<BreadcrumbItem[]>;
+    icon: StringConstructor;
+    color: StringConstructor;
+    shadow: BooleanConstructor;
+    underline: BooleanConstructor;
+}, {
+    arrowIcon: string;
+    lastItem: import("vue").ComputedRef<BreadcrumbItem | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    items: PropType<BreadcrumbItem[]>;
+    icon: StringConstructor;
+    color: StringConstructor;
+    shadow: BooleanConstructor;
+    underline: BooleanConstructor;
+}>>, {
+    shadow: boolean;
+    underline: boolean;
+}>;
+export default _default;

package/lib/components/button/Button.vue.d.ts

@@ -0,0 +1,87 @@
+export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;
+declare const _default: import("vue").DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: StringConstructor;
+    iconRight: StringConstructor;
+    to: StringConstructor;
+    outlined: BooleanConstructor;
+    rounded: BooleanConstructor;
+    glow: BooleanConstructor;
+    ghost: BooleanConstructor;
+    light: BooleanConstructor;
+    block: BooleanConstructor;
+    flat: BooleanConstructor;
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly validator: (value: string) => boolean;
+    };
+}, {
+    elRef: import("vue").Ref<HTMLElement | undefined>;
+    sizeClasses: import("vue").ComputedRef<string>;
+    styles: import("vue").ComputedRef<(string | object)[]>;
+    htmlTag: import("vue").ComputedRef<string>;
+    isButtonGroup: any;
+    computedSize: import("vue").ComputedRef<any>;
+    computedFlat: import("vue").ComputedRef<any>;
+    computedGhost: import("vue").ComputedRef<any>;
+    computedLight: import("vue").ComputedRef<any>;
+    computedOutlined: import("vue").ComputedRef<any>;
+    computedDisabled: import("vue").ComputedRef<any>;
+    focus: () => void;
+}, 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: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    icon: StringConstructor;
+    iconRight: StringConstructor;
+    to: StringConstructor;
+    outlined: BooleanConstructor;
+    rounded: BooleanConstructor;
+    glow: BooleanConstructor;
+    ghost: BooleanConstructor;
+    light: BooleanConstructor;
+    block: BooleanConstructor;
+    flat: BooleanConstructor;
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly validator: (value: string) => boolean;
+    };
+}>>, {
+    tag: string;
+    glow: boolean;
+    light: boolean;
+    outlined: boolean;
+    type: string;
+    color: string;
+    rounded: boolean;
+    ghost: boolean;
+    block: boolean;
+    flat: boolean;
+    disabled: boolean;
+    loading: boolean;
+}>;
+export default _default;

package/lib/components/button/ButtonGroup.vue.d.ts

@@ -0,0 +1,49 @@
+declare const _default: import("vue").DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    outlined: BooleanConstructor;
+    rounded: BooleanConstructor;
+    ghost: BooleanConstructor;
+    light: BooleanConstructor;
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly validator: (value: string) => boolean;
+    };
+}, void, 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: {
+        type: StringConstructor;
+        default: string;
+    };
+    outlined: BooleanConstructor;
+    rounded: BooleanConstructor;
+    ghost: BooleanConstructor;
+    light: BooleanConstructor;
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly validator: (value: string) => boolean;
+    };
+}>>, {
+    tag: string;
+    light: boolean;
+    outlined: boolean;
+    color: string;
+    rounded: boolean;
+    ghost: boolean;
+    disabled: boolean;
+    loading: boolean;
+}>;
+export default _default;

package/lib/components/card/Card.vue.d.ts

@@ -0,0 +1,17 @@
+declare const _default: import("vue").DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    flat: BooleanConstructor;
+}, unknown, 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: {
+        type: StringConstructor;
+        default: string;
+    };
+    flat: BooleanConstructor;
+}>>, {
+    tag: string;
+    flat: boolean;
+}>;
+export default _default;

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

@@ -0,0 +1,81 @@
+import { type StyleValue } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    label: StringConstructor;
+    glow: BooleanConstructor;
+    modelValue: import("vue").PropType<[string, number, boolean, object, []]>;
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    required: BooleanConstructor;
+    validateOnInput: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    error: StringConstructor;
+    rules: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly validator: (value: string) => boolean;
+    };
+}, {
+    elRef: import("vue").Ref<HTMLElement | undefined>;
+    checked: import("vue").Ref<boolean>;
+    sizeClasses: import("vue").ComputedRef<"h-4 w-4" | "h-6 w-6" | "h-5 w-5">;
+    iconSizeClasses: import("vue").ComputedRef<"h-3 w-3" | "h-4 w-4" | "h-2 w-2">;
+    cssVariables: import("vue").ComputedRef<Record<string, string> | StyleValue>;
+    toggle: () => void;
+    isFirstValidation: import("vue").Ref<boolean>;
+    errorInternal: any;
+    isInsideForm: any;
+    inputListeners: {};
+    reset: () => void;
+    validate: (val: any) => boolean;
+    setError: (val: string) => void;
+    focus: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    label: StringConstructor;
+    glow: BooleanConstructor;
+    modelValue: import("vue").PropType<[string, number, boolean, object, []]>;
+    name: StringConstructor;
+    readonly: BooleanConstructor;
+    required: BooleanConstructor;
+    validateOnInput: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    error: StringConstructor;
+    rules: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    disabled: BooleanConstructor;
+    loading: BooleanConstructor;
+    color: {
+        readonly type: StringConstructor;
+        readonly default: string | undefined;
+    };
+    size: {
+        readonly type: import("vue").PropType<import("../../composables/common").Size>;
+        readonly validator: (value: string) => boolean;
+    };
+}>> & {
+    [x: `on${string}`]: ((...args: any[]) => any) | undefined;
+}, {
+    readonly: boolean;
+    glow: boolean;
+    required: boolean;
+    color: string;
+    disabled: boolean;
+    loading: boolean;
+    validateOnInput: boolean;
+    rules: unknown[];
+}>;
+export default _default;

package/lib/components/collapse/Collapse.vue.d.ts

@@ -0,0 +1,47 @@
+declare const _default: import("vue").DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    expanded: BooleanConstructor;
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: StringConstructor;
+    color: StringConstructor;
+}, {
+    collapsed: import("vue").Ref<boolean>;
+    onBeforeEnter: (el: HTMLElement) => void;
+    onEnter: (el: HTMLElement, done: () => void) => void;
+    onAfterEnter: (el: HTMLElement) => void;
+    onBeforeLeave: (el: HTMLElement) => void;
+    onLeave: (el: HTMLElement, done: () => void) => void;
+    onAfterLeave: (el: HTMLElement) => void;
+    onExpand: (anim?: boolean) => void;
+    toggle: () => void;
+    close: (anim?: boolean) => void;
+    open: (anim?: boolean) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "expand"[], "expand", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    expanded: BooleanConstructor;
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: StringConstructor;
+    color: StringConstructor;
+}>> & {
+    onExpand?: ((...args: any[]) => any) | undefined;
+}, {
+    tag: string;
+    disabled: boolean;
+    expanded: boolean;
+    showIcon: boolean;
+}>;
+export default _default;

package/lib/components/container/Container.vue.d.ts

@@ -0,0 +1,14 @@
+declare const _default: import("vue").DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}, unknown, 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: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    tag: string;
+}>;
+export default _default;

package/lib/components/divider/Divider.vue.d.ts

@@ -0,0 +1,10 @@
+declare const _default: import("vue").DefineComponent<{
+    label: StringConstructor;
+    vertical: BooleanConstructor;
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    label: StringConstructor;
+    vertical: BooleanConstructor;
+}>>, {
+    vertical: boolean;
+}>;
+export default _default;

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

@@ -0,0 +1,73 @@
+import { type PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    modelValue: BooleanConstructor;
+    position: {
+        type: PropType<"top" | "bottom" | "left" | "right">;
+        default: string;
+    };
+    to: {
+        type: PropType<string | HTMLElement>;
+        default: string;
+    };
+    width: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    height: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    breakpoint: (NumberConstructor | StringConstructor)[];
+    backdrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    deferShow: import("vue").Ref<boolean>;
+    backdropRef: import("vue").Ref<HTMLElement | null>;
+    drawerRef: import("vue").Ref<HTMLElement | null>;
+    visible: import("vue").Ref<boolean>;
+    classes: import("vue").ComputedRef<string[]>;
+    styles: import("vue").ComputedRef<Record<string, string>>;
+    detached: import("vue").Ref<boolean>;
+    value: import("vue").Ref<boolean>;
+    open: () => void;
+    close: (e?: PointerEvent) => void;
+    onBeforeEnter: (el: HTMLElement) => void;
+    onEnter: (el: HTMLElement, done: () => void) => void;
+    onBeforeLeave: (el: HTMLElement) => void;
+    onLeave: (el: HTMLElement, done: () => void) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: BooleanConstructor;
+    position: {
+        type: PropType<"top" | "bottom" | "left" | "right">;
+        default: string;
+    };
+    to: {
+        type: PropType<string | HTMLElement>;
+        default: string;
+    };
+    width: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    height: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    breakpoint: (NumberConstructor | StringConstructor)[];
+    backdrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    position: "top" | "bottom" | "left" | "right";
+    to: string | HTMLElement;
+    modelValue: boolean;
+    height: string | number;
+    width: string | number;
+    backdrop: boolean;
+}>;
+export default _default;