@brickflow/ui 0.0.57 → 0.0.58

package/dist/runtime/components/Dialog/form.demo.vue

@@ -0,0 +1,34 @@
+<script lang="ts">
+  export const uiDemo = {
+    description: 'Keep form state inside the dialog, require an explicit choice, and return the saved value.',
+    title: 'Form and explicit dismissal',
+  }
+</script>
+
+<script setup lang="ts">
+  import { defineAsyncComponent, ref } from 'vue'
+
+  import { useDialog } from '../../composables/useDialog'
+  import Button from '../Button/index.vue'
+
+  const dialog = useDialog()
+  const savedName = ref('')
+  const LazyDemoForm = defineAsyncComponent(() => import('./DemoForm.vue'))
+
+  function openForm(): void {
+    dialog.open(LazyDemoForm, { onSave: (name: string) => (savedName.value = name) }, { preventClose: true })
+  }
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-3">
+    <Button @click="openForm">Create project</Button>
+    <p
+      v-if="savedName"
+      class="text-sm text-zinc-300"
+      role="status"
+    >
+      Saved: {{ savedName }}
+    </p>
+  </div>
+</template>

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { IconName } from '#brickflow-ui'
+
+  import type { DialogPlacement } from '../../composables/useDialog'
+  import type { ScreenKey } from '../../composables/useScreen'
+
+  export const dialogConfig = defineUiConfig<{
+    elasticHeight?: boolean
+    loadingDelay: number
+    loadingIconName: IconName
+    loadingIconTransition: string
+    placement: Record<ScreenKey, DialogPlacement>
+  }>()
+</script>
+
+<script setup lang="ts">
+  defineProps<{
+    dragY?: number
+    elasticHeight: boolean
+    placement: 'bottom' | 'center' | 'fullscreen'
+  }>()
+
+  const placementClasses = {
+    bottom: UI_STYLE.panelPlacementClasses.bottom,
+    center: UI_STYLE.panelPlacementClasses.center,
+    fullscreen: UI_STYLE.panelPlacementClasses.fullscreen,
+  }
+</script>
+
+<template>
+  <div
+    :class="[UI_STYLE.panel, placementClasses[placement]]"
+    data-dialog-panel
+    role="dialog"
+    aria-modal="true"
+    tabindex="-1"
+    :style="{
+      '--dialog-elastic-height':
+        placement === 'bottom' && elasticHeight ? `${Math.max(0, -(dragY ?? 0))}px` : undefined,
+      transform: dragY && (!elasticHeight || dragY > 0) ? `translateY(${dragY}px)` : undefined,
+    }"
+  >
+    <div
+      v-if="placement === 'bottom'"
+      :class="UI_STYLE.dragHandle"
+      data-dialog-handle
+      aria-hidden="true"
+    >
+      <span :class="UI_STYLE.dragHandleIndicator" />
+    </div>
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/Dialog/scroll.demo.vue

@@ -0,0 +1,27 @@
+<script lang="ts">
+  export const uiDemo = {
+    description: 'The content component owns overflow. Scroll to an edge before dragging the sheet.',
+    title: 'Long content and scrolling',
+  }
+</script>
+
+<script setup lang="ts">
+  import { defineAsyncComponent } from 'vue'
+
+  import { useDialog } from '../../composables/useDialog'
+  import Button from '../Button/index.vue'
+
+  const dialog = useDialog()
+  const LazyDemoContent = defineAsyncComponent(() => import('./DemoContent.vue'))
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <Button @click="dialog.open(LazyDemoContent, { text: 'Scrollable bottom sheet' }, { placement: 'bottom' })">
+      Scrollable sheet
+    </Button>
+    <Button @click="dialog.open(LazyDemoContent, { text: 'Scrollable centered dialog' }, { placement: 'center' })">
+      Scrollable center
+    </Button>
+  </div>
+</template>

package/dist/runtime/components/Dialog/stack.demo.vue

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Stacked dialogs',
+  }
+</script>
+
+<script setup lang="ts">
+  import { defineAsyncComponent } from 'vue'
+
+  import { useDialog } from '../../composables/useDialog'
+  import Button from '../Button/index.vue'
+
+  const dialog = useDialog()
+  const LazyDemoStack = defineAsyncComponent(() => import('./DemoStack.vue'))
+</script>
+
+<template>
+  <Button @click="dialog.open(LazyDemoStack, { level: 1 })">Open stack</Button>
+</template>

package/dist/runtime/components/Form/rules.demo.vue

@@ -0,0 +1,108 @@
+<script lang="ts">
+  export const uiDemo = {
+    description: 'Each field has one rule. Submit it to see that rule’s validation message.',
+    title: 'Basic rules',
+  }
+</script>
+
+<script setup lang="ts">
+  import { reactive } from 'vue'
+
+  import { rule, type Rule } from '../../utils/rules'
+  import Button from '../Button/index.vue'
+  import Input from '../Input/index.vue'
+  import Form from './index.vue'
+
+  const demos: { description: string; id: string; label: string; placeholder: string; rules: Rule<string>[] }[] = [
+    {
+      description: 'Leave empty, or enter only spaces.',
+      id: 'required',
+      label: 'Required',
+      placeholder: 'Enter any text',
+      rules: [rule.required()],
+    },
+    {
+      description: 'Try “hello”, then “hello@example.com”.',
+      id: 'email',
+      label: 'Email',
+      placeholder: 'hello@example.com',
+      rules: [rule.email()],
+    },
+    {
+      description: 'Enter exactly 5 characters.',
+      id: 'length',
+      label: 'Length (5)',
+      placeholder: 'abcde',
+      rules: [rule.length(5)],
+    },
+    {
+      description: 'Enter fewer than 5 characters, then 5 or more.',
+      id: 'minLength',
+      label: 'Minimum length (5)',
+      placeholder: 'At least 5 characters',
+      rules: [rule.minLength(5)],
+    },
+    {
+      description: 'Enter more than 5 characters.',
+      id: 'maxLength',
+      label: 'Maximum length (5)',
+      placeholder: 'Up to 5 characters',
+      rules: [rule.maxLength(5)],
+    },
+    {
+      description: 'Enter letters or numbers, then add a space or symbol.',
+      id: 'regex',
+      label: 'Regex (letters and numbers)',
+      placeholder: 'abc123',
+      rules: [rule.regex(/^[a-z0-9]+$/i, 'Use letters and numbers only')],
+    },
+    {
+      description: 'Try “example.com”, then “https://example.com”.',
+      id: 'url',
+      label: 'URL',
+      placeholder: 'https://example.com',
+      rules: [rule.url()],
+    },
+  ]
+
+  const values = reactive<Record<string, string>>({})
+  const submitted = reactive<Record<string, boolean>>({})
+
+  function updateValue(id: string, value: string): void {
+    values[id] = value
+    submitted[id] = false
+  }
+</script>
+
+<template>
+  <div class="grid gap-6">
+    <Form
+      v-for="demo in demos"
+      :key="demo.id"
+      class="rounded-lg"
+      @submit="submitted[demo.id] = true"
+    >
+      <Input
+        :value="values[demo.id] ?? ''"
+        :label="demo.label"
+        :description="demo.description"
+        :placeholder="demo.placeholder"
+        :rules="demo.rules"
+        @input="updateValue(demo.id, $event)"
+      />
+      <Button
+        class="self-start"
+        type="submit"
+      >
+        Test rule
+      </Button>
+      <p
+        v-if="submitted[demo.id]"
+        class="text-sm text-green-400"
+        role="status"
+      >
+        Passed
+      </p>
+    </Form>
+  </div>
+</template>

package/dist/runtime/components/Icon/gallery.demo.vue

@@ -20,7 +20,7 @@
   const filteredIconNames = computed(() => {
     const query = search.value.trim().toLocaleLowerCase()
 
-    return query ? iconNames.filter((name) => name.toLocaleLowerCase().includes(query)) : iconNames
+    return query ? iconNames.filter((name: string) => name.toLocaleLowerCase().includes(query)) : iconNames
   })
 
   const copyIconName = async (name: string): Promise<void> => {

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

@@ -1,9 +1,11 @@
 <script setup lang="ts">
   import { computed } from 'vue'
 
+  import type { IconName } from '#brickflow-ui'
+
   const props = withDefaults(
     defineProps<{
-      name: string
+      name: IconName
     }>(),
     {},
   )

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

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import type { IconName } from '#brickflow-ui'
+
   const UI_CONFIG = defineUiConfig<{
-    hidePasswordIconName: string
-    searchClearIconName: string
-    showPasswordIconName: string
+    hidePasswordIconName: IconName
+    searchClearIconName: IconName
+    showPasswordIconName: IconName
     sizeClasses: Record<
       string,
       {
@@ -51,7 +53,7 @@
       autoWidth?: boolean
       description?: string
       disabled?: boolean
-      icon?: string
+      icon?: IconName
       label?: string
       mask?: MaskInputOptions | MaskType
       onBlur?: (value: string, target: HTMLInputElement) => void
@@ -65,7 +67,7 @@
       readonly?: boolean
       rules?: Rule<string>[]
       size?: InputSize
-      trailingIcon?: string
+      trailingIcon?: IconName
       type?: 'decimal' | 'email' | 'numeric' | 'password' | 'search' | 'tel' | 'text' | 'url'
       value?: null | string
       variant?: InputVariant

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

@@ -0,0 +1,145 @@
+<script lang="ts">
+  export const uiDemo = {
+    description: 'Custom step buttons built with the leading and trailing slots.',
+    title: 'Custom controls',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import InputNumber from './index.vue'
+
+  const horizontalValue = ref(20)
+  const verticalValue = ref(100)
+
+  const horizontalMin = 0
+  const horizontalMax = 25
+  const verticalMin = 0
+  const verticalMax = 120
+  const verticalStep = 5
+
+  const horizontalControlClass =
+    'inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-plain-500 transition-colors enabled:hover:bg-plain-800 enabled:hover:text-plain-100 disabled:cursor-not-allowed disabled:opacity-40'
+  const verticalControlClass =
+    'flex min-h-5 flex-1 items-center justify-center text-plain-500 transition-colors enabled:hover:bg-plain-800 enabled:hover:text-plain-100 disabled:cursor-not-allowed disabled:opacity-40'
+
+  function stepHorizontal(direction: -1 | 1): void {
+    horizontalValue.value = Math.max(horizontalMin, Math.min(horizontalMax, horizontalValue.value + direction))
+  }
+
+  function stepVertical(direction: -1 | 1): void {
+    verticalValue.value = Math.max(
+      verticalMin,
+      Math.min(verticalMax, verticalValue.value + direction * verticalStep),
+    )
+  }
+</script>
+
+<template>
+  <div class="flex max-w-sm flex-col gap-6">
+    <InputNumber
+      :value="horizontalValue"
+      align="center"
+      label="Number *"
+      description="This is a hint text to help user."
+      :min="horizontalMin"
+      :max="horizontalMax"
+      @input="horizontalValue = $event"
+    >
+      <template #leading>
+        <button
+          type="button"
+          :disabled="horizontalValue <= horizontalMin"
+          aria-label="Decrease number"
+          :class="[horizontalControlClass, '-ml-2']"
+          @click="stepHorizontal(-1)"
+        >
+          <span
+            aria-hidden="true"
+            class="text-2xl leading-none font-light"
+          >
+            −
+          </span>
+        </button>
+      </template>
+      <template #trailing>
+        <button
+          type="button"
+          :disabled="horizontalValue >= horizontalMax"
+          aria-label="Increase number"
+          :class="[horizontalControlClass, '-mr-2']"
+          @click="stepHorizontal(1)"
+        >
+          <span
+            aria-hidden="true"
+            class="text-2xl leading-none font-light"
+          >
+            +
+          </span>
+        </button>
+      </template>
+    </InputNumber>
+
+    <InputNumber
+      :value="verticalValue"
+      label="Number *"
+      description="This is a hint text to help user."
+      :step="verticalStep"
+      :min="verticalMin"
+      :max="verticalMax"
+      @input="verticalValue = $event"
+    >
+      <template #trailing>
+        <span
+          class="-mr-3 flex w-12 shrink-0 flex-col self-stretch overflow-hidden rounded-r-xl border-l border-neutral-600/20"
+        >
+          <button
+            type="button"
+            :disabled="verticalValue >= verticalMax"
+            aria-label="Increase number"
+            :class="verticalControlClass"
+            @click="stepVertical(1)"
+          >
+            <svg
+              aria-hidden="true"
+              class="size-4"
+              viewBox="0 0 16 16"
+              fill="none"
+            >
+              <path
+                d="m3 10 5-5 5 5"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+          <button
+            type="button"
+            :disabled="verticalValue <= verticalMin"
+            aria-label="Decrease number"
+            :class="[verticalControlClass, 'border-t border-neutral-600/20']"
+            @click="stepVertical(-1)"
+          >
+            <svg
+              aria-hidden="true"
+              class="size-4"
+              viewBox="0 0 16 16"
+              fill="none"
+            >
+              <path
+                d="m3 6 5 5 5-5"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+        </span>
+      </template>
+    </InputNumber>
+  </div>
+</template>

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

@@ -1,6 +1,8 @@
 <script setup lang="ts" generic="T extends boolean = false">
   import { computed, ref, shallowRef, watch } from 'vue'
 
+  import type { IconName } from '#brickflow-ui'
+
   import type { Rule } from '../../utils/rules'
 
   import { isEmpty } from '../../utils/checkup.js'
@@ -16,7 +18,7 @@
       denominator?: number
       description?: string
       disabled?: boolean
-      icon?: string
+      icon?: IconName
       label?: string
       max?: number
       min?: number
@@ -33,7 +35,7 @@
       rules?: Rule<null | number>[]
       size?: InputProps['size']
       step?: number
-      trailingIcon?: string
+      trailingIcon?: IconName
       value: true extends NoInfer<T> ? null | number : number
       variant?: InputProps['variant']
     }>(),
@@ -176,7 +178,6 @@
     if (!Number.isFinite(props.step) || props.step <= 0) {
       return
     }
-
     event.preventDefault()
     const parsedValue = Number(target.value)
     const currentValue = target.value !== '' && Number.isFinite(parsedValue) ? parsedValue : (props.value ?? 0)

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/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/types.d.mts

@@ -1,5 +1,7 @@
 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'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickflow/ui",
-  "version": "0.0.57",
+  "version": "0.0.58",
   "type": "module",
   "description": "brickflow UI Nuxt module.",
   "files": [
@@ -36,17 +36,17 @@
     "fantasticon": "4.1.0",
     "jiti": "2.7.0",
     "maska": "3.2.2",
-    "tailwind-merge": "3.6.0",
+    "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[]
-}