@ditojs/admin 2.86.0 → 2.88.0

package/types/tests/admin.test-d.ts

@@ -0,0 +1,27 @@
+import { assertType, describe, it } from 'vitest'
+import type { default as DitoAdmin, View } from '../index.d.ts'
+import type { Entry } from './fixtures.ts'
+
+describe('DitoAdmin', () => {
+  it('constructor accepts element and views option', () => {
+    assertType<ConstructorParameters<typeof DitoAdmin>>([
+      document.body,
+      {
+        views: {
+          entries: {
+            type: 'view',
+            component: {
+              type: 'list',
+              form: {
+                type: 'form',
+                components: {
+                  title: { type: 'text' }
+                }
+              }
+            }
+          } satisfies View<Entry>
+        }
+      }
+    ])
+  })
+})

package/types/tests/component-buttons.test-d.ts

@@ -0,0 +1,44 @@
+import { expectTypeOf, assertType, describe, it } from 'vitest'
+import type { Buttons } from '../index.d.ts'
+import type { Entry } from './fixtures.ts'
+
+describe('Buttons', () => {
+  it('accepts button without type', () => {
+    assertType<Buttons<Entry>>({
+      save: { text: 'Save' }
+    })
+  })
+
+  it('accepts button with type', () => {
+    assertType<Buttons<Entry>>({
+      save: { type: 'button', text: 'Save' }
+    })
+  })
+
+  it('click callback receives typed item', () => {
+    assertType<Buttons<Entry>>({
+      save: {
+        text: 'Save',
+        events: {
+          click({ item }) {
+            expectTypeOf(item).not.toBeAny()
+            expectTypeOf(item).toHaveProperty('id')
+            expectTypeOf(item).toHaveProperty('title')
+            expectTypeOf(item.id).toBeNumber()
+            expectTypeOf(item.title).toBeString()
+          }
+        }
+      }
+    })
+  })
+
+  it('rejects invalid button type', () => {
+    assertType<Buttons<Entry>>({
+      save: {
+        // @ts-expect-error 'text' is not a valid button type
+        type: 'text',
+        text: 'Save'
+      }
+    })
+  })
+})

package/types/tests/component-list.test-d.ts

@@ -0,0 +1,159 @@
+import { expectTypeOf, assertType, describe, it } from 'vitest'
+import type {
+  Components,
+  Form,
+  ListSchema,
+  ColumnSchema,
+  DitoContext
+} from '../index.d.ts'
+import type { Entry, Parent } from './fixtures.ts'
+
+describe('ListSchema', () => {
+  it('accepts form components typed against $Item', () => {
+    assertType<ListSchema<Entry>>({
+      type: 'list',
+      form: {
+        type: 'form',
+        components: {
+          title: { type: 'text' }
+        }
+      }
+    })
+  })
+
+  it('accepts columns as a record of ColumnSchema', () => {
+    assertType<ListSchema<Entry>>({
+      type: 'list',
+      columns: {
+        title: {
+          label: 'Title',
+          sortable: true
+        } satisfies ColumnSchema<Entry>
+      }
+    })
+  })
+
+  it('column render callback receives typed value', () => {
+    assertType<ListSchema<Entry>>({
+      type: 'list',
+      columns: {
+        title: {
+          render({ value }) {
+            expectTypeOf(value).not.toBeAny()
+            expectTypeOf(value).toBeString()
+            return value
+          }
+        }
+      }
+    })
+  })
+
+  it('accepts columns as an array of item keys', () => {
+    assertType<ListSchema<Entry>>({
+      type: 'list',
+      columns: ['title', 'id']
+    })
+  })
+
+  it('rejects unknown keys in columns array', () => {
+    assertType<ListSchema<Entry>>({
+      type: 'list',
+      // @ts-expect-error 'missing' is not a key of Entry
+      columns: ['title', 'missing']
+    })
+  })
+
+  it('accepts creatable as boolean or callback', () => {
+    assertType<ListSchema<Entry>>({
+      type: 'list',
+      creatable: true
+    })
+
+    assertType<ListSchema<Entry>>({
+      type: 'list',
+      creatable(ctx) {
+        expectTypeOf(ctx).not.toBeAny()
+        expectTypeOf(ctx).toMatchTypeOf<DitoContext<Entry>>()
+        expectTypeOf(ctx.item.title).toBeString()
+        return true
+      }
+    })
+  })
+
+  it('types list correctly inside Components', () => {
+    assertType<Components<Parent>>({
+      entries: {
+        type: 'list',
+        form: {
+          type: 'form',
+          components: {
+            title: { type: 'text' }
+          }
+        } satisfies Form<Entry>
+      }
+    })
+  })
+
+  it('rejects wrong form type via typed variable', () => {
+    const parentForm: Form<Parent> = {
+      type: 'form',
+      components: {
+        title: { type: 'text' },
+        entries: { type: 'list' }
+      }
+    }
+
+    assertType<ListSchema<Entry>>({
+      type: 'list',
+      // @ts-expect-error Form<Parent> is not assignable to ResolvableForm<Entry>
+      form: parentForm
+    })
+  })
+
+  it('accepts draggable as OrItemAccessor', () => {
+    assertType<ListSchema<Entry>>({
+      type: 'list',
+      draggable(ctx) {
+        expectTypeOf(ctx).not.toBeAny()
+        expectTypeOf(ctx).toMatchTypeOf<DitoContext<Entry>>()
+        return true
+      }
+    })
+  })
+
+  it('accepts scopes as string array or object', () => {
+    assertType<ListSchema<Entry>>({
+      type: 'list',
+      scopes: ['active', 'archived']
+    })
+
+    assertType<ListSchema<Entry>>({
+      type: 'list',
+      scopes: {
+        active: { label: 'Active', defaultScope: true },
+        archived: 'Archived'
+      }
+    })
+  })
+
+  it('accepts itemLabel as string, callback, or false', () => {
+    assertType<ListSchema<Entry>>({
+      type: 'list',
+      itemLabel: 'title'
+    })
+
+    assertType<ListSchema<Entry>>({
+      type: 'list',
+      itemLabel: false
+    })
+
+    assertType<ListSchema<Entry>>({
+      type: 'list',
+      itemLabel({ item }) {
+        expectTypeOf(item).not.toBeAny()
+        expectTypeOf(item.title).toBeString()
+        return item.title
+      }
+    })
+  })
+})

package/types/tests/component-misc.test-d.ts

@@ -0,0 +1,137 @@
+import { expectTypeOf, assertType, describe, it } from 'vitest'
+import type { MenuSchema, View, NumberSchema, Form } from '../index.d.ts'
+import type { Entry } from './fixtures.ts'
+
+describe('MenuSchema', () => {
+  it('accepts menu with items containing views', () => {
+    assertType<MenuSchema<Entry>>({
+      type: 'menu',
+      label: 'Main Menu',
+      name: 'mainMenu',
+      items: {
+        entries: {
+          type: 'view',
+          component: {
+            type: 'list',
+            form: {
+              type: 'form',
+              components: {
+                title: { type: 'text' }
+              }
+            }
+          }
+        }
+      }
+    })
+  })
+
+  it('View union accepts both ViewSchema and MenuSchema', () => {
+    const viewSchema: View<Entry> = {
+      type: 'view',
+      components: {
+        title: { type: 'text' }
+      }
+    }
+
+    const menuSchema: View<Entry> = {
+      type: 'menu',
+      label: 'Group',
+      items: {
+        sub: {
+          type: 'view',
+          components: {
+            title: { type: 'text' }
+          }
+        }
+      }
+    }
+
+    assertType<View<Entry>>(viewSchema)
+    assertType<View<Entry>>(menuSchema)
+  })
+})
+
+describe('NumberSchema', () => {
+  it('accepts min, max, step, decimals', () => {
+    assertType<NumberSchema<Entry>>({
+      type: 'number',
+      min: 0,
+      max: 100,
+      step: 0.5,
+      decimals: 2
+    })
+  })
+
+  it('accepts range as tuple', () => {
+    assertType<NumberSchema<Entry>>({
+      type: 'integer',
+      range: [0, 100]
+    })
+  })
+
+  it('accepts rules including integer', () => {
+    assertType<NumberSchema<Entry>>({
+      type: 'number',
+      rules: {
+        min: 0,
+        max: 999,
+        integer: true
+      }
+    })
+  })
+})
+
+describe('SchemaAffixMixin (prefix/suffix)', () => {
+  it('accepts prefix as string', () => {
+    assertType<NumberSchema<Entry>>({
+      type: 'number',
+      prefix: '$'
+    })
+  })
+
+  it('accepts prefix as array of SchemaAffix objects', () => {
+    assertType<NumberSchema<Entry>>({
+      type: 'number',
+      prefix: [
+        { type: 'icon', text: 'currency' },
+        { html: '<b>$</b>' }
+      ]
+    })
+  })
+
+  it('accepts suffix with conditional if callback', () => {
+    assertType<NumberSchema<Entry>>({
+      type: 'number',
+      suffix: {
+        text: '%',
+        if({ item }) {
+          expectTypeOf(item).not.toBeAny()
+          return item.id > 0
+        }
+      }
+    })
+  })
+})
+
+describe('ClipboardConfig', () => {
+  it('accepts copy/paste callbacks on a form', () => {
+    assertType<Form<Entry>>({
+      type: 'form',
+      clipboard: {
+        copy(context) {
+          expectTypeOf(context).not.toBeAny()
+          expectTypeOf(context.item).not.toBeAny()
+          return context.item
+        },
+        paste(context) {
+          expectTypeOf(context).not.toBeAny()
+          expectTypeOf(context.item).not.toBeAny()
+          return context.item
+        }
+      },
+      components: {
+        title: { type: 'text' }
+      }
+    })
+  })
+})

package/types/tests/component-object.test-d.ts

@@ -0,0 +1,69 @@
+import { expectTypeOf, assertType, describe, it } from 'vitest'
+import type {
+  ObjectSchema,
+  TreeListSchema,
+  Form,
+  Components
+} from '../index.d.ts'
+import type { Address, Entry, ParentWithAddress } from './fixtures.ts'
+
+describe('ObjectSchema', () => {
+  it('accepts typed form', () => {
+    assertType<ObjectSchema<Address>>({
+      type: 'object',
+      form: {
+        type: 'form',
+        components: {
+          street: { type: 'text' },
+          city: { type: 'text' }
+        }
+      } satisfies Form<Address>
+    })
+  })
+
+  it('accepts typed columns', () => {
+    assertType<ObjectSchema<Address>>({
+      type: 'object',
+      columns: {
+        street: { label: 'Street' },
+        city: { label: 'City' }
+      }
+    })
+  })
+
+  it('rejects unknown key in columns array', () => {
+    assertType<ObjectSchema<Address>>({
+      type: 'object',
+      // @ts-expect-error 'zipCode' is not a key of Address
+      columns: ['street', 'zipCode']
+    })
+  })
+
+  it('works inside Components for a data key', () => {
+    assertType<Components<ParentWithAddress>>({
+      address: {
+        type: 'object',
+        form: {
+          type: 'form',
+          components: {
+            title: { type: 'text' }
+          }
+        } satisfies Form<ParentWithAddress>
+      }
+    })
+  })
+})
+
+describe('TreeListSchema', () => {
+  it('accepts typed form', () => {
+    assertType<TreeListSchema<Entry>>({
+      type: 'tree-list',
+      form: {
+        type: 'form',
+        components: {
+          title: { type: 'text' }
+        }
+      } satisfies Form<Entry>
+    })
+  })
+})

package/types/tests/component-section.test-d.ts

@@ -0,0 +1,174 @@
+import { expectTypeOf, assertType, describe, it } from 'vitest'
+import type { Components, Form } from '../index.d.ts'
+import type { Address, Entry, Parent, ParentWithAddress } from './fixtures.ts'
+
+type ParentWithSection = Parent & {
+  details: never
+}
+
+describe('Section components', () => {
+  it('accepts section with nested components', () => {
+    assertType<Components<ParentWithSection>>({
+      details: {
+        type: 'section',
+        components: {
+          title: { type: 'text' }
+        }
+      }
+    })
+  })
+
+  it('provides typed item in section callbacks', () => {
+    assertType<Components<ParentWithSection>>({
+      details: {
+        type: 'section',
+        label({ item }) {
+          expectTypeOf(item).not.toBeAny()
+          expectTypeOf(item.title).toBeString()
+          expectTypeOf(item.entries).toEqualTypeOf<Entry[]>()
+          expectTypeOf(item).not.toHaveProperty('details')
+          return item.title
+        }
+      }
+    })
+  })
+
+  it('rejects invalid component keys in section', () => {
+    assertType<Components<ParentWithSection>>({
+      details: {
+        type: 'section',
+        components: {
+          title: { type: 'text' },
+          // @ts-expect-error 'nonExistent' is not a key of ParentWithSection
+          nonExistent: { type: 'text' }
+        }
+      }
+    })
+  })
+
+  it('accepts section with form prop', () => {
+    const sectionForm: Form<ParentWithSection> = {
+      type: 'form',
+      components: {
+        title: { type: 'text' }
+      }
+    }
+
+    assertType<Components<ParentWithSection>>({
+      details: {
+        type: 'section',
+        form: sectionForm
+      }
+    })
+  })
+})
+
+describe('Section tabs', () => {
+  it('accepts tabs on a non-nested section', () => {
+    assertType<Components<ParentWithSection>>({
+      details: {
+        type: 'section',
+        tabs: {
+          general: {
+            type: 'tab',
+            components: {
+              title: { type: 'text' }
+            }
+          }
+        }
+      }
+    })
+  })
+
+  it('accepts tabs on a nested section typed against nested data', () => {
+    assertType<Components<ParentWithAddress>>({
+      address: {
+        type: 'section',
+        nested: true,
+        tabs: {
+          main: {
+            type: 'tab',
+            components: {
+              street: { type: 'text' },
+              city: { type: 'text' }
+            }
+          }
+        }
+      }
+    })
+  })
+})
+
+describe('Nested sections', () => {
+  it('types nested section components against the value type', () => {
+    assertType<Components<ParentWithAddress>>({
+      address: {
+        type: 'section',
+        nested: true,
+        components: {
+          street: { type: 'text' },
+          city: { type: 'text' }
+        }
+      }
+    })
+  })
+
+  it('rejects invalid keys in nested section components', () => {
+    assertType<Components<ParentWithAddress>>({
+      address: {
+        type: 'section',
+        nested: true,
+        components: {
+          street: { type: 'text' },
+          // @ts-expect-error 'zipCode' is not a key of Address
+          zipCode: { type: 'text' }
+        }
+      }
+    })
+  })
+
+  it('types item as Address in nested section callbacks', () => {
+    assertType<Components<ParentWithAddress>>({
+      address: {
+        type: 'section',
+        nested: true,
+        components: {
+          street: {
+            type: 'text',
+            onChange({ item }) {
+              expectTypeOf(item).not.toBeAny()
+              expectTypeOf(item).toEqualTypeOf<Address>()
+            }
+          }
+        }
+      }
+    })
+  })
+
+  it('types nested section form against the value type', () => {
+    assertType<Components<ParentWithAddress>>({
+      address: {
+        type: 'section',
+        nested: true,
+        form: {
+          type: 'form',
+          components: {
+            street: { type: 'text' },
+            city: { type: 'text' }
+          }
+        } satisfies Form<Address>
+      }
+    })
+  })
+
+  it('non-nested section on data key accepts parent item keys', () => {
+    assertType<Components<ParentWithAddress>>({
+      address: {
+        type: 'section',
+        components: {
+          title: { type: 'text' }
+        }
+      }
+    })
+  })
+})