@veritree/ui 0.19.2 → 0.20.0-0

package/src/components/DropdownMenu/VTDropdownMenuTrigger.vue

@@ -1,11 +1,12 @@
 <template>
   <div
+    :id="id"
     :aria-haspopup="hasPopup"
     :aria-expanded="expanded"
     :aria-controls="controls"
-    @keydown.down.prevent="onKeyArrowDown"
-    @keydown.up.prevent="onKeyArrowUp"
-    @keydown.esc.prevent="onKeyesc"
+    @keydown.down.prevent="onKeyDownOrUp"
+    @keydown.up.prevent="onKeyDownOrUp"
+    @keydown.esc.stop="onKeyEsc"
   >
     <slot></slot>
   </div>
@@ -15,32 +16,28 @@
 export default {
   name: 'VTDropdownMenuTrigger',
 
-  inject: ['api'],
+  inject: ['apiDropdownMenu'],
 
   data() {
     return {
       expanded: false,
       hasPopup: false,
       controls: null,
+      trigger: null,
     };
   },
 
   computed: {
-    // gets slot element
-    slotElm() {
-      return this.$slots.default[0].elm;
+    id() {
+      return `dropdown-menu-trigger-${this.apiDropdownMenu().id}`;
     },
 
-    slotLength() {
-      return this.$slots.default.length;
-    },
-
-    content() {
-      return this.api().content;
+    componentContent() {
+      return this.apiDropdownMenu().componentContent;
     },
 
     items() {
-      return this.api().items;
+      return this.apiDropdownMenu().items;
     },
 
     firstMenuItem() {
@@ -52,16 +49,35 @@ export default {
     },
   },
 
+  watch: {
+    expanded() {
+      this.toggleAriaHasPopup();
+    },
+  },
+
   mounted() {
-    this.api().registerTrigger(this);
-    this.addEventListenerToSlotElm();
+    const trigger = {
+      id: this.id,
+      el: this.$el,
+      cancel: this.cancel,
+      focus: this.focus,
+    };
+
+    this.apiDropdownMenu().registerTrigger(trigger);
+
+    this.setTrigger();
+    this.addTriggerEvents();
   },
 
   destroyed() {
-    this.slotElm.removeEventListener('click', this.onClick());
+    this.trigger.removeEventListener('click', this.onClick);
   },
 
   methods: {
+    setTrigger() {
+      this.trigger = this.$el.querySelector(':first-child');
+    },
+
     /**
      * Add event listener to slot element
      *
@@ -72,138 +88,92 @@ export default {
      * Slot must have only one child element. It avoids
      * errors related to adding the event listener.
      */
-    addEventListenerToSlotElm() {
-      if (!this.slotLength) return;
-
-      if (this.slotLength > 1) {
-        throw new Error('VTPopoverButton only accepts one item in its slot');
-      }
-
-      this.slotElm.addEventListener('click', (e) => {
-        e.stopImmediatePropagation();
-        this.onClick();
-      });
+    addTriggerEvents() {
+      this.trigger.addEventListener('click', this.onClick);
     },
 
-    /**
-     * Shows content/menu if not already visible
-     */
-    showContent() {
-      if (!this.expanded) {
-        this.toggleExpanded();
-        this.content.show();
+    init(e) {
+      if (!this.componentContent) {
+        return;
       }
-    },
 
-    /**
-     * Focus slot element if it exists and toggle expanded
-     */
-    focus() {
-      if (!this.slotElm) return;
+      if (this.expanded) {
+        this.cancel();
+        return;
+      }
 
-      this.slotElm.focus();
-      this.toggleExpanded();
-    },
+      this.expanded = true;
 
-    /**
-     * Toggles aria expanded attribute/state
-     */
-    toggleExpanded() {
-      this.expanded = !this.expanded;
-    },
-
-    /**
-     * 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.content) return;
-
-      this.hasPopup = !this.hasPopup;
-
-      if (!this.hasPopup) {
-        this.controls = null;
+    cancel() {
+      if (!this.componentContent) {
         return;
       }
 
-      this.controls = this.content.id;
-    },
-
-    /**
-     * 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() {
-      if (!this.content) return;
+      this.expanded = false;
 
-      this.toggleExpanded();
+      this.hideComponentContent();
+    },
 
-      this.$nextTick(() => {
-        if (this.expanded) this.content.show();
-        else this.content.hide();
-      });
+    focus() {
+      if (this.trigger) this.trigger.focus();
     },
 
-    /**
-     * 1. Set aria expanded attribute/state to false
-     * 2. Close the menu
-     */
-    hide() {
-      this.hideExpanded();
+    showComponentContent() {
+      this.componentContent.show();
+    },
 
-      this.$nextTick(() => {
-        this.content.hide();
-      });
+    hideComponentContent() {
+      this.componentContent.hide();
     },
 
-    /**
-     * 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.content) return;
+    toggleAriaHasPopup() {
+      if (this.expanded) {
+        this.hasPopup = this.componentContent !== null;
+        this.controls = this.hasPopup ? this.componentContent.id : null;
 
-      this.showContent();
+        return;
+      }
 
-      this.$nextTick(() => {
-        this.firstMenuItem.focus();
-      });
+      this.hasPopup = null;
+      this.controls = null;
     },
 
-    /**
-     * 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.content) return;
+    onClick(e) {
+      this.init(e);
+    },
 
-      this.showContent();
+    onKeyDownOrUp(e) {
+      if (!this.expanded) {
+        this.$el.click(e);
+      }
 
+      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(() => {
-        this.lastMenuItem.focus();
+        setTimeout(() => this[listItemPosition].focus(), 100);
       });
     },
 
-    onKeyesc() {
-      if (!this.content) return;
-
-      if (this.expanded) {
-        this.toggleExpanded();
-        this.content.hide();
-      }
+    // change it to a better name or move the methods inside to another function
+    onKeyEsc() {
+      this.cancel();
+      this.focus();
     },
   },
 };

package/src/components/Form/VTFormFeedback.vue

@@ -1,7 +1,33 @@
 <template>
-  <div class="form-feedback" :class="classes">
-    <component :is="icon" v-if="showIcon" />
-    <span class="text-gray-500"><slot></slot></span>
+  <div
+    :class="[
+      headless ? 'form-feedback' : 'mt-1 flex items-baseline gap-2',
+      // variant styles
+      headless ? `form-feedback--${variant}` : null,
+    ]"
+  >
+    <component
+      v-if="showIcon"
+      :is="icon"
+      :class="[
+        headless ? 'form-feedback__icon' : 'relative top-1 h-4 w-4 shrink-0',
+        // variant styles
+        headless
+          ? `form-feedback__icon--${variant}`
+          : isError
+          ? 'text-error-500'
+          : null,
+      ]"
+    />
+    <span
+      :class="[
+        headless
+          ? 'form-feedback--text'
+          : 'text-sm lowercase text-gray-500 first-letter:uppercase',
+      ]"
+    >
+      <slot />
+    </span>
   </div>
 </template>
 
@@ -17,32 +43,23 @@ export default {
   },
 
   props: {
-    variant: {
-      type: [String, Object],
-      default: '',
-      validator(value) {
-        if (value === '' || typeof value === 'object') {
-          return true;
-        }
-
-        return ['success', 'warning', 'error'].includes(value);
-      },
-    },
     hideIcon: {
       type: Boolean,
       default: false,
     },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    variant: {
+      type: [String, Object],
+      default: '',
+    },
   },
 
   computed: {
-    classes() {
-      const classes = {};
-
-      if (this.variant) {
-        classes[`form-feedback--${this.variant}`] = true;
-      }
-
-      return classes;
+    isError() {
+      return this.variant === 'error';
     },
 
     icon() {

package/src/components/Form/VTFormGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="as" :class="classes" class="form-group">
+  <component :is="as" :class="[headless ? 'form-control' : 'mt-3']">
     <slot></slot>
   </component>
 </template>
@@ -11,12 +11,10 @@ export default {
       type: String,
       default: 'div',
     },
-  },
-
-  data() {
-    return {
-      classes: {},
-    };
+    headless: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>

package/src/components/Form/VTFormLabel.vue

@@ -0,0 +1,22 @@
+<template>
+  <label
+    :class="[
+      headless
+        ? 'form-label'
+        : 'mb-1 flex justify-between gap-3 text-sm font-semibold',
+    ]"
+  >
+    <slot />
+  </label>
+</template>
+
+<script>
+export default {
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

package/src/components/Form/VTFormRow.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-2 md:gap-4">
+    <slot />
+  </div>
+</template>

package/src/components/Form/VTInput.vue

@@ -0,0 +1,40 @@
+<template>
+  <input
+    :class="classComputed"
+    :value="modelValue"
+    :disabled="disabled"
+    v-bind="attrsComputed"
+  />
+</template>
+
+<script>
+import {
+  formControlMixin,
+  formControlStyleMixin,
+} from '../../../mixins/form-control';
+export default {
+  mixins: [formControlMixin, formControlStyleMixin],
+  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,35 @@
+<template>
+  <div :class="classComputedWrapper">
+    <input
+      :class="classComputed"
+      :value="value"
+      :disabled="disabled"
+      v-bind="attrsComputed"
+    />
+    <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,55 @@
+<template>
+  <div :class="classComputedWrapper">
+    <input
+      :class="classComputed"
+      :value="modelValue"
+      :disabled="disabled"
+      :type="reveal ? 'text' : 'password'"
+      v-bind="attrsComputed"
+    />
+    <div :class="classComputedWrapperIcon">
+      <VTButton
+        v-show="modelValue.length"
+        variant="icon"
+        @click="reveal = !reveal"
+      >
+        <component :is="iconVisibility" class="h-5 w-5 text-gray-500" />
+      </VTButton>
+    </div>
+  </div>
+</template>
+
+<script>
+import { IconVisibilityOn, IconVisibilityOff } from '@veritree/icons';
+import { formControlIconMixin } from '../../../mixins/form-control-icon';
+
+export default {
+  name: 'VTInputPassword',
+
+  mixins: [formControlIconMixin],
+
+  components: {
+    IconVisibilityOn,
+    IconVisibilityOff,
+  },
+
+  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-bind="attrsComputed"
+  />
+</template>
+
+<script>
+import { formControlMixin } from '../../../mixins/form-control';
+
+export default {
+  mixins: [formControlMixin],
+
+  data() {
+    return {
+      name: 'textarea',
+    };
+  },
+};
+</script>