@brickflow/ui 0.0.55 → 0.0.56

package/dist/module.json

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

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,5 @@
+<template>
+  <form class="flex flex-col gap-4">
+    <slot />
+  </form>
+</template>

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Email & Password',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  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('')
+
+  function handleSubmit(): void {
+    submittedEmail.value = email.value
+  }
+</script>
+
+<template>
+  <Form
+    class="max-w-sm"
+    @submit.prevent="handleSubmit"
+  >
+    <Input
+      :value="email"
+      label="Email"
+      placeholder="example@brickflow.com"
+      type="email"
+      autocomplete="email"
+      @input="email = $event"
+    />
+    <Input
+      :value="password"
+      label="Password"
+      type="password"
+      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

@@ -41,6 +41,7 @@
   const props = withDefaults(
     defineProps<{
       align?: 'center' | 'left' | 'right'
+      autocomplete?: string
       autoWidth?: boolean
       description?: string
       disabled?: boolean
@@ -62,6 +63,7 @@
     }>(),
     {
       align: 'left',
+      autocomplete: undefined,
       autoWidth: false,
       description: undefined,
       disabled: false,
@@ -245,6 +247,7 @@
         :value="currentValue"
         :type="inputType"
         :inputmode="props.type === 'password' ? undefined : props.type"
+        :autocomplete="props.autocomplete"
         :disabled="props.disabled"
         :readonly="props.readonly"
         :placeholder="props.placeholder"

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.55)
+  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>

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

@@ -8,37 +8,62 @@
 
   const props = withDefaults(
     defineProps<{
+      align?: InputProps['align']
+      autocomplete?: string
+      autoWidth?: boolean
       denominator?: number
       description?: string
       disabled?: boolean
+      icon?: string
       label?: string
       max?: number
       min?: number
-      nullable?: T
+      nullable?: boolean & T
       onBlur?: (value: true extends NoInfer<T> ? null | number : number) => void
+      onChange?: (value: string, target: HTMLInputElement) => void
       onFocus?: (value: true extends NoInfer<T> ? null | number : number) => void
+      onIconClick?: () => void
       onInput?: (value: true extends NoInfer<T> ? null | number : number) => void
       onKeydown?: (event: KeyboardEvent) => void
+      onTrailingIconClick?: () => void
+      placeholder?: string
+      readonly?: boolean
+      size?: InputProps['size']
       step?: number
+      trailingIcon?: string
       value: true extends NoInfer<T> ? null | number : number
+      variant?: InputProps['variant']
     }>(),
     {
+      align: undefined,
+      autocomplete: undefined,
+      autoWidth: false,
       denominator: 0,
       description: undefined,
       disabled: false,
+      icon: undefined,
       label: undefined,
       max: undefined,
       min: undefined,
       nullable: undefined,
       onBlur: undefined,
+      onChange: undefined,
       onFocus: undefined,
+      onIconClick: undefined,
       onInput: undefined,
       onKeydown: undefined,
-      onValueChange: undefined,
+      onTrailingIconClick: undefined,
+      placeholder: undefined,
+      readonly: false,
+      size: undefined,
       step: 1,
+      trailingIcon: undefined,
+      variant: undefined,
     },
   )
 
+  type InputProps = InstanceType<typeof Input>['$props']
+
   const inputValue = shallowRef(prepareValue(props.value))
 
   watch(
@@ -52,11 +77,25 @@
     if (!target) {
       return
     }
+    if (props.nullable && target.value === '') {
+      inputValue.value = ''
+      props.onBlur?.(null as typeof props.value)
+      return
+    }
     const nextValue = prepareValue(props.value)
     target.value = nextValue
     inputValue.value = nextValue
     props.onBlur?.(props.value)
   }
+
+  function handleChange(value: string, target: HTMLInputElement): void {
+    props.onChange?.(value, target)
+  }
+
+  function handleFocus(): void {
+    props.onFocus?.(props.value)
+  }
+
   const allowedRegexp = /^-?\d*(?:\.\d*)?$/
   const validNumberRegexp = /^-?(?:\d+(?:\.\d+)?|\.\d+)$/
 
@@ -64,19 +103,36 @@
     if (!target) {
       return
     }
-    const nextValue = rawValue.replace(/,/, '.')
+    let nextValue = rawValue.replace(/,/, '.')
     target.value = nextValue
 
     if (isEmpty(nextValue)) {
+      if (props.nullable) {
+        inputValue.value = ''
+        props.onInput?.(null as typeof props.value)
+      }
       return
     }
     if (!allowedRegexp.test(nextValue)) {
       target.value = inputValue.value
       return
     }
-    if (!validNumberRegexp.test(nextValue)) {
+    const fraction = nextValue.split('.')[1]
+    if (fraction !== undefined && (props.denominator === 0 || fraction.length > props.denominator)) {
+      nextValue =
+        props.denominator === 0
+          ? nextValue.slice(0, nextValue.indexOf('.'))
+          : nextValue.slice(0, nextValue.indexOf('.') + props.denominator + 1)
+      target.value = nextValue
+    }
+    if (isEmpty(nextValue) || !validNumberRegexp.test(nextValue)) {
+      if (isEmpty(nextValue) && props.nullable) {
+        inputValue.value = ''
+        props.onInput?.(null as typeof props.value)
+      }
       return
     }
+
     let nextValueNumber = Number(nextValue)
     if (!isEmpty(props.min) && nextValueNumber < props.min) {
       target.value = prepareValue(props.min)
@@ -86,8 +142,41 @@
       target.value = prepareValue(props.max)
       nextValueNumber = props.max
     }
+
     props.onInput?.(nextValueNumber)
   }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    props.onKeydown?.(event)
+    if (event.defaultPrevented || (event.key !== 'ArrowUp' && event.key !== 'ArrowDown')) {
+      return
+    }
+    const target = event.target
+    if (!(target instanceof HTMLInputElement) || target.disabled || target.readOnly) {
+      return
+    }
+    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)
+    const direction = event.key === 'ArrowUp' ? 1 : -1
+    const step = props.step * (event.shiftKey ? 2 : 1)
+    const precision = Math.max(0, Math.min(100, Math.trunc(props.denominator)))
+    let nextValue = Number((currentValue + direction * step).toFixed(precision))
+    if (!isEmpty(props.min) && nextValue < props.min) {
+      nextValue = props.min
+    }
+    if (!isEmpty(props.max) && nextValue > props.max) {
+      nextValue = props.max
+    }
+
+    target.value = prepareValue(nextValue)
+    props.onInput?.(nextValue)
+  }
+
   function prepareValue(value: typeof props.value): string {
     return value === null ? '' : String(value)
   }
@@ -97,15 +186,28 @@
   <Input
     v-bind="{
       ...$attrs,
-      // onBlur: handleBlur,
-      // onKeydown: handleKeydown,
     }"
     :value="inputValue"
+    :align="props.align"
+    :autocomplete="props.autocomplete"
+    :autoWidth="props.autoWidth"
     :label="props.label"
     :description="props.description"
-    type="decimal"
+    :disabled="props.disabled"
+    :icon="props.icon"
+    :placeholder="props.placeholder"
+    :readonly="props.readonly"
+    :size="props.size"
+    :trailingIcon="props.trailingIcon"
+    :type="props.denominator === 0 ? 'numeric' : 'decimal'"
+    :variant="props.variant"
     @input="handleInput"
+    @change="handleChange"
     @blur="handleBlur"
+    @focus="handleFocus"
+    @iconClick="props.onIconClick?.()"
+    @keydown="handleKeydown"
+    @trailingIconClick="props.onTrailingIconClick?.()"
   >
     <template
       v-if="$slots.label"

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

@@ -0,0 +1,39 @@
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Min & Max',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import InputNumber from './index.vue'
+
+  const price1 = ref<number>(25)
+  const price2 = ref<number>(-10)
+</script>
+
+<template>
+  <div class="flex max-w-sm flex-col gap-4">
+    <InputNumber
+      :value="price1"
+      label="Min: 0 — Max: 200"
+      :description="`Value: ${price1}`"
+      :min="0"
+      :max="200"
+      @input="price1 = $event"
+    >
+      <template #leading><span class="text-green-400">$</span></template>
+    </InputNumber>
+    <InputNumber
+      :value="price2"
+      label="Min: -100 — Max: 199"
+      :description="`Value: ${price2}`"
+      :min="-100"
+      :max="199"
+      @input="price2 = $event"
+    >
+      <template #leading><span class="text-green-400">$</span></template>
+    </InputNumber>
+  </div>
+</template>

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Nullable',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import InputNumber from './index.vue'
+
+  const value = ref<null | number>(null)
+</script>
+
+<template>
+  <div class="flex max-w-sm flex-col gap-4">
+    <InputNumber
+      :value="value"
+      nullable
+      label="Nullable (clear to set null)"
+      :description="`Value: ${value === null ? 'null' : value}`"
+      @input="value = $event"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+  export const uiDemo = {
+    description: 'Step sets the change per arrow key press. Hold Shift to double it.',
+    title: 'Step',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import InputNumber from './index.vue'
+
+  const quantity = ref<number>(2)
+  const price = ref<number>(25)
+</script>
+
+<template>
+  <div class="flex max-w-sm flex-col gap-4">
+    <InputNumber
+      :value="quantity"
+      :step="1"
+      label="Step: 1"
+      :min="0"
+      :max="200"
+      :description="`Value: ${quantity}`"
+      @input="quantity = $event"
+    />
+    <InputNumber
+      :value="price"
+      :step="5"
+      label="Step: 5"
+      :min="-10"
+      :max="200"
+      :description="`Value: ${price}`"
+      @input="price = $event"
+    />
+  </div>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickflow/ui",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "type": "module",
   "description": "brickflow UI Nuxt module.",
   "files": [

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

@@ -1,33 +0,0 @@
-<script lang="ts">
-  export const uiDemo = {
-    title: 'Number & Bounds',
-  }
-</script>
-
-<script lang="ts" setup>
-  import { ref } from 'vue'
-
-  import InputNumber from './index.vue'
-
-  const price = ref<number>(25)
-  function handleInput(event: number): void {
-    price.value = event
-  }
-</script>
-
-<template>
-  <div class="flex max-w-sm flex-col gap-4">
-    <InputNumber
-      :value="price"
-      label="Price"
-      description="Min: 0 — Max: 200"
-      :min="0"
-      :max="200"
-      :step="5"
-      @input="handleInput"
-    >
-      <template #leading><span class="text-green-400">$</span></template>
-    </InputNumber>
-    <p class="text-gray-500">Value: {{ price }}</p>
-  </div>
-</template>