@sbc-connect/nuxt-base 0.1.29 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @sbc-connect/nuxt-base
 
+## 0.3.0
+
+### Minor Changes
+
+- [#102](https://github.com/bcgov/connect-nuxt/pull/102) [`d714785`](https://github.com/bcgov/connect-nuxt/commit/d71478573f1fe11be34d5d588d68fb75eb5fd159) Thanks [@deetz99](https://github.com/deetz99)! - - ConnectTransitionFade component
+  - configure UContainer app config with default spacing and padding
+  - configure UAlert subtle/warning app config with correct bg styling
+
+### Patch Changes
+
+- [#104](https://github.com/bcgov/connect-nuxt/pull/104) [`5f1b383`](https://github.com/bcgov/connect-nuxt/commit/5f1b3839ed993654a7f20fe161047ba38ab86274) Thanks [@deetz99](https://github.com/deetz99)! - - change overflow-hidden to overflow-clip in main layout component, allowing position sticky to work correctly
+  - cancel and close i18n translations
+  - Type aliases for Dates
+
+## 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

@@ -19,7 +19,7 @@ export default defineAppConfig({
           color: 'warning',
           variant: 'subtle',
           class: {
-            root: 'text-highlighted bg-yellow-400/25 ring-2 ring-yellow-400',
+            root: 'py-4 px-6 relative bg-white text-highlighted ring-2 ring-brand-inverted before:content-[""] before:absolute before:inset-0 before:bg-brand-inverted/10 before:z-10',
             icon: 'text-warning',
             title: 'font-bold text-nuetral-highlighted',
             description: 'text-nuetral-highlighted'
@@ -166,6 +166,9 @@ export default defineAppConfig({
         }
       ]
     },
+    container: {
+      base: 'px-0 sm:px-0 lg:px-0 py-6 space-y-6 sm:py-10 sm:space-y-10'
+    },
     dropdownMenu: {
       slots: {
         content: 'min-w-32 max-h-[75dvh] shadow-lg rounded-sm',
@@ -278,6 +281,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/app/components/Connect/Layout/Index.vue

@@ -12,7 +12,7 @@
     <slot name="bottomHeaders" />
     <main class="app-body px-2 sm:px-4">
       <slot name="body">
-        <div class="app-inner-container grow flex flex-col overflow-hidden">
+        <div class="app-inner-container grow flex flex-col overflow-clip">
           <slot />
         </div>
       </slot>

package/app/components/Connect/Transition/Fade.vue

@@ -0,0 +1,31 @@
+<template>
+  <Transition name="fade">
+    <slot />
+  </Transition>
+</template>
+
+<style>
+.fade-enter-active {
+  transition: opacity 0.3s ease-in-out;
+}
+.fade-leave-active {
+  transition: opacity 0s ease-in-out;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion) {
+  .fade-enter-active {
+    transition: opacity 0s ease-in-out;
+  }
+  .fade-leave-active {
+    transition: opacity 0s ease-in-out;
+  }
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+}
+</style>

package/app/types/dates.ts

@@ -0,0 +1,17 @@
+/**
+ * ISO date string (YYYY-MM-DD), assumed to be in Pacific timezone.
+ * @example "2021-12-31"
+ */
+export type IsoDatePacific = string
+
+/**
+  * API date-time string (YYYY-MM-DDTHH:MM:SS[.MMMMMM]+00.00), assumed to be in UTC.
+  * @example "2022-05-09T16:26:14.839032+00:00"
+  */
+export type ApiDateTimeUtc = string
+
+/**
+  * Formatted date-time string with explicit GMT timezone (ie, UTC).
+  * @example "Tue, 19 Apr 2022 16:40:18 GMT"
+  */
+export type FormattedDateTimeGmt = string

package/i18n/locales/en-CA.ts

@@ -21,6 +21,8 @@ export default {
       appVersion: 'App Version',
       bcApp: 'A BC Online Application',
       bcGovLogo: 'Government of British Columbia Logo',
+      cancel: 'Cancel',
+      close: 'Close',
       contactInformation: 'Contact Information',
       copyright: 'Copyright',
       disclaimer: 'Disclaimer',

package/modules/base-assets/runtime/assets/connect-base-tw.css

@@ -38,6 +38,7 @@
   --ui-shade-highlighted: var(--color-blue-50);
   --ui-shade-warning: #FAE9E9;
   --ui-radius: 0.1667rem;
+  --ui-container: var(--container-bcGovLg);
 }
 
 /* FUTURE: add dark themed colours (currently set to be the same) */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.1.29",
+  "version": "0.3.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",