@vc-shell/framework 1.0.69 → 1.0.71

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

@@ -14,8 +14,8 @@
   >
     <!-- Init blade header -->
     <VcBladeHeader
-      class="tw-shrink-0"
       v-if="!$isMobile.value || closable"
+      class="tw-shrink-0"
       :maximized="maximized"
       :expandable="isExpandable"
       :closable="closable"
@@ -27,24 +27,24 @@
       @collapse="$emit('collapse')"
     >
       <template
-        v-slot:actions
         v-if="$slots['actions']"
+        #actions
       >
         <slot name="actions"></slot>
       </template>
     </VcBladeHeader>
 
-    <template v-if="$slots['error']">
+    <template v-if="error">
       <div class="tw-text-white tw-p-2 tw-flex tw-flex-row tw-items-center tw-bg-[color:var(--blade-color-error)]">
         <VcIcon
           size="s"
           icon="fas fa-exclamation-triangle"
         />
-        <div class="tw-line-clamp-1 tw-w-full tw-mx-2"><slot name="error"></slot></div>
+        <div class="tw-line-clamp-1 tw-w-full tw-mx-2">{{ error }}</div>
         <VcButton
-          @click="toggleErrorPopup"
-          variant="onlytext"
+          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
         >
       </div>
@@ -55,43 +55,18 @@
       class="tw-shrink-0"
       :items="toolbarItems"
     ></VcBladeToolbar>
-
-    <VcPopup
-      variant="medium"
-      :title="$t('COMPONENTS.ORGANISMS.VC_BLADE.ERROR_POPUP.TITLE')"
-      @close="toggleErrorPopup"
-      v-if="isErrorPopupActive"
-    >
-      <div class="tw-p-5 tw-flex tw-flex-row tw-items-center tw-h-full">
-        <VcIcon
-          icon="fas fa-exclamation-circle"
-          size="xxl"
-          class="tw-text-[color:var(--blade-color-error)] tw-mr-3"
-        ></VcIcon>
-        <VcContainer no-padding>
-          <slot name="error"></slot>
-        </VcContainer>
-      </div>
-    </VcPopup>
-
     <slot></slot>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed, ref } from "vue";
-import { IBladeToolbar } from "../../../../core/types";
-import { IBladeContainer } from "./../../../../shared";
-
-export default defineComponent({
-  inheritAttrs: false,
-});
-</script>
-
 <script lang="ts" setup>
+import { computed, Ref, reactive, useAttrs, toRefs } from "vue";
+import { IBladeToolbar } from "../../../../core/types";
+import { IBladeContainer, usePopup } from "./../../../../shared";
+import { useI18n } from "vue-i18n";
 import VcBladeHeader from "./_internal/vc-blade-header/vc-blade-header.vue";
 import VcBladeToolbar from "./_internal/vc-blade-toolbar/vc-blade-toolbar.vue";
-import { VcButton, VcIcon, VcPopup, VcContainer } from "./../../";
+import { VcButton, VcIcon, VcPopup } from "./../../";
 
 export interface Props {
   icon?: string;
@@ -99,13 +74,9 @@ export interface Props {
   subtitle?: string;
   width?: number | string;
   expanded?: boolean;
-  maximized?: boolean;
   expandable?: boolean;
   closable?: boolean;
   toolbarItems?: IBladeToolbar[];
-  onClose?: () => void;
-  blades?: IBladeContainer[];
-  // error?: string;
 }
 
 export interface Emits {
@@ -114,6 +85,10 @@ export interface Emits {
   (event: "collapse"): void;
 }
 
+defineOptions({
+  inheritAttrs: false,
+});
+
 const props = withDefaults(defineProps<Props>(), {
   width: "30%",
   closable: true,
@@ -122,19 +97,29 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 defineEmits<Emits>();
-
-const isErrorPopupActive = ref(false);
+const attrs = useAttrs();
+const { blades, maximized, error }: { blades?: Ref<IBladeContainer[]>; maximized?: Ref<boolean>; error?: Ref<string> } =
+  toRefs(reactive(attrs));
+const { t } = useI18n({ useScope: "global" });
+
+const { open } = usePopup({
+  component: VcPopup,
+  props: {
+    type: "error",
+    variant: "small",
+    title: t("COMPONENTS.ORGANISMS.VC_BLADE.ERROR_POPUP.TITLE"),
+  },
+  slots: {
+    default: computed(() => error.value),
+  },
+});
 
 const isExpandable = computed(() => {
   if (!props.expandable) {
     return props.expandable;
   }
-  return props.blades?.length !== 0;
+  return blades?.value && blades.value.length !== 0;
 });
-
-function toggleErrorPopup() {
-  isErrorPopupActive.value = !isErrorPopupActive.value;
-}
 </script>
 
 <style lang="scss">

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

@@ -4,7 +4,7 @@
     v-slot="{ errorMessage, handleChange, errors }"
     :label="handleDisplayName || property.displayName"
     :name="property.displayName || property.name"
-    :modelValue="getter(property, true)"
+    :model-value="getter(property, true)"
     :rules="rules"
   >
     <VcSelect
@@ -12,13 +12,7 @@
       :error="!!errors.length"
       :error-message="errorMessage"
       :label="handleDisplayName || property.displayName"
-      :modelValue="getter(property, true)"
-      @update:modelValue="
-        (e) => {
-          handleChange(e);
-          setter(property, e, items);
-        }
-      "
+      :model-value="getter(property, true)"
       :required="property.required || property.isRequired"
       :placeholder="handleDisplayName || property.defaultValue"
       :options="items"
@@ -26,6 +20,12 @@
       :option-label="handleDisplayProperty"
       :disabled="disabled"
       searchable
+      @update:model-value="
+        (e) => {
+          handleChange(e);
+          setter(property, e, items);
+        }
+      "
       @search="onSearch"
       @close="onClose"
     ></VcSelect>
@@ -37,7 +37,7 @@
     "
     v-slot="{ errorMessage, handleChange, errors }"
     :name="property.name"
-    :modelValue="property.values"
+    :model-value="property.values"
     :label="handleDisplayName"
     :rules="rules"
   >
@@ -46,13 +46,7 @@
       :error="!!errors.length"
       :error-message="errorMessage"
       :label="handleDisplayName"
-      :modelValue="property.values"
-      @update:modelValue="
-        (e) => {
-          handleChange(e);
-          setter(property, e);
-        }
-      "
+      :model-value="property.values"
       :required="property.required || property.isRequired"
       placeholder="Add value"
       :disabled="disabled"
@@ -62,6 +56,12 @@
       :display-value="displayedValueLabel.value"
       :multiple="true"
       :emit-value="false"
+      @update:model-value="
+        (e) => {
+          handleChange(e);
+          setter(property, e);
+        }
+      "
     ></VcSelect>
   </Field>
 
@@ -72,7 +72,7 @@
     v-slot="{ errorMessage, handleChange, errors }"
     :name="property.name"
     :label="handleDisplayName"
-    :modelValue="property.values"
+    :model-value="property.values"
     :rules="rules"
   >
     <VcSelect
@@ -80,13 +80,7 @@
       :error="!!errors.length"
       :error-message="errorMessage"
       :label="handleDisplayName"
-      :modelValue="property.values"
-      @update:modelValue="
-        (e) => {
-          handleChange(e);
-          setter(property, e, items);
-        }
-      "
+      :model-value="property.values"
       :required="property.required || property.isRequired"
       placeholder="Add value"
       :disabled="disabled"
@@ -95,10 +89,16 @@
       option-value="id"
       :display-label="displayedValueLabel.label"
       :display-value="displayedValueLabel.value"
-      @search="onSearch"
-      @close="onClose"
       :multiple="property.multivalue"
       :emit-value="false"
+      @update:model-value="
+        (e) => {
+          handleChange(e);
+          setter(property, e, items);
+        }
+      "
+      @search="onSearch"
+      @close="onClose"
     ></VcSelect>
   </Field>
 
@@ -107,7 +107,7 @@
     v-slot="{ errorMessage, handleChange, errors }"
     :name="property.displayName || property.name"
     :label="handleDisplayName || property.displayName"
-    :modelValue="getter(property)"
+    :model-value="getter(property)"
     :rules="rules"
   >
     <VcInput
@@ -115,17 +115,17 @@
       :error="!!errors.length"
       :error-message="errorMessage"
       :label="handleDisplayName || property.displayName"
-      :modelValue="(getter(property) as string | number | Date)"
-      @update:modelValue="
+      :model-value="(getter(property) as string | number | Date)"
+      clearable
+      :required="property.required || property.isRequired"
+      :placeholder="handleDisplayName || 'Add value'"
+      :disabled="disabled"
+      @update:model-value="
         (e) => {
           handleChange(e);
           setter(property, e as Record<string, unknown> | string | number | boolean);
         }
       "
-      clearable
-      :required="property.required || property.isRequired"
-      :placeholder="handleDisplayName || 'Add value'"
-      :disabled="disabled"
     ></VcInput>
   </Field>
 
@@ -133,20 +133,14 @@
     v-else-if="property.valueType === 'Number' && property.multivalue"
     v-slot="{ errorMessage, handleChange, errors }"
     :name="property.name"
-    :modelValue="property.values"
+    :model-value="property.values"
     :label="handleDisplayName"
     :rules="rules"
   >
     <VcSelect
       v-bind="$attrs"
       :label="handleDisplayName"
-      :modelValue="property.values"
-      @update:modelValue="
-        (e) => {
-          handleChange(e);
-          setter(property, e);
-        }
-      "
+      :model-value="property.values"
       type="number"
       :required="property.required || property.isRequired"
       placeholder="Add value"
@@ -159,6 +153,12 @@
       :display-label="displayedValueLabel.label"
       :display-value="displayedValueLabel.value"
       multiple
+      @update:model-value="
+        (e) => {
+          handleChange(e);
+          setter(property, e);
+        }
+      "
     ></VcSelect>
   </Field>
 
@@ -167,7 +167,7 @@
     v-slot="{ errorMessage, handleChange, errors }"
     :name="property.name"
     :label="handleDisplayName"
-    :modelValue="getter(property)"
+    :model-value="getter(property)"
     :rules="rules"
   >
     <VcInput
@@ -175,18 +175,18 @@
       :error="!!errors.length"
       :error-message="errorMessage"
       :label="handleDisplayName"
-      :modelValue="(getter(property) as string | number | Date)"
-      @update:modelValue="
-        (e) => {
-          handleChange(e);
-          setter(property, e as Record<string, unknown> | string | number | boolean);
-        }
-      "
+      :model-value="(getter(property) as string | number | Date)"
       clearable
       type="number"
       :required="property.required || property.isRequired"
       :placeholder="handleDisplayName || property.defaultValue"
       :disabled="disabled"
+      @update:model-value="
+        (e) => {
+          handleChange(e);
+          setter(property, e as Record<string, unknown> | string | number | boolean);
+        }
+      "
     ></VcInput>
   </Field>
 
@@ -195,7 +195,7 @@
     v-slot="{ errorMessage, handleChange, errors }"
     :name="property.name"
     :label="handleDisplayName"
-    :modelValue="getter(property)"
+    :model-value="getter(property)"
     :rules="rules"
   >
     <VcInput
@@ -203,19 +203,19 @@
       :error="!!errors.length"
       :error-message="errorMessage"
       :label="handleDisplayName"
-      :modelValue="(getter(property) as string | number | Date)"
-      @update:modelValue="
-        (e) => {
-          handleChange(e);
-          setter(property, e as Record<string, unknown> | string | number | boolean);
-        }
-      "
+      :model-value="(getter(property) as string | number | Date)"
       clearable
       type="number"
       step="1"
       :required="property.required || property.isRequired"
       :placeholder="handleDisplayName || property.defaultValue"
       :disabled="disabled"
+      @update:model-value="
+        (e) => {
+          handleChange(e);
+          setter(property, e as Record<string, unknown> | string | number | boolean);
+        }
+      "
     ></VcInput>
   </Field>
 
@@ -224,7 +224,7 @@
     v-slot="{ errorMessage, handleChange, errors }"
     :name="property.name"
     :label="handleDisplayName"
-    :modelValue="getter(property)"
+    :model-value="getter(property)"
     :rules="rules"
   >
     <VcInput
@@ -232,17 +232,17 @@
       :error="!!errors.length"
       :error-message="errorMessage"
       :label="handleDisplayName"
-      :modelValue="(getter(property) as string | number | Date)"
-      @update:modelValue="
+      :model-value="(getter(property) as string | number | Date)"
+      type="datetime-local"
+      :required="property.required || property.isRequired"
+      :placeholder="handleDisplayName || property.defaultValue"
+      :disabled="disabled"
+      @update:model-value="
         (e) => {
           handleChange(e);
           setter(property, e as Record<string, unknown> | string | number | boolean);
         }
       "
-      type="datetime-local"
-      :required="property.required || property.isRequired"
-      :placeholder="handleDisplayName || property.defaultValue"
-      :disabled="disabled"
     ></VcInput>
   </Field>
 
@@ -251,23 +251,23 @@
     v-slot="{ errorMessage, handleChange }"
     :name="property.name"
     :label="handleDisplayName"
-    :modelValue="getter(property)"
+    :model-value="getter(property)"
     :rules="rules"
   >
     <VcTextarea
       v-bind="$attrs"
       :error-message="errorMessage"
       :label="handleDisplayName"
-      :modelValue="getter(property) as string"
-      @update:modelValue="
+      :model-value="getter(property) as string"
+      :required="property.required || property.isRequired"
+      :placeholder="handleDisplayName || property.defaultValue"
+      :disabled="disabled"
+      @update:model-value="
         (e) => {
           handleChange(e);
           setter(property, e);
         }
       "
-      :required="property.required || property.isRequired"
-      :placeholder="handleDisplayName || property.defaultValue"
-      :disabled="disabled"
     ></VcTextarea>
   </Field>
 
@@ -276,22 +276,22 @@
     v-slot="{ errorMessage, handleChange }"
     :name="property.displayName || property.name"
     :label="handleDisplayName || property.displayName"
-    :modelValue="getter(property)"
+    :model-value="getter(property)"
     :rules="rules"
   >
     <VcCheckbox
       v-bind="$attrs"
       :error-message="errorMessage"
-      :modelValue="getter(property) as boolean"
-      @update:modelValue="
+      :model-value="getter(property) as boolean"
+      :required="property.required || property.isRequired"
+      :disabled="disabled"
+      :name="property.displayName || property.name"
+      @update:model-value="
         (e) => {
           handleChange(e);
           setter(property, e);
         }
       "
-      :required="property.required || property.isRequired"
-      :disabled="disabled"
-      :name="property.displayName || property.name"
     >
       {{ handleDisplayName || property.displayName }}
     </VcCheckbox>
@@ -302,24 +302,24 @@
     v-slot="{ errorMessage, handleChange }"
     :name="property.displayName || property.name"
     :label="handleDisplayName || property.displayName"
-    :modelValue="getter(property)"
+    :model-value="getter(property)"
     :rules="rules"
   >
     <VcCodeEditor
       v-bind="$attrs"
       :label="handleDisplayName || property.displayName"
-      :modelValue="(getter(property) as string | number | Date)"
-      @update:modelValue="
-        (e) => {
-          handleChange(e);
-          setter(property, e as Record<string, unknown> | string | number | boolean);
-        }
-      "
+      :model-value="(getter(property) as string | number | Date)"
       :required="property.required || property.isRequired"
       :placeholder="handleDisplayName || 'Add value'"
       :disabled="disabled"
       :name="property.displayName || property.name"
       :error-message="errorMessage"
+      @update:model-value="
+        (e) => {
+          handleChange(e);
+          setter(property, e as Record<string, unknown> | string | number | boolean);
+        }
+      "
     >
     </VcCodeEditor>
   </Field>

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

@@ -1,12 +1,12 @@
 <template>
   <div
+    v-on-click-outside="onClose"
     class="vc-gallery-item"
     :class="{
       'vc-gallery-item_readonly': readonly,
       'vc-gallery-item_hover': hover,
     }"
     @tap.stop="hover = !hover"
-    v-click-outside="onClose"
   >
     <VcImage
       aspect="1x1"
@@ -30,9 +30,9 @@
       </div>
       <div class="tw-flex tw-grow tw-basis-0 tw-items-center tw-justify-around">
         <div
+          v-if="actions && actions.preview"
           class="vc-gallery-item__button"
           @click="$emit('preview', image)"
-          v-if="actions && actions.preview"
         >
           <VcIcon
             class="vc-gallery-item__button-icon"
@@ -69,7 +69,7 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
-import { clickOutside as vClickOutside } from "./../../../../../../core/directives";
+import { vOnClickOutside } from "@vueuse/components";
 import { IImage } from "./../../../../../../core/types";
 import { VcImage, VcIcon } from "./../../../../";
 

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

@@ -3,7 +3,7 @@
     :title="currentImage.title"
     @close="$emit('close')"
   >
-    <template v-slot:title>
+    <template #title>
       <div>
         <span>{{ currentImage.name }} (</span>
         <VcLink @click="copyLink(currentImage.url)">copy image link</VcLink>
@@ -60,15 +60,21 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from "vue";
+import { computed, ref, ComputedRef } from "vue";
 import { VcPopup, VcLink, VcIcon, VcImage } from "../../../../";
 import { IImage } from "./../../../../../../core/types";
 
 export interface Props {
   images?: IImage[];
-  index: number;
+  index: number | ComputedRef<number>;
 }
 
+export interface Emits {
+  (event: "close"): void;
+}
+
+defineEmits<Emits>();
+
 const props = withDefaults(defineProps<Props>(), {
   images: () => [],
   index: 0,