@conduction/nextcloud-vue 0.1.0-beta.3 → 0.1.0-beta.5

package/src/components/CnIndexSidebar/CnIndexSidebar.vue

@@ -24,50 +24,56 @@
 				<Magnify :size="20" />
 			</template>
 
-			<div class="cn-index-sidebar__section">
-				<h3>{{ searchLabel }}</h3>
-				<NcTextField
-					:value="searchValue"
-					:placeholder="searchPlaceholder"
-					:label="searchLabel"
-					@update:value="$emit('search', $event)" />
-			</div>
+			<div class="cn-index-sidebar__tab-content">
+				<div v-if="$slots['search-above']" class="cn-index-sidebar__section">
+					<slot name="search-above" />
+				</div>
+
+				<div class="cn-index-sidebar__section">
+					<h3>{{ searchLabel }}</h3>
+					<NcTextField
+						:value="searchValue"
+						:placeholder="searchPlaceholder"
+						:label="searchLabel"
+						@update:value="$emit('search', $event)" />
+				</div>
 
-			<div v-if="schemaFilters.length > 0" class="cn-index-sidebar__section">
-				<h3>{{ filtersLabel }}</h3>
-				<div
-					v-for="filter in schemaFilters"
-					:key="filter.key"
-					class="cn-index-sidebar__filter-group">
-					<div class="cn-index-sidebar__filter-header">
-						<span class="cn-index-sidebar__filter-label">{{ filter.label }}</span>
-						<NcPopover v-if="filter.description" popup-role="dialog">
-							<template #trigger>
-								<NcButton
-									type="tertiary-no-background"
-									:aria-label="filter.label + ' info'"
-									class="cn-index-sidebar__info-btn">
-									<template #icon>
-										<InformationOutline :size="16" />
-									</template>
-								</NcButton>
-							</template>
-							<p class="cn-index-sidebar__filter-description">{{ filter.description }}</p>
-						</NcPopover>
+				<div v-if="schemaFilters.length > 0" class="cn-index-sidebar__section">
+					<h3>{{ filtersLabel }}</h3>
+					<div
+						v-for="filter in schemaFilters"
+						:key="filter.key"
+						class="cn-index-sidebar__filter-group">
+						<div class="cn-index-sidebar__filter-header">
+							<span class="cn-index-sidebar__filter-label">{{ filter.label }}</span>
+							<NcPopover v-if="filter.description" popup-role="dialog">
+								<template #trigger>
+									<NcButton
+										type="tertiary-no-background"
+										:aria-label="filter.label + ' info'"
+										class="cn-index-sidebar__info-btn">
+										<template #icon>
+											<InformationOutline :size="16" />
+										</template>
+									</NcButton>
+								</template>
+								<p class="cn-index-sidebar__filter-description">{{ filter.description }}</p>
+							</NcPopover>
+						</div>
+						<NcSelect
+							class="cn-index-sidebar__select"
+							:value="getSelectedFilterOptions(filter)"
+							:options="getFilterOptions(filter)"
+							placeholder="Select..."
+							:input-label="filter.label"
+							:multiple="true"
+							:clearable="true"
+							@input="onFilterChange(filter.key, $event)" />
 					</div>
-					<NcSelect
-						class="cn-index-sidebar__select"
-						:value="getSelectedFilterOptions(filter)"
-						:options="getFilterOptions(filter)"
-						placeholder="Select..."
-						:input-label="filter.label"
-						:multiple="true"
-						:clearable="true"
-						@input="onFilterChange(filter.key, $event)" />
 				</div>
-			</div>
 
-			<slot name="search-extra" />
+				<slot name="search-extra" />
+			</div>
 		</NcAppSidebarTab>
 
 		<!-- Columns Tab -->
@@ -79,71 +85,73 @@
 				<FormatColumns :size="20" />
 			</template>
 
-			<div class="cn-sidebar-columns">
-				<h3>{{ columnsHeading }}</h3>
-				<p class="cn-sidebar-columns__description">{{ columnsDescription }}</p>
-
-				<template v-if="allColumns.length > 0 || allGroups.length > 0">
-					<!-- Schema properties group (collapsible) -->
-					<div v-if="allColumns.length > 0" class="cn-sidebar-columns__group cn-sidebar-columns__group--collapsible">
-						<div class="cn-sidebar-columns__group-header" @click="propertiesExpanded = !propertiesExpanded">
-							<ChevronDown v-if="propertiesExpanded" :size="20" />
-							<ChevronRight v-else :size="20" />
-							<h4>{{ resolvedPropertiesLabel }}</h4>
-							<NcCheckboxRadioSwitch
-								:checked="isGroupAllVisible(allColumns)"
-								class="cn-sidebar-columns__select-all"
-								@click.native.stop
-								@update:checked="toggleGroupAll(allColumns)">
-								All
-							</NcCheckboxRadioSwitch>
-						</div>
-						<div v-if="propertiesExpanded" class="cn-sidebar-columns__group-content">
-							<NcCheckboxRadioSwitch
-								v-for="col in allColumns"
-								:key="col.key"
-								:checked="isColumnVisible(col.key)"
-								@update:checked="toggleColumn(col.key)">
-								{{ col.label }}
-							</NcCheckboxRadioSwitch>
+			<div class="cn-index-sidebar__tab-content">
+				<div class="cn-sidebar-columns">
+					<h3>{{ columnsHeading }}</h3>
+					<p class="cn-sidebar-columns__description">{{ columnsDescription }}</p>
+
+					<template v-if="allColumns.length > 0 || allGroups.length > 0">
+						<!-- Schema properties group (collapsible) -->
+						<div v-if="allColumns.length > 0" class="cn-sidebar-columns__group cn-sidebar-columns__group--collapsible">
+							<div class="cn-sidebar-columns__group-header" @click="propertiesExpanded = !propertiesExpanded">
+								<ChevronDown v-if="propertiesExpanded" :size="20" />
+								<ChevronRight v-else :size="20" />
+								<h4>{{ resolvedPropertiesLabel }}</h4>
+								<NcCheckboxRadioSwitch
+									:checked="isGroupAllVisible(allColumns)"
+									class="cn-sidebar-columns__select-all"
+									@click.native.stop
+									@update:checked="toggleGroupAll(allColumns)">
+									All
+								</NcCheckboxRadioSwitch>
+							</div>
+							<div v-if="propertiesExpanded" class="cn-sidebar-columns__group-content">
+								<NcCheckboxRadioSwitch
+									v-for="col in allColumns"
+									:key="col.key"
+									:checked="isColumnVisible(col.key)"
+									@update:checked="toggleColumn(col.key)">
+									{{ col.label }}
+								</NcCheckboxRadioSwitch>
+							</div>
 						</div>
-					</div>
 
-					<!-- Extra column groups (built-in Metadata + external) -->
-					<div
-						v-for="group in allGroups"
-						:key="group.id"
-						class="cn-sidebar-columns__group cn-sidebar-columns__group--collapsible">
-						<div class="cn-sidebar-columns__group-header" @click="toggleGroup(group.id)">
-							<ChevronDown v-if="expandedGroups[group.id]" :size="20" />
-							<ChevronRight v-else :size="20" />
-							<h4>{{ group.label }}</h4>
-							<NcCheckboxRadioSwitch
-								:checked="isGroupAllVisible(group.columns)"
-								class="cn-sidebar-columns__select-all"
-								@click.native.stop
-								@update:checked="toggleGroupAll(group.columns)">
-								All
-							</NcCheckboxRadioSwitch>
+						<!-- Extra column groups (built-in Metadata + external) -->
+						<div
+							v-for="group in allGroups"
+							:key="group.id"
+							class="cn-sidebar-columns__group cn-sidebar-columns__group--collapsible">
+							<div class="cn-sidebar-columns__group-header" @click="toggleGroup(group.id)">
+								<ChevronDown v-if="expandedGroups[group.id]" :size="20" />
+								<ChevronRight v-else :size="20" />
+								<h4>{{ group.label }}</h4>
+								<NcCheckboxRadioSwitch
+									:checked="isGroupAllVisible(group.columns)"
+									class="cn-sidebar-columns__select-all"
+									@click.native.stop
+									@update:checked="toggleGroupAll(group.columns)">
+									All
+								</NcCheckboxRadioSwitch>
+							</div>
+							<div v-if="expandedGroups[group.id]" class="cn-sidebar-columns__group-content">
+								<NcCheckboxRadioSwitch
+									v-for="col in group.columns"
+									:key="col.key"
+									:checked="isColumnVisible(col.key)"
+									@update:checked="toggleColumn(col.key)">
+									{{ col.label }}
+								</NcCheckboxRadioSwitch>
+							</div>
 						</div>
-						<div v-if="expandedGroups[group.id]" class="cn-sidebar-columns__group-content">
-							<NcCheckboxRadioSwitch
-								v-for="col in group.columns"
-								:key="col.key"
-								:checked="isColumnVisible(col.key)"
-								@update:checked="toggleColumn(col.key)">
-								{{ col.label }}
-							</NcCheckboxRadioSwitch>
-						</div>
-					</div>
-				</template>
+					</template>
 
-				<p v-else class="cn-sidebar-columns__empty">
-					No columns available. Provide a schema to auto-generate columns.
-				</p>
-			</div>
+					<p v-else class="cn-sidebar-columns__empty">
+						No columns available. Provide a schema to auto-generate columns.
+					</p>
+				</div>
 
-			<slot name="columns-extra" />
+				<slot name="columns-extra" />
+			</div>
 		</NcAppSidebarTab>
 
 		<!-- Extra tabs injected by the consumer -->
@@ -180,6 +188,9 @@ import { METADATA_COLUMNS } from '../../constants/metadata.js'
  *   :search-value="search"
  *   @search="onSearch"
  *   @columns-change="onColumnsChange" />
+ *
+ * @slot search-above - Content rendered above the search field in the Search tab (e.g. hints, quick actions).
+ * @slot search-extra - Content rendered below the search field and filters in the Search tab (e.g. saved searches).
  */
 export default {
 	name: 'CnIndexSidebar',
@@ -303,6 +314,14 @@ export default {
 			type: String,
 			default: 'search-tab',
 		},
+		/**
+		 * Whether the current user is an admin.
+		 * When false, schema properties with `adminOnly: true` are hidden from filters.
+		 */
+		userIsAdmin: {
+			type: Boolean,
+			default: true,
+		},
 	},
 
 	data() {
@@ -343,10 +362,10 @@ export default {
 			return columnsFromSchema(this.schema, {})
 		},
 
-		/** Filter definitions from schema (facetable properties) */
+		/** Filter definitions from schema (facetable properties, respecting RBAC) */
 		schemaFilters() {
 			if (!this.schema) return []
-			return filtersFromSchema(this.schema)
+			return filtersFromSchema(this.schema, { isAdmin: this.userIsAdmin })
 		},
 
 		/** Combined column groups: built-in Metadata + external groups */

package/src/components/CnIndexSidebar/index.js

@@ -1 +1 @@
-export { default as CnIndexSidebar } from './CnIndexSidebar.vue'
+export { default as CnIndexSidebar } from './CnIndexSidebar.vue'

package/src/components/CnItemCard/CnItemCard.vue

@@ -0,0 +1,132 @@
+<template>
+	<div class="cn-item-card" @click="$emit('click', $event)">
+		<div class="cn-item-card__header">
+			<div class="cn-item-card__title-row">
+				<slot name="icon">
+					<component :is="icon" v-if="icon" :size="iconSize" />
+				</slot>
+				<div class="cn-item-card__title-content">
+					<h3 class="cn-item-card__title">{{ title }}</h3>
+					<span v-if="subtitle" class="cn-item-card__subtitle">{{ subtitle }}</span>
+				</div>
+			</div>
+			<div v-if="$slots.actions || $scopedSlots.actions" class="cn-item-card__actions">
+				<slot name="actions" />
+			</div>
+		</div>
+		<div v-if="$slots.default || $scopedSlots.default" class="cn-item-card__content">
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script>
+/**
+ * CnItemCard — Compact card for displaying an item in a sidebar list.
+ *
+ * Provides a card with a header (icon + title + optional actions) and
+ * a flexible content area. Designed for use in sidebar lists such as
+ * schema listings, source listings, etc.
+ *
+ * @example Basic usage
+ * <CnItemCard title="My Schema" :icon="FileCodeOutline">
+ *   <p>Schema content here</p>
+ * </CnItemCard>
+ *
+ * @example With actions and stats
+ * <CnItemCard title="My Schema" :icon="FileCodeOutline" subtitle="v1.0">
+ *   <template #actions>
+ *     <NcActions>
+ *       <NcActionButton @click="edit">Edit</NcActionButton>
+ *     </NcActions>
+ *   </template>
+ *   <CnKpiGrid :columns="2">
+ *     <CnStatsBlock title="Objects" :count="42" />
+ *     <CnStatsBlock title="Size" :count="0" :breakdown="{ size: '1.2 MB' }" />
+ *   </CnKpiGrid>
+ * </CnItemCard>
+ */
+export default {
+	name: 'CnItemCard',
+
+	props: {
+		/** Card title */
+		title: {
+			type: String,
+			default: '',
+		},
+		/** Optional subtitle below the title */
+		subtitle: {
+			type: String,
+			default: '',
+		},
+		/** Icon component (e.g., imported MDI icon) */
+		icon: {
+			type: [Object, Function],
+			default: null,
+		},
+		/** Icon size in pixels */
+		iconSize: {
+			type: Number,
+			default: 20,
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-item-card {
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large, 10px);
+	padding: 12px;
+	margin-bottom: 12px;
+}
+
+.cn-item-card:last-child {
+	margin-bottom: 0;
+}
+
+.cn-item-card__header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.cn-item-card__title-row {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 0;
+	flex: 1;
+}
+
+.cn-item-card__title-content {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+}
+
+.cn-item-card__title {
+	margin: 0;
+	font-size: 1em;
+	font-weight: 600;
+	color: var(--color-main-text);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.cn-item-card__subtitle {
+	font-size: 0.85em;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-item-card__actions {
+	flex-shrink: 0;
+}
+
+.cn-item-card__content {
+	margin-top: 8px;
+}
+</style>

package/src/components/CnItemCard/index.js

@@ -0,0 +1 @@
+export { default as CnItemCard } from './CnItemCard.vue'

package/src/components/CnKpiGrid/index.js

@@ -1 +1 @@
-export { default as CnKpiGrid } from './CnKpiGrid.vue'
+export { default as CnKpiGrid } from './CnKpiGrid.vue'

package/src/components/CnMassActionBar/index.js

@@ -1 +1 @@
-export { default as CnMassActionBar } from './CnMassActionBar.vue'
+export { default as CnMassActionBar } from './CnMassActionBar.vue'

package/src/components/CnMassCopyDialog/index.js

@@ -1 +1 @@
-export { default as CnMassCopyDialog } from './CnMassCopyDialog.vue'
+export { default as CnMassCopyDialog } from './CnMassCopyDialog.vue'

package/src/components/CnMassDeleteDialog/index.js

@@ -1 +1 @@
-export { default as CnMassDeleteDialog } from './CnMassDeleteDialog.vue'
+export { default as CnMassDeleteDialog } from './CnMassDeleteDialog.vue'

package/src/components/CnMassExportDialog/index.js

@@ -1 +1 @@
-export { default as CnMassExportDialog } from './CnMassExportDialog.vue'
+export { default as CnMassExportDialog } from './CnMassExportDialog.vue'

package/src/components/CnMassImportDialog/index.js

@@ -1 +1 @@
-export { default as CnMassImportDialog } from './CnMassImportDialog.vue'
+export { default as CnMassImportDialog } from './CnMassImportDialog.vue'

package/src/components/CnNoteCard/CnNoteCard.vue

@@ -0,0 +1,149 @@
+<!--
+    This code was taken from nextcloud-vue due to certain changes being required but unable to be done as a patch.
+
+    https://github.com/nextcloud-libraries/nextcloud-vue/blob/main/src/components/NcNoteCard/NcNoteCard.vue
+-->
+<template>
+	<div
+		class="notecard"
+		:class="{
+			[`notecard--${type}`]: type,
+		}"
+		:role="shouldShowAlert ? 'alert' : 'note'">
+		<slot name="icon">
+			<NcIconSvgWrapper
+				:path="iconPath"
+				class="notecard__icon"
+				:class="{ 'notecard__icon--heading': heading }"
+				inline />
+		</slot>
+		<div>
+			<p v-if="heading" class="notecard__heading">
+				{{ heading }}
+			</p>
+			<slot>
+				<p class="notecard__text">
+					{{ text }}
+				</p>
+			</slot>
+		</div>
+	</div>
+</template>
+
+<script>
+import { NcIconSvgWrapper } from '@nextcloud/vue'
+
+// hardcoded @mdi/js icons to avoid unnececary package and bundlesize
+// we are only doing this to patch NcNoteCard anyway
+const mdiAlert = 'M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'
+const mdiAlertDecagram = 'M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M13,17H11V15H13V17M13,13H11V7H13V13Z'
+const mdiCheckboxMarkedCircle = 'M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z'
+const mdiInformation = 'M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 12,2Z'
+
+export default {
+	name: 'CnNoteCard',
+	components: {
+		NcIconSvgWrapper,
+	},
+	props: {
+		/** Optional text to show as a heading of the note card */
+		heading: {
+			type: String,
+			default: undefined,
+		},
+		/**
+		 * Enforce the `alert` role on the note card.
+		 *
+		 * The alert role should only be used for information that requires the user's immediate attention.
+		 *
+		 * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role
+		 */
+		showAlert: {
+			type: Boolean,
+			default: undefined,
+		},
+		/** The message text of the note card */
+		text: {
+			type: String,
+			default: undefined,
+		},
+		/** Type or severity of the message */
+		type: {
+			type: String,
+			default: 'warning',
+			validator: (value) =>
+				['success', 'info', 'warning', 'error'].includes(value),
+		},
+	},
+	computed: {
+		shouldShowAlert() {
+			return this.showAlert || this.type === 'error'
+		},
+		iconPath() {
+			switch (this.type) {
+			case 'error':
+				return mdiAlertDecagram
+			case 'success':
+				return mdiCheckboxMarkedCircle
+			case 'info':
+				return mdiInformation
+			case 'warning':
+			default:
+				return mdiAlert
+			}
+		},
+	},
+}
+</script>
+
+<!-- we do not have support for scss so this has been translated to css -->
+<!-- @TODO add scss support -->
+<style scoped>
+.notecard {
+  --note-card-icon-size: 20px;
+  --note-card-padding: calc(2 * var(--default-grid-baseline));
+  color: var(--color-main-text) !important;
+  background-color: var(--note-background) !important;
+  border-inline-start: var(--default-grid-baseline) solid var(--note-theme);
+  border-radius: var(--border-radius-small);
+  margin: 1rem 0;
+  padding: var(--note-card-padding);
+  display: flex;
+  flex-direction: row;
+  gap: var(--note-card-padding);
+}
+
+.notecard__heading {
+  font-size: var(--note-card-icon-size); /* Same as icon */
+  font-weight: 600;
+}
+
+.notecard__icon {
+  color: var(--note-theme);
+}
+.notecard__icon--heading {
+  font-size: var(--note-card-icon-size);
+  /* Ensure icon is on the same height as the heading */
+  margin-block: calc((1lh - 1em) / 2) auto;
+}
+
+.notecard--success {
+    --note-background: var(--color-success);
+    --note-theme: var(--color-success-text);
+  }
+
+.notecard--info {
+    --note-background: var(--color-info);
+    --note-theme: var(--color-info-text);
+  }
+
+.notecard--error {
+    --note-background: var(--color-error);
+    --note-theme: var(--color-error-text);
+  }
+
+.notecard--warning {
+    --note-background: var(--color-warning);
+    --note-theme: var(--color-warning-text);
+  }
+</style>

package/src/components/CnNoteCard/index.js

@@ -0,0 +1 @@
+export { default as CnNoteCard } from './CnNoteCard.vue'