@quaffui/quaff 0.1.0-prealpha

package/dist/composables/use-index.js

@@ -0,0 +1,17 @@
+import { getContext, hasContext, setContext } from "svelte";
+export function setIndex(index) {
+    setContext("index", {
+        index: () => {
+            index++;
+            return index;
+        },
+    });
+    return index;
+}
+export function getIndex() {
+    if (!hasContext("index")) {
+        return undefined;
+    }
+    const { index } = getContext("index");
+    return index();
+}

package/dist/composables/use-router-link.d.ts

@@ -0,0 +1,18 @@
+import type { Page } from "@sveltejs/kit";
+export interface UseRouterLinkProps {
+    href?: string;
+    to?: string;
+    disable: boolean;
+    activeClass?: string;
+    replace: boolean;
+}
+export declare const UseRouterLinkPropsDefaults: UseRouterLinkProps;
+export declare function isRouteActive(router: Page<Record<string, string>, string | null>, to: string | undefined): boolean;
+export default function <T extends UseRouterLinkProps>(props: T): {
+    hasLink: boolean;
+    linkAttributes: {
+        href: string | undefined;
+        "data-sveltkit-reload": string | undefined;
+    };
+    linkClasses: string;
+};

package/dist/composables/use-router-link.js

@@ -0,0 +1,27 @@
+import { createClasses } from "../utils/props";
+import "$lib/stores/Quaff";
+export const UseRouterLinkPropsDefaults = {
+    href: undefined,
+    to: undefined,
+    disable: false,
+    activeClass: undefined,
+    replace: false,
+};
+export function isRouteActive(router, to) {
+    return to === "/"
+        ? router.url.pathname === to
+        : router.url.pathname.slice(0, (to || "").length) === to;
+}
+export default function (props) {
+    const hasLink = props.to !== undefined || props.href !== undefined;
+    const linkClasses = createClasses([hasLink && "q-link", props.disable && "disable"]);
+    const linkAttributes = {
+        href: props.to || props.href,
+        "data-sveltkit-reload": props.replace === true ? "" : undefined,
+    };
+    return {
+        hasLink,
+        linkAttributes,
+        linkClasses,
+    };
+}

package/dist/composables/use-size.d.ts

@@ -0,0 +1,11 @@
+export declare const useSizeClasses: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+export interface useSizeProps {
+    size?: string;
+}
+export default function (sizeProp: any): string | null;

package/dist/composables/use-size.js

@@ -0,0 +1,13 @@
+export const useSizeClasses = {
+    xs: "tiny",
+    sm: "small",
+    md: "",
+    lg: "large",
+    xl: "extra",
+};
+export default function (sizeProp) {
+    // return sizeStyle
+    return sizeProp in useSizeClasses
+        ? useSizeClasses[sizeProp]
+        : null;
+}

package/dist/css/grid.scss

@@ -0,0 +1,65 @@
+// 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,
+);
+
+.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/index.scss

@@ -0,0 +1,119 @@
+@use "sass:map";
+
+$space-base: 16px !default;
+$space-x-base: $space-base !default;
+$space-y-base: $space-base !default;
+
+$space-none: 0 !default;
+$space-xs: 0.25rem !default;
+$space-sm: 0.5rem !default;
+$space-md: 1rem !default;
+$space-lg: 1.5rem !default;
+$space-xl: 2rem !default;
+
+$spaces: (
+  "auto": auto,
+  "none": $space-none,
+  "xs": $space-xs,
+  "sm": $space-sm,
+  "md": $space-md,
+  "lg": $space-lg,
+  "xl": $space-xl,
+) !default;
+
+$positions: (
+  "t": -top,
+  "r": -right,
+  "b": -bottom,
+  "l": -left,
+  "x": -inline,
+  "y": -block,
+  "a": "",
+);
+
+@import "./theme/theme";
+@import "./mixins";
+@import "./grid";
+@import "./states";
+
+@import "$components/avatar";
+@import "$components/breadcrumbs";
+@import "$components/button";
+@import "$components/card";
+@import "$components/checkbox";
+@import "$components/chip";
+@import "$components/dialog";
+@import "$components/drawer";
+@import "$components/footer";
+@import "$components/icon";
+@import "$components/input";
+@import "$components/layout";
+@import "$components/list";
+@import "$components/progress";
+@import "$components/radio";
+@import "$components/select";
+@import "$components/table";
+@import "$components/tabs";
+@import "$components/toggle";
+@import "$components/toolbar";
+@import "$components/tooltip";
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+
+@each $spaceName, $spaceVal in $spaces {
+  @each $posName, $_ in $positions {
+    .q-p#{$posName}-#{$spaceName} {
+      @include padding($posName, $spaceName);
+    }
+
+    .q-m#{$posName}-#{$spaceName} {
+      @include margin($posName, $spaceName);
+    }
+  }
+
+  @if $spaceName != "auto" {
+    .q-gap-#{$spaceName} {
+      gap: $spaceVal;
+    }
+  }
+}
+
+.flex {
+  display: flex;
+}
+.between-align {
+  justify-content: space-between;
+}
+.around-align {
+  justify-content: space-around;
+}
+.evenly-align {
+  justify-content: space-evenly;
+}
+.stretch-align {
+  justify-content: stretch;
+}
+.reverse {
+  flex-direction: row-reverse;
+}
+.column {
+  flex-direction: column;
+}
+
+.no-overflow {
+  overflow: hidden;
+}
+.scroll {
+  overflow: scroll;
+}
+
+.no-select {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

package/dist/css/mixins/field.scss

@@ -0,0 +1,430 @@
+@mixin field {
+  $root: &;
+  $label: #{$root}__label;
+  $labelActive: #{$root}__label--active;
+
+  height: 3rem;
+  margin-bottom: 2rem;
+  border-radius: 0.25rem;
+
+  &--sm,
+  &--dense {
+    height: 2.5rem;
+  }
+
+  &--lg {
+    height: 3.5rem;
+  }
+
+  &--xl {
+    height: 4rem;
+  }
+
+  &:not(&--has-border) {
+    border-radius: 0.25rem 0.25rem 0 0;
+  }
+
+  &--rounded#{$root}--sm,
+  &--rounded#{$root}--dense {
+    border-radius: 1.25rem;
+  }
+
+  &--rounded {
+    border-radius: 1.5rem;
+  }
+
+  &--rounded#{$root}--lg {
+    border-radius: 1.75rem;
+  }
+
+  &--rounded#{$root}--xl {
+    border-radius: 2rem;
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: inherit;
+    background-color: inherit;
+  }
+
+  &--filled::before {
+    background-color: var(--surface-variant);
+    color: var(--on-surface-variant);
+  }
+
+  & > :is(i, img, svg, .loader) {
+    position: absolute;
+    top: 50%;
+    left: auto;
+    right: 1rem;
+    transform: translateY(-50%);
+    cursor: pointer;
+    z-index: 0;
+  }
+
+  &--bordered,
+  &--filled,
+  &--rounded {
+    > :is(i, img, svg, .loader) {
+      left: auto;
+      right: 1rem;
+    }
+  }
+
+  > :is(i, img, svg, .loader):first-child {
+    left: 1rem;
+    right: auto;
+  }
+
+  &--bordered,
+  &--rounded,
+  &--outlined,
+  &--filled {
+    > :is(i, img, svg, .loader):first-child {
+      left: 1rem;
+      right: auto;
+    }
+  }
+
+  &--error > i {
+    color: var(--error);
+  }
+
+  > .loader {
+    border-width: 0.1875rem;
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  /* input, textarea and select */
+  > select,
+  input[type^="date"],
+  input[type^="time"],
+  input[type="search"] {
+    appearance: none;
+    cursor: pointer;
+  }
+
+  input[type^="date"]::-webkit-inner-spin-button,
+  input[type^="date"]::-webkit-calendar-picker-indicator,
+  input[type^="time"]::-webkit-inner-spin-button,
+  input[type^="time"]::-webkit-calendar-picker-indicator {
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    cursor: pointer;
+  }
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button,
+  input[type="number"] {
+    appearance: none;
+    -moz-appearance: textfield;
+  }
+
+  input[type="file"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  input[type="search"]::-webkit-search-decoration,
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-results-button,
+  input[type="search"]::-webkit-search-results-decoration {
+    display: none;
+  }
+
+  > :is(input, textarea, select) {
+    border: 0.0625rem solid transparent;
+    padding: 0 0.9375rem;
+    font-family: inherit;
+    font-size: 1rem;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    z-index: 1;
+    background: none;
+    resize: none;
+  }
+
+  > :is(input, textarea, select):focus {
+    border: 0.125rem solid transparent;
+    padding: 0 0.875rem;
+  }
+
+  &--has-border {
+    > :is(input, textarea, select) {
+      border-color: var(--outline);
+    }
+
+    > :is(input, textarea, select):focus {
+      border-color: var(--primary);
+    }
+  }
+
+  &--rounded {
+    > :is(input, textarea, select) {
+      padding-left: 1.4376rem;
+      padding-right: 1.4376rem;
+    }
+
+    > :is(input, textarea, select):focus {
+      padding-left: 1.375rem;
+      padding-right: 1.375rem;
+    }
+  }
+
+  &--prepend {
+    > :is(input, textarea, select) {
+      padding-left: 2.9375rem;
+    }
+    > .slider {
+      margin-left: 3.5rem;
+    }
+    > :is(input, textarea, select):focus {
+      padding-left: 2.875rem;
+    }
+  }
+
+  &--append {
+    > :is(input, textarea, select) {
+      padding-right: 2.9375rem;
+    }
+    > .slider {
+      margin-right: 3.5rem;
+    }
+
+    > :is(input, textarea, select):focus {
+      padding-right: 2.875rem;
+    }
+  }
+
+  &:not(&--has-border, &--rounded) > :is(input, textarea, select) {
+    border-bottom-color: var(--outline);
+
+    &:focus {
+      border-bottom-color: var(--primary);
+    }
+  }
+
+  &--rounded {
+    &:not(#{$root}--has-border, #{$root}--fill) > :is(input, textarea, select),
+    &:not(#{$root}--has-border) > :is(input, textarea, select):focus {
+      box-shadow: var(--elevate1);
+    }
+
+    &:not(#{$root}--has-border, #{$root}--fill) > :is(input, textarea, select):focus {
+      box-shadow: var(--elevate2);
+    }
+  }
+
+  &-error:not(&--has-border, &--rounded) > :is(input, textarea, select),
+  &-error:not(&--has-border, &--rounded) > :is(input, textarea, select):focus {
+    border-bottom-color: var(--error);
+  }
+
+  &-error#{$root}--has-border > :is(input, textarea, select),
+  &-error#{$root}--has-border > :is(input, textarea, select):focus {
+    border-color: var(--error);
+  }
+
+  & > :disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &--sm.textarea,
+  &--dense.textarea {
+    height: 4.5rem;
+  }
+
+  &.textarea {
+    height: 5.5rem;
+  }
+
+  &--lg.textarea {
+    height: 6.5rem;
+  }
+
+  &--xl.textarea {
+    height: 7.5rem;
+  }
+
+  & > select > option {
+    background-color: var(--surface);
+    color: var(--on-surface);
+  }
+
+  &--label {
+    & > input,
+    & > select {
+      &,
+      &:focus {
+        padding-top: 1rem;
+      }
+    }
+
+    > textarea {
+      padding-top: 1.375rem;
+    }
+
+    > #{$label} {
+      position: absolute;
+      top: 50%;
+      left: 1rem;
+      font-size: 1rem;
+      transform: translateY(-50%);
+      transition: var(--speed2) all, 0s background-color;
+      z-index: 0;
+    }
+  }
+
+  &--label#{$root}--sm > textarea {
+    padding-top: 1.125rem;
+  }
+
+  &--label#{$root}--lg > textarea {
+    padding-top: 1.625rem;
+  }
+
+  &--label#{$root}--xl > textarea {
+    padding-top: 1.875rem;
+  }
+
+  &--label#{$root}--has-border:not(&--filled) > :is(input, select) {
+    padding-top: 0;
+  }
+
+  &--sm:not(&--label) > textarea,
+  &--sm#{$root}--has-border:not(&--filled) > textarea {
+    padding-top: 0.625rem;
+  }
+
+  &:not(&--label) > textarea,
+  &--has-border:not(&--filled) > textarea {
+    padding-top: 0.875rem;
+  }
+
+  &--lg:not(&--label) > textarea,
+  &--lg#{$root}--has-border:not(&--filled) > textarea {
+    padding-top: 1.125rem;
+  }
+
+  &--xl:not(&--label) > textarea,
+  &--xl#{$root}--has-border:not(&--filled) > textarea {
+    padding-top: 1.375rem;
+  }
+
+  &--label#{$root}--sm.textarea > #{$label} {
+    top: 1.25rem;
+  }
+
+  &--label.textarea > #{$label} {
+    top: 1.5rem;
+  }
+
+  &--label#{$root}--lg.textarea > #{$label} {
+    top: 1.75rem;
+  }
+
+  &--label#{$root}--xl.textarea > #{$label} {
+    top: 2rem;
+  }
+
+  &--label#{$root}--rounded > #{$label} {
+    left: 1.5rem;
+  }
+
+  &--label#{$root}--prepend > #{$label} {
+    left: 3rem;
+  }
+
+  &--label > #{$label}#{$labelActive},
+  &--label > [placeholder]:focus ~ #{$label},
+  &--label > [placeholder]:not(:placeholder-shown) ~ #{$label} {
+    font-size: 0.75rem;
+    transform: translateY(-120%);
+    z-index: 1;
+  }
+
+  &--label#{$root}--has-border:not(&--filled) > #{$label}#{$labelActive},
+  &--label#{$root}--has-border:not(&--filled) > [placeholder]:focus ~ #{$label},
+  &--label#{$root}--has-border:not(&--filled) > [placeholder]:not(:placeholder-shown) ~ #{$label} {
+    font-size: 0.75rem;
+    top: 0%;
+    left: 1rem;
+    transform: translateY(-50%);
+    z-index: 1;
+  }
+
+  &--label#{$root}--has-border#{$root}--rounded:not(&--filled) > #{$label}#{$labelActive},
+  &--label#{$root}--has-border#{$root}--rounded:not(&--filled) > [placeholder]:focus ~ #{$label},
+  &--label#{$root}--has-border#{$root}--rounded:not(&--filled)
+    > [placeholder]:not(:placeholder-shown)
+    ~ #{$label} {
+    left: 1.5rem;
+    z-index: 1;
+  }
+
+  &--label > :focus ~ #{$label} {
+    color: var(--primary);
+  }
+
+  &--error > #{$label} {
+    color: var(--error) !important;
+  }
+
+  & > #{$label}.required::after,
+  &.required > #{$label}::after {
+    content: " * ";
+  }
+
+  &__helper,
+  &__error {
+    position: absolute;
+    left: 1rem;
+    bottom: 0;
+    transform: translateY(100%);
+    font-size: 0.75rem;
+    background: none !important;
+    padding-top: 0.125rem;
+  }
+
+  &__helper {
+    &a {
+      color: var(--primary);
+    }
+  }
+
+  &__error {
+    color: var(--error) !important;
+  }
+
+  &--rounded {
+    #{$root}__helper,
+    #{$root}__error {
+      left: 1.5rem;
+    }
+  }
+
+  &--error > &__helper {
+    display: none;
+  }
+}