mimir-ui-kit 1.27.4 → 1.27.6
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +62 -62
- package/dist/{Input-6mudFqTb.js → Input-ChCIy5oY.js} +29 -22
- package/dist/assets/Input.css +1 -1
- package/dist/assets/TextArea.css +1 -1
- package/dist/components/DatePicker/DatePicker.js +13 -5
- package/dist/components/DatePicker/DatePickerModal.js +7 -5
- package/dist/components/Input/Input.js +1 -1
- package/dist/components/Input/index.js +1 -1
- package/dist/components/InputPassword/InputPassword.js +1 -1
- package/dist/components/InputPhoneNumber/InputPhoneNumber.js +1 -1
- package/dist/components/OtpInput/OtpInput.js +1 -1
- package/dist/components/SelectSearch/SelectSearch.js +1 -1
- package/dist/components/TextArea/TextArea.js +18 -11
- package/dist/components/index.js +1 -1
- package/dist/index.js +3 -1
- package/dist/utils/formating/Date.d.ts +1 -0
- package/dist/utils/formating/Date.js +7 -1
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.js +3 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,62 +1,62 @@
|
|
|
1
|
-
# Mimir-ui
|
|
2
|
-
|
|
3
|
-
## Установка и запуск проекта
|
|
4
|
-
|
|
5
|
-
1. Установите зависимости:
|
|
6
|
-
```bash
|
|
7
|
-
npm install
|
|
8
|
-
```
|
|
9
|
-
2. Запуск storybook
|
|
10
|
-
```bash
|
|
11
|
-
npm run storybook
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
## Сборка проекта
|
|
15
|
-
|
|
16
|
-
1. Скрипт для сборки
|
|
17
|
-
```bash
|
|
18
|
-
npm run build
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
## Создание нового компонента
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
npm run create-component <ComponentName>
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
## Поднятие версии для публикации на npm
|
|
28
|
-
|
|
29
|
-
Для поднятия версии пакета перед публикацией на npm используем следующие скрипты:
|
|
30
|
-
|
|
31
|
-
1. `patch`: Этот скрипт увеличивает версию пакета на один патч (например, с версии 1.0.0 до 1.0.1). Он автоматически обновляет версию в файле package.json и создает коммит с обновленной версией.
|
|
32
|
-
|
|
33
|
-
```bash
|
|
34
|
-
npm version patch
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
2. `minor`: Этот скрипт увеличивает версию пакета на один минорный уровень (например, с версии 1.0.0 до 1.1.0). Также обновляет версию в package.json и создает коммит.
|
|
38
|
-
```bash
|
|
39
|
-
npm version minor
|
|
40
|
-
```
|
|
41
|
-
3. `major`: Этот скрипт увеличивает версию пакета на один мажорный уровень (например, с версии 1.0.0 до 2.0.0). Он также обновляет версию в package.json и создает коммит.
|
|
42
|
-
```bash
|
|
43
|
-
npm version major
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
## Публикация на npm
|
|
47
|
-
|
|
48
|
-
1. Скрипт для публикации на npm:
|
|
49
|
-
```bash
|
|
50
|
-
npm publish
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
## Ручная Генерация иконок
|
|
54
|
-
|
|
55
|
-
1. Экспортируем с фигмы иконку.
|
|
56
|
-
2. Добавляем ее в папку svgs.
|
|
57
|
-
3. Запускаем скрипт:
|
|
58
|
-
```bash
|
|
59
|
-
npm run icons
|
|
60
|
-
```
|
|
61
|
-
4. Смотрим в папку `icons/components`
|
|
62
|
-
5. Готово.
|
|
1
|
+
# Mimir-ui
|
|
2
|
+
|
|
3
|
+
## Установка и запуск проекта
|
|
4
|
+
|
|
5
|
+
1. Установите зависимости:
|
|
6
|
+
```bash
|
|
7
|
+
npm install
|
|
8
|
+
```
|
|
9
|
+
2. Запуск storybook
|
|
10
|
+
```bash
|
|
11
|
+
npm run storybook
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Сборка проекта
|
|
15
|
+
|
|
16
|
+
1. Скрипт для сборки
|
|
17
|
+
```bash
|
|
18
|
+
npm run build
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Создание нового компонента
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm run create-component <ComponentName>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Поднятие версии для публикации на npm
|
|
28
|
+
|
|
29
|
+
Для поднятия версии пакета перед публикацией на npm используем следующие скрипты:
|
|
30
|
+
|
|
31
|
+
1. `patch`: Этот скрипт увеличивает версию пакета на один патч (например, с версии 1.0.0 до 1.0.1). Он автоматически обновляет версию в файле package.json и создает коммит с обновленной версией.
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
npm version patch
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
2. `minor`: Этот скрипт увеличивает версию пакета на один минорный уровень (например, с версии 1.0.0 до 1.1.0). Также обновляет версию в package.json и создает коммит.
|
|
38
|
+
```bash
|
|
39
|
+
npm version minor
|
|
40
|
+
```
|
|
41
|
+
3. `major`: Этот скрипт увеличивает версию пакета на один мажорный уровень (например, с версии 1.0.0 до 2.0.0). Он также обновляет версию в package.json и создает коммит.
|
|
42
|
+
```bash
|
|
43
|
+
npm version major
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Публикация на npm
|
|
47
|
+
|
|
48
|
+
1. Скрипт для публикации на npm:
|
|
49
|
+
```bash
|
|
50
|
+
npm publish
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Ручная Генерация иконок
|
|
54
|
+
|
|
55
|
+
1. Экспортируем с фигмы иконку.
|
|
56
|
+
2. Добавляем ее в папку svgs.
|
|
57
|
+
3. Запускаем скрипт:
|
|
58
|
+
```bash
|
|
59
|
+
npm run icons
|
|
60
|
+
```
|
|
61
|
+
4. Смотрим в папку `icons/components`
|
|
62
|
+
5. Готово.
|
|
@@ -5,36 +5,37 @@ import { EInputVariant } from "./components/Input/constants.js";
|
|
|
5
5
|
import { useMergeRefs } from "./hooks/useMergeRefs/useMergeRefs.js";
|
|
6
6
|
import { Icon } from "./icons/Icon.js";
|
|
7
7
|
import { Button } from "./components/Button/Button.js";
|
|
8
|
-
import './assets/Input.css';const label = "
|
|
9
|
-
const input = "
|
|
10
|
-
const focused = "
|
|
11
|
-
const disabled = "
|
|
12
|
-
const clear = "
|
|
13
|
-
const s = "
|
|
14
|
-
const m = "
|
|
15
|
-
const l = "
|
|
16
|
-
const success = "
|
|
17
|
-
const alarm = "
|
|
18
|
-
const error = "
|
|
8
|
+
import './assets/Input.css';const label = "_label_ed5ll_27";
|
|
9
|
+
const input = "_input_ed5ll_3";
|
|
10
|
+
const focused = "_focused_ed5ll_82";
|
|
11
|
+
const disabled = "_disabled_ed5ll_88";
|
|
12
|
+
const clear = "_clear_ed5ll_121";
|
|
13
|
+
const s = "_s_ed5ll_169";
|
|
14
|
+
const m = "_m_ed5ll_184";
|
|
15
|
+
const l = "_l_ed5ll_27";
|
|
16
|
+
const success = "_success_ed5ll_241";
|
|
17
|
+
const alarm = "_alarm_ed5ll_259";
|
|
18
|
+
const error = "_error_ed5ll_277";
|
|
19
19
|
const cls = {
|
|
20
|
-
"input-wrapper": "_input-
|
|
20
|
+
"input-wrapper": "_input-wrapper_ed5ll_3",
|
|
21
|
+
"required-mark": "_required-mark_ed5ll_17",
|
|
21
22
|
label,
|
|
22
|
-
"has-left-slot": "_has-left-
|
|
23
|
-
"active-label": "_active-
|
|
23
|
+
"has-left-slot": "_has-left-slot_ed5ll_42",
|
|
24
|
+
"active-label": "_active-label_ed5ll_45",
|
|
24
25
|
input,
|
|
25
|
-
"has-right-slot": "_has-right-
|
|
26
|
+
"has-right-slot": "_has-right-slot_ed5ll_79",
|
|
26
27
|
focused,
|
|
27
|
-
"has-label": "_has-
|
|
28
|
+
"has-label": "_has-label_ed5ll_85",
|
|
28
29
|
disabled,
|
|
29
|
-
"left-slot": "_left-
|
|
30
|
-
"right-slot": "_right-
|
|
31
|
-
"addon-icon": "_addon-
|
|
30
|
+
"left-slot": "_left-slot_ed5ll_94",
|
|
31
|
+
"right-slot": "_right-slot_ed5ll_95",
|
|
32
|
+
"addon-icon": "_addon-icon_ed5ll_117",
|
|
32
33
|
clear,
|
|
33
34
|
s,
|
|
34
35
|
m,
|
|
35
36
|
l,
|
|
36
|
-
"default-gray": "_default-
|
|
37
|
-
"default-white": "_default-
|
|
37
|
+
"default-gray": "_default-gray_ed5ll_214",
|
|
38
|
+
"default-white": "_default-white_ed5ll_226",
|
|
38
39
|
success,
|
|
39
40
|
alarm,
|
|
40
41
|
error
|
|
@@ -92,6 +93,7 @@ const Input = memo(
|
|
|
92
93
|
leftAddon,
|
|
93
94
|
size = "m",
|
|
94
95
|
numbersOnly,
|
|
96
|
+
required,
|
|
95
97
|
maxLength,
|
|
96
98
|
...otherProps
|
|
97
99
|
} = props;
|
|
@@ -173,7 +175,10 @@ const Input = memo(
|
|
|
173
175
|
wrapperClassName
|
|
174
176
|
),
|
|
175
177
|
children: [
|
|
176
|
-
label2 && /* @__PURE__ */
|
|
178
|
+
label2 && /* @__PURE__ */ jsxs("label", { htmlFor: id, className: labelClassNames, children: [
|
|
179
|
+
label2,
|
|
180
|
+
required && (withValue || isFocused) && /* @__PURE__ */ jsx("span", { className: cls["required-mark"] })
|
|
181
|
+
] }),
|
|
177
182
|
currentLeftAddon && /* @__PURE__ */ jsx(
|
|
178
183
|
"span",
|
|
179
184
|
{
|
|
@@ -198,6 +203,7 @@ const Input = memo(
|
|
|
198
203
|
onChange: handleChange,
|
|
199
204
|
maxLength,
|
|
200
205
|
disabled: disabled2,
|
|
206
|
+
required,
|
|
201
207
|
...otherProps
|
|
202
208
|
}
|
|
203
209
|
),
|
|
@@ -211,6 +217,7 @@ const Input = memo(
|
|
|
211
217
|
children: currentRightAddon
|
|
212
218
|
}
|
|
213
219
|
),
|
|
220
|
+
required && !withValue && !isFocused && /* @__PURE__ */ jsx("span", { className: cls["required-mark"] }),
|
|
214
221
|
withClearButton && withValue && /* @__PURE__ */ jsx(
|
|
215
222
|
Button,
|
|
216
223
|
{
|
package/dist/assets/Input.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._input-
|
|
1
|
+
._input-wrapper_ed5ll_3{--input-border-radius-l: 8px;--input-border-radius-m: 6px;--input-border-radius-s: 6px;--input-required-mark-size: 8px;position:relative;display:flex;padding:0 var(--space-m);overflow:hidden;background-color:var(--input-bg-color);border-bottom:1px solid transparent;border-radius:var(--input-border-radius);transition:background-color .2s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease,fill .15s ease}._input-wrapper_ed5ll_3 ._required-mark_ed5ll_17{display:block;flex:0 0 var(--input-required-mark-size);align-self:center;width:var(--input-required-mark-size);height:var(--input-required-mark-size);margin-left:var(--space-m);background-color:var(--citrine-normal);border-radius:50%}._input-wrapper_ed5ll_3 ._label_ed5ll_27{--input-required-mark-size: 6px;position:absolute;top:calc(var(--input-height) / 2 - var(--input-font-size) / 2);left:var(--space-m);z-index:1;display:flex;color:var(--label-color);font-size:var(--input-font-size);white-space:nowrap;-moz-column-gap:var(--space-xs);column-gap:var(--space-xs);transform-origin:left center;transition:transform .15s ease-out,left .15s ease-out,color .15s ease-out;pointer-events:none}._input-wrapper_ed5ll_3 ._label_ed5ll_27._has-left-slot_ed5ll_42{left:calc(var(--space-m) + var(--icon-size) + var(--clear-button-mg))}._input-wrapper_ed5ll_3 ._label_ed5ll_27._active-label_ed5ll_45{transform:scale(var(--label-scaled)) translateY(calc(var(--input-font-size) * -1))}._input-wrapper_ed5ll_3 ._label_ed5ll_27._active-label_ed5ll_45._has-left-slot_ed5ll_42{left:calc(var(--space-m) + var(--icon-size) + var(--space-s));transform:scale(var(--label-scaled)) translate(calc((var(--space-m) + var(--left-addon-position)) * 2 * -1),calc(var(--input-font-size) * -1))}._input-wrapper_ed5ll_3 ._label_ed5ll_27._active-label_ed5ll_45 ._required-mark_ed5ll_17{margin-left:0;transform:scale(1.7)}._input-wrapper_ed5ll_3 ._input_ed5ll_3{position:relative;display:block;flex:1;width:100%;min-width:0;height:var(--input-height);color:var(--dark-text);font-size:var(--input-font-size);font-family:var(--font-inter);line-height:var(--input-line-height);letter-spacing:-.42px;background-color:inherit;border-radius:var(--input-border-radius);outline:none;cursor:var(--input-cursor);transition:border-color .15s ease,box-shadow .15s ease,color .15s ease,fill .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-feature-settings:"zero"}._input-wrapper_ed5ll_3 ._input_ed5ll_3._has-left-slot_ed5ll_42{padding-left:0}._input-wrapper_ed5ll_3 ._input_ed5ll_3._has-right-slot_ed5ll_79{padding-right:0}._input-wrapper_ed5ll_3 ._input_ed5ll_3._focused_ed5ll_82{padding-top:0}._input-wrapper_ed5ll_3 ._input_ed5ll_3._has-label_ed5ll_85{padding-top:var(--input-padding-position)}._input-wrapper_ed5ll_3 ._input_ed5ll_3._disabled_ed5ll_88{color:var(--light-text)}._input-wrapper_ed5ll_3 ._input_ed5ll_3._disabled_ed5ll_88:hover,._input-wrapper_ed5ll_3 ._input_ed5ll_3._disabled_ed5ll_88:active,._input-wrapper_ed5ll_3 ._input_ed5ll_3._disabled_ed5ll_88:focus{color:var(--light-text)}._input-wrapper_ed5ll_3 ._left-slot_ed5ll_94,._input-wrapper_ed5ll_3 ._right-slot_ed5ll_95{display:flex;align-items:center;height:var(--input-height);color:var(--black-60);font-size:var(--input-font-size);font-family:var(--font-inter);line-height:var(--input-line-height);background-color:inherit;transition:padding-top .15s ease-out}._input-wrapper_ed5ll_3 ._left-slot_ed5ll_94._focused_ed5ll_82._has-label_ed5ll_85,._input-wrapper_ed5ll_3 ._right-slot_ed5ll_95._focused_ed5ll_82._has-label_ed5ll_85{padding-top:var(--input-padding-position)}._input-wrapper_ed5ll_3 ._left-slot_ed5ll_94{justify-content:flex-end;margin-right:var(--clear-button-mg)}._input-wrapper_ed5ll_3 ._right-slot_ed5ll_95{margin-left:var(--clear-button-mg)}._input-wrapper_ed5ll_3 ._addon-icon_ed5ll_117{width:var(--icon-size);height:var(--icon-size)}._input-wrapper_ed5ll_3 ._clear_ed5ll_121{align-self:center;width:16px;height:16px;margin-left:var(--clear-button-mg)}._input-wrapper_ed5ll_3 svg{color:currentcolor;fill:currentcolor}._input-wrapper_ed5ll_3:hover ._label_ed5ll_27,._input-wrapper_ed5ll_3:focus-within ._label_ed5ll_27{color:var(--label-color)}._input-wrapper_ed5ll_3:hover{background-color:var(--input-bg-color-hover)}._input-wrapper_ed5ll_3:focus-within{background-color:var(--input-bg-color-active);border-bottom:1px solid var(--input-bottom-color-active)}._input-wrapper_ed5ll_3._focused_ed5ll_82{color:var(--input-color-active);background-color:var(--input-bg-color-active)}._input-wrapper_ed5ll_3._focused_ed5ll_82:hover{background-color:var(--input-bg-color-hover)}._input-wrapper_ed5ll_3._disabled_ed5ll_88{--input-cursor: not-allowed;--label-color: var(--light-text);color:var(--light-text);background-color:var(--black-20);border-bottom:1px solid transparent}._input-wrapper_ed5ll_3._disabled_ed5ll_88:hover,._input-wrapper_ed5ll_3._disabled_ed5ll_88:active,._input-wrapper_ed5ll_3._disabled_ed5ll_88:focus{--label-color: var(--light-text);color:var(--light-text);background-color:var(--black-20);border-bottom:1px solid transparent;box-shadow:none}._input-wrapper_ed5ll_3._disabled_ed5ll_88::-moz-placeholder{color:var(--light-text)}._input-wrapper_ed5ll_3._disabled_ed5ll_88::placeholder{color:var(--light-text)}._input-wrapper_ed5ll_3._disabled_ed5ll_88:hover::-moz-placeholder{color:var(--light-text)}._input-wrapper_ed5ll_3._disabled_ed5ll_88:hover::placeholder{color:var(--light-text)}._s_ed5ll_169{--input-height: var(--space-xxl);--input-font-size: var(--control-text-size-m);--input-line-height: var(--line-height-text-xs);--input-padding: var(--space-m);--input-padding-position: var(--space-1xs);--input-border-radius: var(--input-border-radius-s);--label-font-size: var(--size-text-xs);--label-scaled: .85;--label-spacing: var(--space-1xs);--clear-button-mg: var(--space-2xs);--icon-size: 16px;--left-addon-position: 0px}._m_ed5ll_184{--input-height: var(--space-4xl);--input-font-size: var(--control-text-size-l);--input-line-height: var(--line-height-text-s1);--input-padding: var(--space-m);--input-padding-position: var(--space-xs);--input-border-radius: var(--input-border-radius-m);--label-font-size: var(--size-text-s);--label-scaled: .75;--label-spacing: var(--space-xs);--clear-button-mg: var(--space-2xs);--icon-size: 16px;--left-addon-position: var(--space-3xs)}._l_ed5ll_27{--input-height: var(--space-4xxl);--input-font-size: var(--control-text-size-2xl);--input-line-height: var(--line-height-text-l);--input-padding: var(--space-m);--input-padding-position: var(--space-s);--input-border-radius: var(--input-border-radius-l);--label-font-size: var(--size-text-s);--label-scaled: .6;--label-spacing: var(--space-s);--clear-button-mg: var(--space-xs);--icon-size: 24px;--left-addon-position: var(--space-s)}._default-gray_ed5ll_214{--input-bg-color: var(--black-5);--input-bg-color-active: var(--black-10);--input-bg-color-hover: var(--black-10);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--citrine-normal);--label-color: var(--black-60)}._default-white_ed5ll_226{--input-bg-color: var(--white);--input-bg-color-hover: var(--black-10);--input-bg-color-active: var(--white);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--citrine-normal);--label-color: var(--black-60)}._default-white_ed5ll_226:hover{--label-color: var(--dark-text)}._success_ed5ll_241{--input-bg-color: var(--success-normal);--input-bg-color-hover: var(--success-bg-hover);--input-bg-color-active: var(--success-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--success-normal);--label-color: var(--black-60)}._success_ed5ll_241::-moz-placeholder{color:var(--input-color)}._success_ed5ll_241::placeholder{color:var(--input-color)}._success_ed5ll_241:hover::-moz-placeholder{color:var(--input-color)}._success_ed5ll_241:hover::placeholder{color:var(--input-color)}._alarm_ed5ll_259{--input-bg-color: var(--alarm-normal);--input-bg-color-hover: var(--alarm-bg-hover);--input-bg-color-active: var(--alarm-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--alarm-normal);--label-color: var(--black-60)}._alarm_ed5ll_259::-moz-placeholder{color:var(--input-color)}._alarm_ed5ll_259::placeholder{color:var(--input-color)}._alarm_ed5ll_259:hover::-moz-placeholder{color:var(--input-color)}._alarm_ed5ll_259:hover::placeholder{color:var(--input-color)}._error_ed5ll_277{--input-bg-color: var(--error-normal);--input-bg-color-hover: var(--error-bg-hover);--input-bg-color-active: var(--error-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--error-normal);--label-color: var(--black-60)}._error_ed5ll_277::-moz-placeholder{color:var(--input-color)}._error_ed5ll_277::placeholder{color:var(--input-color)}._error_ed5ll_277:hover::-moz-placeholder{color:var(--input-color)}._error_ed5ll_277:hover::placeholder{color:var(--input-color)}
|
package/dist/assets/TextArea.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._textarea-
|
|
1
|
+
._textarea-wrapper_1axu4_2 ._textarea_1axu4_2{min-height:var(--textarea-height);padding-top:var(--textarea-space)!important;padding-bottom:var(--textarea-space);resize:none}._textarea-wrapper_1axu4_2 ._textarea_1axu4_2._has-label_1axu4_8{padding-top:var(--textarea-top-space)!important}._textarea-wrapper_1axu4_2 ._required-mark_1axu4_11{display:block;flex:0 0 var(--input-required-mark-size);align-self:flex-start;width:var(--input-required-mark-size);height:var(--input-required-mark-size);margin-top:var(--textarea-space);margin-left:var(--space-m);background-color:var(--citrine-normal);border-radius:50%}._textarea-wrapper_1axu4_2 ._label_1axu4_22{position:absolute;top:calc(var(--input-height) / 2 - var(--input-font-size) / 2);left:var(--space-m);z-index:1;display:flex;color:var(--label-color);font-size:var(--input-font-size);white-space:nowrap;-moz-column-gap:var(--space-xs);column-gap:var(--space-xs);transform-origin:left center;transition:transform .15s ease-out,left .15s ease-out,color .15s ease-out;-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none}._textarea-wrapper_1axu4_2 ._label_1axu4_22._has-left-slot_1axu4_37{left:calc(var(--space-m) + var(--icon-size) + var(--clear-button-mg))}._textarea-wrapper_1axu4_2 ._label_1axu4_22._active-label_1axu4_40{transform:scale(var(--label-scaled)) translateY(calc(var(--textarea-transform-label) * -1))}._textarea-wrapper_1axu4_2 ._label_1axu4_22._active-label_1axu4_40._has-left-slot_1axu4_37{left:calc(var(--space-m) + var(--icon-size) + var(--space-s));transform:scale(var(--label-scaled)) translate(calc((var(--space-m) + var(--left-addon-position)) * 2 * -1),calc(var(--textarea-transform-label) * -1))}._textarea-wrapper_1axu4_2 ._label_1axu4_22._active-label_1axu4_40 ._required-mark_1axu4_11{align-self:center;margin-top:0;margin-left:0;transform:scale(1.7)}._s_1axu4_54{--textarea-space: var(--space-2s);--textarea-top-space: var(--space-l);--textarea-transform-label: var(--space-xss);--textarea-height: 76px;--textarea-padding: var(--space-xs) var(--space-s)}._m_1axu4_62{--textarea-space: var(--space-2s);--textarea-top-space: var(--space-l);--textarea-transform-label: var(--space-s);--textarea-height: 88px;--textarea-padding: var(--space-xs) var(--space-s)}._l_1axu4_22{--textarea-space: var(--space-2m);--textarea-top-space: 25px;--textarea-transform-label: var(--space-m);--textarea-height: 120px;--textarea-padding: var(--space-2m)}
|
|
@@ -8,8 +8,9 @@ import { YearPickerModal } from "./YearPickerModal.js";
|
|
|
8
8
|
import { useClickOutside } from "../../hooks/useClickOutside/useClickOutside.js";
|
|
9
9
|
import { formating } from "../../utils/index.js";
|
|
10
10
|
import { Button } from "../Button/Button.js";
|
|
11
|
-
import { I as Input } from "../../Input-
|
|
11
|
+
import { I as Input } from "../../Input-ChCIy5oY.js";
|
|
12
12
|
import { EInputVariant } from "../Input/constants.js";
|
|
13
|
+
import { parseDate } from "../../utils/formating/Date.js";
|
|
13
14
|
const DatePicker = memo(
|
|
14
15
|
forwardRef(
|
|
15
16
|
({
|
|
@@ -26,9 +27,12 @@ const DatePicker = memo(
|
|
|
26
27
|
}, ref) => {
|
|
27
28
|
const [isActive, setActive] = useState(false);
|
|
28
29
|
const [pickerType, setType] = useState(type);
|
|
29
|
-
const [date, setDate] = useState(
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
const [date, setDate] = useState(() => {
|
|
31
|
+
if (value) {
|
|
32
|
+
return parseDate(value);
|
|
33
|
+
}
|
|
34
|
+
return /* @__PURE__ */ new Date();
|
|
35
|
+
});
|
|
32
36
|
const [isError, setError] = useState(error);
|
|
33
37
|
useEffect(() => {
|
|
34
38
|
setError(error);
|
|
@@ -45,6 +49,10 @@ const DatePicker = memo(
|
|
|
45
49
|
if (!disabled) setActive(true);
|
|
46
50
|
};
|
|
47
51
|
const onDate = (d) => {
|
|
52
|
+
if (!isNaN(d.getTime())) {
|
|
53
|
+
setDate(d);
|
|
54
|
+
onChangeValue == null ? void 0 : onChangeValue({ value: d, name });
|
|
55
|
+
}
|
|
48
56
|
if (pickerType === "years") {
|
|
49
57
|
if (type === "years") {
|
|
50
58
|
setActive(false);
|
|
@@ -81,7 +89,7 @@ const DatePicker = memo(
|
|
|
81
89
|
size,
|
|
82
90
|
type: "text",
|
|
83
91
|
variant: isError ? EInputVariant.Error : variant,
|
|
84
|
-
value: formating.Date(date, "dd.mm.yy"),
|
|
92
|
+
value: !isNaN(date.getTime()) ? formating.Date(date, "dd.mm.yy") : "",
|
|
85
93
|
...props
|
|
86
94
|
}
|
|
87
95
|
)
|
|
@@ -5,6 +5,7 @@ import { c as cls } from "../../styles.module-BZXDqssF.js";
|
|
|
5
5
|
import { Icon } from "../../icons/Icon.js";
|
|
6
6
|
import { formating } from "../../utils/index.js";
|
|
7
7
|
import { Button } from "../Button/Button.js";
|
|
8
|
+
import { parseDate } from "../../utils/formating/Date.js";
|
|
8
9
|
function DatePickerModal({
|
|
9
10
|
date,
|
|
10
11
|
onChangeValue,
|
|
@@ -12,9 +13,10 @@ function DatePickerModal({
|
|
|
12
13
|
before,
|
|
13
14
|
onType
|
|
14
15
|
}) {
|
|
16
|
+
var _a;
|
|
15
17
|
const field = useRef(null);
|
|
16
|
-
const _current =
|
|
17
|
-
const _selecte =
|
|
18
|
+
const _current = parseDate(date);
|
|
19
|
+
const _selecte = parseDate(date);
|
|
18
20
|
const current = {
|
|
19
21
|
y: _current.getFullYear(),
|
|
20
22
|
d: _current.getDate(),
|
|
@@ -29,11 +31,11 @@ function DatePickerModal({
|
|
|
29
31
|
const [month, setMonth] = useState({ y: selecte.y, m: selecte.m });
|
|
30
32
|
const blockWidth = 368;
|
|
31
33
|
useEffect(() => {
|
|
32
|
-
var
|
|
34
|
+
var _a2, _b, _c, _d;
|
|
33
35
|
const windowHeight = window.innerHeight;
|
|
34
36
|
const windowWidth = window.innerWidth;
|
|
35
37
|
if (field.current !== null) {
|
|
36
|
-
const inputWidth = ((_b = (
|
|
38
|
+
const inputWidth = ((_b = (_a2 = field == null ? void 0 : field.current) == null ? void 0 : _a2.parentElement) == null ? void 0 : _b.offsetWidth) || 0;
|
|
37
39
|
const inputHeight = (_d = (_c = field == null ? void 0 : field.current) == null ? void 0 : _c.parentElement) == null ? void 0 : _d.offsetHeight;
|
|
38
40
|
const inputPosition = field.current.getBoundingClientRect();
|
|
39
41
|
const calendarSize = field.current.offsetHeight;
|
|
@@ -130,7 +132,7 @@ function DatePickerModal({
|
|
|
130
132
|
}
|
|
131
133
|
),
|
|
132
134
|
/* @__PURE__ */ jsxs("div", { className: cls["d"], onClick: () => onType == null ? void 0 : onType("months"), children: [
|
|
133
|
-
formating.Month(month.m).name,
|
|
135
|
+
((_a = formating.Month(month.m)) == null ? void 0 : _a.name) || "Неизвестный месяц",
|
|
134
136
|
"’",
|
|
135
137
|
month.y.toString().slice(-2),
|
|
136
138
|
/* @__PURE__ */ jsx(Icon, { iconName: "DropdownArrowBottom16px" })
|
|
@@ -2,7 +2,7 @@ import "react/jsx-runtime";
|
|
|
2
2
|
import "../../index-CweZ_OcN.js";
|
|
3
3
|
import "react";
|
|
4
4
|
import "./constants.js";
|
|
5
|
-
import { I } from "../../Input-
|
|
5
|
+
import { I } from "../../Input-ChCIy5oY.js";
|
|
6
6
|
import "../../hooks/useMergeRefs/useMergeRefs.js";
|
|
7
7
|
import "../../icons/Icon.js";
|
|
8
8
|
import "../Button/Button.js";
|
|
@@ -3,7 +3,7 @@ import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
|
3
3
|
import { memo, forwardRef, useState } from "react";
|
|
4
4
|
import { Icon } from "../../icons/Icon.js";
|
|
5
5
|
import { Button } from "../Button/Button.js";
|
|
6
|
-
import { I as Input } from "../../Input-
|
|
6
|
+
import { I as Input } from "../../Input-ChCIy5oY.js";
|
|
7
7
|
import '../../assets/InputPassword.css';const input = "_input_34v9n_2";
|
|
8
8
|
const wrapper = "_wrapper_34v9n_6";
|
|
9
9
|
const button = "_button_34v9n_17";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { memo, forwardRef, useState, useCallback, useImperativeHandle } from "react";
|
|
3
3
|
import { getMaskedInputPhoneValue, getUnmaskedInputValue } from "./utils.js";
|
|
4
|
-
import { I as Input } from "../../Input-
|
|
4
|
+
import { I as Input } from "../../Input-ChCIy5oY.js";
|
|
5
5
|
const InputPhoneNumber = memo(
|
|
6
6
|
forwardRef(
|
|
7
7
|
({ value = "", onChange, ...props }, ref) => {
|
|
@@ -3,7 +3,7 @@ import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
|
3
3
|
import { forwardRef, useImperativeHandle, Fragment } from "react";
|
|
4
4
|
import { ITEMS_PER_SEPARATOR, DEFAULT_VALUE_LENGTH } from "./constants.js";
|
|
5
5
|
import { useOTPInput } from "./hooks.js";
|
|
6
|
-
import { I as Input } from "../../Input-
|
|
6
|
+
import { I as Input } from "../../Input-ChCIy5oY.js";
|
|
7
7
|
import '../../assets/OtpInput.css';const otp = "_otp_19unm_3";
|
|
8
8
|
const input = "_input_19unm_14";
|
|
9
9
|
const separator = "_separator_19unm_28";
|
|
@@ -4,7 +4,7 @@ import * as React from "react";
|
|
|
4
4
|
import React__default, { useReducer, useMemo, useSyncExternalStore, useId as useId$1, useEffect, useCallback, useRef, useLayoutEffect, createContext, useContext, useState, Fragment, createRef, forwardRef } from "react";
|
|
5
5
|
import { ESelectSearchSize } from "./constants.js";
|
|
6
6
|
import { Icon } from "../../icons/Icon.js";
|
|
7
|
-
import { I as Input } from "../../Input-
|
|
7
|
+
import { I as Input } from "../../Input-ChCIy5oY.js";
|
|
8
8
|
import { EInputVariant, EInputSize } from "../Input/constants.js";
|
|
9
9
|
import { n as n$2, u as u$3, d as o$1, s as s$3, o as o$2, p as p$1, t as t$3, e as s$4, W as W$1, y as y$3, T, H, M as M$1, a as u$5, $ as $f7dceffc5ad7768b$export$4e328f61c538687f, b as $6179b936705e76d3$export$ae780daf29e6d456, D as D$2, c as o$3 } from "../../keyboard-B256ZoM-.js";
|
|
10
10
|
import * as ReactDOM from "react-dom";
|
|
@@ -5,20 +5,21 @@ import { useAutoResizeTextArea } from "./hooks.js";
|
|
|
5
5
|
import { useMergeRefs } from "../../hooks/useMergeRefs/useMergeRefs.js";
|
|
6
6
|
import { Icon } from "../../icons/Icon.js";
|
|
7
7
|
import { Button } from "../Button/Button.js";
|
|
8
|
-
import { c as cls } from "../../Input-
|
|
8
|
+
import { c as cls } from "../../Input-ChCIy5oY.js";
|
|
9
9
|
import { EInputVariant } from "../Input/constants.js";
|
|
10
|
-
import '../../assets/TextArea.css';const textarea = "
|
|
11
|
-
const label = "
|
|
12
|
-
const s = "
|
|
13
|
-
const m = "
|
|
14
|
-
const l = "
|
|
10
|
+
import '../../assets/TextArea.css';const textarea = "_textarea_1axu4_2";
|
|
11
|
+
const label = "_label_1axu4_22";
|
|
12
|
+
const s = "_s_1axu4_54";
|
|
13
|
+
const m = "_m_1axu4_62";
|
|
14
|
+
const l = "_l_1axu4_22";
|
|
15
15
|
const textareaCls = {
|
|
16
|
-
"textarea-wrapper": "_textarea-
|
|
16
|
+
"textarea-wrapper": "_textarea-wrapper_1axu4_2",
|
|
17
17
|
textarea,
|
|
18
|
-
"has-label": "_has-
|
|
18
|
+
"has-label": "_has-label_1axu4_8",
|
|
19
|
+
"required-mark": "_required-mark_1axu4_11",
|
|
19
20
|
label,
|
|
20
|
-
"has-left-slot": "_has-left-
|
|
21
|
-
"active-label": "_active-
|
|
21
|
+
"has-left-slot": "_has-left-slot_1axu4_37",
|
|
22
|
+
"active-label": "_active-label_1axu4_40",
|
|
22
23
|
s,
|
|
23
24
|
m,
|
|
24
25
|
l
|
|
@@ -74,6 +75,7 @@ const TextArea = memo(
|
|
|
74
75
|
rightAddon,
|
|
75
76
|
leftAddon,
|
|
76
77
|
size = "m",
|
|
78
|
+
required,
|
|
77
79
|
...otherProps
|
|
78
80
|
} = props;
|
|
79
81
|
const [isFocused, setIsFocused] = useState(autofocus);
|
|
@@ -161,7 +163,10 @@ const TextArea = memo(
|
|
|
161
163
|
wrapperClassName
|
|
162
164
|
),
|
|
163
165
|
children: [
|
|
164
|
-
label2 && /* @__PURE__ */
|
|
166
|
+
label2 && /* @__PURE__ */ jsxs("label", { htmlFor: id, className: labelClassNames, children: [
|
|
167
|
+
label2,
|
|
168
|
+
required && (withValue || isFocused) && /* @__PURE__ */ jsx("span", { className: textareaCls["required-mark"] })
|
|
169
|
+
] }),
|
|
165
170
|
currentLeftAddon && /* @__PURE__ */ jsx(
|
|
166
171
|
"span",
|
|
167
172
|
{
|
|
@@ -183,6 +188,7 @@ const TextArea = memo(
|
|
|
183
188
|
readOnly: readonly,
|
|
184
189
|
value,
|
|
185
190
|
onChange: handleChange,
|
|
191
|
+
required,
|
|
186
192
|
...otherProps
|
|
187
193
|
}
|
|
188
194
|
),
|
|
@@ -196,6 +202,7 @@ const TextArea = memo(
|
|
|
196
202
|
children: currentRightAddon
|
|
197
203
|
}
|
|
198
204
|
),
|
|
205
|
+
required && !withValue && !isFocused && /* @__PURE__ */ jsx("span", { className: textareaCls["required-mark"] }),
|
|
199
206
|
withClearButton && withValue && /* @__PURE__ */ jsx(
|
|
200
207
|
Button,
|
|
201
208
|
{
|
package/dist/components/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Button } from "./Button/Button.js";
|
|
2
2
|
import { EButtonForm, EButtonSize, EButtonVariantBorderless, EButtonVariantDefault, EButtonVariantOutline, EButtonVariantRound } from "./Button/constants.js";
|
|
3
|
-
import { I } from "../Input-
|
|
3
|
+
import { I } from "../Input-ChCIy5oY.js";
|
|
4
4
|
import { EInputSize, EInputVariant } from "./Input/constants.js";
|
|
5
5
|
import { TextArea } from "./TextArea/TextArea.js";
|
|
6
6
|
import { InputPassword } from "./InputPassword/InputPassword.js";
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Button } from "./components/Button/Button.js";
|
|
2
2
|
import { EButtonForm, EButtonSize, EButtonVariantBorderless, EButtonVariantDefault, EButtonVariantOutline, EButtonVariantRound } from "./components/Button/constants.js";
|
|
3
|
-
import { I } from "./Input-
|
|
3
|
+
import { I } from "./Input-ChCIy5oY.js";
|
|
4
4
|
import { EInputSize, EInputVariant } from "./components/Input/constants.js";
|
|
5
5
|
import { TextArea } from "./components/TextArea/TextArea.js";
|
|
6
6
|
import { InputPassword } from "./components/InputPassword/InputPassword.js";
|
|
@@ -53,6 +53,7 @@ import { useMergeRefs } from "./hooks/useMergeRefs/useMergeRefs.js";
|
|
|
53
53
|
import { useResizeObserver } from "./hooks/useResizeObserver/useResizeObserver.js";
|
|
54
54
|
import { Icon } from "./icons/Icon.js";
|
|
55
55
|
import { formating } from "./utils/index.js";
|
|
56
|
+
import { parseDate } from "./utils/formating/Date.js";
|
|
56
57
|
import './assets/index.css';export {
|
|
57
58
|
Accordion,
|
|
58
59
|
AccordionItem,
|
|
@@ -114,6 +115,7 @@ import './assets/index.css';export {
|
|
|
114
115
|
formating,
|
|
115
116
|
getMaskedInputPhoneValue,
|
|
116
117
|
getUnmaskedInputValue,
|
|
118
|
+
parseDate,
|
|
117
119
|
useCopyToClipboard,
|
|
118
120
|
useInterval,
|
|
119
121
|
useLockBodyScroll,
|
|
@@ -21,6 +21,12 @@ function _Date(x, y) {
|
|
|
21
21
|
});
|
|
22
22
|
return y;
|
|
23
23
|
}
|
|
24
|
+
const parseDate = (dateString) => {
|
|
25
|
+
if (dateString instanceof Date) return dateString;
|
|
26
|
+
const [day, month, year] = dateString.split(".");
|
|
27
|
+
return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
|
|
28
|
+
};
|
|
24
29
|
export {
|
|
25
|
-
_Date as default
|
|
30
|
+
_Date as default,
|
|
31
|
+
parseDate
|
|
26
32
|
};
|
package/dist/utils/index.d.ts
CHANGED
package/dist/utils/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import _Date from "./formating/Date.js";
|
|
2
|
+
import { parseDate } from "./formating/Date.js";
|
|
2
3
|
import Size from "./formating/FileSize.js";
|
|
3
4
|
import Month from "./formating/Month.js";
|
|
4
5
|
import Numbers from "./formating/Numbers.js";
|
|
@@ -11,5 +12,6 @@ const formating = {
|
|
|
11
12
|
Size
|
|
12
13
|
};
|
|
13
14
|
export {
|
|
14
|
-
formating
|
|
15
|
+
formating,
|
|
16
|
+
parseDate
|
|
15
17
|
};
|