@indielayer/ui 0.2.2 → 1.0.0-alpha.0

package/README.md

@@ -1,24 +1,86 @@
-# ui
+<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>
 
-## Project setup
-```
-npm install
-```
+> Tools for creators.
 
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
+## Indielayer UI
+
+> [Tailwind CSS](https://tailwindcss.com) UI components for Vue.js 3 / Nuxt.js 3. Build and prototype fast web applications.
 
-### Compiles and minifies for production
+- [📖 Documentation](https://indielayer.com/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
 ```
-npm run build
+
+#### 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')
+
+module.exports = {
+  // load indielayer ui presets
+  presets: [indielayer()],
+  // allow PurgeCSS to analyze components
+  content: [
+    'node_modules/@indielayer/ui/**/*',
+    './src/**/*.vue',
+  ],
+};
 ```
 
-### Lints and fixes files
+### 3. Load the plugin
+#### Load the plugin in your vue 3 application
+
+```javascript
+import { createApp } from 'vue'
+import UI from '@indielayer/ui'
+
+const app = createApp(App)
+
+app.use(UI, { prefix: 'X' })
+
+// or
+import {
+  Input,
+  Button,
+  // ...
+} from '@indielayer/ui'
+
+app.component('XButton', Button)
+app.component('XInput', Input)
 ```
-npm run lint
+
+#### Load the module in your nuxt 3 application
+
+```javascript
+import { defineNuxtConfig } from 'nuxt3'
+
+export default defineNuxtConfig({
+  css: ["~/assets/css/tailwind.css"],
+  buildModules: ['@indielayer/ui/nuxt'],
+  build: {
+    postcss: {
+      postcssOptions: {
+        plugins: {
+          tailwindcss: {},
+          autoprefixer: {},
+        },
+      },
+    },
+  },
+})
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+[📖 &nbsp;Read more](https://indielayer.com/ui)

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,80 @@
+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> | (string | object)[]>;
+    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: string & `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 | undefined) => 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;