@vc-shell/framework 1.0.188 → 1.0.190

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

@@ -73,45 +73,42 @@
                           <template v-else>{{ t("COMPONENTS.MOLECULES.VC_SELECT.CLICK_TO_SELECT") }}</template>
                         </div>
                         <template v-else-if="selectedScope && selectedScope.length && hasValue">
-                          <template v-if="$slots['selected-item']">
-                            <template
+                          <div class="tw-flex tw-flex-wrap tw-gap-1 tw-py-1">
+                            <div
                               v-for="(item, i) in selectedScope"
+                              v-bind="item"
                               :key="i"
+                              class="tw-flex tw-items-center"
                             >
-                              <slot
-                                v-bind="item"
-                                name="selected-item"
-                              ></slot>
-                            </template>
-                          </template>
-                          <template v-else>
-                            <div class="tw-flex tw-flex-wrap tw-gap-1 tw-py-1">
-                              <div
-                                v-for="(item, i) in selectedScope"
-                                v-bind="item"
-                                :key="i"
-                                class="tw-flex tw-items-center"
-                              >
-                                <template v-if="multiple">
-                                  <div
-                                    class="tw-bg-[#fbfdfe] tw-border tw-border-solid tw-border-[color:#bdd1df] tw-rounded-[2px] tw-flex tw-items-center tw-h-[28px] tw-box-border tw-px-2"
+                              <template v-if="multiple">
+                                <div
+                                  class="tw-bg-[#fbfdfe] tw-border tw-border-solid tw-border-[color:#bdd1df] tw-rounded-[2px] tw-flex tw-items-center tw-h-[28px] tw-box-border tw-px-2"
+                                >
+                                  <slot
+                                    name="selected-item"
+                                    v-bind="item"
                                   >
                                     <span>{{ getOptionLabel(item.opt) }}</span>
-                                    <VcIcon
-                                      v-if="!disabled"
-                                      class="tw-text-[#a9bfd2] tw-ml-2 tw-cursor-pointer hover:tw-text-[color:var(--select-clear-color-hover)]"
-                                      icon="fas fa-times"
-                                      size="s"
-                                      @click.stop="removeAtIndex(item.index)"
-                                    ></VcIcon>
-                                  </div>
-                                </template>
-                                <template v-else-if="!multiple">
+                                  </slot>
+                                  <VcIcon
+                                    v-if="!disabled"
+                                    class="tw-text-[#a9bfd2] tw-ml-2 tw-cursor-pointer hover:tw-text-[color:var(--select-clear-color-hover)]"
+                                    icon="fas fa-times"
+                                    size="s"
+                                    @click.stop="removeAtIndex(item.index)"
+                                  ></VcIcon>
+                                </div>
+                              </template>
+                              <template v-else-if="!multiple">
+                                <slot
+                                  name="selected-item"
+                                  v-bind="item"
+                                >
                                   {{ getEmittingOptionValue(item.opt) }}
-                                </template>
-                              </div>
+                                </slot>
+                              </template>
                             </div>
-                          </template>
+                          </div>
                         </template>
                       </div>
                       <div
@@ -375,8 +372,8 @@ const props = withDefaults(
 
     modelValue?: any;
     /**
-     * Try to map labels of model from 'options' Array; If you are using emit-value you will probably need to use map-options to display the label text in the select field rather than the value;
-     * Default value: true
+     * Try to map labels of model from 'options' Array; If you are using emit-value you will probably need to use map-options to display the label text in the select field rather than the value.
+     * @default true
      */
     mapOptions?: boolean;
     /**
@@ -422,19 +419,19 @@ const props = withDefaults(
     multiple?: boolean;
     /**
      * Available options that the user can select from.
-     * Default value: []
+     * @default []
      */
     options?: ((keyword?: string, skip?: number, ids?: string[]) => Promise<P>) | T[];
     /**
      * Property of option which holds the 'value'
-     * Default value: id
+     * @default id
      * @param option The current option being processed
      * @returns Value of the current option
      */
     optionValue?: OptionProp<Option>;
     /**
      * Property of option which holds the 'label'
-     * Default value: title
+     * @default title
      * @param option The current option being processed
      * @returns Label of the current option
      */
@@ -445,7 +442,7 @@ const props = withDefaults(
     emitValue?: boolean;
     /**
      * Debounce the search input update with an amount of milliseconds
-     * Default value: 500
+     * @default 500
      */
     debounce?: number | string;
     /**

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,25 +68,16 @@ export interface Emits {
 }
 
 defineSlots<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  error: (props: any) => any;
+  error: void;
 }>();
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   name: "Field",
-  maxchars: "1024",
+  maxlength: "1024",
 });
 
 const emit = defineEmits<Emits>();
 
-watch(
-  () => props.modelValue,
-  (value) => {
-    emit("update:modelValue", value);
-  },
-);
-
-// Handle input event to propertly validate value and emit changes
 function onInput(e: Event) {
   const newValue = (e.target as HTMLInputElement).value;
   emit("update:modelValue", newValue);

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>

package/ui/components/organisms/vc-table/_internal/vc-table-column-switcher/vc-table-column-switcher.vue

@@ -16,18 +16,22 @@
         class="tw-flex tw-flex-col tw-box-border tw-max-h-[300px] tw-h-auto tw-z-10 tw-overflow-hidden tw-absolute tw-bg-white tw-border tw-border-solid tw-border-[#e5e7eb] tw-w-max tw-right-0"
       >
         <VcContainer
-          v-if="items && items.length"
+          v-if="internalItems && internalItems.length"
           :no-padding="true"
         >
           <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col">
             <div
-              v-for="item in items"
+              v-for="item in internalItems"
               :key="item.id"
               class="tw-flex tw-items-center tw-min-h-[30px] tw-box-border tw-rounded-[3px] tw-px-2 tw-cursor-pointer hover:tw-bg-[#eff7fc] tw-border-b"
-              :class="{ 'tw-bg-[#eff7fc]': item.visible }"
               @click="selectItem(item)"
             >
-              {{ item.title }}
+              <VcIcon
+                :icon="item.visible ? 'fas fa-check' : ''"
+                size="s"
+                class="tw-w-4"
+              />
+              <p class="tw-ml-2">{{ item.title }}</p>
             </div>
           </div>
         </VcContainer>
@@ -37,7 +41,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from "vue";
+import { ref, computed, toRefs, watch } from "vue";
 import { ITableColumns } from "./../../../../../../core/types";
 import { vOnClickOutside } from "@vueuse/components";
 import { useFloating, flip, shift, autoUpdate } from "@floating-ui/vue";
@@ -50,12 +54,13 @@ export interface Emits {
   (event: "change", value: ITableColumns): void;
 }
 
-withDefaults(defineProps<Props>(), {});
+const props = withDefaults(defineProps<Props>(), {});
 const emit = defineEmits<Emits>();
 
 const isActive = ref(false);
 const referenceButton = ref(null);
 const floatingDrop = ref(null);
+const internalItems = ref();
 const floater = useFloating(referenceButton, floatingDrop, {
   placement: "bottom-end",
   whileElementsMounted: autoUpdate,
@@ -69,12 +74,21 @@ const floatingDropStyle = computed(() => {
   };
 });
 
+watch(
+  () => props.items,
+  (newVal) => {
+    internalItems.value = newVal;
+  },
+  { immediate: true, deep: true },
+);
+
 function selectItem(item: ITableColumns) {
   emit("change", toggleVisibility(item));
 }
 
 function toggleVisibility(item: ITableColumns) {
   item.visible = !item.visible;
+
   return item;
 }
 

package/ui/components/organisms/vc-table/vc-table.stories.ts

@@ -17,7 +17,7 @@ export default {
       {
         id: "img",
         title: "Pic",
-        width: 60,
+        width: "60px",
         type: "image",
       },
       {
@@ -29,7 +29,11 @@ export default {
         id: "sku",
         title: "SKU",
         sortable: true,
-        width: 100,
+        width: "100px",
+      },
+      {
+        id: "id",
+        title: "ID",
       },
     ],