@shwfed/nuxt 0.7.11 → 0.8.0

package/dist/module.json

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

package/dist/module.mjs

@@ -1,5 +1,5 @@
 import { execSync } from 'node:child_process';
-import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addImportsDir, addComponentsDir, addRouteMiddleware } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addImportsDir, addComponentsDir, addRouteMiddleware, addLayout } from '@nuxt/kit';
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
 import TailwindCSS from '@tailwindcss/vite';
 import defu from 'defu';
@@ -75,6 +75,7 @@ const module$1 = defineNuxtModule({
       name: "token",
       global: true
     });
+    addLayout(resolver.resolve("runtime/layouts/default.vue"), "default");
   },
   hooks: {
     "build:error": (error) => {

package/dist/runtime/components/ui/fields/Fields.vue

@@ -1,7 +1,7 @@
 <script>
 import { Icon } from "@iconify/vue";
 import { useNuxtApp } from "#app";
-import { ref, toRaw, useId, watchEffect } from "vue";
+import { ref, toRaw, useId, watch, watchEffect } from "vue";
 import { Field, FieldContent, FieldError, FieldLabel } from "../field";
 import { Button } from "../button";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupCombobox, InputGroupInput, InputGroupNumberField } from "../input-group";
@@ -16,7 +16,7 @@ import { Skeleton } from "../skeleton";
 import z from "zod";
 import { Effect } from "effect";
 import { computedAsync } from "@vueuse/core";
-import { localeC, dotPropC, expressionC } from "../../../utils/coders";
+import { getLocalizedText, localeC, dotPropC, expressionC } from "../../../utils/coders";
 import { CalendarDate, getLocalTimeZone } from "@internationalized/date";
 import { format, parse } from "date-fns";
 import { TZDate } from "@date-fns/tz";
@@ -102,6 +102,7 @@ const modelValue = defineModel("modelValue", { type: Object, ...{
 } });
 const isCheating = useCheating();
 const isConfiguratorOpen = ref(false);
+const displayFields = ref([]);
 const validationErrors = ref({});
 const calendarOpen = ref({});
 function toCalendarDateValue(value, valueFormat) {
@@ -159,6 +160,9 @@ function validateField(field) {
 function isFieldInvalid(field) {
   return validationErrors.value[field.path] !== void 0;
 }
+function getFieldLabel(field) {
+  return getLocalizedText(field.title, locale.value) ?? field.path;
+}
 function renderValidationMessage(field) {
   const error = validationErrors.value[field.path];
   if (!error) return "";
@@ -180,11 +184,15 @@ function handleCalendarBlur(field) {
   }, 0);
 }
 function handleConfiguratorConfirm(nextFields) {
+  displayFields.value = nextFields.slice();
   emit("update:fields", nextFields);
 }
+watch(fields, (value) => {
+  displayFields.value = (value ?? []).slice();
+}, { immediate: true });
 watchEffect(() => {
   const activePaths = /* @__PURE__ */ new Set();
-  for (const field of fields.value ?? []) {
+  for (const field of displayFields.value) {
     if (!isFieldHidden(field) && !isFieldDisabled(field)) {
       activePaths.add(field.path);
     }
@@ -224,7 +232,7 @@ watchEffect(() => {
     <FieldsConfiguratorDialog
       v-if="fields"
       v-model:open="isConfiguratorOpen"
-      :fields="fields"
+      :fields="displayFields"
       @confirm="handleConfiguratorConfirm"
     />
 
@@ -234,7 +242,7 @@ watchEffect(() => {
     />
 
     <template
-      v-for="field in fields"
+      v-for="field in displayFields"
       :key="field.path"
     >
       <Field
@@ -245,7 +253,7 @@ watchEffect(() => {
         :style="field.style ? $dsl.evaluate`${field.style}`() : {}"
       >
         <FieldLabel :for="['string', 'number'].includes(field.type) ? `${id}:${field.path}` : void 0">
-          {{ field.title.find((r) => r.locale === locale)?.message ?? field.title[0]?.message }}
+          {{ getFieldLabel(field) }}
           <span v-if="isCheating">
             <span class="font-mono">{{ field.path }}</span>
           </span>

package/dist/runtime/components/ui/fields-configurator/FieldsConfiguratorDialog.vue

@@ -4,6 +4,7 @@ import { Icon } from "@iconify/vue";
 import { computed, nextTick, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { cn } from "../../../utils/cn";
+import { getLocalizedText } from "../../../utils/coders";
 import { Button } from "../button";
 import {
   Dialog,
@@ -13,6 +14,7 @@ import {
   DialogHeader,
   DialogTitle
 } from "../dialog";
+import Locale from "../locale/Locale.vue";
 const props = defineProps({
   fields: { type: Array, required: true }
 });
@@ -30,8 +32,7 @@ const generalItem = computed(() => ({
   label: t("general")
 }));
 function getFieldLabel(field) {
-  const localizedTitle = field.title.find((item) => item.locale === locale.value && item.message.trim().length > 0);
-  return localizedTitle?.message ?? field.path;
+  return getLocalizedText(field.title, locale.value) ?? field.path;
 }
 const fieldItems = computed(() => draftFields.value.map((field) => ({
   itemId: field.path,
@@ -144,6 +145,12 @@ function deleteField(itemId) {
   const nextField = nextFields[deleteIndex] ?? nextFields[deleteIndex - 1];
   selectedItemId.value = nextField?.path ?? "general";
 }
+function updateSelectedFieldTitle(value) {
+  if (!selectedField.value) {
+    return;
+  }
+  draftFields.value = draftFields.value.map((field) => field.path === selectedField.value?.path ? { ...field, title: value } : field);
+}
 function confirmChanges() {
   emit("confirm", draftFields.value.slice());
   open.value = false;
@@ -230,12 +237,6 @@ function confirmChanges() {
                     >
                       {{ item.label }}
                     </span>
-                    <span
-                      data-slot="fields-configurator-field-path"
-                      class="block truncate text-xs text-zinc-400"
-                    >
-                      {{ item.path }}
-                    </span>
                   </button>
 
                   <button
@@ -286,10 +287,23 @@ function confirmChanges() {
 
           <div
             v-else-if="selectedField"
-            data-slot="fields-configurator-field-placeholder"
-            class="mt-6 flex min-h-48 items-center justify-center rounded-lg border border-dashed border-zinc-200 bg-zinc-50/60 px-6 text-center text-sm text-zinc-400"
+            data-slot="fields-configurator-field-main"
+            class="mt-6 flex flex-col gap-6"
           >
-            {{ t("field-placeholder", { field: selectedItemLabel }) }}
+            <section
+              data-slot="fields-configurator-field-label-section"
+              class="flex flex-col gap-2"
+            >
+              <p class="text-xs font-medium text-zinc-500">
+                {{ t("field-label") }}
+              </p>
+
+              <Locale
+                data-slot="fields-configurator-field-title-locale"
+                :model-value="selectedField.title"
+                @update:model-value="updateSelectedFieldTitle"
+              />
+            </section>
           </div>
         </section>
       </div>
@@ -326,7 +340,7 @@ function confirmChanges() {
     "general": "通用",
     "general-placeholder": "这里会放置字段集合的通用配置。",
     "general-empty": "通用配置区域预留中。",
-    "field-placeholder": "字段“{field}”的配置区域预留中。",
+    "field-label": "Label",
     "no-fields": "还没有字段。",
     "drag-field": "拖拽调整字段顺序：{field}",
     "delete-field": "删除字段：{field}",
@@ -339,7 +353,7 @@ function confirmChanges() {
     "general": "共通",
     "general-placeholder": "ここにはフィールド群の共通設定を配置します。",
     "general-empty": "共通設定エリアはまだ準備中です。",
-    "field-placeholder": "フィールド「{field}」の設定エリアはまだ準備中です。",
+    "field-label": "Label",
     "no-fields": "フィールドがありません。",
     "drag-field": "{field} の順序をドラッグで変更",
     "delete-field": "{field} を削除",
@@ -352,7 +366,7 @@ function confirmChanges() {
     "general": "General",
     "general-placeholder": "Shared settings for this field group will live here.",
     "general-empty": "The shared settings area is reserved for now.",
-    "field-placeholder": "The configuration area for \"{field}\" is reserved for now.",
+    "field-label": "Label",
     "no-fields": "No fields yet.",
     "drag-field": "Drag to reorder field {field}",
     "delete-field": "Delete field {field}",

package/dist/runtime/components/ui/table-configurator/TableConfiguratorDialog.vue

@@ -58,6 +58,7 @@ const GENERATED_COLUMN_ID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab]
 const TableConfiguratorColumnAccessorReadC = expressionC(/.+/, { row: "dyn", index: "int" });
 const TableConfiguratorColumnAccessorWriteC = z.string().trim().refine((value) => value.length > 0, { error: "\u5199\u5165\u8868\u8FBE\u5F0F\u4E0D\u80FD\u4E3A\u7A7A" });
 const TOOLTIP_EXPRESSION_EXAMPLE = "{{ expression }}";
+const TABLE_CONFIGURATOR_INITIAL_STATE_SORTABLE_GROUP = "table-configurator-initial-state";
 const props = defineProps({
   config: { type: Object, required: true }
 });
@@ -497,6 +498,9 @@ function reorderItemIds(itemIds, oldIndex, newIndex) {
   nextItemIds.splice(newIndex, 0, movedItemId);
   return nextItemIds;
 }
+function clampInsertionIndex(index, itemCount) {
+  return Math.min(Math.max(index, 0), itemCount);
+}
 function areItemIdsEqual(left, right) {
   if (left.length !== right.length) {
     return false;
@@ -642,17 +646,87 @@ function normalizeInitialStateGroups() {
   centerRootItemIds.value = centerItemIds;
   rightPinnedRootItemIds.value = rightItemIds;
 }
+function resolveInitialStateGroupByElement(element) {
+  if (!element) {
+    return void 0;
+  }
+  if (element === leftPinnedSortableListRef.value) {
+    return "left";
+  }
+  if (element === centerSortableListRef.value) {
+    return "center";
+  }
+  if (element === rightPinnedSortableListRef.value) {
+    return "right";
+  }
+  return void 0;
+}
+function getInitialStateGroupItemIds(group) {
+  if (group === "left") {
+    return leftPinnedRootItemIds.value.slice();
+  }
+  if (group === "center") {
+    return centerRootItemIds.value.slice();
+  }
+  return rightPinnedRootItemIds.value.slice();
+}
+function setInitialStateGroupItemIds(group, itemIds) {
+  if (group === "left") {
+    leftPinnedRootItemIds.value = itemIds;
+    return;
+  }
+  if (group === "center") {
+    centerRootItemIds.value = itemIds;
+    return;
+  }
+  rightPinnedRootItemIds.value = itemIds;
+}
+function reorderInitialStateGroup(group, oldIndex, newIndex) {
+  setInitialStateGroupItemIds(
+    group,
+    reorderItemIds(getInitialStateGroupItemIds(group), oldIndex, newIndex)
+  );
+}
+function canMoveInitialStateItemToGroup(itemId, group) {
+  if (group === "center") {
+    return true;
+  }
+  return rootInitialStateItems.value.some((item) => item.itemId === itemId && item.canManage);
+}
+function moveInitialStateItemBetweenGroups(fromGroup, toGroup, oldIndex, newIndex) {
+  if (fromGroup === toGroup) {
+    reorderInitialStateGroup(toGroup, oldIndex, newIndex);
+    return;
+  }
+  const sourceItemIds = getInitialStateGroupItemIds(fromGroup);
+  const targetItemIds = getInitialStateGroupItemIds(toGroup);
+  const movedItemId = sourceItemIds[oldIndex];
+  if (!movedItemId || !canMoveInitialStateItemToGroup(movedItemId, toGroup)) {
+    return;
+  }
+  const nextSourceItemIds = sourceItemIds.filter((_, index) => index !== oldIndex);
+  const nextTargetItemIds = targetItemIds.slice();
+  nextTargetItemIds.splice(clampInsertionIndex(newIndex, nextTargetItemIds.length), 0, movedItemId);
+  setInitialStateGroupItemIds(fromGroup, nextSourceItemIds);
+  setInitialStateGroupItemIds(toGroup, nextTargetItemIds);
+}
+function handleInitialStateSortableAdd(event) {
+  const oldIndex = event.oldIndex;
+  const newIndex = event.newIndex;
+  const fromGroup = resolveInitialStateGroupByElement(event.from);
+  const toGroup = resolveInitialStateGroupByElement(event.to);
+  if (selectedItemId.value !== "general" || oldIndex === void 0 || newIndex === void 0 || !fromGroup || !toGroup) {
+    return;
+  }
+  moveInitialStateItemBetweenGroups(fromGroup, toGroup, oldIndex, newIndex);
+}
 function handleLeftPinnedSortableUpdate(event) {
   const oldIndex = event.oldIndex;
   const newIndex = event.newIndex;
   if (selectedItemId.value !== "general" || oldIndex === void 0 || newIndex === void 0 || oldIndex === newIndex) {
     return;
   }
-  leftPinnedRootItemIds.value = reorderItemIds(
-    leftPinnedRootItemIds.value,
-    oldIndex,
-    newIndex
-  );
+  reorderInitialStateGroup("left", oldIndex, newIndex);
 }
 function handleCenterSortableUpdate(event) {
   const oldIndex = event.oldIndex;
@@ -660,11 +734,7 @@ function handleCenterSortableUpdate(event) {
   if (selectedItemId.value !== "general" || oldIndex === void 0 || newIndex === void 0 || oldIndex === newIndex) {
     return;
   }
-  centerRootItemIds.value = reorderItemIds(
-    centerRootItemIds.value,
-    oldIndex,
-    newIndex
-  );
+  reorderInitialStateGroup("center", oldIndex, newIndex);
 }
 function handleRightPinnedSortableUpdate(event) {
   const oldIndex = event.oldIndex;
@@ -672,11 +742,7 @@ function handleRightPinnedSortableUpdate(event) {
   if (selectedItemId.value !== "general" || oldIndex === void 0 || newIndex === void 0 || oldIndex === newIndex) {
     return;
   }
-  rightPinnedRootItemIds.value = reorderItemIds(
-    rightPinnedRootItemIds.value,
-    oldIndex,
-    newIndex
-  );
+  reorderInitialStateGroup("right", oldIndex, newIndex);
 }
 function handlePaginationPageSizesSortableUpdate(event) {
   const oldIndex = event.oldIndex;
@@ -711,18 +777,21 @@ function handleChildSortableUpdate(event) {
 }
 function configureLeftPinnedSortable() {
   leftPinnedSortable.option("animation", 150);
-  leftPinnedSortable.option("handle", '[data-slot="table-configurator-initial-state-left-drag-handle"]');
+  leftPinnedSortable.option("group", TABLE_CONFIGURATOR_INITIAL_STATE_SORTABLE_GROUP);
   leftPinnedSortable.option("onUpdate", handleLeftPinnedSortableUpdate);
+  leftPinnedSortable.option("onAdd", handleInitialStateSortableAdd);
 }
 function configureCenterSortable() {
   centerSortable.option("animation", 150);
-  centerSortable.option("handle", '[data-slot="table-configurator-initial-state-center-drag-handle"]');
+  centerSortable.option("group", TABLE_CONFIGURATOR_INITIAL_STATE_SORTABLE_GROUP);
   centerSortable.option("onUpdate", handleCenterSortableUpdate);
+  centerSortable.option("onAdd", handleInitialStateSortableAdd);
 }
 function configureRightPinnedSortable() {
   rightPinnedSortable.option("animation", 150);
-  rightPinnedSortable.option("handle", '[data-slot="table-configurator-initial-state-right-drag-handle"]');
+  rightPinnedSortable.option("group", TABLE_CONFIGURATOR_INITIAL_STATE_SORTABLE_GROUP);
   rightPinnedSortable.option("onUpdate", handleRightPinnedSortableUpdate);
+  rightPinnedSortable.option("onAdd", handleInitialStateSortableAdd);
 }
 function configurePaginationPageSizesSortable() {
   paginationPageSizesSortable.option("animation", 150);
@@ -857,21 +926,6 @@ function selectGeneral() {
 function selectItem(itemId) {
   selectedItemId.value = itemId;
 }
-function moveRootItemToGroup(itemId, group) {
-  const nextLeftItemIds = leftPinnedRootItemIds.value.filter((currentItemId) => currentItemId !== itemId);
-  const nextCenterItemIds = centerRootItemIds.value.filter((currentItemId) => currentItemId !== itemId);
-  const nextRightItemIds = rightPinnedRootItemIds.value.filter((currentItemId) => currentItemId !== itemId);
-  if (group === "left") {
-    nextLeftItemIds.push(itemId);
-  } else if (group === "center") {
-    nextCenterItemIds.push(itemId);
-  } else {
-    nextRightItemIds.push(itemId);
-  }
-  leftPinnedRootItemIds.value = nextLeftItemIds;
-  centerRootItemIds.value = nextCenterItemIds;
-  rightPinnedRootItemIds.value = nextRightItemIds;
-}
 function addColumn() {
   const nextNode = createTableConfiguratorDraftColumnNode({
     id: crypto.randomUUID()
@@ -1748,13 +1802,13 @@ function confirmChanges() {
 
             <section
               data-slot="table-configurator-pagination"
-              class="rounded-lg border border-zinc-200 p-4"
+              class="border-t border-zinc-200 pt-4"
             >
               <h4 class="text-sm font-semibold text-zinc-800">
                 {{ t("pagination") }}
               </h4>
 
-              <div class="mt-3 flex flex-col gap-4">
+              <div class="mt-4 flex flex-col gap-4">
                 <label
                   data-field-key="paginationLeft"
                   class="flex flex-col gap-1"
@@ -1874,181 +1928,134 @@ function confirmChanges() {
 
             <section
               data-slot="table-configurator-initial-state"
-              class="rounded-lg border border-zinc-200 p-4"
+              class="border-t border-zinc-200 pt-4"
             >
               <h4 class="text-sm font-semibold text-zinc-800">
                 {{ t("initial-state") }}
               </h4>
 
-              <div class="mt-3 flex flex-col gap-4">
+              <div class="mt-4 grid gap-3 xl:grid-cols-3">
                 <section
                   data-slot="table-configurator-initial-state-left"
-                  class="rounded-md border border-zinc-200/80 p-3"
+                  class="flex flex-col gap-3 rounded-md bg-zinc-50/80 px-4 py-3"
                 >
                   <p class="text-xs font-medium text-zinc-500">
                     {{ t("pinned-left-group") }}
                   </p>
 
                   <div
-                    v-if="leftPinnedInitialStateItems.length > 0"
                     ref="leftPinnedSortableListRef"
-                    class="mt-3 flex flex-col gap-1"
+                    data-slot="table-configurator-initial-state-left-list"
+                    class="mt-3 flex min-h-14 flex-col gap-1 rounded-md border border-dashed border-zinc-200/80 p-1"
                   >
                     <div
                       v-for="item in leftPinnedInitialStateItems"
                       :key="item.itemId"
                       data-slot="table-configurator-initial-state-left-item"
-                      class="flex items-center gap-2 rounded-md border border-transparent p-1"
+                      class="flex cursor-grab items-center gap-2 rounded-md border border-transparent p-1 text-left active:cursor-grabbing"
+                      :title="t('drag-initial-state-column', { column: item.label })"
                     >
-                      <button
-                        type="button"
+                      <div
                         data-slot="table-configurator-initial-state-left-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('drag-left-column', { column: item.label })"
+                        class="flex size-8 shrink-0 items-center justify-center rounded-sm text-zinc-400"
+                        aria-hidden="true"
                       >
                         <Icon icon="fluent:re-order-dots-vertical-20-regular" />
-                      </button>
+                      </div>
 
                       <span class="min-w-0 flex-1 truncate px-1 text-sm font-medium text-zinc-800">{{ item.label }}</span>
-
-                      <button
-                        v-if="item.canManage"
-                        type="button"
-                        data-slot="table-configurator-unpin-from-left"
-                        class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-700"
-                        :aria-label="t('unpin-left-column', { column: item.label })"
-                        @click="moveRootItemToGroup(item.itemId, 'center')"
-                      >
-                        <Icon icon="fluent:padding-right-20-regular" />
-                      </button>
                     </div>
-                  </div>
 
-                  <p
-                    v-else
-                    data-slot="table-configurator-initial-state-left-empty"
-                    class="mt-3 text-xs text-zinc-400"
-                  >
-                    {{ t("no-pinned-left-columns") }}
-                  </p>
+                    <p
+                      v-if="leftPinnedInitialStateItems.length === 0"
+                      data-slot="table-configurator-initial-state-left-empty"
+                      class="p-2 text-xs text-zinc-400"
+                    >
+                      {{ t("no-pinned-left-columns") }}
+                    </p>
+                  </div>
                 </section>
 
                 <section
                   data-slot="table-configurator-initial-state-center"
-                  class="rounded-md border border-zinc-200/80 p-3"
+                  class="flex flex-col gap-3 rounded-md bg-zinc-50/80 px-4 py-3"
                 >
                   <p class="text-xs font-medium text-zinc-500">
                     {{ t("pinned-center-group") }}
                   </p>
 
                   <div
-                    v-if="centerInitialStateItems.length > 0"
                     ref="centerSortableListRef"
-                    class="mt-3 flex flex-col gap-1"
+                    data-slot="table-configurator-initial-state-center-list"
+                    class="mt-3 flex min-h-14 flex-col gap-1 rounded-md border border-dashed border-zinc-200/80 p-1"
                   >
                     <div
                       v-for="item in centerInitialStateItems"
                       :key="item.itemId"
                       data-slot="table-configurator-initial-state-center-item"
-                      class="flex items-center gap-2 rounded-md border border-transparent p-1"
+                      class="flex cursor-grab items-center gap-2 rounded-md border border-transparent p-1 text-left active:cursor-grabbing"
+                      :title="t('drag-initial-state-column', { column: item.label })"
                     >
-                      <button
-                        type="button"
+                      <div
                         data-slot="table-configurator-initial-state-center-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('drag-center-column', { column: item.label })"
+                        class="flex size-8 shrink-0 items-center justify-center rounded-sm text-zinc-400"
+                        aria-hidden="true"
                       >
                         <Icon icon="fluent:re-order-dots-vertical-20-regular" />
-                      </button>
+                      </div>
 
                       <span class="min-w-0 flex-1 truncate px-1 text-sm font-medium text-zinc-800">{{ item.label }}</span>
-
-                      <div
-                        v-if="item.canManage"
-                        class="flex items-center gap-1"
-                      >
-                        <button
-                          type="button"
-                          data-slot="table-configurator-pin-left"
-                          class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-700"
-                          :aria-label="t('pin-left-column', { column: item.label })"
-                          @click="moveRootItemToGroup(item.itemId, 'left')"
-                        >
-                          <Icon icon="fluent:padding-left-20-regular" />
-                        </button>
-
-                        <button
-                          type="button"
-                          data-slot="table-configurator-pin-right"
-                          class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-700"
-                          :aria-label="t('pin-right-column', { column: item.label })"
-                          @click="moveRootItemToGroup(item.itemId, 'right')"
-                        >
-                          <Icon icon="fluent:padding-right-20-regular" />
-                        </button>
-                      </div>
                     </div>
-                  </div>
 
-                  <p
-                    v-else
-                    data-slot="table-configurator-initial-state-center-empty"
-                    class="mt-3 text-xs text-zinc-400"
-                  >
-                    {{ t("no-pinned-center-columns") }}
-                  </p>
+                    <p
+                      v-if="centerInitialStateItems.length === 0"
+                      data-slot="table-configurator-initial-state-center-empty"
+                      class="p-2 text-xs text-zinc-400"
+                    >
+                      {{ t("no-pinned-center-columns") }}
+                    </p>
+                  </div>
                 </section>
 
                 <section
                   data-slot="table-configurator-initial-state-right"
-                  class="rounded-md border border-zinc-200/80 p-3"
+                  class="flex flex-col gap-3 rounded-md bg-zinc-50/80 px-4 py-3"
                 >
                   <p class="text-xs font-medium text-zinc-500">
                     {{ t("pinned-right-group") }}
                   </p>
 
                   <div
-                    v-if="rightPinnedInitialStateItems.length > 0"
                     ref="rightPinnedSortableListRef"
-                    class="mt-3 flex flex-col gap-1"
+                    data-slot="table-configurator-initial-state-right-list"
+                    class="mt-3 flex min-h-14 flex-col gap-1 rounded-md border border-dashed border-zinc-200/80 p-1"
                   >
                     <div
                       v-for="item in rightPinnedInitialStateItems"
                       :key="item.itemId"
                       data-slot="table-configurator-initial-state-right-item"
-                      class="flex items-center gap-2 rounded-md border border-transparent p-1"
+                      class="flex cursor-grab items-center gap-2 rounded-md border border-transparent p-1 text-left active:cursor-grabbing"
+                      :title="t('drag-initial-state-column', { column: item.label })"
                     >
-                      <button
-                        type="button"
+                      <div
                         data-slot="table-configurator-initial-state-right-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('drag-right-column', { column: item.label })"
+                        class="flex size-8 shrink-0 items-center justify-center rounded-sm text-zinc-400"
+                        aria-hidden="true"
                       >
                         <Icon icon="fluent:re-order-dots-vertical-20-regular" />
-                      </button>
+                      </div>
 
                       <span class="min-w-0 flex-1 truncate px-1 text-sm font-medium text-zinc-800">{{ item.label }}</span>
-
-                      <button
-                        v-if="item.canManage"
-                        type="button"
-                        data-slot="table-configurator-unpin-from-right"
-                        class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-sm text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-700"
-                        :aria-label="t('unpin-right-column', { column: item.label })"
-                        @click="moveRootItemToGroup(item.itemId, 'center')"
-                      >
-                        <Icon icon="fluent:padding-left-20-regular" />
-                      </button>
                     </div>
-                  </div>
 
-                  <p
-                    v-else
-                    data-slot="table-configurator-initial-state-right-empty"
-                    class="mt-3 text-xs text-zinc-400"
-                  >
-                    {{ t("no-pinned-right-columns") }}
-                  </p>
+                    <p
+                      v-if="rightPinnedInitialStateItems.length === 0"
+                      data-slot="table-configurator-initial-state-right-empty"
+                      class="p-2 text-xs text-zinc-400"
+                    >
+                      {{ t("no-pinned-right-columns") }}
+                    </p>
+                  </div>
                 </section>
               </div>
             </section>
@@ -2503,13 +2510,7 @@ function confirmChanges() {
     "no-selected-children": "当前列还没有子列。",
     "no-available-columns": "没有可添加的列。",
     "add-column": "新增列",
-    "drag-left-column": "拖拽调整左侧组顺序：{column}",
-    "drag-center-column": "拖拽调整中间组顺序：{column}",
-    "drag-right-column": "拖拽调整右侧组顺序：{column}",
-    "pin-left-column": "固定到左侧组：{column}",
-    "pin-right-column": "固定到右侧组：{column}",
-    "unpin-left-column": "从左侧组释放到中间组：{column}",
-    "unpin-right-column": "从右侧组释放到中间组：{column}",
+    "drag-initial-state-column": "拖拽调整列分组和顺序：{column}",
     "drag-child-column": "拖拽调整子列顺序：{column}",
     "delete-column": "删除列：{column}",
     "remove-child-column": "移出子列：{column}",
@@ -2602,13 +2603,7 @@ function confirmChanges() {
     "no-selected-children": "この列にはまだ子列がありません。",
     "no-available-columns": "追加できる列がありません。",
     "add-column": "列を追加",
-    "drag-left-column": "{column} の左側グループ順をドラッグで変更",
-    "drag-center-column": "{column} の中央グループ順をドラッグで変更",
-    "drag-right-column": "{column} の右側グループ順をドラッグで変更",
-    "pin-left-column": "{column} を左側グループに固定",
-    "pin-right-column": "{column} を右側グループに固定",
-    "unpin-left-column": "{column} を左側グループから中央グループに戻す",
-    "unpin-right-column": "{column} を右側グループから中央グループに戻す",
+    "drag-initial-state-column": "{column} の列グループと順序をドラッグで変更",
     "drag-child-column": "{column} の子列順をドラッグで変更",
     "delete-column": "{column} を削除",
     "remove-child-column": "{column} を子列から外す",
@@ -2701,13 +2696,7 @@ function confirmChanges() {
     "no-selected-children": "This column has no child columns yet.",
     "no-available-columns": "No columns can be added here.",
     "add-column": "Add column",
-    "drag-left-column": "Drag to reorder left group column {column}",
-    "drag-center-column": "Drag to reorder center group column {column}",
-    "drag-right-column": "Drag to reorder right group column {column}",
-    "pin-left-column": "Pin {column} to the left group",
-    "pin-right-column": "Pin {column} to the right group",
-    "unpin-left-column": "Move {column} from the left group to the center group",
-    "unpin-right-column": "Move {column} from the right group to the center group",
+    "drag-initial-state-column": "Drag to move and reorder column {column}",
     "drag-child-column": "Drag to reorder child column {column}",
     "delete-column": "Delete {column}",
     "remove-child-column": "Remove child column {column}",

package/dist/runtime/layouts/default.d.vue.ts

@@ -0,0 +1,40 @@
+import type { Scope } from 'effect';
+import type { Sidebar as SidebarType } from '../composables/useNavigationTabs.js';
+type CommandEffect = import('effect').Effect.Effect<void>;
+type ProfileCommandInputItem = Readonly<{
+    id: string | number;
+    title: string;
+    icon?: string;
+    hidden?: boolean;
+    disabled?: boolean;
+    effect?: CommandEffect;
+    keywords?: Array<string>;
+}>;
+type ProfileCommandInputGroup = Readonly<{
+    id: string | number;
+    title: string;
+    icon?: string;
+    children: Array<ProfileCommandInputItem>;
+}>;
+type __VLS_Props = {
+    dsl?: import('effect').Effect.Effect<Record<string, unknown>, never, Scope.Scope>;
+    sidebar?: SidebarType;
+    commands?: Array<ProfileCommandInputItem | ProfileCommandInputGroup>;
+};
+declare var __VLS_9: {}, __VLS_12: {}, __VLS_14: {};
+type __VLS_Slots = {} & {
+    menu?: (props: typeof __VLS_9) => any;
+} & {
+    profile?: (props: typeof __VLS_12) => any;
+} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/layouts/default.vue

@@ -0,0 +1,19 @@
+<script setup>
+defineProps({
+  dsl: { type: null, required: false },
+  sidebar: { type: Array, required: false },
+  commands: { type: Array, required: false }
+});
+</script>
+
+<template>
+  <ShwfedApp v-bind="$props">
+    <template #menu>
+      <slot name="menu" />
+    </template>
+    <template #profile>
+      <slot name="profile" />
+    </template>
+    <slot />
+  </ShwfedApp>
+</template>

package/dist/runtime/layouts/default.vue.d.ts

@@ -0,0 +1,40 @@
+import type { Scope } from 'effect';
+import type { Sidebar as SidebarType } from '../composables/useNavigationTabs.js';
+type CommandEffect = import('effect').Effect.Effect<void>;
+type ProfileCommandInputItem = Readonly<{
+    id: string | number;
+    title: string;
+    icon?: string;
+    hidden?: boolean;
+    disabled?: boolean;
+    effect?: CommandEffect;
+    keywords?: Array<string>;
+}>;
+type ProfileCommandInputGroup = Readonly<{
+    id: string | number;
+    title: string;
+    icon?: string;
+    children: Array<ProfileCommandInputItem>;
+}>;
+type __VLS_Props = {
+    dsl?: import('effect').Effect.Effect<Record<string, unknown>, never, Scope.Scope>;
+    sidebar?: SidebarType;
+    commands?: Array<ProfileCommandInputItem | ProfileCommandInputGroup>;
+};
+declare var __VLS_9: {}, __VLS_12: {}, __VLS_14: {};
+type __VLS_Slots = {} & {
+    menu?: (props: typeof __VLS_9) => any;
+} & {
+    profile?: (props: typeof __VLS_12) => any;
+} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/package.json

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