@naptics/vue-collection 0.2.15 → 0.3.0

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

package/src/lib/components/NAlert.tsx

@@ -0,0 +1,85 @@
+import type { HeroIcon } from '../utils/tailwind'
+import { createComponent } from '../utils/component'
+import { CheckCircleIcon, ExclamationCircleIcon, InformationCircleIcon, XMarkIcon } from '@heroicons/vue/24/solid'
+import { computed, type PropType } from 'vue'
+import NIconButton from './NIconButton'
+import NLoadingIndicator from './NLoadingIndicator'
+
+export type AlertVariant = 'success' | 'info' | 'warning' | 'error' | 'loading'
+
+export const nAlertProps = {
+    /**
+     * The variant of the alert. This defines its color and icon.
+     */
+    variant: {
+        type: String as PropType<AlertVariant>,
+        default: 'success',
+    },
+    /**
+     * The text of the alert.
+     */
+    text: String,
+    /**
+     * If set to `true` the X-button of the alert is hidden.
+     */
+    hideX: Boolean,
+    /**
+     * This is called, when the X-button is clicked.
+     */
+    onDismiss: Function as PropType<() => void>,
+} as const
+
+/**
+ * The `NAlert` is a fully styled alert with multiple variants.
+ * It can be used as a normal blocking element or as part of an alert queue.
+ */
+const Component = createComponent('NAlert', nAlertProps, (props, { slots }) => {
+    const variant = computed(() => VARIANTS[props.variant])
+
+    return () => (
+        <div class={`rounded-md p-3 shadow-lg bg-${variant.value.color}-50`}>
+            <div class="flex items-center">
+                <div class="flex flex-shrink-0 items-center">{variant.value.icon()}</div>
+
+                <div class="ml-3 flex-grow">
+                    <p class={`text-sm font-medium text-${variant.value.color}-900`}>
+                        {slots.default?.() ?? props.text}
+                    </p>
+                </div>
+
+                {!props.hideX && (
+                    <div class="flex items-center flex-shrink-0 ml-3">
+                        <NIconButton color={variant.value.color} size={5} icon={XMarkIcon} onClick={props.onDismiss} />
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+})
+
+const icon = (icon: HeroIcon, color: string) => () => <icon class={`h-5 w-5 text-${color}-500`} />
+
+const VARIANTS = {
+    success: {
+        icon: icon(CheckCircleIcon, 'green'),
+        color: 'green',
+    },
+    info: {
+        icon: icon(InformationCircleIcon, 'blue'),
+        color: 'blue',
+    },
+    warning: {
+        icon: icon(ExclamationCircleIcon, 'yellow'),
+        color: 'yellow',
+    },
+    error: {
+        icon: icon(ExclamationCircleIcon, 'red'),
+        color: 'red',
+    },
+    loading: {
+        icon: () => <NLoadingIndicator color="blue" size={7} shade={500} />,
+        color: 'blue',
+    },
+}
+
+export { Component as NAlert, Component as default }

package/src/lib/components/NBadge.tsx

@@ -0,0 +1,75 @@
+import { createComponent } from '../utils/component'
+import type { TWTextSize } from '../utils/tailwind'
+import type { PropType } from 'vue'
+import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip'
+
+export const nBadgeProps = {
+    /**
+     * The text of the badge. Can alternatively be passed in the default slot.
+     */
+    text: String,
+    /**
+     * The text size, a standard tailwind text-size class.
+     */
+    textSize: {
+        type: String as PropType<TWTextSize>,
+        default: 'text-sm',
+    },
+    /**
+     * The color of the badge.
+     */
+    color: {
+        type: String,
+        default: 'primary',
+    },
+    /**
+     * The background shade of the badge.
+     */
+    shade: {
+        type: Number,
+        default: 200,
+    },
+    /**
+     * The text shade of the badge.
+     */
+    textShade: {
+        type: Number,
+        default: 900,
+    },
+    /**
+     * If set to `true` the badges text is all-caps. Default is `true`.
+     */
+    allCaps: {
+        type: Boolean,
+        default: true,
+    },
+    /**
+     * Adds the classes to the badge.
+     * Use this instead of `class` to style the button, because the button is wrapped inside
+     * a div for the tooltip and `class` would be applied to the wrapping div.
+     */
+    badgeClass: String,
+    ...nToolTipPropsForImplementor,
+} as const
+
+/**
+ * The `NBadge` is a styled element to wrap a text.
+ */
+const Component = createComponent('NBadge', nBadgeProps, (props, { slots }) => {
+    return () => (
+        <NTooltip {...mapTooltipProps(props)}>
+            <div
+                class={[
+                    'px-2 py-1 rounded-md font-semibold shadow',
+                    `${props.textSize} bg-${props.color}-${props.shade} text-${props.color}-${props.textShade}`,
+                    props.allCaps ? 'uppercase' : '',
+                    props.badgeClass,
+                ]}
+            >
+                {slots.default?.() || props.text}
+            </div>
+        </NTooltip>
+    )
+})
+
+export { Component as NBadge, Component as default }

package/src/lib/components/NBreadcrub.tsx

@@ -0,0 +1,97 @@
+import { createComponentWithSlots } from '../utils/component'
+import type { HeroIcon } from '../utils/tailwind'
+import type { TWTextSize } from '../utils/tailwind'
+import { ChevronRightIcon } from '@heroicons/vue/24/solid'
+import type { RouteLocationRaw } from 'vue-router'
+import NLink from './NLink'
+import type { PropType } from 'vue'
+
+export const nBreadcrumbProps = {
+    /**
+     * The items of the breadcrumb.
+     */
+    items: {
+        type: Array as PropType<BreadcrumbItem[]>,
+        default: () => [],
+    },
+    /**
+     * The color of the breadcrumbs text and icons.
+     */
+    color: {
+        type: String,
+        default: 'primary',
+    },
+    /**
+     * The text-size of the breadcrumb labels.
+     */
+    textSize: {
+        type: String as PropType<TWTextSize>,
+        default: 'text-base',
+    },
+    /**
+     * The icon which is used as a seperator between two breadcrumb items.
+     */
+    icon: {
+        type: Function as PropType<HeroIcon>,
+        default: ChevronRightIcon,
+    },
+    /**
+     * The size of the icon in tailwind units.
+     */
+    iconSize: {
+        type: Number,
+        default: 5,
+    },
+    /**
+     * Adds the classes to the separator icons.
+     */
+    iconClass: String,
+    /**
+     * A slot the replace the breadcrumb labels.
+     */
+    item: Function as PropType<(item: BreadcrumbItem, index: number) => JSX.Element>,
+    /**
+     * A slot to replace the separators between the breadcrumb labels.
+     * The passsed item is the item before the seperator.
+     */
+    seperator: Function as PropType<(item: BreadcrumbItem, index: number) => JSX.Element>,
+} as const
+
+export type BreadcrumbItem = {
+    /**
+     * The visible label of the breadcrumb item.
+     */
+    label: string
+    /**
+     * The route the breadcrumb item points to.
+     */
+    route: RouteLocationRaw
+}
+
+/**
+ * The `NBreadcrumb` is a styled breadcrumb which can be used as a navigation in hierarchical views.
+ */
+const Component = createComponentWithSlots('NBreadcrumb', nBreadcrumbProps, ['seperator', 'item'], props => {
+    return () => (
+        <div class={`flex flex-wrap items-center`}>
+            {props.items.map((item, index) => (
+                <>
+                    {props.item?.(item, index) || (
+                        <NLink textSize={props.textSize} route={item.route} color={props.color}>
+                            {item.label}
+                        </NLink>
+                    )}
+
+                    {index < props.items.length - 1 &&
+                        (props.seperator?.(item, index) || (
+                            <props.icon
+                                class={`mx-2 w-${props.iconSize} h-${props.iconSize} text-${props.color}-500 ${props.iconClass}`}
+                            />
+                        ))}
+                </>
+            ))}
+        </div>
+    )
+})
+
+export { Component as NBreadcrumb, Component as default }

package/src/lib/components/NButton.tsx

@@ -0,0 +1,80 @@
+import { createComponent } from '../utils/component'
+import { computed, type PropType } from 'vue'
+import NLoadingIndicator from './NLoadingIndicator'
+import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip'
+
+export const nButtonProps = {
+    /**
+     * The color of the button.
+     */
+    color: {
+        type: String,
+        default: 'primary',
+    },
+    /**
+     * The html attribute, which indicates the type of the button.
+     */
+    type: {
+        type: String as PropType<'submit' | 'button' | 'reset'>,
+        default: 'button',
+    },
+    /**
+     * If set to `true` the button is disabled and no interaction is possible.
+     */
+    disabled: Boolean,
+    /**
+     * If set to `true` the button will show a loading animation.
+     * Setting `loading` to `true` will also disable the button.
+     */
+    loading: Boolean,
+    /**
+     * If set to `true` the button will appear smaller.
+     */
+    small: Boolean,
+    /**
+     * Adds the classes to the button.
+     * Use this instead of `class` to style the button, because the button is wrapped inside
+     * a div for the tooltip and `class` would be applied to the wrapping div.
+     */
+    buttonClass: String,
+    /**
+     * This is called, when the button is clicked.
+     */
+    onClick: Function as PropType<() => void>,
+    ...nToolTipPropsForImplementor,
+} as const
+
+/**
+ * The `NButton` is a styled button.
+ */
+const Component = createComponent('NButton', nButtonProps, (props, { slots }) => {
+    const isDisabled = computed(() => props.loading || props.disabled)
+
+    return () => (
+        <NTooltip {...mapTooltipProps(props)}>
+            <button
+                disabled={isDisabled.value}
+                type={props.type}
+                class={[
+                    `block w-full font-medium rounded-md focus:outline-none focus-visible:ring-2 shadow text-${props.color}-900 relative`,
+                    isDisabled.value
+                        ? `bg-${props.color}-100 text-opacity-20 cursor-default`
+                        : `bg-${props.color}-200 hover:bg-${props.color}-300 focus-visible:ring-${props.color}-500`,
+
+                    props.small ? 'py-1 px-2 text-xs' : 'py-2 px-4 text-sm',
+                    props.buttonClass,
+                ]}
+                onClick={props.onClick}
+            >
+                <span class={{ 'opacity-10': props.loading }}>{slots.default?.()}</span>
+                {props.loading && (
+                    <div class="absolute inset-0 flex items-center justify-center opacity-50">
+                        <NLoadingIndicator color={props.color} size={props.small ? 4 : 6} shade={600} />
+                    </div>
+                )}
+            </button>
+        </NTooltip>
+    )
+})
+
+export { Component as NButton, Component as default }

package/src/lib/components/NCheckbox.tsx

@@ -0,0 +1,55 @@
+import { createComponent } from '../utils/component'
+import { vModelProps } from '../utils/vModel'
+import { nextTick, ref } from 'vue'
+
+export const nCheckboxProps = {
+    ...vModelProps(Boolean),
+    /**
+     * The color of the checkbox.
+     */
+    color: {
+        type: String,
+        default: 'primary',
+    },
+    /**
+     * If set to `true` the checkbox is disabled and no interaction is possible.
+     */
+    disabled: Boolean,
+} as const
+
+/**
+ * The `NCheckbox` is a styled checkbox.
+ */
+const Component = createComponent('NCheckbox', nCheckboxProps, props => {
+    const toggle = () => {
+        props.onUpdateValue?.(!props.value)
+        forceUpdate()
+    }
+
+    const checkBoxRef = ref<InstanceType<typeof HTMLElement>>()
+
+    const updateKey = ref(0)
+    const forceUpdate = () => {
+        updateKey.value += 1
+        nextTick(() => checkBoxRef.value?.focus())
+    }
+
+    return () => (
+        <input
+            type="checkbox"
+            ref={checkBoxRef}
+            checked={props.value}
+            disabled={props.disabled}
+            onClick={toggle}
+            key={updateKey.value}
+            class={[
+                `h-5 w-5 border-default-300 rounded focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-${props.color}-500`,
+                props.disabled
+                    ? `cursor-default bg-default-100 text-${props.color}-200`
+                    : `cursor-pointer text-${props.color}-400`,
+            ]}
+        />
+    )
+})
+
+export { Component as NCheckbox, Component as default }

package/src/lib/components/NCheckboxLabel.tsx

@@ -0,0 +1,51 @@
+import { createComponent } from '../utils/component'
+import NCheckbox, { nCheckboxProps } from './NCheckbox'
+
+export const nCheckboxLabelProps = {
+    ...nCheckboxProps,
+    /**
+     * The title of the checkbox.
+     */
+    title: String,
+    /**
+     * The description of the checkbox.
+     */
+    description: String,
+    /**
+     * If set to `true`, a smaller margin is applied between the label and the checkbox.
+     */
+    compact: Boolean,
+} as const
+
+/**
+ * The `NCheckboxLabel` is a checkbox with a title and a description.
+ */
+const Component = createComponent('NCheckboxLabel', nCheckboxLabelProps, props => {
+    const toggleValue = () => {
+        if (!props.disabled) props.onUpdateValue?.(!props.value)
+    }
+
+    return () => (
+        <div class={`flex ${props.description ? 'items-start' : 'items-center'}`}>
+            <NCheckbox {...props} class={props.description ? 'mt-1' : ''} />
+            <div class={`${props.compact ? 'ml-2' : 'ml-3'} text-sm`}>
+                <label
+                    onClick={toggleValue}
+                    class={[
+                        'font-medium select-none',
+                        props.disabled ? 'text-default-300' : 'text-default-700 cursor-pointer',
+                    ]}
+                >
+                    {props.title}
+                </label>
+                <p class={props.disabled ? 'text-default-300' : 'text-default-500'}>
+                    <span onClick={toggleValue} class={['select-none', props.disabled ? '' : 'cursor-pointer']}>
+                        {props.description}
+                    </span>
+                </p>
+            </div>
+        </div>
+    )
+})
+
+export { Component as NCheckboxLabel, Component as default }