@xleddyl/nuxt-cms 0.1.11 → 0.1.13

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

@@ -2,41 +2,48 @@
    <CmsTranslatableField v-if="isTranslatableField(field)" v-model="translatable" :field="field" />
    <CmsBlocksField v-else-if="field.type === 'blocks'" v-model="blocksValue" :field="field" />
    <CmsRichTextField v-else-if="field.type === 'richtext'" v-model="strOrNull" />
-   <UTextarea
+   <CmsTextarea
       v-else-if="field.type === 'text' && field.textarea"
       v-model="str"
       :rows="4"
       size="lg"
       class="w-full"
    />
-   <UInput v-else-if="field.type === 'text'" v-model="str" size="lg" class="w-full" />
-   <UInput v-else-if="field.type === 'email'" v-model="str" type="email" size="lg" class="w-full" />
+   <CmsInput v-else-if="field.type === 'text'" v-model="str" size="lg" class="w-full" />
+   <CmsInput
+      v-else-if="field.type === 'email'"
+      v-model="str"
+      type="email"
+      size="lg"
+      class="w-full"
+   />
    <CmsSlugField v-else-if="field.type === 'slug'" v-model="strOrNull" :source="slugSource" />
-   <USelect
+   <CmsSelect
       v-else-if="field.type === 'select'"
       v-model="sel"
       :items="field.options"
+      :required="field.required"
       size="lg"
       class="w-full"
    />
-   <USwitch
+   <CmsSwitch
       v-else-if="field.type === 'boolean'"
       :model-value="!!model"
       @update:model-value="
   (v) => {
-    model = v;
+    model = !!v;
   }
 "
    />
    <CmsJsonField v-else-if="field.type === 'json'" v-model="jsonValue" />
-   <UInput
+   <CmsInput
       v-else-if="field.type === 'number'"
       v-model.number="num"
       type="number"
       size="lg"
       class="w-full"
    />
-   <UInput v-else-if="field.type === 'date'" v-model="str" type="date" size="lg" class="w-full" />
+   <CmsInput v-else-if="field.type === 'date'" v-model="str" type="date" size="lg" class="w-full" />
    <CmsRelationField
       v-else-if="field.type === 'relation'"
       v-model="relationValue"

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

@@ -0,0 +1,35 @@
+interface ParseResult {
+    success: boolean;
+    error?: {
+        issues: readonly {
+            path: readonly PropertyKey[];
+            message: string;
+        }[];
+    };
+}
+type __VLS_Props = {
+    id?: string;
+    state: Record<string, unknown>;
+    schema?: {
+        safeParse: (value: unknown) => ParseResult;
+    };
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: () => any;
+    submit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onError?: (() => any) | undefined;
+    onSubmit?: (() => 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/Form.vue

@@ -0,0 +1,42 @@
+<template>
+   <form :id="id" @submit.prevent="onSubmit">
+      <slot />
+   </form>
+</template>
+
+<script setup>
+import { provide, reactive, watch } from "#imports";
+import { CMS_FORM_ERRORS } from "../../utils/ui";
+const props = defineProps({
+  id: { type: String, required: false },
+  state: { type: Object, required: true },
+  schema: { type: Object, required: false }
+});
+const emit = defineEmits(["submit", "error"]);
+const errors = reactive({});
+provide(CMS_FORM_ERRORS, errors);
+let submitted = false;
+function validate() {
+  for (const key of Object.keys(errors)) delete errors[key];
+  if (!props.schema) return true;
+  const result = props.schema.safeParse(props.state);
+  if (result.success) return true;
+  for (const issue of result.error?.issues ?? []) {
+    const key = String(issue.path[0] ?? "");
+    if (key && !errors[key]) errors[key] = issue.message;
+  }
+  return false;
+}
+function onSubmit() {
+  submitted = true;
+  if (validate()) emit("submit");
+  else emit("error");
+}
+watch(
+  () => props.state,
+  () => {
+    if (submitted) validate();
+  },
+  { deep: true }
+);
+</script>

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

@@ -0,0 +1,35 @@
+interface ParseResult {
+    success: boolean;
+    error?: {
+        issues: readonly {
+            path: readonly PropertyKey[];
+            message: string;
+        }[];
+    };
+}
+type __VLS_Props = {
+    id?: string;
+    state: Record<string, unknown>;
+    schema?: {
+        safeParse: (value: unknown) => ParseResult;
+    };
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: () => any;
+    submit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onError?: (() => any) | undefined;
+    onSubmit?: (() => 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/FormField.d.vue.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    label?: string;
+    name?: string;
+    required?: boolean;
+    ui?: {
+        label?: string;
+    };
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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/app/components/cms/FormField.vue

@@ -0,0 +1,22 @@
+<template>
+   <div class="flex flex-col gap-1.5">
+      <label v-if="label" :class="ui?.label ?? 'text-[13px] font-medium text-(--ui-text-toned)'">
+         {{ label }}<span v-if="required" class="text-(--ui-error)"> *</span>
+      </label>
+      <slot />
+      <p v-if="error" class="text-xs text-(--ui-error)">{{ error }}</p>
+   </div>
+</template>
+
+<script setup>
+import { computed, inject } from "#imports";
+import { CMS_FORM_ERRORS } from "../../utils/ui";
+const props = defineProps({
+  label: { type: String, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const errors = inject(CMS_FORM_ERRORS, null);
+const error = computed(() => props.name && errors ? errors[props.name] : void 0);
+</script>

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

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    label?: string;
+    name?: string;
+    required?: boolean;
+    ui?: {
+        label?: string;
+    };
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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/app/components/cms/Icon.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    name: string;
+};
+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/Icon.vue

@@ -0,0 +1,18 @@
+<template>
+   <component :is="icon" v-if="icon" />
+</template>
+
+<script setup>
+import { defineAsyncComponent, shallowRef, watch } from "#imports";
+const props = defineProps({
+  name: { type: String, required: true }
+});
+const icon = shallowRef();
+watch(
+  () => props.name,
+  (name) => {
+    icon.value = name ? defineAsyncComponent(() => import(`../../../assets/svg/${name}.svg?component`)) : void 0;
+  },
+  { immediate: true }
+);
+</script>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    name: string;
+};
+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/Input.d.vue.ts

@@ -0,0 +1,28 @@
+type __VLS_Props = {
+    type?: string;
+    size?: 'sm' | 'md' | 'lg';
+    icon?: string;
+    color?: 'error';
+};
+type __VLS_ModelProps = {
+    modelValue?: string | number | null;
+    'modelModifiers'?: Partial<Record<'number', true>>;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    trailing?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | null | undefined) => 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/Input.vue

@@ -0,0 +1,43 @@
+<template>
+   <div class="cms-input-wrap" :class="[$attrs.class, { 'has-lead': icon }]">
+      <span v-if="icon" class="cms-input-lead">
+         <CmsIcon :name="icon" class="size-4" />
+      </span>
+      <input
+         v-bind="inputAttrs"
+         :type="type ?? 'text'"
+         :value="model ?? ''"
+         :class="['cms-field', `cms-field-${size ?? 'md'}`, { 'is-error': color === 'error' }]"
+         @input="onInput"
+      />
+      <span v-if="$slots.trailing" class="cms-input-trail">
+         <slot name="trailing" />
+      </span>
+   </div>
+</template>
+
+<script setup>
+import { computed, useAttrs } from "#imports";
+defineOptions({ inheritAttrs: false });
+defineProps({
+  type: { type: String, required: false },
+  size: { type: String, required: false },
+  icon: { type: String, required: false },
+  color: { type: String, required: false }
+});
+const [model, modifiers] = defineModel({ type: [String, Number, null] });
+const attrs = useAttrs();
+const inputAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrs;
+  return rest;
+});
+function onInput(event) {
+  const value = event.target.value;
+  if (modifiers.number) {
+    const parsed = Number.parseFloat(value);
+    model.value = value === "" ? null : Number.isNaN(parsed) ? value : parsed;
+  } else {
+    model.value = value;
+  }
+}
+</script>

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

@@ -0,0 +1,28 @@
+type __VLS_Props = {
+    type?: string;
+    size?: 'sm' | 'md' | 'lg';
+    icon?: string;
+    color?: 'error';
+};
+type __VLS_ModelProps = {
+    modelValue?: string | number | null;
+    'modelModifiers'?: Partial<Record<'number', true>>;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    trailing?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | null | undefined) => 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/JsonField.vue

@@ -1,6 +1,6 @@
 <template>
    <div class="flex flex-col gap-1">
-      <UTextarea
+      <CmsTextarea
          v-model="text"
          :rows="6"
          size="lg"
@@ -9,16 +9,13 @@
          @blur="commit"
          @update:model-value="invalid = false"
       />
-      <p v-if="invalid" class="text-(--ui-error) text-xs">
-         {{ t("cms.form.invalidJson") }}
-      </p>
+      <p v-if="invalid" class="text-xs text-(--ui-error)">Invalid JSON</p>
    </div>
 </template>
 
 <script setup>
-import { ref, useI18n, watch } from "#imports";
+import { ref, watch } from "#imports";
 const model = defineModel({ type: null, ...{ required: true } });
-const { t } = useI18n();
 function serialize(value) {
   return value == null ? "" : JSON.stringify(value, null, 2);
 }

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

@@ -4,7 +4,7 @@
          v-if="kind === 'image' && url"
          :src="url"
          alt=""
-         class="bg-(--cms-field) max-h-56 w-full object-cover"
+         class="max-h-56 w-full bg-(--cms-field) object-cover"
       />
       <video
          v-else-if="kind === 'video' && url"
@@ -12,48 +12,48 @@
          controls
          preload="metadata"
          playsinline
-         class="bg-(--cms-field) max-h-56 w-full"
+         class="max-h-56 w-full bg-(--cms-field)"
       />
       <div class="flex items-center gap-2.5 px-4 py-3">
-         <UIcon :name="icon" class="text-(--ui-text-dimmed) size-4 shrink-0" />
+         <CmsIcon :name="icon" class="size-4 shrink-0 text-(--ui-text-dimmed)" />
          <span class="min-w-0 flex-1 truncate text-[13px] font-medium" :title="model">{{
             mediaFilename(model)
          }}</span>
-         <UButton
-            icon="i-lucide-images"
+         <CmsButton
+            icon="photo"
             variant="ghost"
             color="neutral"
             size="xs"
             class="rounded-full"
-            :aria-label="t('cms.form.mediaChange')"
+            aria-label="Change"
             @click="openGallery"
          />
-         <UButton
-            icon="i-lucide-x"
+         <CmsButton
+            icon="x-mark"
             variant="ghost"
             color="neutral"
             size="xs"
             class="rounded-full"
-            :aria-label="t('cms.form.mediaRemove')"
+            aria-label="Remove"
             @click="clear"
          />
       </div>
    </div>
 
    <button v-else type="button" class="cms-dropzone is-dense" @click="openGallery">
-      <UIcon name="i-lucide-images" class="size-5 shrink-0" />
-      <span class="text-[13px] font-medium">{{ t("cms.form.mediaChoose") }}</span>
+      <CmsIcon name="photo" class="size-5 shrink-0" />
+      <span class="text-[13px] font-medium">Choose from the gallery</span>
    </button>
 
-   <UModal v-model:open="galleryOpen" :title="t('cms.media.title')" :ui="CMS_MODAL_UI">
+   <CmsModal v-model:open="galleryOpen" title="Media" :ui="CMS_MODAL_UI">
       <template #body>
          <CmsMediaGallery selectable :media-type="mediaType" :accept="accept" @select="onSelect" />
       </template>
-   </UModal>
+   </CmsModal>
 </template>
 
 <script setup>
-import { computed, ref, useI18n } from "#imports";
+import { computed, ref } from "#imports";
 import { mediaFilename, mediaIconFor, mediaPublicUrl, mediaTypeForKey } from "#nuxt-cms";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 import { CMS_MODAL_UI } from "../../utils/ui";
@@ -62,7 +62,6 @@ defineProps({
   accept: { type: Array, required: false }
 });
 const model = defineModel({ type: [String, null], ...{ required: true } });
-const { t } = useI18n();
 const { mediaBaseUrl } = useCmsRuntime();
 const galleryOpen = ref(false);
 function onSelect(item) {