stufflog2/svelte-ui/src/components/ItemEntry.svelte

<script lang="ts">
  import type { GroupResult } from "../models/group";
  import type { default as Item } from "../models/item";
  import type { ModalData } from "../stores/modal";
  import ChildEntry from "./ChildEntry.svelte";
  import Option from "./Option.svelte";
  import OptionRow from "./OptionRow.svelte";

  export let item: Item = null;
  export let group: GroupResult = null;

  let mdItemEdit: ModalData;
  let mdItemDelete: ModalData;
  
  $: mdItemEdit = {name: "item.edit", item: {...item, group}};
  $: mdItemDelete = {name: "item.delete", item: {...item, group}};
</script>

<ChildEntry entry={item}>
  <div class="icon-like" slot="icon">
    {item.groupWeight}
  </div>
  <OptionRow>
    <Option open={mdItemEdit}>Edit</Option>
    <Option open={mdItemDelete}>Delete</Option>
  </OptionRow>
</ChildEntry>

<style>
  div.icon-like {
    min-width: 1.8ch;
    text-align: center;
  }
</style>