How to use the @dojo/framework/widget-core/d.v function in @dojo/framework

To help you get started, we’ve selected a few @dojo/framework examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github vogloblinsky / web-components-benchmark / todomvc / dojo / src / todo-input / TodoInput.ts View on Github external
protected render() {
        return [
            v(
                'form',
                {
                    classes: this.theme(css.newtodoform),
                    onsubmit: (e: Event) => {
                        const { onSubmit } = this.properties;
                        e.preventDefault();
                        e.stopPropagation();
                        this.finaltodo = this.newtodo;
                        onSubmit(this.finaltodo);
                    }
                },
                [
                    v('input', {
                        classes: this.theme(css.newtodo),
                        type: 'text',
                        value: '',
github gothinkster / dojo-realworld-example-app / src / widgets / Editor.ts View on Github external
oninput: this._onTagInput,
										onkeyup: this._onTagCreate
									}),
									v('div', { classes: 'tag-list' }, tags.map((tag) => {
										return v('span', { classes: ['tag-default', 'tag-pill'] }, [
											v('i', {
												classes: 'ion-close-round',
												onclick: () => {
													onTagDelete({ tag });
												}
											}),
											tag
										]);
									}))
								]),
								v('button', {
									classes: ['btn', 'btn-lg', 'pull-xs-right', 'btn-primary'],
									type: 'button',
									disabled: inProgress,
									onclick: this._onPublishPost
								}, ['Publish Article'])
							])
						])
					])
				])
			])
		]);
	}
}
github dojo / dojo.io / site / source / tutorials / 1030_routing / demo / finished / biz-e-corp / src / widgets / WorkerContainer.ts View on Github external
private _createFilterLinks() {
		const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
		const links = [];
		for (let i = 0; i < alphabet.length; i++) {
			const char = alphabet.charAt(i);
			links.push(
				v('span', { classes: this.theme(css.links) }, [
					w(Link, { key: char, to: 'filter', params: { filter: char }}, [ char ])
				])
			);
		}
		return links;
	}
github dojo / dojo.io / site / source / tutorials / 007_theming / demo / initial / biz-e-corp / src / widgets / Worker.ts View on Github external
private _renderFront() {
		const {
			firstName = 'firstName',
			lastName = 'lastName'
		} = this.properties;

		return v('div', {
				classes: this.theme(css.workerFront),
				onclick: this.flip
			}, [
				v('div', { classes: this.theme(css.image) }, []),
				v('div', [
					v('strong', [ `${lastName}, ${firstName}` ])
				])
			]
		);
	}
github gothinkster / dojo-realworld-example-app / src / widgets / Register.ts View on Github external
protected render() {
		const { errors, email, password, username, inProgress = false } = this.properties;

		return v('div', { classes: 'auth-page' }, [
			v('div', { classes: ['container', 'page'] }, [
				v('div', { classes: 'row' }, [
					v('div', { classes: ['col-md-6', 'offset-md-3', 'col-xs-12'] }, [
						v('h1', { classes: 'text-xs-center' }, ['Sign Up']),
						v('p', { classes: 'text-xs-center' }, [w(Link, { to: 'login' }, ['Have an account?'])]),
						errors ? w(ErrorList, { errors }) : null,
						v('form', { onsubmit: this._onRegister }, [
							v('fieldset', [
								v('fieldset', { classes: 'form-group' }, [
									createInputNode(username, 'Username', this._onUsernameInput)
								]),
								v('fieldset', { classes: 'form-group' }, [
									createInputNode(email, 'Email', this._onEmailInput)
								]),
								v('fieldset', { classes: 'form-group' }, [
									createInputNode(password, 'Password', this._onPasswordInput)
								]),
								v('button', {
									classes: ['btn btn-lg', 'btn-primary', 'pull-xs-right'],
									disabled: inProgress,
									type: 'submit'
								}, ['Sign Up'])
							])
						])
					])
github dojo / dojo.io / site / source / tutorials / 008_animations / demo / finished / zombies / src / widgets / Zombies.ts View on Github external
protected render() {
		const webAnimation = this.meta(WebAnimation);
		webAnimation.animate('zombieOne', this._getZombieAnimation('zombieOneShuffle', 'left'));
		webAnimation.animate('zombieTwo', this._getZombieAnimation('zombieTwoShuffle', 'right'));
		webAnimation.animate('zombieOneBody', this._getZombieBodyAnimation('zombieOneBody'));
		webAnimation.animate('zombieOneBackLeg', this._getZombieLegAnimation('zombieOneBackLeg'));
		webAnimation.animate('zombieOneFrontLeg', this._getZombieLegAnimation('zombieOneFrontLeg', true));
		webAnimation.animate('zombieTwoBody', this._getZombieBodyAnimation('zombieTwoBody'));
		webAnimation.animate('zombieTwoBackLeg', this._getZombieLegAnimation('zombieTwoBackLeg'));
		webAnimation.animate('zombieTwoFrontLeg', this._getZombieLegAnimation('zombieTwoFrontLeg', true));

		return v('div', { classes: css.root }, [
			v('div', { classes: css.controls }, [
				w(Slider, { min: 0.1, max: 10, step: 0.1, value: this._zombieLegsPlaybackRate, onInput: this._onZombieLegsPlaybackRateChange })
			]),
			v('div', { classes: css.zombieOne, onclick: this._onZombieClick, key: 'zombieOne' }, [
				v('div', { classes: css.zombieOneBody, key: 'zombieOneBody' }),
				v('div', { classes: [ css.zombieOneLeg, css.zombieOneBackLeg ], key: 'zombieOneBackLeg' }),
				v('div', { classes: [ css.zombieOneLeg, css.zombieOneFrontLeg ], key: 'zombieOneFrontLeg' })
			]),
			v('div', { classes: css.zombieTwo, onclick: this._onZombieClick, key: 'zombieTwo' }, [
				v('div', { classes: css.zombieTwoBody, key: 'zombieTwoBody' }),
				v('div', { classes: [ css.zombieTwoLeg, css.zombieTwoBackLeg ], key: 'zombieTwoBackLeg' }),
				v('div', { classes: [ css.zombieTwoLeg, css.zombieTwoFrontLeg ], key: 'zombieTwoFrontLeg' })
			]),
			v('div', { classes: css.heartsHolder }, this._getHearts())
		]);
	}
}
github gothinkster / dojo-realworld-example-app / src / widgets / Settings.ts View on Github external
protected render() {
		const { email, password, bio, imageUrl, username } = this.properties;

		return v('div', { classes: 'settings-page' }, [
			v('div', { classes: ['container', 'page'] }, [
				v('div', { classes: 'row' }, [
					v('div', { classes: ['col-md-6', 'offset-md-3', 'col-xs-12'] }, [
						v('h1', { classes: 'text-xs-center' }, ['Your Settings']),
						v('form', [
							v('fieldset', [
								createInputNode(imageUrl, 'URL of profile picture', this._onImageUrlInput),
								createInputNode(username, 'Your Name', this._onUsernameInput),
								v('fieldset', { classes: 'form-group' }, [
									v('textarea', {
										value: bio,
										classes: ['form-control', 'form-control-lg'],
										rows: 8,
										placeholder: 'Short bio about you',
										oninput: this._onBioInput
									})
								]),
								createInputNode(email, 'Email', this._onEmailInput),
								createInputNode(password, 'Password', this._onPasswordInput),
								v('button', {
									onclick: this._onSubmit,
									type: 'submit',
									classes: ['btn', 'btn-lg', 'btn-primary', 'pull-xs-right']
								}, ['Update Settings'])
							])
						]),
github dojo / dojo.io / site / source / tutorials / 004_user_interactions / demo / initial / biz-e-corp / src / widgets / Worker.ts View on Github external
protected render() {
		const {
			firstName = 'firstName',
			lastName = 'lastName'
		} = this.properties;

		return v('div', {
				classes: this.theme(css.worker)
			}, [
				v('img', {
					classes: this.theme(css.image),
					src: 'https://dojo.io/tutorials/resources/worker.svg' }),
				v('div', [
					v('strong', [ `${lastName}, ${firstName}` ])
				])
			]
		);
	}
}
github gothinkster / dojo-realworld-example-app / src / widgets / Article.ts View on Github external
]),
				v('div', { classes: 'row' }, [
					v('div', { classes: ['col-xs-12', 'col-md-8', 'offset-md-2'] }, [
						isAuthenticated
							? v('form', { classes: ['card', 'comment-form'] }, [
									v('div', { classes: 'card-block' }, [
										v('textarea', {
											value: newComment,
											oninput: this._onNewCommentInput,
											classes: 'form-control',
											placeholder: 'Write a comment...',
											rows: 3
										})
									]),
									v('div', { classes: 'card-footer' }, [
										v('img', { classes: 'comment-author-img', src: '' }),
										v(
											'button',
											{ onclick: this._addComment, classes: ['btn', 'btn-sm', 'btn-primary'] },
											['Post Comment']
										)
									])
								])
							: v('p', [
									w(Link, { to: 'login' }, ['Sign In']),
									' or ',
									w(Link, { to: 'register' }, ['Sign Up']),
									' to add comments on this article.'
								]),
						v('div', comments.map((comment: CommentItem, index: number) => {
							return w(Comment, {
								key: index,
github dojo / dojo.io / site / source / tutorials / 004_user_interactions / demo / finished / biz-e-corp / src / widgets / Worker.ts View on Github external
private _renderFront() {
		const {
			firstName = 'firstName',
			lastName = 'lastName'
		} = this.properties;

		return v('div', {
				classes: this.theme(css.workerFront),
				onclick: this.flip
			}, [
				v('img', {
					classes: this.theme(css.image),
						src: 'https://dojo.io/tutorials/resources/worker.svg' }),
				v('div', [
					v('strong', [ `${lastName}, ${firstName}` ])
				])
			]
		);
	}