test(slider): added basic tests for slider
This commit is contained in:
perry-C
parent
262e3b61ec
commit
a28c452b8e
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@omiu/slider",
|
||||
"version": "0.0.11",
|
||||
"version": "0.0.12",
|
||||
"main": "dist/index.es.js",
|
||||
"exports": {
|
||||
".": "./dist/index.es.js"
|
||||
|
|
@ -19,9 +19,9 @@
|
|||
"build:scss": "sass src/index.scss src/index.css",
|
||||
"watch": "sass --watch src/index.scss src/index.css --no-source-map",
|
||||
"pretest": "yarn build",
|
||||
"test": "web-test-runner \"test/*.js\" --node-resolve",
|
||||
"test": "web-test-runner \"test/*.js\" --node-resolve --puppeteer",
|
||||
"docs": "node ./scripts/docs-gen.js",
|
||||
"test:watch": "web-test-runner \"test/*.test.js\" --node-resolve --watch"
|
||||
"test:watch": "web-test-runner \"test/*.test.js\" --node-resolve --watch --puppeteer"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
@ -51,9 +51,10 @@
|
|||
"homepage": "http://omijs.org",
|
||||
"dependencies": {
|
||||
"@omiu/common": "latest",
|
||||
"omi": "latest",
|
||||
"@omiu/input": "0.0.12",
|
||||
"@omiu/tooltip": "0.0.1",
|
||||
"@omiu/input": "0.0.12"
|
||||
"@web/test-runner-puppeteer": "^0.10.1",
|
||||
"omi": "latest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@open-wc/testing": "^2.5.33",
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
@use 'sass:math';
|
||||
:host {
|
||||
display: -ms-grid;
|
||||
display: grid; }
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.slider-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 50px; }
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.slider-container .slider-track {
|
||||
width: 100%;
|
||||
|
|
@ -18,7 +19,9 @@
|
|||
bottom: 0;
|
||||
outline: none;
|
||||
margin: auto;
|
||||
z-index: -1; }
|
||||
z-index: -1;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.slider-container .o-slider {
|
||||
-webkit-appearance: none;
|
||||
|
|
@ -31,77 +34,24 @@
|
|||
position: absolute;
|
||||
z-index: 1;
|
||||
background: transparent;
|
||||
pointer-events: none; }
|
||||
.slider-container .o-slider:focus {
|
||||
outline: none; }
|
||||
.slider-container .o-slider::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
height: 4px; }
|
||||
.slider-container .o-slider::-moz-range-track {
|
||||
-moz-appearance: none;
|
||||
height: 4px; }
|
||||
.slider-container .o-slider::-ms-track {
|
||||
appearance: none;
|
||||
height: 4px; }
|
||||
.slider-container .o-slider::-webkit-slider-thumb {
|
||||
top: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: -9px;
|
||||
border: 2px solid #07c160;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
-webkit-appearance: none; }
|
||||
.slider-container .o-slider::-webkit-slider-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1); }
|
||||
.slider-container .o-slider::-webkit-slider-thumb:hover {
|
||||
border-color: #059048; }
|
||||
.slider-container .o-slider::-moz-range-thumb {
|
||||
top: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: -9px;
|
||||
border: 2px solid #07c160;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
-webkit-appearance: none; }
|
||||
.slider-container .o-slider::-moz-range-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1); }
|
||||
.slider-container .o-slider::-moz-range-thumb:hover {
|
||||
border-color: #059048; }
|
||||
.slider-container .o-slider::-ms-thumb {
|
||||
top: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: -9px;
|
||||
border: 2px solid #07c160;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
appearance: none; }
|
||||
.slider-container .o-slider::-ms-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1); }
|
||||
.slider-container .o-slider::-ms-thumb:hover {
|
||||
border-color: #059048; }
|
||||
|
||||
.is-round .slider-track {
|
||||
border-radius: 8px; }
|
||||
|
||||
.is-round .o-slider::-webkit-slider-thumb {
|
||||
pointer-events: none;
|
||||
}
|
||||
.slider-container .o-slider:focus {
|
||||
outline: none;
|
||||
}
|
||||
.slider-container .o-slider::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.slider-container .o-slider::-moz-range-track {
|
||||
-moz-appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.slider-container .o-slider::-ms-track {
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
}
|
||||
.slider-container .o-slider::-webkit-slider-thumb {
|
||||
top: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
|
@ -109,19 +59,21 @@
|
|||
z-index: 2;
|
||||
margin-top: -9px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
border-radius: 50%;
|
||||
-webkit-appearance: none; }
|
||||
.is-round .o-slider::-webkit-slider-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1); }
|
||||
.is-round .o-slider::-webkit-slider-thumb:hover {
|
||||
border-color: #059048; }
|
||||
|
||||
.is-round .o-slider::-moz-range-thumb {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.slider-container .o-slider::-webkit-slider-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.slider-container .o-slider::-webkit-slider-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.slider-container .o-slider::-moz-range-thumb {
|
||||
top: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
|
@ -129,19 +81,21 @@
|
|||
z-index: 2;
|
||||
margin-top: -9px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
border-radius: 50%;
|
||||
-webkit-appearance: none; }
|
||||
.is-round .o-slider::-moz-range-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1); }
|
||||
.is-round .o-slider::-moz-range-thumb:hover {
|
||||
border-color: #059048; }
|
||||
|
||||
.is-round .o-slider::-ms-thumb {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.slider-container .o-slider::-moz-range-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.slider-container .o-slider::-moz-range-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.slider-container .o-slider::-ms-thumb {
|
||||
top: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
|
@ -149,20 +103,98 @@
|
|||
z-index: 2;
|
||||
margin-top: -9px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
appearance: none;
|
||||
}
|
||||
.slider-container .o-slider::-ms-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.slider-container .o-slider::-ms-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
|
||||
.is-square .slider-track {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.is-square .o-slider::-webkit-slider-thumb {
|
||||
top: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: -9px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
appearance: none; }
|
||||
.is-round .o-slider::-ms-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1); }
|
||||
.is-round .o-slider::-ms-thumb:hover {
|
||||
border-color: #059048; }
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
border-radius: 0%;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.is-square .o-slider::-webkit-slider-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-square .o-slider::-webkit-slider-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.is-square .o-slider::-moz-range-thumb {
|
||||
top: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: -9px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
border-radius: 0%;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.is-square .o-slider::-moz-range-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-square .o-slider::-moz-range-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.is-square .o-slider::-ms-thumb {
|
||||
top: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: -9px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
box-shadow: 0;
|
||||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
border-radius: 0%;
|
||||
appearance: none;
|
||||
}
|
||||
.is-square .o-slider::-ms-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-square .o-slider::-ms-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
|
||||
.is-disabled .slider-track {
|
||||
border-color: #c0c4cc; }
|
||||
border-color: #c0c4cc;
|
||||
}
|
||||
|
||||
.is-disabled .o-slider::-webkit-slider-thumb {
|
||||
top: 50%;
|
||||
|
|
@ -172,6 +204,7 @@
|
|||
z-index: 2;
|
||||
margin-top: -9px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
|
|
@ -179,12 +212,14 @@
|
|||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
pointer-events: none;
|
||||
border-color: #c0c4cc;
|
||||
-webkit-appearance: none; }
|
||||
.is-disabled .o-slider::-webkit-slider-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1); }
|
||||
.is-disabled .o-slider::-webkit-slider-thumb:hover {
|
||||
border-color: #059048; }
|
||||
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.is-disabled .o-slider::-webkit-slider-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-disabled .o-slider::-webkit-slider-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.is-disabled .o-slider::-moz-range-thumb {
|
||||
top: 50%;
|
||||
width: 14px;
|
||||
|
|
@ -193,6 +228,7 @@
|
|||
z-index: 2;
|
||||
margin-top: -9px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
|
|
@ -200,12 +236,14 @@
|
|||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
pointer-events: none;
|
||||
border-color: #c0c4cc;
|
||||
-webkit-appearance: none; }
|
||||
.is-disabled .o-slider::-moz-range-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1); }
|
||||
.is-disabled .o-slider::-moz-range-thumb:hover {
|
||||
border-color: #059048; }
|
||||
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.is-disabled .o-slider::-moz-range-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-disabled .o-slider::-moz-range-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.is-disabled .o-slider::-ms-thumb {
|
||||
top: 50%;
|
||||
width: 14px;
|
||||
|
|
@ -214,6 +252,7 @@
|
|||
z-index: 2;
|
||||
margin-top: -9px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
|
|
@ -221,14 +260,18 @@
|
|||
transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
pointer-events: none;
|
||||
border-color: #c0c4cc;
|
||||
appearance: none; }
|
||||
.is-disabled .o-slider::-ms-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1); }
|
||||
.is-disabled .o-slider::-ms-thumb:hover {
|
||||
border-color: #059048; }
|
||||
appearance: none;
|
||||
}
|
||||
.is-disabled .o-slider::-ms-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-disabled .o-slider::-ms-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
|
||||
.is-large .slider-track {
|
||||
height: 6px; }
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.is-large .o-slider::-webkit-slider-thumb {
|
||||
top: 50%;
|
||||
|
|
@ -238,6 +281,7 @@
|
|||
z-index: 2;
|
||||
margin-top: -9px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
|
|
@ -246,12 +290,14 @@
|
|||
width: 25px;
|
||||
height: 25px;
|
||||
margin-top: -14.5px;
|
||||
-webkit-appearance: none; }
|
||||
.is-large .o-slider::-webkit-slider-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1); }
|
||||
.is-large .o-slider::-webkit-slider-thumb:hover {
|
||||
border-color: #059048; }
|
||||
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.is-large .o-slider::-webkit-slider-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-large .o-slider::-webkit-slider-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.is-large .o-slider::-moz-range-thumb {
|
||||
top: 50%;
|
||||
width: 14px;
|
||||
|
|
@ -260,6 +306,7 @@
|
|||
z-index: 2;
|
||||
margin-top: -9px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
|
|
@ -268,12 +315,14 @@
|
|||
width: 25px;
|
||||
height: 25px;
|
||||
margin-top: -14.5px;
|
||||
-webkit-appearance: none; }
|
||||
.is-large .o-slider::-moz-range-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1); }
|
||||
.is-large .o-slider::-moz-range-thumb:hover {
|
||||
border-color: #059048; }
|
||||
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.is-large .o-slider::-moz-range-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-large .o-slider::-moz-range-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.is-large .o-slider::-ms-thumb {
|
||||
top: 50%;
|
||||
width: 14px;
|
||||
|
|
@ -282,6 +331,7 @@
|
|||
z-index: 2;
|
||||
margin-top: -9px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
|
|
@ -290,15 +340,19 @@
|
|||
width: 25px;
|
||||
height: 25px;
|
||||
margin-top: -14.5px;
|
||||
appearance: none; }
|
||||
.is-large .o-slider::-ms-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1); }
|
||||
.is-large .o-slider::-ms-thumb:hover {
|
||||
border-color: #059048; }
|
||||
appearance: none;
|
||||
}
|
||||
.is-large .o-slider::-ms-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-large .o-slider::-ms-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
|
||||
.is-slim .slider-track {
|
||||
height: 2px;
|
||||
border-radius: 0%; }
|
||||
border-radius: 0%;
|
||||
}
|
||||
|
||||
.is-slim .o-slider::-webkit-slider-thumb {
|
||||
top: 50%;
|
||||
|
|
@ -308,6 +362,7 @@
|
|||
z-index: 2;
|
||||
margin-top: -9px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
|
|
@ -317,12 +372,14 @@
|
|||
height: 12px;
|
||||
margin-top: -8px;
|
||||
border-radius: 0%;
|
||||
-webkit-appearance: none; }
|
||||
.is-slim .o-slider::-webkit-slider-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1); }
|
||||
.is-slim .o-slider::-webkit-slider-thumb:hover {
|
||||
border-color: #059048; }
|
||||
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.is-slim .o-slider::-webkit-slider-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-slim .o-slider::-webkit-slider-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.is-slim .o-slider::-moz-range-thumb {
|
||||
top: 50%;
|
||||
width: 14px;
|
||||
|
|
@ -331,6 +388,7 @@
|
|||
z-index: 2;
|
||||
margin-top: -9px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
|
|
@ -340,12 +398,14 @@
|
|||
height: 12px;
|
||||
margin-top: -8px;
|
||||
border-radius: 0%;
|
||||
-webkit-appearance: none; }
|
||||
.is-slim .o-slider::-moz-range-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1); }
|
||||
.is-slim .o-slider::-moz-range-thumb:hover {
|
||||
border-color: #059048; }
|
||||
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.is-slim .o-slider::-moz-range-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-slim .o-slider::-moz-range-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
.is-slim .o-slider::-ms-thumb {
|
||||
top: 50%;
|
||||
width: 14px;
|
||||
|
|
@ -354,6 +414,7 @@
|
|||
z-index: 2;
|
||||
margin-top: -9px;
|
||||
border: 2px solid #07c160;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
|
|
@ -363,8 +424,13 @@
|
|||
height: 12px;
|
||||
margin-top: -8px;
|
||||
border-radius: 0%;
|
||||
appearance: none; }
|
||||
.is-slim .o-slider::-ms-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1); }
|
||||
.is-slim .o-slider::-ms-thumb:hover {
|
||||
border-color: #059048; }
|
||||
appearance: none;
|
||||
}
|
||||
.is-slim .o-slider::-ms-thumb:active {
|
||||
box-shadow: 0 0 0 5px rgba(7, 193, 96, 0.1);
|
||||
}
|
||||
.is-slim .o-slider::-ms-thumb:hover {
|
||||
border-color: #059048;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sourceRoot":"","sources":["index.scss","../../common/theme.scss"],"names":[],"mappings":"AAuEA;EACE;EACA;;;AAKF;EACE;EACA;EACA;;;AAGF;EAnBE;EACA;EACA;EACA,QA/Da;EAiFb;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIF;EACE;EACA,QA9GW;;AAiHb;EACE;EACA,QAnHW;;AAsHb;EACE;EACA,QAxHW;;AA2Hb;EAlHA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAwGE;;AArGF;EACE;;AAGF;EACE,cC7Be;;AD+HjB;EAtHA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EA4GE;;AAzGF;EACE;;AAGF;EACE,cC7Be;;ADmIjB;EA1HA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAgHE;;AA7GF;EACE;;AAGF;EACE,cC7Be;;;AD2InB;EACE;;;AAIA;EAvIA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAoBA;EAyGE;;AA1HF;EACE;;AAGF;EACE,cC7Be;;ADqJjB;EA5IA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAoBA;EA8GE;;AA/HF;EACE;;AAGF;EACE,cC7Be;;AD0JjB;EAjJA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAoBA;EAmHE;;AApIF;EACE;;AAGF;EACE,cC7Be;;;ADkKnB;EACE;;;AAIA;EA9JA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAcA;EACA;EAqIE;;AAjJF;EACE;;AAGF;EACE,cC7Be;;AD4KjB;EAnKA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAcA;EACA;EA0IE;;AAtJF;EACE;;AAGF;EACE,cC7Be;;ADgLjB;EAvKA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAcA;EACA;EA8IE;;AA1JF;EACE;;AAGF;EACE,cC7Be;;;ADuLnB;EACE;;;AAGA;EAlLA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAyBA;EACA;EACA;EA6IE;;AArKF;EACE;;AAGF;EACE,cC7Be;;ADgMjB;EAvLA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAyBA;EACA;EACA;EAkJE;;AA1KF;EACE;;AAGF;EACE,cC7Be;;ADoMjB;EA3LA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAyBA;EACA;EACA;EAsJE;;AA9KF;EACE;;AAGF;EACE,cC7Be;;;AD2MnB;EACE;EACA;;;AAGA;EAvMA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAgCA;EACA;EACA;EACA;EA0JE;;AA1LF;EACE;;AAGF;EACE,cC7Be;;ADqNjB;EA5MA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAgCA;EACA;EACA;EACA;EA+JE;;AA/LF;EACE;;AAGF;EACE,cC7Be;;ADyNjB;EAhNA;EACA,OAXa;EAYb,QAZa;EAab;EACA;EACA;EACA;EACA;EACA,kBCOU;EDNV;EACA;EACA;EACA;EAgCA;EACA;EACA;EACA;EAmKE;;AAnMF;EACE;;AAGF;EACE,cC7Be","file":"index.css"}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
@use 'sass:math';
|
||||
|
||||
@import '@omiu/common/theme.scss';
|
||||
@import '../../common/theme.scss';
|
||||
|
||||
$thumb-height: 14px;
|
||||
$track-height: 4px;
|
||||
|
|
@ -19,6 +19,7 @@ $hover-thumb-color: $o-primary-fade-lot;
|
|||
z-index: 2;
|
||||
margin-top: ($thumb-height / -2) - 2;
|
||||
border: 2px solid $o-primary;
|
||||
border-radius: 50%;
|
||||
background-color: $thumb-color;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
|
|
@ -41,25 +42,26 @@ $hover-thumb-color: $o-primary-fade-lot;
|
|||
border-color: #c0c4cc;
|
||||
}
|
||||
|
||||
@mixin thumb-round {
|
||||
@mixin thumb-square {
|
||||
@include thumb;
|
||||
border-radius: 50%;
|
||||
border-radius: 0%;
|
||||
}
|
||||
|
||||
@mixin thumb-large {
|
||||
@include thumb;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-top: (25px / -2) - 2;
|
||||
margin-top: math.div(25px, -2)- 2;
|
||||
}
|
||||
|
||||
@mixin thumb-slim {
|
||||
@include thumb;
|
||||
width: 20px;
|
||||
height: 12px;
|
||||
margin-top: (12px / -2) - 2;
|
||||
margin-top: math.div(12px, -2) - 2;
|
||||
border-radius: 0%;
|
||||
}
|
||||
|
||||
@mixin track {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
|
@ -88,6 +90,7 @@ $hover-thumb-color: $o-primary-fade-lot;
|
|||
outline: none;
|
||||
margin: auto;
|
||||
z-index: -1;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.slider-container .o-slider {
|
||||
|
|
@ -137,24 +140,25 @@ $hover-thumb-color: $o-primary-fade-lot;
|
|||
}
|
||||
}
|
||||
|
||||
//===============================round-slider=========================================
|
||||
//===============================square-slider=========================================
|
||||
|
||||
.is-round .slider-track {
|
||||
border-radius: 8px;
|
||||
.is-square .slider-track {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.is-round .o-slider {
|
||||
.is-square .o-slider {
|
||||
&::-webkit-slider-thumb {
|
||||
@include thumb-round;
|
||||
@include thumb-square;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include thumb-round;
|
||||
@include thumb-square;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
@include thumb-round;
|
||||
@include thumb-square;
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,20 +53,21 @@ export default class OSlider extends WeElement<Props> {
|
|||
|
||||
static css = css.default ? css.default : css
|
||||
|
||||
__$value1: number
|
||||
__$value2: number
|
||||
__$value1: any
|
||||
__$value2: any
|
||||
sliderMax: any
|
||||
|
||||
rootNode: HTMLElement
|
||||
slider1: HTMLInputElement
|
||||
slider2: HTMLInputElement
|
||||
sliderOneRef: HTMLInputElement
|
||||
sliderTwoRef: HTMLInputElement
|
||||
sliderTrack: HTMLElement
|
||||
sliderMax: number = this.props.max
|
||||
|
||||
lowerColor = '#07c160'
|
||||
upperColor = '#f0f0f0'
|
||||
|
||||
install() {
|
||||
this.__$value1 = this.props.value
|
||||
this.sliderMax = this.props.max
|
||||
this.props.range === 'double'
|
||||
? (this.__$value2 = this.props.second_value)
|
||||
: (this.__$value2 = null)
|
||||
|
|
@ -83,7 +84,7 @@ export default class OSlider extends WeElement<Props> {
|
|||
|
||||
installed() {
|
||||
this.fillColor(this.lowerColor, this.upperColor)
|
||||
let host = this.shadowRoot.host as HTMLElement
|
||||
let host = this.shadowRoot?.host as HTMLElement
|
||||
this.props.orient === 'vertical' &&
|
||||
(host.style.transform = 'rotate(-90deg)')
|
||||
this.props.reversed && (host.style.transform = 'rotate(180deg)')
|
||||
|
|
@ -93,7 +94,7 @@ export default class OSlider extends WeElement<Props> {
|
|||
return this.__$value1
|
||||
}
|
||||
|
||||
_onSetValue = (value) => {
|
||||
_onSetValue = (value: any) => {
|
||||
this.__$value1 = value
|
||||
this.props.value = value
|
||||
this.setAttribute('value', value)
|
||||
|
|
@ -103,7 +104,7 @@ export default class OSlider extends WeElement<Props> {
|
|||
return this.__$value2
|
||||
}
|
||||
|
||||
_onSetValue2 = (value) => {
|
||||
_onSetValue2 = (value: any) => {
|
||||
this.__$value2 = value
|
||||
this.props.second_value = value
|
||||
this.setAttribute('second_value', value)
|
||||
|
|
@ -121,9 +122,9 @@ export default class OSlider extends WeElement<Props> {
|
|||
this.fillColor('#059048', '#d9d9d9')
|
||||
}
|
||||
|
||||
handleS1Input = (evt) => {
|
||||
handleS1Input = (evt: any) => {
|
||||
evt.stopPropagation()
|
||||
const first_value = parseInt(this.slider1.value)
|
||||
const first_value = parseInt(this.sliderOneRef.value)
|
||||
if (first_value <= this.__$value2 || this.props.range === 'single') {
|
||||
// if the slider 1 has not exceeded slider2 or it is a single range slider
|
||||
// assign value straight away
|
||||
|
|
@ -137,9 +138,9 @@ export default class OSlider extends WeElement<Props> {
|
|||
this.update()
|
||||
}
|
||||
|
||||
handleS2Input = (evt) => {
|
||||
handleS2Input = (evt: any) => {
|
||||
evt.stopPropagation()
|
||||
const second_value = parseInt(this.slider2.value)
|
||||
const second_value = parseInt(this.sliderTwoRef.value)
|
||||
//we only have one case if slider two exists
|
||||
if (second_value >= this.__$value1) {
|
||||
this.__$value2 = second_value
|
||||
|
|
@ -148,7 +149,7 @@ export default class OSlider extends WeElement<Props> {
|
|||
this.update()
|
||||
}
|
||||
|
||||
handleS1Change = (evt) => {
|
||||
handleS1Change = (evt: any) => {
|
||||
if (this.props.range === 'single') {
|
||||
this.fire('change', this.__$value1)
|
||||
} else {
|
||||
|
|
@ -156,19 +157,19 @@ export default class OSlider extends WeElement<Props> {
|
|||
}
|
||||
}
|
||||
|
||||
handleS2Change = (evt) => {
|
||||
handleS2Change = (evt: any) => {
|
||||
this.fire('change', [this.__$value1, this.__$value2])
|
||||
}
|
||||
|
||||
fillColor = (lowerColor, upperColor) => {
|
||||
fillColor = (lowerColor: string, upperColor: string) => {
|
||||
let percent1 =
|
||||
this.props.range === 'double'
|
||||
? (this.__$value1 / this.props.max) * 100
|
||||
? (this.__$value1 / this.sliderMax) * 100
|
||||
: 0
|
||||
let percent2 =
|
||||
this.props.range === 'double'
|
||||
? (this.__$value2 / this.props.max) * 100
|
||||
: (this.__$value1 / this.props.max) * 100
|
||||
? (this.__$value2 / this.sliderMax) * 100
|
||||
: (this.__$value1 / this.sliderMax) * 100
|
||||
|
||||
if (this.props.disabled) {
|
||||
lowerColor = '#c0c4cc'
|
||||
|
|
@ -186,12 +187,47 @@ export default class OSlider extends WeElement<Props> {
|
|||
render(props) {
|
||||
const cls = extractClass(props, 'slider-container', {
|
||||
'is-vertical': props.orient === 'vertical',
|
||||
'is-round': props.shape === 'round',
|
||||
'is-square': props.shape === 'square',
|
||||
'is-large': props.size === 'large',
|
||||
'is-slim': props.size === 'slim',
|
||||
'is-disabled': props.disabled,
|
||||
})
|
||||
|
||||
const sliderOne = (
|
||||
<input
|
||||
class="o-slider"
|
||||
id="slider-1"
|
||||
type="range"
|
||||
min={props.min}
|
||||
max={props.max}
|
||||
step={props.step}
|
||||
value={this.__$value1}
|
||||
onInput={this.handleS1Input}
|
||||
onChange={this.handleS1Change}
|
||||
onMouseUp={this.handleMouseUp}
|
||||
ref={(e) => {
|
||||
this.sliderOneRef = e
|
||||
}}
|
||||
/>
|
||||
)
|
||||
|
||||
const sliderTwo = (
|
||||
<input
|
||||
class="o-slider"
|
||||
type="range"
|
||||
min={props.min}
|
||||
max={props.max}
|
||||
value={this.__$value2}
|
||||
onInput={this.handleS2Input}
|
||||
onChange={this.handleS2Change}
|
||||
onMouseUp={this.handleMouseUp}
|
||||
id="slider-2"
|
||||
ref={(e) => {
|
||||
this.sliderTwoRef = e
|
||||
}}
|
||||
/>
|
||||
)
|
||||
|
||||
return (
|
||||
<div
|
||||
{...cls}
|
||||
|
|
@ -199,7 +235,6 @@ export default class OSlider extends WeElement<Props> {
|
|||
this.rootNode = e
|
||||
}}
|
||||
>
|
||||
{/* =================================SINGLE=================================== */}
|
||||
{this.props.tooltip ? (
|
||||
<o-tooltip
|
||||
class="tooltip"
|
||||
|
|
@ -211,42 +246,12 @@ export default class OSlider extends WeElement<Props> {
|
|||
: this.__$value1
|
||||
}
|
||||
>
|
||||
<input
|
||||
class="o-slider"
|
||||
id="slider-1"
|
||||
type="range"
|
||||
min={props.min}
|
||||
max={props.max}
|
||||
step={props.step}
|
||||
value={this.__$value1}
|
||||
onInput={this.handleS1Input}
|
||||
onChange={this.handleS1Change}
|
||||
onMouseUp={this.handleMouseUp}
|
||||
ref={(e) => {
|
||||
this.slider1 = e
|
||||
}}
|
||||
/>
|
||||
{sliderOne}
|
||||
</o-tooltip>
|
||||
) : (
|
||||
/* ========================SINGLE-NO-TOOLTIP================================ */
|
||||
<input
|
||||
class="o-slider"
|
||||
type="range"
|
||||
min={props.min}
|
||||
max={props.max}
|
||||
value={this.__$value1}
|
||||
onInput={this.handleS1Input}
|
||||
onChange={this.handleS1Change}
|
||||
onMouseUp={this.handleMouseUp}
|
||||
id="slider-1"
|
||||
ref={(e) => {
|
||||
this.slider1 = e
|
||||
}}
|
||||
/>
|
||||
<div>{sliderOne}</div>
|
||||
)}
|
||||
|
||||
{/* =================================DOUBLE=================================== */}
|
||||
|
||||
{this.props.range === 'double' &&
|
||||
(this.props.tooltip ? (
|
||||
<o-tooltip
|
||||
|
|
@ -259,37 +264,10 @@ export default class OSlider extends WeElement<Props> {
|
|||
: this.__$value1
|
||||
}
|
||||
>
|
||||
<input
|
||||
class="o-slider"
|
||||
type="range"
|
||||
min={props.min}
|
||||
max={props.max}
|
||||
value={this.__$value2}
|
||||
onInput={this.handleS2Input}
|
||||
onChange={this.handleS2Change}
|
||||
onMouseUp={this.handleMouseUp}
|
||||
id="slider-2"
|
||||
ref={(e) => {
|
||||
this.slider2 = e
|
||||
}}
|
||||
/>
|
||||
{sliderTwo}
|
||||
</o-tooltip>
|
||||
) : (
|
||||
/* ========================DOUBLE-NO-TOOLTIP============================== */
|
||||
<input
|
||||
class="o-slider"
|
||||
type="range"
|
||||
min={props.min}
|
||||
max={props.max}
|
||||
value={this.__$value2}
|
||||
onInput={this.handleS2Input}
|
||||
onChange={this.handleS2Change}
|
||||
onMouseUp={this.handleMouseUp}
|
||||
id="slider-2"
|
||||
ref={(e) => {
|
||||
this.slider2 = e
|
||||
}}
|
||||
/>
|
||||
<div>{sliderTwo}</div>
|
||||
))}
|
||||
<div
|
||||
class="slider-track"
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
import { html, fixture, expect } from '@open-wc/testing'
|
||||
|
||||
import '../dist/index.es.js'
|
||||
|
||||
describe('o-counter ', () => {
|
||||
it('default prop', async () => {
|
||||
const el = await fixture(html`<o-counter></o-counter>`)
|
||||
expect(el.shadowRoot.innerHTML).to.equal(
|
||||
`<button>-</button><span>1</span><button>+</button>`
|
||||
)
|
||||
})
|
||||
|
||||
it('count prop', async () => {
|
||||
const el = await fixture(html`<o-counter count="2"></o-counter>`)
|
||||
expect(el.shadowRoot.innerHTML).to.equal(
|
||||
`<button>-</button><span>2</span><button>+</button>`
|
||||
)
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import { html, fixture, expect } from '@open-wc/testing'
|
||||
|
||||
import '../dist/index.es.js'
|
||||
|
||||
describe('Testing o-slider', () => {
|
||||
it('test single slider', async () => {
|
||||
const el = await fixture(html`<o-slider></o-slider>`)
|
||||
const single = el.shadowRoot.querySelector('#slider-1')
|
||||
expect(single).to.exist
|
||||
})
|
||||
|
||||
it('test double slider', async () => {
|
||||
const el = await fixture(html`<o-slider range="double"></o-slider>`)
|
||||
const double = el.shadowRoot.querySelector('#slider-2')
|
||||
expect(double).to.exist
|
||||
})
|
||||
it('test setting tool-tip', async () => {
|
||||
const el = await fixture(html`<o-slider tooltip></o-slider>`)
|
||||
const tooltip = el.shadowRoot.querySelector('o-tooltip')
|
||||
expect(tooltip).to.exist
|
||||
})
|
||||
it('test setting vertical', async () => {
|
||||
const el = await fixture(html`<o-slider orient="vertical"></o-slider>`)
|
||||
const div = el.shadowRoot.querySelector('div')
|
||||
const classList = div.getAttribute('class').split(' ')
|
||||
expect(classList.includes('is-vertical')).to.be.true
|
||||
})
|
||||
it('test setting disabled', async () => {
|
||||
const el = await fixture(html`<o-slider disabled></o-slider>`)
|
||||
const div = el.shadowRoot.querySelector('div')
|
||||
const classList = div.getAttribute('class').split(' ')
|
||||
expect(classList.includes('is-disabled')).to.be.true
|
||||
})
|
||||
it('test setting square', async () => {
|
||||
const el = await fixture(html`<o-slider shape="square"></o-slider>`)
|
||||
const div = el.shadowRoot.querySelector('div')
|
||||
const classList = div.getAttribute('class').split(' ')
|
||||
expect(classList.includes('is-square')).to.be.true
|
||||
})
|
||||
})
|
||||
|
|
@ -1,15 +1,12 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"module": "esnext",
|
||||
"lib": [
|
||||
"es2017",
|
||||
"dom",
|
||||
"dom.iterable"
|
||||
],
|
||||
"lib": ["es2017", "dom", "dom.iterable"],
|
||||
"declaration": true,
|
||||
"emitDeclarationOnly": true,
|
||||
"outDir": "./types",
|
||||
"strict": true,
|
||||
"strictPropertyInitialization": false,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": true,
|
||||
|
|
@ -19,11 +16,8 @@
|
|||
"experimentalDecorators": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"jsx": "react",
|
||||
"jsxFactory": "h",
|
||||
"jsxFactory": "h"
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx"
|
||||
],
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx"],
|
||||
"exclude": []
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,18 +8,18 @@ export default defineConfig({
|
|||
entry: resolve(__dirname, 'src/index.tsx'),
|
||||
name: 'index',
|
||||
formats: ['es'],
|
||||
fileName: (format) => `index.${format}.js`
|
||||
fileName: (format) => `index.${format}.js`,
|
||||
},
|
||||
rollupOptions: {
|
||||
external: /^omi/,
|
||||
input: {
|
||||
main: resolve(__dirname, 'index.html'),
|
||||
admin: resolve(__dirname, 'demo.html')
|
||||
}
|
||||
}
|
||||
// admin: resolve(__dirname, 'demo.html')
|
||||
},
|
||||
},
|
||||
},
|
||||
esbuild: {
|
||||
jsxFactory: 'h',
|
||||
jsxFragment: 'h.f'
|
||||
}
|
||||
jsxFragment: 'h.f',
|
||||
},
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue