@conduction/nextcloud-vue 0.1.0-beta.1 → 0.1.0-beta.11

package/src/css/badge.css

@@ -1,51 +1,83 @@
-/* ========================================
-   @conduction/nextcloud-vue — Status Badge
-   ======================================== */
-
-.cn-status-badge {
-	display: inline-flex;
-	align-items: center;
-	padding: 2px 10px;
-	border-radius: var(--border-radius-pill);
-	font-size: 0.85em;
-	font-weight: 500;
-	line-height: 1.4;
-	white-space: nowrap;
-}
-
-/* Size variants */
-.cn-status-badge--small {
-	padding: 1px 8px;
-	font-size: 0.75em;
-}
-
-/* Color variants */
-.cn-status-badge--default {
-	background-color: var(--color-background-dark);
-	color: var(--color-main-text);
-}
-
-.cn-status-badge--primary {
-	background-color: var(--nldesign-color-primary-light, var(--color-primary-element-light));
-	color: var(--nldesign-color-primary, var(--color-primary-element));
-}
-
-.cn-status-badge--success {
-	background-color: var(--color-success-light, rgba(70, 186, 97, 0.15));
-	color: var(--color-success);
-}
-
-.cn-status-badge--warning {
-	background-color: var(--color-warning-light, rgba(232, 163, 39, 0.15));
-	color: var(--color-warning-text, var(--color-warning));
-}
-
-.cn-status-badge--error {
-	background-color: var(--color-error-light, rgba(224, 68, 68, 0.15));
-	color: var(--color-error);
-}
-
-.cn-status-badge--info {
-	background-color: var(--color-info-light, rgba(0, 130, 201, 0.15));
-	color: var(--color-info, #0082c9);
-}
+/* ========================================
+   @conduction/nextcloud-vue — Status Badge
+   ======================================== */
+
+.cn-status-badge {
+	display: inline-flex;
+	align-items: center;
+	gap: calc(0.5 * var(--default-grid-baseline));
+	padding: calc(0.5 * var(--default-grid-baseline)) calc(2.5 * var(--default-grid-baseline));
+	border-radius: var(--border-radius-pill);
+	font-size: 0.85em;
+	font-weight: 500;
+	line-height: 1.4;
+	white-space: nowrap;
+}
+
+/* Size variants */
+.cn-status-badge--small {
+	padding: calc(0.25 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));
+	font-size: 0.75em;
+}
+
+/* Color variants */
+.cn-status-badge--default {
+	background-color: var(--color-background-dark);
+	color: var(--color-main-text);
+}
+
+.cn-status-badge--primary {
+	background-color: var(--color-primary-element-light);
+	color: var(--color-primary-element);
+}
+
+.cn-status-badge--success {
+	background-color: var(--color-success-light, rgba(70, 186, 97, 0.15));
+	color: var(--color-success);
+}
+
+.cn-status-badge--warning {
+	background-color: var(--color-warning-light, rgba(232, 163, 39, 0.15));
+	color: var(--color-warning-text, var(--color-warning));
+}
+
+.cn-status-badge--error {
+	background-color: var(--color-error-light, rgba(224, 68, 68, 0.15));
+	color: var(--color-error);
+}
+
+.cn-status-badge--info {
+	background-color: var(--color-info-light, rgba(0, 130, 201, 0.15));
+	color: var(--color-info, #0082c9);
+}
+
+/* Solid variants — solid background with white text for use on colored backgrounds */
+.cn-status-badge--solid.cn-status-badge--default {
+	background-color: var(--color-background-dark);
+	color: var(--color-main-text);
+}
+
+.cn-status-badge--solid.cn-status-badge--primary {
+	background-color: var(--color-primary-element);
+	color: white;
+}
+
+.cn-status-badge--solid.cn-status-badge--success {
+	background-color: var(--color-success);
+	color: white;
+}
+
+.cn-status-badge--solid.cn-status-badge--warning {
+	background-color: var(--color-warning);
+	color: var(--color-primary-text);
+}
+
+.cn-status-badge--solid.cn-status-badge--error {
+	background-color: var(--color-error);
+	color: white;
+}
+
+.cn-status-badge--solid.cn-status-badge--info {
+	background-color: var(--color-info, #0082c9);
+	color: white;
+}

package/src/css/card.css

@@ -1,128 +1,129 @@
-/* ========================================
-   @conduction/nextcloud-vue — Card Styles
-   ======================================== */
-
-/* Card Grid */
-.cn-card-grid {
-	display: grid;
-	gap: 1.5rem;
-	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-}
-
-/* Base Card */
-.cn-card {
-	background: var(--color-main-background);
-	border-radius: 8px;
-	padding: 20px;
-	box-shadow: 0 2px 8px var(--color-box-shadow);
-	min-height: 200px;
-	transition: transform 0.2s ease-in-out;
-	border: 1px solid var(--color-border);
-}
-
-.cn-card:hover {
-	transform: scale(1.01);
-	box-shadow: 0 4px 12px var(--color-box-shadow);
-}
-
-/* Card Header */
-.cn-card-header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-	margin-bottom: 12px;
-	padding-bottom: 8px;
-	border-bottom: 1px solid var(--color-border);
-}
-
-.cn-card-header h2,
-.cn-card-header h3 {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	margin: 0;
-	color: var(--color-main-text);
-}
-
-.cn-card-header h2 { font-size: 1.2em; }
-.cn-card-header h3 { font-size: 1.1em; }
-
-/* Settings Card */
-.cn-settings-card {
-	background: var(--color-background-hover);
-	border-radius: var(--border-radius-large);
-	padding: 20px;
-	margin-bottom: 20px;
-}
-
-.cn-settings-card h4 {
-	margin: 0 0 16px 0;
-	color: var(--color-main-text);
-	font-size: 16px;
-	font-weight: 600;
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.cn-settings-card--collapsible h4 {
-	cursor: pointer;
-	user-select: none;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	transition: color 0.2s ease;
-	margin-bottom: 0;
-}
-
-.cn-settings-card--collapsible h4:hover {
-	color: var(--color-primary-element);
-}
-
-.cn-settings-card__chevron {
-	transition: transform 0.3s ease;
-	color: var(--color-text-maxcontrast);
-}
-
-.cn-settings-card--collapsible h4:hover .cn-settings-card__chevron {
-	color: var(--color-primary-element);
-}
-
-.cn-settings-card__content {
-	padding-top: 16px;
-}
-
-/* Stat Grid */
-.cn-stat-grid {
-	display: grid;
-	grid-template-columns: repeat(2, 1fr);
-	gap: 12px;
-	margin-bottom: 16px;
-}
-
-.cn-stat-item {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.cn-stat-label {
-	color: var(--color-text-maxcontrast);
-	font-size: 0.9em;
-}
-
-.cn-stat-value {
-	font-size: 1.1em;
-	font-weight: 600;
-}
-
-/* Backwards compatibility aliases */
-.cardGrid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
-.card { background: var(--color-main-background); border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px var(--color-box-shadow); min-height: 200px; transition: transform 0.2s ease-in-out; border: 1px solid var(--color-border); }
-.card:hover { transform: scale(1.01); box-shadow: 0 4px 12px var(--color-box-shadow); }
-.cardHeader { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
-.statGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
-.statItem { display: flex; flex-direction: column; gap: 4px; }
-.statLabel { color: var(--color-text-maxcontrast); font-size: 0.9em; }
-.statValue { font-size: 1.1em; font-weight: 600; }
+/* ========================================
+   @conduction/nextcloud-vue — Card Styles
+   ======================================== */
+
+/* Card Grid */
+.cn-card-grid {
+	display: grid;
+	gap: calc(4 * var(--default-grid-baseline));
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	padding: 0.25rem;
+}
+
+/* Base Card */
+.cn-card {
+	background: var(--color-main-background);
+	border-radius: var(--border-radius-large);
+	padding: calc(5 * var(--default-grid-baseline));
+	box-shadow: 0 2px 8px var(--color-box-shadow);
+	min-height: 200px;
+	transition: transform var(--animation-quick) ease-in-out;
+	border: 1px solid var(--color-border);
+}
+
+.cn-card:hover {
+	transform: scale(1.01);
+	box-shadow: 0 4px 12px var(--color-box-shadow);
+}
+
+/* Card Header */
+.cn-card-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: calc(2 * var(--default-grid-baseline));
+	margin-bottom: calc(3 * var(--default-grid-baseline));
+	padding-bottom: calc(2 * var(--default-grid-baseline));
+	border-bottom: 1px solid var(--color-border);
+}
+
+.cn-card-header h2,
+.cn-card-header h3 {
+	display: flex;
+	align-items: center;
+	gap: calc(2 * var(--default-grid-baseline));
+	margin: 0;
+	color: var(--color-main-text);
+}
+
+.cn-card-header h2 { font-size: 1.2em; }
+.cn-card-header h3 { font-size: 1.1em; }
+
+/* Settings Card */
+.cn-settings-card {
+	background: var(--color-background-hover);
+	border-radius: var(--border-radius-large);
+	padding: calc(5 * var(--default-grid-baseline));
+	margin-bottom: calc(5 * var(--default-grid-baseline));
+}
+
+.cn-settings-card h4 {
+	margin: 0 0 calc(4 * var(--default-grid-baseline)) 0;
+	color: var(--color-main-text);
+	font-size: 16px;
+	font-weight: 600;
+	display: flex;
+	align-items: center;
+	gap: calc(2 * var(--default-grid-baseline));
+}
+
+.cn-settings-card--collapsible h4 {
+	cursor: pointer;
+	user-select: none;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	transition: color var(--animation-quick) ease;
+	margin-bottom: 0;
+}
+
+.cn-settings-card--collapsible h4:hover {
+	color: var(--color-primary-element);
+}
+
+.cn-settings-card__chevron {
+	transition: transform var(--animation-slow) ease;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-settings-card--collapsible h4:hover .cn-settings-card__chevron {
+	color: var(--color-primary-element);
+}
+
+.cn-settings-card__content {
+	padding-top: calc(4 * var(--default-grid-baseline));
+}
+
+/* Stat Grid */
+.cn-stat-grid {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: calc(3 * var(--default-grid-baseline));
+	margin-bottom: calc(4 * var(--default-grid-baseline));
+}
+
+.cn-stat-item {
+	display: flex;
+	flex-direction: column;
+	gap: var(--default-grid-baseline);
+}
+
+.cn-stat-label {
+	color: var(--color-text-maxcontrast);
+	font-size: 0.9em;
+}
+
+.cn-stat-value {
+	font-size: 1.1em;
+	font-weight: 600;
+}
+
+/* Backwards compatibility aliases */
+.cardGrid { display: grid; gap: calc(4 * var(--default-grid-baseline)); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
+.card { background: var(--color-main-background); border-radius: var(--border-radius-large); padding: calc(5 * var(--default-grid-baseline)); box-shadow: 0 2px 8px var(--color-box-shadow); min-height: 200px; transition: transform var(--animation-quick) ease-in-out; border: 1px solid var(--color-border); }
+.card:hover { transform: scale(1.01); box-shadow: 0 4px 12px var(--color-box-shadow); }
+.cardHeader { display: flex; align-items: center; justify-content: space-between; gap: calc(2 * var(--default-grid-baseline)); margin-bottom: calc(3 * var(--default-grid-baseline)); padding-bottom: calc(2 * var(--default-grid-baseline)); border-bottom: 1px solid var(--color-border); }
+.statGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(3 * var(--default-grid-baseline)); margin-bottom: calc(4 * var(--default-grid-baseline)); }
+.statItem { display: flex; flex-direction: column; gap: var(--default-grid-baseline); }
+.statLabel { color: var(--color-text-maxcontrast); font-size: 0.9em; }
+.statValue { font-size: 1.1em; font-weight: 600; }

package/src/css/context-menu.css

@@ -0,0 +1,20 @@
+/* useContextMenu — Position the context menu popper at cursor coordinates.
+ *
+ * Works with any NcActions that uses useContextMenu().
+ * The data attribute ensures transforms only apply when a context menu is active,
+ * avoiding interference with regular NcActions poppers.
+ */
+html[data-cn-ctx-menu] .v-popper__popper {
+	transform: translate3d(var(--cn-ctx-menu-x), var(--cn-ctx-menu-y), 0px) !important;
+}
+html[data-cn-ctx-menu] .v-popper__popper[data-popper-placement="top"] {
+	transform: translate3d(var(--cn-ctx-menu-x), calc(var(--cn-ctx-menu-y) - 50vh + 34px), 0px) !important;
+}
+html[data-cn-ctx-menu] .v-popper__popper .v-popper__arrow-container {
+	display: none;
+}
+
+/* Destructive action styling (shared across all context menus) */
+html[data-cn-ctx-menu] .cn-row-action--destructive {
+	color: var(--color-error) !important;
+}

package/src/css/dashboard.css

@@ -0,0 +1,70 @@
+/* @conduction/nextcloud-vue — Dashboard component styles */
+
+/* Dashboard page layout */
+.cn-dashboard-page {
+	padding: 20px;
+	max-width: 1400px;
+}
+
+/* Widget grid item borders for non-tile widgets */
+.cn-dashboard-grid :deep(.grid-stack-item-content:has(.cn-widget-wrapper)) {
+	border: 1px solid var(--color-border);
+}
+
+/* Dashboard widget content area */
+.cn-dashboard-widget-content {
+	padding: 16px;
+}
+
+/* Dashboard KPI row inside grid */
+.cn-dashboard-kpi-row {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 16px;
+	height: 100%;
+}
+
+/* Dashboard chart container */
+.cn-dashboard-chart {
+	padding: 16px;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.cn-dashboard-chart__title {
+	margin: 0 0 12px;
+	font-size: 15px;
+	font-weight: 600;
+}
+
+.cn-dashboard-chart__content {
+	flex: 1;
+	min-height: 0;
+	overflow: auto;
+}
+
+/* Dashboard list widget */
+.cn-dashboard-list {
+	padding: 0;
+	margin: 0;
+	list-style: none;
+}
+
+.cn-dashboard-list__item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 16px;
+	cursor: pointer;
+	border-bottom: 1px solid var(--color-border-dark);
+}
+
+.cn-dashboard-list__item:last-child {
+	border-bottom: none;
+}
+
+.cn-dashboard-list__item:hover {
+	background: var(--color-background-hover);
+}