simonwep / pickr

🎨 Flat, simple, multi-themed, responsive and hackable Color-Picker library. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!
https://simonwep.github.io/pickr
MIT License
4.29k stars 287 forks source link

There is no way to change the default text using the i18n configuration when using TypeScript #274

Closed yinhaogt closed 3 years ago

yinhaogt commented 3 years ago

Options does not define i18n

    interface Options {
        el: string | HTMLElement;
        container?: string | HTMLElement;
        theme?: Theme;
        closeOnScroll?: boolean;
        appClass?: string;
        useAsButton?: boolean;
        padding?: number;
        inline?: boolean;
        autoReposition?: boolean;
        sliders?: Slider;
        disabled?: boolean;
        lockOpacity?: boolean;
        outputPrecision?: number;
        comparison?: boolean;
        default?: string;
        swatches?: Array<string> | null;
        defaultRepresentation?: Representation;
        showAlways?: boolean;
        closeWithKey?: string;
        position?: Position;
        adjustableNumbers?: boolean;

        components?: {
            palette?: boolean;
            preview?: boolean;
            opacity?: boolean;
            hue?: boolean;

            interaction?: {
                hex?: boolean;
                rgba?: boolean;
                hsla?: boolean;
                hsva?: boolean;
                cmyk?: boolean;
                input?: boolean;
                cancel?: boolean;
                clear?: boolean;
                save?: boolean;
            };
        };

        strings?: {
            save?: string;
            clear?: string;
            cancel?: string;
        }
    }

So I need to use a type assertion, otherwise an error will be reported

   this.pickr = new Pickr({
      el: ".custom-btn",
      theme: "monolith", //'classic' or 'monolith', or 'nano'

      swatches: null,

      components: {
        // Main components
        preview: false,
        opacity: false,
        hue: true,

        // Input / output Options
        interaction: {
          hex: false,
          rgba: false,
          hsla: false,
          hsva: false,
          cmyk: false,
          input: false,
          clear: false,
          save: true,
        },
      },
      i18n: {
        "btn:save": "确认",
      },
    } as any);