@vc-shell/framework 1.0.39 → 1.0.41

package/{components → ui/components}/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue

@@ -49,7 +49,7 @@ export default defineComponent({
 </script>
 
 <script lang="ts" setup>
-import { VcIcon } from "@/components";
+import { VcIcon } from "@/ui/components";
 import { createPopper, Instance } from "@popperjs/core";
 import { IBladeDropdownItem } from "@/core/types";
 
@@ -166,57 +166,57 @@ function handleDropItemClick(item: IBladeDropdownItem) {
 }
 
 .vc-blade-toolbar-button {
-  @apply px-2 bg-[color:var(--blade-toolbar-button-background-color)] box-border cursor-pointer;
+  @apply tw-px-2 tw-bg-[color:var(--blade-toolbar-button-background-color)] tw-box-border tw-cursor-pointer;
 
   &__wrap {
-    @apply inline-flex flex-col justify-center items-center relative;
+    @apply tw-inline-flex tw-flex-col tw-justify-center tw-items-center tw-relative;
   }
 
   &__title {
-    @apply text-sm whitespace-nowrap mt-1 text-[color:var(--blade-toolbar-button-title-color)];
+    @apply tw-text-sm tw-whitespace-nowrap tw-mt-1 tw-text-[color:var(--blade-toolbar-button-title-color)];
   }
 
   &__icon {
-    @apply text-[color:var(--blade-toolbar-button-icon-color)];
+    @apply tw-text-[color:var(--blade-toolbar-button-icon-color)];
   }
 
   &__dropdown {
-    @apply absolute bg-white z-[9999] shadow-[1px_1px_22px_rgba(126,142,157,0.2)];
+    @apply tw-absolute tw-bg-white tw-z-[9999] tw-shadow-[1px_1px_22px_rgba(126,142,157,0.2)];
   }
 
   &__dropdown-item {
-    @apply p-3 text-lg text-black border-l border-solid
-    border-l-[#eef0f2] border-b border-b-[#eef0f2]
-    bg-white cursor-pointer flex flex-row items-center
-    hover:bg-[#eff7fc];
+    @apply tw-p-3 tw-text-lg tw-text-black tw-border-l tw-border-solid
+    tw-border-l-[#eef0f2] tw-border-b tw-border-b-[#eef0f2]
+    tw-bg-white tw-cursor-pointer tw-flex tw-flex-row tw-items-center
+    hover:tw-bg-[#eff7fc];
   }
 
   &__dropdown-item-icon {
-    @apply text-[#a9bfd2] mr-2;
+    @apply tw-text-[#a9bfd2] tw-mr-2;
   }
 
   &:hover {
-    @apply bg-[color:var(--blade-toolbar-button-background-color-hover)];
+    @apply tw-bg-[color:var(--blade-toolbar-button-background-color-hover)];
 
     .vc-blade-toolbar-button__title {
-      @apply text-[color:var(--blade-toolbar-button-title-color-hover)];
+      @apply tw-text-[color:var(--blade-toolbar-button-title-color-hover)];
     }
 
     .vc-blade-toolbar-button__icon {
-      @apply text-[color:var(--blade-toolbar-button-icon-color-hover)];
+      @apply tw-text-[color:var(--blade-toolbar-button-icon-color-hover)];
     }
   }
 
   &_disabled,
   &_disabled:hover {
-    @apply bg-[color:var(--blade-toolbar-button-background-color-disabled)] cursor-default;
+    @apply tw-bg-[color:var(--blade-toolbar-button-background-color-disabled)] tw-cursor-default;
 
     .vc-blade-toolbar-button__title {
-      @apply text-[color:var(--blade-toolbar-button-title-color-disabled)];
+      @apply tw-text-[color:var(--blade-toolbar-button-title-color-disabled)];
     }
 
     .vc-blade-toolbar-button__icon {
-      @apply text-[color:var(--blade-toolbar-button-icon-color-disabled)];
+      @apply tw-text-[color:var(--blade-toolbar-button-icon-color-disabled)];
     }
   }
 }

package/{components → ui/components}/organisms/vc-blade/_internal/vc-blade-toolbar/vc-blade-toolbar.vue

@@ -1,11 +1,11 @@
 <template>
   <div
     v-if="isToolbarVisible()"
-    class="h-[var(--blade-toolbar-height)] bg-[color:var(--blade-toolbar-background-color)] border-b-[color:#eaedf3] border-solid border-b flex box-border w-full content-center items-stretch shrink-0"
-    :class="{ '!h-[var(--blade-toolbar-height-expanded)]': isExpanded }"
+    class="tw-h-[var(--blade-toolbar-height)] tw-bg-[color:var(--blade-toolbar-background-color)] tw-border-b-[color:#eaedf3] tw-border-solid tw-border-b tw-flex tw-box-border tw-w-full tw-content-center tw-items-stretch tw-shrink-0"
+    :class="{ '!tw-h-[var(--blade-toolbar-height-expanded)]': isExpanded }"
   >
     <div
-      class="grow basis-0 flex content-start items-center overflow-x-auto px-2"
+      class="tw-grow tw-basis-0 tw-flex tw-content-start tw-items-center tw-overflow-x-auto tw-px-2"
     >
       <template v-for="item in items" :key="item.id">
         <VcBladeToolbarButton
@@ -16,7 +16,7 @@
       </template>
     </div>
     <VcIcon
-      class="self-center justify-self-center text-[#a1c0d4] cursor-pointer mr-4 hover:text-[#7ea8c4]"
+      class="tw-self-center tw-justify-self-center tw-text-[#a1c0d4] tw-cursor-pointer tw-mr-4 hover:tw-text-[#7ea8c4]"
       :icon="`fas fa-chevron-${isExpanded ? 'up' : 'down'}`"
       @click="toggleToolbar"
     ></VcIcon>

package/{components → ui/components}/organisms/vc-blade/vc-blade.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    class="vc-blade relative flex shrink-0 flex-col bg-[color:var(--blade-background-color)] rounded-[var(--blade-border-radius)] shadow-[2px_2px_8px_rgba(126,142,157,0.14)] my-4 mx-2 overflow-hidden transition-[width] duration-200"
+    class="vc-blade tw-relative tw-flex tw-shrink-0 tw-flex-col tw-bg-[color:var(--blade-background-color)] tw-rounded-[var(--blade-border-radius)] tw-shadow-[2px_2px_8px_rgba(126,142,157,0.14)] tw-my-4 tw-mx-2 tw-overflow-hidden  tw-transition-[width]  tw-duration-200"
     :style="{ width: typeof width === 'number' ? `${width}px` : width }"
-    :class="[$attrs.class, { '!w-full shrink': $isMobile.value || expanded }]"
+    :class="[$attrs.class, { '!tw-w-full tw-shrink': $isMobile.value || expanded }]"
   >
     <!-- Init blade header -->
     <VcBladeHeader
-      class="shrink-0"
+      class="tw-shrink-0"
       v-if="!$isMobile.value || closable"
       :expanded="expanded"
       :closable="closable"
@@ -21,7 +21,7 @@
     </VcBladeHeader>
 
     <!-- Set up blade toolbar -->
-    <VcBladeToolbar class="shrink-0" :items="toolbarItems"></VcBladeToolbar>
+    <VcBladeToolbar class="tw-shrink-0" :items="toolbarItems"></VcBladeToolbar>
 
     <slot></slot>
   </div>
@@ -82,6 +82,6 @@ defineProps({
 }
 
 .vc-app_mobile .vc-blade {
-  @apply m-0 rounded-none;
+  @apply tw-m-0 tw-rounded-none;
 }
 </style>

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

@@ -0,0 +1,426 @@
+<template>
+  <Field
+    v-if="
+      (property.dictionary || property.isDictionary) && !property.multivalue
+    "
+    v-slot="{ field, errorMessage, handleChange, errors }"
+    :name="property.displayName || property.name"
+    :modelValue="getter(property, true)"
+    :rules="rules"
+  >
+    <VcSelect
+      v-bind="$attrs"
+      :error="!!errors.length"
+      :error-message="errorMessage"
+      :label="handleDisplayName || property.displayName"
+      :modelValue="getter(property, true)"
+      @update:modelValue="
+        (e) => {
+          handleChange(e);
+          setter(property, e, items);
+        }
+      "
+      :required="property.required || property.isRequired"
+      :placeholder="handleDisplayName || property.defaultValue"
+      :options="items"
+      option-value="id"
+      :option-label="handleDisplayProperty"
+      :disabled="disabled"
+      searchable
+      @search="onSearch"
+      @close="onClose"
+    ></VcSelect>
+  </Field>
+
+  <Field
+    v-else-if="
+      property.valueType === 'ShortText' &&
+      property.multivalue &&
+      !(property.dictionary || property.isDictionary)
+    "
+    v-slot="{ field, errorMessage, handleChange }"
+    :name="property.name"
+    :modelValue="property.values"
+    :rules="rules"
+  >
+    <VcMultivalue
+      v-bind="$attrs"
+      :error-message="errorMessage"
+      :label="handleDisplayName"
+      :modelValue="property.values"
+      @update:modelValue="
+        (e) => {
+          handleChange(e);
+          setter(property, e);
+        }
+      "
+      :required="property.required || property.isRequired"
+      placeholder="Add value"
+      :disabled="disabled"
+    ></VcMultivalue>
+  </Field>
+
+  <Field
+    v-else-if="
+      property.valueType === 'ShortText' &&
+      property.multivalue &&
+      (property.dictionary || property.isDictionary)
+    "
+    v-slot="{ field, errorMessage, handleChange }"
+    :name="property.name"
+    :modelValue="property.values"
+    :rules="rules"
+  >
+    <VcMultivalue
+      v-bind="$attrs"
+      :error-message="errorMessage"
+      :label="handleDisplayName"
+      :modelValue="property.values"
+      @update:modelValue="
+        (e) => {
+          handleChange(e);
+          setter(property, e, items);
+        }
+      "
+      :required="property.required || property.isRequired"
+      placeholder="Add value"
+      :multivalue="property.multivalue"
+      :disabled="disabled"
+      :options="items"
+      keyProperty="id"
+      displayProperty="alias"
+      @search="onSearch"
+      @close="onClose"
+    ></VcMultivalue>
+  </Field>
+
+  <Field
+    v-else-if="property.valueType === 'ShortText'"
+    v-slot="{ field, errorMessage, handleChange, errors }"
+    :name="property.displayName || property.name"
+    :modelValue="getter(property)"
+    :rules="rules"
+  >
+    <VcInput
+      v-bind="$attrs"
+      :error="!!errors.length"
+      :error-message="errorMessage"
+      :label="handleDisplayName || property.displayName"
+      :modelValue="getter(property)"
+      @update:modelValue="
+        (e) => {
+          handleChange(e);
+          setter(property, e);
+        }
+      "
+      clearable
+      :required="property.required || property.isRequired"
+      :placeholder="handleDisplayName || 'Add value'"
+      :disabled="disabled"
+    ></VcInput>
+  </Field>
+
+  <Field
+    v-else-if="property.valueType === 'Number' && property.multivalue"
+    v-slot="{ field, errorMessage, handleChange }"
+    :name="property.name"
+    :modelValue="property.values"
+    :rules="rules"
+  >
+    <VcMultivalue
+      v-bind="$attrs"
+      :error-message="errorMessage"
+      :label="handleDisplayName"
+      :modelValue="property.values"
+      @update:modelValue="
+        (e) => {
+          handleChange(e);
+          setter(property, e);
+        }
+      "
+      type="number"
+      :required="property.required || property.isRequired"
+      placeholder="Add value"
+      :disabled="disabled"
+    ></VcMultivalue>
+  </Field>
+
+  <Field
+    v-else-if="property.valueType === 'Number'"
+    v-slot="{ field, errorMessage, handleChange, errors }"
+    :name="property.name"
+    :modelValue="getter(property)"
+    :rules="rules"
+  >
+    <VcInput
+      v-bind="$attrs"
+      :error="!!errors.length"
+      :error-message="errorMessage"
+      :label="handleDisplayName"
+      :modelValue="getter(property)"
+      @update:modelValue="
+        (e) => {
+          handleChange(e);
+          setter(property, e);
+        }
+      "
+      clearable
+      type="number"
+      :required="property.required || property.isRequired"
+      :placeholder="handleDisplayName || property.defaultValue"
+      :disabled="disabled"
+    ></VcInput>
+  </Field>
+
+  <Field
+    v-else-if="property.valueType === 'Integer'"
+    v-slot="{ field, errorMessage, handleChange, errors }"
+    :name="property.name"
+    :modelValue="getter(property)"
+    :rules="rules"
+  >
+    <VcInput
+      v-bind="$attrs"
+      :error="!!errors.length"
+      :error-message="errorMessage"
+      :label="handleDisplayName"
+      :modelValue="getter(property)"
+      @update:modelValue="
+        (e) => {
+          handleChange(e);
+          setter(property, e);
+        }
+      "
+      clearable
+      type="number"
+      step="1"
+      :required="property.required || property.isRequired"
+      :placeholder="handleDisplayName || property.defaultValue"
+      :disabled="disabled"
+    ></VcInput>
+  </Field>
+
+  <Field
+    v-else-if="property.valueType === 'DateTime'"
+    v-slot="{ field, errorMessage, handleChange, errors }"
+    :name="property.name"
+    :modelValue="getter(property)"
+    :rules="rules"
+  >
+    <VcInput
+      v-bind="$attrs"
+      :error="!!errors.length"
+      :error-message="errorMessage"
+      :label="handleDisplayName"
+      :modelValue="getter(property)"
+      @update:modelValue="
+        (e) => {
+          handleChange(e);
+          setter(property, e);
+        }
+      "
+      type="datetime-local"
+      :required="property.required || property.isRequired"
+      :placeholder="handleDisplayName || property.defaultValue"
+      :disabled="disabled"
+    ></VcInput>
+  </Field>
+
+  <Field
+    v-else-if="property.valueType === 'LongText'"
+    v-slot="{ field, errorMessage, handleChange }"
+    :name="property.name"
+    :modelValue="getter(property)"
+    :rules="rules"
+  >
+    <VcTextarea
+      v-bind="$attrs"
+      :error-message="errorMessage"
+      :label="handleDisplayName"
+      :modelValue="getter(property)"
+      @update:modelValue="
+        (e) => {
+          handleChange(e);
+          setter(property, e);
+        }
+      "
+      :isRequired="property.required || property.isRequired"
+      :placeholder="handleDisplayName || property.defaultValue"
+      :disabled="disabled"
+    ></VcTextarea>
+  </Field>
+
+  <Field
+    v-else-if="property.valueType === 'Boolean'"
+    v-slot="{ field, errorMessage, handleChange }"
+    :name="property.displayName || property.name"
+    :modelValue="getter(property)"
+    :rules="rules"
+  >
+    <VcCheckbox
+      v-bind="$attrs"
+      :error-message="errorMessage"
+      :modelValue="getter(property)"
+      @update:modelValue="
+        (e) => {
+          handleChange(e);
+          setter(property, e);
+        }
+      "
+      :required="property.required || property.isRequired"
+      :disabled="disabled"
+      :name="property.displayName || property.name"
+    >
+      {{ handleDisplayName || property.displayName }}
+    </VcCheckbox>
+  </Field>
+
+  <Field
+    v-else-if="property.valueType === 'Html'"
+    v-slot="{ field, errorMessage, handleChange }"
+    :name="property.displayName || property.name"
+    :modelValue="getter(property)"
+    :rules="rules"
+  >
+    <VcEditor
+      v-bind="$attrs"
+      :label="handleDisplayName || property.displayName"
+      :modelValue="getter(property)"
+      @update:modelValue="
+        (e) => {
+          handleChange(e);
+          setter(property, e);
+        }
+      "
+      :required="property.required || property.isRequired"
+      :placeholder="handleDisplayName || 'Add value'"
+      :disabled="disabled"
+      :name="property.displayName || property.name"
+      :error-message="errorMessage"
+    >
+    </VcEditor>
+  </Field>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, computed } from "vue";
+import { useI18n } from "@/core/composables";
+import { Field } from "vee-validate";
+
+interface IValidationRules {
+  required?: boolean;
+  min?: number;
+  max?: number;
+  regex?: RegExp;
+}
+
+interface IDisplayName {
+  languageCode: string;
+  name?: string;
+}
+
+const props = defineProps({
+  property: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  dictionaries: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  getter: {
+    type: Function,
+  },
+
+  optionsGetter: {
+    type: Function,
+  },
+
+  setter: {
+    type: Function,
+  },
+
+  culture: {
+    type: String,
+    default: "en-US",
+  },
+
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { locale, te, t } = useI18n();
+
+const rules: IValidationRules = {};
+const items = ref([]);
+const handleDisplayProperty = computed(() => {
+  return items.value?.some((x: { alias: string }) => x.alias)
+    ? "alias"
+    : "name";
+});
+const handleDisplayName = computed(() => {
+  let localized: string;
+  const isLocaleExists = props.property.displayNames?.find((x: IDisplayName) =>
+    x.languageCode
+      ?.toLowerCase()
+      .startsWith((locale.value as string)?.toLowerCase())
+  );
+  if (isLocaleExists && isLocaleExists.name) {
+    localized = isLocaleExists.name;
+  } else {
+    const fallback = props.property.displayNames?.find((x: IDisplayName) =>
+      x.languageCode?.toLowerCase().includes(props.culture?.toLowerCase())
+    );
+    localized =
+      fallback && fallback?.name ? fallback.name : props.property.name;
+  }
+
+  return localized && te(localized.toUpperCase())
+    ? t(localized.toUpperCase())
+    : localized;
+});
+
+onMounted(async () => {
+  if (props.optionsGetter) {
+    items.value = await props.optionsGetter(props.property);
+  }
+});
+
+if (props.property.required || props.property.isRequired) {
+  rules.required = true;
+}
+if (props.property.validationRule?.charCountMin) {
+  rules.min = Number(props.property.validationRule.charCountMin);
+}
+if (props.property.validationRule?.charCountMax) {
+  rules.max = Number(props.property.validationRule.charCountMax);
+}
+if (props.property.validationRule?.regExp) {
+  rules.regex = new RegExp(props.property.validationRule?.regExp);
+}
+
+/*function getLabel() {
+  return (
+    (props.property.displayNames as { culture: string }[]).find(
+      (item) => item.culture === props.culture
+    ) || props.property.name
+  );
+}
+ */
+
+async function onSearch(keyword: string) {
+  if (props.optionsGetter) {
+    items.value = await props.optionsGetter(props.property, keyword);
+  }
+}
+
+async function onClose() {
+  if (props.optionsGetter) {
+    items.value = await props.optionsGetter(props.property);
+  }
+}
+</script>

package/{components → ui/components}/organisms/vc-gallery/_internal/vc-gallery-item/vc-gallery-item.vue

@@ -10,18 +10,18 @@
   >
     <VcImage aspect="1x1" :src="image.url" background="contain"></VcImage>
     <div class="vc-gallery-item__overlay">
-      <div class="flex">
+      <div class= "tw-flex">
         <VcIcon
           v-if="!readonly && !disableDrag"
           class="vc-gallery-item__move"
           icon="fas fa-arrows-alt"
           size="s"
         ></VcIcon>
-        <div class="truncate" :title="image.name">
+        <div class="tw-truncate" :title="image.name">
           {{ image.name }}
         </div>
       </div>
-      <div class="flex grow basis-0 items-center justify-around">
+      <div class= "tw-flex tw-grow tw-basis-0 tw-items-center tw-justify-around">
         <div
           class="vc-gallery-item__button"
           @click="$emit('preview', image)"
@@ -31,7 +31,7 @@
             class="vc-gallery-item__button-icon"
             icon="fas fa-eye"
           ></VcIcon>
-          <div class="mt-2">Fullscreen</div>
+          <div class="tw-mt-2">Fullscreen</div>
         </div>
         <div
           v-if="!readonly && actions && actions.edit"
@@ -42,7 +42,7 @@
             class="vc-gallery-item__button-icon"
             icon="fas fa-pen"
           ></VcIcon>
-          <div class="mt-2">Edit</div>
+          <div class="tw-mt-2">Edit</div>
         </div>
         <div
           v-if="!readonly && actions && actions.remove"
@@ -53,7 +53,7 @@
             class="vc-gallery-item__button-icon"
             icon="fas fa-trash"
           ></VcIcon>
-          <div class="mt-2">Delete</div>
+          <div class="tw-mt-2">Delete</div>
         </div>
       </div>
     </div>
@@ -97,26 +97,26 @@ function onClose() {
 
 <style lang="scss">
 .vc-gallery-item {
-  @apply relative w-[155px] h-[155px] box-border border border-solid border-[#d3dae9] rounded-md p-1;
+  @apply tw-relative tw-w-[155px] tw-h-[155px] tw-box-border tw-border tw-border-solid tw-border-[#d3dae9] tw-rounded-md tw-p-1;
 
   &__overlay {
-    @apply bg-[rgba(238,246,252,0.97)] flex-col p-2 opacity-0 flex absolute left-0 top-0 right-0 bottom-0 transition duration-200;
+    @apply tw-bg-[rgba(238,246,252,0.97)] tw-flex-col tw-p-2 tw-opacity-0 tw-flex tw-absolute tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-transition  tw-duration-200;
   }
 
   &:hover &__overlay,
   .vc-app_touch &_hover &__overlay {
-    @apply opacity-100;
+    @apply tw-opacity-100;
   }
 
   &__move {
-    @apply text-[#a1c0d4] cursor-pointer mr-2;
+    @apply tw-text-[#a1c0d4] tw-cursor-pointer tw-mr-2;
   }
 
   &__button {
-    @apply cursor-pointer flex flex-col items-center;
+    @apply tw-cursor-pointer tw-flex tw-flex-col tw-items-center;
 
     &-icon {
-      @apply text-[#319ed4];
+      @apply tw-text-[#319ed4];
     }
   }
 }