Commit 6cd608fd authored by Дмитрий Малюгин's avatar Дмитрий Малюгин 🕓
Browse files

refactor ui-library (yeah, more)

parent 249dc533

src/output.css

+75 −0
Original line number Diff line number Diff line
@@ -660,6 +660,26 @@ video { 
  left: 1rem;

}



.right-4 {

  right: 1rem;

}



.top-10 {

  top: 2.5rem;

}



.top-14 {

  top: 3.5rem;

}



.right-5 {

  right: 1.25rem;

}



.top-16 {

  top: 4rem;

}



.z-40 {

  z-index: 40;

}
@@ -668,6 +688,10 @@ video { 
  z-index: 50;

}



.z-10 {

  z-index: 10;

}



.order-1 {

  order: 1;

}
@@ -680,6 +704,10 @@ video { 
  order: 3;

}



.col-span-2 {

  grid-column: span 2 / span 2;

}



.-my-2 {

  margin-top: -0.5rem;

  margin-bottom: -0.5rem;
@@ -695,6 +723,11 @@ video { 
  margin-bottom: 1rem;

}



.mx-2 {

  margin-left: 0.5rem;

  margin-right: 0.5rem;

}



.-mb-2 {

  margin-bottom: -0.5rem;

}
@@ -743,6 +776,10 @@ video { 
  margin-top: 1rem;

}



.mt-10 {

  margin-top: 2.5rem;

}



.block {

  display: block;

}
@@ -787,6 +824,11 @@ video { 
  height: 2rem;

}



.size-0 {

  width: 0px;

  height: 0px;

}



.h-12 {

  height: 3rem;

}
@@ -799,6 +841,10 @@ video { 
  height: 100%;

}



.h-0 {

  height: 0px;

}



.w-1\/2 {

  width: 50%;

}
@@ -835,6 +881,15 @@ video { 
  width: 100%;

}



.w-0 {

  width: 0px;

}



.w-max {

  width: -moz-max-content;

  width: max-content;

}



.-translate-x-1\/2 {

  --tw-translate-x: -50%;

  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -896,6 +951,14 @@ video { 
  grid-template-columns: repeat(5, minmax(0, 1fr));

}



.grid-cols-2 {

  grid-template-columns: repeat(2, minmax(0, 1fr));

}



.grid-rows-3 {

  grid-template-rows: repeat(3, minmax(0, 1fr));

}



.flex-col {

  flex-direction: column;

}
@@ -1128,6 +1191,18 @@ video { 
  padding: 1.5rem;

}



.p-16 {

  padding: 4rem;

}



.p-8 {

  padding: 2rem;

}



.p-10 {

  padding: 2.5rem;

}



.px-16 {

  padding-left: 4rem;

  padding-right: 4rem;

src/shared/ui/Button.vue

+66 −54
Original line number Diff line number Diff line 
<script setup lang="ts">

import { computed } from 'vue';

import { convertThemeToColorBlackDefault, convertThemeToColorWhiteDefault } from '@/app/helpers';



interface Props {

  label?: string;

  iconPos?: 'left' | 'top' | 'right' | 'bottom';

  textStyle?: 'bold' | 'italic';

  border?: 'white' | 'black';

  border?:

    | 'white'

    | 'slate'

    | 'blue'

    | 'sky'

    | 'teal'

    | 'lime'

    | 'green'

    | 'yellow'

    | 'orange'

    | 'pink'

    | 'fuchsia'

    | 'purple'

    | 'indigo'

    | 'rose'

    | 'red'

    | 'black';

  size?: 'small' | 'medium' | 'large' | 'extraLarge';

  textColor?:

    | 'white'

    | 'slate'

    | 'blue'

    | 'sky'

    | 'teal'

    | 'lime'

    | 'green'

    | 'yellow'

    | 'orange'

    | 'pink'

    | 'fuchsia'

    | 'purple'

    | 'indigo'

    | 'rose'

    | 'red'

    | 'black';

  theme?:

    | 'white'

    | 'slate'
@@ -25,48 +60,34 @@ interface Props { 
    | 'black';

}

const props = defineProps<Props>();

const themeColor = computed(() => {

  if (!props?.theme) return '#0ea5e9';

  switch (props?.theme) {

    case 'white':

      return '#ffffff';

    case 'slate':

      return '#64748b';

    case 'blue':

      return '#3b82f6';

    case 'sky':

      return '#0ea5e9';

    case 'teal':

      return '#14b8a6';

    case 'lime':

      return '#84cc16';

    case 'green':

      return '#22c55e';

    case 'yellow':

      return '#eab308';

    case 'orange':

      return '#f97316';

    case 'pink':

      return '#ec4899';

    case 'fuchsia':

      return '#d946ef';

    case 'purple':

      return '#a855f7';

    case 'indigo':

      return '#6366f1';

    case 'rose':

      return '#f43f5e';

    case 'red':

      return '#ef4444';

    case 'black':

      return '#000000';

const themeColor = computed(() => convertThemeToColorWhiteDefault(props.theme));

const textColor = computed(() => convertThemeToColorBlackDefault(props.textColor));

const borderColor = computed(() => convertThemeToColorBlackDefault(props.border));

const textSize = computed(() => {

  if (!props?.size) return '16px';

  switch (props.size) {

    case 'small':

      return '12px';

    case 'medium':

      return '16px';

    case 'large':

      return '20px';

    case 'extraLarge':

      return '24px';

  }

  return '#ffffff';

});

const textColor = computed(() => {

  if (!props.theme) return '#000000';

  if (props.theme === 'white') return '#000000';

  return '#ffffff';

const buttonPadding = computed(() => {

  if (!props?.size) return '0.75rem 0.5rem';

  switch (props.size) {

    case 'small':

      return '0.5rem 0.375rem';

    case 'medium':

      return '0.75rem 0.5rem';

    case 'large':

      return '1.2rem 0.8rem';

    case 'extraLarge':

      return '1.8rem 1.2rem';

  }

});

</script>
@@ -75,11 +96,10 @@ const textColor = computed(() => { 
    :class="[

      'button',

      {

        'flex-column': iconPos === 'top' || iconPos === 'bottom',

        'border-black': theme === 'white' || border === 'black',

        'border-white': border === 'white'

        'flex-column': iconPos === 'top' || iconPos === 'bottom'

      }

    ]"

    :style="`padding: ${buttonPadding}; border: 1px solid ${borderColor}`"

  >

    <span :style="`background-color: ${themeColor}`" class="background"></span>

    <span
@@ -93,7 +113,7 @@ const textColor = computed(() => { 
      <slot name="icon" />

    </span>

    <span

      :style="`color: ${textColor}`"

      :style="`color: ${textColor}; font-size: ${textSize}`"

      :class="[

        'text',

        {
@@ -111,6 +131,7 @@ const textColor = computed(() => { 
  position: relative;

  border-radius: 5px;

  display: flex;

  gap: 5px;

  align-items: center;

  user-select: none;

}
@@ -132,18 +153,9 @@ const textColor = computed(() => { 
  align-items: center;

  justify-content: center;

}

.text {

  padding: 0.75rem 0.5rem;

}

.flex-column {

  flex-direction: column;

}

.border-black {

  border: 1px solid black;

}

.border-white {

  border: 1px solid white;

}

.order-2 {

  order: 2;

}

src/shared/ui/Drawer.vue

+2 −38
Original line number Diff line number Diff line 
<script setup lang="ts">

import { useVModel } from '@vueuse/core';

import { computed } from 'vue';

import { convertThemeToColorWhiteDefault } from '@/app/helpers';



interface Props {

  isVisible: boolean;
@@ -23,44 +24,7 @@ interface Props { 
    | 'black';

}

const props = defineProps<Props>();

const themeColor = computed(() => {

  if (!props?.theme) return '#0ea5e9';

  switch (props?.theme) {

    case 'white':

      return '#ffffff';

    case 'slate':

      return '#64748b';

    case 'blue':

      return '#3b82f6';

    case 'sky':

      return '#0ea5e9';

    case 'teal':

      return '#14b8a6';

    case 'lime':

      return '#84cc16';

    case 'green':

      return '#22c55e';

    case 'yellow':

      return '#eab308';

    case 'orange':

      return '#f97316';

    case 'pink':

      return '#ec4899';

    case 'fuchsia':

      return '#d946ef';

    case 'purple':

      return '#a855f7';

    case 'indigo':

      return '#6366f1';

    case 'rose':

      return '#f43f5e';

    case 'red':

      return '#ef4444';

    case 'black':

      return '#000000';

  }

  return '#ffffff';

});

const themeColor = computed(() => convertThemeToColorWhiteDefault(props.theme));

const textColor = computed(() => {

  if (!props.theme) return '#000000';

  if (props.theme === 'white') return '#000000';

src/shared/ui/Modal.vue

+2 −38
Original line number Diff line number Diff line 
<script setup lang="ts">

import { useVModel } from '@vueuse/core';

import { computed } from 'vue';

import { convertThemeToColorWhiteDefault } from '@/app/helpers';



interface Props {

  isVisible: boolean;
@@ -23,44 +24,7 @@ interface Props { 
    | 'black';

}

const props = defineProps<Props>();

const themeColor = computed(() => {

  if (!props?.theme) return '#ffffff';

  switch (props?.theme) {

    case 'white':

      return '#ffffff';

    case 'slate':

      return '#64748b';

    case 'blue':

      return '#3b82f6';

    case 'sky':

      return '#0ea5e9';

    case 'teal':

      return '#14b8a6';

    case 'lime':

      return '#84cc16';

    case 'green':

      return '#22c55e';

    case 'yellow':

      return '#eab308';

    case 'orange':

      return '#f97316';

    case 'pink':

      return '#ec4899';

    case 'fuchsia':

      return '#d946ef';

    case 'purple':

      return '#a855f7';

    case 'indigo':

      return '#6366f1';

    case 'rose':

      return '#f43f5e';

    case 'red':

      return '#ef4444';

    case 'black':

      return '#000000';

  }

  return '#ffffff';

});

const themeColor = computed(() => convertThemeToColorWhiteDefault(props.theme));

const textColor = computed(() => {

  if (!props.theme) return '#000000';

  if (props.theme === 'white') return '#000000';

src/shared/ui/Slider.vue

+67 −3
Original line number Diff line number Diff line
@@ -6,14 +6,21 @@ import { convertThemeToColorBlackDefault, convertThemeToColorWhiteDefault } from 
interface Props {

  value: string | number;

  width?: number;

  min?: number;

  max?: number;

  step?: number;

  size?: 'small' | 'medium' | 'large' | 'extraLarge';

  theme?: string;

  backgroundColor?: string;

  orientation?: 'horizontal' | 'vertical';

  isSmooth?: any;

  options?: {

    label: string;

    value: number;

  }[];

}

const props = defineProps<Props>();

const emit = defineEmits(['update:isActive']);

const emit = defineEmits(['update:value']);

const value = useVModel(props, 'value', emit);

const sliderButtonSize = computed(() => {

  if (!props.size) return '40px';
@@ -36,8 +43,46 @@ const themeBackground = computed(() => convertThemeToColorBlackDefault(props.bac 
</script>



<template>

  <div class="slideContainer" :style="`width: ${width}px`">

    <input v-model="value" type="range" class="slider" />

  <div

    :class="[

      'slideContainer',

      {

        verticalSlider: orientation === 'vertical'

      }

    ]"

    :style="`width: ${width ?? 200}px`"

  >

    <input

      v-model="value"

      type="range"

      class="slider"

      :min="min ?? 0"

      :max="max ?? 100"

      :step="step ?? 1"

    />

    <input type="range" list="values" class="opacity-0 size-0" />



    <div v-if="options?.length">

      <ul

        class="marksList"

        :style="`width: ${width ?? 200}px; margin-bottom: 5px; font-size: 10px`"

      >

        <li v-for="option of options">|</li>

      </ul>

      <datalist

        id="values"

        :class="[

          '',

          {

            datalistVertical: orientation === 'vertical'

          }

        ]"

      >

        <template v-for="option of options" :key="option.value">

          <option :value="option.value" :label="option.label"></option>

        </template>

      </datalist>

    </div>

  </div>

</template>
@@ -80,4 +125,23 @@ const themeBackground = computed(() => convertThemeToColorBlackDefault(props.bac 
  background: v-bind(themeColor);

  cursor: pointer;

}

.verticalSlider {

  transform: rotate(270deg);

}

datalist {

  display: flex;

  justify-content: space-between;

  width: v-bind(width);

}

.datalistVertical {

  flex-direction: column;

  writing-mode: vertical-lr;

}

option {

  padding: 0;

}

.marksList {

  display: flex;

  justify-content: space-between;

}

</style>