@naptics/vue-collection 0.2.15 → 0.3.1

package/package.json

@@ -2,7 +2,7 @@
     "name": "@naptics/vue-collection",
     "author": "Timo Siegenthaler",
     "description": "Vue Collection is a collection of styled and fully functional Vue components which can easily be integrated into our projects.",
-    "version": "0.2.15",
+    "version": "0.3.1",
     "main": "./index.js",
     "repository": {
         "type": "git",
@@ -10,7 +10,7 @@
     },
     "scripts": {
         "dev": "vite",
-        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+        "lint": "eslint . --fix --ignore-pattern=.gitignore",
         "type-check": "run-p type-check-lib type-check-demo",
         "type-check-demo": "vue-tsc --noEmit -p tsconfig.demo.json --composite false",
         "type-check-lib": "vue-tsc --noEmit -p tsconfig.lib.json --composite false",
@@ -18,7 +18,8 @@
         "build-demo": "run-p type-check-demo build-only-demo",
         "build-lib": "run-p type-check-lib build-only-lib",
         "build-only-demo": "vite build",
-        "build-only-lib": "bash ./scripts/build-lib.sh"
+        "build-only-lib": "bash ./scripts/build-lib.sh",
+        "preinstall": "node ./scripts/sync-node-types.js"
     },
     "dependencies": {
         "@headlessui/vue": "^1.7.10",
@@ -27,36 +28,37 @@
     },
     "peerDependencies": {
         "@heroicons/vue": "^2.0.16",
-        "vue": "^3.2.36"
+        "vue": "^3.5.0"
     },
     "devDependencies": {
         "@babel/cli": "^7.21.0",
         "@babel/core": "^7.21.3",
-        "@intlify/unplugin-vue-i18n": "^0.8.2",
-        "@rushstack/eslint-patch": "^1.2.0",
+        "@intlify/unplugin-vue-i18n": "^11.0.3",
+        "@rushstack/eslint-patch": "^1.15.0",
         "@tailwindcss/forms": "^0.5.3",
         "@types/jsdom": "^21.1.0",
-        "@types/node": "^18.14.0",
-        "@vitejs/plugin-vue": "^4.0.0",
-        "@vitejs/plugin-vue-jsx": "^3.0.0",
+        "@types/node": "^24",
+        "@vitejs/plugin-vue": "^6.0.3",
+        "@vitejs/plugin-vue-jsx": "^5.1.2",
         "@vue/babel-plugin-jsx": "^1.1.1",
-        "@vue/eslint-config-prettier": "^7.1.0",
-        "@vue/eslint-config-typescript": "^11.0.2",
+        "@vue/eslint-config-prettier": "^10.2.0",
+        "@vue/eslint-config-typescript": "^14.6.0",
         "@vue/test-utils": "^2.3.0",
-        "@vue/tsconfig": "^0.1.3",
+        "@vue/tsconfig": "^0.5.1",
         "autoprefixer": "^10.4.13",
-        "eslint": "^8.34.0",
-        "eslint-plugin-vue": "^9.9.0",
+        "eslint": "^9.17.0",
+        "eslint-plugin-vue": "^10.6.2",
         "jsdom": "^21.1.0",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.21",
-        "prettier": "^2.8.4",
+        "prettier": "^3.0.0",
         "tailwindcss": "^3.2.7",
-        "typescript": "^4.9.5",
-        "vite": "^4.1.3",
-        "vitest": "^0.28.5",
+        "typescript": "~5.5.4",
+        "vite": "^7.3.0",
+        "vitest": "^4.0.15",
+        "vue": "^3.5.25",
         "vue-i18n": "^9.2.2",
         "vue-router": "^4.1.6",
-        "vue-tsc": "^1.1.5"
+        "vue-tsc": "^3.1.8"
     }
 }

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

package/scripts/build-lib.sh

@@ -0,0 +1,52 @@
+#!/usr/bin/env bash
+# Exit on error
+set -e
+# Remove lib folder
+echo "Removing ./lib folder."
+rm -rf ./lib 
+
+# Compile typescript code to javascript code
+echo "Compiling typescript code with tsconfig.lib.json."
+tsc --project tsconfig.lib.json 
+
+# Move lib two directories up
+echo "Cleaning up ./lib directory."
+if [ ! -d "./lib/src/lib" ]; then
+    echo "Error: ./lib/src/lib directory not found after compilation"
+    exit 1
+fi
+mv ./lib/src/lib/* ./lib 
+
+# Remove unused files
+rm -rf ./lib/src
+rm -f ./lib/tsconfig.lib.tsbuildinfo 
+
+# Move all css files from components to lib
+echo "Copying .css files from the components folder."
+if ls ./src/lib/components/*.css 1> /dev/null 2>&1; then
+    cp ./src/lib/components/*.css ./lib/components
+else
+    echo "Warning: No CSS files found in ./src/lib/components/"
+fi
+
+# Transpile jsx files to js with babel
+echo "Using Babel to transpile jsx."
+BABEL_OUTPUT=$(./node_modules/.bin/babel lib --out-dir lib 2>&1)
+BABEL_EXIT_CODE=$?
+echo "$BABEL_OUTPUT"
+
+# Check if Babel command succeeded
+if [ $BABEL_EXIT_CODE -ne 0 ]; then
+    echo "Error: Babel transpilation failed with exit code $BABEL_EXIT_CODE"
+    exit $BABEL_EXIT_CODE
+fi
+
+# Optionally, check if any .js files were produced
+if ! find ./lib -name "*.js" -type f | grep -q .; then
+    echo "Error: No .js files produced by Babel transpilation"
+    exit 1
+fi
+
+find ./lib -name "*.jsx" -type f -delete
+
+echo "Build completed successfully!"

package/scripts/sync-node-types.js

@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+
+const fs = require('fs')
+const path = require('path')
+
+const rootDir = path.join(__dirname, '..')
+const nvmrcPath = path.join(rootDir, '.nvmrc')
+const packageJsonPath = path.join(rootDir, 'package.json')
+
+// Read .nvmrc
+if (!fs.existsSync(nvmrcPath)) {
+    console.error('Error: .nvmrc file not found')
+    process.exit(1)
+}
+
+const nvmrcContent = fs.readFileSync(nvmrcPath, 'utf8').trim()
+
+// Extract major version from .nvmrc
+// Supports formats like: "24", "v24", "24.12.0", "lts/iron", etc.
+let nodeMajorVersion
+
+if (nvmrcContent.startsWith('lts/')) {
+    // Map LTS names to major versions
+    const ltsMap = {
+        krypton: '24',
+        jod: '22',
+        iron: '20',
+        hydrogen: '18',
+        gallium: '16',
+        fermium: '14',
+    }
+    const ltsName = nvmrcContent.replace('lts/', '').toLowerCase()
+    nodeMajorVersion = ltsMap[ltsName]
+    if (!nodeMajorVersion) {
+        console.error(`Error: Unknown LTS name "${ltsName}"`)
+        process.exit(1)
+    }
+} else {
+    // Extract numeric version
+    const versionMatch = nvmrcContent.match(/^v?(\d+)/)
+    if (!versionMatch) {
+        console.error(`Error: Could not extract Node version from .nvmrc: "${nvmrcContent}"`)
+        process.exit(1)
+    }
+    nodeMajorVersion = versionMatch[1]
+}
+
+console.log(`Node version from .nvmrc: ${nodeMajorVersion}`)
+
+// Read package.json
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))
+
+// Check current @types/node version
+const currentTypesNode = packageJson.devDependencies?.['@types/node']
+const desiredTypesNode = `^${nodeMajorVersion}`
+
+if (currentTypesNode === desiredTypesNode) {
+    console.log(`✓ @types/node is already set to ${desiredTypesNode}`)
+    process.exit(0)
+}
+
+console.log(`Updating @types/node from ${currentTypesNode} to ${desiredTypesNode}`)
+
+// Update package.json
+packageJson.devDependencies['@types/node'] = desiredTypesNode
+
+// Write back to package.json
+fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n', 'utf8')
+
+console.log('✓ package.json updated. Run `npm install` to install the correct @types/node version.')

package/src/demo/App.css

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    body {
+        @apply text-default-900;
+    }
+}

package/src/demo/App.tsx

@@ -0,0 +1,5 @@
+import { createView } from '@/lib/utils/component'
+import { RouterView } from 'vue-router'
+import './App.css'
+
+export default createView('App', () => () => <RouterView />)

package/src/demo/components/ColorGrid.tsx

@@ -0,0 +1,26 @@
+import { createComponent } from '@/lib/utils/component'
+import { computed, type PropType } from 'vue'
+import ComponentGrid, { componentGridProps } from '@/demo/components/ComponentGrid'
+
+export const colorGridProps = {
+    ...componentGridProps,
+    colors: {
+        type: Number,
+        default: 6,
+    },
+    item: Function as PropType<(color: string, index: number) => JSX.Element>,
+} as const
+
+export default createComponent('ColorGrid', colorGridProps, props => {
+    const colors = ['primary', 'secondary', 'green', 'red', 'yellow', 'default']
+
+    const selectedColors = computed(() => colors.slice(0, props.colors))
+
+    return () => (
+        <ComponentGrid cols={props.cols}>
+            {selectedColors.value.map((color, index) => (
+                <div class="flex">{props.item?.(color, index)}</div>
+            ))}
+        </ComponentGrid>
+    )
+})

package/src/demo/components/ComponentGrid.tsx

@@ -0,0 +1,26 @@
+import { createComponent } from '@/lib/utils/component'
+import { computed, type PropType } from 'vue'
+
+export const componentGridProps = {
+    cols: {
+        type: Number as PropType<2 | 4 | 6 | 8>,
+        default: 6,
+    },
+} as const
+
+export default createComponent('ComponentGrid', componentGridProps, (props, { slots }) => {
+    const classes = computed(() => {
+        switch (props.cols) {
+            case 2:
+                return 'grid-cols-1 sm:grid-cols-2'
+            case 4:
+                return 'grid-cols-2 sm:grid-cols-4'
+            case 8:
+                return 'grid-cols-4 sm:grid-cols-8'
+            default:
+                return 'grid-cols-3 sm:grid-cols-6'
+        }
+    })
+
+    return () => <div class={`grid gap-4 ${classes.value}`}>{slots.default?.()}</div>
+})

package/src/demo/components/ComponentSection.tsx

@@ -0,0 +1,30 @@
+import { createComponent } from '@/lib/utils/component'
+import { LinkIcon } from '@heroicons/vue/24/solid'
+import { RouterLink } from 'vue-router'
+
+export const componentSectionProps = {
+    id: String,
+    title: String,
+    subtitle: String,
+} as const
+
+export default createComponent('ComponentSection', componentSectionProps, (props, { slots }) => {
+    return () => (
+        <div class="border-b-2 border-default-200" id={props.id}>
+            <div>
+                <div class="px-8 py-10 max-w-4xl mx-auto">
+                    <RouterLink to={{ hash: props.id ? `#${props.id}` : undefined }} class="group outline-none">
+                        <h2 class="font-bold text-4xl mb-2 flex items-center space-x-2 ">
+                            <span>{props.title}</span>
+                            <LinkIcon class="h-8 w-8 text-default-900 opacity-30 hidden group-hover:block group-focus-visible:block" />
+                        </h2>
+                    </RouterLink>
+                    <p class="text-default-500 text-xl font-light">{props.subtitle}</p>
+                </div>
+            </div>
+            <div class="bg-default-50">
+                <div class="px-8 pt-10 pb-20 space-y-8 max-w-4xl mx-auto">{slots.default?.()}</div>
+            </div>
+        </div>
+    )
+})

package/src/demo/components/VariantSection.tsx

@@ -0,0 +1,18 @@
+import { createComponent } from '@/lib/utils/component'
+
+export const variantSectionProps = {
+    title: String,
+    subtitle: String,
+} as const
+
+export default createComponent('VariantSection', variantSectionProps, (props, { slots }) => {
+    return () => (
+        <div>
+            <div class="mb-6">
+                <h3 class="text-lg font-medium text-default-700"> {props.title} </h3>
+                {props.subtitle && <p class="text-default-500 text-sm"> {props.subtitle} </p>}
+            </div>
+            <div class="border-2 border-dashed rounded-lg p-8 border-default-200 bg-white">{slots.default?.()}</div>
+        </div>
+    )
+})

package/src/demo/i18n/de.ts

@@ -0,0 +1,7 @@
+import vueCollection from '@/lib/i18n/de/vue-collection.json'
+
+const de = {
+    ['vue-collection']: vueCollection,
+}
+
+export default de

package/src/demo/i18n/en.ts

@@ -0,0 +1,7 @@
+import vueCollection from '@/lib/i18n/en/vue-collection.json'
+
+const en = {
+    ['vue-collection']: vueCollection,
+}
+
+export default en

package/src/demo/i18n/index.ts

@@ -0,0 +1,24 @@
+import en from './en'
+import de from './de'
+import { createI18n } from 'vue-i18n'
+import { registerTranslationProvider } from '@/lib/i18n'
+
+export const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: {
+        en,
+        de,
+    },
+})
+
+registerTranslationProvider({
+    trsl(key, params) {
+        return i18n.global.t(key, params == null ? {} : params)
+    },
+    trslc(key, count, params) {
+        const newCount = count ?? 0
+        const newParams = { n: newCount, ...params }
+        return i18n.global.t(key, newParams, { plural: newCount })
+    },
+})

package/src/demo/main.ts

@@ -0,0 +1,13 @@
+import { createApp } from 'vue'
+import App from './App'
+import router from './router'
+import { addDocumentResizeEventListener } from '@/lib/utils/breakpoints'
+import { i18n } from './i18n'
+
+addDocumentResizeEventListener()
+
+const app = createApp(App)
+app.use(router)
+app.use(i18n)
+
+app.mount('#app')

package/src/demo/router/index.ts

@@ -0,0 +1,21 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+    history: createWebHistory(import.meta.env.BASE_URL),
+    scrollBehavior: to => {
+        if (to.hash) {
+            return {
+                el: to.hash,
+            }
+        }
+    },
+    routes: [
+        {
+            path: '/',
+            name: 'home',
+            component: () => import('../views/HomeView'),
+        },
+    ],
+})
+
+export default router

package/src/demo/views/HomeView.tsx

@@ -0,0 +1,94 @@
+import ModalView from './presentation/ModalView'
+import { createView } from '@/lib/utils/component'
+import AlertView from './presentation/AlertView'
+import BadgeView from './presentation/BadgeView'
+import ButtonView from './presentation/ButtonView'
+import CheckboxView from './presentation/CheckboxView'
+import IconButtonView from './presentation/IconButtonView'
+import DropdownView from './presentation/DropdownView'
+import IconCircleView from './presentation/IconCircleView'
+import InputView from './presentation/InputView'
+import ListView from './presentation/ListView'
+import LoadingIndicatorView from './presentation/LoadingIndicatorView'
+import PaginationView from './presentation/PaginationView'
+import SearchbarView from './presentation/SearchbarView'
+import TableView from './presentation/TableView'
+import NavigationView from './NavigationView'
+import { RouterLink } from 'vue-router'
+import { ChevronDoubleUpIcon } from '@heroicons/vue/24/solid'
+import { ref, Transition } from 'vue'
+import NBadge from '@/lib/components/NBadge'
+import LinkView from './presentation/LinkView'
+import BreadcrumbView from './presentation/BreadcrumbView'
+import TooltipView from './presentation/TooltipView'
+import DropzoneView from './presentation/DropzoneView'
+
+export default createView('HomeView', () => {
+    const showButton = ref(false)
+    window.onscroll = () => {
+        const treshhold = 1000
+        showButton.value = document.documentElement.scrollTop > treshhold || document.body.scrollTop > treshhold
+    }
+
+    return () => (
+        <div>
+            <div class="bg-gradient-to-r from-primary-500/70 to-white">
+                <div
+                    class="bg-gradient-to-b from-default-300/80 to-default-50 border-b-2 border-default-200 z-50"
+                    id="overview"
+                >
+                    <div class="px-8 py-20 min-h-screen m-auto text-center max-w-4xl flex items-center justify-center flex-col">
+                        <h1 class="text-6xl font-semibold mb-8">Vue Collection</h1>
+                        <p class="text-3xl font-light text-default-500">
+                            Styled and fully functional components created by naptics.
+                        </p>
+                        <NavigationView class="mt-16" />
+                    </div>
+                </div>
+            </div>
+
+            <div class="space-y-10">
+                <AlertView />
+                <ButtonView />
+                <IconButtonView />
+                <LinkView />
+                <IconCircleView />
+                <BadgeView />
+                <BreadcrumbView />
+                <CheckboxView />
+                <DropdownView />
+                <InputView />
+                <SearchbarView />
+                <LoadingIndicatorView />
+                <ModalView />
+                <ListView />
+                <TableView />
+                <TooltipView />
+                <PaginationView />
+                <DropzoneView />
+            </div>
+
+            <Transition
+                enterActiveClass="transition duration-400"
+                enterFromClass="opacity-0"
+                enterToClass="opacity-100"
+                leaveActiveClass="transition duration-400"
+                leaveFromClass="opacity-100"
+                leaveToClass="opacity-0"
+            >
+                {showButton.value && (
+                    <div class="fixed z-20 bottom-4 right-4">
+                        <RouterLink to={{ hash: '#overview' }}>
+                            <NBadge textSize="text-base" allCaps={false}>
+                                <div class="flex items-center space-x-2">
+                                    <span>Overview</span>
+                                    <ChevronDoubleUpIcon class="h-5 w-5" />
+                                </div>
+                            </NBadge>
+                        </RouterLink>
+                    </div>
+                )}
+            </Transition>
+        </div>
+    )
+})

package/src/demo/views/NavigationView.tsx

@@ -0,0 +1,43 @@
+import NBadge from '@/lib/components/NBadge'
+import { createView } from '@/lib/utils/component'
+import { RouterLink } from 'vue-router'
+
+export default createView('NavigationView', () => {
+    const sections = [
+        { hash: 'alerts', label: 'Alerts' },
+        { hash: 'buttons', label: 'Buttons' },
+        { hash: 'icon-buttons', label: 'Icon Buttons' },
+        { hash: 'links', label: 'Links' },
+        { hash: 'icon-circles', label: 'Icon Circles' },
+        { hash: 'badges', label: 'Badges' },
+        { hash: 'breadcrumbs', label: 'Breadcrumbs' },
+        { hash: 'checkboxes', label: 'Checkboxes' },
+        { hash: 'dropdowns', label: 'Dropdowns' },
+        { hash: 'inputs', label: 'Inputs and Forms' },
+        { hash: 'searchbars', label: 'Searchbars' },
+        { hash: 'loading-indicators', label: 'Loading Indicators' },
+        { hash: 'modals', label: 'Modals' },
+        { hash: 'lists', label: 'Lists' },
+        { hash: 'tables', label: 'Tables' },
+        { hash: 'tooltips', label: 'Tooltips' },
+        { hash: 'pagination', label: 'Pagination' },
+        { hash: 'dropzones', label: 'Dropzones' },
+    ]
+
+    return () => (
+        <div>
+            <div class="flex flex-wrap gap-6 justify-center">
+                {sections.map(section => (
+                    <RouterLink
+                        to={{ hash: `#${section.hash}` }}
+                        class="outline-none focus-visible:ring-2 focus-visible ring-primary-500 rounded-md"
+                    >
+                        <NBadge color="primary" allCaps={false} textSize="text-2xl">
+                            {section.label}
+                        </NBadge>
+                    </RouterLink>
+                ))}
+            </div>
+        </div>
+    )
+})

package/src/demo/views/presentation/AlertView.tsx

@@ -0,0 +1,40 @@
+import type { AlertVariant } from '@/lib/components/NAlert'
+import NAlert from '@/lib/components/NAlert'
+import ComponentGrid from '@/demo/components/ComponentGrid'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import { createView } from '@/lib/utils/component'
+
+export default createView('AlertView', () => {
+    const variants: AlertVariant[] = ['success', 'info', 'warning', 'error']
+
+    return () => (
+        <ComponentSection
+            title="Alerts"
+            id="alerts"
+            subtitle="Alerts can be used directly in a view or they can appear at a fixed position as a notification."
+        >
+            <VariantSection title="Normal Alerts">
+                <ComponentGrid cols={2}>
+                    {variants.map(variant => (
+                        <NAlert variant={variant} text="Hello, this is an important Alert." />
+                    ))}
+                </ComponentGrid>
+            </VariantSection>
+
+            <VariantSection title="Hide Dismiss Button">
+                <ComponentGrid cols={2}>
+                    {variants.slice(0, 2).map(variant => (
+                        <NAlert variant={variant} hideX text="This is undismissable." />
+                    ))}
+                </ComponentGrid>
+            </VariantSection>
+
+            <VariantSection title="Loading Alert">
+                <ComponentGrid cols={2}>
+                    <NAlert variant="loading">The file is currently downloading...</NAlert>
+                </ComponentGrid>
+            </VariantSection>
+        </ComponentSection>
+    )
+})

package/src/demo/views/presentation/BadgeView.tsx

@@ -0,0 +1,61 @@
+import NBadge from '@/lib/components/NBadge'
+import ColorGrid from '@/demo/components/ColorGrid'
+import ComponentGrid from '@/demo/components/ComponentGrid'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import { createView } from '@/lib/utils/component'
+
+export default createView('BadgeView', () => {
+    const textSizes = ['text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl']
+    const shades = [100, 200, 400, 600, 800, 900]
+    const textShades = [900, 900, 900, 50, 50, 50]
+
+    return () => (
+        <ComponentSection
+            title="Badges"
+            subtitle="Badges wrap a small text. They come in multiple sizes, colors and shades."
+            id="badges"
+        >
+            <VariantSection title="Default Size">
+                <ColorGrid item={color => <NBadge color={color}>naptics</NBadge>} />
+            </VariantSection>
+
+            <VariantSection title="With lowercase">
+                <ColorGrid
+                    item={color => (
+                        <NBadge color={color} allCaps={false}>
+                            Hello World
+                        </NBadge>
+                    )}
+                />
+            </VariantSection>
+
+            <VariantSection
+                title="Different Text Sizes"
+                subtitle="All text-sizes from text-xs to text-2xl are available."
+            >
+                <ComponentGrid>
+                    {textSizes.map(size => (
+                        <div class="flex justify-start items-center">
+                            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+                            <NBadge text="Sizes" textSize={size as any} />
+                        </div>
+                    ))}
+                </ComponentGrid>
+            </VariantSection>
+
+            <VariantSection
+                title="Different Shades"
+                subtitle="The shade of the background and the shade of the text can be adjusted individually."
+            >
+                <ComponentGrid>
+                    {shades.map((shade, index) => (
+                        <div class="flex">
+                            <NBadge text="Shades" color="secondary" shade={shade} textShade={textShades[index]} />
+                        </div>
+                    ))}
+                </ComponentGrid>
+            </VariantSection>
+        </ComponentSection>
+    )
+})