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

package/src/lib/components/NInputPhone.tsx

@@ -1,53 +0,0 @@
-import { createComponent } 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 = nValInputProps
-
-/**
- * The `NInputPhone` autoformats phone numbers and checks if they are valid.
- */
-const Component = createComponent('NInputPhoneSuspended', nInputPhoneProps, props => {
-    // Async components have to be wrapped in a suspense component.
-    return () => (
-        <Suspense>
-            <NPhoneInput {...props} />
-        </Suspense>
-    )
-})
-
-export { Component as NInputPhone, Component as default }
-
-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: string) =>
-        parsePhoneNumber(number, { regionCode: DEFAULT_COUNTRY_CODE }).number?.e164
-    const plainToFormatted = (number: string) =>
-        parsePhoneNumber(number, { regionCode: DEFAULT_COUNTRY_CODE }).number?.international
-
-    const onUpdateValue = (newValue: string) => {
-        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/src/lib/components/NInputSelect.tsx

@@ -1,126 +0,0 @@
-import { createComponentWithSlots } from '../utils/component'
-import { Id, type Identifiable } from '../utils/identifiable'
-import { option } from '../utils/validation'
-import { vModelForRef } from '../utils/vModel'
-import { watchRef } from '../utils/vue'
-import { computed, ref, watch, type PropType } from 'vue'
-import { nInputProps } from './NInput'
-import NSuggestionList, { nSuggestionListProps } from './NSuggestionList'
-import NValInput, { nValInputProps, type NValInputExposed } from './NValInput'
-import type { AnyObject } from '../utils/utils'
-
-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 as PropType<(newValue: string) => void>,
-    /**
-     * The options which are allowed and suggested for this input.
-     * The options are filtered based on the user input.
-     */
-    options: {
-        type: Array as PropType<InputSelectOption[]>,
-        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,
-} as const
-
-export type InputSelectOption = Identifiable & { label: string } & AnyObject
-
-/**
- * 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<NValInputExposed>()
-
-    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()
-            }}
-        />
-    )
-})
-
-export { Component as NInputSelect, Component as default }

package/src/lib/components/NInputSuggestion.tsx

@@ -1,80 +0,0 @@
-import { createComponent } from '../utils/component'
-import { Id } from '../utils/identifiable'
-import { computed, ref, type PropType } from 'vue'
-import NSuggestionList, { nSuggestionListProps } from './NSuggestionList'
-import NValInput, { nValInputProps, type NValInputExposed } 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 as PropType<string[]>,
-        default: () => [],
-    },
-} as const
-
-/**
- * `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: string) => 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<NValInputExposed>()
-
-    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()
-            }}
-        />
-    )
-})
-
-export { Component as NInputSuggestion, Component as default }

package/src/lib/components/NLink.tsx

@@ -1,82 +0,0 @@
-import { createComponent } from '../utils/component'
-import type { TWTextSize } from '../utils/tailwind'
-import { computed, type PropType } from 'vue'
-import { RouterLink, type RouteLocationRaw } 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] as PropType<RouteLocationRaw>,
-    /**
-     * The color of the link.
-     */
-    color: {
-        type: String,
-        default: 'primary',
-    },
-    /**
-     * The text size, a standard tailwind text-size class.
-     */
-    textSize: String as PropType<TWTextSize>,
-    /**
-     * 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 as PropType<() => void>,
-} as const
-
-/**
- * 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-hidden focus-visible:ring-2 rounded-xs ring-offset-2 hover:underline text-left cursor-pointer',
-        `${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 ? (
-            <RouterLink to={props.route} class={classes.value}>
-                {slots.default?.() || props.text}
-            </RouterLink>
-        ) : (
-            <button
-                onClick={props.onClick}
-                class={props.disabled ? disabledClasses.value : classes.value}
-                disabled={props.disabled}
-            >
-                {slots.default?.() || props.text}
-            </button>
-        )
-})
-
-export { Component as NLink, Component as default }

package/src/lib/components/NList.tsx

@@ -1,67 +0,0 @@
-import { createComponent } from '../utils/component'
-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 const nListProps = {
-    /**
-     * The items which are displayed in the list.
-     */
-    items: {
-        type: Array as PropType<ListItem[]>,
-        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,
-} as const
-
-/**
- * The `NList` displays key-value data in an appealing way.
- */
-const Component = 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',
-                        props.rowClass,
-                    ]}
-                >
-                    <dt class={`text-sm font-medium text-default-500 ${props.titleClass}`}>
-                        {buildElement(item.title)}
-                    </dt>
-                    <dd class={`mt-1 text-sm sm:mt-0 sm:col-span-2 ${props.textClass}`}>{buildElement(item.text)}</dd>
-                </div>
-            ))}
-        </dl>
-    )
-})
-
-export { Component as NList, Component as default }
-
-function buildElement(element: string | undefined | (() => JSX.Element)): JSX.Element {
-    if (typeof element === 'function') return element()
-    else return <>{element}</>
-}

package/src/lib/components/NLoadingIndicator.tsx

@@ -1,63 +0,0 @@
-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,
-    },
-} as const
-
-/**
- * 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 () => (
-        <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>
-    )
-})
-
-export { Component as NLoadingIndicator, Component as default }