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

package/Source/GUI_Components/YDF_ComponentsCoordinator.ts

@@ -0,0 +1,317 @@
+import {
+  toUpperCamelCase,
+  toLowerCamelCase,
+  toScreamingSnakeCase,
+  isUndefined,
+  isNotUndefined
+} from "@yamato-daiwa/es-extensions";
+
+
+export default abstract class YDF_ComponentsCoordinator {
+
+  public static areThemesCSS_ClassesCommon: boolean = false;
+
+  public static defineThemes<ComponentClass extends { Themes: { [themeName: string]: string; }; }>(
+    themesNames: ReadonlyArray<string>,
+    TargetComponentClass: ComponentClass
+  ): ComponentClass {
+
+    for (const themeName of themesNames) {
+      TargetComponentClass.Themes[toLowerCamelCase(themeName)] = toScreamingSnakeCase(themeName);
+    }
+
+    return TargetComponentClass;
+
+  }
+
+  public static defineGeometricVariations<
+    ComponentClass extends { GeometricVariations: { [decorativeVariationName: string]: string; }; }
+  >(
+    geometricVariationsNames: ReadonlyArray<string>,
+    TargetComponentClass: ComponentClass
+  ): ComponentClass {
+
+    for (const geometricVariationName of geometricVariationsNames) {
+      TargetComponentClass.GeometricVariations[toLowerCamelCase(geometricVariationName)] =
+          toScreamingSnakeCase(geometricVariationName);
+    }
+
+    return TargetComponentClass;
+
+  }
+
+  public static defineDecorativeVariations<
+    ComponentClass extends { DecorativeVariations: { [decorativeVariationName: string]: string; }; }
+  >(
+    decorativeVariationsNames: ReadonlyArray<string>,
+    TargetComponentClass: ComponentClass
+  ): ComponentClass {
+
+    for (const decorativeVariationName of decorativeVariationsNames) {
+      TargetComponentClass.DecorativeVariations[toLowerCamelCase(decorativeVariationName)] =
+          toScreamingSnakeCase(decorativeVariationName);
+    }
+
+    return TargetComponentClass;
+
+  }
+
+  public static defineThemesAndSetCorrespondenceWithOnesOfChildrenComponents<
+    ComponentClass extends {
+      Themes: { [themeKey: string]: string; };
+      selfAndChildrenComponentsThemesCorrespondence: { [childrenComponentKey: string]: { [ownThemeValue: string]: string; }; };
+    }
+  >(
+    ownAndChildrenThemesCorrespondenceDefinition: { [ ownThemeKey: string ]: { [ childrenComponentKey: string ]: string; }; },
+    TargetComponentClass: ComponentClass
+  ): ComponentClass {
+
+    YDF_ComponentsCoordinator.defineThemes(Object.keys(ownAndChildrenThemesCorrespondenceDefinition), TargetComponentClass);
+
+    for (
+      const [ ownThemeKey, correspondenceWithThemesOfChildrenComponents ] of
+          Object.entries(ownAndChildrenThemesCorrespondenceDefinition)
+    ) {
+
+      const ownThemeNameValue: string = toScreamingSnakeCase(ownThemeKey);
+
+      for (
+        const [ childComponentName, childComponent_sThemeName ] of
+            Object.entries(correspondenceWithThemesOfChildrenComponents)
+      ) {
+
+        if (isUndefined(TargetComponentClass.selfAndChildrenComponentsThemesCorrespondence[childComponentName])) {
+          TargetComponentClass.selfAndChildrenComponentsThemesCorrespondence[childComponentName] = {
+            [ownThemeNameValue]: toScreamingSnakeCase(childComponent_sThemeName)
+          };
+        } else {
+          TargetComponentClass.
+              selfAndChildrenComponentsThemesCorrespondence[childComponentName][ownThemeNameValue] =
+                  toScreamingSnakeCase(childComponent_sThemeName);
+        }
+
+      }
+
+    }
+
+    return TargetComponentClass;
+
+  }
+
+  public static defineGeometricVariationsAndSetCorrespondenceWithOnesOfChildrenComponents<
+    ComponentClass extends {
+      GeometricVariations: { [geometricVariationKey: string]: string; };
+      selfAndChildrenComponentsGeometricVariationsCorrespondence:
+          { [childrenComponentKey: string]: { [ownGeometricVariationValue: string]: string; }; };
+    }
+  >(
+    geometricVariationsCorrespondenceDefinition:
+        { [ ownGeometricVariationKey: string ]: { [ childrenComponentKey: string ]: string; }; },
+    TargetComponentClass: ComponentClass
+  ): ComponentClass {
+
+    YDF_ComponentsCoordinator.defineGeometricVariations(
+      Object.keys(geometricVariationsCorrespondenceDefinition), TargetComponentClass
+    );
+
+    for (
+      const [ ownGeometricVariationKey, correspondenceWithGeometricVariationsOfChildrenComponents ] of
+          Object.entries(geometricVariationsCorrespondenceDefinition)
+    ) {
+
+      const ownGeometricVariationValue: string = toScreamingSnakeCase(ownGeometricVariationKey);
+
+      for (
+        const [ childComponentName, childComponent_sGeometricVariationsNames ] of
+            Object.entries(correspondenceWithGeometricVariationsOfChildrenComponents)
+      ) {
+
+        if (isUndefined(TargetComponentClass.selfAndChildrenComponentsGeometricVariationsCorrespondence[childComponentName])) {
+          TargetComponentClass.selfAndChildrenComponentsGeometricVariationsCorrespondence[childComponentName] = {
+            [ownGeometricVariationValue]: toScreamingSnakeCase(childComponent_sGeometricVariationsNames)
+          };
+        } else {
+          TargetComponentClass.
+              selfAndChildrenComponentsGeometricVariationsCorrespondence
+                  /* eslint-disable no-unexpected-multiline --
+                   * Allow line breaks for bracket notation and long fully qualified names. */
+                  [childComponentName]
+                  [ownGeometricVariationValue] =
+                  /* eslint-enable no-unexpected-multiline */
+                      toScreamingSnakeCase(childComponent_sGeometricVariationsNames);
+
+        }
+
+      }
+
+    }
+
+    return TargetComponentClass;
+
+  }
+
+  public static defineDecorativeVariationsAndSetCorrespondenceWithOnesOfChildrenComponents<
+    ComponentClass extends {
+      DecorativeVariations: { [decorativeVariationKey: string]: string; };
+      selfAndChildrenComponentsDecorativeVariationsCorrespondence:
+          { [childrenComponentKey: string]: { [ownDecorativeVariationValue: string]: string; }; };
+    }
+  >(
+    decorativeVariationsCorrespondenceDefinition:
+        { [ ownDecorativeVariationKey: string ]: { [ childrenComponentKey: string ]: string; }; },
+    TargetComponentClass: ComponentClass
+  ): ComponentClass {
+
+    YDF_ComponentsCoordinator.defineDecorativeVariations(
+      Object.keys(decorativeVariationsCorrespondenceDefinition), TargetComponentClass
+    );
+
+    for (
+      const [ ownDecorativeVariationKey, correspondenceWithDecorativeVariationsOfChildrenComponents ] of
+          Object.entries(decorativeVariationsCorrespondenceDefinition)
+    ) {
+
+      const ownDecorativeVariationValue: string = toScreamingSnakeCase(ownDecorativeVariationKey);
+
+      for (
+        const [ childComponentName, childComponent_sDecorativeVariationsNames ] of
+            Object.entries(correspondenceWithDecorativeVariationsOfChildrenComponents)
+      ) {
+
+        if (isUndefined(TargetComponentClass.selfAndChildrenComponentsDecorativeVariationsCorrespondence[childComponentName])) {
+          TargetComponentClass.selfAndChildrenComponentsDecorativeVariationsCorrespondence[childComponentName] = {
+            [ownDecorativeVariationValue]: toScreamingSnakeCase(childComponent_sDecorativeVariationsNames)
+          };
+        } else {
+          TargetComponentClass.
+              selfAndChildrenComponentsDecorativeVariationsCorrespondence
+                  /* eslint-disable no-unexpected-multiline --
+                   * Allow line breaks for bracket notation and long fully qualified names. */
+                  [childComponentName]
+                  [ownDecorativeVariationValue] =
+                  /* eslint-enable no-unexpected-multiline */
+                      toScreamingSnakeCase(childComponent_sDecorativeVariationsNames);
+        }
+
+      }
+
+    }
+
+    return TargetComponentClass;
+
+  }
+
+  public static generateRootElementModifierCSS_Classes(
+    {
+      CSS_Namespace,
+      activeTheme,
+      allThemes,
+      areThemesCSS_ClassesCommon,
+      activeGeometricVariation,
+      allGeometricVariations,
+      activeGeometricModifiers = [],
+      activeDecorativeVariation,
+      allDecorativeVariations = {},
+      activeDecorativeModifiers = [],
+      other = []
+    }: Readonly<{
+      CSS_Namespace: string;
+      activeTheme: string;
+      allThemes: Readonly<{ [themeKey: string]: string; }>;
+      areThemesCSS_ClassesCommon: boolean;
+      activeGeometricVariation: string;
+      allGeometricVariations: Readonly<{ [geometricVariationKey: string]: string; }>;
+      activeGeometricModifiers?: ReadonlyArray<string>;
+      activeDecorativeVariation?: string;
+      allDecorativeVariations?: Readonly<{ [decorativeVariationKey: string]: string; }>;
+      activeDecorativeModifiers?: ReadonlyArray<string>;
+      other?: ReadonlyArray<string>;
+    }>
+  ): Array<string> {
+    return [
+      ...Object.entries(allThemes).length > 1 && !areThemesCSS_ClassesCommon ?
+          [ `${ CSS_Namespace }__${ toUpperCamelCase(activeTheme) }Theme` ] : [],
+      ...Object.entries(allGeometricVariations).length > 1 ?
+          [ `${ CSS_Namespace }__${ toUpperCamelCase(activeGeometricVariation) }GeometricVariation` ] : [],
+      ...activeGeometricModifiers.map(
+        (geometricModifier: string): string =>
+            `${ CSS_Namespace }__${ toUpperCamelCase(geometricModifier) }GeometricModifier`
+      ),
+      ...Object.entries(allDecorativeVariations).length > 1 && isNotUndefined(activeDecorativeVariation) ?
+          [ `${ CSS_Namespace }__${ toUpperCamelCase(activeDecorativeVariation) }DecorativeVariation` ] : [],
+      ...activeDecorativeModifiers.map(
+        (activeDecorativeModifier: string): string =>
+            `${ CSS_Namespace }__${ toUpperCamelCase(activeDecorativeModifier) }DecorativeModifier`
+      ),
+      ...other
+    ];
+  }
+
+  public static addThemeCSS_ClassToArrayIfMust(
+    {
+      themeValue,
+      allThemes,
+      areThemesCSS_ClassesCommon,
+      CSS_Namespace
+    }: Readonly<{
+      themeValue: string;
+      allThemes: Readonly<{ [themeKey: string]: string; }>;
+      areThemesCSS_ClassesCommon: boolean;
+      CSS_Namespace: string;
+    }>
+  ): Array<string> {
+    return Object.entries(allThemes).length > 1 && !areThemesCSS_ClassesCommon ?
+        [ `${ CSS_Namespace }__${ toUpperCamelCase(themeValue) }Theme` ] : [];
+  }
+
+  public static addGeometricVariationCSS_ClassToArrayIfMust(
+    {
+      geometricVariation,
+      allGeometricVariations,
+      CSS_Namespace
+    }: Readonly<{
+      geometricVariation: string;
+      allGeometricVariations: Readonly<{ [geometricVariationKey: string]: string; }>;
+      CSS_Namespace: string;
+    }>
+  ): Array<string> {
+    return Object.entries(allGeometricVariations).length > 1 ?
+        [ `${ CSS_Namespace }__${ toUpperCamelCase(geometricVariation) }GeometricVariation` ] : [];
+  }
+
+  public static addDecorativeVariationCSS_ClassToArrayIfMust(
+    {
+      decorativeVariation,
+      allDecorativeVariations,
+      CSS_Namespace
+    }: Readonly<{
+      decorativeVariation: string;
+      allDecorativeVariations: Readonly<{ [decorativeVariationKey: string]: string; }>;
+      CSS_Namespace: string;
+    }>
+  ): Array<string> {
+    return Object.entries(allDecorativeVariations).length > 1 ?
+        [ `${ CSS_Namespace }__${ toUpperCamelCase(decorativeVariation) }DecorativeVariation` ] : [];
+  }
+
+  public static generateDemandedGeometricModifiersCSS_Classes(
+    CSS_Namespace: string,
+    demandedGeometricModifiersNames: ReadonlyArray<string>
+  ): Array<string> {
+    return demandedGeometricModifiersNames.map(
+      (geometricModifierName: string): string =>
+          `${ CSS_Namespace }__${ toUpperCamelCase(geometricModifierName) }GeometricModifier`
+    );
+  }
+
+  public static generateDemandedDecorativeModifiersCSS_Classes(
+    CSS_Namespace: string,
+    demandedDecorativeModifiersNames: ReadonlyArray<string>
+  ): Array<string> {
+    return demandedDecorativeModifiersNames.map(
+      (decorativeModifierName: string): string =>
+          `${ CSS_Namespace }__${ toUpperCamelCase(decorativeModifierName) }DecorativeModifier`
+    );
+  }
+
+}

package/Source/GUI_Components/_Decorators/AccessibleFromTemplateAsNonReactive.ts

@@ -0,0 +1,67 @@
+/* eslint no-underscore-dangle: [ "warn", { "allow": [ "_nonReactiveStaticFields__YDF"] } ] --
+ *  According Vue guidelines, the private properties should be underscored. */
+
+import { type ArbitraryObject } from "@yamato-daiwa/es-extensions";
+
+
+type Constructor = {
+  prototype: Prototype;
+  _nonReactiveStaticFields__YDF?: Array<string>;
+  [newProperties: string]: unknown;
+};
+
+type Prototype = {
+  created?: () => unknown;
+};
+
+
+const AccessibleFromTemplateAsNonReactive: PropertyDecorator = (target: object, propertyKey: string | symbol): void => {
+
+  if (typeof target !== "function") {
+    throw new Error("@exposeForTemplateAsNonReactive can only be applied to static fields.");
+  }
+
+
+  if (typeof propertyKey === "symbol") {
+    throw new Error("@exposeForTemplateAsNonReactive does not support symbol-type properties.");
+  }
+
+
+  /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- ※
+  * Although the `target` is a function, no need to call in here. Cast it to еру indexable type for accessing to static
+  *   properties. */
+  const constructor: Constructor = target as unknown as Constructor;
+
+  let hasCreatedLifecycleHookBeenPatched: boolean;
+
+  if (Array.isArray(constructor._nonReactiveStaticFields__YDF)) {
+    hasCreatedLifecycleHookBeenPatched = true;
+    constructor._nonReactiveStaticFields__YDF.push(propertyKey);
+  } else {
+    constructor._nonReactiveStaticFields__YDF = [ propertyKey ];
+    hasCreatedLifecycleHookBeenPatched = false;
+  }
+
+  if (!hasCreatedLifecycleHookBeenPatched) {
+
+    const prototype: Prototype = constructor.prototype;
+    const originalCreatedMethod: (() => unknown) | undefined = prototype.created;
+
+    prototype.created = function patchCheatedHook(): void {
+
+      originalCreatedMethod?.call(this);
+
+      for (const key of constructor._nonReactiveStaticFields__YDF ?? []) {
+        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions --
+         * It is possible to assign the new properties to prototype. */
+        (this as ArbitraryObject)[key] = constructor[key];
+      }
+
+    };
+
+  }
+
+};
+
+
+export default AccessibleFromTemplateAsNonReactive;

package/Source/GUI_Components/_Decorators/NonReactiveVueData.ts

@@ -0,0 +1,26 @@
+import { createDecorator } from "vue-facing-decorator";
+import type { ComponentOptions } from "vue";
+
+
+export default function NonReactiveVueData(
+  value: unknown
+): (_arguments: unknown, decoratorContext: string | DecoratorContext) => void {
+  return createDecorator(
+    (componentOptions: ComponentOptions, key: string): void => {
+
+      /* eslint-disable-next-line @typescript-eslint/unbound-method --
+       * The binding of the correct context will be executed inside the `patchCheatedHook` function. */
+      const originalCreatedHook: (() => unknown) | undefined = componentOptions.created;
+
+      componentOptions.created = function patchCheatedHook(): void {
+
+        originalCreatedHook?.call(this);
+
+        this[key] = value;
+
+      };
+
+    },
+    { preserve: true }
+  );
+}

package/Source/GUI_Components/_Decorators/preventNullForOptionalVueProperty.ts

@@ -0,0 +1,64 @@
+import { createDecorator } from "vue-facing-decorator";
+import type { ComponentOptions } from "vue";
+import { Logger, isUndefined } from "@yamato-daiwa/es-extensions";
+import ForbiddenNullValueOfOptionalVuePropertyError from
+    "../_Errors/ForbiddenNullValueOfOptionalVueProperty/ForbiddenNullValueOfOptionalVuePropertyError";
+
+
+const preventNullForOptionalVueProperty: (_arguments: unknown, decoratorContext: string | DecoratorContext) => void =
+    createDecorator(
+      (componentOptions: ComponentOptions, key: string): void => {
+
+        /* eslint-disable no-underscore-dangle -- [ CONVENTION ]
+         * Vue uses the `_` prefix to define its own private properties.  */
+        if (isUndefined(componentOptions._nonNullOptionalProperties__YDF)) {
+          componentOptions._nonNullOptionalProperties__YDF = [];
+        }
+
+        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions --
+        * The componentOptions` allows to add custom properties (do not be confused with ones called "props").
+        * Maybe they can be specified via generic parameter, but `ComponentOptions` have many generic parameters which
+        *   can not be specified selectively. */
+        ((componentOptions._nonNullOptionalProperties__YDF as Array<string>)).push(key);
+
+        patchLifecycleHook("beforeCreate", componentOptions);
+        patchLifecycleHook("beforeUpdate", componentOptions);
+
+      }
+    );
+
+
+function patchLifecycleHook(
+  targetHookName: "beforeCreate" | "beforeUpdate",
+  componentOptions: ComponentOptions
+): void {
+
+  const originalLifecycleHook: (() => unknown) | undefined = componentOptions[targetHookName];
+
+  componentOptions[targetHookName] = function lifecycleHookWrapper(): void {
+
+    const nonNullOptionalProperties: ReadonlyArray<string> = componentOptions._nonNullOptionalProperties__YDF;
+    /* eslint-enable no-underscore-dangle */
+
+    for (const nonNullOptionalProperty of nonNullOptionalProperties) {
+      if (this[nonNullOptionalProperty] === null) {
+        Logger.throwErrorWithFormattedMessage({
+          errorInstance: new ForbiddenNullValueOfOptionalVuePropertyError({
+            targetComponentName: componentOptions.name,
+            targetPropertyName: nonNullOptionalProperty
+          }),
+          title: ForbiddenNullValueOfOptionalVuePropertyError.localization.defaultTitle,
+          occurrenceLocation:
+              `${ componentOptions.name ?? "(Anonymous Component)" }.[prop]${ nonNullOptionalProperty }` +
+              "@OptionalButNotNullableVueProperty"
+        });
+      }
+    }
+
+    originalLifecycleHook?.call(this);
+
+  };
+}
+
+
+export default preventNullForOptionalVueProperty;

package/Source/GUI_Components/_Errors/ForbiddenNullValueOfOptionalVueProperty/ForbiddenNullValueOfOptionalVuePropertyError.ts

@@ -0,0 +1,47 @@
+import forbiddenNullValueOfOptionalVuePropertyErrorLocalization__english from
+    "./ForbiddenNullValueOfOptionalVuePropertyErrorLocalization.english";
+
+
+class ForbiddenNullValueOfOptionalVuePropertyError extends Error {
+
+  public static readonly NAME: string = "ForbiddenNullValueOfOptionalVuePropertyError";
+
+  public static localization: ForbiddenNullValueOfOptionalVuePropertyError.Localization =
+      forbiddenNullValueOfOptionalVuePropertyErrorLocalization__english;
+
+
+  public constructor(constructorParameter: ForbiddenNullValueOfOptionalVuePropertyError.ConstructorParameter) {
+
+    super();
+
+    this.name = ForbiddenNullValueOfOptionalVuePropertyError.NAME;
+
+    this.message = ForbiddenNullValueOfOptionalVuePropertyError.localization.generateMessage(constructorParameter);
+
+  }
+
+}
+
+
+namespace ForbiddenNullValueOfOptionalVuePropertyError {
+
+  export type ConstructorParameter = Localization.DescriptionTemplateParameters;
+
+  export type Localization = Readonly<{
+    defaultTitle: string;
+    generateMessage: (
+      templateParameters: Localization.DescriptionTemplateParameters
+    ) => string;
+  }>;
+
+  export namespace Localization {
+    export type DescriptionTemplateParameters = Readonly<{
+      targetComponentName?: string;
+      targetPropertyName: string;
+    }>;
+  }
+
+}
+
+
+export default ForbiddenNullValueOfOptionalVuePropertyError;

package/Source/GUI_Components/_Errors/ForbiddenNullValueOfOptionalVueProperty/ForbiddenNullValueOfOptionalVuePropertyErrorLocalization.english.ts

@@ -0,0 +1,24 @@
+import type ForbiddenNullValueOfOptionalVuePropertyError from "./ForbiddenNullValueOfOptionalVuePropertyError";
+import { isNonEmptyString } from "@yamato-daiwa/es-extensions";
+
+
+const forbiddenVuePropertyNullValueErrorLocalization__english: ForbiddenNullValueOfOptionalVuePropertyError.Localization = {
+  defaultTitle: "Forbidden Null Value of Optional Vue Property Error",
+  generateMessage(
+    {
+      targetPropertyName,
+      targetComponentName
+    }: ForbiddenNullValueOfOptionalVuePropertyError.Localization.DescriptionTemplateParameters
+  ): string {
+    return `Although the "${ targetPropertyName }" property is optional ` +
+      (
+        isNonEmptyString(targetComponentName) ?
+            `for "${ targetComponentName }" component or its inheritor` :
+            "(`name` not specified for target component)"
+      ) +
+      ", the `null` value is not allowed because it neither accessible from `validator` nor substitutable by `default`.";
+  }
+};
+
+
+export default forbiddenVuePropertyNullValueErrorLocalization__english;

package/Source/GUI_Components/_Errors/InvalidVueProperty/InvalidVuePropertyError.ts

@@ -0,0 +1,43 @@
+import invalidVuePropertyErrorLocalization__english from "./InvalidVuePropertyErrorLocalization.english";
+
+
+class InvalidVuePropertyError extends Error {
+
+  public static readonly NAME: string = "InvalidVuePropertyError";
+
+  public static localization: InvalidVuePropertyError.Localization = invalidVuePropertyErrorLocalization__english;
+
+
+  public constructor(compoundParameter: InvalidVuePropertyError.ConstructorParameter) {
+
+    super();
+
+    this.name = InvalidVuePropertyError.NAME;
+    this.message = InvalidVuePropertyError.localization.generateDescription(compoundParameter);
+
+  }
+
+}
+
+
+namespace InvalidVuePropertyError {
+
+  export type ConstructorParameter = Localization.DescriptionTemplateVariables;
+
+  export type Localization = Readonly<{
+    defaultTitle: string;
+    generateDescription: (templateVariables: Localization.DescriptionTemplateVariables) => string;
+  }>;
+
+  export namespace Localization {
+    export type DescriptionTemplateVariables = Readonly<{
+      componentName: string;
+      propertyName: string;
+      messageSpecificPart: string;
+    }>;
+  }
+
+}
+
+
+export default InvalidVuePropertyError;

package/Source/GUI_Components/_Errors/InvalidVueProperty/InvalidVuePropertyErrorLocalization.english.ts

@@ -0,0 +1,16 @@
+import type InvalidVuePropertyError from "./InvalidVuePropertyError";
+
+
+export const invalidVuePropertyErrorLocalization__english: InvalidVuePropertyError.Localization = {
+  defaultTitle: "Invalid Vue Property",
+  generateDescription: (
+    {
+      propertyName,
+      componentName,
+      messageSpecificPart
+    }: InvalidVuePropertyError.Localization.DescriptionTemplateVariables
+  ): string => `Invalid Vue property "${ propertyName }"of "${ componentName }" Vue component.\n${ messageSpecificPart }`
+};
+
+
+export default invalidVuePropertyErrorLocalization__english;

package/Source/GUI_Components/_VuePropertiesValidators/BooleanVuePropertyValidator.ts

@@ -0,0 +1,25 @@
+import VuePropertyValidator from "./VuePropertyValidator";
+import { isBoolean } from "@yamato-daiwa/es-extensions";
+
+
+export default function BooleanVuePropertyValidator(
+  {
+    componentName,
+    propertyName,
+    isPropertyRequired
+  }: Readonly<{
+    componentName: string;
+    propertyName: string;
+    isPropertyRequired: boolean;
+  }>
+): (targetVueProperty: Exclude<unknown, undefined>) => boolean {
+  return VuePropertyValidator.create({
+    checker: isBoolean,
+    messageSpecificPart:
+        isPropertyRequired ?
+            "Must be the boolean." :
+            "Must be either boolean or undefined (explicit or omitted).",
+    propertyName,
+    componentName
+  });
+}

package/Source/GUI_Components/_VuePropertiesValidators/DecorativeModifiersVuePropertyValidator.ts

@@ -0,0 +1,22 @@
+import VuePropertyValidator from "./VuePropertyValidator";
+import { isString, isElementOfEnumeration } from "@yamato-daiwa/es-extensions";
+
+
+export default function DecorativeModifiersVuePropertyValidator(
+  {
+    DecorativeModifiers,
+    CSS_NAMESPACE: componentName
+  }: Readonly<{
+    DecorativeModifiers: Readonly<{ [key: string]: string; }>;
+    CSS_NAMESPACE: string;
+  }>
+): (targetVueProperty: unknown) => boolean {
+  return VuePropertyValidator.create({
+    checker: (rawValue: unknown): boolean => Array.isArray(rawValue) && rawValue.every(
+      (element: unknown): boolean => isString(element) && isElementOfEnumeration(element, DecorativeModifiers)
+    ),
+    messageSpecificPart: `Each array element must the member of \`${ componentName }.DecorativeModifiers\` enumeration.`,
+    propertyName: "decorativeModifiers",
+    componentName
+  });
+}

package/Source/GUI_Components/_VuePropertiesValidators/DecorativeVariationVuePropertyValidator.ts

@@ -0,0 +1,23 @@
+import VuePropertyValidator from "./VuePropertyValidator";
+import { isString, isElementOfEnumeration } from "@yamato-daiwa/es-extensions";
+
+
+export default function DecorativeVariationVuePropertyValidator(
+  {
+    DecorativeVariations,
+    CSS_NAMESPACE: componentName
+  }: Readonly<{
+    DecorativeVariations: Readonly<{ [key: string]: string; }>;
+    CSS_NAMESPACE: string;
+  }>
+): (targetVueProperty: Exclude<unknown, undefined>) => boolean {
+  return VuePropertyValidator.create({
+    checker: (rawValue: Exclude<unknown, undefined>): boolean =>
+        isString(rawValue) && isElementOfEnumeration(rawValue, DecorativeVariations),
+    messageSpecificPart:
+        `Must be the string herewith one among values of \`${ componentName }.DecorativeVariations\` associative array ` +
+          `including the ones defined via \`${ componentName }.defineDecorativeVariations()\`.`,
+    propertyName: "decorativeVariation",
+    componentName
+  });
+}