@central-design-system/components 3.0.0-beta.5 → 3.0.0-beta.7

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

@@ -1,29 +1,44 @@
 import type { PropType } from 'vue';
 export declare const componentName = "CdsBadge";
 declare const _sfc_main: import("vue").DefineComponent<{
+    variant: {
+        type: PropType<any>;
+        default: string;
+        validator: (value: "default" | "important") => boolean;
+    };
     dark: {
         type: PropType<boolean>;
         default: boolean;
     };
+    /**
+     * Число для счетчика
+     */
     count: {
         type: PropType<string | number>;
         required: true;
         default: number;
-        description: string;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    variant: {
+        type: PropType<any>;
+        default: string;
+        validator: (value: "default" | "important") => boolean;
+    };
     dark: {
         type: PropType<boolean>;
         default: boolean;
     };
+    /**
+     * Число для счетчика
+     */
     count: {
         type: PropType<string | number>;
         required: true;
         default: number;
-        description: string;
     };
 }>>, {
     dark: boolean;
+    variant: any;
     count: string | number;
 }>;
 export default _sfc_main;

package/dist/components/CdsExpandablePanel/CdsExpandablePanels.vue.d.ts

@@ -107,9 +107,9 @@ declare const _sfc_main: import("vue").DefineComponent<{
     required: boolean | "force";
     modelValue: any;
     readonly: boolean;
+    variant: "default" | "accordion";
     appearance: "primary" | "secondary" | "transparent";
     selectedClass: string;
     max: number;
-    variant: "default" | "accordion";
 }>;
 export default _sfc_main;

package/dist/components/CdsNotification/CdsNotificationAlert.vue.d.ts

@@ -415,6 +415,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     transition: NonNullable<string | boolean | (import("vue").TransitionProps & {
         component?: import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions> | undefined;
     })>;
+    variant: any;
     attach: string | boolean | Element;
     contained: boolean;
     persistent: boolean;
@@ -443,7 +444,6 @@ declare const _sfc_main: import("vue").DefineComponent<{
     maxWidth: string | number;
     minHeight: string | number;
     minWidth: string | number;
-    variant: any;
     customIcon: "search" | "link" | "list" | "filters" | "add" | "alert-fill" | "alert" | "analog" | "arrow-down" | "arrow-left-bottom" | "arrow-left-top" | "arrow-left" | "arrow-right-bottom" | "arrow-right-top" | "arrow-right" | "arrow-up" | "arrows-vertical" | "calendar" | "card-bank" | "category" | "check-fill" | "check" | "checkbox-fill" | "checkbox" | "chevron-down" | "chevron-left" | "chevron-right" | "chevron-up" | "chocholate-menu" | "chocolate-menu" | "clock" | "collapse" | "comment" | "company" | "compare" | "copy" | "data-cards" | "delete" | "directory" | "doc-download" | "doc" | "download" | "draggable" | "edit" | "enter" | "error-fill" | "error" | "expand" | "external" | "facebook-fill" | "facebook" | "flag" | "funnel" | "globe" | "infinity" | "info-fill" | "info" | "insert" | "list-search" | "loader" | "location" | "locked" | "login" | "logout" | "menu" | "minus" | "notification" | "overflow-menu-horizontal" | "overflow-menu-vertical" | "password" | "pin" | "plus" | "printer" | "question-fill" | "question" | "refresh" | "remove" | "sandglass" | "save" | "settings" | "shopping-cart" | "sort-date" | "source" | "star-fill" | "star" | "telegram" | "timer" | "tool" | "truck" | "unlocked" | "upload" | "user-avatar" | "user-group" | "visibility-off" | "visibility-on" | "vk" | "winner" | "workspace" | "youtube" | undefined;
     closable: boolean;
     closeLabel: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@central-design-system/components",
-  "version": "3.0.0-beta.5",
+  "version": "3.0.0-beta.7",
   "description": "Central Design System on the Vue 3.0 and TypeScript",
   "author": "magersoft",
   "license": "ISC",

package/src/scss/themes/index.ts

@@ -1,6 +1,6 @@
 /**
  * Automatically generated by CDS CLI
- * Generated on 10/18/2023, 3:18:58 PM
+ * Generated on 11/16/2023, 7:07:39 PM
  **/
 
 /**

package/src/scss/utility/display.scss

@@ -1,13 +1,64 @@
-@import "variables";
+@import "./variables";
 
-@each $name, $display in $displays {
+/*
+ * При добавлении утилитарных классов необходимо разделять переменные/формирование. Переменные хранятся в папке ./variables и также используются для формирования документации.
+ * Для всех утилитарных классов необходимо указывать !important
+ * Также, в данном файле необходимо указывать классы как без брейкпоинтов, так и с ними. Пример ниже.
+ * Чтобы утилитарные стили начали работать, необходимо экспортировать этот файл в index.scss, который в дальнейшем окажется в основном бандле.
+ */
+
+// Без брейкпоинтов
+@each $name, $value in $displays {
+  .cds-#{$name} {
+    display: $value !important;
+  }
+}
+
+@each $name, $value in $overflow {
+  .cds-overflow-#{$name} {
+    overflow: $value !important;
+  }
+}
+
+@each $name, $value in $positions {
   .cds-#{$name} {
-    display: $display !important;
+    position: $value !important;
   }
 }
 
-@each $name, $visibility in $visibility {
+@each $name, $value in $visibility {
   .cds-#{$name} {
-    visibility: $visibility !important;
+    visibility: $value !important;
+  }
+}
+
+// С брейкпоинтами
+@each $breakpoint, $map in $grid-breakpoints {
+  $width: map-get($map, 'width');
+
+  @media (min-width: $width) {
+    @each $name, $value in $displays {
+      .#{$breakpoint}\:cds-#{$name} {
+        display: $value !important;
+      }
+    }
+
+    @each $name, $value in $overflow {
+      .#{$breakpoint}\:cds-overflow-#{$name} {
+        overflow: $value !important;
+      }
+    }
+
+    @each $name, $value in $visibility {
+      .#{$breakpoint}\cds-#{$name} {
+        visibility: $value !important;
+      }
+    }
+
+    @each $name, $value in $positions {
+      .#{$breakpoint}\:cds-#{$name} {
+        position: $value !important;
+      }
+    }
   }
 }

package/src/scss/utility/flexbox.scss

@@ -1,37 +1,35 @@
-@import "variables";
+@import "./variables";
 
-@each $name, $direction in $flex-direction {
-  .cds-#{$name} {
-    flex-direction: $direction !important;
-  }
-}
+/*
+ * При добавлении утилитарных классов необходимо разделять переменные/формирование. Переменные хранятся в папке ./variables и также используются для формирования документации.
+ * Для всех утилитарных классов необходимо указывать !important
+ * Также, в данном файле необходимо указывать классы как без брейкпоинтов, так и с ними. Пример ниже.
+ * Чтобы утилитарные стили начали работать, необходимо экспортировать этот файл в index.scss, который в дальнейшем окажется в основном бандле.
+ */
 
-@each $name, $value in $justify-content {
-  .cds-justify-#{$name} {
-    justify-content: $value !important;
-  }
-}
+@each $key, $value in $flex-properties {
+  $prefix: map-get($value, 'name');
+  $propertyMap: map-get($value, 'map');
+  $cssProperty: map-get($value, 'property');
 
-@each $name, $value in $align-items {
-  .cds-items-#{$name} {
-    align-items: $value !important;
+  // без брейкпоинтов
+  @each $name, $propValue in $propertyMap {
+    .cds-#{$prefix}#{$name} {
+      #{$cssProperty}: $propValue !important;
+    }
   }
-}
 
-@each $name, $value in $align-content {
-  .cds-content-#{$name} {
-    align-content: $value !important;
-  }
-}
+  // брейкпоинты
+  @each $breakpoint, $map in $grid-breakpoints {
+    $width: map-get($map, 'width');
 
-@each $name, $value in $flex-wrap {
-  .cds-flex-#{$name} {
-    flex-wrap: $value !important;
+    @media (min-width: $width) {
+      @each $name, $propValue in $propertyMap {
+        .#{$breakpoint}\:cds-#{$prefix}#{$name} {
+          #{$cssProperty}: $propValue !important;
+        }
+      }
+    }
   }
 }
 
-@each $name, $value in $align-self {
-  .cds-self-#{$name} {
-    align-self: $value !important;
-  }
-}

package/src/scss/utility/index.scss

@@ -1,7 +1,5 @@
-@import 'generatedFiles/generatedStyles';
 @import 'display';
 @import 'layout';
 @import 'spacing';
-@import 'typography';
 @import 'flexbox';
 @import 'lists';

package/src/scss/utility/layout.scss

@@ -1,4 +1,11 @@
-@import "variables";
+@import "./variables";
+
+/*
+ * При добавлении утилитарных классов необходимо разделять переменные/формирование. Переменные хранятся в папке ./variables и также используются для формирования документации.
+ * Для всех утилитарных классов необходимо указывать !important
+ * Также, в данном файле необходимо указывать классы как без брейкпоинтов, так и с ними. Пример ниже.
+ * Чтобы утилитарные стили начали работать, необходимо экспортировать этот файл в index.scss, который в дальнейшем окажется в основном бандле.
+ */
 
 @each $name, $index in $z-indexes {
   .#{$name} {
@@ -6,6 +13,61 @@
   }
 }
 
-.cds-fullwidth {
-  width: 100%;
+@each $name, $value in $widthHeight {
+  .cds-h-#{$name} {
+    height: $value !important;
+  }
+
+  .cds-w-#{$name} {
+    width: $value !important;
+  }
+
+  .cds-max-h-#{$name} {
+    max-height: $value !important;
+  }
+
+  .cds-max-w-#{$name} {
+    max-width: $value !important;
+  }
+
+  .cds-min-h-#{$name} {
+    min-height: $value !important;
+  }
+
+  .cds-min-w-#{$name} {
+    min-width: $value !important;
+  }
+}
+
+
+@each $breakpoint, $map in $grid-breakpoints {
+  $width: map-get($map, 'width');
+
+  @media (min-width: $width) {
+    @each $name, $value in $widthHeight {
+      .#{$breakpoint}\:cds-w-#{$name} {
+        width: $value !important;
+      }
+
+      .#{$breakpoint}\:cds-min-w-#{$name} {
+        min-width: $value !important;
+      }
+
+      .#{$breakpoint}\:cds-max-w-#{$name} {
+        max-width: $value !important;
+      }
+
+      .#{$breakpoint}\:cds-h-#{$name} {
+        height: $value !important;
+      }
+
+      .#{$breakpoint}\:cds-min-h-#{$name} {
+        min-height: $value !important;
+      }
+
+      .#{$breakpoint}\:cds-max-h-#{$name} {
+        max-height: $value !important;
+      }
+    }
+  }
 }

package/src/scss/utility/spacing.scss

@@ -1,89 +1,49 @@
-@import "variables";
-
-@each $name, $space in $spaces {
-  .cds-pa-#{$name} {
-    padding: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-pt-#{$name} {
-    padding-top: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-pb-#{$name} {
-    padding-bottom: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-pr-#{$name} {
-    padding-right: $space !important;
+@import "./variables";
+
+/*
+ * При добавлении утилитарных классов необходимо разделять переменные/формирование. Переменные хранятся в папке ./variables и также используются для формирования документации.
+ * Для всех утилитарных классов необходимо указывать !important
+ * Также, в данном файле необходимо указывать классы как без брейкпоинтов, так и с ними. Пример ниже.
+ * Чтобы утилитарные стили начали работать, необходимо экспортировать этот файл в index.scss, который в дальнейшем окажется в основном бандле.
+ */
+
+// Базовые классы, без брейкпоинтов
+@each $abbr, $cssProp in map-merge($padding-map, $margin-map) {
+  @each $name, $space in $spaces {
+    @if type-of($cssProp) == 'list' {
+      .cds-#{$abbr}-#{$name} {
+        @each $prop in $cssProp {
+          #{$prop}: $space !important;
+        }
+      }
+    } @else {
+      .cds-#{$abbr}-#{$name} {
+        #{$cssProp}: $space !important;
+      }
+    }
+  }
+}
+
+// Классы с брейкпоинтами
+@each $breakpoint, $map in $grid-breakpoints {
+  $width: map-get($map, 'width');
+
+  @media (min-width: $width) {
+    @each $abbr, $cssProp in map-merge($padding-map, $margin-map) {
+      @each $name, $space in $spaces {
+        @if type-of($cssProp) == 'list' {
+          .#{$breakpoint}\:cds-#{$abbr}-#{$name} {
+            @each $prop in $cssProp {
+              #{$prop}: $space !important;
+            }
+          }
+        } @else {
+          .#{$breakpoint}\:cds-#{$abbr}-#{$name} {
+            #{$cssProp}: $space !important;
+          }
+        }
+      }
+    }
   }
 }
 
-@each $name, $space in $spaces {
-  .cds-pl-#{$name} {
-    padding-left: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-px-#{$name} {
-    padding-right: $space !important;
-    padding-left: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-py-#{$name} {
-    padding-top: $space !important;
-    padding-bottom: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-ma-#{$name} {
-    margin: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-mt-#{$name} {
-    margin-top: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-mb-#{$name} {
-    margin-bottom: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-mr-#{$name} {
-    margin-right: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-ml-#{$name} {
-    margin-left: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-mx-#{$name} {
-    margin-right: $space !important;
-    margin-left: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-my-#{$name} {
-    margin-top: $space !important;
-    margin-bottom: $space !important;
-  }
-}

package/src/scss/utility/variables/display.scss

@@ -0,0 +1,10 @@
+$displays: (
+  block: block,
+  inline-block: inline-block,
+  inline: inline,
+  flex: flex,
+  inline-flex: inline-flex,
+  table-row: table-row,
+  table-cell: table-cell,
+  none: none
+);

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

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

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

@@ -0,0 +1,13 @@
+@import "../flex";
+
+:export {
+  @each $key, $value in $flex-properties {
+    $prefix: map-get($value, 'name');
+    $propertyMap: map-get($value, 'map');
+    $cssProperty: map-get($value, 'property');
+
+    @each $name, $value in $propertyMap {
+      #{$prefix}#{$name}: #{$cssProperty}/#{$value}
+    }
+  }
+}

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

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

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

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

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

@@ -0,0 +1,14 @@
+@use 'sass:list';
+@import "../spacing";
+
+:export {
+  @each $abbr, $cssProp in $padding-map {
+    @each $name, $space in $spaces {
+      @if type-of($cssProp) == 'list' {
+        #{$abbr}-#{$name}: list.nth($cssProp, 1)/#{$space}_ list.nth($cssProp, 2)/#{$space}
+      } @else {
+        #{$abbr}-#{$name}: #{$cssProp}/#{$space}
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,7 @@
+@import "../widthHeight";
+
+:export {
+  @each $name, $value in $widthHeight {
+    w-#{$name}: #{width}/#{$value}
+  }
+}

package/src/scss/utility/variables/flex.scss

@@ -0,0 +1,99 @@
+$flex-direction: (
+  'flex-col': column,
+  'flex-row': row,
+  'flex-row-reverse': row-reverse,
+  'flex-col-reverse': column-reverse
+);
+
+$justify-content: (
+  'center': center,
+  'start': flex-start,
+  'end': flex-end,
+  'between': space-between,
+  'around': space-around,
+  'stretch': stretch
+);
+
+$align-items: (
+  'start': flex-start,
+  'end': flex-end,
+  'center': center,
+  'baseline': baseline,
+  'stretch': stretch
+);
+
+$align-content: (
+  'start': flex-start,
+  'end': flex-end,
+  'center': center,
+  'between': space-between,
+  'around': space-around,
+  'stretch': stretch,
+);
+
+$align-self: (
+  'start': flex-start,
+  'end': flex-end,
+  'center': center,
+  'baseline': baseline,
+  'stretch': stretch,
+  'auto': auto,
+  'normal': normal,
+  'first-baseline': first baseline,
+  'last-baseline': last baseline
+);
+
+$flex-wrap: (
+  'wrap': wrap,
+  'nowrap': nowrap,
+  'wrap-reverse': wrap-reverse
+);
+
+$flex-grow: (
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3
+);
+
+$flex-shrink: (
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3
+);
+
+$flex-basis: (
+  'auto': auto,
+  '0': 0,
+  '10': 10%,
+  '20': 20%,
+  '30': 30%,
+  '40': 40%
+);
+
+$order: (
+  'first': -1,
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+  '5': 5,
+  '6': 6,
+  '7': 7,
+  'last': 999
+);
+
+$flex-properties: (
+  'direction': ('name': '', 'map': $flex-direction, 'property': 'flex-direction'),
+  'justify': ('name': 'justify-', 'map': $justify-content, 'property': 'justify-content'),
+  'items': ('name': 'items-', 'map': $align-items, 'property': 'align-items'),
+  'content': ('name': 'content-', 'map': $align-content, 'property': 'align-content'),
+  'flex': ('name': 'flex-', 'map': $flex-wrap, 'property': 'flex-wrap'),
+  'self': ('name': 'self-', 'map': $align-self, 'property': 'align-self'),
+  'grow': ('name': 'grow-', 'map': $flex-grow, 'property': 'flex-grow'),
+  'shrink': ('name': 'shrink-', 'map': $flex-shrink, 'property': 'flex-shrink'),
+  'basis': ('name': 'basis-', 'map': $flex-basis, 'property': 'flex-basis'),
+  'order': ('name': 'order-', 'map': $order, 'property': 'order')
+);

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

@@ -0,0 +1,11 @@
+@import "../../mixins/layout/layout";
+@import "../../mixins/layout/spacing";
+@import "../../mixins/typo";
+@import "../../modules/grid/_config";
+@import "visibility";
+@import "widthHeight";
+@import "display";
+@import "overflow";
+@import "position";
+@import "flex";
+@import "spacing";

package/src/scss/utility/variables/overflow.scss

@@ -0,0 +1,6 @@
+$overflow: (
+  'hidden': hidden,
+  'scroll': scroll,
+  'auto': auto,
+  'visible': visible
+);

package/src/scss/utility/variables/position.scss

@@ -0,0 +1,7 @@
+$positions: (
+  'static': static,
+  'relative': relative,
+  'absolute': absolute,
+  'fixed': fixed,
+  'sticky': sticky
+);