diff --git a/package.json b/package.json index 5ad5eb2..8423ac0 100644 --- a/package.json +++ b/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": { ".": { diff --git a/public/utils-scss/flex-box/example.md b/public/utils-scss/flex-box/example.md new file mode 100644 index 0000000..8dab2ea --- /dev/null +++ b/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 +
+
element
+
+``` \ No newline at end of file diff --git a/public/utils-scss/flex-box/mixin-flex-box.scss b/public/utils-scss/flex-box/mixin-flex-box.scss new file mode 100644 index 0000000..606b4bc --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/public/utils-scss/generate-indents/example.md b/public/utils-scss/generate-indents/example.md new file mode 100644 index 0000000..fc1160d --- /dev/null +++ b/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 +
+ content +
+``` + + + + + diff --git a/public/utils-scss/generate-indents/mixin-generate-indents.scss b/public/utils-scss/generate-indents/mixin-generate-indents.scss new file mode 100644 index 0000000..2a742df --- /dev/null +++ b/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; + } + } + } + } +} + + diff --git a/public/utils-scss/generate-indents/values-generate-indents.scss b/public/utils-scss/generate-indents/values-generate-indents.scss new file mode 100644 index 0000000..64dd7ea --- /dev/null +++ b/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; diff --git a/public/utils-scss/generate-indents/variables-generate-indents.scss b/public/utils-scss/generate-indents/variables-generate-indents.scss new file mode 100644 index 0000000..8765998 --- /dev/null +++ b/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', +); \ No newline at end of file diff --git a/public/utils-scss/short-text/example.md b/public/utils-scss/short-text/example.md new file mode 100644 index 0000000..ac11834 --- /dev/null +++ b/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 +
content
+ +
content
+``` \ No newline at end of file diff --git a/public/utils-scss/short-text/mixin-short-text.scss b/public/utils-scss/short-text/mixin-short-text.scss new file mode 100644 index 0000000..aa78ca5 --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 33f327d..15742b3 100644 --- a/src/index.ts +++ b/src/index.ts @@ -7,3 +7,5 @@ export { _t, _h } + +// diff --git a/tsconfig.json b/tsconfig.json index 0deec18..f6d2df6 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -45,5 +45,9 @@ //other }, - "include": ["src/**/*", "global.d.ts"] + "include": ["src/**/*", "global.d.ts"], + "exclude": [ + "**/node_modules", + "src/**/cypress", + ] } diff --git a/vite.config.d.ts b/vite.config.d.ts deleted file mode 100644 index 340562a..0000000 --- a/vite.config.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare const _default: import("vite").UserConfig; -export default _default;