@vc-shell/framework 1.0.59 → 1.0.60

package/shared/modules/assets/components/assets-details/assets-details.vue

@@ -9,7 +9,7 @@
   >
     <!-- Blade contents -->
     <div class="tw-flex tw-grow-1 tw-border-t tw-border-solid tw-border-t-[#eaedf3]">
-      <div class="assets-details__content tw-grow tw-basis-0">
+      <div class="assets-details__content tw-grow tw-basis-0 tw-w-full">
         <VcContainer :no-padding="true">
           <div class="tw-p-4">
             <VcForm>
@@ -19,12 +19,13 @@
                     :src="defaultAsset.url"
                     size="xl"
                     :bordered="true"
+                    class="tw-shrink-0"
                   ></VcImage>
                 </template>
                 <template v-else>
                   <VcIcon
                     :icon="getFileThumbnail(defaultAsset.name)"
-                    class="tw-text-[#a9bfd2] tw-text-[128px]"
+                    class="tw-text-[#a9bfd2] tw-text-[128px] tw-shrink-0"
                   ></VcIcon>
                 </template>
                 <VcCol class="tw-ml-6">
@@ -39,14 +40,16 @@
                         (defaultAsset.createdDate && moment(defaultAsset.createdDate).fromNow()) || "N/A"
                       }}</VcHint>
                     </VcCol>
-                    <VcCol>
+                    <VcCol class="tw-w-full">
                       <VcLabel>{{ $t("ASSETS.PAGES.DETAILS.FIELDS.URL") }}</VcLabel>
-                      <VcRow>
-                        <VcLink
-                          class="vc-link tw-text-s tw-max-w-10 tw-truncate tw-w-max tw-max-w-[100px]"
-                          @click="openLink(defaultAsset.url)"
-                          >{{ defaultAsset.name }}</VcLink
-                        >
+                      <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="openLink(defaultAsset.url)"
+                            >{{ props.options?.asset.name }}</VcLink
+                          >
+                        </div>
                         <VcButton
                           icon="far fa-copy"
                           size="m"
@@ -55,20 +58,32 @@
                           @click="copyLink(defaultAsset.url)"
                           title="Copy link"
                         ></VcButton>
-                      </VcRow>
+                      </div>
                     </VcCol>
                   </VcCol>
                 </VcCol>
               </VcRow>
 
-              <VcInput
-                class="tw-mb-4"
+              <Field
                 :label="$t('ASSETS.PAGES.DETAILS.FIELDS.NAME.TITLE')"
-                v-model="defaultAsset.name"
-                clearable
-                required
-                :placeholder="$t('ASSETS.PAGES.DETAILS.FIELDS.NAME.PLACEHOLDER')"
-              ></VcInput>
+                name="asset_name"
+                rules="required"
+                :modelValue="defaultAsset.name"
+                v-slot="{ errorMessage, handleChange, errors }"
+              >
+                <VcInput
+                  class="tw-mb-4"
+                  :label="$t('ASSETS.PAGES.DETAILS.FIELDS.NAME.TITLE')"
+                  v-model="assetNameClean"
+                  @update:modelValue="handleChange"
+                  clearable
+                  required
+                  :error="!!errors.length"
+                  :error-message="errorMessage"
+                  :placeholder="$t('ASSETS.PAGES.DETAILS.FIELDS.NAME.PLACEHOLDER')"
+                  :disabled="readonly"
+                ></VcInput>
+              </Field>
               <VcInput
                 class="tw-mb-4"
                 :label="$t('ASSETS.PAGES.DETAILS.FIELDS.ALT.TITLE')"
@@ -76,15 +91,15 @@
                 clearable
                 :placeholder="$t('ASSETS.PAGES.DETAILS.FIELDS.ALT.PLACEHOLDER')"
                 :tooltip="$t('ASSETS.PAGES.DETAILS.FIELDS.ALT.TOOLTIP')"
-                required
                 v-if="assetType === 'Image'"
+                :disabled="readonly"
               ></VcInput>
               <VcTextarea
                 class="tw-mb-4"
                 :label="$t('ASSETS.PAGES.DETAILS.FIELDS.DESCRIPTION.TITLE')"
                 v-model="defaultAsset.description"
                 :placeholder="$t('ASSETS.PAGES.DETAILS.FIELDS.DESCRIPTION.PLACEHOLDER')"
-                required
+                :disabled="readonly"
               ></VcTextarea>
             </VcForm>
           </div>
@@ -95,18 +110,20 @@
 </template>
 
 <script lang="ts" setup>
-import { Asset } from "./../../../../../core/types";
+import { Asset, IBladeToolbar } from "./../../../../../core/types";
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { VcBlade, VcContainer, VcForm, VcImage, VcInput, VcTextarea } from "./../../../../../ui/components";
 import { isImage, getFileThumbnail, readableSize } from "./../../../../utilities/assets";
 import moment from "moment";
+import { useIsFormValid, Field, useForm, useIsFormDirty } from "vee-validate";
 
 export interface Props {
   expanded?: boolean;
   closable?: boolean;
   options?: {
     asset: Asset;
+    disabled?: boolean;
     assetEditHandler?: (defaultAsset: Asset) => void;
     assetRemoveHandler?: (defaultAsset: Asset) => void;
   };
@@ -122,10 +139,29 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<Emits>();
+useForm({ validateOnMount: false });
+const isValid = useIsFormValid();
+const isDirty = useIsFormDirty();
 const { t } = useI18n();
 const defaultAsset = ref<Asset>({ ...props.options?.asset });
 
-const bladeToolbar = [
+const readonly = computed(() => props.options.disabled);
+
+const assetNameClean = computed({
+  get() {
+    return defaultAsset.value.name.split(".").shift();
+  },
+  set(value: string) {
+    const fileExtension = defaultAsset.value.name.split(".").pop();
+    defaultAsset.value.name = value + "." + fileExtension;
+  },
+});
+
+const isDisabled = computed(() => {
+  return !isDirty.value || !isValid.value;
+});
+
+const bladeToolbar = ref<IBladeToolbar[]>([
   {
     id: "save",
     title: t("ASSETS.PAGES.DETAILS.TOOLBAR.SAVE"),
@@ -136,6 +172,7 @@ const bladeToolbar = [
         emit("close:blade");
       }
     },
+    disabled: computed(() => isDisabled.value || readonly.value),
   },
   {
     id: "delete",
@@ -147,8 +184,9 @@ const bladeToolbar = [
         emit("close:blade");
       }
     },
+    disabled: computed(() => readonly.value),
   },
-];
+]);
 
 const assetType = computed(() => defaultAsset.value?.typeId);
 

package/shared/modules/assets-manager/components/assets-manager/assets-manager.vue

@@ -18,12 +18,12 @@
         :columns="columns"
         :expanded="expanded"
         stateKey="assets_manager"
-        :reorderableRows="true"
+        :reorderableRows="!readonly"
         :items="defaultAssets"
         :header="false"
         :footer="false"
-        :itemActionBuilder="actionBuilder"
-        multiselect
+        :itemActionBuilder="!readonly && actionBuilder"
+        :multiselect="!readonly"
         class="tw-h-full tw-w-full"
         @item-click="onItemClick"
         @row:reorder="sortAssets"
@@ -147,15 +147,16 @@ import { IBladeEvent, IParentCallArgs } from "./../../../../../shared";
 import moment from "moment";
 import Assets from "./../../../assets/components/assets-details/assets-details.vue";
 import { isImage, getFileThumbnail, readableSize } from "./../../../../utilities/assets";
+import { cloneDeep, isEqual } from "lodash-es";
 
 export interface Props {
   expanded?: boolean;
   closable?: boolean;
   options: {
     assets: Asset[];
-    assetsEditHandler: (assets: Asset[]) => void;
-    assetsUploadHandler: (files: FileList) => void;
-    assetsRemoveHandler: (assets: Asset[]) => void;
+    assetsEditHandler: (assets: Asset[]) => Asset[];
+    assetsUploadHandler: (files: FileList) => Promise<Asset[]>;
+    assetsRemoveHandler: (assets: Asset[]) => Asset[];
     disabled: boolean;
   };
 }
@@ -182,6 +183,9 @@ const isDragging = ref(false);
 const uploader = ref();
 const loading = ref(false);
 const selectedItems = ref([]);
+const readonly = computed(() => props.options.disabled);
+let assetsCopy;
+const modified = ref(false);
 
 const bladeToolbar = ref<IBladeToolbar[]>([
   {
@@ -191,6 +195,7 @@ const bladeToolbar = ref<IBladeToolbar[]>([
     clickHandler() {
       emit("close:blade");
     },
+    disabled: computed(() => !modified.value || readonly.value),
   },
   {
     id: "add",
@@ -199,6 +204,7 @@ const bladeToolbar = ref<IBladeToolbar[]>([
     clickHandler() {
       toggleUploader();
     },
+    disabled: computed(() => readonly.value),
   },
   {
     id: "delete",
@@ -206,11 +212,10 @@ const bladeToolbar = ref<IBladeToolbar[]>([
     icon: "fas fa-trash",
     clickHandler() {
       if (props.options.assetsRemoveHandler && typeof props.options.assetsRemoveHandler === "function") {
-        props.options.assetsRemoveHandler(selectedItems.value);
-        defaultAssets.value = defaultAssets.value.filter((asset) => !selectedItems.value.includes(asset));
+        defaultAssets.value = props.options.assetsRemoveHandler(selectedItems.value);
       }
     },
-    disabled: computed(() => !selectedItems.value.length),
+    disabled: computed(() => !selectedItems.value.length || readonly.value),
   },
 ]);
 
@@ -248,35 +253,48 @@ const columns = ref<ITableColumns[]>([
   },
 ]);
 
+watch(
+  () => defaultAssets.value,
+  (newVal) => {
+    modified.value = !isEqual(newVal, assetsCopy);
+  },
+  { deep: true }
+);
+
 onMounted(() => {
   defaultAssets.value = props.options?.assets;
+  assetsCopy = cloneDeep(props.options?.assets);
 });
 
 function sortAssets(event: { dragIndex: number; dropIndex: number; value: Asset[] }) {
-  if (props.options.assetsEditHandler && typeof props.options.assetsEditHandler === "function") {
+  if (
+    props.options.assetsEditHandler &&
+    typeof props.options.assetsEditHandler === "function" &&
+    event.dragIndex !== event.dropIndex
+  ) {
     const sorted = event.value.map((item, index) => {
       item.sortOrder = index;
       return item;
     });
-    defaultAssets.value = sorted;
-    props.options.assetsEditHandler(sorted);
+
+    defaultAssets.value = props.options.assetsEditHandler(sorted);
   }
 }
 
 function dragOver() {
-  if (!props.options.disabled) {
+  if (!readonly.value) {
     isDragging.value = true;
   }
 }
 
 function dragLeave() {
-  if (!props.options.disabled) {
+  if (!readonly.value) {
     isDragging.value = false;
   }
 }
 
 async function onDrop(event: DragEvent) {
-  if (!props.options.disabled) {
+  if (!readonly.value) {
     const fileList = event.dataTransfer?.files;
 
     if (fileList && fileList.length) {
@@ -295,7 +313,7 @@ async function upload(files: FileList) {
   if (files && files.length) {
     try {
       loading.value = true;
-      await props.options.assetsUploadHandler(files);
+      defaultAssets.value = await props.options.assetsUploadHandler(files);
     } finally {
       loading.value = false;
     }
@@ -316,6 +334,7 @@ function onItemClick(item: Asset) {
     component: shallowRef(Assets),
     bladeOptions: {
       asset: unref(item),
+      disabled: readonly.value,
       assetEditHandler: (asset: Asset) => {
         const mutated = defaultAssets.value.map((x) => {
           if (x.id === asset.id || x.url === asset.url) {
@@ -325,12 +344,11 @@ function onItemClick(item: Asset) {
         });
 
         if (props.options.assetsEditHandler && typeof props.options.assetsEditHandler === "function") {
-          defaultAssets.value = mutated;
-          props.options.assetsEditHandler(mutated);
+          defaultAssets.value = props.options.assetsEditHandler(mutated);
         }
       },
       assetRemoveHandler: (asset: Asset) => {
-        props.options.assetsRemoveHandler([asset]);
+        defaultAssets.value = props.options.assetsRemoveHandler([asset]);
       },
     },
   });
@@ -357,8 +375,7 @@ const actionBuilder = (): IActionBuilderResult[] => {
     variant: "danger",
     leftActions: true,
     clickHandler(item: Asset) {
-      props.options.assetsRemoveHandler([item]);
-      defaultAssets.value = defaultAssets.value.filter((asset) => asset !== item);
+      defaultAssets.value = props.options.assetsRemoveHandler([item]);
       selectedItems.value = [];
     },
   });

package/tailwind.config.js

@@ -47,6 +47,4 @@ module.exports = {
             }
         },
     },
-
-  plugins: [require("@tailwindcss/line-clamp")],
 }

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

@@ -150,7 +150,6 @@ $variants: primary, secondary, special, danger, widget;
     tw-shadow-[1px_4px_10px_rgba(197,206,214,0.24)]
     tw-rounded-[4px]
     tw-p-[15px]
-    tw-border-[color:var(--button-widget-background-color)]
     hover:tw-bg-[color:var(--button-widget-background-color-hover)]
     focus:tw-bg-[color:var(--button-widget-background-color-active)]
     focus:tw-border-[color:var(--button-widget-border-color-active)]

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

@@ -25,6 +25,7 @@
     <!-- Editor field -->
     <QuillEditor
       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 }"
       v-model:content="content"
       theme="snow"
       :toolbar="toolbar"
@@ -147,11 +148,31 @@ function isQuillEmpty(value: string) {
   --editor-border-color: #d3dbe9;
   --editor-border-color-error: #f14e4e;
   --editor-placeholder-color: #a5a5a5;
+
+  --editor-scroll-width: 8px;
+  --editor-scroll-color-hover: #cce4f5;
 }
 
 .vc-editor {
   &_error .quill-editor {
     @apply tw-border tw-border-solid tw-border-[color:var(--editor-border-color-error)] #{!important};
   }
+
+  .quill-editor .ql-editor {
+    &::-webkit-scrollbar {
+      @apply tw-w-[var(--editor-scroll-width)] tw-bg-transparent;
+    }
+
+    &::-webkit-scrollbar-track {
+      @apply tw-bg-transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      @apply tw-bg-[color:var(--editor-scroll-color)]
+      tw-rounded-[calc(var(--editor-scroll-width)/2)]
+      tw-overflow-x-hidden
+      hover:tw-bg-[color:var(--editor-scroll-color-hover)];
+    }
+  }
 }
 </style>

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

@@ -90,7 +90,7 @@
                                   <div
                                     class="tw-bg-[#fbfdfe] tw-border tw-border-solid tw-border-[color:#bdd1df] tw-rounded-[2px] tw-flex tw-items-center tw-h-[28px] tw-box-border tw-px-2"
                                   >
-                                    <span>{{ getOptionLabel(item.opt) }}</span>
+                                    <span>{{ getDisplayLabel(item.opt) }}</span>
                                     <VcIcon
                                       v-if="!disabled"
                                       class="tw-text-[#a9bfd2] tw-ml-2 tw-cursor-pointer hover:tw-text-[color:var(--select-clear-color-hover)]"
@@ -344,6 +344,26 @@ export interface Props {
    * @returns Label of the current option
    */
   optionLabel?: OptionProp;
+  /**
+   * @requires optionValue
+   * @description Similar to optionValue, but used only for displaying selection result in rare cases. **Can't be used without optionValue**
+   *
+   * Property of option which holds the 'value'
+   * Default value: id
+   * @param option The current option being processed
+   * @returns Value of the current option
+   */
+  displayValue?: OptionProp;
+  /**
+   * @requires optionLabel
+   * @description Similar to optionValue, but used only for displaying selection result in rare cases. **Can't be used without optionLabel**
+   *
+   * Property of option which holds the 'label'
+   * Default value: title
+   * @param option The current option being processed
+   * @returns Label of the current option
+   */
+  displayLabel?: OptionProp;
   /**
    * Update model with the value of the selected option instead of the whole option
    */
@@ -548,9 +568,13 @@ const hasNextPage = computed(() => {
   return optionsList.value.length < totalItems.value;
 });
 
-const getOptionValue = computed(() => getPropValueFn(props.optionValue, "value"));
+const getOptionValue = computed(() => getPropValueFn(props.optionValue, "id"));
+
+const getOptionLabel = computed(() => getPropValueFn(props.optionLabel, "title"));
+
+const getDisplayValue = computed(() => getPropValueFn(props.displayValue, "id"));
 
-const getOptionLabel = computed(() => getPropValueFn(props.optionLabel, "label"));
+const getDisplayLabel = computed(() => getPropValueFn(props.displayLabel, "title"));
 
 const innerValue = computed((): Record<string, unknown>[] | string[] => {
   const mapNull = props.mapOptions === true && props.multiple !== true;
@@ -593,7 +617,9 @@ const selectedScope = computed(() => {
 
 const hasValue = computed(() => fieldValueIsFilled(innerValue.value));
 
-const innerOptionsValue = computed(() => innerValue.value.map((opt) => getOptionValue.value(opt)));
+const innerOptionsValue = computed(() =>
+  innerValue.value.map((opt) => getOptionValue.value(opt) || getDisplayValue.value(opt))
+);
 
 const optionScope = computed(() => {
   return optionsTemp.value.map((opt, i) => {
@@ -601,7 +627,7 @@ const optionScope = computed(() => {
       index: i,
       opt,
       selected: isOptionSelected(opt) === true,
-      label: getOptionLabel.value(opt),
+      label: getOptionLabel.value(opt) || getDisplayLabel.value(opt),
       toggleOption,
     };
   });
@@ -624,7 +650,7 @@ function getPropValueFn(propValue: OptionProp, defaultVal: OptionProp) {
 }
 
 function getOption(value: Record<string, unknown> | string, valueCache: Array<Record<string, unknown> | string>) {
-  const fn = (opt) => isEqual(getOptionValue.value(opt), value);
+  const fn = (opt) => isEqual(getOptionValue.value(opt), value) || isEqual(getDisplayValue.value(opt), value);
   return defaultValue.value.find(fn) || optionsList.value.find(fn) || valueCache.find(fn) || value;
 }
 
@@ -649,7 +675,8 @@ function removeAtIndex(index: number) {
 }
 
 function isOptionSelected(opt: Record<string, unknown>) {
-  const val = getOptionValue.value(opt);
+  const val = getOptionValue.value(opt) || getDisplayValue.value(opt);
+
   return innerOptionsValue.value.find((v) => isEqual(v, val)) !== void 0;
 }
 
@@ -722,7 +749,7 @@ function toggleOption(opt: { [x: string]: string }) {
     return;
   }
 
-  const optValue = getOptionValue.value(opt);
+  const optValue = getOptionValue.value(opt) || getDisplayValue.value(opt);
 
   if (props.multiple !== true) {
     if (innerValue.value.length === 0 || isEqual(getOptionValue.value(innerValue.value[0]), optValue) !== true) {
@@ -796,6 +823,10 @@ function emitValue(val: string) {
 }
 
 function onReset() {
+  if (props.multiple) {
+    emit("update:modelValue", []);
+    return;
+  }
   emit("update:modelValue", null);
 }
 </script>

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

@@ -50,7 +50,7 @@ import { VcLabel } from "./../../../components";
 
 export interface Props {
   placeholder?: string;
-  modelValue: string;
+  modelValue?: string;
   required?: boolean;
   disabled?: boolean;
   label?: string;

package/ui/components/organisms/vc-dynamic-property/index.ts

@@ -1,4 +1,3 @@
-import { VNode } from "vue";
 import _DynamicProperty from "./vc-dynamic-property.vue";
 
 export const VcDynamicProperty = _DynamicProperty as typeof _DynamicProperty;

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

@@ -58,9 +58,10 @@
       :disabled="disabled"
       option-label="alias"
       option-value="id"
+      :display-label="displayedValueLabel.label"
+      :display-value="displayedValueLabel.value"
       :multiple="true"
       :emit-value="false"
-      :clearable="false"
     ></VcSelect>
   </Field>
 
@@ -92,11 +93,12 @@
       :options="items"
       option-label="alias"
       option-value="id"
+      :display-label="displayedValueLabel.label"
+      :display-value="displayedValueLabel.value"
       @search="onSearch"
       @close="onClose"
       :multiple="property.multivalue"
       :emit-value="false"
-      :clearable="false"
     ></VcSelect>
   </Field>
 
@@ -154,6 +156,8 @@
       :options="items"
       option-value="id"
       :option-label="handleDisplayProperty"
+      :display-label="displayedValueLabel.label"
+      :display-value="displayedValueLabel.value"
       multiple
     ></VcSelect>
   </Field>
@@ -323,8 +327,8 @@
 
 <script lang="ts" setup>
 import { ref, onMounted, computed } from "vue";
-import { useI18n } from "./../../../../core/composables";
 import { Field } from "vee-validate";
+import { useI18n } from "vue-i18n";
 
 export interface Props {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -348,6 +352,13 @@ export interface Props {
   ) => void | undefined;
   culture?: string;
   disabled?: boolean;
+  /**
+   * @description Used only with multiple selection **only** in rare cases, where we need to display selection with other value-label pair
+   */
+  displayedValueLabel?: {
+    value: string;
+    label: string;
+  };
 }
 
 export interface PropertyItem {