@xleddyl/nuxt-cms 0.1.23 → 0.1.24

package/dist/runtime/app/components/cms/Modal.vue.d.ts

@@ -1,9 +1,6 @@
 type __VLS_Props = {
     title?: string;
-    ui?: {
-        content?: string;
-        title?: string;
-    };
+    size?: 'sm' | 'lg';
 };
 type __VLS_ModelProps = {
     'open'?: boolean;

package/dist/runtime/app/components/cms/PageHeader.d.vue.ts

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    kicker: string;
+    kicker?: string;
     title: string;
 };
 declare var __VLS_1: {}, __VLS_3: {};

package/dist/runtime/app/components/cms/PageHeader.vue

@@ -1,11 +1,11 @@
 <template>
-   <header class="flex items-end justify-between gap-4">
-      <div class="flex flex-col gap-2">
-         <div class="cms-kicker">
+   <header class="cms-page-header">
+      <div class="cms-page-heading">
+         <div v-if="kicker" class="cms-kicker">
             {{ kicker }}
          </div>
-         <div class="flex items-center gap-3">
-            <h1 class="cms-display text-[32px]/none font-medium text-(--ui-text-highlighted)">
+         <div class="cms-actions">
+            <h1 class="cms-title cms-title-md">
                {{ title }}
             </h1>
             <slot name="badge" />
@@ -17,7 +17,7 @@
 
 <script setup>
 defineProps({
-  kicker: { type: String, required: true },
+  kicker: { type: String, required: false },
   title: { type: String, required: true }
 });
 </script>

package/dist/runtime/app/components/cms/PageHeader.vue.d.ts

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    kicker: string;
+    kicker?: string;
     title: string;
 };
 declare var __VLS_1: {}, __VLS_3: {};

package/dist/runtime/app/components/cms/RelationField.vue

@@ -8,8 +8,6 @@
       :items="options"
       value-key="value"
       :loading="loading"
-      size="lg"
-      class="w-full"
    />
    <CmsSelectMenu
       v-else
@@ -19,8 +17,6 @@
       :items="singleItems"
       value-key="value"
       :loading="loading"
-      size="lg"
-      class="w-full"
    />
 </template>
 

package/dist/runtime/app/components/cms/SelectMenu.vue

@@ -1,6 +1,10 @@
 <template>
    <div ref="root" class="relative w-full">
-      <div class="cms-field cms-field-lg flex flex-wrap items-center gap-1" @click="focusInput">
+      <div
+         class="cms-field flex flex-wrap items-center gap-1"
+         :class="`cms-field-${size ?? 'md'}`"
+         @click="focusInput"
+      >
          <template v-if="multiple">
             <span v-for="value in modelArray" :key="value" class="cms-tag">
                {{ labelFor(value) }}
@@ -15,7 +19,7 @@
          </template>
          <input
             ref="input"
-            class="min-w-16 flex-1 bg-transparent text-(--ui-text-highlighted) outline-none"
+            class="cms-selectmenu-input"
             :value="displayValue"
             :placeholder="placeholder"
             @input="onInput"
@@ -24,8 +28,19 @@
          <CmsIcon
             v-if="loading"
             name="arrow-path"
-            class="ml-auto size-4 shrink-0 animate-spin text-(--ui-text-dimmed)"
+            class="cms-selectmenu-affix ml-auto size-4 animate-spin"
          />
+         <button
+            v-else
+            type="button"
+            tabindex="-1"
+            aria-label="Toggle options"
+            class="cms-select-chevron cms-selectmenu-affix ml-auto"
+            :class="{ 'is-open': open }"
+            @click.stop="toggleOpen"
+         >
+            <CmsIcon name="chevron-down" class="size-4" />
+         </button>
       </div>
       <div v-if="open" class="cms-selectmenu-panel">
          <button
@@ -108,6 +123,11 @@ function isSelected(value) {
 }
 function focusInput() {
   input.value?.focus();
+  open.value = true;
+}
+function toggleOpen() {
+  if (open.value) open.value = false;
+  else focusInput();
 }
 function toggle(value) {
   const next = modelArray.value.includes(value) ? modelArray.value.filter((entry) => entry !== value) : [...modelArray.value, value];

package/dist/runtime/app/components/cms/SlugField.vue

@@ -1,8 +1,7 @@
 <template>
    <CmsInput
       :model-value="model ?? ''"
-      size="lg"
-      class="w-full font-mono"
+      class="font-mono"
       @update:model-value="
   (v) => {
     model = v || null;

package/dist/runtime/app/components/cms/Spinner.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/cms/Spinner.vue

@@ -0,0 +1,5 @@
+<template>
+   <div class="cms-spinner">
+      <CmsIcon name="arrow-path" class="size-6 animate-spin" />
+   </div>
+</template>

package/dist/runtime/app/components/cms/Spinner.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/cms/StatusBadge.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    published?: boolean;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/cms/StatusBadge.vue

@@ -0,0 +1,11 @@
+<template>
+   <span class="cms-badge" :class="published ? 'is-published' : 'is-draft'">
+      {{ published ? "Published" : "Draft" }}
+   </span>
+</template>
+
+<script setup>
+defineProps({
+  published: { type: Boolean, required: false }
+});
+</script>

package/dist/runtime/app/components/cms/StatusBadge.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    published?: boolean;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/cms/Table.d.vue.ts

@@ -4,16 +4,11 @@ interface Column {
     accessorKey?: string;
     accessorFn?: (row: Row) => unknown;
     header?: string;
+    reorderable?: boolean;
 }
 type __VLS_Props = {
     data: Row[];
     columns: Column[];
-    ui?: {
-        thead?: string;
-        th?: string;
-        td?: string;
-        tr?: string;
-    };
 };
 type __VLS_ModelProps = {
     'columnVisibility'?: Record<string, boolean>;
@@ -31,11 +26,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     select: (event: Event, row: {
         original: Row;
     }) => any;
+    reorder: (from: string, to: string) => any;
     "update:columnVisibility": (value: Record<string, boolean>) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((event: Event, row: {
         original: Row;
     }) => any) | undefined;
+    onReorder?: ((from: string, to: string) => any) | undefined;
     "onUpdate:columnVisibility"?: ((value: Record<string, boolean>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/components/cms/Table.vue

@@ -1,41 +1,86 @@
 <template>
-   <table class="cms-table">
-      <thead :class="ui?.thead">
-         <tr>
-            <th v-for="column in visibleColumns" :key="columnId(column)" :class="ui?.th">
-               {{ column.header }}
-            </th>
-         </tr>
-      </thead>
-      <tbody>
-         <tr
-            v-for="(row, index) in data"
-            :key="index"
-            :class="ui?.tr"
-            @click="emit('select', $event, { original: row })"
-         >
-            <td v-for="column in visibleColumns" :key="columnId(column)" :class="ui?.td">
-               <slot :name="`${columnId(column)}-cell`" :row="{ original: row }">
-                  {{ cellValue(column, row) }}
-               </slot>
-            </td>
-         </tr>
-      </tbody>
-   </table>
+   <div class="cms-card cms-table-shell">
+      <div class="cms-table-scroll">
+         <table class="cms-table">
+            <thead>
+               <tr>
+                  <th
+                     v-for="column in visibleColumns"
+                     :key="columnId(column)"
+                     :class="{
+  'is-dragging': draggingId === columnId(column),
+  'is-drop-target': dropTargetId === columnId(column)
+}"
+                     :draggable="column.reorderable || void 0"
+                     @dragstart="onDragStart($event, column)"
+                     @dragover="onDragOver($event, column)"
+                     @dragleave="onDragLeave(column)"
+                     @drop="onDrop($event, column)"
+                     @dragend="resetDrag"
+                  >
+                     {{ column.header }}
+                  </th>
+               </tr>
+            </thead>
+            <tbody>
+               <tr
+                  v-for="(row, index) in data"
+                  :key="index"
+                  class="__clickable"
+                  @click="emit('select', $event, { original: row })"
+               >
+                  <td v-for="column in visibleColumns" :key="columnId(column)">
+                     <slot :name="`${columnId(column)}-cell`" :row="{ original: row }">
+                        {{ cellValue(column, row) }}
+                     </slot>
+                  </td>
+               </tr>
+            </tbody>
+         </table>
+      </div>
+   </div>
 </template>
 
 <script setup>
-import { computed } from "#imports";
+import { computed, ref } from "#imports";
 const props = defineProps({
   data: { type: Array, required: true },
-  columns: { type: Array, required: true },
-  ui: { type: Object, required: false }
+  columns: { type: Array, required: true }
 });
 const visibility = defineModel("columnVisibility", { type: Object, ...{ default: () => ({}) } });
-const emit = defineEmits(["select"]);
+const emit = defineEmits(["select", "reorder"]);
 function columnId(column) {
   return column.id ?? column.accessorKey ?? "";
 }
+const draggingId = ref(null);
+const dropTargetId = ref(null);
+function resetDrag() {
+  draggingId.value = null;
+  dropTargetId.value = null;
+}
+function onDragStart(event, column) {
+  if (!column.reorderable) return;
+  draggingId.value = columnId(column);
+  event.dataTransfer?.setData("text/plain", columnId(column));
+  if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+}
+function onDragOver(event, column) {
+  if (!draggingId.value || !column.reorderable) return;
+  event.preventDefault();
+  if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+  dropTargetId.value = columnId(column);
+}
+function onDragLeave(column) {
+  if (dropTargetId.value === columnId(column)) dropTargetId.value = null;
+}
+function onDrop(event, column) {
+  if (!draggingId.value || !column.reorderable) return;
+  event.preventDefault();
+  const from = draggingId.value;
+  const to = columnId(column);
+  resetDrag();
+  if (from !== to) emit("reorder", from, to);
+}
 const visibleColumns = computed(
   () => props.columns.filter((column) => visibility.value[columnId(column)] !== false)
 );

package/dist/runtime/app/components/cms/Table.vue.d.ts

@@ -4,16 +4,11 @@ interface Column {
     accessorKey?: string;
     accessorFn?: (row: Row) => unknown;
     header?: string;
+    reorderable?: boolean;
 }
 type __VLS_Props = {
     data: Row[];
     columns: Column[];
-    ui?: {
-        thead?: string;
-        th?: string;
-        td?: string;
-        tr?: string;
-    };
 };
 type __VLS_ModelProps = {
     'columnVisibility'?: Record<string, boolean>;
@@ -31,11 +26,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     select: (event: Event, row: {
         original: Row;
     }) => any;
+    reorder: (from: string, to: string) => any;
     "update:columnVisibility": (value: Record<string, boolean>) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((event: Event, row: {
         original: Row;
     }) => any) | undefined;
+    onReorder?: ((from: string, to: string) => any) | undefined;
     "onUpdate:columnVisibility"?: ((value: Record<string, boolean>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/components/cms/Toaster.vue

@@ -11,18 +11,18 @@
   'is-error': toast.color === 'error'
 }"
             >
-               <div class="flex items-start gap-3">
+               <div class="cms-toast-row">
                   <div class="min-w-0 flex-1">
-                     <p class="text-sm font-medium text-(--ui-text-highlighted)">
+                     <p class="cms-toast-title">
                         {{ toast.title }}
                      </p>
-                     <p v-if="toast.description" class="mt-0.5 text-sm text-(--ui-text-muted)">
+                     <p v-if="toast.description" class="cms-toast-description">
                         {{ toast.description }}
                      </p>
                   </div>
                   <button
                      type="button"
-                     class="shrink-0 text-(--ui-text-dimmed) hover:text-(--ui-text)"
+                     class="cms-toast-dismiss"
                      aria-label="Dismiss"
                      @click="remove(toast.id)"
                   >

package/dist/runtime/app/components/cms/TranslatableField.d.vue.ts

@@ -1,6 +1,7 @@
 import type { FieldConfig } from '#nuxt-cms';
 type __VLS_Props = {
     field: FieldConfig;
+    locale?: string;
 };
 type __VLS_ModelProps = {
     modelValue: Record<string, string> | null;

package/dist/runtime/app/components/cms/TranslatableField.vue

@@ -1,53 +1,19 @@
 <template>
-   <div class="flex flex-col gap-2">
-      <div v-if="i18n.locales.length > 1" class="flex items-center gap-1">
-         <CmsButton
-            v-for="locale in i18n.locales"
-            :key="locale"
-            size="xs"
-            :variant="active === locale ? 'soft' : 'ghost'"
-            color="neutral"
-            class="font-mono uppercase"
-            @click="
-  () => {
-    active = locale;
-  }
-"
-         >
-            {{ locale }}
-            <span
-               class="size-1.5 rounded-full"
-               :class="hasContent(locale) ? 'bg-(--cms-fern)' : 'bg-(--cms-line)'"
-            />
-         </CmsButton>
-         <span
-            v-if="props.field.required && active === i18n.defaultLocale"
-            class="ml-auto font-mono text-sm text-(--ui-text-muted)"
-         >
-            {{ i18n.defaultLocale }} *
-         </span>
-      </div>
-      <CmsRichTextField v-if="props.field.type === 'richtext'" v-model="current" />
-      <CmsTextarea
-         v-else-if="props.field.textarea"
-         v-model="current"
-         :rows="4"
-         size="lg"
-         class="w-full"
-      />
-      <CmsInput v-else v-model="current" size="lg" class="w-full" />
-   </div>
+   <CmsRichTextField v-if="props.field.type === 'richtext'" v-model="current" />
+   <CmsTextarea v-else-if="props.field.textarea" v-model="current" :rows="8" />
+   <CmsInput v-else v-model="current" />
 </template>
 
 <script setup>
-import { computed, ref } from "#imports";
+import { computed } from "#imports";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 const props = defineProps({
-  field: { type: Object, required: true }
+  field: { type: Object, required: true },
+  locale: { type: String, required: false }
 });
 const model = defineModel({ type: [Object, null], ...{ required: true } });
 const { i18n } = useCmsRuntime();
-const active = ref(i18n.defaultLocale);
+const active = computed(() => props.locale ?? i18n.defaultLocale);
 const current = computed({
   get: () => model.value?.[active.value] ?? "",
   set: (value) => {
@@ -58,7 +24,4 @@ const current = computed({
     model.value = Object.keys(next).length ? next : null;
   }
 });
-function hasContent(locale) {
-  return !!model.value?.[locale]?.trim();
-}
 </script>

package/dist/runtime/app/components/cms/TranslatableField.vue.d.ts

@@ -1,6 +1,7 @@
 import type { FieldConfig } from '#nuxt-cms';
 type __VLS_Props = {
     field: FieldConfig;
+    locale?: string;
 };
 type __VLS_ModelProps = {
     modelValue: Record<string, string> | null;

package/dist/runtime/app/layouts/cms-admin.vue

@@ -1,18 +1,12 @@
 <template>
    <div class="cms-scope cms-canvas cms-grain min-h-screen">
-      <div class="flex min-h-screen">
-         <aside
-            class="sticky top-0 flex h-screen w-64 shrink-0 flex-col gap-7 border-r border-(--cms-line) px-4 py-7"
-         >
-            <div class="px-3">
-               <div class="cms-display text-[22px] font-semibold text-(--ui-text-highlighted)">
-                  nuxt<span class="text-(--cms-fern)">·</span>cms
-               </div>
-            </div>
+      <div class="cms-shell">
+         <aside class="cms-sidebar">
+            <div class="cms-sidebar-brand">nuxt<span class="cms-accent">·</span>cms</div>
 
-            <nav class="flex flex-1 flex-col gap-6 overflow-y-auto">
-               <div v-for="group in groups" :key="group.title" class="flex flex-col gap-1">
-                  <div class="cms-kicker mb-2 px-3">
+            <nav class="cms-sidebar-nav">
+               <div v-for="group in groups" :key="group.title" class="cms-sidebar-group">
+                  <div class="cms-kicker">
                      {{ group.title }}
                   </div>
                   <NuxtLink
@@ -22,16 +16,13 @@
                      class="cms-navlink"
                      :class="{ 'is-active': route.path === link.to }"
                   >
-                     <CmsIcon
-                        :name="group.icon"
-                        class="cms-navlink-icon size-4 shrink-0 text-(--ui-text-dimmed)"
-                     />
+                     <CmsIcon :name="group.icon" class="cms-navlink-icon size-4 shrink-0" />
                      <span class="truncate">{{ link.label }}</span>
                   </NuxtLink>
                </div>
             </nav>
 
-            <div class="flex flex-col gap-3 border-t border-(--cms-line) px-3 pt-5">
+            <div class="cms-sidebar-footer">
                <CmsButton
                   label="Sign out"
                   icon="arrow-right-on-rectangle"
@@ -40,14 +31,13 @@
                   variant="ghost"
                   color="neutral"
                   size="xs"
-                  class="rounded-full"
                   @click="logout"
                />
             </div>
          </aside>
 
-         <main class="min-w-0 flex-1 px-10 py-10">
-            <div class="mx-auto w-full max-w-5xl">
+         <main class="cms-main">
+            <div class="cms-main-inner">
                <slot />
             </div>
          </main>