@veritree/ui 0.36.0 → 0.38.0

package/.vscode/settings.json

@@ -0,0 +1 @@
+{}

package/mixins/floating-ui-content.js

@@ -20,7 +20,7 @@ export const floatingUiContentMixin = {
   },
 
   mounted() {
-    document.addEventListener('click', (e) => this.onDocumentClick(e));
+    document.addEventListener('click', (e) => this.onDocumentClick);
   },
 
   destroyed() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.36.0",
+  "version": "0.38.0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -10,14 +10,25 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
+  },
   "dependencies": {
     "@floating-ui/dom": "^1.2.0",
     "@linusborg/vue-simple-portal": "^0.1.5",
     "@veritree/icons": "^0.43.0"
   },
   "devDependencies": {
+    "@vitejs/plugin-vue2": "^1.1.2",
+    "@vue/test-utils": "^1.3.0",
+    "jsdom": "latest",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
-    "tailwindcss": "^3.2.4"
+    "tailwindcss": "^3.2.4",
+    "vite": "latest",
+    "vitest": "latest",
+    "vue": "^2.7.2",
+    "vue-template-compiler": "^2.7.2"
   }
 }

package/src/components/Alert/VTAlert.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="show"
+    v-if="visible"
     :class="[
       // default styles
       headless ? 'alert' : 'flex items-start gap-3 rounded border border-solid',
@@ -29,9 +29,15 @@
     <button
       v-if="dismissable"
       :class="[
-        !headless
-          ? 'ml-auto mt-1 h-4 w-4 shrink-0 text-current'
-          : 'alert-close',
+        // default styles
+        headless ? 'alert-close' : 'ml-auto  h-4 w-4 shrink-0 text-current',
+        headless
+          ? `alert-close--${variant}`
+          : isLarge
+          ? 'mt-1'
+          : isSmall
+          ? 'mt-0.5'
+          : null,
       ]"
       @click="hide"
     >
@@ -41,9 +47,19 @@
 </template>
 
 <script>
+import IconClose from '@veritree/icons/src/components/IconClose.vue';
+
 export default {
   name: 'VTAlert',
 
+  components: {
+    IconClose,
+  },
+
+  model: {
+    prop: 'visible',
+  },
+
   props: {
     variant: {
       type: String,
@@ -61,12 +77,10 @@ export default {
       type: Boolean,
       default: false,
     },
-  },
-
-  data() {
-    return {
-      show: true,
-    };
+    visible: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   computed: {
@@ -93,8 +107,8 @@ export default {
 
   methods: {
     hide() {
+      this.$emit('input', false);
       this.$emit('dismiss');
-      this.show = false;
     },
   },
 };

package/src/components/Tabs/VTTabGroup.vue

@@ -4,24 +4,14 @@
   </div>
 </template>
 
-<style scoped>
-.TabGroup.vertical{
-  display: flex;
-}
-.TabGroup.vertical .TabList{
-  display: flex;
-  flex-direction: column;
-}
-</style>
-
 <script>
 export default {
   name: 'VTTabGroup',
   props: {
-      vertical: {
-          type: Boolean,
-          default: false
-      }
+    vertical: {
+      type: Boolean,
+      default: false,
+    },
   },
   provide() {
     return {
@@ -113,3 +103,13 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.TabGroup.vertical {
+  display: flex;
+}
+.TabGroup.vertical .TabList {
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/src/components/Tooltip/VTTooltipTrigger.vue

@@ -2,7 +2,6 @@
   <div
     :id="id"
     :aria-describedby="ariaDescribedBy"
-    class="flex min-w-min"
     @mouseenter="onMouseenter"
     @mouseleave="onmouseout"
   >
@@ -75,8 +74,7 @@ export default {
       // 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);
+      this.showComponentContent();
     },
 
     cancel() {

package/src/components/Utils/FloatingUi.vue

@@ -2,11 +2,11 @@
   <Portal>
     <transition
       enter-active-class="duration-200 ease-out"
-      enter-class="translate-y-[15px] opacity-0"
-      enter-to-class="translate-y-0 opacity-100"
+      :enter-class="transitionEnterClass"
+      :enter-to-class="transitionEnterToClass"
       leave-active-class="duration-200 ease-in"
-      leave-class="translate-y-0 opacity-100"
-      leave-to-class="translate-y-[15px] opacity-0"
+      :leave-class="transitionLeaveClass"
+      :leave-to-class="transitionLeaveToClass"
       @after-leave="hidden"
       @after-enter="shown"
     >
@@ -62,6 +62,22 @@ export default {
         ? '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: {

package/test/alert.test.js

@@ -0,0 +1,158 @@
+import { mount } from '@vue/test-utils';
+import IconClose from '@veritree/icons/src/components/IconClose.vue';
+import VTAlert from '@/components/Alert/VTAlert.vue';
+
+describe('VTAlert.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(VTAlert, {
+      slots: {
+        default: '<p>Alert message goes here</p>',
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the component', () => {
+    expect(VTAlert).toBeTruthy();
+  });
+
+  it('has the correct default props', () => {
+    expect(wrapper.props().variant).toBe('success');
+    expect(wrapper.props().size).toBe('large');
+    expect(wrapper.props().headless).toBe(false);
+    expect(wrapper.props().dismissable).toBe(false);
+  });
+
+  it('displays the component with default styles', () => {
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining([
+        'flex',
+        'items-start',
+        'gap-3',
+        'rounded',
+        'border',
+        'border-solid',
+      ])
+    );
+
+    expect(wrapper.classes()).not.toContain('alert');
+  });
+
+  it('displays the component with success variant styles', async () => {
+    await wrapper.setProps({ variant: 'success' });
+
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining([
+        'border-success-300',
+        'bg-success-200',
+        'text-success-700',
+      ])
+    );
+
+    expect(wrapper.classes()).not.toContain('border-error-300');
+    expect(wrapper.classes()).not.toContain('bg-error-200');
+    expect(wrapper.classes()).not.toContain('text-error-700');
+    expect(wrapper.classes()).not.toContain('border-warning-300');
+    expect(wrapper.classes()).not.toContain('bg-warning-200');
+    expect(wrapper.classes()).not.toContain('text-warning-700');
+  });
+
+  it('displays the component with error variant styles', async () => {
+    await wrapper.setProps({ variant: 'error' });
+
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining([
+        'border-error-300',
+        'bg-error-200',
+        'text-error-700',
+      ])
+    );
+
+    expect(wrapper.classes()).not.toContain('border-success-300');
+    expect(wrapper.classes()).not.toContain('bg-success-200');
+    expect(wrapper.classes()).not.toContain('text-success-700');
+    expect(wrapper.classes()).not.toContain('border-warning-300');
+    expect(wrapper.classes()).not.toContain('bg-warning-200');
+    expect(wrapper.classes()).not.toContain('text-warning-700');
+  });
+
+  it('displays the component with warning variant styles', async () => {
+    await wrapper.setProps({ variant: 'warning' });
+
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining([
+        'border-warning-300',
+        'bg-warning-200',
+        'text-warning-700',
+      ])
+    );
+
+    expect(wrapper.classes()).not.toContain('border-success-300');
+    expect(wrapper.classes()).not.toContain('bg-success-200');
+    expect(wrapper.classes()).not.toContain('text-success-700');
+    expect(wrapper.classes()).not.toContain('border-error-300');
+    expect(wrapper.classes()).not.toContain('bg-error-200');
+    expect(wrapper.classes()).not.toContain('text-error-700');
+  });
+
+  it('displays the default large styles', () => {
+    expect(wrapper.classes()).toContain('p-3');
+  });
+
+  it('displays the component with small size styles', async () => {
+    await wrapper.setProps({ size: 'small' });
+
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining(['py-1', 'px-2', 'text-sm'])
+    );
+  });
+
+  describe('dismiss button', () => {
+    it('displays dismiss button default classes', async () => {
+      await wrapper.setProps({ dismissable: true });
+
+      expect(wrapper.isVisible()).toBe(true);
+
+      // Find dismiss button
+      const dismissButton = wrapper.find('button');
+
+      expect(dismissButton.classes()).toEqual(
+        expect.arrayContaining([
+          'ml-auto',
+          'mt-1',
+          'h-4',
+          'w-4',
+          'shrink-0',
+          'text-current',
+        ])
+      );
+    });
+
+    it('renders the icon close when dismiss is visible', async () => {
+      await wrapper.setProps({ dismissable: true });
+
+      expect(wrapper.findComponent(IconClose).exists()).toBe(true);
+    });
+
+    it('hides the alert when the dismiss button is clicked', async () => {
+      await wrapper.setProps({ dismissable: true });
+
+      expect(wrapper.isVisible()).toBe(true);
+
+      // Click the dismiss button
+      const dismissButton = wrapper.find('button');
+      await dismissButton.trigger('click');
+
+      // Verify that the alert is now hidden
+      expect(wrapper.isVisible()).toBe(false);
+
+      // Verify that the 'dismiss' event was emitted
+      expect(wrapper.emitted('dismiss')).toBeTruthy();
+    });
+  });
+});

package/test/button.test.js

@@ -0,0 +1,134 @@
+import { mount } from '@vue/test-utils';
+import VTButton from '@/components/Button/VTButton.vue';
+
+describe('VTButton.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(VTButton, {
+      slots: {
+        default: 'Submit',
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the button if "to" and "href" props are not provided', () => {
+    expect(wrapper.find('button').exists()).toBe(true);
+  });
+
+  it('renders a NuxtLink when the "to" prop is provided', async () => {
+    await wrapper.setProps({ to: '/some-page' });
+
+    expect(wrapper.find('NuxtLink').exists()).toBe(true);
+  });
+
+  it('renders an "a" tag when the "href" prop is provided', async () => {
+    await wrapper.setProps({ href: 'https://example.com' });
+
+    expect(wrapper.find('a').exists()).toBe(true);
+  });
+
+  it('has the correct default props', () => {
+    expect(wrapper.props().variant).toBe('primary');
+    expect(wrapper.props().size).toBe('large');
+    expect(wrapper.props().to).toBe(null);
+    expect(wrapper.props().href).toBe(null);
+    expect(wrapper.props().headless).toBe(false);
+    expect(wrapper.props().busy).toBe(false);
+    expect(wrapper.props().disabled).toBe(false);
+  });
+
+  it('displays the component default styles', () => {
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining([
+        'relative',
+        'inline-flex',
+        'rounded',
+        'border',
+        'border-solid',
+        'px-4',
+        'text-sm',
+        'font-semibold',
+        'leading-none',
+        'no-underline',
+        'transition-all',
+      ])
+    );
+
+    expect(wrapper.classes()).not.toContain('button');
+  });
+
+  it('displays the component with primary variant styles', async () => {
+    await wrapper.setProps({ variant: 'primary' });
+
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining([
+        'bg-secondary-400',
+        'hover:bg-secondary-500',
+        'focus:bg-secondary-600',
+        'active:bg-secondary-600',
+        'border-transparent',
+        'text-white',
+        'disabled:bg-gray-200',
+        'disabled:text-gray-400'
+      ])
+    );
+
+    expect(wrapper.classes()).not.toContain('button');
+  });
+
+  it('displays the component with secondary variant styles', async () => {
+    await wrapper.setProps({ variant: 'secondary' });
+
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining([
+        'border-gray-400',
+        'bg-white',
+        'text-gray-700',
+        'hover:bg-gray-100',
+        'hover:bg-gray-200',
+        'active:bg-gray-200',
+        'disabled:border-gray-300',
+        'disabled:text-gray-400'
+      ])
+    );
+
+    expect(wrapper.classes()).not.toContain('button');
+  });
+
+  it('displays the component with tertiary variant styles', async () => {
+    await wrapper.setProps({ variant: 'tertiary' });
+
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining([
+        'text-secondary-400',
+        'hover:text-secondary-500',
+        'focus:text-secondary-600',
+        'active:text-secondary-600',
+        'border-transparent',
+        'disabled:text-gray-400'
+      ])
+    );
+
+    expect(wrapper.classes()).not.toContain('button');
+  });
+
+  it('displays the component with icon variant styles', async () => {
+    await wrapper.setProps({ variant: 'icon' });
+
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining([
+        'text-primary-100',
+        'focus-within:bg-gray-200',
+        'hover:bg-gray-200',
+        'active:bg-gray-300'
+      ])
+    );
+
+    expect(wrapper.classes()).not.toContain('button');
+  });
+});

package/vitest.config.js

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite';
+import Vue2 from '@vitejs/plugin-vue2';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [Vue2()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    alias: [
+      {
+        find: /^vue$/,
+        replacement: 'vue/dist/vue.runtime.common.js',
+      },
+    ],
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+});