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

package/components/NInputSuggestion.js

@@ -1,64 +0,0 @@
-import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
-import { createComponent } from '../utils/component';
-import { Id } from '../utils/identifiable';
-import { computed, ref } from 'vue';
-import NSuggestionList, { nSuggestionListProps } from './NSuggestionList';
-import NValInput, { nValInputProps } from './NValInput';
-export const nInputSuggestionProps = {
-  ...nValInputProps,
-  /**
-   * If set to `true` the list is hidden even if there are still matching items in the list.
-   */
-  hideList: nSuggestionListProps.hideList,
-  /**
-   * @see {@link nSuggestionListProps.maxItems}
-   */
-  maxItems: nSuggestionListProps.maxItems,
-  /**
-   * The suggestions which are shown to the user for this input.
-   * The suggestions are filtered based on the user input.
-   */
-  suggestions: {
-    type: Array,
-    default: () => []
-  }
-};
-/**
- * `NInputSuggestion` is an input, which shows a list of possible suggestions to the user
- *  which is filtered while typing. Contrary to {@link NInputSelect} the user is not required to choose any of the suggestions.
- */
-const Component = createComponent('NInputSuggestion', nInputSuggestionProps, props => {
-  const suggestionItems = computed(() => props.suggestions.filter(suggestion => suggestion.includes(props.value || '')).map((value, index) => ({
-    id: index.toString(),
-    label: value
-  })));
-  const select = id => props.onUpdateValue?.(Id.find(suggestionItems.value, id)?.label || '');
-  const hideList = computed(() => props.hideList || suggestionItems.value.length == 0 || suggestionItems.value.filter(suggestion => suggestion.label !== props.value).length == 0);
-  const inputRef = ref();
-  return () => _createVNode(NSuggestionList, {
-    "items": suggestionItems.value,
-    "onSelect": id => select(id),
-    "inputValue": props.value || '',
-    "hideList": hideList.value,
-    "maxItems": props.maxItems,
-    "input": ({
-      onFocus,
-      onBlur
-    }) => _createVNode(NValInput, _mergeProps({
-      "ref": inputRef
-    }, props, {
-      "onFocus": () => {
-        onFocus();
-        props.onFocus?.();
-      },
-      "onBlur": onBlur,
-      "disableBlurValidation": true
-    }), null),
-    "onRequestInputFocus": () => inputRef.value?.focus(),
-    "onRealBlur": () => {
-      props.onBlur?.();
-      inputRef?.value?.validate();
-    }
-  }, null);
-});
-export { Component as NInputSuggestion, Component as default };

package/components/NLink.d.ts

@@ -1,47 +0,0 @@
-import type { TWTextSize } from '../utils/tailwind';
-import { type PropType } from 'vue';
-import { type RouteLocationRaw } from 'vue-router';
-export declare const nLinkProps: {
-    /**
-     * The text of the link. Can also be set in the default slot.
-     */
-    readonly text: StringConstructor;
-    /**
-     * The route of the link. If this is set,
-     * the link becomes a {@link RouterLink} and does not emit the `onClick` event.
-     */
-    readonly route: PropType<RouteLocationRaw>;
-    /**
-     * The color of the link.
-     */
-    readonly color: {
-        readonly type: StringConstructor;
-        readonly default: "primary";
-    };
-    /**
-     * The text size, a standard tailwind text-size class.
-     */
-    readonly textSize: PropType<TWTextSize>;
-    /**
-     * The shade of the link.
-     */
-    readonly shade: {
-        readonly type: NumberConstructor;
-        readonly default: 500;
-    };
-    /**
-     * If set to `true` the link is disabled and no interaction is possible.
-     * Note: If the `route` prop is set, the link will still be clickable, because it becomes a {@link RouterLink}.
-     */
-    readonly disabled: BooleanConstructor;
-    /**
-     * This is called when the link is clicked but only, if the `route` prop is not set.
-     * If the `route` prop is not set, the link will act as a regular button.
-     */
-    readonly onClick: PropType<() => void>;
-};
-/**
- * The `NLink` is a styled text which can be used as a {@link RouterLink} or a regular button.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NLink, Component as default };

package/components/NLink.js

@@ -1,67 +0,0 @@
-import { createVNode as _createVNode } from "vue";
-import { createComponent } from '../utils/component';
-import { computed } from 'vue';
-import { RouterLink } from 'vue-router';
-export const nLinkProps = {
-  /**
-   * The text of the link. Can also be set in the default slot.
-   */
-  text: String,
-  /**
-   * The route of the link. If this is set,
-   * the link becomes a {@link RouterLink} and does not emit the `onClick` event.
-   */
-  route: [Object, String],
-  /**
-   * The color of the link.
-   */
-  color: {
-    type: String,
-    default: 'primary'
-  },
-  /**
-   * The text size, a standard tailwind text-size class.
-   */
-  textSize: String,
-  /**
-   * The shade of the link.
-   */
-  shade: {
-    type: Number,
-    default: 500
-  },
-  /**
-   * If set to `true` the link is disabled and no interaction is possible.
-   * Note: If the `route` prop is set, the link will still be clickable, because it becomes a {@link RouterLink}.
-   */
-  disabled: Boolean,
-  /**
-   * This is called when the link is clicked but only, if the `route` prop is not set.
-   * If the `route` prop is not set, the link will act as a regular button.
-   */
-  onClick: Function
-};
-/**
- * The `NLink` is a styled text which can be used as a {@link RouterLink} or a regular button.
- */
-const Component = createComponent('NLink', nLinkProps, (props, {
-  slots
-}) => {
-  const hoverShade = computed(() => {
-    const shade = props.shade;
-    if (shade <= 500) return shade + 100;else return shade - 200;
-  });
-  const classes = computed(() => ['font-medium focus:outline-none focus-visible:ring-2 rounded-sm ring-offset-2 hover:underline text-left', `${props.textSize} text-${props.color}-${props.shade} hover:text-${props.color}-${hoverShade.value} focus-visible:ring-${props.color}-${props.shade}`]);
-  const disabledClasses = computed(() => ['font-medium text-left cursor-not-allowed', `${props.textSize} text-${props.color}-200`]);
-  return () => props.route ? _createVNode(RouterLink, {
-    "to": props.route,
-    "class": classes.value
-  }, {
-    default: () => [slots.default?.() || props.text]
-  }) : _createVNode("button", {
-    "onClick": props.onClick,
-    "class": props.disabled ? disabledClasses.value : classes.value,
-    "disabled": props.disabled
-  }, [slots.default?.() || props.text]);
-});
-export { Component as NLink, Component as default };

package/components/NList.d.ts

@@ -1,37 +0,0 @@
-import type { PropType } from 'vue';
-export type ListItem = {
-    /**
-     * The title of the item. Accepts either string or a function returning a JSX element.
-     */
-    title: string | (() => JSX.Element);
-    /**
-     * The text of the item. Accepts either string or a function returning a JSX element.
-     */
-    text?: string | (() => JSX.Element);
-};
-export declare const nListProps: {
-    /**
-     * The items which are displayed in the list.
-     */
-    readonly items: {
-        readonly type: PropType<ListItem[]>;
-        readonly default: () => never[];
-    };
-    /**
-     * Adds the classes to all title elements (on the left side).
-     */
-    readonly titleClass: StringConstructor;
-    /**
-     * Adds the classes to all text elements (on the right side).
-     */
-    readonly textClass: StringConstructor;
-    /**
-     * Adds the classes to each row.
-     */
-    readonly rowClass: StringConstructor;
-};
-/**
- * The `NList` displays key-value data in an appealing way.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NList, Component as default };

package/components/NList.js

@@ -1,40 +0,0 @@
-import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
-import { createComponent } from '../utils/component';
-export const nListProps = {
-  /**
-   * The items which are displayed in the list.
-   */
-  items: {
-    type: Array,
-    default: () => []
-  },
-  /**
-   * Adds the classes to all title elements (on the left side).
-   */
-  titleClass: String,
-  /**
-   * Adds the classes to all text elements (on the right side).
-   */
-  textClass: String,
-  /**
-   * Adds the classes to each row.
-   */
-  rowClass: String
-};
-/**
- * The `NList` displays key-value data in an appealing way.
- */
-const Component = createComponent('NList', nListProps, props => {
-  return () => _createVNode("dl", null, [props.items.map((item, index) => _createVNode("div", {
-    "key": index,
-    "class": ['py-5 px-4 sm:grid sm:grid-cols-3 sm:gap-4', index % 2 === 1 ? 'bg-white' : 'bg-default-50', props.rowClass]
-  }, [_createVNode("dt", {
-    "class": `text-sm font-medium text-default-500 ${props.titleClass}`
-  }, [buildElement(item.title)]), _createVNode("dd", {
-    "class": `mt-1 text-sm sm:mt-0 sm:col-span-2 ${props.textClass}`
-  }, [buildElement(item.text)])]))]);
-});
-export { Component as NList, Component as default };
-function buildElement(element) {
-  if (typeof element === 'function') return element();else return _createVNode(_Fragment, null, [element]);
-}

package/components/NLoadingIndicator.css

@@ -1,46 +0,0 @@
-.lds-ellipsis {
-    position: relative;
-}
-
-.lds-ellipsis div {
-    position: absolute;
-    border-radius: 50%;
-    animation-timing-function: cubic-bezier(0, 1, 1, 0);
-}
-
-.lds-ellipsis div:nth-child(1) {
-    animation: lds-ellipsis1 0.6s infinite;
-}
-.lds-ellipsis div:nth-child(2) {
-    animation: lds-ellipsis2 0.6s infinite;
-}
-.lds-ellipsis div:nth-child(3) {
-    animation: lds-ellipsis2 0.6s infinite;
-}
-.lds-ellipsis div:nth-child(4) {
-    animation: lds-ellipsis3 0.6s infinite;
-}
-@keyframes lds-ellipsis1 {
-    0% {
-        transform: scale(0);
-    }
-    100% {
-        transform: scale(1);
-    }
-}
-@keyframes lds-ellipsis3 {
-    0% {
-        transform: scale(1);
-    }
-    100% {
-        transform: scale(0);
-    }
-}
-@keyframes lds-ellipsis2 {
-    0% {
-        transform: translate(0, 0);
-    }
-    100% {
-        transform: translate(var(--n-loading-indicator-gap), 0);
-    }
-}

package/components/NLoadingIndicator.d.ts

@@ -1,29 +0,0 @@
-import './NLoadingIndicator.css';
-export declare const nLoadingIndicator: {
-    /**
-     * The color of the loading-indicator.
-     */
-    readonly color: {
-        readonly type: StringConstructor;
-        readonly default: "primary";
-    };
-    /**
-     * The shade of the loading-indicator.
-     */
-    readonly shade: {
-        readonly type: NumberConstructor;
-        readonly default: 400;
-    };
-    /**
-     * The height of the loading-indicator in px.
-     */
-    readonly size: {
-        readonly type: NumberConstructor;
-        readonly default: 10;
-    };
-};
-/**
- * The `NLoadingIndicator` is a styled loading indicator.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NLoadingIndicator, Component as default };

package/components/NLoadingIndicator.js

@@ -1,54 +0,0 @@
-import { createVNode as _createVNode } from "vue";
-import { createComponent } from '../utils/component';
-import { computed, useCssVars } from 'vue';
-import './NLoadingIndicator.css';
-export const nLoadingIndicator = {
-  /**
-   * The color of the loading-indicator.
-   */
-  color: {
-    type: String,
-    default: 'primary'
-  },
-  /**
-   * The shade of the loading-indicator.
-   */
-  shade: {
-    type: Number,
-    default: 400
-  },
-  /**
-   * The height of the loading-indicator in px.
-   */
-  size: {
-    type: Number,
-    default: 10
-  }
-};
-/**
- * The `NLoadingIndicator` is a styled loading indicator.
- */
-const Component = createComponent('NLoadingIndicator', nLoadingIndicator, props => {
-  const gap = computed(() => props.size / 13 * 24);
-  const totalWidth = computed(() => gap.value * 2 + props.size);
-  useCssVars(() => ({
-    'n-loading-indicator-gap': `${gap.value}px`
-  }));
-  return () => _createVNode("div", {
-    "class": "lds-ellipsis",
-    "style": `height:${props.size}px;width:${totalWidth.value}px`
-  }, [_createVNode("div", {
-    "class": `bg-${props.color}-${props.shade}`,
-    "style": `height:${props.size}px;width:${props.size}px;left:0px`
-  }, null), _createVNode("div", {
-    "class": `bg-${props.color}-${props.shade}`,
-    "style": `height:${props.size}px;width:${props.size}px;left:0px`
-  }, null), _createVNode("div", {
-    "class": `bg-${props.color}-${props.shade}`,
-    "style": `height:${props.size}px;width:${props.size}px;left:${gap.value}px`
-  }, null), _createVNode("div", {
-    "class": `bg-${props.color}-${props.shade}`,
-    "style": `height:${props.size}px;width:${props.size}px;left:${2 * gap.value}px`
-  }, null)]);
-});
-export { Component as NLoadingIndicator, Component as default };

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 };