spartez / vue-aui Goto Github PK
View Code? Open in Web Editor NEWSet of AUI (Atlassian User Interface) components in native Vue.js way.
Home Page: https://spartez.github.io/vue-aui/
License: MIT License
Set of AUI (Atlassian User Interface) components in native Vue.js way.
Home Page: https://spartez.github.io/vue-aui/
License: MIT License
Hi
I would like to build an Atlassian Connect add-on using Vue.js - I have the basic functionality working. I'd like to use your components, but the thing that is puzzling me is how I reference the AP Javascript library from a Vue.js component e.g. the call the JIRA REST API using AP.request().
I am starting with a simple static add-on as I'm not planning in having a backend. So I am using the connect-loader method provided in the Atlassian tutorials. I am just unclear how I can reference this later, or in any components.
Any help or advice would be greatly appreciated.
Thanks
Chris
Hi,
I have started using vue.js for JIRA add-on development. Your project is very interesting for me, I will use start using it ASAP.
I need to "wrap" the dropdown2 aui component. Have you already planned to add this component in your lib ? an idea about the better way to be able to use dropdown2 in vue.js ?
Cheers,
Guillaume
Possibility to insert icons inside the buttons, left or right of the text, or maybe sometimes just the icon itself, kind of like the Loaders Upload Button of Vuetify's example.
1.Passing a new prop, icon prepend/append and/or a new <slot name="icon">
:
iconPrepend: String,
iconAppend: String
2.It can uses the <va-icon>
component.
3.Can work with the icon named slot or by passing the props.
DEPRECATED JS - AJS.progressBars.update has been deprecated since 7.7.0 and will be removed in a future release. Use the <aui-progressbar> web component instead
at o.setProgerssIndicator ([email protected]/dist/static/js/vue-aui.min.js:5:48170)
last updated 2 years ago.
can someone recommend alternative?
Vue-aui: ^1.0.8
Vue: 2.5.17
Browser: Google Chrome 69.0.3497.100 64 bits
OS: Linux (Ubuntu) 16.04
<va-nav-item>
from the AUI Naviagation Docs.@click="method"
on it.<va-nav-item name="Entry" @click="showHide" icon="star" href="#/" :selected="$route.path === '/'"></va-nav-item>
Should activate the method and go to the route.path provided.
The method is never called.
https://codepen.io/guastallaigor/pen/Eddxoz
In my scenario, I want to hide the sidebar when I click on a <va-nav-item>
so I believe it needs a v-on:click
on it.
This is not an AUI feature.
Add a new timeline component kind of like this.
1.This timeline at first must be centered (full-width) but responsive. User pass the array of object, kind of like VaTable, with title and content attributes. Some other props to align content/title and set the color. Maybe some more props to change the text color.
items: Array,
alignContent: String,
alignTitle: String,
color: String
...
2.Must have some events like click that returns the object clicked and some hover effects.
Basic draft:
2.It will use the same classes or similar to AUI's.
Note: If you don't want this that's fine, but if you think it is a good idea and if you have some suggestions please let me know. Thank you.
Is there possible to mock or use real AJS
instance during Jest testing?
console.error node_modules/vue/dist/vue.common.dev.js:630
[Vue warn]: Error in mounted hook: "ReferenceError: AJS is not defined"
found in
---> <Select2Single>
<VaSelect2>
<TestBenchProjectPicker>
<Root>
console.error node_modules/vue/dist/vue.common.dev.js:1892
ReferenceError: AJS is not defined
at VueComponent.AJS (...node_modules\vue-aui\dist\static\js\webpack:\src\components\select2\select2Mixin.js:53:19)
at invokeWithErrorHandling (...node_modules\vue\dist\vue.common.dev.js:1859:57)
at callHook (...node_modules\vue\dist\vue.common.dev.js:4191:7)
at Object.insert (...node_modules\vue\dist\vue.common.dev.js:3135:7)
at invokeInsertHook (...node_modules\vue\dist\vue.common.dev.js:6302:28)
at VueComponent.patch [as __patch__] (...node_modules\vue\dist\vue.common.dev.js:6519:5)
at VueComponent.Vue._update (...node_modules\vue\dist\vue.common.dev.js:3917:19)
at VueComponent.updateComponent (...node_modules\vue\dist\vue.common.dev.js:4038:10)
at Watcher.get (...node_modules\vue\dist\vue.common.dev.js:4439:25)
at new Watcher (...node_modules\vue\dist\vue.common.dev.js:4428:12)
at mountComponent (...node_modules\vue\dist\vue.common.dev.js:4045:3)
at VueComponent.Object.<anonymous>.Vue.$mount (...node_modules\vue\dist\vue.common.dev.js:9002:10)
at VueComponent.Object.<anonymous>.Vue.$mount (...node_modules\vue\dist\vue.common.dev.js:11887:16)
at mount (...node_modules\@vue\test-utils\dist\vue-test-utils.js:8649:21)
at Object.<anonymous> (...src\test\js\services\TestBenchProjectService.spec.js:35:15)
at Object.asyncJestLifecycle (...node_modules\jest-jasmine2\build\jasmine_async.js:63:37)
at resolve (...node_modules\jest-jasmine2\build\queue_runner.js:56:12)
at new Promise (<anonymous>)
at mapper (...node_modules\jest-jasmine2\build\queue_runner.js:43:19)
at promise.then (...node_modules\jest-jasmine2\build\queue_runner.js:87:41)
at <anonymous>
console.error node_modules/vue/dist/vue.common.dev.js:630
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'val' of undefined
TypeError: Cannot read property 'val' of undefined
Error in mounted hook: "ReferenceError: AJS is not defined"
at VueComponent.val (node_modules/vue-aui/dist/static/js/webpack:/src/components/select2/Select2Single.vue:21:1)
at invokeWithErrorHandling (node_modules/vue/dist/vue.common.dev.js:1859:57)
at callHook (node_modules/vue/dist/vue.common.dev.js:4191:7)
at Object.insert (node_modules/vue/dist/vue.common.dev.js:3135:7)
at invokeInsertHook (node_modules/vue/dist/vue.common.dev.js:6302:28)
at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.common.dev.js:6519:5)
at VueComponent.Vue._update (node_modules/vue/dist/vue.common.dev.js:3917:19)
at VueComponent.updateComponent (node_modules/vue/dist/vue.common.dev.js:4038:10)
at Watcher.get (node_modules/vue/dist/vue.common.dev.js:4439:25)
at new Watcher (node_modules/vue/dist/vue.common.dev.js:4428:12)
at mountComponent (node_modules/vue/dist/vue.common.dev.js:4045:3)
at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.common.dev.js:9002:10)
at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.common.dev.js:11887:16)
at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:8649:21)
at Object.<anonymous> (src/test/js/services/TestBenchProjectService.spec.js:35:15)
Possibility to sort table <va-table>
asynchronous or not like AUI's Sortable table.
1.Passing a new prop, sortable
, which is a boolean, and sortableCallback
which is a callback function:
sortable: Boolean,
sortableCallback: Function
2.It will use the same classes or similar to AUI's.
Vue-aui: ^1.0.8
Vue: 2.5.17
Browser: Google Chrome 69.0.3497.100 64 bits
OS: Linux (Ubuntu) 16.04
Copy the <va-select2>
from the AUI Select2 Docs.
<va-select2 v-model="selectValue" placeholder="Select value" allow-clear :disabled="initiallyDisabled">
<va-select2-option value="value1" text="Option 1"></va-select2-option>
<va-select2-option value="value2" text="Option 2"></va-select2-option>
</va-select2>
Should show the select without any errors.
Am I forgetting something? If so I do apologize but I can't find the solution.
Striped or "zebra" rows kind of like Bootstrap Striped Rows.
1.Passing a new prop, which the default is false:
striped: Boolean
2.Add a class or style that changes the background-color to some grey color like #d9d9d9 (not sure yet).
3.This class is added to every even row when striped is true.
The tabs are too small on big screens and too close to each other on the left.
1.Passing a new prop, which the default is false:
fullWidth: Boolean
2.Add a class or style that changes the width of each tabs, based on how many tabs are there.
3.The text is centered when fullWidth is true.
Note: This is not an AUI feature.
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.