@stories-js/vue

{ "$schema": "http://json.schemastore.org/web-types", "framework": "vue", "name": "@stories-js/vue", "version": "0.2.0", "contributions": { "html": { "types-syntax": "typescript", "description-markup": "markdown", "tags": [ { "name": "StoriesAddonActions", "doc-url": "https://storiesjs.org/api/ries-addon-actions", "description": "The stories-addon-actions displays a panel with data received by event handler (callback) arguments in your stories.", "source": { "module": "@stories-js/core/dist/types/addons/addon-actions/addon-actions.d.ts", "symbol": "oriesAddonActions" }, "attributes": [], "slots": [], "events": [] }, { "name": "StoriesAddonControls", "doc-url": "https://storiesjs.org/api/ries-addon-controls", "description": "The stories-addon-controls helps you interact with components via changing arguments.", "source": { "module": "@stories-js/core/dist/types/addons/addon-controls/addon-controls.d.ts", "symbol": "oriesAddonControls" }, "attributes": [], "slots": [], "events": [] }, { "name": "StoriesAddons", "doc-url": "https://storiesjs.org/api/ries-addons", "description": "The stories-addons is a wrapping component implemented for helping in addons management.", "source": { "module": "@stories-js/core/dist/types/addons/addons/addons.d.ts", "symbol": "oriesAddons" }, "attributes": [], "slots": [], "events": [] }, { "name": "StoriesApp", "doc-url": "https://storiesjs.org/api/ries-app", "description": "The stories-app is a main Stories Framework's application.", "source": { "module": "@stories-js/core/dist/types/components/app/app.d.ts", "symbol": "oriesApp" }, "attributes": [ { "name": "modules", "description": "Story Modules", "required": false, "default": "[]", "value": { "kind": "expression", "type": "StoryModule[]" } }, { "name": "store", "description": "Story Modules", "required": false, "default": "state", "value": { "kind": "expression", "type": "StoriesState & NotificationsState & LayoutState & AddonsState" } } ], "slots": [], "events": [ { "name": "storyChange", "description": "", "arguments": [ { "name": "detail", "type": "{ storyId: string; kinds: string[]; storyName: string; storyFn: StoryFn<AnyFramework, Args>; component?: any; subcomponents?: Record<string, any>; decorators?: DecoratorFunction<AnyFramework, Args>[]; args: Partial<Args>; argTypes: Partial<ArgTypes<Args>>; parameters?: Parameters; }" } ] }, { "name": "storyContextChange", "description": "", "arguments": [ { "name": "detail", "type": "{ component?: any; subcomponents?: Record<string, any>; } & StoryUpdate<Args>" } ] } ] }, { "name": "StoriesBadge", "doc-url": "https://storiesjs.org/api/ries-badge", "description": "The stories-badge is inline block element uses for notification of how many items associated with another element.", "source": { "module": "@stories-js/core/dist/types/components/badge/badge.d.ts", "symbol": "oriesBadge" }, "attributes": [ { "name": "color", "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).", "required": false, "value": { "kind": "expression", "type": "string" } } ], "slots": [], "events": [] }, { "name": "StoriesButton", "doc-url": "https://storiesjs.org/api/ries-button", "description": "The stories-button is an styled HTML button element displays text, icons, or both.", "source": { "module": "@stories-js/core/dist/types/components/button/button.d.ts", "symbol": "oriesButton" }, "attributes": [ { "name": "button-type", "description": "The type of button.", "required": false, "default": "'button'", "value": { "kind": "expression", "type": "string" } }, { "name": "color", "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "disabled", "description": "If `true`, the user cannot interact with the button.", "required": false, "default": "false", "value": { "kind": "expression", "type": "boolean" } }, { "name": "expand", "description": "Set to `\"block\"` for a full-width button or to `\"full\"` for a full-width button\nwithout left and right borders.", "required": false, "value": { "kind": "expression", "type": "\"block\" | \"full\"" } }, { "name": "fill", "description": "Set to `\"clear\"` for a transparent button, to `\"outline\"` for a transparent\nbutton with a border, or to `\"solid\"`. The default style is `\"solid\"` except inside of\na toolbar, where the default is `\"clear\"`.", "required": false, "value": { "kind": "expression", "type": "\"clear\" | \"default\" | \"outline\" | \"solid\"" } }, { "name": "href", "description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "router-direction", "description": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.", "required": false, "default": "'forward'", "value": { "kind": "expression", "type": "\"back\" | \"forward\" | \"root\"" } }, { "name": "shape", "description": "The button shape.", "required": false, "value": { "kind": "expression", "type": "\"round\"" } }, { "name": "size", "description": "The button size.", "required": false, "value": { "kind": "expression", "type": "\"default\" | \"large\" | \"small\"" } }, { "name": "strong", "description": "If `true`, activates a button with a heavier font weight.", "required": false, "default": "false", "value": { "kind": "expression", "type": "boolean" } }, { "name": "target", "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "type", "description": "The type of the button.", "required": false, "default": "'button'", "value": { "kind": "expression", "type": "\"button\" | \"reset\" | \"submit\"" } } ], "slots": [], "events": [ { "name": "storiesBlur", "description": "Emitted when the button loses focus.", "arguments": [ { "name": "detail", "type": "void" } ] }, { "name": "storiesClick", "description": "Emitted when the button click.", "arguments": [ { "name": "detail", "type": "void" } ] }, { "name": "storiesFocus", "description": "Emitted when the button has focus.", "arguments": [ { "name": "detail", "type": "void" } ] } ] }, { "name": "StoriesButtons", "doc-url": "https://storiesjs.org/api/ries-buttons", "description": "The stories-buttons is an wrapping container for another buttons.", "source": { "module": "@stories-js/core/dist/types/components/buttons/buttons.d.ts", "symbol": "oriesButtons" }, "attributes": [ { "name": "collapse", "description": "If true, buttons will disappear when its\nparent toolbar has fully collapsed if the toolbar\nis not the first toolbar. If the toolbar is the\nfirst toolbar, the buttons will be hidden and will\nonly be shown once all toolbars have fully collapsed.", "required": false, "default": "false", "value": { "kind": "expression", "type": "boolean" } } ], "slots": [], "events": [] }, { "name": "StoriesCheckbox", "doc-url": "https://storiesjs.org/api/ries-checkbox", "description": "The stories-checkbox is a styled HTML checkboxed input element.", "source": { "module": "@stories-js/core/dist/types/components/checkbox/checkbox.d.ts", "symbol": "oriesCheckbox" }, "attributes": [ { "name": "checked", "description": "If `true`, the checkbox is selected.", "required": false, "default": "false", "value": { "kind": "expression", "type": "boolean" } }, { "name": "color", "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "disabled", "description": "If `true`, the user cannot interact with the checkbox.", "required": false, "default": "false", "value": { "kind": "expression", "type": "boolean" } }, { "name": "indeterminate", "description": "If `true`, the checkbox will visually appear as indeterminate.", "required": false, "default": "false", "value": { "kind": "expression", "type": "boolean" } }, { "name": "name", "description": "The name of the control, which is submitted with the form data.", "required": false, "default": "this.inputId", "value": { "kind": "expression", "type": "string" } }, { "name": "value", "description": "The value of the checkbox does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\nit's only used when the checkbox participates in a native `<form>`.", "required": false, "default": "'on'", "value": { "kind": "expression", "type": "any" } } ], "slots": [], "events": [ { "name": "storiesBlur", "description": "Emitted when the checkbox loses focus.", "arguments": [ { "name": "detail", "type": "void" } ] }, { "name": "storiesChange", "description": "Emitted when the checked property has changed.", "arguments": [ { "name": "detail", "type": "CheckboxChangeEventDetail<any>" } ] }, { "name": "storiesFocus", "description": "Emitted when the checkbox has focus.", "arguments": [ { "name": "detail", "type": "void" } ] } ] }, { "name": "StoriesCol", "doc-url": "https://storiesjs.org/api/ries-col", "description": "The stories-col is a container for content within a grid. You put it inside of a row and it always expand to fill the space of a row.", "source": { "module": "@stories-js/core/dist/types/components/col/col.d.ts", "symbol": "oriesCol" }, "attributes": [ { "name": "offset", "description": "The amount to offset the column, in terms of how many columns it should shift to the end\nof the total available.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "offset-lg", "description": "The amount to offset the column for lg screens, in terms of how many columns it should shift\nto the end of the total available.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "offset-md", "description": "The amount to offset the column for md screens, in terms of how many columns it should shift\nto the end of the total available.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "offset-sm", "description": "The amount to offset the column for sm screens, in terms of how many columns it should shift\nto the end of the total available.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "offset-xl", "description": "The amount to offset the column for xl screens, in terms of how many columns it should shift\nto the end of the total available.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "offset-xs", "description": "The amount to offset the column for xs screens, in terms of how many columns it should shift\nto the end of the total available.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "pull", "description": "The amount to pull the column, in terms of how many columns it should shift to the start of\nthe total available.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "pull-lg", "description": "The amount to pull the column for lg screens, in terms of how many columns it should shift\nto the start of the total available.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "pull-md", "description": "The amount to pull the column for md screens, in terms of how many columns it should shift\nto the start of the total available.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "pull-sm", "description": "The amount to pull the column for sm screens, in terms of how many columns it should shift\nto the start of the total available.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "pull-xl", "description": "The amount to pull the column for xl screens, in terms of how many columns it should shift\nto the start of the total available.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "pull-xs", "description": "The amount to pull the column for xs screens, in terms of how many columns it should shift\nto the start of the total available.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "push", "description": "The amount to push the column, in terms of how many columns it should shift to the end\nof the total available.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "push-lg", "description": "The amount to push the column for lg screens, in terms of how many columns it should shift\nto the end of the total available.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "push-md", "description": "The amount to push the column for md screens, in terms of how many columns it should shift\nto the end of the total available.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "push-sm", "description": "The amount to push the column for sm screens, in terms of how many columns it should shift\nto the end of the total available.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "push-xl", "description": "The amount to push the column for xl screens, in terms of how many columns it should shift\nto the end of the total available.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "push-xs", "description": "The amount to push the column for xs screens, in terms of how many columns it should shift\nto the end of the total available.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "size", "description": "The size of the column, in terms of how many columns it should take up out of the total\navailable. If `\"auto\"` is passed, the column will be the size of its content.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "size-lg", "description": "The size of the column for lg screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "size-md", "description": "The size of the column for md screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "size-sm", "description": "The size of the column for sm screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "size-xl", "description": "The size of the column for xl screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "size-xs", "description": "The size of the column for xs screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content.", "required": false, "value": { "kind": "expression", "type": "string" } } ], "slots": [], "events": [] }, { "name": "StoriesFooter", "doc-url": "https://storiesjs.org/api/ries-footer", "description": "The stories-footer is a root component, always appears at the bottom of the page.", "source": { "module": "@stories-js/core/dist/types/components/footer/footer.d.ts", "symbol": "oriesFooter" }, "attributes": [], "slots": [], "events": [] }, { "name": "StoriesGrid", "doc-url": "https://storiesjs.org/api/ries-grid", "description": "The stories-grid is a container designed on mobile-first flexbox system for building custom layouts. A layout based on a 12 columns by default, but could be easily customized to any number via CSS customization. Columns will expand to fill the row, and will resize to fit additional columns.", "source": { "module": "@stories-js/core/dist/types/components/grid/grid.d.ts", "symbol": "oriesGrid" }, "attributes": [ { "name": "fixed", "description": "If `true`, the grid will have a fixed width based on the screen size.", "required": false, "default": "false", "value": { "kind": "expression", "type": "boolean" } } ], "slots": [], "events": [] }, { "name": "StoriesIcon", "doc-url": "https://storiesjs.org/api/ries-icon", "description": "The stories-icon is an easy and performant way to use icons in your Stories application. It dynamically loads only visible SVG icons on demand.", "source": { "module": "@stories-js/core/dist/types/components/icon/icon.d.ts", "symbol": "oriesIcon" }, "attributes": [ { "name": "name", "description": "Icon name", "required": false, "value": { "kind": "expression", "type": "string" } } ], "slots": [], "events": [] }, { "name": "StoriesInput", "doc-url": "https://storiesjs.org/api/ries-input", "description": "The stories-input component is a styled and enchanced HTML input element. It supports only standard text input events and types such as \"text\", \"password\", \"email\", \"number\", \"search\", \"tel\", and \"url\".", "source": { "module": "@stories-js/core/dist/types/components/input/input.d.ts", "symbol": "oriesInput" }, "attributes": [ { "name": "autofocus", "description": "This Boolean attribute lets you specify that a form control should have input focus when the page loads.", "required": false, "default": "false", "value": { "kind": "expression", "type": "boolean" } }, { "name": "clear-input", "description": "If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.", "required": false, "default": "false", "value": { "kind": "expression", "type": "boolean" } }, { "name": "color", "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "debounce", "description": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.", "required": false, "default": "0", "value": { "kind": "expression", "type": "number" } }, { "name": "disabled", "description": "If `true`, the user cannot interact with the input.", "required": false, "default": "false", "value": { "kind": "expression", "type": "boolean" } }, { "name": "inputmode", "description": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.", "required": false, "value": { "kind": "expression", "type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"" } }, { "name": "max", "description": "The maximum value, which must not be less than its minimum (min attribute) value.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "maxlength", "description": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.", "required": false, "value": { "kind": "expression", "type": "number" } }, { "name": "min", "description": "The minimum value, which must not be greater than its maximum (max attribute) value.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "minlength", "description": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.", "required": false, "value": { "kind": "expression", "type": "number" } }, { "name": "name", "description": "The name of the control, which is submitted with the form data.", "required": false, "default": "this.inputId", "value": { "kind": "expression", "type": "string" } }, { "name": "pattern", "description": "A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "placeholder", "description": "Instructional text that shows before the input has a value.\nThis property applies only when the `type` property is set to `\"email\"`,\n`\"number\"`, `\"password\"`, `\"search\"`, `\"tel\"`, `\"text\"`, or `\"url\"`, otherwise it is ignored.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "readonly", "description": "If `true`, the user cannot modify the value.", "required": false, "default": "false", "value": { "kind": "expression", "type": "boolean" } }, { "name": "required", "description": "If `true`, the user must fill in a value before submitting a form.", "required": false, "default": "false", "value": { "kind": "expression", "type": "boolean" } }, { "name": "size", "description": "The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.", "required": false, "value": { "kind": "expression", "type": "number" } }, { "name": "step", "description": "Works with the min and max attributes to limit the increments at which a value can be set.\nPossible values are: `\"any\"` or a positive floating point number.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "type", "description": "The type of control to display. The default type is text.", "required": false, "default": "'text'", "value": { "kind": "expression", "type": "\"date\" | \"datetime-local\" | \"email\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"" } }, { "name": "value", "description": "The value of the input.", "required": false, "default": "''", "value": { "kind": "expression", "type": "number | string" } } ], "slots": [], "events": [ { "name": "storiesBlur", "description": "Emitted when the input loses focus.", "arguments": [ { "name": "detail", "type": "FocusEvent" } ] }, { "name": "storiesChange", "description": "Emitted when the value has changed.", "arguments": [ { "name": "detail", "type": "InputChangeEventDetail" } ] }, { "name": "storiesFocus", "description": "Emitted when the input has focus.", "arguments": [ { "name": "detail", "type": "FocusEvent" } ] }, { "name": "on", "description": "Emitted when a keyboard input occurred.", "arguments": [ { "name": "detail", "type": "InputEvent" } ] } ] }, { "name": "StoriesLabel", "doc-url": "https://storiesjs.org/api/ries-label", "description": "The stories-label is a wrapper element displays text, icons, or both. You can position it as inline, fixed, stacked, or floating element and will usually use it with another components such stories-item, stories-input, stories-toggle, etc.", "source": { "module": "@stories-js/core/dist/types/components/label/label.d.ts", "symbol": "oriesLabel" }, "attributes": [ { "name": "color", "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "position", "description": "The position determines where and how the label behaves inside an item.", "required": false, "default": "'fixed'", "value": { "kind": "expression", "type": "\"fixed\" | \"floating\" | \"stacked\"" } } ], "slots": [], "events": [] }, { "name": "StoriesPreview", "doc-url": "https://storiesjs.org/api/ries-preview", "description": "The stories-preview is a wrapper container for stories-renderer component. It utilises stories-zoom component to manage visual size of the rendering content.", "source": { "module": "@stories-js/core/dist/types/components/preview/preview.d.ts", "symbol": "oriesPreview" }, "attributes": [], "slots": [], "events": [] }, { "name": "StoriesRouter", "doc-url": "https://storiesjs.org/api/ries-router", "description": "The stories-router is a component managing showing content in another components based on the browser's URL. It doent change DOM and only coordinates content in navigation outlets such as stories-nav, stories-tabs, and stories-router-outlet.", "source": { "module": "@stories-js/core/dist/types/components/router/router.d.ts", "symbol": "oriesRouter" }, "attributes": [], "slots": [], "events": [] }, { "name": "StoriesRow", "doc-url": "https://storiesjs.org/api/ries-row", "description": "The stories-row is a horizontal component of the grid system look after the columns are positioned properly.", "source": { "module": "@stories-js/core/dist/types/components/row/row.d.ts", "symbol": "oriesRow" }, "attributes": [], "slots": [], "events": [] }, { "name": "StoriesSearchbar", "doc-url": "https://storiesjs.org/api/ries-searchbar", "description": "The stories-searchbar is a text field with an icon that can be used to search through stories.", "source": { "module": "@stories-js/core/dist/types/components/searchbar/searchbar.d.ts", "symbol": "oriesSearchbar" }, "attributes": [ { "name": "cancel-button-icon", "description": "Set the cancel button icon. Only applies to `md` mode.\nDefaults to `\"arrow-back-sharp\"`.", "required": false, "default": "'arrow-back-sharp'", "value": { "kind": "expression", "type": "string" } }, { "name": "clear-icon", "description": "Set the clear icon. Defaults to `\"close-circle\"` for `ios` and `\"close-sharp\"` for `md`.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "color", "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "debounce", "description": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.", "required": false, "default": "250", "value": { "kind": "expression", "type": "number" } }, { "name": "disabled", "description": "If `true`, the user cannot interact with the input.", "required": false, "default": "false", "value": { "kind": "expression", "type": "boolean" } }, { "name": "inputmode", "description": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.", "required": false, "value": { "kind": "expression", "type": "\"decimal\" | \"email\" | \"none\" | \"numeric\" | \"search\" | \"tel\" | \"text\" | \"url\"" } }, { "name": "placeholder", "description": "Set the input's placeholder.\n`placeholder` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Stories>` would become\n`<Stories>`", "required": false, "default": "'Search'", "value": { "kind": "expression", "type": "string" } }, { "name": "search-icon", "description": "The icon to use as the search icon. Defaults to `\"search-outline\"` in\n`ios` mode and `\"search-sharp\"` in `md` mode.", "required": false, "value": { "kind": "expression", "type": "string" } }, { "name": "show-cancel-button", "description": "Sets the behavior for the cancel button. Defaults to `\"never\"`.\nSetting to `\"focus\"` shows the cancel button on focus.\nSetting to `\"never\"` hides the cancel button.\nSetting to `\"always\"` shows the cancel button regardless\nof focus state.", "required": false, "default": "'never'", "value": { "kind": "expression", "type": "\"always\" | \"focus\" | \"never\"" } }, { "name": "show-clear-button", "description": "Sets the behavior for the clear button. Defaults to `\"focus\"`.\nSetting to `\"focus\"` shows the clear button on focus if the\ninput is not empty.\nSetting to `\"never\"` hides the clear button.\nSetting to `\"always\"` shows the clear button regardless\nof focus state, but only if the input is not empty.", "required": false, "default": "'always'", "value": { "kind": "expression", "type": "\"always\" | \"focus\" | \"never\"" } }, { "name": "type", "description": "Set the type of the input.", "required": false, "default": "'search'", "value": { "kind": "expression", "type": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"" } }, { "name": "value", "description": "the value of the searchbar.", "required": false, "default": "''", "value": { "kind": "expression", "type": "string" } } ], "slots": [], "events": [ { "name": "storiesBlur", "description": "Emitted when the input loses focus.", "arguments": [ { "name": "detail", "type": "void" } ] }, { "name": "storiesCancel", "description": "Emitted when the cancel button is clicked.", "arguments": [ { "name": "detail", "type": "void" } ] }, { "name": "storiesChange", "description": "Emitted when the value has changed.", "arguments": [ { "name": "detail", "type": "SearchbarChangeEventDetail" } ] }, { "name": "storiesClear", "description": "Emitted when the clear input button is clicked.", "arguments": [ { "name": "detail", "type": "void" } ] }, { "name": "storiesFocus", "description": "Emitted when the input has focus.", "arguments": [ { "name": "detail", "type": "void" } ] }, { "name": "storiesInput", "description": "Emitted when a keyboard input occurred.", "arguments": [ { "name": "detail", "type": "KeyboardEvent" } ] } ] }, { "name": "StoriesSidebar", "doc-url": "https://storiesjs.org/api/ries-sidebar", "description": "The stories-sidebar displays collection of names of stories. Every story's name is the link your can click to navigate to story.", "source": { "module": "@stories-js/core/dist/types/components/sidebar/sidebar.d.ts", "symbol": "oriesSidebar" }, "attributes": [], "slots": [], "events": [] }, { "name": "StoriesSplitPane", "doc-url": "https://storiesjs.org/api/ries-split-pane", "description": "The stories-split-panel is a component to split content vertically or horizontally.", "source": { "module": "@stories-js/core/dist/types/components/split-pane/split-pane.d.ts", "symbol": "oriesSplitPane" }, "attributes": [ { "name": "default-size", "description": "", "required": false, "default": "0", "value": { "kind": "expression", "type": "number" } }, { "name": "resizing", "description": "", "required": false, "value": { "kind": "expression", "type": "boolean" } }, { "name": "min-size", "description": "", "required": false, "default": "0", "value": { "kind": "expression", "type": "number" } }, { "name": "split", "description": "", "required": false, "value": { "kind": "expression", "type": "\"horizontal\" | \"vertical\"" } } ], "slots": [], "events": [ { "name": "storiesSizeChange", "description": "", "arguments": [ { "name": "detail", "type": "number" } ] } ] }, { "name": "StoriesTab", "doc-url": "https://storiesjs.org/api/ries-tab", "description": "The stories-tab is a child component of a stories-tab. \n\n> Note: This component should only be used with vanilla or Stencil