@brickflow/ui 0.0.55 → 0.0.57

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

@@ -1,5 +1,7 @@
 <script setup lang="ts" generic="T extends boolean = false">
-  import { shallowRef, watch } from 'vue'
+  import { computed, ref, shallowRef, watch } from 'vue'
+
+  import type { Rule } from '../../utils/rules'
 
   import { isEmpty } from '../../utils/checkup.js'
   import Input from '../Input/index.vue'
@@ -8,38 +10,75 @@
 
   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
+      rules?: Rule<null | number>[]
+      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,
+      rules: undefined,
+      size: undefined,
       step: 1,
+      trailingIcon: undefined,
+      variant: undefined,
     },
   )
 
+  type InputProps = InstanceType<typeof Input>['$props']
+
+  const inputRef = ref<InstanceType<typeof Input> | null>(null)
   const inputValue = shallowRef(prepareValue(props.value))
+  const inputRules = computed(() =>
+    props.rules?.map(
+      (rule): Rule<string> =>
+        (value) =>
+          rule(value === '' ? null : Number(value)),
+    ),
+  )
+
+  defineExpose({ validate: () => inputRef.value?.validate() ?? true })
 
   watch(
     () => props.value,
@@ -52,31 +91,66 @@
     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+)$/
 
+  function emitInput(value: typeof props.value): void {
+    props.onInput?.(value)
+  }
+
   function handleInput(rawValue: string, target: HTMLInputElement | null): void {
     if (!target) {
       return
     }
-    const nextValue = rawValue.replace(/,/, '.')
+    let nextValue = rawValue.replace(/,/, '.')
     target.value = nextValue
 
     if (isEmpty(nextValue)) {
+      if (props.nullable) {
+        inputValue.value = ''
+        emitInput(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 = ''
+        emitInput(null as typeof props.value)
+      }
       return
     }
+
     let nextValueNumber = Number(nextValue)
     if (!isEmpty(props.min) && nextValueNumber < props.min) {
       target.value = prepareValue(props.min)
@@ -86,8 +160,41 @@
       target.value = prepareValue(props.max)
       nextValueNumber = props.max
     }
-    props.onInput?.(nextValueNumber)
+
+    emitInput(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)
+    emitInput(nextValue)
   }
+
   function prepareValue(value: typeof props.value): string {
     return value === null ? '' : String(value)
   }
@@ -95,17 +202,32 @@
 
 <template>
   <Input
+    ref="inputRef"
     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"
+    :rules="inputRules"
+    :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/dist/runtime/components/TransitionSize/duration.demo.vue

@@ -0,0 +1,88 @@
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Duration',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import TransitionSize from './index.vue'
+
+  const active100 = ref(true)
+  const active500 = ref(true)
+  const active2000 = ref(true)
+</script>
+
+<template>
+  <div class="flex w-full flex-col">
+    <code class="mb-2">100</code>
+    <div class="flex w-full">
+      <TransitionSize
+        :duration="100"
+        dimension="width"
+      >
+        <div
+          v-if="active100"
+          class="w-full rounded-xl bg-slate-700 p-2 text-center"
+        >
+          Text
+        </div>
+      </TransitionSize>
+      <button
+        type="button"
+        class="ml-2 w-30 shrink-0 cursor-pointer rounded-xl px-3 py-2"
+        :class="active100 ? 'bg-blue-500' : 'bg-blue-800'"
+        @click="active100 = !active100"
+      >
+        {{ active100 ? 'Hide' : 'Show' }}
+      </button>
+    </div>
+
+    <code class="mt-4 mb-2">500</code>
+    <div class="flex">
+      <TransitionSize
+        :duration="500"
+        dimension="width"
+      >
+        <div
+          v-if="active500"
+          class="w-full rounded-xl bg-slate-700 p-2 text-center whitespace-nowrap"
+        >
+          Text
+        </div>
+      </TransitionSize>
+      <button
+        type="button"
+        class="ml-2 w-30 shrink-0 cursor-pointer rounded-xl px-3 py-2"
+        :class="active500 ? 'bg-blue-500' : 'bg-blue-800'"
+        @click="active500 = !active500"
+      >
+        {{ active500 ? 'Hide' : 'Show' }}
+      </button>
+    </div>
+
+    <code class="mt-4 mb-2">2000</code>
+    <div class="flex w-full">
+      <TransitionSize
+        :duration="2000"
+        dimension="width"
+      >
+        <div
+          v-if="active2000"
+          class="w-full rounded-xl bg-slate-700 p-2 text-center"
+        >
+          Text
+        </div>
+      </TransitionSize>
+      <button
+        type="button"
+        class="ml-2 w-30 shrink-0 cursor-pointer rounded-xl px-3 py-2"
+        :class="active2000 ? 'bg-blue-500' : 'bg-blue-800'"
+        @click="active2000 = !active2000"
+      >
+        {{ active2000 ? 'Hide' : 'Show' }}
+      </button>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/TransitionSize/flex.demo.vue

@@ -0,0 +1,112 @@
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Flex Parent with Gap',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import TransitionSize from './index.vue'
+
+  const baseStartRef = ref<HTMLElement | null>(null)
+  const baseCenterRef = ref<HTMLElement | null>(null)
+  const baseEndRef = ref<HTMLElement | null>(null)
+  const activeStart = ref(true)
+  const activeCenter = ref(true)
+  const activeEnd = ref(true)
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <code class="mb-2">flexDirection="start"</code>
+    <div
+      ref="baseStartRef"
+      class="flex grow basis-1 gap-10"
+    >
+      <TransitionSize
+        :duration="1000"
+        :flexParent="baseStartRef"
+        flexDirection="start"
+        dimension="width"
+      >
+        <div
+          v-if="activeStart"
+          class="h-10 grow rounded-xl bg-slate-700 p-2 text-center"
+        >
+          Text
+        </div>
+      </TransitionSize>
+      <div class="h-10 grow rounded-xl bg-slate-800 p-2 text-center">Text</div>
+      <div class="h-10 grow rounded-xl bg-slate-800 p-2 text-center">Text</div>
+    </div>
+    <button
+      type="button"
+      class="mt-3 w-30 shrink-0 cursor-pointer rounded-xl px-3 py-2"
+      :class="activeStart ? 'bg-blue-500' : 'bg-blue-800'"
+      @click="activeStart = !activeStart"
+    >
+      {{ activeStart ? 'Hide' : 'Show' }}
+    </button>
+
+    <code class="mt-6 mb-2">flexDirection="center"</code>
+    <div
+      ref="baseCenterRef"
+      class="flex grow basis-1 gap-10"
+    >
+      <div class="h-10 grow rounded-xl bg-slate-800 p-2 text-center">Text</div>
+      <TransitionSize
+        :duration="1000"
+        :flexParent="baseCenterRef"
+        flexDirection="center"
+        dimension="width"
+      >
+        <div
+          v-if="activeCenter"
+          class="h-10 grow rounded-xl bg-slate-700 p-2 text-center"
+        >
+          Text
+        </div>
+      </TransitionSize>
+      <div class="h-10 grow rounded-xl bg-slate-800 p-2 text-center">Text</div>
+    </div>
+    <button
+      type="button"
+      class="mt-3 w-30 shrink-0 cursor-pointer rounded-xl px-3 py-2"
+      :class="activeCenter ? 'bg-blue-500' : 'bg-blue-800'"
+      @click="activeCenter = !activeCenter"
+    >
+      {{ activeCenter ? 'Hide' : 'Show' }}
+    </button>
+
+    <code class="mt-6 mb-2">flexDirection="end"</code>
+    <div
+      ref="baseEndRef"
+      class="flex grow basis-1 gap-10"
+    >
+      <div class="h-10 grow rounded-xl bg-slate-800 p-2 text-center">Text</div>
+      <div class="h-10 grow rounded-xl bg-slate-800 p-2 text-center">Text</div>
+      <TransitionSize
+        :duration="1000"
+        :flexParent="baseEndRef"
+        flexDirection="end"
+        dimension="width"
+      >
+        <div
+          v-if="activeEnd"
+          class="h-10 grow rounded-xl bg-slate-700 p-2 text-center"
+        >
+          Text
+        </div>
+      </TransitionSize>
+    </div>
+    <button
+      type="button"
+      class="mt-3 w-30 shrink-0 cursor-pointer rounded-xl px-3 py-2"
+      :class="activeEnd ? 'bg-blue-500' : 'bg-blue-800'"
+      @click="activeEnd = !activeEnd"
+    >
+      {{ activeEnd ? 'Hide' : 'Show' }}
+    </button>
+  </div>
+</template>

package/dist/runtime/components/TransitionSize/height.demo.vue

@@ -0,0 +1,88 @@
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Height',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import TransitionSize from './index.vue'
+
+  const activeHeightFixed = ref(true)
+  const activeHeightContent = ref(true)
+  const activeHeightFull = ref(true)
+</script>
+
+<template>
+  <div class="flex w-full gap-4">
+    <div class="flex grow basis-1 flex-col">
+      <label class="mb-2">Fixed height</label>
+      <TransitionSize
+        :duration="1000"
+        dimension="height"
+      >
+        <div
+          v-if="activeHeightFixed"
+          class="h-40 w-full rounded-xl bg-slate-700 p-2 text-center"
+        >
+          Text
+        </div>
+      </TransitionSize>
+      <button
+        type="button"
+        class="mt-3 w-full shrink-0 cursor-pointer rounded-xl px-3 py-2"
+        :class="activeHeightFixed ? 'bg-blue-500' : 'bg-blue-800'"
+        @click="activeHeightFixed = !activeHeightFixed"
+      >
+        {{ activeHeightFixed ? 'Hide' : 'Show' }}
+      </button>
+    </div>
+
+    <div class="flex grow basis-1 flex-col">
+      <label class="mb-2">Content based height</label>
+      <TransitionSize
+        :duration="1000"
+        dimension="height"
+      >
+        <div
+          v-if="activeHeightContent"
+          class="rounded-xl bg-slate-700 p-2 text-center"
+        >
+          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur nihil possimus sunt ipsum rerum maiores
+        </div>
+      </TransitionSize>
+      <button
+        type="button"
+        class="mt-3 w-full shrink-0 cursor-pointer rounded-xl px-3 py-2"
+        :class="activeHeightContent ? 'bg-blue-500' : 'bg-blue-800'"
+        @click="activeHeightContent = !activeHeightContent"
+      >
+        {{ activeHeightContent ? 'Hide' : 'Show' }}
+      </button>
+    </div>
+
+    <div class="flex h-auto grow basis-1 flex-col self-stretch">
+      <label class="mb-2">Full height</label>
+      <TransitionSize
+        :duration="1000"
+        dimension="height"
+      >
+        <div
+          v-if="activeHeightFull"
+          class="w-full grow rounded-xl bg-slate-700 p-2 text-center"
+        >
+          Text
+        </div>
+      </TransitionSize>
+      <button
+        type="button"
+        class="mt-3 w-full shrink-0 cursor-pointer rounded-xl px-3 py-2"
+        :class="activeHeightFull ? 'bg-blue-500' : 'bg-blue-800'"
+        @click="activeHeightFull = !activeHeightFull"
+      >
+        {{ activeHeightFull ? 'Hide' : 'Show' }}
+      </button>
+    </div>
+  </div>
+</template>