@vc-shell/framework 1.0.219 → 1.0.221

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

@@ -30,6 +30,7 @@
         class="tw-w-full"
         type="number"
         @update:model-value="updateModel"
+        @blur="handleBlur"
       >
         <template #append-inner>
           <slot
@@ -45,6 +46,10 @@
               </button>
             </template>
           </slot>
+          <slot
+            v-if="$slots['append-inner']"
+            name="append-inner"
+          ></slot>
         </template>
         <template #control="{ placeholder: holder }">
           <input
@@ -52,8 +57,27 @@
             type="text"
             :disabled="disabled"
             :placeholder="holder"
+            @blur="handleBlur"
           />
         </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>
@@ -170,6 +194,7 @@ export interface Emits {
   (event: "update:model-value", value: string | number | null): void;
   (event: "update:option", value: unknown): void;
   (event: "change", value: string | number | null): void;
+  (event: "blur", value: Event): void;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -188,11 +213,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 +257,13 @@ watch(
   },
 );
 
+watch(
+  () => props.modelValue,
+  (value) => {
+    setValue(value as number | null);
+  },
+);
+
 watch(numberValue, (value) => {
   emit("update:model-value", value);
 });
@@ -225,4 +273,8 @@ function updateModel(value: string | number | Date | null | undefined) {
   numberValue.value = value as number | null;
   emit("update:model-value", value as number);
 }
+
+function handleBlur(event: Event) {
+  emit("blur", event);
+}
 </script>

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue

@@ -1,7 +1,10 @@
 <template>
   <div
     class="vc-blade-toolbar-button"
-    :class="{ 'vc-blade-toolbar-button_disabled': disabled || isWaiting }"
+    :class="{
+      'vc-blade-toolbar-button_disabled': disabled || isWaiting,
+      'tw-border-l tw-border-solid tw-border-[color:#eef0f2]': separator === 'left',
+    }"
     :title="title"
     @click="onClick"
   >
@@ -60,6 +63,7 @@ export interface Props {
   disabled?: boolean;
   dropdownItems?: IBladeDropdownItem[];
   clickHandler?(): void;
+  separator?: "left" | "right" | "both";
 }
 
 export interface Emits {

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/vc-blade-toolbar.vue

@@ -15,6 +15,7 @@
           :icon="item.icon"
           :title="unref(item.title)"
           :disabled="item.disabled as boolean"
+          :separator="item.separator"
           :dropdown-items="item.dropdownItems"
           :click-handler="item.clickHandler"
         />

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,43 @@
         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 })"
+              @blur="onBlur({ row: index, field: cell.id, errors })"
+            >
+              <template
+                v-if="errors.length > 0"
+                #append-inner
+              >
+                <VcTooltip placement="bottom-end">
+                  <VcIcon icon="fas fa-exclamation-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 +147,35 @@
       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 })"
+            @blur="onBlur({ row: index, field: cell.id, errors })"
+          >
+            <template
+              v-if="errors.length > 0"
+              #append-inner
+            >
+              <VcTooltip placement="bottom-end">
+                <VcIcon icon="fas fa-exclamation-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 +206,34 @@
       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 })"
+            @blur="onBlur({ row: index, field: cell.id, errors })"
+          >
+            <template
+              v-if="errors.length > 0"
+              #append-inner
+            >
+              <VcTooltip placement="bottom-end">
+                <VcIcon icon="fas fa-exclamation-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 }}
@@ -176,6 +242,7 @@
   </div>
 </template>
 
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { computed } from "vue";
 import moment from "moment";
@@ -185,18 +252,21 @@ 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>();
-defineEmits<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+const emit = defineEmits<{
   (event: "update", payload: { field: string; value: any }): void;
+  (event: "blur", payload: { row: number | undefined; field: string }): void;
 }>();
 
 const locale = window.navigator.language;
@@ -204,6 +274,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 } });
@@ -225,4 +297,17 @@ function intlMoney(value: number) {
     currency: (props.item[currencyProp] as string) || "USD",
   }).format(value);
 }
+
+function onBlur(args: { row: number | undefined; field: string; errors?: string[] }) {
+  if (args.errors && args.errors.length > 0) {
+    return;
+  }
+  emit("blur", { row: args.row, field: args.field });
+}
 </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) {