@vc-shell/framework 1.0.87 → 1.0.89

package/shared/pages/InvitePage/components/invite/Invite.vue

@@ -8,19 +8,19 @@
     <VcLoginForm
       logo="/assets/logo-white.svg"
       background="/assets/background.jpg"
-      :title="$t('INVITATION.TITLE')"
+      :title="t('INVITATION.TITLE')"
     >
       <VcForm>
         <VcInput
           class="tw-mb-4 tw-mt-1"
-          :label="$t('INVITATION.FIELDS.EMAIL.LABEL')"
+          :label="t('INVITATION.FIELDS.EMAIL.LABEL')"
           :model-value="userName"
           name="username"
           disabled
         ></VcInput>
         <Field
           v-slot="{ field, errorMessage, handleChange, errors }"
-          :label="$t('INVITATION.FIELDS.PASSWORD.LABEL')"
+          :label="t('INVITATION.FIELDS.PASSWORD.LABEL')"
           :model-value="form.password"
           rules="required"
           name="password"
@@ -30,8 +30,8 @@
             ref="passwordField"
             v-model="form.password"
             class="tw-mb-4 tw-mt-1"
-            :label="$t('INVITATION.FIELDS.PASSWORD.LABEL')"
-            :placeholder="$t('INVITATION.FIELDS.PASSWORD.PLACEHOLDER')"
+            :label="t('INVITATION.FIELDS.PASSWORD.LABEL')"
+            :placeholder="t('INVITATION.FIELDS.PASSWORD.PLACEHOLDER')"
             type="password"
             :disabled="!form.tokenIsValid"
             :error="!!errors.length"
@@ -47,7 +47,7 @@
         </Field>
         <Field
           v-slot="{ field, errorMessage, handleChange, errors }"
-          :label="$t('INVITATION.FIELDS.CONFIRM_PASSWORD.LABEL')"
+          :label="t('INVITATION.FIELDS.CONFIRM_PASSWORD.LABEL')"
           :model-value="form.confirmPassword"
           rules="required"
           name="confirm_password"
@@ -57,8 +57,8 @@
             ref="confirmPasswordField"
             v-model="form.confirmPassword"
             class="tw-mb-4"
-            :label="$t('INVITATION.FIELDS.CONFIRM_PASSWORD.LABEL')"
-            :placeholder="$t('INVITATION.FIELDS.CONFIRM_PASSWORD.PLACEHOLDER')"
+            :label="t('INVITATION.FIELDS.CONFIRM_PASSWORD.LABEL')"
+            :placeholder="t('INVITATION.FIELDS.CONFIRM_PASSWORD.PLACEHOLDER')"
             :disabled="!form.tokenIsValid"
             type="password"
             :error="!!errors.length"
@@ -82,7 +82,7 @@
             :disabled="loading || !form.isValid || !form.tokenIsValid"
             @click="acceptInvitation"
           >
-            {{ $t("INVITATION.ACCEPT_INVITATION") }}
+            {{ t("INVITATION.ACCEPT_INVITATION") }}
           </vc-button>
         </div>
 
@@ -93,7 +93,7 @@
           style="color: #f14e4e"
         >
           <!-- TODO: stylizing-->
-          {{ $t(`INVITATION.ERRORS.${error}`) }}
+          {{ t(`INVITATION.ERRORS.${error}`) }}
         </VcHint>
       </VcForm>
     </VcLoginForm>
@@ -105,6 +105,7 @@ import { reactive, onMounted, computed } from "vue";
 import { useRouter } from "vue-router";
 import { useIsFormValid, Field, useIsFormDirty, useForm } from "vee-validate";
 import { useUser } from "./../../../../../core/composables";
+import { useI18n } from "vue-i18n";
 
 useForm({ validateOnMount: false });
 
@@ -124,6 +125,7 @@ const props = defineProps({
 });
 const { validateToken, validatePassword, resetPasswordByToken, signIn, loading } = useUser();
 const router = useRouter();
+const { t } = useI18n({ useScope: "global" });
 const isFormValid = useIsFormValid();
 const isDirty = useIsFormDirty();
 const form = reactive({

package/shared/pages/LoginPage/components/login/Login.vue

@@ -8,7 +8,7 @@
       <VcForm @submit.prevent="login">
         <Field
           v-slot="{ field, errorMessage, handleChange, errors }"
-          :label="$t('LOGIN.FIELDS.LOGIN.LABEL')"
+          :label="t('LOGIN.FIELDS.LOGIN.LABEL')"
           name="username"
           :model-value="form.username"
           rules="required"
@@ -18,8 +18,8 @@
             ref="loginField"
             v-model="form.username"
             class="tw-mb-4 tw-mt-1"
-            :label="$t('LOGIN.FIELDS.LOGIN.LABEL')"
-            :placeholder="$t('LOGIN.FIELDS.LOGIN.PLACEHOLDER')"
+            :label="t('LOGIN.FIELDS.LOGIN.LABEL')"
+            :placeholder="t('LOGIN.FIELDS.LOGIN.PLACEHOLDER')"
             required
             :error="!!errors.length"
             :error-message="errorMessage"
@@ -28,7 +28,7 @@
         </Field>
         <Field
           v-slot="{ field, errorMessage, handleChange, errors }"
-          :label="$t('LOGIN.FIELDS.PASSWORD.LABEL')"
+          :label="t('LOGIN.FIELDS.PASSWORD.LABEL')"
           name="password"
           :model-value="form.password"
           rules="required"
@@ -38,8 +38,8 @@
             ref="passwordField"
             v-model="form.password"
             class="tw-mb-4"
-            :label="$t('LOGIN.FIELDS.PASSWORD.LABEL')"
-            :placeholder="$t('LOGIN.FIELDS.PASSWORD.PLACEHOLDER')"
+            :label="t('LOGIN.FIELDS.PASSWORD.LABEL')"
+            :placeholder="t('LOGIN.FIELDS.PASSWORD.PLACEHOLDER')"
             type="password"
             required
             :error="!!errors.length"
@@ -58,7 +58,7 @@
             type="button"
             @click="togglePassRequest"
           >
-            {{ $t("LOGIN.FORGOT_PASSWORD_BUTTON") }}
+            {{ t("LOGIN.FORGOT_PASSWORD_BUTTON") }}
           </VcButton>
         </div>
         <div class="tw-flex tw-justify-center tw-items-center tw-pt-2">
@@ -67,7 +67,7 @@
             class="tw-w-28"
             @click="login"
           >
-            {{ $t("LOGIN.BUTTON") }}
+            {{ t("LOGIN.BUTTON") }}
           </vc-button>
         </div>
       </VcForm>
@@ -102,7 +102,7 @@
         <VcForm @submit.prevent="forgot">
           <Field
             v-slot="{ field, errorMessage, handleChange, errors }"
-            :label="$t('LOGIN.FIELDS.FORGOT_PASSWORD.LABEL')"
+            :label="t('LOGIN.FIELDS.FORGOT_PASSWORD.LABEL')"
             name="loginOrEmail"
             :model-value="forgotPasswordForm.loginOrEmail"
             rules="required|email"
@@ -112,9 +112,9 @@
               ref="forgotPasswordField"
               v-model="forgotPasswordForm.loginOrEmail"
               class="tw-mb-4 tw-mt-1"
-              :label="$t('LOGIN.FIELDS.FORGOT_PASSWORD.LABEL')"
-              :placeholder="$t('LOGIN.FIELDS.FORGOT_PASSWORD.PLACEHOLDER')"
-              :hint="$t('LOGIN.RESET_EMAIL_TEXT')"
+              :label="t('LOGIN.FIELDS.FORGOT_PASSWORD.LABEL')"
+              :placeholder="t('LOGIN.FIELDS.FORGOT_PASSWORD.PLACEHOLDER')"
+              :hint="t('LOGIN.RESET_EMAIL_TEXT')"
               required
               :error="!!errors.length"
               :error-message="errorMessage"
@@ -127,20 +127,20 @@
               type="button"
               @click="togglePassRequest"
             >
-              {{ $t("LOGIN.BACK_BUTTON") }}
+              {{ t("LOGIN.BACK_BUTTON") }}
             </vc-button>
             <vc-button
               :disabled="loading || isDisabled || loadingForgotPassword"
               @click="forgot"
             >
-              {{ $t("LOGIN.FORGOT_BUTTON") }}
+              {{ t("LOGIN.FORGOT_BUTTON") }}
             </vc-button>
           </div>
         </VcForm>
       </template>
 
       <template v-if="requestPassResult.succeeded && forgotPasswordRequestSent">
-        <div>{{ $t("LOGIN.RESET_EMAIL_SENT") }}</div>
+        <div>{{ t("LOGIN.RESET_EMAIL_SENT") }}</div>
         <div class="tw-flex tw-justify-center tw-items-center tw-pt-2">
           <span
             v-if="$isDesktop.value"
@@ -150,7 +150,7 @@
             :disabled="loading"
             @click="togglePassRequest"
           >
-            {{ $t("LOGIN.BUTTON_OK") }}
+            {{ t("LOGIN.BUTTON_OK") }}
           </vc-button>
         </div>
       </template>
@@ -183,7 +183,8 @@ import { useSettings, useUser } from "./../../../../../core/composables";
 import { RequestPasswordResult, SignInResults } from "./../../../../../core/types";
 import { CommonPageComposables } from "./../../../../../typings";
 import AzureAdIcon from "./../../../../../assets/img/AzureAd.svg";
-import { ExternalSignInProviderInfo } from "./../../../../../core/api";
+import { ExternalSignInProviderInfo } from "./../../../../../core/api/platform";
+import { useI18n } from "vue-i18n";
 
 export interface Props {
   logo: string;
@@ -197,6 +198,7 @@ const router = useRouter();
 
 useForm({ validateOnMount: false });
 const { getUiCustomizationSettings, uiSettings } = useSettings();
+const { t } = useI18n({ useScope: "global" });
 let useLogin;
 const injected = inject<CommonPageComposables>("commonPageComposables");
 const signInResult = ref<SignInResults>({ succeeded: true });

package/shared/pages/ResetPasswordPage/components/reset-password/ResetPassword.vue

@@ -8,12 +8,12 @@
     <VcLoginForm
       logo="/assets/logo-white.svg"
       background="/assets/background.jpg"
-      :title="$t('PASSWORDRESET.TITLE')"
+      :title="t('PASSWORDRESET.TITLE')"
     >
       <VcForm>
         <Field
           v-slot="{ field, errorMessage, handleChange, errors }"
-          :label="$t('PASSWORDRESET.FIELDS.PASSWORD.LABEL')"
+          :label="t('PASSWORDRESET.FIELDS.PASSWORD.LABEL')"
           name="password"
           :model-value="form.password"
           rules="required"
@@ -23,8 +23,8 @@
             ref="passwordField"
             v-model="form.password"
             class="tw-mb-4 tw-mt-1"
-            :label="$t('PASSWORDRESET.FIELDS.PASSWORD.LABEL')"
-            :placeholder="$t('PASSWORDRESET.FIELDS.PASSWORD.PLACEHOLDER')"
+            :label="t('PASSWORDRESET.FIELDS.PASSWORD.LABEL')"
+            :placeholder="t('PASSWORDRESET.FIELDS.PASSWORD.PLACEHOLDER')"
             type="password"
             :disabled="!form.tokenIsValid"
             required
@@ -40,7 +40,7 @@
         </Field>
         <Field
           v-slot="{ field, errorMessage, handleChange, errors }"
-          :label="$t('PASSWORDRESET.FIELDS.CONFIRM_PASSWORD.LABEL')"
+          :label="t('PASSWORDRESET.FIELDS.CONFIRM_PASSWORD.LABEL')"
           name="confirm_password"
           :model-value="form.confirmPassword"
           rules="required"
@@ -50,8 +50,8 @@
             ref="confirmPasswordField"
             v-model="form.confirmPassword"
             class="tw-mb-4"
-            :label="$t('PASSWORDRESET.FIELDS.CONFIRM_PASSWORD.LABEL')"
-            :placeholder="$t('PASSWORDRESET.FIELDS.CONFIRM_PASSWORD.PLACEHOLDER')"
+            :label="t('PASSWORDRESET.FIELDS.CONFIRM_PASSWORD.LABEL')"
+            :placeholder="t('PASSWORDRESET.FIELDS.CONFIRM_PASSWORD.PLACEHOLDER')"
             :disabled="!form.tokenIsValid"
             type="password"
             required
@@ -76,7 +76,7 @@
             :disabled="disableButton"
             @click="resetPassword"
           >
-            {{ $t("PASSWORDRESET.SAVE_PASSWORD") }}
+            {{ t("PASSWORDRESET.SAVE_PASSWORD") }}
           </vc-button>
         </div>
 
@@ -86,7 +86,7 @@
           class="tw-mt-3 !tw-text-[#f14e4e]"
         >
           <!-- TODO: stylizing-->
-          {{ $t(`PASSWORDRESET.ERRORS.${error}`) }}
+          {{ t(`PASSWORDRESET.ERRORS.${error}`) }}
         </VcHint>
       </VcForm>
     </VcLoginForm>
@@ -98,6 +98,7 @@ import { reactive, onMounted, computed } from "vue";
 import { useRouter } from "vue-router";
 import { Field, useForm } from "vee-validate";
 import { useUser } from "./../../../../../core/composables";
+import { useI18n } from "vue-i18n";
 
 const props = defineProps({
   userId: {
@@ -115,6 +116,7 @@ const props = defineProps({
 });
 const { validateToken, validatePassword, resetPasswordByToken, signIn, loading } = useUser();
 const router = useRouter();
+const { t } = useI18n({ useScope: "global" });
 const { validate: veeValidate } = useForm({ validateOnMount: false });
 
 const form = reactive({

package/ui/components/atoms/index.ts

@@ -0,0 +1,19 @@
+export * from "./vc-badge";
+export * from "./vc-button";
+export * from "./vc-card";
+export * from "./vc-checkbox";
+export * from "./vc-col";
+export * from "./vc-container";
+export * from "./vc-hint";
+export * from "./vc-icon";
+export * from "./vc-info-row";
+export * from "./vc-image";
+export * from "./vc-label";
+export * from "./vc-link";
+export * from "./vc-loading";
+export * from "./vc-progress";
+export * from "./vc-row";
+export * from "./vc-status";
+export * from "./vc-status-icon";
+export * from "./vc-switch";
+export * from "./vc-widget";

package/ui/components/index.ts

@@ -1,46 +1,8 @@
 /* Atoms */
-export * from "./atoms/vc-badge";
-export * from "./atoms/vc-button";
-export * from "./atoms/vc-card";
-export * from "./atoms/vc-checkbox";
-export * from "./atoms/vc-col";
-export * from "./atoms/vc-container";
-export * from "./atoms/vc-hint";
-export * from "./atoms/vc-icon";
-export * from "./atoms/vc-info-row";
-export * from "./atoms/vc-image";
-export * from "./atoms/vc-label";
-export * from "./atoms/vc-link";
-export * from "./atoms/vc-loading";
-export * from "./atoms/vc-progress";
-export * from "./atoms/vc-row";
-export * from "./atoms/vc-status";
-export * from "./atoms/vc-status-icon";
-export * from "./atoms/vc-switch";
-export * from "./atoms/vc-widget";
+export * from "./atoms";
 
 /* Molecules */
-export * from "./molecules/vc-breadcrumbs";
-export * from "./molecules/vc-code-editor";
-export * from "./molecules/vc-editor";
-export * from "./molecules/vc-form";
-export * from "./molecules/vc-file-upload";
-export * from "./molecules/vc-input";
-export * from "./molecules/vc-input-currency";
-export * from "./molecules/vc-notification";
-export * from "./molecules/vc-pagination";
-export * from "./molecules/vc-rating";
-export * from "./molecules/vc-select";
-export * from "./molecules/vc-slider";
-export * from "./molecules/vc-textarea";
+export * from "./molecules";
 
 /* Organisms */
-export * from "./organisms/vc-app";
-export * from "./organisms/vc-blade";
-export * from "./organisms/vc-dynamic-property";
-export * from "./organisms/vc-gallery";
-export * from "./organisms/vc-login-form";
-export * from "./organisms/vc-popup";
-export * from "./organisms/vc-table";
-export * from "./organisms/vc-notification-dropdown";
-export * from "./organisms/vc-notification-template";
+export * from "./organisms";

package/ui/components/molecules/index.ts

@@ -0,0 +1,13 @@
+export * from "./vc-breadcrumbs";
+export * from "./vc-code-editor";
+export * from "./vc-editor";
+export * from "./vc-form";
+export * from "./vc-file-upload";
+export * from "./vc-input";
+export * from "./vc-input-currency";
+export * from "./vc-notification";
+export * from "./vc-pagination";
+export * from "./vc-rating";
+export * from "./vc-select";
+export * from "./vc-slider";
+export * from "./vc-textarea";

package/ui/components/molecules/vc-code-editor/vc-code-editor.vue

@@ -55,7 +55,6 @@ export interface Props {
   disabled?: boolean;
   label?: string;
   tooltip?: string;
-  name?: string;
   errorMessage?: string;
 }
 
@@ -65,7 +64,6 @@ export interface Emits {
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: null,
-  name: "Field",
 });
 
 const emit = defineEmits<Emits>();

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

@@ -60,7 +60,6 @@ export interface Props {
   disabled?: boolean;
   label?: string;
   tooltip?: string;
-  name?: string;
   errorMessage?: string;
   assetsFolder: string;
 }
@@ -73,7 +72,6 @@ const { getAccessToken } = useUser();
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: null,
-  name: "Field",
 });
 
 const emit = defineEmits<Emits>();

package/ui/components/molecules/vc-file-upload/vc-file-upload.vue

@@ -24,9 +24,10 @@
       ></VcIcon>
 
       <div class="tw-text-[#9db0be] tw-text-center tw-text-lg tw-leading-lg tw-mt-4">
-        <span>Drag and drop file here or</span>&nbsp;
+        <span>{{ t("COMPONENTS.MOLECULES.VC_FILE_UPLOAD.DRAG_HERE") }}</span
+        >&nbsp;
         <br />
-        <VcLink @click="toggleUploader">browse your files</VcLink>
+        <VcLink @click="toggleUploader">{{ t("COMPONENTS.MOLECULES.VC_FILE_UPLOAD.BROWSE") }}</VcLink>
       </div>
 
       <input
@@ -54,6 +55,7 @@
 import { getCurrentInstance, ref, unref } from "vue";
 import { useField } from "vee-validate";
 import { VcLoading, VcIcon, VcLink, VcHint } from "./../../";
+import { useI18n } from "vue-i18n";
 
 export interface Props {
   variant?: "gallery" | "file-upload";
@@ -76,6 +78,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
+const { t } = useI18n({ useScope: "global" });
+
 const instance = getCurrentInstance();
 // Prepare validation rules using required and rules props combination
 const internalRules = unref(props.rules) || "";

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

@@ -67,7 +67,8 @@
                           v-if="!hasValue"
                           class="tw-text-[#a5a5a5]"
                         >
-                          {{ placeholder }}
+                          <template v-if="placeholder">{{ placeholder }}</template>
+                          <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']">
@@ -258,6 +259,7 @@ import * as _ from "lodash-es";
 import { useIntersectionObserver } from "@vueuse/core";
 import { useFloating, UseFloatingReturn, offset, flip, shift, autoUpdate } from "@floating-ui/vue";
 import { VcLabel, VcContainer, VcHint, VcIcon } from "./../../";
+import { useI18n } from "vue-i18n";
 
 export type OptionProp<T> = ((option: T) => string) | string | undefined;
 
@@ -485,7 +487,6 @@ const props = withDefaults(
     name: "Field",
     emitValue: true,
     mapOptions: true,
-    placeholder: "Click to select...",
     options: () => [],
   }
 );
@@ -506,6 +507,8 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
+const { t } = useI18n({ useScope: "global" });
+
 const { modelValue, options } = toRefs(props);
 
 const isOpened = ref(false);
@@ -870,7 +873,7 @@ async function onSearch(value: string) {
     }
   } else {
     optionsTemp.value = optionsList.value.filter((x) => {
-      return x[getOptionLabel.value(x)].toLowerCase().includes(filterString.value.toLowerCase());
+      return x[props.optionLabel as string].toLowerCase().includes(filterString.value.toLowerCase());
     });
   }
 }

package/ui/components/organisms/index.ts

@@ -0,0 +1,9 @@
+export * from "./vc-app";
+export * from "./vc-blade";
+export * from "./vc-dynamic-property";
+export * from "./vc-gallery";
+export * from "./vc-login-form";
+export * from "./vc-popup";
+export * from "./vc-table";
+export * from "./vc-notification-dropdown";
+export * from "./vc-notification-template";

package/ui/components/organisms/vc-app/_internal/vc-app-bar/vc-app-bar.vue

@@ -42,7 +42,7 @@
           icon="fas fa-chevron-left"
           size="s"
         ></VcIcon>
-        <span class="tw-ml-2 tw-text-lg">{{ $t("Back") }}</span>
+        <span class="tw-ml-2 tw-text-lg">{{ t("COMPONENTS.ORGANISMS.VC_APP.INTERNAL.VC_APP_BAR.BACK") }}</span>
       </VcLink>
     </template>
 
@@ -98,6 +98,7 @@
 </template>
 
 <script lang="ts" setup>
+import { useI18n } from "vue-i18n";
 import { VcIcon, VcLink } from "./../../../../";
 import { IBladeToolbar } from "./../../../../../../core/types";
 import { IBladeRef } from "./../../../../../../shared";
@@ -120,6 +121,8 @@ export interface Emits {
 defineProps<Props>();
 
 defineEmits<Emits>();
+
+const { t } = useI18n({ useScope: "global" });
 </script>
 
 <style lang="scss">

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

@@ -45,7 +45,7 @@
           text
           class="tw-shrink-0 tw-opacity-80 tw-text-white hover:!tw-opacity-100 hover:!tw-text-white"
           @click="open()"
-          >{{ $t("COMPONENTS.ORGANISMS.VC_BLADE.SEE_DETAILS") }}</VcButton
+          >{{ t("COMPONENTS.ORGANISMS.VC_BLADE.SEE_DETAILS") }}</VcButton
         >
       </div>
     </template>

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

@@ -381,7 +381,7 @@ const props = withDefaults(defineProps<Props>(), {
   culture: "en-US",
 });
 
-const { locale, te, t } = useI18n();
+const { locale, te, t } = useI18n({ useScope: "global" });
 
 const rules: IValidationRules = {};
 const items = ref<PropertyItem[]>([]);

package/ui/components/organisms/vc-gallery/_internal/vc-gallery-item/vc-gallery-item.vue

@@ -38,7 +38,7 @@
             class="vc-gallery-item__button-icon"
             icon="fas fa-eye"
           ></VcIcon>
-          <div class="tw-mt-2">Fullscreen</div>
+          <div class="tw-mt-2">{{ t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.FULLSCREEN") }}</div>
         </div>
         <div
           v-if="!readonly && actions && actions.edit"
@@ -49,7 +49,7 @@
             class="vc-gallery-item__button-icon"
             icon="fas fa-pen"
           ></VcIcon>
-          <div class="tw-mt-2">Edit</div>
+          <div class="tw-mt-2">{{ $t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.EDIT") }}</div>
         </div>
         <div
           v-if="!readonly && actions && actions.remove"
@@ -60,7 +60,7 @@
             class="vc-gallery-item__button-icon"
             icon="fas fa-trash"
           ></VcIcon>
-          <div class="tw-mt-2">Delete</div>
+          <div class="tw-mt-2">{{ $t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.DELETE") }}</div>
         </div>
       </div>
     </div>
@@ -72,6 +72,7 @@ import { ref } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
 import { IImage } from "./../../../../../../core/types";
 import { VcImage, VcIcon } from "./../../../../";
+import { useI18n } from "vue-i18n";
 
 export interface Props {
   image: IImage;
@@ -99,7 +100,7 @@ withDefaults(defineProps<Props>(), {
 });
 
 defineEmits(["preview", "edit", "remove"]);
-
+const { t } = useI18n({ useScope: "global" });
 const hover = ref(false);
 
 function onClose() {

package/ui/components/organisms/vc-gallery/_internal/vc-gallery-preview/vc-gallery-preview.vue

@@ -6,7 +6,9 @@
     <template #title>
       <div>
         <span>{{ currentImage.name }} (</span>
-        <VcLink @click="copyLink(currentImage.url)">copy image link</VcLink>
+        <VcLink @click="copyLink(currentImage.url)">{{
+          t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_PREVIEW.COPY_IMAGE_LINK")
+        }}</VcLink>
         <span>)</span>
       </div>
     </template>
@@ -63,6 +65,7 @@
 import { computed, ref, ComputedRef } from "vue";
 import { VcPopup, VcLink, VcIcon, VcImage } from "../../../../";
 import { IImage } from "./../../../../../../core/types";
+import { useI18n } from "vue-i18n";
 
 export interface Props {
   images?: IImage[];
@@ -79,7 +82,7 @@ const props = withDefaults(defineProps<Props>(), {
   images: () => [],
   index: 0,
 });
-
+const { t } = useI18n({ useScope: "global" });
 const localIndex = ref(props.index);
 const currentImage = computed(() => props.images[localIndex.value]);
 

package/ui/components/organisms/vc-gallery/vc-gallery.vue

@@ -53,7 +53,7 @@
       v-else
       class="tw-flex tw-justify-center tw-p-5"
     >
-      <VcHint>Gallery is empty</VcHint>
+      <VcHint>{{ t("COMPONENTS.ORGANISMS.VC_GALLERY.GALLERY_IS_EMPTY") }}</VcHint>
     </div>
   </div>
 </template>
@@ -65,6 +65,7 @@ import { VcLabel, VcFileUpload, VcHint } from "./../../";
 import VcGalleryItem from "./_internal/vc-gallery-item/vc-gallery-item.vue";
 import VcGalleryPreview from "./_internal/vc-gallery-preview/vc-gallery-preview.vue";
 import { usePopup } from "./../../../../shared/components/popup-handler/composables/usePopup";
+import { useI18n } from "vue-i18n";
 
 export interface Props {
   images?: IImage[];
@@ -109,7 +110,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<Emits>();
-
+const { t } = useI18n({ useScope: "global" });
 const previewImageIndex = ref<number>();
 
 const defaultImages = ref<IImage[]>([]);

package/ui/components/organisms/vc-notification-dropdown/_internal/notification/notification.vue

@@ -29,7 +29,7 @@
 <script lang="ts" setup>
 import { computed, h } from "vue";
 import moment from "moment";
-import { PushNotification } from "./../../../../../../core/api";
+import { PushNotification } from "./../../../../../../core/api/platform";
 import { VcRow, VcNotificationTemplate } from "./../../../../";
 import { NotificationTemplateConstructor } from "./../../../../../../core/types";