@vc-shell/framework 1.0.117 → 1.0.119

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

@@ -1,8 +1,16 @@
-import { ExtractPropTypes, h } from "vue";
+import { ExtractPropTypes, h, VNode } from "vue";
 import { InputField } from "../factories";
 import componentProps from "./props";
 import ValidationField from "./ValidationField";
-import { InputSchema } from "../../types";
+import { InputSchema, ControlSchema } from "../../types";
+import { nodeBuilder } from "../../helpers/nodeBuilder";
+
+const slotsMap = {
+  append: "append",
+  prepend: "prepend",
+  appendInner: "append-inner",
+  prependInner: "prepend-inner",
+};
 
 export default {
   name: "InputField",
@@ -17,9 +25,23 @@ export default {
           clearable: props.element.clearable || false,
         },
         options: props.baseOptions,
+        slots: Object.entries(slotsMap).reduce((acc, [key, value]: [keyof InputSchema, keyof InputSchema]) => {
+          if (props.element[key]) {
+            acc[value] = () =>
+              nodeBuilder({
+                controlSchema: props.element[key] as ControlSchema,
+                parentId: `${(props.element[key] as ControlSchema).id}`,
+                internalContext: props.fieldContext,
+                bladeContext: props.bladeContext,
+                currentLocale: props.currentLocale,
+                formData: props.formData,
+              });
+          }
+          return acc;
+        }, {} as Record<keyof InputSchema, () => VNode | false>),
       });
 
-      const render = h(field.component, field.props);
+      const render = h(field.component, field.props, field.slots);
 
       if (field.props.rules) {
         return props.baseOptions.visibility

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

@@ -0,0 +1,28 @@
+import { ExtractPropTypes, h } from "vue";
+import { VideoField } from "../factories";
+import componentProps from "./props";
+import { VideoSchema } from "../../types";
+
+export default {
+  name: "VideoField",
+  props: componentProps,
+  setup(props: ExtractPropTypes<typeof componentProps> & { element: VideoSchema }) {
+    return () => {
+      const field = VideoField({
+        props: {
+          ...props.baseProps,
+          source: props.baseProps.modelValue,
+          size: props.element.size,
+          rounded: props.element.rounded,
+          bordered: props.element.bordered,
+          clickable: props.element.clickable,
+        },
+        options: props.baseOptions,
+      });
+
+      const render = h(field.component, field.props);
+
+      return props.baseOptions.visibility ? render : null;
+    };
+  },
+};

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

@@ -1,4 +1,4 @@
-import { ComputedRef, PropType, UnwrapNestedRefs, VNodeArrayChildren } from "vue";
+import { ComputedRef, MaybeRef, PropType, UnwrapNestedRefs, VNode, VNodeArrayChildren } from "vue";
 import { DetailsBladeContext } from "../../factories";
 import { IControlBaseOptions, IControlBaseProps } from "../../types/models";
 import { ControlSchema } from "../../types";
@@ -21,12 +21,12 @@ export default {
     default: () => ({} as DetailsBladeContext),
   },
   fields: {
-    type: Object as PropType<ComputedRef<VNodeArrayChildren>>,
-    default: () => ({} as ComputedRef<VNodeArrayChildren>),
+    type: Object as PropType<ComputedRef<VNode[][]>>,
+    default: () => ({} as ComputedRef<VNode[][]>),
   },
   formData: {
-    type: Object,
-    default: () => ({}),
+    type: Object as PropType<MaybeRef<Record<string, unknown>>>,
+    default: () => ({} as MaybeRef<Record<string, unknown>>),
   },
   fieldContext: {
     type: Object,

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ComputedRef, MaybeRef, Ref, UnwrapNestedRefs } from "vue";
+import { ComputedRef, MaybeRef, Ref, UnwrapNestedRefs, UnwrapRef } from "vue";
 import { AsyncAction } from "../../../../../core/composables";
 import { SettingsSchema } from "../../types";
 import { Asset, AssetsHandler, IBladeToolbar, IImage } from "../../../../../core/types";

package/shared/modules/dynamic/helpers/nodeBuilder.ts

@@ -19,10 +19,14 @@ function disabledHandler(
   return false;
 }
 
-function nodeBuilder<Context, BContext extends UnwrapNestedRefs<DetailsBladeContext>, FormData>(args: {
+function nodeBuilder<
+  Context extends Record<string, unknown>,
+  BContext extends UnwrapNestedRefs<DetailsBladeContext>,
+  FormData
+>(args: {
   controlSchema: ControlSchema;
   parentId: string | number;
-  internalContext: Context;
+  internalContext: MaybeRef<Context>;
   bladeContext: BContext;
   currentLocale: MaybeRef<string>;
   formData: FormData;
@@ -32,7 +36,7 @@ function nodeBuilder<Context, BContext extends UnwrapNestedRefs<DetailsBladeCont
 
   const baseProps = reactive<IControlBaseProps>({
     key: `${parentId}`,
-    label: controlSchema.label ? unref(unwrapInterpolation(controlSchema.label, internalContext)) : undefined,
+    label: controlSchema.label ? unref(unwrapInterpolation(controlSchema.label, toValue(internalContext))) : undefined,
     disabled:
       ("disabled" in bladeContext.scope && bladeContext.scope.disabled) ||
       disabledHandler("disabled" in controlSchema && controlSchema.disabled, bladeContext),
@@ -40,14 +44,14 @@ function nodeBuilder<Context, BContext extends UnwrapNestedRefs<DetailsBladeCont
     rules: controlSchema.rules,
     placeholder: controlSchema.placeholder,
     required: controlSchema.rules?.required,
-    modelValue: getModel(controlSchema.property, internalContext),
-    "onUpdate:modelValue": (e) => {
-      setModel({ property: controlSchema.property, value: e, context: internalContext });
+    modelValue: getModel(controlSchema.property, toValue(internalContext)),
+    "onUpdate:modelValue": (e: unknown) => {
+      setModel({ property: controlSchema.property, value: e, context: toValue(internalContext) });
 
       if (_.has(controlSchema, "update.method")) {
         controlSchema.update.method in bladeContext.scope &&
         typeof bladeContext.scope[controlSchema.update.method] === "function"
-          ? bladeContext.scope[controlSchema.update.method](e, controlSchema.property, internalContext)
+          ? bladeContext.scope[controlSchema.update.method](e, controlSchema.property, toValue(internalContext))
           : undefined;
       }
     },
@@ -57,7 +61,7 @@ function nodeBuilder<Context, BContext extends UnwrapNestedRefs<DetailsBladeCont
 
   const baseOptions = reactive<IControlBaseOptions>({
     visibility: computed(() =>
-      controlSchema.visibility?.method ? toValue(bladeContext.scope[controlSchema.visibility?.method]) : true
+      controlSchema.visibility?.method ? bladeContext.scope[controlSchema.visibility?.method] : true
     ),
   });
 
@@ -65,10 +69,11 @@ function nodeBuilder<Context, BContext extends UnwrapNestedRefs<DetailsBladeCont
 
   const fieldsHandler = computed(() => {
     if (!("fields" in controlSchema)) return null;
-    const fieldsModel = getModel(controlSchema.property, internalContext);
+    const fieldsModel = getModel(controlSchema.property, toValue(internalContext));
 
-    if (toValue(fieldsModel) && Array.isArray(toValue(fieldsModel))) {
-      return toValue(fieldsModel).map((model: { [x: string]: unknown; id: string }) =>
+    const model = toValue(fieldsModel);
+    if (model && Array.isArray(model)) {
+      return model.map((model: { [x: string]: unknown; id: string }) =>
         controlSchema.fields.map((fieldItem) =>
           nodeBuilder({
             controlSchema: fieldItem,
@@ -86,7 +91,7 @@ function nodeBuilder<Context, BContext extends UnwrapNestedRefs<DetailsBladeCont
         nodeBuilder({
           controlSchema: field,
           parentId: `fieldset-${parentId}-${field.id}`,
-          internalContext,
+          internalContext: reactive(unref(internalContext)),
           bladeContext,
           currentLocale,
           formData,
@@ -100,10 +105,10 @@ function nodeBuilder<Context, BContext extends UnwrapNestedRefs<DetailsBladeCont
     baseOptions,
     bladeContext,
     element: controlSchema,
-    currentLocale,
+    currentLocale: unref(currentLocale),
     fields: fieldsHandler,
     formData,
-    fieldContext: internalContext,
+    fieldContext: reactive(unref(internalContext)),
   };
 
   return h(component, elProps);

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

@@ -15,7 +15,7 @@
       :expanded="expanded"
       v-bind="bladeOptions?.table"
       :state-key="tableData?.id"
-      :items="items"
+      :items="itemsProxy"
       :multiselect="tableData?.multiselect"
       :header="tableData?.header"
       :sort="sort"
@@ -26,6 +26,7 @@
       :total-label="$t(`${settings.localizationPrefix.trim().toUpperCase()}.PAGES.LIST.TABLE.TOTALS`)"
       :total-count="pagination?.totalCount"
       :active-filter-count="activeFilterCount"
+      :reorderable-rows="tableData?.reorderableRows"
       @item-click="onItemClick"
       @pagination-click="onPaginationClick"
       @selection-changed="onSelectionChanged"
@@ -33,6 +34,7 @@
       @load:change="onSearchList"
       @scroll:ptr="reload"
       @search:change="onSearchList"
+      @row:reorder="sortRows"
     >
       <template
         v-if="isFilterVisible"
@@ -133,6 +135,8 @@ import { ITableColumns } from "../../../../core/types";
 import { toolbarReducer } from "../helpers/toolbarReducer";
 import { notification, usePopup } from "../../../components";
 import { ListBaseBladeScope, ListBladeContext, UseList } from "../factories/types";
+import { IParentCallArgs } from "../../../index";
+import * as _ from "lodash-es";
 
 export interface Props {
   expanded?: boolean;
@@ -144,6 +148,7 @@ export interface Props {
 }
 
 export interface Emits {
+  (event: "parent:call", args: IParentCallArgs): void;
   (event: "close:blade"): void;
   (event: "collapse:blade"): void;
   (event: "expand:blade"): void;
@@ -174,6 +179,8 @@ const selectedItemId = ref();
 const sort = ref("createdDate:DESC");
 const selectedIds = ref<string[]>([]);
 const isDesktop = inject<Ref<boolean>>("isDesktop");
+const itemsProxy = ref<Record<string, any>[]>();
+const modified = ref(false);
 
 const { moduleNotifications, markAsRead } = useNotifications(settings.value.pushNotificationType);
 
@@ -231,7 +238,7 @@ const {
 const bladeContext = ref<ListBladeContext>({
   load,
   remove,
-  items,
+  items: computed(() => itemsProxy.value),
   loading,
   pagination,
   query,
@@ -242,6 +249,12 @@ const bladeContext = ref<ListBladeContext>({
 const toolbarComputed = toolbarReducer({
   defaultToolbarSchema: settings.value.toolbar,
   defaultToolbarBindings: {
+    save: {
+      clickHandler() {
+        emit("close:blade");
+      },
+      disabled: computed(() => !modified.value),
+    },
     openAddBlade: {
       async clickHandler() {
         if (
@@ -274,10 +287,22 @@ onMounted(async () => {
   await load({ ...query.value, sort: sort.value });
 });
 
+watch(
+  () => itemsProxy.value,
+  (newVal) => {
+    modified.value = !_.isEqual(newVal, items.value);
+  },
+  { deep: true }
+);
+
 watch(sort, async (value) => {
   await load({ ...query.value, sort: value });
 });
 
+watch(items, (newVal) => {
+  itemsProxy.value = newVal;
+});
+
 watch(
   () => props.param,
   (newVal) => {
@@ -465,8 +490,20 @@ function resolveTemplateComponent(name: keyof ListContentSchema) {
   }
 }
 
+function sortRows(event: { dragIndex: number; dropIndex: number; value: any[] }) {
+  if (event.dragIndex !== event.dropIndex) {
+    const sorted = event.value.map((item, index) => {
+      item.sortOrder = index;
+      return item;
+    });
+
+    itemsProxy.value = sorted;
+  }
+}
+
 defineExpose({
   reload,
   title,
+  ...scope.value,
 });
 </script>

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

@@ -1,4 +1,4 @@
-import { VcButton, VcIcon, VcInput, VcStatus } from "./../../../../ui/components";
+import { VcButton, VcField, VcIcon, VcImage, VcInput, VcStatus, VcVideo } from "./../../../../ui/components";
 import { ITableColumns, IValidationRules } from "../../../../core/types";
 import type { ComponentProps, ComponentEmit, ComponentSlots } from "vue-component-type-helpers";
 
@@ -95,6 +95,7 @@ export interface ListContentSchema extends SchemaBase {
     type?: string;
     customTemplate?: GridTemplateOverride;
   })[];
+  reorderableRows?: boolean;
   mobileTemplate?: {
     component: string;
   };
@@ -148,6 +149,34 @@ export interface InputSchema extends SchemaBase {
   component: "vc-input";
   variant?: ComponentProps<typeof VcInput>["type"];
   clearable?: boolean;
+  prepend?: ControlSchema;
+  append?: ControlSchema;
+  appendInner?: ControlSchema;
+  prependInner?: ControlSchema;
+}
+
+export interface VideoSchema extends SchemaBase {
+  component: "vc-video";
+  size?: ComponentProps<typeof VcVideo>["size"];
+  rounded?: boolean;
+  bordered?: boolean;
+  clickable?: boolean;
+}
+
+export interface FieldSchema extends SchemaBase {
+  component: "vc-field";
+  variant?: ComponentProps<typeof VcField>["type"];
+  copyable?: boolean;
+}
+
+export interface ImageSchema extends SchemaBase {
+  component: "vc-image";
+  aspect?: ComponentProps<typeof VcImage>["aspect"];
+  size?: ComponentProps<typeof VcImage>["size"];
+  background?: ComponentProps<typeof VcImage>["background"];
+  rounded?: boolean;
+  bordered?: boolean;
+  clickable?: boolean;
 }
 
 export interface StatusSchema extends SchemaBase {
@@ -209,6 +238,7 @@ export interface CheckboxSchema extends SchemaBase {
 export interface FieldsetSchema extends SchemaBase {
   component: "vc-fieldset";
   columns?: number;
+  aspectRatio?: number[];
   fields: Exclude<ControlSchema[], FieldsetSchema>;
   remove?: {
     method: string;
@@ -237,7 +267,10 @@ export type ControlSchema =
   | FieldsetSchema
   | ButtonSchema
   | InputCurrencySchema
-  | StatusSchema;
+  | StatusSchema
+  | FieldSchema
+  | VideoSchema
+  | ImageSchema;
 
 export interface FilterBase {
   columns: {

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

@@ -6,11 +6,14 @@ import {
   VcCheckbox,
   VcDynamicProperty,
   VcEditor,
+  VcField,
   VcGallery,
+  VcImage,
   VcInput,
   VcInputCurrency,
   VcSelect,
   VcStatus,
+  VcVideo,
 } from "../../../../ui/components";
 import type { ComponentProps, ComponentEmit, ComponentSlots } from "vue-component-type-helpers";
 
@@ -44,7 +47,9 @@ export type ControlType =
   | ICheckbox
   | IButton
   | IInputCurrency
-  | IStatusField;
+  | IStatusField
+  | IContentField
+  | IImageField;
 
 export type ControlTypeWithSlots = Extract<
   ControlType,
@@ -90,8 +95,24 @@ export type IStatusField = {
 export type IInputField = {
   props: ComponentProps<typeof VcInput> | IControlBaseProps;
   options: IControlBaseOptions;
+  slots?: Partial<Pick<ComponentSlots<typeof VcInput>, "append" | "prepend" | "append-inner" | "prepend-inner">>;
 } & FieldOpts<typeof VcInput>;
 
+export type IContentField = {
+  props: ComponentProps<typeof VcField> | IControlBaseProps;
+  options: IControlBaseOptions;
+} & FieldOpts<typeof VcField>;
+
+export type IVideoField = {
+  props: ComponentProps<typeof VcVideo> | IControlBaseProps;
+  options: IControlBaseOptions;
+} & FieldOpts<typeof VcVideo>;
+
+export type IImageField = {
+  props: ComponentProps<typeof VcImage> | IControlBaseProps;
+  options: IControlBaseOptions;
+} & FieldOpts<typeof VcImage>;
+
 export type IInputCurrency = {
   props: Partial<ComponentProps<typeof VcInputCurrency>> | IControlBaseProps;
   options: IControlBaseOptions;

package/ui/components/atoms/vc-col/index.ts

@@ -1,10 +1 @@
-import { VNode } from "vue";
-import _Col from "./vc-col.vue";
-
-export const VcCol = _Col as typeof _Col & {
-  new (): {
-    $slots: {
-      default: () => VNode[];
-    };
-  };
-};
+export { default as VcCol } from "./vc-col.vue";

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

@@ -15,12 +15,17 @@ export interface Props {
 withDefaults(defineProps<Props>(), {
   size: "1",
 });
+
+defineSlots<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  default: (props: any) => any;
+}>();
 </script>
 
 <style lang="scss">
-.vc-col {
-  .vc-app_mobile & {
-    @apply tw-grow #{!important};
-  }
-}
+// .vc-col {
+//   .vc-app_mobile & {
+//     @apply tw-grow #{!important};
+//   }
+// }
 </style>

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

@@ -99,7 +99,7 @@ $paddings: xs, s, m, l, xl, xxl;
 
   @each $padding in $paddings {
     &_#{$padding} {
-      @apply tw-w-[var(--image-size-#{$padding})];
+      @apply tw-w-[var(--image-size-#{$padding})] tw-max-w-full tw-min-w-0;
     }
   }
 

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

@@ -1,6 +1,6 @@
 <template>
   <div class="tw-flex tw-flex-nowrap tw-font-bold tw-relative">
-    <span><slot></slot></span>
+    <span class="tw-truncate"><slot></slot></span>
     <span
       v-if="required"
       class="tw-text-[color:var(--label-required-color)] tw-ml-1"

package/ui/components/atoms/vc-row/index.ts

@@ -1,10 +1 @@
-import { VNode } from "vue";
-import _Row from "./vc-row.vue";
-
-export const VcRow = _Row as typeof _Row & {
-  new (): {
-    $slots: {
-      default: () => VNode[];
-    };
-  };
-};
+export { default as VcRow } from "./vc-row.vue";

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

@@ -4,10 +4,17 @@
   </div>
 </template>
 
+<script setup lang="ts">
+defineSlots<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  default: (props: any) => any;
+}>();
+</script>
+
 <style lang="scss">
 .vc-row {
   .vc-app_mobile & {
-    display: block;
+    display: grid;
   }
 }
 </style>

package/ui/components/molecules/index.ts

@@ -12,3 +12,4 @@ export * from "./vc-select";
 export * from "./vc-slider";
 export * from "./vc-textarea";
 export * from "./vc-multivalue";
+export * from "./vc-field";

package/ui/components/molecules/vc-field/_internal/vc-field-type/vc-field-type.vue

@@ -0,0 +1,66 @@
+<template>
+  <!-- Text -->
+  <template v-if="type === 'text'">
+    <div class="tw-flex tw-flex-row tw-justify-stretch tw-truncate">
+      <div class="tw-truncate">
+        <VcHint class="tw-text-s">{{ value }}</VcHint>
+      </div>
+    </div>
+  </template>
+
+  <!-- Date -->
+  <template v-if="type === 'date'">
+    <div class="tw-flex tw-flex-row tw-justify-stretch tw-truncate">
+      <div class="tw-truncate">
+        <VcHint class="tw-text-s"> {{ value.toLocaleDateString() }}</VcHint>
+      </div>
+    </div>
+  </template>
+
+  <!-- Date ago -->
+  <template v-if="type === 'date-ago'">
+    <div class="tw-flex tw-flex-row tw-justify-stretch tw-truncate">
+      <div class="tw-truncate">
+        <VcHint class="tw-text-s"> {{ moment(value).fromNow() ?? "N/A" }}</VcHint>
+      </div>
+    </div>
+  </template>
+
+  <!-- Link -->
+  <template v-if="type === 'link'">
+    <div class="tw-flex tw-flex-row tw-justify-stretch tw-truncate">
+      <div class="tw-truncate">
+        <VcLink
+          class="vc-link tw-text-s tw-truncate tw-w-full"
+          @click="onLinkClick"
+          >{{ value }}</VcLink
+        >
+      </div>
+      <slot></slot>
+    </div>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import moment from "moment";
+
+export interface Props {
+  type: "text" | "date" | "date-ago" | "link";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value: any;
+}
+
+export interface Emits {
+  (event: "click"): void;
+  (event: "copy"): void;
+}
+
+defineEmits<Emits>();
+const props = defineProps<Props>();
+
+function onLinkClick() {
+  location.href = props.value;
+}
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1 @@
+export { default as VcField } from "./vc-field.vue";

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

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <!-- Field label -->
+    <VcLabel v-if="label">
+      <span>{{ label }}</span>
+      <template
+        v-if="tooltip"
+        #tooltip
+        >{{ tooltip }}</template
+      ></VcLabel
+    >
+    <!-- <div> -->
+    <VcFieldType
+      :value="modelValue"
+      :type="type"
+    >
+      <VcButton
+        v-if="copyable"
+        icon="far fa-copy"
+        size="m"
+        class="tw-ml-2"
+        text
+        @click="copy(modelValue)"
+      ></VcButton>
+    </VcFieldType>
+  </div>
+  <!-- </div> -->
+</template>
+
+<script lang="ts" setup>
+import { VcLabel } from "./../../";
+import VcFieldType from "./_internal/vc-field-type/vc-field-type.vue";
+
+export interface Props {
+  /**
+   * Field label text
+   */
+  label?: string;
+  /**
+   * Field tooltip information
+   */
+  tooltip?: string;
+  /**
+   * Field type
+   */
+  type?: "text" | "date" | "date-ago" | "link";
+  /**
+   * Field content
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  modelValue?: any;
+  /**
+   * Add button for field content copying
+   */
+  copyable?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  type: "text",
+});
+
+function copy(value: string) {
+  navigator.clipboard?.writeText(value);
+}
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -47,6 +47,11 @@ import VcPopupError from "./_internal/vc-popup-error/vc-popup-error.vue";
 import { defineComponent, PropType } from "vue";
 
 export default defineComponent({
+  components: {
+    VcIcon,
+    VcPopupWarning,
+    VcPopupError,
+  },
   props: {
     title: {
       type: String,