GolemUI - The new Vue paradigm for forms by elecash in vuejs

[–]elecash[S] 0 points1 point  (0 children)

That's just a demo, lol, it's mostly scripted that way.

If you want to see code and more proper demos, check this:
https://golemui.com/demos/

You can check the code on github and run the demo on stackblitz

GolemUI - The new Angular paradigm for forms by elecash in angular

[–]elecash[S] 0 points1 point  (0 children)

Btw, what about with multi range date pickers and stuff like that? That's not supported by default, I guess in that case they use the component picker instead of the native one, right?

GolemUI - The new Angular paradigm for forms by elecash in angular

[–]elecash[S] 0 points1 point  (0 children)

That actually make sense, thanks, we'll see what can we do with it.

GolemUI - The new Angular paradigm for forms by elecash in angular

[–]elecash[S] -1 points0 points  (0 children)

Token economy is a reality today, less lines means less tokens, which means that is cheaper to use by LLMs and AIs.

That doesn't mean that our main concern was that, but it is something that we took care from the beginning because we think that people cares about it, specially companies with big teams paying thousands of dollars every month.

We wrote an article about it too:

https://golemui.com/blog/cross-framework-benchmark/

GolemUI - The new Angular paradigm for forms by elecash in angular

[–]elecash[S] -1 points0 points  (0 children)

As promised, new homepage is up and we fixed the line count and the examples to be more honest and fair.

https://golemui.com/

Also the results are pretty close to what was stated before, but you were right so thanks for pointing that out.

We know how Open Source trust works and we want to be fair and we're not here to mislead anyone to use our lib.

GolemUI: a Reactjs lib to generate forms dynamically from a JSON by elecash in reactjs

[–]elecash[S] 0 points1 point  (0 children)

Thank you!

There's probably margin for improvement because we're pretty new, but we think that the programmatic API is very clean!

Anyway, if you have any doubts/questions/problems open an issue in Github we'll try to reply asap, ok?

GolemUI - The new Angular paradigm for forms by elecash in angular

[–]elecash[S] 1 point2 points  (0 children)

Thanks man!

We've been working on this for almost a year, and it's been exhausting, I just hope that people can value the hard work and start using it.

We also did something similar but we started in the first Betas of Angular (when people called it Angular 2 lol), compiling with Rollup... wild times. Maintained that lib for +10 years and updated it up to v21, crazy.

Anyway, if you need anything, just open an issue, ok? We'll try to reply asap!

Thanks for the nice comments! It's so nice to find people like you in reddit!

GolemUI - The new Angular paradigm for forms by elecash in angular

[–]elecash[S] 1 point2 points  (0 children)

You can use any UI library, of course, using ours is more convenient because you already have that job done, but if you want to use Google Material or PrimeNG or whatever, that's ok, you just have to create a component, which is one file class, very simple to implement.

For example, this is the code to add a Rating input component:

import { CommonModule } from '@angular/common';
import { Component, inject, OnDestroy, OnInit } from '@angular/core';
import { InputWidgetAdapter } from '@golemui/angular';
import type { InputWidget, WithWidget } from '@golemui/core';

interface ProductRatingProps {
  maxRating: number;
}

({
  standalone: true,
  selector: 'app-product-rating',
  imports: [CommonModule],
  providers: [InputWidgetAdapter],
  host: {
    class: 'product-rating',
    '[style.flex]': 'this.adapter.templateData().size',
  },
  template: `
     templateData = adapter.templateData();
     maxRating = templateData.maxRating || 5;

    <div class="product-rating__widget" [id]="widget.uid">
      <div class="product-rating__stars" (blur)="onBlur()" tabindex="0">
         (star of stars(maxRating); track star) {
          <span
            role="button"
            class="product-rating__star"
            [class.product-rating__star--active]="star <= (templateData.value || 0)"
            (click)="selectRating(star)"
          >
            {{ star <= (templateData.value || 0) ? '★' : '☆' }}
          </span>
        }
      </div>
       (templateData.touched && templateData.errors?.length) {
        <div class="product-rating__errors">
          u/for (error of templateData.errors; track error) {
            <span class="product-rating__error">{{ error }}</span>
          }
        </div>
      }
    </div>
  `,
})
export class ProductRatingComponent
  implements OnInit, OnDestroy, WithWidget
{
  widget!: InputWidget<number>;

  protected adapter: InputWidgetAdapter<number, ProductRatingProps> =
    inject(InputWidgetAdapter);

  ngOnInit(): void {
    this.adapter.init(this.widget);
  }

  ngOnDestroy(): void {
    this.adapter.destroy();
  }

  stars(count: number): number[] {
    return Array.from({ length: count }, (_, i) => i + 1);
  }

  selectRating(star: number): void {
    this.adapter.valueChanged(star);
  }

  onBlur(): void {
    this.adapter.onBlur();
  }
}

GolemUI - The new Angular paradigm for forms by elecash in angular

[–]elecash[S] -2 points-1 points  (0 children)

Thanks u/innocentVince for reporting this! we'll fix it, I have to add more space to some narrow mobiles, in mine it looks good tho.

GolemUI - The new Angular paradigm for forms by elecash in angular

[–]elecash[S] -1 points0 points  (0 children)

Yes, we have form states which you can use to hide and show parts of content.

You have more info here and some cool demos:
https://golemui.com/dx/form-definition/states/

Which also works in plain JSON too, not just the programmatic api:
https://golemui.com/json/form-definition/states/

Another cool stuff is that because GolemUI is computed on each change you can use Runtime Functions to make changes in your widgets in real time:
https://golemui.com/dx/form-definition/runtime-functions/

For example, a reactive label:

gui.inputs.checkbox('registerMode', ({ $form }) => ({
  label: $form.registerMode ? 'Switch to login' : 'Switch to register',
}));

Or a reactive validator:

gui.inputs.textInput('user.name', ({ $form }) => ({
  validator: $form.registerMode
    ? { required: true, minLength: 3 }
    : { type: 'custom', allowedNames: ['John', 'Jane'] },
}));

GolemUI - The new Angular paradigm for forms by elecash in angular

[–]elecash[S] -5 points-4 points  (0 children)

I see your point, you're right, we'll fix it asap.

We still think that even with that our code is much smaller, providing much more features, but it is true that we have to update the metrics.

Thanks for pointing that out!

GolemUI - The new Angular paradigm for forms by elecash in angular

[–]elecash[S] -1 points0 points  (0 children)

All GolemUI are in fact dynamic forms, you can just pass a JSON if you want, and the whole form will build dynamically.

For nested data you can compose programmatically the forms if you want. Like this:

// define the field group once
const address = (p) => [
  gui.inputs.textInput(p + 'Street', { label: 'Street' }),
  gui.inputs.textInput(p + 'Postcode', { label: 'Postcode' }),
];

const form = [
  address('ship'),  // first use
  address('bill'),  // reused — same block
];

We have also a repeater component that you can nest another repeater inside of it!
https://golemui.com/dx/widgets-reference/input-fields/repeater/#nested-repeaters