@vc-shell/framework 1.0.290 → 1.0.291

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

@@ -11,7 +11,7 @@
     <!-- Input label -->
     <VcLabel
       v-if="label"
-      class="tw-mb-2"
+      class="vc-checkbox__label"
       :required="required"
     >
       <span>{{ label }}</span>
@@ -21,7 +21,7 @@
         >{{ tooltip }}</template
       >
     </VcLabel>
-    <label class="tw-inline-flex tw-select-none tw-cursor-pointer tw-text-base tw-items-center">
+    <label class="vc-checkbox__container">
       <input
         v-model="value"
         type="checkbox"
@@ -30,18 +30,18 @@
         :true-value="trueValue"
         :false-value="falseValue"
         :class="{
-          'vc-checkbox_error': errorMessage,
+          'vc-checkbox__input--error': errorMessage,
         }"
       />
       <span
         v-if="$slots['default']"
-        class="tw-ml-2"
+        class="vc-checkbox__text"
       >
         <slot></slot>
       </span>
       <span
         v-if="!label && required"
-        class="tw-text-[color:var(--checkbox-required-color)] tw-ml-1"
+        class="vc-checkbox__required"
         >*</span
       >
     </label>
@@ -50,7 +50,7 @@
       v-if="errorMessage"
       name="error"
     >
-      <VcHint class="vc-checkbox__error tw-mt-1">
+      <VcHint class="vc-checkbox__error">
         {{ errorMessage }}
       </VcHint>
     </slot>
@@ -61,6 +61,7 @@
 import { MaybeRef, computed, unref } from "vue";
 import { VcHint } from "./../../atoms/vc-hint";
 import { VcLabel } from "../../atoms/vc-label";
+
 export interface Props {
   modelValue: MaybeRef<boolean>;
   disabled?: boolean;
@@ -103,19 +104,20 @@ const value = computed({
   --checkbox-size-medium: 18px;
   --checkbox-size-large: 24px;
   --checkbox-border-radius: 2px;
-  --checkbox-background-color: #ffffff;
-  --checkbox-color-error: #f14e4e;
-  --checkbox-required-color: #f14e4e;
-
-  --checkbox-active: #43b0e6;
-  --checkbox-active-inner: #fff;
-  --checkbox-focus: 2px rgba(39, 94, 254, 0.3);
-  --checkbox-border: #bbc1e1;
-  --checkbox-border-hover: #43b0e6;
-  --checkbox-background: #fff;
-  --checkbox-disabled: #f6f8ff;
-  --checkbox-disabled-inner: #e1e6f9;
-  --checkbox-error: #f14e4e;
+  --checkbox-background-color: var(--additional-50);
+  --checkbox-color-error: var(--base-error-color, var(--danger-500));
+  --checkbox-required-color: var(--danger-500);
+
+  --checkbox-active: var(--primary-500);
+  --checkbox-active-inner: var(--additional-50);
+  --checkbox-focus-color: var(--info-400);
+  --checkbox-focus: 2px rgb(from var(--checkbox-focus-color) r g b / 30%);
+  --checkbox-border: var(--neutrals-300);
+  --checkbox-border-hover: var(--primary-500);
+  --checkbox-background: var(--additional-50);
+  --checkbox-disabled: var(--neutrals-100);
+  --checkbox-disabled-inner: var(--base-border-color, var(--neutrals-200));
+  --checkbox-error: var(--base-error-color, var(--danger-500));
 }
 
 $sizes: small, medium, large;
@@ -127,8 +129,28 @@ $sizes: small, medium, large;
 }
 
 .vc-checkbox {
+  &__label {
+    @apply tw-mb-2;
+  }
+
+  &__container {
+    @apply tw-inline-flex tw-select-none tw-cursor-pointer tw-text-base tw-items-center;
+  }
+
+  &__text {
+    @apply tw-ml-2;
+  }
+
+  &__required {
+    @apply tw-text-[color:var(--checkbox-required-color)] tw-ml-1;
+  }
+
+  &__input--error {
+    --hint-color: var(--checkbox-error);
+  }
+
   input[type="checkbox"] {
-    border-radius: 2px;
+    border-radius: var(--checkbox-border-radius);
     appearance: none;
     height: var(--checkbox-size);
     outline: none;
@@ -140,7 +162,6 @@ $sizes: small, medium, large;
     border: 1px solid var(--checkbox-border-color, var(--checkbox-border));
     background: var(--checkbox-bg, var(--checkbox-background));
     width: var(--checkbox-size);
-    border-radius: 3px;
     transition:
       background 0.3s,
       border-color 0.3s,
@@ -216,6 +237,7 @@ $sizes: small, medium, large;
 
   &__error {
     --hint-color: var(--checkbox-error);
+    @apply tw-mt-1;
   }
 }
 </style>

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

@@ -1,17 +1,15 @@
 <template>
   <div
     class="vc-editor"
-    :class="[
-      {
-        'vc-editor_error': errorMessage,
-        'vc-editor_disabled': disabled,
-      },
-    ]"
+    :class="{
+      'vc-editor--error': errorMessage,
+      'vc-editor--disabled': disabled,
+    }"
   >
     <!-- Editor label -->
     <VcLabel
       v-if="label"
-      class="tw-mb-2"
+      class="vc-editor__label"
       :required="required"
       :multilanguage="multilanguage"
       :current-language="currentLanguage"
@@ -20,8 +18,9 @@
       <template
         v-if="tooltip"
         #tooltip
-        >{{ tooltip }}</template
       >
+        {{ tooltip }}
+      </template>
     </VcLabel>
 
     <!-- Editor field -->
@@ -30,8 +29,10 @@
       :key="`${id}-${disabled}`"
       ref="quillRef"
       :content="modelValue"
-      class="quill-editor tw-border tw-border-solid tw-border-[color:var(--editor-border-color)] tw-rounded-b-[var(--editor-border-radius)] tw-h-[200px]"
-      :class="{ 'tw-bg-[#fafafa] tw-text-[#424242] tw-cursor-default': disabled }"
+      class="quill-editor vc-editor__quill-editor"
+      :class="{
+        'vc-editor__quill-editor--disabled': disabled,
+      }"
       theme="snow"
       :toolbar="toolbar"
       :modules="modules"
@@ -41,11 +42,12 @@
       :options="options"
       @ready="initializeQuill"
     />
+
     <slot
       v-if="errorMessage"
       name="error"
     >
-      <VcHint class="vc-editor__error !tw-text-[color:var(--editor-border-color-error)] tw-mt-1">
+      <VcHint class="vc-editor__error">
         {{ errorMessage }}
       </VcHint>
     </slot>
@@ -184,36 +186,66 @@ defineExpose({
 <style lang="scss">
 :root {
   --editor-border-radius: 3px;
-  --editor-border-color: #d3dbe9;
-  --editor-border-color-error: #f14e4e;
-  --editor-placeholder-color: #a5a5a5;
+  --editor-border-color: var(--secondary-200);
+  --editor-border-color-error: var(--base-error-color, var(--danger-500));
+  --editor-disabled-bg: var(--neutrals-50);
+  --editor-disabled-text: var(--neutrals-400);
+  --editor-placeholder-color: var(--neutrals-400);
 }
 
 .vc-editor {
-  &_error .quill-editor {
-    @apply tw-border tw-border-solid tw-border-[color:var(--editor-border-color-error)] #{!important};
+  & {
+    @apply tw-flex tw-flex-col;
+  }
+
+  &--disabled {
+    @apply tw-opacity-50 tw-cursor-not-allowed;
+  }
+
+  &__label {
+    @apply tw-mb-2;
   }
 
-  .quill-editor .ql-editor {
-    &.ql-blank:before {
-      color: var(--textarea-placeholder-color);
-      content: attr(data-placeholder);
-      font-style: inherit;
-      left: 15px;
-      pointer-events: none;
-      position: absolute;
-      right: 15px;
+  &__quill-editor {
+    @apply tw-border tw-border-solid tw-border-[color:var(--editor-border-color)] tw-rounded-b-[var(--editor-border-radius)] tw-h-[200px];
+    transition:
+      background 0.3s,
+      color 0.3s,
+      cursor 0.3s;
+
+    &--disabled {
+      @apply tw-bg-[color:var(--editor-disabled-bg)] tw-text-[color:var(--editor-disabled-text)] tw-cursor-default;
+    }
+
+    &.vc-editor--error {
+      @apply tw-border-[color:var(--editor-border-color-error)];
     }
   }
 
-  .quill-editor {
-    & .ql-tooltip {
-      display: flex;
-      flex-flow: wrap;
+  &__error {
+    @apply tw-text-[color:var(--editor-border-color-error)] tw-mt-1;
+  }
+}
+
+.quill-editor .ql-editor {
+  &.ql-blank:before {
+    color: var(--editor-placeholder-color);
+    content: attr(data-placeholder);
+    font-style: inherit;
+    left: 15px;
+    pointer-events: none;
+    position: absolute;
+    right: 15px;
+  }
+}
 
-      &.ql-hidden {
-        display: none !important;
-      }
+.quill-editor {
+  & .ql-tooltip {
+    display: flex;
+    flex-flow: wrap;
+
+    &.ql-hidden {
+      display: none !important;
     }
   }
 }
@@ -222,7 +254,13 @@ defineExpose({
   padding-right: 18px;
   content: attr(data-value);
 }
+
 .ql-language.ql-picker .ql-picker-item:before {
   content: attr(data-value);
 }
+
+.ql-toolbar,
+.quill-editor {
+  border-color: var(--editor-border-color) !important;
+}
 </style>

package/ui/components/molecules/vc-field/_internal/vc-field-type/vc-field-type.vue

@@ -1,37 +1,37 @@
 <template>
   <!-- Text -->
   <template v-if="type === 'text'">
-    <div class="tw-flex tw-flex-row tw-justify-stretch tw-truncate">
-      <div class="tw-text-wrap">
-        <p>{{ value }}</p>
+    <div class="vc-field-type">
+      <div class="vc-field-type__text-wrap">
+        <p class="vc-field-type__text">{{ value }}</p>
       </div>
     </div>
   </template>
 
   <!-- Date -->
   <template v-if="type === 'date'">
-    <div class="tw-flex tw-flex-row tw-justify-stretch tw-truncate">
-      <div class="tw-text-wrap">
-        <p>{{ value instanceof Date ? value.toLocaleDateString() : value }}</p>
+    <div class="vc-field-type">
+      <div class="vc-field-type__text-wrap">
+        <p class="vc-field-type__text">{{ value instanceof Date ? value.toLocaleDateString() : value }}</p>
       </div>
     </div>
   </template>
 
   <!-- Date ago -->
   <template v-if="type === 'date-ago'">
-    <div class="tw-flex tw-flex-row tw-justify-stretch tw-truncate">
-      <div class="tw-text-wrap">
-        <p>{{ value instanceof Date ? moment(value).fromNow() ?? "N/A" : value }}</p>
+    <div class="vc-field-type">
+      <div class="vc-field-type__text-wrap">
+        <p class="vc-field-type__text">{{ value instanceof Date ? moment(value).fromNow() ?? "N/A" : value }}</p>
       </div>
     </div>
   </template>
 
   <!-- Link -->
   <template v-if="type === 'link'">
-    <div class="tw-flex tw-flex-row tw-justify-stretch tw-truncate">
-      <div class="tw-truncate tw-text-wrap">
+    <div class="vc-field-type">
+      <div class="vc-field-type__text-wrap">
         <VcLink
-          class="vc-link !tw-text-s tw-truncate tw-w-full"
+          class="vc-field-type__link"
           @click="onLinkClick"
           >{{ value }}</VcLink
         >
@@ -42,11 +42,11 @@
 
   <!-- Email -->
   <template v-if="type === 'email'">
-    <div class="tw-flex tw-flex-row tw-justify-stretch tw-truncate">
-      <div class="tw-text-wrap">
+    <div class="vc-field-type">
+      <div class="vc-field-type__text-wrap">
         <a
           :href="`mailto:${value}`"
-          class="vc-link !tw-text-s tw-truncate tw-w-full"
+          class="vc-field-type__link"
           >{{ value }}</a
         >
       </div>
@@ -77,4 +77,20 @@ function onLinkClick() {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss">
+.vc-field-type {
+  @apply tw-flex tw-flex-row tw-justify-stretch tw-truncate;
+
+  &__text-wrap {
+    @apply tw-text-wrap;
+  }
+
+  &__text {
+    @apply tw-text-sm;
+  }
+
+  &__link {
+    @apply tw-text-sm tw-truncate tw-w-full;
+  }
+}
+</style>

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

@@ -1,34 +1,37 @@
 <template>
   <div
-    :class="[
-      {
-        'tw-flex-col': orientation === 'vertical',
-        'tw-flex-row tw-items-center': orientation === 'horizontal',
-      },
-      'tw-flex ',
-    ]"
+    class="vc-field"
+    :class="{
+      'vc-field--vertical': orientation === 'vertical',
+      'vc-field--horizontal': orientation === 'horizontal',
+    }"
   >
     <VcCol :size="aspectRatio[0]">
       <!-- Field label -->
-      <VcLabel v-if="label">
+      <VcLabel
+        v-if="label"
+        class="vc-field__label"
+      >
         <span>{{ label }}</span>
         <template
           v-if="tooltip"
           #tooltip
-          >{{ tooltip }}</template
-        ></VcLabel
-      >
+        >
+          {{ tooltip }}
+        </template>
+      </VcLabel>
     </VcCol>
     <VcCol :size="aspectRatio[1]">
       <VcFieldType
         :value="modelValue"
         :type="type"
+        class="vc-field__field-type"
       >
         <VcButton
           v-if="copyable"
           icon="far fa-copy"
           size="m"
-          class="tw-ml-2"
+          class="vc-field__copy-button"
           text
           @click="copy(modelValue)"
         ></VcButton>
@@ -84,4 +87,24 @@ function copy(value: string) {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss">
+.vc-field {
+  @apply tw-flex;
+
+  &--vertical {
+    @apply tw-flex-col;
+  }
+
+  &--horizontal {
+    @apply tw-flex-row tw-items-center;
+  }
+
+  &__label {
+    @apply tw-mb-2;
+  }
+
+  &__copy-button {
+    @apply tw-ml-2;
+  }
+}
+</style>

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

@@ -1,12 +1,12 @@
 <template>
-  <div class="tw-flex tw-flex-col tw-flex-1">
+  <div class="vc-file-upload__container">
     <div
       v-loading="loading"
-      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-4 tw-flex tw-flex-col tw-items-center tw-justify-center"
+      class="vc-file-upload__drop-zone"
       :class="[
-        `vc-file-upload_${variant}`,
+        `vc-file-upload__drop-zone--${variant}`,
         {
-          '!tw-bg-[#e8f1f9] !tw-border-solid tw-cursor-copy': isDragging,
+          'vc-file-upload__drop-zone--dragging': isDragging,
         },
       ]"
       @drop.stop.prevent="onDrop"
@@ -18,18 +18,21 @@
       @dragleave.stop.prevent="dragLeave"
     >
       <VcIcon
-        class="tw-text-[#c8dbea]"
+        class="vc-file-upload__icon"
         :icon="icon"
         size="xxl"
       ></VcIcon>
 
-      <div class="tw-text-[#9db0be] tw-text-center tw-text-lg tw-leading-lg tw-mt-4">
-        <span>{{ customText?.dragHere || t("COMPONENTS.MOLECULES.VC_FILE_UPLOAD.DRAG_HERE") }}</span
-        >&nbsp;
+      <div class="vc-file-upload__text">
+        <span>{{ customText?.dragHere || t("COMPONENTS.MOLECULES.VC_FILE_UPLOAD.DRAG_HERE") }}</span>
+        &nbsp;
         <br />
-        <VcLink @click="toggleUploader">{{
-          customText?.browse || t("COMPONENTS.MOLECULES.VC_FILE_UPLOAD.BROWSE")
-        }}</VcLink>
+        <VcLink
+          class="vc-file-upload__link"
+          @click="toggleUploader"
+        >
+          {{ customText?.browse || t("COMPONENTS.MOLECULES.VC_FILE_UPLOAD.BROWSE") }}
+        </VcLink>
       </div>
 
       <input
@@ -46,7 +49,7 @@
       v-if="errorMessage"
       name="error"
     >
-      <VcHint class="vc-input__error">
+      <VcHint class="vc-file-upload__error">
         {{ errorMessage }}
       </VcHint>
     </slot>
@@ -84,7 +87,6 @@ const props = withDefaults(defineProps<Props>(), {
   name: "Gallery",
   icon: "fas fa-cloud-upload-alt",
 });
-
 const emit = defineEmits<Emits>();
 
 defineSlots<{
@@ -93,20 +95,16 @@ defineSlots<{
 
 const { t } = useI18n({ useScope: "global" });
 
-// TODO refactor component and remove field-level validation
-
 const instance = getCurrentInstance();
-// Prepare validation rules using required and rules props combination
 const internalRules = unref(props.rules) || "";
 const isDragging = ref(false);
 
-// Prepare field-level validation
 const { errorMessage, handleChange, validate } = useField(
   `${props.name === "Gallery" ? instance?.uid : props.name}`,
   internalRules as IValidationRules,
 );
 
-const uploader = ref();
+const uploader = ref<HTMLInputElement | null>(null);
 
 const upload = async (event: Event) => {
   await handleChange(event.target);
@@ -124,8 +122,10 @@ const upload = async (event: Event) => {
 };
 
 function toggleUploader() {
-  uploader.value.value = "";
-  uploader.value.click();
+  if (uploader.value) {
+    uploader.value.value = "";
+    uploader.value.click();
+  }
 }
 
 function onDrop(event: DragEvent) {
@@ -147,14 +147,64 @@ function dragLeave() {
 </script>
 
 <style lang="scss">
+:root {
+  --file-upload-border-color: var(--secondary-200);
+  --file-upload-border-color-hover: var(--secondary-400);
+  --file-upload-border-color-error: var(--base-error-color, var(--danger-500));
+  --file-upload-border-radius: 6px;
+  --file-upload-drag-bg: var(--primary-100);
+  --file-upload-icon-color: var(--secondary-200);
+  --file-upload-text-color: var(--neutrals-400);
+  --file-upload-error-color: var(--base-error-color, var(--danger-500));
+  --file-upload-background-color: var(--primary-50);
+}
+
 .vc-file-upload {
-  // variants
-  &_gallery {
-    @apply tw-w-[155px] tw-h-[155px];
+  &__container {
+    @apply tw-flex tw-flex-col tw-flex-1;
+  }
+
+  &__drop-zone {
+    @apply tw-relative tw-h-40 tw-box-border tw-border tw-border-dashed tw-p-4 tw-flex tw-flex-col tw-items-center tw-justify-center;
+    @apply tw-border-[color:var(--file-upload-border-color)];
+    @apply tw-rounded-lg;
+    @apply tw-transition-colors tw-duration-300;
+
+    &--gallery {
+      @apply tw-w-40 tw-h-40;
+    }
+
+    &--file-upload {
+      @apply tw-w-full tw-bg-[var(--file-upload-background-color)];
+    }
+
+    &--dragging {
+      background-color: var(--file-upload-drag-bg) !important;
+      border-style: solid !important;
+      cursor: copy !important;
+    }
+
+    &:hover {
+      @apply tw-border-[color:var(--file-upload-border-color-hover)] #{!important};
+    }
+  }
+
+  &__icon {
+    color: var(--file-upload-icon-color);
+  }
+
+  &__text {
+    color: var(--file-upload-text-color);
+    @apply tw-text-center tw-text-sm tw-mt-4;
+  }
+
+  &__link {
+    @apply tw-text-sm tw-truncate tw-w-full;
   }
 
-  &_file-upload {
-    @apply tw-w-full tw-bg-[#f2f8fd];
+  &__error {
+    color: var(--file-upload-error-color);
+    @apply tw-mt-1;
   }
 }
 </style>