Merge pull request #722 from perry-C/master

feat(@omiu/slider): hover effect

components/slider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omiu/slider",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "main": "dist/index.es.js",
   "exports": {
     ".": "./dist/index.es.js"
@@ -61,8 +61,11 @@
     "@open-wc/testing": "^2.5.33",
     "@types/node": "^16.4.7",
     "@web/test-runner": "^0.13.13",
+    "css-loader": "^6.2.0",
+    "node-sass": "^6.0.1",
     "node-watch": "^0.7.1",
     "sass": "^1.36.0",
+    "sass-loader": "^12.1.0",
     "typescript": "^4.3.2",
     "vite": "^2.4.3"
   },

components/slider/src/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["index.scss","../../common/theme.scss"],"names":[],"mappings":"AAsBA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAgCF;EACE;EACA;;AAEE;EACE;;AAUJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAQA;EACE;IACE;;;;AAON;EACE;;;AAGF;EACE;;;AAKE;EApGJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCVU;EDWV;EACA;EACA;EACA;EA2FM;EACA;EACA;;AA3FN;EACE;;AAEF;EACE;;AA0FI;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AA2EI;EApGJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCVU;EDWV;EACA;EACA;EACA;EA2FM;EACA;EACA;;AA3FN;EACE;;AAEF;EACE;;AA0FI;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AA2EI;EApGJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCVU;EDWV;EACA;EACA;EACA;EA2FM;EACA;EACA;;AA3FN;EACE;;AAEF;EACE;;AA0FI;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;;AA2FI;EAIE;;AAJF;EAEI;EAEF;;AAIE;EAEI;;AAFJ;EAEI;;AAFJ;EAEI;;;AAVR;EAIE;;AAIE;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;AAXN;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;AAXN;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;;AA7Cd;EACE;;;AAGF;EACE;;;AAKE;EApGJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCVU;EDWV;EACA;EACA;EACA;EA2FM;EACA;EACA;;AA3FN;EACE;;AAEF;EACE;;AA0FI;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AA2EI;EApGJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCVU;EDWV;EACA;EACA;EACA;EA2FM;EACA;EACA;;AA3FN;EACE;;AAEF;EACE;;AA0FI;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AA2EI;EApGJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCVU;EDWV;EACA;EACA;EACA;EA2FM;EACA;EACA;;AA3FN;EACE;;AAEF;EACE;;AA0FI;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;;AA2FI;EAIE;;AAJF;EAEI;EAEF;;AAIE;EAEI;;AAFJ;EAEI;;AAFJ;EAEI;;;AAVR;EAIE;;AAIE;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;AAXN;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;AAXN;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;;AA7Cd;EACE;;;AAGF;EACE;;;AAKE;EApGJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCVU;EDWV;EACA;EACA;EACA;EA2FM;EACA;EACA;;AA3FN;EACE;;AAEF;EACE;;AA0FI;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AA2EI;EApGJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCVU;EDWV;EACA;EACA;EACA;EA2FM;EACA;EACA;;AA3FN;EACE;;AAEF;EACE;;AA0FI;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AA2EI;EApGJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBCVU;EDWV;EACA;EACA;EACA;EA2FM;EACA;EACA;;AA3FN;EACE;;AAEF;EACE;;AA0FI;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;AAkFM;EArFN;EACA;EACA;EACA;;;AA2FI;EAIE;;AAJF;EAEI;EAEF;;AAIE;EAEI;;AAFJ;EAEI;;AAFJ;EAEI;;;AAVR;EAIE;;AAIE;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;AAXN;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;AAXN;EAKI;EACA;;AACA;EACE;;AAEF;EACE;;;AAYZ;EACE;;AAEF;EACE;EACA;;AALF;EACE;;AAEF;EACE;EACA;;AALF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE","file":"index.css"}

components/slider/src/index.scss

@@ -1,7 +1,7 @@
 @use 'sass:math';
 @use "sass:map";
 
-@import '../../common/theme.scss';
+@import '@omiu/common/theme.scss';
 
 $shapes: 'round' 'square' 'progress';
 $sizes: 'small' 'normal' 'large';
@@ -26,7 +26,9 @@ $track-sizes: (
   --percent1: 0%;
   --percent2: 0%;
   --lower-color: var(--o-primary);
+  --lower-color-active: var(--o-primary-active);
   --upper-color: #f0f0f0;
+  --upper-color-active: #d9d9d9;
 }
 
 @mixin thumb {
@@ -46,9 +48,6 @@ $track-sizes: (
   &:active {
     box-shadow: 0 0 0 5px var(--o-primary-fade-more, $o-primary-fade-more);
   }
-  &:hover {
-    border-color: var(--o-primary-active, $o-primary-active);
-  }
 }
 
 @mixin track {
@@ -61,17 +60,6 @@ $track-sizes: (
 .slider-container {
   position: relative;
   width: 100%;
-  &:active {
-    & .slider-track {
-      background: linear-gradient(
-        to right,
-        var(--upper-color) var(--percent1),
-        var(--o-primary-active, $o-primary-active) var(--percent1),
-        var(--o-primary-active, $o-primary-active) var(--percent2),
-        var(--upper-color) var(--percent2)
-      );
-    }
-  }
 
   & .o-slider {
     -webkit-appearance: none;
@@ -117,6 +105,24 @@ $track-sizes: (
       }
     }
   }
+
+  &:hover,
+  &:active {
+    & .slider-track {
+      background: linear-gradient(
+        to right,
+        var(--upper-color-active, $o-primary) var(--percent1),
+        var(--lower-color-active, $o-primary-active) var(--percent1),
+        var(--lower-color-active, $o-primary-active) var(--percent2),
+        var(--upper-color-active, $o-primary) var(--percent2)
+      );
+    }
+    @each $thumb in $browser-thumbs {
+      & .o-slider::#{$thumb} {
+        border-color: var(--o-primary-active, $o-primary-active);
+      }
+    }
+  }
 }
 
 @each $size in $sizes {
@@ -176,16 +182,19 @@ $track-sizes: (
 }
 
 .is-disabled {
+  --lower-color: #bfbfbf;
+  --lower-color-active: #8c8c8c;
+  --upper-color-active: #d9d9d9;
+  --o-primary-active: #bfbfbf;
+
+  cursor: not-allowed;
+  & .o-slider {
+    pointer-events: none;
+  }
   @each $thumb in $browser-thumbs {
-    & .o-slider {
-      pointer-events: none;
-    }
     & .o-slider::#{$thumb} {
       pointer-events: none;
       border-color: #c0c4cc;
     }
   }
-  & .slider-track {
-    --lower-color: #c0c4cc;
-  }
 }

components/slider/src/index.tsx

@@ -3,8 +3,6 @@ import * as css from './index.scss'
 import '@omiu/tooltip'
 // import Omiu from '@omiu/common'
 
-import '@omiu/input'
-
 interface Props {
   min: number
   max: number
@@ -14,7 +12,7 @@ interface Props {
   size?: 'small' | 'normal' | 'large'
   range?: 'single' | 'double'
   orient?: 'vertical' | 'horizontal'
-  shape: 'square' | 'round'
+  shape?: 'square' | 'round'
   tooltip?: boolean
   disabled?: boolean
   reversed?: boolean