javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 02:31:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(select): support any kind of value

Browse Source 
fixes #15200
This commit is contained in:
Manu Mtz.-Almeida
2018-08-24 04:09:16 +02:00
parent bd75bf46eb
commit 151c58e12f
13 changed files with 72 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components/alert/alert.tsx
View File

@ -27,8 +27,6 @@ export class Alert implements OverlayInterface {
presented = false;
animation?: Animation;
@Prop() mode!: Mode;
@Element() el!: HTMLStencilElement;
@Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement;
@ -36,6 +34,12 @@ export class Alert implements OverlayInterface {
@Prop() overlayId!: number;
@Prop() keyboardClose = true;
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
/**
* Animation to use when the alert is presented.
*/

2
core/src/components/alert/readme.md
View File

@ -36,7 +36,7 @@ Alerts can also include several different inputs whose data can be passed back t
| `keyboardClose` | `keyboard-close` | | `boolean` |
| `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `AnimationBuilder` |
| `message` | `message` | The main message to be displayed in the alert. | `string` |
| `mode` | `mode` | | `Mode` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` |
| `overlayId` | `overlay-id` | | `number` |
| `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string` |
| `translucent` | `translucent` | If true, the alert will be translucent. Defaults to `false`. | `boolean` |

5
core/src/components/item/item.ios.scss
View File

@ -139,13 +139,16 @@
:host(.item-label-stacked) ::slotted(ion-input),
:host(.item-label-floating) ::slotted(ion-input),
:host(.item-label-stacked) ::slotted(ion-textarea),
:host(.item-label-floating) ::slotted(ion-textarea) {
:host(.item-label-floating) ::slotted(ion-textarea),
:host(.item-label-stacked) ::slotted(ion-select),
:host(.item-label-floating) ::slotted(ion-select) {
--padding-top: 8px;
--padding-bottom: 8px;
--padding-start: 0;
}
// TODO
// .item-ios.item-label-stacked .label-ios + .input + .cloned-input,
// .item-ios.item-label-floating .label-ios + .input + .cloned-input {

4
core/src/components/item/item.md.scss
View File

@ -153,7 +153,9 @@
:host(.item-label-stacked) ::slotted(ion-input),
:host(.item-label-floating) ::slotted(ion-input),
:host(.item-label-stacked) ::slotted(ion-textarea),
:host(.item-label-floating) ::slotted(ion-textarea) {
:host(.item-label-floating) ::slotted(ion-textarea),
:host(.item-label-stacked) ::slotted(ion-select),
:host(.item-label-floating) ::slotted(ion-select) {
--padding-top: 8px;
--padding-bottom: 8px;
--padding-start: 0;

2
core/src/components/select-option/readme.md
View File

@ -12,7 +12,7 @@ SelectOption is a component that is a child element of Select. For more informat
| ---------- | ---------- | ------------------------------------------------------------------------------ | --------- |
| `disabled` | `disabled` | If true, the user cannot interact with the select option. Defaults to `false`. | `boolean` |
| `selected` | `selected` | If true, the element is selected. | `boolean` |
| `value` | `value` | The text value of the option. | `string` |
| `value` | -- | The text value of the option. | `any` |
## Events

2
core/src/components/select-option/select-option.tsx
View File

@ -22,7 +22,7 @@ export class SelectOption {
/**
* The text value of the option.
*/
@Prop({ mutable: true }) value!: string;
@Prop({ mutable: true }) value!: any;
/**
* Emitted when the select option loads.

1
core/src/components/select/readme.md
View File

@ -47,6 +47,7 @@ Since select uses the alert, action sheet and popover interfaces, options can be
| `disabled` | `disabled` | If true, the user cannot interact with the select. Defaults to `false`. | `boolean` |
| `interfaceOptions` | -- | Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [AlertController API docs](../../alert/AlertController/#create), the [ActionSheetController API docs](../../action-sheet/ActionSheetController/#create) and the [PopoverController API docs](../../popover/PopoverController/#create) for the create options for each interface. | `any` |
| `interface` | `interface` | The interface the select should use: `action-sheet`, `popover` or `alert`. Default: `alert`. | `SelectInterface` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` |
| `multiple` | `multiple` | If true, the select can accept multiple values. | `boolean` |
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` |
| `okText` | `ok-text` | The text to display on the ok button. Default: `OK`. | `string` |

32
core/src/components/select/select.ios.scss
View File

@ -14,39 +14,7 @@
--placeholder-color: #{$select-ios-placeholder-color};
}
.select-placeholder {
color: var(--placeholder-color);
}
.select-icon {
position: relative;
width: 12px;
height: 18px;
}
.select-icon .select-icon-inner {
@include position(50%, null, null, 5px);
@include margin(-2px, null, null, null);
position: absolute;
width: 0;
height: 0;
border-top: 5px solid;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
color: var(--icon-color);
pointer-events: none;
}
// Stacked & Floating Select
// --------------------------------------------------
.item-label-stacked .select-ios,
.item-label-floating .select-ios {
@include padding(8px, null, 8px, 0);
}

52
core/src/components/select/select.md.scss
View File

@ -14,59 +14,7 @@
--placeholder-color: #{$select-md-placeholder-color};
}
.select-placeholder {
color: var(--placeholder-color);
}
.select-md .item-select ion-label {
@include margin-horizontal(0, null);
}
.select-icon {
position: relative;
width: 12px;
height: 19px;
}
.select-icon .select-icon-inner {
@include position(50%, null, null, 5px);
@include margin(-3px, null, null, null);
position: absolute;
width: 0;
height: 0;
border-top: 5px solid;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
color: var(--icon-color);
pointer-events: none;
}
// Stacked & Floating Select
// --------------------------------------------------
.item-label-stacked .select-md,
.item-label-floating .select-md {
@include padding(8px, null, 8px, 0);
}
// Select Popover Interface
// --------------------------------------------------
.select-popover-md .radio-icon {
display: none;
}
.select-popover-md .item-radio-checked {
background-color: $background-color-step-150;
}
.select-popover-md .item-radio-checked ion-label {
color: initial;
}

37
core/src/components/select/select.scss
View File

@ -29,10 +29,27 @@
max-width: 45%;
}
:host(.select-disabled) {
opacity: .4;
pointer-events: none;
}
:host(.select-key) button {
border: 2px solid #5e9ed6;
}
.select-placeholder {
color: var(--placeholder-color);
}
.select-cover {
@include input-cover();
}
.select-icon {
position: relative;
}
.select-text {
flex: 1;
@ -47,8 +64,20 @@
overflow: hidden;
}
:host(.select-disabled) {
opacity: .4;
.select-icon-inner {
@include position(50%, null, null, 5px);
@include margin(-3px, null, null, null);
position: absolute;
width: 0;
height: 0;
border-top: 5px solid;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
color: var(--icon-color);
pointer-events: none;
}
@ -59,7 +88,3 @@
button:focus {
outline: none;
}
:host(.select-key) button {
border: 2px solid #5e9ed6;
}

12
core/src/components/select/select.tsx
View File

@ -2,7 +2,7 @@ import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State, W
import { ActionSheetButton, ActionSheetOptions, AlertInput, AlertOptions, CssClassMap, Mode, PopoverOptions, SelectInputChangeEvent, SelectInterface, SelectPopoverOption, StyleEvent } from '../../interface';
import { deferEvent, renderHiddenInput } from '../../utils/helpers';
import { createThemedClasses, hostContext } from '../../utils/theme';
import { hostContext } from '../../utils/theme';
@Component({
tag: 'ion-select',
@ -18,9 +18,6 @@ export class Select {
private inputId = `ion-sel-${selectIds++}`;
private labelId?: string;
private overlay?: HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement;
mode!: Mode;
@Element() el!: HTMLIonSelectElement;
@Prop({ connect: 'ion-action-sheet-controller' }) actionSheetCtrl!: HTMLIonActionSheetControllerElement;
@ -31,6 +28,12 @@ export class Select {
@State() keyFocus = false;
@State() text?: string;
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
*/
@Prop() mode!: Mode;
/**
* If true, the user cannot interact with the select. Defaults to `false`.
*/
@ -452,7 +455,6 @@ export class Select {
hostData() {
return {
class: {
...createThemedClasses(this.mode, 'select'),
'in-item': hostContext('.item', this.el),
'select-disabled': this.disabled,
'select-key': this.keyFocus

18
core/src/generated.d.ts vendored
View File

@ -269,6 +269,9 @@ interface IonAlert {
* The main message to be displayed in the alert.
*/
'message': string;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
'mode': Mode;
/**
* Returns a promise that resolves when the alert did dismiss. It also accepts a callback that is called in the same circumstances.
@ -330,6 +333,9 @@ interface IonAlertAttributes extends JSXElements.HTMLAttributes {
* The main message to be displayed in the alert.
*/
'message'?: string;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
'mode'?: Mode;
/**
* Emitted after the alert has dismissed.
@ -3889,7 +3895,7 @@ interface IonSelectOption {
/**
* The text value of the option.
*/
'value': string;
'value': any;
}
interface IonSelectOptionAttributes extends JSXElements.HTMLAttributes {
/**
@ -3911,7 +3917,7 @@ interface IonSelectOptionAttributes extends JSXElements.HTMLAttributes {
/**
* The text value of the option.
*/
'value'?: string;
'value'?: any;
}
interface IonSelectPopover {
@ -3969,6 +3975,10 @@ interface IonSelect {
*/
'interfaceOptions': any;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
'mode': Mode;
/**
* If true, the select can accept multiple values.
*/
'multiple': boolean;
@ -4012,6 +4022,10 @@ interface IonSelectAttributes extends JSXElements.HTMLAttributes {
*/
'interfaceOptions'?: any;
/**
* The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
*/
'mode'?: Mode;
/**
* If true, the select can accept multiple values.
*/
'multiple'?: boolean;

2
core/src/utils/input-interface.ts
View File

@ -11,7 +11,7 @@ export interface InputChangeEvent {
}
export interface SelectInputChangeEvent {
value: string | string[] | undefined;
value: any | any[] | undefined;
text: string;
}