icheck 1.0 (#45612)

Co-authored-by: 宁倬 <943297456@qqcom>

types/icheck/icheck-tests.ts

@@ -1,4 +1,91 @@
-/// <reference types="jquery" />
+/**
+ * These options are default
+ */
+const options: ICheck.Options = {
+    // 'checkbox' or 'radio' to style only checkboxes or radio buttons, both by default
+    handle: '',
+
+    // base class added to customized checkboxes
+    checkboxClass: 'icheckbox',
+
+    // base class added to customized radio buttons
+    radioClass: 'iradio',
+
+    // class added on checked state (input.checked = true)
+    checkedClass: 'checked',
+
+    // if not empty, used instead of 'checkedClass' option (input type specific)
+    checkedCheckboxClass: '',
+    checkedRadioClass: '',
+
+    // if not empty, added as class name on unchecked state (input.checked = false)
+    uncheckedClass: '',
+
+    // if not empty, used instead of 'uncheckedClass' option (input type specific)
+    uncheckedCheckboxClass: '',
+    uncheckedRadioClass: '',
+
+    // class added on disabled state (input.disabled = true)
+    disabledClass: 'disabled',
+
+    // if not empty, used instead of 'disabledClass' option (input type specific)
+    disabledCheckboxClass: '',
+    disabledRadioClass: '',
+
+    // if not empty, added as class name on enabled state (input.disabled = false)
+    enabledClass: '',
+
+    // if not empty, used instead of 'enabledClass' option (input type specific)
+    enabledCheckboxClass: '',
+    enabledRadioClass: '',
+
+    // class added on indeterminate state (input.indeterminate = true)
+    indeterminateClass: 'indeterminate',
+
+    // if not empty, used instead of 'indeterminateClass' option (input type specific)
+    indeterminateCheckboxClass: '',
+    indeterminateRadioClass: '',
+
+    // if not empty, added as class name on determinate state (input.indeterminate = false)
+    determinateClass: '',
+
+    // if not empty, used instead of 'determinateClass' option (input type specific)
+    determinateCheckboxClass: '',
+    determinateRadioClass: '',
+
+    // class added on hover state (pointer is moved onto input)
+    hoverClass: 'hover',
+
+    // class added on focus state (input has gained focus)
+    focusClass: 'focus',
+
+    // class added on active state (mouse button is pressed on input)
+    activeClass: 'active',
+
+    // adds hoverClass to customized input on label hover and labelHoverClass to label on input hover
+    labelHover: true,
+
+    // class added to label if labelHover set to true
+    labelHoverClass: 'hover',
+
+    // increase clickable area by given % (negative number to decrease)
+    increaseArea: '',
+
+    // true to set 'pointer' CSS cursor over enabled inputs and 'default' over disabled
+    cursor: false,
+
+    // set true to inherit original input's class name
+    inheritClass: false,
+
+    // if set to true, input's id is prefixed with 'iCheck-' and attached
+    inheritID: false,
+
+    // set true to activate ARIA support
+    aria: false,
+
+    // add HTML code or text inside customized input
+    insert: ''
+};
 
 $('input').iCheck({
     labelHover: false,
@@ -24,10 +111,39 @@ $('input.some').iCheck({
     // different options
 });
 
-$('input').on('ifChecked', function (event) {
+$('input').on('ifChecked', function(event) {
+    console.log(this);
     alert(event.type + ' callback');
 });
 
-$('input').iCheck('check', function () {
+// change input's state to 'checked'
+$('input').iCheck('check');
+
+// remove 'checked' state
+$('input').iCheck('uncheck');
+
+// toggle 'checked' state
+$('input').iCheck('toggle');
+
+// change input's state to 'disabled'
+$('input').iCheck('disable');
+
+// remove 'disabled' state
+$('input').iCheck('enable');
+
+// change input's state to 'indeterminate'
+$('input').iCheck('indeterminate');
+
+// remove 'indeterminate' state
+$('input').iCheck('determinate');
+
+// apply input changes, which were done outside the plugin
+$('input').iCheck('update');
+
+// remove all traces of iCheck
+$('input').iCheck('destroy');
+
+// You may also specify some function, that will be executed on each method call:
+$('input').iCheck('check', () => {
     alert('Well done, Sir');
 });

types/icheck/index.d.ts

@@ -1,113 +1,267 @@
-// Type definitions for iCheck v0.8
-// Project: http://damirfoy.com/iCheck/
+// Type definitions for icheck 1.0
+// Project: http://fronteed.com/iCheck/
 // Definitions by: Dániel Tar <https://github.com/qcz>
+//                 宁倬 <https://github.com/943297456>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.3
 
-interface ICheckOptions {
-    /**
-    * 'checkbox' or 'radio' to style only checkboxes or radio buttons, both by default
-    */
-    handle?: string;
-    /**
-    * Base class added to customized checkboxes
-    */
-    checkboxClass?: string;
-    /**
-    * Base class added to customized radio buttons
-    */
-    radioClass?: string;
-    /**
-    * Class added on checked state (input.checked = true)
-    */
-    checkedClass?: string;
-    /**
-    * If not empty, used instead of 'checkedClass' option (checkbox input specific)
-    */
-    checkedCheckboxClass?: string;
-    /**
-    * If not empty, used instead of 'checkedClass' option (radio button input specific)
-    */
-    checkedRadioClass?: string;
-    /**
-    * If not empty, added as class name on unchecked state (input.checked = false)
-    */
-    uncheckedClass?: string;
-    /**
-    * If not empty, used instead of 'uncheckedClass' option (checkbox input specific)
-    */
-    uncheckedCheckboxClass?: string;
-    /**
-    * If not empty, used instead of 'uncheckedClass' option (radio button input specific)
-    */
-    uncheckedRadioClass?: string;
-    /**
-    * Class added on disabled state (input.disabled = true)
-    */
-    disabledClass?: string;
-    /**
-    * If not empty, used instead of 'disabledClass' option (checkbox input specific)
-    */
-    disabledCheckboxClass?: string;
-    /**
-    * If not empty, used instead of 'disabledClass' option (radio button input specific)
-    */
-    disabledRadioClass?: string;
-    /**
-    * If not empty, added as class name on enabled state (input.disabled = false)
-    */
-    enabledClass?: string;
-    /**
-    * If not empty, used instead of 'enabledClass' option (checkbox input specific)
-    */
-    enabledCheckboxClass?: string;
-    /**
-    * If not empty, used instead of 'enabledClass' option (radio button input specific)
-    */
-    enabledRadioClass?: string;
-    /**
-    * Class added on hover state (pointer is moved onto an input)
-    */
-    hoverClass?: string;
-    /**
-    * Class added on focus state (input has gained focus)
-    */
-    focusClass?: string;
-    /**
-    * Class added on active state (mouse button is pressed on an input)
-    */
-    activeClass?: string;
-    /**
-    * Adds hoverClass to customized input on label hover and labelHoverClass to label on input hover
-    */
-    labelHover?: boolean;
-    /**
-    * Class added to label if labelHover set to true
-    */
-    labelHoverClass?: string;
-    /**
-    * Increase clickable area by given % (negative number to decrease)
-    */
-    increaseArea?: string;
-    /**
-    * True to set 'pointer' CSS cursor over enabled inputs and 'default' over disabled
-    */
-    cursor?: boolean;
-    /**
-    * Set true to inherit original input's class name
-    */
-    inheritClass?: boolean;
-    /**
-    * If set to true, input's id is prefixed with 'iCheck-' and attached
-    */
-    inheritID?: boolean;
-    /**
-    * Add HTML code or text inside customized input
-    */
-    insert?: string;
+/// <reference types="jquery" />
+
+/**
+ * @see https://github.com/fronteed/icheck
+ */
+declare namespace ICheck {
+    interface Options {
+        /**
+         * 'checkbox' or 'radio' to style only checkboxes or radio buttons, both by default
+         * @default ""
+         */
+        handle?: "" | "checkbox" | "radio";
+        /**
+         * Base class added to customized checkboxes
+         * @default "icheckbox"
+         */
+        checkboxClass?: string;
+        /**
+         * Base class added to customized radio buttons
+         * @default "iradio"
+         */
+        radioClass?: string;
+        /**
+         * Class added on checked state (input.checked = true)
+         * @default "checked"
+         */
+        checkedClass?: string;
+        /**
+         * If not empty, used instead of 'checkedClass' option (checkbox input specific)
+         * @default ""
+         */
+        checkedCheckboxClass?: string;
+        /**
+         * If not empty, used instead of 'checkedClass' option (radio button input specific)
+         * @default ""
+         */
+        checkedRadioClass?: string;
+        /**
+         * If not empty, added as class name on unchecked state (input.checked = false)
+         * @default ""
+         */
+        uncheckedClass?: string;
+        /**
+         * If not empty, used instead of 'uncheckedClass' option (checkbox input specific)
+         * @default ""
+         */
+        uncheckedCheckboxClass?: string;
+        /**
+         * If not empty, used instead of 'uncheckedClass' option (radio button input specific)
+         * @default ""
+         */
+        uncheckedRadioClass?: string;
+        /**
+         * Class added on disabled state (input.disabled = true)
+         * @default "disabled"
+         */
+        disabledClass?: string;
+        /**
+         * If not empty, used instead of 'disabledClass' option (checkbox input specific)
+         * @default ""
+         */
+        disabledCheckboxClass?: string;
+        /**
+         * If not empty, used instead of 'disabledClass' option (radio button input specific)
+         * @default ""
+         */
+        disabledRadioClass?: string;
+        /**
+         * If not empty, added as class name on enabled state (input.disabled = false)
+         * @default ""
+         */
+        enabledClass?: string;
+        /**
+         * If not empty, used instead of 'enabledClass' option (checkbox input specific)
+         * @default ""
+         */
+        enabledCheckboxClass?: string;
+        /**
+         * If not empty, used instead of 'enabledClass' option (radio button input specific)
+         * @default ""
+         */
+        enabledRadioClass?: string;
+        /**
+         * Class added on indeterminate state (input.indeterminate = true)
+         * @default "indeterminate"
+         */
+        indeterminateClass?: string;
+        /**
+         * If not empty, used instead of 'indeterminateClass' option (checkbox input specific)
+         * @default ""
+         */
+        indeterminateCheckboxClass?: string;
+        /**
+         * If not empty, used instead of 'indeterminateClass' option (radio button input specific)
+         * @default ""
+         */
+        indeterminateRadioClass?: string;
+        /**
+         * If not empty, added as class name on determinate state (input.indeterminate = false)
+         * @default ""
+         */
+        determinateClass?: string;
+        /**
+         * If not empty, used instead of 'determinateClass' option (checkbox input specific)
+         * @default ""
+         */
+        determinateCheckboxClass?: string;
+        /**
+         * If not empty, used instead of 'determinateClass' option (radio button input specific)
+         * @default ""
+         */
+        determinateRadioClass?: string;
+        /**
+         * Class added on hover state (pointer is moved onto an input)
+         * @default "hover"
+         */
+        hoverClass?: string;
+        /**
+         * Class added on focus state (input has gained focus)
+         * @default "focus"
+         */
+        focusClass?: string;
+        /**
+         * Class added on active state (mouse button is pressed on an input)
+         * @default "active"
+         */
+        activeClass?: string;
+        /**
+         * Adds hoverClass to customized input on label hover and labelHoverClass to label on input hover
+         * @default true
+         */
+        labelHover?: boolean;
+        /**
+         * Class added to label if labelHover set to true
+         * @default "hover"
+         */
+        labelHoverClass?: string;
+        /**
+         * Increase clickable area by given % (negative number to decrease)
+         * @default ""
+         */
+        increaseArea?: string;
+        /**
+         * True to set 'pointer' CSS cursor over enabled inputs and 'default' over disabled
+         * @default false
+         */
+        cursor?: boolean;
+        /**
+         * Set true to inherit original input's class name
+         * @default false
+         */
+        inheritClass?: boolean;
+        /**
+         * If set to true, input's id is prefixed with 'iCheck-' and attached
+         * @default false
+         */
+        inheritID?: boolean;
+        /**
+         * Set true to activate ARIA support
+         * @default false
+         */
+        aria?: boolean;
+        /**
+         * Add HTML code or text inside customized input
+         * @default ""
+         */
+        insert?: string;
+    }
+
+    interface Methods {
+        /**
+         * change input's state to 'checked'
+         */
+        check(): void;
+        /**
+         * remove 'checked' state
+         */
+        uncheck(): void;
+        /**
+         * toggle 'checked' state
+         */
+        toggle(): void;
+        /**
+         * change input's state to 'disabled'
+         */
+        disable(): void;
+        /**
+         * remove 'disabled' state
+         */
+        enable(): void;
+        /**
+         * change input's state to 'indeterminate'
+         */
+        indeterminate(): void;
+        /**
+         * remove 'indeterminate' state
+         */
+        determinate(): void;
+        /**
+         * apply input changes, which were done outside the plugin
+         */
+        update(): void;
+        /**
+         * remove all traces of iCheck
+         */
+        destroy(): void;
+    }
+
+    interface Events {
+        /**
+         * user clicked on a customized input or an assigned label
+         */
+        ifClicked(): void;
+        /**
+         * input's "checked", "disabled" or "indeterminate" state is changed
+         */
+        ifChanged(): void;
+        /**
+         * input's state is changed to "checked"
+         */
+        ifChecked(): void;
+        /**
+         * "checked" state is removed
+         */
+        ifUnchecked(): void;
+        /**
+         * input's "checked" state is changed
+         */
+        ifToggled(): void;
+        /**
+         * input's state is changed to "disabled"
+         */
+        ifDisabled(): void;
+        /**
+         * "disabled" state is removed
+         */
+        ifEnabled(): void;
+        /**
+         * input's state is changed to "indeterminate"
+         */
+        ifIndeterminate(): void;
+        /**
+         * "indeterminate" state is removed
+         */
+        ifDeterminate(): void;
+        /**
+         * input is just customized
+         */
+        ifCreated(): void;
+        /**
+         * customization is just removed
+         */
+        ifDestroyed(): void;
+    }
 }
 
 interface JQuery {
-    iCheck(options?: ICheckOptions): JQuery;
-    iCheck(command: string, callback?: () => void): void;
+    iCheck(options?: ICheck.Options): this;
+    iCheck<T extends keyof ICheck.Methods>(method: T, callback?: ICheck.Methods[T]): this;
 }

types/icheck/tslint.json

@@ -1,15 +1 @@
-{
-    "extends": "dtslint/dt.json",
-    "rules": {
-        "callable-types": false,
-        "dt-header": false,
-        "eofline": false,
-        "interface-name": false,
-        "jsdoc-format": false,
-        "no-redundant-jsdoc": false,
-        "npm-naming": false,
-        "only-arrow-functions": false,
-        "prefer-method-signature": false,
-        "space-before-function-paren": false
-    }
-}
+{ "extends": "dtslint/dt.json" }