@karyl-chan/ui 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@karyl-chan/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Shared Vue UI primitives, composables, and design tokens used by karyl-chan's bot frontend and plugin webuis.",
   "type": "module",
   "license": "MIT",
@@ -22,13 +22,12 @@
     "./use-drawer.css": "./src/composables/use-drawer.css",
     "./use-popover.css": "./src/composables/use-popover.css"
   },
-  "files": ["src"],
+  "files": [
+    "src"
+  ],
   "engines": {
     "node": ">=22"
   },
-  "scripts": {
-    "typecheck": "vue-tsc --noEmit"
-  },
   "peerDependencies": {
     "@iconify/vue": ">=5",
     "@popperjs/core": ">=2",
@@ -38,7 +37,9 @@
     "vue-router": ">=4"
   },
   "peerDependenciesMeta": {
-    "vue-router": { "optional": true }
+    "vue-router": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@iconify/vue": "^5.0.0",
@@ -54,5 +55,8 @@
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
     "vue-tsc": "^2.2.0"
+  },
+  "scripts": {
+    "typecheck": "vue-tsc --noEmit"
   }
-}
+}

package/src/components/AppButton.vue

@@ -70,8 +70,8 @@ withDefaults(defineProps<{
             />
         </slot>
 
-        <!-- 主要 label -->
-        <span class="app-btn-label"><slot /></span>
+        <!-- 主要 label — 略過時不渲染，避免 icon-only 按鈕產生多餘 gap -->
+        <span v-if="$slots.default" class="app-btn-label"><slot /></span>
 
         <!-- 右側 slot -->
         <slot name="trailing" />

package/src/components/AppTextArea.vue

@@ -19,6 +19,8 @@ const props = withDefaults(defineProps<{
     maxlength?: number;
     fullWidth?: boolean;
     name?: string;
+    autofocus?: boolean;
+    required?: boolean;
 }>(), {
     label: '',
     hint: '',
@@ -28,7 +30,9 @@ const props = withDefaults(defineProps<{
     readonly: false,
     rows: 3,
     fullWidth: false,
-    name: ''
+    name: '',
+    autofocus: false,
+    required: false
 });
 
 const emit = defineEmits<{
@@ -64,6 +68,8 @@ const rootClass = computed(() => ({
             :rows="rows"
             :maxlength="maxlength"
             :name="name || undefined"
+            :autofocus="autofocus"
+            :required="required"
             @input="onInput"
             @blur="emit('blur', $event)"
             @focus="emit('focus', $event)"

package/src/components/AppTextField.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts" generic="V extends string | number | null">
+<script setup lang="ts" generic="V extends string | number | null | undefined">
 import { computed, useId } from 'vue';
 
 /**
@@ -17,6 +17,8 @@ import { computed, useId } from 'vue';
 
 const props = withDefaults(defineProps<{
     modelValue: V;
+    /** v-model modifier bag (e.g. `.number`, `.trim`); Vue populates this. */
+    modelModifiers?: { number?: boolean; trim?: boolean; lazy?: boolean };
     label?: string;
     hint?: string;
     error?: string;
@@ -70,7 +72,16 @@ const fieldId = useId();
 
 function onInput(e: Event): void {
     const target = e.target as HTMLInputElement;
-    emit('update:modelValue', target.value as V);
+    let value: string | number = target.value;
+    if (props.modelModifiers?.trim) value = (value as string).trim();
+    if (props.modelModifiers?.number) {
+        const n = Number(value);
+        // Mirror Vue's `.number` semantics: only coerce when parseable;
+        // otherwise pass through the raw string so the input stays
+        // editable during typing (e.g. "1.").
+        if (!Number.isNaN(n) && value !== '') value = n;
+    }
+    emit('update:modelValue', value as V);
 }
 
 const rootClass = computed(() => ({