@naptics/vue-collection 0.0.4 → 0.0.6

package/components/NForm.jsx

@@ -1,26 +0,0 @@
-import { createComponent, createProps } from '../utils/component';
-export const nFormProps = createProps({
-    /**
-     * The {@link ValidatedForm} which will be used to validate the inputs.
-     * All inputs in this forms hierarchy should be added to the {@link ValidatedForm}.
-     */
-    form: Object,
-    /**
-     * This is called, when a button of type `submit` in the hierarchy of this view is clicked
-     * and when the validation of the `form` was successful.
-     */
-    onSubmit: Function,
-});
-/**
- * The `NForm` should be used to wrap multiple inputs.
- * If it contains a button of type `submit` in it's hierarchy,
- * it catches the submit event and passes it to the {@link ValidatedForm} in its `form` prop.
- */
-export default createComponent('NForm', nFormProps, (props, context) => {
-    const onSubmit = (event) => {
-        event.preventDefault();
-        if (!props.form || props.form.validate().isValid)
-            props.onSubmit?.();
-    };
-    return () => <form onSubmit={onSubmit}>{context.slots.default?.()}</form>;
-});

package/components/NFormModal.jsx

@@ -1,48 +0,0 @@
-import { createComponent, createProps } from '../utils/component';
-import { reactive, toRefs } from 'vue';
-import NForm from './NForm';
-import NModal, { nModalProps } from './NModal';
-export const nFormModalProps = createProps({
-    ...nModalProps,
-    /**
-     * The maximum width of the modal. A regular tailwind class.
-     */
-    maxWidth: {
-        type: String,
-        default: 'max-w-lg',
-    },
-    /**
-     * If set to `true` the modal closes when clicking on the background.
-     * Default is `false` as the accidental reseting of the whole form is very annoying.
-     */
-    closeOnBackground: {
-        type: Boolean,
-        default: false,
-    },
-    /**
-     * The {@link ValidatedForm} to validate the inputs.
-     * All inputs should be added to the form.
-     */
-    form: Object,
-});
-/**
- * The `NFormModal` is a {@link NModal} with an integrated form.
- * When submitting a `NFormModal` the form is first validated and
- * only if the validation is succesful the `onOk` event is called.
- */
-export default createComponent('NFormModal', nFormModalProps, (props, { slots }) => {
-    const childProps = reactive({
-        ...toRefs(props),
-        onOk: () => {
-            if (!props.form || props.form.validate().isValid) {
-                props.onOk?.();
-                if (props.closeOnOk)
-                    props.onUpdateValue?.(false);
-            }
-        },
-        closeOnOk: false,
-    });
-    return () => (<NModal {...childProps}>
-            <NForm form={props.form}>{slots.default?.()}</NForm>
-        </NModal>);
-});

package/components/NIconButton.jsx

@@ -1,71 +0,0 @@
-import { createComponent, createProps } from '../utils/component';
-import { RouterLink } from 'vue-router';
-import { nButtonProps } from './NButton';
-import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip';
-export const nIconButtonProps = createProps({
-    /**
-     * The icon of the icon-button.
-     */
-    icon: {
-        type: Function,
-        required: true,
-    },
-    /**
-     * The route of the icon-button. If this is set, the icon-button becomes a {@link RouterLink}.
-     */
-    route: [String, Object],
-    /**
-     * The color of the icon-button.
-     */
-    color: {
-        type: String,
-        default: 'default',
-    },
-    /**
-     * The shade of the icon-button.
-     */
-    shade: {
-        type: Number,
-        default: 500,
-    },
-    /**
-     * The size of the icon in tailwind-units.
-     */
-    size: {
-        type: Number,
-        default: 5,
-    },
-    /**
-     * The html attribute, which indicates the type of the button.
-     */
-    type: nButtonProps.type,
-    /**
-     * If set to `true` the icon-button is disabled and no interaction is possible.
-     */
-    disabled: Boolean,
-    /**
-     * This is called when the icon-button is clicked.
-     * It is only called when the `route` prop is not set on the icon-button.
-     */
-    onClick: Function,
-    ...nToolTipPropsForImplementor,
-});
-/**
- * The `NIconButton` is a regular button which does not have any text but an icon instead.
- */
-export default createComponent('NIconButton', nIconButtonProps, props => {
-    const classes = () => [
-        'block p-0.5 rounded-md focus:outline-none focus-visible:ring-2 -m-1',
-        props.disabled
-            ? `text-${props.color}-200 cursor-default`
-            : `hover:bg-${props.color}-${props.shade} hover:bg-opacity-10 text-${props.color}-${props.shade} focus-visible:ring-${props.color}-${props.shade} cursor-pointer`,
-    ];
-    const content = () => <props.icon class={`w-${props.size} h-${props.size}`}/>;
-    return () => (<NTooltip {...mapTooltipProps(props)}>
-            {props.route ? (<RouterLink to={props.route} class={classes()}>
-                    {content()}
-                </RouterLink>) : (<button type={props.type} disabled={props.disabled} class={classes()} onClick={props.onClick}>
-                    {content()}
-                </button>)}
-        </NTooltip>);
-});

package/components/NIconCircle.jsx

@@ -1,67 +0,0 @@
-import { createComponent, createProps } from '../utils/component';
-export const nIconCircleProps = createProps({
-    /**
-     * The icon of the icon-circle.
-     */
-    icon: {
-        type: Function,
-        required: true,
-    },
-    /**
-     * The color of the icon-circle.
-     */
-    color: {
-        type: String,
-        default: 'primary',
-    },
-    /**
-     * The size of the circle in "tailwind units" (4 px).
-     * Tailwind classes are used for the size, so any number can be passed.
-     * If the `iconSize` is not set, it will be adjusted automatically.
-     */
-    circleSize: Number,
-    /**
-     * The size of the icon in "tailwind units" (4 px).
-     * No tailwind classes are used for the size, so any number can be passed.
-     * If the `circleSize` is not set, it will be adjusted automatically.
-     */
-    iconSize: Number,
-    /**
-     * The shade of the icon.
-     */
-    iconShade: {
-        type: Number,
-        default: 600,
-    },
-    /**
-     * The shade of the background.
-     */
-    bgShade: {
-        type: Number,
-        default: 100,
-    },
-});
-const DEFAULT_CIRCLE_SIZE = 16;
-const SCALING_FACTOR = 0.55;
-/**
- * The `NIconCircle` is an icon with a colored circle around it.
- */
-export default createComponent('NIconCircle', nIconCircleProps, props => {
-    let circleSize = props.circleSize;
-    let iconSize = props.iconSize;
-    if (circleSize == null) {
-        if (iconSize == null)
-            circleSize = DEFAULT_CIRCLE_SIZE;
-        else
-            circleSize = iconSize / SCALING_FACTOR;
-    }
-    if (iconSize == null)
-        iconSize = circleSize * SCALING_FACTOR;
-    circleSize *= 4;
-    iconSize *= 4;
-    return () => (<div class={['flex items-center justify-center rounded-full', `bg-${props.color}-${props.bgShade}`]} style={`width: ${circleSize}px; height: ${circleSize}px`}>
-            <div class={`text-${props.color}-${props.iconShade}`} style={`width: ${iconSize}px; height: ${iconSize}px`}>
-                <props.icon />
-            </div>
-        </div>);
-});

package/components/NInput.jsx

@@ -1,97 +0,0 @@
-import { createComponent, createProps } from '../utils/component';
-import { ref } from 'vue';
-import { ExclamationCircleIcon } from '@heroicons/vue/24/solid';
-import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip';
-import './NInput.css';
-import { vModelProps } from '../utils/vModel';
-export const nInputProps = createProps({
-    ...vModelProps(String),
-    /**
-     * The name of the input. Is displayed as a label above the input.
-     */
-    name: String,
-    /**
-     * The placeholder of the input.
-     */
-    placeholder: String,
-    /**
-     * The html autocomplete attribute of the input.
-     */
-    autocomplete: {
-        type: String,
-        default: 'off',
-    },
-    /**
-     * The html type attribute of the input.
-     */
-    type: {
-        type: String,
-        default: 'text',
-    },
-    /**
-     * The maximum value of the input.
-     */
-    max: String,
-    /**
-     * The minimum value of the input.
-     */
-    min: String,
-    /**
-     * If set to `true` the input is displayed with a red border.
-     */
-    error: Boolean,
-    /**
-     * If set to `true` the input is disabled and no interaction is possible.
-     */
-    disabled: Boolean,
-    /**
-     * If set to `true` the input is displayed smaller.
-     */
-    small: Boolean,
-    /**
-     * If set to `true` the input's label is hidden.
-     */
-    hideLabel: Boolean,
-    /**
-     * This is called when the input reveices focus.
-     */
-    onFocus: Function,
-    /**
-     * This is called when the input looses focus.
-     */
-    onBlur: Function,
-    ...nToolTipPropsForImplementor,
-});
-/**
- * The base class of inputs. A styled input with a lot of configuration possibilities but no validation.
- */
-export default createComponent('NInput', nInputProps, (props, context) => {
-    const inputRef = ref();
-    const exposed = {
-        focus: () => inputRef.value?.focus(),
-    };
-    context.expose(exposed);
-    return () => (<div>
-            {props.name && !props.hideLabel && (<label for={props.name} class={['block text-sm font-medium mb-1', props.disabled ? 'text-default-300' : 'text-default-700']}>
-                    {props.name}
-                </label>)}
-            <NTooltip block {...mapTooltipProps(props)}>
-                <div class="relative">
-                    <input ref={inputRef} name={props.name} value={props.value} onInput={event => props.onUpdateValue?.(event.target.value)} placeholder={props.placeholder} autocomplete={props.autocomplete} type={props.type} min={props.min} max={props.max} disabled={props.disabled} onFocus={() => props.onFocus?.()} onBlur={() => props.onBlur?.()} onInvalid={event => event.preventDefault()} class={[
-            'block w-full rounded-md border focus:outline-none focus:ring-1 ',
-            props.small ? 'text-xs py-0.5 px-2' : 'py-2 px-4',
-            props.disabled
-                ? 'text-default-500 placeholder-default-300 bg-default-50'
-                : 'text-default-900 placeholder-default-400 ',
-            props.error
-                ? 'border-red-500 focus:border-red-500 focus:ring-red-500 pr-10'
-                : 'border-default-300 focus:border-primary-500 focus:ring-primary-500',
-        ]}/>
-
-                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none" v-show={props.error && !props.small}>
-                        <ExclamationCircleIcon class="h-5 w-5 text-red-700" aria-hidden="true"/>
-                    </div>
-                </div>
-            </NTooltip>
-        </div>);
-});

package/components/NInputPhone.jsx

@@ -1,32 +0,0 @@
-import { createComponent, createProps } from '../utils/component';
-import { external } from '../utils/validation';
-import { computed, Suspense } from 'vue';
-import NValInput, { nValInputProps } from './NValInput';
-import { trsl } from '../i18n';
-export const nInputPhoneProps = createProps(nValInputProps);
-/**
- * The `NInputPhone` autoformats phone numbers and checks if they are valid.
- */
-export default createComponent('NInputPhoneSuspended', nInputPhoneProps, props => {
-    // Async components have to be wrapped in a suspense component.
-    return () => (<Suspense>
-            <NPhoneInput {...props}/>
-        </Suspense>);
-});
-const NPhoneInput = createComponent('NInputPhone', nInputPhoneProps, async (props) => {
-    // import dynamically for better codesplitting as the library is pretty large
-    const { parsePhoneNumber } = await import('awesome-phonenumber');
-    const DEFAULT_COUNTRY_CODE = 'CH';
-    const formattedToPlain = (number) => parsePhoneNumber(number, { regionCode: DEFAULT_COUNTRY_CODE }).number?.e164;
-    const plainToFormatted = (number) => parsePhoneNumber(number, { regionCode: DEFAULT_COUNTRY_CODE }).number?.international;
-    const onUpdateValue = (newValue) => {
-        const plain = formattedToPlain(newValue);
-        props.onUpdateValue?.(plain || newValue);
-    };
-    const value = computed(() => {
-        const formatted = plainToFormatted(props.value || '');
-        return formatted || props.value;
-    });
-    const isValid = computed(() => parsePhoneNumber(props.value || '').valid);
-    return () => (<NValInput {...{ ...props, onUpdateValue }} value={value.value} rules={external(isValid.value, trsl('vue-collection.validation.rules.phone'))} type="tel"/>);
-});

package/components/NInputSelect.jsx

@@ -1,89 +0,0 @@
-import { createComponent, createProps } 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 = createProps({
-    ...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.
- */
-export default createComponent('NInputSelect', nInputSelectProps, 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 () => (<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 }) => (<NValInput ref={inputRef} {...{ ...props, ...vModelForRef(inputValue) }} rules={option(props.options.map(opt => opt.label))} onFocus={() => {
-                onFocus();
-                props.onFocus?.();
-            }} onBlur={onBlur} disableBlurValidation/>)} onRequestInputFocus={() => inputRef.value?.focus()} onRealBlur={() => {
-            props.onBlur?.();
-            inputRef?.value?.validate();
-        }}/>);
-});

package/components/NInputSuggestion.jsx

@@ -1,48 +0,0 @@
-import { createComponent, createProps } 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 = createProps({
-    ...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.
- */
-export default 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 () => (<NSuggestionList items={suggestionItems.value} onSelect={id => select(id)} inputValue={props.value || ''} hideList={hideList.value} maxItems={props.maxItems} input={({ onFocus, onBlur }) => (<NValInput ref={inputRef} {...props} onFocus={() => {
-                onFocus();
-                props.onFocus?.();
-            }} onBlur={onBlur} disableBlurValidation/>)} onRequestInputFocus={() => inputRef.value?.focus()} onRealBlur={() => {
-            props.onBlur?.();
-            inputRef?.value?.validate();
-        }}/>);
-});

package/components/NLink.jsx

@@ -1,58 +0,0 @@
-import { createComponent, createProps } from '../utils/component';
-import { computed } from 'vue';
-import { RouterLink } from 'vue-router';
-export const nLinkProps = createProps({
-    /**
-     * 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,
-    },
-    /**
-     * 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.
- */
-export default 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}`,
-    ]);
-    return () => props.route ? (<RouterLink to={props.route} class={classes.value}>
-                {slots.default?.() || props.text}
-            </RouterLink>) : (<button onClick={props.onClick} class={classes.value}>
-                {slots.default?.() || props.text}
-            </button>);
-});

package/components/NList.jsx

@@ -1,24 +0,0 @@
-import { createComponent, createProps } from '../utils/component';
-export const nListProps = createProps({
-    /**
-     * The items which are displayed in the list.
-     */
-    items: {
-        type: Array,
-        default: () => [],
-    },
-});
-/**
- * The `NList` displays key-value data in an appealing way.
- */
-export default createComponent('NList', nListProps, props => {
-    return () => (<dl>
-            {props.items.map((item, index) => (<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',
-            ]}>
-                    <dt class="text-sm font-medium text-default-500">{item.title}</dt>
-                    <dd class="mt-1 text-sm sm:mt-0 sm:col-span-2">{item.text}</dd>
-                </div>))}
-        </dl>);
-});

package/components/NLoadingIndicator.jsx

@@ -1,42 +0,0 @@
-import { createComponent, createProps } from '../utils/component';
-import { computed, useCssVars } from 'vue';
-import './NLoadingIndicator.css';
-export const nLoadingIndicator = createProps({
-    /**
-     * 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.
- */
-export default 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 () => (<div class="lds-ellipsis" style={`height:${props.size}px;width:${totalWidth.value}px`}>
-            <div class={`bg-${props.color}-${props.shade}`} style={`height:${props.size}px;width:${props.size}px;left:0px`}/>
-            <div class={`bg-${props.color}-${props.shade}`} style={`height:${props.size}px;width:${props.size}px;left:0px`}/>
-            <div class={`bg-${props.color}-${props.shade}`} style={`height:${props.size}px;width:${props.size}px;left:${gap.value}px`}/>
-            <div class={`bg-${props.color}-${props.shade}`} style={`height:${props.size}px;width:${props.size}px;left:${2 * gap.value}px`}/>
-        </div>);
-});