@indielayer/ui 1.2.0 → 1.4.0

package/src/components/select/Select.vue

@@ -6,19 +6,22 @@ const selectProps = {
   placeholder: String,
   options: Array as PropType<SelectOption[]>,
   multiple: Boolean,
-  label: String,
-  helper: String,
   flat: Boolean,
+  native: Boolean,
 }
 
 export type SelectOption = {
   value: number | string;
-  disabled: boolean;
   label: string;
+  disabled?: boolean;
 }
 
 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 +31,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 { 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 { useCommon } from '../../composables/useCommon'
+import { useInputtable } from '../../composables/useInputtable'
+import { useInteractive } from '../../composables/useInteractive'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { checkIcon, selectIcon } from '../../common/icons'
+
+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 +98,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 +165,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 +185,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 | []) {
@@ -228,62 +228,151 @@ const { focus, blur } = useInteractive(elRef)
 
 const {
   errorInternal,
+  hideFooterInternal,
   inputListeners,
   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)
 
-const { styles, classes, className } = useTheme('select', theme, props, { errorInternal })
+  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', {}, 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">
-      <x-popover
-        ref="popoverRef"
-        block
-        :disabled="disabled || loading"
-        :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
-            },
-          ]"
-        >
-          <template v-if="multiple && Array.isArray(selected) && selected.length > 0">
+      <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"
-              class="mr-1"
+              size="xs"
+              outlined
               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"
+        :disabled="disabled || loading || readonly"
+      >
+        <div
+          :class="[classes.box]"
+        >
+          <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="xs"
+                outlined
+                removable
+                @remove="(e: Event) => { handleRemove(e, value) }"
+              >{{ getLabel(value) }}</x-tag>
+            </div>
           </template>
           <template v-else-if="!multiple && !isEmpty(selected)">
             {{ getLabel(selected) }}
@@ -313,6 +402,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">
@@ -323,9 +413,11 @@ defineExpose({ focus, blur, reset, validate, setError })
       </x-popover>
 
       <select
+        :id="id"
         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"
@@ -346,17 +438,14 @@ defineExpose({ focus, blur, reset, validate, setError })
         <x-spinner v-if="loading" :size="size" />
         <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'
-            ]"
+            :icon="selectIcon"
+            :class="[classes.icon]"
           />
         </slot>
 
       </div>
     </div>
 
-    <x-input-error :error="errorInternal" :helper="helper"/>
-  </label>
+    <x-input-footer v-if="!hideFooterInternal" :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-y-auto',
+
+    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-50 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-y-auto',
+
+    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

package/src/components/skeleton/Skeleton.vue

@@ -1,25 +1,42 @@
 <script lang="ts">
+const shapes = ['line', 'circle'] as const
+
+export type SkeletonShape = typeof shapes[number]
+
+const validators = {
+  shape: shapes,
+}
+
 const skeletonProps = {
   tag: {
     type: String,
     default: 'div',
   },
+  shape: {
+    type: String as PropType<SkeletonShape>,
+    default: 'line',
+    validator: (val: SkeletonShape) => validators.shape.includes(val),
+  },
 }
 
 export type SkeletonProps = ExtractPublicPropTypes<typeof skeletonProps>
 
-export default { name: 'XSkeleton' }
+type InternalClasses = 'wrapper'
+export interface SkeletonTheme extends ThemeComponent<SkeletonProps, InternalClasses> {}
+
+export default {
+  name: 'XSkeleton',
+  validators,
+}
 </script>
 
 <script setup lang="ts">
-import type { ExtractPublicPropTypes } from 'vue'
-import { useTheme } from '../../composables/theme'
-
-import theme from './Skeleton.theme'
+import type { ExtractPublicPropTypes, PropType } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(skeletonProps)
 
-const { styles, classes, className } = useTheme('skeleton', theme, props)
+const { styles, classes, className } = useTheme('Skeleton', {}, props)
 </script>
 
 <template>

package/src/components/skeleton/index.ts

@@ -1,3 +1,2 @@
 export { default as XSkeleton } from './Skeleton.vue'
-export type { SkeletonProps } from './Skeleton.vue'
-export type { SkeletonTheme } from './Skeleton.theme'
+export type { SkeletonProps, SkeletonTheme } from './Skeleton.vue'

package/src/components/skeleton/theme/Skeleton.base.theme.ts

@@ -0,0 +1,16 @@
+import type { SkeletonTheme } from '../Skeleton.vue'
+
+const theme: SkeletonTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const classes = ['animate-pulse bg-gray-300 dark:bg-gray-600']
+
+      if (props.shape === 'circle') classes.push('w-8 h-8 rounded-full')
+      else classes.push('rounded-md')
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/skeleton/theme/Skeleton.carbon.theme.ts

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