@naptics/vue-collection 0.0.1

package/lib/components/NLink.d.ts

@@ -0,0 +1,111 @@
+import type { TWTextSize } from '../utils/tailwind';
+import { type PropType } from 'vue';
+import { type RouteLocationRaw } from 'vue-router';
+export declare const nLinkProps: {
+    /**
+     * The text of the link. Can also be set in the default slot.
+     */
+    text: StringConstructor;
+    /**
+     * The route of the link. If this is set,
+     * the link becomes a {@link RouterLink} and does not emit the `onClick` event.
+     */
+    route: PropType<RouteLocationRaw>;
+    /**
+     * The color of the link.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The text size, a standard tailwind text-size class.
+     */
+    textSize: PropType<TWTextSize>;
+    /**
+     * The shade of the link.
+     */
+    shade: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * 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: PropType<() => void>;
+};
+/**
+ * The `NLink` is a styled text which can be used as a {@link RouterLink} or a regular button.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The text of the link. Can also be set in the default slot.
+     */
+    text: StringConstructor;
+    /**
+     * The route of the link. If this is set,
+     * the link becomes a {@link RouterLink} and does not emit the `onClick` event.
+     */
+    route: PropType<RouteLocationRaw>;
+    /**
+     * The color of the link.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The text size, a standard tailwind text-size class.
+     */
+    textSize: PropType<TWTextSize>;
+    /**
+     * The shade of the link.
+     */
+    shade: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * 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: 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 text of the link. Can also be set in the default slot.
+     */
+    text: StringConstructor;
+    /**
+     * The route of the link. If this is set,
+     * the link becomes a {@link RouterLink} and does not emit the `onClick` event.
+     */
+    route: PropType<RouteLocationRaw>;
+    /**
+     * The color of the link.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The text size, a standard tailwind text-size class.
+     */
+    textSize: PropType<TWTextSize>;
+    /**
+     * The shade of the link.
+     */
+    shade: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * 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: PropType<() => void>;
+}>> & {}, {
+    color: string;
+    shade: number;
+}>;
+export default _default;

package/lib/components/NLink.jsx

@@ -0,0 +1,58 @@
+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/lib/components/NList.d.ts

@@ -0,0 +1,43 @@
+import type { PropType } from 'vue';
+export type ListItem = {
+    /**
+     * The title of the item.
+     */
+    title: string;
+    /**
+     * The text of the item.
+     */
+    text?: string;
+};
+export declare const nListProps: {
+    /**
+     * The items which are displayed in the list.
+     */
+    items: {
+        type: PropType<ListItem[]>;
+        default: () => never[];
+    };
+};
+/**
+ * The `NList` displays key-value data in an appealing way.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The items which are displayed in the list.
+     */
+    items: {
+        type: PropType<ListItem[]>;
+        default: () => never[];
+    };
+}, 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 which are displayed in the list.
+     */
+    items: {
+        type: PropType<ListItem[]>;
+        default: () => never[];
+    };
+}>> & {}, {
+    items: ListItem[];
+}>;
+export default _default;

package/lib/components/NList.jsx

@@ -0,0 +1,24 @@
+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/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/lib/components/NLoadingIndicator.d.ts

@@ -0,0 +1,77 @@
+import './NLoadingIndicator.css';
+export declare const nLoadingIndicator: {
+    /**
+     * The color of the loading-indicator.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The shade of the loading-indicator.
+     */
+    shade: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The height of the loading-indicator in px.
+     */
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+};
+/**
+ * The `NLoadingIndicator` is a styled loading indicator.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The color of the loading-indicator.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The shade of the loading-indicator.
+     */
+    shade: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The height of the loading-indicator in px.
+     */
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, 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 color of the loading-indicator.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The shade of the loading-indicator.
+     */
+    shade: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The height of the loading-indicator in px.
+     */
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & {}, {
+    color: string;
+    shade: number;
+    size: number;
+}>;
+export default _default;

package/lib/components/NLoadingIndicator.jsx

@@ -0,0 +1,42 @@
+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>);
+});