@vc-shell/framework 1.0.38 → 1.0.39

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

@@ -0,0 +1,292 @@
+<template>
+    <Field v-if="(property.dictionary || property.isDictionary) && !property.multivalue" v-slot="{field, errorMessage, handleChange}" :name="property.displayName || property.name" :modelValue="getter(property, true)" :rules="rules">
+        <VcSelect
+                v-bind="$attrs"
+                :error-message="errorMessage"
+                :label="handleDisplayName || property.displayName"
+                :modelValue="getter(property, true)"
+                @update:modelValue="(e) => {handleChange(e); setter(property, e, items)}"
+                :isRequired="property.required || property.isRequired"
+                :placeholder="handleDisplayName || property.defaultValue"
+                :options="items"
+                keyProperty="id"
+                :displayProperty="handleDisplayProperty"
+                :is-disabled="disabled"
+                :isSearchable="true"
+                @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}" :name="property.displayName || property.name" :modelValue="getter(property)" :rules="rules">
+        <VcInput
+                v-bind="$attrs"
+                :error-message="errorMessage"
+                :label="handleDisplayName || property.displayName"
+                :modelValue="getter(property)"
+                @update:modelValue="(e) => {handleChange(e); setter(property, e)}"
+                :clearable="true"
+                :isRequired="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}" :name="property.name" :modelValue="getter(property)" :rules="rules">
+        <VcInput
+                v-bind="$attrs"
+                :error-message="errorMessage"
+                :label="handleDisplayName"
+                :modelValue="getter(property)"
+                @update:modelValue="(e) => {handleChange(e); setter(property, e)}"
+                :clearable="true"
+                type="number"
+                :isRequired="property.required || property.isRequired"
+                :placeholder="handleDisplayName || property.defaultValue"
+                :disabled="disabled"
+        ></VcInput>
+    </Field>
+
+    <Field  v-else-if="property.valueType === 'Integer'" v-slot="{field, errorMessage, handleChange}" :name="property.name" :modelValue="getter(property)" :rules="rules">
+      <VcInput
+              v-bind="$attrs"
+              :error-message="errorMessage"
+              :label="handleDisplayName"
+              :modelValue="getter(property)"
+              @update:modelValue="(e) => {handleChange(e); setter(property, e)}"
+              :clearable="true"
+              type="number"
+              step="1"
+              :isRequired="property.required || property.isRequired"
+              :placeholder="handleDisplayName || property.defaultValue"
+              :disabled="disabled"
+      ></VcInput>
+    </Field>
+
+    <Field v-else-if="property.valueType === 'DateTime'" v-slot="{field, errorMessage, handleChange}" :name="property.name" :modelValue="getter(property)" :rules="rules">
+      <VcInput
+              v-bind="$attrs"
+              :error-message="errorMessage"
+              :label="handleDisplayName"
+              :modelValue="getter(property)"
+              @update:modelValue="(e) => {handleChange(e); setter(property, e)}"
+              type="datetime-local"
+              :isRequired="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/organisms/vc-gallery/_internal/vc-gallery-item/vc-gallery-item.vue

@@ -0,0 +1,123 @@
+<template>
+  <div
+    class="vc-gallery-item"
+    :class="{
+      'vc-gallery-item_readonly': readonly,
+      'vc-gallery-item_hover': hover,
+    }"
+    @tap.stop="hover = !hover"
+    v-click-outside="onClose"
+  >
+    <VcImage aspect="1x1" :src="image.url" background="contain"></VcImage>
+    <div class="vc-gallery-item__overlay">
+      <div class="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">
+          {{ image.name }}
+        </div>
+      </div>
+      <div class="flex grow basis-0 items-center justify-around">
+        <div
+          class="vc-gallery-item__button"
+          @click="$emit('preview', image)"
+          v-if="actions && actions.preview"
+        >
+          <VcIcon
+            class="vc-gallery-item__button-icon"
+            icon="fas fa-eye"
+          ></VcIcon>
+          <div class="mt-2">Fullscreen</div>
+        </div>
+        <div
+          v-if="!readonly && actions && actions.edit"
+          class="vc-gallery-item__button"
+          @click="$emit('edit', image)"
+        >
+          <VcIcon
+            class="vc-gallery-item__button-icon"
+            icon="fas fa-pen"
+          ></VcIcon>
+          <div class="mt-2">Edit</div>
+        </div>
+        <div
+          v-if="!readonly && actions && actions.remove"
+          class="vc-gallery-item__button"
+          @click="$emit('remove', image)"
+        >
+          <VcIcon
+            class="vc-gallery-item__button-icon"
+            icon="fas fa-trash"
+          ></VcIcon>
+          <div class="mt-2">Delete</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { clickOutside as vClickOutside } from "@/core/directives";
+
+defineProps({
+  image: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+
+  actions: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  disableDrag: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+defineEmits(["preview", "edit", "remove"]);
+
+const hover = ref(false);
+
+function onClose() {
+  hover.value = false;
+}
+</script>
+
+<style lang="scss">
+.vc-gallery-item {
+  @apply relative w-[155px] h-[155px] box-border border border-solid border-[#d3dae9] rounded-md 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;
+  }
+
+  &:hover &__overlay,
+  .vc-app_touch &_hover &__overlay {
+    @apply opacity-100;
+  }
+
+  &__move {
+    @apply text-[#a1c0d4] cursor-pointer mr-2;
+  }
+
+  &__button {
+    @apply cursor-pointer flex flex-col items-center;
+
+    &-icon {
+      @apply text-[#319ed4];
+    }
+  }
+}
+</style>

package/components/organisms/vc-gallery/_internal/vc-gallery-preview/vc-gallery-preview.vue

@@ -0,0 +1,93 @@
+<template>
+  <VcPopup :title="currentImage.title" @close="$emit('close')">
+    <template v-slot:title>
+      <div>
+        <span>{{ currentImage.name }} (</span>
+        <VcLink @click="copyLink(currentImage.url)">copy image link</VcLink>
+        <span>)</span>
+      </div>
+    </template>
+    <div class="w-full h-full box-border flex flex-col items-center">
+      <div class="box-border p-5 grow basis-0 w-full">
+        <div
+          class="bg-contain bg-no-repeat bg-center w-full h-full box-border"
+          :style="{ backgroundImage: 'url(' + currentImage.url + ')' }"
+        ></div>
+        <div
+          v-if="localIndex > 0"
+          class="absolute top-2/4 -mt-9 h-[72px] w-[72px] flex items-center justify-center rounded-full bg-[#f1f6fa] cursor-pointer text-[#a1c0d4] [--icon-size-xl: 36px] hover:shadow-[0_0_20px_rgba(31,40,50,0.15)] left-[25px]"
+          @click="localIndex--"
+        >
+          <VcIcon icon="fas fa-arrow-left" size="xl"></VcIcon>
+        </div>
+        <div
+          v-if="localIndex < images.length - 1"
+          class="absolute top-2/4 -mt-9 h-[72px] w-[72px] flex items-center justify-center rounded-full bg-[#f1f6fa] cursor-pointer text-[#a1c0d4] [--icon-size-xl: 36px] hover:shadow-[0_0_20px_rgba(31,40,50,0.15)] right-[25px]"
+          @click="localIndex++"
+        >
+          <VcIcon icon="fas fa-arrow-right" size="xl"></VcIcon>
+        </div>
+      </div>
+      <div
+        class="p-4 pb-[40px] max-w-full overflow-x-auto box-border shrink flex"
+      >
+        <div
+          v-for="(item, i) in images"
+          :key="i"
+          class="m-1 opacity-60"
+          :class="{
+            'vc-gallery-preview__images-item_current': i === localIndex,
+          }"
+        >
+          <VcImage
+            :src="item.url"
+            size="xl"
+            :bordered="true"
+            :clickable="true"
+            @click="localIndex = i"
+          ></VcImage>
+        </div>
+      </div>
+    </div>
+  </VcPopup>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { VcPopup } from "@/components";
+
+const props = defineProps({
+  images: {
+    type: Array,
+    default: () => [],
+  },
+
+  index: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const localIndex = ref(props.index);
+const currentImage = computed(() => props.images[localIndex.value] || {});
+
+const copyLink = (link: string) => {
+  if (link.charAt(0) === "/") {
+    navigator.clipboard?.writeText(`${location.origin}${link}`);
+  } else {
+    navigator.clipboard?.writeText(link);
+  }
+};
+</script>
+
+<style lang="scss">
+.vc-gallery-preview {
+  &__images {
+    &-item {
+      &_current {
+        @apply relative opacity-100 after:content-[""] after:bg-[#43b0e6] after:h-1 after:w-full after:rounded-[5px] after:absolute after:left-0 after:-bottom-[12px];
+      }
+    }
+  }
+}
+</style>

package/components/organisms/vc-gallery/vc-gallery.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="vc-gallery">
+    <VcLabel
+      v-if="label"
+      :tooltip="tooltip"
+      :required="required"
+      :tooltip-icon="tooltipIcon"
+    >
+      {{ label }}
+    </VcLabel>
+
+    <template v-if="(images && images.length) || !disabled">
+      <div class="flex flex-wrap">
+        <draggable
+          :list="images"
+          class="flex flex-wrap w-full"
+          tag="transition-group"
+          v-bind="dragOptions"
+          @change="updateOrder"
+          :component-data="{
+            tag: 'div',
+          }"
+        >
+          <template #item="{ element, index }">
+            <VcGalleryItem
+              class="m-2"
+              :key="element.sortOrder"
+              :image="element"
+              :readonly="disabled"
+              @preview="onPreviewClick(index)"
+              @edit="$emit('item:edit', $event)"
+              @remove="$emit('item:remove', $event)"
+              :actions="itemActions"
+              :disableDrag="disableDrag"
+            ></VcGalleryItem>
+          </template>
+          <template #footer>
+            <VcFileUpload
+              v-if="!disabled && !hideAfterUpload"
+              class="m-2"
+              :icon="uploadIcon"
+              @upload="onUpload"
+              :variant="variant"
+              :multiple="multiple"
+              :rules="rules"
+              :name="name"
+            ></VcFileUpload>
+          </template>
+        </draggable>
+      </div>
+    </template>
+    <div v-else class="flex justify-center p-5">
+      <VcHint>Gallery is empty</VcHint>
+    </div>
+
+    <VcGalleryPreview
+      v-if="preview"
+      :images="images"
+      :index="previewImageIndex"
+      @close="preview = false"
+    ></VcGalleryPreview>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, PropType, ref } from "vue";
+import { VcLabel, VcFileUpload } from "@/components";
+import VcGalleryItem from "./_internal/vc-gallery-item/vc-gallery-item.vue";
+import VcGalleryPreview from "./_internal/vc-gallery-preview/vc-gallery-preview.vue";
+import { IImage } from "@/core/types";
+
+const props = defineProps({
+  images: {
+    type: Array as PropType<IImage[]>,
+    default: () => [],
+  },
+
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  required: {
+    type: Boolean,
+    default: false,
+  },
+
+  label: {
+    type: String,
+    default: undefined,
+  },
+
+  tooltip: {
+    type: String,
+    default: undefined,
+  },
+
+  tooltipIcon: {
+    type: String,
+    default: "fas fa-info",
+  },
+
+  uploadIcon: {
+    type: String,
+    default: "fas fa-upload",
+  },
+
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+
+  variant: {
+    type: String,
+    default: "gallery",
+  },
+
+  itemActions: {
+    type: Object,
+    default: () => ({
+      preview: true,
+      edit: true,
+      remove: true,
+    }),
+  },
+
+  disableDrag: {
+    type: Boolean,
+    default: false,
+  },
+
+  hideAfterUpload: {
+    type: Boolean,
+    default: false,
+  },
+
+  rules: {
+    type: [String, Object],
+  },
+
+  name: {
+    type: String,
+    default: "Gallery",
+  },
+});
+
+const emit = defineEmits([
+  "upload",
+  "sort",
+  "item:preview",
+  "item:edit",
+  "item:remove",
+  "item:move",
+]);
+
+const preview = ref(false);
+const previewImageIndex = ref();
+const dragOptions = computed(() => {
+  return {
+    animation: 200,
+    group: "description",
+    disabled: props.disableDrag,
+    ghostClass: "ghost",
+  };
+});
+
+const onUpload = (files: FileList) => {
+  if (files && files.length) {
+    emit("upload", files);
+  }
+};
+
+const onPreviewClick = (index: number) => {
+  preview.value = true;
+  previewImageIndex.value = index;
+};
+
+const updateOrder = () => {
+  const images = props.images;
+  const sortedImgs = images.map((item, index) => {
+    item.sortOrder = index;
+    return item;
+  });
+  emit("sort", ref(sortedImgs).value);
+};
+</script>