@naptics/vue-collection 0.0.1

package/lib/components/NTable.jsx

@@ -0,0 +1,146 @@
+import { isWidthBreakpoint } from '../utils/breakpoints';
+import { createComponent, createProps } from '../utils/component';
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/24/solid';
+import { computed, Fragment, ref, watch } from 'vue';
+import NIconButton from './NIconButton';
+import './NTable.css';
+const N_TABLE_ACTION_KEY = 'action';
+export const nTableProps = createProps({
+    /**
+     * The headings of the table. These define which columns are shown in the table and in which order.
+     */
+    headings: {
+        type: Array,
+        required: true,
+    },
+    /**
+     * Details can be added additionally to headings.
+     * If details are set a little chevron icon is displayed at the end of each table row
+     * and if clicked on it the data is displayed in a key-value fashion.
+     * The values of the entries should be passed via the `items` prop
+     * in the same way as if the details were normal headings.
+     * Note that details can be added dynamically by adding the `breakpoint` property to the headings.
+     */
+    details: {
+        type: Array,
+        default: () => [],
+    },
+    /**
+     * 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,
+        default: () => [],
+    },
+});
+/**
+ * The `NTable` is a styled html table which accepts data and displays it appropriately.
+ */
+export default createComponent('NTable', nTableProps, props => {
+    const headings = computed(() => {
+        // remove all headings which are below the breakpoint
+        const headings = props.headings.filter(heading => !heading.breakpoint || isWidthBreakpoint(heading.breakpoint).value);
+        // 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(() => {
+        // take all headings which are below the breakpoint
+        const details = props.headings.filter(heading => heading.breakpoint && !isWidthBreakpoint(heading.breakpoint).value);
+        details.push(...props.details);
+        return details;
+    });
+    const showDetails = computed(() => details.value.length > 0);
+    const detailsOpen = ref([]);
+    const isDetailsOpen = (index) => detailsOpen.value[index] || false;
+    const toggleDetailsOpen = (index) => (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">
+                                {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',
+                ]}>
+                                <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 && (<NIconButton icon={isDetailsOpen(itemIndex) ? ChevronDownIcon : ChevronUpIcon} onClick={() => toggleDetailsOpen(itemIndex)}/>)}
+                                            </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'}>
+                                    {details.value.map((detail, detailIndex) => (<tr key={`detail-${detailIndex}`}>
+                                            <td class={[
+                            'table-heading px-4 py-1',
+                            details.value.length - 1 == detailIndex ? 'pb-4' : '',
+                        ]}>
+                                                {detail.label}
+                                            </td>
+                                            <td class={[
+                            'px-4 py-1',
+                            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>);
+});
+/**
+ * Builds a JSX-Element out of the item
+ */
+function buildItem(item) {
+    if (typeof item == 'string' || typeof item == 'number')
+        return <>{item}</>;
+    else
+        return item();
+}

package/lib/components/NTableAction.d.ts

@@ -0,0 +1,74 @@
+import type { PropType } from 'vue';
+import { type RouteLocationRaw } from 'vue-router';
+export declare const nTableActionProps: {
+    /**
+     * The route of the action. If set the component will be a {@link RouterLink}.
+     */
+    route: PropType<RouteLocationRaw>;
+    /**
+     * The text of the action.
+     */
+    text: StringConstructor;
+    /**
+     * The html attribute, which indicates the type of the button.
+     */
+    type: {
+        type: PropType<"button" | "submit" | "reset">;
+        default: string;
+    };
+    /**
+     * This is called when the action is clicked.
+     * It is only called when the `route` prop is not set on the action.
+     */
+    onClick: PropType<() => void>;
+};
+/**
+ * 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.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The route of the action. If set the component will be a {@link RouterLink}.
+     */
+    route: PropType<RouteLocationRaw>;
+    /**
+     * The text of the action.
+     */
+    text: StringConstructor;
+    /**
+     * The html attribute, which indicates the type of the button.
+     */
+    type: {
+        type: PropType<"button" | "submit" | "reset">;
+        default: string;
+    };
+    /**
+     * This is called when the action is clicked.
+     * It is only called when the `route` prop is not set on the action.
+     */
+    onClick: PropType<() => void>;
+}, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The route of the action. If set the component will be a {@link RouterLink}.
+     */
+    route: PropType<RouteLocationRaw>;
+    /**
+     * The text of the action.
+     */
+    text: StringConstructor;
+    /**
+     * The html attribute, which indicates the type of the button.
+     */
+    type: {
+        type: PropType<"button" | "submit" | "reset">;
+        default: string;
+    };
+    /**
+     * This is called when the action is clicked.
+     * It is only called when the `route` prop is not set on the action.
+     */
+    onClick: PropType<() => void>;
+}>> & {}, {
+    type: "button" | "submit" | "reset";
+}>;
+export default _default;

package/lib/components/NTableAction.jsx

@@ -0,0 +1,35 @@
+import { createComponent, createProps } from '../utils/component';
+import { RouterLink } from 'vue-router';
+import { nButtonProps } from './NButton';
+export const nTableActionProps = createProps({
+    /**
+     * The route of the action. If set the component will be a {@link RouterLink}.
+     */
+    route: [String, Object],
+    /**
+     * 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,
+});
+/**
+ * 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.
+ */
+export default 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>);
+});

package/lib/components/NTextArea.d.ts

@@ -0,0 +1,252 @@
+import { type PropType } from 'vue';
+export declare const nTextAreaProps: {
+    optional: BooleanConstructor;
+    rules: {
+        type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
+        default: () => never[];
+    };
+    form: PropType<import("./ValidatedForm").ValidatedForm>;
+    error: BooleanConstructor;
+    errorMessage: StringConstructor;
+    hideErrorMessage: BooleanConstructor;
+    disableBlurValidation: BooleanConstructor;
+    tooltipText: StringConstructor;
+    tooltipContent: PropType<() => void>;
+    tooltipHide: BooleanConstructor;
+    tooltipShow: BooleanConstructor;
+    tooltipPlacement: {
+        type: PropType<import("./NTooltip").TooltipPlacement>;
+        default: string;
+    };
+    tooltipMaxWidth: {
+        type: PropType<import("../utils/tailwind").TWMaxWidth>; /**
+         * If set to `true` the text area is displayed with a red border.
+         */
+        default: string;
+    };
+    /**
+     * The name of the text area. Is displayed as a label above the text area.
+     */
+    name: StringConstructor;
+    /**
+     * The placeholder of the text area.
+     */
+    placeholder: StringConstructor;
+    /**
+     * The html autocomplete attribute of the text area.
+     */
+    autocomplete: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * If set to `true`, the text area is resizable in y-direction.
+     */
+    resizable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 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: NumberConstructor;
+    /**
+     * The maximum length of the input string. Entering longer strings are simply
+     * prevented, but no error message is shown to the user.
+     */
+    maxLength: NumberConstructor;
+    /**
+     * If set to `true` the text area is disabled and no interaction is possible.
+     */
+    disabled: BooleanConstructor;
+    /**
+     * If set to `true` the text area's label is hidden.
+     */
+    hideLabel: BooleanConstructor;
+    /**
+     * This is called when the text area reveices focus.
+     */
+    onFocus: PropType<() => void>;
+    /**
+     * This is called when the text area looses focus.
+     */
+    onBlur: PropType<() => void>;
+    value: PropType<string>;
+    onUpdateValue: PropType<(newValue: string) => void>;
+};
+export type NTextAreaExposed = {
+    /**
+     * Request focus on the text area.
+     */
+    focus(): void;
+};
+declare const _default: import("vue").DefineComponent<{
+    optional: BooleanConstructor;
+    rules: {
+        type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
+        default: () => never[];
+    };
+    form: PropType<import("./ValidatedForm").ValidatedForm>;
+    error: BooleanConstructor;
+    errorMessage: StringConstructor;
+    hideErrorMessage: BooleanConstructor;
+    disableBlurValidation: BooleanConstructor;
+    tooltipText: StringConstructor;
+    tooltipContent: PropType<() => void>;
+    tooltipHide: BooleanConstructor;
+    tooltipShow: BooleanConstructor;
+    tooltipPlacement: {
+        type: PropType<import("./NTooltip").TooltipPlacement>;
+        default: string;
+    };
+    tooltipMaxWidth: {
+        type: PropType<import("../utils/tailwind").TWMaxWidth>; /**
+         * If set to `true` the text area is displayed with a red border.
+         */
+        default: string;
+    };
+    /**
+     * The name of the text area. Is displayed as a label above the text area.
+     */
+    name: StringConstructor;
+    /**
+     * The placeholder of the text area.
+     */
+    placeholder: StringConstructor;
+    /**
+     * The html autocomplete attribute of the text area.
+     */
+    autocomplete: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * If set to `true`, the text area is resizable in y-direction.
+     */
+    resizable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 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: NumberConstructor;
+    /**
+     * The maximum length of the input string. Entering longer strings are simply
+     * prevented, but no error message is shown to the user.
+     */
+    maxLength: NumberConstructor;
+    /**
+     * If set to `true` the text area is disabled and no interaction is possible.
+     */
+    disabled: BooleanConstructor;
+    /**
+     * If set to `true` the text area's label is hidden.
+     */
+    hideLabel: BooleanConstructor;
+    /**
+     * This is called when the text area reveices focus.
+     */
+    onFocus: PropType<() => void>;
+    /**
+     * This is called when the text area looses focus.
+     */
+    onBlur: PropType<() => void>;
+    value: PropType<string>;
+    onUpdateValue: PropType<(newValue: string) => void>;
+}, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    optional: BooleanConstructor;
+    rules: {
+        type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
+        default: () => never[];
+    };
+    form: PropType<import("./ValidatedForm").ValidatedForm>;
+    error: BooleanConstructor;
+    errorMessage: StringConstructor;
+    hideErrorMessage: BooleanConstructor;
+    disableBlurValidation: BooleanConstructor;
+    tooltipText: StringConstructor;
+    tooltipContent: PropType<() => void>;
+    tooltipHide: BooleanConstructor;
+    tooltipShow: BooleanConstructor;
+    tooltipPlacement: {
+        type: PropType<import("./NTooltip").TooltipPlacement>;
+        default: string;
+    };
+    tooltipMaxWidth: {
+        type: PropType<import("../utils/tailwind").TWMaxWidth>; /**
+         * If set to `true` the text area is displayed with a red border.
+         */
+        default: string;
+    };
+    /**
+     * The name of the text area. Is displayed as a label above the text area.
+     */
+    name: StringConstructor;
+    /**
+     * The placeholder of the text area.
+     */
+    placeholder: StringConstructor;
+    /**
+     * The html autocomplete attribute of the text area.
+     */
+    autocomplete: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * If set to `true`, the text area is resizable in y-direction.
+     */
+    resizable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 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: NumberConstructor;
+    /**
+     * The maximum length of the input string. Entering longer strings are simply
+     * prevented, but no error message is shown to the user.
+     */
+    maxLength: NumberConstructor;
+    /**
+     * If set to `true` the text area is disabled and no interaction is possible.
+     */
+    disabled: BooleanConstructor;
+    /**
+     * If set to `true` the text area's label is hidden.
+     */
+    hideLabel: BooleanConstructor;
+    /**
+     * This is called when the text area reveices focus.
+     */
+    onFocus: PropType<() => void>;
+    /**
+     * This is called when the text area looses focus.
+     */
+    onBlur: PropType<() => void>;
+    value: PropType<string>;
+    onUpdateValue: PropType<(newValue: string) => void>;
+}>> & {}, {
+    tooltipHide: boolean;
+    tooltipShow: boolean;
+    tooltipPlacement: import("./NTooltip").TooltipPlacement;
+    tooltipMaxWidth: import("../utils/tailwind").TWMaxWidth;
+    disabled: boolean;
+    error: boolean;
+    rules: import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[];
+    autocomplete: string;
+    hideLabel: boolean;
+    optional: boolean;
+    hideErrorMessage: boolean;
+    disableBlurValidation: boolean;
+    resizable: boolean;
+}>;
+export default _default;

package/lib/components/NTextArea.jsx

@@ -0,0 +1,108 @@
+import { createComponent, createProps } from '../utils/component';
+import { ref } 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 = createProps({
+    ...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,
+    /**
+     * This is called when the text area reveices focus.
+     */
+    onFocus: Function,
+    /**
+     * This is called when the text area looses focus.
+     */
+    onBlur: Function,
+    ...nToolTipPropsForImplementor,
+});
+export const nTextAreaProps = createProps({
+    ...nTextAreaBaseProps,
+    ...validationProps,
+});
+export default createComponent('NTextArea', nTextAreaProps, (props, context) => {
+    const textAreaRef = ref();
+    const exposed = {
+        focus: () => textAreaRef.value?.focus(),
+    };
+    context.expose(exposed);
+    return () => (<NValInput {...props} input={({ error, onBlur, onUpdateValue }) => (<NTextAreaBase ref={textAreaRef} {...{ ...props, error, onBlur, onUpdateValue }}/>)}/>);
+});
+/**
+ * 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();
+    const exposed = {
+        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.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',
+        ]}/>
+
+                    <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/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;
+}