@castlabs/ui 4.20.4 → 4.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "4.20.4",
+  "version": "4.21.0",
   "repository": "https://github.com/castlabs/ui-styleguide",
   "private": false,
   "description": "A vanilla HTML/CS/JS & Vue.js component library for castLabs.",
@@ -38,17 +38,17 @@
   "devDependencies": {
     "@castlabs/ui-editor": "file:../castlabs-ui-editor",
     "@vitejs/plugin-vue": "5.2.1",
-    "@vitest/eslint-plugin": "1.1.24",
+    "@vitest/eslint-plugin": "1.1.25",
     "@vue/cli-plugin-babel": "5.0.8",
     "@vue/cli-plugin-typescript": "5.0.8",
     "@vue/cli-plugin-unit-jest": "5.0.8",
     "@vue/cli-service": "5.0.8",
-    "@vue/eslint-config-prettier": "10.1.0",
-    "@vue/eslint-config-typescript": "14.2.0",
+    "@vue/eslint-config-prettier": "10.2.0",
+    "@vue/eslint-config-typescript": "14.3.0",
     "@vue/test-utils": "2.4.6",
-    "core-js": "3.39.0",
+    "core-js": "3.40.0",
     "dree": "5.1.5",
-    "eslint": "9.17.0",
+    "eslint": "9.19.0",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-n": "17.15.1",
     "eslint-plugin-promise": "7.2.1",
@@ -58,15 +58,15 @@
     "gulp-replace": "1.1.4",
     "npm-run-all": "4.1.5",
     "prettier": "3.4.2",
-    "sass": "1.83.1",
+    "sass": "1.83.4",
     "sass-loader": "16.0.4",
-    "stylelint-config-standard": "36.0.1",
+    "stylelint-config-standard": "37.0.0",
     "stylelint-config-standard-vue": "1.0.0",
     "stylelint-config-sass-guidelines": "12.1.0",
     "stylelint-order": "6.0.4",
-    "stylelint-scss": "6.10.0",
-    "typescript": "5.7.2",
-    "vitest": "2.1.8",
+    "stylelint-scss": "6.11.0",
+    "typescript": "5.7.3",
+    "vitest": "3.0.4",
     "vue": "3.5.13"
   }
 }

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

@@ -18,11 +18,7 @@
   }
 
   .row > [class^='col-'] {
-    margin-top: 0;
-
-    > .form-label {
-      margin-top: $spacing-small;
-    }
+    margin-top: $spacing-small;
   }
 
   > :first-child {

package/src/components/section/ClSectionForm/style.scss

@@ -0,0 +1,7 @@
+.cl-section-form {
+  padding-top: 0;
+
+  @include media-breakpoint-up(sm) {
+    padding-top: $spacing-small;
+  }
+}

package/src/components/section/ClSectionMainSide/style.scss

@@ -16,15 +16,6 @@
     margin-top: $spacing-small * 2;
   }
 
-  // // two successive sections of the same bg color loose a bit of gap
-  // &.cl-section-regular + .cl-section-regular.cl-section-main-side,
-  // &.cl-section-alternate + .cl-section-alternate.cl-section-main-side,
-  // &.cl-section-dark + .cl-section-dark.cl-section-main-side,
-  // &.cl-section-primary + .cl-section-primary.cl-section-main-side,
-  // &.cl-section-secondary + .cl-section-secondary.cl-section-main-side {
-  //   margin-top: $spacing-small * -2;
-  // }
-
   @include media-breakpoint-up(lg) {
     .col-lg-8 {
       padding-right: $spacing-medium;
@@ -47,14 +38,3 @@
     }
   }
 }
-
-// .cl-section-regular:not(.cl-section-main-side) + .cl-section-main-side,
-// .cl-section-alternate:not(.cl-section-main-side) + .cl-section-main-side {
-//   margin-top: $spacing-small * -2;
-//   padding-top: 0;
-// }
-//
-// .cl-section-main-side + section:not(.cl-section-main-side) {
-//   margin-top: $spacing-small * -1;
-//   padding-top: 0;
-// }

package/src/styles/layout/grid.scss

@@ -72,8 +72,13 @@
 $grid-spacing: $spacing-small;
 
 section {
-  padding-bottom: $spacing-large;
-  padding-top: $spacing-medium; // first element usually will add the rest.
+  padding-bottom: $spacing-small;
+  padding-top: 0; // first element usually will add the rest.
+
+  @include media-breakpoint-up(sm) {
+    padding-bottom: $spacing-large;
+    padding-top: $spacing-medium; // first element usually will add the rest.
+  }
 }
 
 main {

package/src/styles/layout/section.scss

@@ -31,7 +31,9 @@
 .cl-section-light + .cl-section-light,
 .cl-section-primary + .cl-section-primary,
 .cl-section-secondary + .cl-section-secondary {
-  margin-top: $spacing-small * -3;
+  @include media-breakpoint-up(sm) {
+    margin-top: $spacing-small * -3;
+  }
 }
 
 .cl-section-primary,

package/src/styles/ui.scss

@@ -54,6 +54,7 @@ $castlabs-ui-asset-prefix: '..' !default;
 @import '../components/navigation/ClNavSide/ClNavDrawer/style';
 @import '../components/navigation/ClNavSide/ClNavSideMenu/style';
 @import '../components/navigation/ClNavTop/style';
+@import '../components/section/ClSectionForm/style';
 @import '../components/section/ClSectionHeadline/style';
 @import '../components/section/ClSectionMainSide/style';
 @import '../components/table/ClTable/style';

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

@@ -47,7 +47,7 @@ declare module '@castlabs/ui/dist/castlabs-ui.module.js' {
     initialCol?: number,
     initialOrder?: string
   ): any
-  export function clTableSorterObjects<Type> (dataCallback: () => Type[], keys: string[], initialCol?: number): {
+  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,

package/types/index.d.ts

@@ -105,7 +105,7 @@ export function clTableSorter (
   initialCol?: number,
   initialOrder?: string
 ): any
-export function clTableSorterObjects<Type> (dataCallback: () => Type[], keys: string[], initialCol?: number): {
+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,