@yamato-daiwa/frontend-vue 0.0.1

package/Source/GUI_Components/Badge/Badge.vue.ts

@@ -0,0 +1,205 @@
+/* ─── Assets ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
+import componentVueTemplate from "./Badge.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 ComponentsAuxiliaries from "../ComponentsAuxiliaries";
+
+
+@VueComponentConfiguration({
+  name: Badge.CSS_NAMESPACE,
+  template: componentVueTemplate
+})
+class Badge extends VueComponent {
+
+  public static CSS_NAMESPACE: string = "Badge--YDF";
+
+
+  @VueProperty({ type: String })
+  protected readonly keyLabel?: string | null;
+
+  @VueProperty({ type: String, required: true })
+  protected readonly valueLabel!: string;
+
+  @VueProperty({ type: String, default: "span" })
+  protected readonly rootElementTag!: string;
+
+
+  /* ━━━ Theming ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  public static readonly Themes: Badge.Themes = { regular: "REGULAR" };
+
+  @VueProperty({
+    type: String,
+    default: Badge.Themes.regular,
+    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, Badge.Themes)
+  })
+  protected readonly theme!: string;
+
+  public static defineThemes(themesNames: ReadonlyArray<string>): typeof Badge {
+    return ComponentsAuxiliaries.defineThemes(themesNames, Badge);
+  }
+
+  public static areThemesCSS_ClassesCommon: boolean = ComponentsAuxiliaries.areThemesCSS_ClassesCommon;
+
+  public static considerThemesAsCommon(): void {
+    Badge.areThemesCSS_ClassesCommon = true;
+  }
+
+  @VueProperty({ type: Boolean, default: Badge.areThemesCSS_ClassesCommon })
+  protected readonly areThemesCSS_ClassesCommon!: boolean;
+
+
+  /* ─── Geometry ─────────────────────────────────────────────────────────────────────────────────────────────────── */
+  public static readonly GeometricVariations: Badge.GeometricVariations = {
+    regular: "REGULAR",
+    small: "SMALL"
+  };
+
+  @VueProperty({
+    type: String,
+    default: Badge.GeometricVariations.regular,
+    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, Badge.GeometricVariations)
+  })
+  protected readonly geometricVariation!: string;
+
+  public static defineGeometricVariations(geometricVariationsNames: ReadonlyArray<string>): typeof Badge {
+    return ComponentsAuxiliaries.defineGeometricVariations(geometricVariationsNames, Badge);
+  }
+
+  @VueProperty({
+    type: Array,
+    default: (): ReadonlyArray<Badge.GeometricModifiers> => [],
+    validator: (rawValue: ReadonlyArray<unknown>): boolean =>
+        rawValue.every(
+          (element: unknown): boolean => isString(element) && isElementOfEnumeration(element, Badge.GeometricModifiers)
+        )
+  })
+  protected readonly geometricModifiers!: ReadonlyArray<Badge.GeometricModifiers>;
+
+
+  /* ─── Decoration ───────────────────────────────────────────────────────────────────────────────────────────────── */
+  public static readonly DecorativeVariations: Badge.DecorativeVariations = {
+    veryCatchyBright: "VERY_CATCHY_BRIGHT",
+    catchyBright: "CATCHY_BRIGHT",
+    modestlyCatchyBright: "MODESTLY_CATCHY_BRIGHT",
+    neutralBright: "NEUTRAL_BRIGHT",
+    modestlyCalmingBright: "MODESTLY_CALMING_BRIGHT",
+    calmingBright: "CALMING_BRIGHT",
+    achromaticBright: "ACHROMATIC_BRIGHT",
+    veryCatchyPastel: "VERY_CATCHY_PASTEL",
+    catchyPastel: "CATCHY_PASTEL",
+    modestlyCatchyPastel: "MODESTLY_CATCHY_PASTEL",
+    neutralPastel: "NEUTRAL_PASTEL",
+    modestlyCalmingPastel: "MODESTLY_CALMING_PASTEL",
+    calmingPastel: "CALMING_PASTEL",
+    achromaticPastel: "ACHROMATIC_PASTEL"
+  };
+
+  @VueProperty({
+    type: String,
+    required: true,
+    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, Badge.DecorativeVariations)
+  })
+  protected readonly decorativeVariation!: string;
+
+  public static defineDecorativeVariations(decorativeVariationsNames: ReadonlyArray<string>): typeof Badge {
+    return ComponentsAuxiliaries.defineDecorativeVariations(decorativeVariationsNames, Badge);
+  }
+
+   @VueProperty({
+    type: Array,
+    default: (): ReadonlyArray<Badge.DecorativeModifiers> => [],
+    validator: (rawValue: ReadonlyArray<unknown>): boolean =>
+        rawValue.every(
+          (element: unknown): boolean => isString(element) && isElementOfEnumeration(element, Badge.DecorativeModifiers)
+        )
+  })
+  protected readonly decorativeModifiers!: ReadonlyArray<Badge.DecorativeModifiers>;
+
+
+  /* ━━━ CSS Classes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  protected get rootElementModifierCSS_Classes(): ReadonlyArray<string> {
+    return [
+
+      ...ComponentsAuxiliaries.addThemeCSS_ClassToArrayIfMust({
+        themeValue: this.theme,
+        allThemes: Badge.Themes,
+        areThemesCSS_ClassesCommon: this.areThemesCSS_ClassesCommon,
+        CSS_Namespace: Badge.CSS_NAMESPACE
+      }),
+
+      ...ComponentsAuxiliaries.addGeometricVariationCSS_ClassToArrayIfMust({
+        geometricVariation: this.geometricVariation,
+        allGeometricVariations: Badge.GeometricVariations,
+        CSS_Namespace: Badge.CSS_NAMESPACE
+      }),
+
+      ...ComponentsAuxiliaries.
+          generateDemandedGeometricModifiersCSS_Classes(Badge.CSS_NAMESPACE, this.geometricModifiers),
+
+      ...ComponentsAuxiliaries.addDecorativeVariationCSS_ClassToArrayIfMust({
+        decorativeVariation: this.decorativeVariation,
+        allDecorativeVariations: Badge.DecorativeVariations,
+        CSS_Namespace: Badge.CSS_NAMESPACE
+      }),
+
+      ...ComponentsAuxiliaries.
+          generateDemandedDecorativeModifiersCSS_Classes(Badge.CSS_NAMESPACE, this.decorativeModifiers)
+
+    ];
+  }
+
+}
+
+
+namespace Badge {
+
+  export type Themes = {
+    readonly regular: "REGULAR";
+    [themeName: string]: string;
+  };
+
+  export type GeometricVariations = {
+    readonly regular: "REGULAR";
+    [variationName: string]: string;
+  };
+
+  export enum GeometricModifiers {
+    pillShape = "PILL_SHAPE",
+    singleLine = "SINGLE_LINE"
+  }
+
+  export type DecorativeVariations = {
+    readonly veryCatchyBright: "VERY_CATCHY_BRIGHT";
+    readonly catchyBright: "CATCHY_BRIGHT";
+    readonly modestlyCatchyBright: "MODESTLY_CATCHY_BRIGHT";
+    readonly neutralBright: "NEUTRAL_BRIGHT";
+    readonly modestlyCalmingBright: "MODESTLY_CALMING_BRIGHT";
+    readonly calmingBright: "CALMING_BRIGHT";
+    readonly achromaticBright: "ACHROMATIC_BRIGHT";
+    readonly veryCatchyPastel: "VERY_CATCHY_PASTEL";
+    readonly catchyPastel: "CATCHY_PASTEL";
+    readonly modestlyCatchyPastel: "MODESTLY_CATCHY_PASTEL";
+    readonly neutralPastel: "NEUTRAL_PASTEL";
+    readonly modestlyCalmingPastel: "MODESTLY_CALMING_PASTEL";
+    readonly calmingPastel: "CALMING_PASTEL";
+    readonly achromaticPastel: "ACHROMATIC_PASTEL";
+    [variationName: string]: string;
+  };
+
+  export enum DecorativeModifiers {
+    bordersDisguising = "BORDERS_DISGUISING",
+    noBackground = "NO_BACKGROUND"
+  }
+
+}
+
+
+export default Badge;

package/Source/GUI_Components/Badge/LoadingPlaceholder/Badge-LoadingPlaceholder.vue.pug

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

package/Source/GUI_Components/Badge/LoadingPlaceholder/Badge-LoadingPlaceholder.vue.ts

@@ -0,0 +1,74 @@
+/* ─── Assets ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
+import Badge from "../Badge.vue";
+import componentVueTemplate from "./Badge-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 ComponentsAuxiliaries from "../../ComponentsAuxiliaries";
+
+
+@VueComponentConfiguration({
+  name: "Badge--YDF-LoadingPlaceholder",
+  template: componentVueTemplate
+})
+export default class BadgeLoadingPlaceholder extends VueComponent {
+
+  @VueProperty({
+    type: String,
+    default: Badge.Themes.regular,
+    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, Badge.Themes)
+  })
+  protected readonly theme!: string;
+
+  @VueProperty({ type: Boolean, default: Badge.areThemesCSS_ClassesCommon })
+  protected readonly areThemesCSS_ClassesCommon!: boolean;
+
+
+  @VueProperty({
+    type: String,
+    default: Badge.GeometricVariations.regular,
+    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, Badge.GeometricVariations)
+  })
+  protected readonly geometricVariation!: string;
+
+  @VueProperty({
+    type: Array,
+    default: (): ReadonlyArray<Badge.GeometricModifiers> => [],
+    validator: (rawValue: ReadonlyArray<unknown>): boolean =>
+        rawValue.every(
+          (element: unknown): boolean => isString(element) && isElementOfEnumeration(element, Badge.GeometricModifiers)
+        )
+  })
+  protected readonly geometricModifiers!: ReadonlyArray<Badge.GeometricModifiers>;
+
+
+  protected get rootElementModifierCSS_Classes(): ReadonlyArray<string> {
+    return [
+
+      ...ComponentsAuxiliaries.addThemeCSS_ClassToArrayIfMust({
+        themeValue: this.theme,
+        allThemes: Badge.Themes,
+        areThemesCSS_ClassesCommon: this.areThemesCSS_ClassesCommon,
+        CSS_Namespace: Badge.CSS_NAMESPACE
+      }),
+
+      ...ComponentsAuxiliaries.addGeometricVariationCSS_ClassToArrayIfMust({
+        geometricVariation: this.geometricVariation,
+        allGeometricVariations: Badge.GeometricVariations,
+        CSS_Namespace: Badge.CSS_NAMESPACE
+      }),
+
+      ...ComponentsAuxiliaries.
+          generateDemandedGeometricModifiersCSS_Classes(Badge.CSS_NAMESPACE, this.geometricModifiers)
+
+    ];
+  }
+
+}

package/Source/GUI_Components/ComponentsAuxiliaries.ts

@@ -0,0 +1,124 @@
+import {
+  toUpperCamelCase,
+  toLowerCamelCase,
+  toScreamingSnakeCase
+} from "@yamato-daiwa/es-extensions";
+
+
+export default abstract class ComponentsAuxiliaries {
+
+  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 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/Controls/Buttons/Plain/Button.vue.pug

@@ -0,0 +1,72 @@
+button.Button--YDF(
+  v-if="isButtonTheTagNameOfRootElement"
+  :type="typeAttributeValueOfButtonOrInputElement"
+  :disabled="disabled"
+  :aria-label="accessibilityGuidance"
+  :aria-pressed="toggled ? 'true' : undefined"
+  :class="rootElementModifierCSS_Classes"
+  @click.prevent="() => {}"
+)
+
+  slot(name="prependedSVG_Icon")
+
+  span.Button--YDF-Label(
+    v-if="label"
+  ) {{ label }}
+
+  slot(name="appendedSVG_Icon")
+  slot(name="loneSVG_Icon")
+
+
+component.Button--YDF(
+  v-else-if="isRouterLinkTheRootElement"
+  :is="IS_NUXT ? 'NuxtLink' : 'RouterLink'"
+  :to="route"
+  :tabindex="disabled && -1"
+  :aria-label="accessibilityGuidance"
+  :aria-disabled="disabled"
+  :aria-pressed="toggled ? 'true' : undefined"
+  :class="rootElementModifierCSS_Classes"
+)
+
+  slot(name="prependedSVG_Icon")
+
+  span.Button--YDF-Label(
+    v-if="label"
+  ) {{ label }}
+
+  slot(name="appendedSVG_Icon")
+  slot(name="loneSVG_Icon")
+
+
+a.Button--YDF(
+  v-else-if="isAnchorTheTagNameOfRootElement"
+  :href="disabled ? undefined : externalURI"
+  :target="mustOpenExternalLinkInCurrentTab ? '_self' : '_blank'"
+  rel="noopener noreferrer"
+  :tabindex="disabled && -1"
+  :aria-label="accessibilityGuidance"
+  :aria-disabled="disabled"
+  :aria-pressed="toggled ? 'true' : undefined"
+  :class="rootElementModifierCSS_Classes"
+)
+
+  slot(name="prependedSVG_Icon")
+
+  span.Button--YDF-Label(
+    v-if="label"
+  ) {{ label }}
+
+  slot(name="appendedSVG_Icon")
+  slot(name="loneSVG_Icon")
+
+
+input.Button--YDF(
+  v-else-if="isInputTheTagNameOfRootElement"
+  :type="typeAttributeValueOfButtonOrInputElement"
+  :value="label"
+  :disabled="disabled"
+  :aria-pressed="toggled ? 'true' : undefined"
+  :class="rootElementModifierCSS_Classes"
+  @click.prevent="() => {}"
+)