@vc-shell/framework 1.0.222 → 1.0.224

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

@@ -37,7 +37,7 @@
               v-model="item"
               :ui-schema="form.children"
               :context="bladeContext"
-              :current-locale="scope?.multilanguage?.currentLocale"
+              :current-locale="toValue(unreffedScope)?.multilanguage?.currentLocale"
             ></SchemaRender>
           </VcForm>
         </div>
@@ -158,6 +158,7 @@ const isReady = ref(false);
 const activeWidgetExposed = ref<CoreBladeExposed>();
 const isBladeEditable = computed(() => !toValue("disabled" in toValue(scope || {}) && toValue(scope || {}).disabled));
 const settings = computed(() => props.model?.settings);
+const unreffedScope = reactiveComputed(() => toValue(scope) ?? {});
 
 const { moduleNotifications, markAsRead } = useNotifications(settings.value?.pushNotificationType);
 
@@ -220,24 +221,29 @@ const bladeStatus = computed(() => {
 });
 
 const bladeMultilanguage = reactiveComputed(() => {
-  if (scope && toValue(scope) && "multilanguage" in toValue(scope) && toValue(scope).multilanguage) {
+  if (
+    scope &&
+    toValue(unreffedScope) &&
+    "multilanguage" in toValue(unreffedScope) &&
+    toValue(unreffedScope).multilanguage
+  ) {
     return {
       component: () => {
         return h(VcSelect as Component, {
           name: "currentLocale",
-          modelValue: toValue(scope).multilanguage?.currentLocale,
-          options: toValue(scope).multilanguage?.localesOptions,
+          modelValue: toValue(unreffedScope).multilanguage?.currentLocale,
+          options: toValue(unreffedScope).multilanguage?.localesOptions,
           optionValue: "value",
           optionLabel: "label",
-          disabled: "disabled" in toValue(scope) && toValue(scope).disabled,
+          disabled: "disabled" in toValue(unreffedScope) && toValue(unreffedScope).disabled,
           required: true,
           clearable: false,
           "onUpdate:modelValue": (e: string) => {
-            toValue(scope).multilanguage?.setLocale(e);
+            toValue(unreffedScope).multilanguage?.setLocale(e);
           },
         });
       },
-      currentLocale: toValue(scope).multilanguage?.currentLocale,
+      currentLocale: toValue(unreffedScope).multilanguage?.currentLocale,
     };
   }
 
@@ -304,12 +310,11 @@ const toolbarComputed =
               emit("close:blade");
             }
           },
-          disabled: computed(() => toValue(scope)?.disabled),
+          disabled: computed(() => toValue(toValue(unreffedScope)?.disabled)),
         },
       },
-      customToolbarConfig: toValue(scope)?.toolbarOverrides,
+      customToolbarConfig: toValue(unreffedScope)?.toolbarOverrides,
       context: bladeContext.value,
-      scope,
     })) ??
   [];
 
@@ -363,7 +368,7 @@ provide("isBladeEditable", isBladeEditable);
 defineExpose({
   title: bladeTitle ?? "",
   updateActiveWidgetCount,
-  ...toRefs(scope?.value ?? {}),
+  ...toRefs(toValue(unreffedScope) ?? {}),
   settings: toValue(settings),
 });
 </script>

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

@@ -10,7 +10,7 @@
     :class="{
       'tw-flex tw-flex-auto': isWidgetView,
     }"
-    :modified="unref(scope)?.modified"
+    :modified="unreffedScope?.modified"
     @close="$emit('close:blade')"
     @expand="$emit('expand:blade')"
     @collapse="$emit('collapse:blade')"
@@ -34,7 +34,7 @@
           'tw-p-4',
         ]"
       >
-        <VcBreadcrumbs :items="scope?.breadcrumbs" />
+        <VcBreadcrumbs :items="toValue(scope?.breadcrumbs)" />
       </div>
       <VcTable
         class="tw-grow tw-basis-0"
@@ -63,7 +63,6 @@
         @pagination-click="onPaginationClick"
         @selection-changed="onSelectionChanged"
         @header-click="onHeaderClick"
-        @load:change="onSearchList"
         @scroll:ptr="reload"
         @search:change="onSearchList"
         @row:reorder="sortRows"
@@ -129,6 +128,7 @@
           <component
             :is="component"
             :context="itemData"
+            :blade-context="bladeContext"
           />
         </template>
 
@@ -141,6 +141,7 @@
           <component
             :is="tableTemplates.mobileView"
             :context="itemData"
+            :blade-context="bladeContext"
           ></component>
         </template>
       </VcTable>
@@ -163,7 +164,6 @@ import {
   toRefs,
   provide,
   isRef,
-  onMounted,
 } from "vue";
 import { useI18n } from "vue-i18n";
 import { DynamicGridSchema, ListContentSchema, SettingsSchema } from "../types";
@@ -175,7 +175,7 @@ import { notification, useBladeNavigation, usePopup } from "../../../components"
 import { ListBaseBladeScope, ListBladeContext, UseList } from "../factories/types";
 import { IParentCallArgs } from "../../../index";
 import * as _ from "lodash-es";
-import { toReactive, useMounted } from "@vueuse/core";
+import { reactiveComputed, toReactive, useMounted } from "@vueuse/core";
 import { safeIn } from "../helpers/safeIn";
 
 export interface Props {
@@ -216,7 +216,7 @@ const title = computed(() => t(settings.value?.titleTemplate as string));
 const allSelected = ref(false);
 const searchValue = ref();
 const selectedItemId = shallowRef();
-const sort = shallowRef("createdDate:DESC");
+const sort = shallowRef();
 const selectedIds = shallowRef<string[]>([]);
 const itemsProxy = ref<Record<string, any>[]>();
 
@@ -289,6 +289,10 @@ if (props.isWidgetView) {
   query.value.take = 5;
 }
 
+sort.value = query.value.sort ?? "createdDate:DESC";
+
+const unreffedScope = reactiveComputed(() => toValue(scope) ?? {});
+
 const { tableTemplates } = useTableTemplates(tableData);
 
 const calculateColumns = (columns: ListContentSchema["columns"]) => {
@@ -356,11 +360,11 @@ const toolbarComputed =
           async clickHandler() {
             if (
               scope &&
-              "openDetailsBlade" in toValue(scope) &&
-              toValue(scope).openDetailsBlade &&
-              typeof toValue(scope).openDetailsBlade === "function"
+              "openDetailsBlade" in toValue(unreffedScope) &&
+              toValue(unreffedScope).openDetailsBlade &&
+              typeof toValue(unreffedScope).openDetailsBlade === "function"
             ) {
-              toValue(scope).openDetailsBlade?.();
+              toValue(unreffedScope).openDetailsBlade?.();
             } else throw new Error("openDetailsBlade method is not defined in scope");
           },
         },
@@ -377,9 +381,8 @@ const toolbarComputed =
           // isVisible: computed(() => isDesktop.value),
         },
       },
-      customToolbarConfig: toValue(scope)?.toolbarOverrides,
+      customToolbarConfig: toValue(unreffedScope)?.toolbarOverrides,
       context: bladeContext.value,
-      scope,
     })) ??
   [];
 
@@ -408,11 +411,11 @@ const openDetailsBlade = async () => {
   if (!props.isWidgetView) {
     if (
       scope &&
-      "openDetailsBlade" in toValue(scope) &&
-      toValue(scope).openDetailsBlade &&
-      typeof toValue(scope).openDetailsBlade === "function"
+      "openDetailsBlade" in toValue(unreffedScope) &&
+      toValue(unreffedScope).openDetailsBlade &&
+      typeof toValue(unreffedScope).openDetailsBlade === "function"
     ) {
-      await toValue(scope).openDetailsBlade?.();
+      await toValue(unreffedScope).openDetailsBlade?.();
     }
   } else {
     emit("add");
@@ -422,8 +425,12 @@ const openDetailsBlade = async () => {
 const onItemClick = (item: { [x: string]: any; id?: string }) => {
   if (!props.isWidgetView) {
     // TODO Add to docs
-    if (scope && safeIn("onListItemClick", toValue(scope)) && typeof toValue(scope).onListItemClick === "function") {
-      toValue(scope).onListItemClick?.({
+    if (
+      scope &&
+      safeIn("onListItemClick", toValue(unreffedScope)) &&
+      typeof toValue(unreffedScope).onListItemClick === "function"
+    ) {
+      toValue(unreffedScope).onListItemClick?.({
         item,
         onOpen() {
           selectedItemId.value = item.id;
@@ -434,10 +441,10 @@ const onItemClick = (item: { [x: string]: any; id?: string }) => {
       });
     } else if (
       scope &&
-      safeIn("openDetailsBlade", toValue(scope)) &&
-      typeof toValue(scope).openDetailsBlade === "function"
+      safeIn("openDetailsBlade", toValue(unreffedScope)) &&
+      typeof toValue(unreffedScope).openDetailsBlade === "function"
     ) {
-      toValue(scope).openDetailsBlade?.({
+      toValue(unreffedScope).openDetailsBlade?.({
         param: item.id,
         onOpen() {
           selectedItemId.value = item.id;
@@ -511,10 +518,10 @@ const onPaginationClick = async (page: number) => {
   if (query.value.take) {
     if (
       scope &&
-      safeIn("onPaginationClick", toValue(scope)) &&
-      typeof toValue(scope).onPaginationClick === "function"
+      safeIn("onPaginationClick", toValue(unreffedScope)) &&
+      typeof toValue(unreffedScope).onPaginationClick === "function"
     ) {
-      toValue(scope).onPaginationClick?.({
+      toValue(unreffedScope).onPaginationClick?.({
         ...query.value,
         skip: (page - 1) * query.value.take,
       });
@@ -600,9 +607,10 @@ async function handleSelectAllItems(all: boolean) {
 function disabledActionHandler(disabled: { method?: string } | boolean, item: (typeof items.value)[number]): boolean {
   if (!disabled) return false;
   if (typeof disabled === "boolean") return disabled;
-  else if (disabled.method && typeof toValue(scope)?.[disabled.method] === "function")
-    return toValue(scope)?.[disabled.method]({ item });
-  else if (disabled.method && toValue(scope)?.[disabled.method]) return toValue(scope)?.[disabled.method];
+  else if (disabled.method && typeof toValue(unreffedScope)?.[disabled.method] === "function")
+    return toValue(unreffedScope)?.[disabled.method]({ item });
+  else if (disabled.method && toValue(unreffedScope)?.[disabled.method])
+    return toValue(unreffedScope)?.[disabled.method];
   return false;
 }
 
@@ -627,7 +635,7 @@ function actionBuilder(item: (typeof items.value)[number]): IActionBuilderResult
               if (toolbarItem) {
                 await toolbarItem.clickHandler?.();
               } else {
-                await toValue(scope)?.[action.method]?.(itemVal);
+                await toValue(unreffedScope)?.[action.method]?.(itemVal);
               }
               selectedIds.value = [];
             }
@@ -649,7 +657,7 @@ defineExpose({
   reload,
   title,
   updateActiveWidgetCount,
-  ...toRefs(scope?.value ?? {}),
+  ...toRefs(toValue(unreffedScope) ?? {}),
   selectedIds,
   settings: toValue(settings),
 });

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

@@ -1,5 +1,6 @@
 import {
   VcButton,
+  VcCard,
   VcField,
   VcGallery,
   VcIcon,
@@ -768,6 +769,11 @@ export interface CardSchema extends RequiredBy<Pick<SchemaBase, "id" | "label" |
    * @default false
    */
   removePadding?: boolean;
+  /**
+   * Card variant.
+   * @type {default | success | danger}
+   */
+  variant?: ComponentProps<typeof VcCard>["variant"];
 }
 
 export interface WidgetsSchema extends Pick<SchemaBase, "id" | "horizontalSeparator"> {
@@ -883,22 +889,6 @@ export interface SwitchSchema extends Omit<SchemaBase, "placeholder" | "multilan
 
 export type TableSchema = Omit<ListContentSchema, "filter"> &
   Pick<SchemaBase, "id" | "property" | "visibility"> & {
-    /**
-     * Shows button to remove table row.
-     * Used when table is in editing mode.
-     */
-    removeRowButton?: {
-      /**
-       * Determines whether the button should be shown or hidden.
-       */
-      show: boolean;
-      /**
-       * Method to be called when the button is clicked.
-       * @description Method should be defined in the blade `scope`.
-       * @type {string}
-       */
-      method: string;
-    };
     /**
      * Configuration for the add new row button in the table.
      * Used when table is in editing mode.

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

@@ -127,7 +127,7 @@ $variants: success, danger;
   &__title {
     @apply tw-uppercase tw-flex-grow
    tw-text-[color:var(--card-header-color)]
-   tw-text-base tw-font-bold tw-uppercase;
+   tw-text-base tw-font-bold;
   }
 
   &__icon {
@@ -139,7 +139,7 @@ $variants: success, danger;
   }
 
   &__body {
-    @apply tw-flex-grow tw-box-border;
+    @apply tw-flex-grow tw-box-border tw-flex-col;
   }
 
   @each $variant in $variants {

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

@@ -7,38 +7,41 @@
         'vc-container_nopadding': noPadding,
       },
     ]"
-    @touchstart="touchStart"
-    @touchmove="touchMove"
-    @touchend="touchEnd"
+    @touchstart="onTouchstart"
+    @touchmove="onTouchmove"
+    @touchend="onTouchend"
   >
     <div
-      ref="component"
-      class="vc-container__inner"
+      :class="['vc-container__overscroll', { 'vc-container__overscroll_touching': touching }]"
       :style="{
-        transform: dist ? `translate3d(0, ${dist}px, 0)` : '',
+        top: -1 * pullDist + topOffset + 'px',
+        height: pullDist + 'px',
       }"
     >
-      <div
-        v-if="usePtr && dist > 0"
-        class="vc-container__overscroll"
-        :class="{ 'vc-container__overscroll_passed': status === 'loosing' }"
-        :style="{ height: dist ? `${dist}px` : '0px' }"
-      >
+      <div class="vc-container__status">
         <VcIcon
-          :icon="status === 'pulling' ? 'fas fa-arrow-down' : 'fas fa-sync'"
-          :class="[iconClass]"
-          :style="{ transform: status === 'pulling' ? `rotate(${dist * 3}deg)` : '' }"
+          :icon="canRefresh || goingUp ? 'fas fa-arrow-up' : 'fas fa-arrow-down'"
+          class="vc-container__overscroll-icon"
         ></VcIcon>
-        <span v-if="status === 'pulling'">{{ $t("COMPONENTS.ATOMS.VC_CONTAINER.PULL_TO_REFRESH") }}</span>
-        <span v-else-if="status === 'loosing'">{{ $t("COMPONENTS.ATOMS.VC_CONTAINER.REFRESHING") }}</span>
+        <span v-if="!(canRefresh || goingUp)">{{ $t("COMPONENTS.ATOMS.VC_CONTAINER.PULL_TO_REFRESH") }}</span>
+        <span v-else>{{ $t("COMPONENTS.ATOMS.VC_CONTAINER.REFRESHING") }}</span>
       </div>
+    </div>
+    <div
+      ref="component"
+      class="vc-container__inner"
+      :class="{
+        'vc-container__inner_touching': touching,
+      }"
+      :style="{ top: topOffset + 'px' }"
+    >
       <slot></slot>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, computed, nextTick } from "vue";
+import { ref, onMounted, computed, shallowRef, watch } from "vue";
 import { VcIcon } from "./../vc-icon";
 
 export interface Props {
@@ -51,39 +54,21 @@ export interface Emits {
   (event: "scroll:ptr"): void;
 }
 
-const props = defineProps<Props>();
+defineProps<Props>();
 
 const emit = defineEmits<Emits>();
 
 const component = ref<HTMLElement>();
 const scroll = ref(false);
-const startY = ref(0);
-const ceiling = ref();
 const pullDist = ref(60);
-const dist = ref(0);
-const status = ref("normal");
-const delta = ref(0);
+const touchDiff = shallowRef(0);
+let touchstartY = 0;
+const refreshing = shallowRef(false);
+const goingUp = shallowRef(false);
+const touching = shallowRef(false);
 
-onMounted(() => {
-  const observer = new ResizeObserver(() => {
-    scroll.value = (component.value && component.value.clientHeight < component.value.scrollHeight) as boolean;
-  });
-
-  if (component.value) {
-    observer.observe(component.value);
-  }
-});
-
-const touchable = computed(() => status.value !== "refresh" && status.value !== "success");
-
-const iconClass = computed(() => {
-  if (status.value === "loosing") {
-    return "vc-container__overscroll-icon_refresh";
-  } else if (status.value === "pulling") {
-    return "vc-container__overscroll-icon_pulling";
-  }
-  return "vc-container__overscroll-icon";
-});
+const topOffset = computed(() => Math.max(0, Math.min(pullDist.value, touchDiff.value)));
+const canRefresh = computed(() => touchDiff.value >= pullDist.value && !refreshing.value);
 
 const scrollTop = () => {
   if (component.value) {
@@ -91,81 +76,48 @@ const scrollTop = () => {
   }
 };
 
-function touchStart(e: TouchEvent): void {
-  if (!touchable.value) {
-    return;
-  }
-  checkPullStart(e);
+function onTouchstart(e: TouchEvent | MouseEvent) {
+  if (refreshing.value) return;
+  touching.value = true;
+  touchstartY = "clientY" in e ? e.clientY : e.touches[0].clientY;
 }
 
-function touchMove(e: TouchEvent): void {
-  if (props.usePtr) {
-    const touch = e.touches[0];
-    if (!touchable.value) {
-      return;
-    }
+function onTouchmove(e: TouchEvent | MouseEvent) {
+  if (refreshing.value || !touching.value) return;
 
-    if (!ceiling.value) {
-      checkPullStart(e);
-    }
+  const touchY = "clientY" in e ? e.clientY : e.touches[0].clientY;
 
-    delta.value = touch.clientY - startY.value;
-
-    if (ceiling.value && delta.value >= 0 && delta.value < 80) {
-      e.preventDefault();
-
-      setStatus(ease(delta.value));
-    }
-  }
-}
-
-function touchEnd(): void {
-  if (delta.value && touchable.value) {
-    if (status.value === "loosing") {
-      nextTick(() => emit("scroll:ptr"));
-    }
-    setStatus(0);
+  if (scroll.value) {
+    touchDiff.value = touchY - touchstartY;
   }
 }
 
-function getScrollTop(el: HTMLElement) {
-  const top = el.scrollTop;
+function onTouchend() {
+  if (refreshing.value) return;
+  touching.value = false;
 
-  return Math.max(top, 0);
-}
-
-function checkPullStart(e: TouchEvent) {
-  ceiling.value = getScrollTop(component.value as HTMLElement) === 0;
-
-  if (ceiling.value) {
-    startY.value = e.touches[0].clientY;
-  }
-}
-
-function setStatus(distance: number) {
-  let stat;
-  if (distance === 0) {
-    stat = "normal";
+  if (canRefresh.value) {
+    touchDiff.value = 0;
+    refreshing.value = false;
+    emit("scroll:ptr");
   } else {
-    stat = distance < pullDist.value ? "pulling" : "loosing";
-  }
-  dist.value = distance;
-  if (stat !== status.value) {
-    status.value = stat;
+    touchDiff.value = 0;
   }
 }
 
-function ease(distance: number) {
-  const pullDistance = +pullDist.value;
-  if (distance > pullDistance) {
-    if (distance < pullDistance * 2) {
-      distance = pullDistance + (distance - pullDistance) / 2;
-    } else {
-      distance = pullDistance * 1.5 + (distance - pullDistance * 2) / 4;
-    }
+onMounted(() => {
+  const observer = new ResizeObserver(() => {
+    scroll.value = (component.value && component.value.clientHeight < component.value.scrollHeight) as boolean;
+  });
+
+  if (component.value) {
+    observer.observe(component.value);
   }
-  return Math.round(distance);
-}
+});
+
+watch(topOffset, (newVal, oldVal) => {
+  goingUp.value = newVal < oldVal;
+});
 
 defineExpose({
   scrollTop,
@@ -190,33 +142,29 @@ defineExpose({
   }
 
   &__overscroll {
-    @apply tw-relative tw-w-full tw-flex tw-items-start tw-justify-center tw-overflow-hidden tw-gap-2;
+    @apply tw-absolute tw-w-full [transition:top_0.3s_ease-out];
 
-    &_passed {
-      @apply tw-text-[#43b0e6];
+    &_touching {
+      @apply tw-transition-none;
     }
   }
 
+  &__status {
+    @apply tw-flex tw-w-full tw-h-full tw-justify-center tw-items-center tw-pb-[10px];
+  }
+
   &__overscroll-icon {
     @apply tw-text-[color:#a1c0d4];
-
-    &_pulling {
-      @apply tw-text-[color:#a1c0d4];
-    }
-
-    &_refresh {
-      animation: tw-spin 2s linear infinite;
-    }
   }
 
   &__overscroll span {
-    @apply tw-mb-2 tw-text-sm tw-text-gray-500;
+    @apply tw-ml-2 tw-text-sm tw-text-gray-500;
   }
 
   &__inner {
     @apply tw-relative tw-overflow-y-auto tw-overflow-x-hidden
     tw-flex-1 tw-p-[var(--container-scroll-padding)]
-    tw-transition-transform [scrollbar-color:var(--container-scroll-color)] [scrollbar-width:thin];
+    [transition:top_0.3s_ease-out] [scrollbar-color:var(--container-scroll-color)] [scrollbar-width:thin];
 
     &::-webkit-scrollbar {
       @apply tw-w-[var(--container-scroll-width)] tw-bg-transparent;
@@ -232,19 +180,14 @@ defineExpose({
       tw-overflow-x-hidden
       hover:tw-bg-[color:var(--container-scroll-color-hover)];
     }
+
+    &_touching {
+      transition: none;
+    }
   }
 
   &_nopadding &__inner {
     @apply tw-p-0;
   }
 }
-
-@keyframes tw-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
 </style>

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

@@ -14,7 +14,7 @@ export default {
       options: ["default", "striped"],
       table: {
         type: {
-          summary: ["default", "striped"],
+          summary: '["default", "striped"]',
         },
       },
     },

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

@@ -18,7 +18,7 @@ export default {
       options: VARIANT,
       table: {
         type: {
-          summary: VARIANT,
+          summary: VARIANT.join(", "),
         },
       },
     },

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

@@ -104,6 +104,9 @@ const toolbar = {
     "blockquote",
     { list: "ordered" },
     { list: "bullet" },
+    { color: [] },
+    { background: [] },
+    "clean",
   ],
   handlers: {},
 };

package/ui/components/molecules/vc-field/vc-field.stories.ts

@@ -36,7 +36,7 @@ export default {
       },
     },
     aspectRatio: {
-      control: "array",
+      control: "object",
       table: {
         type: {
           summary: "number[]",
@@ -44,7 +44,7 @@ export default {
       },
     },
   },
-} as Meta;
+} satisfies Meta;
 
 const Template: StoryFn = (args) => ({
   components: { VcField },

package/ui/components/molecules/vc-input/vc-input.stories.ts

@@ -18,7 +18,7 @@ export default {
           summary: "number",
         },
         defaultValue: {
-          summary: 1024,
+          summary: "1024",
         },
       },
     },