From 6480193cd54d993fddf3ad571ea2933136c1ff80 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: Mon, 3 Feb 2025 14:26:23 +0500
Subject: [PATCH] feat: init 'Cropper'
---
src/common/interfaces/componentsProps.ts | 4 ++
.../ColorPicker/ColorPicker.stories.ts | 2 +-
src/components/Cropper/Cropper.stories.ts | 43 +++++++++++++++++++
src/components/Cropper/Cropper.vue | 17 ++++++++
4 files changed, 65 insertions(+), 1 deletion(-)
create mode 100644 src/components/Cropper/Cropper.stories.ts
create mode 100644 src/components/Cropper/Cropper.vue
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 13d4a5e..ebbe3ed 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -182,6 +182,10 @@ export interface IPopupProps {
left?: number;
}
+export interface ICropperProps {
+ size?: TSize;
+}
+
export interface IColorPickerProps {
size?: TSize;
disabled?: boolean;
diff --git a/src/components/ColorPicker/ColorPicker.stories.ts b/src/components/ColorPicker/ColorPicker.stories.ts
index cf71cf7..2abc156 100644
--- a/src/components/ColorPicker/ColorPicker.stories.ts
+++ b/src/components/ColorPicker/ColorPicker.stories.ts
@@ -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.',
},
},
},
diff --git a/src/components/Cropper/Cropper.stories.ts b/src/components/Cropper/Cropper.stories.ts
new file mode 100644
index 0000000..2cc8135
--- /dev/null
+++ b/src/components/Cropper/Cropper.stories.ts
@@ -0,0 +1,43 @@
+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,
+ },
+};
diff --git a/src/components/Cropper/Cropper.vue b/src/components/Cropper/Cropper.vue
new file mode 100644
index 0000000..07f9948
--- /dev/null
+++ b/src/components/Cropper/Cropper.vue
@@ -0,0 +1,17 @@
+<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>
--
GitLab