profectus/TMT-Demo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add options to tab families to style the buttons container

Browse source 
Example usage: adding a "top" property for proper stickying
This commit is contained in:
thepaperpilot 2022-07-03 13:08:09 -05:00
parent 62d23ec699
commit 7345471e8a
2 changed files with 32 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/features/tabs/TabFamily.vue
View file

@ -11,7 +11,11 @@
tabStyle ?? []
]"
>
<Sticky class="tab-buttons-container">
<Sticky
class="tab-buttons-container"
:class="unref(buttonContainerClasses)"
:style="unref(buttonContainerStyle)"
>
<div class="tab-buttons" :class="{ floating }">
<TabButton
v-for="(button, id) in unref(tabs)"
@ -61,7 +65,9 @@ export default defineComponent({
required: true
},
style: processedPropType<StyleValue>(String, Object, Array),
classes: processedPropType<Record<string, boolean>>(Object)
classes: processedPropType<Record<string, boolean>>(Object),
buttonContainerStyle: processedPropType<StyleValue>(String, Object, Array),
buttonContainerClasses: processedPropType<Record<string, boolean>>(Object)
},
components: {
Sticky,

26
src/features/tabs/tabFamily.ts
View file

@ -56,6 +56,8 @@ export interface TabFamilyOptions {
visibility?: Computable<Visibility>;
classes?: Computable<Record<string, boolean>>;
style?: Computable<StyleValue>;
buttonContainerClasses?: Computable<Record<string, boolean>>;
buttonContainerStyle?: Computable<StyleValue>;
}
export interface BaseTabFamily {
@ -140,10 +142,30 @@ export function createTabFamily<T extends TabFamilyOptions>(
setDefault(tabFamily, "visibility", Visibility.Visible);
processComputable(tabFamily as T, "classes");
processComputable(tabFamily as T, "style");
processComputable(tabFamily as T, "buttonContainerClasses");
processComputable(tabFamily as T, "buttonContainerStyle");
tabFamily[GatherProps] = function (this: GenericTabFamily) {
const { visibility, activeTab, selected, tabs, style, classes } = this;
return { visibility, activeTab, selected, tabs, style: unref(style), classes };
const {
visibility,
activeTab,
selected,
tabs,
style,
classes,
buttonContainerClasses,
buttonContainerStyle
} = this;
return {
visibility,
activeTab,
selected,
tabs,
style: unref(style),
classes,
buttonContainerClasses,
buttonContainerStyle
};
};
// This is necessary because board.types is different from T and TabFamily