vitepress-plugin-filelist 0.3.1 → 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,4 +1020,319 @@
   .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 ---------------- */
+
+.fl-preview {
+  /* themes (VitePress included) reset margin, which drops the UA centring */
+  position: fixed;
+  inset: 0;
+  box-sizing: border-box;
+  width: min(1100px, calc(100vw - 48px));
+  max-width: none;
+  height: min(820px, calc(100dvh - 48px));
+  max-height: none;
+  padding: 0;
+  overflow: hidden;
+  color: var(--vp-c-text-1);
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  margin: auto;
+  border-radius: 14px;
+  box-shadow: 0 24px 64px rgb(0 0 0 / 28%);
+}
+
+.fl-preview::backdrop {
+  background: rgb(0 0 0 / 55%);
+}
+
+.fl-preview-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.fl-preview-head {
+  display: flex;
+  flex: none;
+  gap: 10px;
+  align-items: center;
+  min-height: 56px;
+  box-sizing: border-box;
+  padding: 8px 8px 8px 16px;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.fl-preview .fl-type {
+  width: 40px;
+  height: 22px;
+  font-size: 10px;
+}
+
+.fl-preview-title {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.fl-preview-name {
+  overflow: hidden;
+  font-size: 15px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fl-preview-meta {
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  color: var(--vp-c-text-2);
+}
+
+.fl-preview-tools {
+  display: flex;
+  flex: none;
+  gap: 2px;
+  align-items: center;
+}
+
+.fl-preview-tool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 10px;
+  transition: color 0.15s, background-color 0.15s;
+}
+
+.fl-preview-tool:hover,
+.fl-preview-tool[aria-pressed='true'] {
+  color: var(--vp-c-brand-1);
+  background: var(--vp-c-default-soft);
+}
+
+.fl-preview-count {
+  min-width: 44px;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  color: var(--vp-c-text-2);
+  text-align: center;
+}
+
+.fl-preview-body {
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  overflow: auto;
+  background: var(--vp-c-bg-soft);
+}
+
+.fl-preview-status {
+  color: var(--vp-c-text-2);
+}
+
+.fl-preview-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  transition: transform 0.2s;
+}
+
+.fl-preview-image.fl-preview-actual {
+  max-width: none;
+  max-height: none;
+  margin: auto;
+}
+
+.fl-preview-video {
+  max-width: 100%;
+  max-height: 100%;
+  background: #000;
+}
+
+.fl-preview-audio {
+  width: min(560px, calc(100% - 32px));
+}
+
+.fl-preview-text {
+  align-self: stretch;
+  width: 100%;
+  overflow: auto;
+  background: var(--vp-c-bg);
+}
+
+.fl-preview-text pre {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 16px 20px;
+  font-family: var(--vp-font-family-mono, ui-monospace, monospace);
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--vp-c-text-1);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  background: transparent;
+}
+
+.fl-preview-note {
+  position: sticky;
+  top: 0;
+  margin: 0;
+  padding: 8px 20px;
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.fl-preview-frame {
+  align-self: stretch;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: #fff;
+}
+
+.fl-preview-info {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  align-items: center;
+  max-width: 420px;
+  padding: 32px 24px;
+  text-align: center;
+}
+
+.fl-preview .fl-preview-badge {
+  width: 72px;
+  height: 44px;
+  font-size: 15px;
+  border-radius: 10px;
+}
+
+.fl-preview-message {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--vp-c-text-2);
+}
+
+.fl-preview-info .fl-btn-primary {
+  height: 40px;
+  padding: 0 18px;
+  font-size: 14px;
+  border-radius: 10px;
+}
+
+@media (max-width: 640px) {
+  .fl-preview {
+    width: 100vw;
+    height: 100dvh;
+    border: 0;
+    border-radius: 0;
+  }
+
+  .fl-preview-head {
+    flex-wrap: wrap;
+    gap: 0 8px;
+    padding: 6px 4px 0 12px;
+  }
+
+  .fl-preview-actions {
+    margin-left: auto;
+  }
+
+  /* navigation and image tools drop to a second row */
+  .fl-preview-nav {
+    order: 3;
+    flex: 1 0 100%;
+    justify-content: center;
+    margin: 0 -4px 0 -12px;
+    border-top: 1px solid var(--vp-c-divider);
+  }
+
+  .fl-preview-tool {
+    width: 44px;
+    height: 44px;
+  }
+
+  .fl-preview-count {
+    min-width: 36px;
+  }
+
+  .fl-preview .fl-preview-head .fl-type {
+    display: none;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitepress-plugin-filelist",
-  "version": "0.3.1",
+  "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.",