austingil / vuetensils Goto Github PK
View Code? Open in Web Editor NEWπ΄ A tasty toolset for Vue.js π - Lightweight, functional components to boost your next project.
Home Page: https://vuetensils.austingil.com/
License: MIT License
π΄ A tasty toolset for Vue.js π - Lightweight, functional components to boost your next project.
Home Page: https://vuetensils.austingil.com/
License: MIT License
Thank you for this great library with accessibility in mind.
Would it be possible to add a prop to open the VToggle by default?
Right now I don't think it is possible to modify isOpen in the parent component.
https://github.com/Stegosource/vuetensils/blob/master/src/components/VToggle/VToggle.vue#L62
Thank you.
VForm export is missing even after I updated my version to 0.5.4
and tried reinstalling packages.
Here is the list of exports I have in my vuetensils/dist/vuetensils.min.js
file:
exports.VAlert = __vue_component__;
exports.VAsync = __vue_component__$1;
exports.VDialog = __vue_component__$2;
exports.VDrawer = __vue_component__$3;
exports.VDropdown = __vue_component__$4;
exports.VFile = __vue_component__$5;
exports.VImg = __vue_component__$6;
exports.VInput = __vue_component__$7;
exports.VIntersect = __vue_component__$8;
exports.VModal = __vue_component__$9;
exports.VResize = __vue_component__$a;
exports.VTable = __vue_component__$c;
exports.VTabs = __vue_component__$b;
exports.VToggle = __vue_component__$d;
exports.autofocus = autofocus;
exports.clickout = clickout;
exports.copy = copy;
exports.intersect = intersect;
I am very impressed with Vuetensils. I must compliment you on your succinct and well written code.
I'm evaluating the Intersect directive for a case where there are potentially thousands of child elements rendered in a v-for loop. It appears that Intersect creates a new IntersectionObserver in every child element. As I read the Intersection Observer API docs, the intended pattern is to create an Intersection Observer in the parent and .observe() each of the child elements as a target.
Please correct me if I'm wrong, Could you point me to an example using Intersect in this scenario? Thank you very much.
Does the library support checkbox lists like the following?
https://vuejs.org/v2/guide/forms.html#Checkbox
The current "logo" is really just the fork/knife emoji (π΄), the official Vue logo, then the hammer and wrench emoji (π οΈ).
The concept behind the current logo is to convey that it is a Utility component library for Vue.js. The knife/fork are as a reference to the name "Utensils" also being used to refer to knives/spoons/forks.
@Stegosource Do you have any thoughts on what you would want in a logo, if someone in the community wanted to contribute one?
Some examples of existing logos from other Vue projects in the Vue ecosystem.
. | . |
---|---|
![]() |
|
![]() |
|
![]() |
Hello - thanks for the cool library. Just wondered if this is a possible bug?
<VInput v-model="query" />
<button @click="handleClick">Clear input<button>
...
data() {
query: "",
},
methods: {
handleClick() {
this.query = "";
},
}
this.query
programatically) results in the value of this.query
being correctly set, but the value shown to the user in the input is not updated.Updating vuepress-plugin-live
from 1.4.2
to 1.5.0+
breaks the following examples in the docs:
Per WAI-ARIA Role=Complementary
I am have ran into a use case where there is a relevant piece of content that could be placed into a VAlert
component, but is not necessarily needing the role="alert"
semantics. It would be useful to be able to swap this for role="complementary"
semantics.
For now, just binding directly overrides the `role="alert", so it's nothing but a feature, suggestion. I think it would be nice to give this flexibility though.
I got an error "export 'copy' was not found in 'vuetensils'
when I try to import copy like
import { copy } from 'vuetensils'
I think it is because directives are not imported in version 0.3.10
Here is the tree of vuetensils folder in node_modules:
.
βββ README.md
βββ dist
βΒ Β βββ vuetensils.esm.js
βΒ Β βββ vuetensils.min.js
βΒ Β βββ vuetensils.umd.js
βββ package.json
βββ src
βββ components
βΒ Β βββ VAlert
βΒ Β βΒ Β βββ Readme.md
βΒ Β βΒ Β βββ VAlert.vue
βΒ Β βββ VAsync
βΒ Β βΒ Β βββ Readme.md
βΒ Β βΒ Β βββ VAsync.vue
βΒ Β βββ VDrawer
βΒ Β βΒ Β βββ Readme.md
βΒ Β βΒ Β βββ VDrawer.vue
βΒ Β βββ VDropdown
βΒ Β βΒ Β βββ Readme.md
βΒ Β βΒ Β βββ VDropdown.vue
βΒ Β βββ VImg
βΒ Β βΒ Β βββ Readme.md
βΒ Β βΒ Β βββ VImg.vue
βΒ Β βββ VInput
βΒ Β βΒ Β βββ Readme.md
βΒ Β βΒ Β βββ VInput.vue
βΒ Β βββ VIntersect
βΒ Β βΒ Β βββ Readme.md
βΒ Β βΒ Β βββ VIntersect.vue
βΒ Β βββ VModal
βΒ Β βΒ Β βββ Readme.md
βΒ Β βΒ Β βββ VModal.vue
βΒ Β βββ VTabs
βΒ Β βΒ Β βββ Readme.md
βΒ Β βΒ Β βββ VTabs.vue
βΒ Β βββ VToggle
βΒ Β βΒ Β βββ Readme.md
βΒ Β βΒ Β βββ VToggle.vue
βΒ Β βββ index.js
βββ data
βΒ Β βββ focusable.js
βΒ Β βββ keycodes.js
βΒ Β βββ svgs.js
βββ entry.js
βββ mixins
βΒ Β βββ clickout.js
βββ utils.js
Two requests:
Is it possible and in line with the goals of this project to make a custom select dropdown to allow for more custom styling options?
Hi @Stegosource,
Let's say once a week I check overhere if something nice has happened.
Would it be an idea to create a (small) changelog file so one can see if new components have been changed or added?
I am trying to import components as a Nuxt plugin and all kinds of strange things are happening.
My testing has been limited to the VDrawer component.
I have tried registering components in a Nuxt plugin which raises: Unexpected token 'export
import Vue from "vue"
import { VDrawer } from "vuetensils/src/components"
Vue.component("VDrawer", VDrawer)
When I try to use the component directly in my index.vue, I get document is not defined
which means this component is trying to access the document in a Node context. Normally this is solved as documented here. I can resolve the component in require but the component is then undefined on the server.
<script>
// import { VDrawer } from "vuetensils"
if (process.client) {
const VDrawer = require("vuetensils/src/components/VDrawer/VDrawer")
}
export default {
name: 'Home',
components: {
VDrawer,
}
}
</script>
There may be a way to implement this that I'm not seeing. SEO/SSR on any navigation component is pretty important, so the best solution might be to refactor (and vendor?) the VDrawer component. Which leads me to ask a more project-level question: does the Vuetensils aspire to integrate with Nuxt?
As requested on the docs page for VTable, here's some thoughts on what's missing and could be improved:
tbody
(I'd prefer using the default/body slot and being able to write the element myself)thead
and tfoot
(I know there's already plans for tfoot
but it's currently disabled). Expose sorting methods and a11y attributes using scoped slots.Then a question I have is, do we really need the table wrapper to be focusable? Wouldn't it make more sense to leave it as is, with just the buttons on thead being focusable and maybe the tbody rows in case users wanna highlight one of them or something on focus (but I guess they can implement this themselves using slots soβ¦)
Having inheritAttrs: false prevents the class from being inherited.
Automate PR quality:
Automate builds:
Automate deploys:
package.json
https://vuetensils.stegosource.com/components/async.html
after about a second there is an error in the console
A suggestion, which might be useful for sidebars, is a width toggle.
You can basically use the functions you already have in VToggle.vue and change height to width.
So you would have to have two different toggle components I guess (VToggleHeight/VToggleWidth), or can you think of a better solution?
Hello and many thanks for this great toolset.
One thing I am missing is a nice cleanly organised menubar. Something similar that bootstrap-vue offers but without the large overhead...
Would this be something for the toolset?
Would be useful to be able to use scoped styles for the vuetensils elements.
For example, maybe I don't want all the .vts-toggle__button
classes to look the same all over the app.
Another scenario vue.js natively supports but not implemented. the multiple attribute when added renders correctly but implementation doesn't work.
<VInput label="Dropdown List (Multi)" type="select" multiple v-model="multiSelectValue" :options="options"/>
v-model doesn't support arrays
Hi,
I found this project and have my own idea for creating naked components for a while.
At the moment these are only used on a personal project and closed source, but I'd be willing to make them open source for the right project.
I'm wondering if I could contribute some of these, including:
Some of these components have a single dependency but excluding the QR component could be rewritten to have no dependencies if needed.
This project has no support for IE11. It's not really accessible if that is not supported.
Hey @TheJaredWilcurt and @gwenf I've been using Vuetensils more at work and running into the issue where I want to be able to support error messages. Ive got a syntax like this so far
<VInput
label="Label"
required
minlength="6"
type="email"
:errors="{
required: 'This field is required',
minlength: l => `Must be at least ${l} characters.`,
type: t => `Must be of type ${t}`,
}"
/>
I've been able to get around this for the most part with a wrapper component, but I think this would be a nice addition. What do you think of the syntax?
Does anybody manage to get it to work on nuxt/vuetify? Below is a sample code, which does not work in my case.
<v-btn v-copy="`Text copied`" outlined>
<v-icon left>mdi-content-copy</v-icon>
Copy
</v-btn>
I recently discovered that simply registering any of the components in Vuetensils breaks IE11. It took a min, but I realized that most babel configurations will not transpile anything in the node_modules folder by default.
It would be great to help others to document how to fix in a Vue CLI project and Nuxt projects since, sadly, IE11 is still a requirement by some companies.
Vue CLI: vue.config.js
Vue CLI Documentation
module.exports = {
transpileDependencies: ["vuetensils"]
}
Nuxt: nuxt.config.js
Nuxt Documentation
export default {
build: {
transpile: ["vuetensils"]
}
}
I think that would be a great addition
The overflow: hidden;
part in the VToggle.vue
causes problem if you have elements that goes out of the toggle box. For example if you have a long dropdown.
The initial value isn't setting properly on checkbox.
<VInput label="Checkbox Item" type="checkbox" v-model="checkboxValue" />
data(){ return { checkboxValue: true } }
should be able to add the following to the component to fix:
:checked="$attrs.type === 'checkbox' && value === true"
VImg does not need setTimeout for the transition if we use transitionEnd instead
There should be a Vue 3 compatible version of Vuetensils. Not sure how it should be handled (new major version bump, or just two different branches).
src
should probably have watchers.
Ran into an issue building my Gridsome site with the latest version of Vuetensils (0.5.6). For reference, I am importing VToggle on one page.
During the build, I am getting the following error:
document is not defined
at addStyle (node_modules/vuetensils/dist/vuetensils.esm.js:762:0)
at assets/js/vendors~page--src--pages--policies-vue.dc0da65c.js:767:42
at a.__vue_inject_styles__$e (node_modules/vuetensils/dist/vuetensils.esm.js:2964:0)
at a.hook (node_modules/vuetensils/dist/vuetensils.esm.js:198:0)
at Ft (node_modules/vue/dist/vue.runtime.common.prod.js:6:11191)
at Ze (node_modules/vue/dist/vue.runtime.common.prod.js:6:25133)
at a.e._init (node_modules/vue/dist/vue.runtime.common.prod.js:6:32564)
at new a (node_modules/vue/dist/vue.runtime.common.prod.js:6:30340)
at Vi (node_modules/vue-server-renderer/build.prod.js:1:66307)
at io (node_modules/vue-server-renderer/build.prod.js:1:70537)
This is the function from the top of the stack trace:
function addStyle(id, css) {
var group = isOldIE ? css.media || 'default' : id;
var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
if (!style.ids.has(id)) {
style.ids.add(id);
var code = css.source;
if (css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
// http://stackoverflow.com/a/26603875
code +=
'\n/*# sourceMappingURL=data:application/json;base64,' +
btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
' */';
}
if (!style.element) {
style.element = document.createElement('style');
style.element.type = 'text/css';
if (css.media)
{ style.element.setAttribute('media', css.media); }
if (HEAD === undefined) {
HEAD = document.head || document.getElementsByTagName('head')[0];
}
HEAD.appendChild(style.element);
}
if ('styleSheet' in style.element) {
style.styles.push(code);
style.element.styleSheet.cssText = style.styles
.filter(Boolean)
.join('\n');
}
else {
var index = style.ids.size - 1;
var textNode = document.createTextNode(code);
var nodes = style.element.childNodes;
if (nodes[index])
{ style.element.removeChild(nodes[index]); }
if (nodes.length)
{ style.element.insertBefore(textNode, nodes[index]); }
else
{ style.element.appendChild(textNode); }
}
}
}
I cannot find this function in the code base, so I'm not sure where it's getting called or why.
EDIT: As a follow-up, when I copy the VToggle component into my own codebase, point to it instead of Vuetensils, and run the build script, there are no errors.
Status | Package | Version | Type | Latest | Behind by | Breaking |
---|---|---|---|---|---|---|
β | @babel/core | 7.8.7 | devDependencies | 7.9.6 | 2 | 0 |
β | @babel/preset-env | 7.9.5 | devDependencies | 7.9.6 | 1 | 0 |
β | @commitlint/cli | 8.3.5 | devDependencies | 8.3.5 | 0 | 0 |
β | @commitlint/config-conventional | 8.3.4 | devDependencies | 8.3.4 | 0 | 0 |
β | @commitlint/prompt | 8.3.5 | devDependencies | 8.3.5 | 0 | 0 |
β | @rollup/plugin-commonjs | 11.0.2 | devDependencies | 11.1.0 | 1 | 0 |
β | @vue/test-utils | 1.0.2 | devDependencies | 1.0.2 | 0 | 0 |
β | @vuepress/plugin-google-analytics | 1.4.0 | devDependencies | 1.5.0 | 2 | 0 |
β | babel-core | 7.0.0-bridge.0 | devDependencies | 6.26.3 | 0 | 0 |
β | babel-eslint | 10.1.0 | devDependencies | 10.1.0 | 0 | 0 |
β | babel-jest | 26.0.1 | devDependencies | 26.0.1 | 0 | 0 |
β | babel-loader | 8.0.6 | devDependencies | 8.1.0 | 1 | 0 |
β | commitizen | 4.0.3 | devDependencies | 4.1.2 | 5 | 0 |
β | cz-conventional-changelog | 3.1.0 | devDependencies | 3.2.0 | 2 | 0 |
π₯ | eslint | 6.8.0 | devDependencies | 7.0.0 | 6 | 1 |
β | eslint-plugin-vue | 6.2.2 | devDependencies | 6.2.2 | 0 | 0 |
β | husky | 4.2.3 | devDependencies | 4.2.5 | 2 | 0 |
β | jest-serializer-vue-tjw | 3.14.0 | devDependencies | 3.14.0 | 0 | 0 |
β | minimist | 1.2.5 | devDependencies | 1.2.5 | 0 | 0 |
β | release-it | 13.1.1 | devDependencies | 13.5.8 | 20 | 0 |
β | rollup | 2.1.0 | devDependencies | 2.10.0 | 24 | 0 |
β | rollup-plugin-buble | 0.19.8 | devDependencies | 0.19.8 | 0 | 0 |
π₯ | rollup-plugin-filesize | 6.2.1 | devDependencies | 9.0.0 | 7 | 3 |
β | rollup-plugin-replace | 2.2.0 | devDependencies | 2.2.0 | 0 | 0 |
β | rollup-plugin-uglify-es | 0.0.1 | devDependencies | 0.0.1 | 0 | 0 |
β | rollup-plugin-vue | 5.1.6 | devDependencies | 5.1.7 | 12 | 0 |
β | stylelint | 13.2.1 | devDependencies | 13.3.3 | 4 | 0 |
β | stylelint-config-sass-guidelines | 7.0.0 | devDependencies | 7.0.0 | 0 | 0 |
β | vue-docgen-api | 4.14.0 | devDependencies | 4.22.3 | 12 | 0 |
β | vue-jest | 3.0.5 | devDependencies | 3.0.5 | 0 | 0 |
β | vue-router | 3.1.6 | devDependencies | 3.1.6 | 0 | 0 |
β | vuepress | 1.4.0 | devDependencies | 1.5.0 | 2 | 0 |
β | vuepress-plugin-docgen | 1.2.9 | devDependencies | 1.2.9 | 0 | 0 |
β | vuepress-plugin-live | 1.4.2 | devDependencies | 1.5.3 | 4 | 0 |
Auto-Generated with DepChecker.
If you're using Tailwind, it's kinda hard to override the default classes because the component's CSS gets injected after Tailwind's classes. Looking at the VDialog.vue file, I see it's combining the default classes with the user-specified ones.
What do you think about just blowing away the default classes when a user-specified one exists?
Hello! I'm missing a feature from vuetensils' dropdown, that I think every good dropdown should have.
Just like a native select, it would be nice to implement a basic search functionality and arrow navigation (following the "roving focus" pattern).
This is great for accessibility.
I think this could be made inspired in an API just as the one from Reakit.
import {
useMenuState,
Menu,
MenuItem,
MenuButton,
MenuSeparator,
} from "reakit/Menu";
function Example() {
const menu = useMenuState();
return (
<>
<MenuButton {...menu}>Preferences</MenuButton>
<Menu {...menu} aria-label="Preferences">
<MenuItem {...menu}>Settings</MenuItem>
<MenuItem {...menu} disabled>
Extensions
</MenuItem>
<MenuSeparator {...menu} />
<MenuItem {...menu}>Keyboard shortcuts</MenuItem>
</Menu>
</>
);
}
It consists in separating the component into multiple ones. This allows to keep the styles completely customisable, which I think it's an objective we must aim for, while adding this extra enhancements.
Having separated components for the button and the menu would also allow to make the dropdown button behave like a "slot", to allow for example to place an icon there.
But of course we could always make this with a single component, using Vue features like named slots and slot props.
Right now I'm interested in seeing if this is something desirable. I'm considering sending a PR but I first want to look into examples of other Vue libraries to see how this could be achieved.
v-copy
only copied the initial value, and reactivity / computed property does not seem to work as expected. Below are snippets for nuxt/vuetify using [email protected]. Not sure if it's related to nuxt/vuetify only.
<script type="text/x-template" id="app-template">
<v-app>
<v-container>
<!-- -->
<v-text-field v-model="name">
<template slot="append">
<v-btn v-copy="computedName">
Copy
</v-btn>
</template>
</v-text-field>
computed: {{ computedName }}
</v-container>
</v-app>
</script>
<div id="app"></div>
const App = {
template: '#app-template',
data: () => ({
//
name: 'vuetensils',
}),
computed: {
computedName() {
const { name } = this;
return `[${name}]`;
}
}
}
new Vue({
vuetify: new Vuetify(),
render: h => h(App)
}).$mount('#app')
I get a console warning when using VFile. Error "export 'version' was not found in 'vue'
Component.vue
<template>
<div class="styled">
<VFile v-model="files" label="Files" />
<p v-if="files.length">
You've selected the file "{{ files[0].name }}" ({{ files[0].type }}). It
was last modified
{{ files[0].lastModifiedDate }}
</p>
</div>
</template>
<script>
// SomeComponent.vue
import { VFile } from 'vuetensils/src/components';
export default {
components: {
VFile,
},
data: () => ({
files: [],
}),
};
</script>
package.json
{
...
"dependencies": {
"@carbon/layout": "^10.29.0",
"@carbon/vue": "^2.39.0",
"axios": "^0.21.1",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuelidate": "^0.7.6",
"vuetensils": "^0.8.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"css-loader": "^3.6.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.36.0",
"sass-loader": "^10.2.0",
"vue-template-compiler": "^2.6.11"
}
...
}
0.9.*
npm run serve
Error "export 'version' was not found in 'vue'
0.8.0
the warning disappearedFrom Vue docs:
"Apart from el, you should treat these arguments as read-only and never modify them. If you need to share information across hooks, it is recommended to do so through elementβs dataset."
https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset
Noticed that vts-input--invalid
does not work at all. Seems to be due to a reference to invalid.anyInvalid
, which does not exist. Referencing just anyInvalid
seems to work. There's few other places in the file with the same reference to this non-existent variable.
Would also make sense to have the vts-input--invalid
class to only be added when input is dirty, similar to how it is in your docs (like state.dirty && state.anyInvalid
).
With the latest release (0.7.2), VInput with a standard text field no longer allows typing with the keyboard. I tested it out on Chrome, Safari, and Firefox on Mac to make sure it wasn't a browser quirk.
I was able to see it also affects your documentation page here when you attempt to type into the "features" field in the Description section: https://vuetensils.stegosource.com/components/input.html#description
Using type=email, it also appears the first letter typed will not appear. (e.g. if you type "12" it will only display "2"). I found this one on the documentation page as well. Hopefully that helps narrow it down a little!
I think a good addition for the tab component would be to allow markup in the tab labels. This would allow the addition of things like icons in the labels.
I assume using slots for the tab labels would give the most flexibility, but I'm sure there are other ways as well.
Hello I have noticed that the VDropdown removes the vts content from the dom when not active. Is it posible to just have the component o add or hide a 'hidden' class. Maybe that is already posible, it's simple enough, right?
I love the philosophy of vuetensils, I think that would be inline with what you have in mind with this project.
changing this
v-if="!!isHovered || !!isFocused"
to vts-dropdown__content--visible or --hidden
What do you think?
I know in your package.json you have the license listed as MIT, I was wondering if you could add an actual LICENSE.md file with the license?
Title says it all :)
Using $attrs.id in computed props reruns when $attrs change. Should be moved to created hook
Hello @AustinGil ,
I've a question regarding the Drawer component.
Currently I'm facing an issue where multiple Drawers are opened at once which I believe is not the desired behaviour.
Thanks for your time.
Need to add a tooltip feature. Can either be a component or a directive.
to improve accessibility of the dialog component https://vuetensils.stegosource.com/components/Dialog.html#installation
it would be great to add two attribute on on the generated
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.