@hywax/cms 0.0.22 → 0.0.23

package/.nuxt/cms/editor-content-full.ts

@@ -2,5 +2,12 @@ export default {
   "slots": {
     "root": "h-full w-full relative",
     "editor": "min-h-full w-full focus:outline-none editor-content-full relative"
+  },
+  "variants": {
+    "disabled": {
+      "true": {
+        "root": "cursor-not-allowed opacity-75"
+      }
+    }
   }
 }

package/.nuxt/cms/editor-content-light.ts

@@ -2,5 +2,12 @@ export default {
   "slots": {
     "root": "relative",
     "editor": "w-full focus:outline-none editor-content-light relative"
+  },
+  "variants": {
+    "disabled": {
+      "true": {
+        "root": "cursor-not-allowed opacity-75"
+      }
+    }
   }
 }

package/.nuxt/cms/input-uplora-image.ts

@@ -11,5 +11,12 @@ export default {
     "uploaderIdleExtensions": "mt-2 text-xs text-muted uppercase",
     "uploaderErrorText": "text-center font-medium",
     "uploaderErrorActions": "flex gap-2 mt-4"
+  },
+  "variants": {
+    "disabled": {
+      "true": {
+        "root": "cursor-not-allowed opacity-75"
+      }
+    }
   }
 }

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@hywax/cms",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "configKey": "cms",
   "builder": {
     "@nuxt/module-builder": "1.0.1",

package/dist/module.mjs

@@ -6,7 +6,7 @@ import { snakeCase, kebabCase } from 'scule';
 import { readFile, writeFile } from 'node:fs/promises';
 
 const name = "@hywax/cms";
-const version = "0.0.22";
+const version = "0.0.23";
 
 function createContext(options, nuxt) {
   const { resolve } = createResolver(import.meta.url);
@@ -228,6 +228,13 @@ const editorContentFull = {
   slots: {
     root: "h-full w-full relative",
     editor: "min-h-full w-full focus:outline-none editor-content-full relative"
+  },
+  variants: {
+    disabled: {
+      true: {
+        root: "cursor-not-allowed opacity-75"
+      }
+    }
   }
 };
 
@@ -235,6 +242,13 @@ const editorContentLight = {
   slots: {
     root: "relative",
     editor: "w-full focus:outline-none editor-content-light relative"
+  },
+  variants: {
+    disabled: {
+      true: {
+        root: "cursor-not-allowed opacity-75"
+      }
+    }
   }
 };
 
@@ -298,6 +312,13 @@ const inputUploraImage = {
     uploaderIdleExtensions: "mt-2 text-xs text-muted uppercase",
     uploaderErrorText: "text-center font-medium",
     uploaderErrorActions: "flex gap-2 mt-4"
+  },
+  variants: {
+    disabled: {
+      true: {
+        root: "cursor-not-allowed opacity-75"
+      }
+    }
   }
 };
 

package/dist/runtime/components/EditorContentFull.vue

@@ -1,7 +1,12 @@
 <template>
   <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ProseKit :editor="editor">
-      <div ref="editorRef" :class="ui.editor({ class: [props.ui?.editor, 'pl-14'] })" />
+      <div
+        :id="id"
+        ref="editorRef"
+        :class="ui.editor({ class: [props.ui?.editor, 'pl-14'] })"
+        v-bind="ariaAttrs"
+      />
 
       <BlockMenu />
       <SlashCommand />
@@ -12,7 +17,7 @@
 
 <script>
 import theme from "#build/cms/editor-content-full";
-import { computed, useAppConfig, useTemplateRef, watchPostEffect } from "#imports";
+import { computed, useAppConfig, useFormField, useId, useTemplateRef, watchPostEffect } from "#imports";
 import { createEditor } from "prosekit/core";
 import { ProseKit, useDocChange } from "prosekit/vue";
 import { Primitive } from "reka-ui";
@@ -27,6 +32,9 @@ import "prosekit/basic/style.css";
 
 <script setup>
 const props = defineProps({
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
   as: { type: null, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false }
@@ -38,14 +46,20 @@ const editor = createEditor({
   defaultContent: await markdownToDoc(modelValue.value)
 });
 const editorRef = useTemplateRef("editorRef");
+const { id: _id, disabled, emitFormChange, emitFormInput, ariaAttrs } = useFormField(props);
+const id = _id.value ?? useId();
 useDocChange(async () => {
   modelValue.value = await docToMarkdown(editor.getDocJSON());
+  emitFormChange();
+  emitFormInput();
 }, { editor });
 watchPostEffect((onCleanup) => {
   editor.mount(editorRef.value);
   onCleanup(() => editor.unmount());
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.editorContentFull || {} })());
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.editorContentFull || {} })({
+  disabled: disabled.value
+}));
 </script>
 
 <style scoped>

package/dist/runtime/components/EditorContentFull.vue.d.ts

@@ -4,6 +4,9 @@ import theme from '#build/cms/editor-content-full';
 import 'prosekit/basic/style.css';
 type EditorContentFull = ComponentConfig<typeof theme, AppConfig, 'editorContentFull'>;
 export interface EditorContentFullProps {
+    id?: string;
+    name?: string;
+    disabled?: boolean;
     as?: any;
     class?: any;
     ui?: EditorContentFull['slots'];

package/dist/runtime/components/EditorContentLight.vue

@@ -1,14 +1,19 @@
 <template>
   <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <ProseKit :editor="editor">
-      <div ref="editorRef" :class="ui.editor({ class: props.ui?.editor })" />
+      <div
+        :id="id"
+        ref="editorRef"
+        :class="ui.editor({ class: props.ui?.editor })"
+        v-bind="ariaAttrs"
+      />
     </ProseKit>
   </Primitive>
 </template>
 
 <script>
 import theme from "#build/cms/editor-content-light";
-import { computed, useAppConfig, useTemplateRef, watchPostEffect } from "#imports";
+import { computed, useAppConfig, useFormField, useId, useTemplateRef, watchPostEffect } from "#imports";
 import { createEditor } from "prosekit/core";
 import { ProseKit, useDocChange } from "prosekit/vue";
 import { Primitive } from "reka-ui";
@@ -20,6 +25,9 @@ import "prosekit/basic/style.css";
 
 <script setup>
 const props = defineProps({
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
   as: { type: null, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false }
@@ -31,14 +39,20 @@ const editor = createEditor({
   defaultContent: await markdownToDoc(modelValue.value)
 });
 const editorRef = useTemplateRef("editorRef");
+const { id: _id, disabled, emitFormChange, emitFormInput, ariaAttrs } = useFormField(props);
+const id = _id.value ?? useId();
 useDocChange(async () => {
   modelValue.value = await docToMarkdown(editor.getDocJSON());
+  emitFormChange();
+  emitFormInput();
 }, { editor });
 watchPostEffect((onCleanup) => {
   editor.mount(editorRef.value);
   onCleanup(() => editor.unmount());
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.editorContentLight || {} })());
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.editorContentLight || {} })({
+  disabled: disabled.value
+}));
 </script>
 
 <style scoped>

package/dist/runtime/components/EditorContentLight.vue.d.ts

@@ -4,6 +4,9 @@ import theme from '#build/cms/editor-content-light';
 import 'prosekit/basic/style.css';
 type EditorContentLight = ComponentConfig<typeof theme, AppConfig, 'editorContentLight'>;
 export interface EditorContentLightProps {
+    id?: string;
+    name?: string;
+    disabled?: boolean;
     as?: any;
     class?: any;
     ui?: EditorContentLight['slots'];

package/dist/runtime/components/InputUploraImage.vue

@@ -9,6 +9,13 @@
       />
 
       <div :class="ui.imageActions({ class: [props.ui?.imageActions] })">
+        <UBadge
+          v-if="!modelValue.alt"
+          label="Alt"
+          color="error"
+          :icon="appConfig.ui.icons.warning"
+        />
+
         <ButtonDelete
           :icon="appConfig.ui.icons.trash"
           color="neutral"
@@ -35,14 +42,16 @@
         </UPopover>
       </div>
     </template>
-    <div v-else :class="ui.uploader({ class: [props.ui?.uploader] })">
+    <div v-else :id="id" :class="ui.uploader({ class: [props.ui?.uploader] })">
       <template v-if="uploadStatus === 'pending'">
         <UIcon :name="appConfig.ui.icons.loading" :class="ui.uploaderPendingIcon({ class: [props.ui?.uploaderPendingIcon] })" />
       </template>
       <template v-else-if="uploadStatus === 'idle'">
         <button
-          :class="ui.uploaderIdleButton({ class: [props.ui?.uploaderIdleButton] })"
           type="button"
+          :class="ui.uploaderIdleButton({ class: [props.ui?.uploaderIdleButton] })"
+          :disabled="disabled"
+          v-bind="ariaAttrs"
           @click="open"
         >
           <UIcon :name="appConfig.ui.icons.imageUp" :class="ui.uploaderIdleIcon({ class: [props.ui?.uploaderIdleIcon] })" />
@@ -79,7 +88,7 @@
 
 <script>
 import theme from "#build/cms/input-uplora-image";
-import { computed, reactive, useAppConfig } from "#imports";
+import { computed, reactive, useAppConfig, useFormField, useId } from "#imports";
 import { imagesExtensions } from "@uplora/formats";
 import { Primitive } from "reka-ui";
 import { useUploraDelete, useUploraUpload } from "../composables/useUplora";
@@ -91,6 +100,9 @@ import UploraImage from "./UploraImage.vue";
 <script setup>
 const props = defineProps({
   showExtensions: { type: Boolean, required: false, default: true },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
   as: { type: null, required: false },
   class: { type: null, required: false },
   ui: { type: null, required: false }
@@ -106,6 +118,8 @@ const appConfig = useAppConfig();
 const state = reactive({
   alt: modelValue.value.alt
 });
+const { id: _id, disabled, emitFormChange, emitFormInput, ariaAttrs } = useFormField(props);
+const id = _id.value ?? useId();
 const { open, execute: uploadExecute, status: uploadStatus, reset: resetUpload, onUploaded } = useUploraUpload({
   accept: "image/*"
 });
@@ -117,6 +131,8 @@ onUploaded((file) => {
     lqip: file.lqip
   };
   emit("upload", modelValue.value);
+  emitFormChange();
+  emitFormInput();
 });
 onDeleted(() => {
   resetUpload();
@@ -125,6 +141,8 @@ onDeleted(() => {
     alt: ""
   };
   emit("delete");
+  emitFormChange();
+  emitFormInput();
 });
 function syncState() {
   modelValue.value = {
@@ -132,5 +150,7 @@ function syncState() {
     alt: state.alt
   };
 }
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.inputUploraImage || {} })());
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.inputUploraImage || {} })({
+  disabled: disabled.value
+}));
 </script>

package/dist/runtime/components/InputUploraImage.vue.d.ts

@@ -4,6 +4,9 @@ import theme from '#build/cms/input-uplora-image';
 type InputUploraImage = ComponentConfig<typeof theme, AppConfig, 'inputUploraImage'>;
 export interface InputUploraImageProps {
     showExtensions?: boolean;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
     as?: any;
     class?: any;
     ui?: InputUploraImage['slots'];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hywax/cms",
   "type": "module",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "description": "Hywax CMS. ⚠️ This package is intended for internal use only.",
   "repository": {
     "type": "git",