Merge remote-tracking branch 'remotes/upstream/master'

client/components/ui/TextInput.vue

@@ -1,24 +1,6 @@
 <template>
   <div ref="wrapper" class="relative">
-    <input
-      :id="inputId"
-      :name="inputName"
-      ref="input"
-      v-model="inputValue"
-      :type="actualType"
-      :step="step"
-      :min="min"
-      :readonly="readonly"
-      :disabled="disabled"
-      :placeholder="placeholder"
-      dir="auto"
-      class="rounded bg-primary text-gray-200 focus:border-gray-300 focus:bg-bg focus:outline-none border border-gray-600 h-full w-full"
-      :class="classList"
-      @keyup="keyup"
-      @change="change"
-      @focus="focused"
-      @blur="blurred"
-    />
+    <input :id="inputId" :name="inputName" ref="input" v-model="inputValue" :type="actualType" :step="step" :min="min" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" dir="auto" class="rounded bg-primary text-gray-200 focus:bg-bg focus:outline-none border h-full w-full" :class="classList" @keyup="keyup" @change="change" @focus="focused" @blur="blurred" />
     <div v-if="clearable && inputValue" class="absolute top-0 right-0 h-full px-2 flex items-center justify-center">
       <span class="material-symbols text-gray-300 cursor-pointer" style="font-size: 1.1rem" @click.stop.prevent="clear">close</span>
     </div>
@@ -65,7 +47,8 @@ export default {
       showPassword: false,
       isHovering: false,
       isFocused: false,
-      hasCopied: false
+      hasCopied: false,
+      isInvalidDate: false
     }
   },
   computed: {
@@ -84,6 +67,10 @@ export default {
       if (this.noSpinner) _list.push('no-spinner')
       if (this.textCenter) _list.push('text-center')
       if (this.customInputClass) _list.push(this.customInputClass)
+
+      if (this.isInvalidDate) _list.push('border-error')
+      else _list.push('focus:border-gray-300 border-gray-600')
+
       return _list.join(' ')
     },
     actualType() {
@@ -118,6 +105,14 @@ export default {
     },
     keyup(e) {
       this.$emit('keyup', e)
+
+      if (this.type === 'datetime-local') {
+        if (e.target.validity?.badInput) {
+          this.isInvalidDate = true
+        } else {
+          this.isInvalidDate = false
+        }
+      }
     },
     blur() {
       if (this.$refs.input) this.$refs.input.blur()

client/components/ui/TextInputWithLabel.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="w-full">
     <slot>
-      <label :for="identifier" class="px-1 text-sm font-semibold" :class="{ 'text-gray-400': disabled }"
-        >{{ label }}<em v-if="note" class="font-normal text-xs pl-2">{{ note }}</em></label
-      >
+      <label :for="identifier" class="px-1 text-sm font-semibold" :class="{ 'text-gray-400': disabled }">
+        {{ label }}
+        <em v-if="note" class="font-normal text-xs pl-2">{{ note }}</em>
+      </label>
     </slot>
     <ui-text-input :placeholder="placeholder || label" :inputId="identifier" ref="input" v-model="inputValue" :disabled="disabled" :readonly="readonly" :type="type" class="w-full" :class="inputClass" @blur="inputBlurred" />
   </div>
@@ -57,4 +58,4 @@ export default {
   },
   mounted() {}
 }
-</script>
+</script>

client/components/ui/VueTrix.vue

@@ -249,11 +249,33 @@ export default {
         }
       }
       return target
+    },
+    enableBreakParagraphOnReturn() {
+      // Trix works with divs by default, we want paragraphs instead
+      Trix.config.blockAttributes.default.tagName = 'p'
+      // Enable break paragraph on Enter (Shift + Enter will still create a line break)
+      Trix.config.blockAttributes.default.breakOnReturn = true
+
+      // Hack to fix buggy paragraph breaks
+      // Copied from https://github.com/basecamp/trix/issues/680#issuecomment-735742942
+      Trix.Block.prototype.breaksOnReturn = function () {
+        const attr = this.getLastAttribute()
+        const config = Trix.getBlockConfig(attr ? attr : 'default')
+        return config ? config.breakOnReturn : false
+      }
+      Trix.LineBreakInsertion.prototype.shouldInsertBlockBreak = function () {
+        if (this.block.hasAttributes() && this.block.isListItem() && !this.block.isEmpty()) {
+          return this.startLocation.offset > 0
+        } else {
+          return !this.shouldBreakFormattedBlock() ? this.breaksOnReturn : false
+        }
+      }
     }
   },
   mounted() {
     /** Override editor configuration */
     this.overrideConfig(this.config)
+    this.enableBreakParagraphOnReturn()
     /** Check if editor read-only mode is required */
     this.decorateDisabledEditor(this.disabledEditor)
     this.$nextTick(() => {
@@ -283,4 +305,4 @@ export default {
 .trix_container .trix-content {
   background-color: white;
 }
-</style>
+</style>