@globalbrain/sefirot 4.48.1 → 4.50.0

package/lib/blocks/lens/FieldData.ts

@@ -146,7 +146,7 @@ export interface DecimalFieldData extends FieldDataBase {
 
 export interface SelectFieldData extends FieldDataBase {
   type: 'select'
-  displayAs: 'text' | 'state'
+  displayAs: 'text' | 'state' | 'pills'
   inputAs: 'dropdown' | 'radio'
   placeholderEn: string | null
   placeholderJa: string | null

package/lib/blocks/lens/Rule.ts

@@ -1,19 +1,83 @@
 export type Rule =
   | MaxLengthRule
+  | MinLengthRule
+  | MinValueRule
+  | MaxValueRule
   | RequiredRule
   | UniqueRule
+  | EmailRule
+  | UrlRule
+  | DecimalRule
+  | DecimalOrHyphenRule
+  | PositiveIntegerRule
+  | NegativeIntegerRule
+  | ZeroOrPositiveIntegerRule
+  | ZeroOrNegativeIntegerRule
+  | CheckedRule
   | SlackChannelLinkRule
   | SlackChannelNameRule
   | BeforeRule
   | BeforeOrEqualRule
   | AfterRule
   | AfterOrEqualRule
+  | EachRule
 
 export interface MaxLengthRule {
   type: 'max_length'
   length: number
 }
 
+export interface MinLengthRule {
+  type: 'min_length'
+  length: number
+}
+
+export interface MinValueRule {
+  type: 'min_value'
+  value: number
+}
+
+export interface MaxValueRule {
+  type: 'max_value'
+  value: number
+}
+
+export interface EmailRule {
+  type: 'email'
+}
+
+export interface UrlRule {
+  type: 'url'
+}
+
+export interface DecimalRule {
+  type: 'decimal'
+}
+
+export interface DecimalOrHyphenRule {
+  type: 'decimal_or_hyphen'
+}
+
+export interface PositiveIntegerRule {
+  type: 'positive_integer'
+}
+
+export interface NegativeIntegerRule {
+  type: 'negative_integer'
+}
+
+export interface ZeroOrPositiveIntegerRule {
+  type: 'zero_or_positive_integer'
+}
+
+export interface ZeroOrNegativeIntegerRule {
+  type: 'zero_or_negative_integer'
+}
+
+export interface CheckedRule {
+  type: 'checked'
+}
+
 export interface RequiredRule {
   type: 'required'
 }
@@ -50,3 +114,12 @@ export interface AfterOrEqualRule {
   type: 'after_or_equal'
   date: string
 }
+
+/**
+ * Applies the nested `rules` to every element of an array value, mirroring
+ * Laravel's `field.*` wildcard on the backend.
+ */
+export interface EachRule {
+  type: 'each'
+  rules: Rule[]
+}

package/lib/blocks/lens/components/LensTableEditableCell.vue

@@ -3,6 +3,8 @@ import IconPencilSimple from '~icons/ph/pencil-simple'
 import { useElementBounding } from '@vueuse/core'
 import { computed, nextTick, onUnmounted, ref, shallowRef, watch } from 'vue'
 import SButton from '../../../components/SButton.vue'
+import SPill, { type Mode as PillMode } from '../../../components/SPill.vue'
+import SState, { type Mode as StateMode } from '../../../components/SState.vue'
 import { useManualDropdownPosition } from '../../../composables/Dropdown'
 import { useTrans } from '../../../composables/Lang'
 import { useValidation } from '../../../composables/Validation'
@@ -54,21 +56,37 @@ onUnmounted(() => {
 
 // Reuse the field's own table-cell rendering for the display value so the
 // label mapping (e.g. select option labels) matches the read-only columns.
-// Falls back to a plain representation for non-text displays.
-const displayValue = computed(() => {
+const resolvedCell = computed<any>(() => {
   try {
     const cell = props.field.tableColumn().cell
-    const resolved: any = typeof cell === 'function' ? cell(props.value, props.record) : cell
-    if (resolved && (resolved.type === 'text' || resolved.type === 'number')) {
-      return resolved.value ?? ''
-    }
-    // `state` cells (e.g. a select with displayAs: 'state') carry the localized
-    // label, not the raw payload — show that rather than falling through.
-    if (resolved && resolved.type === 'state') {
-      return resolved.label ?? ''
-    }
+    return typeof cell === 'function' ? cell(props.value, props.record) : cell
   } catch {
-    // Field types without a text cell fall through to the generic display.
+    // Field types without a usable cell fall through to the generic display.
+    return null
+  }
+})
+
+// A `pills` cell (e.g. a multi-select with displayAs: 'pills') renders as pills
+// rather than text, mirroring the read-only `STableCellPills` column.
+const displayPills = computed<{ label: string; color?: PillMode }[] | null>(() => {
+  const cell = resolvedCell.value
+  return cell && cell.type === 'pills' ? cell.pills : null
+})
+
+// A `state` cell (e.g. a select with displayAs: 'state') renders as a status
+// badge rather than its bare label, mirroring the read-only `STableCellState`
+// column.
+const displayState = computed<{ label: string; mode?: StateMode } | null>(() => {
+  const cell = resolvedCell.value
+  return cell && cell.type === 'state' ? { label: cell.label, mode: cell.mode } : null
+})
+
+// Falls back to a plain representation for non-text displays (pills and state
+// cells are rendered as their own components in the template above).
+const displayValue = computed(() => {
+  const resolved: any = resolvedCell.value
+  if (resolved && (resolved.type === 'text' || resolved.type === 'number')) {
+    return resolved.value ?? ''
   }
 
   const v = props.value
@@ -184,7 +202,22 @@ function isTextLikeInput(target: EventTarget | null): boolean {
 
 <template>
   <div ref="anchor" class="LensTableEditableCell" :class="{ editing }">
-    <span class="value">{{ displayValue }}</span>
+    <div v-if="displayPills" class="pills">
+      <SPill
+        v-for="(pill, i) in displayPills"
+        :key="i"
+        size="mini"
+        :mode="pill.color"
+        :label="pill.label"
+      />
+    </div>
+    <SState
+      v-else-if="displayState"
+      size="mini"
+      :mode="displayState.mode"
+      :label="displayState.label"
+    />
+    <span v-else class="value">{{ displayValue }}</span>
     <button
       class="edit"
       type="button"
@@ -233,6 +266,15 @@ function isTextLikeInput(target: EventTarget | null): boolean {
   text-overflow: ellipsis;
 }
 
+.pills {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  overflow: hidden;
+}
+
 .edit {
   position: absolute;
   top: 50%;

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

@@ -1,5 +1,6 @@
 import { xor } from 'lodash-es'
 import { h } from 'vue'
+import SDescPill from '../../../components/SDescPill.vue'
 import SInputCheckboxes from '../../../components/SInputCheckboxes.vue'
 import SInputDropdown from '../../../components/SInputDropdown.vue'
 import SInputRadios from '../../../components/SInputRadios.vue'
@@ -38,6 +39,8 @@ export class SelectField extends Field<SelectFieldData> {
     switch (this.data.displayAs) {
       case 'state':
         return this.tableCellState(v, _r)
+      case 'pills':
+        return this.tableCellPills(v, _r)
       case 'text':
         return this.tableCellText(v, _r)
       default:
@@ -45,6 +48,18 @@ export class SelectField extends Field<SelectFieldData> {
     }
   }
 
+  protected tableCellPills(v: any, _r: any): TableCell {
+    v = Array.isArray(v) ? v : [v]
+
+    return {
+      type: 'pills',
+      pills: this.optionsForValues(v).map((o) => ({
+        label: this.labelForOption(o),
+        color: o.mode
+      }))
+    }
+  }
+
   protected tableCellText(v: any, _r: any): TableCell {
     v = Array.isArray(v) ? v : [v]
 
@@ -95,6 +110,8 @@ export class SelectField extends Field<SelectFieldData> {
       switch (this.data.displayAs) {
         case 'state':
           return this.renderDataListItemValueForState(value)
+        case 'pills':
+          return this.renderDataListItemValueForPills(value)
         case 'text':
           return this.renderDataListItemValueForText(value)
         default:
@@ -103,6 +120,17 @@ export class SelectField extends Field<SelectFieldData> {
     })
   }
 
+  protected renderDataListItemValueForPills(value: any): any {
+    value = Array.isArray(value) ? value : [value]
+
+    return h(SDescPill, {
+      pill: this.optionsForValues(value).map((o) => ({
+        label: this.labelForOption(o),
+        mode: o.mode
+      }))
+    })
+  }
+
   protected renderDataListItemValueForState(value: any): any {
     if (this.data.multiple) {
       throw new Error('Displaying select field as state with multiple option is not supported.')

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

@@ -5,30 +5,90 @@ import {
   afterOrEqual,
   before,
   beforeOrEqual,
+  checked,
+  decimal,
+  decimalOrHyphen,
+  email,
   maxLength,
+  maxValue,
+  minLength,
+  minValue,
+  negativeInteger,
+  positiveInteger,
   required,
+  rule,
   slackChannelLink,
-  slackChannelName
+  slackChannelName,
+  url,
+  zeroOrNegativeInteger,
+  zeroOrPositiveInteger
 } from '../../../validation/rules'
-import { type Rule } from '../Rule'
+import { type EachRule, 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) => {
+  const carry = rules.reduce((carry: ValidationArgs<any>, rule: Rule) => {
+    // `each` rules are handled separately below so that multiple of them on the
+    // same field compose rather than overwrite.
+    if (rule.type === 'each') {
+      return carry
+    }
     const mapped = mapRule(rule)
     if (mapped) {
       carry[rule.type] = mapped
     }
     return carry
   }, {})
+
+  // `each` validates every element of an array value rather than the value
+  // itself, so it maps to a single per-element validator (see `mapEach`). If a
+  // field carries more than one `each` rule, merge their child rules so every
+  // wildcard rule runs — the backend accumulates them the same way. A single
+  // `each` is the common case.
+  const eachRules = rules.filter((rule): rule is EachRule => rule.type === 'each')
+  if (eachRules.length) {
+    carry.each = mapEach({ type: 'each', rules: eachRules.flatMap((rule) => rule.rules) })
+  }
+
+  return carry
+}
+
+/**
+ * Builds a validator that applies an `each` rule's nested rules to every
+ * element of an array value. vuelidate's `forEach` only handles arrays of
+ * objects, so for the scalar arrays Lens fields hold (multi-select values,
+ * related ids) we run each element through the mapped child validators
+ * directly. Mirrors the backend, which expands the same rules onto Laravel's
+ * `key.*` wildcard. A non-array value fails; an empty/absent value is left to
+ * `required` (the rule is optional on its own).
+ */
+function mapEach(eachRule: EachRule): ValidationRuleWithParams {
+  // Map each child rule straight to a validator rather than through the
+  // type-keyed `map()` object, so two child rules of the same family are both
+  // kept (the backend's `key.*` expansion is additive and de-dupes nothing).
+  // Server-only children (e.g. `unique`) map to null and are dropped.
+  const childValidators = eachRule.rules
+    .map((r) => (r.type === 'each' ? mapEach(r) : mapRule(r)))
+    .filter((v): v is ValidationRuleWithParams => v !== null)
+
+  return rule((value) =>
+    Array.isArray(value)
+    && value.every((item) => childValidators.every((v) => v.$validator(item, {}, {}) === true))
+  )
 }
 
-function mapRule(rule: Rule): ValidationRuleWithParams | null {
+function mapRule(rule: Exclude<Rule, EachRule>): ValidationRuleWithParams | null {
   switch (rule.type) {
     case 'max_length':
       return maxLength(rule.length)
+    case 'min_length':
+      return minLength(rule.length)
+    case 'min_value':
+      return minValue(rule.value)
+    case 'max_value':
+      return maxValue(rule.value)
     case 'required':
       return required()
     case 'unique':
@@ -36,6 +96,24 @@ function mapRule(rule: Rule): ValidationRuleWithParams | null {
       // database). The backend enforces it and returns a 422 with field
       // errors, so there is no client-side equivalent to apply here.
       return null
+    case 'email':
+      return email()
+    case 'url':
+      return url()
+    case 'decimal':
+      return decimal()
+    case 'decimal_or_hyphen':
+      return decimalOrHyphen()
+    case 'positive_integer':
+      return positiveInteger()
+    case 'negative_integer':
+      return negativeInteger()
+    case 'zero_or_positive_integer':
+      return zeroOrPositiveInteger()
+    case 'zero_or_negative_integer':
+      return zeroOrNegativeInteger()
+    case 'checked':
+      return checked()
     case 'slack_channel_link':
       return slackChannelLink()
     case 'slack_channel_name':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "4.48.1",
+  "version": "4.50.0",
   "description": "Vue Components for Global Brain Design System.",
   "keywords": [
     "components",