@vc-shell/framework 1.0.117 → 1.0.118

package/ui/components/molecules/vc-field/_internal/vc-field-type/vc-field-type.vue

@@ -0,0 +1,66 @@
+<template>
+  <!-- Text -->
+  <template v-if="type === 'text'">
+    <div class="tw-flex tw-flex-row tw-justify-stretch tw-truncate">
+      <div class="tw-truncate">
+        <VcHint class="tw-text-s">{{ value }}</VcHint>
+      </div>
+    </div>
+  </template>
+
+  <!-- Date -->
+  <template v-if="type === 'date'">
+    <div class="tw-flex tw-flex-row tw-justify-stretch tw-truncate">
+      <div class="tw-truncate">
+        <VcHint class="tw-text-s"> {{ value.toLocaleDateString() }}</VcHint>
+      </div>
+    </div>
+  </template>
+
+  <!-- Date ago -->
+  <template v-if="type === 'date-ago'">
+    <div class="tw-flex tw-flex-row tw-justify-stretch tw-truncate">
+      <div class="tw-truncate">
+        <VcHint class="tw-text-s"> {{ moment(value).fromNow() ?? "N/A" }}</VcHint>
+      </div>
+    </div>
+  </template>
+
+  <!-- Link -->
+  <template v-if="type === 'link'">
+    <div class="tw-flex tw-flex-row tw-justify-stretch tw-truncate">
+      <div class="tw-truncate">
+        <VcLink
+          class="vc-link tw-text-s tw-truncate tw-w-full"
+          @click="onLinkClick"
+          >{{ value }}</VcLink
+        >
+      </div>
+      <slot></slot>
+    </div>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import moment from "moment";
+
+export interface Props {
+  type: "text" | "date" | "date-ago" | "link";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value: any;
+}
+
+export interface Emits {
+  (event: "click"): void;
+  (event: "copy"): void;
+}
+
+defineEmits<Emits>();
+const props = defineProps<Props>();
+
+function onLinkClick() {
+  location.href = props.value;
+}
+</script>
+
+<style lang="scss" scoped></style>

package/ui/components/molecules/vc-field/index.ts

@@ -0,0 +1 @@
+export { default as VcField } from "./vc-field.vue";

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

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <!-- Field label -->
+    <VcLabel v-if="label">
+      <span>{{ label }}</span>
+      <template
+        v-if="tooltip"
+        #tooltip
+        >{{ tooltip }}</template
+      ></VcLabel
+    >
+    <div>
+      <VcFieldType
+        :value="modelValue"
+        :type="type"
+      >
+        <VcButton
+          v-if="copyable"
+          icon="far fa-copy"
+          size="m"
+          class="tw-ml-2"
+          text
+          @click="copy(modelValue)"
+        ></VcButton>
+      </VcFieldType>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VcLabel } from "./../../";
+import VcFieldType from "./_internal/vc-field-type/vc-field-type.vue";
+
+export interface Props {
+  /**
+   * Field label text
+   */
+  label?: string;
+  /**
+   * Field tooltip information
+   */
+  tooltip?: string;
+  /**
+   * Field type
+   */
+  type?: "text" | "date" | "date-ago" | "link";
+  /**
+   * Field content
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  modelValue?: any;
+  /**
+   * Add button for field content copying
+   */
+  copyable?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  type: "text",
+});
+
+function copy(value: string) {
+  navigator.clipboard?.writeText(value);
+}
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -100,9 +100,11 @@ const locale = window.navigator.language;
 const value = computed(() => {
   return (props.cell.field || props.cell.id).split(".").reduce((p: { [x: string]: unknown }, c: string) => {
     if (p && Array.isArray(p) && p.length) {
-      return (p && p[0][c]) || null;
+      const val = p && p[0][c];
+      return val !== undefined ? val : null;
     }
-    return (p && p[c]) || null;
+    const val = p && p[c];
+    return val !== undefined ? val : null;
   }, props.item);
 });
 </script>

package/ui/types/index.ts

@@ -39,6 +39,7 @@ declare module "vue" {
     VcSlider: (typeof VcShellComponents)["VcSlider"];
     VcTextarea: (typeof VcShellComponents)["VcTextarea"];
     VcMultivalue: (typeof VcShellComponents)["VcMultivalue"];
+    VcField: (typeof VcShellComponents)["VcField"];
 
     // organisms
     VcApp: (typeof VcShellComponents)["VcApp"];