@prefecthq/prefect-ui-library 2.9.18 → 2.10.0

package/src/schemas/components/SchemaFormPropertyArrayItem.vue

@@ -0,0 +1,93 @@
+<template>
+  <p-content class="schema-form-property-array-item" secondary>
+    <div class="schema-form-property-array-item__control">
+      <PIcon icon="DragHandle" class="schema-form-property-array-item__handle" @mousedown="emit('handleDown')" @mouseup="emit('handleUp')" />
+
+      <component :is="input.component" v-bind="input.props" />
+
+      <SchemaFormPropertyMenu v-model:value="value" :kind :property @update:kind="setKind">
+        <template v-if="!isFirst">
+          <p-overflow-menu-item icon="ArrowSmallUpIcon" label="Move to top" @click="emit('moveToTop')" />
+        </template>
+        <template v-if="!isLast">
+          <p-overflow-menu-item icon="ArrowSmallDownIcon" label="Move to bottom" @click="emit('moveToBottom')" />
+        </template>
+
+        <p-overflow-menu-item icon="TrashIcon" label="Delete" @click="emit('deleteItem')" />
+      </SchemaFormPropertyMenu>
+    </div>
+    <p v-if="errorMessage" class="schema-form-property-array-item__error">
+      {{ errorMessage }}
+    </p>
+  </p-content>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+  import SchemaFormPropertyMenu from '@/schemas/components/SchemaFormPropertyMenu.vue'
+  import { usePrefectKindValue } from '@/schemas/compositions/usePrefectKindValue'
+  import { useSchemaPropertyInput } from '@/schemas/compositions/useSchemaPropertyInput'
+  import { SchemaProperty } from '@/schemas/types/schema'
+  import { SchemaValue, getPrefectKindFromValue } from '@/schemas/types/schemaValues'
+  import { SchemaValueError } from '@/schemas/types/schemaValuesValidationResponse'
+  import { getAllRootSchemaPropertyErrors, getSchemaPropertyError } from '@/schemas/utilities/errors'
+
+  const props = defineProps<{
+    property: SchemaProperty,
+    value: SchemaValue,
+    isLast: boolean,
+    isFirst: boolean,
+    errors: SchemaValueError[],
+  }>()
+
+  const emit = defineEmits<{
+    'update:value': [SchemaValue],
+    'moveToTop': [],
+    'moveToBottom': [],
+    'deleteItem': [],
+    'handleDown': [],
+    'handleUp': [],
+  }>()
+
+  const value = computed({
+    get() {
+      return props.value
+    },
+    set(value) {
+      emit('update:value', value)
+    },
+  })
+
+  const kind = computed(() => getPrefectKindFromValue(() => props.value))
+  const { input } = useSchemaPropertyInput(() => props.property, value, () => props.errors)
+  const { errors: propertyErrors, setKind } = usePrefectKindValue({ value, property: () => props.property })
+
+  const errorMessage = computed(() => {
+    const allErrors = propertyErrors.value.length ? propertyErrors.value : props.errors
+    const errors = getAllRootSchemaPropertyErrors(allErrors)
+
+    const { message } = getSchemaPropertyError(errors)
+
+    return message
+  })
+</script>
+
+<style>
+.schema-form-property-array-item__control { @apply
+  grid
+  gap-2
+  items-start;
+  grid-template-columns: min-content 1fr min-content;
+}
+
+.schema-form-property-array-item__error { @apply
+  text-sm
+  text-invalid;
+  margin-left: var(--schema-form-property-array-item-indent);
+}
+
+.schema-form-property-array-item__handle { @apply
+  cursor-grab
+  mt-2
+}
+</style>

package/src/schemas/components/SchemaFormPropertyArrayList.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="schema-form-property-array-list">
+    <template v-if="empty">
+      <p class="schema-form-property-array-list__empty">
+        No items in this list
+      </p>
+    </template>
+    <p-draggable-list v-model="value" v-bind="{ allowCreate, generator, state }" allow-delete>
+      <template #item="{ index, handleDown, handleUp, deleteItem, moveToTop, moveToBottom }">
+        <SchemaFormPropertyArrayItem
+          v-model:value="value[index]"
+          :property="getPropertyForIndex(index)"
+          :errors="getSchemaPropertyErrors(index, errors)"
+          :is-first="isFirstIndex(index)"
+          :is-last="isLastIndex(index)"
+          @delete-item="deleteItem"
+          @handle-down="handleDown"
+          @handle-up="handleUp"
+          @move-to-top="moveToTop"
+          @move-to-bottom="moveToBottom"
+        />
+      </template>
+    </p-draggable-list>
+    <template v-if="showMaxItemsMessage">
+      <p class="schema-form-property-array-list__max">
+        List can only have {{ property.maxItems }} items
+      </p>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { State, isArray } from '@prefecthq/prefect-design'
+  import { computed } from 'vue'
+  import SchemaFormPropertyArrayItem from '@/schemas/components/SchemaFormPropertyArrayItem.vue'
+  import { useSchemaProperty } from '@/schemas/compositions/useSchemaProperty'
+  import { SchemaProperty } from '@/schemas/types/schema'
+  import { SchemaValueError } from '@/schemas/types/schemaValuesValidationResponse'
+  import { getSchemaPropertyErrors } from '@/schemas/utilities/errors'
+
+  const props = defineProps<{
+    property: SchemaProperty & { type: 'array' },
+    value: unknown[] | undefined,
+    errors: SchemaValueError[],
+    state: State,
+  }>()
+
+  const { property } = useSchemaProperty(() => props.property)
+  const empty = computed(() => !props.value?.length)
+
+  const emit = defineEmits<{
+    'update:value': [unknown[] | undefined],
+  }>()
+
+  const value = computed({
+    get() {
+      return props.value ?? []
+    },
+    set(value) {
+      if (value.length === 0) {
+        emit('update:value', undefined)
+        return
+      }
+
+      emit('update:value', value)
+    },
+  })
+
+  const allowCreate = computed(() => {
+    const max = props.property.maxItems ?? Infinity
+    const current = props.value?.length ?? 0
+
+    return current < max
+  })
+
+  const showMaxItemsMessage = computed(() => {
+    const max = props.property.maxItems ?? Infinity
+    const current = props.value?.length ?? 0
+
+    return current >= max
+  })
+
+  function getPropertyForIndex(index: number): SchemaProperty {
+    if (isArray(property.value.prefixItems)) {
+      return property.value.prefixItems[index] ?? {}
+    }
+
+    if (isArray(property.value.items)) {
+      return property.value.items[index] ?? {}
+    }
+
+    return property.value.items ?? {}
+  }
+
+  function generator(): unknown {
+    const index = value.value.length
+    const property = getPropertyForIndex(index)
+
+    return property.default
+  }
+
+  function isFirstIndex(index: number): boolean {
+    return index === 0
+  }
+
+  function isLastIndex(index: number): boolean {
+    return index === (props.value?.length ?? 0) - 1
+  }
+</script>
+
+<style>
+.schema-form-property-array-list {
+  --schema-form-property-array-list-item-indent: 30px;
+}
+
+.schema-form-property-array-list .p-draggable-list__item { @apply
+  block
+}
+
+.schema-form-property-array-list .p-draggable-list > .p-button {
+  margin-left: var(--schema-form-property-array-list-item-indent);
+}
+
+.schema-form-property-array-list__empty { @apply
+  text-subdued
+  text-sm
+  italic;
+  margin-left: var(--schema-form-property-array-list-item-indent);
+}
+
+.schema-form-property-array-list__max { @apply
+  text-subdued
+  text-sm;
+  margin-left: var(--schema-form-property-array-list-item-indent);
+}
+</style>

package/src/schemas/components/SchemaFormPropertyBlockDocument.vue

@@ -0,0 +1,39 @@
+<template>
+  <BlockDocumentInput v-model="value" :block-type-slug="property.blockTypeSlug" :state="state" class="schema-form-property-block-document" />
+</template>
+
+<script lang="ts" setup>
+  import { State } from '@prefecthq/prefect-design'
+  import { computed } from 'vue'
+  import BlockDocumentInput from '@/components/BlockDocumentInput.vue'
+  import { SchemaProperty } from '@/schemas/types/schema'
+  import { BlockDocumentReferenceValue } from '@/schemas/types/schemaValues'
+  import { Require } from '@/types/utilities'
+  import { isNullish } from '@/utilities/variables'
+
+  const props = defineProps<{
+    property: Require<SchemaProperty, 'blockTypeSlug'>,
+    value: BlockDocumentReferenceValue | undefined,
+    state: State,
+  }>()
+
+  const emit = defineEmits<{
+    'update:value': [BlockDocumentReferenceValue | undefined],
+  }>()
+
+  const value = computed({
+    get() {
+      return props.value?.$ref ?? null
+    },
+    set(value) {
+      if (isNullish(value)) {
+        emit('update:value', undefined)
+        return
+      }
+
+      emit('update:value', {
+        $ref: value,
+      })
+    },
+  })
+</script>

package/src/schemas/components/SchemaFormPropertyBoolean.vue

@@ -0,0 +1,20 @@
+<template>
+  <p-toggle v-model="value" :state="state" />
+</template>
+
+<script lang="ts" setup>
+  import { State, isDefined } from '@prefecthq/prefect-design'
+  import { SchemaProperty } from '@/schemas/types/schema'
+  import { asType } from '@/utilities/types'
+
+  const props = defineProps<{
+    property: SchemaProperty & { type: 'boolean' },
+    state: State,
+  }>()
+
+  const value = defineModel<boolean | undefined>('value', { default: undefined })
+
+  if (!isDefined(value.value)) {
+    value.value = asType(props.property.default, Boolean) ?? false
+  }
+</script>

package/src/schemas/components/SchemaFormPropertyDate.vue

@@ -0,0 +1,44 @@
+<template>
+  <p-date-input v-model="value" clearable />
+</template>
+
+<script lang="ts" setup>
+  import { isNotNullish } from '@prefecthq/prefect-design'
+  import { format, parse, startOfToday } from 'date-fns'
+  import { computed } from 'vue'
+  import { isInvalidDate } from '@/utilities'
+
+  const props = defineProps<{
+    value: string | null | undefined,
+  }>()
+
+  const emit = defineEmits<{
+    'update:value': [string | null | undefined],
+  }>()
+
+  const dateFormat = 'yyyy-MM-dd'
+
+  const value = computed({
+    get() {
+      if (isNotNullish(props.value)) {
+        const parsed = parse(props.value, dateFormat, startOfToday())
+
+        if (isInvalidDate(parsed)) {
+          return undefined
+        }
+
+        return parsed
+      }
+
+      return props.value
+    },
+    set(value) {
+      if (isNotNullish(value)) {
+        emit('update:value', format(value, dateFormat))
+        return
+      }
+
+      emit('update:value', value)
+    },
+  })
+</script>

package/src/schemas/components/SchemaFormPropertyDateTime.vue

@@ -0,0 +1,43 @@
+<template>
+  <DateInput v-model="value" show-time clearable />
+</template>
+
+<script lang="ts" setup>
+  import { isNotNullish } from '@prefecthq/prefect-design'
+  import { formatISO, parseISO } from 'date-fns'
+  import { computed } from 'vue'
+  import DateInput from '@/components/DateInput.vue'
+  import { isInvalidDate } from '@/utilities'
+
+  const props = defineProps<{
+    value: string | null | undefined,
+  }>()
+
+  const emit = defineEmits<{
+    'update:value': [string | null | undefined],
+  }>()
+
+  const value = computed({
+    get() {
+      if (isNotNullish(props.value)) {
+        const parsed = parseISO(props.value)
+
+        if (isInvalidDate(parsed)) {
+          return undefined
+        }
+
+        return parsed
+      }
+
+      return props.value
+    },
+    set(value) {
+      if (isNotNullish(value)) {
+        emit('update:value', formatISO(value))
+        return
+      }
+
+      emit('update:value', value)
+    },
+  })
+</script>

package/src/schemas/components/SchemaFormPropertyErrors.vue

@@ -0,0 +1,41 @@
+<template>
+  <ul v-if="errors.length" class="schema-form-property-errors">
+    <template v-for="(error, index) in errors" :key="index">
+      <template v-if="isString(error)">
+        <li>{{ error }}</li>
+      </template>
+
+      <template v-if="isSchemaValuePropertyError(error)">
+        <li>
+          <span>{{ error.property }}</span>
+          <SchemaFormPropertyErrors :errors="error.errors" />
+        </li>
+      </template>
+
+      <template v-if="isSchemaValueIndexError(error)">
+        <li>
+          <span>Index {{ error.index }}</span>
+          <SchemaFormPropertyErrors :errors="error.errors" />
+        </li>
+      </template>
+    </template>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+  import { SchemaValueError, isSchemaValuePropertyError, isSchemaValueIndexError } from '@/schemas/types/schemaValuesValidationResponse'
+  import { isString } from '@/utilities'
+
+  defineProps<{
+    errors: SchemaValueError[],
+  }>()
+</script>
+
+<style>
+.schema-form-property-errors { @apply
+  text-invalid
+  text-sm
+  list-disc
+  ml-4
+}
+</style>

package/src/schemas/components/SchemaFormPropertyInput.vue

@@ -0,0 +1,124 @@
+<template>
+  <component :is="input.component" v-bind="input.props" class="schema-form-property-input" />
+</template>
+
+<script lang="ts" setup>
+  import { PNumberInput, State } from '@prefecthq/prefect-design'
+  import { computed } from 'vue'
+  import SchemaFormPropertyArray from '@/schemas/components/SchemaFormPropertyArray.vue'
+  import SchemaFormPropertyBlockDocument from '@/schemas/components/SchemaFormPropertyBlockDocument.vue'
+  import SchemaFormPropertyBoolean from '@/schemas/components/SchemaFormPropertyBoolean.vue'
+  import SchemaFormPropertyInteger from '@/schemas/components/SchemaFormPropertyInteger.vue'
+  import SchemaFormPropertyNull from '@/schemas/components/SchemaFormPropertyNull.vue'
+  import SchemaFormPropertyObject from '@/schemas/components/SchemaFormPropertyObject.vue'
+  import SchemaFormPropertyString from '@/schemas/components/SchemaFormPropertyString.vue'
+  import SchemaFormPropertyUnknown from '@/schemas/components/SchemaFormPropertyUnknown.vue'
+  import { useSchemaProperty } from '@/schemas/compositions/useSchemaProperty'
+  import { SchemaProperty, isPropertyWith, isSchemaPropertyType } from '@/schemas/types/schema'
+  import { SchemaValue, asBlockDocumentReferenceValue } from '@/schemas/types/schemaValues'
+  import { SchemaValueError } from '@/schemas/types/schemaValuesValidationResponse'
+  import { withProps } from '@/utilities/components'
+  import { asType } from '@/utilities/types'
+
+  const props = defineProps<{
+    property: SchemaProperty,
+    value: SchemaValue,
+    errors: SchemaValueError[],
+    state: State,
+  }>()
+
+  const emit = defineEmits<{
+    'update:value': [SchemaValue],
+  }>()
+
+  const { property } = useSchemaProperty(() => props.property)
+
+  const input = computed(() => {
+    const { type } = property.value
+    const { value } = props
+
+    if (isPropertyWith(property.value, 'blockTypeSlug')) {
+      return withProps(SchemaFormPropertyBlockDocument, {
+        property: property.value,
+        state: props.state,
+        value: asBlockDocumentReferenceValue(value),
+        'onUpdate:value': (value) => emit('update:value', value),
+      })
+    }
+
+    if (isSchemaPropertyType(type, 'boolean')) {
+      return withProps(SchemaFormPropertyBoolean, {
+        property: { ...property.value, type },
+        value: asType(value, Boolean),
+        state: props.state,
+        'onUpdate:value': (value) => emit('update:value', asType(value, Boolean)),
+      })
+    }
+
+    if (isSchemaPropertyType(type, 'string')) {
+      return withProps(SchemaFormPropertyString, {
+        property: { ...property.value, type },
+        value: asType(value, String),
+        state: props.state,
+        'onUpdate:value': (value) => emit('update:value', asType(value, String)),
+      })
+    }
+
+    if (isSchemaPropertyType(type, 'integer')) {
+      return withProps(SchemaFormPropertyInteger, {
+        property: { ...property.value, type },
+        value: asType(value, Number),
+        state: props.state,
+        'onUpdate:value': (value) => emit('update:value', asType(value, Number)),
+      })
+    }
+
+    if (isSchemaPropertyType(type, 'number')) {
+      return withProps(PNumberInput, {
+        modelValue: asType(value, Number),
+        step: '0.01',
+        state: props.state,
+        'onUpdate:modelValue': (value) => emit('update:value', asType(value, Number)),
+      })
+    }
+
+    if (isSchemaPropertyType(type, 'array')) {
+      return withProps(SchemaFormPropertyArray, {
+        property: { ...property.value, type },
+        value: asType(value, Array),
+        errors: props.errors,
+        state: props.state,
+        'onUpdate:value': (value) => emit('update:value', asType(value, Array)),
+      })
+    }
+
+    if (isSchemaPropertyType(type, 'object')) {
+      return withProps(SchemaFormPropertyObject, {
+        property: { ...property.value, type },
+        values: asType(value, Object),
+        errors: props.errors,
+        'onUpdate:values': (value) => emit('update:value', asType(value, Object)),
+      })
+    }
+
+    if (isSchemaPropertyType(type, 'null')) {
+      return withProps(SchemaFormPropertyNull, {
+        property: { ...property.value, type },
+        value: null,
+        'onUpdate:value': (value) => emit('update:value', value),
+      })
+    }
+
+    if (isSchemaPropertyType(type, undefined)) {
+      return withProps(SchemaFormPropertyUnknown, {
+        property: { ...property.value, type },
+        value: value,
+        state: props.state,
+        'onUpdate:value': (value) => emit('update:value', value),
+      })
+    }
+
+    const exhaustive: never = type
+    throw new Error(`SchemaFormPropertyInput missing case for ${exhaustive}`)
+  })
+</script>

package/src/schemas/components/SchemaFormPropertyInteger.vue

@@ -0,0 +1,42 @@
+<template>
+  <component :is="input?.component" v-bind="input?.props" class="schema-form-property-integer" />
+</template>
+
+<script lang="ts" setup>
+  import { PCombobox, PNumberInput, State } from '@prefecthq/prefect-design'
+  import { computed } from 'vue'
+  import { useSchemaProperty } from '@/schemas/compositions/useSchemaProperty'
+  import { SchemaProperty } from '@/schemas/types/schema'
+  import { isNumber, withProps } from '@/utilities'
+  import { asType } from '@/utilities/types'
+
+  const props = defineProps<{
+    property: SchemaProperty & { type: 'integer' },
+    value: number | null | undefined,
+    state: State,
+  }>()
+
+  const emit = defineEmits<{
+    'update:value': [number | null | undefined],
+  }>()
+
+  const { property } = useSchemaProperty(() => props.property)
+
+  const input = computed(() => {
+    if (property.value.enum) {
+      return withProps(PCombobox, {
+        modelValue: props.value,
+        state: props.state,
+        options: property.value.enum.filter(isNumber),
+        'onUpdate:modelValue': (value) => emit('update:value', asType(value, Number)),
+      })
+    }
+
+    return withProps(PNumberInput, {
+      modelValue: asType(props.value, Number),
+      step: '1',
+      state: props.state,
+      'onUpdate:modelValue': value => emit('update:value', asType(value, Number)),
+    })
+  })
+</script>

package/src/schemas/components/SchemaFormPropertyKindJinja.vue

@@ -0,0 +1,36 @@
+<template>
+  <p-content class="schema-form-property-kind-jinja">
+    <p-code-input v-model="value" lang="jinja" :state="state" show-line-numbers />
+    <SchemaFormPropertyErrors :errors="errors" />
+  </p-content>
+</template>
+
+<script lang="ts" setup>
+  import { State } from '@prefecthq/prefect-design'
+  import { computed } from 'vue'
+  import SchemaFormPropertyErrors from '@/schemas/components/SchemaFormPropertyErrors.vue'
+  import { PrefectKindJinja } from '@/schemas/types/schemaValues'
+  import { SchemaValueError } from '@/schemas/types/schemaValuesValidationResponse'
+
+  const props = defineProps<{
+    value: PrefectKindJinja,
+    errors: SchemaValueError[],
+    state: State,
+  }>()
+
+  const emit = defineEmits<{
+    'update:value': [PrefectKindJinja],
+  }>()
+
+  const value = computed({
+    get() {
+      return props.value.template
+    },
+    set(template) {
+      emit('update:value', {
+        __prefect_kind: 'jinja',
+        template,
+      })
+    },
+  })
+</script>

package/src/schemas/components/SchemaFormPropertyKindJson.vue

@@ -0,0 +1,47 @@
+<template>
+  <p-content secondary class="schema-form-property-kind-json">
+    <p-code-input v-model="value" lang="json" :state="state" show-line-numbers />
+    <SchemaFormPropertyErrors :errors="childErrors" />
+  </p-content>
+</template>
+
+<script lang="ts" setup>
+  import { State } from '@prefecthq/prefect-design'
+  import { computed } from 'vue'
+  import SchemaFormPropertyErrors from '@/schemas/components/SchemaFormPropertyErrors.vue'
+  import { PrefectKindJson } from '@/schemas/types/schemaValues'
+  import { SchemaValueError } from '@/schemas/types/schemaValuesValidationResponse'
+  import { getAllChildSchemaPropertyErrors } from '@/schemas/utilities/errors'
+
+  const props = defineProps<{
+    value: PrefectKindJson,
+    errors: SchemaValueError[],
+    state: State,
+  }>()
+
+  const emit = defineEmits<{
+    'update:value': [PrefectKindJson],
+  }>()
+
+  const childErrors = computed(() => getAllChildSchemaPropertyErrors(props.errors))
+
+  const value = computed({
+    get() {
+      return props.value.value
+    },
+    set(value) {
+      if (value?.length === 0) {
+        emit('update:value', {
+          __prefect_kind: 'json',
+          value: undefined,
+        })
+        return
+      }
+
+      emit('update:value', {
+        __prefect_kind: 'json',
+        value,
+      })
+    },
+  })
+</script>