@sbc-connect/nuxt-base 0.1.29 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @sbc-connect/nuxt-base
 
+## 0.2.0
+
+### Minor Changes
+
+- [#101](https://github.com/bcgov/connect-nuxt/pull/101) [`033f6c6`](https://github.com/bcgov/connect-nuxt/commit/033f6c624fbf953f1d7cf491c876cc9b58619b22) Thanks [@cameron-eyds](https://github.com/cameron-eyds)! - Implements dynamic slots/props while supporting explicit props
+
+### Patch Changes
+
+- [#97](https://github.com/bcgov/connect-nuxt/pull/97) [`09323e1`](https://github.com/bcgov/connect-nuxt/commit/09323e1fcaff9a2738528c8161288c1d4bcd0677) Thanks [@deetz99](https://github.com/deetz99)! - feat: ConnectInputDate component
+
 ## 0.1.29
 
 ### Patch Changes

package/app/app.config.ts

@@ -278,6 +278,9 @@ export default defineAppConfig({
       upload: 'i-mdi-upload'
     },
     input: {
+      slots: {
+        trailingIcon: 'text-neutral group-has-[div>input[aria-invalid=true]]:text-error group-focus-within:text-primary'
+      },
       variants: {
         size: {
           bcGov: {

package/app/components/Connect/Input.vue

@@ -1,21 +1,42 @@
 <script setup lang="ts">
-const model = defineModel<string | number | bigint | null | undefined>({ required: true })
+import type { InputProps } from '@nuxt/ui'
 
-defineProps<{
+const props = defineProps<{
   id: string
   label: string
   mask?: string
+  disabled?: boolean
+  autoFocus?: boolean
 }>()
+
+const model = defineModel<string | number | bigint | null | undefined>({ required: true })
+
+// Inject props
+const injectedProps = inject<InputProps>(
+  `UInput-props${props.id ? `-${props.id}` : ''}`,
+  {} as InputProps
+)
+
+// Inject slots
+const injectedSlots = inject<{ [key: string]: VNode }>(
+  `UInput-slots${props.id ? `-${props.id}` : ''}`,
+  {}
+)
 </script>
 
 <template>
   <UInput
-    :id
+    v-bind="{
+      id,
+      disabled,
+      autoFocus,
+      ...injectedProps, // injected props will default when provided
+    }"
     v-model.trim="model"
     v-maska="mask"
+    class="w-full grow"
     :data-testid="id"
     placeholder="&nbsp;"
-    class="w-full grow"
   >
     <label
       :for="id"
@@ -23,5 +44,16 @@ defineProps<{
     >
       {{ label }}
     </label>
+
+    <!-- Render injected slots -->
+    <template
+      v-for="(comp, name) in injectedSlots"
+      #[name]
+      :key="name"
+    >
+      <component
+        :is="comp"
+      />
+    </template>
   </UInput>
 </template>

package/app/components/Connect/InputDate.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/
+// https://whatsock.com/Templates/Datepickers/Basic,%20Auto%20Open/index.htm
+import type { ConnectInput, UCalendar } from '#components'
+import { CalendarDate } from '@internationalized/date'
+import { DateTime } from 'luxon'
+
+// FUTURE: update props as needed (min/max/disabled days)
+defineProps<{
+  label: string
+  id: string
+}>()
+
+const emit = defineEmits<{
+  blur: []
+}>()
+
+const externalModel = defineModel<string | null | undefined>({ required: true })
+
+const localModel = computed({
+  get() {
+    if (externalModel.value) {
+      const dt = DateTime.fromISO(externalModel.value, { zone: 'America/Vancouver' })
+      if (dt.isValid) {
+        return new CalendarDate(dt.year, dt.month, dt.day)
+      }
+    }
+    return undefined
+  },
+  set(v) {
+    if (v) {
+      externalModel.value = DateTime.fromObject({
+        year: v.year,
+        month: v.month,
+        day: v.day
+      }).toISODate()
+    } else {
+      externalModel.value = null
+    }
+  }
+})
+
+const open = ref(false)
+const calendarRef = useTemplateRef('calendar-ref')
+const inputRef = useTemplateRef<InstanceType<typeof ConnectInput>>('input-ref')
+
+function focusCalendar() {
+  const button = (calendarRef.value as any).$el.querySelector('button')
+  if (button) {
+    (button as HTMLButtonElement).focus()
+  }
+}
+
+function focusInput() {
+  const input = (inputRef.value as any).$el.querySelector('input')
+  if (input) {
+    (input as HTMLInputElement).focus()
+  }
+  open.value = false
+  emit('blur')
+}
+</script>
+
+<template>
+  <UPopover
+    v-model:open="open"
+    :content="{
+      onOpenAutoFocus: (e) => e.preventDefault(),
+      onEscapeKeyDown: () => {
+        focusInput()
+      },
+      side: 'bottom',
+      align: 'start',
+    }"
+    @update:open="(v) => {
+      if (!v) {
+        $emit('blur')
+      }
+    }"
+  >
+    <template #default>
+      <div class="w-full group">
+        <ConnectInput
+          :id
+          ref="input-ref"
+          v-model="externalModel"
+          :label
+          mask="####-##-##"
+          trailing-icon="i-mdi-calendar"
+          @focus="open = true"
+          @click.stop="open = true"
+          @keydown.down.prevent="focusCalendar"
+        />
+      </div>
+    </template>
+
+    <template #content>
+      <UCalendar
+        ref="calendar-ref"
+        v-model="localModel"
+        class="p-2"
+        @update:model-value="focusInput"
+      />
+    </template>
+  </UPopover>
+</template>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.1.29",
+  "version": "0.2.0",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
@@ -14,11 +14,13 @@
     "dompurify": "^3.3.0",
     "es-toolkit": "^1.41.0",
     "launchdarkly-vue-client-sdk": "^2.4.1",
+    "luxon": "^3.7.2",
     "maska": "^3.2.0",
     "zod": "^4.1.12"
   },
   "devDependencies": {
     "@axe-core/playwright": "4.11.0",
+    "@types/luxon": "^3.7.1",
     "@vitest/coverage-v8": "3.2.4",
     "dotenv": "17.2.3",
     "nuxt": "4.1.3",