init

2026-08-04 17:57:01 +08:00
parent 768fd4a3a9
commit f77034edd7
641 changed files with 26137 additions and 0 deletions
@@ -0,0 +1,4 @@
+(() => {
+  window.componentRegistry ||= {};
+  window.componentRegistry["src-web/input/index.html"] = {"showcase":"<div class=\"panel\">\n          <div class=\"panel-heading\"><div class=\"panel-title\">TextInput / CommandInput / NumberField</div><div class=\"panel-note\">Native field grammar, normalized anatomy</div></div>\n          <div class=\"panel-body\">\n            <div class=\"sample-grid cols-2 input-state-grid\">\n              <div><div class=\"sample-label\">TextInput · Empty</div><div class=\"field dnf-ui\"><span class=\"field-label\"></span></div></div>\n              <div><div class=\"sample-label\">TextInput · Placeholder</div><div class=\"field placeholder dnf-ui\"><span class=\"field-label\">请输入卡片/宝珠名称。</span></div></div>\n              <div><div class=\"sample-label\">TextInput · Focus</div><div class=\"field focus dnf-ui\"><span class=\"field-label\">关键词<span class=\"caret-line\" style=\"display:inline-block;vertical-align:middle\"></span></span></div></div>\n              <div><div class=\"sample-label\">TextInput · Disabled</div><div class=\"field disabled dnf-ui\"><span class=\"field-label\">不可编辑</span></div></div>\n            </div>\n            <div class=\"divider\"></div>\n            <div class=\"command-grid\">\n              <div>\n                <div class=\"sample-label\">CommandInput · Rest</div>\n                <div class=\"field command-field dnf-ui\"><span class=\"command-prefix\">普通</span><span class=\"command-query\"></span></div>\n              </div>\n              <div class=\"command-open-demo\">\n                <div class=\"sample-label\">CommandInput · Suggestions open</div>\n                <div class=\"field command-field dnf-ui\"><span class=\"command-prefix\">普通</span><span class=\"command-query\">/fa</span></div>\n                <div class=\"command-suggestions dnf-ui\"><div><span class=\"command-prefix mini\">普通</span><span>/fa</span></div><div><span class=\"command-prefix mini green\">建筑</span><span>/fs</span></div></div>\n              </div>\n            </div>\n            <div class=\"number-inline\" data-number-input><div class=\"sample-label\">NumberField + FastStep</div><div style=\"display:flex\"><div class=\"field dnf-ui\" style=\"min-width:210px\"><span class=\"field-label\">数量：<span data-number-value>1</span></span><div class=\"spinner\"><button type=\"button\" class=\"spin-half\" data-step=\"1\" aria-label=\"增加 1\"><i class=\"tri-up\"></i></button><button type=\"button\" class=\"spin-half\" data-step=\"-1\" aria-label=\"减少 1\"><i class=\"tri-down\"></i></button></div></div><div class=\"fast-step dnf-ui\"><button type=\"button\" class=\"fast-step-button\" data-step=\"10\" aria-label=\"增加 10\"><span class=\"fast-step-label\">+10</span></button><button type=\"button\" class=\"fast-step-button\" data-step=\"-10\" aria-label=\"减少 10\"><span class=\"fast-step-label\">-10</span></button></div></div></div>\n            <div class=\"spec-row input-specs\"><span class=\"spec-chip captured\">Placeholder / Command captured</span><span class=\"spec-chip derived\">Invalid / Readonly derived</span><span class=\"spec-chip\">Prefix = nested anatomy</span></div>\n          </div>\n        </div>"};
+})();
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=1920, initial-scale=1">
+  <base href="../../">
+  <title>input component catalog</title>
+  <link rel="stylesheet" href="src-web/index.css">
+</head>
+<body>
+  <!-- Root pages load individual templates through index.html#fragment references. -->
+  <template id="showcase">
+<div class="panel">
+          <div class="panel-heading"><div class="panel-title">TextInput / CommandInput / NumberField</div><div class="panel-note">Native field grammar, normalized anatomy</div></div>
+          <div class="panel-body">
+            <div class="sample-grid cols-2 input-state-grid">
+              <div><div class="sample-label">TextInput · Empty</div><div class="field dnf-ui"><span class="field-label"></span></div></div>
+              <div><div class="sample-label">TextInput · Placeholder</div><div class="field placeholder dnf-ui"><span class="field-label">请输入卡片/宝珠名称。</span></div></div>
+              <div><div class="sample-label">TextInput · Focus</div><div class="field focus dnf-ui"><span class="field-label">关键词<span class="caret-line" style="display:inline-block;vertical-align:middle"></span></span></div></div>
+              <div><div class="sample-label">TextInput · Disabled</div><div class="field disabled dnf-ui"><span class="field-label">不可编辑</span></div></div>
+            </div>
+            <div class="divider"></div>
+            <div class="command-grid">
+              <div>
+                <div class="sample-label">CommandInput · Rest</div>
+                <div class="field command-field dnf-ui"><span class="command-prefix">普通</span><span class="command-query"></span></div>
+              </div>
+              <div class="command-open-demo">
+                <div class="sample-label">CommandInput · Suggestions open</div>
+                <div class="field command-field dnf-ui"><span class="command-prefix">普通</span><span class="command-query">/fa</span></div>
+                <div class="command-suggestions dnf-ui"><div><span class="command-prefix mini">普通</span><span>/fa</span></div><div><span class="command-prefix mini green">建筑</span><span>/fs</span></div></div>
+              </div>
+            </div>
+            <div class="number-inline" data-number-input><div class="sample-label">NumberField + FastStep</div><div style="display:flex"><div class="field dnf-ui" style="min-width:210px"><span class="field-label">数量：<span data-number-value>1</span></span><div class="spinner"><button type="button" class="spin-half" data-step="1" aria-label="增加 1"><i class="tri-up"></i></button><button type="button" class="spin-half" data-step="-1" aria-label="减少 1"><i class="tri-down"></i></button></div></div><div class="fast-step dnf-ui"><button type="button" class="fast-step-button" data-step="10" aria-label="增加 10"><span class="fast-step-label">+10</span></button><button type="button" class="fast-step-button" data-step="-10" aria-label="减少 10"><span class="fast-step-label">-10</span></button></div></div></div>
+            <div class="spec-row input-specs"><span class="spec-chip captured">Placeholder / Command captured</span><span class="spec-chip derived">Invalid / Readonly derived</span><span class="spec-chip">Prefix = nested anatomy</span></div>
+          </div>
+        </div>
+</template>
+  <script>
+    document.querySelectorAll('template').forEach((template) => document.body.append(template.content.cloneNode(true)));
+  </script>
+</body>
+</html>
@@ -0,0 +1,227 @@
+/* Source module: input.css */
+.field {
+  position: relative;
+  height: 30px;
+  min-width: 210px;
+  display: inline-flex;
+  align-items: center;
+  background: linear-gradient(#0b0c0d, #000100);
+  border: 1px solid var(--brass-dark);
+  color: var(--gold);
+  box-shadow: inset 0 0 0 1px #050505;
+}
+
+.field.focus {
+  border-color: var(--focus);
+  box-shadow:
+    inset 0 0 0 1px #071722,
+    0 0 0 1px #24617c;
+}
+
+.field.disabled {
+  border-color: #343331;
+  color: var(--disabled);
+  background: #101110;
+}
+.field-label {
+  padding: 0 9px;
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.field.placeholder {
+  color: var(--text-3);
+}
+.field.placeholder .field-label {
+  opacity: 0.62;
+}
+.caret-line {
+  width: 1px;
+  height: 16px;
+  background: #f2f4ef;
+  margin-left: 1px;
+  box-shadow: 0 0 2px #fff;
+}
+.field-action {
+  align-self: stretch;
+  min-width: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-left: 1px solid #6c542d;
+  background: linear-gradient(#263d68, #172747);
+}
+
+.field-action img {
+  max-width: 17px;
+  max-height: 16px;
+  image-rendering: pixelated;
+}
+.input-state-grid {
+  gap: 7px 12px;
+}
+.input-state-grid .sample-label {
+  margin-bottom: 4px;
+}
+.input-state-grid .field {
+  width: 100%;
+}
+.command-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  min-height: 60px;
+}
+.command-grid .sample-label {
+  margin-bottom: 4px;
+}
+.command-field {
+  width: 100%;
+}
+.command-prefix {
+  align-self: stretch;
+  min-width: 52px;
+  padding: 0 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-right: 1px solid #5e4c2d;
+  background: #191712;
+  color: #d7c47e;
+}
+.command-prefix.green {
+  color: #9bd8a7;
+}
+.command-prefix.mini {
+  min-width: 42px;
+  height: 20px;
+  margin-right: 8px;
+  border: 1px solid #4f422a;
+  background: #17150f;
+}
+.command-query {
+  flex: 1;
+  padding: 0 8px;
+  color: var(--text);
+}
+.command-open-demo {
+  position: relative;
+}
+.command-suggestions {
+  position: absolute;
+  z-index: 3;
+  left: 0;
+  right: 0;
+  top: 49px;
+  border: 1px solid #5a4828;
+  background: #020302;
+  box-shadow: 0 8px 16px #000;
+}
+.command-suggestions > div {
+  height: 26px;
+  padding: 2px 6px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #25231f;
+  color: var(--gold);
+}
+.number-inline {
+  width: calc(50% - 6px);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  margin-top: 8px;
+}
+.number-inline .sample-label {
+  margin: 0 0 4px;
+}
+.input-specs {
+  margin-top: 10px;
+}
+
+.select-field {
+  justify-content: space-between;
+}
+.select-field[role="button"],
+.select-field[role="combobox"] {
+  cursor: pointer;
+}
+.select-field.has-select-icon::after {
+  --select-top:var(--control-blue-top);
+  --select-bottom:var(--control-blue-bottom);
+  --select-edge-top:var(--control-edge-top);
+  --select-edge-bottom:var(--control-edge-bottom);
+  content:"";
+  box-sizing:border-box;
+  flex:0 0 21px;
+  height:18px;
+  align-self:center;
+  margin:0 3px 0 5px;
+  border:1px solid transparent;
+  background:
+    linear-gradient(180deg,var(--select-top),var(--select-bottom)) padding-box,
+    linear-gradient(180deg,var(--select-edge-top),var(--select-edge-bottom)) border-box;
+  box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.025);
+}
+.select-field.has-select-icon::before {
+  content:"";
+  position:absolute;
+  z-index:1;
+  top:50%;
+  right:8px;
+  width:11px;
+  height:6px;
+  background:var(--control-glyph);
+  clip-path:polygon(0 0,100% 0,50% 100%);
+  transform:translateY(-50%);
+  pointer-events:none;
+}
+.select-field.has-select-icon:hover::after,
+.select-field.has-select-icon.is-hover::after { --select-top:#29457f;--select-bottom:#24386a;--select-edge-top:#725f4e;--select-edge-bottom:#524444; }
+.select-field.has-select-icon:active::after,
+.select-field.has-select-icon.is-pressed::after { --select-top:#29457f;--select-bottom:#24386a;--select-edge-top:#725f4e;--select-edge-bottom:#524444;transform:translateY(1px); }
+.select-field.has-select-icon:active::before,
+.select-field.has-select-icon.is-pressed::before { transform:translateY(calc(-50% + 1px)); }
+.select-field:focus-visible {
+  outline: 1px solid var(--focus);
+  outline-offset: 1px;
+}
+.spinner {
+  width: 23px;
+  align-self: stretch;
+  border-left: 1px solid #4b412d;
+}
+.spin-half {
+  appearance: none;
+  width: 100%;
+  height: 50%;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: transparent;
+}
+.spin-half + .spin-half {
+  border-top: 1px solid #2e2d28;
+}
+.spin-half:hover {
+  background: rgba(255, 255, 255, 0.035);
+}
+.spin-half:active {
+  background: rgba(0, 0, 0, 0.35);
+}
+.tri-up,
+.tri-down {
+  width: 0;
+  height: 0;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+}
+.tri-up {
+  border-bottom: 8px solid #b99550;
+}
+.tri-down {
+  border-top: 8px solid #b99550;
+}