From 14a01d9d7952a71cda0c59d2df962ff42a6032d0 Mon Sep 17 00:00:00 2001 From: Essa Chawla Date: Fri, 21 Jun 2024 12:37:20 -0700 Subject: [PATCH 01/13] fix: List Component --- zero_true/__init__.py | 5 +- zt_backend/models/components/list.py | 69 +++++++++++++++++++ zt_backend/models/generate_schema.py | 4 +- zt_backend/models/notebook.py | 11 ++- .../src/components/ComponentWrapper.vue | 31 +++++++++ zt_frontend/src/types/list.d.ts | 60 ++++++++++++++++ 6 files changed, 177 insertions(+), 3 deletions(-) create mode 100644 zt_backend/models/components/list.py create mode 100644 zt_frontend/src/types/list.d.ts diff --git a/zero_true/__init__.py b/zero_true/__init__.py index 778ab9e1..6e6814c2 100644 --- a/zero_true/__init__.py +++ b/zero_true/__init__.py @@ -19,4 +19,7 @@ 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.list import ListComponent,ListItem,ListGroup,ListItemTitle, ListItemSubtitle,ListSubheader + + diff --git a/zt_backend/models/components/list.py b/zt_backend/models/components/list.py new file mode 100644 index 00000000..1ec0580b --- /dev/null +++ b/zt_backend/models/components/list.py @@ -0,0 +1,69 @@ +from pydantic import Field +from typing import List, Optional, Union +from zt_backend.models.components.zt_component import ZTComponent + +class ListComponent(ZTComponent): + """A card is a container for components that should be displayed together. + Any child components will be placed in their own row within the card and take up the full width""" + + component: str = Field("v-list", description="Vue component name") + childComponents: List[str] = Field([], description="List of child component ids to be placed within the card") + color: str = Field(None, description="Background color of the card") + elevation: int = Field(None, ge=0, le=24, description="Elevation level of the card. Must be between 0 and 24") + density: str = Field(None, enum=['default','comfortable','compact'], description="Density of the component") + width: Union[int,str] = Field('100%', description="Width of the List") + height: Union[int,str] = Field('100%', description="Height of the List") + +class ListItem(ZTComponent): + component: str = Field("v-list-item", description="Vue component name") + title: str=Field("", description="item title") + color: str = Field(None, description="Background color of the card") + elevation: int = Field(None, ge=0, le=24, description="Elevation level of the card. Must be between 0 and 24") + density: str = Field("default", enum=['default','comfortable','compact'], description="Density of the component") + width: Union[int,str] = Field('100%', description="Width of the List") + height: Union[int,str] = Field('100%', description="Height of the List") + value: str= Field("", description="value for List Item") + disabled: bool= Field(False, description="removes ability to click List Item") + childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItem") + + +class ListGroup(ZTComponent): + component: str = Field("v-list-group", description="Vue component name") + title: str=Field("", description="item title") + color: str = Field(None, description="Background color of the card") + density: str = Field("default", enum=['default','comfortable','compact'], description="Density of the component") + width: Union[int,str] = Field('100%', description="Width of the List") + height: Union[int,str] = Field('100%', description="Height of the List") + value: str= Field("", description="Expands / Collapse the list-group.") + disabled: bool= Field(False, description="removes ability to click List Item") + collapse_icon: str= Field("$collapse", description="Icon to display when the list item is expanded.") + expand_icon: str= Field("$expand", description="Icon to display when the list item is collapsed.") + childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListGroup") + ##subgroup:bool= Field(False, description="subgroup for List Group") + +class ListItemTitle(ZTComponent): + component: str = Field("v-list-item-title", description="Vue component name") + childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItemTitle") + tag: str= Field("div", description="specify a custom tag used on root element") + +class ListItemSubtitle(ZTComponent): + component: str = Field("v-list-item-subtitle", description="Vue component name") + childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItemTitle") + opacity: Union[int,str]= Field("50%", description="opacity for subtitle") + tag: str= Field("div", description="specify a custom tag used on root element") + +class ListSubheader(ZTComponent): + component: str = Field("v-list-subheader", description="Vue component name") + inset: bool= Field(False, description="inset for Subheader") + sticky: bool=Field(False,description="sticky for subehader") + tag: str= Field("div", description="specify a custom tag used on root element") + title: str=Field("", description="title for subheader") + childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListComponent") + + + + + + + + diff --git a/zt_backend/models/generate_schema.py b/zt_backend/models/generate_schema.py index 27ce4147..7e6637e3 100644 --- a/zt_backend/models/generate_schema.py +++ b/zt_backend/models/generate_schema.py @@ -20,6 +20,7 @@ from .components.timer import Timer from .components.iframe import iFrame from .components.html import HTML +from .components.list import ListComponent import json def generate_json(model, name): @@ -62,4 +63,5 @@ def generate_schema(): generate_json(Text,'text') generate_json(Timer,'timer') generate_json(iFrame,'iframe') - generate_json(HTML,'html') \ No newline at end of file + generate_json(HTML,'html') + generate_json(ListComponent,'list') \ No newline at end of file diff --git a/zt_backend/models/notebook.py b/zt_backend/models/notebook.py index 3e85c52d..5eabf7ef 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.list import ListComponent, ListItem, ListGroup, ListItemTitle, ListItemSubtitle, ListSubheader def deserialize_component(data: Dict[str, Any]) -> ZTComponent: component_map = { @@ -34,7 +35,15 @@ def deserialize_component(data: Dict[str, Any]) -> ZTComponent: "v-autocomplete": Autocomplete, "v-card": Card, "v-timer": Timer, - "plotly-plot": PlotlyComponent + "plotly-plot": PlotlyComponent, + "v-list": ListComponent, + "v-list-item": ListItem, + "v-list-group":ListGroup, + "v-list-item-title":ListItemTitle, + "v-list-item-subtitle":ListItemSubtitle, + "v-list-subheader":ListSubheader + + # add other component types here } component_class = data.get("component") diff --git a/zt_frontend/src/components/ComponentWrapper.vue b/zt_frontend/src/components/ComponentWrapper.vue index bef19b42..bbd086a2 100644 --- a/zt_frontend/src/components/ComponentWrapper.vue +++ b/zt_frontend/src/components/ComponentWrapper.vue @@ -48,11 +48,18 @@ import { VImg, VAutocomplete, VCard, + VList, + VListItem, + VListGroup, + VListItemTitle, + VListItemSubtitle, + VListSubheader } from "vuetify/lib/components/index.mjs"; import { VDataTable } from "vuetify/components/VDataTable"; import TextComponent from "@/components/TextComponent.vue"; import PlotlyPlot from "@/components/PlotlyComponent.vue"; + export default { components: { "v-slider": VSlider, @@ -69,6 +76,13 @@ export default { "v-card": VCard, "v-text": TextComponent, "plotly-plot": PlotlyPlot, + "v-list":VList, + "v-list-item": VListItem, + "v-list-group": VListGroup, + "v-list-item-title":VListItemTitle, + "v-list-item-subtitle":VListItemSubtitle, + "v-list-subheader":VListSubheader + }, emits: ["runCode"], props: { @@ -115,6 +129,23 @@ export default { ), }; }, + getEventBindings(component: any) { + if (component.component === "v-list") { + return {}; + } + + return { + [component.triggerEvent]: () => + this.runCode(true, component.id, component.value), + keydown: ($event: any) => + this.handleEnterPress( + $event, + component.id, + component.component, + component.value + ), + }; + }, handleEnterPress(e: any, id: string, component_type: any, value: any) { // Run code when Enter is pressed in a text, number or text are field diff --git a/zt_frontend/src/types/list.d.ts b/zt_frontend/src/types/list.d.ts new file mode 100644 index 00000000..32307039 --- /dev/null +++ b/zt_frontend/src/types/list.d.ts @@ -0,0 +1,60 @@ +/* eslint-disable */ +/** + * This file was automatically generated by json-schema-to-typescript. + * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file, + * and run json-schema-to-typescript to regenerate this file. + */ + +/** + * Unique id for a component + */ +export type Id = string; +/** + * Optional variable name associated with a component + */ +export type VariableName = string; +/** + * Vue component name + */ +export type Component = string; +/** + * List of child component ids to be placed within the card + */ +export type Childcomponents = string[]; +/** + * Background color of the card + */ +export type Color = string; +/** + * Elevation level of the card. Must be between 0 and 24 + */ +export type Elevation = number; +/** + * Density of the component + */ +export type Density = "default" | "comfortable" | "compact"; +/** + * Width of the List + */ +export type Width = number | string; +/** + * Height of the List + */ +export type Height = number | string; + +/** + * A card is a container for components that should be displayed together. + * Any child components will be placed in their own row within the card and take up the full width + */ +export interface ListComponent { + id: Id; + variable_name?: VariableName; + component?: Component; + childComponents?: Childcomponents; + color?: Color; + elevation?: Elevation; + density?: Density; + width?: Width; + height?: Height; + [k: string]: unknown; +} From 57ad56c93df4cb2e15ba163de9d61d27653eaf7e Mon Sep 17 00:00:00 2001 From: Harshita Poojary Date: Fri, 21 Jun 2024 16:31:52 -0700 Subject: [PATCH 02/13] fix: list component --- zt_backend/models/components/list.py | 61 +++++++++++++--------------- 1 file changed, 28 insertions(+), 33 deletions(-) diff --git a/zt_backend/models/components/list.py b/zt_backend/models/components/list.py index 1ec0580b..7936ceed 100644 --- a/zt_backend/models/components/list.py +++ b/zt_backend/models/components/list.py @@ -3,34 +3,34 @@ from zt_backend.models.components.zt_component import ZTComponent class ListComponent(ZTComponent): - """A card is a container for components that should be displayed together. - Any child components will be placed in their own row within the card and take up the full width""" - - component: str = Field("v-list", description="Vue component name") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the card") - color: str = Field(None, description="Background color of the card") - elevation: int = Field(None, ge=0, le=24, description="Elevation level of the card. Must be between 0 and 24") - density: str = Field(None, enum=['default','comfortable','compact'], description="Density of the component") + """List the Primary components holding the items in the scorllable format""" + component: str = Field("v-list", description="Vue component name for List") + childComponents: List[str] = Field([], description="List of child component ids to be placed within the List") + color: str = Field(None, description="Background color of the List") + elevation: int = Field(None, ge=0, le=24, description="Elevation level of the List. Must be between 0 and 24") + density: str = Field(None, enum=['default','comfortable','compact'], description="Density of the List") width: Union[int,str] = Field('100%', description="Width of the List") height: Union[int,str] = Field('100%', description="Height of the List") class ListItem(ZTComponent): - component: str = Field("v-list-item", description="Vue component name") + """List Item helps define properties of individual items in the list""" + component: str = Field("v-list-item", description="Vue component name for List Item") title: str=Field("", description="item title") - color: str = Field(None, description="Background color of the card") - elevation: int = Field(None, ge=0, le=24, description="Elevation level of the card. Must be between 0 and 24") - density: str = Field("default", enum=['default','comfortable','compact'], description="Density of the component") - width: Union[int,str] = Field('100%', description="Width of the List") - height: Union[int,str] = Field('100%', description="Height of the List") + color: str = Field(None, description="Background color of the List item") + elevation: int = Field(None, ge=0, le=24, description="Elevation level of the List item. Must be between 0 and 24") + density: str = Field("default", enum=['default','comfortable','compact'], description="Density of the List Item: default | comfortable | compact") + width: Union[int,str] = Field('100%', description="Width of the List item") + height: Union[int,str] = Field('100%', description="Height of the List item") value: str= Field("", description="value for List Item") disabled: bool= Field(False, description="removes ability to click List Item") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItem") + childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItem. List title, subtitle come as the child components of the list item") class ListGroup(ZTComponent): - component: str = Field("v-list-group", description="Vue component name") - title: str=Field("", description="item title") - color: str = Field(None, description="Background color of the card") + """List Group is used to group multiple list items in one category""" + component: str = Field("v-list-group", description="Vue component name for List group") + title: str=Field("", description="Title of the List Group") + color: str = Field(None, description="Background color of the List Group") density: str = Field("default", enum=['default','comfortable','compact'], description="Density of the component") width: Union[int,str] = Field('100%', description="Width of the List") height: Union[int,str] = Field('100%', description="Height of the List") @@ -38,32 +38,27 @@ class ListGroup(ZTComponent): disabled: bool= Field(False, description="removes ability to click List Item") collapse_icon: str= Field("$collapse", description="Icon to display when the list item is expanded.") expand_icon: str= Field("$expand", description="Icon to display when the list item is collapsed.") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListGroup") + childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListGroup. List Items come as child Components of the Group") ##subgroup:bool= Field(False, description="subgroup for List Group") class ListItemTitle(ZTComponent): - component: str = Field("v-list-item-title", description="Vue component name") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItemTitle") + """List Item Title is used to specify the title of the Lsit Item. Use Text component to provide the title details and pass it to the child component of List Item.""" + component: str = Field("v-list-item-title", description="Vue component name for List item title") + childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItemTitle. Mention v-test component to show the text of title") tag: str= Field("div", description="specify a custom tag used on root element") class ListItemSubtitle(ZTComponent): - component: str = Field("v-list-item-subtitle", description="Vue component name") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItemTitle") + """List Item SubtitleTitle is used to specify the Subtitle of the List Item. Use Text component to provide the text details of the subtitle and pass it to the child component of List Item""" + component: str = Field("v-list-item-subtitle", description="Vue component name for List Item Subtitle") + childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItemTitle. Mention v-test component to show the text of Subtitle") opacity: Union[int,str]= Field("50%", description="opacity for subtitle") tag: str= Field("div", description="specify a custom tag used on root element") class ListSubheader(ZTComponent): - component: str = Field("v-list-subheader", description="Vue component name") + """List SubHeader is used to specify the Sub Header of the List. Use Text component to provide the title details and pass it to the child component of List.""" + component: str = Field("v-list-subheader", description="Vue component name for List SubHeader ") inset: bool= Field(False, description="inset for Subheader") sticky: bool=Field(False,description="sticky for subehader") tag: str= Field("div", description="specify a custom tag used on root element") title: str=Field("", description="title for subheader") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListComponent") - - - - - - - - + childComponents: List[str] = Field([], description="List of child component ids to be placed within the List Subheader. Mention v-text component to show title for subheader") \ No newline at end of file From 97cb0e5c9c23181358928a3364d3ee0a1baf9293 Mon Sep 17 00:00:00 2001 From: Harshita Poojary Date: Fri, 21 Jun 2024 16:47:32 -0700 Subject: [PATCH 03/13] fix: formatting list file --- zt_backend/models/components/list.py | 148 +++++++++++++++++++-------- 1 file changed, 106 insertions(+), 42 deletions(-) diff --git a/zt_backend/models/components/list.py b/zt_backend/models/components/list.py index 7936ceed..e77bca67 100644 --- a/zt_backend/models/components/list.py +++ b/zt_backend/models/components/list.py @@ -2,63 +2,127 @@ from typing import List, Optional, Union from zt_backend.models.components.zt_component import ZTComponent + class ListComponent(ZTComponent): """List the Primary components holding the items in the scorllable format""" + component: str = Field("v-list", description="Vue component name for List") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the List") + childComponents: List[str] = Field( + [], description="List of child component ids to be placed within the List" + ) color: str = Field(None, description="Background color of the List") - elevation: int = Field(None, ge=0, le=24, description="Elevation level of the List. Must be between 0 and 24") - density: str = Field(None, enum=['default','comfortable','compact'], description="Density of the List") - width: Union[int,str] = Field('100%', description="Width of the List") - height: Union[int,str] = Field('100%', description="Height of the List") + elevation: int = Field( + None, + ge=0, + le=24, + description="Elevation level of the List. Must be between 0 and 24", + ) + density: str = Field( + None, + enum=["default", "comfortable", "compact"], + description="Density of the List", + ) + width: Union[int, str] = Field("100%", description="Width of the List") + height: Union[int, str] = Field("100%", description="Height of the List") + -class ListItem(ZTComponent): +class ListItem(ZTComponent): """List Item helps define properties of individual items in the list""" - component: str = Field("v-list-item", description="Vue component name for List Item") - title: str=Field("", description="item title") + + component: str = Field( + "v-list-item", description="Vue component name for List Item" + ) + title: str = Field("", description="item title") color: str = Field(None, description="Background color of the List item") - elevation: int = Field(None, ge=0, le=24, description="Elevation level of the List item. Must be between 0 and 24") - density: str = Field("default", enum=['default','comfortable','compact'], description="Density of the List Item: default | comfortable | compact") - width: Union[int,str] = Field('100%', description="Width of the List item") - height: Union[int,str] = Field('100%', description="Height of the List item") - value: str= Field("", description="value for List Item") - disabled: bool= Field(False, description="removes ability to click List Item") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItem. List title, subtitle come as the child components of the list item") + elevation: int = Field( + None, + ge=0, + le=24, + description="Elevation level of the List item. Must be between 0 and 24", + ) + density: str = Field( + "default", + enum=["default", "comfortable", "compact"], + description="Density of the List Item: default | comfortable | compact", + ) + width: Union[int, str] = Field("100%", description="Width of the List item") + height: Union[int, str] = Field("100%", description="Height of the List item") + value: str = Field("", description="value for List Item") + disabled: bool = Field(False, description="removes ability to click List Item") + childComponents: List[str] = Field( + [], + description="List of child component ids to be placed within the ListItem. List title, subtitle come as the child components of the list item", + ) -class ListGroup(ZTComponent): +class ListGroup(ZTComponent): """List Group is used to group multiple list items in one category""" - component: str = Field("v-list-group", description="Vue component name for List group") - title: str=Field("", description="Title of the List Group") + + component: str = Field( + "v-list-group", description="Vue component name for List group" + ) + title: str = Field("", description="Title of the List Group") color: str = Field(None, description="Background color of the List Group") - density: str = Field("default", enum=['default','comfortable','compact'], description="Density of the component") - width: Union[int,str] = Field('100%', description="Width of the List") - height: Union[int,str] = Field('100%', description="Height of the List") - value: str= Field("", description="Expands / Collapse the list-group.") - disabled: bool= Field(False, description="removes ability to click List Item") - collapse_icon: str= Field("$collapse", description="Icon to display when the list item is expanded.") - expand_icon: str= Field("$expand", description="Icon to display when the list item is collapsed.") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListGroup. List Items come as child Components of the Group") + density: str = Field( + "default", + enum=["default", "comfortable", "compact"], + description="Density of the component", + ) + width: Union[int, str] = Field("100%", description="Width of the List") + height: Union[int, str] = Field("100%", description="Height of the List") + value: str = Field("", description="Expands / Collapse the list-group.") + disabled: bool = Field(False, description="removes ability to click List Item") + collapse_icon: str = Field( + "$collapse", description="Icon to display when the list item is expanded." + ) + expand_icon: str = Field( + "$expand", description="Icon to display when the list item is collapsed." + ) + childComponents: List[str] = Field( + [], + description="List of child component ids to be placed within the ListGroup. List Items come as child Components of the Group", + ) ##subgroup:bool= Field(False, description="subgroup for List Group") -class ListItemTitle(ZTComponent): + +class ListItemTitle(ZTComponent): """List Item Title is used to specify the title of the Lsit Item. Use Text component to provide the title details and pass it to the child component of List Item.""" - component: str = Field("v-list-item-title", description="Vue component name for List item title") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItemTitle. Mention v-test component to show the text of title") - tag: str= Field("div", description="specify a custom tag used on root element") -class ListItemSubtitle(ZTComponent): + component: str = Field( + "v-list-item-title", description="Vue component name for List item title" + ) + childComponents: List[str] = Field( + [], + description="List of child component ids to be placed within the ListItemTitle. Mention v-test component to show the text of title", + ) + tag: str = Field("div", description="specify a custom tag used on root element") + + +class ListItemSubtitle(ZTComponent): """List Item SubtitleTitle is used to specify the Subtitle of the List Item. Use Text component to provide the text details of the subtitle and pass it to the child component of List Item""" - component: str = Field("v-list-item-subtitle", description="Vue component name for List Item Subtitle") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItemTitle. Mention v-test component to show the text of Subtitle") - opacity: Union[int,str]= Field("50%", description="opacity for subtitle") - tag: str= Field("div", description="specify a custom tag used on root element") -class ListSubheader(ZTComponent): + component: str = Field( + "v-list-item-subtitle", description="Vue component name for List Item Subtitle" + ) + childComponents: List[str] = Field( + [], + description="List of child component ids to be placed within the ListItemTitle. Mention v-test component to show the text of Subtitle", + ) + opacity: Union[int, str] = Field("50%", description="opacity for subtitle") + tag: str = Field("div", description="specify a custom tag used on root element") + + +class ListSubheader(ZTComponent): """List SubHeader is used to specify the Sub Header of the List. Use Text component to provide the title details and pass it to the child component of List.""" - component: str = Field("v-list-subheader", description="Vue component name for List SubHeader ") - inset: bool= Field(False, description="inset for Subheader") - sticky: bool=Field(False,description="sticky for subehader") - tag: str= Field("div", description="specify a custom tag used on root element") - title: str=Field("", description="title for subheader") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the List Subheader. Mention v-text component to show title for subheader") \ No newline at end of file + + component: str = Field( + "v-list-subheader", description="Vue component name for List SubHeader " + ) + inset: bool = Field(False, description="inset for Subheader") + sticky: bool = Field(False, description="sticky for subehader") + tag: str = Field("div", description="specify a custom tag used on root element") + title: str = Field("", description="title for subheader") + childComponents: List[str] = Field( + [], + description="List of child component ids to be placed within the List Subheader. Mention v-text component to show title for subheader", + ) From a298ea6fe2c7ccc870adaf79998c5baf4c9748ea Mon Sep 17 00:00:00 2001 From: Harshita Poojary Date: Fri, 21 Jun 2024 16:53:06 -0700 Subject: [PATCH 04/13] fix: formatted other files --- zero_true/__init__.py | 2 +- zt_frontend/src/components/ComponentWrapper.vue | 7 +++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/zero_true/__init__.py b/zero_true/__init__.py index 6e6814c2..6ce75c6c 100644 --- a/zero_true/__init__.py +++ b/zero_true/__init__.py @@ -20,6 +20,6 @@ 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 -from zt_backend.models.components.list import ListComponent,ListItem,ListGroup,ListItemTitle, ListItemSubtitle,ListSubheader +from zt_backend.models.components.list import ListComponent, ListItem, ListGroup, ListItemTitle, ListItemSubtitle, ListSubheader diff --git a/zt_frontend/src/components/ComponentWrapper.vue b/zt_frontend/src/components/ComponentWrapper.vue index bbd086a2..a27c41de 100644 --- a/zt_frontend/src/components/ComponentWrapper.vue +++ b/zt_frontend/src/components/ComponentWrapper.vue @@ -79,10 +79,9 @@ export default { "v-list":VList, "v-list-item": VListItem, "v-list-group": VListGroup, - "v-list-item-title":VListItemTitle, - "v-list-item-subtitle":VListItemSubtitle, - "v-list-subheader":VListSubheader - + "v-list-item-title": VListItemTitle, + "v-list-item-subtitle": VListItemSubtitle, + "v-list-subheader": VListSubheader }, emits: ["runCode"], props: { From 644eb127e48c34edf17c1178188def6aa83e650d Mon Sep 17 00:00:00 2001 From: Harshita Poojary Date: Tue, 25 Jun 2024 06:35:59 -0700 Subject: [PATCH 05/13] fix: updates as per PR 277 comments --- zero_true/__init__.py | 2 +- zt_backend/models/components/list.py | 32 +--------- zt_backend/models/generate_schema.py | 4 +- zt_backend/models/notebook.py | 3 +- .../src/components/ComponentWrapper.vue | 19 ------ zt_frontend/src/types/list.d.ts | 60 ------------------- 6 files changed, 5 insertions(+), 115 deletions(-) delete mode 100644 zt_frontend/src/types/list.d.ts diff --git a/zero_true/__init__.py b/zero_true/__init__.py index 6ce75c6c..fc1a5ceb 100644 --- a/zero_true/__init__.py +++ b/zero_true/__init__.py @@ -20,6 +20,6 @@ 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 -from zt_backend.models.components.list import ListComponent, ListItem, ListGroup, ListItemTitle, ListItemSubtitle, ListSubheader +from zt_backend.models.components.list import ListComponent, ListItem, ListItemTitle, ListItemSubtitle, ListSubheader diff --git a/zt_backend/models/components/list.py b/zt_backend/models/components/list.py index e77bca67..ed1fe148 100644 --- a/zt_backend/models/components/list.py +++ b/zt_backend/models/components/list.py @@ -55,36 +55,6 @@ class ListItem(ZTComponent): ) -class ListGroup(ZTComponent): - """List Group is used to group multiple list items in one category""" - - component: str = Field( - "v-list-group", description="Vue component name for List group" - ) - title: str = Field("", description="Title of the List Group") - color: str = Field(None, description="Background color of the List Group") - density: str = Field( - "default", - enum=["default", "comfortable", "compact"], - description="Density of the component", - ) - width: Union[int, str] = Field("100%", description="Width of the List") - height: Union[int, str] = Field("100%", description="Height of the List") - value: str = Field("", description="Expands / Collapse the list-group.") - disabled: bool = Field(False, description="removes ability to click List Item") - collapse_icon: str = Field( - "$collapse", description="Icon to display when the list item is expanded." - ) - expand_icon: str = Field( - "$expand", description="Icon to display when the list item is collapsed." - ) - childComponents: List[str] = Field( - [], - description="List of child component ids to be placed within the ListGroup. List Items come as child Components of the Group", - ) - ##subgroup:bool= Field(False, description="subgroup for List Group") - - class ListItemTitle(ZTComponent): """List Item Title is used to specify the title of the Lsit Item. Use Text component to provide the title details and pass it to the child component of List Item.""" @@ -98,6 +68,7 @@ class ListItemTitle(ZTComponent): tag: str = Field("div", description="specify a custom tag used on root element") +# TODO: debug opacity class ListItemSubtitle(ZTComponent): """List Item SubtitleTitle is used to specify the Subtitle of the List Item. Use Text component to provide the text details of the subtitle and pass it to the child component of List Item""" @@ -112,6 +83,7 @@ class ListItemSubtitle(ZTComponent): tag: str = Field("div", description="specify a custom tag used on root element") +# TODO: debug the title prop class ListSubheader(ZTComponent): """List SubHeader is used to specify the Sub Header of the List. Use Text component to provide the title details and pass it to the child component of List.""" diff --git a/zt_backend/models/generate_schema.py b/zt_backend/models/generate_schema.py index 7e6637e3..27ce4147 100644 --- a/zt_backend/models/generate_schema.py +++ b/zt_backend/models/generate_schema.py @@ -20,7 +20,6 @@ from .components.timer import Timer from .components.iframe import iFrame from .components.html import HTML -from .components.list import ListComponent import json def generate_json(model, name): @@ -63,5 +62,4 @@ def generate_schema(): generate_json(Text,'text') generate_json(Timer,'timer') generate_json(iFrame,'iframe') - generate_json(HTML,'html') - generate_json(ListComponent,'list') \ No newline at end of file + generate_json(HTML,'html') \ No newline at end of file diff --git a/zt_backend/models/notebook.py b/zt_backend/models/notebook.py index 5eabf7ef..4035917f 100644 --- a/zt_backend/models/notebook.py +++ b/zt_backend/models/notebook.py @@ -18,7 +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.list import ListComponent, ListItem, ListGroup, ListItemTitle, ListItemSubtitle, ListSubheader +from zt_backend.models.components.list import ListComponent, ListItem, ListItemTitle, ListItemSubtitle, ListSubheader def deserialize_component(data: Dict[str, Any]) -> ZTComponent: component_map = { @@ -38,7 +38,6 @@ def deserialize_component(data: Dict[str, Any]) -> ZTComponent: "plotly-plot": PlotlyComponent, "v-list": ListComponent, "v-list-item": ListItem, - "v-list-group":ListGroup, "v-list-item-title":ListItemTitle, "v-list-item-subtitle":ListItemSubtitle, "v-list-subheader":ListSubheader diff --git a/zt_frontend/src/components/ComponentWrapper.vue b/zt_frontend/src/components/ComponentWrapper.vue index a27c41de..801fe197 100644 --- a/zt_frontend/src/components/ComponentWrapper.vue +++ b/zt_frontend/src/components/ComponentWrapper.vue @@ -50,7 +50,6 @@ import { VCard, VList, VListItem, - VListGroup, VListItemTitle, VListItemSubtitle, VListSubheader @@ -78,7 +77,6 @@ export default { "plotly-plot": PlotlyPlot, "v-list":VList, "v-list-item": VListItem, - "v-list-group": VListGroup, "v-list-item-title": VListItemTitle, "v-list-item-subtitle": VListItemSubtitle, "v-list-subheader": VListSubheader @@ -128,23 +126,6 @@ export default { ), }; }, - getEventBindings(component: any) { - if (component.component === "v-list") { - return {}; - } - - return { - [component.triggerEvent]: () => - this.runCode(true, component.id, component.value), - keydown: ($event: any) => - this.handleEnterPress( - $event, - component.id, - component.component, - component.value - ), - }; - }, handleEnterPress(e: any, id: string, component_type: any, value: any) { // Run code when Enter is pressed in a text, number or text are field diff --git a/zt_frontend/src/types/list.d.ts b/zt_frontend/src/types/list.d.ts deleted file mode 100644 index 32307039..00000000 --- a/zt_frontend/src/types/list.d.ts +++ /dev/null @@ -1,60 +0,0 @@ -/* eslint-disable */ -/** - * This file was automatically generated by json-schema-to-typescript. - * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file, - * and run json-schema-to-typescript to regenerate this file. - */ - -/** - * Unique id for a component - */ -export type Id = string; -/** - * Optional variable name associated with a component - */ -export type VariableName = string; -/** - * Vue component name - */ -export type Component = string; -/** - * List of child component ids to be placed within the card - */ -export type Childcomponents = string[]; -/** - * Background color of the card - */ -export type Color = string; -/** - * Elevation level of the card. Must be between 0 and 24 - */ -export type Elevation = number; -/** - * Density of the component - */ -export type Density = "default" | "comfortable" | "compact"; -/** - * Width of the List - */ -export type Width = number | string; -/** - * Height of the List - */ -export type Height = number | string; - -/** - * A card is a container for components that should be displayed together. - * Any child components will be placed in their own row within the card and take up the full width - */ -export interface ListComponent { - id: Id; - variable_name?: VariableName; - component?: Component; - childComponents?: Childcomponents; - color?: Color; - elevation?: Elevation; - density?: Density; - width?: Width; - height?: Height; - [k: string]: unknown; -} From a90cd629f66788124470680957a6a31228652a8f Mon Sep 17 00:00:00 2001 From: Harshita Poojary Date: Tue, 25 Jun 2024 15:24:42 -0700 Subject: [PATCH 06/13] fix: removed tag from props --- zt_backend/models/components/list.py | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/zt_backend/models/components/list.py b/zt_backend/models/components/list.py index ed1fe148..03f676ff 100644 --- a/zt_backend/models/components/list.py +++ b/zt_backend/models/components/list.py @@ -65,10 +65,9 @@ class ListItemTitle(ZTComponent): [], description="List of child component ids to be placed within the ListItemTitle. Mention v-test component to show the text of title", ) - tag: str = Field("div", description="specify a custom tag used on root element") -# TODO: debug opacity +# TODO: debug opacity prop(not working) class ListItemSubtitle(ZTComponent): """List Item SubtitleTitle is used to specify the Subtitle of the List Item. Use Text component to provide the text details of the subtitle and pass it to the child component of List Item""" @@ -80,10 +79,9 @@ class ListItemSubtitle(ZTComponent): description="List of child component ids to be placed within the ListItemTitle. Mention v-test component to show the text of Subtitle", ) opacity: Union[int, str] = Field("50%", description="opacity for subtitle") - tag: str = Field("div", description="specify a custom tag used on root element") -# TODO: debug the title prop +# TODO: debug the title prop(not working) class ListSubheader(ZTComponent): """List SubHeader is used to specify the Sub Header of the List. Use Text component to provide the title details and pass it to the child component of List.""" @@ -92,7 +90,6 @@ class ListSubheader(ZTComponent): ) inset: bool = Field(False, description="inset for Subheader") sticky: bool = Field(False, description="sticky for subehader") - tag: str = Field("div", description="specify a custom tag used on root element") title: str = Field("", description="title for subheader") childComponents: List[str] = Field( [], From c9ad75a058deca09fc257a79c21ca61c9c4c4386 Mon Sep 17 00:00:00 2001 From: Essa Chawla Date: Fri, 21 Jun 2024 12:37:20 -0700 Subject: [PATCH 07/13] fix: List Component --- zero_true/__init__.py | 5 +- zt_backend/models/components/list.py | 69 +++++++++++++++++++ zt_backend/models/generate_schema.py | 4 +- zt_backend/models/notebook.py | 11 ++- .../src/components/ComponentWrapper.vue | 31 +++++++++ zt_frontend/src/types/list.d.ts | 60 ++++++++++++++++ 6 files changed, 177 insertions(+), 3 deletions(-) create mode 100644 zt_backend/models/components/list.py create mode 100644 zt_frontend/src/types/list.d.ts diff --git a/zero_true/__init__.py b/zero_true/__init__.py index 778ab9e1..6e6814c2 100644 --- a/zero_true/__init__.py +++ b/zero_true/__init__.py @@ -19,4 +19,7 @@ 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.list import ListComponent,ListItem,ListGroup,ListItemTitle, ListItemSubtitle,ListSubheader + + diff --git a/zt_backend/models/components/list.py b/zt_backend/models/components/list.py new file mode 100644 index 00000000..1ec0580b --- /dev/null +++ b/zt_backend/models/components/list.py @@ -0,0 +1,69 @@ +from pydantic import Field +from typing import List, Optional, Union +from zt_backend.models.components.zt_component import ZTComponent + +class ListComponent(ZTComponent): + """A card is a container for components that should be displayed together. + Any child components will be placed in their own row within the card and take up the full width""" + + component: str = Field("v-list", description="Vue component name") + childComponents: List[str] = Field([], description="List of child component ids to be placed within the card") + color: str = Field(None, description="Background color of the card") + elevation: int = Field(None, ge=0, le=24, description="Elevation level of the card. Must be between 0 and 24") + density: str = Field(None, enum=['default','comfortable','compact'], description="Density of the component") + width: Union[int,str] = Field('100%', description="Width of the List") + height: Union[int,str] = Field('100%', description="Height of the List") + +class ListItem(ZTComponent): + component: str = Field("v-list-item", description="Vue component name") + title: str=Field("", description="item title") + color: str = Field(None, description="Background color of the card") + elevation: int = Field(None, ge=0, le=24, description="Elevation level of the card. Must be between 0 and 24") + density: str = Field("default", enum=['default','comfortable','compact'], description="Density of the component") + width: Union[int,str] = Field('100%', description="Width of the List") + height: Union[int,str] = Field('100%', description="Height of the List") + value: str= Field("", description="value for List Item") + disabled: bool= Field(False, description="removes ability to click List Item") + childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItem") + + +class ListGroup(ZTComponent): + component: str = Field("v-list-group", description="Vue component name") + title: str=Field("", description="item title") + color: str = Field(None, description="Background color of the card") + density: str = Field("default", enum=['default','comfortable','compact'], description="Density of the component") + width: Union[int,str] = Field('100%', description="Width of the List") + height: Union[int,str] = Field('100%', description="Height of the List") + value: str= Field("", description="Expands / Collapse the list-group.") + disabled: bool= Field(False, description="removes ability to click List Item") + collapse_icon: str= Field("$collapse", description="Icon to display when the list item is expanded.") + expand_icon: str= Field("$expand", description="Icon to display when the list item is collapsed.") + childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListGroup") + ##subgroup:bool= Field(False, description="subgroup for List Group") + +class ListItemTitle(ZTComponent): + component: str = Field("v-list-item-title", description="Vue component name") + childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItemTitle") + tag: str= Field("div", description="specify a custom tag used on root element") + +class ListItemSubtitle(ZTComponent): + component: str = Field("v-list-item-subtitle", description="Vue component name") + childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItemTitle") + opacity: Union[int,str]= Field("50%", description="opacity for subtitle") + tag: str= Field("div", description="specify a custom tag used on root element") + +class ListSubheader(ZTComponent): + component: str = Field("v-list-subheader", description="Vue component name") + inset: bool= Field(False, description="inset for Subheader") + sticky: bool=Field(False,description="sticky for subehader") + tag: str= Field("div", description="specify a custom tag used on root element") + title: str=Field("", description="title for subheader") + childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListComponent") + + + + + + + + diff --git a/zt_backend/models/generate_schema.py b/zt_backend/models/generate_schema.py index 27ce4147..7e6637e3 100644 --- a/zt_backend/models/generate_schema.py +++ b/zt_backend/models/generate_schema.py @@ -20,6 +20,7 @@ from .components.timer import Timer from .components.iframe import iFrame from .components.html import HTML +from .components.list import ListComponent import json def generate_json(model, name): @@ -62,4 +63,5 @@ def generate_schema(): generate_json(Text,'text') generate_json(Timer,'timer') generate_json(iFrame,'iframe') - generate_json(HTML,'html') \ No newline at end of file + generate_json(HTML,'html') + generate_json(ListComponent,'list') \ No newline at end of file diff --git a/zt_backend/models/notebook.py b/zt_backend/models/notebook.py index 3e85c52d..5eabf7ef 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.list import ListComponent, ListItem, ListGroup, ListItemTitle, ListItemSubtitle, ListSubheader def deserialize_component(data: Dict[str, Any]) -> ZTComponent: component_map = { @@ -34,7 +35,15 @@ def deserialize_component(data: Dict[str, Any]) -> ZTComponent: "v-autocomplete": Autocomplete, "v-card": Card, "v-timer": Timer, - "plotly-plot": PlotlyComponent + "plotly-plot": PlotlyComponent, + "v-list": ListComponent, + "v-list-item": ListItem, + "v-list-group":ListGroup, + "v-list-item-title":ListItemTitle, + "v-list-item-subtitle":ListItemSubtitle, + "v-list-subheader":ListSubheader + + # add other component types here } component_class = data.get("component") diff --git a/zt_frontend/src/components/ComponentWrapper.vue b/zt_frontend/src/components/ComponentWrapper.vue index bef19b42..bbd086a2 100644 --- a/zt_frontend/src/components/ComponentWrapper.vue +++ b/zt_frontend/src/components/ComponentWrapper.vue @@ -48,11 +48,18 @@ import { VImg, VAutocomplete, VCard, + VList, + VListItem, + VListGroup, + VListItemTitle, + VListItemSubtitle, + VListSubheader } from "vuetify/lib/components/index.mjs"; import { VDataTable } from "vuetify/components/VDataTable"; import TextComponent from "@/components/TextComponent.vue"; import PlotlyPlot from "@/components/PlotlyComponent.vue"; + export default { components: { "v-slider": VSlider, @@ -69,6 +76,13 @@ export default { "v-card": VCard, "v-text": TextComponent, "plotly-plot": PlotlyPlot, + "v-list":VList, + "v-list-item": VListItem, + "v-list-group": VListGroup, + "v-list-item-title":VListItemTitle, + "v-list-item-subtitle":VListItemSubtitle, + "v-list-subheader":VListSubheader + }, emits: ["runCode"], props: { @@ -115,6 +129,23 @@ export default { ), }; }, + getEventBindings(component: any) { + if (component.component === "v-list") { + return {}; + } + + return { + [component.triggerEvent]: () => + this.runCode(true, component.id, component.value), + keydown: ($event: any) => + this.handleEnterPress( + $event, + component.id, + component.component, + component.value + ), + }; + }, handleEnterPress(e: any, id: string, component_type: any, value: any) { // Run code when Enter is pressed in a text, number or text are field diff --git a/zt_frontend/src/types/list.d.ts b/zt_frontend/src/types/list.d.ts new file mode 100644 index 00000000..32307039 --- /dev/null +++ b/zt_frontend/src/types/list.d.ts @@ -0,0 +1,60 @@ +/* eslint-disable */ +/** + * This file was automatically generated by json-schema-to-typescript. + * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file, + * and run json-schema-to-typescript to regenerate this file. + */ + +/** + * Unique id for a component + */ +export type Id = string; +/** + * Optional variable name associated with a component + */ +export type VariableName = string; +/** + * Vue component name + */ +export type Component = string; +/** + * List of child component ids to be placed within the card + */ +export type Childcomponents = string[]; +/** + * Background color of the card + */ +export type Color = string; +/** + * Elevation level of the card. Must be between 0 and 24 + */ +export type Elevation = number; +/** + * Density of the component + */ +export type Density = "default" | "comfortable" | "compact"; +/** + * Width of the List + */ +export type Width = number | string; +/** + * Height of the List + */ +export type Height = number | string; + +/** + * A card is a container for components that should be displayed together. + * Any child components will be placed in their own row within the card and take up the full width + */ +export interface ListComponent { + id: Id; + variable_name?: VariableName; + component?: Component; + childComponents?: Childcomponents; + color?: Color; + elevation?: Elevation; + density?: Density; + width?: Width; + height?: Height; + [k: string]: unknown; +} From 866e849c1f92f75688824cb696df98cca87afa8e Mon Sep 17 00:00:00 2001 From: Harshita Poojary Date: Fri, 21 Jun 2024 16:31:52 -0700 Subject: [PATCH 08/13] fix: list component --- zt_backend/models/components/list.py | 61 +++++++++++++--------------- 1 file changed, 28 insertions(+), 33 deletions(-) diff --git a/zt_backend/models/components/list.py b/zt_backend/models/components/list.py index 1ec0580b..7936ceed 100644 --- a/zt_backend/models/components/list.py +++ b/zt_backend/models/components/list.py @@ -3,34 +3,34 @@ from zt_backend.models.components.zt_component import ZTComponent class ListComponent(ZTComponent): - """A card is a container for components that should be displayed together. - Any child components will be placed in their own row within the card and take up the full width""" - - component: str = Field("v-list", description="Vue component name") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the card") - color: str = Field(None, description="Background color of the card") - elevation: int = Field(None, ge=0, le=24, description="Elevation level of the card. Must be between 0 and 24") - density: str = Field(None, enum=['default','comfortable','compact'], description="Density of the component") + """List the Primary components holding the items in the scorllable format""" + component: str = Field("v-list", description="Vue component name for List") + childComponents: List[str] = Field([], description="List of child component ids to be placed within the List") + color: str = Field(None, description="Background color of the List") + elevation: int = Field(None, ge=0, le=24, description="Elevation level of the List. Must be between 0 and 24") + density: str = Field(None, enum=['default','comfortable','compact'], description="Density of the List") width: Union[int,str] = Field('100%', description="Width of the List") height: Union[int,str] = Field('100%', description="Height of the List") class ListItem(ZTComponent): - component: str = Field("v-list-item", description="Vue component name") + """List Item helps define properties of individual items in the list""" + component: str = Field("v-list-item", description="Vue component name for List Item") title: str=Field("", description="item title") - color: str = Field(None, description="Background color of the card") - elevation: int = Field(None, ge=0, le=24, description="Elevation level of the card. Must be between 0 and 24") - density: str = Field("default", enum=['default','comfortable','compact'], description="Density of the component") - width: Union[int,str] = Field('100%', description="Width of the List") - height: Union[int,str] = Field('100%', description="Height of the List") + color: str = Field(None, description="Background color of the List item") + elevation: int = Field(None, ge=0, le=24, description="Elevation level of the List item. Must be between 0 and 24") + density: str = Field("default", enum=['default','comfortable','compact'], description="Density of the List Item: default | comfortable | compact") + width: Union[int,str] = Field('100%', description="Width of the List item") + height: Union[int,str] = Field('100%', description="Height of the List item") value: str= Field("", description="value for List Item") disabled: bool= Field(False, description="removes ability to click List Item") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItem") + childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItem. List title, subtitle come as the child components of the list item") class ListGroup(ZTComponent): - component: str = Field("v-list-group", description="Vue component name") - title: str=Field("", description="item title") - color: str = Field(None, description="Background color of the card") + """List Group is used to group multiple list items in one category""" + component: str = Field("v-list-group", description="Vue component name for List group") + title: str=Field("", description="Title of the List Group") + color: str = Field(None, description="Background color of the List Group") density: str = Field("default", enum=['default','comfortable','compact'], description="Density of the component") width: Union[int,str] = Field('100%', description="Width of the List") height: Union[int,str] = Field('100%', description="Height of the List") @@ -38,32 +38,27 @@ class ListGroup(ZTComponent): disabled: bool= Field(False, description="removes ability to click List Item") collapse_icon: str= Field("$collapse", description="Icon to display when the list item is expanded.") expand_icon: str= Field("$expand", description="Icon to display when the list item is collapsed.") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListGroup") + childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListGroup. List Items come as child Components of the Group") ##subgroup:bool= Field(False, description="subgroup for List Group") class ListItemTitle(ZTComponent): - component: str = Field("v-list-item-title", description="Vue component name") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItemTitle") + """List Item Title is used to specify the title of the Lsit Item. Use Text component to provide the title details and pass it to the child component of List Item.""" + component: str = Field("v-list-item-title", description="Vue component name for List item title") + childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItemTitle. Mention v-test component to show the text of title") tag: str= Field("div", description="specify a custom tag used on root element") class ListItemSubtitle(ZTComponent): - component: str = Field("v-list-item-subtitle", description="Vue component name") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItemTitle") + """List Item SubtitleTitle is used to specify the Subtitle of the List Item. Use Text component to provide the text details of the subtitle and pass it to the child component of List Item""" + component: str = Field("v-list-item-subtitle", description="Vue component name for List Item Subtitle") + childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItemTitle. Mention v-test component to show the text of Subtitle") opacity: Union[int,str]= Field("50%", description="opacity for subtitle") tag: str= Field("div", description="specify a custom tag used on root element") class ListSubheader(ZTComponent): - component: str = Field("v-list-subheader", description="Vue component name") + """List SubHeader is used to specify the Sub Header of the List. Use Text component to provide the title details and pass it to the child component of List.""" + component: str = Field("v-list-subheader", description="Vue component name for List SubHeader ") inset: bool= Field(False, description="inset for Subheader") sticky: bool=Field(False,description="sticky for subehader") tag: str= Field("div", description="specify a custom tag used on root element") title: str=Field("", description="title for subheader") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListComponent") - - - - - - - - + childComponents: List[str] = Field([], description="List of child component ids to be placed within the List Subheader. Mention v-text component to show title for subheader") \ No newline at end of file From a7ebcb54432992132daff14e005cf3f41342af39 Mon Sep 17 00:00:00 2001 From: Harshita Poojary Date: Fri, 21 Jun 2024 16:47:32 -0700 Subject: [PATCH 09/13] fix: formatting list file --- zt_backend/models/components/list.py | 148 +++++++++++++++++++-------- 1 file changed, 106 insertions(+), 42 deletions(-) diff --git a/zt_backend/models/components/list.py b/zt_backend/models/components/list.py index 7936ceed..e77bca67 100644 --- a/zt_backend/models/components/list.py +++ b/zt_backend/models/components/list.py @@ -2,63 +2,127 @@ from typing import List, Optional, Union from zt_backend.models.components.zt_component import ZTComponent + class ListComponent(ZTComponent): """List the Primary components holding the items in the scorllable format""" + component: str = Field("v-list", description="Vue component name for List") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the List") + childComponents: List[str] = Field( + [], description="List of child component ids to be placed within the List" + ) color: str = Field(None, description="Background color of the List") - elevation: int = Field(None, ge=0, le=24, description="Elevation level of the List. Must be between 0 and 24") - density: str = Field(None, enum=['default','comfortable','compact'], description="Density of the List") - width: Union[int,str] = Field('100%', description="Width of the List") - height: Union[int,str] = Field('100%', description="Height of the List") + elevation: int = Field( + None, + ge=0, + le=24, + description="Elevation level of the List. Must be between 0 and 24", + ) + density: str = Field( + None, + enum=["default", "comfortable", "compact"], + description="Density of the List", + ) + width: Union[int, str] = Field("100%", description="Width of the List") + height: Union[int, str] = Field("100%", description="Height of the List") + -class ListItem(ZTComponent): +class ListItem(ZTComponent): """List Item helps define properties of individual items in the list""" - component: str = Field("v-list-item", description="Vue component name for List Item") - title: str=Field("", description="item title") + + component: str = Field( + "v-list-item", description="Vue component name for List Item" + ) + title: str = Field("", description="item title") color: str = Field(None, description="Background color of the List item") - elevation: int = Field(None, ge=0, le=24, description="Elevation level of the List item. Must be between 0 and 24") - density: str = Field("default", enum=['default','comfortable','compact'], description="Density of the List Item: default | comfortable | compact") - width: Union[int,str] = Field('100%', description="Width of the List item") - height: Union[int,str] = Field('100%', description="Height of the List item") - value: str= Field("", description="value for List Item") - disabled: bool= Field(False, description="removes ability to click List Item") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItem. List title, subtitle come as the child components of the list item") + elevation: int = Field( + None, + ge=0, + le=24, + description="Elevation level of the List item. Must be between 0 and 24", + ) + density: str = Field( + "default", + enum=["default", "comfortable", "compact"], + description="Density of the List Item: default | comfortable | compact", + ) + width: Union[int, str] = Field("100%", description="Width of the List item") + height: Union[int, str] = Field("100%", description="Height of the List item") + value: str = Field("", description="value for List Item") + disabled: bool = Field(False, description="removes ability to click List Item") + childComponents: List[str] = Field( + [], + description="List of child component ids to be placed within the ListItem. List title, subtitle come as the child components of the list item", + ) -class ListGroup(ZTComponent): +class ListGroup(ZTComponent): """List Group is used to group multiple list items in one category""" - component: str = Field("v-list-group", description="Vue component name for List group") - title: str=Field("", description="Title of the List Group") + + component: str = Field( + "v-list-group", description="Vue component name for List group" + ) + title: str = Field("", description="Title of the List Group") color: str = Field(None, description="Background color of the List Group") - density: str = Field("default", enum=['default','comfortable','compact'], description="Density of the component") - width: Union[int,str] = Field('100%', description="Width of the List") - height: Union[int,str] = Field('100%', description="Height of the List") - value: str= Field("", description="Expands / Collapse the list-group.") - disabled: bool= Field(False, description="removes ability to click List Item") - collapse_icon: str= Field("$collapse", description="Icon to display when the list item is expanded.") - expand_icon: str= Field("$expand", description="Icon to display when the list item is collapsed.") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListGroup. List Items come as child Components of the Group") + density: str = Field( + "default", + enum=["default", "comfortable", "compact"], + description="Density of the component", + ) + width: Union[int, str] = Field("100%", description="Width of the List") + height: Union[int, str] = Field("100%", description="Height of the List") + value: str = Field("", description="Expands / Collapse the list-group.") + disabled: bool = Field(False, description="removes ability to click List Item") + collapse_icon: str = Field( + "$collapse", description="Icon to display when the list item is expanded." + ) + expand_icon: str = Field( + "$expand", description="Icon to display when the list item is collapsed." + ) + childComponents: List[str] = Field( + [], + description="List of child component ids to be placed within the ListGroup. List Items come as child Components of the Group", + ) ##subgroup:bool= Field(False, description="subgroup for List Group") -class ListItemTitle(ZTComponent): + +class ListItemTitle(ZTComponent): """List Item Title is used to specify the title of the Lsit Item. Use Text component to provide the title details and pass it to the child component of List Item.""" - component: str = Field("v-list-item-title", description="Vue component name for List item title") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItemTitle. Mention v-test component to show the text of title") - tag: str= Field("div", description="specify a custom tag used on root element") -class ListItemSubtitle(ZTComponent): + component: str = Field( + "v-list-item-title", description="Vue component name for List item title" + ) + childComponents: List[str] = Field( + [], + description="List of child component ids to be placed within the ListItemTitle. Mention v-test component to show the text of title", + ) + tag: str = Field("div", description="specify a custom tag used on root element") + + +class ListItemSubtitle(ZTComponent): """List Item SubtitleTitle is used to specify the Subtitle of the List Item. Use Text component to provide the text details of the subtitle and pass it to the child component of List Item""" - component: str = Field("v-list-item-subtitle", description="Vue component name for List Item Subtitle") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the ListItemTitle. Mention v-test component to show the text of Subtitle") - opacity: Union[int,str]= Field("50%", description="opacity for subtitle") - tag: str= Field("div", description="specify a custom tag used on root element") -class ListSubheader(ZTComponent): + component: str = Field( + "v-list-item-subtitle", description="Vue component name for List Item Subtitle" + ) + childComponents: List[str] = Field( + [], + description="List of child component ids to be placed within the ListItemTitle. Mention v-test component to show the text of Subtitle", + ) + opacity: Union[int, str] = Field("50%", description="opacity for subtitle") + tag: str = Field("div", description="specify a custom tag used on root element") + + +class ListSubheader(ZTComponent): """List SubHeader is used to specify the Sub Header of the List. Use Text component to provide the title details and pass it to the child component of List.""" - component: str = Field("v-list-subheader", description="Vue component name for List SubHeader ") - inset: bool= Field(False, description="inset for Subheader") - sticky: bool=Field(False,description="sticky for subehader") - tag: str= Field("div", description="specify a custom tag used on root element") - title: str=Field("", description="title for subheader") - childComponents: List[str] = Field([], description="List of child component ids to be placed within the List Subheader. Mention v-text component to show title for subheader") \ No newline at end of file + + component: str = Field( + "v-list-subheader", description="Vue component name for List SubHeader " + ) + inset: bool = Field(False, description="inset for Subheader") + sticky: bool = Field(False, description="sticky for subehader") + tag: str = Field("div", description="specify a custom tag used on root element") + title: str = Field("", description="title for subheader") + childComponents: List[str] = Field( + [], + description="List of child component ids to be placed within the List Subheader. Mention v-text component to show title for subheader", + ) From 394c132cfdb805e3964468fe20f64c828ea6bafa Mon Sep 17 00:00:00 2001 From: Harshita Poojary Date: Fri, 21 Jun 2024 16:53:06 -0700 Subject: [PATCH 10/13] fix: formatted other files --- zero_true/__init__.py | 2 +- zt_frontend/src/components/ComponentWrapper.vue | 7 +++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/zero_true/__init__.py b/zero_true/__init__.py index 6e6814c2..6ce75c6c 100644 --- a/zero_true/__init__.py +++ b/zero_true/__init__.py @@ -20,6 +20,6 @@ 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 -from zt_backend.models.components.list import ListComponent,ListItem,ListGroup,ListItemTitle, ListItemSubtitle,ListSubheader +from zt_backend.models.components.list import ListComponent, ListItem, ListGroup, ListItemTitle, ListItemSubtitle, ListSubheader diff --git a/zt_frontend/src/components/ComponentWrapper.vue b/zt_frontend/src/components/ComponentWrapper.vue index bbd086a2..a27c41de 100644 --- a/zt_frontend/src/components/ComponentWrapper.vue +++ b/zt_frontend/src/components/ComponentWrapper.vue @@ -79,10 +79,9 @@ export default { "v-list":VList, "v-list-item": VListItem, "v-list-group": VListGroup, - "v-list-item-title":VListItemTitle, - "v-list-item-subtitle":VListItemSubtitle, - "v-list-subheader":VListSubheader - + "v-list-item-title": VListItemTitle, + "v-list-item-subtitle": VListItemSubtitle, + "v-list-subheader": VListSubheader }, emits: ["runCode"], props: { From 0a57fab85ca5429984f01ce6457cebb520ef4695 Mon Sep 17 00:00:00 2001 From: Harshita Poojary Date: Tue, 25 Jun 2024 06:35:59 -0700 Subject: [PATCH 11/13] fix: updates as per PR 277 comments --- zero_true/__init__.py | 2 +- zt_backend/models/components/list.py | 32 +--------- zt_backend/models/generate_schema.py | 4 +- zt_backend/models/notebook.py | 3 +- .../src/components/ComponentWrapper.vue | 19 ------ zt_frontend/src/types/list.d.ts | 60 ------------------- 6 files changed, 5 insertions(+), 115 deletions(-) delete mode 100644 zt_frontend/src/types/list.d.ts diff --git a/zero_true/__init__.py b/zero_true/__init__.py index 6ce75c6c..fc1a5ceb 100644 --- a/zero_true/__init__.py +++ b/zero_true/__init__.py @@ -20,6 +20,6 @@ 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 -from zt_backend.models.components.list import ListComponent, ListItem, ListGroup, ListItemTitle, ListItemSubtitle, ListSubheader +from zt_backend.models.components.list import ListComponent, ListItem, ListItemTitle, ListItemSubtitle, ListSubheader diff --git a/zt_backend/models/components/list.py b/zt_backend/models/components/list.py index e77bca67..ed1fe148 100644 --- a/zt_backend/models/components/list.py +++ b/zt_backend/models/components/list.py @@ -55,36 +55,6 @@ class ListItem(ZTComponent): ) -class ListGroup(ZTComponent): - """List Group is used to group multiple list items in one category""" - - component: str = Field( - "v-list-group", description="Vue component name for List group" - ) - title: str = Field("", description="Title of the List Group") - color: str = Field(None, description="Background color of the List Group") - density: str = Field( - "default", - enum=["default", "comfortable", "compact"], - description="Density of the component", - ) - width: Union[int, str] = Field("100%", description="Width of the List") - height: Union[int, str] = Field("100%", description="Height of the List") - value: str = Field("", description="Expands / Collapse the list-group.") - disabled: bool = Field(False, description="removes ability to click List Item") - collapse_icon: str = Field( - "$collapse", description="Icon to display when the list item is expanded." - ) - expand_icon: str = Field( - "$expand", description="Icon to display when the list item is collapsed." - ) - childComponents: List[str] = Field( - [], - description="List of child component ids to be placed within the ListGroup. List Items come as child Components of the Group", - ) - ##subgroup:bool= Field(False, description="subgroup for List Group") - - class ListItemTitle(ZTComponent): """List Item Title is used to specify the title of the Lsit Item. Use Text component to provide the title details and pass it to the child component of List Item.""" @@ -98,6 +68,7 @@ class ListItemTitle(ZTComponent): tag: str = Field("div", description="specify a custom tag used on root element") +# TODO: debug opacity class ListItemSubtitle(ZTComponent): """List Item SubtitleTitle is used to specify the Subtitle of the List Item. Use Text component to provide the text details of the subtitle and pass it to the child component of List Item""" @@ -112,6 +83,7 @@ class ListItemSubtitle(ZTComponent): tag: str = Field("div", description="specify a custom tag used on root element") +# TODO: debug the title prop class ListSubheader(ZTComponent): """List SubHeader is used to specify the Sub Header of the List. Use Text component to provide the title details and pass it to the child component of List.""" diff --git a/zt_backend/models/generate_schema.py b/zt_backend/models/generate_schema.py index 7e6637e3..27ce4147 100644 --- a/zt_backend/models/generate_schema.py +++ b/zt_backend/models/generate_schema.py @@ -20,7 +20,6 @@ from .components.timer import Timer from .components.iframe import iFrame from .components.html import HTML -from .components.list import ListComponent import json def generate_json(model, name): @@ -63,5 +62,4 @@ def generate_schema(): generate_json(Text,'text') generate_json(Timer,'timer') generate_json(iFrame,'iframe') - generate_json(HTML,'html') - generate_json(ListComponent,'list') \ No newline at end of file + generate_json(HTML,'html') \ No newline at end of file diff --git a/zt_backend/models/notebook.py b/zt_backend/models/notebook.py index 5eabf7ef..4035917f 100644 --- a/zt_backend/models/notebook.py +++ b/zt_backend/models/notebook.py @@ -18,7 +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.list import ListComponent, ListItem, ListGroup, ListItemTitle, ListItemSubtitle, ListSubheader +from zt_backend.models.components.list import ListComponent, ListItem, ListItemTitle, ListItemSubtitle, ListSubheader def deserialize_component(data: Dict[str, Any]) -> ZTComponent: component_map = { @@ -38,7 +38,6 @@ def deserialize_component(data: Dict[str, Any]) -> ZTComponent: "plotly-plot": PlotlyComponent, "v-list": ListComponent, "v-list-item": ListItem, - "v-list-group":ListGroup, "v-list-item-title":ListItemTitle, "v-list-item-subtitle":ListItemSubtitle, "v-list-subheader":ListSubheader diff --git a/zt_frontend/src/components/ComponentWrapper.vue b/zt_frontend/src/components/ComponentWrapper.vue index a27c41de..801fe197 100644 --- a/zt_frontend/src/components/ComponentWrapper.vue +++ b/zt_frontend/src/components/ComponentWrapper.vue @@ -50,7 +50,6 @@ import { VCard, VList, VListItem, - VListGroup, VListItemTitle, VListItemSubtitle, VListSubheader @@ -78,7 +77,6 @@ export default { "plotly-plot": PlotlyPlot, "v-list":VList, "v-list-item": VListItem, - "v-list-group": VListGroup, "v-list-item-title": VListItemTitle, "v-list-item-subtitle": VListItemSubtitle, "v-list-subheader": VListSubheader @@ -128,23 +126,6 @@ export default { ), }; }, - getEventBindings(component: any) { - if (component.component === "v-list") { - return {}; - } - - return { - [component.triggerEvent]: () => - this.runCode(true, component.id, component.value), - keydown: ($event: any) => - this.handleEnterPress( - $event, - component.id, - component.component, - component.value - ), - }; - }, handleEnterPress(e: any, id: string, component_type: any, value: any) { // Run code when Enter is pressed in a text, number or text are field diff --git a/zt_frontend/src/types/list.d.ts b/zt_frontend/src/types/list.d.ts deleted file mode 100644 index 32307039..00000000 --- a/zt_frontend/src/types/list.d.ts +++ /dev/null @@ -1,60 +0,0 @@ -/* eslint-disable */ -/** - * This file was automatically generated by json-schema-to-typescript. - * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file, - * and run json-schema-to-typescript to regenerate this file. - */ - -/** - * Unique id for a component - */ -export type Id = string; -/** - * Optional variable name associated with a component - */ -export type VariableName = string; -/** - * Vue component name - */ -export type Component = string; -/** - * List of child component ids to be placed within the card - */ -export type Childcomponents = string[]; -/** - * Background color of the card - */ -export type Color = string; -/** - * Elevation level of the card. Must be between 0 and 24 - */ -export type Elevation = number; -/** - * Density of the component - */ -export type Density = "default" | "comfortable" | "compact"; -/** - * Width of the List - */ -export type Width = number | string; -/** - * Height of the List - */ -export type Height = number | string; - -/** - * A card is a container for components that should be displayed together. - * Any child components will be placed in their own row within the card and take up the full width - */ -export interface ListComponent { - id: Id; - variable_name?: VariableName; - component?: Component; - childComponents?: Childcomponents; - color?: Color; - elevation?: Elevation; - density?: Density; - width?: Width; - height?: Height; - [k: string]: unknown; -} From 6c4a9bc0520918e5fc3b4b207d71099c5ebca6a1 Mon Sep 17 00:00:00 2001 From: Harshita Poojary Date: Tue, 25 Jun 2024 15:24:42 -0700 Subject: [PATCH 12/13] fix: removed tag from props --- zt_backend/models/components/list.py | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/zt_backend/models/components/list.py b/zt_backend/models/components/list.py index ed1fe148..03f676ff 100644 --- a/zt_backend/models/components/list.py +++ b/zt_backend/models/components/list.py @@ -65,10 +65,9 @@ class ListItemTitle(ZTComponent): [], description="List of child component ids to be placed within the ListItemTitle. Mention v-test component to show the text of title", ) - tag: str = Field("div", description="specify a custom tag used on root element") -# TODO: debug opacity +# TODO: debug opacity prop(not working) class ListItemSubtitle(ZTComponent): """List Item SubtitleTitle is used to specify the Subtitle of the List Item. Use Text component to provide the text details of the subtitle and pass it to the child component of List Item""" @@ -80,10 +79,9 @@ class ListItemSubtitle(ZTComponent): description="List of child component ids to be placed within the ListItemTitle. Mention v-test component to show the text of Subtitle", ) opacity: Union[int, str] = Field("50%", description="opacity for subtitle") - tag: str = Field("div", description="specify a custom tag used on root element") -# TODO: debug the title prop +# TODO: debug the title prop(not working) class ListSubheader(ZTComponent): """List SubHeader is used to specify the Sub Header of the List. Use Text component to provide the title details and pass it to the child component of List.""" @@ -92,7 +90,6 @@ class ListSubheader(ZTComponent): ) inset: bool = Field(False, description="inset for Subheader") sticky: bool = Field(False, description="sticky for subehader") - tag: str = Field("div", description="specify a custom tag used on root element") title: str = Field("", description="title for subheader") childComponents: List[str] = Field( [], From aa89fc269aa583038edce4541e45b2f483a87891 Mon Sep 17 00:00:00 2001 From: Harshita Poojary Date: Thu, 27 Jun 2024 16:24:27 -0700 Subject: [PATCH 13/13] Added default values and removed props that were not working --- zt_backend/models/components/list.py | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/zt_backend/models/components/list.py b/zt_backend/models/components/list.py index 03f676ff..b4a27948 100644 --- a/zt_backend/models/components/list.py +++ b/zt_backend/models/components/list.py @@ -1,6 +1,7 @@ -from pydantic import Field +from pydantic import Field, validator, 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 ListComponent(ZTComponent): @@ -10,7 +11,7 @@ class ListComponent(ZTComponent): childComponents: List[str] = Field( [], description="List of child component ids to be placed within the List" ) - color: str = Field(None, description="Background color of the List") + color: str = Field("primary", description="Background color of the List") elevation: int = Field( None, ge=0, @@ -25,6 +26,10 @@ class ListComponent(ZTComponent): width: Union[int, str] = Field("100%", description="Width of the List") height: Union[int, str] = Field("100%", description="Height of the List") + @field_validator("color") + def validate_color(cls, color): + return validate_color(color) + class ListItem(ZTComponent): """List Item helps define properties of individual items in the list""" @@ -33,7 +38,7 @@ class ListItem(ZTComponent): "v-list-item", description="Vue component name for List Item" ) title: str = Field("", description="item title") - color: str = Field(None, description="Background color of the List item") + color: str = Field("primary", description="Background color of the List item") elevation: int = Field( None, ge=0, @@ -54,6 +59,10 @@ class ListItem(ZTComponent): description="List of child component ids to be placed within the ListItem. List title, subtitle come as the child components of the list item", ) + @field_validator("color") + def validate_color(cls, color): + return validate_color(color) + class ListItemTitle(ZTComponent): """List Item Title is used to specify the title of the Lsit Item. Use Text component to provide the title details and pass it to the child component of List Item.""" @@ -67,7 +76,6 @@ class ListItemTitle(ZTComponent): ) -# TODO: debug opacity prop(not working) class ListItemSubtitle(ZTComponent): """List Item SubtitleTitle is used to specify the Subtitle of the List Item. Use Text component to provide the text details of the subtitle and pass it to the child component of List Item""" @@ -78,10 +86,8 @@ class ListItemSubtitle(ZTComponent): [], description="List of child component ids to be placed within the ListItemTitle. Mention v-test component to show the text of Subtitle", ) - opacity: Union[int, str] = Field("50%", description="opacity for subtitle") -# TODO: debug the title prop(not working) class ListSubheader(ZTComponent): """List SubHeader is used to specify the Sub Header of the List. Use Text component to provide the title details and pass it to the child component of List.""" @@ -90,8 +96,7 @@ class ListSubheader(ZTComponent): ) inset: bool = Field(False, description="inset for Subheader") sticky: bool = Field(False, description="sticky for subehader") - title: str = Field("", description="title for subheader") childComponents: List[str] = Field( [], description="List of child component ids to be placed within the List Subheader. Mention v-text component to show title for subheader", - ) + ) \ No newline at end of file