@indielayer/ui 1.2.0 → 1.3.0

package/src/common/utils.ts

@@ -1,15 +1,14 @@
-/* eslint-disable @typescript-eslint/ban-types */
 import { unref, isRef } from 'vue'
 
 export const isObject = (val: unknown): val is object => val !== null && typeof val === 'object'
 export const isArray = (val: unknown): val is [] => Array.isArray(val)
+// eslint-disable-next-line @typescript-eslint/ban-types
 export const isFunction = (val: unknown): val is Function => typeof val === 'function'
 
 /**
  * Deeply unref a value, recursing into objects and arrays.
  *
  * @param {Mixed} val - The value to deeply unref.
- *
  * @return {Mixed}
  */
 export const deepUnref = (val: any) => {
@@ -30,7 +29,6 @@ export const deepUnref = (val: any) => {
  * Unref a value, recursing into it if it's an object.
  *
  * @param {Mixed} val - The value to unref.
- *
  * @return {Mixed}
  */
 export const smartUnref = (val: any) => {
@@ -46,7 +44,6 @@ export const smartUnref = (val: any) => {
  * Unref an array, recursively.
  *
  * @param {Array} arr - The array to unref.
- *
  * @return {Array}
  */
 export const unrefArray: any = (arr: []) => arr.map(smartUnref)
@@ -55,7 +52,6 @@ export const unrefArray: any = (arr: []) => arr.map(smartUnref)
  * Unref an object, recursively.
  *
  * @param {Object} obj - The object to unref.
- *
  * @return {Object}
  */
 export const unrefObject = (obj: any) => {
@@ -69,6 +65,12 @@ export const unrefObject = (obj: any) => {
   return unreffed
 }
 
+/**
+ * Merge two objects, deeply.
+ * @param {Object} source - The source object.
+ * @param {Object} target - The target object.
+ * @return {Object}
+ */
 export const mergeRightDeep = (source: any = {}, target: any = {}) => {
   const sourceKeys = Object.keys(source)
   const targetKeys = Object.keys(target)

package/src/components/alert/Alert.vue

@@ -13,6 +13,9 @@ const alertProps = {
 export type AlertType = typeof alertType[number]
 export type AlertProps = ExtractPublicPropTypes<typeof alertProps>
 
+type InternalClasses = 'wrapper'
+export interface AlertTheme extends ThemeComponent<AlertProps, InternalClasses> {}
+
 export default {
   name: 'XAlert',
   validators: {
@@ -23,14 +26,12 @@ export default {
 
 <script setup lang="ts">
 import { computed, type ExtractPublicPropTypes, type PropType } from 'vue'
-import { useColors } from '../../composables/colors'
-import { useTheme } from '../../composables/theme'
+import { useColors } from '../../composables/useColors'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { closeIcon, successIcon, errorIcon, warningIcon, infoIcon } from '../../common/icons'
 
 import XIcon from '../icon/Icon.vue'
 
-import theme from './Alert.theme'
-
 const props = defineProps(alertProps)
 
 defineEmits(['remove'])
@@ -44,7 +45,7 @@ const icon = computed(() => {
   return ''
 })
 
-const { styles, classes, className } = useTheme('alert', theme, props)
+const { styles, classes, className } = useTheme('Alert', {}, props)
 </script>
 
 <template>
@@ -69,7 +70,6 @@ const { styles, classes, className } = useTheme('alert', theme, props)
     <div>
       <slot></slot>
     </div>
-
     <template v-if="removable">
       <div class="flex-grow"></div>
       <button class="shrink-0" :aria-label="closeLabel" @click="(e: Event) => $emit('remove', e)">

package/src/components/alert/__tests__/Alert.spec.ts

@@ -7,8 +7,5 @@ describe('Alert', () => {
     const wrapper = mount(Alert)
 
     expect(wrapper.vm).toBeTruthy()
-    // expect(wrapper.isVueInstance()).toBeTruthy()
-
-    // expect(wrapper.text()).toContain('Hi there!')
   })
 })

package/src/components/alert/index.ts

@@ -1,3 +1,2 @@
 export { default as XAlert } from './Alert.vue'
-export type { AlertProps, AlertType } from './Alert.vue'
-export type { AlertTheme } from './Alert.theme'
+export type { AlertProps, AlertType, AlertTheme } from './Alert.vue'

package/src/components/alert/{Alert.theme.ts → theme/Alert.base.theme.ts}

@@ -1,14 +1,6 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { AlertProps } from './Alert.vue'
+import type { AlertTheme } from '../Alert.vue'
 
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<AlertProps, InternalClasses> {}
-export interface AlertTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<AlertProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
+const theme: AlertTheme = {
   classes: {
     wrapper: 'flex items-center rounded-md space-x-2 px-4 py-2 border',
   },

package/src/components/alert/theme/Alert.carbon.theme.ts

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

package/src/components/avatar/Avatar.vue

@@ -15,6 +15,10 @@ const avatarProps = {
 
 export type AvatarProps = ExtractPublicPropTypes<typeof avatarProps>
 
+type InternalClasses = 'wrapper'
+type InternalExtraData = { source: Ref<string | undefined>; }
+export interface AvatarTheme extends ThemeComponent<AvatarProps, InternalClasses, InternalExtraData> {}
+
 export default {
   name: 'XAvatar',
   validators: useCommon.validators(),
@@ -22,16 +26,14 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, watch, type ExtractPublicPropTypes } from 'vue'
-import { useCommon } from '../../composables/common'
-import { useColors } from '../../composables/colors'
-import { useTheme } from '../../composables/theme'
+import { computed, ref, watch, type ExtractPublicPropTypes, type Ref } from 'vue'
+import { useCommon } from '../../composables/useCommon'
+import { useColors } from '../../composables/useColors'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { avatarIcon } from '../../common/icons'
 
 import XIcon from '../../components/icon/Icon.vue'
 
-import theme from './Avatar.theme'
-
 const props = defineProps(avatarProps)
 
 const source = ref<string>()
@@ -59,7 +61,7 @@ if (typeof window !== 'undefined' && Image) {
   })
 }
 
-const { styles, classes, className } = useTheme('avatar', theme, props, { source })
+const { styles, classes, className } = useTheme('Avatar', {}, props, { source })
 </script>
 
 <template>

package/src/components/avatar/index.ts

@@ -1,3 +1,2 @@
 export { default as XAvatar } from './Avatar.vue'
-export type { AvatarProps } from './Avatar.vue'
-export type { AvatarTheme } from './Avatar.theme'
+export type { AvatarProps, AvatarTheme } from './Avatar.vue'

package/src/components/avatar/{Avatar.theme.ts → theme/Avatar.base.theme.ts}

@@ -1,16 +1,6 @@
-import type { Ref } from 'vue'
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { AvatarProps } from './Avatar.vue'
+import type { AvatarTheme } from '../Avatar.vue'
 
-type InternalClasses = 'wrapper'
-type InternalExtraData = { source: Ref<string | undefined>; }
-
-interface InternalTheme extends ThemeComponent<AvatarProps, InternalClasses, InternalExtraData> {}
-export interface AvatarTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<AvatarProps, InternalClasses, InternalExtraData>>;
-}
-
-const theme: InternalTheme = {
+const theme: AvatarTheme = {
   classes: {
     wrapper({ props }) {
       const classes = ['relative inline-flex items-center justify-center overflow-hidden align-middle border box-content']

package/src/components/avatar/theme/Avatar.carbon.theme.ts

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

package/src/components/badge/Badge.vue

@@ -31,6 +31,9 @@ export type BadgePosition = typeof badgePosition[number]
 export type BadgeAlign = typeof badgeAlign[number]
 export type BadgeProps = ExtractPublicPropTypes<typeof badgeProps>
 
+type InternalClasses = 'wrapper'
+export interface BadgeTheme extends ThemeComponent<BadgeProps, InternalClasses> {}
+
 export default {
   name: 'XBadge',
   validators: {
@@ -43,11 +46,9 @@ export default {
 
 <script setup lang="ts">
 import { computed, useSlots, type PropType, type ExtractPublicPropTypes } from 'vue'
-import { useTheme } from '../../composables/theme'
-import { useCommon } from '../../composables/common'
-import { useColors } from '../../composables/colors'
-
-import theme from './Badge.theme'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useCommon } from '../../composables/useCommon'
+import { useColors } from '../../composables/useColors'
 
 const props = defineProps(badgeProps)
 
@@ -79,7 +80,7 @@ const offsetStyle = computed(() => {
   return style
 })
 
-const { styles, classes, className } = useTheme('badge', theme, props)
+const { styles, classes, className } = useTheme('Badge', {}, props)
 </script>
 
 <template>

package/src/components/badge/index.ts

@@ -1,3 +1,2 @@
 export { default as XBadge } from './Badge.vue'
-export type { BadgeProps, BadgeAlign, BadgePosition } from './Badge.vue'
-export type { BadgeTheme } from './Badge.theme'
+export type { BadgeProps, BadgeAlign, BadgePosition, BadgeTheme } from './Badge.vue'

package/src/components/badge/theme/Badge.base.theme.ts

@@ -0,0 +1,15 @@
+import type { BadgeTheme } from '../Badge.vue'
+
+const theme: BadgeTheme = {
+  classes: {
+    wrapper: 'inline-block',
+  },
+
+  styles({ props, colors, css }) {
+    const color = colors.getPalette(props.color)
+
+    return css.get('bg', color[500])
+  },
+}
+
+export default theme

package/src/components/badge/theme/Badge.carbon.theme.ts

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

package/src/components/breadcrumbs/Breadcrumbs.vue

@@ -2,10 +2,11 @@
 const breadcrumbsProps = {
   ...useColors.props(),
   items: Array as PropType<BreadcrumbsItem[]>,
-  icon: {
+  separator: {
     type: String,
-    default: arrowRightIcon,
+    default: '/',
   },
+  icon: String,
   shadow: Boolean,
   underline: Boolean,
 }
@@ -21,25 +22,23 @@ export type BreadcrumbsItem = {
 }
 export type BreadcrumbsProps = ExtractPublicPropTypes<typeof breadcrumbsProps>
 
+type InternalClasses = 'wrapper' | 'item' | 'separator'
+export interface BreadcrumbsTheme extends ThemeComponent<BreadcrumbsProps, InternalClasses> {}
+
 export default { name: 'XBreadcrumbs' }
 </script>
 
 <script setup lang="ts">
-import { computed, type ExtractPublicPropTypes, type PropType } from 'vue'
-import { useTheme } from '../../composables/theme'
-import { arrowRightIcon } from '../../common/icons'
-import { useColors } from '../../composables/colors'
+import { type ExtractPublicPropTypes, type PropType } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useColors } from '../../composables/useColors'
 
 import XIcon from '../../components/icon/Icon.vue'
 import XLink from '../../components/link/Link.vue'
 
-import theme from './Breadcrumbs.theme'
-
 const props = defineProps(breadcrumbsProps)
 
-const lastItem = computed(() => props.items && props.items.length > 0 ? props.items[props.items.length - 1] : undefined)
-
-const { styles, classes, className } = useTheme('breadcrumbs', theme, props)
+const { styles, classes, className } = useTheme('Breadcrumbs', {}, props)
 </script>
 
 <template>
@@ -50,7 +49,7 @@ const { styles, classes, className } = useTheme('breadcrumbs', theme, props)
     :style="styles"
   >
     <ul :class="classes.wrapper">
-      <li v-for="(item, index) in items?.slice(0,-1)" :key="index" :class="classes.item">
+      <li v-for="(item, index) in items" :key="index" :class="classes.item">
         <x-link
           :to="item.to"
           :href="item.href"
@@ -62,11 +61,14 @@ const { styles, classes, className } = useTheme('breadcrumbs', theme, props)
           <x-icon v-if="item.icon" :icon="item.icon" class="mr-1.5"/>
           {{ item.label }}
         </x-link>
-        <x-icon :icon="icon" class="text-gray-400 mx-1.5" size="sm" />
-      </li>
-      <li v-if="lastItem" :class="classes.lastItem">
-        <x-icon v-if="lastItem.icon" :icon="lastItem.icon" class="mr-1"/>
-        {{ lastItem.label }}
+        <div v-if="index !== items.length - 1" :class="classes.separator">
+          <x-icon
+            v-if="icon"
+            :icon="icon"
+            size="sm"
+          />
+          <span v-else-if="separator">{{ separator }}</span>
+        </div>
       </li>
     </ul>
   </nav>

package/src/components/breadcrumbs/index.ts

@@ -1,3 +1,2 @@
 export { default as XBreadcrumbs } from './Breadcrumbs.vue'
-export type { BreadcrumbsProps, BreadcrumbsItem } from './Breadcrumbs.vue'
-export type { BreadcrumbsTheme } from './Breadcrumbs.theme'
+export type { BreadcrumbsProps, BreadcrumbsItem, BreadcrumbsTheme } from './Breadcrumbs.vue'

package/src/components/breadcrumbs/theme/Breadcrumbs.base.theme.ts

@@ -0,0 +1,11 @@
+import type { BreadcrumbsTheme } from '../Breadcrumbs.vue'
+
+const theme: BreadcrumbsTheme = {
+  classes: {
+    wrapper: 'flex items-center flex-wrap',
+    item: 'flex items-center last-of-type:font-semibold',
+    separator: 'text-gray-400 mx-1.5',
+  },
+}
+
+export default theme

package/src/components/breadcrumbs/theme/Breadcrumbs.carbon.theme.ts

@@ -0,0 +1,12 @@
+import type { BreadcrumbsTheme } from '../Breadcrumbs.vue'
+
+import BaseTheme from './Breadcrumbs.base.theme'
+
+const theme: BreadcrumbsTheme = {
+  classes: {
+    ...BaseTheme.classes,
+    wrapper: 'flex items-center flex-wrap text-sm',
+  },
+}
+
+export default theme

package/src/components/button/Button.vue

@@ -26,6 +26,10 @@ const buttonProps = {
 
 export type ButtonProps = ExtractPublicPropTypes<typeof buttonProps>
 
+type InternalClasses = 'wrapper' | 'iconLeft' | 'iconRight'
+type InternalExtraData = { isButtonGroup: boolean; }
+export interface ButtonTheme extends ThemeComponent<ButtonProps, InternalClasses, InternalExtraData> {}
+
 export default {
   name: 'XButton',
   validators: {
@@ -36,17 +40,15 @@ export default {
 
 <script setup lang="ts">
 import { computed, ref, inject, useAttrs, unref, type ExtractPublicPropTypes } from 'vue'
-import { useTheme } from '../../composables/theme'
-import { useColors } from '../../composables/colors'
-import { useCommon } from '../../composables/common'
-import { useInteractive } from '../../composables/interactive'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useColors } from '../../composables/useColors'
+import { useCommon } from '../../composables/useCommon'
+import { useInteractive } from '../../composables/useInteractive'
 import { injectButtonGroupKey } from '../../composables/keys'
 
-import XSpinner from '../spinner/Spinner.vue'
+import XLoader from '../loader/Loader.vue'
 import XIcon from '../icon/Icon.vue'
 
-import theme from './Button.theme'
-
 const props = defineProps(buttonProps)
 
 const elRef = ref<HTMLElement | null>(null)
@@ -86,7 +88,7 @@ const computedProps = computed(() => ({
   rounded: props.rounded,
 }))
 
-const { className, classes, styles } = useTheme('button', theme, computedProps, {
+const { className, classes, styles } = useTheme('Button', {}, computedProps, {
   isButtonGroup,
 })
 
@@ -113,19 +115,26 @@ defineExpose({ focus, blur })
     :disabled="computedDisabled || loading"
     :type="tag === 'button' ? type : null"
   >
-    <x-spinner v-if="loading" :size="computedSize" class="absolute" />
-    <x-icon
-      v-if="computedIconLeft"
+    <x-loader
+      v-if="loading"
+      class="absolute"
       :size="computedSize"
-      :icon="computedIconLeft"
-      :class="[
-        classes.iconLeft,
-        { 'invisible': loading },
-      ]"
+      :label="loadingLabel"
+      :status="loadingStatus"
     />
-    <span :class="{ 'invisible': loading }">
-      <slot></slot>
-    </span>
+    <div :class="{ 'invisible': loading }">
+      <x-icon
+        v-if="computedIconLeft"
+        :size="computedSize"
+        :icon="computedIconLeft"
+        :class="[
+          classes.iconLeft,
+        ]"
+      />
+      <span>
+        <slot></slot>
+      </span>
+    </div>
     <x-icon
       v-if="iconRight"
       :size="computedSize"

package/src/components/button/ButtonGroup.vue

@@ -20,6 +20,10 @@ export type ButtonGroupInjection = {
   isButtonGroup: boolean;
 }
 
+type InternalClasses = 'wrapper'
+type InternalExtraData = { isButtonGroupGroup: boolean; }
+export interface ButtonGroupTheme extends ThemeComponent<ButtonGroupProps, InternalClasses, InternalExtraData> {}
+
 export default {
   name: 'XButtonGroup',
   validators: {
@@ -30,14 +34,12 @@ export default {
 
 <script setup lang="ts">
 import { provide, type ExtractPublicPropTypes } from 'vue'
-import { useTheme } from '../../composables/theme'
-import { useCommon } from '../../composables/common'
-import { useColors } from '../../composables/colors'
-import { useInteractive } from '../../composables/interactive'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useCommon } from '../../composables/useCommon'
+import { useColors } from '../../composables/useColors'
+import { useInteractive } from '../../composables/useInteractive'
 import { injectButtonGroupKey } from '../../composables/keys'
 
-import theme from './ButtonGroup.theme'
-
 const props = defineProps(buttonGroupProps)
 
 provide(injectButtonGroupKey, {
@@ -45,7 +47,7 @@ provide(injectButtonGroupKey, {
   isButtonGroup: true,
 })
 
-const { className, classes, styles } = useTheme('button-group', theme, props)
+const { className, classes, styles } = useTheme('ButtonGroup', {}, props)
 </script>
 
 <template>

package/src/components/button/index.ts

@@ -1,7 +1,5 @@
 export { default as XButton } from './Button.vue'
-export type { ButtonProps } from './Button.vue'
-export type { ButtonTheme } from './Button.theme'
+export type { ButtonProps, ButtonTheme } from './Button.vue'
 
 export { default as XButtonGroup } from './ButtonGroup.vue'
-export type { ButtonGroupProps, ButtonGroupInjection } from './ButtonGroup.vue'
-export type { ButtonGroupTheme } from './ButtonGroup.theme'
+export type { ButtonGroupProps, ButtonGroupInjection, ButtonGroupTheme } from './ButtonGroup.vue'

package/src/components/button/{Button.theme.ts → theme/Button.base.theme.ts}

@@ -1,15 +1,6 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { ButtonProps } from './Button.vue'
+import type { ButtonTheme } from '../Button.vue'
 
-type InternalClasses = 'wrapper' | 'iconLeft' | 'iconRight'
-type InternalExtraData = { isButtonGroup: boolean; }
-
-interface InternalTheme extends ThemeComponent<ButtonProps, InternalClasses, InternalExtraData> {}
-export interface ButtonTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<ButtonProps, InternalClasses, InternalExtraData>>;
-}
-
-const theme: InternalTheme = {
+const theme: ButtonTheme = {
   classes: {
     wrapper({ props, slots, data }) {
       const classes = ['relative transition duration-150 focus:outline-none inline-flex items-center justify-center font-medium whitespace-nowrap overflow-hidden align-middle active:!shadow-none border appearance-none']