Skip to main content

@repo/actions

Overview​

The @repo/actions is a way to define actions that can be reused throughout an application, giving a generalized look and feel to dynamic actions.

Installation​

npm install @repo/actions

Define Actions​

You can define actions like so:

<script lang='ts'>
  import { page } from '$app/state'
  import { importEmployeeSchema } from '$lib/domains/functions/utils/schemas.js'
  import { ActionButton } from '@repo/actions'
  import { FormField } from '@repo/form'
  import { zod } from 'sveltekit-superforms/adapters'
  import { superForm } from 'sveltekit-superforms/client'

  const form = superForm(page.data.form, {
    dataType: 'json',
    taintedMessage: false,
    validators: zod(importEmployeeSchema),
    invalidateAll: 'force',
  })
  const formData = form.form
</script>

<ActionButton.Root>
  <ActionButton.Item>
    <ActionButton.Confirmation action='?/generate' label='Generate Tasks' invalidateAll />
  </ActionButton>
  <ActionButton.Item>
    <ActionButton.Form label='Import Employees' {form} enctype='multipart/form-data' action='?/import'>
      <FormField.Simple accessor='file' label='Import'>
        {#snippet children({ props })}
          <FormField.FileField bind:value={$formData.file} accept='text/csv' {...props} />
        {/snippet}
      </FormField.Simple>
    </ActionButton.Form>
  </ActionButton.Item>
</ActionButton.Root>

Shortcuts​

This function is not completely implemented

This will add a dropdown with the generate tasks actions. Second it will add a keyboard shortcut when ctrl+shift+g is pressed. There are three generic types that can be used:

  • ctrl (translates to cmd on mac)
  • shift
  • alt (translates to option on mac)