@voicenter-team/voicenter-ui-plus 0.0.20 → 0.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voicenter-team/voicenter-ui-plus",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
@@ -13,8 +13,6 @@
   "types": "library/types/src/entry.esm.d.ts",
   "files": [
     "library/*",
-    "src/**/*.vue",
-    "src/**/*.scss",
     "src/theme"
   ],
   "engines": {

package/src/assets/element/index.scss

@@ -1,161 +0,0 @@
-$inputFontSize: var(--input-font-size, 0.875rem);
-$baseBorderRadius: var(--base-border-radius, 0.25rem);
-
-$--fontFamily: (
-        '': inherit
-);
-
-$--sm: 680px;
-$--md: 960px;
-$--lg: 1264px;
-$--xl: 1680px;
-
-$--font-size: (
-        'extra-large': 1.25rem,
-        'large': 1.125rem,
-        'medium': 1rem,
-        'base': 0.875rem,
-        'small': 0.75rem,
-        'extra-small': 0.65rem,
-);
-
-$--z-index: (
-        'normal': 1,
-        'top': 1000,
-        'popper': 3000,
-);
-
-$--input: (
-        'text-color': var(--default-text),
-        'border': var(--field-borders),
-        'hover-border': var(--active-elements-bg--focus),
-        'focus-border': var(--active-elements--focus),
-        'transparent-border': 0 0 0 1px transparent inset,
-        'border-color': var(--field-borders),
-        'border-radius': $baseBorderRadius,
-        'bg-color': var(--field-bg),
-        'icon-color': var(--active-elements),
-        'placeholder-color': var(--placeholders),
-        'hover-border-color': var(--active-elements--focus),
-        'clear-hover-color': var(--active-elements--focus),
-        'focus-border-color': var(--active-elements--focus),
-);
-$--input-disabled: (
-        'fill': var(--inactive-elements-bg--focus),
-        'border': var(--field-borders),
-        'text-color': var(--inactive-elements),
-        'placeholder-color': var(--inactive-elements),
-        'icon-color': var(--inactive-elements),
-);
-
-$--popover: (
-        "border-radius": $baseBorderRadius,
-        "border-color": var(--ui-lines),
-        "bg-color": var(--white),
-        "font-size": $inputFontSize,
-        "padding": 0,
-        "padding-large": 12px,
-        "title-text-color": var(--default-text)
-);
-
-$--select: (
-        'border-color-hover': var(--active-elements--focus),
-        'disabled-border': var(--field-borders),
-        'font-size': $inputFontSize,
-        'close-hover-color': var(--active-elements--focus),
-        'input-color': var(--placeholders),
-        'multiple-input-color': var(--default-text),
-        'input-focus-border-color': var(--active-elements),
-        'input-font-size': $inputFontSize,
-);
-
-$--select-option: (
-        'height': var(--select-option-height, 2rem),
-        'text-color': var(--default-text),
-        'disabled-color': var(--inactive-elements),
-        'hover-background': var(--active-elements-bg--focus),
-        'selected-text-color': var(--active-elements),
-);
-
-$--checkbox: (
-        'font-size': $inputFontSize,
-        'font-weight': var(--input-font-weight),
-        'text-color': var(--default-text),
-        'input-height': 18px,
-        'input-width': 18px,
-        'border-radius': $baseBorderRadius,
-        'bg-color': var(--field-bg, '#ffffff'),
-        'input-border': 1px solid var(--inactive-elements),
-        'disabled-border-color': var(--inactive-elements),
-        'disabled-input-fill': var(--field-bg, '#ffffff'),
-        'disabled-icon-color': var(--placeholders),
-        'disabled-checked-input-fill': var(--inactive-elements),
-        'disabled-checked-input-border-color': var(--inactive-elements),
-        'disabled-checked-icon-color': var(--white),
-        'checked-text-color': var(--default-text),
-        'checked-input-border-color': var(--active-elements),
-        'checked-bg-color': var(--active-elements),
-        'checked-icon-color': var(--white),
-        'input-border-color-hover': var(--active-elements--focus),
-);
-$--checkbox-bordered-padding-left: (
-        'large': 14px,
-        'default': 12px,
-        'small': 10px,
-);
-$--radio: (
-        'font-size': $inputFontSize,
-        'text-color': var(--default-text),
-        'font-weight': var(--input-font-weight),
-        'input-height': 18px,
-        'input-width': 18px,
-        'input-border-radius': 100%,
-        'input-bg-color': var(--field-bg, '#ffffff'),
-        'input-border': 2px solid var(--inactive-elements),
-        'input-border-color': var(--inactive-elements),
-        'input-border-color-hover': var(--active-elements),
-);
-
-$--radio-disabled: (
-        'input-border-color': var(--inactive-elements),
-        'input-fill': var(--field-bg, '#ffffff'),
-        'icon-color': var(--inactive-elements),
-        'checked-input-border-color': var(--inactive-elements),
-        'checked-input-fill': var(--inactive-elements),
-        'checked-icon-color': var(--placeholders),
-);
-$--radio-checked: (
-        'text-color': var(--default-text),
-        'input-border-color': var(--active-elements),
-        'icon-color': var(--active-elements),
-);
-
-$--input-number-width: (
-        'large': 180px,
-        'default': 150px,
-        'small': 120px,
-        'full': 100%,
-);
-
-@forward "element-plus/theme-chalk/src/common/var.scss" with (
-  // do not use same name, it will override.
-        $font-size: $--font-size,
-        // $colors: $--colors,
-        $z-index: $--z-index,
-        $popover: $--popover,
-        $input: $--input,
-        $input-disabled: $--input-disabled,
-        $select: $--select,
-        $select-option: $--select-option,
-        $checkbox: $--checkbox,
-        $checkbox-bordered-padding-left: $--checkbox-bordered-padding-left,
-        $radio: $--radio,
-        $radio-disabled: $--radio-disabled,
-        $radio-checked: $--radio-checked,
-        $input-number-width: $--input-number-width,
-        $font-family: $--fontFamily,
-        $sm: $--sm,
-        $md: $--md,
-        $lg: $--lg,
-        $xl: $--xl,
-);

package/src/assets/sass/main/_icons.scss

@@ -1,36 +0,0 @@
-.icon-xxs {
-    font-size: 0.687rem; // 11px
-}
-.icon-xs {
-    font-size: 0.75rem; // 12px
-}
-.icon-sm {
-    font-size: 0.875rem // 14px
-}
-.icon-base {
-    font-size: 1rem; // 16px
-}
-.icon-md {
-    font-size: 1.125rem // 18px
-}
-.icon-2md {
-    font-size: 1.1875rem //19px
-}
-.icon-lg {
-    font-size: 1.375rem // 22px
-}
-.icon-xl {
-    font-size: 1.5rem // 24px
-}
-.icon-2xl {
-    font-size: 1.875rem // 30px
-}
-.icon-3xl {
-    font-size: 2.25rem // 36px
-}
-.icon-2r {
-    font-size: 2rem //32px
-}
-.icon-4r {
-    font-size: 4rem //64px
-}

package/src/assets/sass/main/_loading.scss

@@ -1,51 +0,0 @@
-$speedAnimation: 2s;
-
-.animation-block {
-    position: relative;
-    overflow: hidden;
-    &:before {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 50%;
-        z-index: 1;
-        width: 500%;
-        margin-left: -250%;
-        background: linear-gradient(to right, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 54%) 50% 50%;
-        animation: phAnimation $speedAnimation linear infinite;
-        content: " ";
-        pointer-events: none;
-    }
-}
-[dir='rtl'] {
-    .animation-block {
-        &:before {
-            left: auto;
-            margin-left: 0;
-            right: 50%;
-            margin-right: -250%;
-        }
-    }
-}
-
-@keyframes phAnimation {
-    0% {
-        transform: translate3d(-30%, 0, 0);
-    }
-
-    100% {
-        transform: translate3d(30%, 0, 0);
-    }
-}
-@keyframes dotsAnimation {
-    0% {
-        opacity: 0;
-    }
-    50% {
-        opacity: 1;
-    }
-    100% {
-        opacity: 0;
-    }
-}

package/src/assets/sass/main/_mixins.scss

@@ -1,339 +0,0 @@
-// The mixin used to style tooltip. Make sure that element to which mixin is applied have '&--arrow' element inside
-@mixin tooltip {
-  @apply absolute border border-field-borders rounded bg-sub-bg z-1;
-
-  .reference {
-    @apply flex items-center justify-center;
-  }
-
-  &-arrow {
-    text-align: initial;
-    @apply absolute w-4 h-4;
-
-    &:before {
-      content: '';
-      @apply bg-sub-bg border-t border-l border-field-borders transform w-4 h-4 absolute;
-    }
-  }
-
-  // top
-  &--top-left, &--top-center, &--top-right {
-    @apply mt-3;
-  }
-  &--top-left &-arrow, &--top-center &-arrow, &--top-right &-arrow {
-    top: calc(theme('spacing.2') * -1 - 1px);
-
-    &:before {
-      @apply rotate-45;
-    }
-  }
-  // bottom
-  &--bottom-left, &--bottom-right {
-    @apply mb-3;
-  }
-  &--bottom-left &-arrow, &--bottom-center &-arrow, &--bottom-right &-arrow {
-    bottom: calc(theme('spacing.2') * -1 - 1px);
-
-    &:before {
-      @apply rotate-225;
-    }
-  }
-
-  // top/bottom
-  &--top-left &-arrow, &--bottom-left &-arrow {
-    @apply left-8;
-  }
-  &--top-center &-arrow, &--bottom-center &-arrow {
-    @apply transform -translate-x-1/2 inset-x-1/2;
-  }
-  &--top-right &-arrow, &--bottom-right &-arrow {
-    @apply right-8;
-  }
-
-  // left
-  &--left-top, &--left-center, &--left-bottom {
-    @apply ml-3;
-  }
-  &--left-top &-arrow, &--left-center &-arrow, &--left-bottom &-arrow {
-    left: calc(theme('spacing.2') * -1 - 1px);
-
-    &:before {
-      @apply -rotate-45;
-    }
-  }
-  // right
-  &--right-top, &--right-center, &--right-bottom {
-    @apply mr-3;
-  }
-  &--right-top &-arrow, &--right-center &-arrow, &--right-bottom &-arrow {
-    right: calc(theme('spacing.2') * -1 - 1px);
-
-    &:before {
-      @apply rotate-135;
-    }
-  }
-
-  // left/right
-  &--left-top &-arrow, &--right-top &-arrow {
-    @apply top-8;
-  }
-  &--left-center &-arrow, &--right-center &-arrow {
-    @apply transform -translate-y-1/2 inset-y-1/2;
-  }
-  &--left-bottom &-arrow, &--right-bottom &-arrow {
-    @apply bottom-8;
-  }
-
-  // (top/bottom) left
-  [dir='rtl'] &--top-left &-arrow, [dir='rtl'] &--bottom-left &-arrow {
-    @apply left-auto right-8;
-  }
-  // (top/bottom) center
-  [dir='rtl'] &--top-center &-arrow, [dir='rtl'] &--bottom-center &-arrow {
-    @apply translate-x-1/2;
-  }
-  // (top/bottom) right
-  [dir='rtl'] &--top-right &-arrow, [dir='rtl'] &--bottom-right &-arrow {
-    @apply right-auto left-8;
-  }
-
-  // left
-  [dir='rtl'] &--left-top, [dir='rtl'] &--left-center, [dir='rtl'] &--left-bottom {
-    @apply ml-0 mr-3;
-  }
-  [dir='rtl'] &--left-top &-arrow, [dir='rtl'] &--left-center &-arrow, [dir='rtl'] &--left-bottom &-arrow {
-    right: calc(theme('spacing.2') * -1 - 1px);
-    @apply left-auto;
-
-    &:before {
-      @apply rotate-135;
-    }
-  }
-
-  // right
-  [dir='rtl'] &--right-top, [dir='rtl'] &--right-center, [dir='rtl'] &--right-bottom {
-    @apply mr-0 ml-3;
-  }
-  [dir='rtl'] &--right-top &-arrow, [dir='rtl'] &--right-center &-arrow, [dir='rtl'] &--right-bottom &-arrow {
-    left: calc(theme('spacing.2') * -1 - 1px);
-    @apply right-auto;
-
-    &:before {
-      @apply -rotate-45;
-    }
-  }
-}
-
-@mixin inputWithNumber {
-  .vc-btn__decrease {
-    @apply rounded-l top-0 left-0;
-  }
-  .vc-btn__increase {
-    @apply rounded-r top-0 right-0;
-  }
-  .vc-btn__increase,
-  .vc-btn__decrease {
-    @apply bg-secondary-actions-bg--focus w-8 flex items-center justify-center select-none z-1 h-full;
-
-    &:hover {
-      @apply cursor-pointer;
-    }
-    :deep.icon {
-      @apply text-default-text;
-    }
-    &.is--disabled {
-      &:hover {
-        @apply cursor-not-allowed;
-      }
-      .icon {
-        @apply text-black opacity-50;
-      }
-    }
-  }
-}
-
-@mixin inputColorHover($color) {
-  &:hover:not(.is--disabled) {
-    @apply shadow-hover-outer-#{$color};
-  }
-  &.is--focus:not(.is--disabled):not(.is--error) {
-    @apply border-#{$color}-actions--focus;
-  }
-}
-
-@mixin input {
-  @apply flex-grow border-none outline-none bg-transparent m-0 px-3 shadow-none;
-  &__container {
-    @apply min-h-8 w-full max-w-full flex
-    text-sm rounded border border-field-borders overflow-hidden;
-    transition: box-shadow .2s ease-in-out;
-    &:hover:not(.is--disabled) {
-      @apply shadow-focus-outer;
-    }
-    input:-webkit-autofill,
-    input:-webkit-autofill:hover,
-    input:-webkit-autofill:focus,
-    input:-internal-autofill-selected {
-      background-color: transparent !important;
-      background-image: none !important;
-      color: transparent !important;
-    }
-    &.is--prefix-icon {
-      .vc-input {
-        @apply ltr:pl-0 rtl:pr-0;
-      }
-    }
-    &.is--clearable {
-      .vc-input {
-        @apply ltr:pr-0 rtl:pl-0;
-      }
-    }
-    &.is--disabled {
-      @apply bg-inactive-elements-bg--focus;
-      &:hover .vc-input, &:hover input {
-        @apply cursor-not-allowed;
-      }
-    }
-    &.is--error {
-      @apply border-error;
-    }
-  }
-  &__prefix-icon {
-    @apply flex-shrink-0 flex items-center justify-center px-1 text-icons;
-    pointer-events: none;
-    .vc-input-icon-color--active {
-      @apply text-active-elements;
-    }
-    .vc-input-icon-color--primary {
-      @apply text-primary-actions;
-    }
-    .vc-input-icon-color--secondary {
-      @apply text-secondary-actions;
-    }
-    .vc-input-icon-color--destructive {
-      @apply text-destructive-actions;
-    }
-    .vc-input-icon-color--success {
-      @apply text-success-actions;
-    }
-    .vc-input-icon-color--warning {
-      @apply text-warning-actions;
-    }
-  }
-  &__clearable {
-    @apply flex-shrink-0 flex items-center justify-center px-1 cursor-pointer;
-    &:hover {
-      i {
-        @apply text-active-elements--focus;
-        &:active {
-          @apply text-active-elements--pressed;
-        }
-      }
-    }
-  }
-
-  &-color--active {
-    &:hover:not(.is--disabled) {
-      @apply shadow-hover-outer-active;
-    }
-    &.is--focus:not(.is--disabled):not(.is--error) {
-      @apply border-active-elements--focus;
-    }
-  }
-  &-color--primary {
-    @include inputColorHover(primary);
-  }
-  &-color--secondary {
-    @include inputColorHover(secondary);
-  }
-  &-color--destructive {
-    @include inputColorHover(destructive);
-  }
-  &-color--success {
-    @include inputColorHover(success);
-  }
-  &-color--warning {
-    @include inputColorHover(warning);
-  }
-}
-
-@mixin label {
-  &__label {
-    &-wrapper {
-      @apply flex text-sm text-default-text font-normal;
-      &--left-item {
-        @apply inline-flex;
-        &-icon {
-          @apply mr-2 leading-none;
-          [dir=rtl] & {
-            @apply mr-0 ml-2;
-          }
-        }
-      }
-      &-label {
-        @apply text-sm text-default-text font-normal;
-        &__required-icon {
-          @apply text-primary-actions;
-        }
-      }
-    }
-    .vc-input__label-info {
-      @apply text-active-elements cursor-pointer;
-    }
-  }
-}
-
-@mixin errorContainer {
-  &__error-wrapper {
-    @apply relative w-full text-xs leading-normal;
-    &--text {
-      @apply inline-flex flex-wrap text-destructive-actions text-xs left-0 top-0 w-full overflow-hidden overflow-ellipsis whitespace-normal;
-    }
-  }
-}
-
-@mixin labelCustomInput {
-  &__label-wrap {
-    @apply flex;
-  }
-  &__label {
-    @apply mb-2 flex items-center text-sm text-default-text font-normal;
-    &-icon-wrap {
-      @apply inline-flex;
-    }
-    &-icon {
-      @apply mr-2 flex-shrink-0;
-      [dir=rtl] & {
-        @apply mr-0 ml-2;
-      }
-    }
-    &-text {
-      @apply text-sm text-default-text font-normal;
-    }
-    &-required-icon {
-      @apply text-primary-actions;
-    }
-  }
-  .vc-input__label-info {
-    @apply text-active-elements cursor-pointer;
-  }
-}
-
-@mixin fileUploader {
-  &__file-uploader {
-    &-wrapper {
-      &-input {
-        display: none;
-      }
-      &-label {
-        padding-bottom: 0.5rem;
-      }
-    }
-  }
-  &__message-wrapper {
-    @apply relative w-full text-xs leading-normal;
-    &--text {
-      @apply inline-flex flex-wrap text-secondary-actions text-xs left-0 top-0 w-full overflow-hidden overflow-ellipsis whitespace-nowrap;
-    }
-  }
-}

package/src/assets/sass/main/_typography.scss

@@ -1,29 +0,0 @@
-h1, .head-1 {
-    @apply font-semibold text-2xl;
-    color: var(--black);
-    line-height: 130%;
-}
-
-h2, .head-2 {
-    @apply font-bold text-xl;
-    color: var(--default-text);
-    line-height: 130%;
-}
-h3, .head-3 {
-    @apply font-semibold text-base;
-    color: var(--default-text);
-    line-height: 145%;
-    &.bold {
-        @apply font-bold;
-     }
-}
-
-h4, .head-4 {
-    @apply font-normal text-xs;
-    line-height: 145%;
-}
-
-p {
-    @apply text-xs font-normal;
-    line-height: 145%;
-}

package/src/assets/sass/main.scss

@@ -1,9 +0,0 @@
-@import 'main/loading';
-@import 'main/icons';
-@import 'main/typography';
-
-@import '../css/tailwind';
-
-* {
-    @apply box-border;
-}