Skip to content

Commit

Permalink
feat(chore): added types definitions
Browse files Browse the repository at this point in the history
This PR adds type definitions for Fomantic's components, enabling them to be more usable on code editors. Typings are now integrated into the actual repository, rather than in the DefinitelyTyped repository, allowing us a better control over type updates and quick fixes. They've been updated to the actual 2.9.2 release, so they should be pretty accurate.

To use them, there's nothing to do since they're included in the package.json. Users should also include jquery types as well in their package.json: npm install --save-dev @types/jquery
  • Loading branch information
prudho authored Jun 19, 2023
1 parent 0540e9c commit eabc58e
Show file tree
Hide file tree
Showing 28 changed files with 11,904 additions and 0 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"license": "MIT",
"author": "Jack Lukic <jack@semantic-ui.com>",
"main": "dist/semantic.js",
"types": "./types/index.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/fomantic/Fomantic-UI.git"
Expand Down
250 changes: 250 additions & 0 deletions types/fomantic-ui-accordion.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,250 @@
declare namespace FomanticUI {
interface Accordion {
settings: AccordionSettings;

/**
* Refreshes all cached selectors and data.
*/
(behavior: 'refresh'): JQuery;

/**
* Opens accordion content at index.
*/
(behavior: 'open', index: number): JQuery;

/**
* Closes accordion content that are not active.
*/
(behavior: 'close others'): JQuery;

/**
* Closes accordion content at index.
*/
(behavior: 'close', index: number): JQuery;

/**
* Toggles accordion content at index.
*/
(behavior: 'toggle', index: number): JQuery;

(behavior: 'destroy'): JQuery;
<K extends keyof AccordionSettings>(
behavior: 'setting',
name: K,
value?: undefined,
): AccordionSettings._Impl[K];
<K extends keyof AccordionSettings>(behavior: 'setting', name: K, value: AccordionSettings._Impl[K]): JQuery;
(behavior: 'setting', value: AccordionSettings): JQuery;
(settings?: AccordionSettings): JQuery;
}

/**
* @see {@link https://fomantic-ui.com/modules/accordion.html#/settings}
*/
type AccordionSettings = AccordionSettings.Param;

namespace AccordionSettings {
type Param = Pick<_Impl, 'exclusive'> & Partial<Pick<_Impl, keyof _Impl>>;

interface _Impl {
// region Accordion Settings

/**
* Only allow one section open at a time.
* @default true
*/
exclusive: boolean;

/**
* Event on 'title' that will cause accordion to open.
* @default 'click'
*/
on: string;

/**
* Whether child content opacity should be animated (may cause performance issues with many child elements).
* @default true
*/
animateChildren: boolean;

/**
* Close open nested accordion content when an element closes.
* @default true
*/
closeNested: boolean;

/**
* Allow active sections to collapse.
* @default true
*/
collapsible: boolean;

/**
* Duration in ms of opening animation.
* @default 500
*/
duration: number;

/**
* Easing of opening animation. EaseInOutQuint is included with accordion, for additional options you must include easing equations.
* @see {@link http://gsgd.co.uk/sandbox/jquery/easing/}
* @default 'easeInOutQuint'
*/
easing: string;

// endregion

// region Callbacks

/**
* Callback before element opens.
*/
onOpening(this: JQuery): void;

/**
* Callback after element is open.
*/
onOpen(this: JQuery): void;

/**
* Callback before element closes.
*/
onClosing(this: JQuery): void;

/**
* Callback after element is closed.
*/
onClose(this: JQuery): void;

/**
* Callback before element opens or closes.
*/
onChanging(this: JQuery): void;

/**
* Callback before element opens or closes.
*/
onChange(this: JQuery): void;

// endregion

// region DOM Settings

/**
* DOM Selectors used internally.
* Selectors used to find parts of a module.
*/
selector: Accordion.SelectorSettings;

/**
* Class names used to determine element state.
*/
className: Accordion.ClassNameSettings;

// endregion

// region Debug Settings

/**
* Name used in log statements
*/
name: string;

/**
* Event namespace. Makes sure module teardown does not effect other events attached to an element.
*/
namespace: string;

/**
* Silences all console output including error messages, regardless of other debug settings.
*/
silent: boolean;

/**
* Debug output to console
*/
debug: boolean;

/**
* Show console.table output with performance metrics
*/
performance: boolean;

/**
* Debug output includes all internal behaviors
*/
verbose: boolean;

error: Accordion.ErrorSettings;

// endregion
}
}

namespace Accordion {
type SelectorSettings = SelectorSettings.Param;

namespace SelectorSettings {
type Param = (
| Pick<_Impl, 'accordion'>
| Pick<_Impl, 'title'>
| Pick<_Impl, 'trigger'>
| Pick<_Impl, 'content'>
) &
Partial<Pick<_Impl, keyof _Impl>>;

interface _Impl {
/**
* @default '.accordion'
*/
accordion: string;

/**
* @default '.title'
*/
title: string;

/**
* @default '.title'
*/
trigger: string;

/**
* @default '.content'
*/
content: string;
}
}

type ClassNameSettings = ClassNameSettings.Param;

namespace ClassNameSettings {
type Param = (Pick<_Impl, 'active'> | Pick<_Impl, 'animating'>) & Partial<Pick<_Impl, keyof _Impl>>;

interface _Impl {
/**
* @default 'active'
*/
active: string;

/**
* @default 'animating'
*/
animating: string;
}
}

type ErrorSettings = ErrorSettings.Param;

namespace ErrorSettings {
type Param = Pick<_Impl, 'method'> & Partial<Pick<_Impl, keyof _Impl>>;

interface _Impl {
/**
* @default 'The method you called is not defined.'
*/
method: string;
}
}
}
}
Loading

0 comments on commit eabc58e

Please sign in to comment.