@naptics/vue-collection 0.2.15 → 0.3.0

package/components/NTable.d.ts

@@ -93,89 +93,5 @@ export declare const nTableProps: {
 /**
  * The `NTable` is a styled html table which accepts data and displays it appropriately.
  */
-declare const Component: import("vue").DefineComponent<{
-    /**
-     * The headings of the table. These define which columns are shown in the table and in which order.
-     */
-    readonly headings: {
-        readonly type: PropType<TableHeading[]>;
-        readonly required: true;
-    };
-    /**
-     * Adds the classes to all headings at the top of the table.
-     */
-    readonly headingsClass: StringConstructor;
-    /**
-     * Adds the classes to all headings in the details of the table.
-     */
-    readonly headingDetailsClass: StringConstructor;
-    /**
-     * 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
-     * ]
-     */
-    readonly items: {
-        readonly type: PropType<TableRow[]>;
-        readonly default: () => never[];
-    };
-}, 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 headings of the table. These define which columns are shown in the table and in which order.
-     */
-    readonly headings: {
-        readonly type: PropType<TableHeading[]>;
-        readonly required: true;
-    };
-    /**
-     * Adds the classes to all headings at the top of the table.
-     */
-    readonly headingsClass: StringConstructor;
-    /**
-     * Adds the classes to all headings in the details of the table.
-     */
-    readonly headingDetailsClass: StringConstructor;
-    /**
-     * 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
-     * ]
-     */
-    readonly items: {
-        readonly type: PropType<TableRow[]>;
-        readonly default: () => never[];
-    };
-}>> & {}, {
-    readonly items: TableRow[];
-}>;
+declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
 export { Component as NTable, Component as default };

package/components/NTable.js

@@ -1,7 +1,7 @@
-import { Fragment as _Fragment, createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
 import { isWidthBreakpoint } from '../utils/breakpoints';
 import { createComponent } from '../utils/component';
-import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/24/solid';
+import { ChevronLeftIcon } from '@heroicons/vue/24/solid';
 import { computed, Fragment, ref, watch } from 'vue';
 import NIconButton from './NIconButton';
 import './NTable.css';
@@ -95,17 +95,23 @@ const Component = createComponent('NTable', nTableProps, props => {
     "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(NIconButton, {
-    "icon": isDetailsOpen(itemIndex) ? ChevronDownIcon : ChevronUpIcon,
+  }, [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", {
+  }, 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' : ''],
+    "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])])]))])]))])]);
 });

package/components/NTableAction.d.ts

@@ -13,7 +13,7 @@ export declare const nTableActionProps: {
      * The html attribute, which indicates the type of the button.
      */
     readonly type: {
-        readonly type: PropType<"button" | "submit" | "reset">;
+        readonly type: PropType<"submit" | "button" | "reset">;
         readonly default: "button";
     };
     /**
@@ -26,49 +26,5 @@ export declare const nTableActionProps: {
  * 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").DefineComponent<{
-    /**
-     * 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<"button" | "submit" | "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>;
-}, 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}.
-     */
-    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<"button" | "submit" | "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>;
-}>> & {}, {
-    readonly type: "button" | "submit" | "reset";
-}>;
+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,4 +1,4 @@
-import { isVNode as _isVNode, createVNode as _createVNode, Fragment as _Fragment } from "vue";
+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';

package/components/NTextArea.d.ts

@@ -3,7 +3,7 @@ export declare const nTextAreaProps: {
     readonly disableValidation: BooleanConstructor;
     readonly optional: BooleanConstructor;
     readonly rules: {
-        readonly type: PropType<import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[]>;
+        readonly type: PropType<import("../utils/validation").ValidationRule[] | import("../utils/validation").ValidationRule>;
         readonly default: () => never[];
     };
     readonly form: PropType<import("./ValidatedForm").ValidatedForm>;
@@ -88,184 +88,5 @@ export type NTextAreaExposed = {
      */
     focus(): void;
 };
-declare const Component: import("vue").DefineComponent<{
-    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>;
-}, 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<{
-    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>;
-}>> & {}, {
-    readonly tooltipHide: boolean;
-    readonly tooltipShow: boolean;
-    readonly tooltipPlacement: import("./NTooltip").TooltipPlacement;
-    readonly tooltipMaxWidth: import("../utils/tailwind").TWMaxWidth;
-    readonly disabled: boolean;
-    readonly error: boolean;
-    readonly autocomplete: string;
-    readonly hideLabel: boolean;
-    readonly disableValidation: boolean;
-    readonly optional: boolean;
-    readonly rules: import("../utils/validation").ValidationRule | import("../utils/validation").ValidationRule[];
-    readonly hideErrorMessage: boolean;
-    readonly disableBlurValidation: boolean;
-    readonly resizable: boolean;
-}>;
+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,4 +1,4 @@
-import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+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';

package/components/NTooltip.d.ts

@@ -131,110 +131,6 @@ export declare function mapTooltipProps(props: ExtractedProps<typeof nToolTipPro
  *      <NButton />
  * </NTooltip>
  */
-declare const Component: import("vue").DefineComponent<{
-    /**
-     * 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;
-}, 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 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;
-}>> & {}, {
-    readonly show: boolean;
-    readonly hide: boolean;
-    readonly block: boolean;
-    readonly placement: TooltipPlacement;
-    readonly maxWidth: TWMaxWidth;
-}>;
+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';

package/components/NTooltip.js

@@ -1,4 +1,4 @@
-import { withDirectives as _withDirectives, vShow as _vShow, Fragment as _Fragment, createVNode as _createVNode } from "vue";
+import { createVNode as _createVNode, Fragment as _Fragment, vShow as _vShow, withDirectives as _withDirectives } from "vue";
 import { createComponent } from '../utils/component';
 import { uniqueId } from '../utils/utils';
 import { computed, onMounted, ref, watch, onUnmounted, Transition } from 'vue';