@naptics/vue-collection 0.1.2 → 0.1.3

package/components/NBreadcrub.d.ts

@@ -1,7 +1,7 @@
 import type { HeroIcon } from '../utils/tailwind';
 import type { TWTextSize } from '../utils/tailwind';
-import type { PropType } from 'vue';
 import type { RouteLocationRaw } from 'vue-router';
+import type { PropType } from 'vue';
 export declare const nBreadcrumbProps: {
     /**
      * The items of the breadcrumb.
@@ -42,6 +42,10 @@ export declare const nBreadcrumbProps: {
      * Adds the classes to the top-level element.
      */
     readonly addClass: StringConstructor;
+    /**
+     * Adds the classes to the separator icons.
+     */
+    readonly addIconClass: StringConstructor;
     /**
      * A slot the replace the breadcrumb labels.
      */
@@ -105,6 +109,10 @@ declare const _default: import("vue").DefineComponent<{
      * Adds the classes to the top-level element.
      */
     readonly addClass: StringConstructor;
+    /**
+     * Adds the classes to the separator icons.
+     */
+    readonly addIconClass: StringConstructor;
     /**
      * A slot the replace the breadcrumb labels.
      */
@@ -154,6 +162,10 @@ declare const _default: import("vue").DefineComponent<{
      * Adds the classes to the top-level element.
      */
     readonly addClass: StringConstructor;
+    /**
+     * Adds the classes to the separator icons.
+     */
+    readonly addIconClass: StringConstructor;
     /**
      * A slot the replace the breadcrumb labels.
      */

package/components/NBreadcrub.js

@@ -1,5 +1,5 @@
 import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
-import { createComponent } from '../utils/component';
+import { createComponentWithSlots } from '../utils/component';
 import { ChevronRightIcon } from '@heroicons/vue/24/solid';
 import NLink from './NLink';
 export const nBreadcrumbProps = {
@@ -42,6 +42,10 @@ export const nBreadcrumbProps = {
    * Adds the classes to the top-level element.
    */
   addClass: String,
+  /**
+   * Adds the classes to the separator icons.
+   */
+  addIconClass: String,
   /**
    * A slot the replace the breadcrumb labels.
    */
@@ -55,7 +59,7 @@ export const nBreadcrumbProps = {
 /**
  * The `NBreadcrumb` is a styled breadcrumb which can be used as a navigation in hierarchical views.
  */
-export default createComponent('NBreadcrumb', nBreadcrumbProps, props => {
+export default createComponentWithSlots('NBreadcrumb', nBreadcrumbProps, ['seperator', 'item'], props => {
   return () => _createVNode("div", {
     "class": `flex flex-wrap items-center ${props.addClass}`
   }, [props.items.map((item, index) => _createVNode(_Fragment, null, [props.item?.(item, index) || _createVNode(NLink, {
@@ -65,6 +69,6 @@ export default createComponent('NBreadcrumb', nBreadcrumbProps, props => {
   }, {
     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`
+    "class": `mx-2 w-${props.iconSize} h-${props.iconSize} text-${props.color}-500 ${props.addIconClass}`
   }, null))]))]);
 });

package/package.json

@@ -2,7 +2,7 @@
     "name": "@naptics/vue-collection",
     "author": "Timo Siegenthaler",
     "description": "Vue Collection is a collection of styled and fully functional Vue components which can easily be integrated into our projects.",
-    "version": "0.1.2",
+    "version": "0.1.3",
     "main": "./index.js",
     "repository": {
         "type": "git",

package/utils/component.d.ts

@@ -1,7 +1,8 @@
 import type { LooseRequired } from '@vue/shared';
 import { type ComponentObjectPropsOptions, type ExtractPropTypes, type RenderFunction, type SetupContext, type ToRefs, type UnwrapNestedRefs } from 'vue';
+import type { AnyObject } from './utils';
 type Data = Record<string, unknown>;
-export type Props<T = Data> = ComponentObjectPropsOptions<T>;
+export type Props<T extends Data = Data> = ComponentObjectPropsOptions<T>;
 /**
  * `ExtractedProps` maps a prop object to the props, which are received in the `setup` function of a components.
  */
@@ -19,6 +20,16 @@ export type ExtractedProps<T extends Props> = Readonly<LooseRequired<Readonly<Ex
 export declare function createComponent<T extends Props>(name: string, props: T, setup: (props: ExtractedProps<T>, context: SetupContext<never[]>) => RenderFunction | Promise<RenderFunction>): import("vue").DefineComponent<T, RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<T extends import("vue").ComponentPropsOptions<{
     [x: string]: unknown;
 }> ? ExtractPropTypes<T> : T> & {}, import("vue").ExtractDefaultPropTypes<T>>;
+/**
+ * When using this function, the created component will make available all props
+ * specifiedin `slotPropKeys` as slot. In this way, they can be used by either setting
+ * the prop directly or by using a slot with the same name. This is useful for older
+ * components (in `.vue` files), because they are dependent on slots.
+ * @see {@link createComponent}
+ */
+export declare function createComponentWithSlots<T extends Props>(name: string, props: T, slotPropKeys: SlotPropsKeys<ExtractedProps<T>>, setup: (props: ExtractedProps<T>, context: SetupContext<never[]>) => RenderFunction | Promise<RenderFunction>): import("vue").DefineComponent<T, RenderFunction, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<T extends import("vue").ComponentPropsOptions<{
+    [x: string]: unknown;
+}> ? ExtractPropTypes<T> : T> & {}, import("vue").ExtractDefaultPropTypes<T>>;
 /**
  * Views should be created using this helper function. Views are special components, which don't have props.
  * They are often the parent objects in a view hierarchy and contain many components.
@@ -39,4 +50,12 @@ export declare function createView(name: string, setup: (context: SetupContext<n
  * console.log(childProps) // { title: 'hi' }
  */
 export declare function extractProps<T extends Record<string, unknown>>(props: T, ...keys: (keyof T)[]): UnwrapNestedRefs<Partial<ToRefs<T>>>;
+type SlotFunction<Args extends any[] = any[]> = (...args: Args) => JSX.Element;
+/**
+ * Filters object T to only have properties of type K.
+ */
+type FilterObject<T, K> = {
+    [P in keyof T as T[P] extends K ? P : never]: T[P];
+};
+type SlotPropsKeys<T extends AnyObject> = (keyof FilterObject<T, SlotFunction | undefined>)[];
 export {};

package/utils/component.js

@@ -1,41 +0,0 @@
-import { defineComponent, reactive, toRef, } from 'vue';
-/**
- * Components should be created using this helper function.
- * It only takes three arguments, the name and the props of the component and the setup function.
- * All other arguments which the {@link defineComponent} method of vue may provide,
- * should not be used for a better consistency across all components.
- * @param name the name of the component, should be more than one word.
- * @param props the props of the component.
- * @param setup the setup function, which will be called when the component is mounted.
- * @returns the created vue-component.
- */
-export function createComponent(name, props, setup) {
-    return defineComponent({ name, props, emits: [], setup });
-}
-/**
- * Views should be created using this helper function. Views are special components, which don't have props.
- * They are often the parent objects in a view hierarchy and contain many components.
- * This function is syntactic sugar to create views and just calls {@link createComponent}.
- * @param name the name of the component, should be more than one word.
- * @param setup the setup function, which will be called when the component is mounted.
- * @returns the created vue-component.
- */
-export function createView(name, setup) {
-    return defineComponent({ name, emits: [], setup: (props, context) => setup(context) });
-}
-/**
- * Extracts props from another prop object and returns a reactive object with the specified props.
- * @param props the props to extract from
- * @param keys the keys to extract from the props
- * @returns the new object with the specified props
- * @example
- * const parentProps = { title: 'hi', text: 'ho' }
- * const childProps = extractProps(parentProps, 'title')
- * console.log(childProps) // { title: 'hi' }
- */
-export function extractProps(props, ...keys) {
-    const partial = {};
-    for (const key of keys)
-        partial[key] = toRef(props, key);
-    return reactive(partial);
-}