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

package/package.json

@@ -1,62 +1,75 @@
-{
-	"name": "@conduction/nextcloud-vue",
-	"version": "0.1.0-beta.3",
-	"description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
-	"license": "EUPL-1.2",
-	"author": "Conduction B.V. <info@conduction.nl>",
-	"main": "dist/nextcloud-vue.cjs.js",
-	"module": "dist/nextcloud-vue.esm.js",
-	"style": "dist/nextcloud-vue.css",
-	"types": "src/types/index.d.ts",
-	"files": [
-		"dist/",
-		"src/",
-		"css/"
-	],
-	"sideEffects": true,
-	"scripts": {
-		"build": "rollup -c",
-		"dev": "rollup -c -w",
-		"test": "jest",
-		"lint": "eslint src/",
-		"stylelint": "stylelint 'src/**/*.vue' 'src/**/*.css'",
-		"prepare": "npm run build",
-		"prepublishOnly": "npm run build"
-	},
-	"peerDependencies": {
-		"@nextcloud/l10n": "^2.0.0 || ^3.0.0",
-		"@nextcloud/vue": "^8.0.0",
-		"pinia": "^2.0.0",
-		"vue": "^2.7.0",
-		"vue-material-design-icons": "^5.0.0"
-	},
-	"devDependencies": {
-		"@babel/core": "^7.29.0",
-		"@babel/preset-env": "^7.29.0",
-		"@eslint/config-helpers": "^0.4.2",
-		"@eslint/eslintrc": "^3.3.4",
-		"@eslint/js": "^9.39.3",
-		"@nextcloud/browserslist-config": "^3.1.2",
-		"@nextcloud/eslint-config": "^8.4.2",
-		"@nextcloud/vue": "^8.12.0",
-		"@rollup/plugin-commonjs": "^25.0.0",
-		"@rollup/plugin-node-resolve": "^15.0.0",
-		"@vue/test-utils": "^1.3.6",
-		"@vue/vue2-jest": "^29.2.6",
-		"babel-jest": "^29.7.0",
-		"eslint": "^8.56.0",
-		"eslint-import-resolver-alias": "^1.1.2",
-		"jest": "^29.7.0",
-		"jest-environment-jsdom": "^29.7.0",
-		"jest-transform-stub": "^2.0.0",
-		"pinia": "^2.1.7",
-		"rollup": "^3.29.0",
-		"rollup-plugin-postcss": "^4.0.0",
-		"rollup-plugin-vue": "^5.1.9",
-		"stylelint": "^14.16.1",
-		"stylelint-config-recommended": "^9.0.0",
-		"stylelint-config-recommended-vue": "^1.5.0",
-		"vue": "^2.7.16",
-		"vue-material-design-icons": "^5.2.0"
-	}
-}
+{
+	"name": "@conduction/nextcloud-vue",
+	"version": "0.1.0-beta.4",
+	"description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
+	"license": "EUPL-1.2",
+	"author": "Conduction B.V. <info@conduction.nl>",
+	"main": "dist/nextcloud-vue.cjs.js",
+	"module": "dist/nextcloud-vue.esm.js",
+	"style": "dist/nextcloud-vue.css",
+	"types": "src/types/index.d.ts",
+	"files": [
+		"dist/",
+		"src/",
+		"css/"
+	],
+	"sideEffects": true,
+	"scripts": {
+		"build": "rollup -c",
+		"dev": "rollup -c -w",
+		"test": "jest",
+		"lint": "eslint src/",
+		"stylelint": "stylelint 'src/**/*.vue' 'src/**/*.css'",
+		"prepare": "npm run build",
+		"prepublishOnly": "npm run build"
+	},
+	"dependencies": {
+		"@codemirror/lang-json": "^6.0.2",
+		"@nextcloud/capabilities": "^1.2.1",
+		"@nextcloud/dialogs": "^7.3.0",
+		"gridstack": "^10.3.1",
+		"vue-apexcharts": "^1.7.0",
+		"vue-codemirror6": "^1.4.3"
+	},
+	"peerDependencies": {
+		"@nextcloud/axios": "^2.0.0",
+		"@nextcloud/l10n": "^2.0.0 || ^3.0.0",
+		"@nextcloud/router": "^2.0.0 || ^3.0.0",
+		"@nextcloud/vue": "^8.0.0",
+		"bootstrap-vue": "^2.23.1",
+		"pinia": "^2.0.0",
+		"vue": "^2.7.0",
+		"vue-material-design-icons": "^5.0.0",
+		"vue-frag": "^1.4.3"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.29.0",
+		"@babel/preset-env": "^7.29.0",
+		"@eslint/config-helpers": "^0.4.2",
+		"@eslint/eslintrc": "^3.3.4",
+		"@eslint/js": "^9.39.3",
+		"@nextcloud/browserslist-config": "^3.1.2",
+		"@nextcloud/eslint-config": "^8.4.2",
+		"@nextcloud/vue": "^8.12.0",
+		"@rollup/plugin-commonjs": "^25.0.0",
+		"@rollup/plugin-node-resolve": "^15.0.0",
+		"@vue/test-utils": "^1.3.6",
+		"@vue/vue2-jest": "^29.2.6",
+		"babel-jest": "^29.7.0",
+		"bootstrap-vue": "^2.23.1",
+		"eslint": "^8.56.0",
+		"eslint-import-resolver-alias": "^1.1.2",
+		"jest": "^29.7.0",
+		"jest-environment-jsdom": "^29.7.0",
+		"jest-transform-stub": "^2.0.0",
+		"pinia": "^2.1.7",
+		"rollup": "^3.29.0",
+		"rollup-plugin-postcss": "^4.0.0",
+		"rollup-plugin-vue": "^5.1.9",
+		"stylelint": "^14.16.1",
+		"stylelint-config-recommended": "^9.0.0",
+		"stylelint-config-recommended-vue": "^1.5.0",
+		"vue": "^2.7.16",
+		"vue-material-design-icons": "^5.2.0"
+	}
+}

package/src/components/CnActionsBar/CnActionsBar.vue

@@ -1,225 +1,235 @@
-<template>
-	<div class="cn-actions-bar">
-		<div class="cn-actions-bar__info">
-			<span v-if="pagination && pagination.total > 0" class="cn-actions-bar__count">
-				{{ countText }}
-			</span>
-		</div>
-		<div class="cn-actions-bar__actions">
-			<!-- View mode toggle (Cards / Table) -->
-			<div v-if="showViewToggle" class="cn-actions-bar__view-toggle">
-				<NcCheckboxRadioSwitch
-					:checked="viewMode"
-					:button-variant="true"
-					value="cards"
-					name="cn_view_mode"
-					type="radio"
-					button-variant-grouped="horizontal"
-					@update:checked="$emit('view-mode-change', 'cards')">
-					Cards
-				</NcCheckboxRadioSwitch>
-				<NcCheckboxRadioSwitch
-					:checked="viewMode"
-					:button-variant="true"
-					value="table"
-					name="cn_view_mode"
-					type="radio"
-					button-variant-grouped="horizontal"
-					@update:checked="$emit('view-mode-change', 'table')">
-					Table
-				</NcCheckboxRadioSwitch>
-			</div>
-
-			<!-- Add button (primary) -->
-			<NcButton type="primary" @click="$emit('add')">
-				<template #icon>
-					<CnIcon v-if="addIcon" :name="addIcon" :size="20" />
-					<Plus v-else :size="20" />
-				</template>
-				{{ addLabel }}
-			</NcButton>
-
-			<!-- Actions menu (Refresh, Import, Export, mass actions) -->
-			<NcActions
-				:force-name="true"
-				:inline="0"
-				menu-name="Actions">
-				<NcActionButton @click="$emit('refresh')">
-					<template #icon>
-						<Refresh :size="20" />
-					</template>
-					Refresh
-				</NcActionButton>
-
-				<!-- Custom primary action items (overflow) -->
-				<slot name="action-items" />
-
-				<!-- Separator between primary and mass actions -->
-				<NcActionSeparator v-if="selectable" />
-
-				<!-- Mass actions (overflow) -->
-				<NcActionButton
-					v-if="showMassImport"
-					@click="$emit('show-import')">
-					<template #icon>
-						<Import :size="20" />
-					</template>
-					Import
-				</NcActionButton>
-				<NcActionButton
-					v-if="showMassExport"
-					@click="$emit('show-export')">
-					<template #icon>
-						<Export :size="20" />
-					</template>
-					Export
-				</NcActionButton>
-				<NcActionButton
-					v-if="showMassCopy"
-					:disabled="selectedIds.length < 1"
-					:title="selectedIds.length < 1 ? 'Select 1 or more items to copy' : ''"
-					@click="$emit('show-copy')">
-					<template #icon>
-						<ContentCopy :size="20" />
-					</template>
-					Copy selected
-				</NcActionButton>
-				<NcActionButton
-					v-if="showMassDelete"
-					:disabled="selectedIds.length < 1"
-					:title="selectedIds.length < 1 ? 'Select 1 or more items to delete' : ''"
-					@click="$emit('show-delete')">
-					<template #icon>
-						<TrashCanOutline :size="20" />
-					</template>
-					Delete selected
-				</NcActionButton>
-
-				<!-- Custom mass actions (overflow) -->
-				<slot name="mass-actions" :count="selectedIds.length" :selected-ids="selectedIds" />
-			</NcActions>
-
-			<slot name="header-actions" />
-		</div>
-	</div>
-</template>
-
-<script>
-import { NcActions, NcActionButton, NcActionSeparator, NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'
-import { CnIcon } from '../CnIcon/index.js'
-import Plus from 'vue-material-design-icons/Plus.vue'
-import Refresh from 'vue-material-design-icons/Refresh.vue'
-import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
-import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
-import Import from 'vue-material-design-icons/Import.vue'
-import Export from 'vue-material-design-icons/Export.vue'
-
-/**
- * CnActionsBar — Reusable actions toolbar with count, mass actions, and primary actions.
- *
- * @example
- * <CnActionsBar
- *   :pagination="pagination"
- *   :object-count="items.length"
- *   add-label="Add Client"
- *   add-icon="AccountGroup"
- *   @add="createNew"
- *   @refresh="reload" />
- */
-export default {
-	name: 'CnActionsBar',
-
-	components: {
-		NcActions,
-		NcActionButton,
-		NcActionSeparator,
-		NcButton,
-		NcCheckboxRadioSwitch,
-		CnIcon,
-		Plus,
-		Refresh,
-		ContentCopy,
-		TrashCanOutline,
-		Import,
-		Export,
-	},
-
-	props: {
-		/** Pagination state: { total, page, pages, limit } */
-		pagination: {
-			type: Object,
-			default: null,
-		},
-		/** Number of currently visible objects (for "Showing X of Y") */
-		objectCount: {
-			type: Number,
-			default: 0,
-		},
-		/** Whether rows/cards can be selected */
-		selectable: {
-			type: Boolean,
-			default: true,
-		},
-		/** Currently selected IDs */
-		selectedIds: {
-			type: Array,
-			default: () => [],
-		},
-		/** Label for the Add button */
-		addLabel: {
-			type: String,
-			default: 'Add',
-		},
-		/** MDI icon name for the Add button (e.g. 'AccountGroup'). Falls back to Plus icon. */
-		addIcon: {
-			type: String,
-			default: '',
-		},
-		/** How many action buttons to show inline (rest go in overflow dropdown) */
-		inlineActionCount: {
-			type: Number,
-			default: 2,
-		},
-		/** Whether to show the built-in mass Import action */
-		showMassImport: {
-			type: Boolean,
-			default: true,
-		},
-		/** Whether to show the built-in mass Export action */
-		showMassExport: {
-			type: Boolean,
-			default: true,
-		},
-		/** Whether to show the built-in mass Copy action */
-		showMassCopy: {
-			type: Boolean,
-			default: true,
-		},
-		/** Whether to show the built-in mass Delete action */
-		showMassDelete: {
-			type: Boolean,
-			default: true,
-		},
-		/** Current view mode: 'table' or 'cards' */
-		viewMode: {
-			type: String,
-			default: 'table',
-			validator: (v) => ['table', 'cards'].includes(v),
-		},
-		/** Whether to show the Cards/Table view toggle */
-		showViewToggle: {
-			type: Boolean,
-			default: true,
-		},
-	},
-
-	computed: {
-		countText() {
-			if (!this.pagination) return ''
-			return `Showing ${this.objectCount} of ${this.pagination.total}`
-		},
-	},
-}
-</script>
-
-<!-- Styles in css/actions-bar.css -->
+<template>
+	<div class="cn-actions-bar">
+		<div class="cn-actions-bar__info">
+			<span v-if="pagination && pagination.total > 0" class="cn-actions-bar__count">
+				{{ countText }}
+			</span>
+		</div>
+		<div class="cn-actions-bar__actions">
+			<!-- View mode toggle (Cards / Table) -->
+			<div v-if="showViewToggle" class="cn-actions-bar__view-toggle">
+				<NcCheckboxRadioSwitch
+					:checked="viewMode"
+					:button-variant="true"
+					value="cards"
+					name="cn_view_mode"
+					type="radio"
+					button-variant-grouped="horizontal"
+					@update:checked="$emit('view-mode-change', 'cards')">
+					Cards
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch
+					:checked="viewMode"
+					:button-variant="true"
+					value="table"
+					name="cn_view_mode"
+					type="radio"
+					button-variant-grouped="horizontal"
+					@update:checked="$emit('view-mode-change', 'table')">
+					Table
+				</NcCheckboxRadioSwitch>
+			</div>
+
+			<!-- Add button (primary) -->
+			<NcButton type="primary" @click="$emit('add')">
+				<template #icon>
+					<CnIcon v-if="addIcon" :name="addIcon" :size="20" />
+					<Plus v-else :size="20" />
+				</template>
+				{{ addLabel }}
+			</NcButton>
+
+			<slot name="header-actions" />
+
+			<!-- Actions menu (Refresh, Import, Export, mass actions) -->
+			<NcActions
+				:force-name="true"
+				:inline="0"
+				menu-name="Actions">
+				<NcActionButton :disabled="refreshing" @click="$emit('refresh')">
+					<template #icon>
+						<NcLoadingIcon v-if="refreshing" :size="20" />
+						<Refresh v-else :size="20" />
+					</template>
+					{{ refreshing ? 'Refreshing...' : 'Refresh' }}
+				</NcActionButton>
+
+				<!-- Custom primary action items (overflow) -->
+				<slot name="action-items" />
+
+				<!-- Separator between primary and mass actions -->
+				<NcActionSeparator v-if="hasMassActions" />
+
+				<!-- Mass actions (overflow) -->
+				<NcActionButton
+					v-if="showMassImport"
+					@click="$emit('show-import')">
+					<template #icon>
+						<Import :size="20" />
+					</template>
+					Import
+				</NcActionButton>
+				<NcActionButton
+					v-if="showMassExport"
+					@click="$emit('show-export')">
+					<template #icon>
+						<Export :size="20" />
+					</template>
+					Export
+				</NcActionButton>
+				<NcActionButton
+					v-if="showMassCopy"
+					:disabled="selectedIds.length < 1"
+					:title="selectedIds.length < 1 ? 'Select 1 or more items to copy' : ''"
+					@click="$emit('show-copy')">
+					<template #icon>
+						<ContentCopy :size="20" />
+					</template>
+					Copy selected
+				</NcActionButton>
+				<NcActionButton
+					v-if="showMassDelete"
+					:disabled="selectedIds.length < 1"
+					:title="selectedIds.length < 1 ? 'Select 1 or more items to delete' : ''"
+					@click="$emit('show-delete')">
+					<template #icon>
+						<TrashCanOutline :size="20" />
+					</template>
+					Delete selected
+				</NcActionButton>
+
+				<!-- Custom mass actions (overflow) -->
+				<slot name="mass-actions" :count="selectedIds.length" :selected-ids="selectedIds" />
+			</NcActions>
+		</div>
+	</div>
+</template>
+
+<script>
+import { NcActions, NcActionButton, NcActionSeparator, NcButton, NcCheckboxRadioSwitch, NcLoadingIcon } from '@nextcloud/vue'
+import { CnIcon } from '../CnIcon/index.js'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import Refresh from 'vue-material-design-icons/Refresh.vue'
+import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
+import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+import Import from 'vue-material-design-icons/Import.vue'
+import Export from 'vue-material-design-icons/Export.vue'
+
+/**
+ * CnActionsBar — Reusable actions toolbar with count, mass actions, and primary actions.
+ *
+ * @example
+ * <CnActionsBar
+ *   :pagination="pagination"
+ *   :object-count="items.length"
+ *   add-label="Add Client"
+ *   add-icon="AccountGroup"
+ *   @add="createNew"
+ *   @refresh="reload" />
+ */
+export default {
+	name: 'CnActionsBar',
+
+	components: {
+		NcActions,
+		NcActionButton,
+		NcActionSeparator,
+		NcButton,
+		NcCheckboxRadioSwitch,
+		NcLoadingIcon,
+		CnIcon,
+		Plus,
+		Refresh,
+		ContentCopy,
+		TrashCanOutline,
+		Import,
+		Export,
+	},
+
+	props: {
+		/** Pagination state: { total, page, pages, limit } */
+		pagination: {
+			type: Object,
+			default: null,
+		},
+		/** Number of currently visible objects (for "Showing X of Y") */
+		objectCount: {
+			type: Number,
+			default: 0,
+		},
+		/** Whether rows/cards can be selected */
+		selectable: {
+			type: Boolean,
+			default: true,
+		},
+		/** Currently selected IDs */
+		selectedIds: {
+			type: Array,
+			default: () => [],
+		},
+		/** Label for the Add button */
+		addLabel: {
+			type: String,
+			default: 'Add',
+		},
+		/** MDI icon name for the Add button (e.g. 'AccountGroup'). Falls back to Plus icon. */
+		addIcon: {
+			type: String,
+			default: '',
+		},
+		/** How many action buttons to show inline (rest go in overflow dropdown) */
+		inlineActionCount: {
+			type: Number,
+			default: 2,
+		},
+		/** Whether to show the built-in mass Import action */
+		showMassImport: {
+			type: Boolean,
+			default: true,
+		},
+		/** Whether to show the built-in mass Export action */
+		showMassExport: {
+			type: Boolean,
+			default: true,
+		},
+		/** Whether to show the built-in mass Copy action */
+		showMassCopy: {
+			type: Boolean,
+			default: true,
+		},
+		/** Whether to show the built-in mass Delete action */
+		showMassDelete: {
+			type: Boolean,
+			default: true,
+		},
+		/** Current view mode: 'table' or 'cards' */
+		viewMode: {
+			type: String,
+			default: 'table',
+			validator: (v) => ['table', 'cards'].includes(v),
+		},
+		/** Whether to show the Cards/Table view toggle */
+		showViewToggle: {
+			type: Boolean,
+			default: true,
+		},
+		/** Whether the refresh action is currently in progress */
+		refreshing: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	computed: {
+		countText() {
+			if (!this.pagination) return ''
+			return `Showing ${this.objectCount} of ${this.pagination.total}`
+		},
+		hasMassActions() {
+			return this.showMassImport || this.showMassExport || this.showMassCopy || this.showMassDelete
+		},
+	},
+}
+</script>
+
+<!-- Styles in css/actions-bar.css -->

package/src/components/CnActionsBar/index.js

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