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

package/components/NModal.d.ts

@@ -1,133 +0,0 @@
-import type { PropType } from 'vue';
-import type { TWMaxWidth } from '../utils/tailwind';
-export declare const nModalProps: {
-    /**
-     * If set to `true` the header of the modal is hidden.
-     */
-    readonly hideHeader: BooleanConstructor;
-    /**
-     * If set to `true` the footer of the modal is hidden.
-     */
-    readonly hideFooter: BooleanConstructor;
-    /**
-     * If set to `true` the X-button in the top right is hidden.
-     */
-    readonly hideX: BooleanConstructor;
-    /**
-     * The maximum width of the modal. A regular tailwind class.
-     */
-    readonly maxWidth: {
-        readonly type: PropType<TWMaxWidth>;
-        readonly default: "max-w-md";
-    };
-    /**
-     * The vertical position of the modal. Default is `center`.
-     */
-    readonly verticalPosition: {
-        readonly type: PropType<"start" | "center" | "end">;
-        readonly default: "center";
-    };
-    /**
-     * The horizontal position of the modal. Default is `center`.
-     */
-    readonly horizontalPosition: {
-        readonly type: PropType<"start" | "center" | "end">;
-        readonly default: "center";
-    };
-    /**
-     * The title of the modal which is displayed in the header.
-     */
-    readonly title: StringConstructor;
-    /**
-     * The text of the ok-button.
-     */
-    readonly okText: {
-        readonly type: StringConstructor;
-        readonly default: string;
-    };
-    /**
-     * The color of the ok-button.
-     */
-    readonly okColor: {
-        readonly type: StringConstructor;
-        readonly default: "primary";
-    };
-    /**
-     * If set to `true` the modal is closed when `onOk` is called.
-     */
-    readonly closeOnOk: {
-        readonly type: BooleanConstructor;
-        readonly default: true;
-    };
-    /**
-     * If set to `true` the ok-button is hidden.
-     */
-    readonly hideOk: BooleanConstructor;
-    /**
-     * If set to `true` the ok-button is disabled.
-     */
-    readonly okDisabled: BooleanConstructor;
-    /**
-     * The text of the cancel-button.
-     */
-    readonly cancelText: {
-        readonly type: StringConstructor;
-        readonly default: string;
-    };
-    /**
-     * The color of the cancel-button.
-     */
-    readonly cancelColor: {
-        readonly type: StringConstructor;
-        readonly default: "default";
-    };
-    /**
-     * If set to `true`, the modal is closed when clicking on the background.
-     * This will call `onCancel`. Default is `true`.
-     */
-    readonly closeOnBackground: {
-        readonly type: BooleanConstructor;
-        readonly default: true;
-    };
-    /**
-     * If set to `true` the cancel-button is hidden.
-     */
-    readonly hideCancel: BooleanConstructor;
-    /**
-     * This is called when the ok-button was clicked.
-     */
-    readonly onOk: PropType<() => void>;
-    /**
-     * This is called when the cancel-button or X-button was clicked or
-     * if the modal was closed by clicking on the background.
-     */
-    readonly onCancel: PropType<() => void>;
-    /**
-     * A slot to replace the whole modal content including all buttons, header and footer.
-     */
-    readonly modal: PropType<(props: ModalSlotProps) => JSX.Element>;
-    /**
-     * A slot to replace the whole content section, i.e. everything between the header and the footer.
-     */
-    readonly content: PropType<(props: ModalSlotProps) => JSX.Element>;
-    /**
-     * A slot to replace the whole header section (excluding the x).
-     */
-    readonly header: PropType<() => JSX.Element>;
-    /**
-     * A slot to replace the whole footer section.
-     */
-    readonly footer: PropType<(props: ModalSlotProps) => JSX.Element>;
-    readonly value: PropType<boolean>;
-    readonly onUpdateValue: PropType<(newValue: boolean) => void>;
-};
-export type ModalSlotProps = {
-    ok: () => void;
-    cancel: () => void;
-};
-/**
- * The `NModal` is the base component for all modals and dialogs.
- * It provides the core mechanics to display a window in front of everything else.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NModal, Component as default };

package/components/NModal.js

@@ -1,232 +0,0 @@
-import { createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
-import { createComponentWithSlots } from '../utils/component';
-import { Dialog, DialogOverlay, DialogTitle, TransitionRoot, TransitionChild } from '@headlessui/vue';
-import NButton from './NButton';
-import NIconButton from './NIconButton';
-import { XMarkIcon } from '@heroicons/vue/24/solid';
-import { trsl } from '../i18n';
-import { vModelProps } from '../utils/vModel';
-export const nModalProps = {
-  ...vModelProps(Boolean),
-  /**
-   * If set to `true` the header of the modal is hidden.
-   */
-  hideHeader: Boolean,
-  /**
-   * If set to `true` the footer of the modal is hidden.
-   */
-  hideFooter: Boolean,
-  /**
-   * If set to `true` the X-button in the top right is hidden.
-   */
-  hideX: Boolean,
-  /**
-   * The maximum width of the modal. A regular tailwind class.
-   */
-  maxWidth: {
-    type: String,
-    default: 'max-w-md'
-  },
-  /**
-   * The vertical position of the modal. Default is `center`.
-   */
-  verticalPosition: {
-    type: String,
-    default: 'center'
-  },
-  /**
-   * The horizontal position of the modal. Default is `center`.
-   */
-  horizontalPosition: {
-    type: String,
-    default: 'center'
-  },
-  /**
-   * The title of the modal which is displayed in the header.
-   */
-  title: String,
-  /**
-   * The text of the ok-button.
-   */
-  okText: {
-    type: String,
-    default: trsl('vue-collection.action.save')
-  },
-  /**
-   * The color of the ok-button.
-   */
-  okColor: {
-    type: String,
-    default: 'primary'
-  },
-  /**
-   * If set to `true` the modal is closed when `onOk` is called.
-   */
-  closeOnOk: {
-    type: Boolean,
-    default: true
-  },
-  /**
-   * If set to `true` the ok-button is hidden.
-   */
-  hideOk: Boolean,
-  /**
-   * If set to `true` the ok-button is disabled.
-   */
-  okDisabled: Boolean,
-  /**
-   * The text of the cancel-button.
-   */
-  cancelText: {
-    type: String,
-    default: trsl('vue-collection.action.cancel')
-  },
-  /**
-   * The color of the cancel-button.
-   */
-  cancelColor: {
-    type: String,
-    default: 'default'
-  },
-  /**
-   * If set to `true`, the modal is closed when clicking on the background.
-   * This will call `onCancel`. Default is `true`.
-   */
-  closeOnBackground: {
-    type: Boolean,
-    default: true
-  },
-  /**
-   * If set to `true` the cancel-button is hidden.
-   */
-  hideCancel: Boolean,
-  /**
-   * This is called when the ok-button was clicked.
-   */
-  onOk: Function,
-  /**
-   * This is called when the cancel-button or X-button was clicked or
-   * if the modal was closed by clicking on the background.
-   */
-  onCancel: Function,
-  /**
-   * A slot to replace the whole modal content including all buttons, header and footer.
-   */
-  modal: Function,
-  /**
-   * A slot to replace the whole content section, i.e. everything between the header and the footer.
-   */
-  content: Function,
-  /**
-   * A slot to replace the whole header section (excluding the x).
-   */
-  header: Function,
-  /**
-   * A slot to replace the whole footer section.
-   */
-  footer: Function
-};
-/**
- * The `NModal` is the base component for all modals and dialogs.
- * It provides the core mechanics to display a window in front of everything else.
- */
-const Component = createComponentWithSlots('NModal', nModalProps, ['modal', 'header', 'footer'], (props, {
-  slots
-}) => {
-  const ok = () => {
-    props.onOk?.();
-    if (props.closeOnOk) props.onUpdateValue?.(false);
-  };
-  const cancel = () => {
-    props.onCancel?.();
-    props.onUpdateValue?.(false);
-  };
-  return () => _createVNode(TransitionRoot, {
-    "as": "template",
-    "show": props.value
-  }, {
-    default: () => [_createVNode(Dialog, {
-      "as": "div",
-      "static": true,
-      "class": "fixed z-40 inset-0 overflow-y-auto",
-      "onClose": cancel,
-      "open": props.value
-    }, {
-      default: () => [_createVNode("div", {
-        "class": `flex items-${props.verticalPosition} justify-${props.horizontalPosition} min-h-screen`
-      }, [_createVNode(TransitionChild, {
-        "as": "template",
-        "enter": "ease-out duration-300",
-        "enter-from": "opacity-0",
-        "enter-to": "opacity-100",
-        "leave": "ease-in duration-200",
-        "leave-from": "opacity-100",
-        "leave-to": "opacity-0"
-      }, {
-        default: () => [props.closeOnBackground ? _createVNode(DialogOverlay, {
-          "class": "fixed inset-0 bg-default-700 bg-opacity-75"
-        }, null) : _createVNode("div", {
-          "class": "fixed inset-0 bg-default-700 bg-opacity-75"
-        }, null)]
-      }), _createVNode("span", {
-        "class": "hidden align-middle h-screen",
-        "aria-hidden": "true"
-      }, [_createTextVNode("\u200B")]), _createVNode(TransitionChild, {
-        "as": "template",
-        "enter": "ease-out duration-300",
-        "enter-from": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
-        "enter-to": "opacity-100 translate-y-0 sm:scale-100",
-        "leave": "ease-in duration-200",
-        "leave-from": "opacity-100 translate-y-0 sm:scale-100",
-        "leave-to": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-      }, {
-        default: () => [_createVNode("div", {
-          "class": ['transform m-4 w-full align-middle', props.maxWidth]
-        }, [props.modal?.({
-          ok,
-          cancel
-        }) || _createVNode("div", {
-          "class": ['shadow-xl rounded-lg bg-white divide-y divide-default-100', props.maxWidth]
-        }, [!props.hideX && _createVNode("div", {
-          "class": "sm:block absolute top-0 right-0 mt-3 mr-3"
-        }, [_createVNode(NIconButton, {
-          "icon": XMarkIcon,
-          "color": "default",
-          "size": 5,
-          "onClick": cancel
-        }, null)]), !props.hideHeader && _createVNode("div", {
-          "class": "px-4 sm:px-6 pt-4 pb-2 bg-default-50 rounded-t-lg"
-        }, [props.header?.() || _createVNode(DialogTitle, {
-          "as": "h4",
-          "class": "text-lg font-semibold"
-        }, {
-          default: () => [props.title]
-        })]), props.content?.({
-          ok,
-          cancel
-        }) || _createVNode("div", {
-          "class": "px-4 sm:px-6 py-4 rounded-lg"
-        }, [slots.default?.()]), !props.hideFooter && _createVNode("div", {
-          "class": "px-4 sm:px-6 pb-4 pt-2 bg-default-50 rounded-b-lg"
-        }, [props.footer?.({
-          ok,
-          cancel
-        }) || _createVNode("div", {
-          "class": "flex justify-end space-x-2"
-        }, [!props.hideCancel && _createVNode(NButton, {
-          "color": props.cancelColor,
-          "onClick": cancel
-        }, {
-          default: () => [props.cancelText]
-        }), !props.hideOk && _createVNode(NButton, {
-          "color": props.okColor,
-          "onClick": ok,
-          "disabled": props.okDisabled
-        }, {
-          default: () => [props.okText]
-        })])])])])]
-      })])]
-    })]
-  });
-});
-export { Component as NModal, Component as default };

package/components/NPagination.css

@@ -1,15 +0,0 @@
-.pagination-item {
-    @apply h-9 w-9 text-sm inline-flex items-center justify-center border font-medium border-default-300 text-default-500;
-}
-
-.pagination-item.not-small {
-    @apply sm:w-11;
-}
-
-.pagination-item.selectable {
-    @apply hover:bg-default-50 focus:outline-none focus-visible:border-primary-500 focus-visible:ring-primary-500 focus-visible:ring-1 focus-visible:z-[2];
-}
-
-.pagination-item.selectable.selected {
-    @apply border-primary-500 bg-primary-100 hover:bg-primary-100 text-primary-600 z-[1];
-}

package/components/NPagination.d.ts

@@ -1,37 +0,0 @@
-import { type PropType } from 'vue';
-import './NPagination.css';
-export declare const nPaginationProps: {
-    /**
-     * The page number which is currently selected.
-     */
-    readonly value: {
-        readonly type: NumberConstructor;
-        readonly default: () => number;
-    };
-    /**
-     * This is called, when a new page number has been selected.
-     */
-    readonly onUpdateValue: PropType<(newValue: number) => void>;
-    /**
-     * The total pages which exists. This is needed to correctly display the selectable pages.
-     */
-    readonly total: {
-        readonly type: NumberConstructor;
-        readonly default: () => number;
-    };
-    /**
-     * If set to `true`, the pagination is displayed smaller.
-     */
-    readonly small: BooleanConstructor;
-    /**
-     * This is called, when the visible pages, which are selectable in the pagination, have changed.
-     * This is useful as only these pages can be navigated to on the next click.
-     * This information can be useful for prefetching.
-     */
-    readonly onVisiblePagesChanged: PropType<(visiblePages: number[]) => void>;
-};
-/**
- * The `NPagination` is a styled pagination component.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NPagination, Component as default };

package/components/NPagination.js

@@ -1,105 +0,0 @@
-import { createVNode as _createVNode } from "vue";
-import { createComponent } from '../utils/component';
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/solid';
-import { computed, watch } from 'vue';
-import './NPagination.css';
-export const nPaginationProps = {
-  /**
-   * The page number which is currently selected.
-   */
-  value: {
-    type: Number,
-    default: () => 1
-  },
-  /**
-   * This is called, when a new page number has been selected.
-   */
-  onUpdateValue: Function,
-  /**
-   * The total pages which exists. This is needed to correctly display the selectable pages.
-   */
-  total: {
-    type: Number,
-    default: () => 1
-  },
-  /**
-   * If set to `true`, the pagination is displayed smaller.
-   */
-  small: Boolean,
-  /**
-   * This is called, when the visible pages, which are selectable in the pagination, have changed.
-   * This is useful as only these pages can be navigated to on the next click.
-   * This information can be useful for prefetching.
-   */
-  onVisiblePagesChanged: Function
-};
-/**
- * The `NPagination` is a styled pagination component.
- */
-const Component = createComponent('NPagination', nPaginationProps, props => {
-  const numbers = computed(() => {
-    if (props.total <= 7) {
-      return range(1, props.total);
-    } else if (props.value <= 4) {
-      return [...range(1, 5), -1, props.total];
-    } else if (props.value >= props.total - 3) {
-      return [1, -1, ...range(props.total - 4, props.total)];
-    } else {
-      return [1, -1, ...range(props.value - 1, props.value + 1), -1, props.total];
-    }
-  });
-  watch(() => numbers.value, () => {
-    const visiblePages = numbers.value.filter(value => value != -1);
-    props.onVisiblePagesChanged?.(visiblePages);
-  }, {
-    immediate: true
-  });
-  const clickedNumber = value => {
-    if (value <= props.total && value >= 1) props.onUpdateValue?.(value);
-  };
-  const next = () => clickedNumber(props.value + 1);
-  const previous = () => clickedNumber(props.value - 1);
-  const items = computed(() => numbers.value.map(number => {
-    if (number == -1) return {
-      label: '...',
-      selectable: false,
-      selected: false
-    };else return {
-      label: `${number}`,
-      selectable: true,
-      selected: number == props.value,
-      click: () => clickedNumber(number)
-    };
-  }));
-  const classesForItem = item => ['pagination-item', item.selectable ? 'selectable ' : '', item.selected ? 'selected' : '', props.small ? '' : 'not-small'];
-  return () => _createVNode("nav", {
-    "class": "inline-flex rounded-md shadow -space-x-px"
-  }, [_createVNode("button", {
-    "class": ['pagination-item selectable rounded-l-md', props.small ? '' : 'not-small'],
-    "onClick": previous
-  }, [_createVNode(ChevronLeftIcon, {
-    "class": "h-5 w-5",
-    "aria-hidden": "true"
-  }, null)]), items.value.map((item, index) => item.selectable ? _createVNode("button", {
-    "key": index,
-    "class": classesForItem(item),
-    "onClick": item.click
-  }, [item.label]) : _createVNode("div", {
-    "key": index,
-    "class": classesForItem(item)
-  }, [item.label])), _createVNode("button", {
-    "class": ['pagination-item selectable rounded-r-md', props.small ? '' : 'not-small'],
-    "onClick": next
-  }, [_createVNode(ChevronRightIcon, {
-    "class": "h-5 w-5",
-    "aria-hidden": "true"
-  }, null)])]);
-});
-export { Component as NPagination, Component as default };
-function range(from, to) {
-  const array = [];
-  for (let i = from; i <= to; i++) {
-    array.push(i);
-  }
-  return array;
-}

package/components/NSearchbar.d.ts

@@ -1,39 +0,0 @@
-import { type PropType } from 'vue';
-export declare const nSearchbarProps: {
-    /**
-     * The placeholder of the search-bar.
-     */
-    readonly placeholder: {
-        readonly type: StringConstructor;
-        readonly default: string;
-    };
-    /**
-     * If set to `true` the search-bar is displayed smaller.
-     */
-    readonly small: BooleanConstructor;
-    /**
-     * Adds the classes directly to the input (e.g. for shadow).
-     */
-    readonly inputClass: StringConstructor;
-    /**
-     * This is called when the search-bar receives focus.
-     */
-    readonly onFocus: PropType<() => void>;
-    /**
-     * This is called when the search-bar looses focus.
-     */
-    readonly onBlur: PropType<() => void>;
-    readonly value: PropType<string>;
-    readonly onUpdateValue: PropType<(newValue: string) => void>;
-};
-export type NSearchbarExposed = {
-    /**
-     * Request focus on the search-bar.
-     */
-    focus(): void;
-};
-/**
- * The `NSearchbar` is a styled input with a search icon.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NSearchbar, Component as default };

package/components/NSearchbar.js

@@ -1,64 +0,0 @@
-import { createVNode as _createVNode } from "vue";
-import { trsl } from '../i18n';
-import { createComponent } from '../utils/component';
-import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid';
-import { ref } from 'vue';
-import { vModelProps } from '../utils/vModel';
-export const nSearchbarProps = {
-  ...vModelProps(String),
-  /**
-   * The placeholder of the search-bar.
-   */
-  placeholder: {
-    type: String,
-    default: trsl('vue-collection.action.search')
-  },
-  /**
-   * If set to `true` the search-bar is displayed smaller.
-   */
-  small: Boolean,
-  /**
-   * Adds the classes directly to the input (e.g. for shadow).
-   */
-  inputClass: String,
-  /**
-   * This is called when the search-bar receives focus.
-   */
-  onFocus: Function,
-  /**
-   * This is called when the search-bar looses focus.
-   */
-  onBlur: Function
-};
-/**
- * The `NSearchbar` is a styled input with a search icon.
- */
-const Component = createComponent('NSearchbar', nSearchbarProps, (props, context) => {
-  const inputRef = ref();
-  const exposed = {
-    focus: () => {
-      inputRef.value?.focus();
-    }
-  };
-  context.expose(exposed);
-  return () => _createVNode("div", {
-    "class": "relative"
-  }, [_createVNode("div", {
-    "class": "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
-  }, [_createVNode(MagnifyingGlassIcon, {
-    "class": "h-5 w-5 text-default-400",
-    "aria-hidden": "true"
-  }, null)]), _createVNode("input", {
-    "ref": inputRef,
-    "value": props.value,
-    "onInput": event => props.onUpdateValue?.(event.target.value),
-    "type": "text",
-    "name": "search",
-    "placeholder": props.placeholder,
-    "autocomplete": "off",
-    "class": ['block w-full pl-10 pr-4 rounded-md border focus:outline-none focus:ring-1 transition placeholder-default-400 border-default-300 focus:border-primary-500 focus:ring-primary-500', props.small ? 'py-1' : 'py-2', props.inputClass],
-    "onFocus": props.onFocus,
-    "onBlur": props.onBlur
-  }, null)]);
-});
-export { Component as NSearchbar, Component as default };

package/components/NSearchbarList.d.ts

@@ -1,33 +0,0 @@
-export declare const nSearchbarListProps: {
-    /**
-     * @see {@link nSearchbarProps.placeholder}
-     */
-    readonly placeholder: {
-        readonly type: StringConstructor;
-        readonly default: string;
-    };
-    /**
-     * Adds the classes directly to the input (e.g. for shadow).
-     */
-    readonly inputClass: StringConstructor;
-    readonly value: import("vue").PropType<string>;
-    readonly onUpdateValue: import("vue").PropType<(newValue: string) => void>;
-    readonly items: {
-        readonly type: import("vue").PropType<Array<import("./NSuggestionList").SuggestionItem>>;
-        readonly default: () => never[];
-    };
-    readonly maxItems: {
-        readonly type: NumberConstructor;
-        readonly default: () => number;
-    };
-    readonly hideList: BooleanConstructor;
-    readonly loading: BooleanConstructor;
-    readonly onSelect: import("vue").PropType<(id: string) => void>;
-    readonly listItem: import("vue").PropType<(props: import("./NSuggestionList").ItemSlotProps) => JSX.Element>;
-    readonly onRealBlur: import("vue").PropType<() => void>;
-};
-/**
- * The `NSearchbarList` is a {@link NSearchbar} with a {@link NSuggestionList}.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NSearchbarList, Component as default };