add styles as a package export for easier referencing - closes #9

README.md

@@ -135,6 +135,9 @@ Customizable native Vue3 data grid with very limited dependencies. Leverages a f
 
 ## Release Notes
 
+### v3.2.0
+  - [#9](https://github.com/nruffing/data-grid-vue/issues/9): Add package export so styles can be loaded via `data-grid-vue/style`.
+
 ### v3.1.0
   - Update ['dragon-drop-vue'](https://www.npmjs.com/package/dragon-drop-vue) dependency to v1.1.0
   - update development dependencies

dev-app/package.json

@@ -37,7 +37,6 @@
     "vue-tsc": "^1.8.25"
   },
   "dependencies": {
-    "debounce": "^2.0.0",
-    "dragon-drop-vue": "^1.1.0"
+    "data-grid-vue": "workspace:*"
   }
 }

dev-app/src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import { DataGridVue } from '../../lib/main'
+import { DataGridVue } from 'data-grid-vue'
+import 'data-grid-vue/style'
 
 createApp(App).use(router).use(DataGridVue).mount('#app')

package.json

@@ -44,7 +44,8 @@
       "types": "./dist/types/main.d.ts",
       "import": "./dist/data-grid-vue.js",
       "require": "./dist/data-grid-vue.umd.cjs"
-    }
+    },
+    "./style": "./dist/style.css"
   },
   "types": "./dist/types/main.d.ts",
   "main": "dist/data-grid-vue.umd.js",

vuepress/guide/README.md

@@ -37,7 +37,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import { DataGridVue } from 'data-grid-vue'
 
-import '../node_modules/data-grid-vue/dist/style.css'
+import 'data-grid-vue/style'
 
 createApp(App).use(DataGridVue).mount('#app')
 ```
@@ -46,7 +46,7 @@ createApp(App).use(DataGridVue).mount('#app')
 
 Make sure to import the data grid core styles prior to any application-specific styles to be able to override the values of the predefined <a href="/theme" target="_blank">CSS Variables</a>.
 
-The styles and variables can be imported from `../node_modules/data-grid-vue/dist/style.css`.
+The styles and variables can be imported from `data-grid-vue/style`.
 
 ### Plugin Options
 
@@ -55,7 +55,7 @@ The `DataGridVue` plugin has additional options that can be specified. These opt
 ```ts
 import { DataGridVue, type DataGridVueOptions } from 'data-grid-vue'
 
-import '../node_modules/data-grid-vue/dist/style.css'
+import 'data-grid-vue/style'
 
 const dataGridVueOptions = {
   dataGridComponentName: 'custom-data-grid',

vuepress/shared/changelog.md

@@ -2,6 +2,9 @@
 
 ## Release Notes
 
+### v3.2.0
+  - [#9](https://github.com/nruffing/data-grid-vue/issues/9): Add package export so styles can be loaded via `data-grid-vue/style`.
+
 ### v3.1.0
   - Update ['dragon-drop-vue'](https://www.npmjs.com/package/dragon-drop-vue) dependency to v1.1.0
   - update development dependencies

vuepress/theme/README.md

@@ -43,7 +43,7 @@ Here is a high level overview of the HTML that gets rendered.
 Including the data grid's core styles will come with the CSS variables below.  The below also includes their default values.  The data grid can be themed by adjusting the values of these CSS variables.  The core stylesheet can be loaded using an import statement similar to the following in your `main.ts` file. It is recommended to import it prior to any application stylesheets to be able to properly override the variable values.
 
 ```ts
-import '../node_modules/data-grid-vue/dist/style.css'
+import 'data-grid-vue/style'
 ```
 
 ::: tip Note