Add utils scss

package.json

@@ -7,7 +7,9 @@
   "main": "./dist/chkutils.common.js",
   "types": "./dist/types/index.d.ts",
   "files": [
-    "dist"
+    "dist/*.js",
+    "dist/types/*.d.ts",
+    "dist/utils-scss/*.scss"
   ],
   "exports": {
     ".": {

public/utils-scss/flex-box/example.md

@@ -0,0 +1,16 @@
+### Example
+
+```scss
+//import
+@use 'mixin-flex-box' as *;
+
+//connect
+@include mixin-flex-box-classes('prefix')
+
+```
+
+ ```html
+<div class="prefix-flex-row prefix-flex-justify-center prefix-flex-align-center">
+  <div>element</div>
+</div>
+```

public/utils-scss/flex-box/mixin-flex-box.scss

@@ -0,0 +1,142 @@
+@mixin mixin-flex-box-classes($prefix) {
+
+  .#{$prefix}-flex-display {
+    display: flex;
+  }
+
+  .#{$prefix}-flex-row {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .#{$prefix}-flex-row-reverse {
+    display: flex;
+    flex-direction: row-reverse;
+  }
+
+  .#{$prefix}-flex-column {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .#{$prefix}-flex-column-reverse {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  .#{$prefix}-flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .#{$prefix}-flex-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  .#{$prefix}-flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+
+  .#{$prefix}-flex-justify-start {
+    justify-content: flex-start;
+  }
+
+  .#{$prefix}-flex-justify-end {
+    justify-content: flex-end;
+  }
+
+  .#{$prefix}-flex-justify-center {
+    justify-content: center;
+  }
+
+  .#{$prefix}-flex-justify-between {
+    justify-content: space-between;
+  }
+
+  .#{$prefix}-flex-justify-around {
+    justify-content: space-around;
+  }
+
+  .#{$prefix}-flex-justify-evenly {
+    justify-content: space-evenly;
+  }
+
+  .#{$prefix}-flex-align-start {
+    align-items: flex-start;
+  }
+
+  .#{$prefix}-flex-align-end {
+    align-items: flex-end;
+  }
+
+  .#{$prefix}-flex-align-center {
+    align-items: center;
+  }
+
+  .#{$prefix}-flex-align-baseline {
+    align-items: baseline;
+  }
+
+  .#{$prefix}-flex-align-stretch {
+    align-items: stretch;
+  }
+
+  .#{$prefix}-flex-align-content-start {
+    align-content: flex-start;
+  }
+
+  .#{$prefix}-flex-align-content-end {
+    align-content: flex-end;
+  }
+
+  .#{$prefix}-flex-align-content-center {
+    align-content: center;
+  }
+
+  .#{$prefix}-flex-align-content-between {
+    align-content: space-between;
+  }
+
+  .#{$prefix}-flex-align-content-around {
+    align-content: space-around;
+  }
+
+  .#{$prefix}-flex-align-content-stretch {
+    align-content: stretch;
+  }
+
+  .#{$prefix}-flex-self-start {
+    align-self: flex-start;
+  }
+
+  .#{$prefix}-flex-self-end {
+    align-self: flex-end;
+  }
+
+  .#{$prefix}-flex-self-center {
+    align-self: center;
+  }
+
+  .#{$prefix}-flex-self-baseline {
+    align-self: baseline;
+  }
+
+  .#{$prefix}-flex-self-stretch {
+    align-self: stretch;
+  }
+
+  .#{$prefix}-flex-grow-0 {
+    flex-grow: 0;
+  }
+
+  .#{$prefix}-flex-grow-1 {
+    flex-grow: 1;
+  }
+
+  .#{$prefix}-flex-shrink-0 {
+    flex-shrink: 0;
+  }
+
+  .#{$prefix}-flex-shrink-1 {
+    flex-shrink: 1;
+  }
+}

public/utils-scss/generate-indents/example.md

@@ -0,0 +1,23 @@
+### Example
+
+```scss
+// import and connect in main file .scss
+@use 'values-generate-indents' as *;
+@use 'variables-generate-indents' as *;
+@use 'mixin-generate-indents-classes' as *;
+
+//connect
+//@params 'prefix', 'list-short-names', 'list-values'
+@include mixin-generate-indents-classes('prefix', $spacing-properties, $spacing-values);
+```
+
+```html
+<div class="prefix-my-16 prefix-mx-16 prefix-px-10 prefix-py-10 prefix-m-all-32 prefix-p-all-12">
+  content
+</div>
+```
+
+
+
+
+

public/utils-scss/generate-indents/mixin-generate-indents.scss

@@ -0,0 +1,39 @@
+@mixin mixin-generate-indents-classes($prefix, $properties, $values) {
+  @each $property, $abbreviation in $properties {
+    @each $value in $values {
+
+      // Генерация классов для отдельных свойств (например, mt, mb, pl и т.д.)
+      .#{$prefix}-#{$abbreviation}-#{$value} {
+        #{$property}: #{$value}px;
+      }
+
+      // Генерация классов для осей (mx, my, px, py)
+      @if $abbreviation == 'mx' {
+        .#{$prefix}-mx-#{$value} {
+          margin-left: #{$value}px;
+          margin-right: #{$value}px;
+        }
+      }
+      @if $abbreviation == 'my' {
+        .#{$prefix}-my-#{$value} {
+          margin-top: #{$value}px;
+          margin-bottom: #{$value}px;
+        }
+      }
+      @if $abbreviation == 'px' {
+        .#{$prefix}-px-#{$value} {
+          padding-left: #{$value}px;
+          padding-right: #{$value}px;
+        }
+      }
+      @if $abbreviation == 'py' {
+        .#{$prefix}-py-#{$value} {
+          padding-top: #{$value}px;
+          padding-bottom: #{$value}px;
+        }
+      }
+    }
+  }
+}
+
+

public/utils-scss/generate-indents/values-generate-indents.scss

@@ -0,0 +1 @@
+$spacing-values: 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 62, 64, 66, 68, 70, 72, 74, 76, 78, 80, 82, 84, 86, 88, 90, 92, 94, 96, 98, 100;

public/utils-scss/generate-indents/variables-generate-indents.scss

@@ -0,0 +1,18 @@
+$spacing-properties: (
+        'margin-top': 'mt',
+        'margin-bottom': 'mb',
+        'margin-left': 'ml',
+        'margin-right': 'mr',
+
+        'padding-top': 'pt',
+        'padding-bottom': 'pb',
+        'padding-left': 'pl',
+        'padding-right': 'pr',
+
+        'margin-x': 'mx',
+        'margin-y': 'my',
+        'margin': 'm-all',
+        'padding-x': 'px',
+        'padding-y': 'py',
+        'padding': 'p-all',
+);

public/utils-scss/short-text/example.md

@@ -0,0 +1,12 @@
+```scss
+@use 'mixin-short-text' as *;
+
+@include mixin-short-text('prefix','wrap');
+@include mixin-short-text('prefix','nowrap');
+```
+
+```html
+<div class="prefix-wrap"> content </div>
+
+<div class="prefix-nowrap"> content </div>
+```

public/utils-scss/short-text/mixin-short-text.scss

@@ -0,0 +1,23 @@
+@mixin short-text-nowrap {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin short-text-wrap {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin mixin-short-text($prefix, $wrap) {
+      @if $wrap == 'wrap' {
+        .#{$prefix}-#{$wrap} {
+          @include short-text-wrap;
+        }
+      }
+      @if $wrap == 'nowrap' {
+        .#{$prefix}-#{$wrap} {
+          @include short-text-nowrap;
+        }
+      }
+}

src/index.ts

@@ -7,3 +7,5 @@ export {
     _t,
     _h
 }
+
+//

tsconfig.json

@@ -45,5 +45,9 @@
     //other
 
   },
-  "include": ["src/**/*", "global.d.ts"]
+  "include": ["src/**/*", "global.d.ts"],
+  "exclude": [
+    "**/node_modules",
+    "src/**/cypress",
+  ]
 }