lightvue / lightvue Goto Github PK

Relevant Component(s):

1. LvToast
2. LvNotification

Description:

Icons can be configurable for Toast & Notification component.

Proposed Solution:

1. A new prop can be made to customise the icon class
2. slot can be used to fully customize / hide the icon.

Additional Info:

1. An additional prop for color can also be given.

Impact Area:

• Component Core
• Component Build
• Component Documentation
• Component Stats
• Component PlayGround Demo
• Component Demo
• Vue2.x specific Demo
• Vue3.x specific Demo
• Global Styles
• Global Configurations
• Core Utils

Relevant Component(s):

1. LvSlider(https://lightvue.org/vue-components/slider) --- sliderColor
2. LvSlider(https://lightvue.org/vue-components/slider) --- trackColor

Description:

Currently, we don't have a color pallet to set the color of the trackColor and sliderColor in LvSlider's Realtime Customizations.
Add LvColorPicker component in LvSlider component's Realtime Customizations similar to LvRating Component's Realtime Customizations.

Proposed Solution:

Use lv-color picker component in the sliderBestDemo instead of lv-input.
Check RatingBestDemo for reference.

Additional Info:

Currently in Slider Component

In Rating Component

Relevant Component(s):

1. LvSlider

Description:

There is an continuous change in cursor and a tooltip whenever the cursor is at very end of the thumb.

Impact Area:

• Component Core
• Component Demo

Relevant Component(s):

1. Playground

Description:

The Realtime Customizations section on the right in the playground is overflowing in firefox browser.

Proposed Solution:

In the current implementation, overflow property is set to 'overlay'. One can give a fallback of 'scroll' to it

Additional Info:

Expected Behaviour :

Firefox Behaviour:

Relevant Component(s):

1. LvTextarea

Description:

When LvTextarea has autoResize off, if it overflows, the browser's default scrollbar appears.

Proposed Solution:

Add the light-scrollbar class to the textarea element so that LightVue's custom scrollbar appears.

Impact Area:

• Component Core

Relevant Component(s):

1. LvRating

Description:

Add v-modal capability in the rating component

Impact Area:

• Component Core

Description:

List out the available components in README.md

Proposed Solution:

Additional Info:

This will be helpful to quick access

Impact Area:

• Component Documentation

Relevant Component(s):

1. LvOverlayPanel

Description:

When LvOverlayPanel is active, hitting ESC should dismiss/hide it

Proposed Solution:

Handle the ESC keypress event by calling the hide method.

Impact Area:

• Component Core

Relevant Component(s):

1. AppNavigationDrawer

Description:

Components can be listed in alphabetical order for better accessibility.

Proposed Solution:

Rearrangement of SideBar Navigation

Impact Area:

• Vue2.x specific Demo
• Vue3.x specific Demo
• Other Active branches

Relevant Component(s):

1. Landing page

Description:

Currently the convention followed is not correct

Proposed Solution:

Can refer to attached image for possible solution.

Current Convention

Correct Convention

Relevant Component(s):

1. Radio
2. Radio Group

Description:

Currently we are showing the Docs API of checkbox in Radio component. Make a new file for Radio component APIs.
Do the same for Radio-group component APIs as well.

Proposed Solution:

You can use the same props and events as in Checkbox component, make sure to change checkbox in the description to radio.
For example: :modelValue Array Specifies the model value of the checkbox
In place of checkbox it should be radio
:modelValue Array Specifies the model value of the radio

Additional Info:

Impact Area:

• Component Documentation

Relevant Component(s):

1. Dialog

Description:

Change the description of the following headings of the Dialog Component.

1. Main Heading description
2. Model
3. Confirmation
4. Maximizable
5. Positions

Proposed Solution:

1. Main Heading description - "Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks. LvDialog helps the user to have modal and additional dialog box with their data."
2. Model - Change the name to Modal and it description to "LvDialog modal is a dialog box/popup window that is displayed on top of the current page: They are a user experience convention to direct a user’s attention to a piece of content that they need to read or interact with."
3. Confirmation - Change the description to - "Confirmation dialogs require users to confirm a choice before the dialog is dismissed."
4. Maximizable - Change the description to - "Maximizable(Full-screen) dialogs fill the entire screen, containing actions that require a series of tasks to complete."
5. Positions - Change the description to - "You can open LvDialog from any direction left, right, top, bottom as shown below."

Additional Info:

Impact Area:

• Component Documentation

Description:

Copy button styling in Home Page install code

Proposed Solution:

Create a new minimal variant of copy-button, for landing page ony.

Additional Info:

1. Copy message isn't proper circular
2. Copy button isn't responsive to mobile devices.

Impact Area:

• Home Page [Installation Docs]

Description:

Current document is designed to work for nodeJS version upto 14.

Proposed solution:

Add warnings during installation itself. IT can be configured within package.json file.

Hello Team,

I was going though this project and noticed that there are some missing items based on the Github Community Standards recommendations that would make the project contributor friendly, e.g. a code of conduct, a license and a pull request template.

Let me know if this is something you would like to implement on this project.

Relevant Component(s):

1. Dropdown

Description:

The right side of the dropdown component have an unordered list there is no styling for list item markers while in firefox it show the list items marked with disc.

Proposed Solution:

In the current implementation, we haven't defined any styling for list items. You can set the 'list-style-type' property with a value of 'none' to hide these list item markers. So that the styling remains constant for chrome as well as firefox.

Additional Info:

Screenshots:

Google Chrome

Firefox

Relevant Component(s):

1. LvDropdown

Description:

whenever user hit back the dropdown should close instead of getting back to the previous tab

Proposed Solution:

integrate the preventBrowserBackMixin into the LvDrawer component

Additional Info:

Take a reference from LvDrawer to implement the mixin

Impact Area:

• Component Core

Relevant Component(s):

1. Rating
2. LvColorPicker

Description:

Set the width of LvColorPicker same as the width of LvNumber's width in Rating Realtime Customizations.
Currently the .lv-colorpicker-wrapper have display set to inline-block, and if we remove that property it conflicts the styling of LvColorPicker # Without Input Demo

Proposed Solution:

Make the demo of LvColorPicker -- (# without input) without setting the display property to inline-block for .lv-colorpicker-wrapper so that the width of LvColorPicker is same as of LvNumber's width in Rating Realtime Customizations.

Additional Info:

1. In LvColorPicker without Input demo

You can also change the styling of # without input demo of LvColorPicker

Checkout ColorpickerDemo2 where we are showing LvColorPicker withoutInput prop set to true.
If we remove the display of inline-block it looks like this

Make changes in ColorpickerDemo2 so that the color value and the colorpicker are inline.

2. In Rating Component

Make sure the width is same as of the glow field

How it should look like in Rating Realtime Customizations

Impact Area:

• Component PlayGround Demo
• Component Demo

Hey there!

I belong to an open source security research community, and a member (@bananabr) has found an issue, but doesn’t know the best way to disclose it.

If not a hassle, might you kindly add a SECURITY.md file with an email, or another contact method? GitHub recommends this best practice to ensure security issues are responsibly disclosed, and it would serve as a simple instruction for security researchers in the future.

Thank you for your consideration, and I look forward to hearing from you!

(cc @huntr-helper)

As the image below shows, the color-picker import is missing a dash (it should be lightvue/color-picker). Without that it seems like the library/component is not working.

I tried to find where is this in the docs repository, but couldn't.

Relevant Component(s):

1. TextEditor

Description:

I came across a problem when I tried to import a TextEditor component. When I import and use an element, I see a 404 error for the TextContent .css file. I tried to find this file in the source files, but I didn't find the file. Maybe I'm doing something wrong?

Propose

Change ./style/TextContent.css to ./lightvue.css.

Additional Info:

Relevant Component(s):

1. Dropdown

Description:

In Dropdown component, the code preview section of the playground in not scrollable in firefox.

Proposed Solution:

In the current implementation, lightvue-scrollbar overflow property is set to 'overlay', which is an invalid property value for firefox.

Additional Info:

Expected Behaviour :

Google Chrome

Firefox

While the behaviour in firefox is something like this

Relevant Component(s):

1. Light Icons

Description:

Import Light Icons directly from CDN to stay always on latest version.

Proposed Solution:

CDN import link:

1. https://unpkg.com/light-icons/dist/light-icon.css
2. https://unpkg.com/light-icons/dist/light-icon.json
3. Remove Light Icons dependency from package.json file

Additional Info:

Same CDN way can be added in Light-icons documentation as well.

Impact Area:

• Vue2.x specific Demo
• Vue3.x specific Demo
• Global Configurations

Relevant Component(s):

1. Rating

Description:

When showRating prop is true the rating works properly but when it is false then it makes the whole rating element disabled instead of hiding the rating value(selected stars value)

Proposed Solution:

Check the if condition used to show rating value when showRating prop is true.

Additional Info:

Hi there, nice library, but what license is it in ?

Relevant Directive(s):

1. LvTooltip

Description:

LvTooltip fails on LvInput, since LvInput uses focus-within instead of focus

Proposed Solution:

Add a new focus-within event in tooltip-directive

Impact Area:

• Component Core

As can be seen in the image below, I have an application which uses both Vuetify and LightVue. In this app, I have a dialog (from Vuetify), where a color-picker (from LightVue) is used. When I click the color-picker, it's menu is shown behind Vuetify's dialog.

Is there a way to fix that? Maybe a property somewhere?

Hello,
congratz for the usefull and nice components libs.
I'm integrating the vue3 color picker.
There is a bug, you can see it on the docs to, when you set a color, close the picker and reopen it, the color chooser stay positioned on the initial state.

Relevant Component(s):

1. LvCollapsible

Description:

Add a prop value by which a user can defines a transition between a start and end values (easing)

Proposed Solution:

one can use the use the prop value where we are setting the transitions

Impact Area:

• Component Core
• Component Documentation
• Component Demo

Relevant Component(s):

1. LvDialog

Description:

whenever user hit back the dialog should close instead of getting back to the previous tab

Proposed Solution:

integrate the preventBrowserBackMixin into the LvDialog component

Additional Info:

Take a reference from LvDrawer to implement the mixin

Impact Area:

• Component Core

Relevant Component(s):

1. V3 Docs

Description:

The CodePrism Components in the V3 Docs Website don't have the same formatting as there is in V2 Docs

Proposed Solution:

A clear and concise description of what you want to happen.

Additional Info:

Impact Area:

• Component Documentation

Relevant Component(s):

1. LvColorpicker

Description:

The Eyedropper tool should be added to the LvColorpicker component to allow users to pick colors from their screen. Enable this tool only if supported by the browser.

Proposed Solution:

(https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper)

Impact Area:

• Component Core
• Component Build
• Component Documentation
• Component PlayGround Demo
• Component Demo
• Vue2.x specific Demo
• Vue3.x specific Demo

Relevant Component(s):

1. LvNumber

Description:

Fix the type Casting error in LvNumber

Additional Info:

Impact Area:

• Component Core

Description:

Add LightVue official video in README.md & Home Page

Proposed Solution:

Try to embed this official video of the LightVue:
https://www.youtube.com/watch?v=fjYPDdf4rGA&t=9s

Additional Info:

You can also start creating your videos and list here in this project.

Impact Area:

• README.md
• Home Page [Documentation]

Relevant Component(s):

1. Landing Page

Description:

Fix the spelling mistakes on landing page
or in any section you find

Description:

The page title for each component should change depending on the component in view.
Eg. If the user is viewing docs for Textarea, i.e. the URL is https://lightvue.org/vue-components/textarea, the title of the page should be LightVue | Textarea Docs

Proposed Solution:

Add the title property in head of each core component that has its title missing.

 <lv-textarea
     :bottom-bar="true"
     :showLimit="true"
     :autoResize="true"
     :maxLength="100"
     :rows="3"
     placeholder="Textarea Placeholder"
     label="Textarea Label"
     placeholder-color="rgba(0, 0, 0, 0.3)"
 />

Relevant Component(s):

1. LvNumber

Description:

The number input should only be taking integers as input, however, with the current implementation, the user can input characters. You have to ensure that it only takes numbers as input.

Additional Info:

Impact Area:

• Component Core
• Component Build

Description:

Problem : For any new Developer joining in this project, it may happen that node version developer use would be incompatible with this project which will cause issues. Therefore .nvmrc config would solve this problem by auto selecting the node version from config file if nvm is installed.

Proposed Solution:

A clear and concise description of what you want to happen.

Additional Info:

Impact Area:

• Component Core
• Component Build
• Component Documentation
• Component Stats
• Component PlayGround Demo
• Component Demo
• Vue2.x specific Demo
• Vue3.x specific Demo
• Global Styles
• Global Configurations
• Core Utils
• Other Active branches
• Breaking Change (Not backward compatible)

Relevant Component(s):

1. Card

Description:

In Background color and padding demo of the Card component, where padding is 40px the content is going out of the container. Make changes in only CardPaddingAndBGcolorDemo Component.

Proposed Solution:

In .card-demo class you can change the height from 300px to max-content. But make sure it only reflect in CardPaddingAndBGcolorDemo component and not in other components.

Additional Info:

Currently:

After:

Impact Area:

• Component PlayGround Demo
• Component Demo

Relevant Component(s):

1. LvDialog

Description:

Make the dialog component compatible for Vue3

Impact Area:

• Component Core
• Component Demo
• Vue3.x specific Demo