@naptics/vue-collection 0.2.15 → 0.3.0

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>
+    )
+})

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

@@ -0,0 +1,52 @@
+import NBreadcrub, { type BreadcrumbItem } from '@/lib/components/NBreadcrub'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import { createView } from '@/lib/utils/component'
+import { ChevronDoubleRightIcon } from '@heroicons/vue/24/solid'
+
+export default createView('BreadcrumbView', () => {
+    const breadcrumbItems: BreadcrumbItem[] = [
+        { label: 'Overview', route: '/' },
+        { label: 'Customers', route: '/' },
+        { label: 'Customer Details', route: '/' },
+        { label: 'Edit Customer', route: '/' },
+    ]
+
+    return () => (
+        <ComponentSection
+            id="breadcrumbs"
+            title="Breadcrumbs"
+            subtitle="Breadcrumbs can be used as a navigation in hierarchical views."
+        >
+            <VariantSection
+                title="Default Breadcrumb"
+                subtitle="Without any customization the default breadcrumb looks like this."
+            >
+                <NBreadcrub items={breadcrumbItems} />
+            </VariantSection>
+
+            <VariantSection title="Different Icon" subtitle="Any icon can be chosen as the sepeartor.">
+                <NBreadcrub items={breadcrumbItems} iconSize={4} icon={ChevronDoubleRightIcon} />
+            </VariantSection>
+
+            <VariantSection
+                title="Customize everthing"
+                subtitle="The color and size of the text and icons can be customized. Additionally the items and the sepeators have custom slots."
+            >
+                <NBreadcrub
+                    items={breadcrumbItems}
+                    color="secondary"
+                    textSize="text-lg"
+                    seperator={() => (
+                        <button
+                            class="text-secondary-500 text-sm font-semibold mx-3"
+                            onClick={() => window.alert('You found the custom button seperator 🕵🏽‍♂️')}
+                        >
+                            /
+                        </button>
+                    )}
+                />
+            </VariantSection>
+        </ComponentSection>
+    )
+})

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

@@ -0,0 +1,49 @@
+import { createView } from '@/lib/utils/component'
+import NButton from '@/lib/components/NButton'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import ColorGrid from '@/demo/components/ColorGrid'
+
+export default createView('ButtonView', () => {
+    return () => (
+        <ComponentSection
+            title="Buttons"
+            subtitle="The basic building block of all our apps. They can have two sizes and different colors."
+            id="buttons"
+        >
+            <VariantSection title="Normal">
+                <ColorGrid item={color => <NButton color={color}>Click me</NButton>} />
+            </VariantSection>
+
+            <VariantSection title="Small">
+                <ColorGrid
+                    item={color => (
+                        <NButton color={color} small>
+                            Click me
+                        </NButton>
+                    )}
+                />
+            </VariantSection>
+
+            <VariantSection title="Disabled">
+                <ColorGrid
+                    item={color => (
+                        <NButton color={color} disabled>
+                            Click me
+                        </NButton>
+                    )}
+                />
+            </VariantSection>
+
+            <VariantSection title="Loading">
+                <ColorGrid
+                    item={color => (
+                        <NButton color={color} loading>
+                            Click me
+                        </NButton>
+                    )}
+                />
+            </VariantSection>
+        </ComponentSection>
+    )
+})

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

@@ -0,0 +1,59 @@
+import NCheckbox from '@/lib/components/NCheckbox'
+import NCheckboxLabel from '@/lib/components/NCheckboxLabel'
+import ColorGrid from '@/demo/components/ColorGrid'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import { createView } from '@/lib/utils/component'
+import { ref } from 'vue'
+import { vModelForRef } from '@/lib/utils/vModel'
+
+export default createView('CheckboxView', () => {
+    const refs = Array.from({ length: 6 }, () => ref(true))
+
+    return () => (
+        <ComponentSection
+            title="Checkboxes"
+            subtitle="Checkboxes come in different colors and can be used on their own or together with labels."
+            id="checkboxes"
+        >
+            <VariantSection title="On their own">
+                <ColorGrid item={(color, idx) => <NCheckbox color={color} {...vModelForRef(refs[idx])} />} />
+            </VariantSection>
+
+            <VariantSection title="Disabled">
+                <ColorGrid item={(color, idx) => <NCheckbox color={color} {...vModelForRef(refs[idx])} disabled />} />
+            </VariantSection>
+
+            <VariantSection title="With labels" subtitle="Checkboxes can also be toggled by clicking on the texts.">
+                <ColorGrid
+                    colors={2}
+                    cols={2}
+                    item={(color, idx) => (
+                        <NCheckboxLabel
+                            color={color}
+                            {...vModelForRef(refs[idx])}
+                            title="Choose Option"
+                            description="This option will provide many advantages. For example the checkbox will be very beautifully enlightened."
+                        />
+                    )}
+                />
+            </VariantSection>
+
+            <VariantSection title="Disabled with labels">
+                <ColorGrid
+                    colors={2}
+                    cols={2}
+                    item={(color, idx) => (
+                        <NCheckboxLabel
+                            color={color}
+                            {...vModelForRef(refs[idx])}
+                            title="Choose Option"
+                            description="This option will provide many advantages."
+                            disabled
+                        />
+                    )}
+                />
+            </VariantSection>
+        </ComponentSection>
+    )
+})

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

@@ -0,0 +1,59 @@
+import NDropdown, { type DropdownItem } from '@/lib/components/NDropdown'
+import ComponentGrid from '@/demo/components/ComponentGrid'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import { createView } from '@/lib/utils/component'
+import { ArrowDownOnSquareIcon, ShareIcon } from '@heroicons/vue/24/solid'
+
+export default createView('DropdownView', () => {
+    const base: DropdownItem[] = [{ label: 'Save File' }, { label: 'Share File' }]
+    const multiple: DropdownItem[][] = [base, [{ label: 'Logout', route: '/logout' }, { label: 'Profile' }]]
+    const icons: DropdownItem[] = [
+        { label: 'Save File', icon: ArrowDownOnSquareIcon },
+        { label: 'Share File', icon: ShareIcon, route: '/share' },
+    ]
+
+    const links: DropdownItem[][] = [
+        [{ label: 'Normal Action' }],
+        [
+            { label: 'Route', route: '/link' },
+            { label: 'Other Route', route: '/link2' },
+        ],
+    ]
+
+    return () => (
+        <ComponentSection
+            title="Dropdowns"
+            subtitle="Dropdowns can be used to group multiple actions together."
+            id="dropdowns"
+        >
+            <VariantSection
+                title="Different Contents"
+                subtitle="The content can be selected using the mouse or the arrow keys. The items can either trigger an action or be a router link."
+            >
+                <ComponentGrid cols={4}>
+                    <NDropdown title="Basic Dropdown" items={base} />
+                    <NDropdown title="Multiple Sections" items={multiple} />
+                    <NDropdown title="Action Icons" items={icons} />
+                    <NDropdown title="Router Links" items={links} />
+                </ComponentGrid>
+            </VariantSection>
+
+            <VariantSection
+                title="Customization"
+                subtitle="Dropdowns can be disabled and configured to be right aligned. For further customized there is a slot for a custom button."
+            >
+                <ComponentGrid cols={4}>
+                    <NDropdown title="Disabled" disabled />
+                    <NDropdown title="Right Aligned" right items={base} />
+                    <div class="flex items-center justify-center">
+                        <NDropdown
+                            items={base}
+                            button={HeadlessButton => <HeadlessButton> Custom Button</HeadlessButton>}
+                        />
+                    </div>
+                </ComponentGrid>
+            </VariantSection>
+        </ComponentSection>
+    )
+})

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

@@ -0,0 +1,39 @@
+import NDropzone from '@/lib/components/NDropzone'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import { createView } from '@/lib/utils/component'
+import { ref } from 'vue'
+import { vModelForRef } from '@/lib/utils/vModel'
+
+export default createView('DropzoneView', () => {
+    const fileRefs = Array.from({ length: 5 }).map(() => ref<File[]>([]))
+
+    return () => (
+        <ComponentSection
+            title="Dropzones"
+            subtitle="Dropzones are a simple way for the user to provide files to the application."
+            id="dropzones"
+        >
+            <VariantSection title="Basic" subtitle="Files can be added by clicking on the area or by dropping them.">
+                <NDropzone {...vModelForRef(fileRefs[0])} maxLengthFileNames={50} />
+            </VariantSection>
+
+            <VariantSection title="Multiple files">
+                <NDropzone {...vModelForRef(fileRefs[1])} maxFiles={10} />
+            </VariantSection>
+
+            <VariantSection
+                title="File Type and Size"
+                subtitle="The allowed file types and their maximum size can be specified."
+            >
+                <NDropzone
+                    {...vModelForRef(fileRefs[2])}
+                    maxFiles={5}
+                    accept="image/*, .pdf, .zip"
+                    maxFileSize={5 * 1024 * 1024}
+                    description="Files of type .pdf or .zip and all image files with a max size of 5 MB are allowed."
+                />
+            </VariantSection>
+        </ComponentSection>
+    )
+})

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

@@ -0,0 +1,47 @@
+import NIconButton from '@/lib/components/NIconButton'
+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'
+import {
+    CogIcon,
+    CreditCardIcon,
+    EyeIcon,
+    KeyIcon,
+    PencilIcon,
+    RssIcon,
+    ArrowTopRightOnSquareIcon,
+    ChevronDoubleRightIcon,
+} from '@heroicons/vue/24/solid'
+
+export default createView('IconButtonView', () => {
+    const icons = [CogIcon, RssIcon, KeyIcon, CreditCardIcon, PencilIcon, EyeIcon]
+    const sizes = [4, 5, 6, 7, 8, 10]
+
+    return () => (
+        <ComponentSection
+            title="Icon Buttons"
+            subtitle="Icon Buttons are regular buttons which just have an icon and no text."
+            id="icon-buttons"
+        >
+            <VariantSection title="Different Colors">
+                <ColorGrid item={(color, index) => <NIconButton icon={icons[index]} color={color} />} />
+            </VariantSection>
+
+            <VariantSection title="Different Sizes">
+                <ComponentGrid>
+                    {sizes.map(size => (
+                        <div class="flex items-center justify-start">
+                            <NIconButton icon={ChevronDoubleRightIcon} size={size} />
+                        </div>
+                    ))}
+                </ComponentGrid>
+            </VariantSection>
+
+            <VariantSection title="Router Links" subtitle="The Icon Button can also be used as a regular router link.">
+                <ColorGrid item={color => <NIconButton icon={ArrowTopRightOnSquareIcon} route="/" color={color} />} />
+            </VariantSection>
+        </ComponentSection>
+    )
+})

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

@@ -0,0 +1,38 @@
+import NIconCircle from '@/lib/components/NIconCircle'
+import ComponentGrid from '@/demo/components/ComponentGrid'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import { createView } from '@/lib/utils/component'
+import { FireIcon } from '@heroicons/vue/24/solid'
+
+export default createView('IconCircleView', () => {
+    return () => (
+        <ComponentSection title="Icon Circles" subtitle="Just a regular icon in a circle." id="icon-circles">
+            <VariantSection
+                title="Unlimited possibilities"
+                subtitle="The color, circle size, icon size and the shades of icon and background can be customized."
+            >
+                <ComponentGrid>
+                    <div class="flex items-center">
+                        <NIconCircle icon={FireIcon} />
+                    </div>
+                    <div class="flex items-center">
+                        <NIconCircle icon={FireIcon} color="red" />
+                    </div>
+                    <div class="flex items-center">
+                        <NIconCircle icon={FireIcon} color="red" bgShade={700} iconShade={50} />
+                    </div>
+                    <div class="flex items-center">
+                        <NIconCircle icon={FireIcon} color="red" circleSize={16} iconSize={4} />
+                    </div>
+                    <div class="flex items-center">
+                        <NIconCircle icon={FireIcon} color="red" circleSize={16} iconSize={14} />
+                    </div>
+                    <div class="flex items-center">
+                        <NIconCircle icon={FireIcon} color="red" iconSize={6} />
+                    </div>
+                </ComponentGrid>
+            </VariantSection>
+        </ComponentSection>
+    )
+})