svelte-wired-types
Version:
Typescript type definition files for wired js with Svelte
378 lines (367 loc) • 17.1 kB
TypeScript
/// <reference path="svelte2tsx/svelte-jsx.d.ts" />
import 'svelte2tsx';
import { WiredInputProps } from './WiredInput';
import { WiredButtonProps } from './WiredButton';
import { WiredCalendarProps } from './WiredCalendar';
import { WiredCardProps } from './WiredCard';
import { WiredCheckboxProps } from './WiredSelect';
import { WiredComboProps } from './WiredSelect';
import { WiredDialogProps } from './WiredCard';
import { WiredDividerProps } from './WiredCard';
import { WiredFabProps } from './WiredButton';
import { WiredImageProps } from './WiredCard';
import { WiredItemProps } from './WiredSelect';
import { WiredLinkProps } from './WiredButton';
import { WiredListboxProps } from './WiredSelect';
import { WiredProgressProps } from './WiredCard';
import { WiredRadioGroupProps } from './WiredSelect';
import { WiredRadioProps } from './WiredSelect';
import { WiredSearchInputProps } from './WiredInput';
import { WiredSliderProps } from './WiredCard';
import { WiredSpinnerProps } from './WiredCard';
import { WiredTabProps } from './WiredSelect';
import { WiredTabsProps } from './WiredSelect';
import { WiredTextareaProps } from './WiredInput';
import { WiredToggleProps } from './WiredSelect';
import { WiredVideoProps } from './WiredVideo';
type SelectedEventHandler = (event:{target:{selected:string}}) => any;
declare global {
namespace svelte.JSX {
/** test text 1 */
interface IntrinsicElements {
/** Hand-drawn sketchy text input web component.
For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
Notice: bind:value does not work.
Use: <wired-input {value} on:input={v=>{value=v.target.value}}/>
*/
'wired-input': WiredInputProps & DOMAttributes<HTMLInputElement> & { style?: string },
/**
* Hand-drawn sketchy Button web component.
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*/
'wired-button': WiredButtonProps & DOMAttributes<HTMLButtonElement> & { style?: string },
/**
* Calendar control with a hand-drawn, wireframe like, style.
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*
* Events:
* - selected - event fired when a date is selected by the user.
*
* Custom CSS Variables
* - --wired-calendar-bg Background color of the calendar. Default white.
* - --wired-calendar-color Calendar sketch line color. Default black.
* - --wired-calendar-selected-color Selected date sketch line color. Default red.
* - --wired-calendar-dimmed-color Font color days not belonging to calendar actual month. Default gray.
*
* eg.:
* \<wired-calendar style="--wired-calendar-bg:#123456;--wired-calendar-color:#BB66BB;color:#FFEECC"/\>
*
*/
'wired-calendar': WiredCalendarProps & DOMAttributes<HTMLSelectElement> & {
/**
* Custom CSS Variables
* - --wired-calendar-bg Background color of the calendar. Default white.
* - --wired-calendar-color Calendar sketch line color. Default black.
* - --wired-calendar-selected-color Selected date sketch line color. Default red.
* - --wired-calendar-dimmed-color Font color days not belonging to calendar actual month. Default gray.
*
* eg.:
* style="--wired-calendar-bg:#123456;--wired-calendar-color:#BB66BB;color:#FFEECC"*/
style?: string,
onselected?:SelectedEventHandler
},
/**
* wired-card is a container for other web elements - with a hand-drawn, wireframe like, look.
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*/
'wired-card': WiredCardProps & DOMAttributes<HTMLDivElement> & { style?: string },
/**
* Hand-drawn sketchy checkbox web component.
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*/
'wired-checkbox': WiredCheckboxProps & DOMAttributes<HTMLInputElement> & { style?: string},
/**
* Combobox control - similar to a native browser select element; with a hand-drawn, wireframe like, style.
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*
* bind:selected does not work. Use on:selected event instead.
*
* Custom CSS Variables
* - --wired-combo-popup-bg Background color of the dropdown when combo selector is open.
* - --wired-item-selected-bg Background color of the selected item
*
* eg.:
* \<wired-combo style="--wired-combo-popup-bg:#123456;--wired-item-selected-bg:#BB66BB;color:#aa00bb"/\>
*/
'wired-combo': WiredComboProps & DOMAttributes<HTMLSelectElement> & {
/**
* Custom CSS Variables
* - --wired-combo-popup-bg Background color of the dropdown when combo selector is open.
* - --wired-item-selected-bg Background color of the selected item
*
* eg.:
* style="--wired-combo-popup-bg:#123456;--wired-item-selected-bg:#BB66BB;color:#aa00bb"
*/
style?: string
onselected?:SelectedEventHandler
},
/**
* Hand-drawn sketchy Dialog web component.
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*
* Custom CSS Properties
* - --wired-dialog-z-index - Sets the z-index of the dialog
*/
'wired-dialog': WiredDialogProps & DOMAttributes<HTMLDivElement> & {
/**
* Custom CSS Properties
* - --wired-dialog-z-index - Sets the z-index of the dialog
*
* eg. style="--wired-dialog-z-index:9999;"
*/
style?: string
},
/**
* Hand-drawn sketchy line to divide sections
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*/
'wired-divider': WiredDividerProps & DOMAttributes<HTMLDivElement> & { style?: string },
/**
* Hand-drawn sketchy Floating Action Button (FAB)
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*
* Custom CSS Properties
* - --wired-fab-bg-color - Background color of the fab. Default value is #018786. Foreground color is set by setting the color css property.
*/
'wired-fab': WiredFabProps & DOMAttributes<HTMLButtonElement> & {
/**
* Custom CSS Properties
* - --wired-fab-bg-color - Background color of the fab. Default value is #018786. Foreground color is set by setting the color css property.
*
* eg.: style="--wire-fab-bg-color:black;color:#ffffff"
*/
style?: string
},
/**
* This is a hand-drawn sketchy round button with an image placed at the center. Image could also be in icon, more specifically an icon as as (@material/mwc-icon)[https://www.npmjs.com/package/@material/mwc-icon].
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*
* Custom CSS Variables
* - --wired-icon-size Numeric size of the icon. Default is 24 (px).
* - --wired-icon-bg-color Background color.
*/
'wired-icon-button': WiredFabProps & DOMAttributes<HTMLButtonElement> & {
/**
* Custom CSS Variables
* - --wired-icon-size Numeric size of the icon. Default is 24 (px).
* - --wired-icon-bg-color Background color.
* */
style?: string
},
/**
* wired-image displays an image and draws a sketchy border around it.
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*/
'wired-image': WiredImageProps & DOMAttributes<HTMLDivElement> & { style?: string },
/**
* wired-item is a list item used by Wired components like wired-combo and wired-list-box.
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*/
'wired-item': WiredItemProps & DOMAttributes<HTMLDivElement> & { style?: string },
/**
* Hand-drawn sketchy Anchor/Link web component.
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*
* Custom CSS Properties
* - --wired-link-decoration-color - Color of the sketchy underline of the link. Default value is blue. Foreground color is set by setting the color css property.
*/
'wired-link': WiredLinkProps & DOMAttributes<HTMLLinkElement> & {
/**
* Custom CSS Properties
* - --wired-link-decoration-color - Color of the sketchy underline of the link. Default value is blue. Foreground color is set by setting the color css property.
* */
style?: string
},
/**
* A listbox control with Wired hand-drawn styling. The selected item is highlighted. Can be vertical (default) or horizontal.
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*
* Custom CSS Variables
* - --wired-item-selected-bg Background color of the selected item.
* - --wired-item-selected-color Text color of the selected item.
*/
'wired-listbox': WiredListboxProps & DOMAttributes<HTMLButtonElement> & {
/**
* Custom CSS Variables
* - --wired-item-selected-bg Background color of the selected item.
* - --wired-item-selected-color Text color of the selected item.
*/
style?: string,
onselected?:SelectedEventHandler
},
/**
* Hand-drawn sketchy progress bar web component.
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*
* Custom CSS Variables
* - --wired-progress-label-color Color of the label. Default is black.
* - --wired-progress-label-background Backgroind of label. Default is rgba(255,255,255,0.9).
* - --wired-progress-font-size Font size of the label. Default is 14px
* - --wired-progress-color Color of the progress bar. Default is rgba(0, 0, 200, 0.8).
*
* e.g. in your svelte-file:
*
* \<style\>
*
* wired-progress {
* --wired-progress-label-color:orange;
* --wired-progress-label-background:green;
* color:red;
* --wired-progress-color:green;
* }
*
* \</style\>
*/
'wired-progress': WiredProgressProps & DOMAttributes<HTMLDivElement> & {
/**
* Custom CSS Variables
* - --wired-progress-label-color Color of the label. Default is black.
* - --wired-progress-label-background Backgroind of label. Default is rgba(255,255,255,0.9).
* - --wired-progress-font-size Font size of the label. Default is 14px
* - --wired-progress-color Color of the progress bar. Default is rgba(0, 0, 200, 0.8).
*
* eg. style="--wired-progress-label-color:red;color:#009911;--wired-progress-color:rgb(0,0,0);"
* */
style?: string
},
/**
* Allows user to select at most one radio button from a set. Works with [wired-radio](https://github.com/rough-stuff/wired-elements/tree/master/packages/wired-radio).
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*/
'wired-radio-group': WiredRadioGroupProps & DOMAttributes<HTMLInputElement> & { style?: string,
onselected?:SelectedEventHandler },
/**
* Hand-drawn sketchy radio button web component. Usually used with (wired-radio-group)[https://github.com/rough-stuff/wired-elements/tree/master/packages/wired-radio-group].
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*
* Custom CSS Variables
* - --wired-radio-icon-color Color of the radio button. Default is currentColor.
*/
'wired-radio': WiredRadioProps & DOMAttributes<HTMLInputElement> & {
/**
* Custom CSS Variables
* - --wired-radio-icon-color Color of the radio button. Default is currentColor.
*/
style?: string },
/**
* Hand-drawn sketchy search text input web component.
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*/
'wired-search-input': WiredSearchInputProps & DOMAttributes<HTMLInputElement> & { style?: string },
/**
* Hand-drawn sketchy slider web component which allows user to select a value from a range by moving the slider thumb.
*
* Range can be set using the min, max value. Default range is 0-100.
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*
* Custom CSS Variables
* - --wired-slider-knob-zero-color Color of the knob when the value is at minimum.
* - --wired-slider-knob-color Color of the knob when the value is NOT at minimum.
* - --wired-slider-bar-color Color of the bar on which the knob slides.
*/
'wired-slider': WiredSliderProps & DOMAttributes<HTMLInputElement> & {
/**
* Custom CSS Variables
* - --wired-slider-knob-zero-color Color of the knob when the value is at minimum.
* - --wired-slider-knob-color Color of the knob when the value is NOT at minimum.
* - --wired-slider-bar-color Color of the bar on which the knob slides.
*/
style?: string },
/**
* Hand-drawn sketchy spinner to show progress or a pending task.
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*
* Styling
* - Change the color style of the spinner element to change its color.
*/
'wired-spinner': WiredSpinnerProps & DOMAttributes<HTMLDivElement> & { style?: string },
/**
* Hand-drawn sketchy Tabs web component.
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*/
'wired-tab': WiredTabProps & DOMAttributes<HTMLButtonElement> & { style?: string },
/**
* Hand-drawn sketchy Tabs web component.
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*
* Custom CSS Variables
* - --wired-item-selected-bg Background color of the selected tab.
* - --wired-item-selected-color Text color of the selected tab.
*/
'wired-tabs': WiredTabsProps & DOMAttributes<HTMLButtonElement> & {
/**
* Custom CSS Variables
* - --wired-item-selected-bg Background color of the selected tab.
* - --wired-item-selected-color Text color of the selected tab.
*/
style?: string },
/**
* Hand-drawn sketchy multi-line text input web component.
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*/
'wired-textarea': WiredTextareaProps & DOMAttributes<HTMLInputElement> & { style?: string },
/**
* Hand-drawn sketchy toggle button / switch.
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*
* Custom CSS Variables
* - --wired-toggle-off-color Color of the knob when in off (false) position. Default value is gray.
* - --wired-toggle-on-color Color of the knob when in on (true) position. Default value is rgb(63, 81, 181).
*/
'wired-toggle': WiredToggleProps & DOMAttributes<HTMLInputElement> & {
/**
* Custom CSS Variables
* - --wired-toggle-off-color Color of the knob when in off (false) position. Default value is gray.
* - --wired-toggle-on-color Color of the knob when in on (true) position. Default value is rgb(63, 81, 181).
*/
style?: string },
/**
* A hand-drawn sketchy looking video player component.
*
* For demo and view the complete set of wired-elememts: [wiredjs.com](https://wiredjs.com)
*
* Custom CSS Variables
* - --wired-video-highlight-color Color of the progress bar and the knob on the volume control.
*/
'wired-video': WiredVideoProps & DOMAttributes<HTMLButtonElement> & {
/**
* Custom CSS Variables
* - --wired-video-highlight-color Color of the progress bar and the knob on the volume control.
*/
style?: string }
}
}
}