@shwfed/nuxt 0.10.10 → 0.10.12

package/dist/runtime/components/ui/menu-tabs/MenuTabs.vue

@@ -0,0 +1,275 @@
+<script setup>
+import { useNuxtApp, useRoute, useRouter } from "#app";
+import { useCheating } from "#imports";
+import { Icon } from "@iconify/vue";
+import { computedAsync } from "@vueuse/core";
+import { Effect } from "effect";
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { getLocalizedText } from "../../../utils/coders";
+import { Button } from "../button";
+import MenuTabsConfiguratorDialog from "../menu-tabs-configurator/MenuTabsConfiguratorDialog.vue";
+import { Skeleton } from "../skeleton";
+import { MenuTabsConfigC, normalizeMenuTabsConfigInput } from "./schema";
+defineOptions({
+  inheritAttrs: false
+});
+const defaultConfig = {
+  menus: []
+};
+const props = defineProps({
+  config: { type: null, required: true },
+  context: { type: Object, required: false }
+});
+const emit = defineEmits(["update:config"]);
+const { $dsl } = useNuxtApp();
+const route = useRoute();
+const router = useRouter();
+const { locale, t } = useI18n();
+const isCheating = useCheating();
+const resolvedConfig = computedAsync(
+  async () => MenuTabsConfigC.parse(normalizeMenuTabsConfigInput(await props.config.pipe(Effect.runPromise)))
+);
+const displayConfig = ref(defaultConfig);
+const isConfiguratorOpen = ref(false);
+const listRef = ref(null);
+const buttonElements = /* @__PURE__ */ new Map();
+const indicatorMetrics = ref();
+let resizeObserver;
+let observedElements = /* @__PURE__ */ new Set();
+let frameId = 0;
+function cleanPath(path) {
+  const normalizedPath = path.trim().replace(/\/+$/g, "");
+  return normalizedPath.length > 0 ? normalizedPath : "/";
+}
+function getEvaluationContext() {
+  return {
+    ...props.context ?? {},
+    context: props.context ?? {}
+  };
+}
+const resolvedMenus = computed(
+  () => displayConfig.value.menus.map((menu) => {
+    let path;
+    try {
+      const result = $dsl.evaluate`${menu.to}`(getEvaluationContext());
+      if (typeof result === "string" && result.trim().length > 0) {
+        path = cleanPath(result);
+      }
+    } catch {
+      path = void 0;
+    }
+    return {
+      id: menu.id,
+      path,
+      title: getLocalizedText(menu.title, locale.value) ?? t("untitled-menu")
+    };
+  })
+);
+const activeMenuId = computed(() => {
+  const currentPath = cleanPath(route.path);
+  return resolvedMenus.value.find((menu) => menu.path === currentPath)?.id;
+});
+const indicatorStyle = computed(() => {
+  if (!indicatorMetrics.value) {
+    return {
+      opacity: 0,
+      transform: "translateX(0px)",
+      width: "0px"
+    };
+  }
+  return {
+    opacity: 1,
+    transform: `translateX(${indicatorMetrics.value.left}px)`,
+    width: `${indicatorMetrics.value.width}px`
+  };
+});
+function setMenuButtonRef(id, value) {
+  if (value instanceof HTMLButtonElement) {
+    if (buttonElements.get(id) === value) {
+      return;
+    }
+    buttonElements.set(id, value);
+  } else {
+    if (!buttonElements.has(id)) {
+      return;
+    }
+    buttonElements.delete(id);
+  }
+  syncObservedElements();
+  void scheduleIndicator();
+}
+function updateIndicator() {
+  const activeId = activeMenuId.value;
+  const activeButton = activeId ? buttonElements.get(activeId) : void 0;
+  if (!activeButton) {
+    indicatorMetrics.value = void 0;
+    return;
+  }
+  indicatorMetrics.value = {
+    left: activeButton.offsetLeft,
+    width: activeButton.offsetWidth
+  };
+}
+async function scheduleIndicator() {
+  if (typeof window !== "undefined") {
+    cancelAnimationFrame(frameId);
+    frameId = window.requestAnimationFrame(() => {
+      updateIndicator();
+    });
+    return;
+  }
+  await nextTick();
+  updateIndicator();
+}
+function syncObservedElements() {
+  if (!resizeObserver) {
+    return;
+  }
+  const nextObservedElements = /* @__PURE__ */ new Set();
+  if (listRef.value) {
+    nextObservedElements.add(listRef.value);
+  }
+  for (const button of buttonElements.values()) {
+    nextObservedElements.add(button);
+  }
+  for (const element of observedElements) {
+    if (!nextObservedElements.has(element)) {
+      resizeObserver.unobserve(element);
+    }
+  }
+  for (const element of nextObservedElements) {
+    if (!observedElements.has(element)) {
+      resizeObserver.observe(element);
+    }
+  }
+  observedElements = nextObservedElements;
+}
+function handleConfiguratorConfirm(nextConfig) {
+  displayConfig.value = nextConfig;
+  emit("update:config", nextConfig);
+}
+function handleMenuClick(menu) {
+  if (!menu.path) {
+    return;
+  }
+  void router.replace(menu.path);
+}
+watch(resolvedConfig, (value) => {
+  if (!value) {
+    return;
+  }
+  displayConfig.value = value;
+}, { immediate: true });
+watch(() => `${route.path}|${resolvedMenus.value.map((menu) => `${menu.id}:${menu.path ?? ""}`).join("|")}`, () => {
+  void scheduleIndicator();
+}, { immediate: true });
+onMounted(() => {
+  if (typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(() => {
+      void scheduleIndicator();
+    });
+    syncObservedElements();
+  }
+  void scheduleIndicator();
+});
+onUnmounted(() => {
+  cancelAnimationFrame(frameId);
+  resizeObserver?.disconnect();
+  observedElements = /* @__PURE__ */ new Set();
+});
+</script>
+
+<script>
+export { MenuTabsConfigC, MenuTabsConfigInputC, MenuTabsItemC, MenuTabsItemToC } from "./schema";
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    data-slot="menu-tabs-root"
+    class="relative"
+  >
+    <Button
+      v-if="isCheating"
+      data-slot="menu-tabs-configurator-trigger"
+      variant="ghost"
+      size="sm"
+      type="button"
+      class="absolute right-2 top-2 z-20 bg-white/90 shadow-xs backdrop-blur-sm hover:bg-white"
+      :aria-label="t('menu-tabs-open-configurator')"
+      :title="t('menu-tabs-open-configurator')"
+      @click="isConfiguratorOpen = true"
+    >
+      <Icon icon="fluent:settings-20-regular" />
+    </Button>
+
+    <MenuTabsConfiguratorDialog
+      v-if="resolvedConfig !== void 0"
+      v-model:open="isConfiguratorOpen"
+      :config="displayConfig"
+      @confirm="handleConfiguratorConfirm"
+    />
+
+    <Skeleton
+      v-if="resolvedConfig === void 0"
+      data-slot="menu-tabs-skeleton"
+      class="absolute inset-0 z-10 h-full w-full"
+    />
+
+    <div
+      data-slot="menu-tabs-container"
+      class="overflow-x-auto"
+    >
+      <div
+        ref="listRef"
+        data-slot="menu-tabs-list"
+        class="relative flex min-w-full w-max items-stretch gap-6 border-b-2 border-zinc-200 bg-white"
+      >
+        <button
+          v-for="menu in resolvedMenus"
+          :ref="(value) => setMenuButtonRef(menu.id, value)"
+          :key="menu.id"
+          type="button"
+          data-slot="menu-tabs-item"
+          :data-menu-id="menu.id"
+          :data-active="activeMenuId === menu.id ? 'true' : void 0"
+          :data-navigable="menu.path ? 'true' : 'false'"
+          :aria-current="activeMenuId === menu.id ? 'page' : void 0"
+          :aria-disabled="menu.path ? void 0 : 'true'"
+          :class="[
+  'text-sm relative shrink-0 border-b-2 border-transparent py-2 font-semibold transition-colors duration-180',
+  activeMenuId === menu.id ? 'text-(--primary)' : 'text-zinc-700',
+  menu.path ? 'cursor-pointer hover:text-(--primary)' : 'cursor-default opacity-60'
+]"
+          @click="handleMenuClick(menu)"
+        >
+          {{ menu.title }}
+        </button>
+
+        <div
+          data-slot="menu-tabs-indicator"
+          class="pointer-events-none absolute -bottom-0.5 left-0 h-0.5 rounded bg-(--primary) transition-[transform,width,opacity] duration-200 ease-out"
+          :style="indicatorStyle"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<i18n lang="json">
+{
+  "zh": {
+    "menu-tabs-open-configurator": "打开菜单标签配置",
+    "untitled-menu": "未命名菜单"
+  },
+  "ja": {
+    "menu-tabs-open-configurator": "メニュータブ設定を開く",
+    "untitled-menu": "名称未設定メニュー"
+  },
+  "en": {
+    "menu-tabs-open-configurator": "Open menu tabs configurator",
+    "untitled-menu": "Untitled menu"
+  }
+}
+</i18n>

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

@@ -0,0 +1,29 @@
+import { Effect } from 'effect';
+import { type MenuTabsConfigInput } from './schema.js';
+export { MenuTabsConfigC, MenuTabsConfigInputC, MenuTabsItemC, MenuTabsItemToC } from './schema.js';
+export type { MenuTabsConfig, MenuTabsConfigInput, MenuTabsItem } from './schema.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    config: Effect.Effect<MenuTabsConfigInput | undefined>;
+    context?: Record<string, unknown>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:config": (args_0: Readonly<{
+        menus: readonly Readonly<{
+            id: string;
+            title: import("../../../utils/coders.js").LocaleValue;
+            to: string;
+        }>[];
+    }>) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    config: Effect.Effect<MenuTabsConfigInput | undefined>;
+    context?: Record<string, unknown>;
+}> & Readonly<{
+    "onUpdate:config"?: ((args_0: Readonly<{
+        menus: readonly Readonly<{
+            id: string;
+            title: import("../../../utils/coders.js").LocaleValue;
+            to: string;
+        }>[];
+    }>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ui/menu-tabs/schema.d.ts

@@ -0,0 +1,58 @@
+import z from 'zod';
+import type { LocaleValue } from '../../../utils/coders.js';
+export declare const MenuTabsItemToC: z.ZodString;
+export declare const MenuTabsItemC: z.ZodReadonly<z.ZodObject<{
+    id: z.ZodUUID;
+    title: z.ZodReadonly<z.ZodArray<z.ZodObject<{
+        locale: z.ZodEnum<{
+            zh: "zh";
+            ja: "ja";
+            en: "en";
+            ko: "ko";
+        }>;
+        message: z.ZodString;
+    }, z.core.$strip>>>;
+    to: z.ZodString;
+}, z.core.$strict>>;
+export declare const MenuTabsConfigC: z.ZodReadonly<z.ZodObject<{
+    menus: z.ZodReadonly<z.ZodArray<z.ZodReadonly<z.ZodObject<{
+        id: z.ZodUUID;
+        title: z.ZodReadonly<z.ZodArray<z.ZodObject<{
+            locale: z.ZodEnum<{
+                zh: "zh";
+                ja: "ja";
+                en: "en";
+                ko: "ko";
+            }>;
+            message: z.ZodString;
+        }, z.core.$strip>>>;
+        to: z.ZodString;
+    }, z.core.$strict>>>>;
+}, z.core.$strict>>;
+export declare const MenuTabsConfigInputC: z.ZodReadonly<z.ZodObject<{
+    menus: z.ZodReadonly<z.ZodArray<z.ZodReadonly<z.ZodObject<{
+        id: z.ZodUUID;
+        title: z.ZodReadonly<z.ZodArray<z.ZodObject<{
+            locale: z.ZodEnum<{
+                zh: "zh";
+                ja: "ja";
+                en: "en";
+                ko: "ko";
+            }>;
+            message: z.ZodString;
+        }, z.core.$strip>>>;
+        to: z.ZodString;
+    }, z.core.$strict>>>>;
+}, z.core.$strict>>;
+export type MenuTabsItem = Readonly<{
+    id: string;
+    title: LocaleValue;
+    to: string;
+}>;
+export type MenuTabsConfig = Readonly<{
+    menus: ReadonlyArray<MenuTabsItem>;
+}>;
+export type MenuTabsConfigInput = Readonly<{
+    menus?: ReadonlyArray<MenuTabsItem>;
+}>;
+export declare function normalizeMenuTabsConfigInput(value: unknown): unknown;

package/dist/runtime/components/ui/menu-tabs/schema.js

@@ -0,0 +1,24 @@
+import z from "zod";
+import { expressionC, localeC } from "../../../utils/coders.js";
+const menuTabsItemIdC = z.uuid().describe("\u83DC\u5355\u9879\u552F\u4E00\u6807\u8BC6\uFF0C\u5FC5\u987B\u662F UUID");
+export const MenuTabsItemToC = expressionC("string", { context: "dyn" }).describe("\u8FD4\u56DE\u76EE\u6807\u8DEF\u5F84\u7684 CEL \u8868\u8FBE\u5F0F\u3002\u53EF\u7528\u53D8\u91CF\uFF1Acontext\u3002\u5FC5\u987B\u8FD4\u56DE string\u3002");
+export const MenuTabsItemC = z.strictObject({
+  id: menuTabsItemIdC,
+  title: localeC.describe("\u83DC\u5355\u540D\u79F0\u7684\u672C\u5730\u5316\u663E\u793A\u6587\u672C"),
+  to: MenuTabsItemToC
+}).readonly();
+export const MenuTabsConfigC = z.strictObject({
+  menus: z.array(MenuTabsItemC).readonly().describe("\u9876\u90E8\u83DC\u5355\u5217\u8868")
+}).readonly();
+export const MenuTabsConfigInputC = MenuTabsConfigC;
+export function normalizeMenuTabsConfigInput(value) {
+  if (typeof value !== "object" || value === null) {
+    return {
+      menus: []
+    };
+  }
+  const menus = Reflect.get(value, "menus");
+  return {
+    menus: Array.isArray(menus) ? menus : []
+  };
+}

package/dist/runtime/components/ui/menu-tabs-configurator/MenuTabsConfiguratorDialog.d.vue.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;