@vueland/ui 0.0.1 → 0.0.2

package/dist/scss/utils/_elevations.scss

@@ -0,0 +1,15 @@
+@use "../maps/elevations-map" as *;
+@use "sass:map";
+
+@mixin elevation($z, $important: false) {
+  box-shadow: map.get($shadow-key-umbra, $z), map.get($shadow-key-penumbra, $z), map.get($shadow-key-ambient, $z) if(sass($important): !important)
+}
+
+$z: 24;
+@while $z >= 0 {
+  .elevation-#{$z} {
+    @include elevation($z, $important: true);
+  }
+
+  $z: $z - 1;
+}

package/dist/scss/utils/_flex.scss

@@ -0,0 +1,137 @@
+@use "../maps/grids" as *;
+@use "../maps/flexes-map" as *;
+@use "sass:map";
+
+.d-flex {
+  display: flex !important;
+}
+
+.d-inline-flex {
+  display: inline-flex !important;
+}
+
+.flex-row {
+  flex-direction: row !important;
+}
+
+.flex-col {
+  flex-direction: column !important;
+}
+
+.flex-wrap {
+  flex-wrap: wrap !important;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+.flex-wrap-reverse{
+  flex-wrap: wrap-reverse !important;
+}
+
+@each $key in map.keys($justify) {
+  .justify-#{$key} {
+    justify-content: map.get($justify, $key) !important;
+  }
+
+  .content-#{$key} {
+    align-content: map.get($justify, $key) !important;
+  }
+}
+
+@each $key in map.keys($align) {
+  .items-#{$key} {
+    align-items: map.get($align, $key) !important;
+  }
+
+  .self-#{$key} {
+    align-self: map.get($align, $key) !important;
+  }
+}
+
+@for $i from 1 through $columns {
+  .order-#{$i} {
+    order: $i !important;
+  }
+}
+
+@for $i from 0 through $flex-grow-step {
+  .grow-#{$i} {
+    flex-grow: $i !important;
+  }
+}
+
+@for $i from 0 through $flex-shrink-step {
+  .shrink-#{$i} {
+    flex-shrink: $i !important;
+  }
+}
+
+@each $size, $breakpoint in $grid-breakpoints {
+  @if $breakpoint != 0 {
+    @media (min-width: $breakpoint) {
+      .#{$size}\:d-flex {
+        display: flex !important;
+      }
+
+      .#{$size}\:d-inline-flex {
+        display: inline-flex !important;
+      }
+
+      .#{$size}\:flex-row {
+        flex-direction: row !important;
+      }
+
+      .#{$size}\:flex-col {
+        flex-direction: column !important;
+      }
+
+      .#{$size}\:flex-wrap {
+        flex-wrap: wrap !important;
+      }
+
+      .#{$size}\:flex-nowrap {
+        flex-wrap: nowrap !important;
+      }
+
+      @each $key in map.keys($justify) {
+        .#{$size}\:justify-#{$key} {
+          justify-content: map.get($justify, $key) !important;
+        }
+
+        .#{$size}\:content-#{$key} {
+          align-content: map.get($justify, $key) !important;
+        }
+      }
+
+      @each $key in map.keys($align) {
+        .#{$size}\:items-#{$key} {
+          align-items: map.get($align, $key) !important;
+        }
+
+        .#{$size}\:self-#{$key} {
+          align-self: map.get($align, $key) !important;
+        }
+      }
+
+      @for $i from 1 through $columns {
+        .#{$size}\:order-#{$i} {
+          order: $i !important;
+        }
+      }
+
+      @for $i from 0 through $flex-grow-step {
+        .#{$size}\:grow-#{$i} {
+          flex-grow: $i !important;
+        }
+      }
+
+      @for $i from 0 through $flex-shrink-step {
+        .#{$size}\:shrink-#{$i} {
+          flex-shrink: $i !important;
+        }
+      }
+    }
+  }
+}

package/dist/scss/utils/_helpers.scss

@@ -0,0 +1,47 @@
+// Visually hidden (accessibility)
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+// Visibility
+.visible   { visibility: visible !important; }
+.invisible { visibility: hidden !important; }
+
+// Pointer events
+.pointer-events-none { pointer-events: none !important; }
+.pointer-events-auto { pointer-events: auto !important; }
+
+// User select
+.select-none { user-select: none !important; }
+.select-text { user-select: text !important; }
+.select-all  { user-select: all !important; }
+.select-auto { user-select: auto !important; }
+
+// Object fit
+.object-contain { object-fit: contain !important; }
+.object-cover   { object-fit: cover !important; }
+.object-fill    { object-fit: fill !important; }
+.object-none    { object-fit: none !important; }
+
+// Aspect ratio
+.aspect-square { aspect-ratio: 1 / 1 !important; }
+.aspect-video  { aspect-ratio: 16 / 9 !important; }
+.aspect-auto   { aspect-ratio: auto !important; }
+
+// Truncate multi-line
+@for $i from 1 through 5 {
+  .line-clamp-#{$i} {
+    display: -webkit-box !important;
+    -webkit-line-clamp: #{$i} !important;
+    -webkit-box-orient: vertical !important;
+    overflow: hidden !important;
+  }
+}

package/dist/scss/utils/_opacity.scss

@@ -0,0 +1,13 @@
+@use "sass:math";
+
+$max: 10;
+
+@for $i from 0 through $max {
+  .op-#{$i} {
+    opacity: math.div($i, $max) !important;
+  }
+
+  .hover\:op-#{$i}:hover {
+    opacity: math.div($i, $max) !important;
+  }
+}

package/dist/scss/utils/_overflow.scss

@@ -0,0 +1,51 @@
+.overflow-hidden {
+  overflow: hidden !important;
+}
+
+.overflow-auto {
+  overflow: auto !important;
+}
+
+.overflow-visible {
+  overflow: visible !important;
+}
+
+.overflow-scroll {
+  overflow: scroll !important;
+}
+
+.overflow-x-auto {
+  overflow-x: auto !important;
+}
+
+.overflow-y-auto {
+  overflow-y: auto !important;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden !important;
+}
+
+.overflow-y-hidden {
+  overflow-y: hidden !important;
+}
+
+.overflow-x-scroll {
+  overflow-x: scroll !important;
+}
+
+.overflow-y-scroll {
+  overflow-y: scroll !important;
+}
+
+.overflow-clip {
+  overflow: clip !important;
+}
+
+.overflow-x-clip {
+  overflow-x: clip !important;
+}
+
+.overflow-y-clip {
+  overflow-y: clip !important;
+}

package/dist/scss/utils/_positions.scss

@@ -0,0 +1,42 @@
+@use "../maps/grids" as *;
+
+// Position
+.static   { position: static !important; }
+.relative { position: relative !important; }
+.absolute { position: absolute !important; }
+.fixed    { position: fixed !important; }
+.sticky   { position: sticky !important; }
+
+// Inset
+.inset-0   { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
+.inset-auto { top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; }
+
+// Top / Bottom / Left / Right
+.top-0    { top: 0 !important; }
+.top-auto { top: auto !important; }
+.top-50   { top: 50% !important; }
+.top-100  { top: 100% !important; }
+
+.bottom-0    { bottom: 0 !important; }
+.bottom-auto { bottom: auto !important; }
+.bottom-50   { bottom: 50% !important; }
+.bottom-100  { bottom: 100% !important; }
+
+.left-0    { left: 0 !important; }
+.left-auto { left: auto !important; }
+.left-50   { left: 50% !important; }
+.left-100  { left: 100% !important; }
+
+.right-0    { right: 0 !important; }
+.right-auto { right: auto !important; }
+.right-50   { right: 50% !important; }
+.right-100  { right: 100% !important; }
+
+// Z-index — произвольные значения через JIT: z-[100]
+$z-levels: 0, 1, 2, 3, 4, 5, 10, 50;
+
+@each $z in $z-levels {
+  .z-#{$z} { z-index: $z !important; }
+}
+
+.z-auto { z-index: auto !important; }

package/dist/scss/utils/_radius.scss

@@ -0,0 +1,41 @@
+$radius-scale: (
+  0: 0,
+  2: 2px,
+  4: 4px,
+  6: 6px,
+  8: 8px,
+  12: 12px,
+  16: 16px,
+  24: 24px,
+  32: 32px
+);
+
+@each $key, $value in $radius-scale {
+  .radius-#{$key} {
+    border-radius: #{$value} !important;
+  }
+
+  .radius-top-left-#{$key} {
+    border-top-left-radius: #{$value} !important;
+  }
+
+  .radius-top-right-#{$key} {
+    border-top-right-radius: #{$value} !important;
+  }
+
+  .radius-bottom-left-#{$key} {
+    border-bottom-left-radius: #{$value} !important;
+  }
+
+  .radius-bottom-right-#{$key} {
+    border-bottom-right-radius: #{$value} !important;
+  }
+}
+
+.radius-pill {
+  border-radius: 9999px !important;
+}
+
+.radius-circle {
+  border-radius: 50% !important;
+}

package/dist/scss/utils/_sizing.scss

@@ -0,0 +1,40 @@
+// Width
+.w-0    { width: 0 !important; }
+.w-25   { width: 25% !important; }
+.w-50   { width: 50% !important; }
+.w-75   { width: 75% !important; }
+.w-100  { width: 100% !important; }
+.w-auto { width: auto !important; }
+.w-fit  { width: fit-content !important; }
+.w-min  { width: min-content !important; }
+.w-max  { width: max-content !important; }
+
+// Height
+.h-0    { height: 0 !important; }
+.h-25   { height: 25% !important; }
+.h-50   { height: 50% !important; }
+.h-75   { height: 75% !important; }
+.h-100  { height: 100% !important; }
+.h-auto { height: auto !important; }
+.h-fit  { height: fit-content !important; }
+.h-min  { height: min-content !important; }
+.h-max  { height: max-content !important; }
+
+// Viewport
+.w-screen { width: 100vw !important; }
+.h-screen { height: 100vh !important; }
+
+// Min
+.min-w-0      { min-width: 0 !important; }
+.min-w-full   { min-width: 100% !important; }
+.min-h-0      { min-height: 0 !important; }
+.min-h-full   { min-height: 100% !important; }
+.min-h-screen { min-height: 100vh !important; }
+
+// Max
+.max-w-full   { max-width: 100% !important; }
+.max-w-screen { max-width: 100vw !important; }
+.max-w-none   { max-width: none !important; }
+.max-h-full   { max-height: 100% !important; }
+.max-h-screen { max-height: 100vh !important; }
+.max-h-none   { max-height: none !important; }

package/dist/scss/utils/_spaces.scss

@@ -0,0 +1,164 @@
+@use "../maps/grids" as *;
+@use "sass:map";
+
+$step: 4;
+$max: 20;
+
+@for $r from 0 through $max {
+  $z: $r * $step;
+
+  .ma-#{$r} {
+    margin: #{$z}px !important;
+  }
+
+  .ml-#{$r} {
+    margin-left: #{$z}px !important;
+  }
+
+  .mr-#{$r} {
+    margin-right: #{$z}px !important;
+  }
+
+  .mb-#{$r} {
+    margin-bottom: #{$z}px !important;
+  }
+
+  .mt-#{$r} {
+    margin-top: #{$z}px !important;
+  }
+
+  .mx-#{$r} {
+    margin-left: #{$z}px !important;
+    margin-right: #{$z}px !important;
+  }
+
+  .my-#{$r} {
+    margin-top: #{$z}px !important;
+    margin-bottom: #{$z}px !important;
+  }
+
+  .pl-#{$r} {
+    padding-left: #{$z}px !important;
+  }
+
+  .pr-#{$r} {
+    padding-right: #{$z}px !important;
+  }
+
+  .pb-#{$r} {
+    padding-bottom: #{$z}px !important;
+  }
+
+  .pt-#{$r} {
+    padding-top: #{$z}px !important;
+  }
+
+  .pa-#{$r} {
+    padding: #{$z}px !important;
+  }
+
+  .px-#{$r} {
+    padding-left: #{$z}px !important;
+    padding-right: #{$z}px !important;
+  }
+
+  .py-#{$r} {
+    padding-top: #{$z}px !important;
+    padding-bottom: #{$z}px !important;
+  }
+
+  .gap-#{$r} {
+    gap: #{$z}px !important;
+  }
+
+  .gap-x-#{$r} {
+    column-gap: #{$z}px !important;
+  }
+
+  .gap-y-#{$r} {
+    row-gap: #{$z}px !important;
+  }
+}
+
+// responsive
+@each $size, $breakpoint in $grid-breakpoints {
+  @if $breakpoint != 0 {
+    @media (min-width: $breakpoint) {
+      @for $r from 0 through $max {
+        $z: $r * $step;
+
+        .#{$size}\:pa-#{$r} {
+          padding: #{$z}px !important;
+        }
+
+        .#{$size}\:pl-#{$r} {
+          padding-left: #{$z}px !important;
+        }
+
+        .#{$size}\:pr-#{$r} {
+          padding-right: #{$z}px !important;
+        }
+
+        .#{$size}\:pb-#{$r} {
+          padding-bottom: #{$z}px !important;
+        }
+
+        .#{$size}\:pt-#{$r} {
+          padding-top: #{$z}px !important;
+        }
+
+        .#{$size}\:px-#{$r} {
+          padding-left: #{$z}px !important;
+          padding-right: #{$z}px !important;
+        }
+
+        .#{$size}\:py-#{$r} {
+          padding-top: #{$z}px !important;
+          padding-bottom: #{$z}px !important;
+        }
+
+        .#{$size}\:ma-#{$r} {
+          margin: #{$z}px !important;
+        }
+
+        .#{$size}\:ml-#{$r} {
+          margin-left: #{$z}px !important;
+        }
+
+        .#{$size}\:mr-#{$r} {
+          margin-right: #{$z}px !important;
+        }
+
+        .#{$size}\:mb-#{$r} {
+          margin-bottom: #{$z}px !important;
+        }
+
+        .#{$size}\:mt-#{$r} {
+          margin-top: #{$z}px !important;
+        }
+
+        .#{$size}\:mx-#{$r} {
+          margin-left: #{$z}px !important;
+          margin-right: #{$z}px !important;
+        }
+
+        .#{$size}\:my-#{$r} {
+          margin-top: #{$z}px !important;
+          margin-bottom: #{$z}px !important;
+        }
+
+        .#{$size}\:gap-#{$r} {
+          gap: #{$z}px !important;
+        }
+
+        .#{$size}\:gap-x-#{$r} {
+          column-gap: #{$z}px !important;
+        }
+
+        .#{$size}\:gap-y-#{$r} {
+          row-gap: #{$z}px !important;
+        }
+      }
+    }
+  }
+}

package/dist/scss/utils/_text.scss

@@ -0,0 +1,76 @@
+@use "../maps/grids" as *;
+@use "sass:map";
+
+.text-left {
+  text-align: left !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-right {
+  text-align: right !important;
+}
+
+.text-justify {
+  text-align: justify !important;
+}
+
+.text-justify-all {
+  text-align: justify-all !important;
+}
+
+.text-nowrap {
+  white-space: nowrap !important;
+}
+
+.text-truncate {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+.text-uppercase {
+  text-transform: uppercase !important;
+}
+
+.text-lowercase {
+  text-transform: lowercase !important;
+}
+
+.text-capitalize {
+  text-transform: capitalize !important;
+}
+
+@each $size, $breakpoint in $grid-breakpoints {
+  @if $breakpoint != 0 {
+    @media (min-width: $breakpoint) {
+
+      .#{$size}\:text-left {
+        text-align: left !important;
+      }
+
+      .#{$size}\:text-center {
+        text-align: center !important;
+      }
+
+      .#{$size}\:text-right {
+        text-align: right !important;
+      }
+
+      .#{$size}\:text-justify {
+        text-align: justify !important;
+      }
+
+      .#{$size}\:text-justify-all {
+        text-align: justify-all !important;
+      }
+
+      .#{$size}\:text-nowrap {
+        white-space: nowrap !important;
+      }
+
+    }
+  }
+}