How to write custom form component in Ant Design Vue 2x? - antd

Ant Design Vue v1 provided a documented example for writing custom form components.
The same approach does not apply to version 2x.
How can a custom form component be implemented in AntDV 2x (vue 3) using useForm?

I believe I have figured this out. Previously your custom component needed to emit a change event:
methods: {
handleChange(value) {
this.emit('change', value);
},
},
Having looked through the source code I learned that you also need to emit an update:value event as well:
methods: {
handleChange(value) {
this.emit('update:value', value);
this.emit('change', value);
},
},

Related

Use Vaadin badge in lit element

I'm trying to use vaadin badges in lit element.
The documentation is mentioning to "To use these classes in your application, enable them in your theme’s theme.json" but I don't have such a file so it is really confusing to me. Most of the documentation focuses on Java so I am guessing this is where the confusion comes from. So far I have only installed some components via NPM.
I tried to create a frontend/themes/common-theme/theme.json file anyways, but without success so far.
Here is how my element looks like at the moment :
import {LitElement, html} from 'lit';
import '#vaadin/vertical-layout';
import '#vaadin/horizontal-layout';
import '#vaadin/vaadin-lumo-styles/badge.js';
export class PaymentLink extends LitElement {
static properties = {
version: {},
link : { Object}
};
constructor() {
super();
}
render() {
return html`
<vaadin-horizontal-layout>
${this.link.id}
<span theme="badge">Pending</span>
</vaadin-horizontal-layout>
`;
}
}
customElements.define('payment-link', PaymentLink);
Could someone please show me the light? Here is a stackblitz example : https://stackblitz.com/edit/lit-element-jjzdpa?file=src/index.js
The #vaadin/vaadin-lumo-styles/badge.js module only exports the styles, just importing it will not automatically create a style tag with the respective CSS. With Vaadin Flow or Hilla applications that can done automatically by configuring said theme JSON file.
If you want to use badge standalone in a Lit app, the best approach is probably to add the badge styles to the styles of your root / application Lit component:
import { badge } from '#vaadin/vaadin-lumo-styles/badge.js';
class MyLitApp extends LitElement {
static get styles() {
return [badge, /* ...other app styles */]
}
}
Note that if one of your components using badge uses a shadow root, then you need to add the badge styles to that component in the same manner.

how can I use component only in dev?

I have some translation components that I would like to use only in the development environment. The idea is that the component does not get compiled when the project builds.
How can I achieve that in AngularDart 5?
Depending on how you'd like your component to be loaded/not loaded, there are different strategies you can take. My preferred one usually is to have two entry-points for your application, i.e. web/main.dart, and web/main.dev.dart, and have the latter be the only one that imports/uses/loads the component in question.
For example, you could have the following definition in lib/translation.dart:
void Function() loadTranslationComponent = () {};
And in web/main.dev.dart:
import 'package:name/translation.dart';
void main() {
loadTranslationComponent = () {
// Code to initialize and use only in development mode.
};
}

Vaadin 7 how to check if scrollbar is visible or not

How to check in Vaadin 7 if scrollbar is visible or not for a certain component, for example for Panel
Any implementation of AbstractClientConnector can be extended with AbstractExtension: https://vaadin.com/api/com/vaadin/server/AbstractExtension.html
An extension is a possible way to extend the functionality of your component: https://vaadin.com/docs/-/part/framework/gwt/gwt-extension.html
Adding features to existing components by extending them by inheritance creates a problem when you want to combine such features. For example, one add-on could add spell-check to a TextField, while another could add client-side validation. Combining such add-on features would be difficult if not impossible. You might also want to add a feature to several or even to all components, but extending all of them by inheritance is not really an option. Vaadin includes a component plug-in mechanism for these purposes. Such plug-ins are simply called extensions.
In the client-side extension implementation you can write your custom GWT code like following (pseudo code):
#Override
protected void extend(ServerConnector target) {
// Get the extended widget
final Widget widget = ((ComponentConnector) target).getWidget();
// register RPCs
YourServerRpcImplementation serverRpc = getRpcProxy(YourServerRpcImplementation.class); // client to server
registerRpc(YourClientRpcImplementation.class, this); // server to client, unused in this example
// add listener and update server state
Window.addResizeHandler(new ResizeHandler() {
#Override
public void onResize(ResizeEvent event) {
boolean scrollbarVisible = widget.getElement().getScrollHeight() > widget.getElement().getClientHeight();
serverRpc.yourEventMethod(scrollbarVisible);
}
});
}
Passing events between server and client: https://vaadin.com/docs/-/part/framework/gwt/gwt-rpc.html

Rally app settings in multiple mixins

If multiple mixins in the same app try to use settings, will they overwrite each other? In other words can multiple mixins have getSettingsFields?
getSettingsFields: function() {
return [
{
field123: 'url',
xtype: 'rallytextfield'
}
];
}
I think the last mixin in will win and replace all the other getSettingsFields methods. A lot of the time we'll just have one getSettingsField method in the actual app class but delegate the implementation out to a separate class:
https://github.com/RallyApps/app-catalog/blob/master/src/apps/board/BoardApp.js#L134
https://github.com/RallyApps/app-catalog/blob/master/src/apps/board/Settings.js

Dependency injection: Angular 2 not working

I'm following the tutorials display-data in angular.io.
I introduced a new class FriendsService to separate the controller logic and model concern. I Called FriendsService class in DisplayComponent class by using dependency injection, the dependency injection not working.
There's no errors in the console. The page doesn't display the component. This is the line causing the component not to display on the page.
constructor(friendsService: FriendsService)
The page loads and displays the components (display) if change the constructor to:
constructor()
I'm using angular2.alpha.34 , Typescript, ES6.
I solved it. Eclipse-Plugin was causing the issue. The plugin wasn't generating the ES5 complaint correct code.
I used "tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts" command described in angular.io website.
The eclipse-plugin generated code and the command "tsc" generated code is slightly different.
When using the "tsc" command I was achieving the expected behavior.
First you have to define the Service before that any component or directive.
If you have something like this
class Component {
constructor(svc: Service) {
}
}
class Service {
}
It will fail. In cases like this you should use fordwardRef or you just can declare it before your component.
class Service {
}
class Component {
constructor(svc: Service) {
}
}
Another thing is that you have to inject your service using viewBindings (see ComponentAnnotation documentation).
class Service {
}
#Component({
viewBindings: [Service]
})
class Component {
constructor(svc: Service) {
}
}
And you are good to go. I hope it helps.

Resources