epicmaxco / vuestic-ui Goto Github PK
View Code? Open in Web Editor NEWFree and Open Source UI Library for Vue 3 ๐ค
Home Page: https://vuestic.dev
License: MIT License
Free and Open Source UI Library for Vue 3 ๐ค
Home Page: https://vuestic.dev
License: MIT License
total: Number
- total number of data itemspage-size: Number
- number of data items per pagetext-color: String
- use theme plugin for textcircle (*): Boolean
- shape pagination elements as circlesinput: Boolean
- use an input instead of buttonsboundary-numbers: Boolean
- always show first and last page buttonshide-on-single-page: Boolean
- whether to hide when there's only one pageflat: Boolean
- shouldn't display border if set to trueinput
- emitted when the component needs to change the model;size-change
- triggers when page-size
changesnext (*)
- emitted when going to next itemprevious (*)
- emitted when going to previous itemva-data-table
disable: Boolean
value: Bollean
(v-model) - should replace default-value
.header
default
Should do:
develop
branch)transparent: Boolean
multiLine: Boolean
label: [String, Number]
bottom: Boolean
left: Boolean
overlap: Boolean
color: String
- use theme plugintextColor: String
- use theme plugindot: boolean
visibleEmpty: boolean
- should show badge when no value is passed (default behaviour is hide).label
prop. Slot has priority if both are declared.It's will be nice to have input with numerical values controlled via controls or keyboard
Suggested props
max
, min
-maximum and minimum valuesstep
- incremental stepReferences
vue ant design
element
separator: String
- default: /
- specifies the dividing character between itemsalign: 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)default
- expected: breadcrumbs itemseparator
- HTML or component you can slot in to separate the breadcrumbs - slot takes priority if prop and slot are both definedto / replace / exact / append
- router props (use mixin for vue-router props)disabled: Boolean
content
class into component. We don't need to document global class usage, only component itself.Hover shouldn't trigger background change for disabled button.
But it does now
http://localhost:8081/#/demo/vuestic-components/va-button/VaButton.demo.vue
vertical: Boolean
- displays divider verticallydashed (*): Boolean
- whether line is dashedinset (*): Boolean
- if set to true, the left and right margins will be added; reduces max height for vertical dividerorientation: String
- ['left', 'right', 'center'] - position of title inside divider (for horizontal only)default
- insert content (for horizontal only)va-list
Test documentation site:
Test functionality:
target: String | HTMLElement
- the target to trigger scrollvisibility-height: Number
- default: 400 - the button will not show until the scroll height reaches this valueright (*): Number
- default: 40 - right distancebottom (*): Number
- default: 40 - bottom distanceclick
- triggers when backtop button is clickedva-button
with upward arrow in slot.square: Boolean
- removes card border-radiusoutlined: Boolean
- removes card box-shadowbordered (*): Boolean
- toggles rendering of the border around the carddisabled: Boolean
tag: String
- default: 'div' - specify a custom tag used on the root element.href: String
- designates the component as anchortarget: String
- designates the target attribute; this should only be applied when using the href
propto: String | Object
- equivalent to Vue Router to
propertycolor: String
- use theme plugin (background color)gradient: Boolean
- gradient for background colorstripe: Boolean
- show stripestripeColor
- use theme pluginclick
- emitted when component is clickedtextColor: String
- use theme plugin (font color)textColor: String
- use theme plugin (font color)separator: String
- default: 'horizontal', accepted values: 'horizontal', 'vertical', 'cell', 'none' - use a separator/border between rows, columns or all cellsflat: Boolean
- applies no default shadow view.square: Boolean
- removes border-radius from tablesent: 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 namelabel: String
- renders a label header/sectioncolor: String
- color (from theme plugin) for chat bubble backgroundtext-color: String
- color (from the theme plugin) for chat bubble textavatar: String
- url to the avatar image of the authorstamp: String
- creation timestampdefault
- slot to define a custom messageavatar
- slot for avatarWritten by @xx13
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).
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.
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.
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.
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:
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 :)
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?
tag: String
- default: 'i' - specifies a custom tag to be usedsize
- use sizeMixin
, also see size docs.name: String
- name (alias) of icon. Not contextableiconSet: 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).color
- use ColorThemePlugin
default
- this slot is fairly magical. We might leave it for later iterations. See vuetify example for things we might want from it.Wrapper, which provides an interface for handling hover state for any component.
value: Boolean
- v-model (if provided - component becomes stateless)disabled: Boolean
default
- should pass down hover (v-slot:default="{ hover }"
)normalize.css should be added to package.json, else the build fails if it's not already installed.
chips: Boolean
- changes display of selections to chipsdeletable-chips: Boolean
- adds a remove icon to selected chipshide-selected: Boolean
- do not display in the select menu items that are already selectedallowCreate: Boolean
- whether creating new items is allowedclearIcon: String
- custom icon to use for the clear buttondropdown-icon (*): String
- custom icon to use instead of default dropdown iconfilter: (option: any, searchText: string, optionText) => boolean
- the function used for filtering itemsVisual:
Consult with @xx13 before implementing
outlined: Boolean
filled: Boolean
prepend
- adds an item before input contentprepend-inner
- prepends an item inside input contentappend
- adds an item after input contentappend-outer
- appends an item inside input contentcreate: (value: string) => void
change
- emitted when the input is changed by user interactionclear
- emitted when the clear icon is clickedva-message-list
should be integrated in this componentanchor
slotAdd to existing component:
loading: Boolean
block: Boolean
- takes all awailable widthround: Boolean
offset: Number
- offset (pixels) to bottom of Infinite Scroll container from which the component should start loading more content in advancereverse: Boolean
- scroll area starting scrolled to bottom and loading when reaching the topdisabled: Boolean
scroll-target: Element | String
- CSS selector or DOM element to be used as scroll containerdebounce: Number
- default: 100 - debounce amount (in milliseconds)default
loading
- expected: spinner
- slot displaying something while loading contentload
- emitted when infinite scroll needs to load more data# [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.
mdAndUp
, see also #1193)$va.screen.thresholds.xs
). There should be no threshold for highest breakpoint.------------------- [TODO] --------------------
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:
separator: Boolean
bordered: Boolean
to: String/Object
support vue-routerexact/append/replace: Boolean
support vue-routertag: String
use 'label' with checkbox/radioclickable: Boolean
avatar: Boolean
reserve space for an avatar 48pxside: Boolean
reserve space for an icon 24pxcaption: Boolean
small textlines: String/Number
apply ellipsis based on the number of linescharacter: String
- custom character (instead of icon or number)clearable: Boolean
- whether to allow clear when click againshow-score (*): Boolean
- whether to display current scoretexts (*): Array
- an array whose length should be equal to the max
score. Used instead of score.unselected-color (*): String
- color of unselected iconsdisabled-color (*): String
- color of unselected disabled iconstext-color (*): String
- color of text / scoreinput
- emitted when rate changingFor now want demos to be publicly available.
Check in vuestic-admin for references.
side: String
- default: 'right', optional values: 'left' | 'right' - side to place the timeline entriescolor: String
- color for all timeline entries from theme pluginlayout (*): 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 itemsdefault
title: String
- title of timeline entrytimestamp: String
color: String
- color for component from theme pluginside: String
- default: 'right', accepted values: 'left' | 'right' - side to place the timeline entryheading (*): String
- defines a heading timeline itemtag (*): String
- default: 'h3' - tag to use, if heading
prop used onlydefault
icon
- used to customize the icon inside the timeline item's dotopposite (*)
- used to customize the opposite side of timeline itemsBy using affix
, user can fix the content at the screen position and it won't scroll with page scrolling.
offset-top: Number
- pixels to offset from top when calculating position of scrolloffset-bottom: Number
- pixels to offset from bottom when calculating position of scrollchange
- emit when affix state is changedI'm submitting a ...
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
src: String
- path to imagealt (*): String
- attaches an alt property to the parallax imagespeed: Number
- speed of parallax effect (0.0 < x < 1.0)height: Number
- sets the height for the componentdefault
- used for content that gets displayed on top of the componentmedia
- slot for describing or scroll
- emitted when scrolling occurstitle: String
- title should be optional. (alert should look fine with description alone).description: String
center: Boolean
- add center alignment for title and descriptionicon: String
- icon alias.closeable
- displays close area on component.close-text: String
- if this prop is provided text should be shown instead of icon.default
- insert descriptiontitle
- insert titleicon
- 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.input
- fires when close icon is clicked. This should work with slot as well.va-notification
in vuestic-uisize: String
color: String
- use theme plugintext-color: String
- use theme pluginsquare: Boolean
icon: String
src: String
default
- intended to pass down symbol or string or or image urlv-icon
and img
via slot (this is needed for complex icons and img attributes, such as alt
)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.
value: Number
- default: 0 - index of active slideautoplay: Boolean
- whether to scroll automaticallyautoplay-interval (*): Number
- default: 3000 - interval of the auto loop, in millisecondsloop: Boolean
- display the items in loopheight: String
- default: auto
- the height of the carouseldots: Boolean
- show navigation dotsarrows: Boolean
- show navigation arrow buttonstrigger (*): String
- default: 'click' - the way to activate the indicator. Optional value: click, hover.effect: String
- default: fade
- transition effectvertical (*): Boolean
- whether to use a vertical displaydefault
control
- slot specific for carousel controlinput
- emitted when component's model changesgoTo
- go to specific panelnext
- go to next panelprev
- go to previous panelname: String
- name of the item, can be used in goTosrc: String
default
:options
does not match the props name in chartMixin
should it be chartOptions
?
value: Any
- controls the opened/closed state of collapse itemsmultiple: Boolean
- allow multiple selections. The value
prop must be an arraymax (*): Number
- sets a maximum number of selections that can be made.bordered (*): Boolean
- toggles rendering of the border around the collapse itemspopout (*): Boolean
- with it, expansion-panel is enlargened when activatedinset (*): Boolean
- with it, expansion-panel becomes smaller when activatedfocusable (*): Boolean
- makes the expansion-panel headers focusableactive-class (*): String
- the active-class applied to collapse items when they are activateddefault
- expected: collapsechange
- emit when active collapse item is switchedtitle: String
- title of the collapsename: String
- the name of current collapse, corresponds with value of accordiondisabled: Boolean
- disables the expansion-panel contentexpand-icon (*): String
- set the expand action icon (class of icon)hide-actions (*): Boolean
- hide the expand icon in the collapse headerdisable-icon-rotate (*): Boolean
- removes the icon rotation animation when expanding a panelactive-class (*): String
- configure the class applied when the collapse is activedefault
- collapse contentclick
- emit when collapse is clickedQuite 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.
new Vuestic({
components: {
input: {
outline: true,
square: true,
},
button: {
small: true,
}
}
})
value
Model value for componentleft
Shifts tabs to left side (by default)right
Shifts tabs to right sidecenter
Centers the tabsgrow
Forces tabs to take all widthdisabled
disable all tabshideSlider
Hides slidervertical
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 paginationnext-icon
Right icon in paginationdefault
Default slot for tabsinput
Event occurring when active tab changesicon
Adds icon before tab labellabel
Tab label (text content)name
Used as key for tab instead of index if provided.disabled
Disables the tabdefault
Default slot for tab content. If empty contains {icon}{label}
.click
Emitted when tab is clickedkeydown
Emitted when tab enter key is pressed on focused tabvalue: Number
- percentage value for the progressbuffer: Number
- percentage value for the bufferindeterminate: Boolean
- infinite animation when loading progress is unknowncolor: String
- use theme plugin (to rename theme
)rounded: Boolean, default: true
- make the bar roundedsize: Number | String
- height of the bar in pixels or height in css units.small: Boolean
- called thin in zeplinsize
proplarge: Boolean
- called thick in zeplinsize
propdefault
- default slotvalue: Number
- percentage value for the progresscolor: String
- use theme plugin (to rename theme
)indeterminate: Boolean
- infinite animation when loading progress is unknownsize: Number | String
- bar size (diameter) in pixels or size in css units.thickness: Number
- circle border size in percent of component sizedefault
- default slotVaProgressBar
, VaProgressCircle
. Not exactly as planned, but sounds ok.no-dismiss
- shortcut for no-outside-dismiss
+ no-esc-dismiss
overlay
Boolean - enables/disables overlay behind modal, true by defaultoverlay-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:
default
- custom contentheader
- custom headerfooter
- custom footerclick-outside
emitted when backdrop clickedinput
emitted when modal state changesshow
opens modalhide
closes modaltoggle
toggles modal stateNotice that or stateless modal these only emit @input, not change modal state.
dialog
component (Quasar / Vuetify)actions
slot into footer
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.