@indielayer/ui 1.0.0-alpha.7 → 1.0.0

package/src/composables/theme.ts

@@ -0,0 +1,88 @@
+import { computed, inject, unref, useSlots, type StyleValue } from 'vue'
+import { injectThemeKey } from './keys'
+import { useColors, type ColorComposition } from './colors'
+import { useCSS, type CSSComposition } from './css'
+import * as R from 'ramda'
+import { smartUnref } from '../common/utils'
+
+import type { Slots } from 'vue'
+
+export type ThemeParams = {
+  props: any
+  slots: Slots
+  colors: ColorComposition
+  css: CSSComposition
+  rtl?: boolean
+  data?: any
+}
+
+export const useTheme = (namespace: string, defaultTheme: any = {}, props: any, data?: any) => {
+  const userTheme = inject(injectThemeKey, false)
+
+  const rawClasses = computed(() => {
+    if (unref(userTheme)?.[namespace]) return R.mergeRight(defaultTheme.classes, unref(userTheme)[namespace].classes || {})
+
+    return defaultTheme.classes
+  })
+
+  const classPrefix = computed(() => unref(userTheme)?.classPrefix ?? 'x-')
+  const className = computed(() => `${classPrefix.value}${namespace}`)
+
+  const rtl = computed(() => unref(userTheme)?.rtl ?? false)
+
+  // compute theme
+  const slots = useSlots()
+  const colors = useColors()
+  const css = useCSS(namespace)
+
+  const classes = computed(() => getClasses(rawClasses.value, {
+    props: unref(props),
+    slots,
+    data: smartUnref(data),
+    colors,
+    css,
+    rtl: unref(rtl),
+  }))
+
+  const styles = computed(() => {
+    const componentTheme = unref(userTheme)?.[namespace] || {}
+    const params = {
+      props: unref(props),
+      slots,
+      data: smartUnref(data),
+      colors,
+      css,
+      rtl: unref(rtl),
+    }
+
+    return [
+      getStyles(defaultTheme.styles, params),
+      getStyles(componentTheme.styles, params),
+    ] as StyleValue
+  })
+
+  return {
+    classPrefix,
+    className,
+    colors,
+    classes,
+    styles,
+    css,
+  }
+}
+
+function getClasses(xs: any, params: ThemeParams): any {
+  return R.map((x) => R.is(Function, x)
+    ? x(params)
+    : R.is(Object, x) || R.is(Array, x)
+      ? getClasses(x, params)
+      : x, xs)
+}
+
+function getStyles(styles: any, params: ThemeParams) {
+  return R.is(Function, styles)
+    ? styles(params) || {}
+    : R.is(Object, styles)
+      ? styles
+      : {}
+}

package/src/create.ts

@@ -1,12 +1,13 @@
 import type { App } from 'vue'
 import type { ColorLibrary } from './composables/colors'
-import { injectColorsKey, injectIconsKey } from './composables/keys'
+import { injectColorsKey, injectIconsKey, injectThemeKey } from './composables/keys'
 
-export interface IndielayerUIOptions {
+export type IndielayerUIOptions = {
   prefix?: string,
   components?: any,
   colors?: ColorLibrary,
   icons?: any
+  theme?: any
 }
 
 const defaultOptions: IndielayerUIOptions = {
@@ -23,11 +24,15 @@ const create = (createOptions: IndielayerUIOptions = {}) => {
 
     if (options.components)
       options.components.forEach((component: any) => {
-        app.component(`${options.prefix}${component.name.slice(1)}`, component)
+        // TODO: remove me
+        const name = component.name.startsWith('X') ? component.name.slice(1) : component.name
+
+        app.component(`${options.prefix}${name}`, component)
       })
 
     app.provide(injectColorsKey, options.colors)
-    app.provide(injectIconsKey, options.icons)
+    app.provide(injectIconsKey, options.icons || {})
+    app.provide(injectThemeKey, options.theme || {})
   }
 
   return {

package/src/exports/nuxt.js

@@ -6,7 +6,7 @@ export default defineNuxtModule({
     name: '@indielayer/ui',
     configKey: 'indielayer',
     compatibility: {
-      nuxt: '^3.0.0',
+      nuxt: '^3.0.0-rc.1',
     },
   },
   defaults: {
@@ -25,6 +25,7 @@ export default defineNuxtModule({
     nuxt.hook('components:dirs', (dirs) => {
       dirs.push({
         path: fileURLToPath(new URL('../src/components', import.meta.url)),
+        extensions: ['vue', 'tsx'],
         prefix: options?.prefix ? options?.prefix : 'X',
       })
     })

package/src/version.ts

@@ -1 +1 @@
-export default '1.0.0-alpha.7'
+export default '1.0.0'

package/volar.d.ts

@@ -15,6 +15,7 @@ declare module 'vue' {
     XForm: typeof import('@indielayer/ui')['XForm']
     XIcon: typeof import('@indielayer/ui')['XIcon']
     XImage: typeof import('@indielayer/ui')['XImage']
+    XAbac: typeof import('@indielayer/ui')['XAbac']
     XInput: typeof import('@indielayer/ui')['XInput']
     XLink: typeof import('@indielayer/ui')['XLink']
     XMenu: typeof import('@indielayer/ui')['XMenu']

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

@@ -1,42 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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;
-    };
-    offsetX: (NumberConstructor | StringConstructor)[];
-    offsetY: (NumberConstructor | StringConstructor)[];
-    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>;
-    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: {
-        type: StringConstructor;
-        default: string;
-    };
-    position: {
-        type: PropType<"top" | "bottom">;
-        default: string;
-    };
-    align: {
-        type: PropType<"left" | "right">;
-        default: string;
-    };
-    offsetX: (NumberConstructor | StringConstructor)[];
-    offsetY: (NumberConstructor | StringConstructor)[];
-    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

@@ -1,30 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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: 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

@@ -1,47 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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;