solara-ui 1.31.0__py2.py3-none-any.whl

solara/components/head.py

@@ -0,0 +1,27 @@
+from typing import List
+
+import reacton
+import solara
+
+
+@reacton.component
+def Head(children: List[reacton.core.Element] = []):
+    """A component that manager the "head" tag of the page to avoid duplicate tags, such as titles.
+
+    Currently only supports the [title](/documentation/components/page/title) tag as child, e.g.:
+
+    ```python
+    import solara
+
+    @solara.component
+    def Page():
+        with solara.VBox() as main:
+            MyAwesomeComponent()
+            with solara.Head():
+                solara.Title("My page title")
+        return main
+
+    ```
+
+    """
+    return solara.Div(children=children, style="display; none")

solara/components/head_tag.py

@@ -0,0 +1,49 @@
+from typing import Optional
+
+import ipyvuetify as vy
+import reacton.core
+import solara
+import traitlets
+
+
+class HeadTagWidget(vy.VuetifyTemplate):
+    template_file = (__file__, "head_tag.vue")
+    tagname = traitlets.Unicode().tag(sync=True)
+    key = traitlets.Unicode(None, allow_none=True).tag(sync=True)
+    attributes = traitlets.Dict().tag(sync=True)
+    level = traitlets.Int().tag(sync=True)
+
+
+@solara.component
+def HeadTag(tagname: str, key=None, attributes: Optional[dict] = None):
+    """Add a child element to head element, or replace a meta tag with the same tagname and key.
+
+    This component should be used inside a [Head](/documentation/components/page/head) component, e.g.:
+
+    ```python
+    import solara
+
+    @solara.component
+    def Page():
+        with solara.VBox() as main:
+            MyAwesomeComponent()
+            with solara.Head():
+                solara.HeadTag(tagname="meta", attributes={"name": "description", "content": "My page description"})
+        return main
+    ```
+
+    If multiple HeadTag components are used with the same key, the 'deepest' child will take precedence.
+
+    ## Arguments
+
+     * tagname: the tagname of the element (e.g. 'meta', 'link', 'script')
+     * attributes: a dictionary of attributes to set on the element.
+    """
+    level = 0
+    rc = reacton.core.get_render_context()
+    context = rc.context
+    while context and context.parent:
+        level += 1
+        context = context.parent
+    attributes = attributes or {}
+    return HeadTagWidget.element(tagname=tagname, key=key, attributes=attributes, level=level)

solara/components/head_tag.vue

@@ -0,0 +1,60 @@
+<template><span></span></template>
+
+<script>
+module.exports = {
+  mounted() {
+    if (window._solaraHeadTags === undefined) {
+      window._solaraHeadTags = {};
+    }
+    if (window._solaraHeadTags[this.key] === undefined) {
+      window._solaraHeadTags[this.key] = [];
+    }
+    window._solaraHeadTags[this.key].push(this);
+    this.updateElement();
+  },
+  destroyed() {
+    const tags = window._solaraHeadTags[this.key];
+    tags.splice(tags.indexOf(this), 1);
+    // ask another headtag to update the element
+    if (tags.length) {
+      tags[0].updateElement();
+    }
+  },
+  watch: {
+    tagname() {
+      this.updateElement();
+    },
+    attributes() {
+      this.updateElement();
+    },
+    level() {
+      this.updateElement();
+    },
+  },
+  methods: {
+    updateElement() {
+      const tags = window._solaraHeadTags[this.key];
+      let deepestTag = tags[0];
+      for (let i = 1; i < tags.length; i++) {
+        if (tags[i].level > deepestTag.level) {
+          deepestTag = tags[i];
+        }
+      }
+      let el = document.head.querySelector(`[data-solara-head-key="${deepestTag.tagname}-${deepestTag.key}"]`);
+      if (el === null) {
+        el = document.createElement(deepestTag.tagname);
+        document.head.appendChild(el);
+      } else {
+        el.innerHTML = '';
+        while (el.attributes.length > 0) {
+          el.removeAttribute(el.attributes[0].name);
+        }
+      }
+      Object.keys(deepestTag.attributes).forEach((key) => {
+        el.setAttribute(key, deepestTag.attributes[key]);
+      });
+      el.setAttribute('data-solara-head-key', `${deepestTag.tagname}-${deepestTag.key}`);
+    }
+  },
+};
+</script>

solara/components/image.py

@@ -0,0 +1,173 @@
+import typing
+from io import BytesIO
+from pathlib import Path
+from typing import List, Optional, Union
+
+import solara
+from solara.alias import rw
+
+if typing.TYPE_CHECKING:
+    import numpy as np
+    import PIL.Image
+
+
+@solara.component
+def Image(
+    image: Union[str, Path, "np.ndarray", bytes, "PIL.Image.Image"],
+    width: Optional[str] = None,
+    format="png",
+    classes: List[str] = [],
+):
+    """Displays an image from a URL, Path, numpy data, bytes or PIL image.
+
+    If passed as bytes, the image is assumed to be in the format specified by the `format` argument.
+
+    ## Examples
+
+    ### Displaying an image from a Path
+
+    ```solara
+    import solara
+    import solara.website
+    from pathlib import Path
+
+
+    image_path = Path(solara.website.__file__).parent / "public/beach.jpeg"
+
+    @solara.component
+    def Page():
+        solara.Image(image_path)
+    ```
+
+    ### Displaying an image from a URL
+
+    ```solara
+    import solara
+
+
+    image_url = "/static/public/beach.jpeg"
+
+    @solara.component
+    def Page():
+        solara.Image(image_url)
+        display(image_url)
+
+    ```
+
+    ### Displaying an image from a numpy array
+
+    ```solara
+
+    import solara
+    import solara.website
+    from pathlib import Path
+    import numpy as np
+    import PIL.Image
+
+
+    image_path = Path(solara.website.__file__).parent / "public/beach.jpeg"
+    image_ndarray = np.asarray(PIL.Image.open(image_path))
+
+    @solara.component
+    def Page():
+        solara.Image(image_ndarray)
+        display(image_ndarray)
+    ```
+
+    ### Displaying an image from bytes
+
+    ```solara
+
+    import solara
+    import solara.website
+    from pathlib import Path
+    import PIL.Image
+
+
+    image_path = Path(solara.website.__file__).parent / "public/beach.jpeg"
+    image_bytes = image_path.read_bytes()
+
+    @solara.component
+    def Page():
+        solara.Image(image_bytes, format="jpeg")
+        display(image_bytes[:100])
+    ```
+
+    ### Displaying an image from a PIL Image
+
+    ```solara
+
+    import solara
+    import solara.website
+    from pathlib import Path
+    import PIL.Image
+
+
+    image_path = Path(solara.website.__file__).parent / "public/beach.jpeg"
+    image = PIL.Image.open(image_path)
+
+    @solara.component
+    def Page():
+        solara.Image(image)
+    ```
+
+
+    ## Arguments
+     * `image`: URL, Path, numpy data, bytes or PIL Image.
+     * `width`: Width of the image, by default (None) the image is displayed at its original size.
+        Other options are: "100%" (to full its parent size), "100px" (to display it at 100 pixels wide),
+        or any other CSS width value.
+     * `format`: Format of the image, only used when image is of type bytes, or a PIL Image is passed.
+     * `classes`: List of CSS classes to add to the image.
+    """
+    layout = {}
+    if width:
+        layout["width"] = width
+    classes = ["solara-image"] + classes
+    if isinstance(image, (str, Path)):
+        path = Path(image)
+        if path.exists():
+            import ipywidgets
+
+            format = ipywidgets.Image._guess_format("image", str(path))
+            value = ipywidgets.Image._load_file_value(str(path))
+            return rw.Image(
+                value=value,
+                format=format,
+                _dom_classes=classes,  # type: ignore
+                layout=layout,
+            )
+        elif isinstance(image, str):
+            url_data = image.encode("utf8")
+            return rw.Image(
+                value=url_data,
+                format="url",
+                _dom_classes=classes,  # type: ignore
+                layout=layout,
+            )
+    elif isinstance(image, bytes):
+        return rw.Image(
+            value=image,
+            format=format,
+            _dom_classes=classes,  # type: ignore
+            layout=layout,
+        )
+    elif solara.util.isinstanceof(image, "PIL.Image:Image"):
+        f = BytesIO()
+        image.save(f, format=format)  # type: ignore
+        value = f.getvalue()
+        return rw.Image(
+            value=value,
+            format="png",
+            _dom_classes=classes,  # type: ignore
+            layout=layout,
+        )
+    elif solara.util.isinstanceof(image, "numpy:ndarray"):
+        value = solara.util.numpy_to_image(image, format="png")  # type: ignore
+        return rw.Image(
+            value=value,
+            format="png",
+            _dom_classes=classes,  # type: ignore
+            layout=layout,
+        )
+    raise TypeError(f"Only support URL, path or numpy array, not {image}")