@indielayer/ui 1.0.0-alpha.9 → 1.0.0

package/src/components/avatar/Avatar.vue

@@ -1,137 +1,99 @@
 <script lang="ts">
-import { computed, defineComponent, ref, watch } from 'vue'
+export default {
+  name: 'XAvatar',
+  validators: useCommon.validators(),
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
 import { useCommon } from '../../composables/common'
 import { useColors } from '../../composables/colors'
-import { useCSS } from '../../composables/css'
+import { useTheme } from '../../composables/theme'
+import { avatarIcon } from '../../common/icons'
 
 import XIcon from '../../components/icon/Icon.vue'
 
-export default defineComponent({
-  name: 'XAvatar',
-
-  components: {
-    XIcon,
-  },
-
-  validators: {
-    ...useCommon.validators(),
-  },
+import theme from './Avatar.theme'
 
-  props: {
-    ...useCommon.props(),
-    ...useColors.props('primary'),
-    tag: {
-      type: String,
-      default: 'div',
-    },
-    name: String,
-    alt: String,
-    image: String,
-    outlined: Boolean,
-    rounded: Boolean,
+const props = defineProps({
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  tag: {
+    type: String,
+    default: 'div',
   },
+  name: String,
+  alt: String,
+  image: String,
+  outlined: Boolean,
+  rounded: Boolean,
+})
 
-  setup(props) {
-    const avatarIcon = '<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />'
-    const source = ref<string>()
-    const initials = computed(() => {
-      if (props.name) {
-        const initials = props.name.match(/\b\w/g) || []
-
-        return ((initials.shift() || '') + (initials.pop() || '')).toUpperCase()
-      }
-
-      return ''
-    })
-
-    watch(() => props.image, (src) => {
-      if (!src) return
-      const img = new Image()
-
-      img.onload = () => { source.value = props.image }
-      img.onerror = () => { }
-      img.src = src
-    }, {
-      immediate: true,
-    })
-
-    const sizeClasses = computed(() => {
-      if (props.size === 'xs') return 'h-6 w-6 text-xs'
-      else if (props.size === 'sm') return 'h-9 w-9 text-sm'
-      else if (props.size === 'lg') return 'h-12 w-12 text-lg'
-      else if (props.size === 'xl') return 'h-[3.75rem] w-[3.75rem] text-xl'
-
-      return 'h-10 w-10'
-    })
+const source = ref<string>()
+const initials = computed(() => {
+  if (props.name) {
+    const initials = props.name.match(/\b\w/g) || []
 
-    const css = useCSS('avatar')
-    const colors = useColors()
-    const styles = computed(() => {
-      const color = colors.getPalette(props.color)
+    return ((initials.shift() || '') + (initials.pop() || '')).toUpperCase()
+  }
 
-      if (source.value) return css.variables({
-        bg: 'transparent',
-        border: props.outlined ? color[500] : 'transparent',
-      })
+  return ''
+})
 
-      return css.variables({
-        bg: color[100],
-        text: color[500],
-        border: props.outlined ? color[500] : 'transparent',
-        dark: {
-          bg: color[200],
-        },
-      })
-    })
+watch(() => props.image, (src) => {
+  source.value = undefined
+  if (!src) return
+  const img = new Image()
 
-    return {
-      avatarIcon,
-      source,
-      initials,
-      sizeClasses,
-      styles,
-    }
-  },
+  img.onload = () => { source.value = props.image }
+  img.onerror = () => { }
+  img.src = src
+}, {
+  immediate: true,
 })
+
+const { styles, classes, className } = useTheme('avatar', theme, props, { source })
 </script>
 
 <template>
   <component
     :is="tag"
-    class="relative inline-flex items-center justify-center overflow-hidden align-middle border box-content"
     :style="styles"
     :class="[
+      className,
       $style.avatar,
-      sizeClasses,
-      rounded ? 'rounded-full' : 'rounded-md'
+      classes.wrapper,
     ]"
   >
-    <span
-      v-if="!source && name"
-      class="leading-none"
-    >{{ initials }}</span>
-    <slot v-else>
-      <x-icon :size="size" :icon="avatarIcon"/>
-    </slot>
     <img
       v-if="source"
       :alt="alt"
       :src="image"
       class="h-full w-full"
     />
+
+    <span
+      v-else-if="name"
+      class="leading-none"
+    >{{ initials }}</span>
+
+    <slot v-else-if="!name" name="avatarIcon">
+      <x-icon :size="size" :icon="avatarIcon"/>
+    </slot>
   </component>
 </template>
 
-<style lang="postcss" module scoped>
+<style lang="postcss" module>
 .avatar {
   color: var(--x-avatar-text);
   background-color: var(--x-avatar-bg);
   border-color: var(--x-avatar-border);
 
-  :global(.dark) & {
-    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));
+  :global(.dark) &, &:global(.dark) {
+    color: var(--x-avatar-dark-text, var(--x-avatar-text));
+    background-color: var(--x-avatar-dark-bg, var(--x-avatar-bg));
+    border-color: var(--x-avatar-dark-border, var(--x-avatar-border));
   }
 }
 </style>

package/src/components/avatar/__tests__/Avatar.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Avatar from '../Avatar.vue'
+
+describe('Avatar', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Avatar)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

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

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

package/src/components/badge/Badge.vue

@@ -1,87 +1,80 @@
 <script lang="ts">
-import { computed, defineComponent, type PropType } from 'vue'
-import { useCSS } from '../../composables/css'
+export default { name: 'XBadge' }
+</script>
+
+<script setup lang="ts">
+import { computed, useSlots, type PropType } from 'vue'
+import { useTheme } from '../../composables/theme'
 import { useCommon } from '../../composables/common'
 import { useColors } from '../../composables/colors'
 
-export default defineComponent({
-  name: 'XBadge',
+import theme from './Badge.theme'
 
-  props: {
-    ...useCommon.props(),
-    ...useColors.props('primary'),
-    tag: {
-      type: String,
-      default: 'div',
-    },
-    position: {
-      type: String as PropType<'top' | 'bottom'>,
-      default: 'top',
-    },
-    align: {
-      type: String as PropType<'left' | 'right'>,
-      default: 'right',
-    },
-    offsetX: [Number, String],
-    offsetY: [Number, String],
-    animated: Boolean,
-    outlined: Boolean,
-    icon: String,
-    show: {
-      type: Boolean,
-      default: true,
-    },
+const props = defineProps({
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  tag: {
+    type: String,
+    default: 'div',
   },
+  position: {
+    type: String as PropType<'top' | 'bottom'>,
+    default: 'top',
+  },
+  align: {
+    type: String as PropType<'left' | 'right'>,
+    default: 'right',
+  },
+  offsetX: [Number, String],
+  offsetY: [Number, String],
+  animated: Boolean,
+  outlined: Boolean,
+  icon: String,
+  show: {
+    type: Boolean,
+    default: true,
+  },
+})
 
-  setup(props, { slots }) {
-    const css = useCSS('badge')
-    const colors = useColors()
-    const styles = computed(() => {
-      const color = colors.getPalette(props.color)
-
-      return css.get('bg', color[500])
-    })
-
-    const positionClasses = computed(() => {
-      const classes = []
+const slots = useSlots()
 
-      if (props.position === 'top') classes.push('top-0')
-      if (props.position === 'bottom') classes.push('bottom-0')
-      if (props.align === 'left') classes.push('left-0')
-      if (props.align === 'right') classes.push('right-0')
-      if (slots.content) classes.push('-m-[7.5%]')
-      else if (props.outlined) {
-        classes.push('-m-[5%]')
-      } else {
-        classes.push('-m-[3.5%]')
-      }
+const positionClasses = computed(() => {
+  const classes = []
 
-      return classes
-    })
+  if (props.position === 'top') classes.push('top-0')
+  if (props.position === 'bottom') classes.push('bottom-0')
+  if (props.align === 'left') classes.push('left-0')
+  if (props.align === 'right') classes.push('right-0')
+  if (slots.content) classes.push('-m-[7.5%]')
+  else if (props.outlined) {
+    classes.push('-m-[5%]')
+  } else {
+    classes.push('-m-[3.5%]')
+  }
 
-    const offsetStyle = computed(() => {
-      const style: any = {}
+  return classes
+})
 
-      if (props.offsetX) style[props.align === 'left' ? 'marginLeft' : 'marginRight'] = props.offsetX + 'px'
-      if (props.offsetY) style[props.position === 'top' ? 'marginTop' : 'marginBottom'] = props.offsetY + 'px'
+const offsetStyle = computed(() => {
+  const style: any = {}
 
-      return style
-    })
+  if (props.offsetX) style[props.align === 'left' ? 'marginLeft' : 'marginRight'] = props.offsetX + 'px'
+  if (props.offsetY) style[props.position === 'top' ? 'marginTop' : 'marginBottom'] = props.offsetY + 'px'
 
-    return {
-      styles,
-      offsetStyle,
-      positionClasses,
-    }
-  },
+  return style
 })
+
+const { styles, classes, className } = useTheme('badge', theme, props)
 </script>
 
 <template>
   <component
     :is="tag"
-    class="inline-block"
     :style="styles"
+    :class="[
+      className,
+      classes.wrapper
+    ]"
   >
     <div class="relative inline-block">
       <slot></slot>
@@ -103,7 +96,7 @@ export default defineComponent({
         <div
           class="text-xs text-white overflow-hidden"
           :class="[
-            $slots.content ? 'flex items-center justify-center min-w-[1.25rem] h-5 px-0.5' : {
+            $slots.content ? 'flex items-center justify-center min-w-[1.25rem] h-5 px-1.5' : {
               'p-1': size === 'xs',
               'p-[0.312rem]': size === 'sm',
               'p-1.5': !size || !['xs', 'sm', 'lg', 'xl'].includes(size),

package/src/components/badge/__tests__/Badge.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Badge from '../Badge.vue'
+
+describe('Badge', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Badge)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,9 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: 'flex items-center flex-wrap',
+    item: 'flex items-center',
+    lastItem: 'font-semibold',
+  },
+}

package/src/components/breadcrumbs/Breadcrumbs.vue

@@ -1,5 +1,17 @@
 <script lang="ts">
-import { computed, defineComponent, type PropType } from 'vue'
+export default { name: 'XBreadcrumbs' }
+</script>
+
+<script setup lang="ts">
+import { computed, type PropType } from 'vue'
+import { useTheme } from '../../composables/theme'
+import { arrowRightIcon } from '../../common/icons'
+import { useColors } from '../../composables/colors'
+
+import XIcon from '../../components/icon/Icon.vue'
+import XLink from '../../components/link/Link.vue'
+
+import theme from './Breadcrumbs.theme'
 
 export type BreadcrumbItem = {
   label: string,
@@ -11,33 +23,31 @@ export type BreadcrumbItem = {
   underline?: boolean
 }
 
-export default defineComponent({
-  name: 'XBreadcrumbs',
-
-  props: {
-    items: Array as PropType<Array<BreadcrumbItem>>,
-    icon: String,
-    color: String,
-    shadow: Boolean,
-    underline: Boolean,
+const props = defineProps({
+  ...useColors.props(),
+  items: Array as PropType<Array<BreadcrumbItem>>,
+  icon: {
+    type: String,
+    default: arrowRightIcon,
   },
+  shadow: Boolean,
+  underline: Boolean,
+})
 
-  setup(props) {
-    const arrowIcon = '<path d="M13 7l5 5m0 0l-5 5m5-5H6" />'
-    const lastItem = computed(() => props.items && props.items.length > 0 ? props.items[props.items.length - 1] : undefined)
+const lastItem = computed(() => props.items && props.items.length > 0 ? props.items[props.items.length - 1] : undefined)
 
-    return {
-      arrowIcon,
-      lastItem,
-    }
-  },
-})
+const { styles, classes, className } = useTheme('breadcrumbs', theme, props)
 </script>
 
 <template>
-  <nav v-if="items && items.length > 0" aria-label="Breadcrumb">
-    <ul class="flex items-center flex-wrap">
-      <li v-for="(item, index) in items?.slice(0,-1)" :key="index" class="flex items-center">
+  <nav
+    v-if="items && items.length > 0"
+    aria-label="Breadcrumb"
+    :class="className"
+    :style="styles"
+  >
+    <ul :class="classes.wrapper">
+      <li v-for="(item, index) in items?.slice(0,-1)" :key="index" :class="classes.item">
         <x-link
           :to="item.to"
           :href="item.href"
@@ -49,9 +59,9 @@ export default defineComponent({
           <x-icon v-if="item.icon" :icon="item.icon" class="mr-1.5"/>
           {{ item.label }}
         </x-link>
-        <x-icon :icon="icon || arrowIcon" class="text-gray-400 mx-1.5 shrink-0" size="sm" />
+        <x-icon :icon="icon" class="text-gray-400 mx-1.5" size="sm" />
       </li>
-      <li v-if="lastItem" class="font-semibold">
+      <li v-if="lastItem" :class="classes.lastItem">
         <x-icon v-if="lastItem.icon" :icon="lastItem.icon" class="mr-1"/>
         {{ lastItem.label }}
       </li>

package/src/components/breadcrumbs/__tests__/Breadcrumbs.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Breadcrumbs from '../Breadcrumbs.vue'
+
+describe('Breadcrumbs', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Breadcrumbs)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})