@shwfed/nuxt 0.10.3 → 0.10.5

package/dist/runtime/components/ui/buttons/Buttons.vue

@@ -0,0 +1,330 @@
+<script setup>
+import { useNuxtApp } from "#app";
+import { useAttrs, computed, ref, watch } from "vue";
+import { computedAsync } from "@vueuse/core";
+import { Icon } from "@iconify/vue";
+import { Effect } from "effect";
+import { useI18n } from "vue-i18n";
+import { useCheating } from "#imports";
+import { getLocalizedText, hasVisibleLocaleValue } from "../../../utils/coders";
+import { cn } from "../../../utils/cn";
+import ButtonConfiguratorDialog from "../button-configurator/ButtonConfiguratorDialog.vue";
+import { Button } from "../button";
+import { ButtonGroup } from "../button-group";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../dropdown-menu";
+import { Skeleton } from "../skeleton";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip";
+import { ButtonConfigC, normalizeButtonConfigInput } from "./schema";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  config: { type: null, required: true }
+});
+const emit = defineEmits(["update:config"]);
+const defaultConfig = {
+  gap: 12,
+  groups: []
+};
+const uuidPattern = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/iu;
+const attrs = useAttrs();
+const { locale, t } = useI18n();
+const { $dsl } = useNuxtApp();
+const isCheating = useCheating();
+const isConfiguratorOpen = ref(false);
+const pendingIds = ref([]);
+const currentConfig = computedAsync(
+  async () => ButtonConfigC.parse(normalizeButtonConfigInput(await props.config.pipe(Effect.runPromise)))
+);
+const displayConfig = ref(defaultConfig);
+watch(currentConfig, (value) => {
+  if (value) {
+    displayConfig.value = value;
+  }
+}, { immediate: true });
+const actionIds = computed(() => displayConfig.value.groups.flatMap((group) => group.items.flatMap((item) => {
+  if ("items" in item) {
+    return item.items.map((child) => child.id);
+  }
+  return [item.id];
+})));
+const rootAttrs = computed(() => {
+  const ignoredKeys = new Set(actionIds.value);
+  const nextAttrs = {};
+  for (const [key, value] of Object.entries(attrs)) {
+    if (ignoredKeys.has(key) || key === "class" || uuidPattern.test(key)) {
+      continue;
+    }
+    Reflect.set(nextAttrs, key, value);
+  }
+  return nextAttrs;
+});
+const rootClass = computed(() => {
+  const classValue = Reflect.get(attrs, "class");
+  return typeof classValue === "string" ? classValue : void 0;
+});
+function getConfigStyle(config) {
+  const style = {};
+  if (!config.style) {
+    return style;
+  }
+  const styleMap = $dsl.evaluate`${config.style}`();
+  if (!styleMap || typeof styleMap !== "object" || Array.isArray(styleMap)) {
+    return style;
+  }
+  for (const [key, value] of Object.entries(styleMap)) {
+    if (typeof value === "string" || typeof value === "number") {
+      Reflect.set(style, key, value);
+    }
+  }
+  return style;
+}
+const rootStyle = computed(() => ({
+  gap: `calc(${displayConfig.value.gap ?? defaultConfig.gap ?? 12} * 0.25rem)`,
+  ...getConfigStyle(displayConfig.value)
+}));
+function getButtonLabel(button) {
+  return getLocalizedText(button.title, locale.value) ?? t("untitled-button");
+}
+function getDropdownLabel(dropdown) {
+  return getLocalizedText(dropdown.title, locale.value) ?? t("untitled-dropdown");
+}
+function getButtonTooltip(button) {
+  return getLocalizedText(button.tooltip, locale.value);
+}
+function getButtonEffect(buttonId) {
+  return Reflect.get(attrs, buttonId);
+}
+function isEffectValue(value) {
+  return typeof value === "object" && value !== null && "_op" in value;
+}
+function isPending(buttonId) {
+  return pendingIds.value.includes(buttonId);
+}
+function isButtonDisabled(buttonId) {
+  return isPending(buttonId) || !isEffectValue(getButtonEffect(buttonId));
+}
+function isDropdownPending(dropdown) {
+  return dropdown.items.some((item) => isPending(item.id));
+}
+function hasButtonTooltip(button) {
+  return hasVisibleLocaleValue(button.tooltip);
+}
+async function runButton(buttonId) {
+  if (isPending(buttonId)) {
+    return;
+  }
+  const effect = getButtonEffect(buttonId);
+  if (!isEffectValue(effect)) {
+    return;
+  }
+  pendingIds.value = [...pendingIds.value, buttonId];
+  try {
+    await Effect.runPromise(Effect.scoped(effect));
+  } finally {
+    pendingIds.value = pendingIds.value.filter((id) => id !== buttonId);
+  }
+}
+function handleConfiguratorConfirm(nextConfig) {
+  displayConfig.value = nextConfig;
+  emit("update:config", nextConfig);
+}
+function isDropdownItem(item) {
+  return "items" in item;
+}
+</script>
+
+<script>
+export { ButtonActionC, ButtonConfigC, ButtonConfigInputC, ButtonDropdownC, ButtonGroupC, ButtonsStyleC } from "./schema";
+</script>
+
+<template>
+  <div
+    v-bind="rootAttrs"
+    data-slot="buttons"
+    :class="cn('relative flex flex-wrap items-start', rootClass)"
+    :style="rootStyle"
+  >
+    <Button
+      v-if="isCheating"
+      data-slot="buttons-configurator-trigger"
+      variant="ghost"
+      size="sm"
+      type="button"
+      class="absolute right-0 top-0 z-20 bg-white/90 shadow-xs backdrop-blur-sm hover:bg-white"
+      @click="isConfiguratorOpen = true"
+    >
+      <Icon icon="fluent:settings-20-regular" />
+    </Button>
+
+    <ButtonConfiguratorDialog
+      v-if="currentConfig"
+      v-model:open="isConfiguratorOpen"
+      :config="displayConfig"
+      @confirm="handleConfiguratorConfirm"
+    />
+
+    <Skeleton
+      v-if="currentConfig === void 0"
+      data-slot="buttons-skeleton"
+      class="absolute inset-0 z-10 h-full w-full"
+    />
+
+    <ButtonGroup
+      v-for="group in displayConfig.groups"
+      :key="group.id"
+      data-slot="buttons-group"
+      orientation="horizontal"
+    >
+      <template
+        v-for="item in group.items"
+        :key="item.id"
+      >
+        <Button
+          v-if="!isDropdownItem(item) && !hasButtonTooltip(item)"
+          data-slot="buttons-item"
+          :variant="item.variant"
+          :disabled="isButtonDisabled(item.id)"
+          :title="item.hideTitle ? getButtonLabel(item) : void 0"
+          @click="void runButton(item.id)"
+        >
+          <Icon
+            v-if="isPending(item.id)"
+            icon="line-md:loading-twotone-loop"
+          />
+          <Icon
+            v-else-if="item.icon"
+            :icon="item.icon"
+          />
+          <span v-if="!item.hideTitle">{{ getButtonLabel(item) }}</span>
+        </Button>
+
+        <Tooltip
+          v-else-if="!isDropdownItem(item)"
+          :delay-duration="180"
+        >
+          <TooltipTrigger as-child>
+            <Button
+              data-slot="buttons-item"
+              :variant="item.variant"
+              :disabled="isButtonDisabled(item.id)"
+              :title="item.hideTitle ? getButtonLabel(item) : void 0"
+              @click="void runButton(item.id)"
+            >
+              <Icon
+                v-if="isPending(item.id)"
+                icon="line-md:loading-twotone-loop"
+              />
+              <Icon
+                v-else-if="item.icon"
+                :icon="item.icon"
+              />
+              <span v-if="!item.hideTitle">{{ getButtonLabel(item) }}</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent
+            data-slot="buttons-tooltip-content"
+            align="center"
+            side="top"
+          >
+            {{ getButtonTooltip(item) }}
+          </TooltipContent>
+        </Tooltip>
+
+        <DropdownMenu v-else>
+          <DropdownMenuTrigger as-child>
+            <Button
+              data-slot="buttons-dropdown-trigger"
+              :disabled="isDropdownPending(item)"
+            >
+              <Icon
+                v-if="isDropdownPending(item)"
+                icon="line-md:loading-twotone-loop"
+              />
+              <Icon
+                v-else-if="item.icon"
+                :icon="item.icon"
+              />
+              <span>{{ getDropdownLabel(item) }}</span>
+            </Button>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent align="start">
+            <template
+              v-for="child in item.items"
+              :key="child.id"
+            >
+              <DropdownMenuItem
+                v-if="!hasButtonTooltip(child)"
+                data-slot="buttons-dropdown-item"
+                :disabled="isButtonDisabled(child.id)"
+                @select="void runButton(child.id)"
+              >
+                <Icon
+                  v-if="isPending(child.id)"
+                  icon="line-md:loading-twotone-loop"
+                />
+                <Icon
+                  v-else-if="child.icon"
+                  :icon="child.icon"
+                />
+                <span>{{ getButtonLabel(child) }}</span>
+              </DropdownMenuItem>
+
+              <Tooltip
+                v-else
+                :delay-duration="180"
+              >
+                <TooltipTrigger as-child>
+                  <DropdownMenuItem
+                    data-slot="buttons-dropdown-item"
+                    :disabled="isButtonDisabled(child.id)"
+                    @select="void runButton(child.id)"
+                  >
+                    <Icon
+                      v-if="isPending(child.id)"
+                      icon="line-md:loading-twotone-loop"
+                    />
+                    <Icon
+                      v-else-if="child.icon"
+                      :icon="child.icon"
+                    />
+                    <span>{{ getButtonLabel(child) }}</span>
+                  </DropdownMenuItem>
+                </TooltipTrigger>
+                <TooltipContent
+                  data-slot="buttons-tooltip-content"
+                  align="center"
+                  side="top"
+                >
+                  {{ getButtonTooltip(child) }}
+                </TooltipContent>
+              </Tooltip>
+            </template>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </template>
+    </ButtonGroup>
+  </div>
+</template>
+
+<i18n lang="json">
+{
+  "zh": {
+    "untitled-button": "未命名按钮",
+    "untitled-dropdown": "未命名下拉按钮"
+  },
+  "en": {
+    "untitled-button": "Untitled button",
+    "untitled-dropdown": "Untitled dropdown"
+  },
+  "ja": {
+    "untitled-button": "未命名ボタン",
+    "untitled-dropdown": "未命名ドロップダウン"
+  },
+  "ko": {
+    "untitled-button": "이름 없는 버튼",
+    "untitled-dropdown": "이름 없는 드롭다운"
+  }
+}
+</i18n>

package/dist/runtime/components/ui/buttons/Buttons.vue.d.ts

@@ -0,0 +1,95 @@
+import { Effect } from 'effect';
+import { type ButtonConfig } from './schema.js';
+export { ButtonActionC, ButtonConfigC, ButtonConfigInputC, ButtonDropdownC, ButtonGroupC, ButtonsStyleC } from './schema.js';
+export type { ButtonAction, ButtonConfig, ButtonConfigInput, ButtonDropdown, ButtonGroup, ButtonGroupItem } from './schema.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    config: Effect.Effect<ButtonConfig | import("./schema.js").ButtonConfigInput | undefined>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:config": (args_0: Readonly<{
+        groups: readonly Readonly<{
+            id: string;
+            items: readonly (Readonly<{
+                id: string;
+                title: readonly {
+                    locale: "zh" | "ja" | "en" | "ko";
+                    message: string;
+                }[];
+                tooltip?: readonly {
+                    locale: "zh" | "ja" | "en" | "ko";
+                    message: string;
+                }[] | undefined;
+                icon?: string | undefined;
+                variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
+                hideTitle?: boolean | undefined;
+            }> | Readonly<{
+                id: string;
+                title: readonly {
+                    locale: "zh" | "ja" | "en" | "ko";
+                    message: string;
+                }[];
+                items: readonly Readonly<{
+                    id: string;
+                    title: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[];
+                    tooltip?: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[] | undefined;
+                    icon?: string | undefined;
+                    variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
+                }>[];
+                icon?: string | undefined;
+            }>)[];
+        }>[];
+        gap?: number | undefined;
+        style?: string | undefined;
+    }>) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    config: Effect.Effect<ButtonConfig | import("./schema.js").ButtonConfigInput | undefined>;
+}> & Readonly<{
+    "onUpdate:config"?: ((args_0: Readonly<{
+        groups: readonly Readonly<{
+            id: string;
+            items: readonly (Readonly<{
+                id: string;
+                title: readonly {
+                    locale: "zh" | "ja" | "en" | "ko";
+                    message: string;
+                }[];
+                tooltip?: readonly {
+                    locale: "zh" | "ja" | "en" | "ko";
+                    message: string;
+                }[] | undefined;
+                icon?: string | undefined;
+                variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
+                hideTitle?: boolean | undefined;
+            }> | Readonly<{
+                id: string;
+                title: readonly {
+                    locale: "zh" | "ja" | "en" | "ko";
+                    message: string;
+                }[];
+                items: readonly Readonly<{
+                    id: string;
+                    title: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[];
+                    tooltip?: readonly {
+                        locale: "zh" | "ja" | "en" | "ko";
+                        message: string;
+                    }[] | undefined;
+                    icon?: string | undefined;
+                    variant?: "default" | "destructive" | "primary" | "ghost" | undefined;
+                }>[];
+                icon?: string | undefined;
+            }>)[];
+        }>[];
+        gap?: number | undefined;
+        style?: string | undefined;
+    }>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;