@indielayer/ui 1.2.0 → 1.4.0

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

@@ -0,0 +1,9 @@
+import type { PopoverContainerTheme } from '../PopoverContainer.vue'
+
+const theme: PopoverContainerTheme = {
+  classes: {
+    wrapper: 'block w-full bg-white dark:bg-gray-700 shadow-lg rounded-md border  border-gray-200 dark:border-gray-800',
+  },
+}
+
+export default theme

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

@@ -0,0 +1,9 @@
+import type { PopoverContainerTheme } from '../PopoverContainer.vue'
+
+const theme: PopoverContainerTheme = {
+  classes: {
+    wrapper: 'block w-full bg-gray-100 dark:bg-gray-700 shadow-lg border border-gray-200 dark:border-gray-800 text-sm',
+  },
+}
+
+export default theme

package/src/components/progress/Progress.vue

@@ -16,19 +16,20 @@ const progressProps = {
 
 export type ProgressProps = ExtractPublicPropTypes<typeof progressProps>
 
+type InternalClasses = 'wrapper' | 'list' | 'item'
+export interface ProgressTheme extends ThemeComponent<ProgressProps, InternalClasses> {}
+
 export default { name: 'XProgress' }
 </script>
 
 <script setup lang="ts">
 import type { ExtractPublicPropTypes } from 'vue'
-import { useColors } from '../../composables/colors'
-import { useTheme } from '../../composables/theme'
-
-import theme from './Progress.theme'
+import { useColors } from '../../composables/useColors'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(progressProps)
 
-const { styles, classes, className } = useTheme('progress', theme, props)
+const { styles, classes, className } = useTheme('Progress', {}, props)
 </script>
 
 <template>

package/src/components/progress/index.ts

@@ -1,3 +1,2 @@
 export { default as XProgress } from './Progress.vue'
-export type { ProgressProps } from './Progress.vue'
-export type { ProgressTheme } from './Progress.theme'
+export type { ProgressProps, ProgressTheme } from './Progress.vue'

package/src/components/progress/{Progress.theme.ts → theme/Progress.base.theme.ts}

@@ -1,14 +1,6 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { ProgressProps } from './Progress.vue'
+import type { ProgressTheme } from '../Progress.vue'
 
-type InternalClasses = 'wrapper' | 'list' | 'item'
-
-interface InternalTheme extends ThemeComponent<ProgressProps, InternalClasses> {}
-export interface ProgressTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<ProgressProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
+const theme: ProgressTheme = {
   classes: {
     wrapper: ({ props }) => `relative rounded bg-gray-100 dark:bg-gray-700 overflow-hidden pointer-events-none ${props.thick ? 'h-1.5' : 'h-1'}`,
 

package/src/components/progress/theme/Progress.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { ProgressTheme } from '../Progress.vue'
+
+import BaseTheme from './Progress.base.theme'
+
+const theme: ProgressTheme = BaseTheme
+
+export default theme

package/src/components/radio/Radio.vue

@@ -4,14 +4,16 @@ const radioProps = {
   ...useColors.props('primary'),
   ...useInteractive.props(),
   ...useInputtable.props(),
-  value: [String, Number, Boolean, Function, Object, Array],
-  label: String,
-  helper: String,
+  value: [String, Number],
   glow: Boolean,
 }
 
 export type RadioProps = ExtractPublicPropTypes<typeof radioProps>
 
+type InternalClasses = 'wrapper' | 'circle' | 'circleIcon' | 'label' | 'content'
+type InternalExtraData = { selected: Ref<boolean>; isInsideForm: boolean; isInsideFormGroup: boolean; }
+export interface RadioTheme extends ThemeComponent<RadioProps, InternalClasses, InternalExtraData> {}
+
 export default {
   name: 'XRadio',
   validators: {
@@ -21,17 +23,15 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, type ExtractPublicPropTypes } from 'vue'
-import { useCommon } from '../../composables/common'
-import { useTheme } from '../../composables/theme'
-import { useColors } from '../../composables/colors'
-import { useInteractive } from '../../composables/interactive'
-import { useInputtable } from '../../composables/inputtable'
+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'
 
 import XSpinner from '../../components/spinner/Spinner.vue'
-import XInputError from '../helpers/InputError'
-
-import theme from './Radio.theme'
+import XInputFooter from '../inputFooter/InputFooter.vue'
 
 const props = defineProps(radioProps)
 
@@ -39,25 +39,49 @@ 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 })
+
 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)
   },
 })
 
-const { focus, blur } = useInteractive(elRef)
+function select() {
+  emit('update:modelValue', props.value)
+  formGroup.setValue(props.value as any)
+}
 
-const {
-  errorInternal,
-  reset,
-  validate,
-  setError,
-} = useInputtable(props, { focus, emit, withListeners: false })
+const listeners = {
+  input: () => {
+    if (isInsideFormGroup) return
+    setTimeout(() => {
+      if (props.validateOnInput && !isFirstValidation.value) validate(props.modelValue)
+    }, 0)
+  },
+}
 
-const { styles, classes, className } = useTheme('radio', theme, props, { selected })
+const { styles, classes, className } = useTheme('Radio', {}, props, { selected, isInsideForm, isInsideFormGroup })
 
 defineExpose({ focus, blur, reset, validate, setError })
 </script>
@@ -73,19 +97,21 @@ defineExpose({ focus, blur, reset, validate, setError })
       className,
       classes.wrapper,
     ]"
-    @keypress.prevent.stop.space="$emit('update:modelValue', value)"
+    @keypress.prevent.stop.space="select"
   >
     <div
       class="flex items-center"
       :class="{ 'cursor-not-allowed': disabled }"
     >
       <input
+        :id="id"
         v-model="selected"
         :name="name"
         :required="required"
         :disabled="disabled || loading"
         type="radio"
         class="invisible absolute"
+        v-on="listeners"
       />
       <div
         :class="[
@@ -123,7 +149,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       </div>
     </div>
 
-    <x-input-error :error="errorInternal" :helper="helper"/>
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
   </label>
 </template>
 

package/src/components/radio/index.ts

@@ -1,3 +1,2 @@
 export { default as XRadio } from './Radio.vue'
-export type { RadioProps } from './Radio.vue'
-export type { RadioTheme } from './Radio.theme'
+export type { RadioProps, RadioTheme } from './Radio.vue'

package/src/components/radio/{Radio.theme.ts → theme/Radio.base.theme.ts}

@@ -1,18 +1,14 @@
-import type { Ref } from 'vue'
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { RadioProps } from './Radio.vue'
+import type { RadioTheme } from '../Radio.vue'
 
-type InternalClasses = 'wrapper' | 'circle' | 'circleIcon' | 'label' | 'content'
-type InternalExtraData = { selected: Ref<boolean>; }
+const theme: RadioTheme = {
+  classes: {
+    wrapper: ({ data }) => {
+      const classes = ['inline-block relative cursor-pointer focus:outline-none group']
 
-interface InternalTheme extends ThemeComponent<RadioProps, InternalClasses, InternalExtraData> {}
-export interface RadioTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<RadioProps, InternalClasses, InternalExtraData>>;
-}
+      if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-3')
 
-const theme: InternalTheme = {
-  classes: {
-    wrapper: 'inline-block relative cursor-pointer focus:outline-none group',
+      return classes
+    },
 
     circle: ({ props }) => {
       let c = 'rounded-full flex justify-center items-center shrink-0 border-2 outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline'
@@ -37,7 +33,7 @@ const theme: InternalTheme = {
       return c
     },
 
-    label: ({ props, data }) => {
+    label: ({ props }) => {
       let c = 'font-medium text-gray-800 dark:text-gray-200 pl-2'
 
       if (props.size === 'xs') c += ' text-xs'

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

@@ -0,0 +1,110 @@
+import type { RadioTheme } from  '../Radio.vue'
+
+const theme: RadioTheme = {
+  classes: {
+    wrapper: ({ data }) => {
+      const classes = ['inline-block relative cursor-pointer focus:outline-none group']
+
+      if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-8')
+
+      return classes
+    },
+
+    circle: ({ props }) => {
+      const classes = ['rounded-full flex justify-center items-center shrink-0 border outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline']
+
+      if (props.size === 'xs' || props.size === 'sm') classes.push('h-3 w-3')
+      else if (props.size === 'xl') classes.push('h-5 w-5')
+      else classes.push('h-4 w-4')
+
+      return classes
+    },
+
+    circleIcon: ({ props, data }) => {
+      const c = []
+
+      if (!data.selected) c.push('opacity-0')
+
+      else if (props.size === 'lg') c.push('h-2.5')
+      else if (props.size === 'xl') c.push('h-3')
+      else c.push('h-2')
+
+      return c
+    },
+
+    label: 'text-sm text-gray-800 dark:text-gray-200 pl-2',
+
+    content: 'pl-2',
+  },
+
+  styles: ({ props, colors, css, data }) => {
+    const gray = colors.getPalette('gray')
+    const color = colors.getPalette(props.color)
+    const vars = []
+
+    if (props.loading) {
+      return css.variables({
+        bg: 'transparent',
+        border: 'transparent',
+        dark: {
+          bg: 'transparent',
+          border: 'transparent',
+        },
+      })
+    }
+
+    if (props.disabled) {
+      if (data.selected) {
+        vars.push(css.variables({
+          bg: 'transparent',
+          border: gray[200],
+          circle: gray[200],
+          dark: {
+            bg: 'transparent',
+            border: gray[700],
+            circle: gray[700],
+          },
+        }))
+      } else {
+        vars.push(css.variables({
+          bg: gray[200],
+          border: gray[200],
+          dark: {
+            bg: gray[700],
+            border: gray[700],
+          },
+        }))
+      }
+    } else {
+      if (data.selected) {
+        vars.push(css.variables({
+          bg: 'transparent',
+          border: color[500],
+          circle: color[500],
+          dark: {
+            bg: 'transparent',
+            border: color[500],
+            circle: color[500],
+          },
+        }))
+      } else {
+        vars.push(css.variables({
+          bg: '#fff',
+          border: props.glow ? color[300] : gray[900],
+          dark: {
+            bg: gray[900],
+            border: props.glow ? color[300] : gray[300],
+          },
+        }))
+      }
+
+      if (props.glow) {
+        vars.push(css.get('glow', colors.getColorOpacity(color[500], 0.5)))
+      }
+    }
+
+    return vars
+  },
+}
+
+export default theme

package/src/components/scroll/Scroll.vue

@@ -11,21 +11,22 @@ const scrollProps = {
 
 export type ScrollProps = ExtractPublicPropTypes<typeof scrollProps>
 
+type InternalClasses = 'wrapper'
+export interface ScrollTheme extends ThemeComponent<ScrollProps, InternalClasses> {}
+
 export default { name: 'XScroll' }
 </script>
 
 <script setup lang="ts">
-import { ref, toRefs, type ExtractPublicPropTypes } from 'vue'
+import { ref, toRefs, type ExtractPublicPropTypes, type Ref } from 'vue'
 import { useScroll, useResizeObserver, useEventListener } from '@vueuse/core'
-import { useTheme } from '../../composables/theme'
-
-import theme from './Scroll.theme'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(scrollProps)
 
 const scrollEl = ref<HTMLElement | null>(null)
 
-const { x, y, isScrolling, arrivedState, directions } = useScroll(scrollEl)
+const { arrivedState } = useScroll(scrollEl)
 const { left, right, top, bottom } = toRefs(arrivedState)
 
 useResizeObserver(scrollEl, triggerScroll)
@@ -42,7 +43,9 @@ function triggerScroll() {
   scrollEl.value?.dispatchEvent(new CustomEvent('scroll'))
 }
 
-const { styles, classes, className } = useTheme('scroll', theme, props)
+const { styles, classes, className } = useTheme('Scroll', {}, props)
+
+defineExpose({ scrollEl: scrollEl as Ref<HTMLElement | null> })
 </script>
 
 <template>

package/src/components/scroll/index.ts

@@ -1,3 +1,2 @@
 export { default as XScroll } from './Scroll.vue'
-export type { ScrollProps } from './Scroll.vue'
-export type { ScrollTheme } from './Scroll.theme'
+export type { ScrollProps, ScrollTheme } from './Scroll.vue'

package/src/components/scroll/theme/Scroll.base.theme.ts

@@ -0,0 +1,9 @@
+import type { ScrollTheme } from '../Scroll.vue'
+
+const theme: ScrollTheme = {
+  classes: {
+    wrapper: '',
+  },
+}
+
+export default theme

package/src/components/scroll/theme/Scroll.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { ScrollTheme } from '../Scroll.vue'
+
+import BaseTheme from './Scroll.base.theme'
+
+const theme: ScrollTheme = BaseTheme
+
+export default theme