@quaffui/quaff 0.1.0-prealpha

package/dist/stores/Quaff.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="@sveltejs/kit" />
+export declare const quaffStore: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<{
+        version: string;
+        dark: boolean;
+    }>, invalidate?: ((value?: {
+        version: string;
+        dark: boolean;
+    } | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;
+    setDarkMode: (newVal: boolean) => void;
+    toggleDarkMode: () => void;
+};
+export declare const Quaff: import("svelte/store").Readable<{
+    version: string;
+    router: import("@sveltejs/kit").Page<Record<string, string>, string | null>;
+    dark: {
+        isActive: boolean;
+        toggle: () => void;
+        set: (newVal: boolean) => void;
+    };
+    subscribe: {
+        quaff: (this: void, run: import("svelte/store").Subscriber<{
+            version: string;
+            dark: boolean;
+        }>, invalidate?: ((value?: {
+            version: string;
+            dark: boolean;
+        } | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;
+        page: (this: void, run: import("svelte/store").Subscriber<import("@sveltejs/kit").Page<Record<string, string>, string | null>>, invalidate?: ((value?: import("@sveltejs/kit").Page<Record<string, string>, string | null> | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;
+    };
+}>;

package/dist/stores/Quaff.js

@@ -0,0 +1,52 @@
+import { writable, derived } from "svelte/store";
+import { page } from "$app/stores";
+function quaff() {
+    const { subscribe, set, update } = writable({
+        version: __QUAFF_VERSION__,
+        dark: false,
+        //TODO lang: {},
+        //TODO? iconSet: {},
+    });
+    const toggleDarkMode = () => {
+        return update((q) => {
+            q.dark = !q.dark;
+            let body = document.querySelector("body");
+            if (q.dark === true) {
+                body && body.classList.replace("light", "dark");
+            }
+            else {
+                body && body.classList.replace("dark", "light");
+            }
+            let mode = q.dark === true ? "dark" : "light";
+            document.cookie = `current_mode=${mode}; max-age=31536000; path="/"; SameSite=strict`;
+            return q;
+        });
+    };
+    const setDarkMode = (newVal) => {
+        return update((q) => {
+            q.dark = newVal;
+            return q;
+        });
+    };
+    return {
+        subscribe,
+        setDarkMode,
+        toggleDarkMode,
+    };
+}
+export const quaffStore = quaff();
+export const Quaff = derived([quaffStore, page], ([$quaff, $page]) => {
+    return {
+        version: $quaff.version,
+        router: $page,
+        dark: {
+            isActive: $quaff.dark,
+            toggle: quaffStore.toggleDarkMode,
+            set: quaffStore.setDarkMode,
+        },
+        subscribe: {
+            quaff: quaffStore.subscribe,
+            page: page.subscribe,
+        },
+    };
+});

package/dist/utils/clipboard.d.ts

@@ -0,0 +1 @@
+declare function copy(text: string): Promise<void>;

package/dist/utils/clipboard.js

@@ -0,0 +1,11 @@
+"use strict";
+async function copy(text) {
+    if (navigator.clipboard.write) {
+        let blob = new Blob([text], { type: "text/plain" });
+        let item = new ClipboardItem({ "text/plain": blob });
+        await navigator.clipboard.write([item]);
+    }
+    else {
+        await navigator.clipboard.writeText(text);
+    }
+}

package/dist/utils/colors.d.ts

@@ -0,0 +1,10 @@
+declare class QColors {
+    private static hexRegex;
+    private static isValidRgb;
+    private static isValidHsl;
+    static rgbToHex(r: string | number, g: string | number, b: string | number): string;
+    static hexToRgb(hex: string): number[];
+    static rgbToHsl(r: string | number, g: string | number, b: string | number): number[];
+    static hslToRgb(h: string | number, s: string | number, l: string | number): number[];
+}
+export default QColors;

package/dist/utils/colors.js

@@ -0,0 +1,102 @@
+import { isNumber } from "./types";
+class QColors {
+    static hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+    static isValidRgb(r, g, b) {
+        return (isNumber(r) &&
+            isNumber(g) &&
+            isNumber(b) &&
+            +r >= 0 &&
+            +r <= 255 &&
+            +g >= 0 &&
+            +g <= 255 &&
+            +b >= 0 &&
+            +b <= 255);
+    }
+    static isValidHsl(h, s, l) {
+        return (isNumber(h) &&
+            isNumber(s) &&
+            isNumber(l) &&
+            +h >= 0 &&
+            +h <= 360 &&
+            +s >= 0 &&
+            +s <= 100 &&
+            +l >= 0 &&
+            +l <= 100);
+    }
+    static rgbToHex(r, g, b) {
+        if (!QColors.isValidRgb(r, g, b)) {
+            throw new Error("Invalid RGB values. They should be in the range 0-255.");
+        }
+        return "#" + ((1 << 24) + (+r << 16) + (+g << 8) + +b).toString(16).slice(1);
+    }
+    static hexToRgb(hex) {
+        if (!QColors.hexRegex.test(hex)) {
+            throw new Error("Invalid HEX value. It should follow the format #xxxxxx or #xxx where x is a hexadecimal digit.");
+        }
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result
+            ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]
+            : [];
+    }
+    static rgbToHsl(r, g, b) {
+        if (!QColors.isValidRgb(r, g, b)) {
+            throw new Error("Invalid RGB values. They should be in the range 0-255.");
+        }
+        (r = +r / 255), (g = +g / 255), (b = +b / 255);
+        const max = Math.max(r, g, b), min = Math.min(r, g, b);
+        let h, s, l = (max + min) / 2;
+        if (max === min) {
+            h = s = 0; // achromatic
+        }
+        else {
+            const delta = max - min;
+            s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+            switch (max) {
+                case r:
+                default:
+                    h = (g - b) / delta + (g < b ? 6 : 0);
+                    break;
+                case g:
+                    h = (b - r) / delta + 2;
+                    break;
+                case b:
+                    h = (r - g) / delta + 4;
+                    break;
+            }
+            h /= 6;
+        }
+        return [h * 360, s * 100, l * 100];
+    }
+    static hslToRgb(h, s, l) {
+        if (!QColors.isValidHsl(h, s, l)) {
+            throw new Error("Invalid HSL values. Hue should be in the range 0-360, saturation and lightness in the range 0-100.");
+        }
+        let r, g, b;
+        (h = +h / 360), (s = +s / 100), (l = +l / 100);
+        if (s === 0) {
+            r = g = b = l; // achromatic
+        }
+        else {
+            const hue2rgb = (p, q, t) => {
+                if (t < 0)
+                    t += 1;
+                if (t > 1)
+                    t -= 1;
+                if (t < 1 / 6)
+                    return p + (q - p) * 6 * t;
+                if (t < 1 / 2)
+                    return q;
+                if (t < 2 / 3)
+                    return p + (q - p) * (2 / 3 - t) * 6;
+                return p;
+            };
+            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            const p = 2 * l - q;
+            r = hue2rgb(p, q, h + 1 / 3);
+            g = hue2rgb(p, q, h);
+            b = hue2rgb(p, q, h - 1 / 3);
+        }
+        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+    }
+}
+export default QColors;

package/dist/utils/fields.d.ts

@@ -0,0 +1 @@
+export declare function textWidth(element: HTMLElement, font: string): number;

package/dist/utils/fields.js

@@ -0,0 +1,14 @@
+export function textWidth(element, font) {
+    if (element.offsetWidth > 0)
+        return element.offsetWidth;
+    let _canvas = document.querySelector("canvas[data-quaff]")?.getContext("2d");
+    if (!_canvas) {
+        const canvasElement = document.createElement("canvas");
+        canvasElement.style.display = "none";
+        canvasElement.setAttribute("data-quaff", "");
+        document.body.append(canvasElement);
+        _canvas = canvasElement.getContext("2d");
+    }
+    _canvas.font = font;
+    return _canvas.measureText(element.textContent).width;
+}

package/dist/utils/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/utils/props.d.ts

@@ -0,0 +1,9 @@
+export declare function createStyles(styleObj: Record<string, string | number | null | undefined>, userStyles?: string): string | null;
+interface CreateClassesOptions {
+    component?: string;
+    element?: string;
+    userClasses?: string;
+    quaffClasses?: any[];
+}
+export declare function createClasses(modifiers: any[], options?: CreateClassesOptions): string;
+export {};

package/dist/utils/props.js

@@ -0,0 +1,31 @@
+import { convertCase } from "./string";
+export function createStyles(styleObj, userStyles) {
+    const stylesArray = Object.entries(styleObj);
+    const toJoin = [];
+    for (let [styleName, styleVal] of stylesArray) {
+        if (styleVal === undefined || styleVal === null) {
+            continue;
+        }
+        styleName = convertCase(styleName, "camel", "kebab");
+        toJoin.push(`${styleName}: ${styleVal}`);
+    }
+    userStyles && toJoin.push(userStyles);
+    if (toJoin.length === 0) {
+        return null;
+    }
+    return toJoin.join("; ");
+}
+export function createClasses(modifiers, options = { userClasses: "", quaffClasses: [] }) {
+    const userClasses = options.userClasses?.trim();
+    const quaffClasses = options.quaffClasses?.length && createClasses(options.quaffClasses);
+    const baseClasses = `${quaffClasses || ""} ${userClasses || ""}`.trim();
+    let component = options.component, element;
+    if (component && options.element) {
+        element = `${component}__${options.element}`;
+    }
+    const filteredModifiers = modifiers.filter(Boolean);
+    let withModifiers = component
+        ? filteredModifiers.map((modifier) => `${element || component}--${modifier}`)
+        : filteredModifiers;
+    return [element || component, ...withModifiers, baseClasses].filter(Boolean).join(" ").trim();
+}

package/dist/utils/string.d.ts

@@ -0,0 +1,10 @@
+export declare function capitalize(str: string, eachWord?: boolean): string;
+export declare function uncapitalize(str: string, eachWord?: boolean): string;
+declare const cases: {
+    camel: string;
+    pascal: string;
+    kebab: string;
+    snake: string;
+};
+export declare function convertCase(str: string, fromCase: keyof typeof cases, toCase: keyof typeof cases): string;
+export {};

package/dist/utils/string.js

@@ -0,0 +1,78 @@
+export function capitalize(str, eachWord = false) {
+    const cap = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+    return eachWord ? str.split(" ").map(cap).join(" ") : cap(str);
+}
+export function uncapitalize(str, eachWord = false) {
+    const uncap = (str) => str.charAt(0).toLowerCase() + str.slice(1);
+    return eachWord ? str.split(" ").map(uncap).join(" ") : uncap(str);
+}
+const cases = {
+    camel: "",
+    pascal: "",
+    kebab: "-",
+    snake: "_",
+};
+function convertToPascalCase(str, delimeter) {
+    return str
+        .split(delimeter)
+        .map((word) => capitalize(word))
+        .join("");
+}
+function convertToCamelCase(str, delimeter) {
+    return str
+        .split(delimeter)
+        .map((word, index) => (index === 0 ? word : capitalize(word)))
+        .join("");
+}
+function convertToKebabSnakeCase(str, caseType) {
+    return str
+        .split("")
+        .map((letter) => (/[A-Z]/.test(letter) ? `${cases[caseType]}${letter.toLowerCase()}` : letter))
+        .join("");
+}
+export function convertCase(str, fromCase, toCase) {
+    switch (fromCase) {
+        case "camel":
+            if (toCase === "pascal") {
+                return capitalize(str);
+            }
+            if (toCase === "kebab" || toCase === "snake") {
+                return convertToKebabSnakeCase(str, toCase);
+            }
+            break;
+        case "pascal":
+            let uncap = uncapitalize(str);
+            if (toCase === "camel") {
+                return uncap;
+            }
+            if (toCase === "kebab" || toCase === "snake") {
+                return convertToKebabSnakeCase(uncap, toCase);
+            }
+            break;
+        case "snake":
+            if (toCase === "kebab") {
+                return str.replaceAll("_", "-");
+            }
+            if (toCase === "camel") {
+                return convertToCamelCase(str, "_");
+            }
+            if (toCase === "pascal") {
+                return convertToPascalCase(str, "_");
+            }
+            break;
+        case "kebab":
+            if (toCase === "snake") {
+                return str.replaceAll("-", "_");
+            }
+            if (toCase === "camel") {
+                return convertToCamelCase(str, "-");
+            }
+            if (toCase === "pascal") {
+                return convertToPascalCase(str, "-");
+            }
+            break;
+        default:
+            return str;
+    }
+    return str;
+}

package/dist/utils/types.d.ts

@@ -0,0 +1,42 @@
+export interface NativeProps {
+    userClasses?: string;
+    userStyles?: string;
+}
+export declare const NativePropsDefaults: NativeProps;
+export interface QComponentDocs {
+    name: string;
+    description: string;
+    docs: {
+        props: QComponentProp[];
+        slots: QComponentSlot[];
+        methods: QComponentMethod[];
+        events: QComponentEvent[];
+    };
+}
+export interface QComponentProp {
+    name: string;
+    type: string;
+    default?: any;
+    description: string;
+    clickableType?: boolean;
+    optional?: boolean;
+}
+export interface QComponentSlot {
+    name: string;
+    description: string;
+}
+export interface QComponentType {
+    name: string;
+    description: string;
+}
+export interface QComponentEvent {
+    name: string;
+    type: string;
+    description: string;
+}
+export interface QComponentMethod {
+    name: string;
+    type: string;
+    description: string;
+}
+export declare function isNumber(input: any): input is number;

package/dist/utils/types.js

@@ -0,0 +1,7 @@
+export const NativePropsDefaults = {
+    userClasses: undefined,
+    userStyles: undefined,
+};
+export function isNumber(input) {
+    return typeof input === "number" || !isNaN(Number(input));
+}

package/dist/utils/types.json

@@ -0,0 +1 @@
+{"QAvatarShapeOptions":"type QAvatarShapeOptions =\r\n  | \"circle\"\r\n  | \"rounded\"\r\n  | \"top-round\"\r\n  | \"left-round\"\r\n  | \"right-round\"\r\n  | \"bottom-round\"\r\n  | \"top-left-round\"\r\n  | \"top-right-round\"\r\n  | \"bottom-left-round\"\r\n  | \"bottom-right-round\"","QAvatarSizeOptions":"type QAvatarSizeOptions = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | string","QBreadcrumbsGutterOptions":"type QBreadcrumbsGutterOptions = \"none\" | \"sm\" | \"md\" | \"lg\"","QLayoutEvents":"type QLayoutEvents = \"resize\" | \"scroll\" | \"scrollHeight\"","QSelectOption":"type QSelectOption = string | { label: string, value: string }","QItemSectionTypes":"type QItemSectionTypes =\r\n  | \"thumbnail\"\r\n  | \"video\"\r\n  | \"avatar\"\r\n  | \"icon\"\r\n  | \"trailingIcon\"\r\n  | \"trailingText\"\r\n  | \"content\"","QBtnSizeOptions":"type QBtnSizeOptions = \"sm\" | \"md\" | \"lg\" | \"xl\"","QDialogPositionOptions":"type QDialogPositionOptions = \"default\" | \"top\" | \"right\" | \"bottom\" | \"left\"","QDrawerSideOptions":"type QDrawerSideOptions = \"left\" | \"right\"","QDrawerBehaviorOptions":"type QDrawerBehaviorOptions = \"default\" | \"desktop\" | \"mobile\"","QIconSizeOptions":"type QIconSizeOptions = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | string | number","QIconTypeOptions":"type QIconTypeOptions = \"outlined\" | \"sharp\" | \"rounded\"","QLayoutViewOptions":"type QLayoutViewOptions = `${\"l\"|\"h\"}${\"h\"|\"H\"}${\"r\"|\"h\"} ${\"l\"|\"L\"}${\"p\"}${\"r\"|\"R\"} ${\"l\"|\"f\"}${\"f\"|\"F\"}${\"r\"|\"f\"}`","QTableColumn":"type QTableColumn = {\r\n  name: string\r\n  required?: boolean;\r\n  label: string;\r\n  align?: \"left\" | \"center\" | \"right\";\r\n  field: string | ((row: QTableRow) => string);\r\n  format?: (val: string) => string;\r\n  sortable?: boolean;\r\n  sort?: (a: string, b: string) => number;\r\n};","QTableRow":"type QTableRow = {\r\n  [key: string]: string | number\r\n};","QTableSort":"type QTableSort = {\r\n  columnField: string | ((row: QTableRow) => string)\r\n  type: \"asc\" | \"desc\";\r\n} | null;"}

package/dist/utils/watchable.d.ts

@@ -0,0 +1,2 @@
+import { Readable, Writable } from "svelte/store";
+export declare function watchable<T>(value: T): readonly [Writable<T>, Readable<T | null>];

package/dist/utils/watchable.js

@@ -0,0 +1,22 @@
+import { derived, writable } from "svelte/store";
+export function watchable(value) {
+    let values = writable([value, null]);
+    const subscribe = derived(values, ($values) => $values[0]).subscribe;
+    const update = (fn, isEqual = (a, b) => a === b) => {
+        values.update(($values) => {
+            const newValue = fn($values[0]);
+            if (isEqual(newValue, $values[0])) {
+                return $values;
+            }
+            return [newValue, $values[0]];
+        });
+    };
+    const set = (newValue) => update(() => newValue);
+    const current = {
+        subscribe,
+        update,
+        set,
+    };
+    const previous = derived(values, ($values) => $values[1]);
+    return [current, previous];
+}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@quaffui/quaff",
+  "version": "0.1.0-prealpha",
+  "scripts": {
+    "dev": "vite dev",
+    "open": "vite dev --open",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "prepublishOnly": "npm run package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test:unit": "vitest",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write .",
+    "docgen": "ts-node-esm docgen/props/run.ts",
+    "snippet": "ts-node-esm docgen/snippets/parseSnippets.ts"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "peerDependencies": {
+    "svelte": "^3.54.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.5.0",
+    "@sveltejs/package": "^2.0.0",
+    "@types/node": "^20.3.1",
+    "@types/prettier": "^2.7.3",
+    "@types/prismjs": "^1.26.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte": "^2.26.0",
+    "prettier": "^2.8.0",
+    "prettier-plugin-svelte": "^2.8.1",
+    "publint": "^0.1.9",
+    "sass": "^1.62.1",
+    "svelte": "^3.54.0",
+    "svelte-check": "^3.0.1",
+    "ts-node": "^10.9.1",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^4.3.0",
+    "vitest": "^0.25.3"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "beercss": "^3.2.6",
+    "material-dynamic-colors": "^0.1.7",
+    "prism-svelte": "0.5.0",
+    "prismjs": "^1.29.0"
+  }
+}