Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat!: export Locale as named exports #219

Merged
merged 1 commit into from
Feb 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -27,4 +27,7 @@ dist-ssr
# Playwright
playwright-report
test-results
/playwright/.cache
/playwright/.cache

# misc
tsconfig.tsbuildinfo
3 changes: 2 additions & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true,
"editor.formatOnPaste": false
"editor.formatOnPaste": false,
"typescript.tsdk": "node_modules\\typescript\\lib"
}
8 changes: 3 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -94,10 +94,6 @@ dist/
browser/
multiple-select.js # ESM build, use with: window.multipleSelect
multiple-select.cjs # CJS (CommonJS) build, use with: window.multipleSelect
cjs/
multiple-select.cjs # CJS (CommonJS), use with: require()
esm/
multiple-select.js # ESM, use with: import from
locales/
multiple-select-all-locales.cjs # all-in-1 locales as CJS
multiple-select-all-locales.js # all-in-1 locales as ESM
Expand All @@ -108,7 +104,9 @@ dist/
styles/ # CSS and SASS Stylings
css/
sass/
types/ # d.ts Type Definitions
index.d.ts # d.ts Type Definitions
multiple-select.cjs # CJS (CommonJS), use with: require()
multiple-select.js # ESM, use with: import from
```

### Used by
Expand Down
25 changes: 20 additions & 5 deletions packages/demo/src/examples/example09.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ <h2 class="bd-title">

<div>
<div class="mb-3 row">
<label class="col-sm-2"> Locale Select </label>
<label class="col-sm-3"> Locale Select </label>

<div class="col-sm-10">
<div class="col-sm-9">
<select id="locale" class="full-width">
<option value="en-US">English</option>
<option value="fr-FR">French</option>
Expand All @@ -39,10 +39,10 @@ <h2 class="bd-title">
</div>

<div class="mb-3 row">
<label class="col-sm-2"> Result Select </label>
<label class="col-sm-3"> Result Select </label>

<div class="col-sm-10">
<select id="select" class="full-width" multiple="multiple">
<div class="col-sm-9">
<select id="dynamic-select" class="full-width" multiple="multiple">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
Expand All @@ -58,4 +58,19 @@ <h2 class="bd-title">
</select>
</div>
</div>

<hr />

<div class="mb-3 row">
<label class="col-sm-3">named Locale import (Spanish)</label>

<div class="col-sm-9">
<select id="fixed-import" class="full-width" multiple="multiple">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
</div>
</div>
</div>
33 changes: 23 additions & 10 deletions packages/demo/src/examples/example09.ts
Original file line number Diff line number Diff line change
@@ -1,39 +1,52 @@
import { MultipleSelectInstance, multipleSelect } from 'multiple-select-vanilla';
import { type LocaleKey, type MultipleSelectInstance, multipleSelect } from 'multiple-select-vanilla';

// 1. load every locale individually
// import 'multiple-select-vanilla/dist/locales/multiple-select-fr-FR';
// import 'multiple-select-vanilla/dist/locales/multiple-select-es-ES';
// 1. load every locale individually, it could be import in 2 ways (named import OR import on window object)
import { Spanish } from 'multiple-select-vanilla/dist/locales/multiple-select-es-ES'; // named import
// import 'multiple-select-vanilla/dist/locales/multiple-select-es-ES'; // locale on window object

// 2. or load all locales at once
import 'multiple-select-vanilla/dist/locales/multiple-select-all-locales';

export default class Example {
ms0?: MultipleSelectInstance;
ms1?: MultipleSelectInstance;
ms2?: MultipleSelectInstance;

mount() {
const elm = document.querySelector('#locale') as HTMLSelectElement;
elm.addEventListener('change', ((event: KeyboardEvent & { target: HTMLSelectElement }) => {
this.updateLocale(event.target.value);
this.updateLocale(event.target.value as LocaleKey);
}) as EventListener);

this.ms1 = multipleSelect(elm) as MultipleSelectInstance;
this.ms2 = multipleSelect('#select', {
this.ms0 = multipleSelect(elm) as MultipleSelectInstance;
this.ms1 = multipleSelect('#dynamic-select', {
filter: true,
showOkButton: true,
dataTest: 'select1',
}) as MultipleSelectInstance;

this.ms2 = multipleSelect('#fixed-import', {
filter: true,
showOkButton: true,
dataTest: 'select2',

// when using named import
locale: Spanish,
}) as MultipleSelectInstance;
}

unmount() {
// destroy ms instance(s) to avoid DOM leaks
this.ms0?.destroy();
this.ms1?.destroy();
this.ms2?.destroy();
this.ms0 = undefined;
this.ms1 = undefined;
this.ms2 = undefined;
}

updateLocale(locale: string) {
this.ms2?.destroy();
this.ms2?.refreshOptions({ locale });
updateLocale(locale: LocaleKey) {
this.ms1?.destroy();
this.ms1?.refreshOptions({ locale });
}
}
14 changes: 8 additions & 6 deletions packages/demo/src/i18n/i18n.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { MultipleSelectInstance, multipleSelect } from 'multiple-select-vanilla';
import { type MultipleSelectInstance, multipleSelect } from 'multiple-select-vanilla';

export default class Example {
ms1?: MultipleSelectInstance;
Expand Down Expand Up @@ -26,11 +26,13 @@ export default class Example {
},

// 2. OR you could also use string pattern instead of the callback functions
// allSelectedText: 'Tous sélectionnés',
// countSelectedText: '# de % selectionnés',
// noMatchesFoundText: 'Aucun résultat',
// okButtonText: 'Fermer',
// selectAllText: 'Tout sélectionner',
/*
allSelectedText: 'Tous sélectionnés',
countSelectedText: '# de % selectionnés',
noMatchesFoundText: 'Aucun résultat',
okButtonText: 'Fermer',
selectAllText: 'Tout sélectionner',
*/
}) as MultipleSelectInstance;
}

Expand Down
9 changes: 1 addition & 8 deletions packages/multiple-select-vanilla/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,7 @@ declare global {
config?: Partial<Omit<MultipleSelectOption, 'onHardDestroy' | 'onAfterHardDestroy'>>,
): MultipleSelectInstance | MultipleSelectInstance[];
defaults: Partial<MultipleSelectInstance>;
locales: {
[localeKey: string]: {
formatSelectAll: () => string;
formatAllSelected: () => string;
formatCountSelected: (count: number, total: number) => string;
formatNoMatchesFound: () => string;
};
};
locales: Record<string, MultipleSelectLocale>;
methods: string[];
};
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export class MultipleSelectInstance {
protected _currentHighlightIndex = -1;
protected _currentSelectedElm?: HTMLLIElement | HTMLDivElement;
protected isMoveUpRecalcRequired = false;
locales: MultipleSelectLocales = {};
locales = {} as MultipleSelectLocales;

get isRenderAsHtml() {
return this.options.renderOptionLabelAsHtml || this.options.useSelectOptionLabelToHtml;
Expand Down Expand Up @@ -120,6 +120,11 @@ export class MultipleSelectInstance {

protected initLocale() {
if (this.options.locale) {
if (typeof this.options.locale === 'object') {
Object.assign(this.options, this.options.locale);
return;
}

const locales = window.multipleSelect.locales;
const parts = this.options.locale.split(/-|_/);

Expand Down
1 change: 1 addition & 0 deletions packages/multiple-select-vanilla/src/interfaces/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export * from './interfaces';
export * from './locale.interface';
export * from './multipleSelectOption.interface';
21 changes: 0 additions & 21 deletions packages/multiple-select-vanilla/src/interfaces/interfaces.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,27 +51,6 @@ export interface VirtualScrollOption {
sanitizer?: (html: string) => string | TrustedHTML;
}

export interface MultipleSelectLocale {
/** Customize the formatted text "All Selected" when using custom locale. */
formatAllSelected(): string;

/** Customize the formatted text "x of y selected" when using custom locale. */
formatCountSelected(selectedCount: number, totalCount: number): string;

/** For the "No Matches Found" text when nothing is found while filtering the dropdown */
formatNoMatchesFound(): string;

/** Customize the formatted text "OK" showing at the bottom of the drop. */
formatOkButton(): string;

/** For the "Select All" checkbox text */
formatSelectAll(): string;
}

export interface MultipleSelectLocales {
[localeKey: string]: MultipleSelectLocale;
}

export interface LabelFilter {
label: string;
search: string;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/** Locale I18N key (string) that currently exists in the project */
export type LocaleKey =
| 'cz-CS'
| 'da-DK'
| 'en-US'
| 'es-ES'
| 'fr-FR'
| 'hu-HU'
| 'it-IT'
| 'ja-JP'
| 'pt-BR'
| 'ru-RU'
| 'vi-VN'
| 'zh-CN'
| 'zh-TW';

export interface MultipleSelectLocale {
/** Customize the formatted text "All Selected" when using custom locale. */
formatAllSelected(): string;

/** Customize the formatted text "x of y selected" when using custom locale. */
formatCountSelected(selectedCount: number, totalCount: number): string;

/** For the "No Matches Found" text when nothing is found while filtering the dropdown */
formatNoMatchesFound(): string;

/** Customize the formatted text "OK" showing at the bottom of the drop. */
formatOkButton(): string;

/** For the "Select All" checkbox text */
formatSelectAll(): string;
}

export type MultipleSelectLocales = Record<LocaleKey, MultipleSelectLocale>;
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { LabelFilter, MultipleSelectLocale, OptGroupRowData, OptionRowData, OptionRowDivider, TextFilter } from './interfaces';
import type { LabelFilter, OptGroupRowData, OptionRowData, OptionRowDivider, TextFilter } from './interfaces';
import type { LocaleKey, MultipleSelectLocale } from './locale.interface';

export interface MultipleSelectView {
label: string;
Expand Down Expand Up @@ -97,7 +98,7 @@ export interface MultipleSelectOption extends MultipleSelectLocale {
keepOpen?: boolean;

/** Optional Locale */
locale?: string;
locale?: LocaleKey | MultipleSelectLocale;

/** Defaults to 250, define the maximum height property of the dropdown list. */
maxHeight: number;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,15 @@
* Author: Matej Puhony<[email protected]>
*/

import { MultipleSelectInstance } from '../MultipleSelectInstance';
import { MultipleSelectLocale, MultipleSelectLocales } from '../interfaces';

const ms = window.multipleSelect;
const ms =
typeof window !== 'undefined' && window.multipleSelect !== undefined
? window.multipleSelect
: ({ locales: {} as MultipleSelectLocales } as Partial<MultipleSelectInstance>);

(ms.locales as MultipleSelectLocales)['cz-CS'] = {
export const Czech = {
formatSelectAll() {
return '[Vybrat vše]';
},
Expand All @@ -25,4 +29,6 @@ const ms = window.multipleSelect;
},
} as MultipleSelectLocale;

(ms.locales as MultipleSelectLocales)['cz-CS'] = Czech;

export default ms.locales;
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,15 @@
* Author: HThuren<[email protected]>
*/

import { MultipleSelectInstance } from '../MultipleSelectInstance';
import { MultipleSelectLocale, MultipleSelectLocales } from '../interfaces';

const ms = window.multipleSelect;
const ms =
typeof window !== 'undefined' && window.multipleSelect !== undefined
? window.multipleSelect
: ({ locales: {} as MultipleSelectLocales } as Partial<MultipleSelectInstance>);

(ms.locales as MultipleSelectLocales)['da-DK'] = {
export const Danish = {
formatSelectAll() {
return '[Vælg alle]';
},
Expand All @@ -25,4 +29,6 @@ const ms = window.multipleSelect;
},
} as MultipleSelectLocale;

(ms.locales as MultipleSelectLocales)['da-DK'] = Danish;

export default ms.locales;
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,24 @@ const ms =
? window.multipleSelect
: ({ locales: {} as MultipleSelectLocales } as Partial<MultipleSelectInstance>);

(ms.locales as MultipleSelectLocales) = {
'en-US': {
formatSelectAll() {
return '[Select all]';
},
formatAllSelected() {
return 'All selected';
},
formatCountSelected(count: number, total: number) {
return `${count} of ${total} selected`;
},
formatNoMatchesFound() {
return 'No matches found';
},
formatOkButton() {
return 'OK';
},
} as MultipleSelectLocale,
};
export const English = {
formatSelectAll() {
return '[Select all]';
},
formatAllSelected() {
return 'All selected';
},
formatCountSelected(count: number, total: number) {
return `${count} of ${total} selected`;
},
formatNoMatchesFound() {
return 'No matches found';
},
formatOkButton() {
return 'OK';
},
} as MultipleSelectLocale;

(ms.locales as MultipleSelectLocales)['en-US'] = English;

export default ms.locales;
Loading
Loading