From bfd7f85656e927f4385c20061f0c91fd4d7620d4 Mon Sep 17 00:00:00 2001
From: mm <25961416+mlmoravek@users.noreply.github.com>
Date: Sun, 7 Apr 2024 15:00:16 +0200
Subject: [PATCH 01/10] fix(datepicker): add cursor pointer when selectable
(#21)
---
src/assets/scss/components/_datepicker.scss | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/assets/scss/components/_datepicker.scss b/src/assets/scss/components/_datepicker.scss
index d75c1ef..d9aea2f 100644
--- a/src/assets/scss/components/_datepicker.scss
+++ b/src/assets/scss/components/_datepicker.scss
@@ -261,6 +261,7 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
}
&--selectable {
+ cursor: pointer;
color: var(
--#{$prefix}datepicker-item-selectable-color,
$datepicker-item-selectable-color
From 3278308bf214ebb80853ff5a3688d9ed6a6be05a Mon Sep 17 00:00:00 2001
From: mm <25961416+mlmoravek@users.noreply.github.com>
Date: Tue, 9 Apr 2024 13:22:50 +0200
Subject: [PATCH 02/10] feat: update variables (#22)
---
.stylelintrc.js => .stylelintrc.cjs | 0
src/assets/scss/components/_button.scss | 6 ++++--
src/assets/scss/components/_carousel.scss | 11 ++++++----
src/assets/scss/components/_checkbox.scss | 5 ++---
src/assets/scss/components/_icon.scss | 4 ++--
src/assets/scss/components/_input.scss | 2 +-
src/assets/scss/components/_modal.scss | 2 +-
src/assets/scss/components/_notification.scss | 2 +-
src/assets/scss/components/_pagination.scss | 2 +-
src/assets/scss/components/_radio.scss | 5 ++---
src/assets/scss/components/_select.scss | 2 +-
src/assets/scss/components/_sidebar.scss | 21 ++++++-------------
src/assets/scss/components/_slider.scss | 2 +-
src/assets/scss/components/_steps.scss | 7 +++----
src/assets/scss/components/_switch.scss | 12 +++++------
src/assets/scss/components/_table.scss | 2 +-
src/assets/scss/utils/_animations.scss | 20 ++++++++++--------
src/assets/scss/utils/_root.scss | 9 +++-----
src/assets/scss/utils/_variables.scss | 10 ++++-----
19 files changed, 56 insertions(+), 68 deletions(-)
rename .stylelintrc.js => .stylelintrc.cjs (100%)
diff --git a/.stylelintrc.js b/.stylelintrc.cjs
similarity index 100%
rename from .stylelintrc.js
rename to .stylelintrc.cjs
diff --git a/src/assets/scss/components/_button.scss b/src/assets/scss/components/_button.scss
index e1600fd..d60833a 100644
--- a/src/assets/scss/components/_button.scss
+++ b/src/assets/scss/components/_button.scss
@@ -12,8 +12,10 @@ $button-margin-icon-to-text: 0.1875em !default;
$button-margin: 0 !default;
$button-height: $control-height !default;
$button-padding: $control-padding-vertical 0.75em !default;
-$button-rounded-border-radius: #{base-rounded-border-radius} !default;
-$button-disabled-opacity: #{base-disabled-opacity} !default;
+$button-rounded-border-radius: var(
+ --#{$prefix}#{base-border-radius-rounded}
+) !default;
+$button-disabled-opacity: var(--#{$prefix}#{base-disabled-opacity}) !default;
$button-outlined-background-color: transparent !default;
/* @docs */
diff --git a/src/assets/scss/components/_carousel.scss b/src/assets/scss/components/_carousel.scss
index cf990c7..5d3c971 100644
--- a/src/assets/scss/components/_carousel.scss
+++ b/src/assets/scss/components/_carousel.scss
@@ -5,10 +5,11 @@ $carousel-arrow-icon-spaced: 1.5rem !default;
$carousel-arrow-top: 50% !default;
$carousel-arrow-size: 1.5rem !default;
$carousel-arrow-border-radius: var(
- --#{$prefix}base-rounded-border-radius
+ --#{$prefix}base-border-radius-rounded
) !default;
$carousel-arrow-border: 1px solid $carousel-arrow-background !default;
-$carousel-arrow-transition: $speed-slow $easing !default;
+$carousel-arrow-transition: var(--#{$prefix}transition-duration)
+ var(--#{$prefix}transition-timing) !default;
$carousel-indicators-background: rgba(var(--#{$prefix}white), 0.5) !default;
$carousel-indicators-padding: 0.5rem !default;
$carousel-indicator-margin: 0 0.5rem 0 0 !default;
@@ -17,14 +18,16 @@ $carousel-indicator-background: var(--#{$prefix}white) !default;
$carousel-indicator-border: 1px solid $carousel-indicator-color !default;
$carousel-indicator-active-background: $carousel-indicator-color !default;
$carousel-indicator-active-border: 1px solid $carousel-indicator-color !default;
-$carousel-indicator-transition: $speed-slow $easing !default;
+$carousel-indicator-transition: var(--#{$prefix}transition-duration)
+ var(--#{$prefix}transition-timing) !default;
$carousel-indicator-size: 10px !default;
$carousel-indicator-dots-border-radius: var(
--#{$prefix}base-border-radius
) !default;
$carousel-indicator-lines-height: 5px !default;
$carousel-indicator-lines-width: 25px !default;
-$carousel-items-transition: all $speed-slower ease-out 0s !default;
+$carousel-items-transition: all var(--#{$prefix}transition-duration)
+ var(--#{$prefix}transition-timing) 0s !default;
$carousel-item-border: 2px solid transparent !default;
$carousel-overlay-background: hsla(0, 0%, 4%, 0.86) !default;
$carousel-overlay-zindex: 40 !default;
diff --git a/src/assets/scss/components/_checkbox.scss b/src/assets/scss/components/_checkbox.scss
index de177bb..6469f76 100644
--- a/src/assets/scss/components/_checkbox.scss
+++ b/src/assets/scss/components/_checkbox.scss
@@ -81,9 +81,8 @@ $checkbox-line-height: 1.5 !default;
$checkbox-border-color
);
border-style: solid;
- transition-property: background;
- transition-duration: var(--#{$prefix}transition-duration, $speed-slow);
- transition-timing-function: var(--#{$prefix}transition-timing, $easing);
+ transition: background var(--#{$prefix}transition-duration)
+ var(--#{$prefix}transition-timing);
&--checked {
background-color: var(
diff --git a/src/assets/scss/components/_icon.scss b/src/assets/scss/components/_icon.scss
index d9c57b4..bd5cc90 100644
--- a/src/assets/scss/components/_icon.scss
+++ b/src/assets/scss/components/_icon.scss
@@ -21,8 +21,8 @@ $icon-spin-duration: 2s !default;
display: inline-flex;
justify-content: center;
transition:
- transform $speed-slow $easing,
- opacity $speed $easing;
+ transform $animation-speed $animation-timing,
+ opacity $animation-speed-fast $animation-timing;
@each $name, $value in $sizes {
&--#{$name} {
diff --git a/src/assets/scss/components/_input.scss b/src/assets/scss/components/_input.scss
index f06f821..0067ee5 100644
--- a/src/assets/scss/components/_input.scss
+++ b/src/assets/scss/components/_input.scss
@@ -7,7 +7,7 @@ $input-border-style: solid !default;
$input-border-width: 1px !default;
$input-border-radius: var(--#{$prefix}base-border-radius) !default;
$input-rounded-border-radius: var(
- --#{$prefix}base-rounded-border-radius
+ --#{$prefix}base-border-radius-rounded
) !default;
$input-box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.1) !default;
$input-color: #363636 !default;
diff --git a/src/assets/scss/components/_modal.scss b/src/assets/scss/components/_modal.scss
index b49658c..4344454 100644
--- a/src/assets/scss/components/_modal.scss
+++ b/src/assets/scss/components/_modal.scss
@@ -3,7 +3,7 @@ $modal-content-background-color: var(--#{$prefix}white) !default;
$modal-content-border-radius: var(--#{$prefix}base-border-radius) !default;
$modal-overlay-background-color: hsla(0, 0%, 4%, 0.86) !default;
$modal-close-border-radius: var(
- --#{$prefix}base-rounded-border-radius
+ --#{$prefix}base-border-radius-rounded
) !default;
$modal-close-right: 20px !default;
$modal-close-top: 20px !default;
diff --git a/src/assets/scss/components/_notification.scss b/src/assets/scss/components/_notification.scss
index cf2cbb3..b7079c6 100644
--- a/src/assets/scss/components/_notification.scss
+++ b/src/assets/scss/components/_notification.scss
@@ -8,7 +8,7 @@ $notification-margin-bottom: 1.5rem !default;
$notification-animantion: append-animate 0.3s linear !default;
$notification-color: var(--#{$prefix}white) !default;
$notification-close-border-radius: var(
- --#{$prefix}base-rounded-border-radius
+ --#{$prefix}base-border-radius-rounded
) !default;
$notification-close-right: 0.5rem !default;
$notification-close-top: 0.5rem !default;
diff --git a/src/assets/scss/components/_pagination.scss b/src/assets/scss/components/_pagination.scss
index ab96677..6e83558 100644
--- a/src/assets/scss/components/_pagination.scss
+++ b/src/assets/scss/components/_pagination.scss
@@ -16,7 +16,7 @@ $pagination-link-min-width: 2.25em !default;
$pagination-link-padding: 0.5em 0.5em !default;
$pagination-margin: -0.25rem !default;
$pagination-rounded-border-radius: var(
- --#{$prefix}base-rounded-border-radius
+ --#{$prefix}base-border-radius-rounded
) !default;
/* @docs */
diff --git a/src/assets/scss/components/_radio.scss b/src/assets/scss/components/_radio.scss
index eed5ab3..67a0013 100644
--- a/src/assets/scss/components/_radio.scss
+++ b/src/assets/scss/components/_radio.scss
@@ -52,9 +52,8 @@ $radio-line-height: 1.25 !default;
border-radius: 50%;
cursor: pointer;
background-repeat: no-repeat;
- transition-property: background;
- transition-duration: var(--#{$prefix}transition-duration, $speed-slow);
- transition-timing-function: var(--#{$prefix}transition-timing, $easing);
+ transition: background var(--#{$prefix}transition-duration)
+ var(--#{$prefix}transition-timing);
background-image: url(svg_radio_empty($radio-active-background-color));
&--checked {
diff --git a/src/assets/scss/components/_select.scss b/src/assets/scss/components/_select.scss
index 107733d..d6f66d7 100644
--- a/src/assets/scss/components/_select.scss
+++ b/src/assets/scss/components/_select.scss
@@ -7,7 +7,7 @@ $select-border-width: 1px !default;
$select-border-style: solid !default;
$select-border-radius: var(--#{$prefix}base-border-radius) !default;
$select-rounded-border-radius: var(
- --#{$prefix}base-rounded-border-radius
+ --#{$prefix}base-border-radius-rounded
) !default;
$select-box-shadow: none !default;
$select-color: #363636 !default;
diff --git a/src/assets/scss/components/_sidebar.scss b/src/assets/scss/components/_sidebar.scss
index 0487c5b..524f636 100644
--- a/src/assets/scss/components/_sidebar.scss
+++ b/src/assets/scss/components/_sidebar.scss
@@ -42,17 +42,15 @@ $sidebar-zindex: 100 !default;
// position
&--right,
&--left {
- transition: width;
- transition-duration: var(--#{$prefix}transition-duration, $speed-slow);
- transition-timing-function: var(--#{$prefix}transition-timing, $easing);
+ transition: width var(--#{$prefix}transition-duration)
+ var(--#{$prefix}transition-timing);
width: var(--#{$prefix}sidebar-width, $sidebar-width);
}
&--top,
&--bottom {
- transition: height;
- transition-duration: var(--#{$prefix}transition-duration, $speed-slow);
- transition-timing-function: var(--#{$prefix}transition-timing, $easing);
+ transition: height var(--#{$prefix}transition-duration)
+ var(--#{$prefix}transition-timing);
height: var(--#{$prefix}sidebar-width, $sidebar-width);
}
@@ -92,15 +90,8 @@ $sidebar-zindex: 100 !default;
&-expand {
&:hover {
- transition: width;
- transition-duration: var(
- --#{$prefix}transition-duration,
- $speed-slow
- );
- transition-timing-function: var(
- --#{$prefix}transition-timing,
- $easing
- );
+ transition: width var(--#{$prefix}transition-duration)
+ var(--#{$prefix}transition-timing);
width: var(--#{$prefix}sidebar-width, $sidebar-width);
}
}
diff --git a/src/assets/scss/components/_slider.scss b/src/assets/scss/components/_slider.scss
index 7384c99..7b658b5 100644
--- a/src/assets/scss/components/_slider.scss
+++ b/src/assets/scss/components/_slider.scss
@@ -6,7 +6,7 @@ $slider-margin: 1em 0 !default;
$slider-mark-size: 0.75rem !default;
$slider-font-size: var(--#{$prefix}base-font-size) !default;
$slider-rounded-borded-radius: var(
- --#{$prefix}base-rounded-border-radius
+ --#{$prefix}base-border-radius-rounded
) !default;
$slider-thumb-background: var(--#{$prefix}white) !default;
$slider-thumb-border: 1px solid var(--#{$prefix}grey-light) !default;
diff --git a/src/assets/scss/components/_steps.scss b/src/assets/scss/components/_steps.scss
index d359074..8f70b72 100644
--- a/src/assets/scss/components/_steps.scss
+++ b/src/assets/scss/components/_steps.scss
@@ -8,7 +8,7 @@ $steps-marker-color: var(--#{$prefix}primary-invert) !default;
$steps-marker-border: 0.2em solid #fff !default;
$steps-marker-font-weight: 700 !default;
$steps-marker-rounded-border-radius: var(
- --#{$prefix}base-rounded-border-radius
+ --#{$prefix}base-border-radius-rounded
) !default;
$steps-color: var(--#{$prefix}grey-lighter) !default;
$steps-previous-color: var(--#{$prefix}primary) !default;
@@ -227,9 +227,8 @@ $steps-details-title-font-weight: 600 !default;
&--animated {
.o-steps__divider {
- transition-property: background;
- transition-duration: var(--#{$prefix}transition-duration, $speed-slow);
- transition-timing-function: var(--#{$prefix}transition-timing, $easing);
+ transition: background var(--#{$prefix}transition-duration)
+ var(--#{$prefix}transition-timing);
}
}
diff --git a/src/assets/scss/components/_switch.scss b/src/assets/scss/components/_switch.scss
index 75232c8..ff61819 100644
--- a/src/assets/scss/components/_switch.scss
+++ b/src/assets/scss/components/_switch.scss
@@ -13,7 +13,7 @@ $switch-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
$switch-margin-label: 0.5em !default;
$switch-padding: 0.2em !default;
$switch-rounded-border-radius: var(
- --#{$prefix}base-rounded-border-radius
+ --#{$prefix}base-border-radius-rounded
) !default;
$switch-width: 2.75 * 1em !default;
/* @docs */
@@ -84,9 +84,8 @@ $switch-width: 2.75 * 1em !default;
$switch-action-background
);
box-shadow: var(--#{$prefix}switch-box-shadow, $switch-box-shadow);
- transition-property: transform;
- transition-duration: var(--#{$prefix}transition-duration, $speed-slow);
- transition-timing-function: var(--#{$prefix}transition-timing, $easing);
+ transition: transform var(--#{$prefix}transition-duration)
+ var(--#{$prefix}transition-timing);
will-change: transform;
transform-origin: left;
}
@@ -104,9 +103,8 @@ $switch-width: 2.75 * 1em !default;
padding: var(--#{$prefix}switch-padding, $switch-padding);
background: var(--#{$prefix}switch-background, $switch-background);
border-radius: var(--#{$prefix}switch-border-radius, $switch-border-radius);
- transition-property: background;
- transition-duration: var(--#{$prefix}transition-duration, $speed-slow);
- transition-timing-function: var(--#{$prefix}transition-timing, $easing);
+ transition: background var(--#{$prefix}transition-duration)
+ var(--#{$prefix}transition-timing);
&--checked {
background: var(
diff --git a/src/assets/scss/components/_table.scss b/src/assets/scss/components/_table.scss
index 039a61b..51db86b 100644
--- a/src/assets/scss/components/_table.scss
+++ b/src/assets/scss/components/_table.scss
@@ -59,7 +59,7 @@ $table-th-padding: 0.5em 0.75em !default;
}
&__wrapper {
- transition: opacity $speed $easing;
+ transition: opacity $animation-speed-fast $animation-timing;
position: relative;
&--sticky-header {
diff --git a/src/assets/scss/utils/_animations.scss b/src/assets/scss/utils/_animations.scss
index 8452df6..34f4c73 100644
--- a/src/assets/scss/utils/_animations.scss
+++ b/src/assets/scss/utils/_animations.scss
@@ -111,7 +111,7 @@
// Fade
.fade-enter-active,
.fade-leave-active {
- transition: opacity $speed-slow $easing;
+ transition: opacity $animation-speed $animation-timing;
}
.fade-enter,
@@ -123,10 +123,10 @@
// Zoom In
.zoom-in-enter-active,
.zoom-in-leave-active {
- transition: opacity $speed-slow $easing;
+ transition: opacity $animation-speed $animation-timing;
.animation-content {
- transition: transform $speed-slow $easing;
+ transition: transform $animation-speed $animation-timing;
}
}
@@ -143,10 +143,10 @@
// Zoom Out
.zoom-out-enter-active,
.zoom-out-leave-active {
- transition: opacity $speed-slow $easing;
+ transition: opacity $animation-speed $animation-timing;
.animation-content {
- transition: transform $speed-slow $easing;
+ transition: transform $animation-speed $animation-timing;
}
}
@@ -165,7 +165,8 @@
.slide-next-leave-active,
.slide-prev-enter-active,
.slide-prev-leave-active {
- transition: transform $speed-slower cubic-bezier(0.785, 0.135, 0.15, 0.86);
+ transition: transform $animation-speed-fast
+ cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slide-prev-leave-to,
@@ -188,7 +189,8 @@
.slide-down-leave-active,
.slide-up-enter-active,
.slide-up-leave-active {
- transition: transform $speed-slower cubic-bezier(0.785, 0.135, 0.15, 0.86);
+ transition: transform $animation-speed-fast
+ cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slide-down-enter,
@@ -208,11 +210,11 @@
}
.slide-enter-active {
- transition: $speed-slow $easing;
+ transition: $animation-speed $animation-timing;
}
.slide-leave-active {
- transition: $speed-slow $easing;
+ transition: $animation-speed $animation-timing;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
diff --git a/src/assets/scss/utils/_root.scss b/src/assets/scss/utils/_root.scss
index 5249ada..ba7c3b4 100644
--- a/src/assets/scss/utils/_root.scss
+++ b/src/assets/scss/utils/_root.scss
@@ -28,8 +28,6 @@
--#{$prefix}size-#{$name}: #{$size};
}
- //TODO: rename remove base prefix
-
// define base variables
--#{$prefix}base-font-family: #{$base-font-family};
--#{$prefix}base-font-size: #{$base-font-size};
@@ -37,11 +35,10 @@
--#{$prefix}base-line-height: #{$base-line-height};
--#{$prefix}base-border-radius: #{$base-border-radius};
- //TODO: rename base-rounded-border-radius => base-border-radius-rounded
- --#{$prefix}base-rounded-border-radius: #{$base-rounded-border-radius};
+ --#{$prefix}base-border-radius-rounded: #{$base-border-radius-rounded};
--#{$prefix}base-line-height: #{$base-line-height};
--#{$prefix}base-disabled-opacity: #{$base-disabled-opacity};
- //TODO add (fe. checkbox)
- // var(--#{$prefix}transition-duration, $speed-slow);
+ --#{$prefix}transition-duration: #{$animation-speed};
+ --#{$prefix}transition-timing: #{$animation-timing};
}
diff --git a/src/assets/scss/utils/_variables.scss b/src/assets/scss/utils/_variables.scss
index 8b3a495..30b7bf6 100644
--- a/src/assets/scss/utils/_variables.scss
+++ b/src/assets/scss/utils/_variables.scss
@@ -6,10 +6,9 @@
$prefix: "oruga-" !default;
// Animations
-$speed: 300ms !default;
-$speed-slow: 150ms !default;
-$speed-slower: 250ms !default;
-$easing: ease-out !default;
+$animation-speed: 150ms !default;
+$animation-speed-fast: 300ms !default;
+$animation-timing: ease-out !default;
// Font
$base-font-family:
@@ -36,11 +35,10 @@ $base-line-height: 1.5 !default;
// Base Style
$base-border-radius: 4px !default;
-$base-rounded-border-radius: 9999px !default;
+$base-border-radius-rounded: 9999px !default;
$base-line-height: 1.5 !default;
$base-disabled-opacity: 0.5 !default;
-// todo: check if maybe rename better
$control-border-width: 1px !default;
$control-height: 2.25em !default;
$control-padding-vertical: calc(0.375em - #{$control-border-width});
From eb5fe21c065aa41926a9f81a0f742091014d6a59 Mon Sep 17 00:00:00 2001
From: mm <25961416+mlmoravek@users.noreply.github.com>
Date: Tue, 9 Apr 2024 16:02:04 +0200
Subject: [PATCH 03/10] feat: update inputs (#23)
---
src/assets/scss/components/_checkbox.scss | 9 ++-
src/assets/scss/components/_input.scss | 6 +-
src/assets/scss/components/_radio.scss | 2 +
src/assets/scss/components/_select.scss | 21 +++----
src/assets/scss/components/_taginput.scss | 70 ++++++---------------
src/assets/scss/components/_timepicker.scss | 2 +-
src/assets/scss/utils/_variables.scss | 1 +
src/components/Notification.vue | 4 +-
src/components/Taginput.vue | 11 ++--
src/router/index.ts | 2 +-
10 files changed, 53 insertions(+), 75 deletions(-)
diff --git a/src/assets/scss/components/_checkbox.scss b/src/assets/scss/components/_checkbox.scss
index 6469f76..c89b54e 100644
--- a/src/assets/scss/components/_checkbox.scss
+++ b/src/assets/scss/components/_checkbox.scss
@@ -3,7 +3,9 @@
/* @docs */
$checkbox-active-background-color: var(--#{$prefix}primary) !default;
$checkbox-background-color: var(--#{$prefix}primary) !default;
+$checkbox-box-shadow: $control-box-shadow !default;
$checkbox-border-color: var(--#{$prefix}primary) !default;
+$checkbox-border-style: solid !default;
$checkbox-border-radius: var(--#{$prefix}base-border-radius) !default;
$checkbox-border-width: 2px !default;
$checkbox-checked-box-shadow-length: 0 0 0.5em !default;
@@ -64,6 +66,7 @@ $checkbox-line-height: 1.5 !default;
cursor: pointer;
background-repeat: no-repeat;
+ box-shadow: var(--#{$prefix}checkbox-box-shadow, $checkbox-box-shadow);
background-color: var(
--#{$prefix}checkbox-background-color,
$checkbox-background-color
@@ -80,7 +83,11 @@ $checkbox-line-height: 1.5 !default;
--#{$prefix}checkbox-border-color,
$checkbox-border-color
);
- border-style: solid;
+ border-style: var(
+ --#{$prefix}checkbox-border-style,
+ $checkbox-border-style
+ );
+
transition: background var(--#{$prefix}transition-duration)
var(--#{$prefix}transition-timing);
diff --git a/src/assets/scss/components/_input.scss b/src/assets/scss/components/_input.scss
index 0067ee5..7158876 100644
--- a/src/assets/scss/components/_input.scss
+++ b/src/assets/scss/components/_input.scss
@@ -9,15 +9,15 @@ $input-border-radius: var(--#{$prefix}base-border-radius) !default;
$input-rounded-border-radius: var(
--#{$prefix}base-border-radius-rounded
) !default;
-$input-box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.1) !default;
+$input-box-shadow: $control-box-shadow !default;
$input-color: #363636 !default;
$input-icon-zindex: 4 !default;
-$input-counter-font-size: 0.75rem !default;
-$input-counter-margin: 0.25rem 0 0 0.5rem !default;
$input-height: $control-height !default;
$input-line-height: var(--#{$prefix}base-line-height) !default;
$input-margin: 0 !default;
$input-padding: $control-padding-vertical $control-padding-horizontal !default;
+$input-counter-font-size: 0.75rem !default;
+$input-counter-margin: 0.25rem 0 0 0.5rem !default;
$input-textarea-max-height: 600px !default;
$input-textarea-min-height: 120px !default;
$input-textarea-padding: 0.625em !default;
diff --git a/src/assets/scss/components/_radio.scss b/src/assets/scss/components/_radio.scss
index 67a0013..fd80001 100644
--- a/src/assets/scss/components/_radio.scss
+++ b/src/assets/scss/components/_radio.scss
@@ -4,6 +4,7 @@
$radio-active-background-color: var(--#{$prefix}primary) !default;
$radio-checked-box-shadow-length: 0 0 0.5em !default;
$radio-checked-box-shadow-opacity: 0.8 !default;
+$radio-box-shadow: $control-box-shadow !default;
$radio-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
$radio-label-padding: 0 0 0 0.5em !default;
$radio-margin-sibiling: 0.5em !default;
@@ -54,6 +55,7 @@ $radio-line-height: 1.25 !default;
background-repeat: no-repeat;
transition: background var(--#{$prefix}transition-duration)
var(--#{$prefix}transition-timing);
+ box-shadow: var(--#{$prefix}radio-box-shadow, $radio-box-shadow);
background-image: url(svg_radio_empty($radio-active-background-color));
&--checked {
diff --git a/src/assets/scss/components/_select.scss b/src/assets/scss/components/_select.scss
index d6f66d7..999e36d 100644
--- a/src/assets/scss/components/_select.scss
+++ b/src/assets/scss/components/_select.scss
@@ -3,23 +3,21 @@
/* @docs */
$select-background-color: #fff !default;
$select-border-color: var(--#{$prefix}grey-lighter) !default;
-$select-border-width: 1px !default;
$select-border-style: solid !default;
+$select-border-width: 1px !default;
$select-border-radius: var(--#{$prefix}base-border-radius) !default;
$select-rounded-border-radius: var(
--#{$prefix}base-border-radius-rounded
) !default;
-$select-box-shadow: none !default;
+$select-box-shadow: $control-box-shadow !default;
$select-color: #363636 !default;
$select-icon-zindex: 4 !default;
$select-height: $control-height !default;
-$select-arrow-size: 1rem !default;
$select-line-height: var(--#{$prefix}base-line-height) !default;
$select-margin: 0 !default;
-$select-max-width: 100% !default;
-$select-width: 100% !default;
-$select-placeholder-opacity: var(--#{$prefix}base-disabled-opacity) !default;
$select-padding: $control-padding-vertical $control-padding-horizontal !default;
+$select-arrow-size: 1rem !default;
+$select-placeholder-opacity: var(--#{$prefix}base-disabled-opacity) !default;
/* @docs */
@function svg_arrow($color) {
@@ -50,9 +48,8 @@ $select-padding: $control-padding-vertical $control-padding-horizontal !default;
cursor: pointer;
justify-content: flex-start;
align-items: center;
- font-size: var(--#{$prefix}base-font-size, $base-font-size);
- max-width: var(--#{$prefix}select-max-width, $select-max-width);
- width: var(--#{$prefix}select-width, $select-width);
+
+ box-shadow: var(--#{$prefix}select-box-shadow, $select-box-shadow);
background-color: var(
--#{$prefix}select-background-color,
$select-background-color
@@ -62,11 +59,11 @@ $select-padding: $control-padding-vertical $control-padding-horizontal !default;
border-style: var(--#{$prefix}select-border-style, $select-border-style);
border-radius: var(--#{$prefix}select-border-radius, $select-border-radius);
color: var(--#{$prefix}select-color, $select-color);
- margin: var(--#{$prefix}select-margin, $select-margin);
- box-shadow: var(--#{$prefix}select-box-shadow, $select-box-shadow);
+ font-size: var(--#{$prefix}base-font-size, $base-font-size);
+ height: var(--#{$prefix}select-height, $select-height);
line-height: var(--#{$prefix}select-line-height, $select-line-height);
padding: var(--#{$prefix}select-padding, $select-padding);
- height: var(--#{$prefix}select-height, $select-height);
+ margin: var(--#{$prefix}select-margin, $select-margin);
&-arrow {
background-image: url(svg_arrow($select-color));
diff --git a/src/assets/scss/components/_taginput.scss b/src/assets/scss/components/_taginput.scss
index 0e4ee7b..7989d1c 100644
--- a/src/assets/scss/components/_taginput.scss
+++ b/src/assets/scss/components/_taginput.scss
@@ -1,24 +1,12 @@
@use "sass:list";
/* @docs */
-$taginput-background-color: $input-background-color !default;
-$taginput-height: calc(2em - 1px) !default;
-$taginput-padding: calc(0.275em - 1px) 0 0 !default;
-$taginput-border-color: var(--#{$prefix}grey-lighter) !default;
-$taginput-border-style: solid !default;
-$taginput-border-width: 1px !default;
-$taginput-border-radius: var(--#{$prefix}base-border-radius) !default;
-$taginput-color: #363636 !default;
-$taginput-line-height: var(--#{$prefix}base-line-height) !default;
-$taginput-box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.1) !default;
-$taginput-max-width: 100% !default;
-$taginput-width: 100% !default;
$taginput-counter-font-size: 0.75rem !default;
$taginput-counter-margin: 0.25rem 0 0 0.5rem !default;
$taginput-item-background-color: var(--#{$prefix}primary) !default;
$taginput-item-color: var(--#{$prefix}primary-invert) !default;
$taginput-item-border-radius: var(--#{$prefix}base-border-radius) !default;
-$taginput-item-margin: 0 0 0 0.275em !default;
+$taginput-item-margin: 0.275em !default;
$taginput-item-padding: 0 0.75em 0 0.75em !default;
$taginput-margin-icon-to-text: 0.1875em !default;
/* @docs */
@@ -28,38 +16,21 @@ $taginput-margin-icon-to-text: 0.1875em !default;
&__container {
display: flex;
- align-items: center;
- justify-content: flex-start;
- position: relative;
- vertical-align: top;
flex-wrap: wrap;
- max-width: var(--#{$prefix}taginput-max-width, $taginput-max-width);
- width: var(--#{$prefix}taginput-width, $taginput-width);
- padding: var(--#{$prefix}taginput-padding, $taginput-padding);
- color: var(--#{$prefix}taginput-color, $taginput-color);
- font-size: var(--#{$prefix}base-font-size, $base-font-size);
- line-height: var(--#{$prefix}taginput-line-height, $taginput-line-height);
+
+ box-shadow: var(--#{$prefix}input-box-shadow, $input-box-shadow);
background-color: var(
- --#{$prefix}taginput-background-color,
- $taginput-background-color
- );
- border-color: var(
- --#{$prefix}taginput-border-color,
- $taginput-border-color
- );
- border-style: var(
- --#{$prefix}taginput-border-style,
- $taginput-border-style
+ --#{$prefix}input-background-color,
+ $input-background-color
);
- border-width: var(
- --#{$prefix}taginput-border-width,
- $taginput-border-width
- );
- border-radius: var(
- --#{$prefix}taginput-border-radius,
- $taginput-border-radius
- );
- box-shadow: var(--#{$prefix}taginput-box-shadow, $taginput-box-shadow);
+ border-color: var(--#{$prefix}input-border-color, $input-border-color);
+ border-style: var(--#{$prefix}input-border-style, $input-border-style);
+ border-width: var(--#{$prefix}input-border-width, $input-border-width);
+ border-radius: var(--#{$prefix}input-border-radius, $input-border-radius);
+ color: var(--#{$prefix}input-color, $input-color);
+ font-size: var(--#{$prefix}base-font-size, $base-font-size);
+ line-height: var(--#{$prefix}input-line-height, $input-line-height);
+ margin: var(--#{$prefix}input-margin, $input-margin);
// size variants
@each $name, $value in $sizes {
@@ -69,20 +40,19 @@ $taginput-margin-icon-to-text: 0.1875em !default;
}
}
+ &__autocomplete {
+ flex-grow: 1;
+ flex-shrink: 1;
+ width: auto;
+ }
+
&__input {
border: none;
box-shadow: none;
-
- &:focus {
- box-shadow: none;
- }
}
&__item {
display: inline-flex;
- justify-content: center;
- align-items: center;
- position: relative;
margin: var(--#{$prefix}taginput-item-margin, $taginput-item-margin);
padding: var(--#{$prefix}taginput-item-padding, $taginput-item-padding);
color: var(--#{$prefix}taginput-item-color, $taginput-item-color);
@@ -95,8 +65,6 @@ $taginput-margin-icon-to-text: 0.1875em !default;
$taginput-item-border-radius
);
- @include side-flex-gap($taginput-margin-icon-to-text);
-
// color variants
@each $name, $pair in $colors {
$color: list.nth($pair, 1);
diff --git a/src/assets/scss/components/_timepicker.scss b/src/assets/scss/components/_timepicker.scss
index 3945cff..4c15fb7 100644
--- a/src/assets/scss/components/_timepicker.scss
+++ b/src/assets/scss/components/_timepicker.scss
@@ -58,11 +58,11 @@ $timepicker-separator-font-weight: 600 !default;
--#{$prefix}timepicker-select-line-height,
$timepicker-select-line-height
);
+ color: var(--#{$prefix}timepicker-select-color, $timepicker-select-color);
padding: var(
--#{$prefix}timepicker-select-padding,
$timepicker-select-padding
);
- color: var(--#{$prefix}timepicker-select-color, $timepicker-select-color);
}
&__select-placeholder {
diff --git a/src/assets/scss/utils/_variables.scss b/src/assets/scss/utils/_variables.scss
index 30b7bf6..504d59c 100644
--- a/src/assets/scss/utils/_variables.scss
+++ b/src/assets/scss/utils/_variables.scss
@@ -43,6 +43,7 @@ $control-border-width: 1px !default;
$control-height: 2.25em !default;
$control-padding-vertical: calc(0.375em - #{$control-border-width});
$control-padding-horizontal: calc(0.625em - #{$control-border-width});
+$control-box-shadow: inset 0 1px 2px hsla(0, 0%, 4%, 0.1);
// Sizes
$sizes: (
diff --git a/src/components/Notification.vue b/src/components/Notification.vue
index dbb6db6..82681b2 100644
--- a/src/components/Notification.vue
+++ b/src/components/Notification.vue
@@ -3,7 +3,7 @@ import { useOruga } from "@oruga-ui/oruga-next";
function simple() {
const oruga = useOruga();
- oruga.notification.open("Something happened");
+ oruga.notification.open({ mesage: "Something happened" });
}
function success() {
const oruga = useOruga();
@@ -35,7 +35,7 @@ function danger() {
ariaCloseLabel: "Close",
onClose: () => {
const oruga = useOruga();
- oruga.notification.open("Custom notification closed!");
+ oruga.notification.open({ message: "Custom notification closed!" });
},
});
}
diff --git a/src/components/Taginput.vue b/src/components/Taginput.vue
index f234e7e..cfb7f16 100644
--- a/src/components/Taginput.vue
+++ b/src/components/Taginput.vue
@@ -412,6 +412,7 @@ function getFilteredTags(text: string) {
icon="tag"
placeholder="Add an item"
keep-first
+ expanded
@typing="getFilteredTags" />
@@ -437,17 +438,19 @@ function getFilteredTags(text: string) {
Limits
-
+
-
+
diff --git a/src/router/index.ts b/src/router/index.ts
index c13eebd..e18da93 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -27,7 +27,7 @@ const routes: Array = [
...components.map(({ name, link }: any) => ({
path: link,
name: name,
- component: () => import("../components" + link + ".vue"),
+ component: () => import(/* @vite-ignore */ "../components" + link + ".vue"),
})),
];
From d7009b033ae7d764880e7f0e650d8fd8ed9bda42 Mon Sep 17 00:00:00 2001
From: mm <25961416+mlmoravek@users.noreply.github.com>
Date: Tue, 9 Apr 2024 16:09:25 +0200
Subject: [PATCH 04/10] feat: add select-arrow-color var (#24)
---
src/assets/scss/components/_select.scss | 3 ++-
src/components/Select.vue | 34 +++++++++++++++++++++++++
2 files changed, 36 insertions(+), 1 deletion(-)
diff --git a/src/assets/scss/components/_select.scss b/src/assets/scss/components/_select.scss
index 999e36d..f8e58a7 100644
--- a/src/assets/scss/components/_select.scss
+++ b/src/assets/scss/components/_select.scss
@@ -16,6 +16,7 @@ $select-height: $control-height !default;
$select-line-height: var(--#{$prefix}base-line-height) !default;
$select-margin: 0 !default;
$select-padding: $control-padding-vertical $control-padding-horizontal !default;
+$select-arrow-color: $select-color !default;
$select-arrow-size: 1rem !default;
$select-placeholder-opacity: var(--#{$prefix}base-disabled-opacity) !default;
/* @docs */
@@ -66,7 +67,7 @@ $select-placeholder-opacity: var(--#{$prefix}base-disabled-opacity) !default;
margin: var(--#{$prefix}select-margin, $select-margin);
&-arrow {
- background-image: url(svg_arrow($select-color));
+ background-image: url(svg_arrow($select-arrow-color));
background-repeat: no-repeat;
background-size: var(--#{$prefix}select-arrow-size, $select-arrow-size);
background-position: calc(
diff --git a/src/components/Select.vue b/src/components/Select.vue
index 3d1eda5..8782d60 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -99,6 +99,40 @@ const selectedOptions = ref([]);
+
+ Variants
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Sizes
From 5305012f6f7eeb15cfad9b2b55c7e24b0c716823 Mon Sep 17 00:00:00 2001
From: mm <25961416+mlmoravek@users.noreply.github.com>
Date: Fri, 17 May 2024 14:32:23 +0200
Subject: [PATCH 05/10] fix(field): mobile display (#26)
---
src/assets/scss/components/_field.scss | 13 ++++---------
1 file changed, 4 insertions(+), 9 deletions(-)
diff --git a/src/assets/scss/components/_field.scss b/src/assets/scss/components/_field.scss
index ea68745..6f9f973 100644
--- a/src/assets/scss/components/_field.scss
+++ b/src/assets/scss/components/_field.scss
@@ -122,16 +122,11 @@ $field-horizontal-label-margin: 0 1.5rem 0 0 !default;
}
&--mobile {
+ &.o-field--horizontal,
+ .o-field__horizontal-label,
.o-field__horizontal-body {
- all: unset;
- }
-
- &.o-field--horizontal {
- all: unset;
- }
-
- .o-field__horizontal-label {
- all: unset;
+ display: block;
+ text-align: inherit;
}
}
}
From 34fad20bb6390271b018f42455b94ae461ba0863 Mon Sep 17 00:00:00 2001
From: mm <25961416+mlmoravek@users.noreply.github.com>
Date: Fri, 17 May 2024 14:36:40 +0200
Subject: [PATCH 06/10] feat(radio): use mask for radio button svgs (#27)
---
src/assets/scss/components/_checkbox.scss | 15 ++++---
src/assets/scss/components/_radio.scss | 54 ++++++++++++++---------
2 files changed, 41 insertions(+), 28 deletions(-)
diff --git a/src/assets/scss/components/_checkbox.scss b/src/assets/scss/components/_checkbox.scss
index c89b54e..1595159 100644
--- a/src/assets/scss/components/_checkbox.scss
+++ b/src/assets/scss/components/_checkbox.scss
@@ -52,11 +52,9 @@ $checkbox-line-height: 1.5 !default;
&__input {
width: var(--#{$prefix}checkbox-size, $checkbox-size);
height: var(--#{$prefix}checkbox-size, $checkbox-size);
- outline: none;
margin: 0;
+ outline: none;
vertical-align: top;
- background-position: center;
- background-size: contain;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
@@ -64,13 +62,19 @@ $checkbox-line-height: 1.5 !default;
print-color-adjust: exact;
flex-shrink: 0;
cursor: pointer;
- background-repeat: no-repeat;
box-shadow: var(--#{$prefix}checkbox-box-shadow, $checkbox-box-shadow);
background-color: var(
--#{$prefix}checkbox-background-color,
$checkbox-background-color
);
+ background-position: center;
+ background-size: contain;
+ background-repeat: no-repeat;
+
+ transition: background var(--#{$prefix}transition-duration)
+ var(--#{$prefix}transition-timing);
+
border-radius: var(
--#{$prefix}checkbox-border-radius,
$checkbox-border-radius
@@ -88,9 +92,6 @@ $checkbox-line-height: 1.5 !default;
$checkbox-border-style
);
- transition: background var(--#{$prefix}transition-duration)
- var(--#{$prefix}transition-timing);
-
&--checked {
background-color: var(
--#{$prefix}checkbox-active-background-color,
diff --git a/src/assets/scss/components/_radio.scss b/src/assets/scss/components/_radio.scss
index fd80001..1542205 100644
--- a/src/assets/scss/components/_radio.scss
+++ b/src/assets/scss/components/_radio.scss
@@ -1,7 +1,7 @@
@use "sass:list";
/* @docs */
-$radio-active-background-color: var(--#{$prefix}primary) !default;
+$radio-active-background-color: $primary !default;
$radio-checked-box-shadow-length: 0 0 0.5em !default;
$radio-checked-box-shadow-opacity: 0.8 !default;
$radio-box-shadow: $control-box-shadow !default;
@@ -13,18 +13,25 @@ $radio-line-height: 1.25 !default;
/* @docs */
// filled svg calculation
-@function svg_radio_fill($color, $background-color: "transparent") {
- $start: '