@central-design-system/components 3.0.0-beta.12 → 3.0.0-beta.13

package/dist/components/CdsTable/utils/index.d.ts

@@ -3,3 +3,4 @@ export * from './column';
 export * from './expand';
 export * from './fixed';
 export * from './listener';
+export * from './vnode';

package/dist/components/CdsTable/utils/vnode.d.ts

@@ -0,0 +1,10 @@
+import { VNode } from 'vue';
+import type { Slots, VNodeArrayChildren } from 'vue';
+/**
+ * Render slot with props and fallback (Instead of renderSlot function from Vue 3)
+ * @param slots
+ * @param name
+ * @param props
+ * @param fallback
+ */
+export declare function customRenderSlot(slots: Slots, name: string, props: Record<string, unknown>, fallback?: () => VNodeArrayChildren): VNode;

package/dist/components/CdsTabs/CdsTabs.vue.d.ts

@@ -46,7 +46,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         available: readonly ["cds", "b2b", "promo", "dark"];
         default: undefined;
     };
-    dark: {
+    invertColor: {
         type: PropType<boolean>;
         default: boolean;
     };
@@ -152,7 +152,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         available: readonly ["cds", "b2b", "promo", "dark"];
         default: undefined;
     };
-    dark: {
+    invertColor: {
         type: PropType<boolean>;
         default: boolean;
     };
@@ -218,7 +218,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     items: readonly TCdsTabItem[];
     tag: string;
     disabled: boolean;
-    dark: boolean;
+    invertColor: boolean;
     required: NonNullable<boolean | "force">;
     theme: string;
     modelValue: any;

package/dist/components/CdsToolbar/CdsToolbar.vue.d.ts

@@ -6,18 +6,38 @@ declare const _sfc_main: import("vue").DefineComponent<{
         available: readonly ["cds", "b2b", "promo", "dark"];
         default: undefined;
     };
+    invertColor: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    transparent: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    /**
+     * Вложенный тулбар
+     */
     inset: {
         type: PropType<boolean>;
         default: boolean;
     };
+    /**
+     * Показать границу
+     */
     bordered: {
         type: PropType<boolean>;
         default: boolean;
     };
+    /**
+     * Убрать отступ справа или слева
+     */
     noGutter: {
         type: PropType<"start" | "end">;
         default: undefined;
     };
+    /**
+     * Убрать отступы
+     */
     noGutters: {
         type: PropType<boolean>;
         default: boolean;
@@ -30,23 +50,45 @@ declare const _sfc_main: import("vue").DefineComponent<{
         available: readonly ["cds", "b2b", "promo", "dark"];
         default: undefined;
     };
+    invertColor: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    transparent: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    /**
+     * Вложенный тулбар
+     */
     inset: {
         type: PropType<boolean>;
         default: boolean;
     };
+    /**
+     * Показать границу
+     */
     bordered: {
         type: PropType<boolean>;
         default: boolean;
     };
+    /**
+     * Убрать отступ справа или слева
+     */
     noGutter: {
         type: PropType<"start" | "end">;
         default: undefined;
     };
+    /**
+     * Убрать отступы
+     */
     noGutters: {
         type: PropType<boolean>;
         default: boolean;
     };
 }>>, {
+    invertColor: boolean;
+    transparent: boolean;
     theme: string;
     bordered: boolean;
     inset: boolean;

package/dist/composable/appearance.d.ts

@@ -15,7 +15,7 @@ export declare const makeAppearanceProps: <Defaults extends {
      * Внешний вид
      */
     appearance: {
-        type: PropType<"primary" | "secondary" | "transparent">;
+        type: PropType<"transparent" | "primary" | "secondary">;
         default: string;
         available: readonly ["primary", "secondary", "transparent"];
         validator: (value: TAppearance) => boolean;

package/dist/composable/index.d.ts

@@ -8,7 +8,7 @@ export * from './appearance';
 export * from './size';
 export * from './disabled';
 export * from './readonly';
-export * from './dark';
+export * from './invertColor';
 export * from './color';
 export * from './status';
 export * from './tag';
@@ -46,3 +46,4 @@ export * from './ssrBoot';
 export * from './variant';
 export * from './layout';
 export * from './theme';
+export * from './transparent';

package/dist/composable/invertColor.d.ts

@@ -0,0 +1,19 @@
+import type { ComputedRef, PropType } from 'vue';
+export interface IInvertColorProps {
+    invertColor: boolean;
+}
+export interface IUseInvertColor {
+    invertColorClasses: ComputedRef<string | undefined>;
+}
+export declare const makeInvertColor: <Defaults extends {
+    invertColor?: unknown;
+} = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
+    /**
+     * Инвертирует цветовую схему компонента
+     */
+    invertColor: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+}, Defaults>;
+export declare function useInvertColor(props: IInvertColorProps, name: string): IUseInvertColor;

package/dist/composable/select.d.ts

@@ -76,7 +76,8 @@ export declare const makeSelectProps: <Defaults extends {
             tag: string;
             size: NonNullable<"xs" | "sm" | "md" | "lg" | "xl">;
             disabled: boolean;
-            dark: boolean;
+            invertColor: boolean;
+            transparent: boolean;
             required: boolean;
             selectStrategy: NonNullable<import("./nested/selectStrategies").TSelectStrategyProp>;
             openStrategy: NonNullable<import("./nested/openStrategies").TOpenStrategyProp>;
@@ -99,7 +100,11 @@ export declare const makeSelectProps: <Defaults extends {
             opened: PropType<unknown[]>;
             selected: PropType<unknown[]>;
             required: BooleanConstructor;
-            dark: {
+            transparent: {
+                type: PropType<boolean>;
+                default: boolean;
+            };
+            invertColor: {
                 type: PropType<boolean>;
                 default: boolean;
             };
@@ -168,7 +173,7 @@ export declare const makeSelectProps: <Defaults extends {
                 path: unknown[];
                 event: Event;
             }) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "items" | "itemTitle" | "itemValue" | "itemChildren" | "itemProps" | "returnObject" | "tag" | "size" | "disabled" | "dark" | "required" | "selectStrategy" | "openStrategy" | "theme" | "lines">, keyof import("vue").VNodeProps | keyof import("vue").AllowedComponentProps>>;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "items" | "itemTitle" | "itemValue" | "itemChildren" | "itemProps" | "returnObject" | "tag" | "size" | "disabled" | "invertColor" | "transparent" | "required" | "selectStrategy" | "openStrategy" | "theme" | "lines">, keyof import("vue").VNodeProps | keyof import("vue").AllowedComponentProps>>;
         default: undefined;
     };
     /**

package/dist/composable/transparent.d.ts

@@ -0,0 +1,19 @@
+import type { ComputedRef, PropType } from 'vue';
+export interface ITransparentProps {
+    transparent: boolean;
+}
+export interface IUseTransparentProps {
+    transparentClasses: ComputedRef<string | undefined>;
+}
+export declare const makeTransparentProps: <Defaults extends {
+    transparent?: unknown;
+} = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
+    /**
+     * Позволяет использовать компонент на прозрачном фоне
+     */
+    transparent: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+}, Defaults>;
+export declare function useTransparent(props: ITransparentProps, name: string): IUseTransparentProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@central-design-system/components",
-  "version": "3.0.0-beta.12",
+  "version": "3.0.0-beta.13",
   "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,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;
   }
 }
 

package/src/scss/themes/index.ts

@@ -1,6 +1,6 @@
 /**
  * Automatically generated by CDS CLI
- * Generated on 2/1/2024, 3:36:05 PM
+ * Generated on 2/15/2024, 1:41:26 PM
  **/
 
 /**

package/src/scss/utility/index.scss

@@ -3,3 +3,4 @@
 @import 'spacing';
 @import 'flexbox';
 @import 'lists';
+@import "typography";

package/src/scss/utility/typography.scss

@@ -0,0 +1,63 @@
+@import "./variables";
+
+@each $type, $value in $typography {
+  .cds-text-#{$type} {
+    @each $name, $val in $value {
+      @if $name == 'size' {
+        font-size: $val !important;
+      } @else if $name == 'height' {
+        line-height: $val !important;
+      } @else if $name == 'weight' {
+        font-weight: $val !important;
+      }
+    }
+    font-family: var(--cds-font-family-sans) !important;
+  }
+}
+
+@each $breakpoint, $map in $grid-breakpoints {
+  $breakpoint-width: map-get($map, 'width');
+
+  @media (min-width: $breakpoint-width) {
+    @each $type, $value in $typography {
+      .#{$breakpoint}\:cds-text-#{$type} {
+        @each $name, $val in $value {
+          @if $name == 'size' {
+            font-size: $val !important;
+          } @else if $name == 'height' {
+            line-height: $val !important;
+          } @else if $name == 'weight' {
+            font-weight: $val !important;
+          }
+        }
+        font-family: var(--cds-font-family-sans) !important;
+      }
+    }
+  }
+}
+
+@each $key, $value in $typography-properties {
+  $prefix: map-get($value, 'name');
+  $propertyMap: map-get($value, 'map');
+  $cssProperty: map-get($value, 'property');
+
+  // Без брейкпоинтов
+  @each $name, $propValue in $propertyMap {
+    .cds-#{$prefix}#{$name} {
+      #{$cssProperty}: $propValue !important;
+    }
+  }
+
+  // Брейкпоинты
+  @each $breakpoint, $map in $grid-breakpoints {
+    $width: map-get($map, 'width');
+
+    @media (min-width: $width) {
+      @each $name, $propValue in $propertyMap {
+        .#{$breakpoint}\:cds-#{$prefix}#{$name} {
+          #{$cssProperty}: $propValue !important;
+        }
+      }
+    }
+  }
+}

package/src/scss/utility/variables/exports/_display.scss

@@ -1,7 +1,7 @@
 @import "../display";
 
-:export {
-  @each $name, $value in $displays {
-    #{$name}: display/#{$value}
-  };
+@each $name, $value in $displays {
+  .#{$name} {
+    display: #{$value};
+  }
 };

package/src/scss/utility/variables/exports/_typography.scss

@@ -0,0 +1,22 @@
+@import "../typography";
+
+@each $name, $value in $typography {
+  .text-#{$name} {
+    font-size: map-get($value, 'size');
+    line-height: map-get($value, 'height');
+    font-weight: map-get($value, 'weight');
+  }
+}
+
+@each $key, $value in $typography-properties {
+  $prefix: map-get($value, 'name');
+  $propertyMap: map-get($value, 'map');
+  $cssProperty: map-get($value, 'property');
+
+  // Без брейкпоинтов
+  @each $name, $propValue in $propertyMap {
+    .#{$prefix}#{$name} {
+      #{$cssProperty}: $propValue;
+    }
+  }
+}

package/src/scss/utility/variables/index.scss

@@ -9,3 +9,4 @@
 @import "position";
 @import "flex";
 @import "spacing";
+@import "typography";