@mirai/ui 1.0.181 → 1.0.183
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/README.md +2 -2
- package/build/components/Calendar/Calendar.Week.js +1 -1
- package/build/components/Calendar/Calendar.Week.js.map +1 -1
- package/build/components/Calendar/Calendar.module.css +1 -3
- package/build/components/Calendar/__tests__/__snapshots__/Calendar.test.jsx.snap +122 -122
- package/build/components/InputText/InputText.js +1 -1
- package/build/components/InputText/InputText.js.map +1 -1
- package/build/components/InputText/partials/InputText.Label.js +1 -1
- package/build/components/InputText/partials/InputText.Label.js.map +1 -1
- package/build/components/Table/Table.ColumnFilter.js +28 -15
- package/build/components/Table/Table.ColumnFilter.js.map +1 -1
- package/build/components/Table/Table.Filter.js +18 -8
- package/build/components/Table/Table.Filter.js.map +1 -1
- package/build/components/Table/Table.Row.js +5 -1
- package/build/components/Table/Table.Row.js.map +1 -1
- package/build/components/Table/Table.constants.js +18 -0
- package/build/components/Table/Table.constants.js.map +1 -0
- package/build/components/Table/Table.js +26 -10
- package/build/components/Table/Table.js.map +1 -1
- package/build/components/Table/Table.module.css +18 -9
- package/build/components/Table/Table.stories.js +15 -4
- package/build/components/Table/Table.stories.js.map +1 -1
- package/build/components/Table/Table.stories.module.css +10 -2
- package/build/components/Table/__tests__/__snapshots__/Table.ColumnFilter.test.js.snap +762 -0
- package/build/components/Table/__tests__/__snapshots__/Table.test.js.snap +371 -9
- package/build/components/Table/helpers/index.js +11 -0
- package/build/components/Table/helpers/index.js.map +1 -1
- package/build/components/Table/helpers/select.js +16 -11
- package/build/components/Table/helpers/select.js.map +1 -1
- package/build/components/Table/helpers/storage.js +28 -0
- package/build/components/Table/helpers/storage.js.map +1 -0
- package/build/primitives/Layer/Layer.module.css +1 -1
- package/build/primitives/Text/Text.js +4 -2
- package/build/primitives/Text/Text.js.map +1 -1
- package/build/primitives/Text/Text.module.css +5 -0
- package/build/primitives/Text/Text.stories.js +1 -0
- package/build/primitives/Text/Text.stories.js.map +1 -1
- package/build/primitives/Text/__tests__/__snapshots__/Text.test.js.snap +10 -0
- package/build/theme/default.theme.css +2 -2
- package/package.json +1 -1
|
@@ -118,24 +118,29 @@
|
|
|
118
118
|
background-color: var(--mirai-ui-table-background);
|
|
119
119
|
box-shadow: inset 0 calc(var(--mirai-ui-border-width) * -1) var(--mirai-ui-table-border-color);
|
|
120
120
|
flex-wrap: wrap;
|
|
121
|
-
gap: var(--mirai-ui-
|
|
121
|
+
gap: calc(var(--mirai-ui-table-padding-y) / 2);
|
|
122
122
|
left: 0;
|
|
123
|
-
padding: var(--mirai-ui-table-padding-y) var(--mirai-ui-table-padding-x);
|
|
123
|
+
padding: calc(var(--mirai-ui-table-padding-y) / 2) var(--mirai-ui-table-padding-x);
|
|
124
124
|
position: sticky;
|
|
125
125
|
width: 100%;
|
|
126
126
|
}
|
|
127
127
|
|
|
128
|
-
.filters .
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
border-radius: var(--mirai-ui-table-border-radius);
|
|
128
|
+
.filters .item {
|
|
129
|
+
box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-table-border-color);
|
|
130
|
+
border-radius: var(--mirai-ui-border-radius);
|
|
132
131
|
gap: calc(var(--mirai-ui-space-XS) / 2);
|
|
133
|
-
padding: calc(var(--mirai-ui-space-XS) / 2) var(--mirai-ui-space-XS)
|
|
132
|
+
padding: calc(var(--mirai-ui-space-XS) / 2) calc(var(--mirai-ui-space-XS) / 2) calc(var(--mirai-ui-space-XS) / 2)
|
|
133
|
+
var(--mirai-ui-space-S);
|
|
134
134
|
user-select: none;
|
|
135
135
|
}
|
|
136
136
|
|
|
137
|
-
.filters .
|
|
138
|
-
|
|
137
|
+
.filters .item .buttonRemove {
|
|
138
|
+
align-items: center;
|
|
139
|
+
border-radius: var(--mirai-ui-border-radius);
|
|
140
|
+
display: flex;
|
|
141
|
+
height: var(--mirai-ui-space-L);
|
|
142
|
+
justify-content: center;
|
|
143
|
+
width: var(--mirai-ui-space-L);
|
|
139
144
|
}
|
|
140
145
|
|
|
141
146
|
@media only screen and (max-width: 430px) {
|
|
@@ -160,4 +165,8 @@
|
|
|
160
165
|
margin: var(--mirai-ui-space-M) 0;
|
|
161
166
|
width: calc(var(--mirai-ui-breakpoint-S) * 0.8);
|
|
162
167
|
}
|
|
168
|
+
|
|
169
|
+
.filters .item .buttonRemove:hover {
|
|
170
|
+
background-color: var(--mirai-ui-content-background);
|
|
171
|
+
}
|
|
163
172
|
}
|
|
@@ -32,7 +32,7 @@ var tags = function tags(value) {
|
|
|
32
32
|
return /*#__PURE__*/_react.default.createElement(_.Text, {
|
|
33
33
|
key: language,
|
|
34
34
|
bold: true,
|
|
35
|
-
|
|
35
|
+
tiny: true,
|
|
36
36
|
className: _TableStoriesModule.default.tag
|
|
37
37
|
}, language);
|
|
38
38
|
});
|
|
@@ -135,6 +135,9 @@ Story.args = {
|
|
|
135
135
|
filter: [{
|
|
136
136
|
field: 'email',
|
|
137
137
|
value: '@mirai.com'
|
|
138
|
+
}, {
|
|
139
|
+
field: 'nonExistent',
|
|
140
|
+
value: '@mirai.com'
|
|
138
141
|
}, {
|
|
139
142
|
field: 'email',
|
|
140
143
|
value: '@soyjavi.com'
|
|
@@ -144,6 +147,12 @@ Story.args = {
|
|
|
144
147
|
max: 2023
|
|
145
148
|
}],
|
|
146
149
|
inline: true,
|
|
150
|
+
l10n: {
|
|
151
|
+
actionCancel: 'Cancel',
|
|
152
|
+
actionSubmit: 'Submit',
|
|
153
|
+
labelMax: 'Max',
|
|
154
|
+
labelMin: 'Min'
|
|
155
|
+
},
|
|
147
156
|
schema: {
|
|
148
157
|
username: {
|
|
149
158
|
label: 'User Name',
|
|
@@ -153,7 +162,10 @@ Story.args = {
|
|
|
153
162
|
label: 'Email'
|
|
154
163
|
},
|
|
155
164
|
tags: {
|
|
156
|
-
label:
|
|
165
|
+
label: /*#__PURE__*/_react.default.createElement(_.View, {
|
|
166
|
+
row: true,
|
|
167
|
+
className: _TableStoriesModule.default.label
|
|
168
|
+
}, /*#__PURE__*/_react.default.createElement(_.Text, null, "\uD83C\uDFF7\uFE0F"), "Tags"),
|
|
157
169
|
type: 'component',
|
|
158
170
|
bind: 'languages'
|
|
159
171
|
},
|
|
@@ -184,9 +196,8 @@ Story.args = {
|
|
|
184
196
|
search: '',
|
|
185
197
|
// inherited properties
|
|
186
198
|
testId: 'test-story',
|
|
199
|
+
store: 'mirai',
|
|
187
200
|
style: {
|
|
188
|
-
height: '128px !important;',
|
|
189
|
-
width: 128,
|
|
190
201
|
background: 'green'
|
|
191
202
|
}
|
|
192
203
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.stories.js","names":["title","tags","value","map","language","style","tag","Story","props","useState","selected","setSelected","search","setSearch","useEffect","handleScroll","others","console","log","handlePress","handleSelect","table","dataSource","username","email","year","languages","action","twitter","undefined","actionTitle","storyName","args","filter","field","min","max","inline","schema","label","type","bind","bio","testId","
|
|
1
|
+
{"version":3,"file":"Table.stories.js","names":["title","tags","value","map","language","style","tag","Story","props","useState","selected","setSelected","search","setSearch","useEffect","handleScroll","others","console","log","handlePress","handleSelect","table","dataSource","username","email","year","languages","action","twitter","undefined","actionTitle","storyName","args","filter","field","min","max","inline","l10n","actionCancel","actionSubmit","labelMax","labelMin","schema","label","type","bind","bio","testId","store","background","argTypes"],"sources":["../../../src/components/Table/Table.stories.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { Button, Icon, ICON, InputText, Text, View } from '../../';\nimport { Table } from './Table';\nimport style from './Table.stories.module.css';\n\nexport default { title: 'Components' };\n\nconst tags = (value) =>\n value.map((language) => (\n <Text key={language} bold tiny className={style.tag}>\n {language}\n </Text>\n ));\n\nexport const Story = (props) => {\n const [selected, setSelected] = useState();\n const [search, setSearch] = useState();\n\n useEffect(() => {\n setSearch(props.search);\n }, [props.search]);\n\n const handleScroll = (...others) => console.log('<Table>::onScroll', ...others);\n\n const handlePress = (...others) => console.log('<Table>::onPress', ...others);\n\n const handleSelect = (...others) => {\n console.log('<Table>::onSelect', ...others);\n setSelected(...others);\n };\n\n return (\n <>\n <InputText name=\"search\" placeholder=\"search...\" type=\"search\" value={search} onChange={setSearch} />\n\n <Table\n {...props}\n search={search}\n selected={selected}\n onPress={handlePress}\n onScroll={handleScroll}\n onSelect={handleSelect}\n className={style.table}\n />\n </>\n );\n};\n\nconst dataSource = [\n {\n username: 'jose',\n email: 'jose@mirai.com',\n year: 1,\n languages: ['ES', 'EN'],\n tags: tags(['ES', 'EN']),\n action: null,\n },\n {\n username: 'mario/1',\n email: 'mario.1@mirai.com',\n languages: ['ES'],\n tags: null,\n year: 2005,\n },\n {\n username: 'svet',\n email: 'svet@mirai.com',\n tags: tags(['RU', 'ES', 'EN']),\n languages: ['RU', 'ES', 'EN'],\n year: 2021,\n twitter: undefined,\n action: <Button small>Click Me</Button>,\n actionTitle: 'Click Me',\n },\n {\n username: 'javi',\n email: 'hi@soyjavi.com',\n tags: null,\n languages: ['EU', 'ES', 'EN', 'TH'],\n tags: tags(['EU', 'ES', 'EN', 'TH']),\n year: 2022,\n twitter: 'soyjavi',\n bio: \"Hi, I'm Javi. For as long as I can remember, I have always loved build software and helping people through it. I strive to design simple, clean, and beautiful products in the hope that they will make a difference in the world.\",\n },\n {\n username: 'victor',\n email: 'victor@mirai.com',\n languages: ['ES'],\n tags: tags(['ES']),\n year: 2021,\n },\n {\n username: 'mario/2',\n email: 'mario.2@mirai.com',\n languages: ['ES'],\n tags: tags(['ES']),\n year: 2022,\n },\n];\n\nStory.storyName = 'Table';\n\nStory.args = {\n dataSource,\n filter: [\n { field: 'email', value: '@mirai.com' },\n { field: 'nonExistent', value: '@mirai.com' },\n { field: 'email', value: '@soyjavi.com' },\n { field: 'year', min: 2020, max: 2023 },\n ],\n inline: true,\n l10n: {\n actionCancel: 'Cancel',\n actionSubmit: 'Submit',\n labelMax: 'Max',\n labelMin: 'Min',\n },\n schema: {\n username: { label: 'User Name', type: 'text' },\n email: {\n label: 'Email',\n },\n tags: {\n label: (\n <View row className={style.label}>\n <Text>🏷️</Text>\n Tags\n </View>\n ),\n type: 'component',\n bind: 'languages',\n },\n languages: { label: 'Languages (hidden)', type: 'hidden' },\n year: { label: 'Year', type: 'number' },\n twitter: { label: 'Twitter' },\n bio: { label: 'Biography' },\n action: { label: 'Action', type: 'component', bind: 'actionTitle' },\n actionTitle: { label: 'Action (hidden)', type: 'hidden' },\n },\n search: '',\n // inherited properties\n testId: 'test-story',\n store: 'mirai',\n style: {\n background: 'green',\n },\n};\n\nStory.argTypes = {};\n"],"mappings":"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"}
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
.table {
|
|
2
|
+
width: 100%;
|
|
3
|
+
}
|
|
4
|
+
|
|
1
5
|
.table td:nth-child(6) {
|
|
2
6
|
max-width: 20vw;
|
|
3
7
|
}
|
|
@@ -10,6 +14,10 @@
|
|
|
10
14
|
margin: 0 var(--mirai-ui-border-radius);
|
|
11
15
|
}
|
|
12
16
|
|
|
17
|
+
.table .label {
|
|
18
|
+
gap: var(--mirai-ui-space-XS);
|
|
19
|
+
}
|
|
20
|
+
|
|
13
21
|
@media only screen and (max-width: 430px) {
|
|
14
22
|
.table {
|
|
15
23
|
width: 100%;
|
|
@@ -18,7 +26,7 @@
|
|
|
18
26
|
|
|
19
27
|
@media only screen and (min-width: 430px) {
|
|
20
28
|
.table {
|
|
21
|
-
max-height:
|
|
22
|
-
width:
|
|
29
|
+
max-height: 50vh;
|
|
30
|
+
width: 90vw;
|
|
23
31
|
}
|
|
24
32
|
}
|