@veritree/ui 0.21.1-0 → 0.21.1-10

package/src/components/DropdownMenu/VTDropdownMenuDivider.vue

@@ -3,8 +3,6 @@
     :class="{
       PopoverDivider: headless,
       '-mx-3 my-2 h-[1px]': !headless,
-      'bg-gray-200': !dark,
-      'bg-fd-500': dark,
     }"
   ></div>
 </template>
@@ -13,15 +11,20 @@
 export default {
   name: 'VTDropdownMenuDivider',
 
-  inject: ['api'],
+  inject: ['apiDropdownMenu'],
+
+  headless: {
+    type: Boolean,
+    default: false,
+  },
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDropdownMenu().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDropdownMenu().isHeadless;
     },
   },
 };

package/src/components/DropdownMenu/VTDropdownMenuItem.vue

@@ -3,17 +3,10 @@
     :is="as"
     :id="id"
     :to="to"
-    :class="{
-      MenuItem: headless,
-      '-mx-3 flex min-w-max items-center gap-2 px-3 py-2 text-inherit no-underline':
-        !headless,
-      'hover:bg-secondary-200/10': !dark && !headless,
-      'text-white': dark && !headless,
-      'pointer-events-none opacity-75': disabled && !headless,
-      'bg-secondary-200/10': selected && !headless,
-    }"
-    :tabindex="tabIndex"
+    :class="classComputed"
     :aria-disabled="disabled"
+    :tabindex="tabIndex"
+    class="-mx-3"
     role="menuitem"
     @click.stop.prevent="onClick"
     @keydown.down.prevent="focusPreviousItem"
@@ -29,12 +22,14 @@
 </template>
 
 <script>
-import { genId } from '../../utils/ids';
+import { floatingUiItemMixin } from '../../../mixins/floating-ui-item';
 
 export default {
   name: 'VTDropdownMenuItem',
 
-  inject: ['api'],
+  mixins: [floatingUiItemMixin],
+
+  inject: ['apiDropdownMenu'],
 
   props: {
     to: {
@@ -45,148 +40,19 @@ export default {
       type: String,
       default: null,
     },
-    disabled: {
-      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.api().id}-${genId()}`;
-    },
-
-    dark() {
-      return this.api().isDark;
-    },
-
-    headless() {
-      return this.api().isHeadless;
-    },
-
     as() {
       return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
     },
-
-    items() {
-      return this.api().items;
-    },
-
-    el() {
-      return this.$el;
-    },
-
-    componentTrigger() {
-      return this.api().componentTrigger;
-    },
-
-    componentContent() {
-      return this.api().componentContent;
-    },
-  },
-
-  mounted() {
-    const item = {
-      select: this.select,
-      unselect: this.unselect,
-      focus: this.focus,
-    };
-
-    this.api().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();
-    },
-
-    /**
-     * Hides content/menu and focus on trigger
-     */
-    leaveMenu() {
-      if (this.componentContent) this.componentContent.hide();
-      if (this.componentTrigger) this.componentTrigger.focus();
-    },
-
-    onKeyEsc() {
-      this.leaveMenu();
-    },
-
-    onClick() {
-      if (this.disabled) return;
-
-      this.$emit('click');
-      this.$nextTick(() => this.leaveMenu());
-    },
   },
 };
 </script>

package/src/components/DropdownMenu/VTDropdownMenuLabel.vue

@@ -15,15 +15,15 @@
 export default {
   name: 'VTDropdownMenuLabel',
 
-  inject: ['api'],
+  inject: ['apiDropdownMenu'],
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDropdownMenu().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDropdownMenu().isHeadless;
     },
   },
 };

package/src/components/DropdownMenu/VTDropdownMenuTrigger.vue

@@ -4,9 +4,9 @@
     :aria-haspopup="hasPopup"
     :aria-expanded="expanded"
     :aria-controls="controls"
-    @keydown.down.prevent="onKeyArrowDown"
-    @keydown.up.prevent="onKeyArrowUp"
-    @keydown.esc.stop="onKeyesc"
+    @keydown.down.prevent="onKeyDownOrUp"
+    @keydown.up.prevent="onKeyDownOrUp"
+    @keydown.esc.stop="onKeyEsc"
   >
     <slot></slot>
   </div>
@@ -16,7 +16,7 @@
 export default {
   name: 'VTDropdownMenuTrigger',
 
-  inject: ['api'],
+  inject: ['apiDropdownMenu'],
 
   data() {
     return {
@@ -29,15 +29,15 @@ export default {
 
   computed: {
     id() {
-      return `dropdown-menu-trigger-${this.api().id}`;
+      return `dropdown-menu-trigger-${this.apiDropdownMenu().id}`;
     },
 
     componentContent() {
-      return this.api().componentContent;
+      return this.apiDropdownMenu().componentContent;
     },
 
     items() {
-      return this.api().items;
+      return this.apiDropdownMenu().items;
     },
 
     firstMenuItem() {
@@ -49,17 +49,21 @@ export default {
     },
   },
 
+  watch: {
+    expanded() {
+      this.toggleAriaHasPopup();
+    },
+  },
+
   mounted() {
     const trigger = {
-      toggleExpanded: this.toggleExpanded,
-      hideExpanded: this.hideExpanded,
+      id: this.id,
       el: this.$el,
+      cancel: this.cancel,
       focus: this.focus,
-      id: this.id,
-      onClick: this.onClick,
     };
 
-    this.api().registerTrigger(trigger);
+    this.apiDropdownMenu().registerTrigger(trigger);
 
     this.setTrigger();
     this.addTriggerEvents();
@@ -90,128 +94,88 @@ export default {
       });
     },
 
-    /**
-     * Shows content/menu if not already visible
-     */
-    showContent() {
-      this.expanded = true;
-      this.componentContent.show();
-    },
+    init(e) {
+      if (!this.componentContent) {
+        return;
+      }
 
-    /**
-     * Focus slot element if it exists and toggle expanded
-     */
-    focus() {
-      if (this.trigger) this.trigger.focus();
-    },
+      if (this.expanded) {
+        this.cancel();
+        return;
+      }
 
-    //
-    toggleExpanded() {
-      if (!this.expanded) return;
-      this.expanded = false;
-    },
+      this.expanded = true;
 
-    /**
-     * Sets aria expanded attribute/state to false
-     */
-    hideExpanded() {
-      this.expanded = false;
+      // delay stop propagation to close other visible
+      // dropdowns and delay click event to control
+      // this dropdown visibility
+      setTimeout(() => e.stopImmediatePropagation(), 50);
+      setTimeout(() => this.showComponentContent(), 100);
     },
 
-    /**
-     * Toggles aria popup/controls attribute/state
-     */
-    toggleHasPopup() {
-      if (!this.componentContent) return;
-
-      this.hasPopup = !this.hasPopup;
-
-      if (!this.hasPopup) {
-        this.controls = null;
+    cancel() {
+      if (!this.componentContent) {
         return;
       }
 
-      this.controls = this.componentContent.id;
+      this.expanded = false;
+
+      this.hideComponentContent();
     },
 
-    /**
-     * 1. Set aria expanded attribute/state to false
-     * 2. Close the menu
-     */
-    hide() {
-      this.hideExpanded();
+    focus() {
+      if (this.trigger) this.trigger.focus();
+    },
 
-      this.$nextTick(() => {
-        this.componentContent.hide();
-      });
+    showComponentContent() {
+      this.componentContent.show();
     },
 
-    /**
-     * On click, do the following:
-     *
-     * 1. Toggle aria expanded attribute/state
-     * 2. Open the menu if it's closed
-     * 3. Close the menu if it's open
-     */
-    onClick(e) {
-      if (!this.componentContent) return;
+    hideComponentContent() {
+      this.componentContent.hide();
+    },
 
+    toggleAriaHasPopup() {
       if (this.expanded) {
-        this.componentContent.hide();
+        this.hasPopup = this.componentContent !== null;
+        this.controls = this.hasPopup ? this.componentContent.id : null;
+
         return;
       }
 
-      // delay stop propagation to close other visible
-      // dropdowns and delay click event to control
-      // this dropdown visibility
-      setTimeout(() => e.stopImmediatePropagation(), 50);
-      setTimeout(() => this.showContent(), 100);
+      this.hasPopup = null;
+      this.controls = null;
     },
 
-    /**
-     * On key arrow down, do the following:
-     *
-     * 1. if the menu is not expanded, expand it and focus the first menu item
-     * 2. if the menu is expanded, focus the first menu item
-     */
-    onKeyArrowDown() {
-      if (!this.componentContent) return;
-
-      this.showContent();
-
-      // settimeout here is delaying the focusing the element
-      // since it is not rendered yet. All items will only
-      // be available when the content is fully visible.
-      this.$nextTick(() => {
-        setTimeout(() => this.firstMenuItem.focus(), 150);
-      });
+    onClick(e) {
+      this.init(e);
     },
 
-    /**
-     * On key arrow up, do the following:
-     *
-     * 1. if the menu is not expanded, expand it and focus the last menu item
-     * 2. if the menu is expanded, focus the last menu item
-     */
-    onKeyArrowUp() {
-      if (!this.componentContent) return;
+    onKeyDownOrUp(e) {
+      if (!this.expanded) {
+        this.$el.click(e);
+      }
 
-      this.showContent();
+      const keyCode = e.code;
+      const listItemPosition =
+        keyCode === 'ArrowDown'
+          ? 'firstMenuItem'
+          : keyCode === 'ArrowUp'
+          ? 'lastMenuItem'
+          : null;
 
       // settimeout here is delaying the focusing the element
       // since it is not rendered yet. All items will only
       // be available when the content is fully visible.
       this.$nextTick(() => {
-        setTimeout(() => this.lastMenuItem.focus(), 150);
+        setTimeout(() => this[listItemPosition].focus(), 100);
       });
     },
 
-    onKeyesc() {
-      if (!this.componentContent) return;
-
-      if (this.expanded) {
-        this.componentContent.hide();
-      }
+    // change it to a better name or move the methods inside to another function
+    onKeyEsc() {
+      this.cancel();
+      this.focus();
     },
   },
 };

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',
-      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,
-    },
-    variant: {
-      type: [String, Object, Function],
-      default: '',
-    },
-    headless: {
-      type: Boolean,
-      default: false,
-    },
-  },
+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>