vueless 1.0.1 → 1.0.2-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.0.1",
+  "version": "1.0.2-beta.0",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.form-input/UInput.vue

@@ -72,6 +72,11 @@ const emit = defineEmits([
    * Triggers when content pasted to the input.
    */
   "paste",
+
+  /**
+   * Triggers when a key is pressed down while the input is focused.
+   */
+  "keydown",
 ]);
 
 const VALIDATION_RULES_REG_EX = {
@@ -164,6 +169,10 @@ function onCopy(event: ClipboardEvent) {
   emit("copy", event);
 }
 
+function onKeydown(event: KeyboardEvent) {
+  emit("keydown", event);
+}
+
 /**
  * This trick prevents default browser autocomplete behavior.
  * @param toggleState { boolean }
@@ -295,6 +304,7 @@ const {
         @click="onClick"
         @paste="onPaste"
         @copy="onCopy"
+        @keydown="onKeydown"
       />
 
       <div

package/ui.form-listbox/UListbox.vue

@@ -51,6 +51,11 @@ const emit = defineEmits([
    * Triggers when the search input value changes.
    */
   "searchChange",
+
+  /**
+   * Triggers when the search input loses focus.
+   */
+  "searchBlur",
 ]);
 
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
@@ -220,6 +225,14 @@ function onSearchChange(value: string) {
   emit("searchChange", value);
 }
 
+function onKeydownUp() {
+  wrapperRef.value?.focus();
+}
+
+function onKeydownDown() {
+  wrapperRef.value?.focus();
+}
+
 function isMetaKey(key: string) {
   return ["isSubGroup", "groupLabel", "level", "isHidden", "onClick", "divider"].includes(key);
 }
@@ -307,6 +320,12 @@ function onClickOption(rawOption: Option) {
   emit("clickOption", option);
 }
 
+function onInputSearchBlur(event: FocusEvent) {
+  if (props.searchable) {
+    emit("searchBlur", event);
+  }
+}
+
 defineExpose({
   /**
    * Allows setting the pointer to a specific index.
@@ -408,6 +427,9 @@ const {
         :debounce="debounce"
         v-bind="listboxInputAttrs"
         :data-test="getDataTest('search')"
+        @blur="onInputSearchBlur"
+        @keydown.self.down.prevent="onKeydownDown"
+        @keydown.self.up.prevent="onKeydownUp"
         @update:model-value="onSearchChange"
       />
     </div>

package/ui.form-select/USelect.vue

@@ -7,8 +7,6 @@ import UListbox from "../ui.form-listbox/UListbox.vue";
 import UBadge from "../ui.text-badge/UBadge.vue";
 import ULink from "../ui.button-link/ULink.vue";
 
-import { vClickOutside } from "../directives";
-
 import useUI from "../composables/useUI.ts";
 import { hasSlotContent } from "../utils/helper.ts";
 import { getDefaults } from "../utils/ui.ts";
@@ -198,10 +196,6 @@ const toggleIconName = computed(() => {
   return props.toggleIcon ? config.value.defaults.toggleIcon : "";
 });
 
-const clickOutsideOptions = computed(() => ({
-  ignore: [labelComponentRef.value?.wrapperElement, labelComponentRef.value?.labelElement],
-}));
-
 watch(localValue, setLabelPosition, { deep: true });
 
 onMounted(() => {
@@ -216,16 +210,6 @@ function onSearchChange(query: string) {
   emit("searchChange", query);
 }
 
-function onListboxInteraction(event: MouseEvent) {
-  const target = event.target as HTMLElement;
-
-  if (target.closest("input")) {
-    return;
-  }
-
-  event.preventDefault();
-}
-
 function onKeydownAddOption(event: KeyboardEvent) {
   if (!isOpen.value) return;
 
@@ -257,7 +241,7 @@ function deactivate() {
     return;
   }
 
-  if (props.searchable) wrapperRef.value?.blur();
+  wrapperRef.value?.blur();
 
   isOpen.value = false;
 
@@ -283,9 +267,9 @@ function activate() {
 }
 
 function adjustPosition() {
-  if (typeof window === "undefined" || !listboxRef.value || !wrapperRef.value) return;
+  if (!wrapperRef.value) return;
 
-  const dropdownHeight = listboxRef.value.wrapperRef?.getBoundingClientRect().height || 0;
+  const dropdownHeight = listboxRef.value?.wrapperRef?.getBoundingClientRect().height || 0;
   const spaceAbove = wrapperRef.value.getBoundingClientRect().top;
   const spaceBelow = window.innerHeight - wrapperRef.value.getBoundingClientRect().bottom;
   const hasEnoughSpaceBelow = spaceBelow > dropdownHeight;
@@ -297,7 +281,7 @@ function adjustPosition() {
   }
 }
 
-function onWrapperBlur(event: FocusEvent) {
+function deactivateOnBlur(event: FocusEvent) {
   const related = event.relatedTarget as HTMLElement | null;
 
   const isInsideWrapper = related && wrapperRef.value?.contains(related);
@@ -312,7 +296,19 @@ function onWrapperBlur(event: FocusEvent) {
   deactivate();
 }
 
-function onMouseDownClearItem(event: MouseEvent, option: Option) {
+function onBlur(event: FocusEvent) {
+  deactivateOnBlur(event);
+}
+
+function onListboxBlur(event: FocusEvent) {
+  deactivateOnBlur(event);
+}
+
+function onListboxSearchBlur(event: FocusEvent) {
+  deactivateOnBlur(event);
+}
+
+function onClickClearItem(event: MouseEvent, option: Option) {
   if (props.disabled) return;
 
   const value = Array.isArray(props.modelValue)
@@ -325,25 +321,23 @@ function onMouseDownClearItem(event: MouseEvent, option: Option) {
       })
     : [];
 
+  if (isOpen.value) wrapperRef.value?.focus();
+
   emit("update:modelValue", value);
   emit("change", { value, options: props.options });
   emit("remove", option);
 }
 
-function onMouseDownClear() {
+function onClickClear() {
   if (props.disabled) return;
 
-  if (!props.clearable && !props.multiple) {
-    deactivate();
-
-    return;
-  }
-
   const value = props.multiple ? [] : "";
 
   emit("update:modelValue", value);
   emit("change", { value, options: props.options });
   emit("remove", props.options);
+
+  deactivate();
 }
 
 useMutationObserver(leftSlotWrapperRef, (mutations) => mutations.forEach(setLabelPosition), {
@@ -475,25 +469,27 @@ const {
     v-bind="selectLabelAttrs"
     :data-test="getDataTest()"
     :tabindex="-1"
-    @click="toggle"
   >
     <template #label>
-      <!--
-        @slot Use this to add custom content instead of the label.
-        @binding {string} label
-      -->
-      <slot name="label" :label="label" />
+      <div @click="toggle" @mousedown.prevent>
+        <!--
+          @slot Use this to add custom content instead of the label.
+          @binding {string} label
+        -->
+        <slot name="label" :label="label">
+          {{ label }}
+        </slot>
+      </div>
     </template>
 
     <div
       ref="wrapper"
-      v-click-outside="[deactivate, clickOutsideOptions]"
       :tabindex="searchable || disabled ? -1 : 0"
       role="combobox"
       :aria-owns="'listbox-' + elementId"
       v-bind="wrapperAttrs"
       @focus="activate"
-      @blur="onWrapperBlur"
+      @blur="onBlur"
       @keydown.self.down.prevent="listboxRef?.pointerForward"
       @keydown.self.up.prevent="listboxRef?.pointerBackward"
       @keydown.enter.tab.stop.self="listboxRef?.addPointerElement()"
@@ -526,7 +522,7 @@ const {
         v-bind="toggleWrapperAttrs"
         :tabindex="-1"
         :data-test="getDataTest('toggle')"
-        @mousedown.prevent.stop="toggle"
+        @click.stop="toggle"
       >
         <!--
           @slot Use it to add something instead of the toggle icon.
@@ -546,23 +542,22 @@ const {
         </slot>
       </div>
 
-      <div
-        v-if="!isMultipleListVariant && isLocalValue && clearable"
-        v-bind="clearAttrs"
-        :data-test="getDataTest('clear')"
-        @mousedown="onMouseDownClear"
-      >
+      <div v-if="!isMultipleListVariant && isLocalValue && clearable" v-bind="clearAttrs">
         <!--
           @slot Use it to add something instead of the clear icon.
           @binding {string} icon-name
+          @binding {function} clear
+          @binding {string} data-test
         -->
-        <slot name="clear" :icon-name="config.defaults.clearIcon">
+        <slot name="clear" :icon-name="config.defaults.clearIcon" :clear="onClickClear">
           <UIcon
             interactive
             color="neutral"
             :disabled="disabled"
             :name="config.defaults.clearIcon"
             v-bind="clearIconAttrs"
+            :data-test="getDataTest('clear')"
+            @click.stop="onClickClear"
           />
         </slot>
       </div>
@@ -588,7 +583,7 @@ const {
             @binding {object} options
           -->
           <slot name="selected-options" :options="multiple ? selectedOptions.full : selectedOption">
-            <span v-if="!multiple" v-bind="selectedLabelsAttrs" @mousedown.prevent="toggle">
+            <span v-if="!multiple" v-bind="selectedLabelsAttrs" @click.stop="toggle">
               <!--
                 @slot Use it to customize selected option.
                 @binding {string} label
@@ -669,7 +664,7 @@ const {
                       :size="size"
                       variant="subtle"
                       v-bind="badgeLabelAttrs"
-                      @click="toggle"
+                      @click.stop="toggle"
                     >
                       <div v-bind="selectedLabelTextAttrs">
                         {{ option[labelKey] }}
@@ -682,7 +677,7 @@ const {
                           :disabled="disabled"
                           :name="config.defaults.badgeClearIcon"
                           v-bind="badgeClearIconAttrs"
-                          @click="onMouseDownClearItem($event, option)"
+                          @click.stop="onClickClearItem($event, option)"
                         />
                       </template>
                     </UBadge>
@@ -735,9 +730,7 @@ const {
                       :name="config.defaults.listClearIcon"
                       :data-test="getDataTest('clear-item')"
                       v-bind="listClearIconAttrs"
-                      @mousedown.prevent.capture
-                      @click.prevent.capture
-                      @mousedown="onMouseDownClearItem($event, option)"
+                      @click.stop="onClickClearItem($event, option)"
                     />
                   </slot>
                 </div>
@@ -767,8 +760,7 @@ const {
                     :underlined="false"
                     v-bind="listClearAllAttrs"
                     :data-test="getDataTest('clear-all')"
-                    @mousedown.prevent.capture="onMouseDownClear"
-                    @click.prevent.capture
+                    @click.stop="onClickClear"
                   />
                 </div>
               </template>
@@ -788,17 +780,19 @@ const {
         :size="size"
         :debounce="debounce"
         :visible-options="visibleOptions"
-        :value-key="valueKey"
         :label-key="labelKey"
+        :value-key="valueKey"
+        :group-label-key="groupLabelKey"
+        :group-value-key="groupValueKey"
         :add-option="addOption"
         tabindex="-1"
         v-bind="listboxAttrs as KeyAttrsWithConfig<UListboxConfig>"
         :data-test="getDataTest()"
         @add="onAddOption"
         @focus="activate"
+        @blur="onListboxBlur"
+        @search-blur="onListboxSearchBlur"
         @update:model-value="onSearchChange"
-        @mousedown.capture="onListboxInteraction"
-        @click.capture="onListboxInteraction"
       >
         <template #before-option="{ option, index }">
           <!--

package/ui.form-select/storybook/stories.ts

@@ -334,7 +334,7 @@ export const Slots: StoryFn<USelectArgs> = (args) => ({
         </template>
       </USelect>
 
-      <URow>
+      <URow block>
         <USelect v-bind="args" v-model="args.beforeToggleModel" label="Slot before-toggle">
           <template #before-toggle>
             <UAvatar />
@@ -353,7 +353,7 @@ export const Slots: StoryFn<USelectArgs> = (args) => ({
         </USelect>
       </URow>
 
-      <URow>
+      <URow block>
         <USelect v-bind="args" v-model="args.leftModel" label="Slot left">
           <template #left>
             <UAvatar />