@naptics/vue-collection 0.2.14 → 0.3.0

package/src/lib/components/NFormModal.tsx

@@ -0,0 +1,66 @@
+import { createComponentWithSlots } from '../utils/component'
+import type { TWMaxWidth } from '../utils/tailwind'
+import { type PropType, computed } from 'vue'
+import NForm from './NForm'
+import NModal, { nModalProps } from './NModal'
+import type { ValidatedForm } from './ValidatedForm'
+
+export const nFormModalProps = {
+    ...nModalProps,
+    /**
+     * The maximum width of the modal. A regular tailwind class.
+     */
+    maxWidth: {
+        type: String as PropType<TWMaxWidth>,
+        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 as PropType<ValidatedForm>,
+} as const
+
+/**
+ * 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.
+ */
+const Component = createComponentWithSlots(
+    'NFormModal',
+    nFormModalProps,
+    ['modal', 'header', 'footer'],
+    (props, { slots }) => {
+        const onOk = () => {
+            if (!props.form || props.form.validate().isValid) {
+                props.onOk?.()
+                if (props.closeOnOk) props.onUpdateValue?.(false)
+            }
+        }
+
+        const childProps = computed(() => ({
+            ...props,
+            onOk,
+            closeOnOk: false,
+            onKeydown: (event: KeyboardEvent) => {
+                if (event.metaKey && event.key === 'Enter') onOk()
+            },
+        }))
+
+        return () => (
+            <NModal {...childProps.value}>
+                <NForm form={props.form}>{slots.default?.()}</NForm>
+            </NModal>
+        )
+    }
+)
+
+export { Component as NFormModal, Component as default }

package/src/lib/components/NIconButton.tsx

@@ -0,0 +1,92 @@
+import type { HeroIcon } from '../utils/tailwind'
+import { createComponent } from '../utils/component'
+import type { PropType } from 'vue'
+import { RouterLink, type RouteLocationRaw } from 'vue-router'
+import { nButtonProps } from './NButton'
+import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip'
+
+export const nIconButtonProps = {
+    /**
+     * The icon of the icon-button.
+     */
+    icon: {
+        type: Function as PropType<HeroIcon>,
+        required: true,
+    },
+    /**
+     * The route of the icon-button. If this is set, the icon-button becomes a {@link RouterLink}.
+     */
+    route: [String, Object] as PropType<RouteLocationRaw>,
+    /**
+     * 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,
+    /**
+     * Adds the classes to the icon-button.
+     * Use this instead of `class` to style the button, because the button is wrapped inside
+     * a div for the tooltip and `class` would be applied to the wrapping div.
+     */
+    buttonClass: String,
+    /**
+     * 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 as PropType<() => void>,
+    ...nToolTipPropsForImplementor,
+} as const
+
+/**
+ * The `NIconButton` is a regular button which does not have any text but an icon instead.
+ */
+const Component = 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`,
+        props.buttonClass,
+    ]
+
+    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>
+    )
+})
+
+export { Component as NIconButton, Component as default }

package/src/lib/components/NIconCircle.tsx

@@ -0,0 +1,78 @@
+import type { HeroIcon } from '../utils/tailwind'
+import { createComponent } from '../utils/component'
+import type { PropType } from 'vue'
+
+export const nIconCircleProps = {
+    /**
+     * The icon of the icon-circle.
+     */
+    icon: {
+        type: Function as PropType<HeroIcon>,
+        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,
+    },
+} as const
+
+const DEFAULT_CIRCLE_SIZE = 16
+const SCALING_FACTOR = 0.55
+
+/**
+ * The `NIconCircle` is an icon with a colored circle around it.
+ */
+const Component = 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>
+    )
+})
+
+export { Component as NIconCircle, Component as default }

package/src/lib/components/NInput.css

@@ -0,0 +1,11 @@
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+/* Firefox */
+input[type='number'] {
+    -moz-appearance: textfield;
+}

package/src/lib/components/NInput.tsx

@@ -0,0 +1,139 @@
+import { createComponent } from '../utils/component'
+import { ref, type PropType } 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 = {
+    ...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,
+    /**
+     * Adds the classes directly to the input (e.g. for shadow).
+     */
+    inputClass: String,
+    /**
+     * This is called when the input reveices focus.
+     */
+    onFocus: Function as PropType<() => void>,
+    /**
+     * This is called when the input looses focus.
+     */
+    onBlur: Function as PropType<() => void>,
+    ...nToolTipPropsForImplementor,
+} as const
+
+export type NInputExposed = {
+    /**
+     * Request focus on the input.
+     */
+    focus(): void
+}
+
+/**
+ * The base class of inputs. A styled input with a lot of configuration possibilities but no validation.
+ */
+const Component = createComponent('NInput', nInputProps, (props, context) => {
+    const inputRef = ref<HTMLInputElement>()
+    const exposed: NInputExposed = {
+        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 as HTMLInputElement).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',
+                            props.inputClass,
+                        ]}
+                    />
+
+                    <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>
+    )
+})
+
+export { Component as NInput, Component as default }

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 }