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

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/{OptionalButNotNullableVueProperty.ts → preventNullForOptionalVueProperty.ts}

@@ -5,11 +5,10 @@ import ForbiddenNullValueOfOptionalVuePropertyError from
     "../_Errors/ForbiddenNullValueOfOptionalVueProperty/ForbiddenNullValueOfOptionalVuePropertyError";
 
 
-const OptionalButNotNullableVueProperty: (_arguments: unknown, decoratorContext: (string | DecoratorContext)) => void =
+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)) {
@@ -43,7 +42,7 @@ function patchLifecycleHook(
 
     for (const nonNullOptionalProperty of nonNullOptionalProperties) {
       if (this[nonNullOptionalProperty] === null) {
-        Logger.throwErrorAndLog({
+        Logger.throwErrorWithFormattedMessage({
           errorInstance: new ForbiddenNullValueOfOptionalVuePropertyError({
             targetComponentName: componentOptions.name,
             targetPropertyName: nonNullOptionalProperty
@@ -62,4 +61,4 @@ function patchLifecycleHook(
 }
 
 
-export default OptionalButNotNullableVueProperty;
+export default preventNullForOptionalVueProperty;

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
+  });
+}

package/Source/GUI_Components/_VuePropertiesValidators/ElementOfEnumerationVuePropertyValidator.ts

@@ -0,0 +1,29 @@
+import VuePropertyValidator from "./VuePropertyValidator";
+import { isString, isElementOfEnumeration } from "@yamato-daiwa/es-extensions";
+
+
+export default function ElementOfEnumerationVuePropertyValidator(
+  {
+    componentName,
+    propertyName,
+    enumeration,
+    isPropertyRequired,
+    enumerationFullyQualifiedName
+  }: Readonly<{
+    componentName: string;
+    propertyName: string;
+    isPropertyRequired: boolean;
+    enumeration: Readonly<{ [key: string]: string | number; }>;
+    enumerationFullyQualifiedName: string;
+  }>
+): (targetVueProperty: unknown) => boolean {
+  return VuePropertyValidator.create({
+    checker: (rawValue: unknown): boolean => isString(rawValue) && isElementOfEnumeration(rawValue, enumeration),
+    messageSpecificPart:
+        isPropertyRequired ?
+            `Must the an element of "${ enumerationFullyQualifiedName }" enumeration.` :
+            `Must be either element of "${ enumerationFullyQualifiedName }" enumeration of undefined (explicit or omitted).`,
+    propertyName,
+    componentName
+  });
+}

package/Source/GUI_Components/_VuePropertiesValidators/GeometricModifiersVuePropertyValidator.ts

@@ -0,0 +1,22 @@
+import VuePropertyValidator from "./VuePropertyValidator";
+import { isString, isElementOfEnumeration } from "@yamato-daiwa/es-extensions";
+
+
+export default function GeometricModifiersVuePropertyValidator(
+  {
+    GeometricModifiers,
+    CSS_NAMESPACE: componentName
+  }: Readonly<{
+    GeometricModifiers: 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, GeometricModifiers)
+    ),
+    messageSpecificPart: `Each array element must the member of \`${ componentName }.GeometricModifiers\` enumeration.`,
+    propertyName: "geometricModifiers",
+    componentName
+  });
+}

package/Source/GUI_Components/_VuePropertiesValidators/GeometricVariationVuePropertyValidator.ts

@@ -0,0 +1,23 @@
+import VuePropertyValidator from "./VuePropertyValidator";
+import { isString, isElementOfEnumeration } from "@yamato-daiwa/es-extensions";
+
+
+export default function GeometricVariationVuePropertyValidator(
+  {
+    GeometricVariations,
+    CSS_NAMESPACE: componentName
+  }: Readonly<{
+    GeometricVariations: 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, GeometricVariations),
+    messageSpecificPart:
+        `Must be the string herewith one among values of \`${ componentName }.GeometricVariations\` associative array ` +
+          ` including the ones defined via \`${ componentName }.defineGeometricVariations()\`.`,
+    propertyName: "geometricVariation",
+    componentName
+  });
+}

package/Source/GUI_Components/_VuePropertiesValidators/NaturalNumberOrZeroVuePropertyValidator.ts

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

package/Source/GUI_Components/_VuePropertiesValidators/NonEmptyStringVuePropertyValidator.ts

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

package/Source/GUI_Components/_VuePropertiesValidators/ThemeVuePropertyValidator.ts

@@ -0,0 +1,23 @@
+import VuePropertyValidator from "./VuePropertyValidator";
+import { isString, isElementOfEnumeration } from "@yamato-daiwa/es-extensions";
+
+
+export default function ThemeVuePropertyValidator(
+  {
+    Themes,
+    CSS_NAMESPACE: componentName
+  }: Readonly<{
+    Themes: 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, Themes),
+    messageSpecificPart:
+        `Must be the string herewith one among values of \`${ componentName }.Themes\` associative array including ` +
+          `the ones defined via \`${ componentName }.defineThemes()\`.`,
+    propertyName: "theme",
+    componentName
+  });
+}

package/Source/GUI_Components/_VuePropertiesValidators/VuePropertyValidator.ts

@@ -0,0 +1,51 @@
+import { Logger } from "@yamato-daiwa/es-extensions";
+import InvalidVuePropertyError from "../_Errors/InvalidVueProperty/InvalidVuePropertyError";
+
+
+type VuePropertyValidator = (value: Exclude<unknown, undefined>) => boolean;
+
+
+namespace VuePropertyValidator {
+
+  export function create(
+    {
+      checker,
+      componentName,
+      propertyName,
+      messageSpecificPart
+    }: Readonly<{
+      checker: (targetVueProperty: Exclude<unknown, undefined>) => boolean;
+      componentName: string;
+      propertyName: string;
+      messageSpecificPart: string;
+    }>
+  ): VuePropertyValidator {
+    return (targetVueProperty: Exclude<unknown, undefined>): boolean => {
+
+      if (!checker(targetVueProperty)) {
+
+        Logger.logError({
+          errorType: InvalidVuePropertyError.NAME,
+          title: InvalidVuePropertyError.localization.defaultTitle,
+          description: InvalidVuePropertyError.localization.generateDescription({
+            componentName,
+            propertyName,
+            messageSpecificPart
+          }),
+          occurrenceLocation: "VuePropertyValidator"
+        });
+
+        return false;
+
+      }
+
+
+      return true;
+
+    };
+  }
+
+}
+
+
+export default VuePropertyValidator;

package/Source/index.ts

@@ -2,27 +2,43 @@ export { default as YDF_ComponentsCoordinator } from "./GUI_Components/YDF_Compo
 
 /* ━━━ Officially Realized ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
 /* ━━━ GUI Components ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+/* ╍╍╍ Admonition Block ╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍ */
+export { default as AdmonitionBlockLogic } from "./GUI_Components/AdmonitionBlock/AdmonitionBlockLogic.vue";
 export { default as AdmonitionBlock } from "./GUI_Components/AdmonitionBlock/AdmonitionBlock.vue";
 
+// ━━━ TODO ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 export { default as Badge } from "./GUI_Components/Badge/Badge.vue";
 export { default as BadgeLoadingPlaceholder } from "./GUI_Components/Badge/LoadingPlaceholder/Badge-LoadingPlaceholder.vue";
 
-/* ─── Controls ───────────────────────────────────────────────────────────────────────────────────────────────────── */
-/* ┄┄┄ Buttons ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ */
+/* ┅┅┅ Controls ┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅┅ */
+export { default as ValidatableControlShell } from
+    "./GUI_Components/Controls/ValidatableControlShell/ValidatableControlShell.vue";
+
+/* ╍╍╍ Buttons ╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍ */
 export { default as Button } from "./GUI_Components/Controls/Buttons/Plain/Button.vue";
 export { default as ButtonLoadingPlaceholder } from
     "./GUI_Components/Controls/Buttons/Plain/LoadingPlaceholder/Button-LoadingPlaceholder.vue";
 
+export { default as HamburgerMenuButton } from "./GUI_Components/Controls/Buttons/HamburgerMenu/HamburgerMenuButton.vue";
+export { default as HamburgerMenuButtonLogic } from
+    "./GUI_Components/Controls/Buttons/HamburgerMenu/HamburgerMenuButton-ForInheritance.vue";
 
-/* ━━━ Alpha / Beta ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
-/* ┄┄┄ Validatable Control Shell ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ */
-export { default as ValidatableControlShell } from
-    "./GUI_Components/Controls/ValidatableControlShell/ValidatableControlShell.vue";
+export { default as ClosingButton } from "./GUI_Components/Controls/Buttons/Closing/ClosingButton.vue";
 
-/* ┄┄┄ Validatables ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄ */
+/* ╍╍╍ Validatables ╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍ */
+export { default as InputtableControl } from "./GUI_Components/Controls/Validatables/InputtableControl.vue";
+export { default as ValidatableControl } from "./GUI_Components/Controls/Validatables/ValidatableControl";
+export { default as ValidatableControlsGroup } from "./GUI_Components/Controls/Validatables/ValidatableControlsGroup";
+
+export { default as TextBox } from "./GUI_Components/Controls/Validatables/TextBox/TextBox.vue";
 
-export { default as OverflowSafeSingleLineLabel } from "./GUI_Components/OverflowSafeSingleLineLabel.vue";
 
+/* ━━━ Alpha / Beta ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+export { default as AccessibleFromTemplateAsNonReactive } from "./GUI_Components/_Decorators/AccessibleFromTemplateAsNonReactive";
+export { default as NonReactiveVueData } from "./GUI_Components/_Decorators/NonReactiveVueData";
+export { default as preventNullForOptionalVueProperty } from "./GUI_Components/_Decorators/preventNullForOptionalVueProperty";
+
+export { default as OverflowSafeSingleLineLabel } from "./GUI_Components/OverflowSafeSingleLineLabel.vue";
 export { default as ThemesShowcase } from "./GUI_Components/ThemesShowcase.vue";
 
 /* ━━━ Icons ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

package/Workbenches/Source/Decorators/Decorators.workbench.pug

@@ -0,0 +1,20 @@
+extends ../../../node_modules/@yamato-daiwa/frontend/PagesTemplates/RegularWebPageTemplate.pug
+
+
+block append Metadata
+
+  -
+
+    RegularWebPageTemplate__YDF.configure({
+      metadata: {
+        title: "Decorators Workbench"
+      },
+      scriptsURIs: {
+        atEndOfBody: [ "@Workbenches/Decorators/Decorators.workbench" ]
+      }
+    });
+
+
+block append PageContent
+
+  #APPLICATION

package/Workbenches/Source/Decorators/Decorators.workbench.ts

@@ -0,0 +1,5 @@
+import { createApp as createVueApplication } from "vue";
+import DecoratorsWorkbench from "./DecoratorsWorkbench.vue";
+
+
+createVueApplication(DecoratorsWorkbench).mount("#APPLICATION");

package/Workbenches/Source/Decorators/DecoratorsWorkbench.vue

@@ -0,0 +1,69 @@
+<template lang="pug">
+
+  button(
+    type="button"
+    @click="updateFields"
+  ) Change
+
+  span {{ reactiveFiled }}
+  span {{ nonReactiveFiled }}
+
+  span {{ staticField1 }}
+  span {{ staticField2 }}
+
+</template>
+
+
+<script lang="ts">
+
+  /* ─── Framework ────────────────────────────────────────────────────────────────────────────────────────────────── */
+  import {
+    Component as VueComponentOptions,
+    Vue as VueComponent,
+    toNative as transformToOptionAPI_Component
+  } from "vue-facing-decorator";
+
+  /* ─── Utils ────────────────────────────────────────────────────────────────────────────────────────────────────── */
+  import {
+    AccessibleFromTemplateAsNonReactive,
+    NonReactiveVueData
+  } from "../../../Source";
+
+  @VueComponentOptions({ name: "DecoratorsWorkbench" })
+  class DecoratorsWorkbench extends VueComponent {
+
+    protected reactiveFiled = "ALPHA";
+
+    @NonReactiveVueData("ALPHA")
+    protected nonReactiveFiled!: string;
+
+    @AccessibleFromTemplateAsNonReactive
+    protected static staticField1: string = "STATIC_FIELD_1";
+
+    @AccessibleFromTemplateAsNonReactive
+    protected static staticField2: string = "STATIC_FIELD_2";
+
+    protected updateFields(): void {
+      this.reactiveFiled = "BRAVO";
+      this.nonReactiveFiled = "CHARLIE";
+      DecoratorsWorkbench.staticField1 = "UPDATED_STATIC_FIELD_1";
+      DecoratorsWorkbench.staticField2 = "UPDATED_STATIC_FIELD_2";
+    }
+
+  }
+
+  export default transformToOptionAPI_Component(DecoratorsWorkbench);
+
+</script>
+
+
+<style lang="stylus">
+
+  @require "../../../node_modules/@yamato-daiwa/frontend/Functionality.styl"
+  @require "../../../node_modules/@yamato-daiwa/frontend/GUI_Components.styl"
+
+
+  CrossBrowserStylesReset()
+  InitialGlobalCSS_Rules()
+
+</style>

package/Workbenches/Source/GUI_Components/AdmonitionBlock/AdmonitionBlockComponentTestSite.vue

@@ -9,15 +9,22 @@
   import { AdmonitionBlock } from "../../../../Source";
 
   /* ─── Framework ────────────────────────────────────────────────────────────────────────────────────────────────── */
-  import { Component as VueComponentOptions, Vue as VueComponent } from "vue-facing-decorator";
+  import {
+    Component as VueComponentOptions,
+    Vue as VueComponent,
+    toNative as transformToOptionAPI_Component
+  } from "vue-facing-decorator";
 
 
   @VueComponentOptions({
+    name: "AdmonitionBlockComponentTestSite",
     components: {
       AdmonitionBlock
     }
   })
-  export default class AdmonitionBlockComponentTestSite extends VueComponent {}
+  class AdmonitionBlockComponentTestSite extends VueComponent {}
+
+  export default transformToOptionAPI_Component(AdmonitionBlockComponentTestSite);
 
 </script>