Skip to content

Commit

Permalink
ComboBox - New methods + bullet proofing.
Browse files Browse the repository at this point in the history 
Changes to the Combobox
 - Constructor does not rely on `window.$hsComboBoxCollection` being initalised. Thus
   users for bundlers (vite etc) don't have to load all of `preline.js`
 - Fixed an error about invalid nullish statement

Public methods selectValue() and selectAttribute
 - selectedItem() returns elemnent that was selected
 - selectedValue() returns the value.
 - selectedAttr() returns the custom attribute.

One option to the ComboBox options:
 - apiSearchQueryTransformer to allow transforming query before fetch

package.json:
   Few watch commands and generation scripts added.
  • Loading branch information
@mohsinhijazee
mohsinhijazee committed Oct 10, 2024
1 parent 0c521a3 commit 1664ee2
Show file tree
Hide file tree
Showing 13 changed files with 2,485 additions and 67 deletions.
14 changes: 13 additions & 1 deletion dist/combobox.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export interface IComboBoxOptions {
apiDataPart?: string | null;
apiQuery?: string | null;
apiSearchQuery?: string | null;
apiSearchQueryTransformer?: QueryTransformer | string | null;
apiHeaders?: {};
apiGroupField?: string | null;
outputItemTemplate?: string | null;
Expand All @@ -40,8 +41,12 @@ export interface IComboBox {
options?: IComboBoxOptions;
open(): void;
close(): void;
selectedItem(): HTMLElement | null;
selectedValue(): string | null;
selectedAttr(attr: string): string | null;
recalculateDirection(): void;
}
export type QueryTransformer = (query: string) => string;
declare class HSComboBox extends HSBasePlugin<IComboBoxOptions> implements IComboBox {
gap: number;
viewport: string | HTMLElement | null;
Expand All @@ -50,6 +55,7 @@ declare class HSComboBox extends HSBasePlugin<IComboBoxOptions> implements IComb
apiDataPart: string | null;
apiQuery: string | null;
apiSearchQuery: string | null;
apiSearchQueryTransformer: ((query: string) => string) | null;
apiHeaders: {};
apiGroupField: string | null;
outputItemTemplate: string | null;
Expand All @@ -65,6 +71,7 @@ declare class HSComboBox extends HSBasePlugin<IComboBoxOptions> implements IComb
private readonly output;
private readonly itemsWrapper;
private items;
private selectedItemElement;
private tabs;
private readonly toggle;
private readonly toggleClose;
Expand All @@ -79,6 +86,7 @@ declare class HSComboBox extends HSBasePlugin<IComboBoxOptions> implements IComb
isCurrent: boolean;
private animationInProcess;
constructor(el: HTMLElement, options?: IComboBoxOptions, events?: {});
private parseApiQueryTransformer;
private init;
private build;
private setResultAndRender;
Expand Down Expand Up @@ -114,9 +122,13 @@ declare class HSComboBox extends HSBasePlugin<IComboBoxOptions> implements IComb
private destroyOutputPlaceholder;
private resultItems;
private setValueAndOpen;
open(val?: string): boolean;
private setValueAndClear;
open(val?: string): boolean;
close(val?: string | null): boolean;
setSearchQueryTransformer(transformer: (query: string) => string): void;
selectedItem(): HTMLElement | null;
selectedValue(): string | null;
selectedAttr(attr: string): string | null;
recalculateDirection(): void;
static getInstance(target: HTMLElement | string, isInstance?: boolean): HSComboBox | ICollectionItem<HSComboBox>;
static autoInit(): void;
Expand Down
14 changes: 13 additions & 1 deletion dist/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,7 @@ export interface IComboBoxOptions {
apiDataPart?: string | null;
apiQuery?: string | null;
apiSearchQuery?: string | null;
apiSearchQueryTransformer?: QueryTransformer | string | null;
apiHeaders?: {};
apiGroupField?: string | null;
outputItemTemplate?: string | null;
Expand All @@ -223,8 +224,12 @@ export interface IComboBox {
options?: IComboBoxOptions;
open(): void;
close(): void;
selectedItem(): HTMLElement | null;
selectedValue(): string | null;
selectedAttr(attr: string): string | null;
recalculateDirection(): void;
}
export type QueryTransformer = (query: string) => string;
export declare class HSComboBox extends HSBasePlugin<IComboBoxOptions> implements IComboBox {
gap: number;
viewport: string | HTMLElement | null;
Expand All @@ -233,6 +238,7 @@ export declare class HSComboBox extends HSBasePlugin<IComboBoxOptions> implement
apiDataPart: string | null;
apiQuery: string | null;
apiSearchQuery: string | null;
apiSearchQueryTransformer: ((query: string) => string) | null;
apiHeaders: {};
apiGroupField: string | null;
outputItemTemplate: string | null;
Expand All @@ -248,6 +254,7 @@ export declare class HSComboBox extends HSBasePlugin<IComboBoxOptions> implement
private readonly output;
private readonly itemsWrapper;
private items;
private selectedItemElement;
private tabs;
private readonly toggle;
private readonly toggleClose;
Expand All @@ -262,6 +269,7 @@ export declare class HSComboBox extends HSBasePlugin<IComboBoxOptions> implement
isCurrent: boolean;
private animationInProcess;
constructor(el: HTMLElement, options?: IComboBoxOptions, events?: {});
private parseApiQueryTransformer;
private init;
private build;
private setResultAndRender;
Expand Down Expand Up @@ -297,9 +305,13 @@ export declare class HSComboBox extends HSBasePlugin<IComboBoxOptions> implement
private destroyOutputPlaceholder;
private resultItems;
private setValueAndOpen;
open(val?: string): boolean;
private setValueAndClear;
open(val?: string): boolean;
close(val?: string | null): boolean;
setSearchQueryTransformer(transformer: (query: string) => string): void;
selectedItem(): HTMLElement | null;
selectedValue(): string | null;
selectedAttr(attr: string): string | null;
recalculateDirection(): void;
static getInstance(target: HTMLElement | string, isInstance?: boolean): HSComboBox | ICollectionItem<HSComboBox>;
static autoInit(): void;
Expand Down
14 changes: 13 additions & 1 deletion dist/preline.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,7 @@ export interface IComboBoxOptions {
apiDataPart?: string | null;
apiQuery?: string | null;
apiSearchQuery?: string | null;
apiSearchQueryTransformer?: QueryTransformer | string | null;
apiHeaders?: {};
apiGroupField?: string | null;
outputItemTemplate?: string | null;
Expand All @@ -223,8 +224,12 @@ export interface IComboBox {
options?: IComboBoxOptions;
open(): void;
close(): void;
selectedItem(): HTMLElement | null;
selectedValue(): string | null;
selectedAttr(attr: string): string | null;
recalculateDirection(): void;
}
export type QueryTransformer = (query: string) => string;
export declare class HSComboBox extends HSBasePlugin<IComboBoxOptions> implements IComboBox {
gap: number;
viewport: string | HTMLElement | null;
Expand All @@ -233,6 +238,7 @@ export declare class HSComboBox extends HSBasePlugin<IComboBoxOptions> implement
apiDataPart: string | null;
apiQuery: string | null;
apiSearchQuery: string | null;
apiSearchQueryTransformer: ((query: string) => string) | null;
apiHeaders: {};
apiGroupField: string | null;
outputItemTemplate: string | null;
Expand All @@ -248,6 +254,7 @@ export declare class HSComboBox extends HSBasePlugin<IComboBoxOptions> implement
private readonly output;
private readonly itemsWrapper;
private items;
private selectedItemElement;
private tabs;
private readonly toggle;
private readonly toggleClose;
Expand All @@ -262,6 +269,7 @@ export declare class HSComboBox extends HSBasePlugin<IComboBoxOptions> implement
isCurrent: boolean;
private animationInProcess;
constructor(el: HTMLElement, options?: IComboBoxOptions, events?: {});
private parseApiQueryTransformer;
private init;
private build;
private setResultAndRender;
Expand Down Expand Up @@ -297,9 +305,13 @@ export declare class HSComboBox extends HSBasePlugin<IComboBoxOptions> implement
private destroyOutputPlaceholder;
private resultItems;
private setValueAndOpen;
open(val?: string): boolean;
private setValueAndClear;
open(val?: string): boolean;
close(val?: string | null): boolean;
setSearchQueryTransformer(transformer: (query: string) => string): void;
selectedItem(): HTMLElement | null;
selectedValue(): string | null;
selectedAttr(attr: string): string | null;
recalculateDirection(): void;
static getInstance(target: HTMLElement | string, isInstance?: boolean): HSComboBox | ICollectionItem<HSComboBox>;
static autoInit(): void;
Expand Down
15 changes: 15 additions & 0 deletions dts-config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,21 @@ const config = {
outFile: './dist/index.d.ts',
output: outputConfig,
},
{
filePath: './src/index.ts',
outFile: './dist/preline.d.ts',
output: outputConfig,
},
{
filePath: './src/index.ts',
outFile: './preline.d.ts',
output: outputConfig,
},
{
filePath: './src/index.ts',
outFile: './index.d.ts',
output: outputConfig,
},
...fs
.readdirSync(pluginsDir)
.map((pluginName) => writeFile(pluginsDir, pluginName))
Expand Down
14 changes: 13 additions & 1 deletion index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,7 @@ export interface IComboBoxOptions {
apiDataPart?: string | null;
apiQuery?: string | null;
apiSearchQuery?: string | null;
apiSearchQueryTransformer?: QueryTransformer | string | null;
apiHeaders?: {};
apiGroupField?: string | null;
outputItemTemplate?: string | null;
Expand All @@ -223,8 +224,12 @@ export interface IComboBox {
options?: IComboBoxOptions;
open(): void;
close(): void;
selectedItem(): HTMLElement | null;
selectedValue(): string | null;
selectedAttr(attr: string): string | null;
recalculateDirection(): void;
}
export type QueryTransformer = (query: string) => string;
export declare class HSComboBox extends HSBasePlugin<IComboBoxOptions> implements IComboBox {
gap: number;
viewport: string | HTMLElement | null;
Expand All @@ -233,6 +238,7 @@ export declare class HSComboBox extends HSBasePlugin<IComboBoxOptions> implement
apiDataPart: string | null;
apiQuery: string | null;
apiSearchQuery: string | null;
apiSearchQueryTransformer: ((query: string) => string) | null;
apiHeaders: {};
apiGroupField: string | null;
outputItemTemplate: string | null;
Expand All @@ -248,6 +254,7 @@ export declare class HSComboBox extends HSBasePlugin<IComboBoxOptions> implement
private readonly output;
private readonly itemsWrapper;
private items;
private selectedItemElement;
private tabs;
private readonly toggle;
private readonly toggleClose;
Expand All @@ -262,6 +269,7 @@ export declare class HSComboBox extends HSBasePlugin<IComboBoxOptions> implement
isCurrent: boolean;
private animationInProcess;
constructor(el: HTMLElement, options?: IComboBoxOptions, events?: {});
private parseApiQueryTransformer;
private init;
private build;
private setResultAndRender;
Expand Down Expand Up @@ -297,9 +305,13 @@ export declare class HSComboBox extends HSBasePlugin<IComboBoxOptions> implement
private destroyOutputPlaceholder;
private resultItems;
private setValueAndOpen;
open(val?: string): boolean;
private setValueAndClear;
open(val?: string): boolean;
close(val?: string | null): boolean;
setSearchQueryTransformer(transformer: (query: string) => string): void;
selectedItem(): HTMLElement | null;
selectedValue(): string | null;
selectedAttr(attr: string): string | null;
recalculateDirection(): void;
static getInstance(target: HTMLElement | string, isInstance?: boolean): HSComboBox | ICollectionItem<HSComboBox>;
static autoInit(): void;
Expand Down
22 changes: 16 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,31 +40,41 @@
"access": "public"
},
"scripts": {
"watch:all": "concurrently \"pnpm run watch\" \"pnpm run watch:dts\" \"pnpm run watch:mjs\" \"pnpm run copyjs:watch\"",
"copyjs": "cp dist/index.js dist/preline.js && cp dist/index.js preline.js && cp dist/index.js index.js",
"copyjs:watch": "pnpm exec chokidar './dist/index.js' -c 'pnpm run copyjs'",
"watch": "webpack --config webpack.config.js --watch",
"watch:mjs": "webpack --config webpack.config.mjs.js --watch",
"watch:dts": "pnpm exec chokidar './src/**/*.ts' -c 'pnpm run generate-dts'",
"build": "webpack --config webpack.config.js",
"build:mjs": "webpack --config webpack.config.mjs.js",
"pretty": "prettier --write \"./**/*.{js,jsx,ts,tsx,json}\"",
"generate-dts": "dts-bundle-generator --config dts-config.js"
},
"dependencies": {
"@popperjs/core": "^2.11.8"
},
"devDependencies": {
"@types/clipboard": "^2.0.7",
"@types/datatables.net": "^1.12.0",
"@types/dropzone": "^5.7.8",
"@types/jquery": "^3.5.30",
"@types/lodash": "^4.17.6",
"@types/nouislider": "^15.0.0",
"@types/prismjs": "^1.26.4",
"@types/vinyl": "^2.0.12",
"apexcharts": "^3.54.0",
"chokidar-cli": "^3.0.0",
"clipboard": "^2.0.11",
"concurrently": "^9.0.1",
"datatables.net": "^2.1.8",
"datatables.net-dt": "^2.1.8",
"dropzone": "6.0.0-beta.2",
"dts-bundle-generator": "^9.0.0",
"nouislider": "^15.8.1",
"prettier": "^3.0.0",
"source-map-loader": "^4.0.1",
"tailwindcss": "^3.4.13",
"terser-webpack-plugin": "^5.3.9",
"ts-loader": "^9.5.1",
"typescript": "^5.5.3",
"webpack-cli": "^5.0.1"
},
"dependencies": {
"@popperjs/core": "^2.11.2"
}
}
Loading

0 comments on commit 1664ee2

Please sign in to comment.