feat: init 'Cropper' (6480193c) · Commits · Дмитрий Малюгин / UI_storybook

src/common/interfaces/componentsProps.ts

+4 −0

Original line number	Diff line number	Diff line
		@@ -182,6 +182,10 @@ export interface IPopupProps {
		left?: number;
		}

		export interface ICropperProps {
		size?: TSize;
		}

		export interface IColorPickerProps {
		size?: TSize;
		disabled?: boolean;

+1 −1

Original line number	Diff line number	Diff line
		@@ -9,7 +9,7 @@ const meta: Meta = {
		parameters: {
		docs: {
		description: {
		component: 'A component to define number inputs with a dial.',
		component: 'A component to pick color. Can be with button.',
		},
		},
		},

0 → 100644

+43 −0

Original line number	Diff line number	Diff line
		import type { Meta, StoryObj } from '@storybook/vue3';

		import Cropper from './Cropper.vue';

		const meta: Meta = {
		title: 'Components/Cropper',
		component: Cropper,
		tags: ['pick'],
		parameters: {
		docs: {
		description: {
		component: 'A component to pick color. Can be with button.',
		},
		},
		},
		argTypes: {
		buttonProps: { control: 'object' },
		sameButtonColor: { control: 'boolean' },
		disabled: { control: 'boolean' },
		size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
		},
		} satisfies Meta<typeof Cropper>;

		export default meta;

		type Story = StoryObj<typeof meta>;

		export const Simple: Story = {
		args: {},
		};

		export const Full: Story = {
		args: {
		buttonProps: {
		label: 'Pick color!',
		theme: 'red',
		textStyle: 'bold',
		},

		size: 'large',
		sameButtonColor: true,
		},
		};

0 → 100644

+17 −0

Original line number	Diff line number	Diff line
		<script setup lang="ts">
		import type { ICropperProps } from '@interfaces/componentsProps';

		const props = withDefaults(defineProps<ICropperProps>(), {
		size: 'normal',
		disabled: false,
		});
		</script>

		<template>
		<section class="container"></section>
		</template>

		<style scoped>
		.container {
		}
		</style>