# @soramitsu-ui/ui

> ## Usage

Latest version **0.13.15** (published 2024-11-11) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @soramitsu-ui/ui
pnpm add @soramitsu-ui/ui
yarn add @soramitsu-ui/ui
bun add @soramitsu-ui/ui
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.13.15 |
| Published | 2024-11-11 |
| First published | 2021-12-27 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 2.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | soramitsu-admin |

## Links

- npm: https://www.npmjs.com/package/@soramitsu-ui/ui
- npm.io page: https://npm.io/package/@soramitsu-ui/ui

## Dependencies (10)

- [vue](https://npm.io/package/vue.md) ^3.3.4
- [date-fns](https://npm.io/package/date-fns.md) 2.20.3
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [focus-trap](https://npm.io/package/focus-trap.md) ^6.7.1
- [jsoneditor](https://npm.io/package/jsoneditor.md) ^9.5.5
- [@vueuse/core](https://npm.io/package/@vueuse/core.md) 9.2.0
- [@vueuse/math](https://npm.io/package/@vueuse/math.md) 9.2.0
- [@popperjs/core](https://npm.io/package/@popperjs/core.md) ^2.10.2
- [@vue-kakuyaku/core](https://npm.io/package/@vue-kakuyaku/core.md) ^0.4.3
- [escape-string-regexp](https://npm.io/package/escape-string-regexp.md) ^5.0.0

## Recent versions

- 0.13.15 (latest) — 2024-11-11
- 0.13.14 — 2024-09-23
- 0.13.13 — 2024-08-07
- 0.13.12 — 2024-07-31
- 0.13.11 — 2024-07-11
- 0.13.10 — 2024-06-18
- 0.13.9 — 2024-06-18
- 0.13.6 — 2024-05-14
- 0.13.5 — 2024-05-13
- 0.13.4 — 2024-03-21
- 0.13.3 — 2024-02-26
- 0.13.2 — 2024-02-01
- 0.13.1 — 2023-09-08
- 0.13.0 — 2023-08-28
- 0.12.0 — 2023-08-07
- … 13 more at https://npm.io/package/@soramitsu-ui/ui/versions

## README

# ui

## Usage

Styles import:

```ts
import '@soramitsu-ui/ui/styles'
```

All-in-one plugin:

```ts
import { plugin } from '@soramitsu-ui/ui'
import { createApp } from 'vue'

const app = createApp({}).use(plugin())
```

A-la-carte:

```vue
<script setup>
import { SButton } from '@soramitsu-ui/ui'
</script>

<template>
  <SButton>Click</SButton>
</template>
```

## Migration

### SMenu

SMenu components were renamed:

- `SMenu` -> `SNavigationMenu`
- `SSubmenu` -> `SNavigationSubmenu`
- `SMenuItem` -> `SNavigationMenuItem`

`router` property removed:\
There are no need for `router` as it was just call push with selected item `index`.

`index` property in `SMenuItem`(`SNavigationMenuItem`) renamed to `value`.

Toggling `SNavigationSubmenu` doesn't call `SNavigationMenu` `select` event.

### STable

There are columns sending reactive data to table with provided register function.
So creating table column prop values in template (like `:selectable="() => {}"`) causes recursive rerender,
as every render creates new value for prop which triggers another render.

Column type `index` removed and so is prop `index`.

All events now have naming: `mouse-enter:cell` or `change:expand` instead of `cell-mouse-enter` or `expand-change`

Added column type `details` removed and event `click:row-details`.

`align` in column options (like in events) now has values without `is-` prefix.

Callbacks for `headerCellStyle` and `headerCellClassName` now called without row information
and callbacks for `headerRowStyle` and `headerRowClassName` now don't have parameters at all,
because they don't have ones

Removed header filtration:

- Props: `filters`, `filterPlacement`, `filterMultiple`, `filterMethod`, `filteredValue`, `columnKey`
- Method `clearFilter`
- Event `filter-change`

Removed summary:

- Props: `showSummary`, `summaryMethod`, `sumText`

Removed tree rows:

- Props: `treeProps`, `load`, `lazy`, `indent`

Removed `property` and `showTooltipWhenOverflow` prop, which were aliases to `prop` and `showOverflowTooltip`.

Removed `renderHeader` prop (use slot instead).

Removed `resizable` prop, and so is `header-dragend` event.

Removed `stripe` and `border` props, as there are no design for them.

Removed public method `doLayout`, because resize observables should be enough.

Added adapted version of table which is a card grid without header and is used when table width is lower
than value defined by `adaptBreakpoint` prop. Number of gird columns defined by prop `cardGridBreakpoints`.
There rows are cards with label-value list. There are no sort and current row highlighting. Multiple rows selection can
be done by clicking on card.

### SPagination

There are removed props due to design restrictions: `small`, `background`, `pagerCount`, `layout`, `prevText`,
`nextText`, `disabled`, `hideOnSinglePage`, `pageCount`, `popperClass`.

Removed `size-change` and `current-change`. Use `update:currentPage` and `update:pageSize` instead.

Replaced `prev-click` and `next-click` with `click:prev` and `click:next`.

---
_Source: https://npm.io/package/@soramitsu-ui/ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._