vuejs / ui Goto Github PK

View Code? Open in Web Editor NEW

1.3K 57.0 95.0 7.67 MB

💻 UI components for official Vue organization apps

Home Page: https://vuejs.github.io/ui/

JavaScript 10.25% Vue 78.67% HTML 0.22% Stylus 10.86%

ui's People

Stargazers

Watchers

Forkers

srinivasdamam thejaredwilcurt daltondiaz jprando kharysharpe ben52 yuyz0112 mojowork damgero 0x1af2aec8f957 prashant-andani ngocnv-0940 agriedd nonsocode nunonux maenkhouseh kirschd soumyabishi tamilps2 gustavoquinalha troubleminds waspar colornote taosin gary-dgc verydog jskit vgtasoft logic0319 rflipo-dev mrying daweism sodatea longjl edisdev arjunmds-123 strikingraghu brizer hhy5277 adamwairdev diogor paperscz nikolasmelui faker-a nodesh marshmllow abdifatahmuse forkkit marciopocebon zc1003 gxuebin rebith aanko dydsnh xunzhaotech barackobamausa worksuites doc22940 sergo007 kreddy0926-spec bxy18710401602 mygitaccounts 0xjimmy a21ns1g4ts victoran0508 ajmaske pikax 913363140 softwaredreamer playxper wwwk tikoa isabella232 codeyu001 siqili0125 v1cknesh mfitrahrmd xuedongliu gangaputr dautu101 commanderroot fredbrock joyeuse-irambona ur-cst-sict-mad xmastan jeffrey-mu fateorg arwinz seanpm2001 denisgurev

ui's Issues

Integration with Nuxt.js

I can't use it with nuxt js, would you please provide some hint.
I have followed nuxtjs plugin guide, but it is not working.

How to load this in systemjs

This is an awesome library, but I faild to use it for my site https://github.com/moyummy/vue-static

As a simple example, I modify vue-static/src/app/index.js like this:

import Vue from 'vue'
import router from './router'
import store from './store'
import VueUi from '@vue/ui'
import '../lib/github.com/vuejs/ui/0.2.5/vue-ui.css!css'

Vue.use(VueUi)

new Vue({
  el: '#app',
  router,
  store,
  template: '<VueLoadingBar unknown/>'
})

However, it gives me error:

vue.js:597 [Vue warn]: Unknown custom element: <VueLoadingBar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)
warn @ vue.js:597

I checked _installedPlugins in console

Vue._installedPlugins
(3) [{…}, ƒ, {…}]
0:{Store: ƒ, install: ƒ, version: "3.0.1", mapState: ƒ, mapMutations: ƒ, …}
1:ƒ (t)
2:{VueUi: {…}, regeneratorRuntime: {…}}

This is different from when I imported it and made it work through html script tag

Vue._installedPlugins
(5) [{…}, {…}, {…}, {…}, {…}]
0:{version: "0.4.3", install: ƒ}
1:{install: ƒ, options: {…}}
2:{version: "0.4.4", install: ƒ}
3:{install: ƒ}
4:{version: "0.2.5", install: ƒ}

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/@vue/[email protected]/dist/vue-ui.css"/>
  </head>
  <body>
    <div id="app"></div>
    <script src="http://unpkg.com/[email protected]/dist/vue.js"></script>
    <script src="http://unpkg.com/@vue/[email protected]/dist/vue-ui.min.js"></script>
    <script>new Vue({el:'#app',template:'<VueLoadingBar unknown/>'})</script>
  </body>
</html>

Could anybody provide some suggestions? Thanks.

Is it possible to add new package search sources?

Currently we are using nexus repository to publish our packages instead of npm. We can directly download our private repositories from nexus with just one simple .npmrc file and one prefix on the package name (like @company/my-package). It is perfectly working with terminal, but in vue ui, not. Vue ui uses algolia. And Algolia searches on npm repository.

So, can I extend this search source with a configuration or is there any way to provide new search source to the vue ui to install our private packages via nexus?

Install of vue-router and vuex throws error

Brand new to vue, tried to follow this Medium article Vue UI: A First Look

Using OS X 10.11.6, node 8.11.3, vue 3.0.0-rc.4

When trying to "Add vue-router" or "Add vuex", the vue ui stays with a spinner.

On the console I see an error output:

$ vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000
TypeError: this.cwd is not a function
    at PluginApi.getCwd (/usr/local/lib/node_modules/@vue/cli/node_modules/@vue/cli-ui/apollo-server/api/PluginApi.js:418:17)
    at install (/usr/local/lib/node_modules/@vue/cli/node_modules/@vue/cli-ui/ui-defaults/suggestions.js:77:23)
    at Object.handler (/usr/local/lib/node_modules/@vue/cli/node_modules/@vue/cli-ui/ui-defaults/suggestions.js:19:19)
    at Object.activate (/usr/local/lib/node_modules/@vue/cli/node_modules/@vue/cli-ui/apollo-server/connectors/suggestions.js:82:31)
    at suggestionActivate (/usr/local/lib/node_modules/@vue/cli/node_modules/@vue/cli-ui/apollo-server/schema/suggestion.js:55:67)
    at resolveFieldValueOrError (/usr/local/lib/node_modules/@vue/cli/node_modules/graphql/execution/execute.js:531:18)
    at resolveField (/usr/local/lib/node_modules/@vue/cli/node_modules/graphql/execution/execute.js:495:16)
    at /usr/local/lib/node_modules/@vue/cli/node_modules/graphql/execution/execute.js:339:18
    at /usr/local/lib/node_modules/@vue/cli/node_modules/graphql/jsutils/promiseReduce.js:25:10
    at Array.reduce (<anonymous>)

Rework color palette

Make greys more neutral so it fits in browser devtools.

How do you shim this for use with Typescript?

Got it, it's just declare module '@vue/ui'

Icons module used in this package?

I would like to know what icon module is used in this module, because I don't think the demo is showing all available icons in this module.

I already tried to use an icon from the material-design-icon package but it doesn't work.

Also, why is there no documentation for this awesome module, which almost have 1k stars? I know this module is used internally in core Vue projects, but that's still not a good excuse for not having a proper documentation.

You could generate an automatic documentation from components props.

Use tailwind

A migration is planned to migrate to Tailwind and expose a tailwind configuration that can be used by user projects.

No 'merge' option

I created a firebase project in a folder, and tried to create a vue app inside the folder with Vue UI. This didn't work, but threw an error to say the folder already existed. I ran vue create <folder-name> instead, and it gave me the option to overwrite or merge.

It would be great to have an overwrite/merge option on the UI, rather than just an error.

[Feature Request] Option to nickname projects in the Dashboard

I have no idea how this would be achieved since i have no idea how projects are currently stored, but I have a whole list of SPA's that are all called "frontend", so I have no idea what I'm looking at when I pull up the ui dashboard. I just accidentally made a bunch of changes to one that I wasn't even intending to work on.

It would be great if Vue UI projects could be "nicknamed" by something besides the last dir in path.

Reduce bundle size by removing the injected XML icons library

I recently analyzed the size of my app bundle with webpack-bundle-analyze and it looks like @vue/ui/dist/vue-ui.esm.js takes a lot of size in my app bundle (around 1/3 of the total size).

I took a look at the vue-ui.esm.js bundle and indeed there is some sort of inline XML taking a lot of space at the beginning of the file (I extracted this XML to another file and it's 279k characters which is around 280 ko).

This XML seems to be related to icons used in the library (Material Design Icons?) as I find many XML symbols IDs with names like ic_account_balance_wallet or ic_account_circle.

Is there a reason for the icon library content to be injected in the vue.esm.js instead of using a .css file of the icon library? Because I would like to use PurgeCSS on non-used style imported in my project, which is not possible the way @vue/ui dist output is actually.

Example of what the XML contains:

<symbol viewBox=\"0 0 24 24\" id=\"ic_account_circle_24px\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2a7.2 7.2 0 0 1-6-3.22c.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08a7.2 7.2 0 0 1-6 3.22z\"/></symbol>

Is the project discontinued ?

Hello,

Do you guys still plan on releasing v1 ?

Thanks

Dev server outputing webpack progress line by line

Unsure of what prompted this, but the output in the Vue UI suddenly stopped its text parsing behavior when looking at the output view when serving a project.

I have updated to the latest Vue CLI and used a previous build of the project and there has been no change.

EDIT: Posted in wrong repo, whoops.

Some Questions

Hello,
1-Is there any grid system?
2-Responsive Sidebar is really good.
3-Size of complied version.

Disponible in 1.0

Tab indicator shift

Version

3.2.1

Environment info


Environment Info:

  System:
    OS: Linux 4.4 Ubuntu 18.04.1 LTS (Bionic Beaver)
    CPU: (8) x64        Intel(R) Core(TM) i7-3770K CPU @ 3.50GHz
  Binaries:
    Node: 11.5.0 - /usr/bin/node
    Yarn: Not Found
    npm: 6.5.0 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmGlobalPackages:
    @vue/cli: 3.2.1

Steps to reproduce

Set UI locale to non-English (e.g. Russian)
Run Vue UI
Go to /project/select

What is expected?

Selected tab indicator stays under its button at all times

What is actually happening?

Selected tab indicator stays in place even though its button has shifted due to content change (language switch)

GitHub Issue with pics #11

VueButton does not work well with vuejs latest , because of use @click.capture.native="handleClick" in VueButton

if use the latest vuejs with VueButton ,it will print

[Vue warn]: The .native modifier for v-on is only valid on components but it was used on .

here is the feature that cause this problem .
It suggest that using .native incorrectly: it should be used only on components not on elements.

VueDropdown and VueButton(with v-tooltip) collides in electron-vue project

@Akryum thanks for give us this great ui.
Here's my issue.
I try to use @vue/ui in electron, but find an issue when using v-tooltip directive. In order to reproduce it I create a demo project https://github.com/gary-dgc/test-proj

It’s simple that I just put following in the App.vue, when you start the electron, you’ll find the tooltip on button doesn’t work and get error log in console.

Cases I tried:
1- But if you show App.vue in plain web vue project, it works fine.
2- If leave VueDropdown or Vuebutton only one component in App.vue, it works fine.

@vue/ui version: 0.10.5

`/gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:3448 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property '$el' of undefined"

found in

--->

warn @ /gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:3448
/gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:4717 TypeError: Cannot read property '$el' of undefined
at VueComponent.popper-node (/gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:12783:48)
at VueComponent.init (/gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:11706:34)
at VueComponent.mounted (/gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:11656:12)
at invokeWithErrorHandling (/gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:4683:59)
at callHook (/gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:7042:9)
at Object.insert (/gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:5968:9)
at invokeInsertHook (/gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:9169:30)
at Vue.patch [as patch] (/gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:9388:7)
at Vue._update (/gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:6768:21)
at Vue.updateComponent (/gdev/gp-node/test-proj/node_modules/@vue/ui/dist/vue-ui.umd.js:6889:12)`

vue ui install missed dependency read-pkg

Brand new to vue, tried to follow this Medium article Vue UI: A First Look

Using OS X 10.11.6, node 8.11.3, vue 3.0.0-rc.4

$sudo npm install -g @vue/cli
+ @vue/[email protected]
added 693 packages in 28.583s

$ vue ui
ERROR  Error: Cannot find module 'read-pkg'
Error: Cannot find module 'read-pkg'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/@vue/cli/node_modules/@vue/cli-ui/apollo-server/connectors/folders.js:5:17)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)

To fix it, had to manually install a dependency.
$sudo npm install -g read-pkg

I assume this should be done automatically.

Can the current vuejs/ui be used in vue3+ts?

How direct link this ui

Here is my code, I want linked in browser, that seems does't compile the ui

    <link rel="stylesheet" href="../dist/vue-ui.css">


  <body>
    <div id="app">
      <vue-button>Test</vue-button>
    </div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script src="../dist/vue-ui.min.js"></script>
  </body>

The .native modifier for v-on is only valid on components but it was used on <button>

@Akryum Guillaume Chau ,
one quite amazing ui, when involved in my project , there always report this warning, even there is no functionality problem.
is it one known issue, or is there some special configuration needed?
thanks in advance.

Add Licence file

Add Licence file, so we can use awesome minimal components in other open-source projects