@anmed/mui-selection 0.0.5 → 0.0.7

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 (7) hide show
  1. package/.sass-cache/0e3848c7c91e6b8458ad49906531fbef1770b8d5/mui-select-field.scssc +0 -0
  2. package/.sass-cache/efa7a12223b0fc14812896ebc95f69f4ba9df668/mui-select-field.scssc +0 -0
  3. package/SelectionField.svelte +10 -1
  4. package/mui-select-field.css +36 -53
  5. package/mui-select-field.css.map +7 -0
  6. package/mui-select-field.scss +3 -4
  7. package/package.json +3 -1
package/SelectionField.svelte CHANGED
@@ -45,6 +45,15 @@ const handlerClick = () => {
45
45
  dispatcher('action', value);
46
46
  }
47
47
  };
48
+ const isItemSelect = (item, value) => {
49
+ if (item != null && value != null) {
50
+ if (keyCode != null) {
51
+ return item[keyCode] == value[keyCode];
52
+ }
53
+ return item == value;
54
+ }
55
+ return false;
56
+ };
48
57
  </script>
49
58
 
50
59
  <div on:click={handlerClick}>
@@ -53,7 +62,7 @@ const handlerClick = () => {
53
62
  <CommonField {label} {required} bind:focused {above} {error}>
54
63
  <div class="card-select-box">
55
64
  {#each list as item}
56
- <span class="{item === value? 'card-select-item-selected' :'card-select-item-normal'}"
65
+ <span class="{isItemSelect(item,value)? 'card-select-item-selected' :'card-select-item-normal'}"
57
66
  on:click={()=>onCardItemClick(item)}>{getDisplayText(item)}</span>
58
67
  {/each}
59
68
  </div>
package/mui-select-field.css CHANGED
@@ -1,7 +1,6 @@
1
1
  * {
2
2
  margin: 0;
3
- padding: 0;
4
- }
3
+ padding: 0; }
5
4
 
6
5
  .mui-select-slide-box {
7
6
  flex: 1;
@@ -9,12 +8,10 @@
9
8
  right: 0;
10
9
  bottom: 0;
11
10
  background: white;
12
- user-select: none;
13
- }
11
+ user-select: none; }
14
12
 
15
13
  .mui-select-group {
16
- display: flex;
17
- }
14
+ display: flex; }
18
15
 
19
16
  .mui-select-column {
20
17
  position: relative;
@@ -22,11 +19,10 @@
22
19
  height: 200px;
23
20
  margin: 0 auto;
24
21
  overflow: hidden;
25
- touch-action: none;
26
- }
22
+ touch-action: none; }
27
23
 
28
24
  .mui-select-column::before {
29
- content: "";
25
+ content: '';
30
26
  position: absolute;
31
27
  top: 0;
32
28
  left: 0;
@@ -34,11 +30,10 @@
34
30
  z-index: 1;
35
31
  height: 79px;
36
32
  border-bottom: 1px solid #ebebeb;
37
- background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
38
- }
33
+ background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6)); }
39
34
 
40
35
  .mui-select-column::after {
41
- content: "";
36
+ content: '';
42
37
  position: absolute;
43
38
  bottom: 0;
44
39
  left: 0;
@@ -46,27 +41,23 @@
46
41
  z-index: 1;
47
42
  height: 79px;
48
43
  border-top: 1px solid #ebebeb;
49
- background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.9));
50
- }
44
+ background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.9)); }
51
45
 
52
46
  li {
53
47
  list-style: none;
54
48
  font-size: 14px;
55
- line-height: 40px;
56
- text-align: center;
57
- }
49
+ padding: 5px 12px;
50
+ text-align: center; }
58
51
 
59
52
  .mui-select-field-text {
60
53
  color: var(mui-select-field-text-color, #999);
61
- font-size: var(mui-select-field-text-font-size, 16px);
62
- }
54
+ font-size: var(mui-select-field-text-font-size, 16px); }
63
55
 
64
56
  .single-click-selection-box {
65
57
  width: 100%;
66
58
  background-color: white;
67
59
  border-top-right-radius: 15px;
68
- border-top-left-radius: 15px;
69
- }
60
+ border-top-left-radius: 15px; }
70
61
 
71
62
  .single-click-selection-title {
72
63
  display: flex;
@@ -74,47 +65,39 @@ li {
74
65
  justify-content: center;
75
66
  color: #333333;
76
67
  font-size: 15px;
77
- font-weight: bold;
78
- }
68
+ font-weight: bold; }
79
69
 
80
70
  .single-click-selection-ul {
81
- height: 200px;
82
- overflow: auto;
83
- }
71
+ min-height: 20vh;
72
+ max-height: 50vh;
73
+ overflow: auto; }
84
74
 
85
75
  .single-click-selection-li-normal {
86
- height: 40px;
87
- color: var(single-click-selection-normal-text-color, #666);
88
- }
76
+ color: var(single-click-selection-normal-text-color, #666); }
89
77
 
90
78
  .single-click-selection-li-selected {
91
- height: 40px;
92
- color: var(--single-click-selection-selected-text-color, #0912ff);
93
- }
79
+ color: var(--single-click-selection-selected-text-color, #0912ff); }
94
80
 
95
81
  .card-select-box {
96
82
  display: flex;
97
83
  justify-content: space-around;
98
84
  padding: 0 12px;
99
85
  text-align: center;
100
- height: 30px;
101
- }
102
- .card-select-box .select-item-base, .card-select-box .card-select-item-selected, .card-select-box .card-select-item-normal {
103
- width: 100%;
104
- line-height: 24px;
105
- border-radius: 5px;
106
- margin-right: 10px;
107
- font-size: 12px;
108
- text-align: center;
109
- }
110
- .card-select-box .select-item-base:last-child, .card-select-box .card-select-item-selected:last-child, .card-select-box .card-select-item-normal:last-child {
111
- margin-right: 0;
112
- }
113
- .card-select-box .card-select-item-normal {
114
- background-color: var(--card-select-item-normal-bg-color, #F8F8F8);
115
- color: var(--card-select-item-normal-text-color, #333333);
116
- }
117
- .card-select-box .card-select-item-selected {
118
- background-color: var(--card-select-item-selected-bg-color, #E5F3FF);
119
- color: var(--card-select-item-selected-text-color, #377EE1);
120
- }
86
+ height: 30px; }
87
+ .card-select-box .select-item-base, .card-select-box .card-select-item-normal, .card-select-box .card-select-item-selected {
88
+ width: 100%;
89
+ line-height: 24px;
90
+ border-radius: 5px;
91
+ margin-right: 10px;
92
+ font-size: 12px;
93
+ text-align: center; }
94
+ .card-select-box .select-item-base:last-child, .card-select-box .card-select-item-normal:last-child, .card-select-box .card-select-item-selected:last-child {
95
+ margin-right: 0; }
96
+ .card-select-box .card-select-item-normal {
97
+ background-color: var(--card-select-item-normal-bg-color, #F8F8F8);
98
+ color: var(--card-select-item-normal-text-color, #333333); }
99
+ .card-select-box .card-select-item-selected {
100
+ background-color: var(--card-select-item-selected-bg-color, #E5F3FF);
101
+ color: var(--card-select-item-selected-text-color, #377EE1); }
102
+
103
+ /*# sourceMappingURL=mui-select-field.css.map */
package/mui-select-field.css.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "mappings": "AAAA,CAAE;EACA,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;AAGZ,qBAAsB;EACpB,IAAI,EAAE,CAAC;EACP,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,CAAC;EACR,MAAM,EAAE,CAAC;EACT,UAAU,EAAE,KAAK;EACjB,WAAW,EAAE,IAAI;;AAGnB,iBAAkB;EAChB,OAAO,EAAE,IAAI;;AAGf,kBAAmB;EACjB,QAAQ,EAAE,QAAQ;EAClB,IAAI,EAAE,CAAC;EACP,MAAM,EAAE,KAAK;EACb,MAAM,EAAE,MAAM;EACd,QAAQ,EAAE,MAAM;EAChB,YAAY,EAAE,IAAI;;AAGpB,0BAA2B;EACzB,OAAO,EAAE,EAAE;EACX,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,CAAC;EACR,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,iBAAiB;EAChC,UAAU,EAAE,8EAA4E;;AAG1F,yBAA0B;EACxB,OAAO,EAAE,EAAE;EACX,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,CAAC;EACR,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,iBAAiB;EAC7B,UAAU,EAAE,8EAA4E;;AAG1F,EAAG;EACD,UAAU,EAAE,IAAI;EAChB,SAAS,EAAE,IAAI;EACf,OAAO,EAAE,QAAQ;EACjB,UAAU,EAAE,MAAM;;AAGpB,sBAAuB;EACrB,KAAK,EAAE,sCAAsC;EAC7C,SAAS,EAAE,0CAA0C;;AAGvD,2BAA4B;EAC1B,KAAK,EAAE,IAAI;EACX,gBAAgB,EAAE,KAAK;EACvB,uBAAuB,EAAE,IAAI;EAC7B,sBAAsB,EAAE,IAAI;;AAG9B,6BAA8B;EAC5B,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,IAAI;;AAGnB,0BAA2B;EACzB,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,IAAI;EAChB,QAAQ,EAAE,IAAI;;AAGhB,iCAAkC;EAChC,KAAK,EAAE,mDAAmD;;AAG5D,mCAAoC;EAClC,KAAK,EAAE,0DAA0D;;AAInE,gBAAiB;EACf,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,YAAY;EAC7B,OAAO,EAAE,MAAM;EACf,UAAU,EAAE,MAAM;EAClB,MAAM,EAAE,IAAI;EAEZ,0HAAkB;IAChB,KAAK,EAAE,IAAI;IACX,WAAW,EAAE,IAAI;IACjB,aAAa,EAAE,GAAG;IAClB,YAAY,EAAE,IAAI;IAClB,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,MAAM;IAElB,2JAAa;MACX,YAAY,EAAE,CAAC;EAInB,yCAAyB;IAEvB,gBAAgB,EAAE,gDAAgD;IAClE,KAAK,EAAE,kDAAkD;EAG3D,2CAA2B;IAEzB,gBAAgB,EAAE,kDAAkD;IACpE,KAAK,EAAE,oDAAoD",
4
+ "sources": ["mui-select-field.scss"],
5
+ "names": [],
6
+ "file": "mui-select-field.css"
7
+ }
package/mui-select-field.scss CHANGED
@@ -52,7 +52,7 @@
52
52
  li {
53
53
  list-style: none;
54
54
  font-size: 14px;
55
- line-height: 40px;
55
+ padding: 5px 12px;
56
56
  text-align: center;
57
57
  }
58
58
 
@@ -78,17 +78,16 @@ li {
78
78
  }
79
79
 
80
80
  .single-click-selection-ul {
81
- height: 200px;
81
+ min-height: 20vh;
82
+ max-height: 50vh;
82
83
  overflow: auto;
83
84
  }
84
85
 
85
86
  .single-click-selection-li-normal {
86
- height: 40px;
87
87
  color: var(single-click-selection-normal-text-color, #666);
88
88
  }
89
89
 
90
90
  .single-click-selection-li-selected {
91
- height: 40px;
92
91
  color: var(--single-click-selection-selected-text-color, #0912ff);
93
92
  }
94
93
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anmed/mui-selection",
3
- "version": "0.0.5",
3
+ "version": "0.0.7",
4
4
  "description": "",
5
5
  "type": "module",
6
6
  "main": "index.js",
@@ -24,12 +24,14 @@
24
24
  "license": "MIT",
25
25
  "exports": {
26
26
  "./package.json": "./package.json",
27
+ "./.sass-cache/efa7a12223b0fc14812896ebc95f69f4ba9df668/mui-select-field.scssc": "./.sass-cache/efa7a12223b0fc14812896ebc95f69f4ba9df668/mui-select-field.scssc",
27
28
  "./Selection.svelte": "./Selection.svelte",
28
29
  "./SelectionField.svelte": "./SelectionField.svelte",
29
30
  "./SelectionSpinner.svelte": "./SelectionSpinner.svelte",
30
31
  "./SingleClickSelectionSpinner.svelte": "./SingleClickSelectionSpinner.svelte",
31
32
  ".": "./index.js",
32
33
  "./mui-select-field.css": "./mui-select-field.css",
34
+ "./mui-select-field.css.map": "./mui-select-field.css.map",
33
35
  "./mui-select-field.scss": "./mui-select-field.scss"
34
36
  },
35
37
  "svelte": "./index.js"