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

package/components/NSearchbarList.js

@@ -1,41 +0,0 @@
-import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
-import { createComponentWithSlots } from '../utils/component';
-import { ref } from 'vue';
-import { vModelProps } from '../utils/vModel';
-import NSearchbar, { nSearchbarProps } from './NSearchbar';
-import NSuggestionList, { nSuggestionListPropsForConfig } from './NSuggestionList';
-export const nSearchbarListProps = {
-  ...nSuggestionListPropsForConfig,
-  ...vModelProps(String),
-  /**
-   * @see {@link nSearchbarProps.placeholder}
-   */
-  placeholder: nSearchbarProps.placeholder,
-  /**
-   * Adds the classes directly to the input (e.g. for shadow).
-   */
-  inputClass: String
-};
-/**
- * The `NSearchbarList` is a {@link NSearchbar} with a {@link NSuggestionList}.
- */
-const Component = createComponentWithSlots('NSearchbarList', nSearchbarListProps, ['listItem'], props => {
-  const searchbarRef = ref();
-  return () => _createVNode(NSuggestionList, _mergeProps(props, {
-    "inputValue": props.value || '',
-    "input": ({
-      onFocus,
-      onBlur
-    }) => _createVNode(NSearchbar, {
-      "ref": searchbarRef,
-      "value": props.value,
-      "onUpdateValue": props.onUpdateValue,
-      "placeholder": props.placeholder,
-      "inputClass": `shadow-lg ${props.inputClass}`,
-      "onFocus": onFocus,
-      "onBlur": onBlur
-    }, null),
-    "onRequestInputFocus": () => searchbarRef.value?.focus()
-  }), null);
-});
-export { Component as NSearchbarList, Component as default };

package/components/NSelect.d.ts

@@ -1,78 +0,0 @@
-import type { Identifiable } from '../utils/identifiable';
-import { type PropType } from 'vue';
-import { type NValInputExposed } from './NValInput';
-export declare const nSelectProps: {
-    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 id of the currently selected option of this input.
-     */
-    readonly value: StringConstructor;
-    /**
-     * This is called with the newly selected id when the selection has changed.
-     * If no id is selected, the empty string is passed, in order to
-     * match the API of all other inputs who never pass `undefined`.
-     */
-    readonly onUpdateValue: PropType<(newValue: string) => void>;
-    /**
-     * The different options which can be selected.
-     */
-    readonly options: {
-        readonly type: PropType<SelectionOption[]>;
-        readonly default: () => never[];
-    };
-    /**
-     * The value which is shown in the empty state.
-     * The "nothing-option" will be called like this.
-     */
-    readonly placeholder: {
-        readonly type: StringConstructor;
-        readonly default: () => string;
-    };
-    /**
-     * @see {@link nValInputProps.name}
-     */
-    readonly name: StringConstructor;
-    /**
-     * @see {@link nValInputProps.optional}
-     */
-    readonly optional: BooleanConstructor;
-    /**
-     * @see {@link nValInputProps.disabled}
-     */
-    readonly disabled: BooleanConstructor;
-    /**
-     * @see {@link nValInputProps.form}
-     */
-    readonly form: PropType<import("./ValidatedForm").ValidatedForm>;
-    /**
-     * @see {@link nValInputProps.hideLabel}
-     */
-    readonly hideLabel: BooleanConstructor;
-    /**
-     * @see {@link nValInputProps.inputClass}
-     */
-    readonly inputClass: StringConstructor;
-};
-export type SelectionOption = Identifiable & {
-    label: string;
-};
-export type NSelectExposed = NValInputExposed;
-/**
- * The `NSelect` is a styled html select-input.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NSelect, Component as default };

package/components/NSelect.js

@@ -1,101 +0,0 @@
-import { Fragment as _Fragment, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
-import { trsl } from '../i18n';
-import { createComponent } from '../utils/component';
-import { ref } from 'vue';
-import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip';
-import NValInput, { nValInputProps } from './NValInput';
-export const nSelectProps = {
-  /**
-   * The id of the currently selected option of this input.
-   */
-  value: String,
-  /**
-   * This is called with the newly selected id when the selection has changed.
-   * If no id is selected, the empty string is passed, in order to
-   * match the API of all other inputs who never pass `undefined`.
-   */
-  onUpdateValue: Function,
-  /**
-   * The different options which can be selected.
-   */
-  options: {
-    type: Array,
-    default: () => []
-  },
-  /**
-   * The value which is shown in the empty state.
-   * The "nothing-option" will be called like this.
-   */
-  placeholder: {
-    type: String,
-    default: () => trsl('vue-collection.action.select')
-  },
-  /**
-   * @see {@link nValInputProps.name}
-   */
-  name: nValInputProps.name,
-  /**
-   * @see {@link nValInputProps.optional}
-   */
-  optional: nValInputProps.optional,
-  /**
-   * @see {@link nValInputProps.disabled}
-   */
-  disabled: nValInputProps.disabled,
-  /**
-   * @see {@link nValInputProps.form}
-   */
-  form: nValInputProps.form,
-  /**
-   * @see {@link nValInputProps.hideLabel}
-   */
-  hideLabel: nValInputProps.hideLabel,
-  /**
-   * @see {@link nValInputProps.inputClass}
-   */
-  inputClass: nValInputProps.inputClass,
-  ...nToolTipPropsForImplementor
-};
-/**
- * The `NSelect` is a styled html select-input.
- */
-const Component = createComponent('NSelect', nSelectProps, (props, context) => {
-  const inputRef = ref();
-  const exposed = {
-    focus: () => inputRef.value?.focus(),
-    validate: () => {
-      if (inputRef.value == null) throw new Error('Can not validate NSelect as its input was undefined');
-      return inputRef.value.validate();
-    },
-    reset: () => inputRef.value?.reset()
-  };
-  context.expose(exposed);
-  return () => _createVNode(NValInput, _mergeProps({
-    "ref": inputRef
-  }, props, {
-    "input": slotProps => _createVNode(_Fragment, 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("select", {
-        "name": props.name,
-        "disabled": props.disabled,
-        "value": props.value,
-        "onChange": event => slotProps.onUpdateValue(event.target.value),
-        "onBlur": slotProps.onBlur,
-        "class": ['block w-full py-2 pl-4 pr-10 rounded-md border focus:outline-none focus:ring-1', props.disabled ? 'text-default-300 ' : 'text-default-900 ', slotProps.error ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'border-default-300 focus:border-primary-500 focus:ring-primary-500', props.inputClass]
-      }, [_createVNode("option", {
-        "disabled": !props.optional,
-        "selected": !props.value,
-        "value": ""
-      }, [props.placeholder]), props.options.map(option => _createVNode("option", {
-        "key": option.id,
-        "value": option.id,
-        "selected": props.value == option.id
-      }, [option.label]))])]
-    })])
-  }), null);
-});
-export { Component as NSelect, Component as default };

package/components/NSuggestionList.d.ts

@@ -1,153 +0,0 @@
-import type { Identifiable } from '../utils/identifiable';
-import { type PropType } from 'vue';
-import type { AnyObject } from '../utils/utils';
-export declare const nSuggestionListPropsForConfig: {
-    /**
-     * The items which are available to show in the list. The first `maxItems` will be displayed.
-     */
-    readonly items: {
-        readonly type: PropType<Array<SuggestionItem>>;
-        readonly default: () => never[];
-    };
-    /**
-     * The maximum items which are displayed in the list.
-     */
-    readonly maxItems: {
-        readonly type: NumberConstructor;
-        readonly default: () => number;
-    };
-    /**
-     * If set to `true` the list is hidden.
-     */
-    readonly hideList: BooleanConstructor;
-    /**
-     * If set to `true` the list shows a loading indicator when the `items` array is empty.
-     */
-    readonly loading: BooleanConstructor;
-    /**
-     * This is called with the id of the selected item.
-     */
-    readonly onSelect: PropType<(id: string) => void>;
-    /**
-     * The slot for every item of the list.
-     */
-    readonly listItem: PropType<(props: ItemSlotProps) => JSX.Element>;
-    /**
-     * This function is called, when the input and the suggestion list are really blurred.
-     * This means, it's not just the input temporarly beeing blurred because the user clicks on the item list,
-     * but the focus has completely disappeared from the input and the list.
-     */
-    readonly onRealBlur: PropType<() => void>;
-};
-export declare const nSuggestionListPropsForInput: {
-    /**
-     * The slot for the input, which will be enhanced with the suggestion list.
-     */
-    readonly input: {
-        readonly type: PropType<(props: InputSlotProps) => JSX.Element>;
-        readonly required: true;
-    };
-    /**
-     * When this function is called, the parent is required to call focus() on the input element.
-     * It won't work properly if the parent does not request focus on the input.
-     */
-    readonly onRequestInputFocus: {
-        readonly type: PropType<() => void>;
-        readonly required: true;
-    };
-    /**
-     * The current value of the input. This is just needed to display the «No results found for {value}» message.
-     */
-    readonly inputValue: {
-        readonly type: StringConstructor;
-        readonly required: true;
-    };
-};
-export declare const nSuggestionListProps: {
-    /**
-     * The slot for the input, which will be enhanced with the suggestion list.
-     */
-    readonly input: {
-        readonly type: PropType<(props: InputSlotProps) => JSX.Element>;
-        readonly required: true;
-    };
-    /**
-     * When this function is called, the parent is required to call focus() on the input element.
-     * It won't work properly if the parent does not request focus on the input.
-     */
-    readonly onRequestInputFocus: {
-        readonly type: PropType<() => void>;
-        readonly required: true;
-    };
-    /**
-     * The current value of the input. This is just needed to display the «No results found for {value}» message.
-     */
-    readonly inputValue: {
-        readonly type: StringConstructor;
-        readonly required: true;
-    };
-    /**
-     * The items which are available to show in the list. The first `maxItems` will be displayed.
-     */
-    readonly items: {
-        readonly type: PropType<Array<SuggestionItem>>;
-        readonly default: () => never[];
-    };
-    /**
-     * The maximum items which are displayed in the list.
-     */
-    readonly maxItems: {
-        readonly type: NumberConstructor;
-        readonly default: () => number;
-    };
-    /**
-     * If set to `true` the list is hidden.
-     */
-    readonly hideList: BooleanConstructor;
-    /**
-     * If set to `true` the list shows a loading indicator when the `items` array is empty.
-     */
-    readonly loading: BooleanConstructor;
-    /**
-     * This is called with the id of the selected item.
-     */
-    readonly onSelect: PropType<(id: string) => void>;
-    /**
-     * The slot for every item of the list.
-     */
-    readonly listItem: PropType<(props: ItemSlotProps) => JSX.Element>;
-    /**
-     * This function is called, when the input and the suggestion list are really blurred.
-     * This means, it's not just the input temporarly beeing blurred because the user clicks on the item list,
-     * but the focus has completely disappeared from the input and the list.
-     */
-    readonly onRealBlur: PropType<() => void>;
-};
-export type InputSlotProps = {
-    /**
-     * Should be called when the input receives focus.
-     */
-    onFocus(): void;
-    /**
-     * Should be called when the input is blurred.
-     */
-    onBlur(): void;
-};
-export type ItemSlotProps<T extends Identifiable = SuggestionItem> = {
-    /**
-     * The current item of the list
-     */
-    item: T;
-    /**
-     * Is true, when the current item is highlighted ("hovered" with the keys)
-     */
-    highlighted: boolean;
-};
-export type SuggestionItem = Identifiable & {
-    label?: string;
-} & AnyObject;
-/**
- * The `NSuggestionList` can be added to an input and adds a list below it which is shown when the input is focused.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NSuggestionList, Component as default };

package/components/NSuggestionList.js

@@ -1,160 +0,0 @@
-import { createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
-import { trsl } from '../i18n';
-import { createComponentWithSlots } from '../utils/component';
-import { computed, ref } from 'vue';
-import NLoadingIndicator from './NLoadingIndicator';
-export const nSuggestionListPropsForConfig = {
-  /**
-   * The items which are available to show in the list. The first `maxItems` will be displayed.
-   */
-  items: {
-    type: Array,
-    default: () => []
-  },
-  /**
-   * The maximum items which are displayed in the list.
-   */
-  maxItems: {
-    type: Number,
-    default: () => 8
-  },
-  /**
-   * If set to `true` the list is hidden.
-   */
-  hideList: Boolean,
-  /**
-   * If set to `true` the list shows a loading indicator when the `items` array is empty.
-   */
-  loading: Boolean,
-  /**
-   * This is called with the id of the selected item.
-   */
-  onSelect: Function,
-  /**
-   * The slot for every item of the list.
-   */
-  listItem: Function,
-  /**
-   * This function is called, when the input and the suggestion list are really blurred.
-   * This means, it's not just the input temporarly beeing blurred because the user clicks on the item list,
-   * but the focus has completely disappeared from the input and the list.
-   */
-  onRealBlur: Function
-};
-export const nSuggestionListPropsForInput = {
-  /**
-   * The slot for the input, which will be enhanced with the suggestion list.
-   */
-  input: {
-    type: Function,
-    required: true
-  },
-  /**
-   * When this function is called, the parent is required to call focus() on the input element.
-   * It won't work properly if the parent does not request focus on the input.
-   */
-  onRequestInputFocus: {
-    type: Function,
-    required: true
-  },
-  /**
-   * The current value of the input. This is just needed to display the «No results found for {value}» message.
-   */
-  inputValue: {
-    type: String,
-    required: true
-  }
-};
-export const nSuggestionListProps = {
-  ...nSuggestionListPropsForConfig,
-  ...nSuggestionListPropsForInput
-};
-/**
- * The `NSuggestionList` can be added to an input and adds a list below it which is shown when the input is focused.
- */
-const Component = createComponentWithSlots('NSuggestionList', nSuggestionListProps, ['input', 'listItem'], props => {
-  const selectedIndex = ref(null);
-  const displayItems = computed(() => props.items.slice(0, props.maxItems));
-  const isInFocus = ref(false);
-  const showList = computed(() => isInFocus.value && !props.hideList);
-  let listButtonClicked = false;
-  const onFocus = () => isInFocus.value = true;
-  const onListMouseDown = () => listButtonClicked = true;
-  const onListMouseLeave = () => props.onRequestInputFocus();
-  const onBlur = () => {
-    if (!listButtonClicked) {
-      isInFocus.value = false;
-      props.onRealBlur?.();
-    }
-    listButtonClicked = false;
-  };
-  const onSelect = id => {
-    props.onSelect?.(id);
-    props.onRequestInputFocus();
-  };
-  const keydown = event => {
-    if (event.key == 'ArrowDown') {
-      event.preventDefault();
-      nextItem();
-    } else if (event.key == 'ArrowUp') {
-      event.preventDefault();
-      previoiusItem();
-    } else if (event.key == 'Enter') {
-      event.preventDefault();
-      const index = selectedIndex.value;
-      if (index != null && index < displayItems.value.length) {
-        const item = displayItems.value[index];
-        if (item) {
-          onSelect(item.id);
-        }
-      }
-    }
-  };
-  const nextItem = () => {
-    adjustIndexToSize();
-    const currentIndex = selectedIndex.value;
-    let nextIndex = currentIndex == null ? 0 : currentIndex + 1;
-    if (nextIndex >= displayItems.value.length) nextIndex = null;
-    selectedIndex.value = nextIndex;
-  };
-  const previoiusItem = () => {
-    adjustIndexToSize();
-    const currentIndex = selectedIndex.value;
-    let previousIndex = currentIndex == null ? displayItems.value.length - 1 : currentIndex - 1;
-    if (previousIndex < 0) previousIndex = null;
-    selectedIndex.value = previousIndex;
-  };
-  const adjustIndexToSize = () => {
-    if (selectedIndex.value != null && selectedIndex.value >= displayItems.value.length) {
-      selectedIndex.value = null;
-    }
-  };
-  return () => _createVNode("div", {
-    "onKeydown": keydown
-  }, [props.input({
-    onFocus,
-    onBlur
-  }), _createVNode("div", {
-    "class": "relative"
-  }, [showList.value && _createVNode("div", {
-    "class": "bg-white rounded-md shadow-lg p-2 absolute top-2 left-0 min-w-full z-10"
-  }, [_createVNode("ul", null, [displayItems.value.map((item, index) => _createVNode("li", {
-    "key": item.id,
-    "class": ['focus:outline-none hover:bg-default-50 rounded-md select-none p-2 cursor-pointer', selectedIndex.value === index ? 'bg-default-50' : ''],
-    "onMousedown": onListMouseDown,
-    "onMouseleave": onListMouseLeave,
-    "onClick": () => onSelect(item.id)
-  }, [props.listItem?.({
-    item,
-    highlighted: selectedIndex.value === index
-  }) || item.label])), displayItems.value.length == 0 && _createVNode("div", {
-    "class": "p-2 text-sm font-medium text-default-700"
-  }, [props.loading ? _createVNode("div", {
-    "class": "flex items-center space-x-2"
-  }, [_createVNode(NLoadingIndicator, {
-    "size": 6
-  }, null), _createVNode("span", null, [_createTextVNode(" "), trsl('vue-collection.text.loading-search-results')])]) : _createVNode("div", null, [trsl('vue-collection.text.no-search-results', {
-    input: props.inputValue
-  })])])])])])]);
-});
-export { Component as NSuggestionList, Component as default };

package/components/NTable.css

@@ -1,3 +0,0 @@
-.table-heading {
-    @apply text-left text-xs font-medium text-default-500 uppercase tracking-wider;
-}

package/components/NTable.d.ts

@@ -1,97 +0,0 @@
-import { type TWBreakpoint } from '../utils/breakpoints';
-import { type PropType } from 'vue';
-import './NTable.css';
-export type TableItem = string | number | (() => JSX.Element);
-export type TableHeading = {
-    /**
-     * The key of the table heading. This should match the key of the items.
-     */
-    key: string;
-    /**
-     * The label of the table heading. If not set, no label is displayed.
-     */
-    label?: TableItem;
-    /**
-     * If set to `true` the whole column of this heading will be emphasized.
-     */
-    emph?: boolean;
-    /**
-     * This classes will be directly set to all cells in the column of this heading.
-     */
-    cellClass?: string;
-    /**
-     * This classes will be directly set on all cells of this heading, when they show up in the details.
-     */
-    detailsClass?: string;
-    /**
-     * If set the heading will become a details entry when the screen is smaller than the specified breakpoint.
-     */
-    breakpoint?: TWBreakpoint;
-    /**
-     * If set to `true`, this heading will always show up inside the details. If this is set the `breakpoint`
-     * property has no effect, because the items always show up as details ignoring the breakpoint.
-     */
-    isDetail?: boolean;
-};
-export type TableRow = Record<string, TableItem> & {
-    /**
-     * The TableItem is used as the last element of the table and
-     * merged together in one cell with the button to toggle the details.
-     */
-    action?: TableItem;
-    /**
-     * This classes will be applied to the whole table row.
-     */
-    rowClass?: string;
-    /**
-     * This classes will be applied to the whole details section of the row.
-     */
-    detailsClass?: string;
-};
-export declare const nTableProps: {
-    /**
-     * 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[];
-    };
-};
-/**
- * The `NTable` is a styled html table which accepts data and displays it appropriately.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NTable, Component as default };