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

fix: darkness logic and type errors

parent 234f5762

src/App.vue

+117 −115
Original line number Diff line number Diff line
@@ -113,7 +113,7 @@ import Modal from '@stories/components/Modal/Modal.vue'; 
import MenuDial from '@stories/components/MenuDial/MenuDial.vue';

import Popup from '@stories/components/Popup/Popup.vue';



const gentleIcons = [

const gentleIcons = {

  Age18Icon,

  AirplaneIcon,

  AlarmIcon,
@@ -217,8 +217,8 @@ const gentleIcons = [ 
  TrashIcon,

  TriangleIcon,

  UserIcon,

];

const visibleDrawer = ref(true);

};

const visibleDrawer = ref(false);

const sliderOptions: ISliderOptions[] = [

  {

    label: 0,
@@ -289,6 +289,16 @@ const sliderValue = ref(1); 
</script>



<template>

  <main class="main">

    <h2 class="title"><span class="mono">Mono</span> icons</h2>

    <ul class="iconsList">

      <li class="iconsItem" v-for="icon of Object.entries(gentleIcons)" :key="icon[0]">

        <component :is="icon[1]" class="icon" />

        <span class="iconName">{{ icon[0].slice(0, -4) }}</span>

      </li>

    </ul>

    <h2 class="title gradient-text">Playground</h2>

    <button class="testButton" @click="visibleDrawer = !visibleDrawer">Нажми меня</button>

    <div class="hui" style="width: 500px; height: 500px; background-color: gray"></div>

    <Popup v-model:active="popupActive" parentSelector=".hui" theme="sky">

      <Button
@@ -303,9 +313,10 @@ const sliderValue = ref(1); 
    </Popup>

    <Popup v-model:active="popupActive2" theme="sky"

      >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fugiat harum maiores placeat soluta, vel velit

    voluptas. Accusamus aut, error et minima neque praesentium, ratione, reprehenderit repudiandae saepe ut vero! Lorem

    ipsum dolor sit amet, consectetur adipisicing elit. Amet fugiat harum maiores placeat soluta, vel velit voluptas.

    Accusamus aut, error et minima neque praesentium, ratione, reprehenderit repudiandae saepe ut vero!</Popup

      voluptas. Accusamus aut, error et minima neque praesentium, ratione, reprehenderit repudiandae saepe ut vero!

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet fugiat harum maiores placeat soluta, vel velit

      voluptas. Accusamus aut, error et minima neque praesentium, ratione, reprehenderit repudiandae saepe ut

      vero!</Popup

    >



    <Modal v-model:visible="visible" theme="red" @onClose="onClose"
@@ -313,8 +324,8 @@ const sliderValue = ref(1); 
      explicabo, facere fuga hic id impedit magnam maiores minima necessitatibus, nemo nesciunt nihil officia, pariatu

      nemo nesciunt nihil officia, pariatur praesentium quas quisquam repellat saepe temporibus? Lorem ipsum dolor sit

      amet, consectetur adipisicing elit. Eaque explicabo, facere fuga hic id impedit magnam maiores minima

    necessitatibus, nemo nesciunt nihil officia, pariatu nemo nesciunt nihil officia, pariatur praesentium quas quisquam

    repellat saepe temporibus?</Modal

      necessitatibus, nemo nesciunt nihil officia, pariatu nemo nesciunt nihil officia, pariatur praesentium quas

      quisquam repellat saepe temporibus?</Modal

    >

    <MenuDial

      v-model:active="active"
@@ -354,7 +365,6 @@ const sliderValue = ref(1); 
    <Slider

      v-model:value="sliderValue"

      :options="sliderOptions"

    orientation="vertical"

      width="400"

      min="0"

      max="18"
@@ -364,15 +374,13 @@ const sliderValue = ref(1); 
      isSmooth

    />

    <Button @click="visible = true" textColor="white" theme="sky" label="I'm a button"></Button>

  <Button @click="visible = true" theme="sky" darknessTheme="600" label="I'm a button"></Button>

  <Button @click="visible = true" theme="sky" darknessTheme="700" label="I'm a button"></Button>

    <SelectButton :options="options" size="large" v-model:value="value">

      <template #1Icon>

        <TrashIcon />

      </template>

    </SelectButton>

    <ToggleSwitch />

  <Drawer v-model:visible="visibleDrawer" theme="sky" closeIcon="CropIcon">

    <Drawer v-model:visible="visibleDrawer" theme="sky" :dismissible="false" closeIcon="CropIcon">

      <template #header>Это - Drawer</template>

      <p>

        pizdwertyuki lokl,kmjhgfwewesrdty ukilo,kmjngeartyukikdhgfgjhklj.,kga Lorem ipsum dolor sit amet, consectetur
@@ -381,29 +389,20 @@ const sliderValue = ref(1); 
        consectetur adipisicing elit. Atque blanditiis consectetur cum delectus ducimus eius est hic incidunt iusto

        molestiae odio optio reiciendis reprehenderit saepe tempora vel, veniam veritatis voluptates. Lorem ipsum dolor

        sit amet, consectetur adipisicing elit. Ducimus expedita laboriosam nesciunt voluptatum! Ab animi illum impedit

      iusto libero magni maxime molestias nisi nobis possimus provident quia repellat, rerum suscipit. Lorem ipsum dolor

      sit amet, consectetur adipisicing elit. Autem modi ratione reiciendis. Cupiditate deserunt eaque eum labore qui

      rem? Consequatur corporis, dolorem doloremque eveniet facilis obcaecati quasi repellat vel velit. pizdwertyuki

      lokl,kmjhgfwewesrdty ukilo,kmjngeartyukikdhgfgjhklj.,kga Lorem ipsum dolor sit amet, consectetur adipisicing elit.

      Amet deleniti, esse in ipsam quis sapiente tempore voluptas. Aperiam dignissimos enim, fuga fugit, modi, nam

      necessitatibus numquam obcaecati omnis recusandae voluptatibus! Lorem ipsum dolor sit amet, consectetur

      adipisicing elit. Atque blanditiis consectetur cum delectus ducimus eius est hic incidunt iusto molestiae odio

      optio reiciendis reprehenderit saepe tempora vel, veniam veritatis voluptates. Lorem ipsum dolor sit amet,

      consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque explicabo, facere

      fuga hic id impedit magnam maiores minima necessitatibus, nemo nesciunt nihil officia, pariatu nemo nesciunt nihil

      officia, pariatur praesentium quas quisquam repellat saepe temporibus?

        iusto libero magni maxime molestias nisi nobis possimus provident quia repellat, rerum suscipit. Lorem ipsum

        dolor sit amet, consectetur adipisicing elit. Autem modi ratione reiciendis. Cupiditate deserunt eaque eum

        labore qui rem? Consequatur corporis, dolorem doloremque eveniet facilis obcaecati quasi repellat vel velit.

        pizdwertyuki lokl,kmjhgfwewesrdty ukilo,kmjngeartyukikdhgfgjhklj.,kga Lorem ipsum dolor sit amet, consectetur

        adipisicing elit. Amet deleniti, esse in ipsam quis sapiente tempore voluptas. Aperiam dignissimos enim, fuga

        fugit, modi, nam necessitatibus numquam obcaecati omnis recusandae voluptatibus! Lorem ipsum dolor sit amet,

        consectetur adipisicing elit. Atque blanditiis consectetur cum delectus ducimus eius est hic incidunt iusto

        molestiae odio optio reiciendis reprehenderit saepe tempora vel, veniam veritatis voluptates. Lorem ipsum dolor

        sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque

        explicabo, facere fuga hic id impedit magnam maiores minima necessitatibus, nemo nesciunt nihil officia, pariatu

        nemo nesciunt nihil officia, pariatur praesentium quas quisquam repellat saepe temporibus?

      </p>

      <template #footer> pizdwertyukilokl,kmjhgfw ewesrdtyukilo,kmjng eartyukikdhgfgjhklj.,kga</template></Drawer

    >

  <main class="main">

    <h2 class="title"><span class="mono">Mono</span> icons</h2>

    <ul class="iconsList">

      <li class="iconsItem" v-for="icon of gentleIcons" :key="icon.__name">

        <component :is="icon" class="icon" />

        <span class="iconName">{{ icon.__name!.slice(0, -4) }}</span>

      </li>

    </ul>

    <button class="testButton" @click="visibleDrawer = !visibleDrawer">Нажми меня</button>

  </main>

</template>
@@ -441,12 +440,15 @@ const sliderValue = ref(1); 
  font-style: italic;

}

.testButton {

  position: absolute;

  right: 50px;

  top: 50px;

  background-color: red;

  margin-bottom: 30px;

  color: white;

  padding: 10px;

  border-radius: 5px;

}

.gradient-text {

  background: linear-gradient(to right, hotpink, yellow, dodgerblue);

  background-clip: text;

  color: transparent;

}

</style>

src/common/interfaces/common.ts

+4 −0
Original line number Diff line number Diff line
@@ -36,3 +36,7 @@ export type TPosition = 'top' | 'right' | 'bottom' | 'left'; 
export type TExpandedPosition = TPosition | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';



export type TBorder = 'solid' | 'dashed' | 'dotted';



export interface CustomWindow extends Window {

  blockPopupActions?: boolean;

}

src/common/interfaces/componentsProps.ts

+4 −0
Original line number Diff line number Diff line
@@ -36,6 +36,8 @@ export interface ITLProps { 
  maxWidth?: number;

  expand?: boolean;

  theme?: TThemeColor;

  textColor?: TThemeColor;

  darknessTextColor?: TDarkness;

  darknessTheme?: TDarkness;

}
@@ -91,7 +93,9 @@ export interface IDrawerProps { 


export interface IModalProps {

  theme?: TThemeColor;

  textColor?: TThemeColor;

  darknessTheme?: TDarkness;

  darknessTextColor?: TDarkness;

  width?: string;

  height?: string;

  position?: TExpandedPosition;

src/stories/components/Button/Button.stories.ts

+0 −20
Original line number Diff line number Diff line
@@ -64,26 +64,6 @@ const meta: Meta = { 
        'black',

      ],

    },

    border: {

      control: 'select',

      options: [

        'white',

        'blue',

        'sky',

        'cyan',

        'teal',

        'green',

        'yellow',

        'orange',

        'pink',

        'fuchsia',

        'purple',

        'indigo',

        'rose',

        'red',

        'black',

      ],

    },

  },

  args: {},

} satisfies Meta<typeof Button>;

src/stories/components/Drawer/Drawer.vue

+8 −4
Original line number Diff line number Diff line 
<script setup lang="ts">

import { computed, watch } from 'vue';

import { computed, type Ref, watch } from 'vue';

import { iconsSet } from '@/common/constants/icons';

import type { IDrawerProps } from '@interfaces/componentsProps';

import { convertThemeToColor, convertThemeToSecondaryColor, convertThemeToTextColor } from '@helpers/common';

import type { CustomWindow } from '@interfaces/common';



const props = withDefaults(defineProps<IDrawerProps>(), {

  visible: false,

  position: 'left',

  width: 400,

  modal: true,
@@ -21,15 +21,19 @@ const emit = defineEmits(['onClose']); 
const visible = defineModel<boolean>('visible', {

  set(value) {

    if (!value) {

      (window as CustomWindow).blockPopupActions = false;

      body.style.overflow = 'auto';

      body.style.paddingRight = '0';

      emit('onClose');

    }

    return value;

  },

});

}) as Ref<boolean>;

watch(visible, () => {

  if (visible.value) {

    (window as CustomWindow).blockPopupActions = true;

    body.style.overflow = 'hidden';

    body.style.paddingRight = '14px';

  }

});

const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
@@ -54,7 +58,7 @@ const drawerWidth = computed(() => { 
          drawerBackgroundOpened: visible,

        },

      ]"

      @pointerdown.stop="dismissible ? (visible = false) : ''"

      @pointerdown="() => (dismissible ? (visible = false) : '')"

    ></section>

    <section

      :style="`color: ${color}; background-color: ${themeColor}`"