add business category

src/components/ui/PriceInput.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="space-y-1.5">
+    <label v-if="label" :for="id" class="block text-sm font-medium text-muted">
+      {{ label }}
+    </label>
+    <input
+      :id="id"
+      :value="display"
+      type="text"
+      inputmode="numeric"
+      class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-text outline-none transition placeholder:text-muted focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
+      :class="ltr ? 'text-left' : ''"
+      :placeholder="placeholder"
+      :required="required"
+      :disabled="disabled"
+      dir="ltr"
+      @input="onInput"
+      @blur="onBlur"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { digitsOnlyPrice, formatPriceInputDisplay } from '@/utils/format';
+
+const model = defineModel<string>({ default: '' });
+
+withDefaults(
+  defineProps<{
+    label?: string;
+    id?: string;
+    ltr?: boolean;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+  }>(),
+  { ltr: true, placeholder: '۰', required: false, disabled: false },
+);
+
+const display = ref(formatPriceInputDisplay(model.value));
+
+watch(
+  () => model.value,
+  (v) => {
+    const next = formatPriceInputDisplay(v);
+    if (next !== display.value) display.value = next;
+  },
+);
+
+function onInput(e: Event) {
+  const raw = (e.target as HTMLInputElement).value;
+  const digits = digitsOnlyPrice(raw);
+  model.value = digits;
+  display.value = digits ? formatPriceInputDisplay(digits) : '';
+}
+
+function onBlur() {
+  display.value = formatPriceInputDisplay(model.value);
+}
+</script>