@voicenter-team/voicenter-ui-plus 1.1.21 → 2.0.2

package/src/components/VcModal/VcModal.scss

@@ -1,232 +0,0 @@
-.vc-dialog-mask {
-  --background-overlay-color: color-mix(in srgb, var(--overlay-bg, #000) 40%, transparent);
-  @apply fixed top-0 left-0 w-full h-full flex justify-center items-center pointer-events-none overflow-x-hidden;
-}
-
-.vc-dialog {
-  @apply flex flex-col pointer-events-auto box-border rounded-md border-none shadow-card;
-  max-height: 90%;
-  transform: scale(1);
-
-  .vc-dialog-content {
-    @apply overflow-y-auto bg-light-bg text-default-text py-4 px-4 md:px-8 flex-grow flex-shrink-0;
-    &.vc-dialog-no-footer {
-      @apply rounded-b-md;
-    }
-
-    max-height: 60vh;
-  }
-
-  .vc-dialog-header {
-    @apply
-    flex
-    items-center
-    justify-end
-    flex-shrink-0
-    border-b
-    border-ui-lines
-    rounded-t-md
-    bg-light-bg p-4 flex-shrink-0 justify-end;
-    .vc-dialog-title {
-      @apply text-heading-text flex flex-grow text-center justify-center text-xl font-semibold;
-    }
-  }
-
-  .vc-dialog-footer {
-    @apply flex-shrink-0 border-t
-    border-ui-lines bg-light-bg
-    text-default-text p-4 flex
-    justify-end rounded-b-md;
-  }
-
-  .vc-dialog-header-icons {
-    @apply flex flex-shrink-0 items-center justify-end;
-  }
-
-  .vc-dialog-header-icon {
-    @apply flex items-center justify-center overflow-hidden relative;
-    transition: all .38s ease;
-    @apply text-inactive-elements;
-    &:hover {
-      @apply text-active-elements--focus;
-    }
-  }
-
-  /* Fluid */
-  .vc-fluid .vc-dialog-footer .vc-button {
-    width: auto;
-  }
-}
-
-.vc-component-overlay {
-  @apply pointer-events-auto;
-  pointer-events: auto;
-  background-color: var(--background-overlay-color);
-  transition-duration: 0.3s;
-}
-
-.vc-component-overlay-enter {
-  animation: vc-component-overlay-enter-animation 150ms forwards;
-}
-
-.vc-component-overlay-leave {
-  animation: vc-component-overlay-leave-animation 150ms forwards;
-}
-
-/* Animation */
-/* Center */
-.vc-dialog-enter-active {
-  transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.vc-dialog-leave-active {
-  transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
-}
-
-.vc-dialog-enter-from,
-.vc-dialog-leave-to {
-  opacity: 0;
-  transform: scale(0.7);
-}
-
-/* Top, Bottom, Left, Right, Top* and Bottom* */
-.vc-dialog-top .vc-dialog,
-.vc-dialog-bottom .vc-dialog,
-.vc-dialog-left .vc-dialog,
-.vc-dialog-right .vc-dialog,
-.vc-dialog-top-left .vc-dialog,
-.vc-dialog-top-right .vc-dialog,
-.vc-dialog-bottom-left .vc-dialog,
-.vc-dialog-bottom-right .vc-dialog {
-  margin: .75rem;
-  transform: translate3d(0px, 0px, 0px);
-}
-
-.vc-dialog-top .vc-dialog-enter-active,
-.vc-dialog-top .vc-dialog-leave-active,
-.vc-dialog-bottom .vc-dialog-enter-active,
-.vc-dialog-bottom .vc-dialog-leave-active,
-.vc-dialog-left .vc-dialog-enter-active,
-.vc-dialog-left .vc-dialog-leave-active,
-.vc-dialog-right .vc-dialog-enter-active,
-.vc-dialog-right .vc-dialog-leave-active,
-.vc-dialog-top-left .vc-dialog-enter-active,
-.vc-dialog-top-left .vc-dialog-leave-active,
-.vc-dialog-top-right .vc-dialog-enter-active,
-.vc-dialog-top-right .vc-dialog-leave-active,
-.vc-dialog-bottom-left .vc-dialog-enter-active,
-.vc-dialog-bottom-left .vc-dialog-leave-active,
-.vc-dialog-bottom-right .vc-dialog-enter-active,
-.vc-dialog-bottom-right .vc-dialog-leave-active {
-  transition: all .3s ease-out;
-}
-
-.vc-dialog-top .vc-dialog-enter-from,
-.vc-dialog-top .vc-dialog-leave-to {
-  transform: translate3d(0px, -100%, 0px);
-}
-
-.vc-dialog-bottom .vc-dialog-enter-from,
-.vc-dialog-bottom .vc-dialog-leave-to {
-  transform: translate3d(0px, 100%, 0px);
-}
-
-.vc-dialog-left .vc-dialog-enter-from,
-.vc-dialog-left .vc-dialog-leave-to,
-.vc-dialog-top-left .vc-dialog-enter-from,
-.vc-dialog-top-left .vc-dialog-leave-to,
-.vc-dialog-bottom-left .vc-dialog-enter-from,
-.vc-dialog-bottom-left .vc-dialog-leave-to {
-  transform: translate3d(-100%, 0px, 0px);
-}
-
-.vc-dialog-right .vc-dialog-enter-from,
-.vc-dialog-right .vc-dialog-leave-to,
-.vc-dialog-top-right .vc-dialog-enter-from,
-.vc-dialog-top-right .vc-dialog-leave-to,
-.vc-dialog-bottom-right .vc-dialog-enter-from,
-.vc-dialog-bottom-right .vc-dialog-leave-to {
-  transform: translate3d(100%, 0px, 0px);
-}
-
-/* Maximize */
-.vc-dialog-maximized {
-  @apply transition-none transform-none;
-  width: 100vw !important;
-  height: 100vh !important;
-  top: 0 !important;
-  left: 0 !important;
-  max-height: 100%;
-
-  &.vc-dialog {
-    @apply m-0;
-  }
-
-  .vc-dialog-content {
-    max-height: unset;
-    border-radius: 0;
-  }
-}
-
-.vc-dialog-maximized .vc-dialog-content {
-  @apply flex-grow;
-}
-
-.vc-dialog-maximized .vc-dialog-content.vc-dialog-content {
-  border-radius: 0;
-}
-
-/* Position */
-.vc-dialog-left {
-  @apply justify-start;
-}
-
-.vc-dialog-right {
-  @apply justify-end;
-}
-
-.vc-dialog-top {
-  @apply items-start;
-}
-
-.vc-dialog-top-left {
-  @apply items-start justify-start;
-}
-
-.vc-dialog-top-right {
-  @apply items-start justify-end;
-}
-
-.vc-dialog-bottom {
-  @apply items-end;
-}
-
-.vc-dialog-bottom-left {
-  @apply justify-start items-end;
-}
-
-.vc-dialog-bottom-right {
-  @apply justify-end items-end;
-}
-
-.vc-confirm-dialog .vc-dialog-content {
-  @apply flex items-center;
-}
-
-@keyframes vc-component-overlay-enter-animation {
-  from {
-    background-color: transparent;
-  }
-  to {
-    background-color: var(--background-overlay-color);
-  }
-}
-
-@keyframes vc-component-overlay-leave-animation {
-  from {
-    background-color: var(--background-overlay-color);
-  }
-  to {
-    background-color: transparent;
-  }
-}

package/src/components/VcPopover/VcPopover.scss

@@ -1,10 +0,0 @@
-.vc-popover.el-popover {
-  @apply text-default-text;
-  --el-popover-border-radius: 0.25rem;
-  --el-border-color-light: var(--ui-lines);
-  --el-popover-border-color: var(--ui-lines);
-
-  .el-popover__content {
-    @apply break-normal;
-  }
-}

package/src/components/VcSelect/VcSelect.scss

@@ -1,96 +0,0 @@
-@use "VcSelectVariables";
-@use "VcSelectMixin" as *;
-.el-tag .el-tag__close {
-  @apply rtl:mr-2 rtl:ml-0;
-}
-[dir=rtl] {
-  .vc-select__dropdown .el-select-dropdown__item.selected:after, .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
-    right: auto;
-    left: 20px;
-  }
-}
-.el-select.vc-select {
-  --el-fill-color-blank: var(--field-bg);
-  --el-fill-color-light: var(--field-bg);
-  @apply w-full text-sm;
-  .el-select__wrapper {
-    @apply py-0 px-1 border border-field-borders;
-    box-shadow: none !important;
-    &.is-focused  {
-      @apply border-active-elements--focus;
-      &:hover {
-        box-shadow: 0 0 3px var(--active-elements--focus) !important;
-      }
-    }
-    &:hover, &.is-hovered {
-      box-shadow: 0 0 3px var(--active-elements--focus) !important;
-    }
-  }
-
-  .el-select__prefix {
-    --el-input-icon-color: var(--active-elements);
-  }
-  .el-select__prefix-inner {
-    & > :last-child {
-      @apply mr-2 rtl:mr-0 rtl:ml-2;
-    }
-  }
-  .el-select__icon {
-    @apply text-active-elements;
-  }
-  .el-input__suffix-inner > :first-child {
-    @apply rtl:ml-0 rtl:mr-2;
-  }
-
-  .el-select__tags:hover + .el-input .el-input__wrapper {
-    box-shadow: 0 0 3px var(--active-elements--focus) !important;
-  }
-
-  @include ElSelectColorScheme(primary);
-  @include ElSelectColorScheme(primary-alternative);
-  @include ElSelectColorScheme(secondary);
-  @include ElSelectColorScheme(destructive);
-  @include ElSelectColorScheme(success);
-  @include ElSelectColorScheme(warning);
-
-  .el-select__wrapper.is-disabled {
-    @apply bg-inactive-elements-bg--focus;
-
-    .el-select__prefix {
-      --el-input-icon-color: var(--inactive-elements);
-    }
-    .el-select__icon, .vc-select__prefix-icon {
-      @apply text-inactive-elements;
-    }
-    &:hover {
-      box-shadow: none !important;
-    }
-  }
-  .el-select__selection.is-near {
-    margin-left: 0;
-  }
-}
-
-.el-select-dropdown.vc-select__dropdown {
-  .el-select-group__wrap:not(:last-of-type)::after {
-    display: none;
-  }
-  .el-select-group__wrap:not(:last-of-type) {
-    padding-bottom: 0;
-  }
-  .el-select-group__title {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    font-size: var(--input-font-size, 0.875rem);
-    color: var(--default-text);
-    background-color: var(--main-bg);
-  }
-  .el-select-group__wrap {
-    .el-select-group {
-      .el-select-dropdown__item {
-        padding-left: 1rem;
-        padding-right: 1rem;
-      }
-    }
-  }
-}

package/src/components/VcSelect/VcSelectMixin.scss

@@ -1,39 +0,0 @@
-@mixin ElSelectColorScheme($color) {
-  &.vc-select--#{$color} {
-    --el-select-close-hover-color: var(--#{$color}-actions--focus);
-    --el-select-input-focus-border-color: var(--#{$color}-actions--focus);
-
-    .el-select__prefix {
-      --el-input-icon-color: var(--#{$color}-actions);
-    }
-    .el-select__icon {
-      color: var(--#{$color}-actions);
-    }
-    .el-select__wrapper {
-      &.is-focused  {
-        border-color: var(--#{$color}-actions--focus);
-        &:hover {
-          box-shadow: 0 0 3px var(--#{$color}-actions--focus) !important;
-        }
-      }
-      &:hover, &.is-hovered {
-        box-shadow: 0 0 3px var(--#{$color}-actions--focus) !important;
-      }
-    }
-  }
-}
-
-@mixin ElSelectDropdownColorScheme($color, $suffix: false) {
-  &.color--#{$color} {
-    @if ($suffix) {
-      .vc-select__option-icon {
-        color: var(--#{$color}-#{$suffix});
-      }
-    } @else {
-      .vc-select__option-icon {
-        color: var(--#{$color});
-      }
-    }
-
-  }
-}

package/src/components/VcSelect/VcSelectOption.scss

@@ -1,29 +0,0 @@
-@use "VcSelectVariables";
-@use "VcSelectMixin" as *;
-
-.vc-select__dropdown, .vc-select__dropdown.is-multiple {
-  .vc-select__option-content {
-    @apply flex items-center;
-  }
-  .vc-select__option-icon {
-    @apply mr-2 rtl:ml-2 rtl:mr-0 text-active-elements;
-  }
-  .el-select-dropdown__item {
-    @apply px-2;
-    &:not(:last-child) {
-      @apply border-b border-ui-lines;
-    }
-  }
-  .el-select-dropdown__item.selected, .el-select-dropdown__item.is--selected {
-    @apply font-medium text-active-elements;
-    &:after {
-      @apply bg-active-elements;
-    }
-  }
-
-  @include ElSelectDropdownColorScheme(primary);
-  @include ElSelectDropdownColorScheme(secondary, actions);
-  @include ElSelectDropdownColorScheme(destructive, actions);
-  @include ElSelectDropdownColorScheme(success);
-  @include ElSelectDropdownColorScheme(warning);
-}

package/src/components/VcSelect/VcSelectVariables.scss

@@ -1 +0,0 @@
-$colorFocus: var(--active-elements--focus);

package/src/enum/constants.ts

@@ -1,50 +0,0 @@
-export const componentSizes = [ '', 'default', 'small', 'large' ] as const
-export const componentColors = [ '', 'primary', 'secondary', 'destructive', 'success', 'warning', 'active', 'primary-alternative' ] as const
-export const textSizes = [ '', 'xxs', 'xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl' ] as const
-export const iconSizes = [ '', 'xxs', 'xs', 'sm', 'base', 'md', '2md', 'lg', 'xl', '2xl', '3xl', '2r', '4r' ] as const
-export const DEFAULT_COMPONENT_SIZE = 'default'
-export type COMPONENT_SIZE_TYPE = typeof componentSizes[number]
-export type TEXT_SIZE_TYPE = typeof textSizes[number]
-export type ICON_SIZE_TYPE = typeof iconSizes[number]
-export type COMPONENT_COLOR_TYPE = typeof componentColors[number]
-
-export const UPDATE_MODEL_EVENT = 'update:modelValue'
-export const CHANGE_EVENT = 'change'
-export const INPUT_EVENT = 'input'
-
-export const EVENT_CODE = {
-    tab: 'Tab',
-    enter: 'Enter',
-    space: 'Space',
-    left: 'ArrowLeft', // 37
-    up: 'ArrowUp', // 38
-    right: 'ArrowRight', // 39
-    down: 'ArrowDown', // 40
-    esc: 'Escape',
-    delete: 'Delete',
-    backspace: 'Backspace',
-    numpadEnter: 'NumpadEnter',
-    pageUp: 'PageUp',
-    pageDown: 'PageDown',
-    home: 'Home',
-    end: 'End',
-}
-
-export function isComponentColor (color: string): color is COMPONENT_COLOR_TYPE {
-    return componentColors.includes(color as COMPONENT_COLOR_TYPE)
-}
-
-
-export const EDITABLE_TAB_SUB_SECTION_QUERY_PARAM_NAME = 'id' as const
-export const LIST_TAB_QUERY_VALUE = 'list'
-export const CREATE_TAB_QUERY_VALUE = 'create'
-
-export const TEXT_COLORS = {
-    primary: 'text-primary',
-    secondary: 'text-secondary-actions',
-    destructive: 'text-destructive-actions',
-    success: 'text-success',
-    warning: 'text-warning',
-    active: 'text-active-elements',
-    'primary-alternative': 'text-primary-alternative-actions'
-}