@vc-shell/framework 1.0.219 → 1.0.220

package/ui/components/atoms/vc-label/vc-label.vue

@@ -14,24 +14,16 @@
       v-if="$slots['tooltip']"
       class="tw-grow tw-basis-0 tw-ml-1 tw-relative"
     >
-      <VcIcon
-        ref="tooltipIconRef"
-        class="tw-text-[color:var(--label-tooltip-color)]"
-        :icon="tooltipIcon"
-        size="s"
-        @mouseenter="tooltipVisible = true"
-        @mouseleave="tooltipVisible = false"
-      ></VcIcon>
-      <teleport to="body">
-        <span
-          v-if="tooltipVisible"
-          ref="tooltipRef"
-          :style="floatingStyles"
-          class="tw-absolute tw-z-[101] tw-bg-white tw-border tw-border-solid tw-border-[color:#eef0f2] tw-shadow-[1px_1px_8px_rgba(126,142,157,0.25)] tw-rounded-[3px] tw-text-[color:#8e9daa] tw-font-normal tw-py-1 tw-px-2 tw-ml-4"
-        >
+      <VcTooltip placement="top-start">
+        <VcIcon
+          class="tw-text-[color:var(--label-tooltip-color)]"
+          :icon="tooltipIcon"
+          size="s"
+        ></VcIcon>
+        <template #tooltip>
           <slot name="tooltip"></slot>
-        </span>
-      </teleport>
+        </template>
+      </VcTooltip>
     </span>
 
     <div
@@ -44,9 +36,7 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "./../../../components";
-import { ref } from "vue";
-import { useFloating, shift } from "@floating-ui/vue";
+import { VcIcon, VcTooltip } from "./../../../components";
 
 export interface Props {
   required?: boolean;
@@ -63,15 +53,6 @@ defineSlots<{
   default: void;
   tooltip?: void;
 }>();
-
-const tooltipVisible = ref(false);
-const tooltipIconRef = ref<HTMLElement | null>(null);
-const tooltipRef = ref<HTMLElement | null>(null);
-
-const { floatingStyles } = useFloating(tooltipIconRef, tooltipRef, {
-  placement: "top-start",
-  middleware: [shift()],
-});
 </script>
 
 <style lang="scss">

package/ui/components/atoms/vc-status/vc-status.vue

@@ -9,7 +9,7 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 export interface Props {
-  variant?: "info" | "warning" | "danger" | "success" | "light-danger";
+  variant?: "info" | "warning" | "danger" | "success" | "light-danger" | "info-dark";
   outline?: boolean;
   extend?: boolean;
 }
@@ -27,7 +27,7 @@ defineSlots<{
 <style lang="scss">
 :root {
   --status-padding: 4px 14px;
-  --status-padding-extended: 12px;
+  --status-padding-extended: 8px;
 
   --status-border-radius: 2px;
   --status-border-radius-extended: 4px;
@@ -47,9 +47,12 @@ defineSlots<{
 
   --status-light-danger-color: #333333;
   --status-light-danger-main-color: #ffefef;
+
+  --status-info-dark-color: #ffffff;
+  --status-info-dark-main-color: #82a6bd;
 }
 
-$variants: info, warning, danger, success, light-danger;
+$variants: info, warning, danger, success, light-danger, info-dark;
 
 .vc-status {
   @apply tw-inline-block tw-rounded-[var(--status-border-radius)] tw-py-1 tw-px-3.5 tw-text-base tw-font-normal tw-whitespace-nowrap;

package/ui/components/atoms/vc-tooltip/index.ts

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

package/ui/components/atoms/vc-tooltip/vc-tooltip.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <div
+      ref="tooltipCompRef"
+      class="tw-inline-flex"
+      @mouseenter="tooltipVisible = true"
+      @mouseleave="tooltipVisible = false"
+    >
+      <slot></slot>
+    </div>
+
+    <teleport to="body">
+      <span
+        v-if="tooltipVisible"
+        ref="tooltipRef"
+        :style="floatingStyles"
+        class="tw-absolute tw-z-[101] tw-bg-white tw-border tw-border-solid tw-border-[color:#eef0f2] tw-shadow-[1px_1px_8px_rgba(126,142,157,0.25)] tw-rounded-[3px] tw-text-[color:#8e9daa] tw-font-normal tw-py-1 tw-px-2 tw-ml-4"
+      >
+        <slot name="tooltip"></slot>
+      </span>
+    </teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useFloating, shift, Placement, offset } from "@floating-ui/vue";
+import { ref } from "vue";
+export interface Props {
+  placement?: Placement;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placement: "bottom-end",
+});
+
+defineSlots<{
+  default: void;
+  tooltip?: void;
+}>();
+
+const tooltipVisible = ref(false);
+const tooltipCompRef = ref<HTMLElement | null>(null);
+const tooltipRef = ref<HTMLElement | null>(null);
+
+const { floatingStyles } = useFloating(tooltipCompRef, tooltipRef, {
+  placement: props.placement,
+  middleware: [
+    offset({
+      crossAxis: 5,
+      mainAxis: 5,
+    }),
+    shift(),
+  ],
+});
+</script>
+
+<style lang="scss" scoped></style>

package/ui/components/molecules/vc-input-currency/vc-input-currency.vue

@@ -45,6 +45,10 @@
               </button>
             </template>
           </slot>
+          <slot
+            v-if="$slots['append-inner']"
+            name="append-inner"
+          ></slot>
         </template>
         <template #control="{ placeholder: holder }">
           <input
@@ -54,6 +58,24 @@
             :placeholder="holder"
           />
         </template>
+        <template
+          v-if="$slots['prepend-inner']"
+          #prepend-inner
+        >
+          <slot name="prepend-inner"></slot>
+        </template>
+        <template
+          v-if="$slots['append']"
+          #append
+        >
+          <slot name="append"></slot>
+        </template>
+        <template
+          v-if="$slots['prepend']"
+          #prepend
+        >
+          <slot name="prepend"></slot>
+        </template>
       </VcInput>
     </template>
   </VcSelect>
@@ -188,11 +210,27 @@ defineSlots<{
     toggleHandler: () => void;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   }) => any;
+  /**
+   * Slot for custom append-inner content
+   */
+  "append-inner": void;
+  /**
+   * Slot for custom prepend-inner content
+   */
+  "prepend-inner": void;
+  /**
+   * Slot for custom append content
+   */
+  append: void;
+  /**
+   * Slot for custom prepend content
+   */
+  prepend: void;
 }>();
 
 const emit = defineEmits<Emits>();
 
-const { inputRef, setOptions, numberValue } = useCurrencyInput(
+const { inputRef, setOptions, numberValue, setValue } = useCurrencyInput(
   {
     locale: navigator.language,
     currency: props.option || "USD",
@@ -216,6 +254,13 @@ watch(
   },
 );
 
+watch(
+  () => props.modelValue,
+  (value) => {
+    setValue(value as number | null);
+  },
+);
+
 watch(numberValue, (value) => {
   emit("update:model-value", value);
 });

package/ui/components/organisms/vc-dynamic-property/vc-dynamic-property.vue

@@ -162,6 +162,7 @@
         :placeholder="computedProperty.placeholder"
         :disabled="disabled"
         :loading="loading"
+        clearable
       ></VcInput
     ></template>
     <template v-else-if="computedProperty.valueType === 'LongText'">

package/ui/components/organisms/vc-table/_internal/vc-table-add-new/vc-table-add-new.vue

@@ -0,0 +1,46 @@
+o
+<template>
+  <tr v-if="editing && addNewRowButton">
+    <td>
+      <div class="tw-p-3">
+        <VcButton
+          v-if="addNewRowButton.show"
+          text
+          @click="$emit('onAddNewRow')"
+        >
+          <div class="tw-flex tw-flex-row tw-gap-2 tw-items-center">
+            <VcIcon
+              icon="fas fa-plus"
+              size="m"
+              class="tw-text-[#41afe6]"
+            />
+            {{ unref(addNewRowButton.title) }}
+          </div>
+        </VcButton>
+      </div>
+    </td>
+  </tr>
+</template>
+
+<script lang="ts" setup>
+import { unref } from "vue";
+export interface Props {
+  editing: boolean | undefined;
+  addNewRowButton:
+    | {
+        show: boolean;
+        title: string;
+      }
+    | undefined;
+}
+
+export interface Emits {
+  (event: "onAddNewRow"): void;
+}
+
+defineProps<Props>();
+
+defineEmits<Emits>();
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -7,21 +7,42 @@
         class="tw-truncate"
         :class="cell.class"
       >
-        <template v-if="cellEditActive">
-          <VcInputCurrency
+        <template v-if="isEditable">
+          <Field
+            v-slot="{ errors, errorMessage }"
+            :label="cell.title as string"
+            :name="`${cell.id}_${index}`"
             :model-value="value"
-            :options="[]"
-            :option="(item[cell.currencyField || 'currency'] as string) || 'USD'"
-            currency-display="symbol"
-            class="tw-w-full"
-            @update:model-value="$emit('update', { field: cell.id, value: $event })"
-          />
+            :rules="cell.rules"
+          >
+            <VcInputCurrency
+              :model-value="value"
+              :options="[]"
+              :option="(item[cell.currencyField || 'currency'] as string) || 'USD'"
+              currency-display="symbol"
+              class="tw-w-full"
+              :error="errors.length > 0"
+              @update:model-value="$emit('update', { field: cell.id, value: $event })"
+            >
+              <template
+                v-if="errors.length > 0"
+                #append-inner
+              >
+                <VcTooltip placement="bottom-end">
+                  <VcIcon icon="fa fa-info-circle tw-text-[color:var(--error-color)]"></VcIcon>
+                  <template #tooltip>
+                    <div class="tw-text-[color:var(--error-color)]">{{ errorMessage }}</div>
+                  </template>
+                </VcTooltip>
+              </template>
+            </VcInputCurrency>
+          </Field>
         </template>
         <template v-else>
           <span class="tw-truncate">{{ intlMoney(Number(value)) }}</span>
         </template>
       </div>
-      <template v-else-if="!cellEditActive">
+      <template v-else-if="!isEditable">
         <div
           class="tw-truncate"
           :class="cell.class"
@@ -125,13 +146,34 @@
       class="tw-text-right tw-truncate"
       :class="cell.class"
     >
-      <template v-if="cellEditActive">
-        <VcInput
+      <template v-if="isEditable">
+        <Field
+          v-slot="{ errors, errorMessage }"
+          :label="cell.title as string"
+          :name="`${cell.id}_${index}`"
           :model-value="value"
-          class="tw-w-full"
-          type="number"
-          @update:model-value="$emit('update', { field: cell.id, value: $event })"
-        ></VcInput>
+          :rules="cell.rules"
+        >
+          <VcInput
+            :model-value="value"
+            class="tw-w-full"
+            type="number"
+            :error="errors.length > 0"
+            @update:model-value="$emit('update', { field: cell.id, value: $event })"
+          >
+            <template
+              v-if="errors.length > 0"
+              #append-inner
+            >
+              <VcTooltip placement="bottom-end">
+                <VcIcon icon="fa fa-info-circle tw-text-[color:var(--error-color)]"></VcIcon>
+                <template #tooltip>
+                  <div class="tw-text-[color:var(--error-color)]">{{ errorMessage }}</div>
+                </template>
+              </VcTooltip>
+            </template>
+          </VcInput>
+        </Field>
       </template>
       <template v-else>
         {{ typeof Number(value) === "number" && Number(value) >= 0 ? Number(value).toFixed(0) : "N/A" }}
@@ -162,12 +204,33 @@
       class="tw-truncate"
       :class="cell.class"
     >
-      <template v-if="cellEditActive">
-        <VcInput
+      <template v-if="isEditable">
+        <Field
+          v-slot="{ errors, errorMessage }"
+          :label="cell.title as string"
+          :name="`${cell.id}_${index}`"
           :model-value="value"
-          class="tw-w-full"
-          @update:model-value="$emit('update', { field: cell.id, value: $event })"
-        ></VcInput>
+          :rules="cell.rules"
+        >
+          <VcInput
+            :model-value="value"
+            class="tw-w-full"
+            :error="errors.length > 0"
+            @update:model-value="$emit('update', { field: cell.id, value: $event })"
+          >
+            <template
+              v-if="errors.length > 0"
+              #append-inner
+            >
+              <VcTooltip placement="bottom-end">
+                <VcIcon icon="fa fa-info-circle tw-text-[color:var(--error-color)]"></VcIcon>
+                <template #tooltip>
+                  <div class="tw-text-[color:var(--error-color)]">{{ errorMessage }}</div>
+                </template>
+              </VcTooltip>
+            </template></VcInput
+          >
+        </Field>
       </template>
       <template v-else>
         {{ value }}
@@ -185,12 +248,14 @@ import htmlTruncate from "truncate-html";
 import * as DOMPurify from "dompurify";
 import VcInputCurrency from "../../../../molecules/vc-input-currency/vc-input-currency.vue";
 import VcInput from "../../../../molecules/vc-input/vc-input.vue";
+import { Field } from "vee-validate";
 
 export interface Props {
   cell: ITableColumns;
   item: Record<string, unknown>;
   width?: number;
-  cellEditActive?: boolean;
+  editing?: boolean;
+  index?: number;
 }
 
 const props = defineProps<Props>();
@@ -204,6 +269,8 @@ const locale = window.navigator.language;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const value = computed((): any => _.get(props.item, props.cell.field || props.cell.id));
 
+const isEditable = computed(() => props.cell.editable && props.editing);
+
 const sanitizedHtml = computed(() => {
   if (props.cell.type === "html") {
     return DOMPurify.default.sanitize(value.value as string, { USE_PROFILES: { html: true } });
@@ -226,3 +293,9 @@ function intlMoney(value: number) {
   }).format(value);
 }
 </script>
+
+<style lang="scss">
+:root {
+  --error-color: #f14e4e;
+}
+</style>

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

@@ -41,7 +41,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, toRefs, watch } from "vue";
+import { ref, computed, watch } from "vue";
 import { ITableColumns } from "./../../../../../../core/types";
 import { vOnClickOutside } from "@vueuse/components";
 import { useFloating, flip, shift, autoUpdate } from "@floating-ui/vue";
@@ -91,7 +91,11 @@ watch(
 );
 
 function selectItem(item: ITableColumns) {
-  emit("change", toggleVisibility(item));
+  const numberVisible = internalItems.value.filter((i: ITableColumns) => i.visible).length;
+
+  if (numberVisible > 1 || !item.visible) {
+    emit("change", toggleVisibility(item));
+  }
 }
 
 function toggleVisibility(item: ITableColumns) {