@shwfed/nuxt 0.10.10 → 0.10.12

package/dist/runtime/components/ui/menu-tabs-configurator/MenuTabsConfiguratorDialog.vue

@@ -0,0 +1,482 @@
+<script setup>
+import { useSortable } from "@vueuse/integrations/useSortable";
+import { Icon } from "@iconify/vue";
+import { computed, nextTick, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { cn } from "../../../utils/cn";
+import { Button } from "../button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "../dialog";
+import { ExpressionEditor } from "../expression-editor";
+import { Input } from "../input";
+import Locale from "../locale/Locale.vue";
+import { MenuTabsConfigC, MenuTabsItemToC } from "../menu-tabs/schema";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  config: { type: Object, required: true }
+});
+const emit = defineEmits(["confirm"]);
+const open = defineModel("open", { type: Boolean, ...{
+  default: false
+} });
+const { t } = useI18n();
+const search = ref("");
+const selectedItemId = ref("");
+const draftMenus = ref([]);
+const sortableListRef = ref(null);
+const sortableItemIds = ref([]);
+const toEditor = ref(null);
+function createDraftId() {
+  return crypto.randomUUID();
+}
+function cloneLocaleValue(value) {
+  return value.map((item) => ({
+    locale: item.locale,
+    message: item.message
+  }));
+}
+function cloneMenu(menu) {
+  return {
+    id: menu.id,
+    title: cloneLocaleValue(menu.title),
+    to: menu.to
+  };
+}
+function createDraftMenu(menu) {
+  return {
+    draftId: createDraftId(),
+    menu: cloneMenu(menu)
+  };
+}
+function cloneMenus(menus) {
+  return menus.map(createDraftMenu);
+}
+function createDefaultMenu() {
+  return {
+    id: crypto.randomUUID(),
+    title: [{ locale: "zh", message: "" }],
+    to: '"/"'
+  };
+}
+function getMenuChineseTitle(menu) {
+  const zhTitle = menu.title.find((item) => item.locale === "zh");
+  if (!zhTitle) {
+    return void 0;
+  }
+  const message = zhTitle.message.trim();
+  return message.length > 0 ? message : void 0;
+}
+function getMenuListLabel(menu) {
+  return getMenuChineseTitle(menu) ?? t("menu-tabs-configurator-untitled");
+}
+function applyDraftConfig(config) {
+  search.value = "";
+  draftMenus.value = cloneMenus(config.menus);
+  selectedItemId.value = draftMenus.value[0]?.draftId ?? "";
+}
+function resetDraftConfig() {
+  applyDraftConfig(props.config);
+}
+const normalizedSearch = computed(() => search.value.trim().toLocaleLowerCase());
+const menuItems = computed(() => draftMenus.value.map((item) => ({
+  itemId: item.draftId,
+  label: getMenuListLabel(item.menu),
+  id: item.menu.id
+})));
+const filteredMenuItems = computed(() => {
+  if (!normalizedSearch.value) {
+    return menuItems.value;
+  }
+  return menuItems.value.filter((item) => {
+    const haystack = [item.label, item.id].join(" ").toLocaleLowerCase();
+    return haystack.includes(normalizedSearch.value);
+  });
+});
+const selectedMenu = computed(() => draftMenus.value.find((item) => item.draftId === selectedItemId.value));
+function syncSortableItemIds() {
+  sortableItemIds.value = draftMenus.value.map((item) => item.draftId);
+}
+function moveDraftMenus(menus, oldIndex, newIndex) {
+  if (oldIndex < 0 || newIndex < 0 || oldIndex >= menus.length || newIndex >= menus.length) {
+    return menus.slice();
+  }
+  const nextMenus = menus.slice();
+  const movedMenu = nextMenus[oldIndex];
+  if (!movedMenu) {
+    return menus.slice();
+  }
+  nextMenus.splice(oldIndex, 1);
+  nextMenus.splice(newIndex, 0, movedMenu);
+  return nextMenus;
+}
+function handleSortableUpdate(event) {
+  const oldIndex = event.oldIndex;
+  const newIndex = event.newIndex;
+  if (oldIndex === void 0 || newIndex === void 0 || oldIndex === newIndex) {
+    return;
+  }
+  draftMenus.value = moveDraftMenus(draftMenus.value, oldIndex, newIndex);
+}
+const sortable = useSortable(sortableListRef, sortableItemIds);
+function configureSortable() {
+  sortable.option("animation", 150);
+  sortable.option("handle", '[data-slot="menu-tabs-configurator-drag-handle"]');
+  sortable.option("onUpdate", handleSortableUpdate);
+}
+async function refreshSortable() {
+  sortable.stop();
+  if (!open.value || draftMenus.value.length === 0 || normalizedSearch.value.length > 0) {
+    return;
+  }
+  await nextTick();
+  sortable.start();
+  configureSortable();
+}
+function selectItem(itemId) {
+  selectedItemId.value = itemId;
+}
+function updateMenu(draftId, update) {
+  draftMenus.value = draftMenus.value.map((item) => item.draftId === draftId ? {
+    draftId: item.draftId,
+    menu: update(item.menu)
+  } : item);
+}
+function updateSelectedTitle(value) {
+  if (!selectedMenu.value) {
+    return;
+  }
+  updateMenu(selectedMenu.value.draftId, (menu) => ({
+    id: menu.id,
+    title: cloneLocaleValue(value),
+    to: menu.to
+  }));
+}
+function updateSelectedTo(value) {
+  if (!selectedMenu.value) {
+    return;
+  }
+  updateMenu(selectedMenu.value.draftId, (menu) => ({
+    id: menu.id,
+    title: cloneLocaleValue(menu.title),
+    to: value ?? ""
+  }));
+}
+async function addMenu() {
+  const nextMenu = {
+    draftId: createDraftId(),
+    menu: createDefaultMenu()
+  };
+  draftMenus.value = [...draftMenus.value, nextMenu];
+  selectedItemId.value = nextMenu.draftId;
+  await refreshSortable();
+}
+function deleteMenu(draftId) {
+  const removedIndex = draftMenus.value.findIndex((item) => item.draftId === draftId);
+  draftMenus.value = draftMenus.value.filter((item) => item.draftId !== draftId);
+  if (selectedItemId.value !== draftId) {
+    return;
+  }
+  const fallbackMenu = draftMenus.value[removedIndex] ?? draftMenus.value[removedIndex - 1];
+  selectedItemId.value = fallbackMenu?.draftId ?? "";
+}
+function buildDraftConfig() {
+  const result = MenuTabsConfigC.safeParse({
+    menus: draftMenus.value.map((item) => item.menu)
+  });
+  if (!result.success) {
+    return void 0;
+  }
+  return result.data;
+}
+function handleConfirm() {
+  if (selectedMenu.value && !(toEditor.value?.validate() ?? true)) {
+    return;
+  }
+  const nextConfig = buildDraftConfig();
+  if (!nextConfig) {
+    return;
+  }
+  emit("confirm", nextConfig);
+  open.value = false;
+}
+watch(() => props.config, () => {
+  if (!open.value) {
+    resetDraftConfig();
+  }
+}, { immediate: true });
+watch(draftMenus, () => {
+  syncSortableItemIds();
+}, { immediate: true });
+watch(open, async (value) => {
+  if (value) {
+    resetDraftConfig();
+    await refreshSortable();
+    return;
+  }
+  sortable.stop();
+}, { immediate: true });
+watch(menuItems, async (items) => {
+  if (!items.some((item) => item.itemId === selectedItemId.value)) {
+    selectedItemId.value = items[0]?.itemId ?? "";
+  }
+  if (open.value) {
+    await refreshSortable();
+  }
+}, { immediate: true });
+watch(filteredMenuItems, async (items) => {
+  if (!normalizedSearch.value) {
+    return;
+  }
+  if (items.some((item) => item.itemId === selectedItemId.value)) {
+    return;
+  }
+  selectedItemId.value = items[0]?.itemId ?? "";
+  await refreshSortable();
+}, { immediate: true });
+watch(normalizedSearch, async () => {
+  if (!open.value) {
+    return;
+  }
+  await refreshSortable();
+});
+</script>
+
+<template>
+  <Dialog
+    :open="open"
+    @update:open="open = $event"
+  >
+    <DialogContent
+      data-slot="menu-tabs-configurator-dialog"
+      class="flex h-[min(42rem,calc(100vh-4rem))] w-[calc(100%-2rem)] max-h-[calc(100vh-4rem)] max-w-[calc(100%-2rem)] flex-col overflow-hidden p-0 sm:w-[80vw] sm:max-w-[80vw]"
+    >
+      <DialogHeader class="gap-1 border-b border-zinc-200 px-6 py-5">
+        <DialogTitle class="text-xl font-semibold text-zinc-800">
+          {{ t("menu-tabs-configurator-title") }}
+        </DialogTitle>
+        <DialogDescription class="text-sm text-zinc-500">
+          {{ t("menu-tabs-configurator-description") }}
+        </DialogDescription>
+      </DialogHeader>
+
+      <div class="grid min-h-0 flex-1 grid-cols-[20rem_minmax(0,1fr)]">
+        <section class="flex min-h-0 flex-col border-r border-zinc-200 px-4 py-4">
+          <Input
+            v-model="search"
+            data-slot="menu-tabs-configurator-search"
+            :placeholder="t('menu-tabs-configurator-search-placeholder')"
+          />
+
+          <Button
+            data-slot="menu-tabs-configurator-add"
+            type="button"
+            class="mt-3 w-full justify-center"
+            @click="void addMenu()"
+          >
+            <Icon icon="fluent:add-20-regular" />
+            {{ t("menu-tabs-configurator-add-menu") }}
+          </Button>
+
+          <div class="mt-4 flex min-h-0 flex-1 flex-col overflow-hidden">
+            <div class="flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto pr-1">
+              <div
+                v-if="filteredMenuItems.length > 0"
+                ref="sortableListRef"
+                data-slot="menu-tabs-configurator-list"
+                class="flex flex-col gap-1"
+              >
+                <div
+                  v-for="item in filteredMenuItems"
+                  :key="item.itemId"
+                  data-slot="menu-tabs-configurator-item"
+                  :data-item-id="item.itemId"
+                  :data-menu-id="item.id"
+                  :data-selected="selectedItemId === item.itemId ? 'true' : 'false'"
+                  :class="cn(
+  'flex w-full items-center gap-2 rounded-md border p-1 transition-colors',
+  selectedItemId === item.itemId ? 'border-(--primary)/25 bg-[color-mix(in_srgb,var(--primary)_10%,white)]' : 'border-transparent hover:border-zinc-200 hover:bg-zinc-50'
+)"
+                >
+                  <button
+                    type="button"
+                    data-slot="menu-tabs-configurator-drag-handle"
+                    class="flex size-8 shrink-0 cursor-grab items-center justify-center rounded-sm text-zinc-400 active:cursor-grabbing"
+                    :aria-label="t('menu-tabs-configurator-drag-menu', { menu: item.label })"
+                    @click.stop
+                  >
+                    <Icon icon="fluent:re-order-dots-vertical-20-regular" />
+                  </button>
+
+                  <button
+                    type="button"
+                    data-slot="menu-tabs-configurator-item-select"
+                    class="min-w-0 flex-1 px-2 py-2 text-left"
+                    @click="selectItem(item.itemId)"
+                  >
+                    <span class="block truncate text-sm font-medium text-zinc-800">
+                      {{ item.label }}
+                    </span>
+                  </button>
+
+                  <button
+                    type="button"
+                    data-slot="menu-tabs-configurator-delete"
+                    class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm text-zinc-400 transition-colors hover:bg-red-50 hover:text-red-600"
+                    :aria-label="t('menu-tabs-configurator-delete-menu', { menu: item.label })"
+                    @click.stop="deleteMenu(item.itemId)"
+                  >
+                    <Icon icon="fluent:delete-20-regular" />
+                  </button>
+                </div>
+              </div>
+
+              <p
+                v-else-if="normalizedSearch"
+                data-slot="menu-tabs-configurator-empty"
+                class="px-1 pt-2 text-xs text-zinc-400"
+              >
+                {{ t("menu-tabs-configurator-no-matches") }}
+              </p>
+
+              <p
+                v-else
+                data-slot="menu-tabs-configurator-empty"
+                class="px-1 pt-2 text-xs text-zinc-400"
+              >
+                {{ t("menu-tabs-configurator-empty") }}
+              </p>
+            </div>
+          </div>
+        </section>
+
+        <section class="flex min-h-0 min-w-0 flex-col overflow-y-auto px-6 py-6">
+          <div
+            v-if="selectedMenu"
+            class="flex min-h-0 flex-1 flex-col gap-5"
+          >
+            <div>
+              <h3 class="text-lg font-semibold text-zinc-800">
+                {{ t("menu-tabs-configurator-menu-detail") }}
+              </h3>
+            </div>
+
+            <div class="flex flex-col gap-5">
+              <Locale
+                data-slot="menu-tabs-configurator-title"
+                :model-value="selectedMenu.menu.title"
+                @update:model-value="updateSelectedTitle"
+              />
+
+              <ExpressionEditor
+                ref="toEditor"
+                data-slot="menu-tabs-configurator-to"
+                :model-value="selectedMenu.menu.to"
+                :label="t('menu-tabs-configurator-to-label')"
+                :description="t('menu-tabs-configurator-to-description')"
+                :placeholder="t('menu-tabs-configurator-to-placeholder')"
+                :schema="MenuTabsItemToC"
+                @update:model-value="updateSelectedTo"
+              />
+            </div>
+          </div>
+
+          <div
+            v-else
+            data-slot="menu-tabs-configurator-detail-empty"
+            class="flex min-h-0 flex-1 items-center justify-center text-sm text-zinc-400"
+          >
+            {{ t("menu-tabs-configurator-select-menu") }}
+          </div>
+        </section>
+      </div>
+
+      <DialogFooter class="border-t border-zinc-200 px-6 py-4">
+        <Button
+          data-slot="menu-tabs-configurator-cancel"
+          type="button"
+          variant="ghost"
+          @click="open = false"
+        >
+          {{ t("cancel") }}
+        </Button>
+        <Button
+          data-slot="menu-tabs-configurator-confirm"
+          type="button"
+          @click="handleConfirm"
+        >
+          {{ t("confirm") }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<i18n lang="json">
+{
+  "zh": {
+    "menu-tabs-configurator-title": "菜单标签配置",
+    "menu-tabs-configurator-description": "配置顶部菜单标签，并使用拖拽调整顺序。",
+    "menu-tabs-configurator-menus": "菜单",
+    "menu-tabs-configurator-add-menu": "新增菜单",
+    "menu-tabs-configurator-search-placeholder": "搜索菜单名称、路径或 ID",
+    "menu-tabs-configurator-empty": "暂无菜单",
+    "menu-tabs-configurator-no-matches": "没有匹配的菜单",
+    "menu-tabs-configurator-select-menu": "请选择左侧菜单以编辑详情",
+    "menu-tabs-configurator-menu-detail": "菜单详情",
+    "menu-tabs-configurator-untitled": "未命名菜单",
+    "menu-tabs-configurator-drag-menu": "拖拽菜单 {menu}",
+    "menu-tabs-configurator-delete-menu": "删除菜单 {menu}",
+    "menu-tabs-configurator-to-label": "目标路径表达式",
+    "menu-tabs-configurator-to-description": "填写返回路径字符串的 CEL 表达式。",
+    "menu-tabs-configurator-to-placeholder": "\"/locale\"",
+    "cancel": "取消",
+    "confirm": "确认"
+  },
+  "ja": {
+    "menu-tabs-configurator-title": "メニュータブ設定",
+    "menu-tabs-configurator-description": "上部メニュータブを設定し、ドラッグで並び順を変更します。",
+    "menu-tabs-configurator-menus": "メニュー",
+    "menu-tabs-configurator-add-menu": "メニューを追加",
+    "menu-tabs-configurator-search-placeholder": "メニュー名、パス、ID を検索",
+    "menu-tabs-configurator-empty": "メニューがありません",
+    "menu-tabs-configurator-no-matches": "一致するメニューがありません",
+    "menu-tabs-configurator-select-menu": "左側のメニューを選択して詳細を編集してください",
+    "menu-tabs-configurator-menu-detail": "メニュー詳細",
+    "menu-tabs-configurator-untitled": "名称未設定メニュー",
+    "menu-tabs-configurator-drag-menu": "{menu} をドラッグ",
+    "menu-tabs-configurator-delete-menu": "{menu} を削除",
+    "menu-tabs-configurator-to-label": "遷移先パス式",
+    "menu-tabs-configurator-to-description": "パス文字列を返す CEL 式を入力してください。",
+    "menu-tabs-configurator-to-placeholder": "\"/locale\"",
+    "cancel": "キャンセル",
+    "confirm": "確認"
+  },
+  "en": {
+    "menu-tabs-configurator-title": "Menu tabs configurator",
+    "menu-tabs-configurator-description": "Configure the top menu tabs and drag to reorder them.",
+    "menu-tabs-configurator-menus": "Menus",
+    "menu-tabs-configurator-add-menu": "Add menu",
+    "menu-tabs-configurator-search-placeholder": "Search menu name, path, or ID",
+    "menu-tabs-configurator-empty": "No menus yet",
+    "menu-tabs-configurator-no-matches": "No matching menus",
+    "menu-tabs-configurator-select-menu": "Select a menu on the left to edit its details",
+    "menu-tabs-configurator-menu-detail": "Menu details",
+    "menu-tabs-configurator-untitled": "Untitled menu",
+    "menu-tabs-configurator-drag-menu": "Drag menu {menu}",
+    "menu-tabs-configurator-delete-menu": "Delete menu {menu}",
+    "menu-tabs-configurator-to-label": "Target path expression",
+    "menu-tabs-configurator-to-description": "Enter a CEL expression that returns a path string.",
+    "menu-tabs-configurator-to-placeholder": "\"/locale\"",
+    "cancel": "Cancel",
+    "confirm": "Confirm"
+  }
+}
+</i18n>

package/dist/runtime/components/ui/menu-tabs-configurator/MenuTabsConfiguratorDialog.vue.d.ts

@@ -0,0 +1,30 @@
+import type { LocaleValue } from '../../../utils/coders.js';
+import { type MenuTabsConfig } from '../menu-tabs/schema.js';
+type __VLS_Props = {
+    config: MenuTabsConfig;
+};
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    confirm: (args_0: Readonly<{
+        menus: readonly Readonly<{
+            id: string;
+            title: LocaleValue;
+            to: string;
+        }>[];
+    }>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onConfirm?: ((args_0: Readonly<{
+        menus: readonly Readonly<{
+            id: string;
+            title: LocaleValue;
+            to: string;
+        }>[];
+    }>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shwfed/nuxt",
-  "version": "0.10.10",
+  "version": "0.10.12",
   "description": "",
   "license": "MIT",
   "type": "module",