@shwfed/nuxt 0.7.9 → 0.7.11

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

@@ -0,0 +1,363 @@
+<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";
+const props = defineProps({
+  fields: { type: Array, required: true }
+});
+const emit = defineEmits(["confirm"]);
+const open = defineModel("open", { type: Boolean, ...{
+  default: false
+} });
+const { t, locale } = useI18n();
+const selectedItemId = ref("general");
+const draftFields = ref([]);
+const sortableListRef = ref(null);
+const sortableItemIds = ref([]);
+const generalItem = computed(() => ({
+  id: "general",
+  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;
+}
+const fieldItems = computed(() => draftFields.value.map((field) => ({
+  itemId: field.path,
+  label: getFieldLabel(field),
+  path: field.path
+})));
+const selectedField = computed(() => draftFields.value.find((field) => field.path === selectedItemId.value));
+const selectedItemLabel = computed(() => selectedField.value ? getFieldLabel(selectedField.value) : generalItem.value.label);
+function cloneFields(fields) {
+  return fields.slice();
+}
+function resetDraftFields() {
+  draftFields.value = cloneFields(props.fields);
+  selectedItemId.value = "general";
+}
+watch(() => props.fields, (fields) => {
+  if (!open.value) {
+    draftFields.value = cloneFields(fields);
+    selectedItemId.value = "general";
+  }
+}, { immediate: true });
+const sortable = useSortable(sortableListRef, sortableItemIds);
+function syncSortableItemIds() {
+  sortableItemIds.value = draftFields.value.map((field) => field.path);
+}
+function moveField(fields, oldIndex, newIndex) {
+  if (oldIndex < 0 || newIndex < 0 || oldIndex >= fields.length || newIndex >= fields.length) {
+    return fields.slice();
+  }
+  const nextFields = fields.slice();
+  const movedField = nextFields[oldIndex];
+  if (!movedField) {
+    return fields.slice();
+  }
+  nextFields.splice(oldIndex, 1);
+  nextFields.splice(newIndex, 0, movedField);
+  return nextFields;
+}
+function handleSortableUpdate(event) {
+  const oldIndex = event.oldIndex;
+  const newIndex = event.newIndex;
+  if (oldIndex === void 0 || newIndex === void 0 || oldIndex === newIndex) {
+    return;
+  }
+  draftFields.value = moveField(draftFields.value, oldIndex, newIndex);
+}
+function configureSortable() {
+  sortable.option("animation", 150);
+  sortable.option("handle", '[data-slot="fields-configurator-drag-handle"]');
+  sortable.option("onUpdate", handleSortableUpdate);
+}
+async function refreshSortable() {
+  sortable.stop();
+  if (!open.value || draftFields.value.length === 0) {
+    return;
+  }
+  await nextTick();
+  sortable.start();
+  configureSortable();
+}
+watch(draftFields, () => {
+  syncSortableItemIds();
+}, { immediate: true });
+watch(open, async (value) => {
+  if (value) {
+    resetDraftFields();
+    await refreshSortable();
+    return;
+  }
+  sortable.stop();
+}, { immediate: true });
+watch(fieldItems, async (items) => {
+  if (selectedItemId.value === "general") {
+    return;
+  }
+  if (!items.some((item) => item.itemId === selectedItemId.value)) {
+    selectedItemId.value = "general";
+  }
+  if (open.value) {
+    await refreshSortable();
+  }
+}, { immediate: true });
+function discardChanges() {
+  resetDraftFields();
+  open.value = false;
+}
+function handleOpenChange(value) {
+  if (value) {
+    open.value = true;
+    return;
+  }
+  discardChanges();
+}
+function selectGeneral() {
+  selectedItemId.value = "general";
+}
+function selectItem(itemId) {
+  selectedItemId.value = itemId;
+}
+function deleteField(itemId) {
+  const deleteIndex = draftFields.value.findIndex((field) => field.path === itemId);
+  if (deleteIndex < 0) {
+    return;
+  }
+  const nextFields = draftFields.value.filter((field) => field.path !== itemId);
+  draftFields.value = nextFields;
+  if (selectedItemId.value !== itemId) {
+    return;
+  }
+  const nextField = nextFields[deleteIndex] ?? nextFields[deleteIndex - 1];
+  selectedItemId.value = nextField?.path ?? "general";
+}
+function confirmChanges() {
+  emit("confirm", draftFields.value.slice());
+  open.value = false;
+}
+</script>
+
+<template>
+  <Dialog
+    :open="open"
+    @update:open="handleOpenChange"
+  >
+    <DialogContent
+      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]"
+      :show-close-button="true"
+    >
+      <DialogHeader class="gap-1 border-b border-zinc-200 px-6 py-5">
+        <DialogTitle class="text-xl font-semibold text-zinc-800">
+          {{ t("configure-fields") }}
+        </DialogTitle>
+        <DialogDescription class="text-sm text-zinc-500">
+          {{ t("configure-fields-description") }}
+        </DialogDescription>
+      </DialogHeader>
+
+      <div class="grid min-h-0 flex-1 grid-cols-[19rem_minmax(0,1fr)]">
+        <section class="flex min-h-0 flex-col border-r border-zinc-200 px-4 py-4">
+          <div class="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">
+              <button
+                type="button"
+                data-slot="fields-configurator-item"
+                data-item-id="general"
+                :data-selected="selectedItemId === 'general' ? 'true' : 'false'"
+                :class="cn(
+  'flex w-full items-center rounded-md border p-1 text-left transition-colors',
+  selectedItemId === 'general' ? 'border-(--primary)/25 bg-[color-mix(in_srgb,var(--primary)_10%,white)]' : 'border-transparent hover:border-zinc-200 hover:bg-zinc-50'
+)"
+                @click="selectGeneral"
+              >
+                <span
+                  data-slot="fields-configurator-item-label"
+                  class="truncate px-2 py-2 text-sm font-medium text-zinc-800"
+                >
+                  {{ generalItem.label }}
+                </span>
+              </button>
+
+              <div
+                v-if="fieldItems.length > 0"
+                ref="sortableListRef"
+                data-slot="fields-configurator-list"
+                class="flex flex-col gap-1"
+              >
+                <div
+                  v-for="item in fieldItems"
+                  :key="item.itemId"
+                  data-slot="fields-configurator-field-item"
+                  :data-item-id="item.itemId"
+                  :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="fields-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('drag-field', { field: item.label })"
+                    @click.stop
+                  >
+                    <Icon icon="fluent:re-order-dots-vertical-20-regular" />
+                  </button>
+
+                  <button
+                    type="button"
+                    data-slot="fields-configurator-item-select"
+                    class="min-w-0 flex-1 px-2 py-2 text-left"
+                    @click="selectItem(item.itemId)"
+                  >
+                    <span
+                      data-slot="fields-configurator-field-label"
+                      class="block truncate text-sm font-medium text-zinc-800"
+                    >
+                      {{ item.label }}
+                    </span>
+                    <span
+                      data-slot="fields-configurator-field-path"
+                      class="block truncate text-xs text-zinc-400"
+                    >
+                      {{ item.path }}
+                    </span>
+                  </button>
+
+                  <button
+                    type="button"
+                    data-slot="fields-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('delete-field', { field: item.label })"
+                    @click.stop="deleteField(item.itemId)"
+                  >
+                    <Icon icon="fluent:delete-20-regular" />
+                  </button>
+                </div>
+              </div>
+
+              <p
+                v-else
+                data-slot="fields-configurator-empty"
+                class="px-1 pt-2 text-xs text-zinc-400"
+              >
+                {{ t("no-fields") }}
+              </p>
+            </div>
+          </div>
+        </section>
+
+        <section class="flex min-h-0 flex-col overflow-y-auto px-6 py-6">
+          <h3
+            data-slot="fields-configurator-detail-title"
+            class="text-lg font-semibold text-zinc-800"
+          >
+            {{ selectedItemLabel }}
+          </h3>
+          <p
+            v-if="selectedItemId === 'general'"
+            data-slot="fields-configurator-detail-description"
+            class="mt-2 text-sm text-zinc-500"
+          >
+            {{ t("general-placeholder") }}
+          </p>
+
+          <div
+            v-if="selectedItemId === 'general'"
+            data-slot="fields-configurator-general-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"
+          >
+            {{ t("general-empty") }}
+          </div>
+
+          <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"
+          >
+            {{ t("field-placeholder", { field: selectedItemLabel }) }}
+          </div>
+        </section>
+      </div>
+
+      <DialogFooter class="border-t border-zinc-200 px-6 py-4">
+        <Button
+          type="button"
+          data-slot="fields-configurator-cancel"
+          variant="default"
+          @click="discardChanges"
+        >
+          <Icon icon="fluent:dismiss-20-regular" />
+          {{ t("cancel") }}
+        </Button>
+        <Button
+          type="button"
+          data-slot="fields-configurator-confirm"
+          variant="primary"
+          @click="confirmChanges"
+        >
+          <Icon icon="fluent:checkmark-20-regular" />
+          {{ t("confirm") }}
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<i18n lang="json">
+{
+  "zh": {
+    "configure-fields": "配置字段",
+    "configure-fields-description": "在这里浏览通用项和字段配置项。",
+    "general": "通用",
+    "general-placeholder": "这里会放置字段集合的通用配置。",
+    "general-empty": "通用配置区域预留中。",
+    "field-placeholder": "字段“{field}”的配置区域预留中。",
+    "no-fields": "还没有字段。",
+    "drag-field": "拖拽调整字段顺序：{field}",
+    "delete-field": "删除字段：{field}",
+    "cancel": "取消",
+    "confirm": "确认"
+  },
+  "ja": {
+    "configure-fields": "フィールドを設定",
+    "configure-fields-description": "共通項目とフィールド設定をここで確認できます。",
+    "general": "共通",
+    "general-placeholder": "ここにはフィールド群の共通設定を配置します。",
+    "general-empty": "共通設定エリアはまだ準備中です。",
+    "field-placeholder": "フィールド「{field}」の設定エリアはまだ準備中です。",
+    "no-fields": "フィールドがありません。",
+    "drag-field": "{field} の順序をドラッグで変更",
+    "delete-field": "{field} を削除",
+    "cancel": "キャンセル",
+    "confirm": "確認"
+  },
+  "en": {
+    "configure-fields": "Configure Fields",
+    "configure-fields-description": "Browse the shared and field-level settings here.",
+    "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.",
+    "no-fields": "No fields yet.",
+    "drag-field": "Drag to reorder field {field}",
+    "delete-field": "Delete field {field}",
+    "cancel": "Cancel",
+    "confirm": "Confirm"
+  }
+}
+</i18n>

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

@@ -0,0 +1,163 @@
+import type { Field } from '../fields/Fields.vue.js';
+type __VLS_Props = {
+    fields: ReadonlyArray<Field>;
+};
+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 ({
+        type: "string";
+        path: string;
+        title: readonly {
+            locale: "zh" | "ja" | "en" | "ko";
+            message: string;
+        }[];
+        icon?: string | undefined;
+        style?: string | undefined;
+        discardEmptyString?: boolean | undefined;
+        maxLength?: string | undefined;
+        hidden?: string | undefined;
+        disabled?: string | undefined;
+        validation?: readonly Readonly<{
+            expression: string;
+            message: string;
+        }>[] | undefined;
+    } | {
+        type: "number";
+        path: string;
+        title: readonly {
+            locale: "zh" | "ja" | "en" | "ko";
+            message: string;
+        }[];
+        icon?: string | undefined;
+        style?: string | undefined;
+        min?: string | undefined;
+        max?: string | undefined;
+        step?: string | undefined;
+        hidden?: string | undefined;
+        disabled?: string | undefined;
+        validation?: readonly Readonly<{
+            expression: string;
+            message: string;
+        }>[] | undefined;
+    } | {
+        type: "select";
+        path: string;
+        title: readonly {
+            locale: "zh" | "ja" | "en" | "ko";
+            message: string;
+        }[];
+        options: string;
+        label: string;
+        value: string;
+        key: string;
+        icon?: string | undefined;
+        style?: string | undefined;
+        hidden?: string | undefined;
+        disabled?: string | undefined;
+        validation?: readonly Readonly<{
+            expression: string;
+            message: string;
+        }>[] | undefined;
+    } | {
+        type: "calendar";
+        path: string;
+        title: readonly {
+            locale: "zh" | "ja" | "en" | "ko";
+            message: string;
+        }[];
+        mode: "year" | "month" | "date";
+        value: string;
+        icon?: string | undefined;
+        style?: string | undefined;
+        display?: string | undefined;
+        disableDate?: string | undefined;
+        hidden?: string | undefined;
+        disabled?: string | undefined;
+        validation?: readonly Readonly<{
+            expression: string;
+            message: string;
+        }>[] | undefined;
+    })[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onConfirm?: ((args_0: readonly ({
+        type: "string";
+        path: string;
+        title: readonly {
+            locale: "zh" | "ja" | "en" | "ko";
+            message: string;
+        }[];
+        icon?: string | undefined;
+        style?: string | undefined;
+        discardEmptyString?: boolean | undefined;
+        maxLength?: string | undefined;
+        hidden?: string | undefined;
+        disabled?: string | undefined;
+        validation?: readonly Readonly<{
+            expression: string;
+            message: string;
+        }>[] | undefined;
+    } | {
+        type: "number";
+        path: string;
+        title: readonly {
+            locale: "zh" | "ja" | "en" | "ko";
+            message: string;
+        }[];
+        icon?: string | undefined;
+        style?: string | undefined;
+        min?: string | undefined;
+        max?: string | undefined;
+        step?: string | undefined;
+        hidden?: string | undefined;
+        disabled?: string | undefined;
+        validation?: readonly Readonly<{
+            expression: string;
+            message: string;
+        }>[] | undefined;
+    } | {
+        type: "select";
+        path: string;
+        title: readonly {
+            locale: "zh" | "ja" | "en" | "ko";
+            message: string;
+        }[];
+        options: string;
+        label: string;
+        value: string;
+        key: string;
+        icon?: string | undefined;
+        style?: string | undefined;
+        hidden?: string | undefined;
+        disabled?: string | undefined;
+        validation?: readonly Readonly<{
+            expression: string;
+            message: string;
+        }>[] | undefined;
+    } | {
+        type: "calendar";
+        path: string;
+        title: readonly {
+            locale: "zh" | "ja" | "en" | "ko";
+            message: string;
+        }[];
+        mode: "year" | "month" | "date";
+        value: string;
+        icon?: string | undefined;
+        style?: string | undefined;
+        display?: string | undefined;
+        disableDate?: string | undefined;
+        hidden?: string | undefined;
+        disabled?: string | undefined;
+        validation?: readonly Readonly<{
+            expression: string;
+            message: string;
+        }>[] | undefined;
+    })[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    modelValue?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    class?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;