@naptics/vue-collection 0.3.1 → 1.0.0-beta.1

package/components/NTable.js

@@ -1,128 +0,0 @@
-import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
-import { isWidthBreakpoint } from '../utils/breakpoints';
-import { createComponent } from '../utils/component';
-import { ChevronLeftIcon } 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 = {
-  /**
-   * The headings of the table. These define which columns are shown in the table and in which order.
-   */
-  headings: {
-    type: Array,
-    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,
-    default: () => []
-  }
-};
-/**
- * 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([]);
-  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 () => _createVNode("div", {
-    "class": "overflow-x-auto"
-  }, [_createVNode("table", {
-    "class": "min-w-full text-default-500 text-sm"
-  }, [_createVNode("thead", {
-    "class": "bg-default-50 "
-  }, [_createVNode("tr", null, [headings.value.map(heading => _createVNode("th", {
-    "key": heading.key,
-    "scope": "col",
-    "class": `p-4 table-heading ${props.headingsClass}`
-  }, [buildItem(heading.label)]))])]), props.items.length > 0 && props.items.map((item, itemIndex) => _createVNode(_Fragment, {
-    "key": itemIndex
-  }, [_createVNode("tbody", {
-    "class": ['border-default-200 border-t', itemIndex % 2 === 0 ? 'bg-white' : 'bg-default-50', item.rowClass]
-  }, [_createVNode("tr", null, [headings.value.map(heading => _createVNode("td", {
-    "key": itemIndex + '-' + heading.key,
-    "class": "p-4"
-  }, [_createVNode("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]), heading.key == N_TABLE_ACTION_KEY && showDetails.value && _createVNode("div", {
-    "class": "inline-flex transition-transform duration-200",
-    "style": {
-      transform: isDetailsOpen(itemIndex) ? 'rotate(-90deg)' : 'rotate(0deg)',
-      transformOrigin: 'center center'
-    }
-  }, [_createVNode(NIconButton, {
-    "icon": ChevronLeftIcon,
-    "onClick": () => toggleDetailsOpen(itemIndex)
-  }, null)])])]))])]), showDetails.value && isDetailsOpen(itemIndex) && _createVNode("tbody", {
-    "class": [itemIndex % 2 === 0 ? 'bg-white' : 'bg-default-50', item.detailsClass]
-  }, [details.value.map((detail, detailIndex) => _createVNode("tr", {
-    "key": `detail-${detailIndex}`
-  }, [_createVNode("td", {
-    "class": ['table-heading px-4 py-1', props.headingDetailsClass, details.value.length - 1 == detailIndex ? 'pb-4' : '']
-  }, [buildItem(detail.label)]), _createVNode("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])])]))])]))])]);
-});
-export { Component as NTable, Component as default };
-/**
- * Builds a JSX-Element out of the item
- */
-function buildItem(item) {
-  if (item === undefined) return undefined;else if (typeof item == 'string' || typeof item == 'number') return _createVNode(_Fragment, null, [item]);else return item();
-}
-function isHeadingDetail(heading) {
-  // take all headings which are details or below the breakpoint
-  return heading.isDetail || heading.breakpoint !== undefined && !isWidthBreakpoint(heading.breakpoint).value;
-}

package/components/NTableAction.d.ts

@@ -1,30 +0,0 @@
-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}.
-     */
-    readonly route: PropType<RouteLocationRaw>;
-    /**
-     * The text of the action.
-     */
-    readonly text: StringConstructor;
-    /**
-     * The html attribute, which indicates the type of the button.
-     */
-    readonly type: {
-        readonly type: PropType<"submit" | "button" | "reset">;
-        readonly default: "button";
-    };
-    /**
-     * This is called when the action is clicked.
-     * It is only called when the `route` prop is not set on the action.
-     */
-    readonly 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 Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NTableAction, Component as default };

package/components/NTableAction.js

@@ -1,50 +0,0 @@
-import { Fragment as _Fragment, createVNode as _createVNode, isVNode as _isVNode } from "vue";
-import { createComponent } from '../utils/component';
-import { RouterLink } from 'vue-router';
-import { nButtonProps } from './NButton';
-function _isSlot(s) {
-  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
-}
-export const nTableActionProps = {
-  /**
-   * 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.
- */
-const Component = createComponent('NTableAction', nTableActionProps, (props, {
-  slots
-}) => {
-  const content = () => slots.default?.() || _createVNode(_Fragment, null, [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 () => {
-    let _slot;
-    return props.route ? _createVNode(RouterLink, {
-      "to": props.route,
-      "class": classes
-    }, _isSlot(_slot = content()) ? _slot : {
-      default: () => [_slot]
-    }) : _createVNode("button", {
-      "type": props.type,
-      "class": classes,
-      "onClick": props.onClick
-    }, [content()]);
-  };
-});
-export { Component as NTableAction, Component as default };

package/components/NTextArea.d.ts

@@ -1,92 +0,0 @@
-import { type PropType } from 'vue';
-export declare const nTextAreaProps: {
-    readonly disableValidation: BooleanConstructor;
-    readonly optional: BooleanConstructor;
-    readonly rules: {
-        readonly type: PropType<import("../utils/validation").ValidationRule[] | import("../utils/validation").ValidationRule>;
-        readonly default: () => never[];
-    };
-    readonly form: PropType<import("./ValidatedForm").ValidatedForm>;
-    readonly error: BooleanConstructor;
-    readonly errorMessage: StringConstructor;
-    readonly hideErrorMessage: BooleanConstructor;
-    readonly disableBlurValidation: BooleanConstructor;
-    readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => JSX.Element>;
-    readonly tooltipHide: BooleanConstructor;
-    readonly tooltipShow: BooleanConstructor;
-    readonly tooltipPlacement: {
-        readonly type: PropType<import("./NTooltip").TooltipPlacement>;
-        readonly default: "auto";
-    };
-    readonly tooltipMaxWidth: {
-        readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
-        readonly default: "max-w-xs";
-    };
-    readonly tooltipWrapperClass: StringConstructor;
-    readonly tooltipContentClass: StringConstructor;
-    readonly tooltipArrowClass: StringConstructor;
-    /**
-     * The name of the text area. Is displayed as a label above the text area.
-     */
-    readonly name: StringConstructor;
-    /**
-     * The placeholder of the text area.
-     */
-    readonly placeholder: StringConstructor;
-    /**
-     * The html autocomplete attribute of the text area.
-     */
-    readonly autocomplete: {
-        readonly type: StringConstructor;
-        readonly default: "off";
-    };
-    /**
-     * If set to `true`, the text area is resizable in y-direction.
-     */
-    readonly resizable: {
-        readonly type: BooleanConstructor;
-        readonly 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`
-     */
-    readonly rows: NumberConstructor;
-    /**
-     * The maximum length of the input string. Entering longer strings are simply
-     * prevented, but no error message is shown to the user.
-     */
-    readonly maxLength: NumberConstructor;
-    /**
-     * If set to `true` the text area is disabled and no interaction is possible.
-     */
-    readonly disabled: BooleanConstructor;
-    /**
-     * If set to `true` the text area's label is hidden.
-     */
-    readonly hideLabel: BooleanConstructor;
-    /**
-     * Adds the classes directly to the input (e.g. for shadow).
-     */
-    readonly inputClass: StringConstructor;
-    /**
-     * This is called when the text area reveices focus.
-     */
-    readonly onFocus: PropType<() => void>;
-    /**
-     * This is called when the text area looses focus.
-     */
-    readonly onBlur: PropType<() => void>;
-    readonly value: PropType<string>;
-    readonly onUpdateValue: PropType<(newValue: string) => void>;
-};
-export type NTextAreaExposed = {
-    /**
-     * Request focus on the text area.
-     */
-    focus(): void;
-};
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NTextArea, Component as default };

package/components/NTextArea.js

@@ -1,133 +0,0 @@
-import { mergeProps as _mergeProps, createVNode as _createVNode, vShow as _vShow, withDirectives as _withDirectives } from "vue";
-import { createComponent } 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 = {
-  ...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,
-  /**
-   * This is called when the text area looses focus.
-   */
-  onBlur: Function,
-  ...nToolTipPropsForImplementor
-};
-export const nTextAreaProps = {
-  ...nTextAreaBaseProps,
-  ...validationProps
-};
-const Component = createComponent('NTextArea', nTextAreaProps, (props, context) => {
-  const textAreaRef = ref();
-  const exposed = {
-    focus: () => textAreaRef.value?.focus()
-  };
-  context.expose(exposed);
-  return () => _createVNode(NValInput, _mergeProps(props, {
-    "input": ({
-      error,
-      onBlur,
-      onUpdateValue
-    }) => _createVNode(NTextAreaBase, _mergeProps({
-      "ref": textAreaRef
-    }, {
-      ...props,
-      error,
-      onBlur,
-      onUpdateValue
-    }), null)
-  }), null);
-});
-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();
-  const exposed = {
-    focus: () => textAreaRef.value?.focus()
-  };
-  context.expose(exposed);
-  return () => _createVNode("div", null, [props.name && !props.hideLabel && _createVNode("label", {
-    "for": props.name,
-    "class": ['block text-sm font-medium mb-1', props.disabled ? 'text-default-300' : 'text-default-700']
-  }, [props.name]), _createVNode(NTooltip, _mergeProps({
-    "block": true
-  }, mapTooltipProps(props)), {
-    default: () => [_createVNode("div", {
-      "class": "relative"
-    }, [_createVNode("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', props.inputClass]
-    }, null), _withDirectives(_createVNode("div", {
-      "class": "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"
-    }, [_createVNode(ExclamationCircleIcon, {
-      "class": "h-5 w-5 text-red-700",
-      "aria-hidden": "true"
-    }, null)]), [[_vShow, props.error]])])]
-  })]);
-});

package/components/NTooltip.css

@@ -1,37 +0,0 @@
-.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;
-}

package/components/NTooltip.d.ts

@@ -1,136 +0,0 @@
-import { type ExtractedProps } from '../utils/component';
-import type { TWMaxWidth } from '../utils/tailwind';
-import { type PropType } from 'vue';
-import './NTooltip.css';
-export declare const nTooltipProps: {
-    /**
-     * The text content of the tooltip.
-     */
-    readonly text: StringConstructor;
-    /**
-     * A slot to replace the content of the tooltip. This will override the `text` prop.
-     */
-    readonly content: PropType<() => JSX.Element>;
-    /**
-     * If set to `true` the tooltip is shown constantly.
-     */
-    readonly show: BooleanConstructor;
-    /**
-     * If set to `true` the tooltip is hidden constantly.
-     */
-    readonly hide: BooleanConstructor;
-    /**
-     * 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.
-     */
-    readonly block: BooleanConstructor;
-    /**
-     * The placement of the tooltip.
-     */
-    readonly placement: {
-        readonly type: PropType<TooltipPlacement>;
-        readonly default: "auto";
-    };
-    /**
-     * The maximum width of the tooltip.
-     */
-    readonly maxWidth: {
-        readonly type: PropType<TWMaxWidth>;
-        readonly default: "max-w-xs";
-    };
-    /**
-     * Adds the classes to the (invisible) wrapper element.
-     */
-    readonly wrapperClass: StringConstructor;
-    /**
-     * Adds the classes to the container of the tooltips content.
-     */
-    readonly contentClass: StringConstructor;
-    /**
-     * Adds the classes to the tooltip arrow. Make sure to use `before:` classes
-     * to target the arrow (which is the before element).
-     */
-    readonly arrowClass: StringConstructor;
-};
-/**
- * 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 declare const nToolTipPropsForImplementor: {
-    /**
-     * Adds a tooltip to the component with the specified text.
-     * @see {@link nTooltipProps.text}
-     */
-    tooltipText: StringConstructor;
-    /**
-     * 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: PropType<() => JSX.Element>;
-    /**
-     * @see {@link nTooltipProps.hide}
-     */
-    tooltipHide: BooleanConstructor;
-    /**
-     * @see {@link nTooltipProps.show}
-     */
-    tooltipShow: BooleanConstructor;
-    /**
-     * @see {@link nTooltipProps.placement}
-     */
-    tooltipPlacement: {
-        readonly type: PropType<TooltipPlacement>;
-        readonly default: "auto";
-    };
-    /**
-     * @see {@link nTooltipProps.maxWidth}
-     */
-    tooltipMaxWidth: {
-        readonly type: PropType<TWMaxWidth>;
-        readonly default: "max-w-xs";
-    };
-    /**
-     * @see {@link nTooltipProps.wrapperClass}
-     */
-    tooltipWrapperClass: StringConstructor;
-    /**
-     * @see {@link nTooltipProps.contentClass}
-     */
-    tooltipContentClass: StringConstructor;
-    /**
-     * @see {@link nTooltipProps.arrowClass}
-     */
-    tooltipArrowClass: StringConstructor;
-};
-/**
- * Maps the {@link nToolTipPropsForImplementor} props to normal tooltip props
- * @returns an object containing the normal tooltip props.
- */
-export declare function mapTooltipProps(props: ExtractedProps<typeof nToolTipPropsForImplementor>): {
-    text: string | undefined;
-    content: (() => JSX.Element) | undefined;
-    hide: boolean;
-    show: boolean;
-    placement: TooltipPlacement;
-    maxWidth: TWMaxWidth;
-    wrapperClass: string | undefined;
-    contentClass: string | undefined;
-    arrowClass: string | undefined;
-};
-/**
- * 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>
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NTooltip, Component as default };
-export type TooltipPlacement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';