@brickflow/ui 0.0.55 → 0.0.57

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/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/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

@@ -2,6 +2,8 @@ export { type BrickflowConfig } from '../dist/runtime/composables/useBrickflow.j
 
 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.55",
+  "version": "0.0.57",
   "type": "module",
   "description": "brickflow UI Nuxt module.",
   "files": [
@@ -35,6 +35,7 @@
     "@tailwindcss/vite": "4.3.3",
     "fantasticon": "4.1.0",
     "jiti": "2.7.0",
+    "maska": "3.2.2",
     "tailwind-merge": "3.6.0",
     "tailwindcss": "4.3.3"
   },

package/dist/runtime/components/InputNumber/basic.demo.vue

@@ -1,33 +0,0 @@
-<script lang="ts">
-  export const uiDemo = {
-    title: 'Number & Bounds',
-  }
-</script>
-
-<script lang="ts" setup>
-  import { ref } from 'vue'
-
-  import InputNumber from './index.vue'
-
-  const price = ref<number>(25)
-  function handleInput(event: number): void {
-    price.value = event
-  }
-</script>
-
-<template>
-  <div class="flex max-w-sm flex-col gap-4">
-    <InputNumber
-      :value="price"
-      label="Price"
-      description="Min: 0 — Max: 200"
-      :min="0"
-      :max="200"
-      :step="5"
-      @input="handleInput"
-    >
-      <template #leading><span class="text-green-400">$</span></template>
-    </InputNumber>
-    <p class="text-gray-500">Value: {{ price }}</p>
-  </div>
-</template>