@naptics/vue-collection 0.0.1

package/lib/components/NIconButton.d.ts

@@ -0,0 +1,202 @@
+import type { HeroIcon } from '../utils/utils';
+import type { PropType } from 'vue';
+import { type RouteLocationRaw } from 'vue-router';
+export declare const nIconButtonProps: {
+    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 icon of the icon-button.
+     */
+    icon: {
+        type: PropType<HeroIcon>;
+        required: true;
+    };
+    /**
+     * The route of the icon-button. If this is set, the icon-button becomes a {@link RouterLink}.
+     */
+    route: PropType<RouteLocationRaw>;
+    /**
+     * The color of the icon-button.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The shade of the icon-button.
+     */
+    shade: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The size of the icon in tailwind-units.
+     */
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The html attribute, which indicates the type of the button.
+     */
+    type: {
+        type: PropType<"button" | "submit" | "reset">;
+        default: string;
+    };
+    /**
+     * If set to `true` the icon-button is disabled and no interaction is possible.
+     */
+    disabled: BooleanConstructor;
+    /**
+     * 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: PropType<() => void>;
+};
+/**
+ * The `NIconButton` is a regular button which does not have any text but an icon instead.
+ */
+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 icon of the icon-button.
+     */
+    icon: {
+        type: PropType<HeroIcon>;
+        required: true;
+    };
+    /**
+     * The route of the icon-button. If this is set, the icon-button becomes a {@link RouterLink}.
+     */
+    route: PropType<RouteLocationRaw>;
+    /**
+     * The color of the icon-button.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The shade of the icon-button.
+     */
+    shade: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The size of the icon in tailwind-units.
+     */
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The html attribute, which indicates the type of the button.
+     */
+    type: {
+        type: PropType<"button" | "submit" | "reset">;
+        default: string;
+    };
+    /**
+     * If set to `true` the icon-button is disabled and no interaction is possible.
+     */
+    disabled: BooleanConstructor;
+    /**
+     * 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: 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<{
+    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 icon of the icon-button.
+     */
+    icon: {
+        type: PropType<HeroIcon>;
+        required: true;
+    };
+    /**
+     * The route of the icon-button. If this is set, the icon-button becomes a {@link RouterLink}.
+     */
+    route: PropType<RouteLocationRaw>;
+    /**
+     * The color of the icon-button.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The shade of the icon-button.
+     */
+    shade: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The size of the icon in tailwind-units.
+     */
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The html attribute, which indicates the type of the button.
+     */
+    type: {
+        type: PropType<"button" | "submit" | "reset">;
+        default: string;
+    };
+    /**
+     * If set to `true` the icon-button is disabled and no interaction is possible.
+     */
+    disabled: BooleanConstructor;
+    /**
+     * 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: PropType<() => void>;
+}>> & {}, {
+    color: string;
+    type: "button" | "submit" | "reset";
+    shade: number;
+    size: number;
+    tooltipHide: boolean;
+    tooltipShow: boolean;
+    tooltipPlacement: import("./NTooltip").TooltipPlacement;
+    tooltipMaxWidth: import("../utils/tailwind").TWMaxWidth;
+    disabled: boolean;
+}>;
+export default _default;

package/lib/components/NIconButton.jsx

@@ -0,0 +1,71 @@
+import { createComponent, createProps } from '../utils/component';
+import { RouterLink } from 'vue-router';
+import { nButtonProps } from './NButton';
+import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip';
+export const nIconButtonProps = createProps({
+    /**
+     * The icon of the icon-button.
+     */
+    icon: {
+        type: Function,
+        required: true,
+    },
+    /**
+     * The route of the icon-button. If this is set, the icon-button becomes a {@link RouterLink}.
+     */
+    route: [String, Object],
+    /**
+     * 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,
+    /**
+     * 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,
+    ...nToolTipPropsForImplementor,
+});
+/**
+ * The `NIconButton` is a regular button which does not have any text but an icon instead.
+ */
+export default 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`,
+    ];
+    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>);
+});

package/lib/components/NIconCircle.d.ts

@@ -0,0 +1,135 @@
+import type { HeroIcon } from '../utils/utils';
+import type { PropType } from 'vue';
+export declare const nIconCircleProps: {
+    /**
+     * The icon of the icon-circle.
+     */
+    icon: {
+        type: PropType<HeroIcon>;
+        required: true;
+    };
+    /**
+     * The color of the icon-circle.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * 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: NumberConstructor;
+    /**
+     * 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: NumberConstructor;
+    /**
+     * The shade of the icon.
+     */
+    iconShade: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The shade of the background.
+     */
+    bgShade: {
+        type: NumberConstructor;
+        default: number;
+    };
+};
+/**
+ * The `NIconCircle` is an icon with a colored circle around it.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The icon of the icon-circle.
+     */
+    icon: {
+        type: PropType<HeroIcon>;
+        required: true;
+    };
+    /**
+     * The color of the icon-circle.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * 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: NumberConstructor;
+    /**
+     * 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: NumberConstructor;
+    /**
+     * The shade of the icon.
+     */
+    iconShade: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The shade of the background.
+     */
+    bgShade: {
+        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 icon of the icon-circle.
+     */
+    icon: {
+        type: PropType<HeroIcon>;
+        required: true;
+    };
+    /**
+     * The color of the icon-circle.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * 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: NumberConstructor;
+    /**
+     * 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: NumberConstructor;
+    /**
+     * The shade of the icon.
+     */
+    iconShade: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * The shade of the background.
+     */
+    bgShade: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & {}, {
+    color: string;
+    iconShade: number;
+    bgShade: number;
+}>;
+export default _default;

package/lib/components/NIconCircle.jsx

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

package/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;
+}