@vc-shell/framework 1.0.38 → 1.0.40

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/ui/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= "tw-flex">
+        <VcIcon
+          v-if="!readonly && !disableDrag"
+          class="vc-gallery-item__move"
+          icon="fas fa-arrows-alt"
+          size="s"
+        ></VcIcon>
+        <div class="tw-truncate" :title="image.name">
+          {{ image.name }}
+        </div>
+      </div>
+      <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)"
+          v-if="actions && actions.preview"
+        >
+          <VcIcon
+            class="vc-gallery-item__button-icon"
+            icon="fas fa-eye"
+          ></VcIcon>
+          <div class="tw-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="tw-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="tw-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 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 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 tw-opacity-100;
+  }
+
+  &__move {
+    @apply tw-text-[#a1c0d4] tw-cursor-pointer tw-mr-2;
+  }
+
+  &__button {
+    @apply tw-cursor-pointer tw-flex tw-flex-col tw-items-center;
+
+    &-icon {
+      @apply tw-text-[#319ed4];
+    }
+  }
+}
+</style>

package/ui/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="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center">
+      <div class="tw-box-border p-5 tw-grow tw-basis-0 tw-w-full">
+        <div
+          class="bg-contain tw-bg-no-repeat tw-bg-center tw-w-full tw-h-full tw-box-border"
+          :style="{ backgroundImage: 'url(' + currentImage.url + ')' }"
+        ></div>
+        <div
+          v-if="localIndex > 0"
+          class="tw-absolute tw-top-2/4 -tw-mt-9 tw-h-[72px] tw-w-[72px] tw-flex tw-items-center tw-justify-center tw-rounded-full tw-bg-[#f1f6fa] tw-cursor-pointer tw-text-[#a1c0d4] [--icon-size-xl: 36px] hover:tw-shadow-[0_0_20px_rgba(31,40,50,0.15)] tw-left-[25px]"
+          @click="localIndex--"
+        >
+          <VcIcon icon="fas fa-arrow-left" size="xl"></VcIcon>
+        </div>
+        <div
+          v-if="localIndex < images.length - 1"
+          class="tw-absolute tw-top-2/4 -tw-mt-9 tw-h-[72px] tw-w-[72px] tw-flex tw-items-center tw-justify-center tw-rounded-full tw-bg-[#f1f6fa] tw-cursor-pointer tw-text-[#a1c0d4] [--icon-size-xl: 36px] hover:tw-shadow-[0_0_20px_rgba(31,40,50,0.15)] tw-right-[25px]"
+          @click="localIndex++"
+        >
+          <VcIcon icon="fas fa-arrow-right" size="xl"></VcIcon>
+        </div>
+      </div>
+      <div
+        class="tw-p-4 tw-pb-[40px] tw-max-w-full tw-overflow-x-auto tw-box-border tw-shrink tw-flex"
+      >
+        <div
+          v-for="(item, i) in images"
+          :key="i"
+          class="tw-m-1 tw-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 "@/ui/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 tw-relative tw-opacity-100 after:tw-content-[""] after:tw-bg-[#43b0e6] after:tw-h-1 after:tw-w-full after:tw-rounded-[5px] after:tw-absolute after:tw-left-0 after:-tw-bottom-[12px];
+      }
+    }
+  }
+}
+</style>