@vc-shell/framework 1.0.38 → 1.0.40

package/ui/components/molecules/vc-currency-input/vc-input.vue

@@ -0,0 +1,436 @@
+<template>
+  <div
+    class="vc-input"
+    :class="[
+      `vc-input_${type}`,
+      {
+        'vc-input_clearable': clearable,
+        'vc-input_error': errorMessage,
+        'vc-input_disabled': disabled,
+      },
+    ]"
+  >
+    <!-- Input label -->
+    <VcLabel v-if="label" class="tw-mb-2" :required="isRequired">
+      <span>{{ label }}</span>
+      <template v-if="tooltip" v-slot:tooltip>{{ tooltip }}</template>
+    </VcLabel>
+
+    <!-- Input field -->
+    <div class="vc-input__field-wrapper">
+      <input
+        class="vc-input__field"
+        :placeholder="placeholder"
+        :type="internalType"
+        :value="calcValue"
+        :disabled="disabled"
+        @input="onInput"
+        @blur="$emit('blur')"
+        ref="inputRef"
+        :max="max"
+        :name="name"
+        :maxlength="maxchars"
+      />
+
+      <!-- Dropdown button -->
+      <div v-if="options && options.length" class="vc-input__dropdown-wrap">
+        <div
+          @click.stop="showDrop"
+          aria-describedby="tooltip"
+          ref="toggleDropRef"
+          :class="[
+            { 'vc-input__dropdown-btn_disabled': disabled },
+            'vc-input__dropdown-btn',
+          ]"
+        >
+          {{ optionsValue }}
+        </div>
+        <teleport to="#app">
+          <div
+            v-if="dropActive"
+            ref="dropRef"
+            role="tooltip"
+            class="vc-input__dropdown"
+            v-click-outside="closeDrop"
+          >
+            <p class="vc-input__dropdown-title">{{ optionsTitle }}</p>
+            <input
+              class="vc-input__dropdown-search"
+              v-model="search"
+              ref="searchInput"
+            />
+            <ul class="vc-input__dropdown-list">
+              <li v-for="(item, i) in searchFilter" :key="i">
+                <button
+                  @click="onItemSelect(item)"
+                  :class="[
+                    'vc-input__dropdown-selector',
+                    {
+                      'vc-input__dropdown-selector-active':
+                        item[displayProperty] === optionsValue,
+                    },
+                  ]"
+                >
+                  {{ item[displayProperty] }}
+                </button>
+              </li>
+            </ul>
+          </div>
+        </teleport>
+      </div>
+
+      <!-- Input clear button -->
+      <div
+        v-if="clearable && modelValue && !disabled && type !== 'password'"
+        class="vc-input__clear"
+        @click="onReset"
+      >
+        <VcIcon size="s" icon="fas fa-times"></VcIcon>
+      </div>
+
+      <div
+        class="vc-input__showhide"
+        v-if="type === 'password' && internalType === 'password'"
+        @click="internalType = 'text'"
+      >
+        <VcIcon size="s" icon="fas fa-eye-slash"></VcIcon>
+      </div>
+
+      <div
+        class="vc-input__showhide"
+        v-if="type === 'password' && internalType === 'text'"
+        @click="internalType = 'password'"
+      >
+        <VcIcon size="s" icon="fas fa-eye"></VcIcon>
+      </div>
+    </div>
+
+    <slot v-if="errorMessage" name="error">
+      <VcHint class="vc-input__error">
+        {{ errorMessage }}
+      </VcHint>
+    </slot>
+    <slot v-if="fieldDescription" name="error">
+      <VcHint class="vc-input__desc">
+        {{ fieldDescription }}
+      </VcHint>
+    </slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  getCurrentInstance,
+  nextTick,
+  onMounted,
+  ref,
+  unref,
+  watch,
+} from "vue";
+import { VcIcon, VcLabel } from "@/ui/components";
+import { createPopper, Instance } from "@popperjs/core";
+import {
+  useCurrencyInput,
+  UseCurrencyInput,
+  parse,
+  CurrencyDisplay,
+} from "vue-currency-input";
+import { clickOutside as vClickOutside } from "@/core/directives";
+
+export type ValueType = string | number | Date | null;
+
+export interface Props {
+    placeholder?: string;
+    modelValue?: ValueType;
+    clearable?: boolean;
+    isRequired?: boolean;
+    disabled?: boolean;
+    type?: string;
+    label?: string;
+    tooltip?: string;
+    name?: string;
+    currency?: boolean;
+    options?: Record<string, string>[];
+    optionsTitle?: string;
+    optionsValue?: string;
+    keyProperty?: string;
+    displayProperty?: string;
+    fieldDescription?: string;
+    maxchars?: string;
+    max?: string | number;
+    errorMessage?: string;
+}
+
+export interface Emits {
+    (event: "update:modelValue", value: ValueType): void;
+    (event: "update:optionsValue", value: string): void;
+    (event: 'blur'): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    placeholder: "",
+    modelValue: null,
+    clearable: false,
+    isRequired: false,
+    disabled: false,
+    type: "text",
+    name: "Field",
+    currency: false,
+    options: () => [],
+    optionsTitle: "Select",
+    optionsValue: "",
+    keyProperty: "id",
+    displayProperty: "title",
+    fieldDescription: "",
+    maxchars: "1024",
+});
+
+const emit = defineEmits<Emits>();
+
+let currencyConverter: UseCurrencyInput | undefined = undefined;
+const internalType = ref(unref(props.type));
+const toggleDropRef = ref();
+const dropRef = ref();
+const dropActive = ref(false);
+const instance = getCurrentInstance();
+const popper = ref<Instance>();
+const search = ref("");
+const searchInput = ref();
+const calcValue = computed(() => {
+    if (props.currency) {
+        return currencyConverter?.formattedValue.value;
+    } else {
+        return props.modelValue;
+    }
+});
+
+// Init currency composable if input type === currency (created hook)
+if (props.currency) {
+  currencyConverter = useCurrencyInput({
+    currency: props.optionsValue || "USD",
+    autoSign: false,
+    currencyDisplay: CurrencyDisplay.hidden,
+  });
+}
+
+onMounted(() => {
+    if (!props.modelValue && props.currency) {
+        currencyConverter && currencyConverter.setValue(null);
+    }
+});
+
+// Change currency settings
+watch(
+  () => props.optionsValue,
+  (newVal) => {
+    currencyConverter &&
+      currencyConverter.setOptions({
+        currency: newVal,
+        autoSign: false,
+        currencyDisplay: CurrencyDisplay.hidden,
+      });
+  }
+);
+
+const searchFilter = computed(() => {
+    return props.options.filter((opt) =>
+        opt[props.displayProperty]
+            .toLowerCase()
+            .includes(search.value.toLowerCase())
+    );
+});
+
+const inputRef = currencyConverter && currencyConverter.inputRef;
+
+watch(
+    () => props.modelValue,
+    (value) => {
+        let initialValue = unref(value);
+        if (
+            initialValue &&
+            initialValue.toString().length >= parseInt(props.maxchars)
+        ) {
+            initialValue.toString().slice(0, parseInt(props.maxchars));
+
+            return;
+        }
+
+        emit("update:modelValue", initialValue);
+    }
+);
+
+function showDrop() {
+    if (!dropActive.value && !props.disabled) {
+        dropActive.value = true;
+        nextTick(() => {
+            searchInput.value.focus();
+            popper.value = createPopper(toggleDropRef.value, dropRef.value, {
+                placement: "bottom-end",
+                modifiers: [
+                    {
+                        name: "offset",
+                        options: {
+                            offset: [13, 15],
+                        },
+                    },
+                ],
+            });
+        });
+    } else {
+        closeDrop();
+    }
+}
+
+function closeDrop() {
+    dropActive.value = false;
+    search.value = "";
+    popper.value?.destroy();
+}
+
+function onItemSelect(item: { [x: string]: string }) {
+    emit("update:optionsValue", item[props.keyProperty]);
+    closeDrop();
+}
+
+// Handle input event to properly validate value and emit changes
+function onInput(e: Event) {
+  const newValue = (e.target as HTMLInputElement).value;
+  if (newValue) {
+    if (props.currency) {
+      const parsed = parse(newValue, { currency: props.optionsValue });
+      emit("update:modelValue", parsed);
+    } else {
+      emit("update:modelValue", newValue);
+    }
+  } else {
+    emit("update:modelValue", null);
+  }
+}
+
+// Handle input event to propertly reset value and emit changes
+function onReset() {
+    if (props.currency) {
+        currencyConverter && currencyConverter.setValue(null);
+    }
+    emit("update:modelValue", null);
+}
+</script>
+
+<style lang="scss">
+:root {
+  --input-height: 38px;
+  --input-border-radius: 3px;
+  --input-border-color: #d3dbe9;
+  --input-border-color-error: #f14e4e;
+  --input-background-color: #ffffff;
+  --input-placeholder-color: #a5a5a5;
+  --input-clear-color: #43b0e6;
+  --input-clear-color-hover: #319ed4;
+}
+
+.vc-input {
+  @apply tw-overflow-hidden;
+
+  &_date,
+  &_datetime-local {
+    @apply tw-max-w-[220px];
+
+    .vc-app_mobile & {
+      @apply tw-max-w-full;
+    }
+  }
+
+  &__field-wrapper {
+    @apply tw-border tw-border-solid tw-border-[color:var(--input-border-color)]
+    tw-rounded-[var(--input-border-radius)]
+    tw-bg-[color:var(--input-background-color)] tw-flex tw-items-stretch;
+  }
+
+  &_error &__field-wrapper {
+    @apply tw-border tw-border-solid tw-border-[color:var(--input-border-color-error)];
+  }
+
+  &__error {
+    @apply tw-mt-1 [--hint-color:var(--input-border-color-error)];
+  }
+
+  &__desc {
+    @apply tw-text-[color:var(--multivalue-placeholder-color)] tw-mt-1 tw-break-words tw-p-0;
+  }
+
+  &__field {
+    @apply tw-border-none tw-outline-none tw-h-[var(--input-height)] tw-min-w-0 tw-box-border tw-grow tw-pl-3;
+
+    &::-webkit-input-placeholder {
+      @apply tw-text-[color:var(--input-placeholder-color)];
+    }
+
+    &::-moz-placeholder {
+      @apply tw-text-[color:var(--input-placeholder-color)];
+    }
+
+    &::-ms-placeholder {
+      @apply tw-text-[color:var(--input-placeholder-color)];
+    }
+
+    &::placeholder {
+      @apply tw-text-[color:var(--input-placeholder-color)];
+    }
+
+    &::-ms-reveal,
+    &::-ms-clear {
+      @apply tw-hidden;
+    }
+  }
+
+  &__clear {
+    @apply tw-cursor-pointer tw-text-[color:var(--input-clear-color)] hover:tw-text-[color:var(--input-clear-color-hover)] tw-px-3 tw-flex tw-items-center;
+  }
+
+  &__showhide {
+    @apply tw-cursor-pointer tw-text-[color:var(--input-placeholder-color)] hover:tw-text-[color:var(--input-clear-color-hover)] tw-px-3 tw-flex tw-items-center;
+  }
+
+  &__dropdown-wrap {
+    @apply tw-relative tw-px-3 tw-flex tw-items-center;
+  }
+
+  &__dropdown-btn {
+    @apply tw-text-[color:var(--input-clear-color)] tw-not-italic tw-font-medium tw-text-[13px] tw-leading-[20px] tw-cursor-pointer;
+
+    &_disabled {
+      @apply tw-text-[#7e8e9d] tw-cursor-default;
+    }
+  }
+
+  &__dropdown {
+    @apply tw-absolute tw-bg-white tw-shadow-[1px_1px_11px_rgba(141,152,163,0.6)] tw-rounded-[3px] tw-p-[11px] tw-w-[120px] tw-box-border;
+  }
+
+  &__dropdown-title {
+    @apply tw-not-italic tw-font-normal tw-text-base tw-leading-[20px] tw-text-[#333333] tw-p-0 tw-mb-[7px];
+  }
+
+  &__dropdown-search {
+    @apply tw-bg-white tw-border tw-border-solid tw-border-[#eaecf2] tw-box-border tw-rounded-[4px] tw-h-8 tw-w-full tw-outline-none tw-px-2;
+  }
+
+  &__dropdown-list {
+    @apply tw-list-none tw-p-0 tw-mt-2;
+  }
+
+  &__dropdown-selector {
+    @apply tw-border-none tw-bg-transparent tw-p-[9px] tw-text-left tw-w-full tw-cursor-pointer tw-text-lg tw-rounded-[3px] hover:tw-bg-[#eff7fc];
+
+    &-active {
+      @apply tw-bg-[#dfeef9];
+    }
+  }
+
+  &_disabled &__field-wrapper,
+  &_disabled &__field {
+    @apply tw-bg-[#fafafa] tw-text-[#424242];
+  }
+}
+</style>

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

@@ -0,0 +1,117 @@
+<template>
+  <div
+    class="vc-editor"
+    :class="[
+      {
+        'vc-editor_error': errorMessage,
+        'vc-editor_disabled': disabled
+      },
+    ]"
+  >
+    <!-- Editor label -->
+    <VcLabel v-if="label" class="tw-mb-2" :required="required">
+      <span>{{ label }}</span>
+      <template v-if="tooltip" v-slot:tooltip>{{ tooltip }}</template>
+    </VcLabel>
+
+    <!-- Editor field -->
+    <v-ace-editor
+      class="tw-border tw-border-solid tw-border-[color:var(--editor-border-color)] tw-rounded-[var(--editor-border-radius)]"
+      v-model:value="content"
+      lang="html"
+      theme="chrome"
+      style="height: 200px"
+      @input="onInput"
+    />
+    <slot v-if="errorMessage" name="error">
+      <VcHint class="vc-editor__error">
+        {{ errorMessage }}
+      </VcHint>
+    </slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VAceEditor } from "vue3-ace-editor";
+import "ace-builds/src-noconflict/mode-html";
+import "ace-builds/src-noconflict/theme-chrome";
+import {ref, unref, watch} from "vue";
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: "",
+  },
+
+  modelValue: {
+    type: [String, Number, Date],
+    default: null,
+  },
+
+  required: {
+    type: Boolean,
+    default: false,
+  },
+
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  label: {
+    type: String,
+    default: undefined,
+  },
+
+  tooltip: {
+    type: String,
+    default: undefined,
+  },
+
+  name: {
+    type: String,
+    default: "Field",
+  },
+
+  errorMessage: {
+    type: String,
+    default: undefined
+  }
+});
+
+const emit = defineEmits(["update:modelValue"]);
+const content = ref();
+let initialValue = unref(props.modelValue);
+
+watch(
+    () => props.modelValue,
+    (value) => {
+        let init = unref(value);
+        emit("update:modelValue", init);
+    }
+);
+
+// Handle input event to propertly validate value and emit changes
+function onInput() {
+  emit("update:modelValue", content.value);
+}
+</script>
+
+<style lang="scss">
+:root {
+  --editor-border-radius: 3px;
+  --editor-border-color: #d3dbe9;
+  --editor-border-color-error: #f14e4e;
+  --editor-placeholder-color: #a5a5a5;
+}
+
+.vc-editor {
+  &__error {
+    @apply tw-text-[color:var(--editor-border-color-error)] tw-mt-1;
+  }
+
+  &_error .ace_editor {
+    @apply tw-border tw-border-solid tw-border-[color:var(--editor-border-color-error)];
+  }
+}
+</style>

package/ui/components/molecules/vc-file-upload/vc-file-upload.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class= "tw-flex tw-flex-col tw-flex-1">
+    <div
+      class="vc-file-upload tw-relative tw-h-[155px] tw-box-border tw-border tw-border-dashed tw-border-[#c8dbea] tw-rounded-[6px] tw-p-2 tw-p-4 tw-flex tw-flex-col tw-items-center tw-justify-center"
+      :class="`vc-file-upload_${variant}`"
+      @drop.stop.prevent="onDrop"
+      @drag.stop.prevent
+      @dragstart.stop.prevent
+      @dragend.stop.prevent
+      @dragover.stop.prevent
+      @dragenter.stop.prevent
+      @dragleave.stop.prevent
+    >
+      <VcLoading :active="loading"></VcLoading>
+      <VcIcon
+        class="tw-text-[#c8dbea]"
+        icon="fas fa-cloud-upload-alt"
+        size="xxl"
+      ></VcIcon>
+
+      <div class="tw-text-[#9db0be] tw-text-center tw-text-lg tw-leading-lg tw-mt-4">
+        <span>Drag and drop file here or</span>&nbsp;
+        <br />
+        <VcLink @click="toggleUploader">browse your files</VcLink>
+      </div>
+
+      <input
+        ref="uploader"
+        type="file"
+        hidden
+        @change="upload"
+        :accept="accept"
+        :multiple="multiple"
+        :name="name"
+      />
+    </div>
+    <slot v-if="errorMessage" name="error">
+      <VcHint class="vc-input__error">
+        {{ errorMessage }}
+      </VcHint>
+    </slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { getCurrentInstance, ref, unref } from "vue";
+import { useField } from "vee-validate";
+
+const props = defineProps({
+  variant: {
+    type: String,
+    enum: ["gallery", "file-upload"],
+    default: "gallery",
+  },
+
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+
+  accept: {
+    type: String,
+    default: ".jpg, .png, .jpeg",
+  },
+
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+
+  rules: {
+    type: [String, Object],
+  },
+
+  name: {
+    type: String,
+    default: "Gallery",
+  },
+});
+
+const emit = defineEmits(["upload"]);
+const instance = getCurrentInstance();
+// Prepare validation rules using required and rules props combination
+let internalRules = unref(props.rules) || "";
+
+// Prepare field-level validation
+const { errorMessage, handleChange, errors, validate } = useField(
+  `${props.name === "Gallery" ? instance?.uid : props.name}`,
+  internalRules
+);
+
+const uploader = ref();
+
+const upload = async (event: InputEvent) => {
+  await handleChange(event.target);
+
+  const isValid = await validate();
+
+  if (isValid.valid) {
+    const target = event.target as HTMLInputElement;
+    const fileList = target.files;
+
+    if (fileList && fileList.length) {
+      emit("upload", fileList);
+    }
+  }
+};
+
+function toggleUploader() {
+  uploader.value.value = "";
+  uploader.value.click();
+}
+
+function onDrop(event: DragEvent) {
+  const fileList = event.dataTransfer?.files;
+
+  if (fileList && fileList.length) {
+    emit("upload", fileList);
+  }
+}
+</script>
+
+<style lang="scss">
+.vc-file-upload {
+  // variants
+  &_gallery {
+    @apply tw-w-[155px] tw-h-[155px];
+  }
+
+  &_file-upload {
+    @apply tw-w-full tw-bg-[#f2f8fd];
+  }
+}
+</style>

package/ui/components/molecules/vc-form/vc-form.stories.ts

@@ -0,0 +1,23 @@
+/**
+ * Form component.
+ * @author Iurii A Taranov <me@flanker72.ru>
+ */
+import { Story } from "@storybook/vue3";
+import VcForm from "./vc-form.vue";
+
+export default {
+  title: "molecules/vc-form",
+  component: VcForm,
+};
+
+const Template: Story = (args) => ({
+  components: { VcForm },
+  setup() {
+    return { args };
+  },
+  template: '<vc-form v-bind="args"></vc-form>',
+});
+
+export const Form = Template.bind({});
+Form.storyName = "vc-form";
+Form.args = {};

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

@@ -0,0 +1,5 @@
+<template>
+  <form>
+    <slot>vc-form</slot>
+  </form>
+</template>