refactor: default components are now simple ts files

Akryum · Jan 8, 2024 · 6439fce · 6439fce
1 parent 0699bf8
commit 6439fce
Show file tree

Hide file tree

Showing 8 changed files with 216 additions and 222 deletions.
diff --git a/packages/floating-vue/src/components/Dropdown.ts b/packages/floating-vue/src/components/Dropdown.ts
@@ -0,0 +1,9 @@
+import PopperWrapper from './PopperWrapper.vue'
+
+const Component = ({
+  ...PopperWrapper,
+  name: 'VDropdown',
+  vPopperTheme: 'dropdown',
+}) as unknown as typeof PopperWrapper
+
+export default Component
diff --git a/packages/floating-vue/src/components/Dropdown.vue b/packages/floating-vue/src/components/Dropdown.vue
diff --git a/...ages/floating-vue/src/components/Menu.vue → packages/floating-vue/src/components/Menu.ts b/...ages/floating-vue/src/components/Menu.vue → packages/floating-vue/src/components/Menu.ts
@@ -1,4 +1,3 @@
-<script lang="ts">
 import PopperWrapper from './PopperWrapper.vue'
 
 const Component = ({
@@ -8,4 +7,3 @@ const Component = ({
 }) as unknown as typeof PopperWrapper
 
 export default Component
-</script>
diff --git a/packages/floating-vue/src/components/PopperContent.vue b/packages/floating-vue/src/components/PopperContent.vue
@@ -111,166 +111,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style>
-.v-popper__popper {
-  z-index: 10000;
-  top: 0;
-  left: 0;
-  outline: none;
-}
-
-.v-popper__popper.v-popper__popper--hidden {
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity .15s, visibility .15s;
-  pointer-events: none;
-}
-
-.v-popper__popper.v-popper__popper--shown {
-  visibility: visible;
-  opacity: 1;
-  transition: opacity .15s;
-}
-
-.v-popper__popper.v-popper__popper--skip-transition,
-.v-popper__popper.v-popper__popper--skip-transition > .v-popper__wrapper {
-  transition: none !important;
-}
-
-.v-popper__backdrop {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: none;
-}
-
-.v-popper__inner {
-  position: relative;
-  box-sizing: border-box;
-  overflow-y: auto;
-}
-
-.v-popper__inner > div {
-  position: relative;
-  z-index: 1;
-  max-width: inherit;
-  max-height: inherit;
-}
-
-.v-popper__arrow-container {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-}
-
-.v-popper__popper--arrow-overflow .v-popper__arrow-container,
-.v-popper__popper--no-positioning .v-popper__arrow-container {
-  display: none;
-}
-
-.v-popper__arrow-inner,
-.v-popper__arrow-outer {
-  border-style: solid;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-}
-
-.v-popper__arrow-inner {
-  visibility: hidden;
-  border-width: 7px;
-}
-
-.v-popper__arrow-outer {
-  border-width: 6px;
-}
-
-.v-popper__popper[data-popper-placement^="top"] .v-popper__arrow-inner,
-.v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-inner {
-  left: -2px;
-}
-
-.v-popper__popper[data-popper-placement^="top"] .v-popper__arrow-outer,
-.v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-outer {
-  left: -1px;
-}
-
-.v-popper__popper[data-popper-placement^="top"] .v-popper__arrow-inner,
-.v-popper__popper[data-popper-placement^="top"] .v-popper__arrow-outer {
-  border-bottom-width: 0;
-  border-left-color: transparent !important;
-  border-right-color: transparent !important;
-  border-bottom-color: transparent !important;
-}
-
-.v-popper__popper[data-popper-placement^="top"] .v-popper__arrow-inner {
-  top: -2px;
-}
-
-.v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-container {
-  top: 0;
-}
-
-.v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-inner,
-.v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-outer {
-  border-top-width: 0;
-  border-left-color: transparent !important;
-  border-right-color: transparent !important;
-  border-top-color: transparent !important;
-}
-
-.v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-inner {
-  top: -4px;
-}
-
-.v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-outer {
-  top: -6px;
-}
-
-.v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-inner,
-.v-popper__popper[data-popper-placement^="right"] .v-popper__arrow-inner {
-  top: -2px;
-}
-
-.v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-outer,
-.v-popper__popper[data-popper-placement^="right"] .v-popper__arrow-outer {
-  top: -1px;
-}
-
-.v-popper__popper[data-popper-placement^="right"] .v-popper__arrow-inner,
-.v-popper__popper[data-popper-placement^="right"] .v-popper__arrow-outer {
-  border-left-width: 0;
-  border-left-color: transparent !important;
-  border-top-color: transparent !important;
-  border-bottom-color: transparent !important;
-}
-
-.v-popper__popper[data-popper-placement^="right"] .v-popper__arrow-inner {
-  left: -4px;
-}
-
-.v-popper__popper[data-popper-placement^="right"] .v-popper__arrow-outer {
-  left: -6px;
-}
-
-.v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-container {
-  right: -10px;
-}
-
-.v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-inner,
-.v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-outer {
-  border-right-width: 0;
-  border-top-color: transparent !important;
-  border-right-color: transparent !important;
-  border-bottom-color: transparent !important;
-}
-
-.v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-inner {
-  left: -2px;
-}
-</style>
diff --git a/packages/floating-vue/src/components/Tooltip.ts b/packages/floating-vue/src/components/Tooltip.ts
@@ -0,0 +1,9 @@
+import PopperWrapper from './PopperWrapper.vue'
+
+const Component = ({
+  ...PopperWrapper,
+  name: 'VTooltip',
+  vPopperTheme: 'tooltip',
+}) as unknown as typeof PopperWrapper
+
+export default Component
diff --git a/packages/floating-vue/src/components/Tooltip.vue b/packages/floating-vue/src/components/Tooltip.vue
diff --git a/packages/floating-vue/src/index.ts b/packages/floating-vue/src/index.ts
@@ -1,15 +1,16 @@
 import { assign } from './util/assign-deep'
 import { config, FloatingVueConfig } from './config'
 import 'vue-resize/dist/vue-resize.css'
+import './style.css'
 // Components
-import PrivateDropdown from './components/Dropdown.vue'
-import PrivateMenu from './components/Menu.vue'
+import PrivateDropdown from './components/Dropdown'
+import PrivateMenu from './components/Menu'
 import PrivatePopper from './components/Popper'
 import PrivatePopperContent from './components/PopperContent.vue'
 import PrivatePopperMethods from './components/PopperMethods'
 import PrivatePopperWrapper from './components/PopperWrapper.vue'
 import PrivateThemeClass from './components/ThemeClass'
-import PrivateTooltip from './components/Tooltip.vue'
+import PrivateTooltip from './components/Tooltip'
 import PrivateTooltipDirective from './components/TooltipDirective.vue'
 // Directives
 import PrivateVTooltip from './directives/v-tooltip'