Showing preview only (565K chars total). Download the full file or copy to clipboard to get everything.
Repository: museui/muse-ui
Branch: master
Commit: e799a4ff3854
Files: 315
Total size: 501.6 KB
Directory structure:
gitextract_cw61ox71/
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitattributes
├── .gitignore
├── .postcssrc.js
├── .travis.yml
├── README.md
├── commitlint.config.js
├── demo/
│ ├── App.vue
│ ├── bug-date-input.vue
│ ├── bug-popup.vue
│ ├── components/
│ │ └── Sidebar.js
│ ├── index.html
│ └── main.js
├── jest.config.js
├── package.json
├── rollup.config.js
├── src/
│ ├── Alert/
│ │ ├── Alert.js
│ │ ├── Alert.spec.js
│ │ ├── __snapshots__/
│ │ │ └── Alert.spec.js.snap
│ │ └── index.js
│ ├── AppBar/
│ │ ├── AppBar.js
│ │ ├── AppBar.spec.js
│ │ ├── __snapshots__/
│ │ │ └── AppBar.spec.js.snap
│ │ ├── index.js
│ │ └── theme.js
│ ├── AutoComplete/
│ │ ├── AutoComplete.js
│ │ ├── AutoComplete.spec.js
│ │ ├── __snapshots__/
│ │ │ └── AutoComplete.spec.js.snap
│ │ ├── filter.js
│ │ └── index.js
│ ├── Avatar/
│ │ ├── Avatar.js
│ │ ├── Avatar.spec.js
│ │ ├── __snapshots__/
│ │ │ └── Avatar.spec.js.snap
│ │ ├── index.js
│ │ └── theme.js
│ ├── Badge/
│ │ ├── Badge.js
│ │ ├── Badge.spec.js
│ │ ├── __snapshots__/
│ │ │ └── Badge.spec.js.snap
│ │ ├── index.js
│ │ └── theme.js
│ ├── BottomNav/
│ │ ├── BottomNav.js
│ │ ├── BottomNav.spec.js
│ │ ├── BottomNavItem.js
│ │ ├── __snapshots__/
│ │ │ └── BottomNav.spec.js.snap
│ │ ├── index.js
│ │ └── theme.js
│ ├── BottomSheet/
│ │ ├── BottomSheet.js
│ │ ├── BottomSheet.spec.js
│ │ ├── __snapshots__/
│ │ │ └── BottomSheet.spec.js.snap
│ │ ├── index.js
│ │ └── theme.js
│ ├── Breadcrumbs/
│ │ ├── Breadcrumbs.js
│ │ ├── Breadcrumbs.spec.js
│ │ ├── BreadcrumbsItem.js
│ │ ├── __snapshots__/
│ │ │ └── Breadcrumbs.spec.js.snap
│ │ ├── index.js
│ │ └── theme.js
│ ├── Button/
│ │ ├── Button.js
│ │ ├── Button.spec.js
│ │ ├── __snapshots__/
│ │ │ └── Button.spec.js.snap
│ │ ├── index.js
│ │ └── theme.js
│ ├── Card/
│ │ ├── Card.js
│ │ ├── CardHeader.js
│ │ ├── CardMedia.js
│ │ ├── CardTitle.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Carousel/
│ │ ├── Carousel.js
│ │ ├── CarouselItem.js
│ │ └── index.js
│ ├── Checkbox/
│ │ ├── Checkbox.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Chip/
│ │ ├── Chip.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── DataTable/
│ │ ├── DataTable.js
│ │ ├── index.js
│ │ ├── mixins/
│ │ │ ├── body.js
│ │ │ ├── colgroup.js
│ │ │ ├── footer.js
│ │ │ ├── header.js
│ │ │ └── progress.js
│ │ └── theme.js
│ ├── DateInput/
│ │ ├── Container.js
│ │ ├── DateInput.js
│ │ └── index.js
│ ├── Dialog/
│ │ ├── Dialog.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Divider/
│ │ ├── Divider.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Drawer/
│ │ ├── Drawer.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── ExpansionPanel/
│ │ ├── ExpansionPanel.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Form/
│ │ ├── Form.js
│ │ ├── FormItem.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Grid/
│ │ ├── Col.js
│ │ ├── Container.js
│ │ ├── Flex.js
│ │ ├── Row.js
│ │ ├── index.js
│ │ └── utils.js
│ ├── GridList/
│ │ ├── GridList.js
│ │ ├── GridTile.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Helpers/
│ │ └── index.js
│ ├── Icon/
│ │ ├── Icon.js
│ │ └── index.js
│ ├── List/
│ │ ├── List.js
│ │ ├── ListAction.js
│ │ ├── ListItem.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── LoadMore/
│ │ ├── InfiniteScroll.js
│ │ ├── LoadMore.js
│ │ ├── RefreshControl.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Menu/
│ │ ├── Menu.js
│ │ └── index.js
│ ├── Pagination/
│ │ ├── Pagination.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Paper/
│ │ ├── Paper.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Picker/
│ │ ├── DatePicker/
│ │ │ ├── DateDisplay.js
│ │ │ ├── DatePicker.js
│ │ │ ├── DayButton.js
│ │ │ ├── MonthDayView.js
│ │ │ ├── MonthView.js
│ │ │ ├── Toolbar.js
│ │ │ ├── YearButton.js
│ │ │ ├── YearView.js
│ │ │ ├── dateUtils.js
│ │ │ └── index.js
│ │ ├── DateTimePicker/
│ │ │ ├── DateTimeDisplay.js
│ │ │ ├── DateTimePicker.js
│ │ │ └── index.js
│ │ ├── TimePicker/
│ │ │ ├── Hours.js
│ │ │ ├── ListView.js
│ │ │ ├── Minutes.js
│ │ │ ├── Number.js
│ │ │ ├── Pointer.js
│ │ │ ├── TimeDisplay.js
│ │ │ ├── TimePicker.js
│ │ │ ├── index.js
│ │ │ └── timeUtils.js
│ │ ├── index.js
│ │ ├── mixins/
│ │ │ └── props.js
│ │ └── theme.js
│ ├── Popover/
│ │ ├── Popover.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Progress/
│ │ ├── Circular.js
│ │ ├── CircularProgress.js
│ │ ├── LinearProgress.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Radio/
│ │ ├── Radio.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Select/
│ │ ├── Option.js
│ │ ├── Select.js
│ │ ├── index.js
│ │ ├── mixins/
│ │ │ ├── events.js
│ │ │ ├── keyboard.js
│ │ │ ├── menu.js
│ │ │ └── selection.js
│ │ └── theme.js
│ ├── SlidePicker/
│ │ ├── Picker.js
│ │ ├── PickerSlot.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Slider/
│ │ ├── Slider.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Snackbar/
│ │ ├── Snackbar.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Stepper/
│ │ ├── Step.js
│ │ ├── StepButton.js
│ │ ├── StepConnector.js
│ │ ├── StepContent.js
│ │ ├── StepLabel.js
│ │ ├── Stepper.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── SubHeader/
│ │ ├── SubHeader.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Switch/
│ │ ├── Switch.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Tabs/
│ │ ├── Tab.js
│ │ ├── Tabs.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── TextField/
│ │ ├── TextField.js
│ │ ├── Textarea.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Tooltip/
│ │ ├── Tooltip.js
│ │ ├── TooltipContent.js
│ │ └── index.js
│ ├── index.js
│ ├── internal/
│ │ ├── AbstractButton.js
│ │ ├── CircleRipple.js
│ │ ├── ExpandTransition.js
│ │ ├── FocusRipple.js
│ │ ├── TouchRipple.js
│ │ ├── directives/
│ │ │ ├── click-outside.js
│ │ │ ├── elevation.js
│ │ │ ├── keyboard-focus.js
│ │ │ ├── mousewheel.js
│ │ │ ├── resize.js
│ │ │ ├── scroll.js
│ │ │ └── swipe.js
│ │ ├── mixins/
│ │ │ ├── button.js
│ │ │ ├── color.js
│ │ │ ├── input.js
│ │ │ ├── popup/
│ │ │ │ ├── Overlay.js
│ │ │ │ ├── index.js
│ │ │ │ ├── manager.js
│ │ │ │ └── utils.js
│ │ │ ├── ripple.js
│ │ │ ├── route.js
│ │ │ └── select.js
│ │ └── transitions.js
│ ├── styles/
│ │ ├── base.less
│ │ ├── colors.less
│ │ ├── components/
│ │ │ ├── alert.less
│ │ │ ├── appbar.less
│ │ │ ├── avatar.less
│ │ │ ├── badge.less
│ │ │ ├── bootstrap-grid.less
│ │ │ ├── bottom-nav.less
│ │ │ ├── bottom-sheet.less
│ │ │ ├── breadcrumbs.less
│ │ │ ├── button.less
│ │ │ ├── card.less
│ │ │ ├── carousel.less
│ │ │ ├── checkbox.less
│ │ │ ├── chip.less
│ │ │ ├── circle-ripple.less
│ │ │ ├── data-table.less
│ │ │ ├── date-input.less
│ │ │ ├── dialog.less
│ │ │ ├── divider.less
│ │ │ ├── drawer.less
│ │ │ ├── elevation.less
│ │ │ ├── expand-transition.less
│ │ │ ├── expansion-panel.less
│ │ │ ├── focus-ripple.less
│ │ │ ├── form.less
│ │ │ ├── grid-list.less
│ │ │ ├── grid.less
│ │ │ ├── input.less
│ │ │ ├── list.less
│ │ │ ├── load-more.less
│ │ │ ├── menu.less
│ │ │ ├── overlay.less
│ │ │ ├── pagination.less
│ │ │ ├── paper.less
│ │ │ ├── picker.less
│ │ │ ├── popover.less
│ │ │ ├── progress.less
│ │ │ ├── radio.less
│ │ │ ├── select.less
│ │ │ ├── slide-picker.less
│ │ │ ├── slider.less
│ │ │ ├── snackbar.less
│ │ │ ├── stepper.less
│ │ │ ├── subheader.less
│ │ │ ├── switch.less
│ │ │ ├── tabs.less
│ │ │ ├── text-field.less
│ │ │ ├── tooltip.less
│ │ │ └── touch-ripple.less
│ │ ├── import.less
│ │ ├── index.less
│ │ ├── mixins.less
│ │ ├── normalize.less
│ │ ├── theme.less
│ │ ├── transitions.less
│ │ └── vars.less
│ ├── theme/
│ │ ├── baseTheme.js
│ │ ├── colorTheme.js
│ │ ├── colors.js
│ │ ├── dark.js
│ │ ├── index.js
│ │ └── light.js
│ └── utils/
│ ├── colorManipulator.js
│ ├── dom.js
│ ├── drag.js
│ ├── index.js
│ ├── resize-event.js
│ ├── testing.js
│ ├── to-have-ben-warned.js
│ └── translate.js
└── types/
├── index.d.ts
├── muse-ui.d.ts
└── theme.d.ts
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
"env": {
"normal": {
"presets": [
"env",
"stage-2"
],
"plugins": [
"transform-vue-jsx"
],
"comments": false
},
"production": {
"presets": [
"env",
"stage-2"
],
"plugins": [
"transform-vue-jsx"
],
"comments": false
},
"test": {
"presets": ["env", "stage-2"],
"plugins": [ "istanbul", "transform-runtime", "transform-vue-jsx"]
},
"es5": {
"presets": [
[
"env",
{
"modules": false
}
],
"stage-2"
],
"plugins": [
"transform-vue-jsx"
]
}
}
}
================================================
FILE: .editorconfig
================================================
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
================================================
FILE: .eslintignore
================================================
================================================
FILE: .eslintrc
================================================
{
root: true,
parser: "babel-eslint",
parserOptions: {
ecmaVersion: 7,
sourceType: "module",
allowImportExportEverywhere: false,
ecmaFeatures: {
jsx: true,
modules: true
}
},
env: {
es6: true,
node: true,
browser: true
},
extends: "vue",
globals: {
expect: true,
describe: true,
it: true,
jest: true
},
rules: {
quotes: [2, "single", { "allowTemplateLiterals": true }],
linebreak-style: [2, "unix"],
semi: [2, "always"],
eqeqeq: [2, "always"],
strict: [2, "global"],
key-spacing: [2, { "afterColon": true }]
}
}
================================================
FILE: .gitattributes
================================================
*.html linguist-language=Vue
*.js linguist-language=Vue
================================================
FILE: .gitignore
================================================
# Created by .ignore support plugin (hsz.mobi)
### Node template
# Logs
logs
*.log
npm-debug.log*
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules
jspm_packages
# Optional npm cache directory
.npm
# Optional REPL history
.node_repl_history
/lib
/es5
.idea
dist
.DS_Store
.cache
converage
.vscode
reports
.cache
================================================
FILE: .postcssrc.js
================================================
module.exports = {
plugins: [
require('autoprefixer')({
browsers: [
'> 1%',
'last 5 versions',
'ios >= 7',
'android > 4.4',
'not ie < 10'
]
}),
require('cssnano')({
safe: true
})
]
};
================================================
FILE: .travis.yml
================================================
---
language: node_js
node_js:
- "8.11.2"
before_script:
- yarn global add codecov
script:
- yarn
- yarn run lint
- yarn run test:coverage && codecov
- yarn run build
cache:
yarn: true
================================================
FILE: README.md
================================================
<p align="center">
<a href="https://muse-ui.org" target="_blank">
<img width="120" src="./demo/icon_logo.png">
</a>
</p>
<h1 align="center">Muse-UI [不再维护]</h1>
<p align="center">
<a href="https://material.io/">Material Design</a>
UI library for <a href="https://vuejs.org/">Vuejs 2.0</a>
</p>
<p align="center">
<a href="https://travis-ci.org/museui/muse-ui">
<img src="https://img.shields.io/travis/museui/muse-ui.svg" alt="travis ci badge">
</a>
<a href="https://www.npmjs.org/package/muse-ui">
<img src="https://img.shields.io/npm/v/muse-ui.svg" alt="Downloads">
</a>
<a href="https://npmjs.org/package/muse-ui">
<img src="https://img.shields.io/npm/dm/muse-ui.svg" alt="Downloads">
</a>
<a href="https://gitter.im/muse-ui/muse-ui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge">
<img src="https://badges.gitter.im/muse-ui/muse-ui.svg" alt="Downloads">
</a>
</p>
## Installation
Muse-UI is available as an [npm package](https://www.npmjs.com/package/muse-ui)
```bash
npm install muse-ui -S
yarn add muse-ui
```
## Usage
```javascript
import Vue from 'vue'
import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'
Vue.use(MuseUI)
```
For more information, please refer to [Usage](https://muse-ui.org/#/zh-CN/usage) in our documentation.
## Browser Support
Modern browsers and Internet Explorer 10+.
## Contributing
Please make sure to read the contributing guide ([中文](https://muse-ui.org/#/zh-CN/contributing) | [English](https://muse-ui.org/#/en-US/contributing)) before making a pull request.
## Changelog
Detailed changes for each release are documented in the [release notes](https://muse-ui.org/#/zh-CN/changelog).
## Licence
muse-ui is open source and released under the MIT Licence.
Copyright (c) 2016 myron
================================================
FILE: commitlint.config.js
================================================
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'subject-case': [0]
}
};
================================================
FILE: demo/App.vue
================================================
<template>
<div style="padding: 32px;">
<mu-date-input type="dateTime">
<template slot="day" slot-scope="{ selected, date, disabled, now}">
<div class="mu-day-button-bg"></div>
<div class="mu-day-button-content">
<span class="mu-day-button-text">{{date.getDate()}}日</span>
<span class="day-dot" v-if="date.getDate() % 3 === 0"></span>
</div>
</template>
</mu-date-input>
<br/>
<mu-button @click="handleClick">
CLICK
</mu-button>
<bug-popup />
<mu-text-field ref="textField" v-model="value1" multi-line :rows="4" icon="comment" placeholder="输入信息"/>
<mu-button @click="handelFocusTextField">
FOCUS
</mu-button>
</div>
</template>
<script>
import BugPopup from "./bug-popup";
import BugDateInput from "./bug-date-input";
export default {
data() {
return {
page: 3,
open: false,
alert: true,
checkbox1: [],
selects: [],
slider: 10,
checkbox2: true,
switch1: true,
radio1: "",
ripple: "click ripple",
date: new Date(),
time: new Date(),
value: undefined,
value1:
"I farI fare well without computere well without I fare well without computercomputerI fare well without computer.\r\n没电脑我也过得很好。\r\nHow did you fare?\r\n你过得怎样?\r\nA single fare is 170 dollars.\r\n单程票价为170美元。",
alertMsg: "every thing is disabled",
columns: [
{
name: "xxx1",
title: "嘻嘻嘻1",
width: 300,
sortable: true
},
{
name: "xxx2",
title: "嘻嘻嘻2",
align: "center",
width: 300,
sortable: true
},
{
name: "xxx3",
title: "嘻嘻嘻3",
width: 300,
sortable: true
},
{
name: "xxx4",
title: "嘻嘻嘻4",
width: 300,
sortable: true
},
{
name: "xxx5",
title: "嘻嘻嘻5",
width: 300,
sortable: true
},
{
name: "xxx6",
title: "嘻嘻嘻6",
width: 300,
sortable: true
}
],
list: [
{
xxx1: "啊哈哈哈哈哈哈",
xxx2: 10,
xxx3: 11,
xxx4: 12,
xxx5: 24,
xxx6: 26
},
{
xxx1: "啊哈哈哈哈哈哈",
xxx2: 10,
xxx3: 11,
xxx4: 12,
xxx5: 24,
xxx6: 26
},
{
xxx1: "啊哈哈哈哈哈哈",
xxx2: 10,
xxx3: 11,
xxx4: 12,
xxx5: 24,
xxx6: 26
},
{
xxx1: "啊哈哈哈哈哈哈",
xxx2: 10,
xxx3: 11,
xxx4: 12,
xxx5: 24,
xxx6: 26
},
{
xxx1: "啊哈哈哈哈哈哈",
xxx2: 10,
xxx3: 11,
xxx4: 12,
xxx5: 24,
xxx6: 26
},
{
xxx1: "啊哈哈哈哈哈哈",
xxx2: 10,
xxx3: 11,
xxx4: 12,
xxx5: 24,
xxx6: 26
},
{
xxx1: "啊哈哈哈哈哈哈",
xxx2: 10,
xxx3: 11,
xxx4: 12,
xxx5: 24,
xxx6: 26
},
{
xxx1: "啊哈哈哈哈哈哈",
xxx2: 10,
xxx3: 11,
xxx4: 12,
xxx5: 24,
xxx6: 26
}
],
selects: [],
sort: {
name: "xxx1",
order: "asc"
},
loading: true
};
},
created() {
setTimeout(() => (this.loading = false), 2000);
},
methods: {
handleClick() {
console.log("click");
},
closeAlert() {
this.alert = false;
},
handelFocusTextField() {
// console.log(this.$refs.textField);
this.$refs.textField.focus();
}
},
components: {
BugPopup,
BugDateInput
}
};
</script>
<style>
.demo-ripple {
width: 300px;
height: 300px;
background-color: aqua;
position: relative;
}
.mu-day-button-content {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.day-dot {
width: 8px;
height: 8px;
border-radius: 100%;
background-color: #009688;
position: absolute;
bottom: 2px;
left: 50%;
margin-left: -4px;
}
</style>
================================================
FILE: demo/bug-date-input.vue
================================================
<template>
<mu-container>
<mu-form ref="form" :model="validateForm" class="mu-demo-form">
<mu-form-item label="日期" help-text="帮助文字" prop="username" :rules="usernameRules">
<mu-date-input v-model="validateForm.username" prop="username"></mu-date-input>
</mu-form-item>
<mu-form-item label="密码" prop="password" :rules="passwordRules">
<mu-text-field type="password" v-model="validateForm.password" prop="password"></mu-text-field>
</mu-form-item>
<mu-form-item prop="isAgree" :rules="argeeRules">
<mu-checkbox label="同意用户协议" v-model="validateForm.isAgree"></mu-checkbox>
</mu-form-item>
<mu-form-item>
<mu-button color="primary" @click="submit">提交</mu-button>
<mu-button @click="clear">重置</mu-button>
</mu-form-item>
</mu-form>
</mu-container>
</template>
<script>
export default {
data () {
return {
usernameRules: [
{ validate: (val) => !!val, message: '必须填写日期'}
],
passwordRules: [
{ validate: (val) => !!val, message: '必须填写密码'},
{ validate: (val) => val.length >= 3 && val.length <= 10, message: '密码长度大于3小于10'}
],
argeeRules: [{ validate: (val) => !!val, message: '必须同意用户协议'}],
validateForm: {
username: '',
password: '',
isAgree: false
}
}
},
methods: {
submit () {
this.$refs.form.validate().then((result) => {
console.log('form valid: ', result)
});
},
clear () {
this.$refs.form.clear();
this.validateForm = {
username: '',
password: '',
isAgree: false
};
}
}
}
</script>
<style>
.mu-demo-form {
width: 100%;
max-width: 460px;
}
</style>
================================================
FILE: demo/bug-popup.vue
================================================
<template>
<div>
<mu-container>
<mu-flex justify-content="center" align-items="center">
<mu-button @click="open=true">OPEN Bottom Sheet</mu-button>
</mu-flex>
<!-- <mu-bottom-sheet :open.sync="open">
<mu-list @item-click="openScroll=true">
<mu-sub-header>Select One</mu-sub-header>
<mu-list-item button>
<mu-list-item-action>
<mu-icon value="grade" color="orange"></mu-icon>
</mu-list-item-action>
<mu-list-item-title>Star</mu-list-item-title>
</mu-list-item>
</mu-list>
</mu-bottom-sheet> -->
<mu-dialog title="Phone Ringtone" width="360" :open.sync="open">
this is simple Dialog
<mu-button slot="actions" flat color="primary" @click="opensnakbar">ok</mu-button>
</mu-dialog>
</mu-container>
<mu-snackbar color="error" :open.sync="opens" position="top">
<mu-icon left :value="icon"></mu-icon>
err
<mu-button flat slot="action" color="#fff" @click="opens=false">Close</mu-button>
</mu-snackbar>
</div>
</template>
<script>
export default {
data () {
return {
opens: false,
open: false,
timer: null,
openScroll: false
}
},
methods: {
opensnakbar () {
this.openScroll = false
if (this.timer) clearTimeout(this.timer)
this.opens = true
this.timer = setTimeout(() => {
this.opens = false
}, 1000)
}
}
}
</script>
================================================
FILE: demo/components/Sidebar.js
================================================
export default {
};
================================================
FILE: demo/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- ignore user setting for uc browser -->
<meta name="layoutmode" content="standard"/>
<meta name="renderer" content="webkit">
<meta name="force-rendering" content="webkit">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
<title>MuseUI DEV</title>
</head>
<body>
<div id="app"></div>
<script src="./main.js"></script>
</body>
</html>
================================================
FILE: demo/main.js
================================================
import Vue from 'vue';
import MuseUI from '../src';
import App from './App';
Vue.use(MuseUI);
const app = new Vue({
...App
});
app.$mount('#app');
================================================
FILE: jest.config.js
================================================
module.exports = {
verbose: false,
testURL: 'http://localhost/',
roots: [
'<rootDir>/src'
],
moduleFileExtensions: [
'js',
'vue'
],
moduleDirectories: [
'node_modules'
],
transform: {
'.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
'\\.(less)$': '<rootDir>/node_modules/jest-css-modules',
'\\.(css)$': '<rootDir>/node_modules/jest-css-modules',
'.*\\.(vue|js)$': '<rootDir>/node_modules/babel-jest'
},
transformIgnorePatterns: [
'node_modules/(?!vue-router)'
],
snapshotSerializers: [
'jest-serializer-html'
]
};
================================================
FILE: package.json
================================================
{
"name": "muse-ui",
"version": "3.0.2",
"description": "material design ui for vue2",
"author": "myronliu347 <myronliu347@gmail.com>",
"repository": "https://github.com/museui/muse-ui.git",
"main": "dist/muse-ui.common.js",
"module": "dist/muse-ui.esm.js",
"unpkg": "dist/muse-ui.js",
"jsdelivr": "dist/muse-ui.js",
"typings": "types/index.d.ts",
"files": [
"dist",
"lib",
"es5",
"src",
"types"
],
"scripts": {
"dev": "NODE_ENV=normal parcel demo/index.html",
"build": "npm run build:dist && npm run build:lib && npm run build:es5",
"build:dist": "rimraf dist && rollup --config rollup.config.js",
"build:lib": "rimraf lib && NODE_ENV=normal babel src -d lib --ignore *.spec.js && mkdir lib/styles && cp -rf src/styles/* lib/styles",
"build:es5": "rimraf es5 && NODE_ENV=es5 babel src -d es5 --ignore *.spec.js && mkdir es5/styles && cp -rf src/styles/* es5/styles",
"lint": "NODE_ENV=normal eslint --ext .js,.vue src",
"test": "NODE_ENV=test jest -i",
"test:coverage": "NODE_ENV=test jest -i --coverage",
"prepush": "yarn run lint",
"commit": "npx git-cz",
"commitmsg": "commitlint -E GIT_PARAMS"
},
"peerDependencies": {
"vue": "^2.5.0"
},
"devDependencies": {
"@commitlint/cli": "^7.0.0",
"@commitlint/config-conventional": "^7.0.1",
"autoprefixer": "^8.0.0",
"avoriaz": "^6.3.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^22.4.3",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-transform-vue-jsx": "^3.5.1",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015-rollup": "^3.0.0",
"babel-preset-stage-2": "^6.24.1",
"cssnano": "^3.10.0",
"eslint": "^4.18.1",
"eslint-config-vue": "^2.0.2",
"eslint-plugin-vue": "^4.3.0",
"husky": "^0.14.3",
"jest": "^22.4.3",
"jest-cli": "^22.4.3",
"jest-css-modules": "^1.1.0",
"jest-serializer-html": "^5.0.0",
"less": "^3.0.1",
"parcel-bundler": "^1.9.7",
"parcel-plugin-vue": "^1.5.0",
"postcss-import": "^11.0.0",
"postcss-modules": "^1.1.0",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"rollup": "^0.57.1",
"rollup-plugin-babel": "^3.0.3",
"rollup-plugin-commonjs": "^9.1.0",
"rollup-plugin-node-resolve": "^3.3.0",
"rollup-plugin-postcss": "^1.4.0",
"rollup-plugin-replace": "^2.0.0",
"rollup-plugin-uglify": "^3.0.0",
"typeface-roboto": "^0.0.54",
"vue": "^2.5.13",
"vue-jest": "^2.3.0",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.13"
},
"dependencies": {
"body-scroll-lock": "^2.6.1",
"dayjs": "^1.8.2",
"keycode": "^2.1.9",
"normalize-wheel": "^1.0.1",
"resize-observer-polyfill": "^1.5.0"
}
}
================================================
FILE: rollup.config.js
================================================
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify';
import postcss from 'rollup-plugin-postcss';
import replace from 'rollup-plugin-replace';
import packageJson from './package.json';
const { name, version } = packageJson;
const banner = `/* ${name} myron.liu version ${version} */`;
const plugins = [
postcss({ extensions: ['.less'], extract: `dist/${name}.css` }),
resolve({ jsnext: true, main: true, browser: true }),
commonjs({
include: 'node_modules/**',
namedExports: {
'node_modules/body-scroll-lock/lib/bodyScrollLock.min.js': ['disableBodyScroll', 'enableBodyScroll', 'clearAllBodyScrollLocks']
}
}),
babel({
babelrc: false,
include: 'src/**/*.js',
runtimeHelpers: true,
presets: [
[
'env',
{
modules: false
}
],
'stage-2',
'es2015-rollup'
]
}),
replace({
__VERSION__: version
})
];
export default [{
input: 'src/index.js',
output: [{
banner,
file: `dist/${name}.common.js`,
format: 'cjs'
}, {
banner,
file: `dist/${name}.esm.js`,
format: 'es'
}],
plugins: plugins,
external: ['vue']
}, {
input: 'src/index.js',
output: {
file: `dist/${name}.js`,
format: 'umd',
name: 'MuseUI',
globals: {
vue: 'Vue'
}
},
plugins: [
...plugins,
uglify()
],
external: ['vue']
}];
================================================
FILE: src/Alert/Alert.js
================================================
import color from '../internal/mixins/color';
import Button from '../Button';
export default {
name: 'mu-alert',
mixins: [color],
props: {
delete: Boolean,
transition: String,
mode: String
},
methods: {
handleDelete (e) {
e.stopPropagation();
this.$emit('delete');
}
},
render (h) {
const deleteIcon = h(Button, {
staticClass: 'mu-alert-delete-btn',
props: {
icon: true
},
on: {
click: this.handleDelete
}
}, [
h('svg', {
staticClass: 'mu-alert-delete-icon',
attrs: {
viewBox: '0 0 24 24'
}
}, [
h('path', {
attrs: {
d: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'
}
}),
h('path', {
attrs: {
d: 'M0 0h24v24H0z',
fill: 'none'
}
})
])
]);
const alert = h('div', {
staticClass: `mu-alert ${this.getColorClass()}`,
style: {
'background-color': this.getColor(this.color)
},
on: this.$listeners
}, [this.$slots.default, this.delete ? deleteIcon : undefined]);
return this.transition ? h('transition', {
props: {
mode: this.mode,
name: this.transition
}
}, [alert]) : alert;
}
};
================================================
FILE: src/Alert/Alert.spec.js
================================================
import test from '../utils/testing';
import Alert from './Alert';
test('Alert', ({ mount }) => {
it('should be show by default', async () => {
const wrapper = mount(Alert, {});
expect(wrapper.html()).toMatchSnapshot();
});
it('should be delete', async () => {
const wrapper = mount(Alert, { propsData: { delete: true }});
const deleteBtn = wrapper.find('.mu-alert-delete-btn')[0];
const handleDelete = jest.fn();
wrapper.vm.$on('delete', handleDelete);
deleteBtn.trigger('click');
expect(handleDelete).toBeCalledWith();
});
it('should be set color', async () => {
const wrapper = mount(Alert, {
propsData: {
color: 'primary'
}
});
expect(wrapper.html()).toMatchSnapshot();
wrapper.setProps({ color: 'error' });
expect(wrapper.html()).toMatchSnapshot();
wrapper.setProps({ color: '#fff' });
expect(wrapper.hasStyle('background-color', '#fff')).toEqual(true);
});
});
================================================
FILE: src/Alert/__snapshots__/Alert.spec.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Alert should be set color 1`] = `
<div class="mu-alert mu-primary-color mu-inverse">
</div>
`;
exports[`Alert should be set color 2`] = `
<div class="mu-alert mu-error-color mu-inverse">
</div>
`;
exports[`Alert should be show by default 1`] = `
<div class="mu-alert ">
</div>
`;
================================================
FILE: src/Alert/index.js
================================================
import '../styles/components/alert.less';
import Alert from './Alert';
Alert.install = function (Vue) {
Vue.component(Alert.name, Alert);
};
export default Alert;
================================================
FILE: src/AppBar/AppBar.js
================================================
import color from '../internal/mixins/color';
export default {
name: 'mu-appbar',
mixins: [color],
props: {
zDepth: {
type: [Number, String],
default: 4,
validator: (val) => val >= 0 && val <= 24
},
title: {
type: String,
default: ''
},
textColor: String
},
render (h) {
const slots = this.$slots;
const left = slots.left && slots.left.length > 0 ? h('div', { staticClass: 'mu-appbar-left' }, slots.left) : undefined;
const right = slots.right && slots.right.length > 0 ? h('div', { staticClass: 'mu-appbar-right' }, slots.right) : undefined;
const center = h('div', { staticClass: 'mu-appbar-title' }, slots.default && slots.default.length > 0 ? slots.default : this.title);
return h('header', {
staticClass: `mu-appbar ${this.getColorClass()} ${this.getTextColorClass()} mu-elevation-${this.zDepth}`,
style: {
'background-color': this.getColor(this.color),
color: this.getColor(this.textColor)
}
}, [left, center, right]);
}
};
================================================
FILE: src/AppBar/AppBar.spec.js
================================================
import Vue from 'vue';
import * as colors from '../theme/colors';
import test from '../utils/testing';
import AppBar from './AppBar';
import Icon from '../Icon';
test('AppBar', ({ mount }) => {
it('should be default', async () => {
const wrapper = mount(AppBar, {});
expect(wrapper.html()).toMatchSnapshot();
});
it('should be set title', async () => {
const wrapper = mount(AppBar, {
propsData: {
title: 'Muse-UI'
}
});
expect(wrapper.html()).toMatchSnapshot();
});
it('should be slots', async () => {
const menuIcon = Vue.component('test', {
components: {
'mu-icon': Icon
},
render (h) {
return h('mu-icon', {
value: 'menu'
});
}
});
let wrapper = mount(AppBar, { slots: { left: [menuIcon] }});
expect(wrapper.html()).toMatchSnapshot();
wrapper = mount(AppBar, { slots: { right: [menuIcon] }});
expect(wrapper.html()).toMatchSnapshot();
});
it('should be set color and text color', async () => {
const wrapper = mount(AppBar, {
propsData: {
color: 'primary',
textColor: 'secondary'
}
});
expect(wrapper.hasClass('mu-primary-color')).toBe(true);
expect(wrapper.hasClass('mu-inverse')).toBe(true);
expect(wrapper.hasClass('mu-secondary-text-color')).toBe(true);
wrapper.setProps({
color: 'teal',
textColor: 'green'
});
expect(wrapper.hasStyle('background-color', colors.teal)).toBe(true);
expect(wrapper.hasStyle('color', colors.green)).toBe(true);
wrapper.setProps({
color: '#000',
textColor: '#fff'
});
expect(wrapper.hasStyle('background-color', '#000')).toBe(true);
expect(wrapper.hasStyle('color', '#fff')).toBe(true);
});
it('should set zDepth', async () => {
const wrapper = mount(AppBar, {});
expect(wrapper.hasClass('mu-elevation-4')).toBe(true);
wrapper.setProps({
zDepth: 1
});
expect(wrapper.hasClass('mu-elevation-1')).toBe(true);
});
});
================================================
FILE: src/AppBar/__snapshots__/AppBar.spec.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AppBar should be default 1`] = `
<header class="mu-appbar mu-elevation-4">
<div class="mu-appbar-title">
</div>
</header>
`;
exports[`AppBar should be set title 1`] = `
<header class="mu-appbar mu-elevation-4">
<div class="mu-appbar-title">
Muse-UI
</div>
</header>
`;
exports[`AppBar should be slots 1`] = `
<header class="mu-appbar mu-elevation-4">
<div class="mu-appbar-left">
</div>
<div class="mu-appbar-title">
</div>
</header>
`;
exports[`AppBar should be slots 2`] = `
<header class="mu-appbar mu-elevation-4">
<div class="mu-appbar-title">
</div>
<div class="mu-appbar-right">
</div>
</header>
`;
================================================
FILE: src/AppBar/index.js
================================================
import '../styles/components/elevation.less';
import '../styles/components/appbar.less';
import theme from '../theme';
import AppBarTheme from './theme';
import AppBar from './AppBar';
AppBar.install = function (Vue) {
Vue.component(AppBar.name, AppBar);
};
theme.addCreateTheme(AppBarTheme);
export default AppBar;
================================================
FILE: src/AppBar/theme.js
================================================
export default (theme, type) => {
return `
.mu-appbar {
background-color: ${type === 'light' ? '#f5f5f5' : '#212121'};
color: ${theme.text.primary};
}
`;
};
================================================
FILE: src/AutoComplete/AutoComplete.js
================================================
import input from '../internal/mixins/input';
import clickOutSide from '../internal/directives/click-outside';
import Popover from '../Popover';
import { List, ListItem } from '../List';
import keycode from 'keycode';
import caseSensitiveFilter from './filter';
import { isPromise } from '../utils';
export default {
name: 'mu-auto-complete',
mixins: [input],
directives: {
'click-outside': clickOutSide
},
props: {
data: {
type: Array,
default: () => []
},
maxHeight: {
type: [String, Number],
default: 300
},
debounce: {
type: Number,
default: 200,
validator (val) {
return val > 0;
}
},
filter: {
type: Function,
default: caseSensitiveFilter
},
maxSearchResults: {
type: Number,
default: 0
},
openOnFocus: Boolean,
dense: {
type: Boolean,
default: true
},
textline: List.props.textline,
popoverClass: String,
placement: {
type: String,
default: 'bottom-start'
},
space: Number,
avatar: Boolean
},
data () {
return {
open: false,
enableData: [],
focusIndex: -1
};
},
methods: {
setValue (value, item, e) {
this.open = false;
this.focusIndex = -1;
if (!item) return;
this.$emit('input', value, e);
this.$emit('select', value, item, e);
this.$emit('change', value, e);
},
onKeydown (e) {
if (this.disabled || this.$attrs.readonly) return;
const code = keycode(e);
const maxIndex = this.enableData.length - 1;
const minIndex = 0;
switch (code) {
case 'enter':
if (this.focusIndex === -1) return;
const { value, item } = this.enableData[this.focusIndex];
this.setValue(value, item, e);
break;
case 'up':
event.preventDefault();
if (!this.open) return;
this.focusIndex--;
if (this.focusIndex < minIndex) this.focusIndex = maxIndex;
break;
case 'down':
event.preventDefault();
if (!this.open) return;
this.focusIndex++;
if (this.focusIndex > maxIndex) this.focusIndex = minIndex;
break;
case 'tab':
this.blur(e);
break;
default:
this.focusIndex = -1;
break;
}
this.$emit('keydown', e);
},
onInput (e) {
const value = e.target.value;
if (this.timer) clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.filterData(value);
}, this.debounce);
this.$emit('input', value, e);
},
focus (e) {
this.isFocused = true;
if (this.openOnFocus) this.filterData(this.value);
this.$emit('focus', e);
},
filterData (val) {
this.open = true;
const results = this.filter(val, this.data, this.maxSearchResults);
switch (true) {
case Array.isArray(results):
this.enableData = results;
return;
case isPromise(results):
results.then((results) => {
this.enableData = Array.isArray(results) ? results : [];
});
return;
}
this.enableData = [];
},
blur (e) {
this.isFocused = false;
this.focusIndex = -1;
this.open = false;
this.$emit('blur', e);
},
setScollPosition (index) {
if (!this.open) return;
this.$nextTick(() => {
const popoverEl = this.$refs.list.$el;
const optionEl = popoverEl.querySelector('.is-focused');
if (!optionEl) return;
const optionHeight = optionEl.offsetHeight;
let scrollTop = optionEl.offsetTop - optionHeight;
if (scrollTop < optionHeight) scrollTop = 0;
popoverEl.scrollTop = scrollTop;
});
},
createTextField (h) {
const listeners = {
...this.$listeners,
input: this.onInput,
change: (e) => this.$emit('change', e.target.value, e),
keydown: this.onKeydown,
focus: this.focus
};
const placeholder = !this.labelFloat ? this.$attrs.placeholder : '';
return [
h('input', {
staticClass: 'mu-text-field-input',
ref: 'input',
attrs: {
tabindex: 0,
...this.$attrs,
disabled: this.disabled,
placeholder
},
domProps: {
value: this.value
},
on: listeners
})
];
},
createContentList (h) {
return h(List, {
staticClass: 'mu-option-list',
ref: 'list',
props: {
dense: this.dense,
textline: this.textline
},
style: {
'maxHeight': this.maxHeight + 'px'
}
}, this.enableData.map((item, index) => {
return h(ListItem, {
staticClass: 'mu-option',
class: {
'is-focused': this.focusIndex === index
},
props: {
button: true,
avatar: this.avatar
},
on: {
click: (e) => this.setValue(item.value, item.item, e)
}
}, this.$scopedSlots.default ? this.$scopedSlots.default({
...item,
index
}) : [
h('span', {
domProps: {
innerHTML: item.highlight
}
})
]);
}));
}
},
render (h) {
const trigger = this.$refs.input;
return this.createInput(h, {
staticClass: 'mu-text-field',
ref: 'content',
directives: [{
name: 'click-outside',
value: (e) => {
if (this.$refs.popover.$el.contains(e.target)) return;
this.blur(e);
}
}]
}, [
this.createTextField(h),
this.$slots.default,
h(Popover, {
staticClass: [this.popoverClass || ''].join(' '),
props: {
trigger: trigger,
placement: this.placement,
space: this.space,
open: this.open
},
on: {
close: () => (this.open = false)
},
ref: 'popover',
style: {
'visibility': this.enableData.length === 0 ? 'hidden' : '',
'min-width': trigger ? trigger.offsetWidth + 'px' : ''
}
}, [
this.createContentList(h),
this.$slots.popover
])
]);
},
watch: {
focusIndex () {
this.setScollPosition();
}
}
};
================================================
FILE: src/AutoComplete/AutoComplete.spec.js
================================================
import test from '../utils/testing';
import AutoComplete from './AutoComplete';
test('AutoComplete', ({ mount }) => {
const data = [
'Apple', 'Apricot', 'Avocado',
'Banana', 'Bilberry', 'Blackberry', 'Blackcurrant', 'Blueberry',
'Boysenberry', 'Blood Orange',
'Cantaloupe', 'Currant', 'Cherry', 'Cherimoya', 'Cloudberry',
'Coconut', 'Cranberry', 'Clementine',
'Damson', 'Date', 'Dragonfruit', 'Durian',
'Elderberry',
'Feijoa', 'Fig',
'Goji berry', 'Gooseberry', 'Grape', 'Grapefruit', 'Guava',
'Honeydew', 'Huckleberry',
'Jabouticaba', 'Jackfruit', 'Jambul', 'Jujube', 'Juniper berry',
'Kiwi fruit', 'Kumquat',
'Lemon', 'Lime', 'Loquat', 'Lychee',
'Nectarine',
'Mango', 'Marion berry', 'Melon', 'Miracle fruit', 'Mulberry', 'Mandarine',
'Olive', 'Orange',
'Papaya', 'Passionfruit', 'Peach', 'Pear', 'Persimmon', 'Physalis', 'Plum', 'Pineapple',
'Pumpkin', 'Pomegranate', 'Pomelo', 'Purple Mangosteen',
'Quince',
'Raspberry', 'Raisin', 'Rambutan', 'Redcurrant',
'Salal berry', 'Satsuma', 'Star fruit', 'Strawberry', 'Squash', 'Salmonberry',
'Tamarillo', 'Tamarind', 'Tomato', 'Tangerine',
'Ugli fruit',
'Watermelon'
];
it('should default view', async () => {
const wrapper = mount(AutoComplete, {});
expect(wrapper.html()).toMatchSnapshot();
});
it('should set maxHeight', async () => {
const wrapper = mount(AutoComplete, {
propsData: {
maxHeight: 600
}
});
expect(wrapper.find('.mu-option-list')[0].hasStyle('max-height', '600px')).toBe(true);
});
it('should has data list', async () => {
const wrapper = mount(AutoComplete, {
propsData: {
data: data
}
});
const input = jest.fn(value => wrapper.setProps({ value }));
const event = { target: { value: 'ta' }};
wrapper.vm.$on('input', input);
wrapper.vm.onInput(event);
expect(input).toBeCalledWith('ta', event);
return new Promise((reslove) => {
setTimeout(() => {
expect(wrapper.vm.open).toBe(true);
reslove();
}, wrapper.vm.debounce);
});
});
it('should max search result six and open on focus', async () => {
const wrapper = mount(AutoComplete, {
propsData: {
data: data,
openOnFocus: true,
maxSearchResults: 6
}
});
wrapper.find('input')[0].trigger('focus');
expect(wrapper.vm.open).toBe(true);
expect(wrapper.vm.enableData.length).toBe(6);
});
});
================================================
FILE: src/AutoComplete/__snapshots__/AutoComplete.spec.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AutoComplete should default view 1`] = `
<div class="mu-input ">
<div class="mu-text-field mu-input-content">
<input tabindex="0"
class="mu-text-field-input"
>
<div class="mu-popover transition-bottom"
style="z-index: 20141224; visibility: hidden; display: none;"
>
<ul class="mu-list mu-option-list mu-list-dense"
style="max-height: 300px;"
>
</ul>
</div>
<div>
<div class="mu-input-line">
</div>
<div class="mu-input-focus-line ">
</div>
</div>
</div>
</div>
`;
================================================
FILE: src/AutoComplete/filter.js
================================================
export default (query = '', data = [], maxSearchResults = 0) => {
const results = [];
for (let i = 0; i < data.length; i++) {
const value = getValueByItem(data[i]);
const index = value.toLowerCase().indexOf(query.toLowerCase());
if (index === -1) continue;
const before = value.substring(0, index);
const highlight = value.substring(index, index + query.length);
const after = value.substring(index + query.length);
results.push({
value,
item: data[i],
highlight: [
before,
`<span class="mu-secondary-text-color">${highlight}</span>`,
after
].join('')
});
if (maxSearchResults > 0 && maxSearchResults === results.length) break;
}
return results;
};
function getValueByItem (item) {
if (!item) return '';
return typeof item === 'string' ? item : item.value;
}
================================================
FILE: src/AutoComplete/index.js
================================================
import '../styles/components/text-field.less';
import '../styles/components/select.less';
import AutoComplete from './AutoComplete';
AutoComplete.install = function (Vue) {
Vue.component(AutoComplete.name, AutoComplete);
};
export default AutoComplete;
================================================
FILE: src/Avatar/Avatar.js
================================================
import { getWidth } from '../utils';
import color from '../internal/mixins/color';
export default {
name: 'mu-avatar',
mixins: [color],
props: {
textColor: String,
size: {
type: [Number, String],
default: 40
}
},
render (h) {
const size = getWidth(this.size);
return h('div', {
staticClass: `mu-avatar ${this.getColorClass()} ${this.getTextColorClass()}`,
style: {
width: size,
height: size,
'font-size': this.size / 2 + 'px',
'background-color': this.getColor(this.color),
'color': this.getColor(this.textColor)
},
on: this.$listeners
}, [h('div', { class: 'mu-avatar-inner' }, this.$slots.default)]);
}
};
================================================
FILE: src/Avatar/Avatar.spec.js
================================================
import * as colors from '../theme/colors';
import test from '../utils/testing';
import Avatar from './Avatar';
test('Avatar', ({ mount }) => {
it('should have an mu-avatar class', () => {
const wrapper = mount(Avatar, {});
expect(wrapper.hasClass('mu-avatar')).toBe(true);
expect(wrapper.html()).toMatchSnapshot();
});
it('should can set color and text-color', () => {
const wrapper = mount(Avatar, {
propsData: {
color: 'primary',
textColor: 'secondary'
}
});
expect(wrapper.hasClass('mu-primary-color')).toBe(true);
expect(wrapper.hasClass('mu-inverse')).toBe(true);
expect(wrapper.hasClass('mu-secondary-text-color')).toBe(true);
wrapper.setProps({
color: 'teal',
textColor: 'green'
});
expect(wrapper.hasStyle('background-color', colors.teal)).toBe(true);
expect(wrapper.hasStyle('color', colors.green)).toBe(true);
wrapper.setProps({
color: '#000',
textColor: '#fff'
});
expect(wrapper.hasStyle('background-color', '#000')).toBe(true);
expect(wrapper.hasStyle('color', '#fff')).toBe(true);
});
it('should be change size', () => {
const wrapper = mount(Avatar, {
propsData: {
size: 56
}
});
expect(wrapper.html()).toMatchSnapshot();
});
});
================================================
FILE: src/Avatar/__snapshots__/Avatar.spec.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Avatar should be change size 1`] = `
<div class="mu-avatar "
style="width: 56px; height: 56px; font-size: 28px;"
>
<div class="mu-avatar-inner">
</div>
</div>
`;
exports[`Avatar should have an mu-avatar class 1`] = `
<div class="mu-avatar "
style="width: 40px; height: 40px; font-size: 20px;"
>
<div class="mu-avatar-inner">
</div>
</div>
`;
================================================
FILE: src/Avatar/index.js
================================================
import '../styles/components/avatar.less';
import theme from '../theme';
import AvatarTheme from './theme';
import Avatar from './Avatar';
Avatar.install = function (Vue) {
Vue.component(Avatar.name, Avatar);
};
theme.addCreateTheme(AvatarTheme);
export default Avatar;
================================================
FILE: src/Avatar/theme.js
================================================
export default (theme) => {
return `
.mu-avatar {
background-color: ${theme.track};
color: ${theme.text.alternate};
}
`;
};
================================================
FILE: src/Badge/Badge.js
================================================
import { convertClass } from '../utils';
import color from '../internal/mixins/color';
export default {
name: 'mu-badge',
mixins: [color],
props: {
content: {
type: String,
default: ''
},
circle: Boolean,
badgeClass: [String, Object, Array]
},
render (h) {
const slots = this.$slots;
const isFloat = slots.default && slots.default.length > 0;
const badge = h('em', {
staticClass: `mu-badge ${convertClass(this.badgeClass).join(' ')} ${this.getColorClass()}`,
style: {
'background-color': this.getColor(this.color)
},
class: {
'mu-badge-circle': this.circle,
'mu-badge-float': isFloat
}
}, slots.content && slots.content.length > 0 ? slots.content : this.content);
return h('div', {
staticClass: 'mu-badge-container',
on: this.$listeners
}, [slots.default, badge]);
}
};
================================================
FILE: src/Badge/Badge.spec.js
================================================
import test from '../utils/testing';
import Badge from './Badge';
import * as colors from '../theme/colors';
test('Badge', ({ mount }) => {
it('should default view', async () => {
const wrapper = mount(Badge, {});
expect(wrapper.html()).toMatchSnapshot();
});
it('should custom class', async () => {
const wrapper = mount(Badge, {
propsData: {
circle: true
}
});
expect(wrapper.html()).toMatchSnapshot();
wrapper.setProps({
badgeClass: 'custom-badge'
});
expect(wrapper.find('.custom-badge').length).toBe(1);
expect(wrapper.html()).toMatchSnapshot();
});
it('should custom color', async () => {
const wrapper = mount(Badge, {
propsData: {
color: 'primary'
}
});
const badge = wrapper.find('.mu-badge')[0];
expect(badge.hasClass('mu-primary-color')).toBe(true);
expect(badge.hasClass('mu-inverse')).toBe(true);
wrapper.setProps({ color: 'teal' });
expect(badge.hasStyle('background-color', colors.teal)).toBe(true);
wrapper.setProps({ color: '#000' });
expect(badge.hasStyle('background-color', '#000')).toBe(true);
});
});
================================================
FILE: src/Badge/__snapshots__/Badge.spec.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Badge should custom class 1`] = `
<div class="mu-badge-container">
<em class="mu-badge mu-badge-circle">
</em>
</div>
`;
exports[`Badge should custom class 2`] = `
<div class="mu-badge-container">
<em class="mu-badge custom-badge mu-badge-circle">
</em>
</div>
`;
exports[`Badge should default view 1`] = `
<div class="mu-badge-container">
<em class="mu-badge ">
</em>
</div>
`;
================================================
FILE: src/Badge/index.js
================================================
import '../styles/components/badge.less';
import theme from '../theme';
import BadgeTheme from './theme';
import Badge from './Badge';
Badge.install = function (Vue) {
Vue.component(Badge.name, Badge);
};
theme.addCreateTheme(BadgeTheme);
export default Badge;
================================================
FILE: src/Badge/theme.js
================================================
export default (theme) => {
return `
.mu-badge{
background-color: ${theme.track};
color: ${theme.text.alternate};
}
`;
};
================================================
FILE: src/BottomNav/BottomNav.js
================================================
import color from '../internal/mixins/color';
import AbstractButton from '../internal/AbstractButton';
export default {
name: 'mu-bottom-nav',
mixins: [color],
provide () {
return {
getBottomNavValue: this.getBottomNavValue,
getBottomNavShift: this.getBottomNavShift,
bottomNavItemClick: this.bottomNavItemClick,
getDefaultVal: this.getDefaultVal,
getActiveColor: this.getActiveColor
};
},
props: {
shift: Boolean,
value: {}
},
data () {
return {
activeValue: this.value || 0
};
},
methods: {
getBottomNavValue () {
return this.activeValue;
},
getBottomNavShift () {
return this.shift;
},
getDefaultVal () {
if (!this.index) this.index = 0;
return this.index++;
},
getActiveColor () {
return {
className: this.getNormalColorClass(this.color, true),
color: this.getColor(this.color)
};
},
bottomNavItemClick (value) {
this.activeValue = value;
}
},
watch: {
value (val) {
this.activeValue = val;
},
activeValue (val) {
if (val === this.value) return;
this.$emit('update:value', val);
this.$emit('change', val);
}
},
render (h) {
return h(AbstractButton, {
class: {
'mu-bottom-nav': true,
'mu-bottom-nav-shift': this.shift,
[this.getColorClass(false)]: this.shift
},
style: {
'background-color': this.shift ? this.getColor(this.color) : ''
},
props: {
ripple: this.shift,
wrapperClass: 'mu-bottom-nav-shift-wrapper',
containerElement: 'div',
rippleOpacity: 0.3
}
}, this.$slots.default);
}
};
================================================
FILE: src/BottomNav/BottomNav.spec.js
================================================
import Vue from 'vue';
import test from '../utils/testing';
import BottomNav from './BottomNav';
import BottomNavItem from './BottomNavItem';
test('Bottom Navigation', ({ mount }) => {
function createNavItem (icon, text, value) {
return Vue.component('nav-item', {
component: {
'mu-bottom-nav-item': BottomNavItem
},
render (h) {
return h('mu-bottom-nav-item', {
props: {
icon: icon,
title: text,
value: value
}
});
}
});
}
it('should default view', async () => {
const wrapper = mount(BottomNav, {
slots: {
default: [
createNavItem('restore', 'Recents'),
createNavItem('favorite', 'Favorites'),
createNavItem('location_on', 'Nearby')
]
}
});
expect(wrapper.html()).toMatchSnapshot();
});
it('should shift mode', async () => {
const wrapper = mount(BottomNav, {
propsData: {
shift: true
},
slots: {
default: [
createNavItem('restore', 'Recents'),
createNavItem('favorite', 'Favorites'),
createNavItem('location_on', 'Nearby')
]
}
});
expect(wrapper.html()).toMatchSnapshot();
});
it('should change value', async () => {
const wrapper = mount(BottomNav, {
propsData: {
value: 'Recents'
},
slots: {
default: [
createNavItem('restore', 'Recents', 'Recents'),
createNavItem('favorite', 'Favorites', 'Favorites'),
createNavItem('location_on', 'Nearby', 'Nearby')
]
}
});
expect(wrapper.find('.mu-bottom-item')[0].hasClass('mu-bottom-item-active')).toBe(true);
wrapper.setProps({
value: 'Nearby'
});
expect(wrapper.vm.activeValue).toBe('Nearby');
});
});
================================================
FILE: src/BottomNav/BottomNavItem.js
================================================
import AbstractButton from '../internal/AbstractButton';
import Icon from '../Icon';
import route from '../internal/mixins/route';
import ripple from '../internal/mixins/ripple';
import { isNotNull } from '../utils';
export default {
name: 'mu-bottom-nav-item',
mixins: [route, ripple],
inject: [
'getBottomNavValue',
'getBottomNavShift',
'getDefaultVal',
'bottomNavItemClick',
'getActiveColor'
],
props: {
icon: String,
title: String,
value: {}
},
data () {
return {
itemVal: null
};
},
created () {
this.itemVal = isNotNull(this.value) ? this.value : this.getDefaultVal();
},
computed: {
active () {
return this.getBottomNavValue() === this.itemVal;
},
activeClassName () {
return this.getActiveColor().className;
},
activeColor () {
return this.getActiveColor().color;
},
shift () {
return this.getBottomNavShift();
}
},
methods: {
handleClick () {
this.bottomNavItemClick(this.itemVal);
}
},
watch: {
value (val) {
this.itemVal = val;
}
},
render (h) {
const icon = this.icon ? h(Icon, { class: 'mu-bottom-item-icon', props: { value: this.icon }}) : undefined;
const title = this.title ? h('span', { staticClass: 'mu-bottom-item-text' }, this.title) : undefined;
return h(AbstractButton, {
staticClass: 'mu-bottom-item',
class: {
'mu-bottom-item-active': this.active,
'is-shift': this.active && this.shift,
[this.activeClassName]: !this.shift && this.active
},
style: {
color: !this.shift && this.active ? this.activeColor : ''
},
props: {
ripple: !this.shift && this.ripple,
containerElement: 'div',
wrapperClass: 'mu-bottom-item-wrapper',
...this.generateRouteProps()
},
on: {
click: this.handleClick
}
}, [icon, title]);
}
};
================================================
FILE: src/BottomNav/__snapshots__/BottomNav.spec.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Bottom Navigation should default view 1`] = `
<div tabindex="0"
class="mu-bottom-nav"
>
<div class="mu-bottom-nav-shift-wrapper">
<div tabindex="0"
class="mu-bottom-item mu-bottom-item-active "
>
<div class="mu-bottom-item-wrapper">
<div class="mu-ripple-wrapper">
</div>
<i class=" mu-icon material-icons mu-bottom-item-icon"
style="font-size: undefinedpx;"
>
restore
</i>
<span class="mu-bottom-item-text">
Recents
</span>
</div>
</div>
<div tabindex="0"
class="mu-bottom-item"
>
<div class="mu-bottom-item-wrapper">
<div class="mu-ripple-wrapper">
</div>
<i class=" mu-icon material-icons mu-bottom-item-icon"
style="font-size: undefinedpx;"
>
favorite
</i>
<span class="mu-bottom-item-text">
Favorites
</span>
</div>
</div>
<div tabindex="0"
class="mu-bottom-item"
>
<div class="mu-bottom-item-wrapper">
<div class="mu-ripple-wrapper">
</div>
<i class=" mu-icon material-icons mu-bottom-item-icon"
style="font-size: undefinedpx;"
>
location_on
</i>
<span class="mu-bottom-item-text">
Nearby
</span>
</div>
</div>
</div>
</div>
`;
exports[`Bottom Navigation should shift mode 1`] = `
<div tabindex="0"
class="mu-bottom-nav mu-bottom-nav-shift "
>
<div class="mu-bottom-nav-shift-wrapper">
<div class="mu-ripple-wrapper">
</div>
<div tabindex="0"
class="mu-bottom-item mu-bottom-item-active is-shift"
>
<div class="mu-bottom-item-wrapper">
<i class=" mu-icon material-icons mu-bottom-item-icon"
style="font-size: undefinedpx;"
>
restore
</i>
<span class="mu-bottom-item-text">
Recents
</span>
</div>
</div>
<div tabindex="0"
class="mu-bottom-item"
>
<div class="mu-bottom-item-wrapper">
<i class=" mu-icon material-icons mu-bottom-item-icon"
style="font-size: undefinedpx;"
>
favorite
</i>
<span class="mu-bottom-item-text">
Favorites
</span>
</div>
</div>
<div tabindex="0"
class="mu-bottom-item"
>
<div class="mu-bottom-item-wrapper">
<i class=" mu-icon material-icons mu-bottom-item-icon"
style="font-size: undefinedpx;"
>
location_on
</i>
<span class="mu-bottom-item-text">
Nearby
</span>
</div>
</div>
</div>
</div>
`;
================================================
FILE: src/BottomNav/index.js
================================================
import '../styles/components/bottom-nav.less';
import theme from '../theme';
import BottomNavTheme from './theme';
import BottomNav from './BottomNav';
import BottomNavItem from './BottomNavItem';
BottomNav.install = function (Vue) {
Vue.component(BottomNav.name, BottomNav);
Vue.component(BottomNavItem.name, BottomNavItem);
};
theme.addCreateTheme(BottomNavTheme);
export { BottomNav, BottomNavItem };
export default BottomNav;
================================================
FILE: src/BottomNav/theme.js
================================================
import { fade } from '../utils/colorManipulator';
export default (theme) => {
return `
.mu-bottom-nav{
background-color: ${theme.background.paper};
}
.mu-bottom-nav-shift{
background-color: ${theme.primary};
}
.mu-bottom-item {
color: ${theme.text.secondary};
}
.mu-bottom-nav-shift .mu-bottom-item {
color: ${fade(theme.text.alternate, 0.7)};
}
.mu-bottom-item-active .mu-bottom-item-icon,
.mu-bottom-item-active .mu-bottom-item-text {
color: ${theme.primary};
}
.mu-bottom-nav-shift .mu-bottom-item-active .mu-bottom-item-icon,
.mu-bottom-nav-shift .mu-bottom-item-active .mu-bottom-item-text {
color: ${theme.text.alternate};
}
`;
};
================================================
FILE: src/BottomSheet/BottomSheet.js
================================================
import popup from '../internal/mixins/popup';
import { BottomSheetTransition } from '../internal/transitions';
export default {
name: 'mu-bottom-sheet',
mixins: [popup],
props: {
lockScroll: {
type: Boolean,
default: true
}
},
render (h) {
return h(BottomSheetTransition, [
this.open ? h('div', {
staticClass: 'mu-bottom-sheet',
style: {
'z-index': this.zIndex
}
}, this.$slots.default) : undefined
]);
}
};
================================================
FILE: src/BottomSheet/BottomSheet.spec.js
================================================
import test from '../utils/testing';
import BottomSheet from './BottomSheet';
test('Bottom Sheet', ({ mount }) => {
it('should default view', async () => {
const wrapper = mount(BottomSheet, {
propsData: {
open: true
}
});
expect(wrapper.html()).toMatchSnapshot();
});
});
================================================
FILE: src/BottomSheet/__snapshots__/BottomSheet.spec.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Bottom Sheet should default view 1`] = `
<div class="mu-bottom-sheet"
style="z-index: 20141224;"
>
</div>
`;
================================================
FILE: src/BottomSheet/index.js
================================================
import '../styles/components/bottom-sheet.less';
import theme from '../theme';
import BottomSheetTheme from './theme';
import BottomSheet from './BottomSheet';
BottomSheet.install = function (Vue) {
Vue.component(BottomSheet.name, BottomSheet);
};
theme.addCreateTheme(BottomSheetTheme);
export default BottomSheet;
================================================
FILE: src/BottomSheet/theme.js
================================================
export default (theme) => {
return `
.mu-bottom-sheet {
background-color: ${theme.background.paper};
}
`;
};
================================================
FILE: src/Breadcrumbs/Breadcrumbs.js
================================================
export default {
name: 'mu-breadcrumbs',
props: {
divider: {
type: String,
default: '/'
}
},
methods: {
createChildren (h) {
if (!this.$slots.default) return;
const divider = this.$slots.divider ? this.$slots.divider : this.divider;
const children = [];
const length = this.$slots.default.length;
const dividerData = { staticClass: 'mu-breadcrumbs-divider' };
this.$slots.default.forEach((el, i) => {
children.push(el);
if (!el.componentOptions || el.componentOptions.tag !== 'mu-breadcrumbs-item' || i === length - 1) return;
children.push(this.$createElement('li', dividerData, divider));
});
return children;
}
},
render (h) {
return h('ul', {
staticClass: 'mu-breadcrumbs',
on: this.$listeners
}, this.createChildren(h));
}
};
================================================
FILE: src/Breadcrumbs/Breadcrumbs.spec.js
================================================
import Vue from 'vue';
import test from '../utils/testing';
import Breadcrumbs from './Breadcrumbs';
import BreadcrumbsItem from './BreadcrumbsItem';
test('Breadcrumbs Items', ({ mount }) => {
function createBreadcrumbsItem (text) {
return Vue.component('breadcrumbs-item', {
components: {
'mu-breadcrumbs-item': BreadcrumbsItem
},
render (h) {
return h('mu-breadcrumbs-item', {
slots: {
default: [
text
]
}
});
}
});
}
it('should default view', async () => {
const wrapper = mount(Breadcrumbs, {
slots: {
default: [
createBreadcrumbsItem('home'),
createBreadcrumbsItem('dashboard')
]
}
});
expect(wrapper.html()).toMatchSnapshot();
});
});
================================================
FILE: src/Breadcrumbs/BreadcrumbsItem.js
================================================
import route from '../internal/mixins/route';
export default {
name: 'mu-breadcrumbs-item',
mixins: [route],
props: {
disabled: Boolean
},
render (h) {
const props = this.to ? this.generateRouteProps() : {
href: this.href
};
return h('li', {
staticClass: 'mu-breadcrumbs-item',
class: this.disabled ? 'is-disabled' : ''
}, [
h(this.to ? 'router-link' : 'a', {
props
}, this.$slots.default)
]);
}
};
================================================
FILE: src/Breadcrumbs/__snapshots__/Breadcrumbs.spec.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Breadcrumbs Items should default view 1`] = `
<ul class="mu-breadcrumbs">
<li class="mu-breadcrumbs-item">
<a>
</a>
</li>
<li class="mu-breadcrumbs-item">
<a>
</a>
</li>
</ul>
`;
================================================
FILE: src/Breadcrumbs/index.js
================================================
import '../styles/components/breadcrumbs.less';
import theme from '../theme';
import BreadcrumbsTheme from './theme';
import Breadcrumbs from './Breadcrumbs';
import BreadcrumbsItem from './BreadcrumbsItem';
Breadcrumbs.install = function (Vue) {
Vue.component(Breadcrumbs.name, Breadcrumbs);
Vue.component(BreadcrumbsItem.name, BreadcrumbsItem);
};
theme.addCreateTheme(BreadcrumbsTheme);
export { Breadcrumbs, BreadcrumbsItem };
export default Breadcrumbs;
================================================
FILE: src/Breadcrumbs/theme.js
================================================
export default (theme) => {
return `
.mu-breadcrumbs-item {
color: ${theme.primary};
}
.mu-breadcrumbs-item.is-disabled {
color: ${theme.text.disabled};
}
.mu-breadcrumbs-divider {
color: ${theme.text.disabled};
}
`;
};
================================================
FILE: src/Button/Button.js
================================================
import route from '../internal/mixins/route';
import ripple from '../internal/mixins/ripple';
import button from '../internal/mixins/button';
import color from '../internal/mixins/color';
import AbstractButton from '../internal/AbstractButton';
export default {
name: 'mu-button',
mixins: [route, ripple, button, color],
props: {
fab: Boolean,
flat: Boolean,
icon: Boolean,
small: Boolean,
large: Boolean,
round: Boolean,
textColor: String,
fullWidth: Boolean
},
computed: {
buttonClass () {
const colorClass = this.getNormalColorClass(this.color, this.icon || this.flat);
const textColorClass = this.getTextColorClass();
return {
'mu-fab-button': this.fab,
'mu-flat-button': this.flat,
'mu-icon-button': this.icon,
'mu-raised-button': !this.icon && !this.flat && !this.fab,
'mu-button-small': this.small,
'mu-button-large': this.large,
'mu-button-full-width': !this.fab && !this.icon && this.fullWidth,
[colorClass]: true,
[textColorClass]: true,
'mu-button-round': this.round,
'is-focus': this.focus
};
}
},
render (h) {
const flat = this.flat || this.icon;
let color = this.getColor(this.textColor);
if (!color && flat) color = this.getColor(this.color);
return h(AbstractButton, {
staticClass: 'mu-button',
class: this.buttonClass,
style: {
'background-color': !flat ? this.getColor(this.color) : '',
color
},
props: {
wrapperClass: 'mu-button-wrapper',
disabled: this.disabled,
keyboardFocused: this.keyboardFocused,
type: this.type,
centerRipple: this.icon,
ripple: this.ripple,
rippleOpacity: this.rippleOpacity,
rippleColor: this.rippleColor,
...this.generateRouteProps()
},
on: this.getListener()
}, this.$slots.default);
}
};
================================================
FILE: src/Button/Button.spec.js
================================================
import test from '../utils/testing';
import Button from './Button';
import * as colors from '../theme/colors';
test('Button', ({ mount }) => {
it('should default view', async () => {
const wrapper = mount(Button, {});
expect(wrapper.html()).toMatchSnapshot();
});
it('should variant style', async () => {
const wrapper = mount(Button, {
propsData: {
fab: true
}
});
expect(wrapper.html()).toMatchSnapshot();
wrapper.setProps({
fab: false,
flat: true
});
expect(wrapper.html()).toMatchSnapshot();
wrapper.setProps({
flat: false,
icon: true
});
expect(wrapper.html()).toMatchSnapshot();
wrapper.setProps({
icon: false,
small: true
});
expect(wrapper.html()).toMatchSnapshot();
wrapper.setProps({
small: false,
large: true
});
expect(wrapper.html()).toMatchSnapshot();
wrapper.setProps({
large: false,
round: true
});
expect(wrapper.html()).toMatchSnapshot();
});
it('should custom color', async () => {
const wrapper = mount(Button, {
propsData: {
color: 'primary',
textColor: 'secondary'
}
});
expect(wrapper.hasClass('mu-primary-color')).toBe(true);
expect(wrapper.hasClass('mu-inverse')).toBe(true);
expect(wrapper.hasClass('mu-secondary-text-color')).toBe(true);
wrapper.setProps({
color: 'teal',
textColor: 'green'
});
expect(wrapper.hasStyle('background-color', colors.teal)).toBe(true);
expect(wrapper.hasStyle('color', colors.green)).toBe(true);
wrapper.setProps({
color: '#000',
textColor: '#fff'
});
expect(wrapper.hasStyle('background-color', '#000')).toBe(true);
expect(wrapper.hasStyle('color', '#fff')).toBe(true);
});
});
================================================
FILE: src/Button/__snapshots__/Button.spec.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Button should default view 1`] = `
<button tabindex="0"
type="button"
class="mu-button mu-raised-button "
style="outline: none;"
>
<div class="mu-button-wrapper">
<div class="mu-ripple-wrapper">
</div>
</div>
</button>
`;
exports[`Button should variant style 1`] = `
<button tabindex="0"
type="button"
class="mu-button mu-fab-button "
style="outline: none;"
>
<div class="mu-button-wrapper">
<div class="mu-ripple-wrapper">
</div>
</div>
</button>
`;
exports[`Button should variant style 2`] = `
<button tabindex="0"
type="button"
class="mu-button mu-flat-button "
style="outline: none;"
>
<div class="mu-button-wrapper">
<div class="mu-ripple-wrapper">
</div>
</div>
</button>
`;
exports[`Button should variant style 3`] = `
<button tabindex="0"
type="button"
class="mu-button mu-icon-button "
style="outline: none;"
>
<div class="mu-button-wrapper">
<div class="mu-ripple-wrapper">
</div>
</div>
</button>
`;
exports[`Button should variant style 4`] = `
<button tabindex="0"
type="button"
class="mu-button mu-raised-button mu-button-small "
style="outline: none;"
>
<div class="mu-button-wrapper">
<div class="mu-ripple-wrapper">
</div>
</div>
</button>
`;
exports[`Button should variant style 5`] = `
<button tabindex="0"
type="button"
class="mu-button mu-raised-button mu-button-large "
style="outline: none;"
>
<div class="mu-button-wrapper">
<div class="mu-ripple-wrapper">
</div>
</div>
</button>
`;
exports[`Button should variant style 6`] = `
<button tabindex="0"
type="button"
class="mu-button mu-raised-button mu-button-round"
style="outline: none;"
>
<div class="mu-button-wrapper">
<div class="mu-ripple-wrapper">
</div>
</div>
</button>
`;
================================================
FILE: src/Button/index.js
================================================
import '../styles/components/button.less';
import theme from '../theme';
import ButtonTheme from './theme';
import Button from './Button';
Button.install = function (Vue) {
Vue.component(Button.name, Button);
};
theme.addCreateTheme(ButtonTheme);
export default Button;
================================================
FILE: src/Button/theme.js
================================================
import { fade, darken } from '../utils/colorManipulator';
export default (theme) => {
return `
.mu-raised-button {
background-color: ${theme.background.paper};
color: ${theme.text.primary};
}
.mu-raised-button.disabled{
color: ${fade(theme.text.primary, 0.3)};
background-color: ${darken(theme.text.alternate, 0.1)};
}
.mu-flat-button {
color: ${theme.text.primary};
}
.mu-flat-button.disabled {
color: ${theme.text.disabled};
}
.mu-icon-button {
color: ${theme.text.primary};
}
.mu-icon-button.disabled {
color: ${theme.text.disabled};
}
.mu-fab-button {
background-color: ${theme.primary};
color: ${theme.text.alternate};
}
.mu-fab-button.disabled {
color: ${fade(theme.text.primary, 0.3)};
background-color: ${darken(theme.text.alternate, 0.1)};
}
`;
};
================================================
FILE: src/Card/Card.js
================================================
export default {
name: 'mu-card',
props: {
raised: Boolean
},
render (h) {
return h('div', {
staticClass: 'mu-card',
class: {
'mu-card__raised': this.raised
},
on: this.$listeners
}, this.$slots.default);
}
};
================================================
FILE: src/Card/CardHeader.js
================================================
export default {
name: 'mu-card-header',
functional: true,
props: {
title: String,
subTitle: String
},
render (h, { data, props, slots }) {
slots = slots();
const title = props.title || props.subTitle ? h('div', {
staticClass: 'mu-card-header-title'
}, [
h('div', { staticClass: 'mu-card-title' }, props.title),
h('div', { staticClass: 'mu-card-sub-title' }, props.subTitle)
]) : undefined;
data.staticClass = `${data.staticClass || ''} mu-card-header`;
return h('div', data, [slots.avatar, title, slots.default]);
}
};
================================================
FILE: src/Card/CardMedia.js
================================================
export default {
name: 'mu-card-media',
functional: true,
props: {
title: String,
subTitle: String
},
render (h, { data, props, children }) {
const title = props.title || props.subTitle ? h('div', {
staticClass: 'mu-card-media-title'
}, [
h('div', { staticClass: 'mu-card-title' }, props.title),
h('div', { staticClass: 'mu-card-sub-title' }, props.subTitle)
]) : undefined;
data.staticClass = `${data.staticClass || ''} mu-card-media`;
return h('div', data, [children, title]);
}
};
================================================
FILE: src/Card/CardTitle.js
================================================
export default {
name: 'mu-card-title',
functional: true,
props: {
title: String,
subTitle: String
},
render (h, { data, props }) {
data.staticClass = `${data.staticClass || ''} mu-card-title-container`;
return h('div', data, [
h('div', { staticClass: 'mu-card-title' }, props.title),
h('div', { staticClass: 'mu-card-sub-title' }, props.subTitle)
]);
}
};
================================================
FILE: src/Card/index.js
================================================
import '../styles/components/card.less';
import theme from '../theme';
import CardTheme from './theme';
import Card from './Card';
import CardHeader from './CardHeader';
import CardMedia from './CardMedia';
import CardTitle from './CardTitle';
import { createSimpleFunctional } from '../utils';
export { Card, CardHeader, CardMedia, CardTitle };
export const CardActions = createSimpleFunctional('mu-card-actions', 'div', 'mu-card-actions');
export const CardText = createSimpleFunctional('mu-card-text', 'div', 'mu-card-text');
Card.install = function (Vue) {
Vue.component(Card.name, Card);
Vue.component(CardHeader.name, CardHeader);
Vue.component(CardMedia.name, CardMedia);
Vue.component(CardTitle.name, CardTitle);
Vue.component(CardActions.name, CardActions);
Vue.component(CardText.name, CardText);
};
theme.addCreateTheme(CardTheme);
export default Card;
================================================
FILE: src/Card/theme.js
================================================
import { fade } from '../utils/colorManipulator';
export default (theme) => {
return `
.mu-card {
background-color: ${theme.background.paper};
}
.mu-card-header-title .mu-card-title{
color: ${fade(theme.text.primary, 0.87)};
}
.mu-card-header-title .mu-card-sub-title{
color: ${fade(theme.text.primary, 0.57)};
}
.mu-card-text{
color: ${theme.text.primary};
}
.mu-card-title-container .mu-card-title{
color: ${theme.text.primary};
}
.mu-card-title-container .mu-card-sub-title {
color: ${theme.text.secondary};
}
`;
};
================================================
FILE: src/Carousel/Carousel.js
================================================
import Button from '../Button';
import swipe from '../internal/directives/swipe';
export default {
name: 'mu-carousel',
directives: {
swipe
},
provide () {
return {
addCarouselItem: this.addCarouselItem,
removeCarouselItem: this.removeCarouselItem,
isCarouselActive: this.isCarouselActive,
getCarouselTransition: this.getTransition
};
},
props: {
active: {
type: Number,
default: 0
},
cycle: {
type: Boolean,
default: true
},
interval: {
type: [Number, String],
default: 6000,
validator: value => value > 0
},
transition: {
type: String,
default: 'slide',
validator: (val) => ['slide', 'fade'].indexOf(val) !== -1
},
hideIndicators: Boolean,
hideControls: Boolean
},
data () {
return {
items: [],
inverse: false,
activeIndex: this.active
};
},
mounted () {
this.startAutoNext();
},
beforeDestroy () {
if (this.timer) clearInterval(this.timer);
},
methods: {
getTransition () {
return this.transition;
},
addCarouselItem (item) {
const index = this.$children.indexOf(item);
return index === -1 ? this.items.push(item) : this.items.splice(index, 0, item);
},
removeCarouselItem (item) {
const index = this.items.indexOf(item);
if (index === -1) return;
this.items.splice(index, 1);
},
isCarouselActive (item) {
return this.items.indexOf(item) === this.activeIndex;
},
startAutoNext () {
if (this.timer) clearInterval(this.timer);
if (!this.cycle) return;
this.timer = setInterval(() => this.next(), this.interval > 0 ? this.interval : 6000);
},
next () {
const maxIndex = this.items.length - 1;
let index = this.activeIndex + 1;
if (index > maxIndex) index = 0;
this.activeIndex = index;
this.inverse = false;
},
prev () {
let index = this.activeIndex - 1;
if (index < 0) index = this.items.length - 1;
this.activeIndex = index;
this.inverse = true;
},
changeActiveIndex (index) {
if (index !== this.activeIndex) {
this.inverse = this.activeIndex > index;
this.activeIndex = index;
}
},
createControls (h) {
if (this.hideControls) return [];
return [
h(Button, {
class: 'mu-carousel-button mu-carousel-button__left',
props: {
icon: true
},
on: {
click: this.prev
}
}, [
this.$slots.left && this.$slots.left.length > 0
? this.$slots.left
: h('svg', {
staticClass: 'mu-carousel-svg-icon',
attrs: {
viewBox: '0 0 24 24'
}
}, [
h('path', {
attrs: {
d: 'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'
}
}),
h('path', {
attrs: {
d: 'M0 0h24v24H0z',
fill: 'none'
}
})
])
]),
h(Button, {
class: 'mu-carousel-button mu-carousel-button__right',
props: {
icon: true
},
on: {
click: this.next
}
}, [
this.$slots.right && this.$slots.right.length > 0
? this.$slots.right
: h('svg', {
staticClass: 'mu-carousel-svg-icon',
attrs: {
viewBox: '0 0 24 24'
}
}, [
h('path', {
attrs: {
d: 'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'
}
}),
h('path', {
attrs: {
d: 'M0 0h24v24H0z',
fill: 'none'
}
})
])
])
];
},
createIndicators (h) {
if (this.hideIndicators) return;
return h('div', {
staticClass: 'mu-carousel-indicators'
}, this.items.map((item, index) => {
const active = index === this.activeIndex;
return this.$scopedSlots.indicator
? this.$scopedSlots.indicator({ index, active })
: h(Button, {
staticClass: 'mu-carousel-indicator-button',
class: {
'mu-carousel-indicator-button__active': active
},
props: {
icon: true
},
on: {
click: () => this.changeActiveIndex(index)
}
}, [
h('span', {
staticClass: 'mu-carousel-indicator-icon'
})
]);
}));
}
},
render (h) {
return h('div', {
staticClass: 'mu-carousel',
class: {
'mu-carousel__transition_inverse': this.inverse
},
directives: [{
name: 'swipe',
value: {
left: this.next,
right: this.prev
},
modifiers: {
touch: true
}
}]
}, [
...this.createControls(h),
this.createIndicators(h),
this.$slots.default
]);
},
watch: {
activeIndex (val) {
this.startAutoNext();
this.$emit('change', val);
this.$emit('update:active', val);
},
active (val) {
this.changeActiveIndex(val);
},
cycle () {
this.startAutoNext();
},
interval () {
this.startAutoNext();
}
}
};
================================================
FILE: src/Carousel/CarouselItem.js
================================================
export default {
name: 'mu-carousel-item',
inject: [
'addCarouselItem',
'removeCarouselItem',
'isCarouselActive',
'getCarouselTransition'
],
data () {
return {
classes: []
};
},
computed: {
active () {
return this.isCarouselActive(this);
},
transition () {
return this.getCarouselTransition();
}
},
created () {
this.addCarouselItem(this);
},
beforeDestroy () {
this.removeCarouselItem(this);
},
render (h) {
return h('transition', {
props: {
name: 'mu-carousel-' + this.transition
}
}, [
h('div', {
staticClass: 'mu-carousel-item',
class: [...this.classes],
directives: [{
name: 'show',
value: this.active
}]
}, this.$slots.default)
]);
}
};
================================================
FILE: src/Carousel/index.js
================================================
import '../styles/components/carousel.less';
import Carousel from './Carousel';
import CarouselItem from './CarouselItem';
Carousel.install = function (Vue) {
Vue.component(Carousel.name, Carousel);
Vue.component(CarouselItem.name, CarouselItem);
};
export { Carousel, CarouselItem };
export default Carousel;
================================================
FILE: src/Checkbox/Checkbox.js
================================================
import select from '../internal/mixins/select';
import Icon from '../Icon';
export default {
name: 'mu-checkbox',
mixins: [select('checkbox')],
props: {
inputValue: [Boolean, Array]
},
computed: {
checked () {
if (!this.inputValue) return false;
const inputValue = this.inputValue;
const value = this.$attrs.value;
if (inputValue instanceof Array) return inputValue.indexOf(value) !== -1;
return inputValue;
}
},
methods: {
toggle () {
const inputValue = this.inputValue;
const value = this.$attrs.value;
if (!inputValue || typeof inputValue === 'boolean') {
this.$emit('change', !inputValue);
return;
}
if (this.checked) {
inputValue.splice(inputValue.indexOf(value), 1);
this.$emit('change', inputValue);
} else {
this.$emit('change', [...inputValue, value]);
}
}
},
render (h) {
const defaultSvgUnCheckIcon = h('svg', {
staticClass: `mu-checkbox-icon-uncheck mu-checkbox-svg-icon`,
attrs: {
viewBox: '0 0 24 24'
}
}, [
h('path', {
attrs: {
d: 'M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z'
}
})
]);
const defaultSvgCheckedIcon = h('svg', {
staticClass: `mu-checkbox-icon-checked mu-checkbox-svg-icon`,
attrs: {
viewBox: '0 0 24 24'
}
}, [
h('path', {
attrs: {
d: 'M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'
}
})
]);
const view = this.createRipple(h, 'mu-checkbox-icon', [
this.uncheckIcon ? h(Icon, {
staticClass: `mu-checkbox-icon-uncheck`,
props: {
value: this.uncheckIcon
}
}) : defaultSvgUnCheckIcon,
this.checkedIcon ? h(Icon, {
staticClass: `mu-checkbox-icon-checked`,
props: {
value: this.checkedIcon
}
}) : defaultSvgCheckedIcon
]);
return this.createSelect(h, view);
}
};
================================================
FILE: src/Checkbox/index.js
================================================
import '../styles/components/checkbox.less';
import theme from '../theme';
import CheckboxTheme from './theme';
import Checkbox from './Checkbox';
Checkbox.install = function (Vue) {
Vue.component(Checkbox.name, Checkbox);
};
theme.addCreateTheme(CheckboxTheme);
export default Checkbox;
================================================
FILE: src/Checkbox/theme.js
================================================
export default (theme) => {
return `
.mu-checkbox {
color: ${theme.text.secondary};
}
.mu-checkbox.disabled {
color: ${theme.text.disabled};
}
.mu-checkbox-checked {
color: ${theme.primary};
}
.mu-checkbox.disabled .mu-checkbox-label {
color: ${theme.text.disabled};
}
.mu-checkbox-label {
color: ${theme.text.primary};
}
`;
};
================================================
FILE: src/Chip/Chip.js
================================================
import color from '../internal/mixins/color';
export default {
name: 'mu-chip',
mixins: [color],
props: {
delete: Boolean,
selected: Boolean,
textColor: String
},
methods: {
handleDelete (e) {
e.stopPropagation();
this.$emit('delete');
}
},
render (h) {
const svgDeleteIcon = h('svg', {
staticClass: 'mu-chip-delete-icon',
attrs: {
viewBox: '0 0 24 24'
},
on: {
click: this.handleDelete
}
}, [
h('path', {
attrs: {
d: 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z'
}
})
]);
return h('span', {
staticClass: `mu-chip ${this.getColorClass()} ${this.getTextColorClass()}`,
class: {
'is-deletable': this.selected
},
attrs: {
tabindex: 0
},
style: {
color: this.getColor(this.textColor),
backgroundColor: this.getColor(this.color)
},
on: this.$listeners
}, [this.$slots.default, this.delete ? svgDeleteIcon : undefined]);
}
};
================================================
FILE: src/Chip/index.js
================================================
import '../styles/components/chip.less';
import theme from '../theme';
import ChipTheme from './theme';
import Chip from './Chip';
Chip.install = function (Vue) {
Vue.component(Chip.name, Chip);
};
theme.addCreateTheme(ChipTheme);
export default Chip;
================================================
FILE: src/Chip/theme.js
================================================
import { fade, emphasize } from '../utils/colorManipulator';
export default (theme) => {
return `
.mu-chip {
background-color: ${theme.background.chip};
color: ${theme.text.primary};
}
.mu-chip:hover .mu-chip-delete-icon{
color: ${fade(fade(theme.text.primary, 0.26), 0.4)};
}
.mu-chip-delete-icon{
color: ${fade(theme.text.primary, 0.26)};
}
.mu-chip:active,
.mu-chip:focus,
.mu-chip.is-deletable {
background-color: ${emphasize(theme.background.chip, 0.08)};
}
.mu-chip:hover{
background-color: ${emphasize(theme.background.chip, 0.08)};
}
.mu-chip.mu-primary-color {
background-color: ${theme.primary};
}
.mu-chip.mu-secondary-color {
background-color: ${theme.secondary};
}
.mu-chip.mu-success-color {
background-color: ${theme.success};
}
.mu-chip.mu-warning-color {
background-color: ${theme.warning};
}
.mu-chip.mu-info-color {
background-color: ${theme.info};
}
.mu-chip.mu-error-color {
background-color: ${theme.error};
}
`;
};
================================================
FILE: src/DataTable/DataTable.js
================================================
import header from './mixins/header';
import body from './mixins/body';
import footer from './mixins/footer';
import colgroup from './mixins/colgroup';
import progress from './mixins/progress';
import mousewheel from '../internal/directives/mousewheel';
import { addResizeListener, removeResizeListener } from '../utils/resize-event';
import { getWidth } from '../utils';
export default {
name: 'mu-data-table',
mixins: [header, body, footer, colgroup, progress],
props: {
data: Array,
columns: Array,
noDataText: {
type: String,
default: '暂无数据'
},
height: [String, Number],
maxHeight: [String, Number],
selectAll: Boolean,
selectable: Boolean,
selects: {
type: Array,
default: () => []
},
sort: {
type: Object
},
checkbox: Boolean,
stripe: Boolean,
border: Boolean,
loading: Boolean,
hideHeader: Boolean,
rowClassName: [String, Function],
rowStyle: [Object, Function],
rowKey: {
type: String,
default: 'id'
},
fit: {
type: Boolean,
default: true
},
hover: {
type: Boolean,
default: true
}
},
methods: {
handleHeaderFooterMousewheel (event, data) {
const { pixelX, pixelY } = data;
if (Math.abs(pixelX) >= Math.abs(pixelY)) {
event.preventDefault();
if (!this.$refs.body) return;
this.$refs.body.scrollLeft += data.pixelX / 5;
}
},
resizeListener () {
this.setCols();
}
},
mounted () {
if (this.fit) {
addResizeListener(this.$el, this.resizeListener);
}
},
beforeDestroy () {
if (this.resizeListener) removeResizeListener(this.$el, this.resizeListener);
},
render (h) {
return h('div', {
staticClass: 'mu-table',
class: {
'mu-table-border': this.border,
'mu-table-flex': this.maxHeight || this.height
},
style: {
'max-height': getWidth(this.maxHeight),
'height': getWidth(this.height)
}
}, [
!this.hideHeader ? this.createHeader(h) : undefined,
this.createProgress(h),
this.createBody(h),
this.createFooter(h)
]);
},
directives: {
mousewheel
}
};
================================================
FILE: src/DataTable/index.js
================================================
import '../styles/components/data-table.less';
import theme from '../theme';
import DataTableTheme from './theme';
import DataTable from './DataTable';
DataTable.install = function (Vue) {
Vue.component(DataTable.name, DataTable);
};
theme.addCreateTheme(DataTableTheme);
export default DataTable;
================================================
FILE: src/DataTable/mixins/body.js
================================================
import Checkbox from '../../Checkbox';
import { ExpandTransition } from '../../internal/transitions';
export default {
props: {
expandRowIndex: {
type: Number,
default: -1
},
autoExpand: {
type: Boolean,
default: true
}
},
data () {
return {
hoverIndex: -1,
expandIndex: this.expandRowIndex,
isSelectAll: false
};
},
methods: {
handleScroll (e) {
const scrollLeft = e.target.scrollLeft;
const theader = this.$refs.header;
const tfooter = this.$refs.tfooter;
if (theader) theader.scrollLeft = scrollLeft;
if (tfooter) tfooter.scrollLeft = scrollLeft;
},
isSelected (index) {
return this.selects.indexOf(index) !== -1;
},
toggleSelect (index) {
if (!this.selectable) return;
const selects = [...this.selects];
const selectIndex = selects.indexOf(index);
if (selectIndex !== -1) {
selects.splice(selectIndex, 1);
} else {
selects.push(index);
}
selects.sort((a, b) => a - b);
this.$emit('update:selects', selects);
this.$emit('select-change', index, selects);
},
toggleExpand (index) {
this.expandIndex = this.expandIndex === index ? -1 : index;
},
createEmpty (h) {
return [
this.$slots.empty
? this.$slots.empty
: h('div', { staticClass: 'mu-table-empty' }, this.noDataText)
];
},
createSlotContent (row, index) {
return this.$scopedSlots.default({
row,
$index: index
});
},
createCheckboxTd (h, index) {
return h('td', {
staticClass: 'mu-checkbox-col'
}, [
h(Checkbox, {
props: {
inputValue: this.isSelected(index),
disabled: !this.selectable
},
on: {
change: () => this.toggleSelect(index),
click: (e) => {
e.stopPropagation();
}
}
})
]);
},
createContent (h) {
const contents = [];
for (let index = 0; index < this.data.length; index++) {
const row = this.data[index];
const arr = this.$scopedSlots.default
? this.createSlotContent(row, index)
: this.columns.map((column) => {
const text = column.formatter && typeof column.formatter === 'function'
? column.formatter(row[column.name], row)
: row[column.name];
return h('td', {
class: [
column.align || column.cellAlign ? `is-${column.cellAlign || column.align}` : ''
]
}, text);
}) || [];
if (this.checkbox) arr.unshift(this.createCheckboxTd(h, index));
const rowClassName = typeof this.rowClassName === 'function' ? this.rowClassName(index, row) : this.rowClassName;
contents.push(
h('tr', {
staticClass: rowClassName,
class: {
'is-hover': this.hover && this.hoverIndex === index,
'is-stripe': this.stripe && index % 2 !== 0,
'is-selected': this.isSelected(index)
},
style: typeof this.rowStyle === 'function' ? this.rowStyle(index, row) : this.rowStyle,
on: {
mouseenter: (e) => {
this.hoverIndex = index;
this.$emit('row-mouseenter', index, row, e);
},
mouseleave: (e) => {
this.hoverIndex = -1;
this.$emit('row-mouseleave', index, row, e);
},
contextmenu: (e) => {
this.$emit('row-contextmenu', index, row, e);
},
click: (e) => {
if (!this.checkbox) this.toggleSelect(index);
if (this.autoExpand) this.toggleExpand(index);
this.$emit('row-click', index, row, e);
},
dblclick: (e) => this.$emit('row-dblclick', index, row, e)
},
key: row[this.rowKey]
}, arr)
);
if (this.$scopedSlots.expand) {
contents.push(
h('tr', {
staticClass: 'mu-table-expand-row'
}, [
h('td', {
attrs: {
colspan: this.columns.length + (this.checkbox ? 1 : 0)
},
class: {
'is-expand': this.expandIndex === index
}
}, this.expandIndex === index ? [
h(ExpandTransition, {}, this.$scopedSlots.expand({
row,
$index: index
}))
] : undefined)
])
);
}
}
return contents;
},
createBody (h) {
return this.data && this.data.length > 0 ? h('div', {
staticClass: 'mu-table-body-wrapper',
on: {
scroll: this.handleScroll
},
ref: 'body'
}, [
h('table', {
staticClass: 'mu-table-body',
style: {
width: this.tableWidth
}
}, [
this.createColGroup(h),
h('tbody', {}, this.createContent(h))
])
]) : this.createEmpty(h);
}
},
watch: {
selects (val) {
this.isSelectAll = val && val.length >= this.data.length;
},
expandRowIndex (val) {
if (this.expandIndex === val) return;
this.expandIndex = val;
},
expandIndex (val) {
this.$emit('update:expandRowIndex', val);
this.$emit('change-expand', val);
}
}
};
================================================
FILE: src/DataTable/mixins/colgroup.js
================================================
import resize from '../../internal/directives/resize';
export default {
props: {
minColWidth: {
type: Number,
default: 128
},
checkboxColWidth: {
type: Number,
default: 75
}
},
data () {
return {
cols: [],
tableWidth: ''
};
},
mounted () {
this.setCols();
},
methods: {
setCols () {
let tableElWidth = this.$el.offsetWidth;
const widthArr = this.columns.filter((column) => column.width).map((column) => Number(column.width));
widthArr.forEach((width) => (tableElWidth -= width));
if (this.checkbox) tableElWidth -= this.checkboxColWidth;
let otherWidth = Math.floor(tableElWidth / (this.columns.length - widthArr.length));
if (otherWidth < this.minColWidth) otherWidth = this.minColWidth;
this.cols = this.columns.map((column) => {
return column.width ? column.width : this.fit ? otherWidth : this.minColWidth;
});
if (this.checkbox) this.cols.unshift(this.checkboxColWidth);
let tableWidth = 0;
this.cols.forEach((width) => (tableWidth += Number(width)));
this.tableWidth = tableWidth + 'px';
},
createColGroup (h) {
return h('colgroup', {
}, this.cols.map((width) => {
return h('col', {
attrs: {
width
}
});
}));
}
},
watch: {
columns () {
this.setCols();
}
},
directives: {
resize
}
};
================================================
FILE: src/DataTable/mixins/footer.js
================================================
export default {
methods: {
createFooter (h) {
return this.$scopedSlots.footer ? h('div', {
staticClass: 'mu-table-footer-wrapper',
ref: 'footer'
}, [
h('table', {
staticClass: 'mu-table-footer',
style: {
width: this.tableWidth
}
}, [
this.createColGroup(h),
h('tbody', {}, this.$scopedSlots.footer({
columns: this.columns
}))
])
]) : undefined;
}
}
};
================================================
FILE: src/DataTable/mixins/header.js
================================================
import Checkbox from '../../Checkbox';
import Tooltip from '../../Tooltip';
export default {
methods: {
toggleSelectAll (val) {
this.isSelectAll = val;
const selects = [];
if (this.isSelectAll) {
let i = 0;
while (i < this.data.length) {
selects.push(i++);
}
}
this.$emit('update:selects', selects);
},
handleSortChange (column) {
const sort = {
...this.sort
};
if (this.sort && this.sort.name === column.name) {
sort.order = sort.order === 'desc' ? 'asc' : 'desc';
} else {
sort.name = column.name;
sort.order = 'desc';
}
this.$emit('update:sort', sort);
this.$emit('sort-change', sort);
},
createSlotHeader () {
return this.$scopedSlots.header({
columns: this.columns
});
},
createSlotTh (column) {
return this.$scopedSlots.th({
...column
});
},
createDefaultTh (h, column) {
return [
column.sortable ? h('svg', {
staticClass: 'mu-table-sort-icon',
attrs: {
viewBox: '0 0 24 24'
}
}, [
h('path', {
attrs: {
d: 'M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'
}
})
]) : undefined,
column.title
];
},
createTh (h, column) {
return this.$scopedSlots.th ? this.createSlotTh(column) : this.createDefaultTh(h, column);
},
createCheckboxTh (h) {
const isEnable = this.selectable && this.selectAll;
return h('th', {
staticClass: 'mu-checkbox-col'
}, [
h(Checkbox, {
props: {
inputValue: this.isSelectAll,
disabled: !isEnable
},
on: {
change: this.toggleSelectAll
}
})
]);
},
createTHeader (h) {
const arr = this.columns.map((column) => {
const th = h('th', {
class: [
column.align ? `is-${column.align}` : '',
column.class || '',
column.sortable ? 'is-sortable' : '',
column.sortable && this.sort && this.sort.name === column.name ? 'is-sorting' : '',
column.sortable && this.sort && this.sort.name === column.name && this.sort.order === 'asc' ? 'sort-asc' : ''
],
on: {
click: () => column.sortable && this.handleSortChange(column)
}
}, this.createTh(h, column));
return column.tooltip ? h(Tooltip, {
props: {
content: column.tooltip
}
}, [th]) : th;
});
if (this.checkbox) arr.unshift(this.createCheckboxTh(h));
return h('tr', {}, arr);
},
createHeader (h) {
return h('div', {
staticClass: 'mu-table-header-wrapper',
ref: 'header',
directives: [{
name: 'mousewheel',
value: this.handleHeaderFooterMousewheel
}]
}, [
h('table', {
staticClass: 'mu-table-header',
style: {
width: this.tableWidth
}
}, [
this.createColGroup(h),
h('thead', {}, [
this.$scopedSlots.header ? this.createSlotHeader() : this.createTHeader(h)
])
])
]);
}
}
};
================================================
FILE: src/DataTable/mixins/progress.js
================================================
import { LinearProgress } from '../../Progress';
import { FadeTransition } from '../../internal/transitions';
export default {
mounted () {
},
methods: {
createProgress (h) {
const headerHeight = this.$refs.header ? this.$refs.header.offsetHeight + 'px' : '';
return h(FadeTransition, {}, [
this.loading ? h(LinearProgress, {
staticClass: 'mu-table-progress',
style: {
top: headerHeight
}
}) : undefined
]);
}
}
};
================================================
FILE: src/DataTable/theme.js
================================================
import * as colors from '../theme/colors';
export default (theme, type) => {
return `
.mu-table {
background-color: ${theme.text.alternate};
}
.mu-table tr {
color: ${theme.text.primary};
}
.mu-table tr.is-stripe {
background-color: ${type === 'dark' ? colors.grey800 : colors.grey50};
}
.mu-table tr.is-hover {
background-color: ${type === 'dark' ? 'rgba(0, 0, 0, .14)' : colors.grey200};
}
.mu-table tr.is-selected {
background-color: ${type === 'dark' ? colors.grey700 : colors.grey100};
}
.mu-table td {
border-bottom-color: ${theme.divider};
}
.mu-table th {
color: ${theme.text.secondary};
border-bottom-color: ${theme.divider};
}
.mu-table th.is-sortable:hover {
color: ${theme.text.primary};
}
.mu-table th.is-sorting {
color: ${theme.text.primary};
}
.mu-table-border {
border-color: ${theme.divider};
}
.mu-table-border th,
.mu-table-border td {
border-right-color: ${theme.divider};
}
.mu-table-empty {
color: ${theme.text.secondary};
}
.mu-table-expand-row td.is-expand {
border-bottom-color: ${theme.divider};
}
`;
};
================================================
FILE: src/DateInput/Container.js
================================================
import BottomSheet from '../BottomSheet';
import Dialog from '../Dialog';
import Popover from '../Popover';
export default {
props: {
container: {
type: String,
default: 'popover', // dialog popover bottomSheet
validator (val) {
return val && ['dialog', 'popover', 'bottomSheet'].indexOf(val) !== -1;
}
},
trigger: {},
open: Boolean
},
methods: {
createWrap (h, children) {
switch (this.container) {
case 'popover':
return h(Popover, {
props: {
open: this.open,
cover: true,
lazy: true,
trigger: this.trigger
},
on: this.$listeners
}, children);
case 'dialog':
return h(Dialog, {
props: {
open: this.open,
dialogClass: 'mu-picker-dialog',
transition: 'slide-top'
},
on: this.$listeners
}, children);
case 'bottomSheet':
return h(BottomSheet, {
props: {
open: this.open
},
on: this.$listeners
}, children);
}
}
},
render (h) {
return this.createWrap(h, this.$slots.default);
}
};
================================================
FILE: src/DateInput/DateInput.js
================================================
import input from '../internal/mixins/input';
import keyboardFocus from '../internal/directives/keyboard-focus';
import { DatePicker, TimePicker, DateTimePicker } from '../Picker';
import PickerMixin from '../Picker/mixins/props';
import Container from './Container';
import dayjs from 'dayjs';
import Button from '../Button/Button';
import keycode from 'keycode';
const DEFAULT_FORMAT = {
date: 'YYYY-MM-DD',
time: 'HH:mm',
year: 'YYYY',
month: 'YYYY-MM',
dateTime: 'YYYY-MM-DD HH:mm'
};
const PickerProps = {
...TimePicker.props,
...DatePicker.props,
...PickerMixin.props
};
delete PickerProps.date;
delete PickerProps.time;
delete PickerProps.type;
delete PickerProps.format;
export default {
name: 'mu-date-input',
mixins: [{
...input
}],
directives: {
keyboardFocus
},
model: {
prop: 'value',
event: 'input'
},
props: {
container: {
type: String,
default: 'popover', // dialog popover bottomSheet
validator (val) {
return val && ['dialog', 'popover', 'bottomSheet'].indexOf(val) !== -1;
}
},
type: {
type: String,
default: 'date' // date, time, year, month, dateTime, dateRange
},
format: {
type: String
},
rangeSeparator: {
type: String,
default: '—'
},
actions: Boolean,
clockType: TimePicker.props.format,
okLabel: {
type: String,
default: '确定'
},
cancelLabel: {
type: String,
default: '取消'
},
value: {},
valueFormat: String,
...PickerProps
},
data () {
return {
open: false,
date: this.value ? dayjs(this.value).toDate() : new Date()
};
},
methods: {
changeValue () {
this.closePicker();
const value = this.valueFormat ? dayjs(this.date).format(this.valueFormat) : this.date;
this.$emit('input', value);
this.$emit('change', value);
if (this.muFormItem) this.muFormItem.onBlur();
},
focus (e) {
this.isFocused = true;
this.$emit('focus', e);
},
blur (e) {
this.isFocused = false;
this.$emit('blur', e);
},
closePicker () {
this.open = false;
},
handleDateChange (date) {
this.date = date;
if (!this.actions) this.changeValue();
},
handleTimeChange (date, mode, finished) {
this.date = date;
if (!finished || mode !== 'minute') return;
if (!this.actions) this.changeValue();
},
generateTextFieldProps () {
return this.generateProps(input.props);
},
generatePickerProps () {
return this.generateProps(PickerMixin.props);
},
generateDatePickerProps () {
return this.generateProps(DatePicker.props);
},
generateTimePickerProps () {
return this.generateProps(TimePicker.props);
},
generateProps (props) {
const obj = {};
Object.keys(props).forEach(key => {
obj[key] = this[key];
});
return obj;
},
createTextField (h) {
const dateStr = this.value ? dayjs(this.value).format(this.format ? this.format : DEFAULT_FORMAT[this.type]) : '';
const listeners = {
...this.$listeners,
keydown: (e) => {
if (keycode(e) === 'tab') {
this.blur(e);
this.open = false;
}
},
click: () => (this.open = true),
focus: this.focus,
blur: this.blur
};
delete listeners.input;
delete listeners.change;
const placeholder = !this.labelFloat ? this.$attrs.placeholder : '';
return [
h('input', {
staticClass: 'mu-text-field-input',
ref: 'input',
attrs: {
tabindex: 0,
...this.$attrs,
disabled: this.disabled,
placeholder,
readonly: true
},
domProps: {
value: dateStr
},
directives: [{
name: 'keyboard-focus',
value: () => (this.open = true)
}],
on: listeners
})
];
},
createActions (h) {
if (!this.actions) return;
return h('div', {
staticClass: `mu-picker-actions`
}, [
h(Button, {
props: {
flat: true,
color: 'primary'
},
on: {
click: this.closePicker
}
}, this.cancelLabel),
h(Button, {
props: {
flat: true,
color: 'primary'
},
on: {
click: this.changeValue
}
}, this.okLabel)
]);
},
createPicker (h) {
switch (this.type) {
case 'date':
case 'year':
case 'month':
return h(DatePicker, {
props: {
...this.generateDatePickerProps(),
...this.generatePickerProps(),
type: this.type === 'month' ? 'month' : this.type === 'year' ? 'year' : 'date',
date: this.date
},
on: {
change: this.handleDateChange
},
style: {
width: this.container === 'bottomSheet' ? 'auto' : ''
},
scopedSlots: {
day: this.$scopedSlots.day
}
}, [this.createActions(h)]);
case 'dateTime':
return h(DateTimePicker, {
props: {
...this.generateDatePickerProps(),
...this.generateTimePickerProps(),
...this.generatePickerProps(),
format: this.clockType,
date: this.date
},
scopedSlots: {
day: this.$scopedSlots.day
},
on: {
change: this.handleTimeChange
},
style: {
width: this.container === 'bottomSheet' ? 'auto' : ''
}
}, [this.createActions(h)]);
case 'time':
return h(TimePicker, {
props: {
...this.generateTimePickerProps(),
...this.generatePickerProps(),
time: this.date,
format: this.clockType
},
on: {
change: this.handleTimeChange
},
style: {
width: this.container === 'bottomSheet' ? 'auto' : ''
}
}, [this.createActions(h)]);
}
}
},
render (h) {
return this.createInput(h, {
staticClass: 'mu-text-field',
ref: 'content'
}, [
this.createTextField(h),
this.$slots.default,
h(Container, {
props: {
container: this.container,
open: this.open,
trigger: this.$el ? this.$el.querySelector('.mu-text-field') : undefined
},
ref: 'popover',
on: {
close: this.closePicker
}
}, [this.createPicker(h)])
]);
},
beforeDestroy () {
this.closePicker();
},
watch: {
value (val) {
this.date = val ? dayjs(val).toDate() : undefined;
}
}
};
================================================
FILE: src/DateInput/index.js
================================================
import DateInput from './DateInput';
import '../styles/components/date-input.less';
DateInput.install = function (Vue) {
Vue.component(DateInput.name, DateInput);
};
export default DateInput;
================================================
FILE: src/Dialog/Dialog.js
================================================
import popup from '../internal/mixins/popup';
import resize from '../internal/directives/resize';
import { convertClass, getWidth } from '../utils';
export default {
name: 'mu-dialog',
mixins: [popup],
directives: {
resize
},
props: {
dialogClass: [String, Array, Object],
title: String,
scrollable: Boolean,
padding: { // 设置scrollable 之后dailog 框距离顶部和底部的值
type: Number,
default: 64
},
fullscreen: Boolean,
width: [String, Number],
maxWidth: [String, Number],
lockScroll: {
type: Boolean,
default: true
},
transition: {
type: String,
default: 'scale',
validator (val) {
return ['slide-top', 'slide-bottom', 'slide-left', 'slide-right', 'fade', 'scale'];
}
}
},
mounted () {
this.setMaxDialogContentHeight();
},
updated () {
this.$nextTick(() => {
this.setMaxDialogContentHeight();
});
},
methods: {
handleWrapperClick (e) {
if (this.$el !== e.target) return;
this.overlayClick(e);
},
setMaxDialogContentHeight () {
const dialogEl = this.$refs.dialog;
if (!dialogEl) return;
if (!this.scrollable) {
dialogEl.style.maxHeight = '';
return;
}
const maxDialogContentHeight = window.innerHeight - 2 * this.padding;
const { footer, title, elBody } = this.$refs;
if (elBody) {
let maxBodyHeight = maxDialogContentHeight;
if (footer) maxBodyHeight -= footer.offsetHeight;
if (title) maxBodyHeight -= title.offsetHeight;
elBody.style.maxHeight = maxBodyHeight + 'px';
}
dialogEl.style.maxHeight = maxDialogContentHeight + 'px';
}
},
watch: {
open (newValue) {
if (!newValue) return;
this.$nextTick(() => {
this.setMaxDialogContentHeight();
const dialogEl = this.$refs.dialog;
if (!dialogEl) return;
dialogEl.focus();
});
}
},
render (h) {
const hasTitleSlots = this.$slots.title && this.$slots.title.length > 0;
const isShowTitle = this.title || hasTitleSlots;
const dialogTitle = isShowTitle ? h('div', {
staticClass: 'mu-dialog-title',
ref: 'title'
}, hasTitleSlots ? this.$slots.title : this.title) : undefined;
const dialogBody = h('div', {
staticClass: 'mu-dialog-body',
ref: 'elBody'
}, this.$slots.default);
const dialogActions = this.$slots.actions && this.$slots.actions.length > 0 ? h('div', {
staticClass: 'mu-dialog-actions',
ref: 'footer'
}, this.$slots.actions) : undefined;
const data = {
staticClass: 'mu-dialog ' + convertClass(this.dialogClass).join(' '),
attrs: {
tabindex: -1
},
class: {
'mu-dialog-fullscreen': this.fullscreen,
'mu-dialog-scrollable': this.scrollable,
[`mu-${this.transition}`]: true
},
ref: 'dialog'
};
if (!this.fullscreen) {
data.style = {
'max-width': this.maxWidth === 'auto' ? undefined : getWidth(this.maxWidth),
'width': this.width === 'auto' ? undefined : getWidth(this.width)
};
}
const dialog = h('div', data, [dialogTitle, dialogBody, dialogActions]);
return this.open ? h('transition', {
props: {
name: `mu-dialog-transition`
}
}, [
h('div', {
staticClass: 'mu-dialog-wrapper',
directives: [{
name: 'resize',
value: () => this.setMaxDialogContentHeight()
}],
style: {
'z-index': this.zIndex
},
on: {
click: this.handleWrapperClick
}
}, [dialog])
]) : null;
}
};
================================================
FILE: src/Dialog/index.js
================================================
import '../styles/components/dialog.less';
import theme from '../theme';
import DialogTheme from './theme';
import Dialog from './Dialog';
Dialog.install = function (Vue) {
Vue.component(Dialog.name, Dialog);
};
theme.addCreateTheme(DialogTheme);
export default Dialog;
================================================
FILE: src/Dialog/theme.js
================================================
import { fade } from '../utils/colorManipulator';
export default (theme) => {
return `
.mu-dialog {
background-color: ${theme.background.paper};
}
.mu-dialog-scrollable .mu-dialog-title {
border-bottom-color: ${theme.divider};
}
.mu-dialog-scrollable .mu-dialog-actions {
border-top-color: ${theme.divider};
}
.mu-dialog-title {
color: ${theme.text.primary};
}
.mu-dialog-body {
color: ${fade(theme.text.primary, 0.6)};
}
`;
};
================================================
FILE: src/Divider/Divider.js
================================================
export default {
name: 'mu-divider',
functional: true,
props: {
inset: Boolean,
shallowInset: Boolean
},
render (h, { data, props }) {
data.staticClass = `${data.staticClass || ''} mu-divider ${props.inset ? 'inset' : ''} ${props.shallowInset ? 'shallow-inset' : ''}`;
return h('hr', data);
}
};
================================================
FILE: src/Divider/index.js
================================================
import '../styles/components/divider.less';
import theme from '../theme';
import DividerTheme from './theme';
import Divider from './Divider';
Divider.install = function (Vue) {
Vue.component(Divider.name, Divider);
};
theme.addCreateTheme(DividerTheme);
export default Divider;
================================================
FILE: src/Divider/theme.js
================================================
export default (theme) => {
return `
.mu-divider {
background-color: ${theme.divider};
}
`;
};
================================================
FILE: src/Drawer/Drawer.js
================================================
import Paper from '../Paper';
import PopupManager from '../internal/mixins/popup/manager';
import { getZIndex } from '../internal/mixins/popup/utils';
import { getWidth } from '../utils';
const transitionEvents = ['msTransitionEnd', 'mozTransitionEnd', 'oTransitionEnd', 'webkitTransitionEnd', 'transitionend'];
export default {
name: 'mu-drawer',
props: {
right: Boolean,
open: Boolean,
docked: {
type: Boolean,
default: true
},
lockScroll: {
type: Boolean,
default: true
},
width: [Number, String],
zDepth: {
type: Number,
default: 16
}
},
data () {
return {
overlayZIndex: getZIndex(),
zIndex: getZIndex()
};
},
computed: {
drawerStyle () {
return {
width: getWidth(this.width),
'z-index': this.docked ? '' : this.zIndex
};
},
overlay () {
return !this.docked;
}
},
mounted () {
if (this.open && !this.docked) PopupManager.open(this);
this.bindTransition();
},
methods: {
overlayClick () {
this.close('overlay');
},
escPress (e) {
if (this.docked) return;
this.close('esc');
},
close (reason) {
this.$emit('update:open', false);
this.$emit('close', reason);
},
bindTransition () {
this.handleTransition = (e) => {
if (e.propertyName !== 'transform') return;
this.$emit(this.open ? 'show' : 'hide');
};
transitionEvents.forEach((eventName) => {
this.$el.addEventListener(eventName, this.handleTransition);
});
},
unBindTransition () {
if (!this.handleTransition) return;
transitionEvents.forEach((eventName) => {
this.$el.removeEventListener(eventName, this.handleTransition);
});
},
resetZIndex () {
this.overlayZIndex = getZIndex();
this.zIndex = getZIndex();
}
},
beforeDestroy () {
PopupManager.close(this);
this.unBindTransition();
},
watch: {
open (val) {
if (val && !this.docked) {
PopupManager.open(this);
} else {
PopupManager.close(this);
}
},
docked (val, oldVal) {
if (val && !oldVal) {
PopupManager.close(this);
}
}
},
render (h) {
return h(Paper, {
class: {
'mu-drawer': true,
'is-open': this.open,
'is-right': this.right
},
style: this.drawerStyle,
props: {
zDepth: this.zDepth
}
}, this.$slots.default);
}
};
================================================
FILE: src/Drawer/index.js
================================================
import '../styles/components/drawer.less';
import theme from '../theme';
import DrawerTheme from './theme';
import Drawer from './Drawer';
Drawer.install = function (Vue) {
Vue.component(Drawer.name, Drawer);
};
theme.addCreateTheme(DrawerTheme);
export default Drawer;
================================================
FILE: src/Drawer/theme.js
================================================
export default (theme) => {
return `
.mu-drawer {
background-color: ${theme.background.paper};
}
`;
};
================================================
FILE: src/ExpansionPanel/ExpansionPanel.js
================================================
import Paper from '../Paper';
import Button from '../Button';
import { ExpandTransition } from '../internal/transitions';
export default {
name: 'mu-expansion-panel',
props: {
expand: Boolean,
zDepth: {
type: Number,
default: 2
}
},
data () {
return {
show: this.expand
};
},
methods: {
createToggleIcon (h) {
return h('svg', {
staticClass: '',
attrs: {
viewBox: '0 0 24 24'
}
}, [
h('g', {}, [
h('path', {
attrs: {
d: 'M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'
}
})
])
]);
},
createHeader (h) {
return h('div', {
staticClass: 'mu-expansion-panel-header',
on: {
click: () => {
this.show = !this.show;
this.$emit('update:expand', this.show);
this.$emit('change', this.show);
}
}
}, [
this.$slots.header,
h(Button, {
staticClass: 'mu-expansion-toggle-btn',
props: {
icon: true
},
attrs: {
tabindex: -1
}
}, [this.createToggleIcon(h)])
]);
},
createContainer (h) {
return h(ExpandTransition, {}, [
h('div', {
staticClass: 'mu-expansion-panel-container',
directives: [{
name: 'show',
value: this.show
}]
}, [
this.createContent(h),
this.createActions(h)
])
]);
},
createContent (h) {
return h('div', {
staticClass: 'mu-expansion-panel-content'
}, this.$slots.default);
},
createActions (h) {
return this.$slots.action && this.$slots.action.length > 0
? h('div', {
staticClass: 'mu-expansion-panel-actions'
}, this.$slots.action)
: undefined;
}
},
render (h) {
return h(Paper, {
staticClass: 'mu-expansion-panel',
class: {
'mu-expansion-panel__expand': this.show
},
props: {
zDepth: this.zDepth,
rounded: false
}
}, [
this.createHeader(h),
this.createContainer(h)
]);
},
watch: {
expand (val) {
this.show = val;
}
}
};
================================================
FILE: src/ExpansionPanel/index.js
================================================
import '../styles/components/expansion-panel.less';
import theme from '../theme';
import ExpansionPanelTheme from './theme';
import ExpansionPanel from './ExpansionPanel';
ExpansionPanel.install = function (Vue) {
Vue.component(ExpansionPanel.name, ExpansionPanel);
};
theme.addCreateTheme(ExpansionPanelTheme);
export default ExpansionPanel;
================================================
FILE: src/ExpansionPanel/theme.js
================================================
export default (theme) => {
return `
.mu-expansion-panel {
color: ${theme.text.primary};
border-top-color: ${theme.divider};
}
.mu-expansion-toggle-btn {
color: ${theme.text.secondary};
}
.mu-expansion-panel-actions {
border-top-color: ${theme.divider};
}
`;
};
================================================
FILE: src/Form/Form.js
================================================
import { isPromise, getObjAttr } from '../utils';
export default {
name: 'mu-form',
provide () {
return {
muForm: this
};
},
props: {
model: {
type: Object,
required: true
},
inline: Boolean,
labelWidth: [String, Number],
labelPosition: {
type: String,
default: 'top',
validator (val) {
return ['left', 'right', 'top'].indexOf(val) !== -1;
}
},
autoValidate: {
type: Boolean,
default: true
}
},
data () {
return {
items: []
};
},
methods: {
getValue (prop) {
return getObjAttr(this.model, prop);
},
addItem (item) {
this.items.push(item);
},
removeItem (item) {
const index = this.items.indexOf(item);
if (index === -1) return;
this.items.splice(index, 1);
},
validate () {
let valid = true;
const promises = [];
for (let i = 0; i < this.items.length; i++) {
const item = this.items[i];
const result = item.validate();
if (isPromise(result)) {
promises.push(result);
continue;
}
if (!result) {
valid = false;
}
}
if (promises.length > 0 && typeof Promise !== 'undefined') {
return Promise.all([
valid ? Promise.resolve(valid) : Promise.reject(valid),
...promises
]).then(
() => true,
() => false
);
}
return typeof Promise !== 'undefined' ? Promise.resolve(valid) : valid;
},
clear () {
this.items.forEach((item) => (item.errorMessage = ''));
}
},
render (h) {
return h('form', {
staticClass: 'mu-form',
class: {
'mu-form__inline': this.inline
},
on: this.$listeners
}, this.$slots.default);
}
};
================================================
FILE: src/Form/FormItem.js
================================================
import Form from './Form';
import Icon from '../Icon';
import { getWidth, isPromise, isObject } from '../utils';
import { SlideTopTransition } from '../internal/transitions';
export default {
name: 'mu-form-item',
inject: ['muForm'],
provide () {
return {
muFormItem: this
};
},
props: {
label: String,
labelFloat: Boolean,
icon: String,
prop: String,
labelWidth: Form.props.labelWidth,
rules: Array,
helpText: String,
errorText: String,
labelPosition: String
},
data () {
return {
focus: false,
errorMessage: this.errorText
};
},
mounted () {
this.setHelpLeft();
this.muForm.addItem(this);
},
updated () {
setTimeout(() => this.setHelpLeft(), 0);
},
beforeDestroy () {
this.muForm.removeItem(this);
},
methods: {
validate () {
if (!this.rules || this.rules.length === 0) return true;
const promises = [];
const promiseMessages = [];
for (let i = 0; i < this.rules.length; i++) {
const rule = this.rules[i];
const result = rule.validate(this.muForm.getValue(this.prop), this.muForm.model);
if (isPromise(result)) {
promises.push(result);
promiseMessages.push(rule.message);
continue;
}
if (!this.validateResult(result, rule.message)) return false;
}
// promise 处理
if (promises.length > 0 && typeof Promise !== 'undefined') {
return Promise.all(promises).then((results) => {
for (let i = 0; i < results.length; i++) {
const valid = this.validateResult(results[i], promiseMessages[i]);
if (!valid) return Promise.reject(false);
}
this.errorMessage = '';
return true;
});
}
this.errorMessage = '';
return true;
},
validateResult (result, message) {
switch (true) {
case isObject(result) && !result.valid:
this.errorMessage = result.message || message;
return false;
case !result:
this.errorMessage = message;
return false;
}
return true;
},
onFocus () {
this.focus = true;
},
onBlur () {
this.focus = false;
if (this.muForm.autoValidate) this.validate();
},
createIcon (h) {
if (!this.icon) return;
return h(Icon, {
staticClass: 'mu-form-item-icon',
props: {
value: this.icon
}
});
},
createContent (h) {
return h('div', {
staticClass: 'mu-form-item-content',
ref: 'content'
}, this.$slots.default);
},
createLabel (h) {
const labelWidth = getWidth(this.labelWidth || this.muForm.labelWidth);
const value = this.muForm.model && this.prop && this.muForm.model[this.prop];
return h('div', {
staticClass: 'mu-form-item-label',
class: {
'is-float': this.labelFloat && !this.focus && !value && value !== 0
},
style: {
width: labelWidth
}
}, this.$slots.label || this.label);
},
createHelpText (h) {
if (!this.helpText && !this.errorMessage) return;
return h('div', {
staticClass: 'mu-form-item-help',
ref: 'help'
}, this.errorMessage || this.helpText);
},
setHelpLeft () {
if (!this.$refs.help || !this.$refs.content) return;
this.$refs.help.style.left = this.$refs.content.offsetLeft + 'px';
}
},
render (h) {
const labelPosition = this.labelPosition || this.muForm.labelPosition;
return h('div', {
staticClass: 'mu-form-item',
class: {
'mu-form-item__float-label': this.labelFloat,
'mu-form-item__label-left': labelPosition === 'left',
'mu-form-item__label-right': labelPosition === 'right',
'mu-form-item__has-icon': !!this.icon && labelPosition === 'top',
'mu-form-item__has-label': !!this.label || (this.$slots.label && this.$slots.label.length > 0),
'mu-form-item__focus': this.focus,
'mu-form-item__error': !!this.errorMessage
}
}, [
this.createLabel(h),
labelPosition === 'top' ? this.createIcon(h) : undefined,
h(SlideTopTransition, {}, [this.createHelpText(h)]),
this.createContent(h)
]);
},
watch: {
errorText (val) {
this.errorMessage = val;
},
rules () {
if (this.errorMessage) this.validate();
}
}
};
================================================
FILE: src/Form/index.js
================================================
import '../styles/components/form.less';
import theme from '../theme';
import FormTheme from './theme';
import Form from './Form';
import FormItem from './FormItem';
Form.install = function (Vue) {
Vue.component(Form.name, Form);
Vue.component(FormItem.name, FormItem);
};
theme.addCreateTheme(FormTheme);
export { Form, FormItem };
export default Form;
================================================
FILE: src/Form/theme.js
================================================
export default (theme) => {
return `
.mu-form-item {
color: ${theme.text.secondary};
}
.mu-form-item__focus {
color: ${theme.primary};
}
.mu-form-item__error {
color: ${theme.error};
}
.mu-form-item-help {
color: ${theme.text.secondary};
}
.mu-form-item__error .mu-form-item-help {
color: ${theme.error};
}
`;
};
================================================
FILE: src/Grid/Col.js
================================================
import { props, generatePropsClass } from './utils';
function createColClass (props) {
const classNames = [];
if (props.span) classNames.push('col-' + props.span);
if (props.sm) classNames.push('col-sm-' + props.sm);
if (props.md) classNames.push('col-md-' + props.md);
if (props.lg) classNames.push('col-lg-' + props.lg);
if (props.xl) classNames.push('col-xl-' + props.xl);
if (props.order) classNames.push('order-' + props.order);
if (props.offset) classNames.push('offset-' + props.offset);
return classNames.join(' ');
}
export default {
name: 'mu-col',
functional: true,
props: {
tag: String,
alignSelf: props.alignSelf,
fill: Boolean,
span: [String, Number], // auto 1-12
sm: [String, Number], // auto 1-12
md: [String, Number], // auto 1-12
lg: [String, Number], // auto 1-12
xl: [String, Number], // auto 1-12
order: [String, Number], // first last 0-12
offset: [String, Number] // 1-11
},
render (h, { data, props, children }) {
const flex = generatePropsClass(props);
const col = createColClass(props);
data.staticClass = ['col', col, flex, data.staticClass || ''].join(' ');
return h(props.tag || 'div', data, children);
}
};
================================================
FILE: src/Grid/Container.js
================================================
export default {
name: 'mu-container',
functional: true,
props: {
fluid: Boolean
},
render (h, { data, props, children }) {
data.staticClass = `${data.staticClass || ''} ${props.fluid ? 'container-fluid' : 'container'}`;
return h('div', data, children);
}
};
================================================
FILE: src/Grid/Flex.js
================================================
import { props, generatePropsClass } from './utils';
export default {
name: 'mu-flex',
functional: true,
props: {
tag: String,
inline: Boolean,
...props
},
render (h, { data, props, children }) {
const flexClass = generatePropsClass(props);
data.staticClass = `${props.inline ? 'd-inline-flex' : 'd-flex'} ${flexClass} ${data.staticClass || ''}`;
return h(props.tag || 'div', data, children);
}
};
================================================
FILE: src/Grid/Row.js
================================================
import { props, generatePropsClass } from './utils';
export default {
name: 'mu-row',
functional: true,
props: {
...props,
tag: String,
gutter: Boolean
},
render (h, { data, props, children }) {
const gutter = !props.gutter ? 'no-gutters' : '';
const flex = generatePropsClass(props);
data.staticClass = ['row', gutter, flex, data.staticClass || ''].join(' ');
return h(props.tag || 'div', data, children);
}
};
================================================
FILE: src/Grid/index.js
================================================
import '../styles/components/bootstrap-grid.less';
import Container from './Container';
import Row from './Row';
import Col from './Col';
import Flex from './Flex';
export { Container, Row, Col };
export default {
install (Vue) {
Vue.component(Container.name, Container);
Vue.component(Row.name, Row);
Vue.component(Col.name, Col);
Vue.component(Flex.name, Flex);
}
};
================================================
FILE: src/Grid/utils.js
================================================
function createEnumProps (type, def, enums) {
return {
type,
default: def,
validator (val) {
return enums.indexOf(val) !== -1;
}
};
}
export const props = {
direction: createEnumProps(String, 'row', ['row', 'column', 'row-reverse', 'column-reverse']),
wrap: createEnumProps(String, '', ['', 'wrap', 'nowrap', 'wrap-reverse']),
fill: Boolean,
justifyContent: createEnumProps(String, 'start', ['start', 'center', 'end', 'between', 'around']),
alignItems: createEnumProps(String, 'start', ['start', 'center', 'end', 'baseline', 'stretch']),
alignContent: createEnumProps(String, '', ['', 'start', 'center', 'end', 'between', 'around', 'stretch']),
alignSelf: createEnumProps(String, '', ['', 'auto', 'start', 'center', 'end', 'baseline', 'stretch'])
};
export function generatePropsClass (props) {
const classNames = [];
if (props.direction) classNames.push('flex-' + props.direction);
if (props.wrap) classNames.push('flex-' + props.wrap);
if (props.fill) classNames.push('flex-fill');
if (props.justifyContent) classNames.push('justify-content-' + props.justifyContent);
if (props.alignItems) classNames.push('align-items-' + props.alignItems);
if (props.alignContent) classNames.push('align-content-' + props.alignContent);
if (props.alignSelf) classNames.push('align-self-' + props.alignSelf);
return classNames.join(' ');
}
================================================
FILE: src/GridList/GridList.js
================================================
export default {
name: 'mu-grid-list',
provide () {
return {
getGridListCellHeight: this.getGridListCellHeight,
getGridListCols: this.getGridListCols,
getGridListPadding: this.getGridListPadding
};
},
props: {
cellHeight: {
type: Number,
default: 180
},
cols: {
type: Number,
default: 2
},
padding: {
type: Number,
default: 4
}
},
methods: {
getGridListCellHeight () {
return this.cellHeight;
},
getGridListCols () {
return this.cols;
},
getGridListPadding () {
return this.padding;
}
},
render (h) {
return h('div', {
staticClass: 'mu-grid-list',
style: {
margin: -this.padding / this.cols + 'px'
},
on: this.$listeners
}, this.$slots.default);
}
};
================================================
FILE: src/GridList/GridTile.js
================================================
export default {
name: 'mu-grid-tile',
inject: ['getGridListCellHeight', 'getGridListCols', 'getGridListPadding'],
props: {
actionPosition: {
type: String,
default: 'right',
validator (val) {
return ['left', 'right'].indexOf(val) !== -1;
}
},
cols: {
type: Number,
default: 1
},
rows: {
type: Number,
default: 1
},
title: {
type: String
},
subTitle: {
type: String
},
titlePosition: {
type: String,
default: 'bottom',
validator (val) {
return ['top', 'bottom'].indexOf(val) !== -1;
}
}
},
computed: {
tileClass () {
return {
'is-top': this.titlePosition === 'top',
'action-left': this.actionPosition === 'left',
'multiline': this.$slots.title && this.$slots.subTitle && this.$slots.title.length > 0 && this.$slots.subTitle.length > 0
};
},
style () {
return {
width: (this.cols / this.getGridListCols() * 100) + '%',
padding: (this.getGridListPadding() / 2) + 'px',
height: (this.getGridListCellHeight() * this.rows) + 'px'
};
}
},
render (h) {
const title = h('div', {
staticClass: 'mu-grid-tile-title'
}, this.$slots.title && this.$slots.title.length > 0 ? this.$slots.title : this.title);
const subTitle = h('div', {
staticClass: 'mu-grid-tile-subtitle'
}, this.$slots.subTitle && this.$slots.subTitle.length > 0 ? this.$slots.subTitle : this.subTitle);
return h('div', {
staticClass: 'mu-grid-tile-wrapper',
style: this.style,
on: this.$listeners
}, [
h('div', {
staticClass: 'mu-grid-tile',
class: this.tileClass
}, [
this.$slots.default,
h('div', { staticClass: 'mu-grid-tile-titlebar' }, [
h('div', { staticClass: 'mu-grid-tile-title-container' }, [title, subTitle]),
h('div', { staticClass: 'mu-grid-tile-action' }, this.$slots.action)
])
])
]);
}
};
================================================
FILE: src/GridList/index.js
================================================
import '../styles/components/grid-list.less';
import theme from '../theme';
import GridListTheme from './theme';
import GridList from './GridList';
import GridTile from './GridTile';
GridList.install = function (Vue) {
Vue.component(GridList.name, GridList);
Vue.component(GridTile.name, GridTile);
};
theme.addCreateTheme(GridListTheme);
export { GridList, GridTile };
export default GridList;
================================================
FILE: src/GridList/theme.js
================================================
export default (theme) => {
return ``;
};
================================================
FILE: src/Helpers/index.js
================================================
import TouchRipple from '../internal/TouchRipple';
import {
ExpandTransition,
FadeTransition,
SlideTopTransition,
SlideBottomTransition,
SlideLeftTransition,
SlideRightTransition,
ScaleTransition
} from '../internal/transitions';
import clickOutside from '../internal/directives/click-outside';
import resize from '../internal/directives/resize';
import scroll from '../internal/directives/scroll';
import elevation from '../internal/directives/elevation';
export default {
install (Vue) {
Vue.component('mu-ripple', TouchRipple);
[
ExpandTransition,
FadeTransition,
SlideTopTransition,
SlideBottomTransition,
SlideLeftTransition,
SlideRightTransition,
ScaleTransition
].forEach(transition => Vue.component(transition.name, transition));
Vue.directive(clickOutside.name, clickOutside);
Vue.directive(resize.name, resize);
Vue.directive(scroll.name, scroll);
Vue.directive(elevation.name, elevation);
}
};
================================================
FILE: src/Icon/Icon.js
================================================
import color from '../internal/mixins/color';
export default {
name: 'mu-icon',
functional: true,
props: {
value: String,
left: Boolean,
right: Boolean,
size: [Number, String],
color: String
},
render (h, { data, props }) {
if (!props.value) return null;
data.style = data.style || {};
data.style = {
...data.style,
'user-select': 'none',
'font-size': props.size + 'px',
'width': props.size + 'px',
'height': props.size + 'px',
'color': color.methods.getColor(props.color)
};
const isMaterial = props.value.indexOf(':') !== 0;
const text = isMaterial ? props.value : '';
data.staticClass = `${data.staticClass || ''} mu-icon ${color.methods.getNormalColorClass(props.color, true)} ${isMaterial ? 'material-icons' : props.value.substring(1)} ${props.left ? 'mu-icon-left' : ''} ${props.right ? 'mu-icon-right' : ''}`;
return h('i', data, text);
}
};
================================================
FILE: src/Icon/index.js
================================================
import Icon from './Icon';
Icon.install = function (Vue) {
Vue.component(Icon.name, Icon);
};
export default Icon;
================================================
FILE: src/List/List.js
================================================
export default {
name: 'mu-list',
provide () {
return {
listItemClick: this.listItemClick,
getNestedLevel: this.getNestedLevel,
getToggleNested: this.getToggleNested,
getToggleNestedType: this.getToggleNestedType,
getListValue: this.getListValue,
getNestedIndent: this.getNestedIndent
};
},
props: {
nestedLevel: {
type: Number,
default: 0
},
textline: {
type: String,
default: '',
validator (val) {
return ['', 'two-line', 'three-line'].indexOf(val) !== -1;
}
},
nestedIndent: {
type: Boolean,
default: true
},
toggleNested: Boolean,
toggleNestedType: {
type: String,
default: 'expand',
validator (val) {
return ['expand', 'popover'].indexOf !== -1;
}
},
dense: Boolean,
value: {}
},
methods: {
listItemClick (item) {
this.$emit('change', item.value);
this.$emit('item-click', item);
},
getListValue () {
return this.value;
},
getNestedLevel () {
return this.nestedLevel;
},
getNestedIndent () {
return this.nestedIndent;
},
getToggleNested () {
return this.toggleNested;
},
getToggleNestedType () {
return this.toggleNestedType;
}
},
render (h) {
return h('ul', {
staticClass: 'mu-list',
class: {
['mu-list-' + this.textline]: this.textline,
'mu-list-dense': this.dense
},
on: this.$listeners
}, this.$slots.default);
}
};
================================================
FILE: src/List/ListAction.js
================================================
export default {
name: 'mu-list-item-action',
functional: true,
render (h, { data, props, children }) {
data.staticClass = `mu-item-action ${children && children.length > 1 ? 'is-more' : ''} ${data.staticClass || ''}`;
return h('div', data, children);
}
};
================================================
FILE: src/List/ListItem.js
================================================
import AbstractButton from '../internal/AbstractButton';
import route from '../internal/mixins/route';
import ripple from '../internal/mixins/ripple';
import ExpandTransition from '../internal/ExpandTransition';
import List from './List';
import Popover from '../Popover';
import { isNotNull } from '../utils';
export default {
name: 'mu-list-item',
mixins: [route, ripple],
inject: [
'listItemClick',
'getNestedLevel',
'getNestedIndent',
'getListValue',
'getToggleNested',
'getToggleNestedType'
],
props: {
button: Boolean,
nestedListClass: [String, Object, Array],
open: {
type: Boolean,
default: true
},
avatar: Boolean,
nested: Boolean, // 是否允许嵌套
tabIndex: [String, Number],
value: {}
},
data () {
return {
nestedOpen: this.open
};
},
computed: {
nestedLevel () {
return this.getNestedLevel();
},
nestedIndent () {
return this.getNestedIndent();
},
toggleNested () {
return this.getToggleNested();
},
toggleNestedType () {
return this.getToggleNestedType();
}
},
created () {
if (this.toggleNestedType === 'popover' && this.nestedOpen) {
this.nestedOpen = false;
}
},
methods: {
handleClick (e) {
this.$emit('click', e);
this.listItemClick(this);
if (this.toggleNested) this.handleToggleNested();
},
handleKeyboardFocus (isFocus) {
this.$emit('keyboard-focus', isFocus);
},
handleHover (event) {
this.$emit('hover', event);
},
handleHoverExit (event) {
this.$emit('hover-exit', event);
},
handleToggleNested () {
this.nestedOpen = !this.nestedOpen;
this.$emit('toggle-nested', this.nestedOpen);
},
handleNestedClick (item) {
this.listItemClick(item);
},
createItem (h) {
const listValue = this.getListValue();
const nestedPadding = this.nestedIndent && this.toggleNestedType === 'expand' ? 18 * this.nestedLevel : 0;
const itemClass = [
'mu-item',
this.nestedOpen && this.nested ? 'mu-item__open' : '',
this.avatar ? 'has-avatar' : '',
this.textline,
isNotNull(listValue) && isNotNull(this.value) && listValue === this.value ? 'is-selected' : ''
].join(' ');
return h(AbstractButton, {
class: 'mu-item-wrapper',
ref: 'button',
attrs: {
tabindex: this.tabIndex
},
props: {
containerElement: this.button ? 'a' : 'div',
wrapperClass: itemClass,
wrapperStyle: {
'margin-left': nestedPadding ? nestedPadding + 'px' : ''
},
disabled: !this.button,
ripple: this.button && this.ripple,
rippleColor: this.rippleColor,
rippleOpacity: this.rippleOpacity,
centerRipple: false,
...this.generateRouteProps()
},
on: {
click: this.handleClick,
keyboardFocus: this.handleKeyboardFocus,
hover: this.handleHover,
hoverExit: this.handleHoverExit
}
}, this.$slots.default);
},
createNestedList (h) {
if (!this.nested) return null;
const list = h(List, {
class: this.nestedListClass,
props: {
nestedIndent: this.nestedIndent,
toggleNested: this.toggleNested,
toggleNestedType: this.toggleNestedType,
nestedLevel: this.nestedLevel + 1,
value: this.getListValue()
},
on: {
'item-click': this.handleNestedClick
}
}, this.$slots.nested);
switch (this.toggleNestedType) {
case 'expand':
return h(ExpandTransition, {}, [this.nestedOpen ? list : undefined]);
case 'popover':
return h(Popover, {
props: {
open: this.nestedOpen,
trigger: this.$el,
appendBody: false,
placement: 'right-start'
},
on: {
close: this.handleToggleNested
}
}, [list]);
}
return null;
}
},
render (h) {
return h('li', [this.createItem(h), this.createNestedList(h)]);
},
watch: {
open (val) {
this.nestedOpen = val;
},
nestedOpen (val) {
this.$emit('update:open', val);
}
}
};
================================================
FILE: src/List/index.js
================================================
import '../styles/components/list.less';
import theme from '../theme';
import ListTheme from './theme';
import { createSimpleFunctional } from '../utils';
import List from './List';
import ListItem from './ListItem';
import ListAction from './ListAction';
export { List, ListItem, ListAction };
export const ListItemContent = createSimpleFunctional('mu-item-content', 'div', 'mu-list-item-content');
export const ListItemTitle = createSimpleFunctional('mu-item-title', 'div', 'mu-list-item-title');
export const ListItemSubTitle = createSimpleFunctional('mu-item-sub-title', 'div', 'mu-list-item-sub-title');
export const ListItemAfterText = createSimpleFunctional('mu-item-after-text', 'span', 'mu-list-item-after-text');
List.install = function (Vue) {
Vue.component(List.name, List);
Vue.component(ListItem.name, ListItem);
Vue.component(ListAction.name, ListAction);
Vue.component(ListItemContent.name, ListItemContent);
Vue.component(ListItemTitle.name, ListItemTitle);
Vue.component(ListItemSubTitle.name, ListItemSubTitle);
Vue.component(ListItemAfterText.name, ListItemAfterText);
};
theme.addCreateTheme(ListTheme);
export default List;
================================================
FILE: src/List/theme.js
================================================
import { fade } from '../utils/colorManipulator';
export default (theme) => {
return `
.mu-item-wrapper.hover {
background-color: ${fade(theme.text.primary, 0.1)};
}
.mu-item {
color: ${theme.text.primary};
}
.mu-item-action {
color: ${theme.text.secondary};
}
.mu-item.is-selected {
color: ${theme.primary};
}
.mu-item-sub-title {
color: ${theme.text.secondary};
}
.mu-item-after-text {
color: ${theme.text.secondary};
}
`;
};
================================================
FILE: src/LoadMore/InfiniteScroll.js
================================================
import Circular from '../Progress/Circular';
import scroll from '../internal/directives/scroll';
import { getScrollTop } from '../utils/dom';
export default {
name: 'mu-infinite-scroll',
directives: {
scroll
},
props: {
loading: {
type: Boolean,
default: false
},
loadingText: {
type: String,
default: '正在加载...'
}
},
data () {
return {
target: null
};
},
mounted () {
this.target = this.$el;
},
methods: {
onScroll (scroller) {
if (this.loading) return;
const isWindow = scroller === window;
const scrollTop = getScrollTop(scroller);
const scrollHeight = isWindow ? document.documentElement.scrollHeight || document.body.scrollHeight : scroller.scrollHeight;
const h = scrollHeight - scrollTop - 5;
const sh = isWindow ? window.innerHeight : scroller.offsetHeight;
if (h <= sh) {
this.$emit('load');
}
}
},
render (h) {
return h('div', {
staticClass: 'mu-infinite-scroll',
directives: [{
name: 'scroll',
value: {
callback: this.onScroll,
target: this.target
}
}]
}, [
h(Circular, {
props: {
size: 24
},
directives: [{
name: 'show',
value: this.loading
}]
}),
h('span', {
staticClass: 'mu-infinite-scroll-text',
directives: [{
name: 'show',
value: this.loading
}]
}, this.loadingText)
]);
}
};
================================================
FILE: src/LoadMore/LoadMore.js
================================================
import RefreshControl from './RefreshControl';
import InfiniteScroll from './InfiniteScroll';
import { isNotNull } from '../utils';
export default {
name: 'mu-load-more',
props: {
refreshing: Boolean,
...InfiniteScroll.props,
loadedAll: Boolean
},
data () {
return {
trigger: null
};
},
mounted () {
this.trigger = this.$el;
},
render (h) {
return h('div', {
staticClass: 'mu-load-more'
}, [
isNotNull(this.$listeners.refresh) ? h(RefreshControl, {
props: {
refreshing: this.refreshing,
trigger: this.trigger
},
on: {
refresh: () => this.$emit('refresh')
}
}) : undefined,
this.$slots.default,
isNotNull(this.$listeners.load) && !this.loadedAll ? h(InfiniteScroll, {
props: {
loading: this.loading,
loadingText: this.loadingText
},
on: {
load: () => this.$emit('load')
}
}) : undefined
]);
}
};
================================================
FILE: src/LoadMore/RefreshControl.js
================================================
import Circular from '../Progress/Circular';
import { transitionEnd, getScrollEventTarget } from '../utils/dom';
import Drag from '../utils/drag';
const LENGTH = 130; // 下拉最大长度
const INITY = -68; // 初始化Y轴位置
export default {
name: 'mu-refresh-control',
props: {
refreshing: Boolean,
trigger: {}
},
data () {
return {
y: 0,
draging: false,
state: 'ready'
};
},
computed: {
refreshStyle () {
const style = {};
if (!this.refreshing && this.draging) {
const translate3d = 'translate3d(0, ' + (this.y + INITY) + 'px, 0) ';
style['-webkit-transform'] = style['transform'] = translate3d;
}
return style;
},
circularStyle () {
const style = {};
if (!this.refreshing && this.draging) {
const percentage = this.y / LENGTH;
const rotate = 'rotate(' + (360 * percentage) + 'deg)';
const opacity = this.y / Math.abs(INITY);
style['-webkit-transform'] = style['transform'] = rotate;
style['opacity'] = opacity;
}
return style;
},
refreshClass () {
const classNames = [];
switch (this.state) {
case 'ready':
classNames.push('mu-refresh-control-noshow');
break;
case 'dragStart':
classNames.push('mu-refresh-control-hide');
break;
case 'dragAnimate':
classNames.push('mu-refresh-control-animate');
classNames.push('mu-refresh-control-hide');
break;
case 'refreshAnimate':
classNames.push('mu-refresh-control-animate');
classNames.push('mu-refresh-control-noshow');
break;
}
if (this.refreshing) classNames.push('mu-refresh-control-refreshing');
return classNames;
}
},
mounted () {
this.bindDrag();
},
beforeDestory () {
this.unbindDrag();
},
methods: {
clearState () {
this.state = 'ready';
this.draging = false;
this.y = 0;
},
getScrollTop () {
const scroller = getScrollEventTarget(this.$el);
if (scroller === window) {
return Math.max(window.pageYOffset || 0, document.documentElement.scrollTop);
} else {
return scroller.scrollTop;
}
},
bindDrag () {
if (!this.trigger) return;
const drager = this.drager = new Drag(this.trigger);
this.state = 'ready';
drager.start(() => {
if (this.refreshing) return;
this.state = 'dragStart';
const scrollTop = this.getScrollTop();
if (scrollTop === 0) this.draging = true;
}).drag((pos, event) => {
const scrollTop = this.getScrollTop();
if (pos.y < 5 || this.refreshing || scrollTop !== 0) return; // 消除误差
if (scrollTop === 0 && !this.draging) {
this.draging = true;
drager.reset(event);
}
this.y = pos.y / 2;
if (this.y < 0) this.y = 1;
if (this.y > LENGTH) this.y = LENGTH;
}).end((pos, event) => {
if (!pos.y || pos.y < 5) {
this.clearState();
return; // 消除误差
}
const canRefresh = this.y + INITY > 0 && this.draging;
this.state = 'dragAnimate';
if (canRefresh) {
this.draging = false;
this.$emit('refresh');
} else {
this.y = 0;
transitionEnd(this.$el, this.clearState.bind(this));
}
});
// fix ios
this.handlePrevent = event => {
if (this.draging && this.y > 0) event.preventDefault();
};
this.handleTouchEnd = () => true;
this.trigger.addEventListener('touchmove', this.handlePrevent, { passive: false });
this.trigger.addEventListener('touchend', this.handleTouchEnd, { passive: false });
},
unbindDrag () {
if (!this.drager) return;
if (this.handlePrevent) {
this.trigger.removeEventListener('touchmove', this.handlePrevent);
this.trigger.removeEventListener('touchend', this.handleTouchEnd);
}
this.drager.destory();
this.drager = null;
},
createRefreshIcon (h) {
return this.refreshing
? h(Circular, {
props: {
size: 24,
borderWidth: 2
}
})
: this.draging
? h('svg', {
staticClass: 'mu-refresh-svg-icon',
style: this.circularStyle,
attrs: {
viewBox: '0 0 24 24'
}
}, [
h('path', {
attrs: {
d: 'M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'
}
})
]) : undefined;
}
},
render (h) {
return h('div', {
staticClass: 'mu-refresh-control',
style: this.refreshStyle,
class: this.refreshClass
}, [
this.createRefreshIcon(h)
]);
},
watch: {
refreshing (val) {
if (!val) {
transitionEnd(this.$el, this.clearState.bind(this));
} else {
this.state = 'refreshAnimate';
}
},
trigger (trigger, oldTrigger) {
if (trigger === oldTrigger) return;
this.unbindDrag();
this.bindDrag();
}
}
};
================================================
FILE: src/LoadMore/index.js
================================================
import '../styles/components/progress.less';
import '../styles/components/load-more.less';
import theme from '../theme';
import LoadMoreTheme from './theme';
import InfiniteScroll from './InfiniteScroll';
import RefreshControl from './RefreshControl';
import LoadMore from './LoadMore';
LoadMore.install = function (Vue) {
Vue.component(LoadMore.name, LoadMore);
Vue.component(RefreshControl.name, RefreshControl);
Vue.component(InfiniteScroll.name, InfiniteScroll);
};
theme.addCreateTheme(LoadMoreTheme);
export { LoadMore, InfiniteScroll, RefreshControl };
export default LoadMore;
================================================
FILE: src/LoadMore/theme.js
================================================
export default theme => {
return `
.mu-refresh-control{
color: ${theme.primary};
}
`;
};
================================================
FILE: src/Menu/Menu.js
================================================
import Popover from '../Popover';
export default {
name: 'mu-menu',
props: {
popoverClass: [String, Object, Array],
cover: Popover.props.cover,
placement: Popover.props.placement,
space: Popover.props.space,
open: Boolean,
openOnHover: Boolean
},
data () {
return {
active: this.open,
trigger: null
};
},
mounted () {
this.trigger = this.$el;
},
methods: {
handleMouseEnter () {
if (!this.openOnHover) return;
if (this.timer) clearTimeout(this.timer);
this.timer = setTimeout(() => this.show(), 100);
},
handleMouseLeave () {
if (!this.openOnHover) return;
if (this.timer) clearTimeout(this.timer);
this.timer = setTimeout(() => this.hide(), 100);
},
show () {
this.active = true;
this.$emit('open');
},
hide () {
this.active = false;
this.$emit('close');
},
createPopover (h) {
return h(Popover, {
class: this.popoverClass,
style: {
'min-width': this.trigger ? this.trigger.offsetWidth + 'px' : ''
},
props: {
cover: this.cover,
placement: this.placement,
open: this.active,
space: this.space,
trigger: this.trigger
},
on: {
close: this.hide,
mouseenter: this.handleMouseEnter,
mouseleave: this.handleMouseLeave
}
}, this.$slots.content);
}
},
render (h) {
return h('div', {
staticClass: 'mu-menu',
class: {
'mu-menu__open': this.active
}
}, [
h('div', {
staticClass: 'mu-menu-activator',
on: {
click: () => this.openOnHover ? null : this.active ? this.hide() : this.show(),
mouseenter: this.handleMouseEnter,
mouseleave: this.handleMouseLeave
}
}, this.$slots.default),
this.createPopover(h)
]);
},
beforeDestroy () {
this.hide();
},
watch: {
active (val) {
this.$emit('update:open', val);
},
open (val) {
this.active = val;
}
}
};
================================================
FILE: src/Menu/index.js
================================================
import '../styles/components/menu.less';
import Menu from './Menu';
Menu.install = function (Vue) {
Vue.component(Menu.name, Menu);
};
export default Menu;
================================================
FILE: src/Pagination/Pagination.js
================================================
import Button from '../Button';
export default {
name: 'mu-pagination',
props: {
total: {
type: Number,
default: 0,
validator: (val) => val >= 0
},
current: {
type: Number,
default: 1,
validator: (val) => val >= 1
},
pageCount: {
type: Number,
default: 7,
validator (val) {
return val >= 5 && val <= 21 && val % 2 !== 0;
}
},
pageSize: {
type: Number,
default: 10
},
raised: Boolean,
circle: Boolean
},
computed: {
showPageCount () {
return this.pageCount - 2;
},
totalPage () {
return Math.ceil(this.total / this.pageSize);
},
items () {
if (this.total === 0) return [];
const showPageCount = this.showPageCount;
const arr = [];
const start = 1;
const end = this.totalPage;
if (end <= showPageCount + 2) {
for (let i = start; i <= end; i++) {
arr.push({ text: i, value: i });
}
return arr;
}
arr.push({ text: start, value: start });
if (this.current - start >= showPageCount - 1) {
const go = this.current - showPageCount;
arr.push({
text: '...',
value: go < 1 ? 1 : go
});
}
let listStart = this.current - Math.floor(showPageCount / 2);
if (listStart <= 1) listStart = 2;
let listEnd = listStart + showPageCount - 1;
if (listEnd >= end) listEnd = end - 1;
listStart = listEnd - showPageCount + 1;
for (let i = listStart; i <= listEnd; i++) {
arr.push({ text: i, value: i });
}
if (end - this.current >= showPageCount - 1) {
const go = this.current + showPageCount;
arr.push({
text: '...',
value: go > end ? end : go
});
}
arr.push({ text: end, value: end });
return arr;
}
},
methods: {
changePage (page) {
this.$emit('update:current', page);
this.$emit('change', page);
},
createPrevBtn (h) {
return h(Button, {
staticClass: 'mu-pagination-btn',
props: {
flat: true,
disabled: this.current <= 1
},
on: {
click: () => this.changePage(this.current - 1)
}
}, [
h('svg', {
staticClass: 'mu-pagination-svg-icon',
attrs: {
viewBox: '0 0 24 24'
}
}, [
h('path', {
attrs: {
d: 'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'
}
})
])
]);
},
creatNextBtn (h) {
return h(Button, {
staticClass: 'mu-pagination-btn',
props: {
flat: true,
disabled: this.current >= this.totalPage
},
on: {
click: () => this.changePage(this.current + 1)
}
}, [
h('svg', {
staticClass: 'mu-pagination-svg-icon',
attrs: {
viewBox: '0 0 24 24'
}
}, [
h('path', {
attrs: {
d: 'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'
}
})
])
]);
},
createPageList (h) {
return h('ul', {}, this.items.map(item => {
const btn = h(Button, {
staticClass: 'mu-pagination-item',
class: {
'is-current': this.current === item.value
},
props: {
flat: true
},
on: {
click: () => this.changePage(item.value)
}
}, [
item.text === '...'
? h('svg', {
staticClass: 'mu-pagination-svg-icon',
attrs: {
viewBox: '0 0 24 24'
}
}, [
h('path', {
attrs: {
d: 'M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'
}
})
])
: item.text
]);
return h('li', {}, [btn]);
}));
}
},
render (h) {
return h('div', {
staticClass: 'mu-pagination',
class: {
'mu-pagination__raised': this.raised,
'mu-pagination__circle': this.circle
}
}, [
this.createPrevBtn(h),
this.createPageList(h),
this.creatNextBtn(h)
]);
}
};
================================================
FILE: src/Pagination/index.js
================================================
import '../styles/components/pagination.less';
import theme from '../theme';
import PaginationTheme from './theme';
import Pagination from './Pagination';
Pagination.install = function (Vue) {
Vue.component(Pagination.name, Pagination);
};
theme.addCreateTheme(PaginationTheme);
export default Pagination;
================================================
FILE: src/Pagination/theme.js
================================================
export default (theme) => {
return `
.mu-pagination {
color: ${theme.text.primary};
font-size: 14px;
}
.mu-pagination__raised .mu-pagination-item.mu-button,
.mu-pagination__raised .mu-pagination-btn.mu-button{
background-color: ${theme.text.alternate};
}
.mu-pagination-item.mu-button.is-current {
background-color: ${theme.primary};
}
`;
};
================================================
FILE: src/Paper/Paper.js
================================================
import { convertClass } from '../utils';
export default {
name: 'mu-paper',
functional: true,
props: {
circle: Boolean,
rounded: {
type: Boolean,
default: true
},
zDepth: {
type: Number,
default: 0,
validator (val) {
return val >= 0 && val < 25;
}
}
},
render (h, { data, props, children }) {
const classObj = {
'mu-paper-circle': props.circle,
'mu-paper-round': props.rounded,
['mu-elevation-' + props.zDepth]: !!props.zDepth
};
data.staticClass = `mu-paper ${data.staticClass || ''} ${convertClass(classObj).join(' ')}`;
return h('div', data, children);
}
};
================================================
FILE: src/Paper/index.js
================================================
import '../styles/components/paper.less';
import '../styles/components/elevation.less';
import theme from '../theme';
import PaperTheme from './theme';
import Paper from './Paper';
Paper.install = function (Vue) {
Vue.component(Paper.name, Paper);
};
theme.addCreateTheme(PaperTheme);
export default Paper;
================================================
FILE: src/Paper/theme.js
================================================
export default (theme) => {
return `
.mu-paper {
color: ${theme.text.primary};
background-color: ${theme.background.paper};
}
`;
};
================================================
FILE: src/Picker/DatePicker/DateDisplay.js
================================================
import color from '../../internal/mixins/color';
export default {
mixins: [color],
props: {
type: String,
dateTimeFormat: Object,
monthDaySelected: {
type: Boolean,
default: true
},
displayDate: Date
},
data () {
return {
displayDates: [this.displayDate],
slideType: 'next'
};
},
methods: {
replaceSelected (date) {
const oldDate = this.displayDates[0];
this.slideType = date.getTime() > oldDate.getTime() ? 'next' : 'prev';
this.displayDates.push(date);
this.displayDates.splice(0, 1);
},
createYearSlide (h) {
return this.displayDates.map((displayDate, index) => {
const fullYear = displayDate.getFullYear();
return h('transition', {
props: {
name: `mu-date-display-${this.slideType}`
},
key: index
}, [
h('div', {
staticClass: 'mu-date-display-slideIn-wrapper',
key: fullYear
}, [
h('div', { staticClass: 'mu-date-display-year-title' }, fullYear)
])
]);
});
},
createMonthSlide (h) {
return this.displayDates.map((displayDate, index) => {
const displayMonthDay = this.type === 'date' ? this.dateTimeFormat.formatDisplay(displayDate) : this.dateTimeFormat.getMonthList()[displayDate.getMonth()];
return h('transition', {
props: {
name: `mu-date-display-${this.slideType}`
},
key: index
}, [
h('div', {
staticClass: 'mu-date-display-slideIn-wrapper',
key: displayMonthDay
}, [
h('div', { staticClass: 'mu-date-display-monthday-title' }, displayMonthDay)
])
]);
});
}
},
render (h) {
const displayYear = h('div', {
staticClass: 'mu-date-display-year',
on: {
click: () => this.$emit('changeView', 'year')
}
}, this.createYearSlide(h));
const displayMonthDay = this.type !== 'year' ? h('div', {
staticClass: 'mu-date-display-monthday',
on: {
click: () => this.$emit('changeView', this.type === 'date' ? 'monthDay' : 'month')
}
}, this.createMonthSlide(h)) : undefined;
return h('div', {
staticClass: 'mu-picker-display mu-date-display ' + this.getColorClass(false),
style: {
'background-color': this.getColor(this.color)
},
class: {
'selected-year': !this.monthDaySelected
}
}, [displayYear, displayMonthDay]);
},
watch: {
displayDate (val) {
this.replaceSelected(val);
}
}
};
================================================
FILE: src/Picker/DatePicker/DatePicker.js
================================================
import color from '../../internal/mixins/color';
import pickerProps from '../mixins/props';
import DateDisplay from './DateDisplay';
import MonthDayView from './MonthDayView';
import YearView from './YearView';
import MonthView from './MonthView';
import * as dateUtils from './dateUtils';
export default {
name: 'mu-date-picker',
mixins: [color, pickerProps],
provide () {
return {
getDayButtonSlots: this.getDayButtonSlots,
getMonthButtonSlots: this.getMonthButtonSlots,
getYearButtonSlots: this.getYearButtonSlots
};
},
props: {
dateTimeFormat: {
type: Object,
default () {
return dateUtils.dateTimeFormat;
}
},
firstDayOfWeek: {
type: Number,
default: 0
},
date: {
type: Date,
default () {
return new Date();
}
},
type: {
type: String,
default: 'date' // date, year, month
},
maxDate: {
type: Date,
default () {
return dateUtils.addYears(new Date(), 100);
}
},
minDate: {
type: Date,
default () {
return dateUtils.addYears(new Date(), -100);
}
},
shouldDisableDate: Function
},
data () {
return {
displayDate: this.date,
view: this.type === 'date' ? 'monthDay' : this.type === 'year' ? 'year' : 'month'
};
},
methods: {
getDayButtonSlots () {
return this.$scopedSlots.day;
},
getMonthButtonSlots () {
return this.$scopedSlots.month;
},
getYearButtonSlots () {
return this.$scopedSlots.year;
},
handleYearChange (year) {
const date = dateUtils.cloneAsDate(this.displayDate);
date.setDate(1);
date.setFullYear(year);
this.changeDisplayDate(date);
if (this.type === 'year') return this.changeDate(date);
this.changeView(this.type === 'month' ? 'month' : 'monthDay');
},
handleMonthChange (date) {
this.changeDisplayDate(date);
if (this.type === 'month') return this.changeDate(date);
this.changeView('monthDay');
},
handleSelect (date) {
if (date.getTime() > this.maxDate.getTime()) date = new Date(this.maxDate.getTime());
if (date.getTime() < this.minDate.getTime()) date = new Date(this.minDate.getTime());
this.changeDisplayDate(date);
this.changeDate(date);
},
changeDate (date) {
this.$emit('change', date);
this.$emit('update:date', date);
},
changeDisplayDate (date) {
this.displayDate = date;
},
changeView (view) {
this.view = view;
}
},
render (h) {
const colorClass = this.getNormalColorClass(this.color, true);
const color = this.getColor(this.color);
const monthdayView = h(MonthDayView, {
props: {
dateTimeFormat: this.dateTimeFormat,
firstDayOfWeek: this.firstDayOfWeek,
maxDate: this.maxDate,
minDate: this.minDate,
displayDate: this.displayDate,
selectedDate: this.date,
shouldDisableDate: this.shouldDisableDate
},
on: {
changeView: this.changeView,
select: this.handleSelect
}
});
const yearView = h(YearView, {
props: {
displayDate: this.displayDate,
maxDate: this.maxDate,
minDate: this.minDate
},
on: {
change: this.handleYearChange
}
});
const monthView = h(MonthView, {
props: {
dateTimeFormat: this.dateTimeFormat,
maxDate: this.maxDate,
minDate: this.minDate,
displayDate: this.displayDate
},
on: {
changeView: this.changeView,
change: this.handleMonthChange
}
});
return h(
'div',
{
staticClass: `mu-picker mu-datepicker ${colorClass}`,
class: {
'mu-picker-landspace': this.landscape
},
style: {
color
}
},
[
!this.noDisplay ? h(DateDisplay, {
props: {
type: this.type,
monthDaySelected: this.view !== 'year',
color: this.displayColor,
displayDate: this.displayDate,
dateTimeFormat: this.dateTimeFormat
},
on: {
changeView: this.changeView
}
}) : undefined,
h(
'div',
{
staticClass: 'mu-picker-container'
},
[
this.view === 'monthDay'
? monthdayView
: this.view === 'month' ? monthView : yearView,
this.$slots.default
]
)
]
);
},
watch: {
date (val) {
this.displayDate = val;
}
}
};
================================================
FILE: src/Picker/DatePicker/DayButton.js
================================================
export default {
inject: [
'getDayButtonSlots'
],
props: {
selected: Boolean,
date: Date,
disabled: Boolean
},
data () {
return {
hover: false
};
},
computed: {
isNow () {
const now = new Date();
return this.date && this.date.getYear() === now.getYear() && this.date.getMonth() === now.getMonth() && this.date.getDate() === now.getDate();
},
dayButtonClass () {
return {
selected: this.selected,
disabled: this.disabled,
now: this.isNow
};
}
},
render (h) {
const scopedSlot = this.getDayButtonSlots();
return this.date ? h('button', {
staticClass: 'mu-day-button',
class: this.dayButtonClass,
on: this.$listeners,
domProps: {
disabled: this.disabled
}
}, scopedSlot ? scopedSlot({
selected: this.selected,
date: this.date,
disabled: this.disabled,
now: this.isNow
}) : [
h('div', { class: 'mu-day-button-bg' }),
h('span', {
class: 'mu-day-button-text',
domProps: {
innerHTML: this.date.getDate()
}
})
]) : h('span', { class: 'mu-day-empty' });
}
};
================================================
FILE: src/Picker/DatePicker/MonthDayView.js
================================================
import DayButton from './DayButton';
import Toolbar from './Toolbar';
import * as dateUtils from './dateUtils';
export default {
props: {
dateTimeFormat: Object,
firstDayOfWeek: {
type: Number,
default: 1
},
maxDate: Date,
minDate: Date,
displayDate: Date,
selectedDate: Date,
shouldDisableDate: Function
},
data () {
const displayDate = dateUtils.cloneDate(this.displayDate);
displayDate.setDate(1);
return {
weekTexts: this.dateTimeFormat.getWeekDayArray(this.firstDayOfWeek),
displayDates: [displayDate],
slideType: 'next'
};
},
computed: {
prevMonth () {
return this.displayDates && dateUtils.monthDiff(this.displayDates[0], this.minDate) > 0;
},
nextMonth () {
return this.displayDates && dateUtils.monthDiff(this.displayDates[0], this.maxDate) < 0;
}
},
methods: {
equalsDate (date) {
return dateUtils.isEqualDate(date, this.selectedDate);
},
isDisableDate (day) {
if (day === null) return false;
let disabled = false;
if (this.maxDate && this.minDate) disabled = !dateUtils.isBetweenDates(day, this.minDate, this.maxDate);
if (!disabled && this.shouldDisableDate) disabled = this.shouldDisableDate(day);
return disabled;
},
handleClick (date) {
if (date) this.$emit('select', date);
},
handleChange (val) {
const displayDate = dateUtils.addMonths(this.displayDates[0], val);
this.changeDisplayDate(displayDate);
},
changeDisplayDate (date) {
const oldDate = this.displayDates[0];
if (date.getFullYear() === oldDate.getFullYear() && date.getMonth() === oldDate.getMonth()) return;
this.slideType = date.getTime() > oldDate.getTime() ? 'next' : 'prev';
const displayDate = dateUtils.cloneDate(date);
displayDate.setDate(1);
this.displayDates.push(displayDate);
this.displayDates.splice(0, 1);
},
createWeek (h) {
return h('div', {
staticClass: 'mu-datepicker-week'
}, this.weekTexts.map((weekText, index) => {
return h('span', {
staticClass: 'mu-datepicker-week-day',
key: index
}, weekText);
}));
},
createMonthDay (h) {
return h('div', {
staticClass: 'mu-datepicker-monthday'
}, this.displayDates.map((displayDate, index) => {
return h('transition', {
props: {
name: `mu-datepicker-slide-${this.slideType}`
},
key: index
}, [
h('div', {
staticClass: 'mu-datepicker-monthday-slide',
key: displayDate.getTime()
}, [this.createContent(h, displayDate)])
]);
}));
},
createContent (h, displayDate) {
const weeksArray = dateUtils.getWeekArray(displayDate || new Date(), this.firstDayOfWeek);
return h('div', {
staticClass: 'mu-datepicker-monthday-content'
}, weeksArray.map((week, i) => {
return h('div', {
staticClass: 'mu-datepicker-monthday-row',
key: i
}, week.map((date, j) => {
return h(DayButton, {
props: {
disabled: this.isDisableDate(date),
selected: this.equalsDate(date),
date: date
},
on: {
click: () => this.handleClick(date)
},
key: `dayButton${i}${j}`
});
}));
}));
}
},
render (h) {
return h('div', {
staticClass: 'mu-datepicker-monthday-container'
}, [
h(Toolbar, {
props: {
slideType: this.slideType,
nextMonth: this.nextMonth,
prevMonth: this.prevMonth,
displayDates: this.displayDates,
dateTimeFormat: this.dateTimeFormat
},
on: {
click: () => this.$emit('changeView', 'month'),
change: this.handleChange
}
}),
this.createWeek(h),
this.createMonthDay(h)
]);
},
watch: {
displayDate (val) {
this.changeDisplayDate(val);
}
}
};
================================================
FILE: src/Picker/DatePicker/MonthView.js
================================================
import Toolbar from './Toolbar';
import * as dateUtils from './dateUtils';
export default {
props: {
dateTimeFormat: Object,
maxDate: Date,
minDate: Date,
displayDate: Date
},
data () {
const displayDate = dateUtils.cloneDate(this.displayDate);
displayDate.setDate(1);
return {
displayDates: [displayDate],
slideType: 'next'
};
},
methods: {
changeDisplayDate (date) {
const oldDate = this.displayDates[0];
if (date.getFullYear() === oldDate.getFullYear() && date.getMonth() === oldDate.getMonth()) return;
this.slideType = date.getTime() > oldDate.getTime() ? 'next' : 'prev';
const displayDate = dateUtils.cloneDate(date);
displayDate.setDate(1);
this.displayDates.push(displayDate);
this.displayDates.splice(0, 1);
},
handleChange (val) {
const displayDate = dateUtils.cloneDate(this.displayDates[0]);
displayDate.setFullYear(displayDate.getFullYear() + val);
this.changeDisplayDate(displayDate);
},
createMonth (h) {
return h('div', {
staticClass: 'mu-datepicker-month'
}, this.displayDates.map((displayDate, index) => {
return h('transition', {
props: {
name: `mu-datepicker-slide-${this.slideType}`
},
key: index
}, [
h('div', {
staticClass: 'mu-datepicker-month-slide',
key: displayDate.getTime()
}, [this.createContent(h, displayDate)])
]);
}));
},
createContent (h, displayDate) {
const monthArray = dateUtils.getMonthArray(displayDate);
return h('div', {
staticClass: 'mu-datepicker-month-content'
}, monthArray.map((month, i) => {
return h('div', {
staticClass: 'mu-datepicker-month-row',
key: i
}, month.map((date) => this.createMonthButton(h, date)));
}));
},
createMonthButton (h, date) {
const monthText = this.dateTimeFormat.getMonthList()[date.getMonth()];
const maxDate = new Date(this.maxDate.getFullYear(), this.maxDate.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());
const minDate = new Date(this.minDate.getFullYear(), this.minDate.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());
const disabled = date.getTime() > maxDate.getTime() || date.getTime() < minDate.getTime();
return h(
'button',
{
staticClass: 'mu-month-button',
attrs: {
disabled
},
class: {
selected:
date.getFullYear() === this.displayDate.getFullYear() &&
date.getMonth() === this.displayDate.getMonth()
},
on: {
click: () => !disabled && this.$emit('change', date)
}
},
[
h('div', { staticClass: 'mu-month-button-bg' }),
h('span', { staticClass: 'mu-month-button-text' }, monthText)
]
);
}
},
render (h) {
return h(
'div',
{
staticClass: 'mu-datepicker-month-container'
},
[
h(Toolbar, {
props: {
slideType: this.slideType,
type: 'year',
displayDates: this.displayDates,
dateTimeFormat: this.dateTimeFormat
},
on: {
click: () => this.$emit('changeView', 'year'),
change: this.handleChange
}
}),
this.createMonth(h)
]
);
}
};
================================================
FILE: src/Picker/DatePicker/Toolbar.js
================================================
import Button from '../../Button';
export default {
props: {
dateTimeFormat: Object,
displayDates: Array,
type: {
type: String,
default: 'month'
}, // month, year
nextMonth: {
type: Boolean,
default: true
},
prevMonth: {
type: Boolean,
default: true
},
slideType: String
},
methods: {
createTitleSlide (h) {
return this.displayDates.map((displayDate, index) => {
const title = this.type === 'month' ? this.dateTimeFormat.formatMonth(displayDate) : displayDate.getFullYear();
return h('transition', {
props: {
name: `mu-datepicker-slide-${this.slideType}`
},
key: index
}, [
h('div', {
staticClass: 'mu-datepicker-toolbar-title',
class: {
'clickable': true
},
key: title,
on: {
click: (e) => this.$emit('click', e)
}
}, title)
]);
});
},
createPrevIcon (h) {
return h('svg', {
staticClass: 'mu-datepicker-svg-icon',
attrs: {
viewBox: '0 0 24 24'
}
}, [
h('path', {
attrs: {
d: 'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'
}
})
]);
},
createNextIcon (h) {
return h('svg', {
staticClass: 'mu-datepicker-svg-icon',
attrs: {
viewBox: '0 0 24 24'
}
}, [
h('path', {
attrs: {
d: 'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'
}
})
]);
}
},
render (h) {
return h('div', {
staticClass: 'mu-datepicker-toolbar'
}, [
h(Button, {
staticClass: 'mu-datepicker-tool-btn',
props: {
icon: true,
disabled: !this.prevMonth
},
on: {
click: () => this.$emit('change', -1)
}
}, [this.createPrevIcon(h)]),
h('div', {
staticClass: 'mu-datepicker-toolbar-title-wrapper',
on: {
click: () => this.$emit('changeView', 'month')
}
}, [this.createTitleSlide(h)]),
h(Button, {
staticClass: 'mu-datepicker-tool-btn',
props: {
icon: true,
disabled: !this.nextMonth
},
on: {
click: () => this.$emit('change', 1)
}
}, [this.createNextIcon(h)])
]);
}
};
================================================
FILE: src/Picker/DatePicker/YearButton.js
================================================
export default {
props: {
year: [String, Number],
selected: Boolean
},
mounted () {
if (this.selected) this.$parent.scrollToSelectedYear(this.$el);
},
render (h) {
return h('button', {
staticClass: 'mu-year-button',
class: {
selected: this.selected
},
on: this.$listeners
}, [
h('span', {
staticClass: 'mu-year-button-text'
}, this.year)
]);
},
watch: {
selected (val) {
if (val) this.$parent.scrollToSelectedYear(this.$el);
}
}
};
================================================
FILE: src/Picker/DatePicker/YearView.js
================================================
import YearButton from './YearButton';
export default {
props: {
maxDate: Date,
minDate: Date,
displayDate: Date
},
computed: {
years () {
const minYear = this.minDate.getFullYear();
const maxYear = this.maxDate.getFullYear();
const years = [];
for (let year = minYear; year <= maxYear; year++) {
years.push(year);
}
return years;
}
},
methods: {
scrollToSelectedYear (yearButtonNode) {
const container = this.$refs.container;
const containerHeight = container.clientHeight;
const yearButtonNodeHeight = yearButtonNode.clientHeight || 32;
const scrollYOffset = (yearButtonNode.offsetTop + yearButtonNodeHeight / 2) - containerHeight / 2;
setTimeout(() => (container.scrollTop = scrollYOffset), 0);
},
createYearButtons (h) {
return this.years.map((year) => {
return h(YearButton, {
props: {
year,
selected: year === this.displayDate.getFullYear()
},
on: {
click: (e) => {
this.$emit('change', year);
}
}
});
});
}
},
render (h) {
return h('div', {
staticClass: 'mu-datepicker-year-container'
}, [
h('div', {
staticClass: 'mu-datepicker-year',
ref: 'container'
}, [
h('div', {
staticClass: 'mu-datepicker-year-list'
}, this.createYearButtons(h))
])
]);
}
};
================================================
FILE: src/Picker/DatePicker/dateUtils.js
================================================
/**
* material-ui dateUtils.js
* https://github.com/callemall/material-ui/blob/master/src/DatePicker/dateUtils.js
*/
const localConfig = {
dayAbbreviation: ['日', '一', '二', '三', '四', '五', '六'],
dayList: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
monthList: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
monthLongList: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
};
export const dateTimeFormat = {
formatDisplay (date) {
var day = date.getDate();
return `${localConfig.monthList[date.getMonth()]}-${day > 9 ? day : '0' + day} ${localConfig.dayList[date.getDay()]}`;
},
formatDateDisplay (date) {
var day = date.getDate();
return `${localConfig.monthList[date.getMonth()]}-${day > 9 ? day : '0' + day}`;
},
formatMonth (date) {
return `${date.getFullYear()} ${localConfig.monthLongList[date.getMonth()]}`;
},
getWeekDayArray (firstDayOfWeek) {
const beforeArray = [];
const afterArray = [];
const dayAbbreviation = localConfig.dayAbbreviation;
for (let i = 0; i < dayAbbreviation.length; i++) {
if (i < firstDayOfWeek) {
afterArray.push(dayAbbreviation[i]);
} else {
beforeArray.push(dayAbbreviation[i]);
}
}
return beforeArray.concat(afterArray);
},
getMonthList () {
return localConfig.monthLongList;
}
};
export function getDaysInMonth (d) {
const resultDate = getFirstDayOfMonth(d);
resultDate.setMonth(resultDate.getMonth() + 1);
resultDate.setDate(resultDate.getDate() - 1);
return resultDate.getDate();
}
export function getFirstDayOfMonth (d) {
return new Date(d.getFullYear(), d.getMonth(), 1);
}
export function getMonthArray (d) {
const length = 3;
const months = [];
let month = [];
for (let i = 0; i < 12; i++) {
month.push(new Date(d.getFullYear(), i, 1, d.getHours(), d.getMinutes()));
if (month.length === length) {
months.push(month);
month = [];
}
}
return months;
}
export function getWeekArray (d, firstDayOfWeek) {
const dayArray = [];
const daysInMonth = getDaysInMonth(d);
const weekArray = [];
let week = [];
for (let i = 1; i <= daysInMonth; i++) {
dayArray.push(new Date(d.getFullYear(), d.getMonth(), i, d.getHours(), d.getMinutes()));
}
const addWeek = (week) => {
const emptyDays = 7 - week.length;
for (let i = 0; i < emptyDays; ++i) {
week[weekArray.length ? 'push' : 'unshift'](null);
}
weekArray.push(week);
};
dayArray.forEach((day) => {
if (week.length > 0 && day.getDay() === firstDayOfWeek) {
addWeek(week);
week = [];
}
week.push(day);
if (dayArray.indexOf(day) === dayArray.length - 1) {
addWeek(week);
}
});
return weekArray;
}
export function addDays (d, days) {
const newDate = cloneDate(d);
newDate.setDate(d.getDate() + days);
return newDate;
}
export function addMonths (d, months) {
const newDate = cloneDate(d);
newDate.setMonth(d.getMonth() + months);
return newDate;
}
export function addYears (d, years) {
const newDate = cloneDate(d);
newDate.setFullYear(d.getFullYear() + years);
return newDate;
}
export function cloneDate (d) {
return new Date(d.getTime());
}
export function cloneAsDate (d) {
const clonedDate = cloneDate(d);
clonedDate.setHours(0, 0, 0, 0);
return clonedDate;
}
export function isBeforeDate (d1, d2) {
const date1 = cloneAsDate(d1);
const date2 = cloneAsDate(d2);
return (date1.getTime() < date2.getTime());
}
export function isAfterDate (d1, d2) {
const date1 = cloneAsDate(d1);
const date2 = cloneAsDate(d2);
return (date1.getTime() > date2.getTime());
}
export function isBetweenDates (dateToCheck, startDate, endDate) {
return (!(isBeforeDate(dateToCheck, startDate)) &&
!(isAfterDate(dateToCheck, endDate)));
}
export function isEqualDate (d1, d2) {
return d1 && d2 &&
(d1.getFullYear() === d2.getFullYear()) &&
(d1.getMonth() === d2.getMonth()) &&
(d1.getDate() === d2.getDate());
}
export function monthDiff (d1, d2) {
let m;
m = (d1.getFullYear() - d2.getFullYear()) * 12;
m += d1.getMonth();
m -= d2.getMonth();
return m;
}
export function yearDiff (d1, d2) {
return ~~(monthDiff(d1, d2) / 12);
}
================================================
FILE: src/Picker/DatePicker/index.js
================================================
export { default } from './DatePicker';
================================================
FILE: src/Picker/DateTimePicker/DateTimeDisplay.js
================================================
import color from '../../internal/mixins/color';
export default {
mixins: [color],
props: {
affix: String,
dateTimeFormat: Object,
view: String,
format: String,
viewType: String,
displayDate: Date
},
computed: {
sanitizeTime () {
let hour = this.displayDate.getHours();
let min = this.displayDate.getMinutes().toString();
if (this.format === 'ampm') {
hour %= 12;
hour = hour || 12;
}
hour = hour.toString();
if (hour.length < 2) hour = `0${hour}`;
if (min.length < 2) min = `0${min}`;
return [hour, min];
}
},
methods: {
createDateDisplay (h) {
const fullYear = this.displayDate.getFullYear();
const displayMonthDay = this.dateTimeFormat.formatDateDisplay(this.displayDate);
return h('div', {
staticClass: 'mu-date-display'
}, [
h('div', {
staticClass: 'mu-date-display-year',
class: {
active: this.view === 'year'
},
on: {
click: () => this.$emit('changeView', 'year')
}
}, [
h('div', {
staticClass: 'mu-date-display-year-title'
}, fullYear)
]),
h('div', {
staticClass: 'mu-date-display-monthday',
class: {
active: this.view === 'monthD
gitextract_cw61ox71/
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitattributes
├── .gitignore
├── .postcssrc.js
├── .travis.yml
├── README.md
├── commitlint.config.js
├── demo/
│ ├── App.vue
│ ├── bug-date-input.vue
│ ├── bug-popup.vue
│ ├── components/
│ │ └── Sidebar.js
│ ├── index.html
│ └── main.js
├── jest.config.js
├── package.json
├── rollup.config.js
├── src/
│ ├── Alert/
│ │ ├── Alert.js
│ │ ├── Alert.spec.js
│ │ ├── __snapshots__/
│ │ │ └── Alert.spec.js.snap
│ │ └── index.js
│ ├── AppBar/
│ │ ├── AppBar.js
│ │ ├── AppBar.spec.js
│ │ ├── __snapshots__/
│ │ │ └── AppBar.spec.js.snap
│ │ ├── index.js
│ │ └── theme.js
│ ├── AutoComplete/
│ │ ├── AutoComplete.js
│ │ ├── AutoComplete.spec.js
│ │ ├── __snapshots__/
│ │ │ └── AutoComplete.spec.js.snap
│ │ ├── filter.js
│ │ └── index.js
│ ├── Avatar/
│ │ ├── Avatar.js
│ │ ├── Avatar.spec.js
│ │ ├── __snapshots__/
│ │ │ └── Avatar.spec.js.snap
│ │ ├── index.js
│ │ └── theme.js
│ ├── Badge/
│ │ ├── Badge.js
│ │ ├── Badge.spec.js
│ │ ├── __snapshots__/
│ │ │ └── Badge.spec.js.snap
│ │ ├── index.js
│ │ └── theme.js
│ ├── BottomNav/
│ │ ├── BottomNav.js
│ │ ├── BottomNav.spec.js
│ │ ├── BottomNavItem.js
│ │ ├── __snapshots__/
│ │ │ └── BottomNav.spec.js.snap
│ │ ├── index.js
│ │ └── theme.js
│ ├── BottomSheet/
│ │ ├── BottomSheet.js
│ │ ├── BottomSheet.spec.js
│ │ ├── __snapshots__/
│ │ │ └── BottomSheet.spec.js.snap
│ │ ├── index.js
│ │ └── theme.js
│ ├── Breadcrumbs/
│ │ ├── Breadcrumbs.js
│ │ ├── Breadcrumbs.spec.js
│ │ ├── BreadcrumbsItem.js
│ │ ├── __snapshots__/
│ │ │ └── Breadcrumbs.spec.js.snap
│ │ ├── index.js
│ │ └── theme.js
│ ├── Button/
│ │ ├── Button.js
│ │ ├── Button.spec.js
│ │ ├── __snapshots__/
│ │ │ └── Button.spec.js.snap
│ │ ├── index.js
│ │ └── theme.js
│ ├── Card/
│ │ ├── Card.js
│ │ ├── CardHeader.js
│ │ ├── CardMedia.js
│ │ ├── CardTitle.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Carousel/
│ │ ├── Carousel.js
│ │ ├── CarouselItem.js
│ │ └── index.js
│ ├── Checkbox/
│ │ ├── Checkbox.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Chip/
│ │ ├── Chip.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── DataTable/
│ │ ├── DataTable.js
│ │ ├── index.js
│ │ ├── mixins/
│ │ │ ├── body.js
│ │ │ ├── colgroup.js
│ │ │ ├── footer.js
│ │ │ ├── header.js
│ │ │ └── progress.js
│ │ └── theme.js
│ ├── DateInput/
│ │ ├── Container.js
│ │ ├── DateInput.js
│ │ └── index.js
│ ├── Dialog/
│ │ ├── Dialog.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Divider/
│ │ ├── Divider.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Drawer/
│ │ ├── Drawer.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── ExpansionPanel/
│ │ ├── ExpansionPanel.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Form/
│ │ ├── Form.js
│ │ ├── FormItem.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Grid/
│ │ ├── Col.js
│ │ ├── Container.js
│ │ ├── Flex.js
│ │ ├── Row.js
│ │ ├── index.js
│ │ └── utils.js
│ ├── GridList/
│ │ ├── GridList.js
│ │ ├── GridTile.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Helpers/
│ │ └── index.js
│ ├── Icon/
│ │ ├── Icon.js
│ │ └── index.js
│ ├── List/
│ │ ├── List.js
│ │ ├── ListAction.js
│ │ ├── ListItem.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── LoadMore/
│ │ ├── InfiniteScroll.js
│ │ ├── LoadMore.js
│ │ ├── RefreshControl.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Menu/
│ │ ├── Menu.js
│ │ └── index.js
│ ├── Pagination/
│ │ ├── Pagination.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Paper/
│ │ ├── Paper.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Picker/
│ │ ├── DatePicker/
│ │ │ ├── DateDisplay.js
│ │ │ ├── DatePicker.js
│ │ │ ├── DayButton.js
│ │ │ ├── MonthDayView.js
│ │ │ ├── MonthView.js
│ │ │ ├── Toolbar.js
│ │ │ ├── YearButton.js
│ │ │ ├── YearView.js
│ │ │ ├── dateUtils.js
│ │ │ └── index.js
│ │ ├── DateTimePicker/
│ │ │ ├── DateTimeDisplay.js
│ │ │ ├── DateTimePicker.js
│ │ │ └── index.js
│ │ ├── TimePicker/
│ │ │ ├── Hours.js
│ │ │ ├── ListView.js
│ │ │ ├── Minutes.js
│ │ │ ├── Number.js
│ │ │ ├── Pointer.js
│ │ │ ├── TimeDisplay.js
│ │ │ ├── TimePicker.js
│ │ │ ├── index.js
│ │ │ └── timeUtils.js
│ │ ├── index.js
│ │ ├── mixins/
│ │ │ └── props.js
│ │ └── theme.js
│ ├── Popover/
│ │ ├── Popover.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Progress/
│ │ ├── Circular.js
│ │ ├── CircularProgress.js
│ │ ├── LinearProgress.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Radio/
│ │ ├── Radio.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Select/
│ │ ├── Option.js
│ │ ├── Select.js
│ │ ├── index.js
│ │ ├── mixins/
│ │ │ ├── events.js
│ │ │ ├── keyboard.js
│ │ │ ├── menu.js
│ │ │ └── selection.js
│ │ └── theme.js
│ ├── SlidePicker/
│ │ ├── Picker.js
│ │ ├── PickerSlot.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Slider/
│ │ ├── Slider.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Snackbar/
│ │ ├── Snackbar.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Stepper/
│ │ ├── Step.js
│ │ ├── StepButton.js
│ │ ├── StepConnector.js
│ │ ├── StepContent.js
│ │ ├── StepLabel.js
│ │ ├── Stepper.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── SubHeader/
│ │ ├── SubHeader.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Switch/
│ │ ├── Switch.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Tabs/
│ │ ├── Tab.js
│ │ ├── Tabs.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── TextField/
│ │ ├── TextField.js
│ │ ├── Textarea.js
│ │ ├── index.js
│ │ └── theme.js
│ ├── Tooltip/
│ │ ├── Tooltip.js
│ │ ├── TooltipContent.js
│ │ └── index.js
│ ├── index.js
│ ├── internal/
│ │ ├── AbstractButton.js
│ │ ├── CircleRipple.js
│ │ ├── ExpandTransition.js
│ │ ├── FocusRipple.js
│ │ ├── TouchRipple.js
│ │ ├── directives/
│ │ │ ├── click-outside.js
│ │ │ ├── elevation.js
│ │ │ ├── keyboard-focus.js
│ │ │ ├── mousewheel.js
│ │ │ ├── resize.js
│ │ │ ├── scroll.js
│ │ │ └── swipe.js
│ │ ├── mixins/
│ │ │ ├── button.js
│ │ │ ├── color.js
│ │ │ ├── input.js
│ │ │ ├── popup/
│ │ │ │ ├── Overlay.js
│ │ │ │ ├── index.js
│ │ │ │ ├── manager.js
│ │ │ │ └── utils.js
│ │ │ ├── ripple.js
│ │ │ ├── route.js
│ │ │ └── select.js
│ │ └── transitions.js
│ ├── styles/
│ │ ├── base.less
│ │ ├── colors.less
│ │ ├── components/
│ │ │ ├── alert.less
│ │ │ ├── appbar.less
│ │ │ ├── avatar.less
│ │ │ ├── badge.less
│ │ │ ├── bootstrap-grid.less
│ │ │ ├── bottom-nav.less
│ │ │ ├── bottom-sheet.less
│ │ │ ├── breadcrumbs.less
│ │ │ ├── button.less
│ │ │ ├── card.less
│ │ │ ├── carousel.less
│ │ │ ├── checkbox.less
│ │ │ ├── chip.less
│ │ │ ├── circle-ripple.less
│ │ │ ├── data-table.less
│ │ │ ├── date-input.less
│ │ │ ├── dialog.less
│ │ │ ├── divider.less
│ │ │ ├── drawer.less
│ │ │ ├── elevation.less
│ │ │ ├── expand-transition.less
│ │ │ ├── expansion-panel.less
│ │ │ ├── focus-ripple.less
│ │ │ ├── form.less
│ │ │ ├── grid-list.less
│ │ │ ├── grid.less
│ │ │ ├── input.less
│ │ │ ├── list.less
│ │ │ ├── load-more.less
│ │ │ ├── menu.less
│ │ │ ├── overlay.less
│ │ │ ├── pagination.less
│ │ │ ├── paper.less
│ │ │ ├── picker.less
│ │ │ ├── popover.less
│ │ │ ├── progress.less
│ │ │ ├── radio.less
│ │ │ ├── select.less
│ │ │ ├── slide-picker.less
│ │ │ ├── slider.less
│ │ │ ├── snackbar.less
│ │ │ ├── stepper.less
│ │ │ ├── subheader.less
│ │ │ ├── switch.less
│ │ │ ├── tabs.less
│ │ │ ├── text-field.less
│ │ │ ├── tooltip.less
│ │ │ └── touch-ripple.less
│ │ ├── import.less
│ │ ├── index.less
│ │ ├── mixins.less
│ │ ├── normalize.less
│ │ ├── theme.less
│ │ ├── transitions.less
│ │ └── vars.less
│ ├── theme/
│ │ ├── baseTheme.js
│ │ ├── colorTheme.js
│ │ ├── colors.js
│ │ ├── dark.js
│ │ ├── index.js
│ │ └── light.js
│ └── utils/
│ ├── colorManipulator.js
│ ├── dom.js
│ ├── drag.js
│ ├── index.js
│ ├── resize-event.js
│ ├── testing.js
│ ├── to-have-ben-warned.js
│ └── translate.js
└── types/
├── index.d.ts
├── muse-ui.d.ts
└── theme.d.ts
SYMBOL INDEX (842 symbols across 136 files)
FILE: src/Alert/Alert.js
method handleDelete (line 13) | handleDelete (e) {
method render (line 18) | render (h) {
FILE: src/AppBar/AppBar.js
method render (line 18) | render (h) {
FILE: src/AppBar/AppBar.spec.js
method render (line 26) | render (h) {
FILE: src/AutoComplete/AutoComplete.js
method validator (line 27) | validator (val) {
method data (line 53) | data () {
method setValue (line 61) | setValue (value, item, e) {
method onKeydown (line 69) | onKeydown (e) {
method onInput (line 101) | onInput (e) {
method focus (line 109) | focus (e) {
method filterData (line 114) | filterData (val) {
method blur (line 129) | blur (e) {
method setScollPosition (line 135) | setScollPosition (index) {
method createTextField (line 147) | createTextField (h) {
method createContentList (line 173) | createContentList (h) {
method render (line 210) | render (h) {
method focusIndex (line 248) | focusIndex () {
FILE: src/AutoComplete/filter.js
function getValueByItem (line 24) | function getValueByItem (item) {
FILE: src/Avatar/Avatar.js
method render (line 14) | render (h) {
FILE: src/Badge/Badge.js
method render (line 15) | render (h) {
FILE: src/BottomNav/BottomNav.js
method provide (line 7) | provide () {
method data (line 20) | data () {
method getBottomNavValue (line 26) | getBottomNavValue () {
method getBottomNavShift (line 29) | getBottomNavShift () {
method getDefaultVal (line 32) | getDefaultVal () {
method getActiveColor (line 36) | getActiveColor () {
method bottomNavItemClick (line 42) | bottomNavItemClick (value) {
method value (line 47) | value (val) {
method activeValue (line 50) | activeValue (val) {
method render (line 56) | render (h) {
FILE: src/BottomNav/BottomNav.spec.js
function createNavItem (line 6) | function createNavItem (icon, text, value) {
FILE: src/BottomNav/BottomNavItem.js
method data (line 21) | data () {
method created (line 26) | created () {
method active (line 30) | active () {
method activeClassName (line 33) | activeClassName () {
method activeColor (line 36) | activeColor () {
method shift (line 39) | shift () {
method handleClick (line 44) | handleClick () {
method value (line 49) | value (val) {
method render (line 53) | render (h) {
FILE: src/BottomSheet/BottomSheet.js
method render (line 13) | render (h) {
FILE: src/Breadcrumbs/Breadcrumbs.js
method createChildren (line 10) | createChildren (h) {
method render (line 26) | render (h) {
FILE: src/Breadcrumbs/Breadcrumbs.spec.js
function createBreadcrumbsItem (line 7) | function createBreadcrumbsItem (text) {
FILE: src/Breadcrumbs/BreadcrumbsItem.js
method render (line 9) | render (h) {
FILE: src/Button/Button.js
method buttonClass (line 21) | buttonClass () {
method render (line 39) | render (h) {
FILE: src/Card/Card.js
method render (line 6) | render (h) {
FILE: src/Card/CardHeader.js
method render (line 8) | render (h, { data, props, slots }) {
FILE: src/Card/CardMedia.js
method render (line 8) | render (h, { data, props, children }) {
FILE: src/Card/CardTitle.js
method render (line 8) | render (h, { data, props }) {
FILE: src/Carousel/Carousel.js
method provide (line 9) | provide () {
method data (line 39) | data () {
method mounted (line 46) | mounted () {
method beforeDestroy (line 49) | beforeDestroy () {
method getTransition (line 53) | getTransition () {
method addCarouselItem (line 56) | addCarouselItem (item) {
method removeCarouselItem (line 60) | removeCarouselItem (item) {
method isCarouselActive (line 65) | isCarouselActive (item) {
method startAutoNext (line 68) | startAutoNext () {
method next (line 73) | next () {
method prev (line 80) | prev () {
method changeActiveIndex (line 86) | changeActiveIndex (index) {
method createControls (line 92) | createControls (h) {
method createIndicators (line 157) | createIndicators (h) {
method render (line 184) | render (h) {
method activeIndex (line 207) | activeIndex (val) {
method active (line 212) | active (val) {
method cycle (line 215) | cycle () {
method interval (line 218) | interval () {
FILE: src/Carousel/CarouselItem.js
method data (line 9) | data () {
method active (line 15) | active () {
method transition (line 18) | transition () {
method created (line 22) | created () {
method beforeDestroy (line 25) | beforeDestroy () {
method render (line 28) | render (h) {
FILE: src/Checkbox/Checkbox.js
method checked (line 11) | checked () {
method toggle (line 20) | toggle () {
method render (line 35) | render (h) {
FILE: src/Chip/Chip.js
method handleDelete (line 12) | handleDelete (e) {
method render (line 17) | render (h) {
FILE: src/DataTable/DataTable.js
method handleHeaderFooterMousewheel (line 52) | handleHeaderFooterMousewheel (event, data) {
method resizeListener (line 60) | resizeListener () {
method mounted (line 64) | mounted () {
method beforeDestroy (line 69) | beforeDestroy () {
method render (line 72) | render (h) {
FILE: src/DataTable/mixins/body.js
method data (line 15) | data () {
method handleScroll (line 23) | handleScroll (e) {
method isSelected (line 30) | isSelected (index) {
method toggleSelect (line 33) | toggleSelect (index) {
method toggleExpand (line 46) | toggleExpand (index) {
method createEmpty (line 49) | createEmpty (h) {
method createSlotContent (line 56) | createSlotContent (row, index) {
method createCheckboxTd (line 62) | createCheckboxTd (h, index) {
method createContent (line 80) | createContent (h) {
method createBody (line 155) | createBody (h) {
method selects (line 176) | selects (val) {
method expandRowIndex (line 179) | expandRowIndex (val) {
method expandIndex (line 183) | expandIndex (val) {
FILE: src/DataTable/mixins/colgroup.js
method data (line 13) | data () {
method mounted (line 19) | mounted () {
method setCols (line 23) | setCols () {
method createColGroup (line 40) | createColGroup (h) {
method columns (line 52) | columns () {
FILE: src/DataTable/mixins/footer.js
method createFooter (line 3) | createFooter (h) {
FILE: src/DataTable/mixins/header.js
method toggleSelectAll (line 6) | toggleSelectAll (val) {
method handleSortChange (line 17) | handleSortChange (column) {
method createSlotHeader (line 32) | createSlotHeader () {
method createSlotTh (line 37) | createSlotTh (column) {
method createDefaultTh (line 42) | createDefaultTh (h, column) {
method createTh (line 59) | createTh (h, column) {
method createCheckboxTh (line 62) | createCheckboxTh (h) {
method createTHeader (line 78) | createTHeader (h) {
method createHeader (line 103) | createHeader (h) {
FILE: src/DataTable/mixins/progress.js
method mounted (line 5) | mounted () {
method createProgress (line 8) | createProgress (h) {
FILE: src/DateInput/Container.js
method validator (line 10) | validator (val) {
method createWrap (line 18) | createWrap (h, children) {
method render (line 49) | render (h) {
FILE: src/DateInput/DateInput.js
constant DEFAULT_FORMAT (line 10) | const DEFAULT_FORMAT = {
method validator (line 45) | validator (val) {
method data (line 74) | data () {
method changeValue (line 81) | changeValue () {
method focus (line 88) | focus (e) {
method blur (line 92) | blur (e) {
method closePicker (line 96) | closePicker () {
method handleDateChange (line 99) | handleDateChange (date) {
method handleTimeChange (line 103) | handleTimeChange (date, mode, finished) {
method generateTextFieldProps (line 108) | generateTextFieldProps () {
method generatePickerProps (line 111) | generatePickerProps () {
method generateDatePickerProps (line 114) | generateDatePickerProps () {
method generateTimePickerProps (line 117) | generateTimePickerProps () {
method generateProps (line 120) | generateProps (props) {
method createTextField (line 127) | createTextField (h) {
method createActions (line 166) | createActions (h) {
method createPicker (line 191) | createPicker (h) {
method render (line 250) | render (h) {
method beforeDestroy (line 270) | beforeDestroy () {
method value (line 274) | value (val) {
FILE: src/Dialog/Dialog.js
method validator (line 29) | validator (val) {
method mounted (line 34) | mounted () {
method updated (line 37) | updated () {
method handleWrapperClick (line 43) | handleWrapperClick (e) {
method setMaxDialogContentHeight (line 47) | setMaxDialogContentHeight () {
method open (line 66) | open (newValue) {
method render (line 76) | render (h) {
FILE: src/Divider/Divider.js
method render (line 8) | render (h, { data, props }) {
FILE: src/Drawer/Drawer.js
method data (line 26) | data () {
method drawerStyle (line 33) | drawerStyle () {
method overlay (line 39) | overlay () {
method mounted (line 43) | mounted () {
method overlayClick (line 48) | overlayClick () {
method escPress (line 51) | escPress (e) {
method close (line 55) | close (reason) {
method bindTransition (line 59) | bindTransition () {
method unBindTransition (line 68) | unBindTransition () {
method resetZIndex (line 74) | resetZIndex () {
method beforeDestroy (line 79) | beforeDestroy () {
method open (line 84) | open (val) {
method docked (line 91) | docked (val, oldVal) {
method render (line 97) | render (h) {
FILE: src/ExpansionPanel/ExpansionPanel.js
method data (line 14) | data () {
method createToggleIcon (line 20) | createToggleIcon (h) {
method createHeader (line 36) | createHeader (h) {
method createContainer (line 59) | createContainer (h) {
method createContent (line 73) | createContent (h) {
method createActions (line 78) | createActions (h) {
method render (line 86) | render (h) {
method expand (line 102) | expand (val) {
FILE: src/Form/Form.js
method provide (line 4) | provide () {
method validator (line 19) | validator (val) {
method data (line 28) | data () {
method getValue (line 34) | getValue (prop) {
method addItem (line 37) | addItem (item) {
method removeItem (line 40) | removeItem (item) {
method validate (line 45) | validate () {
method clear (line 70) | clear () {
method render (line 74) | render (h) {
FILE: src/Form/FormItem.js
method provide (line 9) | provide () {
method data (line 25) | data () {
method mounted (line 31) | mounted () {
method updated (line 35) | updated () {
method beforeDestroy (line 38) | beforeDestroy () {
method validate (line 42) | validate () {
method validateResult (line 72) | validateResult (result, message) {
method onFocus (line 83) | onFocus () {
method onBlur (line 86) | onBlur () {
method createIcon (line 90) | createIcon (h) {
method createContent (line 99) | createContent (h) {
method createLabel (line 105) | createLabel (h) {
method createHelpText (line 118) | createHelpText (h) {
method setHelpLeft (line 125) | setHelpLeft () {
method render (line 130) | render (h) {
method errorText (line 151) | errorText (val) {
method rules (line 154) | rules () {
FILE: src/Grid/Col.js
function createColClass (line 3) | function createColClass (props) {
method render (line 30) | render (h, { data, props, children }) {
FILE: src/Grid/Container.js
method render (line 7) | render (h, { data, props, children }) {
FILE: src/Grid/Flex.js
method render (line 10) | render (h, { data, props, children }) {
FILE: src/Grid/Row.js
method render (line 11) | render (h, { data, props, children }) {
FILE: src/Grid/index.js
method install (line 9) | install (Vue) {
FILE: src/Grid/utils.js
function createEnumProps (line 1) | function createEnumProps (type, def, enums) {
function generatePropsClass (line 21) | function generatePropsClass (props) {
FILE: src/GridList/GridList.js
method provide (line 3) | provide () {
method getGridListCellHeight (line 25) | getGridListCellHeight () {
method getGridListCols (line 28) | getGridListCols () {
method getGridListPadding (line 31) | getGridListPadding () {
method render (line 35) | render (h) {
FILE: src/GridList/GridTile.js
method validator (line 8) | validator (val) {
method validator (line 29) | validator (val) {
method tileClass (line 35) | tileClass () {
method style (line 42) | style () {
method render (line 50) | render (h) {
FILE: src/Helpers/index.js
method install (line 17) | install (Vue) {
FILE: src/Icon/Icon.js
method render (line 13) | render (h, { data, props }) {
FILE: src/List/List.js
method provide (line 3) | provide () {
method validator (line 21) | validator (val) {
method validator (line 33) | validator (val) {
method listItemClick (line 41) | listItemClick (item) {
method getListValue (line 45) | getListValue () {
method getNestedLevel (line 48) | getNestedLevel () {
method getNestedIndent (line 51) | getNestedIndent () {
method getToggleNested (line 54) | getToggleNested () {
method getToggleNestedType (line 57) | getToggleNestedType () {
method render (line 61) | render (h) {
FILE: src/List/ListAction.js
method render (line 4) | render (h, { data, props, children }) {
FILE: src/List/ListItem.js
method data (line 32) | data () {
method nestedLevel (line 38) | nestedLevel () {
method nestedIndent (line 41) | nestedIndent () {
method toggleNested (line 44) | toggleNested () {
method toggleNestedType (line 47) | toggleNestedType () {
method created (line 51) | created () {
method handleClick (line 57) | handleClick (e) {
method handleKeyboardFocus (line 62) | handleKeyboardFocus (isFocus) {
method handleHover (line 65) | handleHover (event) {
method handleHoverExit (line 68) | handleHoverExit (event) {
method handleToggleNested (line 71) | handleToggleNested () {
method handleNestedClick (line 75) | handleNestedClick (item) {
method createItem (line 78) | createItem (h) {
method createNestedList (line 116) | createNestedList (h) {
method render (line 151) | render (h) {
method open (line 155) | open (val) {
method nestedOpen (line 158) | nestedOpen (val) {
FILE: src/LoadMore/InfiniteScroll.js
method data (line 20) | data () {
method mounted (line 25) | mounted () {
method onScroll (line 29) | onScroll (scroller) {
method render (line 41) | render (h) {
FILE: src/LoadMore/LoadMore.js
method data (line 12) | data () {
method mounted (line 17) | mounted () {
method render (line 20) | render (h) {
FILE: src/LoadMore/RefreshControl.js
constant LENGTH (line 5) | const LENGTH = 130;
constant INITY (line 6) | const INITY = -68;
method data (line 14) | data () {
method refreshStyle (line 22) | refreshStyle () {
method circularStyle (line 30) | circularStyle () {
method refreshClass (line 41) | refreshClass () {
method mounted (line 63) | mounted () {
method beforeDestory (line 66) | beforeDestory () {
method clearState (line 70) | clearState () {
method getScrollTop (line 75) | getScrollTop () {
method bindDrag (line 83) | bindDrag () {
method unbindDrag (line 126) | unbindDrag () {
method createRefreshIcon (line 135) | createRefreshIcon (h) {
method render (line 159) | render (h) {
method refreshing (line 169) | refreshing (val) {
method trigger (line 176) | trigger (trigger, oldTrigger) {
FILE: src/Menu/Menu.js
method data (line 13) | data () {
method mounted (line 19) | mounted () {
method handleMouseEnter (line 23) | handleMouseEnter () {
method handleMouseLeave (line 28) | handleMouseLeave () {
method show (line 33) | show () {
method hide (line 37) | hide () {
method createPopover (line 41) | createPopover (h) {
method render (line 62) | render (h) {
method beforeDestroy (line 80) | beforeDestroy () {
method active (line 84) | active (val) {
method open (line 87) | open (val) {
FILE: src/Pagination/Pagination.js
method validator (line 19) | validator (val) {
method showPageCount (line 31) | showPageCount () {
method totalPage (line 34) | totalPage () {
method items (line 37) | items () {
method changePage (line 81) | changePage (page) {
method createPrevBtn (line 85) | createPrevBtn (h) {
method creatNextBtn (line 110) | creatNextBtn (h) {
method createPageList (line 135) | createPageList (h) {
method render (line 168) | render (h) {
FILE: src/Paper/Paper.js
method validator (line 15) | validator (val) {
method render (line 20) | render (h, { data, props, children }) {
FILE: src/Picker/DatePicker/DateDisplay.js
method data (line 14) | data () {
method replaceSelected (line 21) | replaceSelected (date) {
method createYearSlide (line 27) | createYearSlide (h) {
method createMonthSlide (line 45) | createMonthSlide (h) {
method render (line 64) | render (h) {
method displayDate (line 89) | displayDate (val) {
FILE: src/Picker/DatePicker/DatePicker.js
method provide (line 12) | provide () {
method default (line 22) | default () {
method default (line 32) | default () {
method default (line 42) | default () {
method default (line 48) | default () {
method data (line 54) | data () {
method getDayButtonSlots (line 61) | getDayButtonSlots () {
method getMonthButtonSlots (line 64) | getMonthButtonSlots () {
method getYearButtonSlots (line 67) | getYearButtonSlots () {
method handleYearChange (line 70) | handleYearChange (year) {
method handleMonthChange (line 78) | handleMonthChange (date) {
method handleSelect (line 83) | handleSelect (date) {
method changeDate (line 89) | changeDate (date) {
method changeDisplayDate (line 93) | changeDisplayDate (date) {
method changeView (line 96) | changeView (view) {
method render (line 100) | render (h) {
method date (line 180) | date (val) {
FILE: src/Picker/DatePicker/DayButton.js
method data (line 10) | data () {
method isNow (line 16) | isNow () {
method dayButtonClass (line 20) | dayButtonClass () {
method render (line 28) | render (h) {
FILE: src/Picker/DatePicker/MonthDayView.js
method data (line 18) | data () {
method prevMonth (line 28) | prevMonth () {
method nextMonth (line 31) | nextMonth () {
method equalsDate (line 36) | equalsDate (date) {
method isDisableDate (line 39) | isDisableDate (day) {
method handleClick (line 46) | handleClick (date) {
method handleChange (line 49) | handleChange (val) {
method changeDisplayDate (line 53) | changeDisplayDate (date) {
method createWeek (line 62) | createWeek (h) {
method createMonthDay (line 72) | createMonthDay (h) {
method createContent (line 89) | createContent (h, displayDate) {
method render (line 113) | render (h) {
method displayDate (line 135) | displayDate (val) {
FILE: src/Picker/DatePicker/MonthView.js
method data (line 11) | data () {
method changeDisplayDate (line 20) | changeDisplayDate (date) {
method handleChange (line 29) | handleChange (val) {
method createMonth (line 34) | createMonth (h) {
method createContent (line 51) | createContent (h, displayDate) {
method createMonthButton (line 62) | createMonthButton (h, date) {
method render (line 90) | render (h) {
FILE: src/Picker/DatePicker/Toolbar.js
method createTitleSlide (line 21) | createTitleSlide (h) {
method createPrevIcon (line 43) | createPrevIcon (h) {
method createNextIcon (line 57) | createNextIcon (h) {
method render (line 72) | render (h) {
FILE: src/Picker/DatePicker/YearButton.js
method mounted (line 6) | mounted () {
method render (line 9) | render (h) {
method selected (line 23) | selected (val) {
FILE: src/Picker/DatePicker/YearView.js
method years (line 10) | years () {
method scrollToSelectedYear (line 21) | scrollToSelectedYear (yearButtonNode) {
method createYearButtons (line 28) | createYearButtons (h) {
method render (line 44) | render (h) {
FILE: src/Picker/DatePicker/dateUtils.js
method formatDisplay (line 13) | formatDisplay (date) {
method formatDateDisplay (line 17) | formatDateDisplay (date) {
method formatMonth (line 21) | formatMonth (date) {
method getWeekDayArray (line 24) | getWeekDayArray (firstDayOfWeek) {
method getMonthList (line 37) | getMonthList () {
function getDaysInMonth (line 42) | function getDaysInMonth (d) {
function getFirstDayOfMonth (line 51) | function getFirstDayOfMonth (d) {
function getMonthArray (line 55) | function getMonthArray (d) {
function getWeekArray (line 70) | function getWeekArray (d, firstDayOfWeek) {
function addDays (line 102) | function addDays (d, days) {
function addMonths (line 108) | function addMonths (d, months) {
function addYears (line 114) | function addYears (d, years) {
function cloneDate (line 120) | function cloneDate (d) {
function cloneAsDate (line 124) | function cloneAsDate (d) {
function isBeforeDate (line 130) | function isBeforeDate (d1, d2) {
function isAfterDate (line 137) | function isAfterDate (d1, d2) {
function isBetweenDates (line 144) | function isBetweenDates (dateToCheck, startDate, endDate) {
function isEqualDate (line 149) | function isEqualDate (d1, d2) {
function monthDiff (line 156) | function monthDiff (d1, d2) {
function yearDiff (line 164) | function yearDiff (d1, d2) {
FILE: src/Picker/DateTimePicker/DateTimeDisplay.js
method sanitizeTime (line 13) | sanitizeTime () {
method createDateDisplay (line 27) | createDateDisplay (h) {
method createTimeDisplay (line 61) | createTimeDisplay (h) {
method render (line 123) | render (h) {
FILE: src/Picker/DateTimePicker/DateTimePicker.js
method provide (line 26) | provide () {
method data (line 36) | data () {
method getDayButtonSlots (line 44) | getDayButtonSlots () {
method getMonthButtonSlots (line 47) | getMonthButtonSlots () {
method getYearButtonSlots (line 50) | getYearButtonSlots () {
method getColorObject (line 53) | getColorObject () {
method getAffix (line 60) | getAffix () {
method handleYearChange (line 68) | handleYearChange (year) {
method handleMonthChange (line 75) | handleMonthChange (date) {
method handleSelect (line 79) | handleSelect (date) {
method changeDisplayDate (line 86) | changeDisplayDate (date) {
method changeType (line 89) | changeType (type) {
method changeView (line 97) | changeView (view) {
method handleSelectAffix (line 105) | handleSelectAffix (affix) {
method handleChangeHours (line 114) | handleChangeHours (hours, finished) {
method handleChangeMinutes (line 131) | handleChangeMinutes (minutes, finished) {
method changeTime (line 136) | changeTime (time, view, finished) {
method createDisplay (line 140) | createDisplay (h) {
method createClock (line 158) | createClock (h) {
method createList (line 182) | createList (h) {
method createTabs (line 194) | createTabs (h) {
method createContent (line 260) | createContent (h) {
method render (line 306) | render (h) {
method date (line 326) | date (val) {
FILE: src/Picker/TimePicker/Hours.js
method validator (line 9) | validator (val) {
method hours (line 19) | hours () {
method mounted (line 28) | mounted () {
method getSelected (line 40) | getSelected () {
method isMousePressed (line 48) | isMousePressed (event) {
method handleDown (line 54) | handleDown (event) {
method handleUp (line 57) | handleUp (event) {
method handleMove (line 63) | handleMove (event) {
method handleTouchMove (line 68) | handleTouchMove (event) {
method handleTouchEnd (line 72) | handleTouchEnd (event) {
method setClock (line 76) | setClock (event, finish) {
method getHours (line 85) | getHours (offsetX, offsetY) {
method render (line 110) | render (h) {
FILE: src/Picker/TimePicker/ListView.js
method validator (line 6) | validator (val) {
method default (line 12) | default () {
method hours (line 18) | hours () {
method minutes (line 27) | minutes () {
method mounted (line 36) | mounted () {
method scrollToSelected (line 41) | scrollToSelected (container) {
method createHoursList (line 54) | createHoursList (h) {
method createMinutesList (line 78) | createMinutesList (h) {
method render (line 97) | render (h) {
method time (line 106) | time () {
FILE: src/Picker/TimePicker/Minutes.js
method default (line 9) | default () {
method mounted (line 14) | mounted () {
method data (line 25) | data () {
method created (line 30) | created () {
method getMinuteNumbers (line 34) | getMinuteNumbers () {
method isMousePressed (line 57) | isMousePressed (event) {
method handleDown (line 63) | handleDown (event) {
method handleUp (line 66) | handleUp (event) {
method handleMove (line 72) | handleMove (event) {
method handleTouch (line 79) | handleTouch (event) {
method setClock (line 83) | setClock (event, finish) {
method getMinutes (line 92) | getMinutes (offsetX, offsetY) {
method render (line 106) | render (h) {
method initialMinutes (line 141) | initialMinutes (val) {
FILE: src/Picker/TimePicker/Number.js
method validator (line 40) | validator (val) {
method isInner (line 50) | isInner () {
method numberClass (line 53) | numberClass () {
method numberStyle (line 59) | numberStyle () {
method render (line 75) | render (h) {
FILE: src/Picker/TimePicker/Pointer.js
method validator (line 12) | validator (val) {
method isInner (line 21) | isInner () {
method pointerStyle (line 24) | pointerStyle () {
method calcAngle (line 33) | calcAngle (value, base) {
method render (line 39) | render (h) {
FILE: src/Picker/TimePicker/TimeDisplay.js
method validator (line 9) | validator (val) {
method validator (line 15) | validator (val) {
method validator (line 22) | validator (val) {
method default (line 28) | default () {
method sanitizeTime (line 36) | sanitizeTime () {
method handleSelectAffix (line 50) | handleSelectAffix (affix) {
method handleSelectHour (line 53) | handleSelectHour () {
method handleSelectMin (line 56) | handleSelectMin () {
method render (line 60) | render (h) {
FILE: src/Picker/TimePicker/TimePicker.js
method provide (line 10) | provide () {
method validator (line 20) | validator (val) {
method validator (line 27) | validator (val) {
method default (line 33) | default () {
method data (line 38) | data () {
method getColorObject (line 44) | getColorObject () {
method getAffix (line 51) | getAffix () {
method handleSelectAffix (line 59) | handleSelectAffix (affix) {
method handleChangeHours (line 68) | handleChangeHours (hours, finished) {
method handleChangeMinutes (line 85) | handleChangeMinutes (minutes, finished) {
method changeTime (line 91) | changeTime (time, view, finished) {
method changeView (line 95) | changeView (view) {
method createTimeDisplay (line 98) | createTimeDisplay (h) {
method createClock (line 115) | createClock (h) {
method createList (line 139) | createList (h) {
method render (line 152) | render (h) {
FILE: src/Picker/TimePicker/timeUtils.js
function addHours (line 5) | function addHours (d, hours) {
function addMinutes (line 11) | function addMinutes (d, minutes) {
function addSeconds (line 17) | function addSeconds (d, seconds) {
function clone (line 23) | function clone (d) {
function formatTime (line 34) | function formatTime (date, format = 'ampm', pedantic = false) {
function strToTime (line 65) | function strToTime (str, format = 'ampm', pedantic = false) {
function rad2deg (line 96) | function rad2deg (rad) {
function getTouchEventOffsetValues (line 100) | function getTouchEventOffsetValues (event) {
function isInner (line 110) | function isInner (props) {
FILE: src/Picker/index.js
method install (line 11) | install (Vue) {
FILE: src/Popover/Popover.js
constant SPACE (line 7) | const SPACE = 8;
method validator (line 30) | validator (val) {
method getLeftPosition (line 41) | getLeftPosition (width, react) {
method getTopPosition (line 82) | getTopPosition (height, react) {
method setStyle (line 123) | setStyle () {
method close (line 133) | close (reason) {
method clickOutSide (line 138) | clickOutSide (e) {
method getTransitionName (line 142) | getTransitionName () {
method mounted (line 149) | mounted () {
method updated (line 152) | updated () {
method render (line 157) | render (h) {
FILE: src/Progress/Circular.js
method render (line 19) | render (h) {
FILE: src/Progress/CircularProgress.js
method validator (line 19) | validator (val) {
method radius (line 37) | radius () {
method circularSvgStyle (line 40) | circularSvgStyle () {
method circularPathStyle (line 46) | circularPathStyle () {
method getArcLength (line 55) | getArcLength (fraction) {
method getRelativeValue (line 58) | getRelativeValue () {
method createDeterminateCircular (line 63) | createDeterminateCircular (h) {
method render (line 87) | render (h) {
FILE: src/Progress/LinearProgress.js
method validator (line 18) | validator (val) {
method percent (line 29) | percent () {
method linearStyle (line 32) | linearStyle () {
method linearClass (line 39) | linearClass () {
method render (line 43) | render (h) {
FILE: src/Progress/index.js
method install (line 10) | install (Vue) {
FILE: src/Radio/Radio.js
method checked (line 11) | checked () {
method toggle (line 19) | toggle () {
method render (line 23) | render (h) {
FILE: src/Select/Option.js
method data (line 23) | data () {
method selected (line 30) | selected () {
method created (line 34) | created () {
method destroyed (line 37) | destroyed () {
method render (line 40) | render (h) {
FILE: src/Select/Select.js
method autoComplete (line 28) | autoComplete () {
method render (line 32) | render (h) {
FILE: src/Select/mixins/events.js
method blur (line 3) | blur () {
method focus (line 8) | focus () {
method focusInput (line 13) | focusInput () {
method createListeners (line 16) | createListeners () {
FILE: src/Select/mixins/keyboard.js
method data (line 4) | data () {
method enableOptions (line 10) | enableOptions () {
method onKeydown (line 17) | onKeydown (e) {
method decrementFocusIndex (line 55) | decrementFocusIndex () {
method incrementFocusIndex (line 62) | incrementFocusIndex () {
method getOptionCount (line 69) | getOptionCount () {
method resetFocusIndex (line 72) | resetFocusIndex () {
method setFocusIndex (line 75) | setFocusIndex (index) {
method getSelectedIndex (line 78) | getSelectedIndex () {
method setScollPosition (line 84) | setScollPosition (index) {
method focusIndex (line 98) | focusIndex (val) {
FILE: src/Select/mixins/menu.js
method provide (line 5) | provide () {
method data (line 27) | data () {
method selects (line 34) | selects () {
method beforeDestroy (line 68) | beforeDestroy () {
method activateInput (line 72) | activateInput () {
method deactivateInput (line 75) | deactivateInput () {
method openMenu (line 80) | openMenu () {
method closeMenu (line 92) | closeMenu () {
method toggleMenu (line 96) | toggleMenu () {
method resetOptionVisable (line 101) | resetOptionVisable () {
method isMultiple (line 104) | isMultiple () {
method isOptionSelected (line 107) | isOptionSelected (value) {
method addOption (line 114) | addOption (option) {
method removeOption (line 117) | removeOption (option) {
method getOption (line 121) | getOption (value) {
method insertValue (line 129) | insertValue (selectedValue, value) {
method optionClick (line 143) | optionClick (value, notRemove = false) {
method createMenu (line 163) | createMenu (h) {
FILE: src/Select/mixins/selection.js
method data (line 7) | data () {
method created (line 14) | created () {
method setSeachValue (line 18) | setSeachValue () {
method changeSelectedIndex (line 21) | changeSelectedIndex (keycode) {
method resetSelectedIndex (line 40) | resetSelectedIndex () {
method removeSelection (line 43) | removeSelection (index) {
method createSlotSelection (line 49) | createSlotSelection (item) {
method createChipSelection (line 55) | createChipSelection (h, { selected, index, label }) {
method createTextSelection (line 72) | createTextSelection (h, { selected, label }, isLast) {
method createSelectedItems (line 80) | createSelectedItems (h) {
method createInputElement (line 94) | createInputElement (h) {
method createSelection (line 129) | createSelection (h) {
method searchValue (line 184) | searchValue (val) {
method selects (line 200) | selects () {
FILE: src/SlidePicker/Picker.js
method default (line 12) | default () {
method default (line 18) | default () {
method change (line 24) | change (index, value) {
method render (line 28) | render (h) {
FILE: src/SlidePicker/PickerSlot.js
method default (line 21) | default () {
method data (line 43) | data () {
method contentHeight (line 52) | contentHeight () {
method valueIndex (line 55) | valueIndex () {
method dragRange (line 58) | dragRange () {
method mounted (line 64) | mounted () {
method value2Translate (line 70) | value2Translate (value) {
method translate2Value (line 78) | translate2Value (translate) {
method doOnValueChange (line 83) | doOnValueChange () {
method doOnValuesChange (line 88) | doOnValuesChange () {
method handleStart (line 95) | handleStart () {
method handleMove (line 98) | handleMove (pos, drag, event) {
method handleEnd (line 105) | handleEnd (pos, drag, event) {
method render (line 131) | render (h) {
method values (line 180) | values (newVal) {
method value (line 185) | value () {
FILE: src/Slider/Slider.js
method data (line 37) | data () {
method percent (line 46) | percent () {
method created (line 51) | created () {
method handleKeydown (line 58) | handleKeydown (e) {
method handleMouseDown (line 111) | handleMouseDown (e) {
method handleMouseUp (line 120) | handleMouseUp () {
method handleTouchStart (line 124) | handleTouchStart (e) {
method handleTouchEnd (line 136) | handleTouchEnd (e) {
method handleFocus (line 144) | handleFocus () {
method handleBlur (line 148) | handleBlur () {
method handleMouseEnter (line 152) | handleMouseEnter () {
method handleMouseLeave (line 156) | handleMouseLeave () {
method setValue (line 161) | setValue (e) {
method onDragStart (line 175) | onDragStart (e) {
method onDragUpdate (line 180) | onDragUpdate (e) {
method onDragStop (line 188) | onDragStop (e) {
method handleDragMouseMove (line 193) | handleDragMouseMove (e) {
method handleTouchMove (line 196) | handleTouchMove (e) {
method handleMouseEnd (line 199) | handleMouseEnd (e) {
method render (line 205) | render (h) {
FILE: src/Snackbar/Snackbar.js
method validator (line 20) | validator (val) {
method render (line 25) | render (h) {
FILE: src/Stepper/Step.js
method render (line 24) | render (h) {
FILE: src/Stepper/StepButton.js
method render (line 21) | render (h) {
FILE: src/Stepper/StepConnector.js
method render (line 4) | render (h, { data, children }) {
FILE: src/Stepper/StepContent.js
method render (line 9) | render (h) {
FILE: src/Stepper/StepLabel.js
method render (line 9) | render (h) {
FILE: src/Stepper/Stepper.js
method validator (line 17) | validator (val) {
method render (line 22) | render (h) {
FILE: src/SubHeader/SubHeader.js
method render (line 7) | render (h, { data, props, children }) {
FILE: src/Switch/Switch.js
method checked (line 10) | checked () {
method toggle (line 15) | toggle () {
method render (line 19) | render (h) {
FILE: src/Tabs/Tab.js
method data (line 23) | data () {
method active (line 29) | active () {
method activeColor (line 32) | activeColor () {
method created (line 36) | created () {
method handleClick (line 41) | handleClick (e) {
method beforeDestory (line 46) | beforeDestory () {
method active (line 50) | active (val, oldVal) {
method value (line 53) | value (val) {
method render (line 58) | render (h) {
FILE: src/Tabs/Tabs.js
method provide (line 9) | provide () {
method data (line 28) | data () {
method created (line 34) | created () {
method mounted (line 37) | mounted () {
method updated (line 40) | updated () {
method handleTabClick (line 44) | handleTabClick (value, tab) {
method getActiveValue (line 51) | getActiveValue () {
method getDefaultVal (line 54) | getDefaultVal () {
method getActiveColor (line 57) | getActiveColor () {
method getInverse (line 63) | getInverse () {
method addTab (line 66) | addTab (tab) {
method removeTab (line 70) | removeTab (tab) {
method getActiveTab (line 75) | getActiveTab () {
method setTabHighLineStyle (line 78) | setTabHighLineStyle () {
method value (line 90) | value (val) {
method activeValue (line 93) | activeValue () {
method render (line 100) | render (h) {
FILE: src/TextField/TextField.js
method handleFocus (line 19) | handleFocus (e) {
method handleBlur (line 23) | handleBlur (e) {
method focus (line 27) | focus () {
method createTextField (line 35) | createTextField (h) {
method render (line 77) | render (h) {
FILE: src/TextField/Textarea.js
method mounted (line 17) | mounted () {
method value (line 21) | value (val, oldVal) {
method resizeTextarea (line 28) | resizeTextarea () {
method render (line 44) | render (h) {
FILE: src/Tooltip/Tooltip.js
method data (line 13) | data () {
method beforeCreate (line 19) | beforeCreate () {
method mounted (line 29) | mounted () {
method addEventHandle (line 33) | addEventHandle (old, fn) {
method show (line 42) | show () {
method hide (line 46) | hide () {
method active (line 54) | active (val) {
method open (line 57) | open (val) {
method render (line 61) | render (h) {
FILE: src/Tooltip/TooltipContent.js
constant SPACE (line 5) | const SPACE = 8;
method validator (line 23) | validator (val) {
method mounted (line 34) | mounted () {
method updated (line 37) | updated () {
method getLeftPosition (line 41) | getLeftPosition (width, react) {
method getTopPosition (line 62) | getTopPosition (height, react) {
method setStyle (line 83) | setStyle () {
method render (line 94) | render (h) {
FILE: src/index.js
function install (line 62) | function install (Vue) {
FILE: src/internal/AbstractButton.js
function listenForTabPresses (line 11) | function listenForTabPresses () {
method data (line 35) | data () {
method buttonClass (line 42) | buttonClass () {
method beforeMount (line 49) | beforeMount () {
method mounted (line 55) | mounted () {
method beforeUpdate (line 62) | beforeUpdate () {
method beforeDestory (line 68) | beforeDestory () {
method handleHover (line 72) | handleHover (event) {
method handleOut (line 79) | handleOut (event) {
method removeKeyboardFocus (line 86) | removeKeyboardFocus (event) {
method setKeyboardFocus (line 92) | setKeyboardFocus (event) {
method cancelFocusTimeout (line 98) | cancelFocusTimeout () {
method handleKeydown (line 104) | handleKeydown (event) {
method handleFocus (line 116) | handleFocus (event) {
method handleBlur (line 127) | handleBlur (event) {
method handleClick (line 132) | handleClick (event) {
method getTagName (line 140) | getTagName () {
method createButtonChildren (line 153) | createButtonChildren (h) {
method disabled (line 193) | disabled (val) {
method render (line 197) | render (h) {
FILE: src/internal/CircleRipple.js
method default (line 7) | default () {
method styles (line 20) | styles () {
method render (line 28) | render (h) {
FILE: src/internal/ExpandTransition.js
function getSize (line 3) | function getSize (size) {
method beforeEnter (line 12) | beforeEnter (el) {
method enter (line 20) | enter (el) {
method afterEnter (line 27) | afterEnter (el) {
method beforeLeave (line 35) | beforeLeave (el) {
method leave (line 46) | leave (el) {
method afterLeave (line 55) | afterLeave (el) {
method render (line 63) | render (h) {
FILE: src/internal/FocusRipple.js
method style (line 14) | style () {
method setRippleSize (line 22) | setRippleSize () {
method mounted (line 38) | mounted () {
method updated (line 41) | updated () {
method render (line 44) | render (h) {
FILE: src/internal/TouchRipple.js
method data (line 26) | data () {
method start (line 33) | start (event, isRippleTouchGenerated) {
method end (line 46) | end () {
method stopListeningForScrollAbort (line 51) | stopListeningForScrollAbort () {
method startListeningForScrollAbort (line 55) | startListeningForScrollAbort (event) {
method handleMouseDown (line 60) | handleMouseDown (event) {
method handleTouchStart (line 65) | handleTouchStart (event) {
method handleTouchMove (line 72) | handleTouchMove (event) {
method getRippleStyle (line 83) | getRippleStyle (event) {
method calcDiag (line 113) | calcDiag (a, b) {
method createCircleRipple (line 116) | createCircleRipple (h) {
method render (line 129) | render (h) {
FILE: src/internal/directives/click-outside.js
method bind (line 5) | bind (el, binding, vnode) {
method update (line 24) | update (el, binding) {
method unbind (line 29) | unbind (el) {
FILE: src/internal/directives/elevation.js
function getElevationClass (line 4) | function getElevationClass (depth) {
method inserted (line 9) | inserted (el, { value }, vnode) {
method update (line 12) | update (el, { value, oldValue }) {
method unbind (line 17) | unbind (el, { value }) {
FILE: src/internal/directives/keyboard-focus.js
function listenForTabPresses (line 5) | function listenForTabPresses () {
method bind (line 17) | bind (el, binding, vnode) {
method update (line 44) | update (el, binding) {
method unbind (line 48) | unbind (el) {
FILE: src/internal/directives/mousewheel.js
method bind (line 20) | bind (el, binding) {
FILE: src/internal/directives/resize.js
method inserted (line 3) | inserted (el, binding) {
method unbind (line 25) | unbind (el, binding) {
FILE: src/internal/directives/scroll.js
function bindScroll (line 3) | function bindScroll (el, binding) {
function unbind (line 30) | function unbind (el, binding) {
FILE: src/internal/directives/swipe.js
function inserted (line 3) | function inserted (el, { value, modifiers }) {
function unbind (line 27) | function unbind (el) {
FILE: src/internal/mixins/button.js
method data (line 10) | data () {
method handleClick (line 16) | handleClick (e) {
method handleKeyboardFocus (line 19) | handleKeyboardFocus (isFocus) {
method handleHover (line 23) | handleHover (e) {
method handleHoverExit (line 26) | handleHoverExit (e) {
method getListener (line 29) | getListener () {
FILE: src/internal/mixins/color.js
method getColorClass (line 8) | getColorClass (addInverse = true) {
method getTextColorClass (line 11) | getTextColorClass () {
method getColor (line 14) | getColor (color, disabled) {
method getNormalColorClass (line 18) | getNormalColorClass (color, text = false, addInverse = true) {
FILE: src/internal/mixins/input.js
method data (line 32) | data () {
method error (line 38) | error () {
method inputClass (line 41) | inputClass () {
method float (line 54) | float () {
method createIcon (line 59) | createIcon (h) {
method createLabel (line 68) | createLabel (h) {
method createUnderline (line 76) | createUnderline (h) {
method createHelpText (line 99) | createHelpText (h) {
method createActionIcon (line 108) | createActionIcon (h) {
method createInput (line 119) | createInput (h, data, children, defaultAction) {
method isFocused (line 147) | isFocused (val) {
FILE: src/internal/mixins/popup/Overlay.js
method overlayStyle (line 18) | overlayStyle () {
method prevent (line 28) | prevent (event) {
method handleClick (line 32) | handleClick () {
method render (line 38) | render (h) {
FILE: src/internal/mixins/popup/index.js
method data (line 36) | data () {
method overlayClick (line 43) | overlayClick (e) {
method escPress (line 48) | escPress (e) {
method resetZIndex (line 53) | resetZIndex () {
method popupEl (line 57) | popupEl () {
method appendPopupElToBody (line 60) | appendPopupElToBody () {
method mounted (line 68) | mounted () {
method beforeDestroy (line 74) | beforeDestroy () {
method open (line 82) | open (val, oldVal) {
FILE: src/internal/mixins/popup/manager.js
method open (line 11) | open (instance) {
method close (line 19) | close (instance) {
method showOverlay (line 26) | showOverlay (instance) {
method preventScrolling (line 42) | preventScrolling () {
method allowScrolling (line 65) | allowScrolling () {
method closeOverlay (line 73) | closeOverlay () {
method changeOverlayStyle (line 85) | changeOverlayStyle () {
method handleOverlayClick (line 105) | handleOverlayClick () {
FILE: src/internal/mixins/route.js
method generateRouteProps (line 23) | generateRouteProps () {
FILE: src/internal/mixins/select.js
method start (line 29) | start (event) {
method end (line 36) | end (event) {
method handleClick (line 41) | handleClick (e) {
method handleKeydown (line 49) | handleKeydown (e) {
method createRipple (line 54) | createRipple (h, staticClass, children) {
method createInputElement (line 68) | createInputElement (h) {
method createSelect (line 80) | createSelect (h, view) {
FILE: src/internal/transitions.js
function createTransition (line 4) | function createTransition (name, mode) {
FILE: src/theme/index.js
function getThemeStyle (line 15) | function getThemeStyle () {
method addCreateTheme (line 26) | addCreateTheme (theme) {
method add (line 31) | add (name, varObj = {}, extendName = 'light') {
method use (line 40) | use (name) {
method generate (line 45) | generate (name) {
FILE: src/utils/colorManipulator.js
function clamp (line 14) | function clamp (value, min, max) {
function convertColorToString (line 32) | function convertColorToString (color) {
function convertHexToRGB (line 65) | function convertHexToRGB (color) {
function decomposeColor (line 91) | function decomposeColor (color) {
function getContrastRatio (line 113) | function getContrastRatio (foreground, background) {
function getLuminance (line 130) | function getLuminance (color) {
function emphasize (line 152) | function emphasize (color, coefficient = 0.15) {
function fade (line 164) | function fade (color, value) {
function darken (line 183) | function darken (color, coefficient) {
function lighten (line 204) | function lighten (color, coefficient) {
FILE: src/utils/dom.js
function getScrollEventTarget (line 1) | function getScrollEventTarget (element) {
function getScrollTop (line 13) | function getScrollTop (element) {
function getOffset (line 21) | function getOffset (el) {
function transitionEnd (line 34) | function transitionEnd (el, fun) {
function hasClass (line 49) | function hasClass (el, cls) {
function addClass (line 59) | function addClass (el, cls) {
function removeClass (line 81) | function removeClass (el, cls) {
FILE: src/utils/drag.js
constant IS_TOUCH (line 1) | const IS_TOUCH = typeof window !== 'undefined' && (('ontouchstart' in wi...
class Drag (line 2) | class Drag {
method constructor (line 3) | constructor (element, onlyTouch) {
method handleEvent (line 17) | handleEvent (event) {
method touchStart (line 42) | touchStart (event) {
method touchMove (line 61) | touchMove (event) {
method touchEnd (line 74) | touchEnd (event) {
method mouseStart (line 84) | mouseStart (event) {
method mouseMove (line 98) | mouseMove (event) {
method mouseEnd (line 109) | mouseEnd (event) {
method start (line 120) | start (fun) {
method end (line 125) | end (fun) {
method drag (line 130) | drag (fun) {
method reset (line 135) | reset (event) {
method destory (line 147) | destory () {
FILE: src/utils/index.js
function getColor (line 4) | function getColor (color) {
function isNotNull (line 9) | function isNotNull (val) {
function isNull (line 13) | function isNull (val) {
function getWidth (line 17) | function getWidth (w) {
function isPc (line 23) | function isPc () {
function retina (line 36) | function retina () {
function convertClass (line 54) | function convertClass (classes) {
function createSimpleFunctional (line 69) | function createSimpleFunctional (c, el = 'div', name) {
function getFirstComponentChild (line 82) | function getFirstComponentChild (children) {
function isPromise (line 86) | function isPromise (val) {
function isObject (line 90) | function isObject (val) {
function getObjAttr (line 94) | function getObjAttr (obj, attrs) {
function setObjAttr (line 104) | function setObjAttr (obj, attrs, value) {
FILE: src/utils/testing.js
function test (line 6) | function test (name, cb) {
function functionalContext (line 24) | function functionalContext (context = {}, children = []) {
function rafPolyfill (line 39) | function rafPolyfill (w) {
FILE: src/utils/to-have-ben-warned.js
function noop (line 2) | function noop () {}
function createCompareFn (line 16) | function createCompareFn (spy) {
function toHaveBeenWarnedInit (line 38) | function toHaveBeenWarnedInit () {
FILE: types/theme.d.ts
type ThemeOptions (line 1) | interface ThemeOptions {
type ThemeType (line 24) | type ThemeType = 'dark' | 'light';
type ThemeFunction (line 26) | interface ThemeFunction {
type MuTheme (line 30) | interface MuTheme {
Condensed preview — 315 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (554K chars).
[
{
"path": ".babelrc",
"chars": 693,
"preview": "{\n \"env\": {\n \"normal\": {\n \"presets\": [\n \"env\",\n \"stage-2\"\n ],\n \"plugins\": [\n \"tr"
},
{
"path": ".editorconfig",
"chars": 147,
"preview": "root = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_"
},
{
"path": ".eslintignore",
"chars": 0,
"preview": ""
},
{
"path": ".eslintrc",
"chars": 618,
"preview": "{\n root: true,\n parser: \"babel-eslint\",\n parserOptions: {\n ecmaVersion: 7,\n sourceType: \"module\",\n allowImpo"
},
{
"path": ".gitattributes",
"chars": 56,
"preview": "*.html linguist-language=Vue\n*.js linguist-language=Vue\n"
},
{
"path": ".gitignore",
"chars": 715,
"preview": "# Created by .ignore support plugin (hsz.mobi)\n### Node template\n# Logs\nlogs\n*.log\nnpm-debug.log*\n\n# Runtime data\npids\n*"
},
{
"path": ".postcssrc.js",
"chars": 262,
"preview": "module.exports = {\n plugins: [\n require('autoprefixer')({\n browsers: [\n '> 1%',\n 'last 5 versions"
},
{
"path": ".travis.yml",
"chars": 202,
"preview": "---\nlanguage: node_js\nnode_js:\n - \"8.11.2\"\n\nbefore_script:\n - yarn global add codecov\n\nscript:\n - yarn\n - yarn run l"
},
{
"path": "README.md",
"chars": 1814,
"preview": "\n<p align=\"center\">\n <a href=\"https://muse-ui.org\" target=\"_blank\">\n <img width=\"120\" src=\"./demo/icon_logo.png\">\n "
},
{
"path": "commitlint.config.js",
"chars": 109,
"preview": "module.exports = {\n extends: ['@commitlint/config-conventional'],\n rules: {\n 'subject-case': [0]\n }\n};\n"
},
{
"path": "demo/App.vue",
"chars": 4298,
"preview": "<template>\n<div style=\"padding: 32px;\">\n <mu-date-input type=\"dateTime\">\n <template slot=\"day\" slot-scope=\"{ selecte"
},
{
"path": "demo/bug-date-input.vue",
"chars": 1700,
"preview": "<template>\n<mu-container>\n <mu-form ref=\"form\" :model=\"validateForm\" class=\"mu-demo-form\">\n <mu-form-item label=\"日期\""
},
{
"path": "demo/bug-popup.vue",
"chars": 1561,
"preview": "<template>\n<div>\n <mu-container>\n <mu-flex justify-content=\"center\" align-items=\"center\">\n <mu-button @click=\"o"
},
{
"path": "demo/components/Sidebar.js",
"chars": 21,
"preview": "export default {\n\n};\n"
},
{
"path": "demo/index.html",
"chars": 853,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "demo/main.js",
"chars": 151,
"preview": "import Vue from 'vue';\nimport MuseUI from '../src';\nimport App from './App';\nVue.use(MuseUI);\n\nconst app = new Vue({\n ."
},
{
"path": "jest.config.js",
"chars": 583,
"preview": "module.exports = {\n verbose: false,\n testURL: 'http://localhost/',\n roots: [\n '<rootDir>/src'\n ],\n moduleFileExt"
},
{
"path": "package.json",
"chars": 2898,
"preview": "{\n \"name\": \"muse-ui\",\n \"version\": \"3.0.2\",\n \"description\": \"material design ui for vue2\",\n \"author\": \"myronliu347 <m"
},
{
"path": "rollup.config.js",
"chars": 1500,
"preview": "import babel from 'rollup-plugin-babel';\nimport resolve from 'rollup-plugin-node-resolve';\nimport commonjs from 'rollup-"
},
{
"path": "src/Alert/Alert.js",
"chars": 1375,
"preview": "import color from '../internal/mixins/color';\nimport Button from '../Button';\n\nexport default {\n name: 'mu-alert',\n mi"
},
{
"path": "src/Alert/Alert.spec.js",
"chars": 959,
"preview": "import test from '../utils/testing';\nimport Alert from './Alert';\n\ntest('Alert', ({ mount }) => {\n it('should be show b"
},
{
"path": "src/Alert/__snapshots__/Alert.spec.js.snap",
"chars": 341,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Alert should be set color 1`] = `\n\n<div class=\"mu-alert mu-primary-"
},
{
"path": "src/Alert/index.js",
"chars": 167,
"preview": "import '../styles/components/alert.less';\nimport Alert from './Alert';\n\nAlert.install = function (Vue) {\n Vue.component"
},
{
"path": "src/AppBar/AppBar.js",
"chars": 1052,
"preview": "import color from '../internal/mixins/color';\n\nexport default {\n name: 'mu-appbar',\n mixins: [color],\n props: {\n z"
},
{
"path": "src/AppBar/AppBar.spec.js",
"chars": 2028,
"preview": "import Vue from 'vue';\nimport * as colors from '../theme/colors';\nimport test from '../utils/testing';\nimport AppBar fro"
},
{
"path": "src/AppBar/__snapshots__/AppBar.spec.js.snap",
"chars": 706,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`AppBar should be default 1`] = `\n\n<header class=\"mu-appbar mu-ele"
},
{
"path": "src/AppBar/index.js",
"chars": 320,
"preview": "import '../styles/components/elevation.less';\nimport '../styles/components/appbar.less';\nimport theme from '../theme';\ni"
},
{
"path": "src/AppBar/theme.js",
"chars": 181,
"preview": "export default (theme, type) => {\n return `\n .mu-appbar {\n background-color: ${type === 'light' ? '#f5f5f5' : '"
},
{
"path": "src/AutoComplete/AutoComplete.js",
"chars": 6495,
"preview": "import input from '../internal/mixins/input';\nimport clickOutSide from '../internal/directives/click-outside';\nimport Po"
},
{
"path": "src/AutoComplete/AutoComplete.spec.js",
"chars": 2505,
"preview": "import test from '../utils/testing';\nimport AutoComplete from './AutoComplete';\ntest('AutoComplete', ({ mount }) => {\n "
},
{
"path": "src/AutoComplete/__snapshots__/AutoComplete.spec.js.snap",
"chars": 623,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`AutoComplete should default view 1`] = `\n\n<div class=\"mu-input \">\n "
},
{
"path": "src/AutoComplete/filter.js",
"chars": 856,
"preview": "export default (query = '', data = [], maxSearchResults = 0) => {\n const results = [];\n for (let i = 0; i < data.lengt"
},
{
"path": "src/AutoComplete/index.js",
"chars": 257,
"preview": "import '../styles/components/text-field.less';\nimport '../styles/components/select.less';\nimport AutoComplete from './Au"
},
{
"path": "src/Avatar/Avatar.js",
"chars": 721,
"preview": "import { getWidth } from '../utils';\nimport color from '../internal/mixins/color';\n\nexport default {\n name: 'mu-avatar'"
},
{
"path": "src/Avatar/Avatar.spec.js",
"chars": 1308,
"preview": "import * as colors from '../theme/colors';\nimport test from '../utils/testing';\nimport Avatar from './Avatar';\n\ntest('Av"
},
{
"path": "src/Avatar/__snapshots__/Avatar.spec.js.snap",
"chars": 420,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Avatar should be change size 1`] = `\n\n<div class=\"mu-avatar \"\n "
},
{
"path": "src/Avatar/index.js",
"chars": 274,
"preview": "import '../styles/components/avatar.less';\nimport theme from '../theme';\nimport AvatarTheme from './theme';\nimport Avata"
},
{
"path": "src/Avatar/theme.js",
"chars": 149,
"preview": "export default (theme) => {\n return `\n .mu-avatar {\n background-color: ${theme.track};\n color: ${theme.tex"
},
{
"path": "src/Badge/Badge.js",
"chars": 902,
"preview": "import { convertClass } from '../utils';\nimport color from '../internal/mixins/color';\n\nexport default {\n name: 'mu-bad"
},
{
"path": "src/Badge/Badge.spec.js",
"chars": 1155,
"preview": "import test from '../utils/testing';\nimport Badge from './Badge';\nimport * as colors from '../theme/colors';\ntest('Badge"
},
{
"path": "src/Badge/__snapshots__/Badge.spec.js.snap",
"chars": 456,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Badge should custom class 1`] = `\n\n<div class=\"mu-badge-container\">"
},
{
"path": "src/Badge/index.js",
"chars": 265,
"preview": "import '../styles/components/badge.less';\nimport theme from '../theme';\nimport BadgeTheme from './theme';\nimport Badge f"
},
{
"path": "src/Badge/theme.js",
"chars": 146,
"preview": "export default (theme) => {\n return `\n .mu-badge{\n background-color: ${theme.track};\n color: ${theme.text."
},
{
"path": "src/BottomNav/BottomNav.js",
"chars": 1726,
"preview": "import color from '../internal/mixins/color';\nimport AbstractButton from '../internal/AbstractButton';\n\nexport default {"
},
{
"path": "src/BottomNav/BottomNav.spec.js",
"chars": 1846,
"preview": "import Vue from 'vue';\nimport test from '../utils/testing';\nimport BottomNav from './BottomNav';\nimport BottomNavItem fr"
},
{
"path": "src/BottomNav/BottomNavItem.js",
"chars": 1945,
"preview": "import AbstractButton from '../internal/AbstractButton';\nimport Icon from '../Icon';\nimport route from '../internal/mixi"
},
{
"path": "src/BottomNav/__snapshots__/BottomNav.spec.js.snap",
"chars": 2800,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Bottom Navigation should default view 1`] = `\n\n<div tabindex=\"0\"\n "
},
{
"path": "src/BottomNav/index.js",
"chars": 436,
"preview": "import '../styles/components/bottom-nav.less';\nimport theme from '../theme';\nimport BottomNavTheme from './theme';\nimpor"
},
{
"path": "src/BottomNav/theme.js",
"chars": 695,
"preview": "import { fade } from '../utils/colorManipulator';\n\nexport default (theme) => {\n return `\n .mu-bottom-nav{\n backgrou"
},
{
"path": "src/BottomSheet/BottomSheet.js",
"chars": 495,
"preview": "import popup from '../internal/mixins/popup';\nimport { BottomSheetTransition } from '../internal/transitions';\n\nexport d"
},
{
"path": "src/BottomSheet/BottomSheet.spec.js",
"chars": 310,
"preview": "import test from '../utils/testing';\nimport BottomSheet from './BottomSheet';\n\ntest('Bottom Sheet', ({ mount }) => {\n i"
},
{
"path": "src/BottomSheet/__snapshots__/BottomSheet.spec.js.snap",
"chars": 169,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Bottom Sheet should default view 1`] = `\n\n<div class=\"mu-bottom-she"
},
{
"path": "src/BottomSheet/index.js",
"chars": 320,
"preview": "import '../styles/components/bottom-sheet.less';\nimport theme from '../theme';\nimport BottomSheetTheme from './theme';\ni"
},
{
"path": "src/BottomSheet/theme.js",
"chars": 127,
"preview": "export default (theme) => {\n return `\n .mu-bottom-sheet {\n background-color: ${theme.background.paper};\n }\n "
},
{
"path": "src/Breadcrumbs/Breadcrumbs.js",
"chars": 867,
"preview": "export default {\n name: 'mu-breadcrumbs',\n props: {\n divider: {\n type: String,\n default: '/'\n }\n },\n "
},
{
"path": "src/Breadcrumbs/Breadcrumbs.spec.js",
"chars": 825,
"preview": "import Vue from 'vue';\nimport test from '../utils/testing';\nimport Breadcrumbs from './Breadcrumbs';\nimport BreadcrumbsI"
},
{
"path": "src/Breadcrumbs/BreadcrumbsItem.js",
"chars": 474,
"preview": "import route from '../internal/mixins/route';\n\nexport default {\n name: 'mu-breadcrumbs-item',\n mixins: [route],\n prop"
},
{
"path": "src/Breadcrumbs/__snapshots__/Breadcrumbs.spec.js.snap",
"chars": 258,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Breadcrumbs Items should default view 1`] = `\n\n<ul class=\"mu-breadc"
},
{
"path": "src/Breadcrumbs/index.js",
"chars": 465,
"preview": "import '../styles/components/breadcrumbs.less';\nimport theme from '../theme';\nimport BreadcrumbsTheme from './theme';\nim"
},
{
"path": "src/Breadcrumbs/theme.js",
"chars": 248,
"preview": "export default (theme) => {\n return `\n .mu-breadcrumbs-item {\n color: ${theme.primary};\n }\n .mu-breadcrumbs-item."
},
{
"path": "src/Button/Button.js",
"chars": 1955,
"preview": "import route from '../internal/mixins/route';\nimport ripple from '../internal/mixins/ripple';\nimport button from '../int"
},
{
"path": "src/Button/Button.spec.js",
"chars": 1814,
"preview": "import test from '../utils/testing';\nimport Button from './Button';\nimport * as colors from '../theme/colors';\n\ntest('Bu"
},
{
"path": "src/Button/__snapshots__/Button.spec.js.snap",
"chars": 1980,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Button should default view 1`] = `\n\n<button tabindex=\"0\"\n ty"
},
{
"path": "src/Button/index.js",
"chars": 274,
"preview": "import '../styles/components/button.less';\nimport theme from '../theme';\nimport ButtonTheme from './theme';\nimport Butto"
},
{
"path": "src/Button/theme.js",
"chars": 842,
"preview": "import { fade, darken } from '../utils/colorManipulator';\n\nexport default (theme) => {\n return `\n .mu-raised-button {\n"
},
{
"path": "src/Card/Card.js",
"chars": 264,
"preview": "export default {\n name: 'mu-card',\n props: {\n raised: Boolean\n },\n render (h) {\n return h('div', {\n stati"
},
{
"path": "src/Card/CardHeader.js",
"chars": 583,
"preview": "export default {\n name: 'mu-card-header',\n functional: true,\n props: {\n title: String,\n subTitle: String\n },\n "
},
{
"path": "src/Card/CardMedia.js",
"chars": 543,
"preview": "export default {\n name: 'mu-card-media',\n functional: true,\n props: {\n title: String,\n subTitle: String\n },\n "
},
{
"path": "src/Card/CardTitle.js",
"chars": 401,
"preview": "export default {\n name: 'mu-card-title',\n functional: true,\n props: {\n title: String,\n subTitle: String\n },\n "
},
{
"path": "src/Card/index.js",
"chars": 879,
"preview": "import '../styles/components/card.less';\nimport theme from '../theme';\nimport CardTheme from './theme';\nimport Card from"
},
{
"path": "src/Card/theme.js",
"chars": 608,
"preview": "import { fade } from '../utils/colorManipulator';\n\nexport default (theme) => {\n return `\n .mu-card {\n backgroun"
},
{
"path": "src/Carousel/Carousel.js",
"chars": 5571,
"preview": "import Button from '../Button';\nimport swipe from '../internal/directives/swipe';\n\nexport default {\n name: 'mu-carousel"
},
{
"path": "src/Carousel/CarouselItem.js",
"chars": 831,
"preview": "export default {\n name: 'mu-carousel-item',\n inject: [\n 'addCarouselItem',\n 'removeCarouselItem',\n 'isCarouse"
},
{
"path": "src/Carousel/index.js",
"chars": 316,
"preview": "import '../styles/components/carousel.less';\nimport Carousel from './Carousel';\nimport CarouselItem from './CarouselItem"
},
{
"path": "src/Checkbox/Checkbox.js",
"chars": 2129,
"preview": "import select from '../internal/mixins/select';\nimport Icon from '../Icon';\n\nexport default {\n name: 'mu-checkbox',\n m"
},
{
"path": "src/Checkbox/index.js",
"chars": 292,
"preview": "import '../styles/components/checkbox.less';\nimport theme from '../theme';\nimport CheckboxTheme from './theme';\nimport C"
},
{
"path": "src/Checkbox/theme.js",
"chars": 372,
"preview": "export default (theme) => {\n return `\n .mu-checkbox {\n color: ${theme.text.secondary};\n }\n .mu-checkbox.disabled "
},
{
"path": "src/Chip/Chip.js",
"chars": 1186,
"preview": "import color from '../internal/mixins/color';\n\nexport default {\n name: 'mu-chip',\n mixins: [color],\n props: {\n del"
},
{
"path": "src/Chip/index.js",
"chars": 256,
"preview": "import '../styles/components/chip.less';\nimport theme from '../theme';\nimport ChipTheme from './theme';\nimport Chip from"
},
{
"path": "src/Chip/theme.js",
"chars": 1038,
"preview": "import { fade, emphasize } from '../utils/colorManipulator';\nexport default (theme) => {\n return `\n .mu-chip {\n bac"
},
{
"path": "src/DataTable/DataTable.js",
"chars": 2226,
"preview": "import header from './mixins/header';\nimport body from './mixins/body';\nimport footer from './mixins/footer';\nimport col"
},
{
"path": "src/DataTable/index.js",
"chars": 302,
"preview": "import '../styles/components/data-table.less';\nimport theme from '../theme';\nimport DataTableTheme from './theme';\nimpor"
},
{
"path": "src/DataTable/mixins/body.js",
"chars": 5611,
"preview": "import Checkbox from '../../Checkbox';\nimport { ExpandTransition } from '../../internal/transitions';\n\nexport default {\n"
},
{
"path": "src/DataTable/mixins/colgroup.js",
"chars": 1459,
"preview": "import resize from '../../internal/directives/resize';\nexport default {\n props: {\n minColWidth: {\n type: Number"
},
{
"path": "src/DataTable/mixins/footer.js",
"chars": 507,
"preview": "export default {\n methods: {\n createFooter (h) {\n return this.$scopedSlots.footer ? h('div', {\n staticCl"
},
{
"path": "src/DataTable/mixins/header.js",
"chars": 3356,
"preview": "import Checkbox from '../../Checkbox';\nimport Tooltip from '../../Tooltip';\n\nexport default {\n methods: {\n toggleSel"
},
{
"path": "src/DataTable/mixins/progress.js",
"chars": 508,
"preview": "import { LinearProgress } from '../../Progress';\nimport { FadeTransition } from '../../internal/transitions';\n\nexport de"
},
{
"path": "src/DataTable/theme.js",
"chars": 1145,
"preview": "import * as colors from '../theme/colors';\nexport default (theme, type) => {\n return `\n .mu-table {\n background-col"
},
{
"path": "src/DateInput/Container.js",
"chars": 1268,
"preview": "import BottomSheet from '../BottomSheet';\nimport Dialog from '../Dialog';\nimport Popover from '../Popover';\n\nexport defa"
},
{
"path": "src/DateInput/DateInput.js",
"chars": 7056,
"preview": "import input from '../internal/mixins/input';\nimport keyboardFocus from '../internal/directives/keyboard-focus';\nimport "
},
{
"path": "src/DateInput/index.js",
"chars": 196,
"preview": "import DateInput from './DateInput';\nimport '../styles/components/date-input.less';\n\nDateInput.install = function (Vue) "
},
{
"path": "src/Dialog/Dialog.js",
"chars": 3678,
"preview": "import popup from '../internal/mixins/popup';\nimport resize from '../internal/directives/resize';\nimport { convertClass,"
},
{
"path": "src/Dialog/index.js",
"chars": 274,
"preview": "import '../styles/components/dialog.less';\nimport theme from '../theme';\nimport DialogTheme from './theme';\nimport Dialo"
},
{
"path": "src/Dialog/theme.js",
"chars": 473,
"preview": "import { fade } from '../utils/colorManipulator';\n\nexport default (theme) => {\n return `\n .mu-dialog {\n background-"
},
{
"path": "src/Divider/Divider.js",
"chars": 325,
"preview": "export default {\n name: 'mu-divider',\n functional: true,\n props: {\n inset: Boolean,\n shallowInset: Boolean\n },"
},
{
"path": "src/Divider/index.js",
"chars": 283,
"preview": "import '../styles/components/divider.less';\nimport theme from '../theme';\nimport DividerTheme from './theme';\nimport Div"
},
{
"path": "src/Divider/theme.js",
"chars": 107,
"preview": "export default (theme) => {\n return `\n .mu-divider {\n background-color: ${theme.divider};\n }\n `;\n};\n"
},
{
"path": "src/Drawer/Drawer.js",
"chars": 2524,
"preview": "import Paper from '../Paper';\nimport PopupManager from '../internal/mixins/popup/manager';\nimport { getZIndex } from '.."
},
{
"path": "src/Drawer/index.js",
"chars": 274,
"preview": "import '../styles/components/drawer.less';\nimport theme from '../theme';\nimport DrawerTheme from './theme';\nimport Drawe"
},
{
"path": "src/Drawer/theme.js",
"chars": 115,
"preview": "export default (theme) => {\n return `\n .mu-drawer {\n background-color: ${theme.background.paper};\n }\n `;\n};\n"
},
{
"path": "src/ExpansionPanel/ExpansionPanel.js",
"chars": 2303,
"preview": "import Paper from '../Paper';\nimport Button from '../Button';\nimport { ExpandTransition } from '../internal/transitions'"
},
{
"path": "src/ExpansionPanel/index.js",
"chars": 347,
"preview": "import '../styles/components/expansion-panel.less';\nimport theme from '../theme';\nimport ExpansionPanelTheme from './the"
},
{
"path": "src/ExpansionPanel/theme.js",
"chars": 294,
"preview": "export default (theme) => {\n return `\n .mu-expansion-panel {\n color: ${theme.text.primary};\n border-top-color: $"
},
{
"path": "src/Form/Form.js",
"chars": 1835,
"preview": "import { isPromise, getObjAttr } from '../utils';\nexport default {\n name: 'mu-form',\n provide () {\n return {\n "
},
{
"path": "src/Form/FormItem.js",
"chars": 4462,
"preview": "import Form from './Form';\nimport Icon from '../Icon';\nimport { getWidth, isPromise, isObject } from '../utils';\nimport "
},
{
"path": "src/Form/index.js",
"chars": 360,
"preview": "import '../styles/components/form.less';\nimport theme from '../theme';\nimport FormTheme from './theme';\nimport Form from"
},
{
"path": "src/Form/theme.js",
"chars": 359,
"preview": "export default (theme) => {\n return `\n .mu-form-item {\n color: ${theme.text.secondary};\n }\n\n .mu-form-item__focus"
},
{
"path": "src/Grid/Col.js",
"chars": 1226,
"preview": "import { props, generatePropsClass } from './utils';\n\nfunction createColClass (props) {\n const classNames = [];\n if (p"
},
{
"path": "src/Grid/Container.js",
"chars": 283,
"preview": "export default {\n name: 'mu-container',\n functional: true,\n props: {\n fluid: Boolean\n },\n render (h, { data, pro"
},
{
"path": "src/Grid/Flex.js",
"chars": 434,
"preview": "import { props, generatePropsClass } from './utils';\nexport default {\n name: 'mu-flex',\n functional: true,\n props: {\n"
},
{
"path": "src/Grid/Row.js",
"chars": 454,
"preview": "import { props, generatePropsClass } from './utils';\n\nexport default {\n name: 'mu-row',\n functional: true,\n props: {\n"
},
{
"path": "src/Grid/index.js",
"chars": 390,
"preview": "import '../styles/components/bootstrap-grid.less';\nimport Container from './Container';\nimport Row from './Row';\nimport "
},
{
"path": "src/Grid/utils.js",
"chars": 1386,
"preview": "function createEnumProps (type, def, enums) {\n return {\n type,\n default: def,\n validator (val) {\n return "
},
{
"path": "src/GridList/GridList.js",
"chars": 837,
"preview": "export default {\n name: 'mu-grid-list',\n provide () {\n return {\n getGridListCellHeight: this.getGridListCellHe"
},
{
"path": "src/GridList/GridTile.js",
"chars": 2049,
"preview": "export default {\n name: 'mu-grid-tile',\n inject: ['getGridListCellHeight', 'getGridListCols', 'getGridListPadding'],\n "
},
{
"path": "src/GridList/index.js",
"chars": 401,
"preview": "import '../styles/components/grid-list.less';\nimport theme from '../theme';\nimport GridListTheme from './theme';\nimport "
},
{
"path": "src/GridList/theme.js",
"chars": 44,
"preview": "export default (theme) => {\n return ``;\n};\n"
},
{
"path": "src/Helpers/index.js",
"chars": 994,
"preview": "import TouchRipple from '../internal/TouchRipple';\nimport {\n ExpandTransition,\n FadeTransition,\n SlideTopTransition,\n"
},
{
"path": "src/Icon/Icon.js",
"chars": 951,
"preview": "import color from '../internal/mixins/color';\n\nexport default {\n name: 'mu-icon',\n functional: true,\n props: {\n va"
},
{
"path": "src/Icon/index.js",
"chars": 119,
"preview": "import Icon from './Icon';\n\nIcon.install = function (Vue) {\n Vue.component(Icon.name, Icon);\n};\n\nexport default Icon;\n"
},
{
"path": "src/List/List.js",
"chars": 1557,
"preview": "export default {\n name: 'mu-list',\n provide () {\n return {\n listItemClick: this.listItemClick,\n getNested"
},
{
"path": "src/List/ListAction.js",
"chars": 273,
"preview": "export default {\n name: 'mu-list-item-action',\n functional: true,\n render (h, { data, props, children }) {\n data.s"
},
{
"path": "src/List/ListItem.js",
"chars": 4368,
"preview": "import AbstractButton from '../internal/AbstractButton';\nimport route from '../internal/mixins/route';\nimport ripple fro"
},
{
"path": "src/List/index.js",
"chars": 1163,
"preview": "import '../styles/components/list.less';\nimport theme from '../theme';\nimport ListTheme from './theme';\nimport { createS"
},
{
"path": "src/List/theme.js",
"chars": 480,
"preview": "import { fade } from '../utils/colorManipulator';\n\nexport default (theme) => {\n return `\n .mu-item-wrapper.hover {\n "
},
{
"path": "src/LoadMore/InfiniteScroll.js",
"chars": 1550,
"preview": "import Circular from '../Progress/Circular';\nimport scroll from '../internal/directives/scroll';\nimport { getScrollTop }"
},
{
"path": "src/LoadMore/LoadMore.js",
"chars": 1016,
"preview": "import RefreshControl from './RefreshControl';\nimport InfiniteScroll from './InfiniteScroll';\nimport { isNotNull } from "
},
{
"path": "src/LoadMore/RefreshControl.js",
"chars": 5324,
"preview": "import Circular from '../Progress/Circular';\nimport { transitionEnd, getScrollEventTarget } from '../utils/dom';\nimport "
},
{
"path": "src/LoadMore/index.js",
"chars": 593,
"preview": "import '../styles/components/progress.less';\nimport '../styles/components/load-more.less';\nimport theme from '../theme';"
},
{
"path": "src/LoadMore/theme.js",
"chars": 101,
"preview": "export default theme => {\n return `\n .mu-refresh-control{\n color: ${theme.primary};\n }\n `;\n};\n"
},
{
"path": "src/Menu/Menu.js",
"chars": 2113,
"preview": "import Popover from '../Popover';\n\nexport default {\n name: 'mu-menu',\n props: {\n popoverClass: [String, Object, Arr"
},
{
"path": "src/Menu/index.js",
"chars": 160,
"preview": "import '../styles/components/menu.less';\nimport Menu from './Menu';\n\nMenu.install = function (Vue) {\n Vue.component(Men"
},
{
"path": "src/Pagination/Pagination.js",
"chars": 4446,
"preview": "import Button from '../Button';\n\nexport default {\n name: 'mu-pagination',\n props: {\n total: {\n type: Number,\n "
},
{
"path": "src/Pagination/index.js",
"chars": 310,
"preview": "import '../styles/components/pagination.less';\nimport theme from '../theme';\nimport PaginationTheme from './theme';\nimpo"
},
{
"path": "src/Pagination/theme.js",
"chars": 376,
"preview": "export default (theme) => {\n return `\n .mu-pagination {\n color: ${theme.text.primary};\n font-size: 14px;\n }\n ."
},
{
"path": "src/Paper/Paper.js",
"chars": 672,
"preview": "import { convertClass } from '../utils';\n\nexport default {\n name: 'mu-paper',\n functional: true,\n props: {\n circle"
},
{
"path": "src/Paper/index.js",
"chars": 311,
"preview": "import '../styles/components/paper.less';\nimport '../styles/components/elevation.less';\nimport theme from '../theme';\nim"
},
{
"path": "src/Paper/theme.js",
"chars": 148,
"preview": "export default (theme) => {\n return `\n .mu-paper {\n color: ${theme.text.primary};\n background-color: ${theme.bac"
},
{
"path": "src/Picker/DatePicker/DateDisplay.js",
"chars": 2639,
"preview": "import color from '../../internal/mixins/color';\n\nexport default {\n mixins: [color],\n props: {\n type: String,\n d"
},
{
"path": "src/Picker/DatePicker/DatePicker.js",
"chars": 4685,
"preview": "import color from '../../internal/mixins/color';\nimport pickerProps from '../mixins/props';\nimport DateDisplay from './D"
},
{
"path": "src/Picker/DatePicker/DayButton.js",
"chars": 1198,
"preview": "export default {\n inject: [\n 'getDayButtonSlots'\n ],\n props: {\n selected: Boolean,\n date: Date,\n disabled"
},
{
"path": "src/Picker/DatePicker/MonthDayView.js",
"chars": 4107,
"preview": "import DayButton from './DayButton';\nimport Toolbar from './Toolbar';\nimport * as dateUtils from './dateUtils';\n\nexport "
},
{
"path": "src/Picker/DatePicker/MonthView.js",
"chars": 3563,
"preview": "import Toolbar from './Toolbar';\nimport * as dateUtils from './dateUtils';\n\nexport default {\n props: {\n dateTimeForm"
},
{
"path": "src/Picker/DatePicker/Toolbar.js",
"chars": 2464,
"preview": "import Button from '../../Button';\nexport default {\n props: {\n dateTimeFormat: Object,\n displayDates: Array,\n "
},
{
"path": "src/Picker/DatePicker/YearButton.js",
"chars": 539,
"preview": "export default {\n props: {\n year: [String, Number],\n selected: Boolean\n },\n mounted () {\n if (this.selected)"
},
{
"path": "src/Picker/DatePicker/YearView.js",
"chars": 1492,
"preview": "import YearButton from './YearButton';\n\nexport default {\n props: {\n maxDate: Date,\n minDate: Date,\n displayDat"
},
{
"path": "src/Picker/DatePicker/dateUtils.js",
"chars": 4284,
"preview": "/**\n * material-ui dateUtils.js\n * https://github.com/callemall/material-ui/blob/master/src/DatePicker/dateUtils.js\n */\n"
},
{
"path": "src/Picker/DatePicker/index.js",
"chars": 40,
"preview": "export { default } from './DatePicker';\n"
},
{
"path": "src/Picker/DateTimePicker/DateTimeDisplay.js",
"chars": 3797,
"preview": "import color from '../../internal/mixins/color';\nexport default {\n mixins: [color],\n props: {\n affix: String,\n d"
},
{
"path": "src/Picker/DateTimePicker/DateTimePicker.js",
"chars": 9364,
"preview": "import pickerProps from '../mixins/props';\nimport color from '../../internal/mixins/color';\nimport DatePicker from '../D"
},
{
"path": "src/Picker/DateTimePicker/index.js",
"chars": 44,
"preview": "export { default } from './DateTimePicker';\n"
},
{
"path": "src/Picker/TimePicker/Hours.js",
"chars": 3721,
"preview": "import ClockNumber from './Number';\nimport ClockPointer from './Pointer';\nimport { getTouchEventOffsetValues, rad2deg } "
},
{
"path": "src/Picker/TimePicker/ListView.js",
"chars": 3149,
"preview": "export default {\n props: {\n format: {\n type: String,\n default: 'ampm',\n validator (val) {\n ret"
},
{
"path": "src/Picker/TimePicker/Minutes.js",
"chars": 3702,
"preview": "import ClockNumber from './Number';\nimport ClockPointer from './Pointer';\nimport { getTouchEventOffsetValues, rad2deg } "
},
{
"path": "src/Picker/TimePicker/Number.js",
"chars": 1801,
"preview": "import { isInner } from './timeUtils';\nconst positions = [\n [0, 5],\n [54.5, 16.6],\n [94.4, 59.5],\n [109, 114],\n [94"
},
{
"path": "src/Picker/TimePicker/Pointer.js",
"chars": 1176,
"preview": "import { isInner } from './timeUtils';\n\nexport default {\n props: {\n hasSelected: {\n type: Boolean,\n defaul"
},
{
"path": "src/Picker/TimePicker/TimeDisplay.js",
"chars": 3076,
"preview": "import color from '../../internal/mixins/color';\n\nexport default {\n mixins: [color],\n props: {\n affix: {\n type"
},
{
"path": "src/Picker/TimePicker/TimePicker.js",
"chars": 4344,
"preview": "import TimeDisplay from './TimeDisplay';\nimport ClockHours from './Hours';\nimport ClockMinutes from './Minutes';\nimport "
},
{
"path": "src/Picker/TimePicker/index.js",
"chars": 40,
"preview": "export { default } from './TimePicker';\n"
},
{
"path": "src/Picker/TimePicker/timeUtils.js",
"chars": 2875,
"preview": "/**\n * material-ui timeUtils.js\n * https://github.com/callemall/material-ui/blob/master/src/TimePicker/timeUtils.js\n */\n"
},
{
"path": "src/Picker/index.js",
"chars": 514,
"preview": "import '../styles/components/picker.less';\nimport theme from '../theme';\nimport PickerTheme from './theme';\nimport DateP"
},
{
"path": "src/Picker/mixins/props.js",
"chars": 108,
"preview": "export default {\n props: {\n landscape: Boolean,\n noDisplay: Boolean,\n displayColor: String\n }\n};\n"
},
{
"path": "src/Picker/theme.js",
"chars": 1714,
"preview": "import { fade } from '../utils/colorManipulator';\nexport default (theme, type) => {\n return `\n .mu-picker {\n color:"
},
{
"path": "src/Popover/Popover.js",
"chars": 5291,
"preview": "import popup from '../internal/mixins/popup';\nimport scroll from '../internal/directives/scroll';\nimport resize from '.."
},
{
"path": "src/Popover/index.js",
"chars": 283,
"preview": "import '../styles/components/popover.less';\nimport theme from '../theme';\nimport PopoverTheme from './theme';\nimport Pop"
},
{
"path": "src/Popover/theme.js",
"chars": 109,
"preview": "export default (theme) => {\n return `\n .mu-popover{\n background: ${theme.background.paper};\n }\n `;\n};\n"
},
{
"path": "src/Progress/Circular.js",
"chars": 1130,
"preview": "import color from '../internal/mixins/color';\n\nexport default {\n mixins: [color],\n props: {\n size: {\n type: Nu"
},
{
"path": "src/Progress/CircularProgress.js",
"chars": 2527,
"preview": "import Circular from './Circular';\nimport color from '../internal/mixins/color';\n\nexport default {\n name: 'mu-circular-"
},
{
"path": "src/Progress/LinearProgress.js",
"chars": 1326,
"preview": "import color from '../internal/mixins/color';\n\nexport default {\n name: 'mu-linear-progress',\n mixins: [color],\n props"
},
{
"path": "src/Progress/index.js",
"chars": 451,
"preview": "import '../styles/components/progress.less';\nimport theme from '../theme';\nimport ProgressTheme from './theme';\nimport L"
},
{
"path": "src/Progress/theme.js",
"chars": 2691,
"preview": "export default (theme) => {\n return `\n .mu-linear-progress.mu-secondary-color .mu-linear-progress-background,\n .mu-li"
},
{
"path": "src/Radio/Radio.js",
"chars": 1775,
"preview": "import select from '../internal/mixins/select';\nimport Icon from '../Icon';\nimport { isNull } from '../utils';\nexport de"
},
{
"path": "src/Radio/index.js",
"chars": 265,
"preview": "import '../styles/components/radio.less';\nimport theme from '../theme';\nimport RadioTheme from './theme';\nimport Radio f"
},
{
"path": "src/Radio/theme.js",
"chars": 301,
"preview": "export default (theme) => {\n return `\n .mu-radio.disabled {\n color: ${theme.text.disabled};\n }\n .mu-radio-checke"
},
{
"path": "src/Select/Option.js",
"chars": 1819,
"preview": "import { ListItem, ListItemContent, ListItemTitle, ListAction } from '../List';\nimport Checkbox from '../Checkbox';\n\nexp"
},
{
"path": "src/Select/Select.js",
"chars": 959,
"preview": "import input from '../internal/mixins/input.js';\nimport menu from './mixins/menu';\nimport selection from './mixins/selec"
},
{
"path": "src/Select/index.js",
"chars": 370,
"preview": "import '../styles/components/select.less';\nimport theme from '../theme';\nimport SelectTheme from './theme';\nimport Selec"
},
{
"path": "src/Select/mixins/events.js",
"chars": 1001,
"preview": "export default {\n methods: {\n blur () {\n this.deactivateInput();\n this.closeMenu();\n this.$emit('blur"
},
{
"path": "src/Select/mixins/keyboard.js",
"chars": 2933,
"preview": "import keycode from 'keycode';\n\nexport default {\n data () {\n return {\n focusIndex: -1\n };\n },\n computed: {"
},
{
"path": "src/Select/mixins/menu.js",
"chars": 5206,
"preview": "import List from '../../List';\nimport Popover from '../../Popover';\n\nexport default {\n provide () {\n return {\n "
},
{
"path": "src/Select/mixins/selection.js",
"chars": 5857,
"preview": "import Chip from '../../Chip';\nimport clickOutSide from '../../internal/directives/click-outside';\nexport default {\n di"
},
{
"path": "src/Select/theme.js",
"chars": 609,
"preview": "import { fade } from '../utils/colorManipulator';\n\nexport default (theme) => {\n return `\n .mu-select-content {\n col"
},
{
"path": "src/SlidePicker/Picker.js",
"chars": 1164,
"preview": "import PickerSlot from './PickerSlot';\n\nexport default {\n name: 'mu-slide-picker',\n props: {\n visibleItemCount: {\n "
},
{
"path": "src/SlidePicker/PickerSlot.js",
"chars": 5114,
"preview": "import swipe from '../internal/directives/swipe';\nimport translateUtil from '../utils/translate';\nimport { transitionEnd"
},
{
"path": "src/SlidePicker/index.js",
"chars": 280,
"preview": "import '../styles/components/slide-picker.less';\nimport theme from '../theme';\nimport PickerTheme from './theme';\nimport"
},
{
"path": "src/SlidePicker/theme.js",
"chars": 469,
"preview": "export default (theme) => {\n return `\n .mu-slide-picker{\n background: ${theme.background.paper};\n }\n .mu-slide-pi"
},
{
"path": "src/Slider/Slider.js",
"chars": 7557,
"preview": "import keycode from 'keycode';\nimport FocusRipple from '../internal/FocusRipple';\nimport color from '../internal/mixins/"
},
{
"path": "src/Slider/index.js",
"chars": 274,
"preview": "import '../styles/components/slider.less';\nimport theme from '../theme';\nimport SliderTheme from './theme';\nimport Slide"
},
{
"path": "src/Slider/theme.js",
"chars": 426,
"preview": "export default (theme) => {\n return `\n .mu-slider {\n color: ${theme.primary};\n }\n .mu-slider-track{\n backgroun"
},
{
"path": "src/Snackbar/Snackbar.js",
"chars": 1475,
"preview": "import popup from '../internal/mixins/popup';\nimport { SlideTopTransition, SlideBottomTransition } from '../internal/tra"
},
{
"path": "src/Snackbar/index.js",
"chars": 292,
"preview": "import '../styles/components/snackbar.less';\nimport theme from '../theme';\nimport SnackbarTheme from './theme';\nimport S"
},
{
"path": "src/Snackbar/theme.js",
"chars": 149,
"preview": "export default (theme) => {\n return `\n .mu-snackbar {\n color: ${theme.text.alternate};\n background-color: ${them"
},
{
"path": "src/Stepper/Step.js",
"chars": 945,
"preview": "export default {\n name: 'mu-step',\n props: {\n active: {\n type: Boolean,\n default: false\n },\n comple"
},
{
"path": "src/Stepper/StepButton.js",
"chars": 1077,
"preview": "import AbstractButton from '../internal/AbstractButton';\nimport StepLabel from './StepLabel';\n\nexport default {\n name: "
},
{
"path": "src/Stepper/StepConnector.js",
"chars": 261,
"preview": "export default {\n name: 'mu-step-connector',\n functional: true,\n render (h, { data, children }) {\n data.staticClas"
},
{
"path": "src/Stepper/StepContent.js",
"chars": 648,
"preview": "import ExpandTransition from '../internal/ExpandTransition';\n\nexport default {\n name: 'mu-step-content',\n props: {\n "
},
{
"path": "src/Stepper/StepLabel.js",
"chars": 1060,
"preview": "export default {\n name: 'mu-step-label',\n props: {\n active: Boolean,\n completed: Boolean,\n disabled: Boolean,"
},
{
"path": "src/Stepper/Stepper.js",
"chars": 1403,
"preview": "import StepConnector from './StepConnector';\n\nexport default {\n name: 'mu-stepper',\n props: {\n activeStep: {\n "
},
{
"path": "src/Stepper/index.js",
"chars": 773,
"preview": "import '../styles/components/stepper.less';\nimport theme from '../theme';\nimport StepperTheme from './theme';\nimport Ste"
},
{
"path": "src/Stepper/theme.js",
"chars": 506,
"preview": "export default (theme) => {\n return `\n .mu-step-label {\n color: ${theme.text.primary};\n }\n .mu-step-label.disable"
}
]
// ... and 115 more files (download for full content)
About this extraction
This page contains the full source code of the museui/muse-ui GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 315 files (501.6 KB), approximately 150.3k tokens, and a symbol index with 842 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.