@xleddyl/nuxt-cms 0.1.11 → 0.1.14

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

@@ -1,65 +1,65 @@
 <template>
    <div class="cms-richtext">
       <div class="cms-richtext-toolbar">
-         <UButton
+         <CmsButton
             v-for="action in actions"
             :key="action.icon"
             :icon="action.icon"
             size="xs"
             :variant="editor?.isActive(action.mark, action.attrs) ? 'soft' : 'ghost'"
             color="neutral"
-            :aria-label="t(action.label)"
-            :title="t(action.label)"
+            :aria-label="action.label"
+            :title="action.label"
             @click="action.run"
          />
-         <UPopover v-model:open="linkOpen">
-            <UButton
-               icon="i-lucide-link"
+         <CmsPopover v-model:open="linkOpen">
+            <CmsButton
+               icon="link"
                size="xs"
                :variant="editor?.isActive('link') ? 'soft' : 'ghost'"
                color="neutral"
-               :aria-label="t('cms.richtext.link')"
-               :title="t('cms.richtext.link')"
+               aria-label="Link"
+               title="Link"
             />
             <template #content>
                <div class="flex items-center gap-2 p-2">
-                  <UInput
+                  <CmsInput
                      v-model="linkUrl"
                      size="sm"
                      placeholder="https://"
                      class="w-64"
                      @keydown.enter.prevent="applyLink"
                   />
-                  <UButton size="xs" :label="t('cms.richtext.setLink')" @click="applyLink" />
-                  <UButton
+                  <CmsButton size="xs" label="Apply" @click="applyLink" />
+                  <CmsButton
                      v-if="editor?.isActive('link')"
                      size="xs"
                      variant="subtle"
                      color="error"
-                     :label="t('cms.richtext.unsetLink')"
+                     label="Remove link"
                      @click="removeLink"
                   />
                </div>
             </template>
-         </UPopover>
+         </CmsPopover>
          <span class="grow" />
-         <UButton
-            icon="i-lucide-undo-2"
+         <CmsButton
+            icon="arrow-uturn-left"
             size="xs"
             variant="ghost"
             color="neutral"
-            :aria-label="t('cms.richtext.undo')"
-            :title="t('cms.richtext.undo')"
+            aria-label="Undo"
+            title="Undo"
             :disabled="!editor?.can().undo()"
             @click="undo"
          />
-         <UButton
-            icon="i-lucide-redo-2"
+         <CmsButton
+            icon="arrow-uturn-right"
             size="xs"
             variant="ghost"
             color="neutral"
-            :aria-label="t('cms.richtext.redo')"
-            :title="t('cms.richtext.redo')"
+            aria-label="Redo"
+            title="Redo"
             :disabled="!editor?.can().redo()"
             @click="redo"
          />
@@ -71,9 +71,8 @@
 <script setup>
 import StarterKit from "@tiptap/starter-kit";
 import { EditorContent, useEditor } from "@tiptap/vue-3";
-import { ref, useI18n, watch } from "#imports";
+import { ref, watch } from "#imports";
 const model = defineModel({ type: [String, null], ...{ required: true } });
-const { t } = useI18n();
 const editor = useEditor({
   content: model.value ?? "",
   extensions: [StarterKit.configure({ link: { openOnClick: false } })],
@@ -93,67 +92,67 @@ watch(model, (value) => {
 });
 const actions = [
   {
-    icon: "i-lucide-bold",
+    icon: "bold",
     mark: "bold",
-    label: "cms.richtext.bold",
+    label: "Bold",
     run: () => {
       editor.value?.chain().focus().toggleBold().run();
     }
   },
   {
-    icon: "i-lucide-italic",
+    icon: "italic",
     mark: "italic",
-    label: "cms.richtext.italic",
+    label: "Italic",
     run: () => {
       editor.value?.chain().focus().toggleItalic().run();
     }
   },
   {
-    icon: "i-lucide-strikethrough",
+    icon: "strikethrough",
     mark: "strike",
-    label: "cms.richtext.strike",
+    label: "Strikethrough",
     run: () => {
       editor.value?.chain().focus().toggleStrike().run();
     }
   },
   {
-    icon: "i-lucide-heading-2",
+    icon: "h2",
     mark: "heading",
     attrs: { level: 2 },
-    label: "cms.richtext.h2",
+    label: "Heading 2",
     run: () => {
       editor.value?.chain().focus().toggleHeading({ level: 2 }).run();
     }
   },
   {
-    icon: "i-lucide-heading-3",
+    icon: "h3",
     mark: "heading",
     attrs: { level: 3 },
-    label: "cms.richtext.h3",
+    label: "Heading 3",
     run: () => {
       editor.value?.chain().focus().toggleHeading({ level: 3 }).run();
     }
   },
   {
-    icon: "i-lucide-list",
+    icon: "list-bullet",
     mark: "bulletList",
-    label: "cms.richtext.bulletList",
+    label: "Bullet list",
     run: () => {
       editor.value?.chain().focus().toggleBulletList().run();
     }
   },
   {
-    icon: "i-lucide-list-ordered",
+    icon: "numbered-list",
     mark: "orderedList",
-    label: "cms.richtext.orderedList",
+    label: "Numbered list",
     run: () => {
       editor.value?.chain().focus().toggleOrderedList().run();
     }
   },
   {
-    icon: "i-lucide-text-quote",
+    icon: "chat-bubble-bottom-center-text",
     mark: "blockquote",
-    label: "cms.richtext.blockquote",
+    label: "Quote",
     run: () => {
       editor.value?.chain().focus().toggleBlockquote().run();
     }

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

@@ -0,0 +1,26 @@
+type Item = Record<string, unknown> & {
+    label: string;
+};
+type __VLS_Props = {
+    items: Item[];
+    valueKey?: string;
+    multiple?: boolean;
+    ignoreFilter?: boolean;
+    loading?: boolean;
+    size?: string;
+    placeholder?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | string[] | null;
+    'searchTerm'?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[] | null | undefined) => any;
+    "update:searchTerm": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[] | null | undefined) => any) | undefined;
+    "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,139 @@
+<template>
+   <div ref="root" class="relative w-full">
+      <div class="cms-field cms-field-lg flex flex-wrap items-center gap-1" @click="focusInput">
+         <template v-if="multiple">
+            <span v-for="value in modelArray" :key="value" class="cms-tag">
+               {{ labelFor(value) }}
+               <button
+                  type="button"
+                  class="opacity-60 hover:opacity-100"
+                  @click.stop="toggle(value)"
+               >
+                  <CmsIcon name="x-mark" class="size-3" />
+               </button>
+            </span>
+         </template>
+         <input
+            ref="input"
+            class="min-w-16 flex-1 bg-transparent text-(--ui-text-highlighted) outline-none"
+            :value="displayValue"
+            :placeholder="placeholder"
+            @input="onInput"
+            @focus="onFocus"
+         />
+         <CmsIcon
+            v-if="loading"
+            name="arrow-path"
+            class="ml-auto size-4 shrink-0 animate-spin text-(--ui-text-dimmed)"
+         />
+      </div>
+      <div v-if="open" class="cms-selectmenu-panel">
+         <button
+            v-for="item in visibleItems"
+            :key="String(item[valueKey])"
+            type="button"
+            class="cms-menu-item"
+            @click="pick(item)"
+         >
+            <span class="truncate">{{ item.label }}</span>
+            <CmsIcon
+               v-if="!multiple && isSelected(item[valueKey])"
+               name="check"
+               class="cms-menu-check size-3.5"
+            />
+         </button>
+         <div v-if="!visibleItems.length" class="cms-menu-item pointer-events-none opacity-60">
+            No results
+         </div>
+      </div>
+   </div>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, ref, watch } from "#imports";
+const props = defineProps({
+  items: { type: Array, required: true },
+  valueKey: { type: String, required: false, default: "value" },
+  multiple: { type: Boolean, required: false },
+  ignoreFilter: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  size: { type: String, required: false },
+  placeholder: { type: String, required: false }
+});
+const model = defineModel({ type: [String, Array, null] });
+const search = defineModel("searchTerm", { type: String, ...{ default: "" } });
+const open = ref(false);
+const root = ref(null);
+const input = ref(null);
+const modelArray = computed(
+  () => props.multiple && Array.isArray(model.value) ? model.value : []
+);
+const selectedLabel = computed(() => {
+  if (props.multiple) return "";
+  const current = model.value;
+  return current == null ? "" : labelFor(current);
+});
+const placeholder = computed(() => {
+  if (props.multiple) return modelArray.value.length ? "" : props.placeholder ?? "";
+  return selectedLabel.value || props.placeholder || "";
+});
+const displayValue = computed(() => {
+  if (props.multiple) return search.value;
+  return open.value ? search.value : selectedLabel.value;
+});
+function onInput(event) {
+  search.value = event.target.value;
+  open.value = true;
+}
+function onFocus() {
+  if (!props.multiple) search.value = "";
+  open.value = true;
+}
+const visibleItems = computed(() => {
+  let list = props.items;
+  if (!props.ignoreFilter) {
+    const query = search.value.trim().toLowerCase();
+    if (query) list = list.filter((item) => item.label.toLowerCase().includes(query));
+  }
+  if (props.multiple) {
+    list = list.filter((item) => !modelArray.value.includes(item[props.valueKey]));
+  }
+  return list;
+});
+function labelFor(value) {
+  return props.items.find((item) => item[props.valueKey] === value)?.label ?? `#${value}`;
+}
+function isSelected(value) {
+  return props.multiple ? modelArray.value.includes(value) : model.value === value;
+}
+function focusInput() {
+  input.value?.focus();
+}
+function toggle(value) {
+  const next = modelArray.value.includes(value) ? modelArray.value.filter((entry) => entry !== value) : [...modelArray.value, value];
+  model.value = next;
+}
+function pick(item) {
+  const value = item[props.valueKey];
+  if (props.multiple) {
+    if (value != null) toggle(value);
+    search.value = "";
+    focusInput();
+  } else {
+    model.value = value;
+    search.value = "";
+    open.value = false;
+  }
+}
+function onOutside(event) {
+  if (root.value && !root.value.contains(event.target)) open.value = false;
+}
+watch(open, (value) => {
+  if (import.meta.server) return;
+  if (value) document.addEventListener("click", onOutside, true);
+  else document.removeEventListener("click", onOutside, true);
+});
+onBeforeUnmount(() => {
+  if (import.meta.client) document.removeEventListener("click", onOutside, true);
+});
+</script>

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

@@ -0,0 +1,26 @@
+type Item = Record<string, unknown> & {
+    label: string;
+};
+type __VLS_Props = {
+    items: Item[];
+    valueKey?: string;
+    multiple?: boolean;
+    ignoreFilter?: boolean;
+    loading?: boolean;
+    size?: string;
+    placeholder?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | string[] | null;
+    'searchTerm'?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[] | null | undefined) => any;
+    "update:searchTerm": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[] | null | undefined) => any) | undefined;
+    "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,5 +1,5 @@
 <template>
-   <UInput
+   <CmsInput
       :model-value="model ?? ''"
       size="lg"
       class="w-full font-mono"
@@ -11,15 +11,15 @@
 "
    >
       <template v-if="source !== void 0" #trailing>
-         <UButton
-            icon="i-lucide-refresh-cw"
+         <CmsButton
+            icon="arrow-path"
             size="xs"
             variant="ghost"
             color="neutral"
             @click="regenerate"
          />
       </template>
-   </UInput>
+   </CmsInput>
 </template>
 
 <script setup>

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

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,14 @@
+<template>
+   <button
+      type="button"
+      role="switch"
+      :aria-checked="model"
+      class="cms-switch"
+      :class="{ 'is-on': model }"
+      @click="model = !model"
+   />
+</template>
+
+<script setup>
+const model = defineModel({ type: Boolean });
+</script>

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

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, 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

@@ -0,0 +1,48 @@
+type Row = Record<string, unknown>;
+interface Column {
+    id?: string;
+    accessorKey?: string;
+    accessorFn?: (row: Row) => unknown;
+    header?: string;
+}
+type __VLS_Props = {
+    data: Row[];
+    columns: Column[];
+    ui?: {
+        thead?: string;
+        th?: string;
+        td?: string;
+        tr?: string;
+    };
+};
+type __VLS_ModelProps = {
+    'columnVisibility'?: Record<string, boolean>;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_2: `${string}-cell`, __VLS_3: {
+    row: {
+        original: Row;
+    };
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (event: Event, row: {
+        original: Row;
+    }) => any;
+    "update:columnVisibility": (value: Record<string, boolean>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((event: Event, row: {
+        original: Row;
+    }) => 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>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,47 @@
+<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>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+const props = defineProps({
+  data: { type: Array, required: true },
+  columns: { type: Array, required: true },
+  ui: { type: Object, required: false }
+});
+const visibility = defineModel("columnVisibility", { type: Object, ...{ default: () => ({}) } });
+const emit = defineEmits(["select"]);
+function columnId(column) {
+  return column.id ?? column.accessorKey ?? "";
+}
+const visibleColumns = computed(
+  () => props.columns.filter((column) => visibility.value[columnId(column)] !== false)
+);
+function cellValue(column, row) {
+  if (column.accessorFn) return column.accessorFn(row);
+  if (column.accessorKey) return row[column.accessorKey];
+  return "";
+}
+</script>

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

@@ -0,0 +1,48 @@
+type Row = Record<string, unknown>;
+interface Column {
+    id?: string;
+    accessorKey?: string;
+    accessorFn?: (row: Row) => unknown;
+    header?: string;
+}
+type __VLS_Props = {
+    data: Row[];
+    columns: Column[];
+    ui?: {
+        thead?: string;
+        th?: string;
+        td?: string;
+        tr?: string;
+    };
+};
+type __VLS_ModelProps = {
+    'columnVisibility'?: Record<string, boolean>;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_2: `${string}-cell`, __VLS_3: {
+    row: {
+        original: Row;
+    };
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (event: Event, row: {
+        original: Row;
+    }) => any;
+    "update:columnVisibility": (value: Record<string, boolean>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((event: Event, row: {
+        original: Row;
+    }) => 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>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    rows?: number;
+    size?: 'sm' | 'md' | 'lg';
+    color?: 'error';
+};
+type __VLS_ModelProps = {
+    modelValue?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,17 @@
+<template>
+   <textarea
+      :rows="rows ?? 3"
+      :value="model ?? ''"
+      :class="['cms-field', `cms-field-${size ?? 'md'}`, { 'is-error': color === 'error' }]"
+      @input="model = $event.target.value"
+   />
+</template>
+
+<script setup>
+defineProps({
+  rows: { type: Number, required: false },
+  size: { type: String, required: false },
+  color: { type: String, required: false }
+});
+const model = defineModel({ type: [String, null] });
+</script>

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    rows?: number;
+    size?: 'sm' | 'md' | 'lg';
+    color?: 'error';
+};
+type __VLS_ModelProps = {
+    modelValue?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/cms/Toaster.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;