70%

Author: Akohjesse

package.json

@@ -1,17 +1,28 @@
 {
-  "name": "nullresponsive",
-  "version": "0.0.0",
+  "name": "null-responsive",
+  "version": "0.0.1",
+  "files": ["dist"],
+  "main": "./dist/null-responsive.umd.js",
+  "module": "./dist/null-responsive.es.js",
+  "exports":{
+    ".":{
+      "import":"./dist/null-responsive.es.js",
+      "require": "./dist/null-responsive.umd.js"
+    }
+  },
+  "types": "./dist/types/index.d.ts",
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check build-only",
+    "build": "vite build && vue-tsc --emitDeclarationOnly && mv dist/src dist/types",
     "preview": "vite preview --port 4173",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "null-responsive":"null-responsive-0.0.1.tgz"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.0",

public/favicon.ico

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import Nullresponsive from "./components/ nullResponsive.vue";
-
+// import Nullresponsive from "./components/ null-responsive.vue";
 const nullconfig = {
   inputText: "input text",
-  imgPath: "logo.svg",
   breakpoint: 1000,
   bg_color: "purple",
   text_color: "white",
@@ -12,7 +10,7 @@ const nullconfig = {
 
 <template>
   <div>
-    <Nullresponsive :config="nullconfig" />
+    <nullResponsive :config="nullconfig" />
   </div>
 </template>
 

src/App.vue

@@ -10,6 +10,7 @@
 </template>
 
 <script lang="ts" setup>
+import '/node_modules/null-responsive/dist/style.css';
 import { ref } from "@vue/reactivity";
 import { onMounted } from "@vue/runtime-core";
 const showScreen = ref(false);

src/assets/logo.svg

@@ -0,0 +1 @@
+export { default as nullResponsive } from "./ null-responsive.vue";

src/components/ nullResponsive.vue src/components/ null-responsive.vue

@@ -1,4 +1,6 @@
 import { createApp } from "vue";
 import App from "./App.vue";
+import nullResponsive from "./nullResponsive"
 
-createApp(App).mount("#app");
+
+createApp(App).use(nullResponsive).mount("#app");

src/components/index.js

@@ -0,0 +1,12 @@
+import type { App} from "vue"
+import { nullResponsive } from "./components";
+
+export default {
+    install: (app: App)=>{
+        app.component("nullResponsive", nullResponsive)
+    }
+}
+
+
+
+export { nullResponsive};

src/components/index.ts

@@ -5,4 +5,4 @@
     "composite": true,
     "types": ["node"]
   }
-}
+}

src/main.ts

@@ -1,11 +1,15 @@
 {
   "extends": "@vue/tsconfig/tsconfig.web.json",
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+
   "compilerOptions": {
+    "strictNullChecks": false,
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+     "outDir": "dist",
+     "declaration": true
   },
 
   "references": [

src/nullResponsive.ts

@@ -12,7 +12,7 @@ export default defineConfig({
   },
   build: {
     lib: {
-      entry: path.resolve(__dirname, "src/components/index.js"),
+      entry: path.resolve(__dirname, "src/components/index.ts"),
       name: "nullResponsive",
       fileName: (format) => `null-responsive.${format}.js`,
     },