@quaffui/quaff 0.1.0-prealpha2 → 0.1.0-prealpha20

package/dist/components/list/index.scss

@@ -1,114 +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 {
-  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,50 +0,0 @@
-// Linear progress
-
-// 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.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: "",
-    },
-];

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/composables/use-align.js

@@ -1,12 +0,0 @@
-export const UseAlignPropsDefaults = {
-    align: "top left",
-};
-export default function useAlign(align = "top left") {
-    const alignClass = align
-        .split(" ")
-        .map((a) => `${a}-align`)
-        .join(" ");
-    return ["between", "around", "evenly", "stretch"].some((alignment) => align.split(" ").includes(alignment))
-        ? `flex ${alignClass}`
-        : `${alignClass}`;
-}

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,11 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,65 +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,
-);
-
-.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};
-        }
-      }
-    }
-  }
-}