@castlabs/ui 4.18.2

package/src/styles/ui.scss

@@ -0,0 +1,98 @@
+////
+/// @group global
+/// @access public
+////
+
+// This file is the root for this lib's stylesheet and will include all others.
+
+// Hint: Component-specific rules go into the vue components folders impored below.
+
+@use 'sass:math';
+
+$castlabs-ui-asset-prefix: '..' !default;
+
+@import 'bootstrap/scss/bootstrap-reboot';
+@import 'bootstrap/scss/helpers/ratio';
+@import 'global';
+@import 'assets/logo';
+@import 'layout/spacing';
+@import 'layout/grid';
+@import 'layout/typography';
+@import 'layout/section';
+@import 'layout/animation';
+
+// Vue components
+@import '../components/ClAlert/style';
+@import '../components/ClBadge/style';
+@import '../components/ClButton/style';
+@import '../components/ClCard/style';
+@import '../components/ClDropdown/style';
+@import '../components/ClDropzone/style';
+@import '../components/ClFooter/style';
+@import '../components/ClIcon/style';
+@import '../components/ClIconotron/style';
+@import '../components/ClList/style';
+@import '../components/ClListGroup/style';
+@import '../components/ClPagination/style';
+@import '../components/ClProgress/style';
+@import '../components/ClScrollbar/style';
+@import '../components/ClSpinner/style';
+@import '../components/ClTabs/style';
+@import '../components/ClToggle/style';
+@import '../components/ClTooltip/style';
+@import '../components/ClWizard/style';
+@import '../components/form/ClForm/style';
+@import '../components/form/ClField/style';
+@import '../components/form/ClFieldCheck/style';
+@import '../components/form/ClFieldFile/style';
+@import '../components/form/ClFieldInput/style';
+@import '../components/form/ClFieldSelect/style';
+@import '../components/form/ClFieldSet/style';
+@import '../components/form/ClFieldGroup/style';
+@import '../components/modal/ClModal/style';
+@import '../components/navigation/ClNavSide/style';
+@import '../components/navigation/ClNavSide/ClNavDrawer/style';
+@import '../components/navigation/ClNavSide/ClNavSideMenu/style';
+@import '../components/navigation/ClNavTop/style';
+@import '../components/section/ClSectionHeadline/style';
+@import '../components/section/ClSectionMainSide/style';
+@import '../components/table/ClTable/style';
+@import '../components/table/ClTableFootChecked/style';
+@import '../components/table/ClTableHead/style';
+@import '../components/table/ClTableCel/style';
+@import '../components/table/ClTableCel/Actions/style';
+@import '../components/table/ClTableCel/Audit/style';
+@import '../components/table/ClTableCel/Boolean/style';
+@import '../components/table/ClTableCel/Checkbox/style';
+@import '../components/table/ClTableCel/Code/style';
+@import '../components/table/ClTableCel/Currency/style';
+@import '../components/table/ClTableCel/Date/style';
+@import '../components/table/ClTableCel/ID/style';
+@import '../components/table/ClTableCel/Links/style';
+@import '../components/text/ClCopy/style';
+@import '../components/text/ClLinkExternal/style';
+@import '../components/text/ClOrg/style';
+@import '../components/text/ClPlan/style';
+@import '../components/text/ClRole/style';
+@import '../components/text/ClHashtag/style';
+@import '../components/widget/ClBackCancelOk/style';
+@import '../components/widget/ClCookieBanner/style';
+@import '../components/widget/ClPage/style';
+
+// --- globals -----------------------------------------------------------------
+
+.cl-shadow {
+  @include color-shadow-3d;
+}
+
+.cl-hidden {
+  visibility: hidden;
+}
+
+.cl-cursor-link {
+  cursor: pointer;
+}
+
+.cl-cursor-not-allowed {
+  cursor: not-allowed;
+}

package/src/styles/vendors/bootstrap.scss

@@ -0,0 +1,28 @@
+////
+/// @group vendors
+/// @access public
+////
+
+// This file will define/override variables used by bootstrap to customize it
+// to our needs.
+
+$primary: $color-ci-red;
+
+$border-radius: 3px;
+$border-radius-sm: $border-radius;
+$border-radius-lg: $border-radius;
+
+$btn-focus-width: px(2);
+
+$input-btn-focus-color: $color-ci-blue;
+
+$transition-base: all 0.1s ease-in-out;
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+);

package/src/styles/vendors/castlabs.scss

@@ -0,0 +1,17 @@
+.cl-theme-v2 {
+  .cl-section-primary.cl-section-tight {
+    background-color: $color-ci-haze;
+
+    h1 {
+      color: $color-ci-dusk;
+    }
+  }
+
+  .cl-nav-top {
+    border-bottom: 2px solid $color-ci-red;
+
+    .col-12 {
+      height: calc(3rem - 2px) !important; // sass-lint:disable-line no-important
+    }
+  }
+}

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

@@ -0,0 +1,83 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+declare module '@castlabs/ui/dist/castlabs-ui.module.js' {
+  export function clScrollToId (id: string, smooth?: boolean): void
+
+  export function clModalHide(): void
+  export function clModalShow (id: string, value?: any): void
+  export function clModalValue (id: string): any
+  export function clModalIsShown (id?: string): boolean
+
+  export function clPaginate (array: any[], pageNo?: number, pageSize?: number): any[]
+
+  export function clFocus (selector?: string): void
+
+  export function clFormReset (id: string, fields?: any[]): void
+  export function clFormFieldReset (ref: any, oldValue: any): void
+  export function clFormIsValid (id: string): boolean
+  export function clFormIsValidAsync (id: string): Promise<boolean>
+  export function clFormFieldFocusFirstInvalid (id: string): void
+  export function clFormAutofocus (id: string): void
+  export function clRefClField (ref: unknown): any
+  export function clRefClFieldGroup (ref: unknown): any
+  export function clRefHTMLElement (ref: unknown): HTMLElement
+
+  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 clFormatDuration (from: Date, until: Date, seconds?: boolean, ms?: boolean): string
+  export function clFormatPeriod (date: Date): string
+  export function clFormatNumber (amount: number, decimalPlaces?: number): string
+  export function clFormatAmount (amount: number, currency: string, decimalPlaces?: number): string
+  export function clFormatRange (from: number, to: number): string
+  export function clFormatCardNumber (card: string): string
+
+  export function clSynchronizedSubmit (component: any, callback: () => Promise<any>, id?: string): Promise<any>
+  export function clSynchronizedSubmitAsync (component: any, callback: () => Promise<any>, id?: string): Promise<any>
+
+  export function clSort (
+    a: object[] | '() => object[] | null | undefined' | null | undefined,
+    property: string,
+    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): {
+    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 clDebounce (callback: any, ms?: number, key?: string): void
+
+  export function clRandomString (length?: number, words?: string[]): string
+  export function clRandomList (length?: number, words?: string[]): string[]
+  export function clCopyData (data: any): void
+
+  export type ClReloadFunction = (forced: boolean, arg1?: any, arg2?: any, arg3?: any, arg4?: any) => Promise<any>
+  export type ClReloadArray = [method: ClReloadFunction, arg1?: any, arg2?: any, arg3?: any, arg4?: any]
+  export function clReload (
+    component: any,
+    forced?: [] | (ClReloadFunction | ClReloadArray)[],
+    optional?: [] | (ClReloadFunction | ClReloadArray)[],
+    loading?: boolean
+  ): Promise<any>
+  export function clReloadStore (component: any, forced?: any[], optional?: any[], loading?: boolean): Promise<any>
+
+  // search utils
+  export function clMatch (string: string, expression?: string, caseSensitive?: boolean): boolean
+
+  // test utils
+  export function clGetAllComponents(): object
+  export function clGetAllPlugins(): [{ install: (app: any) => void }]
+  export function clPatch (source: any, patches: any): object
+  export function clPatchStore (source: any, patches: any): object
+}

package/types/index.d.ts

@@ -0,0 +1,140 @@
+import type { App, VueConstructor } from 'vue'
+
+declare function install (Vue: App): void
+export default install
+
+export function castlabsUi (Vue: App): void
+
+export const ClAlert: VueConstructor
+export const ClBackCancelOk: VueConstructor
+export const ClCookieBanner: VueConstructor
+export const ClDropzone: VueConstructor
+export const ClField: VueConstructor
+export const ClFieldCheck: VueConstructor
+export const ClFieldGroup: VueConstructor
+export const ClIconotron: VueConstructor
+export const ClInfo: VueConstructor
+export const ClMockRouterLink: VueConstructor
+export const ClModal: VueConstructor
+export const ClModalConfirm: VueConstructor
+export const ClModalOk: VueConstructor
+export const ClNavSide: VueConstructor
+export const ClNavTop: VueConstructor
+export const ClPage: VueConstructor
+export const ClPagination: VueConstructor
+export const ClSectionForm: VueConstructor
+export const ClSectionHeadline: VueConstructor
+export const ClSectionMain: VueConstructor
+export const ClSectionMainSide: VueConstructor
+export const ClSpinner: VueConstructor
+export const ClTable: VueConstructor
+export const ClTableCel: VueConstructor
+export const ClTableCelActions: VueConstructor
+export const ClTableCelAudit: VueConstructor
+export const ClTableCelBoolean: VueConstructor
+export const ClTableCelCheckbox: VueConstructor
+export const ClTableCelCode: VueConstructor
+export const ClTableCelCurrency: VueConstructor
+export const ClTableCelDate: VueConstructor
+export const ClTableCelId: VueConstructor
+export const ClTableCelLinks: VueConstructor
+export const ClTableCelUuid: VueConstructor
+export const ClTableFootChecked: VueConstructor
+export const ClTableHead: VueConstructor
+export const ClTabs: VueConstructor
+export const ClToggle: VueConstructor
+
+export const ClCopy: VueConstructor
+export const ClCreditcardNumber: VueConstructor
+export const ClHashtag: VueConstructor
+export const ClLinkExternal: VueConstructor
+export const ClMailto: VueConstructor
+export const ClOrg: VueConstructor
+export const ClPlan: VueConstructor
+export const ClRole: VueConstructor
+
+export const ClLorem: VueConstructor
+
+// --- utils/ui ----------------------------------------------------------------
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+export function clScrollToId (id: string, smooth?: boolean): void
+
+export function clModalHide(): void
+export function clModalShow (id: string, value?: any): void
+export function clModalValue (id: string): any
+export function clModalIsShown (id?: string): boolean
+
+export function clPaginate (array: any[], pageNo?: number, pageSize?: number): any[]
+
+export function clFocus (selector?: string): void
+
+export function clFormReset (id: string, fields?: (typeof ClField | typeof ClFieldGroup)[]): void
+export function clFormFieldReset (ref: any, oldValue: any): void
+export function clFormIsValid (id: string): boolean
+export function clFormIsValidAsync (id: string): Promise<boolean>
+export function clFormFieldFocusFirstInvalid (id: string): void
+export function clFormAutofocus (id: string): void
+export function clRefClField (ref: unknown): typeof ClField
+export function clRefClFieldGroup (ref: unknown): typeof ClFieldGroup
+export function clRefHTMLElement (ref: unknown): HTMLElement
+
+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 clFormatDuration (from: Date, until: Date, seconds?: boolean, ms?: boolean): string
+export function clFormatPeriod (date: Date): string
+export function clFormatNumber (amount: number, decimalPlaces?: number): string
+export function clFormatAmount (amount: number, currency: string, decimalPlaces?: number): string
+export function clFormatRange (from: number, to: number): string
+export function clFormatCardNumber (card: string): string
+
+export function clSynchronizedSubmit (component: any, callback: () => Promise<any>, id?: string): Promise<any>
+export function clSynchronizedSubmitAsync (component: any, callback: () => Promise<any>, id?: string): Promise<any>
+
+export function clSort (
+  a: object[] | '() => object[] | null | undefined' | null | undefined,
+  property: string,
+  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): {
+  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 clDebounce (callback: any, ms?: number, key?: string): void
+
+export function clRandomString (length?: number, words?: string[]): string
+export function clRandomList (length?: number, words?: string[]): string[]
+export function clCopyData (data: any): void
+
+export type ClReloadFunction = (forced: boolean, arg1?: any, arg2?: any, arg3?: any, arg4?: any) => Promise<any>
+export type ClReloadArray = [method: ClReloadFunction, arg1?: any, arg2?: any, arg3?: any, arg4?: any]
+export function clReload (
+  component: any,
+  forced?: [] | (ClReloadFunction | ClReloadArray)[],
+  optional?: [] | (ClReloadFunction | ClReloadArray)[],
+  loading?: boolean
+): Promise<any>
+export function clReloadStore (component: any, forced?: any[], optional?: any[], loading?: boolean): Promise<any>
+
+// search utils
+export function clMatch (string: string, expression?: string, caseSensitive?: boolean): boolean
+
+// test utils
+export function clGetAllComponents(): object
+export function clGetAllPlugins(): [{ install: (app: any) => void }]
+export function clPatch (source: any, patches: any): object
+export function clPatchStore (source: any, patches: any): object