@quaffui/quaff 0.1.0-prealpha15 → 0.1.0-prealpha16

package/dist/css/ripple.scss

@@ -1,6 +1,6 @@
 .q-ripple {
   background-color: var(--ripple-color, var(--outline));
-  opacity: 0.2;
+  opacity: 0.25;
   position: absolute;
   border-radius: 50%;
   pointer-events: none;

package/dist/global.d.ts

@@ -1,4 +1,4 @@
-declare var __PLATFORM__:
+declare let __PLATFORM__:
   | "aix"
   | "darwin"
   | "freebsd"

package/dist/helpers/clickOutside.d.ts

@@ -1,6 +1,6 @@
-export declare function clickOutside(node: HTMLElement, onEventFunction: () => any): {
+export declare function clickOutside(node: HTMLElement, onEventFunction: () => unknown): {
     destroy(): void;
 };
-export declare function clickOutsideDialog(node: HTMLDialogElement, onEventFunction: () => any): {
+export declare function clickOutsideDialog(node: HTMLDialogElement, onEventFunction: () => unknown): {
     destroy(): void;
 };

package/dist/helpers/clickOutside.js

@@ -1,6 +1,6 @@
 export function clickOutside(node, onEventFunction) {
     const handleClick = (event) => {
-        let path = event.composedPath();
+        const path = event.composedPath();
         if (!path.includes(node)) {
             onEventFunction();
         }
@@ -16,8 +16,8 @@ export function clickOutsideDialog(node, onEventFunction) {
     const handleClick = (event) => {
         if (!node.open)
             return;
-        let rect = node.getBoundingClientRect();
-        let isInDialog = rect.top <= event.clientY &&
+        const rect = node.getBoundingClientRect();
+        const isInDialog = rect.top <= event.clientY &&
             event.clientY <= rect.top + rect.height &&
             rect.left <= event.clientX &&
             event.clientX <= rect.left + rect.width;

package/dist/helpers/ripple.js

@@ -6,7 +6,7 @@ export function ripple(el, options = {}) {
     setOptions(options);
     el.appendChild(rippleContainer);
     function addClasses(center) {
-        let shouldBeCentered = center || options.center;
+        const shouldBeCentered = center || options.center;
         if (!rippleContainer.classList.contains("q-ripple--effect")) {
             rippleContainer.classList.add("q-ripple--effect");
         }

package/dist/helpers/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.1.0-prealpha15";
+declare const _default: "0.1.0-prealpha16";
 export default _default;

package/dist/helpers/version.js

@@ -1 +1 @@
-export default "0.1.0-prealpha15";
+export default "0.1.0-prealpha16";

package/dist/stores/QTheme.js

@@ -11,15 +11,14 @@ async function prepareThemeColors(from) {
     if (from.startsWith("var(")) {
         from = extractColorFromCssVar(from);
     }
-    let theme = await materialDynamicColors(from);
-    //@ts-ignore
+    const theme = await materialDynamicColors(from);
     const themeColors = {};
     let mode;
     for (mode in theme) {
         let color;
         for (color in theme[mode]) {
-            let colorFormatted = convertCase(color, "camel", "kebab");
-            let cssColor = `${colorFormatted}-${mode}`;
+            const colorFormatted = convertCase(color, "camel", "kebab");
+            const cssColor = `${colorFormatted}-${mode}`;
             themeColors[cssColor] = theme[mode][color];
         }
     }
@@ -29,7 +28,7 @@ function themeBuilder() {
     const { subscribe, set, update } = writable({});
     prepareThemeColors("#3499E7").then(set);
     const apply = () => {
-        let root = document.documentElement;
+        const root = document.documentElement;
         if (root === null)
             return;
         update(($themeColors) => {
@@ -47,7 +46,7 @@ function themeBuilder() {
         });
     };
     const setTheme = async (from) => {
-        let newTheme = await prepareThemeColors(from);
+        const newTheme = await prepareThemeColors(from);
         set(newTheme);
         apply();
     };

package/dist/stores/Quaff.js

@@ -20,7 +20,7 @@ function quaff() {
                     from: "dark",
                     to: "light",
                 };
-            let body = document.querySelector("body");
+            const body = document.querySelector("body");
             if (body) {
                 body.classList.replace(`body--${mode.from}`, `body--${mode.to}`);
             }

package/dist/utils/clipboard.js

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

package/dist/utils/colors.js

@@ -44,7 +44,8 @@ class QColors {
         }
         (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;
+        const l = (max + min) / 2;
+        let h, s;
         if (max === min) {
             h = s = 0; // achromatic
         }

package/dist/utils/dom.js

@@ -21,14 +21,14 @@ export function getFocusableChildren(el) {
     return Array.from(el.querySelectorAll(focusableElements));
 }
 export function getClosestFocusableChild(el) {
-    let children = Array.from(el.querySelectorAll(focusableElements));
+    const children = Array.from(el.querySelectorAll(focusableElements));
     const focusableChildren = children.filter(isFocusable);
     return focusableChildren[0] || null;
 }
 export function getClosestFocusableSibling(el, direction) {
     const parent = getParentElement(el);
     const allSiblings = Array.from(parent.childNodes);
-    let filtered = allSiblings.filter(isFocusable);
+    const filtered = allSiblings.filter(isFocusable);
     const indexOfEl = filtered.indexOf(el);
     if (direction === "next") {
         const i = indexOfEl + 1 === filtered.length ? 0 : indexOfEl + 1;
@@ -48,8 +48,8 @@ export function getClosestFocusableSibling(el, direction) {
     }
 }
 export function getClosestFocusableBlock(el, direction) {
-    let parent = getParentElement(el);
-    let parentFocusableChildren = getFocusableChildren(parent);
+    const parent = getParentElement(el);
+    const parentFocusableChildren = getFocusableChildren(parent);
     function getNextFocusableBlock(parentBlock) {
         const grandParent = getParentElement(parentBlock);
         const grandParentChildren = getAllChildren(grandParent);

package/dist/utils/props.d.ts

@@ -3,7 +3,7 @@ interface CreateClassesOptions {
     component?: string;
     element?: string;
     userClasses?: string | null;
-    quaffClasses?: any[];
+    quaffClasses?: unknown[];
 }
-export declare function createClasses(modifiers: any[], options?: CreateClassesOptions): string;
+export declare function createClasses(modifiers: unknown[], options?: CreateClassesOptions): string;
 export {};

package/dist/utils/props.js

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

package/dist/utils/string.js

@@ -31,6 +31,7 @@ function convertToKebabSnakeCase(str, caseType) {
         .join("");
 }
 export function convertCase(str, fromCase, toCase) {
+    const uncap = uncapitalize(str);
     switch (fromCase) {
         case "camel":
             if (toCase === "pascal") {
@@ -41,7 +42,6 @@ export function convertCase(str, fromCase, toCase) {
             }
             break;
         case "pascal":
-            let uncap = uncapitalize(str);
             if (toCase === "camel") {
                 return uncap;
             }

package/dist/utils/types.d.ts

@@ -19,7 +19,7 @@ export interface QComponentDocs {
 export interface QComponentProp {
     name: string;
     type: string;
-    default?: any;
+    default?: unknown;
     description: string;
     clickableType?: boolean;
     optional?: boolean;
@@ -42,4 +42,4 @@ export interface QComponentMethod {
     type: string;
     description: string;
 }
-export declare function isNumber(input: any): input is number;
+export declare function isNumber(input: unknown): input is number;

package/dist/utils/watchable.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quaffui/quaff",
-  "version": "0.1.0-prealpha15",
+  "version": "0.1.0-prealpha16",
   "scripts": {
     "dev": "vite dev",
     "open": "vite dev --open",
@@ -12,9 +12,10 @@
     "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": "NODE_OPTIONS='--loader ts-node/esm/transpile-only --no-warnings' node docgen/props/run.ts",
+    "lint": "prettier --plugin prettier-plugin-svelte . --check . && eslint .",
+    "format": "prettier --plugin prettier-plugin-svelte . --write .",
+    "docgen": "NODE_OPTIONS='--loader ts-node/esm/transpile-only --no-warnings' node scripts/docgenProps.ts",
+    "write-version": "NODE_OPTIONS='--loader ts-node/esm/transpile-only --no-warnings' node scripts/writeVersion.ts",
     "snippet": "ts-node-esm docgen/snippets/parseSnippets.ts"
   },
   "exports": {
@@ -33,9 +34,6 @@
     "svelte": "^4.0.0"
   },
   "devDependencies": {
-    "@fontsource/material-symbols-outlined": "^5.0.7",
-    "@fontsource/material-symbols-rounded": "^5.0.7",
-    "@fontsource/material-symbols-sharp": "^5.0.7",
     "@fontsource/roboto": "^5.0.8",
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.24.1",
@@ -48,6 +46,8 @@
     "eslint": "^8.49.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-svelte": "^2.33.1",
+    "eslint-plugin-unicorn": "^48.0.1",
+    "material-symbols": "^0.12.0",
     "prettier": "^3.0.3",
     "prettier-plugin-svelte": "^3.0.3",
     "publint": "^0.2.2",