@quaffui/quaff 0.1.0-prealpha16 → 0.1.0-prealpha19

package/dist/components/toggle/QToggle.svelte

@@ -1,34 +0,0 @@
-<script>export let value, icon = void 0, label = void 0, leftLabel = void 0, disable = void 0, userClasses = "";
-export { userClasses as class };
-function toggle() {
-  if (disable !== true) {
-    value = !value;
-  }
-}
-</script>
-
-<div
-  on:click={toggle}
-  class="q-toggle {userClasses}"
-  class:q-toggle--reversed={leftLabel}
-  class:q-toggle--disabled={disable}
-  aria-disabled={disable || undefined}
-  role="switch"
-  aria-checked={value}
-  tabindex="0"
-  {...$$restProps}
->
-  <label class="q-toggle__inner" class:q-toggle__inner--icon={icon}>
-    <input bind:checked={value} type="checkbox" disabled={disable || undefined} />
-    <span>
-      {#if icon}
-        <i>{icon}</i>
-      {/if}
-    </span>
-  </label>
-  {#if label}
-    <span class="q-toggle__label">
-      {label}
-    </span>
-  {/if}
-</div>

package/dist/components/toggle/QToggle.svelte.d.ts

@@ -1,23 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { QToggleProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value: QToggleProps["value"];
-        icon?: QToggleProps["icon"];
-        label?: QToggleProps["label"];
-        leftLabel?: QToggleProps["leftLabel"];
-        disable?: QToggleProps["disable"];
-        class?: string | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type QToggleProps_ = typeof __propDef.props;
-export { QToggleProps_ as QToggleProps };
-export type QToggleEvents = typeof __propDef.events;
-export type QToggleSlots = typeof __propDef.slots;
-export default class QToggle extends SvelteComponent<QToggleProps, QToggleEvents, QToggleSlots> {
-}

package/dist/components/toggle/index.scss

@@ -1,31 +0,0 @@
-.q-toggle {
-  $root: &;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.8em;
-  cursor: pointer;
-
-  &--disabled {
-    cursor: not-allowed;
-
-    #{$root}__label {
-      opacity: 0.5;
-    }
-  }
-
-  &--reversed {
-    flex-direction: row-reverse;
-  }
-
-  &__inner {
-    @include selection(switch);
-  }
-
-  &__label {
-    font-size: 1rem;
-  }
-
-  & * {
-    pointer-events: none;
-  }
-}

package/dist/components/toggle/props.d.ts

@@ -1,9 +0,0 @@
-import type { NativeProps } from "../../utils";
-export interface QToggleProps extends NativeProps {
-    value?: boolean;
-    label?: string;
-    leftLabel?: boolean;
-    icon?: string;
-    disable?: boolean;
-}
-export declare const QTogglePropsDefaults: QToggleProps;

package/dist/components/toggle/props.js

@@ -1,9 +0,0 @@
-import { NativePropsDefaults } from "../../utils";
-export const QTogglePropsDefaults = {
-    value: false,
-    label: undefined,
-    leftLabel: false,
-    icon: undefined,
-    disable: false,
-    ...NativePropsDefaults,
-};

package/dist/css/grid.scss

@@ -1,50 +0,0 @@
-@import "./variables-sass.scss";
-
-.row {
-  display: grid;
-  grid-template-columns: repeat($grid-columns, 1fr);
-  grid-gap: 0;
-
-  // Gutter classes
-  &.q-gutter-xs {
-    grid-gap: $gutter-xs;
-  }
-
-  &.q-gutter-sm {
-    grid-gap: $gutter-sm;
-  }
-
-  &.q-gutter-md {
-    grid-gap: $gutter-md;
-  }
-
-  &.q-gutter-lg {
-    grid-gap: $gutter-lg;
-  }
-
-  &.q-gutter-xl {
-    grid-gap: $gutter-xl;
-  }
-
-  &.q-gutter-none {
-    grid-gap: 0px;
-  }
-
-  // Column classes for all sizes
-  @for $i from 1 through $grid-columns {
-    & > .col-#{$i} {
-      grid-column: span #{$i};
-    }
-  }
-
-  // Column classes for each breakpoint
-  @each $breakpoint, $min-width in $breakpoints {
-    @media (min-width: #{$min-width}) {
-      @for $i from 1 through $grid-columns {
-        & > .col-#{$breakpoint}-#{$i} {
-          grid-column: span #{$i};
-        }
-      }
-    }
-  }
-}

package/dist/css/mixins.scss

@@ -1,137 +0,0 @@
-@import "mixins/menu.scss";
-@import "mixins/selection.scss";
-@import "mixins/table.scss";
-
-// Spaces
-@mixin padding($pos: "a", $size: "sm") {
-  $position: map.get($positions, $pos);
-  $space: map.get($spaces, $size);
-
-  padding#{$position}: $space;
-}
-
-@mixin margin($pos: "a", $size: "sm") {
-  $position: map.get($positions, $pos);
-  $space: map.get($spaces, $size);
-
-  margin#{$position}: $space;
-}
-
-@mixin gap($space: "sm") {
-  gap: map.get($spaces, $space);
-}
-
-//States
-@mixin elevate($strength, $position) {
-  $coeff: 1;
-  @if $position == "top" {
-    $coeff: -1;
-  }
-  $elevate: 0.125rem * $strength;
-
-  box-shadow: 0 $elevate * $coeff $elevate 0 rgb(0, 0, 0, 0.24 + 0.08 * $strength);
-}
-
-@mixin border($color: var(--outline)) {
-  border: 0.0625rem solid $color;
-}
-
-@mixin transparent($ripple: false) {
-  background-color: transparent;
-  background: transparent;
-  color: inherit;
-
-  &:is(:focus, :hover) > .q-icon {
-    font-variation-settings: "FILL" 1;
-  }
-
-  @if $ripple {
-    &::after {
-      background-image: radial-gradient(circle, rgb(150, 150, 150, 0.2) 1%, transparent 1%);
-    }
-  }
-}
-
-//Layout
-@mixin include-drawers($baseWidth, $pos, $el) {
-  // Left drawer
-  &.q-drawer--left ~ .q-#{$el} {
-    width: calc(#{$baseWidth} - #{$L_Drawer});
-  }
-
-  // Right drawer
-  &.q-drawer--right ~ .q-#{$el} {
-    width: calc(#{$baseWidth} - #{$R_Drawer});
-  }
-
-  // Left drawer + Right drawer
-  &.q-drawer--left
-    ~ .q-drawer--active.q-drawer--right:not(.q-drawer--offset-#{$pos}, .q-drawer--overlay)
-    ~ .q-#{$el} {
-    width: calc(#{$baseWidth} - #{$LR_Drawer});
-  }
-}
-
-// Images
-@mixin responsive($parent: null) {
-  object-fit: cover;
-  object-position: center;
-  transition:
-    var(--speed3) transform,
-    var(--speed3) border-radius,
-    var(--speed3) padding;
-  width: 100%;
-  height: 100%;
-
-  @include margin("x", "auto");
-
-  @if $parent != null {
-    width: 2.5rem;
-    border: 0.25rem solid transparent;
-  }
-}
-
-@mixin btn-image($parent: "btn") {
-  &.q-#{$parent}--sm > &__img--responsive {
-    height: 2rem;
-    width: 2rem;
-  }
-
-  &.q-#{$parent}--lg > &__img--responsive {
-    height: 3rem;
-    width: 3rem;
-  }
-
-  &.q-#{$parent}--xl > &__img--responsive {
-    height: 3.5rem;
-    width: 3.5rem;
-  }
-
-  > .q-#{$parent}__img {
-    margin-inline: -0.5rem;
-
-    &:not(&--responsive) {
-      min-width: 1.5rem;
-      max-width: 1.5rem;
-      min-height: 1.5rem;
-      max-height: 1.5rem;
-    }
-
-    &--responsive {
-      @include responsive($parent);
-
-      $marginSize: -1.5rem;
-      @if $parent == "chip" {
-        $marginSize: -1rem;
-      }
-
-      margin-left: $marginSize;
-      margin-right: -0.5rem;
-
-      &.q-#{$parent}__img--trailing {
-        margin-left: -0.5rem;
-        margin-right: $marginSize;
-      }
-    }
-  }
-}

package/dist/css/states.scss

@@ -1,75 +0,0 @@
-// DISABLED
-.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-
-  &::before,
-  &::after {
-    all: unset;
-  }
-}
-
-// BORDERED
-.border {
-  @include border;
-}
-
-// ELEVATED
-
-.elevate {
-  &-none {
-    box-shadow: none;
-  }
-
-  $elevations: (
-    "sm": 1,
-    "md": 2,
-    "lg": 3,
-  );
-
-  @each $elevation, $value in $elevations {
-    &-#{$elevation} {
-      &-top {
-        @include elevate($value, "top");
-      }
-      &-bottom {
-        @include elevate($value, "bottom");
-      }
-    }
-  }
-}
-
-// TRANSPARENT
-.transparent {
-  @include transparent;
-}
-
-// WITH RIPPLE EFFECT
-.ripple {
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-    border-radius: inherit;
-    background-position: center;
-    opacity: 0;
-    transition: none;
-    background-image: radial-gradient(circle, rgb(255, 255, 255, 0.4) 1%, transparent 1%);
-  }
-
-  &:is(:focus, :hover)::after {
-    background-size: 15000%;
-    opacity: 1;
-    transition: var(--speed2) background-size linear;
-  }
-
-  &:active::after {
-    background-size: 5000%;
-    opacity: 0;
-    transition: none;
-  }
-}

package/dist/css/theme/bridge.scss

@@ -1,15 +0,0 @@
-// Use this for things we might refactor at a later point, e.g beer css variables
-:root {
-  --size: 16px;
-  --font: Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
-  --font-icon: "Material Symbols Outlined";
-  --speed1: 0.1s;
-  --speed2: 0.2s;
-  --speed3: 0.3s;
-  --speed4: 0.4s;
-  --active: rgb(0 0 0 / 0.1);
-}
-
-body.dark {
-  --active: rgb(255 255 255 / 0.2);
-}

package/dist/css/theme/theme.dark.scss

@@ -1,39 +0,0 @@
-.body--dark {
-  --body: #000;
-  --primary: rgba(var(--primary-dark));
-  --on-primary: rgba(var(--on-primary-dark));
-  --primary-container: rgba(var(--primary-container-dark));
-  --on-primary-container: rgba(var(--on-primary-container-dark));
-  --secondary: rgba(var(--secondary-dark));
-  --on-secondary: rgba(var(--on-secondary-dark));
-  --secondary-container: rgba(var(--secondary-container-dark));
-  --on-secondary-container: rgba(var(--on-secondary-container-dark));
-  --tertiary: rgba(var(--tertiary-dark));
-  --on-tertiary: rgba(var(--on-tertiary-dark));
-  --tertiary-container: rgba(var(--tertiary-container-dark));
-  --on-tertiary-container: rgba(var(--on-tertiary-container-dark));
-  --error: rgba(var(--error-dark));
-  --error-container: rgba(var(--error-container-dark));
-  --on-error: rgba(var(--on-error-dark));
-  --on-error-container: rgba(var(--on-error-container-dark));
-  --background: rgba(var(--background-dark));
-  --on-background: rgba(var(--on-background-dark));
-  --surface: rgba(var(--surface-dark));
-  --on-surface: rgba(var(--on-surface-dark));
-  --on-surface-2: rgba(var(--on-surface-dark), 0.08);
-  --on-surface-4: rgba(var(--on-surface-dark), 0.12);
-  --surface-variant: rgba(var(--surface-variant-dark));
-  --on-surface-variant: rgba(var(--on-surface-variant-dark));
-  --on-surface-variant-2: rgba(var(--on-surface-variant-dark), 0.08);
-  --on-surface-variant-4: rgba(var(--on-surface-variant-dark), 0.12);
-  --outline: rgba(var(--outline-dark));
-  --outline-2: rgba(var(--outline-dark), 0.12);
-  --outline-4: rgba(var(--outline-dark), 0.24);
-  --inverse-on-surface: rgba(var(--inverse-on-surface-dark));
-  --inverse-surface: rgba(var(--inverse-surface-dark));
-  --inverse-primary: rgba(var(--inverse-primary-dark));
-  --shadow: rgba(var(--shadow-dark));
-  --surface-tint: rgba(var(--surface-tint-dark));
-  --outline-variant: rgba(var(--outline-variant-dark));
-  --scrim: rgba(var(--scrim-dark));
-}

package/dist/css/theme/theme.light.scss

@@ -1,39 +0,0 @@
-.body--light {
-  --body: #fff;
-  --primary: rgba(var(--primary-light));
-  --on-primary: rgba(var(--on-primary-light));
-  --primary-container: rgba(var(--primary-container-light));
-  --on-primary-container: rgba(var(--on-primary-container-light));
-  --secondary: rgba(var(--secondary-light));
-  --on-secondary: rgba(var(--on-secondary-light));
-  --secondary-container: rgba(var(--secondary-container-light));
-  --on-secondary-container: rgba(var(--on-secondary-container-light));
-  --tertiary: rgba(var(--tertiary-light));
-  --on-tertiary: rgba(var(--on-tertiary-light));
-  --tertiary-container: rgba(var(--tertiary-container-light));
-  --on-tertiary-container: rgba(var(--on-tertiary-container-light));
-  --error: rgba(var(--error-light));
-  --error-container: rgba(var(--error-container-light));
-  --on-error: rgba(var(--on-error-light));
-  --on-error-container: rgba(var(--on-error-container-light));
-  --background: rgba(var(--background-light));
-  --on-background: rgba(var(--on-background-light));
-  --surface: rgba(var(--surface-light));
-  --on-surface: rgba(var(--on-surface-light));
-  --on-surface-2: rgba(var(--on-surface-light), 0.08);
-  --on-surface-4: rgba(var(--on-surface-light), 0.12);
-  --surface-variant: rgba(var(--surface-variant-light));
-  --on-surface-variant: rgba(var(--on-surface-variant-light));
-  --on-surface-variant-2: rgba(var(--on-surface-variant-light), 0.08);
-  --on-surface-variant-4: rgba(var(--on-surface-variant-light), 0.12);
-  --outline: rgba(var(--outline-light));
-  --outline-2: rgba(var(--outline-light), 0.12);
-  --outline-4: rgba(var(--outline-light), 0.24);
-  --inverse-on-surface: rgba(var(--inverse-on-surface-light));
-  --inverse-surface: rgba(var(--inverse-surface-light));
-  --inverse-primary: rgba(var(--inverse-primary-light));
-  --shadow: rgba(var(--shadow-light));
-  --surface-tint: rgba(var(--surface-tint-light));
-  --outline-variant: rgba(var(--outline-variant-light));
-  --scrim: rgba(var(--scrim-light));
-}

package/dist/css/variables-sass.scss

@@ -1,16 +0,0 @@
-// Grid variables
-$grid-columns: 12;
-$gutter-xs: 4px;
-$gutter-sm: 8px;
-$gutter-md: 16px;
-$gutter-lg: 24px;
-$gutter-xl: 48px;
-
-// Responsive breakpoints
-$breakpoints: (
-  xs: 0px,
-  sm: 600px,
-  md: 960px,
-  lg: 1280px,
-  xl: 1920px,
-);

package/dist/stores/QTheme.d.ts

@@ -1,42 +0,0 @@
-/// <reference types="svelte" />
-interface MaterialColors {
-    primary: string;
-    "on-primary": string;
-    "primary-container": string;
-    "on-primary-container": string;
-    secondary: string;
-    "on-secondary": string;
-    "secondary-container": string;
-    "on-secondary-container": string;
-    tertiary: string;
-    "on-tertiary": string;
-    "tertiary-container": string;
-    "on-tertiary-container": string;
-    error: string;
-    "error-container": string;
-    "on-error": string;
-    "on-error-container": string;
-    background: string;
-    "on-background": string;
-    surface: string;
-    "on-surface": string;
-    "surface-variant": string;
-    "on-surface-variant": string;
-    outline: string;
-    "inverse-on-surface": string;
-    "inverse-surface": string;
-    "inverse-primary": string;
-    shadow: string;
-}
-interface MaterialColorsTheme {
-    light: MaterialColors;
-    dark: MaterialColors;
-}
-type ThemeColorName = `${keyof MaterialColors}-${keyof MaterialColorsTheme}`;
-type ThemeColors = Record<ThemeColorName, string>;
-export declare const QTheme: {
-    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: ThemeColorName, newValue: string) => void;
-};
-export {};

package/dist/stores/QTheme.js

@@ -1,59 +0,0 @@
-import { writable } from "svelte/store";
-import materialDynamicColors from "material-dynamic-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");
-    return rootStyles.getPropertyValue(varName).trim();
-}
-async function prepareThemeColors(from) {
-    if (from.startsWith("var(")) {
-        from = extractColorFromCssVar(from);
-    }
-    const theme = await materialDynamicColors(from);
-    const themeColors = {};
-    let mode;
-    for (mode in theme) {
-        let color;
-        for (color in theme[mode]) {
-            const colorFormatted = convertCase(color, "camel", "kebab");
-            const cssColor = `${colorFormatted}-${mode}`;
-            themeColors[cssColor] = theme[mode][color];
-        }
-    }
-    return themeColors;
-}
-function themeBuilder() {
-    const { subscribe, set, update } = writable({});
-    prepareThemeColors("#3499E7").then(set);
-    const apply = () => {
-        const root = document.documentElement;
-        if (root === null)
-            return;
-        update(($themeColors) => {
-            let colorName;
-            for (colorName in $themeColors) {
-                root.style.setProperty(`--${colorName}`, QColors.hexToRgb($themeColors[colorName]).join(", "));
-            }
-            return $themeColors;
-        });
-    };
-    const updateThemeColor = (color, newValue) => {
-        update(($themeColors) => {
-            $themeColors[color] = newValue;
-            return $themeColors;
-        });
-    };
-    const setTheme = async (from) => {
-        const newTheme = await prepareThemeColors(from);
-        set(newTheme);
-        apply();
-    };
-    return {
-        subscribe,
-        setTheme,
-        updateThemeColor,
-    };
-}
-export const QTheme = themeBuilder();

package/dist/stores/Quaff.d.ts

@@ -1,32 +0,0 @@
-/// <reference types="svelte" />
-/// <reference types="@sveltejs/kit" />
-export declare const quaffStore: {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<{
-        version: string;
-        dark: boolean;
-    }>, invalidate?: import("svelte/store").Invalidator<{
-        version: string;
-        dark: boolean;
-    }> | 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?: import("svelte/store").Invalidator<{
-            version: string;
-            dark: boolean;
-        }> | undefined) => import("svelte/store").Unsubscriber;
-        page: (this: void, run: import("svelte/store").Subscriber<import("@sveltejs/kit").Page<Record<string, string>, string | null>>, invalidate?: import("svelte/store").Invalidator<import("@sveltejs/kit").Page<Record<string, string>, string | null>> | undefined) => import("svelte/store").Unsubscriber;
-    };
-}>;

package/dist/stores/Quaff.js

@@ -1,58 +0,0 @@
-import { writable, derived } from "svelte/store";
-import { page } from "$app/stores";
-import version from "../helpers/version";
-function quaff() {
-    const { subscribe, update } = writable({
-        version,
-        dark: false,
-        //TODO lang: {},
-        //TODO? iconSet: {},
-    });
-    const toggleDarkMode = () => {
-        return update(($quaff) => {
-            $quaff.dark = !$quaff.dark;
-            const mode = $quaff.dark
-                ? {
-                    from: "light",
-                    to: "dark",
-                }
-                : {
-                    from: "dark",
-                    to: "light",
-                };
-            const body = document.querySelector("body");
-            if (body) {
-                body.classList.replace(`body--${mode.from}`, `body--${mode.to}`);
-            }
-            document.cookie = `current_mode=${mode.to}; max-age=31536000; path="/"; SameSite=strict`;
-            return $quaff;
-        });
-    };
-    const setDarkMode = (newVal) => {
-        return update(($quaff) => {
-            $quaff.dark = newVal;
-            return $quaff;
-        });
-    };
-    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,
-        },
-    };
-});