@vc-shell/framework 1.0.189 → 1.0.191

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