feat(table): add menu option (#249)

[kiaking]

• close [Table] Add menu option #249

Adds menu option to the table.

const options = useTable({
  menu: [
    {
      label: 'Option A',
      dropdown: {
        type: 'menu',
        options: [
          { label: 'Option 1', onClick: () => {} },
          { label: 'Option 2', onClick: () => {} },
          { label: 'Option 3', onClick: () => {} }
        ]
      }
    }
  ]
})

User can pass in multiple options. And also, by passing in multiple nested array, it groups the menu with divider like shown in the screenshot.

const options = useTable({
  menu: [
    [
      { label: 'Option A', dropdown: { ... } },
      { label: 'Option B', dropdown: { ... } }
    ],
    [
      { label: 'Option A', dropdown: { ... } }
    ]
  ]
})

User can use state option to control how the menu button would appear.

• inactive – The default state. The menu button fill look slightly muted.
• active – The menu button label text will appear with --c-text-1 color.
• indicate – Adds blue dot indicator on the menu button. Use this to indicate user that the menu is now different than its default state (e.g. user has selected some option).

const options = useTable({
  menu: [
    {
      label: 'Option A',
      state: 'indicate',
      dropdown: { ... }
    }
  ]
})

[netlify]

✅ Deploy Preview for sefirot-story ready!

Name	Link
🔨 Latest commit	b2a28be
🔍 Latest deploy log	https://app.netlify.com/sites/sefirot-story/deploys/6474380b10e3760008c248e1
😎 Deploy Preview	https://deploy-preview-290--sefirot-story.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[codecov]

Codecov Report

Patch coverage: 98.51% and project coverage change: +0.32 🎉

Comparison is base (f95e5e6) 82.88% compared to head (b2a28be) 83.21%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #290      +/-   ##
==========================================
+ Coverage   82.88%   83.21%   +0.32%     
==========================================
  Files         120      122       +2     
  Lines       10098    10288     +190     
  Branches      420      433      +13     
==========================================
+ Hits         8370     8561     +191     
+ Misses       1728     1727       -1     

Impacted Files	Coverage Δ
lib/components/STableHeader.vue	96.96% <89.28%> (-3.04%)	⬇️
lib/components/STable.vue	73.76% <100.00%> (+0.50%)	⬆️
lib/components/STableHeaderMenu.vue	100.00% <100.00%> (ø)
lib/components/STableHeaderMenuItem.vue	100.00% <100.00%> (ø)
lib/composables/Table.ts	100.00% <100.00%> (ø)

... and 2 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[netlify]

✅ Deploy Preview for sefirot-docs ready!

Name	Link
🔨 Latest commit	b2a28be
🔍 Latest deploy log	https://app.netlify.com/sites/sefirot-docs/deploys/6474380b51ec760008befd2b
😎 Deploy Preview	https://deploy-preview-290--sefirot-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.