@globalbrain/sefirot 4.34.1 → 4.35.1

package/lib/blocks/lens/fields/NumberField.ts

@@ -0,0 +1,32 @@
+import { type TableCell } from '../../../composables/Table'
+import { type NumberFieldData } from '../FieldData'
+import { type FilterOperator } from '../FilterOperator'
+import { type FilterInput } from '../filter-inputs/FilterInput'
+import { NumberFilterInput } from '../filter-inputs/NumberFilterInput'
+import { Field } from './Field'
+
+export class NumberField extends Field<NumberFieldData> {
+  override tableCell(v: any, _r: any): TableCell {
+    return {
+      type: 'number',
+      value: v
+    }
+  }
+
+  override availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
+    const number = new NumberFilterInput()
+
+    return {
+      '=': number,
+      '!=': number
+    }
+  }
+
+  override dataListItemComponent(): any {
+    throw new Error('Not implemented.')
+  }
+
+  override formInputComponent() {
+    throw new Error('Not implemented.')
+  }
+}

package/lib/blocks/lens/fields/RelatedManyField.ts

@@ -0,0 +1,62 @@
+import { type TableCell } from '../../../composables/Table'
+import { type RelatedManyFieldData } from '../FieldData'
+import { type FilterOperator } from '../FilterOperator'
+import { type ResourceFetcher } from '../ResourceFetcher'
+import { type FilterInput } from '../filter-inputs/FilterInput'
+import { SelectFilterInput } from '../filter-inputs/SelectFilterInput'
+import { Field } from './Field'
+
+export class RelatedManyField extends Field<RelatedManyFieldData> {
+  fetcher: ResourceFetcher
+
+  constructor(ctx: any, data: RelatedManyFieldData, fetcher: ResourceFetcher) {
+    super(ctx, data)
+    this.fetcher = fetcher
+  }
+
+  override tableCell(v: any, _r: any): TableCell {
+    return {
+      type: 'pills',
+      pills: v.map((item: any) => ({
+        label: item[this.data.title],
+        value: item[this.data.filterKey]
+      }))
+    }
+  }
+
+  override availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
+    const method = this.data.resourceEndpointMethod
+    const url = this.data.resourceEndpointPath
+    const key = this.data.resourceEndpointDataKey
+
+    if (!url) {
+      return {}
+    }
+
+    const optionsResolver = async () => {
+      const res = await this.fetcher(method, url)
+      const data = key ? res[key] : res
+      return data.map((item: any) => ({
+        value: item[this.data.filterKey],
+        label: item[this.data.resourceTitle]
+      }))
+    }
+
+    const selectOne = new SelectFilterInput().options(optionsResolver)
+    const selectMany = new SelectFilterInput().options(optionsResolver).multiple()
+
+    return {
+      '=': selectOne,
+      '!=': selectOne,
+      'in': selectMany
+    }
+  }
+
+  override dataListItemComponent(): any {
+    throw new Error('Not implemented.')
+  }
+
+  override formInputComponent() {
+    throw new Error('Not implemented.')
+  }
+}

package/lib/blocks/lens/fields/SelectField.ts

@@ -0,0 +1,198 @@
+import { xor } from 'lodash-es'
+import { h } from 'vue'
+import SInputCheckboxes from '../../../components/SInputCheckboxes.vue'
+import SInputDropdown from '../../../components/SInputDropdown.vue'
+import SInputRadios from '../../../components/SInputRadios.vue'
+import SState from '../../../components/SState.vue'
+import { type DropdownSection } from '../../../composables/Dropdown'
+import { type TableCell } from '../../../composables/Table'
+import { type SelectFieldData, type SelectFieldDataOption } from '../FieldData'
+import { type FilterOperator } from '../FilterOperator'
+import { type FilterInput } from '../filter-inputs/FilterInput'
+import { SelectFilterInput } from '../filter-inputs/SelectFilterInput'
+import { Field } from './Field'
+
+export class SelectField extends Field<SelectFieldData> {
+  override async tableFilterMenu(filters: any[], onFilterUpdated: (filters: any[]) => void): Promise<DropdownSection | null> {
+    const selected = this.inFilterValueFor(this.data.key, filters)
+
+    const options = this.data.options.map((o) => ({
+      label: this.labelForOption(o),
+      value: o.value
+    }))
+
+    return {
+      type: 'filter',
+      search: false,
+      selected,
+      options,
+      onClick: (v) => { onFilterUpdated?.([this.data.key, 'in', xor(selected, [v])]) }
+    }
+  }
+
+  override tableCell(v: any, _r: any): TableCell {
+    if (v === null) {
+      return { type: 'text', value: null }
+    }
+
+    switch (this.data.displayAs) {
+      case 'state':
+        return this.tableCellState(v, _r)
+      case 'text':
+        return this.tableCellText(v, _r)
+      default:
+        throw new Error(`Unknown displayAs type: ${this.data.displayAs}`)
+    }
+  }
+
+  protected tableCellText(v: any, _r: any): TableCell {
+    v = Array.isArray(v) ? v : [v]
+
+    v = this.optionsForValues(v).map((o) => this.labelForOption(o)).join(', ')
+
+    return {
+      type: 'text',
+      value: v
+    }
+  }
+
+  protected tableCellState(v: any, _r: any): TableCell {
+    if (this.data.multiple) {
+      throw new Error('Displaying select field as state with multiple option is not supported.')
+    }
+
+    const option = this.optionForValue(v)
+
+    return {
+      type: 'state',
+      mode: option.mode,
+      label: this.labelForOption(option)
+    }
+  }
+
+  override availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
+    const options = this.data.options.map((o) => ({
+      label: this.labelForOption(o),
+      value: o.value
+    }))
+
+    const selectOne = new SelectFilterInput().options(options)
+    const selectMany = new SelectFilterInput().options(options).multiple()
+
+    return {
+      '=': selectOne,
+      '!=': selectOne,
+      'in': selectMany
+    }
+  }
+
+  override dataListItemComponent(): any {
+    return this.defineDataListItemComponent((value) => {
+      if (value === null) {
+        return null
+      }
+
+      switch (this.data.displayAs) {
+        case 'state':
+          return this.renderDataListItemValueForState(value)
+        case 'text':
+          return this.renderDataListItemValueForText(value)
+        default:
+          throw new Error(`Unknown displayAs type: ${this.data.displayAs}`)
+      }
+    })
+  }
+
+  protected renderDataListItemValueForState(value: any): any {
+    if (this.data.multiple) {
+      throw new Error('Displaying select field as state with multiple option is not supported.')
+    }
+
+    const option = this.optionForValue(value)
+
+    return h(SState, {
+      mode: option.mode,
+      label: this.labelForOption(option)
+    })
+  }
+
+  protected renderDataListItemValueForText(value: any): any {
+    if (this.data.multiple) {
+      value = Array.isArray(value) ? value : [value]
+    }
+
+    return this.optionsForValues(value).map((o) => this.labelForOption(o)).join(', ')
+  }
+
+  override inputEmptyValue(): any {
+    return this.data.multiple ? [] : null
+  }
+
+  override formInputComponent(): any {
+    switch (this.data.inputAs) {
+      case 'dropdown':
+        return this.defineDropdownInputComponent()
+      case 'radio':
+        return this.defineRadioInputComponent()
+    }
+  }
+
+  defineDropdownInputComponent(): any {
+    return this.defineFormInputComponent((props, { emit }) => {
+      return () => h(SInputDropdown, {
+        'size': 'md',
+        'label': this.formInputLabel(),
+        'placeholder': this.placeholder() || undefined,
+        'help': this.help() || undefined,
+        'options': this.data.options.map((o) => ({
+          label: this.labelForOption(o),
+          value: o.value
+        })),
+        'modelValue': props.modelValue,
+        'validation': props.validation,
+        'onUpdate:modelValue': (value: any) => {
+          emit('update:modelValue', value)
+        }
+      })
+    })
+  }
+
+  defineRadioInputComponent(): any {
+    return this.defineFormInputComponent((props, { emit }) => {
+      const Comp = this.data.multiple ? SInputCheckboxes : SInputRadios
+
+      return () => h(Comp as any, {
+        'size': 'md',
+        'label': this.formInputLabel(),
+        'help': this.help() || undefined,
+        'options': this.data.options.map((o) => ({
+          label: this.labelForOption(o),
+          value: o.value
+        })),
+        'modelValue': props.modelValue,
+        'validation': props.validation,
+        'onUpdate:modelValue': (value: any) => {
+          emit('update:modelValue', value)
+        }
+      })
+    })
+  }
+
+  protected labelForOption(option: SelectFieldDataOption): string {
+    return this.ctx.lang === 'ja' ? option.labelJa : option.labelEn
+  }
+
+  protected optionForValue(value: string): SelectFieldDataOption {
+    const option = this.data.options.find((o) => o.value === value)
+
+    if (!option) {
+      throw new Error(`Option with value "${value}" not found in select field options.`)
+    }
+
+    return option
+  }
+
+  protected optionsForValues(values: string[]): SelectFieldDataOption[] {
+    return this.data.options.filter((o) => values.includes(o.value))
+  }
+}

package/lib/blocks/lens/fields/SlackMessageField.ts

@@ -0,0 +1,34 @@
+import { h } from 'vue'
+import SLink from '../../../components/SLink.vue'
+import { type TableCell } from '../../../composables/Table'
+import { type SlackMessageFieldData } from '../FieldData'
+import { type FilterOperator } from '../FilterOperator'
+import { type FilterInput } from '../filter-inputs/FilterInput'
+import { Field } from './Field'
+
+export class SlackMessageField extends Field<SlackMessageFieldData> {
+  override tableCell(v: any, _r: any): TableCell {
+    return {
+      type: 'text',
+      value: v,
+      link: v,
+      color: 'info'
+    }
+  }
+
+  override availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
+    return {}
+  }
+
+  override dataListItemComponent(): any {
+    return this.defineDataListItemComponent((value) => {
+      return h(SLink, { href: value }, () => value)
+    }, {
+      lineClamp: 1
+    })
+  }
+
+  override formInputComponent(): any {
+    throw new Error('Not implemented.')
+  }
+}

package/lib/blocks/lens/fields/TextField.ts

@@ -0,0 +1,46 @@
+import { h } from 'vue'
+import SInputText from '../../../components/SInputText.vue'
+import { type TableCell } from '../../../composables/Table'
+import { type TextFieldData } from '../FieldData'
+import { type FilterOperator } from '../FilterOperator'
+import { type FilterInput } from '../filter-inputs/FilterInput'
+import { TextFilterInput } from '../filter-inputs/TextFilterInput'
+import { Field } from './Field'
+
+export class TextField extends Field<TextFieldData> {
+  override tableCell(v: any, _r: any): TableCell {
+    return {
+      type: 'text',
+      value: v
+    }
+  }
+
+  override availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
+    const text = new TextFilterInput()
+
+    return {
+      '=': text,
+      '!=': text
+    }
+  }
+
+  override dataListItemComponent(): any {
+    return this.defineDataListItemComponent((value) => value)
+  }
+
+  override formInputComponent(): any {
+    return this.defineFormInputComponent((props, { emit }) => {
+      return () => h(SInputText, {
+        'size': 'md',
+        'label': this.formInputLabel(),
+        'placeholder': this.placeholder() || undefined,
+        'help': this.help() || undefined,
+        'modelValue': props.modelValue,
+        'validation': props.validation,
+        'onUpdate:modelValue': (value: any) => {
+          emit('update:modelValue', value)
+        }
+      })
+    })
+  }
+}

package/lib/blocks/lens/fields/TextareaField.ts

@@ -0,0 +1,49 @@
+import { h } from 'vue'
+import SInputTextarea from '../../../components/SInputTextarea.vue'
+import { type TableCell } from '../../../composables/Table'
+import { type TextareaFieldData } from '../FieldData'
+import { type FilterOperator } from '../FilterOperator'
+import { type FilterInput } from '../filter-inputs/FilterInput'
+import { TextFilterInput } from '../filter-inputs/TextFilterInput'
+import { Field } from './Field'
+
+export class TextareaField extends Field<TextareaFieldData> {
+  override tableCell(v: any, _r: any): TableCell {
+    return {
+      type: 'text',
+      value: v
+    }
+  }
+
+  override availableFilters(): Partial<Record<FilterOperator, FilterInput>> {
+    const text = new TextFilterInput()
+
+    return {
+      '=': text,
+      '!=': text
+    }
+  }
+
+  override dataListItemComponent(): any {
+    return this.defineDataListItemComponent((value) => value, {
+      preWrap: true
+    })
+  }
+
+  override formInputComponent(): any {
+    return this.defineFormInputComponent((props, { emit }) => {
+      return () => h(SInputTextarea, {
+        'size': 'md',
+        'label': this.formInputLabel(),
+        'placeholder': this.placeholder() || undefined,
+        'help': this.help() || undefined,
+        'rows': this.data.rows,
+        'modelValue': props.modelValue,
+        'validation': props.validation,
+        'onUpdate:modelValue': (value: any) => {
+          emit('update:modelValue', value)
+        }
+      })
+    })
+  }
+}

package/lib/blocks/lens/filter-inputs/FilterInput.ts

@@ -0,0 +1,72 @@
+import { type ValidationArgs } from '@vuelidate/core'
+import { defineComponent, h } from 'vue'
+
+export abstract class FilterInput {
+  /**
+   * Returns the validation rules for the filter input.
+   */
+  abstract rules(): Record<string, ValidationArgs>
+
+  /**
+   * Casts the input value to the correct type.
+   *
+   * This method gets called during rendering filter conditions in
+   * `LensFormFilterCondition` when the operator changes.
+   *
+   * We have to cast the value to the correct type when the input changes.
+   *
+   * For example, when filtering select input, and at first the user setups
+   * single select value filter: ['status', '=', 'open'].
+   *
+   * Then, user changes the operator to multi select: ['status', 'in', 'open'].
+   * Now, the value must be converted to array: ['status', 'in', ['open']].
+   */
+  abstract castValue(value: any): any
+
+  /**
+   * Helper method to cast value to string.
+   */
+  protected castValueToStringOrNull(value: any): string | null {
+    if (value == null) {
+      return null
+    }
+    return String(value)
+  }
+
+  /**
+   * Helper method to cast value to number.
+   */
+  protected castValueToNumberOrNull(value: any): number | null {
+    if (value == null) {
+      return null
+    }
+    const n = Number(value)
+    if (Number.isNaN(n)) {
+      return null
+    }
+    return n
+  }
+
+  /**
+   * Converts the value to a text representation for display. This value gets
+   * displayed in the <LensCatalogStateFilterCondition> component.
+   */
+  abstract valueToText(value: any): Promise<string>
+
+  /**
+   * Returns the Vue component for the filter input.
+   */
+  abstract component(): any
+
+  /**
+   * Helper function to define a Vue component with props merging.
+   */
+  protected defineComponent(component: any, props: any) {
+    return defineComponent((baseProps) => {
+      return () => h(component, {
+        ...baseProps,
+        ...props
+      })
+    })
+  }
+}

package/lib/blocks/lens/filter-inputs/NumberFilterInput.ts

@@ -0,0 +1,26 @@
+import { type ValidationArgs } from '@vuelidate/core'
+import SInputNumber from '../../../components/SInputNumber.vue'
+import { required } from '../../../validation/rules'
+import { FilterInput } from './FilterInput'
+
+export class NumberFilterInput extends FilterInput {
+  rules(): Record<string, ValidationArgs> {
+    return {
+      required: required()
+    }
+  }
+
+  castValue(value: any): any {
+    return this.castValueToNumberOrNull(value)
+  }
+
+  async valueToText(value: any): Promise<string> {
+    return value
+  }
+
+  component(): any {
+    return this.defineComponent(SInputNumber, {
+      size: 'sm'
+    })
+  }
+}

package/lib/blocks/lens/filter-inputs/SelectFilterInput.ts

@@ -0,0 +1,76 @@
+import { type ValidationArgs } from '@vuelidate/core'
+import { defineAsyncComponent } from 'vue'
+import SInputDropdown, { type Option } from '../../../components/SInputDropdown.vue'
+import { required } from '../../../validation/rules'
+import { FilterInput } from './FilterInput'
+
+export class SelectFilterInput extends FilterInput {
+  protected _multiple = false
+
+  protected optionsResolver: Option[] | (() => Promise<Option[]>) = []
+
+  multiple(): this {
+    this._multiple = true
+    return this
+  }
+
+  options(resolver: Option[] | (() => Promise<Option[]>)): this {
+    this.optionsResolver = resolver
+    return this
+  }
+
+  rules(): Record<string, ValidationArgs> {
+    return {
+      required: required()
+    }
+  }
+
+  castValue(value: any): any {
+    return this._multiple
+      ? this.castValueMany(value)
+      : this.castValueOne(value)
+  }
+
+  protected castValueOne(value: any): any {
+    if (Array.isArray(value)) {
+      return value[0]
+    }
+    return this.castValueToStringOrNull(value)
+  }
+
+  protected castValueMany(value: any): any {
+    if (Array.isArray(value)) {
+      return value
+    }
+    return [value]
+  }
+
+  async valueToText(value: any): Promise<string> {
+    const options = await this.resolveOptions()
+
+    return this.valueAsArray(value)
+      .map((v) => options.find((o) => o.value === v)!.label)
+      .join(', ')
+  }
+
+  protected valueAsArray(value: any): any[] {
+    return Array.isArray(value) ? value : [value]
+  }
+
+  component(): any {
+    return defineAsyncComponent(async () => {
+      const options = await this.resolveOptions()
+      return this.defineComponent(SInputDropdown, {
+        size: 'sm',
+        options
+      })
+    })
+  }
+
+  protected async resolveOptions(): Promise<Option[]> {
+    if (typeof this.optionsResolver === 'function') {
+      return await this.optionsResolver()
+    }
+    return this.optionsResolver
+  }
+}

package/lib/blocks/lens/filter-inputs/TextFilterInput.ts

@@ -0,0 +1,26 @@
+import { type ValidationArgs } from '@vuelidate/core'
+import SInputText from '../../../components/SInputText.vue'
+import { required } from '../../../validation/rules'
+import { FilterInput } from './FilterInput'
+
+export class TextFilterInput extends FilterInput {
+  rules(): Record<string, ValidationArgs> {
+    return {
+      required: required()
+    }
+  }
+
+  castValue(value: any): any {
+    return this.castValueToStringOrNull(value)
+  }
+
+  async valueToText(value: any): Promise<string> {
+    return value
+  }
+
+  component(): any {
+    return this.defineComponent(SInputText, {
+      size: 'sm'
+    })
+  }
+}

package/lib/blocks/lens/validation/RuleMapper.ts

@@ -0,0 +1,22 @@
+import { type ValidationArgs, type ValidationRuleWithParams } from '@vuelidate/core'
+import { maxLength, required } from '../../../validation/rules'
+import { type Rule } from '../Rule'
+
+/**
+ * Maps field rules to vuelidate validation rules.
+ */
+export function map(rules: Rule[]): ValidationArgs {
+  return rules.reduce((carry: ValidationArgs<any>, rule: Rule) => {
+    carry[rule.type] = mapRule(rule)
+    return carry
+  }, {})
+}
+
+function mapRule(rule: Rule): ValidationRuleWithParams {
+  switch (rule.type) {
+    case 'max_length':
+      return maxLength(rule.length)
+    case 'required':
+      return required()
+  }
+}