Fixing named imports

Author: adamdehaven

README.md

@@ -69,17 +69,14 @@ Alternatively, you may initialize the component directly within a single file in
 
 **Notes on in-component initialization**:
 
-- Initializing within a component does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<VueCustomTooltip>` element.
+- Initializing within a component does not allow for customizing the [Plugin Options](#options); however, you may still utilize all [`props`](#props) on the `<VueCustomTooltip>` element, or customize styles with [CSS Variables](#css-variables).
 
 ```html
 <!-- Single file component -->
 
 <script>
-  // Import the tooltip component (no options available)
-  // Vue 2.x
+  // Import the tooltip component
   import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'
-  // Vue 3.x (notice we're importing the actual .vue file)
-  import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip/src/VueCustomTooltip.vue'
 
   // .vue file default export
   export default {

adamdehaven-vue-custom-tooltip-2.3.0.tgz

@@ -5,3 +5,4 @@ declare type InstallableComponent = typeof VueCustomTooltip & {
 };
 declare const _default: InstallableComponent;
 export default _default;
+export { VueCustomTooltip };

dist/index.d.ts

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var vue = require('vue');
 
 var defaultTooltipOptions = {
@@ -48,10 +50,12 @@ var script = vue.defineComponent({
             var htmlRoot = document && document.documentElement ? document.documentElement : null;
             if (htmlRoot) {
                 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-                htmlRoot.style.setProperty('--vue-custom-tooltip-color', tooltipOptions.color);
-                htmlRoot.style.setProperty('--vue-custom-tooltip-background', tooltipOptions.background);
-                htmlRoot.style.setProperty('--vue-custom-tooltip-border-radius', ((tooltipOptions.borderRadius) + "px"));
-                htmlRoot.style.setProperty('--vue-custom-tooltip-font-weight', tooltipOptions.fontWeight.toString());
+                htmlRoot.style.setProperty('--vue-custom-tooltip-color', tooltipOptions.color !== defaultTooltipOptions.color ? tooltipOptions.color : null);
+                htmlRoot.style.setProperty('--vue-custom-tooltip-background', tooltipOptions.background !== defaultTooltipOptions.background ? tooltipOptions.background : null);
+                htmlRoot.style.setProperty('--vue-custom-tooltip-border-radius', tooltipOptions.borderRadius !== defaultTooltipOptions.borderRadius
+                    ? ((tooltipOptions.borderRadius) + "px")
+                    : null);
+                htmlRoot.style.setProperty('--vue-custom-tooltip-font-weight', tooltipOptions.fontWeight !== defaultTooltipOptions.fontWeight ? tooltipOptions.fontWeight.toString() : null);
                 /* eslint-enable @typescript-eslint/no-non-null-assertion */
             }
         };
@@ -153,4 +157,5 @@ var index = (function () {
     return installable;
 })();
 
-module.exports = index;
+exports.VueCustomTooltip = script;
+exports.default = index;

dist/vue-custom-tooltip.cjs.js

@@ -46,10 +46,12 @@ var script = defineComponent({
             var htmlRoot = document && document.documentElement ? document.documentElement : null;
             if (htmlRoot) {
                 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-                htmlRoot.style.setProperty('--vue-custom-tooltip-color', tooltipOptions.color);
-                htmlRoot.style.setProperty('--vue-custom-tooltip-background', tooltipOptions.background);
-                htmlRoot.style.setProperty('--vue-custom-tooltip-border-radius', ((tooltipOptions.borderRadius) + "px"));
-                htmlRoot.style.setProperty('--vue-custom-tooltip-font-weight', tooltipOptions.fontWeight.toString());
+                htmlRoot.style.setProperty('--vue-custom-tooltip-color', tooltipOptions.color !== defaultTooltipOptions.color ? tooltipOptions.color : null);
+                htmlRoot.style.setProperty('--vue-custom-tooltip-background', tooltipOptions.background !== defaultTooltipOptions.background ? tooltipOptions.background : null);
+                htmlRoot.style.setProperty('--vue-custom-tooltip-border-radius', tooltipOptions.borderRadius !== defaultTooltipOptions.borderRadius
+                    ? ((tooltipOptions.borderRadius) + "px")
+                    : null);
+                htmlRoot.style.setProperty('--vue-custom-tooltip-font-weight', tooltipOptions.fontWeight !== defaultTooltipOptions.fontWeight ? tooltipOptions.fontWeight.toString() : null);
                 /* eslint-enable @typescript-eslint/no-non-null-assertion */
             }
         };
@@ -152,3 +154,4 @@ var index = (function () {
 })();
 
 export default index;
+export { script as VueCustomTooltip };

dist/vue-custom-tooltip.esm.js

@@ -1,6 +1,6 @@
 {
   "name": "@adamdehaven/vue-custom-tooltip",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "A customizable, reusable, and reactive tooltip component for Vue 3 (including TypeScript) projects.",
   "keywords": [
     "Vue",

dist/vue-custom-tooltip.min.js

@@ -14,7 +14,8 @@ function createEntry({ file, format, minify }) {
       name: 'VueCustomTooltip',
       file: file,
       format: format,
-      exports: 'default',
+      // exports: 'default',
+      exports: 'named',
       globals: {
         vue: 'Vue',
       },

package.json

@@ -8,8 +8,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+// import { VueCustomTooltip } from './index'
 
 export default defineComponent({
   name: 'App',
+  // components: {
+  //   VueCustomTooltip,
+  // },
 })
 </script>

rollup.config.js

@@ -58,3 +58,5 @@ export default ((): InstallableComponent => {
 
   return installable
 })()
+
+export { VueCustomTooltip }

src/App.vue

@@ -1,18 +1,17 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import VueCustomTooltipPlugin from './index'
-import { TooltipOptions } from './types'
+import VueCustomTooltip from './index'
 
 const app = createApp(App)
 
-const tooltipOptions: TooltipOptions = {
+const tooltipOptions = {
   // name: 'VueCustomTooltip',
   // color: '#fff',
   background: '#ff0000',
   // borderRadius: 12,
   // fontWeight: 400,
 }
 
-app.use(VueCustomTooltipPlugin, tooltipOptions)
+app.use(VueCustomTooltip, tooltipOptions)
 
 app.mount('#app')