Ati/cl 270 add email- number - price components to gooey (#45)

app/pages/components/Email.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+/* eslint-disable no-useless-escape */
+import { ref } from "vue"
+import { Email } from "@/components/email"
+import { CodeBlock, ComponentHeading } from "@app/components"
+
+const value = ref<string>()
+
+const code = `<script setup lang="ts">
+import { ref } from 'vue'
+import { Email } from '@codinglabsau/gooey'
+
+const value = ref<string>()
+<\/script>
+
+<template>
+  <Email v-model="value" placeholder="you@example.com" />
+</template>`
+</script>
+
+<template>
+  <div>
+    <ComponentHeading>Basic Usage</ComponentHeading>
+
+    <p class="mt-2 text-sm text-muted-foreground">
+      <code>Email</code>
+
+      wraps <code>Input</code>
+
+      with <code>type="email"</code>
+
+      and sensible defaults (<code>inputmode</code>
+
+      , <code>autocomplete</code>
+
+      , <code>spellcheck</code>). Browsers will surface their built-in email validation when the
+      field is submitted as part of a form.
+    </p>
+
+    <div class="mt-4 max-w-xs space-y-2">
+      <Email v-model="value" placeholder="you@example.com" data-cy="basic" />
+
+      <p v-if="value" class="text-sm text-muted-foreground" data-cy="model-value">
+        Value: {{ value }}
+      </p>
+    </div>
+
+    <CodeBlock class="mt-4" lang="vue" :code="code" />
+
+    <ComponentHeading class="mt-8">Disabled</ComponentHeading>
+
+    <div class="mt-4 max-w-xs">
+      <Email disabled placeholder="Disabled" />
+    </div>
+  </div>
+</template>

app/pages/components/Number.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+/* eslint-disable no-useless-escape */
+import { ref } from "vue"
+import { Number } from "@/components/number"
+import { CodeBlock, ComponentHeading } from "@app/components"
+
+const basic = ref<number>()
+const integer = ref<number>()
+
+const code = `<script setup lang="ts">
+import { ref } from 'vue'
+import { Number } from '@codinglabsau/gooey'
+
+const quantity = ref<number>()
+<\/script>
+
+<template>
+  <Number v-model="quantity" :min="0" :max="100" :step="1" />
+</template>`
+</script>
+
+<template>
+  <div>
+    <ComponentHeading>Basic Usage</ComponentHeading>
+
+    <p class="mt-2 text-sm text-muted-foreground">
+      <code>Number</code>
+
+      wraps <code>NumberField</code>
+      with the legacy
+      <code>@codinglabsau/ui</code>
+
+      Number API. v-model is a <code>number</code>.
+    </p>
+
+    <div class="mt-4 max-w-xs space-y-2">
+      <Number v-model="basic" :min="0" :max="100" :step="1" data-cy="basic" />
+
+      <p v-if="basic !== undefined" class="text-sm text-muted-foreground" data-cy="model-value">
+        Value: {{ basic }}
+      </p>
+    </div>
+
+    <CodeBlock class="mt-4" lang="vue" :code="code" />
+
+    <ComponentHeading class="mt-8">Integer Mode</ComponentHeading>
+
+    <p class="mt-2 text-sm text-muted-foreground">
+      Pass <code>integer</code> to restrict the value to whole numbers (decimal input is rounded on
+      blur).
+    </p>
+
+    <div class="mt-4 max-w-xs space-y-2">
+      <Number v-model="integer" integer :min="0" data-cy="integer" />
+
+      <p v-if="integer !== undefined" class="text-sm text-muted-foreground" data-cy="integer-value">
+        Value: {{ integer }}
+      </p>
+    </div>
+
+    <ComponentHeading class="mt-8">Disabled</ComponentHeading>
+
+    <div class="mt-4 max-w-xs">
+      <Number disabled :default-value="10" />
+    </div>
+  </div>
+</template>

app/pages/components/Price.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+/* eslint-disable no-useless-escape */
+import { ref } from "vue"
+import { Price } from "@/components/price"
+import { CodeBlock, ComponentHeading } from "@app/components"
+
+const basic = ref<number>()
+const usd = ref<number>(19.99)
+
+const code = `<script setup lang="ts">
+import { ref } from 'vue'
+import { Price } from '@codinglabsau/gooey'
+
+// v-model is a number in dollars (e.g. 19.99) — no cents conversion needed.
+const amount = ref<number>()
+<\/script>
+
+<template>
+  <Price v-model="amount" currency="AUD" />
+</template>`
+</script>
+
+<template>
+  <div>
+    <ComponentHeading>Basic Usage</ComponentHeading>
+
+    <p class="mt-2 text-sm text-muted-foreground">
+      <code>Price</code>
+
+      is a currency-aware numeric input built on <code>NumberField</code>
+      . The v-model is a
+      <code>number</code>
+
+      in <strong>dollars</strong>
+
+      (e.g. <code>19.99</code>) — consumers never deal with cents. The displayed value is formatted
+      via
+      <code>Intl.NumberFormat</code>
+
+      using the configured <code>currency</code>
+      and
+      <code>locale</code>.
+    </p>
+
+    <div class="mt-4 max-w-xs space-y-2">
+      <Price v-model="basic" placeholder="0.00" data-cy="basic" />
+
+      <p v-if="basic !== undefined" class="text-sm text-muted-foreground" data-cy="model-value">
+        v-model: {{ basic }}
+      </p>
+    </div>
+
+    <CodeBlock class="mt-4" lang="vue" :code="code" />
+
+    <ComponentHeading class="mt-8">Custom Currency &amp; Locale</ComponentHeading>
+
+    <p class="mt-2 text-sm text-muted-foreground">
+      Pass <code>currency</code>
+
+      (ISO 4217) and <code>locale</code> to render different formats.
+    </p>
+
+    <div class="mt-4 max-w-xs space-y-2">
+      <Price v-model="usd" currency="USD" locale="en-US" data-cy="usd" />
+
+      <p class="text-sm text-muted-foreground">v-model: {{ usd }}</p>
+    </div>
+
+    <ComponentHeading class="mt-8">Disabled</ComponentHeading>
+
+    <div class="mt-4 max-w-xs">
+      <Price disabled :default-value="42" />
+    </div>
+  </div>
+</template>

app/pages/index.ts

@@ -33,6 +33,7 @@ export { default as DatePicker } from "./components/DatePicker.vue"
 export { default as Dialog } from "./components/Dialog.vue"
 export { default as Drawer } from "./components/Drawer.vue"
 export { default as DropdownMenu } from "./components/DropdownMenu.vue"
+export { default as Email } from "./components/Email.vue"
 export { default as Empty } from "./components/Empty.vue"
 export { default as Field } from "./components/Field.vue"
 export { default as Flasher } from "./components/Flasher.vue"
@@ -47,10 +48,12 @@ export { default as Kbd } from "./components/Kbd.vue"
 export { default as Label } from "./components/Label.vue"
 export { default as LaravelPaginator } from "./components/LaravelPaginator.vue"
 export { default as Menubar } from "./components/Menubar.vue"
+export { default as Number } from "./components/Number.vue"
 export { default as NumberField } from "./components/NumberField.vue"
 export { default as Pagination } from "./components/Pagination.vue"
 export { default as PinInput } from "./components/PinInput.vue"
 export { default as Popover } from "./components/Popover.vue"
+export { default as Price } from "./components/Price.vue"
 export { default as Progress } from "./components/Progress.vue"
 export { default as RadioGroup } from "./components/RadioGroup.vue"
 export { default as RangeCalendar } from "./components/RangeCalendar.vue"

app/router/index.ts

@@ -37,6 +37,7 @@ import {
   Dialog,
   Drawer,
   DropdownMenu,
+  Email,
   Empty,
   Field,
   Flasher,
@@ -51,10 +52,12 @@ import {
   Label,
   LaravelPaginator,
   Menubar,
+  Number,
   NumberField,
   Pagination,
   PinInput,
   Popover,
+  Price,
   Progress,
   RadioGroup,
   RangeCalendar,
@@ -324,6 +327,12 @@ const routes = [
         component: DatePicker,
         meta: { layout: ComponentLayout, title: "Date Picker" },
       },
+      {
+        name: "Email",
+        path: "/components/email",
+        component: Email,
+        meta: { layout: ComponentLayout, title: "Email" },
+      },
       {
         name: "Field",
         path: "/components/field",
@@ -360,6 +369,12 @@ const routes = [
         component: Label,
         meta: { layout: ComponentLayout, shadcn: true, title: "Label" },
       },
+      {
+        name: "Number",
+        path: "/components/number",
+        component: Number,
+        meta: { layout: ComponentLayout, title: "Number" },
+      },
       {
         name: "Number Field",
         path: "/components/number-field",
@@ -372,6 +387,12 @@ const routes = [
         component: PinInput,
         meta: { layout: ComponentLayout, shadcn: true, title: "Pin Input" },
       },
+      {
+        name: "Price",
+        path: "/components/price",
+        component: Price,
+        meta: { layout: ComponentLayout, title: "Price" },
+      },
       {
         name: "Radio Group",
         path: "/components/radio-group",

app/router/navigation.ts

@@ -66,14 +66,17 @@ export const navigation: NavigationGroup[] = [
       { name: "Calendar", path: "/components/calendar" },
       { name: "Checkbox", path: "/components/checkbox" },
       { name: "Date Picker", path: "/components/date-picker" },
+      { name: "Email", path: "/components/email" },
       { name: "Field", path: "/components/field" },
       { name: "Form", path: "/components/form" },
       { name: "Input", path: "/components/input" },
       { name: "Input Group", path: "/components/input-group" },
       { name: "Input OTP", path: "/components/input-otp" },
       { name: "Label", path: "/components/label" },
+      { name: "Number", path: "/components/number" },
       { name: "Number Field", path: "/components/number-field" },
       { name: "Pin Input", path: "/components/pin-input" },
+      { name: "Price", path: "/components/price" },
       { name: "Radio Group", path: "/components/radio-group" },
       { name: "Range Calendar", path: "/components/range-calendar" },
       { name: "Select", path: "/components/select" },