@karyl-chan/ui 0.1.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@karyl-chan/ui",
-  "version": "0.1.0",
+  "version": "0.3.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/AppConfirmDialog.vue

@@ -85,11 +85,9 @@ const emit = defineEmits<{
 </template>
 
 <style scoped>
-/* Inner wrapper: provides padding + flex-column layout + gap.
-   AppModal's body slots are structural-only (no padding), so each leaf
-   component is responsible for its own spacing. */
+/* Inner wrapper: flex-column layout + gap. Padding comes from
+   AppModal's body default. */
 .acd-body {
-    padding: 0.9rem 1rem 0.75rem;
     display: flex;
     flex-direction: column;
     gap: 0.75rem;

package/src/components/AppModal.vue

@@ -13,7 +13,11 @@ import { useDrawer } from '../composables/use-drawer';
  * The caller owns everything inside the slot — typical usage is to drop
  * a `<form @submit.prevent>` containing fields + an actions footer
  * directly into the default slot. AppModal supplies the chrome (backdrop,
- * panel, optional title header, close button) only.
+ * panel, optional title header, close button) and pads the body with
+ * `padding` (default `0.8rem 0.9rem`, both viewport branches). Slot
+ * content therefore needs no padding of its own; pass `padding="0"` for
+ * full-bleed content (tables, pickers, croppers) that manages its own
+ * edges.
  *
  * `closeOnBackdrop` / `closeOnEscape` default to true. Escape closure on
  * desktop is wired locally; on mobile it's handled by useDrawer's escape
@@ -27,11 +31,17 @@ const props = withDefaults(defineProps<{
     closeOnEscape?: boolean;
     /** Width of the desktop panel; mobile drawer ignores this. */
     width?: string;
+    /**
+     * CSS padding of the scrollable body around the default slot. Use
+     * `'0'` for full-bleed content that manages its own edges.
+     */
+    padding?: string;
 }>(), {
     title: '',
     closeOnBackdrop: true,
     closeOnEscape: true,
-    width: 'min(440px, 92vw)'
+    width: 'min(440px, 92vw)',
+    padding: '0.8rem 0.9rem'
 });
 
 const emit = defineEmits<{
@@ -101,7 +111,7 @@ function onBackdropClick() {
                             <Icon icon="material-symbols:close-rounded" width="18" height="18" />
                         </button>
                     </header>
-                    <div class="app-modal-body">
+                    <div class="app-modal-body" :style="{ padding }">
                         <slot />
                     </div>
                 </div>
@@ -141,7 +151,7 @@ function onBackdropClick() {
                         <Icon icon="material-symbols:close-rounded" width="18" height="18" />
                     </button>
                 </header>
-                <div class="app-modal-drawer-body">
+                <div class="app-modal-drawer-body" :style="{ padding }">
                     <slot />
                 </div>
             </div>
@@ -245,9 +255,8 @@ function onBackdropClick() {
 
 /* ── Desktop body wrapper ───────────────────────────────────────── */
 /* Structural wrapper that matches the mobile .app-modal-drawer-body.
-   Padding is intentionally 0 — callers are responsible for spacing
-   their slot content. AppConfirmDialog and similar leaf components
-   supply their own inner padding. */
+   Padding comes from the `padding` prop (inline style) on both
+   branches so slot content needs none of its own. */
 .app-modal-body {
     flex: 1;
     min-height: 0;

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(() => ({