@quaffui/quaff 0.1.0-prealpha15 → 0.1.0-prealpha19

package/dist/composables/useSize.js

@@ -0,0 +1,37 @@
+import { isNumeric } from "../utils/number.js";
+export const sizes = ["none", "xs", "sm", "md", "lg", "xl"];
+export const CssUnits = [
+    "px",
+    "%",
+    "em",
+    "ex",
+    "ch",
+    "rem",
+    "vw",
+    "vh",
+    "vmin",
+    "vmax",
+];
+/**
+ * Checks wether the input is a size like "sm" or "lg"
+ */
+export function isQuaffSize(size) {
+    return sizes.includes(size);
+}
+export function useSize(size, component) {
+    const sizeClass = isQuaffSize(size) ? ` ${component}--${size}` : "";
+    const sizeStyle = () => {
+        if (isNumeric(size)) {
+            return +size > 0 ? `${size}px` : undefined;
+        }
+        for (const unit of CssUnits) {
+            if (size.slice(-unit.length) === unit) {
+                return size;
+            }
+        }
+    };
+    return {
+        class: sizeClass,
+        style: sizeStyle(),
+    };
+}

package/dist/composables/{use-size.d.ts → useSizeLegacy.d.ts}

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

package/dist/composables/{use-size.js → useSizeLegacy.js}

@@ -1,20 +1,20 @@
-import { isNumber } from "../utils";
+import { isNumeric } from "../utils/number";
 export const sizes = ["none", "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) {
+    if (sizeProp !== undefined && isNumeric(sizeProp) && Number(sizeProp) > 0) {
         return {
             style: `${sizeProp}px`,
         };
     }
-    else if (typeof sizeProp === "string") {
-        for (let unit of CssUnits) {
+    if (typeof sizeProp === "string") {
+        for (const unit of CssUnits) {
             if (sizeProp.slice(-unit.length) === unit) {
                 return {
                     style: sizeProp,
                 };
             }
-            else if (sizes.includes(sizeProp)) {
+            if (sizes.includes(sizeProp)) {
                 return {
                     class: sizeProp,
                 };

package/dist/css/_components.scss

@@ -0,0 +1,31 @@
+@forward "$components/avatar/QAvatar.scss";
+@forward "$components/breadcrumbs/QBreadcrumbs.scss";
+@forward "$components/breadcrumbs/QBreadcrumbsEl.scss";
+@forward "$components/button/QBtn.scss";
+@forward "$components/card/QCard.scss";
+@forward "$components/card/QCardActions.scss";
+@forward "$components/card/QCardSection.scss";
+@forward "$components/checkbox";
+@forward "$components/chip/QChip.scss";
+@forward "$components/dialog/QDialog.scss";
+@forward "$components/drawer/QDrawer.scss";
+@forward "$components/footer/QFooter.scss";
+@forward "$components/header/QHeader.scss";
+@forward "$components/icon/QIcon.scss";
+@forward "$components/input";
+@forward "$components/layout/QLayout.scss";
+@forward "$components/list/QItem.scss";
+@forward "$components/list/QItemSection.scss";
+@forward "$components/list/QList.scss";
+@forward "$components/progress/QCircularProgress.scss";
+@forward "$components/progress/QLinearProgress.scss";
+@forward "$components/radio";
+@forward "$components/railbar/QRailbar.scss";
+@forward "$components/select";
+@forward "$components/separator/QSeparator.scss";
+@forward "$components/switch/QSwitch.scss";
+@forward "$components/table";
+@forward "$components/tabs/QTab.scss";
+@forward "$components/tabs/QTabs.scss";
+@forward "$components/toolbar";
+@forward "$components/tooltip";

package/dist/css/_disabled.scss

@@ -0,0 +1,18 @@
+@use "$css/mixins";
+
+@mixin base() {
+  cursor: not-allowed;
+  box-shadow: none;
+  user-select: none;
+  color: font-color();
+  background-color: transparent;
+  transition: none;
+}
+
+@function font-color($color: on-surface) {
+  @return mixins.with-alpha(var(--#{$color}), 38%);
+}
+
+@function rest-color($color: on-surface) {
+  @return mixins.with-alpha(var(--#{$color}), 12%);
+}

package/dist/css/{ripple.scss → _ripple.scss}

@@ -1,6 +1,6 @@
 .q-ripple {
   background-color: var(--ripple-color, var(--outline));
-  opacity: 0.2;
+  opacity: 0.1;
   position: absolute;
   border-radius: 50%;
   pointer-events: none;

package/dist/css/_variables.scss

@@ -0,0 +1,73 @@
+// Responsive breakpoints
+$breakpoints: (
+  xs: 0px,
+  sm: 600px,
+  md: 960px,
+  lg: 1280px,
+  xl: 1920px,
+);
+
+// Grid variables
+$grid-columns: 12;
+
+// Spaces
+$space-base: 1rem !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: 3rem !default;
+
+$spaces: (
+  "auto": auto,
+  "none": $space-none,
+  "xs": $space-xs,
+  "sm": $space-sm,
+  "md": $space-md,
+  "lg": $space-lg,
+  "xl": $space-xl,
+) !default;
+
+// Positions
+$positions: (
+  "t": -top,
+  "r": -right,
+  "b": -bottom,
+  "l": -left,
+  "x": -inline,
+  "y": -block,
+  "a": "",
+);
+$border-positions: top, right, bottom, left;
+
+// Speeds
+$speed1: 0.1s;
+$speed2: 0.2s;
+$speed3: 0.3s;
+$speed4: 0.4s;
+
+// Layout offsets
+$left-railbar: var(--left-railbar-width);
+$right-railbar: var(--right-railbar-width);
+$left-right-railbar: calc(#{$left-railbar} + #{$right-railbar});
+
+$left-drawer: var(--left-drawer-width);
+$right-drawer: var(--right-drawer-width);
+$left-right-drawer: calc(#{$left-drawer} + #{$right-drawer});
+
+$left-full: calc(#{$left-railbar} + #{$left-drawer});
+$right-full: calc(#{$right-railbar} + #{$right-drawer});
+
+$left-railbar-right-drawer: calc(#{$left-railbar} + #{$right-drawer});
+$right-railbar-left-drawer: calc(#{$right-railbar} + #{$left-drawer});
+
+$left-full-right-railbar: calc(#{$left-full} + #{$right-railbar});
+$left-full-right-drawer: calc(#{$left-full} + #{$right-drawer});
+$right-full-left-railbar: calc(#{$right-full} + #{$left-railbar});
+$right-full-left-drawer: calc(#{$right-full} + #{$left-drawer});
+
+$full: calc(#{$left-full} + #{$right-full});

package/dist/css/classes/_design.scss

@@ -0,0 +1,57 @@
+@use "$css/disabled";
+@use "../mixins" as *;
+
+// Disabled
+.disabled {
+  @include disabled.base();
+}
+
+// Borders
+.border {
+  @include border;
+}
+
+.border-top {
+  @include border(var(--outline), top);
+}
+
+.border-right {
+  @include border(var(--outline), right);
+}
+
+.border-bottom {
+  @include border(var(--outline), bottom);
+}
+
+.border-left {
+  @include border(var(--outline), left);
+}
+
+// Elevation
+.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;
+}

package/dist/css/classes/_flex.scss

@@ -0,0 +1,62 @@
+.flex {
+  display: flex !important;
+  flex-wrap: wrap;
+}
+
+.column {
+  flex-direction: column;
+}
+
+// Horizontal alignment
+.items-start {
+  align-items: flex-start;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
+// Vertical alignment
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.justify-evenly {
+  justify-content: space-evenly;
+}
+
+// Shorthands
+.flex-start {
+  @extend .items-start;
+  @extend .justify-start;
+}
+
+.flex-center {
+  @extend .items-center;
+  @extend .justify-center;
+}
+
+.flex-end {
+  @extend .items-end;
+  @extend .justify-end;
+}

package/dist/css/classes/_grid.scss

@@ -0,0 +1,35 @@
+@use "../variables";
+@use "sass:map";
+
+.row {
+  display: grid;
+  grid-template-columns: repeat(variables.$grid-columns, 1fr);
+  grid-gap: 0;
+
+  // Gutter classes
+  @each $spaceName, $spaceVal in variables.$spaces {
+    @if $spaceName != "auto" {
+      &.q-gutter-#{$spaceName} {
+        gap: $spaceVal;
+      }
+    }
+  }
+
+  // Column classes for all sizes
+  @for $i from 1 through variables.$grid-columns {
+    & > .col-#{$i} {
+      grid-column: span #{$i};
+    }
+  }
+
+  // Column classes for each breakpoint
+  @each $breakpoint, $min-width in variables.$breakpoints {
+    @media (min-width: #{$min-width}) {
+      @for $i from 1 through variables.$grid-columns {
+        & > .col-#{$breakpoint}-#{$i} {
+          grid-column: span #{$i};
+        }
+      }
+    }
+  }
+}

package/dist/css/classes/_index.scss

@@ -0,0 +1,7 @@
+@import "design";
+@import "flex";
+@import "grid";
+@import "overflow";
+@import "position";
+@import "select";
+@import "spaces";

package/dist/css/classes/_overflow.scss

@@ -0,0 +1,7 @@
+.scroll {
+  overflow: scroll;
+}
+
+.no-overflow {
+  overflow: hidden;
+}

package/dist/css/classes/_position.scss

@@ -0,0 +1,7 @@
+.absolute-full {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}

package/dist/css/classes/_select.scss

@@ -0,0 +1,6 @@
+.no-select {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

package/dist/css/classes/_spaces.scss

@@ -0,0 +1,23 @@
+@use "../mixins";
+@use "../variables";
+
+@each $spaceName, $spaceVal in variables.$spaces {
+  @each $posName, $_ in variables.$positions {
+    // Padding
+    .q-p#{$posName}-#{$spaceName} {
+      @include mixins.padding("#{$posName}-#{$spaceName}");
+    }
+
+    // Margin
+    .q-m#{$posName}-#{$spaceName} {
+      @include mixins.margin("#{$posName}-#{$spaceName}");
+    }
+  }
+
+  // Gap
+  @if $spaceName != "auto" {
+    .q-gap-#{$spaceName} {
+      gap: $spaceVal;
+    }
+  }
+}

package/dist/css/fonts.scss

@@ -1,4 +1,17 @@
 @import "@fontsource/roboto";
-@import "@fontsource/material-symbols-outlined";
-@import "@fontsource/material-symbols-rounded";
-@import "@fontsource/material-symbols-sharp";
+
+@mixin font-face-declaration($font-name) {
+  $file-name: to-lower-case($font-name);
+
+  @font-face {
+    font-family: "Material Symbols #{$font-name}";
+    src: url("material-symbols/material-symbols-#{$file-name}.woff2") format("woff2");
+    font-style: normal;
+    font-weight: 100 700;
+    font-display: block;
+  }
+}
+
+@include font-face-declaration("Outlined");
+@include font-face-declaration("Rounded");
+@include font-face-declaration("Sharp");