@quaffui/quaff 0.1.0-prealpha8 → 1.0.0-alpha1

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/types";
-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/types";
-export const QTogglePropsDefaults = {
-    value: false,
-    label: undefined,
-    leftLabel: false,
-    icon: undefined,
-    disable: false,
-    ...NativePropsDefaults,
-};

package/dist/components/toolbar/index.scss

@@ -1,34 +0,0 @@
-.q-toolbar {
-  width: 100%;
-  padding: 0 1rem;
-  transition: all var(--speed3);
-  background-color: var(--surface);
-
-  nav {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    white-space: nowrap;
-    gap: 1rem;
-
-    > * {
-      margin: 0;
-    }
-  }
-
-  &--inset {
-    padding-left: 58px;
-  }
-}
-
-.q-toolbar-title {
-  display: flex;
-  flex: auto;
-  font-size: 1.75rem;
-  font-weight: 400;
-  justify-content: center;
-
-  &--shrink {
-    flex: unset;
-  }
-}

package/dist/components/tooltip/index.scss

@@ -1,82 +0,0 @@
-.q-tooltip {
-  --space: -0.5rem;
-  visibility: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  background-color: var(--inverse-surface);
-  color: var(--inverse-on-surface);
-  font-size: 0.75rem;
-  text-align: center;
-  border-radius: 0.25rem;
-  padding: 0.5rem;
-  position: absolute;
-  top: 0;
-  left: 50%;
-  bottom: auto;
-  right: auto;
-  transform: translate(-50%, -100%) scale(0.9);
-  width: auto;
-  white-space: nowrap;
-  font-weight: 500;
-  opacity: 0;
-  transition: var(--speed2) all;
-  z-index: 9999;
-
-  &--top {
-    margin-top: var(--space) !important;
-  }
-
-  &--right {
-    right: 0;
-    top: 50%;
-    bottom: auto;
-    left: auto;
-    transform: translate(100%, -50%) scale(0.9);
-    margin-right: var(--space) !important;
-  }
-
-  &--bottom {
-    bottom: 0;
-    left: 50%;
-    top: auto;
-    right: auto;
-    transform: translate(-50%, 100%) scale(0.9);
-    margin-bottom: var(--space) !important;
-  }
-
-  &--left {
-    margin-left: var(--space) !important;
-
-    left: 0;
-    top: 50%;
-    bottom: auto;
-    right: auto;
-    transform: translate(-100%, -50%) scale(0.9);
-  }
-}
-
-// Not easily integratable into the block above due to the :hover
-:hover > .q-tooltip,
-.q-tooltip--active {
-  visibility: visible;
-  opacity: 1;
-
-  &.q-tooltip {
-    &--top {
-      transform: translate(-50%, -100%) scale(1);
-    }
-    &--left {
-      transform: translate(-100%, -50%) scale(1);
-    }
-
-    &--right {
-      transform: translate(100%, -50%) scale(1);
-    }
-
-    &--bottom {
-      transform: translate(-50%, 100%) scale(1);
-    }
-  }
-}

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

@@ -1,2 +0,0 @@
-export declare function setIndex(index: number): number;
-export declare function getIndex(): number | undefined;

package/dist/composables/use-index.js

@@ -1,17 +0,0 @@
-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-size.d.ts

@@ -1,9 +0,0 @@
-import { CssUnit, QuaffSizes } from "../utils/types";
-export declare const sizes: QuaffSizes[];
-export declare const CssUnits: CssUnit[];
-interface UseSize {
-    class?: string;
-    style?: string;
-}
-export declare function useSize(sizeProp: any): UseSize;
-export {};

package/dist/composables/use-size.js

@@ -1,25 +0,0 @@
-import { isNumber } from "../utils/types";
-export const sizes = ["xs", "sm", "md", "lg", "xl"];
-export const CssUnits = ["px", "%", "em", "ex", "ch", "rem", "vw", "vh", "vmin", "vmax"];
-export function useSize(sizeProp) {
-    if (isNumber(sizeProp) && sizeProp > 0) {
-        return {
-            style: `${sizeProp}px`,
-        };
-    }
-    else if (typeof sizeProp === "string") {
-        for (let unit of CssUnits) {
-            if (sizeProp.slice(-unit.length) === unit) {
-                return {
-                    style: sizeProp,
-                };
-            }
-            else if (sizes.includes(sizeProp)) {
-                return {
-                    class: sizeProp,
-                };
-            }
-        }
-    }
-    return {};
-}

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/field.scss

@@ -1,432 +0,0 @@
-@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;
-  }
-}