@brickflow/ui 0.0.57 → 0.0.58

package/dist/module.d.mts

@@ -1,5 +1,6 @@
-import * as _nuxt_schema from '@nuxt/schema';
+import * as nuxt_schema from 'nuxt/schema';
 export { BrickflowConfig } from '../dist/runtime/composables/useBrickflow.js';
+export { DialogController, DialogHandle, DialogOptions } from '../dist/runtime/composables/useDialog.js';
 export { BrickflowI18n, BrickflowRouteLocationParam } from '../dist/runtime/composables/useTranslate.js';
 export { Rule, RuleMessages, rule } from '../dist/runtime/utils/rules.js';
 
@@ -10,7 +11,7 @@ interface ModuleOptions {
     theme?: boolean;
 }
 
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+declare const _default: nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { _default as default };
 export type { ModuleOptions };

package/dist/module.json

@@ -4,7 +4,7 @@
   },
   "configKey": "brickflowUi",
   "name": "@brickflow/ui",
-  "version": "0.0.57",
+  "version": "0.0.58",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, resolvePath, addTypeTemplate, addTemplate, updateTemplates, addImports, addComponentsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, resolvePath, addTypeTemplate, addTemplate, updateTemplates, addImports, addPlugin, addComponentsDir } from '@nuxt/kit';
 import tailwindcss from '@tailwindcss/vite';
 import { createJiti } from 'jiti';
 import { mkdir, access, readFile, writeFile, readdir } from 'node:fs/promises';
@@ -151,7 +151,9 @@ const resolveUiStyleConfigPath = (id, path) => {
     return path;
   }
   const componentName = basename(cleanId, extname(cleanId));
-  const configName = componentName === "index" || componentName.endsWith(".demo") ? basename(dirname(cleanId)) : componentName;
+  const parentName = basename(dirname(cleanId));
+  const isComponentFile = basename(dirname(dirname(cleanId))) === "components";
+  const configName = isComponentFile || componentName === "index" || componentName.endsWith(".demo") ? parentName : componentName;
   return [toCamelCase(configName), ...path];
 };
 const resolveStyleValue = (styles, id, path) => {
@@ -178,7 +180,7 @@ const resolveUiConfigStyleReferences = (value, styles, id) => {
     }
     return styleValue;
   }
-  if (typeof value === "string") {
+  if (typeof value === "string" || typeof value === "boolean" || typeof value === "number") {
     return value;
   }
   return Object.fromEntries(
@@ -267,7 +269,7 @@ const collectUiStylePathsFromCode = (code) => {
   return paths.filter((path) => path.length > 0);
 };
 const collectUiConfigValuePaths = (value, prefix) => {
-  if (typeof value === "string" || isBrickflowUiStyleReference(value)) {
+  if (typeof value === "string" || typeof value === "boolean" || typeof value === "number" || isBrickflowUiStyleReference(value)) {
     return [prefix];
   }
   return Object.entries(value).flatMap(
@@ -358,7 +360,7 @@ const collectUiStylePathsWithConfig = (code, id, config) => {
         const requiredPath = [...referencePath.slice(0, prefixLength), ...configPath.slice(1)];
         configReferences.push(`UI_STYLE.${requiredPath.join(".")}`);
       }
-    } else if (typeof value !== "string") {
+    } else if (typeof value === "object") {
       for (const [key, childValue] of Object.entries(value)) {
         addConfigReferences(childValue, [...configPath, key]);
       }
@@ -395,7 +397,16 @@ const createUiConfigLiteralTypeDeclaration = (paths, config) => [
   "declare global {",
   ...renderInterfaceDeclaration("BrickflowUiConfigLiteralPaths", paths, void 0, (path) => {
     const value = config ? readPath(config, path) : void 0;
-    return typeof value === "string" ? toStringLiteral(value) : "string";
+    if (typeof value === "string") {
+      return toStringLiteral(value);
+    }
+    if (typeof value === "boolean") {
+      return String(value);
+    }
+    if (typeof value === "number") {
+      return String(value);
+    }
+    return "string";
   }),
   "}",
   "",
@@ -806,6 +817,19 @@ const module$1 = defineNuxtModule({
         ].join("\n");
       }
     });
+    addTemplate({
+      filename: "brickflow/brickflow-ui-icons.d.mts",
+      getContents: async () => {
+        const iconNames = iconFont ? await getIconFontNames(iconFont.inputDir) : [];
+        const iconNameType = iconNames.length ? iconNames.map((name) => JSON.stringify(name)).join(" | ") : "never";
+        return [
+          `export type IconName = ${iconNameType}`,
+          "export const firstIconName: IconName",
+          "export const iconNames: readonly IconName[]",
+          ""
+        ].join("\n");
+      }
+    });
     const uiConfigTemplate = addTemplate({
       filename: "brickflow/brickflow-ui-config.mjs",
       getContents: () => [
@@ -978,6 +1002,7 @@ const module$1 = defineNuxtModule({
       viteConfig.plugins.push(tailwindcss());
     });
     addImports([
+      { as: "useDialog", from: resolver.resolve("./runtime/composables/useDialog"), name: "useDialog" },
       { from: resolver.resolve("./runtime/utils/rules"), name: "rule" },
       ...["provideBrickflow", "useBrickflow", "BrickflowConfig"].map((name) => ({
         from: resolver.resolve("./runtime/composables/useBrickflow"),
@@ -994,8 +1019,9 @@ const module$1 = defineNuxtModule({
         type: name !== "useTheme"
       }))
     ]);
+    addPlugin({ mode: "all", src: resolver.resolve("./runtime/plugins/dialog.ts") });
     addComponentsDir({
-      ignore: ["**/*.demo.vue"],
+      ignore: ["**/*.demo.vue", "**/Dialog/Host.vue", "**/Dialog/DemoContent.vue"],
       path: resolver.resolve("./runtime/components"),
       pathPrefix: false,
       prefix: options.componentPrefix ?? "Brick"

package/dist/runtime/brickflow-ui.d.ts

@@ -1,4 +1,5 @@
 declare module '#brickflow-ui' {
   export { UI_CONFIG, UI_STYLE, uiConfig, uiStyles } from '#brickflow-ui-config'
   export { firstIconName, iconNames } from '#brickflow-ui-icons'
+  export type { IconName } from '#brickflow-ui-icons'
 }

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

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import type { IconName } from '#brickflow-ui'
+
   const UI_CONFIG = defineUiConfig<{
     colorClasses: Record<string, Record<string, string>>
     colorDefault: string
-    loadingIconName: string
+    loadingIconName: IconName
     loadingIconTransition: string
     sizeClasses: Record<string, string>
     sizeDefault: string
@@ -28,14 +30,14 @@
       block?: boolean
       color?: ButtonColor
       disabled?: boolean
-      icon?: string
+      icon?: IconName
       loading?: boolean
       rounded?: boolean
       size?: ButtonSize
       square?: boolean
       target?: '_blank' | '_parent' | '_self' | '_top' | null | (Record<string, never> & string)
       to?: RouteLocationRaw
-      trailingIcon?: string
+      trailingIcon?: IconName
       type?: 'button' | 'reset' | 'submit'
       variant?: ButtonVariant
     }>(),

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

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+  import { useDialog } from '../../composables/useDialog'
+  import Button from '../Button/index.vue'
+
+  defineProps<{ text: string }>()
+
+  const dialog = useDialog()
+</script>
+
+<template>
+  <div class="min-h-0 space-y-4 overflow-y-auto bg-linear-to-tr from-violet-900 to-gray-800 p-5">
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <p class="font-semibold">{{ text }}</p>
+      <Button
+        color="plain"
+        @click="dialog.close()"
+      >
+        Close
+      </Button>
+    </div>
+    <p class="text-sm text-zinc-200">Scroll this content, then swipe down from the top edge to move the sheet.</p>
+    <ul class="divide-y divide-white/10">
+      <li
+        v-for="i in 40"
+        :key="i"
+        class="flex items-center justify-between gap-4 py-2 text-sm"
+      >
+        <span>Activity {{ i }}</span>
+        <span class="text-zinc-300">{{ i % 2 ? 'Updated' : 'Created' }}</span>
+      </li>
+    </ul>
+  </div>
+</template>

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

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  import { useDialog } from '../../composables/useDialog'
+  import Button from '../Button/index.vue'
+  import Input from '../Input/index.vue'
+
+  const props = defineProps<{ onSave: (name: string) => void }>()
+  const dialog = useDialog()
+  const name = ref('')
+
+  function save(): void {
+    const value = name.value.trim()
+    if (!value) {
+      return
+    }
+    props.onSave(value)
+    dialog.close()
+  }
+</script>
+
+<template>
+  <form
+    class="space-y-4 p-5"
+    @submit.prevent="save"
+  >
+    <div class="space-y-1">
+      <h2 class="font-semibold">Create a project</h2>
+      <p class="text-sm text-zinc-300">Form state belongs to the dialog content.</p>
+    </div>
+    <Input
+      :value="name"
+      label="Project name"
+      placeholder="My project"
+      autocomplete="off"
+      @input="name = $event"
+    />
+    <div class="flex flex-wrap gap-2">
+      <Button
+        type="submit"
+        :disabled="!name.trim()"
+      >
+        Save project
+      </Button>
+      <Button
+        color="plain"
+        type="button"
+        @click="dialog.close()"
+      >
+        Cancel
+      </Button>
+    </div>
+  </form>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+  import { useDialog } from '../../composables/useDialog'
+  import Button from '../Button/index.vue'
+
+  defineProps<{ title: string }>()
+
+  const dialog = useDialog()
+</script>
+
+<template>
+  <div class="space-y-4 p-5">
+    <div class="space-y-1">
+      <h2 class="font-semibold">{{ title }}</h2>
+      <p class="text-sm text-zinc-300">The placement changes; this content component stays the same.</p>
+    </div>
+    <Button
+      color="plain"
+      @click="dialog.close()"
+    >
+      Close
+    </Button>
+  </div>
+</template>

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

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+  import { defineAsyncComponent } from 'vue'
+
+  import { useDialog } from '../../composables/useDialog'
+  import Button from '../Button/index.vue'
+
+  const props = defineProps<{ level: number }>()
+  const dialog = useDialog()
+  const LazyDemoStack = defineAsyncComponent(() => import('./DemoStack.vue'))
+
+  function openNext(): void {
+    dialog.open(LazyDemoStack, { level: props.level + 1 })
+  }
+</script>
+
+<template>
+  <div class="space-y-4 p-5">
+    <div class="space-y-1">
+      <h2 class="font-semibold">Dialog {{ level }}</h2>
+      <p class="text-sm text-zinc-300">
+        Stack depth: {{ dialog.stack.length }}. Closing the top reveals the previous one.
+      </p>
+    </div>
+    <div class="flex flex-wrap gap-2">
+      <Button @click="openNext">Open on top</Button>
+      <Button
+        color="plain"
+        @click="dialog.close()"
+      >
+        Close top
+      </Button>
+      <Button
+        color="plain"
+        variant="ghost"
+        @click="dialog.closeAll()"
+      >
+        Close all
+      </Button>
+    </div>
+  </div>
+</template>