@yamato-daiwa/frontend-vue 0.0.1

package/.idea/.name

@@ -0,0 +1 @@
+YDF - Vue

package/.idea/Main.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$">
+      <sourceFolder url="file://$MODULE_DIR$/Source" isTestSource="false" />
+      <excludeFolder url="file://$MODULE_DIR$/Distributable" />
+      <excludeFolder url="file://$MODULE_DIR$/Workbenches/Build" />
+    </content>
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/file.template.settings.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ExportableFileTemplateSettings">
+    <default_templates>
+      <template name="SVG Icon component.vue" file-name="${ICON_NAME}Icon${POSTFIXES}" reformat="false" live-template-enabled="false" />
+    </default_templates>
+  </component>
+</project>

package/.idea/fileTemplates/SVG Icon component.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+
+include ../../../node_modules/@yamato-daiwa/frontend/Markup/Assets/SVG_Icons/${SUBDIRECTORY_OF_YDF_SVG_ICONS}/${ICON_NAME}Icon${POSTFIXES}.pug
+
++${ICON_NAME}${POSTFIXES}--YDF_Icon
+
+</template>
+
+
+<script>
+
+  export default {
+    name: "${ICON_NAME}${POSTFIXES}--YDF_Icon"
+  };
+
+</script>

package/.idea/icon.svg

@@ -0,0 +1 @@
+<svg id="クレーン" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500"><defs><style>.cls-1{fill:url(#名称未設定グラデーション_21);}.cls-2{fill:none;}.cls-3{fill:#fff;}.cls-4{fill:#231815;}</style><linearGradient id="名称未設定グラデーション_21" y1="250" x2="500" y2="250" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2796a7"/><stop offset="0.52" stop-color="#28ceb4"/><stop offset="0.95" stop-color="#58d5c3"/></linearGradient></defs><rect class="cls-1" width="500" height="500" rx="50"/><polygon class="cls-2" points="199.36 216.34 184.37 231.33 214.35 231.33 199.36 216.34"/><polygon class="cls-2" points="199.36 162.78 184.37 177.77 214.35 177.77 199.36 162.78"/><polygon class="cls-2" points="184.37 187.54 199.36 202.53 214.35 187.54 184.37 187.54"/><polygon class="cls-2" points="184.37 133.98 199.36 148.97 214.35 133.98 184.37 133.98"/><polygon class="cls-2" points="183.39 200.37 183.39 218.5 192.45 209.43 183.39 200.37"/><polygon class="cls-2" points="199.36 109.23 184.37 124.22 214.35 124.22 199.36 109.23"/><polygon class="cls-2" points="183.39 146.81 183.39 164.94 192.45 155.88 183.39 146.81"/><polygon class="cls-2" points="183.39 93.26 183.39 111.39 192.45 102.33 183.39 93.26"/><rect class="cls-2" x="215.55" y="65.31" width="9.46" height="0.08"/><polygon class="cls-2" points="184.37 241.09 199.36 256.08 214.35 241.09 184.37 241.09"/><polygon class="cls-2" points="199.36 269.89 184.37 284.88 214.35 284.88 199.36 269.89"/><polygon class="cls-2" points="213.39 81.39 185.32 81.39 199.36 95.42 213.39 81.39"/><polygon class="cls-2" points="199.36 309.63 214.35 294.64 184.37 294.64 199.36 309.63"/><polygon class="cls-2" points="215.32 111.39 215.32 93.26 206.26 102.33 215.32 111.39"/><polygon class="cls-2" points="215.32 164.94 215.32 146.81 206.26 155.88 215.32 164.94"/><polygon class="cls-2" points="183.39 253.92 183.39 272.05 192.45 262.98 183.39 253.92"/><polygon class="cls-2" points="215.32 218.5 215.32 200.37 206.26 209.43 215.32 218.5"/><polygon class="cls-2" points="215.32 272.05 215.32 253.92 206.26 262.98 215.32 272.05"/><polygon class="cls-2" points="215.32 325.6 215.32 307.47 206.26 316.54 215.32 325.6"/><polygon class="cls-2" points="199.36 162.78 184.37 177.77 214.35 177.77 199.36 162.78"/><polygon class="cls-2" points="184.37 133.98 199.36 148.97 214.35 133.98 184.37 133.98"/><polygon class="cls-2" points="184.37 187.54 199.36 202.53 214.35 187.54 184.37 187.54"/><polygon class="cls-2" points="183.39 93.26 183.39 111.39 192.45 102.33 183.39 93.26"/><polygon class="cls-2" points="199.36 109.23 184.37 124.22 214.35 124.22 199.36 109.23"/><polygon class="cls-2" points="199.36 309.63 214.35 294.64 184.37 294.64 199.36 309.63"/><polygon class="cls-2" points="199.36 269.89 184.37 284.88 214.35 284.88 199.36 269.89"/><polygon class="cls-2" points="213.39 81.39 185.32 81.39 199.36 95.42 213.39 81.39"/><polygon class="cls-2" points="199.36 216.34 184.37 231.33 214.35 231.33 199.36 216.34"/><polygon class="cls-2" points="184.37 241.09 199.36 256.08 214.35 241.09 184.37 241.09"/><polygon class="cls-2" points="183.39 146.81 183.39 164.94 192.45 155.88 183.39 146.81"/><polygon class="cls-2" points="215.32 111.39 215.32 93.26 206.26 102.33 215.32 111.39"/><polygon class="cls-2" points="215.32 218.5 215.32 200.37 206.26 209.43 215.32 218.5"/><polygon class="cls-2" points="215.32 164.94 215.32 146.81 206.26 155.88 215.32 164.94"/><polygon class="cls-2" points="215.32 272.05 215.32 253.92 206.26 262.98 215.32 272.05"/><polygon class="cls-2" points="183.39 200.37 183.39 218.5 192.45 209.43 183.39 200.37"/><polygon class="cls-2" points="183.39 253.92 183.39 272.05 192.45 262.98 183.39 253.92"/><polygon class="cls-2" points="215.32 325.6 215.32 307.47 206.26 316.54 215.32 325.6"/><polygon class="cls-2" points="214.35 284.88 199.36 269.89 184.37 284.88 214.35 284.88"/><polygon class="cls-2" points="199.36 309.63 214.35 294.64 184.37 294.64 199.36 309.63"/><polygon class="cls-2" points="199.36 256.08 214.35 241.09 184.37 241.09 199.36 256.08"/><polygon class="cls-2" points="215.32 325.6 215.32 307.47 206.26 316.54 215.32 325.6"/><polygon class="cls-2" points="215.32 272.05 215.32 253.92 206.26 262.98 215.32 272.05"/><polygon class="cls-2" points="199.36 202.53 214.35 187.54 184.37 187.54 199.36 202.53"/><polygon class="cls-2" points="199.36 109.23 184.37 124.22 214.35 124.22 199.36 109.23"/><polygon class="cls-2" points="199.36 148.97 214.35 133.98 184.37 133.98 199.36 148.97"/><polygon class="cls-2" points="215.32 218.5 215.32 200.37 206.26 209.43 215.32 218.5"/><polygon class="cls-2" points="214.35 231.33 199.36 216.34 184.37 231.33 214.35 231.33"/><polygon class="cls-2" points="214.35 177.77 199.36 162.78 184.37 177.77 214.35 177.77"/><polygon class="cls-2" points="183.39 146.81 183.39 164.94 192.45 155.88 183.39 146.81"/><polygon class="cls-2" points="183.39 200.37 183.39 218.5 192.45 209.43 183.39 200.37"/><polygon class="cls-2" points="215.32 164.94 215.32 146.81 206.26 155.88 215.32 164.94"/><polygon class="cls-2" points="183.39 253.92 183.39 272.05 192.45 262.98 183.39 253.92"/><polygon class="cls-2" points="215.32 111.39 215.32 93.26 206.26 102.33 215.32 111.39"/><polygon class="cls-2" points="183.39 93.26 183.39 111.39 192.45 102.33 183.39 93.26"/><polygon class="cls-2" points="213.39 81.39 185.32 81.39 199.36 95.42 213.39 81.39"/><polygon class="cls-3" points="389.15 110.05 224.08 65.75 221.39 75.78 349.1 110.05 235.41 110.05 235.41 135.83 345.59 135.83 345.59 187.13 345.23 187.13 345.23 187.14 337.43 187.14 337.43 211.07 345.23 211.07 345.23 224.6 359.37 224.6 359.37 238.13 339.51 238.13 339.51 227.72 331.18 227.72 331.18 246.46 367.69 246.46 367.69 216.28 353.56 216.28 353.56 211.07 361.36 211.07 361.36 187.14 353.75 187.14 353.75 135.83 376.72 135.83 390.47 135.83 390.47 128.87 390.47 118.22 390.47 110.4 389.15 110.05"/><polygon class="cls-2" points="215.32 325.6 215.32 307.47 206.26 316.54 215.32 325.6"/><polygon class="cls-2" points="199.36 256.08 214.35 241.09 184.37 241.09 199.36 256.08"/><polygon class="cls-2" points="214.35 284.88 199.36 269.89 184.37 284.88 214.35 284.88"/><polygon class="cls-2" points="215.32 111.39 215.32 93.26 206.26 102.33 215.32 111.39"/><polygon class="cls-2" points="215.32 164.94 215.32 146.81 206.26 155.88 215.32 164.94"/><polygon class="cls-2" points="215.32 218.5 215.32 200.37 206.26 209.43 215.32 218.5"/><polygon class="cls-2" points="215.32 272.05 215.32 253.92 206.26 262.98 215.32 272.05"/><polygon class="cls-2" points="199.36 202.53 214.35 187.54 184.37 187.54 199.36 202.53"/><polygon class="cls-2" points="199.36 148.97 214.35 133.98 184.37 133.98 199.36 148.97"/><polygon class="cls-2" points="184.37 294.64 199.36 309.63 214.35 294.64 184.37 294.64"/><polygon class="cls-2" points="214.35 177.77 199.36 162.78 184.37 177.77 214.35 177.77"/><polygon class="cls-2" points="199.36 109.23 184.37 124.22 214.35 124.22 199.36 109.23"/><polygon class="cls-2" points="214.35 231.33 199.36 216.34 184.37 231.33 214.35 231.33"/><polygon class="cls-2" points="183.39 200.37 183.39 218.5 192.45 209.43 183.39 200.37"/><polygon class="cls-2" points="213.39 81.39 185.32 81.39 199.36 95.42 213.39 81.39"/><polygon class="cls-2" points="183.39 253.92 183.39 272.05 192.45 262.98 183.39 253.92"/><polygon class="cls-2" points="183.39 146.81 183.39 164.94 192.45 155.88 183.39 146.81"/><polygon class="cls-2" points="183.39 93.26 183.39 111.39 192.45 102.33 183.39 93.26"/><rect class="cls-2" x="173.28" y="81.39" width="0.35" height="251.39"/><polygon class="cls-2" points="190.02 332.78 208.69 332.78 199.36 323.44 190.02 332.78"/><polygon class="cls-2" points="192.45 316.54 183.39 307.47 192.45 316.54 192.45 316.54"/><polygon class="cls-2" points="183.39 307.47 183.39 325.6 192.45 316.54 183.39 307.47"/><path class="cls-3" d="M199.36,323.44l9.33,9.34H225V65.6h-51.3V332.78H190Zm-15-28.8h30l-15,15Zm30-160.66-15,15-15-15Zm-30-9.76,15-15,15,15Zm30,53.55h-30l15-15Zm0,9.77-15,15-15-15Zm0,43.79h-30l15-15Zm0,9.76-15,15-15-15Zm0,43.79h-30l15-15Zm1,40.72-9.07-9.06,9.07-9.07Zm0-53.55L206.26,263l9.07-9.06Zm0-53.55-9.07-9.07,9.07-9.06Zm0-53.56-9.07-9.06,9.07-9.07Zm0-53.55-9.07-9.06,9.07-9.07Zm-1.94-30-14,14-14-14Zm-30,11.87,9.06,9.07-9.06,9.06Zm0,53.55,9.06,9.07-9.06,9.06Zm0,53.56,9.06,9.06-9.06,9.07Zm0,53.55,9.06,9.06-9.06,9.07Zm0,71.68V307.47l9.06,9.07h0l-9.06,9.06Z"/><rect class="cls-4" x="181.51" y="321.07" width="12.82" transform="translate(-171.99 226.93) rotate(-45)"/><polygon class="cls-3" points="225.02 332.78 208.69 332.78 190.02 332.78 173.72 332.78 173.62 332.78 173.28 332.78 152.95 332.78 152.95 348.67 244.89 348.67 244.89 332.78 225.02 332.78"/><polygon class="cls-3" points="180.07 74.12 174.12 65.61 110.09 110.39 109.78 110.61 109.73 110.64 109.53 110.79 109.53 110.92 109.53 111 109.53 135.83 110.09 135.83 162.88 135.83 162.88 110.05 128.7 110.05 180.07 74.12"/><path class="cls-3" d="M151.82,371.72a4.92,4.92,0,0,1-1.1-2.94,4.59,4.59,0,0,1,4.51-4.14,4.69,4.69,0,0,1,3.59,2.12l22,32,22-32a4.69,4.69,0,0,1,3.59-2.12,4.52,4.52,0,0,1,4.51,4.14,4.87,4.87,0,0,1-1.11,2.94l-24.84,34.13v32c0,2-1.75,3.49-4.14,3.49s-4.14-1.47-4.14-3.49v-32Z"/><path class="cls-3" d="M244.56,365.74c10.49,0,18.77,2.12,25.39,6.54,9.75,6.43,15,17.2,15,30.63,0,23.73-15,37.35-41,37.35H231.68c-6.44,0-9.75-3.31-9.75-9.94V375.68c0-6.62,3.31-9.94,9.75-9.94ZM230.3,430.23a2.33,2.33,0,0,0,2.58,2.58h10.48c20.43,0,32.48-11,32.48-29.81,0-19.22-11.32-29.8-31.93-29.8h-11a2.25,2.25,0,0,0-2.58,2.57Z"/><path class="cls-3" d="M308.13,437.87c0,2-1.75,3.49-4.14,3.49s-4.23-1.47-4.23-3.49v-63.2c0-5.89,2.94-8.93,8.92-8.93h36.89a3.71,3.71,0,0,1,0,7.36H310.25a1.88,1.88,0,0,0-2.12,2V398.4H340.6a3.26,3.26,0,0,1,3.13,3.5c0,2.11-1.29,3.59-3.13,3.59H308.13Z"/></svg>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,12 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="ImplicitTypeConversion" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="BITS" value="1720" />
+      <option name="FLAG_EXPLICIT_CONVERSION" value="true" />
+      <option name="IGNORE_NODESET_TO_BOOLEAN_VIA_STRING" value="true" />
+    </inspection_tool>
+    <inspection_tool class="UsePropertyAccessSyntax" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
+  </profile>
+</component>

package/.idea/misc.xml

@@ -0,0 +1,5 @@
+<project version="4">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_16">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/Main.iml" filepath="$PROJECT_DIR$/.idea/Main.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/runConfigurations/Generate_TypeScript_Types.xml

@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Generate TypeScript Types" type="js.build_tools.npm" nameIsGenerated="true">
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="Generate TypeScript Types" />
+    </scripts>
+    <node-interpreter value="project" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

package/.idea/runConfigurations/Lint.xml

@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Lint" type="js.build_tools.npm" nameIsGenerated="true">
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="Lint" />
+    </scripts>
+    <node-interpreter value="project" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

package/.idea/runConfigurations/Rebuild_Distributable.xml

@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Rebuild Distributable" type="js.build_tools.npm">
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="Rebuild Distributable" />
+    </scripts>
+    <node-interpreter value="project" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

package/.idea/runConfigurations/Start_Workbenches.xml

@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Start Workbenches" type="js.build_tools.npm" nameIsGenerated="true">
+    <package-json value="$PROJECT_DIR$/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="Start Workbenches" />
+    </scripts>
+    <node-interpreter value="project" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/../../.." vcs="Git" />
+  </component>
+</project>

package/.pug-lintrc

@@ -0,0 +1,4 @@
+{
+  "extends": "./node_modules/@yamato-daiwa/style_guides/Markup.js",
+  "excludeFiles": [ "Source/**" ]
+}

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023-present, Yamato Daiwa Co., Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/Project.d.ts

@@ -0,0 +1,10 @@
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{ [key: string]: unknown; }, { [key: string]: unknown; }, unknown>;
+  export default component;
+}
+
+declare module "*.pug" {
+  const template: string;
+  export default template;
+}

package/README.md

@@ -0,0 +1,21 @@
+# Yamato Daiwa Frontend — Vue
+
+The adaptation of [Yamato Daiwa Frontend](https://www.npmjs.com/package/@yamato-daiwa/frontend) toolkit for the frontend
+  development to [Vue framework](https://vuejs.org/index.html).
+
+This adaptation package provides only Vue-specific functionality.
+The [core package](https://www.npmjs.com/package/@yamato-daiwa/frontend) is still required as the peer dependency to 
+  get the styles.
+
+
+## Installation
+
+```bash
+npm i @yamato-daiwa/frontend-vue @yamato-daiwa/frontend@2.0.0-beta.6
+```
+
+
+## Documentation
+### GUI Components
+
++ [AdmonitionBlock](https://frontend.yamato-daiwa.com/AdaptationsToFrameworks/Vue/GUI_Components/Children/AdmonitionBlock/AdmonitionBlock-Vue.english.html)

package/Source/Functions/Routing/extractVueRouteQueryParameterAsArray.ts

@@ -0,0 +1,65 @@
+import type { _RouteLocationBase as VueRouterLocation, LocationQueryValue as VueRouterLocationQueryValue } from "vue-router";
+import {
+  isString,
+  isUndefined,
+  isNotUndefined,
+  isEitherUndefinedOrNull
+} from "@yamato-daiwa/es-extensions";
+
+
+export default function extractVueRouteQueryParameterValueAsArrayOfStrings(
+  {
+    targetRoute,
+    targetQueryParameterKey,
+    arrayElementAdditionalValidator
+  }: Readonly<{
+    targetRoute: VueRouterLocation;
+    targetQueryParameterKey: string;
+    arrayElementAdditionalValidator?: (rawValue: string) => boolean;
+  }>
+): Array<string> {
+
+  const queryParameterPotentialValue: VueRouterLocationQueryValue | Array<VueRouterLocationQueryValue> =
+      targetRoute.query[targetQueryParameterKey];
+
+  if (isEitherUndefinedOrNull(queryParameterPotentialValue)) {
+    return [];
+  }
+
+
+  if (isString(queryParameterPotentialValue)) {
+
+    if (isNotUndefined(arrayElementAdditionalValidator)) {
+      return arrayElementAdditionalValidator(queryParameterPotentialValue) ? [ queryParameterPotentialValue ] : [];
+    }
+
+
+    return [ queryParameterPotentialValue ];
+
+  }
+
+
+  const queryParameterAccumulatingArrayedValue: Array<string> = [];
+
+  for (const oneElementOfArrayedValue of queryParameterPotentialValue) {
+
+    if (!isString(oneElementOfArrayedValue)) {
+      continue;
+    }
+
+
+    if (isUndefined(arrayElementAdditionalValidator)) {
+      queryParameterAccumulatingArrayedValue.push(oneElementOfArrayedValue);
+      continue;
+    }
+
+
+    if (arrayElementAdditionalValidator(oneElementOfArrayedValue)) {
+      queryParameterAccumulatingArrayedValue.push(oneElementOfArrayedValue);
+    }
+
+  }
+
+  return queryParameterAccumulatingArrayedValue;
+
+}

package/Source/Functions/getElementByVueReference.ts

@@ -0,0 +1,30 @@
+import type { ComponentPublicInstance } from "vue";
+import { Logger, DOM_ElementRetrievingFailedError, isUndefined } from "@yamato-daiwa/es-extensions";
+
+
+export default function getElementByVueReference(
+  vueReferenceID: string,
+  parentVueComponent: ComponentPublicInstance
+): Element | null {
+
+  const referenceContent: unknown = parentVueComponent.$refs[vueReferenceID];
+
+  if (isUndefined(referenceContent)) {
+    return null;
+  }
+
+
+  if (!(referenceContent instanceof Element)) {
+    Logger.throwErrorAndLog({
+      errorInstance: new DOM_ElementRetrievingFailedError({
+        customMessage: `The Vue reference with id "${ vueReferenceID }" in not the instance of native Element.`
+      }),
+      occurrenceLocation: "getElementByVueReference(vueReferenceID, parentVueComponent)",
+      title: DOM_ElementRetrievingFailedError.localization.defaultTitle
+    });
+  }
+
+
+  return referenceContent;
+
+}

package/Source/GUI_Components/AdmonitionBlock/AdmonitionBlock.vue.pug

@@ -0,0 +1,43 @@
+VerticallySlidingAlwaysMountedContainer.AdmonitionBlock--YDF(
+  v-model="isDisplaying"
+  role="alert"
+  :class="rootElementModifierCSS_Classes"
+)
+
+  slot(
+    v-if="$slots.CustomSVG_Icon"
+    name="CustomSVG_Icon"
+  )
+
+  component.AdmonitionBlock--YDF-SVG_Icon(
+    v-else-if="hasDefaultSVG_Icon"
+    :is="defaultSVG_IconComponentName"
+  )
+
+  .AdmonitionBlock--YDF-Title(
+    v-if="title"
+    id=TITLE_HTML_ID
+  ) {{ title }}
+
+  .AdmonitionBlock--YDF-MainContent(
+    :aria-labelledby="title ? TITLE_HTML_ID : null"
+  )
+
+    slot
+
+    template(
+      v-if="$slots.ActionBarContent"
+    )
+
+      .AdmonitionBlock--YDF-ActionBar
+
+        slot(
+          name="ActionBarContent"
+        )
+
+  button.AdmonitionBlock--YDF-DismissingButton(
+    v-if="dismissible"
+    type="button"
+    :aria-label="localization.dismissingButton.accessibilityGuidance"
+    @click="onClickDismissingButton"
+  ): MultiplicationSignIcon__Boxed__Filled.AdmonitionBlock--YDF-DismissingButton-Icon

package/Source/GUI_Components/AdmonitionBlock/AdmonitionBlock.vue.ts

@@ -0,0 +1,230 @@
+/* ─── Assets ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
+import componentVueTemplate from "./AdmonitionBlock.vue.pug";
+import PencilIcon__Circled__Filled from "../../SVG_Icons/Pencil/PencilIcon__Circled__Filled.vue";
+import ExclamationMarkIcon__Circled__Filled from "./../../SVG_Icons/ExclamationMark/ExclamationMarkIcon__Circled__Filled.vue";
+import ExclamationMarkIcon__Triangled__Filled from "./../../SVG_Icons/ExclamationMark/ExclamationMarkIcon__Triangled__Filled.vue";
+import CheckmarkIcon__Circled__Filled from "../../SVG_Icons/Checkmark/CheckmarkIcon__Circled__Filled.vue";
+import InfoSignIcon__Circled__Filled from "../../SVG_Icons/InfoSign/InfoSignIcon__Circled__Filled.vue";
+import QuestionMarkIcon__Circled__Filled from "../../SVG_Icons/QuestionMark/QuestionMarkIcon__Circled__Filled.vue";
+import MultiplicationSignIcon__Boxed__Filled from
+    "../../SVG_Icons/MultiplicationSign/MultiplicationSignIcon__Boxed__Filled.vue";
+import type { AdmonitionBlockLocalization } from "@yamato-daiwa/frontend";
+import { admonitionBlockYDF_ComponentLocalization__english } from "@yamato-daiwa/frontend";
+
+/* ─── Related GUI_Components ─────────────────────────────────────────────────────────────────────────────────────── */
+import { Vue3SlideUpDown as VerticallySlidingAlwaysMountedContainer } from "vue3-slide-up-down";
+
+/* ─── Framework ──────────────────────────────────────────────────────────────────────────────────────────────────── */
+import {
+  ComponentBase as VueComponentConfiguration,
+  Vue as VueComponent,
+  Prop as VueProperty
+} from "vue-facing-decorator";
+
+/* ─── Utils ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
+import { isStringOfLength, isElementOfEnumeration } from "@yamato-daiwa/es-extensions";
+import ComponentsAuxiliaries from "../ComponentsAuxiliaries";
+
+
+@VueComponentConfiguration({
+  name: AdmonitionBlock.CSS_NAMESPACE,
+  template: componentVueTemplate,
+  components: {
+    VerticallySlidingAlwaysMountedContainer,
+    PencilIcon__Circled__Filled,
+    ExclamationMarkIcon__Circled__Filled,
+    ExclamationMarkIcon__Triangled__Filled,
+    CheckmarkIcon__Circled__Filled,
+    InfoSignIcon__Circled__Filled,
+    QuestionMarkIcon__Circled__Filled,
+    MultiplicationSignIcon__Boxed__Filled
+  }
+})
+class AdmonitionBlock extends VueComponent {
+
+  public static CSS_NAMESPACE: string = "AdmonitionBlock--YDF";
+
+
+  @VueProperty({
+    type: String,
+    required: false,
+    validator: (rawValue: unknown): boolean => isStringOfLength(rawValue, { minimalCharactersCount: 1 })
+  })
+  protected readonly title!: string;
+
+
+  /* ━━━ Dismissing ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  @VueProperty({ type: Boolean, default: false })
+  protected readonly dismissible!: boolean;
+
+  protected isDisplaying: boolean = true;
+
+  protected onClickDismissingButton(): void {
+    this.isDisplaying = false;
+  }
+
+
+  /* ━━━ Theming ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  public static readonly Themes: AdmonitionBlock.Themes = { regular: "REGULAR" };
+
+  @VueProperty({
+    type: String,
+    default: AdmonitionBlock.Themes.regular,
+    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, AdmonitionBlock.Themes)
+  })
+  protected readonly theme!: string;
+
+  public static defineThemes(themesNames: ReadonlyArray<string>): typeof AdmonitionBlock {
+    return ComponentsAuxiliaries.defineThemes(themesNames, AdmonitionBlock);
+  }
+
+  protected static areThemesCSS_ClassesCommon: boolean = ComponentsAuxiliaries.areThemesCSS_ClassesCommon;
+
+  public static considerThemesAsCommon(): void {
+    AdmonitionBlock.areThemesCSS_ClassesCommon = true;
+  }
+
+  @VueProperty({ type: Boolean, default: AdmonitionBlock.areThemesCSS_ClassesCommon })
+  protected readonly areThemesCSS_ClassesCommon!: boolean;
+
+
+  /* ─── Geometry ─────────────────────────────────────────────────────────────────────────────────────────────────── */
+  public static readonly GeometricVariations: AdmonitionBlock.GeometricVariations = {
+    regular: "REGULAR",
+    stickyNoteLike: "STICKY_NOTE_LIKE"
+  };
+
+  @VueProperty({
+    type: String,
+    default: AdmonitionBlock.GeometricVariations.regular,
+    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, AdmonitionBlock.GeometricVariations)
+  })
+  protected readonly geometricVariation!: string;
+
+  public static defineGeometricVariations(geometricVariationsNames: ReadonlyArray<string>): typeof AdmonitionBlock {
+    return ComponentsAuxiliaries.defineGeometricVariations(geometricVariationsNames, AdmonitionBlock);
+  }
+
+
+  /* ─── Decoration ───────────────────────────────────────────────────────────────────────────────────────────────── */
+  public static readonly DecorativeVariations: AdmonitionBlock.DecorativeVariations = {
+    notice: "NOTICE",
+    error: "ERROR",
+    warning: "WARNING",
+    success: "SUCCESS",
+    guidance: "GUIDANCE",
+    question: "QUESTION"
+  };
+
+  @VueProperty({
+    type: String,
+    required: true,
+    validator: (rawValue: string): boolean => isElementOfEnumeration(rawValue, AdmonitionBlock.DecorativeVariations)
+  })
+  protected readonly decorativeVariation!: string;
+
+  public static defineDecorativeVariations(decorativeVariationsNames: ReadonlyArray<string>): typeof AdmonitionBlock {
+    return ComponentsAuxiliaries.defineDecorativeVariations(decorativeVariationsNames, AdmonitionBlock);
+  }
+
+
+  /* ━━━ SVG Icon ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  @VueProperty({ type: Boolean, default: false })
+  protected readonly hasDefaultSVG_Icon!: boolean;
+
+  protected get defaultSVG_IconComponentName(): string | null {
+    switch (this.decorativeVariation) {
+      case AdmonitionBlock.DecorativeVariations.notice: return "PencilIcon__Circled__Filled";
+      case AdmonitionBlock.DecorativeVariations.error: return "ExclamationMarkIcon__Circled__Filled";
+      case AdmonitionBlock.DecorativeVariations.warning: return "ExclamationMarkIcon__Triangled__Filled";
+      case AdmonitionBlock.DecorativeVariations.success: return "CheckmarkIcon__Circled__Filled";
+      case AdmonitionBlock.DecorativeVariations.guidance: return "InfoSignIcon__Circled__Filled";
+      case AdmonitionBlock.DecorativeVariations.question: return "QuestionMarkIcon__Circled__Filled";
+      default: return null;
+    }
+  }
+
+
+  /* ━━━ CSS Classes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  protected get rootElementModifierCSS_Classes(): Array<string> {
+    return [
+
+      ...ComponentsAuxiliaries.addThemeCSS_ClassToArrayIfMust({
+        themeValue: this.theme,
+        allThemes: AdmonitionBlock.Themes,
+        areThemesCSS_ClassesCommon: this.areThemesCSS_ClassesCommon,
+        CSS_Namespace: AdmonitionBlock.CSS_NAMESPACE
+      }),
+
+      ...ComponentsAuxiliaries.addGeometricVariationCSS_ClassToArrayIfMust({
+        geometricVariation: this.geometricVariation,
+        allGeometricVariations: AdmonitionBlock.GeometricVariations,
+        CSS_Namespace: AdmonitionBlock.CSS_NAMESPACE
+      }),
+
+      ...ComponentsAuxiliaries.addDecorativeVariationCSS_ClassToArrayIfMust({
+        decorativeVariation: this.decorativeVariation,
+        allDecorativeVariations: AdmonitionBlock.DecorativeVariations,
+        CSS_Namespace: AdmonitionBlock.CSS_NAMESPACE
+      })
+
+    ];
+  }
+
+
+  /* ━━━ Localization ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  public static localization: AdmonitionBlockLocalization = admonitionBlockYDF_ComponentLocalization__english;
+
+
+  /* ━━━ ID Generating ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  /* ─── Instance ID ──────────────────────────────────────────────────────────────────────────────────────────────── */
+  protected readonly INSTANCE_ID: string = AdmonitionBlock.generateInstanceID();
+  protected static counterForInstanceID_Generating: number = 0;
+
+  public static generateInstanceID(): string {
+    AdmonitionBlock.counterForInstanceID_Generating++;
+    return `ADMONITION_BLOCK--YDF-${ AdmonitionBlock.counterForInstanceID_Generating }`;
+  }
+
+
+  /* ─── Title HTML ID ────────────────────────────────────────────────────────────────────────────────────────────── */
+  protected TITLE_HTML_ID: string = `${ this.INSTANCE_ID }-TITLE`;
+
+
+  /* ━━━ Non-Reactive Fields ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
+  protected localization!: AdmonitionBlockLocalization;
+
+  public created(): void {
+    this.localization = AdmonitionBlock.localization;
+  }
+
+}
+
+
+namespace AdmonitionBlock {
+
+  export type Themes = {
+    readonly regular: "REGULAR";
+    [themeName: string]: string;
+  };
+
+  export type GeometricVariations = {
+    readonly regular: "REGULAR";
+    readonly stickyNoteLike: "STICKY_NOTE_LIKE";
+    [variationName: string]: string;
+  };
+
+  export type DecorativeVariations = {
+    readonly notice: "NOTICE";
+    readonly error: "ERROR";
+    readonly warning: "WARNING";
+    readonly success: "SUCCESS";
+    readonly guidance: "GUIDANCE";
+    readonly question: "QUESTION";
+    [variationName: string]: string;
+  };
+
+}
+
+
+export default AdmonitionBlock;

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

@@ -0,0 +1,12 @@
+component.Badge--YDF(
+  :is="rootElementTag"
+  :class="rootElementModifierCSS_Classes"
+)
+
+  slot(name="SVG_Icon")
+
+  span.Badge--YDF-KeyLabel(
+    v-if="keyLabel"
+  ) {{ keyLabel }}
+
+  span.Badge--YDF-ValueLabel {{ valueLabel }}