- ShelfNote
-
+
diff --git a/src/components/sheets/entities/settings/common/EntitySettingsModalHeader.vue b/src/components/sheets/entities/settings/common/EntitySettingsModalHeader.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9cb720a102761d151a53f85b9f503f2ddfbc30cf
--- /dev/null
+++ b/src/components/sheets/entities/settings/common/EntitySettingsModalHeader.vue
@@ -0,0 +1,90 @@
+
+
+
+
- {
- Edit paragraph
-Are you sure you want to delete this element?
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/sheets/entities/settings/entityBlock/ImageSettingsEntityBlock.vue b/src/components/sheets/entities/settings/entityBlock/ImageSettingsEntityBlock.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d116f439cf585ff1550b536db3e4c4f92514ac64
--- /dev/null
+++ b/src/components/sheets/entities/settings/entityBlock/ImageSettingsEntityBlock.vue
@@ -0,0 +1,92 @@
+
+
+
+
+
+ + {{ newEntityData.title ?? 'Title' }} +
+
+
+
+ ![]()
+
+
+ {{ newEntityData.text ?? 'Text' }}
+
+
@@ -83,7 +82,6 @@ watch(
:options="entityTitlePositionOptions"
rounded="true"
:border="themeColor"
- :activeBGColor="themeColor"
>
@@ -120,7 +117,6 @@ watch(
:options="entityIsTextOptions"
rounded="true"
:border="themeColor"
- :activeBGColor="themeColor"
/>
@@ -136,7 +132,6 @@ watch(
:options="entityPositionOptions"
rounded="true"
:border="themeColor"
- :activeBGColor="themeColor"
>
-
+
+ ();
-const emit = defineEmits(['uploadFile', 'setDefaultBackground']);
+defineEmits(['uploadFile', 'setDefaultBackground']);
@@ -11,7 +11,7 @@ const emit = defineEmits(['uploadFile', 'setDefaultBackground']);
-
diff --git a/src/modules/entities/EntityItem.vue b/src/modules/sheets/entities/EntityItem.vue
similarity index 88%
rename from src/modules/entities/EntityItem.vue
rename to src/modules/sheets/entities/EntityItem.vue
index c5112fa24f6f0facc2d3a6815c1f516312a2081a..7b5eebc3e2b1a6f948b12cc2c81beb672b73206e 100644
--- a/src/modules/entities/EntityItem.vue
+++ b/src/modules/sheets/entities/EntityItem.vue
@@ -7,23 +7,23 @@ interface Props {
isEditMode: boolean;
}
const props = defineProps();
-const emit = defineEmits(['update:entityData']);
+const emit = defineEmits(['update:entity']);
const entity = useVModel(props, 'entity', emit);
();
const themeColor = computed(() => convertThemeToColorWhiteDefault(props.theme));
@@ -32,6 +19,18 @@ const textColor = computed(() => {
});
const emit = defineEmits(['update:isVisible']);
const isVisible = useVModel(props, 'isVisible', emit);
+const onKeydown = (event) => {
+ if (event.key === 'Escape' && isVisible.value) isVisible.value = false;
+};
+document.addEventListener('keydown', onKeydown);
+const unwatch = watch(isVisible, () => {
+ if (!isVisible.value) {
+ props.onClose();
+ }
+});
+if (!props.onClose) {
+ unwatch();
+}
diff --git a/src/shared/ui/Slider.vue b/src/shared/ui/Slider.vue
index 3e992b961e39379ceaefd6b5fdb565b5c71d7815..6219be056d78278f563d22d5a028900d5c372b8f 100644
--- a/src/shared/ui/Slider.vue
+++ b/src/shared/ui/Slider.vue
@@ -1,7 +1,7 @@
+
+
+
+
+
+
diff --git a/src/shared/ui/interfaces/index.ts b/src/shared/ui/interfaces/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8cbf8a92e7df793f5f5fb50bfe0c9262701b0a8a
--- /dev/null
+++ b/src/shared/ui/interfaces/index.ts
@@ -0,0 +1,16 @@
+export type TThemeColor =
+ | 'white'
+ | 'slate'
+ | 'blue'
+ | 'sky'
+ | 'teal'
+ | 'green'
+ | 'yellow'
+ | 'orange'
+ | 'pink'
+ | 'fuchsia'
+ | 'purple'
+ | 'indigo'
+ | 'rose'
+ | 'red'
+ | 'black';
+
- Change image
+
- Upload image
+
-
+
diff --git a/src/modules/entities/EntitiesList.vue b/src/modules/sheets/entities/EntitiesList.vue
similarity index 59%
rename from src/modules/entities/EntitiesList.vue
rename to src/modules/sheets/entities/EntitiesList.vue
index ff7d82c630ad0bffed048948161fe8f7233e3ce2..132397195e76f18ba67532ffb652cb49c9bede33 100644
--- a/src/modules/entities/EntitiesList.vue
+++ b/src/modules/sheets/entities/EntitiesList.vue
@@ -1,16 +1,13 @@
@@ -22,7 +19,7 @@ const createEntity = (entity: IEntity) => {
/>
-
import type { IDivider } from '@/app/interfaces/entities';
-import { editEntity } from '@/app/helpers';
+import { editEntity } from '@/app/helpers/entities';
import { useDataStore } from '@/app/stores/data';
import type { IEntity } from '@/app/interfaces/environment';
diff --git a/src/modules/entities/ImageItem.vue b/src/modules/sheets/entities/items/ImageEntity.vue
similarity index 55%
rename from src/modules/entities/ImageItem.vue
rename to src/modules/sheets/entities/items/ImageEntity.vue
index b98375bee9c86ab2a57d8eb4de8789083fcc91c9..ebae02c0db4a19ad8e07d97085dc39ac7956504c 100644
--- a/src/modules/entities/ImageItem.vue
+++ b/src/modules/sheets/entities/items/ImageEntity.vue
@@ -1,7 +1,7 @@
-
-
- {
:entityIndex="entityIndex"
:entitiesLength="entitiesLength"
/>
-
-
+
+
diff --git a/src/shared/icons/CloseCircle.vue b/src/shared/icons/CloseCircleIcon.vue
similarity index 100%
rename from src/shared/icons/CloseCircle.vue
rename to src/shared/icons/CloseCircleIcon.vue
diff --git a/src/shared/icons/ImageEditIcon.vue b/src/shared/icons/ImageEditIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..21137ce8d7706a21e62fe64a74291aa70bd53c6c
--- /dev/null
+++ b/src/shared/icons/ImageEditIcon.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
diff --git a/src/shared/icons/UploadIcon.vue b/src/shared/icons/UploadIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..09cfc40f9cc768e7d07de3427feedcd8d226a432
--- /dev/null
+++ b/src/shared/icons/UploadIcon.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
diff --git a/src/shared/ui/Button.vue b/src/shared/ui/Button.vue
index 54968a63aa8e95560b4d586deb7d1a11d4c2158d..0a67b8a1852531e186b5cbc6d6da2209e7bf0382 100644
--- a/src/shared/ui/Button.vue
+++ b/src/shared/ui/Button.vue
@@ -1,60 +1,16 @@
@@ -97,7 +86,7 @@ const isVisible = useVModel(props, 'isVisible', emit);
top: 0;
left: 0;
z-index: 31;
- width: 350px;
+ width: v-bind(drawerWidth);
height: 100vh;
padding: 20px;
transform: translateX(-100%);
diff --git a/src/shared/ui/MenuDial.vue b/src/shared/ui/MenuDial.vue
index 45ecc4d49944c4e9431b9600a912093ddba3f27b..381c4fa4386f9fd815aed750687c7a32b0af4a18 100644
--- a/src/shared/ui/MenuDial.vue
+++ b/src/shared/ui/MenuDial.vue
@@ -2,7 +2,7 @@
import { useVModel } from '@vueuse/core';
import PlusIcon from '@/shared/icons/PlusIcon.vue';
import { computed } from 'vue';
-import { convertThemeToColorWhiteDefault } from '@/app/helpers';
+import { convertThemeToColorWhiteDefault } from './helpers/index';
interface Props {
isActive: boolean;
diff --git a/src/shared/ui/Modal.vue b/src/shared/ui/Modal.vue
index 0b58d426eb83cd16f5ab1bd0e9386464aeddcdd3..96324da1404be36101102755f8aabf5cb340c5e3 100644
--- a/src/shared/ui/Modal.vue
+++ b/src/shared/ui/Modal.vue
@@ -2,26 +2,13 @@
import { useVModel } from '@vueuse/core';
import { computed } from 'vue';
import { convertThemeToColorWhiteDefault } from '@/app/helpers';
+import type { TThemeColor } from './interfaces/index';
interface Props {
isVisible: boolean;
- theme?:
- | 'white'
- | 'slate'
- | 'blue'
- | 'sky'
- | 'teal'
- | 'green'
- | 'yellow'
- | 'orange'
- | 'pink'
- | 'fuchsia'
- | 'purple'
- | 'indigo'
- | 'rose'
- | 'red'
- | 'black';
+ theme?: TThemeColor;
width?: number | string;
+ onClose?: () => any;
}
const props = defineProps
-
+
- ![]()
-
-
-
-
-