feat: update inputs (#23)

oruga-ui · Apr 9, 2024 · eb5fe21 · eb5fe21
1 parent 3278308
commit eb5fe21
Show file tree

Hide file tree

Showing 10 changed files with 53 additions and 75 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -412,6 +412,7 @@ function getFilteredTags(text: string) {
         icon="tag"
         placeholder="Add an item"
         keep-first
+        expanded
         @typing="getFilteredTags" />
     </o-field>
 
@@ -437,17 +438,19 @@ function getFilteredTags(text: string) {
     <h3>Limits</h3>
 
     <o-field label="Limited to 10 characters">
-      <o-taginput maxlength="10" :model-value="['Oruga', 'Vue', 'CSS']" />
+      <o-taginput :maxlength="10" :model-value="['Oruga', 'Vue', 'CSS']" />
     </o-field>
 
     <o-field label="Limited to 5 tags">
-      <o-taginput maxitems="5" :model-value="['One', 'Two', 'Three', 'Four']" />
+      <o-taginput
+        :maxitems="5"
+        :model-value="['One', 'Two', 'Three', 'Four']" />
     </o-field>
 
     <o-field label="Limited to 10 characters and 5 tags">
       <o-taginput
-        maxlength="10"
-        maxitems="5"
+        :maxlength="10"
+        :maxitems="5"
         :model-value="['Red', 'Green', 'Blue', 'White']" />
     </o-field>
   </section>

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -27,7 +27,7 @@ const routes: Array<RouteRecordRaw> = [
   ...components.map(({ name, link }: any) => ({
     path: link,
     name: name,
-    component: () => import("../components" + link + ".vue"),
+    component: () => import(/* @vite-ignore */ "../components" + link + ".vue"),
   })),
 ];