Chengdong Zhang
0d0e10b97b
- Add tailwindcss v4 + @tailwindcss/vite to mall, shop-admin, admin - Add @vmall/shared/theme.css tokens with html[data-accent] presets - Add @vmall/ui kit (VBtn/VBadge/VField/VInput/VCard/VPanel/VTable/VPage, VAccentSwatch, useAccent) as a Nuxt module - Convert all three apps to kit + utilities; delete ui.css/mall.css and every <style scoped>; consoles get accent presets, mall locked to red - Fix VCard boolean prop default (padding) and PDP/store stale useAsyncData keys on param navigation - Archive adopt-tailwind-design-system; new frontend-ui capability spec
35 lines
1.2 KiB
Vue
35 lines
1.2 KiB
Vue
<script setup lang="ts">
|
||
const props = withDefaults(defineProps<{ modelValue: number; max?: number }>(), { max: 999 });
|
||
const emit = defineEmits<{ "update:modelValue": [v: number] }>();
|
||
|
||
function set(v: number): void {
|
||
const next = Math.min(props.max, Math.max(1, Math.floor(v) || 1));
|
||
emit("update:modelValue", next);
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="inline-flex overflow-hidden rounded-md border border-border">
|
||
<button
|
||
type="button"
|
||
class="h-8 w-[30px] border-0 bg-bg text-sm transition-colors hover:text-primary disabled:cursor-not-allowed disabled:opacity-40"
|
||
:disabled="modelValue <= 1"
|
||
@click="set(modelValue - 1)"
|
||
>−</button>
|
||
<input
|
||
:value="modelValue"
|
||
type="number"
|
||
:min="1"
|
||
:max="max"
|
||
class="h-8 w-12 [appearance:textfield] border-x border-border bg-surface text-center text-[13px] text-text outline-none focus:border-primary"
|
||
@change="set(Number(($event.target as HTMLInputElement).value))"
|
||
/>
|
||
<button
|
||
type="button"
|
||
class="h-8 w-[30px] border-0 bg-bg text-sm transition-colors hover:text-primary disabled:cursor-not-allowed disabled:opacity-40"
|
||
:disabled="modelValue >= max"
|
||
@click="set(modelValue + 1)"
|
||
>+</button>
|
||
</div>
|
||
</template>
|