@quaffui/quaff 0.1.0-prealpha12 → 0.1.0-prealpha15

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

@@ -1,180 +1,332 @@
+.bg-primary {
+  background-color: var(--primary) !important;
+}
+.text-primary {
+  color: var(--primary) !important;
+}
+.border-primary {
+  border-color: var(--primary) !important;
+}
+.bg-on-primary {
+  background-color: var(--on-primary) !important;
+}
+.text-on-primary {
+  color: var(--on-primary) !important;
+}
+.border-on-primary {
+  border-color: var(--on-primary) !important;
+}
 .primary {
-  background-color: var(--primary);
+  @extend .bg-primary;
+  @extend .text-on-primary;
 }
-.primary-text {
-  color: var(--primary);
+
+.bg-primary-container {
+  background-color: var(--primary-container) !important;
 }
-.on-primary {
-  background-color: var(--on-primary);
+.text-primary-container {
+  color: var(--primary-container) !important;
 }
-.on-primary-text {
-  color: var(--on-primary);
+.border-primary-container {
+  border-color: var(--primary-container) !important;
+}
+.bg-on-primary-container {
+  background-color: var(--on-primary-container) !important;
+}
+.text-on-primary-container {
+  color: var(--on-primary-container) !important;
+}
+.border-on-primary-container {
+  border-color: var(--on-primary-container) !important;
 }
 .primary-container {
-  background-color: var(--primary-container);
+  @extend .bg-primary-container;
+  @extend .text-on-primary-container;
+}
+
+.bg-secondary {
+  background-color: var(--secondary) !important;
+}
+.text-secondary {
+  color: var(--secondary) !important;
 }
-.primary-container-text {
-  color: var(--primary-container);
+.border-secondary {
+  border-color: var(--secondary) !important;
 }
-.on-primary-container {
-  background-color: var(--on-primary-container);
+.bg-on-secondary {
+  background-color: var(--on-secondary) !important;
 }
-.on-primary-container-text {
-  color: var(--on-primary-container);
+.text-on-secondary {
+  color: var(--on-secondary) !important;
+}
+.border-on-secondary {
+  border-color: var(--on-secondary) !important;
 }
 .secondary {
-  background-color: var(--secondary);
+  @extend .bg-secondary;
+  @extend .text-on-secondary;
+}
+
+.bg-secondary-container {
+  background-color: var(--secondary-container) !important;
+}
+.text-secondary-container {
+  color: var(--secondary-container) !important;
 }
-.secondary-text {
-  color: var(--secondary);
+.border-secondary-container {
+  border-color: var(--secondary-container) !important;
 }
-.on-secondary {
-  background-color: var(--on-secondary);
+.bg-on-secondary-container {
+  background-color: var(--on-secondary-container) !important;
 }
-.on-secondary-text {
-  color: var(--on-secondary);
+.text-on-secondary-container {
+  color: var(--on-secondary-container) !important;
+}
+.border-on-secondary-container {
+  border-color: var(--on-secondary-container) !important;
 }
 .secondary-container {
-  background-color: var(--secondary-container);
+  @extend .bg-secondary-container;
+  @extend .text-on-secondary-container;
+}
+
+.bg-tertiary {
+  background-color: var(--tertiary) !important;
 }
-.secondary-container-text {
-  color: var(--secondary-container);
+.text-tertiary {
+  color: var(--tertiary) !important;
 }
-.on-secondary-container {
-  background-color: var(--on-secondary-container);
+.border-tertiary {
+  border-color: var(--tertiary) !important;
 }
-.on-secondary-container-text {
-  color: var(--on-secondary-container);
+.bg-on-tertiary {
+  background-color: var(--on-tertiary) !important;
+}
+.text-on-tertiary {
+  color: var(--on-tertiary) !important;
+}
+.border-on-tertiary {
+  border-color: var(--on-tertiary) !important;
 }
 .tertiary {
-  background-color: var(--tertiary);
+  @extend .bg-tertiary;
+  @extend .text-on-tertiary;
+}
+
+.bg-tertiary-container {
+  background-color: var(--tertiary-container) !important;
+}
+.text-tertiary-container {
+  color: var(--tertiary-container) !important;
+}
+.border-tertiary-container {
+  border-color: var(--tertiary-container) !important;
 }
-.tertiary-text {
-  color: var(--tertiary);
+.bg-on-tertiary-container {
+  background-color: var(--on-tertiary-container) !important;
 }
-.on-tertiary {
-  background-color: var(--on-tertiary);
+.text-on-tertiary-container {
+  color: var(--on-tertiary-container) !important;
 }
-.on-tertiary-text {
-  color: var(--on-tertiary);
+.border-on-tertiary-container {
+  border-color: var(--on-tertiary-container) !important;
 }
 .tertiary-container {
-  background-color: var(--tertiary-container);
+  @extend .bg-tertiary-container;
+  @extend .text-on-tertiary-container;
 }
-.tertiary-container-text {
-  color: var(--tertiary-container);
+
+.bg-error {
+  background-color: var(--error) !important;
 }
-.on-tertiary-container {
-  background-color: var(--on-tertiary-container);
+.text-error {
+  color: var(--error) !important;
 }
-.on-tertiary-container-text {
-  color: var(--on-tertiary-container);
+.border-error {
+  border-color: var(--error) !important;
+}
+.bg-on-error {
+  background-color: var(--on-error) !important;
+}
+.text-on-error {
+  color: var(--on-error) !important;
+}
+.border-on-error {
+  border-color: var(--on-error) !important;
 }
 .error {
-  background-color: var(--error);
+  @extend .bg-error;
+  @extend .text-on-error;
+}
+
+.bg-error-container {
+  background-color: var(--error-container) !important;
+}
+.text-error-container {
+  color: var(--error-container) !important;
 }
-.error-text {
-  color: var(--error);
+.border-error-container {
+  border-color: var(--error-container) !important;
+}
+.bg-on-error-container {
+  background-color: var(--on-error-container) !important;
+}
+.text-on-error-container {
+  color: var(--on-error-container) !important;
+}
+.border-on-error-container {
+  border-color: var(--on-error-container) !important;
 }
 .error-container {
-  background-color: var(--error-container);
+  @extend .bg-error-container;
+  @extend .text-on-error-container;
 }
-.error-container-text {
-  color: var(--error-container);
+
+.bg-background {
+  background-color: var(--background) !important;
 }
-.on-error {
-  background-color: var(--on-error);
+.text-background {
+  color: var(--background) !important;
 }
-.on-error-text {
-  color: var(--on-error);
+.border-background {
+  border-color: var(--background) !important;
 }
-.on-error-container {
-  background-color: var(--on-error-container);
+.bg-on-background {
+  background-color: var(--on-background) !important;
 }
-.on-error-container-text {
-  color: var(--on-error-container);
+.text-on-background {
+  color: var(--on-background) !important;
+}
+.border-on-background {
+  border-color: var(--on-background) !important;
 }
 .background {
-  background-color: var(--background);
+  @extend .bg-background;
+  @extend .text-on-background;
+}
+
+.bg-surface {
+  background-color: var(--surface) !important;
 }
-.background-text {
-  color: var(--background);
+.text-surface {
+  color: var(--surface) !important;
 }
-.on-background {
-  background-color: var(--on-background);
+.border-surface {
+  border-color: var(--surface) !important;
 }
-.on-background-text {
-  color: var(--on-background);
+.bg-on-surface {
+  background-color: var(--on-surface) !important;
+}
+.text-on-surface {
+  color: var(--on-surface) !important;
+}
+.border-on-surface {
+  border-color: var(--on-surface) !important;
 }
 .surface {
-  background-color: var(--surface);
+  @extend .bg-surface;
+  @extend .text-on-surface;
+}
+
+.bg-surface-variant {
+  background-color: var(--surface-variant) !important;
+}
+.text-surface-variant {
+  color: var(--surface-variant) !important;
+}
+.border-surface-variant {
+  border-color: var(--surface-variant) !important;
 }
-.surface-text {
-  color: var(--surface);
+.bg-on-surface-variant {
+  background-color: var(--on-surface-variant) !important;
 }
-.on-surface {
-  background-color: var(--on-surface);
+.text-on-surface-variant {
+  color: var(--on-surface-variant) !important;
 }
-.on-surface-text {
-  color: var(--on-surface);
+.border-on-surface-variant {
+  border-color: var(--on-surface-variant) !important;
 }
 .surface-variant {
-  background-color: var(--surface-variant);
+  @extend .bg-surface-variant;
+  @extend .text-on-surface-variant;
+}
+
+.bg-outline {
+  background-color: var(--outline) !important;
+}
+.text-outline {
+  color: var(--outline) !important;
+}
+.border-outline {
+  border-color: var(--outline) !important;
+}
+
+.bg-inverse-surface {
+  background-color: var(--inverse-surface) !important;
+}
+.text-inverse-surface {
+  color: var(--inverse-surface) !important;
 }
-.surface-variant-text {
-  color: var(--surface-variant);
+.border-inverse-surface {
+  border-color: var(--inverse-surface) !important;
 }
-.on-surface-variant {
-  background-color: var(--on-surface-variant);
+
+.bg-inverse-on-surface {
+  background-color: var(--inverse-on-surface) !important;
 }
-.on-surface-variant-text {
-  color: var(--on-surface-variant);
+.text-inverse-on-surface {
+  color: var(--inverse-on-surface) !important;
 }
-.outline {
-  background-color: var(--outline);
+.border-inverse-on-surface {
+  border-color: var(--inverse-on-surface) !important;
 }
-.outline-text {
-  color: var(--outline);
+
+.bg-inverse-primary {
+  background-color: var(--inverse-primary) !important;
 }
-.inverse-on-surface {
-  background-color: var(--inverse-on-surface);
+.text-inverse-primary {
+  color: var(--inverse-primary) !important;
 }
-.inverse-on-surface-text {
-  color: var(--inverse-on-surface);
+.border-inverse-primary {
+  border-color: var(--inverse-primary) !important;
 }
-.inverse-surface {
-  background-color: var(--inverse-surface);
+
+.bg-shadow {
+  background-color: var(--shadow) !important;
 }
-.inverse-surface-text {
-  color: var(--inverse-surface);
+.text-shadow {
+  color: var(--shadow) !important;
 }
-.inverse-primary {
-  background-color: var(--inverse-primary);
+.border-shadow {
+  border-color: var(--shadow) !important;
 }
-.inverse-primary-text {
-  color: var(--inverse-primary);
+
+.bg-surface-tint {
+  background-color: var(--surface-tint) !important;
 }
-.shadow {
-  background-color: var(--shadow);
+.text-surface-tint {
+  color: var(--surface-tint) !important;
 }
-.shadow-text {
-  color: var(--shadow);
+.border-surface-tint {
+  border-color: var(--surface-tint) !important;
 }
-.surface-tint {
-  background-color: var(--surface-tint);
+
+.bg-outline-variant {
+  background-color: var(--outline-variant) !important;
 }
-.surface-tint-text {
-  color: var(--surface-tint);
+.text-outline-variant {
+  color: var(--outline-variant) !important;
 }
-.outline-variant {
-  background-color: var(--outline-variant);
+.border-outline-variant {
+  border-color: var(--outline-variant) !important;
 }
-.outline-variant-text {
-  color: var(--outline-variant);
+
+.bg-scrim {
+  background-color: var(--scrim) !important;
 }
-.scrim {
-  background-color: var(--scrim);
+.text-scrim {
+  color: var(--scrim) !important;
 }
-.scrim-text {
-  color: var(--scrim);
+.border-scrim {
+  border-color: var(--scrim) !important;
 }

package/dist/css/theme/palette.scss

@@ -629,19 +629,25 @@ $colors-list: (
     $var-name: "--color-#{$color-name}-#{$i}";
     $text-selector: ".text-#{$color-name}-#{$i}";
     $bg-selector: ".bg-#{$color-name}-#{$i}";
+    $border-selector: ".border-#{$color-name}-#{$i}";
 
     // Color 6 is also the "default" color
     @if $i == 6 {
       $text-selector: ".text-#{$color-name}, #{$text-selector}";
       $bg-selector: ".bg-#{$color-name}, #{$bg-selector}";
+      $border-selector: ".border-#{$color-name}, #{$border-selector}";
     }
 
     #{$text-selector} {
-      color: var(#{$var-name});
+      color: var(#{$var-name}) !important;
     }
 
     #{$bg-selector} {
-      background-color: var(#{$var-name});
+      background-color: var(#{$var-name}) !important;
+    }
+
+    #{$border-selector} {
+      border-color: var(#{$var-name}) !important;
     }
   }
 }

package/dist/helpers/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./clickOutside";
-export * from "./activationHandler";
+export * from "./ripple";

package/dist/helpers/index.js

@@ -1,2 +1,2 @@
 export * from "./clickOutside";
-export * from "./activationHandler";
+export * from "./ripple";

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");
+        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-prealpha12";
+declare const _default: "0.1.0-prealpha15";
 export default _default;

package/dist/helpers/version.js

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

package/dist/stores/QTheme.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="svelte" />
-interface IMaterialDynamicColorsThemeColorFormatted {
+interface MaterialColors {
     primary: string;
     "on-primary": string;
     "primary-container": string;
@@ -28,14 +28,15 @@ interface IMaterialDynamicColorsThemeColorFormatted {
     "inverse-primary": string;
     shadow: string;
 }
-interface IMaterialDynamicColorsThemeFormatted {
-    light: IMaterialDynamicColorsThemeColorFormatted;
-    dark: IMaterialDynamicColorsThemeColorFormatted;
+interface MaterialColorsTheme {
+    light: MaterialColors;
+    dark: MaterialColors;
 }
-type CSSDynamicColor = `${keyof IMaterialDynamicColorsThemeColorFormatted}-${keyof IMaterialDynamicColorsThemeFormatted}`;
+type ThemeColorName = `${keyof MaterialColors}-${keyof MaterialColorsTheme}`;
+type ThemeColors = Record<ThemeColorName, string>;
 export declare const QTheme: {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<Record<"error-dark" | "error-light" | "outline-dark" | "outline-light" | "primary-dark" | "primary-light" | "secondary-dark" | "secondary-light" | "tertiary-dark" | "tertiary-light" | "surface-dark" | "surface-light" | "surface-variant-dark" | "surface-variant-light" | "on-primary-dark" | "on-primary-light" | "primary-container-dark" | "primary-container-light" | "on-primary-container-dark" | "on-primary-container-light" | "on-secondary-dark" | "on-secondary-light" | "secondary-container-dark" | "secondary-container-light" | "on-secondary-container-dark" | "on-secondary-container-light" | "on-tertiary-dark" | "on-tertiary-light" | "tertiary-container-dark" | "tertiary-container-light" | "on-tertiary-container-dark" | "on-tertiary-container-light" | "error-container-dark" | "error-container-light" | "on-error-dark" | "on-error-light" | "on-error-container-dark" | "on-error-container-light" | "background-dark" | "background-light" | "on-background-dark" | "on-background-light" | "on-surface-dark" | "on-surface-light" | "on-surface-variant-dark" | "on-surface-variant-light" | "inverse-on-surface-dark" | "inverse-on-surface-light" | "inverse-surface-dark" | "inverse-surface-light" | "inverse-primary-dark" | "inverse-primary-light" | "shadow-dark" | "shadow-light", string>>, invalidate?: import("svelte/store").Invalidator<Record<"error-dark" | "error-light" | "outline-dark" | "outline-light" | "primary-dark" | "primary-light" | "secondary-dark" | "secondary-light" | "tertiary-dark" | "tertiary-light" | "surface-dark" | "surface-light" | "surface-variant-dark" | "surface-variant-light" | "on-primary-dark" | "on-primary-light" | "primary-container-dark" | "primary-container-light" | "on-primary-container-dark" | "on-primary-container-light" | "on-secondary-dark" | "on-secondary-light" | "secondary-container-dark" | "secondary-container-light" | "on-secondary-container-dark" | "on-secondary-container-light" | "on-tertiary-dark" | "on-tertiary-light" | "tertiary-container-dark" | "tertiary-container-light" | "on-tertiary-container-dark" | "on-tertiary-container-light" | "error-container-dark" | "error-container-light" | "on-error-dark" | "on-error-light" | "on-error-container-dark" | "on-error-container-light" | "background-dark" | "background-light" | "on-background-dark" | "on-background-light" | "on-surface-dark" | "on-surface-light" | "on-surface-variant-dark" | "on-surface-variant-light" | "inverse-on-surface-dark" | "inverse-on-surface-light" | "inverse-surface-dark" | "inverse-surface-light" | "inverse-primary-dark" | "inverse-primary-light" | "shadow-dark" | "shadow-light", string>> | undefined) => import("svelte/store").Unsubscriber;
+    subscribe: (this: void, run: import("svelte/store").Subscriber<ThemeColors>, invalidate?: import("svelte/store").Invalidator<ThemeColors> | undefined) => import("svelte/store").Unsubscriber;
     setTheme: (from: string) => Promise<void>;
-    updateThemeColor: (color: CSSDynamicColor, newValue: string) => void;
+    updateThemeColor: (color: ThemeColorName, newValue: string) => void;
 };
 export {};

package/dist/stores/QTheme.js

@@ -1,7 +1,7 @@
 import { writable } from "svelte/store";
 import materialDynamicColors from "material-dynamic-colors";
-import { convertCase } from "../utils/string";
-import QColors from "../utils/colors";
+import { convertCase } from "../utils";
+import { QColors } from "../utils";
 function extractColorFromCssVar(cssVar) {
     const rootStyles = getComputedStyle(document.documentElement);
     const varName = cssVar.replace(/var\(([a-z0-9-]+)\)/, "$1");
@@ -27,7 +27,7 @@ async function prepareThemeColors(from) {
 }
 function themeBuilder() {
     const { subscribe, set, update } = writable({});
-    prepareThemeColors("#3499E7").then((res) => set(res));
+    prepareThemeColors("#3499E7").then(set);
     const apply = () => {
         let root = document.documentElement;
         if (root === null)

package/dist/stores/Quaff.js

@@ -2,7 +2,7 @@ import { writable, derived } from "svelte/store";
 import { page } from "$app/stores";
 import version from "../helpers/version";
 function quaff() {
-    const { subscribe, set, update } = writable({
+    const { subscribe, update } = writable({
         version,
         dark: false,
         //TODO lang: {},

package/dist/stores/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./QTheme";
+export * from "./Quaff";

package/dist/stores/index.js

@@ -0,0 +1,2 @@
+export * from "./QTheme";
+export * from "./Quaff";

package/dist/utils/clipboard.d.ts

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

package/dist/utils/clipboard.js

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

package/dist/utils/dom.d.ts

@@ -6,3 +6,4 @@ export declare function getFocusableChildren<T extends HTMLElement>(el: T): T[];
 export declare function getClosestFocusableChild(el: HTMLElement): HTMLElement;
 export declare function getClosestFocusableSibling<T extends HTMLElement>(el: T, direction: Direction): HTMLElement;
 export declare function getClosestFocusableBlock(el: HTMLElement, direction: Direction): HTMLElement;
+export declare function movementDirection(from: HTMLElement, to: HTMLElement): Direction;

package/dist/utils/dom.js

@@ -69,3 +69,7 @@ export function getClosestFocusableBlock(el, direction) {
     }
     return targetBlock;
 }
+export function movementDirection(from, to) {
+    const relativePosition = from.compareDocumentPosition(to);
+    return relativePosition === 2 ? "previous" : "next";
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./clipboard";
+export { default as QColors } from "./colors";
+export * from "./dom";
+export * from "./events";
+export * from "./props";
+export * from "./string";
+export * from "./types";
+export * from "./watchable";

package/dist/utils/index.js

@@ -1 +1,8 @@
-"use strict";
+export * from "./clipboard";
+export { default as QColors } from "./colors";
+export * from "./dom";
+export * from "./events";
+export * from "./props";
+export * from "./string";
+export * from "./types";
+export * from "./watchable";

package/dist/utils/props.d.ts

@@ -1,4 +1,4 @@
-export declare function createStyles(styleObj: Record<string, string | number | boolean | null | undefined>, userStyles?: string): string | null;
+export declare function createStyles(styleObj: Record<string, string | number | boolean | null | undefined>, userStyles?: string | null): string | null;
 interface CreateClassesOptions {
     component?: string;
     element?: string;