@indielayer/ui 1.18.0 → 2.0.0

package/src/components/popover/Popover.vue

@@ -146,10 +146,7 @@ const { styles, classes, className } = useTheme('Popover', {}, props)
   </v-dropdown>
 </template>
 
-<style lang="postcss">
-/* stylelint-disable no-duplicate-selectors */
-/* stylelint-disable no-descending-specificity */
-/* stylelint-disable selector-class-pattern */
+<style>
 .resize-observer {
   position: absolute;
   top: 0;
@@ -163,18 +160,18 @@ const { styles, classes, className } = useTheme('Popover', {}, props)
   display: block;
   overflow: hidden;
   opacity: 0;
+}
 
-  object {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    pointer-events: none;
-    z-index: -1;
-  }
+.resize-observer object {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: -1;
 }
 
 .v-popper__popper {

package/src/components/progress/Progress.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const progressProps = {
   ...useColors.props('primary'),
   percentage: {
@@ -6,12 +8,12 @@ const progressProps = {
     default: 0,
     validator: (value: number) => value >= 0 && value <= 100,
   },
-  gradient: Boolean,
+  gradient: optionalBooleanProp(),
   animate: {
     type: Boolean,
     default: true,
   },
-  thick: Boolean,
+  thick: optionalBooleanProp(),
 }
 
 export type ProgressProps = ExtractPublicPropTypes<typeof progressProps>

package/src/components/radio/Radio.vue

@@ -1,11 +1,13 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const radioProps = {
   ...useCommon.props(),
   ...useColors.props('primary'),
   ...useInteractive.props(),
   ...useInputtable.props(),
   value: [String, Number],
-  glow: Boolean,
+  glow: optionalBooleanProp(),
 }
 
 export type RadioProps = ExtractPublicPropTypes<typeof radioProps>
@@ -153,27 +155,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,154 @@
+<script lang="ts">
+import { variantBooleanProps } from '../../common/props'
+
+const radioButtonProps = {
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  value: [String, Number],
+  ...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(),
+  },
+}
+</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

package/src/components/scroll/Scroll.vue

@@ -1,8 +1,10 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const scrollProps = {
-  shadow: Boolean,
-  horizontal: Boolean,
-  mousewheel: Boolean,
+  shadow: optionalBooleanProp(),
+  horizontal: optionalBooleanProp(),
+  mousewheel: optionalBooleanProp(),
   scrollbar: {
     type: Boolean,
     default: true,
@@ -86,7 +88,7 @@ defineExpose({ scrollEl: scrollEl as Ref<HTMLElement | null> })
   </div>
 </template>
 
-<style lang="postcss" module>
+<style module>
 .scrollwrap {
   &::before,
   &::after {