@xleddyl/nuxt-cms 0.1.60 → 0.2.0

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

@@ -1,65 +1,66 @@
 <template>
    <div class="cms-folder-picker">
-      <button
-         type="button"
-         class="cms-pill"
-         :class="{ 'is-active': model === null }"
-         @click="model = null"
-      >
-         <CmsIcon name="circle-stack" class="size-3" />Root
-      </button>
-      <button
-         v-for="name in folders"
-         :key="name"
-         type="button"
-         class="cms-pill"
-         :class="{ 'is-active': model === name }"
-         @click="model = name"
-      >
-         <CmsIcon name="folder" class="size-3" />{{ name }}
-      </button>
-      <template v-if="creating">
-         <CmsInput
-            v-model="draft"
-            size="sm"
-            autofocus
-            placeholder="Folder name"
-            class="cms-folder-picker-input"
-            @keydown.enter.prevent="commit"
-            @keydown.esc="cancel"
-         />
-         <CmsButton label="Add" size="xs" :disabled="!normalized" @click="commit" />
-         <CmsButton label="Cancel" size="xs" variant="ghost" color="neutral" @click="cancel" />
-      </template>
-      <button v-else type="button" class="cms-pill" @click="startCreating">
-         <CmsIcon name="folder-plus" class="size-3" />New folder
-      </button>
+      <CmsInput
+         v-if="folders.length > 8"
+         v-model="query"
+         size="sm"
+         icon="magnifying-glass"
+         placeholder="Find a folder…"
+      />
+      <div class="cms-folder-picker-list" role="listbox">
+         <button
+            v-if="!query"
+            type="button"
+            role="option"
+            class="cms-folder-picker-row"
+            :class="{ 'is-active': model === null }"
+            :aria-selected="model === null"
+            :disabled="isDisabled(null)"
+            @click="model = null"
+         >
+            <CmsIcon name="home" class="size-4" />
+            <span class="truncate">Library root</span>
+            <CmsIcon v-if="model === null" name="check" class="cms-folder-picker-check size-4" />
+         </button>
+         <button
+            v-for="folder in visible"
+            :key="folder"
+            type="button"
+            role="option"
+            class="cms-folder-picker-row"
+            :class="{ 'is-active': model === folder }"
+            :style="
+  query ? void 0 : { paddingLeft: `${0.625 + mediaFolderDepth(folder) * 1}rem` }
+"
+            :aria-selected="model === folder"
+            :disabled="isDisabled(folder)"
+            @click="model = folder"
+         >
+            <CmsIcon :name="model === folder ? 'folder-open' : 'folder'" class="size-4" />
+            <span class="truncate">{{ query ? folder : mediaFolderName(folder) }}</span>
+            <CmsIcon v-if="model === folder" name="check" class="cms-folder-picker-check size-4" />
+         </button>
+         <p v-if="query && !visible.length" class="cms-folder-picker-empty">No matching folders</p>
+      </div>
    </div>
 </template>
 
 <script setup>
 import { computed, ref } from "#imports";
-import { normalizeMediaFolder } from "#nuxt-cms";
-defineProps({
-  folders: { type: Array, required: true }
+import { isWithinMediaFolder, mediaFolderDepth, mediaFolderName } from "#nuxt-cms";
+const props = defineProps({
+  folders: { type: Array, required: true },
+  exclude: { type: [String, null], required: false },
+  disabled: { type: Array, required: false }
 });
-const emit = defineEmits(["create"]);
 const model = defineModel({ type: [String, null], ...{ default: null } });
-const creating = ref(false);
-const draft = ref("");
-const normalized = computed(() => normalizeMediaFolder(draft.value));
-function startCreating() {
-  creating.value = true;
-}
-function cancel() {
-  creating.value = false;
-  draft.value = "";
-}
-function commit() {
-  const folder = normalized.value;
-  if (!folder) return;
-  emit("create", folder);
-  model.value = folder;
-  cancel();
+const query = ref("");
+const visible = computed(() => {
+  const term = query.value.trim().toLowerCase();
+  return term ? props.folders.filter((folder) => folder.includes(term)) : props.folders;
+});
+function isDisabled(folder) {
+  if (props.disabled?.includes(folder)) return true;
+  return !!props.exclude && !!folder && isWithinMediaFolder(folder, props.exclude);
 }
 </script>

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

@@ -1,5 +1,7 @@
 type __VLS_Props = {
     folders: string[];
+    exclude?: string | null;
+    disabled?: (string | null)[];
 };
 type __VLS_ModelProps = {
     modelValue?: string | null;
@@ -7,10 +9,8 @@ type __VLS_ModelProps = {
 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) => any;
-    create: (folder: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
-    onCreate?: ((folder: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -4,16 +4,22 @@ type __VLS_Props = {
     mediaType?: MediaType | MediaType[];
     accept?: string[];
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_ModelProps = {
+    'folder'?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (item: {
         key: string;
         url: string | null;
     }) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "update:folder": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((item: {
         key: string;
         url: string | null;
     }) => any) | undefined;
+    "onUpdate:folder"?: ((value: string | null) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;