@vc-shell/framework 1.0.38 → 1.0.39

package/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="mb-2" :required="required">
+      <span>{{ label }}</span>
+      <template v-if="tooltip" v-slot:tooltip>{{ tooltip }}</template>
+    </VcLabel>
+
+    <!-- Editor field -->
+    <v-ace-editor
+      class="border border-solid border-[color:var(--editor-border-color)] 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 text-[color:var(--editor-border-color-error)] mt-1;
+  }
+
+  &_error .ace_editor {
+    @apply border border-solid border-[color:var(--editor-border-color-error)];
+  }
+}
+</style>

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

@@ -0,0 +1,134 @@
+<template>
+  <div class="flex flex-col flex-1">
+    <div
+      class="vc-file-upload relative h-[155px] box-border border border-dashed border-[#c8dbea] rounded-[6px] p-2 p-4 flex flex-col items-center 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="text-[#c8dbea]"
+        icon="fas fa-cloud-upload-alt"
+        size="xxl"
+      ></VcIcon>
+
+      <div class="text-[#9db0be] text-center text-lg leading-lg 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 w-[155px] h-[155px];
+  }
+
+  &_file-upload {
+    @apply w-full bg-[#f2f8fd];
+  }
+}
+</style>

package/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/components/molecules/vc-form/vc-form.vue

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

package/components/molecules/vc-input/vc-input.stories.ts

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