1 line
22 KiB
JavaScript
1 line
22 KiB
JavaScript
import{_ as t,c as e,o as a,N as o}from"./chunks/framework.0799945b.js";const y=JSON.parse('{"title":"Module: features/tabs/tabFamily","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"api/modules/features/tabs/tabFamily.md","lastUpdated":null}'),l={name:"api/modules/features/tabs/tabFamily.md"},r=o('<h1 id="module-features-tabs-tabfamily" tabindex="-1">Module: features/tabs/tabFamily <a class="header-anchor" href="#module-features-tabs-tabfamily" aria-label="Permalink to "Module: features/tabs/tabFamily""></a></h1><h2 id="interfaces" tabindex="-1">Interfaces <a class="header-anchor" href="#interfaces" aria-label="Permalink to "Interfaces""></a></h2><h3 id="basetabbutton" tabindex="-1">BaseTabButton <a class="header-anchor" href="#basetabbutton" aria-label="Permalink to "BaseTabButton""></a></h3><p>• <strong>BaseTabButton</strong>: <code>Object</code></p><p>The properties that are added onto a processed <a href="./tabFamily#tabbuttonoptions">TabButtonOptions</a> to create an <a href="./tabFamily#tabbutton">TabButton</a>.</p><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><code>[Component]</code></td><td style="text-align:left;"><a href="./../feature#genericcomponent"><code>GenericComponent</code></a></td><td style="text-align:left;">The Vue component used to render this feature.</td></tr><tr><td style="text-align:left;"><code>type</code></td><td style="text-align:left;">typeof <a href="./tabFamily#tabbuttontype"><code>TabButtonType</code></a></td><td style="text-align:left;">A symbol that helps identify features of the same type.</td></tr></tbody></table><h4 id="defined-in" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/tabs/tabFamily.ts#L58" target="_blank" rel="noreferrer">profectus/src/features/tabs/tabFamily.ts:58</a></p><hr><h3 id="basetabfamily" tabindex="-1">BaseTabFamily <a class="header-anchor" href="#basetabfamily" aria-label="Permalink to "BaseTabFamily""></a></h3><p>• <strong>BaseTabFamily</strong>: <code>Object</code></p><p>The properties that are added onto a processed <a href="./tabFamily#tabfamilyoptions">TabFamilyOptions</a> to create an <a href="./tabFamily#tabfamily">TabFamily</a>.</p><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><code>[Component]</code></td><td style="text-align:left;"><a href="./../feature#genericcomponent"><code>GenericComponent</code></a></td><td style="text-align:left;">The Vue component used to render this feature.</td></tr><tr><td style="text-align:left;"><code>[GatherProps]</code></td><td style="text-align:left;">() => <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type" target="_blank" rel="noreferrer"><code>Record</code></a><<code>string</code>, <code>unknown</code>></td><td style="text-align:left;">A function to gather the props the vue component requires for this feature.</td></tr><tr><td style="text-align:left;"><code>activeTab</code></td><td style="text-align:left;"><code>Ref</code><<code>null</code> | <a href="./../feature#coercablecomponent"><code>CoercableComponent</code></a> | <a href="./tab#generictab"><code>GenericTab</code></a>></td><td style="text-align:left;">The currently active tab, if any.</td></tr><tr><td style="text-align:left;"><code>id</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates.</td></tr><tr><td style="text-align:left;"><code>selected</code></td><td style="text-align:left;"><a href="./../../game/persistence#persistent"><code>Persistent</code></a><<code>string</code>></td><td style="text-align:left;">The name of the tab that is currently active.</td></tr><tr><td style="text-align:left;"><code>tabs</code></td><td style="text-align:left;"><a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type" target="_blank" rel="noreferrer"><code>Record</code></a><<code>string</code>, <a href="./tabFamily#tabbuttonoptions"><code>TabButtonOptions</code></a>></td><td style="text-align:left;">All the tabs within this family.</td></tr><tr><td style="text-align:left;"><code>type</code></td><td style="text-align:left;">typeof <a href="./tabFamily#tabfamilytype"><code>TabFamilyType</code></a></td><td style="text-align:left;">A symbol that helps identify features of the same type.</td></tr></tbody></table><h4 id="defined-in-1" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-1" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/tabs/tabFamily.ts#L108" target="_blank" rel="noreferrer">profectus/src/features/tabs/tabFamily.ts:108</a></p><hr><h3 id="tabbuttonoptions" tabindex="-1">TabButtonOptions <a class="header-anchor" href="#tabbuttonoptions" aria-label="Permalink to "TabButtonOptions""></a></h3><p>• <strong>TabButtonOptions</strong>: <code>Object</code></p><p>An object that configures a <a href="./tabFamily#tabbutton">TabButton</a>.</p><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><code>classes?</code></td><td style="text-align:left;"><a href="./../../util/computed#computable"><code>Computable</code></a><<a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type" target="_blank" rel="noreferrer"><code>Record</code></a><<code>string</code>, <code>boolean</code>>></td><td style="text-align:left;">Dictionary of CSS classes to apply to this feature.</td></tr><tr><td style="text-align:left;"><code>display</code></td><td style="text-align:left;"><a href="./../../util/computed#computable"><code>Computable</code></a><<a href="./../feature#coercablecomponent"><code>CoercableComponent</code></a>></td><td style="text-align:left;">The label on this button.</td></tr><tr><td style="text-align:left;"><code>glowColor?</code></td><td style="text-align:left;"><a href="./../../util/computed#computable"><code>Computable</code></a><<code>string</code>></td><td style="text-align:left;">The color of the glow effect to display when this button is active.</td></tr><tr><td style="text-align:left;"><code>style?</code></td><td style="text-align:left;"><a href="./../../util/computed#computable"><code>Computable</code></a><<a href="./../feature#stylevalue"><code>StyleValue</code></a>></td><td style="text-align:left;">CSS to apply to this feature.</td></tr><tr><td style="text-align:left;"><code>tab</code></td><td style="text-align:left;"><a href="./../../util/computed#computable"><code>Computable</code></a><<a href="./../feature#coercablecomponent"><code>CoercableComponent</code></a> | <a href="./tab#generictab"><code>GenericTab</code></a>></td><td style="text-align:left;">The tab to display when this button is clicked.</td></tr><tr><td style="text-align:left;"><code>visibility?</code></td><td style="text-align:left;"><a href="./../../util/computed#computable"><code>Computable</code></a><<code>boolean</code> | <a href="./../feature#visibility"><code>Visibility</code></a>></td><td style="text-align:left;">Whether this tab button should be visible.</td></tr></tbody></table><h4 id="defined-in-2" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-2" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/tabs/tabFamily.ts#L40" target="_blank" rel="noreferrer">profectus/src/features/tabs/tabFamily.ts:40</a></p><hr><h3 id="tabfamilyoptions" tabindex="-1">TabFamilyOptions <a class="header-anchor" href="#tabfamilyoptions" aria-label="Permalink to "TabFamilyOptions""></a></h3><p>• <strong>TabFamilyOptions</strong>: <code>Object</code></p><p>An object that configures a <a href="./tabFamily#tabfamily">TabFamily</a>.</p><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><code>buttonContainerClasses?</code></td><td style="text-align:left;"><a href="./../../util/computed#computable"><code>Computable</code></a><<a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type" target="_blank" rel="noreferrer"><code>Record</code></a><<code>string</code>, <code>boolean</code>>></td><td style="text-align:left;">A dictionary of CSS classes to apply to the list of buttons for changing tabs.</td></tr><tr><td style="text-align:left;"><code>buttonContainerStyle?</code></td><td style="text-align:left;"><a href="./../../util/computed#computable"><code>Computable</code></a><<a href="./../feature#stylevalue"><code>StyleValue</code></a>></td><td style="text-align:left;">CSS to apply to the list of buttons for changing tabs.</td></tr><tr><td style="text-align:left;"><code>classes?</code></td><td style="text-align:left;"><a href="./../../util/computed#computable"><code>Computable</code></a><<a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type" target="_blank" rel="noreferrer"><code>Record</code></a><<code>string</code>, <code>boolean</code>>></td><td style="text-align:left;">Dictionary of CSS classes to apply to this feature.</td></tr><tr><td style="text-align:left;"><code>style?</code></td><td style="text-align:left;"><a href="./../../util/computed#computable"><code>Computable</code></a><<a href="./../feature#stylevalue"><code>StyleValue</code></a>></td><td style="text-align:left;">CSS to apply to this feature.</td></tr><tr><td style="text-align:left;"><code>visibility?</code></td><td style="text-align:left;"><a href="./../../util/computed#computable"><code>Computable</code></a><<code>boolean</code> | <a href="./../feature#visibility"><code>Visibility</code></a>></td><td style="text-align:left;">Whether this tab button should be visible.</td></tr></tbody></table><h4 id="defined-in-3" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-3" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/tabs/tabFamily.ts#L92" target="_blank" rel="noreferrer">profectus/src/features/tabs/tabFamily.ts:92</a></p><h2 id="type-aliases" tabindex="-1">Type Aliases <a class="header-anchor" href="#type-aliases" aria-label="Permalink to "Type Aliases""></a></h2><h3 id="generictabbutton" tabindex="-1">GenericTabButton <a class="header-anchor" href="#generictabbutton" aria-label="Permalink to "GenericTabButton""></a></h3><p>Ƭ <strong>GenericTabButton</strong>: <a href="./../feature#replace"><code>Replace</code></a><<a href="./tabFamily#tabbutton"><code>TabButton</code></a><<a href="./tabFamily#tabbuttonoptions"><code>TabButtonOptions</code></a>>, { <code>visibility</code>: <a href="./../../util/computed#processedcomputable"><code>ProcessedComputable</code></a><<a href="./../feature#visibility"><code>Visibility</code></a> | <code>boolean</code>> }></p><p>A type that matches any valid <a href="./tabFamily#tabbutton">TabButton</a> object.</p><h4 id="defined-in-4" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-4" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/tabs/tabFamily.ts#L82" target="_blank" rel="noreferrer">profectus/src/features/tabs/tabFamily.ts:82</a></p><hr><h3 id="generictabfamily" tabindex="-1">GenericTabFamily <a class="header-anchor" href="#generictabfamily" aria-label="Permalink to "GenericTabFamily""></a></h3><p>Ƭ <strong>GenericTabFamily</strong>: <a href="./../feature#replace"><code>Replace</code></a><<a href="./tabFamily#tabfamily"><code>TabFamily</code></a><<a href="./tabFamily#tabfamilyoptions"><code>TabFamilyOptions</code></a>>, { <code>visibility</code>: <a href="./../../util/computed#processedcomputable"><code>ProcessedComputable</code></a><<a href="./../feature#visibility"><code>Visibility</code></a> | <code>boolean</code>> }></p><p>A type that matches any valid <a href="./tabFamily#tabfamily">TabFamily</a> object.</p><h4 id="defined-in-5" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-5" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/tabs/tabFamily.ts#L138" target="_blank" rel="noreferrer">profectus/src/features/tabs/tabFamily.ts:138</a></p><hr><h3 id="tabbutton" tabindex="-1">TabButton <a class="header-anchor" href="#tabbutton" aria-label="Permalink to "TabButton""></a></h3><p>Ƭ <strong>TabButton</strong><<code>T</code>>: <a href="./../feature#replace"><code>Replace</code></a><<code>T</code> & <a href="./tabFamily#basetabbutton"><code>BaseTabButton</code></a>, { <code>classes</code>: <a href="./../../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"classes"</code>]> ; <code>display</code>: <a href="./../../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"display"</code>]> ; <code>glowColor</code>: <a href="./../../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"glowColor"</code>]> ; <code>style</code>: <a href="./../../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"style"</code>]> ; <code>tab</code>: <a href="./../../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"tab"</code>]> ; <code>visibility</code>: <a href="./../../util/computed#getcomputabletypewithdefault"><code>GetComputableTypeWithDefault</code></a><<code>T</code>[<code>"visibility"</code>], <a href="./../feature#visible"><code>Visible</code></a>> }></p><p>An object that represents a button that can be clicked to change tabs in a tabbed interface.</p><p><strong><code>See</code></strong></p><p><a href="./tabFamily#tabfamily">TabFamily</a></p><h4 id="type-parameters" tabindex="-1">Type parameters <a class="header-anchor" href="#type-parameters" aria-label="Permalink to "Type parameters""></a></h4><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th></tr></thead><tbody><tr><td style="text-align:left;"><code>T</code></td><td style="text-align:left;">extends <a href="./tabFamily#tabbuttonoptions"><code>TabButtonOptions</code></a></td></tr></tbody></table><h4 id="defined-in-6" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-6" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/tabs/tabFamily.ts#L69" target="_blank" rel="noreferrer">profectus/src/features/tabs/tabFamily.ts:69</a></p><hr><h3 id="tabfamily" tabindex="-1">TabFamily <a class="header-anchor" href="#tabfamily" aria-label="Permalink to "TabFamily""></a></h3><p>Ƭ <strong>TabFamily</strong><<code>T</code>>: <a href="./../feature#replace"><code>Replace</code></a><<code>T</code> & <a href="./tabFamily#basetabfamily"><code>BaseTabFamily</code></a>, { <code>tabs</code>: <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type" target="_blank" rel="noreferrer"><code>Record</code></a><<code>string</code>, <a href="./tabFamily#generictabbutton"><code>GenericTabButton</code></a>> ; <code>visibility</code>: <a href="./../../util/computed#getcomputabletypewithdefault"><code>GetComputableTypeWithDefault</code></a><<code>T</code>[<code>"visibility"</code>], <a href="./../feature#visible"><code>Visible</code></a>> }></p><p>An object that represents a tabbed interface.</p><p><strong><code>See</code></strong></p><p><a href="./tabFamily#tabfamily">TabFamily</a></p><h4 id="type-parameters-1" tabindex="-1">Type parameters <a class="header-anchor" href="#type-parameters-1" aria-label="Permalink to "Type parameters""></a></h4><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th></tr></thead><tbody><tr><td style="text-align:left;"><code>T</code></td><td style="text-align:left;">extends <a href="./tabFamily#tabfamilyoptions"><code>TabFamilyOptions</code></a></td></tr></tbody></table><h4 id="defined-in-7" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-7" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/tabs/tabFamily.ts#L129" target="_blank" rel="noreferrer">profectus/src/features/tabs/tabFamily.ts:129</a></p><h2 id="variables" tabindex="-1">Variables <a class="header-anchor" href="#variables" aria-label="Permalink to "Variables""></a></h2><h3 id="tabbuttontype" tabindex="-1">TabButtonType <a class="header-anchor" href="#tabbuttontype" aria-label="Permalink to "TabButtonType""></a></h3><p>• <code>Const</code> <strong>TabButtonType</strong>: typeof <a href="./tabFamily#tabbuttontype"><code>TabButtonType</code></a></p><p>A symbol used to identify <a href="./tabFamily#tabbutton">TabButton</a> features.</p><h4 id="defined-in-8" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-8" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/tabs/tabFamily.ts#L33" target="_blank" rel="noreferrer">profectus/src/features/tabs/tabFamily.ts:33</a></p><hr><h3 id="tabfamilytype" tabindex="-1">TabFamilyType <a class="header-anchor" href="#tabfamilytype" aria-label="Permalink to "TabFamilyType""></a></h3><p>• <code>Const</code> <strong>TabFamilyType</strong>: typeof <a href="./tabFamily#tabfamilytype"><code>TabFamilyType</code></a></p><p>A symbol used to identify <a href="./tabFamily#tabfamily">TabFamily</a> features.</p><h4 id="defined-in-9" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-9" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/tabs/tabFamily.ts#L35" target="_blank" rel="noreferrer">profectus/src/features/tabs/tabFamily.ts:35</a></p><h2 id="functions" tabindex="-1">Functions <a class="header-anchor" href="#functions" aria-label="Permalink to "Functions""></a></h2><h3 id="createtabfamily" tabindex="-1">createTabFamily <a class="header-anchor" href="#createtabfamily" aria-label="Permalink to "createTabFamily""></a></h3><p>▸ <strong>createTabFamily</strong><<code>T</code>>(<code>tabs</code>, <code>optionsFunc?</code>): <a href="./tabFamily#tabfamily"><code>TabFamily</code></a><<code>T</code>></p><p>Lazily creates a tab family with the given options.</p><h5 id="type-parameters-2" tabindex="-1">Type parameters <a class="header-anchor" href="#type-parameters-2" aria-label="Permalink to "Type parameters""></a></h5><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th></tr></thead><tbody><tr><td style="text-align:left;"><code>T</code></td><td style="text-align:left;">extends <a href="./tabFamily#tabfamilyoptions"><code>TabFamilyOptions</code></a></td></tr></tbody></table><h5 id="parameters" tabindex="-1">Parameters <a class="header-anchor" href="#parameters" aria-label="Permalink to "Parameters""></a></h5><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><code>tabs</code></td><td style="text-align:left;"><a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type" target="_blank" rel="noreferrer"><code>Record</code></a><<code>string</code>, () => <a href="./tabFamily#tabbuttonoptions"><code>TabButtonOptions</code></a>></td><td style="text-align:left;">-</td></tr><tr><td style="text-align:left;"><code>optionsFunc?</code></td><td style="text-align:left;"><a href="./../feature#optionsfunc"><code>OptionsFunc</code></a><<code>T</code>, <a href="./tabFamily#basetabfamily"><code>BaseTabFamily</code></a>, <a href="./tabFamily#generictabfamily"><code>GenericTabFamily</code></a>></td><td style="text-align:left;">Tab family options.</td></tr></tbody></table><h5 id="returns" tabindex="-1">Returns <a class="header-anchor" href="#returns" aria-label="Permalink to "Returns""></a></h5><p><a href="./tabFamily#tabfamily"><code>TabFamily</code></a><<code>T</code>></p><h4 id="defined-in-10" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-10" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/425e85a/src/features/tabs/tabFamily.ts#L149" target="_blank" rel="noreferrer">profectus/src/features/tabs/tabFamily.ts:149</a></p>',85),d=[r];function i(c,n,s,b,f,h){return a(),e("div",null,d)}const u=t(l,[["render",i]]);export{y as __pageData,u as default};
|