@naptics/vue-collection 0.3.1 → 1.0.0-beta.1

package/src/lib/utils/component.tsx

@@ -97,7 +97,7 @@ export function extractProps<T extends Record<string, unknown>>(
     ...keys: (keyof T)[]
 ): UnwrapNestedRefs<Partial<ToRefs<T>>> {
     const partial: Partial<ToRefs<T>> = {}
-    for (const key of keys) partial[key] = toRef(props, key)
+    for (const key of keys) partial[key] = toRef(props, key) as never
     return reactive(partial)
 }
 

package/tsconfig.lib.json

@@ -12,6 +12,7 @@
         "noImplicitAny": false,
         "downlevelIteration": true,
         "skipLibCheck": true,
+        "allowImportingTsExtensions": false,
         "noEmit": false,
         "declaration": true
     }

package/vite.config.ts

@@ -1,5 +1,6 @@
 import { fileURLToPath, URL } from 'url'
 import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueI18n from '@intlify/unplugin-vue-i18n/vite'
@@ -10,6 +11,7 @@ const __dirname = dirname(fileURLToPath(import.meta.url))
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [
+        tailwindcss(),
         vue(),
         vueJsx(),
         vueI18n({

package/components/NAlert.d.ts

@@ -1,29 +0,0 @@
-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.
-     */
-    readonly variant: {
-        readonly type: PropType<AlertVariant>;
-        readonly default: "success";
-    };
-    /**
-     * The text of the alert.
-     */
-    readonly text: StringConstructor;
-    /**
-     * If set to `true` the X-button of the alert is hidden.
-     */
-    readonly hideX: BooleanConstructor;
-    /**
-     * This is called, when the X-button is clicked.
-     */
-    readonly 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 Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NAlert, Component as default };

package/components/NAlert.js

@@ -1,84 +0,0 @@
-import { createVNode as _createVNode } from "vue";
-import { createComponent } 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 = {
-  /**
-   * 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.
- */
-const Component = createComponent('NAlert', nAlertProps, (props, {
-  slots
-}) => {
-  const variant = computed(() => VARIANTS[props.variant]);
-  return () => _createVNode("div", {
-    "class": `rounded-md p-3 shadow-lg bg-${variant.value.color}-50`
-  }, [_createVNode("div", {
-    "class": "flex items-center"
-  }, [_createVNode("div", {
-    "class": "flex flex-shrink-0 items-center"
-  }, [variant.value.icon()]), _createVNode("div", {
-    "class": "ml-3 flex-grow"
-  }, [_createVNode("p", {
-    "class": `text-sm font-medium text-${variant.value.color}-900`
-  }, [slots.default?.() ?? props.text])]), !props.hideX && _createVNode("div", {
-    "class": "flex items-center flex-shrink-0 ml-3"
-  }, [_createVNode(NIconButton, {
-    "color": variant.value.color,
-    "size": 5,
-    "icon": XMarkIcon,
-    "onClick": props.onDismiss
-  }, null)])])]);
-});
-const icon = (icon, color) => () => _createVNode(icon, {
-  "class": `h-5 w-5 text-${color}-500`
-}, null);
-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: () => _createVNode(NLoadingIndicator, {
-      "color": "blue",
-      "size": 7,
-      "shade": 500
-    }, null),
-    color: 'blue'
-  }
-};
-export { Component as NAlert, Component as default };

package/components/NBadge.d.ts

@@ -1,69 +0,0 @@
-import type { TWTextSize } from '../utils/tailwind';
-import type { PropType } from 'vue';
-export declare const nBadgeProps: {
-    readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => JSX.Element>;
-    readonly tooltipHide: BooleanConstructor;
-    readonly tooltipShow: BooleanConstructor;
-    readonly tooltipPlacement: {
-        readonly type: PropType<import("./NTooltip").TooltipPlacement>;
-        readonly default: "auto";
-    };
-    readonly tooltipMaxWidth: {
-        readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
-        readonly default: "max-w-xs";
-    };
-    readonly tooltipWrapperClass: StringConstructor;
-    readonly tooltipContentClass: StringConstructor;
-    readonly tooltipArrowClass: StringConstructor;
-    /**
-     * The text of the badge. Can alternatively be passed in the default slot.
-     */
-    readonly text: StringConstructor;
-    /**
-     * The text size, a standard tailwind text-size class.
-     */
-    readonly textSize: {
-        readonly type: PropType<TWTextSize>;
-        readonly default: "text-sm";
-    };
-    /**
-     * The color of the badge.
-     */
-    readonly color: {
-        readonly type: StringConstructor;
-        readonly default: "primary";
-    };
-    /**
-     * The background shade of the badge.
-     */
-    readonly shade: {
-        readonly type: NumberConstructor;
-        readonly default: 200;
-    };
-    /**
-     * The text shade of the badge.
-     */
-    readonly textShade: {
-        readonly type: NumberConstructor;
-        readonly default: 900;
-    };
-    /**
-     * If set to `true` the badges text is all-caps. Default is `true`.
-     */
-    readonly allCaps: {
-        readonly type: BooleanConstructor;
-        readonly default: true;
-    };
-    /**
-     * Adds the classes to the badge.
-     * 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.
-     */
-    readonly badgeClass: StringConstructor;
-};
-/**
- * The `NBadge` is a styled element to wrap a text.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NBadge, Component as default };

package/components/NBadge.js

@@ -1,64 +0,0 @@
-import { createVNode as _createVNode } from "vue";
-import { createComponent } from '../utils/component';
-import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip';
-export const nBadgeProps = {
-  /**
-   * 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
-  },
-  /**
-   * Adds the classes to the badge.
-   * 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.
-   */
-  badgeClass: String,
-  ...nToolTipPropsForImplementor
-};
-/**
- * The `NBadge` is a styled element to wrap a text.
- */
-const Component = createComponent('NBadge', nBadgeProps, (props, {
-  slots
-}) => {
-  return () => _createVNode(NTooltip, mapTooltipProps(props), {
-    default: () => [_createVNode("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' : '', props.badgeClass]
-    }, [slots.default?.() || props.text])]
-  });
-});
-export { Component as NBadge, Component as default };

package/components/NBreadcrub.d.ts

@@ -1,69 +0,0 @@
-import type { HeroIcon } from '../utils/tailwind';
-import type { TWTextSize } from '../utils/tailwind';
-import type { RouteLocationRaw } from 'vue-router';
-import type { PropType } from 'vue';
-export declare const nBreadcrumbProps: {
-    /**
-     * The items of the breadcrumb.
-     */
-    readonly items: {
-        readonly type: PropType<BreadcrumbItem[]>;
-        readonly default: () => never[];
-    };
-    /**
-     * The color of the breadcrumbs text and icons.
-     */
-    readonly color: {
-        readonly type: StringConstructor;
-        readonly default: "primary";
-    };
-    /**
-     * The text-size of the breadcrumb labels.
-     */
-    readonly textSize: {
-        readonly type: PropType<TWTextSize>;
-        readonly default: "text-base";
-    };
-    /**
-     * The icon which is used as a seperator between two breadcrumb items.
-     */
-    readonly icon: {
-        readonly type: PropType<HeroIcon>;
-        readonly default: import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}>;
-    };
-    /**
-     * The size of the icon in tailwind units.
-     */
-    readonly iconSize: {
-        readonly type: NumberConstructor;
-        readonly default: 5;
-    };
-    /**
-     * Adds the classes to the separator icons.
-     */
-    readonly iconClass: StringConstructor;
-    /**
-     * A slot the replace the breadcrumb labels.
-     */
-    readonly 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.
-     */
-    readonly 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 Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NBreadcrumb, Component as default };

package/components/NBreadcrub.js

@@ -1,71 +0,0 @@
-import { Fragment as _Fragment, createVNode as _createVNode } from "vue";
-import { createComponentWithSlots } from '../utils/component';
-import { ChevronRightIcon } from '@heroicons/vue/24/solid';
-import NLink from './NLink';
-export const nBreadcrumbProps = {
-  /**
-   * 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
-  },
-  /**
-   * Adds the classes to the separator icons.
-   */
-  iconClass: String,
-  /**
-   * 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.
- */
-const Component = createComponentWithSlots('NBreadcrumb', nBreadcrumbProps, ['seperator', 'item'], props => {
-  return () => _createVNode("div", {
-    "class": `flex flex-wrap items-center`
-  }, [props.items.map((item, index) => _createVNode(_Fragment, null, [props.item?.(item, index) || _createVNode(NLink, {
-    "textSize": props.textSize,
-    "route": item.route,
-    "color": props.color
-  }, {
-    default: () => [item.label]
-  }), index < props.items.length - 1 && (props.seperator?.(item, index) || _createVNode(props.icon, {
-    "class": `mx-2 w-${props.iconSize} h-${props.iconSize} text-${props.color}-500 ${props.iconClass}`
-  }, null))]))]);
-});
-export { Component as NBreadcrumb, Component as default };

package/components/NButton.d.ts

@@ -1,60 +0,0 @@
-import { type PropType } from 'vue';
-export declare const nButtonProps: {
-    readonly tooltipText: StringConstructor;
-    readonly tooltipContent: PropType<() => JSX.Element>;
-    readonly tooltipHide: BooleanConstructor;
-    readonly tooltipShow: BooleanConstructor;
-    readonly tooltipPlacement: {
-        readonly type: PropType<import("./NTooltip").TooltipPlacement>;
-        readonly default: "auto";
-    };
-    readonly tooltipMaxWidth: {
-        readonly type: PropType<import("../utils/tailwind").TWMaxWidth>;
-        readonly default: "max-w-xs";
-    };
-    readonly tooltipWrapperClass: StringConstructor;
-    readonly tooltipContentClass: StringConstructor;
-    readonly tooltipArrowClass: StringConstructor;
-    /**
-     * The color of the button.
-     */
-    readonly color: {
-        readonly type: StringConstructor;
-        readonly default: "primary";
-    };
-    /**
-     * The html attribute, which indicates the type of the button.
-     */
-    readonly type: {
-        readonly type: PropType<"submit" | "button" | "reset">;
-        readonly default: "button";
-    };
-    /**
-     * If set to `true` the button is disabled and no interaction is possible.
-     */
-    readonly disabled: BooleanConstructor;
-    /**
-     * If set to `true` the button will show a loading animation.
-     * Setting `loading` to `true` will also disable the button.
-     */
-    readonly loading: BooleanConstructor;
-    /**
-     * If set to `true` the button will appear smaller.
-     */
-    readonly small: BooleanConstructor;
-    /**
-     * Adds the classes to the 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.
-     */
-    readonly buttonClass: StringConstructor;
-    /**
-     * This is called, when the button is clicked.
-     */
-    readonly onClick: PropType<() => void>;
-};
-/**
- * The `NButton` is a styled button.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NButton, Component as default };

package/components/NButton.js

@@ -1,72 +0,0 @@
-import { createVNode as _createVNode } from "vue";
-import { createComponent } from '../utils/component';
-import { computed } from 'vue';
-import NLoadingIndicator from './NLoadingIndicator';
-import NTooltip, { mapTooltipProps, nToolTipPropsForImplementor } from './NTooltip';
-export const nButtonProps = {
-  /**
-   * 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,
-  /**
-   * Adds the classes to the 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 button is clicked.
-   */
-  onClick: Function,
-  ...nToolTipPropsForImplementor
-};
-/**
- * The `NButton` is a styled button.
- */
-const Component = createComponent('NButton', nButtonProps, (props, {
-  slots
-}) => {
-  const isDisabled = computed(() => props.loading || props.disabled);
-  return () => _createVNode(NTooltip, mapTooltipProps(props), {
-    default: () => [_createVNode("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', props.buttonClass],
-      "onClick": props.onClick
-    }, [_createVNode("span", {
-      "class": {
-        'opacity-10': props.loading
-      }
-    }, [slots.default?.()]), props.loading && _createVNode("div", {
-      "class": "absolute inset-0 flex items-center justify-center opacity-50"
-    }, [_createVNode(NLoadingIndicator, {
-      "color": props.color,
-      "size": props.small ? 4 : 6,
-      "shade": 600
-    }, null)])])]
-  });
-});
-export { Component as NButton, Component as default };

package/components/NCheckbox.d.ts

@@ -1,20 +0,0 @@
-export declare const nCheckboxProps: {
-    /**
-     * The color of the checkbox.
-     */
-    readonly color: {
-        readonly type: StringConstructor;
-        readonly default: "primary";
-    };
-    /**
-     * If set to `true` the checkbox is disabled and no interaction is possible.
-     */
-    readonly disabled: BooleanConstructor;
-    readonly value: import("vue").PropType<boolean>;
-    readonly onUpdateValue: import("vue").PropType<(newValue: boolean) => void>;
-};
-/**
- * The `NCheckbox` is a styled checkbox.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NCheckbox, Component as default };

package/components/NCheckbox.js

@@ -1,43 +0,0 @@
-import { createVNode as _createVNode } from "vue";
-import { createComponent } from '../utils/component';
-import { vModelProps } from '../utils/vModel';
-import { nextTick, ref } from 'vue';
-export const nCheckboxProps = {
-  ...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.
- */
-const Component = 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 () => _createVNode("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`]
-  }, null);
-});
-export { Component as NCheckbox, Component as default };

package/components/NCheckboxLabel.d.ts

@@ -1,26 +0,0 @@
-export declare const nCheckboxLabelProps: {
-    /**
-     * The title of the checkbox.
-     */
-    readonly title: StringConstructor;
-    /**
-     * The description of the checkbox.
-     */
-    readonly description: StringConstructor;
-    /**
-     * If set to `true`, a smaller margin is applied between the label and the checkbox.
-     */
-    readonly compact: BooleanConstructor;
-    readonly color: {
-        readonly type: StringConstructor;
-        readonly default: "primary";
-    };
-    readonly disabled: BooleanConstructor;
-    readonly value: import("vue").PropType<boolean>;
-    readonly onUpdateValue: import("vue").PropType<(newValue: boolean) => void>;
-};
-/**
- * The `NCheckboxLabel` is a checkbox with a title and a description.
- */
-declare const Component: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-export { Component as NCheckboxLabel, Component as default };