@naptics/vue-collection 0.0.1

package/lib/components/NButton.d.ts

@@ -0,0 +1,149 @@
+import { type PropType } from 'vue';
+export declare const nButtonProps: {
+    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 color of the button.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The html attribute, which indicates the type of the button.
+     */
+    type: {
+        type: PropType<"button" | "submit" | "reset">;
+        default: string;
+    };
+    /**
+     * If set to `true` the button is disabled and no interaction is possible.
+     */
+    disabled: BooleanConstructor;
+    /**
+     * If set to `true` the button will show a loading animation.
+     * Setting `loading` to `true` will also disable the button.
+     */
+    loading: BooleanConstructor;
+    /**
+     * If set to `true` the button will appear smaller.
+     */
+    small: BooleanConstructor;
+    /**
+     * This is called, when the button is clicked.
+     */
+    onClick: PropType<() => void>;
+};
+/**
+ * The `NButton` is a styled button.
+ */
+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 color of the button.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The html attribute, which indicates the type of the button.
+     */
+    type: {
+        type: PropType<"button" | "submit" | "reset">;
+        default: string;
+    };
+    /**
+     * If set to `true` the button is disabled and no interaction is possible.
+     */
+    disabled: BooleanConstructor;
+    /**
+     * If set to `true` the button will show a loading animation.
+     * Setting `loading` to `true` will also disable the button.
+     */
+    loading: BooleanConstructor;
+    /**
+     * If set to `true` the button will appear smaller.
+     */
+    small: BooleanConstructor;
+    /**
+     * This is called, when the button is clicked.
+     */
+    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 color of the button.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The html attribute, which indicates the type of the button.
+     */
+    type: {
+        type: PropType<"button" | "submit" | "reset">;
+        default: string;
+    };
+    /**
+     * If set to `true` the button is disabled and no interaction is possible.
+     */
+    disabled: BooleanConstructor;
+    /**
+     * If set to `true` the button will show a loading animation.
+     * Setting `loading` to `true` will also disable the button.
+     */
+    loading: BooleanConstructor;
+    /**
+     * If set to `true` the button will appear smaller.
+     */
+    small: BooleanConstructor;
+    /**
+     * This is called, when the button is clicked.
+     */
+    onClick: PropType<() => void>;
+}>> & {}, {
+    small: boolean;
+    color: string;
+    type: "button" | "submit" | "reset";
+    tooltipHide: boolean;
+    tooltipShow: boolean;
+    tooltipPlacement: import("./NTooltip").TooltipPlacement;
+    tooltipMaxWidth: import("../utils/tailwind").TWMaxWidth;
+    disabled: boolean;
+    loading: boolean;
+}>;
+export default _default;

package/lib/components/NButton.jsx

@@ -0,0 +1,58 @@
+import { createComponent, createProps } from '../utils/component';
+import { computed } from 'vue';
+import NLoadingIndicator from './NLoadingIndicator';
+import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip';
+export const nButtonProps = createProps({
+    /**
+     * The color of the button.
+     */
+    color: {
+        type: String,
+        default: 'primary',
+    },
+    /**
+     * The html attribute, which indicates the type of the button.
+     */
+    type: {
+        type: String,
+        default: 'button',
+    },
+    /**
+     * If set to `true` the button is disabled and no interaction is possible.
+     */
+    disabled: Boolean,
+    /**
+     * If set to `true` the button will show a loading animation.
+     * Setting `loading` to `true` will also disable the button.
+     */
+    loading: Boolean,
+    /**
+     * If set to `true` the button will appear smaller.
+     */
+    small: Boolean,
+    /**
+     * This is called, when the button is clicked.
+     */
+    onClick: Function,
+    ...nToolTipPropsForImplementor,
+});
+/**
+ * The `NButton` is a styled button.
+ */
+export default createComponent('NButton', nButtonProps, (props, { slots }) => {
+    const isDisabled = computed(() => props.loading || props.disabled);
+    return () => (<NTooltip {...mapTooltipProps(props)}>
+            <button disabled={isDisabled.value} type={props.type} class={[
+            `block w-full font-medium rounded-md focus:outline-none focus-visible:ring-2 shadow text-${props.color}-900 relative`,
+            isDisabled.value
+                ? `bg-${props.color}-100 text-opacity-20 cursor-default`
+                : `bg-${props.color}-200 hover:bg-${props.color}-300 focus-visible:ring-${props.color}-500`,
+            props.small ? 'py-1 px-2 text-xs' : 'py-2 px-4 text-sm',
+        ]} onClick={props.onClick}>
+                <span class={{ 'opacity-10': props.loading }}>{slots.default?.()}</span>
+                {props.loading && (<div class="absolute inset-0 flex items-center justify-center opacity-50">
+                        <NLoadingIndicator color={props.color} size={props.small ? 4 : 6} shade={600}/>
+                    </div>)}
+            </button>
+        </NTooltip>);
+});

package/lib/components/NCheckbox.d.ts

@@ -0,0 +1,51 @@
+export declare const nCheckboxProps: {
+    /**
+     * The color of the checkbox.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * If set to `true` the checkbox is disabled and no interaction is possible.
+     */
+    disabled: BooleanConstructor;
+    value: import("vue").PropType<boolean>;
+    onUpdateValue: import("vue").PropType<(newValue: boolean) => void>;
+};
+/**
+ * The `NCheckbox` is a styled checkbox.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The color of the checkbox.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * If set to `true` the checkbox is disabled and no interaction is possible.
+     */
+    disabled: BooleanConstructor;
+    value: import("vue").PropType<boolean>;
+    onUpdateValue: import("vue").PropType<(newValue: boolean) => 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 color of the checkbox.
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * If set to `true` the checkbox is disabled and no interaction is possible.
+     */
+    disabled: BooleanConstructor;
+    value: import("vue").PropType<boolean>;
+    onUpdateValue: import("vue").PropType<(newValue: boolean) => void>;
+}>> & {}, {
+    color: string;
+    disabled: boolean;
+}>;
+export default _default;

package/lib/components/NCheckbox.jsx

@@ -0,0 +1,38 @@
+import { createComponent, createProps } from '../utils/component';
+import { vModelProps } from '../utils/vModel';
+import { nextTick, ref } from 'vue';
+export const nCheckboxProps = createProps({
+    ...vModelProps(Boolean),
+    /**
+     * The color of the checkbox.
+     */
+    color: {
+        type: String,
+        default: 'primary',
+    },
+    /**
+     * If set to `true` the checkbox is disabled and no interaction is possible.
+     */
+    disabled: Boolean,
+});
+/**
+ * The `NCheckbox` is a styled checkbox.
+ */
+export default createComponent('NCheckbox', nCheckboxProps, props => {
+    const toggle = () => {
+        props.onUpdateValue?.(!props.value);
+        forceUpdate();
+    };
+    const checkBoxRef = ref();
+    const updateKey = ref(0);
+    const forceUpdate = () => {
+        updateKey.value += 1;
+        nextTick(() => checkBoxRef.value?.focus());
+    };
+    return () => (<input type="checkbox" ref={checkBoxRef} checked={props.value} disabled={props.disabled} onClick={toggle} key={updateKey.value} class={[
+            `h-5 w-5 border-default-300 rounded focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-${props.color}-500`,
+            props.disabled
+                ? `cursor-default bg-default-100 text-${props.color}-200`
+                : `cursor-pointer text-${props.color}-400`,
+        ]}/>);
+});

package/lib/components/NCheckboxLabel.d.ts

@@ -0,0 +1,70 @@
+export declare const nCheckboxLabelProps: {
+    /**
+     * The title of the checkbox.
+     */
+    title: StringConstructor;
+    /**
+     * The description of the checkbox.
+     */
+    description: StringConstructor;
+    /**
+     * If set to `true`, a smaller margin is applied between the label and the checkbox.
+     */
+    compact: BooleanConstructor;
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    value: import("vue").PropType<boolean>;
+    onUpdateValue: import("vue").PropType<(newValue: boolean) => void>;
+};
+/**
+ * The `NCheckboxLabel` is a checkbox with a title and a description.
+ */
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * The title of the checkbox.
+     */
+    title: StringConstructor;
+    /**
+     * The description of the checkbox.
+     */
+    description: StringConstructor;
+    /**
+     * If set to `true`, a smaller margin is applied between the label and the checkbox.
+     */
+    compact: BooleanConstructor;
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    value: import("vue").PropType<boolean>;
+    onUpdateValue: import("vue").PropType<(newValue: boolean) => 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 title of the checkbox.
+     */
+    title: StringConstructor;
+    /**
+     * The description of the checkbox.
+     */
+    description: StringConstructor;
+    /**
+     * If set to `true`, a smaller margin is applied between the label and the checkbox.
+     */
+    compact: BooleanConstructor;
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    value: import("vue").PropType<boolean>;
+    onUpdateValue: import("vue").PropType<(newValue: boolean) => void>;
+}>> & {}, {
+    color: string;
+    disabled: boolean;
+    compact: boolean;
+}>;
+export default _default;

package/lib/components/NCheckboxLabel.jsx

@@ -0,0 +1,42 @@
+import { createComponent, createProps } from '../utils/component';
+import NCheckbox, { nCheckboxProps } from './NCheckbox';
+export const nCheckboxLabelProps = createProps({
+    ...nCheckboxProps,
+    /**
+     * The title of the checkbox.
+     */
+    title: String,
+    /**
+     * The description of the checkbox.
+     */
+    description: String,
+    /**
+     * If set to `true`, a smaller margin is applied between the label and the checkbox.
+     */
+    compact: Boolean,
+});
+/**
+ * The `NCheckboxLabel` is a checkbox with a title and a description.
+ */
+export default createComponent('NCheckboxLabel', nCheckboxLabelProps, props => {
+    const toggleValue = () => {
+        if (!props.disabled)
+            props.onUpdateValue?.(!props.value);
+    };
+    return () => (<div class="flex items-center">
+            <NCheckbox {...props}/>
+            <div class={`${props.compact ? 'ml-2' : 'ml-3'} text-sm`}>
+                <label onClick={toggleValue} class={[
+            'font-medium select-none',
+            props.disabled ? 'text-default-300' : 'text-default-700 cursor-pointer',
+        ]}>
+                    {props.title}
+                </label>
+                <p class={props.disabled ? 'text-default-300' : 'text-default-500'}>
+                    <span onClick={toggleValue} class={['select-none', props.disabled ? '' : 'cursor-pointer']}>
+                        {props.description}
+                    </span>
+                </p>
+            </div>
+        </div>);
+});