@indielayer/ui 1.2.0 → 1.3.0

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

@@ -0,0 +1,104 @@
+import type { RadioTheme } from  '../Radio.vue'
+
+const theme: RadioTheme = {
+  classes: {
+    wrapper: 'inline-block relative cursor-pointer focus:outline-none group',
+
+    circle: ({ props }) => {
+      let c = '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') c += ' h-4 w-4'
+      if (props.size === 'xl') c += ' h-6 w-6'
+      else c += ' h-5 w-5'
+
+      return c
+    },
+
+    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[300],
+          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

package/src/components/select/Select.vue

@@ -9,6 +9,7 @@ const selectProps = {
   label: String,
   helper: String,
   flat: Boolean,
+  native: Boolean,
 }
 
 export type SelectOption = {
@@ -19,6 +20,10 @@ export type SelectOption = {
 
 export type SelectProps = ExtractPublicPropTypes<typeof selectProps>
 
+type InternalClasses = 'wrapper' | 'box' | 'content' | 'iconWrapper' | 'icon'
+type InternalExtraData = { errorInternal: Ref<boolean>; }
+export interface SelectTheme extends ThemeComponent<SelectProps, InternalClasses, InternalExtraData> {}
+
 export default {
   name: 'XSelect',
   validators: {
@@ -28,32 +33,31 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, watch, type PropType, type ExtractPublicPropTypes } from 'vue'
+import { computed, ref, watch, type PropType, type ExtractPublicPropTypes, type Ref, nextTick, unref } from 'vue'
 import { useEventListener } from '@vueuse/core'
-import { useCommon } from '../../composables/common'
-import { useInputtable } from '../../composables/inputtable'
-import { useInteractive } from '../../composables/interactive'
-import { useTheme } from '../../composables/theme'
+import { useCommon } from '../../composables/useCommon'
+import { useInputtable } from '../../composables/useInputtable'
+import { useInteractive } from '../../composables/useInteractive'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { checkIcon, chevronDownIcon } from '../../common/icons'
 
-import XTag from '../../components/tag/Tag.vue'
-import XIcon from '../../components/icon/Icon.vue'
-import XMenuItem from '../../components/menu/MenuItem.vue'
-import XSpinner from '../../components/spinner/Spinner.vue'
-import XPopover from '../../components/popover/Popover.vue'
-import XPopoverContainer from '../../components/popover/PopoverContainer.vue'
-import XInputError from '../helpers/InputError'
-
-import theme from './Select.theme'
+import XLabel from '../label/Label.vue'
+import XTag from '../tag/Tag.vue'
+import XIcon from '../icon/Icon.vue'
+import XMenuItem from '../menu/MenuItem.vue'
+import XSpinner from '../spinner/Spinner.vue'
+import XPopover from '../popover/Popover.vue'
+import XPopoverContainer from '../popover/PopoverContainer.vue'
+import XInputFooter from '../inputFooter/InputFooter.vue'
 
 const  props = defineProps(selectProps)
 
 const emit = defineEmits(useInputtable.emits())
 
 const elRef = ref<HTMLElement | null>(null)
-const labelRef = ref<HTMLElement | null>(null)
-const itemsRef = ref<typeof XMenuItem[] | null>(null)
-const popoverRef = ref<typeof XPopover | null>(null)
+const labelRef = ref<InstanceType<typeof XLabel> | null>(null)
+const itemsRef = ref<InstanceType<typeof XMenuItem>[] | null>(null)
+const popoverRef = ref<InstanceType<typeof XPopover> | null>(null)
 const selectedIndex = ref<number | undefined>()
 
 const selected = computed<any | any[]>({
@@ -96,13 +100,41 @@ const internalOptions = computed(() => {
 
 const availableOptions = computed(() => props.options?.filter((option) => !option.disabled))
 
-watch(() => popoverRef.value?.isOpen, () => {
-  if (popoverRef.value?.isOpen && (props.multiple || typeof selectedIndex.value === 'undefined'))
-    findSelectableIndex(-1)
+const isOpen = computed(() => popoverRef.value?.isOpen)
+
+watch(isOpen, (isOpenValue) => {
+  if (isOpenValue) {
+    findSelectedIndex()
+    setTimeout(() => {
+      scrollToIndex(selectedIndex.value || 0)
+    }, 50)
+
+    if (props.multiple || typeof selectedIndex.value === 'undefined') {
+      findSelectableIndex(-1)
+    }
+  }
 })
 
+function findSelectedIndex() {
+  if (props.multiple) {
+    if (Array.isArray(selected.value) && selected.value.length > 0) {
+      const index = internalOptions.value.findIndex((option) => option.value === selected.value[0])
+
+      if (index !== -1) selectedIndex.value = index
+    }
+  } else {
+    const index = internalOptions.value.findIndex((option) => option.value === selected.value)
+
+    if (index !== -1) selectedIndex.value = index
+  }
+}
+
+function scrollToIndex(index: number) {
+  if (itemsRef.value) itemsRef.value[index]?.$el.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+}
+
 watch(selectedIndex, (index) => {
-  if (typeof index !== 'undefined' && itemsRef.value) itemsRef.value[index].$el.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+  if (typeof index !== 'undefined' && itemsRef.value) scrollToIndex(index)
 })
 
 function findSelectableIndex(start: number | undefined, direction = 'down') {
@@ -135,44 +167,6 @@ function findSelectableIndex(start: number | undefined, direction = 'down') {
   }
 }
 
-useEventListener(labelRef, 'keydown', handleKeydown)
-
-function handleKeydown(e: KeyboardEvent) {
-  if (internalOptions.value.length === 0) return
-
-  if (e.code === 'ArrowDown') {
-    e.preventDefault()
-    if (!popoverRef.value?.isOpen) {
-      popoverRef.value?.open()
-
-      return
-    }
-    findSelectableIndex(selectedIndex.value, 'down')
-  } else if (e.code === 'ArrowUp') {
-    e.preventDefault()
-    if (!popoverRef.value?.isOpen) return
-    findSelectableIndex(selectedIndex.value, 'up')
-  } else if (e.code === 'Enter' || e.code === 'Space') {
-    e.preventDefault()
-    e.stopPropagation()
-    if (!popoverRef.value?.isOpen) {
-      popoverRef.value?.open()
-
-      return
-    }
-    if (typeof selectedIndex.value !== 'undefined') {
-      handleOptionClick(internalOptions.value[selectedIndex.value].value)
-      if (!props.multiple) popoverRef.value?.close()
-    }
-  } else if (e.code === 'Escape') {
-    e.preventDefault()
-    e.stopPropagation()
-    popoverRef.value?.close()
-  } else if (e.code === 'Tab') {
-    popoverRef.value?.close()
-  }
-}
-
 function handleOptionClick(value: string | number) {
   const option = props.options?.find((i) => i.value === value)
 
@@ -193,6 +187,14 @@ function handleOptionClick(value: string | number) {
   } else {
     selected.value = value
   }
+
+  if (!props.native) {
+    nextTick(() => {
+      elRef.value?.dispatchEvent(new Event('input'))
+      elRef.value?.dispatchEvent(new Event('change'))
+      labelRef.value?.$el.focus()
+    })
+  }
 }
 
 function isEmpty(value: string | number | []) {
@@ -232,58 +234,147 @@ const {
   reset,
   validate,
   setError,
+  isFocused,
   isInsideForm,
-} = useInputtable(props, { focus, emit, withListeners: false })
+} = useInputtable(props, { focus, emit, withListeners: true })
+
+const labelListeners = computed(() => {
+  const { focus, blur } = unref(inputListeners)
+
+  return {
+    focus,
+    blur,
+  }
+})
+
+let keyNavigationListener: null | (() => void) = null
+
+watch([isFocused, isOpen], ([isFocusedValue, isOpenValue]) => {
+  if ((isFocusedValue || isOpenValue)) {
+    if (!keyNavigationListener) keyNavigationListener = useEventListener(document, 'keydown', handleKeyNavigation)
+  } else {
+    if (keyNavigationListener) {
+      keyNavigationListener()
+      keyNavigationListener = null
+    }
+  }
+}, {
+  immediate: true,
+})
+
+function handleKeyNavigation(e: KeyboardEvent) {
+  if (internalOptions.value.length === 0) return
+
+  if (e.code === 'ArrowDown') {
+    e.preventDefault()
+    if (!isOpen.value) {
+      popoverRef.value?.show()
+
+      return
+    }
+    findSelectableIndex(selectedIndex.value, 'down')
+  } else if (e.code === 'ArrowUp') {
+    e.preventDefault()
+    if (!isOpen.value) {
+      popoverRef.value?.show()
+
+      return
+    }
+    findSelectableIndex(selectedIndex.value, 'up')
+  } else if (e.code === 'Enter' || e.code === 'Space') {
+    e.preventDefault()
+    e.stopPropagation()
+    if (!isOpen.value) {
+      popoverRef.value?.show()
+
+      return
+    }
+    if (typeof selectedIndex.value !== 'undefined') {
+      handleOptionClick(internalOptions.value[selectedIndex.value].value)
+      if (!props.multiple) popoverRef.value?.hide()
+    }
+  } else if (e.code === 'Tab') {
+    if (isOpen.value) {
+      e.preventDefault()
+      popoverRef.value?.hide()
+
+      if (!props.native) {
+        nextTick(() => {
+          labelRef.value?.$el.focus()
+        })
+      }
+    }
+  }
+}
 
-const { styles, classes, className } = useTheme('select', theme, props, { errorInternal })
+const { styles, classes, className } = useTheme('Select', {}, props, { errorInternal })
 
 defineExpose({ focus, blur, reset, validate, setError })
 </script>
 
 <template>
-  <label
+  <x-label
     ref="labelRef"
     tabindex="0"
-    class="group relative"
+    class="group"
     :style="styles"
+    :disabled="disabled"
+    :required="required"
+    :is-inside-form="isInsideForm"
+    :label="label"
     :class="[
       className,
       classes.wrapper,
-      { 'mb-3': isInsideForm }
     ]"
+    v-on="labelListeners"
   >
-    <p
-      v-if="label"
-      :class="classes.label"
-      v-text="label"
-    ></p>
     <div class="relative">
+      <div v-if="native && !multiple" :class="classes.box" @click="elRef?.click()">
+        <template v-if="multiple && Array.isArray(selected) && selected.length > 0">
+          <div class="flex gap-1 flex-wrap">
+            <x-tag
+              v-for="value in selected"
+              :key="value"
+              size="sm"
+              removable
+              @remove="(e: Event) => { handleRemove(e, value) }"
+            >{{ getLabel(value) }}</x-tag>
+          </div>
+        </template>
+        <template v-else-if="!multiple && !isEmpty(selected)">
+          {{ getLabel(selected) }}
+        </template>
+        <template v-else>
+          <div
+            v-if="placeholder"
+            class="text-gray-400 dark:text-gray-500"
+          >
+            {{ placeholder }}
+          </div>
+          <div v-else>&nbsp;</div>
+        </template>
+      </div>
       <x-popover
+        v-else
         ref="popoverRef"
         block
-        :disabled="disabled || loading"
+        :disabled="disabled || loading || readonly"
         :dismiss-on-click="!multiple"
         align="left"
       >
         <div
-          :class="[
-            classes.box,
-            {
-              // error
-              'border-red-500 dark:border-red-400 group-focus:outline-red-500': errorInternal,
-              'group-focus:outline-[color:var(--x-select-border)]': !disabled && !errorInternal
-            },
-          ]"
+          :class="[classes.box]"
         >
           <template v-if="multiple && Array.isArray(selected) && selected.length > 0">
-            <x-tag
-              v-for="value in selected"
-              :key="value"
-              size="sm"
-              class="mr-1"
-              removable
-              @remove="(e: Event) => { handleRemove(e, value) }"
-            >{{ getLabel(value) }}</x-tag>
+            <div class="flex gap-1 flex-wrap">
+              <x-tag
+                v-for="value in selected"
+                :key="value"
+                size="sm"
+                removable
+                @remove="(e: Event) => { handleRemove(e, value) }"
+              >{{ getLabel(value) }}</x-tag>
+            </div>
           </template>
           <template v-else-if="!multiple && !isEmpty(selected)">
             {{ getLabel(selected) }}
@@ -313,6 +404,7 @@ defineExpose({ focus, blur, reset, validate, setError })
                 :selected="index === selectedIndex"
                 color="primary"
                 filled
+                @click="() => !multiple && popoverRef?.hide()"
               />
             </template>
             <div v-else class="px-2 text-center text-gray-400">
@@ -325,7 +417,8 @@ defineExpose({ focus, blur, reset, validate, setError })
       <select
         ref="elRef"
         v-model="selected"
-        class="hidden"
+        tabindex="-1"
+        :class="native && !multiple ? 'absolute inset-0 w-full h-full cursor-pointer opacity-0' : 'hidden'"
         :name="name"
         :disabled="disabled || loading"
         :multiple="multiple"
@@ -347,16 +440,13 @@ defineExpose({ focus, blur, reset, validate, setError })
         <slot v-else name="icon">
           <x-icon
             :icon="chevronDownIcon"
-            :class="[
-              classes.icon,
-              disabled ? 'text-gray-600 dark:text-gray-500': 'text-gray-500 dark:text-gray-400'
-            ]"
+            :class="[classes.icon]"
           />
         </slot>
 
       </div>
     </div>
 
-    <x-input-error :error="errorInternal" :helper="helper"/>
-  </label>
+    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+  </x-label>
 </template>

package/src/components/select/index.ts

@@ -1,3 +1,2 @@
 export { default as XSelect } from './Select.vue'
-export type { SelectProps, SelectOption } from './Select.vue'
-export type { SelectTheme } from './Select.theme'
+export type { SelectProps, SelectOption, SelectTheme } from './Select.vue'

package/src/components/select/theme/Select.base.theme.ts

@@ -0,0 +1,56 @@
+import type { SelectTheme } from '../Select.vue'
+
+const theme: SelectTheme = {
+  classes: {
+    wrapper: '',
+
+    box: ({ props, data }) => {
+      const classes = ['w-full border border-gray-300 dark:border-gray-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out rounded-md shadow-sm']
+
+      if (!data.errorInternal && !props.disabled) classes.push('hover:border-gray-400 dark:hover:border-gray-500')
+
+      if (props.size === 'xs') classes.push('px-2 py-1 text-xs')
+      else if (props.size === 'sm') classes.push('px-2 py-2 text-sm')
+      else if (props.size === 'lg') classes.push('px-4 py-3 text-lg')
+      else if (props.size === 'xl') classes.push('px-5 py-4 text-xl')
+      else classes.push('px-3 py-2')
+
+      if (props.disabled) classes.push('bg-gray-100 dark:bg-gray-900 text-gray-500 cursor-not-allowed')
+      else classes.push('bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200')
+
+      if (data.errorInternal) {
+        classes.push('border-red-500 dark:border-red-400 group-focus:outline-red-500')
+      } else if (!props.disabled) {
+        classes.push('group-focus:outline-[color:var(--x-select-border)]')
+      }
+
+      return classes
+    },
+
+    content: 'py-1 max-h-72 overflow-scroll',
+
+    iconWrapper: 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2',
+
+    icon: ({ props }) => {
+      const classes = ['']
+
+      if (props.size === 'sm' || props.size === 'xs') classes.push('h-3 w-3')
+      else if (props.size === 'lg') classes.push('h-6 w-6')
+      else if (props.size === 'xl') classes.push('h-7 w-7')
+      else classes.push('h-5 w-5')
+
+      if (props.disabled) classes.push('text-gray-300 dark:text-gray-500')
+      else classes.push('text-gray-500 dark:text-gray-400')
+
+      return classes
+    },
+  },
+
+  styles: ({ colors, css }) => {
+    const color = colors.getPalette('primary')
+
+    return css.get('border', color[500])
+  },
+}
+
+export default theme

package/src/components/select/theme/Select.carbon.theme.ts

@@ -0,0 +1,54 @@
+import { type SelectTheme } from '../Select.vue'
+
+const theme: SelectTheme = {
+  classes: {
+    wrapper: '',
+
+    box: ({ props, data }) => {
+      const classes = ['w-full border-b text-sm px-4 border-gray-300 dark:border-gray-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out']
+
+      if (!data.errorInternal && !props.disabled) classes.push('hover:border-gray-400 dark:hover:border-gray-500')
+
+      if (props.size === 'xs' || props.size === 'sm') classes.push('py-1.5')
+      else if (props.size === 'lg' || props.size === 'xl') classes.push('py-3.5')
+      else classes.push('py-2.5')
+
+      if (props.disabled) {
+        classes.push('bg-gray-100 dark:bg-gray-900 text-gray-300 cursor-not-allowed')
+      } else if (props.readonly) {
+        classes.push('bg-white dark:bg-gray-900 text-gray-700')
+      } else {
+        classes.push('bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200')
+      }
+
+      if (data.errorInternal) {
+        classes.push('border-red-500 dark:border-red-400 group-focus:outline-red-500')
+      } else if (!props.disabled) {
+        classes.push('group-focus:outline-[color:var(--x-select-border)]')
+      }
+
+      return classes
+    },
+
+    content: 'py-1 max-h-72 overflow-scroll',
+
+    iconWrapper: 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2',
+
+    icon: ({ props }) => {
+      const classes = ['h-5 w-5']
+
+      if (props.disabled) classes.push('text-gray-300 dark:text-gray-500')
+      else classes.push('text-gray-500 dark:text-gray-400')
+
+      return classes
+    },
+  },
+
+  styles: ({ colors, css }) => {
+    const color = colors.getPalette('primary')
+
+    return css.get('border', color[500])
+  },
+}
+
+export default theme