@mirai/ui 1.0.242 → 1.0.244
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 +5 -3
- package/build/components/Slider/Slider.js +5 -5
- package/build/components/Slider/Slider.js.map +1 -1
- package/build/components/Slider/Slider.module.css +10 -9
- package/build/components/Slider/__tests__/__snapshots__/Slider.test.js.snap +7 -7
- package/build/primitives/Input/Input.js +5 -2
- package/build/primitives/Input/Input.js.map +1 -1
- package/build/primitives/Input/Input.stories.js +1 -0
- package/build/primitives/Input/Input.stories.js.map +1 -1
- package/build/primitives/Input/__tests__/__snapshots__/Input.test.js.snap +11 -0
- package/build/theme/default.theme.css +3 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -66,6 +66,7 @@ const MyComponent = () => (
|
|
|
66
66
|
This primitive returns an input or a textarea based on the following props:
|
|
67
67
|
|
|
68
68
|
- `disabled:boolean` applying 'disabled' attribute
|
|
69
|
+
- `max:number` specifies the maximum allowed value for numeric input
|
|
69
70
|
- `multiline:boolean` if true returning textarea
|
|
70
71
|
- `name:string` input name
|
|
71
72
|
- `type:string` type attribute value
|
|
@@ -1054,7 +1055,7 @@ A Slider component receiving the following props:
|
|
|
1054
1055
|
- `thumbnails:arrayOf:string` if you want use thumbnails of images in fullScreen mode.
|
|
1055
1056
|
- `width:number` width of component (required).
|
|
1056
1057
|
- `onChange:function` executed when image (index) is visible
|
|
1057
|
-
- `
|
|
1058
|
+
- `onCounter:function` show a pressable counter
|
|
1058
1059
|
|
|
1059
1060
|
```jsx
|
|
1060
1061
|
import { Slider } from '@mirai/ui';
|
|
@@ -1068,9 +1069,10 @@ const MyComponent = (props) => {
|
|
|
1068
1069
|
**Theming variables**
|
|
1069
1070
|
|
|
1070
1071
|
```css
|
|
1071
|
-
--mirai-ui-slider-
|
|
1072
|
+
--mirai-ui-slider-button: var(--mirai-ui-base);
|
|
1073
|
+
--mirai-ui-slider-button-icon: var(--mirai-ui-content);
|
|
1072
1074
|
--mirai-ui-slider-overlay: rgba(0, 0, 0, 0.66);
|
|
1073
|
-
--mirai-ui-slider-color: var(--mirai-ui-base);
|
|
1075
|
+
--mirai-ui-slider-overlay-color: var(--mirai-ui-base);
|
|
1074
1076
|
--mirai-ui-slider-border-radius: var(--mirai-ui-border-radius);
|
|
1075
1077
|
```
|
|
1076
1078
|
|
|
@@ -134,18 +134,18 @@ var Slider = function Slider(_ref) {
|
|
|
134
134
|
className: _SliderModule.default.caption
|
|
135
135
|
}, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
136
136
|
bold: true,
|
|
137
|
-
|
|
138
|
-
className: [_SliderModule.default.
|
|
137
|
+
small: true,
|
|
138
|
+
className: [_SliderModule.default.overlay, _SliderModule.default.text]
|
|
139
139
|
}, captions[imageIndex])));
|
|
140
|
-
}), images.length >
|
|
141
|
-
className: [_SliderModule.default.
|
|
140
|
+
}), images.length > 1 && onCounter && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
141
|
+
className: [_SliderModule.default.overlay, _SliderModule.default.counter],
|
|
142
142
|
onPress: onCounter
|
|
143
143
|
}, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
144
144
|
action: true,
|
|
145
145
|
value: _primitives.ICON.PHOTO_LIBRARY
|
|
146
146
|
}), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
147
147
|
bold: true,
|
|
148
|
-
|
|
148
|
+
small: true
|
|
149
149
|
}, images.length))), /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
150
150
|
onPress: function onPress() {
|
|
151
151
|
return setIndex(index + 1);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","names":["interval","timeout","Slider","auto","captions","height","propHeight","images","index","propIndex","width","propWidth","onChange","onCounter","others","useDevice","isDesktop","useState","disabledScroll","setDisabledScroll","focus","setFocus","setIndex","useEffect","setInterval","length","clearInterval","clearTimeout","setTimeout","getMotionExpand","handleScroll","x","nextIndex","Math","round","undefined","styles","style","container","className","button","hide","back","ICON","LEFT","floor","scrollView","map","image","imageIndex","item","backgroundImage","PRELOAD_IMAGES","caption","
|
|
1
|
+
{"version":3,"file":"Slider.js","names":["interval","timeout","Slider","auto","captions","height","propHeight","images","index","propIndex","width","propWidth","onChange","onCounter","others","useDevice","isDesktop","useState","disabledScroll","setDisabledScroll","focus","setFocus","setIndex","useEffect","setInterval","length","clearInterval","clearTimeout","setTimeout","getMotionExpand","handleScroll","x","nextIndex","Math","round","undefined","styles","style","container","className","button","hide","back","ICON","LEFT","floor","scrollView","map","image","imageIndex","item","backgroundImage","PRELOAD_IMAGES","caption","overlay","text","counter","PHOTO_LIBRARY","forward","RIGHT","displayName","propTypes","PropTypes","bool","arrayOf","string","number","isRequired","func"],"sources":["../../../src/components/Slider/Slider.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, ScrollView, Pressable, Text, View } from '../../primitives';\nimport { getMotionExpand } from './helpers';\nimport { PRELOAD_IMAGES } from './Slider.constants';\nimport style from './Slider.module.css';\n\nlet interval;\nlet timeout;\n\nconst Slider = ({\n auto = false,\n captions = [],\n height: propHeight = 240,\n images = [],\n index: propIndex = 0,\n width: propWidth = 320,\n onChange = () => {},\n onCounter,\n ...others\n}) => {\n const { isDesktop } = useDevice();\n\n const [disabledScroll, setDisabledScroll] = useState(false);\n const [focus, setFocus] = useState(false);\n const [index, setIndex] = useState(propIndex);\n\n useEffect(() => {\n if (auto) interval = setInterval(() => setIndex(index < images.length - 1 ? index + 1 : 0), 2000);\n return () => clearInterval(interval);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [auto, index]);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useEffect(() => {\n clearTimeout(timeout);\n setDisabledScroll(true);\n timeout = setTimeout(() => setDisabledScroll(false), getMotionExpand() * 2);\n\n onChange(index);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [index]);\n\n const height = propHeight;\n\n const width = propWidth;\n\n const handleScroll = ({ x } = {}) => {\n const nextIndex = x < width ? 0 : Math.round(x / width);\n\n if (nextIndex !== index) setIndex(nextIndex);\n };\n\n return (\n <View\n {...others}\n role=\"slider\"\n onMouseEnter={isDesktop ? () => setFocus(true) : undefined}\n onMouseLeave={isDesktop ? () => setFocus(false) : undefined}\n className={styles(style.container, others.className)}\n style={{ ...others.style, width }}\n >\n <Pressable\n onPress={() => setIndex(index - 1)}\n className={styles(style.button, (index <= 0 || (isDesktop && !focus)) && style.hide, style.back)}\n >\n <Icon value={ICON.LEFT} />\n </Pressable>\n\n <ScrollView\n horizontal\n scrollTo={index * Math.floor(width)}\n snap\n width={width}\n onScroll={disabledScroll ? undefined : handleScroll}\n className={style.scrollView}\n >\n {images.map((image, imageIndex) => (\n <View key={imageIndex} className={style.item}>\n <View\n role=\"image\"\n className={style.image}\n style={{\n backgroundImage:\n imageIndex >= index - PRELOAD_IMAGES && imageIndex <= index + PRELOAD_IMAGES\n ? `url(${image})`\n : undefined,\n height,\n width,\n }}\n />\n {captions[imageIndex] && (\n <View className={style.caption}>\n <Text bold small className={[style.overlay, style.text]}>\n {captions[imageIndex]}\n </Text>\n </View>\n )}\n </View>\n ))}\n\n {images.length > 1 && onCounter && (\n <Pressable className={[style.overlay, style.counter]} onPress={onCounter}>\n <Icon action value={ICON.PHOTO_LIBRARY} />\n <Text bold small>\n {images.length}\n </Text>\n </Pressable>\n )}\n </ScrollView>\n\n <Pressable\n onPress={() => setIndex(index + 1)}\n className={styles(\n style.button,\n (index >= images.length - 1 || (isDesktop && !focus)) && style.hide && style.hide,\n style.forward,\n )}\n >\n <Icon value={ICON.RIGHT} />\n </Pressable>\n </View>\n );\n};\n\nSlider.displayName = 'Component:Slider';\n\nSlider.propTypes = {\n auto: PropTypes.bool,\n captions: PropTypes.arrayOf(PropTypes.string),\n height: PropTypes.number.isRequired,\n images: PropTypes.arrayOf(PropTypes.string).isRequired,\n index: PropTypes.number,\n width: PropTypes.number.isRequired,\n onChange: PropTypes.func,\n onCounter: PropTypes.func,\n};\n\nexport { Slider };\n"],"mappings":"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"}
|
|
@@ -7,8 +7,9 @@
|
|
|
7
7
|
|
|
8
8
|
.button {
|
|
9
9
|
align-items: center;
|
|
10
|
-
background-color: var(--mirai-ui-slider-
|
|
10
|
+
background-color: var(--mirai-ui-slider-button);
|
|
11
11
|
border-radius: 50%;
|
|
12
|
+
box-shadow: var(--mirai-ui-modal-shadow);
|
|
12
13
|
display: flex;
|
|
13
14
|
height: var(--mirai-ui-button-squared);
|
|
14
15
|
justify-content: center;
|
|
@@ -23,8 +24,8 @@
|
|
|
23
24
|
transform: scale(0);
|
|
24
25
|
}
|
|
25
26
|
|
|
26
|
-
.button >
|
|
27
|
-
color: var(--mirai-ui-slider-
|
|
27
|
+
.button > [data-role='icon'] {
|
|
28
|
+
color: var(--mirai-ui-slider-button-icon);
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
.button.back {
|
|
@@ -56,11 +57,11 @@
|
|
|
56
57
|
}
|
|
57
58
|
|
|
58
59
|
.item .caption .text {
|
|
59
|
-
color: var(--mirai-ui-slider-color);
|
|
60
|
-
padding: calc(var(--mirai-ui-space-XS) / 2) var(--mirai-ui-space-XS);
|
|
60
|
+
color: var(--mirai-ui-slider-overlay-color);
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
.counter {
|
|
64
|
+
align-items: center;
|
|
64
65
|
bottom: var(--mirai-ui-space-S);
|
|
65
66
|
display: flex;
|
|
66
67
|
flex-direction: row;
|
|
@@ -73,14 +74,14 @@
|
|
|
73
74
|
color: var(--mirai-ui-slider-color);
|
|
74
75
|
}
|
|
75
76
|
|
|
76
|
-
.
|
|
77
|
+
.overlay {
|
|
77
78
|
background-color: var(--mirai-ui-slider-overlay);
|
|
78
79
|
border-radius: var(--mirai-ui-slider-border-radius);
|
|
79
|
-
padding: calc(var(--mirai-ui-space-XS) / 2);
|
|
80
|
+
padding: calc(var(--mirai-ui-space-XS) / 2) var(--mirai-ui-space-XS);
|
|
80
81
|
}
|
|
81
82
|
|
|
82
|
-
.
|
|
83
|
-
color: var(--mirai-ui-slider-color);
|
|
83
|
+
.overlay [data-role] {
|
|
84
|
+
color: var(--mirai-ui-slider-overlay-color);
|
|
84
85
|
}
|
|
85
86
|
|
|
86
87
|
/* S */
|
|
@@ -272,7 +272,7 @@ exports[`component:<Slider> prop:captions 1`] = `
|
|
|
272
272
|
class="view caption"
|
|
273
273
|
>
|
|
274
274
|
<span
|
|
275
|
-
class="text bold
|
|
275
|
+
class="text bold small overlay text"
|
|
276
276
|
>
|
|
277
277
|
javi
|
|
278
278
|
</span>
|
|
@@ -289,7 +289,7 @@ exports[`component:<Slider> prop:captions 1`] = `
|
|
|
289
289
|
class="view caption"
|
|
290
290
|
>
|
|
291
291
|
<span
|
|
292
|
-
class="text bold
|
|
292
|
+
class="text bold small overlay text"
|
|
293
293
|
>
|
|
294
294
|
jose
|
|
295
295
|
</span>
|
|
@@ -314,7 +314,7 @@ exports[`component:<Slider> prop:captions 1`] = `
|
|
|
314
314
|
class="view caption"
|
|
315
315
|
>
|
|
316
316
|
<span
|
|
317
|
-
class="text bold
|
|
317
|
+
class="text bold small overlay text"
|
|
318
318
|
>
|
|
319
319
|
victor
|
|
320
320
|
</span>
|
|
@@ -331,7 +331,7 @@ exports[`component:<Slider> prop:captions 1`] = `
|
|
|
331
331
|
class="view caption"
|
|
332
332
|
>
|
|
333
333
|
<span
|
|
334
|
-
class="text bold
|
|
334
|
+
class="text bold small overlay text"
|
|
335
335
|
>
|
|
336
336
|
svet
|
|
337
337
|
</span>
|
|
@@ -348,7 +348,7 @@ exports[`component:<Slider> prop:captions 1`] = `
|
|
|
348
348
|
class="view caption"
|
|
349
349
|
>
|
|
350
350
|
<span
|
|
351
|
-
class="text bold
|
|
351
|
+
class="text bold small overlay text"
|
|
352
352
|
>
|
|
353
353
|
mario2
|
|
354
354
|
</span>
|
|
@@ -581,7 +581,7 @@ exports[`component:<Slider> prop:onCounter 1`] = `
|
|
|
581
581
|
/>
|
|
582
582
|
</div>
|
|
583
583
|
<div
|
|
584
|
-
class="pressable
|
|
584
|
+
class="pressable overlay counter"
|
|
585
585
|
>
|
|
586
586
|
<span
|
|
587
587
|
class="icon action"
|
|
@@ -605,7 +605,7 @@ exports[`component:<Slider> prop:onCounter 1`] = `
|
|
|
605
605
|
</svg>
|
|
606
606
|
</span>
|
|
607
607
|
<span
|
|
608
|
-
class="text bold
|
|
608
|
+
class="text bold small"
|
|
609
609
|
>
|
|
610
610
|
6
|
|
611
611
|
</span>
|
|
@@ -11,7 +11,7 @@ var _helpers = require("../../helpers");
|
|
|
11
11
|
var _Primitive = require("../Primitive");
|
|
12
12
|
var _helpers2 = require("./helpers");
|
|
13
13
|
var _InputModule = _interopRequireDefault(require("./Input.module.css"));
|
|
14
|
-
var _excluded = ["autoResize", "disabled", "multiLine", "type", "onChange", "onEnter", "onError", "onLeave"];
|
|
14
|
+
var _excluded = ["autoResize", "disabled", "max", "multiLine", "type", "onChange", "onEnter", "onError", "onLeave"];
|
|
15
15
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
16
16
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
17
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -31,6 +31,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
31
31
|
var Input = function Input(_ref) {
|
|
32
32
|
var autoResize = _ref.autoResize,
|
|
33
33
|
disabled = _ref.disabled,
|
|
34
|
+
_ref$max = _ref.max,
|
|
35
|
+
max = _ref$max === void 0 ? 0 : _ref$max,
|
|
34
36
|
multiLine = _ref.multiLine,
|
|
35
37
|
_ref$type = _ref.type,
|
|
36
38
|
type = _ref$type === void 0 ? 'text' : _ref$type,
|
|
@@ -64,7 +66,7 @@ var Input = function Input(_ref) {
|
|
|
64
66
|
type: type,
|
|
65
67
|
value: value
|
|
66
68
|
})));
|
|
67
|
-
onChange && onChange(value !== undefined ? value : '', event);
|
|
69
|
+
onChange && onChange(value !== undefined ? type === 'number' && max ? Math.min(value, max) : value : '', event);
|
|
68
70
|
if (autoResize && multiLine) resize(value);
|
|
69
71
|
};
|
|
70
72
|
var resize = function resize(value) {
|
|
@@ -94,6 +96,7 @@ Input.displayName = 'Primitive:Input';
|
|
|
94
96
|
Input.propTypes = {
|
|
95
97
|
autoResize: _propTypes.default.bool,
|
|
96
98
|
disabled: _propTypes.default.bool,
|
|
99
|
+
max: _propTypes.default.number,
|
|
97
100
|
multiLine: _propTypes.default.bool,
|
|
98
101
|
name: _propTypes.default.string.isRequired,
|
|
99
102
|
type: _propTypes.default.string,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","names":["Input","autoResize","disabled","multiLine","type","onChange","onEnter","onError","onLeave","others","ref","useRef","useState","height","setHeight","useEffect","errors","getInputErrors","current","clientHeight","resize","value","handleChange","next","event","isNaN","parseValue","undefined","style","scrollHeight","React","createElement","Primitive","role","tag","test","target","onFocus","onBlur","className","styles","input","displayName","propTypes","PropTypes","bool","name","string","isRequired","func"],"sources":["../../../src/primitives/Input/Input.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { getInputErrors, styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { parseValue } from './helpers';\nimport style from './Input.module.css';\n\nconst Input = ({
|
|
1
|
+
{"version":3,"file":"Input.js","names":["Input","autoResize","disabled","max","multiLine","type","onChange","onEnter","onError","onLeave","others","ref","useRef","useState","height","setHeight","useEffect","errors","getInputErrors","current","clientHeight","resize","value","handleChange","next","event","isNaN","parseValue","undefined","Math","min","style","scrollHeight","React","createElement","Primitive","role","tag","test","target","onFocus","onBlur","className","styles","input","displayName","propTypes","PropTypes","bool","number","name","string","isRequired","func"],"sources":["../../../src/primitives/Input/Input.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { getInputErrors, styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { parseValue } from './helpers';\nimport style from './Input.module.css';\n\nconst Input = ({\n autoResize,\n disabled,\n max = 0,\n multiLine,\n type = 'text',\n onChange,\n onEnter,\n onError,\n onLeave,\n ...others\n}) => {\n const ref = useRef(null);\n\n const [height, setHeight] = useState();\n\n useEffect(() => {\n const errors = getInputErrors({ ...others, type });\n if (errors && onError) onError(errors);\n\n if (autoResize && multiLine) {\n setHeight(ref.current.clientHeight);\n resize(others.value);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleChange = (next = '', event) => {\n if (type === 'number' && isNaN(next)) return;\n const value = parseValue(next, type, others);\n\n onError && onError(getInputErrors({ ...others, type, value }));\n onChange && onChange(value !== undefined ? (type === 'number' && max ? Math.min(value, max) : value) : '', event);\n if (autoResize && multiLine) resize(value);\n };\n\n const resize = (value) => {\n if (!ref?.current) return;\n ref.current.style.height = `${value ? ref.current.scrollHeight : height}px`;\n };\n\n return React.createElement(Primitive, {\n ...others,\n disabled,\n ref: autoResize ? ref : undefined,\n role: others.role || 'input',\n tag: multiLine ? 'textarea' : 'input',\n test: undefined,\n type: !multiLine ? type : undefined,\n value: others.value !== undefined ? others.value : '',\n ...(!disabled\n ? {\n onChange: (event) => handleChange(event.target.value, event),\n onFocus: onEnter,\n onBlur: onLeave,\n }\n : {}),\n className: styles(style.input, autoResize && multiLine && style.autoResize, others.className),\n });\n};\n\nInput.displayName = 'Primitive:Input';\n\nInput.propTypes = {\n autoResize: PropTypes.bool,\n disabled: PropTypes.bool,\n max: PropTypes.number,\n multiLine: PropTypes.bool,\n name: PropTypes.string.isRequired,\n type: PropTypes.string,\n onChange: PropTypes.func,\n onEnter: PropTypes.func,\n onError: PropTypes.func,\n onLeave: PropTypes.func,\n};\n\nexport { Input };\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.stories.js","names":["title","Story","props","useState","value","setValue","handleChange","next","others","console","log","storyName","args","autoResize","disabled","multiLine","name","placeholder","type","onEnter","onError","onLeave","testId","style","argTypes","options","control","defaultValue"],"sources":["../../../src/primitives/Input/Input.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Input } from './Input';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => {\n const [value, setValue] = useState();\n\n const handleChange = (next, ...others) => {\n setValue(next);\n console.log('<Input>::onChange', next, ...others);\n };\n\n return <Input {...props} value={value} onChange={handleChange} />;\n};\n\nStory.storyName = 'Input';\n\nStory.args = {\n autoResize: false,\n disabled: false,\n multiLine: false,\n name: 'Input',\n placeholder: 'placeholder',\n type: 'text',\n onEnter: (...props) => console.log('<Select>::onEnter', ...props),\n onError: (...props) => console.log('<Select>::onError', ...props),\n onLeave: (...props) => console.log('<Select>::onLeave', ...props),\n // inherited properties\n testId: 'test-story',\n style: {},\n};\n\nStory.argTypes = {\n type: {\n options: ['text', 'password', 'number', 'email', 'date'],\n control: { type: 'select' },\n defaultValue: 'text',\n },\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA0B,IAAAC,eAAQ,GAAE;IAAA;IAA7BC,KAAK;IAAEC,QAAQ;EAEtB,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,IAAI,EAAgB;IAAA;IACxCF,QAAQ,CAACE,IAAI,CAAC;IAAC,kCADcC,MAAM;MAANA,MAAM;IAAA;IAEnC,YAAAC,OAAO,EAACC,GAAG,kBAAC,mBAAmB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACnD,CAAC;EAED,oBAAO,6BAAC,YAAK,eAAKN,KAAK;IAAE,KAAK,EAAEE,KAAM;IAAC,QAAQ,EAAEE;EAAa,GAAG;AACnE,CAAC;AAAC;AAEFL,KAAK,CAACU,SAAS,GAAG,OAAO;AAEzBV,KAAK,CAACW,IAAI,GAAG;EACXC,UAAU,EAAE,KAAK;EACjBC,QAAQ,EAAE,KAAK;EACfC,SAAS,EAAE,KAAK;EAChBC,IAAI,EAAE,OAAO;EACbC,WAAW,EAAE,aAAa;EAC1BC,IAAI,EAAE,MAAM;EACZC,OAAO,EAAE;IAAA;IAAA,
|
|
1
|
+
{"version":3,"file":"Input.stories.js","names":["title","Story","props","useState","value","setValue","handleChange","next","others","console","log","storyName","args","autoResize","disabled","max","multiLine","name","placeholder","type","onEnter","onError","onLeave","testId","style","argTypes","options","control","defaultValue"],"sources":["../../../src/primitives/Input/Input.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Input } from './Input';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => {\n const [value, setValue] = useState();\n\n const handleChange = (next, ...others) => {\n setValue(next);\n console.log('<Input>::onChange', next, ...others);\n };\n\n return <Input {...props} value={value} onChange={handleChange} />;\n};\n\nStory.storyName = 'Input';\n\nStory.args = {\n autoResize: false,\n disabled: false,\n max: 100,\n multiLine: false,\n name: 'Input',\n placeholder: 'placeholder',\n type: 'text',\n onEnter: (...props) => console.log('<Select>::onEnter', ...props),\n onError: (...props) => console.log('<Select>::onError', ...props),\n onLeave: (...props) => console.log('<Select>::onLeave', ...props),\n // inherited properties\n testId: 'test-story',\n style: {},\n};\n\nStory.argTypes = {\n type: {\n options: ['text', 'password', 'number', 'email', 'date'],\n control: { type: 'select' },\n defaultValue: 'text',\n },\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA0B,IAAAC,eAAQ,GAAE;IAAA;IAA7BC,KAAK;IAAEC,QAAQ;EAEtB,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,IAAI,EAAgB;IAAA;IACxCF,QAAQ,CAACE,IAAI,CAAC;IAAC,kCADcC,MAAM;MAANA,MAAM;IAAA;IAEnC,YAAAC,OAAO,EAACC,GAAG,kBAAC,mBAAmB,EAAEH,IAAI,SAAKC,MAAM,EAAC;EACnD,CAAC;EAED,oBAAO,6BAAC,YAAK,eAAKN,KAAK;IAAE,KAAK,EAAEE,KAAM;IAAC,QAAQ,EAAEE;EAAa,GAAG;AACnE,CAAC;AAAC;AAEFL,KAAK,CAACU,SAAS,GAAG,OAAO;AAEzBV,KAAK,CAACW,IAAI,GAAG;EACXC,UAAU,EAAE,KAAK;EACjBC,QAAQ,EAAE,KAAK;EACfC,GAAG,EAAE,GAAG;EACRC,SAAS,EAAE,KAAK;EAChBC,IAAI,EAAE,OAAO;EACbC,WAAW,EAAE,aAAa;EAC1BC,IAAI,EAAE,MAAM;EACZC,OAAO,EAAE;IAAA;IAAA,mCAAIlB,KAAK;MAALA,KAAK;IAAA;IAAA,OAAK,aAAAO,OAAO,EAACC,GAAG,mBAAC,mBAAmB,SAAKR,KAAK,EAAC;EAAA;EACjEmB,OAAO,EAAE;IAAA;IAAA,mCAAInB,KAAK;MAALA,KAAK;IAAA;IAAA,OAAK,aAAAO,OAAO,EAACC,GAAG,mBAAC,mBAAmB,SAAKR,KAAK,EAAC;EAAA;EACjEoB,OAAO,EAAE;IAAA;IAAA,mCAAIpB,KAAK;MAALA,KAAK;IAAA;IAAA,OAAK,aAAAO,OAAO,EAACC,GAAG,mBAAC,mBAAmB,SAAKR,KAAK,EAAC;EAAA;EACjE;EACAqB,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDvB,KAAK,CAACwB,QAAQ,GAAG;EACfN,IAAI,EAAE;IACJO,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC;IACxDC,OAAO,EAAE;MAAER,IAAI,EAAE;IAAS,CAAC;IAC3BS,YAAY,EAAE;EAChB;AACF,CAAC"}
|
|
@@ -34,6 +34,17 @@ exports[`primitive:<Input> prop:disabled 1`] = `
|
|
|
34
34
|
</DocumentFragment>
|
|
35
35
|
`;
|
|
36
36
|
|
|
37
|
+
exports[`primitive:<Input> prop:max 1`] = `
|
|
38
|
+
<DocumentFragment>
|
|
39
|
+
<input
|
|
40
|
+
class="input"
|
|
41
|
+
name="name"
|
|
42
|
+
type="number"
|
|
43
|
+
value=""
|
|
44
|
+
/>
|
|
45
|
+
</DocumentFragment>
|
|
46
|
+
`;
|
|
47
|
+
|
|
37
48
|
exports[`primitive:<Input> prop:multiLine && prop:autoResize 1`] = `
|
|
38
49
|
<DocumentFragment>
|
|
39
50
|
<textarea
|
|
@@ -252,9 +252,10 @@
|
|
|
252
252
|
--mirai-ui-progress-motion: calc(var(--mirai-ui-motion-expand) * 3);
|
|
253
253
|
|
|
254
254
|
/* Slider */
|
|
255
|
-
--mirai-ui-slider-
|
|
255
|
+
--mirai-ui-slider-button: var(--mirai-ui-base);
|
|
256
|
+
--mirai-ui-slider-button-icon: var(--mirai-ui-content);
|
|
256
257
|
--mirai-ui-slider-overlay: rgba(0, 0, 0, 0.66);
|
|
257
|
-
--mirai-ui-slider-color: var(--mirai-ui-base);
|
|
258
|
+
--mirai-ui-slider-overlay-color: var(--mirai-ui-base);
|
|
258
259
|
--mirai-ui-slider-border-radius: var(--mirai-ui-border-radius);
|
|
259
260
|
|
|
260
261
|
/* Table */
|