bluzky / nice-select2

A lightweight vanilla javascript library that replaces native select elements with customizable dropdowns
https://bluzky.github.io/nice-select2/
MIT License
361 stars 60 forks source link

Missing Typescript support #47

Closed LukeSavefrogs closed 1 year ago

LukeSavefrogs commented 1 year ago

🐛 Problem

This library lacks of Typescript support, so when working with typescript:

💻 Workaround

To integrate it with my environment I had to write my own declaration file.

Just put the following content in any .d.ts file:

// src/types/niceSelect.d.ts

export declare global {
    declare module NiceSelect {
        /**
         * Creates a new instance of the NiceSelect select UI.
         * 
         * `NiceSelect.bind(element, options)` is an alias for `new NiceSelect(element, options)`
         * @param element The target HTMLElement
         * @param options An object containing all the options
         */
        export function bind(element, options?: niceSelectOptions): NiceSelect;

        /**
         * **Nice Select 2**
         * 
         * A lightweight vanilla javascript library that replaces native select 
         * elements with customizable dropdowns.
         * @see https://bluzky.github.io/nice-select2/
        */
        export class NiceSelect {
            /**
             * Update nice-select items to match with source select
             */
            update(): void

            /**
             * Disable the select
             */
            disable(): void

            /**
             * Enable the select
             */
            enable(): void

            /**
             * Destroy the NiceSelect2 instance
             */
            destroy(): void

            /**
             * Clear all selected options
             */
            clear(): void
        }
    }
}

type niceSelectOptions = {
    /**
     * Pass the data option to explicitly create **custom options**.
     * 
     * If the `data` option is present, then all existing options
     * on the HTML Select will be ignored.
     */
    data?: {
        /**
         * Specify the text to be shown on the option.
         */
        text: string,

        /**
         * Specifies the value of the option element:
         * - If set to `"optgroup"`, the element will be rendered as a select "Option Group".
         * - If set to `string`, this will be the value of the option.
         */
        value: "optgroup" | string
    }[],

    /**
     * Wether the Select should support **search autocomplete**.
     */
    searchable?: boolean
}
Tsjippy commented 1 year ago

What is your idea with this issue? Can you create a pr for it?

LukeSavefrogs commented 1 year ago

Why did you close it? It's still valid and it's not being resolved either.


By the way, I guess i could try making a PR but i don't know how to make it work when pushed on the CDN..

Tsjippy commented 1 year ago

Because it is not a problem nor a request, I view it as info, so it can be closed.

not sure what you want with this option

Anubarak commented 8 months ago

@Tsjippy So there are no plans to allow TS users to use your library?

LukeSavefrogs commented 7 months ago

@Tsjippy So there are no plans to allow TS users to use your library?

I don't think he wants to support it... If you need in my first post there is a workaround you can use to add typing information