Code Monkey home page Code Monkey logo

vue3-tabs's People

Contributors

hj29 avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar

Forkers

huangmingkun butnothero amantura adedolapoo lipore raudineo kstuiber

vue3-tabs's Issues

How can I customize the style?

I would like to remove the default styling of the component and add my own styles with Tailwind CSS, how can I do this?

Support viewport resize

At this moment, during the resize of viewport, the whole tab system goes wild:

2021-04-30_01-40-30

It could be great if there would be a possibility to somehow handle this scenario.

Basic Example not work as expected

I just copy/paste the Basic Example in an empty Ionic/vue project but not work as expected, and not like the online demo.

The demo should start from "B" panel (second panel), but in my project there aren't panels generated on startup.
In firefox inspection TabPanels is empty. If i click on tabs the panel will show.
If i start the project from the first panel, i show it but the first switch from panels is without animation.

Seem the panels are not loaded in DOM on startup

├── [email protected]

EDIT
I downgrade to version 0.1.12 and it work! It seem there is a bug in latest version!

I got error creating tabs without tabs array definition

Hello,
In @vue/cli app I try to use vue3-tabs component without tabs array definition, as inside of any
tab-panel I would have other components and I got error :

[Vue warn]: Unhandled error during execution of mounted hook 
  at <TabPanels modelValue=1 onUpdate:modelValue=fn animate=true > 
  at <TestTrePage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…}[[Handler]]: Object[[Target]]: Object[[IsRevoked]]: false > > 
  at <RouterView> 
  at <App>
warn @ runtime-core.esm-bundler.js?5c40:38
logError @ runtime-core.esm-bundler.js?5c40:211
handleError @ runtime-core.esm-bundler.js?5c40:203
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:157
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:163
hook.__weh.hook.__weh @ runtime-core.esm-bundler.js?5c40:1873
flushPostFlushCbs @ runtime-core.esm-bundler.js?5c40:333
flushJobs @ runtime-core.esm-bundler.js?5c40:371
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js?5c40:264
queueJob @ runtime-core.esm-bundler.js?5c40:258
run @ reactivity.esm-bundler.js?a1e9:183
trigger @ reactivity.esm-bundler.js?a1e9:189
scheduler @ reactivity.esm-bundler.js?a1e9:811
run @ reactivity.esm-bundler.js?a1e9:183
trigger @ reactivity.esm-bundler.js?a1e9:189
scheduler @ reactivity.esm-bundler.js?a1e9:811
run @ reactivity.esm-bundler.js?a1e9:183
trigger @ reactivity.esm-bundler.js?a1e9:189
scheduler @ reactivity.esm-bundler.js?a1e9:811
run @ reactivity.esm-bundler.js?a1e9:183
trigger @ reactivity.esm-bundler.js?a1e9:189
set value @ reactivity.esm-bundler.js?a1e9:721
finalizeNavigation @ vue-router.esm-bundler.js?6c02:3028
eval @ vue-router.esm-bundler.js?6c02:2901
Promise.then (async)
pushWithRedirect @ vue-router.esm-bundler.js?6c02:2872
push @ vue-router.esm-bundler.js?6c02:2816
install @ vue-router.esm-bundler.js?6c02:3181
use @ runtime-core.esm-bundler.js?5c40:2911
eval @ main.js?56d7:25
./src/main.js @ app.js:1799
__webpack_require__ @ app.js:854
fn @ app.js:151
1 @ app.js:2316
__webpack_require__ @ app.js:854
checkDeferredModules @ app.js:46
(anonymous) @ app.js:994
(anonymous) @ app.js:997
vue3-tabs.common.js?f4be:3420 Uncaught (in promise) TypeError: vnodes.map is not a function
    at getTabPanelOptions (vue3-tabs.common.js?f4be:3420)
    at eval (vue3-tabs.common.js?f4be:3387)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:163)
    at Array.hook.__weh.hook.__weh (runtime-core.esm-bundler.js?5c40:1873)
    at flushPostFlushCbs (runtime-core.esm-bundler.js?5c40:333)
    at flushJobs (runtime-core.esm-bundler.js?5c40:371)

and my vue file:

<template>
  <div>
    
    selectedTab:{{ selectedTab}}<br>
    <h3>Basic Example</h3>
    <tabs
      v-model="selectedTab"
    >
      <tab
        class="tab"
        :key="'tab_details'"
        :val="1"
        :label="'Details'"
        :indicator="true"
      />
      <tab
        class="tab"
        :key="'tab_about'"
        :val="2"
        :label="'About'"
        :indicator="true"
      />
    </tabs>
    <tab-panels
      v-model="selectedTab"
      :animate="true"
    >
      
      <tab-panel
        :key="'tp_details'"
        :val="1"
      >
        <h3>Details</h3>
      </tab-panel>
      
      <tab-panel
        :key="'tp_about'"
        :val="2"
      >
        <h3>About</h3>
      </tab-panel>
      
    </tab-panels>
  </div>
</template>

<script>
  import { ref, onMounted, defineComponent } from 'vue'

  import { Tabs, Tab, TabPanels, TabPanel } from 'vue3-tabs'
  export default defineComponent({
    name: 'testTrePage',
    components: {
      Tabs,
      Tab,
      TabPanels,
      TabPanel
    },
    setup () {
      const selectedTab = ref(1)

      const testOnMounted = async () => {
        console.log('testOnMounted!!!::')
      }

      onMounted(testOnMounted)

      return {
        selectedTab
      }
    } // setup() {

  })
  
</script>

<style scoped>
  .tab {
    padding: 10px 0px;
    margin: 10px 20px;
    background-color: yellow;
  }
  .active-tab {
    /*border-width: 0px;*/
    /*border-top-width: 2px;*/
    /*border-style: solid;*/
    border: 2px dotted red;
  }
  /* disable select highlight */
  .tab-panels {
    -webkit-user-select: none;
    -moz-user-select: none;
    border: 2px dotted blue;
  }
  .tab-panel {
    padding: 20px;
    /*box-sizing: border-box;*/
    border: 2px dotted green;
  }
</style>

as result first tab is active and I can not open the second tab.
What is wrong ?

    "vue": "^3.0.0",
    "vue3-tabs": "^0.1.4",

Thanks!

Html comments inside tab-panels cause TypeError 

<tab-panels>
 <!-- comments -->
<tab-panel></tab-panel>
<tab-panel></tab-panel>
</tab-panels>

TypeError: vnodes.map is not a function

tab-panels allow only tab-panel children, if there are comments inside an error will throw.

I suggest to display some warnings on console before the error, so people know what the error mean without know the code.

I got error "Component is missing" trying to use vue3-tabs component in vuejs3 app

Hello,
In @vue/cli app I try to use vue3-tabs component and for this in src/main.js I added lines :

import { Tabs, Tab, TabPanels, TabPanel } from 'vue3-tabs'

...

app.use(Tabs)
app.use(Tab)
app.use(TabPanels)
app.use(TabPanel)

export default app.config.globalProperties
app.config.globalProperties.toast = DKToast

app.mount('#app')

and in src/views/test.vue :

<template>
  <div>
    
    selectedTab:{{ selectedTab}}<br>
    stringVar:{{ stringVar}}<br>
    tabs:{{ tabs}}
    <h3>Basic Example</h3>
    <tabs
      v-model="selectedTab"
    >
      <tab
        class="tab"
        v-for="(tab, i) in tabs"
        :key="`t${i}`"
        :val="tab"
        :label="tab"
        :indicator="true"
      />
    </tabs>
    <tab-panels
      v-model="selectedTab"
      :animate="true"
    >
      <tab-panel
        v-for="(tab, i) in tabs"
        :key="`tp${i}`"
        :val="tab"
      >
        {{ tab }}
      </tab-panel>
    </tab-panels>
  </div>
</template>

<script>
  import { ref, onMounted, reactive } from 'vue'

  import { Tabs, Tab, TabPanels, TabPanel } from 'vue3-tabs'
  export default {
    name: 'testTrePage',
    components: {
      Tabs,
      Tab,
      TabPanels,
      TabPanel
    },
    setup () {
      let stringVar = ref('Init value')
      const tabs = ['A', 'B', 'C']
      const selectedTab = ref(2)
      const state = reactive({
        selectedTab: tabs[1]
      })

      const testOnMounted = async () => {
        console.log('testOnMounted!!!::')
      }

      onMounted(testOnMounted)

      return {
        stringVar,
        tabs,
        selectedTab
        // ...toRefs(state)
      }
    } // setup() {

  }
</script>

and I got error :

[Vue warn]: Component is missing template or render function. 
  at <Anonymous modelValue=2 onUpdate:modelValue=fn > 
  at <TestTrePage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App>

and what I see in browser : https://prnt.sc/vmmgxn

What is wrong?

In file package.json :

    "vue": "^3.0.0",
    "vue3-tabs": "^0.1.4",

Thanks!

Focusable elements in tabs break tabs renderer during interactions

There is several ways to force this behavior, in general any attempt to focus element from tab that is not currently fully displayed breaks the whole component.

Scenarios were we've experienced this:

  1. When user will try to use tabulator to jump between focusable elements (forms, inputs, buttons, etc.) on 2 tabs

ezgif-5-eb3706019a

  1. Programmatically focused input also results in similar bug, etc.

Adjust component height to currently selected tab

For now, the tab component has height of the biggest tab and it creates a lot of unnecessary space for some tabs, especially if one of them is just quite huge. Some kind of an option to switch this behavior would be great :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.