@quaffui/quaff 0.1.0-prealpha8 → 1.0.0-alpha1

package/dist/components/layout/index.scss

@@ -1,373 +0,0 @@
-:root {
-  --header-height: 64px;
-  --footer-height: 80px;
-
-  --left-railbar-width: 88px;
-  --right-railbar-width: 88px;
-
-  --left-drawer-width: 300px;
-  --right-drawer-width: 300px;
-}
-
-.q-layout {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  min-width: 100%;
-  min-height: 100%;
-  overflow: hidden;
-
-  & > :not(.q-header, .q-footer, .q-railbar, .q-drawer) {
-    height: 100%;
-    overflow: auto;
-    transition: padding var(--speed3);
-  }
-}
-
-.q-layout > .q-header {
-  z-index: 103;
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: auto;
-  left: 0px;
-  height: var(--header-height);
-  min-height: unset;
-  border-radius: 0;
-
-  & > nav {
-    height: 100%;
-    min-height: unset;
-  }
-
-  &.fixed {
-    position: fixed;
-
-    &::before {
-      margin: 0;
-    }
-  }
-}
-
-.q-layout > .q-footer {
-  z-index: 103;
-  position: absolute;
-  top: auto;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  height: var(--footer-height);
-  min-height: unset;
-  border-radius: 0;
-
-  & > nav {
-    height: 100%;
-    min-height: unset;
-  }
-
-  &.fixed {
-    position: fixed;
-
-    &::before {
-      margin: 0;
-    }
-  }
-
-  & ~ :not(.q-header, .q-footer, .q-railbar, .q-drawer) {
-    padding-bottom: var(--footer-height);
-  }
-}
-
-.q-layout > .q-railbar {
-  z-index: 102;
-  position: absolute;
-  top: 0px;
-  right: auto;
-  bottom: 0px;
-  left: auto;
-  height: 100%;
-  overflow: auto;
-  transition: all var(--speed3);
-
-  &.above {
-    z-index: 105;
-  }
-
-  &.fixed {
-    position: fixed;
-  }
-
-  &.left {
-    left: 0px;
-    width: var(--left-railbar-width);
-
-    &.bordered {
-      border-right: 0.0625rem solid var(--outline);
-    }
-  }
-
-  &.right {
-    right: 0px;
-    width: var(--right-railbar-width);
-
-    &.bordered {
-      border-left: 0.0625rem solid var(--outline);
-    }
-  }
-
-  & > .q-list > .q-item {
-    flex-direction: column;
-    border-radius: 2rem;
-    align-items: center;
-    justify-content: center;
-    padding: 0 8px;
-    gap: 0.25em;
-
-    &.wave::after {
-      all: unset;
-    }
-
-    & > .q-item__section {
-      justify-content: start;
-    }
-
-    & > i {
-      transition: var(--speed1) padding linear;
-      padding-inline: 0.25em;
-    }
-
-    &:is(:hover, :focus, .active) > i {
-      background-color: var(--secondary-container);
-      color: var(--on-secondary-container);
-      padding: 0 1rem;
-      font-variation-settings:
-        "FILL" 1,
-        "wght" 400,
-        "opsz" 24;
-    }
-  }
-}
-
-.q-layout > .q-drawer {
-  //TODO Problems with z-index between multiple layouts
-  z-index: 101;
-  border-radius: 0;
-
-  &.above {
-    z-index: 104;
-  }
-
-  &.border-radius {
-    &__left {
-      &--top {
-        border-top-left-radius: 16px;
-      }
-      &--bottom {
-        border-bottom-left-radius: 16px;
-      }
-    }
-    &__right {
-      &--top {
-        border-top-right-radius: 16px;
-      }
-      &--bottom {
-        border-bottom-right-radius: 16px;
-      }
-    }
-  }
-
-  & .q-list > .q-item.q-link {
-    border-radius: 2rem;
-
-    &::before {
-      content: "";
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      opacity: 0;
-      border-radius: inherit;
-      background: var(--secondary-container);
-      z-index: -1;
-      transform: scaleX(0.32);
-      transition-duration: 0.2s;
-      transition-property: transform, opacity;
-      transition-timing-function: linear;
-    }
-
-    &.active {
-      color: var(--on-secondary-container);
-
-      &::before {
-        opacity: 1;
-        transform: scaleX(1);
-      }
-    }
-
-    &:hover {
-      background-color: var(--on-surface-variant-2);
-      font-variation-settings: "GRAD" 50;
-    }
-  }
-}
-
-// Offsets
-$L_Railbar: var(--left-railbar-width);
-$R_Railbar: var(--right-railbar-width);
-$LR_Railbar: calc(#{$L_Railbar} + #{$R_Railbar});
-
-$L_Drawer: var(--left-drawer-width);
-$R_Drawer: var(--right-drawer-width);
-$LR_Drawer: calc(#{$L_Drawer} + #{$R_Drawer});
-
-$L_Full: calc(#{$L_Railbar} + #{$L_Drawer});
-$R_Full: calc(#{$R_Railbar} + #{$R_Drawer});
-
-$L_Railbar-R_Drawer: calc(#{$L_Railbar} + #{$R_Drawer});
-$R_Railbar-L_Drawer: calc(#{$R_Railbar} + #{$L_Drawer});
-
-$L_Full-R_Railbar: calc(#{$L_Full} + #{$R_Railbar});
-$L_Full-R_Drawer: calc(#{$L_Full} + #{$R_Drawer});
-$R_Full-L_Railbar: calc(#{$R_Full} + #{$L_Railbar});
-$R_Full-L_Drawer: calc(#{$R_Full} + #{$L_Drawer});
-
-$Full: calc(#{$L_Full} + #{$R_Full});
-
-$elements: (
-  top: "header",
-  bottom: "footer",
-);
-
-@function without($toSub) {
-  @return calc(100% - #{$toSub});
-}
-
-// Offset for content
-.q-layout {
-  & > .q-header ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
-    padding-top: var(--header-height);
-  }
-  & > .q-footer ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
-    padding-bottom: var(--footer-height);
-  }
-  & > .q-drawer.active.left:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
-    padding-left: $L_Drawer;
-  }
-  & > .q-drawer.active.right:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
-    padding-right: $R_Drawer;
-  }
-  & > .q-railbar.left:not([style="display: none"]) {
-    & ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
-      padding-left: $L_Railbar;
-    }
-
-    & ~ .q-drawer.active.left:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
-      padding-left: $L_Full;
-    }
-  }
-  & > .q-railbar.right:not([style="display: none"]) {
-    & ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
-      padding-right: $R_Railbar;
-    }
-
-    & ~ .q-drawer.active.right:not(.overlay) ~ :not(.q-header, .q-footer, .q-drawer, .q-railbar) {
-      padding-right: $R_Full;
-    }
-  }
-}
-
-// Inline offset for header, footer and drawers
-.q-layout {
-  @each $pos, $el in $elements {
-    & > .q-railbar.left:not([style="display: none"]) {
-      &:not(.offset-#{$pos}) ~ .q-#{$el},
-      & ~ .q-drawer.left {
-        left: $L_Railbar;
-      }
-
-      & ~ .q-drawer.active.left:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
-        left: $L_Full;
-      }
-    }
-    & > .q-railbar.right:not([style="display: none"]) {
-      &:not(.offset-#{$pos}) ~ .q-#{$el},
-      & ~ .q-drawer.right {
-        right: $R_Railbar;
-      }
-
-      & ~ .q-drawer.active.right:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
-        right: $R_Full;
-      }
-    }
-
-    & > .q-drawer.active.left:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
-      left: $L_Drawer;
-    }
-    & > .q-drawer.active.right:not(.offset-#{$pos}, .overlay) ~ .q-#{$el} {
-      right: $R_Drawer;
-    }
-  }
-}
-
-// Width for header and footer
-.q-layout {
-  @each $pos, $el in $elements {
-    & > .q-railbar.left:not(.offset-#{$pos}, [style="display: none"]) {
-      // Left railbar
-      & ~ .q-#{$el} {
-        width: without($L_Railbar);
-      }
-
-      & ~ .q-drawer.active:not(.offset-#{$pos}, .overlay) {
-        @include include-drawers(without($L_Railbar), $pos, $el);
-      }
-
-      & ~ .q-railbar.right:not(.offset-#{$pos}, [style="display: none"]) {
-        // Left railbar + Right railbar
-        & ~ .q-#{$el} {
-          width: without($LR_Railbar);
-        }
-
-        & ~ .q-drawer.active:not(.offset-#{$pos}, .overlay) {
-          @include include-drawers(without($LR_Railbar), $pos, $el);
-        }
-      }
-    }
-
-    & > .q-railbar.right:not(.offset-#{$pos}, [style="display: none"]) {
-      // Right railbar
-      & ~ .q-#{$el} {
-        width: without($R_Railbar);
-      }
-
-      & ~ .q-drawer.active:not(.offset-#{$pos}, .overlay) {
-        @include include-drawers(without($R_Railbar), $pos, $el);
-      }
-    }
-
-    & > .q-drawer.active:not(.offset-#{$pos}, .overlay) {
-      @include include-drawers(100%, $pos, $el);
-    }
-  }
-}
-
-// Height for railbars and drawers
-.q-layout {
-  & > .q-railbar,
-  & > .q-drawer {
-    &.offset-top.offset-bottom {
-      height: calc(100% - var(--header-height) - var(--footer-height));
-    }
-  }
-
-  @each $pos, $el in $elements {
-    & > .q-railbar,
-    & > .q-drawer {
-      &.offset-#{$pos} {
-        #{$pos}: var(--#{$el}-height);
-        height: calc(100% - var(--#{$el}-height));
-      }
-    }
-  }
-}

package/dist/components/list/index.scss

@@ -1,120 +0,0 @@
-.q-list {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-
-  &.rounded-borders {
-    border-radius: 0.25rem;
-  }
-
-  &.dense {
-    min-height: 32px;
-    padding-block: 0;
-
-    & > .q-item {
-      min-height: 32px;
-    }
-  }
-
-  & > .q-separator__wrapper:first-child {
-    display: none !important;
-  }
-}
-
-.q-item {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  white-space: nowrap;
-  gap: 1rem;
-
-  min-width: 100%;
-  min-height: 56px;
-  margin-top: 0 !important;
-  margin: 0;
-  padding: 8px 24px 8px 16px;
-  gap: 16px;
-
-  & .q-avatar {
-    height: 40px;
-    width: 40px;
-  }
-
-  &.wave {
-    padding: 8px 24px 8px 16px;
-
-    &.multiline {
-      padding-block: 12px;
-    }
-
-    &::after {
-      background-image: radial-gradient(circle, rgb(150 150 150 / 0.2) 1%, transparent 1%);
-    }
-  }
-
-  &.multiline {
-    padding-block: 12px;
-
-    &
-      > :is(
-        .q-item__section--avatar,
-        .q-item__section--icon,
-        .q-item__section--thumbnail,
-        .q-item__section--trailingIcon,
-        .q-item__section--trailingText
-      ) {
-      align-self: start;
-    }
-
-    & > .q-item__section--video {
-      margin-left: -16px !important;
-      padding-block: 0;
-    }
-  }
-}
-
-.q-item__section {
-  display: flex;
-
-  &--video {
-    margin-left: -8px;
-    padding-block: 4px;
-
-    & video {
-      width: 114px;
-      height: 64px;
-      object-fit: cover;
-      object-position: center;
-    }
-  }
-
-  &--avatar {
-    height: 40px;
-    width: 40px;
-  }
-  &--icon {
-    height: 24px;
-    width: 24px;
-  }
-
-  &--thumbnail img {
-    width: 56px;
-    height: 56px;
-    object-fit: cover;
-    object-position: center;
-  }
-
-  &--content {
-    flex-direction: column;
-    flex: 10000 1 0;
-    justify-content: center;
-    align-items: start;
-  }
-
-  &--toggle {
-    height: 24px;
-    width: 52px;
-  }
-}

package/dist/components/progress/index.scss

@@ -1,65 +0,0 @@
-// Linear progress
-.q-linear-progress {
-  height: 1rem;
-  @include border;
-
-  &__progress {
-    position: absolute;
-    background-color: var(--active);
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    transition: var(--speed4) clip-path;
-    clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
-  }
-}
-
-// Circular progress
-.q-circular-progress {
-  vertical-align: middle;
-
-  &--indeterminate {
-    animation: q-spin 2s linear infinite;
-    transform-origin: center center;
-
-    & .path {
-      stroke-dasharray: 1, 200;
-      stroke-dashoffset: 0;
-      animation: q-load 1.5s ease-in-out infinite;
-    }
-  }
-}
-
-@keyframes q-spin {
-  0% {
-    transform: rotate3d(0, 0, 1, 0deg);
-  }
-  25% {
-    transform: rotate3d(0, 0, 1, 90deg);
-  }
-  50% {
-    transform: rotate3d(0, 0, 1, 180deg);
-  }
-  75% {
-    transform: rotate3d(0, 0, 1, 270deg);
-  }
-  100% {
-    transform: rotate3d(0, 0, 1, 359deg);
-  }
-}
-
-@keyframes q-load {
-  0% {
-    stroke-dasharray: 1, 200;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 89, 200;
-    stroke-dashoffset: -35px;
-  }
-  100% {
-    stroke-dasharray: 89, 200;
-    stroke-dashoffset: -124px;
-  }
-}

package/dist/components/toggle/QToggle.svelte

@@ -1,35 +0,0 @@
-<script>import { createClasses } from "../../utils/props";
-import { onMount } from "svelte";
-export let value, icon = void 0, label = void 0, leftLabel = void 0, disable = void 0, userClasses = void 0;
-export { userClasses as class };
-$:
-  classes = createClasses([leftLabel && "reversed", disable && "disabled", userClasses], {
-    component: "q-toggle",
-    userClasses
-  });
-$:
-  classesInner = createClasses([icon && "icon"], {
-    component: "q-toggle__inner"
-  });
-function toggle() {
-  if (disable !== true) {
-    value = !value;
-  }
-}
-</script>
-
-<div on:click={toggle} class={classes} aria-disabled={disable} {...$$restProps}>
-  <label class={classesInner}>
-    <input bind:checked={value} type="checkbox" disabled={disable} />
-    <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 | 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/docs.d.ts

@@ -1,2 +0,0 @@
-import type { QComponentDocs } from "../../utils/types";
-export declare let QToggleDocs: QComponentDocs;

package/dist/components/toggle/docs.js

@@ -1,47 +0,0 @@
-export let QToggleDocs = {
-    name: "QToggle",
-    description: "QToggle is a switch-like checkbox which offers binary choices. It supports labels, icons and different positioning of the labels.",
-    docs: {
-        props: [
-            {
-                name: "value",
-                type: "boolean",
-                default: false,
-                description: "The current value of the toggle, true or false.",
-            },
-            {
-                name: "label",
-                type: "string",
-                optional: true,
-                description: "Label to be shown alongside the toggle.",
-            },
-            {
-                name: "leftLabel",
-                type: "boolean",
-                default: false,
-                description: "Whether the label should be displayed to the left of the toggle.",
-            },
-            {
-                name: "icon",
-                type: "string",
-                optional: true,
-                description: "Name of the icon to display on the toggle.",
-            },
-            {
-                name: "disable",
-                type: "boolean",
-                default: false,
-                description: "Whether the toggle should be disabled.",
-            },
-        ],
-        slots: [],
-        methods: [],
-        events: [
-            {
-                name: "input",
-                type: "(value: boolean) => void",
-                description: "Emitted when the user changes the value of the toggle.",
-            },
-        ],
-    },
-};

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

@@ -1,8 +0,0 @@
-export declare const QToggleDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];

package/dist/components/toggle/docs.props.js

@@ -1,42 +0,0 @@
-export const QToggleDocsProps = [
-    {
-        name: "value",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "",
-        default: "",
-    },
-    {
-        name: "label",
-        type: "string",
-        optional: true,
-        clickableType: false,
-        description: "",
-        default: "",
-    },
-    {
-        name: "leftLabel",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "",
-        default: "",
-    },
-    {
-        name: "icon",
-        type: "string",
-        optional: true,
-        clickableType: false,
-        description: "",
-        default: "",
-    },
-    {
-        name: "disable",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "",
-        default: "",
-    },
-];