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

package/components/NInputSelect.js

@@ -1,115 +0,0 @@
-import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
-import { createComponentWithSlots } from '../utils/component';
-import { Id } from '../utils/identifiable';
-import { option } from '../utils/validation';
-import { vModelForRef } from '../utils/vModel';
-import { watchRef } from '../utils/vue';
-import { computed, ref, watch } from 'vue';
-import { nInputProps } from './NInput';
-import NSuggestionList, { nSuggestionListProps } from './NSuggestionList';
-import NValInput, { nValInputProps } from './NValInput';
-export const nInputSelectProps = {
-  ...nInputProps,
-  /**
-   * 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.
-   * This happens, when an item from the suggestion list is selected or the
-   * input matches a selection option exactly.
-   * 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 options which are allowed and suggested for this input.
-   * The options are filtered based on the user input.
-   */
-  options: {
-    type: Array,
-    default: () => []
-  },
-  /**
-   * @see {@link nValInputProps.optional}
-   */
-  optional: nValInputProps.optional,
-  /**
-   * @see {@link nValInputProps.form}
-   */
-  form: nValInputProps.form,
-  /**
-   * @see {@link nValInputProps.error}
-   */
-  error: nValInputProps.error,
-  /**
-   * @see {@link nValInputProps.errorMessage}
-   */
-  errorMessage: nValInputProps.errorMessage,
-  /**
-   * 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,
-  /**
-   * @see {@link nSuggestionListProps.listItem}
-   */
-  listItem: nSuggestionListProps.listItem
-};
-/**
- * The `NInputSelect` is very similar to the {@link NSelect}, but instead of a select input it is a regular input.
- * The user is forced to use a value from the specified options of the input.
- * While they type, the list of options is shown to them and filtered based on their input.
- */
-const Component = createComponentWithSlots('NInputSelect', nInputSelectProps, ['listItem'], props => {
-  const inputRef = ref();
-  const inputValue = ref('');
-  watch(() => props.value, newValue => {
-    if (newValue) {
-      const chosenOption = Id.find(props.options, newValue);
-      if (chosenOption) inputValue.value = chosenOption.label;
-    }
-  }, {
-    immediate: true
-  });
-  const filteredOptions = computed(() => props.options.filter(option => option.label.includes(inputValue.value || '')));
-  const matchedOption = computed(() => {
-    const matches = props.options.filter(option => option.label === inputValue.value);
-    return matches.length > 0 ? matches[0] : null;
-  });
-  watchRef(matchedOption, newOption => props.onUpdateValue?.(newOption?.id || ''));
-  return () => _createVNode(NSuggestionList, {
-    "items": filteredOptions.value,
-    "onSelect": props.onUpdateValue,
-    "inputValue": inputValue.value,
-    "hideList": props.hideList || matchedOption.value != null || filteredOptions.value.length == 0,
-    "maxItems": props.maxItems,
-    "listItem": props.listItem,
-    "input": ({
-      onFocus,
-      onBlur
-    }) => _createVNode(NValInput, _mergeProps({
-      "ref": inputRef
-    }, {
-      ...props,
-      ...vModelForRef(inputValue)
-    }, {
-      "rules": option(props.options.map(opt => opt.label)),
-      "onFocus": () => {
-        onFocus();
-        props.onFocus?.();
-      },
-      "onBlur": onBlur,
-      "disableBlurValidation": true
-    }), null),
-    "onRequestInputFocus": () => inputRef.value?.focus(),
-    "onRealBlur": () => {
-      props.onBlur?.();
-      inputRef?.value?.validate();
-    }
-  }, null);
-});
-export { Component as NInputSelect, Component as default };

package/components/NInputSuggestion.d.ts

@@ -1,75 +0,0 @@
-import { type PropType } from 'vue';
-export declare const nInputSuggestionProps: {
-    /**
-     * If set to `true` the list is hidden even if there are still matching items in the list.
-     */
-    readonly hideList: BooleanConstructor;
-    /**
-     * @see {@link nSuggestionListProps.maxItems}
-     */
-    readonly maxItems: {
-        readonly type: NumberConstructor;
-        readonly default: () => number;
-    };
-    /**
-     * The suggestions which are shown to the user for this input.
-     * The suggestions are filtered based on the user input.
-     */
-    readonly suggestions: {
-        readonly type: PropType<string[]>;
-        readonly default: () => never[];
-    };
-    readonly input: PropType<(props: import("./NValInput").InputSlotProps) => JSX.Element>;
-    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;
-    readonly name: StringConstructor;
-    readonly placeholder: StringConstructor;
-    readonly autocomplete: {
-        readonly type: StringConstructor;
-        readonly default: "off";
-    };
-    readonly type: {
-        readonly type: StringConstructor;
-        readonly default: "text";
-    };
-    readonly max: StringConstructor;
-    readonly min: StringConstructor;
-    readonly disabled: BooleanConstructor;
-    readonly small: BooleanConstructor;
-    readonly hideLabel: BooleanConstructor;
-    readonly inputClass: StringConstructor;
-    readonly onFocus: PropType<() => void>;
-    readonly onBlur: PropType<() => void>;
-    readonly value: PropType<string>;
-    readonly onUpdateValue: PropType<(newValue: string) => void>;
-};
-/**
- * `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.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NInputSuggestion, Component as default };

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