@vc-shell/framework 1.0.189 → 1.0.191

package/shared/modules/dynamic/components/fields/InputField.ts

@@ -25,6 +25,7 @@ export default {
             type: props.element.variant,
             currentLanguage: props.currentLocale,
             clearable: props.element.clearable || false,
+            maxlength: props.element.maxlength,
           },
           unrefNested(props.baseProps),
           {

package/shared/modules/dynamic/components/fields/TextareaField.ts

@@ -16,6 +16,7 @@ export default {
           {
             currentLanguage: props.currentLocale,
             clearable: props.element.clearable || false,
+            maxlength: props.element.maxlength,
           },
           unrefNested(props.baseProps),
           {

package/shared/modules/dynamic/components/fields/storybook/Card.stories.ts

@@ -1,7 +1,6 @@
 import { template, templateWithVisibilityToggle } from "./common/templates";
 import { Meta, StoryFn } from "@storybook/vue3";
-import Card from "../Card";
-import { computed, reactive, ref } from "vue";
+import { reactive, ref } from "vue";
 import page from "./pages/DynamicRender";
 import * as _ from "lodash-es";
 import { SchemaBaseArgTypes } from "./common/args";

package/shared/modules/dynamic/components/fields/storybook/Checkbox.stories.ts

@@ -1,5 +1,4 @@
 import { Meta, StoryFn } from "@storybook/vue3";
-import Checkbox from "../Checkbox";
 import { computed, reactive, ref } from "vue";
 import page from "./pages/DynamicRender";
 import { template, templateWithVisibilityToggle } from "./common/templates";

package/shared/modules/dynamic/components/fields/storybook/ContentField.stories.ts

@@ -1,6 +1,5 @@
 import { Meta, StoryFn } from "@storybook/vue3";
-import ContentField from "../ContentField";
-import { computed, reactive, ref } from "vue";
+import { reactive, ref } from "vue";
 import page from "./pages/DynamicRender";
 import { template, templateWithVisibilityToggle } from "./common/templates";
 import * as _ from "lodash-es";

package/shared/modules/dynamic/components/fields/storybook/EditorField.stories.ts

@@ -1,9 +1,7 @@
 import { Meta, StoryFn } from "@storybook/vue3";
-import EditorField from "../EditorField";
 import { template, templateWithVisibilityToggle } from "./common/templates";
 import page from "./pages/DynamicRender";
-import { nextTick, reactive, ref } from "vue";
-import * as _ from "lodash-es";
+import { reactive, ref } from "vue";
 import { SchemaBaseArgTypes } from "./common/args";
 import { EditorSchema } from "../../..";
 
@@ -44,6 +42,15 @@ export default {
         },
       },
     },
+    maxlength: {
+      description: "Maximum length of the editor content.",
+      control: "number",
+      table: {
+        type: {
+          summary: "number",
+        },
+      },
+    },
   },
   parameters: {
     docs: {

package/shared/modules/dynamic/components/fields/storybook/Fieldset.stories.ts

@@ -73,13 +73,13 @@ export default {
       description: `Array of numbers that define the aspect ratio of each column.
       Example - If you have two columns - set to [1, 1] to make all columns equal width.
       Uses CSS flex-grow property to set the width of each column.`,
-      control: "text",
+      control: "object",
       table: {
         type: {
-          summary: "string",
+          summary: "array",
         },
         defaultValue: {
-          summary: "1:1",
+          summary: "[1, 1]",
         },
       },
     },

package/shared/modules/dynamic/components/fields/storybook/InputField.stories.ts

@@ -87,6 +87,18 @@ export default {
         },
       },
     },
+    maxlength: {
+      description: "Maximum number of characters that can be entered.",
+      control: "number",
+      table: {
+        type: {
+          summary: "number",
+        },
+        defaultValue: {
+          summary: 1024,
+        },
+      },
+    },
   },
   parameters: {
     docs: {

package/shared/modules/dynamic/components/fields/storybook/TextareaField.stories.ts

@@ -38,6 +38,18 @@ export default {
         },
       },
     },
+    maxlength: {
+      description: "Maximum number of characters that can be entered.",
+      control: "number",
+      table: {
+        type: {
+          summary: "number",
+        },
+        defaultValue: {
+          summary: "1024",
+        },
+      },
+    },
   },
   parameters: {
     docs: {

package/shared/modules/dynamic/composables/useFilterBuilder/index.ts

@@ -15,6 +15,7 @@ import {
   readonly,
   toValue,
   Ref,
+  watchPostEffect,
 } from "vue";
 import * as _ from "lodash-es";
 import { Checkbox, InputField } from "../../components/factories";
@@ -71,7 +72,9 @@ export default <Query>(args: {
     return filterKeys.length === 0 || filterKeys.every((key) => !filterObj[key]);
   });
 
-  onMounted(() => createFilterControls());
+  watchPostEffect(() => {
+    createFilterControls();
+  });
 
   function isItemSelected(value: string, field: string) {
     const item = filter.value[field];
@@ -195,7 +198,7 @@ export default <Query>(args: {
       () => [
         h(VcRow, () =>
           Object.values(controls.value).map(({ title, fields }) =>
-            h(VcCol, { class: "tw-p-2" }, () => [
+            h(VcCol, { class: "tw-p-2 !tw-flex-auto" }, () => [
               h(
                 "div",
                 { class: "tw-mb-4 tw-text-[#a1c0d4] tw-font-bold tw-text-[17px]" },
@@ -214,7 +217,7 @@ export default <Query>(args: {
           ),
         ),
         h(VcRow, () =>
-          h(VcCol, { class: "tw-p-2" }, () =>
+          h(VcCol, { class: "tw-p-2 !tw-flex-auto" }, () =>
             h("div", { class: "tw-flex tw-justify-end" }, [
               h(
                 VcButton,

package/shared/modules/dynamic/factories/types/index.ts

@@ -80,6 +80,8 @@ export interface ListBaseBladeScope<Item = Record<string, any>, Query = Record<s
   breadcrumbs?: ComputedRef<Breadcrumbs[]>;
 }
 
+export type TOpenBladeArgs = Omit<Parameters<ReturnType<typeof useBladeNavigation>["openBlade"]>["0"], "blade">;
+
 export interface DetailsBaseBladeScope extends BaseBladeScope {
   disabled?: ComputedRef<boolean | undefined>;
   multilanguage?: {

package/shared/modules/dynamic/types/index.ts

@@ -387,6 +387,11 @@ export interface TextareaSchema extends SchemaBase {
    * @type {boolean}
    */
   clearable?: boolean;
+  /**
+   * Maximum number of characters that can be entered.
+   * @type {number}
+   */
+  maxlength?: number;
 }
 
 /**
@@ -429,6 +434,11 @@ export interface InputSchema extends SchemaBase {
    * @type {ControlSchema}
    */
   prependInner?: ControlSchema;
+  /**
+   * Maximum number of characters that can be entered.
+   * @type {number}
+   */
+  maxlength?: number;
 }
 
 /**
@@ -628,6 +638,11 @@ export interface EditorSchema extends SchemaBase {
    * @type {string}
    */
   assetsFolder: string;
+  /**
+   * Maximum length of the editor content.
+   * @type {number}
+   */
+  maxlength?: number;
 }
 
 /**

package/shared/pages/LoginPage/components/login/Login.vue

@@ -197,7 +197,7 @@ const props = defineProps<Props>();
 
 const router = useRouter();
 
-const { setFieldError, resetForm, setErrors, validateField } = useForm({ validateOnMount: false });
+const { validateField } = useForm({ validateOnMount: false });
 const { uiSettings, loading: customizationLoading } = useSettings();
 const { t } = useI18n({ useScope: "global" });
 let useLogin;

package/ui/components/molecules/vc-editor/vc-editor.vue

@@ -29,7 +29,7 @@
       :id="id"
       :key="`${id}-${disabled}`"
       ref="quillRef"
-      :content="content"
+      :content="modelValue"
       class="quill-editor tw-border tw-border-solid tw-border-[color:var(--editor-border-color)] tw-rounded-b-[var(--editor-border-radius)] tw-h-[200px]"
       :class="{ 'tw-bg-[#fafafa] tw-text-[#424242] tw-cursor-default': disabled }"
       theme="snow"
@@ -39,7 +39,7 @@
       :read-only="disabled"
       :placeholder="placeholder"
       :options="options"
-      @update:content="onInput"
+      @ready="initializeQuill"
     />
     <slot
       v-if="errorMessage"
@@ -53,15 +53,15 @@
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { QuillEditor, Quill } from "@vueup/vue-quill";
+import { QuillEditor } from "@vueup/vue-quill";
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
-import { ref, unref, watch, onMounted, onUpdated, getCurrentInstance } from "vue";
+import { ref, unref, onMounted, onUpdated, getCurrentInstance, Ref } from "vue";
 import ImageUploader from "quill-image-uploader";
 import { VcLabel, VcHint } from "../..";
 
 export interface Props {
   placeholder?: string;
-  modelValue?: string | number | Date;
+  modelValue?: string;
   required?: boolean;
   disabled?: boolean;
   label?: string;
@@ -70,6 +70,7 @@ export interface Props {
   assetsFolder: string;
   multilanguage?: boolean;
   currentLanguage?: string;
+  maxlength?: number;
 }
 
 export interface Emits {
@@ -86,8 +87,9 @@ defineSlots<{
   error?: (props: any) => any;
 }>();
 
-const content = ref();
-const quillRef = ref<Quill | null>(null);
+// const content = ref();
+const quillRef = ref(null) as Ref<typeof QuillEditor | null>;
+const quill = ref();
 
 const toolbar = {
   container: [
@@ -139,39 +141,32 @@ onUpdated(() => {
   removeBlankClass();
 });
 
-watch(
-  () => props.modelValue,
-  (value) => {
-    if (value === "") {
-      quillRef.value?.setText(value);
-      return;
-    }
-    content.value = unref(value);
-  },
-  { immediate: true },
-);
+function initializeQuill() {
+  quill.value = quillRef.value?.getQuill();
+  if (props.modelValue) {
+    quill.value.root.innerHTML = unref(props.modelValue);
+  }
+
+  quill.value.on("text-change", onTextChange);
+}
 
 function removeBlankClass() {
   // fixes quill editor placeholder visibility issue when content is not empty
   const editor = document.getElementById(id)?.querySelector(".ql-editor.ql-blank");
-  if (editor && content.value) {
+  if (editor && props.modelValue) {
     editor.classList.remove("ql-blank");
   }
 }
 
-function onInput(value: string) {
-  if (isQuillEmpty(value)) {
-    emit("update:modelValue", null);
-  } else {
-    emit("update:modelValue", value);
+function onTextChange() {
+  const len = quill.value.getLength();
+  if (props.maxlength !== undefined && len > props.maxlength) {
+    quill.value.deleteText(props.maxlength, len);
   }
-}
 
-function isQuillEmpty(value: string) {
-  if (value.replace(/<(.|\n)*?>/g, "").trim().length === 0) {
-    return true;
+  if (quill.value.getText().trim() !== props.modelValue?.trim()) {
+    emit("update:modelValue", quill.value.root.innerHTML);
   }
-  return false;
 }
 </script>
 

package/ui/components/molecules/vc-input/vc-input.stories.ts

@@ -9,6 +9,20 @@ export default {
     label: "This is an input",
     placeholder: "Placeholder",
   },
+  argTypes: {
+    maxlength: {
+      description: "Maximum number of characters that can be entered.",
+      control: "number",
+      table: {
+        type: {
+          summary: "number",
+        },
+        defaultValue: {
+          summary: 1024,
+        },
+      },
+    },
+  },
 } satisfies Meta<typeof VcInput>;
 
 export const Template: StoryFn<typeof VcInput> = (args) => ({

package/ui/components/molecules/vc-textarea/vc-textarea.stories.ts

@@ -48,6 +48,6 @@ Tooltip.args = {
 export const MaximumCharacters = Primary.bind({});
 MaximumCharacters.args = {
   label: "Textarea Label",
-  maxchars: "10",
+  maxlength: "10",
   modelValue: "1234567890",
 };

package/ui/components/molecules/vc-textarea/vc-textarea.vue

@@ -30,7 +30,7 @@
         :placeholder="placeholder"
         :value="modelValue"
         :disabled="disabled"
-        :maxlength="maxchars"
+        :maxlength="maxlength"
         @input="onInput"
       ></textarea>
     </div>
@@ -47,7 +47,6 @@
 </template>
 
 <script lang="ts" setup>
-import { watch } from "vue";
 import { VcHint, VcLabel } from "./../../";
 
 export interface Props {
@@ -58,7 +57,7 @@ export interface Props {
   label?: string;
   tooltip?: string;
   name?: string;
-  maxchars?: string;
+  maxlength?: string;
   errorMessage?: string;
   multilanguage?: boolean;
   currentLanguage?: string;
@@ -69,13 +68,12 @@ export interface Emits {
 }
 
 defineSlots<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  error: (props: any) => any;
+  error: void;
 }>();
 
 withDefaults(defineProps<Props>(), {
   name: "Field",
-  maxchars: "1024",
+  maxlength: "1024",
 });
 
 const emit = defineEmits<Emits>();

package/ui/components/organisms/vc-blade/_internal/vc-blade-header/vc-blade-header.vue

@@ -14,7 +14,7 @@
 
     <div class="tw-overflow-hidden tw-grow tw-basis-0">
       <div
-        class="tw-text-[color:var(--blade-header-title-color)] tw-text-lg tw-truncate"
+        class="tw-text-[color:var(--blade-header-title-color)] tw-text-lg/[23px] tw-truncate"
         :class="{
           '!tw-text-[length:var(--blade-header-title-font-size)] tw-font-medium': !subtitle,
         }"