@quaffui/quaff 0.1.0-prealpha14 → 0.1.0-prealpha15

package/dist/css/mixins/field-mixins.scss

@@ -8,7 +8,7 @@
   font-family: inherit;
 }
 
-@mixin clip-border($clip-height, $clip-width) {
+@mixin clip-border($clip-width, $clip-height) {
   clip-path: polygon(
     0% 0%,
     0% 100%,
@@ -26,26 +26,27 @@
   &::after {
     content: "";
     position: absolute;
-    top: calc(var(--border-width) * -1);
-    bottom: calc(var(--border-width) * -1);
+    top: -0.0625rem;
+    bottom: -0.0625rem;
     width: calc(var(--wrapper-height) / 2);
     height: var(--wrapper-height);
-    border: var(--border-width) solid transparent;
+    border: 0.0625rem solid transparent;
     border-top-color: var(--decorator-color);
     border-radius: $border-radius;
+    box-sizing: border-box;
   }
 
   &::before {
-    left: calc(var(--border-width) * -1);
+    left: -0.0625rem;
     border-top-right-radius: 0px;
     border-bottom-right-radius: 0px;
-    $clip-height: 0.125rem;
+    $clip-height: 0.25rem;
     $clip-width: if($variant == "outlined", 0.9375rem, 0.3125rem);
-    @include clip-border($clip-height, $clip-width);
+    @include clip-border($clip-width, $clip-height);
   }
 
   &::after {
-    right: calc(var(--border-width) * -1);
+    right: -0.0625rem;
     border-top-left-radius: 0px;
     border-bottom-left-radius: 0px;
   }

package/dist/css/mixins.scss

@@ -65,7 +65,9 @@
   }
 
   // Left drawer + Right drawer
-  &.q-drawer--left ~ .q-drawer--active.q-drawer--right:not(.q-drawer--offset-#{$pos}, .q-drawer--overlay) ~ .q-#{$el} {
+  &.q-drawer--left
+    ~ .q-drawer--active.q-drawer--right:not(.q-drawer--offset-#{$pos}, .q-drawer--overlay)
+    ~ .q-#{$el} {
     width: calc(#{$baseWidth} - #{$LR_Drawer});
   }
 }

package/dist/css/ripple.scss

@@ -16,8 +16,15 @@
   }
 
   &--effect {
-    position: relative;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
     overflow: hidden;
+    background: none;
+    pointer-events: none;
+    z-index: 999;
   }
 }
 

package/dist/css/shared/q-field.scss

@@ -19,19 +19,50 @@ $transition-duration: 0.2s;
 
   &__wrapper {
     --decorator-color: var(--outline);
-    --border-width: 0.0625rem;
     display: flex;
     position: relative;
     height: var(--wrapper-height);
   }
 
+  &--rounded#{&}--active &__wrapper {
+    $clip-x1: 1.25rem;
+    $clip-x2: 1.5rem;
+    $clip-y: 0.125rem;
+
+    // clip path has to go beyond 0% and 100% for y because of the floating label
+    clip-path: polygon(
+      0% -20%,
+      $clip-x1 -20%,
+      $clip-x1 $clip-y,
+      $clip-x2 $clip-y,
+      $clip-x2 -20%,
+      100% -20%,
+      100% 120%,
+      0% 120%
+    );
+  }
+
   &--default &__wrapper,
   &--filled &__wrapper {
-    border-bottom: var(--border-width) solid var(--decorator-color);
+    border-bottom: 0.0625rem solid var(--decorator-color);
+  }
+
+  &--focus#{&}--default &__wrapper,
+  &--focus#{&}--filled &__wrapper {
+    border-bottom: 0.0625rem solid var(--decorator-color);
+    box-shadow: inset 0 -0.0625rem 0 var(--decorator-color);
   }
 
   &--has-border &__wrapper {
-    border: var(--border-width) solid var(--decorator-color);
+    border: 0.0625rem solid var(--decorator-color);
+  }
+
+  &--focus#{&}--has-border &__wrapper {
+    box-shadow:
+      inset 0.0625rem 0 0 var(--decorator-color),
+      inset -0.0625rem 0 0 var(--decorator-color),
+      inset 0 0.0625rem 0 0 var(--decorator-color),
+      inset 0 -0.0625rem 0 0 var(--decorator-color);
   }
 
   &__wrapper {
@@ -54,6 +85,14 @@ $transition-duration: 0.2s;
 
   &--label#{&}--active#{&}--has-border &__wrapper {
     border-top-color: transparent;
+    box-shadow: none;
+  }
+
+  &--label#{&}--focus#{&}--has-border &__wrapper {
+    box-shadow:
+      inset 0.0625rem 0 0 var(--decorator-color),
+      inset -0.0625rem 0 0 var(--decorator-color),
+      inset 0 -0.0625rem 0 0 var(--decorator-color);
   }
 
   &--label#{&}--active#{&}--rounded &__wrapper {
@@ -95,7 +134,7 @@ $transition-duration: 0.2s;
 
   &--default:not(#{&}--dense) &__label,
   &--filled:not(#{&}--dense) &__label {
-    top: 1px;
+    top: 0.0625rem;
   }
 
   &--slot-prepend#{&}--default &__label,
@@ -120,24 +159,11 @@ $transition-duration: 0.2s;
     left: 1.4375rem;
   }
 
-  &--has-border#{&}--focus &__label {
-    transform: translateX(-0.0625rem);
-  }
-
-  &--label#{&}--rounded#{&}--focus &__wrapper::before {
-    @include clip-border(0.3125rem, 0.4375rem);
-  }
-
-  &--label#{&}--outlined#{&}--focus &__wrapper::before {
-    @include clip-border(0.3125rem, 1.0625rem);
-  }
-
-  &--rounded#{&}--focus &__input {
-    padding-left: 1.375rem;
-  }
-
-  &--outlined#{&}--focus &__input {
-    padding-left: 0.6875rem;
+  &--label#{&}--has-border#{&}--focus &__wrapper {
+    &::before,
+    &::after {
+      box-shadow: inset 0 0.0625rem 0 var(--decorator-color);
+    }
   }
 
   &--outlined &__label {
@@ -158,7 +184,7 @@ $transition-duration: 0.2s;
     display: block;
     margin-left: 0.25rem;
     flex-grow: 1;
-    border-top-width: var(--border-width);
+    border-top-width: 0.0625rem;
     border-top-style: solid;
     border-top-color: var(--decorator-color);
     min-width: 0.625rem;
@@ -169,17 +195,17 @@ $transition-duration: 0.2s;
   }
 
   &--active#{&}--rounded &__label {
-    right: calc(var(--wrapper-height) / 2);
+    right: calc(var(--wrapper-height) / 2 - 0.125rem);
   }
 
   &--active#{&}--outlined &__label {
-    right: 0.25rem;
+    right: 1.375rem;
   }
 
   &--active &__label {
     font-size: 0.75rem;
     line-height: 0px;
-    margin-top: calc(var(--border-width) * -1);
+    margin-top: -0.0625rem;
   }
 
   &--active#{&}--default &__label,
@@ -189,7 +215,10 @@ $transition-duration: 0.2s;
 
   &--focus &__wrapper {
     --decorator-color: var(--primary);
-    --border-width: 0.125rem;
+  }
+
+  &--focus#{&}--has-border &__label::after {
+    border-top-width: 0.125rem;
   }
 
   &__input {
@@ -203,7 +232,7 @@ $transition-duration: 0.2s;
   &--default &__input,
   &--filled &__input {
     padding: 0 1rem;
-    padding-top: 15px;
+    padding-top: 0.9375rem;
   }
 
   &--focus#{&}--default &__input,
@@ -212,7 +241,7 @@ $transition-duration: 0.2s;
   }
 
   &--rounded &__input {
-    padding: 0 23px;
+    padding: 0 1.4375rem;
   }
 
   &--outlined &__input {
@@ -255,36 +284,20 @@ $transition-duration: 0.2s;
     }
   }
 
-  // prevent content moving up due to bottom border
-  &--focus#{&}--default &__slot-prepend,
-  &--focus#{&}--default &__slot-append,
-  &--focus#{&}--filled &__slot-prepend,
-  &--focus#{&}--filled &__slot-append {
-    margin-bottom: -0.0625rem;
-  }
-
   &__slot-prepend {
-    padding-left: 12px;
+    padding-left: 0.75rem;
   }
 
   &--rounded &__slot-prepend {
-    padding-left: 16px;
-  }
-
-  &--focus#{&}--has-border &__slot-prepend {
-    margin-left: -1px;
+    padding-left: 1rem;
   }
 
   &__slot-append {
-    padding-right: 12px;
+    padding-right: 0.75rem;
   }
 
   &--rounded &__slot-append {
-    padding-right: 16px;
-  }
-
-  &--focus#{&}--has-border &__slot-append {
-    margin-right: -1px;
+    padding-right: 1rem;
   }
 
   &__slot-before {

package/dist/css/theme/colors.module.scss

@@ -18,7 +18,7 @@
 }
 .primary {
   @extend .bg-primary;
-  @extend .text-on-primary
+  @extend .text-on-primary;
 }
 
 .bg-primary-container {
@@ -41,7 +41,7 @@
 }
 .primary-container {
   @extend .bg-primary-container;
-  @extend .text-on-primary-container
+  @extend .text-on-primary-container;
 }
 
 .bg-secondary {
@@ -64,7 +64,7 @@
 }
 .secondary {
   @extend .bg-secondary;
-  @extend .text-on-secondary
+  @extend .text-on-secondary;
 }
 
 .bg-secondary-container {
@@ -87,7 +87,7 @@
 }
 .secondary-container {
   @extend .bg-secondary-container;
-  @extend .text-on-secondary-container
+  @extend .text-on-secondary-container;
 }
 
 .bg-tertiary {
@@ -110,7 +110,7 @@
 }
 .tertiary {
   @extend .bg-tertiary;
-  @extend .text-on-tertiary
+  @extend .text-on-tertiary;
 }
 
 .bg-tertiary-container {
@@ -133,7 +133,7 @@
 }
 .tertiary-container {
   @extend .bg-tertiary-container;
-  @extend .text-on-tertiary-container
+  @extend .text-on-tertiary-container;
 }
 
 .bg-error {
@@ -156,7 +156,7 @@
 }
 .error {
   @extend .bg-error;
-  @extend .text-on-error
+  @extend .text-on-error;
 }
 
 .bg-error-container {
@@ -179,7 +179,7 @@
 }
 .error-container {
   @extend .bg-error-container;
-  @extend .text-on-error-container
+  @extend .text-on-error-container;
 }
 
 .bg-background {
@@ -202,7 +202,7 @@
 }
 .background {
   @extend .bg-background;
-  @extend .text-on-background
+  @extend .text-on-background;
 }
 
 .bg-surface {
@@ -225,7 +225,7 @@
 }
 .surface {
   @extend .bg-surface;
-  @extend .text-on-surface
+  @extend .text-on-surface;
 }
 
 .bg-surface-variant {
@@ -248,7 +248,7 @@
 }
 .surface-variant {
   @extend .bg-surface-variant;
-  @extend .text-on-surface-variant
+  @extend .text-on-surface-variant;
 }
 
 .bg-outline {
@@ -329,4 +329,4 @@
 }
 .border-scrim {
   border-color: var(--scrim) !important;
-}
+}

package/dist/helpers/ripple.js

@@ -1,29 +1,31 @@
 const triggerEvents = ["pointerdown", "touchstart", "keydown"];
 const cancelEvents = ["mouseleave", "dragleave", "touchmove", "touchcancel", "pointerup", "keyup"];
 export function ripple(el, options = {}) {
+    const rippleContainer = document.createElement("div");
+    addClasses();
+    setOptions(options);
+    el.appendChild(rippleContainer);
     function addClasses(center) {
         let shouldBeCentered = center || options.center;
-        if (!el.classList.contains("q-ripple--effect")) {
-            el.classList.add("q-ripple--effect");
+        if (!rippleContainer.classList.contains("q-ripple--effect")) {
+            rippleContainer.classList.add("q-ripple--effect");
         }
-        if (!shouldBeCentered && el.classList.contains("q-ripple--center")) {
-            el.classList.remove("q-ripple--center");
+        if (!shouldBeCentered && rippleContainer.classList.contains("q-ripple--center")) {
+            rippleContainer.classList.remove("q-ripple--center");
         }
-        shouldBeCentered && el.classList.add("q-ripple--center");
+        shouldBeCentered && rippleContainer.classList.add("q-ripple--center");
     }
     function setOptions(options) {
         if (options.duration && options.duration < 0) {
             options.duration = undefined;
         }
         if (options.color) {
-            el.style.setProperty("--ripple-color", options.color);
+            rippleContainer.style.setProperty("--ripple-color", options.color);
         }
         if (options.duration) {
-            el.style.setProperty("--ripple-duration", `${options.duration}ms`);
+            rippleContainer.style.setProperty("--ripple-duration", `${options.duration}ms`);
         }
     }
-    addClasses();
-    setOptions(options);
     function createRipple(e, center) {
         if (options.disable || el.hasAttribute("aria-disabled"))
             return;
@@ -52,7 +54,7 @@ export function ripple(el, options = {}) {
         ripple.style.left = `${clientX - rect.left - radius}px`;
         ripple.style.top = `${clientY - rect.top - radius}px`;
         ripple.style.width = ripple.style.height = `${radius * 2}px`;
-        el.appendChild(ripple);
+        rippleContainer.appendChild(ripple);
         function removeRipple() {
             if (ripple === null)
                 return;

package/dist/helpers/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.1.0-prealpha14";
+declare const _default: "0.1.0-prealpha15";
 export default _default;

package/dist/helpers/version.js

@@ -1 +1 @@
-export default "0.1.0-prealpha14";
+export default "0.1.0-prealpha15";

package/dist/utils/types.json

@@ -1 +1,24 @@
-{"QAvatarShapeOptions":"type QAvatarShapeOptions =\n  | \"circle\"\n  | \"rounded\"\n  | \"top-round\"\n  | \"left-round\"\n  | \"right-round\"\n  | \"bottom-round\"\n  | \"top-left-round\"\n  | \"top-right-round\"\n  | \"bottom-left-round\"\n  | \"bottom-right-round\"","QAvatarSizeOptions":"type QAvatarSizeOptions = QuaffSizes | CssValue | number","QBreadcrumbsGutterOptions":"type QBreadcrumbsGutterOptions = \"none\" | \"sm\" | \"md\" | \"lg\"","QLayoutEvents":"type QLayoutEvents = \"resize\" | \"scroll\" | \"scrollHeight\"","QSelectOption":"type QSelectOption = string | { label: string, value: string }","QItemSectionTypes":"type QItemSectionTypes =\n  | \"thumbnail\"\n  | \"video\"\n  | \"avatar\"\n  | \"toggle\"\n  | \"icon\"\n  | \"trailingIcon\"\n  | \"trailingText\"\n  | \"content\"","QBtnSizeOptions":"type QBtnSizeOptions = Exclude<QuaffSizes, \"xs\">","QDialogPositionOptions":"type QDialogPositionOptions = \"default\" | \"top\" | \"right\" | \"bottom\" | \"left\"","QDrawerSideOptions":"type QDrawerSideOptions = \"left\" | \"right\"","QDrawerBehaviorOptions":"type QDrawerBehaviorOptions = \"default\" | \"desktop\" | \"mobile\"","QIconSizeOptions":"type QIconSizeOptions = QuaffSizes | CssValue | number","QIconTypeOptions":"type QIconTypeOptions = \"outlined\" | \"sharp\" | \"rounded\"","QLayoutViewOptions":"type QLayoutViewOptions = `${\"l\"|\"h\"}${\"h\"|\"H\"}${\"r\"|\"h\"} ${\"l\"|\"L\"}${\"p\"}${\"r\"|\"R\"} ${\"l\"|\"f\"}${\"f\"|\"F\"}${\"r\"|\"f\"}`","QTableColumn":"type QTableColumn = {\n  name: string\n  required?: boolean;\n  label: string;\n  align?: \"left\" | \"center\" | \"right\";\n  field: string | ((row: QTableRow) => string);\n  format?: (val: string) => string;\n  sortable?: boolean;\n  sort?: (a: string, b: string) => number;\n};","QTableRow":"type QTableRow = {\n  [key: string]: string | number\n};","QTableSort":"type QTableSort = {\n  columnField: string | ((row: QTableRow) => string)\n  type: \"asc\" | \"desc\";\n} | null;","QCardFillColors":"type QCardFillColors = \"primary\" | \"secondary\" | \"tertiary\"","QChipSizeOptions":"type QChipSizeOptions = Exclude<QuaffSizes, \"xs\" | \"xl\">","QTabsVariants":"type QTabsVariants = \"primary\" | \"secondary\" | \"vertical\"","QSelectValue":"type QSelectValue = QSelectSingleValue | QSelectMultipleValue","QSelectSingleValue":"type QSelectSingleValue = string | number","QSelectMultipleValue":"type QSelectMultipleValue = QSelectSingleValue[]"}
+{
+  "QAvatarShapeOptions": "type QAvatarShapeOptions =\n  | \"circle\"\n  | \"rounded\"\n  | \"top-round\"\n  | \"left-round\"\n  | \"right-round\"\n  | \"bottom-round\"\n  | \"top-left-round\"\n  | \"top-right-round\"\n  | \"bottom-left-round\"\n  | \"bottom-right-round\"",
+  "QAvatarSizeOptions": "type QAvatarSizeOptions = QuaffSizes | CssValue | number",
+  "QBreadcrumbsGutterOptions": "type QBreadcrumbsGutterOptions = \"none\" | \"sm\" | \"md\" | \"lg\"",
+  "QBtnSizeOptions": "type QBtnSizeOptions = Exclude<QuaffSizes, \"xs\">",
+  "QCardFillColors": "type QCardFillColors = \"primary\" | \"secondary\" | \"tertiary\"",
+  "QChipSizeOptions": "type QChipSizeOptions = Exclude<QuaffSizes, \"xs\" | \"xl\">",
+  "QDialogPositionOptions": "type QDialogPositionOptions = \"default\" | \"top\" | \"right\" | \"bottom\" | \"left\"",
+  "QDrawerBehaviorOptions": "type QDrawerBehaviorOptions = \"default\" | \"desktop\" | \"mobile\"",
+  "QDrawerSideOptions": "type QDrawerSideOptions = \"left\" | \"right\"",
+  "QIconSizeOptions": "type QIconSizeOptions = QuaffSizes | CssValue | number",
+  "QIconTypeOptions": "type QIconTypeOptions = \"outlined\" | \"sharp\" | \"rounded\"",
+  "QItemSectionTypes": "type QItemSectionTypes =\n  | \"thumbnail\"\n  | \"video\"\n  | \"avatar\"\n  | \"toggle\"\n  | \"icon\"\n  | \"trailingIcon\"\n  | \"trailingText\"\n  | \"content\"",
+  "QLayoutEvents": "type QLayoutEvents = \"resize\" | \"scroll\" | \"scrollHeight\"",
+  "QLayoutViewOptions": "type QLayoutViewOptions = `${\"l\"|\"h\"}${\"h\"|\"H\"}${\"r\"|\"h\"} ${\"l\"|\"L\"}${\"p\"}${\"r\"|\"R\"} ${\"l\"|\"f\"}${\"f\"|\"F\"}${\"r\"|\"f\"}`",
+  "QSelectMultipleValue": "type QSelectMultipleValue = QSelectSingleValue[]",
+  "QSelectOption": "type QSelectOption = string | { label: string, value: string }",
+  "QSelectSingleValue": "type QSelectSingleValue = string | number",
+  "QSelectValue": "type QSelectValue = QSelectSingleValue | QSelectMultipleValue",
+  "QTableColumn": "type QTableColumn = {\n  name: string\n  required?: boolean;\n  label: string;\n  align?: \"left\" | \"center\" | \"right\";\n  field: string | ((row: QTableRow) => string);\n  format?: (val: string) => string;\n  sortable?: boolean;\n  sort?: (a: string, b: string) => number;\n};",
+  "QTableRow": "type QTableRow = {\n  [key: string]: string | number\n};",
+  "QTableSort": "type QTableSort = {\n  columnField: string | ((row: QTableRow) => string)\n  type: \"asc\" | \"desc\";\n} | null;",
+  "QTabsVariants": "type QTabsVariants = \"primary\" | \"secondary\" | \"vertical\""
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quaffui/quaff",
-  "version": "0.1.0-prealpha14",
+  "version": "0.1.0-prealpha15",
   "scripts": {
     "dev": "vite dev",
     "open": "vite dev --open",
@@ -14,7 +14,7 @@
     "test:unit": "vitest",
     "lint": "prettier --plugin-search-dir . --check . && eslint .",
     "format": "prettier --plugin-search-dir . --write .",
-    "docgen": "ts-node-esm docgen/props/run.ts",
+    "docgen": "NODE_OPTIONS='--loader ts-node/esm/transpile-only --no-warnings' node docgen/props/run.ts",
     "snippet": "ts-node-esm docgen/snippets/parseSnippets.ts"
   },
   "exports": {