@indielayer/ui 1.2.0 → 1.4.0

package/src/components/table/{TableCell.theme.ts → theme/TableCell.base.theme.ts}

@@ -1,14 +1,6 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { TableCellProps } from './TableCell.vue'
+import type { TableCellTheme } from '../TableCell.vue'
 
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<TableCellProps, InternalClasses> {}
-export interface TableCellTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<TableCellProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
+const theme: TableCellTheme = {
   classes: {
     wrapper: ({ props }) => {
       const c = ['last:pr-0 px-3']
@@ -27,7 +19,7 @@ const theme: InternalTheme = {
       else if (props.verticalAlign === 'text-top') c.push('align-text-top')
       else if (props.verticalAlign === 'top') c.push('align-top')
 
-      if (props.truncate && props.fixed) c.push('truncate')
+      if (props.truncate) c.push('truncate')
 
       return c
     },

package/src/components/table/theme/TableCell.carbon.theme.ts

@@ -0,0 +1,29 @@
+import type { TableCellTheme } from '../TableCell.vue'
+
+const theme: TableCellTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const c = ['last:pr-0 px-3']
+
+      c.push(props.dense ? 'py-2' : 'py-4')
+
+      if (props.textAlign === 'left') c.push('text-left')
+      else if (props.textAlign === 'center') c.push('text-center')
+      else if (props.textAlign === 'right') c.push('text-right')
+      else if (props.textAlign === 'justify') c.push('text-justify')
+
+      if (props.verticalAlign === 'baseline') c.push('align-baseline')
+      else if (props.verticalAlign === 'bottom') c.push('align-bottom')
+      else if (props.verticalAlign === 'middle') c.push('align-middle')
+      else if (props.verticalAlign === 'text-bottom') c.push('align-text-bottom')
+      else if (props.verticalAlign === 'text-top') c.push('align-text-top')
+      else if (props.verticalAlign === 'top') c.push('align-top')
+
+      if (props.truncate) c.push('truncate')
+
+      return c
+    },
+  },
+}
+
+export default theme

package/src/components/table/theme/TableHead.base.theme.ts

@@ -0,0 +1,10 @@
+import type { TableHeadTheme } from '../TableHead.vue'
+
+const theme: TableHeadTheme = {
+  classes: {
+    thead: 'align-bottom',
+    row: 'text-sm text-gray-600 dark:text-gray-400 border-b',
+  },
+}
+
+export default theme

package/src/components/table/theme/TableHead.carbon.theme.ts

@@ -0,0 +1,10 @@
+import type { TableHeadTheme } from '../TableHead.vue'
+
+const theme: TableHeadTheme = {
+  classes: {
+    thead: 'align-bottom',
+    row: 'text-gray-900 dark:text-gray-50',
+  },
+}
+
+export default theme

package/src/components/table/theme/TableHeader.base.theme.ts

@@ -0,0 +1,28 @@
+import type { TableHeaderTheme } from '../TableHeader.vue'
+
+const theme: TableHeaderTheme = {
+  classes: {
+    th: ({ props }) => {
+      const classes = ['relative py-2 font-semibold tracking-widest uppercase text-xs px-3']
+
+      if (props.sortable) classes.push('cursor-pointer hover:text-gray-800 dark:hover:text-gray-300 transition-colors duration-150 ease-in-out')
+
+      if (props.stickyHeader) classes.push('sticky top-0')
+
+      if (props.textAlign === 'left') classes.push('text-left')
+      if (props.textAlign === 'right') classes.push('text-right')
+      if (props.textAlign === 'center') classes.push('text-center')
+      if (props.textAlign === 'justify') classes.push('text-justify')
+
+      return classes
+    },
+
+    sortIcon: ({ props }) => {
+      const classes = ['absolute stroke-2 w-3 h-3 top-2.5 right-0.5']
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/table/theme/TableHeader.carbon.theme.ts

@@ -0,0 +1,28 @@
+import type { TableHeaderTheme } from '../TableHeader.vue'
+
+const theme: TableHeaderTheme = {
+  classes: {
+    th: ({ props }) => {
+      const classes = ['relative py-3.5 font-semibold text-sm px-3 bg-gray-200 dark:bg-gray-700 select-none']
+
+      if (props.sortable) classes.push('cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-150 ease-in-out pr-5')
+
+      if (props.stickyHeader) classes.push('sticky top-0')
+
+      if (props.textAlign === 'left') classes.push('text-left')
+      if (props.textAlign === 'right') classes.push('text-right')
+      if (props.textAlign === 'center') classes.push('text-center')
+      if (props.textAlign === 'justify') classes.push('text-justify')
+
+      return classes
+    },
+
+    sortIcon: ({ props }) => {
+      const classes = ['absolute stroke-2 w-4 h-4 top-4 right-2']
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/table/theme/TableRow.base.theme.ts

@@ -0,0 +1,21 @@
+import type { TableRowTheme } from '../TableRow.vue'
+
+const theme: TableRowTheme = {
+  classes: {
+    row: ({ props }) => {
+      const classes = []
+
+      if (props.striped) {
+        classes.push('odd:bg-gray-50 dark:odd:bg-gray-800')
+      } else {
+        classes.push('border-b border-gray-200 dark:border-gray-700')
+      }
+
+      if (props.pointer) classes.push('hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer')
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/table/theme/TableRow.carbon.theme.ts

@@ -0,0 +1,21 @@
+import type { TableRowTheme } from '../TableRow.vue'
+
+const theme: TableRowTheme = {
+  classes: {
+    row: ({ props }) => {
+      const classes = []
+
+      if (props.striped) {
+        classes.push('odd:bg-gray-50 dark:odd:bg-gray-800')
+      } else {
+        classes.push('border-b border-gray-200 dark:border-gray-700')
+      }
+
+      if (props.pointer) classes.push('hover:bg-gray-50 dark:hover:bg-gray-600 cursor-pointer')
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/tag/Tag.vue

@@ -13,6 +13,9 @@ const tagProps = {
 
 export type TagProps = ExtractPublicPropTypes<typeof tagProps>
 
+type InternalClasses = 'wrapper'
+export interface TagTheme extends ThemeComponent<TagProps, InternalClasses> {}
+
 export default {
   name: 'XTag',
   validators: {
@@ -23,15 +26,13 @@ export default {
 
 <script setup lang="ts">
 import { computed, type ExtractPublicPropTypes } from 'vue'
-import { useColors } from '../../composables/colors'
-import { useCommon } from '../../composables/common'
-import { useTheme } from '../../composables/theme'
+import { useColors } from '../../composables/useColors'
+import { useCommon } from '../../composables/useCommon'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { closeIcon } from '../../common/icons'
 
 import XIcon from '../icon/Icon.vue'
 
-import theme from './Tag.theme'
-
 const props = defineProps(tagProps)
 
 defineEmits(['remove'])
@@ -45,19 +46,19 @@ const closeIconSize = computed(() => {
   return 'sm'
 })
 
-const { styles, classes, className } = useTheme('tag', theme, props)
+const { styles, classes, className } = useTheme('Tag', {}, props)
 </script>
 
 <template>
   <component
     :is="tag"
-    class="text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border-[color:var(--x-tag-border)"
+    class="text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border-[color:var(--x-tag-border)] dark:border-[color:var(--x-tag-dark-border)]"
     :style="styles"
     :class="
       [
         className,
         classes.wrapper,
-        outlined ? 'border' : 'bg-[color:var(--x-tag-bg)]',
+        outlined ? 'border' : 'bg-[color:var(--x-tag-bg)] dark:bg-[color:var(--x-tag-dark-bg)]',
         rounded ? 'rounded-full' : 'rounded'
       ]"
   >
@@ -69,7 +70,7 @@ const { styles, classes, className } = useTheme('tag', theme, props)
       <x-icon
         :size="closeIconSize"
         :icon="closeIcon"
-        class="ml-1 cursor-pointer hover:text-gray-700 transition-colors duration-150"
+        class="ml-1.5 cursor-pointer hover:text-gray-700 transition-colors duration-150"
         @click="(e: Event) => $emit('remove', e)"
       />
     </span>

package/src/components/tag/index.ts

@@ -1,2 +1,2 @@
 export { default as XTag } from './Tag.vue'
-export type { TagProps } from './Tag.vue'
+export type { TagProps, TagTheme } from './Tag.vue'

package/src/components/tag/theme/Tag.base.theme.ts

@@ -0,0 +1,34 @@
+import type { TagTheme } from '../Tag.vue'
+
+const theme: TagTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      let c = 'inline-flex items-center leading-none max-w-full'
+
+      if (props.size === 'xs') c += ' px-2 py-1 text-xs'
+      else if (props.size === 'sm') c += ' px-2 py-1 text-sm'
+      else if (props.size === 'lg') c += ' px-4 py-3 text-lg'
+      else if (props.size === 'xl') c += ' px-6 py-6 text-xl'
+      else c += ' px-3 py-2'
+
+      return c
+    },
+  },
+
+  styles: ({ colors, props, css }) => {
+    const color = colors.getPalette(props.color)
+
+    return css.variables({
+      bg: color[200],
+      text: color[800],
+      border: color[800],
+      dark: {
+        bg: color[800],
+        border: color[400],
+        text: props.outlined ? color[200] : color[100],
+      },
+    })
+  },
+}
+
+export default theme

package/src/components/tag/theme/Tag.carbon.theme.ts

@@ -0,0 +1,33 @@
+import type { TagTheme } from '../Tag.vue'
+
+const theme: TagTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      let c = 'inline-flex items-center leading-none max-w-full '
+
+      if (props.size === 'xs' || props.size === 'sm') c += ' px-2 py-0.5 text-xs'
+      else if (props.size === 'lg') c += ' px-4 py-3'
+      else if (props.size === 'xl') c += ' px-5 py-5 text-lg'
+      else c += ' px-3 py-1 text-sm'
+
+      return c
+    },
+  },
+
+  styles: ({ colors, props, css }) => {
+    const color = colors.getPalette(props.color)
+
+    return css.variables({
+      bg: color[200],
+      text: color[800],
+      border: color[800],
+      dark: {
+        bg: color[800],
+        border: color[400],
+        text: props.outlined ? color[200] : color[100],
+      },
+    })
+  },
+}
+
+export default theme

package/src/components/textarea/Textarea.vue

@@ -3,28 +3,31 @@ const textareaProps = {
   ...useCommon.props(),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  helper: String,
-  label: String,
   dir: {
     type: String,
     default: 'ltr',
   },
-  rows: [Number, String],
+  rows: {
+    type: [Number, String],
+    default: 2,
+  },
   max: [Number, String],
   maxlength: [Number, String],
   min: [Number, String],
   minlength: [Number, String],
   placeholder: String,
-  adjustToText: {
-    type: Boolean,
-    default: true,
-  },
+  adjustToText: Boolean,
   preventEnter: Boolean,
   block: Boolean,
 }
 
 export type TextareaProps = ExtractPublicPropTypes<typeof textareaProps>
 
+type InternalClasses = 'wrapper' | 'input'
+type InternalExtraData = { errorInternal: Ref<boolean>; }
+
+export interface TextareaTheme extends ThemeComponent<TextareaProps, InternalClasses, InternalExtraData> {}
+
 export default {
   name: 'XTextarea',
   validators: {
@@ -34,18 +37,17 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, watch, type ExtractPublicPropTypes } from 'vue'
+import { ref, watch, type ExtractPublicPropTypes, type Ref } from 'vue'
 import { useResizeObserver, useEventListener } from '@vueuse/core'
-import { useCSS } from '../../composables/css'
-import { useTheme } from '../../composables/theme'
-import { useCommon } from '../../composables/common'
-import { useColors } from '../../composables/colors'
-import { useInputtable } from '../../composables/inputtable'
-import { useInteractive } from '../../composables/interactive'
-
-import XInputError from '../helpers/InputError'
+import { useCSS } from '../../composables/useCSS'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useCommon } from '../../composables/useCommon'
+import { useColors } from '../../composables/useColors'
+import { useInputtable } from '../../composables/useInputtable'
+import { useInteractive } from '../../composables/useInteractive'
 
-import theme from './Textarea.theme'
+import XLabel from '../label/Label.vue'
+import XInputFooter from '../inputFooter/InputFooter.vue'
 
 const props = defineProps(textareaProps)
 
@@ -87,6 +89,7 @@ const { focus, blur } = useInteractive(elRef)
 
 const {
   errorInternal,
+  hideFooterInternal,
   isInsideForm,
   inputListeners,
   reset,
@@ -94,28 +97,26 @@ const {
   setError,
 } = useInputtable(props, { focus, emit })
 
-const { styles, classes, className } = useTheme('textarea', theme, props, { errorInternal })
+const { styles, classes, className } = useTheme('Textarea', {}, props, { errorInternal })
 
 defineExpose({ focus, blur, reset, validate, setError })
 </script>
 
 <template>
-  <label
+  <x-label
     :style="styles"
-    class="relative"
+    :block="block"
+    :disabled="disabled"
+    :required="required"
+    :is-inside-form="isInsideForm"
+    :label="label"
     :class="[
       className,
       classes.wrapper,
-      { 'mb-3': isInsideForm, 'w-full': block }
     ]"
   >
-    <p
-      v-if="label"
-      :class="classes.label"
-      v-text="label"
-    ></p>
-
     <textarea
+      :id="id"
       ref="elRef"
       class=""
       :style="style"
@@ -141,6 +142,6 @@ defineExpose({ focus, blur, reset, validate, setError })
       @input="onInput"
     ></textarea>
 
-    <x-input-error :error="errorInternal" :helper="helper"/>
-  </label>
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
+  </x-label>
 </template>

package/src/components/textarea/index.ts

@@ -1,2 +1,2 @@
 export { default as XTextarea } from './Textarea.vue'
-export type { TextareaProps } from './Textarea.vue'
+export type { TextareaProps, TextareaTheme } from './Textarea.vue'

package/src/components/textarea/theme/Textarea.base.theme.ts

@@ -0,0 +1,27 @@
+import type { TextareaTheme } from '../Textarea.vue'
+
+const theme: TextareaTheme = {
+  classes: {
+    wrapper: '',
+
+    input: ({ props, data }) => {
+      const classes = ['resize-none appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-gray-300 dark:border-gray-700 border shadow-sm rounded-md']
+
+      if (!data.errorInternal && !props.disabled) classes.push('hover:border-gray-400 dark:hover:border-gray-500')
+
+      if (props.size === 'xs') classes.push('px-2 py-1 text-xs')
+      else if (props.size === 'sm') classes.push('px-2 py-2 text-sm')
+      else if (props.size === 'lg') classes.push('px-4 py-3 text-lg')
+      else if (props.size === 'xl') classes.push('px-5 py-4 text-xl')
+      else classes.push('px-3 py-2')
+
+      classes.push(props.disabled
+        ? 'bg-gray-100 dark:bg-gray-900 text-gray-500 cursor-not-allowed'
+        : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200')
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/textarea/theme/Textarea.carbon.theme.ts

@@ -0,0 +1,29 @@
+import type { TextareaTheme } from '../Textarea.vue'
+
+const theme: TextareaTheme = {
+  classes: {
+    wrapper: '',
+
+    input: ({ props, data }) => {
+      const classes = ['resize-none appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-gray-300 dark:border-gray-700 border-b text-sm px-4']
+
+      if (!data.errorInternal && !props.disabled) classes.push('hover:border-gray-400 dark:hover:border-gray-500')
+
+      if (props.size === 'xs' || props.size === 'sm') classes.push('py-1.5')
+      else if (props.size === 'lg' || props.size === 'xl') classes.push('py-3.5')
+      else classes.push('py-2.5')
+
+      if (props.disabled) {
+        classes.push('bg-gray-100 dark:bg-gray-900 text-gray-300 cursor-not-allowed')
+      } else if (props.readonly) {
+        classes.push('bg-white dark:bg-gray-900 text-gray-700')
+      } else {
+        classes.push('bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200')
+      }
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/themeProvider/ThemeProvider.vue

@@ -0,0 +1,28 @@
+<script lang="ts">
+export default { name: 'XThemeProvider' }
+</script>
+
+<script setup lang="ts">
+import { watchEffect, ref, inject, provide, type PropType, unref } from 'vue'
+import { injectThemeKey } from '../../composables/keys'
+import { injectThemeStyles, type UITheme } from '../../theme'
+
+const props = defineProps({
+  theme: Object as PropType<UITheme>,
+})
+
+const initialTheme = inject(injectThemeKey, {})
+const theme = ref<UITheme>(props.theme || unref(initialTheme) || {})
+
+provide(injectThemeKey, theme)
+
+watchEffect(() => {
+  theme.value = props.theme || unref(initialTheme) || {}
+
+  if (theme.value.styles) injectThemeStyles(theme.value.name || '', theme.value.styles)
+})
+</script>
+
+<template>
+  <slot></slot>
+</template>

package/src/components/themeProvider/index.ts

@@ -0,0 +1 @@
+export { default as XThemeProvider } from './ThemeProvider.vue'

package/src/components/toggle/Toggle.vue

@@ -4,14 +4,14 @@ const toggleProps = {
   ...useColors.props('primary'),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  id: String,
-  label: String,
-  helper: String,
   glow: Boolean,
 }
 
 export type ToggleProps = ExtractPublicPropTypes<typeof toggleProps>
 
+type InternalClasses = 'wrapper' | 'label' | 'buttonWrapper' | 'button'
+export interface ToggleTheme extends ThemeComponent<ToggleProps, InternalClasses> {}
+
 export default {
   name: 'XToggle',
   validators: {
@@ -22,16 +22,14 @@ export default {
 
 <script setup lang="ts">
 import { computed, ref, type ExtractPublicPropTypes } from 'vue'
-import { useTheme } from '../../composables/theme'
-import { useCommon } from '../../composables/common'
-import { useColors } from '../../composables/colors'
-import { useInputtable } from '../../composables/inputtable'
-import { useInteractive } from '../../composables/interactive'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useCommon } from '../../composables/useCommon'
+import { useColors } from '../../composables/useColors'
+import { useInputtable } from '../../composables/useInputtable'
+import { useInteractive } from '../../composables/useInteractive'
 
 import XSpinner from '../../components/spinner/Spinner.vue'
-import XInputError from '../helpers/InputError'
-
-import theme from './Toggle.theme'
+import XInputFooter from '../inputFooter/InputFooter.vue'
 
 const props = defineProps(toggleProps)
 
@@ -52,12 +50,13 @@ const { focus, blur } = useInteractive(elRef)
 
 const {
   errorInternal,
+  hideFooterInternal,
   reset,
   validate,
   setError,
 } = useInputtable(props, { focus, emit, withListeners: false })
 
-const { styles, classes, className } = useTheme('toggle', theme, props)
+const { styles, classes, className } = useTheme('Toggle', {}, props)
 
 defineExpose({ focus, blur, reset, validate, setError })
 </script>
@@ -73,7 +72,7 @@ defineExpose({ focus, blur, reset, validate, setError })
   >
     <div class="flex items-center">
       <div
-        class="flex items-center rounded-full transition-colors duration-300 border-[3px] shrink-0 border-transparent"
+        class="flex items-center rounded-full transition-colors duration-300 border-[3px] shrink-0 !border-transparent"
         :style="styles"
         :class="{
           [`shadow-lg shadow-${color}-500/50`]: glow && modelValue,
@@ -118,6 +117,6 @@ defineExpose({ focus, blur, reset, validate, setError })
       <x-spinner v-if="loading" :size="size" class="ml-1" />
     </div>
 
-    <x-input-error :error="errorInternal" :helper="helper"/>
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
   </label>
 </template>

package/src/components/toggle/index.ts

@@ -1,2 +1,2 @@
 export { default as XToggle } from './Toggle.vue'
-export type { ToggleProps } from './Toggle.vue'
+export type { ToggleProps, ToggleTheme } from './Toggle.vue'

package/src/components/toggle/{Toggle.theme.ts → theme/Toggle.base.theme.ts}

@@ -1,14 +1,6 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { ToggleProps } from './Toggle.vue'
+import type { ToggleTheme } from '../Toggle.vue'
 
-type InternalClasses = 'wrapper' | 'label' | 'buttonWrapper' | 'button'
-
-interface InternalTheme extends ThemeComponent<ToggleProps, InternalClasses> {}
-export interface ToggleTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<ToggleProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
+const theme: ToggleTheme = {
   classes: {
     wrapper: '',
 

package/src/components/toggle/theme/Toggle.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { ToggleTheme } from '../Toggle.vue'
+
+import BaseTheme from './Toggle.base.theme'
+
+const theme: ToggleTheme = BaseTheme
+
+export default theme

package/src/components/tooltip/Tooltip.vue

@@ -13,7 +13,7 @@ import XPopoverContainer from '../../components/popover/PopoverContainer.vue'
 </script>
 
 <template>
-  <x-popover hover>
+  <x-popover :triggers="['hover']" class="inline-block">
     <slot></slot>
     <template #content>
       <div class="dark">

package/src/composables/index.ts

@@ -1,7 +1,7 @@
 export * from './keys'
-export * from './common'
-export * from './colors'
-export * from './css'
-export * from './inputtable'
-export * from './interactive'
-export * from './notifications'
+export * from './useCommon'
+export * from './useColors'
+export * from './useCSS'
+export * from './useInputtable'
+export * from './useInteractive'
+export * from './useNotifications'