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

change EditTextEntityMenu

parent db2d477f

src/components/EditTextEntityMenu.vue

0 → 100644
+182 −0
Original line number Diff line number Diff line 
<script setup lang="ts">

import { changeOrderHomeEntity, deleteEntity } from '@/helpers';

import type { IText } from '@/interfaces/entities';

import { useDataStore } from '@/stores/data';

import type { IEntity } from '@/interfaces/environment';



interface Props {

  entityData: IText;

}



const props = defineProps<Props>();



const emit = defineEmits([

  'deleteEntity',

  'addTitle',

  'removeTitle'

  // 'toLeftPosition',

  // 'toCenterPosition',

  // 'toRightPosition',

  // 'toggleIsResizable'

]);



// const isResizable = computed(() => props.isResizable);

// const position = computed(() => props.entityData.position);



const speedDialState = computed(() => {

  const state = [];

  if (!props.entityData?.title && props.entityData?.title !== '') {

    state.push({

      label: 'Add title',

      icon: 'pi pi-pencil',

      command: () => emit('addTitle')

    });

  }

  if (props.entityData?.title || props.entityData?.title === '') {

    state.push({

      label: 'Remove title',

      icon: 'pi pi-trash',

      command: () => emit('removeTitle')

    });

  }

  // state.push({

  //   label: !isResizable.value ? 'Resize' : 'Stop resize',

  //   icon: 'pi pi-arrow-up-right-and-arrow-down-left-from-center',

  //   command: () => emit('toggleIsResizable')

  // });

  // switch (position.value) {

  //   case 'left':

  //     state.push({

  //       label: 'Move to center',

  //       icon: 'pi pi-align-center',

  //       command: () => emit('toCenterPosition')

  //     });

  //     state.push({

  //       label: 'Move to right',

  //       icon: 'pi pi-arrow-right',

  //       command: () => emit('toRightPosition')

  //     });

  //     break;

  //   case 'center':

  //     state.push({

  //       label: 'Move to left',

  //       icon: 'pi pi-arrow-left',

  //       command: () => emit('toLeftPosition')

  //     });

  //     state.push({

  //       label: 'Move to right',

  //       icon: 'pi pi-arrow-right',

  //       command: () => emit('toRightPosition')

  //     });

  //     break;

  //   case 'right':

  //     state.push({

  //       label: 'Move to left',

  //       icon: 'pi pi-arrow-left',

  //       command: () => emit('toLeftPosition')

  //     });

  //     state.push({

  //       label: 'Move to center',

  //       icon: 'pi pi-align-center',

  //       command: () => emit('toCenterPosition')

  //     });

  // }

  state.push({

    label: 'Delete',

    icon: 'pi pi-trash',

    command: () => deleteEntity(props.entityData.uuid)

  });

  return state;

});



const speedDialMove = computed(() => {

  const state = [];

  const dataStore = useDataStore();

  const entities = dataStore.homeEntities;

  const entityIndex = entities.findIndex(

    (entity: IEntity) => entity.uuid === props.entityData.uuid

  );

  if (entityIndex !== 0) {

    state.push({

      label: 'Move up',

      icon: 'pi pi-arrow-up',

      command: () => changeOrderHomeEntity(props.entityData.uuid, 'up')

    });

  }

  if (entityIndex !== entities.length - 1) {

    state.push({

      label: 'Move down',

      icon: 'pi pi-arrow-down',

      command: () => changeOrderHomeEntity(props.entityData.uuid, 'down')

    });

  }

  return state;

});

</script>



<template>

  <div class="relative">

    <SpeedDial

      :model="speedDialState"

      direction="right"

      pt:root:class="speedDialRoot w-16 -translate-y-12"

    >

      <template #button="{ toggleCallback }">

        <button

          class="border p-6 size-10 rounded-full bg-blue-500 flex items-center justify-center"

          @click="toggleCallback"

        >

          <i class="pi pi-pen-to-square"></i>

        </button>

      </template>

      <template #item="{ item, toggleCallback }">

        <div

          :class="[

            'flex flex-col bg-black bg-opacity-70 items-center justify-between -translate-8 gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer',

            {

              'text-red-400 font-semibold': item.icon.includes('trash')

            }

          ]"

          @click="toggleCallback"

        >

          <span :class="item.icon" />

          <span class="text-center">

            {{ item.label }}

          </span>

        </div>

      </template>

    </SpeedDial>

    <SpeedDial :model="speedDialMove" direction="right" pt:root:class="speedDialRoot w-16">

      <template #button="{ toggleCallback }">

        <button

          class="border p-6 size-10 rounded-full bg-blue-500 flex items-center justify-center"

          @click="toggleCallback"

        >

          <i class="pi pi-arrows-alt"></i>

        </button>

      </template>

      <template #item="{ item, toggleCallback }">

        <div

          :class="[

            'flex flex-col bg-black bg-opacity-70 items-center justify-between -translate-8 gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer',

            {

              'text-red-400 font-semibold': item.icon.includes('trash')

            }

          ]"

          @click="toggleCallback"

        >

          <span :class="item.icon" />

          <span class="text-center">

            {{ item.label }}

          </span>

        </div>

      </template>

    </SpeedDial>

  </div>

</template>



<style>

.speedDialRoot {

  justify-content: flex-start !important;

}

</style>

src/components/entities/TextItem.vue

+20 −39
Original line number Diff line number Diff line 
<script setup lang="ts">

import type { IText } from '@/interfaces/entities';

import type { IEntity } from '@/interfaces/environment';

import { useDataStore } from '@/stores/data';

import { useTextareaAutosize } from '@vueuse/core';

import { editEntity } from '@/helpers';

import { deleteEntity, editEntity } from '@/helpers';

import EditTextEntityMenu from '@/components/EditTextEntityMenu.vue';



interface Props {

  entityData: IText;
@@ -11,8 +11,6 @@ interface Props { 
const props = defineProps<Props>();

const entityData = ref(props.entityData);



const dataStore = useDataStore();



const addTitle = () => {

  editEntity({ ...entityData.value, title: 'Title' }, entityData.value.uuid);

  entityData.value = { ...entityData.value, title: 'Title' };
@@ -26,13 +24,7 @@ const editText = () => { 
  editEntity({ ...entityData.value, text: entityData.value.text }, entityData.value.uuid);

};



const deleteEntity = () => {

  let prevState = dataStore.homeEntities;

  prevState = prevState.filter((entity: IEntity) => entity.uuid !== entityData.value.uuid);

  dataStore.editHomeEntities(prevState);

};



const deleteTitle = () => {

const removeTitle = () => {

  const newState = { ...entityData.value };

  delete newState.title;

  editEntity({ ...newState }, entityData.value.uuid);
@@ -43,15 +35,15 @@ const { textarea, triggerResize } = useTextareaAutosize(); 
</script>



<template>

  <div class="textContainer relative">

  <div class="entityContainer relative">

    <input

      ref="input"

      v-if="entityData.title"

      v-if="entityData.title || entityData.title === ''"

      type="text"

      v-model="entityData.title"

      @change="editTitle"

      @input="triggerResize"

      class="w-full mb-2 font-bold pl-2"

      placeholder="Enter title..."

      class="w-full mb-2 font-bold text-2xl pl-2"

    />

    <textarea

      ref="textarea"
@@ -61,26 +53,14 @@ const { textarea, triggerResize } = useTextareaAutosize(); 
      @input="triggerResize"

      placeholder="Enter text..."

    />

    <button

      v-if="!entityData?.title"

      @click.prevent="addTitle"

      class="addTitleButton absolute top-0 left-4 bg-blue-500 py-0.5 px-2 rounded-md -translate-y-full border-2 border-solid border-black transition-all select-none"

    >

      Add title

    </button>

    <button

      @click.prevent="deleteEntity"

      class="deleteEntityButton absolute top-0 right-4 bg-blue-500 py-0.5 px-2 rounded-md -translate-y-full border-2 border-solid border-black transition-all select-none"

    >

      <i class="pi pi-trash pr-2"></i>Delete

    </button>

    <button

      v-if="entityData?.title"

      @click.prevent="deleteTitle"

      class="deleteEntityButton absolute top-0 left-4 bg-blue-500 py-0.5 px-2 rounded-md -translate-y-full border-2 border-solid border-black transition-all select-none"

    >

      <i class="pi pi-trash pr-2"></i>Delete title

    </button>

    <div class="speedDial absolute top-0 left-2 z-50 transition-all select-none">

      <EditTextEntityMenu

        :entityData="entityData"

        @deleteEntity="deleteEntity"

        @addTitle="addTitle"

        @removeTitle="removeTitle"

      />

    </div>

  </div>

</template>
@@ -93,12 +73,13 @@ textarea { 
textarea::-webkit-scrollbar {

  display: none;

}

.textContainer > .addTitleButton,

.textContainer > .deleteEntityButton {

.entityContainer > .speedDial {

  opacity: 0;

}

.textContainer:hover > .addTitleButton,

.textContainer:hover > .deleteEntityButton {

.entityContainer:hover > .speedDial {

  opacity: 100;

}

input::placeholder {

  font-weight: 400;

}

</style>