@brickflow/ui 0.0.56 → 0.0.58

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/controls.demo.vue

@@ -0,0 +1,145 @@
+<script lang="ts">
+  export const uiDemo = {
+    description: 'Custom step buttons built with the leading and trailing slots.',
+    title: 'Custom controls',
+  }
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import InputNumber from './index.vue'
+
+  const horizontalValue = ref(20)
+  const verticalValue = ref(100)
+
+  const horizontalMin = 0
+  const horizontalMax = 25
+  const verticalMin = 0
+  const verticalMax = 120
+  const verticalStep = 5
+
+  const horizontalControlClass =
+    'inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-plain-500 transition-colors enabled:hover:bg-plain-800 enabled:hover:text-plain-100 disabled:cursor-not-allowed disabled:opacity-40'
+  const verticalControlClass =
+    'flex min-h-5 flex-1 items-center justify-center text-plain-500 transition-colors enabled:hover:bg-plain-800 enabled:hover:text-plain-100 disabled:cursor-not-allowed disabled:opacity-40'
+
+  function stepHorizontal(direction: -1 | 1): void {
+    horizontalValue.value = Math.max(horizontalMin, Math.min(horizontalMax, horizontalValue.value + direction))
+  }
+
+  function stepVertical(direction: -1 | 1): void {
+    verticalValue.value = Math.max(
+      verticalMin,
+      Math.min(verticalMax, verticalValue.value + direction * verticalStep),
+    )
+  }
+</script>
+
+<template>
+  <div class="flex max-w-sm flex-col gap-6">
+    <InputNumber
+      :value="horizontalValue"
+      align="center"
+      label="Number *"
+      description="This is a hint text to help user."
+      :min="horizontalMin"
+      :max="horizontalMax"
+      @input="horizontalValue = $event"
+    >
+      <template #leading>
+        <button
+          type="button"
+          :disabled="horizontalValue <= horizontalMin"
+          aria-label="Decrease number"
+          :class="[horizontalControlClass, '-ml-2']"
+          @click="stepHorizontal(-1)"
+        >
+          <span
+            aria-hidden="true"
+            class="text-2xl leading-none font-light"
+          >
+            −
+          </span>
+        </button>
+      </template>
+      <template #trailing>
+        <button
+          type="button"
+          :disabled="horizontalValue >= horizontalMax"
+          aria-label="Increase number"
+          :class="[horizontalControlClass, '-mr-2']"
+          @click="stepHorizontal(1)"
+        >
+          <span
+            aria-hidden="true"
+            class="text-2xl leading-none font-light"
+          >
+            +
+          </span>
+        </button>
+      </template>
+    </InputNumber>
+
+    <InputNumber
+      :value="verticalValue"
+      label="Number *"
+      description="This is a hint text to help user."
+      :step="verticalStep"
+      :min="verticalMin"
+      :max="verticalMax"
+      @input="verticalValue = $event"
+    >
+      <template #trailing>
+        <span
+          class="-mr-3 flex w-12 shrink-0 flex-col self-stretch overflow-hidden rounded-r-xl border-l border-neutral-600/20"
+        >
+          <button
+            type="button"
+            :disabled="verticalValue >= verticalMax"
+            aria-label="Increase number"
+            :class="verticalControlClass"
+            @click="stepVertical(1)"
+          >
+            <svg
+              aria-hidden="true"
+              class="size-4"
+              viewBox="0 0 16 16"
+              fill="none"
+            >
+              <path
+                d="m3 10 5-5 5 5"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+          <button
+            type="button"
+            :disabled="verticalValue <= verticalMin"
+            aria-label="Decrease number"
+            :class="[verticalControlClass, 'border-t border-neutral-600/20']"
+            @click="stepVertical(-1)"
+          >
+            <svg
+              aria-hidden="true"
+              class="size-4"
+              viewBox="0 0 16 16"
+              fill="none"
+            >
+              <path
+                d="m3 6 5 5 5-5"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+        </span>
+      </template>
+    </InputNumber>
+  </div>
+</template>

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

@@ -10,7 +10,7 @@
 
   import InputNumber from './index.vue'
 
-  const price = ref<number>(8.55)
+  const price = ref<number>(8)
   const price2 = ref<number>(12.55)
 </script>
 

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

@@ -1,5 +1,9 @@
 <script setup lang="ts" generic="T extends boolean = false">
-  import { shallowRef, watch } from 'vue'
+  import { computed, ref, shallowRef, watch } from 'vue'
+
+  import type { IconName } from '#brickflow-ui'
+
+  import type { Rule } from '../../utils/rules'
 
   import { isEmpty } from '../../utils/checkup.js'
   import Input from '../Input/index.vue'
@@ -14,7 +18,7 @@
       denominator?: number
       description?: string
       disabled?: boolean
-      icon?: string
+      icon?: IconName
       label?: string
       max?: number
       min?: number
@@ -28,9 +32,10 @@
       onTrailingIconClick?: () => void
       placeholder?: string
       readonly?: boolean
+      rules?: Rule<null | number>[]
       size?: InputProps['size']
       step?: number
-      trailingIcon?: string
+      trailingIcon?: IconName
       value: true extends NoInfer<T> ? null | number : number
       variant?: InputProps['variant']
     }>(),
@@ -55,6 +60,7 @@
       onTrailingIconClick: undefined,
       placeholder: undefined,
       readonly: false,
+      rules: undefined,
       size: undefined,
       step: 1,
       trailingIcon: undefined,
@@ -64,7 +70,17 @@
 
   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,
@@ -99,6 +115,10 @@
   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
@@ -109,7 +129,7 @@
     if (isEmpty(nextValue)) {
       if (props.nullable) {
         inputValue.value = ''
-        props.onInput?.(null as typeof props.value)
+        emitInput(null as typeof props.value)
       }
       return
     }
@@ -128,7 +148,7 @@
     if (isEmpty(nextValue) || !validNumberRegexp.test(nextValue)) {
       if (isEmpty(nextValue) && props.nullable) {
         inputValue.value = ''
-        props.onInput?.(null as typeof props.value)
+        emitInput(null as typeof props.value)
       }
       return
     }
@@ -143,7 +163,7 @@
       nextValueNumber = props.max
     }
 
-    props.onInput?.(nextValueNumber)
+    emitInput(nextValueNumber)
   }
 
   function handleKeydown(event: KeyboardEvent): void {
@@ -158,7 +178,6 @@
     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)
@@ -174,7 +193,7 @@
     }
 
     target.value = prepareValue(nextValue)
-    props.onInput?.(nextValue)
+    emitInput(nextValue)
   }
 
   function prepareValue(value: typeof props.value): string {
@@ -184,6 +203,7 @@
 
 <template>
   <Input
+    ref="inputRef"
     v-bind="{
       ...$attrs,
     }"
@@ -197,6 +217,7 @@
     :icon="props.icon"
     :placeholder="props.placeholder"
     :readonly="props.readonly"
+    :rules="inputRules"
     :size="props.size"
     :trailingIcon="props.trailingIcon"
     :type="props.denominator === 0 ? 'numeric' : 'decimal'"

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>