@qtoggle/qui 0.0.0

package/less/widgets/progress-disk.less

@@ -0,0 +1,70 @@
+
+@import (reference) "../base";
+@import (reference) "../theme";
+
+
+div.qui-progress-disk-container {
+    position: relative;
+
+    & > svg {
+        transform: rotate(-90deg);
+        vertical-align: top;
+
+        & > ellipse.qui-progress-disk-ring {
+            opacity: 0.2;
+            fill: transparent;
+        }
+
+        & > path.qui-progress-disk-cursor {
+            fill: transparent;
+        }
+
+    }
+
+    & > div.qui-progress-disk-label {
+        position: absolute;
+        width: 100%;
+        top: 0;
+        left: 0;
+        text-align: center;
+        font-size: 90%;
+
+        &.small {
+            font-size: 50%;
+        }
+
+    }
+
+    &.no-value > svg {
+        transform: rotate(0deg);
+        animation: spin 1s linear infinite;
+    }
+
+    &.has-warning {
+
+        & > svg > ellipse.qui-progress-disk-ring,
+        & > svg > path.qui-progress-disk-cursor {
+            stroke: @warning-color !important;
+        }
+
+    }
+
+    &.has-error {
+
+        & > svg > ellipse.qui-progress-disk-ring,
+        & > svg > path.qui-progress-disk-cursor {
+            stroke: @error-color !important;
+        }
+
+    }
+
+    &.disabled {
+
+        & > svg > ellipse.qui-progress-disk-ring,
+        & > svg > path.qui-progress-disk-cursor {
+            stroke: @disabled-color !important;
+        }
+
+    }
+
+}

package/less/widgets/slider.less

@@ -0,0 +1,199 @@
+
+@import (reference) "../base";
+@import (reference) "../theme";
+@import (reference) "common";
+
+
+div.qui-slider {
+    padding: 0.5em 0.8em 0.8em 0.8em;
+    overflow: hidden;
+    .noselect;
+
+    & > div.qui-slider-labels {
+        position: relative;
+        white-space: nowrap;
+        height: 1.8em;
+        margin: 0 0.5em;
+
+        & > span.qui-slider-label {
+            width: 30%;
+            text-align: center;
+            position: absolute;
+            font-size: 0.85em;
+            opacity: 1;
+            transition: opacity @transition-duration ease,
+                        color @transition-duration ease;
+
+            &.qui-slider-cursor-label {
+                color: @interactive-color;
+            }
+
+            &.overlapped {
+                opacity: 0;
+            }
+
+        }
+
+        &:NOT(.all-ticks-visible) {
+
+            & > span.qui-slider-cursor-label {
+                background: linear-gradient(to right,
+                                            transparent 0%, @background-color 25%,
+                                            @background-color 75%, transparent 100%);
+            }
+
+        }
+
+        &.all-ticks-visible {
+
+            & > span.qui-slider-label {
+                transition: none;
+            }
+
+        }
+
+    }
+
+    & > div.qui-slider-bar-container {
+        padding: 0 0.5em;
+
+        & > div.qui-slider-bar {
+            position: relative;
+            height: 0.5em;
+            border: 0.0625em solid @interactive-color;
+            border-radius: 0.2em;
+            transition: border-color @transition-duration linear;
+
+            & > div.qui-slider-cursor {
+                position: absolute;
+                left: 0;
+                top: -0.5em;
+                width: 1.5em;
+                height: 1.5em;
+                margin-left: -0.75em;
+                cursor: pointer;
+                border-width: 0;
+                border-radius: 0.2em;
+                background: @interactive-color;
+                transition+: background @transition-duration ease;
+                .qui-focusable-widget();
+            }
+
+            & > div.qui-slider-cursor.active {
+                background: @interactive-active-color;
+            }
+
+        }
+
+    }
+
+    &:FOCUS {
+
+        & > div.qui-slider-bar-container > div.qui-slider-bar > div.qui-slider-cursor {
+            .qui-focused-widget();
+        }
+
+    }
+
+    &.active {
+
+        & > div.qui-slider-labels {
+
+            & > span.qui-slider-label.overlapped:NOT(.completely-overlapped) {
+                opacity: 1;
+            }
+
+        }
+
+    }
+
+    &.has-warning {
+
+        & > div.qui-slider-bar-container > div.qui-slider-bar {
+            border-color: @warning-color;
+
+            & > div.qui-slider-cursor {
+                background: @warning-color;
+
+                &.active {
+                    background: @warning-active-color;
+                }
+
+            }
+
+        }
+
+        &:FOCUS > div.qui-slider-bar-container > div.qui-slider-bar > div.qui-slider-cursor {
+            .qui-focused-widget-warning();
+        }
+
+    }
+
+    &.has-error {
+
+        & > div.qui-slider-bar-container > div.qui-slider-bar {
+            border-color: @error-color;
+
+            & > div.qui-slider-cursor {
+                background: @error-color;
+
+                &.active {
+                    background: @error-active-color;
+                }
+
+            }
+
+        }
+
+        &:FOCUS > div.qui-slider-bar-container > div.qui-slider-bar > div.qui-slider-cursor {
+            .qui-focused-widget-error();
+        }
+
+    }
+
+    &.readonly {
+
+        & > div.qui-slider-bar-container > div.qui-slider-bar {
+            border-color: @readonly-color;
+
+            & > div.qui-slider-cursor {
+                background: @foreground-color;
+
+                &.active {
+                    background: @foreground-color;
+                }
+
+            }
+
+        }
+
+        &:FOCUS > div.qui-slider-bar-container > div.qui-slider-bar > div.qui-slider-cursor {
+            .qui-focused-widget-readonly();
+        }
+
+    }
+
+    &.disabled {
+
+        & > div.qui-slider-labels > span.qui-slider-label {
+            color: @disabled-color;
+        }
+
+        & > div.qui-slider-bar-container > div.qui-slider-bar {
+            border-color: @disabled-color;
+
+            & > div.qui-slider-cursor {
+                background: @disabled-color;
+                cursor: default;
+
+                &.active {
+                    background: @disabled-color;
+                }
+
+            }
+
+        }
+
+    }
+
+}

package/less/widgets/updown.less

@@ -0,0 +1,115 @@
+
+@import (reference) "../base";
+@import (reference) "../theme";
+@import (reference) "common";
+
+
+div.qui-updown-container {
+    white-space: nowrap;
+    overflow: hidden;
+    border-radius: 0.2em;
+    .qui-focusable-widget();
+
+    & > input.qui-updown-input {
+        width: 100%;
+        height: 1.75em;
+        box-sizing: border-box;
+        border-color: @interactive-color;
+    }
+
+    & > div.qui-updown-button {
+        display: inline-block;
+        width: 1.75em;
+        height: 1.75em;
+        line-height: 1.75em;
+        vertical-align: top;
+        text-align: center;
+        border-width: 0;
+
+        &.down {
+            margin-left: -3.5625em;
+            border-radius: 0;
+
+            &:AFTER {
+                content: '\2013';
+            }
+
+        }
+
+        &.up {
+            margin-left: 0.0625em;
+            border-radius: 0 0.2em 0.2em 0;
+
+            &:AFTER {
+                content: '+';
+            }
+
+        }
+
+    }
+
+    &:FOCUS {
+        .qui-focused-widget();
+    }
+
+    &.has-error {
+
+        & > input.qui-updown-input {
+            border-color: @error-color;
+        }
+
+        & > div.qui-updown-button {
+            background: @error-color;
+
+            &.active {
+                background: @error-active-color;
+            }
+        }
+
+        &:FOCUS {
+            .qui-focused-widget-error();
+        }
+
+    }
+
+    &.readonly {
+
+        & > input.qui-updown-input {
+            border-color: @readonly-color;
+        }
+
+        & > div.qui-updown-button {
+            background: @readonly-color;
+            cursor: default;
+
+            &.active {
+                background: @readonly-color;
+            }
+
+        }
+
+        &:FOCUS {
+            .qui-focused-widget-readonly();
+        }
+
+    }
+
+    &.disabled {
+
+        & > input.qui-updown-input {
+            border-color: @disabled-color;
+        }
+
+        & > div.qui-updown-button {
+            background: @disabled-color;
+            cursor: default;
+
+            &.active {
+                background: @disabled-color;
+            }
+
+        }
+
+    }
+
+}

package/less/widgets/various.less

@@ -0,0 +1,36 @@
+
+@import (reference) "../base";
+@import (reference) "../theme";
+
+
+.qui-active-indicator {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 100%;
+    left: 0;
+    height: 0;
+    bottom: 0;
+    background: @interactive-color;
+    transition: height @transition-duration ease;
+}
+
+.qui-active-indicator-visible {
+    height: 0.25em;
+}
+
+div.qui-icon-text-caption-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+div.qui-icon-text-caption-icon {
+    width: 1.5em;
+    height: 1.5em;
+    top: -0.05em;
+}
+
+span.qui-icon-text-caption-text {
+    margin-left: 0.2em;
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@qtoggle/qui",
+  "description": "A JavaScript UI library with batteries included.",
+  "version": "0.0.0",
+  "author": {
+    "name": "Calin Crisan",
+    "email": "ccrisan@gmail.com"
+  },
+  "keywords": [],
+  "license": "Apache-2.0",
+  "dependencies": {
+    "jquery": "*",
+    "jquery-mousewheel": "*",
+    "jquery-ui-dist": "*",
+    "js-logger": "*",
+    "pepjs": "*"
+  },
+  "devDependencies": {
+    "@babel/core": "^7",
+    "@babel/plugin-proposal-class-properties": "^7",
+    "@babel/preset-env": "^7",
+    "babel-eslint": "^10",
+    "babel-loader": "^8",
+    "css-loader": "^3",
+    "eslint": "^6",
+    "expose-loader": "^0",
+    "file-loader": "^6",
+    "glob": "^7",
+    "jsdoc": "^3",
+    "jsdoc-export-default-interop": "^0",
+    "jsdoc-typeof-plugin": "^1",
+    "less": "^3",
+    "less-loader": "^6",
+    "mini-css-extract-plugin": "^0",
+    "optimize-css-assets-webpack-plugin": "^5",
+    "string-replace-loader": "^2",
+    "terser-webpack-plugin": "^3",
+    "webpack": "^4",
+    "webpack-cli": "^3",
+    "webpack-fix-style-only-entries": "^0",
+    "webpack-inject-plugin": "^1",
+    "webpack-shell-plugin": "^0"
+  },
+  "scripts": {
+    "postinstall": "scripts/postinstall.sh"
+  }
+}

package/pyproject.toml

@@ -0,0 +1,45 @@
+[project]
+name = "qui-server"
+version = "0.0.0"
+description = "A fully fledged qToggle implementation written in Python"
+authors = [
+    {name = "Calin Crisan", email = "ccrisan@gmail.com"},
+]
+requires-python = "==3.10.*"
+readme = "README.md"
+license = {text = "Apache 2.0"}
+dependencies = [
+    "jinja2",
+    "tornado",
+]
+
+[tool.setuptools.packages.find]
+include = [
+    "qui*",
+]
+
+[tool.setuptools.package-data]
+qui = [
+    "templates/**",
+]
+
+[tool.uv]
+package = true
+
+[tool.ruff]
+line-length = 120
+target-version = "py310"
+lint.extend-select = ["I", "RUF022"]
+lint.isort.lines-after-imports = 2
+lint.isort.lines-between-types = 1
+lint.isort.force-wrap-aliases = true
+
+[dependency-groups]
+dev = [
+    "ruff",
+    "pre-commit",
+]
+
+[tool.mypy]
+explicit_package_bases = true
+ignore_missing_imports = true

package/qui/__init__.py

@@ -0,0 +1,110 @@
+import hashlib
+import logging
+import re
+import secrets
+
+from typing import Any
+
+from . import settings
+
+
+logger = logging.getLogger(__name__)
+
+
+def configure(
+    *,
+    name: str,
+    display_name: str,
+    display_short_name: str | None = None,
+    description: str,
+    version: str,
+    debug: bool,
+    theme_color: str | None = None,
+    background_color: str | None = None,
+    frontend_dir: str | None = None,
+    frontend_url_prefix: str | None = None,
+    static_url: str | None = None,
+    package_name: str | None = None,
+    enable_pwa: bool | None = None,
+    extra_context: dict[str, Any] | None = None,
+) -> None:
+    """Configure QUI on the server side.
+
+    :param name: project name, normally lowercase, no spaces, e.g. ``my-project``
+    :param display_name: project display name, e.g. ``My Nice And Shiny Project``
+    :param display_short_name: optional project display short name, e.g. ``My Project``
+    :param description: project description, e.g. ``A project that does stuff``
+    :param version: project version
+    :param debug: indicates whether frontend runs in debug mode or not
+    :param theme_color: optionally overrides default theme (accent) color
+    :param background_color: overrides default background color
+    :param frontend_dir: overrides default frontend directory, relative to project root package (defaults to
+           ``frontend``)
+    :param frontend_url_prefix: overrides default frontend URL prefix (defaults to ``frontend``)
+    :param static_url: overrides default URL where static files are served (defaults to
+           ``{frontend_url_prefix}/static``)
+    :param package_name: sets the root project package name; by default, the ``name`` parameter is used after removing
+           non-alpha-numeric-or-underscore characters
+    :param enable_pwa: enables or disables PWA support (enabled by default)
+    :param extra_context: specifies extra context to be supplied when rendering templates
+    """
+
+    settings.name = name
+    settings.display_name = display_name
+    settings.description = description
+    settings.version = version
+    settings.debug = debug
+
+    if display_short_name is not None:
+        settings.display_short_name = display_short_name
+
+    if theme_color is not None:
+        settings.theme_color = theme_color
+
+    if background_color is not None:
+        settings.background_color = background_color
+
+    if frontend_dir is not None:
+        settings.frontend_dir = frontend_dir
+
+    if frontend_url_prefix is not None:
+        settings.frontend_url_prefix = frontend_url_prefix
+
+    if static_url is not None:
+        settings.static_url = static_url
+
+    if package_name is not None:
+        settings.package_name = package_name
+
+    if enable_pwa is not None:
+        settings.enable_pwa = enable_pwa
+
+    if extra_context is not None:
+        settings.extra_context = extra_context
+
+    # Static URL may (and normally does) depend on frontend URL prefix
+    settings.static_url = settings.static_url.format(frontend_url_prefix=settings.frontend_url_prefix)
+
+    # Project package defaults to app (project) name
+    if not settings.package_name:
+        settings.package_name = re.sub(r"[^a-zA-Z_0-9]", "", settings.name)
+
+    if settings.debug:
+        settings.build_hash = secrets.token_hex()[:16]
+
+    else:
+        settings.build_hash = hashlib.sha256(version.encode()).hexdigest()[:16]
+
+    logger.debug('using name = "%s"', settings.name)
+    logger.debug('using display_name = "%s"', settings.display_name)
+    logger.debug('using description = "%s"', settings.description)
+    logger.debug('using version = "%s"', settings.version)
+    logger.debug("using debug = %s", str(settings.debug).lower())
+    logger.debug('using theme_color = "%s"', settings.theme_color)
+    logger.debug('using background_color = "%s"', settings.background_color)
+    logger.debug('using frontend_dir = "%s"', settings.frontend_dir)
+    logger.debug('using frontend_url_prefix = "%s"', settings.frontend_url_prefix)
+    logger.debug('using static_url = "%s"', settings.static_url)
+    logger.debug('using package_name = "%s"', settings.package_name)
+    logger.debug("using enable_pwa = %s", str(settings.enable_pwa).lower())
+    logger.debug('using build_hash = "%s"', settings.build_hash)

package/qui/constants.py

@@ -0,0 +1 @@
+BASE_PREFIX_HEADER = "X-Forwarded-Path"

package/qui/exceptions.py

@@ -0,0 +1,2 @@
+class QUIException(Exception):
+    pass

package/qui/j2template.py

@@ -0,0 +1,71 @@
+import importlib
+import logging
+import os
+
+from urllib.parse import quote_plus
+
+from jinja2 import (
+    ChoiceLoader,
+    Environment,
+    FileSystemLoader,
+    PackageLoader,
+    select_autoescape,
+)
+
+from . import settings
+
+
+_env: Environment | None = None
+
+logger = logging.getLogger(__name__)
+
+
+class NamespaceLoader(FileSystemLoader):
+    def __init__(
+        self,
+        namespace_name: str,
+        path: str | list[str] = "templates",
+        encoding: str = "utf-8",
+        followlinks: bool = False,
+    ) -> None:
+        if isinstance(path, str):
+            path = [path]
+
+        namespace = importlib.import_module(namespace_name)
+        namespace_path_list = list(namespace.__path__)
+        searchpath = []
+        for namespace_path in namespace_path_list:
+            searchpath += [os.path.join(namespace_path, p) for p in path]
+
+        super().__init__(searchpath=searchpath, encoding=encoding, followlinks=followlinks)
+
+
+def urlquote(s: str | bytes) -> str | bytes:
+    if s:
+        return quote_plus(s)
+
+    return s
+
+
+def get_env() -> Environment:
+    global _env
+
+    if _env is None:
+        logger.debug("creating Jinja2 template environment")
+
+        app_loader = NamespaceLoader(
+            settings.package_name,
+            [
+                f"{settings.frontend_dir}/templates",
+                f"{settings.frontend_dir}/dist/templates",
+            ],
+        )
+
+        qui_loader = PackageLoader("qui")
+
+        loader = ChoiceLoader([qui_loader, app_loader])
+
+        _env = Environment(loader=loader, autoescape=select_autoescape(), enable_async=True)
+        _env.filters["urlquote"] = urlquote
+
+    return _env