@yamato-daiwa/frontend-vue 0.2.0 → 0.3.0-alpha.1

package/Source/GUI_Components/Controls/Validatables/InputtableControl.vue.ts

@@ -0,0 +1,233 @@
+/* ─── Validations ─────────────────────────────────────────────────────────────────────────────────────── */
+import type VuePropertyValidator from "../../_VuePropertiesValidators/VuePropertyValidator";
+import BooleanVuePropertyValidator from "../../_VuePropertiesValidators/BooleanVuePropertyValidator";
+import NonEmptyStringVuePropertyValidator from "../../_VuePropertiesValidators/NonEmptyStringVuePropertyValidator";
+import InvalidVuePropertiesCombinationError from
+    "../../_Errors/InvalidVuePropertiesCombination/InvalidVuePropertiesCombinationError";
+import preventNullForOptionalVueProperty from "../../_Decorators/preventNullForOptionalVueProperty";
+import { type ValidatableControl } from "@yamato-daiwa/frontend";
+
+/* ─── Framework ──────────────────────────────────────────────────────────────────────────────────────────────────── */
+import {
+  ComponentBase as VueComponentConfiguration,
+  Vue as VueComponent,
+  Prop as VueProperty
+} from "vue-facing-decorator";
+
+/* ─── Utils ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
+import { Logger, isEitherUndefinedOrNull } from "@yamato-daiwa/es-extensions";
+
+
+@VueComponentConfiguration({})
+export default abstract class InputtableControl extends VueComponent {
+
+  /* ━━━ Component Common Properties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  /* ┅┅┅ Textings ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ */
+  @VueProperty({
+    required: false,
+    get validator(): VuePropertyValidator {
+      return NonEmptyStringVuePropertyValidator({
+        isPropertyRequired: this.required === true,
+        propertyName: "label",
+        componentName: "(Inheritor of InputtableControl)"
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly label?: string;
+
+  @VueProperty({
+    required: false,
+    get validator(): VuePropertyValidator {
+      return NonEmptyStringVuePropertyValidator({
+        isPropertyRequired: this.required === true,
+        propertyName: "accessibilityGuidance",
+        componentName: "(Inheritor of InputtableControl)"
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly accessibilityGuidance?: string;
+
+  @VueProperty({
+    required: false,
+    get validator(): VuePropertyValidator {
+      return NonEmptyStringVuePropertyValidator({
+        isPropertyRequired: this.required === true,
+        propertyName: "externalLabelHTML_ID",
+        componentName: "(Inheritor of InputtableControl)"
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly externalLabelHTML_ID?: string;
+
+  @VueProperty({
+    required: false,
+    get validator(): VuePropertyValidator {
+      return NonEmptyStringVuePropertyValidator({
+        isPropertyRequired: this.required === true,
+        propertyName: "guidance",
+        componentName: "(Inheritor of InputtableControl)"
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly guidance?: string;
+
+
+  /* ┅┅┅ Requirement ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ */
+  @VueProperty({
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "required",
+        componentName: "(Inheritor of InputtableControl)",
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly required!: boolean;
+
+  @VueProperty({
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "mustDisplayAppropriateBadgeIfInputIsRequired",
+        componentName: "(Inheritor of InputtableControl)",
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly mustDisplayAppropriateBadgeIfInputIsRequired!: boolean;
+
+  @VueProperty({
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "mustDisplayAppropriateBadgeIfInputIsOptional",
+        componentName: "(Inheritor of InputtableControl)",
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly mustDisplayAppropriateBadgeIfInputIsOptional!: boolean;
+
+  @VueProperty({
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "mustAddInvisibleBadgeForHeightEqualizingWhenNoBadge",
+        componentName: "(Inheritor of InputtableControl)",
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly mustAddInvisibleBadgeForHeightEqualizingWhenNoBadge!: boolean;
+
+
+  /* ┅┅┅ State Limitations ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ */
+  @VueProperty({
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "disabled",
+        componentName: "(Inheritor of InputtableControl)",
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly disabled!: boolean;
+
+  @VueProperty({
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "readonly",
+        componentName: "(Inheritor of InputtableControl)",
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly readonly!: boolean;
+
+
+  /* ━━━ State ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  protected abstract invalidInputHighlightingIfAnyValidationErrorsMessages: boolean;
+  protected abstract validInputHighlightingIfNoErrorsMessages: boolean;
+
+
+  /* ━━━ Methods ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  /* ┅┅┅ Public ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ */
+  /* ╍╍╍ Partial Implementations of ValidatableControl Interface ╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍ */
+  public highlightInvalidInput(): this {
+    this.invalidInputHighlightingIfAnyValidationErrorsMessages = true;
+    return this;
+  }
+
+  public getRootElementOffsetCoordinates(): ValidatableControl.RootElementOffsetCoordinates {
+
+    /* [ Specification ]
+     * The inputtable control must have a single root element.
+     * For YDF components, it is basically ValidatableControlShell. */
+    const rootElement: HTMLElement = this.$el;
+
+    return {
+      top: rootElement.offsetTop,
+      left: rootElement.offsetLeft
+    };
+
+  }
+
+  public resetStateToInitial(): void {
+    Object.assign(this.$data, this.$options.data?.({}));
+  }
+
+
+  /* ╍╍╍ Lifecycle Hooks ╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍ */
+  protected beforeCreate(): void {
+    InputtableControl.validateProperties(this);
+  }
+
+  protected beforeUpdate(): void {
+    InputtableControl.validateProperties(this);
+  }
+
+
+  /* ┅┅┅ Protected ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ */
+  /** @descriptioin
+   * Validation with referencing of multiple properties is possible only via lifecycle hooks.
+   * This method is static because non-static methods are not accessible from the viewpoint of "vue-facing-decorator" */
+  protected static validateProperties(instance: InputtableControl): void {
+
+    const inheritedComponentNameForLogging: string = instance.$options.name ?? "(Unnamed component)";
+
+    if (
+      isEitherUndefinedOrNull(instance.label) &&
+      isEitherUndefinedOrNull(instance.accessibilityGuidance) &&
+      isEitherUndefinedOrNull(instance.externalLabelHTML_ID)
+    ) {
+      Logger.logError({
+        errorType: InvalidVuePropertiesCombinationError.NAME,
+        title: InvalidVuePropertiesCombinationError.localization.defaultTitle,
+        description: InvalidVuePropertiesCombinationError.localization.generateMessage({
+          vueComponentName: inheritedComponentNameForLogging,
+          messageSpecificPart:
+              "From the accessibility requirements, one of next properties must be specified:\n" +
+              "● label\n" +
+              "● accessibilityGuidance\n" +
+              "● externalLabelHTML_ID"
+        }),
+        occurrenceLocation: `${ inheritedComponentNameForLogging }.beforeCreate()`
+      });
+    }
+
+  }
+
+}

package/Source/GUI_Components/Controls/Validatables/TextBox/TextBox.vue.pug

@@ -8,22 +8,60 @@ ValidatableControlShell.TextBox--YDF(
   :mustDisplayAppropriateBadgeIfInputIsOptional="mustDisplayAppropriateBadgeIfInputIsOptional"
   :mustAddInvisibleBadgeForHeightEqualizingWhenNoBadge="mustAddInvisibleBadgeForHeightEqualizingWhenNoBadge"
 
+  :validationErrorsMessages="validatablePayload.validationErrorsMessages"
+  :invalidInputHighlightingIfAnyValidationErrorsMessages="invalidInputHighlightingIfAnyValidationErrorsMessages"
+  :validValueHighlightingIfNoValidationErrorsMessages="validInputHighlightingIfNoErrorsMessages"
+
+  :coreElementHTML_ID="HTML_IDs.inputOrTextarea"
+  :labelElementHTML_ID="HTML_IDs.label"
+
+  :theme="validatableControlShellTheme"
+  :areThemesCSS_ClassesCommon="areThemesCSS_ClassesCommon"
+  :geometricVariation="validatableControlGeometricVariation"
+  :decorativeVariation="validatableControlDecorativeVariation"
+
+  :class="rootElementModifierCSS_Classes"
+
 )
 
   textarea.TextBox--YDF-InputOrTextAreaElement(
     v-if="multiline"
+    v-model="rawInput"
     :placeholder="placeholder"
+    :autocomplete="autocomplete"
     :readonly="readonly"
     :disabled="disabled"
     :required="required"
+    :minlength="minimalCharactersCount"
+    :maxlength="maximalCharactersCount"
+    :id="HTML_IDs.inputOrTextarea"
+    :aria-label="accessibilityGuidance"
+    :aria-labelledby="externalLabelHTML_ID"
+    :ref="INPUT_OR_TEXT_AREA_ELEMENT_VUE_REFERENCE_ID"
+    @keydown="onKeyDown"
+    @input="$event => { onInput($event.target.value) }"
+    @blur="onFocusOut"
   )
 
   //- [ Bundler bug ] The `v-else` is being compiled to `v-else="v-else"`
   input.TextBox--YDF-InputOrTextAreaElement(
     v-else-if="!multiline"
+    v-model="rawInput"
     :type="HTML_Type"
     :placeholder="placeholder"
+    :autocomplete="autocomplete"
     :readonly="readonly"
     :disabled="disabled"
     :required="required"
+    :minlength="minimalCharactersCount"
+    :maxlength="maximalCharactersCount"
+    :min="minimalNumericValue"
+    :max="maximalNumericValue"
+    :id="HTML_IDs.inputOrTextarea"
+    :aria-label="accessibilityGuidance"
+    :aria-labelledby="externalLabelHTML_ID"
+    :ref="INPUT_OR_TEXT_AREA_ELEMENT_VUE_REFERENCE_ID"
+    @keydown="onKeyDown"
+    @input="$event => { onInput($event.target.value) }"
+    @blur="onFocusOut"
   )