@veritree/ui 0.19.2-20 → 0.19.2-22

package/src/components/Tooltip/VTTooltip.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script>
+import { floatingUiMixin } from '../../../mixins/floating-ui';
+import { genId } from '../../utils/ids';
+
+export default {
+  name: 'VTTooltip',
+
+  mixins: [floatingUiMixin],
+
+  props: {
+    delayDuration: {
+      type: [String, Number],
+      default: 500,
+    },
+    placement: {
+      type: String,
+      default: 'bottom',
+    },
+  },
+
+  data() {
+    return {
+      floatingUiMinWidth: 0,
+    };
+  },
+
+  provide() {
+    return {
+      apiTooltip: () => {
+        const registerTrigger = (trigger) => {
+          if (!trigger) return;
+          this.componentTrigger = trigger;
+        };
+
+        const registerContent = (content) => {
+          if (!content) return;
+          this.componentContent = content;
+        };
+
+        return {
+          id: this.componentId,
+          component: this.component,
+          componentTrigger: this.componentTrigger,
+          componentContent: this.componentContent,
+          delayDuration: this.delayDuration,
+          registerTrigger,
+          registerContent,
+        };
+      },
+    };
+  },
+
+  data() {
+    return {
+      componentId: genId(),
+    };
+  },
+};
+</script>

package/src/components/Tooltip/VTTooltipContent.vue

@@ -0,0 +1,59 @@
+<template>
+  <FloatingUi
+    :id="id"
+    :visible="visible"
+    :headless="headless"
+    component="tooltip"
+  >
+    <slot></slot>
+  </FloatingUi>
+</template>
+
+<script>
+import { floatingUiContentMixin } from '../../../mixins/floating-ui-content';
+
+export default {
+  name: 'VTTooltipContent',
+
+  inheritAttrs: false,
+
+  mixins: [floatingUiContentMixin],
+
+  inject: ['apiTooltip'],
+
+  data() {
+    return {
+      visible: false,
+    };
+  },
+
+  computed: {
+    id() {
+      return `tooltip-content-${this.apiTooltip().id}`;
+    },
+
+    component() {
+      return this.apiTooltip().component;
+    },
+
+    componentTrigger() {
+      return this.apiTooltip().componentTrigger;
+    },
+
+    ariaLabelledby() {
+      if (!this.componentTrigger) return null;
+      return this.visible ? this.componentTrigger.id : null;
+    },
+  },
+
+  mounted() {
+    const content = {
+      id: this.id,
+      hide: this.hide,
+      show: this.show,
+    };
+
+    this.apiTooltip().registerContent(content);
+  },
+};
+</script>

package/src/components/Tooltip/VTTooltipTrigger.vue

@@ -0,0 +1,98 @@
+<template>
+  <div
+    :id="id"
+    :aria-describedby="ariaDescribedBy"
+    @mouseenter="onMouseenter"
+    @mouseleave="onmouseout"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+let tooltipTriggerTimeout = null;
+
+export default {
+  name: 'VTTooltipTrigger',
+
+  inject: ['apiTooltip'],
+
+  data() {
+    return {
+      expanded: false,
+    };
+  },
+
+  computed: {
+    id() {
+      return `tooltip-trigger-${this.apiTooltip().id}`;
+    },
+
+    componentContent() {
+      return this.apiTooltip().componentContent;
+    },
+
+    ariaDescribedBy() {
+      if (!this.componentContent) return null;
+      return this.expanded ? this.componentContent.id : null;
+    },
+  },
+
+  mounted() {
+    const trigger = {
+      cancel: this.cancel,
+      id: this.id,
+    };
+
+    this.apiTooltip().registerTrigger(trigger);
+  },
+
+  methods: {
+    onMouseenter(e) {
+      tooltipTriggerTimeout = setTimeout(() => {
+        this.init(e);
+      }, this.apiTooltip().delayDuration);
+    },
+
+    onmouseout() {
+      clearTimeout(tooltipTriggerTimeout);
+      this.cancel();
+    },
+
+    init(e) {
+      if (!this.componentContent) {
+        return;
+      }
+
+      if (this.expanded) {
+        this.cancel();
+        return;
+      }
+
+      this.expanded = true;
+
+      // delay stop propagation to close other visible
+      // dropdowns and delay click event to control
+      // this dropdown visibility
+      this.showComponentContent();
+    },
+
+    cancel() {
+      if (!this.componentContent) {
+        return;
+      }
+
+      this.expanded = false;
+      this.hideComponentContent();
+    },
+
+    showComponentContent() {
+      this.componentContent.show();
+    },
+
+    hideComponentContent() {
+      this.componentContent.hide();
+    },
+  },
+};
+</script>

package/src/components/Utils/FloatingUi.vue

@@ -2,25 +2,24 @@
   <Teleport to="body">
     <transition
       enter-active-class="duration-200 ease-out"
-      enter-from-class="translate-y-[15px] opacity-0"
-      enter-to-class="translate-y-0 opacity-100"
+      :enter-from-class="transitionEnterClass"
+      :enter-to-class="transitionEnterToClass"
       leave-active-class="duration-200 ease-in"
-      leave-from-class="translate-y-0 opacity-100"
-      leave-to-class="translate-y-[15px] opacity-0"
-      @after-leave="hide"
+      :leave-from-class="transitionLeaveClass"
+      :leave-to-class="transitionLeaveToClass"
+      @after-leave="hidden"
+      @after-enter="shown"
     >
       <div
         v-if="visible"
-        :id="id"
         :class="[
           headless
-            ? null
-            : 'shadow-300 absolute z-50 grid overflow-x-hidden rounded-md border-gray-100 bg-white py-2 px-3',
-          floatingUiClass ? floatingUiClass : null,
+            ? `${this.component}-content`
+            : `absolute z-50 grid overflow-hidden rounded-md shadow-md  ${this.classes} ${this.portalClass}`,
         ]"
         v-bind="$attrs"
       >
-        <slot></slot>
+        <slot />
       </div>
     </transition>
   </Teleport>
@@ -31,27 +30,63 @@ export default {
   inheritAttrs: false,
 
   props: {
+    component: {
+      type: String,
+      default: null,
+    },
     headless: {
       type: Boolean,
       default: false,
     },
-    id: {
-      type: [String, Number],
-      default: null,
-    },
     visible: {
       type: Boolean,
       default: false,
     },
-    floatingUiClass: {
+    ariaActivedescendant: {
+      type: String,
+      default: null,
+    },
+    portalClass: {
       type: [String, Function],
       default: null,
     },
   },
 
+  computed: {
+    isTooltip() {
+      return this.component === 'tooltip';
+    },
+
+    classes() {
+      return this.isTooltip
+        ? 'bg-gray-800 text-sm text-white py-1 px-2'
+        : 'bg-white py-2 px-3';
+    },
+
+    transitionEnterClass() {
+      return this.isTooltip ? 'opacity-0' : 'translate-y-[15px] opacity-0';
+    },
+
+    transitionEnterToClass() {
+      return this.isTooltip ? 'opacity-100' : 'translate-y-0 opacity-100';
+    },
+
+    transitionLeaveClass() {
+      return this.transitionEnterToClass;
+    },
+
+    transitionLeaveToClass() {
+      return this.transitionEnterClass;
+    },
+  },
+
   methods: {
-    hide() {
-      this.$emit('hide');
+    shown() {
+      this.$emit('shown');
+    },
+
+    hidden() {
+      this.$emit('hidden');
     },
   },
 };

package/src/components/Input/VTInput.vue

@@ -1,82 +0,0 @@
-<template>
-  <input
-    :class="classes"
-    class="form-control"
-    :data-theme="theme"
-    :type="type"
-    :value="value"
-    v-on="listeners"
-  />
-</template>
-
-<script>
-export default {
-  name: 'VTInput',
-
-  props: {
-    lazy: {
-      type: Boolean,
-      default: false,
-    },
-    type: {
-      type: String,
-      default: 'text',
-    },
-    theme: {
-      type: String,
-      default: null,
-      validator(value) {
-        return ['dark'].includes(value);
-      },
-    },
-    variant: {
-      type: [String, Object],
-      default: '',
-      validator(value) {
-        if (value === '' || typeof value === 'object') {
-          return true;
-        }
-
-        return ['success', 'warning', 'error'].includes(value);
-      },
-    },
-    value: {
-      type: [String, Number, Object, Array],
-      default: null,
-    },
-  },
-
-  computed: {
-    classes() {
-      const classes = {};
-
-      if (this.variant) {
-        classes[`form-control--${this.variant}`] = true;
-      }
-
-      return classes;
-    },
-
-    listeners() {
-      // `Object.assign` merges objects together to form a new object
-      return Object.assign(
-        {},
-        // We add all the listeners from the parent
-        this.$listeners,
-        // Then we can add custom listeners or override the
-        // behavior of some listeners.
-        {
-          // This ensures that the component works with v-model
-          input: (event) => {
-            if (this.lazy) return;
-            this.$emit('input', event.target.value);
-          },
-          blur: (event) => {
-            this.$emit('blur', event);
-          },
-        }
-      );
-    },
-  },
-};
-</script>

package/src/components/Input/VTInputDate.vue

@@ -1,36 +0,0 @@
-<template>
-  <VTInput v-model="date" type="date" />
-</template>
-
-<script>
-import VTInput from './VTInput.vue';
-
-export default {
-  name: 'VTInputDate',
-
-  components: { VTInput },
-
-  model: {
-    prop: 'value',
-    event: 'input',
-  },
-
-  props: {
-    value: {
-      type: String,
-      default: '',
-    },
-  },
-
-  computed: {
-    date: {
-      get() {
-        return this.$date.format(this.value, 'YYYY-MM-DD');
-      },
-      set(newDate) {
-        this.$emit('input', newDate);
-      },
-    },
-  },
-};
-</script>

package/src/components/Input/VTInputFile.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="flex items-stretch gap-2">
-    <VTInput
-      ref="input"
-      type="file"
-      :value="value"
-      :theme="theme"
-      v-bind="$attrs"
-      @change="onChange"
-    />
-    <VTButton :theme="theme" @click.stop="onButtonClick">Browse</VTButton>
-  </div>
-</template>
-
-<script>
-import VTButton from '../Button/VTButton.vue';
-import VTInput from './VTInput.vue';
-
-export default {
-  name: 'VTInputFile',
-
-  components: {
-    VTInput,
-    VTButton,
-  },
-
-  inheritAttrs: false,
-
-  props: {
-    theme: {
-      type: String,
-      default: null,
-      validator(value) {
-        return ['dark'].includes(value);
-      },
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    return {
-      value: null,
-    };
-  },
-
-  methods: {
-    onChange(event) {
-      this.value = this.$refs.input.$el.value;
-      this.$emit('change', event);
-    },
-
-    onButtonClick() {
-      this.$refs.input.$el.click();
-    },
-  },
-};
-</script>

package/src/components/Input/VTInputUpload.vue

@@ -1,54 +0,0 @@
-<template>
-  <label
-    class="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dotted border-white p-4 text-center hover:border-fl-500 hover:bg-fd-500"
-    :class="{ 'border-fl-500 bg-fd-500': isDraggingOver }"
-    @drop.prevent="onDrop"
-    @dragover.prevent="onDragOver"
-    @dragleave.prevent="onDragLeave"
-  >
-    <IconImagePlaceholder class="mb-3" />
-    <span>Drop your images here, or click to browse</span>
-    <VTInput type="file" class="sr-only" v-bind="$attrs" @change="onChange" />
-  </label>
-</template>
-
-<script>
-import { IconImagePlaceholder } from '@veritree/icons';
-import VTInput from './VTInput.vue';
-
-export default {
-  name: 'VTInputFile',
-
-  components: {
-    VTInput,
-    IconImagePlaceholder,
-  },
-
-  inheritAttrs: false,
-
-  data() {
-    return {
-      isDraggingOver: false,
-    };
-  },
-
-  methods: {
-    onDrop(event) {
-      this.isDraggingOver = false;
-      this.$emit('drop', event);
-    },
-
-    onDragOver() {
-      this.isDraggingOver = true;
-    },
-
-    onDragLeave() {
-      this.isDraggingOver = false;
-    },
-
-    onChange(event) {
-      this.$emit('change', event);
-    },
-  },
-};
-</script>