fds-vue-core 6.2.2 → 6.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fds-vue-core",
-  "version": "6.2.2",
+  "version": "6.2.4",
   "description": "FDS Vue Core Component Library",
   "type": "module",
   "bin": {
@@ -51,29 +51,6 @@
   "engines": {
     "node": "^20.19.0 || >=22.12.0"
   },
-  "scripts": {
-    "serve": "vite",
-    "build": "vite build && npm run build:types && cp ./src/tokens.css ./dist/tokens.css && cp ./src/slot-styles.css ./dist/slot-styles.css && cp ./src/apply.css ./dist/apply.css && cp ./src/fonts.css ./dist/fonts.css && cp -r ./public/assets ./dist/assets && mkdir -p ./dist/assets/img/logos && cp -r ./src/assets/img/logos/* ./dist/assets/img/logos/",
-    "build:types": "vue-tsc --project tsconfig.build.json",
-    "preview": "vite preview",
-    "lint": "eslint . --fix",
-    "lint:ts": "vue-tsc --noEmit --project tsconfig.app.json && vue-tsc --noEmit --project tsconfig.node.json",
-    "lint:all": "pnpm lint && pnpm lint:ts",
-    "format": "prettier --write src/",
-    "prepublishOnly": "npm run build",
-    "storybook": "STORYBOOK=true storybook dev -p 6006",
-    "build-storybook": "STORYBOOK=true storybook build",
-    "sync:peers": "node scripts/sync-peers-from-dev.mjs",
-    "postinstall": "test -f scripts/sync-peers-from-dev.mjs && node scripts/sync-peers-from-dev.mjs || true",
-    "yalc:publish": "npm run build && yalc publish",
-    "yalc:push": "npm run build && yalc push",
-    "serve:playground": "pnpm --dir playground-consumer dev",
-    "create:release": "bash ./scripts/release.sh",
-    "commit": "git-cz",
-    "commit:vuln": "node scripts/vuln-commit.mjs",
-    "vuln-commit": "node scripts/vuln-commit.mjs",
-    "cz:config": "node -e \"console.log(require('./scripts/cz/.cz-config.cjs'))\""
-  },
   "config": {
     "commitizen": {
       "path": "./scripts/cz/cz-adapter.cjs"
@@ -83,41 +60,30 @@
     "vue": "^3.5.25"
   },
   "dependencies": {
-    "axios": "1.15.0",
-    "date-fns": "^4.1.0",
-    "imask": "^7.6.1",
-    "tailwindcss": "^4.1.18"
+    "axios": "1.15.1",
+    "date-fns": "4.1.0",
+    "imask": "7.6.1",
+    "tailwindcss": "4.2.4"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.0.1",
-    "@storybook/addon-a11y": "^10.1.10",
-    "@storybook/addon-docs": "^10.1.10",
-    "@storybook/addon-vitest": "^10.2.12",
-    "@storybook/vue3": "^10.2.12",
-    "@storybook/vue3-vite": "^10.2.12",
-    "@tailwindcss/vite": "^4.1.18",
-    "@types/node": "^22.16.5",
-    "@typescript-eslint/eslint-plugin": "^8.57.1",
-    "@typescript-eslint/parser": "^8.57.1",
-    "@vitejs/plugin-vue": "^6.0.3",
-    "@vitest/browser": "^3.2.4",
-    "@vitest/eslint-plugin": "^1.5.2",
-    "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/tsconfig": "^0.8.1",
-    "commitizen": "^4.3.1",
-    "eslint": "^9.39.2",
-    "eslint-plugin-storybook": "^10.1.10",
-    "eslint-plugin-vue": "~10.6.2",
-    "prettier": "3.7.4",
-    "storybook": "^10.2.12",
-    "typescript": "~5.9.3",
-    "vite": "^7.3.1",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-vue-devtools": "^8.0.5",
-    "vitest": "^3.2.4",
-    "vue": "^3.5.25",
-    "vue-eslint-parser": "^10.4.0",
-    "vue-tsc": "^3.1.8"
+    "@chromatic-com/storybook": "5.0.1",
+    "@storybook/addon-a11y": "10.1.10",
+    "@storybook/addon-docs": "10.1.10",
+    "@storybook/addon-vitest": "10.2.12",
+    "@storybook/vue3": "10.2.12",
+    "@storybook/vue3-vite": "10.2.12",
+    "@tailwindcss/vite": "4.2.4",
+    "@types/node": "22.16.5",
+    "@vitejs/plugin-vue": "6.0.6",
+    "@vitest/browser": "3.2.4",
+    "eslint-plugin-storybook": "10.1.10",
+    "fg-devkit": "1.5.1",
+    "storybook": "10.2.12",
+    "vite": "7.3.2",
+    "vite-plugin-dts": "4.5.4",
+    "vite-plugin-vue-devtools": "8.1.1",
+    "vitest": "3.2.4",
+    "vue": "3.5.32"
   },
   "knip": {
     "ignoreBinaries": [
@@ -127,24 +93,23 @@
     "ignore": [
       "env.d.ts",
       "playground-consumer/**",
-      "scripts/sync-vscode-settings.mjs",
       "src/apply.css"
     ]
   },
-  "pnpm": {
-    "overrides": {
-      "minimatch": "^10.2.3",
-      "flatted": "^3.4.2",
-      "lodash": ">=4.18.0",
-      "tmp": "^0.2.4",
-      "follow-redirects@<=1.15.11": ">=1.16.0"
-    },
-    "onlyBuiltDependencies": [
-      "@parcel/watcher",
-      "core-js-pure",
-      "esbuild",
-      "vue-demi"
-    ]
-  },
-  "packageManager": "pnpm@10.17.1"
-}
+  "scripts": {
+    "serve": "vite",
+    "build": "vite build && pnpm build:types && cp ./src/tokens.css ./dist/tokens.css && cp ./src/slot-styles.css ./dist/slot-styles.css && cp ./src/apply.css ./dist/apply.css && cp ./src/fonts.css ./dist/fonts.css && cp -r ./public/assets ./dist/assets && mkdir -p ./dist/assets/img/logos && cp -r ./src/assets/img/logos/* ./dist/assets/img/logos/",
+    "build:types": "pnpm exec fgd typecheck --project tsconfig.build.json",
+    "preview": "vite preview",
+    "lint": "pnpm exec fgd lint --fix .",
+    "lint:ts": "pnpm exec fgd typecheck --noEmit -p tsconfig.app.json",
+    "lint:all": "pnpm lint && pnpm lint:ts",
+    "format": "prettier --write src/",
+    "storybook": "STORYBOOK=true storybook dev -p 6006",
+    "build-storybook": "STORYBOOK=true storybook build",
+    "yalc:publish": "pnpm build && yalc publish",
+    "yalc:push": "pnpm build && yalc push",
+    "serve:playground": "pnpm --dir playground-consumer dev",
+    "lint-check": "pnpm exec fgd lint ."
+  }
+}

package/src/assets/icons.ts

@@ -506,4 +506,5 @@ const icons: IconMap = {
 }
 
 export type IconName = keyof IconMap // resolves to `string`
+
 export default icons

package/src/components/Table/FdsTableHead/FdsTableHead.stories.ts

@@ -9,11 +9,13 @@ const meta: Meta<typeof FdsTableHead> = {
     heading: { control: { type: 'text' } },
     align: { control: { type: 'radio' }, options: ['left', 'center', 'right'] },
     icon: { control: { type: 'select' }, options: ['sort', 'ascending', 'descending'] },
+    isSortActive: { control: { type: 'boolean' } },
   },
   args: {
     heading: 'Namn',
     align: 'left',
     icon: 'sort',
+    isSortActive: false,
   },
 }
 
@@ -63,7 +65,7 @@ export const Sortable: Story = {
 }
 
 export const SortedAsc: Story = {
-  args: { icon: 'ascending' },
+  args: { icon: 'ascending', isSortActive: true },
   render: (args: Story['args']) => ({
     components: { FdsTableHead },
     setup: () => ({ args }),
@@ -85,7 +87,7 @@ export const SortedAsc: Story = {
 }
 
 export const SortedDesc: Story = {
-  args: { icon: 'descending' },
+  args: { icon: 'descending', isSortActive: true },
   render: (args: Story['args']) => ({
     components: { FdsTableHead },
     setup: () => ({ args }),

package/src/components/Table/FdsTableHead/FdsTableHead.vue

@@ -9,6 +9,7 @@ const props = withDefaults(defineProps<FdsTableHeadProps>(), {
   icon: undefined,
   heading: undefined,
   dataTestid: undefined,
+  isSortActive: false,
 })
 
 const hasSlot = useHasSlot()
@@ -21,6 +22,11 @@ const headerClasses = computed(() => [
     'text-blue-600! hover:bg-blue_t-200 cursor-pointer focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-500 active:bg-blue_t-300',
 ])
 
+const iconClasses = computed(() => [
+  'fill-blue-500 ml-1 transition-opacity',
+  iconName.value && !props.isSortActive && 'opacity-20',
+])
+
 /* Sending an icon makes the th sortable */
 const iconName = computed(() => props.icon)
 
@@ -56,7 +62,7 @@ defineSlots<{
     >
       <span v-if="hasSlot"><slot /></span>
       <span v-else>{{ heading }}</span>
-      <FdsIcon :name="iconName" size="24px" class="fill-blue-500 ml-1" />
+      <FdsIcon :name="iconName" size="24px" :class="iconClasses" />
     </button>
     <div v-else :class="headerClasses">
       <span v-if="hasSlot"><slot /></span>

package/src/components/Table/FdsTableHead/types.ts

@@ -5,4 +5,5 @@ export interface FdsTableHeadProps extends /* @vue-ignore */ HTMLAttributes {
   align?: 'left' | 'center' | 'right'
   icon?: 'sort' | 'ascending' | 'descending'
   dataTestid?: string
+  isSortActive?: boolean
 }

package/src/index.ts

@@ -197,61 +197,94 @@ export type { FileSizeValidationResult, FileValidationOptions, FileValidationRes
 
 // Button component types
 export type { FdsButtonBaseProps } from './components/Buttons/ButtonBaseProps'
+
 export type { FdsCopyButtonProps } from './components/Buttons/FdsButtonCopy/types'
+
 export type { DownloadOptions, FdsButtonDownloadProps } from './components/Buttons/FdsButtonDownload/types'
+
 export type { FdsIconButtonProps } from './components/Buttons/FdsButtonIcon/types'
 
 // Button components that use FdsButtonBaseProps
 import type { FdsButtonBaseProps } from './components/Buttons/ButtonBaseProps'
 export type FdsButtonPrimaryProps = FdsButtonBaseProps
+
 export type FdsButtonSecondaryProps = FdsButtonBaseProps
+
 export type FdsButtonMinorProps = FdsButtonBaseProps
 
 // Form component types
 export type { FdsCheckboxProps } from './components/Form/FdsCheckbox/types'
+
 export type { FdsInputProps } from './components/Form/FdsInput/types'
+
 export type { FdsRadioProps } from './components/Form/FdsRadio/types'
+
 export type { FdsSelectProps } from './components/Form/FdsSelect/types'
+
 export type { FdsTextareaProps } from './components/Form/FdsTextarea/types'
 
 // Table component types
 export type { FdsTableProps } from './components/Table/FdsTable/types'
+
 export type { FdsTableHeadProps } from './components/Table/FdsTableHead/types'
 
 // Block component types
 // Use relative paths so the generated declarations are resolvable from the published package
 export type { FdsAlertBlockProps } from './components/Blocks/FdsBlockAlert/types'
+
 export type { FdsContentBlockProps } from './components/Blocks/FdsBlockContent/types'
+
 export type { FdsExpanderBlockProps } from './components/Blocks/FdsBlockExpander/types'
+
 export type { FdsBlockInfoProps } from './components/Blocks/FdsBlockInfo/types'
+
 export type { FdsInteractionBlockProps } from './components/Blocks/FdsBlockLink/types'
 
 // Tab component types
 export type { FdsTabsProps } from './components/Tabs/FdsTabs/types'
+
 export type { FdsTabsItemProps } from './components/Tabs/FdsTabsItem/types'
 
 // Typography component types
 export type { FdsExitModalProps } from './components/FdsExitModal/types'
+
 export type { FdsH1Props } from './components/Typography/FdsH1/types'
+
 export type { FdsH2Props } from './components/Typography/FdsH2/types'
+
 export type { FdsH3Props } from './components/Typography/FdsH3/types'
+
 export type { FdsHrProps } from './components/Typography/FdsHr/types'
+
 export type { FdsLabelProps } from './components/Typography/FdsLabel/types'
+
 export type { FdsLeadProps } from './components/Typography/FdsLead/types'
+
 export type { FdsListHeadingProps } from './components/Typography/FdsListHeading/types'
+
 export type { FdsMetaProps } from './components/Typography/FdsMeta/types'
 
 // Other component types
 export type { FdsIconName, FdsIconProps } from './components/FdsIcon/types'
+
 export type { FdsModalProps } from './components/FdsModal/types'
+
 export type { FdsPaginationProps } from './components/FdsPagination/types'
+
 export type { FdsPopoverProps } from './components/FdsPopover/types'
+
 export type { FdsSearchSelectProps } from './components/FdsSearchSelect/types'
+
 export type { FdsSearchSelectProProps } from './components/FdsSearchSelectPro/types'
+
 export type { FdsSpinnerProps } from './components/FdsSpinner/types'
+
 export type { FdsStickerProps } from './components/FdsSticker/types'
+
 export type { FdsTruncatedTextProps } from './components/FdsTruncatedText/types'
+
 export type { FdsWeekCalendarLoading, FdsWeekCalendarProps, WeekDateRange } from './components/FdsWeekCalendar/types'
+
 export type { FdsWizardGoPayload, FdsWizardProps, FdsWizardRoute } from './components/FdsWizard/types'
 
 // Composable types

package/configs/eslint.config.base.js

@@ -1,262 +0,0 @@
-// Base ESLint configuration for fds-vue-core
-// Extend this in your project's eslint.config.js
-
-import tseslint from '@typescript-eslint/eslint-plugin'
-import tsparser from '@typescript-eslint/parser'
-import pluginVitest from '@vitest/eslint-plugin'
-import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
-import pluginVue from 'eslint-plugin-vue'
-import { globalIgnores } from 'eslint/config'
-import vueParser from 'vue-eslint-parser'
-
-export default function createBaseConfig(options = {}) {
-  const {
-    tsconfigRootDir = process.cwd(),
-    tsconfigFiles = ['./tsconfig.json'],
-    additionalIgnores = [],
-    extraNonTypeAwareFiles = [],
-    enablePrettier = false,
-    enableI18n = false,
-    i18nLocaleDir = './src/lang/*.json',
-    additionalRules = {},
-    additionalPlugins = {},
-    additionalSettings = {},
-  } = options
-
-  // Note: Optional plugins should be imported by the consuming project
-  // This config accepts them via additionalPlugins option
-
-  const defaultAdditionalIgnores = [
-    'test-results/**',
-    'playwright-report/**',
-    'blob-report/**',
-    'playwright/.cache/**',
-    'reports/**',
-    '**/fds-vue-core/configs/**',
-  ]
-
-  const configs = [
-    // Non-type-aware config for config files (must come first)
-    {
-      name: 'fds-vue-core/config-files',
-      files: ['*.config.{ts,mts,js,mjs,cjs}', 'eslint.config.{js,ts}'],
-      languageOptions: {
-        parserOptions: {
-          project: null,
-          tsconfigRootDir,
-        },
-      },
-    },
-    {
-      name: 'fds-vue-core/base',
-      files: ['**/*.{ts,mts,tsx,vue}'],
-    },
-    {
-      name: 'fds-vue-core/vue-non-type-aware',
-      files: ['**/*.vue'],
-      languageOptions: {
-        parser: vueParser,
-        parserOptions: {
-          parser: tsparser,
-          project: null,
-        },
-      },
-    },
-    {
-      name: 'fds-vue-core/typescript',
-      files: ['**/*.{ts,mts,tsx}'],
-      languageOptions: {
-        parser: tsparser,
-        parserOptions: {
-          project: null,
-        },
-      },
-      plugins: {
-        '@typescript-eslint': tseslint,
-      },
-    },
-    // Non-type-aware config for extra files outside tsconfig
-    ...(extraNonTypeAwareFiles.length
-      ? [
-          {
-            name: 'fds-vue-core/extra-non-type-aware',
-            files: extraNonTypeAwareFiles,
-            languageOptions: {
-              parserOptions: {
-                project: null,
-                tsconfigRootDir,
-              },
-            },
-          },
-        ]
-      : []),
-    // Type-aware config for TypeScript files (if tsconfig files provided)
-    ...(tsconfigFiles && tsconfigFiles.length > 0
-      ? [
-          {
-            name: 'fds-vue-core/type-aware',
-            files: ['src/**/*.{ts,mts,tsx}'],
-            languageOptions: {
-              parser: tsparser,
-              parserOptions: {
-                project: tsconfigFiles,
-                tsconfigRootDir,
-              },
-            },
-          },
-        ]
-      : []),
-    globalIgnores([
-      '**/dist/**',
-      '**/coverage/**',
-      '**/.storybook/**',
-      '**/node_modules/**',
-      '*.min.js',
-      'tsconfig.tsbuildinfo',
-      '.env.local',
-      '.env.*.local',
-      '*.config.cjs',
-      '.eslintrc.cjs',
-      ...defaultAdditionalIgnores,
-      ...additionalIgnores,
-    ]),
-    ...pluginVue.configs['flat/essential'],
-    {
-      ...pluginVitest.configs.recommended,
-      files: ['**/__tests__/**', '**/*.test.*', '**/*.spec.*'],
-    },
-    {
-      name: 'fds-vue-core/rules',
-      files: ['**/*.vue', '**/*.js', '**/*.jsx', '**/*.cjs', '**/*.mjs', '**/*.ts', '**/*.tsx', '**/*.cts', '**/*.mts'],
-      plugins: {
-        '@typescript-eslint': tseslint,
-        ...additionalPlugins,
-      },
-      settings: {
-        ...(enableI18n
-          ? {
-              'vue-i18n': {
-                localeDir: {
-                  pattern: i18nLocaleDir,
-                  localeKey: 'file',
-                },
-              },
-            }
-          : {}),
-        ...additionalSettings,
-      },
-      rules: {
-        'vue/multi-word-component-names': 'off',
-        'vue/comment-directive': 'off',
-        'vue/no-deprecated-slot-attribute': 'off',
-        'no-console': ['error', { allow: ['warn', 'error'] }],
-        'arrow-body-style': ['warn', 'as-needed', { requireReturnForObjectLiteral: false }],
-        // Vue component recognition - allow fds-* components and router components
-        'vue/no-undef-components': [
-          'error',
-          {
-            ignorePatterns: ['^fds-', '^router-', '^Router', '^VueQuery'],
-          },
-        ],
-        'object-shorthand': ['error', 'always'],
-        'prefer-destructuring': [
-          'error',
-          {
-            array: false,
-            object: true,
-          },
-        ],
-        'prefer-arrow-callback': 'error',
-        'prefer-template': 'error',
-        'no-unused-expressions': 'error',
-        'no-useless-return': 'error',
-        'no-useless-concat': 'error',
-        '@typescript-eslint/no-unused-vars': [
-          'error',
-          {
-            argsIgnorePattern: '^_',
-            varsIgnorePattern: '^_',
-          },
-        ],
-        '@typescript-eslint/ban-ts-comment': 'off',
-        '@typescript-eslint/explicit-function-return-type': 'off',
-        '@typescript-eslint/no-var-requires': 'off',
-        'prefer-const': 'error',
-        'no-var': 'error',
-        'prefer-spread': 'error',
-        'prefer-rest-params': 'error',
-        'no-duplicate-imports': 'error',
-        'no-useless-rename': 'error',
-        'object-curly-spacing': ['error', 'always'],
-        'array-bracket-spacing': ['error', 'never'],
-        // Note: comma-dangle removed - Prettier handles trailing commas via trailingComma: 'all' setting
-        // skipFormatting at the end of config array disables formatting rules that conflict with Prettier
-        quotes: ['error', 'single', { avoidEscape: true }],
-        semi: ['error', 'never'],
-        'no-trailing-spaces': 'error',
-        'eol-last': 'error',
-        'no-lonely-if': 'error',
-        // Prettier integration (if enabled and plugin provided)
-        ...(enablePrettier && additionalPlugins.prettier ? { 'prettier/prettier': 'warn' } : {}),
-        // i18n rules (if enabled and plugin provided)
-        ...(enableI18n && additionalPlugins['@intlify/vue-i18n']
-          ? {
-              '@intlify/vue-i18n/no-missing-keys': 'error',
-              '@intlify/vue-i18n/no-raw-text': [
-                'error',
-                {
-                  attributes: {
-                    '/.+/': [
-                      'title',
-                      'aria-label',
-                      'aria-placeholder',
-                      'aria-roledescription',
-                      'aria-valuetext',
-                      'label',
-                      'placeholder',
-                      'alt',
-                      'meta',
-                    ],
-                    input: ['placeholder'],
-                    img: ['alt'],
-                  },
-                  ignorePattern: '^[-:/()%,.\'"]+$',
-                  ignoreNodes: ['md-icon', 'v-icon', 'fds-icon'],
-                },
-              ],
-              '@intlify/vue-i18n/no-unused-keys': [
-                'warn',
-                {
-                  src: './src',
-                  extensions: ['.js', '.vue', '.ts'],
-                  enableFix: false,
-                },
-              ],
-              '@intlify/vue-i18n/no-duplicate-keys-in-locale': 'error',
-              '@intlify/vue-i18n/no-dynamic-keys': 'warn',
-              '@intlify/vue-i18n/key-format-style': [
-                'warn',
-                'camelCase',
-                {
-                  allowArray: false,
-                  splitByDots: true,
-                },
-              ],
-            }
-          : {}),
-        // Additional project-specific rules
-        ...additionalRules,
-      },
-    },
-    // JS/CJS files config
-    {
-      files: ['**/*.js', '**/*.cjs'],
-      rules: {
-        '@typescript-eslint/no-var-requires': 'off',
-      },
-    },
-    skipFormatting,
-  ]
-
-  return configs
-}

package/configs/prettier.config.js

@@ -1,13 +0,0 @@
-export default {
-  semi: false,
-  singleQuote: true,
-  printWidth: 120,
-  trailingComma: 'all',
-  tabWidth: 2,
-  useTabs: false,
-  arrowParens: 'always',
-  endOfLine: 'lf',
-  singleAttributePerLine: false,
-  bracketSameLine: false,
-  htmlWhitespaceSensitivity: 'ignore',
-}

package/configs/tsconfig.base.json

@@ -1,18 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "compilerOptions": {
-    "skipLibCheck": true,
-    "resolveJsonModule": true,
-    "allowJs": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "vueCompilerOptions": {
-    "strictTemplates": true,
-    "types": ["fds-vue-core"]
-  }
-}