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

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

@@ -1,205 +0,0 @@
-/* ─── 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 YDF_ComponentsCoordinator from "../YDF_ComponentsCoordinator";
-
-
-@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 YDF_ComponentsCoordinator.defineThemes(themesNames, Badge);
-  }
-
-  public static areThemesCSS_ClassesCommon: boolean = YDF_ComponentsCoordinator.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 YDF_ComponentsCoordinator.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 YDF_ComponentsCoordinator.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 [
-
-      ...YDF_ComponentsCoordinator.addThemeCSS_ClassToArrayIfMust({
-        themeValue: this.theme,
-        allThemes: Badge.Themes,
-        areThemesCSS_ClassesCommon: this.areThemesCSS_ClassesCommon,
-        CSS_Namespace: Badge.CSS_NAMESPACE
-      }),
-
-      ...YDF_ComponentsCoordinator.addGeometricVariationCSS_ClassToArrayIfMust({
-        geometricVariation: this.geometricVariation,
-        allGeometricVariations: Badge.GeometricVariations,
-        CSS_Namespace: Badge.CSS_NAMESPACE
-      }),
-
-      ...YDF_ComponentsCoordinator.
-          generateDemandedGeometricModifiersCSS_Classes(Badge.CSS_NAMESPACE, this.geometricModifiers),
-
-      ...YDF_ComponentsCoordinator.addDecorativeVariationCSS_ClassToArrayIfMust({
-        decorativeVariation: this.decorativeVariation,
-        allDecorativeVariations: Badge.DecorativeVariations,
-        CSS_Namespace: Badge.CSS_NAMESPACE
-      }),
-
-      ...YDF_ComponentsCoordinator.
-          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

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

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

@@ -1,74 +0,0 @@
-/* ─── 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 YDF_ComponentsCoordinator from "../../YDF_ComponentsCoordinator";
-
-
-@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 [
-
-      ...YDF_ComponentsCoordinator.addThemeCSS_ClassToArrayIfMust({
-        themeValue: this.theme,
-        allThemes: Badge.Themes,
-        areThemesCSS_ClassesCommon: this.areThemesCSS_ClassesCommon,
-        CSS_Namespace: Badge.CSS_NAMESPACE
-      }),
-
-      ...YDF_ComponentsCoordinator.addGeometricVariationCSS_ClassToArrayIfMust({
-        geometricVariation: this.geometricVariation,
-        allGeometricVariations: Badge.GeometricVariations,
-        CSS_Namespace: Badge.CSS_NAMESPACE
-      }),
-
-      ...YDF_ComponentsCoordinator.
-          generateDemandedGeometricModifiersCSS_Classes(Badge.CSS_NAMESPACE, this.geometricModifiers)
-
-    ];
-  }
-
-}

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

@@ -1,70 +0,0 @@
-button.Button--YDF(
-  v-if="isButtonTheTagNameOfRootElement"
-  :type="typeAttributeValueOfButtonOrInputElement"
-  :disabled="disabled"
-  :aria-label="accessibilityGuidance"
-  :aria-pressed="toggled"
-  :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"
-  :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 ? null : externalURI"
-  :target="mustOpenLinkInNewTab ? '_self' : '_blank'"
-  :rel="relAttributeValueOfAnchorElement"
-  :tabindex="disabled && -1"
-  :aria-label="accessibilityGuidance"
-  :aria-disabled="disabled"
-  :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"
-  :class="rootElementModifierCSS_Classes"
-  @click.prevent="() => {}"
-)