@citizenplane/pimp 18.1.0 → 18.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.1.0",
+  "version": "18.1.1",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpDate.vue

@@ -4,33 +4,36 @@
       {{ capitalizedLabel }}
     </base-input-label>
     <div class="cpDate__inputs">
-      <input
-        v-model="day"
-        v-maska
-        :autocomplete="autocompleteFields.day"
-        class="cpDate__day"
-        data-maska="##"
-        :disabled="disabled"
-        inputmode="numeric"
-        maxlength="2"
-        :placeholder="dayInputPlaceholder"
-        :required="required"
-      />
-      <div class="cpDate__divider" />
-      <div class="cpDate__month" :class="selectDynamicClass">
-        <select
-          :id="cpDateId"
-          v-model="month"
-          :autocomplete="autocompleteFields.month"
+      <template v-for="(field, index) in orderedDateFields" :key="field">
+        <input
+          v-if="isDayField(field)"
+          v-model="day"
+          v-maska
+          :autocomplete="autocompleteFields.day"
+          class="cpDate__day"
+          data-maska="##"
           :disabled="disabled"
+          inputmode="numeric"
+          maxlength="2"
+          :placeholder="dayInputPlaceholder"
           :required="required"
-        >
-          <option value>{{ monthInputPlaceholder }}</option>
-          <option v-for="(monthItem, index) in months" :key="index" :value="monthItem.value">
-            {{ monthItem.label }}
-          </option>
-        </select>
-      </div>
+        />
+        <div v-else class="cpDate__month" :class="selectDynamicClass">
+          <select
+            :id="cpDateId"
+            v-model="month"
+            :autocomplete="autocompleteFields.month"
+            :disabled="disabled"
+            :required="required"
+          >
+            <option value>{{ monthInputPlaceholder }}</option>
+            <option v-for="(monthItem, monthIndex) in months" :key="monthIndex" :value="monthItem.value">
+              {{ monthItem.label }}
+            </option>
+          </select>
+        </div>
+        <div v-if="shouldShowDivider(index)" class="cpDate__divider" />
+      </template>
       <div class="cpDate__divider" />
       <input
         v-model="year"
@@ -71,6 +74,7 @@ interface InputsOptions {
   monthInputPlaceholder?: string
   yearInputPlaceholder?: string
 }
+type DateField = 'day' | 'month'
 
 interface Props {
   autocompleteBirthday?: boolean
@@ -265,6 +269,24 @@ const monthInputPlaceholder = computed(() => {
   return props.inputsOptions?.monthInputPlaceholder || 'Months'
 })
 
+const isDayFirst = computed(() => {
+  const parts = new Intl.DateTimeFormat(props.locale, {
+    day: '2-digit',
+    month: '2-digit',
+  }).formatToParts(new Date(2024, 0, 31))
+
+  const dayIndex = parts.findIndex((part) => part.type === 'day')
+  const monthIndex = parts.findIndex((part) => part.type === 'month')
+
+  if (dayIndex === -1 || monthIndex === -1) return false
+
+  return dayIndex < monthIndex
+})
+
+const orderedDateFields = computed<DateField[]>(() => {
+  return isDayFirst.value ? ['day', 'month'] : ['month', 'day']
+})
+
 const yearInputPlaceholder = computed(() => {
   return props.inputsOptions?.yearInputPlaceholder || 'YYYY'
 })
@@ -274,6 +296,10 @@ const handleUpdate = (): void => {
   emit('onValidation', isDateValid.value)
 }
 
+const isDayField = (field: DateField): boolean => field === 'day'
+
+const shouldShowDivider = (index: number): boolean => index < orderedDateFields.value.length - 1
+
 watch(day, handleUpdate)
 watch(month, handleUpdate)
 watch(year, handleUpdate)
@@ -296,6 +322,7 @@ watch(year, handleUpdate)
   }
 
   input[type='number'] {
+    appearance: textfield;
     -moz-appearance: textfield;
   }
 

package/src/stories/CpDate.stories.ts

@@ -140,6 +140,33 @@ export const States: Story = {
   }),
 }
 
+/**
+ * Compares input ordering by locale (day/month in French, month/day in US English).
+ */
+export const LocaleOrdering: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpDate },
+    setup() {
+      const frenchDate = ref('')
+      const usDate = ref('')
+      return { frenchDate, usDate, docRowColumnStyle, dateStackStyle, docLabelStyle }
+    },
+    template: `
+      <div :style="docRowColumnStyle">
+        <div :style="dateStackStyle">
+          <span :style="docLabelStyle">fr-FR (day / month / year)</span>
+          <CpDate v-model="frenchDate" label="Date" locale="fr-FR" />
+        </div>
+        <div :style="dateStackStyle">
+          <span :style="docLabelStyle">en-US (month / day / year)</span>
+          <CpDate v-model="usDate" label="Date" locale="en-US" />
+        </div>
+      </div>
+    `,
+  }),
+}
+
 /**
  * Combines a date input with a text input on the same line.
  */