@can2421/ui-components 1.0.50 → 1.0.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/styles/button.css +9 -9
- package/dist/styles/button.scss +13 -11
- package/dist/styles/config.css +0 -0
- package/dist/styles/config.scss +4 -0
- package/dist/styles/function.css +0 -0
- package/dist/styles/function.scss +19 -0
- package/dist/styles/index.css +13 -9
- package/dist/styles/mixins.css +0 -0
- package/dist/styles/mixins.scss +16 -0
- package/dist/styles/var.css +3 -0
- package/dist/styles/var.scss +35 -1
- package/dist/ui-components.mjs +1 -1
- package/dist/ui-components.umd.js +1 -1
- package/package.json +1 -1
package/dist/styles/button.css
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
.c-button:not(.c-button--primary, .c-button--danger, .c-button--warning, .c-button--info, .c-button--success, .c-button--plain, .c-button--disabled):hover {
|
|
17
17
|
border-color: #57abff;
|
|
18
18
|
background: #ecf5ff;
|
|
19
|
-
color:
|
|
19
|
+
color: var(--c-color-primary);
|
|
20
20
|
}
|
|
21
21
|
.c-button--primary:not(.c-button--disabled):hover, .c-button--danger:not(.c-button--disabled):hover, .c-button--warning:not(.c-button--disabled):hover, .c-button--info:not(.c-button--disabled):hover, .c-button--success:not(.c-button--disabled):hover {
|
|
22
22
|
opacity: 0.8;
|
|
@@ -37,22 +37,22 @@
|
|
|
37
37
|
color: #606266;
|
|
38
38
|
}
|
|
39
39
|
.c-button--plain:not(.c-button--disabled):hover {
|
|
40
|
-
border-color:
|
|
41
|
-
color:
|
|
40
|
+
border-color: var(--c-color-primary);
|
|
41
|
+
color: var(--c-color-primary);
|
|
42
42
|
}
|
|
43
43
|
.c-button--primary {
|
|
44
|
-
background:
|
|
45
|
-
border-color:
|
|
44
|
+
background: var(--c-color-primary);
|
|
45
|
+
border-color: var(--c-color-primary);
|
|
46
46
|
color: #fff;
|
|
47
47
|
}
|
|
48
48
|
.c-button--primary.c-button--plain {
|
|
49
49
|
background: #ecf5ff;
|
|
50
|
-
border: 1px solid
|
|
51
|
-
color:
|
|
50
|
+
border: 1px solid var(--c-color-primary);
|
|
51
|
+
color: var(--c-color-primary);
|
|
52
52
|
}
|
|
53
53
|
.c-button--primary.c-button--plain:not(.c-button--disabled):hover {
|
|
54
|
-
background:
|
|
55
|
-
border-color:
|
|
54
|
+
background: var(--c-color-primary);
|
|
55
|
+
border-color: var(--c-color-primary);
|
|
56
56
|
color: #fff;
|
|
57
57
|
}
|
|
58
58
|
.c-button--success {
|
package/dist/styles/button.scss
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
@use '
|
|
1
|
+
@use 'config' as *;
|
|
2
|
+
@use './function.scss' as *;
|
|
3
|
+
@use './mixins.scss' as *;
|
|
2
4
|
|
|
3
|
-
|
|
5
|
+
@include b(button) {
|
|
4
6
|
display: inline-block;
|
|
5
7
|
padding: 5px 15px;
|
|
6
8
|
border-radius: 4px;
|
|
@@ -20,7 +22,7 @@
|
|
|
20
22
|
&:hover {
|
|
21
23
|
border-color: #57abff;
|
|
22
24
|
background: #ecf5ff;
|
|
23
|
-
color:
|
|
25
|
+
color: getCssVar('color', 'primary');
|
|
24
26
|
}
|
|
25
27
|
}
|
|
26
28
|
|
|
@@ -52,26 +54,26 @@
|
|
|
52
54
|
|
|
53
55
|
&:not(.#{$namespace}-button--disabled) {
|
|
54
56
|
&:hover {
|
|
55
|
-
border-color:
|
|
56
|
-
color:
|
|
57
|
+
border-color: getCssVar('color', 'primary');
|
|
58
|
+
color: getCssVar('color', 'primary');
|
|
57
59
|
}
|
|
58
60
|
}
|
|
59
61
|
}
|
|
60
62
|
|
|
61
63
|
&--primary {
|
|
62
|
-
background:
|
|
63
|
-
border-color:
|
|
64
|
+
background: getCssVar('color', 'primary');
|
|
65
|
+
border-color: getCssVar('color', 'primary');
|
|
64
66
|
color: #fff;
|
|
65
67
|
|
|
66
68
|
&.#{$namespace}-button--plain {
|
|
67
69
|
background: #ecf5ff;
|
|
68
|
-
border: 1px solid
|
|
69
|
-
color:
|
|
70
|
+
border: 1px solid getCssVar('color', 'primary');
|
|
71
|
+
color: getCssVar('color', 'primary');
|
|
70
72
|
|
|
71
73
|
&:not(.#{$namespace}-button--disabled) {
|
|
72
74
|
&:hover {
|
|
73
|
-
background:
|
|
74
|
-
border-color:
|
|
75
|
+
background: getCssVar('color', 'primary');
|
|
76
|
+
border-color: getCssVar('color', 'primary');
|
|
75
77
|
color: #fff;
|
|
76
78
|
}
|
|
77
79
|
}
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
@use 'config';
|
|
2
|
+
|
|
3
|
+
@function joinVarName($list) {
|
|
4
|
+
$name: '--' + config.$namespace;
|
|
5
|
+
@each $item in $list {
|
|
6
|
+
@if $item != '' {
|
|
7
|
+
$name: $name + '-' + $item;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
@return $name;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@function getCssVarName($args...) {
|
|
14
|
+
@return joinVarName($args);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@function getCssVar($args...) {
|
|
18
|
+
@return var(#{joinVarName($args)});
|
|
19
|
+
}
|
package/dist/styles/index.css
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--c-color-primary: #409eff;
|
|
3
|
+
}
|
|
4
|
+
|
|
1
5
|
.c-button {
|
|
2
6
|
display: inline-block;
|
|
3
7
|
padding: 5px 15px;
|
|
@@ -16,7 +20,7 @@
|
|
|
16
20
|
.c-button:not(.c-button--primary, .c-button--danger, .c-button--warning, .c-button--info, .c-button--success, .c-button--plain, .c-button--disabled):hover {
|
|
17
21
|
border-color: #57abff;
|
|
18
22
|
background: #ecf5ff;
|
|
19
|
-
color:
|
|
23
|
+
color: var(--c-color-primary);
|
|
20
24
|
}
|
|
21
25
|
.c-button--primary:not(.c-button--disabled):hover, .c-button--danger:not(.c-button--disabled):hover, .c-button--warning:not(.c-button--disabled):hover, .c-button--info:not(.c-button--disabled):hover, .c-button--success:not(.c-button--disabled):hover {
|
|
22
26
|
opacity: 0.8;
|
|
@@ -37,22 +41,22 @@
|
|
|
37
41
|
color: #606266;
|
|
38
42
|
}
|
|
39
43
|
.c-button--plain:not(.c-button--disabled):hover {
|
|
40
|
-
border-color:
|
|
41
|
-
color:
|
|
44
|
+
border-color: var(--c-color-primary);
|
|
45
|
+
color: var(--c-color-primary);
|
|
42
46
|
}
|
|
43
47
|
.c-button--primary {
|
|
44
|
-
background:
|
|
45
|
-
border-color:
|
|
48
|
+
background: var(--c-color-primary);
|
|
49
|
+
border-color: var(--c-color-primary);
|
|
46
50
|
color: #fff;
|
|
47
51
|
}
|
|
48
52
|
.c-button--primary.c-button--plain {
|
|
49
53
|
background: #ecf5ff;
|
|
50
|
-
border: 1px solid
|
|
51
|
-
color:
|
|
54
|
+
border: 1px solid var(--c-color-primary);
|
|
55
|
+
color: var(--c-color-primary);
|
|
52
56
|
}
|
|
53
57
|
.c-button--primary.c-button--plain:not(.c-button--disabled):hover {
|
|
54
|
-
background:
|
|
55
|
-
border-color:
|
|
58
|
+
background: var(--c-color-primary);
|
|
59
|
+
border-color: var(--c-color-primary);
|
|
56
60
|
color: #fff;
|
|
57
61
|
}
|
|
58
62
|
.c-button--success {
|
|
File without changes
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
@use 'function' as *;
|
|
2
|
+
@use 'config' as *;
|
|
3
|
+
|
|
4
|
+
$B: null !default;
|
|
5
|
+
|
|
6
|
+
@mixin set-css-var-value($name, $value) {
|
|
7
|
+
#{joinVarName($name)}: #{$value};
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@mixin b($block) {
|
|
11
|
+
$B: $namespace + $common-separator + $block !global;
|
|
12
|
+
|
|
13
|
+
.#{$B} {
|
|
14
|
+
@content;
|
|
15
|
+
}
|
|
16
|
+
}
|
package/dist/styles/var.css
CHANGED
package/dist/styles/var.scss
CHANGED
|
@@ -1 +1,35 @@
|
|
|
1
|
-
|
|
1
|
+
@use 'sass:map';
|
|
2
|
+
@use './mixins.scss' as *;
|
|
3
|
+
|
|
4
|
+
$colors: () !default;
|
|
5
|
+
$colors: map.deep-merge(
|
|
6
|
+
(
|
|
7
|
+
'white': #ffffff,
|
|
8
|
+
'black': #000000,
|
|
9
|
+
'primary': (
|
|
10
|
+
'base': #409eff,
|
|
11
|
+
),
|
|
12
|
+
'success': (
|
|
13
|
+
'base': #67c23a,
|
|
14
|
+
),
|
|
15
|
+
'warning': (
|
|
16
|
+
'base': #e6a23c,
|
|
17
|
+
),
|
|
18
|
+
'danger': (
|
|
19
|
+
'base': #f56c6c,
|
|
20
|
+
),
|
|
21
|
+
'error': (
|
|
22
|
+
'base': #f56c6c,
|
|
23
|
+
),
|
|
24
|
+
'info': (
|
|
25
|
+
'base': #909399,
|
|
26
|
+
),
|
|
27
|
+
),
|
|
28
|
+
$colors
|
|
29
|
+
);
|
|
30
|
+
|
|
31
|
+
$color-primary: map.get($colors, 'primary', 'base');
|
|
32
|
+
|
|
33
|
+
:root {
|
|
34
|
+
@include set-css-var-value('color-primary', $color-primary);
|
|
35
|
+
}
|
package/dist/ui-components.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(".c-button[data-v-2fe69762]{display:inline-block;padding:5px 15px;border-radius:4px;background:#fff;outline:none;color:#606266;font-size:14px;border:1px solid #dcdfe6;cursor:pointer;-webkit-user-select:none;user-select:none}.c-button~.c-button[data-v-2fe69762]{margin-left:8px}.c-button[data-v-2fe69762]:not(.c-button--primary,.c-button--danger,.c-button--warning,.c-button--info,.c-button--success,.c-button--plain,.c-button--disabled):hover{border-color:#57abff;background:#ecf5ff;color
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(".c-button[data-v-2fe69762]{display:inline-block;padding:5px 15px;border-radius:4px;background:#fff;outline:none;color:#606266;font-size:14px;border:1px solid #dcdfe6;cursor:pointer;-webkit-user-select:none;user-select:none}.c-button~.c-button[data-v-2fe69762]{margin-left:8px}.c-button[data-v-2fe69762]:not(.c-button--primary,.c-button--danger,.c-button--warning,.c-button--info,.c-button--success,.c-button--plain,.c-button--disabled):hover{border-color:#57abff;background:#ecf5ff;color:var(--c-color-primary)}.c-button--primary[data-v-2fe69762]:not(.c-button--disabled):hover,.c-button--danger[data-v-2fe69762]:not(.c-button--disabled):hover,.c-button--warning[data-v-2fe69762]:not(.c-button--disabled):hover,.c-button--info[data-v-2fe69762]:not(.c-button--disabled):hover,.c-button--success[data-v-2fe69762]:not(.c-button--disabled):hover{opacity:.8}.c-button[data-v-2fe69762]:active:not(.c-button--disabled){transform:scale(.95)}.c-button--disabled[data-v-2fe69762]{opacity:.5;cursor:not-allowed}.c-button--round[data-v-2fe69762]{border-radius:20px}.c-button--plain[data-v-2fe69762]{background:#fff;border:1px solid #dcdfe6;color:#606266}.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{border-color:var(--c-color-primary);color:var(--c-color-primary)}.c-button--primary[data-v-2fe69762]{background:var(--c-color-primary);border-color:var(--c-color-primary);color:#fff}.c-button--primary.c-button--plain[data-v-2fe69762]{background:#ecf5ff;border:1px solid var(--c-color-primary);color:var(--c-color-primary)}.c-button--primary.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{background:var(--c-color-primary);border-color:var(--c-color-primary);color:#fff}.c-button--success[data-v-2fe69762]{background:#70c646;border-color:#70c646;color:#fff}.c-button--success.c-button--plain[data-v-2fe69762]{background:#f0f9eb;border:1px solid #70c646;color:#70c646}.c-button--success.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{background:#70c646;border-color:#70c646;color:#fff}.c-button--warning[data-v-2fe69762]{background:#e6a23c;border-color:#e6a23c;color:#fff}.c-button--warning.c-button--plain[data-v-2fe69762]{background:#fdf6ec;border:1px solid #e6a23c;color:#e6a23c}.c-button--warning.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{background:#e6a23c;border-color:#e6a23c;color:#fff}.c-button--info[data-v-2fe69762]{background:#909399;border-color:#909399;color:#fff}.c-button--info.c-button--plain[data-v-2fe69762]{background:#f4f4f5;border:1px solid #909399;color:#909399}.c-button--info.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{background:#909399;border-color:#909399;color:#fff}.c-button--danger[data-v-2fe69762]{background:#f56c6c;border-color:#f56c6c;color:#fff}.c-button--danger.c-button--plain[data-v-2fe69762]{background:#fef0f0;border:1px solid #f56c6c;color:#f56c6c}.c-button--danger.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{background:#f56c6c;border-color:#f56c6c;color:#fff}.c-button--small[data-v-2fe69762]{padding:2px 7px;font-size:12px}.c-button--large[data-v-2fe69762]{padding:8px 19px;font-size:14px}")),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
2
|
import { ref as p, getCurrentInstance as d, inject as _, computed as f, unref as a, provide as v, defineComponent as m, createElementBlock as y, openBlock as B, normalizeClass as $, renderSlot as b, watch as k } from "vue";
|
|
3
3
|
const g = Symbol("c"), u = "c", l = p({
|
|
4
4
|
namespace: "c"
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(".c-button[data-v-2fe69762]{display:inline-block;padding:5px 15px;border-radius:4px;background:#fff;outline:none;color:#606266;font-size:14px;border:1px solid #dcdfe6;cursor:pointer;-webkit-user-select:none;user-select:none}.c-button~.c-button[data-v-2fe69762]{margin-left:8px}.c-button[data-v-2fe69762]:not(.c-button--primary,.c-button--danger,.c-button--warning,.c-button--info,.c-button--success,.c-button--plain,.c-button--disabled):hover{border-color:#57abff;background:#ecf5ff;color
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(".c-button[data-v-2fe69762]{display:inline-block;padding:5px 15px;border-radius:4px;background:#fff;outline:none;color:#606266;font-size:14px;border:1px solid #dcdfe6;cursor:pointer;-webkit-user-select:none;user-select:none}.c-button~.c-button[data-v-2fe69762]{margin-left:8px}.c-button[data-v-2fe69762]:not(.c-button--primary,.c-button--danger,.c-button--warning,.c-button--info,.c-button--success,.c-button--plain,.c-button--disabled):hover{border-color:#57abff;background:#ecf5ff;color:var(--c-color-primary)}.c-button--primary[data-v-2fe69762]:not(.c-button--disabled):hover,.c-button--danger[data-v-2fe69762]:not(.c-button--disabled):hover,.c-button--warning[data-v-2fe69762]:not(.c-button--disabled):hover,.c-button--info[data-v-2fe69762]:not(.c-button--disabled):hover,.c-button--success[data-v-2fe69762]:not(.c-button--disabled):hover{opacity:.8}.c-button[data-v-2fe69762]:active:not(.c-button--disabled){transform:scale(.95)}.c-button--disabled[data-v-2fe69762]{opacity:.5;cursor:not-allowed}.c-button--round[data-v-2fe69762]{border-radius:20px}.c-button--plain[data-v-2fe69762]{background:#fff;border:1px solid #dcdfe6;color:#606266}.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{border-color:var(--c-color-primary);color:var(--c-color-primary)}.c-button--primary[data-v-2fe69762]{background:var(--c-color-primary);border-color:var(--c-color-primary);color:#fff}.c-button--primary.c-button--plain[data-v-2fe69762]{background:#ecf5ff;border:1px solid var(--c-color-primary);color:var(--c-color-primary)}.c-button--primary.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{background:var(--c-color-primary);border-color:var(--c-color-primary);color:#fff}.c-button--success[data-v-2fe69762]{background:#70c646;border-color:#70c646;color:#fff}.c-button--success.c-button--plain[data-v-2fe69762]{background:#f0f9eb;border:1px solid #70c646;color:#70c646}.c-button--success.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{background:#70c646;border-color:#70c646;color:#fff}.c-button--warning[data-v-2fe69762]{background:#e6a23c;border-color:#e6a23c;color:#fff}.c-button--warning.c-button--plain[data-v-2fe69762]{background:#fdf6ec;border:1px solid #e6a23c;color:#e6a23c}.c-button--warning.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{background:#e6a23c;border-color:#e6a23c;color:#fff}.c-button--info[data-v-2fe69762]{background:#909399;border-color:#909399;color:#fff}.c-button--info.c-button--plain[data-v-2fe69762]{background:#f4f4f5;border:1px solid #909399;color:#909399}.c-button--info.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{background:#909399;border-color:#909399;color:#fff}.c-button--danger[data-v-2fe69762]{background:#f56c6c;border-color:#f56c6c;color:#fff}.c-button--danger.c-button--plain[data-v-2fe69762]{background:#fef0f0;border:1px solid #f56c6c;color:#f56c6c}.c-button--danger.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{background:#f56c6c;border-color:#f56c6c;color:#fff}.c-button--small[data-v-2fe69762]{padding:2px 7px;font-size:12px}.c-button--large[data-v-2fe69762]{padding:8px 19px;font-size:14px}")),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
2
|
(function(o,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(o=typeof globalThis<"u"?globalThis:o||self,n(o.CanUICpmonents={},o.Vue))})(this,(function(o,n){"use strict";const f=Symbol("c"),l="c",u=n.ref({namespace:"c"});function C(e,t=void 0){const c=n.getCurrentInstance()?n.inject(f,u):u;return n.computed(()=>{var i;return((i=c.value)==null?void 0:i[e])??t})}function b(e,t){const i=!!n.getCurrentInstance()?n.provide:void 0;if(!i){console.warn("provideGlobalConfig","provideGlobalConfig() can only be used inside setup().");return}const s=n.computed(()=>n.unref(e));return i(f,s),s}function a(e){return`${C("namespace",l).value}-${e}`}const p={type:{type:String,default:""},size:String,disabled:Boolean,plain:Boolean,round:Boolean},_=["disabled"],r=((e,t)=>{const c=e.__vccOpts||e;for(const[i,s]of t)c[i]=s;return c})(n.defineComponent({name:"CButton",__name:"button",props:p,setup(e){const t=e;function c(){console.log("click")}return(i,s)=>(n.openBlock(),n.createElementBlock("button",{class:n.normalizeClass([n.unref(a)("button"),t.type&&n.unref(a)(`button--${t.type}`),t.size&&n.unref(a)(`button--${t.size}`),t.disabled&&n.unref(a)("button--disabled"),t.plain&&n.unref(a)("button--plain"),t.round&&n.unref(a)("button--round")]),disabled:t.disabled,onClick:c},[n.renderSlot(i.$slots,"default",{},void 0,!0)],10,_))}}),[["__scopeId","data-v-2fe69762"]]);r.install=e=>{e.component(r.name,r)};const d=n.defineComponent({name:"CConfigProvider",__name:"index",props:{namespace:{default:l}},setup(e){const t=e,c=n.ref({namespace:l}),i=b(c);return n.watch(()=>t,s=>{c.value.namespace=s==null?void 0:s.namespace},{immediate:!0,deep:!0}),(s,y)=>n.renderSlot(s.$slots,"default",{config:n.unref(i)})}});d.install=e=>{e.component(d.name,d)};function m(e){e.component(r.name||"CButton",r),e.component(d.name||"CConfigProvider",d)}const g={install:m};o.CButton=r,o.CConfigProvider=d,o.buttonProps=p,o.default=g,o.install=m,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|