@naptics/vue-collection 0.2.14 → 0.3.0

package/src/lib/components/NTable.tsx

@@ -0,0 +1,247 @@
+import { isWidthBreakpoint, type TWBreakpoint } from '../utils/breakpoints'
+import { createComponent } from '../utils/component'
+import { ChevronLeftIcon } from '@heroicons/vue/24/solid'
+import { computed, Fragment, ref, type PropType, watch } from 'vue'
+import NIconButton from './NIconButton'
+import './NTable.css'
+
+export type TableItem = string | number | (() => JSX.Element)
+
+export type TableHeading = {
+    /**
+     * The key of the table heading. This should match the key of the items.
+     */
+    key: string
+    /**
+     * The label of the table heading. If not set, no label is displayed.
+     */
+    label?: TableItem
+    /**
+     * If set to `true` the whole column of this heading will be emphasized.
+     */
+    emph?: boolean
+    /**
+     * This classes will be directly set to all cells in the column of this heading.
+     */
+    cellClass?: string
+    /**
+     * This classes will be directly set on all cells of this heading, when they show up in the details.
+     */
+    detailsClass?: string
+    /**
+     * If set the heading will become a details entry when the screen is smaller than the specified breakpoint.
+     */
+    breakpoint?: TWBreakpoint
+    /**
+     * If set to `true`, this heading will always show up inside the details. If this is set the `breakpoint`
+     * property has no effect, because the items always show up as details ignoring the breakpoint.
+     */
+    isDetail?: boolean
+}
+
+export type TableRow = Record<string, TableItem> & {
+    /**
+     * The TableItem is used as the last element of the table and
+     * merged together in one cell with the button to toggle the details.
+     */
+    action?: TableItem
+    /**
+     * This classes will be applied to the whole table row.
+     */
+    rowClass?: string
+    /**
+     * This classes will be applied to the whole details section of the row.
+     */
+    detailsClass?: string
+}
+const N_TABLE_ACTION_KEY = 'action'
+
+export const nTableProps = {
+    /**
+     * The headings of the table. These define which columns are shown in the table and in which order.
+     */
+    headings: {
+        type: Array as PropType<TableHeading[]>,
+        required: true,
+    },
+    /**
+     * Adds the classes to all headings at the top of the table.
+     */
+    headingsClass: String,
+    /**
+     * Adds the classes to all headings in the details of the table.
+     */
+    headingDetailsClass: String,
+    /**
+     * The items of the table. They consist of an array of table rows.
+     * Every tablerow is an object containing elements for the heading keys.
+     * The elements can either be a primitive value or a function which returns a {@link JSX.Element}.
+     * If the item should be treated as an action (e.g. icon-button to display at the end of the row)
+     * the dedicated key 'action' can be used.
+     * @see TableRow
+     * @example
+     * // These headings are defined
+     * const headings: TableHeading[] = [
+     *    { key: 'id', label: 'ID' },
+     *    { key: 'name', label: 'Name' },
+     *    { key: 'status', label: 'Status' }
+     * ]
+     *
+     * // Appropriate rows for these headings
+     * const items: TableRow[] = [
+     *      { id: 1, name: 'Hubert', status: () => <NBadge ... />, action: ... },   // Row 1
+     *      { id: 2, name: 'Franzi', status: () => <NBadge ... />, action: ... }    // Row 2
+     * ]
+     */
+
+    items: {
+        type: Array as PropType<TableRow[]>,
+        default: () => [],
+    },
+} as const
+
+/**
+ * The `NTable` is a styled html table which accepts data and displays it appropriately.
+ */
+const Component = createComponent('NTable', nTableProps, props => {
+    const headings = computed(() => {
+        // filter out details headings
+        const headings = props.headings.filter(heading => !isHeadingDetail(heading))
+
+        // The column for actions is shown if there are details
+        // or if any of the items contain an element with the action-key.
+        if (showDetails.value || props.items.filter(row => row.action != null).length != 0) {
+            headings.push({ key: N_TABLE_ACTION_KEY })
+        }
+
+        return headings
+    })
+
+    const details = computed(() => props.headings.filter(isHeadingDetail))
+
+    const showDetails = computed(() => details.value.length > 0)
+
+    const detailsOpen = ref<boolean[]>([])
+    const isDetailsOpen = (index: number) => detailsOpen.value[index] || false
+    const toggleDetailsOpen = (index: number) => (detailsOpen.value[index] = !detailsOpen.value[index])
+
+    // if the items change, reset all open details to closed
+    // and create correct amount of booleans for all items
+    watch(
+        () => props.items,
+        newItems => (detailsOpen.value = Array({ length: newItems.length }).map(() => false)),
+        { immediate: true }
+    )
+
+    return () => (
+        <div class="overflow-x-auto">
+            <table class="min-w-full text-default-500 text-sm">
+                <thead class="bg-default-50 ">
+                    <tr>
+                        {headings.value.map(heading => (
+                            <th key={heading.key} scope="col" class={`p-4 table-heading ${props.headingsClass}`}>
+                                {buildItem(heading.label)}
+                            </th>
+                        ))}
+                    </tr>
+                </thead>
+
+                {props.items.length > 0 &&
+                    props.items.map((item, itemIndex) => (
+                        <Fragment key={itemIndex}>
+                            {/* First tbody is the actual table-row with the entries */}
+                            <tbody
+                                class={[
+                                    'border-default-200 border-t',
+                                    itemIndex % 2 === 0 ? 'bg-white' : 'bg-default-50',
+                                    item.rowClass,
+                                ]}
+                            >
+                                <tr>
+                                    {headings.value.map(heading => (
+                                        <td key={itemIndex + '-' + heading.key} class="p-4">
+                                            <div
+                                                class={[
+                                                    'flex',
+                                                    heading.emph ? 'font-medium text-default-900' : '',
+                                                    heading.cellClass,
+                                                    heading.key == N_TABLE_ACTION_KEY
+                                                        ? 'justify-end items-center space-x-3'
+                                                        : '',
+                                                ]}
+                                            >
+                                                {item[heading.key] && buildItem(item[heading.key])}
+
+                                                {/* Add the chevron icon-button if details are present */}
+                                                {heading.key == N_TABLE_ACTION_KEY && showDetails.value && (
+                                                    <div
+                                                        class="inline-flex transition-transform duration-200"
+                                                        style={{
+                                                            transform: isDetailsOpen(itemIndex)
+                                                                ? 'rotate(-90deg)'
+                                                                : 'rotate(0deg)',
+                                                            transformOrigin: 'center center',
+                                                        }}
+                                                    >
+                                                        <NIconButton
+                                                            icon={ChevronLeftIcon}
+                                                            onClick={() => toggleDetailsOpen(itemIndex)}
+                                                        />
+                                                    </div>
+                                                )}
+                                            </div>
+                                        </td>
+                                    ))}
+                                </tr>
+                            </tbody>
+
+                            {/* Second tbody are the details (only shown if present and opened) */}
+                            {showDetails.value && isDetailsOpen(itemIndex) && (
+                                <tbody class={[itemIndex % 2 === 0 ? 'bg-white' : 'bg-default-50', item.detailsClass]}>
+                                    {details.value.map((detail, detailIndex) => (
+                                        <tr key={`detail-${detailIndex}`}>
+                                            <td
+                                                class={[
+                                                    'table-heading px-4 py-1',
+                                                    props.headingDetailsClass,
+                                                    details.value.length - 1 == detailIndex ? 'pb-4' : '',
+                                                ]}
+                                            >
+                                                {buildItem(detail.label)}
+                                            </td>
+                                            <td
+                                                class={[
+                                                    'px-4 py-1',
+                                                    details.value[detailIndex]?.detailsClass,
+                                                    details.value.length - 1 == detailIndex ? 'pb-4' : '',
+                                                ]}
+                                                colspan={headings.value.length - 1}
+                                            >
+                                                {item[detail.key] && buildItem(item[detail.key])}
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            )}
+                        </Fragment>
+                    ))}
+            </table>
+        </div>
+    )
+})
+
+export { Component as NTable, Component as default }
+
+/**
+ * Builds a JSX-Element out of the item
+ */
+function buildItem(item: TableItem | undefined) {
+    if (item === undefined) return undefined
+    else if (typeof item == 'string' || typeof item == 'number') return <>{item}</>
+    else return item()
+}
+
+function isHeadingDetail(heading: TableHeading): boolean {
+    // take all headings which are details or below the breakpoint
+    return heading.isDetail || (heading.breakpoint !== undefined && !isWidthBreakpoint(heading.breakpoint).value)
+}

package/src/lib/components/NTableAction.tsx

@@ -0,0 +1,49 @@
+import { createComponent } from '../utils/component'
+import type { PropType } from 'vue'
+import { RouterLink, type RouteLocationRaw } from 'vue-router'
+import { nButtonProps } from './NButton'
+
+export const nTableActionProps = {
+    /**
+     * The route of the action. If set the component will be a {@link RouterLink}.
+     */
+    route: [String, Object] as PropType<RouteLocationRaw>,
+    /**
+     * The text of the action.
+     */
+    text: String,
+    /**
+     * The html attribute, which indicates the type of the button.
+     */
+    type: nButtonProps.type,
+    /**
+     * This is called when the action is clicked.
+     * It is only called when the `route` prop is not set on the action.
+     */
+    onClick: Function as PropType<() => void>,
+} as const
+
+/**
+ * The `NTableAction` is a button or {@link RouterLink} which is styled to fit into a table.
+ * It is basically styled as an emphasized text in the table.
+ */
+const Component = createComponent('NTableAction', nTableActionProps, (props, { slots }) => {
+    const content = () => slots.default?.() || <>{props.text}</>
+
+    const classes = [
+        'text-left font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-default-900 rounded-sm ring-offset-2 text-default-900 hover:underline hover:text-default-700',
+    ]
+
+    return () =>
+        props.route ? (
+            <RouterLink to={props.route} class={classes}>
+                {content()}
+            </RouterLink>
+        ) : (
+            <button type={props.type} class={classes} onClick={props.onClick}>
+                {content()}
+            </button>
+        )
+})
+
+export { Component as NTableAction, Component as default }

package/src/lib/components/NTextArea.tsx

@@ -0,0 +1,159 @@
+import { createComponent } from '../utils/component'
+import { ref, type PropType } from 'vue'
+import { ExclamationCircleIcon } from '@heroicons/vue/24/solid'
+import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip'
+import { vModelProps } from '../utils/vModel'
+import NValInput, { validationProps } from './NValInput'
+
+const nTextAreaBaseProps = {
+    ...vModelProps(String),
+    /**
+     * The name of the text area. Is displayed as a label above the text area.
+     */
+    name: String,
+    /**
+     * The placeholder of the text area.
+     */
+    placeholder: String,
+    /**
+     * The html autocomplete attribute of the text area.
+     */
+    autocomplete: {
+        type: String,
+        default: 'off',
+    },
+    /**
+     * If set to `true`, the text area is resizable in y-direction.
+     */
+    resizable: {
+        type: Boolean,
+        default: true,
+    },
+    /**
+     * The initial height of the text area in terms of
+     * how many text rows fit inside the text area.
+     * The height can be change if {@link nTextAreaProps.resizable} is `true`
+     */
+    rows: Number,
+    /**
+     * The maximum length of the input string. Entering longer strings are simply
+     * prevented, but no error message is shown to the user.
+     */
+    maxLength: Number,
+    /**
+     * If set to `true` the text area is displayed with a red border.
+     */
+    error: Boolean,
+    /**
+     * If set to `true` the text area is disabled and no interaction is possible.
+     */
+    disabled: Boolean,
+    /**
+     * If set to `true` the text area's label is hidden.
+     */
+    hideLabel: Boolean,
+    /**
+     * Adds the classes directly to the input (e.g. for shadow).
+     */
+    inputClass: String,
+    /**
+     * This is called when the text area reveices focus.
+     */
+    onFocus: Function as PropType<() => void>,
+    /**
+     * This is called when the text area looses focus.
+     */
+    onBlur: Function as PropType<() => void>,
+    ...nToolTipPropsForImplementor,
+} as const
+
+export const nTextAreaProps = {
+    ...nTextAreaBaseProps,
+    ...validationProps,
+} as const
+
+export type NTextAreaExposed = {
+    /**
+     * Request focus on the text area.
+     */
+    focus(): void
+}
+
+const Component = createComponent('NTextArea', nTextAreaProps, (props, context) => {
+    const textAreaRef = ref<NTextAreaExposed>()
+    const exposed: NTextAreaExposed = {
+        focus: () => textAreaRef.value?.focus(),
+    }
+    context.expose(exposed)
+
+    return () => (
+        <NValInput
+            {...props}
+            input={({ error, onBlur, onUpdateValue }) => (
+                <NTextAreaBase ref={textAreaRef} {...{ ...props, error, onBlur, onUpdateValue }} />
+            )}
+        />
+    )
+})
+
+export { Component as NTextArea, Component as default }
+
+/**
+ * The `NTextArea` wraps the html text area with all the features from {@link NInput} and {@link NValInput}.
+ */
+const NTextAreaBase = createComponent('NTextAreaBase', nTextAreaBaseProps, (props, context) => {
+    const textAreaRef = ref<HTMLTextAreaElement>()
+    const exposed: NTextAreaExposed = {
+        focus: () => textAreaRef.value?.focus(),
+    }
+    context.expose(exposed)
+
+    return () => (
+        <div>
+            {props.name && !props.hideLabel && (
+                <label
+                    for={props.name}
+                    class={['block text-sm font-medium mb-1', props.disabled ? 'text-default-300' : 'text-default-700']}
+                >
+                    {props.name}
+                </label>
+            )}
+            <NTooltip block {...mapTooltipProps(props)}>
+                <div class="relative">
+                    <textarea
+                        ref={textAreaRef}
+                        name={props.name}
+                        value={props.value}
+                        onInput={event => props.onUpdateValue?.((event.target as HTMLInputElement).value)}
+                        placeholder={props.placeholder}
+                        autocomplete={props.autocomplete}
+                        disabled={props.disabled}
+                        rows={props.rows}
+                        maxlength={props.maxLength}
+                        onFocus={() => props.onFocus?.()}
+                        onBlur={() => props.onBlur?.()}
+                        onInvalid={event => event.preventDefault()}
+                        class={[
+                            'block w-full rounded-md border focus:outline-none focus:ring-1 ',
+                            props.disabled
+                                ? 'text-default-500 placeholder-default-300 bg-default-50'
+                                : 'text-default-900 placeholder-default-400 ',
+                            props.error
+                                ? 'border-red-500 focus:border-red-500 focus:ring-red-500 pr-10'
+                                : 'border-default-300 focus:border-primary-500 focus:ring-primary-500',
+                            props.resizable ? 'resize-y' : 'resize-none',
+                            props.inputClass,
+                        ]}
+                    />
+
+                    <div
+                        class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"
+                        v-show={props.error}
+                    >
+                        <ExclamationCircleIcon class="h-5 w-5 text-red-700" aria-hidden="true" />
+                    </div>
+                </div>
+            </NTooltip>
+        </div>
+    )
+})

package/src/lib/components/NTooltip.css

@@ -0,0 +1,37 @@
+.arrow,
+.arrow::before {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+}
+
+.arrow {
+    visibility: hidden;
+}
+
+.arrow::before {
+    visibility: visible;
+    content: '';
+    transform: rotate(45deg);
+    @apply bg-white border border-default-200 border-solid;
+}
+
+.tooltip[data-popper-placement^='top'] > .arrow {
+    bottom: -3.8px;
+    @apply before:border-t-transparent before:border-l-transparent;
+}
+
+.tooltip[data-popper-placement^='bottom'] > .arrow {
+    top: -3.8px;
+    @apply before:border-b-white before:border-r-white;
+}
+
+.tooltip[data-popper-placement^='left'] > .arrow {
+    right: -3.8px;
+    @apply before:border-b-transparent before:border-l-transparent;
+}
+
+.tooltip[data-popper-placement^='right'] > .arrow {
+    left: -3.8px;
+    @apply before:border-t-transparent before:border-r-transparent;
+}