@veritree/ui 0.19.2-2 → 0.19.2-21

package/src/components/Tabs/VTTab.vue

@@ -32,7 +32,7 @@ import { keys } from '../../utils/keyboard';
 export default {
   name: 'VTTabItem',
 
-  inject: ['api'],
+  inject: ['apiTabs'],
 
   props: {
     headless: {
@@ -43,7 +43,6 @@ export default {
 
   data() {
     return {
-      api: this.api(),
       index: null,
       indexFocus: null,
       selected: false,
@@ -57,11 +56,11 @@ export default {
   },
 
   mounted() {
-    this.api.registerTab(this);
+    this.apiTabs().registerTab(this);
   },
 
-  beforeDestroy() {
-    this.api.unregisterTab(this.index);
+  beforeUnmount() {
+    this.apiTabs().unregisterTab(this.index);
   },
 
   methods: {
@@ -78,11 +77,11 @@ export default {
     },
 
     focusFirstTab() {
-      this.api.focusTab(0);
+      this.apiTabs().focusTab(0);
     },
 
     focusLastTab(lastTabIndex) {
-      this.api.focusTab(lastTabIndex);
+      this.apiTabs().focusTab(lastTabIndex);
     },
 
     focusPreviousTab(lastTabIndex) {
@@ -91,7 +90,7 @@ export default {
         return;
       }
 
-      this.api.focusTab(this.indexFocus - 1);
+      this.apiTabs().focusTab(this.indexFocus - 1);
     },
 
     focusNextTab(lastTabIndex) {
@@ -100,17 +99,17 @@ export default {
         return;
       }
 
-      this.api.focusTab(this.indexFocus + 1);
+      this.apiTabs().focusTab(this.indexFocus + 1);
     },
 
     onClick() {
-      this.api.selectTab(this.index);
+      this.apiTabs().selectTab(this.index);
       this.$emit('change');
     },
 
     onKeyDown(event) {
       const key = event.key;
-      const lastTabIndex = this.api.getTabsLength() - 1;
+      const lastTabIndex = this.apiTabs().getTabsLength() - 1;
 
       if (this.indexFocus === null) {
         this.indexFocus = this.index;

package/src/components/Tabs/VTTabGroup.vue

@@ -5,10 +5,10 @@
 </template>
 
 <style scoped>
-.TabGroup.vertical{
+.TabGroup.vertical {
   display: flex;
 }
-.TabGroup.vertical .TabList{
+.TabGroup.vertical .TabList {
   display: flex;
   flex-direction: column;
 }
@@ -17,15 +17,17 @@
 <script>
 export default {
   name: 'VTTabGroup',
+
   props: {
-      vertical: {
-          type: Boolean,
-          default: false
-      }
+    vertical: {
+      type: Boolean,
+      default: false,
+    },
   },
+
   provide() {
     return {
-      api: () => {
+      apiTabs: () => {
         const registerTab = (tab) => {
           _register(this.tabs, tab);
           if (tab.index === 0) tab.select();

package/src/components/Tabs/VTTabPanel.vue

@@ -14,11 +14,10 @@
 export default {
   name: 'VTTabPanel',
 
-  inject: ['api'],
+  inject: ['apiTabs'],
 
   data() {
     return {
-      api: this.api(),
       index: null,
       visible: false,
     };
@@ -31,11 +30,11 @@ export default {
   },
 
   mounted() {
-    this.api.registerTabPanel(this);
+    this.apiTabs().registerTabPanel(this);
   },
 
-  beforeDestroy() {
-    this.api.unregisterTabPanel(this.id);
+  beforeUnmount() {
+    this.apiTabs().unregisterTabPanel(this.id);
   },
 
   methods: {

package/src/components/Transitions/FadeInOut.vue

@@ -1,10 +1,10 @@
 <template>
   <transition
     enter-active-class="duration-300 ease-out"
-    enter-class="transform opacity-0"
+    enter-from-class="transform opacity-0"
     enter-to-class="opacity-100"
     leave-active-class="duration-300 ease-in"
-    leave-class="opacity-100"
+    leave-from-class="opacity-100"
     leave-to-class="transform opacity-0"
     @after-enter="afterEnter"
     @after-leave="afterLeave"

package/src/components/Utils/FloatingUi.vue

@@ -0,0 +1,87 @@
+<template>
+  <Teleport to="body">
+    <transition
+      enter-active-class="duration-200 ease-out"
+      :enter-from-class="transitionEnterClass"
+      :enter-to-class="transitionEnterToClass"
+      leave-active-class="duration-200 ease-in"
+      :leave-from-class="transitionLeaveClass"
+      :leave-to-class="transitionLeaveToClass"
+      @after-leave="hidden"
+      @after-enter="shown"
+    >
+      <div
+        v-if="visible"
+        :class="[
+          headless
+            ? `${this.component}-content`
+            : `absolute z-50 grid overflow-hidden rounded-md shadow-md  ${this.classes} ${this.portalClass}`,
+        ]"
+        v-bind="$attrs"
+      >
+        <slot />
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script>
+export default {
+  props: {
+    component: {
+      type: String,
+      default: null,
+    },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    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: {
+    shown() {
+      this.$emit('shown');
+    },
+
+    hidden() {
+      this.$emit('hidden');
+    },
+  },
+};
+</script>

package/package-lock.json

@@ -1,13 +0,0 @@
-{
-  "name": "@veritree/ui",
-  "version": "0.1.9",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "@veritree/icons": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@veritree/icons/-/icons-0.12.0.tgz",
-      "integrity": "sha512-vunUKzvS9neslSf3R3y6RYQrcfRpxmp8PnhWWe2peYiyElLIJcb7zAsfCZ+I0Fg5PQ6GZG6StqWy0WF7MJ7VOg=="
-    }
-  }
-}

package/src/components/Modal/VTModal.vue

@@ -1,69 +0,0 @@
-<template>
-  <transition
-    enter-active-class="duration-300 ease-out"
-    enter-class="transform opacity-0"
-    enter-to-class="opacity-100"
-    leave-active-class="duration-300 ease-in"
-    leave-class="opacity-100"
-    leave-to-class="transform opacity-0"
-    @after-enter="afterEnter"
-    @after-leave="afterLeave"
-  >
-    <div
-      v-if="visible"
-      class="fixed inset-0 z-50 flex flex-col justify-center bg-fd-700/75"
-      tabindex="-1"
-      @keyup.esc="close"
-      @click="close"
-    >
-      <div
-        class="relative mx-auto flex max-w-lg flex-col justify-center rounded bg-white"
-        @click.stop
-      >
-        <div class="absolute right-4 top-4">
-          <VTButton variant="icon" @click.prevent="close"
-            ><IconClose class="h-4 w-4"
-          /></VTButton>
-        </div>
-        <slot></slot>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-import { IconClose } from '@veritree/icons';
-import VTButton from '../Button/VTButton.vue';
-
-export default {
-  name: 'VTModal',
-
-  components: { IconClose, VTButton },
-
-  model: {
-    prop: 'visible',
-  },
-
-  props: {
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  methods: {
-    close() {
-      this.$emit('input', false);
-    },
-
-    afterEnter() {
-      this.$emit('shown');
-      this.$nextTick(() => this.$el.focus());
-    },
-
-    afterLeave() {
-      this.$emit('hidden');
-    },
-  },
-};
-</script>

package/src/utils/genId.js

@@ -1,13 +0,0 @@
-// Generate id
-// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*
-let gen = null;
-
-function* idMaker() {
-  let index = 0;
-  while (true) yield index++;
-}
-
-export const genId = () => {
-  if (!gen) gen = idMaker();
-  return gen.next().value;
-};