@brickflow/ui 0.0.56 → 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/index.vue

@@ -1,5 +1,50 @@
+<script setup lang="ts">
+  import { provide } from 'vue'
+
+  import { formRulesKey } from '../../composables/useFieldRules'
+
+  const props = defineProps<{
+    onInvalid?: (event: SubmitEvent) => void
+    onSubmit?: (event: SubmitEvent) => void
+  }>()
+
+  const fields = new Set<{ focus: () => void; validate: () => boolean }>()
+  provide(formRulesKey, {
+    register(field: { focus: () => void; validate: () => boolean }) {
+      fields.add(field)
+      return () => fields.delete(field)
+    },
+  })
+
+  function handleSubmit(event: SubmitEvent): void {
+    event.preventDefault()
+    if (validate()) {
+      props.onSubmit?.(event)
+    } else {
+      props.onInvalid?.(event)
+    }
+  }
+
+  function validate(): boolean {
+    let firstInvalid: undefined | { focus: () => void }
+    for (const field of fields) {
+      if (!field.validate() && !firstInvalid) {
+        firstInvalid = field
+      }
+    }
+    firstInvalid?.focus()
+    return !firstInvalid
+  }
+
+  defineExpose({ validate })
+</script>
+
 <template>
-  <form class="flex flex-col gap-4">
+  <form
+    class="flex flex-col gap-4"
+    novalidate
+    @submit="handleSubmit"
+  >
     <slot />
   </form>
 </template>

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

@@ -7,6 +7,7 @@
 <script lang="ts" setup>
   import { ref } from 'vue'
 
+  import { rule } from '../../utils/rules'
   import Button from '../Button/index.vue'
   import Input from '../Input/index.vue'
   import Form from './index.vue'
@@ -14,6 +15,12 @@
   const email = ref('')
   const password = ref('')
   const submittedEmail = ref('')
+  const emailRules = [
+    rule.required(),
+    rule.email(),
+    rule.regex(/\.com$/i, () => 'CUSTOM RULE: Use a .com email address'),
+  ]
+  const passwordRules = [rule.required(), rule.minLength(8)]
 
   function handleSubmit(): void {
     submittedEmail.value = email.value
@@ -28,15 +35,19 @@
     <Input
       :value="email"
       label="Email"
-      placeholder="example@brickflow.com"
+      placeholder="example@oyes.com"
       type="email"
+      :rules="emailRules"
+      description="Only .com"
       autocomplete="email"
       @input="email = $event"
     />
     <Input
       :value="password"
+      placeholder="**********"
       label="Password"
       type="password"
+      :rules="passwordRules"
       autocomplete="current-password"
       @input="password = $event"
     />

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,
       {
@@ -31,10 +33,16 @@
 </script>
 
 <script setup lang="ts">
+  import type { MaskaDetail, MaskInput, MaskInputOptions, MaskType } from 'maska'
+
   import { twMerge } from 'tailwind-merge'
-  import { computed, ref, shallowRef, useAttrs, useId, useSlots, watch } from 'vue'
+  import { computed, nextTick, ref, shallowRef, useAttrs, useId, useSlots, watch } from 'vue'
+
+  import type { Rule } from '../../utils/rules'
 
+  import { useFieldRules } from '../../composables/useFieldRules'
   import Icon from '../Icon/index.vue'
+  import TransitionSize from '../TransitionSize/index.vue'
 
   defineOptions({ inheritAttrs: false })
 
@@ -45,18 +53,21 @@
       autoWidth?: boolean
       description?: string
       disabled?: boolean
-      icon?: string
+      icon?: IconName
       label?: string
+      mask?: MaskInputOptions | MaskType
       onBlur?: (value: string, target: HTMLInputElement) => void
       onChange?: (value: string, target: HTMLInputElement) => void
       onFocus?: (value: string, target: HTMLInputElement | null) => void
       onIconClick?: () => void
       onInput?: (value: string, target: HTMLInputElement | null) => void
+      onMask?: (detail: MaskaDetail, target: HTMLInputElement) => void
       onTrailingIconClick?: () => void
       placeholder?: string
       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
@@ -69,14 +80,17 @@
       disabled: false,
       icon: undefined,
       label: undefined,
+      mask: undefined,
       onBlur: undefined,
       onChange: undefined,
       onFocus: undefined,
       onIconClick: undefined,
       onInput: undefined,
+      onMask: undefined,
       onTrailingIconClick: undefined,
       placeholder: '',
       readonly: false,
+      rules: undefined,
       size: 'md',
       trailingIcon: undefined,
       type: 'text',
@@ -86,10 +100,13 @@
   )
 
   const model = shallowRef('')
+  const maskedValue = shallowRef<null | string>(null)
+  let maskInput: MaskInput | undefined
 
   const attrs = useAttrs()
   const slots = useSlots()
   const generatedId = useId()
+  const baseRef = ref<HTMLInputElement | null>(null)
   const inputRef = ref<HTMLInputElement | null>(null)
   const widthMeasureRef = ref<HTMLSpanElement | null>(null)
   const measuredWidth = ref(0)
@@ -106,12 +123,27 @@
   const fieldId = computed(() => String(attrs.id ?? generatedId))
   const descriptionId = computed(() => `${fieldId.value}-description`)
   const currentValue = computed(() => (props.value === undefined ? model.value : (props.value ?? '')))
-  const widthMeasureText = computed(() => currentValue.value || props.placeholder || ' ')
+  const {
+    error,
+    input: validateInput,
+    validate,
+  } = useFieldRules(
+    currentValue,
+    computed(() => props.rules),
+    focus,
+  )
+  const displayValue = computed(() =>
+    props.mask === null || props.mask === undefined
+      ? currentValue.value
+      : (maskedValue.value ?? currentValue.value),
+  )
+  const widthMeasureText = computed(() => displayValue.value || props.placeholder || ' ')
   const isEmptyField = computed(() => {
-    return Boolean(currentValue.value)
+    return Boolean(displayValue.value)
   })
 
-  const hasDescription = computed(() => Boolean(props.description || slots.description || slots.error))
+  const hasError = computed(() => Boolean(error.value))
+  const hasDescription = computed(() => Boolean(props.description || slots.description || hasError.value))
   const inputType = computed(() => {
     return props.type === 'password' && !showPassword.value ? 'password' : 'text'
   })
@@ -132,7 +164,12 @@
   ])
   const labelClasses = computed(() => twMerge(UI_STYLE.label, sizeClass.value.label, variantClass.value.label))
   const descriptionClasses = computed(() =>
-    twMerge(UI_STYLE.description, sizeClass.value.description, variantClass.value.description),
+    twMerge(
+      UI_STYLE.description,
+      sizeClass.value.description,
+      variantClass.value.description,
+      hasError.value && UI_STYLE.state.errorDescription,
+    ),
   )
   const leadingIconClasses = computed(() =>
     twMerge(
@@ -164,6 +201,64 @@
     { flush: 'post', immediate: true },
   )
 
+  watch(
+    [() => props.mask, inputRef],
+    async ([mask, input], _previous, onCleanup) => {
+      maskInput?.destroy()
+      maskInput = undefined
+      maskedValue.value = null
+
+      if (mask === null || mask === undefined || !input) {
+        return
+      }
+
+      let canceled = false
+      onCleanup(() => {
+        canceled = true
+        maskInput?.destroy()
+        maskInput = undefined
+      })
+
+      const { MaskInput } = await import('maska')
+      if (canceled) {
+        return
+      }
+
+      const options: MaskInputOptions = typeof mask === 'object' && !Array.isArray(mask) ? mask : { mask }
+      const onMaska = options.onMaska
+
+      maskInput = new MaskInput(input, {
+        ...options,
+        onMaska: (detail) => {
+          maskedValue.value = detail.masked
+          model.value = detail.masked
+          if (Array.isArray(onMaska)) {
+            onMaska.forEach((callback) => callback(detail))
+          } else {
+            onMaska?.(detail)
+          }
+          props.onMask?.(detail, input)
+        },
+      })
+    },
+    { flush: 'post', immediate: true },
+  )
+
+  watch(
+    () => props.value,
+    async () => {
+      if (!maskInput || !inputRef.value) {
+        return
+      }
+      maskedValue.value = null
+      await nextTick()
+      if (maskInput && inputRef.value) {
+        maskInput.updateValue(inputRef.value)
+      }
+    },
+    { flush: 'post' },
+  )
+
   function clear(): void {
     setValue('')
     focus()
@@ -189,30 +284,46 @@
   }
 
   function handleInput(event: Event): void {
+    if (props.mask !== null && props.mask !== undefined && event instanceof CustomEvent) {
+      return
+    }
     setValue((event.target as HTMLInputElement).value)
   }
 
   function setValue(value: string): void {
     model.value = value
+    validateInput(value)
+    if (props.mask !== null && props.mask !== undefined) {
+      maskedValue.value = value
+    }
     props.onInput?.(value, inputRef.value)
   }
 
-  defineExpose({ clear, fieldId, focus, hasFocus, inputRef })
+  defineExpose({ clear, fieldId, focus, hasFocus, inputRef, validate })
 </script>
 
 <template>
-  <div :class="[classes, $attrs.class]">
-    <label
-      v-if="props.label || $slots.label"
-      :for="fieldId"
-      :class="labelClasses"
+  <div
+    ref="baseRef"
+    :class="[classes, $attrs.class]"
+  >
+    <TransitionSize
+      :flexParent="baseRef"
+      flexDirection="end"
     >
-      <slot name="label">{{ props.label }}</slot>
-    </label>
+      <label
+        v-if="props.label || $slots.label"
+        :for="fieldId"
+        :class="labelClasses"
+      >
+        <slot name="label">{{ props.label }}</slot>
+      </label>
+    </TransitionSize>
 
     <label
       :for="fieldId"
       :class="fieldWrapClasses"
+      :aria-invalid="hasError ? 'true' : undefined"
       :style="props.autoWidth ? { maxWidth: '100%', width: 'fit-content' } : undefined"
     >
       <span
@@ -244,7 +355,7 @@
         v-bind="{ ...$attrs, class: undefined, id: undefined }"
         :id="fieldId"
         ref="inputRef"
-        :value="currentValue"
+        :value="displayValue"
         :type="inputType"
         :inputmode="props.type === 'password' ? undefined : props.type"
         :autocomplete="props.autocomplete"
@@ -252,6 +363,7 @@
         :readonly="props.readonly"
         :placeholder="props.placeholder"
         :aria-describedby="hasDescription ? descriptionId : undefined"
+        :aria-invalid="hasError ? 'true' : undefined"
         :class="fieldClasses"
         :style="fieldStyle"
         @input="handleInput"
@@ -307,13 +419,25 @@
       </slot>
     </label>
 
-    <div
-      v-if="hasDescription"
-      :id="descriptionId"
-      :class="descriptionClasses"
-    >
-      <slot name="error" />
-      <slot name="description">{{ props.description }}</slot>
-    </div>
+    <TransitionSize :flexParent="baseRef">
+      <div
+        v-if="hasDescription"
+        :id="descriptionId"
+        :class="descriptionClasses"
+      >
+        <slot
+          v-if="hasError"
+          name="error"
+        >
+          {{ error }}
+        </slot>
+        <slot
+          v-else
+          name="description"
+        >
+          {{ props.description }}
+        </slot>
+      </div>
+    </TransitionSize>
   </div>
 </template>

package/dist/runtime/components/Input/label.demo.vue

@@ -5,16 +5,28 @@
 </script>
 
 <script lang="ts" setup>
+  import { shallowRef } from 'vue'
+
   import Input from './index.vue'
+
+  const active = shallowRef(true)
 </script>
 
 <template>
   <div class="max-w-sm">
     <Input
-      label="Email address"
-      description="We will use this address to contact you."
-      placeholder="name@example.com"
+      :label="active ? 'Email address' : undefined"
+      :description="active ? 'We will use this address to contact you.' : undefined"
+      :placeholder="active ? 'name@example.com' : undefined"
       type="email"
     />
+    <button
+      type="button"
+      class="mt-4 w-30 cursor-pointer rounded-xl px-3 py-2"
+      :class="active ? 'bg-blue-500' : 'bg-blue-800'"
+      @click="active = !active"
+    >
+      {{ active ? 'Hide' : 'Show' }}
+    </button>
   </div>
 </template>