@indielayer/ui 1.0.0-alpha.9 → 1.0.2

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(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.9'
+export default '1.0.2'

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/spacer/Spacer.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-export default _default;

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

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-export default _default;

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

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
-export default _default;

package/lib/composables/notification.d.ts

@@ -1 +0,0 @@
-export declare const useNotification: () => any;

package/lib/style.css

@@ -1 +0,0 @@
-._alert_1sdha_2[data-v-35ce54d8]{color:var(--x-alert-text);background-color:var(--x-alert-bg);border-color:var(--x-alert-border)}._alert--glow_1sdha_1[data-v-35ce54d8]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-alert-glow),0 4px 6px -4px var(--x-alert-glow)}.dark ._alert_1sdha_2[data-v-35ce54d8]{color:var(--x-dark-alert-text, var(--x-alert-text));background-color:var(--x-dark-alert-bg, var(--x-alert-bg));border-color:var(--x-dark-alert-border, var(--x-alert-border))}._avatar_v7jzc_2[data-v-243016db]{color:var(--x-avatar-text);background-color:var(--x-avatar-bg);border-color:var(--x-avatar-border)}.dark ._avatar_v7jzc_2[data-v-243016db]{color:var(--x-dark-avatar-text, var(--x-avatar-text));background-color:var(--x-dark-avatar-bg, var(--x-avatar-bg));border-color:var(--x-dark-avatar-border, var(--x-avatar-border))}._button_1sbr9_2[data-v-6cb75733]{color:var(--x-button-text);background-color:var(--x-button-bg);border-color:var(--x-button-border)}._button--glow_1sbr9_1[data-v-6cb75733]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-button-glow),0 4px 6px -4px var(--x-button-glow)}._button_1sbr9_2[data-v-6cb75733]:hover{color:var(--x-button-text-hover, var(--x-button-text));background-color:var(--x-button-bg-hover, var(--x-button-bg));border-color:var(--x-button-border-hover, var(--x-button-border))}._button_1sbr9_2[data-v-6cb75733]:active{color:var(--x-button-text-active, var(--x-button-text));background-color:var(--x-button-bg-active, var(--x-button-bg));border-color:var(--x-button-border-active, var(--x-button-border))}.dark ._button_1sbr9_2[data-v-6cb75733]{color:var(--x-dark-button-text, var(--x-button-text));background-color:var(--x-dark-button-bg, var(--x-button-bg));border-color:var(--x-dark-button-border, var(--x-button-border))}.dark ._button_1sbr9_2[data-v-6cb75733]:hover{color:var(--x-dark-button-text-hover, var(--x-dark-button-text, var(--x-button-text)));background-color:var(--x-dark-button-bg-hover, var(--x-dark-button-bg, var(--x-button-bg)));border-color:var(--x-dark-button-border-hover, var(--x-dark-button-border, var(--x-button-border)))}.dark ._button_1sbr9_2[data-v-6cb75733]:active{color:var(--x-dark-button-text-active, var(--x-dark-button-text));background-color:var(--x-dark-button-bg-active, var(--x-dark-button-bg, var(--x-button-bg)));border-color:var(--x-dark-button-border-active, var(--x-dark-button-border, var(--x-button-border)))}._button-group_s7fyl_2:not(._button-group--rounded_s7fyl_1)>:first-child{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-left-width:1px}._button-group_s7fyl_2:not(._button-group--rounded_s7fyl_1)>:last-child{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}._button-group--rounded_s7fyl_1>:first-of-type{border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-left-width:1px}._button-group--rounded_s7fyl_1>:last-child{border-top-right-radius:9999px;border-bottom-right-radius:9999px}._checkbox--glow_1dz66_1[data-v-05f49cb5]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-glow),0 4px 6px -4px var(--x-glow)}._scrollWrap_1k3q9_2[data-v-7362ac18]:before,._scrollWrap_1k3q9_2[data-v-7362ac18]:after{content:"";pointer-events:none;position:absolute;z-index:1;transition:box-shadow .2s}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-7362ac18]:before,._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-7362ac18]:after{top:0;bottom:0;width:20px}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-7362ac18]:before,._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-7362ac18]:after{right:0;left:0;height:20px}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-7362ac18]:before{left:0}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-7362ac18]:after{right:0}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-7362ac18]:before{top:0}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-7362ac18]:after{bottom:0}._scrollWrap_1k3q9_2._shadow-left_1k3q9_36[data-v-7362ac18]:before{box-shadow:inset 12px 0 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-right_1k3q9_40[data-v-7362ac18]:after{box-shadow:inset -12px 0 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-top_1k3q9_44[data-v-7362ac18]:before{box-shadow:inset 0 12px 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-bottom_1k3q9_48[data-v-7362ac18]:after{box-shadow:inset 0 -12px 10px -10px #00000012}._hideScroll_1k3q9_53[data-v-7362ac18]{-ms-overflow-style:auto;scrollbar-width:none}._hideScroll_1k3q9_53[data-v-7362ac18]::-webkit-scrollbar{display:none}._link--shadow_1tilo_1[data-v-af336fea]{box-shadow:inset 0 -.315em 0 0 var(--x-shadow)}._link--shadow_1tilo_1[data-v-af336fea]:hover{box-shadow:inset 0 -1.125em 0 0 var(--x-shadow)}.dark ._link--shadow_1tilo_1[data-v-af336fea]{box-shadow:inset 0 -.315em 0 0 var(--x-dark-shadow)}.dark ._link--shadow_1tilo_1[data-v-af336fea]:hover{box-shadow:inset 0 -1.125em 0 0 var(--x-dark-shadow)}._menu-item_1v1kj_2[data-v-295f8cb3]{color:var(--x-text);background-color:var(--x-bg)}._menu-item_1v1kj_2[data-v-295f8cb3]:before{content:"";position:absolute;left:-1px;height:100%;width:1px;background-color:transparent}._menu-item_1v1kj_2[data-v-295f8cb3]:hover{color:var(--x-text-hover, var(--x-text));background-color:var(--x-bg-hover, var(--x-bg))}.dark ._menu-item_1v1kj_2[data-v-295f8cb3]{color:var(--x-dark-text);background:var(--x-dark-bg)}.dark ._menu-item_1v1kj_2[data-v-295f8cb3]:hover{color:var(--x-dark-text-hover, var(--x-dark-text));background-color:var(--x-dark-bg-hover, var(--x-dark-bg))}.x-menu-inner ._menu-item_1v1kj_2[data-v-295f8cb3]:hover:before,.x-menu-inner ._menu-item--active_1v1kj_1[data-v-295f8cb3]:before{background-color:var(--x-border-hover)}._popover_2vipi_2 ._popoverContent_2vipi_3{visibility:hidden;transition-duration:.1s;transition-timing-function:cubic-bezier(.4,0,1,1)}._popover_2vipi_2 ._popoverTop_2vipi_8{--tw-translate-y: .5rem}._popover_2vipi_2 ._popoverRight_2vipi_11{--tw-translate-x: -.5rem}._popover_2vipi_2 ._popoverBottom_2vipi_14{--tw-translate-y: -.25rem}._popover_2vipi_2 ._popoverLeft_2vipi_17{--tw-translate-x: .5rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverContent_2vipi_3,._popover_2vipi_2._is-open_2vipi_22 ._popoverContent_2vipi_3{visibility:visible;transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1)}._popover_2vipi_2._hover_2vipi_21:hover ._popoverTop_2vipi_8,._popover_2vipi_2._is-open_2vipi_22 ._popoverTop_2vipi_8{--tw-translate-y: .25rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverRight_2vipi_11,._popover_2vipi_2._is-open_2vipi_22 ._popoverRight_2vipi_11{--tw-translate-x: 0px}._popover_2vipi_2._hover_2vipi_21:hover ._popoverBottom_2vipi_14,._popover_2vipi_2._is-open_2vipi_22 ._popoverBottom_2vipi_14{--tw-translate-y: .25rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverLeft_2vipi_17,._popover_2vipi_2._is-open_2vipi_22 ._popoverLeft_2vipi_17{--tw-translate-x: 0px}._radio--glow_14rlz_1[data-v-4e34dad2]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-glow),0 4px 6px -4px var(--x-glow)}

package/src/components/table/TableHead.vue

@@ -1,15 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'XTableHead',
-})
-</script>
-
-<template>
-  <thead class="align-bottom">
-    <tr class="text-sm text-gray-600 dark:text-gray-400 border-b">
-      <slot></slot>
-    </tr>
-  </thead>
-</template>

package/src/composables/notification.ts

@@ -1,10 +0,0 @@
-import { inject } from 'vue'
-import { injectNotificationKey } from './keys'
-
-export const useNotification = () => {
-  const notification = inject(injectNotificationKey)
-
-  if (!notification) console.warn('useNotification must have a parent wrapped with Notifications component')
-
-  return notification
-}