diff --git a/docs/advanced_usage.rst b/docs/advanced_usage.rst index 890fcfa2..6b6681ec 100644 --- a/docs/advanced_usage.rst +++ b/docs/advanced_usage.rst @@ -7,7 +7,7 @@ Advanced Usage Slots are used to add content at a certain location in a widget. You can find out what slots a widget supports by using the Vuetify documentation. If you want to know what slots :code:`Select` has, search for :code:`v-select` on the `Vuetify API explorer `_ or for this example use the `direct link -`_. On the left-hand side of list of attributes you will find a tab +`_. On the left-hand side of the list of attributes you will find a tab 'slots'. An example for using the slot 'no-data', which changes what the Select widget shows when it has no items: @@ -101,7 +101,7 @@ exposes it as the 'on' variable. Responsive Layout ----------------- -When making dashbords with Voilà you can change the layout depending on the users screen size. This is done with a `grid +When making dashboards with Voilà you can change the layout depending on the user's screen size. This is done with a `grid system `_. For example on a laptop (breakpoint md) you could fit two elements next to each other while on a smartphone (defined with 'cols' as default) you would want one element to take up the full width: diff --git a/docs/conf.py b/docs/conf.py index 5e8a29a3..d241ff40 100644 --- a/docs/conf.py +++ b/docs/conf.py @@ -15,7 +15,7 @@ # -- General configuration --------------------------------------------------- -extensions = ["jupyter_sphinx", "sphinx_rtd_theme", "sphinx_design"] +extensions = ["jupyter_sphinx", "sphinx_design"] templates_path = ["_templates"] exclude_patterns = ["_build", "Thumbs.db", ".DS_Store"] @@ -24,6 +24,9 @@ html_theme = "pydata_sphinx_theme" html_static_path = ["_static"] html_css_files = ["custom.css"] +html_sidebars = { + "**": [], +} # -- Theme configuration ----------------------------------------------------- @@ -34,8 +37,6 @@ "secondary_sidebar_items": [ "page-toc.html", "searchbox.html", - "edit-this-page.html", - "sourcelink.html", ], "icon_links": [ { diff --git a/docs/fruit-selector.vue b/docs/fruit-selector.vue index 5536a82b..5986a615 100644 --- a/docs/fruit-selector.vue +++ b/docs/fruit-selector.vue @@ -5,7 +5,7 @@ Add banana Remove banana Add from PytonAdd from Python Available fruits diff --git a/docs/installation.rst b/docs/installation.rst index 258d60e9..4b15f4e0 100644 --- a/docs/installation.rst +++ b/docs/installation.rst @@ -18,14 +18,16 @@ Using conda Jupyter Lab ----------- -If you're using only the classic notebook, you're done. If you're using Jupyter Lab, the extension has to be installed -in Jupyter Lab: +If you're using the classic notebook or JupyterLab 3 and later, you're done after installing the Python package. +The JupyterLab extension is included in the ``ipyvuetify`` package. + +For JupyterLab 1 and 2, install the JupyterLab extension separately: .. code-block:: bash $ jupyter labextension install jupyter-vuetify .. note:: - ipyvuetify depends on ipywidgets being installed in Jupyter Lab, see the `ipywidgets documentation - `_ on how to do - that. + ipyvuetify depends on ipywidgets being available in JupyterLab. If widgets do not display, see the + `ipywidgets installation documentation + `_. diff --git a/docs/introduction.rst b/docs/introduction.rst index 76702d20..b890215f 100644 --- a/docs/introduction.rst +++ b/docs/introduction.rst @@ -1,11 +1,11 @@ Introduction ============ -Ipyvuetify is a widget library for making modern looking GUI's in Jupyter notebooks (classic and lab) and dashboards +Ipyvuetify is a widget library for making modern-looking GUIs in Jupyter notebooks (classic and lab) and dashboards (`Voilà `_). It's based on the `Google material design philosophy `_ best known from the Android user interface. -A large set of widgets is provided with many widgets having multiple variants. a few of which are displayed below. +A large set of widgets is provided, with many widgets having multiple variants. A few of them are displayed below. .. TODO: fix CSS collisions with rtd_theme @@ -20,7 +20,7 @@ the standard widget library of Jupyter, ipyvuetify has a lot more widgets which composable at the expense of a bit more verbosity in the source code. Ipyvuetify uses the machinery of `ipywidgets `_ -as a base, but has different conventions for the API. This is mainly due to the fact the Python API is generated from +as a base, but has different conventions for the API. This is mainly because the Python API is generated from the JavaScript library it is based on: `Vuetify `_. This exposes the full power of Vuetify and allows us to rely on the extensive documentation and examples of it. Generating code and relying on documentation from the underlying library allowed us to expose a lot of widgets to Jupyter in a relatively short amount of time. diff --git a/docs/template_usage.rst b/docs/template_usage.rst index 6f30d912..7f9bfe61 100644 --- a/docs/template_usage.rst +++ b/docs/template_usage.rst @@ -5,7 +5,7 @@ First template -------------- When building larger UI's it may be convenient to write composite widgets using -the Vue template syntax. Lets start with a basic example: +the Vue template syntax. Let's start with a basic example: .. jupyter-execute:: @@ -87,7 +87,7 @@ Template in vue files Although a powerful feature, programming Vue templates in a string is quite cumbersome, since you lose syntax highlighting and other advanced editor -features. Instead, we can put out Vue template into a ``.vue`` file, and point +features. Instead, we can put our Vue template into a ``.vue`` file, and point our VuetifyTemplate to it. @@ -150,7 +150,7 @@ A demonstration in a screen capture: .. note:: - For this feature we require the watchdog packages. Install it using ``pip install "watchdog>=2.0"`` or ``conda install -c conda-forge "watchdog>=2.0"`` + For this feature we require the watchdog package. Install it using ``pip install "watchdog>=2.0"`` or ``conda install -c conda-forge "watchdog>=2.0"`` Embed ipywidgets ---------------- diff --git a/docs/usage.rst b/docs/usage.rst index 793c0bc9..534dd7c3 100644 --- a/docs/usage.rst +++ b/docs/usage.rst @@ -30,11 +30,11 @@ Attributes can be changed at a later time by: 'Banana')`, are not detected by ipywidgets. What widgets are available and how they look can be found in the -`Vuetify documentation `_. Browse the side bar on the left hand side and -select a widget, then click <> on the right hand side on an example to see the source code for it. The HTML code may +`Vuetify documentation `_. Browse the sidebar on the left-hand side and +select a widget, then click <> on the right-hand side on an example to see the source code for it. The HTML code may seem unfamiliar at first, but this documentation will guide you through it. For starters to translate the Vuetify widget names, which are starting with :code:`v-`, to ipyvuetify, remove the :code:`v-` prefix and CamelCase the remaining -name. E.g :code:`v-select` becomes :code:`Select` and :code:`v-list-item` becomes :code:`ListItem`. +name. For example, :code:`v-select` becomes :code:`Select` and :code:`v-list-item` becomes :code:`ListItem`. Equivalent Vuetify syntax of the example above: @@ -78,7 +78,7 @@ ipyvuetify: v.Select(clearable=True, label='Fruits', items=['Apple', 'Pear', 'Cherry'], value='Apple') -Some attribute have naming conflicts with Python or ipywidgets. These are :code:`for`, :code:`open`, :code:`class` and +Some attributes have naming conflicts with Python or ipywidgets. These are :code:`for`, :code:`open`, :code:`class` and :code:`style` and must be suffixed with an underscore. For example :code:`style` becomes :code:`style_` Vuetify: @@ -101,7 +101,7 @@ see an example of this. To look at how that variable is initialized you select t If it's an expression it's mostly used to set a List or a Dict, as is done with :code:`items` in the examples above. This can be the same in ipyvuetify. -for non-vuetify related attributes, the ones from the HTML tag, can be accessed through the :code:`attributes` trait. +For non-vuetify related attributes, the ones from the HTML tag, can be accessed through the :code:`attributes` trait. Vuetify: @@ -256,7 +256,7 @@ All `HTML events `_ can omitted. Widgets can have custom events, to find out which, the `Vuetify API explorer -`_ can be used. Search for a component and on the left-hand side of list +`_ can be used. Search for a component and on the left-hand side of the list of attributes you will find a tab for the events. In Vuetify events are defined as attributes with an :code:`@` prefix. The equivalent Vuetify syntax of the example above @@ -341,7 +341,7 @@ And colors: ClassList attribute ^^^^^^^^^^^^^^^^^^^ -The :code:`class` attribute of a Vuetify DOM elements give access to the built-in styles of the lib. See the `vuetify site `__ to know more about available styling class. As mentioned in the previous section this can be set using the :code:`class_` member of the widget. In addition, ipyvuetify provides a :code:`class_list` member that works the same way as the `MDN classList property `__. It embeds the following methods: +The :code:`class` attribute of Vuetify DOM elements gives access to the built-in styles of the library. See the `Vuetify site `__ to learn more about available styling classes. As mentioned in the previous section this can be set using the :code:`class_` member of the widget. In addition, ipyvuetify provides a :code:`class_list` member that works the same way as the `MDN classList property `__. It embeds the following methods: - :code:`add(*args)`: add class elements to the class\_ trait of the widget @@ -378,7 +378,7 @@ The :code:`class` attribute of a Vuetify DOM elements give access to the built-i Visibility ^^^^^^^^^^ -ipyvuetify widgets visibility can be changed using the built-in methods :code:`hide()` and :code:`show()`. +ipyvuetify widget visibility can be changed using the built-in methods :code:`hide()` and :code:`show()`. Using :code:`hide` will add the :code:`d-none` class to the widget and :code:`show` will remove it, hiding and showing the widget to the end user without removing it from the notebook. .. jupyter-execute:: @@ -505,11 +505,11 @@ translation from Vuetify examples to ipyvuetify. - Component names convert to CamelCase and the v- prefix is stripped - +------------+------------------------+ - | Vuetify | ```` | - +------------+------------------------+ - | ipyvuetify | ``ListTitle(...)`` | - +------------+------------------------+ + +------------+------------------------------+ + | Vuetify | ```` | + +------------+------------------------------+ + | ipyvuetify | ``ListItemTitle(...)`` | + +------------+------------------------------+ - Attributes @@ -523,11 +523,11 @@ translation from Vuetify examples to ipyvuetify. - must have a value - +------------+------------------------+ - | Vuetify | ``...`` | diff --git a/pyproject.toml b/pyproject.toml index 35083254..6c8bcfd2 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -55,7 +55,6 @@ doc = [ "ipykernel", "pydata-sphinx-theme", "sphinx-design", - "sphinx_rtd_theme", ] [tool.setuptools]