designrevision / shards-vue Goto Github PK

Current Behavior

When I use <d-button-group> in Nuxt, It will be shows these error:

[Vue warn]: Error in beforeCreate hook: "ReferenceError: document is not defined"

found in

---> <DButtonGroup> at /Users/hisk/Projects/GitHub/shards-vue/src/components/button-group/ButtonGroup.vue

and my code was:

<d-button-group>
        <d-button>Left</d-button>
        <d-button>Middle</d-button>
        <d-button>Right</d-button>
</d-button-group>

Steps to Reproduce

1. Just use <d-button-group> this component, and with SSR mode in Nuxt.js.

Thanks.

https://github.com/maiquelcraash/shards-vue3

Expected Behavior

When you use a <d-slider :v-model="test"> component to alter a data() variable test, test takes on the value of the slider of type Number.

Current Behavior

Even if variable test is a Number before, after slider updates will convert it into a String.

Steps to Reproduce

Just bind d-slider to any variable, bug is very consistent.

Context (Environment)

I am using d-slider components to test if my system is updating correctly (during development). Currently I have to parseFloat all my variables that I want to change, which is fairly tedious.

Possible Solution / Possible Implementation

Use parseFloat on the value that is emitted perhaps?

Expected Behavior

I add shards-vue in my project with larvel backend and vuejs frontend. When I start building app, evrything fine and webpack is fine, and build is successfully run! But...

Current Behavior

When I open page this is error in my app
vue.common.dev.js:630 [Vue warn]: The .native modifier for v-on is only valid on components but it was used on .

found in

---> at /Users/hisk/Projects/GitHub/shards-vue/src/components/link/Link.vue
at /Users/hisk/Projects/GitHub/shards-vue/src/components/nav/NavItem.vue
at /Users/hisk/Projects/GitHub/shards-vue/src/components/navbar/NavbarNav.vue
at /Users/hisk/Projects/GitHub/shards-vue/src/components/collapse/Collapse.vue
at /Users/hisk/Projects/GitHub/shards-vue/src/components/navbar/Navbar.vue
at resources/js/layouts/front/header.vue
at resources/js/layouts/front-page.vue

Please help.

Expected Behavior

Clicking a should fire a clicked event

Current Behavior

Clicking a d-dropdown-item does not fire a clicked event

Steps to Reproduce

1. Create new vue-cli project vue-cli webpack shards-test
2. Install and load ShardsVue
3. Add some d-dropdown-items and @click
4. Click any d-dropdown-item

Context (Environment)

I need a dropdown where each item fires a different function or the same function with different arguments

Possible Solution

Not sure if it helps, but using (from bootstrap-vue) instead works properly.

Possible Implementation

Hi

i am trying to make accordion dynamic and i am binding the id like this

<d-btn block-level size="small" theme="secondary" href="#" v-b-toggle="'accordion'+index" >Accordion 1</d-btn>

But its not working any idea what i am doing wrong

Expected Behavior

$ vue serve sandbox/Sandbox.vue
(node:10408) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'version' of undefined
    at module.exports (C:\Users\DELL\AppData\Roaming\npm\node_modules\@vue\cli-service-global\node_modules\@vue\cli-plugin-eslint\index.js:18:29)
    at plugins.forEach (C:\Users\DELL\AppData\Roaming\npm\node_modules\@vue\cli-service-global\node_modules\@vue\cli-service\lib\Service.js:79:7)
    at Array.forEach (<anonymous>)
    at Service.init (C:\Users\DELL\AppData\Roaming\npm\node_modules\@vue\cli-service-global\node_modules\@vue\cli-service\lib\Service.js:78:18)
    at Service.run (C:\Users\DELL\AppData\Roaming\npm\node_modules\@vue\cli-service-global\node_modules\@vue\cli-service\lib\Service.js:204:10)
    at Object.exports.serve (C:\Users\DELL\AppData\Roaming\npm\node_modules\@vue\cli-service-global\index.js:54:33)
    at Command.program.command.description.option.option.action (C:\Users\DELL\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js:102:53)
    at Command.listener (C:\Users\DELL\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\commander\index.js:315:8)
    at emitTwo (events.js:126:13)
    at Command.emit (events.js:214:7)
(node:10408) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:10408) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. Done in 0.57s.

Current Behavior

 npm i @vue/[email protected] -g

In this page https://designrevision.com/docs/shards-vue/components/collapse there is a demo for the Collapse component showing a button with size="small". This returns an error: Invalid prop: custom validator check failed for prop "size"

In the Button Component the only allowed sizes are sm and lg as showing in button/Button.vue component line 56-60:

size: { type: String, validator: v => ['sm', 'lg', null].includes(v), default: null },

I propose we change size="sm" in https://designrevision.com/docs/shards-vue/components/collapse

first of all, thank you very much for this awesome ui kit!

Expected Behavior

the :to prop for d-nav-item and d-link should work like the same way router-link :to does.
how they should work

Current Behavior

d-nav-item and d-link :to prop only accepts a string or an object with a path prop

Steps to Reproduce

1. use a d-nav-item or d-link with a named route
2. will produce href="#"

Context (Environment)

i mainly use named routes in my apps so this would be awesome if it would work

Expected Behavior

According to the documentation, the only place where an icon is used is in the navigation and it was used this way:

<fa :icon="['fas', 'search']" />

however, when I do I get an error that the component fa is not registered

Current Behavior

There is no documentation on how to use icons nor an icon component.

Note: I have tried to use the <i/> tag but it didn't work either.

Steps to Reproduce

described in first section

Possible Solution

Implement the fa component ?

First thanks for this awesome Kit, i love it !

Expected Behavior

I'm trying to get a date picker in french

Current Behavior

By default, en is choosed. But if i put :language="fr" or :translation="fr", it doesn't work. I've found multiple translation in the vuejs-datepicker directory, but how import 'fr.js' ?

Steps to Reproduce

Context (Environment)

Im just calling the datepicker component

Expected Behavior

To be aligned as expected

Current Behavior

Align issues

Steps to Reproduce

1. Access https://designrevision.com/docs/shards-vue/components/alert
2. At the dismissables
3. Check the close button

Context (Environment)

Possible Solution

// fix
.alert-dismissible .close {
    top: 0;
    right: 0;
    padding: .75rem 1.25rem 1.25rem;
    transition: all .25s cubic-bezier(.27,.01,.38,1.06);
    line-height: 1.2rem;
}

// Previous
.alert-dismissible .close {
    top: 0;
    right: 0;
    padding: .75rem 1.25rem;
    transition: all .25s cubic-bezier(.27,.01,.38,1.06);
}

Expected Behavior

Should Compile SCSS without issue

Current Behavior

Incompatible units: 'px' and 'rem'.
SASS compiler error, regarding scss-shards-ui_variables.scss

It seems to happen when using operations like sum with valiables.
$popover-arrow-outer-width: $popover-arrow-width + 1px !default;

Shouldnt be all measument of pixels converted to rem, as bootstrap4 standards? (Im not css expert, just wondering)

Thank you

Is there any plan for vue 3 support?

Expected Behavior

npm audit should pass

Current Behavior

npm audit shows a vulnerability in 4.1.3:

npm audit report

bootstrap <3.4.1 || >=4.0.0 <4.3.1
Severity: moderate
Cross-Site Scripting - https://npmjs.com/advisories/891
No fix available
node_modules/shards-vue/node_modules/bootstrap
shards-ui 2.0.0 - 2.1.2
Depends on vulnerable versions of bootstrap
node_modules/shards-vue/node_modules/shards-ui
shards-vue *
Depends on vulnerable versions of shards-ui
node_modules/shards-vue

Steps to Reproduce

1. Install shards-vue
2. Run npm audit

Context (Environment)

Possible Solution

Upgrade bootstrap to >= 4.3.1
Upgrade shards-ui >= 3.0.0

Possible Implementation

Expected Behavior

The d-nav-item with an :exact prop should not have an active class when it is not the current active route

Current Behavior

Even after applying the active prop to a d-nav-item, an active class is always applied to it as long as the current path is preceeded by the path of the d-nav-item with the exact prop.

<d-collapse is-nav id="nav-collapse" class="justify-content-md-center">
    <d-navbar-nav>
        <d-nav-item to="/" exact>Home</d-nav-item>
        <d-nav-item to="/portfolio">Portfolio</d-nav-item>
        <d-nav-item to="/stocks">Stocks</d-nav-item>
        <d-nav-item to="">End Day</d-nav-item>
        <d-dropdown text="Save & Load" is-nav>
            <d-dropdown-item>Action</d-dropdown-item>
            <d-dropdown-item>Another action</d-dropdown-item>
            <d-dropdown-item>Something else here</d-dropdown-item>
            <d-dropdown-divider />
            <d-dropdown-item>Separated link</d-dropdown-item>
        </d-dropdown>
    </d-navbar-nav>
</d-collapse>

export default new Router({
    linkActiveClass: 'active',
    linkExactActiveClass: 'exact-active',
   // more router options
})

Result

Expected Behavior

I used shards-vue in universal mode of nuxt.js. The universal mode executes ssr.

Current Behavior

It did not work at all with the error document is not defined. But, it worked when I changed to spa mode.

Steps to Reproduce

1. Set nuxt.js to universal mode.
2. Set shardsVue to nuxt.js plugin.
3. Use the shardsVue component on the page.

Context (Environment)

I cannot execute SSR or generate in nuxt.js.

Possible Solution

I think it probably contains functions that cannot be executed in SSR.
So when I set the plugin mode in nuxt.config.js to client, it worked fine.

nuxt.config.js

  plugins: [{src:'~/plugins/shardsVue', mode: 'client'}
  ],

I think nuxt.js is one of the most popular frameworks and would you please add this to the documentation if you like?

😃

btw, nice work!!

Expected Behavior

Inputs don't trigger event modifiers

Current Behavior

Usual input triggers event modifiers but d-input doesn't

<d-input
   v-model="myData"
   v-on:keydown="keydownMethod"
/>

Steps to Reproduce

1. Create new vue-cli project
2. Install and load ShardsVue
3. Add <d-input ... v-on:keydown="keydownMethod" />
4. Method is never triggered

First of all, thanks for your UI

Expected Behavior

In documentation said, that d-textarea has property :max-rows for auto change textarea height.
https://designrevision.com/docs/shards-vue/components/form-textarea

Current Behavior

In code of d-textarea component nothing about this prop :( Of course, it`s not working
https://github.com/DesignRevision/shards-vue/blob/master/src/components/form-textarea/FormTextarea.vue