From 0adb2ed10f326e6d7e04632dcbd0300a564af5cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
=?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Tue, 14 Jan 2025 17:58:57 +0500
Subject: [PATCH] feat: init 'Knob'
---
src/common/interfaces/componentsProps.ts | 13 ++
src/stories/components/Knob/Knob.stories.ts | 130 ++++++++++++++++++++
src/stories/components/Knob/Knob.vue | 15 +++
3 files changed, 158 insertions(+)
create mode 100644 src/stories/components/Knob/Knob.stories.ts
create mode 100644 src/stories/components/Knob/Knob.vue
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 7837ad2..ef09ded 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -68,6 +68,19 @@ export interface IMDProps {
// direction?: TDirection | 'circle';
}
+export interface IKnobProps {
+ min?: string | number;
+ max?: string | number;
+ step?: string | number;
+ size?: TSize;
+ theme?: TThemeColor;
+ negativeTheme?: TThemeColor;
+ darknessTheme?: TDarkness;
+ darknessNegativeTheme?: TDarkness;
+ buttons?: boolean;
+ showLabel?: boolean;
+}
+
export interface ISliderProps {
width?: string | number;
min?: string | number;
diff --git a/src/stories/components/Knob/Knob.stories.ts b/src/stories/components/Knob/Knob.stories.ts
new file mode 100644
index 0000000..ea90618
--- /dev/null
+++ b/src/stories/components/Knob/Knob.stories.ts
@@ -0,0 +1,130 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Knob from './Knob.vue';
+
+const meta: Meta = {
+ title: 'Components/Knob',
+ component: Knob,
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: 'A component that is used as a Knob. Can be used with icon.',
+ },
+ },
+ },
+ argTypes: {
+ buttons: { control: 'boolean' },
+ showLabel: { control: 'boolean' },
+ min: { control: 'text' },
+ max: { control: 'text' },
+ step: { control: 'text' },
+ size: { control: 'Knob', options: ['small', 'normal', 'large', 'huge'] },
+ darknessTheme: { control: 'Knob', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
+ darknessNegativeTheme: {
+ control: 'Knob',
+ options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+ },
+ theme: {
+ control: 'Knob',
+ options: [
+ 'white',
+ 'blue',
+ 'sky',
+ 'cyan',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ negativeTheme: {
+ control: 'Knob',
+ options: [
+ 'white',
+ 'blue',
+ 'sky',
+ 'cyan',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ },
+} satisfies Meta<typeof Knob>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {
+ args: {
+ options: [
+ {
+ value: 'First',
+ },
+ {
+ value: 'Second',
+ },
+ {
+ value: 'Third',
+ },
+ ],
+ },
+};
+
+export const Full: Story = {
+ args: {
+ options: [
+ {
+ value: 'First',
+ iconLeft: 'At',
+ color: 'purple',
+ darknessColor: '800',
+ group: 'Group',
+ },
+ {
+ value: 'Second',
+ iconRightColor: 'red',
+ iconRight: 'Age18',
+ group: 'Group',
+ },
+ {
+ iconLeft: 'Calendar',
+ value: 'Third',
+ iconRight: 'CheckMark',
+ group: 'Group 2',
+ },
+ {
+ value: 'Sssss',
+ },
+ ],
+ groups: [
+ { name: 'Group', background: 'white', iconLeft: 'Archive' },
+ { name: 'Group 2', background: 'red', iconLeft: 'Badge' },
+ ],
+ placeholder: 'Knob a city',
+ size: 'normal',
+ width: '250px',
+ theme: 'sky',
+ background: 'sky',
+ darknessTheme: '700',
+ darknessBackground: '200',
+ openIconColor: 'sky',
+ },
+};
diff --git a/src/stories/components/Knob/Knob.vue b/src/stories/components/Knob/Knob.vue
new file mode 100644
index 0000000..73dc2bd
--- /dev/null
+++ b/src/stories/components/Knob/Knob.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { IKnobProps } from '@interfaces/componentsProps';
+
+const props = withDefaults(defineProps<IKnobProps>(), {});
+const value = defineModel('value');
+</script>
+
+<template>
+ <section class="container"></section>
+</template>
+
+<style scoped>
+.container {
+}
+</style>
--
GitLab