@designcrowd/library.brand-page 6.2.3-ast-faq → 6.2.3

package/src/shared/content-settings/components/list-items-field/ListItemsField.vue

@@ -1,262 +0,0 @@
-<template>
-  <div data-component="list-items-field" class="tw-flex tw-flex-col tw-gap-2">
-    <ItemsField
-      ref="itemsFieldRef"
-      :items="items"
-      :can-collapse="true"
-      :show-preview-image="false"
-      :collapsed-by-default="true"
-      :delete-label="contentSettingsTr(`listItemsDeleteLabel`)"
-      @items-change="onReorder"
-      @items-delete="onDelete"
-      @item-toggle="onToggle"
-    >
-      <template #preview="{ item }">
-        <p class="tw-w-full tw-truncate tw-m-0" data-test-list-item-label>
-          {{ rowLabel(item) }}
-        </p>
-      </template>
-      <template #form="{ index }">
-        <div v-for="schema in itemFields" :key="schema.key" class="tw-mt-3">
-          <FieldSubHeader :title="schema.title" />
-          <template v-if="isRichText(schema)">
-            <!-- The same editor as a section title; its toolbar writes this item's own style. -->
-            <TextareaField
-              :id="id"
-              :key="`${items[index].id}-${schema.key}`"
-              :name="schema.key"
-              :value="items[index][schema.key]"
-              :styles="items[index][schema.styleKey!]"
-              :item="items[index]"
-              :item-style-target="{
-                itemsField: name,
-                index,
-                styleField: schema.styleKey!,
-              }"
-              :placeholder="schema.placeholder"
-              :max-length="schema.maxLength"
-              :content-type="content.type"
-              :show-rich-text-editor="true"
-              :attrs="{ 'data-test-tag': `list-item-${schema.key}` }"
-              @update:model-value="onFieldInput(index, schema.key, $event)"
-            />
-          </template>
-          <template v-else>
-            <!-- The section fields' plain inputs: they encode on write, as saved text expects. -->
-            <component
-              :is="schema.kind === 'text' ? TextField : TextareaField"
-              :id="id"
-              :key="`${items[index].id}-${schema.key}`"
-              :name="schema.key"
-              :value="items[index][schema.key]"
-              v-bind="schema.kind === 'text' ? {} : { item: items[index] }"
-              :placeholder="schema.placeholder"
-              :max-length="schema.maxLength"
-              :attrs="{ 'data-test-tag': `list-item-${schema.key}` }"
-              @update:model-value="onFieldInput(index, schema.key, $event)"
-            />
-            <TextStyleField
-              v-if="schema.styleKey"
-              :id="`${id}-${items[index].id}-${schema.styleKey}`"
-              :name="schema.styleKey"
-              :value="items[index][schema.styleKey]"
-              :is-admin-maker="isAdminMaker"
-              :logo-theme="logoTheme"
-              :show-font-style-only="true"
-              :is-text-content="true"
-              @update:model-value="onStyleInput(index, schema.styleKey, $event)"
-            />
-          </template>
-        </div>
-      </template>
-    </ItemsField>
-    <Button
-      :label="
-        isAtMax
-          ? contentSettingsTr(`listItemsMaxReached`, { max: maxLength })
-          : contentSettingsTr(`listItemsAddItem`)
-      "
-      :disabled="isAtMax"
-      variant="outline"
-      size="small-medium"
-      :full-width="true"
-      :attrs="{ 'data-test-list-items-add': '' }"
-      @on-click.stop="onAdd"
-    />
-  </div>
-</template>
-<script setup lang="ts">
-import type { PropType } from 'vue';
-import { computed, nextTick, ref, watch } from 'vue';
-import { Button } from '@designcrowd/fe-shared-lib';
-import * as uuid from 'uuid';
-import cloneDeep from 'lodash.clonedeep';
-import type { Content, LogoTheme, TextStyleDeclaration } from '@brand-page';
-import type { ListItemFieldSchema } from '@brand-page-maker/models/content-settings-configs';
-import {
-  getPlainTextFromRTE,
-  switchRteItemFieldsToRTE,
-} from '@brand-page-maker/utils';
-import { useExternalRichTextEditor } from '@brand-page-maker/composables/rich-text-editor/useRichTextEditor';
-import { useUiStyleSettingsStore } from '@shared/style-settings/store';
-import { useUiContentSettingsStore } from '../../store/content-settings-store';
-import { contentSettingsTr } from '@src/composables/useTranslate';
-import ItemsField from '../items-field/ItemsField.vue';
-import TextField from '../text-field/TextField.vue';
-import TextareaField from '../textarea-field/TextareaField.vue';
-import TextStyleField from '../text-style-field/TextStyleField.vue';
-import FieldSubHeader from '../field-sub-header/FieldSubHeader.vue';
-import type { UpdateItemValuePayload } from '../../models';
-
-type ListItem = { id: string } & Record<string, any>;
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  id: { type: String, required: true },
-  name: { type: String, required: true },
-  value: { type: Array as PropType<ListItem[]>, required: true },
-  content: { type: Object as PropType<Content>, required: true },
-  itemFields: {
-    type: Array as PropType<ListItemFieldSchema[]>,
-    required: true,
-  },
-  maxLength: { type: Number, required: false, default: undefined },
-  // From the host field: false when the user lacks rich text, so every input stays plain.
-  showRichTextEditor: { type: Boolean, required: false, default: false },
-  isAdminMaker: { type: Boolean, required: false, default: false },
-  logoTheme: {
-    type: Object as PropType<LogoTheme>,
-    required: false,
-    default: undefined,
-  },
-});
-
-const emit = defineEmits<{
-  'update:modelValue': [payload: UpdateItemValuePayload<ListItem[]>];
-}>();
-
-const contentSettingsStore = useUiContentSettingsStore();
-const styleSettingsStore = useUiStyleSettingsStore();
-const itemsFieldRef = ref<{ expand: (index: number) => void } | null>(null);
-const items = ref<ListItem[]>(cloneDeep(props.value ?? []));
-
-const isAtMax = computed(
-  (): boolean =>
-    props.maxLength !== undefined && items.value.length >= props.maxLength,
-);
-
-const labelKey = computed(
-  (): string | undefined =>
-    props.itemFields.find((schema) => schema.kind === 'text')?.key,
-);
-
-const rowLabel = (item: ListItem): string =>
-  labelKey.value ? getPlainTextFromRTE(item[labelKey.value] ?? '') : '';
-
-const isRichText = (schema: ListItemFieldSchema): boolean =>
-  props.showRichTextEditor && !!schema.styleKey;
-
-// Always a new array: the undo store drops same-reference writes (undo-redo.md).
-const emitChange = (isHydrationWrite = false): void => {
-  emit('update:modelValue', {
-    id: props.id,
-    name: props.name,
-    value: cloneDeep(items.value),
-    ...(isHydrationWrite ? { isHydrationWrite: true } : {}),
-  });
-};
-
-// The text fields debounce their own emits; the rich-text editor also marks its
-// mount-time rewrite as a hydration write so the store folds it into the current
-// undo entry.
-const onFieldInput = (
-  index: number,
-  key: string,
-  payload: UpdateItemValuePayload<unknown>,
-): void => {
-  items.value[index] = { ...items.value[index], [key]: payload.value ?? '' };
-  emitChange(payload.isHydrationWrite === true);
-};
-
-const onStyleInput = (
-  index: number,
-  key: string,
-  payload: UpdateItemValuePayload<TextStyleDeclaration>,
-): void => {
-  items.value[index] = { ...items.value[index], [key]: payload.value };
-  emitChange();
-};
-
-const onReorder = (reordered: ListItem[]): void => {
-  items.value = [...reordered];
-  emitChange();
-};
-
-const onDelete = (index: number): void => {
-  items.value = items.value.filter((_item, i) => i !== index);
-  emitChange();
-};
-
-const onToggle = (index: number, isCollapsed: boolean): void => {
-  if (!isCollapsed && items.value[index]) {
-    contentSettingsStore.setActiveItem(props.content.id, items.value[index].id);
-  }
-};
-
-// A new item takes the last item's styles, so it looks like its siblings.
-const createItem = (): ListItem => {
-  const lastItem = items.value[items.value.length - 1];
-  const newItem: ListItem = { id: uuid.v4() };
-
-  props.itemFields.forEach((schema) => {
-    newItem[schema.key] = schema.defaultValue?.() ?? '';
-
-    if (schema.styleKey) {
-      newItem[schema.styleKey] = cloneDeep(
-        lastItem?.[schema.styleKey] ?? schema.defaultStyle?.() ?? {},
-      );
-    }
-  });
-
-  if (props.showRichTextEditor) {
-    const { externalEditor } = useExternalRichTextEditor();
-
-    try {
-      switchRteItemFieldsToRTE(
-        props.content.type,
-        newItem,
-        externalEditor,
-        styleSettingsStore,
-      );
-    } finally {
-      externalEditor.destroy();
-    }
-  }
-
-  return newItem;
-};
-
-const onAdd = async (): Promise<void> => {
-  if (isAtMax.value) {
-    return;
-  }
-
-  items.value = [...items.value, createItem()];
-  emitChange();
-
-  await nextTick();
-  itemsFieldRef.value?.expand(items.value.length - 1);
-};
-
-// External writes (undo/redo, AI, an editor's toolbar style write) replace the local copy.
-watch(
-  () => props.value,
-  (value) => {
-    if (JSON.stringify(value ?? []) !== JSON.stringify(items.value)) {
-      items.value = cloneDeep(value ?? []);
-    }
-  },
-  { deep: true },
-);
-</script>