@castlabs/ui 7.21.2 → 7.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.21.2",
+  "version": "7.23.0",
   "repository": "https://github.com/castlabs/ui-styleguide",
   "private": false,
   "description": "A vanilla HTML/CS/JS & Vue.js component library for Castlabs.",
@@ -42,42 +42,42 @@
     "simplebar": "6.3.3"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "4.61.0"
+    "@rollup/rollup-linux-x64-gnu": "4.62.0"
   },
   "devDependencies": {
     "@castlabs/ui-editor": "file:../castlabs-ui-editor",
     "@tsconfig/node22": "22.0.5",
     "@types/jsdom": "28.0.3",
-    "@types/node": "25.9.1",
+    "@types/node": "26.0.0",
     "@vitejs/plugin-vue": "6.0.7",
-    "@vitest/eslint-plugin": "1.6.19",
+    "@vitest/eslint-plugin": "1.6.20",
     "@vue/eslint-config-prettier": "10.2.0",
-    "@vue/eslint-config-typescript": "14.7.0",
-    "@vue/test-utils": "2.4.10",
+    "@vue/eslint-config-typescript": "14.8.0",
+    "@vue/test-utils": "2.4.11",
     "@vue/tsconfig": "0.9.1",
     "core-js": "3.49.0",
     "dree": "5.1.5",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-n": "18.0.1",
+    "eslint-plugin-n": "18.1.0",
     "eslint-plugin-promise": "7.3.0",
-    "eslint-plugin-vue": "10.9.1",
+    "eslint-plugin-vue": "10.9.2",
     "eslint": "9.39.4",
     "gulp-concat": "2.6.1",
     "gulp-replace": "1.1.4",
     "gulp": "5.0.1",
     "jsdom": "29.1.1",
     "npm-run-all": "4.1.5",
-    "sass": "1.100.0",
+    "sass": "1.101.0",
     "stylelint-config-sass-guidelines": "13.0.0",
     "stylelint-config-standard-vue": "1.0.0",
     "stylelint-config-standard": "40.0.0",
     "stylelint-order": "8.1.1",
-    "stylelint-scss": "7.1.1",
+    "stylelint-scss": "7.2.0",
     "typescript": "6.0.3",
     "vite": "8.0.16",
-    "vitest": "4.1.8",
-    "vue-tsc": "3.3.3",
-    "vue": "3.5.35"
+    "vitest": "4.1.9",
+    "vue-tsc": "3.3.5",
+    "vue": "3.5.38"
   },
   "overrides": {
     "glob": "^13"

package/src/components/ClButton/style.scss

@@ -85,7 +85,7 @@ a.btn {
   font-weight: 500;
   line-height: 1;
   margin-left: $spacing-tiny;
-  min-width: 0;
+  min-width: $spacing-small;
   padding: 0;
 
   &:not(:hover, [class*='cl-color-']) {

package/src/components/form/ClFieldGroup/style.scss

@@ -13,6 +13,37 @@
       margin-left: $spacing-tiny;
     }
 
+    > [type='range'] {
+      border-radius: $brand-border-radius !important;
+      margin-bottom: $spacing-tiny - px(1); // shift a bit to align with -/+ icons
+      margin-top: $spacing-tiny + px(1);
+
+      + [type='range'] {
+        margin-left: $spacing-tiny;
+      }
+
+      &:has(+ [type='range']) {
+        margin-right: $spacing-tiny;
+      }
+    }
+
+    > :not(.cl-btn-quickaction) + .cl-btn-quickaction {
+      margin-left: $spacing-small;
+    }
+
+    > .cl-btn-quickaction {
+      &.disabled,
+      &:disabled {
+        opacity: 0.5;
+        visibility: visible; // always visible
+
+        &:hover {
+          color: $color-ci-steel;
+          cursor: not-allowed;
+        }
+      }
+    }
+
     > .btn {
       flex-shrink: 0;
     }
@@ -70,60 +101,62 @@
       }
     }
 
-    @include media-breakpoint-down(sm) {
-      flex-direction: column;
-
-      > * {
-        width: 100% !important;
-
-        &:not(:first-child) {
-          margin-top: $spacing-tiny;
-        }
-
-        &.btn {
-          font-size: 0.75em;
-          margin-left: 0 !important;
+    &:not(.cl-no-wrap) {
+      @include media-breakpoint-up(sm) {
+        > .form-control,
+        > .input-group-text {
+          &:has(+ .form-control),
+          &:has(+ p + .form-control),
+          &:has(+ p + p + .form-control),
+          &:has(+ .input-group-text) {
+            border-bottom-right-radius: 0;
+            border-right-color: $color-ci-clay;
+            border-top-right-radius: 0;
+          }
+
+          + .input-group-text,
+          + p + .form-control,
+          + p + p + .form-control,
+          + .form-control {
+            border-bottom-left-radius: 0;
+            border-left-width: 0; // trick to share one ][ border between 2 inputs
+            border-top-left-radius: 0;
+          }
+
+          &:has(+ .form-control.invalid),
+          &:has(+ .form-control[invalid]),
+          &:has(+ p + .form-control.invalid),
+          &:has(+ p + .form-control[invalid]),
+          &:has(+ p + p + .form-control.invalid),
+          &:has(+ p + p + .form-control[invalid]) {
+            border-right-color: $color-error;
+          }
+
+          &:has(+ .form-control:focus),
+          &:has(+ .form-control:focus-visible),
+          &:has(+ p + .form-control:focus),
+          &:has(+ p + .form-control:focus-visible),
+          &:has(+ p + p + .form-control:focus),
+          &:has(+ p + p + .form-control:focus-visible) {
+            border-right-color: $color-focus !important;
+          }
         }
       }
-    }
 
-    @include media-breakpoint-up(sm) {
-      > .form-control,
-      > .input-group-text {
-        &:has(+ .form-control),
-        &:has(+ p + .form-control),
-        &:has(+ p + p + .form-control),
-        &:has(+ .input-group-text) {
-          border-bottom-right-radius: 0;
-          border-right-color: $color-ci-clay;
-          border-top-right-radius: 0;
-        }
+      @include media-breakpoint-down(sm) {
+        flex-direction: column;
 
-        + .input-group-text,
-        + p + .form-control,
-        + p + p + .form-control,
-        + .form-control {
-          border-bottom-left-radius: 0;
-          border-left-width: 0; // trick to share one ][ border between 2 inputs
-          border-top-left-radius: 0;
-        }
+        > * {
+          width: 100% !important;
 
-        &:has(+ .form-control.invalid),
-        &:has(+ .form-control[invalid]),
-        &:has(+ p + .form-control.invalid),
-        &:has(+ p + .form-control[invalid]),
-        &:has(+ p + p + .form-control.invalid),
-        &:has(+ p + p + .form-control[invalid]) {
-          border-right-color: $color-error;
-        }
+          &:not(:first-child) {
+            margin-top: $spacing-tiny;
+          }
 
-        &:has(+ .form-control:focus),
-        &:has(+ .form-control:focus-visible),
-        &:has(+ p + .form-control:focus),
-        &:has(+ p + .form-control:focus-visible),
-        &:has(+ p + p + .form-control:focus),
-        &:has(+ p + p + .form-control:focus-visible) {
-          border-right-color: $color-focus !important;
+          &.btn {
+            font-size: 0.75em;
+            margin-left: 0 !important;
+          }
         }
       }
     }

package/src/components/form/ClFieldInput/style.scss

@@ -136,5 +136,18 @@
     &:focus-visible {
       @include cl-color-focus-outline(var(--cl-color-focus), 2px);
     }
+
+    &:disabled,
+    &.disabled {
+      background: $color-bar;
+
+      &::-webkit-slider-thumb {
+        background: $color-ci-steel;
+      }
+
+      &::-moz-range-thumb {
+        background: $color-ci-steel;
+      }
+    }
   }
 }

package/src/components/table/ClTable/style.scss

@@ -19,11 +19,15 @@
   text-wrap: nowrap;
   width: fit-content;
 
-  th,
-  td {
+  th {
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  td {
+    overflow: hidden;
+    text-overflow: '...';
+  }
 }
 
 .cl-table-data {

package/src/components/table/ClTableCel/Code/style.scss

@@ -12,6 +12,8 @@
       80%
     );
 
+    text-overflow: ellipsis;
+
     @include media-breakpoint-down($grid-table-responsive) {
       table:not(.cl-table-nonresponsive) & {
         width: 100%;

package/src/components/table/ClTableCel/Currency/style.scss

@@ -15,6 +15,7 @@
 
       overflow-wrap: unset;
       text-align: end;
+      text-overflow: ellipsis;
     }
   }
 }

package/src/components/table/ClTableCel/ID/style.scss

@@ -13,6 +13,7 @@
     );
 
     overflow-wrap: unset;
+    text-overflow: ellipsis;
     width: 2.5em;
 
     @include media-breakpoint-down($grid-table-responsive) {

package/src/components/table/ClTableCel/Links/style.scss

@@ -47,3 +47,7 @@
     }
   }
 }
+
+.cl-table-data.cl-table-fixed .cl-td-links {
+  background: var(--cl-color-background-haze);
+}

package/src/components/table/ClTableCel/Time/style.scss

@@ -12,5 +12,7 @@
         0.025em
       );
     }
+
+    text-overflow: ellipsis;
   }
 }

package/src/components/table/ClTableCel/style.variables.scss

@@ -31,11 +31,5 @@
       padding-bottom: $table-padding-vertical * 0.5;
       padding-top: $table-padding-vertical * 0.5;
     }
-
-    td,
-    th {
-      padding-left: $table-padding-horizontal * 0.5;
-      padding-right: $table-padding-horizontal * 0.5;
-    }
   }
 }

package/src/components/widget/ClPage/style.scss

@@ -39,6 +39,7 @@
 
 .cl-section-fullscreen {
   height: 100%;
+  padding-bottom: 0;
 
   .cl-table-scroll,
   > .container,
@@ -52,6 +53,10 @@
     padding-top: 0 !important;
   }
 
+  .cl-table-scroll {
+    margin-bottom: $spacing-small !important;
+  }
+
   table {
     display: block;
     max-height: 100%;
@@ -66,3 +71,25 @@
     z-index: 1;
   }
 }
+
+.cl-fullscreen-scroller {
+  max-height: 100%;
+  overflow: scroll;
+
+  .cl-table-scroll {
+    overflow: unset;
+  }
+
+  table {
+    display: table !important;
+  }
+
+  .cl-table-data .cl-td-links {
+    padding-left: $spacing-small;
+  }
+
+  .cl-resizer {
+    background-color: var(--cl-color-background) !important;
+    margin-left: calc(-0.5rem - 2px) !important;
+  }
+}

package/src/styles/layout/meta.scss

@@ -1,3 +1,3 @@
 :root {
-  #{'--cl-version'}: 'v7.21.2';
+  #{'--cl-version'}: 'v7.23.0';
 }

package/src/styles/themes/dark.scss

@@ -9,12 +9,14 @@ $cl-url-postfix: '' !default;
   .cl-color-haze,
   .cl-section-alternate,
   .card.cl-color-haze {
-    #{'--cl-color-icon'}: $color-ci-steel;
     #{'--cl-color-code'}: $color-ci-sky;
+    #{'--cl-color-focus'}: $color-ci-steel;
+    #{'--cl-color-icon'}: $color-ci-steel;
     #{'--cl-color-input-background'}: $color-ci-night;
     #{'--cl-color-input-border'}: $color-ci-clay;
-    #{'--cl-color-text'}: $color-ci-eggshell;
+    #{'--cl-color-line'}: $color-ci-steel;
     #{'--cl-color-link'}: $color-ci-eggshell;
+    #{'--cl-color-text'}: $color-ci-eggshell;
     #{'--cl-color-text-inverted'}: $color-ci-night;
 
     textarea[disabled],
@@ -76,6 +78,17 @@ $cl-url-postfix: '' !default;
 
   .cl-form [type='range'] {
     background: $color-ci-steel;
+
+    &:disabled,
+    &.disabled {
+      &::-webkit-slider-thumb {
+        background: $color-ci-clay;
+      }
+
+      &::-moz-range-thumb {
+        background: $color-ci-clay;
+      }
+    }
   }
 
   .cl-form [type='checkbox'],

package/types/castlabs-ui.module.d.ts

@@ -43,20 +43,21 @@ declare module '@castlabs/ui/dist/castlabs-ui.module.js' {
     order?: string,
     caseSensitive?: boolean
   ): object[]
-  export function clTableSorter (
+  export type ClTableSorter<Type> = {
+    col: number
+    order: 'ASC' | 'DESC' | 'NONE'
+    set: (col: number, order: string) => void
+    get: (col: number) => string
+    sorted: Type[]
+    sorter: () => any
+    sort: (col?: number, order?: string) => 'ASC' | 'DESC' | 'NONE'
+  }
+  export function clTableSorter<Type> (
     sort: (col: number, order: 'ASC' | 'DESC') => { sorted: object[], sortedOrder: 'ASC' | 'DESC' },
     initialCol?: number,
     initialOrder?: string
-  ): any
-  export function clTableSorterObjects<Type> (dataCallback: () => Type[], keys: string[], initialCol?: number, pageNoCallback?: () => number, pageSizeCallback?: () => number): {
-    col: number,
-    order: 'ASC' | 'DESC' | 'NONE',
-    set: (col: number, order: string) => void,
-    get: (col: number) => string,
-    sorted: Type[],
-    sorter: () => any,
-    sort: (col?: number, order?: string) => 'ASC' | 'DESC' | 'NONE',
-  }
+  ): ClTableSorter<Type>
+  export function clTableSorterObjects<Type> (dataCallback: () => Type[], keys: string[], initialCol?: number, pageNoCallback?: () => number, pageSizeCallback?: () => number): ClTableSorter<Type>
   export function clDebounce (callback: any, ms?: number, key?: string): void
   export function clSanitizeId (id: string): string
 

package/types/index.d.ts

@@ -102,20 +102,26 @@ export function clSort (
   order?: string,
   caseSensitive?: boolean
 ): object[]
-export function clTableSorter (
-  sort: (col: number, order: 'ASC' | 'DESC') => { sorted: object[], sortedOrder: 'ASC' | 'DESC' },
-  initialCol?: number,
-  initialOrder?: string
-): any
-export function clTableSorterObjects<Type> (dataCallback: () => Type[], keys: string[], initialCol?: number, pageNoCallback?: () => number, pageSizeCallback?: () => number): {
+export type ClTableSorter<Type> = {
   col: number
   order: 'ASC' | 'DESC' | 'NONE'
   set: (col: number, order: string) => void
   get: (col: number) => string
   sorted: Type[]
-  sorter: () => any
+  sorter: (col: number, order: string) => {
+    sorted: Type[]
+    sortOrder: 'ASC' | 'DESC' | 'NONE'
+  }
   sort: (col?: number, order?: string) => 'ASC' | 'DESC' | 'NONE'
 }
+
+export function clTableSorter<Type> (
+  sort: (col: number, order: 'ASC' | 'DESC') => { sorted: object[], sortedOrder: 'ASC' | 'DESC' },
+  initialCol?: number,
+  initialOrder?: string
+): ClTableSorter<Type>
+
+export function clTableSorterObjects<Type> (dataCallback: () => Type[], keys: string[], initialCol?: number, pageNoCallback?: () => number, pageSizeCallback?: () => number): ClTableSorter<Type>
 export function clDebounce (callback: any, ms?: number, key?: string): void
 export function clSanitizeId (id: string): string
 

package/dist/select-disabled-dark.1065ea4c.svg

@@ -1 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#a0a0a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m2 5 6 6 6-6'/></svg>