fix: scoped CSS not working

Akryum · May 25, 2022 · 0524082 · 0524082
1 parent 971beb5
commit 0524082
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 59 deletions.
diff --git a/packages/demo-vue3/src/App.vue b/packages/demo-vue3/src/App.vue
@@ -30,4 +30,8 @@ body {
 .nav a.router-link-active {
   @apply bg-teal-500 text-white;
 }
+
+button {
+  @apply px-3 py-1 rounded bg-gray-100 border border-gray-200;
+}
 </style>
diff --git a/packages/demo-vue3/src/views/component/DropdownDemo1.vue b/packages/demo-vue3/src/views/component/DropdownDemo1.vue
@@ -1,12 +1,14 @@
 <template>
   <h1>Dropdown demo</h1>
 
-  <div class="row">
-    <VDropdown>
+  <div class="flex gap-4">
+    <VDropdown
+      class="my-dropdown"
+    >
       <button id="dropdown-btn">Click me</button>
 
       <template #popper>
-        <div class="my-menu">
+        <div class="p-5">
           ✌️ Hello from v-tooltip + Vue 3
         </div>
 
@@ -23,11 +25,7 @@
 </template>
 
 <style lang="postcss" scoped>
-.row {
-  display: flex;
-}
-
-.my-menu {
-  padding: 20px;
+.my-dropdown {
+  @apply ring ring-green-500;
 }
 </style>
diff --git a/packages/floating-vue/src/components/Popper.vue b/packages/floating-vue/src/components/Popper.vue
@@ -0,0 +1,22 @@
+<script lang="ts">
+import Popper from './Popper'
+
+export default {
+  extends: Popper(),
+}
+</script>
+
+<template>
+  <div
+    ref="reference"
+    class="v-popper"
+    v-bind="$attrs"
+    :class="{
+      'v-popper--shown': slotData.isShown,
+    }"
+  >
+    <slot
+      v-bind="slotData"
+    />
+  </div>
+</template>
diff --git a/packages/floating-vue/src/components/PopperWrapper.vue b/packages/floating-vue/src/components/PopperWrapper.vue
@@ -13,60 +13,47 @@
       onResize,
       classes,
       result,
-      attrs,
     }"
-    v-bind="popperAttrs"
     :theme="finalTheme"
     :target-nodes="getTargetNodes"
-    :reference-node="() => $refs.reference"
+    :reference-node="() => $refs.popper.$el"
     :popper-node="() => $refs.popperContent.$el"
+    :class="[
+      themeClass,
+    ]"
   >
-    <div
-      ref="reference"
-      class="v-popper"
-      v-bind="attrs"
-      :class="[
-        $attrs.class,
-        themeClass,
-        {
-          'v-popper--shown': isShown,
-        },
-      ]"
-      :style="$attrs.style"
+    <slot
+      :shown="isShown"
+      :show="show"
+      :hide="hide"
+    />
+
+    <PopperContent
+      ref="popperContent"
+      :popper-id="popperId"
+      :theme="finalTheme"
+      :shown="isShown"
+      :mounted="shouldMountContent"
+      :skip-transition="skipTransition"
+      :auto-hide="autoHide"
+      :handle-resize="handleResize"
+      :classes="classes"
+      :result="result"
+      @hide="hide"
+      @resize="onResize"
     >
       <slot
+        name="popper"
         :shown="isShown"
-        :show="show"
         :hide="hide"
       />
-
-      <PopperContent
-        ref="popperContent"
-        :popper-id="popperId"
-        :theme="finalTheme"
-        :shown="isShown"
-        :mounted="shouldMountContent"
-        :skip-transition="skipTransition"
-        :auto-hide="autoHide"
-        :handle-resize="handleResize"
-        :classes="classes"
-        :result="result"
-        @hide="hide"
-        @resize="onResize"
-      >
-        <slot
-          name="popper"
-          :shown="isShown"
-          :hide="hide"
-        />
-      </PopperContent>
-    </div>
+    </PopperContent>
   </Popper>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import Popper from './Popper'
+import Popper from './Popper.vue'
 import PopperContent from './PopperContent.vue'
 import PopperMethods from './PopperMethods'
 import ThemeClass from './ThemeClass'
@@ -75,7 +62,7 @@ export default defineComponent({
   name: 'VPopperWrapper',
 
   components: {
-    Popper: Popper(),
+    Popper,
     PopperContent,
   },
 
@@ -84,8 +71,6 @@ export default defineComponent({
     ThemeClass('finalTheme'),
   ],
 
-  inheritAttrs: false,
-
   props: {
     theme: {
       type: String,
@@ -97,18 +82,11 @@ export default defineComponent({
     finalTheme (): string {
       return this.theme ?? this.$options.vPopperTheme
     },
-
-    popperAttrs (): Record<string, any> {
-      const result = { ...this.$attrs }
-      delete result.class
-      delete result.style
-      return result
-    },
   },
 
   methods: {
     getTargetNodes () {
-      return Array.from(this.$refs.reference.children)
+      return Array.from(this.$refs.popper.$el.children)
         .filter(node => node !== this.$refs.popperContent.$el)
     },
   },