@naptics/vue-collection 0.0.6 → 0.1.0

package/index.d.ts

@@ -1,2 +1,2 @@
-import { createComponent, createView, createProps } from './utils/component';
-export { createComponent, createView, createProps };
+import { createComponent, createView } from './utils/component';
+export { createComponent, createView };

package/index.js

@@ -1,2 +1,2 @@
-import { createComponent, createView, createProps } from './utils/component';
-export { createComponent, createView, createProps };
+import { createComponent, createView } from './utils/component';
+export { createComponent, createView };

package/package.json

@@ -1,6 +1,8 @@
 {
     "name": "@naptics/vue-collection",
-    "version": "0.0.6",
+    "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.0",
     "main": "./index.js",
     "repository": {
         "type": "git",

package/utils/breakpoints.d.ts

@@ -7,6 +7,9 @@ export declare const bodyWidth: import("vue").Ref<number>;
  * It sets a `window.onresize` listener.
  */
 export declare function addDocumentResizeEventListener(): void;
+/**
+ * Returns a ref whose value is `true` as long as the `document.body.clientWitdh` is above the specified breakpoint.
+ */
 export declare function isWidthBreakpoint(breakpoint: TWBreakpoint): ComputedRef<boolean>;
 export declare const isWidth2xl: ComputedRef<boolean>;
 export declare const isWidthXl: ComputedRef<boolean>;

package/utils/breakpoints.js

@@ -16,6 +16,9 @@ export function addDocumentResizeEventListener() {
         bodyWidth.value = document.body.clientWidth;
     };
 }
+/**
+ * Returns a ref whose value is `true` as long as the `document.body.clientWitdh` is above the specified breakpoint.
+ */
 export function isWidthBreakpoint(breakpoint) {
     switch (breakpoint) {
         case 'sm':

package/utils/component.d.ts

@@ -28,14 +28,6 @@ export declare function createComponent<T extends Props>(name: string, props: T,
  * @returns the created vue-component.
  */
 export declare function createView(name: string, setup: (context: SetupContext<never[]>) => RenderFunction | Promise<RenderFunction>): import("vue").DefineComponent<{}, RenderFunction, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{}>> & {}, {}>;
-/**
- * If props are specified outside of the {@link createComponent}
- * function - e.g. to export them or for better code style -
- * this helper function can be used to ensure strict typing.
- * @param props the props which should be created.
- * @returns the created props, with correct typing.
- */
-export declare function createProps<T extends Props>(props: T): T;
 /**
  * Extracts props from another prop object and returns a reactive object with the specified props.
  * @param props the props to extract from

package/utils/component.js

@@ -23,16 +23,6 @@ export function createComponent(name, props, setup) {
 export function createView(name, setup) {
     return defineComponent({ name, emits: [], setup: (props, context) => setup(context) });
 }
-/**
- * If props are specified outside of the {@link createComponent}
- * function - e.g. to export them or for better code style -
- * this helper function can be used to ensure strict typing.
- * @param props the props which should be created.
- * @returns the created props, with correct typing.
- */
-export function createProps(props) {
-    return props;
-}
 /**
  * Extracts props from another prop object and returns a reactive object with the specified props.
  * @param props the props to extract from

package/utils/identifiable.d.ts

@@ -12,7 +12,7 @@ export type MaybeIdentifiable = Readonly<{
  * @param id The `id` of the desired item.
  * @returns The first item with the specified `id` or `undefined` if none exists.
  */
-declare function find<T extends Identifiable>(array: T[], id: IdType): T | undefined;
+declare function find<T extends Identifiable>(array: Nullish<T[]>, id: IdType): T | undefined;
 /**
  * Checks if the given array contains an item with the `id`.
  * @param array The array to search the item in.
@@ -47,11 +47,11 @@ declare function areSameArrays(first: Identifiable[], second: Identifiable[]): b
 /**
  * This object contains utility functions to deal with {@link Identifiable} objects.
  */
-export declare const Id: import("./utils").ReadonlyObject<{
-    find: typeof find;
-    contains: typeof contains;
-    insert: typeof insert;
-    remove: typeof remove;
-    areSameArrays: typeof areSameArrays;
-}>;
+export declare const Id: {
+    readonly find: typeof find;
+    readonly contains: typeof contains;
+    readonly insert: typeof insert;
+    readonly remove: typeof remove;
+    readonly areSameArrays: typeof areSameArrays;
+};
 export {};

package/utils/identifiable.js

@@ -1,4 +1,4 @@
-import { markReadonly } from './utils';
+import { isNullish } from './utils';
 /**
  * Looks for the `id` in the given array of `Identifiables`.
  * @param array The array to search the item in.
@@ -6,6 +6,8 @@ import { markReadonly } from './utils';
  * @returns The first item with the specified `id` or `undefined` if none exists.
  */
 function find(array, id) {
+    if (isNullish(array))
+        return undefined;
     const filtered = array.filter(item => item.id === id);
     if (filtered.length > 0)
         return filtered[0];
@@ -75,4 +77,4 @@ function areSameArrays(first, second) {
 /**
  * This object contains utility functions to deal with {@link Identifiable} objects.
  */
-export const Id = markReadonly({ find, contains, insert, remove, areSameArrays });
+export const Id = { find, contains, insert, remove, areSameArrays };

package/utils/tailwind.d.ts

@@ -1,2 +1,4 @@
+import type { FunctionalComponent, HTMLAttributes, VNodeProps } from 'vue';
 export type TWTextSize = 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'text-2xl' | 'text-3xl' | 'text-4xl' | 'text-5xl' | 'text-6xl' | 'text-7xl' | 'text-8xl' | 'text-9xl';
 export type TWMaxWidth = 'max-w-xs' | 'max-w-sm' | 'max-w-md' | 'max-w-lg' | 'max-w-xl' | 'max-w-2xl' | 'max-w-3xl' | 'max-w-4xl' | 'max-w-5xl' | 'max-w-6xl' | 'max-w-7xl' | 'max-w-full' | 'max-w-min' | 'max-w-max' | 'max-w-fit' | 'max-w-prose' | 'max-w-screen-sm' | 'max-w-screen-md' | 'max-w-screen-lg' | 'max-w-screen-xl' | 'max-w-screen-2xl';
+export type HeroIcon = FunctionalComponent<HTMLAttributes & VNodeProps>;

package/utils/utils.d.ts

@@ -1,18 +1,7 @@
-import type { FunctionalComponent, HTMLAttributes, VNodeProps } from 'vue';
-export type AnyObject = Record<string | number | symbol, unknown>;
-export type EmptyObject = Record<string, never>;
+import type { Ref } from 'vue';
 export type Optional<T> = T | undefined;
 export type Nullable<T> = T | null;
 export type Nullish<T> = T | null | undefined;
-export type HeroIcon = FunctionalComponent<HTMLAttributes & VNodeProps>;
-export type ReadonlyObject<T extends AnyObject> = {
-    readonly [P in keyof T]: T[P] extends ReadonlyObject<infer _U> ? T[P] : T[P] extends AnyObject ? ReadonlyObject<T[P]> : T[P];
-};
-export declare function markReadonly<T extends AnyObject>(object: T): ReadonlyObject<T>;
-/**
- * Generates and returns a non random but unique id.
- */
-export declare function uniqueId(): number;
 /**
  * Determines if a value is not null or undefined.
  * @param value the value to check
@@ -25,3 +14,27 @@ export declare function notNullish<T>(value: Nullish<T>): value is T;
  * @returns `true` if the value is `null` or `undefined`.
  */
 export declare function isNullish(value: Nullish<unknown>): value is null | undefined;
+/**
+ * Determines if the value of a ref is not nullish.
+ * @param ref the ref to check
+ * @returns `true` if the value of the ref is not nullish.
+ * @see notNullish
+ */
+export declare function notNullishRef<T>(ref: Ref<T>): ref is Ref<NonNullable<T>>;
+export type AnyObject = Record<string | number | symbol, unknown>;
+export type EmptyObject = Record<string, never>;
+export declare function isAnyObject(object: unknown): object is AnyObject;
+/**
+ * Marks all properties of an object (including sub-objects) as readonly.
+ */
+export type ReadonlyObject<T extends AnyObject> = {
+    readonly [P in keyof T]: T[P] extends ReadonlyObject<infer _U> ? T[P] : T[P] extends AnyObject ? ReadonlyObject<T[P]> : T[P];
+};
+/**
+ * Returns the same object casted to a {@link ReadonlyObject}.
+ */
+export declare function readonlyObject<T extends AnyObject>(object: T): ReadonlyObject<T>;
+/**
+ * Generates and returns a non random but unique id.
+ */
+export declare function uniqueId(): number;

package/utils/utils.js

@@ -1,13 +1,6 @@
-export function markReadonly(object) {
-    return object;
-}
-let currentId = 1;
-/**
- * Generates and returns a non random but unique id.
+/*
+ * ---------- Null and Undefined ----------
  */
-export function uniqueId() {
-    return currentId++;
-}
 /**
  * Determines if a value is not null or undefined.
  * @param value the value to check
@@ -24,3 +17,31 @@ export function notNullish(value) {
 export function isNullish(value) {
     return value === null || value === undefined;
 }
+/**
+ * Determines if the value of a ref is not nullish.
+ * @param ref the ref to check
+ * @returns `true` if the value of the ref is not nullish.
+ * @see notNullish
+ */
+export function notNullishRef(ref) {
+    return notNullish(ref.value);
+}
+export function isAnyObject(object) {
+    return typeof object === 'object' && !Array.isArray(object);
+}
+/**
+ * Returns the same object casted to a {@link ReadonlyObject}.
+ */
+export function readonlyObject(object) {
+    return object;
+}
+/*
+ * ---------- Unique Id ----------
+ */
+let currentId = 1;
+/**
+ * Generates and returns a non random but unique id.
+ */
+export function uniqueId() {
+    return currentId++;
+}