mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
[semantic-ui-dimmer] Add type definitions (#16755)
* Add type definitions for semantic-ui-dimmer. * [semantic-ui-dimmer] Add reference directive to global.d.ts. * [semantic-ui-dimmer] Hide implementation details from autocomplete.
This commit is contained in:
Leonard Thieu
Mohamed Hegazy
parent
313f10b295
commit
eaa830ba77
339
types/semantic-ui-dimmer/global.d.ts
vendored
Normal file
339
types/semantic-ui-dimmer/global.d.ts
vendored
Normal file
@ -0,0 +1,339 @@
|
||||
interface JQuery {
|
||||
dimmer: SemanticUI.Dimmer;
|
||||
}
|
||||
|
||||
declare namespace SemanticUI {
|
||||
interface Dimmer {
|
||||
settings: DimmerSettings;
|
||||
|
||||
/**
|
||||
* Detaches a given element from DOM and reattaches element inside dimmer
|
||||
*/
|
||||
(behavior: 'add content', element: string | JQuery): JQuery;
|
||||
/**
|
||||
* Shows dimmer
|
||||
*/
|
||||
(behavior: 'show'): JQuery;
|
||||
/**
|
||||
* Hides dimmer
|
||||
*/
|
||||
(behavior: 'hide'): JQuery;
|
||||
/**
|
||||
* Toggles current dimmer visibility
|
||||
*/
|
||||
(behavior: 'toggle'): JQuery;
|
||||
/**
|
||||
* Changes dimmer opacity
|
||||
*/
|
||||
(behavior: 'set opacity', opacity: number): JQuery;
|
||||
/**
|
||||
* Creates a new dimmer in dimmable context
|
||||
*/
|
||||
(behavior: 'create'): JQuery;
|
||||
/**
|
||||
* Returns current duration for show or hide event depending on current visibility
|
||||
*/
|
||||
(behavior: 'get duration'): number;
|
||||
/**
|
||||
* Returns DOM element for dimmer
|
||||
*/
|
||||
(behavior: 'get dimmer'): JQuery;
|
||||
/**
|
||||
* Returns whether current dimmable has a dimmer
|
||||
*/
|
||||
(behavior: 'has dimmer'): boolean;
|
||||
/**
|
||||
* Whether section's dimmer is active
|
||||
*/
|
||||
(behavior: 'is active'): boolean;
|
||||
/**
|
||||
* Whether dimmer is animating
|
||||
*/
|
||||
(behavior: 'is animating'): boolean;
|
||||
/**
|
||||
* Whether current element is a dimmer
|
||||
*/
|
||||
(behavior: 'is dimmer'): boolean;
|
||||
/**
|
||||
* Whether current element is a dimmable section
|
||||
*/
|
||||
(behavior: 'is dimmable'): boolean;
|
||||
/**
|
||||
* Whether dimmer is disabled
|
||||
*/
|
||||
(behavior: 'is disabled'): boolean;
|
||||
/**
|
||||
* Whether dimmer is not disabled
|
||||
*/
|
||||
(behavior: 'is enabled'): boolean;
|
||||
/**
|
||||
* Whether dimmable section is body
|
||||
*/
|
||||
(behavior: 'is page'): boolean;
|
||||
/**
|
||||
* Whether dimmer is a page dimmer
|
||||
*/
|
||||
(behavior: 'is page dimmer'): boolean;
|
||||
/**
|
||||
* Sets page dimmer to active
|
||||
*/
|
||||
(behavior: 'set active'): JQuery;
|
||||
/**
|
||||
* Sets an element as a dimmable section
|
||||
*/
|
||||
(behavior: 'set dimmable'): JQuery;
|
||||
/**
|
||||
* Sets a dimmable section as dimmed
|
||||
*/
|
||||
(behavior: 'set dimmed'): JQuery;
|
||||
/**
|
||||
* Sets current dimmer as a page dimmer
|
||||
*/
|
||||
(behavior: 'set page dimmer'): JQuery;
|
||||
/**
|
||||
* Sets a dimmer as disabled
|
||||
*/
|
||||
(behavior: 'set disabled'): JQuery;
|
||||
(behavior: 'destroy'): JQuery;
|
||||
<K extends keyof DimmerSettings>(behavior: 'setting', name: K, value?: undefined): DimmerSettings[K];
|
||||
<K extends keyof DimmerSettings>(behavior: 'setting', name: K, value: DimmerSettings[K]): JQuery;
|
||||
(behavior: 'setting', value: DimmerSettings | object): JQuery;
|
||||
(settings?: DimmerSettings | object): JQuery;
|
||||
}
|
||||
|
||||
/**
|
||||
* @see {@link http://semantic-ui.com/modules/dimmer.html#/settings}
|
||||
*/
|
||||
interface DimmerSettings extends Pick<DimmerSettings._Impl, keyof DimmerSettings._Impl> { }
|
||||
|
||||
namespace DimmerSettings {
|
||||
interface _Impl {
|
||||
// region Behavior
|
||||
|
||||
/**
|
||||
* Dimmers opacity from 0-1. Defaults to auto which uses the CSS specified opacity.
|
||||
*
|
||||
* @default 'auto'
|
||||
*/
|
||||
opacity: 'auto' | number;
|
||||
/**
|
||||
* Specify a variation to add when generating dimmer, like inverted
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
variation: false | string;
|
||||
/**
|
||||
* If initializing a dimmer on a dimmable context, you can use dimmerName to distinguish between multiple dimmers in that context.
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
dimmerName: false | string;
|
||||
/**
|
||||
* Whether clicking on the dimmer should hide the dimmer (Defaults to auto, closable only when settings.on is not hover
|
||||
*
|
||||
* @default 'auto'
|
||||
*/
|
||||
closable: 'auto' | boolean;
|
||||
/**
|
||||
* Can be set to hover or click to show/hide dimmer on dimmable event
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
on: false | 'hover' | 'click';
|
||||
/**
|
||||
* Whether to dim dimmers using CSS transitions.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
useCSS: boolean;
|
||||
/**
|
||||
* Animation duration of dimming. If an integer is used, that value will apply to both show and hide animations.
|
||||
*/
|
||||
duration: number | Dimmer.DurationSettings;
|
||||
/**
|
||||
* Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
|
||||
*
|
||||
* @default 'fade'
|
||||
* @see {@link http://semantic-ui.com/modules/transition.html}
|
||||
*/
|
||||
transition: string;
|
||||
|
||||
// endregion
|
||||
|
||||
// region Callbacks
|
||||
|
||||
/**
|
||||
* Callback on element show
|
||||
*/
|
||||
onShow(this: JQuery): void;
|
||||
/**
|
||||
* Callback on element hide
|
||||
*/
|
||||
onHide(this: JQuery): void;
|
||||
/**
|
||||
* Callback on element show or hide
|
||||
*/
|
||||
onChange(this: JQuery): void;
|
||||
|
||||
// endregion
|
||||
|
||||
// region DOM Settings
|
||||
|
||||
/**
|
||||
* Object containing selectors used by module.
|
||||
*/
|
||||
selector: Dimmer.SelectorSettings;
|
||||
/**
|
||||
* Templates used to generate dimmer content
|
||||
*/
|
||||
template: Dimmer.TemplateSettings;
|
||||
/**
|
||||
* Class names used to attach style to state
|
||||
*/
|
||||
className: Dimmer.ClassNameSettings;
|
||||
|
||||
// endregion
|
||||
|
||||
// region Debug Settings
|
||||
|
||||
/**
|
||||
* Error messages displayed to console
|
||||
*/
|
||||
error: Dimmer.ErrorSettings;
|
||||
|
||||
// endregion
|
||||
|
||||
// region Component Settings
|
||||
|
||||
// region DOM Settings
|
||||
|
||||
/**
|
||||
* Event namespace. Makes sure module teardown does not effect other events attached to an element.
|
||||
*/
|
||||
namespace: string;
|
||||
|
||||
// endregion
|
||||
|
||||
// region Debug Settings
|
||||
|
||||
/**
|
||||
* Name used in log statements
|
||||
*/
|
||||
name: 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;
|
||||
|
||||
// endregion
|
||||
|
||||
// endregion
|
||||
}
|
||||
}
|
||||
|
||||
namespace Dimmer {
|
||||
interface DurationSettings extends Pick<DurationSettings._Impl, keyof DurationSettings._Impl> { }
|
||||
|
||||
namespace DurationSettings {
|
||||
interface _Impl {
|
||||
/**
|
||||
* @default 500
|
||||
*/
|
||||
show: number;
|
||||
/**
|
||||
* @default 500
|
||||
*/
|
||||
hide: number;
|
||||
}
|
||||
}
|
||||
|
||||
interface SelectorSettings extends Pick<SelectorSettings._Impl, keyof SelectorSettings._Impl> { }
|
||||
|
||||
namespace SelectorSettings {
|
||||
interface _Impl {
|
||||
/**
|
||||
* @default '.dimmable'
|
||||
*/
|
||||
dimmable: string;
|
||||
/**
|
||||
* @default '.ui.dimmer'
|
||||
*/
|
||||
dimmer: string;
|
||||
/**
|
||||
* @default '.ui.dimmer > .content, .ui.dimmer > .content > .center'
|
||||
*/
|
||||
content: string;
|
||||
}
|
||||
}
|
||||
|
||||
interface TemplateSettings extends Pick<TemplateSettings._Impl, keyof TemplateSettings._Impl> { }
|
||||
|
||||
namespace TemplateSettings {
|
||||
interface _Impl {
|
||||
dimmer(): JQuery;
|
||||
}
|
||||
}
|
||||
|
||||
interface ClassNameSettings extends Pick<ClassNameSettings._Impl, keyof ClassNameSettings._Impl> { }
|
||||
|
||||
namespace ClassNameSettings {
|
||||
interface _Impl {
|
||||
/**
|
||||
* @default 'active'
|
||||
*/
|
||||
active: string;
|
||||
/**
|
||||
* @default 'dimmable'
|
||||
*/
|
||||
dimmable: string;
|
||||
/**
|
||||
* @default 'dimmed'
|
||||
*/
|
||||
dimmed: string;
|
||||
/**
|
||||
* @default 'disabled'
|
||||
*/
|
||||
disabled: string;
|
||||
/**
|
||||
* @default 'page'
|
||||
*/
|
||||
pageDimmer: string;
|
||||
/**
|
||||
* @default 'hide'
|
||||
*/
|
||||
hide: string;
|
||||
/**
|
||||
* @default 'show'
|
||||
*/
|
||||
show: string;
|
||||
/**
|
||||
* @default 'transition'
|
||||
*/
|
||||
transition: string;
|
||||
}
|
||||
}
|
||||
|
||||
interface ErrorSettings extends Pick<ErrorSettings._Impl, keyof ErrorSettings._Impl> { }
|
||||
|
||||
namespace ErrorSettings {
|
||||
interface _Impl {
|
||||
/**
|
||||
* @default 'The method you called is not defined.'
|
||||
*/
|
||||
method: string;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
11
types/semantic-ui-dimmer/index.d.ts
vendored
Normal file
11
types/semantic-ui-dimmer/index.d.ts
vendored
Normal file
@ -0,0 +1,11 @@
|
||||
// Type definitions for semantic-ui-dimmer 2.2
|
||||
// Project: http://www.semantic-ui.com
|
||||
// Definitions by: Leonard Thieu <https://github.com/leonard-thieu>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.2
|
||||
|
||||
/// <reference types="jquery" />
|
||||
/// <reference path="global.d.ts" />
|
||||
|
||||
declare const dimmer: SemanticUI.Dimmer;
|
||||
export = dimmer;
|
||||
99
types/semantic-ui-dimmer/semantic-ui-dimmer-tests.ts
Normal file
99
types/semantic-ui-dimmer/semantic-ui-dimmer-tests.ts
Normal file
@ -0,0 +1,99 @@
|
||||
function test_dimmer_settings() {
|
||||
$.fn.dimmer.settings.error.method = 'method';
|
||||
$.fn.dimmer.settings.namespace = 'namespace';
|
||||
$.fn.dimmer.settings.name = 'name';
|
||||
$.fn.dimmer.settings.silent = false;
|
||||
$.fn.dimmer.settings.debug = true;
|
||||
$.fn.dimmer.settings.performance = true;
|
||||
$.fn.dimmer.settings.verbose = true;
|
||||
}
|
||||
|
||||
function test_dimmer() {
|
||||
const selector = '.ui.dimmer';
|
||||
$(selector).dimmer('add content', $()) === $();
|
||||
$(selector).dimmer('show') === $();
|
||||
$(selector).dimmer('hide') === $();
|
||||
$(selector).dimmer('toggle') === $();
|
||||
$(selector).dimmer('set opacity', 1) === $();
|
||||
$(selector).dimmer('create') === $();
|
||||
$(selector).dimmer('get duration') === 10;
|
||||
$(selector).dimmer('get dimmer') === $();
|
||||
$(selector).dimmer('has dimmer') === true;
|
||||
$(selector).dimmer('is active') === true;
|
||||
$(selector).dimmer('is animating') === true;
|
||||
$(selector).dimmer('is dimmer') === true;
|
||||
$(selector).dimmer('is dimmable') === true;
|
||||
$(selector).dimmer('is disabled') === true;
|
||||
$(selector).dimmer('is enabled') === true;
|
||||
$(selector).dimmer('is page') === true;
|
||||
$(selector).dimmer('is page dimmer') === true;
|
||||
$(selector).dimmer('set active') === $();
|
||||
$(selector).dimmer('set dimmable') === $();
|
||||
$(selector).dimmer('set dimmed') === $();
|
||||
$(selector).dimmer('set page dimmer') === $();
|
||||
$(selector).dimmer('set disabled') === $();
|
||||
$(selector).dimmer('destroy') === $();
|
||||
$(selector).dimmer('setting', 'debug', undefined) === false;
|
||||
$(selector).dimmer('setting', 'debug') === false;
|
||||
$(selector).dimmer('setting', 'debug', true) === $();
|
||||
$(selector).dimmer('setting', {
|
||||
namespace: 'namespace',
|
||||
name: 'name',
|
||||
silent: false,
|
||||
debug: true,
|
||||
performance: true,
|
||||
verbose: true
|
||||
}) === $();
|
||||
$(selector).dimmer({
|
||||
opacity: 1,
|
||||
variation: 'variation',
|
||||
dimmerName: 'dimmerName',
|
||||
closable: true,
|
||||
on: 'click',
|
||||
useCSS: true,
|
||||
duration: {
|
||||
show: 200,
|
||||
hide: 300
|
||||
},
|
||||
transition: 'fade',
|
||||
onShow() {
|
||||
this === $();
|
||||
},
|
||||
onHide() {
|
||||
this === $();
|
||||
},
|
||||
onChange() {
|
||||
this === $();
|
||||
},
|
||||
selector: {
|
||||
dimmable: '.dimmable',
|
||||
dimmer: '.dimmer',
|
||||
content: '.content'
|
||||
},
|
||||
template: {
|
||||
dimmer() {
|
||||
return $();
|
||||
}
|
||||
},
|
||||
className: {
|
||||
active: 'active',
|
||||
dimmable: 'dimmable',
|
||||
dimmed: 'dimmed',
|
||||
disabled: 'disabled',
|
||||
pageDimmer: 'pageDimmer',
|
||||
hide: 'hide',
|
||||
show: 'show',
|
||||
transition: 'transition'
|
||||
},
|
||||
error: {
|
||||
method: 'method'
|
||||
}
|
||||
}) === $();
|
||||
$(selector).dimmer() === $();
|
||||
}
|
||||
|
||||
import dimmer = require('semantic-ui-dimmer');
|
||||
|
||||
function test_module() {
|
||||
$.fn.dimmer = dimmer;
|
||||
}
|
||||
24
types/semantic-ui-dimmer/tsconfig.json
Normal file
24
types/semantic-ui-dimmer/tsconfig.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6",
|
||||
"dom"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"global.d.ts",
|
||||
"semantic-ui-dimmer-tests.ts"
|
||||
]
|
||||
}
|
||||
7
types/semantic-ui-dimmer/tslint.json
Normal file
7
types/semantic-ui-dimmer/tslint.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"extends": "dtslint/dt.json",
|
||||
"rules": {
|
||||
"no-empty-interface": false,
|
||||
"unified-signatures": false
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user