unify-ui-dev / flexilla Goto Github PK

Add Prevent default in case when

• we have form in a modal

when we trying to use the accordion we need to implement the accordion instead of

import { Accordion } from "@flexilla/flexilla";

new Accordion("selector", "property");

or

let accc = document.querySelector("[data-accordion]")
new Accordion(accc, "property");

Description:

We need to enhance the tooltip component by adding a close strategy feature. This feature will allow the tooltip to be closed when clicking inside it or not, based on the user's preference.

Current Behavior:

• The tooltip can be toggled by clicking the associated element.
• There is no option to specify a close strategy, making it inflexible for different use cases.

Desired Behavior:

• Add an option to set a close strategy for the tooltip.
• The close strategy should allow:
  1. Closing the tooltip when clicking inside it.
  2. Keeping the tooltip open when clicking inside it.

Expected Behavior:

• The tooltip should close or stay open based on the specified close strategy.

Suggested Solution:

1. Add a configuration option to the tooltip component to specify the close strategy.
2. Implement logic to handle the closing of the tooltip based on the chosen strategy.

Enhance the tabs component by improving the custom indicator element. This improvement should allow the indicator element to be added directly in HTML or created programmatically.

Allow having nested tabs

It's can helps us to know how to use this package and give us more examples

Content

• Init documentation
• single component page
• Build Home page
• Change log page
• Showcases

Getting Started

• Introduction
• Framework guide

Components

• Accordion
• auto resize area
• collapse
• custom range
• dark mode
• dismissible
• dropdown
• modal
• offcanvas
• popper
• tabs
• tooltip/popover

• Remove aria-selected for storing states
• Use a custom data attribute to store state

While using autoInit methode from Collapse

• collapse/:1 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '0' is not a valid selector.
  at new a (..../collapse/dist/collapse.js?t=1713360587678:46:47)
  at a.autoInit (..../collapse/dist/collapse.js?t=1713360587678:62:5)

When opening a modal, a overlay Element is created, this element should be create only once but it's being recreated every time and never destroyed.

• Fix modal overlay from being duplicated
• remove focus on the trigger element when the modal is opened

Allow having nested accordion

Add utilities :

• toggle data attributes value
• keys accessibility

when we trying to use the accordion we need to implement the accordion instead of

import { Accordion } from "@flexilla/flexilla";

new Accordion("selector", "property");

or

let accc = document.querySelector("[data-accordion]")
new Accordion(accc, "property");

Description:

When using the accordion component, there is a problem with hiding and showing content. The method used to toggle the content's visibility changes the height property between 0 and the actual content size. However, this causes an issue when resizing the window. For example, on a desktop, the content height might be set to 200px, but when the window is resized, the content size may change based on the text. This can result in the content being partially hidden if the new content height exceeds the initially set height (e.g., the content height might become 240px, but the initial height was set to 200px).

Steps to Reproduce:

1. Use the accordion component and expand a section with content.
2. Resize the window (e.g., make it smaller).
3. Observe that the content may not fully display if the content height changes with the window size.

Expected Behavior:

The accordion component should dynamically adjust the height to fit the content size, even when the window is resized.

Actual Behavior:

The content height remains fixed, causing parts of the content to be hidden if the content size changes.

Suggested Solution:

Instead of setting a fixed height for the accordion content, use CSS properties such as max-height with a transition, and set it to a large value that can accommodate dynamic content changes.

when we trying to use the accordion we need to implement the accordion instead of

import { Accordion } from "@flexilla/flexilla";

new Accordion("selector", "property");

or

let accc = document.querySelector("[data-accordion]")
new Accordion(accc, "property");

Description:
There is a problem with how the popper element in the library behaves depending on its position style. Currently, the popper works well when the position is set to absolute. However, if the popper is inside a container like a table cell, setting position: absolute; makes it overflow outside the container, which is not desirable.

On the other hand, if we set position: fixed;, the popper doesn't overflow, but it also doesn't take up any space within the container, making it difficult to manage its placement properly. This issue can happen not just with tables but with any other container element.

Expected Behavior:

• The popper should position correctly inside its container without overflowing, while still being properly placed relative to its parent element.

Current Behavior:

• With position: absolute;, the popper overflows the container's boundaries.

Possible Solution:

• Investigate alternative positioning methods or adjustments that allow the popper to be positioned correctly within containers like table cells or other elements, without causing overflow or space issues.