creativetimofficial / vue-argon-design-system Goto Github PK

Will a npm package be available?

npm install vue-argon

how to solve this?

I want to test your template/theme after running npm run serve I get

 ERROR  Failed to compile with 4 errors                                                                                                                      2:52:08 PM

These dependencies were not found:

* bootstrap-vue/es/components/carousel/carousel in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/components/Carousel.vue?vue&type=script&lang=js&
* bootstrap-vue/es/components/carousel/carousel-slide in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/components/Carousel.vue?vue&type=script&lang=js&
* bootstrap-vue/es/directives/popover/popover in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/components/JavascriptComponents/Tooltips.vue?vue&type=script&lang=js&
* bootstrap-vue/es/directives/tooltip/tooltip in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/components/JavascriptComponents/Tooltips.vue?vue&type=script&lang=js&

To install them, you can run: npm install --save bootstrap-vue/es/components/carousel/carousel bootstrap-vue/es/components/carousel/carousel-slide bootstrap-vue/es/directives/popover/popover bootstrap-vue/es/directives/tooltip/tooltip

I tried installing the depencies but get

 $ npm install --save bootstrap-vue/es/components/carousel/carousel bootstrap-vue/es/components/carousel/carousel-slide bootstrap-vue/es/directives/popover/popover bootstrap-vue/es/directives/tooltip/tooltip
npm ERR! code ENOLOCAL
npm ERR! Could not install from "bootstrap-vue/es/components/carousel/carousel" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2019-09-13T12_57_52_055Z-debug.log

Steps to replicate: 1. Visit page with a checkbox 2.Refresh the page 3.Try to click on checkbox and its not working
It can even be replicated here https://demos.creative-tim.com/vue-argon-design-system/documentation/components/buttons.html

Hello, I am a fan of vue-agron.

Today I am trying to change the tabs using parent component. I have tried both parameters activeTab and value (https://github.com/creativetimofficial/vue-argon-design-system/blob/master/src/components/Tabs/Tabs.vue). Both of them sets the initial tab, but it does not propagate the active tab to the parent element. It would be very useful if the parent element can know and control) which tab is currently active and which should be activated.

Thanks in advance

The licensed link is not working

Hi,
I have a problem installing the plugin via Vue UI. The plugin is installed as a dependency and I can't import it via:

import Argon from '@plugin/argon-kit'

The error message is:

This dependency was not found:

• @plugin/argon-kit in ./src/main.js

I'm using Vue on Intellij.

Can anyone help me?
Can you give me some examples or clarifications?

Thank you

When compiling this existing project with yarn, the tooltips are not working correctly. Hover a tooltip button : starting to appear, then after half a second, disappear.
Happens similarly on Firefox, Chrome or Edge.

Should this project be cloned and installed into an existing vue project?
Because I have tried:
npm i argon-design-system-free

import '../node_modules/argon-design/css/argon.min.css'
import '../node_modules/argon-design/css/argon.min.js'

and on building this to production it fails with scss $variable error.

Any help here is appreciated.

Version

1.0.0

Reproduction link

http://No.com

Operating System

Linux

Device

PC

Browser & Version

Chrome latest

Steps to reproduce

1. Load up the component.

What is expected?

The register panel stays hidden behind the sign up panel and shows up irregardless of which button is pressed.

What is actually happening?

The register panel stays hidden behind the sign up panel and shows up irregardless of which button is pressed.

Solution

Additional comments

<base-button tag="a" :href="{{member.twitter}}" type="primary" icon="fab fa-twitter" rounded icon-only></base-button>
this code throws error

ERROR in ./pages/info/bandori.vue?vue&type=template&id=a52cddae& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./pages/info/bandori.vue?vue&type=template&id=a52cddae&) Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): SyntaxError: Unexpected token (1:1312) at Parser.pp$4.raise (/var/www/seiyuu/node_modules/vue-template-es2015-compiler/buble.js:2757:13) at Parser.pp.unexpected (/var/www/seiyuu/node_modules/vue-template-es2015-compiler/buble.js:647:8) at Parser.pp$3.parseIdent (/var/www/seiyuu/node_modules/vue-template-es2015-compiler/buble.js:2712:10) at Parser.pp$3.parsePropertyName (/var/www/seiyuu/node_modules/vue-template-es2015-compiler/buble.js:2496:105) at Parser.pp$3.parseProperty (/var/www/seiyuu/node_modules/vue-template-es2015-compiler/buble.js:2426:8) at Parser.pp$3.parseObj (/var/www/seiyuu/node_modules/vue-template-es2015-compiler/buble.js:2380:23) at Parser.pp$3.parseExprAtom (/var/www/seiyuu/node_modules/vue-template-es2015-compiler/buble.js:2179:17) at Parser.<anonymous> (/var/www/seiyuu/node_modules/vue-template-es2015-compiler/buble.js:6003:24) at Parser.parseExprAtom (/var/www/seiyuu/node_modules/vue-template-es2015-compiler/buble.js:6129:31) at Parser.pp$3.parseExprSubscripts (/var/www/seiyuu/node_modules/vue-template-es2015-compiler/buble.js:2047:19) at Parser.pp$3.parseMaybeUnary (/var/www/seiyuu/node_modules/vue-template-es2015-compiler/buble.js:2024:17) at Parser.pp$3.parseExprOps (/var/www/seiyuu/node_modules/vue-template-es2015-compiler/buble.js:1966:19) at Parser.pp$3.parseMaybeConditional (/var/www/seiyuu/node_modules/vue-template-es2015-compiler/buble.js:1949:19) at Parser.pp$3.parseMaybeAssign (/var/www/seiyuu/node_modules/vue-template-es2015-compiler/buble.js:1925:19) at Parser.pp$3.parsePropertyValue (/var/www/seiyuu/node_modules/vue-template-es2015-compiler/buble.js:2443:87) at Parser.pp$3.parseProperty (/var/www/seiyuu/node_modules/vue-template-es2015-compiler/buble.js:2434:8) at Parser.pp$3.parseObj (/var/www/seiyuu/node_modules/vue-template-es2015-compiler/buble.js:2380:23) at Parser.pp$3.parseExprAtom (/var/www/seiyuu/node_modules/vue-template-es2015-compiler/buble.js:2179:17) at Parser.<anonymous> (/var/www/seiyuu/node_modules/vue-template-es2015-compiler/buble.js:6003:24) at Parser.parseExprAtom (/var/www/seiyuu/node_modules/vue-template-es2015-compiler/buble.js:6129:31) at Parser.pp$3.parseExprSubscripts (/var/www/seiyuu/node_modules/vue-template-es2015-compiler/buble.js:2047:19) at Parser.pp$3.parseMaybeUnary (/var/www/seiyuu/node_modules/vue-template-es2015-compiler/buble.js:2024:17)

I want to make my Navbar mobile friendly. Currently used CSS does not work. Even the Navbar in the documentation below 992px does not look good. I want to add dropdown list item, search, logo and one button in the collapsed navbar.

Can anyone help me how to make base dropdown items responsive and look good?

Hi,
when installing current (1.0.0) version of Argon using npm install, several error messages are shown:
npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Use uuid module instead
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js

Can the install setup be updated to reflect latest, secure updates?
Thanks
Ben

Hello i would like to use some component from bootstrap-vue but i can't.

For exemple b-table component

Thanks for the work on the template. I look forward to the PRO version.

I have a client that relies heavily on IE.

The pages rendered mostly blank or with missing components.

There were some compiling issues showing up in connection with Object.assign()

Are you expereincing this in your builds?

I had to add the following polyfills in the babel.config.js to get it to work.

module.exports = {
      presets: [
        ['@vue/app', {
          polyfills: [
            'es6.promise', // pages would partilally load // already default included now
            'es6.array.iterator', // pages would partilally load // already default included now
            'es6.symbol',
            'es6.object.assign'  // this is the one that finally allowed it to completely build
          ]
        }]
      ]
    }

Thoughts?

Version

latest

Reproduction link

https://e-katalogos.eu/#/

Operating System

windows 7

Device

desktop

Browser & Version

chrome - Version 84.0.4147.105 (Official Build) (64-bit)

Steps to reproduce

At the bottom of the landing page, there's a contact form. If you write anything on the name or email field, it will be instantly deleted when you remove your cursor from it.

1. type something on the input
2. click anywhere else and what you've just wrote will be gone

What is expected?

keep information for submit

What is actually happening?

auto deleting information

Solution

Additional comments

I'm assuming it should be click-ou[t]side.js.

When i run npm run server this error is shown in console of browser : Manifest: Line: 1, column: 1, Unexpected token.

Looking at the demo on the official site, once you click on a link within the navigation, the dropdown doesn't close until you remove mouse hover.

On mobile the navbar doesn't hide until you click outside.

Is there an easy fix to this?

Use MacOS or iOS, Google Chrome of Safari

https://demos.creative-tim.com/vue-argon-design-system/#/profile

i'm trying to deploy this template but after entring this (npm install) there are many errors

Hi man, first, thanks, this looks great, after uikit I'd not found any template system that really I like it...

do you know how integrate it with a nuxt app??? I suppose that I need to use this

import Vue from 'vue';
import Argon from '@/plugins/argon-kit'
Vue.use(Argon);

but I think that this need an extra step...also would be great if you could includes this with create-nuxt-app https://github.com/nuxt-community/create-nuxt-app ... this would increase the visibility of the project...

thank you...good luck

shouldnt those tags on a landing page site be a bit separate one from another by default?
they are too close

Hello, friends! I output data so:

<template>
	<div>
		<task
		v-for="item in items"
		v-bind:key="item.name"
		v-bind:name="item.name"
		v-bind:description="item.description"
		v-bind:func="item.func"
		/>
	</div>
</template>
<script>
import arraytask from "@/data/arraytask.json";
export default {
	name: 'arrayz',
	components: {
		'task': () => import('@/components/task')
	},
	data: function() {
		return {
			items: arraytask
		}
	},	
}
</script>

I can't uderstand how connect pagination with display my data. (Sorry, for my English)

I am getting

while running yarn install on node v12.4.0

whereas changing node version to v11.15.0 works just fine

When you change the route without closing the modal with the regular way, the class modal-open in the body tag is not removed, causing a serious usability problem.

I've checked this problem even on the official page of the template and it fails .

There is already an issue open for 2 months on this but I still couln't figure it out. Can someone put out an example please? 😄

The dropdowns is not showing properly, i used the exact same code as in the components documentation.

This is my code

<template>
  <div class="content-wrapper content-wrapper--with-bg">
    <div class="row" style="margin-bottom: 20px;">
      <div class="col-md-3">
        <h1 class="display-3">Animaux</h1>
      </div>
      <div class="col-md-2">
        <base-input alternative placeholder="Type"></base-input>
      </div>
      <div class="col-md-2">
        <base-dropdown>
          <base-button slot="title" type="secondary" class="dropdown-toggle">
          Propriétaire
          </base-button>
          <a class="dropdown-item" href="#">Propriétaire 1</a>
          <a class="dropdown-item" href="#">Propriétaire 2</a>
          <a class="dropdown-item" href="#">Propriétaire 3</a>
        </base-dropdown>
      </div>
    </div>
    <div class="page-content">
      <div class="row row-grid">
        <div
          v-for="(card, index) in cards"
          :key="index"
          class="col-xl-3 col-lg-4 col-md-5 col-sm-1 animal-card"
        >
          <card class="border-0" hover shadow>
            <div class="row">
              <div class="col-5">
                <img
                  v-lazy="'img/theme/team-1-800x800.jpg'"
                  class="rounded-circle img-center img-fluid shadow shadow-lg--hover"
                  style="width: 100px;"
                />
              </div>
              <div class="col-5">
                <ul class="info-animal">
                  <li class="name_animal">{{card.Card}}</li>
                  <li class="animal_type">Chien</li>
                  <li class="bread">Labrador</li>
                </ul>
              </div>
              <div class="col-2">
                <base-button tag="a" href="#" type="primary" icon="fa fa-pencil" rounded icon-only></base-button>
              </div>
            </div>
            <hr />
            <div class="row infos">
              <div class="col-3">Infos :</div>
              <div class="col-3">102 cm</div>
              <div class="col-3">50 Kg</div>
              <div class="col-3">Pucé</div>
            </div>
          </card>
        </div>
      </div>
    </div>
  </div>
</template>

how to resize modal become more large?

Hi,
I imported the theme with npm vue-argon-theme, but at the moment of build, I have these problems "I think" with Webpack:

ERROR in ./node_modules/vue-argon-theme/lib/globalComponents.js
Module not found: Error: Can't resolve './components/Badge' in '/Users///NodeJs/demo/node_modules/vue-argon-theme/lib'
@ ./node_modules/vue-argon-theme/lib/globalComponents.js 1:0-39 15:18-23 15:30-35
@ ./node_modules/vue-argon-theme/lib/index.js
@ ./src/app/index.js

Following the Webpack config file:

const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
entry: './src/app/index.js',
output: {
path: __dirname + '/src/public/js',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node-modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /.vue$/,
loader: 'vue-loader'
}

    ]
}, plugins: [
    new VueLoaderPlugin()
]

}
Anyone can help me?
Thanks

I am trying to use the Modal component, I have the following in my vue file:

<div>
    <base-button type="primary" @click="modals.modal0 = true">
      Launch demo modal
    </base-button>
   <modal :show.sync="modals.modal0">
     <template slot="header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
     </template>
     <div>
      ...
     </div>
     <template slot="footer">
         <base-button type="secondary" @click="modals.modal0 = false">Close</base-button>
         <base-button type="primary">Save changes</base-button>
     </template>
   </modal>

</div>

And in the export default:

...
import Modal from "@/components/Modal";
import Modals from "@/views/components/JavascriptComponents/Modals.vue";
...
components: {
        Modal,
        Modals
    },
...

However, the component does not load and I get the following error in console:
Property or method "modals" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Hello! I work with Nuxtjs. In my nuxt.config.js:

module.exports = {
  .
  .
  plugins: ['@/plugins/vue-highlightjs', '@/plugins/argon'],
  .
  .
  modules: ['@nuxtjs/style-resources'],
  styleResources: {
      sass: [
          '@/assets/mainStyle.sass'
      ]
  },

In browser in devtool I see that Argon _type.scss applied, but my mainStyle.sass -- crossed out

In section section-lg pt-lg-0 section-contact-us on https://demos.creative-tim.com/vue-argon-design-system/#/landing the form inputs for name and email don't keep their inputs when they lose focus.

ERROR Failed to compile with 1 errors 16:14:58
Module build failed (from ./node_modules/eslint-loader/index.js):
Error: No ESLint configuration found.
at Config.getLocalConfigHierarchy (C:\Users\PC_Master_Race\Desktop\CheckItSuper\node_modules\eslint\lib\config.js:255:39)
at Config.getConfigHierarchy (C:\Users\PC_Master_Race\Desktop\CheckItSuper\node_modules\eslint\lib\config.js:179:43)
at Config.getConfigVector (C:\Users\PC_Master_Race\Desktop\CheckItSuper\node_modules\eslint\lib\config.js:286:21)
at Config.getConfig (C:\Users\PC_Master_Race\Desktop\CheckItSuper\node_modules\eslint\lib\config.js:329:29)
at processText (C:\Users\PC_Master_Race\Desktop\CheckItSuper\node_modules\eslint\lib\cli-engine.js:163:33)
at CLIEngine.executeOnText (C:\Users\PC_Master_Race\Desktop\CheckItSuper\node_modules\eslint\lib\cli-engine.js:620:17)
at lint (C:\Users\PC_Master_Race\Desktop\CheckItSuper\node_modules\eslint-loader\index.js:278:17)
at C:\Users\PC_Master_Race\Desktop\CheckItSuper\node_modules\loader-fs-cache\index.js:127:18
at ReadFileContext.callback (C:\Users\PC_Master_Race\Desktop\CheckItSuper\node_modules\loader-fs-cache\index.js:31:14)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:238:13)

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

Version

v1.1.0

Reproduction link

https://github.com/vlssu/vlssu-minecraft-public-service

Operating System

win10pro

Device

pc

Browser & Version

Google Chrome 92.0.4515.159 x64

Steps to reproduce

1. npm install
2. npm run build

What is expected?

It should be able to render the file in the subpath, but I did not find

What is actually happening?

Yarn build cannot compile static files (only the page of the homepage can be compiled, and the subpath does not produce results

Solution

Additional comments

First of all, thank you for the Argon!
That said, I noticed the type property of a modal seems meaningless?
It inserts the modal-mini or modal-notice class, but these don't have any CSS mark-up, so it changes nothing.

Furthermore, in the social media icons of the Argon Vue docs, the Dribble and GitHub logo point to your Instagram.

If there's anything else I can contribute, let me know!

What is your enhancement?

how to operate the favicon settings.

In my build of laravel nucleo.css always trying to find font files in root directory of localhost instead of using the complied fonts inside public folder.
I have copied the entire files from src folder to laravels resources/js folder and before compiling the js I have set the file path according to my setup. Hence my nucleo.css files font face paths are like below

@font-face {
  font-family: 'NucleoIcons';
  src: url('../fonts/nucleo-icons.eot');
  src: url('../fonts/nucleo-icons.eot') format('embedded-opentype'), 
  url('../fonts/nucleo-icons.woff2') format('woff2'), 
  url('../fonts/nucleo-icons.woff') format('woff'), 
  url('../fonts/nucleo-icons.ttf') format('truetype'), 
  url('../fonts/nucleo-icons.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

but after successful build via npm, these font faces are missing. The app is trying to find font files form localhost/fonts/... but my compiled fonts are in localhost/laravelapp/public/fonts/ folder.
What I'm missing?

Fixed by adding sign-up-container

Hi, I am using Vue Argon Design System. I want to use card component but I can't find anything in the description on how to create it. Can you tell me how to use the card component?

I try using the app but when I use yarn serve I get this error:

$ vue-cli-service serve
 INFO  Starting development server...
 98% after emitting CopyPlugin                                                    

 ERROR  Failed to compile with 1 errors                                                                               9:12:20 PM

This relative module was not found:

* ./registerServiceWorker in ./src/main.js

Any tips?

The toggle buttons in the Landing demo can't be unchecked in Chrome and Firefox. This issue is present on the online demo also.

Here's the console output in Firefox with a "serve" run :

[Vue warn]: Invalid prop: type check failed for prop "value". Expected Boolean, got Event 

found in

---> <BaseSwitch> at src/components/BaseSwitch.vue
       <CustomControls> at src/views/components/CustomControls.vue
         <Components> at src/views/Components.vue
           <FadeTransition>
             <App> at src/App.vue
               <Root> vue.runtime.esm.js:619
    VueJS 22
        warn
        assertProp
        validateProp
        updateChildComponent
        prepatch
        patchVnode
        updateChildren
        patchVnode
        updateChildren
        patchVnode
        updateChildren
        patchVnode
        updateChildren
        patchVnode
        patch
        _update
        updateComponent
        get
        run
        flushSchedulerQueue
        nextTick
        flushCallbacks

https://demos.creative-tim.com/vue-argon-design-system/documentation/components/dropdowns.html#

in the dropdown of the flags, it is written like this with double "d"

It seems that theres's no Select input component, is it on purpose ?

Firstly thanks a lot for the Creative Tim team to provide us with such an amazing framework.

For this issue, I am wondering is there any search-dropdown implementation. From the documentation of Agron, I could not find any search dropdown implementation. However, on the documentation page on the top right (https://demos.creative-tim.com/vue-argon-design-system/documentation/components/alerts.html), there is a search box that works exactly like what I want.

By any chance, this implementation is documented? Thanks in advance.

Yarn build cannot compile static files (only the page of the homepage can be compiled, and the subpath does not produce results