Feature/typescript declarations

docs/examples/accordion-example.vue

@@ -53,7 +53,7 @@
 
 <script lang="ts">
 import ExampleContainer from "./example-container.vue"
-import SldsAccordion from "../slds-accordion/slds-accordion.vue"
+import SldsAccordion from "../../src/components/slds-accordion/slds-accordion.vue"
 import SldsAccordionSection from "../../src/components/slds-accordion/slds-accordion-section.vue"
 import { defineComponent } from "vue"
 import { AccordionSection } from "../../src/components/slds-accordion/accordion-section"

docs/examples/spinner-example.vue

@@ -10,7 +10,7 @@
 
 <script lang="ts">
 import ExampleContainer from "./example-container.vue"
-import SldsSpinner from "../slds-spinner/slds-spinner.vue"
+import SldsSpinner from "../../src/components/slds-spinner/slds-spinner.vue"
 import { defineComponent } from "vue"
 
 export default defineComponent({

env.d.ts

@@ -1,6 +1 @@
 /// <reference types="vite/client" />
-
-declare module "*.vue" {
-    import Vue from "vue"
-    export default Vue
-}

package.json

@@ -1,29 +1,27 @@
 {
     "name": "vuetning",
     "version": "0.0.0",
-    "main": "./dist/vuetning.es.js",
-    "module": "./dist/vuetning.es.js",
     "type": "module",
-    "types": "src/main.ts",
+    "main": "./dist/vuetning.umd.js",
+    "module": "./dist/vuetning.es.js",
     "exports": {
         ".": {
-            "import": "./dist/vuetning.es.js"
+            "import": "./dist/vuetning.es.js",
+            "require": "./dist/vuetning.umd.js"
         },
-        "./dist/style.css": "./dist/style.css"
+        "./style.css": "./dist/vuetning.css"
     },
     "files": [
         "dist",
         "src"
     ],
+    "types": "./dist/main.d.ts",
     "scripts": {
         "docs:dev": "vitepress dev docs",
         "docs:build": "vitepress build docs",
-        "build": "run-p type-check build-only",
-        "test:unit": "vitest --coverage",
-        "build-only": "vite build",
-        "type-check": "vue-tsc --noEmit --composite false",
-        "lint": "eslint --ext .ts,vue --ignore-path .gitignore .",
-        "lint:fix": "eslint --fix --ext .ts,vue --ignore-path .gitignore ."
+        "build": "vite build && vue-tsc --emitDeclarationOnly",
+        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+        "type-check": "vue-tsc --noEmit --composite false"
     },
     "dependencies": {
         "@formkit/auto-animate": "^0.8.1",
@@ -38,30 +36,21 @@
         "vue-observe-visibility": "^2.0.0-alpha.1"
     },
     "devDependencies": {
-        "@babel/types": "^7.24.0",
-        "@rushstack/eslint-patch": "^1.7.2",
-        "@tsconfig/node20": "^20.1.2",
-        "@types/jsdom": "^21.1.6",
-        "@types/node": "^20.11.28",
-        "@types/numeral": "^2.0.5",
-        "@types/scrollparent": "^2.0.3",
-        "@types/uuid": "^9.0.8",
+        "@rushstack/eslint-patch": "^1.10.2",
+        "@tsconfig/node20": "^20.1.4",
+        "@types/node": "^20.12.7",
         "@vitejs/plugin-vue": "^5.0.4",
-        "@vitest/coverage-v8": "^1.4.0",
         "@vue/eslint-config-typescript": "^13.0.0",
-        "@vue/test-utils": "^2.4.5",
         "@vue/tsconfig": "^0.5.1",
         "eslint": "^8.57.0",
-        "eslint-plugin-vue": "^9.23.0",
-        "jsdom": "^24.0.0",
-        "npm-run-all": "^4.1.5",
+        "eslint-plugin-vue": "^9.24.1",
+        "npm-run-all2": "^6.1.2",
         "postcss": "^8.4.35",
         "postcss-prefix-selector": "^1.16.0",
-        "sass": "^1.72.0",
-        "typescript": "^5.3.3",
-        "vite": "^5.1.6",
-        "vitepress": "^1.0.0-rc.45",
-        "vitest": "^1.4.0",
-        "vue-tsc": "^2.0.6"
+        "sass": "^1.74.1",
+        "typescript": "~5.4.0",
+        "vite": "^5.2.8",
+        "vitepress": "^1.1.0",
+        "vue-tsc": "^2.0.12"
     }
 }

src/components/slds-checkbox-button-group/checkbox-button-group-option.ts

@@ -1,4 +1,4 @@
-import type { Option } from "@/components/commons/option"
+import type { Option } from "../commons/option"
 
 export interface CheckboxButtonGroupOption extends Option {
     /**

src/components/slds-checkbox-group/checkbox-group-option.ts

@@ -1,4 +1,4 @@
-import type { Option } from "@/components/commons/option"
+import type { Option } from "../commons/option"
 
 export interface CheckboxGroupOption extends Option {
     /**

src/components/slds-data-table/data-table-column-configuration.ts

@@ -1,6 +1,23 @@
 import { v4 as newId } from "uuid"
 
 export class DataTableColumnConfiguration {
+    id: string
+    type: string
+    label?: string
+    fieldName?: string
+    width?: number
+    hasCopyButton: boolean
+    isResizable: boolean
+    sortable: boolean
+    sortBy?: string
+    hasMenu: boolean
+    typeAttributes?: any
+    sortedAscending: boolean
+    sortedDescending: boolean
+    fullWidth?: number
+    offsetLeft?: number
+    left?: number
+
     constructor(column) {
         this.id = newId()
         this.type = (column.type != null) ? column.type : "text"

src/components/slds-wide-radio-group/wide-radio-group-option.ts

@@ -1,4 +1,4 @@
-import type { Option } from "@/components/commons/option"
+import type { Option } from "../commons/option"
 
 export interface WideRadioGroupOption extends Option {
     /**

src/constants/index.ts

@@ -1,10 +1,3 @@
-import { EVENTS } from "./events"
-import { ICON_CATEGORIES, ICONS } from "./icons"
-import { KEYS } from "./keys"
-
-export {
-    EVENTS,
-    ICON_CATEGORIES,
-    ICONS,
-    KEYS,
-}
+export { EVENTS } from "./events"
+export { ICON_CATEGORIES, ICONS } from "./icons"
+export { KEYS } from "./keys"

src/main.ts

@@ -1,13 +1,10 @@
-import { type App } from "vue"
-import "./assets/styles/main.scss"
-
+import type { App } from "vue"
 import * as components from "./components"
 import * as stencils from "./stencils"
+import "./assets/styles/main.scss"
 
-export * as components from "./components"
-export * as stencils from "./stencils"
+export default { install }
 export * from "./constants"
-
 export type { AccordionSection } from "./components/slds-accordion/accordion-section"
 export type { Breadcrumb } from "./components/slds-breadcrumbs/breadcrumb"
 export type { CheckboxGroupOption } from "./components/slds-checkbox-group/checkbox-group-option"
@@ -21,8 +18,6 @@ export type { PageHeaderDropdownOption } from "./components/slds-page-header/pag
 export type { Tab } from "./components/slds-tabs/tab"
 export type { WideRadioGroupOption } from "./components/slds-wide-radio-group/wide-radio-group-option"
 
-export default { install }
-
 interface ComponentDictionary {
     [key: string]: any
 }

tsconfig.json

@@ -1,14 +1,32 @@
 {
-    "files": [],
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "module": "ESNext",
+        "lib": [
+            "ES2020",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "skipLibCheck": true,
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "preserve",
+        "outDir": "dist",
+        "declaration": true,
+        "allowSyntheticDefaultImports": true
+    },
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.d.ts",
+        "src/**/*.tsx",
+        "src/components/*.vue"
+    ],
     "references": [
         {
             "path": "./tsconfig.node.json"
-        },
-        {
-            "path": "./tsconfig.app.json"
-        },
-        {
-            "path": "./tsconfig.vitest.json"
         }
     ]
 }

tsconfig.node.json

@@ -1,17 +1,12 @@
 {
-    "extends": "@tsconfig/node20/tsconfig.json",
-    "include": [
-        "vite.config.*",
-        "vitest.config.*",
-        "cypress.config.*",
-        "nightwatch.conf.*",
-        "playwright.config.*"
-    ],
     "compilerOptions": {
+        "allowSyntheticDefaultImports": true,
         "composite": true,
         "module": "ESNext",
-        "types": [
-            "node"
-        ]
-    }
+        "moduleResolution": "bundler",
+        "skipLibCheck": true
+    },
+    "include": [
+        "vite.config.ts"
+    ]
 }

vite.config.ts

@@ -1,25 +1,24 @@
-import { defineConfig } from "vite"
 import vue from "@vitejs/plugin-vue"
+import { defineConfig } from "vite"
 import { resolve } from "path"
 
 export default defineConfig({
+    plugins: [vue()],
     build: {
         lib: {
             entry: resolve(__dirname, "src/main.ts"),
             name: "Vuetning",
-            formats: ["es"],
-            fileName: (format) => `vuetning.${format}.js`,
+            fileName: (format) => `vuetning.${format}.js`
         },
         rollupOptions: {
             external: ["vue"],
             output: {
+                assetFileNames: "vuetning.[ext]",
+                exports: "named",
                 globals: {
-                    vue: "Vue",
-                },
-            },
-        },
-    },
-    plugins: [
-        vue(),
-    ],
+                    vue: "Vue"
+                }
+            }
+        }
+    }
 })