docs/notion/Internal Docs Exported/Internal Docs/Research/Design/Sprint 1/Untitled Database.html
<html><head><title>Untitled Database</title><style>
/* webkit printing magic: print all background colors */
html {
-webkit-print-color-adjust: exact;
}
* {
box-sizing: border-box;
-webkit-print-color-adjust: exact;
}
html,
body {
margin: 0;
padding: 0;
}
@media only screen {
body {
margin: 2em auto;
max-width: 900px;
color: rgb(55, 53, 47);
}
}
body {
line-height: 1.5;
}
a,
a.visited {
color: inherit;
text-decoration: underline;
}
.pdf-relative-link-path {
font-size: 80%;
color: #444;
}
h1,
h2,
h3 {
letter-spacing: -0.01em;
line-height: 1.2;
font-weight: 600;
margin-bottom: 0;
}
.page-title {
font-size: 2.5rem;
font-weight: 700;
margin-top: 0;
margin-bottom: 0.75em;
}
h1 {
font-size: 1.875rem;
margin-top: 1.875rem;
}
h2 {
font-size: 1.5rem;
margin-top: 1.5rem;
}
h3 {
font-size: 1.25rem;
margin-top: 1.25rem;
}
.source {
border: 1px solid #ddd;
border-radius: 3px;
padding: 1.5em;
word-break: break-all;
}
figure {
margin: 1.25em 0;
page-break-inside: avoid;
}
figcaption {
opacity: 0.5;
font-size: 85%;
margin-top: 0.5em;
}
mark {
background-color: transparent;
}
.indented {
padding-left: 1.5em;
}
hr {
background: transparent;
display: block;
width: 100%;
height: 1px;
visibility: visible;
border: none;
border-bottom: 1px solid rgba(55, 53, 47, 0.09);
}
img {
max-width: 100%;
}
@media only print {
img {
max-height: 100vh;
object-fit: contain;
}
}
@page {
margin: 1in;
}
.collection-content {
font-size: 0.875rem;
}
.column-list {
display: flex;
justify-content: space-between;
}
.column {
padding: 0 1em;
}
.column:first-child {
padding-left: 0;
}
.column:last-child {
padding-right: 0;
}
.table_of_contents-item {
display: block;
font-size: 0.875rem;
line-height: 1.3;
padding: 0.125rem;
}
.table_of_contents-indent-1 {
margin-left: 1.5rem;
}
.table_of_contents-indent-2 {
margin-left: 3rem;
}
.table_of_contents-indent-3 {
margin-left: 4.5rem;
}
.table_of_contents-link {
text-decoration: none;
opacity: 0.7;
border-bottom: 1px solid rgba(55, 53, 47, 0.18);
}
table,
th,
td {
border: 1px solid rgba(55, 53, 47, 0.09);
border-collapse: collapse;
}
table {
border-left: none;
border-right: none;
}
th,
td {
font-weight: normal;
padding: 0.25em 0.5em;
line-height: 1.5;
min-height: 1.5em;
text-align: left;
}
th {
color: rgba(55, 53, 47, 0.6);
}
ol,
ul {
margin: 0;
margin-block-start: 0.6em;
margin-block-end: 0.6em;
}
li > ol:first-child,
li > ul:first-child {
margin-block-start: 0.6em;
}
ul > li {
list-style: disc;
}
ul.to-do-list {
text-indent: -1.7em;
}
ul.to-do-list > li {
list-style: none;
}
.to-do-children-checked {
text-decoration: line-through;
opacity: 0.375;
}
ul.toggle > li {
list-style: none;
}
ul {
padding-inline-start: 1.7em;
}
ul > li {
padding-left: 0.1em;
}
ol {
padding-inline-start: 1.6em;
}
ol > li {
padding-left: 0.2em;
}
.mono ol {
padding-inline-start: 2em;
}
.mono ol > li {
text-indent: -0.4em;
}
.toggle {
padding-inline-start: 0em;
list-style-type: none;
}
/* Indent toggle children */
.toggle > li > details {
padding-left: 1.7em;
}
.toggle > li > details > summary {
margin-left: -1.1em;
}
.selected-value {
display: inline-block;
padding: 0 0.5em;
background: rgba(206, 205, 202, 0.5);
border-radius: 3px;
margin-right: 0.5em;
margin-top: 0.3em;
margin-bottom: 0.3em;
white-space: nowrap;
}
.collection-title {
display: inline-block;
margin-right: 1em;
}
time {
opacity: 0.5;
}
.icon {
display: inline-block;
max-width: 1.2em;
max-height: 1.2em;
text-decoration: none;
vertical-align: text-bottom;
margin-right: 0.5em;
}
.user-icon {
width: 1.5em;
height: 1.5em;
border-radius: 100%;
margin-right: 0.5rem;
}
.user-icon-inner {
font-size: 0.8em;
}
.text-icon {
border: 1px solid #000;
text-align: center;
}
.page-header-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.page-header-icon img {
border-radius: 3px;
}
.link-to-page {
margin: 1em 0;
padding: 0;
border: none;
font-weight: 500;
}
p > .user {
opacity: 0.5;
}
td > .user,
td > time {
white-space: nowrap;
}
input[type="checkbox"] {
transform: scale(1.5);
margin-right: 0.6em;
vertical-align: middle;
}
p {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.image {
border: none;
margin: 1.5em 0;
padding: 0;
border-radius: 0;
text-align: center;
}
.code,
code {
background: rgba(135, 131, 120, 0.15);
border-radius: 3px;
padding: 0.2em 0.4em;
border-radius: 3px;
font-size: 85%;
}
code {
color: #eb5757;
}
.code {
padding: 1.5em 1em;
}
.code > code {
background: none;
padding: 0;
font-size: 100%;
color: inherit;
}
blockquote {
font-size: 1.25em;
margin: 1em 0;
padding-left: 1em;
border-left: 3px solid rgb(55, 53, 47);
}
.bookmark-href {
font-size: 0.75em;
opacity: 0.5;
}
.sans { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; }
.code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; }
.serif { font-family: Lyon-Text, Georgia, KaiTi, STKaiTi, '华文楷体', KaiTi_GB2312, '楷体_GB2312', serif; }
.mono { font-family: Nitti, 'Microsoft YaHei', '微软雅黑', monospace; }
.pdf .sans { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol", 'Twemoji', 'Noto Color Emoji', 'Noto Sans CJK SC', 'Noto Sans CJK KR'; }
.pdf .code { font-family: Source Code Pro, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK SC', 'Noto Sans Mono CJK KR'; }
.pdf .serif { font-family: PT Serif, Lyon-Text, Georgia, KaiTi, STKaiTi, '华文楷体', KaiTi_GB2312, '楷体_GB2312', serif, 'Twemoji', 'Noto Color Emoji', 'Noto Sans CJK SC', 'Noto Sans CJK KR'; }
.pdf .mono { font-family: PT Mono, Nitti, 'Microsoft YaHei', '微软雅黑', monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK SC', 'Noto Sans Mono CJK KR'; }
.highlight-default {
}
.highlight-gray {
color: rgb(155,154,151);
}
.highlight-brown {
color: rgb(100,71,58);
}
.highlight-orange {
color: rgb(217,115,13);
}
.highlight-yellow {
color: rgb(223,171,1);
}
.highlight-teal {
color: rgb(15,123,108);
}
.highlight-blue {
color: rgb(11,110,153);
}
.highlight-purple {
color: rgb(105,64,165);
}
.highlight-pink {
color: rgb(173,26,114);
}
.highlight-red {
color: rgb(224,62,62);
}
.highlight-gray_background {
background: rgb(235,236,237);
}
.highlight-brown_background {
background: rgb(233,229,227);
}
.highlight-orange_background {
background: rgb(250,235,221);
}
.highlight-yellow_background {
background: rgb(251,243,219);
}
.highlight-teal_background {
background: rgb(221,237,234);
}
.highlight-blue_background {
background: rgb(221,235,241);
}
.highlight-purple_background {
background: rgb(234,228,242);
}
.highlight-pink_background {
background: rgb(244,223,235);
}
.highlight-red_background {
background: rgb(251,228,228);
}
.block-color-default {
}
.block-color-gray {
color: rgba(55, 53, 47, 0.6);
}
.block-color-brown {
color: rgb(100,71,58);
}
.block-color-orange {
color: rgb(217,115,13);
}
.block-color-yellow {
color: rgb(223,171,1);
}
.block-color-teal {
color: rgb(15,123,108);
}
.block-color-blue {
color: rgb(11,110,153);
}
.block-color-purple {
color: rgb(105,64,165);
}
.block-color-pink {
color: rgb(173,26,114);
}
.block-color-red {
color: rgb(224,62,62);
}
.block-color-gray_background {
background: rgb(235,236,237);
}
.block-color-brown_background {
background: rgb(233,229,227);
}
.block-color-orange_background {
background: rgb(250,235,221);
}
.block-color-yellow_background {
background: rgb(251,243,219);
}
.block-color-teal_background {
background: rgb(221,237,234);
}
.block-color-blue_background {
background: rgb(221,235,241);
}
.block-color-purple_background {
background: rgb(234,228,242);
}
.block-color-pink_background {
background: rgb(244,223,235);
}
.block-color-red_background {
background: rgb(251,228,228);
}
.checkbox {
display: inline-flex;
vertical-align: text-bottom;
width: 16;
height: 16;
background-size: 16px;
margin-left: 2px;
margin-right: 5px;
}
.checkbox-on {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%2358A9D7%22%2F%3E%0A%3Cpath%20d%3D%22M6.71429%2012.2852L14%204.9995L12.7143%203.71436L6.71429%209.71378L3.28571%206.2831L2%207.57092L6.71429%2012.2852Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E");
}
.checkbox-off {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20x%3D%220.75%22%20y%3D%220.75%22%20width%3D%2214.5%22%20height%3D%2214.5%22%20fill%3D%22white%22%20stroke%3D%22%2336352F%22%20stroke-width%3D%221.5%22%2F%3E%0A%3C%2Fsvg%3E");
}
</style></head><body><article id="e3bdf8e0-0eb7-491c-b754-ac07d6a285e9" class="page sans"><header><h1 class="page-title"></h1></header><div class="page-body"><table class="collection-content"><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Accepted Values</th><th>Default</th></tr></thead><tbody><tr id="0b8dce02-7a1a-492b-9b28-e16659c1efc5"><td class="cell-title"><a href="Untitled Database/value v model.html">value / v-model</a></td><td class="cell-8O^x">binding value</td><td class="cell-!BsR">number</td><td class="cell-;Z^`"><span class="selected-value">—</span></td><td class="cell-`:EI">0</td></tr><tr id="f9dfcaac-903e-4416-a9c9-5dfe629bda9b"><td class="cell-title"><a href="Untitled Database/min.html">min</a></td><td class="cell-8O^x">minimum value</td><td class="cell-!BsR">number</td><td class="cell-;Z^`"><span class="selected-value">—</span></td><td class="cell-`:EI">0</td></tr><tr id="406023ff-d397-46f7-a0cf-39d875bd2c3f"><td class="cell-title"><a href="Untitled Database/max.html">max</a></td><td class="cell-8O^x">maximum value</td><td class="cell-!BsR">number</td><td class="cell-;Z^`"><span class="selected-value">—</span></td><td class="cell-`:EI">100</td></tr><tr id="22e0b155-1ffc-46f8-9f28-1fd5f0b2e454"><td class="cell-title"><a href="Untitled Database/disabled.html">disabled</a></td><td class="cell-8O^x">whether Slider is disabled</td><td class="cell-!BsR">boolean</td><td class="cell-;Z^`"><span class="selected-value">—</span></td><td class="cell-`:EI">false</td></tr><tr id="4698e093-6373-4b46-ad84-7640817ad676"><td class="cell-title"><a href="Untitled Database/step.html">step</a></td><td class="cell-8O^x">step size</td><td class="cell-!BsR">number</td><td class="cell-;Z^`"><span class="selected-value">—</span></td><td class="cell-`:EI">1</td></tr><tr id="e465689e-3ec7-41b1-b710-96eead04495a"><td class="cell-title"><a href="Untitled Database/show input.html">show-input</a></td><td class="cell-8O^x">whether to display an input box, works when range is false</td><td class="cell-!BsR">boolean</td><td class="cell-;Z^`"><span class="selected-value">—</span></td><td class="cell-`:EI">False</td></tr><tr id="172d4534-7261-4760-94d3-27420740e6eb"><td class="cell-title"><a href="Untitled Database/show input controls.html">show-input-controls</a></td><td class="cell-8O^x">whether to display control buttons when show-input is true</td><td class="cell-!BsR">boolean</td><td class="cell-;Z^`"><span class="selected-value">—</span></td><td class="cell-`:EI">true</td></tr><tr id="1b5af364-d132-4a39-809d-ecb8bd785d7e"><td class="cell-title"><a href="Untitled Database/input size.html">input-size</a></td><td class="cell-8O^x">size of the input box</td><td class="cell-!BsR">string</td><td class="cell-;Z^`"><span class="selected-value">large / medium / small / mini</span></td><td class="cell-`:EI">small</td></tr><tr id="ae57cfb9-4731-44ac-98f9-55df544ade17"><td class="cell-title"><a href="Untitled Database/show stops.html">show-stops</a></td><td class="cell-8O^x">whether to display breakpoints</td><td class="cell-!BsR">boolean</td><td class="cell-;Z^`"><span class="selected-value">—</span></td><td class="cell-`:EI">false</td></tr><tr id="8adcdac5-3a17-42d2-9b4b-e52bfadd48b4"><td class="cell-title"><a href="Untitled Database/show tooltip.html">show-tooltip</a></td><td class="cell-8O^x">whether to display tooltip value</td><td class="cell-!BsR">boolean</td><td class="cell-;Z^`"><span class="selected-value">—</span></td><td class="cell-`:EI">true</td></tr><tr id="2046f990-c354-4a82-9911-bc68f4655e66"><td class="cell-title"><a href="Untitled Database/format tooltip.html">format-tooltip</a></td><td class="cell-8O^x">format to display tooltip value</td><td class="cell-!BsR">function(value)</td><td class="cell-;Z^`"><span class="selected-value">—</span></td><td class="cell-`:EI">—</td></tr><tr id="dbdb92d3-448a-4669-b161-74274fb0e176"><td class="cell-title"><a href="Untitled Database/range.html">range</a></td><td class="cell-8O^x">whether to select a range</td><td class="cell-!BsR">boolean</td><td class="cell-;Z^`"><span class="selected-value">—</span></td><td class="cell-`:EI">false</td></tr><tr id="84524ec6-a359-489b-bf9e-0815bbd5ffeb"><td class="cell-title"><a href="Untitled Database/vertical.html">vertical</a></td><td class="cell-8O^x">vertical mode</td><td class="cell-!BsR">boolean</td><td class="cell-;Z^`"><span class="selected-value">—</span></td><td class="cell-`:EI">false</td></tr><tr id="f18e1e2b-14ff-4956-a8b0-beaa07dbc926"><td class="cell-title"><a href="Untitled Database/height.html">height</a></td><td class="cell-8O^x">Slider height, required in vertical mode</td><td class="cell-!BsR">string</td><td class="cell-;Z^`"><span class="selected-value">—</span></td><td class="cell-`:EI">—</td></tr><tr id="0b5f49e5-3bb9-45d8-b428-abae4dee815f"><td class="cell-title"><a href="Untitled Database/label.html">label</a></td><td class="cell-8O^x">label for screen reader</td><td class="cell-!BsR">string</td><td class="cell-;Z^`"><span class="selected-value">—</span></td><td class="cell-`:EI">—</td></tr><tr id="58d0d148-5b79-4c47-9180-8ea00305da11"><td class="cell-title"><a href="Untitled Database/debounce.html">debounce</a></td><td class="cell-8O^x">debounce delay when typing, in milliseconds, works when show-input is true</td><td class="cell-!BsR">number</td><td class="cell-;Z^`"><span class="selected-value">—</span></td><td class="cell-`:EI">300</td></tr><tr id="8508f2f8-0394-43bf-a501-8f8c0c2b3ea2"><td class="cell-title"><a href="Untitled Database/tooltip class.html">tooltip-class</a></td><td class="cell-8O^x">custom class name for the tooltip</td><td class="cell-!BsR">string</td><td class="cell-;Z^`"><span class="selected-value">—</span></td><td class="cell-`:EI">—</td></tr><tr id="b6ec43bd-1f11-41f6-9e50-2488009ca8a9"><td class="cell-title"><a href="Untitled Database/marks.html">marks</a></td><td class="cell-8O^x">marks， type of key must be number and must in closed interval [min, max], each mark can custom style</td><td class="cell-!BsR">object</td><td class="cell-;Z^`"><span class="selected-value">—</span></td><td class="cell-`:EI">—</td></tr></tbody></table></div></article></body></html>