@brickflow/ui 0.0.56 → 0.0.57

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

@@ -0,0 +1,88 @@
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Duration',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import TransitionSize from './index.vue'
+
+  const active100 = ref(true)
+  const active500 = ref(true)
+  const active2000 = ref(true)
+</script>
+
+<template>
+  <div class="flex w-full flex-col">
+    <code class="mb-2">100</code>
+    <div class="flex w-full">
+      <TransitionSize
+        :duration="100"
+        dimension="width"
+      >
+        <div
+          v-if="active100"
+          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="active100 ? 'bg-blue-500' : 'bg-blue-800'"
+        @click="active100 = !active100"
+      >
+        {{ active100 ? 'Hide' : 'Show' }}
+      </button>
+    </div>
+
+    <code class="mt-4 mb-2">500</code>
+    <div class="flex">
+      <TransitionSize
+        :duration="500"
+        dimension="width"
+      >
+        <div
+          v-if="active500"
+          class="w-full rounded-xl bg-slate-700 p-2 text-center whitespace-nowrap"
+        >
+          Text
+        </div>
+      </TransitionSize>
+      <button
+        type="button"
+        class="ml-2 w-30 shrink-0 cursor-pointer rounded-xl px-3 py-2"
+        :class="active500 ? 'bg-blue-500' : 'bg-blue-800'"
+        @click="active500 = !active500"
+      >
+        {{ active500 ? 'Hide' : 'Show' }}
+      </button>
+    </div>
+
+    <code class="mt-4 mb-2">2000</code>
+    <div class="flex w-full">
+      <TransitionSize
+        :duration="2000"
+        dimension="width"
+      >
+        <div
+          v-if="active2000"
+          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="active2000 ? 'bg-blue-500' : 'bg-blue-800'"
+        @click="active2000 = !active2000"
+      >
+        {{ active2000 ? 'Hide' : 'Show' }}
+      </button>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,112 @@
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Flex Parent with Gap',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import TransitionSize from './index.vue'
+
+  const baseStartRef = ref<HTMLElement | null>(null)
+  const baseCenterRef = ref<HTMLElement | null>(null)
+  const baseEndRef = ref<HTMLElement | null>(null)
+  const activeStart = ref(true)
+  const activeCenter = ref(true)
+  const activeEnd = ref(true)
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <code class="mb-2">flexDirection="start"</code>
+    <div
+      ref="baseStartRef"
+      class="flex grow basis-1 gap-10"
+    >
+      <TransitionSize
+        :duration="1000"
+        :flexParent="baseStartRef"
+        flexDirection="start"
+        dimension="width"
+      >
+        <div
+          v-if="activeStart"
+          class="h-10 grow rounded-xl bg-slate-700 p-2 text-center"
+        >
+          Text
+        </div>
+      </TransitionSize>
+      <div class="h-10 grow rounded-xl bg-slate-800 p-2 text-center">Text</div>
+      <div class="h-10 grow rounded-xl bg-slate-800 p-2 text-center">Text</div>
+    </div>
+    <button
+      type="button"
+      class="mt-3 w-30 shrink-0 cursor-pointer rounded-xl px-3 py-2"
+      :class="activeStart ? 'bg-blue-500' : 'bg-blue-800'"
+      @click="activeStart = !activeStart"
+    >
+      {{ activeStart ? 'Hide' : 'Show' }}
+    </button>
+
+    <code class="mt-6 mb-2">flexDirection="center"</code>
+    <div
+      ref="baseCenterRef"
+      class="flex grow basis-1 gap-10"
+    >
+      <div class="h-10 grow rounded-xl bg-slate-800 p-2 text-center">Text</div>
+      <TransitionSize
+        :duration="1000"
+        :flexParent="baseCenterRef"
+        flexDirection="center"
+        dimension="width"
+      >
+        <div
+          v-if="activeCenter"
+          class="h-10 grow rounded-xl bg-slate-700 p-2 text-center"
+        >
+          Text
+        </div>
+      </TransitionSize>
+      <div class="h-10 grow rounded-xl bg-slate-800 p-2 text-center">Text</div>
+    </div>
+    <button
+      type="button"
+      class="mt-3 w-30 shrink-0 cursor-pointer rounded-xl px-3 py-2"
+      :class="activeCenter ? 'bg-blue-500' : 'bg-blue-800'"
+      @click="activeCenter = !activeCenter"
+    >
+      {{ activeCenter ? 'Hide' : 'Show' }}
+    </button>
+
+    <code class="mt-6 mb-2">flexDirection="end"</code>
+    <div
+      ref="baseEndRef"
+      class="flex grow basis-1 gap-10"
+    >
+      <div class="h-10 grow rounded-xl bg-slate-800 p-2 text-center">Text</div>
+      <div class="h-10 grow rounded-xl bg-slate-800 p-2 text-center">Text</div>
+      <TransitionSize
+        :duration="1000"
+        :flexParent="baseEndRef"
+        flexDirection="end"
+        dimension="width"
+      >
+        <div
+          v-if="activeEnd"
+          class="h-10 grow rounded-xl bg-slate-700 p-2 text-center"
+        >
+          Text
+        </div>
+      </TransitionSize>
+    </div>
+    <button
+      type="button"
+      class="mt-3 w-30 shrink-0 cursor-pointer rounded-xl px-3 py-2"
+      :class="activeEnd ? 'bg-blue-500' : 'bg-blue-800'"
+      @click="activeEnd = !activeEnd"
+    >
+      {{ activeEnd ? 'Hide' : 'Show' }}
+    </button>
+  </div>
+</template>

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

@@ -0,0 +1,88 @@
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Height',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import TransitionSize from './index.vue'
+
+  const activeHeightFixed = ref(true)
+  const activeHeightContent = ref(true)
+  const activeHeightFull = ref(true)
+</script>
+
+<template>
+  <div class="flex w-full gap-4">
+    <div class="flex grow basis-1 flex-col">
+      <label class="mb-2">Fixed height</label>
+      <TransitionSize
+        :duration="1000"
+        dimension="height"
+      >
+        <div
+          v-if="activeHeightFixed"
+          class="h-40 w-full rounded-xl bg-slate-700 p-2 text-center"
+        >
+          Text
+        </div>
+      </TransitionSize>
+      <button
+        type="button"
+        class="mt-3 w-full shrink-0 cursor-pointer rounded-xl px-3 py-2"
+        :class="activeHeightFixed ? 'bg-blue-500' : 'bg-blue-800'"
+        @click="activeHeightFixed = !activeHeightFixed"
+      >
+        {{ activeHeightFixed ? 'Hide' : 'Show' }}
+      </button>
+    </div>
+
+    <div class="flex grow basis-1 flex-col">
+      <label class="mb-2">Content based height</label>
+      <TransitionSize
+        :duration="1000"
+        dimension="height"
+      >
+        <div
+          v-if="activeHeightContent"
+          class="rounded-xl bg-slate-700 p-2 text-center"
+        >
+          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur nihil possimus sunt ipsum rerum maiores
+        </div>
+      </TransitionSize>
+      <button
+        type="button"
+        class="mt-3 w-full shrink-0 cursor-pointer rounded-xl px-3 py-2"
+        :class="activeHeightContent ? 'bg-blue-500' : 'bg-blue-800'"
+        @click="activeHeightContent = !activeHeightContent"
+      >
+        {{ activeHeightContent ? 'Hide' : 'Show' }}
+      </button>
+    </div>
+
+    <div class="flex h-auto grow basis-1 flex-col self-stretch">
+      <label class="mb-2">Full height</label>
+      <TransitionSize
+        :duration="1000"
+        dimension="height"
+      >
+        <div
+          v-if="activeHeightFull"
+          class="w-full grow rounded-xl bg-slate-700 p-2 text-center"
+        >
+          Text
+        </div>
+      </TransitionSize>
+      <button
+        type="button"
+        class="mt-3 w-full shrink-0 cursor-pointer rounded-xl px-3 py-2"
+        :class="activeHeightFull ? 'bg-blue-500' : 'bg-blue-800'"
+        @click="activeHeightFull = !activeHeightFull"
+      >
+        {{ activeHeightFull ? 'Hide' : 'Show' }}
+      </button>
+    </div>
+  </div>
+</template>

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