@vc-shell/framework 1.0.39 → 1.0.40

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

@@ -1,402 +0,0 @@
-<template>
-  <div
-    class="vc-select box-border"
-    :class="{
-      'vc-select_opened': isOpened,
-      'vc-select_error': errorMessage,
-      'vc-select_disabled': isDisabled,
-    }"
-  >
-    <!-- Select label -->
-    <VcLabel v-if="label" class="mb-2" :required="isRequired">
-      <span>{{ label }}</span>
-      <template v-if="tooltip" v-slot:tooltip>
-        <span v-html="tooltip"></span>
-      </template>
-    </VcLabel>
-
-    <!-- Select field -->
-    <div
-      class="vc-select__field-wrapper relative box-border border border-solid border-[color:var(--select-border-color)] rounded-[var(--select-border-radius)] bg-[color:var(--select-background-color)] flex items-stretch"
-      ref="inputFieldWrapRef"
-    >
-      <div
-        class="w-full appearance-none border-none outline-none min-h-[var(--select-height)] px-3 flex items-center w-full box-border box-border cursor-pointer invalid:text-[color:var(--select-placeholder-color)] overflow-hidden"
-        @click.stop="toggleDropdown"
-        ref="dropdownToggleRef"
-      >
-        <div v-if="!selectedItem" class="text-[#a5a5a5]">
-          {{ placeholder }}
-        </div>
-        <slot
-          v-else-if="$slots['selectedItem']"
-          name="selectedItem"
-          :item="selectedItem"
-        ></slot>
-        <slot v-else name="item" :item="selectedItem">
-          {{ selectedItem[displayProperty] }}
-        </slot>
-      </div>
-
-      <!-- Select chevron -->
-      <div
-        v-if="!isDisabled"
-        class="vc-select__chevron absolute right-0 top-0 h-full cursor-pointer px-3 flex items-center text-[color:var(--select-chevron-color)] hover:text-[color:var(--select-chevron-color-hover)]"
-        @click.stop="toggleDropdown"
-      >
-        <VcIcon size="s" icon="fas fa-chevron-down"></VcIcon>
-      </div>
-      <teleport to="#app">
-        <div
-          v-if="isOpened"
-          class="flex flex-col box-border max-h-[300px] z-10 overflow-hidden absolute bg-[color:var(--select-background-color)] border border-solid border-[color:var(--select-border-color)] border-t-[color:var(--select-background-color)] rounded-b-[var(--select-border-radius)] p-2"
-          ref="dropdownRef"
-          v-click-outside="closeDropdown"
-        >
-          <input
-            v-if="isSearchable"
-            ref="search"
-            class="w-full box-border border border-solid border-[#eaecf2] rounded-[4px] h-[32px] leading-[32px] outline-none mb-3 px-2"
-            @input="onSearch"
-          />
-
-          <VcContainer :no-padding="true">
-            <div
-              class="flex items-center min-h-[36px] px-2 rounded-[3px] cursor-pointer hover:bg-[#eff7fc]"
-              v-for="(item, i) in options"
-              :key="i"
-              @click="onItemSelect(item)"
-            >
-              <slot name="item" :item="item">{{ item[displayProperty] }}</slot>
-            </div>
-            <div v-show="hasNextPage" ref="load" class="text-center">
-              Loading...
-            </div>
-          </VcContainer>
-        </div>
-      </teleport>
-
-      <!-- Input clear button -->
-      <div
-        v-if="clearable && modelValue && !isDisabled"
-        class="vc-select__clear"
-        @click="onReset"
-      >
-        <VcIcon size="s" icon="fas fa-times"></VcIcon>
-      </div>
-    </div>
-
-    <slot v-if="errorMessage" name="error">
-      <VcHint class="text-[color:var(--select-border-color-error)] mt-1">
-        {{ errorMessage }}
-      </VcHint>
-    </slot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { nextTick, ref, computed, watch, getCurrentInstance } from "vue";
-import { VcIcon, VcLabel, VcContainer } from "@/components";
-import { createPopper, Instance, State } from "@popperjs/core";
-import { clickOutside as vClickOutside } from "@/core/directives";
-
-const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: undefined,
-  },
-
-  placeholder: {
-    type: String,
-    default: "Click to select...",
-  },
-
-  options: {
-    type: Array,
-    default: () => [],
-  },
-
-  isRequired: {
-    type: Boolean,
-    default: false,
-  },
-
-  isDisabled: {
-    type: Boolean,
-    default: false,
-  },
-
-  isSearchable: {
-    type: Boolean,
-    default: false,
-  },
-
-  label: {
-    type: String,
-    default: undefined,
-  },
-
-  tooltip: {
-    type: String,
-    default: undefined,
-  },
-
-  keyProperty: {
-    type: String,
-    default: "id",
-  },
-
-  displayProperty: {
-    type: String,
-    default: "title",
-  },
-
-  initialItem: {
-    type: Object,
-    default: undefined,
-  },
-
-  name: {
-    type: String,
-    default: "Field",
-  },
-
-  clearable: {
-    type: Boolean,
-    default: true,
-  },
-
-  optionsTotal: {
-    type: Number,
-    default: 0,
-  },
-
-  onInfiniteScroll: {
-    type: Function,
-    default: undefined,
-  },
-
-  errorMessage: {
-    type: String,
-    default: undefined
-  }
-});
-
-const emit = defineEmits(["update:modelValue", "change", "close", "search"]);
-
-const instance = getCurrentInstance();
-const isOpened = ref(false);
-const search = ref();
-const popper = ref<Instance>();
-const dropdownToggleRef = ref();
-const dropdownRef = ref();
-const inputFieldWrapRef = ref();
-const load = ref();
-const observer = new IntersectionObserver(infiniteScroll);
-
-const selectedItem = computed(
-  () =>
-    (props.options as Record<string, unknown>[])?.find(
-      (item) => item[props.keyProperty] === props.modelValue
-    ) || props.initialItem
-);
-
-const hasNextPage = computed(() => {
-  return props.options.length < props.optionsTotal;
-});
-
-watch(
-    () => props.modelValue,
-    (value) => {
-        emit("update:modelValue", value);
-    }
-);
-
-function closeDropdown() {
-  observer.disconnect();
-  isOpened.value = false;
-  popper.value?.destroy();
-  inputFieldWrapRef.value.style.borderRadius = "var(--select-border-radius)";
-  emit("close");
-}
-
-async function toggleDropdown() {
-  if (!props.isDisabled) {
-    if (isOpened.value) {
-      closeDropdown();
-    } else {
-      isOpened.value = true;
-      if (hasNextPage.value) {
-        await nextTick();
-        observer.observe(load.value);
-      }
-      await nextTick(() => {
-        search?.value?.focus();
-        popper.value = createPopper(
-          dropdownToggleRef.value,
-          dropdownRef.value,
-          {
-            placement: "bottom",
-            modifiers: [
-              {
-                name: "flip",
-                options: {
-                  fallbackPlacements: ["top", "bottom"],
-                },
-              },
-              {
-                name: "preventOverflow",
-                options: {
-                  mainAxis: false,
-                },
-              },
-              {
-                name: "sameWidthChangeBorders",
-                enabled: true,
-                phase: "beforeWrite",
-                requires: ["computeStyles"],
-                fn: ({ state }: { state: State }) => {
-                  const placement = state.placement;
-                  if (placement === "top") {
-                    state.styles.popper.borderTop =
-                      "1px solid var(--select-border-color)";
-                    state.styles.popper.borderBottom =
-                      "1px solid var(--select-background-color)";
-                    state.styles.popper.borderRadius =
-                      "var(--select-border-radius) var(--select-border-radius) 0 0";
-                    inputFieldWrapRef.value.style.borderRadius =
-                      "0 0 var(--select-border-radius) var(--select-border-radius)";
-                  } else {
-                    state.styles.popper.borderBottom =
-                      "1px solid var(--select-border-color)";
-                    state.styles.popper.borderTop =
-                      "1px solid var(--select-background-color)";
-                    state.styles.popper.borderRadius =
-                      "0 0 var(--select-border-radius) var(--select-border-radius)";
-
-                    if (inputFieldWrapRef.value) {
-                      inputFieldWrapRef.value.style.borderRadius =
-                        "var(--select-border-radius) var(--select-border-radius) 0 0";
-                    }
-                  }
-                  state.styles.popper.width = `${
-                    state.rects.reference.width + 2
-                  }px`;
-                },
-                effect: ({ state }: { state: State }) => {
-                  const ref = state.elements.reference as HTMLElement;
-                  const placement = state.placement;
-                  if (placement === "top") {
-                    state.elements.popper.style.borderTop =
-                      "1px solid var(--select-border-color)";
-                    state.elements.popper.style.borderBottom =
-                      "1px solid var(--select-background-color)";
-                    state.elements.popper.style.borderRadius =
-                      "var(--select-border-radius) var(--select-border-radius) 0 0";
-                    inputFieldWrapRef.value.style.borderRadius =
-                      "0 0 var(--select-border-radius) var(--select-border-radius)";
-                  } else {
-                    state.elements.popper.style.borderBottom =
-                      "1px solid var(--select-border-color)";
-                    state.elements.popper.style.borderTop =
-                      "1px solid var(--select-background-color)";
-                    state.elements.popper.style.borderRadius =
-                      "0 0 var(--select-border-radius) var(--select-border-radius)";
-
-                    if (inputFieldWrapRef.value) {
-                      inputFieldWrapRef.value.style.borderRadius =
-                        "var(--select-border-radius) var(--select-border-radius) 0 0";
-                    }
-                  }
-                  state.elements.popper.style.width = `${
-                    ref.offsetWidth + 2
-                  }px`;
-                },
-              },
-              {
-                name: "offset",
-                options: {
-                  offset: [0, 0],
-                },
-              },
-            ],
-          }
-        );
-      });
-    }
-  }
-}
-
-function onItemSelect(item: { [x: string]: string }) {
-  emit("update:modelValue", item[props.keyProperty]);
-  emit("change", item[props.keyProperty]);
-  emit("close");
-  isOpened.value = false;
-}
-
-function onSearch(event: InputEvent) {
-  emit("search", (event.target as HTMLInputElement).value);
-}
-
-// Handle input event to propertly reset value and emit changes
-function onReset() {
-  emit("update:modelValue", "");
-}
-
-async function infiniteScroll([
-  { isIntersecting, target },
-]: IntersectionObserverEntry[]) {
-  if (
-    isIntersecting &&
-    props.onInfiniteScroll &&
-    typeof props.onInfiniteScroll === "function"
-  ) {
-    const ul = (target as HTMLElement).offsetParent as Element;
-    const scrollTop = (target as HTMLElement).offsetParent?.scrollTop;
-    await props.onInfiniteScroll();
-    await nextTick();
-    ul.scrollTop = scrollTop as number;
-  }
-}
-</script>
-
-<style lang="scss">
-:root {
-  --select-height: 38px;
-  --select-border-radius: 3px;
-  --select-border-color: #d3dbe9;
-  --select-border-color-error: #f14e4e;
-  --select-background-color: #ffffff;
-  --select-background-color-disabled: #fafafa;
-  --select-placeholder-color: #a5a5a5;
-  --select-chevron-color: #43b0e6;
-  --select-chevron-color-hover: #319ed4;
-}
-
-.vc-select {
-  &_disabled &__field-wrapper,
-  &_disabled &__field {
-    @apply bg-[color:var(--select-background-color-disabled)] text-[#424242];
-  }
-
-  &_error &__field-wrapper {
-    @apply border border-solid border-[color:var(--select-border-color-error)];
-  }
-
-  &_disabled &__field {
-    @apply cursor-auto;
-  }
-
-  &_opened &__chevron {
-    @apply rotate-180;
-  }
-
-  &_opened &__field-wrapper {
-    @apply rounded-t-[var(--select-border-radius)];
-  }
-
-  &__clear {
-    @apply cursor-pointer text-[color:var(--input-clear-color)] hover:text-[color:var(--input-clear-color-hover)] pr-10 pl-3 flex items-center;
-  }
-}
-</style>

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

@@ -1,292 +0,0 @@
-<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/dist/components/atoms/vc-badge/vc-badge.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"vc-badge.stories.d.ts","sourceRoot":"","sources":["../../../../components/atoms/vc-badge/vc-badge.stories.ts"],"names":[],"mappings":";;;;AAOA,wBAGE;AAUF,eAAO,MAAM,KAAK,KAAoB,CAAC"}

package/dist/components/atoms/vc-button/vc-button.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"vc-button.stories.d.ts","sourceRoot":"","sources":["../../../../components/atoms/vc-button/vc-button.stories.ts"],"names":[],"mappings":";;;;;;;;;;;;AAOA,wBASE;AAUF,eAAO,MAAM,MAAM,KAAoB,CAAC"}

package/dist/components/atoms/vc-checkbox/vc-checkbox.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"vc-checkbox.stories.d.ts","sourceRoot":"","sources":["../../../../components/atoms/vc-checkbox/vc-checkbox.stories.ts"],"names":[],"mappings":";;;;AAOA,wBAGE;AAUF,eAAO,MAAM,QAAQ,KAAoB,CAAC"}