@windward/core 0.12.1 → 0.12.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@windward/core",
-    "version": "0.12.1",
+    "version": "0.12.3",
     "description": "Windward UI Core Plugins",
     "main": "plugin.js",
     "scripts": {

package/table_styling.scss

@@ -0,0 +1,58 @@
+table {
+    max-width: 100%;
+    border: 1px solid var(--v-primary-base);
+    border-spacing: 0;
+    position: relative; // Make this element a containing block for the buttons
+    overflow-x: auto;
+    display: block; // Ensure the table scrolls horizontally as a block on smaller screens
+
+    th,
+    td {
+        border: 1px solid var(--v-primary-base);
+        padding: 3px;
+    }
+
+    // Floating round buttons
+    &::before,
+    &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 40px;
+        height: 40px;
+        background-color: var(--v-primary-base);
+        border-radius: 50%;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
+        z-index: 10;
+
+        // Add a chevron/arrow indicator
+        &::after {
+            content: '‹'; // Left arrow ◀
+            font-size: 24px;
+            color: white;
+        }
+    }
+
+    &:hover::before,
+    &:hover::after {
+        display: flex; // Show buttons on hover
+    }
+
+    &::before {
+        left: 5px; // Position button on the left
+        &::after {
+            content: '‹'; // Left arrow
+        }
+    }
+
+    &::after {
+        right: 5px; // Position button on the right
+        &::after {         content: '>'; // Left arrow
+        }
+    }
+}

package/test/Components/utils/glossary/GlossaryToolTip.spec.js

@@ -0,0 +1,136 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import VueI18n from 'vue-i18n'
+import GlossaryToolTip from '../../../../components/utils/glossary/GlossaryToolTip.vue'
+
+Vue.use(Vuetify)
+Vue.use(VueI18n)
+
+describe('GlossaryToolTip', () => {
+    const localVue = createLocalVue()
+    let vuetify
+    let i18n
+    let wrapper
+
+    beforeEach(() => {
+        vuetify = new Vuetify()
+        i18n = new VueI18n({
+            locale: 'en',
+            messages: {
+                en: {
+                    'windward.core.components.utils.tiny_mce_wrapper.definition': 'Definition',
+                    'windward.core.components.utils.tiny_mce_wrapper.alternate_forms': 'Alternate Forms',
+                    'windward.core.components.utils.tiny_mce_wrapper.related_terms': 'Related Terms'
+                }
+            }
+        })
+
+        // Create data-app element for Vuetify
+        const app = document.createElement('div')
+        app.setAttribute('data-app', 'true')
+        document.body.appendChild(app)
+    })
+
+    afterEach(() => {
+        wrapper.destroy()
+        // Clean up data-app element
+        const app = document.querySelector('[data-app=true]')
+        if (app) {
+            document.body.removeChild(app)
+        }
+    })
+
+    const mountComponent = (options = {}) => {
+        return mount(GlossaryToolTip, {
+            localVue,
+            vuetify,
+            i18n,
+            attachTo: document.body,
+            slots: {
+                term: '<span>Test Term</span>',
+                definition: '<span>Test Definition</span>'
+            },
+            ...options
+        })
+    }
+
+    const waitForMenuTransition = async () => {
+        await new Promise(resolve => setTimeout(resolve, 300))
+        await Vue.nextTick()
+    }
+
+    it('renders the term in the activator slot', () => {
+        wrapper = mountComponent()
+        expect(wrapper.find('.glossary-word').text()).toContain('Test Term')
+    })
+
+    it('starts with menu closed', () => {
+        wrapper = mountComponent()
+        expect(wrapper.vm.show).toBe(false)
+        expect(wrapper.find('.v-menu__content').exists()).toBe(false)
+    })
+
+    it('opens menu on click', async () => {
+        wrapper = mountComponent()
+        const activator = wrapper.find('.glossary-word span')
+        
+        await activator.trigger('click')
+        await waitForMenuTransition()
+        
+        expect(wrapper.vm.show).toBe(true)
+        const menu = document.querySelector('.v-menu__content')
+        expect(menu).toBeTruthy()
+        expect(getComputedStyle(menu).display).not.toBe('none')
+    })
+
+    it('closes menu when clicking outside', async () => {
+        wrapper = mountComponent()
+        const activator = wrapper.find('.glossary-word span')
+        
+        // Open menu
+        await activator.trigger('click')
+        await waitForMenuTransition()
+        expect(wrapper.vm.show).toBe(true)
+
+        // Click outside
+        document.body.click()
+        await waitForMenuTransition()
+        
+        expect(wrapper.vm.show).toBe(false)
+    })
+
+    it('renders definition content when menu is open', async () => {
+        wrapper = mountComponent()
+        const activator = wrapper.find('.glossary-word span')
+        
+        await activator.trigger('click')
+        await waitForMenuTransition()
+        
+        expect(document.body.textContent).toContain('Test Definition')
+    })
+
+    it('applies active class when menu is open', async () => {
+        wrapper = mountComponent()
+        const activator = wrapper.find('.glossary-word span')
+        
+        await activator.trigger('click')
+        await waitForMenuTransition()
+        
+        expect(wrapper.find('.glossary-word').classes()).toContain('active')
+    })
+
+    it('removes active class when menu is closed', async () => {
+        wrapper = mountComponent()
+        const activator = wrapper.find('.glossary-word span')
+        
+        // Open then close
+        await activator.trigger('click')
+        await waitForMenuTransition()
+        
+        document.body.click()
+        await waitForMenuTransition()
+        
+        expect(wrapper.find('.glossary-word').classes()).not.toContain('active')
+    })
+})