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

refactor(components): update to use shadow DOM and work with css variables

Browse Source 
- updates components to use shadow DOM or scoped if they require css variables
- moves global styles to an external stylesheet that needs to be imported
- adds support for additional colors and removes the Sass loops to generate colors for each component
- several property renames, bug fixes, and test updates

Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com>
Co-authored-by: Adam Bradley <adambradley25@gmail.com>
Co-authored-by: Cam Wiegert <cam@camwiegert.com>
This commit is contained in:
Brandy Carney
2018-07-09 12:57:21 -04:00
parent a4659f03b4
commit a7f1f4daa7
710 changed files with 20999 additions and 20853 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
angular/src/directives/icon.ts
View File

@ -1,45 +0,0 @@
import { Directive, ElementRef, Input } from '@angular/core';
import { inputs } from '../util/util';
@Directive({ selector: 'ion-icon' })
export class Icon {
/**
* The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Input() color: string;
/**
* Specifies the label to use for accessibility. Defaults to the icon name.
*/
@Input() ariaLabel = '';
/**
* Specifies which icon to use on `ios` mode.
*/
@Input() ios = '';
/**
* Specifies which icon to use on `md` mode.
*/
@Input() md = '';
/**
* Specifies which icon to use. The appropriate icon will be used based on the mode.
* For more information, see [Ionicons](/docs/ionicons/).
*/
@Input() name = '';
/**
* The size of the icon.
* Available options are: `"small"` and `"large"`.
*/
@Input() size: string;
constructor(el: ElementRef) {
inputs(this, el, ['color', 'ariaLabel', 'ios', 'md', 'name', 'size']);
}
}

1
angular/src/directives/index.ts
View File

@ -14,7 +14,6 @@ export { IonRouterOutlet } from './navigation/ion-router-outlet';
export { HrefDelegate } from './navigation/href-delegate';
export { NavParams } from './navigation/nav-params';
export { Icon } from './icon';
export { VirtualScroll } from './virtual-scroll/virtual-scroll';
export { VirtualItem } from './virtual-scroll/virtual-item';
export { VirtualHeader } from './virtual-scroll/virtual-header';

2
angular/src/directives/proxies-list.txt
View File

@ -16,6 +16,7 @@ export const DIRECTIVES = [
d.Checkbox,
d.Chip,
d.ChipButton,
d.ChipIcon,
d.Col,
d.Content,
d.Datetime,
@ -26,6 +27,7 @@ export const DIRECTIVES = [
d.Grid,
d.Header,
d.HideWhen,
d.Icon,
d.Img,
d.InfiniteScroll,
d.InfiniteScrollContent,

82
angular/src/directives/proxies.ts
View File

@ -79,10 +79,10 @@ export class Card {
}
export declare interface CardContent extends StencilComponents.IonCardContent {}
@Directive({selector: 'ion-card-content', inputs: ['color', 'mode']})
@Directive({selector: 'ion-card-content', inputs: ['mode']})
export class CardContent {
constructor(r: ElementRef) {
proxyInputs(this, r, ['color', 'mode']);
proxyInputs(this, r, ['mode']);
}
}
@ -139,17 +139,28 @@ export class ChipButton {
}
}
export declare interface ChipIcon extends StencilComponents.IonChipIcon {}
@Directive({selector: 'ion-chip-icon', inputs: ['color', 'mode', 'name']})
export class ChipIcon {
constructor(r: ElementRef) {
proxyInputs(this, r, ['color', 'mode', 'name']);
}
}
export declare interface Col extends StencilComponents.IonCol {}
@Directive({selector: 'ion-col'})
@Directive({selector: 'ion-col', inputs: ['offset', 'offsetXs', 'offsetSm', 'offsetMd', 'offsetLg', 'offsetXl', 'pull', 'pullXs', 'pullSm', 'pullMd', 'pullLg', 'pullXl', 'push', 'pushXs', 'pushSm', 'pushMd', 'pushLg', 'pushXl', 'size', 'sizeXs', 'sizeSm', 'sizeMd', 'sizeLg', 'sizeXl']})
export class Col {
constructor(r: ElementRef) {
proxyInputs(this, r, ['offset', 'offsetXs', 'offsetSm', 'offsetMd', 'offsetLg', 'offsetXl', 'pull', 'pullXs', 'pullSm', 'pullMd', 'pullLg', 'pullXl', 'push', 'pushXs', 'pushSm', 'pushMd', 'pushLg', 'pushXl', 'size', 'sizeXs', 'sizeSm', 'sizeMd', 'sizeLg', 'sizeXl']);
}
}
export declare interface Content extends StencilComponents.IonContent {}
@Directive({selector: 'ion-content', inputs: ['fullscreen', 'forceOverscroll', 'scrollEnabled', 'scrollEvents']})
@Directive({selector: 'ion-content', inputs: ['color', 'fullscreen', 'forceOverscroll', 'scrollEnabled', 'scrollEvents']})
export class Content {
constructor(r: ElementRef) {
proxyMethods(this, r, ['scrollToTop', 'scrollToBottom', 'scrollByPoint', 'scrollToPoint']);
proxyInputs(this, r, ['fullscreen', 'forceOverscroll', 'scrollEnabled', 'scrollEvents']);
proxyMethods(this, r, ['getScrollElement']);
proxyInputs(this, r, ['color', 'fullscreen', 'forceOverscroll', 'scrollEnabled', 'scrollEvents']);
}
}
@ -190,31 +201,42 @@ export class FabList {
}
export declare interface Footer extends StencilComponents.IonFooter {}
@Directive({selector: 'ion-footer', inputs: ['translucent']})
@Directive({selector: 'ion-footer', inputs: ['mode']})
export class Footer {
constructor(r: ElementRef) {
proxyInputs(this, r, ['translucent']);
proxyInputs(this, r, ['mode']);
}
}
export declare interface Grid extends StencilComponents.IonGrid {}
@Directive({selector: 'ion-grid'})
@Directive({selector: 'ion-grid', inputs: ['fixed']})
export class Grid {
constructor(r: ElementRef) {
proxyInputs(this, r, ['fixed']);
}
}
export declare interface Header extends StencilComponents.IonHeader {}
@Directive({selector: 'ion-header', inputs: ['translucent']})
@Directive({selector: 'ion-header', inputs: ['mode']})
export class Header {
constructor(r: ElementRef) {
proxyInputs(this, r, ['translucent']);
proxyInputs(this, r, ['mode']);
}
}
export declare interface HideWhen extends StencilComponents.IonHideWhen {}
@Directive({selector: 'ion-hide-when', inputs: ['orientation', 'mediaQuery', 'size', 'platform', 'or']})
@Directive({selector: 'ion-hide-when', inputs: ['mode', 'orientation', 'mediaQuery', 'size', 'platform', 'or']})
export class HideWhen {
constructor(r: ElementRef) {
proxyInputs(this, r, ['orientation', 'mediaQuery', 'size', 'platform', 'or']);
proxyInputs(this, r, ['mode', 'orientation', 'mediaQuery', 'size', 'platform', 'or']);
}
}
export declare interface Icon extends StencilComponents.IonIcon {}
@Directive({selector: 'ion-icon', inputs: ['ariaLabel', 'color', 'icon', 'ios', 'md', 'mode', 'name', 'size', 'src']})
export class Icon {
constructor(r: ElementRef) {
proxyInputs(this, r, ['ariaLabel', 'color', 'icon', 'ios', 'md', 'mode', 'name', 'size', 'src']);
}
}
@ -264,10 +286,10 @@ export class Input {
}
export declare interface Item extends StencilComponents.IonItem {}
@Directive({selector: 'ion-item', inputs: ['color', 'mode', 'button', 'detail', 'disabled', 'href', 'lines', 'routerDirection']})
@Directive({selector: 'ion-item', inputs: ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'href', 'lines', 'state', 'routerDirection']})
export class Item {
constructor(r: ElementRef) {
proxyInputs(this, r, ['color', 'mode', 'button', 'detail', 'disabled', 'href', 'lines', 'routerDirection']);
proxyInputs(this, r, ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'href', 'lines', 'state', 'routerDirection']);
}
}
@ -325,11 +347,11 @@ export class Label {
}
export declare interface List extends StencilComponents.IonList {}
@Directive({selector: 'ion-list', inputs: ['lines']})
@Directive({selector: 'ion-list', inputs: ['lines', 'inset']})
export class List {
constructor(r: ElementRef) {
proxyMethods(this, r, ['getOpenItem', 'setOpenItem', 'closeSlidingItems']);
proxyInputs(this, r, ['lines']);
proxyInputs(this, r, ['lines', 'inset']);
}
}
@ -342,14 +364,14 @@ export class ListHeader {
}
export declare interface Menu extends StencilComponents.IonMenu {}
@Directive({selector: 'ion-menu', inputs: ['contentId', 'menuId', 'type', 'disabled', 'side', 'swipeEnabled', 'persistent', 'maxEdgeStart'], outputs: ['ionOpen', 'ionClose', 'ionMenuChange']})
@Directive({selector: 'ion-menu', inputs: ['contentId', 'menuId', 'type', 'disabled', 'side', 'swipeEnabled', 'maxEdgeStart'], outputs: ['ionOpen', 'ionClose', 'ionMenuChange']})
export class Menu {
ionOpen: EventEmitter<any>;
ionClose: EventEmitter<any>;
ionMenuChange: EventEmitter<any>;
constructor(r: ElementRef) {
proxyMethods(this, r, ['isOpen', 'open', 'close', 'toggle', 'setOpen', 'isActive']);
proxyInputs(this, r, ['contentId', 'menuId', 'type', 'disabled', 'side', 'swipeEnabled', 'persistent', 'maxEdgeStart']);
proxyInputs(this, r, ['contentId', 'menuId', 'type', 'disabled', 'side', 'swipeEnabled', 'maxEdgeStart']);
proxyOutputs(this, ['ionOpen', 'ionClose', 'ionMenuChange']);
}
}
@ -377,7 +399,7 @@ export class Nav {
ionNavWillChange: EventEmitter<any>;
ionNavDidChange: EventEmitter<any>;
constructor(r: ElementRef) {
proxyMethods(this, r, ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'setRouteId', 'getRouteId', 'canGoBack', 'getActive', 'getByIndex', 'getPrevious', 'length']);
proxyMethods(this, r, ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'setRouteId', 'getRouteId', 'canGoBack', 'getActive', 'getByIndex', 'getPrevious', 'isAnimating', 'length']);
proxyInputs(this, r, ['swipeBackEnabled', 'animated', 'delegate', 'rootParams', 'root']);
proxyOutputs(this, ['ionNavWillLoad', 'ionNavWillChange', 'ionNavDidChange']);
}
@ -485,11 +507,11 @@ export class ReorderGroup {
}
export declare interface RippleEffect extends StencilComponents.IonRippleEffect {}
@Directive({selector: 'ion-ripple-effect', inputs: ['tapClick']})
@Directive({selector: 'ion-ripple-effect', inputs: ['parent', 'tapClick']})
export class RippleEffect {
constructor(r: ElementRef) {
proxyMethods(this, r, ['addRipple']);
proxyInputs(this, r, ['tapClick']);
proxyInputs(this, r, ['parent', 'tapClick']);
}
}
@ -512,7 +534,7 @@ export class Scroll {
}
export declare interface Searchbar extends StencilComponents.IonSearchbar {}
@Directive({selector: 'ion-searchbar', inputs: ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonText', 'debounce', 'placeholder', 'showCancelButton', 'spellcheck', 'type', 'value'], outputs: ['ionInput', 'ionChange', 'ionCancel', 'ionClear', 'ionBlur', 'ionFocus']})
@Directive({selector: 'ion-searchbar', inputs: ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'], outputs: ['ionInput', 'ionChange', 'ionCancel', 'ionClear', 'ionBlur', 'ionFocus']})
export class Searchbar {
ionInput: EventEmitter<any>;
ionChange: EventEmitter<any>;
@ -521,7 +543,7 @@ export class Searchbar {
ionBlur: EventEmitter<any>;
ionFocus: EventEmitter<any>;
constructor(r: ElementRef) {
proxyInputs(this, r, ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonText', 'debounce', 'placeholder', 'showCancelButton', 'spellcheck', 'type', 'value']);
proxyInputs(this, r, ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']);
proxyOutputs(this, ['ionInput', 'ionChange', 'ionCancel', 'ionClear', 'ionBlur', 'ionFocus']);
}
}
@ -537,11 +559,11 @@ export class Segment {
}
export declare interface SegmentButton extends StencilComponents.IonSegmentButton {}
@Directive({selector: 'ion-segment-button', inputs: ['color', 'mode', 'checked', 'disabled', 'href', 'value'], outputs: ['ionSelect']})
@Directive({selector: 'ion-segment-button', inputs: ['color', 'mode', 'checked', 'disabled', 'value'], outputs: ['ionSelect']})
export class SegmentButton {
ionSelect: EventEmitter<any>;
constructor(r: ElementRef) {
proxyInputs(this, r, ['color', 'mode', 'checked', 'disabled', 'href', 'value']);
proxyInputs(this, r, ['color', 'mode', 'checked', 'disabled', 'value']);
proxyOutputs(this, ['ionSelect']);
}
}
@ -580,10 +602,10 @@ export class SelectPopover {
}
export declare interface ShowWhen extends StencilComponents.IonShowWhen {}
@Directive({selector: 'ion-show-when', inputs: ['orientation', 'mediaQuery', 'size', 'platform', 'or']})
@Directive({selector: 'ion-show-when', inputs: ['mode', 'orientation', 'mediaQuery', 'size', 'platform', 'or']})
export class ShowWhen {
constructor(r: ElementRef) {
proxyInputs(this, r, ['orientation', 'mediaQuery', 'size', 'platform', 'or']);
proxyInputs(this, r, ['mode', 'orientation', 'mediaQuery', 'size', 'platform', 'or']);
}
}
@ -601,7 +623,7 @@ export class Slide {
}
export declare interface Slides extends StencilComponents.IonSlides {}
@Directive({selector: 'ion-slides', inputs: ['options', 'pager'], outputs: ['ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']})
@Directive({selector: 'ion-slides', inputs: ['options', 'pager', 'scrollbar'], outputs: ['ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']})
export class Slides {
ionSlideWillChange: EventEmitter<any>;
ionSlideDidChange: EventEmitter<any>;
@ -618,7 +640,7 @@ export class Slides {
ionSlideTouchEnd: EventEmitter<any>;
constructor(r: ElementRef) {
proxyMethods(this, r, ['update', 'slideTo', 'slideNext', 'slidePrev', 'getActiveIndex', 'getPreviousIndex', 'length', 'isEnd', 'isBeginning', 'startAutoplay', 'stopAutoplay', 'lockSwipeToNext', 'lockSwipeToPrev', 'lockSwipes']);
proxyInputs(this, r, ['options', 'pager']);
proxyInputs(this, r, ['options', 'pager', 'scrollbar']);
proxyOutputs(this, ['ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']);
}
}

5
angular/src/ionic-module.ts
View File

@ -24,6 +24,7 @@ const DECLARATIONS = [
d.Checkbox,
d.Chip,
d.ChipButton,
d.ChipIcon,
d.Col,
d.Content,
d.Datetime,
@ -34,6 +35,7 @@ const DECLARATIONS = [
d.Grid,
d.Header,
d.HideWhen,
d.Icon,
d.Img,
d.InfiniteScroll,
d.InfiniteScrollContent,
@ -86,9 +88,6 @@ const DECLARATIONS = [
d.Toolbar,
d.ToolbarTitle,
// custom proxy
c.Icon,
// ngModel accessors
c.BooleanValueAccessor,
c.NumericValueAccessor,