@dpa-id-components/dpa-shared-components 20.0.8 → 21.0.1

package/dist/eslint.base.config.js

@@ -1,10 +1,13 @@
 import js from "@eslint/js";
+import * as tsParser from "@typescript-eslint/parser";
 import skipFormattingConfig from "@vue/eslint-config-prettier/skip-formatting";
 import {
   defineConfigWithVueTs,
   vueTsConfigs,
 } from "@vue/eslint-config-typescript";
+import { createTypeScriptImportResolver } from "eslint-import-resolver-typescript";
 import eslintPluginBetterTailwindcss from "eslint-plugin-better-tailwindcss";
+import { importX } from "eslint-plugin-import-x";
 import pluginVue from "eslint-plugin-vue";
 import globals from "globals";
 
@@ -17,10 +20,14 @@ export default defineConfigWithVueTs(
     rules: {
       "@typescript-eslint/no-explicit-any": "off",
       "@typescript-eslint/ban-ts-comment": "off",
+      "no-console": "error",
+      /**
+       * Standardizing on one component name pattern makes global search more effective
+       */
+      "vue/component-name-in-template-casing": "error",
       "vue/define-emits-declaration": ["error", "type-literal"],
       "vue/multi-word-component-names": "off",
       "vue/no-v-html": "off",
-      "no-console": "error",
     },
     languageOptions: {
       globals: {
@@ -43,6 +50,47 @@ export default defineConfigWithVueTs(
     },
   },
 
+  importX.flatConfigs.recommended,
+  importX.flatConfigs.typescript,
+  {
+    name: "app/import-linting",
+    settings: {
+      "import-x/resolver-next": [
+        createTypeScriptImportResolver({ alwaysTryTypes: true }),
+      ],
+    },
+    rules: {
+      "import-x/extensions": ["error", "ignorePackages", { fix: true }],
+      "import-x/order": [
+        "error",
+        {
+          alphabetize: {
+            order: "asc",
+            caseInsensitive: true,
+          },
+          named: true,
+          "newlines-between": "always",
+          groups: [
+            "builtin",
+            "external",
+            "internal",
+            "parent",
+            "sibling",
+            "index",
+          ],
+        },
+      ],
+    },
+  },
+  {
+    files: ["**/*.ts"],
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: "latest",
+      sourceType: "module",
+    },
+  },
+
   // Turns off formatting-related ESLint rules so that formatting can be delegated to the Prettier CLI. See https://github.com/vuejs/eslint-config-prettier?tab=readme-ov-file#use-separate-commands-for-linting-and-formatting
   skipFormattingConfig,
 );

package/dist/src/components/UiAutocomplete/UiAutocomplete.vue

@@ -60,7 +60,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
 
-import { vClickAway } from "../../directives/vClickAway.js";
+import { vClickAway } from "../../directives/vClickAway.ts";
 import UiInput from "../UiInput/UiInput.vue";
 import UiList from "../UiList/UiList.vue";
 import UiListItem from "../UiListItem/UiListItem.vue";

package/dist/src/components/UiBadge/UiBadge.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
-import { icons } from "../UiIcon/icons.js";
+import { icons } from "../UiIcon/icons.ts";
+
 import UiBadge from "./UiBadge.vue";
 
 const meta = {

package/dist/src/components/UiButton/UiButton.spec.ts

@@ -5,7 +5,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import UiButton from "./UiButton.vue";
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history: createWebHistory("/"),
   routes: [
     {
       path: "/",

package/dist/src/components/UiButton/UiButton.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
-import { icons } from "../UiIcon/icons.js";
+import { icons } from "../UiIcon/icons.ts";
+
 import UiButton from "./UiButton.vue";
 
 const meta = {

package/dist/src/components/UiButton/UiButton.vue

@@ -22,7 +22,7 @@
 import { computed } from "vue";
 import type { RouteLocationRaw } from "vue-router";
 
-import { cn } from "../../utils/cn.js";
+import { cn } from "../../utils/cn.ts";
 import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
 
 const emit = defineEmits<{

package/dist/src/components/UiButtonGroup/UiButtonGroup.stories.ts

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { ref } from "vue";
 
 import UiButton from "../UiButton/UiButton.vue";
+
 import UiButtonGroup from "./UiButtonGroup.vue";
 
 type PropsAndStoryProps = InstanceType<typeof UiButtonGroup> & {

package/dist/src/components/UiCheckBoxGroup/UiCheckBoxGroup.spec.ts

@@ -1,5 +1,6 @@
-import { mount } from "@vue/test-utils";
 import { randomInt } from "crypto";
+
+import { mount } from "@vue/test-utils";
 import { describe, expect, it } from "vitest";
 
 import UiCheckBoxGroup, { type CheckboxItem } from "./UiCheckBoxGroup.vue";

package/dist/src/components/UiCheckbox/UiCheckbox.vue

@@ -64,7 +64,7 @@
 import { v4 as uuidv4 } from "uuid";
 import { computed } from "vue";
 
-import { cn } from "../../utils/cn.js";
+import { cn } from "../../utils/cn.ts";
 import UiLabel from "../UiLabel/UiLabel.vue";
 
 const emit = defineEmits<{

package/dist/src/components/UiCollapseNavigation/UiCollapseNavigation.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
 import UiFilterBadgeButton from "../UiFilterBadgeButton/UiFilterBadgeButton.vue";
+
 import UiCollapseNavigation from "./UiCollapseNavigation.vue";
 
 const meta = {

package/dist/src/components/UiColorPicker/UiColorPicker.spec.ts

@@ -1,7 +1,7 @@
 import { mount } from "@vue/test-utils";
 import { describe, expect, it } from "vitest";
 
-import { COLORS } from "./lib/colors.js";
+import { COLORS } from "./lib/colors.ts";
 import UiColorPicker from "./UiColorPicker.vue";
 
 describe("UiColorPicker", () => {

package/dist/src/components/UiColorPicker/UiColorPicker.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
 import UiLabel from "../UiLabel/UiLabel.vue";
+
 import UiColorPicker from "./UiColorPicker.vue";
 
 const meta = {

package/dist/src/components/UiColorPicker/UiColorPicker.vue

@@ -53,11 +53,11 @@
 
 <script setup lang="ts">
 import Color from "color";
-import { computed, ref } from "vue";
-import { watch } from "vue";
+import { computed, ref, watch } from "vue";
 
 import UiIcon from "../UiIcon/UiIcon.vue";
-import { COLORS } from "./lib/colors.js";
+
+import { COLORS } from "./lib/colors.ts";
 
 const props = withDefaults(
   defineProps<{

package/dist/src/components/UiDatePicker/UiDatePicker.stories.ts

@@ -15,7 +15,8 @@ import {
   subYears,
 } from "date-fns";
 
-import { icons } from "../UiIcon/icons.js";
+import { icons } from "../UiIcon/icons.ts";
+
 import UiDatePicker from "./UiDatePicker.vue";
 
 const singleDate = "2022-03-07T23:00:00.000Z";

package/dist/src/components/UiDialog/UiDialog.vue

@@ -62,7 +62,7 @@
 <script setup lang="ts">
 import { useEventListener } from "@vueuse/core";
 
-import { cn } from "../../utils/cn.js";
+import { cn } from "../../utils/cn.ts";
 import UiIconButton from "../UiIconButton/UiIconButton.vue";
 import UiOverlay from "../UiOverlay/UiOverlay.vue";
 

package/dist/src/components/UiFilterBadge/UiFilterBadge.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
 import UiIconButton from "../UiIconButton/UiIconButton.vue";
+
 import UiFilterBadge from "./UiFilterBadge.vue";
 
 const meta = {

package/dist/src/components/UiFilterBadgeButton/UiFilterBadgeButton.stories.ts

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { action } from "storybook/actions";
 
 import UiIconButton from "../UiIconButton/UiIconButton.vue";
+
 import UiFilterBadgeButton from "./UiFilterBadgeButton.vue";
 
 const meta = {

package/dist/src/components/UiFilterButton/UiFilterButton.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
-import { icons } from "../UiIcon/icons.js";
+import { icons } from "../UiIcon/icons.ts";
+
 import UiFilterButton from "./UiFilterButton.vue";
 
 const meta = {

package/dist/src/components/UiFilterButton/UiFilterButton.vue

@@ -66,7 +66,7 @@
 import type { ClassValue } from "clsx";
 import { computed } from "vue";
 
-import { cn } from "../../utils/cn.js";
+import { cn } from "../../utils/cn.ts";
 import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
 
 const emit = defineEmits<{

package/dist/src/components/UiIcon/IconOverview.stories.vue

@@ -11,7 +11,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { icons } from "./icons.js";
+import { icons } from "./icons.ts";
 import UiIcon from "./UiIcon.vue";
 
 const props = withDefaults(

package/dist/src/components/UiIcon/UiIcon.spec.ts

@@ -1,7 +1,7 @@
 import { type ComponentMountingOptions, mount } from "@vue/test-utils";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-import { icons } from "./icons.js";
+import { icons } from "./icons.ts";
 import UiIcon from "./UiIcon.vue";
 
 function createWrapper(options: ComponentMountingOptions<typeof UiIcon> = {}) {

package/dist/src/components/UiIcon/UiIcon.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
 import IconOverview from "./IconOverview.stories.vue";
-import { icons } from "./icons.js";
+import { icons } from "./icons.ts";
 import UiIcon from "./UiIcon.vue";
 
 const meta = {

package/dist/src/components/UiIcon/UiIcon.vue

@@ -13,7 +13,7 @@ export type UiIconName = keyof typeof icons;
 <script setup lang="ts">
 import { computed, defineAsyncComponent, watchEffect } from "vue";
 
-import { icons } from "./icons.js";
+import { icons } from "./icons.ts";
 import UiIconLoading from "./UiIconLoading.vue";
 
 const props = withDefaults(

package/dist/src/components/UiIconButton/UiIconButton.stories.ts

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { action } from "storybook/actions";
 
-import { icons } from "../UiIcon/icons.js";
+import { icons } from "../UiIcon/icons.ts";
+
 import UiIconButton from "./UiIconButton.vue";
 
 const meta = {

package/dist/src/components/UiInfoContent/UiInfoContent.stories.ts

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
 import UiButton from "../UiButton/UiButton.vue";
-import { icons } from "../UiIcon/icons.js";
+import { icons } from "../UiIcon/icons.ts";
+
 import UiInfoContent from "./UiInfoContent.vue";
 
 const meta = {

package/dist/src/components/UiInput/UiInput.vue

@@ -117,7 +117,7 @@
 import { v4 as uuidv4 } from "uuid";
 import { computed, onBeforeUpdate, onMounted, ref } from "vue";
 
-import { cn } from "../../utils/cn.js";
+import { cn } from "../../utils/cn.ts";
 import UiLabel from "../UiLabel/UiLabel.vue";
 
 type UiInputStatus = "default" | "info" | "readonly" | "warning" | "error";

package/dist/src/components/UiLabel/UiLabel.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { cn } from "../../utils/cn.js";
+import { cn } from "../../utils/cn.ts";
 
 defineSlots<{
   /**

package/dist/src/components/UiList/UiList.spec.ts

@@ -2,6 +2,7 @@ import { mount } from "@vue/test-utils";
 import { describe, expect, it } from "vitest";
 
 import UiListItem from "../UiListItem/UiListItem.vue";
+
 import UiList from "./UiList.vue";
 
 describe("UiList", () => {

package/dist/src/components/UiList/UiList.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
 import UiListItem from "../UiListItem/UiListItem.vue";
+
 import UiList from "./UiList.vue";
 
 const meta = {

package/dist/src/components/UiListItem/UiListItem.spec.ts

@@ -2,6 +2,7 @@ import { type ComponentMountingOptions, mount } from "@vue/test-utils";
 import { describe, expect, it } from "vitest";
 
 import UiIcon from "../UiIcon/UiIcon.vue";
+
 import UiListItem from "./UiListItem.vue";
 
 function createWrapper(

package/dist/src/components/UiListItem/UiListItem.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
-import { icons } from "../UiIcon/icons.js";
+import { icons } from "../UiIcon/icons.ts";
+
 import UiListItem from "./UiListItem.vue";
 
 const meta = {

package/dist/src/components/UiListItem/UiListItem.vue

@@ -55,7 +55,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-import { cn } from "../../utils/cn.js";
+import { cn } from "../../utils/cn.ts";
 import UiCheckbox from "../UiCheckbox/UiCheckbox.vue";
 import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
 

package/dist/src/components/UiMenu/UiMenu.stories.ts

@@ -2,7 +2,8 @@ import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { action } from "storybook/actions";
 import { computed, ref } from "vue";
 
-import { icons } from "../UiIcon/icons.js";
+import { icons } from "../UiIcon/icons.ts";
+
 import UiMenu, {
   type UiMenuGroupedOption,
   type UiMenuOptionType,

package/dist/src/components/UiMenu/UiMenu.vue

@@ -172,8 +172,8 @@ import {
 } from "@floating-ui/vue";
 import { computed, type HTMLAttributes, ref, watchPostEffect } from "vue";
 
-import { vClickAway } from "../../directives/vClickAway.js";
-import { cn } from "../../utils/cn.js";
+import { vClickAway } from "../../directives/vClickAway.ts";
+import { cn } from "../../utils/cn.ts";
 import UiButton from "../UiButton/UiButton.vue";
 import UiFilterButton from "../UiFilterButton/UiFilterButton.vue";
 import type { UiIconName } from "../UiIcon/UiIcon.vue";

package/dist/src/components/UiMenu/UiMenuItem.vue

@@ -24,8 +24,9 @@
 <script setup lang="ts" generic="Value">
 import type { HTMLAttributes } from "vue";
 
-import { cn } from "../../utils/cn.js";
+import { cn } from "../../utils/cn.ts";
 import UiListItem from "../UiListItem/UiListItem.vue";
+
 import type { UiMenuOptionType } from "./UiMenu.vue";
 
 const props = withDefaults(

package/dist/src/components/UiMenu/UiMenuList.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import { cn } from "../../utils/cn.js";
+import { cn } from "../../utils/cn.ts";
 
 withDefaults(
   defineProps<{

package/dist/src/components/UiOverlayMenu/UiOverlayMenu.spec.ts

@@ -1,8 +1,9 @@
 import { mount } from "@vue/test-utils";
 import { describe, expect, it } from "vitest";
 
-import { vClickAway } from "../../directives/vClickAway.js";
+import { vClickAway } from "../../directives/vClickAway.ts";
 import UiButton from "../UiButton/UiButton.vue";
+
 import UiOverlayMenu from "./UiOverlayMenu.vue";
 
 document.body.innerHTML = `

package/dist/src/components/UiOverlayMenu/UiOverlayMenu.stories.ts

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
 import UiList from "../UiList/UiList.vue";
 import UiListItem from "../UiListItem/UiListItem.vue";
+
 import UiOverlayMenu from "./UiOverlayMenu.vue";
 
 const meta = {

package/dist/src/components/UiOverlayMenu/UiOverlayMenu.vue

@@ -23,7 +23,7 @@ export default {
 <script setup lang="ts">
 import { onMounted } from "vue";
 
-import { vClickAway } from "../../directives/vClickAway.js";
+import { vClickAway } from "../../directives/vClickAway.ts";
 
 withDefaults(
   defineProps<{

package/dist/src/components/UiRadioInputGroup/UiRadioInputGroup.vue

@@ -42,7 +42,7 @@ export default {
 <script setup lang="ts" generic="T extends string | number">
 import { computed, onMounted } from "vue";
 
-import { cn } from "../../utils/cn.js";
+import { cn } from "../../utils/cn.ts";
 import UiLabel from "../UiLabel/UiLabel.vue";
 
 export interface UiRadioInputGroupOption<T> {

package/dist/src/components/UiSearchBar/UiSearchBar.stories.ts

@@ -4,6 +4,7 @@ import UiButton from "../UiButton/UiButton.vue";
 import UiChip from "../UiChip/UiChip.vue";
 import UiIcon from "../UiIcon/UiIcon.vue";
 import UiIconButton from "../UiIconButton/UiIconButton.vue";
+
 import UiSearchBar from "./UiSearchBar.vue";
 
 type PropsAndStoryProps = InstanceType<typeof UiSearchBar> & {

package/dist/src/components/UiSearchBar/UiSearchBar.vue

@@ -118,7 +118,7 @@
 import type { ClassValue } from "clsx";
 import { computed, ref } from "vue";
 
-import { cn } from "../../utils/cn.js";
+import { cn } from "../../utils/cn.ts";
 import UiIconButton from "../UiIconButton/UiIconButton.vue";
 
 const emit = defineEmits<{

package/dist/src/components/UiSectionDivider/UiSectionDivider.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
 import UiSection from "../UiSection/UiSection.vue";
+
 import UiSectionDivider from "./UiSectionDivider.vue";
 
 const meta = {

package/dist/src/components/UiSelect/UiSelect.vue

@@ -86,7 +86,7 @@
           px-4
           py-1
           text-xs/normal
-          
+
           font-medium
           text-white
           transition-all
@@ -106,7 +106,7 @@
 <script setup lang="ts">
 import { v4 as uuidv4 } from "uuid";
 
-import { cn } from "../../utils/cn.js";
+import { cn } from "../../utils/cn.ts";
 import UiIcon from "../UiIcon/UiIcon.vue";
 import UiLabel from "../UiLabel/UiLabel.vue";
 

package/dist/src/components/UiSnackbar/UiSnackbar.spec.ts

@@ -2,6 +2,7 @@ import { mount } from "@vue/test-utils";
 import { describe, expect, it } from "vitest";
 
 import UiIcon from "../UiIcon/UiIcon.vue";
+
 import UiSnackbar from "./UiSnackbar.vue";
 
 describe("UiSnackbar", () => {

package/dist/src/components/UiSnackbar/UiSnackbar.stories.ts

@@ -2,7 +2,8 @@ import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { action } from "storybook/actions";
 import { ref } from "vue";
 
-import { icons } from "../UiIcon/icons.js";
+import { icons } from "../UiIcon/icons.ts";
+
 import UiSnackbar from "./UiSnackbar.vue";
 
 const meta = {

package/dist/src/components/UiSpinner/UiSpinner.spec.ts

@@ -2,6 +2,7 @@ import { mount } from "@vue/test-utils";
 import { describe, expect, it } from "vitest";
 
 import UiIcon from "../UiIcon/UiIcon.vue";
+
 import UiSpinner from "./UiSpinner.vue";
 
 describe("UiSpinner", () => {

package/dist/src/components/UiTextButton/UiTextButton.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
-import { icons } from "../UiIcon/icons.js";
+import { icons } from "../UiIcon/icons.ts";
+
 import UiTextButton from "./UiTextButton.vue";
 
 const meta = {

package/dist/src/components/UiToggleButton/UiToggleButton.stories.ts

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { ref } from "vue";
 
 import UiIcon from "../UiIcon/UiIcon.vue";
+
 import UiToggleButton from "./UiToggleButton.vue";
 
 const meta = {

package/dist/src/components/index.ts

@@ -8,6 +8,7 @@ import UiCheckbox from "./UiCheckbox/UiCheckbox.vue";
 import UiCheckBoxGroup from "./UiCheckBoxGroup/UiCheckBoxGroup.vue";
 import UiChip from "./UiChip/UiChip.vue";
 import UiCollapseNavigation from "./UiCollapseNavigation/UiCollapseNavigation.vue";
+import UiColorPicker from "./UiColorPicker/UiColorPicker.vue";
 import UiDatePicker from "./UiDatePicker/UiDatePicker.vue";
 import UiDialog from "./UiDialog/UiDialog.vue";
 import UiFilterBadge from "./UiFilterBadge/UiFilterBadge.vue";
@@ -33,7 +34,6 @@ import UiOverlay from "./UiOverlay/UiOverlay.vue";
 import UiOverlayMenu from "./UiOverlayMenu/UiOverlayMenu.vue";
 import UiRadioInputGroup from "./UiRadioInputGroup/UiRadioInputGroup.vue";
 export type { UiRadioInputGroupOption } from "./UiRadioInputGroup/UiRadioInputGroup.vue";
-import UiColorPicker from "./UiColorPicker/UiColorPicker.vue";
 import UiSearchBar from "./UiSearchBar/UiSearchBar.vue";
 import UiSearchInput from "./UiSearchInput/UiSearchInput.vue";
 import UiSection from "./UiSection/UiSection.vue";

package/dist/src/compositions/index.ts

@@ -1 +1 @@
-export { useBreakpoints } from "./useBreakpoints/useBreakpoints.js";
+export { useBreakpoints } from "./useBreakpoints/useBreakpoints.ts";

package/dist/src/compositions/useBreakpoints/UseBreakpoints.stories.vue

@@ -6,7 +6,8 @@
 <script setup lang="ts">
 import UiButton from "../../components/UiButton/UiButton.vue";
 import UiIconButton from "../../components/UiIconButton/UiIconButton.vue";
-import { useBreakpoints } from "./useBreakpoints.js";
+
+import { useBreakpoints } from "./useBreakpoints.ts";
 
 const { lg } = useBreakpoints();
 </script>

package/dist/src/directives/index.ts

@@ -1 +1 @@
-export { vClickAway } from "./vClickAway.js";
+export { vClickAway } from "./vClickAway.ts";

package/dist/src/index.ts

@@ -1,6 +1,6 @@
 import "./tailwindPreset.css";
 
-export * from "./components/index.js";
-export * from "./compositions/index.js";
-export * from "./directives/index.js";
-export * from "./utils/index.js";
+export * from "./components/index.ts";
+export * from "./compositions/index.ts";
+export * from "./directives/index.ts";
+export * from "./utils/index.ts";