@vc-shell/framework 1.0.153 → 1.0.154

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

@@ -5,6 +5,7 @@ import {
   VcImage,
   VcInput,
   VcMultivalue,
+  VcRating,
   VcStatus,
   VcVideo,
 } from "./../../../../ui/components";
@@ -57,6 +58,13 @@ export interface SettingsDetails extends SettingsBase {
 
 export type IViewComponentName = "DynamicBladeForm" | "DynamicBladeList";
 
+type ToolbarSchema = {
+  id: string;
+  title: string;
+  icon: string;
+  method: string;
+};
+
 export interface SettingsBase {
   /**
    * Blade url
@@ -91,13 +99,10 @@ export interface SettingsBase {
    * [`saveChanges`, `remove`] methods in `DynamicBladeForm`
    *
    * [`openAddBlade`, `refresh`, `removeItems`, `save`] methods in `DynamicBladeList`
+   *
+   * If not set - toolbar data will try to consume from composable, if not found - toolbar will not be added
    */
-  toolbar: {
-    id: string;
-    title: string;
-    icon: string;
-    method: string;
-  }[];
+  toolbar?: ToolbarSchema[];
   /**
    * Blade component
    */
@@ -129,6 +134,12 @@ export interface SettingsBase {
    * @default undefined
    */
   menuItem?: MenuItemConfig;
+  /**
+   * Collapsed blade width in percentage
+   * @default "50%"
+   */
+  // TODO Add to documentation
+  width?: `${number}%`;
 }
 
 export interface ListContentSchema {
@@ -137,6 +148,7 @@ export interface ListContentSchema {
   filter?: FilterSchema;
   multiselect?: boolean;
   header?: boolean;
+  footer?: boolean;
   columns?: (Omit<ITableColumns, "visible"> & {
     id: string;
     title: string;
@@ -227,6 +239,10 @@ export interface SchemaBase {
    * @type {{ method: string }}
    */
   update?: { method: string };
+  /**
+   * Adds horizontal separator after component.
+   */
+  horizontalSeparator?: boolean;
 }
 
 /**
@@ -411,7 +427,9 @@ export interface VideoSchema
  * Data field schema interface.
  * @interface
  */
-export interface FieldSchema extends Pick<SchemaBase, "id" | "property" | "label" | "visibility" | "tooltip"> {
+// TODO update documentation
+export interface FieldSchema
+  extends Pick<SchemaBase, "id" | "property" | "label" | "visibility" | "tooltip" | "horizontalSeparator"> {
   /**
    * Component type for field.
    * @type {"vc-field"}
@@ -427,13 +445,26 @@ export interface FieldSchema extends Pick<SchemaBase, "id" | "property" | "label
    * @type {boolean}
    */
   copyable?: boolean;
+  /**
+   * Field orientation.
+   * @type {"horizontal" | "vertical"}
+   * @default "vertical"
+   */
+  orientation?: "horizontal" | "vertical";
+  /**
+   * Field columns aspect ratio.
+   * @description Uses CSS flex-grow property.
+   * @type {[number, number]}
+   */
+  aspectRatio?: [number, number];
 }
 
 /**
  * Image schema interface.
  * @interface
  */
-export interface ImageSchema extends Pick<SchemaBase, "id" | "property" | "visibility" | "update"> {
+export interface ImageSchema
+  extends Pick<SchemaBase, "id" | "property" | "visibility" | "update" | "horizontalSeparator"> {
   /**
    * Component type for image.
    * @type {"vc-image"}
@@ -475,7 +506,7 @@ export interface ImageSchema extends Pick<SchemaBase, "id" | "property" | "visib
  * Status schema interface.
  * @interface
  */
-export interface StatusSchema extends Pick<SchemaBase, "id" | "visibility"> {
+export interface StatusSchema extends Pick<SchemaBase, "id" | "visibility" | "horizontalSeparator"> {
   /**
    * Component type for status.
    * @type {"vc-status"}
@@ -576,7 +607,8 @@ export interface EditorSchema extends SchemaBase {
  * Interface for dynamic properties schema.
  * @interface
  */
-export interface DynamicPropertiesSchema extends Pick<SchemaBase, "id" | "disabled" | "property" | "visibility"> {
+export interface DynamicPropertiesSchema
+  extends Pick<SchemaBase, "id" | "disabled" | "property" | "visibility" | "horizontalSeparator"> {
   /**
    * The component type for dynamic properties.
    * @type {"vc-dynamic-properties"}
@@ -634,7 +666,8 @@ export interface GallerySchema extends Omit<SchemaBase, "placeholder" | "multila
  * Interface for a card schema.
  * @interface
  */
-export interface CardSchema extends RequiredBy<Pick<SchemaBase, "id" | "label" | "visibility">, "label"> {
+export interface CardSchema
+  extends RequiredBy<Pick<SchemaBase, "id" | "label" | "visibility" | "horizontalSeparator">, "label"> {
   /**
    * Component type for the card.
    * @type {"vc-card"}
@@ -655,17 +688,38 @@ export interface CardSchema extends RequiredBy<Pick<SchemaBase, "id" | "label" |
    * @type {boolean}
    */
   collapsible?: boolean;
+  /**
+   * Removes internal padding from the card.
+   * @type {boolean}
+   * @default false
+   */
+  removePadding?: boolean;
 }
 
-export interface WidgetsSchema extends Pick<SchemaBase, "id"> {
+export interface WidgetsSchema extends Pick<SchemaBase, "id" | "horizontalSeparator"> {
   component: "vc-widgets";
   children: string[];
 }
 
 export interface CheckboxSchema extends Omit<SchemaBase, "multilanguage" | "placeholder"> {
+  /**
+   * Component type for checkbox.
+   * @type {"vc-checkbox"}
+   */
   component: "vc-checkbox";
+  /**
+   * Checkbox text content.
+   */
   content: string;
+  /**
+   * True value for the switch.
+   * @type {boolean}
+   */
   trueValue?: boolean;
+  /**
+   * False value for the switch.
+   * @type {boolean}
+   */
   falseValue?: boolean;
 }
 
@@ -673,7 +727,8 @@ export interface CheckboxSchema extends Omit<SchemaBase, "multilanguage" | "plac
  * Fieldset schema interface.
  * @interface
  */
-export interface FieldsetSchema extends PartialBy<Pick<SchemaBase, "id" | "property" | "visibility">, "property"> {
+export interface FieldsetSchema
+  extends PartialBy<Pick<SchemaBase, "id" | "property" | "visibility" | "horizontalSeparator">, "property"> {
   /**
    * Component type for the fieldset.
    * @type {"vc-fieldset"}
@@ -710,10 +765,37 @@ export interface FieldsetSchema extends PartialBy<Pick<SchemaBase, "id" | "prope
   };
 }
 
+/**
+ * Switch schema interface.
+ * @interface
+ */
+// TODO add to documentation
+export interface SwitchSchema extends Omit<SchemaBase, "placeholder" | "multilanguage"> {
+  /**
+   * Component type for switch.
+   * @type {"vc-switch"}
+   */
+  component: "vc-switch";
+  /**
+   * True value for the switch.
+   * @type {boolean}
+   */
+  trueValue?: boolean;
+  /**
+   * False value for the switch.
+   * @type {boolean}
+   */
+  falseValue?: boolean;
+}
+
+// TODO add to documentation
+export type TableSchema = Omit<ListContentSchema, "filter"> & Pick<SchemaBase, "id" | "property" | "visibility">;
+
 /**
  * Button schema interface.
+ * @interface
  */
-export interface ButtonSchema extends Pick<SchemaBase, "id" | "disabled" | "visibility"> {
+export interface ButtonSchema extends Pick<SchemaBase, "id" | "disabled" | "visibility" | "horizontalSeparator"> {
   /**
    * Component type.
    * @type {"vc-button"}
@@ -752,6 +834,49 @@ export interface ButtonSchema extends Pick<SchemaBase, "id" | "disabled" | "visi
   method: string;
 }
 
+/**
+ * Custom component schema interface.
+ * @interface
+ */
+// TODO add to documentation
+export interface CustomComponentSchema extends Pick<SchemaBase, "id" | "visibility"> {
+  /**
+   * Component type for custom component.
+   * @type {vc-custom}
+   */
+  component: "vc-custom";
+  /**
+   * Component name of custom component. Component should be registered globally.
+   */
+  name: string;
+}
+
+/**
+ * Rating schema interface.
+ * @interface
+ */
+export interface RatingSchema
+  extends Pick<
+    SchemaBase,
+    "id" | "visibility" | "label" | "property" | "tooltip" | "horizontalSeparator" | "placeholder"
+  > {
+  /**
+   * Component type for rating.
+   * @type {"vc-rating"}
+   */
+  component: "vc-rating";
+  /**
+   * Maximal rating size.
+   * @type {number}
+   */
+  max?: number;
+  /**
+   * Rating component display variant.
+   * @type {"text" | "stars" | "star-and-text"}
+   */
+  type?: ComponentProps<typeof VcRating>["variant"];
+}
+
 export type ControlSchema =
   | SelectSchema
   | InputSchema
@@ -769,35 +894,36 @@ export type ControlSchema =
   | VideoSchema
   | ImageSchema
   | TextareaSchema
-  | MultivalueSchema;
+  | MultivalueSchema
+  | SwitchSchema
+  | TableSchema
+  | CustomComponentSchema
+  | RatingSchema;
 
 export interface FilterBase {
   columns: {
     title: string;
-    controls: {
-      field: string;
-      component: InputSchema["component"] | CheckboxSchema["component"];
-    }[];
+    id: string;
+    controls: (FilterCheckbox | FilterDateInput)[];
   }[];
 }
 
-export type FilterCheckbox = FilterBase & {
-  columns: {
-    controls: {
-      data?: { value: string; displayName: string }[];
-    }[];
-  }[];
+export type FilterCheckbox = {
+  id: string;
+  field: string;
+  multiple?: boolean;
+  data?: { value: string; displayName: string }[];
+  component: CheckboxSchema["component"];
 };
 
-export type FilterDateInput = FilterBase & {
-  columns: {
-    controls: {
-      label?: string;
-    }[];
-  }[];
+export type FilterDateInput = {
+  id: string;
+  field: string;
+  label?: string;
+  component: InputSchema["component"];
 };
 
-export type FilterSchema = FilterCheckbox | FilterDateInput;
+export type FilterSchema = FilterBase;
 
 export interface OverridesSchema {
   upsert?: (OverridesUpsert | OverridesReplace)[];
@@ -810,8 +936,7 @@ export interface OverridesUpsert extends OverridesReplace {
 
 export interface OverridesReplace {
   path: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  value: ControlSchema | SettingsSchema["toolbar"][number] | SettingsSchema["menuItem"] | string | boolean;
+  value: ControlSchema | ToolbarSchema | SettingsSchema["menuItem"] | string | boolean;
   id: string;
 }
 

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ComputedRef, Raw } from "vue";
+import { Raw } from "vue";
 import {
   VcButton,
   VcCard,
@@ -16,6 +16,9 @@ import {
   VcVideo,
   VcTextarea,
   VcMultivalue,
+  VcSwitch,
+  VcTable,
+  VcRating,
 } from "../../../../ui/components";
 import type { ComponentProps, ComponentEmit, ComponentSlots } from "vue-component-type-helpers";
 
@@ -81,63 +84,52 @@ export type WithRequiredProperty<Type, Key extends keyof Type> = Type & {
   [Property in Key]-?: Type[Property];
 };
 
-export interface IControlBaseOptions {
-  visibility?: ComputedRef<boolean | undefined>;
-}
-
 export type IMultivalueField = {
   props: ComponentProps<typeof VcMultivalue> | IControlBaseProps;
   slots?: Partial<ComponentSlots<typeof VcMultivalue>>;
-  options: IControlBaseOptions;
 } & FieldOpts<typeof VcMultivalue>;
 
 export type ISelectField = {
   props: ComponentProps<typeof VcSelect> | IControlBaseProps;
   slots?: Partial<ComponentSlots<typeof VcSelect>>;
-  options: IControlBaseOptions;
 } & FieldOpts<typeof VcSelect>;
 
 export type IStatusField = {
-  props: ComponentProps<typeof VcStatus> & IControlBaseOptions;
+  props: ComponentProps<typeof VcStatus>;
   slots?: Partial<Pick<ComponentSlots<typeof VcButton>, "default">>;
-  options: IControlBaseOptions;
 } & FieldOpts<typeof VcStatus>;
 
 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;
 } & FieldOpts<typeof VcInputCurrency>;
 
 export type ICardCollection = {
   props: ComponentProps<typeof VcCard> | IControlBaseProps;
-  options: IControlBaseOptions;
+
   slots?: Partial<Pick<ComponentSlots<typeof VcCard>, "default" | "actions">>;
 } & FieldOpts<typeof VcCard>;
 
 export type ICheckbox = {
   props: ComponentProps<typeof VcCheckbox> | IControlBaseProps;
-  options: IControlBaseOptions;
+
   slots?: Partial<Pick<ComponentSlots<typeof VcCheckbox>, "default" | "error">>;
 } & FieldOpts<typeof VcCheckbox>;
 
@@ -146,22 +138,19 @@ export type IDynamicProperties = {
     | (ComponentProps<typeof VcDynamicProperty> & FromGenericEventsToProps<ComponentEmit<typeof VcDynamicProperty>>)
     | (ComponentProps<typeof VcDynamicProperty> &
         Omit<IControlBaseProps, keyof ComponentProps<typeof VcDynamicProperty> | "onUpdate:modelValue" | "rules">);
-  options: IControlBaseOptions;
 } & FieldOpts<typeof VcDynamicProperty>;
 
 export type IEditorField = {
   props: ComponentProps<typeof VcEditor> | IControlBaseProps;
-  options: IControlBaseOptions;
 } & FieldOpts<typeof VcEditor>;
 
 export type IGallery = {
   props: (ComponentProps<typeof VcGallery> & { rules: Record<string, unknown> }) | IControlBaseProps;
-  options: IControlBaseOptions;
 } & FieldOpts<typeof VcGallery>;
 
 export type IButton = {
   props: ComponentProps<typeof VcButton>;
-  options: IControlBaseOptions;
+
   slots?: Partial<Pick<ComponentSlots<typeof VcButton>, "default">>;
 } & FieldOpts<typeof VcButton>;
 
@@ -174,5 +163,17 @@ export type IFieldset = {
 
 export type ITextareaField = {
   props: ComponentProps<typeof VcTextarea> | IControlBaseProps;
-  options: IControlBaseOptions;
 } & FieldOpts<typeof VcTextarea>;
+
+export type ISwitch = {
+  props: ComponentProps<typeof VcSwitch> | IControlBaseProps;
+} & FieldOpts<typeof VcSwitch>;
+
+export type ITable = {
+  props: ComponentProps<typeof VcTable> | IControlBaseProps;
+  slots: Partial<Pick<ComponentSlots<typeof VcTable>, `item_${string}` | "notfound" | "mobile-item" | "empty">>;
+} & FieldOpts<typeof VcTable>;
+
+export type IRating = {
+  props: ComponentProps<typeof VcRating> | IControlBaseProps;
+} & FieldOpts<typeof VcRating>;

package/shared/utilities/vueUtils.ts

@@ -4,7 +4,11 @@
 import { ComponentPublicInstance, ComputedOptions, MethodOptions } from "vue";
 
 type RemoveOnVnodePrefix<T> = {
-  [K in keyof T as K extends `onVnode${string}` ? never : K extends `on${infer Event}` ? Uncapitalize<Event> : K]: T[K];
+  [K in keyof T as K extends `onVnode${string}`
+    ? never
+    : K extends `on${infer Event}`
+      ? Uncapitalize<`on${Event}`>
+      : K]: T[K];
 };
 
 type EmitsExtractor<T> = RemoveOnVnodePrefix<Pick<T, Extract<keyof T, `on${string}`>>>;

package/ui/components/atoms/index.ts

@@ -6,7 +6,6 @@ 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";

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

@@ -1,7 +1,7 @@
 <template>
   <div
     class="vc-col tw-flex tw-flex-col tw-min-w-0 tw-basis-0"
-    :style="{ flexGrow: parseInt(size) }"
+    :style="{ flexGrow: size }"
   >
     <slot></slot>
   </div>
@@ -9,11 +9,11 @@
 
 <script lang="ts" setup>
 export interface Props {
-  size?: string;
+  size?: number;
 }
 
 withDefaults(defineProps<Props>(), {
-  size: "1",
+  size: 1,
 });
 
 defineSlots<{

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

@@ -12,22 +12,28 @@
     </div>
     <span
       v-if="$slots['tooltip']"
-      class="tw-grow tw-basis-0 tw-ml-1"
+      class="tw-grow tw-basis-0 tw-ml-1 tw-relative"
     >
       <VcIcon
+        ref="tooltipIconRef"
         class="tw-text-[color:var(--label-tooltip-color)]"
         :icon="tooltipIcon"
         size="s"
         @mouseenter="tooltipVisible = true"
         @mouseleave="tooltipVisible = false"
       ></VcIcon>
-      <span
-        v-if="tooltipVisible"
-        class="tw-absolute tw-z-10 tw-bg-white tw-border tw-border-solid tw-border-[color:#eef0f2] tw-shadow-[1px_1px_8px_rgba(126,142,157,0.25)] tw-rounded-[3px] tw-text-[color:#8e9daa] tw-font-normal tw-py-1 tw-px-2 tw-ml-4"
-      >
-        <slot name="tooltip"></slot>
-      </span>
+      <teleport to="body">
+        <span
+          v-if="tooltipVisible"
+          ref="tooltipRef"
+          :style="floatingStyles"
+          class="tw-absolute tw-z-10 tw-bg-white tw-border tw-border-solid tw-border-[color:#eef0f2] tw-shadow-[1px_1px_8px_rgba(126,142,157,0.25)] tw-rounded-[3px] tw-text-[color:#8e9daa] tw-font-normal tw-py-1 tw-px-2 tw-ml-4"
+        >
+          <slot name="tooltip"></slot>
+        </span>
+      </teleport>
     </span>
+
     <div
       v-if="multilanguage"
       class="tw-text-[color:var(--app-menu-item-icon-color)] tw-shrink-0"
@@ -40,6 +46,7 @@
 <script lang="ts" setup>
 import { VcIcon } from "./../../../components";
 import { ref } from "vue";
+import { useFloating, shift, flip } from "@floating-ui/vue";
 
 export interface Props {
   required?: boolean;
@@ -58,6 +65,13 @@ defineSlots<{
 }>();
 
 const tooltipVisible = ref(false);
+const tooltipIconRef = ref<HTMLElement | null>(null);
+const tooltipRef = ref<HTMLElement | null>(null);
+
+const { floatingStyles } = useFloating(tooltipIconRef, tooltipRef, {
+  placement: "top-start",
+  middleware: [flip({ fallbackPlacements: ["top-start", "bottom-start"] }), shift({ mainAxis: false })],
+});
 </script>
 
 <style lang="scss">

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

@@ -26,7 +26,7 @@
 
     <!-- Editor field -->
     <QuillEditor
-      :key="disabled?.toString()"
+      :key="`${disabled}`"
       v-model:content="content"
       class="quill-editor tw-border tw-border-solid tw-border-[color:var(--editor-border-color)] tw-rounded-b-[var(--editor-border-radius)] tw-h-[200px]"
       :class="{ 'tw-bg-[#fafafa] tw-text-[#424242] tw-cursor-default': disabled }"
@@ -52,7 +52,7 @@
 <script lang="ts" setup>
 import { QuillEditor } from "@vueup/vue-quill";
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
-import { ref, unref, watch, onMounted } from "vue";
+import { ref, unref, watch, onMounted, onUpdated } from "vue";
 import ImageUploader from "quill-image-uploader";
 import { VcLabel, VcHint } from "./../../";
 
@@ -121,11 +121,11 @@ const modules = {
 };
 
 onMounted(() => {
-  // fixes quill editor placeholder visibility issue when content is not empty
-  const editor = document.querySelector(".ql-editor.ql-blank");
-  if (editor && content.value) {
-    editor.classList.remove("ql-blank");
-  }
+  removeBlankClass();
+});
+
+onUpdated(() => {
+  removeBlankClass();
 });
 
 watch(
@@ -136,6 +136,14 @@ watch(
   { immediate: true },
 );
 
+function removeBlankClass() {
+  // fixes quill editor placeholder visibility issue when content is not empty
+  const editor = document.querySelector(".ql-editor.ql-blank");
+  if (editor && content.value) {
+    editor.classList.remove("ql-blank");
+  }
+}
+
 function onInput() {
   if (isQuillEmpty(content.value)) {
     emit("update:modelValue", null);