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

refactor: edit darkness logic, create functions for colors and edit README with .prettierrc.json

parent f00357ef

.prettierrc.json

+1 −1
Original line number Diff line number Diff line
@@ -3,5 +3,5 @@ 
  "$schema": "https://json.schemastore.org/prettierrc",

  "semi": true,

  "singleQuote": true,

  "printWidth": 100

  "printWidth": 120

}

README.md

+2 −2
Original line number Diff line number Diff line
@@ -29,8 +29,8 @@ const props = withDefaults(defineProps<IProps>(), { 
});    

const emit = defineEmits(['']);  

const visible = defineModel('');  

watch(, () => {});  

const computed = computed(() => );  

// watch(, () => {});

// const computed1 = computed(() => );

```

- I*Componentname*Props вместо ```IProps```;

- watchers после defineModel;

src/App.vue

+34 −37
Original line number Diff line number Diff line
@@ -302,30 +302,30 @@ 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

    >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

  >



  <Modal v-model:visible="visible" theme="red" @onClose="onClose"

    ><template #header>huuuuuuuuuuui</template>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? 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

    ><template #header>huuuuuuuuuuui</template>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? 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

  >

  <MenuDial

    v-model:active="active"

    theme="sky"

    direction="right"

    darknessTheme="600"

    :items="[

      {

        label: 'font-family',

        theme: 'green',

        color: 'white',

        link: 'https://developer.mozilla.org/en-US/docs/Web/CSS/font-family',

        linkBlank: true,

        textStyle: 'bold',
@@ -333,6 +333,7 @@ const sliderValue = ref(1); 
      {

        label: 'Second',

        theme: 'red',

        darknessTheme: '600',

        textStyle: 'italic',

      },

    ]"
@@ -359,7 +360,9 @@ const sliderValue = ref(1); 
    theme="blue"

    isSmooth

  />

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

  <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 />
@@ -369,31 +372,25 @@ const sliderValue = ref(1); 
  <Drawer v-model:visible="visibleDrawer" theme="sky" closeIcon="CropIcon">

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

    <p>

      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. 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?

      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. 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?

    </p>

    <template #footer>

      pizdwertyukilokl,kmjhgfw ewesrdtyukilo,kmjng eartyukikdhgfgjhklj.,kga</template

    ></Drawer

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

  >

  <main class="main">

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

src/common/helpers/colors.ts

+8 −8
Original line number Diff line number Diff line
@@ -2,15 +2,15 @@ import type { TDarkness, TThemeColor } from '@interfaces/common'; 


export const convertWhiteOrBlackToColor = (theme: 'white' | 'black', darkness: TDarkness) => {

  if (theme === 'white') {

    if (darkness === 500 || darkness === 400 || darkness === 600) return '#cbd5e1';

    if (darkness === 300 || darkness === 700) return '#94a3b8';

    if (darkness === 200 || darkness === 800) return '#f1f5f9';

    if (darkness === 100 || darkness === 900) return '#e2e8f0';

    if (darkness === '500' || darkness === '400' || darkness === '600') return '#cbd5e1';

    if (darkness === '300' || darkness === '700') return '#94a3b8';

    if (darkness === '200' || darkness === '800') return '#f1f5f9';

    if (darkness === '100' || darkness === '900') return '#e2e8f0';

  }

  if (darkness === 500 || darkness === 400 || darkness === 600) return '#475569';

  if (darkness === 300 || darkness === 700) return '#64748b';

  if (darkness === 200 || darkness === 800) return '#94a3b8';

  if (darkness === 100 || darkness === 900) return '#cbd5e1';

  if (darkness === '500' || darkness === '400' || darkness === '600') return '#475569';

  if (darkness === '300' || darkness === '700') return '#64748b';

  if (darkness === '200' || darkness === '800') return '#94a3b8';

  if (darkness === '100' || darkness === '900') return '#cbd5e1';

};



export const convert100ThemeToColor = (theme: TThemeColor) => {

src/common/helpers/common.ts

+27 −13
Original line number Diff line number Diff line
@@ -9,20 +9,34 @@ import { 
  convert700ThemeToColor,

  convert800ThemeToColor,

  convert900ThemeToColor,

  convertWhiteOrBlackToColor,

} from '@helpers/colors';



export const convertThemeToColor = (

  theme: TThemeColor,

  darkness: TDarkness | number = 500,

): string => {

  if (darkness === 500) return convert500ThemeToColor(theme);

  if (darkness === 100) return convert100ThemeToColor(theme);

  if (darkness === 200) return convert200ThemeToColor(theme);

  if (darkness === 300) return convert300ThemeToColor(theme);

  if (darkness === 400) return convert400ThemeToColor(theme);

  if (darkness === 600) return convert600ThemeToColor(theme);

  if (darkness === 700) return convert700ThemeToColor(theme);

  if (darkness === 800) return convert800ThemeToColor(theme);

  if (darkness === 900) return convert900ThemeToColor(theme);

/**

 * Convert color of type TThemeColor to hex

 */

export const convertThemeToColor = (theme: TThemeColor, darkness: TDarkness | string = '500'): string => {

  if (darkness === '500') return convert500ThemeToColor(theme);

  if (darkness === '100') return convert100ThemeToColor(theme);

  if (darkness === '200') return convert200ThemeToColor(theme);

  if (darkness === '300') return convert300ThemeToColor(theme);

  if (darkness === '400') return convert400ThemeToColor(theme);

  if (darkness === '600') return convert600ThemeToColor(theme);

  if (darkness === '700') return convert700ThemeToColor(theme);

  if (darkness === '800') return convert800ThemeToColor(theme);

  if (darkness === '900') return convert900ThemeToColor(theme);

  return convert500ThemeToColor(theme);

};

/**

 * Convert color of type TThemeColor to hex for border or scroll

 */

export const convertThemeToSecondaryColor = (theme: TThemeColor, darkness: TDarkness | string = '500') => {

  return theme === 'white' || theme === 'black'

    ? convertWhiteOrBlackToColor(theme, darkness)

    : convertThemeToColor(theme, String(100 + ((darkness + 600) % 900)));

};



export const convertThemeToTextColor = (theme: TThemeColor, darkness: TDarkness | string = '500') => {

  if (theme === 'white' || (darkness <= '600' && theme !== 'black')) return '#000000';

  return '#ffffff';

};