@brickflow/ui 0.0.55 → 0.0.57

package/dist/module.d.mts

@@ -1,6 +1,7 @@
 import * as _nuxt_schema from '@nuxt/schema';
 export { BrickflowConfig } from '../dist/runtime/composables/useBrickflow.js';
 export { BrickflowI18n, BrickflowRouteLocationParam } from '../dist/runtime/composables/useTranslate.js';
+export { Rule, RuleMessages, rule } from '../dist/runtime/utils/rules.js';
 
 interface ModuleOptions {
     componentPrefix?: string;

package/dist/module.json

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

package/dist/module.mjs

@@ -5,6 +5,7 @@ import { mkdir, access, readFile, writeFile, readdir } from 'node:fs/promises';
 import { join, parse, basename, extname, dirname, resolve, relative } from 'node:path';
 import { isBrickflowUiStyleReference, getBrickflowUiStyleReferencePath, defineBrickflowUi } from '../dist/runtime/tailwind.js';
 import { generateFonts, FontAssetType, OtherAssetType } from 'fantasticon';
+export { rule } from '../dist/runtime/utils/rules.js';
 
 const getIconFontCssPath$1 = (outputDir, name) => join(outputDir, `${name}.minify.css`);
 async function generateIcons({ inputDir, name, outputDir }) {
@@ -977,6 +978,7 @@ const module$1 = defineNuxtModule({
       viteConfig.plugins.push(tailwindcss());
     });
     addImports([
+      { from: resolver.resolve("./runtime/utils/rules"), name: "rule" },
       ...["provideBrickflow", "useBrickflow", "BrickflowConfig"].map((name) => ({
         from: resolver.resolve("./runtime/composables/useBrickflow"),
         name,

package/dist/runtime/components/Button/state.demo.vue

@@ -21,11 +21,19 @@
   <div class="flex flex-wrap items-center gap-3">
     <button
       type="button"
-      class="cursor-pointer rounded-xl bg-blue-500 px-3 py-2"
+      class="w-30 cursor-pointer rounded-xl px-3 py-2"
+      :class="stateActive ? 'bg-blue-500' : 'bg-blue-800'"
       @click="stateActive = !stateActive"
     >
       {{ stateActive ? 'On' : 'Off' }}
     </button>
+    <Button
+      :loading="stateActive"
+      :icon="firstIconName"
+    >
+      Loading
+    </Button>
+    <Button :loading="stateActive">Loading</Button>
     <div class="basis-full">
       <div class="relative flex w-fit flex-col items-start gap-3 pl-13">
         <div class="absolute top-0 left-0 z-0 size-full object-cover pt-7 pl-13">

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

@@ -0,0 +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"
+    novalidate
+    @submit="handleSubmit"
+  >
+    <slot />
+  </form>
+</template>

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

@@ -0,0 +1,68 @@
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Email & Password',
+  }
+</script>
+
+<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'
+
+  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
+  }
+</script>
+
+<template>
+  <Form
+    class="max-w-sm"
+    @submit.prevent="handleSubmit"
+  >
+    <Input
+      :value="email"
+      label="Email"
+      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"
+    />
+    <Button
+      type="submit"
+      class="self-start"
+    >
+      Sign in
+    </Button>
+    <p
+      v-if="submittedEmail"
+      role="status"
+      class="text-sm"
+    >
+      Submitted for {{ submittedEmail }}
+    </p>
+  </Form>
+</template>

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

@@ -31,29 +31,39 @@
 </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 })
 
   const props = withDefaults(
     defineProps<{
       align?: 'center' | 'left' | 'right'
+      autocomplete?: string
       autoWidth?: boolean
       description?: string
       disabled?: boolean
       icon?: string
       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
       type?: 'decimal' | 'email' | 'numeric' | 'password' | 'search' | 'tel' | 'text' | 'url'
@@ -62,19 +72,23 @@
     }>(),
     {
       align: 'left',
+      autocomplete: undefined,
       autoWidth: false,
       description: undefined,
       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',
@@ -84,10 +98,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)
@@ -104,12 +121,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'
   })
@@ -130,7 +162,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(
@@ -162,6 +199,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()
@@ -187,30 +282,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
@@ -242,13 +353,15 @@
         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"
         :disabled="props.disabled"
         :readonly="props.readonly"
         :placeholder="props.placeholder"
         :aria-describedby="hasDescription ? descriptionId : undefined"
+        :aria-invalid="hasError ? 'true' : undefined"
         :class="fieldClasses"
         :style="fieldStyle"
         @input="handleInput"
@@ -304,13 +417,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>

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

@@ -0,0 +1,73 @@
+<script lang="ts">
+  export const uiDemo = {
+    description:
+      'Use Maska tokens in the mask prop. Pass an options object for custom tokens or an array for alternative masks.',
+    title: 'Mask',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import Input from './index.vue'
+
+  const phone = ref('')
+  const digits = ref('')
+  const alternativeMasks = ['###-###', '###-###-###']
+  const customMask = {
+    mask: 'AA-####',
+    tokens: {
+      A: { pattern: /[a-z]/i, transform: (character: string) => character.toUpperCase() },
+    },
+  }
+</script>
+
+<template>
+  <div class="flex max-w-sm flex-col gap-5">
+    <p class="text-sm text-zinc-400">
+      Default tokens:
+      <code>#</code>
+      is a digit,
+      <code>@</code>
+      is a letter, and
+      <code>*</code>
+      is a letter or digit. Other characters are literals; prefix a token with
+      <code>!</code>
+      to display it literally. See
+      <a
+        class="text-blue-400 underline"
+        href="https://beholdr.github.io/maska/v3/#/tokens"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Maska token documentation
+      </a>
+      .
+    </p>
+    <Input
+      :value="phone"
+      mask="+## (###) ###-##-##"
+      label="Phone: +## (###) ###-##-##"
+      placeholder="+48 (123) 456-78-90"
+      type="tel"
+      @input="(value) => (phone = value)"
+      @mask="(detail) => (digits = detail.unmasked)"
+    />
+    <div class="text-sm text-zinc-400">Masked: {{ phone }} · Raw: {{ digits }}</div>
+    <Input
+      mask="@@-####"
+      label="Letters and digits: @@-####"
+      placeholder="AB-1234"
+    />
+    <Input
+      :mask="alternativeMasks"
+      label="Alternative lengths: ###-### or ###-###-###"
+      placeholder="123-456-789"
+    />
+    <Input
+      :mask="customMask"
+      label="Custom uppercase token: AA-####"
+      placeholder="AB-1234"
+    />
+  </div>
+</template>

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

@@ -5,11 +5,19 @@
 </script>
 
 <script lang="ts" setup>
+  import { onMounted, ref } from 'vue'
+
   import { uiConfig } from '#brickflow-ui'
 
+  import { rule } from '../../utils/rules'
   import Input from './index.vue'
 
   const inputConfig = uiConfig.input
+  const errorInputs = ref<InstanceType<typeof Input>[]>([])
+
+  onMounted(() => {
+    errorInputs.value.forEach((input) => input.validate())
+  })
 </script>
 
 <template>
@@ -24,6 +32,14 @@
         :label="`Variant ${variant}`"
         placeholder="Type here"
       />
+      <Input
+        ref="errorInputs"
+        :variant="variant"
+        :label="`Error ${variant}`"
+        :rules="[rule.required(), rule.minLength(4)]"
+        description="This description is hidden while the field has an error"
+        placeholder="Required field"
+      />
       <Input
         :variant="variant"
         :label="`Disabled ${variant}`"

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+  export const uiDemo = {
+    description: 'Denominator limits decimal places: 0 for integers, 2 for up to two decimal digits.',
+    title: 'Denominator',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import InputNumber from './index.vue'
+
+  const price = ref<number>(8)
+  const price2 = ref<number>(12.55)
+</script>
+
+<template>
+  <div class="flex max-w-sm flex-col gap-4">
+    <InputNumber
+      :value="price"
+      :denominator="0"
+      label="Denominator: 0"
+      :description="`Value: ${price}`"
+      :min="-99"
+      :max="200"
+      @input="price = $event"
+    ></InputNumber>
+    <InputNumber
+      :value="price2"
+      :denominator="2"
+      label="Denominator: 2"
+      :description="`Value: ${price2}`"
+      :min="-99"
+      :max="200"
+      @input="price2 = $event"
+    ></InputNumber>
+  </div>
+</template>