epicmaxco / vuestic-ui

Free and Open Source UI Library for Vue 3 🤘

Vue.js 3.0 UI Library
Developed by Epicmax. Designed by Vasili Savitski.

Documentation | Discord

Vuestic UI is forever free and open to contributions. See our issues, contributing guide and join discussions on our Discord to help us improve Vuestic UI experience.

Quick start

Use following command to quickly scaffold new Vite or Nuxt project with Vuestic or Vuestic Admin

npm create vuestic@latest

Documentation

Documentation, guides, examples and tutorials are available on ui.vuestic.dev

Partners & Sponsors ❤️

Thanks to BrowserStack for providing the infrastructure that allows us to test using all possible browsers.

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and prevent visual regressions.

Become a partner: [email protected]

Community

Feel free to ask any questions or contact us at the official community Discord server

Vuestic Admin

See Vuestic UI library in action. Vuestic Admin is a great example of a real-world web application based on Vuestic UI.

Contributing

Thanks for all your wonderful PRs, issues and ideas.

You’re always welcome to join: check out our contribution guides , open issues and Discord server

Can I hire you guys?

Epicmax is committed to Open Source from its beginning. Vuestic UI was created and backed by Epicmax, and is supported through all the years. You can request a consultation or order web development services by Epicmax via this form 😎

Say hi: [email protected]. We will be happy to work with you!

Other work we’ve done 🤘

Meet the Team

Follow us

Stay up to date with the latest Vuestic news! Follow us on Twitter or Linkedin

License

MIT license.

vuestic-ui's Issues

Vuestic ui 1.0 roadmap

• Popular frameworks analysis
• Conventions of component design

How to add new components to this task

• copy structure from "ready for implementation" task;
• check and analyze implementations of following frameworks: Quasar, Vuetify, Ant Design, iView, Element UI, add relevant implementations to references;
• do additional research if that's needed (component combinations, transitions, prop interactions etc);
• check existing solutions. Implemented in full features are not to be included in issue.

Pages

Getting started

• Overview - needs more text
• Roadmap
• Quick start (requires #232)
• Introduction - not implemented
• Meet the team - not implemented.

Styles

• Grid - implemented
• Breakpoints Implemented, but not in volume we need.
• Layout - not implemented

UI Components

• Affix - all good.
• Alert - all good
• Avatar - all good
• Backtop - good overall
• Badge - good overall
• Breadcrumbs - good overall.
• Button - good overall.
• Button Group - docs missing (docs PR)
• Button Dropdown - several bugs. (docs PR)
• Button Toggle - docs missing (docs PR)
• Card - good overall.
• Carousel - has PR, review required
• Chat - not implemented
• Checkbox - good overall
• Divider - good overall
• Expand group - all good.
• Expand - has commented tests, need to be fixed or removed
• Form - good overall.
• Hover - good overall
• Icon - all good
• Image - implemented
• Infinite Scroll - good overall.
• Inner Loading - docs missing (docs PR)
• Input - #101 - has issue, need some research
• List - all good
• Modal - some features are not here, but these are not a priority and can be postponed to 1.1.
• Option List - good overall.
• Pagination - good overall.
• Parallax - good overall
• Progress bar - good overall
• Rating - good overall
• Select - all good
• Slider - good overall.
• Switch - done
• Tabs - mostly done, some small issues, but can be postponed to later versions.
• Tag - all good
• Timeline - operational, but overhaul might be nice as previously no extensive research was being done and component is off for a number of reasons.

Services

• Toast - review fixes needed & merge

Other

• CI - we have everything we need deployed automatically.
  https://github.com/epicmaxco/vuestic-ui/issues/new?assignees=&labels=&template=other-template.md&title=
• Themes 2.0 - not at the point where we want it to be. See task for details.
• Edit documentation text - docs are sometimes using subpar english. That has to be streamlined before release.
• - icons don't look good

Pre release test

Test documentation site:

• browser support (mainly safari and mozilla) - all pages
• check with lighthouse and ensure things look decent
• mobile version on actual device - all pages
• get feedback from developers if they think something is missing

Test functionality:

• all tests/demos should be functional
• ensure admin project works properly with new build

Immediately before release stuff

• Crowd test (See "Pre release test")
• Send invites for discord
• Merge admin to master
• update version to rc-1 (and in roadmap)
• Proofread docs pages

Documentation components

• sandbox

va-toggle has incorrect touched area

va-toggle touched area is more than element
Example:

File upload shadow

/demo/vuestic-components/va-file-upload/VaFileUpload.demo.vue

There should be no bottom green line.

Rounded corners should be consistent for top and bottom.

va-chart wrong props

• I'm submitting a ... bug report

vuestic-ui/src/components/vuestic-components/va-chart/VaChart.vue

Line 6 in d81dd98

:options="options"

:options does not match the props name in chartMixin

should it be chartOptions ?

Vertical tabs

Va-tabs should have vertical prop.
It can be also useful for some extensions

References

• vuetify
• quasar

Divider component

Docs

• Do after docs boilerplate is done.

Props

• vertical: Boolean - displays divider vertically
• dashed (*): Boolean - whether line is dashed
• inset (*): Boolean - if set to true, the left and right margins will be added; reduces max height for vertical divider
• orientation: String - ['left', 'right', 'center'] - position of title inside divider (for horizontal only)

Slots

• default - insert content (for horizontal only)

Design

• Present to @xx13 after finishing.

Notes

• Should work with va-list

Refs

• Vuetify
• Quasar
• Ant Design
• iView
• Element UI

Markup table component

Docs

• Do after docs boilerplate is done.

Props

• separator: String - default: 'horizontal', accepted values: 'horizontal', 'vertical', 'cell', 'none' - use a separator/border between rows, columns or all cells
• flat: Boolean - applies no default shadow view.
• square: Boolean - removes border-radius from table

Refs

• Quasar

Expand component

Docs

• requires some design tweaks (icon has wrong size and off padded)
• Requires context applied and tested.

Mixins

• context
• stateful

Notes

• Component already exist and is called VaCollapse.
• We also have VaAccordion component, which serves as a wrapper. You don't have to concern yourself with accordion at this point, as it will be handled in separate issue.

Props

• disable: Boolean
• value: Bollean (v-model) - should replace default-value.

Slots

• header
• default

Design

• Present to @xx13 after finishing.

Refs

• Quasar
• Vuetify

Select component

Docs

• We want fully functional documentation for this component in context of this issue.

Mixins

• Context
• FormComponent
• Stateful
• SelectableListMixin (options, textBy, trackBy, valueBy, disabledBy)

Props

• chips: Boolean - changes display of selections to chips
• deletable-chips: Boolean - adds a remove icon to selected chips
• hide-selected: Boolean - do not display in the select menu items that are already selected
• allowCreate: Boolean - whether creating new items is allowed
• clearIcon: String - custom icon to use for the clear button
• dropdown-icon (*): String - custom icon to use instead of default dropdown icon
• filter: (option: any, searchText: string, optionText) => boolean - the function used for filtering items

Visual:
Consult with @xx13 before implementing

• outlined: Boolean
• filled: Boolean

Slots

• option slot should have all relevant data as scoped slot.
• prepend - adds an item before input content
• prepend-inner - prepends an item inside input content
• append - adds an item after input content
• append-outer - appends an item inside input content

Events

• create: (value: string) => void
• change - emitted when the input is changed by user interaction
• clear - emitted when the clear icon is clicked

Design

• Present to @xx13 after finishing.

Notes

• Should allow router view props
• va-message-list should be integrated in this component
• Suggested slots should be used instead of anchor slot
• Check this issue epicmaxco/vuestic-admin#718

Refs

• Vuetify
• Quasar
• Ant Design
• iView
• Element UI

Author

• @asvae

Pagination component

Docs

• Do after docs boilerplate is done.

Mixins

• Context
• Stateful
• Color

Props

• total: Number - total number of data items
• page-size: Number - number of data items per page
• text-color: String - use theme plugin for text
• circle (*): Boolean - shape pagination elements as circles
• input: Boolean - use an input instead of buttons
• boundary-numbers: Boolean - always show first and last page buttons
• hide-on-single-page: Boolean - whether to hide when there's only one page
• flat: Boolean - shouldn't display border if set to true

Events

• input - emitted when the component needs to change the model;
• size-change - triggers when page-size changes
• next (*) - emitted when going to next item
• previous (*) - emitted when going to previous item

Design

• Present to @xx13 after finishing.

Notes

• Should work with va-data-table
• Check button props

Refs

• Vuetify
• Quasar
• Ant Design
• Element UI

Affix component

Description

By using affix, user can fix the content at the screen position and it won't scroll with page scrolling.

Docs

• Do after docs boilerplate is done.

Props

• offset-top: Number - pixels to offset from top when calculating position of scroll
• offset-bottom: Number - pixels to offset from bottom when calculating position of scroll

Events

• change - emit when affix state is changed

Refs

• Ant Design
• iView

Hover component

Description

Wrapper, which provides an interface for handling hover state for any component.

Docs

• Do after docs boilerplate is done.

Props

• value: Boolean - v-model (if provided - component becomes stateless)
• disabled: Boolean

Slots

• default - should pass down hover (v-slot:default="{ hover }")

Details

• Should not create a wrapper element (such as parent div).

Refs

• Vuetify

Default props for vuestic components

Gist

Quite often we want to provide app-wide defaults for a component, which doesn't correspond to framework default. Standard solution for this is to provide a wrapper component that overrides props and exposes needed methods. Wrapper, yet powerful, is heavy overhead and in many cases that power is not needed.

• Provide component default is vuestic config on app initialization.
• Make config reactive, so that view reacts to updates (useful for presentation).

Example

new Vuestic({
  components: {
    input: {
      outline: true,
      square: true,
    },
    button: {
      small: true,
    }
  }
})

normalize.css is not in the list of dependencies

normalize.css should be added to package.json, else the build fails if it's not already installed.

List component

Docs

• Do after docs boilerplate is done.

Props

List

• separator: Boolean
• bordered: Boolean

List Item

• to: String/Object support vue-router
• exact/append/replace: Boolean support vue-router
• tag: String use 'label' with checkbox/radio
• clickable: Boolean

List Item Section

• avatar: Boolean reserve space for an avatar 48px
• side: Boolean reserve space for an icon 24px

List Item Label

• caption: Boolean small text
• lines: String/Number apply ellipsis based on the number of lines

Design

• Present to @xx13 after finishing.

Refs

• Quasar
• Vuetify

Content component

Docs

• Do after docs boilerplate is done.

Notes

• Just wrap existing content class into component. We don't need to document global class usage, only component itself.
• Move demos and docs to component scope.

Refs

• old issue

Icon

Gist

• We need to get interaction and scalability right. Singular features (like rotation, opacity etc) can wait.
• We want to support the following icon handling approaches: ligature font-icons, class font-icons, svg icons (component icons).

High level plan

• Implement icon service (Example)
• Implement icon component

Icon service

• We want to rely on context system. So, basically, we'll have global config, optional context-component in-between, then props. Context and props should function in a similar way as per usual.

Icon component

What is iconset
Iconset is Record<string, IconConfig>. IconConfig is an object, that can be used to define an icon fully without any additional props.

Why this config is important?

• Allows us to define icon alias in service config, and the thing with icons is that in many cases in app you want to use the same icon.
• Having config will allow us to fully support icon sets of any type.
• Makes icons testable and easier to reason about.

Props

• tag: String - default: 'i' - specifies a custom tag to be used
• size - use sizeMixin, also see size docs.
• name: String - name (alias) of icon. Not contextable
• iconSet: String - name of icon set to be used to derive icon config from icon name (alias). Icon set itself should be defined in the context (only exception is material icons).
• 'config: IconConfig' - icon config should represent all relevant props. It's priority should be below props and above context. If both config and context are provided - component should disregard context while handling config, there should be no merge between the two. This prop is purely for testing, as we want to ensure config and props are working predictably in all cases.
• color - use ColorThemePlugin
• add other relevant props so that icon system supports all 3 types of icons.

Slots

• default - this slot is fairly magical. We might leave it for later iterations. See vuetify example for things we might want from it.

Events

• All events are to be propagated.

Docs

• We need docs.

Other

• Icon component should function without context, while using material design iconset.

Low priority tasks

• Cover each icon solution with iconset. We might want these to be tree-shaked. It would make sense to split all other iconsets (apart from material icons) into different issue. Ensure iconsets are properly tested.
• We might want to support some of font-awesome features. Like animation, rotation and grouping.

Refs

• Vuetify
• Quasar
• Ant Design
• iView
• Element UI

Badge component

Docs

• Do after docs boilerplate is done.

Props

• transparent: Boolean
• multiLine: Boolean
• label: [String, Number]
• bottom: Boolean
• left: Boolean
• overlap: Boolean
• color: String - use theme plugin
• textColor: String - use theme plugin
• dot: boolean
• visibleEmpty: boolean - should show badge when no value is passed (default behaviour is hide).

Design

• Transition on change (on value change, on disappearing, changing to dot etc.
• Present to @xx13 after finishing.

Notes

• Native events are to be propagated
• content could be passed via slot or via label prop. Slot has priority if both are declared.
• Badge should be visible when no value is passed.
• Should allow to be used on same level as text goes (see quasar ref). Add needed prop to issue and component.

Refs

• Quasar
• Vuetify
• Ant-design

Author

• @asvae

Backtop component

Docs

• Do after docs boilerplate is done.

Props

• target: String | HTMLElement - the target to trigger scroll
• visibility-height: Number - default: 400 - the button will not show until the scroll height reaches this value
• right (*): Number - default: 40 - right distance
• bottom (*): Number - default: 40 - bottom distance

Slots

• default - Backtop content

Events

• click - triggers when backtop button is clicked

Notes

• Default version should have va-button with upward arrow in slot.

Refs

• Ant Design
• Element UI

Timeline component

Docs

• Do after docs boilerplate is done.

Timeline

Props

• side: String - default: 'right', optional values: 'left' | 'right' - side to place the timeline entries
• color: String - color for all timeline entries from theme plugin
• layout (*): String - default: 'dense', accepted values - 'dense' | 'comfortable' | 'loose' - layout of the timeline. Dense keeps content and labels on one side. Comfortable keeps content on one side and labels on the opposite side. Loose puts content on both sides.
• reverse (*): Boolean - reverse direction of timeline items

Slots

• default

Timeline Entry

Props

• title: String - title of timeline entry
• timestamp: String
• color: String - color for component from theme plugin
• side: String - default: 'right', accepted values: 'left' | 'right' - side to place the timeline entry
• heading (*): String - defines a heading timeline item
• tag (*): String - default: 'h3' - tag to use, if heading prop used only

Slots

• default
• icon - used to customize the icon inside the timeline item's dot
• opposite (*) - used to customize the opposite side of timeline items

Design

• Present to @xx13 after finishing.

Refs

• Vuetify
• Quasar
• Ant Design
• Element UI

Breakpoints / screen service

Previous progress

• Check this issue. We want to improve on existing solution.

Docs

• Do after docs boilerplate is done.
• Provide some general information on flexbox in context of vuestic grid syntax. Intended for new user, who might be not proficient in flexbox.
• Playground.

Introduction

• Breakpoints are used in 2 places: as a JS service and in css classes. We want both.
• For exact breakpoint number we use material design solution

Breakpoint service

• Support breakpoints xs, sm, md ,lg, xl.
• Allow modifying thresholds on app initialization.
• Create getters for conditional breakpoints on app initialization (i.e. mdAndUp, see also #1193)
• provide current breakpoint
• provide width and height
• expose thresholds as numbers. (i.e. $va.screen.thresholds.xs). There should be no threshold for highest breakpoint.

Notes

• All exposed methods and properties should be reactive.
• We want implementation to be bound via inject/provide to be able to test specific breakpoints more easily.

CSS implementation

------------------- [TODO] --------------------

Notes

• The intention for thresholds declaration is to provide them separately for scss and js. But feel free to investigate/play around with universal declaration, i.e. json file. We want to understand trade-offs.
• See also #774

Refs

• Vuetify

Breadcrumbs component

Docs

• Do after docs boilerplate is done.

Breadcrumbs Component

Props

• separator: String - default: / - specifies the dividing character between items
• align: String - default: left - should use flex mixins (check quasar implementation + please don't use global classes!), also please move into mixin (both css and js, pretty sure we'll need this elsewhere),
• color: String - colors everything (use color theme mixin)
• active-color: String - colors active items (that means not last one) (use color theme mixin)
• separator-color (*): String - separator color (use color theme mixin)

Slots

• default- expected: breadcrumbs item
• separator - HTML or component you can slot in to separate the breadcrumbs - slot takes priority if prop and slot are both defined

Breadcrumbs Item Component

Props

• to / replace / exact / append - router props (use mixin for vue-router props)
• disabled: Boolean

Design

• Present to @xx13 after finishing.

Refs

• Vuetify
• Quasar
• Ant Design
• iView
• Element UI

Alert component

Mixins

• Stateful mixin
• Color

Props

• title: String - title should be optional. (alert should look fine with description alone).
• description: String
• center: Boolean - add center alignment for title and description
• icon: String - icon alias.
• closeable - displays close area on component.
• `close-icon: String, default: (find correct icon)
• close-text: String - if this prop is provided text should be shown instead of icon.

Slots

• default - insert description
• title - insert title
• icon - insert icon from the left side of alert description. Overrides prop if it's set.
• close - replace close icon area. Slot overrides close-icon and gets onClose method from scope scope.

Events

• input - fires when close icon is clicked. This should work with slot as well.

Design

• Present to @xx13 after finishing.

Notes

• This component named as va-notification in vuestic-ui
• Test various text sizes to prevent overflow issues (i.e. when title goes below close icon).

Refs

• Vuetify
• Ant Design
• Element UI

Inline disabled va-date-picker

• I'm submitting a ...

  • bug report
  • feature request
  • support request => Please do not submit support request here, see note at the top of this template.

• Do you want to request a feature or report a bug?
  bug

• What is the current behavior?
  <va-date-picker label="Inline" :config="{inline: true}" v-model="inline" disabled />
  value of the inline disabled va-date-picker can be changed

• If the current behavior is a bug, please provide the steps to reproduce, ideally also a screenshot or gif if it's a style issue
  

• What is the expected behavior?
  Disabled va-date-picker can't change its value

Docs boilerplate

Docs structure:

# [Component name]
[component description]: // We want to fit the gist in first few sentences, then maybe 
// spread thinner in next paragraph or two (relations with other components etc). 
// We want this to be beginner friendly.

## Import
// Includes import instructions
In template: 
<va-component>Slot</va-component>

 // Should contain minimal example for easy copy-paste.
In component:

import { VaComponent } from `vuestic-ui`

export default {
  components: {
    VaComponent,
  }
}
// We want import part to be moved into reusable view, because the only unique parts are `<va-component>Slot</va-component>` and `VaComponent`.

## Usage
// Includes all usage examples with explanations.

Required components

• alert (info, warning, danger)
• sandbox component

Avatar component

Docs

• Do after docs boilerplate is done.

Props

• size: String
• color: String - use theme plugin
• text-color: String - use theme plugin
• square: Boolean
• icon: String
• src: String

Slots

• default - intended to pass down symbol or string or or image url

Design

• Present to @xx13 after finishing.

Notes

• Check to work with badge (see iView)
• Text in avatar should be automatically scaled depending on size (see iView)
• Native events should be propagated.
• Test (in demo) v-icon and img via slot (this is needed for complex icons and img attributes, such as alt)

Refs

• Quasar
• Vuetify
• iView

Tabs component

Docs

• Provide documentation in .md file.

Components

Tabs

Mixins

• ColorThemeMixin

Props

• value Model value for component
• left Shifts tabs to left side (by default)
• right Shifts tabs to right side
• center Centers the tabs
• grow Forces tabs to take all width
• disabled disable all tabs
• hideSlider Hides slider
• vertical Stacks tabs vertically (low priority: skip if hard to do)
• color Specifies color (use mixin)
• stateful: Boolean - for stateful tabs selecting tab will change tabs internal value even if :value didn't change. This is useful to minify interface for simple cases, while providing good flexibility for complex ones.
• prev-icon Left icon in pagination
• next-icon Right icon in pagination

Slots

• default Default slot for tabs

Event

• input Event occurring when active tab changes

Other

• We want pagination support (arrows on the sides in refs), at least in some initial form.

Tab

Mixins

• Should support router link behavior (see button). Please move properly to mixin if it's not already done.

Props

• icon Adds icon before tab label
• label Tab label (text content)
• name Used as key for tab instead of index if provided.
• disabled Disables the tab

Slots

• default Default slot for tab content. If empty contains {icon}{label}.

Events

• click Emitted when tab is clicked
• keydown Emitted when tab enter key is pressed on focused tab

Other

• We want keyboard navigation, you may use KeyboardOnlyFocusMixin for that.

Design

• Present to @xx13 after finishing.

Refs

• Vuetify
• Quasar
• Ant Design
• Element UI

Authors

• @asvae
• @ssemenkoff

Parallax component

Docs

• Do after docs boilerplate is done.

Props

• src: String - path to image
• alt (*): String - attaches an alt property to the parallax image
• speed: Number - speed of parallax effect (0.0 < x < 1.0)
• height: Number - sets the height for the component

Slots

• default - used for content that gets displayed on top of the component
• media - slot for describing or

Events

• scroll - emitted when scrolling occurs

Design

• Present to @xx13 after finishing.

Refs

• Vuetify
• Quasar

different file formats in VaFileUploadGalleryItem?

What about different file formats?
For example tiff comes to mind. Probably makes sense to do a small investigation on this.

Originally posted by @asvae in #10

Card component

Docs

• Do after docs boilerplate is done.

Card

Props

• square: Boolean - removes card border-radius
• outlined: Boolean - removes card box-shadow
• bordered (*): Boolean - toggles rendering of the border around the card
• disabled: Boolean
• tag: String - default: 'div' - specify a custom tag used on the root element.
• href: String - designates the component as anchor
• target: String - designates the target attribute; this should only be applied when using the href prop
• to: String | Object - equivalent to Vue Router to property
• color: String - use theme plugin (background color)
• gradient: Boolean - gradient for background color
• stripe: Boolean - show stripe
• stripeColor - use theme plugin

Slots

• default

Events

• click - emitted when component is clicked

Card Title

Props

• textColor: String - use theme plugin (font color)

Slots

• default

Card Section

Props

• textColor: String - use theme plugin (font color)

Slots

• default

Design

• Present to @xx13 after finishing.

Refs

• Vuetify
• Quasar
• Ant Design
• iView
• Element UI

Radio-button and input type radio does not look good

Checkbox dot is crooked.
Need fix paddings

va-file-upload hover bug

Do not work button mouse hover on file-upload button
But forse css hover is worked
Example:

Modal component

Docs

• Expecting docs to be fully implemented in context of this task.

Mixins

• Stateful
• Context

Props

• no-dismiss - shortcut for no-outside-dismiss + no-esc-dismiss
• overlay Boolean - enables/disables overlay behind modal, true by default
• overlay-opacity Number - set overlay opacity (0-1)
• z-index sets z-index of modal (also use css variable for default z-index, which would be used as fallback if prop is not defined).

Following points are relatively complex and not too high priority, so you might want to attempt them, then drop/move to another issue if it seems to take too much time:

• draggable boolean enables/disables drag on modal. Ideally we want drag to work via position sync (emit). If that doesn't work for some reason - you can keep state in modal.
• position should be sync prop + accept the following format: {[top|left|right|bottom]?: number|string}. The idea is that it would allow it to be used with draggable, i.e.:

<va-modal draggable :position.sync="currentPosition"/>

Here's some cases where this could be useful:

• user clicks on button, that creates multiple modals (widgets) on the screen.
• user can reposition modals and we can save position in local storage or on server,

Slots

• default - custom content
• header - custom header
• footer - custom footer

Events

• click-outside emitted when backdrop clicked
• input emitted when modal state changes

Methods

• show opens modal
• hide closes modal
• toggle toggles modal state

Notice that or stateless modal these only emit @input, not change modal state.

Design

• Present to @xx13 after finishing.

Notes

• Some framework recreate modal component by using dialog component (Quasar / Vuetify)
• Rename actions slot into footer

Refs

• Vuetify
• Quasar
• Ant Design
• iView

Carousel component

Docs

• Do after docs boilerplate is done.

Carousel

Props

• value: Number - default: 0 - index of active slide
• autoplay: Boolean - whether to scroll automatically
• autoplay-interval (*): Number - default: 3000 - interval of the auto loop, in milliseconds
• loop: Boolean - display the items in loop
• height: String - default: auto - the height of the carousel
• dots: Boolean - show navigation dots
• arrows: Boolean - show navigation arrow buttons
• trigger (*): String - default: 'click' - the way to activate the indicator. Optional value: click, hover.
• effect: String - default: fade - transition effect
• vertical (*): Boolean - whether to use a vertical display

Slots

• default
• control - slot specific for carousel control

Events

• input - emitted when component's model changes

Methods

• goTo - go to specific panel
• next - go to next panel
• prev - go to previous panel

Carousel Slide

Props

• name: String - name of the item, can be used in goTo
• src: String
• #921

Slots

• default

Design

• Present to @xx13 after finishing.

Refs

• Vuetify
• Quasar
• Ant Design
• iView
• Element UI

CI process

Should do:

• Run tests.
• Deploy demos and docs to staging. (from develop branch)
• Deploy to npm. (on release (should check new tag)).

Horizontal/Circle progress

Docs

• Do after docs boilerplate is done.

HorizontalProgressBar

Props

• value: Number - percentage value for the progress
• buffer: Number - percentage value for the buffer
• indeterminate: Boolean - infinite animation when loading progress is unknown
• color: String - use theme plugin (to rename theme)
• rounded: Boolean, default: true - make the bar rounded
• size: Number | String - height of the bar in pixels or height in css units.
• 'reverse: Boolean' - should reverse progress bar direction (useful for RTL languages).
• small: Boolean - called thin in zeplin - implemented in size prop
• large: Boolean - called thick in zeplin - implemented in size prop

Slots

• default - default slot

CircularProgressBar

Props

• value: Number - percentage value for the progress
• color: String - use theme plugin (to rename theme)
• indeterminate: Boolean - infinite animation when loading progress is unknown
• size: Number | String - bar size (diameter) in pixels or size in css units.
• thickness: Number - circle border size in percent of component size

Slots

• default - default slot

Design

• Zeplin

• Present to @xx13 after finishing.

Notes

• Rename existing components: horizontal to linear and circle to circular Renamed to VaProgressBar, VaProgressCircle. Not exactly as planned, but sounds ok.

Refs

Vuetify linear / circular
Quasar linear / circular
Ant

Chat component

Docs

• Do after docs boilerplate is done.

Props

• sent: Boolean - render as a sent message (so from current user, normally places on the right side)
• text: Array - array of strings that are the message body. Each string will be placed in new container.
• name: String - author's name
• label: String - renders a label header/section
• color: String - color (from theme plugin) for chat bubble background
• text-color: String - color (from the theme plugin) for chat bubble text
• avatar: String - url to the avatar image of the author
• stamp: String - creation timestamp

Slots

• default - slot to define a custom message
• avatar - slot for avatar

Design

• Present to @xx13 after finishing.

Refs

• Quasar

Expand group component

Docs

• Do after docs boilerplate is done.

Accordion

Props

• value: Any - controls the opened/closed state of collapse items
• multiple: Boolean - allow multiple selections. The value prop must be an array
• max (*): Number - sets a maximum number of selections that can be made.
• bordered (*): Boolean - toggles rendering of the border around the collapse items
• popout (*): Boolean - with it, expansion-panel is enlargened when activated
• inset (*): Boolean - with it, expansion-panel becomes smaller when activated
• focusable (*): Boolean - makes the expansion-panel headers focusable
• active-class (*): String - the active-class applied to collapse items when they are activated

Slots

• default - expected: collapse

Events

• change - emit when active collapse item is switched

Collapse

Props

• title: String - title of the collapse
• name: String - the name of current collapse, corresponds with value of accordion
• disabled: Boolean - disables the expansion-panel content
• expand-icon (*): String - set the expand action icon (class of icon)
• hide-actions (*): Boolean - hide the expand icon in the collapse header
• disable-icon-rotate (*): Boolean - removes the icon rotation animation when expanding a panel
• active-class (*): String - configure the class applied when the collapse is active

Slots

• default - collapse content

Events

• click - emit when collapse is clicked

Design

• Present to @xx13 after finishing.

Refs

• Vuetify
• Ant Design
• iView
• Element UI

Fix gradients

Written by @xx13

Colours, Gradients, Zeplin

Current version has gradients that consist of 2 colours: an original one and a modified version. That works for all main colours, except for the green (oops).

Two Green Colours

For some reason green gradient has a slightly different green shade on the right, and I think that caused some confusion about the way gradients should be built though there are no drastic visual differences. Instead of #40e583 colour #23e066 was used.

One Green To Rule Them All

Let’s use #23e066 as the main green colour. It adds a little more contrast that will be appreciated by users. Here are some examples of this minor update:

If it works for you, I will updated all styles with the green in Zeplin.

Gradients

Let’s stick to the following structure: a modified colour on the left and the original colour on the right. Here are some examples:

Current implementation needs a fix because both colours are modified and the original colour barely impacts the way the gradient will look like.

Hover

Let’s fix hover effect. I believe the issue is about using absolute lighten values instead of relative ones. That might be the reason why the hover effect looks so rough. Let’s be sure to use scale-color instead. I'm good to go with any other solution as long as it solves the issue. Please compare:

Pressed

Let's tweak pressed effect a little and make it less dark: use 7% darken instead of 10%. Please note that these changes are not in Zeplin, just a tweak on the go, but I'd change the source files if you agree with that :)

Infinite scroll component

Props

• offset: Number - offset (pixels) to bottom of Infinite Scroll container from which the component should start loading more content in advance
• reverse: Boolean - scroll area starting scrolled to bottom and loading when reaching the top
• disabled: Boolean
• scroll-target: Element | String - CSS selector or DOM element to be used as scroll container
• debounce: Number - default: 100 - debounce amount (in milliseconds)

Slots

• default
• loading - expected: spinner - slot displaying something while loading content

Events

• load - emitted when infinite scroll needs to load more data

Refs

• Quasar
• Element UI

va-file-upload area bug

upload area more than upload button
example:

Documentation analysis

The idea is to provide platform for page by page investigation. The result of the task should be a list of pages extracted from the following frameworks docs. You can also provide small description if page name is ubiquitous or provide a link to specific doc. There should be no duplicates in the list.

Example:

Getting started:
* Playground - link to codesandbox etc [quasar](https://quasar.dev/start/playground)
...
Components:
* Chip
* Circular progress
...

Frameworks to check:

• Quasar
• Vuetify
• Element UI
• iView
• Ant Design

• Add links to "Frameworks to check" list
• Check documentation of frameworks from the list.

Disabled date-picker do not has disabled styles

Disabled date picker has regular styles
Example:

Need checkd other controls (input, select, ets) for displayed disabled state

va-input-number

• I'm submitting a ...
  • bug report
  • feature request
  • support request => Please do not submit support request here, see note at the top of this template.

It's will be nice to have input with numerical values controlled via controls or keyboard

Suggested props

• max, min -maximum and minimum values
• step - incremental step

References
vue ant design
element

Rating component

Docs

• Do after docs boilerplate is done.

Mixins

• Stateful

Props

• character: String - custom character (instead of icon or number)
• clearable: Boolean - whether to allow clear when click again
• show-score (*): Boolean - whether to display current score
• texts (*): Array - an array whose length should be equal to the max score. Used instead of score.
• unselected-color (*): String - color of unselected icons
• disabled-color (*): String - color of unselected disabled icons
• text-color (*): String - color of text / score

Events

• input - emitted when rate changing

Refs

• Vuetify
• Quasar
• Ant Design
• iView
• Element UI

Button disabled hover effect

Hover shouldn't trigger background change for disabled button.
But it does now

http://localhost:8081/#/demo/vuestic-components/va-button/VaButton.demo.vue

Mark all scss variables as default

As of now, only certain variables in _variables.scss (vuestic-ui/src/components/vuestic-sass/resources/_variables.scss) can be overwritten. Maybe all of them (or at least more, i.e. all colors) should be marked as !default to make it possible to easily modify them from outside of the framework.

Disabled radio-button has an incorrect style

The disabled radio-button label has an incorrect label style.
It has a regular style, needs a muted style.
Design:

Code:

Provide a CI solution.

For now want demos to be publicly available.
Check in vuestic-admin for references.

Button component

Docs

• Do after docs boilerplate is done.

Props

Add to existing component:

• loading: Boolean
• block: Boolean - takes all awailable width
• round: Boolean

Notes

• Button icons should work with material design icons

Design

• Present to @xx13 after finishing.

Refs

• Vuetify