@tb-dev/vue 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Andrew Ferreira <andrew.shien2@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,5 @@
+# @tb-dev/vue
+
+```shell
+pnpm add @tb-dev/vue
+```

package/dist/components/index.d.ts

@@ -0,0 +1 @@
+export * from './link';

package/dist/components/link/Link.vue.d.ts

@@ -0,0 +1,19 @@
+import { VNode } from 'vue';
+import { LinkProps } from './types';
+declare const _default: <T extends string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & LinkProps<T> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Readonly<{
+        default?: () => VNode;
+    }> & {
+        default?: () => VNode;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/link/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Link } from './Link.vue';
+import { LinkProps } from './types';
+export { Link, type LinkProps };

package/dist/components/link/types.d.ts

@@ -0,0 +1,4 @@
+export interface LinkProps<T extends string> {
+    label?: string;
+    to: T;
+}

package/dist/composables/async-computed/index.d.ts

@@ -0,0 +1,4 @@
+import { ShallowRef } from 'vue';
+import { AsyncComputedOptions as Options } from '@vueuse/core';
+export type AsyncComputedOptions = Omit<Options, 'shallow'>;
+export declare function asyncComputed<T>(initial: T, callback: () => Promise<T> | T, options?: AsyncComputedOptions): Readonly<ShallowRef<T>>;

package/dist/composables/async-ref/index.d.ts

@@ -0,0 +1,10 @@
+import { ShallowRef } from 'vue';
+import { UseAsyncStateOptions } from '@vueuse/core';
+type Options = Omit<UseAsyncStateOptions<true>, 'shallow'>;
+export interface AsyncRefOptions extends Options {
+    immediate?: boolean;
+}
+export declare function asyncRef<T>(initial: T, fn: () => Promise<T>, options?: AsyncRefOptions): Readonly<ShallowRef<T>> & {
+    execute: (delay?: number, ...args: any[]) => Promise<T>;
+};
+export {};

package/dist/composables/element-size/index.d.ts

@@ -0,0 +1,9 @@
+import { MaybeRefOrGetter, Ref } from 'vue';
+import { MaybeElement } from '@vueuse/core';
+export declare function useElementSize<T extends MaybeElement>(element: MaybeRefOrGetter<T>): {
+    width: import('vue').ShallowRef<number, number>;
+    height: import('vue').ShallowRef<number, number>;
+    stop: () => void;
+};
+export declare function useHeight<T extends MaybeElement>(element: MaybeRefOrGetter<T>): Readonly<Ref<number>>;
+export declare function useWidth<T extends MaybeElement>(element: MaybeRefOrGetter<T>): Readonly<Ref<number>>;

package/dist/composables/index.d.ts

@@ -0,0 +1,6 @@
+export * from './async-computed';
+export * from './async-ref';
+export * from './element-size';
+export * from './key-down';
+export * from './local-ref';
+export * from './window-size';

package/dist/composables/key-down/index.d.ts

@@ -0,0 +1,15 @@
+import { Fn, MaybePromise, Option } from '@tb-dev/utils';
+import { KeyFilter, OnKeyStrokeOptions } from '@vueuse/core';
+export type KeyDownEventHandler = Option<(event: KeyboardEvent) => MaybePromise<unknown>>;
+export type OnKeyDownOptions = Omit<OnKeyStrokeOptions, 'eventName'> & {
+    altKey?: boolean;
+    ctrlKey?: boolean;
+    detached?: boolean;
+    metaKey?: boolean;
+    prevent?: boolean;
+    shiftKey?: boolean;
+    stopPropagation?: boolean;
+};
+export declare function onKeyDown(key: KeyFilter, handler?: KeyDownEventHandler, options?: OnKeyDownOptions): Fn;
+export declare function onAltKeyDown(key: KeyFilter, handler?: KeyDownEventHandler, options?: Omit<OnKeyDownOptions, 'altKey' | 'eventName'>): Fn;
+export declare function onCtrlKeyDown(key: KeyFilter, handler?: KeyDownEventHandler, options?: Omit<OnKeyDownOptions, 'ctrlKey' | 'eventName'>): Fn;

package/dist/composables/local-ref/index.d.ts

@@ -0,0 +1,8 @@
+import { Ref } from 'vue';
+export interface LocalRefOptions {
+    deep?: boolean;
+    initOnMounted?: boolean;
+    onError?: (err: unknown) => void;
+    writeDefaults?: boolean;
+}
+export declare function localRef<T>(key: string, initial: T, options?: LocalRefOptions): Ref<T>;

package/dist/composables/window-size/index.d.ts

@@ -0,0 +1,3 @@
+import { Ref } from 'vue';
+export declare function useWindowHeight(): Readonly<Ref<number>>;
+export declare function useWindowWidth(): Readonly<Ref<number>>;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './composables';
+export * from './utils';

package/dist/index.js

@@ -0,0 +1,161 @@
+import { defineComponent, createBlock, openBlock, unref, withCtx, createElementBlock, renderSlot, toDisplayString, toRef, effectScope, computed, toValue } from 'vue';
+import { RouterLink } from 'vue-router';
+import { computedAsync, useAsyncState, useElementSize as useElementSize$1, tryOnScopeDispose, onKeyStroke, useLocalStorage, useWindowSize } from '@vueuse/core';
+import { isNil } from '@tb-dev/utils';
+
+const _hoisted_1 = { key: 0 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Link",
+  props: {
+    label: {},
+    to: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(RouterLink), {
+        to: { name: _ctx.to }
+      }, {
+        default: withCtx(() => [
+          _ctx.label ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(_ctx.label), 1)) : renderSlot(_ctx.$slots, "default", { key: 1 })
+        ]),
+        _: 3
+      }, 8, ["to"]);
+    };
+  }
+});
+
+function create() {
+  let ERROR_HANDLER_FN = null;
+  function get() {
+    return ERROR_HANDLER_FN;
+  }
+  function set(fn) {
+    ERROR_HANDLER_FN = fn;
+  }
+  function handle(err) {
+    if (ERROR_HANDLER_FN) {
+      void Promise.try(ERROR_HANDLER_FN, err);
+    }
+  }
+  return { get, set, handle };
+}
+const { get: getErrorHandler, set: setErrorHandler, handle: handleError } = create();
+
+function asyncComputed(initial, callback, options) {
+  const state = computedAsync(callback, initial, {
+    onError: handleError,
+    shallow: true,
+    ...options
+  });
+  return state;
+}
+
+function asyncRef(initial, fn, options = {}) {
+  const { immediate = true } = options;
+  const { execute, state } = useAsyncState(fn, initial, {
+    immediate,
+    onError: handleError,
+    resetOnExecute: false,
+    shallow: true,
+    throwError: false,
+    ...options
+  });
+  return Object.assign(state, { execute });
+}
+
+function useElementSize(element) {
+  return useElementSize$1(toRef(element), { height: 0, width: 0 }, { box: "border-box" });
+}
+function useHeight(element) {
+  return useElementSize(element).height;
+}
+function useWidth(element) {
+  return useElementSize(element).width;
+}
+
+function onKeyDown(key, handler, options = {}) {
+  const {
+    altKey = false,
+    ctrlKey = false,
+    detached = false,
+    metaKey = false,
+    prevent = true,
+    shiftKey = false,
+    stopPropagation = false
+  } = options;
+  const callback = (e) => {
+    if (e.altKey !== altKey || e.ctrlKey !== ctrlKey || e.metaKey !== metaKey || e.shiftKey !== shiftKey) {
+      return;
+    }
+    if (prevent) {
+      e.preventDefault();
+    }
+    if (stopPropagation) {
+      e.stopPropagation();
+    }
+    if (handler) {
+      Promise.try(handler, e).catch(handleError);
+    }
+  };
+  const on = () => {
+    return onKeyStroke(key, callback, {
+      ...options,
+      eventName: "keydown",
+      dedupe: true
+    });
+  };
+  let stop;
+  if (detached) {
+    const scope = effectScope(
+      /* detached */
+      true
+    );
+    stop = scope.run(() => on());
+  } else {
+    stop = on();
+  }
+  if (!detached) {
+    tryOnScopeDispose(() => stop());
+  }
+  return stop;
+}
+function onAltKeyDown(key, handler, options) {
+  return onKeyDown(key, handler, { ...options, altKey: true });
+}
+function onCtrlKeyDown(key, handler, options) {
+  return onKeyDown(key, handler, { ...options, ctrlKey: true });
+}
+
+function localRef(key, initial, options) {
+  const defaultValue = { inner: initial };
+  const local = useLocalStorage(key, defaultValue, {
+    deep: options?.deep ?? true,
+    initOnMounted: options?.initOnMounted ?? true,
+    onError: options?.onError ?? handleError,
+    writeDefaults: options?.writeDefaults ?? true,
+    serializer: {
+      read: JSON.parse,
+      write: JSON.stringify
+    }
+  });
+  return computed({
+    get: () => local.value.inner,
+    set: (value) => {
+      local.value.inner = value;
+    }
+  });
+}
+
+function useWindowHeight() {
+  return useWindowSize().height;
+}
+function useWindowWidth() {
+  return useWindowSize().width;
+}
+
+function maybe(value, fn) {
+  const _value = toValue(value);
+  return isNil(_value) ? null : fn(_value);
+}
+
+export { _sfc_main as Link, asyncComputed, asyncRef, getErrorHandler, handleError, localRef, maybe, onAltKeyDown, onCtrlKeyDown, onKeyDown, setErrorHandler, useElementSize, useHeight, useWidth, useWindowHeight, useWindowWidth };

package/dist/utils/error.d.ts

@@ -0,0 +1,3 @@
+import { MaybePromise, Option } from '@tb-dev/utils';
+export type ErrorHandler = (err: unknown) => MaybePromise<void>;
+export declare const getErrorHandler: () => Option<ErrorHandler>, setErrorHandler: (fn: ErrorHandler) => void, handleError: (err: unknown) => void;

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { maybe } from './maybe';
+export { type ErrorHandler, getErrorHandler, handleError, setErrorHandler } from './error';

package/dist/utils/maybe.d.ts

@@ -0,0 +1,3 @@
+import { Option } from '@tb-dev/utils';
+import { MaybeRefOrGetter } from 'vue';
+export declare function maybe<T, U>(value: MaybeRefOrGetter<Option<T>>, fn: (value: T) => U): U | null;

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@tb-dev/vue",
+  "version": "0.1.0",
+  "description": "Vue utilities",
+  "license": "MIT",
+  "type": "module",
+  "private": false,
+  "packageManager": "pnpm@10.7.0",
+  "funding": "https://github.com/sponsors/ferreira-tb",
+  "author": {
+    "name": "Andrew Ferreira",
+    "email": "andrew.shien2@gmail.com",
+    "url": "https://github.com/ferreira-tb"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ferreira-tb/vue-utils.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ferreira-tb/vue-utils/issues"
+  },
+  "keywords": [
+    "vue",
+    "utils",
+    "components",
+    "composables"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "format": "prettier . --write",
+    "lint": "eslint . --config eslint.config.js",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@tb-dev/utils": "^5.1.4",
+    "@vueuse/core": "^13.0.0",
+    "lucide-vue-next": "^0.484.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.15",
+    "@tb-dev/eslint-config": "^6.7.1",
+    "@types/node": "^22.13.14",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "eslint": "^9.23.0",
+    "prettier": "^3.5.3",
+    "prettier-plugin-css-order": "^2.1.2",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "tailwindcss": "^4.0.15",
+    "tslib": "^2.8.1",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.3",
+    "vite-plugin-dts": "^4.5.3",
+    "vue-tsc": "~2.2.8"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  }
+}