@justeattakeaway/pie-select 0.6.3 → 0.6.5
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 +105 -59
- package/custom-elements.json +4 -4
- package/dist/index.js +2 -2
- package/package.json +2 -2
- package/src/select.scss +4 -0
package/README.md
CHANGED
|
@@ -1,91 +1,137 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
</p>
|
|
1
|
+
# @justeattakeaway/pie-select
|
|
2
|
+
[Source Code](https://github.com/justeattakeaway/pie/tree/main/packages/components/pie-select) | [Design Documentation](https://pie.design/components/select-input) | [NPM](https://www.npmjs.com/package/@justeattakeaway/pie-select)
|
|
4
3
|
|
|
5
|
-
<p
|
|
4
|
+
<p>
|
|
6
5
|
<a href="https://www.npmjs.com/@justeattakeaway/pie-select">
|
|
7
6
|
<img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-select.svg">
|
|
8
7
|
</a>
|
|
9
8
|
</p>
|
|
10
9
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
1. [Introduction](#pie-select)
|
|
14
|
-
2. [Installation](#installation)
|
|
15
|
-
3. [Importing the component](#importing-the-component)
|
|
16
|
-
4. [Peer Dependencies](#peer-dependencies)
|
|
17
|
-
5. [Props](#props)
|
|
18
|
-
6. [Contributing](#contributing)
|
|
19
|
-
|
|
20
|
-
## pie-select
|
|
10
|
+
`@justeattakeaway/pie-select` is a Web Component built using the Lit library. It offers a simple and accessible interactive select input component for web applications.
|
|
21
11
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
This component can be easily integrated into various frontend frameworks and customized through a set of properties.
|
|
12
|
+
## Table of Contents
|
|
25
13
|
|
|
14
|
+
- [Installation](#installation)
|
|
15
|
+
- [Documentation](#documentation)
|
|
16
|
+
- [Properties](#properties)
|
|
17
|
+
- [Slots](#slots)
|
|
18
|
+
- [CSS Variables](#css-variables)
|
|
19
|
+
- [Events](#events)
|
|
20
|
+
- [Usage Examples](#usage-examples)
|
|
21
|
+
- [Questions and Support](#questions-and-support)
|
|
22
|
+
- [Contributing](#contributing)
|
|
26
23
|
|
|
27
24
|
## Installation
|
|
28
25
|
|
|
29
|
-
To install
|
|
30
|
-
|
|
31
|
-
```bash
|
|
32
|
-
# npm
|
|
33
|
-
$ npm i @justeattakeaway/pie-select
|
|
26
|
+
> To install any of our web components in your application, we would suggest following the [getting started guide](https://webc.pie.design/?path=/docs/introduction-getting-started--docs) to set up your project.
|
|
34
27
|
|
|
35
|
-
|
|
36
|
-
$ yarn add @justeattakeaway/pie-select
|
|
37
|
-
```
|
|
28
|
+
Ideally, you should install the component using the **`@justeattakeaway/pie-webc`** package, which includes all of the components. Or you can install the individual component package.
|
|
38
29
|
|
|
39
|
-
|
|
30
|
+
## Documentation
|
|
40
31
|
|
|
32
|
+
### Properties
|
|
33
|
+
| Prop | Options | Description | Default |
|
|
34
|
+
|----------------|----------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|
|
|
35
|
+
| `size` | `"small"`, `"medium"`, `"large"` | The size of the select component. | `medium` |
|
|
36
|
+
| `disabled` | `boolean` | Whether the select is disabled. | `false` |
|
|
37
|
+
| `assistiveText`| `string` | An optional assistive text to display below the select element. Must be provided when the status is `error`. | `undefined` |
|
|
38
|
+
| `status` | `"default"`, `"error"` | The status of the select component / assistive text. | `default` |
|
|
39
|
+
| `name` | `string` | The name of the select (used as a key/value pair with `value`). This is required in order to work properly with forms. | `undefined` |
|
|
40
|
+
| `options` | `array` | The options to display in the select. Can be an array of option objects or option group objects. See [Using the options prop](#using-the-options-prop) for more details. | `[]` |
|
|
41
41
|
|
|
42
|
-
|
|
42
|
+
#### Using the options prop
|
|
43
|
+
The `options` prop accepts an array of option objects or option group objects:
|
|
43
44
|
|
|
44
|
-
|
|
45
|
-
```js
|
|
46
|
-
// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
|
|
47
|
-
import { PieSelect } from '@justeattakeaway/pie-select';
|
|
45
|
+
##### Option objects
|
|
48
46
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
47
|
+
| Prop | Options | Description | Default |
|
|
48
|
+
|------------|----------------|-------------------------------------------------|-------------|
|
|
49
|
+
| `tag` | `"option"` | Must be `option` to identify this as an option. | `undefined` |
|
|
50
|
+
| `text` | `string` | The text to display for the option. | `undefined` |
|
|
51
|
+
| `value` | `string` | The value for the option. | `undefined` |
|
|
52
|
+
| `disabled` | `boolean` | Whether the option is disabled. | `false` |
|
|
53
|
+
| `selected` | `boolean` | Whether the option is selected by default. | `false` |
|
|
53
54
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
55
|
+
##### Option group objects
|
|
56
|
+
| Prop | Options | Description | Default |
|
|
57
|
+
|------------|--------------|-------------------------------------------------------|-------------|
|
|
58
|
+
| `tag` | `"optgroup"` | Must be `optgroup` to identify this as an option group. | `undefined` |
|
|
59
|
+
| `label` | `string` | The label for the group. | `undefined` |
|
|
60
|
+
| `disabled` | `boolean` | Whether the entire group is disabled. | `false` |
|
|
61
|
+
| `options` | `array` | Array of option objects within this group. | `[]` |
|
|
61
62
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
63
|
+
### Slots
|
|
64
|
+
| Slot | Description |
|
|
65
|
+
|---------------|---------------------------------------------|
|
|
66
|
+
| `leadingIcon` | An icon to display at the start of the select. |
|
|
65
67
|
|
|
68
|
+
### CSS Variables
|
|
69
|
+
This component does not expose any CSS variables for style overrides.
|
|
66
70
|
|
|
67
|
-
|
|
71
|
+
### Events
|
|
72
|
+
| Event | Description |
|
|
73
|
+
|---------|---------------------------------------------|
|
|
74
|
+
| `change`| Fires when the selected option is changed. |
|
|
68
75
|
|
|
69
|
-
|
|
70
|
-
> When using `pie-select`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
|
|
76
|
+
## Usage Examples
|
|
71
77
|
|
|
78
|
+
> When using icons, we recommend using [@justeattakeaway/pie-icons-webc](https://www.npmjs.com/package/@justeattakeaway/pie-icons-webc) to ensure consistency with the rest of the design system.
|
|
72
79
|
|
|
73
|
-
|
|
80
|
+
**For HTML:**
|
|
74
81
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
82
|
+
```js
|
|
83
|
+
// import as module into a js file that will be loaded on the page where the component is used.
|
|
84
|
+
import '@justeattakeaway/pie-webc/components/select.js';
|
|
85
|
+
import '@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.js';
|
|
86
|
+
```
|
|
80
87
|
|
|
81
88
|
```html
|
|
82
|
-
|
|
83
|
-
|
|
89
|
+
<pie-select
|
|
90
|
+
name="my-select"
|
|
91
|
+
options="[
|
|
92
|
+
{ tag: 'option', text: 'Select an option' },
|
|
93
|
+
{ tag: 'option', text: 'Option 1', value: 'option1' }
|
|
94
|
+
]">
|
|
95
|
+
<icon-placeholder slot="leadingIcon"></icon-placeholder>
|
|
96
|
+
</pie-select>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
**For Native JS Applications, Vue, Angular, Svelte, etc.:**
|
|
84
100
|
|
|
85
|
-
|
|
86
|
-
|
|
101
|
+
```js
|
|
102
|
+
// Vue templates (using Nuxt 3)
|
|
103
|
+
import '@justeattakeaway/pie-webc/components/select.js';
|
|
104
|
+
import '@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.js';
|
|
105
|
+
|
|
106
|
+
<pie-select
|
|
107
|
+
name="my-select"
|
|
108
|
+
:options="[
|
|
109
|
+
{ tag: 'option', text: 'Select an option' },
|
|
110
|
+
{ tag: 'option', text: 'Option 1', value: 'option1' }
|
|
111
|
+
]">
|
|
112
|
+
<icon-placeholder slot="leadingIcon"></icon-placeholder>
|
|
113
|
+
</pie-select>
|
|
114
|
+
```
|
|
115
|
+
**For React Applications:**
|
|
116
|
+
|
|
117
|
+
```jsx
|
|
118
|
+
import { PieSelect } from '@justeattakeaway/pie-webc/react/select.js';
|
|
119
|
+
import { IconPlaceholder } from '@justeattakeaway/pie-icons-webc/dist/react/IconPlaceholder.js';
|
|
120
|
+
|
|
121
|
+
<PieSelect
|
|
122
|
+
name="my-select"
|
|
123
|
+
options={[
|
|
124
|
+
{ tag: 'option', text: 'Select an option' },
|
|
125
|
+
{ tag: 'option', text: 'Option 1', value: 'option1' }
|
|
126
|
+
]}>
|
|
127
|
+
<IconPlaceholder slot="leadingIcon"></IconPlaceholder>
|
|
128
|
+
</PieSelect>
|
|
87
129
|
```
|
|
88
130
|
|
|
131
|
+
## Questions and Support
|
|
132
|
+
|
|
133
|
+
If you work at Just Eat Takeaway.com, please contact us on **#help-designsystem**. Otherwise, please raise an issue on [Github](https://github.com/justeattakeaway/pie/issues).
|
|
134
|
+
|
|
89
135
|
## Contributing
|
|
90
136
|
|
|
91
|
-
Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
|
|
137
|
+
Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
|
package/custom-elements.json
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"type": {
|
|
35
35
|
"text": "DefaultProps"
|
|
36
36
|
},
|
|
37
|
-
"default": "{\
|
|
37
|
+
"default": "{\n size: 'medium',\n status: 'default',\n disabled: false,\n options: [],\n}"
|
|
38
38
|
}
|
|
39
39
|
],
|
|
40
40
|
"exports": [
|
|
@@ -168,7 +168,7 @@
|
|
|
168
168
|
"text": "ValidityState"
|
|
169
169
|
},
|
|
170
170
|
"privacy": "public",
|
|
171
|
-
"description": "(Read-only) returns a ValidityState with the validity states that this element is in.\
|
|
171
|
+
"description": "(Read-only) returns a ValidityState with the validity states that this element is in.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
|
|
172
172
|
"readonly": true
|
|
173
173
|
},
|
|
174
174
|
{
|
|
@@ -189,7 +189,7 @@
|
|
|
189
189
|
"description": "The latest disabled state of the select."
|
|
190
190
|
}
|
|
191
191
|
],
|
|
192
|
-
"description": "Called after the disabled state of the element changes,\
|
|
192
|
+
"description": "Called after the disabled state of the element changes,\neither because the disabled attribute of this element was added or removed;\nor because the disabled state changed on a <fieldset> that's an ancestor of this element."
|
|
193
193
|
},
|
|
194
194
|
{
|
|
195
195
|
"kind": "method",
|
|
@@ -200,7 +200,7 @@
|
|
|
200
200
|
"text": "void"
|
|
201
201
|
}
|
|
202
202
|
},
|
|
203
|
-
"description": "Called when the form that owns this component is reset.\
|
|
203
|
+
"description": "Called when the form that owns this component is reset.\nResets the value to the default select value."
|
|
204
204
|
},
|
|
205
205
|
{
|
|
206
206
|
"kind": "field",
|
package/dist/index.js
CHANGED
|
@@ -11,9 +11,9 @@ const v = class v extends b {
|
|
|
11
11
|
this.getAttribute("v") || this.setAttribute("v", v.v);
|
|
12
12
|
}
|
|
13
13
|
};
|
|
14
|
-
v.v = "0.6.
|
|
14
|
+
v.v = "0.6.5";
|
|
15
15
|
let g = v;
|
|
16
|
-
const A = "*,*:after,*:before{box-sizing:inherit}.c-select{--select-padding-block: var(--dt-spacing-c);--select-padding-inline-start: var(--dt-spacing-d);--select-padding-inline-end: 52px;--select-background-color: var(--dt-color-container-default);--select-text-color: var(--dt-color-content-default);--select-border-color: var(--dt-color-border-form);--select-font-size: calc(var(--dt-font-body-l-size) * 1px);--select-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--select-height: 48px;--select-cursor: pointer;position:relative;color:var(--select-text-color);font-size:var(--select-font-size);line-height:var(--select-line-height)}.c-select select{height:var(--select-height);width:100%;border:1px solid var(--select-border-color);border-radius:var(--dt-radius-rounded-c);padding-inline-start:var(--select-padding-inline-start);padding-inline-end:var(--select-padding-inline-end);padding-block-start:var(--select-padding-block);padding-block-end:var(--select-padding-block);background-color:var(--select-background-color);font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--select-cursor);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.c-select select:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-select.c-select--small{--select-padding-block: var(--dt-spacing-b);--select-height: 40px}.c-select.c-select--large{--select-padding-block: var(--dt-spacing-d);--select-height: 56px}.c-select.c-select--error{--select-border-color: var(--dt-color-support-error)}.c-select.c-select--withLeadingIcon{--select-padding-inline-start: calc(var(--dt-spacing-h) - var(--dt-spacing-a))}.c-select ::slotted([slot=leadingIcon]),.c-select .c-select-trailingIcon{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none}.c-select:not(.is-disabled) ::slotted([slot=leadingIcon]),.c-select:not(.is-disabled) .c-select-trailingIcon{color:var(--dt-color-content-subdued)}.c-select ::slotted([slot=leadingIcon]){--icon-display-override: block;--icon-size-override: 24px;inset-inline-start:var(--dt-spacing-d)}.c-select .c-select-trailingIcon{inset-inline-end:var(--dt-spacing-d)}@media (hover: hover){.c-select:hover{--select-background-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))))}@supports (background-color: color-mix(in srgb,black,white)){.c-select:hover{--select-background-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}}.c-select.is-disabled{--select-background-color: var(--dt-color-disabled-01);--select-border-color: var(--dt-color-disabled-01);--select-text-color: var(--dt-color-content-disabled);--select-cursor: auto}", O = ["small", "medium", "large"], F = ["default", "error"], a = {
|
|
16
|
+
const A = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-select{--select-padding-block: var(--dt-spacing-c);--select-padding-inline-start: var(--dt-spacing-d);--select-padding-inline-end: 52px;--select-background-color: var(--dt-color-container-default);--select-text-color: var(--dt-color-content-default);--select-border-color: var(--dt-color-border-form);--select-font-size: calc(var(--dt-font-body-l-size) * 1px);--select-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--select-height: 48px;--select-cursor: pointer;position:relative;color:var(--select-text-color);font-size:var(--select-font-size);line-height:var(--select-line-height)}.c-select select{height:var(--select-height);width:100%;border:1px solid var(--select-border-color);border-radius:var(--dt-radius-rounded-c);padding-inline-start:var(--select-padding-inline-start);padding-inline-end:var(--select-padding-inline-end);padding-block-start:var(--select-padding-block);padding-block-end:var(--select-padding-block);background-color:var(--select-background-color);font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--select-cursor);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.c-select select:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-select.c-select--small{--select-padding-block: var(--dt-spacing-b);--select-height: 40px}.c-select.c-select--large{--select-padding-block: var(--dt-spacing-d);--select-height: 56px}.c-select.c-select--error{--select-border-color: var(--dt-color-support-error)}.c-select.c-select--withLeadingIcon{--select-padding-inline-start: calc(var(--dt-spacing-h) - var(--dt-spacing-a))}.c-select ::slotted([slot=leadingIcon]),.c-select .c-select-trailingIcon{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none}.c-select:not(.is-disabled) ::slotted([slot=leadingIcon]),.c-select:not(.is-disabled) .c-select-trailingIcon{color:var(--dt-color-content-subdued)}.c-select ::slotted([slot=leadingIcon]){--icon-display-override: block;--icon-size-override: 24px;inset-inline-start:var(--dt-spacing-d)}.c-select .c-select-trailingIcon{inset-inline-end:var(--dt-spacing-d)}@media (hover: hover){.c-select:hover{--select-background-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))))}@supports (background-color: color-mix(in srgb,black,white)){.c-select:hover{--select-background-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}}.c-select.is-disabled{--select-background-color: var(--dt-color-disabled-01);--select-border-color: var(--dt-color-disabled-01);--select-text-color: var(--dt-color-content-disabled);--select-cursor: auto}", O = ["small", "medium", "large"], F = ["default", "error"], a = {
|
|
17
17
|
size: "medium",
|
|
18
18
|
status: "default",
|
|
19
19
|
disabled: !1,
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-select",
|
|
3
3
|
"description": "PIE Design System Select built using Web Components",
|
|
4
|
-
"version": "0.6.
|
|
4
|
+
"version": "0.6.5",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@justeattakeaway/pie-assistive-text": "0.10.
|
|
42
|
+
"@justeattakeaway/pie-assistive-text": "0.10.5",
|
|
43
43
|
"@justeattakeaway/pie-webc-core": "1.0.0"
|
|
44
44
|
},
|
|
45
45
|
"volta": {
|