primevue/splitter: There is a huge bug or rather a very necessary requirement here.

zhanghengxin commented 1 year ago

Describe the bug

Firstly, I pursue a clean and tidy feeling, so my choice is to use Tailwind with PrimeVUE without styles.
Then this is my dome repository: https://github.com/lit-oppai/raid-ts/commit/9b599c6249609e83c858fbacc6d25571241805d0

My goal is: 1. Always use Tailwind to write style parts. 2. Use splitter to split pages. 3. On large pages, use the splitter function normally and set the initial size to left 20%, right 80%, and it can be dragged. However, when on mobile, I want to lock the left width.

Here is the problem, below the md breakpoint, I can lock the width by setting styles, but the unstyled Prime will use flex to leave 100% - 80% - left side value set as empty space.

Now my hope is (any of):

Can directly simply override through Tailwind while retaining the dragging functionality of the splitter component.
(Not a very preferred solution) Let me pass values in JS to tell the component when the dragging functionality becomes invalid.
Inform the component of breakpoint functionality, i.e.: at what breakpoint to set what width.

Reproducer

https://codesandbox.io/p/sandbox/interesting-sound-dsq4f9?file=%2Fpackage.json%3A13%2C22

PrimeVue version

3.40.1

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

3.29.0, it not have the bug.

^3.39.0， This problem starts with version 3.39.0 or later. link:https://github.com/orgs/primefaces/discussions/434

Expected behavior

No response

zhanghengxin commented 1 year ago

follow this ：https://github.com/primefaces/primevue/pull/4801

zhanghengxin commented 1 year ago

@melloware

After careful consideration, I believe that the no-style mode does indeed not support adding styles. However, for components, it should be designed to accommodate as many scenarios as possible. In a fixed panel scenario, for example, (which can have many variations), the remaining panels should automatically fill the remaining space. One simple way to achieve this is by using flex-grow: 1.

tugcekucukoglu commented 1 year ago

Since it is a demo related situation, you can solve it using pt.

primefaces / primevue