itube-specs 0.0.911 → 0.0.913

package/components/playlist/edit.vue

@@ -1,119 +1,80 @@
 <template>
-  <div
-    v-if="isPlaylistEditOpen"
-    class="playlist-edit__decorate"
-  />
+  <UiConfirm
+    v-model="isDeleteStep"
+    :title="$t('playlist.delete_playlist')"
+    :confirm-text="$t('playlist.delete')"
+    :loading="loadingAll"
+    transparent-backdrop
+    @confirm="onDeleteClick"
+  >
+    <i18n-t
+      keypath="playlist.confirm_delete"
+      tag="p"
+      scope="global"
+      class="playlist-edit__confirm"
+    >
+      <strong>{{ selectedPlaylist?.name }}</strong>
+    </i18n-t>
+    <p class="playlist-edit__confirm-note">
+      {{ $t('playlist.confirm_delete_note', { videos: $t('plural.videos', selectedPlaylist?.videosCount ?? 0) }) }}
+    </p>
+  </UiConfirm>
 
-  <!--  Delete-->
+  <!--  Edit-->
   <transition mode="out-in">
     <UiPopup
-      v-if="isPlaylistEditOpen && currentStep === PlaylistStep.Delete"
+      v-if="isPlaylistEditOpen && currentStep === PlaylistStep.Edit"
       v-model="isPlaylistEditOpen"
+      :back="!!onBack"
+      class="playlist-edit"
       sheet
       transparent-backdrop
+      @back="goBack"
+      @close="closePlaylistEditAll"
     >
-      <template #title>{{ $t('playlist.delete_playlist') }}</template>
+      <template #title>{{ $t('playlist.edit_playlist') }}</template>
 
       <div
         :class="{'_loading': loadingAll}"
-        class="playlist-edit__wrapper"
+        class="playlist-edit__form"
       >
-        <UiIcon
-          class="playlist-edit__icon"
-          name="trash-bin"
-          size="40"
+        <UiInput
+          v-model="inputValue"
+          :placeholder="$t('playlist_name')"
+          @enter="onSaveClick"
         />
-        <p class="playlist-edit__text">{{ $t('playlist.confirm_text', { name: `${selectedPlaylist?.name}` }) }}</p>
+        <PlaylistVisibility v-model="typeValue"/>
       </div>
-      <template #footer>
-        <div class="playlist-edit__buttons">
-          <UiBtn
-            :disabled="loadingAll"
-            size="l"
-            wide
-            theme="secondary"
-            @click="closePlaylistEdit"
-          >{{ $t('cancel') }}
-          </UiBtn>
-          <UiBtn
-            :disabled="loadingAll"
-            size="l"
-            wide
-            theme="primary"
-            @click="onDeleteClick"
-          >{{ $t('playlist.delete') }}
-          </UiBtn>
-        </div>
-      </template>
 
-    </UiPopup>
-  </transition>
-  <!--  Delete-->
-
-  <!--  Edit-->
-  <transition mode="out-in">
-    <UiPopup
-      v-if="isPlaylistEditOpen && currentStep === PlaylistStep.Edit && data"
-      v-model="isPlaylistEditOpen"
-      transparent-backdrop
-    >
-      <template #title>{{ $t('playlist.edit_playlist') }}</template>
-
-      <template #fixedContent>
-        <div class="playlist-edit__subheader-wrapper">
-          <UiInput
-            v-model="inputValue"
-            :label="$t('playlist.playlist')"
-          />
-          <PlaylistPrivateToggle v-model="toggleValue"/>
-        </div>
-      </template>
-
-      <div
-        v-if="data && data.items.length"
-        :class="{'_loading': loadingAll}"
-        class="playlist-edit__grid"
-      >
-        <div
-          v-for="(card, index) in data.items"
-          :key="`playlist-edit-${index}`"
-          class="playlist-edit__card-wrapper"
-        >
-          <CardVideoMini
-            :card="card"
-            class="playlist-edit__card"
-          />
+      <template #footer>
+        <div class="playlist-edit__footer">
           <button
             class="playlist-edit__delete"
             type="button"
-            @click="openPlaylistEdit(PlaylistStep.DeleteVideo, true, selectedPlaylist, card)"
+            @click="openPlaylistEdit(PlaylistStep.Delete, true, selectedPlaylist)"
           >
             <UiIcon
               name="trash-bin"
-              size="24"
+              size="16"
             />
+            {{ $t('delete') }}
           </button>
-        </div>
-      </div>
-
-      <template #footer>
-        <div class="playlist-edit__buttons">
-          <UiBtn
-            wide
-            :disabled="loadingAll"
-            size="l"
-            theme="secondary"
-            @click="closePlaylistEdit"
-          >{{ $t('cancel') }}
-          </UiBtn>
-          <UiBtn
-            :disabled="loadingAll"
-            size="l"
-            wide
-            theme="primary"
-            @click="onSaveClick"
-          >{{ $t('save') }}
-          </UiBtn>
+          <div class="playlist-edit__actions">
+            <UiBtn
+              :disabled="loadingAll"
+              size="l"
+              theme="muted"
+              @click="goBack"
+            >{{ $t('cancel') }}
+            </UiBtn>
+            <UiBtn
+              :disabled="loadingAll || !inputValue.trim()"
+              size="l"
+              theme="primary"
+              @click="onSaveClick"
+            >{{ $t('save') }}
+            </UiBtn>
+          </div>
         </div>
       </template>
       <!--  Edit-->
@@ -124,18 +85,16 @@
 
 <script setup lang="ts">
 import { PlaylistStep, PlaylistType, AsyncData } from '../../runtime';
-import type { IVideoCard, PaginatedResponse, IPlaylistData } from '../../types';
+import type { IPlaylistData } from '../../types';
 
 const props = defineProps<{
   loadingPlaylists: boolean
   loadingRefresh: boolean
-  loadingEditVideos: boolean
   loadingPlaylistDelete: boolean
 }>();
 
 const emit = defineEmits<{
   (eventName: 'delete-playlist', eventValue: string): void
-  (eventName: 'open-edit', eventValue: string): void
   (eventName: 'save-edit', eventValue: {
     id: string
     playlistName: string
@@ -144,32 +103,45 @@ const emit = defineEmits<{
 }>();
 
 const inputValue = ref('');
-const toggleValue = ref(false);
+const typeValue = ref<PlaylistType>(PlaylistType.Public);
+
+const {
+  isPlaylistEditOpen,
+  closePlaylistEdit,
+  closePlaylistEditAll,
+  currentStep,
+  selectedPlaylist,
+  openPlaylistEdit,
+  onBack,
+} = usePlaylistEdit();
+
+/** Возврат к попапу, откуда пришли (список плейлистов), либо просто закрытие. */
+function goBack() {
+  const back = onBack.value;
+  closePlaylistEditAll();
+  back?.();
+}
 
-const { isPlaylistEditOpen, closePlaylistEdit, currentStep, selectedPlaylist, openPlaylistEdit } = usePlaylistEdit();
+const isDeleteStep = computed({
+  get: () => isPlaylistEditOpen.value && currentStep.value === PlaylistStep.Delete,
+  set: (val: boolean) => {
+    if (!val) closePlaylistEdit();
+  },
+});
 const { show } = useSnackbar();
 
 const route = useRoute();
-const id = computed(() => route.params[ 'playlistId' ] ? String(route.params[ 'playlistId' ]) : selectedPlaylist.value?.id);
-
-const videosStateKey = computed(() =>
-  id.value ? `data-${AsyncData.GetPlaylistsVideo}-${id.value}` : null
-);
-
-const data = computed<PaginatedResponse<IVideoCard> | null>(() => {
-    return useState<PaginatedResponse<IVideoCard> | null>(
-      videosStateKey.value || '',
-      () => null
-    ).value;
-});
+const id = computed(() => selectedPlaylist.value?.id ?? (route.params[ 'playlistId' ] ? String(route.params[ 'playlistId' ]) : undefined));
 
 const playlistsData = useState<IPlaylistData>(`data-${AsyncData.PlaylistById}-${id.value}`);
 
 async function onDeleteClick() {
   try {
+    const name = selectedPlaylist.value?.name;
+
     emit('delete-playlist', id.value || '');
-    show('playlist_deleted');
-    closePlaylistEdit();
+    goBack();
+    show('deleted', { icon: 'trash-bin', highlight: name });
   } catch {
     console.log('error delete');
   }
@@ -177,19 +149,17 @@ async function onDeleteClick() {
 
 async function onSaveClick() {
   try {
-    const playlistType = toggleValue.value ? PlaylistType.Private : PlaylistType.Public;
-
     emit('save-edit', {
       id: id.value || '',
       playlistName: inputValue.value,
-      playlistType: playlistType,
+      playlistType: typeValue.value,
     });
 
     if (playlistsData.value) {
       playlistsData.value.name = inputValue.value ? inputValue.value : playlistsData.value.name;
-      playlistsData.value.playlistType = playlistType;
+      playlistsData.value.playlistType = typeValue.value;
     }
-    closePlaylistEdit();
+    goBack();
     show('changes_soon');
   } catch {
     console.log('error save');
@@ -197,123 +167,87 @@ async function onSaveClick() {
 }
 
 watch(
-  () => [isPlaylistEditOpen.value, currentStep.value, id.value],
-  ([open, step, playlistId]) => {
-    if (!open || step !== PlaylistStep.Edit || !playlistId) return;
-
-    emit('open-edit', String(playlistId));
+  () => [isPlaylistEditOpen.value, currentStep.value, selectedPlaylist.value],
+  ([open, step]) => {
+    if (!open || step !== PlaylistStep.Edit) return;
 
     inputValue.value = selectedPlaylist.value?.name || '';
+    typeValue.value = selectedPlaylist.value?.playlistType ?? PlaylistType.Public;
   },
   { immediate: true }
 );
 
-watch(() => selectedPlaylist.value?.playlistType, (newType) => {
-  if (newType !== undefined && newType !== null) {
-    toggleValue.value = newType === PlaylistType.Private;
-  }
-});
-
-const loadingAll = computed(() => props.loadingRefresh || props.loadingEditVideos || props.loadingPlaylists || props.loadingPlaylistDelete);
+const loadingAll = computed(() => props.loadingRefresh || props.loadingPlaylists || props.loadingPlaylistDelete);
 </script>
 
 <style lang="scss">
-.playlist-edit__buttons {
-  padding: 8px;
-  display: grid;
-  gap: 8px;
-  border-top: 1px solid $playlist-edit-border;
+.playlist-edit__confirm {
+  @include font-sm;
 
-  @include from-br(sm) {
-    padding: 16px;
-    grid-template-columns: 1fr 1fr;
-  }
+  line-height: 1.5;
 }
 
-.playlist-edit__subheader-wrapper,
-.playlist-edit__wrapper,
-.playlist-edit__grid {
-  display: grid;
-  padding-inline: 8px;
-
-  @include from-br(sm) {
-    max-width: 400px;
-    padding-inline: 16px;
-  }
+.playlist-edit__confirm strong {
+  font-weight: 600;
+  color: $playlist-edit-confirm-highlight;
 }
 
-.playlist-edit__subheader-wrapper {
-  display: grid;
-  row-gap: 8px;
+.playlist-edit__confirm-note {
+  @include font-sm;
 
-  @include from-br(sm) {
-    padding-top: 16px;
-    row-gap: 16px;
-  }
+  margin-top: 12px;
+  line-height: 1.5;
+  color: $playlist-edit-confirm-note;
 }
 
-.playlist-edit__wrapper {
-  row-gap: 8px;
-  padding-block: 8px;
-
-  @include from-br(sm) {
-    row-gap: 16px;
-    padding-block: 16px;
-  }
+.playlist-edit .ui-popup__content {
+  padding: 0;
 }
 
-.playlist-edit__text {
-  @include font-xs;
-
-  font-weight: 400;
-  text-align: center;
+.playlist-edit .ui-popup__footer {
+  padding-inline: 24px;
+}
 
-  @include from-br(sm) {
-    @include font-sm;
-  }
+.playlist-edit__form {
+  display: grid;
+  row-gap: 16px;
+  padding: 20px 24px;
 }
 
-.playlist-edit__icon {
-  color: $playlist-edit-icon;
-  margin: 0 auto;
+.playlist-edit__form .ui-input {
+  --input-bg: #{$playlist-input-bg};
 }
 
-.playlist-edit__decorate {
-  position: fixed;
-  inset: 0;
-  z-index: $z-index-popup;
-  backdrop-filter: blur(8px);
+.playlist-edit__form .ui-input__input {
+  @include from-br(sm) {
+    padding-block: 12px;
+  }
 }
 
-.playlist-edit__card-wrapper {
+.playlist-edit__footer {
   display: flex;
   align-items: center;
-  column-gap: 8px;
-  padding-block: 8px;
-  border-bottom: 1px solid $playlist-edit-border;
-
-  @include from-br(sm) {
-    padding-block: 16px;
-  }
+  justify-content: space-between;
+  column-gap: 12px;
 }
 
-.playlist-edit__card {
-  flex-grow: 1;
+.playlist-edit__actions {
+  display: flex;
+  column-gap: 12px;
 }
 
 .playlist-edit__delete {
-  opacity: 0.5;
-
-  @include hover(opacity) {
-    opacity: 0.4;
-  }
+  @include font-sm;
 
-  @include from-br(sm) {
-    position: relative;
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+  font-weight: 500;
+  color: $playlist-edit-delete-text;
 
-    &::after {
-      @include area-point;
-    }
+  @include hover(color) {
+    color: $playlist-edit-delete-text--hover;
   }
 }
+
 </style>

package/components/playlist/input.vue

@@ -7,8 +7,6 @@
       v-model="name"
       :placeholder="placeholder"
       :error="error"
-      :icon="name.length > 0 ? 'close' : ''"
-      @icon-click="name = ''"
       @update:error="$emit('update:error', $event)"
     />
     <button
@@ -21,69 +19,32 @@
         size="20"
       />
     </button>
-    <div class="playlist-input__visibility">
-      <UiToggle
-        :model-value="currentType === 'public'"
-        @update:model-value="currentType = $event ? 'public' : 'private'"
-      >
-        <div class="playlist-input__toggle-wrapper">
-          <UiIcon
-            :name="PLAYLIST_TYPE_ICON[PlaylistType.Public]"
-            class="playlist-input__toggle-icon"
-            size="14"
-          />
-          {{ $t('public') }}
-        </div>
-      </UiToggle>
-      <UiTooltip
-        class="playlist-input__tooltip"
-        right
-      >
-        <template #trigger>
-          <span class="playlist-input__hint">?</span>
-        </template>
-        <p class="playlist-input__tooltip-text"><span>{{ $t('public') }}: </span>{{ $t('public_hint') }}</p>
-        <p class="playlist-input__tooltip-text"><span>{{ $t('private') }}: </span>{{ $t('private_hint') }}</p>
-      </UiTooltip>
-      <button
-        v-if="editPlaylist"
-        type="button"
-        class="playlist-input__delete"
-        @click="$emit('delete')"
-      >
-        {{ $t('delete') }}
-      </button>
-    </div>
+    <PlaylistVisibility
+      v-model="currentType"
+      class="playlist-input__visibility"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { PlaylistType } from '../../runtime';
-
-const PLAYLIST_TYPE_ICON: Record<PlaylistType, string> = {
-  [PlaylistType.Public]: 'user-group',
-  [PlaylistType.Private]: 'lock',
-};
+import type { PlaylistType } from '../../runtime';
 
 const props = withDefaults(defineProps<{
   modelValue: string
-  type: 'public' | 'private'
+  type: PlaylistType
   error?: boolean
   placeholder?: string
-  editPlaylist?: boolean
 }>(), {
   error: false,
   placeholder: '',
-  editPlaylist: false,
 });
 
 const emit = defineEmits<{
   (eventName: 'update:modelValue', value: string): void
-  (eventName: 'update:type', value: 'public' | 'private'): void
+  (eventName: 'update:type', value: PlaylistType): void
   (eventName: 'update:error', value: boolean): void
   (eventName: 'close'): void
   (eventName: 'submit'): void
-  (eventName: 'delete'): void
 }>();
 
 const name = computed({
@@ -93,7 +54,7 @@ const name = computed({
 
 const currentType = computed({
   get: () => props.type,
-  set: (val: 'public' | 'private') => emit('update:type', val),
+  set: (val: PlaylistType) => emit('update:type', val),
 });
 </script>
 
@@ -103,110 +64,39 @@ const currentType = computed({
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
-  column-gap: 12px;
-
-  @include from-br(sm) {
-    column-gap: 16px;
-  }
+  column-gap: 8px;
 }
 
-.playlist-input .ui-radio__label {
-  color: $playlist-input-label;
+.playlist-input .ui-input {
+  --input-bg: #{$playlist-input-bg};
 }
 
-.playlist-input__toggle-icon {
-  color: $playlist-input-toggle-icon;
+.playlist-input .ui-input__input {
+  @include from-br(sm) {
+    padding-block: 12px;
+  }
 }
 
 .playlist-input__visibility {
   grid-column: 1;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 12px;
   margin-top: 12px;
-
-  @include from-br(sm) {
-    gap: 10px;
-  }
 }
 
 .playlist-input__back {
   grid-column: 2;
   grid-row: 1;
-  position: relative;
+  display: grid;
+  place-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: $radius-12;
   color: $playlist-input-back;
+  background-color: $playlist-input-back-bg;
 
-  &::after {
-    @include area-point;
-  }
-
-  @include hover(color) {
+  @include hover(background-color, color) {
     color: $playlist-input-back--hover;
+    background-color: $playlist-input-back-bg--hover;
   }
 }
 
-.playlist-input__tooltip {
-  margin-left: 0;
-}
-
-.playlist-input__hint {
-  @include font-xs;
-
-  display: inline-grid;
-  place-content: center;
-  width: 20px;
-  height: 20px;
-  border-radius: $radius-full;
-  color: $playlist-input-hint-text;
-  background-color: $playlist-input-hint-bg;
-  font-weight: 700;
-  line-height: 1;
-  cursor: help;
-  flex-shrink: 0;
-
-  @include hover(background-color) {
-    background-color: $playlist-input-hint-bg--hover;
-  }
-}
-
-.playlist-input__tooltip-text:not(:last-child) {
-  margin-bottom: 8px;
-}
-
-.playlist-input__tooltip-text span {
-  color: $playlist-input-tooltip-highlight;
-}
-
-.playlist-input__tooltip-text {
-  @include font-xs;
-
-  max-width: 184px;
-}
-
-.playlist-input__delete {
-  @include font-xs;
-
-  margin-left: auto;
-  color: $playlist-input-delete-text;
-  background-color: $playlist-input-delete-bg;
-  padding: 6px 12px;
-  border-radius: $radius-lg;
-
-  @include hover(background-color) {
-    background-color: $playlist-input-delete-bg--hover;
-  }
-}
-
-.playlist-input__toggle-icon {
-  color: $playlist-input-toggle-icon--active;
-}
-
-.playlist-input__toggle-wrapper {
-  @include font-sm;
-
-  display: flex;
-  align-items: center;
-  column-gap: 8px;
-}
 </style>