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

feat: component 'Knob'

parent a6b4e0e0

src/Playground.vue

+3 −0
Original line number Diff line number Diff line
@@ -17,6 +17,7 @@ import Checkbox from '@stories/components/Checkbox/Checkbox.vue'; 
import Tag from '@stories/components/Tag/Tag.vue';

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

import AtIcon from '@stories/icons/Mono/AtIcon.vue';

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



const visibleDrawer = ref(false);

const sliderOptions: ISliderOptions[] = [
@@ -191,10 +192,12 @@ const selectOptions = [ 
    value: 'Second',

  },

];

const knob = ref();

</script>



<template>

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

  <Knob v-model:value="knob" />

  <Select :options="selectOptions" theme="sky">

    <template #icon-left-First>

      <AtIcon color="#3aa" size="20" />

src/common/helpers/common.ts

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

import { EThemeColor, type TDarkness, type TThemeColor } from '@interfaces/common';

import {

  convert100ThemeToColor,

  convert200ThemeToColor,
@@ -15,6 +15,7 @@ import { 
 * Convert color of type TThemeColor to hex

 */

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

  if (!(theme in EThemeColor)) return theme;

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

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

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

src/common/interfaces/common.ts

+20 −0
Original line number Diff line number Diff line
@@ -21,6 +21,26 @@ export type TThemeColor = 
  | 'red'

  | 'black';



export enum EThemeColor {

  'white',

  'blue',

  'sky',

  'cyan',

  'teal',

  'lime',

  'green',

  'yellow',

  'amber',

  'orange',

  'pink',

  'fuchsia',

  'purple',

  'indigo',

  'rose',

  'red',

  'black',

}



export type TDarkness = '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';



export type TThemeColorNoWhite = Exclude<TThemeColor, 'white'>;

src/common/interfaces/componentsProp.ts

+7 −0
Original line number Diff line number Diff line
@@ -55,6 +55,13 @@ export interface IMDItemProps { 
  onClick?: () => void;

}



export interface IKnobColorGap {

  start: number;

  end: number;

  color: TThemeColor;

  darknessColor?: TDarkness;

}



export interface ISelectOption {

  value: string;

  label?: string;

src/common/interfaces/componentsProps.ts

+14 −3
Original line number Diff line number Diff line
@@ -11,6 +11,7 @@ import type { 
  TThemeColorNoWhite,

} from '@interfaces/common';

import type {

  IKnobColorGap,

  IMDItemProps,

  ISBOption,

  ISelectGroup,
@@ -69,16 +70,25 @@ export interface IMDProps { 
}



export interface IKnobProps {

  min?: string | number;

  max?: string | number;

  step?: string | number;

  min?: number;

  max?: number;

  step?: number;

  size?: TSize;

  theme?: TThemeColor;

  colorGaps?: IKnobColorGap[];

  negativeTheme?: TThemeColor;

  color?: TThemeColor;

  background?: string;

  darknessTheme?: TDarkness;

  darknessNegativeTheme?: TDarkness;

  darknessColor?: TDarkness;

  buttons?: boolean;

  showLabel?: boolean;

  colorAsTheme?: boolean;

  fontSize?: string;

  textBold?: boolean;

  textBefore?: string;

  textAfter?: string;

}



export interface ISliderProps {
@@ -175,6 +185,7 @@ export interface IButtonProps { 
  textStyle?: TTextStyle;

  iconPos?: TPosition;

  width?: string | number;

  padding?: string;

  iconOnly?: boolean;

  theme?: TThemeColor;

  textColor?: TThemeColor;