diff --git a/zero_true/__init__.py b/zero_true/__init__.py index 778ab9e1..f71b5190 100644 --- a/zero_true/__init__.py +++ b/zero_true/__init__.py @@ -19,4 +19,5 @@ from zt_backend.models.components.html import HTML, pygwalker from zt_backend.models.state.state import state from zt_backend.models.state.state import global_state -from zt_backend.models.components.chat_ui import chat_ui \ No newline at end of file +from zt_backend.models.components.chat_ui import chat_ui +from zt_backend.models.components.expansion_panel import ExpansionPanel, ExpansionPanels, ExpansionPanelTitle, ExpansionPanelText \ No newline at end of file diff --git a/zt_backend/models/components/expansion_panel.py b/zt_backend/models/components/expansion_panel.py new file mode 100644 index 00000000..da1942ef --- /dev/null +++ b/zt_backend/models/components/expansion_panel.py @@ -0,0 +1,89 @@ +from pydantic import Field, field_validator +from typing import List, Optional, Union +from zt_backend.models.components.zt_component import ZTComponent +from zt_backend.models.components.validations import validate_color + + +class ExpansionPanels(ZTComponent): + """ + A group of expansion panels where the title is shown and the desciption can be hidden or expanded to view. + It is useful for reducing vertical space with large amounts of information + """ + + component: str = Field("v-expansion-panels", description="Vue component name") + childComponents: List[str] = Field( + [], + description="List of child component ids to be placed within the panels group", + ) + value: Union[List[Union[int, None]], None, int] = Field( + [], description="Values of the panels selected to expand indexed at 0" + ) + multiple: bool = Field( + False, description="Determines if multiple expansions are allowed" + ) + color: str = Field("primary", description="Background color of the panel") + disabled: bool = Field( + False, description="Determines if the expansion panels are disabled" + ) + readonly: bool = Field( + False, description="Determines if the expansion panels are read-only" + ) + + @field_validator("color") + def validate_color(cls, color): + return validate_color(color) + + +class ExpansionPanel(ZTComponent): + """Expansion Panel component""" + + component: str = Field("v-expansion-panel", description="Vue component name") + childComponents: List[str] = Field( + [], description="List of child component ids to be placed within the panel" + ) + title: Optional[str] = Field("", description="Specify a title text for the panel") + text: Optional[str] = Field("", description="Specify content text for the panel") + color: str = Field("primary", description="Background color of the expansion panel") + disabled: bool = Field( + False, description="Determines if the expansion panel is disabled" + ) + readonly: bool = Field( + False, description="Determines if the expansion panel is read-only" + ) + + @field_validator("color") + def validate_color(cls, color): + return validate_color(color) + + +class ExpansionPanelTitle(ZTComponent): + """Expansion Panel Title component is used to modify the features of Expansion Panel's title. Wraps the #title slot""" + + component: str = Field( + "v-expansion-title", description="Vue component name for expansion panel title" + ) + childComponents: List[str] = Field( + [], + description="List of child component ids to be placed within the title. This could be a v-text component", + ) + color: str = Field("primary", description="Background color of the expansion panel") + readonly: bool = Field( + False, description="Determines if the expansion panels is read-only" + ) + + @field_validator("color") + def validate_color(cls, color): + return validate_color(color) + + +class ExpansionPanelText(ZTComponent): + """Expansion Panel Text component is used to modify the features of Expansion Panel's text. Wraps the #text slot""" + + component: str = Field( + "v-expansion-panel-text", + description="Vue component name for expansion panels text", + ) + childComponents: List[str] = Field( + [], + description="List of child component ids to be placed within the Text. This could be a v-text component", + ) diff --git a/zt_backend/models/notebook.py b/zt_backend/models/notebook.py index 3e85c52d..09e1bbf6 100644 --- a/zt_backend/models/notebook.py +++ b/zt_backend/models/notebook.py @@ -18,6 +18,7 @@ from zt_backend.models.components.autocomplete import Autocomplete from zt_backend.models.components.card import Card from zt_backend.models.components.timer import Timer +from zt_backend.models.components.expansion_panel import ExpansionPanel, ExpansionPanels, ExpansionPanelTitle, ExpansionPanelText def deserialize_component(data: Dict[str, Any]) -> ZTComponent: component_map = { @@ -34,6 +35,10 @@ def deserialize_component(data: Dict[str, Any]) -> ZTComponent: "v-autocomplete": Autocomplete, "v-card": Card, "v-timer": Timer, + "v-expansion-panels": ExpansionPanels, + "v-expansion-panel": ExpansionPanel, + "v-expansion-title": ExpansionPanelTitle, + "v-expansion-panel-text": ExpansionPanelText, "plotly-plot": PlotlyComponent # add other component types here } diff --git a/zt_frontend/src/components/ComponentWrapper.vue b/zt_frontend/src/components/ComponentWrapper.vue index bef19b42..1cbd38fd 100644 --- a/zt_frontend/src/components/ComponentWrapper.vue +++ b/zt_frontend/src/components/ComponentWrapper.vue @@ -48,6 +48,10 @@ import { VImg, VAutocomplete, VCard, + VExpansionPanels, + VExpansionPanel, + VExpansionPanelTitle, + VExpansionPanelText } from "vuetify/lib/components/index.mjs"; import { VDataTable } from "vuetify/components/VDataTable"; import TextComponent from "@/components/TextComponent.vue"; @@ -68,6 +72,10 @@ export default { "v-autocomplete": VAutocomplete, "v-card": VCard, "v-text": TextComponent, + "v-expansion-panels": VExpansionPanels, + "v-expansion-panel": VExpansionPanel, + "v-expansion-title": VExpansionPanelTitle, + "v-expansion-panel-text": VExpansionPanelText, "plotly-plot": PlotlyPlot, }, emits: ["runCode"],