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 { generateTasksForm, importEmployeesForm } from '$lib/domains/functions/database/functions.remote.js'
  import { importEmployeesSchema } from '$lib/domains/functions/utils/schemas.js'
  import { ActionButton } from '@repo/actions'
</script>

<ActionButton.Root>
  <ActionButton.Item>
    <ActionButton.Remote form={generateTasksForm}>
      {#snippet label()}
        Generate Tasks
      {/snippet}
    </ActionButton.Remote>
  </ActionButton.Item>
  <ActionButton.Item>
    <ActionButton.Remote label='Import Employees' form={importEmployeesForm} schema={importEmployeesSchema} />
  </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)