@brickflow/ui 0.0.56 → 0.0.58

package/dist/runtime/components/TransitionSize/index.vue

@@ -21,8 +21,8 @@
       dimension?: 'height' | 'width'
       duration?: number
       expandClasses?: ''
-      flexDirection?: 'end' | 'start'
-      flexParent?: Element
+      flexDirection?: 'center' | 'end' | 'start'
+      flexParent?: Element | null
       mode?: 'default' | 'in-out' | 'out-in'
       name?: string
     }>(),
@@ -41,21 +41,14 @@
   const gap = ref(0)
 
   const sizeName = computed(() => props.dimension)
-  const marginName = computed(() => {
-    const xDirection = props.flexDirection === 'start' ? 'marginLeft' : 'marginRight'
-    const yDirection = props.flexDirection === 'start' ? 'marginTop' : 'marginBottom'
-    return props.dimension === 'height' ? yDirection : xDirection
-  })
-  const scrollName = computed(() => (props.dimension === 'height' ? 'scrollHeight' : 'scrollWidth'))
+  const scrollName = computed(() => (props.dimension === 'height' ? 'offsetHeight' : 'offsetWidth'))
   const expandClass = computed(() => {
-    return (props.expandClasses || '!transition-all !ease-in-out !overflow-hidden will-change-transform').split(
-      ' ',
-    )
+    return (props.expandClasses || '!transition-all !ease-in-out').split(' ')
   })
 
   const beforeStart = (event: Element): void => {
     const el = event as HTMLElement
-    shrink(el)
+    el.style.setProperty('transition-duration', `${0}ms`, 'important')
   }
   const start = (event: Element): void => {
     const el = event as HTMLElement
@@ -63,16 +56,22 @@
 
     // Wait until component mounted to get proper height
     nextTick(() => {
-      if (el[scrollName.value] === 0) {
-        el.style[sizeName.value] = ''
-      } else {
-        el.style[sizeName.value] = `${el[scrollName.value]}px`
-        el.style.padding = ''
-        if (props.flexParent) {
-          el.style[marginName.value] = ''
-        }
-      }
+      releasePadding(el)
+      const height = el[scrollName.value]
+      shrinkPadding(el)
+      shrink(el)
       el.style.overflow = 'hidden'
+      requestAnimationFrame(() => {
+        el.style.setProperty('transition-duration', `${props.duration}ms`, 'important')
+        if (height === 0) {
+          el.style[sizeName.value] = ''
+          releasePadding(el)
+        } else {
+          el.style[sizeName.value] = `${height}px`
+          releasePadding(el)
+          setNegativeMargin(el, 0)
+        }
+      })
     })
   }
   const afterEnter = (event: Element): void => {
@@ -86,13 +85,15 @@
 
     el.style[sizeName.value] = `${el[scrollName.value]}px`
     if (props.flexParent) {
-      el.style[marginName.value] = ''
+      el.style.setProperty('flex-shrink', '0', 'important')
+      el.style.setProperty('flex-grow', '0', 'important')
     }
     el.style.overflow = 'hidden'
   }
   const leave = (event: Element): void => {
     const el = event as HTMLElement
     if (el[scrollName.value] !== 0) {
+      el.style.setProperty('transition-duration', `${props.duration}ms`, 'important')
       shrink(el)
     }
   }
@@ -102,20 +103,61 @@
   }
 
   function release(el: HTMLElement): void {
-    el.classList.add(...expandClass.value)
+    el.classList.remove(...expandClass.value)
     el.style.transitionDuration = ''
+    el.style.flexGrow = ''
+    el.style.flexShrink = ''
     el.style[sizeName.value] = ''
-    el.style[marginName.value] = ''
     el.style.overflow = String(el.dataset.oldOverflow)
+    setNegativeMargin(el, 0)
+    releasePadding(el)
+  }
+  function releasePadding(el: HTMLElement): void {
+    if (props.dimension === 'height') {
+      el.style.paddingTop = ''
+      el.style.paddingBottom = ''
+    } else {
+      el.style.paddingLeft = ''
+      el.style.paddingRight = ''
+    }
   }
+
+  function setNegativeMargin(el: HTMLElement, value?: number): void {
+    if (value === undefined || !props.flexParent) {
+      return
+    }
+    switch (props.flexDirection) {
+      case 'center':
+        el.style[props.dimension === 'height' ? 'marginTop' : 'marginLeft'] = value ? `-${value / 2}px` : ''
+        el.style[props.dimension === 'height' ? 'marginBottom' : 'marginRight'] = value ? `-${value / 2}px` : ''
+        break
+      case 'end':
+        el.style[props.dimension === 'height' ? 'marginTop' : 'marginLeft'] = value ? `-${value}px` : ''
+        break
+      case 'start':
+        el.style[props.dimension === 'height' ? 'marginBottom' : 'marginRight'] = value ? `-${value}px` : ''
+        break
+      default:
+    }
+  }
+
   function shrink(el: HTMLElement): void {
     el.classList.add(...expandClass.value)
-    el.style.transitionDuration = `${props.duration}ms`
+    el.style.flexGrow = '0'
     el.style[sizeName.value] = '0'
-    el.style.padding = '0'
+    shrinkPadding(el)
     if (props.flexParent) {
       gap.value = parseInt(window.getComputedStyle(props.flexParent)?.gap) || 0
-      el.style[marginName.value] = `-${gap.value}px`
+      setNegativeMargin(el, gap.value)
+    }
+  }
+  function shrinkPadding(el: HTMLElement): void {
+    if (props.dimension === 'height') {
+      el.style.paddingTop = '0'
+      el.style.paddingBottom = '0'
+    } else {
+      el.style.paddingLeft = '0'
+      el.style.paddingRight = '0'
     }
   }
 </script>

package/dist/runtime/components/TransitionSize/width.demo.vue

@@ -0,0 +1,88 @@
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Width',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import TransitionSize from './index.vue'
+
+  const activeWidthFixed = ref(true)
+  const activeWidthContent = ref(true)
+  const activeWidthFull = ref(true)
+</script>
+
+<template>
+  <div class="flex w-full flex-col">
+    <label class="mb-2">Fixed width</label>
+    <div class="flex w-full">
+      <TransitionSize
+        :duration="1000"
+        dimension="width"
+      >
+        <div
+          v-if="activeWidthFixed"
+          class="w-30 rounded-xl bg-slate-700 p-2 text-center"
+        >
+          Text
+        </div>
+      </TransitionSize>
+      <button
+        type="button"
+        class="ml-2 w-30 shrink-0 cursor-pointer rounded-xl px-3 py-2"
+        :class="activeWidthFixed ? 'bg-blue-500' : 'bg-blue-800'"
+        @click="activeWidthFixed = !activeWidthFixed"
+      >
+        {{ activeWidthFixed ? 'Hide' : 'Show' }}
+      </button>
+    </div>
+
+    <label class="mt-4 mb-2">Content based width</label>
+    <div class="flex">
+      <TransitionSize
+        :duration="1000"
+        dimension="width"
+      >
+        <div
+          v-if="activeWidthContent"
+          class="rounded-xl bg-slate-700 p-2 text-center whitespace-nowrap"
+        >
+          Long content text
+        </div>
+      </TransitionSize>
+      <button
+        type="button"
+        class="ml-2 w-30 shrink-0 cursor-pointer rounded-xl px-3 py-2"
+        :class="activeWidthContent ? 'bg-blue-500' : 'bg-blue-800'"
+        @click="activeWidthContent = !activeWidthContent"
+      >
+        {{ activeWidthContent ? 'Hide' : 'Show' }}
+      </button>
+    </div>
+
+    <label class="mt-4 mb-2">Full width</label>
+    <div class="flex w-full">
+      <TransitionSize
+        :duration="1000"
+        dimension="width"
+      >
+        <div
+          v-if="activeWidthFull"
+          class="w-full rounded-xl bg-slate-700 p-2 text-center"
+        >
+          Text
+        </div>
+      </TransitionSize>
+      <button
+        type="button"
+        class="ml-2 w-30 shrink-0 cursor-pointer rounded-xl px-3 py-2"
+        :class="activeWidthFull ? 'bg-blue-500' : 'bg-blue-800'"
+        @click="activeWidthFull = !activeWidthFull"
+      >
+        {{ activeWidthFull ? 'Hide' : 'Show' }}
+      </button>
+    </div>
+  </div>
+</template>

package/dist/runtime/composables/useBrickflow.d.ts

@@ -1,7 +1,9 @@
 import { type App } from 'vue';
+import type { RuleMessages } from '../utils/rules.js';
 import type { BrickflowI18n } from './useTranslate.js';
 export interface BrickflowConfig {
     i18n?: BrickflowI18n;
+    rules?: RuleMessages;
 }
 export declare function provideBrickflow<T extends BrickflowConfig>(app: App, config: T): void;
 export declare function useBrickflow(): BrickflowConfig;

package/dist/runtime/composables/useDialog.d.ts

@@ -0,0 +1,38 @@
+import { type Component, type InjectionKey } from 'vue';
+import type { ScreenKey } from './useScreen.js';
+export interface DialogController {
+    close(id?: number): void;
+    closeAll(): void;
+    open<C extends Component>(component: C, props: DialogProps<C>, options?: DialogOptions): DialogHandle;
+    readonly stack: DialogEntry[];
+}
+export interface DialogEntry {
+    component: Component;
+    id: number;
+    options: Required<DialogOptions> & {
+        elasticHeight: boolean;
+    };
+    props: Record<string, unknown>;
+}
+export interface DialogHandle {
+    close: () => void;
+    id: number;
+}
+export interface DialogOptions {
+    /** Dialog position, optionally overridden for each screen range. Defaults to center. */
+    placement?: DialogPlacementConfig;
+    /** Prevent backdrop, Escape, and swipe dismissal. Defaults to false. */
+    preventClose?: boolean;
+}
+export type DialogPlacement = 'bottom' | 'center' | 'fullscreen';
+export type DialogPlacementConfig = DialogPlacement | Record<ScreenKey, DialogPlacement>;
+type DialogProps<C> = C extends new (...args: never[]) => {
+    $props: infer P;
+} ? Omit<P, 'class' | 'key' | 'ref' | 'style'> : Record<string, unknown>;
+export declare const dialogKey: InjectionKey<DialogController>;
+export declare function createDialogController(defaultOptions?: DialogOptions & {
+    elasticHeight?: boolean;
+}): DialogController;
+export declare function useDialog(): DialogController;
+export {};
+//# sourceMappingURL=useDialog.d.ts.map

package/dist/runtime/composables/useDialog.js

@@ -0,0 +1,40 @@
+import { inject, markRaw, reactive } from "vue";
+export const dialogKey = Symbol("brickflow-dialog");
+export function createDialogController(defaultOptions = {}) {
+  const stack = reactive([]);
+  let nextId = 0;
+  return {
+    close(id) {
+      const index = id === void 0 ? stack.length - 1 : stack.findIndex((entry) => entry.id === id);
+      if (index !== -1) {
+        stack.splice(index, 1);
+      }
+    },
+    closeAll() {
+      stack.splice(0);
+    },
+    open(component, props, options = {}) {
+      nextId += 1;
+      const id = nextId;
+      stack.push({
+        component: markRaw(component),
+        id,
+        options: {
+          elasticHeight: defaultOptions.elasticHeight ?? true,
+          placement: options.placement ?? defaultOptions.placement ?? "center",
+          preventClose: options.preventClose ?? defaultOptions.preventClose ?? false
+        },
+        props: { ...props }
+      });
+      return { close: () => this.close(id), id };
+    },
+    stack
+  };
+}
+export function useDialog() {
+  const dialog = inject(dialogKey, void 0);
+  if (!dialog) {
+    throw new Error("useDialog() requires the @brickflow/ui Nuxt module");
+  }
+  return dialog;
+}

package/dist/runtime/composables/useFieldRules.d.ts

@@ -0,0 +1,16 @@
+import { type InjectionKey, type Ref } from 'vue';
+import type { Rule } from '../utils/rules.js';
+export interface FormRulesContext {
+    register: (field: {
+        focus: () => void;
+        validate: () => boolean;
+    }) => () => void;
+}
+export declare const formRulesKey: InjectionKey<FormRulesContext>;
+export interface FieldRulesState {
+    error: Readonly<Ref<string>>;
+    input: (value: unknown) => void;
+    validate: () => boolean;
+}
+export declare function useFieldRules<T>(value: Ref<T>, rules: Ref<Rule<T>[] | undefined>, focus: () => void): FieldRulesState;
+//# sourceMappingURL=useFieldRules.d.ts.map

package/dist/runtime/composables/useFieldRules.js

@@ -0,0 +1,42 @@
+import { computed, inject, onUnmounted, shallowRef, watch } from "vue";
+import { useBrickflow } from "./useBrickflow.js";
+export const formRulesKey = Symbol("brickflow-form-rules");
+export function useFieldRules(value, rules, focus) {
+  const config = useBrickflow();
+  const form = inject(formRulesKey, void 0);
+  const error = shallowRef("");
+  const active = shallowRef(false);
+  function check(nextValue) {
+    for (const rule of rules.value ?? []) {
+      const result = rule(nextValue);
+      if (result !== true) {
+        error.value = result;
+        return false;
+      }
+    }
+    error.value = "";
+    return true;
+  }
+  function validate() {
+    active.value = true;
+    return check(value.value);
+  }
+  function input(nextValue) {
+    if (active.value) {
+      check(nextValue);
+    }
+  }
+  watch(value, () => {
+    if (active.value) {
+      check(value.value);
+    }
+  });
+  watch([rules, () => config.i18n?.locale.value], () => {
+    if (active.value) {
+      check(value.value);
+    }
+  });
+  const unregister = form?.register({ focus, validate });
+  onUnmounted(() => unregister?.());
+  return { error: computed(() => error.value), input, validate };
+}

package/dist/runtime/composables/useScreen.d.ts

@@ -1,3 +1,11 @@
+export type ScreenKey = keyof ScreenState;
+interface ScreenState {
+    dk: boolean;
+    lp: boolean;
+    mb: boolean;
+    ms: boolean;
+    tb: boolean;
+}
 declare const screen: {
     readonly dk: boolean;
     readonly dkClass: "dkHidden";

package/dist/runtime/plugins/dialog.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+export default _default;
+//# sourceMappingURL=dialog.d.ts.map

package/dist/runtime/plugins/dialog.js

@@ -0,0 +1,22 @@
+import { defineNuxtPlugin } from "nuxt/app";
+import { createVNode, render } from "vue";
+import { uiConfig } from "#brickflow-ui";
+import DialogHost from "../components/Dialog/Host.vue";
+import { createDialogController, dialogKey } from "../composables/useDialog.js";
+export default defineNuxtPlugin((nuxtApp) => {
+  const dialog = createDialogController({
+    elasticHeight: uiConfig.dialog.elasticHeight,
+    placement: uiConfig.dialog.placement
+  });
+  nuxtApp.vueApp.provide(dialogKey, dialog);
+  if (import.meta.client) {
+    nuxtApp.hook("app:mounted", () => {
+      const mountPoint = document.createElement("div");
+      mountPoint.id = "brickflow-dialog-host";
+      document.body.appendChild(mountPoint);
+      const vnode = createVNode(DialogHost, { dialog });
+      vnode.appContext = nuxtApp.vueApp._context;
+      render(vnode, mountPoint);
+    });
+  }
+});

package/dist/runtime/tailwind.d.ts

@@ -6,7 +6,7 @@ export interface BrickflowUiConfig<TStyles = BrickflowUiStyles, TConfig = Brickf
 export type BrickflowUiConfigObject = {
     readonly [key: string]: BrickflowUiConfigValue;
 };
-export type BrickflowUiConfigValue = BrickflowUiConfigObject | BrickflowUiStyleReference | string;
+export type BrickflowUiConfigValue = boolean | BrickflowUiConfigObject | BrickflowUiStyleReference | number | string;
 export interface BrickflowUiStyleReference {
     readonly [UI_STYLE_REFERENCE]: readonly string[];
 }

package/dist/runtime/tailwind.js

@@ -44,14 +44,14 @@ function validateUiConfig(value, path = "uiConfig") {
   }
   for (const [key, childValue] of Object.entries(value)) {
     const childPath = `${path}.${key}`;
-    if (typeof childValue === "string" || isBrickflowUiStyleReference(childValue)) {
+    if (typeof childValue === "string" || typeof childValue === "boolean" || typeof childValue === "number" && Number.isFinite(childValue) || isBrickflowUiStyleReference(childValue)) {
       continue;
     }
     if (isRecord(childValue)) {
       validateUiConfig(childValue, childPath);
       continue;
     }
-    throw new TypeError(`${childPath} must be a string, UI_STYLE reference, or an object.`);
+    throw new TypeError(`${childPath} must be a string, boolean, finite number, UI_STYLE reference, or an object.`);
   }
 }
 function validateUiStyles(value, path = "uiStyles") {

package/dist/runtime/utils/rules.d.ts

@@ -0,0 +1,34 @@
+export type Rule<T> = (value: T) => string | true;
+export interface RuleMessages {
+    email: () => string;
+    length: (params: {
+        length: number;
+    }) => string;
+    maxLength: (params: {
+        max: number;
+    }) => string;
+    minLength: (params: {
+        min: number;
+    }) => string;
+    required: () => string;
+    url: () => string;
+}
+export declare const defaultRuleMessages: RuleMessages;
+export declare const rule: {
+    email: typeof email;
+    length: typeof length;
+    maxLength: typeof maxLength;
+    minLength: typeof minLength;
+    regex: typeof regex;
+    required: typeof required;
+    url: typeof url;
+};
+declare function email(): Rule<string>;
+declare function length(expectedLength: number): Rule<string>;
+declare function maxLength(max: number): Rule<string>;
+declare function minLength(min: number): Rule<string>;
+declare function regex(pattern: RegExp, message: (() => string) | string): Rule<string>;
+declare function required<T>(): Rule<T>;
+declare function url(): Rule<string>;
+export {};
+//# sourceMappingURL=rules.d.ts.map

package/dist/runtime/utils/rules.js

@@ -0,0 +1,68 @@
+import { useBrickflow } from "../composables/useBrickflow.js";
+export const defaultRuleMessages = {
+  email: () => "Enter a valid email",
+  length: ({ length: expectedLength }) => `Must be exactly ${expectedLength} characters`,
+  maxLength: ({ max }) => `Maximum ${max} characters`,
+  minLength: ({ min }) => `Minimum ${min} characters`,
+  required: () => "Required field",
+  url: () => "Enter a valid URL"
+};
+export const rule = { email, length, maxLength, minLength, regex, required, url };
+function email() {
+  const messages = { ...defaultRuleMessages, ...useBrickflow().rules };
+  return (value) => {
+    if (!value) {
+      return true;
+    }
+    const parts = value.split("@");
+    const domain = parts[1];
+    return parts.length === 2 && Boolean(parts[0]) && Boolean(domain?.includes(".")) && !/\s/.test(value) || messages.email();
+  };
+}
+function length(expectedLength) {
+  const messages = { ...defaultRuleMessages, ...useBrickflow().rules };
+  return (value) => !value || value.length === expectedLength || messages.length({ length: expectedLength });
+}
+function maxLength(max) {
+  const messages = { ...defaultRuleMessages, ...useBrickflow().rules };
+  return (value) => !value || value.length <= max || messages.maxLength({ max });
+}
+function minLength(min) {
+  const messages = { ...defaultRuleMessages, ...useBrickflow().rules };
+  return (value) => !value || value.length >= min || messages.minLength({ min });
+}
+function regex(pattern, message) {
+  return (value) => {
+    pattern.lastIndex = 0;
+    return !value || pattern.test(value) || (typeof message === "function" ? message() : message);
+  };
+}
+function required() {
+  const messages = { ...defaultRuleMessages, ...useBrickflow().rules };
+  return (value) => {
+    if (typeof value === "string") {
+      return value.trim().length > 0 || messages.required();
+    }
+    if (typeof value === "boolean") {
+      return value || messages.required();
+    }
+    if (Array.isArray(value)) {
+      return value.length > 0 || messages.required();
+    }
+    return value !== null && value !== void 0 || messages.required();
+  };
+}
+function url() {
+  const messages = { ...defaultRuleMessages, ...useBrickflow().rules };
+  return (value) => {
+    if (!value) {
+      return true;
+    }
+    try {
+      const parsed = new URL(value);
+      return ["http:", "https:"].includes(parsed.protocol) && Boolean(parsed.hostname) || messages.url();
+    } catch {
+      return messages.url();
+    }
+  };
+}

package/dist/types.d.mts

@@ -1,7 +1,11 @@
 export { type BrickflowConfig } from '../dist/runtime/composables/useBrickflow.js'
 
+export { type DialogController, type DialogHandle, type DialogOptions } from '../dist/runtime/composables/useDialog.js'
+
 export { type BrickflowI18n, type BrickflowRouteLocationParam } from '../dist/runtime/composables/useTranslate.js'
 
+export { type Rule, type RuleMessages, type rule } from '../dist/runtime/utils/rules.js'
+
 export { default } from './module.mjs'
 
 export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickflow/ui",
-  "version": "0.0.56",
+  "version": "0.0.58",
   "type": "module",
   "description": "brickflow UI Nuxt module.",
   "files": [
@@ -35,17 +35,18 @@
     "@tailwindcss/vite": "4.3.3",
     "fantasticon": "4.1.0",
     "jiti": "2.7.0",
-    "tailwind-merge": "3.6.0",
+    "maska": "3.2.2",
+    "tailwind-merge": "3.7.0",
     "tailwindcss": "4.3.3"
   },
   "devDependencies": {
     "@brickflow/lint": "workspace:*",
     "@brickflow/prettier": "workspace:*",
-    "@nuxt/kit": "4.5.2",
+    "@nuxt/kit": "4.6.3",
     "@nuxt/module-builder": "1.0.3",
-    "nuxt": "4.5.2",
-    "vue": "3.5.42",
-    "vue-tsc": "3.3.11"
+    "nuxt": "4.6.3",
+    "vue": "3.5.44",
+    "vue-tsc": "3.3.14"
   },
   "author": "",
   "license": "ISC"

package/dist/runtime/icon-font.d.ts

@@ -1,4 +0,0 @@
-declare module '#brickflow-ui-icons' {
-  export const firstIconName: string
-  export const iconNames: readonly string[]
-}