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

package/Source/GUI_Components/Controls/Buttons/Plain/Button.vue.ts

@@ -1,5 +1,19 @@
 /* ─── Assets ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
-import componentTemplate from "./Button.vue.pug";
+import componentVueTemplate from "./Button.vue.pug";
+
+/* ─── Validations ─────────────────────────────────────────────────────────────────────────────────────── */
+import VuePropertyValidator from "../../../_VuePropertiesValidators/VuePropertyValidator";
+import BooleanVuePropertyValidator from "../../../_VuePropertiesValidators/BooleanVuePropertyValidator";
+import ElementOfEnumerationVuePropertyValidator from "../../../_VuePropertiesValidators/ElementOfEnumerationVuePropertyValidator";
+import NonEmptyStringVuePropertyValidator from "../../../_VuePropertiesValidators/NonEmptyStringVuePropertyValidator";
+import ThemeVuePropertyValidator from "../../../_VuePropertiesValidators/ThemeVuePropertyValidator";
+import GeometricVariationVuePropertyValidator from "../../../_VuePropertiesValidators/GeometricVariationVuePropertyValidator";
+import GeometricModifiersVuePropertyValidator from "../../../_VuePropertiesValidators/GeometricModifiersVuePropertyValidator";
+import DecorativeVariationVuePropertyValidator from "../../../_VuePropertiesValidators/DecorativeVariationVuePropertyValidator";
+import DecorativeModifiersVuePropertyValidator from "../../../_VuePropertiesValidators/DecorativeModifiersVuePropertyValidator";
+import InvalidVuePropertiesCombinationError from
+    "../../../_Errors/InvalidVuePropertiesCombination/InvalidVuePropertiesCombinationError";
+import preventNullForOptionalVueProperty from "../../../_Decorators/preventNullForOptionalVueProperty";
 
 /* ─── Framework ──────────────────────────────────────────────────────────────────────────────────────────────────── */
 import {
@@ -7,31 +21,29 @@ import {
   Vue as VueComponent,
   Prop as VueProperty
 } from "vue-facing-decorator";
-
 import type { RouteLocationRaw as VueRouterRawLocation } from "vue-router";
 
 /* ─── Utils ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
-import ComponentsAuxiliaries from "../../../ComponentsAuxiliaries";
-import InvalidVuePropertiesCombinationError from
-    "../../../_Errors/InvalidVuePropertiesCombination/InvalidVuePropertiesCombinationError";
+import YDF_ComponentsCoordinator from "../../../YDF_ComponentsCoordinator";
 import {
   Logger,
   isNumber,
-  isString,
   isNonEmptyString,
   isEitherUndefinedOrNull,
   isNeitherUndefinedNorNull,
-  isElementOfEnumeration
+  isArbitraryObject,
+  emptyStringToNull,
+  type ElementOfPseudoEnumeration
 } from "@yamato-daiwa/es-extensions";
-import type { ElementOfPseudoEnumeration } from "@yamato-daiwa/es-extensions";
 
 
 @VueComponentConfiguration({
   name: Button.CSS_NAMESPACE,
-  template: componentTemplate
+  template: componentVueTemplate
 })
 class Button extends VueComponent {
 
+  /* ━━━ Static Fields ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
   public static CSS_NAMESPACE: string = "Button--YDF";
 
   public static HTML_Types: Button.HTML_Types = {
@@ -42,34 +54,138 @@ class Button extends VueComponent {
     inputReset: "INPUT_RESET"
   };
 
+
+  /* ━━━ Non-reactive Instance Fields ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
   protected IS_NUXT!: boolean;
 
+  private initializeNonReactiveClassFields(): void {
+    this.IS_NUXT = "$nuxt" in window;
+  }
+
+
+  /* ━━━ Common Properties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
   @VueProperty({
-    type: String,
     default: Button.HTML_Types.regular,
-    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, Button.HTML_Types)
+    get validator(): VuePropertyValidator {
+      return ElementOfEnumerationVuePropertyValidator({
+        enumerationFullyQualifiedName: "Button.HTML_Types",
+        enumeration: Button.HTML_Types,
+        propertyName: "HTML_Type",
+        componentName: Button.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
   })
+  @preventNullForOptionalVueProperty
   protected readonly HTML_Type!: ElementOfPseudoEnumeration<Button.HTML_Types>;
 
-  @VueProperty({ type: String })
-  protected readonly label?: string | number | null;
 
-  @VueProperty({ type: String })
-  protected readonly accessibilityGuidance?: string | null;
+  /* ─── Textings ─────────────────────────────────────────────────────────────────────────────────────────────────── */
+  @VueProperty({
+    required: false,
+    validator: VuePropertyValidator.create({
+      checker: (rawValue: unknown): boolean =>
+          isNonEmptyString(rawValue) || isNumber(rawValue, { mustConsiderNaN_AsNumber: true }),
+      messageSpecificPart: "If specified, must be either non-empty string or number.",
+      propertyName: "label",
+      componentName: Button.CSS_NAMESPACE
+    })
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly label?: string | number;
 
-  @VueProperty({ type: [ String, Object ] })
-  protected readonly route?: VueRouterRawLocation | null;
+  @VueProperty({
+    required: false,
+    get validator(): VuePropertyValidator {
+      return NonEmptyStringVuePropertyValidator({
+        isPropertyRequired: this.required === true,
+        propertyName: "accessibilityGuidance",
+        componentName: Button.CSS_NAMESPACE
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly accessibilityGuidance?: string;
 
-  @VueProperty({ type: String })
-  protected readonly externalURI?: string | null;
 
-  @VueProperty({ type: Boolean, default: false })
-  protected readonly mustOpenExternalLinkInCurrentTab!: string;
+  /* ─── Links ────────────────────────────────────────────────────────────────────────────────────────────────────── */
+  @VueProperty({
+    required: false,
+    validator: VuePropertyValidator.create({
+      checker: (rawValue: unknown): boolean => isNonEmptyString(rawValue) || isArbitraryObject(rawValue),
+      messageSpecificPart: "If specified, must be either non-empty string or an object.",
+      propertyName: "route",
+      componentName: Button.CSS_NAMESPACE
+    })
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly route?: VueRouterRawLocation;
 
-  @VueProperty({ type: Boolean, default: false })
+  @VueProperty({
+    required: false,
+    get validator(): VuePropertyValidator {
+      return NonEmptyStringVuePropertyValidator({
+        propertyName: "externalURI",
+        isPropertyRequired: this.required === true,
+        componentName: Button.CSS_NAMESPACE
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly externalURI?: string;
+
+  @VueProperty({
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "mustOpenLinkInNewTab",
+        componentName: Button.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly mustOpenLinkInNewTab!: boolean;
+
+  @VueProperty({
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "mustRequestNotFollowLinkForCrawlingToSearchEngine",
+        componentName: Button.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
+  protected readonly mustRequestNotFollowLinkForCrawlingToSearchEngine!: boolean;
+
+
+  /* ─── Status ───────────────────────────────────────────────────────────────────────────────────────────────────── */
+  @VueProperty({
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "disabled",
+        componentName: Button.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
   protected readonly disabled!: boolean;
 
-  @VueProperty({ type: Boolean, default: false })
+  @VueProperty({
+    default: false,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "toggled",
+        componentName: Button.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
   protected readonly toggled!: boolean;
 
 
@@ -77,24 +193,33 @@ class Button extends VueComponent {
   public static readonly Themes: Button.Themes = { regular: "REGULAR" };
 
   @VueProperty({
-    type: String,
     default: Button.Themes.regular,
-    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, Button.Themes)
+    validator: ThemeVuePropertyValidator(Button)
   })
+  @preventNullForOptionalVueProperty
   protected readonly theme!: string;
 
   public static defineThemes(themesNames: ReadonlyArray<string>): typeof Button {
-    return ComponentsAuxiliaries.defineThemes(themesNames, Button);
+    return YDF_ComponentsCoordinator.defineThemes(themesNames, Button);
   }
 
-  public static areThemesCSS_ClassesCommon: boolean = ComponentsAuxiliaries.areThemesCSS_ClassesCommon;
+  public static areThemesCSS_ClassesCommon: boolean = YDF_ComponentsCoordinator.areThemesCSS_ClassesCommon;
 
-  public static considerThemesAsCommon(): typeof Button {
+  public static considerThemesAsCommon(): void {
     Button.areThemesCSS_ClassesCommon = true;
-    return Button;
   }
 
-  @VueProperty({ type: Boolean, default: Button.areThemesCSS_ClassesCommon })
+  @VueProperty({
+    default: Button.areThemesCSS_ClassesCommon,
+    get validator(): VuePropertyValidator {
+      return BooleanVuePropertyValidator({
+        propertyName: "areThemesCSS_ClassesCommon",
+        componentName: Button.CSS_NAMESPACE,
+        isPropertyRequired: this.required === true
+      });
+    }
+  })
+  @preventNullForOptionalVueProperty
   private readonly areThemesCSS_ClassesCommon!: boolean;
 
 
@@ -106,82 +231,77 @@ class Button extends VueComponent {
   };
 
   @VueProperty({
-    type: String,
     default: Button.GeometricVariations.regular,
-    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, Button.GeometricVariations)
+    validator: GeometricVariationVuePropertyValidator(Button)
   })
+  @preventNullForOptionalVueProperty
   protected readonly geometricVariation!: string;
 
   public static defineGeometricVariations(geometricVariationsNames: ReadonlyArray<string>): typeof Button {
-    return ComponentsAuxiliaries.defineGeometricVariations(geometricVariationsNames, Button);
+    return YDF_ComponentsCoordinator.defineGeometricVariations(geometricVariationsNames, Button);
   }
 
+  public static readonly GeometricModifiers: Button.GeometricModifiers = {
+    pillShape: "PILL_SHAPE",
+    squareShape: "SQUARE_SHAPE",
+    squareShapeUnlessOverflowed: "SQUARE_SHAPE_UNLESS_OVERFLOWED",
+    singleLine: "SINGLE_LINE",
+    noLeftBorderAndRoundings: "NO_LEFT_BORDER_AND_ROUNDINGS",
+    noRightBorderAndRoundings: "NO_RIGHT_BORDER_AND_ROUNDINGS",
+    noTopBorderAndRoundings: "NO_TOP_BORDER_AND_ROUNDINGS",
+    noBottomBorderAndRoundings: "NO_BOTTOM_BORDER_AND_ROUNDINGS",
+    noRoundings: "NO_ROUNDINGS",
+    horizontallyShrinkable: "HORIZONTALLY_SHRINKABLE"
+  };
+
   @VueProperty({
-    type: Array,
-    default: (): ReadonlyArray<string> => [],
-    validator: (rawValue: ReadonlyArray<unknown>): boolean =>
-        rawValue.every(
-          (element: unknown): boolean => isString(element) && isElementOfEnumeration(element, Button.GeometricModifiers)
-        )
+    default: (): ReadonlyArray<ElementOfPseudoEnumeration<Button.GeometricModifiers>> => [],
+    validator: GeometricModifiersVuePropertyValidator(Button)
   })
-  protected readonly geometricModifiers!: ReadonlyArray<Button.GeometricModifiers>;
+  @preventNullForOptionalVueProperty
+  protected readonly geometricModifiers!: ReadonlyArray<ElementOfPseudoEnumeration<Button.GeometricModifiers>>;
 
 
   /* ─── Decoration ───────────────────────────────────────────────────────────────────────────────────────────────── */
   public static readonly DecorativeVariations: Button.DecorativeVariations = {
     regular: "REGULAR",
     accented: "ACCENTED",
+    danger: "DANGER",
     linkLike: "LINK_LIKE"
   };
 
   @VueProperty({
-    type: String,
     default: Button.DecorativeVariations.regular,
-    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, Button.DecorativeVariations)
+    validator: DecorativeVariationVuePropertyValidator(Button)
   })
+  @preventNullForOptionalVueProperty
   protected readonly decorativeVariation!: string;
 
   public static defineDecorativeVariations(decorativeVariationsNames: ReadonlyArray<string>): typeof Button {
-    return ComponentsAuxiliaries.defineDecorativeVariations(decorativeVariationsNames, Button);
+    return YDF_ComponentsCoordinator.defineDecorativeVariations(decorativeVariationsNames, Button);
   }
 
+  public static readonly DecorativeModifiers: Button.DecorativeModifiers = {
+    bordersDisguising: "BORDERS_DISGUISING",
+    noBackground: "NO_BACKGROUND",
+    noBackgroundInDefaultState: "NO_BACKGROUND_IN_DEFAULT_STATE"
+  };
 
   @VueProperty({
-    type: Array,
-    default: (): ReadonlyArray<string> => [],
-    validator: (rawValue: ReadonlyArray<unknown>): boolean =>
-        rawValue.every(
-          (element: unknown): boolean => isString(element) && isElementOfEnumeration(element, Button.DecorativeModifiers)
-        )
+    default: (): ReadonlyArray<ElementOfPseudoEnumeration<Button.DecorativeModifiers>> => [],
+    validator: DecorativeModifiersVuePropertyValidator(Button)
   })
-  protected readonly decorativeModifiers!: ReadonlyArray<Button.DecorativeModifiers>;
+  protected readonly decorativeModifiers!: ReadonlyArray<ElementOfPseudoEnumeration<Button.DecorativeModifiers>>;
 
 
   /* ━━━ Lifecycle Hooks ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
-  public created(): void {
-
-    if (
-      (!isNonEmptyString(this.label) && isNumber(this.label)) &&
-      (
-        this.HTML_Type === Button.HTML_Types.inputButton ||
-        this.HTML_Type === Button.HTML_Types.inputSubmit ||
-        this.HTML_Type === Button.HTML_Types.inputReset
-      )
-    ) {
-      Logger.throwErrorAndLog({
-        errorInstance: new InvalidVuePropertiesCombinationError({
-          vueComponentName: Button.name,
-          messageSpecificPart:
-              "When button has HTML type \"inputButton\", \"inputSubmit\" or \"inputReset\", the \"label\" property " +
-              "must be specified with non-empty string of number."
-        }),
-        title: InvalidVuePropertiesCombinationError.localization.defaultTitle,
-        occurrenceLocation: `${ Button.name }.created()`
-      });
-    }
-
+  protected created(): void {
     this.initializeNonReactiveClassFields();
+    this.validateProperties();
+  }
 
+  protected beforeUpdate(): void {
+    this.validateProperties();
   }
 
 
@@ -230,45 +350,60 @@ class Button extends VueComponent {
 
   }
 
+  protected get relAttributeValueOfAnchorElement(): string | null {
+    return emptyStringToNull(
+      [
+        ...this.mustOpenLinkInNewTab ? [ "noopener", "noreferrer" ] : [],
+        ...this.mustRequestNotFollowLinkForCrawlingToSearchEngine ? [ "nofollow" ] : []
+      ].join(" ")
+    );
+  }
+
 
   /* ━━━ CSS Classes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
   protected get rootElementModifierCSS_Classes(): ReadonlyArray<string> {
-    return [
-
-      ...(this.isAnchorTheTagNameOfRootElement || this.isRouterLinkTheRootElement) && this.disabled ?
-          [ `${ Button.CSS_NAMESPACE }__DisabledState` ] : [],
-
-      ...ComponentsAuxiliaries.addThemeCSS_ClassToArrayIfMust({
-        themeValue: this.theme,
-        allThemes: Button.Themes,
-        areThemesCSS_ClassesCommon: this.areThemesCSS_ClassesCommon,
-        CSS_Namespace: Button.CSS_NAMESPACE
-      }),
-
-      ...ComponentsAuxiliaries.addGeometricVariationCSS_ClassToArrayIfMust({
-        geometricVariation: this.geometricVariation,
-        allGeometricVariations: Button.GeometricVariations,
-        CSS_Namespace: Button.CSS_NAMESPACE
-      }),
-
-      ...ComponentsAuxiliaries.
-          generateDemandedGeometricModifiersCSS_Classes(Button.CSS_NAMESPACE, this.geometricModifiers),
-
-      ...ComponentsAuxiliaries.addDecorativeVariationCSS_ClassToArrayIfMust({
-        decorativeVariation: this.decorativeVariation,
-        allDecorativeVariations: Button.DecorativeVariations,
-        CSS_Namespace: Button.CSS_NAMESPACE
-      }),
+    return YDF_ComponentsCoordinator.generateRootElementModifierCSS_Classes({
+      CSS_Namespace: Button.CSS_NAMESPACE,
+      activeTheme: this.theme,
+      allThemes: Button.Themes,
+      areThemesCSS_ClassesCommon: this.areThemesCSS_ClassesCommon,
+      activeGeometricVariation: this.geometricVariation,
+      allGeometricVariations: Button.GeometricVariations,
+      activeGeometricModifiers: this.geometricModifiers,
+      activeDecorativeVariation: this.decorativeVariation,
+      allDecorativeVariations: Button.DecorativeVariations,
+      activeDecorativeModifiers: this.decorativeModifiers,
+      other: [
+        ...(this.isAnchorTheTagNameOfRootElement || this.isRouterLinkTheRootElement) && this.disabled ?
+            [ `${ Button.CSS_NAMESPACE }__DisabledState` ] : []
+      ]
+    });
+  }
 
-      ...ComponentsAuxiliaries.
-          generateDemandedDecorativeModifiersCSS_Classes(Button.CSS_NAMESPACE, this.decorativeModifiers)
 
-    ];
-  }
+  /* ━━━ Properties Validation ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  protected validateProperties(): void {
 
+    if (
+      (!isNonEmptyString(this.label) && isNumber(this.label, { mustConsiderNaN_AsNumber: true })) &&
+      (
+        this.HTML_Type === Button.HTML_Types.inputButton ||
+        this.HTML_Type === Button.HTML_Types.inputSubmit ||
+        this.HTML_Type === Button.HTML_Types.inputReset
+      )
+    ) {
+      Logger.throwErrorWithFormattedMessage({
+        errorInstance: new InvalidVuePropertiesCombinationError({
+          vueComponentName: Button.CSS_NAMESPACE,
+          messageSpecificPart:
+              "When button has HTML type \"inputButton\", \"inputSubmit\" or \"inputReset\", the \"label\" property " +
+                "must be specified with non-empty string of number."
+        }),
+        title: InvalidVuePropertiesCombinationError.localization.defaultTitle,
+        occurrenceLocation: `${ Button.CSS_NAMESPACE }.created/beforeUpdate()`
+      });
+    }
 
-  private initializeNonReactiveClassFields(): void {
-    this.IS_NUXT = "$nuxt" in window;
   }
 
 }
@@ -296,26 +431,32 @@ namespace Button {
     [variationName: string]: string;
   };
 
-  export enum GeometricModifiers {
-    pillShape = "PILL_SHAPE",
-    squareShape = "SQUARE_SHAPE",
-    squareShapeUnlessOverflowed = "SQUARE_SHAPE_UNLESS_OVERFLOWED",
-    singleLine = "SINGLE_LINE",
-    noLeftBorderAndRoundings = "NO_LEFT_BORDER_AND_ROUNDINGS",
-    noRightBorderAndRoundings = "NO_RIGHT_BORDER_AND_ROUNDINGS"
-  }
+  export type GeometricModifiers = Readonly<{
+    pillShape: "PILL_SHAPE";
+    squareShape: "SQUARE_SHAPE";
+    squareShapeUnlessOverflowed: "SQUARE_SHAPE_UNLESS_OVERFLOWED";
+    singleLine: "SINGLE_LINE";
+    noLeftBorderAndRoundings: "NO_LEFT_BORDER_AND_ROUNDINGS";
+    noRightBorderAndRoundings: "NO_RIGHT_BORDER_AND_ROUNDINGS";
+    noTopBorderAndRoundings: "NO_TOP_BORDER_AND_ROUNDINGS";
+    noBottomBorderAndRoundings: "NO_BOTTOM_BORDER_AND_ROUNDINGS";
+    noRoundings: "NO_ROUNDINGS";
+    horizontallyShrinkable: "HORIZONTALLY_SHRINKABLE";
+  }>;
 
   export type DecorativeVariations = {
     readonly regular: "REGULAR";
     readonly accented: "ACCENTED";
+    readonly danger: "DANGER";
     readonly linkLike: "LINK_LIKE";
     [variationName: string]: string;
   };
 
-  export enum DecorativeModifiers {
-    bordersDisguising = "BORDERS_DISGUISING",
-    noBackground = "NO_BACKGROUND"
-  }
+  export type DecorativeModifiers = Readonly<{
+    bordersDisguising: "BORDERS_DISGUISING";
+    noBackground: "NO_BACKGROUND";
+    noBackgroundInDefaultState: "NO_BACKGROUND_IN_DEFAULT_STATE";
+  }>;
 
 }
 

package/Source/GUI_Components/Controls/Buttons/Plain/LoadingPlaceholder/Button-LoadingPlaceholder.vue.pug

@@ -1,3 +1,3 @@
-span.Button--YDF.Button--YDF-LoadingPlaceholder(
+span.Button--YDF.Button--YDF__LoadingPlaceholder(
   :class="rootElementModifierCSS_Classes"
 )

package/Source/GUI_Components/Controls/Buttons/Plain/LoadingPlaceholder/Button-LoadingPlaceholder.vue.ts

@@ -1,6 +1,14 @@
 /* ─── Assets ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
+import componentVueTemplate from "./Button-LoadingPlaceholder.vue.pug";
+
+/* ─── GUI Components ─────────────────────────────────────────────────────────────────────────────────────────────── */
 import Button from "../Button.vue";
-import componentTemplate from "./Button-LoadingPlaceholder.vue.pug";
+
+/* ─── Validations ─────────────────────────────────────────────────────────────────────────────────────── */
+import ThemeVuePropertyValidator from "../../../../_VuePropertiesValidators/ThemeVuePropertyValidator";
+import GeometricVariationVuePropertyValidator from "../../../../_VuePropertiesValidators/GeometricVariationVuePropertyValidator";
+import GeometricModifiersVuePropertyValidator from "../../../../_VuePropertiesValidators/GeometricModifiersVuePropertyValidator";
+import preventNullForOptionalVueProperty from "../../../../_Decorators/preventNullForOptionalVueProperty";
 
 /* ─── Framework ──────────────────────────────────────────────────────────────────────────────────────────────────── */
 import {
@@ -10,64 +18,65 @@ import {
 } from "vue-facing-decorator";
 
 /* ─── Utils ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
-import { isString, isElementOfEnumeration } from "@yamato-daiwa/es-extensions";
-import ComponentsAuxiliaries from "../../../../ComponentsAuxiliaries";
+import YDF_ComponentsCoordinator from "../../../../YDF_ComponentsCoordinator";
+import type { ElementOfPseudoEnumeration } from "@yamato-daiwa/es-extensions";
 
 
 @VueComponentConfiguration({
-  name: "Button--YDF-LoadingPlaceholder",
-  template: componentTemplate
+  name: "Button--YDF__LoadingPlaceholder",
+  template: componentVueTemplate
 })
 export default class ButtonLoadingPlaceholder extends VueComponent {
 
   @VueProperty({
     type: String,
     default: Button.Themes.regular,
-    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, Button.Themes)
+    validator: ThemeVuePropertyValidator({
+      Themes: Button.Themes,
+      CSS_NAMESPACE: "Button--YDF__LoadingPlaceholder"
+    })
   })
+  @preventNullForOptionalVueProperty
   protected readonly theme!: string;
 
   @VueProperty({ type: Boolean, default: Button.areThemesCSS_ClassesCommon })
+  @preventNullForOptionalVueProperty
   protected readonly areThemesCSS_ClassesCommon!: boolean;
 
+
   @VueProperty({
     type: String,
     default: Button.GeometricVariations.regular,
-    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, Button.GeometricVariations)
+    validator: GeometricVariationVuePropertyValidator({
+      GeometricVariations: Button.GeometricVariations,
+      CSS_NAMESPACE: "Button--YDF__LoadingPlaceholder"
+    })
   })
-  protected readonly geometry!: string;
+  @preventNullForOptionalVueProperty
+  protected readonly geometricVariation!: string;
 
   @VueProperty({
     type: Array,
-    default: (): ReadonlyArray<string> => [],
-    validator: (rawValue: ReadonlyArray<unknown>): boolean =>
-        rawValue.every(
-          (element: unknown): boolean => isString(element) && isElementOfEnumeration(element, Button.GeometricModifiers)
-        )
+    default: (): ReadonlyArray<Button.GeometricModifiers> => [],
+    validator: GeometricModifiersVuePropertyValidator({
+      GeometricModifiers: Button.GeometricModifiers,
+      CSS_NAMESPACE: "Button--YDF__LoadingPlaceholder"
+    })
   })
-  protected readonly geometricModifiers!: ReadonlyArray<Button.GeometricModifiers>;
+  @preventNullForOptionalVueProperty
+  protected readonly geometricModifiers!: ReadonlyArray<ElementOfPseudoEnumeration<Button.GeometricModifiers>>;
 
 
   protected get rootElementModifierCSS_Classes(): ReadonlyArray<string> {
-    return [
-
-      ...ComponentsAuxiliaries.addThemeCSS_ClassToArrayIfMust({
-        themeValue: this.theme,
-        allThemes: Button.Themes,
-        areThemesCSS_ClassesCommon: this.areThemesCSS_ClassesCommon,
-        CSS_Namespace: Button.CSS_NAMESPACE
-      }),
-
-      ...ComponentsAuxiliaries.addGeometricVariationCSS_ClassToArrayIfMust({
-        geometricVariation: this.geometry,
-        allGeometricVariations: Button.GeometricVariations,
-        CSS_Namespace: Button.CSS_NAMESPACE
-      }),
-
-      ...ComponentsAuxiliaries.
-          generateDemandedGeometricModifiersCSS_Classes(Button.CSS_NAMESPACE, this.geometricModifiers)
-
-    ];
+    return YDF_ComponentsCoordinator.generateRootElementModifierCSS_Classes({
+      CSS_Namespace: Button.CSS_NAMESPACE,
+      activeTheme: this.theme,
+      allThemes: Button.Themes,
+      areThemesCSS_ClassesCommon: this.areThemesCSS_ClassesCommon,
+      activeGeometricVariation: this.geometricVariation,
+      allGeometricVariations: Button.GeometricVariations,
+      activeGeometricModifiers: this.geometricModifiers
+    });
   }
 
 }