Ways to compose input components in Vue.js - javascript

I want to have a base-input component, then a number-input component that extends that, and a currency-input component that extends that.
By extend I was hoping to just have the 'child' component (in inheritence terms) use the parent component in its template since that seems to be the 'Vue way'.
But I want to be able to automatically support events etc without having to manually add handles for #click, #blur, #keyup, etc (or any other events that get added later)
Ideally I would like to be able to write:
<currency-input #click="clickMe"></currency-input>
and have the currency-input pick up the events of the input that's inside of it.
// baseInput.js
<template>
<input v-on:click="">
</template>
I am also using masked-input in many of the inputs to help with consistent masking. I had a mixin, but that doesn't seem to allow me to change the markup to add the prop rendering. I'm wondering what the recommended way of doing this would be so that I can easily make different types of input components that always have default input functionality.

click.native will listen on a component for a native event to bubble up from an element contained in the component. In your case, it would be
<currency-input #click.native="clickMe"></currency-input>

Related

Svelte: Change classes of checked checkbox (without creating variable for checkbox)

I am kind of new to Svelte and trying to solve this (seemingly trivial) problem with my UI:
I would like to change the classes of a checkbox and/or its parent element when the checkbox is checked. The Svelte docs tell me to create a boolean var for every checkbox and bind activation the classes to it: https://svelte.dev/tutorial/class-shorthand
but I have a random amount of checkboxes and many different types of checkboxes with different behaviour in styling and I don't want to create (or generate) a variable for every single checkbox.
Is there any elegant way in Svelte for changing the classes of checkboxes when they are indivually checked? (vanilla javascript instead if jquery if possible :) )
Cheers
Some Svelte noob
Based on what you have said, I would create a subcomponent to wrap the checkbox.
Lets Call it ToggleCheck. And if you want a div around each checkbox, then the div would live inside of of the ToggleCheck component
Then each instance of ToggleCheck would have its own var.
Your parent component could then have one or many instances of , even within a loop.
For something like this I would use... use, or actions. You can add/remove the class/classes using vanilla JS.
Since the class doesn't actually exist in the component you'll get an error if you define the class in your component unless you use :global()and even when doing that if you've set a property of CSS you'll need to make sure the specificity of the global selector is higher than the class generated by Svelte (i.e. :global(div.class))
Here's a REPL showing it in action with a few checkboxes and no need for variables or id's.

Accessing custom component property at runtime to set value after render the component

I am working on Angular application. My requirement is, lets take a page and custom component. My custom component has 3 inputs and I have bind the custom component tag in my page HTML.
<my-column [setInfo]="info" [disabled]="" [inspectRequired]="'true'"></my-column>
The above mentioned component rendered at the time page loading initially. After that, at one point of time I need to pass the value to the attribute [disabled] from my class(programmatically). How I can access this my own component property and set the value at runtime using DOM ? Solutions are most welcome. Thanks in advance.
You can achieve this by using a chrome browser extension called Augury
After installing it, open chrome dev tools (ctrl + shift + I)
click the Augury tab as shown in the screenshot below
click on the Augury tab
click on the particular component whose properties you want to change from the DOM tree
change the value
you could do something like this I guess even if I'm not sure to get the whole context of your code. Here is for a single column component you'll have to dynamically create subjects with push() and splice() for example.
main.ts
...
disabled = false;
...
ngAfterViewInit(){
this.disabled = true;
}
main.html
<my-column [setInfo]="info" [disabled]="disabled" [inspectRequired]="'true'">
now if you want to change input of main.html when my-column is loaded I recommend you to suscribe to a Subject shared via a service injected into both components.
in your main html this would do something like
<div *ngFor="let i of index; col of columns;">
<my-column [setInfo]="info" [disabled]="mySubjectService.mySubject[i] | async" [inspectRequired]="'true'">
</div

How to achieve two way data binding in case of dynamic loading of child component using ComponentFactoryResolver

I am adding child component dynamically using ComponentFactoryResolver and able to using ngModel in the child component but it's working as a one way data binding rather than two way.
I tried by adding child component tag and it's working but in my case I can't add that. So need a solution with ComponentFactoryResolver. Please check the below stackblitz for better understanding. i need the parent component vlue to be update on second text box value change.
Example Stackblitz.
const factory = this.componentFactoryResolver.resolveComponentFactory(AppChildComponent);
const component = factory.create(this.ViewContainerRef.parentInjector);
component.instance['childData']=this.parentData;
this.ViewContainerRef.insert(component.hostView);

How to focus on component

I am using 'keen-ui' library in my project. Here is special component for select item. I want to handle event from another component and set focus on this, but I don't know how to.
Another components, that have inside <input/> tag can be focused like this.$refs[component name].$el.children[0].children[1].focus, where children[0].children[1] is <input/> element. This is ugly, but if the component doesn't contain input tag, we can not do even this.
Examining the widgets, I see that they contain a div with tabindex="0", which means they can receive focus.
If you have a ref on the component, you should be able to do something like
const focusableEl = this.$refs.uiselect.querySelector('[tabindex="0"]');
focusableEl.dispatchEvent(new Event('focus'));
and the widget will light up. I actually did that from the console to test it out. Interestingly, blur did not work for me.

Access another component DOM element from a separated competent in React avoiding to document.getElementById

I have two different components in my React application.One component to display pop up, and other for text search field.
There is no relation(parent-child)between them.
My question is when user clicks pop up message(component), be focused text field in another component.
How can I handle this situation without using document.getElementById?
only using a react a specific way like reactDOM with ref.
Is it possible to handle like that?
Thanks
Find the common parent component, and write a function which updates a state with ref of the element to be focused. Pass down that function as props to the second component.
And use <input ref={r => this.props.func(r)
Now on click of first component you can access this parent state.

Categories

Resources