thepaperpilot/chromatic-lattice
1
0
Fork 0
Code Issues Pull requests Releases 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 ?? [] tabStyle ?? []
]" ]"
> >
<Sticky class="tab-buttons-container"> <Sticky
class="tab-buttons-container"
:class="unref(buttonContainerClasses)"
:style="unref(buttonContainerStyle)"
>
<div class="tab-buttons" :class="{ floating }"> <div class="tab-buttons" :class="{ floating }">
<TabButton <TabButton
v-for="(button, id) in unref(tabs)" v-for="(button, id) in unref(tabs)"
@ -61,7 +65,9 @@ export default defineComponent({
required: true required: true
}, },
style: processedPropType<StyleValue>(String, Object, Array), 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: { components: {
Sticky, Sticky,

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

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