@veritree/ui 0.21.1-8 → 0.22.0

package/src/components/Listbox/VTListboxList.vue

@@ -22,44 +22,33 @@ export default {
     },
   },
 
-  data() {
-    return {
-      isMousemove: false,
-    };
-  },
-
   computed: {
     id() {
       return `listbox-list-${this.apiListbox().id}`;
     },
   },
 
-  mounted() {
-    const list = {
-      el: this.$el,
-      getMousemove: this.getMousemove,
-      setMousemove: this.setMousemove,
-      unsetMousemove: this.unsetMousemove,
-    };
+  // mounted() {
+  //   const list = {
+  //     el: this.$el,
+  //   };
 
-    this.apiListbox().registerList(list);
-  },
+  //   this.apiListbox().registerList(list);
+  // },
 
   methods: {
     // Mousemove instead of mouseover to support keyboard navigation.
     // The problem with mouseover is that when scrolling (scrollIntoView),
     // mouseover event gets triggered.
-    setMousemove() {
-      this.isMousemove = true;
-    },
-
-    unsetMousemove() {
-      this.isMousemove = false;
-    },
-
-    getMousemove() {
-      return this.isMousemove;
-    },
+    // setMousemove() {
+    //   this.isMousemove = true;
+    // },
+    // unsetMousemove() {
+    //   this.isMousemove = false;
+    // },
+    // getMousemove() {
+    //   return this.isMousemove;
+    // },
   },
 };
 </script>

package/src/components/Listbox/VTListboxSearch.vue

@@ -1,8 +1,8 @@
 <template>
   <input
     v-model="search"
-    :class="{ 'listbox-search': headless, 'form-control mb-1': !headless }"
     type="text"
+    :class="classComputed"
     @input="onChange"
     @click.stop
     @keydown.down.prevent="focusNextItem"
@@ -16,22 +16,20 @@
 </template>
 
 <script>
+import { formControlMixin } from '../../../mixins/form-control';
+
 export default {
   name: 'VTListboxSearch',
 
-  inject: ['apiListbox'],
+  mixins: [formControlMixin],
 
-  props: {
-    headless: {
-      type: Boolean,
-      default: false,
-    },
-  },
+  inject: ['apiListbox'],
 
   data() {
     return {
-      search: '',
+      name: 'listbox-search',
       index: -1,
+      search: '',
     };
   },
 
@@ -40,8 +38,8 @@ export default {
       return this.apiListbox().componentTrigger;
     },
 
-    list() {
-      return this.apiListbox().list;
+    componentContent() {
+      return this.apiListbox().componentContent;
     },
 
     items() {
@@ -107,10 +105,10 @@ export default {
     },
 
     unselectItem() {
-      const isMousemove = this.list.getMousemove();
+      const isMousemove = this.componentContent.getMousemove();
 
       if (isMousemove) {
-        this.list.unsetMousemove();
+        this.componentContent.unsetMousemove();
         this.items.forEach((item) => item.unselect());
       }
 

package/src/components/Listbox/VTListboxTrigger.vue

@@ -1,37 +1,19 @@
 <template>
   <button
     :id="id"
+    :class="classComputed"
     :aria-expanded="expanded"
     :aria-haspopup="hasPopup"
-    :class="[
-      headless
-        ? 'listbox-button'
-        : 'flex w-full justify-between border border-solid py-2 px-3 gap-3 rounded text-inherit max-w-full',
-      headless
-        ? `listbox-button--${variant}`
-        : isError
-        ? 'border-error-300'
-        : 'border-gray-300',
-    ]"
     type="button"
     @click.prevent="onClick"
     @keydown.down.prevent="onKeyDownOrUp"
     @keydown.up.prevent="onKeyDownOrUp"
     @keydown.esc.stop="onKeyEsc"
   >
-    <span
-      :class="{
-        'listbox-button__text': headless,
-        'text-left': !headless,
-      }"
-    >
+    <span :class="[headless ? 'listbox-button__text' : 'text-left truncate']">
       <slot></slot>
     </span>
-    <span
-      :class="{
-        'listbox-button__icon': headless,
-      }"
-    >
+    <span :class="[headless ? 'listbox-button__icon' : 'shrink-0']">
       <IconChevronDown
         class="transition-transform"
         :class="{ 'rotate-180': expanded }"
@@ -41,6 +23,7 @@
 </template>
 
 <script>
+import { formControlMixin } from '../../../mixins/form-control';
 import { IconChevronDown } from '@veritree/icons';
 
 export default {
@@ -48,25 +31,13 @@ export default {
 
   components: { IconChevronDown },
 
-  inject: ['apiListbox'],
+  mixins: [formControlMixin],
 
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    headless: {
-      type: Boolean,
-      default: false,
-    },
-    variant: {
-      type: [String, Object, Function],
-      default: '',
-    },
-  },
+  inject: ['apiListbox'],
 
   data() {
     return {
+      name: 'listbox-button',
       expanded: false,
       hasPopup: false,
     };
@@ -77,10 +48,6 @@ export default {
       return `listbox-trigger-${this.apiListbox().id}`;
     },
 
-    isError() {
-      return this.variant === 'error';
-    },
-
     componentContent() {
       return this.apiListbox().componentContent;
     },

package/src/components/Utils/FloatingUi.vue

@@ -15,7 +15,7 @@
         :class="[
           headless
             ? null
-            : 'absolute z-50 grid min-w-min overflow-hidden rounded-md py-2 px-3 border-gray-100 bg-white shadow-300',
+            : 'absolute z-50 grid overflow-x-hidden rounded-md py-2 px-3 border-gray-100 bg-white shadow-300',
           floatingUiClass ? floatingUiClass : null,
         ]"
       >

package/src/utils/components.js

@@ -1,18 +0,0 @@
-/**
- *
- * @param {HTMLElement} el
- * @param {HTMLElement} parent
- */
- export const scrollElementIntoView = (el, parent) => {
-  // this works better than scrollIntoView
-  if (parent.scrollHeight <= parent.clientHeight) return;
-
-  const scrollBottom = parent.clientHeight + parent.scrollTop;
-  const elBottom = el.offsetTop + el.offsetHeight;
-
-  if (elBottom > scrollBottom) {
-    parent.scrollTop = elBottom - parent.clientHeight;
-  } else if (el.offsetTop < parent.scrollTop) {
-    parent.scrollTop = el.offsetTop;
-  }
-};