From caad82e774bde709b8ffb7a6b9cf5d8f0f923134 Mon Sep 17 00:00:00 2001
From: wangchangqi <wangchangqi@kylinos.cn>
Date: Tue, 30 Aug 2022 16:19:21 +0800
Subject: [PATCH] (chore) add README and modify little ui, syntax

---
 src/components/checkbox/README.md             |  1 +
 src/components/container/README.md            | 18 ++++
 src/components/footer/README.md               |  1 +
 src/components/form/README.md                 |  3 +
 src/components/grabber/README.md              |  7 ++
 src/components/grid/README.md                 |  1 +
 src/components/header/README.md               |  1 +
 src/components/indicator/README.md            |  5 +
 .../indicator/indicator-page-point.ts         |  2 +-
 src/components/input/README.md                | 16 ++++
 src/components/li/README.md                   | 95 +++++++++++++++++++
 src/components/li/li.ts                       |  9 +-
 src/components/overlay/README.md              |  5 +
 src/components/segment-controls/README.md     |  7 ++
 src/components/select/README.md               |  8 ++
 src/components/slider/README.md               | 12 +++
 src/components/stepper/README.md              | 11 +++
 src/components/ul/README.md                   | 20 ++++
 src/components/ul/ul.ts                       |  2 +-
 19 files changed, 218 insertions(+), 6 deletions(-)
 create mode 100644 src/components/checkbox/README.md
 create mode 100644 src/components/container/README.md
 create mode 100644 src/components/footer/README.md
 create mode 100644 src/components/form/README.md
 create mode 100644 src/components/grabber/README.md
 create mode 100644 src/components/grid/README.md
 create mode 100644 src/components/header/README.md
 create mode 100644 src/components/indicator/README.md
 create mode 100644 src/components/input/README.md
 create mode 100644 src/components/li/README.md
 create mode 100644 src/components/overlay/README.md
 create mode 100644 src/components/segment-controls/README.md
 create mode 100644 src/components/select/README.md
 create mode 100644 src/components/slider/README.md
 create mode 100644 src/components/stepper/README.md
 create mode 100644 src/components/ul/README.md

diff --git a/src/components/checkbox/README.md b/src/components/checkbox/README.md
new file mode 100644
index 0000000..4f80b16
--- /dev/null
+++ b/src/components/checkbox/README.md
@@ -0,0 +1 @@
+Checkbox 复选框
\ No newline at end of file
diff --git a/src/components/container/README.md b/src/components/container/README.md
new file mode 100644
index 0000000..33a95aa
--- /dev/null
+++ b/src/components/container/README.md
@@ -0,0 +1,18 @@
+# 主屏容器
+
+大致层级结构
+
+```
+父容器
+  |-子容器1(6x4|4x6格子)
+  |-子容器2(6x4|4x6格子)
+  |    |-图标容器
+  |    |-组件容器(1x1)
+  |    |-文件夹容器
+  |          |打开
+  |        子容器3(4x4格子)
+  |          |-图标容器
+  |-页面指示器
+  |-Dock容器
+      |-图标容器
+```
diff --git a/src/components/footer/README.md b/src/components/footer/README.md
new file mode 100644
index 0000000..4b443cd
--- /dev/null
+++ b/src/components/footer/README.md
@@ -0,0 +1 @@
+# 页脚-Footer
diff --git a/src/components/form/README.md b/src/components/form/README.md
new file mode 100644
index 0000000..a506bee
--- /dev/null
+++ b/src/components/form/README.md
@@ -0,0 +1,3 @@
+# 表单-form
+
+参考：iPhone-VPN-添加配置
\ No newline at end of file
diff --git a/src/components/grabber/README.md b/src/components/grabber/README.md
new file mode 100644
index 0000000..d462981
--- /dev/null
+++ b/src/components/grabber/README.md
@@ -0,0 +1,7 @@
+# 抓握指示器-Grabber
+
+下分：
+- Multitasking Indicator (多任务指示器)(TODO)
+- App Divider (App分割条)(TODO)
+- Resizable Indicator (可调指示器)
+- Home Indicator (主屏指示器)
\ No newline at end of file
diff --git a/src/components/grid/README.md b/src/components/grid/README.md
new file mode 100644
index 0000000..3ce65c4
--- /dev/null
+++ b/src/components/grid/README.md
@@ -0,0 +1 @@
+# 九宫格-Grid
\ No newline at end of file
diff --git a/src/components/header/README.md b/src/components/header/README.md
new file mode 100644
index 0000000..feeb19b
--- /dev/null
+++ b/src/components/header/README.md
@@ -0,0 +1 @@
+# 标题栏-header
\ No newline at end of file
diff --git a/src/components/indicator/README.md b/src/components/indicator/README.md
new file mode 100644
index 0000000..4938fa4
--- /dev/null
+++ b/src/components/indicator/README.md
@@ -0,0 +1,5 @@
+# 指示器-indicator
+
+## indicator-page-point 页面圆点指示器
+
+用于指示页面所在位置
\ No newline at end of file
diff --git a/src/components/indicator/indicator-page-point.ts b/src/components/indicator/indicator-page-point.ts
index be31e1d..f11b838 100644
--- a/src/components/indicator/indicator-page-point.ts
+++ b/src/components/indicator/indicator-page-point.ts
@@ -81,7 +81,7 @@ export class IndicatorPagePoint extends LitElement {
   static styles = css`
     :host {
       display: flex;
-      width: 100vw;
+      width: 100%;
       margin: auto;
     }
     :host([column]) {
diff --git a/src/components/input/README.md b/src/components/input/README.md
new file mode 100644
index 0000000..f9b9908
--- /dev/null
+++ b/src/components/input/README.md
@@ -0,0 +1,16 @@
+# 输入框-Input
+
+工作职责：
+- 输入信息
+
+## 特点
+
+拥有设置焦点的可配置属性，如进到一个页面立即聚焦于该input，弹起输入法
+删除图标在 input 中文字为空时应不显示
+input应拥有可配置的默认值(对于一些总要类型，需强制配置)
+
+## 类型包括
+
+- input输入|删除图标
+
+## 特殊说明
\ No newline at end of file
diff --git a/src/components/li/README.md b/src/components/li/README.md
new file mode 100644
index 0000000..ac77411
--- /dev/null
+++ b/src/components/li/README.md
@@ -0,0 +1,95 @@
+# 行-Line
+
+工作职责：
+- `组合排列``有限种`内容填充物
+
+## 特点
+
+行宽 - 100%填充父容器给的宽
+行高 - 存在一个min-height，实际行高由行内填充物决定
+行中独立嵌套其他内容时，使用 slot
+
+## 说明：
+- | 用途：偏左侧 | 偏右侧
+- () 用途：可选内容
+- 主文字在上，辅助文字在下
+- 主文字，通常包含：
+  - 左侧可选：重点强调内容
+- 辅助信息，通常类型：
+  - 纯文本
+  - SVG+纯文本
+- 左侧占位，通常包括：
+  - 勾选类型图标
+  - 空白占位
+  - 删减意义图标
+  - 增加意义图标
+- 右侧占位，通常包括：
+  - 勾选类型图标
+  - 增加意义图标
+  - 抓取用于排序的图标
+- 右侧图标，通常包括：
+  - 下一级图标
+  - 勾选类型图标
+  - Loading图标
+  - 云下载图标
+  - 图标组中的单个图标或多个图标
+    - 图标组：加密锁图标、wifi信号强度图标、其他状态图标
+- 选择器，通常包括：
+  - 时间选择器
+  - 日期选择器
+- 状态信息
+  - (可选)数组，点击时切换
+- 滑块控件
+  - 音量滑块
+  - 亮度滑块
+  - 色温滑块
+  - 文字大小滑块
+  - 旁白语速滑块
+  - 音调滑块
+
+## 类型包括：
+
+- 行选择器
+- 行按钮(偏左|居中，普通类型蓝色|警告类型红色)
+- 一排复选框
+- 滑块控件
+- 步进器控件
+- input输入
+- 纯文字
+- 组合的SVG
+- (左侧占位) 主文字(辅助信息) | (右侧图标)
+- (左侧占位) (图标) 主文字(辅助信息) | (右侧占位)
+- (左侧占位) (图标) 主文字(辅助信息) | 开关 (右侧图标)
+- (左侧占位) (图标) 主文字(辅助信息) | 状态信息 (右侧图标)
+- (左侧占位) (图标) 主文字(辅助信息) | 选择器
+- (大图标) 主文字(辅助信息) | (按钮)
+
+## 特殊说明
+
+### 纯文字
+
+如：iPhone-通用-关于本机-SEID
+
+### 组合的SVG
+
+如：iPhone-通用-iPhone储存空间
+
+### 一排复选框
+
+如：iPhone-通知-任意应用内-提醒
+如：iPhone-设置-显示与亮度-外观
+
+### 行选择器
+
+动态的如：iPhone-勿扰模式-允许的通知
+
+静态的如：iPhone-勿扰模式-时间段内的重复(日、一、二、三、四、五、六)
+
+### (大图标) 主文字(辅助信息) | 按钮
+
+如：iPhone-通用-关于本机-支持范围-Apple支持
+如：iPhone-通用-iPhone储存空间-任意应用内
+
+### (左侧占位) (图标) 主文字(辅助信息) | (右侧占位)
+
+如：iPhone-控制中心
diff --git a/src/components/li/li.ts b/src/components/li/li.ts
index 7ad98ae..333da62 100644
--- a/src/components/li/li.ts
+++ b/src/components/li/li.ts
@@ -16,7 +16,7 @@ export enum LiType {
 
 @customElement('star-li')
 export class StarLi extends LitElement {
-  @property({type: LiType}) type = ''
+  @property({type: String}) type = ''
   @property({type: String}) label = ''
   @property({type: String}) value = ''
   @property({type: String}) default = ''
@@ -289,9 +289,10 @@ export class StarLi extends LitElement {
         --li-right-padding
       ); /* right-arrow须与最右侧文字对齐 */
     }
-    li.hashref {
-      /* padding-inline-end: 0; */ /* right-arrow须与最右侧文字对齐 */
-    }
+    /* right-arrow须与最右侧文字对齐 */
+    /* li.hashref {
+      padding-inline-end: 0;
+    } */
     a {
       display: flex;
       text-decoration: none;
diff --git a/src/components/overlay/README.md b/src/components/overlay/README.md
new file mode 100644
index 0000000..e669c5e
--- /dev/null
+++ b/src/components/overlay/README.md
@@ -0,0 +1,5 @@
+# 全局overlay
+
+## 类型包括：
+
+- 置于底部的overlay，内可填充ul
\ No newline at end of file
diff --git a/src/components/segment-controls/README.md b/src/components/segment-controls/README.md
new file mode 100644
index 0000000..5ca3fe9
--- /dev/null
+++ b/src/components/segment-controls/README.md
@@ -0,0 +1,7 @@
+# 分段控件-Segment Controls
+
+如：iPhone-排行榜
+
+付费|免费|畅销排行
+
+过去24小时|过去4天
\ No newline at end of file
diff --git a/src/components/select/README.md b/src/components/select/README.md
new file mode 100644
index 0000000..db911b2
--- /dev/null
+++ b/src/components/select/README.md
@@ -0,0 +1,8 @@
+# 选择
+
+如: iPhone-通用-键盘-听写语言
+
+## 特点
+
+- 支持多选
+- 强制多选类型`的情况下，选择只有一个时，将其置灰
\ No newline at end of file
diff --git a/src/components/slider/README.md b/src/components/slider/README.md
new file mode 100644
index 0000000..a7db29b
--- /dev/null
+++ b/src/components/slider/README.md
@@ -0,0 +1,12 @@
+# 滑块-Slider
+
+工作职责：
+- 滑块空间
+
+说明：
+- | 用途：分割位置
+
+
+类型包括：
+
+- 左侧图标|滑块|右侧图标
\ No newline at end of file
diff --git a/src/components/stepper/README.md b/src/components/stepper/README.md
new file mode 100644
index 0000000..957ec1f
--- /dev/null
+++ b/src/components/stepper/README.md
@@ -0,0 +1,11 @@
+# 步进器-Stepper
+
+如：iPhone-设置-辅助功能-旁白-盲文-自动前进速度
+
+## 说明：
+
+- | 用途：区分方位
+
+## 类型包括
+
+- 数字|单位|加减步进器
\ No newline at end of file
diff --git a/src/components/ul/README.md b/src/components/ul/README.md
new file mode 100644
index 0000000..2b5645b
--- /dev/null
+++ b/src/components/ul/README.md
@@ -0,0 +1,20 @@
+# 块-无序列表-Unordered List
+
+工作职责：
+- `顺序罗列``有限种`内容填充
+
+说明：
+- | 用途：分割上下
+- TabBar 用于切换内容栏
+
+类型包括：
+
+- 分段控件|行
+- 左侧行|右侧行
+- 自由填充的内容<slot/>
+
+## 特殊说明
+
+### 左侧行|右侧行
+
+用于突出对等显示的信息
\ No newline at end of file
diff --git a/src/components/ul/ul.ts b/src/components/ul/ul.ts
index cf49ebc..0315643 100644
--- a/src/components/ul/ul.ts
+++ b/src/components/ul/ul.ts
@@ -11,7 +11,7 @@ export enum UlType {
 
 @customElement('star-ul')
 export class StarUl extends LitElement {
-  @property({type: UlType}) type = ''
+  @property({type: String}) type = ''
   @property({type: String}) title = ''
   @property({type: String}) text = ''