Remediate TypeScript executions

.eslintrc.js

@@ -1,34 +1,48 @@
-module.exports = {
+const eslintConfig = {
+ root: true,
  plugins: ['eslint-plugin-tsdoc', 'simple-import-sort'],
  extends: [
  '@nuxtjs/eslint-config-typescript',
  'prettier',
  'plugin:prettier/recommended',
  ],
  rules: {
- 'vue/max-attributes-per-line': 'off',
+ semi: 0,
+ '@typescript-eslint/semi': 0,
+ 'vue/max-attributes-per-line': 0,
  'vue/html-self-closing': [
- 'error',
+ 2,
  {
  html: {
  void: 'always',
  },
  },
  ],
  'prettier/prettier': [
- 'error',
+ 2,
  {
  semi: false,
  singleQuote: true,
  },
  ],
- 'tsdoc/syntax': 'error',
- 'simple-import-sort/imports': 'error',
+ 'tsdoc/syntax': 2,
+ 'simple-import-sort/imports': 2,
  'no-restricted-imports': [
- 'error',
+ 2,
  {
  patterns: ['./', '../'],
  },
  ],
+ 'no-mixed-operators': [
+ 2,
+ {
+ groups: [
+ ['||', '&&'],
+ ['?:', '??'],
+ ],
+ },
+ ],
  },
 }
+
+module.exports = eslintConfig

.github/workflows/audit-staging.yml

@@ -53,7 +53,7 @@ jobs:
  } ] | sort_by(.metrics) | .[] | [.metrics, .score, .url] ) | @csv' \
  | csv2md | tee "${LH_SUMMARY_FILE}"
 
- - uses: actions/github-script@v5.0.0
+ - uses: actions/github-script@v5.1.0
  with:
  github-token: ${{ secrets.GITHUB_TOKEN }}
  script: |

.stylelintignore

@@ -1 +1,3 @@
-vendor/
+node_modules/
+.nuxt/
+

assets/global.scss

@@ -1,6 +1,11 @@
+@use "sass:math" as math;
+@import "./variables.scss";
+
 :root {
  box-sizing: border-box;
- font-size: 62.5%;
+ @mixin font-size {
+ $size: 62.5%;
+ }
 }
 
 body {

assets/monitoringItemsTableCommon.scss

@@ -1,9 +1,9 @@
+@import "global.scss";
+
 $default-bdw: 3px;
 $default-boxdiff: 35px;
 
-// .container > .box > (.group > .box > ...) .pillar > .content
-
-.container {
+.container { /* .container > .box > (.group > .box > ...) .pillar > .content */
  width: 100%;
  box-sizing: border-box;
  color: $green-1;
@@ -12,7 +12,8 @@ $default-boxdiff: 35px;
  * {
  box-sizing: border-box;
  }
- // override default styles
+
+ /* override default styles */
  padding-left: 0 !important;
 
  ul {
@@ -38,7 +39,9 @@ $default-boxdiff: 35px;
  > span {
  display: block;
 
- @include font-size(14);
+ @mixin font-size {
+ $size: 14;
+ }
 
  &:first-child {
  text-align: left;
@@ -52,11 +55,15 @@ $default-boxdiff: 35px;
  }
 
  strong {
- @include font-size(16);
+ @include font-size {
+ $size: 16;
+ }
  }
 
  span.unit {
- @include font-size(14);
+ @include font-size {
+ $size: 14;
+ }
  }
 }
 
@@ -68,96 +75,109 @@ $default-boxdiff: 35px;
  border-top: $default-bdw solid $green-1;
  border-left: $default-bdw solid $green-1;
  position: relative;
- padding-left: $default-boxdiff - $default-bdw * 2;
+ padding-left: - $default-bdw * 2 + $default-boxdiff;
 
  &::after {
- content: '';
+ content: "";
  display: block;
  position: absolute;
  left: -1px;
  bottom: 0;
- width: $default-boxdiff - $default-bdw - 2;
+ width: - $default-bdw * 2 + $default-boxdiff;
  border-bottom: $default-bdw solid $green-1;
  }
 
  > .content {
- margin-left: -($default-boxdiff - $default-bdw * 2);
- width: calc(100% + #{($default-boxdiff - $default-bdw * 2)});
+ $margin-left: calc($default-bdw * 2 - $default-boxdiff);
+
+ width: 100% - $margin-left;
  border-top: none;
  border-left: none;
  border-bottom: none;
  }
  }
 }
 
-@function px2vw($px, $vw: 0) {
- @if $vw > 0 {
- @return ceil($px / $vw * 100000vw) / 1000;
- } @else {
- @return $px * 1px;
+@mixin px2vw {
+ {
+ @if $vw > 0 {
+ $shft-px: 100000 * $px;
+ @return div(div($shft-px, $vw) + $shft-px % $vw != 0, 1000);
+ } @else {
+ @return #{$px}px;
+ }
  }
 }
 
 @mixin override($vw, $bdw, $fz, $boxdiff) {
  .group {
- padding-left: px2vw($bdw, $vw) !important;
- border-top: px2vw($bdw, $vw) solid $green-1;
- border-left: px2vw($bdw, $vw) solid $green-1;
+ $padding-left: px2vw($bdw, $vw) !important;
+
+ border-top: $padding-left solid $green-1;
+ border-left: $padding-left solid $green-1;
  }
 
  .content {
  padding: px2vw(5, $vw) px2vw(10, $vw);
  border: px2vw($bdw, $vw) solid $green-1;
 
  > span {
- @include font-size($fz);
+ @include font-size {
+ $size: $fz;
+ }
 
  &:first-child {
  margin-top: px2vw(1, $vw);
  }
  }
 
  strong {
- @include font-size($fz + 2);
+ @include font-size {
+ $size: $fz + 2;
+ }
  }
 
  span.unit {
- @include font-size($fz);
+ @include font-size {
+ $size: $fz;
+ }
  }
  }
 
  .box {
  margin-top: px2vw($bdw, $vw);
 
  &.parent {
- border-top: px2vw($bdw, $vw) solid $green-1;
- border-left: px2vw($bdw, $vw) solid $green-1;
- padding-left: px2vw($boxdiff, $vw) - px2vw($bdw, $vw) * 2;
+ $border-top: px2vw($bdw, $vw) solid $green-1;
+
+ border-left: $border-top solid $green-1;
+
+ $padding-left: px2vw($boxdiff - $bdw * 2, $vw);
 
  &::after {
  width: px2vw($boxdiff - $bdw, $vw);
  border-bottom: px2vw($bdw, $vw) solid $green-1;
  }
 
  > .content {
- margin-left: -(px2vw($boxdiff, $vw) - px2vw($bdw, $vw) * 2);
- width: calc(100% + #{(px2vw($boxdiff, $vw) - px2vw($bdw, $vw) * 2)});
+ margin-left: -$padding-left;
+ width: 100% - $padding-left;
  }
  }
  }
 }
 
-// Vuetify Breakpoints: Large (1264)
+/* Vuetify Breakpoints: Large (1264) */
 @include lessThan(1263) {
  @include override(1263, 3, 14, 35);
 }
 
-// Vuetify Breakpoints: Small (960)
+/* Vuetify Breakpoints: Small (960) */
 @include lessThan(959) {
  @include override(960, 3, 14, 35);
 }
 
-// Vuetify Breakpoints: Extra Small (600)
+/* Vuetify Breakpoints: Extra Small (600) */
 @include lessThan(600) {
  @include override(600, 3, 14, 35);
 }