From 151c58e12fbeec7159a5cabc7c2eef670f830088 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Fri, 24 Aug 2018 04:09:16 +0200 Subject: [PATCH] fix(select): support any kind of value fixes #15200 --- core/src/components/alert/alert.tsx | 8 ++- core/src/components/alert/readme.md | 2 +- core/src/components/item/item.ios.scss | 5 +- core/src/components/item/item.md.scss | 4 +- core/src/components/select-option/readme.md | 2 +- .../select-option/select-option.tsx | 2 +- core/src/components/select/readme.md | 1 + core/src/components/select/select.ios.scss | 32 ------------ core/src/components/select/select.md.scss | 52 ------------------- core/src/components/select/select.scss | 37 ++++++++++--- core/src/components/select/select.tsx | 12 +++-- core/src/generated.d.ts | 18 ++++++- core/src/utils/input-interface.ts | 2 +- 13 files changed, 72 insertions(+), 105 deletions(-) diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index 6e555fbe31..d5c677c1d9 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -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. */ diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md index 51227c5e14..5b8ad6786f 100644 --- a/core/src/components/alert/readme.md +++ b/core/src/components/alert/readme.md @@ -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` | diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss index 4aa7191c50..50389b25e0 100644 --- a/core/src/components/item/item.ios.scss +++ b/core/src/components/item/item.ios.scss @@ -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 { diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss index 88858c5194..157b15dd2c 100644 --- a/core/src/components/item/item.md.scss +++ b/core/src/components/item/item.md.scss @@ -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; diff --git a/core/src/components/select-option/readme.md b/core/src/components/select-option/readme.md index 602b098cba..8d38058089 100644 --- a/core/src/components/select-option/readme.md +++ b/core/src/components/select-option/readme.md @@ -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 diff --git a/core/src/components/select-option/select-option.tsx b/core/src/components/select-option/select-option.tsx index 4c2fb8e7df..ebf9df7a95 100644 --- a/core/src/components/select-option/select-option.tsx +++ b/core/src/components/select-option/select-option.tsx @@ -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. diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md index 0a1ad815bf..434eb2b9c5 100644 --- a/core/src/components/select/readme.md +++ b/core/src/components/select/readme.md @@ -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` | diff --git a/core/src/components/select/select.ios.scss b/core/src/components/select/select.ios.scss index 4d6e8fba62..060286470e 100644 --- a/core/src/components/select/select.ios.scss +++ b/core/src/components/select/select.ios.scss @@ -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); -} diff --git a/core/src/components/select/select.md.scss b/core/src/components/select/select.md.scss index e2d7dc2e3c..85358ba2c9 100644 --- a/core/src/components/select/select.md.scss +++ b/core/src/components/select/select.md.scss @@ -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; -} diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss index b623787c9a..57eb9d213c 100644 --- a/core/src/components/select/select.scss +++ b/core/src/components/select/select.scss @@ -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; -} diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index f836487e16..780ec3847b 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -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 diff --git a/core/src/generated.d.ts b/core/src/generated.d.ts index 3ea3b967bf..24f888462d 100644 --- a/core/src/generated.d.ts +++ b/core/src/generated.d.ts @@ -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; diff --git a/core/src/utils/input-interface.ts b/core/src/utils/input-interface.ts index 927a4183d1..dc5738f6ce 100644 --- a/core/src/utils/input-interface.ts +++ b/core/src/utils/input-interface.ts @@ -11,7 +11,7 @@ export interface InputChangeEvent { } export interface SelectInputChangeEvent { - value: string | string[] | undefined; + value: any | any[] | undefined; text: string; }