@shwfed/nuxt 0.10.10 → 0.10.12

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@shwfed/nuxt",
   "configKey": "shwfed",
-  "version": "0.10.10",
+  "version": "0.10.12",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

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

@@ -0,0 +1,29 @@
+import { Effect } from 'effect';
+import type { MenuTabsConfigInput } from './ui/menu-tabs/schema.js';
+export { MenuTabsConfigC, MenuTabsConfigInputC, MenuTabsItemC, MenuTabsItemToC } from './ui/menu-tabs/schema.js';
+export type { MenuTabsConfig, MenuTabsConfigInput, MenuTabsItem } from './ui/menu-tabs/schema.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    config?: MenuTabsConfigInput | 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?: MenuTabsConfigInput | 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/menu-tabs.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { Effect } from "effect";
+import UiMenuTabs from "./ui/menu-tabs/MenuTabs.vue";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  config: { type: null, required: false },
+  context: { type: Object, required: false }
+});
+const emit = defineEmits(["update:config"]);
+const defaultConfig = {
+  menus: []
+};
+function isEffectConfig(value) {
+  return typeof value === "object" && value !== null && "pipe" in value && typeof Reflect.get(value, "pipe") === "function";
+}
+function resolveConfig() {
+  if (isEffectConfig(props.config)) {
+    return props.config.pipe(Effect.map((value) => value ?? defaultConfig));
+  }
+  return Effect.succeed(props.config ?? defaultConfig);
+}
+function handleConfigUpdate(config) {
+  emit("update:config", config);
+}
+</script>
+
+<script>
+export { MenuTabsConfigC, MenuTabsConfigInputC, MenuTabsItemC, MenuTabsItemToC } from "./ui/menu-tabs/schema";
+</script>
+
+<template>
+  <UiMenuTabs
+    v-bind="$attrs"
+    :config="resolveConfig()"
+    :context="props.context"
+    @update:config="handleConfigUpdate"
+  />
+</template>

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

@@ -0,0 +1,29 @@
+import { Effect } from 'effect';
+import type { MenuTabsConfigInput } from './ui/menu-tabs/schema.js';
+export { MenuTabsConfigC, MenuTabsConfigInputC, MenuTabsItemC, MenuTabsItemToC } from './ui/menu-tabs/schema.js';
+export type { MenuTabsConfig, MenuTabsConfigInput, MenuTabsItem } from './ui/menu-tabs/schema.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    config?: MenuTabsConfigInput | 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?: MenuTabsConfigInput | 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/button-configurator/ButtonConfiguratorDialog.vue

@@ -43,7 +43,7 @@ const open = defineModel("open", { type: Boolean, ...{
 const { $toast } = useNuxtApp();
 const { t } = useI18n();
 const search = ref("");
-const draftGap = ref(props.config.gap ?? 12);
+const draftGap = ref(props.config.gap ?? 4);
 const draftStyle = ref(props.config.style);
 const selectedItemId = ref("general");
 const draftTree = ref(buildButtonConfiguratorTree(props.config.groups));
@@ -90,7 +90,6 @@ const selectedNode = computed(() => {
 const selectedGroup = computed(() => selectedNode.value?.item.type === "group" ? selectedNode.value.item : void 0);
 const selectedButton = computed(() => selectedNode.value?.item.type === "button" ? selectedNode.value.item : void 0);
 const selectedDropdown = computed(() => selectedNode.value?.item.type === "dropdown" ? selectedNode.value.item : void 0);
-const selectedNodeItemId = computed(() => selectedNode.value?.itemId ?? "");
 const selectedParentNodeId = computed(() => {
   const parentItemId = selectedNode.value?.parentItemId;
   if (!parentItemId) {
@@ -247,7 +246,7 @@ function getNodeLabel(item) {
   return getZhText(item.title) ?? t(item.type === "button" ? "untitled-button" : "untitled-dropdown");
 }
 function applyDraftConfig(config) {
-  draftGap.value = config.gap ?? 12;
+  draftGap.value = config.gap ?? 4;
   draftStyle.value = config.style;
   draftTree.value = buildButtonConfiguratorTree(config.groups);
   validationErrors.value = {};
@@ -882,18 +881,7 @@ function confirmChanges() {
             v-else-if="selectedGroup"
             data-slot="button-configurator-group"
             class="mt-6 grid gap-4"
-          >
-            <Button
-              type="button"
-              variant="ghost"
-              data-slot="button-configurator-delete-selected"
-              class="justify-start text-red-600 hover:bg-red-50 hover:text-red-700"
-              @click="deleteItem(selectedNodeItemId)"
-            >
-              <Icon icon="fluent:delete-20-regular" />
-              {{ t("delete-group") }}
-            </Button>
-          </section>
+          />
 
           <section
             v-else-if="selectedButton"
@@ -980,17 +968,6 @@ function confirmChanges() {
               />
               <span class="text-sm text-zinc-700">{{ t("button-hide-title") }}</span>
             </label>
-
-            <Button
-              type="button"
-              variant="ghost"
-              data-slot="button-configurator-delete-selected"
-              class="justify-start text-red-600 hover:bg-red-50 hover:text-red-700"
-              @click="deleteItem(selectedNodeItemId)"
-            >
-              <Icon icon="fluent:delete-20-regular" />
-              {{ t("delete-button") }}
-            </Button>
           </section>
 
           <section
@@ -1032,17 +1009,6 @@ function confirmChanges() {
                 </NativeSelectOption>
               </NativeSelect>
             </label>
-
-            <Button
-              type="button"
-              variant="ghost"
-              data-slot="button-configurator-delete-selected"
-              class="justify-start text-red-600 hover:bg-red-50 hover:text-red-700"
-              @click="deleteItem(selectedNodeItemId)"
-            >
-              <Icon icon="fluent:delete-20-regular" />
-              {{ t("delete-dropdown") }}
-            </Button>
           </section>
 
           <section
@@ -1099,43 +1065,50 @@ function confirmChanges() {
         </section>
       </div>
 
-      <DialogFooter class="border-t border-zinc-200 px-6 py-4">
-        <Button
-          type="button"
-          variant="ghost"
-          data-slot="button-configurator-copy-markdown"
-          @click="void copyMarkdown()"
-        >
-          <Icon icon="fluent:document-one-page-20-regular" />
-          {{ t("copy-markdown") }}
-        </Button>
-        <Button
-          type="button"
-          variant="ghost"
-          data-slot="button-configurator-copy-config"
-          @click="void copyConfig()"
-        >
-          <Icon icon="fluent:code-text-20-regular" />
-          {{ t("copy-config") }}
-        </Button>
-        <Button
-          type="button"
-          variant="default"
-          data-slot="button-configurator-cancel"
-          @click="open = false"
+      <DialogFooter class="border-t border-zinc-200 px-6 py-4 sm:justify-between">
+        <div
+          data-slot="button-configurator-copy-actions"
+          class="flex items-center gap-2"
         >
-          <Icon icon="fluent:dismiss-20-regular" />
-          {{ t("cancel") }}
-        </Button>
-        <Button
-          type="button"
-          variant="primary"
-          data-slot="button-configurator-confirm"
-          @click="confirmChanges"
-        >
-          <Icon icon="fluent:checkmark-20-regular" />
-          {{ t("confirm") }}
-        </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            data-slot="button-configurator-copy-markdown"
+            @click="void copyMarkdown()"
+          >
+            <Icon icon="simple-icons:markdown" />
+            {{ t("copy-markdown") }}
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            data-slot="button-configurator-copy-config"
+            @click="void copyConfig()"
+          >
+            <Icon icon="fluent:copy-20-regular" />
+            {{ t("copy-config") }}
+          </Button>
+        </div>
+        <div class="flex items-center gap-2">
+          <Button
+            type="button"
+            variant="default"
+            data-slot="button-configurator-cancel"
+            @click="open = false"
+          >
+            <Icon icon="fluent:dismiss-20-regular" />
+            {{ t("cancel") }}
+          </Button>
+          <Button
+            type="button"
+            variant="primary"
+            data-slot="button-configurator-confirm"
+            @click="confirmChanges"
+          >
+            <Icon icon="fluent:checkmark-20-regular" />
+            {{ t("confirm") }}
+          </Button>
+        </div>
       </DialogFooter>
     </DialogContent>
   </Dialog>

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

@@ -23,7 +23,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:config"]);
 const defaultConfig = {
-  gap: 12,
+  gap: 4,
   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;
@@ -80,7 +80,7 @@ function getConfigStyle(config) {
   return style;
 }
 const rootStyle = computed(() => ({
-  gap: `calc(${displayConfig.value.gap ?? defaultConfig.gap ?? 12} * 0.25rem)`,
+  gap: `calc(${displayConfig.value.gap ?? defaultConfig.gap ?? 4} * 0.25rem)`,
   ...getConfigStyle(displayConfig.value)
 }));
 function getButtonLabel(button) {

package/dist/runtime/components/ui/icon-picker/IconPicker.vue

@@ -2,14 +2,15 @@
 import { icons } from "@iconify-json/fluent";
 import { Icon } from "@iconify/vue";
 import { useVirtualizer } from "@tanstack/vue-virtual";
-import { computed, shallowRef, ref, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, shallowRef, ref, watch } from "vue";
 import { cn } from "../../../utils/cn";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "../input-group";
 defineOptions({
   inheritAttrs: false
 });
-const ICON_COLUMNS = 6;
-const ICON_ROW_HEIGHT = 60;
+const ICON_BUTTON_SIZE = 40;
+const ICON_GRID_GAP = 8;
+const ICON_GRID_MIN_COLUMN_WIDTH = 52;
 const props = defineProps({
   modelValue: { type: String, required: false },
   placeholder: { type: String, required: false },
@@ -25,6 +26,8 @@ const availableIcons = Object.entries(icons.icons).filter(([name]) => name.endsW
 const availableIconIds = new Set(availableIcons.map((icon) => icon.id));
 const searchQuery = ref("");
 const galleryElement = shallowRef(null);
+const galleryWidth = ref(0);
+let galleryResizeObserver;
 const selectedIcon = computed(() => props.modelValue && availableIconIds.has(props.modelValue) ? availableIcons.find((icon) => icon.id === props.modelValue) : void 0);
 const filteredIcons = computed(() => {
   const term = searchQuery.value.trim().toLowerCase();
@@ -33,11 +36,21 @@ const filteredIcons = computed(() => {
   }
   return availableIcons.filter((icon) => icon.id.includes(term));
 });
-const rowCount = computed(() => Math.ceil(filteredIcons.value.length / ICON_COLUMNS));
+const iconColumns = computed(() => {
+  if (galleryWidth.value <= 0) {
+    return 8;
+  }
+  return Math.max(
+    1,
+    Math.floor((galleryWidth.value + ICON_GRID_GAP) / (ICON_GRID_MIN_COLUMN_WIDTH + ICON_GRID_GAP))
+  );
+});
+const iconRowHeight = computed(() => ICON_BUTTON_SIZE + ICON_GRID_GAP);
+const rowCount = computed(() => Math.ceil(filteredIcons.value.length / iconColumns.value));
 const rowVirtualizer = useVirtualizer(computed(() => ({
   count: rowCount.value,
   getScrollElement: () => galleryElement.value,
-  estimateSize: () => ICON_ROW_HEIGHT,
+  estimateSize: () => iconRowHeight.value,
   overscan: 4
 })));
 watch(() => props.modelValue, (value) => {
@@ -45,9 +58,39 @@ watch(() => props.modelValue, (value) => {
     searchQuery.value = "";
   }
 });
+watch(galleryElement, (element) => {
+  if (galleryResizeObserver) {
+    galleryResizeObserver.disconnect();
+    galleryResizeObserver = void 0;
+  }
+  if (!element || typeof ResizeObserver === "undefined") {
+    galleryWidth.value = 0;
+    return;
+  }
+  galleryWidth.value = element.clientWidth;
+  galleryResizeObserver = new ResizeObserver((entries) => {
+    const entry = entries[0];
+    if (!entry) {
+      return;
+    }
+    galleryWidth.value = entry.contentRect.width;
+  });
+  galleryResizeObserver.observe(element);
+}, {
+  flush: "post"
+});
+onMounted(() => {
+  if (!galleryElement.value) {
+    return;
+  }
+  galleryWidth.value = galleryElement.value.clientWidth;
+});
+onBeforeUnmount(() => {
+  galleryResizeObserver?.disconnect();
+});
 function iconsForRow(index) {
-  const start = index * ICON_COLUMNS;
-  return filteredIcons.value.slice(start, start + ICON_COLUMNS);
+  const start = index * iconColumns.value;
+  return filteredIcons.value.slice(start, start + iconColumns.value);
 }
 function selectIcon(iconId) {
   if (props.disabled) {
@@ -88,26 +131,28 @@ function handleSearchUpdate(value) {
       <div
         data-slot="icon-picker-hero"
         :data-icon-id="selectedIcon.id"
-        class="relative flex size-40 items-center justify-center rounded-3xl border border-zinc-200 bg-zinc-50 text-zinc-700 shadow-xs"
+        class="relative flex size-28 items-center justify-center rounded-2xl border border-zinc-200 text-zinc-700 shadow-xs"
       >
         <button
           type="button"
           data-slot="icon-picker-clear"
-          class="absolute right-3 top-3 flex size-8 items-center justify-center rounded-full border border-zinc-200 bg-white text-zinc-500 transition-colors hover:border-red-200 hover:bg-red-50 hover:text-red-600 disabled:pointer-events-none disabled:opacity-60"
+          class="absolute right-2 top-2 flex size-7 items-center justify-center rounded-full border border-zinc-200 bg-white text-zinc-500 shadow-xs transition-colors hover:border-red-200 hover:bg-red-50 hover:text-red-600 disabled:pointer-events-none disabled:opacity-60"
           :disabled="props.disabled"
           @click="clearIcon"
         >
-          <Icon icon="fluent:dismiss-20-regular" />
+          <Icon
+            icon="fluent:dismiss-20-regular"
+            class="size-4"
+          />
         </button>
         <Icon
           :icon="selectedIcon.icon"
-          class="size-16"
+          class="size-14 shrink-0"
         />
       </div>
-
       <p
         data-slot="icon-picker-name"
-        class="font-mono text-sm text-zinc-500"
+        class="max-w-full break-all font-mono text-sm text-zinc-500"
       >
         {{ selectedIcon.id }}
       </p>
@@ -144,9 +189,10 @@ function handleSearchUpdate(value) {
           <div
             v-for="row in rowVirtualizer.getVirtualItems()"
             :key="String(row.key)"
-            class="absolute left-0 top-0 grid w-full grid-cols-6 gap-2"
+            class="absolute left-0 top-0 grid w-full gap-2"
             :style="{
   height: `${row.size}px`,
+  gridTemplateColumns: `repeat(${iconColumns}, minmax(0, 1fr))`,
   transform: `translateY(${row.start}px)`
 }"
           >
@@ -156,7 +202,7 @@ function handleSearchUpdate(value) {
               type="button"
               data-slot="icon-picker-item"
               :data-icon-id="item.id"
-              class="flex h-12 items-center justify-center rounded-lg border border-transparent bg-zinc-50 text-zinc-600 transition-colors hover:border-zinc-200 hover:bg-zinc-100 hover:text-zinc-800 disabled:pointer-events-none disabled:opacity-60"
+              class="mx-auto flex size-10 items-center justify-center rounded-md text-zinc-600 transition-colors hover:bg-zinc-100 hover:text-zinc-800 disabled:pointer-events-none disabled:opacity-60"
               :disabled="props.disabled"
               @click="selectIcon(item.id)"
             >

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