Merge pull request #17 from ivy-design/dev

合并dev分支

.markdownlint.json

@@ -46,7 +46,10 @@
       "ivy-link",
       "ivy-tag",
       "ivy-text",
-      "ivy-affix"
+      "ivy-affix",
+      "ivy-time-select",
+      "ivy-date-picker",
+      "ivy-time-picker"
     ]
   }
 }

package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "dev": "run-p docs:dev dev:comp",
+    "dev": "run-p dev:comp docs:dev",
     "docs:dev": "pnpm --filter docs run dev",
     "docs:build": "pnpm --filter docs run build",
     "docs:preview": "pnpm --filter docs run preview",
@@ -17,7 +17,8 @@
     "lint": "pnpm --filter @ivy-design/ce run lint",
     "format": "pnpm --filter @ivy-design/ce run format",
     "publish": "pnpm --filter @ivy-design/ce  publish --access public --no-git-checks --registry  https://registry.npmjs.org/",
-    "publish:preview": "pnpm --filter @ivy-design/ce  publish --access public --dry-run --no-git-checks --registry  https://registry.npmjs.org/"
+    "publish:preview": "pnpm --filter @ivy-design/ce  publish --access public --dry-run --no-git-checks --registry  https://registry.npmjs.org/",
+    "npm": "run-s build-only publish"
   },
   "keywords": [
     "front-end",

packages/docs/src/.vitepress/config/sidebar.js

@@ -102,6 +102,10 @@ const components = [
         text: "Switch 开关",
         link: "/components/switch",
       },
+      {
+        text: "TimeSelect 时间选择",
+        link: "/components/time-select",
+      },
     ],
   },
   {

packages/docs/src/components/input.md

@@ -30,6 +30,16 @@
 <ivy-input readonly style="width: 224px;" placeholder="请输入"></ivy-input>
 ```
 
+## 一键清空
+
+使用 `clearable` 属性即可得到一个可一键清空的输入框
+
+<ivy-input  placeholder="请输入" clearable></ivy-input>
+
+```html
+<ivy-input placeholder="请输入" clearable></ivy-input>
+```
+
 ## Props
 
 | 参数        | 说明         | 类型    | 可选值                                         | 默认值 |
@@ -40,3 +50,4 @@
 | disabled    | 是否禁用     | boolean | -                                              | false  |
 | readonly    | 是否只读     | boolean | -                                              | false  |
 | autoFocus   | 自动获取焦点 | boolean | -                                              | false  |
+| clearable   | 显示清除按钮 | boolean | -                                              | false  |

packages/docs/src/components/time-select.md

@@ -0,0 +1,66 @@
+# TimeSelect 时间选择
+
+用于选择或输入日期
+
+可用时间范围是 00:00-23:59
+
+## 固定时间点
+
+提供几个固定的时间点供用户选择
+
+使用 el-time-select 标签，然后通过 start、end 和 step 指定起始时间，结束时间和步长。
+
+<ivy-time-select start="08:30" step="01:00" end="18:30" placeholder="选择时间"></ivy-time-select>
+
+## 时间格式
+
+使用 `format` 属性来控制时间格式 (小时以及分钟)。
+
+在[这里](https://day.js.org/docs/zh-CN/display/format) 查看 Day.js 支持的 format 参数。
+
+:::danger 警告
+请一定要注意传入参数的大小写是否正确
+:::
+
+<ivy-time-select start="08:30" step="01:00" end="18:30" placeholder="选择时间" format="hh:mm A"></ivy-time-select>
+
+## 固定时间范围
+
+如果先选中了开始（或结束）时间，则结束（或开始）时间的状态也将会随之改变。
+
+<ivy-time-select start="08:30" step="01:00" end="18:30" placeholder="开始时间" ref="startRef" @change="startChange"></ivy-time-select>
+<ivy-time-select start="08:30" step="01:00" end="18:30" placeholder="结束时间" ref="endRef" @change="endChange"></ivy-time-select>
+
+## Props
+
+| 属性名      | 说明                                 | 类型      | 可选值 | 默认值 |
+| ----------- | ------------------------------------ | --------- | ------ | ------ |
+| value       | 默认值                               | `string`  | -      | -      |
+| disabled    | 禁用状态                             | `boolean` | -      | -      |
+| clearable   | 是否显示清除按钮                     | `boolean` | -      | -      |
+| placeholder | 占位内容                             | `string`  | -      | -      |
+| start       | 开始时间                             | `string`  | -      | 09:00  |
+| end         | 结束时间                             | `string`  | -      | 17:00  |
+| step        | 间隔时间                             | `string`  | -      | 00:30  |
+| min-time    | 最早时间，早于该时间的时间段将被禁用 | `string`  | -      | -      |
+| max-time    | 最晚时间，晚于该时间的时间段将被禁用 | `string`  | -      | -      |
+| format      | 设置时间格式                         | `string`  | -      | HH:mm  |
+
+## Events
+
+| 事件名 | 说明                   | 类型                      |
+| ------ | ---------------------- | ------------------------- |
+| change | 用户确认选定的值时触发 | (ev: CustomEvent) => void |
+| clear  | 清空选中的值           | (ev: CustomEvent) => void |
+
+<script setup>
+import { ref } from 'vue'
+const startRef = ref()
+const endRef = ref()
+const startChange = (val) => {
+    endRef.value.minTime = val.detail[0]
+}
+const endChange = (val) => {
+    startRef.value.maxTime = val.detail[0]
+}
+</script>

packages/docs/src/guide/index.md

@@ -29,8 +29,8 @@ pnpm add @ivy-design/ce
 ```js
 // vue2
 import Vue from "vue";
-import { registerComponents } from "@ivy-design/wc";
-import "@ivy-design/wc/dist/style.css";
+import { registerComponents } from "@ivy-design/ce";
+import "@ivy-design/ce/dist/style.css";
 registerComponents();
 Vue.config.ignoredElements = [
   // 用一个 `RegExp` 忽略所有“ion-”开头的元素
@@ -40,8 +40,8 @@ Vue.config.ignoredElements = [
 
 // vue3
 import { createApp } from "vue";
-import { registerComponents } from "@ivy-design/wc";
-import "@ivy-design/wc/dist/style.css";
+import { registerComponents } from "@ivy-design/ce";
+import "@ivy-design/ce/dist/style.css";
 registerComponents();
 createApp().config.compilerOptions.isCustomElement = (tag) =>
   tag.startsWith("ivy-");
@@ -50,63 +50,10 @@ createApp().config.compilerOptions.isCustomElement = (tag) =>
 ### react 中使用
 
 ```js
-import { registerComponents } from "@ivy-design/wc";
-import "@ivy-design/wc/dist/style.css";
+import { registerComponents } from "@ivy-design/ce";
+import "@ivy-design/ce/dist/style.css";
 registerComponents();
 //如需单独使用
 import { defineCustomElement } from "ivy-ui/dist/components/ivy-button.js";
 ReactDOM.render(<ivy-button>button</ivy-button>, document.body);
 ```
-
-## 已有组件
-
-|    组件名称     |                     组件描述 |
-| :-------------: | ---------------------------: |
-|     Button      |                         按钮 |
-|      Space      |                         间隔 |
-|    Collapse     |                     折叠面板 |
-|     Divider     |                       分割线 |
-|      Card       |                         卡片 |
-|      Grid       |                         宫格 |
-|      Empty      |                       空状态 |
-|    Timeline     |                       时间轴 |
-|   Breadcrumb    |                   面包屑导航 |
-|       Tag       |                         标签 |
-|      Badge      |                         徽章 |
-|       Row       |                           行 |
-|       Col       |                           列 |
-|     Result      |                         结果 |
-|     Drawer      |                         抽屉 |
-|      Input      |                       输入框 |
-|       Tip       |                         提示 |
-|     Select      |                     下拉选择 |
-|     Loading     |                         加载 |
-|     Details     | 详情-同原生的 `details` 标签 |
-|    Progress     |                       进度条 |
-|     Dialog      |                         弹框 |
-|    Dropdown     |                     下拉菜单 |
-|      Steps      |                       步骤条 |
-|     Switch      |                         开关 |
-|      Radio      |                       单选框 |
-|    Checkbox     |                       多选框 |
-|   AspectRatio   |             固定宽高比例容器 |
-|      Icon       |                         图标 |
-|     Circle      |                   圆形进度条 |
-|      Image      |                         图片 |
-|   Description   |                     描述列表 |
-|   Contextmenu   |                     邮件菜单 |
-|      rate       |                         评分 |
-|     Avatar      |                         头像 |
-|    Carousel     |                       轮播图 |
-| CopyToClipboard |                 复制到剪切板 |
-
-## 未完成组件
-
-|   组件名称   |  组件描述  |
-| :----------: | :--------: |
-|     tabs     |   标签页   |
-|   message    |  消息提醒  |
-| notification |   通知框   |
-|    table     |    表格    |
-|    split     |  分割面板  |
-|  datePicker  | 日期选择器 |

packages/ivy-design-wc/package.json

@@ -53,6 +53,7 @@
     },
     "dependencies": {
         "@vueuse/core": "^10.6.1",
+        "dayjs": "^1.11.10",
         "vue": "^3.3.8"
     },
     "devDependencies": {

packages/ivy-design-wc/src/components/affix/index.ts

@@ -1,6 +1,6 @@
 import { defineCustomElement } from 'vue'
 import { install } from '@/utils/index'
-import comp from './index.ce.vue'
+import comp from './index.vue'
 
 const Affix = defineCustomElement(comp)
 

packages/ivy-design-wc/src/components/aspect-ratio/index.ts

@@ -1,6 +1,6 @@
 import { defineCustomElement } from 'vue'
 import { install } from '@/utils/index'
-import comp from './index.ce.vue'
+import comp from './index.vue'
 
 const AspectRatio = defineCustomElement(comp)
 

packages/ivy-design-wc/src/components/avatar/index.ts

@@ -1,6 +1,6 @@
 import { defineCustomElement } from 'vue'
 import { install } from '@/utils/index'
-import comp from './index.ce.vue'
+import comp from './index.vue'
 
 const Avatar = defineCustomElement(comp)
 

packages/ivy-design-wc/src/components/badge/index.ts

@@ -1,6 +1,6 @@
 import { defineCustomElement } from 'vue'
 import { install } from '@/utils/index'
-import comp from './index.ce.vue'
+import comp from './index.vue'
 
 const Badge = defineCustomElement(comp)
 

packages/ivy-design-wc/src/components/breadcrumb/index.ts

@@ -1,7 +1,7 @@
 import { defineCustomElement } from 'vue'
 import { install } from '@/utils/index'
-import comp from './index.ce.vue'
-import item from './item.ce.vue'
+import comp from './index.vue'
+import item from './item.vue'
 
 const Breadcrumb = defineCustomElement(comp)
 const registerBreadcrumbComponent = (prefix = 'Ivy') => {

packages/ivy-design-wc/src/components/button/index.ts

@@ -1,6 +1,6 @@
 import { defineCustomElement } from 'vue'
 import { install } from '@/utils/index'
-import comp from './index.ce.vue'
+import comp from './index.vue'
 
 const Button = defineCustomElement(comp)
 

packages/ivy-design-wc/src/components/card/index.ts

@@ -1,6 +1,6 @@
 import { defineCustomElement } from 'vue'
 import { install } from '@/utils/index'
-import comp from './index.ce.vue'
+import comp from './index.vue'
 
 const Card = defineCustomElement(comp)
 

packages/ivy-design-wc/src/components/carousel/index.ts

@@ -1,7 +1,7 @@
 import { defineCustomElement } from 'vue'
 import { install } from '@/utils/index'
-import index from './index.ce.vue'
-import item from './item.ce.vue'
+import index from './index.vue'
+import item from './item.vue'
 
 const Carousel = defineCustomElement(index)
 const registerCarouselComponent = (prefix = 'Ivy') => {

packages/ivy-design-wc/src/components/checkbox/index.ts

@@ -1,7 +1,7 @@
 import { defineCustomElement } from 'vue'
 import { install } from '@/utils/index'
-import comp from './index.ce.vue'
-import groupCeVue from './group.ce.vue'
+import comp from './index.vue'
+import groupCeVue from './group.vue'
 
 const Checkbox = defineCustomElement(comp)
 

packages/ivy-design-wc/src/components/circle/index.ts

@@ -1,6 +1,6 @@
 import { defineCustomElement } from 'vue'
 import { install } from '@/utils/index'
-import comp from './index.ce.vue'
+import comp from './index.vue'
 
 const Circle = defineCustomElement(comp)
 

packages/ivy-design-wc/src/components/collapse/index.ts

@@ -1,7 +1,7 @@
 import { defineCustomElement } from 'vue'
 import { install } from '@/utils/index'
-import index from './index.ce.vue'
-import item from './item.ce.vue'
+import index from './index.vue'
+import item from './item.vue'
 
 const Collapse = defineCustomElement(index)
 const registerCollapseComponent = (prefix = 'Ivy') => {

packages/ivy-design-wc/src/components/contextmenu/index.ts

@@ -1,6 +1,6 @@
 import { defineCustomElement } from 'vue'
 import { install } from '@/utils/index'
-import comp from './index.ce.vue'
+import comp from './index.vue'
 
 const Contextmenu = defineCustomElement(comp)
 

packages/ivy-design-wc/src/components/copy-to-clipboard/index.ts

@@ -1,6 +1,6 @@
 import { defineCustomElement } from 'vue'
 import { install } from '@/utils/index'
-import comp from './index.ce.vue'
+import comp from './index.vue'
 
 const CopyToClipboard = defineCustomElement(comp)
 

packages/ivy-design-wc/src/components/description/index.ts

@@ -1,7 +1,7 @@
 import { defineCustomElement } from 'vue'
 import { install } from '@/utils/index'
-import comp from './index.ce.vue'
-import itemCeVue from './item.ce.vue'
+import comp from './index.vue'
+import itemCeVue from './item.vue'
 
 const Description = defineCustomElement(comp)
 const registerDescriptionComponent = (prefix = 'Ivy') => {

packages/ivy-design-wc/src/components/details/index.ts

@@ -1,6 +1,6 @@
 import { defineCustomElement } from 'vue'
 import { install } from '@/utils/index'
-import comp from './index.ce.vue'
+import comp from './index.vue'
 
 const Details = defineCustomElement(comp)
 

packages/ivy-design-wc/src/components/dialog/index.ts

@@ -1,12 +1,12 @@
 import { defineCustomElement } from 'vue'
 import { install } from '@/utils/index'
-import indexCeVue from './index.ce.vue'
+import Comp from './index.vue'
 
-const Dialog = defineCustomElement(indexCeVue)
+const Dialog = defineCustomElement(Comp)
 
 const registerComponent = (prefix = 'Ivy') => {
-    const key = `${prefix}${indexCeVue.name}`
-    install(key, indexCeVue)
+    const key = `${prefix}${Comp.name}`
+    install(key, Comp)
 }
 
 export { Dialog, registerComponent as registerDialogComponent }

packages/ivy-design-wc/src/components/dialog/index.ce.vue → packages/ivy-design-wc/src/components/dialog/index.vue

@@ -70,7 +70,7 @@ watch(
         <div class="ivy-mask" v-if="props.showMask === 'true'" @click="handlerMaskClose"></div>
     </transition>
     <transition name="fade">
-        <div class="ivy-modal" ref="el">
+        <div class="ivy-modal" ref="el" v-if="props.open">
             <div class="ivy-modal-header">
                 <slot name="header">{{ props.header }}</slot>
             </div>
@@ -130,7 +130,9 @@ watch(
     border-radius: var(--border-radius, 8px);
     position: relative;
     animation: zoomIn 0.3s forwards;
-    box-shadow: 0 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
+    box-shadow:
+        0 12px 32px 4px rgba(0, 0, 0, 0.04),
+        0px 8px 20px rgba(0, 0, 0, 0.08);
     border: 1px solid var(--ivy-border-color, #dcdfe6);
 }
 .ivy-modal-header {