@brickflow/ui 0.0.54 → 0.0.55

package/dist/module.json

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

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

@@ -46,12 +46,12 @@
       disabled?: boolean
       icon?: string
       label?: string
-      onBlur?: (value: null | string, target: HTMLInputElement) => void
-      onFocus?: (value: null | string, target: HTMLInputElement | null) => void
+      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
       onTrailingIconClick?: () => void
-      onValueChange?: (value: null | string, target: HTMLInputElement) => void
-      onValueInput?: (value: null | string, target: HTMLInputElement | null) => void
       placeholder?: string
       readonly?: boolean
       size?: InputSize
@@ -68,11 +68,11 @@
       icon: undefined,
       label: undefined,
       onBlur: undefined,
+      onChange: undefined,
       onFocus: undefined,
       onIconClick: undefined,
+      onInput: undefined,
       onTrailingIconClick: undefined,
-      onValueChange: undefined,
-      onValueInput: undefined,
       placeholder: '',
       readonly: false,
       size: 'md',
@@ -83,8 +83,7 @@
     },
   )
 
-  const model = shallowRef<null | string>('')
-  // const model = defineModel<null | number | string>({ default: '' })
+  const model = shallowRef('')
 
   const attrs = useAttrs()
   const slots = useSlots()
@@ -104,7 +103,7 @@
 
   const fieldId = computed(() => String(attrs.id ?? generatedId))
   const descriptionId = computed(() => `${fieldId.value}-description`)
-  const currentValue = computed(() => (props.value === undefined ? model.value : props.value))
+  const currentValue = computed(() => (props.value === undefined ? model.value : (props.value ?? '')))
   const widthMeasureText = computed(() => currentValue.value || props.placeholder || ' ')
   const isEmptyField = computed(() => {
     return Boolean(currentValue.value)
@@ -177,23 +176,23 @@
     props.onBlur?.(currentValue.value, event.target as HTMLInputElement)
   }
 
+  function handleChange(event: Event): void {
+    const target = event.target as HTMLInputElement
+    props.onChange?.(target.value, target)
+  }
+
   function handleFocus(event: FocusEvent): void {
     hasFocus.value = true
     props.onFocus?.(currentValue.value, event.target as HTMLInputElement)
   }
 
-  function onChange(event: Event): void {
-    const target = event.target as HTMLInputElement
-    props.onValueChange?.(target.value, target)
-  }
-
-  function onInput(event: Event): void {
+  function handleInput(event: Event): void {
     setValue((event.target as HTMLInputElement).value)
   }
 
-  function setValue(value: null | string): void {
+  function setValue(value: string): void {
     model.value = value
-    props.onValueInput?.(value, inputRef.value)
+    props.onInput?.(value, inputRef.value)
   }
 
   defineExpose({ clear, fieldId, focus, hasFocus, inputRef })
@@ -252,8 +251,8 @@
         :aria-describedby="hasDescription ? descriptionId : undefined"
         :class="fieldClasses"
         :style="fieldStyle"
-        @input="onInput"
-        @change="onChange"
+        @input="handleInput"
+        @change="handleChange"
         @focus="handleFocus"
         @blur="handleBlur"
       />

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

@@ -5,6 +5,8 @@
 </script>
 
 <script lang="ts" setup>
+  import { ref } from 'vue'
+
   import { firstIconName, uiConfig } from '#brickflow-ui'
 
   import Button from '../Button/index.vue'
@@ -15,6 +17,7 @@
   function copy(): void {
     console.log('Click')
   }
+  const text = ref('')
 </script>
 
 <template>
@@ -26,6 +29,7 @@
       style="grid-template-columns: minmax(0, 24rem) max-content; grid-template-rows: repeat(3, auto)"
     >
       <Input
+        :value="text"
         :size="size"
         :icon="firstIconName"
         :trailingIcon="firstIconName"
@@ -34,6 +38,7 @@
         :label="`Size: ${size}`"
         class="row-span-3 grid! grid-rows-subgrid"
         @iconClick="copy"
+        @input="text = $event"
       />
       <Button
         :size="size"

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

@@ -9,29 +9,25 @@
 
   import InputNumber from './index.vue'
 
-  const quantity = ref<null | number>(null)
-  const price = ref<null | number>(25)
+  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
-      v-model="quantity"
-      label="Quantity"
-      description="Use ↑ and ↓ to change by one."
-      :min="0"
-      :max="20"
-      block
-    />
-    <InputNumber
-      v-model="price"
+      :value="price"
       label="Price"
-      description="Changes in steps of five."
+      description="Min: 0 — Max: 200"
       :min="0"
-      :max="100"
+      :max="200"
       :step="5"
-      block
-    />
-    <p class="text-sm text-gray-400">Quantity: {{ quantity ?? '—' }} · Price: {{ price ?? '—' }}</p>
+      @input="handleInput"
+    >
+      <template #leading><span class="text-green-400">$</span></template>
+    </InputNumber>
+    <p class="text-gray-500">Value: {{ price }}</p>
   </div>
 </template>

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

@@ -1,79 +1,95 @@
-<script setup lang="ts">
-  import { computed, ref } from 'vue'
+<script setup lang="ts" generic="T extends boolean = false">
+  import { shallowRef, watch } from 'vue'
 
+  import { isEmpty } from '../../utils/checkup.js'
   import Input from '../Input/index.vue'
 
   defineOptions({ inheritAttrs: false })
 
   const props = withDefaults(
     defineProps<{
+      denominator?: number
+      description?: string
+      disabled?: boolean
+      label?: string
       max?: number
       min?: number
-      onValueChange?: (value: null | number, target: HTMLInputElement) => void
-      onValueInput?: (value: null | number, target: HTMLInputElement | null) => void
+      nullable?: T
+      onBlur?: (value: true extends NoInfer<T> ? null | number : number) => void
+      onFocus?: (value: true extends NoInfer<T> ? null | number : number) => void
+      onInput?: (value: true extends NoInfer<T> ? null | number : number) => void
+      onKeydown?: (event: KeyboardEvent) => void
       step?: number
-      value?: null | number
+      value: true extends NoInfer<T> ? null | number : number
     }>(),
     {
+      denominator: 0,
+      description: undefined,
+      disabled: false,
+      label: undefined,
       max: undefined,
       min: undefined,
+      nullable: undefined,
+      onBlur: undefined,
+      onFocus: undefined,
+      onInput: undefined,
+      onKeydown: undefined,
       onValueChange: undefined,
-      onValueInput: undefined,
       step: 1,
-      value: undefined,
     },
   )
 
-  const model = defineModel<null | number>({ default: null })
-  const rawValue = ref<null | string>(null)
-  const currentValue = computed(() => (props.value === undefined ? model.value : props.value))
-  const inputValue = computed(
-    () => rawValue.value ?? (currentValue.value === null ? '' : String(currentValue.value)),
-  )
-
-  function clamp(value: number): number {
-    return Math.min(props.max ?? Infinity, Math.max(props.min ?? -Infinity, value))
-  }
+  const inputValue = shallowRef(prepareValue(props.value))
 
-  function handleBlur(): void {
-    rawValue.value = null
-  }
+  watch(
+    () => props.value,
+    () => {
+      inputValue.value = prepareValue(props.value)
+    },
+  )
 
-  function handleKeydown(event: KeyboardEvent): void {
-    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {
+  function handleBlur(value: string, target: HTMLInputElement): void {
+    if (!target) {
       return
     }
-
-    event.preventDefault()
-    const next = (currentValue.value ?? 0) + (event.key === 'ArrowUp' ? props.step : -props.step)
-    const value = clamp(next)
-    rawValue.value = String(value)
-    model.value = value
-    props.onValueInput?.(value, event.target as HTMLInputElement)
-  }
-
-  function handleValueChange(value: null | string, target: HTMLInputElement): void {
-    const parsed = toNumber(value)
-    const bounded = parsed === null ? null : clamp(parsed)
-    rawValue.value = null
-    model.value = bounded
-    props.onValueChange?.(bounded, target)
-  }
-
-  function handleValueInput(value: null | string, target: HTMLInputElement | null): void {
-    rawValue.value = value ?? ''
-    const number = toNumber(value)
-    model.value = number
-    props.onValueInput?.(number, target)
+    const nextValue = prepareValue(props.value)
+    target.value = nextValue
+    inputValue.value = nextValue
+    props.onBlur?.(props.value)
   }
+  const allowedRegexp = /^-?\d*(?:\.\d*)?$/
+  const validNumberRegexp = /^-?(?:\d+(?:\.\d+)?|\.\d+)$/
 
-  function toNumber(value: null | string): null | number {
-    if (value === null || value.trim() === '') {
-      return null
+  function handleInput(rawValue: string, target: HTMLInputElement | null): void {
+    if (!target) {
+      return
     }
+    const nextValue = rawValue.replace(/,/, '.')
+    target.value = nextValue
 
-    const number = Number(value.replace(',', '.'))
-    return Number.isFinite(number) ? number : null
+    if (isEmpty(nextValue)) {
+      return
+    }
+    if (!allowedRegexp.test(nextValue)) {
+      target.value = inputValue.value
+      return
+    }
+    if (!validNumberRegexp.test(nextValue)) {
+      return
+    }
+    let nextValueNumber = Number(nextValue)
+    if (!isEmpty(props.min) && nextValueNumber < props.min) {
+      target.value = prepareValue(props.min)
+      nextValueNumber = props.min
+    }
+    if (!isEmpty(props.max) && nextValueNumber > props.max) {
+      target.value = prepareValue(props.max)
+      nextValueNumber = props.max
+    }
+    props.onInput?.(nextValueNumber)
+  }
+  function prepareValue(value: typeof props.value): string {
+    return value === null ? '' : String(value)
   }
 </script>
 
@@ -81,16 +97,15 @@
   <Input
     v-bind="{
       ...$attrs,
-      onValueInput: handleValueInput,
-      onValueChange: handleValueChange,
-      onBlur: handleBlur,
-      onKeydown: handleKeydown,
+      // onBlur: handleBlur,
+      // onKeydown: handleKeydown,
     }"
     :value="inputValue"
+    :label="props.label"
+    :description="props.description"
     type="decimal"
-    :min="props.min"
-    :max="props.max"
-    :step="props.step"
+    @input="handleInput"
+    @blur="handleBlur"
   >
     <template
       v-if="$slots.label"
@@ -99,16 +114,16 @@
       <slot name="label" />
     </template>
     <template
-      v-if="$slots.left"
-      #left
+      v-if="$slots.leading"
+      #leading
     >
-      <slot name="left" />
+      <slot name="leading" />
     </template>
     <template
-      v-if="$slots.right"
-      #right
+      v-if="$slots.trailing"
+      #trailing
     >
-      <slot name="right" />
+      <slot name="trailing" />
     </template>
     <template
       v-if="$slots.error"

package/dist/runtime/nuxt-components.d.ts

@@ -0,0 +1,7 @@
+import type { defineNuxtLink } from 'nuxt/app'
+
+declare module 'vue' {
+  interface GlobalComponents {
+    NuxtLink: ReturnType<typeof defineNuxtLink>
+  }
+}

package/dist/runtime/utils/checkup.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @returns isEmpty('') => true
+ * @returns isEmpty([]) => true
+ * @returns isEmpty([1]) => false
+ * @returns isEmpty([null]) => false
+ * @returns isEmpty({}) => true
+ * @returns isEmpty({ key: '' }) => false
+ * @returns isEmpty(undefined) => true
+ * @returns isEmpty(null) => true
+ * @returns isEmpty(new Date()) => false
+ * @returns isEmpty(new Date('Invalid Date')) => false
+ * @returns isEmpty(true) => false
+ * @returns isEmpty(false) => false
+ * @returns isEmpty(0), 0, false
+ * @returns isEmpty(() => undefined) => false
+ * @returns isEmpty(Infinity) => false
+ * @returns isEmpty(-Infinity) => false
+ * @returns isEmpty(new Promise((resolve) => resolve(''))) => true
+ */
+export declare function isEmpty<T>(value: T): value is Extract<T, [] | null | undefined>;
+export declare function isFloat(value: number): boolean;
+export declare function isNumber(value: unknown): value is number;
+export declare function isPromise<T>(value: T): value is T extends Promise<unknown> ? T : never;
+export declare function isString(value: unknown): value is string;
+export declare function isValidDate(date: Date | number | string): boolean;
+export declare const isNonNullable: <T>(value: T) => value is NonNullable<T>;
+export declare function isElement<T>(value: T): value is Extract<T, Element>;
+export declare function isExternalLink(link: string): boolean;
+export declare function isFormData(value?: FormData | Record<string, unknown> | unknown): value is FormData;
+export declare function isFunction(value: unknown): value is (...args: unknown[]) => unknown;
+export declare function isTouchDevice(): boolean;
+//# sourceMappingURL=checkup.d.ts.map

package/dist/runtime/utils/checkup.js

@@ -0,0 +1,67 @@
+export function isEmpty(value) {
+  if (typeof value === "boolean" || typeof value === "function") {
+    return false;
+  }
+  if (typeof value === "undefined" || value === null || typeof value === "string" && value.length === 0) {
+    return true;
+  }
+  if (typeof value === "string" || typeof value === "number") {
+    return false;
+  }
+  if (Array.isArray(value) && value.length === 0) {
+    return true;
+  }
+  if (isDate(value)) {
+    return false;
+  }
+  return Object.keys(value).length === 0;
+}
+export function isFloat(value) {
+  return Number(value) === value && value % 1 !== 0;
+}
+export function isNumber(value) {
+  return typeof value === "number";
+}
+export function isPromise(value) {
+  return Boolean(value) && (typeof value === "object" || typeof value === "function") && typeof value?.then === "function";
+}
+export function isString(value) {
+  return typeof value === "string";
+}
+export function isValidDate(date) {
+  if (typeof date === "string") {
+    return Boolean(Date.parse(date));
+  }
+  if (isNaN(date)) {
+    return false;
+  }
+  return typeof date === "number" || date instanceof Date;
+}
+function isDate(value) {
+  if (Object.prototype.toString.call(value) === "[object Date]") {
+    return true;
+  }
+  return false;
+}
+export const isNonNullable = (value) => {
+  return value !== void 0 && value !== null;
+};
+export function isElement(value) {
+  return value instanceof Element;
+}
+export function isExternalLink(link) {
+  const EXTERNAL_LINK_REGEX = /^(?:https?:\/\/|mailto:|tel:)/;
+  return EXTERNAL_LINK_REGEX.test(link);
+}
+export function isFormData(value) {
+  if (!value) {
+    return false;
+  }
+  return typeof value === "object" && typeof value.append === "function" && typeof value.has === "function";
+}
+export function isFunction(value) {
+  return typeof value === "function";
+}
+export function isTouchDevice() {
+  return "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.maxTouchPoints > 0;
+}

package/package.json

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