@indielayer/ui 1.18.1 → 2.1.0

package/src/components/popover/__tests__/Popover.spec.ts

@@ -1,6 +1,20 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
+import { h, defineComponent, nextTick } from 'vue'
 import Popover from '../Popover.vue'
+import PopoverContentBoundary from '../PopoverContentBoundary.vue'
+import ButtonGroup from '../../button/ButtonGroup.vue'
+import Button from '../../button/Button.vue'
+import { injectThemeKey } from '../../../composables/keys'
+import BaseTheme from '../../../themes/base'
+
+const themeProvide = {
+  global: {
+    provide: {
+      [injectThemeKey as symbol]: BaseTheme,
+    },
+  },
+}
 
 describe('Popover', () => {
   it('renders without errors', () => {
@@ -8,4 +22,41 @@ describe('Popover', () => {
 
     expect(wrapper.vm).toBeTruthy()
   })
+
+  it('keeps trigger button group radius when popover content mounts', async () => {
+    const Demo = defineComponent({
+      setup() {
+        return () => h(ButtonGroup, null, {
+          default: () => [
+            h(Button, null, () => 'Add New'),
+            h(Popover, null, {
+              default: () => h(Button, null, () => 'More'),
+              content: () => h(Button, null, () => 'Option 1'),
+            }),
+            // Simulate teleported content that would otherwise join the group
+            h(PopoverContentBoundary, null, {
+              default: () => [
+                h(Button, null, () => 'Option 1'),
+                h(Button, null, () => 'Option 2'),
+                h(Button, null, () => 'Option 3'),
+              ],
+            }),
+          ],
+        })
+      },
+    })
+
+    const wrapper = mount(Demo, themeProvide)
+
+    await nextTick()
+
+    const buttons = wrapper.findAll('button')
+    const addNew = buttons.find((b) => b.text() === 'Add New')
+    const more = buttons.find((b) => b.text() === 'More')
+    const option1 = buttons.find((b) => b.text() === 'Option 1')
+
+    expect(addNew?.classes().some((c) => c.includes('rounded-s'))).toBe(true)
+    expect(more?.classes().some((c) => c.includes('rounded-e'))).toBe(true)
+    expect(option1?.classes().includes('rounded-md')).toBe(true)
+  })
 })

package/src/components/popover/theme/PopoverContainer.base.theme.ts

@@ -2,7 +2,7 @@ import type { PopoverContainerTheme } from '../PopoverContainer.vue'
 
 const theme: PopoverContainerTheme = {
   classes: {
-    wrapper: 'block w-full bg-white dark:bg-secondary-700 shadow-lg rounded-md border border-secondary-200 dark:border-secondary-800',
+    wrapper: 'block w-full bg-white dark:bg-secondary-800 shadow-lg rounded-md border border-secondary-200 dark:border-secondary-700',
   },
 }
 

package/src/components/progress/Progress.vue

@@ -1,17 +1,21 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const progressProps = {
   ...useColors.props('primary'),
   percentage: {
     type: [Number, String],
     default: 0,
     validator: (value: number) => value >= 0 && value <= 100,
+    description: 'Fill amount from 0 to 100.',
   },
-  gradient: Boolean,
+  gradient: optionalBooleanProp('Uses a gradient fill instead of a solid color.'),
   animate: {
     type: Boolean,
     default: true,
+    description: 'Animates width changes when the percentage updates.',
   },
-  thick: Boolean,
+  thick: optionalBooleanProp('Increases the bar thickness.'),
 }
 
 export type ProgressProps = ExtractPublicPropTypes<typeof progressProps>
@@ -19,7 +23,10 @@ export type ProgressProps = ExtractPublicPropTypes<typeof progressProps>
 type InternalClasses = 'wrapper' | 'list' | 'item'
 export interface ProgressTheme extends ThemeComponent<ProgressProps, InternalClasses> {}
 
-export default { name: 'XProgress' }
+export default {
+  name: 'XProgress',
+  docs: {},
+}
 </script>
 
 <script setup lang="ts">

package/src/components/qrCode/QrCode.vue

@@ -1,21 +1,28 @@
 <script lang="ts">
 const qrCodeProps = {
-  value: String,
+  value: {
+    type: String,
+    description: 'Text or URL encoded in the QR code.',
+  },
   color: {
     type: String,
     default: '#000',
+    description: 'Foreground module color.',
   },
   backgroundColor: {
     type: String,
     default: '#fff',
+    description: 'Background color behind the modules.',
   },
   size: {
     type: [String, Number],
     default: 100,
+    description: 'Rendered size of the QR canvas in pixels.',
   },
   errorCorrectionLevel: {
     type: String,
     default: 'M',
+    description: 'Error correction level (L, M, Q, or H).',
   },
 }
 
@@ -29,6 +36,7 @@ export default {
   validators: {
     errorCorrectionLevel: ['L', 'M', 'Q', 'H'],
   },
+  docs: {},
 }
 </script>
 

package/src/components/radio/Radio.vue

@@ -1,11 +1,16 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const radioProps = {
   ...useCommon.props(),
   ...useColors.props('primary'),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  value: [String, Number],
-  glow: Boolean,
+  value: {
+    type: [String, Number],
+    description: 'Value emitted when this option is selected (v-model / form-group).',
+  },
+  glow: optionalBooleanProp('Soft colored glow behind the control.'),
 }
 
 export type RadioProps = ExtractPublicPropTypes<typeof radioProps>
@@ -19,6 +24,17 @@ export default {
   validators: {
     ...useCommon.validators(),
   },
+  docs: {
+    slots: {
+      default: 'Optional content shown below the label.',
+    },
+    emits: {
+      ...useInputtable.emitDocs(false),
+    },
+    methods: {
+      ...useInputtable.methodDocs(),
+    },
+  },
 }
 </script>
 
@@ -153,27 +169,28 @@ defineExpose({ focus, blur, reset, validate, setError })
   </label>
 </template>
 
-<style lang="postcss" module>
-  .radio {
-    border-color: var(--x-radio-border);
-    background-color: var(--x-radio-bg);
-
-    &_circle {
-      color: var(--x-radio-circle);
-    }
-
-    &--glow {
-      box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-radio-glow), 0 4px 6px -4px var(--x-radio-glow);
-    }
-
-    :global(.dark) &,
-    &:global(.dark) {
-      border-color: var(--x-radio-dark-border);
-      background-color: var(--x-radio-dark-bg);
-
-      &_circle {
-        color: var(--x-radio-dark-circle);
-      }
-    }
-  }
+<style module>
+.radio {
+  border-color: var(--x-radio-border);
+  background-color: var(--x-radio-bg);
+}
+
+.radio--glow {
+  box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-radio-glow), 0 4px 6px -4px var(--x-radio-glow);
+}
+
+.radio_circle {
+  color: var(--x-radio-circle);
+}
+
+:global(.dark) .radio,
+.radio:global(.dark) {
+  border-color: var(--x-radio-dark-border);
+  background-color: var(--x-radio-dark-bg);
+}
+
+:global(.dark) .radio_circle,
+.radio_circle:global(.dark) {
+  color: var(--x-radio-dark-circle);
+}
 </style>

package/src/components/radio/theme/Radio.base.theme.ts

@@ -3,7 +3,7 @@ import type { RadioTheme } from '../Radio.vue'
 const theme: RadioTheme = {
   classes: {
     wrapper: ({ data }) => {
-      const classes = ['inline-block relative cursor-pointer focus:outline-none group']
+      const classes = ['inline-block relative cursor-pointer focus:outline-hidden group']
 
       if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-5')
 

package/src/components/radio/theme/Radio.carbon.theme.ts

@@ -3,7 +3,7 @@ import type { RadioTheme } from  '../Radio.vue'
 const theme: RadioTheme = {
   classes: {
     wrapper: ({ data }) => {
-      const classes = ['inline-block relative cursor-pointer focus:outline-none group']
+      const classes = ['inline-block relative cursor-pointer focus:outline-hidden group']
 
       if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-8')
 

package/src/components/radioButton/RadioButton.vue

@@ -0,0 +1,168 @@
+<script lang="ts">
+import { variantBooleanProps } from '../../common/props'
+
+const radioButtonProps = {
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  value: {
+    type: [String, Number],
+    description: 'Value emitted when this option is selected (v-model / form-group).',
+  },
+  ...variantBooleanProps(),
+}
+
+export type RadioButtonProps = ExtractPublicPropTypes<typeof radioButtonProps>
+
+type InternalClasses = 'wrapper'
+type InternalExtraData = { selected: Ref<boolean>; isInsideFormGroup: boolean; }
+export interface RadioButtonTheme extends ThemeComponent<RadioButtonProps, InternalClasses, InternalExtraData> {}
+
+export default {
+  name: 'XRadioButton',
+  validators: {
+    ...useCommon.validators(),
+  },
+  docs: {
+    slots: {
+      default: 'Button label; falls back to the `label` prop.',
+    },
+    emits: {
+      ...useInputtable.emitDocs(false),
+    },
+    methods: {
+      ...useInputtable.methodDocs(),
+    },
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, type ExtractPublicPropTypes, type Ref, unref } from 'vue'
+import { useCommon } from '../../composables/useCommon'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useColors } from '../../composables/useColors'
+import { useInteractive } from '../../composables/useInteractive'
+import { useInputtable } from '../../composables/useInputtable'
+
+const props = defineProps(radioButtonProps)
+const emit = defineEmits(useInputtable.emits(false))
+
+const elRef = ref<HTMLElement | null>(null)
+
+const { focus, blur } = useInteractive(elRef)
+
+const {
+  errorInternal,
+  hideFooterInternal,
+  isInsideForm,
+  isInsideFormGroup,
+  isFirstValidation,
+  formGroup,
+  reset,
+  validate,
+  setError,
+} = useInputtable(props, { focus, emit, withListeners: false, formGroupJoined: true })
+
+const selected = computed({
+  get() {
+    const formGroupValue = unref(formGroup.value)
+
+    if (isInsideFormGroup) return formGroupValue === props.value
+
+    return props.value === props.modelValue
+  },
+  set() {
+    emit('update:modelValue', props.value)
+    formGroup.setValue(props.value as any)
+  },
+})
+
+function select() {
+  if (props.disabled || props.loading) return
+  emit('update:modelValue', props.value)
+  formGroup.setValue(props.value as any)
+}
+
+const { styles, classes, className } = useTheme('RadioButton', {}, props, {
+  selected,
+  isInsideFormGroup,
+})
+
+defineExpose({ focus, blur, reset, validate, setError })
+</script>
+
+<template>
+  <label
+    ref="elRef"
+    tabindex="0"
+    :aria-pressed="selected ? 'true' : 'false'"
+    :aria-disabled="(disabled || loading) ? 'true' : undefined"
+    :style="styles"
+    :class="[
+      className,
+      $style['btn'],
+      isInsideFormGroup ? $style['btn--grouped'] : '',
+      classes.wrapper,
+    ]"
+    @click="select"
+    @keypress.prevent.stop.space="select"
+  >
+    <input
+      v-model="selected"
+      :name="name"
+      :required="required"
+      :disabled="disabled || loading"
+      type="radio"
+      class="invisible absolute"
+    />
+    <slot>{{ label }}</slot>
+  </label>
+</template>
+
+<style module>
+.btn {
+  color: var(--x-radio-button-text);
+  background-color: var(--x-radio-button-bg);
+  border-color: var(--x-radio-button-border);
+}
+
+.btn:hover {
+  color: var(--x-radio-button-text-hover, var(--x-radio-button-text));
+  background-color: var(--x-radio-button-bg-hover, var(--x-radio-button-bg));
+  border-color: var(--x-radio-button-border-hover, var(--x-radio-button-border));
+}
+
+.btn--grouped {
+  border-radius: 0;
+}
+
+.btn--grouped:first-child {
+  border-top-left-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
+
+.btn--grouped:last-child {
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+}
+
+.btn--grouped + .btn--grouped {
+  margin-left: -1px;
+}
+
+:global(.dark) .btn,
+.btn:global(.dark) {
+  color: var(--x-radio-button-dark-text, var(--x-radio-button-text));
+  background-color: var(--x-radio-button-dark-bg, var(--x-radio-button-bg));
+  border-color: var(--x-radio-button-dark-border, var(--x-radio-button-border));
+}
+
+:global(.dark) .btn:hover,
+.btn:global(.dark):hover {
+  color: var(--x-radio-button-dark-text-hover, var(--x-radio-button-dark-text, var(--x-radio-button-text)));
+  background-color: var(--x-radio-button-dark-bg-hover, var(--x-radio-button-dark-bg, var(--x-radio-button-bg)));
+  border-color: var(--x-radio-button-dark-border-hover, var(--x-radio-button-dark-border, var(--x-radio-button-border)));
+}
+</style>

package/src/components/radioButton/__tests__/RadioButton.spec.ts

@@ -0,0 +1,48 @@
+import { defineComponent, ref } from 'vue'
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RadioButton from '../RadioButton.vue'
+import FormGroup from '../../formGroup/FormGroup.vue'
+
+describe('RadioButton', () => {
+  it('updates model value when clicked', async () => {
+    const wrapper = mount(RadioButton, {
+      props: {
+        value: 'a',
+        modelValue: '',
+      },
+    })
+
+    await wrapper.trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['a'])
+  })
+
+  it('acts as grouped options inside FormGroup', async () => {
+    const Demo = defineComponent({
+      components: { XFormGroup: FormGroup, XRadioButton: RadioButton },
+      setup() {
+        const value = ref('a')
+
+        return { value }
+      },
+      template: `
+        <x-form-group v-model="value">
+          <x-radio-button value="a" label="Option A" />
+          <x-radio-button value="b" label="Option B" />
+        </x-form-group>
+      `,
+    })
+
+    const wrapper = mount(Demo)
+    const radios = wrapper.findAllComponents(RadioButton)
+
+    expect(radios[0]?.attributes('aria-pressed')).toBe('true')
+    expect(radios[1]?.attributes('aria-pressed')).toBe('false')
+
+    await radios[1]?.trigger('click')
+
+    expect(radios[0]?.attributes('aria-pressed')).toBe('false')
+    expect(radios[1]?.attributes('aria-pressed')).toBe('true')
+  })
+})

package/src/components/radioButton/index.ts

@@ -0,0 +1,2 @@
+export { default as XRadioButton } from './RadioButton.vue'
+export type { RadioButtonProps, RadioButtonTheme } from './RadioButton.vue'

package/src/components/radioButton/theme/RadioButton.base.theme.ts

@@ -0,0 +1,155 @@
+import type { RadioButtonTheme } from '../RadioButton.vue'
+
+const theme: RadioButtonTheme = {
+  classes: {
+    wrapper({ props, data }) {
+      const classes = [
+        'relative inline-flex items-center justify-center cursor-pointer select-none',
+        'transition duration-150 font-medium whitespace-nowrap border',
+        'focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-secondary-300',
+        'active:!shadow-none',
+      ]
+
+      if (props.size === 'xs') classes.push('py-1 px-2 text-xs')
+      else if (props.size === 'sm') classes.push('py-1.5 px-3 text-sm')
+      else if (props.size === 'lg') classes.push('py-3 px-5 text-lg')
+      else if (props.size === 'xl') classes.push('py-4 px-6 text-xl')
+      else classes.push('py-2 px-4 text-sm')
+
+      if (!data.isInsideFormGroup) classes.push(props.rounded ? 'rounded-full' : 'rounded-md')
+
+      if (!props.flat && !props.light && !props.ghost && !props.disabled && !props.loading) {
+        classes.push('shadow-xs')
+      }
+
+      if (props.disabled) classes.push('cursor-not-allowed')
+      else if (props.loading) classes.push('cursor-default')
+
+      return classes
+    },
+  },
+
+  styles({ props, colors, css, data }) {
+    const gray = colors.getPalette('gray')
+    const color = colors.getPalette(props.color)
+    const isLight = props.color && props.light
+
+    if (props.disabled) {
+      if (isLight) {
+        return css.variables({
+          bg: color[50],
+          text: color[200],
+          border: 'transparent',
+          dark: {
+            bg: gray[800],
+            text: color[900],
+            border: 'transparent',
+          },
+        })
+      }
+
+      return css.variables({
+        bg: gray[50],
+        text: gray[300],
+        border: gray[200],
+        dark: {
+          bg: gray[900],
+          text: gray[600],
+          border: gray[700],
+        },
+      })
+    }
+
+    if (isLight) {
+      if (data.selected) {
+        return css.variables({
+          bg: color[500],
+          text: '#fff',
+          border: props.outlined ? color[600] : 'transparent',
+          hover: { bg: color[600] },
+          dark: {
+            bg: color[600],
+            text: '#fff',
+            border: props.outlined ? color[700] : 'transparent',
+            hover: { bg: color[700] },
+          },
+        })
+      }
+
+      return css.variables({
+        bg: color[50],
+        text: color[600],
+        border: props.outlined ? color[500] : 'transparent',
+        hover: { bg: color[100] },
+        active: { bg: color[200] },
+        dark: {
+          bg: color[900],
+          text: color[200],
+          border: props.outlined ? color[500] : 'transparent',
+          hover: { bg: color[800] },
+          active: { bg: color[700] },
+        },
+      })
+    }
+
+    if (props.outlined) {
+      if (data.selected) {
+        return css.variables({
+          bg: color[500],
+          text: '#fff',
+          border: color[600],
+          hover: { bg: color[600] },
+          dark: {
+            bg: color[600],
+            text: '#fff',
+            border: color[700],
+            hover: { bg: color[700] },
+          },
+        })
+      }
+
+      return css.variables({
+        text: color[600],
+        border: color[600],
+        hover: { bg: color[100] },
+        active: { bg: color[200] },
+        dark: {
+          text: color[500],
+          border: color[500],
+          hover: { bg: gray[800] },
+          active: { bg: gray[700] },
+        },
+      })
+    }
+
+    if (data.selected) {
+      return css.variables({
+        bg: color[500],
+        text: '#fff',
+        border: color[600],
+        hover: { bg: color[600] },
+        dark: {
+          bg: color[600],
+          text: '#fff',
+          border: color[700],
+          hover: { bg: color[700] },
+        },
+      })
+    }
+
+    return css.variables({
+      bg: '#fff',
+      text: gray[700],
+      border: gray[300],
+      hover: { bg: gray[50], border: gray[400] },
+      dark: {
+        bg: gray[800],
+        text: gray[300],
+        border: gray[600],
+        hover: { bg: gray[700], border: gray[500] },
+      },
+    })
+  },
+}
+
+export default theme

package/src/components/radioButton/theme/RadioButton.carbon.theme.ts

@@ -0,0 +1,31 @@
+import type { RadioButtonTheme } from '../RadioButton.vue'
+import BaseTheme from './RadioButton.base.theme'
+
+const theme: RadioButtonTheme = {
+  classes: {
+    wrapper({ props, data }) {
+      const classes = [
+        'relative inline-flex items-center justify-center cursor-pointer select-none',
+        'transition duration-150 font-light whitespace-nowrap border text-sm tracking-wide',
+        'active:!shadow-none',
+      ]
+
+      if (props.size === 'xs') classes.push('py-1 px-2')
+      else if (props.size === 'sm') classes.push('py-1.5 px-3')
+      else if (props.size === 'lg') classes.push('py-3 px-5')
+      else if (props.size === 'xl') classes.push('py-4 px-6')
+      else classes.push('py-2 px-4')
+
+      if (!data.isInsideFormGroup) classes.push(props.rounded ? 'rounded-full' : '')
+
+      if (props.disabled) classes.push('cursor-not-allowed')
+      else if (props.loading) classes.push('cursor-default')
+
+      return classes
+    },
+  },
+
+  styles: BaseTheme.styles,
+}
+
+export default theme