@central-design-system/components 2.30.0 → 3.0.0-alpha.0

package/package.json

@@ -1,92 +1,49 @@
 {
   "name": "@central-design-system/components",
-  "version": "2.30.0",
+  "version": "3.0.0-alpha.0",
+  "description": "Central Design System on the Vue 3.0 and TypeScript",
+  "author": "magersoft",
   "license": "ISC",
-  "contributors": [
-    {
-      "name": "a.drozdov"
-    },
-    {
-      "name": "i.malov"
-    },
-    {
-      "name": "v.veleshko"
+  "main": "./dist/cds.umd.js",
+  "module": "./dist/cds.es.js",
+  "engines": {
+    "node": ">= 16"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/cds.es.js",
+      "require": "./dist/cds.umd.js"
     },
-    {
-      "name": "v.mager"
-    }
-  ],
-  "main": "dist/cds.js",
+    "./nuxt": "./nuxt.js",
+    "./dist/cds.css": "./dist/cds.css"
+  },
   "files": [
     "dist",
-    "build/utils"
+    "src/scss",
+    "nuxt.js"
   ],
+  "types": "./dist/cds.d.ts",
   "scripts": {
-    "test": "cross-env NODE_ENV=test NODE_PATH=. jest -i",
-    "test:watch": "cross-env NODE_ENV=test NODE_PATH=. jest --watch",
-    "test:update": "cross-env NODE_ENV=test NODE_PATH=. jest --updateSnapshot",
-    "build": "node build/index.js",
-    "build:components": "npx webpack --config build/webpack.components.js",
-    "demo": "http-server ./dist",
-    "postinstall": "node build/utils/postInstall.js"
+    "build": "rimraf dist && vue-tsc --noEmit && vite build",
+    "type-check": "npx vue-tsc --noEmit -p tsconfig.json --composite false",
+    "bump": "npx bumpp"
   },
-  "dependencies": {
-    "change-case": "3.1.0",
-    "flatpickr": "4.6.9",
-    "v-runtime-template": "1.10.0",
-    "vanilla-masker": "1.2.0",
-    "vue": "2.6.14",
-    "vue-upload-component": "git+https://github.com/b2bcenter/vue-upload-component#vue2"
+  "peerDependencies": {
+    "vue": "3.2.45"
   },
   "devDependencies": {
-    "@babel/core": "7.16.0",
-    "@vue/babel-preset-app": "4.5.15",
-    "@vue/server-test-utils": "1.0.0-beta.29",
-    "@vue/test-utils": "1.2.0",
-    "autoprefixer": "9.6.4",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "24.9.0",
-    "babel-loader": "8.2.3",
-    "chalk": "4.1.0",
-    "clean-webpack-plugin": "3.0.0",
-    "copy-webpack-plugin": "7.0.0",
-    "core-js": "3.19.3",
-    "cross-env": "5.2.1",
-    "css-loader": "5.2.7",
-    "css-minimizer-webpack-plugin": "1.3.0",
-    "cssnano": "4.1.11",
-    "expect": "24.9.0",
-    "flush-promises": "1.0.2",
-    "html-webpack-plugin": "5.5.0",
-    "identity-obj-proxy": "3.0.0",
-    "jest": "24.9.0",
-    "jest-css-modules": "2.1.0",
-    "jest-fetch-mock": "2.1.2",
-    "jest-serializer-vue": "2.0.2",
-    "jest-transform-stub": "2.0.0",
-    "mini-css-extract-plugin": "2.5.3",
-    "node-sass": "6.0.1",
-    "postcss-loader": "3.0.0",
-    "sass-loader": "10.2.0",
-    "sass-rem": "3.0.0",
-    "sinon": "7.5.0",
-    "style-loader": "1.3.0",
-    "terser-webpack-plugin": "5.2.1",
-    "vue-jest": "3.0.7",
-    "vue-loader": "15.9.8",
-    "vue-property-decorator": "9.1.2",
-    "vue-style-loader": "4.1.3",
-    "vue-template-compiler": "2.6.14",
-    "webpack": "5.65.0",
-    "webpack-bundle-analyzer": "4.5.0",
-    "webpack-cli": "4.9.1",
-    "webpack-merge": "5.8.0",
-    "webpackbar": "5.0.2"
-  },
-  "browserslist": [
-    "last 2 version",
-    ">0.5%",
-    "ie>=11",
-    "not dead"
-  ]
+    "@types/node": "16.18.3",
+    "@vitejs/plugin-vue": "3.0.0",
+    "bumpp": "8.2.1",
+    "rimraf": "3.0.2",
+    "rollup": "2.78.1",
+    "rollup-plugin-visualizer": "5.8.2",
+    "typescript": "4.8.4",
+    "vite": "3.1.7",
+    "vite-plugin-dts": "1.6.5",
+    "vite-tsconfig-paths": "3.5.1",
+    "vue": "3.2.45",
+    "vue-router": "4.1.6",
+    "vue-tsc": "1.0.9"
+  }
 }

package/src/scss/index.scss

@@ -0,0 +1,10 @@
+@import 'modules/variables';
+@import 'modules/reset';
+@import 'modules/transition';
+@import 'modules/typography';
+@import 'modules/grid';
+@import 'utility';
+
+@include variables;
+@include reset;
+@include typography;

package/{dist/mixins/scss → src/scss/mixins}/layout/_convert.scss

@@ -2,6 +2,8 @@
 /// @type Number
 /// @access public
 /// @group @cds/layout
+@use "sass:math";
+
 $cds-base-font-size: 16px !default;
 
 /// Convert a given px unit to a rem unit
@@ -10,7 +12,7 @@ $cds-base-font-size: 16px !default;
 /// @access public
 /// @group @cds/layout
 @function toRem($px) {
-  @return ($px / $cds-base-font-size) * 1rem;
+  @return math.div($px, $cds-base-font-size) * 1rem;
 }
 
 /// Convert a given px unit to a em unit
@@ -19,5 +21,5 @@ $cds-base-font-size: 16px !default;
 /// @access public
 /// @group @cds/layout
 @function toEm($px) {
-  @return ($px / $cds-base-font-size) * 1em;
+  @return math.div($px, $cds-base-font-size) * 1em;
 }

package/src/scss/mixins/layout/exports/_mini-unit.module.scss

@@ -0,0 +1,5 @@
+@import '../mini-unit';
+
+:export {
+  cds-mini-unit-size: $cds-mini-unit-size
+}

package/src/scss/mixins/layout/exports/_spacing-all.module.scss

@@ -0,0 +1,3 @@
+@import './spacing.module';
+@import './spacing-layout.module';
+@import './spacing-fluid.module';

package/src/scss/mixins/layout/exports/_spacing-fluid.module.scss

@@ -0,0 +1,8 @@
+@import '../spacing';
+
+:export {
+  cds-fluid-spacing-s: $cds-fluid-spacing-s;
+  cds-fluid-spacing-m: $cds-fluid-spacing-m;
+  cds-fluid-spacing-l: $cds-fluid-spacing-l;
+  cds-fluid-spacing-xl: $cds-fluid-spacing-xl;
+}

package/src/scss/mixins/layout/exports/_spacing-layout.module.scss

@@ -0,0 +1,11 @@
+@import '../spacing';
+
+:export {
+  cds-layout-xs: $cds-layout-xs;
+  cds-layout-s: $cds-layout-s;
+  cds-layout-m: $cds-layout-m;
+  cds-layout-l: $cds-layout-l;
+  cds-layout-xl: $cds-layout-xl;
+  cds-layout-xxl: $cds-layout-xxl;
+  cds-layout-3xl: $cds-layout-3xl;
+}

package/src/scss/mixins/layout/exports/_spacing.module.scss

@@ -0,0 +1,16 @@
+@import '../spacing';
+
+:export {
+  cds-spacing-3xs: $cds-spacing-3xs;
+  cds-spacing-xxs: $cds-spacing-xxs;
+  cds-spacing-xs: $cds-spacing-xs;
+  cds-spacing-s: $cds-spacing-s;
+  cds-spacing-m: $cds-spacing-m;
+  cds-spacing-l: $cds-spacing-l;
+  cds-spacing-xl: $cds-spacing-xl;
+  cds-spacing-xxl: $cds-spacing-xxl;
+  cds-spacing-3xl: $cds-spacing-3xl;
+  cds-spacing-4xl: $cds-spacing-4xl;
+  cds-spacing-5xl: $cds-spacing-5xl;
+  cds-spacing-6x: $cds-spacing-6xl;
+}

package/{dist/mixins/scss → src/scss/mixins}/layout/index.scss

@@ -1,5 +1,3 @@
 @import 'convert';
-@import 'breakpoint';
 @import 'mini-unit';
 @import 'spacing';
-@import 'key-height';

package/{dist/mixins/scss → src/scss/mixins}/typo.scss

@@ -1,6 +1,3 @@
-@import '../../mixins/scss/layout/breakpoint';
-
-
 /// Placeholder
 /// @param {string} $color - The color of placeholder
 /// @access public
@@ -29,57 +26,23 @@
   line-height: var(--cds-font-height-body);
   font-weight: var(--cds-font-weight-light);
 }
-
 @mixin cds-body-text-s() {
   font-family: var(--cds-font-family-sans);
   font-size: var(--cds-font-body-size-s);
   line-height: var(--cds-font-height-body);
   font-weight: var(--cds-font-weight-light);
-
-  @include cds-breakpoint-down('sm') {
-    font-size: var(--cds-font-body-size-xs);
-  }
 }
 @mixin cds-body-text-m() {
   font-family: var(--cds-font-family-sans);
   font-size: var(--cds-font-body-size-m);
   line-height: var(--cds-font-height-body);
   font-weight: var(--cds-font-weight-light);
-
-  @include cds-breakpoint-down('sm') {
-    font-size: var(--cds-font-body-size-s);
-  }
 }
 @mixin cds-body-text-l() {
   font-family: var(--cds-font-family-sans);
   font-size: var(--cds-font-body-size-l);
   line-height: var(--cds-font-height-body);
   font-weight: var(--cds-font-weight-normal);
-
-  @include cds-breakpoint-down('sm') {
-    font-size: var(--cds-font-body-size-m);
-  }
-}
-@mixin cds-body-text-xl() {
-  font-family: var(--cds-font-family-sans);
-  font-size: var(--cds-font-body-size-xl);
-  line-height: var(--cds-font-height-body);
-  font-weight: var(--cds-font-weight-normal);
-
-  @include cds-breakpoint-down('sm') {
-    font-size: var(--cds-font-body-size-l);
-  }
-}
-
-@mixin cds-body-text-xl() {
-  font-family: var(--cds-font-family-sans);
-  font-size: var(--cds-font-body-size-xl);
-  line-height: var(--cds-font-height-body);
-  font-weight: var(--cds-font-weight-normal);
-
-  @include cds-breakpoint-down('sm') {
-    font-size: var(--cds-font-body-size-l);
-  }
 }
 
 /// HEADING
@@ -90,66 +53,36 @@
   font-size: var(--cds-font-heading-1);
   line-height: var(--cds-font-height-heading);
   font-weight: var(--cds-font-weight-light);
-
-  @include cds-breakpoint-down('sm') {
-    font-size: var(--cds-font-heading-2);
-  }
 }
 @mixin cds-font-heading-2() {
   font-family: var(--cds-font-family-sans);
   font-size: var(--cds-font-heading-2);
   line-height: var(--cds-font-height-heading);
   font-weight: var(--cds-font-weight-light);
-
-  @include cds-breakpoint-down('sm') {
-    font-size: var(--cds-font-heading-3);
-  }
 }
 @mixin cds-font-heading-3() {
   font-family: var(--cds-font-family-sans);
   font-size: var(--cds-font-heading-3);
   line-height: var(--cds-font-height-heading);
   font-weight: var(--cds-font-weight-light);
-
-  @include cds-breakpoint-down('sm') {
-    font-size: var(--cds-font-heading-4);
-  }
 }
 @mixin cds-font-heading-4() {
   font-family: var(--cds-font-family-sans);
   font-size: var(--cds-font-heading-4);
   line-height: var(--cds-font-height-heading);
   font-weight: var(--cds-font-weight-bold);
-
-  @include cds-breakpoint-down('sm') {
-    font-size: var(--cds-font-heading-5);
-  }
 }
 @mixin cds-font-heading-5() {
   font-family: var(--cds-font-family-sans);
   font-size: var(--cds-font-heading-5);
   line-height: var(--cds-font-height-heading);
   font-weight: var(--cds-font-weight-bold);
-
-  @include cds-breakpoint-down('sm') {
-    font-size: var(--cds-font-heading-6);
-  }
 }
 @mixin cds-font-heading-6() {
   font-family: var(--cds-font-family-sans);
   font-size: var(--cds-font-heading-6);
   line-height: var(--cds-font-height-heading);
   font-weight: var(--cds-font-weight-bold);
-
-  @include cds-breakpoint-down('sm') {
-    font-size: var(--cds-font-body-size-xs);
-  }
-}
-@mixin cds-font-heading-6-adaptive() {
-    font-family: var(--cds-font-family-sans);
-    font-size: var(--cds-font-body-size-xs);
-    line-height: var(--cds-font-height-heading);
-    font-weight: var(--cds-font-weight-bold);
 }
 @mixin cds-font-heading-eyebrow() {
   font-family: var(--cds-font-family-sans);

package/src/scss/modules/_reset.scss

@@ -0,0 +1,113 @@
+@mixin reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html {
+    font-size: var(--cds-font-base);
+  }
+
+  body {
+    font-family: var(--cds-font-family-sans), Arial, sans-serif;
+    font-size: var(--cds-font-family-size);
+    line-height: var(--cds-font-height-body);
+    scroll-behavior: smooth;
+    text-rendering: optimizeSpeed;
+  }
+
+  body,
+  h1,
+  h2,
+  h3,
+  h4,
+  p,
+  ul,
+  ol,
+  li,
+  figure,
+  figcaption,
+  blockquote,
+  dl,
+  dd {
+    margin: 0;
+  }
+
+  ol, ul {
+    padding: 0;
+    list-style: none;
+  }
+
+  blockquote, q {
+    quotes: none;
+
+    &:before,
+    &:after {
+      content: none;
+    }
+  }
+
+  a:not([class]) {
+    text-decoration-skip-ink: auto;
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  img {
+    max-width: 100%;
+    display: block;
+  }
+
+  input,
+  button,
+  textarea,
+  select {
+    font-family: inherit;
+  }
+
+  /**
+    Если пользователь отключил анимацию в ОС
+    @see https://developer.mozilla.org/ru/docs/Web/CSS/@media/prefers-reduced-motion
+   */
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+
+  /**
+    Internet Explorer 11 :|
+   */
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    details, summary, main {
+      display: block;
+    }
+
+    template {
+      display: none;
+    }
+
+    svg:not(:root) {
+      overflow: hidden;
+    }
+
+    button {
+      overflow: visible;
+    }
+
+    textarea {
+      overflow: auto;
+    }
+
+    input::-ms-clear {
+      display: none;
+    }
+  }
+}

package/src/scss/modules/_transition.scss

@@ -0,0 +1,26 @@
+@import '../mixins/motion';
+
+$standard-easing: map-get(map-get($easing, 'ease-in-out'), 'basic');
+
+@mixin transition-default() {
+  &-enter-active {
+    transition: 0.3s $standard-easing;
+  }
+
+  &-leave-active {
+    transition: 0.3s $standard-easing;
+  }
+
+  &-move {
+    transition: transform .5s $standard-easing;
+  }
+}
+
+// Generic transitions
+.expand-transition {
+  @include transition-default();
+}
+
+.expand-x-transition {
+  @include transition-default();
+}

package/src/scss/modules/_typography.scss

@@ -0,0 +1,36 @@
+@import "../mixins/typo";
+@import "../mixins/layout/spacing";
+
+@mixin typography {
+  h1, .h1 {
+    @include cds-font-heading-1();
+  }
+
+  h2, .h2 {
+    @include cds-font-heading-2();
+  }
+
+  h3, .h3 {
+    @include cds-font-heading-3();
+  }
+
+  h4, .h4 {
+    @include cds-font-heading-4();
+  }
+
+  h5, .h5 {
+    @include cds-font-heading-5();
+  }
+
+  h6, .h6 {
+    @include cds-font-heading-6();
+  }
+
+  p {
+    @include cds-body-text-s();
+  }
+
+  small, .small {
+    @include cds-body-text-xs();
+  }
+}

package/src/scss/modules/_variables.scss

@@ -0,0 +1,9 @@
+@import '../themes/cds/tokens-map';
+
+@mixin variables() {
+  :root {
+    @each $name, $value in $tokens {
+      --#{$name}: #{$value};
+    }
+  }
+}

package/src/scss/modules/grid/_aspect-ratio.scss

@@ -0,0 +1,62 @@
+@use 'sass:list';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'config' as *;
+
+/// The aspect ratios that are used to generate corresponding aspect ratio
+/// classes in code
+/// @type List
+/// @access public
+/// @group @cds/grid
+$aspect-ratios: (
+  (16, 9),
+  (9, 16),
+  (2, 1),
+  (1, 2),
+  (4, 3),
+  (3, 4),
+  (3, 2),
+  (2, 3),
+  (1, 1)
+);
+
+/// Generates the CSS classname utilities for the aspect ratios
+///
+/// CSS Tricks article on aspect ratios and all the different ways it can be done.
+/// https://css-tricks.com/aspect-ratio-boxes/#article-header-id-6
+///
+/// That article references an earlier article on the topic.
+/// https://keithjgrant.com/posts/2017/03/aspect-ratios/
+///
+/// @param {Number} $width width from an aspect ratio
+/// @param {Number} $height height from an aspect ratio
+/// @access private
+/// @group @cds/grid
+@mixin aspect-ratio($aspect-ratios: $aspect-ratios) {
+  .#{$prefix}-aspect-ratio {
+    position: relative;
+  }
+
+  .#{$prefix}-aspect-ratio::before {
+    width: 1px;
+    height: 0;
+    margin-left: -1px;
+    content: '';
+    float: left;
+  }
+
+  .#{$prefix}-aspect-ratio::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+
+  @each $aspect-ratio in $aspect-ratios {
+    $width: list.nth($aspect-ratio, 1);
+    $height: list.nth($aspect-ratio, 2);
+
+    .#{$prefix}-aspect-ratio--#{$width}x#{$height}::before {
+      padding-top: math.percentage(math.div($height, $width));
+    }
+  }
+}