0.0.6

docs/grids_tutorial/grid_events.md

@@ -94,4 +94,80 @@ In the case of an event being one of `['sortChanged', 'filterChanged', 'columnMo
 !> When working with websockets, the size of each message is limited to 1 MByte when using uvicorn, so if your tables are larger, use Ajax by setting the `websockets` key word argument of the `justpy` command to `False`.
 
 
-
+## Linking a chart and a grid using grid events
+
+Using grid events, it requires a few lines of code to link a grid to a chart. Filtering and sorting changes in the grid, will be reflected in the chart.
+
+```python
+import justpy as jp
+import pandas as pd
+
+df = pd.read_csv('https://raw.githubusercontent.com/fivethirtyeight/data/master/alcohol-consumption/drinks.csv', encoding="ISO-8859-1")
+
+def grid_change(self, msg):
+    msg.page.df = jp.read_csv_from_string(msg.data)
+    c = msg.page.df.jp.plot(0, [1,2,3,4], kind='column', classes='m-2 p-2 w-2/3 border', title='Alcohol Consumption per Country')
+    msg.page.c.options = c.options
+
+def grid_test():
+    wp = jp.WebPage()
+    wp.df = df
+    wp.c = df.jp.plot(0, [1,2,3,4], kind='column', a=wp, classes='m-2 p-2 border', title='Alcohol Consumption per Country')
+    grid = df.jp.ag_grid(a=wp)
+    for event_name in ['sortChanged', 'filterChanged', 'columnMoved', 'rowDragEnd']:
+        grid.on(event_name, grid_change)
+    return wp
+
+jp.justpy(grid_test)
+```  
+
+## Create a Component to Link Chart and Grid
+
+The example above can be simplified even further by creating a component in which a chart and a grid are linked. With the new component in hand, charts and grids can be linked with one line of code.
+
+
+```python
+import justpy as jp
+import pandas as pd
+
+class LinkedChartGrid(jp.Div):
+
+    def __init__(self, df, x, y, **kwargs):
+        super().__init__(**kwargs)
+        self.df = df
+        self.x = x
+        self.y = y
+        self.kind = kwargs.get('kind', 'column')
+        self.stacking = kwargs.get('stacking', '')
+        self.title = kwargs.get('title', '')
+        self.subtitle = kwargs.get('subtitle', '')
+        self.set_classes('flex flex-col')
+        self.chart = df.jp.plot(x, y, a=self, classes='m-2 p-2 border', kind=self.kind, stacking=self.stacking, title=self.title, subtitle=self.subtitle)
+        self.grid = df.jp.ag_grid(a=self)
+        self.grid.parent = self
+        for event_name in ['sortChanged', 'filterChanged', 'columnMoved', 'rowDragEnd']:
+            self.grid.on(event_name, self.grid_change)
+
+
+    @staticmethod
+    def grid_change(self, msg):
+        self.parent.df = jp.read_csv_from_string(msg.data)
+        c = self.parent.df.jp.plot(self.parent.x, self.parent.y, kind=self.parent.kind, title=self.parent.title,
+                                   subtitle=self.parent.subtitle, stacking=self.parent.stacking)
+        self.parent.chart.options = c.options
+
+
+
+alcohol_df = pd.read_csv('https://raw.githubusercontent.com/fivethirtyeight/data/master/alcohol-consumption/drinks.csv', encoding="ISO-8859-1")
+bad_drivers_df = pd.read_csv('https://raw.githubusercontent.com/fivethirtyeight/data/master/bad-drivers/bad-drivers.csv', encoding="ISO-8859-1")
+
+
+def grid_test():
+    wp = jp.WebPage()
+    c = LinkedChartGrid(alcohol_df, 0, [1,2,3,4], kind='column', a=wp, classes='m-4 p-2 border',
+                        stacking='normal', title='Alcohol Consumption per Country', subtitle='538 data')
+    LinkedChartGrid(bad_drivers_df, 0, [1,2,3,4,5,6,7], kind='column', a=wp, classes='m-4 p-2 border-4', title='Bad Drivers per US State', subtitle='538 data')
+    return wp
+
+jp.justpy(grid_test)
+```

docs/quasar_tutorial/QBtnToggle.md

@@ -35,6 +35,7 @@ my_chart_def = """
 def button_change(self, msg):
     print(msg)
     self.chart.options.chart.type = self.value
+    self.chart.options.title.text = f'Chart of Type {self.value}'
 
 def button_toggle_test():
     wp = jp.QuasarPage()
@@ -46,5 +47,4 @@ def button_toggle_test():
 
 
 jp.justpy(button_toggle_test)
-
 ```

docs/quasar_tutorial/QColor.md

@@ -0,0 +1,32 @@
+# QColor
+
+The [Color Picker](https://quasar.dev/vue-components/color-picker) can be used to select colors.
+
+
+```python
+import justpy as jp
+
+def color_change(self, msg):
+    self.div.style = f'color: {self.value}'
+
+def input_test():
+    wp = jp.QuasarPage(data={'color': ''})
+    in1 = jp.QInput(filled=True, style='width: 400px', a=wp, model=[wp, 'color'], classes="q-pa-md", input=color_change)
+    j = jp.parse_html("""
+        <q-icon name="colorize" class="cursor-pointer">
+                <q-popup-proxy transition-show="scale" transition-hide="scale">
+                  <q-color name="color_input"/>
+                </q-popup-proxy>
+              </q-icon>
+        """)
+    in1.add_scoped_slot('append', j)
+    color_input = j.name_dict['color_input']
+    color_input.model = [wp, 'color']
+    color_input.on('change', color_change)
+    in1.div = jp.Div(text='Change this text color using QInput above', classes="q-pa-md text-h4", a=wp)
+    color_input.div = in1.div
+    return wp
+
+
+jp.justpy(input_test)
+```

docs/quasar_tutorial/QDate.md

@@ -35,4 +35,87 @@ jp.justpy(date_time_test)
 
 ## Date and Time as QInput slots
 
-Coming soon
+```python
+import justpy as jp
+
+# https://quasar.dev/vue-components/date#With-QInput
+
+def input_test():
+    wp = jp.QuasarPage(data={'date': '2019-02-01 12:44'})
+    in1 = jp.QInput(filled=True, style='width: 400px', a=wp, model=[wp, 'date'], classes="q-pa-md")
+    date_slot = jp.parse_html("""
+    <q-icon name="event" class="cursor-pointer">
+          <q-popup-proxy transition-show="rotate" transition-hide="rotate">
+            <q-date mask="YYYY-MM-DD HH:mm" name="date"/>
+          </q-popup-proxy>
+        </q-icon>
+    """)
+    time_slot = jp.parse_html("""
+        <q-icon name="access_time" class="cursor-pointer">
+          <q-popup-proxy transition-show="scale" transition-hide="scale">
+            <q-time mask="YYYY-MM-DD HH:mm" format24h name="time"/>
+          </q-popup-proxy>
+        </q-icon>
+        """)
+    date_slot.name_dict['date'].model = [wp, 'date']
+    time_slot.name_dict['time'].model = [wp, 'date']
+    in1.prepend_slot = date_slot
+    in1.append_slot = time_slot
+    return wp
+
+```
+
+Or you can arrive at the same result by creating a reusable component:
+
+```python
+import justpy as jp
+
+# https://quasar.dev/vue-components/date#With-QInput
+
+class QInputDateTime(jp.QInput):
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+
+        date_slot = jp.QIcon(name='event', classes='cursor-pointer')
+        c2 = jp.QPopupProxy(transition_show='scale', transition_hide='scale', a=date_slot)
+        self.date = jp.QDate(mask='YYYY-MM-DD HH:mm', name='date', a=c2)
+
+        time_slot = jp.QIcon(name='access_time', classes='cursor-pointer')
+        c2 = jp.QPopupProxy(transition_show='scale', transition_hide='scale', a=time_slot)
+        self.time = jp.QTime(mask='YYYY-MM-DD HH:mm', format24h=True, name='time', a=c2)
+
+        self.date.parent = self
+        self.time.parent = self
+        self.date.value = self.value
+        self.time.value = self.value
+        self.prepend_slot = date_slot
+        self.append_slot = time_slot
+        self.date.on('input', self.date_time_change)
+        self.time.on('input', self.date_time_change)
+        self.on('input', self.input_change)
+
+    @staticmethod
+    def date_time_change(self, msg):
+        print(self.value)
+        self.parent.value = self.value
+        self.parent.date.value = self.value
+        self.parent.time.value = self.value
+
+    @staticmethod
+    def input_change(self, msg):
+        self.date.value = self.value
+        self.time.value = self.value
+
+
+def input_test():
+    wp = jp.QuasarPage()
+    QInputDateTime(filled=True, style='width: 600px', a=wp, classes="q-pa-md", value='')
+    QInputDateTime(filled=True, style='width: 600px', a=wp, classes="q-pa-md", value='2020-03-01 12:44')
+    QInputDateTime(filled=True, style='width: 600px', a=wp, classes="q-pa-md", value='2021-04-01 14:44')
+    QInputDateTime(filled=True, style='width: 600px', a=wp, classes="q-pa-md", value='2022-05-01 18:44')
+    return wp
+
+
+jp.justpy(input_test)
+```

docs/reference/htmlcomponent.md

@@ -153,6 +153,31 @@ When an element is bound to an event, the event name (of type string) is added t
 If an event name is not in `allowed_events`, JustPy will generate an error if you try to bind to that event.
 You can use the `add_event` method to add an allowed event to the list.
 
+#### additional_properties
+
+ * Type: `list`
+ * Default: `[]`
+
+JustPy does not pass all the JavaScript event properties by default since in most cases they are not needed. If you need additional properties from the JavasScript event, use the `additional_properties` attribute. In the example below, more fields are added to `msg`.
+
+```python
+import justpy as jp
+
+def my_click(self, msg):
+    print(msg)
+    self.text = 'I was clicked'
+
+def event_demo():
+    wp = jp.WebPage()
+    wp.debug = True
+    d = jp.Div(text='Not clicked yet', a=wp, classes='w-48 text-xl m-2 p-1 bg-blue-500 text-white')
+    d.on('click', my_click)
+    d.additional_properties =['screenX', 'pageY','altKey','which','movementX','button', 'buttons']
+    return wp
+
+jp.justpy(event_demo)
+```
+
 #### inner_html
 
  * Type: `string`

docs/tutorial/before_after_events.md

@@ -4,7 +4,7 @@ Occasionally, you need to do something before an event handler is run, or after
 
 For example, before the input event handler is run, you would like the value of the Python element to reflect the value of the respective input element on the page. Even if you have not assigned an input handler to that particular element, you may want to update the value anyway so it is available for other event handlers or background tasks.
 
-In fact, this is what happens with QInput elements. Even when they are not assigned an input event handler, they run an event handler for the <span style="color: red">before</span> event to correctly update the value of the element. 
+In fact, this is what happens with Input and QInput elements. Even when they are not assigned an input event handler, they run an event handler for the <span style="color: red">before</span> event to correctly update the value of the element. 
 
 In the example below, a different notification is shown for each button clicked. This is done by setting the `show` attribute of the notification to `True` in the click event handler. Then, the <span style="color: red">after</span> event handler is run, and it sets the `show` attribute back to `False` so that it is not displayed next time the page is updated. 
 

docs/tutorial/custom_components.md

@@ -1062,4 +1062,113 @@ def table_test():
     return wp
 
 jp.justpy(table_test)
-``` 
+``` 
+
+## Quasar QInput Component with Integrated QDate and QTime
+
+
+```python
+import justpy as jp
+
+# https://quasar.dev/vue-components/date#With-QInput
+
+class QInputDateTime(jp.QInput):
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+
+        date_slot = jp.QIcon(name='event', classes='cursor-pointer')
+        c2 = jp.QPopupProxy(transition_show='scale', transition_hide='scale', a=date_slot)
+        self.date = jp.QDate(mask='YYYY-MM-DD HH:mm', name='date', a=c2)
+
+        time_slot = jp.QIcon(name='access_time', classes='cursor-pointer')
+        c2 = jp.QPopupProxy(transition_show='scale', transition_hide='scale', a=time_slot)
+        self.time = jp.QTime(mask='YYYY-MM-DD HH:mm', format24h=True, name='time', a=c2)
+
+        self.date.parent = self
+        self.time.parent = self
+        self.date.value = self.value
+        self.time.value = self.value
+        self.prepend_slot = date_slot
+        self.append_slot = time_slot
+        self.date.on('input', self.date_time_change)
+        self.time.on('input', self.date_time_change)
+        self.on('input', self.input_change)
+
+    @staticmethod
+    def date_time_change(self, msg):
+        print(self.value)
+        self.parent.value = self.value
+        self.parent.date.value = self.value
+        self.parent.time.value = self.value
+
+    @staticmethod
+    def input_change(self, msg):
+        self.date.value = self.value
+        self.time.value = self.value
+
+
+def input_test():
+    wp = jp.QuasarPage()
+    QInputDateTime(filled=True, style='width: 600px', a=wp, classes="q-pa-md", value='')
+    QInputDateTime(filled=True, style='width: 600px', a=wp, classes="q-pa-md", value='2020-03-01 12:44')
+    QInputDateTime(filled=True, style='width: 600px', a=wp, classes="q-pa-md", value='2021-04-01 14:44')
+    QInputDateTime(filled=True, style='width: 600px', a=wp, classes="q-pa-md", value='2022-05-01 18:44')
+    return wp
+
+
+jp.justpy(input_test)
+```
+
+## Component to Link Chart and Grid
+
+Please see [linking charts and grids](grids_tutorial/grid_events?id=linking-a-chart-and-a-grid-using-grid-events) for an explanation.
+
+When you use ag-Grid's filtering and sorting options, the results are not just reflected in the grid, but also in the chart.
+
+
+```python
+import justpy as jp
+import pandas as pd
+
+class LinkedChartGrid(jp.Div):
+
+    def __init__(self, df, x, y, **kwargs):
+        super().__init__(**kwargs)
+        self.df = df
+        self.x = x
+        self.y = y
+        self.kind = kwargs.get('kind', 'column')
+        self.stacking = kwargs.get('stacking', '')
+        self.title = kwargs.get('title', '')
+        self.subtitle = kwargs.get('subtitle', '')
+        self.set_classes('flex flex-col')
+        self.chart = df.jp.plot(x, y, a=self, classes='m-2 p-2 border', kind=self.kind, stacking=self.stacking, title=self.title, subtitle=self.subtitle)
+        self.grid = df.jp.ag_grid(a=self)
+        self.grid.parent = self
+        for event_name in ['sortChanged', 'filterChanged', 'columnMoved', 'rowDragEnd']:
+            self.grid.on(event_name, self.grid_change)
+
+
+    @staticmethod
+    def grid_change(self, msg):
+        self.parent.df = jp.read_csv_from_string(msg.data)
+        c = self.parent.df.jp.plot(self.parent.x, self.parent.y, kind=self.parent.kind, title=self.parent.title,
+                                   subtitle=self.parent.subtitle, stacking=self.parent.stacking)
+        self.parent.chart.options = c.options
+
+
+
+alcohol_df = pd.read_csv('https://raw.githubusercontent.com/fivethirtyeight/data/master/alcohol-consumption/drinks.csv', encoding="ISO-8859-1")
+bad_drivers_df = pd.read_csv('https://raw.githubusercontent.com/fivethirtyeight/data/master/bad-drivers/bad-drivers.csv', encoding="ISO-8859-1")
+
+
+def grid_test():
+    wp = jp.WebPage()
+    c = LinkedChartGrid(alcohol_df, 0, [1,2,3,4], kind='column', a=wp, classes='m-4 p-2 border',
+                        stacking='normal', title='Alcohol Consumption per Country', subtitle='538 data')
+    LinkedChartGrid(bad_drivers_df, 0, [1,2,3,4,5,6,7], kind='column', a=wp, classes='m-4 p-2 border-4', title='Bad Drivers per US State', subtitle='538 data')
+    return wp
+
+jp.justpy(grid_test)
+```

docs/tutorial/getting_started.md

@@ -6,6 +6,8 @@ In addition, a basic understanding of HTML is required ([HTML - Getting Started]
 
 ?> The examples in this tutorial use [Python f-strings](https://realpython.com/python-f-strings/) which were added in Python 3.6
 
+?> If you have a question about JustPy please open an issue in the [JustPy Github repository](https://github.com/elimintz/justpy) or post a question with the tag `[justpy]` to [stack overflow](https://stackoverflow.com/). I will try to answer promptly.
+
 ## Installation
 
 First, make sure that the version of `python3` you have is 3.6 or higher: