From 52e70555f26ff6165d0d6dce1c5bd6e64caa5a8e Mon Sep 17 00:00:00 2001 From: Sukaato Date: Sat, 21 Dec 2024 13:34:39 +0100 Subject: [PATCH] fix(select): allow empty value instead of null --- package-lock.json | 29 +--- packages/core/api.txt | 12 +- packages/core/src/components.d.ts | 8 - .../core/src/components/dropdown/dropdown.tsx | 4 +- packages/core/src/components/select/readme.md | 32 ++-- .../core/src/components/select/select.scss | 55 ++++-- .../core/src/components/select/select.tsx | 116 +++++++------ .../select/tests/options/index.html | 161 ++++++++++++++++++ packages/vue/src/proxies.ts | 1 - tests/vue/package.json | 4 +- tests/vue/src/App.vue | 11 +- 11 files changed, 313 insertions(+), 120 deletions(-) create mode 100644 packages/core/src/components/select/tests/options/index.html diff --git a/package-lock.json b/package-lock.json index 6c9dc97..66a17d1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7794,7 +7794,7 @@ "name": "test-vue", "version": "0.3.9", "dependencies": { - "@poppy-ui/vue": "0.3.8", + "@poppy-ui/vue": "file:./../../poppy-ui-vue-0.3.9.tgz", "vue": "3.5.11", "vue-router": "^4.4.5" }, @@ -7806,31 +7806,12 @@ } }, "tests/vue/node_modules/@poppy-ui/vue": { - "version": "0.3.8", - "resolved": "https://registry.npmjs.org/@poppy-ui/vue/-/vue-0.3.8.tgz", - "integrity": "sha512-6RGtE8sl3lOn+vqQNFAvvnF8049ED1JvOyZBDSiyqpZKKRcjI983Th8qZKQlfMGzyCKz2SCjnrJwD47fhBEDVw==", + "version": "0.3.9", + "resolved": "file:poppy-ui-vue-0.3.9.tgz", + "integrity": "sha512-i5V6VLzOmzIPvLXTDWHuRFfLskob+bB8lyZxZGYKVTJN1wUk4F3gXvuxrAAtPg5IiszIYISZmgNjYO+6gOJRcQ==", "license": "MIT", "dependencies": { - "@poppy-ui/core": "^0.3.8", - "@stencil/vue-output-target": "^0.9.1" - } - }, - "tests/vue/node_modules/@stencil/vue-output-target": { - "version": "0.9.1", - "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.9.1.tgz", - "integrity": "sha512-qAuzZXMd2LuQUuDpshZYHMQKBjIessMK62Q8F0nwbGr2uZBS8WRTjjZyHIM9onMBH/zExrcnI/TGQUHtb1IltA==", - "license": "MIT", - "peerDependencies": { - "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0", - "vue": "^3.4.38" - }, - "peerDependenciesMeta": { - "@stencil/core": { - "optional": true - }, - "vue": { - "optional": false - } + "@poppy-ui/core": "^0.3.9" } }, "tests/vue/node_modules/@vue/compiler-core": { diff --git a/packages/core/api.txt b/packages/core/api.txt index 245682c..3bcf7b9 100644 --- a/packages/core/api.txt +++ b/packages/core/api.txt @@ -360,18 +360,17 @@ pop-select,prop,bordered,boolean,undefined,false,true pop-select,prop,color,"accent" | "error" | "ghost" | "info" | "primary" | "secondary" | "success" | "warning",undefined,false,true pop-select,prop,compare,((currentValue: any, newValue: any) => boolean) | string,undefined,false,false pop-select,prop,disabled,boolean,undefined,false,true -pop-select,prop,helperText,string,undefined,false,false +pop-select,prop,helperText,string,'',false,false pop-select,prop,max,number,undefined,false,true pop-select,prop,min,number,undefined,false,true pop-select,prop,multiple,boolean,undefined,false,true pop-select,prop,name,string,this.inputId,false,true -pop-select,prop,notEnoughErrorText,string,undefined,false,false +pop-select,prop,notEnoughErrorText,string,'',false,false pop-select,prop,placeholder,string,undefined,false,false pop-select,prop,readonly,boolean,undefined,false,true pop-select,prop,required,boolean,undefined,false,true -pop-select,prop,selectedText,string,undefined,false,false pop-select,prop,size,"lg" | "md" | "sm" | "xs",undefined,false,true -pop-select,prop,tooManyErrorText,string,undefined,false,false +pop-select,prop,tooManyErrorText,string,'',false,false pop-select,prop,value,any,null,false,false pop-select,method,dismiss,dismiss() => Promise pop-select,method,present,present() => Promise @@ -386,8 +385,11 @@ pop-select,css-prop,--background pop-select,css-prop,--border-color pop-select,css-prop,--border-radius pop-select,css-prop,--color -pop-select,css-prop,--error-color +pop-select,css-prop,--max-height pop-select,css-prop,--opacity +pop-select,css-prop,--outline-color +pop-select,part,backdrop +pop-select,part,content pop-select,part,label pop-select-option,none diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index b8b6e0f..c5cd6f1 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -1088,10 +1088,6 @@ export namespace Components { * @default false */ "required"?: boolean; - /** - * The text to display instead of the selected option's value. - */ - "selectedText"?: string; /** * Sets focus on the native `select` in `pop-select`. Use this method instead of the global `select.focus()`. */ @@ -3126,10 +3122,6 @@ declare namespace LocalJSX { * @default false */ "required"?: boolean; - /** - * The text to display instead of the selected option's value. - */ - "selectedText"?: string; /** * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`. * @config diff --git a/packages/core/src/components/dropdown/dropdown.tsx b/packages/core/src/components/dropdown/dropdown.tsx index 1d6df3b..baa825a 100644 --- a/packages/core/src/components/dropdown/dropdown.tsx +++ b/packages/core/src/components/dropdown/dropdown.tsx @@ -9,7 +9,7 @@ import { Prop, h, } from '@stencil/core'; -import { ENTER, SPACE } from 'key-definitions'; +import { ENTER, ESC, SPACE } from 'key-definitions'; import { componentConfig } from '#config'; import { ClickOutside } from '#utils/click-outside'; import { isRTL } from '#utils/dir'; @@ -249,7 +249,7 @@ export class Dropdown implements ComponentInterface, OverlayInterface { class="dropdown-trigger" onClick={this.onClick} onContextMenu={this.onContext} - onKeyUp={this.onKeyPress(SPACE.key, ENTER.key)} + onKeyUp={this.onKeyPress(SPACE.key, ENTER.key, ESC.key)} part="trigger" > diff --git a/packages/core/src/components/select/readme.md b/packages/core/src/components/select/readme.md index fed92e8..672474c 100644 --- a/packages/core/src/components/select/readme.md +++ b/packages/core/src/components/select/readme.md @@ -17,18 +17,17 @@ Select is used to pick a value from a list of options. | `color` | `color` | The color to use from your application's color palette.
Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`.
For more information on colors, see [theming](/docs/theming/basics). | `"accent" \| "error" \| "ghost" \| "info" \| "primary" \| "secondary" \| "success" \| "warning"` | `undefined` | | `compare` | `compare` | This property allows developers to specify a custom function
for comparing objects when determining the selected option in the
ion-radio-group. When not specified, the default behavior will use strict
equality (===) for comparison. | `((currentValue: any, newValue: any) => boolean) \| string` | `undefined` | | `disabled` | `disabled` | If `true`, the user cannot interact with the element. | `boolean` | `false` | -| `helperText` | `helper-text` | Text that is placed under the select and displayed when no error is detected. | `string` | `undefined` | +| `helperText` | `helper-text` | Text that is placed under the select and displayed when no error is detected. | `string` | `''` | | `max` | `max` | Only apply when `multiple` property is used.
The maximum amount of values that can be selected, which must not be less than its minimum (min attribute) value. | `number` | `undefined` | | `min` | `min` | Only apply when `multiple` property is used.
The minimum amount of values that can be selected, which must not be greater than its maximum (max attribute) value. | `number` | `undefined` | | `multiple` | `multiple` | If `true`, the user can select more than one value. | `boolean` | `false` | | `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | -| `notEnoughErrorText` | `not-enough-error-text` | Only apply when `multiple` property is used.
Text that is placed under the select and displayed when the amount of selected option is below of the `min` property. | `string` | `undefined` | +| `notEnoughErrorText` | `not-enough-error-text` | Only apply when `multiple` property is used.
Text that is placed under the select and displayed when the amount of selected option is below of the `min` property. | `string` | `''` | | `placeholder` | `placeholder` | Instructional text that shows before the input has a value.

This property replace the `