@veritree/ui 0.21.1-8 → 0.22.0

package/src/components/DropdownMenu/VTDropdownMenuItem.vue

@@ -3,30 +3,10 @@
     :is="as"
     :id="id"
     :to="to"
-    :class="[
-      // default styles
-      headless
-        ? 'dropdown-menu-item'
-        : 'relative z-10 -mx-3 flex items-center gap-2 px-3 py-2 text-inherit no-underline hover:bg-secondary-200/10',
-      // disabled state styles
-      headless
-        ? disabled
-          ? 'listbox-item--disabled'
-          : null
-        : disabled
-        ? 'pointer-events-none opacity-75'
-        : null,
-      // selected state styles
-      headless
-        ? selected
-          ? 'lisbox-item--selected'
-          : null
-        : selected
-        ? 'bg-secondary-200/10'
-        : null,
-    ]"
-    :tabindex="tabIndex"
+    :class="classComputed"
     :aria-disabled="disabled"
+    :tabindex="tabIndex"
+    class="-mx-3"
     role="menuitem"
     @click.stop.prevent="onClick"
     @keydown.down.prevent="focusPreviousItem"
@@ -42,11 +22,13 @@
 </template>
 
 <script>
-import { genId } from '../../utils/ids';
+import { floatingUiItemMixin } from '../../../mixins/floating-ui-item';
 
 export default {
   name: 'VTDropdownMenuItem',
 
+  mixins: [floatingUiItemMixin],
+
   inject: ['apiDropdownMenu'],
 
   props: {
@@ -58,139 +40,19 @@ export default {
       type: String,
       default: null,
     },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    headless: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   data() {
     return {
-      index: null,
-      selected: false,
-      tabIndex: 0,
+      apiInjected: this.apiDropdownMenu,
+      componentName: 'dropdown-menu-item',
     };
   },
 
   computed: {
-    id() {
-      return `dropdown-menu-item-${this.apiDropdownMenu().id}-${genId()}`;
-    },
-
     as() {
       return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
     },
-
-    items() {
-      return this.apiDropdownMenu().items;
-    },
-
-    el() {
-      return this.$el;
-    },
-
-    componentTrigger() {
-      return this.apiDropdownMenu().componentTrigger;
-    },
-  },
-
-  mounted() {
-    const item = {
-      select: this.select,
-      unselect: this.unselect,
-      focus: this.focus,
-    };
-
-    this.apiDropdownMenu().registerItem(item);
-
-    this.index = this.items.length - 1;
-  },
-
-  methods: {
-    select() {
-      this.selected = true;
-    },
-
-    unselect() {
-      this.selected = false;
-    },
-
-    focus() {
-      if (!this.el) return;
-
-      this.tabIndex = -1;
-      this.selected = true;
-      this.el.focus();
-    },
-
-    focusFirstItem() {
-      this.setFocusToItem(0);
-    },
-
-    focusLastItem() {
-      this.setFocusToItem(this.items.length - 1);
-    },
-
-    /**
-     * Focus the previous item in the menu.
-     * If is the first item, jump to the last item.
-     */
-    focusPreviousItem() {
-      const isLast = this.index === this.items.length - 1;
-      const goToIndex = isLast ? 0 : this.index + 1;
-
-      this.setFocusToItem(goToIndex);
-    },
-
-    /**
-     * Focus the next item in the menu.
-     * If is the last item, jump to the first item.
-     */
-    focusNextItem() {
-      const isFirst = this.index === 0;
-      const goToIndex = isFirst ? this.items.length - 1 : this.index - 1;
-
-      this.setFocusToItem(goToIndex);
-    },
-
-    /**
-     * Focus item by remove its tabindex and calling
-     * focus to the element.
-     *
-     * @param {Number, String} goToIndex
-     */
-    setFocusToItem(goToIndex) {
-      this.tabIndex = 0;
-      this.selected = false;
-
-      // set all selected to false
-      this.items.forEach((item) => item.unselect());
-
-      // focus item
-      this.items[goToIndex].focus();
-    },
-
-    leaveMenu() {
-      if (this.componentTrigger) {
-        this.componentTrigger.cancel();
-        this.componentTrigger.focus();
-      }
-    },
-
-    onKeyEsc() {
-      this.leaveMenu();
-    },
-
-    onClick() {
-      if (this.disabled) return;
-
-      this.$emit('click');
-      this.$nextTick(() => this.leaveMenu());
-    },
   },
 };
 </script>

package/src/components/Form/VTInput.vue

@@ -1,52 +1,40 @@
 <template>
   <input
-    v-bind="$attrs"
-    :class="[
-      headless
-        ? 'form-control'
-        : 'border border-solid py-2 px-3 rounded text-inherit max-w-full',
-      headless
-        ? `form-control--${variant}`
-        : isError
-        ? 'border-error-300'
-        : 'border-gray-300',
-    ]"
+    :class="classComputed"
     :value="value"
-    @input="$emit('input', $event.target.value)"
-    @blur="$emit('blur')"
+    :disabled="disabled"
+    v-on="listeners"
   />
 </template>
 
 <script>
-export default {
-  model: {
-    prop: 'value',
-    event: 'input',
-  },
+import { formControlMixin } from '../../../mixins/form-control';
 
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    value: {
-      type: [String, Number, Object, Array],
-      default: null,
-    },
-    headless: {
-      type: Boolean,
-      default: false,
-    },
-    variant: {
-      type: [String, Object, Function],
-      default: '',
-    },
-  },
+export default {
+  mixins: [formControlMixin],
 
-  computed: {
-    isError() {
-      return this.variant === 'error';
-    },
+  data() {
+    return {
+      name: 'input',
+    };
   },
 };
 </script>
+
+<style scoped>
+/* input[type='date']::-webkit-inner-spin-button,
+input[type='date']::-webkit-calendar-picker-indicator {
+  position: absolute;
+  opacity: 0;
+} */
+
+input[type='number'] {
+  appearance: textfield;
+}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  appearance: none;
+  -webkit-appearance: none;
+}
+</style>

package/src/components/Form/VTInputIcon.vue

@@ -0,0 +1,36 @@
+<template>
+  <div :class="classComputedWrapper">
+    <input
+      :class="classComputed"
+      :value="value"
+      :disabled="disabled"
+      v-bind="$attrs"
+      v-on="listeners"
+    />
+    <div :class="classComputedWrapperIcon">
+      <component :is="icon" class="h-5 w-5" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { formControlIconMixin } from '../../../mixins/form-control-icon';
+
+export default {
+  name: 'VTInputIcon',
+
+  mixins: [formControlIconMixin],
+
+  props: {
+    icon: {
+      type: String,
+      default: null,
+      required: true,
+    },
+    iconPlacement: {
+      type: String,
+      default: 'left',
+    },
+  },
+};
+</script>

package/src/components/Form/VTInputPassword.vue

@@ -0,0 +1,46 @@
+<template>
+  <div :class="classComputedWrapper">
+    <input
+      :class="classComputed"
+      :value="value"
+      :disabled="disabled"
+      :type="reveal ? 'text' : 'password'"
+      v-bind="$attrs"
+      v-on="listeners"
+    />
+    <div :class="classComputedWrapperIcon">
+      <VTButton v-show="value.length" variant="icon" @click="reveal = !reveal">
+        <component :is="iconVisibility" class="h-5 w-5" />
+      </VTButton>
+    </div>
+  </div>
+</template>
+
+<script>
+import { formControlIconMixin } from '../../../mixins/form-control-icon';
+
+export default {
+  name: 'VTInputPassword',
+
+  mixins: [formControlIconMixin],
+
+  props: {
+    iconPlacement: {
+      type: String,
+      default: 'right',
+    },
+  },
+
+  data() {
+    return {
+      reveal: false,
+    };
+  },
+
+  computed: {
+    iconVisibility() {
+      return this.reveal ? 'IconVisibilityOn' : 'IconVisibilityOff';
+    },
+  },
+};
+</script>

package/src/components/Form/VTTextarea.vue

@@ -0,0 +1,22 @@
+<template>
+  <textarea
+    :class="classComputed"
+    :value="value"
+    :disabled="disabled"
+    v-on="listeners"
+  />
+</template>
+
+<script>
+import { formControlMixin } from '../../../mixins/form-control';
+
+export default {
+  mixins: [formControlMixin],
+
+  data() {
+    return {
+      name: 'textarea',
+    };
+  },
+};
+</script>

package/src/components/Listbox/VTListbox.vue

@@ -31,10 +31,10 @@ export default {
           this.search = search;
         };
 
-        const registerList = (list) => {
-          if (!list) return;
-          this.list = list;
-        };
+        // const registerList = (list) => {
+        //   if (!list) return;
+        //   this.list = list;
+        // };
 
         const registerItem = (item) => {
           if (!item) return;
@@ -56,13 +56,12 @@ export default {
           component: this.component,
           componentTrigger: this.componentTrigger,
           componentContent: this.componentContent,
-          list: this.list,
           items: this.items,
           search: this.search,
           registerTrigger,
           registerContent,
           registerSearch,
-          registerList,
+          // registerList,
           registerItem,
           unregisterItem,
           emit,
@@ -94,7 +93,6 @@ export default {
     return {
       componentId: genId(),
       search: null,
-      list: null,
       items: [],
     };
   },

package/src/components/Listbox/VTListboxContent.vue

@@ -47,16 +47,13 @@ export default {
       id: this.id,
       show: this.show,
       hide: this.hide,
+      getMousemove: this.getMousemove,
+      setMousemove: this.setMousemove,
+      unsetMousemove: this.unsetMousemove,
       setActiveDescedant: this.setActiveDescedant,
     };
 
     this.apiListbox().registerContent(content);
   },
-
-  methods: {
-    setActiveDescedant(id) {
-      this.activeDescedant = id;
-    },
-  },
 };
 </script>

package/src/components/Listbox/VTListboxItem.vue

@@ -1,28 +1,7 @@
 <template>
   <li
     :id="id"
-    :class="[
-      // default styles
-      headless
-        ? 'listbox-item'
-        : 'relative z-10 flex items-center gap-2 px-3 py-2 text-inherit no-underline hover:bg-secondary-200/10',
-      // disabled state styles
-      headless
-        ? disabled
-          ? 'listbox-item--disabled'
-          : null
-        : disabled
-        ? 'pointer-events-none opacity-75'
-        : null,
-      // selected state styles
-      headless
-        ? selected
-          ? 'lisbox-item--selected'
-          : null
-        : selected
-        ? 'bg-secondary-200/10'
-        : null,
-    ]"
+    :class="classComputed"
     :aria-disabled="disabled"
     :aria-selected="String(selected)"
     :tabindex="tabIndex"
@@ -38,28 +17,21 @@
     @mouseout="onMouseleave"
     @keydown.tab.prevent
   >
-    <span class="truncate"><slot></slot></span>
+    <slot></slot>
   </li>
 </template>
 
 <script>
-import { scrollElementIntoView } from '../../utils/components';
-import { genId } from '../../utils/ids';
+import { floatingUiItemMixin } from '../../../mixins/floating-ui-item';
 
 export default {
   name: 'VTListboxItem',
 
+  mixins: [floatingUiItemMixin],
+
   inject: ['apiListbox'],
 
   props: {
-    headless: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
     value: {
       type: [String, Number, Object, Array],
       required: true,
@@ -68,171 +40,14 @@ export default {
 
   data() {
     return {
-      id: `listboxitem-${genId()}`,
-      index: null,
-      selected: false,
-      tabIndex: 0,
+      apiInjected: this.apiListbox,
+      componentName: 'listbox-item',
     };
   },
 
   computed: {
-    items() {
-      return this.apiListbox().items;
-    },
-
-    el() {
-      return this.$el;
-    },
-
-    componentTrigger() {
-      return this.apiListbox().componentTrigger;
-    },
-
-    componentContent() {
-      return this.apiListbox().componentContent;
-    },
-
-    list() {
-      return this.apiListbox().list;
-    },
-
     search() {
-      return this.apiListbox().search;
-    },
-  },
-
-  watch: {
-    selected(newValue) {
-      if (!newValue || !this.list) return;
-
-      if (this.componentContent) {
-        this.componentContent.setActiveDescedant(this.id);
-      }
-
-      const isMousemove = this.list.getMousemove();
-
-      if (!isMousemove) {
-        scrollElementIntoView(this.el, this.list.el);
-      }
-    },
-  },
-
-  mounted() {
-    const item = {
-      id: this.id,
-      focus: this.focus,
-      select: this.select,
-      unselect: this.unselect,
-      onClick: this.onClick,
-    };
-
-    this.apiListbox().registerItem(item);
-
-    this.index = this.items.length - 1;
-  },
-
-  beforeDestroy() {
-    this.apiListbox().unregisterItem(this.id);
-  },
-
-  methods: {
-    select() {
-      this.selected = true;
-    },
-
-    unselect() {
-      this.selected = false;
-    },
-
-    focus() {
-      if (!this.el) return;
-
-      this.tabIndex = -1;
-      this.selected = true;
-      this.el.focus();
-    },
-
-    focusFirstItem() {
-      this.setFocusToItem(0);
-    },
-
-    focusLastItem() {
-      this.setFocusToItem(this.items.length - 1);
-    },
-
-    /**
-     * Focus the previous item in the menu.
-     * If is the first item, jump to the last item.
-     */
-    focusPreviousItem() {
-      const isLast = this.index === this.items.length - 1;
-      const goToIndex = isLast ? 0 : this.index + 1;
-
-      this.setFocusToItem(goToIndex);
-    },
-
-    /**
-     * Focus the next item in the menu.
-     * If is the last item, jump to the first item.
-     */
-    focusNextItem() {
-      const isFirst = this.index === 0;
-      const goToIndex = isFirst ? this.items.length - 1 : this.index - 1;
-
-      this.setFocusToItem(goToIndex);
-    },
-
-    /**
-     * Focus item by remove its tabindex and calling
-     * focus to the element.
-     *
-     * @param {Number, String} goToIndex
-     */
-    setFocusToItem(goToIndex) {
-      this.tabIndex = 0;
-      this.selected = false;
-
-      const isMousemove = this.list.getMousemove();
-
-      if (isMousemove) {
-        this.list.unsetMousemove();
-        this.items.forEach((item) => item.unselect());
-      }
-
-      this.items[goToIndex].focus();
-    },
-
-    /**
-     * Hides componentContent/menu and focus on componentTrigger
-     */
-    leaveMenu() {
-      if (this.componentTrigger) {
-        this.componentTrigger.cancel();
-        this.componentTrigger.focus();
-      }
-    },
-
-    onKeyEsc() {
-      this.leaveMenu();
-    },
-
-    onClick() {
-      if (this.disabled) return;
-
-      this.apiListbox().emit(this.value);
-      this.$nextTick(() => this.leaveMenu());
-    },
-
-    onMousemove() {
-      this.items.forEach((item) => item.unselect());
-
-      this.select();
-      this.list.setMousemove();
-    },
-
-    onMouseleave() {
-      this.unselect();
-      this.list.unsetMousemove();
+      return this.apiInjected().search;
     },
   },
 };