@naptics/vue-collection 0.2.15 → 0.3.0

package/src/lib/components/NInputPhone.tsx

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,126 @@
+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

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1,68 @@
+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,
+    },
+    /**
+     * 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-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>
+        )
+})
+
+export { Component as NLink, Component as default }

package/src/lib/components/NList.tsx

@@ -0,0 +1,67 @@
+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.css

@@ -0,0 +1,46 @@
+.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/src/lib/components/NLoadingIndicator.tsx

@@ -0,0 +1,63 @@
+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 }