@acusti/css-value-input 1.0.0-rc.6 → 1.0.0-rc.8
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 +61 -0
- package/dist/CSSValueInput.d.ts +13 -1
- package/dist/CSSValueInput.js.flow +13 -1
- package/dist/CSSValueInput.js.map +1 -1
- package/package.json +15 -12
- package/src/CSSValueInput.tsx +13 -1
package/README.md
CHANGED
|
@@ -9,3 +9,64 @@
|
|
|
9
9
|
take and update a CSS value of a particular type with a default unit. The
|
|
10
10
|
input’s behavior is similar to those of design applications such as Adobe
|
|
11
11
|
Illustrator.
|
|
12
|
+
|
|
13
|
+
See the [storybook docs and demo][] to get a feel for what it can do.
|
|
14
|
+
|
|
15
|
+
[storybook docs and demo]:
|
|
16
|
+
https://acusti-uikit.netlify.app/?path=/docs/uikit-controls-CSSValueInput--docs
|
|
17
|
+
|
|
18
|
+
## Usage
|
|
19
|
+
|
|
20
|
+
```
|
|
21
|
+
npm install @acusti/css-value-input
|
|
22
|
+
# or
|
|
23
|
+
yarn add @acusti/css-value-input
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### Props
|
|
27
|
+
|
|
28
|
+
This is the type signature for the props you can pass to `CSSValueInput`.
|
|
29
|
+
The unique features provided by the component are called out and explained
|
|
30
|
+
above the corresponding prop via JSDoc comments:
|
|
31
|
+
|
|
32
|
+
```ts
|
|
33
|
+
type Props = {
|
|
34
|
+
/**
|
|
35
|
+
* Boolean indicating if the user can submit an empty value (i.e. clear
|
|
36
|
+
* the value). Defaults to true.
|
|
37
|
+
*/
|
|
38
|
+
allowEmpty?: boolean;
|
|
39
|
+
className?: string;
|
|
40
|
+
cssValueType?: CSSValueType;
|
|
41
|
+
disabled?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Function that receives a value and converts it to its numerical equivalent
|
|
44
|
+
* (i.e. '12px' → 12). Defaults to parseFloat().
|
|
45
|
+
*/
|
|
46
|
+
getValueAsNumber?: (value: string | number) => number;
|
|
47
|
+
icon?: React.ReactNode;
|
|
48
|
+
label?: string;
|
|
49
|
+
max?: number;
|
|
50
|
+
min?: number;
|
|
51
|
+
name?: string;
|
|
52
|
+
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
|
|
53
|
+
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
|
|
54
|
+
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
|
|
55
|
+
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
|
|
56
|
+
onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
|
|
57
|
+
/**
|
|
58
|
+
* Custom event handler triggered when the user presses enter/return
|
|
59
|
+
* or blurs the input after making a change. Hitting esc will restore
|
|
60
|
+
* the previous submitted value or original value.
|
|
61
|
+
*/
|
|
62
|
+
onSubmitValue: (value: string) => unknown;
|
|
63
|
+
placeholder?: string;
|
|
64
|
+
step?: number;
|
|
65
|
+
tabIndex?: number;
|
|
66
|
+
title?: string;
|
|
67
|
+
unit?: string;
|
|
68
|
+
/** Regex or validator function to validate non-numeric values */
|
|
69
|
+
validator?: RegExp | ((value: string) => boolean);
|
|
70
|
+
value?: string;
|
|
71
|
+
};
|
|
72
|
+
```
|
package/dist/CSSValueInput.d.ts
CHANGED
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
import type { CSSValueType } from '@acusti/css-values';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
export type Props = {
|
|
4
|
-
/**
|
|
4
|
+
/**
|
|
5
|
+
* Boolean indicating if the user can submit an empty value (i.e. clear
|
|
6
|
+
* the value). Defaults to true.
|
|
7
|
+
*/
|
|
5
8
|
allowEmpty?: boolean;
|
|
6
9
|
className?: string;
|
|
7
10
|
cssValueType?: CSSValueType;
|
|
8
11
|
disabled?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Function that receives a value and converts it to its numerical equivalent
|
|
14
|
+
* (i.e. '12px' → 12). Defaults to parseFloat().
|
|
15
|
+
*/
|
|
9
16
|
getValueAsNumber?: (value: string | number) => number;
|
|
10
17
|
icon?: React.ReactNode;
|
|
11
18
|
label?: string;
|
|
@@ -17,6 +24,11 @@ export type Props = {
|
|
|
17
24
|
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
|
|
18
25
|
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
|
|
19
26
|
onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
|
|
27
|
+
/**
|
|
28
|
+
* Custom event handler triggered when the user presses enter/return
|
|
29
|
+
* or blurs the input after making a change. Hitting esc will restore
|
|
30
|
+
* the previous submitted value or original value.
|
|
31
|
+
*/
|
|
20
32
|
onSubmitValue: (value: string) => unknown;
|
|
21
33
|
placeholder?: string;
|
|
22
34
|
step?: number;
|
|
@@ -9,12 +9,18 @@ import type { CSSValueType } from "@acusti/css-values";
|
|
|
9
9
|
import * as React from "react";
|
|
10
10
|
export type Props = {|
|
|
11
11
|
/**
|
|
12
|
-
* Boolean indicating if the user can submit an empty value (i.e. clear
|
|
12
|
+
* Boolean indicating if the user can submit an empty value (i.e. clear
|
|
13
|
+
* the value). Defaults to true.
|
|
13
14
|
*/
|
|
14
15
|
allowEmpty?: boolean,
|
|
15
16
|
className?: string,
|
|
16
17
|
cssValueType?: CSSValueType,
|
|
17
18
|
disabled?: boolean,
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Function that receives a value and converts it to its numerical equivalent
|
|
22
|
+
* (i.e. '12px' → 12). Defaults to parseFloat().
|
|
23
|
+
*/
|
|
18
24
|
getValueAsNumber?: (value: string | number) => number,
|
|
19
25
|
icon?: React.Node,
|
|
20
26
|
label?: string,
|
|
@@ -26,6 +32,12 @@ export type Props = {|
|
|
|
26
32
|
onFocus?: (event: SyntheticFocusEvent<HTMLInputElement>) => mixed,
|
|
27
33
|
onKeyDown?: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
|
|
28
34
|
onKeyUp?: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Custom event handler triggered when the user presses enter/return
|
|
38
|
+
* or blurs the input after making a change. Hitting esc will restore
|
|
39
|
+
* the previous submitted value or original value.
|
|
40
|
+
*/
|
|
29
41
|
onSubmitValue: (value: string) => mixed,
|
|
30
42
|
placeholder?: string,
|
|
31
43
|
step?: number,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CSSValueInput.js","sourceRoot":"","sources":["../src/CSSValueInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,sBAAsB,EACtB,8BAA8B,EAC9B,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,GACnB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CSSValueInput.js","sourceRoot":"","sources":["../src/CSSValueInput.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@acusti/css-value-input",
|
|
3
|
-
"version": "1.0.0-rc.
|
|
3
|
+
"version": "1.0.0-rc.8",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"sideEffects": false,
|
|
6
|
+
"exports": "./dist/CSSValueInput.js",
|
|
7
|
+
"main": "./dist/CSSValueInput.js",
|
|
8
|
+
"types": "./dist/CSSValueInput.d.ts",
|
|
9
|
+
"files": [
|
|
10
|
+
"dist",
|
|
11
|
+
"src"
|
|
12
|
+
],
|
|
4
13
|
"description": "React component that renders a text input that can take and update a CSS value of a particular type with a default unit",
|
|
5
14
|
"keywords": [
|
|
6
15
|
"react",
|
|
@@ -15,15 +24,9 @@
|
|
|
15
24
|
"ts",
|
|
16
25
|
"flow"
|
|
17
26
|
],
|
|
18
|
-
"
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
"main": "./dist/CSSValueInput.js",
|
|
22
|
-
"types": "./dist/CSSValueInput.d.ts",
|
|
23
|
-
"files": [
|
|
24
|
-
"dist",
|
|
25
|
-
"src"
|
|
26
|
-
],
|
|
27
|
+
"scripts": {
|
|
28
|
+
"test": "vitest"
|
|
29
|
+
},
|
|
27
30
|
"repository": {
|
|
28
31
|
"type": "git",
|
|
29
32
|
"url": "https://github.com/acusti/uikit.git",
|
|
@@ -47,8 +50,8 @@
|
|
|
47
50
|
"vitest": "^1.1.0"
|
|
48
51
|
},
|
|
49
52
|
"dependencies": {
|
|
50
|
-
"@acusti/css-values": "^1.0.
|
|
51
|
-
"@acusti/input-text": "^1.
|
|
53
|
+
"@acusti/css-values": "^1.0.2",
|
|
54
|
+
"@acusti/input-text": "^1.4.1",
|
|
52
55
|
"clsx": "^2"
|
|
53
56
|
},
|
|
54
57
|
"peerDependencies": {
|
package/src/CSSValueInput.tsx
CHANGED
|
@@ -12,11 +12,18 @@ import clsx from 'clsx';
|
|
|
12
12
|
import * as React from 'react';
|
|
13
13
|
|
|
14
14
|
export type Props = {
|
|
15
|
-
/**
|
|
15
|
+
/**
|
|
16
|
+
* Boolean indicating if the user can submit an empty value (i.e. clear
|
|
17
|
+
* the value). Defaults to true.
|
|
18
|
+
*/
|
|
16
19
|
allowEmpty?: boolean;
|
|
17
20
|
className?: string;
|
|
18
21
|
cssValueType?: CSSValueType;
|
|
19
22
|
disabled?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Function that receives a value and converts it to its numerical equivalent
|
|
25
|
+
* (i.e. '12px' → 12). Defaults to parseFloat().
|
|
26
|
+
*/
|
|
20
27
|
getValueAsNumber?: (value: string | number) => number;
|
|
21
28
|
icon?: React.ReactNode;
|
|
22
29
|
label?: string;
|
|
@@ -28,6 +35,11 @@ export type Props = {
|
|
|
28
35
|
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
|
|
29
36
|
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
|
|
30
37
|
onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
|
|
38
|
+
/**
|
|
39
|
+
* Custom event handler triggered when the user presses enter/return
|
|
40
|
+
* or blurs the input after making a change. Hitting esc will restore
|
|
41
|
+
* the previous submitted value or original value.
|
|
42
|
+
*/
|
|
31
43
|
onSubmitValue: (value: string) => unknown;
|
|
32
44
|
placeholder?: string;
|
|
33
45
|
step?: number;
|