vitepress-plugin-filelist 0.4.0 → 0.5.0

package/dist/client/style.css

@@ -18,6 +18,10 @@
   --fl-sticky: var(--fl-sticky-top, var(--fl-sticky-top-auto, 0px));
   --fl-folder-fill: #f5c451;
   --fl-folder-stroke: #d9a22b;
+  --fl-lock-bg: #fbf7ec;
+  --fl-lock-fg: #8a5a08;
+  --fl-error-bg: #fdf0ef;
+  --fl-error-fg: #b42318;
 
   --fl-k-doc-bg: #e8f0fc;
   --fl-k-doc-fg: #1f5fbf;
@@ -50,6 +54,10 @@
 .dark .fl-root {
   --fl-folder-fill: #d8a634;
   --fl-folder-stroke: #b4851c;
+  --fl-lock-bg: rgb(216 166 52 / 12%);
+  --fl-lock-fg: #e3b45a;
+  --fl-error-bg: rgb(240 84 96 / 12%);
+  --fl-error-fg: #ff9aa0;
 
   --fl-k-doc-bg: rgb(88 142 240 / 18%);
   --fl-k-doc-fg: #9cc0ff;
@@ -276,28 +284,6 @@
   opacity: 0.7;
 }
 
-.fl-password {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-  padding: 10px 12px;
-  color: var(--vp-c-text-1);
-  background: var(--vp-c-warning-soft, var(--vp-c-bg-soft));
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.fl-password input {
-  height: 32px;
-  box-sizing: border-box;
-  padding: 0 10px;
-  font: inherit;
-  color: var(--vp-c-text-1);
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-}
-
 /* ---------------- table ---------------- */
 
 .fl-row {
@@ -321,6 +307,7 @@
 }
 
 .fl-head {
+  position: relative;
   min-height: 36px;
   font-size: 12px;
   font-weight: 600;
@@ -531,6 +518,242 @@
   transform: rotate(90deg);
 }
 
+/* ---------------- refresh ---------------- */
+
+/* indeterminate bar on the header's top edge: overlays the border, takes no space */
+.fl-progress {
+  position: absolute;
+  top: -1px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  overflow: hidden;
+  pointer-events: none;
+  background: var(--vp-c-brand-soft);
+}
+
+.fl-progress::after {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 40%;
+  content: '';
+  background: var(--vp-c-brand-1);
+  animation: fl-progress 1.1s ease-in-out infinite;
+}
+
+@keyframes fl-progress {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(250%); }
+}
+
+.fl-refreshing .fl-row:not(.fl-head) {
+  pointer-events: none;
+  opacity: 0.5;
+  transition: opacity 0.15s;
+}
+
+.fl-spinning svg {
+  animation: fl-spin 0.8s linear infinite;
+}
+
+.fl-icon-btn.fl-spinning {
+  color: var(--vp-c-brand-1);
+  border-color: var(--vp-c-brand-1);
+}
+
+.fl-icon-btn:disabled {
+  cursor: progress;
+}
+
+@keyframes fl-spin {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fl-progress::after {
+    animation: none;
+    transform: none;
+  }
+
+  .fl-spinning svg {
+    animation: none;
+  }
+}
+
+/* ---------------- folder passwords (same-row, no layout shift) ---------------- */
+
+.fl-row.fl-row-locked {
+  background: var(--fl-lock-bg);
+}
+
+.fl-row.fl-row-error {
+  background: var(--fl-error-bg);
+}
+
+.fl-lock {
+  color: var(--fl-lock-fg);
+}
+
+.fl-row-error .fl-lock {
+  color: var(--fl-error-fg);
+}
+
+.fl-row-locked .fl-cell-check input {
+  cursor: not-allowed;
+}
+
+.fl-unlock {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  min-width: 0;
+}
+
+.fl-unlock-row {
+  grid-column: 3 / -1;
+  justify-content: flex-end;
+  padding-left: 8px;
+}
+
+.fl-unlock input {
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 60px;
+  height: 28px;
+  box-sizing: border-box;
+  padding: 0 8px;
+  font: inherit;
+  font-size: 13px;
+  color: var(--vp-c-text-1);
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-brand-1);
+  border-radius: 7px;
+}
+
+.fl-unlock input[aria-invalid='true'] {
+  border-color: var(--fl-error-fg);
+}
+
+/* Wide rows show the error beside the folder name, so the empty input only turns red. */
+.fl-unlock input[aria-invalid='true']::placeholder {
+  color: transparent;
+}
+
+.fl-unlock-remember,
+.fl-unlock-cancel {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 7px;
+}
+
+.fl-unlock-cancel {
+  background: transparent;
+  border-color: transparent;
+}
+
+.fl-unlock-remember[aria-pressed='true'] {
+  color: var(--vp-c-brand-1);
+  background: var(--vp-c-brand-soft);
+  border-color: var(--vp-c-brand-1);
+}
+
+.fl-unlock-submit {
+  flex: none;
+  height: 28px;
+  padding: 0 12px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--vp-button-brand-text, #fff);
+  white-space: nowrap;
+  cursor: pointer;
+  background: var(--vp-button-brand-bg, var(--vp-c-brand-3));
+  border: 0;
+  border-radius: 7px;
+}
+
+.fl-unlock-submit:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.fl-unlock-lock {
+  display: none;
+  flex: none;
+  color: var(--fl-lock-fg);
+}
+
+.fl-unlock-message {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 12px;
+  color: var(--fl-error-fg);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* single-path mode: the listed folder itself is locked; sits where "loading" would */
+.fl-unlock-root {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 10px;
+  align-items: center;
+  min-height: var(--fl-row-h);
+  box-sizing: border-box;
+  padding: 10px 16px;
+  color: var(--vp-c-text-1);
+  background: var(--fl-lock-bg);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.fl-unlock-root.fl-unlock-error {
+  background: var(--fl-error-bg);
+}
+
+.fl-unlock-root .fl-unlock-lock {
+  display: block;
+}
+
+.fl-unlock-root .fl-unlock {
+  flex: 1 1 260px;
+  max-width: 420px;
+}
+
+.fl-unlock-label {
+  font-size: 13px;
+  color: var(--fl-lock-fg);
+}
+
+.fl-remembered {
+  display: inline-flex;
+  flex: none;
+  gap: 3px;
+  align-items: center;
+  height: 22px;
+  padding: 0 7px;
+  font-size: 11px;
+  color: var(--vp-c-text-2);
+  white-space: nowrap;
+  cursor: pointer;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 999px;
+}
+
+.fl-remembered:hover {
+  color: var(--vp-c-brand-1);
+  border-color: var(--vp-c-brand-1);
+}
+
 /* ---------------- states & footer ---------------- */
 
 .fl-status {
@@ -571,11 +794,11 @@
   padding: 7px 14px;
   overflow: hidden;
   font-size: 13px;
+  line-height: 1.5;
   color: var(--vp-c-bg);
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  text-align: center;
   background: var(--vp-c-text-1);
-  border-radius: 999px;
+  border-radius: 14px;
   box-shadow: 0 6px 20px rgb(0 0 0 / 18%);
   transform: translateX(-50%);
 }
@@ -797,6 +1020,68 @@
   .fl-foot {
     padding: 10px 12px;
   }
+
+  /* same-row password: the row keeps its 56px; the name gives way to the input */
+  .fl-row-prompting .fl-cell-name {
+    display: none;
+  }
+
+  .fl-unlock-row {
+    grid-column: 2 / -1;
+    justify-content: flex-start;
+    padding-left: 4px;
+  }
+
+  .fl-unlock-row .fl-unlock-lock {
+    display: block;
+    margin: 0 4px;
+  }
+
+  .fl-unlock input {
+    height: 40px;
+    padding: 0 10px;
+    font-size: 16px;
+    border-radius: 10px;
+  }
+
+  .fl-unlock-remember,
+  .fl-unlock-cancel {
+    width: 40px;
+    height: 44px;
+    border-color: transparent;
+    background: transparent;
+  }
+
+  .fl-unlock-remember[aria-pressed='true'] {
+    background: transparent;
+    border-color: transparent;
+  }
+
+  .fl-unlock-submit {
+    height: 40px;
+    padding: 0 14px;
+    font-size: 15px;
+    border-radius: 10px;
+  }
+
+  /* The name is hidden while prompting: the error moves into the placeholder,
+     and the message stays for screen readers only. */
+  .fl-row .fl-unlock-message {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+
+  .fl-unlock-row input[aria-invalid='true']::placeholder {
+    color: var(--fl-error-fg);
+  }
+
+  .fl-unlock-root {
+    padding: 10px 12px;
+  }
 }
 
 /* ---------------- preview dialog ---------------- */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitepress-plugin-filelist",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "packageManager": "pnpm@11.25.0",
   "type": "module",
   "description": "OpenList file browser for VitePress: tree view, batch ZIP download, i18n, password and token support.",