v1.3.0

CHANGELOG.md

@@ -1,3 +1,29 @@
+## [1.3.0] - [2025-01-03]
+
+## Added 
+
+**Combo Box** : [Minimum search Length](https://flyonui.com/docs/advanced-forms/combo-box/#minimum-search-length)
+
+**Datatables** : [Multiple Controls](https://flyonui.com/docs/third-party-plugins/datatables/#multiple-controls)
+
+## Updated
+
+- Preline v2.7.0
+- Updated divider component border-color from `base-content/10` to `base-content/20`
+- Updated heading color from `text-base-content/90` to `text-base-content`
+- You can now invoke overlay methods directly on the overlay itself without linking it to any button. The previous functionality is retained for backward compatibility.
+
+## Fixes and Improvements
+
+- Added: A new parameter `optionAllowEmptyOption` has been added for Advanced Select
+- Added: A new parameter `minSearchLength` has been added for Combo Box
+- Added: Enhanced support for multiple `prev` and `next` elements, each with its own event listeners, ensuring proper initialization and cleanup in the destroy method. Improved event listener management for `search` and `pagination` controls to prevent memory leaks and support dynamic elements.
+- Fixed: Removed `flyonui.mjs` as it was creating issues while using `import`
+- Fixed: Improve card style specificity
+- Fixed: Typo in select and textarea. [[PR #30]](https://github.com/themeselection/flyonui/pull/30)
+- Fixed: Improved label styles for better usability in form elements.
+- Fixed: `setValue` method functionality with tags in Advanced Select.
+
 ## [1.2.0] - [2024-12-11]
 
 ## Added

flyonui.d.ts

@@ -87,14 +87,15 @@ export declare class HSAccordion extends HSBasePlugin<IAccordionOptions> impleme
 	hide(): boolean;
 	update(): boolean;
 	destroy(): void;
-	static getInstance(target: HTMLElement | string, isInstance?: boolean): HTMLElement | ICollectionItem<HSAccordion>;
-	static show(target: HTMLElement): void;
-	static hide(target: HTMLElement): void;
+	private static findInCollection;
 	static autoInit(): void;
+	static getInstance(target: HTMLElement | string, isInstance?: boolean): HTMLElement | ICollectionItem<HSAccordion>;
+	static show(target: HSAccordion | HTMLElement | string): void;
+	static hide(target: HSAccordion | HTMLElement | string): void;
 	static onSelectableClick: (evt: Event, item: IAccordionTreeView, el: HTMLElement) => void;
 	static treeView(): boolean;
 	static toggleSelected(root: IAccordionTreeView, item: HTMLElement): void;
-	static on(evt: string, target: HTMLElement, cb: Function): void;
+	static on(evt: string, target: HSAccordion | HTMLElement | string, cb: Function): void;
 }
 export type TCarouselOptionsSlidesQty = {
 	[key: string]: number;
@@ -246,16 +247,18 @@ export declare class HSCollapse extends HSBasePlugin<{}> implements ICollapse {
 	show(): boolean;
 	hide(): boolean;
 	destroy(): void;
+	private static findInCollection;
 	static getInstance(target: HTMLElement, isInstance?: boolean): HTMLElement | ICollectionItem<HSCollapse>;
 	static autoInit(): void;
-	static show(target: HTMLElement): void;
-	static hide(target: HTMLElement): void;
-	static on(evt: string, target: HTMLElement, cb: Function): void;
+	static show(target: HSCollapse | HTMLElement | string): void;
+	static hide(target: HSCollapse | HTMLElement | string): void;
+	static on(evt: string, target: HSCollapse | HTMLElement | string, cb: Function): void;
 }
 export interface IComboBoxOptions {
 	gap?: number;
 	viewport?: string | HTMLElement | null;
 	preventVisibility?: boolean;
+	minSearchLength?: number;
 	apiUrl?: string | null;
 	apiDataPart?: string | null;
 	apiQuery?: string | null;
@@ -286,6 +289,7 @@ export declare class HSComboBox extends HSBasePlugin<IComboBoxOptions> implement
 	gap: number;
 	viewport: string | HTMLElement | null;
 	preventVisibility: boolean;
+	minSearchLength: number;
 	apiUrl: string | null;
 	apiDataPart: string | null;
 	apiQuery: string | null;
@@ -321,6 +325,7 @@ export declare class HSComboBox extends HSBasePlugin<IComboBoxOptions> implement
 	isOpened: boolean;
 	isCurrent: boolean;
 	private animationInProcess;
+	private isSearchLengthExceeded;
 	private onInputFocusListener;
 	private onInputInputListener;
 	private onToggleClickListener;
@@ -436,10 +441,11 @@ export declare class HSDropdown extends HSBasePlugin<{}, IHTMLElementPopper> imp
 	close(isAnimated?: boolean): boolean;
 	forceClearState(): void;
 	destroy(): void;
+	private static findInCollection;
 	static getInstance(target: HTMLElement | string, isInstance?: boolean): ICollectionItem<HSDropdown> | IHTMLElementPopper;
 	static autoInit(): void;
-	static open(target: HTMLElement): void;
-	static close(target: HTMLElement): void;
+	static open(target: HSDropdown | HTMLElement | string): void;
+	static close(target: HSDropdown | HTMLElement | string): void;
 	static accessibility(evt: KeyboardEvent): void;
 	static onEscape(evt: KeyboardEvent): void;
 	static onEnter(evt: KeyboardEvent): boolean;
@@ -448,7 +454,7 @@ export declare class HSDropdown extends HSBasePlugin<{}, IHTMLElementPopper> imp
 	static onStartEnd(isStart?: boolean): boolean;
 	static onFirstLetter(code: string): boolean;
 	static closeCurrentlyOpened(evtTarget?: HTMLElement | null, isAnimated?: boolean): void;
-	static on(evt: string, target: HTMLElement, cb: Function): void;
+	static on(evt: string, target: HSDropdown | HTMLElement | string, cb: Function): void;
 }
 export interface IInputNumberOptions {
 	min?: number;
@@ -517,8 +523,7 @@ export declare class HSOverlay extends HSBasePlugin<{}> implements IOverlay {
 	private readonly animationTarget;
 	private openNextOverlay;
 	private autoHide;
-	private readonly overlayId;
-	overlay: HTMLElement | null;
+	private toggleButtons;
 	initContainer: HTMLElement | null;
 	isCloseWhenClickInside: boolean;
 	isTabAccessibilityLimited: boolean;
@@ -538,24 +543,27 @@ export declare class HSOverlay extends HSBasePlugin<{}> implements IOverlay {
 	private overlayClick;
 	private backdropClick;
 	private init;
+	private buildToggleButtons;
 	private hideAuto;
 	private checkTimer;
 	private buildBackdrop;
 	private destroyBackdrop;
 	private focusElement;
 	private getScrollbarSize;
-	open(): false | Promise<void>;
+	private collectToggleParameters;
+	open(): Promise<void>;
 	close(forceClose?: boolean): Promise<unknown>;
 	destroy(): void;
-	static getInstance(target: HTMLElement, isInstance?: boolean): HTMLElement | ICollectionItem<HSOverlay>;
+	private static findInCollection;
+	static getInstance(target: HTMLElement | string, isInstance?: boolean): HTMLElement | ICollectionItem<HSOverlay>;
 	static autoInit(): void;
-	static open(target: HTMLElement): void;
-	static close(target: HTMLElement): void;
+	static open(target: HSOverlay | HTMLElement | string): void;
+	static close(target: HSOverlay | HTMLElement | string): void;
 	static setOpened(breakpoint: number, el: ICollectionItem<HSOverlay>): void;
 	static accessibility(evt: KeyboardEvent): boolean;
 	static onEscape(target: ICollectionItem<HSOverlay>): void;
 	static onTab(target: ICollectionItem<HSOverlay>): boolean;
-	static on(evt: string, target: HTMLElement, cb: Function): void;
+	static on(evt: string, target: HSOverlay | HTMLElement | string, cb: Function): void;
 }
 export interface IPinInputOptions {
 	availableCharsRE?: RegExp;
@@ -712,6 +720,7 @@ export interface ISelectOptions {
 	searchNoResultTemplate?: string | null;
 	searchNoResultText?: string | null;
 	searchNoResultClasses?: string | null;
+	optionAllowEmptyOption?: boolean;
 	optionTemplate?: string;
 	optionTag?: string;
 	optionClasses?: string;
@@ -777,6 +786,7 @@ export declare class HSSelect extends HSBasePlugin<ISelectOptions> implements IS
 	private readonly searchNoResultTemplate;
 	private readonly searchNoResultText;
 	private readonly searchNoResultClasses;
+	private readonly optionAllowEmptyOption;
 	private readonly optionTag;
 	private readonly optionTemplate;
 	private readonly optionClasses;
@@ -1167,11 +1177,12 @@ export declare class HSTooltip extends HSBasePlugin<{}> implements ITooltip {
 	show(): void;
 	hide(): void;
 	destroy(): void;
+	private static findInCollection;
 	static getInstance(target: HTMLElement | string, isInstance?: boolean): HTMLElement | ICollectionItem<HSTooltip>;
 	static autoInit(): void;
-	static show(target: HTMLElement): void;
-	static hide(target: HTMLElement): void;
-	static on(evt: string, target: HTMLElement, cb: Function): void;
+	static show(target: HSTooltip | HTMLElement | string): void;
+	static hide(target: HSTooltip | HTMLElement | string): void;
+	static on(evt: string, target: HSTooltip | HTMLElement | string, cb: Function): void;
 }
 export type ITreeViewOptionsControlBy = "checkbox" | "button";
 export interface ITreeViewItem {
@@ -1219,9 +1230,10 @@ export declare class HSTreeView extends HSBasePlugin<ITreeViewOptions> implement
 	getSelectedItems(): ITreeViewItem[];
 	changeItemProp(id: string, prop: string, val: any): void;
 	destroy(): void;
+	private static findInCollection;
 	static getInstance(target: HTMLElement | string, isInstance?: boolean): HTMLElement | ICollectionItem<HSTreeView>;
 	static autoInit(): void;
-	static on(evt: string, target: HTMLElement, cb: Function): void;
+	static on(evt: string, target: HSTreeView | HTMLElement | string, cb: Function): void;
 }
 export interface IStaticMethods {
 	getClassProperty(el: HTMLElement, prop?: string, val?: string): string;

global.d.ts

@@ -4,11 +4,11 @@ import { ICollectionItem } from './src/js/interfaces'
 
 import { IStaticMethods } from './src/js/static/interfaces'
 
-import type HSCopyMarkup from './src/js/plugins/copy-markup'
 import type HSAccordion from './src/js/plugins/accordion'
 import type HSCarousel from './src/js/plugins/carousel'
 import type HSCollapse from './src/js/plugins/collapse'
 import type HSComboBox from './src/js/plugins/combobox'
+import type HSCopyMarkup from './src/js/plugins/copy-markup'
 import type HSDataTable from './src/js/plugins/datatable'
 import type HSDropdown from './src/js/plugins/dropdown'
 import type HSFileUpload from './src/js/plugins/file-upload'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flyonui",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "The easiest, free and open-source Tailwind CSS component library with semantic classes.",
   "author": "ThemeSelection",
   "license": "MIT",
@@ -62,7 +62,6 @@
     "./global.d.ts",
     "./flyonui.d.ts",
     "./flyonui.js",
-    "./flyonui.mjs",
     "./LICENSE",
     "./THIRD_PARTY_LICENSES",
     "./README.md"

plugin.js

@@ -1,6 +1,6 @@
 /*
  * Plugin
- * @version: 2.6.0
+ * @version: 2.7.0
  * @author: Preline Labs Ltd.
  * @requires: tailwindcss ^3.4.1
  * @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html)

plugin.ts

@@ -1,6 +1,6 @@
 /*
  * Plugin
- * @version: 2.5.1
+ * @version: 2.7.0
  * @author: Preline Labs Ltd.
  * @requires: tailwindcss ^3.4.1
  * @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html)
@@ -37,21 +37,56 @@ export default plugin(function ({ addVariant, e }: PluginAPI) {
       modifySelectors(({ className }) => {
         return `.dropdown.open > .dropdown-menu > .${e(`dropdown-open${separator}${className}`)}`
       })
+    },
+    ({ modifySelectors, separator }: IAddVariantOptions) => {
+      modifySelectors(({ className }) => {
+        return `.dropdown-menu.open.${e(`dropdown-open${separator}${className}`)}`
+      })
     }
   ] as TStringFunc[])
 
-  addVariant('removing', (({ modifySelectors, separator }: IAddVariantOptions) => {
+  addVariant('dropdown-item-disabled', (({ modifySelectors, separator }: IAddVariantOptions) => {
     modifySelectors(({ className }) => {
-      return `.removing.${e(`removing${separator}${className}`)}`
+      return `.dropdown.open > .dropdown-menu .disabled.${e(`dropdown-item-disabled${separator}${className}`)}`
     })
   }) as TStringFunc)
 
-  addVariant('tooltip-shown', (({ modifySelectors, separator }: IAddVariantOptions) => {
+  addVariant('dropdown-item-checked', [
+    ({ modifySelectors, separator }: IAddVariantOptions) => {
+      modifySelectors(({ className }) => {
+        return `.dropdown.open > .dropdown-menu [aria-checked="true"].${e(
+          `dropdown-item-checked${separator}${className}`
+        )}`
+      })
+    },
+    ({ modifySelectors, separator }: IAddVariantOptions) => {
+      modifySelectors(({ className }) => {
+        return `.dropdown.open > .dropdown-menu [aria-checked="true"] .${e(
+          `dropdown-item-checked${separator}${className}`
+        )}`
+      })
+    }
+  ] as TStringFunc[])
+
+  addVariant('removing', (({ modifySelectors, separator }: IAddVariantOptions) => {
     modifySelectors(({ className }) => {
-      return `.tooltip.show .${e(`tooltip-shown${separator}${className}`)}`
+      return `.removing.${e(`removing${separator}${className}`)}`
     })
   }) as TStringFunc)
 
+  addVariant('tooltip-shown', [
+    ({ modifySelectors, separator }: IAddVariantOptions) => {
+      modifySelectors(({ className }) => {
+        return `.tooltip.show .${e(`tooltip-shown${separator}${className}`)}`
+      })
+    },
+    ({ modifySelectors, separator }: IAddVariantOptions) => {
+      modifySelectors(({ className }) => {
+        return `.tooltip-content.show.${e(`tooltip-shown${separator}${className}`)}`
+      })
+    }
+  ] as TStringFunc[])
+
   addVariant('accordion-item-active', [
     ({ modifySelectors, separator }: IAddVariantOptions) => {
       modifySelectors(({ className }) => {
@@ -86,6 +121,11 @@ export default plugin(function ({ addVariant, e }: PluginAPI) {
           `accordion-item-active${separator}${className}`
         )}`
       })
+    },
+    ({ modifySelectors, separator }: IAddVariantOptions) => {
+      modifySelectors(({ className }) => {
+        return `.accordion-item.active .accordion-force-active.${e(`accordion-item-active${separator}${className}`)}`
+      })
     }
   ] as TStringFunc[])
 

src/components/styled/accordion.css

@@ -1,5 +1,5 @@
 .accordion-toggle {
-  @apply text-base-content/90 w-full cursor-pointer px-5 py-4 text-lg font-medium disabled:pointer-events-none disabled:opacity-50;
+  @apply text-base-content w-full cursor-pointer px-5 py-4 text-lg font-medium disabled:pointer-events-none disabled:opacity-50;
 }
 
 .accordion-shadow :where(.accordion-item) {

src/components/styled/advance-select.css

@@ -1,5 +1,5 @@
 .advance-select-toggle {
-  @apply border-base-content/40 bg-base-100 text-base-content/90 rounded-btn hover:border-base-content/60 border text-base font-normal;
+  @apply border-base-content/40 bg-base-100 text-base-content rounded-btn hover:border-base-content/60 border text-base font-normal;
   @apply select-disabled:pointer-events-none select-disabled:border-0 select-disabled:bg-neutral/10 select-disabled:text-neutral/50 select-disabled:py-2;
 
   &:focus,
@@ -16,15 +16,15 @@
 }
 
 .advance-select-option {
-  @apply hover:bg-neutral/10 focus:bg-neutral/10 text-base-content/90 rounded-btn text-base font-normal focus:outline-none;
+  @apply hover:bg-neutral/10 focus:bg-neutral/10 text-base-content rounded-btn text-base font-normal focus:outline-none;
   &.active,
   &:active {
     @apply bg-primary/10 text-primary;
   }
 }
 
 .advance-select-tag {
-  @apply border-base-content/25 bg-base-100 text-base-content/90 rounded-box hover:border-base-content/60 border text-base font-normal;
+  @apply border-base-content/25 bg-base-100 text-base-content rounded-box hover:border-base-content/60 border text-base font-normal;
   &:focus,
   &:focus-within {
     @apply ring-primary shadow-primary/22 border-primary shadow-sm ring-1;

src/components/styled/card.css

@@ -7,21 +7,14 @@
   &-header {
     @apply rounded-t-box;
     padding: var(--padding-card, 1.5rem);
-
-    & + .card-body {
-      padding-top: 0;
-    }
   }
 
   &-body {
     padding: var(--padding-card, 1.5rem);
-    & + .card-footer {
-      padding-top: 0;
-    }
   }
 
   &-footer {
-    @apply rounded-b-box pt-0;
+    @apply rounded-b-box;
     padding: var(--padding-card, 1.5rem);
   }
 
@@ -68,6 +61,14 @@
   }
 }
 
+:where(.card-header) + .card-body {
+  padding-top: 0;
+}
+
+:where(.card-body) + .card-footer {
+  padding-top: 0;
+}
+
 .card-group {
   @apply rounded-box border-base-content/40;
   --cd-shadow: theme(colors.base-shadow/0.26);

src/components/styled/chat.css

@@ -6,7 +6,7 @@
   }
 
   &-receiver .chat-bubble {
-    @apply bg-base-100 text-base-content/90 rounded-es-none;
+    @apply bg-base-100 text-base-content rounded-es-none;
     &:before {
       inset-inline-start: -0.749rem;
     }