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

package/Workbenches/Source/GUI_Components/Controls/ValidatableControlShell/ValidatableControlShell.workbench.ts

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

package/Workbenches/Source/GUI_Components/Controls/ValidatableControlShell/ValidatableControlShellTestSite.vue

@@ -0,0 +1,68 @@
+<template lang="pug">
+
+  ValidatableControlShell
+    .DummyCore Core Element Here 2
+
+</template>
+
+
+<script lang="ts">
+
+  /* ─── GUI Components ───────────────────────────────────────────────────────────────────────────────────────────── */
+  import { ValidatableControlShell } from "../../../../../Source";
+
+  /* ─── Framework ────────────────────────────────────────────────────────────────────────────────────────────────── */
+  import {
+    Component as VueComponentOptions,
+    Vue as VueComponent,
+    toNative as transformToOptionAPI_Component
+  } from "vue-facing-decorator";
+
+
+  @VueComponentOptions({
+    name: "ValidatableControlShellTestSite",
+    components: {
+      ValidatableControlShell
+    }
+  })
+  class ValidatableControlShellTestSite extends VueComponent {}
+
+  export default transformToOptionAPI_Component(ValidatableControlShellTestSite);
+
+</script>
+
+
+<style lang="stylus" scoped>
+
+  @require "../../../../../node_modules/@yamato-daiwa/frontend/Functionality.styl"
+  @require "../../../../../node_modules/@yamato-daiwa/frontend/GUI_Components.styl"
+
+
+  CrossBrowserStylesReset()
+  InitialGlobalCSS_Rules()
+
+
+  generateValidatableControlShellYDF_GUI_ComponentStyles()
+
+
+  .DummyCore
+
+    display flex
+    align-items center
+
+    width 200px
+    height 2rem
+    font-size 1rem
+
+    border-width 4px
+    border-radius 4px
+    padding 0.2rem 0.4rem
+
+    border-style dashed
+    border-color mediumblue
+    font-weight bold
+    color mediumblue
+
+    background-color: alpha(mediumblue, 30%)
+
+</style>

package/Workbenches/Source/GUI_Components/OverflowSafeSingleLineLabel/OverflowSafeSingleLineLabelComponentTestSite.vue

@@ -22,15 +22,22 @@
   import { OverflowSafeSingleLineLabel } 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: "OverflowSafeSingleLineLabelComponentTestSite",
     components: {
       OverflowSafeSingleLineLabel
     }
   })
-  export default class OverflowSafeSingleLineLabelComponentTestSite extends VueComponent {}
+  class OverflowSafeSingleLineLabelComponentTestSite extends VueComponent {}
+
+  export default transformToOptionAPI_Component(OverflowSafeSingleLineLabelComponentTestSite);
 
 </script>
 

package/Workbenches/Source/Workbenches.pug

@@ -15,6 +15,12 @@ block append Metadata
 
       tableOfContents: [
 
+        {
+          title: "Decorators",
+          URI: "@Workbenches/Decorators/Decorators.workbench",
+          progressStatus: StaticPreviewAnywherePage__YDF.PageDevelopmentProgressStatuses.implementationInProgress
+        },
+
         {
 
           heading: "GUI Components",
@@ -33,6 +39,62 @@ block append Metadata
               progressStatus: StaticPreviewAnywherePage__YDF.PageDevelopmentProgressStatuses.accepted
             }
 
+          ],
+
+          sections: [
+
+            {
+
+              heading: "Controls",
+
+              pages: [
+
+                {
+                  title: "ValidatableControlShell",
+                  URI: "@Workbenches/GUI_Components/Controls/ValidatableControlShell/ValidatableControlShell.workbench",
+                  progressStatus: StaticPreviewAnywherePage__YDF.PageDevelopmentProgressStatuses.implementationInProgress
+                }
+
+              ],
+
+              sections: [
+
+                {
+
+                  heading: "Validatables",
+
+                  pages: [
+
+                    {
+                      title: "TextBox",
+                      URI: "@Workbenches/GUI_Components/Controls/Validatable/TextBox/TextBox.workbench",
+                      progressStatus: StaticPreviewAnywherePage__YDF.PageDevelopmentProgressStatuses.implementationInProgress
+                    }
+
+                  ]
+
+                },
+
+                {
+
+                  heading: "Buttons",
+
+                  pages: [
+
+                    {
+                      title: "Plain Button",
+                      URI: "@Workbenches/GUI_Components/Controls/Buttons/Plain/Button.workbench",
+                      progressStatus: StaticPreviewAnywherePage__YDF.PageDevelopmentProgressStatuses.implementationInProgress
+                    }
+
+                  ]
+
+                }
+
+              ]
+
+            }
+
           ]
 
         }

package/eslint.config.js

@@ -23,6 +23,21 @@ module.exports = [
       /* The import from the Pug must not be counted as element */
       "vue/valid-template-root": "off"
 
+    }
+  },
+
+  {
+    files: [
+      "Source/GUI_Components/_VuePropertiesValidators/VuePropertyValidator.ts",
+      "Source/GUI_Components/Controls/Validatables/ValidatableControl.ts"
+    ],
+    rules: {
+
+      /* The merging of type/interface and namespace is completely valid TypeScript,
+       * but @typescript-eslint community does not wish to support it.
+       * https://github.com/eslint/eslint/issues/15504 */
+      "@typescript-eslint/no-redeclare": "off"
+
     }
   }
 

package/package.json

@@ -1,50 +1,42 @@
 {
-	"name": "@yamato-daiwa/frontend-vue",
-	"version": "0.1.0",
-	"description": "The adaptation of \"@yamato-daiwa/frontend\" package for Vue framework and also some additional functionality.",
-	"keywords": [
-		"frontend",
-		"vue"
-	],
-	"author": {
-		"name": "Yamato Daiwa Co., Ltd.",
-		"email": "frontend-es-info@yamato-daiwa.com"
-	},
-	"license": "MIT",
-	"homepage": "https://frontend.yamato-daiwa.com/",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/TokugawaTakeshi/yamato_daiwa-frontend.git"
-	},
-	"bugs": {
-		"url": "https://github.com/TokugawaTakeshi/yamato_daiwa-frontend/issues",
-		"email": "frontend-es-info@yamato-daiwa.com"
-	},
-	"module": "./Distributable/index.js",
-	"types": "./Distributable/index.d.ts",
-	"peerDependencies": {
-		"@yamato-daiwa/frontend": "2.0.0-beta.6",
-		"vue": "~3.5.0",
-		"vue-router": "~4.5.0"
-	},
-	"dependencies": {
-		"@yamato-daiwa/es-extensions": "1.7.2",
-		"vue-facing-decorator": "3.0.4",
-		"vue3-slide-up-down": "2.1.0"
-	},
-	"devDependencies": {
-		"@yamato-daiwa/automation": "0.5.0",
-		"@yamato-daiwa/frontend": "2.0.0-beta.6",
-		"@yamato-daiwa/style_guides": "0.6.2",
-		"rimraf": "6.0.1",
-		"typescript": "5.7.3",
-		"vue": "3.5.13",
-		"vue-router": "4.5.0"
-	},
-	"scripts": {
-		"Rebuild Distributable": "yda build --selectiveExecution Distributable --mode PRODUCTION & npm run \"Generate TypeScript Types\"",
-		"Generate TypeScript Types": "tsc --project tsconfig.declarations.json --declaration --emitDeclarationOnly --outDir Distributable",
-		"Start Workbenches": "rimraf Workbenches/Output && yda build --selectiveExecution Workbenches --mode LOCAL_DEVELOPMENT",
-		"Lint": "eslint ."
-	}
+  "name": "@yamato-daiwa/frontend-vue",
+  "version": "0.3.0-alpha.1",
+  "description": "The adaptation of \"@yamato-daiwa/frontend\" package for Vue framework and also some additional functionality.",
+  "keywords": [
+    "frontend",
+    "vue"
+  ],
+  "author": {
+    "name": "Yamato Daiwa Co., Ltd.",
+    "email": "frontend-es-info@yamato-daiwa.com"
+  },
+  "license": "MIT",
+  "homepage": "https://frontend.yamato-daiwa.com/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TokugawaTakeshi/yamato_daiwa-frontend.git"
+  },
+  "bugs": {
+    "url": "https://github.com/TokugawaTakeshi/yamato_daiwa-frontend/issues",
+    "email": "frontend-es-info@yamato-daiwa.com"
+  },
+  "module": "./Distributable/index.js",
+  "types": "./Distributable/index.d.ts",
+  "peerDependencies": {
+    "@yamato-daiwa/frontend": ">=2.0.0-beta.10",
+    "vue": "~3.5.0",
+    "vue-facing-decorator": "~3.0.0",
+    "vue-router": "~4.6.0"
+  },
+  "dependencies": {
+    "@yamato-daiwa/es-extensions": "1.8.4",
+    "@yamato-daiwa/es-extensions-browserjs": "1.8.4",
+    "vue3-slide-up-down": "2.1.0"
+  },
+  "scripts": {
+    "Rebuild Distributable": "yda build --selectiveExecution Distributable --mode PRODUCTION & npm run \"Generate TypeScript Types\"",
+    "Generate TypeScript Types": "tsc --project tsconfig.declarations.json --declaration --emitDeclarationOnly --outDir Distributable",
+    "Start Workbenches": "rimraf Workbenches/Output && yda build --selectiveExecution Workbenches --mode LOCAL_DEVELOPMENT",
+    "Lint": "eslint ."
+  }
 }

package/tsconfig.json

@@ -12,9 +12,6 @@
     "experimentalDecorators": true,
     "allowJs": true, /* Actual for Vue3; */
     "skipLibCheck": true,
-
-    "baseUrl": "./",
-    "declaration": true
   },
   "include": [
     "Project.d.ts",

package/yda.config.yaml

@@ -1,120 +1,120 @@
-projectBuilding:
+$projectBuilding:
 
-  commonSettings:
+  $commonSettings:
 
-    selectiveExecutions:
+    $selectiveExecutions:
 
       Distributable:
 
-        tasksAndSourceFilesSelection:
+        $tasksAndSourceFilesSelection:
 
-          ECMA_ScriptLogicProcessing: [ Distributable ]
+          $ECMA_ScriptLogicProcessing: [ Distributable ]
 
       Workbenches:
 
-        tasksAndSourceFilesSelection:
+        $tasksAndSourceFilesSelection:
 
-          markupProcessing: [ Workbenches ]
-          stylesProcessing: [ Workbenches ]
-          ECMA_ScriptLogicProcessing: [ Workbenches ]
+          $markupProcessing: [ Workbenches ]
+          $stylesProcessing: [ Workbenches ]
+          $ECMA_ScriptLogicProcessing: [ Workbenches ]
 
-        browserLiveReloadingSetupID: Workbenches
+        $browserLiveReloadingSetupID: Workbenches
 
 
-  # ━━━ Markup ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-  markupProcessing:
+  # ━━━ Markup Processing ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  $markupProcessing:
 
-    common:
-      buildingModeDependent:
-        LOCAL_DEVELOPMENT: { mustResolveResourceReferencesToRelativePaths: true }
+    $common:
+      $buildingModeDependent:
+        $localDevelopment: { $mustResolveResourcesPointersToRelativePaths: true }
 
-    entryPointsGroups:
+    $entryPointsGroups:
 
       Workbenches:
 
-        sourceFilesTopDirectoryRelativePath: Workbenches/Source
-        partialsRecognition:
-          excludeFilesWithPrefixes: "_"
-          excludeSubdirectoriesWithPrefixes: "_"
+        $sourceFilesTopDirectoryRelativePath: Workbenches/Source
+        $partialsRecognition:
+          $excludeFilesWithPrefixes: "_"
+          $excludeSubdirectoriesWithPrefixes: "_"
 
-        buildingModeDependent:
-          LOCAL_DEVELOPMENT:
-            outputTopDirectoryRelativePath: Workbenches/Build
+        $buildingModeDependent:
+          $localDevelopment:
+            $outputTopDirectoryRelativePath: Workbenches/Build
 
 
-  # ━━━ Styles ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-  stylesProcessing:
+  # ━━━ Styles Processing ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  $stylesProcessing:
 
-    entryPointsGroups:
+    $entryPointsGroups:
 
       Workbenches:
 
-        sourceFilesTopDirectoryRelativePath: Workbenches/Source
+        $sourceFilesTopDirectoryRelativePath: Workbenches/Source
 
-        partialsRecognition:
-          excludeFilesWithPrefixes: "_"
-          excludeSubdirectoriesWithPrefixes: "_"
+        $partialsRecognition:
+          $excludeFilesWithPrefixes: "_"
+          $excludeSubdirectoriesWithPrefixes: "_"
 
-        buildingModeDependent:
-          LOCAL_DEVELOPMENT:
-            outputTopDirectoryRelativePath: Workbenches/Build
+        $buildingModeDependent:
+          $localDevelopment:
+            $outputTopDirectoryRelativePath: Workbenches/Build
 
 
   # ━━━ ECMAScript Logic Processing ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-  ECMA_ScriptLogicProcessing:
+  $ECMA_ScriptLogicProcessing:
 
-    entryPointsGroups:
+    $entryPointsGroups:
 
       Distributable:
 
-        singleEntryPointSourceFileRelativePath: Source/index.ts
+        $singleEntryPointSourceFileRelativePath: Source/index.ts
 
-        targetRuntime:
-          type: BROWSER
+        $targetRuntime:
+          $type: BROWSER
 
-        distributing:
-          exposingOfExportsFromEntryPoints:
-            mustExpose: true
-          externalizingDependencies: [ @yamato-daiwa/frontend, vue, vue-router ]
-          typeScriptTypesDeclarations:
-            mustGenerate: true
+        $distributing:
+          $exposingOfExportsFromEntryPoints:
+            $mustExpose: true
+          $externalizingDependencies: [ @yamato-daiwa/frontend, vue, vue-facing-decorator, vue-router ]
+          $typeScriptTypesDeclarations:
+            $mustGenerate: true
 
-        buildingModeDependent:
+        $buildingModeDependent:
 
-          LOCAL_DEVELOPMENT:
-            outputTopDirectoryRelativePath: Distributable
+          $localDevelopment:
+            $outputTopDirectoryRelativePath: Distributable
 
-          PRODUCTION:
-            outputTopDirectoryRelativePath: Distributable
-            revisioning: { disable: true }
+          $production:
+            $outputTopDirectoryRelativePath: Distributable
+            $revisioning: { $disable: true }
 
 
       Workbenches:
 
-        sourceFilesTopDirectoryRelativePath: Workbenches/Source
+        $sourceFilesTopDirectoryRelativePath: Workbenches/Source
 
-        partialsRecognition:
-          excludeFilesWithPrefixes: "_"
-          excludeSubdirectoriesWithPrefixes: "_"
+        $partialsRecognition:
+          $excludeFilesWithPrefixes: "_"
+          $excludeSubdirectoriesWithPrefixes: "_"
 
-        targetRuntime:
-          type: BROWSER
+        $targetRuntime:
+          $type: BROWSER
 
-        buildingModeDependent:
-          LOCAL_DEVELOPMENT:
-            outputTopDirectoryRelativePath: Workbenches/Build
+        $buildingModeDependent:
+          $localDevelopment:
+            $outputTopDirectoryRelativePath: Workbenches/Build
 
 
   # ━━━ Browser Live Reloading ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-  browserLiveReloading:
+  $browserLiveReloading:
 
-    setups:
+    $setups:
 
       Workbenches:
 
-        localServer:
+        $localServer:
 
-          rootDirectoryRelativePath: Workbenches/Build
-          customStartingFileNameWithExtension: Workbenches.html
+          $rootDirectoryRelativePath: Workbenches/Build
+          $customStartingFileNameWithExtension: Workbenches.html
 
-        openInBrowsers: chrome
+        $openInBrowsers: chrome

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

@@ -1,43 +0,0 @@
-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/ComponentsAuxiliaries.ts

@@ -1,124 +0,0 @@
-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`
-    );
-  }
-
-}