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

package/Workbenches/Source/GUI_Components/Badge/BadgeBlockComponentTestSite.vue

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

package/Workbenches/Source/GUI_Components/Controls/Buttons/Plain/ButtonComponentTestSite.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
 
-Button(
-  label="Test"
-  :disabled="false"
-  @click="onButtonClicked"
-)
+  Button(
+    label="Test"
+    :disabled="false"
+    @click="onButtonClicked"
+  )
 
 </template>
 
@@ -15,22 +15,33 @@ Button(
   import { Button } 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";
+  import { Logger } from "@yamato-daiwa/es-extensions";
 
 
   @VueComponentOptions({
+    name: "ButtonComponentTestSite",
     components: {
       Button
     }
   })
-  export default class ButtonComponentTestSite extends VueComponent {
+  class ButtonComponentTestSite extends VueComponent {
 
     protected onButtonClicked(): void {
-      console.log("ok!");
+      Logger.logSuccess({
+        title: "Clicked",
+        description: "Button has been clicked"
+      });
     }
 
   }
 
+  export default transformToOptionAPI_Component(ButtonComponentTestSite);
+
 </script>
 
 

package/Workbenches/Source/GUI_Components/Controls/Validatable/TextBox/TextBoxWorkbench.vue

@@ -3,6 +3,12 @@
   TextBox(
     label="Sample"
     guidance="Please input something"
+    inputOrTextareaElementHTML_ID="BLA"
+    v-model="textBoxPayload"
+    :validityHighlightingActivationMode="TextBox.ValidityHighlightingActivationModes.onFocusOut"
+    :mustDisplayAppropriateBadgeIfInputIsRequired="true"
+    :required="textBoxPayload.validation.isInputRequired()"
+    :ref="TEXT_BOX_VUE_REFERENCE_ID"
   )
 
 </template>
@@ -11,18 +17,54 @@
 <script lang="ts">
 
   /* ─── GUI Components ───────────────────────────────────────────────────────────────────────────────────────────── */
+  /* eslint-disable-next-line max-classes-per-file -- Allow additional class for for inputted data validation. */
   import TextBox from "../../../../../../Source/GUI_Components/Controls/Validatables/TextBox/TextBox.vue";
 
   /* ─── 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";
+  import { ValidatableControl, NonReactiveVueData, AccessibleFromTemplateAsNonReactive } from "../../../../../../Source";
+  import { InputtedValueValidation, MinimalCharactersCountInputtedValueValidationRule } from "@yamato-daiwa/frontend";
+  import { isEmptyString } from "@yamato-daiwa/es-extensions";
 
 
   @VueComponentOptions({
+    name: "TextBoxWorkbench",
     components: {
       TextBox
     }
   })
-  export default class TextBoxWorkbench extends VueComponent {}
+  class TextBoxWorkbench extends VueComponent {
+
+    @NonReactiveVueData("TEXT_BOX")
+    protected readonly TEXT_BOX_VUE_REFERENCE_ID!: string;
+
+    @AccessibleFromTemplateAsNonReactive
+    protected static readonly TextBox: typeof TextBox = TextBox;
+
+    protected textBoxPayload: ValidatableControl.Payload<string, string, InputtedValueValidation> =
+        ValidatableControl.Payload.createInitialInstance({
+          initialValue: "",
+          validation: new class extends InputtedValueValidation {
+            public constructor() {
+              super({
+                omittedValueChecker: isEmptyString,
+                isInputRequired: true,
+                staticRules: [
+                  new MinimalCharactersCountInputtedValueValidationRule({ minimalCharactersCount: 3 })
+                ]
+              });
+            }
+          }(),
+          vueReferenceID: this.TEXT_BOX_VUE_REFERENCE_ID
+        });
+
+  }
+
+  export default transformToOptionAPI_Component(TextBoxWorkbench);
 
 </script>
 
@@ -39,5 +81,6 @@
 
   generateValidatableControlShellYDF_GUI_ComponentStyles()
   generateTextBoxYDF_GUI_ComponentStyles()
+  generateBadgeYDF_GUI_ComponentStyles()
 
 </style>

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

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

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",

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.2.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.10",
-		"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.7.0-alpha.4",
-		"@yamato-daiwa/frontend": "2.0.0-beta.10",
-		"@yamato-daiwa/style_guides": "0.6.9",
-		"rimraf": "6.0.1",
-		"typescript": "5.8.3",
-		"vue": "3.5.14",
-		"vue-router": "4.5.1"
-	},
-	"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

@@ -75,7 +75,7 @@ $projectBuilding:
         $distributing:
           $exposingOfExportsFromEntryPoints:
             $mustExpose: true
-          $externalizingDependencies: [ @yamato-daiwa/frontend, vue, vue-router ]
+          $externalizingDependencies: [ @yamato-daiwa/frontend, vue, vue-facing-decorator, vue-router ]
           $typeScriptTypesDeclarations:
             $mustGenerate: true
 

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/Controls/Validatables/InputtableControl.ts

@@ -1,134 +0,0 @@
-/* ─── Framework ──────────────────────────────────────────────────────────────────────────────────────────────────── */
-import {
-  ComponentBase as VueComponentConfiguration,
-  Vue as VueComponent,
-  Prop as VueProperty
-} from "vue-facing-decorator";
-
-/* ─── Utils ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
-import {
-  Logger,
-  isNonEmptyString,
-  isEitherUndefinedOrNull
-} from "@yamato-daiwa/es-extensions";
-import InvalidVuePropertiesCombinationError from
-    "../../_Errors/InvalidVuePropertiesCombination/InvalidVuePropertiesCombinationError";
-import OptionalButNotNullableVueProperty from "../../_Decorators/OptionalButNotNullableVueProperty";
-import validateVuePropertyAndLogIfInvalid from "../../_Utils/validateVuePropertyAndLogIfInvalid";
-
-
-@VueComponentConfiguration({})
-export default class InputtableControl extends VueComponent {
-
-  /* ━━━ Component Common Properties ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
-  /* ─── Textings ─────────────────────────────────────────────────────────────────────────────────────────────────── */
-  @VueProperty({
-    validator: validateVuePropertyAndLogIfInvalid({
-      checker: isNonEmptyString,
-      message: "If string specified it must be non-empty"
-    })
-  })
-  @OptionalButNotNullableVueProperty
-  protected readonly label?: string;
-
-  @VueProperty({
-    validator: validateVuePropertyAndLogIfInvalid({
-      checker: isNonEmptyString,
-      message: "If string specified it must be non-empty"
-    })
-  })
-  @OptionalButNotNullableVueProperty
-  protected readonly accessibilityGuidance?: string;
-
-  @VueProperty({
-    validator: validateVuePropertyAndLogIfInvalid({
-      checker: isNonEmptyString,
-      message: "If string specified it must be non-empty"
-    })
-  })
-  @OptionalButNotNullableVueProperty
-  protected readonly externalLabelHTML_ID?: string;
-
-  @VueProperty({
-    validator: validateVuePropertyAndLogIfInvalid({
-      checker: isNonEmptyString,
-      message: "If string specified it must be non-empty"
-    })
-  })
-  @OptionalButNotNullableVueProperty
-  protected readonly guidance?: string;
-
-
-  /* ─── Requirement ──────────────────────────────────────────────────────────────────────────────────────────────── */
-  @VueProperty({ type: Boolean, default: false })
-  @OptionalButNotNullableVueProperty
-  protected readonly required!: boolean;
-
-  @VueProperty({ type: Boolean, default: false })
-  @OptionalButNotNullableVueProperty
-  protected readonly mustDisplayAppropriateBadgeIfInputIsRequired!: boolean;
-
-  @VueProperty({ type: Boolean, default: false })
-  @OptionalButNotNullableVueProperty
-  protected readonly mustDisplayAppropriateBadgeIfInputIsOptional!: boolean;
-
-  @VueProperty({ type: Boolean, default: false })
-  @OptionalButNotNullableVueProperty
-  protected readonly mustAddInvisibleBadgeForHeightEqualizingWhenNoBadge!: boolean;
-
-
-  /* ─── State Limitations ─────────────────────────────────────────────────────────────────────────────────────────── */
-  @VueProperty({ type: Boolean, default: false })
-  @OptionalButNotNullableVueProperty
-  protected readonly disabled!: boolean;
-
-  @VueProperty({ type: Boolean, default: false })
-  @OptionalButNotNullableVueProperty
-  protected readonly readonly!: boolean;
-  // ━━━ TODO ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-  /* === State ====================================================================================================== */
-  protected invalidInputHighlightingIfAnyValidationErrorsMessages: boolean = false;
-  protected validInputHighlightingIfAnyErrorsMessages: boolean = false;
-
-
-  /* === Methods ==================================================================================================== */
-  public highlightInvalidInput(): this {
-    this.invalidInputHighlightingIfAnyValidationErrorsMessages = true;
-    return this;
-  }
-
-  public getRootElement(): Element {
-    return this.$el;
-  }
-
-  public resetStateToInitial(): void {
-    Object.assign(this.$data, this.$options.data?.({}));
-  }
-
-
-  /* === Livecycle hooks ========================================================================================== */
-  public beforeCreate(): void {
-
-    const inheritedComponentNameForLogging: string = this.$options.name ?? "(Unnamed component)";
-
-    if (
-      isEitherUndefinedOrNull(this.label) &&
-      isEitherUndefinedOrNull(this.accessibilityGuidance) &&
-      isEitherUndefinedOrNull(this.externalLabelHTML_ID)
-    ) {
-      Logger.logError({
-        errorType: InvalidVuePropertiesCombinationError.NAME,
-        title: InvalidVuePropertiesCombinationError.localization.defaultTitle,
-        description: InvalidVuePropertiesCombinationError.localization.generateMessage({
-          vueComponentName: inheritedComponentNameForLogging,
-          messageSpecificPart: "From the accessibility requirements, one of next properties must be specified:\n" +
-              "● label\n● accessibilityGuidance\n● externalLabelHTML_ID"
-
-        }),
-        occurrenceLocation: `${ inheritedComponentNameForLogging }.beforeCreate()`
-      });
-    }
-
-  }
-
-}

package/Source/GUI_Components/_Utils/validateVuePropertyAndLogIfInvalid.ts

@@ -1,34 +0,0 @@
-import { Logger } from "@yamato-daiwa/es-extensions";
-
-
-export default function validateVuePropertyAndLogIfInvalid<PreCheckedValueType>(
-  {
-    checker,
-    message
-  }: Readonly<{
-    checker: (targetVueProperty: PreCheckedValueType) => boolean;
-    message: string;
-  }>
-): (targetVueProperty: PreCheckedValueType) => boolean {
-
-  return (targetVueProperty: PreCheckedValueType): boolean => {
-
-    if (!checker(targetVueProperty)) {
-
-      Logger.logError({
-        errorType: "VuePropertyCustomValidationFailedError",
-        title: "Vue Property Custom Validation Failed",
-        description: message,
-        occurrenceLocation: "validateVuePropertyAndLogIfInvalid(compoundParameter)"
-      });
-
-      return false;
-
-    }
-
-
-    return true;
-
-  };
-
-}