@central-design-system/components 3.0.0-beta.4 → 3.0.0-beta.40

package/dist/utils/dom/bindProps.d.ts

@@ -0,0 +1,2 @@
+export declare function bindProps(el: HTMLElement, props: Record<string, any>): void;
+export declare function unbindProps(el: HTMLElement, props: Record<string, any>): void;

package/dist/utils/dom/box.d.ts

@@ -24,3 +24,4 @@ export declare function getOverflow(a: Box, b: Box): {
         after: number;
     };
 };
+export declare function getTargetBox(target: HTMLElement | [x: number, y: number]): Box;

package/dist/utils/helpers.d.ts

@@ -1,5 +1,6 @@
-import type { ComponentPublicInstance, ComponentInternalInstance, ComputedGetter, InjectionKey, PropType, Ref, ToRefs, VNodeProps, VNodeChild, AllowedComponentProps, Component } from 'vue';
+import { type VNode } from 'vue';
 import type { TItemKey } from '../composable';
+import type { ComponentPublicInstance, ComponentInternalInstance, ComputedGetter, InjectionKey, PropType, Ref, ToRefs, VNodeProps, VNodeChild, AllowedComponentProps, Component } from 'vue';
 export declare const preventedScrollClass = "cds-scroll-blocked";
 export declare const keyNames: Readonly<{
     enter: "Enter";
@@ -99,6 +100,22 @@ export declare function getNestedValue(obj: any, path: (string | number)[], fall
  * @param fallback
  */
 export declare function getObjectValueByPath(obj: any, path: string, fallback?: any): any;
+/**
+ * This function is used to get the value of a property from an item. The property can be a string, an array, a function, or a boolean.
+ * If the property is a string, it will be used as a path to retrieve the value from the item.
+ * If the property is an array, it will be used as a nested path to retrieve the value from the item.
+ * If the property is a function, it will be called with the item and the fallback value as arguments, and its return value will be used.
+ * If the property is a boolean, and it's true, the item itself will be returned.
+ * If the property is null, undefined, or a boolean that's not true, the fallback value will be returned.
+ * If the item is not an object, and the property is not a function, the fallback value will be returned.
+ * If the property is not a string, an array, or a function, the fallback value will be returned.
+ * If the value retrieved from the item is undefined, the fallback value will be returned.
+ *
+ * @param item - The item from which to get the property value.
+ * @param property - The property to get from the item. Can be a string, an array, a function, or a boolean.
+ * @param fallback - The value to return if the property is not found or its value is undefined.
+ * @returns The value of the property from the item, or the fallback value.
+ */
 export declare function getPropertyFromItem(item: any, property: SelectItemKey, fallback?: any): any;
 /**
  * This function is used to return the scroll position of the given element.
@@ -123,6 +140,7 @@ export declare function destructComputed<T extends object>(getter: ComputedGette
  * @param val
  */
 export declare function includes(arr: readonly any[], val: any): boolean;
+export declare function eventName(propName: string): string;
 export declare function convertToUnit(str: number, unit?: string): string;
 export declare function convertToUnit(str: string | number | null | undefined, unit?: string): string | undefined;
 export declare function convertRemToPx(value: string): number;
@@ -134,17 +152,14 @@ export declare function convertRemToPx(value: string): number;
  */
 export declare function clamp(value: number, min?: number, max?: number): number;
 export declare function createRange(length: number, start?: number): number[];
-/**
- * Is value an like event
- * @param key
- */
 export declare const isOn: (key: string) => boolean;
 export declare const EventProp: PropType<(...args: any[]) => any>;
 export declare function isComponentInstance(obj: any): obj is ComponentPublicInstance;
 export declare function isFixedPosition(el?: HTMLElement): boolean;
+export declare function padEnd(str: string, length: number, char?: string): string;
 export declare function padStart(string: number | string, targetLength: number, padString: string): string;
 export declare function pad(n: string | number, length?: number): string;
-export declare function refElement<T extends Record<string, any> | undefined>(obj: T): Exclude<T, ComponentPublicInstance> | HTMLElement;
+export declare function refElement(obj: ComponentPublicInstance<any> | HTMLElement): HTMLElement | undefined;
 export declare function omit<T extends object, K extends keyof T>(obj: T, fields: K[]): Omit<T, K>;
 export declare function findChildrenWithProvide(key: InjectionKey<any> | symbol, vnode?: VNodeChild | {
     [key: string]: any;
@@ -169,11 +184,21 @@ export declare function debounce(fn: Function, delay: number): (...args: any[])
  * @param opts
  */
 export declare function plurals(n: number, opts: string[]): string;
+/**
+ * Chunk a string into an array of strings.
+ * @param str
+ * @param size
+ */
+export declare function chunk(str: string, size?: number): string[];
+export declare function defer(timeout: number, cb: () => void): () => void;
+export declare function isValidElement(element: any): any;
 export declare function noop(): void;
 /**
  * Types
  */
 export declare type MaybeRef<T> = T | Ref<T>;
+declare type VNodeChildAtom = VNode | string | number | boolean | null | undefined | void;
+export declare type VueNode = VNodeChildAtom | VNodeChildAtom[] | JSX.Element;
 export declare type SelectItemKey = TItemKey;
 export declare type MaybePick<T extends object, U extends Extract<keyof T, string>> = Record<string, unknown> extends T ? Partial<Pick<T, U>> : Pick<T, U>;
 export declare type EventProp<T = (...args: any[]) => any> = T;

package/dist/utils/index.d.ts

@@ -6,6 +6,8 @@ export * from './use/eagerComputed';
 export * from './use/pickAttrs';
 export * from './use/cache';
 export * from './use/copyToClipboard';
+export * from './use/flattenChildren';
+export * from './use/listener';
 export * from './changeCase/noCase';
 export * from './changeCase/lowerCase';
 export * from './changeCase/pascalCase';
@@ -22,3 +24,6 @@ export * from './dom/wrapperRaf';
 export * from './dom/warn';
 export * from './dom/classNames';
 export * from './dom/hRender';
+export * from './dom/bindProps';
+export * from './colorsUtils';
+export { default as colors } from './colors';

package/dist/utils/propsFactory.d.ts

@@ -1,5 +1,5 @@
-import type { PropType } from 'vue';
 import type { Prop, ComponentObjectPropsOptions } from '../shims-vue';
+import type { PropType } from 'vue';
 /**
  * Creates a factory function for props definitions.
  * This is used to define props in a composable then override

package/dist/utils/use/flattenChildren.d.ts

@@ -0,0 +1,3 @@
+export declare function flattenChildren(children?: any[], filterEmpty?: boolean): any[];
+export declare function filterEmpty(children?: any[]): any[];
+export declare function isEmptyElement(c: Record<string, any>): boolean | undefined;

package/nuxt.js

@@ -1,6 +1,7 @@
-import { defineNuxtModule } from '@nuxt/kit';
 import { fileURLToPath } from 'node:url';
 
+import { defineNuxtModule } from '@nuxt/kit';
+
 export default defineNuxtModule({
   hooks: {
     'components:dirs'(dirs) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@central-design-system/components",
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0-beta.40",
   "description": "Central Design System on the Vue 3.0 and TypeScript",
   "author": "magersoft",
   "license": "ISC",
@@ -52,5 +52,8 @@
     "vue": "3.2.47",
     "vue-router": "4.1.6",
     "vue-tsc": "1.0.9"
+  },
+  "dependencies": {
+    "resize-observer-polyfill": "1.5.1"
   }
 }

package/src/scss/mixins/typo.scss

@@ -117,7 +117,6 @@
   font-size: var(--cds-font-body-size-s);
   line-height: var(--cds-font-height-helper);
   font-weight: var(--cds-font-weight-normal);
-  max-width: $max-width;
 }
 @mixin cds-font-description($max-width: 32rem) {
   font-family: var(--cds-font-family-sans);
@@ -132,6 +131,4 @@
   font-size: var(--cds-font-body-size-xs);
   line-height: var(--cds-font-height-helper);
   font-weight: var(--cds-font-weight-normal);
-  max-width: $max-width;
-  width: 75%;
 }

package/src/scss/modules/_transition.scss

@@ -10,6 +10,24 @@ $standard-duration: $cds-duration-fast + ms;
 $accent-duration: $cds-duration-normal + ms;
 
 @mixin transition-default() {
+  &-enter-active {
+    transition-duration: $standard-duration !important;
+    transition-timing-function: $standard-easing !important;
+  }
+
+  &-leave-active {
+    transition-duration: $standard-duration !important;
+    transition-timing-function: $standard-easing !important;
+  }
+
+  &-move {
+    transition-duration: 0.5s !important;
+    transition-property: transform !important;
+    transition-timing-function: $standard-easing !important;
+  }
+}
+
+@mixin transition-minimal() {
   &-enter-active {
     transition: $standard-duration $standard-easing;
   }
@@ -36,6 +54,19 @@ $accent-duration: $cds-duration-normal + ms;
 .fade-transition {
   @include transition-default();
 
+  &-enter-from, &-leave-to {
+    opacity: 0 !important;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition-property: opacity !important;
+  }
+}
+
+.fade-transition-minimal {
+  @include transition-minimal();
+
   &-leave-active {
     position: absolute;
   }

package/src/scss/modules/grid/_css-grid.scss

@@ -75,20 +75,18 @@
     --cds-grid-column-hang: calc(var(--cds-grid-gutter) / 2);
 
     display: grid;
-    width: 100%;
-    max-width: get-grid-width($breakpoints, largest-breakpoint-name($breakpoints));
-    padding-right: var(--cds-grid-margin);
-    padding-left: var(--cds-grid-margin);
-    margin-right: auto;
-    margin-left: auto;
     grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
+    inline-size: 100%;
+    margin-inline: auto;
+    padding-inline: var(--cds-grid-margin);
+    max-inline-size: get-grid-width($breakpoints, largest-breakpoint-name($breakpoints));
   }
 
   // -----------------------------------------------------------------------------
   // Full width
   // -----------------------------------------------------------------------------
-  .#{$prefix}--css-grid--full-width {
-    max-width: 100%;
+  .#{$prefix}--css-grid--wide {
+    max-inline-size: 100%;
   }
 
   // -----------------------------------------------------------------------------
@@ -105,12 +103,10 @@
     --cds-grid-mode-start: var(--cds-grid-gutter-start);
     --cds-grid-mode-end: var(--cds-grid-gutter-end);
 
-    margin-right: var(--cds-grid-gutter-end);
-    margin-left: var(--cds-grid-gutter-start);
+    margin-inline: var(--cds-grid-gutter-start) var(--cds-grid-gutter-end);
 
     [dir='rtl'] & {
-      margin-right: var(--cds-grid-gutter-start);
-      margin-left: var(--cds-grid-gutter-end);
+      margin-inline: var(--cds-grid-gutter-end) var(--cds-grid-gutter-start);
     }
   }
 
@@ -134,13 +130,11 @@
   // -----------------------------------------------------------------------------
   .#{$prefix}--subgrid {
     display: grid;
-    margin-right: calc(var(--cds-grid-mode-end) * -1);
-    margin-left: calc(var(--cds-grid-mode-start) * -1);
     grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
+    margin-inline: calc(var(--cds-grid-mode-start) * -1) calc(var(--cds-grid-mode-end) * -1);
 
     [dir='rtl'] & {
-      margin-right: calc(var(--cds-grid-mode-start) * -1);
-      margin-left: calc(var(--cds-grid-mode-end) * -1);
+      margin-inline: calc(var(--cds-grid-mode-end) * -1) calc(var(--cds-grid-mode-start) * -1);
     }
   }
 
@@ -171,11 +165,10 @@
   // Helper class to allow for text alignment in columns where the leading
   // gutter is missing (like narrow) or is reduced (like in condensed).
   .#{$prefix}--grid-column-hang {
-    margin-left: var(--cds-grid-column-hang);
+    margin-inline-start: var(--cds-grid-column-hang);
 
     [dir='rtl'] & {
-      margin-right: var(--cds-grid-column-hang);
-      margin-left: initial;
+      margin-inline: initial var(--cds-grid-column-hang);
     }
   }
 

package/src/scss/modules/grid/_flex-grid.scss

@@ -3,6 +3,12 @@
 
 @import 'mixins';
 
+/// Generate the CSS for a grid for the given breakpoints and gutters
+/// @param {Map} $breakpoints [$grid-breakpoints] - The default breakpoints
+/// @param {Number} $grid-gutter [$grid-gutter] - The default gutters
+/// @param {Number} $condensed-gutter [$grid-gutter-condensed] - The condensed mode gutter
+/// @access public
+/// @group @cds/grid
 @mixin flex-grid(
   $breakpoints: $grid-breakpoints,
   $grid-gutter: $grid-gutter,
@@ -14,7 +20,7 @@
 
   @include cds-largest-breakpoint($breakpoints) {
     .#{$prefix}-grid--wide {
-      max-width: 100%;
+      max-inline-size: 100%;
     }
   }
 
@@ -24,13 +30,11 @@
 
   .#{$prefix}-row-padding [class*='#{$prefix}-col'],
   .#{$prefix}-col-padding {
-    padding-top: $grid-gutter * 0.5;
-    padding-bottom: $grid-gutter * 0.5;
+    padding-block: $grid-gutter * 0.5;
   }
 
   .#{$prefix}-grid-condensed [class*='#{$prefix}-col'] {
-    padding-top: $condensed-gutter * 0.5;
-    padding-bottom: $condensed-gutter * 0.5;
+    padding-block: $condensed-gutter * 0.5;
   }
 
   @include -make-grid-columns($breakpoints, $grid-gutter);

package/src/scss/modules/grid/_mixins.scss

@@ -24,8 +24,7 @@
 /// @access private
 /// @group @cds/grid
 @mixin -make-container($breakpoints: $grid-breakpoints) {
-  margin-right: auto;
-  margin-left: auto;
+  margin-inline: auto;
 
   @include -set-largest-breakpoint($breakpoints);
 
@@ -38,15 +37,13 @@
 
       @if $prev-margin != $margin {
         @include cds-breakpoint($name) {
-          padding-right: #{($grid-gutter * 0.5) + $margin};
-          padding-left: #{($grid-gutter * 0.5) + $margin};
-        }
-      } @else {
-        @include cds-breakpoint($name) {
-          padding-right: #{($grid-gutter * 0.5) + $margin};
-          padding-left: #{($grid-gutter * 0.5) + $margin};
+          padding-inline: #{($grid-gutter * 0.5) + $margin};
         }
       }
+    } @else {
+      @include cds-breakpoint($name) {
+        padding-inline: #{($grid-gutter * 0.5) + $margin};
+      }
     }
   }
 }
@@ -57,7 +54,7 @@
 /// @group @cds/grid
 @mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
   $largest-breakpoint: -last-map-item($breakpoints);
-  max-width: map.get($largest-breakpoint, 'width');
+  max-inline-size: map.get($largest-breakpoint, 'width');
 }
 
 /// Add in the max-widths for each breakpoint to the container
@@ -67,7 +64,7 @@
 @mixin -make-container-max-widths($breakpoints: $grid-breakpoints) {
   @each $name, $value in $breakpoints {
     @include cds-breakpoint($name) {
-      max-width: map.get($value, width);
+      max-inline-size: map.get($value, width);
     }
   }
 }
@@ -88,22 +85,19 @@
   // Prevent columns from becoming too narrow when at smaller grid tiers by
   // always setting `width: 100%;`. This works because we use `flex` values
   // later on to override this initial width.
-  width: 100%;
-  padding-right: ($gutter * 0.5);
-  padding-left: ($gutter * 0.5);
+  inline-size: 100%;
+  padding-inline: $gutter * 0.5;
 
   // For our condensed use-case, our gutters collapse to 2px solid, 1px on each side.
   .#{$prefix}-row-condensed &,
   .#{$prefix}-grid-condensed & {
-    padding-right: ($condensed-gutter * 0.5);
-    padding-left: ($condensed-gutter * 0.5);
+    padding-inline: $condensed-gutter * 0.5;
   }
 
   // For our narrow use-case, our container hangs 16px into the gutter
   .#{$prefix}-row-narrow &,
   .#{$prefix}-grid-narrow & {
-    padding-right: ($gutter * 0.5);
-    padding-left: 0;
+    padding-inline: 0 $gutter * 0.5;
   }
 }
 
@@ -122,8 +116,8 @@
     // Add a `max-width` to ensure content within each column does not blow out
     // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
     // do not appear to require this.
-    max-width: math.percentage(math.div($span, $columns));
     flex: 0 0 math.percentage(math.div($span, $columns));
+    max-inline-size: math.percentage(math.div($span, $columns));
   }
 }
 
@@ -137,9 +131,9 @@
   $offset: math.div($span, $columns);
 
   @if $offset == 0 {
-    margin-left: 0;
+    margin-inline-start: 0;
   } @else {
-    margin-left: math.percentage($offset);
+    margin-inline-start: math.percentage($offset);
   }
 }
 
@@ -181,9 +175,9 @@
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .#{$prefix}-col,
       .#{$prefix}-col#{$infix} {
-        max-width: 100%;
         flex-basis: 0;
         flex-grow: 1;
+        max-inline-size: 100%;
       }
 
       .#{$prefix}-col-auto,
@@ -192,7 +186,7 @@
 
         // Reset earlier grid tiers
         width: auto;
-        max-width: 100%;
+        max-inline-size: 100%;
         flex: 0 0 auto;
       }
 
@@ -233,8 +227,7 @@
 @mixin -make-row($gutter: $grid-gutter) {
   display: flex;
   flex-wrap: wrap;
-  margin-right: -1 * $gutter * 0.5;
-  margin-left: -1 * $gutter * 0.5;
+  margin-inline: -1 * $gutter * 0.5;
 }
 
 
@@ -249,18 +242,17 @@
 @mixin -no-gutter {
   .#{$prefix}-no-gutter,
   .#{$prefix}-row.#{$prefix}-no-gutter [class*='#{$prefix}-col'] {
-    padding-right: 0;
-    padding-left: 0;
+    padding-inline: 0;
   }
 
   .#{$prefix}-no-gutter--start,
   .#{$prefix}-row.#{$prefix}-no-gutter--start [class*='#{$prefix}-col'] {
-    padding-left: 0;
+    padding-inline-start: 0;
   }
 
   .#{$prefix}-no-gutter--end,
   .#{$prefix}-row.#{$prefix}-no-gutter--end [class*='#{$prefix}-col'] {
-    padding-right: 0;
+    padding-inline-end: 0;
   }
 }
 
@@ -275,11 +267,11 @@
 /// @group @carbon/grid
 @mixin -hang($gutter: $grid-gutter) {
   .#{$prefix}-hang--start {
-    padding-left: $gutter * 0.5;
+    padding-inline-start: $gutter * 0.5;
   }
 
   .#{$prefix}-hang--end {
-    padding-right: $gutter * 0.5;
+    padding-inline-end: $gutter * 0.5;
   }
 }