Skip to content

Instantly share code, notes, and snippets.

Avatar
😄
I may be slow to respond.

Albert Yu nightire

😄
I may be slow to respond.
View GitHub Profile
View component.hbs
{{#if @searchKeyword}}
<div class="p-4 text-gray-600">
{{~t "tasks.searching-on" keyword=@searchKeyword~}}
</div>
{{/if}}
<div
class="divide-gray-200 divide-y"
role="list"
{{navigatable "[role=listitem]"}}
View adapters.application.js
import { Promise, defer } from 'rsvp';
import { get } from '@ember/object';
// a mock API response used below
const MOCK_PAYLOAD = {
person: {
id: '1',
name: 'Chris',
age: 33,
father: {
View components.tooltip\.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class extends Component {
@tracked container;
constructor(owner, args) {
super(owner, args);
this.container = this.createContainerElement();
}
View controllers.application\.js
import Controller from '@ember/controller';
import { action, set } from '@ember/object';
import { tracked } from 'tracked-built-ins';
export default class ApplicationController extends Controller {
@tracked items = [
{ id: 1, value: 1 },
{ id: 2, value: 2 },
{ id: 3, value: 3 },
];
View components.tagged-input\.js
import { action } from '@ember/object';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class extends Component {
@tracked tags = ['programming', 'rails'];
@tracked tag = '';
@action addTag(event) {
View components.classic-search\.js
import Component from '@ember/component';
import { computed } from '@ember/object';
export default class extends Component {
query = '';
@computed('query') get _options() {
if (this.query) {
return this.options.filter((option) => {
return option.value.toLowerCase().lastIndexOf(this.query, 0) === 0;
View components.blog-post-card.js
import Ember from 'ember';
const { Component, computed } = Ember;
const BlogPostCardComponent = Component.extend({
classNames: ['blog-post-card', 'card'],
classNameBindings: ['disabled::clickable'],
click() {
if (!this.get('disabled')) {
this.get('viewPost')(this.get('post'));
View controllers.application\.js
import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
export default class ApplicationController extends Controller {
queryParams = [
'page'
];
@tracked page;
@nightire
nightire / components.change-password\.js
Last active May 22, 2020
Octane way of changing password
View components.change-password\.js
import { action } from '@ember/object';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
const MESSAGES = {
staled: 'The old password and new password are the same. The password was not changed.',
invalid: 'The new password and confirm password must be the same value. The password was not changed.'
};
export default class extends Component {
View components.clients.change-password-form\.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
export default class ChangePasswordForm extends Component {
@tracked oldPassword;
@tracked newPassword;
@tracked confirmPassword;