@naptics/vue-collection 0.2.14 → 0.3.0

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

@@ -0,0 +1,29 @@
+import type { ListItem } from '@/lib/components/NList'
+import NList from '@/lib/components/NList'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import { createView } from '@/lib/utils/component'
+
+export default createView('ListView', () => {
+    const items: ListItem[] = [
+        { title: 'Name', text: 'Michael Scott' },
+        { title: 'Profession', text: 'Nerd' },
+        { title: 'Title', text: 'Dr. phil.' },
+        {
+            title: () => <span class="font-extrabold">Date Of Birth</span>,
+            text: () => <span class="text-primary-500">14.10.1982</span>,
+        },
+    ]
+
+    return () => (
+        <ComponentSection
+            title="List"
+            subtitle="A component to display key-value information in a simple and neat way."
+            id="lists"
+        >
+            <VariantSection title="Display Information">
+                <NList items={items} />
+            </VariantSection>
+        </ComponentSection>
+    )
+})

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

@@ -0,0 +1,38 @@
+import NLoadingIndicator from '@/lib/components/NLoadingIndicator'
+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('NLoadingIndicator', () => {
+    const sizes = [4, 6, 8, 10, 12, 14]
+
+    return () => (
+        <ComponentSection
+            title="Loading Indicator"
+            subtitle="A loading indicator which helps to keep the user patient."
+            id="loading-indicators"
+        >
+            <VariantSection title="Different colors and shades">
+                <ComponentGrid>
+                    <NLoadingIndicator shade={700} />
+                    <NLoadingIndicator shade={400} />
+                    <NLoadingIndicator shade={100} />
+                    <NLoadingIndicator color="secondary" shade={100} />
+                    <NLoadingIndicator color="secondary" shade={400} />
+                    <NLoadingIndicator color="secondary" shade={700} />
+                </ComponentGrid>
+            </VariantSection>
+
+            <VariantSection title="Different sizes">
+                <ComponentGrid>
+                    {sizes.map(size => (
+                        <div class="flex items-center">
+                            <NLoadingIndicator size={size} />
+                        </div>
+                    ))}
+                </ComponentGrid>
+            </VariantSection>
+        </ComponentSection>
+    )
+})

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

@@ -0,0 +1,210 @@
+import { createView } from '@/lib/utils/component'
+import { vModelForRef } from '@/lib/utils/vModel'
+import {
+    ArrowDownIcon,
+    ArrowDownRightIcon,
+    ArrowDownLeftIcon,
+    ArrowLeftIcon,
+    ArrowRightIcon,
+    ArrowUpIcon,
+    ArrowUpLeftIcon,
+    ArrowUpRightIcon,
+    NoSymbolIcon,
+    SunIcon,
+} from '@heroicons/vue/24/solid'
+import { ref } from 'vue'
+import NButton from '@/lib/components/NButton'
+import NModal from '@/lib/components/NModal'
+import ComponentGrid from '@/demo/components/ComponentGrid'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import NIconButton from '@/lib/components/NIconButton'
+import NFormModal from '@/lib/components/NFormModal'
+import { createValidatedForm } from '@/lib/components/ValidatedForm'
+import NValInput from '@/lib/components/NValInput'
+import { email } from '@/lib/utils/validation'
+import NCrudModal from '@/lib/components/NCrudModal'
+import NDialog, { type NDialogExposed } from '@/lib/components/NDialog'
+
+export default createView('ModalView', () => {
+    const refs = Array.from({ length: 14 }, () => ref(false))
+    const dialogRefs = Array.from({ length: 5 }, () => ref<NDialogExposed>())
+    const inputRefs = Array.from({ length: 4 }, () => ref(''))
+
+    function openModal(n: number) {
+        return () => (refs[n].value = true)
+    }
+
+    function openDialog(n: number) {
+        return () => dialogRefs[n].value?.show().then(result => console.log(`Dialog result: ${result}`))
+    }
+
+    function vModel(n: number) {
+        return vModelForRef(refs[n])
+    }
+
+    const form1 = createValidatedForm()
+    const form2 = createValidatedForm()
+
+    return () => (
+        <>
+            <ComponentSection
+                title="Modals and Dialogs"
+                subtitle="Useful components which come to the foreground to interact with the user."
+                id="modals"
+            >
+                <VariantSection
+                    title="Basic Modals"
+                    subtitle="Basic Modals offer a lot of configuration possibilities. The title, texts and colors of buttons as well as all actions can be configured. If this is not enough, the header, footer or the whole modal can be replaced with a custom slot."
+                >
+                    <ComponentGrid cols={4}>
+                        <NButton onClick={openModal(0)}> Basic Modal </NButton>
+                        <NButton color="secondary" onClick={openModal(1)}>
+                            Custom Header
+                        </NButton>
+                        <NButton color="blue" onClick={openModal(2)}>
+                            Custom Footer
+                        </NButton>
+                        <NButton color="red" onClick={openModal(3)}>
+                            Custom Modal
+                        </NButton>
+                    </ComponentGrid>
+                </VariantSection>
+
+                <VariantSection
+                    title="Advanced Modals"
+                    subtitle="The Advanced Modals provide utility to deal with forms. The Form Modal automatically checks the integrated form before closing. The Crud Modal adds an intergrated delete button with a dialog."
+                >
+                    <ComponentGrid cols={4}>
+                        <NButton onClick={openModal(4)}> Form Modal </NButton>
+                        <NButton color="secondary" onClick={openModal(5)}>
+                            Crud Modal
+                        </NButton>
+                    </ComponentGrid>
+                </VariantSection>
+
+                <VariantSection
+                    title="Dialogs"
+                    subtitle="Dialogs can be used to prompt the user with a yes/no - decision or to interrupt them with important information."
+                >
+                    <ComponentGrid cols={4}>
+                        <NButton color="red" onClick={openDialog(3)}>
+                            Danger Dialog
+                        </NButton>
+                        <NButton color="red" onClick={openDialog(4)}>
+                            Remove Dialog
+                        </NButton>
+                        <NButton color="yellow" onClick={openDialog(2)}>
+                            Warning Dialog
+                        </NButton>
+                        <NButton color="blue" onClick={openDialog(1)}>
+                            Info Dialog
+                        </NButton>
+                        <NButton color="green" onClick={openDialog(0)}>
+                            Success Dialog
+                        </NButton>
+                    </ComponentGrid>
+                </VariantSection>
+
+                <VariantSection title="Positioning" subtitle="Modals can be positioned vertically and horizontally.">
+                    <ComponentGrid cols={8}>
+                        <NIconButton icon={ArrowUpLeftIcon} onClick={openModal(6)} />
+                        <NIconButton icon={ArrowUpIcon} onClick={openModal(7)} />
+                        <NIconButton icon={ArrowUpRightIcon} onClick={openModal(8)} />
+                        <NIconButton icon={ArrowRightIcon} onClick={openModal(9)} />
+                        <NIconButton icon={ArrowDownRightIcon} onClick={openModal(10)} />
+                        <NIconButton icon={ArrowDownIcon} onClick={openModal(11)} />
+                        <NIconButton icon={ArrowDownLeftIcon} onClick={openModal(12)} />
+                        <NIconButton icon={ArrowLeftIcon} onClick={openModal(13)} />
+                    </ComponentGrid>
+                </VariantSection>
+            </ComponentSection>
+
+            {/* Basic Modal */}
+            <NModal {...vModel(0)} title="Basic Modal" cancelText="Bye Modal" okText="Ok Modal">
+                This is a pretty basic modal. Nothing fancy.
+            </NModal>
+
+            {/* Custom Header */}
+            <NModal {...vModel(1)} okColor="yellow" header={() => <SunIcon class="text-yellow-400 h-10 w-10" />}>
+                This modal has a custom styled header.
+            </NModal>
+
+            {/* Custom Footer */}
+            <NModal
+                {...vModel(2)}
+                title="Custom Footer"
+                footer={({ cancel }) => (
+                    <div class="flex justify-center">
+                        <NIconButton icon={NoSymbolIcon} color="red" size={7} onClick={cancel} />
+                    </div>
+                )}
+            >
+                This modal has a custom footer
+            </NModal>
+
+            {/* Custom Modal */}
+            <NModal
+                {...vModel(3)}
+                modal={({ cancel }) => (
+                    <div class="bg-red-500 p-4 shadow-red-500 text-lg text-white shadow-2xl rounded-full flex justify-between items-center">
+                        <span>Very ugly custom modal</span>
+                        <NButton color="default" onClick={cancel}>
+                            Close
+                        </NButton>
+                    </div>
+                )}
+            />
+
+            {/* Form Modal */}
+            <NFormModal {...vModel(4)} title="Form Modal" form={form1}>
+                <NValInput {...vModelForRef(inputRefs[0])} form={form1} name="Name" />
+                <NValInput {...vModelForRef(inputRefs[1])} form={form1} rules={email} name="Email" />
+            </NFormModal>
+
+            {/** Crud Modal */}
+            <NCrudModal
+                {...vModel(5)}
+                title="Crud Modal"
+                form={form2}
+                removeDialogTitle="Remove this item"
+                removeDialogText="Are you really really really sure?"
+            >
+                <NValInput {...vModelForRef(inputRefs[2])} form={form2} name="Name" />
+                <NValInput {...vModelForRef(inputRefs[3])} form={form2} rules={email} name="Email" />
+            </NCrudModal>
+
+            {/* Dialogs */}
+            <NDialog ref={dialogRefs[0]} variant="success" title="Success" text="This was a success." />
+            <NDialog ref={dialogRefs[1]} variant="info" title="Info" text="This is an info." />
+            <NDialog
+                ref={dialogRefs[2]}
+                variant="warning"
+                title="Warning"
+                text="Be careful, this is a warning with a pretty long text."
+            />
+            <NDialog
+                ref={dialogRefs[3]}
+                variant="danger"
+                title="Dangerous Action"
+                text="Would you really like to proceed."
+            />
+            <NDialog
+                ref={dialogRefs[4]}
+                variant="remove"
+                title="Delete user"
+                text="Are you sure you want to delete the user?"
+            />
+
+            {/* Positioned Modals */}
+            <NModal {...vModel(6)} title="Top Left" verticalPosition="start" horizontalPosition="start" />
+            <NModal {...vModel(7)} title="Top Center" verticalPosition="start" horizontalPosition="center" />
+            <NModal {...vModel(8)} title="Top Right" verticalPosition="start" horizontalPosition="end" />
+            <NModal {...vModel(9)} title="Center Right" verticalPosition="center" horizontalPosition="end" />
+            <NModal {...vModel(10)} title="Bottom Right" verticalPosition="end" horizontalPosition="end" />
+            <NModal {...vModel(11)} title="Bottom Center" verticalPosition="end" horizontalPosition="center" />
+            <NModal {...vModel(12)} title="Bottom Left" verticalPosition="end" horizontalPosition="start" />
+            <NModal {...vModel(13)} title="Center Left" verticalPosition="center" horizontalPosition="start" />
+        </>
+    )
+})

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

@@ -0,0 +1,25 @@
+import NPagination from '@/lib/components/NPagination'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import { createView } from '@/lib/utils/component'
+import { vModelForRef } from '@/lib/utils/vModel'
+import { ref } from 'vue'
+
+export default createView('PaginationView', () => {
+    const pageRef = ref(1)
+
+    return () => (
+        <ComponentSection
+            title="Pagination"
+            subtitle="A pagination element to use for all paged contents."
+            id="pagination"
+        >
+            <VariantSection title="Two sizes">
+                <div class="flex flex-col justify-start items-start space-y-8">
+                    <NPagination {...vModelForRef(pageRef)} total={25} />
+                    <NPagination small {...vModelForRef(pageRef)} total={25} />
+                </div>
+            </VariantSection>
+        </ComponentSection>
+    )
+})

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

@@ -0,0 +1,80 @@
+import NSearchbar from '@/lib/components/NSearchbar'
+import NSearchbarList from '@/lib/components/NSearchbarList'
+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 { vModelForRef } from '@/lib/utils/vModel'
+import { UserIcon } from '@heroicons/vue/24/solid'
+import { computed, ref } from 'vue'
+
+export default createView('SearchbarView', () => {
+    const refs = Array.from({ length: 10 }, () => ref(''))
+
+    const suggestions = [
+        { id: '1', name: 'Heidi Klum' },
+        { id: '2', name: 'Frida Kahlo' },
+        { id: '3', name: 'Berta Meier' },
+        { id: '4', name: 'Mike Müller' },
+        { id: '5', name: 'Hans Peter' },
+        { id: '6', name: 'Franz Weber' },
+        { id: '7', name: 'Franziska Weberin' },
+        { id: '8', name: 'Angela Merkel' },
+    ]
+
+    const filteredSuggestions = (n: number) => {
+        return computed(() =>
+            suggestions
+                .filter(sugg => sugg.name.toLowerCase().includes(refs[n].value.toLowerCase()))
+                .map(sugg => ({ id: sugg.id, label: sugg.name }))
+        )
+    }
+
+    function vModel(n: number) {
+        return vModelForRef(refs[n])
+    }
+
+    return () => (
+        <ComponentSection
+            title="Searchbars"
+            subtitle="Searchbars are styled inputs which can optionally provide a list of suggestions."
+            id="searchbars"
+        >
+            <VariantSection title="Simple Searchbars">
+                <ComponentGrid cols={2}>
+                    <NSearchbar placeholder="Big Searchbar" {...vModel(0)} />
+                    <NSearchbar small placeholder="Small Searchbar" {...vModel(1)} />
+                </ComponentGrid>
+            </VariantSection>
+
+            <VariantSection title="With Suggestion List" subtitle="">
+                <ComponentGrid cols={2}>
+                    <NSearchbarList {...vModel(2)} items={filteredSuggestions(2).value} placeholder="Basic List" />
+                    <NSearchbarList
+                        {...vModel(3)}
+                        items={filteredSuggestions(3).value}
+                        placeholder="Loading Indicator"
+                        loading
+                    />
+                    <NSearchbarList
+                        {...vModel(4)}
+                        items={filteredSuggestions(4).value}
+                        hideList={refs[4].value.length < 3}
+                        placeholder="Min. 3 Characters"
+                    />
+                    <NSearchbarList
+                        {...vModel(5)}
+                        items={filteredSuggestions(5).value}
+                        placeholder="Customized Items"
+                        listItem={item => (
+                            <div class="flex space-x-2 items-center justify-start">
+                                <UserIcon class="h-5 w-5 text-default-600" />
+                                <span class="text-lg text-default-700 font-medium">{item.item.label}</span>
+                            </div>
+                        )}
+                    />
+                </ComponentGrid>
+            </VariantSection>
+        </ComponentSection>
+    )
+})

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

@@ -0,0 +1,146 @@
+import NBadge from '@/lib/components/NBadge'
+import NIconButton from '@/lib/components/NIconButton'
+import NTable, { type TableHeading } from '@/lib/components/NTable'
+import NTableAction from '@/lib/components/NTableAction'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import { createView } from '@/lib/utils/component'
+import { PencilIcon, MagnifyingGlassIcon } from '@heroicons/vue/24/solid'
+
+export default createView('TableView', () => {
+    const headings: TableHeading[] = [
+        { key: 'id', label: 'ID' },
+        { key: 'username', label: 'Username', emph: true },
+        { key: 'email', label: 'Email', breakpoint: 'md' },
+        { key: 'phone', label: 'Phone', breakpoint: 'lg' },
+        { key: 'state', label: 'State', breakpoint: 'sm' },
+    ]
+
+    const details: TableHeading[] = [
+        { key: 'address', label: 'Addresse', isDetail: true },
+        { key: 'zip', label: 'PLZ', isDetail: true },
+        { key: 'place', label: 'Ort', isDetail: true },
+    ]
+
+    const data = [
+        {
+            id: 1,
+            username: 'herbert',
+            email: 'herbert@naptics.ch',
+            phone: '+41 76 810 29 21',
+            state: 'unknown',
+            address: 'Hugentoblergasse 132',
+            zip: '8400',
+            place: 'Winterthur',
+        },
+        {
+            id: 2,
+            username: 'franziska',
+            email: 'franzsika@naptics.ch',
+            phone: '+41 76 810 28 22',
+            state: 'registered',
+            address: 'Hugentoblergasse 132',
+            zip: '8400',
+            place: 'Winterthur',
+        },
+        {
+            id: 3,
+            username: 'frank',
+            email: 'frank@naptics.ch',
+            phone: '+41 76 810 27 23',
+            state: 'registered',
+            address: 'Hugentoblergasse 132',
+            zip: '8400',
+            place: 'Winterthur',
+        },
+        {
+            id: 4,
+            username: 'prünhilde',
+            email: 'pruenhilde@naptics.ch',
+            phone: '+41 76 810 26 24',
+            state: 'banned',
+            address: 'Hugentoblergasse 132',
+            zip: '8400',
+            place: 'Winterthur',
+        },
+        {
+            id: 5,
+            username: 'gertrud',
+            email: 'gertrud@naptics.ch',
+            phone: '+41 76 810 25 25',
+            state: 'registered',
+            address: 'Hugentoblergasse 132',
+            zip: '8400',
+            place: 'Winterthur',
+        },
+    ]
+
+    return () => (
+        <ComponentSection
+            title="Tables"
+            subtitle="Tables are perfect to display a lot of data in an orderly way."
+            id="tables"
+        >
+            <VariantSection
+                title="Basic Table"
+                subtitle="If nothing needs to be customized, the data can be displayed directly as text."
+            >
+                <NTable headings={headings} items={data} />
+            </VariantSection>
+
+            <VariantSection
+                title="Customization"
+                subtitle="Individual columns can be customized to use other elements."
+            >
+                <NTable
+                    headings={headings}
+                    items={data.map(item => ({
+                        ...item,
+                        state: () => (
+                            <NBadge
+                                textSize="text-xs"
+                                color={
+                                    item.state == 'registered' ? 'green' : item.state == 'banned' ? 'red' : 'default'
+                                }
+                            >
+                                {item.state}
+                            </NBadge>
+                        ),
+                    }))}
+                />
+            </VariantSection>
+
+            <VariantSection
+                title="With Details"
+                subtitle="If there is a lot of information to display, a details section can be added."
+            >
+                <NTable headings={[...headings, ...details]} items={data} />
+            </VariantSection>
+
+            <VariantSection
+                title="Actions"
+                subtitle="Table Actions can be added to either trigger an action or navigate to a route."
+            >
+                <NTable
+                    headings={headings}
+                    items={data.map(item => ({
+                        ...item,
+                        username: () => <NTableAction route={`/`} text={item.username} />,
+                        action: () => (
+                            <>
+                                <NIconButton
+                                    icon={PencilIcon}
+                                    onClick={() => alert(`You will edit ${item.username}.`)}
+                                />
+                                <NIconButton
+                                    icon={MagnifyingGlassIcon}
+                                    onClick={() => alert(`You will lookup ${item.username}.`)}
+                                />
+                            </>
+                        ),
+                    }))}
+                />
+            </VariantSection>
+        </ComponentSection>
+    )
+})

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

@@ -0,0 +1,86 @@
+import NBadge from '@/lib/components/NBadge'
+import NButton from '@/lib/components/NButton'
+import NIconButton from '@/lib/components/NIconButton'
+import NInput from '@/lib/components/NInput'
+import NTooltip from '@/lib/components/NTooltip'
+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 { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid'
+
+export default createView('TooltipView', () => {
+    return () => (
+        <ComponentSection
+            id="tooltips"
+            title="Tooltips"
+            subtitle="Tooltips can be added to all components to display small explanations or tips to the user."
+        >
+            <VariantSection
+                title="Customization"
+                subtitle="The content of a tooltip can be a simple text or there is a slot available for customization. More properties like placement, maximum width and more can be configured."
+            >
+                <ComponentGrid cols={4}>
+                    <div class="flex">
+                        <NTooltip text="Hello tooltip!">
+                            <NBadge text="Hover me" />
+                        </NTooltip>
+                    </div>
+
+                    <div class="flex">
+                        <NTooltip
+                            content={() => (
+                                <div>
+                                    <h2 class="font-medium text-base"> The importance of tooltips</h2>
+                                    <p>
+                                        Tooltips are very important as they allow the display information conditionally
+                                        on the screen.
+                                    </p>
+                                </div>
+                            )}
+                        >
+                            <NBadge text="Hover me" />
+                        </NTooltip>
+                    </div>
+
+                    <div class="flex">
+                        <NTooltip text="Tooltip placed at «top-start»." placement="top-start">
+                            <NBadge text="Hover me" />
+                        </NTooltip>
+                    </div>
+
+                    <div class="flex">
+                        <NTooltip
+                            text="I don't go away, but I am a multiline text in a tooltip. I wrap around multiple lines."
+                            placement="bottom-start"
+                        >
+                            <NBadge text="Hover me" />
+                        </NTooltip>
+                    </div>
+                </ComponentGrid>
+            </VariantSection>
+
+            <VariantSection
+                title="Out of the box"
+                subtitle="The following components contain integrated tooltips out of the box."
+            >
+                <ComponentGrid cols={4}>
+                    <div class="flex items-center">
+                        <NIconButton
+                            icon={ArrowTopRightOnSquareIcon}
+                            tooltipText="Icon Buttons have integrated tooltips."
+                        />
+                    </div>
+                    <div class="flex items-center">
+                        <NButton tooltipText="Buttons have integrated tooltips."> Button </NButton>
+                    </div>
+                    <div class="flex items-center">
+                        <NBadge text="Badge" tooltipText="Badges have integrated tooltips." />
+                    </div>
+
+                    <NInput name="Disabled" disabled tooltipText="Inputs have integrated tooltips." />
+                </ComponentGrid>
+            </VariantSection>
+        </ComponentSection>
+    )
+})