spartez / vue-aui Goto Github PK

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

What problem does this feature solve?

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.

What is your proposed solution?

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.

last updated 2 years ago.
can someone recommend alternative?

Versions and Environment

Vue-aui: ^1.0.8
Vue: 2.5.17
Browser: Google Chrome 69.0.3497.100 64 bits
OS: Linux (Ubuntu) 16.04

Steps to reproduce

1. Copy the <va-nav-item> from the AUI Naviagation Docs.
2. Add @click="method" on it.

<va-nav-item name="Entry" @click="showHide" icon="star" href="#/" :selected="$route.path === '/'"></va-nav-item>

Expected Behavior

Should activate the method and go to the route.path provided.

Actual Behavior

The method is never called.

Code pen

https://codepen.io/guastallaigor/pen/Eddxoz

Additional Comments:

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.

What problem does this feature solve?

Add a new timeline component kind of like this.

What is your proposed solution?

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)

What problem does this feature solve?

Possibility to sort table <va-table> asynchronous or not like AUI's Sortable table.

What is your proposed solution?

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.

Versions and Environment

Vue-aui: ^1.0.8
Vue: 2.5.17
Browser: Google Chrome 69.0.3497.100 64 bits
OS: Linux (Ubuntu) 16.04

Steps to reproduce

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>

Expected Behavior

Should show the select without any errors.

Actual Behavior

Package.json

Main.js

Additional Comments:

Am I forgetting something? If so I do apologize but I can't find the solution.

What problem does this feature solve?

Striped or "zebra" rows kind of like Bootstrap Striped Rows.

What is your proposed solution?

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.

What problem does this feature solve?

The tabs are too small on big screens and too close to each other on the left.

What is your proposed solution?

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.