Mono

← All Skills Knowledge History

Memo: mono-select type picker, mono-dropdown row-actions menu, sticky Aksi column

completed📦 my-memo👤 YCEJ9999🗓 2026-06-21 16:00:00

memomono-selectmono-dropdownrow-actions-menusticky-table-columnmono-uirule-13

Request

  • Change the type option in the modal to use mono-select.
  • Collapse the row action buttons into one menu icon that opens a dropdown of 3 items (Sematkan, Ubah, Hapus) so the action column stays minimal width.
  • Make the Aksi column sticky.
  • Add a Mono Skills entry.

Summary

Memo: mono-select type picker + mono-dropdown row actions + sticky Aksi column

Three table/form refinements on the typed-memo feature. The component APIs below were taken from the mono-helper demos/*/vue/ examples (the authoritative source — the llms doc only sketches them).

mono-select (the type picker)

Replaced the segmented Teks/Checklist toggle with a select:

<mono-select class="w-44" :items.prop="memoTypeOptions" key-value="value" display-value="label"
  :model-value.prop="store.input.type" @mno-change="store.onTypeChange($event)"></mono-select>
  • :items.prop takes a plain [{ value, label }] array (DOM property, not attribute). key-value / display-value map which field is the value vs the label.
  • The change event hands you the selected value at $event.detail.modelValue.
  • memoTypeOptions = memoTypes.map(t => ({ value: t, label: memoTypeLabel[t] })) lives in datas (Rule 9). store.onTypeChange(e) reads detail.modelValue and calls the existing setType(v) so the content⇄items migration still runs.

mono-dropdown (row actions menu)

Collapsed the 3 buttons (Sematkan/Ubah/Hapus) into one ⋮ icon that opens a menu — keeps the Aksi column narrow:

<mono-dropdown placement="bottom-end" :model-value.prop="store.actionMenuId === row.id"
  @mno-open="store.actionMenuId = row.id" @mno-close="store.actionMenuId = null">
  <mono-button slot="main" size="sm" variant="tonal"><span class="i-mdi-dots-vertical"></span></mono-button>
  <div slot="body" class="memo-actions"> …3 buttons… </div>
</mono-dropdown>
  • Slots: main = the trigger, body = the panel. Default trigger="click"; built-in flip/shift.
  • Controlled single-open: bind model-value to actionMenuId === row.id and sync via mno-open/mno-close. Each action button calls the store method and closeActionMenu(). This matters because Sematkan re-sorts the row (pinned-first) — an uncontrolled menu would linger on a row that just jumped. Only one row's menu is open at a time.
  • The body items are plain light-DOM <button class="memo-act"> (icon + label, hover, danger variant) styled in memo-paper.css — fully styleable, unlike a shadow-DOM menu.

Sticky Aksi column

The table wrapper already has overflow-x-auto; with the extra Tipe column it can scroll. Pin the action column to the right:

  • header <th>: sticky right-0 z-10 bg-gray-50 border-l border-gray-200.
  • each row <td>: sticky right-0 z-10 bg-white border-l border-gray-100 memo-aksi, where .memo-aksi adds a soft left shadow so it reads as a pinned column.
  • The sticky cell needs an opaque background (to cover scrolled content), so the row hover:bg-gray-50 doesn't tint it — the divider/shadow separates it instead.

Rule 13

mono-select / mono-dropdown are used directly (they sit in the table/modal header, not on the custom lined paper, so no native-CSS workaround is needed). Only the dropdown's light-DOM menu items use page CSS.

Files

  • src/datas/tables/memo.ts (memoTypeOptions), src/stores/use-memo.ts (onTypeChange, actionMenuId, closeActionMenu), src/pages/memo/index.vue, src/assets/memo-paper.css (.memo-actions/.memo-act, .memo-aksi; removed the old .memo-type-toggle rules).

Outcome

successvite module transform + wiring grep /memo, page, store, datas transform 200 Page wires mono-select (type picker), mono-dropdown (row actions), actionMenuId/onTypeChange, memo-act, sticky right-0; the old .memo-type-toggle is gone UnoCSS generates i-mdi-dots-vertical Component APIs taken from the mono-helper vue/ demos (slot=main/body, :items.prop + key-value/display-value, $event.detail.modelValue)

Decisions

Controlled single-open dropdown via actionMenuId

Bind mono-dropdown model-value to (actionMenuId === row.id), sync mno-open/mno-close, and close on every action.

Why: Sematkan re-sorts the row to the top (pinned-first); an uncontrolled menu would stay open over a row that jumped. Controlled state also guarantees only one row menu open at a time.

Light-DOM buttons in the dropdown body, styled in page CSS

The mono-dropdown `body` slot holds plain <button class='memo-act'> items, not a shadow-DOM menu component.

Why: Light-DOM items are fully styleable (hover, danger color, icon+label) and keep logic in the store; the dropdown only provides positioning/open-state.

Sticky Aksi column needs an opaque background

Sticky th/td use solid bg (bg-gray-50 / bg-white) + left border + soft shadow; the row hover tint doesn't reach the sticky cell.

Why: position:sticky cells must paint over horizontally-scrolled content, so they can't be transparent. The divider/shadow conveys the pinned column instead of the hover tint.

Component APIs sourced from the demos, not the llms doc

Used the mono-helper demos/*/vue/ examples for the exact mono-select / mono-dropdown slots, props, and event detail shape.

Why: The llms-full.txt only sketches these components; the vue demos are the authoritative, copy-pasteable usage (slot=main/body, :items.prop, $event.detail.modelValue).

Files changed

FileOperationNote
src/datas/tables/memo.tsmodifiedAdded memoTypeOptions ([{value,label}]) for the mono-select type picker
src/stores/use-memo.tsmodifiedonTypeChange(e) -> setType(detail.modelValue); actionMenuId ref + closeActionMenu() (controlled single-open row menu); exported all
src/pages/memo/index.vuemodifiedType toggle -> mono-select; 3 action buttons -> one mono-dropdown menu (slot main/body, controlled); Aksi th/td made sticky right-0; imports mono-helper/ui/select + dropdown + memoTypeOptions
src/assets/memo-paper.cssmodifiedAdded .memo-actions/.memo-act(.--danger) menu styles + .memo-aksi sticky shadow; removed unused .memo-type-toggle/.memo-type rules

Commands

pnpm dev
curl /memo + page + store + datas (all 200)
MONO_SKILLS=true MONO_SKILLS_GITHUB_TOKEN=[REDACTED] pnpm exec mono skills save --app my-memo --dir .mono/skills/pending/<id>

Validation

Tests: not run Build: passed

← All Skills Knowledge History