@indielayer/ui 1.0.0-alpha.7 → 1.0.0

package/src/components/select/Select.vue

@@ -1,18 +1,25 @@
 <script lang="ts">
-import { computed, defineComponent, ref, watch, type PropType } from 'vue'
-import { useCSS } from '../../composables/css'
+export default { name: 'XSelect' }
+</script>
+
+<script setup lang="ts">
+import { computed, ref, watch, type PropType } from 'vue'
+import { useEventListener } from '@vueuse/core'
 import { useCommon } from '../../composables/common'
-import { useColors } from '../../composables/colors'
 import { useInputtable } from '../../composables/inputtable'
 import { useInteractive } from '../../composables/interactive'
-
-import { useEventListener } from '@vueuse/core'
+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'
 
 export type SelectOption = {
   value: number | string,
@@ -20,292 +27,242 @@ export type SelectOption = {
   label: string
 }
 
-export default defineComponent({
-  name: 'XSelect',
+const  props = defineProps({
+  ...useCommon.props(),
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  placeholder: String,
+  options: Array as PropType<Array<SelectOption>>,
+  multiple: Boolean,
+  label: String,
+  helper: String,
+  flat: Boolean,
+})
 
-  components: {
-    XTag,
-    XMenuItem,
-    XSpinner,
-    XPopover,
-    XPopoverContainer,
-  },
+const emit = defineEmits(useInputtable.emits())
 
-  validators: {
-    ...useCommon.validators(),
-  },
+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 selectedIndex = ref<number | undefined>()
+
+const selected = computed<any | any[]>({
+  get() {
+    if (props.multiple) {
+      if (!props.modelValue) return []
+      if (Array.isArray(props.modelValue)) return props.modelValue
+      else return [props.modelValue]
+    }
 
-  props: {
-    ...useCommon.props(),
-    ...useInteractive.props(),
-    ...useInputtable.props(),
-    placeholder: String,
-    options: Array as PropType<Array<SelectOption>>,
-    multiple: Boolean,
-    label: String,
-    helper: String,
-    flat: Boolean,
+    return props.modelValue
+  },
+  set(value: string | number | []) {
+    emit('update:modelValue', value)
   },
+})
 
-  emits: useInputtable.emits(),
-
-  setup(props, { emit }) {
-    const elRef = ref<HTMLElement>()
-    const labelRef = ref()
-    const itemsRef = ref()
-    const popoverRef = ref()
-    const selectedIndex = ref<number | undefined>()
-
-    const interactive = useInteractive(elRef)
-
-    const checkIcon = '<path d="M5 13l4 4L19 7" />'
-
-    const selected = computed({
-      get(): any {
-        if (props.multiple) {
-          if (!props.modelValue) return []
-          if (Array.isArray(props.modelValue)) return props.modelValue
-          else return [props.modelValue]
-        }
-
-        return props.modelValue
-      },
-      set(value: string | number | []) {
-        emit('update:modelValue', value)
-      },
-    })
-
-    const internalOptions = computed(() => {
-      if (!props.options || props.options.length === 0) return []
-
-      return props.options.map((option) => {
-        let isActive = false
-
-        if (props.multiple && Array.isArray(selected.value)) {
-          // @ts-ignore
-          isActive = selected.value.includes(option.value)
-        } else {
-          isActive = option.value === selected.value
-        }
-
-        return {
-          value: option.value,
-          label: option.label,
-          active: isActive,
-          disabled: option.disabled,
-          iconRight: isActive ? checkIcon : undefined,
-          onClick: () => handleOptionClick(option.value),
-        }
-      })
-    })
-
-    const labelClasses = computed(() => {
-      if (props.size === 'xs') return 'text-xs'
-      else if (props.size === 'sm') return 'text-sm'
-      else if (props.size === 'lg') return 'text-lg'
-      else if (props.size === 'xl') return 'text-xl'
-
-      return ''
-    })
-
-    const sizeClasses = computed(() => {
-      if (props.size === 'xs') return 'px-2 py-1 text-xs'
-      else if (props.size === 'sm') return 'px-2 py-2 text-sm'
-      else if (props.size === 'lg') return 'px-4 py-3 text-lg'
-      else if (props.size === 'xl') return 'px-5 py-4 text-xl'
-
-      return 'px-3 py-2'
-    })
-
-    const css = useCSS('select')
-    const colors = useColors()
-    const color = colors.getPalette('primary')
-    const style = css.get('border', color[500])
-
-    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)
-    })
-
-    watch(selectedIndex, (index) => {
-      if (typeof index !== 'undefined') itemsRef.value[index].$el.scrollIntoView({ block: 'nearest', inline: 'nearest' })
-    })
-
-    function findSelectableIndex(start: number | undefined, direction = 'down') {
-      if (!availableOptions.value || availableOptions.value.length === 0) {
-        selectedIndex.value = undefined
-
-        return
-      }
+const internalOptions = computed(() => {
+  if (!props.options || props.options.length === 0) return []
 
-      if (typeof start === 'undefined') {
-        start = direction === 'down' ? -1 : 1
-      }
+  return props.options.map((option) => {
+    let isActive = false
 
-      if (direction === 'down') {
-        let next = start + 1
-
-        if (next > internalOptions.value.length - 1) next = 0
-        while (internalOptions.value[next].disabled) {
-          if (++next > internalOptions.value.length - 1) next = 0
-        }
-        selectedIndex.value = next
-      } else {
-        let next = start - 1
-
-        if (next < 0) next = internalOptions.value.length - 1
-        while (internalOptions.value[next].disabled) {
-          if (--next < 0) next = internalOptions.value.length - 1
-        }
-        selectedIndex.value = next
-      }
+    if (props.multiple && Array.isArray(selected.value)) {
+      isActive = selected.value.includes(option.value)
+    } else {
+      isActive = option.value === selected.value
     }
 
-    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()
-      }
+    return {
+      value: option.value,
+      label: option.label,
+      active: isActive,
+      disabled: option.disabled,
+      iconRight: isActive ? checkIcon : undefined,
+      onClick: () => handleOptionClick(option.value),
     }
+  })
+})
 
-    function handleOptionClick(value: string | number) {
-      const option = props.options?.find((i) => i.value === value)
-
-      if (!option || option.disabled) return
-
-      if (props.multiple) {
-        if (Array.isArray(selected.value)) {
-          // @ts-ignore
-          const index = selected.value.indexOf(value)
-
-          if (index !== -1) selected.value.splice(index, 1)
-          else {
-            // @ts-ignore
-            selected.value.push(value)
-            emit('update:modelValue', selected.value)
-          }
-        } else {
-          // @ts-ignore
-          selected.value = [value]
-        }
-      } else {
-        selected.value = value
-      }
+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)
+})
+
+watch(selectedIndex, (index) => {
+  if (typeof index !== 'undefined' && itemsRef.value) itemsRef.value[index].$el.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+})
+
+function findSelectableIndex(start: number | undefined, direction = 'down') {
+  if (!availableOptions.value || availableOptions.value.length === 0) {
+    selectedIndex.value = undefined
+
+    return
+  }
+
+  if (typeof start === 'undefined') {
+    start = direction === 'down' ? -1 : 1
+  }
+
+  if (direction === 'down') {
+    let next = start + 1
+
+    if (next > internalOptions.value.length - 1) next = 0
+    while (internalOptions.value[next].disabled) {
+      if (++next > internalOptions.value.length - 1) next = 0
+    }
+    selectedIndex.value = next
+  } else {
+    let next = start - 1
+
+    if (next < 0) next = internalOptions.value.length - 1
+    while (internalOptions.value[next].disabled) {
+      if (--next < 0) next = internalOptions.value.length - 1
     }
+    selectedIndex.value = next
+  }
+}
+
+useEventListener(labelRef, 'keydown', handleKeydown)
 
-    function isEmpty(value: string | number | []) {
-      if (typeof value === 'undefined' || value === null) return true
-      if (value === '') return true
-      if (Array.isArray(value) && value.length === 0) return true
-      if (!Array.isArray(value) && typeof value === 'object' && Object.keys(value).length === 0) return true
+function handleKeydown(e: KeyboardEvent) {
+  if (internalOptions.value.length === 0) return
 
-      return false
+  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 handleRemove(e: Event, value: string) {
-      e.stopPropagation()
+function handleOptionClick(value: string | number) {
+  const option = props.options?.find((i) => i.value === value)
 
-      // find value in selected and remove it
-      // @ts-ignore
+  if (!option || option.disabled) return
+
+  if (props.multiple) {
+    if (Array.isArray(selected.value)) {
       const index = selected.value.indexOf(value)
 
-      if (index !== -1) {
-        // @ts-ignore
-        selected.value.splice(index, 1)
+      if (index !== -1) selected.value.splice(index, 1)
+      else {
+        selected.value.push(value)
         emit('update:modelValue', selected.value)
       }
+    } else {
+      selected.value = [value]
     }
+  } else {
+    selected.value = value
+  }
+}
 
-    function getLabel(value: string | number | []) {
-      const option = props.options?.find((i) => i.value === value)
+function isEmpty(value: string | number | []) {
+  if (typeof value === 'undefined' || value === null) return true
+  if (value === '') return true
+  if (Array.isArray(value) && value.length === 0) return true
+  if (!Array.isArray(value) && typeof value === 'object' && Object.keys(value).length === 0) return true
 
-      if (option) return option.label
+  return false
+}
 
-      return ''
-    }
+function handleRemove(e: Event, value: string) {
+  e.stopPropagation()
 
-    return {
-      ...interactive,
-      ...useInputtable(props, { focus: interactive.focus, emit, withListeners: false }),
-      elRef,
-      labelRef,
-      itemsRef,
-      popoverRef,
-      selected,
-      selectedIndex,
-      internalOptions,
-      labelClasses,
-      sizeClasses,
-      style,
-      isEmpty,
-      getLabel,
-      handleRemove,
-    }
-  },
-})
+  // find value in selected and remove it
+  const index = selected.value.indexOf(value)
+
+  if (index !== -1) {
+    selected.value.splice(index, 1)
+    emit('update:modelValue', selected.value)
+  }
+}
+
+function getLabel(value: string | number | []) {
+  const option = props.options?.find((i) => i.value === value)
+
+  if (option) return option.label
+
+  return ''
+}
+
+const { focus, blur } = useInteractive(elRef)
+
+const {
+  errorInternal,
+  inputListeners,
+  reset,
+  validate,
+  setError,
+  isInsideForm,
+} = useInputtable(props, { focus, emit, withListeners: false })
+
+const { styles, classes, className } = useTheme('select', theme, props, { errorInternal })
+
+defineExpose({ focus, blur, reset, validate, setError })
 </script>
 
 <template>
   <label
     ref="labelRef"
     tabindex="0"
-    class="group relative inline-block align-bottom text-left focus:outline-none"
-    :class="[{ 'mb-3': isInsideForm }]"
+    class="group relative"
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper,
+      { 'mb-3': isInsideForm }
+    ]"
   >
     <p
       v-if="label"
-      class="font-medium text-gray-800 dark:text-gray-200 mb-1"
-      :class="labelClasses"
+      :class="classes.label"
       v-text="label"
     ></p>
     <div class="relative">
-      <x-popover ref="popoverRef" block :disabled="disabled || loading" :dismiss-on-click="!multiple">
+      <x-popover
+        ref="popoverRef"
+        block
+        :disabled="disabled || loading"
+        :dismiss-on-click="!multiple"
+        align="left"
+      >
         <div
-          class="w-full border border-gray-300 hover:border-gray-400 dark:border-gray-700 pr-8 transition-colors duration-150 ease-in-out rounded-md shadow-sm
-          group-focus:border-[color:var(--x-select-border)]
-          "
-          :style="style"
           :class="[
-            sizeClasses,
-            disabled
-              ? 'bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed'
-              : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200',
+            classes.box,
             {
               // error
-              'border-red-500 focus:border-red-500 dark:focus:border-red-500': errorInternal,
+              'border-red-500 dark:border-red-400 group-focus:outline-red-500': errorInternal,
+              'group-focus:outline-[color:var(--x-select-border)]': !disabled && !errorInternal
             },
           ]"
         >
@@ -335,7 +292,7 @@ export default defineComponent({
         </div>
 
         <template #content>
-          <x-popover-container class="py-1 max-h-72 overflow-scroll">
+          <x-popover-container :class="classes.content">
             <template v-if="internalOptions.length > 0">
               <x-menu-item
                 v-for="(item, index) in internalOptions"
@@ -377,32 +334,21 @@ export default defineComponent({
         </option>
       </select>
 
-      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
+      <div :class="classes.iconWrapper">
         <x-spinner v-if="loading" :size="size" />
-        <svg
-          v-else
-          class="stroke-2"
-          :class="[
-            disabled ? 'text-gray-600 dark:text-gray-500': 'text-gray-500 dark:text-gray-400',
-            {
-              'h-3 w-3': size === 'sm' || size === 'xs',
-              'h-5 w-5': !size || !['xs', 'sm', 'lg', 'xl'].includes(size),
-              'h-6 w-6': size === 'lg',
-              'h-7 w-7': size === 'xl',
-            }
-          ]"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          stroke-linejoin="round"
-          stroke-linecap="round"
-          fill="none"
-        >
-          <path d="M8 9l4-4 4 4m0 6l-4 4-4-4" />
-        </svg>
+        <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'
+            ]"
+          />
+        </slot>
+
       </div>
     </div>
 
-    <p v-if="errorInternal" class="text-sm text-red-500 mt-1" v-text="errorInternal"></p>
-    <p v-else-if="helper" class="text-sm text-gray-500 mt-1" v-text="helper"></p>
+    <x-input-error :error="errorInternal" :helper="helper"/>
   </label>
 </template>

package/src/components/select/__tests__/Select.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Select from '../Select.vue'
+
+describe('Select', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Select)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,7 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: 'animate-pulse bg-gray-300 dark:bg-gray-600 rounded-md',
+  },
+}

package/src/components/skeleton/Skeleton.vue

@@ -1,22 +1,30 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
+export default { name: 'XSkeleton' }
+</script>
+
+<script setup lang="ts">
+import { useTheme } from '../../composables/theme'
 
-export default defineComponent({
-  name: 'XSkeleton',
+import theme from './Skeleton.theme'
 
-  props: {
-    tag: {
-      type: String,
-      default: 'div',
-    },
+const props = defineProps({
+  tag: {
+    type: String,
+    default: 'div',
   },
 })
+
+const { styles, classes, className } = useTheme('skeleton', theme, props)
 </script>
 
 <template>
   <component
     :is="tag"
-    class="animate-pulse bg-gray-300 dark:bg-gray-600 rounded-md"
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper
+    ]"
   >
     &#8203;
   </component>

package/src/components/skeleton/__tests__/Skeleton.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Skeleton from '../Skeleton.vue'
+
+describe('Skeleton', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Skeleton)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/slider/Slider.theme.ts

@@ -0,0 +1,30 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: 'inline-block align-bottom text-left focus:outline-none',
+
+    label: ({ props }: ThemeParams) => {
+      let c = 'font-medium text-gray-800 dark:text-gray-200 mb-1'
+
+      if (props.size === 'xs') c += ' text-xs'
+      else if (props.size === 'sm') c += ' text-sm'
+      else if (props.size === 'lg') c += ' text-lg'
+      else if (props.size === 'xl') c += ' text-xl'
+
+      return c
+    },
+
+    drag: 'w-[20px] h-[20px] -mt-[13px] -ml-[10px] rounded-full bg-white border shadow-sm',
+  },
+
+  styles: ({ props, colors, css }: ThemeParams) => {
+    const primary = colors.getPalette('primary')
+    const color = colors.getPalette(props.color)
+
+    return css.variables({
+      bg: color[500],
+      border: primary[500],
+    })
+  },
+}