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

package/src/components/CnFilterBar/CnFilterBar.vue

@@ -1,152 +1,152 @@
-<template>
-	<div class="cn-filter-bar">
-		<!-- Search input -->
-		<div class="cn-filter-bar__search">
-			<NcTextField
-				:value="searchValue"
-				:placeholder="searchPlaceholder"
-				:label="searchPlaceholder"
-				trailing-button-icon="close"
-				:show-trailing-button="searchValue !== ''"
-				@update:value="$emit('search', $event)"
-				@trailing-button-click="$emit('search', '')">
-				<template #icon>
-					<Magnify :size="20" />
-				</template>
-			</NcTextField>
-		</div>
-
-		<!-- Filter controls -->
-		<div class="cn-filter-bar__filters">
-			<template v-for="filter in filters">
-				<!-- Select filter -->
-				<NcSelect
-					v-if="filter.type === 'select'"
-					:key="filter.key"
-					class="cn-filter-bar__filter"
-					:value="filter.value"
-					:options="filter.options || []"
-					:placeholder="filter.label"
-					:input-label="filter.label"
-					:clearable="true"
-					@input="onFilterChange(filter.key, $event)" />
-
-				<!-- Text filter -->
-				<NcTextField
-					v-else-if="filter.type === 'text'"
-					:key="filter.key"
-					class="cn-filter-bar__filter"
-					:value="filter.value || ''"
-					:placeholder="filter.label"
-					:label="filter.label"
-					@update:value="onFilterChange(filter.key, $event)" />
-
-				<!-- Checkbox filter -->
-				<NcCheckboxRadioSwitch
-					v-else-if="filter.type === 'checkbox'"
-					:key="filter.key"
-					:checked="!!filter.value"
-					@update:checked="onFilterChange(filter.key, $event)">
-					{{ filter.label }}
-				</NcCheckboxRadioSwitch>
-			</template>
-		</div>
-
-		<!-- Clear all -->
-		<NcButton
-			v-if="showClearAll && hasActiveFilters"
-			class="cn-filter-bar__clear"
-			@click="$emit('clear-all')">
-			{{ clearAllLabel }}
-		</NcButton>
-	</div>
-</template>
-
-<script>
-import { NcTextField, NcSelect, NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'
-import Magnify from 'vue-material-design-icons/Magnify.vue'
-
-/**
- * CnFilterBar — Search and filter controls row for list views.
- *
- * Extracted from the repeated search + filter pattern in CaseList, ClientList,
- * LeadList, RequestList across Pipelinq and Procest. Supports text search,
- * select dropdowns, text inputs, and checkbox filters.
- *
- * @example
- * <CnFilterBar
- *   :search-value="searchTerm"
- *   search-placeholder="Search clients..."
- *   :filters="[
- *     { key: 'type', label: 'All types', type: 'select', options: typeOptions, value: selectedType },
- *     { key: 'active', label: 'Active only', type: 'checkbox', value: showActiveOnly },
- *   ]"
- *   @search="onSearch"
- *   @filter-change="onFilterChange"
- *   @clear-all="clearFilters" />
- */
-export default {
-	name: 'CnFilterBar',
-
-	components: {
-		NcTextField,
-		NcSelect,
-		NcButton,
-		NcCheckboxRadioSwitch,
-		Magnify,
-	},
-
-	props: {
-		/**
-		 * Filter definitions.
-		 * @type {Array<{key: string, label: string, type: 'select'|'text'|'checkbox', options?: Array, value?: *}>}
-		 */
-		filters: {
-			type: Array,
-			default: () => [],
-		},
-		/** Current search text */
-		searchValue: {
-			type: String,
-			default: '',
-		},
-		/** Search input placeholder text */
-		searchPlaceholder: {
-			type: String,
-			default: 'Search...',
-		},
-		/** Whether to show the "Clear all" button */
-		showClearAll: {
-			type: Boolean,
-			default: true,
-		},
-		/** Clear all button label */
-		clearAllLabel: {
-			type: String,
-			default: 'Clear filters',
-		},
-	},
-
-	computed: {
-		hasActiveFilters() {
-			return this.searchValue !== ''
-				|| this.filters.some((f) => f.value !== null && f.value !== '' && f.value !== false)
-		},
-	},
-
-	methods: {
-		/**
-		 * Emit filter change event.
-		 * @param {string} key Filter key
-		 * @param {*} value New filter value
-		 */
-		onFilterChange(key, value) {
-			/**
-			 * @event filter-change Emitted when any filter changes.
-			 * @type {{ key: string, value: * }}
-			 */
-			this.$emit('filter-change', { key, value })
-		},
-	},
-}
-</script>
+<template>
+	<div class="cn-filter-bar">
+		<!-- Search input -->
+		<div class="cn-filter-bar__search">
+			<NcTextField
+				:value="searchValue"
+				:placeholder="searchPlaceholder"
+				:label="searchPlaceholder"
+				trailing-button-icon="close"
+				:show-trailing-button="searchValue !== ''"
+				@update:value="$emit('search', $event)"
+				@trailing-button-click="$emit('search', '')">
+				<template #icon>
+					<Magnify :size="20" />
+				</template>
+			</NcTextField>
+		</div>
+
+		<!-- Filter controls -->
+		<div class="cn-filter-bar__filters">
+			<template v-for="filter in filters">
+				<!-- Select filter -->
+				<NcSelect
+					v-if="filter.type === 'select'"
+					:key="filter.key"
+					class="cn-filter-bar__filter"
+					:value="filter.value"
+					:options="filter.options || []"
+					:placeholder="filter.label"
+					:input-label="filter.label"
+					:clearable="true"
+					@input="onFilterChange(filter.key, $event)" />
+
+				<!-- Text filter -->
+				<NcTextField
+					v-else-if="filter.type === 'text'"
+					:key="filter.key"
+					class="cn-filter-bar__filter"
+					:value="filter.value || ''"
+					:placeholder="filter.label"
+					:label="filter.label"
+					@update:value="onFilterChange(filter.key, $event)" />
+
+				<!-- Checkbox filter -->
+				<NcCheckboxRadioSwitch
+					v-else-if="filter.type === 'checkbox'"
+					:key="filter.key"
+					:checked="!!filter.value"
+					@update:checked="onFilterChange(filter.key, $event)">
+					{{ filter.label }}
+				</NcCheckboxRadioSwitch>
+			</template>
+		</div>
+
+		<!-- Clear all -->
+		<NcButton
+			v-if="showClearAll && hasActiveFilters"
+			class="cn-filter-bar__clear"
+			@click="$emit('clear-all')">
+			{{ clearAllLabel }}
+		</NcButton>
+	</div>
+</template>
+
+<script>
+import { NcTextField, NcSelect, NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'
+import Magnify from 'vue-material-design-icons/Magnify.vue'
+
+/**
+ * CnFilterBar — Search and filter controls row for list views.
+ *
+ * Extracted from the repeated search + filter pattern in CaseList, ClientList,
+ * LeadList, RequestList across Pipelinq and Procest. Supports text search,
+ * select dropdowns, text inputs, and checkbox filters.
+ *
+ * @example
+ * <CnFilterBar
+ *   :search-value="searchTerm"
+ *   search-placeholder="Search clients..."
+ *   :filters="[
+ *     { key: 'type', label: 'All types', type: 'select', options: typeOptions, value: selectedType },
+ *     { key: 'active', label: 'Active only', type: 'checkbox', value: showActiveOnly },
+ *   ]"
+ *   @search="onSearch"
+ *   @filter-change="onFilterChange"
+ *   @clear-all="clearFilters" />
+ */
+export default {
+	name: 'CnFilterBar',
+
+	components: {
+		NcTextField,
+		NcSelect,
+		NcButton,
+		NcCheckboxRadioSwitch,
+		Magnify,
+	},
+
+	props: {
+		/**
+		 * Filter definitions.
+		 * @type {Array<{key: string, label: string, type: 'select'|'text'|'checkbox', options?: Array, value?: *}>}
+		 */
+		filters: {
+			type: Array,
+			default: () => [],
+		},
+		/** Current search text */
+		searchValue: {
+			type: String,
+			default: '',
+		},
+		/** Search input placeholder text */
+		searchPlaceholder: {
+			type: String,
+			default: 'Search...',
+		},
+		/** Whether to show the "Clear all" button */
+		showClearAll: {
+			type: Boolean,
+			default: true,
+		},
+		/** Clear all button label */
+		clearAllLabel: {
+			type: String,
+			default: 'Clear filters',
+		},
+	},
+
+	computed: {
+		hasActiveFilters() {
+			return this.searchValue !== ''
+				|| this.filters.some((f) => f.value !== null && f.value !== '' && f.value !== false)
+		},
+	},
+
+	methods: {
+		/**
+		 * Emit filter change event.
+		 * @param {string} key Filter key
+		 * @param {*} value New filter value
+		 */
+		onFilterChange(key, value) {
+			/**
+			 * @event filter-change Emitted when any filter changes.
+			 * @type {{ key: string, value: * }}
+			 */
+			this.$emit('filter-change', { key, value })
+		},
+	},
+}
+</script>

package/src/components/CnFilterBar/index.js

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

package/src/components/CnIcon/CnIcon.vue

@@ -1,89 +1,89 @@
-<template>
-	<component :is="resolvedComponent" :size="size" />
-</template>
-
-<script>
-import HelpCircleOutline from 'vue-material-design-icons/HelpCircleOutline.vue'
-
-/**
- * Mutable icon registry.
- *
- * Pre-populated with HelpCircleOutline (the default fallback).
- * Apps extend this at boot via registerIcons() — import only the
- * icons you need, keeping bundles small.
- *
- * @example
- * import { registerIcons } from '@conduction/nextcloud-vue'
- * import Sword from 'vue-material-design-icons/Sword.vue'
- * registerIcons({ Sword })
- */
-const _registry = {
-	HelpCircleOutline,
-}
-
-/**
- * Register one or more MDI icon components for use with CnIcon.
- *
- * Call this in your app's main.js before mounting the Vue instance.
- * Each key must be the PascalCase icon name matching the
- * vue-material-design-icons file name (e.g. "Sword" for Sword.vue).
- *
- * @param {Record<string, import('vue').Component>} icons
- *
- * @example
- * import { registerIcons } from '@conduction/nextcloud-vue'
- * import Sword from 'vue-material-design-icons/Sword.vue'
- * import MagicStaff from 'vue-material-design-icons/MagicStaff.vue'
- * registerIcons({ Sword, MagicStaff })
- */
-export function registerIcons(icons) {
-	Object.assign(_registry, icons)
-}
-
-/**
- * Read-only reference to the current icon registry.
- * Useful for checking which icons are available.
- *
- * @type {Record<string, import('vue').Component>}
- */
-export const ICON_MAP = _registry
-
-/**
- * CnIcon — Renders a Material Design Icon by PascalCase name.
- *
- * Looks up the name in the shared registry. If not found, renders
- * the fallback icon (HelpCircleOutline by default).
- *
- * @example
- * <CnIcon name="AccountGroup" :size="24" />
- *
- * @see https://pictogrammers.com/library/mdi/
- */
-export default {
-	name: 'CnIcon',
-
-	props: {
-		/** MDI icon name in PascalCase (e.g. "AccountGroup") */
-		name: {
-			type: String,
-			required: true,
-		},
-		/** Icon pixel size */
-		size: {
-			type: Number,
-			default: 20,
-		},
-		/** Fallback icon name if `name` is not found in the registry */
-		fallback: {
-			type: String,
-			default: 'HelpCircleOutline',
-		},
-	},
-
-	computed: {
-		resolvedComponent() {
-			return _registry[this.name] || _registry[this.fallback] || HelpCircleOutline
-		},
-	},
-}
-</script>
+<template>
+	<component :is="resolvedComponent" :size="size" />
+</template>
+
+<script>
+import HelpCircleOutline from 'vue-material-design-icons/HelpCircleOutline.vue'
+
+/**
+ * Mutable icon registry.
+ *
+ * Pre-populated with HelpCircleOutline (the default fallback).
+ * Apps extend this at boot via registerIcons() — import only the
+ * icons you need, keeping bundles small.
+ *
+ * @example
+ * import { registerIcons } from '@conduction/nextcloud-vue'
+ * import Sword from 'vue-material-design-icons/Sword.vue'
+ * registerIcons({ Sword })
+ */
+const _registry = {
+	HelpCircleOutline,
+}
+
+/**
+ * Register one or more MDI icon components for use with CnIcon.
+ *
+ * Call this in your app's main.js before mounting the Vue instance.
+ * Each key must be the PascalCase icon name matching the
+ * vue-material-design-icons file name (e.g. "Sword" for Sword.vue).
+ *
+ * @param {Record<string, import('vue').Component>} icons
+ *
+ * @example
+ * import { registerIcons } from '@conduction/nextcloud-vue'
+ * import Sword from 'vue-material-design-icons/Sword.vue'
+ * import MagicStaff from 'vue-material-design-icons/MagicStaff.vue'
+ * registerIcons({ Sword, MagicStaff })
+ */
+export function registerIcons(icons) {
+	Object.assign(_registry, icons)
+}
+
+/**
+ * Read-only reference to the current icon registry.
+ * Useful for checking which icons are available.
+ *
+ * @type {Record<string, import('vue').Component>}
+ */
+export const ICON_MAP = _registry
+
+/**
+ * CnIcon — Renders a Material Design Icon by PascalCase name.
+ *
+ * Looks up the name in the shared registry. If not found, renders
+ * the fallback icon (HelpCircleOutline by default).
+ *
+ * @example
+ * <CnIcon name="AccountGroup" :size="24" />
+ *
+ * @see https://pictogrammers.com/library/mdi/
+ */
+export default {
+	name: 'CnIcon',
+
+	props: {
+		/** MDI icon name in PascalCase (e.g. "AccountGroup") */
+		name: {
+			type: String,
+			required: true,
+		},
+		/** Icon pixel size */
+		size: {
+			type: Number,
+			default: 20,
+		},
+		/** Fallback icon name if `name` is not found in the registry */
+		fallback: {
+			type: String,
+			default: 'HelpCircleOutline',
+		},
+	},
+
+	computed: {
+		resolvedComponent() {
+			return _registry[this.name] || _registry[this.fallback] || HelpCircleOutline
+		},
+	},
+}
+</script>

package/src/components/CnIcon/index.js

@@ -1 +1 @@
-export { default as CnIcon, ICON_MAP, registerIcons } from './CnIcon.vue'
+export { default as CnIcon, ICON_MAP, registerIcons } from './CnIcon.vue'