@indielayer/ui 1.2.0 → 1.4.0

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']

package/src/components/button/theme/Button.carbon.theme.ts

@@ -0,0 +1,237 @@
+import type { ButtonTheme } from '../Button.vue'
+
+const theme: ButtonTheme = {
+  classes: {
+    wrapper({ props, slots, data }) {
+      const classes = ['relative transition duration-150 inline-flex whitespace-nowrap overflow-hidden align-top appearance-none text-sm active:shadow-none border !leading-[1.28572] tracking-wide font-light']
+
+      // radius
+      if (!data.isButtonGroup) classes.push(props.rounded ? 'rounded-full' : '')
+      else classes.push('!rounded-none')
+
+      // size
+      if (slots.default) {
+        classes.push('min-w-[8rem] px-4 py-3.5 items-start justify-between')
+        if (props.size === 'xs') classes.push('min-h-[2rem]')
+        else if (props.size === 'sm') classes.push('min-h-[2.5rem]')
+        else if (props.size === 'lg') classes.push('min-h-[4rem]')
+        else if (props.size === 'xl') classes.push('min-h-[5rem]')
+        else classes.push('min-h-[3rem]')
+      } else {
+        classes.push('items-center justify-center')
+        if (props.size === 'xs') classes.push('h-6 w-6')
+        else if (props.size === 'sm') classes.push('h-8 w-8')
+        else if (props.size === 'lg') classes.push('h-12 w-12')
+        else if (props.size === 'xl') classes.push('h-16 w-16')
+        else classes.push('h-10 w-10')
+      }
+
+      // cursor
+      if (props.disabled) classes.push('cursor-not-allowed')
+      else if (props.loading) classes.push('cursor-default')
+      else classes.push('cursor-pointer')
+
+      return classes
+    },
+
+    iconLeft: ({ slots }) => slots.default ? 'mr-2' : 'm-0.5',
+
+    iconRight: ({ slots }) => slots.default ? 'ml-2' : 'm-0.5',
+  },
+
+  styles({ props, colors, css, data }) {
+    const gray = colors.getPalette('gray')
+    const color = props.color ? colors.getPalette(props.color) : gray
+    const vars = []
+
+    const isLight = props.color && props.light
+    const isDefault = !props.color && !props.ghost
+
+    if (props.glow) vars.push(css.get('glow', colors.getColorOpacity(props.color ? color[500] : gray[500], 0.5)))
+
+    if (isDefault) {
+      if (props.disabled) {
+        vars.push(css.variables({
+          bg: gray[50],
+          text: gray[300],
+          border: gray[200],
+          dark: {
+            bg: gray[900],
+            text: gray[600],
+            border: gray[700],
+          },
+        }))
+      } else {
+        vars.push(css.variables({
+          bg: 'white',
+          text: gray[800],
+          border: gray[300],
+          hover: { bg: !props.loading ? gray[100] : '' },
+          active: { bg: !props.loading ? gray[200] : '' },
+          dark: {
+            bg: gray[800],
+            text: 'white',
+            border: gray[700],
+            hover: { bg: !props.loading ? gray[700] : '', border: gray[600] },
+            active: { bg: !props.loading ? gray[600] : '', border: gray[500] },
+          },
+        }))
+      }
+    } else if (isLight) {
+      // light
+      if (!props.outlined || props.disabled) vars.push(css.get('border', 'transparent'))
+
+      if (props.disabled) {
+        vars.push(css.variables({
+          bg: color[50],
+          text: color[200],
+          border: 'transparent',
+          dark: {
+            bg: gray[800],
+            text: color[900],
+            border: 'transparent',
+          },
+        }))
+      } else {
+        vars.push(css.variables({
+          bg: color[50],
+          text: color[600],
+          border: props.outlined ? color[500] : 'transparent',
+          hover: { bg: !props.loading ? color[100] : '' },
+          active: { bg: !props.loading ? color[200] : '' },
+          dark: {
+            bg: color[900],
+            text: color[200],
+            border: props.outlined ? color[500] : 'transparent',
+            hover: { bg: !props.loading ? color[800] : '' },
+            active: { bg: !props.loading ? color[700] : '' },
+          },
+        }))
+      }
+    } else if (props.ghost) {
+      // ghost
+      if (!props.outlined) vars.push(css.get('border', 'transparent'))
+
+      if (props.color) {
+        if (props.disabled) {
+          vars.push(css.variables({
+            text: color[200],
+            dark: {
+              text: color[700],
+            },
+          }))
+        } else {
+          vars.push(css.variables({
+            text: color[600],
+            dark: {
+              text: color[500],
+            },
+          }))
+          if (!props.loading) {
+            vars.push(css.variables({
+              hover: { bg: color[50] },
+              active: { bg: color[100] },
+              dark: {
+                hover: { bg: gray[800] },
+                active: { bg: gray[700] },
+              },
+            }))
+          }
+        }
+      } else {
+        if (props.disabled) {
+          vars.push(css.variables({
+            text: gray[200],
+            dark: {
+              text: gray[700],
+            },
+          }))
+        } else {
+          vars.push(css.variables({
+            text: gray[800],
+            dark: {
+              text: 'white',
+            },
+          }))
+          if (!props.loading) {
+            vars.push(css.variables({
+              hover: { bg: gray[100] },
+              active: { bg: gray[200] },
+              dark: {
+                hover: { bg: gray[800] },
+                active: { bg: gray[700] },
+              },
+            }))
+          }
+        }
+      }
+    } else {
+      // outlined
+      if (props.outlined) {
+        if (props.disabled) {
+          vars.push(css.variables({
+            text: color[200],
+            border: color[200],
+            dark: {
+              text: color[700],
+              border: color[700],
+            },
+          }))
+        } else {
+          vars.push(css.variables({
+            text: color[600],
+            border: color[600],
+            dark: {
+              text: color[500],
+              border: color[500],
+            },
+          }))
+          if (!props.loading) {
+            vars.push(css.variables({
+              hover: { bg: color[100] },
+              active: { bg: color[200] },
+              dark: {
+                hover: { bg: gray[800] },
+                active: { bg: gray[700] },
+              },
+            }))
+          }
+        }
+      } else {
+        // filled
+        vars.push(css.variables({
+          text: '#fff',
+          border: !data.isButtonGroup ? 'transparent' : color[600],
+          dark: {
+            text: '#fff',
+            border: !data.isButtonGroup ? 'transparent' : color[500],
+          },
+        }))
+        if (props.disabled) {
+          vars.push(css.variables({
+            bg: color[200],
+            dark: {
+              text: color[700],
+              bg: color[900],
+            },
+          }))
+        } else {
+          vars.push(css.variables({
+            bg: color[500],
+            hover: { bg: !props.loading ? color[600] : '' },
+            active: { bg: !props.loading ? color[800] : '' },
+            dark: {
+              bg: color[600],
+              hover: { bg: !props.loading ? color[700] : '' },
+              active: { bg: !props.loading ? color[800] : '' },
+            },
+          }))
+        }
+      }
+    }
+
+    return vars
+  },
+}
+
+export default theme

package/src/components/button/theme/ButtonGroup.base.theme.ts

@@ -0,0 +1,9 @@
+import type { ButtonGroupTheme } from '../ButtonGroup.vue'
+
+const theme: ButtonGroupTheme = {
+  classes: {
+    wrapper: 'inline-flex align-middle relative -space-x-[1px]',
+  },
+}
+
+export default theme

package/src/components/button/theme/ButtonGroup.carbon.theme.ts

@@ -0,0 +1,9 @@
+import type { ButtonGroupTheme } from '../ButtonGroup.vue'
+
+const theme: ButtonGroupTheme = {
+  classes: {
+    wrapper: 'inline-flex align-middle relative gap-[1px]',
+  },
+}
+
+export default theme