rotki/ui-library-compat

Partial backport of rotki/ui-library for vue 2

ui-library-compat's Issues

allow `errorMessages` and `successMessages` to be string

For all forms that have errorMessages and successMessages, allow them to be array | string

It is mostly used in settings.

Table: add support to disable single row selection

Description

Each table row can be selected if a v-model is passed to the table component, need to be able to disable the checkbox for some rows as shown here

Menu select adjustments

Description

after integrating with the app, some things need to be adjusted.

Tasks

• make the height match with what we have on the design
• allow custom height for the activator and the menu items (ensure scrolling works smoothly)
• top border is missing for outlined variant when there is a value
• add focus outline/background highlight
• add readonly state to the activator
• prevent layout jumps when the activator is focused
• prevent layout jumps for floating label variant when un/focusing
• focus on the activator after selection

RuiLogo: fallback for custom-src

We need to add fallback mechanism for RuiLogo to use default icon, in case the app failed to load the custom-src (in this case, it will show broken file icon)

`<RadioGroup>` should pass its props to the `<Radio>` children

Props such as color from <RadioGroup> should be passed to it's children too

add `useListeners` for `RuiTooltip`

Description

Tasks

Make `<RuiButton>` support RouterLink

Create `<TextArea />` component

https://www.figma.com/file/msxmKajRPLYiDDmsP60Ndh/Design-System-v1.1?type=design&node-id=7551-51690&mode=design&t=M74CpcyKs7Sx7CgJ-4

Implement `:item-class` to RuiDataTable

Implement :item-class to RuiDataTable, to give class to each row, based on the item on the row.

The usecase: I want to dim the row (opacity-50) if the entry is ignored.

itemClass: (item: T) => string

add some props for `<RuiTextField />`

Description

Changes needed for<RuiTextField />:

• add props clearable
• add emit @click.clear

add prop 'close-icon' for `<Chip />`

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

• chore(deps): update babel monorepo to v7.24.5 (@babel/core, @babel/types)
• chore(deps): update dependency @fontsource/roboto to v5.0.13
• chore(deps): update dependency @types/node to v20.12.11
• chore(deps): update dependency bumpp to v9.4.1
• chore(deps): update dependency eslint-plugin-cypress to v2.15.2
• chore(deps): update dependency tsc-alias to v1.8.10
• chore(deps): update dependency typescript to v5.4.5
• chore(deps): update dependency unplugin-auto-import to v0.17.6
• chore(deps): update dependency unplugin-vue-define-options to v1.4.4
• chore(deps): update dependency vite to v5.2.11
• chore(deps): update dependency vue-tsc to v2.0.17
• chore(deps): update pnpm to v9.1.1
• chore(deps): update storybook monorepo to v7.6.19 (@storybook/addon-essentials, @storybook/addon-interactions, @storybook/addon-links, @storybook/blocks, storybook)
• chore(deps): update commitlint monorepo (@commitlint/cli, @commitlint/config-conventional)
• chore(deps): update dependency @vueuse/core to v10.9.0
• chore(deps): update dependency @vueuse/math to v10.9.0
• chore(deps): update dependency @vueuse/shared to v10.9.0
• chore(deps): update dependency cypress to v13.9.0
• chore(deps): update dependency remixicon to v4.2.0
• chore(deps): update dependency sass to v1.77.1
• chore(deps): update react monorepo to v18.3.1 (react, react-dom)
• chore(deps): update vitest monorepo to v1.6.0 (@vitest/coverage-v8, @vitest/ui, vitest)
• chore(deps): update dependency css-loader to v7
• chore(deps): update dependency eslint to v9
• chore(deps): update dependency eslint-plugin-cypress to v3
• 🔐 Create all pending approval PRs at once 🔐

Detected dependencies

github-actions

.github/workflows/ci.yml

• actions/checkout v4
• pnpm/action-setup v3
• actions/setup-node v4
• actions/checkout v4
• pnpm/action-setup v3
• actions/setup-node v4
• actions/cache v4
• cypress-io/github-action v6
• actions/upload-artifact v4
• actions/upload-artifact v4
• codecov/codecov-action v4

.github/workflows/codeql-analysis.yml

• actions/checkout v4
• github/codeql-action v3
• github/codeql-action v3
• github/codeql-action v3

.github/workflows/deploy.yml

• actions/checkout v4
• pnpm/action-setup v3
• actions/setup-node v4
• actions/upload-pages-artifact v3
• actions/deploy-pages v4

.github/workflows/release.yml

• actions/checkout v4
• actions/setup-node v4
• actions/checkout v4
• pnpm/action-setup v3
• actions/setup-node v4

npm

example/package.json

• pinia 2.1.7
• tailwindcss 3.4.3
• vue 2.7.16
• vue-router 3.6.5
• @tsconfig/node20 20.1.4
• @types/node 20.12.7
• @vitejs/plugin-vue2 2.3.1
• @vue/tsconfig 0.5.1
• autoprefixer 10.4.19
• cypress 13.7.2
• postcss 8.4.38
• start-server-and-test 2.0.3
• typescript 5.4.4
• vite 5.2.8
• vue-tsc 2.0.12

package.json

• @babel/core 7.24.4
• @babel/types 7.24.0
• @commitlint/cli 19.2.1
• @commitlint/config-conventional 19.1.0
• @fontsource/roboto 5.0.12
• @popperjs/core 2.11.8
• @rotki/eslint-config 2.7.0
• @storybook/addon-essentials 7.6.17
• @storybook/addon-interactions 7.6.17
• @storybook/addon-links 7.6.17
• @storybook/addon-styling 1.3.7
• @storybook/addons 7.6.17
• @storybook/blocks 7.6.17
• @storybook/testing-library 0.2.2
• @storybook/vue 7.6.17
• @storybook/vue-vite 7.6.17
• @types/node 20.12.7
• @types/tinycolor2 1.4.6
• @vitejs/plugin-vue2 2.3.1
• @vitest/coverage-v8 1.4.0
• @vitest/ui 1.4.0
• @vue/test-utils 1.3.6
• @vue/tsconfig 0.5.1
• @vueuse/core 10.7.2
• @vueuse/math 10.7.2
• @vueuse/shared 10.7.2
• argparse 2.0.1
• autoprefixer 10.4.19
• babel-loader 9.1.3
• bumpp 9.4.0
• css-loader 6.11.0
• eslint 8.57.0
• eslint-plugin-cypress 2.15.1
• eslint-plugin-storybook 0.8.0
• fast-glob 3.3.2
• fast-xml-parser 4.3.6
• fs-extra 11.2.0
• husky 9.0.11
• jsdom 24.0.0
• lint-staged 15.2.2
• postcss 8.4.38
• react 18.2.0
• react-dom 18.2.0
• remixicon 4.1.0
• sass 1.74.1
• scule 1.3.0
• storybook 7.6.17
• tailwindcss 3.4.3
• tinycolor2 1.6.0
• tsc-alias 1.8.8
• typescript 5.4.4
• unplugin-auto-import 0.17.5
• unplugin-vue-define-options 1.4.3
• vite 5.2.8
• vitest 1.4.0
• vue 2.7.16
• vue-loader 17.4.2
• vue-router 3.6.5
• vue-template-compiler 2.7.16
• vue-tsc 2.0.12
• vue-router >=3.6.5 <4
• @vueuse/core >10.0.0
• @vueuse/shared >10.0.0
• vue >=2.7.14 <3
• pnpm >=9 <10
• pnpm 9.1.0

nvm

.nvmrc

• node v20

---

• Check this box to trigger a request for Renovate to run again on this repository

Create `<Switch />` component

Description

Tasks

Dialog component

Migrate dialog component from ui-library

Create `<Switch />` component

https://www.figma.com/file/msxmKajRPLYiDDmsP60Ndh/Design-System-v1.1?type=design&node-id=6564-39128&mode=design&t=M74CpcyKs7Sx7CgJ-4

Table: support multi page selection

Description

Add an option to choose which behaviour for the table selection

1. persist the selected rows in the table, and keep the selection even after the page/sort change, but reset it after search change.
2. reset the selection by sort/page/search change.

Table: allow sorting for column with BigNumber value

Description

• Allow sorting for column with BigNumber value.

Checkbox selection in DataTable

Before delete

After delete

It seems the selection data is remained after deletion.

when the multiPageSelect is false, we need to check if the id still exist in the data, if not we need to remove it from the selection state

Fix subheader in card

For <RuiCard />, for the subheader, dont use p (or at least remove the margin-bottom)

Card content without padding

Add props to card to remove the padding for the content.