@vc-shell/framework 1.0.232 → 1.0.234

package/shared/modules/dynamic/components/fields/StatusField.ts

@@ -1,16 +1,34 @@
 import { useI18n } from "vue-i18n";
-import { Component, ExtractPropTypes, computed, h, unref } from "vue";
+import { Component, ExtractPropTypes, computed, h, onMounted, ref, unref, watch } from "vue";
 import componentProps from "./props";
 import { StatusSchema } from "../../types";
 import { StatusField } from "../factories";
 import { VcIcon } from "../../../../../ui/components";
 import { unrefNested } from "../../helpers/unrefNested";
+import VcButton from "../../../../../ui/components/atoms/vc-button/vc-button.vue";
 
 export default {
   name: "StatusField",
   props: componentProps,
   setup(props: ExtractPropTypes<typeof componentProps> & { element: StatusSchema }) {
     const { t } = useI18n({ useScope: "global" });
+    const hasOverflow = ref(false);
+    const isExpanded = ref(false);
+    const contentRef = ref<HTMLElement | null>(null);
+
+    const toggle = () => {
+      isExpanded.value = !isExpanded.value;
+    };
+
+    const checkOverflow = () => {
+      if (contentRef.value) {
+        hasOverflow.value = contentRef.value.scrollHeight > 100;
+      }
+    };
+
+    onMounted(() => {
+      checkOverflow();
+    });
 
     return () => {
       const slotContent = computed(() => {
@@ -55,9 +73,27 @@ export default {
                     class: "tw-mr-3",
                   })
                 : undefined,
-              h("div", [
+              h("div", { class: "tw-flex tw-flex-col" }, [
                 h("div", { class: "tw-font-bold" }, computed(() => t(props.element.title ?? "")).value),
-                h("div", slotContent.value),
+                h(
+                  "div",
+                  {
+                    class: {
+                      "tw-overflow-hidden": true,
+                      "tw-max-h-[100px] tw-line-clamp-4": !isExpanded.value,
+                      "tw-max-h-[100%]": isExpanded.value,
+                    },
+                    ref: contentRef,
+                  },
+                  slotContent.value,
+                ),
+                hasOverflow.value
+                  ? h(VcButton, { text: true, class: "tw-self-end", onClick: toggle }, () =>
+                      isExpanded.value
+                        ? t("COMPONENTS.ATOMS.VC_STATUS.SHOW_LESS")
+                        : t("COMPONENTS.ATOMS.VC_STATUS.SHOW_MORE"),
+                    )
+                  : undefined,
               ]),
             ]);
           },

package/shared/modules/dynamic/pages/dynamic-blade-form.vue

@@ -41,24 +41,23 @@
             ></SchemaRender>
           </VcForm>
         </div>
-        <div
-          v-if="bladeWidgets && bladeWidgets.length"
-          class="item-details__widgets"
-        >
-          <div
-            v-for="(item, index) in bladeWidgets"
-            :key="index"
-          >
-            <component
-              :is="item"
-              :ref="(el: HTMLElement) => widgetsRefs.set({ component: item, el })"
-              v-model="bladeContext"
-              @click="setActiveWidget(item)"
-            ></component>
-          </div>
-        </div>
       </div>
     </VcContainer>
+
+    <template
+      v-if="bladeWidgets && bladeWidgets.length"
+      #widgets="{ isExpanded }"
+    >
+      <component
+        :is="item"
+        v-for="(item, index) in bladeWidgets"
+        :key="index"
+        :ref="(el: HTMLElement) => widgetsRefs.set({ component: item, el })"
+        v-model="bladeContext"
+        :is-expanded="isExpanded"
+        @click="setActiveWidget(item)"
+      ></component>
+    </template>
   </VcBlade>
 </template>
 
@@ -387,16 +386,12 @@ defineExpose({
     @apply tw-text-[#ff4a4a] tw-mr-3;
   }
 
-  .app_phone &__inner {
+  .vc-app_mobile &__inner {
     @apply tw-flex-col;
   }
 
-  .app_phone &__content {
+  .vc-app_mobile &__content {
     @apply tw-border-r-0 tw-border-b tw-border-solid tw-border-b-[#eaedf3] tw-overflow-visible;
   }
-
-  .app_phone &__widgets {
-    @apply tw-flex tw-flex-row;
-  }
 }
 </style>

package/shared/modules/dynamic/types/index.ts

@@ -156,7 +156,16 @@ export interface ListContentSchema {
   multiselect?: boolean;
   header?: boolean;
   footer?: boolean;
-  columns?: (Omit<ITableColumns, "visible"> & {
+  columns?: ((
+    | ITableColumns
+    | {
+        visible?:
+          | boolean
+          | {
+              method: string;
+            };
+      }
+  ) & {
     id: string;
     title: string;
     sortable?: boolean;
@@ -171,11 +180,6 @@ export interface ListContentSchema {
     onCellBlur?: {
       method: string;
     };
-    visible?:
-      | boolean
-      | {
-          method: string;
-        };
   })[];
   reorderableRows?: boolean;
   // TODO Add to documentation
@@ -762,6 +766,10 @@ export interface GallerySchema
    * @type {boolean}
    */
   hideAfterUpload?: boolean;
+  /**
+   * Custom gallery upload icon.
+   */
+  uploadIcon?: string;
 }
 
 /**

package/ui/components/atoms/vc-badge/vc-badge.stories.ts

@@ -5,10 +5,10 @@ export default {
   title: "atoms/VcBadge",
   component: VcBadge,
   args: {
-    default: "42",
+    content: "42",
   },
   argTypes: {
-    default: {
+    content: {
       control: "text",
     },
     active: {
@@ -38,7 +38,7 @@ export default {
 const Template: StoryFn<typeof VcBadge> = (args) => ({
   components: { VcBadge },
   setup: () => ({ args }),
-  template: `<VcBadge v-bind="args">{{args.default}}</VcBadge>`,
+  template: `<VcBadge v-bind="args"></VcBadge>`,
 });
 
 export const Basic = Template.bind({});

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

@@ -1,17 +1,28 @@
 <template>
   <div
-    class="tw-inline-block tw-rounded-[var(--badge-border-radius)] tw-py-1 tw-px-2 tw-text-base tw-font-normal tw-bg-[color:var(--badge-background-color)] tw-text-[color:var(--badge-text-color)] tw-border tw-border-solid tw-border-[color:var(--badge-border-color)] tw-transition tw-duration-200"
+    class="vc-badge"
     :class="{
-      'tw-bg-[color:var(--badge-background-color-active)] tw-text-[color:var(--badge-text-color-active)] tw-border-[color:var(--badge-border-color-active)]':
-        active,
-      'tw-cursor-pointer hover:tw-bg-[color:var(--badge-background-color-active)] hover:tw-text-[color:var(--badge-text-color-hover)] hover:tw-border-[color:var(--badge-border-color-hover)]':
-        clickable,
-      'cursor-not-allowed tw-bg-[color:var(--badge-background-color-disabled)] tw-text-[color:var(--badge-text-color-disabled)] tw-border-[color:var(--badge-border-color-disabled)] hover:tw-bg-[color:var(--badge-background-color-disabled)] hover:tw-text-[color:var(--badge-text-color-disabled)] hover:tw-border-[color:var(--badge-border-color-disabled)]':
-        disabled,
+      'vc-badge--small': size === 's',
+      'vc-badge--medium': size === 'm',
     }"
-    @click="onClick"
   >
-    <slot name="default"></slot>
+    <div class="tw-flex tw-relative">
+      <slot name="default"></slot>
+      <div
+        class="vc-badge__badge tw-absolute tw-inline-flex tw-justify-center tw-items-center tw-text-center tw-indent-0 tw-rounded-[var(--badge-border-radius)] tw-text-[13px] tw-leading-[13px] tw-font-normal tw-bg-[color:var(--badge-background-color)] tw-text-[color:var(--badge-text-color)] tw-border tw-border-solid tw-border-[color:var(--badge-border-color)] tw-transition tw-duration-200"
+        :class="{
+          'tw-bg-[color:var(--badge-background-color-active)] tw-text-[color:var(--badge-text-color-active)] tw-border-[color:var(--badge-border-color-active)]':
+            active,
+          'tw-cursor-pointer hover:tw-bg-[color:var(--badge-background-color-active)] hover:tw-text-[color:var(--badge-text-color-hover)] hover:tw-border-[color:var(--badge-border-color-hover)]':
+            clickable,
+          'cursor-not-allowed tw-bg-[color:var(--badge-background-color-disabled)] tw-text-[color:var(--badge-text-color-disabled)] tw-border-[color:var(--badge-border-color-disabled)] hover:tw-bg-[color:var(--badge-background-color-disabled)] hover:tw-text-[color:var(--badge-text-color-disabled)] hover:tw-border-[color:var(--badge-border-color-disabled)]':
+            disabled,
+        }"
+        @click="onClick"
+      >
+        {{ content }}
+      </div>
+    </div>
   </div>
 </template>
 
@@ -20,13 +31,17 @@ export interface Props {
   active?: boolean;
   disabled?: boolean;
   clickable?: boolean;
+  content?: string | number;
+  size?: "s" | "m";
 }
 
 export interface Emits {
   (event: "click"): void;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  size: "m",
+});
 
 const emit = defineEmits<Emits>();
 
@@ -62,5 +77,38 @@ function onClick(): void {
   --badge-border-color-hover: #8fb3cc;
   --badge-border-color-active: #8fb3cc;
   --badge-border-color-disabled: #b2cbdc;
+
+  --badge-width-small: 15px;
+  --badge-height-small: 15px;
+
+  --badge-width-medium: 25px;
+  --badge-height-medium: 25px;
+
+  --badge-padding-small: 2px 5px;
+  --badge-padding-medium: 4px 6px;
+
+  --badge-distance-bottom-small: calc(100% - 12px);
+  --badge-distance-left-small: calc(100% - 12px);
+
+  --badge-distance-bottom-medium: calc(100% - 20px);
+  --badge-distance-left-medium: calc(100% - 20px);
+}
+
+$sizes: small, medium;
+
+@each $size in $sizes {
+  .vc-badge {
+    &--#{$size} {
+      .vc-badge__badge {
+        width: var(--badge-width-#{$size});
+        height: var(--badge-height-#{$size});
+        min-width: var(--badge-width-#{$size});
+        min-height: var(--badge-height-#{$size});
+        padding: var(--badge-padding-#{$size});
+        bottom: var(--badge-distance-bottom-#{$size});
+        left: var(--badge-distance-left-#{$size});
+      }
+    }
+  }
 }
 </style>

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

@@ -54,7 +54,7 @@ export interface Emits {
   (event: "scroll:ptr"): void;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
 
 const emit = defineEmits<Emits>();
 
@@ -77,7 +77,7 @@ const scrollTop = () => {
 };
 
 function onTouchstart(e: TouchEvent | MouseEvent) {
-  if (refreshing.value) return;
+  if (refreshing.value || !props.usePtr) return;
   touching.value = true;
   touchstartY = "clientY" in e ? e.clientY : e.touches[0].clientY;
 }

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

@@ -21,7 +21,7 @@
         class="tw-absolute tw-w-full tw-h-full tw-flex tw-items-center tw-justify-center tw-text-[#83a3be]"
       >
         <VcIcon
-          icon="fas fa-image"
+          :icon="emptyIcon"
           size="xl"
         ></VcIcon>
       </div>
@@ -41,6 +41,7 @@ export interface Props {
   src?: string;
   size?: "auto" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
   background?: "cover" | "contain" | "auto";
+  emptyIcon?: string;
 }
 
 export interface Emits {
@@ -51,6 +52,7 @@ const props = withDefaults(defineProps<Props>(), {
   aspect: "1x1",
   size: "auto",
   background: "cover",
+  emptyIcon: "fas fa-image",
 });
 
 const emit = defineEmits<Emits>();

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

@@ -1,28 +1,47 @@
 <template>
-  <div
-    class="vc-widget tw-relative"
-    :class="{ 'vc-widget_disabled': disabled }"
-    @click="onClick"
+  <VcTooltip
+    :placement="$isDesktop.value ? 'bottom' : 'top'"
+    :offset="{
+      crossAxis: 0,
+      mainAxis: -10,
+    }"
   >
-    <VcIcon
-      v-if="icon"
-      class="vc-widget__icon"
-      :icon="icon"
-      size="xxl"
-    ></VcIcon>
     <div
-      v-if="title"
-      class="vc-widget__title"
+      class="vc-widget tw-relative tw-shrink-0 tw-py-4 tw-px-2"
+      :class="{
+        'tw-w-[80px]': isExpanded,
+        'vc-widget_disabled': disabled,
+        'tw-w-[36px]': !isExpanded,
+        'tw-w-[70px]': $isMobile.value,
+      }"
+      @click="onClick"
     >
-      {{ title }}
+      <VcBadge
+        :content="value"
+        :size="isExpanded ? 'm' : 's'"
+      >
+        <div class="tw-flex tw-flex-col tw-items-center tw-justify-center">
+          <VcIcon
+            v-if="icon"
+            class="vc-widget__icon"
+            :icon="icon"
+            :size="isExpanded ? 'xxl' : 'l'"
+          ></VcIcon>
+        </div>
+      </VcBadge>
+      <div class="tw-truncate tw-w-full">
+        <div
+          v-if="title && isExpanded"
+          class="vc-widget__title tw-truncate"
+        >
+          {{ title }}
+        </div>
+      </div>
     </div>
-    <div
-      v-if="value !== undefined"
-      class="vc-widget__value"
-    >
-      {{ value }}
-    </div>
-  </div>
+    <template #tooltip>
+      {{ title }}
+    </template>
+  </VcTooltip>
 </template>
 
 <script lang="ts" setup>
@@ -32,6 +51,7 @@ export interface Props {
   title?: string;
   value?: string | number;
   disabled?: boolean;
+  isExpanded?: boolean;
 }
 
 export interface Emits {
@@ -51,7 +71,7 @@ function onClick() {
 
 <style lang="scss">
 .vc-widget {
-  @apply tw-flex tw-w-[100px] tw-overflow-hidden tw-p-5
+  @apply tw-flex  tw-overflow-hidden
     tw-box-border tw-flex-col tw-items-center
     tw-justify-center tw-border-b tw-border-solid
     tw-border-b-[#eaedf3] tw-cursor-pointer tw-bg-white
@@ -70,7 +90,7 @@ function onClick() {
   }
 
   &__title {
-    @apply tw-font-medium tw-text-sm tw-text-[#333333] tw-mt-3 tw-mb-1 tw-mx-0 tw-text-center;
+    @apply tw-font-medium tw-text-sm tw-text-[#333333] tw-mt-2 tw-mx-0 tw-text-center;
   }
 
   &_disabled &__title {

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

@@ -168,7 +168,11 @@ function onTextChange() {
   }
 
   if (quill.value.getText().trim() !== props.modelValue?.trim()) {
-    emit("update:modelValue", quill.value.root.innerHTML);
+    if (quill.value.root.innerHTML === "<p><br></p>") {
+      emit("update:modelValue", "");
+    } else {
+      emit("update:modelValue", quill.value.root.innerHTML);
+    }
   }
 }
 </script>

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

@@ -8,7 +8,7 @@
     <template v-if="!$isMobile.value || quantity === 0">
       <!-- Logo -->
       <img
-        class="tw-h-1/2 tw-cursor-pointer tw-mx-3"
+        class="tw-h-1/2 tw-cursor-pointer tw-mx-4"
         alt="logo"
         :src="logo"
         @click="$emit('logo:click')"

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/vc-app-menu-link.vue

@@ -3,9 +3,9 @@
     class="vc-app-menu-item"
     :class="[
       {
-        'vc-app-menu-item_active': isActive(url ?? '') && !children?.length,
+        'vc-app-menu-item_active': isMenuItemActive,
         'vc-app-menu-item_no-hover': !children?.length,
-        'vc-app-menu-item_child-opened': isOpened,
+        'vc-app-menu-item_child-opened': expand && isOpened,
       },
     ]"
     @click="onMenuItemClick"
@@ -28,7 +28,10 @@
         size="m"
       />
     </div>
-    <div class="vc-app-menu-item__title tw-capitalize">
+    <div
+      v-if="expand"
+      class="vc-app-menu-item__title tw-capitalize"
+    >
       {{ title }}
       <VcIcon
         v-if="!!children?.length || false"
@@ -40,7 +43,7 @@
   </div>
   <!-- Nested menu items -->
   <div
-    v-show="isOpened"
+    v-show="isOpened && expand"
     class="vc-app-menu-item__child"
   >
     <template
@@ -69,7 +72,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import { MenuItem } from "../../../../../../../../../core/types";
 import { VcIcon } from "./../../../../../../../";
 import { useRoute } from "vue-router";
@@ -80,6 +83,7 @@ export interface Props {
   icon: string;
   title?: string;
   url?: string;
+  expand?: boolean;
 }
 
 export interface Emits {
@@ -96,6 +100,12 @@ const isOpened = ref(false);
 const route = useRoute();
 const params = Object.fromEntries(Object.entries(route.params).filter(([key]) => key !== "pathMatch"));
 
+const isMenuItemActive = computed(
+  () =>
+    (isActive(props.url ?? "") && !props.children?.length) ||
+    (!props.expand && isOpened.value && props.children?.some((x) => isActive(x.url ?? ""))),
+);
+
 watch(
   () => route.path,
   () => {
@@ -128,7 +138,9 @@ const isActive = (url: string) => {
     }
 
     return active;
-  } else return false;
+  } else {
+    return false;
+  }
 };
 </script>
 
@@ -182,10 +194,9 @@ const isActive = (url: string) => {
   }
 
   &__icon {
-    @apply tw-w-[var(--app-menu-item-icon-width)]
-    tw-text-[color:var(--app-menu-item-icon-color)]
+    @apply tw-text-[color:var(--app-menu-item-icon-color)]
     tw-overflow-hidden tw-flex
-    tw-justify-center tw-shrink-0  tw-transition-[color]  tw-duration-200;
+    tw-justify-center tw-shrink-0 tw-transition-[color] tw-duration-200 tw-pr-[7px];
   }
 
   &_active &__icon {
@@ -196,7 +207,7 @@ const isActive = (url: string) => {
     @apply tw-truncate
     tw-text-lg
     tw-font-medium
-    tw-px-2
+    tw-pr-2
     tw-text-[color:var(--app-menu-item-title-color)]
     [transition:color_0.2s_ease]
     tw-opacity-100 tw-w-full tw-flex tw-justify-between tw-items-center;

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/vc-app-menu-item.vue

@@ -11,6 +11,7 @@
           :icon="icon ?? ''"
           :title="title ?? ''"
           :url="url"
+          :expand="expand"
           @on-click="$emit('click')"
         />
       </router-link>
@@ -22,6 +23,7 @@
         :sticky="sticky"
         :icon="icon ?? ''"
         :title="title ?? ''"
+        :expand="expand"
         @on-click="$emit('click', $event)"
       />
     </template>
@@ -39,6 +41,7 @@ export interface Props {
   icon?: string;
   title?: string;
   children?: MenuItem[];
+  expand?: boolean;
 }
 
 export interface Emits {