@quaffui/quaff 0.1.0-prealpha14 → 0.1.0-prealpha16

package/dist/css/mixins/field-mixins.scss

@@ -8,7 +8,7 @@
   font-family: inherit;
 }
 
-@mixin clip-border($clip-height, $clip-width) {
+@mixin clip-border($clip-width, $clip-height) {
   clip-path: polygon(
     0% 0%,
     0% 100%,
@@ -26,26 +26,27 @@
   &::after {
     content: "";
     position: absolute;
-    top: calc(var(--border-width) * -1);
-    bottom: calc(var(--border-width) * -1);
+    top: -0.0625rem;
+    bottom: -0.0625rem;
     width: calc(var(--wrapper-height) / 2);
     height: var(--wrapper-height);
-    border: var(--border-width) solid transparent;
+    border: 0.0625rem solid transparent;
     border-top-color: var(--decorator-color);
     border-radius: $border-radius;
+    box-sizing: border-box;
   }
 
   &::before {
-    left: calc(var(--border-width) * -1);
+    left: -0.0625rem;
     border-top-right-radius: 0px;
     border-bottom-right-radius: 0px;
-    $clip-height: 0.125rem;
+    $clip-height: 0.25rem;
     $clip-width: if($variant == "outlined", 0.9375rem, 0.3125rem);
-    @include clip-border($clip-height, $clip-width);
+    @include clip-border($clip-width, $clip-height);
   }
 
   &::after {
-    right: calc(var(--border-width) * -1);
+    right: -0.0625rem;
     border-top-left-radius: 0px;
     border-bottom-left-radius: 0px;
   }

package/dist/css/mixins.scss

@@ -65,7 +65,9 @@
   }
 
   // Left drawer + Right drawer
-  &.q-drawer--left ~ .q-drawer--active.q-drawer--right:not(.q-drawer--offset-#{$pos}, .q-drawer--overlay) ~ .q-#{$el} {
+  &.q-drawer--left
+    ~ .q-drawer--active.q-drawer--right:not(.q-drawer--offset-#{$pos}, .q-drawer--overlay)
+    ~ .q-#{$el} {
     width: calc(#{$baseWidth} - #{$LR_Drawer});
   }
 }

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;
@@ -16,8 +16,15 @@
   }
 
   &--effect {
-    position: relative;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
     overflow: hidden;
+    background: none;
+    pointer-events: none;
+    z-index: 999;
   }
 }
 

package/dist/css/shared/q-field.scss

@@ -19,19 +19,50 @@ $transition-duration: 0.2s;
 
   &__wrapper {
     --decorator-color: var(--outline);
-    --border-width: 0.0625rem;
     display: flex;
     position: relative;
     height: var(--wrapper-height);
   }
 
+  &--rounded#{&}--active &__wrapper {
+    $clip-x1: 1.25rem;
+    $clip-x2: 1.5rem;
+    $clip-y: 0.125rem;
+
+    // clip path has to go beyond 0% and 100% for y because of the floating label
+    clip-path: polygon(
+      0% -20%,
+      $clip-x1 -20%,
+      $clip-x1 $clip-y,
+      $clip-x2 $clip-y,
+      $clip-x2 -20%,
+      100% -20%,
+      100% 120%,
+      0% 120%
+    );
+  }
+
   &--default &__wrapper,
   &--filled &__wrapper {
-    border-bottom: var(--border-width) solid var(--decorator-color);
+    border-bottom: 0.0625rem solid var(--decorator-color);
+  }
+
+  &--focus#{&}--default &__wrapper,
+  &--focus#{&}--filled &__wrapper {
+    border-bottom: 0.0625rem solid var(--decorator-color);
+    box-shadow: inset 0 -0.0625rem 0 var(--decorator-color);
   }
 
   &--has-border &__wrapper {
-    border: var(--border-width) solid var(--decorator-color);
+    border: 0.0625rem solid var(--decorator-color);
+  }
+
+  &--focus#{&}--has-border &__wrapper {
+    box-shadow:
+      inset 0.0625rem 0 0 var(--decorator-color),
+      inset -0.0625rem 0 0 var(--decorator-color),
+      inset 0 0.0625rem 0 0 var(--decorator-color),
+      inset 0 -0.0625rem 0 0 var(--decorator-color);
   }
 
   &__wrapper {
@@ -54,6 +85,14 @@ $transition-duration: 0.2s;
 
   &--label#{&}--active#{&}--has-border &__wrapper {
     border-top-color: transparent;
+    box-shadow: none;
+  }
+
+  &--label#{&}--focus#{&}--has-border &__wrapper {
+    box-shadow:
+      inset 0.0625rem 0 0 var(--decorator-color),
+      inset -0.0625rem 0 0 var(--decorator-color),
+      inset 0 -0.0625rem 0 0 var(--decorator-color);
   }
 
   &--label#{&}--active#{&}--rounded &__wrapper {
@@ -95,7 +134,7 @@ $transition-duration: 0.2s;
 
   &--default:not(#{&}--dense) &__label,
   &--filled:not(#{&}--dense) &__label {
-    top: 1px;
+    top: 0.0625rem;
   }
 
   &--slot-prepend#{&}--default &__label,
@@ -120,24 +159,11 @@ $transition-duration: 0.2s;
     left: 1.4375rem;
   }
 
-  &--has-border#{&}--focus &__label {
-    transform: translateX(-0.0625rem);
-  }
-
-  &--label#{&}--rounded#{&}--focus &__wrapper::before {
-    @include clip-border(0.3125rem, 0.4375rem);
-  }
-
-  &--label#{&}--outlined#{&}--focus &__wrapper::before {
-    @include clip-border(0.3125rem, 1.0625rem);
-  }
-
-  &--rounded#{&}--focus &__input {
-    padding-left: 1.375rem;
-  }
-
-  &--outlined#{&}--focus &__input {
-    padding-left: 0.6875rem;
+  &--label#{&}--has-border#{&}--focus &__wrapper {
+    &::before,
+    &::after {
+      box-shadow: inset 0 0.0625rem 0 var(--decorator-color);
+    }
   }
 
   &--outlined &__label {
@@ -158,7 +184,7 @@ $transition-duration: 0.2s;
     display: block;
     margin-left: 0.25rem;
     flex-grow: 1;
-    border-top-width: var(--border-width);
+    border-top-width: 0.0625rem;
     border-top-style: solid;
     border-top-color: var(--decorator-color);
     min-width: 0.625rem;
@@ -169,17 +195,17 @@ $transition-duration: 0.2s;
   }
 
   &--active#{&}--rounded &__label {
-    right: calc(var(--wrapper-height) / 2);
+    right: calc(var(--wrapper-height) / 2 - 0.125rem);
   }
 
   &--active#{&}--outlined &__label {
-    right: 0.25rem;
+    right: 1.375rem;
   }
 
   &--active &__label {
     font-size: 0.75rem;
     line-height: 0px;
-    margin-top: calc(var(--border-width) * -1);
+    margin-top: -0.0625rem;
   }
 
   &--active#{&}--default &__label,
@@ -189,7 +215,10 @@ $transition-duration: 0.2s;
 
   &--focus &__wrapper {
     --decorator-color: var(--primary);
-    --border-width: 0.125rem;
+  }
+
+  &--focus#{&}--has-border &__label::after {
+    border-top-width: 0.125rem;
   }
 
   &__input {
@@ -203,7 +232,7 @@ $transition-duration: 0.2s;
   &--default &__input,
   &--filled &__input {
     padding: 0 1rem;
-    padding-top: 15px;
+    padding-top: 0.9375rem;
   }
 
   &--focus#{&}--default &__input,
@@ -212,7 +241,7 @@ $transition-duration: 0.2s;
   }
 
   &--rounded &__input {
-    padding: 0 23px;
+    padding: 0 1.4375rem;
   }
 
   &--outlined &__input {
@@ -255,36 +284,20 @@ $transition-duration: 0.2s;
     }
   }
 
-  // prevent content moving up due to bottom border
-  &--focus#{&}--default &__slot-prepend,
-  &--focus#{&}--default &__slot-append,
-  &--focus#{&}--filled &__slot-prepend,
-  &--focus#{&}--filled &__slot-append {
-    margin-bottom: -0.0625rem;
-  }
-
   &__slot-prepend {
-    padding-left: 12px;
+    padding-left: 0.75rem;
   }
 
   &--rounded &__slot-prepend {
-    padding-left: 16px;
-  }
-
-  &--focus#{&}--has-border &__slot-prepend {
-    margin-left: -1px;
+    padding-left: 1rem;
   }
 
   &__slot-append {
-    padding-right: 12px;
+    padding-right: 0.75rem;
   }
 
   &--rounded &__slot-append {
-    padding-right: 16px;
-  }
-
-  &--focus#{&}--has-border &__slot-append {
-    margin-right: -1px;
+    padding-right: 1rem;
   }
 
   &__slot-before {

package/dist/css/theme/colors.module.scss

@@ -18,7 +18,7 @@
 }
 .primary {
   @extend .bg-primary;
-  @extend .text-on-primary
+  @extend .text-on-primary;
 }
 
 .bg-primary-container {
@@ -41,7 +41,7 @@
 }
 .primary-container {
   @extend .bg-primary-container;
-  @extend .text-on-primary-container
+  @extend .text-on-primary-container;
 }
 
 .bg-secondary {
@@ -64,7 +64,7 @@
 }
 .secondary {
   @extend .bg-secondary;
-  @extend .text-on-secondary
+  @extend .text-on-secondary;
 }
 
 .bg-secondary-container {
@@ -87,7 +87,7 @@
 }
 .secondary-container {
   @extend .bg-secondary-container;
-  @extend .text-on-secondary-container
+  @extend .text-on-secondary-container;
 }
 
 .bg-tertiary {
@@ -110,7 +110,7 @@
 }
 .tertiary {
   @extend .bg-tertiary;
-  @extend .text-on-tertiary
+  @extend .text-on-tertiary;
 }
 
 .bg-tertiary-container {
@@ -133,7 +133,7 @@
 }
 .tertiary-container {
   @extend .bg-tertiary-container;
-  @extend .text-on-tertiary-container
+  @extend .text-on-tertiary-container;
 }
 
 .bg-error {
@@ -156,7 +156,7 @@
 }
 .error {
   @extend .bg-error;
-  @extend .text-on-error
+  @extend .text-on-error;
 }
 
 .bg-error-container {
@@ -179,7 +179,7 @@
 }
 .error-container {
   @extend .bg-error-container;
-  @extend .text-on-error-container
+  @extend .text-on-error-container;
 }
 
 .bg-background {
@@ -202,7 +202,7 @@
 }
 .background {
   @extend .bg-background;
-  @extend .text-on-background
+  @extend .text-on-background;
 }
 
 .bg-surface {
@@ -225,7 +225,7 @@
 }
 .surface {
   @extend .bg-surface;
-  @extend .text-on-surface
+  @extend .text-on-surface;
 }
 
 .bg-surface-variant {
@@ -248,7 +248,7 @@
 }
 .surface-variant {
   @extend .bg-surface-variant;
-  @extend .text-on-surface-variant
+  @extend .text-on-surface-variant;
 }
 
 .bg-outline {
@@ -329,4 +329,4 @@
 }
 .border-scrim {
   border-color: var(--scrim) !important;
-}
+}

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

@@ -1,29 +1,31 @@
 const triggerEvents = ["pointerdown", "touchstart", "keydown"];
 const cancelEvents = ["mouseleave", "dragleave", "touchmove", "touchcancel", "pointerup", "keyup"];
 export function ripple(el, options = {}) {
+    const rippleContainer = document.createElement("div");
+    addClasses();
+    setOptions(options);
+    el.appendChild(rippleContainer);
     function addClasses(center) {
-        let shouldBeCentered = center || options.center;
-        if (!el.classList.contains("q-ripple--effect")) {
-            el.classList.add("q-ripple--effect");
+        const shouldBeCentered = center || options.center;
+        if (!rippleContainer.classList.contains("q-ripple--effect")) {
+            rippleContainer.classList.add("q-ripple--effect");
         }
-        if (!shouldBeCentered && el.classList.contains("q-ripple--center")) {
-            el.classList.remove("q-ripple--center");
+        if (!shouldBeCentered && rippleContainer.classList.contains("q-ripple--center")) {
+            rippleContainer.classList.remove("q-ripple--center");
         }
-        shouldBeCentered && el.classList.add("q-ripple--center");
+        shouldBeCentered && rippleContainer.classList.add("q-ripple--center");
     }
     function setOptions(options) {
         if (options.duration && options.duration < 0) {
             options.duration = undefined;
         }
         if (options.color) {
-            el.style.setProperty("--ripple-color", options.color);
+            rippleContainer.style.setProperty("--ripple-color", options.color);
         }
         if (options.duration) {
-            el.style.setProperty("--ripple-duration", `${options.duration}ms`);
+            rippleContainer.style.setProperty("--ripple-duration", `${options.duration}ms`);
         }
     }
-    addClasses();
-    setOptions(options);
     function createRipple(e, center) {
         if (options.disable || el.hasAttribute("aria-disabled"))
             return;
@@ -52,7 +54,7 @@ export function ripple(el, options = {}) {
         ripple.style.left = `${clientX - rect.left - radius}px`;
         ripple.style.top = `${clientY - rect.top - radius}px`;
         ripple.style.width = ripple.style.height = `${radius * 2}px`;
-        el.appendChild(ripple);
+        rippleContainer.appendChild(ripple);
         function removeRipple() {
             if (ripple === null)
                 return;

package/dist/helpers/version.d.ts

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

package/dist/helpers/version.js

@@ -1 +1 @@
-export default "0.1.0-prealpha14";
+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;