feat(table): auto resize actions column

[brc-dd]

closes #377

---

Also adjusted the code to always left align the action cell items. It was looking weird when some of the icons are hidden:

Before:

After:

Not sure though which is more desirable.

---

Close #382 if merging this. show is the recommended way if you want to hide some icons and use auto resize at the same time. This PR won't work when actions.cell is a function.

[netlify]

✅ Deploy Preview for sefirot-story ready!

Name	Link
🔨 Latest commit	b4a25ee
🔍 Latest deploy log	https://app.netlify.com/sites/sefirot-story/deploys/65523f0b384a9a00089b614b
😎 Deploy Preview	https://deploy-preview-381--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 configuration.

[netlify]

✅ Deploy Preview for sefirot-docs ready!

Name	Link
🔨 Latest commit	b4a25ee
🔍 Latest deploy log	https://app.netlify.com/sites/sefirot-docs/deploys/65523f0bb53d8e0008195287
😎 Deploy Preview	https://deploy-preview-381--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 configuration.

[codecov]

Codecov Report

Attention: 44 lines in your changes are missing coverage. Please review.

Comparison is base (164ea02) 79.74% compared to head (b4a25ee) 79.50%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #381      +/-   ##
==========================================
- Coverage   79.74%   79.50%   -0.24%     
==========================================
  Files         152      153       +1     
  Lines       12187    12259      +72     
  Branches      516      522       +6     
==========================================
+ Hits         9718     9746      +28     
- Misses       2469     2513      +44     

Files	Coverage Δ
lib/components/STableCellActions.vue	100.00% <100.00%> (ø)
lib/support/Text.ts	36.00% <36.00%> (ø)
lib/components/STable.vue	74.54% <40.42%> (-2.90%)	⬇️

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[kiaking]

Nicely done!

Also adjusted the code to always left align the action cell items. It was looking weird when some of the icons are hidden:

Yup, this is desirable I say. It should align left 👍

This PR won't work when actions.cell is a function.

Yeah we are so close. Confirmed that It does work with cell being function, unless user use the cell argument to do something... (passing in value and record arg here would be tough).

But I guess this limitation makes sense. It too complicated to tweak the cell type just for this.

One use case I have in mind is something I commented on #832, where we might wanna have different array rather than hiding action via show prop.

But I think for that case, we can do so by making columns reactive instead of making cell a function 👍

const isAdmin = ref(false)

useTable({
  columns: computed(() => ({
    actions: {
      type: 'actions',
      actions: getActions()
    }
  }))
})

function getActions() {
  const actions = []
  
  actions.push({ icon: 'edit', onClick: () => {} })

  if (isAdmin.value) {
    actions.push({ icon 'delete', onClick: () => {} })
  }

  return actions
}

[brc-dd]

Yeah let's merge this and close #382 for now. If we need something complex, we probably can just specify the CSS variable.

[kiaking]

Sounds good 👍