dafcoe / vue-collapsible-panel Goto Github PK

View Code? Open in Web Editor NEW

28.0 28.0 15.0 17.96 MB

Collapsible Panel / Accordion Component Using Vue3

License: MIT License

JavaScript 6.38% HTML 3.14% Vue 73.88% TypeScript 16.60%

accordion collapsible typescript vue vue3

vue-collapsible-panel's People

Contributors

Stargazers

Watchers

Forkers

vue-collapsible-panel's Issues

Panel content not working in production build

Hi,

Testing the component in development mode it works good, but after build it in production mode, the content I set dynamically does not work

It generate only the "vcp__header-title" element, not the "vcp__header-icon", nor the "vcp__body"

I saw tha behavior when the content template was empty, so something is kinda wrong when setting the content from state using the production build.

Someone with the same problem?

Uncaught TypeError: Object(...) is not a function

Hi, I'm trying to use this and followed instructions, tried adding into main.js or the Vue file, but same problem.

My HTML:

      <vue-collapsible-panel-group>
        <vue-collapsible-panel>
          <template #title>
            Panel A Title
          </template>
          <template #content>
            Panel A Content
          </template>
        </vue-collapsible-panel>
        <vue-collapsible-panel>
          <template #title>
            Panel B Title
          </template>
          <template #content>
            Panel B Content
          </template>
        </vue-collapsible-panel>
      </vue-collapsible-panel-group>

I keep getting

vue-collapsible-panel.common.js?9adf:3531 Uncaught TypeError: Object(...) is not a function
    at Module.fb15 (vue-collapsible-panel.common.js?9adf:3531)
    at __webpack_require__ (vue-collapsible-panel.common.js?9adf:21)
    at eval (vue-collapsible-panel.common.js?9adf:85)
    at eval (vue-collapsible-panel.common.js?9adf:88)
    at Object../node_modules/@dafcoe/vue-collapsible-panel/dist/vue-collapsible-panel.common.js (vendors~app.js:56)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (main.js:66)
    at Module../src/main.js (app.js:1843)
    at __webpack_require__ (app.js:854)

The referenced line has this:

Nuxt3 and SSR Support

I can get it to work successfully in Nuxt3 the following way:

plugins/vuecollapsiblepanel.client.js

import VueCollapsiblePanel from '@dafcoe/vue-collapsible-panel';
import '@dafcoe/vue-collapsible-panel/dist/vue-collapsible-panel.css'

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(VueCollapsiblePanel);
});

Component:

<ClientOnly>
    <vue-collapsible-panel-group>
        <vue-collapsible-panel v-for="accordionBlock in node.accordion">
            ...
        </vue-collapsible-panel>
    </vue-collapsible-panel-group>
</ClientOnly>

But this requires to load the component client-only and it has no SSR support. Is it possible to add SSR support? Maybe even adding a nuxt module would be lovely.

Unfortunately I don't know enough about how to do this to provide a PR

Multiple panels opening by ref

I have an intermittent and slightly random bug. On each panel I have ref so that I can toggle its visibility:

<vue-collapsible-panel-group accordion>
      <vue-collapsible-panel :expanded="true" ref="panel1">
        <template #title>
          Quote Info
        </template>
        <template #content>
          <h3>Service</h3>
        </template>
      </vue-collapsible-panel>
      <vue-collapsible-panel :expanded="false" ref="panel2">
        <template #title>
          Options
        </template>
        <template #content>
          <h3>Protection</h3>
        </template>
      </vue-collapsible-panel>
<vue-collapsible-panel :expanded="false" ref="panel3">
        <template #title>
          Delivery
        </template>
        <template #content>
          <h3>Address</h3>
        </template>
      </vue-collapsible-panel>
</vue-collapsible-panel-group>

And then I have the following method to control visibility:

setOpenPanel(current_page) {
      this.$refs['panel' + current_page].toggle();
},

But when this is triggered sometimes 2 panels, one of which does not correspond to current_page will open. This is seemingly random and can vary between dev and build environments.

This is how it looks in the html: https://bit.ly/3h5b660

I'm as sure as I can be that my code is doing what it should be doing and not calling setOpenPanel multiple times or with incorrect data so I think it must be a bug within this component.

Any ideas?

Demo link is broken

The link on https://github.com/dafcoe/vue-collapsible-panel#dafcoevue-collapsible-panel to the demo results in a 404.

HasContent fails if doesnt have content

vue-collapsible-panel/src/components/VueCollapsiblePanel.vue

Line 86 in f2a053a

  hasContent: context.slots.content && (context.slots.content()[0].children as VNodeArrayChildren).length > 0, 

Uncaught TypeError: Object(...) is not a function

//console error
Uncaught TypeError: Object(...) is not a function

//local

import {VueCollapsiblePanelGroup, VueCollapsiblePanel} from '@dafcoe/vue-collapsible-panel'

components: {
	VueCollapsiblePanelGroup,
	VueCollapsiblePanel
},

Content template doesn't resize propertly with dynamically loaded table inside own vue compoent

I've encountered that the content template doesn't resize propertly to dynamically loaded tables. This occures only when the table is defined in a seperate vue component. A static table in a seperate vue component will be rendered correctly.

The log shows no errors.

I'm quite new to vue. Maybe I miss something here....

I've added a screenshot and the code of the two templates. As you can see in the screenshot the second table shows only one partical entry, instead two fully visible entries compared to the first table.

@dafcoe/vue-collapsible-panel": "^0.2.0",
"vue": "^3.2.12",

Regards,
Kai

templates.txt

Make Title not overflow the panel title

Hi, I have implement this library with this snippet code and the result will be like this. It seems the height of header are static size

<vue-collapsible-panel-group>
            <vue-collapsible-panel>
                <template #title>
                  <div class="flex flex-col">
                    <h3 class="text-lg font-semibold w-full">Kartu Kredit</h3>
                    <p class="text-sm">Visa, Mastercard</p>
                  </div>      
                </template>
                <template #content>
                    <div @click="currentSelect=1; paymentMethod='VC'" class="p-2 m-2 rounded flex justify-between cursor-pointer transform hover:bg-gray-400 hover:text-white">
                      <img class="w-28 object-cover rounded-lg" src="https://firebasestorage.googleapis.com/v0/b/skill-baru.appspot.com/o/general%2Fbank-logo%2Fthumbs%2Fvisa_200x200.png?alt=media&token=17699fc8-7b89-4b03-b857-df878fab2130" alt="kredit">
                      <h2 class="ml-5 text-sm">Kartu Kredit</h2>
                      <svg :class="currentSelect!=1?'text-gray-200': 'text-green-400'" class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    </div>  
                </template>
            </vue-collapsible-panel>
</vue-collapsible-panel-group>

How to reconcile with the header height? Thanks

Uncaught (in promise) TypeError: currentRenderingInstance is null

I'm using this with vite 2.9.3 + vue 3.2.32 and getting this error in dev mode

[Vue warn]: Unhandled error during execution of render function 
  at <VueCollapsiblePanelGroup accordion="" class="index__accordion__3O9Hj" > 
  at <ActionSection class="index__action-section__n2Ht1" id="give-things" number=1  ... > 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App> [runtime-core.esm-bundler.js:38:16](http://localhost:3000/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js)
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <VueCollapsiblePanelGroup accordion="" class="index__accordion__3O9Hj" > 
  at <ActionSection class="index__action-section__n2Ht1" id="give-things" number=1  ... > 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App> [runtime-core.esm-bundler.js:38:16](http://localhost:3000/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js)
Uncaught (in promise) TypeError: currentRenderingInstance is null

Collapse all panels programmatically

Is there a way to close all the panels programmatically?

For example, 1 panel is open and has a button within it. After clicking the button, a function is called and all the panels collapse.

How to override css variables

In the documentation is says "For granular control over the colors, the following css variables can be overridden:"

How is this done?

I've tried:

<style>
:root {
  --base-color: #64ADF0;
  --border-color: #64ADF0;
  --bg-color-header: #64ADF0;
  --bg-color-header-hover: #64ADF0;
  --bg-color-header-active: #64ADF0;
  --bg-color-body: #64ADF0;
}
</style>

in App.vue but that didn't work. Am I missing something?

Also setting the base-color has unusual results:

<vue-collapsible-panel-group accordion base-color="#345345">

results in a header color of #defdef

<vue-collapsible-panel-group accordion base-color="#aaaaaa">

results in a header color of #ffffff, as do most other hex codes I've tried.

This is in a vue3 project if that's significant.