@indielayer/ui 0.0.0-dev-20240125104319

package/src/components/breadcrumbs/Breadcrumbs.vue

@@ -0,0 +1,75 @@
+<script lang="ts">
+const breadcrumbsProps = {
+  ...useColors.props(),
+  items: Array as PropType<BreadcrumbsItem[]>,
+  separator: {
+    type: String,
+    default: '/',
+  },
+  icon: String,
+  shadow: Boolean,
+  underline: Boolean,
+}
+
+export type BreadcrumbsItem = {
+  label: string;
+  to?: string | object;
+  href?: string;
+  color?: string;
+  icon?: string;
+  shadow?: boolean;
+  underline?: boolean;
+}
+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 { 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'
+
+const props = defineProps(breadcrumbsProps)
+
+const { styles, classes, className } = useTheme('Breadcrumbs', {}, props)
+</script>
+
+<template>
+  <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" :key="index" :class="classes.item">
+        <x-link
+          :to="item.to"
+          :href="item.href"
+          :color="item.color || color"
+          :shadow="item.shadow || shadow"
+          :underline="item.underline|| underline"
+          class="flex items-center"
+        >
+          <x-icon v-if="item.icon" :icon="item.icon" class="mr-1.5"/>
+          {{ item.label }}
+        </x-link>
+        <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>
+</template>

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()
+  })
+})

package/src/components/breadcrumbs/index.ts

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

@@ -0,0 +1,191 @@
+<script lang="ts">
+const buttonProps = {
+  ...useCommon.props(),
+  ...useColors.props(),
+  ...useInteractive.props(),
+  tag: {
+    type: String,
+    default: 'button',
+  },
+  type: {
+    type: String,
+    default: 'button',
+  },
+  icon: String,
+  iconLeft: String,
+  iconRight: String,
+  to: String,
+  outlined: Boolean,
+  rounded: Boolean,
+  glow: Boolean,
+  ghost: Boolean,
+  light: Boolean,
+  block: Boolean,
+  flat: Boolean,
+}
+
+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: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, inject, useAttrs, unref, type ExtractPublicPropTypes } from 'vue'
+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 XLoader from '../loader/Loader.vue'
+import XIcon from '../icon/Icon.vue'
+
+const props = defineProps(buttonProps)
+
+const elRef = ref<HTMLElement | null>(null)
+
+// Button group props
+const buttonGroup = inject(injectButtonGroupKey, {
+  isButtonGroup: false,
+  groupProps: {},
+})
+
+const { isButtonGroup } = buttonGroup
+const computedSize = computed(() => buttonGroup.groupProps.size || props.size)
+const computedFlat = computed(() => buttonGroup.groupProps.flat || props.flat)
+const computedColor = computed(() => props.color || buttonGroup.groupProps.color)
+const computedGhost = computed(() => props.ghost || buttonGroup.groupProps.ghost)
+const computedLight = computed(() => props.light || buttonGroup.groupProps.light)
+const computedOutlined = computed(() => props.outlined || buttonGroup.groupProps.outlined)
+const computedDisabled = computed(() => props.disabled || buttonGroup.groupProps.disabled)
+const computedIconLeft = computed(() => props.icon || props.iconLeft)
+
+const attrs = useAttrs()
+const htmlTag = computed(() => (attrs.href ? 'a' : props.to ? 'router-link' : props.tag))
+
+const computedProps = computed(() => ({
+  size: unref(computedSize),
+  flat: unref(computedFlat),
+  color: unref(computedColor),
+  ghost: unref(computedGhost),
+  light: unref(computedLight),
+  outlined: unref(computedOutlined),
+  disabled: unref(computedDisabled),
+  loading: props.loading,
+  block: props.block,
+  glow: props.glow,
+  iconLeft: unref(computedIconLeft),
+  iconRight: props.iconRight,
+  rounded: props.rounded,
+}))
+
+const { className, classes, styles } = useTheme('Button', {}, computedProps, {
+  isButtonGroup,
+})
+
+const { focus, blur } = useInteractive(elRef)
+
+defineExpose({ focus, blur })
+</script>
+
+<template>
+  <component
+    :is="htmlTag"
+    ref="elRef"
+    :to="to"
+    :class="[
+      className,
+      $style['button'],
+      (glow && !computedDisabled && !loading) ? $style['button--glow'] : '',
+      classes.wrapper,
+      { 'w-full': block }
+    ]"
+    :style="styles"
+    :aria-busy="loading ? 'true' : null"
+    :aria-disabled="tag !== 'button' && computedDisabled ? 'true' : null"
+    :disabled="computedDisabled || loading"
+    :type="tag === 'button' ? type : null"
+  >
+    <x-loader
+      v-if="loading"
+      class="absolute"
+      :size="computedSize"
+      :label="loadingLabel"
+      :status="loadingStatus"
+    />
+    <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"
+      :icon="iconRight"
+      :class="[
+        classes.iconRight,
+        { 'invisible': loading },
+      ]"
+    />
+  </component>
+</template>
+
+<style lang="postcss" scoped module>
+.button {
+  color: var(--x-button-text);
+  background-color: var(--x-button-bg);
+  border-color: var(--x-button-border);
+
+  &--glow {
+    box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-button-glow), 0 4px 6px -4px var(--x-button-glow);
+  }
+
+  &:hover {
+    color: var(--x-button-text-hover, var(--x-button-text));
+    background-color: var(--x-button-bg-hover, var(--x-button-bg));
+    border-color: var(--x-button-border-hover, var(--x-button-border));
+  }
+
+  &:active {
+    color: var(--x-button-text-active, var(--x-button-text));
+    background-color: var(--x-button-bg-active, var(--x-button-bg));
+    border-color: var(--x-button-border-active, var(--x-button-border));
+  }
+
+  :global(.dark) &,
+  &:global(.dark) {
+    color: var(--x-button-dark-text, var(--x-button-text));
+    background-color: var(--x-button-dark-bg, var(--x-button-bg));
+    border-color: var(--x-button-dark-border, var(--x-button-border));
+
+    &:hover {
+      color: var(--x-button-dark-text-hover, var(--x-button-dark-text, var(--x-button-text)));
+      background-color: var(--x-button-dark-bg-hover, var(--x-button-dark-bg, var(--x-button-bg)));
+      border-color: var(--x-button-dark-border-hover, var(--x-button-dark-border, var(--x-button-border)));
+    }
+
+    &:active {
+      color: var(--x-button-dark-text-active, var(--x-button-dark-text));
+      background-color: var(--x-button-dark-bg-active, var(--x-button-dark-bg, var(--x-button-bg)));
+      border-color: var(--x-button-dark-border-active, var(--x-button-dark-border, var(--x-button-border)));
+    }
+  }
+}
+</style>

package/src/components/button/ButtonGroup.vue

@@ -0,0 +1,90 @@
+<script lang="ts">
+const buttonGroupProps = {
+  ...useCommon.props(),
+  ...useColors.props(),
+  ...useInteractive.props(),
+  tag: {
+    type: String,
+    default: 'div',
+  },
+  outlined: Boolean,
+  rounded: Boolean,
+  ghost: Boolean,
+  light: Boolean,
+  flat: Boolean,
+}
+
+export type ButtonGroupProps = ExtractPublicPropTypes<typeof buttonGroupProps>
+export type ButtonGroupInjection = {
+  groupProps: ButtonGroupProps;
+  isButtonGroup: boolean;
+}
+
+type InternalClasses = 'wrapper'
+type InternalExtraData = { isButtonGroupGroup: boolean; }
+export interface ButtonGroupTheme extends ThemeComponent<ButtonGroupProps, InternalClasses, InternalExtraData> {}
+
+export default {
+  name: 'XButtonGroup',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { provide, type ExtractPublicPropTypes } from 'vue'
+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'
+
+const props = defineProps(buttonGroupProps)
+
+provide(injectButtonGroupKey, {
+  groupProps: props,
+  isButtonGroup: true,
+})
+
+const { className, classes, styles } = useTheme('ButtonGroup', {}, props)
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :style="styles"
+    :class="[
+      className,
+      $style['button-group'],
+      rounded ? $style['button-group--rounded'] : '',
+      classes.wrapper
+    ]"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<style lang="postcss" module>
+.button-group {
+  &:not(&--rounded) {
+    > :first-child {
+      @apply rounded-l-md;
+    }
+
+    > :last-child {
+      @apply rounded-r-md;
+    }
+  }
+
+  &--rounded {
+    > :first-of-type {
+      @apply rounded-l-full;
+    }
+
+    > :last-child {
+      @apply rounded-r-full;
+    }
+  }
+}
+</style>

package/src/components/button/__tests__/ Button.spec.ts

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

package/src/components/button/__tests__/ ButtonGroup.spec.ts

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

package/src/components/button/index.ts

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

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

@@ -0,0 +1,229 @@
+import type { ButtonTheme } from '../Button.vue'
+
+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']
+
+      // radius
+      if (!data.isButtonGroup) classes.push(props.rounded ? 'rounded-full' : 'rounded-md')
+
+      // shadow
+      if (!props.flat && !props.light && !props.ghost && !props.disabled && !props.loading) classes.push('shadow-sm')
+
+      // size
+      if (props.size === 'xs') classes.push(slots.default ? `py-1 text-xs ${props.icon ? 'px-2' : 'px-3'}` : 'leading-none p-1')
+      else if (props.size === 'sm') classes.push(slots.default ? `py-2 text-sm ${props.icon ? 'px-3' : 'px-4'}` : 'leading-none p-2')
+      else if (props.size === 'lg') classes.push(slots.default ? `py-3 text-lg ${props.icon ? 'px-4' : 'px-6'}` : 'leading-none p-3')
+      else if (props.size === 'xl') classes.push(slots.default ? `py-4 text-xl ${props.icon ? 'px-6' : 'px-6'}` : 'leading-none p-4')
+      else classes.push(slots.default ? `py-2 ${props.icon ? 'px-4' : 'px-5'}` : 'leading-none p-2')
+
+      // 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[100],
+            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