@naptics/vue-collection 0.0.1

package/README.md

@@ -0,0 +1,27 @@
+# Vue Collection
+
+Vue Collection is a collection of styled and fully functional Vue components which can easily be integrated into our projects.
+
+## Showroom 🎆
+
+You can take a look at all components on [Gitlab Pages](https://naptx.gitlab.io/libraries/vue-collection/).
+
+## Integrate Vue Collection into a new project 🔨
+
+1. Create a new vue-project with `npm init vue@latest`. Add at least typescript, jsx, vue-router, eslint and prettier.
+2. Remove boilerplate code.
+3. Follow the instructions to [install tailwind](https://tailwindcss.com/docs/installation/using-postcss).
+    - `npm install -D tailwindcss postcss autoprefixer`
+    - `npx tailwindcss init`
+    - ... follow the further instructions
+    - When creating the App.css add contents of this repo's `App.css`
+4. Add tailwind forms with `npm install -D @tailwindcss/forms`
+5. Copy the tailwind configuration `tailwind.config.js` to your project.
+6. Add other dependencies with `npm install @headlessui/vue @heroicons/vue vue-i18n awesome-phonenumber @popperjs/core`
+7. Copy files from `.vscode` to your project. Remove `.vscode/settings.json` file from `.gitignore`. Copy `.prettierrc` to your project.
+8. Make sure typescript config is correct. Double check with this repo.
+9. Copy the contents of `src/components/base` (without the tests), `src/i18n` and `src/utils/vue-collection` to your project.
+10. Create your `App.tsx` file (you probably deleted earlier) and add a router view to the app. Link the `App.css` to it. Then you're ready to add a `HomeView` and link it to the router. Make sure to always use the `createView` and `createComponent` functions defined in the `src/utils/vue` file.
+11. Close your project and reopen it again. Now all weird warnings should go away.
+12. You're ready to go: Run your app with `npm run dev`.
+13. Don't forget to configure primary, secondary and default color in `tailwind.config.js`. Also choose which classes are white-listed.

package/lib/components/NAlert.d.ts

@@ -0,0 +1,72 @@
+import { type PropType } from 'vue';
+export type AlertVariant = 'success' | 'info' | 'warning' | 'error' | 'loading';
+export declare const nAlertProps: {
+    /**
+     * The variant of the alert. This defines its color and icon.
+     */
+    variant: {
+        type: PropType<AlertVariant>;
+        default: string;
+    };
+    /**
+     * The text of the alert.
+     */
+    text: StringConstructor;
+    /**
+     * If set to `true` the X-button of the alert is hidden.
+     */
+    hideX: BooleanConstructor;
+    /**
+     * This is called, when the X-button is clicked.
+     */
+    onDismiss: PropType<() => void>;
+};
+/**
+ * The `NAlert` is a fully styled alert with multiple variants.
+ * It can be used as a normal blocking element or as part of an alert queue.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The variant of the alert. This defines its color and icon.
+     */
+    variant: {
+        type: PropType<AlertVariant>;
+        default: string;
+    };
+    /**
+     * The text of the alert.
+     */
+    text: StringConstructor;
+    /**
+     * If set to `true` the X-button of the alert is hidden.
+     */
+    hideX: BooleanConstructor;
+    /**
+     * This is called, when the X-button is clicked.
+     */
+    onDismiss: PropType<() => void>;
+}, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The variant of the alert. This defines its color and icon.
+     */
+    variant: {
+        type: PropType<AlertVariant>;
+        default: string;
+    };
+    /**
+     * The text of the alert.
+     */
+    text: StringConstructor;
+    /**
+     * If set to `true` the X-button of the alert is hidden.
+     */
+    hideX: BooleanConstructor;
+    /**
+     * This is called, when the X-button is clicked.
+     */
+    onDismiss: PropType<() => void>;
+}>> & {}, {
+    variant: AlertVariant;
+    hideX: boolean;
+}>;
+export default _default;

package/lib/components/NAlert.jsx

@@ -0,0 +1,69 @@
+import { createComponent, createProps } from '../utils/component';
+import { CheckCircleIcon, ExclamationCircleIcon, InformationCircleIcon, XMarkIcon } from '@heroicons/vue/24/solid';
+import { computed } from 'vue';
+import NIconButton from './NIconButton';
+import NLoadingIndicator from './NLoadingIndicator';
+export const nAlertProps = createProps({
+    /**
+     * The variant of the alert. This defines its color and icon.
+     */
+    variant: {
+        type: String,
+        default: 'success',
+    },
+    /**
+     * The text of the alert.
+     */
+    text: String,
+    /**
+     * If set to `true` the X-button of the alert is hidden.
+     */
+    hideX: Boolean,
+    /**
+     * This is called, when the X-button is clicked.
+     */
+    onDismiss: Function,
+});
+/**
+ * The `NAlert` is a fully styled alert with multiple variants.
+ * It can be used as a normal blocking element or as part of an alert queue.
+ */
+export default createComponent('NAlert', nAlertProps, props => {
+    const variant = computed(() => VARIANTS[props.variant]);
+    return () => (<div class={`rounded-md p-3 shadow-lg bg-${variant.value.color}-50`}>
+            <div class="flex items-center">
+                <div class="flex flex-shrink-0 items-center">{variant.value.icon()}</div>
+
+                <div class="ml-3 flex-grow">
+                    <p class={`text-sm font-medium text-${variant.value.color}-900`}>{props.text}</p>
+                </div>
+
+                {!props.hideX && (<div class="flex items-center flex-shrink-0 ml-3">
+                        <NIconButton color={variant.value.color} size={5} icon={XMarkIcon} onClick={props.onDismiss}/>
+                    </div>)}
+            </div>
+        </div>);
+});
+const icon = (icon, color) => () => <icon class={`h-5 w-5 text-${color}-500`}/>;
+const VARIANTS = {
+    success: {
+        icon: icon(CheckCircleIcon, 'green'),
+        color: 'green',
+    },
+    info: {
+        icon: icon(InformationCircleIcon, 'blue'),
+        color: 'blue',
+    },
+    warning: {
+        icon: icon(ExclamationCircleIcon, 'yellow'),
+        color: 'yellow',
+    },
+    error: {
+        icon: icon(ExclamationCircleIcon, 'red'),
+        color: 'red',
+    },
+    loading: {
+        icon: () => <NLoadingIndicator color="blue" size={7} shade={500}/>,
+        color: 'blue',
+    },
+};

package/lib/components/NBadge.d.ts

@@ -0,0 +1,174 @@
+import type { TWTextSize } from '../utils/tailwind';
+import type { PropType } from 'vue';
+export declare const nBadgeProps: {
+    tooltipText: StringConstructor;
+    tooltipContent: PropType<() => void>;
+    tooltipHide: BooleanConstructor;
+    tooltipShow: BooleanConstructor;
+    tooltipPlacement: {
+        type: PropType<import("./NTooltip").TooltipPlacement>;
+        default: string;
+    };
+    tooltipMaxWidth: {
+        type: PropType<import("../utils/tailwind").TWMaxWidth>;
+        default: string;
+    };
+    /**
+     * The text of the badge. Can alternatively be passed in the default slot.
+     */
+    text: StringConstructor;
+    /**
+     * The text size, a standard tailwind text-size class.
+     */
+    textSize: {
+        type: PropType<TWTextSize>;
+        default: string;
+    };
+    /**
+     * The color of the badge.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The background shade of the badge.
+     */
+    shade: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The text shade of the badge.
+     */
+    textShade: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * If set to `true` the badges text is all-caps. Default is `true`.
+     */
+    allCaps: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+/**
+ * The `NBadge` is a styled element to wrap a text.
+ */
+declare const _default: import("vue").DefineComponent<{
+    tooltipText: StringConstructor;
+    tooltipContent: PropType<() => void>;
+    tooltipHide: BooleanConstructor;
+    tooltipShow: BooleanConstructor;
+    tooltipPlacement: {
+        type: PropType<import("./NTooltip").TooltipPlacement>;
+        default: string;
+    };
+    tooltipMaxWidth: {
+        type: PropType<import("../utils/tailwind").TWMaxWidth>;
+        default: string;
+    };
+    /**
+     * The text of the badge. Can alternatively be passed in the default slot.
+     */
+    text: StringConstructor;
+    /**
+     * The text size, a standard tailwind text-size class.
+     */
+    textSize: {
+        type: PropType<TWTextSize>;
+        default: string;
+    };
+    /**
+     * The color of the badge.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The background shade of the badge.
+     */
+    shade: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The text shade of the badge.
+     */
+    textShade: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * If set to `true` the badges text is all-caps. Default is `true`.
+     */
+    allCaps: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tooltipText: StringConstructor;
+    tooltipContent: PropType<() => void>;
+    tooltipHide: BooleanConstructor;
+    tooltipShow: BooleanConstructor;
+    tooltipPlacement: {
+        type: PropType<import("./NTooltip").TooltipPlacement>;
+        default: string;
+    };
+    tooltipMaxWidth: {
+        type: PropType<import("../utils/tailwind").TWMaxWidth>;
+        default: string;
+    };
+    /**
+     * The text of the badge. Can alternatively be passed in the default slot.
+     */
+    text: StringConstructor;
+    /**
+     * The text size, a standard tailwind text-size class.
+     */
+    textSize: {
+        type: PropType<TWTextSize>;
+        default: string;
+    };
+    /**
+     * The color of the badge.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The background shade of the badge.
+     */
+    shade: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The text shade of the badge.
+     */
+    textShade: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * If set to `true` the badges text is all-caps. Default is `true`.
+     */
+    allCaps: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {}, {
+    color: string;
+    shade: number;
+    tooltipHide: boolean;
+    tooltipShow: boolean;
+    tooltipPlacement: import("./NTooltip").TooltipPlacement;
+    tooltipMaxWidth: import("../utils/tailwind").TWMaxWidth;
+    textSize: TWTextSize;
+    textShade: number;
+    allCaps: boolean;
+}>;
+export default _default;

package/lib/components/NBadge.jsx

@@ -0,0 +1,58 @@
+import { createComponent, createProps } from '../utils/component';
+import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip';
+export const nBadgeProps = createProps({
+    /**
+     * The text of the badge. Can alternatively be passed in the default slot.
+     */
+    text: String,
+    /**
+     * The text size, a standard tailwind text-size class.
+     */
+    textSize: {
+        type: String,
+        default: 'text-sm',
+    },
+    /**
+     * The color of the badge.
+     */
+    color: {
+        type: String,
+        default: 'primary',
+    },
+    /**
+     * The background shade of the badge.
+     */
+    shade: {
+        type: Number,
+        default: 200,
+    },
+    /**
+     * The text shade of the badge.
+     */
+    textShade: {
+        type: Number,
+        default: 900,
+    },
+    /**
+     * If set to `true` the badges text is all-caps. Default is `true`.
+     */
+    allCaps: {
+        type: Boolean,
+        default: true,
+    },
+    ...nToolTipPropsForImplementor,
+});
+/**
+ * The `NBadge` is a styled element to wrap a text.
+ */
+export default createComponent('NBadge', nBadgeProps, (props, { slots }) => {
+    return () => (<NTooltip {...mapTooltipProps(props)}>
+            <div class={[
+            'px-2 py-1 rounded-md font-semibold shadow',
+            `${props.textSize} bg-${props.color}-${props.shade} text-${props.color}-${props.textShade}`,
+            props.allCaps ? 'uppercase' : '',
+        ]}>
+                {slots.default?.() || props.text}
+            </div>
+        </NTooltip>);
+});

package/lib/components/NBreadcrub.d.ts

@@ -0,0 +1,161 @@
+import type { HeroIcon } from '../utils/utils';
+import type { TWTextSize } from '../utils/tailwind';
+import type { PropType } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
+export declare const nBreadcrumbProps: {
+    /**
+     * The items of the breadcrumb.
+     */
+    items: {
+        type: PropType<BreadcrumbItem[]>;
+        default: () => never[];
+    };
+    /**
+     * The color of the breadcrumbs text and icons.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The text-size of the breadcrumb labels.
+     */
+    textSize: {
+        type: PropType<TWTextSize>;
+        default: string;
+    };
+    /**
+     * The icon which is used as a seperator between two breadcrumb items.
+     */
+    icon: {
+        type: PropType<HeroIcon>;
+        default: import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}>;
+    };
+    /**
+     * The size of the icon in tailwind units.
+     */
+    iconSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * A slot the replace the breadcrumb labels.
+     */
+    item: PropType<(item: BreadcrumbItem, index: number) => JSX.Element>;
+    /**
+     * A slot to replace the separators between the breadcrumb labels.
+     * The passsed item is the item before the seperator.
+     */
+    seperator: PropType<(item: BreadcrumbItem, index: number) => JSX.Element>;
+};
+export type BreadcrumbItem = {
+    /**
+     * The visible label of the breadcrumb item.
+     */
+    label: string;
+    /**
+     * The route the breadcrumb item points to.
+     */
+    route: RouteLocationRaw;
+};
+/**
+ * The `NBreadcrumb` is a styled breadcrumb which can be used as a navigation in hierarchical views.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The items of the breadcrumb.
+     */
+    items: {
+        type: PropType<BreadcrumbItem[]>;
+        default: () => never[];
+    };
+    /**
+     * The color of the breadcrumbs text and icons.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The text-size of the breadcrumb labels.
+     */
+    textSize: {
+        type: PropType<TWTextSize>;
+        default: string;
+    };
+    /**
+     * The icon which is used as a seperator between two breadcrumb items.
+     */
+    icon: {
+        type: PropType<HeroIcon>;
+        default: import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}>;
+    };
+    /**
+     * The size of the icon in tailwind units.
+     */
+    iconSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * A slot the replace the breadcrumb labels.
+     */
+    item: PropType<(item: BreadcrumbItem, index: number) => JSX.Element>;
+    /**
+     * A slot to replace the separators between the breadcrumb labels.
+     * The passsed item is the item before the seperator.
+     */
+    seperator: PropType<(item: BreadcrumbItem, index: number) => JSX.Element>;
+}, import("vue").RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * The items of the breadcrumb.
+     */
+    items: {
+        type: PropType<BreadcrumbItem[]>;
+        default: () => never[];
+    };
+    /**
+     * The color of the breadcrumbs text and icons.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The text-size of the breadcrumb labels.
+     */
+    textSize: {
+        type: PropType<TWTextSize>;
+        default: string;
+    };
+    /**
+     * The icon which is used as a seperator between two breadcrumb items.
+     */
+    icon: {
+        type: PropType<HeroIcon>;
+        default: import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}>;
+    };
+    /**
+     * The size of the icon in tailwind units.
+     */
+    iconSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * A slot the replace the breadcrumb labels.
+     */
+    item: PropType<(item: BreadcrumbItem, index: number) => JSX.Element>;
+    /**
+     * A slot to replace the separators between the breadcrumb labels.
+     * The passsed item is the item before the seperator.
+     */
+    seperator: PropType<(item: BreadcrumbItem, index: number) => JSX.Element>;
+}>> & {}, {
+    color: string;
+    icon: HeroIcon;
+    textSize: TWTextSize;
+    items: BreadcrumbItem[];
+    iconSize: number;
+}>;
+export default _default;

package/lib/components/NBreadcrub.jsx

@@ -0,0 +1,64 @@
+import { createComponent, createProps } from '../utils/component';
+import { ChevronRightIcon } from '@heroicons/vue/24/solid';
+import NLink from './NLink';
+export const nBreadcrumbProps = createProps({
+    /**
+     * The items of the breadcrumb.
+     */
+    items: {
+        type: Array,
+        default: () => [],
+    },
+    /**
+     * The color of the breadcrumbs text and icons.
+     */
+    color: {
+        type: String,
+        default: 'primary',
+    },
+    /**
+     * The text-size of the breadcrumb labels.
+     */
+    textSize: {
+        type: String,
+        default: 'text-base',
+    },
+    /**
+     * The icon which is used as a seperator between two breadcrumb items.
+     */
+    icon: {
+        type: Function,
+        default: ChevronRightIcon,
+    },
+    /**
+     * The size of the icon in tailwind units.
+     */
+    iconSize: {
+        type: Number,
+        default: 5,
+    },
+    /**
+     * A slot the replace the breadcrumb labels.
+     */
+    item: Function,
+    /**
+     * A slot to replace the separators between the breadcrumb labels.
+     * The passsed item is the item before the seperator.
+     */
+    seperator: Function,
+});
+/**
+ * The `NBreadcrumb` is a styled breadcrumb which can be used as a navigation in hierarchical views.
+ */
+export default createComponent('NBreadcrumb', nBreadcrumbProps, props => {
+    return () => (<div class="flex flex-wrap items-center">
+            {props.items.map((item, index) => (<>
+                    {props.item?.(item, index) || (<NLink textSize={props.textSize} route={item.route} color={props.color}>
+                            {item.label}
+                        </NLink>)}
+
+                    {index < props.items.length - 1 &&
+                (props.seperator?.(item, index) || (<props.icon class={`mx-2 w-${props.iconSize} h-${props.iconSize} text-${props.color}-500`}/>))}
+                </>))}
+        </div>);
+});