Sheet

import * as React from "react";
const sheetFixture = {
  id: "sheet",
  trigger: "Edit service",
  side: "right",
  eyebrow: "Service",
  title: "ledger-api",
  field: { label: "Replicas", value: "6" },
  dismissable: true,
} satisfies {
  id: string;
  trigger: string;
  side: "left" | "right";
  eyebrow: string;
  title: string;
  field: { label: string; value: string };
  dismissable: boolean;
};
 
import { Button, Input, Sheet } from "@grassroot/ui-react";
 
export default function SheetDemo() {
  const [open, setOpen] = React.useState(false);
  return (
    <div>
      <Button variant="secondary" onClick={() => setOpen(true)}>
        {sheetFixture.trigger}
      </Button>
      <Sheet
        open={open}
        onOpenChange={setOpen}
        side={sheetFixture.side}
        eyebrow={sheetFixture.eyebrow}
        title={sheetFixture.title}
        dismissable={sheetFixture.dismissable}
      >
        <Input label={sheetFixture.field.label} mono defaultValue={sheetFixture.field.value} />
      </Sheet>
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
import { Button, Sheet, Input } from "@grassroot/ui-vue";
const sheetFixture = {
  id: "sheet",
  trigger: "Edit service",
  side: "right",
  eyebrow: "Service",
  title: "ledger-api",
  field: { label: "Replicas", value: "6" },
  dismissable: true,
} satisfies {
  id: string;
  trigger: string;
  side: "left" | "right";
  eyebrow: string;
  title: string;
  field: { label: string; value: string };
  dismissable: boolean;
};
 
const open = ref(false);
</script>
 
<template>
  <div>
    <Button variant="secondary" @click="open = true">{{ sheetFixture.trigger }}</Button>
    <Sheet
      v-model:open="open"
      :side="sheetFixture.side"
      :eyebrow="sheetFixture.eyebrow"
      :dismissable="sheetFixture.dismissable"
    >
      <template #title>{{ sheetFixture.title }}</template>
      <Input :label="sheetFixture.field.label" mono :default-value="sheetFixture.field.value" />
    </Sheet>
  </div>
</template>

import { Component, signal } from "@angular/core";
import {
  GrassrootButton,
  GrassrootSheet,
  GrassrootSheetTitle,
  GrassrootInput,
} from "@grassroot/ui-angular";
const sheetFixture = {
  id: "sheet",
  trigger: "Edit service",
  side: "right",
  eyebrow: "Service",
  title: "ledger-api",
  field: { label: "Replicas", value: "6" },
  dismissable: true,
} satisfies {
  id: string;
  trigger: string;
  side: "left" | "right";
  eyebrow: string;
  title: string;
  field: { label: string; value: string };
  dismissable: boolean;
};
 
@Component({
  selector: "app-sheet-demo",
  standalone: true,
  imports: [GrassrootButton, GrassrootSheet, GrassrootSheetTitle, GrassrootInput],
  template: `
    <div>
      <grassroot-button variant="secondary" (click)="open.set(true)">{{
        fixture.trigger
      }}</grassroot-button>
      <grassroot-sheet
        [open]="open()"
        (openChange)="open.set($event)"
        [side]="fixture.side"
        [eyebrow]="fixture.eyebrow"
        [dismissable]="fixture.dismissable"
      >
        <h4 grassrootSheetTitle>{{ fixture.title }}</h4>
        <grassroot-input
          [label]="fixture.field.label"
          [mono]="true"
          [defaultValue]="fixture.field.value"
        />
      </grassroot-sheet>
    </div>
  `,
})
export class SheetDemoComponent {
  readonly open = signal(false);
  protected readonly fixture = sheetFixture;
}
 
export default SheetDemoComponent;

<script lang="ts">
  import { Button, Sheet, Input } from "@grassroot/ui-svelte";
  const sheetFixture = {
    id: "sheet",
    trigger: "Edit service",
    side: "right",
    eyebrow: "Service",
    title: "ledger-api",
    field: { label: "Replicas", value: "6" },
    dismissable: true,
  } satisfies {
    id: string;
    trigger: string;
    side: "left" | "right";
    eyebrow: string;
    title: string;
    field: { label: string; value: string };
    dismissable: boolean;
  };
 
  let open = $state(false);
</script>
 
{#snippet title()}{sheetFixture.title}{/snippet}
{#snippet children()}<Input
    label={sheetFixture.field.label}
    mono
    defaultValue={sheetFixture.field.value}
  />{/snippet}
<div>
  <Button variant="secondary" onClick={() => (open = true)}>{sheetFixture.trigger}</Button>
  <Sheet
    {open}
    onOpenChange={(next) => (open = next)}
    side={sheetFixture.side}
    eyebrow={sheetFixture.eyebrow}
    dismissable={sheetFixture.dismissable}
    {title}
    {children}
  />
</div>

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
import { Button, Sheet, Input } from "@grassroot/ui-solid";
const sheetFixture = {
  id: "sheet",
  trigger: "Edit service",
  side: "right",
  eyebrow: "Service",
  title: "ledger-api",
  field: { label: "Replicas", value: "6" },
  dismissable: true,
} satisfies {
  id: string;
  trigger: string;
  side: "left" | "right";
  eyebrow: string;
  title: string;
  field: { label: string; value: string };
  dismissable: boolean;
};
 
export default function SheetDemo() {
  const [open, setOpen] = createSignal(false);
 
  return (
    <div>
      <Button variant="secondary" onClick={() => setOpen(true)}>
        {sheetFixture.trigger}
      </Button>
      <Sheet
        open={open()}
        onOpenChange={setOpen}
        side={sheetFixture.side}
        eyebrow={sheetFixture.eyebrow}
        title={sheetFixture.title}
        dismissable={sheetFixture.dismissable}
      >
        <Input label={sheetFixture.field.label} mono value={sheetFixture.field.value} />
      </Sheet>
    </div>
  );
}