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

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

@@ -1,352 +0,0 @@
-/* ─── Assets ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
-import componentVueTemplate from "./Button.vue.pug";
-
-/* ─── Framework ──────────────────────────────────────────────────────────────────────────────────────────────────── */
-import {
-  ComponentBase as VueComponentConfiguration,
-  Vue as VueComponent,
-  Prop as VueProperty
-} from "vue-facing-decorator";
-import type { RouteLocationRaw as VueRouterRawLocation } from "vue-router";
-
-/* ─── Utils ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
-import YDF_ComponentsCoordinator from "../../../YDF_ComponentsCoordinator";
-import InvalidVuePropertiesCombinationError from
-    "../../../_Errors/InvalidVuePropertiesCombination/InvalidVuePropertiesCombinationError";
-import {
-  Logger,
-  isNumber,
-  isString,
-  isNonEmptyString,
-  isEitherUndefinedOrNull,
-  isNeitherUndefinedNorNull,
-  isElementOfEnumeration,
-  isArbitraryObject,
-  emptyStringToNull,
-  type ElementOfPseudoEnumeration
-} from "@yamato-daiwa/es-extensions";
-
-
-@VueComponentConfiguration({
-  name: Button.CSS_NAMESPACE,
-  template: componentVueTemplate
-})
-class Button extends VueComponent {
-
-  /* ━━━ Static Fields ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
-  public static CSS_NAMESPACE: string = "Button--YDF";
-
-  public static HTML_Types: Button.HTML_Types = {
-    regular: "BUTTON",
-    submit: "SUBMIT",
-    inputButton: "INPUT_BUTTON",
-    inputSubmit: "INPUT_SUBMIT",
-    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)
-  })
-  protected readonly HTML_Type!: ElementOfPseudoEnumeration<Button.HTML_Types>;
-
-
-  /* ─── Textings ─────────────────────────────────────────────────────────────────────────────────────────────────── */
-  @VueProperty({ validator: (value: unknown): boolean => isNonEmptyString(value) || isNumber(value) })
-  protected readonly label?: string | number | null;
-
-  @VueProperty({ validator: isNonEmptyString })
-  protected readonly accessibilityGuidance?: string | null;
-
-
-  /* ─── Links ────────────────────────────────────────────────────────────────────────────────────────────────────── */
-  @VueProperty({ validator: (value: unknown): boolean => isNonEmptyString(value) || isArbitraryObject(value) })
-  protected readonly route?: VueRouterRawLocation | null;
-
-  @VueProperty({ validator: isNonEmptyString })
-  protected readonly externalURI?: string | null;
-
-  @VueProperty({ type: Boolean, default: false })
-  protected readonly mustOpenLinkInNewTab!: boolean;
-
-  @VueProperty({ type: Boolean, default: false })
-  protected readonly mustRequestNotFollowLinkForCrawlingToSearchEngine!: boolean;
-
-
-  /* ─── Status ───────────────────────────────────────────────────────────────────────────────────────────────────── */
-  @VueProperty({ type: Boolean, default: false })
-  protected readonly disabled!: boolean;
-
-  @VueProperty({ type: Boolean, default: false })
-  protected readonly toggled!: boolean;
-
-
-  /* ━━━ Theming ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
-  public static readonly Themes: Button.Themes = { regular: "REGULAR" };
-
-  @VueProperty({
-    type: String,
-    default: Button.Themes.regular,
-    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, Button.Themes)
-  })
-  protected readonly theme!: string;
-
-  public static defineThemes(themesNames: ReadonlyArray<string>): typeof Button {
-    return YDF_ComponentsCoordinator.defineThemes(themesNames, Button);
-  }
-
-  public static areThemesCSS_ClassesCommon: boolean = YDF_ComponentsCoordinator.areThemesCSS_ClassesCommon;
-
-  public static considerThemesAsCommon(): void {
-    Button.areThemesCSS_ClassesCommon = true;
-  }
-
-  @VueProperty({ type: Boolean, default: Button.areThemesCSS_ClassesCommon })
-  private readonly areThemesCSS_ClassesCommon!: boolean;
-
-
-  /* ─── Geometry ─────────────────────────────────────────────────────────────────────────────────────────────────── */
-  public static readonly GeometricVariations: Button.GeometricVariations = {
-    regular: "REGULAR",
-    small: "SMALL",
-    linkLike: "LINK_LIKE"
-  };
-
-  @VueProperty({
-    type: String,
-    default: Button.GeometricVariations.regular,
-    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, Button.GeometricVariations)
-  })
-  protected readonly geometricVariation!: string;
-
-  public static defineGeometricVariations(geometricVariationsNames: ReadonlyArray<string>): typeof Button {
-    return YDF_ComponentsCoordinator.defineGeometricVariations(geometricVariationsNames, Button);
-  }
-
-  @VueProperty({
-    type: Array,
-    default: (): ReadonlyArray<string> => [],
-    validator: (rawValue: ReadonlyArray<unknown>): boolean =>
-        rawValue.every(
-          (element: unknown): boolean => isString(element) && isElementOfEnumeration(element, Button.GeometricModifiers)
-        )
-  })
-  protected readonly geometricModifiers!: ReadonlyArray<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)
-  })
-  protected readonly decorativeVariation!: string;
-
-  public static defineDecorativeVariations(decorativeVariationsNames: ReadonlyArray<string>): typeof Button {
-    return YDF_ComponentsCoordinator.defineDecorativeVariations(decorativeVariationsNames, Button);
-  }
-
-
-  @VueProperty({
-    type: Array,
-    default: (): ReadonlyArray<string> => [],
-    validator: (rawValue: ReadonlyArray<unknown>): boolean =>
-        rawValue.every(
-          (element: unknown): boolean => isString(element) && isElementOfEnumeration(element, Button.DecorativeModifiers)
-        )
-  })
-  protected readonly decorativeModifiers!: ReadonlyArray<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()`
-      });
-    }
-
-    this.initializeNonReactiveClassFields();
-
-  }
-
-
-  /* ━━━ Root Element Tag Name ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
-  protected get isButtonTheTagNameOfRootElement(): boolean {
-    return isEitherUndefinedOrNull(this.route) &&
-        isEitherUndefinedOrNull(this.externalURI) &&
-        (this.HTML_Type === Button.HTML_Types.regular || this.HTML_Type === Button.HTML_Types.submit);
-  }
-
-  protected get isInputTheTagNameOfRootElement(): boolean {
-    return isEitherUndefinedOrNull(this.route) &&
-        isEitherUndefinedOrNull(this.externalURI) &&
-        (
-          this.HTML_Type === Button.HTML_Types.inputButton ||
-          this.HTML_Type === Button.HTML_Types.inputSubmit ||
-          this.HTML_Type === Button.HTML_Types.inputReset
-        );
-  }
-
-  private get isRouterLinkTheRootElement(): boolean {
-    return isNeitherUndefinedNorNull(this.route);
-  }
-
-  private get isAnchorTheTagNameOfRootElement(): boolean {
-    return isNeitherUndefinedNorNull(this.externalURI);
-  }
-
-
-  /* ━━━ Root Element Attributes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
-  protected get typeAttributeValueOfButtonOrInputElement(): string | null {
-
-    if (!this.isButtonTheTagNameOfRootElement && !this.isInputTheTagNameOfRootElement) {
-      return null;
-    }
-
-
-    switch (this.HTML_Type) {
-      case Button.HTML_Types.regular: return "button";
-      case Button.HTML_Types.submit: return "submit";
-      case Button.HTML_Types.inputButton: return "button";
-      case Button.HTML_Types.inputSubmit: return "submit";
-      case Button.HTML_Types.inputReset: return "reset";
-      default: return null;
-    }
-
-  }
-
-  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` ] : [],
-
-      ...YDF_ComponentsCoordinator.addThemeCSS_ClassToArrayIfMust({
-        themeValue: this.theme,
-        allThemes: Button.Themes,
-        areThemesCSS_ClassesCommon: this.areThemesCSS_ClassesCommon,
-        CSS_Namespace: Button.CSS_NAMESPACE
-      }),
-
-      ...YDF_ComponentsCoordinator.addGeometricVariationCSS_ClassToArrayIfMust({
-        geometricVariation: this.geometricVariation,
-        allGeometricVariations: Button.GeometricVariations,
-        CSS_Namespace: Button.CSS_NAMESPACE
-      }),
-
-      ...YDF_ComponentsCoordinator.
-          generateDemandedGeometricModifiersCSS_Classes(Button.CSS_NAMESPACE, this.geometricModifiers),
-
-      ...YDF_ComponentsCoordinator.addDecorativeVariationCSS_ClassToArrayIfMust({
-        decorativeVariation: this.decorativeVariation,
-        allDecorativeVariations: Button.DecorativeVariations,
-        CSS_Namespace: Button.CSS_NAMESPACE
-      }),
-
-      ...YDF_ComponentsCoordinator.
-          generateDemandedDecorativeModifiersCSS_Classes(Button.CSS_NAMESPACE, this.decorativeModifiers)
-
-    ];
-  }
-
-}
-
-
-namespace Button {
-
-  export type HTML_Types = Readonly<{
-    regular: "BUTTON";
-    submit: "SUBMIT";
-    inputButton: "INPUT_BUTTON";
-    inputSubmit: "INPUT_SUBMIT";
-    inputReset: "INPUT_RESET";
-  }>;
-
-  export type Themes = {
-    readonly regular: "REGULAR";
-    [themeName: string]: string;
-  };
-
-  export type GeometricVariations = {
-    readonly regular: "REGULAR";
-    readonly small: "SMALL";
-    readonly linkLike: "LINK_LIKE";
-    [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",
-    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",
-    noBackgroundInDefaultState = "NO_BACKGROUND_IN_DEFAULT_STATE"
-  }
-
-}
-
-
-export default Button;

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

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

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

@@ -1,74 +0,0 @@
-/* ─── Assets ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
-import Button from "../Button.vue";
-import componentVueTemplate from "./Button-LoadingPlaceholder.vue.pug";
-
-/* ─── Framework ──────────────────────────────────────────────────────────────────────────────────────────────────── */
-import {
-  ComponentBase as VueComponentConfiguration,
-  Vue as VueComponent,
-  Prop as VueProperty
-} from "vue-facing-decorator";
-
-/* ─── Utils ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
-import { isString, isElementOfEnumeration } from "@yamato-daiwa/es-extensions";
-import YDF_ComponentsCoordinator from "../../../../YDF_ComponentsCoordinator";
-
-
-@VueComponentConfiguration({
-  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)
-  })
-  protected readonly theme!: string;
-
-  @VueProperty({ type: Boolean, default: Button.areThemesCSS_ClassesCommon })
-  protected readonly areThemesCSS_ClassesCommon!: boolean;
-
-
-  @VueProperty({
-    type: String,
-    default: Button.GeometricVariations.regular,
-    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, Button.GeometricVariations)
-  })
-  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)
-        )
-  })
-  protected readonly geometricModifiers!: ReadonlyArray<Button.GeometricModifiers>;
-
-
-  protected get rootElementModifierCSS_Classes(): ReadonlyArray<string> {
-    return [
-
-      ...YDF_ComponentsCoordinator.addThemeCSS_ClassToArrayIfMust({
-        themeValue: this.theme,
-        allThemes: Button.Themes,
-        areThemesCSS_ClassesCommon: this.areThemesCSS_ClassesCommon,
-        CSS_Namespace: Button.CSS_NAMESPACE
-      }),
-
-      ...YDF_ComponentsCoordinator.addGeometricVariationCSS_ClassToArrayIfMust({
-        geometricVariation: this.geometricVariation,
-        allGeometricVariations: Button.GeometricVariations,
-        CSS_Namespace: Button.CSS_NAMESPACE
-      }),
-
-      ...YDF_ComponentsCoordinator.
-          generateDemandedGeometricModifiersCSS_Classes(Button.CSS_NAMESPACE, this.geometricModifiers)
-
-    ];
-  }
-
-}

package/Source/GUI_Components/Controls/ValidatableControlShell/ValidatableControlShell.vue.pug

@@ -1,51 +0,0 @@
-.ValidatableControlShell--YDF(
-  :class="rootElementModifierCSS_Classes"
-)
-
-  .ValidatableControlShell--YDF-Header(
-    v-if="mustDisplayHeader"
-  )
-
-    label.ValidatableControlShell--YDF-Label(
-      v-if="label"
-      :for="coreElementHTML_ID"
-      :id="labelElementHTML_ID"
-    ) {{ label }}
-
-    span.ValidatableControlShell--YDF-Badge.ValidatableControlShell--YDF-Badge__RequiredInput(
-      v-if="mustDisplayRequiredInputBadge"
-    ) {{ localization.requirementBadges.required }}
-
-    span.ValidatableControlShell--YDF-Badge.ValidatableControlShell--YDF-Badge__OptionalInput(
-      v-else-if="mustDisplayOptionalInputBadge"
-    ) {{ localization.requirementBadges.optional }}
-
-    span.ValidatableControlShell--YDF-Badge.ValidatableControlShell--YDF-Badge__Invisible(
-      v-else-if="mustAddInvisibleBadgeForHeightEqualizingWhenNoBadge"
-    )
-
-
-  p.ValidatableControlShell--YDF-Guidance(
-    v-if="guidance"
-    v-html="guidance"
-  )
-
-
-  .ValidatableControlShell--YDF-MainSlotCustomizableWrapper(
-    :class="mainSlotWrapperAdditionalCSS_Classes"
-  ): slot
-
-
-  //-
-    VerticallySlidingAlwaysMountedContainer.ValidatableControlShell--YDF-ValidationErrorsMessagesList(
-      v-model="isDisplaying"
-      expanded="invalidInputHighlightingIfAnyValidationErrorsMessages && validationErrorsMessagesCopyForAnimating.length > 0"
-      HTML_Tag="ul"
-      mustAnimateHeightWhenContentsAreChanged="true"
-      animationDuration__seconds="VALIDATION_ERRORS_MESSAGES_ANIMATION_DURATION__SECONDS"
-    )
-
-      li.ValidatableControlShell--YDF-ValidationErrorMessage(
-        v-for="validationErrorMessage of validationErrorsMessagesCopyForAnimating"
-        key="`VALIDATION_ERROR_MESSAGE-${ validationErrorMessage }`"
-      ) {{ validationErrorMessage }}