@vc-shell/framework 1.0.189 → 1.0.190

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/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,
         }"

package/ui/components/organisms/vc-table/_internal/vc-table-cell/vc-table-cell.vue

@@ -1,124 +1,150 @@
 <template>
-  <!-- Money cell -->
-  <template v-if="cell.type === 'money'">
-    <div
-      v-if="typeof Number(value) === 'number' && Number(value) > 0"
-      class="tw-truncate"
-    >
-      <span class="tw-truncate">{{ Math.trunc(Number(value)) }}</span
-      ><span class="tw-text-[#a5a5a5] tw-text-xs tw-truncate"
-        >.{{ `${(Number(value) * 100) % 100}`.padEnd(2, "0").slice(0, 2) }}</span
-      >
-    </div>
-    <template v-else>
-      <div class="tw-truncate">N/A</div>
-    </template>
-  </template>
-
-  <!-- Date ago cell -->
-  <span
-    v-else-if="cell.type === 'date-ago'"
-    class="tw-text-[#a5a5a5]"
-    :title="(value instanceof Date && value.toLocaleString(locale)) || ''"
-  >
-    <div
-      v-if="value"
-      class="tw-truncate"
-    >
-      {{ moment(value).fromNow() }}
-    </div>
-    <div
-      v-else
-      class="tw-truncate"
-    >
-      N/A
-    </div>
-  </span>
-
-  <!-- Date exact cell -->
-  <div
-    v-else-if="cell.type === 'date' || cell.type === 'time' || cell.type === 'date-time'"
-    class="tw-text-[#a5a5a5] tw-truncate"
-  >
-    <template v-if="value">
+  <div>
+    <!-- Money cell -->
+    <template v-if="cell.type === 'money'">
       <div
-        v-if="cell.format"
+        v-if="typeof Number(value) === 'number' && Number(value) > 0"
         class="tw-truncate"
+        :class="cell.class"
       >
-        {{ moment(value).locale(locale).format(cell.format) }}
+        <span class="tw-truncate">{{ Math.trunc(Number(value)) }}</span
+        ><span class="tw-text-[#a5a5a5] tw-text-xs tw-truncate"
+          >.{{ `${(Number(value) * 100) % 100}`.padEnd(2, "0").slice(0, 2) }}</span
+        >
       </div>
       <template v-else>
         <div
-          v-if="cell.type === 'date'"
           class="tw-truncate"
+          :class="cell.class"
         >
-          {{ value instanceof Date && value.toLocaleDateString(locale) }}
+          N/A
         </div>
+      </template>
+    </template>
+
+    <!-- Date ago cell -->
+    <span
+      v-else-if="cell.type === 'date-ago'"
+      class="tw-text-[#a5a5a5]"
+      :class="cell.class"
+      :title="(value instanceof Date && value.toLocaleString(locale)) || ''"
+    >
+      <div
+        v-if="value"
+        class="tw-truncate"
+      >
+        {{ moment(value).fromNow() }}
+      </div>
+      <div
+        v-else
+        class="tw-truncate"
+      >
+        N/A
+      </div>
+    </span>
+
+    <!-- Date exact cell -->
+    <div
+      v-else-if="cell.type === 'date' || cell.type === 'time' || cell.type === 'date-time'"
+      class="tw-text-[#a5a5a5] tw-truncate"
+      :class="cell.class"
+    >
+      <template v-if="value">
         <div
-          v-if="cell.type === 'time'"
+          v-if="cell.format"
           class="tw-truncate"
         >
-          {{ value instanceof Date && value.toLocaleTimeString(locale) }}
+          {{ moment(value).locale(locale).format(cell.format) }}
         </div>
-        <p
-          v-if="cell.type === 'date-time'"
-          class="tw-truncate"
-        >
-          {{ value instanceof Date && value.toLocaleString(locale) }}
-        </p>
+        <template v-else>
+          <div
+            v-if="cell.type === 'date'"
+            class="tw-truncate"
+          >
+            {{ value instanceof Date && value.toLocaleDateString(locale) }}
+          </div>
+          <div
+            v-if="cell.type === 'time'"
+            class="tw-truncate"
+          >
+            {{ value instanceof Date && value.toLocaleTimeString(locale) }}
+          </div>
+          <p
+            v-if="cell.type === 'date-time'"
+            class="tw-truncate"
+          >
+            {{ value instanceof Date && value.toLocaleString(locale) }}
+          </p>
+        </template>
       </template>
+      <div
+        v-else
+        class="tw-truncate"
+      >
+        N/A
+      </div>
+    </div>
+
+    <!-- Image cell -->
+    <template v-else-if="cell.type === 'image'">
+      <VcImage
+        :bordered="true"
+        size="s"
+        aspect="1x1"
+        :src="value as string"
+        background="contain"
+      />
+    </template>
+
+    <!-- Status cell -->
+    <template v-else-if="cell.type === 'status'">
+      <VcStatus>{{ value }}</VcStatus>
     </template>
+
+    <!-- Status icon cell -->
     <div
-      v-else
-      class="tw-truncate"
+      v-else-if="cell.type === 'status-icon'"
+      class="tw-flex tw-justify-center"
+      :class="cell.class"
     >
-      N/A
+      <VcStatusIcon :status="value as boolean"></VcStatusIcon>
     </div>
-  </div>
 
-  <!-- Image cell -->
-  <template v-else-if="cell.type === 'image'">
-    <VcImage
-      :bordered="true"
-      size="s"
-      aspect="1x1"
-      :src="value as string"
-      background="contain"
-    />
-  </template>
-
-  <!-- Status cell -->
-  <template v-else-if="cell.type === 'status'">
-    <VcStatus>{{ value }}</VcStatus>
-  </template>
-
-  <!-- Status icon cell -->
-  <div
-    v-else-if="cell.type === 'status-icon'"
-    class="tw-flex tw-justify-center"
-  >
-    <VcStatusIcon :status="value as boolean"></VcStatusIcon>
-  </div>
+    <!-- Number cell -->
+    <div
+      v-else-if="cell.type === 'number'"
+      class="tw-text-right tw-truncate"
+      :class="cell.class"
+    >
+      {{ Number(value).toFixed(0) }}
+    </div>
 
-  <!-- Number cell -->
-  <div
-    v-else-if="cell.type === 'number'"
-    class="tw-text-right tw-truncate"
-  >
-    {{ Number(value).toFixed(0) }}
-  </div>
+    <!-- Link cell -->
+    <template v-else-if="cell.type === 'link'">
+      <VcLink
+        class="tw-truncate"
+        :class="cell.class"
+        >{{ value }}</VcLink
+      >
+    </template>
+
+    <!-- HTML cell -->
+    <template v-else-if="cell.type === 'html'">
+      <div
+        class="tw-p-1"
+        :class="cell.class"
+        v-html="truncatedHtml"
+      />
+    </template>
 
-  <!-- Link cell -->
-  <template v-else-if="cell.type === 'link'">
-    <VcLink class="tw-truncate">{{ value }}</VcLink>
-  </template>
-
-  <!-- Default cell -->
-  <div
-    v-else
-    class="tw-truncate"
-  >
-    {{ value }}
+    <!-- Default cell -->
+    <div
+      v-else
+      class="tw-truncate"
+      :class="cell.class"
+    >
+      {{ value }}
+    </div>
   </div>
 </template>
 
@@ -126,24 +152,30 @@
 import { computed } from "vue";
 import moment from "moment";
 import { ITableColumns } from "./../../../../../../core/types";
+import * as _ from "lodash-es";
+import htmlTruncate from "truncate-html";
+import * as DOMPurify from "dompurify";
 
 export interface Props {
   cell: ITableColumns;
   item: Record<string, unknown>;
+  width?: number;
 }
 
 const props = defineProps<Props>();
 
 const locale = window.navigator.language;
 
-const value = computed((): unknown => {
-  return (props.cell.field || props.cell.id).split(".").reduce((p: { [x: string]: unknown }, c: string) => {
-    if (p && Array.isArray(p) && p.length) {
-      const val = p && p[0][c];
-      return val !== undefined ? val : null;
-    }
-    const val = p && p[c];
-    return val !== undefined ? val : null;
-  }, props.item);
+const value = computed(() => _.get(props.item, props.cell.field || props.cell.id));
+
+const sanitizedHtml = computed(() => {
+  if (props.cell.type === "html") {
+    return DOMPurify.default.sanitize(value.value as string, { USE_PROFILES: { html: true } });
+  }
+  return "";
 });
+
+const truncatedHtml = computed(() =>
+  htmlTruncate(sanitizedHtml.value, +(typeof props.width !== "undefined" ? Math.floor(props.width / 5) : 30)),
+);
 </script>