@castlabs/ui 7.12.0 → 7.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.12.0",
+  "version": "7.14.0",
   "repository": "https://github.com/castlabs/ui-styleguide",
   "private": false,
   "description": "A vanilla HTML/CS/JS & Vue.js component library for Castlabs.",
@@ -42,14 +42,14 @@
     "simplebar": "6.3.3"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "4.57.0"
+    "@rollup/rollup-linux-x64-gnu": "4.57.1"
   },
   "devDependencies": {
     "@castlabs/ui-editor": "file:../castlabs-ui-editor",
     "@tsconfig/node22": "22.0.5",
     "@types/jsdom": "27.0.0",
-    "@types/node": "24.10.1",
-    "@vitejs/plugin-vue": "6.0.3",
+    "@types/node": "25.2.0",
+    "@vitejs/plugin-vue": "6.0.4",
     "@vitest/eslint-plugin": "1.6.6",
     "@vue/eslint-config-prettier": "10.2.0",
     "@vue/eslint-config-typescript": "14.6.0",
@@ -65,12 +65,12 @@
     "gulp-concat": "2.6.1",
     "gulp-replace": "1.1.4",
     "gulp": "5.0.1",
-    "jsdom": "27.4.0",
+    "jsdom": "28.0.0",
     "npm-run-all": "4.1.5",
     "sass": "1.97.3",
-    "stylelint-config-sass-guidelines": "12.1.0",
+    "stylelint-config-sass-guidelines": "13.0.0",
     "stylelint-config-standard-vue": "1.0.0",
-    "stylelint-config-standard": "39.0.1",
+    "stylelint-config-standard": "40.0.0",
     "stylelint-order": "7.0.1",
     "stylelint-scss": "7.0.0",
     "typescript": "5.9.3",

package/plugins/matomo/README.md

@@ -0,0 +1,5 @@
+# Matomo Integration
+
+This standalone plugin is based on [vue-matomo](https://github.com/AmazingDreams/vue-matomo) (MIT license).
+
+It is not used by @castlabs/ui itself, but provided for Vue child projects to use.

package/plugins/matomo/index.ts

@@ -0,0 +1,93 @@
+/**
+ * Provide matomo integration without dependency to external package.
+ */
+
+import VueMatomo from 'vue-matomo'
+import type { App } from 'vue'
+import type { Router, RouteLocationNormalized } from 'vue-router'
+
+export function setCookie (name: string, value: string, days = 365, path = '/') {
+  document.cookie = `${name}=${value}; max-age=${60 * 60 * 24 * days}; path=${path}; SameSite=Lax;`
+}
+
+export function getCookie (cname: string): string {
+  for (const cookie of document?.cookie?.split(/; */) ?? []) {
+    const [name, value] = cookie.split('=')
+    if (name === cname) return value ?? ''
+  }
+  return ''
+}
+
+function getPaq () {
+  // cast potentialy non-exsisting _paq for typescript
+  return (window as unknown as { _paq: (string | number)[][] })?._paq ?? []
+}
+
+export function hasCookieConsent (what: string): boolean {
+  const value = getCookie('cl_banner_nok')
+  for (const token of value.split('|')) {
+    if (token === `+${what}`) return true
+  }
+  return false
+}
+
+export function enableMatomo (record = false, env = 'PROD') {
+  // Enable detailed matomo tracking if user gave consent.
+  const _paq = getPaq()
+  if (hasCookieConsent('mtm') && getCookie('mtm_cookie_consent') === '') {
+    // make Matomo create cookie 'mtm_cookie_consent' to remember consent. ~13 months=9480 hours.
+    _paq.push(['rememberCookieConsentGiven', 9480])
+  }
+  if (record) trackPage(document?.title, window?.location?.pathname, env)
+}
+
+export function trackPage (title: string, path: string, env: string) {
+  // Instruct Matomo to do the actual page tracking.
+
+  let prettyPath = path
+  const urnRegexp = /urn:[a-zA-Z]+:[a-zA-Z]+:[a-fA-F0-9]{32}/g
+  const foundUrns = [...prettyPath.matchAll(urnRegexp)]
+  foundUrns.forEach(elem => {
+    prettyPath = prettyPath.replace(elem.toString(), (elem[0].split(':')[2] ?? '').toUpperCase())
+  })
+
+  const prettyTitle = `${window?.location?.hostname} / ${title.replace(/ *\|[^|]*$/, '')}${env === 'PROD' ? '' : env}`
+
+  const _paq = getPaq()
+  _paq.push(['setDocumentTitle', prettyTitle])
+  _paq.push(['setCustomUrl', prettyPath])
+  _paq.push(['trackPageView'])
+  _paq.push(['enableLinkTracking'])
+}
+
+function trackViaMatomo (to: RouteLocationNormalized, env: string) {
+  if (!to.meta.analyticsIgnore) {
+    // matomo settings
+    enableMatomo()
+    trackPage(to.meta.title as string, to.fullPath, env)
+  }
+}
+
+export default {
+  install: (app: App, router: Router, env = 'PROD', siteId = 1) => {
+    console.log('setup matomo', env, siteId)
+    app.use(VueMatomo, {
+      host: 'https://castlabs.matomo.cloud',
+      siteId: siteId,
+      enableLinkTracking: false,
+      requireConsent: false,
+      trackInitialView: false,
+      disableCookies: false,
+      requireCookieConsent: true,
+      enableHeartBeatTimer: true,
+      heartBeatTimerInterval: 15,
+      trackerFileName: 'matomo',
+      cookieDomain: '*.castlabs.com',
+      domains: ['*.castlabs.com']
+    })
+
+    router.afterEach((to: RouteLocationNormalized) => {
+      trackViaMatomo(to, env)
+    })
+  }
+}

package/plugins/matomo/vue-matomo.d.ts

@@ -0,0 +1 @@
+declare module 'vue-matomo'

package/src/components/navigation/ClNavTop/style.scss

@@ -66,7 +66,8 @@ $sidenav-z-index: $layer-z-sidenav;
     span {
       &:not(:first-child) {
         &::before {
-          content: ' › ';
+          color: $color-ci-clay;
+          content: ' / ';
         }
 
         @include media-breakpoint-down(sm) {

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

@@ -0,0 +1,10 @@
+@use '../../../styles/global' as *;
+
+.cl-section-details {
+  #{'--cl-color-code'}: $color-ci-steel;
+  #{'--cl-color-text'}: $color-ci-steel;
+
+  .col-12 {
+    margin-top: 0 !important;
+  }
+}

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

@@ -1,10 +1,13 @@
 @use '../../../../styles/global' as *;
 
 .cl-table-data {
+  $bg-color: var(--cl-color-background);
+  $bg: linear-gradient(90deg, transparent 0, $bg-color $spacing-tiny, $bg-color 100%);
+
   .cl-th-links {
     @extend %cl-p-label;
 
-    background-color: transparent;
+    background: $bg;
     position: sticky;
     right: 0;
     text-align: end;
@@ -17,15 +20,12 @@
   }
 
   .cl-td-links {
+    background: $bg;
     overflow-wrap: unset;
     position: sticky;
     right: 0;
     white-space: nowrap;
 
-    // a {
-    //   @extend %cl-a-text;
-    // }
-
     :not(:first-child) {
       margin-left: $spacing-tiny;
 

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

@@ -25,4 +25,17 @@
   td:not(:last-child) {
     border-right: $brand-line-width dotted var(--cl-color-line);
   }
+
+  &.cl-tight {
+    td {
+      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/ClCookieBanner/style.scss

@@ -1,7 +1,7 @@
 @use '../../../styles/global' as *;
 
 .cl-cookie-banner {
-  bottom: $spacing-large;
+  bottom: $spacing-large + $spacing-small;
   // box-shadow: 1px 1px 2px 1px $color-black-25a;
   left: 50%;
   opacity: 1;

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

@@ -11,3 +11,58 @@
     margin: 0;
   }
 }
+
+// --- .cl-page-fullscreen variant ---------------------------------------------
+
+.cl-page-fullscreen {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - $header-nav-height);
+  overflow: hidden; // no scrolling
+
+  main:has(&) + footer {
+    // hide footer in .cl-page-fullscreen pages (but footer sits outside main)
+    display: none;
+  }
+
+  section:first-child {
+    flex: 0 0 auto;
+    margin-top: 0;
+  }
+
+  section:not(:first-child) {
+    flex: 1 1 auto;
+    margin-top: 0;
+    overflow-y: scroll;
+  }
+}
+
+.cl-section-fullscreen {
+  height: 100%;
+
+  .container,
+  .container-fluid,
+  .row,
+  .col-12,
+  .cl-table-scroll {
+    height: 100%;
+    margin-bottom: 0 !important;
+    margin-top: 0 !important;
+    padding-bottom: 0 !important;
+    padding-top: 0 !important;
+  }
+
+  table {
+    display: block;
+    max-height: 100%;
+    max-width: 100%;
+    overflow: scroll auto;
+  }
+
+  th {
+    background: $color-ci-haze !important;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+}

package/src/styles/abstracts/color.scss

@@ -210,6 +210,7 @@ $color-opacity-active: 0.8;
   #{'--cl-color-active'}: $color-ci-berry;
   #{'--cl-color-background'}: $color-ci-eggshell;
   #{'--cl-color-border'}: $color-ci-night;
+  #{'--cl-color-code'}: $color-ci-petrol;
   #{'--cl-color-disabled-background'}: $color-disabled;
   #{'--cl-color-disabled-border'}: $color-disabled;
   #{'--cl-color-disabled-text'}: $color-ci-eggshell;
@@ -244,6 +245,7 @@ $color-opacity-active: 0.8;
 %cl-color-text-light {
   // for backgrounds that require 'white' text
   #{'--cl-color-accent'}: $color-ci-eggshell;
+  #{'--cl-color-code'}: $color-ci-eggshell;
   #{'--cl-color-focus'}: $color-ci-eggshell;
   #{'--cl-color-icon'}: $color-ci-eggshell;
   #{'--cl-color-input-background'}: transparent;
@@ -256,6 +258,7 @@ $color-opacity-active: 0.8;
 %cl-color-text-dark {
   // for backgrounds that require 'black' text
   #{'--cl-color-accent'}: $color-ci-night;
+  #{'--cl-color-code'}: $color-ci-petrol;
   #{'--cl-color-focus'}: $color-ci-night;
   #{'--cl-color-icon'}: $color-ci-night;
   #{'--cl-color-input-background'}: transparent;

package/src/styles/layout/meta.scss

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

package/src/styles/layout/typography.scss

@@ -193,7 +193,6 @@ main {
   // --- code & monospace --------------------------------------------------------
 
   kbd,
-  code,
   samp {
     @extend %cl-p-pre;
 
@@ -201,14 +200,24 @@ main {
   }
 
   code {
+    @extend %cl-p-pre;
+
+    color: var(--cl-color-text);
     margin-left: 0.1em;
     margin-right: 0.1em;
   }
 
+  p code,
+  li code {
+    color: var(--cl-color-code);
+  }
+
   pre {
     @extend %cl-p-pre-box;
     @include cl-color-focus-outline;
 
+    color: var(--cl-color-text);
+
     code {
       padding: 0;
     }

package/src/styles/ui.scss

@@ -75,6 +75,7 @@ $castlabs-ui-asset-postfix: '' !default;
 @use '../components/navigation/ClNavSide/ClNavSideMenu/style' as *;
 @use '../components/navigation/ClNavSide/style' as *;
 @use '../components/navigation/ClNavTop/style' as *;
+@use '../components/section/ClSectionDetails/style' as *;
 @use '../components/section/ClSectionForm/style' as *;
 @use '../components/section/ClSectionHeadline/style' as *;
 @use '../components/section/ClSectionMainSide/style' as *;

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

@@ -25,6 +25,7 @@ declare module '@castlabs/ui/dist/castlabs-ui.module.js' {
   export function clFormatDate (date: Date): string
   export function clFormatTimeUTC (date: Date): string
   export function clFormatDateTimeUTC (date: Date, seconds?: boolean): string
+  export function clFormatDateTimeTabularUTC (date: Date, year?:boolean, month?:boolean, day?:boolean, time?:boolean, seconds?:boolean): string
   export function clFormatDuration (from: Date, until: Date, seconds?: boolean, ms?: boolean): string
   export function clFormatPeriod (date: Date): string
   export function clFormatNumber (amount: number, decimalPlaces?: number): string

package/types/index.d.ts

@@ -1,8 +1,5 @@
 import type { App, DefineComponent } from 'vue'
 
-import * as CONST from '../src/utils/const'
-import * as CS from '../src/utils/cs'
-
 declare function install (Vue: App): void
 export default install
 
@@ -26,6 +23,7 @@ export const ClNavSide: DefineComponent
 export const ClNavTop: DefineComponent
 export const ClPage: DefineComponent
 export const ClPagination: DefineComponent
+export const ClSectionDetails: DefineComponent
 export const ClSectionForm: DefineComponent
 export const ClSectionHeadline: DefineComponent
 export const ClSectionMain: DefineComponent
@@ -85,6 +83,7 @@ export function clFormatFilesize (bytes: number): string
 export function clFormatDate (date: Date): string
 export function clFormatTimeUTC (date: Date): string
 export function clFormatDateTimeUTC (date: Date, seconds?: boolean): string
+export function clFormatDateTimeTabularUTC (date: Date, year?:boolean, month?:boolean, day?:boolean, time?:boolean, seconds?:boolean): string
 export function clFormatDuration (from: Date, until: Date, seconds?: boolean, ms?: boolean): string
 export function clFormatPeriod (date: Date): string
 export function clFormatNumber (amount: number, decimalPlaces?: number): string
@@ -253,7 +252,45 @@ export function csGetNav (
 export function csFilterMemberships (memberships: CsMembership[], rid?: string, sid?: string): CsMembership[]
 export function csGetAccountUrl(env: string): string
 
-// --- consts ----------------------------------------------------------------
+// --- utils/const.js ----------------------------------------------------------------
+
+export const CONST: {
+  COLOR: Record<string, string>
+  SPACING: Record<string, string>
+}
+
+// --- utils/cs.js ----------------------------------------------------------------
+
+type CsApp = {
+  id: string
+  subtitle: string
+  title: string
+  services: string[]
+  roles: string[]
+  urlManage: (env: string, oid: string) => string
+  urlPlan: (env: string, oid: string) => string
+  sidenav: boolean
+}
+
+type CsNavEntry = {
+  id: string
+  title: string
+  subtitle: string
+  url: string
+  locked: boolean,
+  disabled: boolean,
+  badge: string | undefined
+}
+
+export const CS: {
+  SERVICE: Record<string, string>
+  ROLE: Record<string, string>
+  STATE: Record<string, number | null>
+  LICENSE_STATE: Record<string, number | null>
+  PLAN: Record<string, number | null>
+  APPS: Record<string, CsApp>
+}
 
-export const CONST
-export const CS
+export function csGetNav (memberships: CsMembership[], oid: string, env: string): CsNavEntry[]
+export function csFilterMemberships (memberships: CsMembership[], rid: string, sid: string): CsMembership[]
+export function csGetAccountUrl (env: string): string