@naptics/vue-collection 0.2.15 → 0.3.0

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

@@ -0,0 +1,179 @@
+import NButton from '@/lib/components/NButton'
+import NForm from '@/lib/components/NForm'
+import NInput from '@/lib/components/NInput'
+import NSelect from '@/lib/components/NSelect'
+import NValInput from '@/lib/components/NValInput'
+import { createValidatedForm } from '@/lib/components/ValidatedForm'
+import ComponentGrid from '@/demo/components/ComponentGrid'
+import ComponentSection from '@/demo/components/ComponentSection'
+import VariantSection from '@/demo/components/VariantSection'
+import { email, matches, password, regex, integer, numberRange, length } from '@/lib/utils/validation'
+import { createView } from '@/lib/utils/component'
+import { ref } from 'vue'
+import NInputSelect from '@/lib/components/NInputSelect'
+import NInputSuggestion from '@/lib/components/NInputSuggestion'
+import NInputPhone from '@/lib/components/NInputPhone'
+import { vModelForRef } from '@/lib/utils/vModel'
+import NTextArea from '@/lib/components/NTextArea'
+
+export default createView('InputView', () => {
+    const suggestions = [
+        { id: '1', label: 'Heidi Klum' },
+        { id: '2', label: 'Frida Kahlo' },
+        { id: '3', label: 'Berta Meier' },
+        { id: '4', label: 'Mike Müller' },
+        { id: '5', label: 'Hans Peter' },
+        { id: '6', label: 'Franz Weber' },
+        { id: '7', label: 'Franziska Weberin' },
+        { id: '8', label: 'Angela Merkel' },
+    ]
+
+    const refs = Array.from({ length: 21 }, () => ref(''))
+
+    function vModel(n: number) {
+        return vModelForRef(refs[n])
+    }
+
+    const form = createValidatedForm()
+    const onSubmit = () => alert('Form was submitted!')
+
+    const showDynamicInput = ref(true)
+
+    return () => (
+        <ComponentSection
+            title="Inputs and Forms"
+            subtitle="Handle user input well with these inputs and forms."
+            id="inputs"
+        >
+            <VariantSection
+                title="Plain HTML"
+                subtitle="Wherever it is possible, the html features are used. The inputs can be selected by specifying the type attribute."
+            >
+                <NForm>
+                    <ComponentGrid cols={2}>
+                        <NInput {...vModel(0)} name="Name" />
+                        <NInput {...vModel(1)} name="Age" type="number" />
+                        <NInput {...vModel(2)} name="Password" type="password" />
+                        <div class="space-y-2">
+                            <NSelect
+                                {...vModel(3)}
+                                name="Country"
+                                optional
+                                options={[
+                                    { id: 'ch', label: 'Switzerland' },
+                                    { id: 'de', label: 'Germany' },
+                                    { id: 'au', label: 'Austria' },
+                                ]}
+                            />
+                            <p class="text-xs text-default-500">{`Value of the field: ${vModel(3).value}`}</p>
+                        </div>
+                        <div class="space-y-2">
+                            <NInput {...vModel(4)} name="Date" type="date" />
+                            <p class="text-xs text-default-500">{`Value of the field: ${vModel(4).value}`}</p>
+                        </div>
+                        <div class="space-y-2">
+                            <NInput {...vModel(5)} name="Time" type="time" />
+                            <p class="text-xs text-default-500">{`Value of the field: ${vModel(5).value}`}</p>
+                        </div>
+                    </ComponentGrid>
+                </NForm>
+            </VariantSection>
+
+            <VariantSection
+                title="Input Validation"
+                subtitle="Inputs can be validated using different rules. Some inputs also implement a custom formatter, like the input for phone numbers."
+            >
+                <NForm>
+                    <ComponentGrid cols={2}>
+                        <NValInput {...vModel(15)} name="First Name" />
+                        <NValInput {...vModel(16)} name="Last Name" rules={length(2, undefined)} />
+                        <NValInput {...vModel(6)} name="Age" type="number" rules={[integer, numberRange(0, 120)]} />
+                        <NValInput {...vModel(7)} name="Email" type="email" rules={email} />
+                        <NValInput {...vModel(8)} name="Password" type="password" rules={password} />
+                        <NValInput
+                            {...vModel(9)}
+                            name="Repeat Password"
+                            type="password"
+                            rules={[matches(refs[8].value)]}
+                        />
+                        <NValInput
+                            {...vModel(10)}
+                            name="Regex"
+                            rules={regex(/^foo.*bar$/)}
+                            placeholder="Try foo...bar"
+                        />
+                        <div class="space-y-2">
+                            <NInputPhone {...vModel(11)} name="Mobile" />
+                            <p class="text-xs text-default-500">{`Value of the field: ${vModel(11).value}`}</p>
+                        </div>
+                    </ComponentGrid>
+                </NForm>
+            </VariantSection>
+
+            <VariantSection
+                title="Text Areas"
+                subtitle="If longer text is needed, the text area can be used. It provides most of the feature of a validated input."
+            >
+                <div class="space-y-4">
+                    <NTextArea
+                        {...vModel(17)}
+                        name="Resizable Text Area"
+                        placeholder="This text area can be resized with the handle with max 100 characters, which is required to fill out."
+                        maxLength={100}
+                    />
+                    <NTextArea
+                        {...vModel(18)}
+                        name="Larger Text Area"
+                        placeholder="This is a larger non-resizable optional text area."
+                        rows={5}
+                        resizable={false}
+                        optional
+                    />
+                </div>
+            </VariantSection>
+
+            <VariantSection
+                title="Suggestion Lists"
+                subtitle="The left input just shows filtered suggestions and allows any input. The right input expects the user to pick an item from the list."
+            >
+                <ComponentGrid cols={2}>
+                    <div class="space-y-2">
+                        <NInputSuggestion
+                            {...vModel(12)}
+                            suggestions={suggestions.map(sugg => sugg.label)}
+                            name="Any Person"
+                        />
+                        <p class="text-xs text-default-500">{`Value of the field: ${vModel(12).value}`}</p>
+                    </div>
+                    <div class="space-y-2">
+                        <NInputSelect {...vModel(19)} options={suggestions} name="Choose Person" />
+                        <p class="text-xs text-default-500">{`Value of the field: ${vModel(19).value}`}</p>
+                    </div>
+                </ComponentGrid>
+            </VariantSection>
+
+            <VariantSection
+                title="Forms"
+                subtitle="Validated Inputs can be added to forms. When trying to submit the form, all inputs are validated first and only if the validation succeeds, the form is submitted."
+            >
+                <NForm form={form} onSubmit={onSubmit}>
+                    <ComponentGrid cols={2}>
+                        <NValInput name="First Name" form={form} {...vModel(13)} />
+                        <NValInput name="Last name" form={form} {...vModel(14)} />
+                        {showDynamicInput.value && <NValInput name="Hello World" form={form} {...vModel(20)} />}
+
+                        <div class="flex space-x-2 items-end">
+                            <NButton
+                                color="secondary"
+                                onClick={() => (showDynamicInput.value = !showDynamicInput.value)}
+                            >
+                                Toggle Input
+                            </NButton>
+                            <NButton type="submit">Submit Form</NButton>
+                        </div>
+                    </ComponentGrid>
+                </NForm>
+            </VariantSection>
+        </ComponentSection>
+    )
+})

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

@@ -0,0 +1,50 @@
+import NLink from '@/lib/components/NLink'
+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('LinkView', () => {
+    const hi = () => window.alert('hello')
+
+    return () => (
+        <ComponentSection
+            id="links"
+            title="Links"
+            subtitle="Links are styled texts which can be used as links or regular buttons."
+        >
+            <VariantSection title="Normal Links">
+                <ComponentGrid cols={4}>
+                    <div>
+                        <NLink text="Privacy Policy" route="/" />
+                    </div>
+                    <div>
+                        <NLink text="Privacy Policy" route="/" shade={200} />
+                    </div>
+                    <div>
+                        <NLink text="Privacy Policy" route="/" color="secondary" shade={200} />
+                    </div>
+                    <div>
+                        <NLink text="Privacy Policy" route="/" color="secondary" />
+                    </div>
+                </ComponentGrid>
+            </VariantSection>
+            <VariantSection title="Button Links" subtitle="Sometimes it can be useful to style a button as a link.">
+                <ComponentGrid cols={4}>
+                    <div>
+                        <NLink text="Fake Link" onClick={hi} />
+                    </div>
+                    <div>
+                        <NLink text="Fake Link" onClick={hi} shade={200} />
+                    </div>
+                    <div>
+                        <NLink text="Fake Link" onClick={hi} color="secondary" shade={200} />
+                    </div>
+                    <div>
+                        <NLink text="Fake Link" onClick={hi} color="secondary" />
+                    </div>
+                </ComponentGrid>
+            </VariantSection>
+        </ComponentSection>
+    )
+})

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