@daracl/form 0.0.18 → 0.0.20

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.
Files changed (32) hide show
  1. package/dist/daracl.form.css +166 -63
  2. package/dist/daracl.form.min.css +2 -2
  3. package/dist/daracl.form.min.umd.js +30 -30
  4. package/dist/daracl.form.min.umd.js.map +1 -1
  5. package/dist/daracl.form.umd.js +26 -6
  6. package/dist/daracl.form.umd.js.map +1 -1
  7. package/dist/index.cjs +26 -6
  8. package/dist/index.cjs.map +1 -1
  9. package/dist/index.js +26 -6
  10. package/dist/index.js.map +1 -1
  11. package/dist/index.min.cjs +24 -24
  12. package/dist/index.min.cjs.map +1 -1
  13. package/dist/index.min.js +397 -392
  14. package/dist/index.min.js.map +1 -1
  15. package/package.json +1 -1
  16. package/style/base/_base.scss +18 -9
  17. package/style/components/_field-container.scss +2 -1
  18. package/style/components/_file-list.scss +30 -4
  19. package/style/components/_form-field.scss +6 -2
  20. package/style/components/_form-group.scss +5 -1
  21. package/style/components/_grid-field.scss +0 -1
  22. package/style/components/_icon.scss +12 -2
  23. package/style/components/_label.scss +16 -10
  24. package/style/components/_tab.scss +1 -2
  25. package/style/daracl.form.css +204 -128
  26. package/style/daracl.form.css.map +1 -1
  27. package/style/daracl.form.min.css +1 -1
  28. package/style/daracl.form.min.css.map +1 -1
  29. package/style/daracl.form.scss +24 -15
  30. package/style/themes/_common.scss +6 -1
  31. package/style/themes/_dark.scss +24 -12
  32. package/style/themes/_light.scss +10 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@daracl/form",
3
- "version": "0.0.18",
3
+ "version": "0.0.20",
4
4
  "sideEffects": false,
5
5
  "description": "Daracl form validation ",
6
6
  "author": {
package/style/base/_base.scss CHANGED
@@ -7,7 +7,9 @@
7
7
  ::after,
8
8
  ::before {
9
9
  box-sizing: border-box;
10
- line-height: 1.6em;
10
+ line-height: var(--line-height);
11
+ font-size: var(--font-size);
12
+ color: var(--font-color);
11
13
  }
12
14
 
13
15
  .df-txt {
@@ -25,14 +27,21 @@
25
27
  }
26
28
 
27
29
  &[data-df-mode="view"] {
28
- .df-form-field {
29
- border-width: 0px;
30
- border-color: transparent;
31
- outline: initial;
32
-
33
- &:focus-visible,
34
- &:focus {
35
- border-width: 0px;
30
+ .df-field {
31
+ input[type="text"],
32
+ input[type="password"],
33
+ input[type="email"],
34
+ input[type="number"],
35
+ input[type="tel"],
36
+ textarea {
37
+ user-select: text;
38
+ }
39
+
40
+ input[type="checkbox"],
41
+ input[type="radio"],
42
+ label,
43
+ select {
44
+ pointer-events: none;
36
45
  }
37
46
  }
38
47
  }
package/style/components/_field-container.scss CHANGED
@@ -27,7 +27,7 @@
27
27
  width: 100%;
28
28
  padding: 0.375rem 0.75rem;
29
29
  font-weight: 400;
30
- line-height: 1.5;
30
+ line-height: var(--line-height-lg);
31
31
  background-clip: padding-box;
32
32
  border-radius: 4px;
33
33
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@@ -36,6 +36,7 @@
36
36
 
37
37
  .df-description {
38
38
  padding: 3px 0px 0px;
39
+ font-size: var(--font-size-sm);
39
40
  }
40
41
  }
41
42
  }
package/style/components/_file-list.scss CHANGED
@@ -1,5 +1,8 @@
1
1
  @mixin df-file-list {
2
2
  .df-file-list {
3
+ .df-file-item {
4
+ height: 25px;
5
+ }
3
6
  .df-file-icon {
4
7
  width: 20px;
5
8
  height: 20px;
@@ -11,12 +14,35 @@
11
14
  background-color: var(--button-bg-hover);
12
15
  }
13
16
 
14
- &.df-file-download {
15
- background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjIwcHgiIGZpbGw9IiMwMDAwMDAiPjxnPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIvPjwvZz48Zz48cGF0aCBkPSJNMTgsMTV2M0g2di0zSDR2M2MwLDEuMSwwLjksMiwyLDJoMTJjMS4xLDAsMi0wLjksMi0ydi0zSDE4eiBNMTcsMTFsLTEuNDEtMS40MUwxMywxMi4xN1Y0aC0ydjguMTdMOC40MSw5LjU5TDcsMTFsNSw1IEwxNywxMXoiLz48L2c+PC9zdmc+");
17
+ // 아이콘 색은 mask 로 잘라내고 --icon-color 테마 변수로 채운다.
18
+ &::before {
19
+ content: "";
20
+ display: block;
21
+ width: 100%;
22
+ height: 100%;
23
+ background-color: var(--icon-color);
24
+ -webkit-mask-repeat: no-repeat;
25
+ mask-repeat: no-repeat;
26
+ }
27
+
28
+ &.df-file-download::before {
29
+ -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjIwcHgiIGZpbGw9IiMwMDAwMDAiPjxnPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIvPjwvZz48Zz48cGF0aCBkPSJNMTgsMTV2M0g2di0zSDR2M2MwLDEuMSwwLjksMiwyLDJoMTJjMS4xLDAsMi0wLjksMi0ydi0zSDE4eiBNMTcsMTFsLTEuNDEtMS40MUwxMywxMi4xN1Y0aC0ydjguMTdMOC40MSw5LjU5TDcsMTFsNSw1IEwxNywxMXoiLz48L2c+PC9zdmc+");
30
+ mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjIwcHgiIGZpbGw9IiMwMDAwMDAiPjxnPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIvPjwvZz48Zz48cGF0aCBkPSJNMTgsMTV2M0g2di0zSDR2M2MwLDEuMSwwLjksMiwyLDJoMTJjMS4xLDAsMi0wLjksMi0ydi0zSDE4eiBNMTcsMTFsLTEuNDEtMS40MUwxMywxMi4xN1Y0aC0ydjguMTdMOC40MSw5LjU5TDcsMTFsNSw1IEwxNywxMXoiLz48L2c+PC9zdmc+");
31
+ }
32
+
33
+ &.df-file-remove::before {
34
+ -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjBweCIgZmlsbD0iIzAwMDAwMCI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE2IDl2MTBIOFY5aDhtLTEuNS02aC01bC0xIDFINXYyaDE0VjRoLTMuNWwtMS0xek0xOCA3SDZ2MTJjMCAxLjEuOSAyIDIgMmg4YzEuMSAwIDItLjkgMi0yVjd6Ii8+PC9zdmc+");
35
+ mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjBweCIgZmlsbD0iIzAwMDAwMCI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE2IDl2MTBIOFY5aDhtLTEuNS02aC01bC0xIDFINXYyaDE0VjRoLTMuNWwtMS0xek0xOCA3SDZ2MTJjMCAxLjEuOSAyIDIgMmg4YzEuMSAwIDItLjkgMi0yVjd6Ii8+PC9zdmc+");
16
36
  }
17
37
 
18
- &.df-file-remove {
19
- background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjBweCIgZmlsbD0iIzAwMDAwMCI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE2IDl2MTBIOFY5aDhtLTEuNS02aC01bC0xIDFINXYyaDE0VjRoLTMuNWwtMS0xek0xOCA3SDZ2MTJjMCAxLjEuOSAyIDIgMmg4YzEuMSAwIDItLjkgMi0yVjd6Ii8+PC9zdmc+");
38
+ &.df-empty-icon {
39
+ cursor: default;
40
+ &:hover {
41
+ background-color: transparent;
42
+ }
43
+ &::before {
44
+ background-color: transparent;
45
+ }
20
46
  }
21
47
  }
22
48
 
package/style/components/_form-field.scss CHANGED
@@ -3,9 +3,10 @@
3
3
  border: 1px solid var(--border-color);
4
4
  display: block;
5
5
  width: 100%;
6
- padding: 0.375rem 0.75rem;
6
+ padding: 0px 0.75rem;
7
7
  font-weight: 400;
8
- line-height: 1.5;
8
+ line-height: var(--line-height);
9
+ height: 30px;
9
10
  border-radius: 4px;
10
11
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
11
12
  background-color: var(--input-bg);
@@ -30,6 +31,9 @@
30
31
 
31
32
  &.df-textarea {
32
33
  padding-right: 0px;
34
+ padding-top: 5px;
35
+ padding-bottom: 5px;
36
+ height: initial;
33
37
  }
34
38
 
35
39
  &[type="number"] {
package/style/components/_form-group.scss CHANGED
@@ -59,7 +59,11 @@
59
59
 
60
60
  .df-help-message {
61
61
  display: block;
62
- color: var(--invalid-font-color);
62
+ > * {
63
+ color: var(--invalid-font-color);
64
+ font-size: var(--font-size-sm);
65
+ padding: 3px 0px;
66
+ }
63
67
  }
64
68
  }
65
69
 
package/style/components/_grid-field.scss CHANGED
@@ -1,6 +1,5 @@
1
1
  @mixin df-grid-field {
2
2
  .df-grid-field {
3
- margin-right: 10px;
4
3
  .df-grid-btn-area {
5
4
  border: 1px solid var(--border-color);
6
5
  padding: 3px;
package/style/components/_icon.scss CHANGED
@@ -6,11 +6,21 @@
6
6
  vertical-align: middle;
7
7
  }
8
8
 
9
+ // 아이콘 색은 mask 로 잘라내고 --icon-color 테마 변수로 채운다.
10
+ .df-add-icon,
11
+ .df-remove-icon {
12
+ background-color: var(--icon-color);
13
+ -webkit-mask-repeat: no-repeat;
14
+ mask-repeat: no-repeat;
15
+ }
16
+
9
17
  .df-add-icon {
10
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px' fill='%235f6368'%3E%3Cpath d='M431-431H220.78v-98H431v-210.22h98V-529h210.22v98H529v210.22h-98V-431Z'/%3E%3C/svg%3E");
18
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px'%3E%3Cpath d='M431-431H220.78v-98H431v-210.22h98V-529h210.22v98H529v210.22h-98V-431Z'/%3E%3C/svg%3E");
19
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px'%3E%3Cpath d='M431-431H220.78v-98H431v-210.22h98V-529h210.22v98H529v210.22h-98V-431Z'/%3E%3C/svg%3E");
11
20
  }
12
21
 
13
22
  .df-remove-icon {
14
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px' fill='%235f6368'%3E%3Cpath d='M291-221.91 221.91-291l189-189-189-189L291-738.09l189 189 189-189L738.09-669l-189 189 189 189L669-221.91l-189-189-189 189Z'/%3E%3C/svg%3E");
23
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px'%3E%3Cpath d='M291-221.91 221.91-291l189-189-189-189L291-738.09l189 189 189-189L738.09-669l-189 189 189 189L669-221.91l-189-189-189 189Z'/%3E%3C/svg%3E");
24
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px'%3E%3Cpath d='M291-221.91 221.91-291l189-189-189-189L291-738.09l189 189 189-189L738.09-669l-189 189 189 189L669-221.91l-189-189-189 189Z'/%3E%3C/svg%3E");
15
25
  }
16
26
  }
package/style/components/_label.scss CHANGED
@@ -1,24 +1,29 @@
1
1
  @mixin df-label {
2
2
  .df-label {
3
3
  position: relative;
4
- font-weight: 700;
5
4
  vertical-align: top;
6
-
7
- padding-top: var(--field-padding-top);
8
5
  padding-right: var(--field-padding-right);
9
- overflow: initial;
10
- // 확인할것.
11
- white-space: nowrap;
12
- text-overflow: ellipsis;
13
- word-break: break-all;
6
+ display: flex;
7
+ align-items: flex-start;
14
8
 
15
9
  .required {
10
+ color: var(--color-danger);
11
+ display: inline-block;
12
+ vertical-align: middle;
13
+
16
14
  &::after {
15
+ color: var(--color-danger);
17
16
  content: "*";
18
17
  vertical-align: middle;
19
18
  }
19
+ }
20
20
 
21
- color: var(--color-danger);
21
+ .df-label-text {
22
+ min-width: 0;
23
+ overflow: hidden;
24
+ white-space: nowrap;
25
+ text-overflow: ellipsis;
26
+ line-height: initial;
22
27
  }
23
28
 
24
29
  .df-tooltip {
@@ -29,12 +34,13 @@
29
34
  height: 16px;
30
35
  border-radius: 8px;
31
36
  text-align: center;
32
- line-height: 16px;
37
+ line-height: var(--line-height-lg);
33
38
  margin: 0 5px;
34
39
  font-size: 12px;
35
40
  cursor: help;
36
41
  position: relative;
37
42
  display: inline-block;
43
+ flex-shrink: 0;
38
44
 
39
45
  .df-tooltip-text {
40
46
  display: none;
package/style/components/_tab.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  padding: 0px;
6
6
 
7
7
  display: flex;
8
- line-height: 1.3;
8
+ line-height: var(--line-height);
9
9
  width: 100%;
10
10
  border-bottom: 1px solid var(--border-color);
11
11
 
@@ -47,7 +47,6 @@
47
47
  text-decoration: none;
48
48
  color: var(--font-color);
49
49
  height: 30px;
50
- line-height: 15px;
51
50
 
52
51
  &:hover {
53
52
  background-color: var(--tab-bg-hover);