sprintify-ui 0.10.50 → 0.10.51

package/dist/types/components/BaseCkeditor.vue.d.ts

@@ -10,16 +10,20 @@ type __VLS_Props = {
     required?: boolean;
     name?: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    getEditorData(): string;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     blur: (...args: any[]) => void;
     focus: (...args: any[]) => void;
     input: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
+    ready: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onBlur?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
     onInput?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onReady?: ((...args: any[]) => any) | undefined;
 }>, {
     size: Size;
     required: boolean;

package/dist/types/composables/field.d.ts

@@ -18,5 +18,7 @@ export declare function useField(config: Config): {
     emitUpdate: (value: any) => void;
     enableForm: () => void;
     disableForm: () => void;
+    addBeforeSubmitListener: (listener: () => void) => void;
+    removeBeforeSubmitListener: () => void;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.10.50",
+  "version": "0.10.51",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",

package/src/components/BaseCkeditor.vue

@@ -9,6 +9,7 @@
     @focus="emit('focus', $event)"
     @blur="emit('blur', $event)"
     @input="emit('input', $event)"
+    @ready="onReady"
   />
 </template>
 
@@ -41,7 +42,16 @@ const props = withDefaults(defineProps<{
   hasError: false,
 });
 
-const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'input']);
+const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'input', 'ready']);
+
+type Editor = InlineEditor | BalloonEditor | ClassicEditor;
+
+let ckeditorInstance = null as Editor | null;
+
+function onReady(editor: Editor | null) {
+  ckeditorInstance = editor;
+  emit('ready', editor);
+}
 
 const editorInternal = computed(() => {
   switch (props.editor) {
@@ -134,4 +144,10 @@ const config = computed(() => {
   };
 });
 
+defineExpose({
+  getEditorData() {
+    return ckeditorInstance?.getData() || '';
+  },
+});
+
 </script>

package/src/components/BaseForm.vue

@@ -192,13 +192,20 @@ function submit() {
   props.beforeSubmit(query);
 }
 
-function query() {
+async function query() {
   if (loading.value) {
     return;
   }
 
   loading.value = true;
 
+  Object.values(beforeSubmitListeners).forEach((listener) => {
+    listener();
+  });
+
+  // The listener might have changed the data, so we need to wait for the next tick
+  await nextTick();
+
   let method = props.method as Method;
   let data = props.data;
   let headers = { 'Content-Type': 'application/json' };
@@ -329,6 +336,16 @@ const disabled = computed((): boolean => {
   return disablingFields.size > 0;
 });
 
+const beforeSubmitListeners = {} as Record<string, () => void>;
+
+function addBeforeSubmitListener(uuid: string, listener: () => void) {
+  beforeSubmitListeners[uuid] = listener;
+}
+
+function removeBeforeSubmitListener(uuid: string) {
+  delete beforeSubmitListeners[uuid];
+}
+
 provide('form:autosave', computed(() => props.autosave));
 provide('form:submit', submit);
 provide('form:submitDebounced', submitDebounced);
@@ -341,6 +358,9 @@ provide('form:disabled', readonly(disabled));
 provide('form:enable', enableForm);
 provide('form:disable', disabledForm);
 
+provide('form:addBeforeSubmitListener', addBeforeSubmitListener);
+provide('form:removeBeforeSubmitListener', removeBeforeSubmitListener);
+
 defineExpose({
   submit,
   errors,

package/src/components/BaseRichText.vue

@@ -11,6 +11,7 @@
     ]"
   >
     <BaseCkeditor
+      ref="baseCkeditorRef"
       :model-value="modelValue"
       :editor="editor"
       :size="sizeInternal"
@@ -59,7 +60,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'input']);
 
-const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate, sizeInternal } =
+const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate, sizeInternal, addBeforeSubmitListener } =
   useField({
     name: computed(() => props.name),
     required: computed(() => props.required),
@@ -68,4 +69,19 @@ const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate, sizeIntern
     emit: emit,
   });
 
+const baseCkeditorRef = ref<InstanceType<typeof BaseCkeditor> | null>(null);
+
+// This make sure that the latest editor data is emitted when the form is submitted
+// If the user types really fast, then press submit really fast, the editor data might not be up to date
+// This is a workaround to make sure that the latest data is emitted
+addBeforeSubmitListener(() => {
+  if (!baseCkeditorRef.value) {
+    return;
+  }
+
+  const latestData = baseCkeditorRef.value.getEditorData();
+
+  emitUpdate(latestData);
+});
+
 </script>

package/src/composables/field.ts

@@ -79,6 +79,18 @@ export function useField(config: Config) {
     enableForm(uuid);
   });
 
+  const addBeforeSubmitListener = inject('form:addBeforeSubmitListener', () => {
+    return;
+  }) as (uuid: string, listener: () => void) => void;
+
+  const removeBeforeSubmitListener = inject('form:removeBeforeSubmitListener', () => {
+    return;
+  }) as (uuid: string) => void;
+
+  onBeforeUnmount(() => {
+    removeBeforeSubmitListener(uuid);
+  });
+
   const requiredInternal = computed((): boolean => {
     if (required.value !== undefined) {
       return required.value;
@@ -134,5 +146,11 @@ export function useField(config: Config) {
     emitUpdate,
     enableForm: () => enableForm(uuid),
     disableForm: () => disableForm(uuid),
+    addBeforeSubmitListener: (listener: () => void) => {
+      addBeforeSubmitListener(uuid, listener);
+    },
+    removeBeforeSubmitListener: () => {
+      removeBeforeSubmitListener(uuid);
+    }
   };
 }