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

package/src/css/CnSchemaFormDialog.css

@@ -0,0 +1,546 @@
+.cn-schema-form__detail-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+  margin-bottom: 20px;
+  padding: 0 20px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.cn-schema-form__detail-item {
+  display: flex;
+  flex-direction: column;
+  padding: 15px;
+  background-color: var(--color-background-hover);
+  border-radius: var(--border-radius);
+  border-left: 3px solid var(--color-primary);
+  box-shadow: 0 1px 3px var(--color-box-shadow);
+  transition: transform var(--animation-quick) ease,
+    box-shadow var(--animation-quick) ease;
+}
+.cn-schema-form__detail-item:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 6px var(--color-box-shadow);
+}
+
+.cn-schema-form__detail-label {
+  font-weight: bold;
+  color: var(--color-text-maxcontrast);
+  margin-bottom: 5px;
+  font-size: 0.9em;
+}
+
+.cn-schema-form__detail-value {
+  word-break: break-word;
+  color: var(--color-main-text);
+  line-height: 1.4;
+}
+
+.cn-schema-form__id-card {
+  background-color: var(--color-background-hover);
+  border-left-color: var(--color-primary-element);
+}
+
+.cn-schema-form__id-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 5px;
+}
+
+.cn-schema-form__id-card .cn-schema-form__detail-value {
+  word-break: break-all;
+  margin-top: 4px;
+  font-family: monospace;
+  font-size: 0.9em;
+  background-color: var(--color-background-dark);
+  padding: 4px 6px;
+  border-radius: var(--border-radius-small);
+}
+
+.cn-schema-form__uuid-value {
+  font-size: 0.9em;
+  color: var(--color-text-maxcontrast);
+  font-family: monospace;
+  margin-top: 4px;
+  display: block;
+  background-color: var(--color-background-dark);
+  padding: 4px 6px;
+  border-radius: var(--border-radius-small);
+}
+
+.cn-schema-form__copy-button {
+  height: 30px;
+  flex-shrink: 0;
+  margin-top: 5px;
+}
+
+/* Tab container */
+.cn-schema-form__tabContainer {
+  margin-top: 20px;
+}
+
+.cn-schema-form__tabContainer > * ul > li {
+  display: flex;
+  flex: 1;
+}
+
+.cn-schema-form__tabContainer > * ul > li > a {
+  flex: 1;
+  text-align: center;
+}
+
+.cn-schema-form__tabContainer > * ul > li > .active {
+  background: transparent !important;
+  color: var(--color-main-text) !important;
+  border-bottom: var(--default-grid-baseline) solid var(--color-primary-element) !important;
+}
+
+.cn-schema-form__tabContainer > * ul[role="tablist"] {
+  display: flex;
+  margin: 10px 8px 0 8px;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.cn-schema-form__tabContainer > * ul[role="tablist"] > * a[role="tab"] {
+  padding-inline-start: 10px;
+  padding-inline-end: 10px;
+  padding-block-start: 10px;
+  padding-block-end: 10px;
+}
+
+.cn-schema-form__tabContainer > * div[role="tabpanel"] {
+  margin-block-start: var(--OR-margin-10);
+}
+
+/* Table styles */
+.cn-schema-form__scrollable {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.cn-schema-form__viewTable {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: var(--color-main-background);
+}
+
+.cn-schema-form__viewTable th,
+.cn-schema-form__viewTable td {
+  padding: 12px;
+  text-align: left;
+  border-bottom: 1px solid var(--color-border);
+  vertical-align: middle;
+}
+
+.cn-schema-form__viewTable th {
+  background: var(--color-background-hover);
+  font-weight: 500;
+  color: var(--color-text-maxcontrast);
+  background-color: var(--color-background-dark);
+}
+
+.cn-schema-form__viewTable tbody tr.cn-schema-form__selected-row {
+  background-color: var(--color-primary-light);
+  border-left: 3px solid var(--color-primary);
+}
+
+.cn-schema-form__viewTable tbody tr.cn-schema-form__selected-row:hover {
+  background-color: var(--color-primary-light);
+}
+
+.cn-schema-form__viewTable tbody tr.cn-schema-form__modified-row {
+  background-color: var(--color-warning);
+  border-left: 3px solid var(--color-element-warning);
+}
+
+.cn-schema-form__viewTable tbody tr.cn-schema-form__modified-row:hover {
+  background-color: var(--color-warning);
+}
+
+.cn-schema-form__viewTable tbody tr.cn-schema-form__modified-row.cn-schema-form__selected-row {
+  background-color: var(--color-primary-light);
+  border-left: 3px solid var(--color-primary);
+}
+
+/* Form editor */
+.cn-schema-form__form-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+}
+
+/* Property row inline editing */
+.cn-schema-form__name-input-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.cn-schema-form__warning-icon {
+  color: var(--color-warning-text);
+  flex-shrink: 0;
+}
+
+/* Table column widths */
+.cn-schema-form__tableColumnActions {
+  width: 150px;
+  text-align: right;
+}
+
+/* Table actions button */
+.cn-schema-form__table-actions {
+  margin-bottom: 15px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* Enum preview styling */
+.cn-schema-form__enum-preview {
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.cn-schema-form__enum-label {
+  color: var(--color-text-maxcontrast);
+  font-size: 11px;
+  font-weight: 500;
+  margin-right: 4px;
+}
+
+.cn-schema-form__enum-value-chip {
+  background: var(--color-primary-light);
+  color: var(--color-primary-light-text);
+  padding: 2px 6px;
+  border-radius: var(--border-radius-container);
+  font-size: 10px;
+  font-weight: 500;
+  border: 1px solid var(--color-primary-element-light);
+}
+
+.cn-schema-form__property-chip.cn-schema-form__chip-info {
+  background: var(--color-info);
+  color: var(--color-primary-text);
+}
+
+.cn-schema-form__property-chip.cn-schema-form__chip-table {
+  background: var(--color-primary);
+  color: var(--color-primary-text);
+}
+
+/* Enum chip styling for action menu using NcActionButton */
+.cn-schema-form__enum-action-chip {
+  background: var(--color-primary-element-light) !important;
+  border-radius: var(--border-radius-container-large) !important;
+  margin: 2px 4px !important;
+  padding: 4px 12px !important;
+}
+
+.cn-schema-form__enum-action-chip:hover {
+  background: var(--color-primary-element) !important;
+}
+
+.cn-schema-form__enum-action-chip .action-button__text {
+  color: var(--color-primary-text) !important;
+  font-size: 12px !important;
+  font-weight: 500 !important;
+}
+
+.cn-schema-form__enum-action-chip .action-button__icon {
+  color: var(--color-primary-text) !important;
+}
+
+/* RBAC Security Tab Styling */
+.cn-schema-form__security-section {
+  padding: 20px 0;
+}
+
+.cn-schema-form__loading-groups {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 20px;
+  justify-content: center;
+}
+
+.cn-schema-form__rbac-table-container {
+  margin-top: 20px;
+}
+
+.cn-schema-form__rbac-table-container h3 {
+  margin-bottom: 15px;
+  color: var(--color-main-text);
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.cn-schema-form__rbac-table {
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid var(--color-border-dark);
+  border-radius: var(--border-radius-element);
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(var(--color-box-shadow-rgb), 0.1);
+}
+
+.cn-schema-form__rbac-table th {
+  background: var(--color-background-dark);
+  color: var(--color-main-text);
+  font-weight: 600;
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 2px solid var(--color-border-dark);
+}
+
+.cn-schema-form__rbac-table th:first-child {
+  width: 40%;
+}
+
+.cn-schema-form__rbac-table th:not(:first-child) {
+  width: 15%;
+  text-align: center;
+}
+
+.cn-schema-form__rbac-table td {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--color-border);
+  vertical-align: middle;
+}
+
+.cn-schema-form__rbac-table td:not(.cn-schema-form__group-name) {
+  text-align: center;
+}
+
+.cn-schema-form__rbac-table tr:hover {
+  background: var(--color-background-hover);
+}
+
+.cn-schema-form__public-row {
+  background: var(--color-primary-light) !important;
+}
+
+.cn-schema-form__user-row {
+  background: var(--color-warning) !important;
+}
+
+.cn-schema-form__admin-row {
+  background: var(--color-success) !important;
+}
+
+.cn-schema-form__admin-row:hover {
+  background: var(--color-success) !important;
+}
+
+.cn-schema-form__group-name {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.cn-schema-form__group-badge {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: var(--border-radius-container);
+  font-size: 12px;
+  font-weight: 600;
+  background: var(--color-primary-element-light);
+  color: var(--color-primary-light-text);
+}
+
+.cn-schema-form__group-badge.cn-schema-form__public {
+  background: var(--color-info);
+  color: var(--color-primary-text);
+}
+
+.cn-schema-form__group-badge.cn-schema-form__user {
+  background: var(--color-warning);
+  color: var(--color-warning-text);
+}
+
+.cn-schema-form__group-badge.cn-schema-form__admin {
+  background: var(--color-success);
+  color: var(--color-success-text);
+}
+
+.cn-schema-form__group-name small {
+  color: var(--color-text-maxcontrast);
+  font-size: 11px;
+  font-style: italic;
+}
+
+.cn-schema-form__rbac-summary {
+  margin-top: 20px;
+}
+
+/* Property-level RBAC Styling - Action Menu Based */
+.cn-schema-form__property-permission-text {
+  font-family: monospace;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.cn-schema-form__property-permission-remove-btn {
+  font-size: 11px;
+  color: var(--color-error);
+}
+
+/* Schema Extension Status Pill */
+.cn-schema-form__statusPill {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: var(--border-radius-container);
+  font-size: 0.75em;
+  font-weight: 600;
+  text-transform: uppercase;
+  margin-left: 8px;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.cn-schema-form__statusPill--alert {
+  background-color: var(--color-warning);
+  color: var(--color-warning-text);
+}
+
+/* Title with badge layout */
+.cn-schema-form__title-with-badge {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.cn-schema-form__title-with-badge > :first-child {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Parent schema link styling */
+.cn-schema-form__parent-schema-link {
+  margin-top: 12px;
+  padding: 8px 12px;
+  background-color: var(--color-background-dark);
+  border-radius: var(--border-radius);
+  font-size: 0.9em;
+}
+
+.cn-schema-form__parent-schema-link strong {
+  color: var(--color-main-text);
+}
+
+/* Extend info card styling */
+.cn-schema-form__extend-info {
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+
+.cn-schema-form__extend-info p {
+  margin: 8px 0;
+}
+
+.cn-schema-form__extend-info p:first-of-type {
+  margin-top: 0;
+}
+
+.cn-schema-form__extend-info p:last-of-type {
+  margin-bottom: 0;
+}
+
+/* Property name with chips (moved from openregister/css/main.css) */
+.cn-schema-form__name-display-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.cn-schema-form__name-with-chips {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.cn-schema-form__inline-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+}
+
+.cn-schema-form__property-chip {
+  display: inline-block;
+  padding: 2px 6px;
+  border-radius: var(--border-radius-pill);
+  font-size: 0.7em;
+  font-weight: 500;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.cn-schema-form__chip-primary {
+  background-color: var(--color-primary-element-light);
+  color: var(--color-primary-element-text);
+}
+
+.cn-schema-form__chip-secondary {
+  background-color: var(--color-background-dark);
+  color: var(--color-text-maxcontrast);
+  border: 1px solid var(--color-border);
+}
+
+.cn-schema-form__chip-warning {
+  background-color: var(--color-warning);
+  color: var(--color-warning-text);
+}
+
+.cn-schema-form__chip-success {
+  background-color: var(--color-success);
+  color: var(--color-success-text);
+}
+
+.cn-schema-form__properties-warning {
+  margin-top: 15px;
+}
+
+/* Copied from openregister — also used in other files */
+.cn-schema-form__property-name {
+  font-weight: 500;
+}
+
+.cn-schema-form__statusPill--success {
+  background-color: var(--color-success);
+  color: var(--color-success-text);
+}
+
+.cn-schema-form__statusPill--info {
+  background-color: var(--color-info);
+  color: var(--color-info-text);
+}
+
+/* Copied from openregister/SolrWarmupModal — also used in other files */
+.cn-schema-form__schema-option {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.cn-schema-form__option-title {
+  font-weight: 500;
+}
+.cn-schema-form__option-description {
+  font-size: 0.875rem;
+  color: var(--color-text-maxcontrast);
+  max-width: 100%;
+  white-space: normal;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;  
+  overflow: hidden;
+}

package/src/css/__sample_nextcloud_tokens.css

@@ -0,0 +1,110 @@
+.sample {
+    /* default.css */
+    --color-main-background: #171717;
+    --color-main-background-rgb: 23, 23, 23;
+    --color-main-background-translucent: rgba(var(--color-main-background-rgb), 0.97);
+    --color-main-background-blur: rgba(var(--color-main-background-rgb), 0.85);
+    --filter-background-blur: none;
+    --gradient-main-background: var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
+    --color-background-hover: #212121;
+    --color-background-dark: #292929;
+    --color-background-darker: #3b3b3b;
+    --color-placeholder-light: #313131;
+    --color-placeholder-dark: #4a4a4a;
+    --color-main-text: #ebebeb;
+    --color-text-maxcontrast: #999999;
+    --color-text-maxcontrast-default: #999999;
+    --color-text-maxcontrast-background-blur: #a8a8a8;
+    --color-text-error: #ff6f6f;
+    --color-text-success: #49bb37;
+    --color-border: #292929;
+    --color-border-dark: #3b3b3b;
+    --color-border-maxcontrast: #7d7d7d;
+    --color-border-error: var(--color-element-error);
+    --color-border-success: var(--color-element-success);
+    --color-element-error: #ff5050;
+    --color-element-info: #0099e0;
+    --color-element-success: #40a330;
+    --color-element-warning: #ffcc00;
+    --color-error: #552121;
+    --color-error-hover: #7a2f2f;
+    --color-error-text: #ffcccc;
+    --color-warning: #3d3010;
+    --color-warning-hover: #65501b;
+    --color-warning-text: #ffeec5;
+    --color-success: #11321a;
+    --color-success-hover: #1e582e;
+    --color-success-text: #d5f2dc;
+    --color-info: #003553;
+    --color-info-hover: #005686;
+    --color-info-text: #00aeff;
+    --color-favorite: #ffde00;
+    --color-error-rgb: 85, 33, 33;
+    --color-warning-rgb: 61, 48, 16;
+    --color-success-rgb: 17, 50, 26;
+    --color-info-rgb: 0, 53, 83;
+    --color-loading-light: #777;
+    --color-loading-dark: #ccc;
+    --color-scrollbar: var(--color-border-maxcontrast) transparent;
+    --color-box-shadow-rgb: 0, 0, 0;
+    --color-box-shadow: #000000;
+    --color-background-assistant: #221d2b;
+    --color-border-assistant: linear-gradient(125deg, #0c3a65 50%, #6204a5 125%);
+    --color-element-assistant: linear-gradient(214deg, #c8a3e8 12%, #007cff 39%, #c297dd 86%);
+    --color-element-assistant-icon: linear-gradient(214deg, #cdace7 15.28%, #008fdb 39.98%, #a180e0 82.05%);
+    --font-face: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans,
+    Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
+    --default-font-size: 15px;
+    --font-size-small: 13px;
+    --default-line-height: 1.5;
+    --animation-quick: 100ms;
+    --animation-slow: 300ms;
+    --border-width-input: 1px;
+    --border-width-input-focused: 2px;
+    --border-radius-small: 4px;
+    --border-radius-element: 8px;
+    --border-radius-container: 12px;
+    --border-radius-container-large: 16px;
+    --border-radius: var(--border-radius-small);
+    --border-radius-large: var(--border-radius-element);
+    --border-radius-rounded: 28px;
+    --border-radius-pill: 100px;
+    --default-clickable-area: 34px;
+    --clickable-area-large: 48px;
+    --clickable-area-small: 24px;
+    --default-grid-baseline: 4px;
+    --header-height: 50px;
+    --header-menu-item-height: 44px;
+    --header-menu-icon-mask: linear-gradient(var(--color-background-plain-text) 25%, color-mix(in srgb, var(--color-background-plain-text), 55% transparent) 90%) alpha;
+    --navigation-width: 300px;
+    --sidebar-min-width: 300px;
+    --sidebar-max-width: 500px;
+    --body-container-radius: var(--border-radius-container-large);
+    --body-container-margin: calc(var(--default-grid-baseline) * 2);
+    --body-height: calc(100% - env(safe-area-inset-bottom) - var(--header-height) - var(--body-container-margin));
+    --breakpoint-mobile: 1024px;
+    --background-invert-if-dark: invert(100%);
+    --background-invert-if-bright: no;
+    --background-image-invert-if-bright: no;
+    --primary-invert-if-bright: invert(100%);
+    --primary-invert-if-dark: no;
+    --color-primary: #00679e;
+    --color-primary-text: #ffffff;
+    --color-primary-hover: #045783;
+    --color-primary-element: #0091f2;
+    --color-primary-element-hover: #17a2ff;
+    --color-primary-element-text: #000000;
+    --color-primary-element-text-dark: #121212;
+    --color-primary-light: #14232c;
+    --color-primary-light-hover: #1f2e36;
+    --color-primary-light-text: #99c2d8;
+    --color-primary-element-light: var(--color-primary-light);
+    --color-primary-element-light-text: var(--color-primary-light-text);
+    --color-primary-element-light-hover: var(--color-primary-light-hover);
+    --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
+    --color-background-plain: #00679e;
+    --color-background-plain-text: #ffffff;
+    --image-background: url("/apps/theming/img/background/jo-myoung-hee-fluid-dark.webp");
+}