mirrors/vue2-datepicker
2
0
Fork 0
mirror of https://github.com/tenrok/vue2-datepicker.git synced 2026-05-17 03:39:40 +03:00
Code Activity

feat: export the scss for custom style

Browse Source
This commit is contained in:
mengxiong10
2019-11-21 14:25:39 +08:00
parent ba35c021e4
commit 09a4d8f8bf
8 changed files with 168 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+2
View File
@@ -10,3 +10,5 @@ node_modules
/locale
/index.*
/scss
README.md
+13
View File
@@ -57,6 +57,19 @@ $ npm install vue2-datepicker --save
</template>
```
## Theme
If your project uses SCSS, you can change the default style variables.
To create a scss file. e.g. `datepicker.scss`:
```scss
$default-color: #555;
$primary-color: #1284e7;
@import '~vue2-datepicker/scss/index.scss';
```
## Internationalization
The default language of v3.x is English. If you need other locales.
README.zh-CN.md
+14 -1
View File
@@ -29,7 +29,20 @@
$ npm install vue2-datepicker --save
```
## Usage
## 主题
如果你的项目使用了 SCSS, 你可以改变默认的变量.
创建一个新的文件. e.g. `datepicker.scss`:
```scss
$default-color: #555;
$primary-color: #1284e7;
@import '~vue2-datepicker/scss/index.scss';
```
## 用法
```html
<script>
package-lock.json
Generated
+72 -49
View File
@@ -1512,8 +1512,7 @@
"version": "7.0.7",
"resolved": "https://registry.npm.taobao.org/@types/babel-types/download/@types/babel-types-7.0.7.tgz",
"integrity": "sha1-Zn6xZA6AOUNgKAVXN9K5mG7jNuM=",
"dev": true,
"optional": true
"dev": true
},
"@types/babel__core": {
"version": "7.1.3",
@@ -1561,7 +1560,6 @@
"resolved": "https://registry.npm.taobao.org/@types/babylon/download/@types/babylon-6.16.5.tgz",
"integrity": "sha1-HFZB22nrjN83jt0ltL53VL7rSLQ=",
"dev": true,
"optional": true,
"requires": {
"@types/babel-types": "*"
}
@@ -1938,7 +1936,6 @@
"resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
"integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
"dev": true,
"optional": true,
"requires": {
"kind-of": "^3.0.2",
"longest": "^1.0.1",
@@ -1950,7 +1947,6 @@
"resolved": "https://registry.npm.taobao.org/kind-of/download/kind-of-3.2.2.tgz",
"integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
"dev": true,
"optional": true,
"requires": {
"is-buffer": "^1.1.5"
}
@@ -3474,7 +3470,6 @@
"resolved": "https://registry.npm.taobao.org/constantinople/download/constantinople-3.1.2.tgz",
"integrity": "sha1-1F7XJPV9PRBQABen06iJwTga5kc=",
"dev": true,
"optional": true,
"requires": {
"@types/babel-types": "^7.0.0",
"@types/babylon": "^6.16.2",
@@ -3974,6 +3969,58 @@
"sha.js": "^2.4.8"
}
},
"cross-env": {
"version": "6.0.3",
"resolved": "https://registry.npm.taobao.org/cross-env/download/cross-env-6.0.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcross-env%2Fdownload%2Fcross-env-6.0.3.tgz",
"integrity": "sha1-Qla3HkmzpAY3oM5wdopu9ccq6UE=",
"dev": true,
"requires": {
"cross-spawn": "^7.0.0"
},
"dependencies": {
"cross-spawn": {
"version": "7.0.1",
"resolved": "https://registry.npm.taobao.org/cross-spawn/download/cross-spawn-7.0.1.tgz",
"integrity": "sha1-CrVihuD3wk4VPQTMKqAn5DqaXRQ=",
"dev": true,
"requires": {
"path-key": "^3.1.0",
"shebang-command": "^2.0.0",
"which": "^2.0.1"
}
},
"path-key": {
"version": "3.1.0",
"resolved": "https://registry.npm.taobao.org/path-key/download/path-key-3.1.0.tgz",
"integrity": "sha1-maENhwqAO91e5vBHDljfzS+aVNM=",
"dev": true
},
"shebang-command": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/shebang-command/download/shebang-command-2.0.0.tgz?cache=0&sync_timestamp=1567781622888&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fshebang-command%2Fdownload%2Fshebang-command-2.0.0.tgz",
"integrity": "sha1-zNCvT4g1+9wmW4JGGq8MNmY/NOo=",
"dev": true,
"requires": {
"shebang-regex": "^3.0.0"
}
},
"shebang-regex": {
"version": "3.0.0",
"resolved": "https://registry.npm.taobao.org/shebang-regex/download/shebang-regex-3.0.0.tgz",
"integrity": "sha1-rhbxZE2HPsrYQ7AwexQzYtTEIXI=",
"dev": true
},
"which": {
"version": "2.0.2",
"resolved": "https://registry.npm.taobao.org/which/download/which-2.0.2.tgz?cache=0&sync_timestamp=1574116898193&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwhich%2Fdownload%2Fwhich-2.0.2.tgz",
"integrity": "sha1-fGqN0KY2oDJ+ELWckobu6T8/UbE=",
"dev": true,
"requires": {
"isexe": "^2.0.0"
}
}
}
},
"cross-spawn": {
"version": "6.0.5",
"resolved": "https://registry.npm.taobao.org/cross-spawn/download/cross-spawn-6.0.5.tgz",
@@ -5810,8 +5857,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
@@ -5832,14 +5878,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -5854,20 +5898,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
@@ -5984,8 +6025,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
@@ -5997,7 +6037,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -6012,7 +6051,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -6020,14 +6058,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -6046,7 +6082,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -6127,8 +6162,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
@@ -6140,7 +6174,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@@ -6226,8 +6259,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -6263,7 +6295,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -6283,7 +6314,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -6327,14 +6357,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
}
}
},
@@ -6982,7 +7010,7 @@
},
"html-tags": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/html-tags/download/html-tags-2.0.0.tgz",
"resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz",
"integrity": "sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=",
"dev": true
},
@@ -8402,8 +8430,7 @@
"version": "1.0.2",
"resolved": "https://registry.npm.taobao.org/js-stringify/download/js-stringify-1.0.2.tgz",
"integrity": "sha1-Fzb939lyTyijaCrcYjCufk6Weds=",
"dev": true,
"optional": true
"dev": true
},
"js-tokens": {
"version": "4.0.0",
@@ -9041,7 +9068,7 @@
},
"lodash.kebabcase": {
"version": "4.1.1",
"resolved": "https://registry.npm.taobao.org/lodash.kebabcase/download/lodash.kebabcase-4.1.1.tgz",
"resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
"integrity": "sha1-hImxyw0p/4gZXM7KRI/21swpXDY=",
"dev": true
},
@@ -9195,8 +9222,7 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
"integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=",
"dev": true,
"optional": true
"dev": true
},
"loose-envify": {
"version": "1.4.0",
@@ -11581,8 +11607,7 @@
"version": "1.3.3",
"resolved": "https://registry.npm.taobao.org/pug-error/download/pug-error-1.3.3.tgz",
"integrity": "sha1-80L7AIdS1YA0wYXeA2At2f/hX6Y=",
"dev": true,
"optional": true
"dev": true
},
"pug-filters": {
"version": "3.1.1",
@@ -11702,8 +11727,7 @@
"version": "2.0.5",
"resolved": "https://registry.npm.taobao.org/pug-runtime/download/pug-runtime-2.0.5.tgz",
"integrity": "sha1-baeXbDa/IvaOczw1kkDYrnoylTo=",
"dev": true,
"optional": true
"dev": true
},
"pug-strip-comments": {
"version": "1.0.4",
@@ -11719,8 +11743,7 @@
"version": "1.1.8",
"resolved": "https://registry.npm.taobao.org/pug-walk/download/pug-walk-1.1.8.tgz",
"integrity": "sha1-tAj2fyeRL4wh2i9FtyMMS9Kl6no=",
"dev": true,
"optional": true
"dev": true
},
"pump": {
"version": "3.0.0",
@@ -13418,7 +13441,7 @@
},
"svg-tags": {
"version": "1.0.0",
"resolved": "https://registry.npm.taobao.org/svg-tags/download/svg-tags-1.0.0.tgz",
"resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
"integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
"dev": true
},
package.json
+8 -6
View File
@@ -8,18 +8,19 @@
},
"files": [
"/locale",
"/index.*"
"/index.*",
"/scss"
],
"version": "3.0.2",
"scripts": {
"dev": "parcel ./example/dev.html --open --port 2235",
"build:index": "NODE_ENV=production rollup -c",
"build:locale": "NODE_ENV=production rollup -c rollup.locale.config.js",
"build:css": "sass --style=compressed --no-source-map src/style/index.scss index.css && postcss index.css --use autoprefixer -o index.css",
"build:index": "cross-env NODE_ENV=production rollup -c",
"build:locale": "cross-env NODE_ENV=production rollup -c rollup.locale.config.js",
"build:css": "sass --style=compressed --no-source-map src/style/index.scss index.css && postcss index.css --use autoprefixer -o index.css --no-map && cp -R src/style scss",
"build": "npm run lint && npm run test && npm run clean && npm run build:index && npm run build:css && npm run build:locale",
"clean": "rimraf locale index.*",
"clean": "rimraf scss locale index.*",
"lint": "eslint src/**/*.{js,vue}",
"deploy:build": "NODE_ENV=production parcel build ./example/index.html --public-url ./ --out-dir _site --no-source-maps --no-minify",
"deploy:build": "cross-env NODE_ENV=production parcel build ./example/index.html --public-url ./ --out-dir _site --no-source-maps --no-minify",
"deploy": "bash build/gh-pages-deploy.sh",
"format": "prettier --write src/**/*",
"test": "jest",
@@ -70,6 +71,7 @@
"conventional-changelog-cli": "^2.0.25",
"core-js": "^3.3.5",
"coveralls": "^3.0.7",
"cross-env": "^6.0.3",
"eslint": "^6.2.2",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-config-prettier": "^6.1.0",
src/style/btn.scss
+2
View File
@@ -1,3 +1,5 @@
@import './var.scss';
.mx-btn {
box-sizing: border-box;
line-height: 1;
src/style/index.scss
+31 -28
View File
@@ -15,10 +15,6 @@
fill: currentColor;
overflow: hidden;
}
&.disabled {
opacity: 0.7;
cursor: not-allowed;
}
}
.mx-datepicker-range {
@@ -53,21 +49,21 @@
padding-left: 10px;
font-size: 14px;
line-height: 1.4;
color: #555;
color: $input-color;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid $input-border-color;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
&:hover,
&:focus {
border-color: #40a9ff;
border-color: $input-hover-border-color;
}
&:disabled,
&.disabled {
color: rgba(0, 0, 0, 0.25);
background-color: #f5f5f5;
border-color: #ccc;
color: $disabled-color;
background-color: $disabled-background-color;
border-color: $input-border-color;
cursor: not-allowed;
}
&:focus {
@@ -195,19 +191,21 @@
.cell {
cursor: pointer;
&:hover {
background-color: $hover-color;
color: $calendar-hover-color;
background-color: $calendar-hover-background-color;
}
&.active {
color: #fff;
background-color: $primary-color;
color: $calendar-active-color;
background-color: $calendar-active-background-color;
}
&.in-range {
background-color: $range-color;
color: $calendar-in-range-color;
background-color: $calendar-in-range-background-color;
}
&.disabled {
cursor: not-allowed;
color: #ccc;
background-color: #f3f3f3;
color: $disabled-color;
background-color: $disabled-background-color;
}
}
}
@@ -216,13 +214,14 @@
.mx-date-row {
cursor: pointer;
&:hover {
background-color: $hover-color;
background-color: $calendar-hover-background-color;
}
&.mx-active-week {
background-color: $range-color;
background-color: $calendar-in-range-background-color;
}
.cell {
&:hover {
color: inherit;
background-color: transparent;
}
&.active {
@@ -265,8 +264,8 @@
.today {
color: mix(#fff, $primary-color, 10%);
}
.not-current-month {
color: #ddd;
.cell.not-current-month {
color: #ccc;
}
}
@@ -328,16 +327,18 @@
height: 32px;
line-height: 32px;
&:hover {
background-color: $hover-color;
color: $time-hover-color;
background-color: $time-hover-background-color;
}
&.active {
color: $primary-color;
color: $time-active-color;
background-color: $time-active-background-color;
font-weight: 700;
}
&.disabled {
cursor: not-allowed;
color: #ccc;
background-color: #f3f3f3;
color: $disabled-color;
background-color: $disabled-background-color;
}
}
}
@@ -348,15 +349,17 @@
font-size: 14px;
line-height: 20px;
&:hover {
background-color: $hover-color;
color: $time-hover-color;
background-color: $time-hover-background-color;
}
&.active {
color: $primary-color;
color: $time-active-color;
background-color: $time-active-background-color;
font-weight: 700;
}
&.disabled {
cursor: not-allowed;
color: #ccc;
background-color: #f3f3f3;
color: $disabled-color;
background-color: $disabled-background-color;
}
}
src/style/var.scss
+26 -5
View File
@@ -1,5 +1,26 @@
$default-color: #73879c;
$primary-color: #1284e7;
$range-color: #dff2fd;
$hover-color: #eaf8fe;
$border-color: #e8e8e8;
$default-color: #73879c !default;
$primary-color: #1284e7 !default;
$input-border-color: #ccc !default;
$input-color: #555 !default;
$input-hover-border-color: #409aff !default;
$disabled-color: #ccc !default;
$disabled-background-color: #f3f3f3 !default;
$border-color: #e8e8e8 !default;
$calendar-active-color: #fff !default;
$calendar-active-background-color: $primary-color !default;
$calendar-hover-color: $default-color !default;
$calendar-hover-background-color: mix(#fff, $calendar-active-background-color, 95%) !default;
$calendar-in-range-color: $default-color !default;
$calendar-in-range-background-color: mix(#fff, $calendar-active-background-color, 85%) !default;
$time-active-color: $primary-color !default;
$time-active-background-color: transparent !default;
$time-hover-color: $default-color !default;
$time-hover-background-color: mix(#fff, $calendar-active-background-color, 95%) !default;