@indielayer/ui 0.0.0-dev-20240125104319

package/src/components/accordion/theme/AccordionItem.base.theme.ts

@@ -0,0 +1,35 @@
+import type { AccordionItemTheme } from '../AccordionItem.vue'
+
+const theme: AccordionItemTheme = {
+  classes: {
+    wrapper: ({ props, slots }) => {
+      const classes = ['relative flex items-center w-full text-left']
+
+      if (slots.default) {
+        classes.push('px-4 py-2')
+        if (!props.disabled) classes.push('hover:bg-gray-50 dark:hover:bg-gray-800')
+      }
+
+      if (props.iconAlign === 'left') classes.push('flex-row-reverse')
+
+      if (!props.disabled) classes.push('cursor-pointer')
+
+      return classes
+    },
+
+    icon: ({ props, data }) => {
+      const classes = ['flex transform transition-transform duration-150']
+
+      if (!data.collapsed) classes.push('rotate-180')
+      if (props.disabled) classes.push('text-gray-300')
+
+      if (props.iconAlign === 'left') classes.push('mr-4')
+
+      return classes
+    },
+
+    content: 'transition-[height] duration-150 overflow-y-hidden',
+  },
+}
+
+export default theme

package/src/components/accordion/theme/AccordionItem.carbon.theme.ts

@@ -0,0 +1,35 @@
+import type { AccordionItemTheme } from '../AccordionItem.vue'
+
+const theme: AccordionItemTheme = {
+  classes: {
+    wrapper: ({ props, slots }) => {
+      const classes = ['relative flex items-center w-full text-left']
+
+      if (slots.default) {
+        classes.push('px-4 py-2')
+        if (!props.disabled) classes.push('hover:bg-gray-50 dark:hover:bg-gray-800')
+      }
+
+      if (props.iconAlign === 'left') classes.push('flex-row-reverse')
+
+      if (!props.disabled) classes.push('cursor-pointer')
+
+      return classes
+    },
+
+    icon: ({ props, data }) => {
+      const classes = ['flex transform transition-transform duration-150']
+
+      if (!data.collapsed) classes.push('rotate-180')
+      if (props.disabled) classes.push('text-gray-300')
+
+      if (props.iconAlign === 'left') classes.push('mr-4')
+
+      return classes
+    },
+
+    content: 'px-4 pt-2 pb-6 transition-[height] duration-150 overflow-y-hidden',
+  },
+}
+
+export default theme

package/src/components/alert/Alert.vue

@@ -0,0 +1,101 @@
+<script lang="ts">
+const alertType = ['info', 'success', 'error', 'warning'] as const
+const alertProps = {
+  ...useColors.props(),
+  type: String as PropType<AlertType>,
+  glow: Boolean,
+  light: Boolean,
+  outlined: Boolean,
+  removable: Boolean,
+  closeLabel: String,
+}
+
+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: {
+    type: alertType,
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { computed, type ExtractPublicPropTypes, type PropType } from 'vue'
+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'
+
+const props = defineProps(alertProps)
+
+defineEmits(['remove'])
+
+const icon = computed(() => {
+  if (props.type === 'info') return infoIcon
+  else if (props.type === 'success') return successIcon
+  else if (props.type === 'error') return errorIcon
+  else if (props.type === 'warning') return warningIcon
+
+  return ''
+})
+
+const { styles, classes, className } = useTheme('Alert', {}, props)
+</script>
+
+<template>
+  <div
+    :style="styles"
+    :class="[
+      className,
+      $style['alert'],
+      glow ? $style['alert--glow'] : '',
+      classes.wrapper,
+    ]"
+  >
+
+    <slot name="icon">
+      <x-icon
+        v-if="type"
+        :icon="icon"
+        class="text-[color:var(--x-alert-icon)] dark:text-[color:var(--x-alert-dark-icon)]"
+      />
+    </slot>
+
+    <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)">
+        <slot name="removeIcon">
+          <x-icon :icon="closeIcon"/>
+        </slot>
+      </button>
+    </template>
+  </div>
+</template>
+
+<style lang="postcss" module>
+.alert {
+  color: var(--x-alert-text);
+  background-color: var(--x-alert-bg);
+  border-color: var(--x-alert-border);
+
+  &--glow {
+    box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-alert-glow), 0 4px 6px -4px var(--x-alert-glow);
+  }
+
+  :global(.dark) &,
+  &:global(.dark) {
+    color: var(--x-alert-dark-text, var(--x-alert-text));
+    background-color: var(--x-alert-dark-bg, var(--x-alert-bg));
+    border-color: var(--x-alert-dark-border, var(--x-alert-border));
+  }
+}
+</style>

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

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

package/src/components/alert/index.ts

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

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

@@ -0,0 +1,58 @@
+import type { AlertTheme } from '../Alert.vue'
+
+const theme: AlertTheme = {
+  classes: {
+    wrapper: 'flex items-center rounded-md space-x-2 px-4 py-2 border',
+  },
+  styles: ({ props, colors, css }) => {
+    const color = colors.getPalette(props.color)
+    const vars = []
+
+    if (props.glow) vars.push(css.get('glow', colors.getColorOpacity(color[500], 0.5)))
+
+    if (props.color) {
+      if (props.light) {
+        vars.push(css.variables({
+          bg: color[50],
+          text: color[600],
+          icon: color[600],
+          border: props.outlined ? color[600] : color[50],
+          dark: {
+            bg: color[200],
+            text: color[800],
+            icon: color[600],
+            border: props.outlined ? color[500] : color[200],
+          },
+        }))
+      } else {
+        vars.push(css.variables({
+          bg: props.outlined ? 'transparent' : color[600],
+          text: props.outlined ? color[600] : color[50],
+          icon: props.outlined ? color[600] : color[50],
+          border: color[600],
+          dark: {
+            border: color[400],
+            text: props.outlined ? color[400] : color[50],
+          },
+        }))
+      }
+
+      return vars
+    }
+
+    vars.push(css.variables({
+      bg: 'transparent',
+      text: color[500],
+      border: color[300],
+      dark: {
+        bg: 'transparent',
+        text: color[300],
+        border: color[500],
+      },
+    }))
+
+    return vars
+  },
+}
+
+export default theme

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

@@ -0,0 +1,59 @@
+import type { AlertTheme } from '../Alert.vue'
+
+const theme: AlertTheme = {
+  classes: {
+    wrapper: 'flex items-center space-x-2 px-4 py-3 border border-l-4 text-sm',
+  },
+  styles: ({ props, colors, css }) => {
+    const gray = colors.getPalette('gray')
+    const color = colors.getPalette(props.color)
+    const vars = []
+
+    if (props.glow) vars.push(css.get('glow', colors.getColorOpacity(color[500], 0.5)))
+
+    if (props.color) {
+      if (props.light) {
+        vars.push(css.variables({
+          bg: color[50],
+          text: gray[900],
+          icon: color[600],
+          border: props.outlined ? color[600] : color[50],
+          dark: {
+            bg: gray[800],
+            text: gray[100],
+            icon: color[600],
+            border: props.outlined ? color[500] : color[200],
+          },
+        }))
+      } else {
+        vars.push(css.variables({
+          bg: props.outlined ? 'transparent' : color[600],
+          text: props.outlined ? color[600] : color[50],
+          icon: props.outlined ? color[600] : color[50],
+          border: color[600],
+          dark: {
+            border: color[400],
+            text: props.outlined ? color[400] : color[50],
+          },
+        }))
+      }
+
+      return vars
+    }
+
+    vars.push(css.variables({
+      bg: 'transparent',
+      text: color[500],
+      border: color[300],
+      dark: {
+        bg: 'transparent',
+        text: color[300],
+        border: color[500],
+      },
+    }))
+
+    return vars
+  },
+}
+
+export default theme

package/src/components/avatar/Avatar.vue

@@ -0,0 +1,108 @@
+<script lang="ts">
+const avatarProps = {
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  tag: {
+    type: String,
+    default: 'div',
+  },
+  name: String,
+  alt: String,
+  image: String,
+  outlined: Boolean,
+  rounded: Boolean,
+}
+
+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(),
+}
+</script>
+
+<script setup lang="ts">
+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'
+
+const props = defineProps(avatarProps)
+
+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 ''
+})
+
+if (typeof window !== 'undefined' && Image) {
+  watch(() => props.image, (src) => {
+    source.value = undefined
+    if (!src) return
+    const img = new Image()
+
+    img.onload = () => { source.value = props.image }
+    img.onerror = () => { }
+    img.src = src
+  }, {
+    immediate: true,
+  })
+}
+
+const { styles, classes, className } = useTheme('Avatar', {}, props, { source })
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :style="styles"
+    :class="[
+      className,
+      $style.avatar,
+      classes.wrapper,
+    ]"
+  >
+    <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>
+.avatar {
+  color: var(--x-avatar-text);
+  background-color: var(--x-avatar-bg);
+  border-color: 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/avatar/index.ts

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

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

@@ -0,0 +1,41 @@
+import type { AvatarTheme } from '../Avatar.vue'
+
+const theme: AvatarTheme = {
+  classes: {
+    wrapper({ props }) {
+      const classes = ['relative inline-flex items-center justify-center overflow-hidden align-middle border box-content']
+
+      // radius
+      classes.push(props.rounded ? 'rounded-full' : 'rounded-md')
+
+      // size
+      if (props.size === 'xs') classes.push('h-6 w-6 text-xs')
+      else if (props.size === 'sm') classes.push('h-9 w-9 text-sm')
+      else if (props.size === 'lg') classes.push('h-12 w-12 text-lg')
+      else if (props.size === 'xl') classes.push('h-[3.75rem] w-[3.75rem] text-xl')
+      else classes.push('h-10 w-10')
+
+      return classes
+    },
+  },
+
+  styles({ props, colors, css, data }) {
+    const color = colors.getPalette(props.color)
+
+    if (data.source) return css.variables({
+      bg: 'transparent',
+      border: props.outlined ? color[500] : 'transparent',
+    })
+
+    return css.variables({
+      bg: color[100],
+      text: color[500],
+      border: props.outlined ? color[500] : 'transparent',
+      dark: {
+        bg: color[900],
+      },
+    })
+  },
+}
+
+export default theme

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

@@ -0,0 +1,129 @@
+<script lang="ts">
+const badgeAlign = ['left', 'right'] as const
+const badgePosition = ['top', 'bottom'] as const
+const badgeProps = {
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  tag: {
+    type: String,
+    default: 'div',
+  },
+  position: {
+    type: String as PropType<BadgePosition>,
+    default: 'top',
+  },
+  align: {
+    type: String as PropType<BadgeAlign>,
+    default: 'right',
+  },
+  offsetX: [Number, String],
+  offsetY: [Number, String],
+  animated: Boolean,
+  outlined: Boolean,
+  icon: String,
+  show: {
+    type: Boolean,
+    default: true,
+  },
+}
+
+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: {
+    ...useCommon.validators(),
+    position: badgePosition,
+    align: badgeAlign,
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { computed, useSlots, type PropType, type ExtractPublicPropTypes } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useCommon } from '../../composables/useCommon'
+import { useColors } from '../../composables/useColors'
+
+const props = defineProps(badgeProps)
+
+const slots = useSlots()
+
+const positionClasses = computed(() => {
+  const 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%]')
+  }
+
+  return classes
+})
+
+const offsetStyle = computed(() => {
+  const style: any = {}
+
+  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 style
+})
+
+const { styles, classes, className } = useTheme('Badge', {}, props)
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper
+    ]"
+  >
+    <div class="relative inline-block">
+      <slot></slot>
+      <div
+        v-if="show"
+        class="absolute rounded-full z-10 bg-[color:var(--x-badge-bg)]"
+        :style="offsetStyle"
+        :class="[
+          positionClasses,
+          {
+            'border-2 border-gray-50 dark:border-gray-900': outlined,
+          }
+        ]"
+      >
+        <div
+          v-if="animated"
+          class="animate-ping opacity-75 absolute top-0 left-0 rounded-full h-full w-full z-10 bg-[color:var(--x-badge-bg)]"
+        ></div>
+        <div
+          class="text-xs text-white overflow-hidden"
+          :class="[
+            $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),
+              'p-2': size === 'lg',
+              'p-2.5': size === 'xl',
+            }
+          ]"
+        >
+          <slot name="content"></slot>
+        </div>
+      </div>
+    </div>
+  </component>
+</template>

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/badge/index.ts

@@ -0,0 +1,2 @@
+export { default as XBadge } from './Badge.vue'
+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