@naptics/vue-collection 0.2.15 → 0.3.1

package/src/lib/utils/vue.ts

@@ -0,0 +1,25 @@
+import { type Ref, watch, type ComputedRef } from 'vue'
+
+/**
+ * Creates a watcher on the updater function, which sets the value of the ref on every change.
+ * @param ref the ref to update
+ * @param updater the updater funtion which provides the updates
+ */
+export function updateWith<T>(ref: Ref<T>, updater: () => T): void {
+    watch(
+        updater,
+        newValue => {
+            ref.value = newValue
+        },
+        { immediate: true }
+    )
+}
+
+/**
+ * Conveience function to create a watcher for a ref
+ * @param ref the ref to watch
+ * @param onChange the function, which is executed on change of a value
+ */
+export function watchRef<T>(ref: Ref<T> | ComputedRef<T>, onChange: (newValue: T) => void): void {
+    watch(() => ref.value, onChange)
+}

package/tailwind.config.js

@@ -0,0 +1,38 @@
+const colors = require('tailwindcss/colors')
+
+const unresolvedConfig = require('tailwindcss/defaultConfig')
+const resolveConfig = require('tailwindcss/resolveConfig')
+const config = resolveConfig(unresolvedConfig)
+
+const allShades = '50|100|200|300|400|500|600|700|800|900'
+const usedColors = 'default|primary|secondary|green|red|yellow|blue'
+const smallSizes = '1|2|3|4|5|6|7|8|9|10|11|12|14|16|18|20'
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ['./src/**/*.{tsx,ts}'],
+    safelist: [
+        {
+            pattern: new RegExp(`^(bg|text)-(${usedColors})-(${allShades})$`),
+            variants: ['hover'],
+        },
+        {
+            pattern: new RegExp(`^ring-(${usedColors})-(${allShades})$`),
+            variants: ['focus-visible'],
+        },
+        {
+            pattern: new RegExp(`^(w|h)-(${smallSizes})$`),
+        },
+    ],
+    theme: {
+        extend: {
+            colors: {
+                default: colors.slate,
+                primary: colors.violet,
+                secondary: colors.fuchsia,
+            },
+            minHeight: config.theme.spacing,
+        },
+    },
+    plugins: [require('@tailwindcss/forms')],
+}

package/tsconfig.config.json

@@ -0,0 +1,9 @@
+{
+    "extends": "@vue/tsconfig/tsconfig.json",
+    "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
+    "compilerOptions": {
+        "composite": true,
+        "types": ["node"],
+        "noEmit": false
+    }
+}

package/tsconfig.demo.json

@@ -0,0 +1,19 @@
+{
+    "extends": "@vue/tsconfig/tsconfig.dom.json",
+    // all files must be included, because demo uses lib.
+    "include": ["env.d.ts", "src/**/*", "src/**/*.json"],
+    "exclude": ["src/**/__tests__/*"],
+    "compilerOptions": {
+        "composite": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["./src/*"]
+        },
+        "jsx": "preserve",
+        "jsxImportSource": "vue",
+        "noImplicitAny": false,
+        "noUncheckedIndexedAccess": false,
+        "skipLibCheck": true,
+        "noEmit": false
+    }
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+    "references": [
+        {
+            "path": "./tsconfig.config.json"
+        },
+        {
+            "path": "./tsconfig.demo.json"
+        },
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.vitest.json"
+        }
+    ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,18 @@
+{
+    "extends": "@vue/tsconfig/tsconfig.dom.json",
+    "include": ["src/lib/**/*", "src/lib/**/*.json"],
+    "exclude": ["src/**/__tests__/*"],
+    "compilerOptions": {
+        "composite": true,
+        // don't allow @ alias inside library
+        "paths": {},
+        "outDir": "lib",
+        "jsx": "preserve",
+        "jsxImportSource": "vue",
+        "noImplicitAny": false,
+        "downlevelIteration": true,
+        "skipLibCheck": true,
+        "noEmit": false,
+        "declaration": true
+    }
+}

package/tsconfig.vitest.json

@@ -0,0 +1,8 @@
+{
+    "extends": "./tsconfig.lib.json",
+    "exclude": [],
+    "compilerOptions": {
+        "composite": true,
+        "types": ["node", "jsdom"]
+    }
+}

package/utils/breakpoints.d.ts

@@ -1,7 +1,7 @@
 import { type ComputedRef } from 'vue';
 export type TWBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export declare const breakpoints: Readonly<Record<TWBreakpoint, number>>;
-export declare const bodyWidth: import("vue").Ref<number>;
+export declare const bodyWidth: import("vue").Ref<number, number>;
 /**
  * This function has to be called once in the app two ensure that the breakpoint utilities actually update.
  * It sets a `window.onresize` listener.

package/utils/component.d.ts

@@ -17,9 +17,7 @@ export type ExtractedProps<T extends Props> = Readonly<LooseRequired<Readonly<Ex
  * @param setup the setup function, which will be called when the component is mounted.
  * @returns the created vue-component.
  */
-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>>;
+export declare function createComponent<T extends Props>(name: string, props: T, setup: (props: ExtractedProps<T>, context: SetupContext<never[]>) => RenderFunction | Promise<RenderFunction>): import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
 /**
  * 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
@@ -27,9 +25,7 @@ export declare function createComponent<T extends Props>(name: string, props: T,
  * 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>>;
+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").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
 /**
  * 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.
@@ -38,7 +34,7 @@ export declare function createComponentWithSlots<T extends Props>(name: string,
  * @param setup the setup function, which will be called when the component is mounted.
  * @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<{}>> & {}, {}>;
+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").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 /**
  * 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

@@ -1,5 +1,4 @@
-import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
-import { defineComponent, reactive, toRef, toRefs, ref } from 'vue';
+import { defineComponent, reactive, toRef, toRefs, ref, Fragment as _Fragment, createVNode as _createVNode } 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.
@@ -11,6 +10,10 @@ import { defineComponent, reactive, toRef, toRefs, ref } from 'vue';
  * @returns the created vue-component.
  */
 export function createComponent(name, props, setup) {
+  // Vue 3.5's defineComponent has strict type requirements that don't align with our simplified API.
+  // The type assertion is necessary because the generic setup function signature doesn't match
+  // Vue's complex overloaded defineComponent types, even though the runtime behavior is correct.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return defineComponent({
     name,
     props,

package/utils/identifiable.js

@@ -21,7 +21,11 @@ function contains(array, id) {
 }
 function insertSingle(baseArray, insertItem) {
   const index = baseArray.findIndex(item => item.id === insertItem.id);
-  index === -1 ? baseArray.push(insertItem) : baseArray.splice(index, 1, insertItem);
+  if (index === -1) {
+    baseArray.push(insertItem);
+  } else {
+    baseArray.splice(index, 1, insertItem);
+  }
 }
 /**
  * Inserts the items into the given array, replacing items with the same `id`.

package/vite.config.ts

@@ -0,0 +1,28 @@
+import { fileURLToPath, URL } from 'url'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import vueI18n from '@intlify/unplugin-vue-i18n/vite'
+import { resolve, dirname } from 'path'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [
+        vue(),
+        vueJsx(),
+        vueI18n({
+            compositionOnly: true,
+            runtimeOnly: false,
+            fullInstall: false,
+            include: resolve(__dirname, 'src/i18n/*'),
+        }),
+    ],
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('./src', import.meta.url)),
+        },
+    },
+    base: process.env.VITE_BASE_PATH,
+})