rewrite main component to script setup with native typescript support…

…, update build to auto-generate ts declarations

dev/demo-styles.css

@@ -11,9 +11,9 @@ div.color-input__box-inner--active {
 div.color-input__box--disabled {}
 
 div.color-input__popup {}
-div.color-input__popup .slider {}
-div.color-input__popup .slider-pointer {}
-div.color-input__popup .saturation-pointer {}
+div.color-input__slider {}
+div.color-input__slider-pointer {}
+div.color-input__saturation-pointer {}
 
 div.color-input__popup--enter-from,
 div.color-input__popup--leave-to {}

dev/serve.vue

@@ -43,7 +43,6 @@
 			</div>
 		</div>
 		<color-input 
-			:appendTo="appendToActive ? appendTo : null"
 			v-model="color"
 			:format="format + (type ? ' ' + type : '')"
 			:position="position"
@@ -123,8 +122,6 @@
 				format: '',
 				type: '',
 				formatOptions: ['rgb', 'hex', 'hex8', 'name', 'hsl', 'hsv'],
-				appendToActive: null,
-				appendTo: '.box-parent',
 			}
 		},
 		computed: {
@@ -269,12 +266,6 @@
 			});
 		},
 		watch: {
-			appendToActive() {
-				this.$refs.colorInput.pickEnd()
-				setTimeout(() => {
-					this.$refs.colorInput.getParent()
-				}, 100)
-			},
 			color() {
 				let hsl = this.$refs.colorInput.color.clone().setAlpha(1).toHslString();
 				let [h,s,l] = hsl.match(/\d+/g);

package.json

@@ -35,20 +35,25 @@
     "build": "vite build",
     "build:demo": "vite build --config vite.config-demo.js",
     "publish:demo": "gh-pages -d demo",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "prepublish:demo": "npm run build:demo"
   },
   "dependencies": {
     "tinycolor2": "^1.4.2"
   },
   "devDependencies": {
+    "@types/tinycolor2": "^1.4.6",
     "@vitejs/plugin-vue": "^5.1.1",
     "autoprefixer": "^10.3.7",
     "gh-pages": "^3.2.3",
     "postcss": "^8.2.10",
     "sass": "^1.42.1",
+    "typescript": "^5.5.4",
     "vite": "^5.3.5",
+    "vite-plugin-dts": "3.9.1",
     "vite-plugin-lib-inject-css": "^2.1.1",
-    "vue": "^3.4.26"
+    "vue": "^3.4.26",
+    "vue-tsc": "^2.0.29"
   },
   "peerDependencies": {
     "vue": "^3.0.5"