@central-design-system/components 3.0.0-beta.2 → 3.0.0-beta.21

package/dist/utils/helpers.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentPublicInstance, ComponentInternalInstance, ComputedGetter, InjectionKey, PropType, Ref, ToRefs, VNodeProps, VNodeChild, AllowedComponentProps, Component } 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 +99,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.
@@ -142,6 +158,7 @@ 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;
@@ -163,6 +180,18 @@ export declare function matchesSelector<T>(el: T | Element | undefined, selector
  * @param delay
  */
 export declare function debounce(fn: Function, delay: number): (...args: any[]) => void;
+/**
+ * Pluralize a word based on a number.
+ * @param n
+ * @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 noop(): void;
 /**
  * Types

package/dist/utils/index.d.ts

@@ -22,3 +22,5 @@ export * from './dom/wrapperRaf';
 export * from './dom/warn';
 export * from './dom/classNames';
 export * from './dom/hRender';
+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/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.2",
+  "version": "3.0.0-beta.21",
   "description": "Central Design System on the Vue 3.0 and TypeScript",
   "author": "magersoft",
   "license": "ISC",

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,17 +175,19 @@
       // 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,
       .#{$prefix}-col#{$infix}-auto {
-        width: auto;
+        @include -make-col-ready($gutter);
+
         // Reset earlier grid tiers
-        max-width: 100%;
-        flex: 1 0 0;
+        width: auto;
+        max-inline-size: 100%;
+        flex: 0 0 auto;
       }
 
       @for $i from 0 through $columns {
@@ -231,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;
 }
 
 
@@ -247,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;
   }
 }
 
@@ -273,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;
   }
 }