@vc-shell/framework 1.0.290 → 1.0.292

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

@@ -2,47 +2,51 @@
   <div
     v-if="items && items.length"
     ref="el"
-    class="tw-flex tw-items-center tw-flex-wrap tw-gap-[10px]"
+    class="vc-breadcrumbs"
   >
     <VcBreadcrumbsItem
       v-if="items.length"
       :id="items[0]?.id"
+      class="vc-breadcrumbs__item"
       :title="items[0]?.title"
       :current="items.length === 1"
       :variant="variant"
       @click="items[0]?.clickHandler && items[0]?.clickHandler(items[0]?.id)"
-    >
-    </VcBreadcrumbsItem>
+    />
+
     <VcIcon
       v-if="withArrow && canExpand"
+      class="vc-breadcrumbs__chevron-icon"
       :icon="arrowIcon"
       :size="arrowSize"
-      class="tw-text-[color:var(--chevron-color)]"
     />
+
     <VcBreadcrumbsItem
       v-if="canExpand"
       id="Expand"
+      class="vc-breadcrumbs__expand-button"
       :current="false"
       title="..."
       :variant="variant"
       @click="expand"
-    >
-    </VcBreadcrumbsItem>
+    />
+
     <template
       v-for="(item, i) in visibleBreadcrumbs"
       :key="item?.id ?? `breadcrumb-item-${i}`"
     >
       <div
         v-if="item && item.title && item.isVisible"
-        class="tw-flex tw-flex-row tw-items-center tw-justify-center"
+        class="vc-breadcrumbs__item-wrapper"
       >
         <VcIcon
           v-if="withArrow && i < items.length - 1"
+          class="vc-breadcrumbs__item-chevron"
           :icon="arrowIcon"
           :size="arrowSize"
-          class="tw-text-[color:var(--chevron-color)] tw-mr-[10px]"
         />
         <VcBreadcrumbsItem
+          class="vc-breadcrumbs__item"
           v-bind="item"
           :current="i === items.length - 1"
           :variant="variant"
@@ -79,11 +83,10 @@ const props = withDefaults(defineProps<Props>(), {
   arrowSize: "xs",
 });
 
-const el = ref(null);
+const el = ref<HTMLElement | null>(null);
 const visibleBreadcrumbs = ref([]) as Ref<InternalBreadcrumbs[]>;
 
 const { width } = useElementBounding(el);
-
 const { items } = toRefs(props);
 
 const canExpand = computed(
@@ -145,6 +148,26 @@ function expand() {
 
 <style lang="scss">
 :root {
-  --chevron-color: #a1c0d4;
+  --chevron-color: var(--secondary-500);
+}
+
+.vc-breadcrumbs {
+  @apply tw-flex tw-items-center tw-flex-wrap tw-gap-2.5;
+
+  &__chevron-icon {
+    @apply tw-text-[color:var(--chevron-color)];
+  }
+
+  &__expand-button {
+    @apply tw-text-[color:var(--chevron-color)] tw-cursor-pointer hover:tw-text-[color:var(--chevron-color)];
+  }
+
+  &__item-wrapper {
+    @apply tw-flex tw-flex-row tw-items-center tw-justify-center;
+  }
+
+  &__item-chevron {
+    @apply tw-text-[color:var(--chevron-color)] tw-mr-2.5;
+  }
 }
 </style>

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>