@demos-europe/demosplan-ui 0.4.12 → 0.4.13

package/eslint.config.js

@@ -0,0 +1,104 @@
+const globals = require('globals')
+const eslintJs = require('@eslint/js')
+const pluginVue = require('eslint-plugin-vue')
+const pluginVueA11y = require('eslint-plugin-vuejs-accessibility')
+// Const stylistic = import('@stylistic/eslint-plugin')
+const tsEslint = require('typescript-eslint')
+const vueEslintParser = require('vue-eslint-parser')
+
+async function getConfig () {
+  const stylistic = await import('@stylistic/eslint-plugin')
+
+  return [
+    eslintJs.configs.recommended,
+    ...tsEslint.configs.recommended,
+    ...pluginVue.configs['flat/recommended'],
+    ...pluginVueA11y.configs['flat/recommended'],
+    {
+      ignores: [
+        "**/node_modules/**",
+        '**/.yarn/**',
+        '**/tokens/dist/**',
+        '**/dist/**',
+        '**/.storybook/**'
+      ]
+    },
+    {
+      files: ["**/*.js", "**/*.ts", "**/*.vue"],
+      languageOptions: {
+        globals: globals.browser,
+        parser: vueEslintParser,
+        parserOptions: {
+          parser: tsEslint.parser
+        }
+      },
+      plugins: {
+        '@stylistic': stylistic,
+        'typescript': tsEslint.plugin,
+        'vue': pluginVue,
+        'vuejs-accessibility': pluginVueA11y
+      },
+      rules: {
+        'capitalized-comments': ['error', 'always', {
+          'ignoreConsecutiveComments': true,
+          'ignoreInlineComments': true
+        }],
+        'generator-star-spacing': 'off',
+        'multiline-comment-style': 'error',
+        'sort-imports': ['error', { 'ignoreCase': true }],
+        '@/object-curly-spacing': ['error', 'always'],
+        '@/indent': ['error', 2],
+        'vue/html-closing-bracket-newline': ['error', {
+          'singleline': 'never',
+          'multiline': 'never'
+        }],
+        'vue/object-curly-spacing': ['error', 'always'],
+        'vue/order-in-components': ['error', {
+          'order': [
+            'el',
+            'name',
+            'parent',
+            'functional',
+            ['delimiters', 'comments'],
+            ['components', 'directives'],
+            'extends',
+            'mixins',
+            'inheritAttrs',
+            'model',
+            ['props', 'propsData'],
+            'emits',
+            'data',
+            'computed',
+            'watch',
+            'methods',
+            'LIFECYCLE_HOOKS',
+            ['template', 'render'],
+            'renderError'
+          ]
+        }],
+        'vue/block-order': ['error', {
+          'order': [
+            'docs',
+            'template',
+            'script:not([setup])',
+            'script[setup]',
+            'style'
+          ]
+        }],
+        'vue/define-macros-order': ['error', {
+          'order': ['defineProps', 'defineEmits'],
+          'defineExposeLast': true
+        }],
+        'vue/v-slot-style': ['error', {
+          'atComponent': 'longform',
+          'default': 'longform',
+          'named': 'longform'
+        }],
+        'vue/multi-word-component-names': 'warn',
+        'vuejs-accessibility/label-has-for': 'warn'
+      }
+    }
+  ]
+}
+
+module.exports = getConfig()

package/jest/shallowMountWithGlobalMocks.js

@@ -5,8 +5,10 @@
 // Use Local Vue for testing
 import { shallowMount } from '@vue/test-utils'
 
-// then you can use `app.component` here
-// Mocking global stuff
+/*
+ * Then you can use `app.component` here
+ * Mocking global stuff
+ */
 const globalMocks = {
   hasPermission: jest.fn(() => true),
   Translator: {
@@ -25,11 +27,11 @@ const globalMocks = {
  */
 const shallowMountWithGlobalMocks = (component, options) => {
   return shallowMount(component, {
-      ...options,
-      global: {
-        mocks: globalMocks,
-      }
+    ...options,
+    global: {
+      mocks: globalMocks,
     }
+  }
   )
 }
 

package/jest.config.js

@@ -4,10 +4,10 @@ const path = require('path')
 module.exports = {
   collectCoverage: false,
   collectCoverageFrom: [
-      './src/utils/*.{js}',
-      './src/mixins/*.{js}',
-      './src/lib/*.{js}',
-      './src/components/*.{vue}'
+    './src/utils/*.{js}',
+    './src/mixins/*.{js}',
+    './src/lib/*.{js}',
+    './src/components/*.{vue}'
   ],
   coverageDirectory: './coverage',
   coverageReporters: ['clover', 'json', 'lcov', ['text', { skipFull: true }]],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@demos-europe/demosplan-ui",
-  "version": "0.4.12",
+  "version": "0.4.13",
   "license": "MIT",
   "description": "Vue components, Vue directives, Design Token and Scss files to build interfaces for demosPlan.",
   "main": "./dist/demosplan-ui.umd.js",
@@ -77,17 +77,18 @@
     "@storybook/types": "^7.0.27",
     "@storybook/vue-webpack5": "7.6.17",
     "@storybook/vue3": "^7.0.27",
+    "@stylistic/eslint-plugin": "^4.2.0",
     "@types/eslint": "^9",
     "@types/jest": "^29.5.1",
     "@types/qs": "^6.9.7",
     "@types/sortablejs": "^1",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
+    "@typescript-eslint/eslint-plugin": "^8.29.0",
+    "@typescript-eslint/parser": "^8.29.0",
     "@vue/cli-plugin-typescript": "~5.0.0",
     "@vue/cli-service": "^5.0.8",
     "@vue/compat": "3.5.13",
     "@vue/compiler-sfc": "3.5.13",
-    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/eslint-config-typescript": "^14.5.0",
     "@vue/test-utils": "^2.4.6",
     "@webpack-cli/generators": "^3.0.0",
     "autoprefixer": "^10.4.14",
@@ -97,7 +98,11 @@
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-vue-jsx": "^3.7.0",
     "css-loader": "^7.0.0",
+    "eslint": "^9.23.0",
+    "eslint-plugin-vue": "^10.0.0",
+    "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "glob": "^10.3.1",
+    "globals": "^16.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
@@ -120,6 +125,7 @@
     "ts-loader": "^9.4.4",
     "typescript": "~5.7.2",
     "vue": "^3.5.13",
+    "vue-eslint-parser": "^10.1.1",
     "vue-jest": "^3.0.7",
     "vue-loader": "^17.4.2",
     "vue-style-loader": "~4.1.3",
@@ -139,7 +145,8 @@
     "build:dev": "webpack --mode=development",
     "build:prod": "webpack --mode=production --define-process-env-node-env=production",
     "test": "jest",
-    "watch": "webpack --watch"
+    "watch": "webpack --watch",
+    "lint": "eslint ."
   },
   "packageManager": "yarn@4.2.2"
 }

package/scripts/buildTokens.js

@@ -15,7 +15,7 @@ const files = glob
     .replace('tokens/src/', '')
     .replace('color/', '')
     .replace('.json', ''))
-    .filter(filePath => !filePath.startsWith('_')) // Do not render tokens only used internally
+  .filter(filePath => !filePath.startsWith('_')) // Do not render tokens only used internally
 
 // Define custom output groups for Tailwind, rather than just grouping them by file path
 const corePlugins = ['fontSize', 'boxShadow', 'breakpoints', 'rounded', 'space', 'zIndex']

package/scripts/utils/transformTokens.js

@@ -213,7 +213,7 @@ const transformDeclarationScss = (declaration, tokenPath) => {
   return declaration
 }
 
-const transformScssTokens = ({dictionary, options, file}) => {
+const transformScssTokens = ({ dictionary, options, file }) => {
   const { outputReferences, formatting } = options
 
   let { allTokens } = dictionary
@@ -243,7 +243,7 @@ const transformScssTokens = ({dictionary, options, file}) => {
     .filter(function(strVal) { return !!strVal })
     .join('\n')
 
-  return fileHeader({file, commentStyle: 'short'}) + '\n' + tokens + '\n'
+  return fileHeader({ file, commentStyle: 'short' }) + '\n' + tokens + '\n'
 }
 
 const transformTailwindTokens =  (formatterArguments, corePluginsColor) => {

package/src/components/DpAccordion/DpAccordion.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="o-accordion">
     <button
-      type="button"
       v-if="title !== ''"
-      @click="() => toggle()"
+      type="button"
       :aria-expanded="isVisible.toString()"
       :data-cy="dataCy"
       :class="fontWeight === 'bold' ? 'weight--bold' : 'weight--normal'"
-      class="btn--blank o-link--default text-left">
+      class="btn--blank o-link--default text-left"
+      @click="() => toggle()">
       <i
         class="w-2 fa"
-        :class="{'fa-caret-right': !isVisible, 'fa-caret-down': isVisible}"
+        :class="{ 'fa-caret-right': !isVisible, 'fa-caret-down': isVisible }"
         aria-hidden="true" />
       <span :class="compressed ? 'font-size-medium' : 'o-accordion--title'">{{ title }}</span>
     </button>

package/src/components/DpAnonymizeText/DpAnonymizeText.vue

@@ -20,11 +20,11 @@
       </div>
     </bubble-menu>
     <editor-content
+      ref="editorContent"
       autocomplete="off"
       autocorrect="off"
       autocapitalize="off"
       spellcheck="false"
-      ref="editorContent"
       class="editor-content"
       :editor="editor" />
   </div>
@@ -33,8 +33,8 @@
 <script>
 import {
   Anonymize,
-  PreventEditing,
   Obscure,
+  PreventEditing,
   UnAnonymize
 } from '../DpEditor/libs/customExtensions'
 import {
@@ -46,11 +46,11 @@ import {
   History,
   Italic,
   Link,
+  ListItem,
   OrderedList,
   Paragraph,
   Text,
-  Underline,
-  ListItem
+  Underline
 } from '../DpEditor/libs/tiptapExtensions'
 import {
   BubbleMenu,

package/src/components/DpBulkEditHeader/DpBulkEditHeader.stories.tsx

@@ -22,7 +22,7 @@ const meta: Meta<typeof DpBulkEditHeader> = {
         },
         setup () {
             const toggleAll = (event) => {
-                for (let element of (args as any).options) {
+                for (const element of (args as any).options) {
                     element.checked = event.target.checked
                 }
             }

package/src/components/DpButton/DpButton.vue

@@ -2,20 +2,23 @@
 <template>
   <component
     :is="element"
+    v-tooltip="iconOnly ? text : null"
     :type="isButtonElement ? type : null"
     :href="!isButtonElement ? sanitizedHref : null"
     :class="classes"
     :disabled="disabled"
     :aria-hidden="busy"
-    v-tooltip="iconOnly ? text : null"
-    @click="emit('click', $event)">
+    @blur="emit('blur', $event)"
+    @click="emit('click', $event)"
+    @focus="emit('focus', $event)"
+    @mousedown="emit('mousedown', $event)">
     <dp-icon
       v-if="icon"
       aria-hidden="true"
       :icon="icon"
       :size="iconSize" />
     <span
-      :class="{'sr-only': hideText}"
+      :class="{ 'sr-only': hideText }"
       v-text="text" />
     <dp-icon
       v-if="iconAfter"
@@ -27,10 +30,10 @@
 
 <script setup lang="ts">
 import { computed, onMounted, PropType } from 'vue'
+import { proportions as ICON_PROPORTIONS, SIZES as ICON_SIZES } from '~/components/DpIcon/util/iconConfig'
 import { IconName, IconSize } from '../../../types'
 import DpIcon from '~/components/DpIcon/DpIcon.vue'
 import { sanitizeUrl } from '@braintree/sanitize-url'
-import { proportions as ICON_PROPORTIONS, SIZES as ICON_SIZES } from '~/components/DpIcon/util/iconConfig'
 import { Tooltip } from '~/directives'
 
 type ButtonColor = 'primary' | 'secondary' | 'warning'
@@ -153,38 +156,43 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['click'])
+const emit = defineEmits([
+  'blur',
+  'click',
+  'focus',
+  'mousedown'
+])
 
 const iconOnly = computed(() => (props.icon || props.iconAfter) && props.hideText)
 
 const classes = computed(() => [
-    'inline-flex items-center leading-3 text-button select-none',
-    ...colorClasses.value,
-    ...spacingClasses.value,
-    props.busy && 'bg-busy animate-busy pointer-events-none',
-    props.disabled && 'opacity-40 pointer-events-none',
-    props.rounded ? 'rounded-full' : 'rounded-button'
+  'inline-flex items-center leading-3 text-button select-none',
+  ...colorClasses.value,
+  ...spacingClasses.value,
+  props.busy && 'bg-busy animate-busy pointer-events-none',
+  props.disabled && 'opacity-40 pointer-events-none',
+  props.rounded ? 'rounded-full' : 'rounded-button'
 ])
 
 const colorClasses = computed(() => {
-    const colors = allColorClasses[props.color]
-    const renderedColors = [colors.solidOutlineSubtle]
+  const colors = allColorClasses[props.color]
+  const renderedColors = [colors.solidOutlineSubtle]
 
-    switch (props.variant) {
-        case 'solid':
-            renderedColors.push(colors.solidOutline, colors.solid)
-            break
-        case 'outline':
-            renderedColors.push(colors.solidOutline, colors.outlineSubtle)
-            break
-        case 'subtle':
-            renderedColors.push(colors.outlineSubtle, colors.subtle)
-            break
-        default:
-            break
-    }
+  switch (props.variant) {
+  case 'solid':
+    renderedColors.push(colors.solidOutline, colors.solid)
+    break
+  case 'outline':
+    renderedColors.push(colors.solidOutline, colors.outlineSubtle)
+    break
+  case 'subtle':
+    renderedColors.push(colors.outlineSubtle, colors.subtle)
+    break
+  default:
+    break
+  }
 
-    return renderedColors
+  return renderedColors
 })
 
 // Visually compensate button padding for icons with portrait proportions
@@ -198,17 +206,17 @@ const spacingClasses = computed(() => {
   // The small and large iconOnly buttons create a scale alongside the medium iconOnly button which shares its 30px height with input fields.
   if (iconOnly.value) {
     switch (props.iconSize) {
-      case 'large':
-        padding = 'p-1.5'
-        break
-      case 'small':
-        padding = 'p-0.5'
-        break
-      case 'medium':
-        padding = 'p-[5px]'
-        break
-      default:
-        break
+    case 'large':
+      padding = 'p-1.5'
+      break
+    case 'small':
+      padding = 'p-0.5'
+      break
+    case 'medium':
+      padding = 'p-[5px]'
+      break
+    default:
+      break
     }
   }
   return [
@@ -232,7 +240,7 @@ onMounted(() => {
 const allColorClasses = {
   primary: {
     /**
-     * solidOutlineSubtle: classes that apply to all button color variants.
+     * SolidOutlineSubtle: classes that apply to all button color variants.
      *
      * Instead of hardcoding #005eb1 here, focus-visible:outline-interactive-hover/50 could be used.
      * However, for this to work, token css variables would have to be rendered within @layer base with modern rbg
@@ -245,7 +253,7 @@ const allColorClasses = {
       outline outline-4 outline-offset-0 outline-transparent
       focus-visible:outline-[#005eb1]/50 focus-visible:z-above-zero`,
     /**
-     * solidOutline: classes that apply to "solid" and "outline" button color variants.
+     * SolidOutline: classes that apply to "solid" and "outline" button color variants.
      *
      * Solid buttons have a 1px border with the same color as the bg color, to be the same overall size as outline buttons.
      * The same border is applied to outline buttons.
@@ -256,21 +264,21 @@ const allColorClasses = {
       focus:border-interactive-hover\
       focus-visible:border-interactive-hover\
       active:border-interactive-active `,
-    // outlineSubtle: classes that apply to "outline" and "subtle" button color variants.
+    // OutlineSubtle: classes that apply to "outline" and "subtle" button color variants.
     outlineSubtle: `
       bg-surface text-interactive\
       hover:bg-interactive-subtle-hover hover:text-interactive-hover\
       focus:bg-interactive-subtle-hover focus:text-interactive-hover\
       focus-visible:bg-interactive-subtle-hover focus-visible:text-interactive-hover\
       active:bg-interactive-subtle-active active:text-interactive-active `,
-    // solid: classes that only apply to "solid" button color variant.
+    // Solid: classes that only apply to "solid" button color variant.
     solid: `
       bg-interactive text-on-dark\
       hover:text-on-dark hover:no-underline hover:bg-interactive-hover\
       focus:bg-interactive-hover\
       focus-visible:bg-interactive-hover\
       active:bg-interactive-active `,
-    // subtle: classes that only apply to "subtle" button color variant.
+    // Subtle: classes that only apply to "subtle" button color variant.
     subtle: `
       border border-on-dark\
       hover:border-interactive-subtle-hover\

package/src/components/DpButtonIcon/DpButtonIcon.vue

@@ -1,10 +1,10 @@
 <template>
   <button
-    class="btn--icon"
     v-tooltip="{
       content: text,
       delay: { show: 1000, hide: 200 }
     }"
+    class="btn--icon"
     @click="$emit('click')">
     <i
       :class="`fa ${icon}`"
@@ -23,6 +23,10 @@ import { Tooltip } from '~/directives'
 export default {
   name: 'DpButtonIcon',
 
+  directives: {
+    tooltip: Tooltip
+  },
+
   props: {
     icon: {
       type: String,
@@ -33,10 +37,6 @@ export default {
       type: String,
       required: true
     }
-  },
-
-  directives: {
-    tooltip: Tooltip
   }
 }
 </script>

package/src/components/DpButtonRow/DpButtonRow.vue

@@ -34,11 +34,6 @@ export default {
     DpButton
   },
 
-  emits: [
-    'primary-action',
-    'secondary-action'
-  ],
-
   props: {
     /**
      * Specifies if the buttons should align left or right inside their container.
@@ -137,6 +132,11 @@ export default {
     }
   },
 
+  emits: [
+    'primary-action',
+    'secondary-action'
+  ],
+
   computed: {
     align () {
       return this.alignment === 'left' ? 'text-left' : 'text-right'

package/src/components/DpCheckbox/DpCheckbox.vue

@@ -13,9 +13,9 @@
       :value="valueToSend"
       :data-cy="dataCy !== '' ? dataCy : null"
       :data-dp-validate-error-fieldname="dataDpValidateErrorFieldname || label.text || null"
-      @change="$emit('change', $event.target.checked)"
       true-value="1"
-      false-value="0">
+      false-value="0"
+      @change="$emit('change', $event.target.checked)">
     <dp-label
       v-if="label.text !== ''"
       :class="prefixClass('o-form__label')"

package/src/components/DpCheckboxGroup/DpCheckboxGroup.vue

@@ -35,10 +35,6 @@ export default {
     cleanhtml: CleanHtml
   },
 
-  emits: [
-    'update'
-  ],
-
   props: {
     dataCy: {
       type: String,
@@ -68,6 +64,10 @@ export default {
     }
   },
 
+  emits: [
+    'update'
+  ],
+
   data () {
     return {
       selected: {}

package/src/components/DpColumnSelector/DpColumnSelector.vue

@@ -12,9 +12,9 @@
     <div class="space-stack-xs u-pv-0_25">
       <dp-checkbox
         v-for="([value, label]) in selectableColumns"
-        :data-cy="`columnSelector:${value}`"
         :id="`columnSelector:${value}`"
         :key="value"
+        :data-cy="`columnSelector:${value}`"
         :checked="selectedColumns.has(value)"
         :label="{
           text: label

package/src/components/DpContextualHelp/DpContextualHelp.vue

@@ -1,10 +1,10 @@
 <template>
   <dp-icon
+    v-tooltip="tooltip"
     :aria-label="ariaLabel"
     :icon="icon"
     :size="size"
-    class="inline-block"
-    v-tooltip="tooltip" />
+    class="inline-block" />
 </template>
 
 <script setup lang="ts">
@@ -15,8 +15,6 @@ import DpIcon from '~/components/DpIcon'
 import { SIZES as ICON_SIZES } from '~/components/DpIcon/util/iconConfig'
 import { Tooltip } from '~/directives'
 
-const vTooltip = Tooltip
-
 const props = defineProps({
   /**
    * The icon displayed as trigger for the tooltip.
@@ -58,6 +56,8 @@ const props = defineProps({
   }
 })
 
+const vTooltip = Tooltip
+
 const ariaLabel = de.contextualHelp
 
 /**