discourse/app/assets/javascripts/wizard/addon/components/wizard-field.gjs
David Taylor e4c373194d
DEV: Refactor Wizard components (#24770)
This commit refactors the Wizard component code in preparation for moving it to the 'static' directory for Embroider route-splitting. It also includes a number of general improvements and simplifications.

Extracted from https://github.com/discourse/discourse/pull/23678

Co-authored-by: Godfrey Chan <godfreykfc@gmail.com>
2023-12-07 16:33:38 +00:00

84 lines
2.0 KiB
JavaScript

import Component from "@glimmer/component";
import { assert } from "@ember/debug";
import { dasherize } from "@ember/string";
import { htmlSafe } from "@ember/template";
import fields from "./fields";
export default class WizardFieldComponent extends Component {
get field() {
return this.args.field;
}
get classes() {
let classes = ["wizard-container__field"];
let { type, id, invalid, disabled } = this.field;
classes.push(`${dasherize(type)}-field`);
classes.push(`${dasherize(type)}-${dasherize(id)}`);
if (invalid) {
classes.push("invalid");
}
if (disabled) {
classes.push("disabled");
}
return classes.join(" ");
}
get fieldClass() {
return `field-${dasherize(this.field.id)} wizard-focusable`;
}
get component() {
let { type } = this.field;
assert(`"${type}" is not a valid wizard field type`, type in fields);
return fields[type];
}
<template>
<div class={{this.classes}}>
{{#if @field.label}}
<label for={{@field.id}}>
<span class="wizard-container__label">
{{@field.label}}
</span>
{{#if @field.required}}
<span class="wizard-container__label required">*</span>
{{/if}}
{{#if @field.description}}
<div class="wizard-container__description">
{{htmlSafe @field.description}}
</div>
{{/if}}
</label>
{{/if}}
<div class="wizard-container__input">
<this.component
@wizard={{@wizard}}
@step={{@step}}
@field={{@field}}
@fieldClass={{this.fieldClass}}
/>
</div>
{{#if @field.errorDescription}}
<div class="wizard-container__description error">
{{htmlSafe this.field.errorDescription}}
</div>
{{/if}}
{{#if @field.extraDescription}}
<div class="wizard-container__description extra">
{{htmlSafe this.field.extraDescription}}
</div>
{{/if}}
</div>
</template>
}