feat: ✨ auto height, remove options api

Author: BeiyanYunyi

README.md

@@ -36,7 +36,6 @@ In `uno.config.ts`:
 
 ```ts
 import { defineConfig, presetUno, presetIcons } from 'unocss';
-import presetSBox from '@project-trans/suggestion-box/dist/preset';
 
 export default defineConfig({
   // ...
@@ -55,8 +54,6 @@ export default defineConfig({
     presetUno(),
     // SuggestionBox uses presetIcons
     presetIcons(),
-    // SuggestionBox's own rules
-    presetSBox(),
   ],
 });
 ```

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@project-trans/suggestion-box",
   "type": "module",
-  "version": "0.3.1",
-  "packageManager": "pnpm@9.11.0+sha512.0a203ffaed5a3f63242cd064c8fb5892366c103e328079318f78062f24ea8c9d50bc6a47aa3567cabefd824d170e78fa2745ed1f16b132e16436146b7688f19b",
+  "version": "0.4.0",
+  "packageManager": "pnpm@9.12.0+sha512.4abf725084d7bcbafbd728bfc7bee61f2f791f977fd87542b3579dcb23504d170d46337945e4c66485cd12d588a0c0e570ed9c477e7ccdd8507cf05f3f92eaca",
   "description": "Suggestion box for Project Trans",
   "author": {
     "name": "Project Trans Team Members",
@@ -19,12 +19,6 @@
       "import": "./dist/index.js",
       "require": "./dist/index.umd.cjs"
     },
-    "./preset": {
-      "types": "./dist/preset.d.ts",
-      "import": "./dist/preset.js",
-      "require": "./dist/preset.umd.cjs",
-      "default": "./dist/preset.umd.cjs"
-    },
     "./aio": {
       "types": "./dist/aio.d.ts",
       "import": "./dist/aio.js",
@@ -37,12 +31,6 @@
       "require": "./dist/aio.umd.cjs",
       "default": "./dist/aio.umd.cjs"
     },
-    "./dist/preset": {
-      "types": "./dist/preset.d.ts",
-      "import": "./dist/preset.js",
-      "require": "./dist/preset.umd.cjs",
-      "default": "./dist/preset.umd.cjs"
-    },
     "./dist/style.css": "./dist/style.css"
   },
   "main": "dist/index.umd.cjs",

script/build.ts

@@ -15,12 +15,11 @@ import { build } from 'vite'
 // })
 // await writeFile('./dist/style.css', code)
 await build({
-  plugins: [vue(), UnoCSS()],
+  plugins: [vue({ features: { optionsAPI: false } }), UnoCSS()],
   build: {
     lib: {
       entry: [
         resolve(import.meta.dirname, '../src/index.ts'),
-        resolve(import.meta.dirname, '../src/preset.ts'),
       ],
       name: 'SuggestionBox',
       fileName: (format, entryName) => `${entryName}.${format === 'es' ? 'js' : 'umd.cjs'}`,
@@ -31,7 +30,7 @@ await build({
 
 await build({
   plugins: [
-    vue({ features: { customElement: true } }),
+    vue({ features: { customElement: true, optionsAPI: false } }),
     UnoCSS({
       mode: 'shadow-dom',
       presets: [presetUno({ dark: 'class' })],

script/serve.ts

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { type FunctionDirective, ref, watch } from 'vue'
 
 const props = withDefaults(
   defineProps<{
@@ -33,6 +33,10 @@ const imageUrls = ref<string[]>([])
 const sending = ref(false)
 const sentSuccess = ref(false)
 const sentFailed = ref(false)
+const vAutoHeight: FunctionDirective<HTMLTextAreaElement> = (el) => {
+  el.style.height = 'auto'
+  el.style.height = `${el.scrollHeight}px`
+}
 
 watch(
   images,
@@ -161,6 +165,7 @@ async function handleSubmit() {
     <label class="inline-grid items-stretch sb-auto-height">
       <textarea
         v-model="textContent"
+        v-auto-height
         class="min-h-0 resize-none rounded-t-md border-none p-2 text-inherit outline-none"
         bg="$vp-c-bg"
         :placeholder="textContentPlaceholder"

src/App.vue

@@ -1,5 +1,4 @@
 import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss'
-import unoPreset from './src/preset'
 
 export default defineConfig({
   presets: [
@@ -11,6 +10,5 @@ export default defineConfig({
       prefix: 'i-',
       warn: true,
     }),
-    unoPreset(),
   ],
 })

src/preset.ts

@@ -7,7 +7,7 @@ import { defineConfig } from 'vite'
 export default defineConfig({
   plugins: process.env.NODE_ENV === 'development'
     ? [
-        vue({ features: { customElement: true } }),
+        vue({ features: { customElement: true, optionsAPI: false } }),
         UnoCSS({
           mode: 'shadow-dom',
         }),