@indielayer/ui 1.7.5 → 1.8.0

package/lib/node_modules/.pnpm/{@vueuse_core@10.2.0_vue@3.3.9 → @vueuse_core@10.2.0_vue@3.3.9_typescript@5.2.2_}/node_modules/@vueuse/core/index.js

@@ -1,5 +1,5 @@
-import { noop as j, toValue as L, tryOnScopeDispose as k, isIOS as G, useThrottleFn as Q, isClient as N, increaseWithUnit as U, toRef as J, useDebounceFn as K } from "../../../../@vueuse_shared@10.2.0_vue@3.3.9/node_modules/@vueuse/shared/index.js";
-import { createFilterWrapper as Oe, debounceFilter as ge, throttleFilter as Se } from "../../../../@vueuse_shared@10.2.0_vue@3.3.9/node_modules/@vueuse/shared/index.js";
+import { noop as j, toValue as L, tryOnScopeDispose as k, isIOS as G, useThrottleFn as Q, isClient as N, increaseWithUnit as U, toRef as J, useDebounceFn as K } from "../../../../@vueuse_shared@10.2.0_vue@3.3.9_typescript@5.2.2_/node_modules/@vueuse/shared/index.js";
+import { createFilterWrapper as Oe, debounceFilter as ge, throttleFilter as Se } from "../../../../@vueuse_shared@10.2.0_vue@3.3.9_typescript@5.2.2_/node_modules/@vueuse/shared/index.js";
 import { watch as F, computed as g, ref as T, reactive as D, watchEffect as Z, getCurrentInstance as ee, onMounted as te } from "vue";
 function _(e) {
   var o;

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.7.5";
+declare const _default: "1.8.0";
 export default _default;

package/lib/version.js

@@ -1,4 +1,4 @@
-const e = "1.7.5";
+const e = "1.8.0";
 export {
   e as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.7.5",
+  "version": "1.8.0",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",

package/src/components/input/Input.vue

@@ -24,6 +24,7 @@ const inputProps = {
     type: String,
     default: 'text',
   },
+  step: [Number, String],
   block: Boolean,
 }
 
@@ -147,7 +148,7 @@ defineExpose({ focus, blur, reset, validate, setError })
             ? 'border-error-500 dark:border-error-400 focus:outline-error-500'
             : 'focus:outline-[color:var(--x-input-border)]',
           {
-            '!pl-10': iconLeft,
+            '!pl-10': iconLeft || icon,
             '!pr-10': iconRight,
           },
         ]"
@@ -156,6 +157,7 @@ defineExpose({ focus, blur, reset, validate, setError })
         :max="max"
         :minlength="minlength"
         :maxlength="maxlength"
+        :step="step"
         :dir="dir"
         :name="name"
         :placeholder="placeholder"

package/src/components/select/Select.vue

@@ -9,6 +9,11 @@ const selectProps = {
   multiple: Boolean,
   flat: Boolean,
   native: Boolean,
+  filterable: Boolean,
+  filterPlaceholder: {
+    type: String,
+    default: 'Filter by...',
+  },
 }
 
 export type SelectOption = {
@@ -19,7 +24,7 @@ export type SelectOption = {
 
 export type SelectProps = ExtractPublicPropTypes<typeof selectProps>
 
-type InternalClasses = 'wrapper' | 'box' | 'content' | 'iconWrapper' | 'icon'
+type InternalClasses = 'wrapper' | 'box' | 'content' | 'search' | 'contentBody' | 'iconWrapper' | 'icon'
 type InternalExtraData = { errorInternal: Ref<boolean>; }
 export interface SelectTheme extends ThemeComponent<SelectProps, InternalClasses, InternalExtraData> {}
 
@@ -49,6 +54,7 @@ import XSpinner from '../spinner/Spinner.vue'
 import XPopover from '../popover/Popover.vue'
 import XPopoverContainer from '../popover/PopoverContainer.vue'
 import XInputFooter from '../inputFooter/InputFooter.vue'
+import type { XInput } from '../input'
 
 const  props = defineProps(selectProps)
 
@@ -60,6 +66,9 @@ const itemsRef = ref<InstanceType<typeof XMenuItem>[] | null>(null)
 const popoverRef = ref<InstanceType<typeof XPopover> | null>(null)
 const selectedIndex = ref<number | undefined>()
 
+const filter = ref('')
+const filterRef = ref<InstanceType<typeof XInput> | null>(null)
+
 const selected = computed<any | any[]>({
   get() {
     if (props.multiple) {
@@ -78,40 +87,57 @@ const selected = computed<any | any[]>({
 const internalOptions = computed(() => {
   if (!props.options || props.options.length === 0) return []
 
-  return props.options.map((option) => {
-    let isActive = false
+  return props.options
+    .filter((option) => filter.value === '' || option.label.toLowerCase().includes(filter.value.toLowerCase()))
+    .map((option) => {
+      let isActive = false
 
-    if (props.multiple && Array.isArray(selected.value)) {
-      isActive = selected.value.includes(option.value)
-    } else {
-      isActive = option.value === selected.value
-    }
+      if (props.multiple && Array.isArray(selected.value)) {
+        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),
-    }
-  })
+      return {
+        value: option.value,
+        label: option.label,
+        active: isActive,
+        disabled: option.disabled,
+        iconRight: isActive ? checkIcon : undefined,
+        onClick: () => handleOptionClick(option.value),
+      }
+    })
 })
 
-const availableOptions = computed(() => props.options?.filter((option) => !option.disabled))
+const availableOptions = computed(() => internalOptions.value.filter((option) => !option.disabled))
 
 const isOpen = computed(() => popoverRef.value?.isOpen)
 
+watch(filter, (val) => {
+  if (val) {
+    selectedIndex.value = undefined
+    findSelectableIndex(-1)
+  }
+})
+
 watch(isOpen, (isOpenValue) => {
   if (isOpenValue) {
     findSelectedIndex()
-    setTimeout(() => {
-      scrollToIndex(selectedIndex.value || 0)
-    }, 50)
 
     if (props.multiple || typeof selectedIndex.value === 'undefined') {
       findSelectableIndex(-1)
     }
+
+    setTimeout(() => {
+      requestAnimationFrame(() => {
+        scrollToIndex(selectedIndex.value || 0)
+
+        if (props.filterable) filterRef.value?.focus()
+      })
+    }, 50)
+
+  } else {
+    if (props.filterable) filter.value = ''
   }
 })
 
@@ -184,6 +210,11 @@ function handleOptionClick(value: string | number) {
     } else {
       selected.value = [value]
     }
+
+    if (props.filterable)
+      setTimeout(() => {
+        filterRef.value?.focus()
+      })
   } else {
     selected.value = value
   }
@@ -285,7 +316,9 @@ function handleKeyNavigation(e: KeyboardEvent) {
       return
     }
     findSelectableIndex(selectedIndex.value, 'up')
-  } else if (e.code === 'Enter' || e.code === 'Space') {
+  } else if (e.code === 'Enter' || (e.code === 'Space')) {
+    if (e.code === 'Space' && props.filterable) return
+
     e.preventDefault()
     e.stopPropagation()
     if (!isOpen.value) {
@@ -293,7 +326,7 @@ function handleKeyNavigation(e: KeyboardEvent) {
 
       return
     }
-    if (typeof selectedIndex.value !== 'undefined') {
+    if (typeof selectedIndex.value !== 'undefined' && internalOptions.value[selectedIndex.value]) {
       handleOptionClick(internalOptions.value[selectedIndex.value].value)
       if (!props.multiple) popoverRef.value?.hide()
     }
@@ -397,7 +430,12 @@ defineExpose({ focus, blur, reset, validate, setError })
 
         <template #content>
           <x-popover-container :class="classes.content">
-            <template v-if="internalOptions.length > 0">
+            <slot name="content-header">
+              <div v-if="filterable" :class="classes.search">
+                <x-input ref="filterRef" v-model="filter" :placeholder="filterPlaceholder" size="sm"/>
+              </div>
+            </slot>
+            <div v-if="internalOptions.length > 0" :class="classes.contentBody">
               <x-menu-item
                 v-for="(item, index) in internalOptions"
                 :key="index"
@@ -410,10 +448,11 @@ defineExpose({ focus, blur, reset, validate, setError })
                 filled
                 @click="() => !multiple && popoverRef?.hide()"
               />
-            </template>
+            </div>
             <div v-else class="px-2 text-center text-secondary-400">
               No options
             </div>
+            <slot name="content-footer"></slot>
           </x-popover-container>
         </template>
       </x-popover>

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

@@ -27,7 +27,11 @@ const theme: SelectTheme = {
       return classes
     },
 
-    content: 'p-1 max-h-72 overflow-y-auto',
+    content: 'p-1',
+
+    search: 'p-1 mb-0.5',
+
+    contentBody: 'overflow-y-auto max-h-64',
 
     iconWrapper: 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2',
 

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

@@ -30,7 +30,11 @@ const theme: SelectTheme = {
       return classes
     },
 
-    content: 'py-1 max-h-72 overflow-y-auto',
+    content: 'p-1',
+
+    search: 'p-1 mb-0.5',
+
+    contentBody: 'overflow-y-auto max-h-64',
 
     iconWrapper: 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2',
 

package/src/version.ts

@@ -1 +1 @@
-export default '1.7.5'
+export default '1.8.0'