@voicenter-team/voicenter-ui-plus 0.0.1

package/src/components/VcButton/VcButtonIcon.scss

@@ -0,0 +1,100 @@
+$transition: all .28s ease;
+
+@mixin colorActions($color) {
+  &-color--#{$color} {
+    @apply text-#{$color}-actions;
+    .vc-button--content, .content-icon {
+      @apply text-#{$color}-actions;
+    }
+
+    &:not(.vc-button--disabled) {
+      &:hover, &:focus {
+        .vc-button--content, .content-icon {
+          @apply text-#{$color}-actions--focus;
+        }
+      }
+
+      &:active {
+        .vc-button--content, .content-icon {
+          @apply text-#{$color}-actions--pressed;
+        }
+      }
+
+      &:not(.vc-button-icon--disabled):not(.vc-button-icon-type--hoverless) {
+        &:hover, &:focus {
+          @apply bg-#{$color}-actions-bg--focus;
+        }
+
+        &:active {
+          @apply bg-#{$color}-actions-bg--pressed;
+        }
+      }
+    }
+  }
+}
+
+.vc-button-icon {
+  @apply
+  relative
+  inline-flex
+  items-center
+  cursor-pointer
+  bg-transparent
+  text-center
+  outline-none
+  text-current
+  rounded-sm;
+  transition: $transition;
+  height: max-content;
+
+  .vc-button--content {
+    @apply flex text-center items-center flex-grow flex-shrink-0 whitespace-nowrap;
+    transition: $transition;
+  }
+
+  .vc-button--content, .content-icon {
+    @apply text-lg text-current;
+    line-height: 1;
+  }
+
+  &-type--default, &-type--hoverless {
+    @apply p-1;
+  }
+
+  &-type--outline {
+    @apply border-2 p-2.5 text-current border-current;
+    .vc-button--content, .content-icon {
+      @apply text-base;
+    }
+
+    &.is--small {
+      @apply border p-2;
+      .content-icon {
+        @apply text-sm;
+      }
+    }
+  }
+
+  @include colorActions(primary);
+  @include colorActions(secondary);
+  @include colorActions(destructive);
+  @include colorActions(warning);
+  @include colorActions(success);
+
+  &--disabled, &:disabled {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  &.is--animate:not(&--disabled) {
+    .content-icon {
+      transform: rotate(0);
+    }
+
+    &:hover {
+      .content-icon {
+        transition: transform 500ms linear;
+        transform: rotate(180deg);
+      }
+    }
+  }
+}

package/src/components/VcButton/VcButtonIcon.vue

@@ -0,0 +1,97 @@
+<template>
+    <button
+        class="vc-button-icon"
+        :disabled="disabled"
+        :class="classes"
+        :aria-disabled="disabled"
+        :type="buttonType"
+        @click="handleClick"
+    >
+        <span class="vc-button--content">
+            <i
+                v-if="icon"
+                :class="icon"
+                class="content-icon"
+            />
+        </span>
+    </button>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { ButtonIconType, ButtonColor, ButtonElementType } from './VcButton.types'
+
+const DEFAULT_TYPE = 'default'
+const DEFAULT_COLOR = 'primary'
+
+const CLASS_DISABLED = 'vc-button-icon--disabled'
+const CLASS_ANIMATION = 'is--animate'
+const CLASS_SMALL = 'is--small'
+const CLASS_FOR_TYPE = 'vc-button-icon-type--'
+const CLASS_FOR_COLOR = 'vc-button-icon-color--'
+
+export default defineComponent({
+    name: 'VcButtonIcon',
+    props: {
+        type: {
+            type: String as PropType<ButtonIconType>,
+            default: DEFAULT_TYPE
+        },
+        color: {
+            type: String as PropType<ButtonColor>,
+            default: DEFAULT_COLOR
+        },
+        icon: {
+            type: String,
+            default: 'vc-icon-settings'
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        dataTestName: {
+            type: String,
+            default: 'vc-button'
+        },
+        buttonType: {
+            type: String as PropType<ButtonElementType>,
+            default: 'button'
+        },
+        animate: {
+            type: Boolean,
+            default: false
+        },
+        small: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ['click'],
+    computed: {
+        classes () {
+            const typeClass = CLASS_FOR_TYPE + this.type
+            const colorClass = CLASS_FOR_COLOR + this.color
+            return [
+                typeClass,
+                colorClass,
+                {
+                    [CLASS_DISABLED]: this.disabled,
+                    [CLASS_ANIMATION]: this.animate,
+                    [CLASS_SMALL]: this.small
+                }
+            ]
+        }
+    },
+    methods: {
+        handleClick (evt: MouseEvent): void {
+            if (!this.disabled) {
+                this.$emit('click', evt)
+            }
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+    @import "VcButtonIcon";
+</style>

package/src/components/VcCard/VcCard.vue

@@ -0,0 +1,53 @@
+<template>
+    <div
+        :class="{
+            'vc-card--hover': hovered
+        }"
+        class="vc-card"
+    >
+        <div class="vc-card-content">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    name: 'VcCard',
+    props: {
+        hovered: {
+            type: Boolean,
+            default: false
+        },
+        dataTestName: {
+            type: String,
+            default: 'vc-card'
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.vc-card {
+  @apply
+  relative
+  w-full
+  bg-white
+  rounded-md
+  shadow-card;
+
+  &--hover {
+    @apply
+    transition-all
+    duration-300
+    ease-in
+    md:hover:shadow-hover-outer cursor-pointer;
+  }
+
+  .vc-card-content {
+    @apply h-full w-full;
+  }
+}
+</style>

package/src/components/VcCheckbox/VcCheckbox.scss

@@ -0,0 +1,66 @@
+@mixin colorSchemeCheckbox ($colorName) {
+  &.vc-checkbox-color--#{$colorName}:not(.is-disabled) {
+    --el-checkbox-input-border-color-hover: var(--#{$colorName}-actions);
+    --el-checkbox-checked-bg-color: var(--#{$colorName}-actions);
+    --el-checkbox-checked-input-border-color: var(--#{$colorName}-actions);
+    &:not(.is-bordered):not(.is-disabled):hover {
+      .el-checkbox__inner {
+        @apply shadow-hover-outer-#{$colorName};
+      }
+    }
+    &.is-bordered {
+      &:not(.is-disabled).is-checked {
+        @apply border-#{$colorName}-actions;
+      }
+      &:not(.is-disabled):hover {
+        @apply shadow-hover-outer-#{$colorName};
+      }
+    }
+  }
+}
+
+.vc-checkbox, .el-checkbox {
+  @apply ltr:mr-8 rtl:ml-8 rtl:mr-0;
+  &:last-of-type {
+    @apply ltr:mr-0 rtl:ml-0 rtl:mr-0;
+  }
+  .el-checkbox__label {
+    @apply ltr:pl-3 rtl:pr-3;
+  }
+  .el-checkbox__input.is-indeterminate {
+    .el-checkbox__inner:before {
+      height: 6px;
+      transform: scale(.75);
+    }
+  }
+  .el-checkbox__inner {
+    &:after {
+      border-width: 4px;
+      height: 8px;
+      width: 4px;
+      top: 0;
+    }
+  }
+  &.is-disabled {
+    @apply cursor-not-allowed;
+  }
+  &:not(.is-bordered):not(.is-disabled):hover {
+    .el-checkbox__inner {
+      @apply shadow-hover-outer-active;
+    }
+  }
+  &.is-bordered {
+    &:not(.is-disabled).is-checked {
+      @apply border-active-elements;
+    }
+    &:not(.is-disabled):hover {
+      @apply shadow-hover-outer-active;
+    }
+  }
+
+  @include colorSchemeCheckbox(primary);
+  @include colorSchemeCheckbox(secondary);
+  @include colorSchemeCheckbox(destructive);
+  @include colorSchemeCheckbox(success);
+  @include colorSchemeCheckbox(warning);
+}

package/src/components/VcCheckbox/VcCheckbox.vue

@@ -0,0 +1,99 @@
+<template>
+    <el-checkbox
+        :model-value="modelValue"
+        :checked="checked"
+        :indeterminate="indeterminate"
+        :border="border"
+        :label="label"
+        :true-label="trueLabel"
+        :false-label="falseLabel"
+        :disabled="disabled"
+        :name="name"
+        :class="inputClasses"
+        text-color="red"
+        class="vc-checkbox"
+        @click="onClick"
+        @change="onChange"
+    >
+        <slot />
+    </el-checkbox>
+</template>
+
+<script lang="ts">
+import { ElCheckbox } from 'element-plus'
+import { defineComponent } from 'vue'
+import color from '@/mixins/input/color.mixin'
+
+export default defineComponent({
+    name: 'VcCheckbox',
+    components: { ElCheckbox },
+    mixins: [color],
+    props: {
+        modelValue: {
+            type: [String, Number, Boolean],
+            default: undefined
+        },
+        label: {
+            type: [String, Number, Boolean, Object],
+            default: undefined
+        },
+        trueLabel: {
+            type: [String, Number],
+            default: undefined
+        },
+        falseLabel: {
+            type: [String, Number],
+            default: undefined
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        border: {
+            type: Boolean,
+            default: false
+        },
+        checked: {
+            type: Boolean,
+            default: false
+        },
+        indeterminate: {
+            type: Boolean,
+            default: false
+        },
+        name: {
+            type: String,
+            default: undefined
+        },
+        handUpdate: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ['update:modelValue', 'change', 'update:checked'],
+    data () {
+        return {
+            colorClass: 'vc-checkbox-color--'
+        }
+    },
+    methods: {
+        onChange (value: string | number | boolean): void {
+            if (this.modelValue !== undefined) {
+                this.$emit('update:modelValue', value)
+            }
+            this.$emit('change', value)
+        },
+        onClick (event: Event): void {
+            if (this.handUpdate) {
+                event.preventDefault()
+                this.$emit('update:checked', this.modelValue)
+            }
+        }
+    }
+})
+
+</script>
+
+<style lang="scss">
+@import "VcCheckbox";
+</style>

package/src/components/VcCheckbox/VcCheckboxGroupEl.vue

@@ -0,0 +1,18 @@
+<template>
+    <el-checkbox-group
+        class="vc-checkbox-group"
+        v-bind="$attrs"
+    >
+        <slot />
+    </el-checkbox-group>
+</template>
+
+<script lang="ts">
+import { ElCheckboxGroup } from 'element-plus'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    name: 'VcCheckboxGroupEl',
+    components: { ElCheckboxGroup }
+})
+</script>

package/src/components/VcCheckboxGroup/VcCheckboxGroup.vue

@@ -0,0 +1,164 @@
+<template>
+    <div
+        class="vc-checkbox-group__wrapper"
+        :data-test="`checkbox-group-${dataTestName}`"
+    >
+        <VcCheckbox
+            v-if="visibleAll"
+            v-model="checkAll"
+            :indeterminate="isIndeterminate"
+        >
+            {{ selectAllLabelText }}
+        </VcCheckbox>
+        <VcCheckboxGroupEl
+            v-model="checkedModel"
+            :disabled="disabled"
+            :min="min"
+            :max="max"
+            :label="label"
+            class="vc-checkbox-group"
+        >
+            <div
+                v-for="(option, index) in checkboxes"
+                :key="`checkbox-${index}`"
+                class="vc-checkbox-group__item"
+            >
+                <VcCheckbox
+                    :label="getOptionProperty(option, 'value')"
+                    :disabled="getOptionDisabled(option)"
+                    :color="getOptionColor(option)"
+                >
+                    <slot
+                        name="checkbox-label"
+                        :checkbox="option"
+                    >
+                        {{ getOptionProperty(option, 'label') }}
+                    </slot>
+                </VcCheckbox>
+            </div>
+        </VcCheckboxGroupEl>
+    </div>
+</template>
+
+<script lang="ts">
+import { PropType } from 'vue/dist/vue'
+import { defineComponent } from 'vue'
+import VcCheckbox from '@/components/VcCheckbox/VcCheckbox.vue'
+import VcCheckboxGroupEl from '@/components/VcCheckbox/VcCheckboxGroupEl.vue'
+import groupMixin, { ModelType, ConfigGroupType } from '@/components/VcCheckbox/group.mixin'
+import { VcInputColor } from '@/components/VcInput/VcInput.types'
+
+export default defineComponent({
+    name: 'VcCheckboxGroupElement',
+    components: { VcCheckboxGroupEl, VcCheckbox },
+    mixins: [groupMixin],
+    props: {
+        modelValue: {
+            type: Array as PropType<ModelType[]>,
+            default: () => []
+        },
+        checkboxes: {
+            type: Array as PropType<ModelType[]>,
+            default: () => []
+        },
+        valueKey: {
+            type: String,
+            default: ''
+        },
+        config: {
+            type: Object as PropType<ConfigGroupType>,
+            default: () => ({} as ConfigGroupType)
+        },
+        selectAllLabel: {
+            type: String,
+            default: ''
+        },
+        dataTestName: {
+            type: String,
+            default: 'default'
+        },
+        visibleAll: {
+            type: Boolean,
+            default: true
+        }
+    },
+    emits: ['update:modelValue', 'change'],
+    computed: {
+        checkAll: {
+            get (): boolean {
+                return this.modelValue.length === this.checkboxes.length
+            },
+            set (val: boolean): void {
+                this.handleCheckAllChange(val)
+            }
+        },
+        checkedModel: {
+            get (): ModelType[] {
+                return this.modelValue as ModelType[]
+            },
+            set (val: ModelType[]): void {
+                this.$emit('update:modelValue', val)
+                this.onChangeEmit(val)
+            }
+        },
+        isIndeterminate (): boolean {
+            return !!(this.modelValue?.length && !this.checkAll)
+        },
+        selectAllLabelText (): string {
+            return this.selectAllLabel ? this.selectAllLabel : this.$tVU.t('checkbox.group.choose.all')
+        }
+    },
+    methods: {
+        getOptionProperty (option: ModelType, name: string): ModelType {
+            if (typeof option === 'object') {
+                const _key = this.getPropertyKey(name)
+                return option[_key] as ModelType
+            }
+            return option
+        },
+        getOptionDisabled (option: ModelType): boolean {
+            if (typeof option === 'object') {
+                const _key = this.getPropertyKey('disabled')
+                return !!option[_key]
+            }
+            return false
+        },
+        getOptionColor (option: ModelType): VcInputColor {
+            if (typeof option === 'object') {
+                const _key = this.getPropertyKey('color')
+                return option[_key] as VcInputColor
+            }
+            return ''
+        },
+        getPropertyKey (name: string): string {
+            let _key = ''
+            switch (name) {
+            case 'label':
+                _key = this.config?.labelKey || 'label'
+                break
+            case 'value':
+                _key = this.valueKey || this.config?.valueKey || 'value'
+                break
+            case 'color':
+                _key = this.config?.colorKey || 'color'
+                break
+            }
+
+            return _key
+        },
+        handleCheckAllChange (val: boolean) {
+            if (!val) {
+                this.checkedModel = []
+                return
+            }
+            this.checkedModel = this.checkboxes.map((item: ModelType) => {
+                return this.getOptionProperty(item, 'value')
+            }) as ModelType[]
+        },
+        onChangeEmit (value: ModelType[]) {
+            const _result = this.checkboxes.filter((item:ModelType) => value.includes(this.getOptionProperty(item, 'value')))
+            this.$emit('change', _result)
+        }
+    }
+})
+</script>

package/src/components/VcCollapse/VcCollapse.vue

@@ -0,0 +1,70 @@
+<template>
+    <div
+        class="vc-collapse"
+        role="tablist"
+        aria-multiselectable="true"
+    >
+        <slot />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+
+export default defineComponent({
+    name: 'VcCollapse',
+    provide () {
+        return {
+            collapse: this
+        }
+    },
+    props: {
+        modelValue: {
+            type: Array as PropType<string[]>,
+            default: () => []
+        },
+        accordion: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ['update:modelValue'],
+    data () {
+        return {
+            localModel: [] as string[]
+        }
+    },
+    watch: {
+        modelValue: {
+            immediate: true,
+            handler (val: string[]) {
+                this.localModel = val
+            }
+        },
+        localModel (val) {
+            this.$emit('update:modelValue', val)
+        }
+    },
+    methods: {
+        setActiveName (data: { name: string, state: boolean }) {
+            if (this.accordion) {
+                const name = data.name
+                if (name === this.localModel[0]) {
+                    this.localModel = []
+                } else {
+                    this.localModel = [data.name]
+                }
+            } else {
+                const _names = [...this.localModel]
+                const index = _names.indexOf(data.name)
+                if (index > -1) {
+                    _names.splice(index, 1)
+                } else {
+                    _names.push(data.name)
+                }
+                this.localModel = _names
+            }
+        }
+    }
+})
+</script>