20 | * ```
21 | */
22 | export default {
23 | bind(el, binding, vnode) {
24 | const id = nodeList.push(el) - 1;
25 | const documentHandler = function(mouseup, mousedown) {
26 | if (!vnode.context ||
27 | el.contains(mouseup.target) ||
28 | (vnode.context.popperElm &&
29 | (vnode.context.popperElm.contains(mouseup.target) ||
30 | vnode.context.popperElm.contains(mousedown.target)))) return;
31 |
32 | if (binding.expression &&
33 | el[ctx].methodName &&
34 | vnode.context[el[ctx].methodName]) {
35 | vnode.context[el[ctx].methodName]();
36 | } else {
37 | el[ctx].bindingFn && el[ctx].bindingFn();
38 | }
39 | };
40 | el[ctx] = {
41 | id,
42 | documentHandler,
43 | methodName: binding.expression,
44 | bindingFn: binding.value
45 | };
46 | },
47 |
48 | update(el, binding) {
49 | el[ctx].methodName = binding.expression;
50 | el[ctx].bindingFn = binding.value;
51 | },
52 |
53 | unbind(el) {
54 | let len = nodeList.length;
55 |
56 | for (let i = 0; i < len; i++) {
57 | if (nodeList[i][ctx].id === el[ctx].id) {
58 | nodeList.splice(i, 1);
59 | break;
60 | }
61 | }
62 | }
63 | };
64 |
--------------------------------------------------------------------------------
/packages/message/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import { PopupManager } from 'element-ui/src/utils/popup';
3 | let MessageConstructor = Vue.extend(require('./main.vue'));
4 |
5 | let instance;
6 | let instances = [];
7 | let seed = 1;
8 |
9 | var Message = function(options) {
10 | if (Vue.prototype.$isServer) return;
11 | options = options || {};
12 | if (typeof options === 'string') {
13 | options = {
14 | message: options
15 | };
16 | }
17 | let userOnClose = options.onClose;
18 | let id = 'message_' + seed++;
19 |
20 | options.onClose = function() {
21 | Message.close(id, userOnClose);
22 | };
23 |
24 | instance = new MessageConstructor({
25 | data: options
26 | });
27 | instance.id = id;
28 | instance.vm = instance.$mount();
29 | document.body.appendChild(instance.vm.$el);
30 | instance.vm.visible = true;
31 | instance.dom = instance.vm.$el;
32 | instance.dom.style.zIndex = PopupManager.nextZIndex();
33 | instances.push(instance);
34 | return instance.vm;
35 | };
36 |
37 | ['success', 'warning', 'info', 'error'].forEach(type => {
38 | Message[type] = options => {
39 | if (typeof options === 'string') {
40 | options = {
41 | message: options
42 | };
43 | }
44 | options.type = type;
45 | return Message(options);
46 | };
47 | });
48 |
49 | Message.close = function(id, userOnClose) {
50 | for (let i = 0, len = instances.length; i < len; i++) {
51 | if (id === instances[i].id) {
52 | if (typeof userOnClose === 'function') {
53 | userOnClose(instances[i]);
54 | }
55 | instances.splice(i, 1);
56 | break;
57 | }
58 | }
59 | };
60 |
61 | Message.closeAll = function() {
62 | for (let i = instances.length - 1; i >= 0; i--) {
63 | instances[i].close();
64 | }
65 | };
66 |
67 | export default Message;
68 |
--------------------------------------------------------------------------------
/.github/CONTRIBUTING.zh-CN.md:
--------------------------------------------------------------------------------
1 | # Element UI 贡献指南
2 |
3 | Hi! 首先感谢你使用 Element UI。
4 |
5 | Element UI 是一套为开发者、设计师和产品经理准备的开源组件库，旨在快速搭建页面。它基于 Vue 2.0 开发，并提供了配套的设计资源，充分满足可定制化的需求。
6 |
7 | Element UI 的成长离不开大家的支持，如果你愿意为 Element UI 贡献代码或提供建议，请阅读以下内容。
8 |
9 | ## Issue 规范
10 | - issue 仅用于提交 Bug 或 Feature 以及设计相关的内容，其它内容可能会被直接关闭。如果你在使用时产生了疑问，请到 Slack 或 [Gitter](https://gitter.im/ElemeFE/element) 里咨询。
11 |
12 | - 在提交 issue 之前，请搜索相关内容是否已被提出。
13 |
14 | - 请说明 Element UI 和 Vue 的版本号，并提供操作系统和浏览器信息。推荐使用 [JSFiddle](https://jsfiddle.net/) 生成在线 demo，这能够更直观地重现问题。
15 |
16 | ## Pull Request 规范
17 | - 请先 fork 一份到自己的项目下，不要直接在仓库下建分支。
18 |
19 | - commit 信息要以`[组件名]: 描述信息` 的形式填写，例如 `Button: fix xxx bug`。
20 |
21 | - **不要提交** `lib` 里面打包的文件。
22 |
23 | - 执行 `npm run dist` 后可以正确打包文件。
24 |
25 | - 为了兼容性以及最终打包的文件体积考虑，我们的 babel 只引入了 `preset-2015`，所以不建议使用 ES2015 的 API，例如 `Array.prototype.find`、`Object.assign`等。如果有需要，请引入第三方的 polyfill。
26 |
27 | - 提交 PR 前请 rebase，确保 commit 记录的整洁。
28 |
29 | - 确保 PR 是提交到 `dev` 分支，而不是 `master` 分支。
30 |
31 | - 如果是修复 bug，请在 PR 中给出描述信息。
32 |
33 | - 合并代码需要两名维护人员参与：一人进行 review 后 approve，另一人再次 review，通过后即可合并。
34 |
35 | ## 开发环境搭建
36 | 首先你需要 Node.js 4+ 和 NPM 3+
37 | ```shell
38 | git clone git@github.com:ElemeFE/element.git
39 | npm run dev
40 |
41 | # open http://localhost:8085
42 | ```
43 |
44 | 如果国内用户觉得安装慢可以使用 [yarn](https://github.com/yarnpkg/yarn) 搭配 taobao registry
45 | ```shell
46 | npm i yarn -g
47 | yarn config set registry https://registry.npm.taobao.org
48 | yarn
49 | npm run dev
50 |
51 | # open http://localhost:8085
52 | ```
53 |
54 | To build:
55 |
56 | ```shell
57 | npm run dist
58 | ```
59 |
60 | ## 组件开发规范
61 | - 通过 `make new` 创建组件目录结构，包含测试代码、入口文件、cooking 配置、package.json、文档
62 | - 如果包含父子组件，需要更改目录结构，参考 `Button`
63 | - 组件内如果依赖了其他组件，需要在当前组件内引入，参考 `Select`
64 |
65 | ## 代码规范
66 | 遵循饿了么前端的 [ESLint](https://github.com/ElemeFE/eslint-config-elemefe) 即可
67 |
--------------------------------------------------------------------------------
/packages/theme-default/src/date-picker/date-picker.css:
--------------------------------------------------------------------------------
1 | @import "../common/var.css";
2 | @import "./picker-panel.css";
3 |
4 | @component-namespace el {
5 | @b date-picker {
6 | min-width: 254px;
7 |
8 | &.has-sidebar.has-time {
9 | min-width: 434px;
10 | }
11 |
12 | &.has-sidebar {
13 | min-width: 370px;
14 | }
15 |
16 | &.has-time {
17 | min-width: 324px;
18 | }
19 |
20 | .el-picker-panel__content {
21 | min-width: 224px;
22 | }
23 |
24 | table {
25 | table-layout: fixed;
26 | width: 100%;
27 | }
28 |
29 | @e editor-wrap {
30 | position: relative;
31 | display: table-cell;
32 | padding: 0 5px;
33 | }
34 |
35 | @e time-header {
36 | position: relative;
37 | border-bottom: 1px solid var(--datepicker-inner-border-color);
38 | font-size: 12px;
39 | padding: 8px 5px 5px 5px;
40 | display: table;
41 | width: 100%;
42 | box-sizing: border-box;
43 | }
44 |
45 | @e header {
46 | margin: 12px;
47 | text-align: center;
48 | }
49 |
50 | @e header-label {
51 | font-size: 14px;
52 | padding: 0 5px;
53 | line-height: 22px;
54 | text-align: center;
55 | cursor: pointer;
56 |
57 | &:hover {
58 | color: var(--datepicker-text-hover-color);
59 | }
60 |
61 | &.active {
62 | color: var(--datepicker-active-color);
63 | }
64 | }
65 |
66 | @e prev-btn {
67 | float: left;
68 | }
69 |
70 | @e next-btn {
71 | float: right;
72 | }
73 |
74 | @e time-wrap {
75 | padding: 10px;
76 | text-align: center;
77 | }
78 |
79 | @e time-label {
80 | float: left;
81 | cursor: pointer;
82 | line-height: 30px;
83 | margin-left: 10px;
84 | }
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/packages/theme-default/src/index.css:
--------------------------------------------------------------------------------
1 | @import "./base.css";
2 | @import "./pagination.css";
3 | @import "./dialog.css";
4 | @import "./autocomplete.css";
5 | @import "./dropdown.css";
6 | @import "./dropdown-menu.css";
7 | @import "./dropdown-item.css";
8 | @import "./menu.css";
9 | @import "./submenu.css";
10 | @import "./menu-item.css";
11 | @import "./menu-item-group.css";
12 | @import "./input.css";
13 | @import "./input-number.css";
14 | @import "./radio.css";
15 | @import "./radio-group.css";
16 | @import "./radio-button.css";
17 | @import "./checkbox.css";
18 | @import "./checkbox-group.css";
19 | @import "./switch.css";
20 | @import "./select.css";
21 | @import "./button.css";
22 | @import "./button-group.css";
23 | @import "./table.css";
24 | @import "./table-column.css";
25 | @import "./date-picker.css";
26 | @import "./time-select.css";
27 | @import "./time-picker.css";
28 | @import "./popover.css";
29 | @import "./tooltip.css";
30 | @import "./message-box.css";
31 | @import "./breadcrumb.css";
32 | @import "./breadcrumb-item.css";
33 | @import "./form.css";
34 | @import "./form-item.css";
35 | @import "./tabs.css";
36 | @import "./tab-pane.css";
37 | @import "./tag.css";
38 | @import "./tree.css";
39 | @import "./alert.css";
40 | @import "./notification.css";
41 | @import "./slider.css";
42 | @import "./loading.css";
43 | @import "./row.css";
44 | @import "./col.css";
45 | @import "./upload.css";
46 | @import "./progress.css";
47 | @import "./spinner.css";
48 | @import "./message.css";
49 | @import "./badge.css";
50 | @import "./card.css";
51 | @import "./rate.css";
52 | @import "./steps.css";
53 | @import "./step.css";
54 | @import "./carousel.css";
55 | @import "./scrollbar.css";
56 | @import "./carousel-item.css";
57 | @import "./collapse.css";
58 | @import "./collapse-item.css";
59 | @import "./cascader.css";
60 | @import "./color-picker.css";
61 |
--------------------------------------------------------------------------------
/packages/theme-default/src/core/option.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "../common/var.css";
3 |
4 | @component-namespace element {
5 |
6 | @b option {
7 | box-sizing: border-box;
8 | color: var(--dropdown-color);
9 | cursor: pointer;
10 | display: block;
11 | font-size: var(--dropdown-font-size);
12 | padding: 9px;
13 |
14 | @e remark {
15 | color: var(--dropdown-option-pinyin-color);
16 | float: right;
17 | }
18 |
19 | @m arrow {
20 |
21 | &:not(.is-last)::after {
22 | border-left: 1px solid var(--dropdown-border-color);
23 | border-top: 1px solid var(--dropdown-border-color);
24 | content: " ";
25 | height: 4px;
26 | margin-top: 6px;
27 | position: absolute;
28 | right: 12px;
29 | transform: rotate(135deg);
30 | width: 4px;
31 | }
32 | }
33 |
34 | @when disabled {
35 | background-color: transparent;
36 | color: var(--dropdown-option-color-disabled);
37 | cursor: not-allowed;
38 | }
39 |
40 | &:hover,
41 | &.is-hover {
42 | background-color: var(--dropdown-option-fill-hover);
43 | color: var(--dropdown-option-color-hover);
44 | }
45 |
46 | @when selected {
47 | background-color: var(--dropdown-option-fill-active);
48 | color: var(--dropdown-option-color-active);
49 | }
50 | }
51 |
52 | @b optiongroup {
53 | list-style: none;
54 | padding-left: 0;
55 |
56 | & .element-option {
57 | padding-left: 21px;
58 | }
59 |
60 | @e title {
61 | box-sizing: border-box;
62 | color: var(--dropdown-group-color);
63 | display: inline-block;
64 | font-size: var(--dropdown-font-size);
65 | padding: 8px;
66 |
67 | &:hover {
68 | background-color: inherit;
69 | }
70 | }
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/packages/theme-default/src/dropdown.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 | @import "./button.css";
4 |
5 | @component-namespace el {
6 | @b dropdown {
7 | display: inline-block;
8 | position: relative;
9 | color: var(--color-extra-light-black);
10 | font-size: var(--font-size-base);
11 |
12 | .el-button-group {
13 | display: block;
14 | }
15 |
16 | & .el-dropdown__caret-button {
17 | padding: * 5px;
18 |
19 | & .el-dropdown__icon {
20 | padding-left: 0;
21 | }
22 | }
23 | @e icon {
24 | font-size: 12px;
25 | margin: 0 3px;
26 | }
27 | }
28 | @b dropdown-menu {
29 | margin: 5px 0;
30 | background-color: var(--color-white);
31 | border: 1px solid var(--color-base-gray);
32 | box-shadow: var(--dropdown-menu-box-shadow);
33 | padding: 6px 0;
34 | z-index: 10;
35 | position: absolute;
36 | top: 0;
37 | left: 0;
38 | min-width: 100px;
39 |
40 | @e item {
41 | list-style: none;
42 | line-height: 36px;
43 | padding: 0 10px;
44 | margin: 0;
45 | cursor: pointer;
46 |
47 | &:not(.is-disabled):hover {
48 | background-color: var(--dropdown-menuItem-hover-fill);
49 | color: var(--dropdown-menuItem-hover-color);
50 | }
51 | @m divided {
52 | position: relative;
53 | margin-top: 6px;
54 | border-top: 1px solid var(--color-base-gray);
55 |
56 | &:before {
57 | content: '';
58 | height: 6px;
59 | display: block;
60 | margin: 0 -10px;
61 | background-color: var(--color-white);
62 | }
63 | }
64 | @when disabled {
65 | cursor: default;
66 | color: var(--color-extra-light-silver);
67 | pointer-events: none;
68 | }
69 | }
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/packages/radio/src/radio-button.vue:
--------------------------------------------------------------------------------
1 |
2 |
22 |
23 |
68 |
--------------------------------------------------------------------------------
/packages/theme-default/src/loading.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 |
4 | @component-namespace el {
5 | @b loading-mask {
6 | position: absolute;
7 | z-index: 10000;
8 | background-color: rgba(255, 255, 255, .9);
9 | margin: 0;
10 | top: 0;
11 | right: 0;
12 | bottom: 0;
13 | left: 0;
14 | transition: opacity 0.3s;
15 |
16 | @when fullscreen {
17 | position: fixed;
18 |
19 | .el-loading-spinner {
20 | margin-top: calc(- var(--loading-fullscreen-spinner-size) / 2);
21 |
22 | .circular {
23 | size: var(--loading-fullscreen-spinner-size);
24 | }
25 | }
26 | }
27 | }
28 |
29 | @b loading-spinner {
30 | top: 50%;
31 | margin-top: calc(- var(--loading-spinner-size) / 2);
32 | width: 100%;
33 | text-align: center;
34 | position: absolute;
35 |
36 | .el-loading-text {
37 | color: var(--color-primary);
38 | margin: 3px 0;
39 | font-size: 14px;
40 | }
41 |
42 | .circular {
43 | size: var(--loading-spinner-size);
44 | animation: loading-rotate 2s linear infinite;
45 | }
46 |
47 | .path {
48 | animation: loading-dash 1.5s ease-in-out infinite;
49 | stroke-dasharray: 90, 150;
50 | stroke-dashoffset: 0;
51 | stroke-width: 2;
52 | stroke: var(--color-primary);
53 | stroke-linecap: round;
54 | }
55 | }
56 | }
57 |
58 | .el-loading-fade-enter,
59 | .el-loading-fade-leave-active {
60 | opacity: 0;
61 | }
62 |
63 | @keyframes loading-rotate {
64 | 100% {
65 | transform: rotate(360deg);
66 | }
67 | }
68 |
69 | @keyframes loading-dash {
70 | 0% {
71 | stroke-dasharray: 1, 200;
72 | stroke-dashoffset: 0;
73 | }
74 | 50% {
75 | stroke-dasharray: 90, 150;
76 | stroke-dashoffset: -40px;
77 | }
78 | 100% {
79 | stroke-dasharray: 90, 150;
80 | stroke-dashoffset: -120px;
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/packages/message/assets/info.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/packages/theme-default/src/autocomplete.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./input.css";
3 | @import "./common/var.css";
4 | @import "./scrollbar.css";
5 |
6 | @component-namespace el {
7 | @b autocomplete {
8 | position: relative;
9 | display: inline-block;
10 | }
11 | @b autocomplete-suggestion {
12 | margin: 5px 0;
13 | box-shadow: 0 0 6px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.12);
14 |
15 | @e wrap {
16 | max-height: 280px;
17 | overflow: auto;
18 | background-color: var(--color-white);
19 | border: 1px solid var(--color-base-gray);
20 | padding: 6px 0;
21 | border-radius: 2px;
22 | box-sizing: border-box;
23 | }
24 |
25 | @e list {
26 | margin: 0;
27 | padding: 0;
28 | }
29 |
30 | & li {
31 | list-style: none;
32 | line-height: 36px;
33 | padding: 0 10px;
34 | margin: 0;
35 | cursor: pointer;
36 | color: var(--color-extra-light-black);
37 | font-size: 14px;
38 | white-space: nowrap;
39 | overflow: hidden;
40 | text-overflow: ellipsis;
41 |
42 | &:hover {
43 | background-color: var(--select-option-hover-background);
44 | }
45 | &.highlighted {
46 | background-color: var(--color-primary);
47 | color: var(--color-white);
48 | }
49 | &:active {
50 | background-color: darken(var(--color-primary), 0.2);
51 | }
52 | &.divider {
53 | margin-top: 6px;
54 | border-top: 1px solid var(--color-base-gray);
55 | }
56 | &.divider:last-child {
57 | margin-bottom: -6px;
58 | }
59 | }
60 |
61 | @when loading {
62 | li {
63 | text-align: center;
64 | height: 100px;
65 | line-height: 100px;
66 | font-size: 20px;
67 | color: #999;
68 | @utils-vertical-center;
69 |
70 | &:hover {
71 | background-color: var(--color-white);
72 | }
73 | }
74 |
75 | & .el-icon-loading {
76 | vertical-align: middle;
77 | }
78 | }
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/examples/docs/zh-CN/icon.md:
--------------------------------------------------------------------------------
1 |
12 |
67 | ## Icon 图标
68 |
69 | 提供了一套常用的图标集合。
70 |
71 | ### 使用方法
72 |
73 | 直接通过设置类名为 `el-icon-iconName` 来使用即可。例如：
74 |
75 | :::demo
76 | ```html
77 |
78 |
79 |
80 |
搜索
81 |
82 | ```
83 | :::
84 |
85 | ### 图标集合
86 |
87 |
88 | -
89 |
90 |
91 | {{'el-icon-' + name}}
92 |
93 |
94 |
95 |
--------------------------------------------------------------------------------
/packages/loading/README.md:
--------------------------------------------------------------------------------
1 | # element-loading
2 | > A element-loading component for Vue.js.
3 |
4 | ## Demo
5 | http://element-component.github.io/element-loading
6 |
7 | ## Installation
8 | ```shell
9 | npm i element-loading -D
10 | ```
11 |
12 | ## Usage
13 | ```javascript
14 | import Vue from 'vue'
15 | import ElLoading from 'element-loading'
16 | import 'element-theme-default/dist/loading.css'
17 |
18 | Vue.use(ElLoading)
19 | ```
20 |
21 | ### 服务
22 | Loading 还可以以服务的方式调用。引入 Loading 服务：
23 |
24 | 在需要调用时：
25 | ```javascript
26 | Loading.service(options);
27 | ```
28 | 其中 `options` 参数为 Loading 的配置项，具体见下表。`LoadingService` 会返回一个 Loading 实例，可通过调用该实例的 `close` 方法来关闭它：
29 | ```javascript
30 | let loadingInstance = Loading.service(options);
31 | loadingInstance.close();
32 | ```
33 | 需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：
34 | ```javascript
35 | let loadingInstance1 = Loading.service({ fullscreen: true });
36 | let loadingInstance2 = Loading.service({ fullscreen: true });
37 | console.log(loadingInstance1 === loadingInstance2); // true
38 | ```
39 | 此时调用它们中任意一个的 `close` 方法都能关闭这个全屏 Loading。
40 |
41 | 如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 `$loading`，它的调用方式为：`this.$loading(options)`，同样会返回一个 Loading 实例。
42 |
43 | ### Options
44 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
45 | |---------- |-------------- |---------- |-------------------------------- |-------- |
46 | | target | Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 `document.querySelector`以获取到对应 DOM 节点 | object/string | — | document.body |
47 | | body | 同 `v-loading` 指令中的 `body` 修饰符 | boolean | — | false |
48 | | fullscreen | 同 `v-loading` 指令中的 `fullscreen` 修饰符 | boolean | — | true |
49 | | lock | 同 `v-loading` 指令中的 `lock` 修饰符 | boolean | — | false |
50 | | text | 显示在加载图标下方的加载文案 | string | — | — |
51 | | customClass | Loading 的自定义类名 | string | — | — |
52 |
53 |
54 | ## Development
55 | ```shell
56 | make dev
57 |
58 | ## test
59 | make test
60 |
61 | ## build
62 | make build
63 | ```
64 |
65 | # License
66 | [MIT](https://opensource.org/licenses/MIT)
67 |
--------------------------------------------------------------------------------
/examples/docs/en-US/color-picker.md:
--------------------------------------------------------------------------------
1 |
18 |
19 | ## ColorPicker
20 |
21 | ColorPicker is a color selector supporting multiple color formats.
22 |
23 | ### Basic usage
24 |
25 | :::demo ColorPicker requires a string typed variable to be bound to v-model.
26 | ```html
27 |
28 | With default value
29 |
30 |
31 |
32 | With no default value
33 |
34 |
35 |
36 |
46 | ```
47 | :::
48 |
49 | ### Alpha
50 |
51 | :::demo ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the `show-alpha` attribute.
52 | ```html
53 |
54 |
55 |
64 | ```
65 | :::
66 |
67 | ### Attributes
68 | | Attribute | Description | Type | Accepted Values | Default |
69 | |---------- |-------- |---------- |------------- |-------- |
70 | | show-alpha | whether to display the alpha slider | boolean | — | false |
71 | | color-format | color format of v-model | string | hsl / hsv / hex / rgb | hex (when show-alpha is false)/ rgb (when show-alpha is true) |
72 |
73 | ### Events
74 | | Event Name | Description | Parameters |
75 | |---------|--------|---------|
76 | | change | triggers when input value changes | color value |
--------------------------------------------------------------------------------
/packages/message/assets/warning.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/packages/theme-default/src/message.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 |
4 | @component-namespace el {
5 |
6 | @b message {
7 | box-shadow: var(--message-shadow);
8 | min-width: var(--message-min-width);
9 | padding: var(--message-padding);
10 | box-sizing: border-box;
11 | border-radius: var(--border-radius-small);
12 | position: fixed;
13 | left: 50%;
14 | top: 20px;
15 | transform: translateX(-50%);
16 | background-color: var(--color-white);
17 | transition: opacity 0.3s, transform .4s;
18 | overflow: hidden;
19 |
20 | @e group {
21 | margin-left: 38px;
22 | position: relative;
23 | height: 20px;
24 | line-height: 20px;
25 | display: flex;
26 | align-items: center;
27 |
28 | @when with-icon {
29 | margin-left: 0;
30 | }
31 |
32 | & p {
33 | font-size: var(--font-size-base);
34 | margin: 0 34px 0 0;
35 | white-space: nowrap;
36 | color: var(--message-content-color);
37 | text-align: justify;
38 | }
39 | }
40 |
41 | @e img {
42 | size: 40px;
43 | position: absolute;
44 | left: 0;
45 | top: 0;
46 | }
47 |
48 | @e icon {
49 | vertical-align: middle;
50 | margin-right: 8px;
51 | }
52 |
53 | @e closeBtn {
54 | position: absolute 3px 0 * *;
55 | cursor: pointer;
56 | color: var(--message-close-color);
57 | font-size: var(--font-size-base);
58 |
59 | &:hover {
60 | color: var(--message-close-hover-color);
61 | }
62 | }
63 |
64 | & .el-icon-circle-check {
65 | color: var(--message-success-color);
66 | }
67 |
68 | & .el-icon-circle-cross {
69 | color: var(--message-danger-color);
70 | }
71 |
72 | & .el-icon-information {
73 | color: var(--message-info-color);
74 | }
75 |
76 | & .el-icon-warning {
77 | color: var(--message-warning-color);
78 | }
79 | }
80 |
81 | .el-message-fade-enter,
82 | .el-message-fade-leave-active {
83 | opacity: 0;
84 | transform: translate(-50%, -100%);
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/examples/pages/template/guide.tpl:
--------------------------------------------------------------------------------
1 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
92 |
--------------------------------------------------------------------------------
/packages/radio/src/radio.vue:
--------------------------------------------------------------------------------
1 |
2 |
26 |
27 |
86 |
--------------------------------------------------------------------------------
/src/locale/lang/zh-CN.js:
--------------------------------------------------------------------------------
1 | export default {
2 | el: {
3 | colorpicker: {
4 | confirm: '确定',
5 | clear: '清空'
6 | },
7 | datepicker: {
8 | now: '此刻',
9 | today: '今天',
10 | cancel: '取消',
11 | clear: '清空',
12 | confirm: '确定',
13 | selectDate: '选择日期',
14 | selectTime: '选择时间',
15 | startDate: '开始日期',
16 | startTime: '开始时间',
17 | endDate: '结束日期',
18 | endTime: '结束时间',
19 | year: '年',
20 | month1: '1 月',
21 | month2: '2 月',
22 | month3: '3 月',
23 | month4: '4 月',
24 | month5: '5 月',
25 | month6: '6 月',
26 | month7: '7 月',
27 | month8: '8 月',
28 | month9: '9 月',
29 | month10: '10 月',
30 | month11: '11 月',
31 | month12: '12 月',
32 | // week: '周次',
33 | weeks: {
34 | sun: '日',
35 | mon: '一',
36 | tue: '二',
37 | wed: '三',
38 | thu: '四',
39 | fri: '五',
40 | sat: '六'
41 | },
42 | months: {
43 | jan: '一月',
44 | feb: '二月',
45 | mar: '三月',
46 | apr: '四月',
47 | may: '五月',
48 | jun: '六月',
49 | jul: '七月',
50 | aug: '八月',
51 | sep: '九月',
52 | oct: '十月',
53 | nov: '十一月',
54 | dec: '十二月'
55 | }
56 | },
57 | select: {
58 | loading: '加载中',
59 | noMatch: '无匹配数据',
60 | noData: '无数据',
61 | placeholder: '请选择'
62 | },
63 | cascader: {
64 | noMatch: '无匹配数据',
65 | placeholder: '请选择'
66 | },
67 | pagination: {
68 | goto: '前往',
69 | pagesize: '条/页',
70 | total: '共 {total} 条',
71 | pageClassifier: '页'
72 | },
73 | messagebox: {
74 | title: '提示',
75 | confirm: '确定',
76 | cancel: '取消',
77 | error: '输入的数据不合法!'
78 | },
79 | upload: {
80 | delete: '删除',
81 | preview: '查看图片',
82 | continue: '继续上传'
83 | },
84 | table: {
85 | emptyText: '暂无数据',
86 | confirmFilter: '筛选',
87 | resetFilter: '重置',
88 | clearFilter: '全部'
89 | },
90 | tree: {
91 | emptyText: '暂无数据'
92 | }
93 | }
94 | };
95 |
--------------------------------------------------------------------------------
/src/locale/lang/zh-TW.js:
--------------------------------------------------------------------------------
1 | export default {
2 | el: {
3 | colorpicker: {
4 | confirm: '確認',
5 | clear: '清空'
6 | },
7 | datepicker: {
8 | now: '現在',
9 | today: '今天',
10 | cancel: '取消',
11 | clear: '清空',
12 | confirm: '確認',
13 | selectDate: '選擇日期',
14 | selectTime: '選擇時間',
15 | startDate: '開始日期',
16 | startTime: '開始時間',
17 | endDate: '結束日期',
18 | endTime: '結束時間',
19 | year: '年',
20 | month1: '1 月',
21 | month2: '2 月',
22 | month3: '3 月',
23 | month4: '4 月',
24 | month5: '5 月',
25 | month6: '6 月',
26 | month7: '7 月',
27 | month8: '8 月',
28 | month9: '9 月',
29 | month10: '10 月',
30 | month11: '11 月',
31 | month12: '12 月',
32 | // week: '周次',
33 | weeks: {
34 | sun: '日',
35 | mon: '一',
36 | tue: '二',
37 | wed: '三',
38 | thu: '四',
39 | fri: '五',
40 | sat: '六'
41 | },
42 | months: {
43 | jan: '一月',
44 | feb: '二月',
45 | mar: '三月',
46 | apr: '四月',
47 | may: '五月',
48 | jun: '六月',
49 | jul: '七月',
50 | aug: '八月',
51 | sep: '九月',
52 | oct: '十月',
53 | nov: '十一月',
54 | dec: '十二月'
55 | }
56 | },
57 | select: {
58 | loading: '加載中',
59 | noMatch: '無匹配資料',
60 | noData: '無資料',
61 | placeholder: '請選擇'
62 | },
63 | cascader: {
64 | noMatch: '無匹配資料',
65 | placeholder: '請選擇'
66 | },
67 | pagination: {
68 | goto: '前往',
69 | pagesize: '項/頁',
70 | total: '共 {total} 項',
71 | pageClassifier: '頁'
72 | },
73 | messagebox: {
74 | title: '提示',
75 | confirm: '確定',
76 | cancel: '取消',
77 | error: '輸入的資料不符規定!'
78 | },
79 | upload: {
80 | delete: '刪除',
81 | preview: '查看圖片',
82 | continue: '繼續上傳'
83 | },
84 | table: {
85 | emptyText: '暫無資料',
86 | confirmFilter: '篩選',
87 | resetFilter: '重置',
88 | clearFilter: '全部'
89 | },
90 | tree: {
91 | emptyText: '暫無資料'
92 | }
93 | }
94 | };
95 |
--------------------------------------------------------------------------------
/packages/upload/src/ajax.js:
--------------------------------------------------------------------------------
1 | function getError(action, option, xhr) {
2 | let msg;
3 | if (xhr.response) {
4 | msg = `${xhr.status} ${xhr.response.error || xhr.response}`;
5 | } else if (xhr.responseText) {
6 | msg = `${xhr.status} ${xhr.responseText}`;
7 | } else {
8 | msg = `fail to post ${action} ${xhr.status}'`;
9 | }
10 |
11 | const err = new Error(msg);
12 | err.status = xhr.status;
13 | err.method = 'post';
14 | err.url = action;
15 | return err;
16 | }
17 |
18 | function getBody(xhr) {
19 | const text = xhr.responseText || xhr.response;
20 | if (!text) {
21 | return text;
22 | }
23 |
24 | try {
25 | return JSON.parse(text);
26 | } catch (e) {
27 | return text;
28 | }
29 | }
30 |
31 | export default function upload(option) {
32 | if (typeof XMLHttpRequest === 'undefined') {
33 | return;
34 | }
35 |
36 | const xhr = new XMLHttpRequest();
37 | const action = option.action;
38 |
39 | if (xhr.upload) {
40 | xhr.upload.onprogress = function progress(e) {
41 | if (e.total > 0) {
42 | e.percent = e.loaded / e.total * 100;
43 | }
44 | option.onProgress(e);
45 | };
46 | }
47 |
48 | const formData = new FormData();
49 |
50 | if (option.data) {
51 | Object.keys(option.data).map(key => {
52 | formData.append(key, option.data[key]);
53 | });
54 | }
55 |
56 | formData.append(option.filename, option.file);
57 |
58 | xhr.onerror = function error(e) {
59 | option.onError(e);
60 | };
61 |
62 | xhr.onload = function onload() {
63 | if (xhr.status < 200 || xhr.status >= 300) {
64 | return option.onError(getError(action, option, xhr));
65 | }
66 |
67 | option.onSuccess(getBody(xhr));
68 | };
69 |
70 | xhr.open('post', action, true);
71 |
72 | if (option.withCredentials && 'withCredentials' in xhr) {
73 | xhr.withCredentials = true;
74 | }
75 |
76 | const headers = option.headers || {};
77 |
78 | for (let item in headers) {
79 | if (headers.hasOwnProperty(item) && headers[item] !== null) {
80 | xhr.setRequestHeader(item, headers[item]);
81 | }
82 | }
83 | xhr.send(formData);
84 | return xhr;
85 | }
86 |
--------------------------------------------------------------------------------
/packages/message/assets/error.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/locale/lang/ja.js:
--------------------------------------------------------------------------------
1 | export default {
2 | el: {
3 | colorpicker: {
4 | confirm: 'OK',
5 | clear: 'クリア'
6 | },
7 | datepicker: {
8 | now: '現在',
9 | today: '今日',
10 | cancel: 'キャンセル',
11 | clear: 'クリア',
12 | confirm: 'はい',
13 | selectDate: '日付を選択',
14 | selectTime: '時間を選択',
15 | startDate: '開始日',
16 | startTime: '開始時間',
17 | endDate: '終了日',
18 | endTime: '終了時間',
19 | year: '年',
20 | month1: '1月',
21 | month2: '2月',
22 | month3: '3月',
23 | month4: '4月',
24 | month5: '5月',
25 | month6: '6月',
26 | month7: '7月',
27 | month8: '8月',
28 | month9: '9月',
29 | month10: '10月',
30 | month11: '11月',
31 | month12: '12月',
32 | // week: '週次',
33 | weeks: {
34 | sun: '日',
35 | mon: '月',
36 | tue: '火',
37 | wed: '水',
38 | thu: '木',
39 | fri: '金',
40 | sat: '土'
41 | },
42 | months: {
43 | jan: '1月',
44 | feb: '2月',
45 | mar: '3月',
46 | apr: '4月',
47 | may: '5月',
48 | jun: '6月',
49 | jul: '7月',
50 | aug: '8月',
51 | sep: '9月',
52 | oct: '10月',
53 | nov: '11月',
54 | dec: '12月'
55 | }
56 | },
57 | select: {
58 | loading: 'ロード中',
59 | noMatch: 'データなし',
60 | noData: 'データなし',
61 | placeholder: '選択してください'
62 | },
63 | cascader: {
64 | noMatch: 'データなし',
65 | placeholder: '選択してください'
66 | },
67 | pagination: {
68 | goto: '',
69 | pagesize: '件/ページ',
70 | total: '総計 {total} 件',
71 | pageClassifier: 'ページ目へ'
72 | },
73 | messagebox: {
74 | title: 'メッセージ',
75 | confirm: 'はい',
76 | cancel: 'キャンセル',
77 | error: '正しくない入力'
78 | },
79 | upload: {
80 | delete: '削除する',
81 | preview: 'プレビュー',
82 | continue: '続行する'
83 | },
84 | table: {
85 | emptyText: 'データなし',
86 | confirmFilter: '確認',
87 | resetFilter: '初期化',
88 | clearFilter: 'すべて'
89 | },
90 | tree: {
91 | emptyText: 'データなし'
92 | }
93 | }
94 | };
95 |
--------------------------------------------------------------------------------
/src/locale/lang/ko.js:
--------------------------------------------------------------------------------
1 | export default {
2 | el: {
3 | colorpicker: {
4 | confirm: '확인',
5 | clear: '초기화'
6 | },
7 | datepicker: {
8 | now: '지금',
9 | today: '오늘',
10 | cancel: '취소',
11 | clear: '초기화',
12 | confirm: '확인',
13 | selectDate: '날짜 선택',
14 | selectTime: '시간 선택',
15 | startDate: '시작 날짜',
16 | startTime: '시작 시간',
17 | endDate: '종료 날짜',
18 | endTime: '종료 시간',
19 | year: '년',
20 | month1: '1월',
21 | month2: '2월',
22 | month3: '3월',
23 | month4: '4월',
24 | month5: '5월',
25 | month6: '6월',
26 | month7: '7월',
27 | month8: '8월',
28 | month9: '9월',
29 | month10: '10월',
30 | month11: '11월',
31 | month12: '12월',
32 | // week: 'week',
33 | weeks: {
34 | sun: '일',
35 | mon: '월',
36 | tue: '화',
37 | wed: '수',
38 | thu: '목',
39 | fri: '금',
40 | sat: '토'
41 | },
42 | months: {
43 | jan: '1월',
44 | feb: '2월',
45 | mar: '3월',
46 | apr: '4월',
47 | may: '5월',
48 | jun: '6월',
49 | jul: '7월',
50 | aug: '8월',
51 | sep: '9월',
52 | oct: '10월',
53 | nov: '11월',
54 | dec: '12월'
55 | }
56 | },
57 | select: {
58 | loading: '불러오는 중',
59 | noMatch: '맞는 데이터가 없습니다',
60 | noData: '데이터 없음',
61 | placeholder: '선택'
62 | },
63 | cascader: {
64 | noMatch: '맞는 데이터가 없습니다',
65 | placeholder: '선택'
66 | },
67 | pagination: {
68 | goto: '이동',
69 | pagesize: '/page',
70 | total: '총 {total}',
71 | pageClassifier: ''
72 | },
73 | messagebox: {
74 | title: '메시지',
75 | confirm: '확인',
76 | cancel: '취소',
77 | error: '올바르지 않은 입력'
78 | },
79 | upload: {
80 | delete: '삭제',
81 | preview: '미리보기',
82 | continue: '계속하기'
83 | },
84 | table: {
85 | emptyText: '데이터 없음',
86 | confirmFilter: '확인',
87 | resetFilter: '초기화',
88 | clearFilter: '전체'
89 | },
90 | tree: {
91 | emptyText: '데이터 없음'
92 | }
93 | }
94 | };
95 |
--------------------------------------------------------------------------------
/packages/theme-default/src/date-picker/time-picker.css:
--------------------------------------------------------------------------------
1 | @import "../common/var.css";
2 |
3 | @component-namespace el {
4 | @b time-panel {
5 | margin: 5px 0;
6 | border: solid 1px var(--datepicker-border-color);
7 | background-color: var(--color-white);
8 | box-shadow: var(--box-shadow-base);
9 | border-radius: 2px;
10 | position: absolute;
11 | width: 180px;
12 | left: 0;
13 | z-index: var(--index-top);
14 | user-select: none;
15 |
16 | @e content {
17 | font-size: 0;
18 | position: relative;
19 | overflow: hidden;
20 |
21 | &::after, &::before {
22 | content: ":";
23 | top: 50%;
24 | color: var(--color-white);
25 | position: absolute;
26 | font-size: 14px;
27 | margin-top: -15px;
28 | line-height: 16px;
29 | background-color: var(--datepicker-active-color);
30 | height: 32px;
31 | z-index: -1;
32 | left: 0;
33 | right: 0;
34 | box-sizing: border-box;
35 | padding-top: 6px;
36 | text-align: left;
37 | }
38 |
39 | &::after {
40 | left: 50%;
41 | margin-left: -2px;
42 | }
43 |
44 | &::before {
45 | padding-left: 50%;
46 | margin-right: -2px;
47 | }
48 |
49 | &.has-seconds {
50 | &::after {
51 | left: calc(100% / 3 * 2);
52 | }
53 |
54 | &::before {
55 | padding-left: calc(100% / 3);
56 | }
57 | }
58 | }
59 |
60 | @e footer {
61 | border-top: 1px solid var(--datepicker-inner-border-color);
62 | padding: 4px;
63 | height: 36px;
64 | line-height: 25px;
65 | text-align: right;
66 | box-sizing: border-box;
67 | }
68 |
69 | @e btn {
70 | border: none;
71 | line-height: 28px;
72 | padding: 0 5px;
73 | margin: 0 5px;
74 | cursor: pointer;
75 | background-color: transparent;
76 | outline: none;
77 | font-size: 12px;
78 | color: var(--color-base-silver);
79 |
80 | &.confirm {
81 | font-weight: 800;
82 | color: var(--datepicker-active-color);
83 | }
84 | }
85 |
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/packages/theme-default/src/date-picker/date-table.css:
--------------------------------------------------------------------------------
1 | @import "../common/var.css";
2 |
3 | @component-namespace el {
4 | @b date-table {
5 | font-size: 12px;
6 | min-width: 224px;
7 | user-select: none;
8 |
9 | @when week-mode {
10 | .el-date-table__row {
11 | &:hover {
12 | background-color: var(--datepicker-cell-hover-color);
13 | }
14 |
15 | &.current {
16 | background-color: var(--datepicker-inrange-color);
17 | }
18 | }
19 | }
20 |
21 | td {
22 | width: 32px;
23 | height: 32px;
24 | box-sizing: border-box;
25 | text-align: center;
26 | cursor: pointer;
27 |
28 | &.next-month,
29 | &.prev-month {
30 | color: var(--datepicker-off-color);
31 | }
32 |
33 | &.today {
34 | color: var(--datepicker-text-hover-color);
35 | position: relative;
36 | &:before {
37 | content: " ";
38 | position: absolute;
39 | top: 0px;
40 | right: 0px;
41 | width: 0;
42 | height: 0;
43 | border-top: 0.5em solid var(--datepicker-active-color);
44 | border-left: .5em solid transparent;
45 | }
46 | }
47 |
48 | &.available:hover {
49 | background-color: var(--datepicker-cell-hover-color);
50 | }
51 |
52 | &.in-range {
53 | background-color: var(--datepicker-inrange-color);
54 | &:hover {
55 | background-color: var(--datepicker-inrange-hover-color);
56 | }
57 | }
58 |
59 | &.current:not(.disabled),
60 | &.start-date,
61 | &.end-date {
62 | background-color: var(--datepicker-active-color) !important;
63 | color: var(--color-white);
64 | }
65 |
66 | &.disabled {
67 | background-color: #f4f4f4;
68 | opacity: 1;
69 | cursor: not-allowed;
70 | color: #ccc;
71 | }
72 |
73 | &.week {
74 | font-size: 80%;
75 | color: var(--datepicker-header-color);
76 | }
77 | }
78 |
79 | th {
80 | padding: 5px;
81 | color: var(--datepicker-header-color);
82 | font-weight: 400;
83 | }
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/packages/theme-default/src/alert.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 |
4 | @component-namespace el {
5 |
6 | @b alert {
7 | width: 100%;
8 | padding: var(--alert-padding);
9 | margin: 0;
10 | box-sizing: border-box;
11 | border-radius: var(--alert-border-radius);
12 | position: relative;
13 | background-color: var(--color-white);
14 | overflow: hidden;
15 | color: var(--color-white);
16 | opacity: 1;
17 | display: table;
18 | transition: opacity .2s;
19 |
20 | @modifier success {
21 | background-color: var(--alert-success-color);
22 | }
23 |
24 | @modifier info {
25 | background-color: var(--alert-info-color);
26 | }
27 |
28 | @modifier warning {
29 | background-color: var(--alert-warning-color);
30 | }
31 |
32 | @modifier error {
33 | background-color: var(--alert-danger-color);
34 | }
35 |
36 | @e content {
37 | display: table-cell;
38 | padding: 0 8px;
39 | }
40 |
41 | @e icon {
42 | font-size: var(--alert-icon-size);
43 | width: var(--alert-icon-size);
44 | display: table-cell;
45 | color: var(--color-white);
46 | vertical-align: middle;
47 | @when big {
48 | font-size: var(--alert-icon-large-size);
49 | width: var(--alert-icon-large-size);
50 | }
51 | }
52 |
53 | @e title {
54 | font-size: var(--alert-title-font-size);
55 | line-height: 18px;
56 | @when bold {
57 | font-weight: bold;
58 | }
59 | }
60 |
61 | & .el-alert__description {
62 | color: var(--color-white);
63 | font-size: var(--alert-description-font-size);
64 | margin: 5px 0 0 0;
65 | }
66 |
67 | @e closebtn {
68 | font-size: var(--alert-close-font-size);
69 | color: var(--color-white);
70 | opacity: 1;
71 | position: absolute 12px 15px * *;
72 | cursor: pointer;
73 |
74 | @when customed {
75 | font-style: normal;
76 | font-size: var(--alert-close-customed-font-size);
77 | top: 9px;
78 | }
79 | }
80 | }
81 |
82 | .el-alert-fade-enter,
83 | .el-alert-fade-leave-active {
84 | opacity: 0;
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/packages/theme-default/src/notification.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./common/var.css";
3 |
4 | @component-namespace el {
5 |
6 | @b notification {
7 | width: var(--notification-width);
8 | padding: var(--notification-padding);
9 | box-sizing: border-box;
10 | border-radius: var(--border-radius-small);
11 | position: fixed;
12 | right: 16px;
13 | background-color: var(--color-white);
14 | box-shadow: var(--notification-shadow);
15 | transition: opacity 0.3s, transform .3s, right .3s, top 0.4s;
16 | overflow: hidden;
17 |
18 | @e group {
19 | margin-left: 0;
20 | @when with-icon {
21 | margin-left: 55px;
22 | }
23 | }
24 |
25 | @e title {
26 | font-weight: normal;
27 | font-size: var(--notification-title-font-size);
28 | color: var(--notification-title-color);
29 | margin: 0;
30 | }
31 |
32 | @e content {
33 | font-size: var(--notification-font-size);
34 | line-height: 21px;
35 | margin: 10px 0 0 0;
36 | color: var(--notification-color);
37 | text-align: justify;
38 | }
39 |
40 | @e icon {
41 | size: var(--notification-icon-size);
42 | font-size: var(--notification-icon-size);
43 | float: left;
44 | position: relative;
45 | top: 3px;
46 | }
47 |
48 | @e closeBtn {
49 | position: absolute 20px 20px * *;
50 | cursor: pointer;
51 | color: var(--notification-close-color);
52 | font-size: var(--notification-font-size);
53 |
54 | &:hover {
55 | color: var(--notification-close-hover-color);
56 | }
57 | }
58 |
59 | & .el-icon-circle-check {
60 | color: var(--notification-success-color);
61 | }
62 |
63 | & .el-icon-circle-cross {
64 | color: var(--notification-danger-color);
65 | }
66 |
67 | & .el-icon-information {
68 | color: var(--notification-info-color);
69 | }
70 |
71 | & .el-icon-warning {
72 | color: var(--notification-warning-color);
73 | }
74 | }
75 |
76 | .el-notification-fade-enter {
77 | transform: translateX(100%);
78 | right: 0;
79 | }
80 |
81 | .el-notification-fade-leave-active {
82 | opacity: 0;
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/packages/theme-default/src/table-column.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import "./checkbox.css";
3 | @import "./tag.css";
4 | @import "./common/var.css";
5 |
6 | @component-namespace el {
7 | @b table-column {
8 | @m selection .cell {
9 | padding-left: 14px;
10 | padding-right: 14px;
11 | }
12 | }
13 |
14 | @b table-filter {
15 | border: solid 1px var(--color-base-gray);
16 | border-radius: 2px;
17 | background-color: var(--color-white);
18 | box-shadow: var(--dropdown-menu-box-shadow);
19 | box-sizing: border-box;
20 | margin: 2px 0;
21 |
22 | /** used for dropdown mode */
23 | @e list {
24 | padding: 5px 0;
25 | margin: 0;
26 | list-style: none;
27 | min-width: 100px;
28 | }
29 |
30 | @e list-item {
31 | line-height: 36px;
32 | padding: 0 10px;
33 | cursor: pointer;
34 | font-size: var(--font-size-base);
35 |
36 | &:hover {
37 | background-color: var(--dropdown-menuItem-hover-fill);
38 | color: var(--dropdown-menuItem-hover-color);
39 | }
40 |
41 | @when active {
42 | background-color: var(--color-primary);
43 | color: var(--color-white);
44 | }
45 | }
46 |
47 | @e content {
48 | min-width: 100px;
49 | }
50 |
51 | @e bottom {
52 | border-top: 1px solid var(--color-base-gray);
53 | padding: 8px;
54 |
55 | button {
56 | background: transparent;
57 | border: none;
58 | color: var(--color-base-silver);
59 | cursor: pointer;
60 | font-size: var(--font-size-base);
61 | padding: 0 3px;
62 |
63 | &:hover {
64 | color: var(--color-primary);
65 | }
66 |
67 | &:focus {
68 | outline: none;
69 | }
70 |
71 | &.is-disabled {
72 | color: var(--color-extra-light-silver);
73 | cursor: not-allowed;
74 | }
75 | }
76 | }
77 |
78 | @e checkbox-group {
79 | padding: 10px;
80 |
81 | .el-checkbox {
82 | display: block;
83 | margin-bottom: 8px;
84 | margin-left: 5px;
85 | }
86 |
87 | .el-checkbox:last-child {
88 | margin-bottom: 0;
89 | }
90 | }
91 | }
92 | }
--------------------------------------------------------------------------------
/src/locale/lang/sv-SE.js:
--------------------------------------------------------------------------------
1 | export default {
2 | el: {
3 | colorpicker: {
4 | confirm: 'OK',
5 | clear: 'Töm'
6 | },
7 | datepicker: {
8 | now: 'Nu',
9 | today: 'Idag',
10 | cancel: 'Avbryt',
11 | clear: 'Töm',
12 | confirm: 'OK',
13 | selectDate: 'Välj datum',
14 | selectTime: 'Välj tid',
15 | startDate: 'Startdatum',
16 | startTime: 'Starttid',
17 | endDate: 'Slutdatum',
18 | endTime: 'Sluttid',
19 | year: 'År',
20 | month1: 'Januari',
21 | month2: 'Februari',
22 | month3: 'Mars',
23 | month4: 'April',
24 | month5: 'Maj',
25 | month6: 'Juni',
26 | month7: 'Juli',
27 | month8: 'Augusti',
28 | month9: 'September',
29 | month10: 'Oktober',
30 | month11: 'November',
31 | month12: 'December',
32 | // week: 'week',
33 | weeks: {
34 | sun: 'Sön',
35 | mon: 'Mån',
36 | tue: 'Tis',
37 | wed: 'Ons',
38 | thu: 'Tor',
39 | fri: 'Fre',
40 | sat: 'Lör'
41 | },
42 | months: {
43 | jan: 'Jan',
44 | feb: 'Feb',
45 | mar: 'Mar',
46 | apr: 'Apr',
47 | may: 'Maj',
48 | jun: 'Jun',
49 | jul: 'Jul',
50 | aug: 'Aug',
51 | sep: 'Sep',
52 | oct: 'Okt',
53 | nov: 'Nov',
54 | dec: 'Dec'
55 | }
56 | },
57 | select: {
58 | loading: 'Laddar',
59 | noMatch: 'Hittade inget',
60 | noData: 'Ingen data',
61 | placeholder: 'Välj'
62 | },
63 | pagination: {
64 | goto: 'Gå till',
65 | pagesize: '/sida',
66 | total: 'Total {total}',
67 | pageClassifier: ''
68 | },
69 | messagebox: {
70 | title: 'Meddelande',
71 | confirm: 'OK',
72 | cancel: 'Avbryt',
73 | error: 'Felaktig inmatning'
74 | },
75 | upload: {
76 | delete: 'Radera',
77 | preview: 'Förhandsvisa',
78 | continue: 'Fortsätt'
79 | },
80 | table: {
81 | emptyText: 'Inga Data',
82 | confirmFilter: 'Bekräfta',
83 | resetFilter: 'Återställ',
84 | clearFilter: 'Alla'
85 | },
86 | tree: {
87 | emptyText: 'Inga Data'
88 | }
89 | }
90 | };
91 |
--------------------------------------------------------------------------------
/packages/date-picker/README.md:
--------------------------------------------------------------------------------
1 | # element-datepicker
2 |
3 |
4 | ## Installation
5 | ```shell
6 | npm i element-datepicker -S
7 | ```
8 |
9 | ## Usage
10 |
11 | A:
12 | ```javascript
13 | import Vue from 'vue'
14 | import ElDatePicker from 'element-datepicker'
15 |
16 | Vue.use(ElDatePicker)
17 | ```
18 |
19 | B:
20 | ```javascript
21 | import Vue from 'vue'
22 | import { DatePicker, TimePicker, TimeSelect } from 'element-datepicker'
23 |
24 | Vue.component(DatePicker.name, DatePicker);
25 | Vue.component(TimePicker.name, TimePicker);
26 | Vue.component(TimeSelect.name, TimeSelect);
27 | ```
28 |
29 | C:
30 | ```html
31 |
32 |
33 |
36 | ```
37 |
38 | ### Attributes
39 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
40 | |---------- |-------------- |---------- |-------------------------------- |-------- |
41 | | readonly | 完全只读 | boolean | — | false |
42 | | disabled | 禁用 | boolean | - | false |
43 | | editable | 文本框可输入 | boolean | - | true |
44 | | size | 输入框尺寸 | string | large, small, mini | — |
45 | | placeholder | 占位内容 | string | — | — |
46 | | type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
47 | | format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
48 | | align | 对齐方式 | string | left, center, right | left |
49 | |picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
50 |
51 | ### Picker Options
52 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
53 | |---------- |-------------- |---------- |-------------------------------- |-------- |
54 | | shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | - | - |
55 | | disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | - | - |
56 |
57 | ### Shortcuts
58 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
59 | |---------- |-------------- |---------- |-------------------------------- |-------- |
60 | | text | 标题文本 | string | — | — |
61 | | onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — |
62 |
63 | ## License
64 | MIT
65 |
--------------------------------------------------------------------------------