@naptics/vue-collection 0.0.3 → 0.0.5

package/components/NTable.jsx

@@ -1,146 +0,0 @@
-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/components/NTableAction.jsx

@@ -1,35 +0,0 @@
-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/components/NTextArea.jsx

@@ -1,108 +0,0 @@
-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/components/NTooltip.jsx

@@ -1,161 +0,0 @@
-import { createComponent, createProps } from '../utils/component';
-import { uniqueId } from '../utils/utils';
-import { computed, onMounted, ref, watch, onUnmounted, Transition } from 'vue';
-import { createPopper } from '@popperjs/core';
-import { watchRef } from '../utils/vue';
-import './NTooltip.css';
-export const nTooltipProps = createProps({
-    /**
-     * The text content of the tooltip.
-     */
-    text: String,
-    /**
-     * A slot to replace the content of the tooltip. This will override the `text` prop.
-     */
-    content: Function,
-    /**
-     * If set to `true` the tooltip is shown constantly.
-     */
-    show: Boolean,
-    /**
-     * If set to `true` the tooltip is hidden constantly.
-     */
-    hide: Boolean,
-    /**
-     * If set to `true` the `block` class is applied to the tooltip.
-     * This should be set if the content in the default slot is also block.
-     */
-    block: Boolean,
-    /**
-     * The placement of the tooltip.
-     */
-    placement: {
-        type: String,
-        default: 'auto',
-    },
-    /**
-     * The maximum width of the tooltip.
-     */
-    maxWidth: {
-        type: String,
-        default: 'max-w-xs',
-    },
-});
-/**
- * These props are made to use on a component which implements the tooltip
- * and wants it to be controllable via the own props.
- * e.g. `text` is now called `tooltipText`.
- * They can be mapped to the normal tooltip props with {@link mapTooltipProps}
- */
-export const nToolTipPropsForImplementor = {
-    /**
-     * Adds a tooltip to the component with the specified text.
-     * @see {@link nTooltipProps.text}
-     */
-    tooltipText: nTooltipProps.text,
-    /**
-     * A slot for the tooltip of this component.
-     * If the slot is set, the tooltip with the specified content is added to the component.
-     * @see {@link nTooltipProps.content}
-     */
-    tooltipContent: nTooltipProps.content,
-    /**
-     * @see {@link nTooltipProps.hide}
-     */
-    tooltipHide: nTooltipProps.hide,
-    /**
-     * @see {@link nTooltipProps.show}
-     */
-    tooltipShow: nTooltipProps.show,
-    /**
-     * @see {@link nTooltipProps.placement}
-     */
-    tooltipPlacement: nTooltipProps.placement,
-    /**
-     * @see {@link nTooltipProps.maxWidth}
-     */
-    tooltipMaxWidth: nTooltipProps.maxWidth,
-};
-/**
- * Maps the {@link nToolTipPropsForImplementor} props to normal tooltip props
- * @returns an object containing the normal tooltip props.
- */
-export function mapTooltipProps(props) {
-    return {
-        text: props.tooltipText,
-        content: props.tooltipContent,
-        hide: props.tooltipHide,
-        show: props.tooltipShow,
-        placement: props.tooltipPlacement,
-        maxWidth: props.tooltipMaxWidth,
-    };
-}
-/**
- * The `NTooltip` is a wrapper for any component which adds a tooltip to it.
- * Any component can just be passed in the default slot and a tooltip will be added to it.
- * Note that this component disappears when neither the `text` nor the `content`
- * prop is passed as the tooltip would then be empty.
- * If this is the case, the default slot will just be rendered inside a div.
- * @example
- * <NTooltip text="Hello">
- *      <NButton />
- * </NTooltip>
- */
-export default createComponent('NTooltip', nTooltipProps, (props, { slots }) => {
-    return () => (<div class={props.block ? 'block' : 'inline-block'}>
-            {props.content || props.text ? (<NTooltipBase {...props}>{slots.default?.()}</NTooltipBase>) : (slots.default?.())}
-        </div>);
-});
-const NTooltipBase = createComponent('NTooltipBase', nTooltipProps, (props, { slots }) => {
-    let popperInstance = null;
-    const contentId = `content-${uniqueId()}`;
-    const tooltipId = `tooltip-${uniqueId()}`;
-    function createTooltip() {
-        const content = document.getElementById(contentId);
-        const tooltip = document.getElementById(tooltipId);
-        if (content && tooltip) {
-            popperInstance = createPopper(content, tooltip, {
-                placement: props.placement,
-                modifiers: [
-                    {
-                        name: 'offset',
-                        options: {
-                            offset: [0, 8],
-                        },
-                    },
-                ],
-            });
-        }
-        else {
-            console.error('Could not create tooltip. HTML elements for content or tooltip were not found.');
-        }
-    }
-    function destroyTooltip() {
-        popperInstance?.destroy();
-        popperInstance = null;
-    }
-    onMounted(createTooltip);
-    onUnmounted(destroyTooltip);
-    watch(() => props.placement, newPlacement => popperInstance?.setOptions({ placement: newPlacement }));
-    const isHoveringContent = ref(false);
-    const isHoveringTooltip = ref(false);
-    const isHovering = computed(() => isHoveringContent.value || isHoveringTooltip.value);
-    const showTooltip = computed(() => props.show || (!props.hide && isHovering.value));
-    watchRef(showTooltip, () => popperInstance?.update());
-    return () => (<>
-            <div class="p-[10px] -m-[10px]" onMouseleave={() => setTimeout(() => (isHoveringContent.value = false), 10)}>
-                <div id={contentId} onMouseenter={() => (isHoveringContent.value = true)}>
-                    {slots.default?.()}
-                </div>
-            </div>
-
-            <Transition enterActiveClass="transition-opacity ease-out duration-100" enterFromClass="opacity-0" enterToClass="opacity-100" leaveActiveClass="transition-opacity ease-in duration-75" leaveFromClass="opacity-100" leaveToClass="opacity-0">
-                <div id={tooltipId} role="tooltip" onMouseenter={() => (isHoveringTooltip.value = true)} onMouseleave={() => (isHoveringTooltip.value = false)} v-show={showTooltip.value} class={[isHovering.value ? 'z-20' : 'z-10', props.maxWidth, 'tooltip']}>
-                    <div class="bg-white rounded-md py-2 px-4 shadow-lg border-default-200 border text-sm font-normal text-default-700">
-                        {props.content?.() || props.text}
-                    </div>
-                    <div data-popper-arrow class="arrow"/>
-                </div>
-            </Transition>
-        </>);
-});

package/components/NValInput.jsx

@@ -1,101 +0,0 @@
-import { createComponent, createProps } from '../utils/component';
-import { computed } from 'vue';
-import { ref, reactive, watch } from 'vue';
-import NInput, { nInputProps } from './NInput';
-import { validate, required } from '../utils/validation';
-export const validationProps = createProps({
-    /**
-     * If set to `true` this input is always valid when its value is empty.
-     * If set to `false` the input receives the {@link required} rule. Default is `false`.
-     */
-    optional: Boolean,
-    /**
-     * The rules which this input is checked with.
-     * The rules are checked sequentially and the error of the first failed rule is displayed.
-     * If `optional` is set to false, the rule {@link required} will be checked first.
-     */
-    rules: {
-        type: [Function, Array],
-        default: () => [],
-    },
-    /**
-     * The form, which this input will be added to.
-     * On initialization, this input will call {@link ValidatedForm.addInput} passing itself to the form.
-     */
-    form: Object,
-    /**
-     * Overrides the internal error state. If set to true, it will always display an error.
-     */
-    error: Boolean,
-    /**
-     * Overrides the internal error message. If set, this message is always displayed.
-     */
-    errorMessage: String,
-    /**
-     * If set to `true` the error message is not shown.
-     * However, the input is still marked red if it is in an error state.
-     */
-    hideErrorMessage: Boolean,
-    /**
-     * Disables the validation on blur. Should only be used in special occasions.
-     */
-    disableBlurValidation: Boolean,
-});
-export const nValInputProps = createProps({
-    ...nInputProps,
-    ...validationProps,
-    /**
-     * A slot to replace the input.
-     */
-    input: Function,
-});
-/**
- * The `NValInput` is a `NInput` with custom validation.
- */
-export default createComponent('NValInput', nValInputProps, (props, context) => {
-    const rules = computed(() => {
-        const otherRules = Array.isArray(props.rules) ? props.rules : [props.rules];
-        return props.optional ? otherRules : [required, ...otherRules];
-    });
-    const validationResult = ref();
-    const validateRules = (input) => {
-        const result = validate(input, rules.value);
-        validationResult.value = result;
-        return result;
-    };
-    const showError = computed(() => props.error || (validationResult.value != null && !validationResult.value.isValid));
-    const showErrorMessage = computed(() => !props.hideErrorMessage && showError.value);
-    const errorMessage = computed(() => props.errorMessage || validationResult.value?.errorMessage);
-    const validateIfError = (value = props.value) => {
-        if (showError.value)
-            validateRules(value);
-    };
-    watch(() => props.value, () => validateIfError());
-    watch(() => rules.value, () => validateIfError());
-    const onBlur = () => {
-        if (!props.disableBlurValidation)
-            validateRules(props.value);
-        props.onBlur?.();
-    };
-    const onUpdateValue = (newValue) => {
-        validateIfError(newValue);
-        props.onUpdateValue?.(newValue);
-    };
-    const inputSlotProps = reactive({
-        onBlur,
-        onUpdateValue,
-        error: showError,
-    });
-    const inputRef = ref();
-    const expose = {
-        validate: () => validateRules(props.value),
-        reset: () => (validationResult.value = undefined),
-        focus: () => inputRef.value?.focus(),
-    };
-    context.expose(expose);
-    props.form?.addInput(expose);
-    return () => (<div>
-            {props.input?.(inputSlotProps) || <NInput ref={inputRef} {...{ ...props, ...inputSlotProps }}/>}
-            {showErrorMessage.value && <p class="text-red-500 text-xs mt-1">{errorMessage.value}</p>}
-        </div>);
-});