Update select2 documentation

This commit is contained in:
Antoine Bartuccio 2024-10-13 00:26:43 +02:00 committed by Bartuccio Antoine
parent a5d8c96bab
commit 3b1d06a71d

View File

@ -42,11 +42,13 @@
* which takes a callback that must return a `Select2Object`. * which takes a callback that must return a `Select2Object`.
* *
* ```js * ```js
* import { makeUrl } from "#core:utils/api";
* import {userSearchUsers } from "#openapi"
* document.addEventListener("DOMContentLoaded", () => sithSelect2({ * document.addEventListener("DOMContentLoaded", () => sithSelect2({
* element: document.getElementById("select2-input"), * element: document.getElementById("select2-input"),
* dataSource: remoteDataSource("/api/user/search", { * dataSource: remoteDataSource(await makeUrl(userSearchUsers), {
* excluded: () => [1, 2], // exclude users 1 and 2 from the search * excluded: () => [1, 2], // exclude users 1 and 2 from the search
* resultConverter: (user) => Object({id: user.id, text: user.firstName}) * resultConverter: (user: AjaxResponse) => {id: user.id, text: (user.firstName as UserType)}
* }) * })
* })); * }));
* ``` * ```
@ -60,10 +62,12 @@
* Select2 documentation. * Select2 documentation.
* *
* ```js * ```js
* import { makeUrl } from "#core:utils/api";
* import {userSearchUsers } from "#openapi"
* document.addEventListener("DOMContentLoaded", () => sithSelect2({ * document.addEventListener("DOMContentLoaded", () => sithSelect2({
* element: document.getElementById("select2-input"), * element: document.getElementById("select2-input"),
* dataSource: remoteDataSource("/api/user/search", { * dataSource: remoteDataSource(await makeUrl(userSearchUsers), {
* resultConverter: (user) => Object({id: user.id, text: user.firstName}), * resultConverter: (user: AjaxResponse) => {id: user.id, text: (user.firstName as UserType)}
* overrides: { * overrides: {
* delay: 500 * delay: 500
* } * }
@ -88,10 +92,12 @@
* In this case, fill the `pictureGetter` option : * In this case, fill the `pictureGetter` option :
* *
* ```js * ```js
* import { makeUrl } from "#core:utils/api";
* import {userSearchUsers } from "#openapi"
* document.addEventListener("DOMContentLoaded", () => sithSelect2({ * document.addEventListener("DOMContentLoaded", () => sithSelect2({
* element: document.getElementById("select2-input"), * element: document.getElementById("select2-input"),
* dataSource: remoteDataSource("/api/user/search", { * dataSource: remoteDataSource(await makeUrl(userSearchUsers), {
* resultConverter: (user) => Object({id: user.id, text: user.firstName}) * resultConverter: (user: AjaxResponse) => {id: user.id, text: (user.firstName as UserType)}
* }) * })
* pictureGetter: (user) => user.profilePict, * pictureGetter: (user) => user.profilePict,
* })); * }));
@ -173,7 +179,7 @@ interface Select2Options {
} }
/** /**
* @param {Select2Options} options * Create a new select2 with sith presets
*/ */
export function sithSelect2(options: Select2Options) { export function sithSelect2(options: Select2Options) {
const elem: PlainObject = $(options.element); const elem: PlainObject = $(options.element);
@ -192,11 +198,9 @@ interface LocalSourceOptions {
/** /**
* Build a data source for a Select2 from a local array * Build a data source for a Select2 from a local array
* @param {Select2Object[]} source The array containing the data
* @param {RemoteSourceOptions} options
*/ */
export function localDataSource( export function localDataSource(
source: Select2Object[], source: Select2Object[] /** Array containing the data */,
options: LocalSourceOptions, options: LocalSourceOptions,
): DataSource { ): DataSource {
if (options.excluded) { if (options.excluded) {
@ -217,12 +221,9 @@ interface RemoteSourceOptions {
/** /**
* Build a data source for a Select2 from a remote url * Build a data source for a Select2 from a remote url
* @param {string} source The url of the endpoint
* @param {RemoteSourceOptions} options
*/ */
export function remoteDataSource( export function remoteDataSource(
source: string, source: string /** url of the endpoint */,
options: RemoteSourceOptions, options: RemoteSourceOptions,
): DataSource { ): DataSource {
$.ajaxSetup({ $.ajaxSetup({
@ -262,8 +263,6 @@ export function itemFormatter(user: { loading: boolean; text: string }) {
/** /**
* Build a function to display the results * Build a function to display the results
* @param {null | function(Object):string} pictureGetter
* @return {function(string): jQuery|HTMLElement}
*/ */
export function selectItemBuilder(pictureGetter?: (item: RemoteResult) => string) { export function selectItemBuilder(pictureGetter?: (item: RemoteResult) => string) {
return (item: RemoteResult) => { return (item: RemoteResult) => {