From 6d879a21d9c06a2a4739443066932cac08aa5217 Mon Sep 17 00:00:00 2001 From: Harshita Poojary Date: Thu, 27 Jun 2024 15:40:35 -0700 Subject: [PATCH 1/2] fix: expansion panels component --- zero_true/__init__.py | 3 +- .../models/components/expansion_panel.py | 91 +++++++++++++++++++ zt_backend/models/notebook.py | 5 + .../src/components/ComponentWrapper.vue | 8 ++ 4 files changed, 106 insertions(+), 1 deletion(-) create mode 100644 zt_backend/models/components/expansion_panel.py 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..d3d84039 --- /dev/null +++ b/zt_backend/models/components/expansion_panel.py @@ -0,0 +1,91 @@ +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: Optional[bool] = Field( + False, description="Determines if multiple expansions are allowed" + ) + color: Optional[str] = Field("primary", description="Background color of the panel") + disabled: Optional[bool] = Field( + False, description="Determines if the expansion panels are disabled" + ) + readonly: Optional[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: Optional[str] = Field( + "primary", description="Background color of the expansion panel" + ) + disabled: Optional[bool] = Field( + False, description="Determines if the expansion panel is disabled" + ) + readonly: Optional[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: Optional[str] = Field( + "primary", description="Background color of the expansion panel" + ) + readonly: Optional[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"], From 183a5f94395ed152727de846bfb3850496b5080e Mon Sep 17 00:00:00 2001 From: Harshita Poojary Date: Thu, 27 Jun 2024 15:46:22 -0700 Subject: [PATCH 2/2] fix: removed optional fields --- .../models/components/expansion_panel.py | 28 +++++++++---------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/zt_backend/models/components/expansion_panel.py b/zt_backend/models/components/expansion_panel.py index d3d84039..da1942ef 100644 --- a/zt_backend/models/components/expansion_panel.py +++ b/zt_backend/models/components/expansion_panel.py @@ -18,14 +18,14 @@ class ExpansionPanels(ZTComponent): value: Union[List[Union[int, None]], None, int] = Field( [], description="Values of the panels selected to expand indexed at 0" ) - multiple: Optional[bool] = Field( + multiple: bool = Field( False, description="Determines if multiple expansions are allowed" ) - color: Optional[str] = Field("primary", description="Background color of the panel") - disabled: Optional[bool] = Field( + color: str = Field("primary", description="Background color of the panel") + disabled: bool = Field( False, description="Determines if the expansion panels are disabled" ) - readonly: Optional[bool] = Field( + readonly: bool = Field( False, description="Determines if the expansion panels are read-only" ) @@ -43,13 +43,11 @@ class ExpansionPanel(ZTComponent): ) title: Optional[str] = Field("", description="Specify a title text for the panel") text: Optional[str] = Field("", description="Specify content text for the panel") - color: Optional[str] = Field( - "primary", description="Background color of the expansion panel" - ) - disabled: Optional[bool] = Field( + color: str = Field("primary", description="Background color of the expansion panel") + disabled: bool = Field( False, description="Determines if the expansion panel is disabled" ) - readonly: Optional[bool] = Field( + readonly: bool = Field( False, description="Determines if the expansion panel is read-only" ) @@ -65,12 +63,11 @@ class ExpansionPanelTitle(ZTComponent): "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: Optional[str] = Field( - "primary", description="Background color of the expansion panel" + [], + description="List of child component ids to be placed within the title. This could be a v-text component", ) - readonly: Optional[bool] = Field( + color: str = Field("primary", description="Background color of the expansion panel") + readonly: bool = Field( False, description="Determines if the expansion panels is read-only" ) @@ -87,5 +84,6 @@ class ExpansionPanelText(ZTComponent): 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" + [], + description="List of child component ids to be placed within the Text. This could be a v-text component", )