diff --git a/packages/docs/ReleaesNote.md b/packages/docs/ReleaesNote.md index 32ca0f984926de868e953793bf50b912782a327b..80bd39422954e97dc76097256fe5cef6defcc603 100644 --- a/packages/docs/ReleaesNote.md +++ b/packages/docs/ReleaesNote.md @@ -1,9 +1,20 @@ # 0.0.26 -## card +1. Card 去掉 titleMaxRow、detailMaxRow 属性，使用 css 变量设置： --card-title-max-row，--card-detail-max-row +2. Figure 去掉 position、fit 属性，使用 css 变量设置：--figure-fit --figure-position -- 去掉 titleMaxRow、detailMaxRow 属性，使用 css 变量设置： --card-title-max-row，--card-detail-max-row +# 0.0.50 - 0620 -## figure +1. 优化 clickoutside，支持 touch，popover 支持移动端 touch 触发隐藏 +2. popup 宽度限制改为相对于屏幕 +3. 修复上传组件重复选择同一文件，不触发 change 事件问题 +4. invalid 属性从 input-number 组件移到 input 组件 -- 去掉 position、fit 属性，使用 css 变量设置：--figure-fit --figure-position +# 0.0.51 - + +1. 修复 layer 组件在卸载时，未移除挂载目标的相关类； +2. 表格插槽支持自定义 td、th 内容； +3. 修复 pagination 跳转输入框能输入小数问题； +4. todo carousel 增加鼠标 hover 停止轮播功能，支持是否循环 todo +5. upload 增加 beforeSelect 入参 +6. 浮层蒙层共用，解决闪烁问题 todo diff --git a/packages/docs/button.md b/packages/docs/button.md index ac5149bb9df4a650fe2aa831ce8459e0652b3e0c..bc5a8fe86401d0cbfb3497e7130a11f87f2938fa 100644 --- a/packages/docs/button.md +++ b/packages/docs/button.md @@ -1,20 +1,38 @@ -# Button 按钮 +# Button 按钮 组件设计 -## props +# 组件介绍 -| name | type | 默认值 | 说明 | -| :------ | :--------------------------------------- | :-------- | :------------- | -| shape | 'large' \| 'normal' \| 'small' | 'normal' | 可选，形状 | -| size | 'mini' \| 'small' \| 'medium' \| 'large' | 'medium' | 可选，尺寸 | -| type | 'primary' \|'outline'\| 'text' \|'link' | 'outline' | 可选，状态 | -| loading | boolean | false | 可选，加载状态 | +页面中常用的按钮 -## event +1. 支持设置不同状态颜色，设置边框、填充样式，以及圆角值（也支持全局设置）； +2. 支持加载状态 +3. 支持设置链接跳转，图标 -## expose +## props 入参 -## slot +| name | type | 默认值 | 说明 | +| :------- | :---------------------------------------------------------- | :-------- | :------------------------- | +| color | "normal" \| "primary" \| "success" \| "warning" \| "danger" | 'normal' | 可选，颜色类型 | +| size | 'mini' \| 'small' \| 'medium' \| 'large' | 'medium' | 可选，按钮尺寸 | +| variant | "solid" \| "outline" \| "text" | 'outline' | 可选，按钮类型 | +| loading | boolean | false | 可选，加载状态 | +| disabled | boolean | false | 可选，是否为禁用状态 | +| href | string | -- | 可选，链接跳转 | +| icon | Component | -- | 可选，前缀图标 | +| tag | string | 'button' | 可选，自定义元素 html 标签 | -| name | 说明 | -| :--- | :------- | -| icon | 按钮图标 | +## event 事件 + +| name | 参数 | 返回值 | 说明 | +| :---- | :------------- | :----- | :------- | +| click | (e:MouseEvent) | -- | 点击事件 | + +## slot 插槽 + +| name | 说明 | +| :------ | :----------- | +| default | 按钮内容 | +| icon | 前缀按钮图标 | +| suffix | 后缀 | + +## expose 导出 diff --git a/packages/docs/global.md b/packages/docs/global.md index d67b52f6ee80dc77ecc00c3a8bd1556f3b0abe67..ee01ad06970e9817722a5f5e9c8ae5e3e77688d4 100644 --- a/packages/docs/global.md +++ b/packages/docs/global.md @@ -1,28 +1,24 @@ -# 全局配置 +# 全局配置设计 + +组件可以通过全局配置部分样式属性，同时支持动态设置。 + +## 方案设计 + +1. 设置全局默认值，同时暴露接口进行默认值修改，基于 vue 响应式，实现全局配置动态化 +2. 组件内部图标统一配置，并支持接口修改，实现组件深度定制 ## 配置全局样式 -| 方法名 | 参数 | 返回值 | 说明 | -| :-------- | :------------------------------------- | :----- | :--------------- | -| initSize | (type: 'large' \| 'normal' \| 'small') | -- | 设置全局组件尺寸 | -| initRound | (type: 'pill' \| '') | -- | 设置全局组件圆角 | +| 方法名 | 参数 | 返回值 | 说明 | +| :------------- | :-------------------------------------- | :----- | :----------------------- | +| initSize | (type: 'large' \| 'medium' \| 'small') | -- | 设置全局组件尺寸 | +| initRound | (type: 'pill' \| '') | -- | 设置全局组件圆角 | +| initZIndex | (val: number) | -- | 设置全局组件初始 z-index | +| initMediaPoint | point: Record<'phone' \| 'pad', number> | -- | 设置全局组件响应式断点 | ## 配置全局图标 -| 方法名 | 参数 | 返回值 | 说明 | -| :----------------- | :---------------- | :----- | :--------------------- | -| initLoadingIcon | (icon: Component) | -- | 设置全局加载按钮图标 | -| initLinkArrowIcon | (icon: Component) | -- | 设置 link 组件箭头图标 | -| initLinkPrefixIcon | (icon: Component) | -- | 设置 link 组件前缀图标 | -| initCloseIcon | (icon: Component) | -- | 设置全局关闭图标 | -| initAddIcon | (icon: Component) | -- | 设置全局添加图标 | - -| 方法名 | 参数 | 默认值 | -| :------ | :------------------------------------ | :-------- | -| color | normal primary success warning danger | normal | -| variant | fill outline text | outline | -| rounded | undefined string 'pill' | undefined | -| size | small normal large | normal | +具体接口见[`init-icons.ts`](../opendesign/src/_utils/init-icons.ts) # 变量定义都在 var.scss 里，同时使用最外层内定义； diff --git a/packages/docs/input-number.md b/packages/docs/input-number.md index 0ceb8d2cae562699395b42a3223925ef80b25ee3..fc6ba92b65c520b7776e7613952e2e6efac08ebe 100644 --- a/packages/docs/input-number.md +++ b/packages/docs/input-number.md @@ -1,4 +1,4 @@ -# Divider 分割线 +# input-number 数字输入框 ## 说明 @@ -36,5 +36,3 @@ parse/format 1. 当 change 事件时，执行 format - -2. diff --git a/packages/docs/input.md b/packages/docs/input.md index 77b3ab07f023ce79c6d34d7c4c75dec1dfe3d65c..01194d9b72fea265479fe42f17a6f27da086be1f 100644 --- a/packages/docs/input.md +++ b/packages/docs/input.md @@ -1,5 +1,7 @@ # Input 输入框 +输入框组件，支持用户输入内容 + ## 说明 > `realValue: number|string` 数字输入框当前值 @@ -10,7 +12,7 @@ > 数字非法判断：非 number 字符串（Number 无法转换为数字）、不在[min, max]范围内； -## 设计 +## 组件交互设计 1. 初始化 realValue @@ -44,3 +46,46 @@ - 触发`pressEnter`事件，参数：`(realValue, KeyboardEvent)`; - 如果值改变，触发`change`事件，参数: `(realValue)` - 触发`update:modelValue`事件，参数: `(realValue)` + +## props 入参 + +| name | type | 默认值 | 说明 | +| :------------- | :---------------------------------------------------------- | :---------- | :--------------------------------------------------------------- | +| modelValue | String, Number | -- | 可选，输入框的值 v-model | +| defaultValue | String, Number | -- | 可选，输入框的默认值 | +| type | 'text' \| 'password' | 'text' | 可选，输入框类型 | +| color | "normal" \| "primary" \| "success" \| "warning" \| "danger" | 'normal' | 可选，颜色类型 | +| size | 'mini' \| 'small' \| 'medium' \| 'large' | 'medium' | 可选，按钮尺寸 | +| variant | "solid" \| "outline" \| "text" | 'outline' | 可选，按钮类型 | +| disabled | boolean | false | 可选，是否为禁用状态 | +| readonly | boolean | false | 可选，是否为只读状态 | +| invalid | boolean | false | 可选，是否为非法值状态 | +| clearable | boolean | true | 可选，是否是否可以清除 | +| autoWidth | boolean | true | 可选，是否自动增加宽度 | +| placeholder | string | -- | 可选，提示文本 | +| showPasswordOn | 'click' \| 'mousedown' | 'mousedown' | 可选，显示密码的方式 | +| parse | (value: string) => string | -- | 可选，解析输入框的值 | +| format | (value: string \| number) => string \| number | -- | 可选，对值格式化，控制显示格式,需搭配 parse 处理，保证值的正确性 | + +## event 事件 + +| name | 参数 | 返回值 | 说明 | +| :---------------- | :--------------------------------- | :----- | :------------- | +| update:modelValue | (value: string) | -- | 值更新事件 | +| change | (value: string) | -- | 值变化事件 | +| input | (value: string,evt: Event) | -- | 输入事件 | +| blur | (value: string,evt: FocusEvent) | -- | 失焦事件 | +| focus | (value: string,evt: FocusEvent) | -- | 聚焦事件 | +| clear | (evt: Event) | -- | 清除输入框事件 | +| pressEnter | (value: string,evt: KeyboardEvent) | -- | 回车事件 | + +## slot 插槽 + +| name | 说明 | +| :------ | :------- | +| prepend | 前置插槽 | +| prefix | 前缀插槽 | +| suffix | 后缀插槽 | +| append | 后置插槽 | + +## expose 导出 diff --git a/packages/docs/opendesign.md b/packages/docs/opendesign.md new file mode 100644 index 0000000000000000000000000000000000000000..db1c66efcd2848f18972aba4af440322fcd8d6c2 --- /dev/null +++ b/packages/docs/opendesign.md @@ -0,0 +1,66 @@ +# opendesign 组件设计 + +## 需求背景 + +为了支撑 openEuler 社区前端体验提升，帮助更多开发者、Sig 组快速搭建自己的前端页面，故设计开发了一套前端组件库。 +该组件库需要支持： + +1. 强大的皮肤定制能力，支持开发者快速定制皮肤，实现页面风格一致； +2. 上手难度低，开箱即用，提供示例模版，能快速搭建项目页面； + +## 方案设计 + +1. 基于当前开发者能力现状（国内 vue 开发者最多），采用 vue3 作为组件开发框架，组件实现采用逻辑与 UI 分离； +2. 基于 Css Variables，结合 opendesign 设计体系，设计变量体系，定义全局变量以及每个组件变量，实现全局+局部皮肤定制能力； +3. 针对尺寸、颜色、圆角、图标等设置，提供全局配置接口，基于 vue 响应式机制，实现配置动态化 +4. 组件避免依赖 dom，支持服务端渲染； + +## 方案实现 + +### 变量体系 Token + +#### 1. 全局变量 + +- 色盘 Palette +- 颜色 Color + - 基础色 + - 状态色 + - 控件色 + - 填充色 + - 信息色 +- 阴影 Shadow +- 字体 Font +- 尺寸 Size + - 组件尺寸 + - 图标尺寸 + - 圆角尺寸 +- 间距 Gap +- 动画 Animation + - 动画曲线 + - 持续时间 + +> 例： [light.token.css](../opendesign/src/_styles/light.token.css) + +#### 2. 组件变量 + +基于每个组件状态、类型，定义组件变量，值引用全局变量. + +> 例： [button/var.css](../opendesign/src/button/style/var.scss) + +### 动态全局配置 + +1. 设置全局默认值，同时暴露接口进行默认值修改 +2. 组件内部图标统一配置，并支持接口修改，实现组件深度定制 + +#### 1. 配置全局样式 + +| 方法名 | 参数 | 返回值 | 说明 | +| :------------- | :-------------------------------------- | :----- | :----------------------- | +| initSize | (type: 'large' \| 'medium' \| 'small') | -- | 设置全局组件尺寸 | +| initRound | (type: 'pill' \| '') | -- | 设置全局组件圆角 | +| initZIndex | (val: number) | -- | 设置全局组件初始 z-index | +| initMediaPoint | point: Record<'phone' \| 'pad', number> | -- | 设置全局组件响应式断点 | + +#### 2. 配置全局图标 + +具体接口见[`init-icons.ts`](../opendesign/src/_utils/init-icons.ts) diff --git a/packages/docs/select.md b/packages/docs/select.md index bcbeb9899cb7b0f6b828849f0a515176a3a9d16f..c64653d481c5dd3ca36fd2b65973682de728cd2a 100644 --- a/packages/docs/select.md +++ b/packages/docs/select.md @@ -1,26 +1,54 @@ # Select 下拉选择器 +下拉选择框，支持单选、多选，加载中状态 + ## props -| name | type | 默认值 | 说明 | -| :-------------- | :------------------------------- | :----------------- | ------------------------------------------------------------------- | -| modelValue | string \| number（v-model） | -- | 必选，开关状态 | -| shape | ShapeT | 'normal' | 可选，形状: large \| normal \| small | -| size | SizeT | 'normal' | 可选，形状 normal \| round | -| disabled | boolean | false | 可选，形状 | -| placeholder | string | 'please select...' | 可选，提示文本 | -| loading | boolean | false | 可选，加载状态 | -| beforeChange | function | ()=>true | 可选，return Promise. resolve(true)继续切换，resolve(false)阻止切换 | -| optionWrapClass | string | '' | 可选，下拉的自定义类 | -| optionPosition | PopupPositionT | 'bl' | 可选，下拉的位置 | -| optionWidthMode | 'auto' \| 'min-width' \| 'width' | 'min-width' | 可选，下拉的宽度适配方式 | +| name | type | 默认值 | 说明 | +| :---------------- | :------------------------------------------------------------------------------------------------------------------- | :-------------------------- | ---------------------------------------- | +| modelValue | string \| number \| string[] \| number[] \| (string \| number)[] | -- | 必选，下拉框的 v-model 值 | +| defaultValue | string \| number \| string[] \| number[] \| (string \| number)[] | -- | 必选，下拉框的值 | +| color | "normal" \| "primary" \| "success" \| "warning" \| "danger" | 'normal' | 可选，颜色类型 | +| size | 'mini' \| 'small' \| 'medium' \| 'large' | 'medium' | 可选，按钮尺寸 | +| variant | "solid" \| "outline" \| "text" | 'outline' | 可选，按钮类型 | +| loading | boolean | false | 可选，加载状态 | +| disabled | boolean | false | 可选，是否为禁用状态 | +| placeholder | string | -- | 可选，提示文本 | +| multiple | boolean | false | 可选，是否支持多选 | +| maxTagCount | boolean | false | 可选，是否支持多选 | +| clearable | boolean | true | 可选，是否是否可以清除 | +| trigger | PopupTriggerT | true | 可选，是否是否可以清除 | +| optionPosition | PopupPositionT | 'bl' | 可选，下拉的位置 | +| optionWidthMode | 'auto' \| 'min-width' \| 'width' | 'min-width' | 可选，下拉的宽度适配方式 | +| optionWrapClass | string | '' | 可选，下拉的自定义类 | +| unmountOnHide | boolean | false | 可选，是否在结束选择时，卸载下拉选项 | +| transition | string | o-fade-up-enter | 可选，过渡动画 | +| beforeSelect | (value: string \| number, currentValue: SelectValueT) => Promise \| boolean \| SelectValueT | -- | 可选，选择前回调，根据返回值判断是否显示 | +| beforeOptionsShow | () => Promise \| boolean | -- | 显示前回调，根据返回值判断是否显示 | +| optionsWrapper | string \| HTMLElement \| null | 'body' | 显示前回调，根据返回值判断是否显示 | +| foldLabel | (tags: Array) => string | -- | 多选超过最大 tag 是，文本显示 | +| showFoldTags | boolean \| 'hover' \| 'click' | 'hover' | 浮层显示收起的多选 tag | +| optionTitle | string | 选项标题（pad、phone 显示） | +| noResponsive | boolean | 下拉浮层是否响应式 | ## event -| name | 参数 | 说明 | -| :----- | :-------------------------- | :------------- | -| change | (value: boolean; ev: Event) | 选择切换后触发 | +| name | 参数 | 说明 | +| :--------------------- | :--------------------- | :---------------------- | +| change | (value: SelectValueT) | 选择值切换后触发 | +| update:modelValue | (value: SelectValueT ) | 选择值变化触发 | +| options-visible-change | (value: boolean ) | 下拉选项显示/隐藏后触发 | +| clear | (evt: Event ) | 清除下拉框的值后触发 | ## expose ## slot + +| name | 说明 | +| :------- | :----------------- | +| tag-fold | 多选时，折叠的文本 | +| arrow | 下拉箭头图标插槽 | +| suffix | 下拉框后缀插槽 | +| default | 下拉选项插槽 | +| empty | 下拉选项为空时插槽 | +| 'name' | 每个下拉选项插槽 | diff --git a/packages/docs/tab.md b/packages/docs/tab.md index 31433bf092ab3600650e39ed58753a1138bc6bde..2d3c84aa210676ae676975b239944b761504d158 100644 --- a/packages/docs/tab.md +++ b/packages/docs/tab.md @@ -1,14 +1,19 @@ # Tab 页签 +页签组件，支持切换页签显示不同内容 + ## props ### OTab -| name | type | 默认值 | 说明 | -| :--------- | :-------------------------- | :----- | ------------------------------------ | -| modelValue | string \| number（v-model） | '' | 可选，开关状态 | -| lazy | boolean | false | 可选，是否在首次激活标签时再挂载内容 | -| addable | boolean | false | 可选，是否可以添加页签 | +| name | type | 默认值 | 说明 | +| :---------- | :----------------------------- | :-------- | ------------------------------------ | +| modelValue | string \| number（v-model） | '' | 可选，开关状态 | +| lazy | boolean | false | 可选，是否在首次激活标签时再挂载内容 | +| addable | boolean | false | 可选，是否可以添加页签 | +| variant | "solid" \| "outline" \| "text" | 'outline' | 可选，按钮类型 | +| addInactive | boolean | false | 可选，不激活新添加页签 | +| line | boolean | true | 可选，是否展示 nav 线 | ### OTabPane @@ -26,10 +31,12 @@ ### OTab -| name | 参数 | 说明 | -| :----- | :---------------------------------------------------- | :------------- | -| change | (value: string \| number, oldValue: string \| number) | 页签切换后触发 | -| delete | (value: string \| number ) | 页签删除后触发 | +| name | 参数 | 说明 | +| :----- | :------------------------------------------------------ | :--------------- | +| change | (value: string \| number, oldValue: string \| number) | 页签切换后触发 | +| change | (value: string \| number, oldValue?: string \| number ) | 页签切换变化触发 | +| delete | (value: string \| number ) | 页签删除后触发 | +| add | (evt: MouseEvent ) | 页签添加后触发 | ## expose @@ -37,12 +44,15 @@ ### OTab -| name | 说明 | -| :--- | :------------------- | -| act | 页签右侧额外内容插槽 | +| name | 说明 | +| :----- | :------- | +| prefix | 前缀插槽 | +| suffix | 后缀插槽 | +| archor | 高亮插槽 | ### OTabPane -| name | 说明 | -| :--- | :------- | -| nav | 页签插槽 | +| name | 说明 | +| :------ | :----------- | +| nav | 页签头部插槽 | +| default | 页签内容插槽 | diff --git a/packages/docs/table.md b/packages/docs/table.md index 86a7e653ab297984485a6d8de4b614cb03be1475..0f43cc5b3ef3bfd79a208f06951f79ad0d27d38c 100644 --- a/packages/docs/table.md +++ b/packages/docs/table.md @@ -2,47 +2,8 @@ ## props -### OTab - -| name | type | 默认值 | 说明 | -| :--------- | :-------------------------- | :----- | ------------------------------------ | -| modelValue | string \| number（v-model） | '' | 可选，开关状态 | -| lazy | boolean | false | 可选，是否在首次激活标签时再挂载内容 | -| addable | boolean | false | 可选，是否可以添加页签 | - -### OTabPane - -| name | type | 默认值 | 说明 | -| :------------ | :--------------- | :-------------- | ------------------------------------ | -| value | string \| number | instance.uid | 可选，tab id | -| label | string | undefined | 可选，页签文本 | -| transition | string | o-fade-up-enter | 可选，页签切换时过渡动画 | -| lazy | boolean | false | 可选，是否在首次激活标签时再挂载内容 | -| unmountOnHide | boolean | false | 可选，是否在未激活时卸载页签内容 | -| disabled | boolean | false | 可选，是否禁用选中 | -| closable | boolean | false | 可选，是否可以删除 | - ## event -### OTab - -| name | 参数 | 说明 | -| :----- | :---------------------------------------------------- | :------------- | -| change | (value: string \| number, oldValue: string \| number) | 页签切换后触发 | -| delete | (value: string \| number ) | 页签删除后触发 | - ## expose ## slot - -### OTab - -| name | 说明 | -| :--- | :------------------- | -| act | 页签右侧额外内容插槽 | - -### OTabPane - -| name | 说明 | -| :--- | :------- | -| nav | 页签插槽 | diff --git a/packages/opendesign/.gitignore b/packages/opendesign/.gitignore index 23d4f9755094653a4baf6cc7f9039452ca927baf..abcfe591f2bc9eb29306939345ca50aac1abc32f 100644 --- a/packages/opendesign/.gitignore +++ b/packages/opendesign/.gitignore @@ -23,6 +23,6 @@ dist-ssr *.sln *.sw? -src/components/icon-components +icon-components es lib \ No newline at end of file diff --git a/packages/opendesign/src/icons/cleansvg.config.ts b/packages/opendesign/icons/cleansvg.config.ts similarity index 100% rename from packages/opendesign/src/icons/cleansvg.config.ts rename to packages/opendesign/icons/cleansvg.config.ts diff --git a/packages/opendesign/src/icons/icon.config.ts b/packages/opendesign/icons/icon.config.ts similarity index 66% rename from packages/opendesign/src/icons/icon.config.ts rename to packages/opendesign/icons/icon.config.ts index 41377c1d473c11356a34313cddaea39073a6a88e..c5f316277c8fed07f9c76e34a595fc14485b63dd 100644 --- a/packages/opendesign/src/icons/icon.config.ts +++ b/packages/opendesign/icons/icon.config.ts @@ -1,6 +1,6 @@ module.exports = { input: './svgs', - output: '../components/icon-components/', + output: '../src/icon-components/', componentClass: 'o-svg-icon', prefix: 'o-', }; diff --git a/packages/opendesign/src/icons/svgs/color/ascend.svg b/packages/opendesign/icons/svgs/color/ascend.svg similarity index 100% rename from packages/opendesign/src/icons/svgs/color/ascend.svg rename to packages/opendesign/icons/svgs/color/ascend.svg diff --git a/packages/opendesign/icons/svgs/color/danger.svg b/packages/opendesign/icons/svgs/color/danger.svg new file mode 100644 index 0000000000000000000000000000000000000000..3724f7598b862f47ab4c1d470fad7f7f37ac261e --- /dev/null +++ b/packages/opendesign/icons/svgs/color/danger.svg @@ -0,0 +1,5 @@ + +danger + + + diff --git a/packages/opendesign/icons/svgs/color/info.svg b/packages/opendesign/icons/svgs/color/info.svg new file mode 100644 index 0000000000000000000000000000000000000000..d4b556f9873844711ba5edd057624ef95ecdf168 --- /dev/null +++ b/packages/opendesign/icons/svgs/color/info.svg @@ -0,0 +1,5 @@ + +info + + + diff --git a/packages/opendesign/src/icons/svgs/color/kunpeng.svg b/packages/opendesign/icons/svgs/color/kunpeng.svg similarity index 100% rename from packages/opendesign/src/icons/svgs/color/kunpeng.svg rename to packages/opendesign/icons/svgs/color/kunpeng.svg diff --git a/packages/opendesign/src/icons/svgs/color/skill.svg b/packages/opendesign/icons/svgs/color/skill.svg similarity index 100% rename from packages/opendesign/src/icons/svgs/color/skill.svg rename to packages/opendesign/icons/svgs/color/skill.svg diff --git a/packages/opendesign/icons/svgs/color/success.svg b/packages/opendesign/icons/svgs/color/success.svg new file mode 100644 index 0000000000000000000000000000000000000000..c155c2a03c24136721c62f8248b726a479d390fd --- /dev/null +++ b/packages/opendesign/icons/svgs/color/success.svg @@ -0,0 +1,5 @@ + +success + + + diff --git a/packages/opendesign/icons/svgs/color/warning.svg b/packages/opendesign/icons/svgs/color/warning.svg new file mode 100644 index 0000000000000000000000000000000000000000..b3f948c7b58213d18fbe853fa71df1708a30431a --- /dev/null +++ b/packages/opendesign/icons/svgs/color/warning.svg @@ -0,0 +1,5 @@ + +warning + + + diff --git a/packages/opendesign/icons/svgs/fill/add.svg b/packages/opendesign/icons/svgs/fill/add.svg new file mode 100644 index 0000000000000000000000000000000000000000..82f7277d8fb48fad37233de8101b30ee9e559242 --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/add.svg @@ -0,0 +1,4 @@ + +add + + diff --git a/packages/opendesign/icons/svgs/fill/arrow-down.svg b/packages/opendesign/icons/svgs/fill/arrow-down.svg new file mode 100644 index 0000000000000000000000000000000000000000..ab36a371549314c89c4d50122379229a46be0146 --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/arrow-down.svg @@ -0,0 +1,4 @@ + +arrow-down + + diff --git a/packages/opendesign/icons/svgs/fill/arrow-left.svg b/packages/opendesign/icons/svgs/fill/arrow-left.svg new file mode 100644 index 0000000000000000000000000000000000000000..2c78dea2ea34b35193506e532644521195241eac --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/arrow-left.svg @@ -0,0 +1,4 @@ + +arrow-left + + diff --git a/packages/opendesign/icons/svgs/fill/arrow-right.svg b/packages/opendesign/icons/svgs/fill/arrow-right.svg new file mode 100644 index 0000000000000000000000000000000000000000..1dfb5d84f786fdd2a96072452809a8065a74e556 --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/arrow-right.svg @@ -0,0 +1,4 @@ + +arrow-right + + diff --git a/packages/opendesign/icons/svgs/fill/arrow-up.svg b/packages/opendesign/icons/svgs/fill/arrow-up.svg new file mode 100644 index 0000000000000000000000000000000000000000..59622894329855ae686a22a1641dbef31ff37a36 --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/arrow-up.svg @@ -0,0 +1,4 @@ + +arrow-up + + diff --git a/packages/opendesign/icons/svgs/fill/calendar.svg b/packages/opendesign/icons/svgs/fill/calendar.svg new file mode 100644 index 0000000000000000000000000000000000000000..426baebd156e24d10a9582d25435a8681d8e932a --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/calendar.svg @@ -0,0 +1,4 @@ + +calendar + + diff --git a/packages/opendesign/src/icons/svgs/fill/arrow-traingle-down.svg b/packages/opendesign/icons/svgs/fill/caret-down.svg similarity index 91% rename from packages/opendesign/src/icons/svgs/fill/arrow-traingle-down.svg rename to packages/opendesign/icons/svgs/fill/caret-down.svg index 9360f1bfbca925457182093e1fe03121388a994d..d76256d8b56f6e4acfc88f1b62eee975cbcf1253 100644 --- a/packages/opendesign/src/icons/svgs/fill/arrow-traingle-down.svg +++ b/packages/opendesign/icons/svgs/fill/caret-down.svg @@ -1,4 +1,4 @@ -arrow-traingle-down +caret-down diff --git a/packages/opendesign/icons/svgs/fill/caret-left.svg b/packages/opendesign/icons/svgs/fill/caret-left.svg new file mode 100644 index 0000000000000000000000000000000000000000..9151eb2335337c67c305d9e53a68c10c30e63f74 --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/caret-left.svg @@ -0,0 +1,4 @@ + +caret-left + + diff --git a/packages/opendesign/src/icons/svgs/fill/arrow-traingle-right.svg b/packages/opendesign/icons/svgs/fill/caret-right.svg similarity index 91% rename from packages/opendesign/src/icons/svgs/fill/arrow-traingle-right.svg rename to packages/opendesign/icons/svgs/fill/caret-right.svg index 397259fe7380a1fba590a07bc629235ff89743d9..07fe289199101458b1556d579a71209b0d9872f2 100644 --- a/packages/opendesign/src/icons/svgs/fill/arrow-traingle-right.svg +++ b/packages/opendesign/icons/svgs/fill/caret-right.svg @@ -1,4 +1,4 @@ -arrow-traingle-right +caret-right diff --git a/packages/opendesign/src/icons/svgs/fill/arrow-traingle-up.svg b/packages/opendesign/icons/svgs/fill/caret-up.svg similarity index 91% rename from packages/opendesign/src/icons/svgs/fill/arrow-traingle-up.svg rename to packages/opendesign/icons/svgs/fill/caret-up.svg index 89e87a21dd0dbfc306afa6c34b8dcb63f8e0d9d0..36e3132a22a06db90d14de602dae4437f0d61884 100644 --- a/packages/opendesign/src/icons/svgs/fill/arrow-traingle-up.svg +++ b/packages/opendesign/icons/svgs/fill/caret-up.svg @@ -1,4 +1,4 @@ -arrow-traingle-up +caret-Up diff --git a/packages/opendesign/icons/svgs/fill/checked.svg b/packages/opendesign/icons/svgs/fill/checked.svg new file mode 100644 index 0000000000000000000000000000000000000000..b856f24e0d966a8701e28bb8f522904bff0e848a --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/checked.svg @@ -0,0 +1,4 @@ + +checked + + diff --git a/packages/opendesign/icons/svgs/fill/chevron-down.svg b/packages/opendesign/icons/svgs/fill/chevron-down.svg new file mode 100644 index 0000000000000000000000000000000000000000..f91a7df723c2988958c22284e6effe27b07a72b3 --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/chevron-down.svg @@ -0,0 +1,4 @@ + +chevron-down + + diff --git a/packages/opendesign/icons/svgs/fill/chevron-left.svg b/packages/opendesign/icons/svgs/fill/chevron-left.svg new file mode 100644 index 0000000000000000000000000000000000000000..ad71998f1dd94835adb920a394aa941fcfb69d89 --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/chevron-left.svg @@ -0,0 +1,4 @@ + +chevron-left + + diff --git a/packages/opendesign/icons/svgs/fill/chevron-right.svg b/packages/opendesign/icons/svgs/fill/chevron-right.svg new file mode 100644 index 0000000000000000000000000000000000000000..03202ca16ffbb96dc84edec19ac61e6432208bd5 --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/chevron-right.svg @@ -0,0 +1,4 @@ + +chevron-right + + diff --git a/packages/opendesign/icons/svgs/fill/chevron-up.svg b/packages/opendesign/icons/svgs/fill/chevron-up.svg new file mode 100644 index 0000000000000000000000000000000000000000..964c0ed2ae8e1ab9ce41c2b3942b4cd817da78c9 --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/chevron-up.svg @@ -0,0 +1,4 @@ + +chevron-up + + diff --git a/packages/opendesign/icons/svgs/fill/close.svg b/packages/opendesign/icons/svgs/fill/close.svg new file mode 100644 index 0000000000000000000000000000000000000000..e21d10567e3db40a64ca72800b2032b036fd488c --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/close.svg @@ -0,0 +1,4 @@ + +close + + diff --git a/packages/opendesign/icons/svgs/fill/delete.svg b/packages/opendesign/icons/svgs/fill/delete.svg new file mode 100644 index 0000000000000000000000000000000000000000..aed4df7e497ccb7243f25e484455fc6917d7935a --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/delete.svg @@ -0,0 +1,4 @@ + +delete + + diff --git a/packages/opendesign/icons/svgs/fill/done.svg b/packages/opendesign/icons/svgs/fill/done.svg new file mode 100644 index 0000000000000000000000000000000000000000..a48f1b615dc9a08e63fef3051cb44b7a31d0ee79 --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/done.svg @@ -0,0 +1,4 @@ + +done + + diff --git a/packages/opendesign/icons/svgs/fill/double-arrow-down.svg b/packages/opendesign/icons/svgs/fill/double-arrow-down.svg new file mode 100644 index 0000000000000000000000000000000000000000..5f58bb2d409c25226534ee66e78b05cc97234672 --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/double-arrow-down.svg @@ -0,0 +1,4 @@ + +double-arrow-down + + diff --git a/packages/opendesign/icons/svgs/fill/double-arrow-left.svg b/packages/opendesign/icons/svgs/fill/double-arrow-left.svg new file mode 100644 index 0000000000000000000000000000000000000000..425e512dbdaa5cd553ffff63ec5b32de8752effb --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/double-arrow-left.svg @@ -0,0 +1,4 @@ + +double-arrow-left + + diff --git a/packages/opendesign/icons/svgs/fill/double-arrow-right.svg b/packages/opendesign/icons/svgs/fill/double-arrow-right.svg new file mode 100644 index 0000000000000000000000000000000000000000..b713ae84436cf87821390716a7f4ab94b7da700f --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/double-arrow-right.svg @@ -0,0 +1,4 @@ + +double-arrow-right + + diff --git a/packages/opendesign/icons/svgs/fill/double-arrow-up.svg b/packages/opendesign/icons/svgs/fill/double-arrow-up.svg new file mode 100644 index 0000000000000000000000000000000000000000..815b367e53e6be02726f1b7ea3c6d1e4f5ef0ed3 --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/double-arrow-up.svg @@ -0,0 +1,4 @@ + +double-arrow-up + + diff --git a/packages/opendesign/icons/svgs/fill/edit.svg b/packages/opendesign/icons/svgs/fill/edit.svg new file mode 100644 index 0000000000000000000000000000000000000000..92711cd45472445bbf588fadbda86666c8c6ca75 --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/edit.svg @@ -0,0 +1,4 @@ + +edit + + diff --git a/packages/opendesign/icons/svgs/fill/ellipsis.svg b/packages/opendesign/icons/svgs/fill/ellipsis.svg new file mode 100644 index 0000000000000000000000000000000000000000..5bc4f5c9c0cbce76fd5d8202e673acfa3a41af82 --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/ellipsis.svg @@ -0,0 +1,4 @@ + +ellipsis + + diff --git a/packages/opendesign/icons/svgs/fill/eye-off.svg b/packages/opendesign/icons/svgs/fill/eye-off.svg new file mode 100644 index 0000000000000000000000000000000000000000..712184b1d413839aa16f3fd7a885d817e0543363 --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/eye-off.svg @@ -0,0 +1,4 @@ + +eye-off + + diff --git a/packages/opendesign/icons/svgs/fill/eye.svg b/packages/opendesign/icons/svgs/fill/eye.svg new file mode 100644 index 0000000000000000000000000000000000000000..54be9baa7ed3ee24bf34a8bc68b401455a956c88 --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/eye.svg @@ -0,0 +1,4 @@ + +eye + + diff --git a/packages/opendesign/icons/svgs/fill/file.svg b/packages/opendesign/icons/svgs/fill/file.svg new file mode 100644 index 0000000000000000000000000000000000000000..2401ae213428ce51382b588f35ed1af408035547 --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/file.svg @@ -0,0 +1,4 @@ + +file + + diff --git a/packages/opendesign/icons/svgs/fill/filter.svg b/packages/opendesign/icons/svgs/fill/filter.svg new file mode 100644 index 0000000000000000000000000000000000000000..3fb973fe9d32145886f3b0d313c1d9133b722e00 --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/filter.svg @@ -0,0 +1,4 @@ + +filter + + diff --git a/packages/opendesign/icons/svgs/fill/image-error.svg b/packages/opendesign/icons/svgs/fill/image-error.svg new file mode 100644 index 0000000000000000000000000000000000000000..f4784baf500d0c434da3ed8a1df31b0f5ae18494 --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/image-error.svg @@ -0,0 +1,4 @@ + +image-error + + diff --git a/packages/opendesign/icons/svgs/fill/link.svg b/packages/opendesign/icons/svgs/fill/link.svg new file mode 100644 index 0000000000000000000000000000000000000000..f032c634dcdb06063899d50fa2946fc075fb352d --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/link.svg @@ -0,0 +1,4 @@ + +link + + diff --git a/packages/opendesign/icons/svgs/fill/loading.svg b/packages/opendesign/icons/svgs/fill/loading.svg new file mode 100644 index 0000000000000000000000000000000000000000..74fba60b992a5e6371621fd111b6ceae58f11523 --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/loading.svg @@ -0,0 +1,5 @@ + +loading + + + diff --git a/packages/opendesign/src/icons/svgs/fill/minus.svg b/packages/opendesign/icons/svgs/fill/minus.svg similarity index 36% rename from packages/opendesign/src/icons/svgs/fill/minus.svg rename to packages/opendesign/icons/svgs/fill/minus.svg index 4ed5b3ce202033de2b32c3c7cb60c6ec86ce4ff1..ae76b5d3942e3d16945e7898c6bca122696accf0 100644 --- a/packages/opendesign/src/icons/svgs/fill/minus.svg +++ b/packages/opendesign/icons/svgs/fill/minus.svg @@ -1,4 +1,4 @@ minus - + diff --git a/packages/opendesign/icons/svgs/fill/refresh.svg b/packages/opendesign/icons/svgs/fill/refresh.svg new file mode 100644 index 0000000000000000000000000000000000000000..dc271e18f59012237fde089aa62ae4cfeef08518 --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/refresh.svg @@ -0,0 +1,4 @@ + +refresh + + diff --git a/packages/opendesign/icons/svgs/fill/search.svg b/packages/opendesign/icons/svgs/fill/search.svg new file mode 100644 index 0000000000000000000000000000000000000000..045de032bba4d5e2f78437a1f9898f88156a8f3f --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/search.svg @@ -0,0 +1,4 @@ + +search + + diff --git a/packages/opendesign/icons/svgs/fill/star.svg b/packages/opendesign/icons/svgs/fill/star.svg new file mode 100644 index 0000000000000000000000000000000000000000..a943238896d655698f97f5ff16621a2547e72b67 --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/star.svg @@ -0,0 +1,6 @@ + +star + + + + diff --git a/packages/opendesign/icons/svgs/fill/time.svg b/packages/opendesign/icons/svgs/fill/time.svg new file mode 100644 index 0000000000000000000000000000000000000000..85f4810c65216831e19aebbb6eca7584ccfa6906 --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/time.svg @@ -0,0 +1,4 @@ + +time + + diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json index 4e87435cf6023a1b4750c6ab32d49439242f0359..fc2b7b02640c555ebc48cafa963e38a44b26f98b 100644 --- a/packages/opendesign/package.json +++ b/packages/opendesign/package.json @@ -1,6 +1,6 @@ { "name": "@opensig/opendesign", - "version": "0.0.38", + "version": "0.0.50", "main": "lib/index.js", "module": "es/index.mjs", "types": "es/index.d.ts", @@ -16,9 +16,9 @@ "vue3 components" ], "scripts": { - "gen:token": "opensig-scripts gen:token --config ./src/tokens/token.config.ts", - "gen:icon": "opensig-scripts gen:icon --config ./src/icons/icon.config.ts", - "clean:svg": "opensig-scripts clean:svg --config ./src/icons/cleansvg.config.ts", + "gen:token": "opensig-scripts gen:token --config ./tokens/token.config.ts", + "gen:icon": "opensig-scripts gen:icon --config ./icons/icon.config.ts", + "clean:svg": "opensig-scripts clean:svg --config ./icons/cleansvg.config.ts", "build:component": "opensig-scripts build:component", "build:style": "opensig-scripts build:style", "build": "pnpm gen:icon && pnpm build:component && pnpm build:style" @@ -27,10 +27,12 @@ "vue": "^3.1.0" }, "devDependencies": { - "@opensig/opensig-scripts": "workspace:^0.0.11", + "@opensig/opensig-scripts": "workspace:^", "typescript": "^4.6.4", - "vue": "^3.2.41", + "vue": "^3.2.45", "vue-tsc": "^1.0.13" }, - "dependencies": {} + "dependencies": { + "date-fns": "^2.30.0" + } } diff --git a/packages/opendesign/src/components/_shared/components/client-only.ts b/packages/opendesign/src/_components/client-only.ts similarity index 100% rename from packages/opendesign/src/components/_shared/components/client-only.ts rename to packages/opendesign/src/_components/client-only.ts diff --git a/packages/opendesign/src/components/_shared/components/html-tag.ts b/packages/opendesign/src/_components/html-tag.ts similarity index 100% rename from packages/opendesign/src/components/_shared/components/html-tag.ts rename to packages/opendesign/src/_components/html-tag.ts diff --git a/packages/opendesign/src/_components/inner-frame/InnerFrame.vue b/packages/opendesign/src/_components/inner-frame/InnerFrame.vue new file mode 100644 index 0000000000000000000000000000000000000000..a3d811ba1560791b70da8be9348781e0e1feba0f --- /dev/null +++ b/packages/opendesign/src/_components/inner-frame/InnerFrame.vue @@ -0,0 +1,50 @@ + + diff --git a/packages/opendesign/src/_components/inner-frame/index.ts b/packages/opendesign/src/_components/inner-frame/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..39244cbe671a31d0e20967f14e4688df2b91ebe1 --- /dev/null +++ b/packages/opendesign/src/_components/inner-frame/index.ts @@ -0,0 +1,3 @@ +import InnerFrame from './InnerFrame.vue'; + +export { InnerFrame }; diff --git a/packages/opendesign/src/_components/inner-frame/style/index.scss b/packages/opendesign/src/_components/inner-frame/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..975ed95ed80934e7ba204a82a1c79c87344edd41 --- /dev/null +++ b/packages/opendesign/src/_components/inner-frame/style/index.scss @@ -0,0 +1,118 @@ +@use '../../../_styles/mixin.scss' as *; +@use './var.scss'; + +.o-i-frame { + color: var(--if-color); + display: inline-flex; + height: var(--if-height); + font-size: var(--if-text-size); + line-height: var(--if-text-height); +} + +.o-if-main { + display: flex; + padding: var(--if-padding); + width: 100%; + overflow: hidden; + position: relative; + border-radius: var(--if-radius); + border: var(--if-bd); + background-color: var(--if-bg-color); + transition: all var(--o-duration-s) var(--o-easing-standard); + + cursor: pointer; + @include hover { + &:hover { + border-color: var(--if-bd-color-hover); + background-color: var(--if-bg-color-hover); + } + } + + .o-if-focused & { + border-color: var(--if-bd-color-focus); + background-color: var(--if-bg-color-focus); + } + + .o-if-disabled &, + .o-if-readonly & { + color: var(--if-color-disabled); + border-color: var(--if-bd-color-disabled); + background-color: var(--if-bg-color-disabled); + } + .o-if-disabled & { + cursor: not-allowed; + } + .o-if-readonly & { + cursor: default; + } + + &.has-prepend { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + &.has-append { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} + +.o-if-append, +.o-if-prepend { + display: flex; + align-items: center; + border: var(--if-ap-bd); + background-color: var(--if-ap-bg-color); + + .o-if-readonly &, + .o-if-disabled & { + border: var(--if-ap-bd-disabled); + } +} + +.o-if-append { + flex-shrink: 0; + padding: var(--if-append-padding); + border-top-right-radius: var(--if-radius); + border-bottom-right-radius: var(--if-radius); +} + +.o-if-prepend { + flex-shrink: 0; + padding: var(--if-prepend-padding); + border-top-left-radius: var(--if-radius); + border-bottom-left-radius: var(--if-radius); +} + +.o-if-solid { + .o-if-prepend { + border-left-width: 0; + border-top-width: 0; + border-bottom-width: 0; + } + .o-if-append { + border-right-width: 0; + border-top-width: 0; + border-bottom-width: 0; + } +} + +.o-if-outline { + .o-if-prepend { + border-right-width: 0; + } + .o-if-append { + border-left-width: 0; + } +} +.o-if-text { + .o-if-main { + border-right-width: 0; + border-top-width: 0; + border-left-width: 0; + } +} +.o-if-prefix, +.o-if-suffix { + display: flex; + align-items: center; +} diff --git a/packages/opendesign/src/_components/inner-frame/style/index.ts b/packages/opendesign/src/_components/inner-frame/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..344262c5f18d6cd0c596ab87ee967be2975f582d --- /dev/null +++ b/packages/opendesign/src/_components/inner-frame/style/index.ts @@ -0,0 +1,2 @@ +import '../../../_styles'; +import './index.scss'; diff --git a/packages/opendesign/src/_components/inner-frame/style/var.scss b/packages/opendesign/src/_components/inner-frame/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..f54a579779cd00b3b9d855adb7d4f337d10afa02 --- /dev/null +++ b/packages/opendesign/src/_components/inner-frame/style/var.scss @@ -0,0 +1,167 @@ +.o-i-frame { + --if-color: var(--o-color-info2); + --if-color-disabled: var(--o-color-info4); + --icon-color: var(--o-color-info2); + --icon-color-hover: var(--o-color-info2); + --icon-color-disabled: var(--o-color-info4); + + --if-ap-bd: 1px solid var(--if-ap-bd-color); + --if-ap-bd-disabled: 1px solid var(--if-ap-bd-color-disabled); + + --if-bd: 1px solid var(--if-bd-color); + --if-bd-hover: 1px solid var(--if-bd-color-hover); + --if-bd-focus: 1px solid var(--if-bd-color-focus); + --if-bd-disabled: 1px solid var(--if-bd-color-disabled); +} + +.o-if-text, +.o-if-outline { + --if-bg-color: transparent; + --if-bg-color-hover: var(--o-color-control-light); + --if-bg-color-focus: var(--o-color-control-light); + + &.o-if-normal { + --if-bd-color: var(--o-color-control1); + --if-bd-color-hover: var(--o-color-primary2); + --if-bd-color-focus: var(--o-color-primary3); + --if-bd-color-disabled: var(--o-color-control4); + } + &.o-if-success { + --if-bd-color: var(--o-color-success1); + --if-bd-color-hover: var(--o-color-success2); + --if-bd-color-focus: var(--o-color-success3); + --if-bd-color-disabled: var(--o-color-success4); + } + &.o-if-warning { + --if-bd-color: var(--o-color-warning1); + --if-bd-color-hover: var(--o-color-warning2); + --if-bd-color-focus: var(--o-color-warning3); + --if-bd-color-disabled: var(--o-color-warning4); + } + + &.o-if-danger { + --if-bd-color: var(--o-color-danger1); + --if-bd-color-hover: var(--o-color-danger2); + --if-bd-color-focus: var(--o-color-danger3); + --if-bd-color-disabled: var(--o-color-danger4); + } +} +.o-if-outline { + --if-ap-bd-color: var(--o-color-control1); + --if-ap-bd-color-disabled: var(--o-color-control4); +} + +.o-if-solid { + --if-ap-bg-color: var(--o-color-control1-light); + --if-ap-bd-color: var(--o-color-control2-light); + --if-ap-bd-color-disabled: var(--o-color-control2-light); + + &.o-if-normal { + --if-bd-color: var(--o-color-control1-light); + --if-bd-color-hover: var(--o-color-primary2-light); + --if-bd-color-focus: var(--o-color-primary3-light); + --if-bd-color-disabled: var(--o-color-control4-light); + + --if-bg-color: var(--o-color-control1-light); + --if-bg-color-hover: var(--o-color-control-light); + --if-bg-color-disabled: var(--o-color-control4-light); + } + &.o-if-success { + --if-bd-color: var(--o-color-success1-light); + --if-bd-color-hover: var(--o-color-success2-light); + --if-bd-color-focus: var(--o-color-success3-light); + --if-bd-color-disabled: var(--o-color-success4-light); + + --if-bg-color: var(--o-color-success1-light); + --if-bg-color-hover: var(--o-color-control-light); + --if-bg-color-disabled: var(--o-color-success4-light); + } + &.o-if-warning { + --if-bd-color: var(--o-color-warning1-light); + --if-bd-color-hover: var(--o-color-warning2-light); + --if-bd-color-focus: var(--o-color-warning3-light); + --if-bd-color-disabled: var(--o-color-warning4-light); + + --if-bg-color: var(--o-color-warning1-light); + --if-bg-color-hover: var(--o-color-control-light); + --if-bg-color-disabled: var(--o-color-warning4-light); + } + + &.o-if-danger { + --if-bd-color: var(--o-color-danger1-light); + --if-bd-color-hover: var(--o-color-danger2-light); + --if-bd-color-focus: var(--o-color-danger3-light); + --if-bd-color-disabled: var(--o-color-danger4-light); + + --if-bg-color: var(--o-color-danger1-light); + --if-bg-color-hover: var(--o-color-control-light); + --if-bg-color-disabled: var(--o-color-danger4-light); + } +} + +.o-if-small { + --if-height: var(--o-control_size-s); + --if-text-size: var(--o-font_size-tip1); + --if-text-height: var(--o-line_height-tip1); + --icon-size: var(--o-icon_size-xs); + + --if-padding: 0 7px; + --if-prepend-padding: 0 3px 0 4px; + --if-append-padding: 0 4px 0 3px; + --if-radius: var(--o-radius_control-s); + + --icon-c &.o-if-round-pill { + --if-padding: 0 9px; + --if-prepend-padding: 0 4px 0 8px; + --if-append-padding: 0 8px 0 4px; + } +} +.o-if-medium { + --if-height: var(--o-control_size-m); + --if-text-size: var(--o-font_size-text1); + --if-text-height: var(--o-line_height-text1); + --icon-size: var(--o-icon_size-s); + + --if-padding: 0 11px; + --if-radius: var(--o-radius_control-m); + + --if-prepend-padding: 0 7px 0 8px; + --if-append-padding: 0 8px 0 7px; + + &.o-if-round-pill { + --if-prepend-padding: 0 8px 0 11px; + --if-append-padding: 0 11px 0 8px; + } +} +.o-if-large { + --if-height: var(--o-control_size-l); + --if-text-size: var(--o-font_size-text2); + --if-text-height: var(--o-line_height-text2); + --icon-size: var(--o-icon_size-s); + + --if-padding: 0 15px; + --if-prepend-padding: 0 11px 0 12px; + --if-append-padding: 0 12px 0 11px; + --if-radius: var(--o-radius_control-l); + + &.o-if-round-pill { + --if-prepend-padding: 0 12px 0 15px; + --if-append-padding: 0 15px 0 12px; + } +} + +.o-if-round-pill { + --if-radius: var(--o-control_size-l); +} + +.o-if-text { + --if-bd-color: var(--o-color-control1); + --if-bd-color-disabled: var(--o-color-control4); + --if-radius: 0; + + &, + &.o-if-round-pill { + --if-prepend-padding: 0 8px 0 0; + --if-append-padding: 0 0 0 8px; + } +} diff --git a/packages/opendesign/src/_components/inner-frame/types.ts b/packages/opendesign/src/_components/inner-frame/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..b02ac04993eda126ae3b9ce59dfe1b528e92fff9 --- /dev/null +++ b/packages/opendesign/src/_components/inner-frame/types.ts @@ -0,0 +1,57 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import type { SizeT, RoundT, VariantT, Color2T } from '../../_utils/types'; + +export const innerFrameProps = { + /** + * 大小 SizeT + */ + size: { + type: String as PropType, + }, + /** + * 圆角值 RoundT + */ + round: { + type: String as PropType, + }, + /** + * 颜色类型 Color2T + */ + color: { + type: String as PropType, + default: 'normal', + }, + /** + * 按钮类型 VariantT + */ + variant: { + type: String as PropType, + default: 'outline', + }, + /** + * 是否聚焦 + */ + focused: { + type: Boolean, + }, + /** + * 是否禁用 + */ + disabled: { + type: Boolean, + }, + /** + * 是否只读 + */ + readonly: { + type: Boolean, + }, + /** + * 关联 input + */ + for: { + type: String, + }, +}; + +export type InnerFrameProps = ExtractPropTypes; diff --git a/packages/opendesign/src/_components/inner-input/InnerInput.vue b/packages/opendesign/src/_components/inner-input/InnerInput.vue new file mode 100644 index 0000000000000000000000000000000000000000..ce53f38e2ee604cce8e71461aa2b04c111705d47 --- /dev/null +++ b/packages/opendesign/src/_components/inner-input/InnerInput.vue @@ -0,0 +1,247 @@ + + diff --git a/packages/opendesign/src/_components/inner-input/index.ts b/packages/opendesign/src/_components/inner-input/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..0b8a6340f19a67678cec79d165b5a9ec97426538 --- /dev/null +++ b/packages/opendesign/src/_components/inner-input/index.ts @@ -0,0 +1,3 @@ +import InnerInput from './InnerInput.vue'; + +export { InnerInput }; diff --git a/packages/opendesign/src/_components/inner-input/input.ts b/packages/opendesign/src/_components/inner-input/input.ts new file mode 100644 index 0000000000000000000000000000000000000000..20a9493fdc1758141c281892347ea450036f4cc3 --- /dev/null +++ b/packages/opendesign/src/_components/inner-input/input.ts @@ -0,0 +1,8 @@ +import { isNull, isUndefined } from '../../_utils/is'; + +export function toInputString(val: unknown): string { + if (isUndefined(val) || isNull(val) || (typeof val === 'number' && isNaN(val as number))) { + return ''; + } + return String(val); +} diff --git a/packages/opendesign/src/_components/inner-input/style/index.scss b/packages/opendesign/src/_components/inner-input/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..70a7831a0ee917c5e0ca4917580867e4cf39b9e4 --- /dev/null +++ b/packages/opendesign/src/_components/inner-input/style/index.scss @@ -0,0 +1,112 @@ +@use '../../../_styles/mixin.scss' as *; +@use './var.scss'; +.o-i-input { + display: flex; + width: 100%; +} +.o-ii-input { + outline: none; + border: none; + color: inherit; + cursor: inherit; + background-color: transparent; + display: inline-flex; + padding: 0; + line-height: inherit; + height: 100%; + width: 100%; + font-size: inherit; + min-width: 20px; + + &::-webkit-input-placeholder { + color: var(--ii-placeholder-color); + } +} + +.o-ii-suffix { + display: flex; + flex-shrink: 0; + align-items: center; + position: relative; + margin-left: 4px; +} +.o-ii-prefix { + display: flex; + align-items: center; + margin-right: 4px; +} + +.o-ii-suffix-icon { + display: flex; + transition: all var(--o-duration-m1) var(--o-easing-standard-out); +} + +.o-ii-clear { + visibility: hidden; + flex-shrink: 0; + opacity: 0; + display: flex; + align-items: center; + justify-content: center; + color: var(--icon-color); + font-size: var(--icon-size); + @include hover { + &:hover { + color: var(--icon-color-hover); + transform: rotate(180deg); + } + .o-ii-suffix-icon + & { + position: absolute; + } + } +} +.o-ii-clearable { + @include hover { + &:hover { + .o-ii-suffix-icon { + visibility: hidden; + opacity: 0; + transition: none; + } + .o-ii-clear { + visibility: visible; + opacity: 1; + transition: all var(--o-duration-m1) var(--o-easing-standard-in); + } + } + } + @include hover(none) { + .o-ii-suffix-icon, + .o-ii-clear { + visibility: visible; + opacity: 1; + } + } +} +.o-ii-eye { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + font-size: var(--icon-size); + color: var(--icon-color); + margin-left: 4px; + + @include hover { + &:hover { + color: var(--icon-color-hover); + } + } + + :first-child { + margin-left: 0; + } + .o-ii-disabled &, + .o-ii-readonly & { + color: var(--icon-color-disabled); + } +} + +.o-ii-password { + font-family: Arial, 'Helvetica Neue', Helvetica, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; +} diff --git a/packages/opendesign/src/_components/inner-input/style/index.ts b/packages/opendesign/src/_components/inner-input/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..344262c5f18d6cd0c596ab87ee967be2975f582d --- /dev/null +++ b/packages/opendesign/src/_components/inner-input/style/index.ts @@ -0,0 +1,2 @@ +import '../../../_styles'; +import './index.scss'; diff --git a/packages/opendesign/src/_components/inner-input/style/var.scss b/packages/opendesign/src/_components/inner-input/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..457e76bdc67e958991719c12f4524e1e3d87a4cf --- /dev/null +++ b/packages/opendesign/src/_components/inner-input/style/var.scss @@ -0,0 +1,3 @@ +.o-i-input { + --ii-placeholder-color: var(--o-color-info4); +} diff --git a/packages/opendesign/src/_components/inner-input/types.ts b/packages/opendesign/src/_components/inner-input/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..3b6e3374f0fe91e8c0fec815289c3defd371196c --- /dev/null +++ b/packages/opendesign/src/_components/inner-input/types.ts @@ -0,0 +1,90 @@ +import { ExtractPropTypes, PropType } from 'vue'; +import type { SizeT } from '../../_utils/types'; + +export const innerInputProps = { + /** + * 大小 SizeT + */ + size: { + type: String as PropType, + }, + /** + * 下拉框的值 + * v-model + */ + modelValue: { + type: [String, Number], + }, + /** + * 下拉框的默认值 + * 非受控 + */ + defaultValue: { + type: [String, Number], + }, + /** + * 是否是密码输入 + */ + type: { + type: String as PropType<'text' | 'password'>, + default: 'text', + }, + /** + * 提示文本 + */ + placeholder: { + type: String, + }, + /** + * input id, 用于label关联 + */ + inputId: { + type: String, + }, + /** + * 是否禁用 + */ + disabled: { + type: Boolean, + }, + /** + * 是否只读 + */ + readonly: { + type: Boolean, + }, + /** + * 是否非法 + */ + invalid: { + type: Boolean, + }, + /** + * 是否可以清除 + */ + clearable: { + type: Boolean, + }, + /** + * 解析输入框的值 + */ + parse: { + type: Function as PropType<(value: string) => string>, + }, + /** + * 对值格式化，控制显示格式 + * 需搭配parse处理，保证值的正确性 + */ + format: { + type: Function as PropType<(value: string | number) => string | number>, + }, + /** + * 显示密码的方式 + */ + showPasswordEvent: { + type: String as PropType<'click' | 'pointerdown'>, + default: 'pointerdown', + }, +}; + +export type InnerInputProps = ExtractPropTypes; diff --git a/packages/opendesign/src/_components/inner-panel/InnerPanel.vue b/packages/opendesign/src/_components/inner-panel/InnerPanel.vue new file mode 100644 index 0000000000000000000000000000000000000000..fd3bc5d8274b5558d6b5d08f51d60b9a5b1071b2 --- /dev/null +++ b/packages/opendesign/src/_components/inner-panel/InnerPanel.vue @@ -0,0 +1,79 @@ + + diff --git a/packages/opendesign/src/_components/inner-panel/index.ts b/packages/opendesign/src/_components/inner-panel/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..7cd048ab32b129e88b23713cf3f8a0b28e81db24 --- /dev/null +++ b/packages/opendesign/src/_components/inner-panel/index.ts @@ -0,0 +1,3 @@ +import InnerPanel from './InnerPanel.vue'; + +export { InnerPanel }; diff --git a/packages/opendesign/src/_components/inner-panel/style/index.scss b/packages/opendesign/src/_components/inner-panel/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..1221e1274a5cb155dda3c5081d31615db76ce05e --- /dev/null +++ b/packages/opendesign/src/_components/inner-panel/style/index.scss @@ -0,0 +1,2 @@ +@use '../../../_styles/mixin.scss' as *; +@use './var.scss'; diff --git a/packages/opendesign/src/_components/inner-panel/style/index.ts b/packages/opendesign/src/_components/inner-panel/style/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..344262c5f18d6cd0c596ab87ee967be2975f582d --- /dev/null +++ b/packages/opendesign/src/_components/inner-panel/style/index.ts @@ -0,0 +1,2 @@ +import '../../../_styles'; +import './index.scss'; diff --git a/packages/opendesign/src/_components/inner-panel/style/var.scss b/packages/opendesign/src/_components/inner-panel/style/var.scss new file mode 100644 index 0000000000000000000000000000000000000000..3e96ce2ce56a2ec487d8fb798aa75125512c793a --- /dev/null +++ b/packages/opendesign/src/_components/inner-panel/style/var.scss @@ -0,0 +1,8 @@ +.o-i-panel { + --popup-bg-color: var(--o-color-fill2); + --popup-shadow: var(--o-shadow-1); + --popup-radius: var(--o-radius_control-m); + --popup-bd: none; + // --popup-min-width: 312px; + --popup-padding: 0; +} diff --git a/packages/opendesign/src/_components/inner-panel/types.ts b/packages/opendesign/src/_components/inner-panel/types.ts new file mode 100644 index 0000000000000000000000000000000000000000..f6d752636fac72ae67a5f4939b8049c2d15b0224 --- /dev/null +++ b/packages/opendesign/src/_components/inner-panel/types.ts @@ -0,0 +1,19 @@ +import { ExtractPropTypes } from 'vue'; +import { popupProps } from '../../popup/types'; + +popupProps.trigger.default = 'click-outclick'; +popupProps.position.default = 'bl'; +popupProps.anchor.default = false; +popupProps.offset.default = 4; + +export const innerPanelProps = { + ...popupProps, + /** + * 下拉浮层是否响应式 + */ + noResponsive: { + type: Boolean, + }, +}; + +export type InnerPanelProps = ExtractPropTypes; diff --git a/packages/opendesign/src/components/style/animation.scss b/packages/opendesign/src/_styles/animation.scss similarity index 94% rename from packages/opendesign/src/components/style/animation.scss rename to packages/opendesign/src/_styles/animation.scss index 56dfc60cd97961cc019b487240cd722927373117..aab2366e335331f3f1447e4a88303c510efb5aa9 100644 --- a/packages/opendesign/src/components/style/animation.scss +++ b/packages/opendesign/src/_styles/animation.scss @@ -9,7 +9,7 @@ } .o-rotating { - animation: o-rotating 2s var(--o-easing-linear) infinite; + animation: o-rotating var(--o-rotate-duration, 1s) var(--o-easing-linear) infinite; } @keyframes o-zoom-fade-in { diff --git a/packages/opendesign/src/components/style/common.scss b/packages/opendesign/src/_styles/common.scss similarity index 100% rename from packages/opendesign/src/components/style/common.scss rename to packages/opendesign/src/_styles/common.scss diff --git a/packages/opendesign/src/components/style/dark.token.css b/packages/opendesign/src/_styles/dark.token.css similarity index 100% rename from packages/opendesign/src/components/style/dark.token.css rename to packages/opendesign/src/_styles/dark.token.css diff --git a/packages/opendesign/src/components/style/index.scss b/packages/opendesign/src/_styles/index.scss similarity index 100% rename from packages/opendesign/src/components/style/index.scss rename to packages/opendesign/src/_styles/index.scss diff --git a/packages/opendesign/src/components/style/index.ts b/packages/opendesign/src/_styles/index.ts similarity index 100% rename from packages/opendesign/src/components/style/index.ts rename to packages/opendesign/src/_styles/index.ts diff --git a/packages/opendesign/src/components/style/light.token.css b/packages/opendesign/src/_styles/light.token.css similarity index 100% rename from packages/opendesign/src/components/style/light.token.css rename to packages/opendesign/src/_styles/light.token.css diff --git a/packages/portal-ak/src/assets/theme/mixin.scss b/packages/opendesign/src/_styles/mixin.scss similarity index 70% rename from packages/portal-ak/src/assets/theme/mixin.scss rename to packages/opendesign/src/_styles/mixin.scss index 818d140a27464f763a7e69c9c168c3c095f4cd25..58ea5930e07e88b459f82ecb4bc2dbc00a29fde3 100644 --- a/packages/portal-ak/src/assets/theme/mixin.scss +++ b/packages/opendesign/src/_styles/mixin.scss @@ -32,7 +32,7 @@ $breakpoints: ( 'up-pad': 1201px, 'laptop': ( 1201px, - 1400px, + 1440px, ), 'pc': 1441px, ); @@ -63,3 +63,28 @@ $breakpoints: ( @content; } } + +@mixin on-hover() { + @media (hover: hover) { + &:hover { + @content; + } + } +} +@mixin me-on-hover() { + @content; + @media (hover: hover) { + &:hover { + @content; + } + } +} + +@mixin x-hover() { + transition: all var(--o-duration-m1) var(--o-easing-standard-in); + @include hover { + &:hover { + transform: rotate(180deg); + } + } +} diff --git a/packages/opendesign/src/_utils/date.ts b/packages/opendesign/src/_utils/date.ts new file mode 100644 index 0000000000000000000000000000000000000000..2bef42c065952e2aa662185279fcf274f0ae9588 --- /dev/null +++ b/packages/opendesign/src/_utils/date.ts @@ -0,0 +1,51 @@ +import { startOfMonth, addYears, subYears, addMonths, subMonths } from 'date-fns'; + +export const WEEK_DAYS = 7; +export const MINUTE_TIME = 60 * 1000; +export const HOUR_TIME = 60 * MINUTE_TIME; +export const DAY_TIME = 24 * HOUR_TIME; +export const WEEK_TIME = WEEK_DAYS * DAY_TIME; + +/** + * 根据传入日期获取连续几周的日期 + * @param date 传入日期 + * @param length 周数量 + * @param param { + * weekStartsOn: 0|1|2|3|4|5|6 0代表星期日 + * } + */ +export function getWeeksByDate( + date: Date, + length: number = 1, + { + weekStartsOn = 0, + parse = (d: Date) => d as T, + }: { + weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6; + parse?: (d: Date) => T; + } = {} +): Array { + const time = date.getTime(); + const day = date.getDay(); + + const weeks: Array = []; + const dis = (weekStartsOn % WEEK_DAYS) - day; + const first = time + DAY_TIME * dis; + + for (let i = 0; i < WEEK_DAYS * length; i++) { + if (i === dis) { + weeks.push(parse(date)); + } else { + const d = new Date(first + DAY_TIME * i); + weeks.push(parse(d)); + } + } + + return weeks; +} + +export { startOfMonth, addYears, subYears, addMonths, subMonths }; + +export function isSameDate(date1: Date, date2: Date): boolean { + return date1.getTime() === date2.getTime(); +} diff --git a/packages/opendesign/src/components/_shared/dom.ts b/packages/opendesign/src/_utils/dom.ts similarity index 100% rename from packages/opendesign/src/components/_shared/dom.ts rename to packages/opendesign/src/_utils/dom.ts diff --git a/packages/opendesign/src/components/_shared/event.ts b/packages/opendesign/src/_utils/event.ts similarity index 100% rename from packages/opendesign/src/components/_shared/event.ts rename to packages/opendesign/src/_utils/event.ts diff --git a/packages/opendesign/src/components/_shared/export.ts b/packages/opendesign/src/_utils/export.ts similarity index 48% rename from packages/opendesign/src/components/_shared/export.ts rename to packages/opendesign/src/_utils/export.ts index 3c3ff2d5f08eb5287d7ca6f26c532ef918931d46..b78a3e5b124ff0ba3ad5520d7bfc53c3bf66e6c4 100644 --- a/packages/opendesign/src/components/_shared/export.ts +++ b/packages/opendesign/src/_utils/export.ts @@ -1,9 +1,9 @@ export * from './types'; -export { initSize, initRound } from './global'; +export { initSize, initRound, initZIndex } from './global'; export * from './init-icons'; export * from './is'; -export * from './utils'; +export * from './helper'; diff --git a/packages/opendesign/src/components/_shared/global.ts b/packages/opendesign/src/_utils/global.ts similarity index 87% rename from packages/opendesign/src/components/_shared/global.ts rename to packages/opendesign/src/_utils/global.ts index 4e9f2e2fce597c8023f3b6d89c32b51b3ad13613..6f97cce07b80df479d9b72995b20ad31f6b54ac7 100644 --- a/packages/opendesign/src/components/_shared/global.ts +++ b/packages/opendesign/src/_utils/global.ts @@ -1,8 +1,14 @@ import { ref, computed } from 'vue'; -import { ColorPool } from './utils'; +import { ColorPool } from './helper'; import { SizeT } from './types'; import { isClient, isTouchDevice } from './is'; +// popup\popover\layer\dialog的初始z-index +export const defaultZIndex = ref(1000); +export function initZIndex(val: number) { + defaultZIndex.value = val; +} + // 尺寸 export const defaultSize = ref('medium'); export function initSize(val: SizeT) { diff --git a/packages/opendesign/src/components/_shared/utils.ts b/packages/opendesign/src/_utils/helper.ts similarity index 65% rename from packages/opendesign/src/components/_shared/utils.ts rename to packages/opendesign/src/_utils/helper.ts index 9e240eb13216f33bf1b9081208add098ab1c88b1..96e830ea49b092979a6506aab25079cc3ecca8cc 100644 --- a/packages/opendesign/src/components/_shared/utils.ts +++ b/packages/opendesign/src/_utils/helper.ts @@ -1,3 +1,5 @@ +import { arrayBuffer } from 'stream/consumers'; + // 防抖 时间为一个一帧 export function debounceRAF) => any>(fn: T) { let handle = 0; @@ -66,3 +68,35 @@ export class ColorPool { return color; } } +/** + * 生成随机字符串 + * @param prefix 前缀 + * @param length 字符串长度 + */ +export function uniqueId(prefix: string = '', length: number = 8): string { + const gen = (len: number): string => { + if (len <= 11) { + return Math.random() + .toString(36) + .slice(2, 2 + len) + .padEnd(len, '0'); + } else { + return gen(11) + gen(len - 11); + } + }; + return prefix ? `${prefix}-${gen(length)}` : gen(length); +} + +/** + * 将数组拆分成多个指定长度的区块 + * @param arr 被拆分数组 + * @param size 区块长度 + */ +export function chunk(arr: any[] = [], size = 1) { + return Array.from( + { + length: Math.ceil(arr.length / size), + }, + (v, i) => arr.slice(i * size, i * size + size) + ); +} diff --git a/packages/opendesign/src/components/_shared/icons.ts b/packages/opendesign/src/_utils/icons.ts similarity index 58% rename from packages/opendesign/src/components/_shared/icons.ts rename to packages/opendesign/src/_utils/icons.ts index ed9cb5a06fe859e4871a10d607983cc5b3b9c151..e6cf12171b5b1ec4a51c2a76f33499a2031e5271 100644 --- a/packages/opendesign/src/components/_shared/icons.ts +++ b/packages/opendesign/src/_utils/icons.ts @@ -3,84 +3,134 @@ */ import { Component, shallowRef } from 'vue'; import { - OIconLoading, - OIconLink, + OIconArrowUp, + OIconArrowDown, + OIconArrowLeft, OIconArrowRight, - OIconX, - OIconAdd, - OIconMinus, - OIconDone, OIconChevronUp, OIconChevronDown, OIconChevronLeft, OIconChevronRight, + OIconInfo, + OIconSuccess, + OIconWarning, + OIconDanger, + OIconLoading, + OIconLink, + OIconClose, + OIconAdd, + OIconMinus, + OIconDone, OIconEllipsis, OIconStar, OIconRefresh, OIconDelete, - OIconPoint, OIconEye, OIconEyeOff, OIconFile, OIconEdit, OIconImageError, + OIconChecked, + OIconCalendar, + OIconDoubleArrowLeft, + OIconDoubleArrowRight, } from '../icon-components'; /** - * 全局loading图标 + * 向上箭头图标 */ -export const IconLoading = shallowRef(OIconLoading); +export const IconArrowUp = shallowRef(OIconArrowUp); /** - * link前缀图标 + * 向右箭头图标 */ -export const IconLinkPrefix = shallowRef(OIconLink); +export const IconArrowDown = shallowRef(OIconArrowDown); /** - * link箭头图标 + * 向左箭头图标 */ -export const IconLinkArrow = shallowRef(OIconArrowRight); +export const IconArrowLeft = shallowRef(OIconArrowLeft); /** - * close图标 + * 向右箭头图标 */ -export const IconClose = shallowRef(OIconX); +export const IconArrowRight = shallowRef(OIconArrowRight); /** - * add图标 + * v形向上图标 */ -export const IconAdd = shallowRef(OIconAdd); +export const IconChevronUp = shallowRef(OIconChevronUp); /** - * minus图标 + * v形向下图标 */ -export const IconMinus = shallowRef(OIconMinus); +export const IconChevronDown = shallowRef(OIconChevronDown); /** - * up图标 + * v形向左图标 */ -export const IconChevronUp = shallowRef(OIconChevronUp); +export const IconChevronLeft = shallowRef(OIconChevronLeft); /** - * down图标 + * v形向右图标 */ -export const IconChevronDown = shallowRef(OIconChevronDown); +export const IconChevronRight = shallowRef(OIconChevronRight); /** - * left图标 + * info图标 */ -export const IconChevronLeft = shallowRef(OIconChevronLeft); +export const IconInfo = shallowRef(OIconInfo); /** - * right图标 + * success图标 */ -export const IconChevronRight = shallowRef(OIconChevronRight); +export const IconSuccess = shallowRef(OIconSuccess); + +/** + * warning图标 + */ +export const IconWarning = shallowRef(OIconWarning); + +/** + * danger图标 + */ +export const IconDanger = shallowRef(OIconDanger); + +/** + * 全局loading图标 + */ +export const IconLoading = shallowRef(OIconLoading); + +/** + * link前缀图标 + */ +export const IconLinkPrefix = shallowRef(OIconLink); + +/** + * link箭头图标 + */ +export const IconLinkArrow = shallowRef(OIconArrowRight); /** * done图标 */ export const IconDone = shallowRef(OIconDone); +/** + * close图标 + */ +export const IconClose = shallowRef(OIconClose); + +/** + * add图标 + */ +export const IconAdd = shallowRef(OIconAdd); + +/** + * minus图标 + */ +export const IconMinus = shallowRef(OIconMinus); + /** * 更多...图标，用于pagition */ @@ -101,11 +151,6 @@ export const IconRefresh = shallowRef(OIconRefresh); */ export const IconDelete = shallowRef(OIconDelete); -/** - * 错误/失败图标 - */ -export const IconError = shallowRef(OIconPoint); - /** * 预览图标 */ @@ -117,7 +162,7 @@ export const IconPreview = shallowRef(OIconEye); export const IconFile = shallowRef(OIconFile); /** - * 文件图标 + * 编辑图标 */ export const IconEdit = shallowRef(OIconEdit); @@ -135,3 +180,14 @@ export const IconEyeOff = shallowRef(OIconEyeOff); * 加载失败的图片 */ export const IconImageError = shallowRef(OIconImageError); + +export const IconChecked = shallowRef(OIconChecked); + +/** + * 日期组件图标 + */ +export const IconCalendar = shallowRef(OIconCalendar); +export const IconCalendarPrevYear = shallowRef(OIconDoubleArrowLeft); +export const IconCalendarNextYear = shallowRef(OIconDoubleArrowRight); +export const IconCalendarPrevMonth = shallowRef(OIconChevronLeft); +export const IconCalendarNextMonth = shallowRef(OIconChevronRight); diff --git a/packages/opendesign/src/components/_shared/init-icons.ts b/packages/opendesign/src/_utils/init-icons.ts similarity index 100% rename from packages/opendesign/src/components/_shared/init-icons.ts rename to packages/opendesign/src/_utils/init-icons.ts diff --git a/packages/opendesign/src/components/_shared/is.ts b/packages/opendesign/src/_utils/is.ts similarity index 84% rename from packages/opendesign/src/components/_shared/is.ts rename to packages/opendesign/src/_utils/is.ts index 2b5b17774ad77d131ebb312589566e2ee0be4c3f..8bbfc2fa726b21abe3aa455f475d6d12bcb2dcd8 100644 --- a/packages/opendesign/src/components/_shared/is.ts +++ b/packages/opendesign/src/_utils/is.ts @@ -17,7 +17,7 @@ export function isString(val: unknown): val is string { } export function isNumber(val: unknown): val is number { - return opt.call(val) === '[object Number]' && !isNaN(val as number); + return opt.call(val) === '[object Number]' && !Number.isNaN(val as number); } export function isFunction(val: unknown): val is Function { @@ -27,6 +27,13 @@ export function isFunction(val: unknown): val is Function { export function isArray(val: unknown): val is Array { return Array.isArray(val); } +/** + * 判断日期是否合法 + * @param d + */ +export function isValidDate(val: Date): val is Date { + return val instanceof Date && !Number.isNaN(val.valueOf()); +} // 是否是对象或者数组等（key:value 形式） export function isObject(val: unknown): val is Record { diff --git a/packages/opendesign/src/components/_shared/keycode.ts b/packages/opendesign/src/_utils/keycode.ts similarity index 100% rename from packages/opendesign/src/components/_shared/keycode.ts rename to packages/opendesign/src/_utils/keycode.ts diff --git a/packages/opendesign/src/components/_shared/pointer.ts b/packages/opendesign/src/_utils/pointer.ts similarity index 100% rename from packages/opendesign/src/components/_shared/pointer.ts rename to packages/opendesign/src/_utils/pointer.ts diff --git a/packages/opendesign/src/components/_shared/style-class.ts b/packages/opendesign/src/_utils/style-class.ts similarity index 80% rename from packages/opendesign/src/components/_shared/style-class.ts rename to packages/opendesign/src/_utils/style-class.ts index dd85fdad1cb92f95d4a1105ef1fd07e157c210bc..4661326f12201014ed1199ca20d30224b8d141b7 100644 --- a/packages/opendesign/src/components/_shared/style-class.ts +++ b/packages/opendesign/src/_utils/style-class.ts @@ -1,8 +1,7 @@ import { computed } from 'vue'; -import { defaultRound } from '../_shared/global'; +import { defaultRound } from '../_utils/global'; export function getRoundClass(props: any, name: string) { - return { class: computed(() => { if (props.round === 'pill' || (!props.round && defaultRound.value === 'pill')) { @@ -13,10 +12,10 @@ export function getRoundClass(props: any, name: string) { style: computed(() => { if (props.round && props.round !== 'pill') { return { - [`--${name}-radius`]: props.round + [`--${name}-radius`]: props.round, }; } return {}; - }) + }), }; -} \ No newline at end of file +} diff --git a/packages/opendesign/src/components/_shared/tree.ts b/packages/opendesign/src/_utils/tree.ts similarity index 100% rename from packages/opendesign/src/components/_shared/tree.ts rename to packages/opendesign/src/_utils/tree.ts diff --git a/packages/opendesign/src/components/_shared/types.ts b/packages/opendesign/src/_utils/types.ts similarity index 100% rename from packages/opendesign/src/components/_shared/types.ts rename to packages/opendesign/src/_utils/types.ts diff --git a/packages/opendesign/src/components/_shared/vue-utils.ts b/packages/opendesign/src/_utils/vue-utils.ts similarity index 97% rename from packages/opendesign/src/components/_shared/vue-utils.ts rename to packages/opendesign/src/_utils/vue-utils.ts index c9b6c1c35a3f4537f661b993947d89d5fe79c59f..b8e1ed4959a380bb7075f4a63a7629e4a5d11990 100644 --- a/packages/opendesign/src/components/_shared/vue-utils.ts +++ b/packages/opendesign/src/_utils/vue-utils.ts @@ -59,7 +59,6 @@ export function useSlotElement(componentName?: string) { onMounted(() => { children?.forEach((child) => { - // console.log(child, isComponent(child)); if (isComponent(child, child.type)) { if (componentName && child.type.name === componentName) { components.push(child); @@ -135,21 +134,19 @@ export const getFirstElement = (vn: VNode | VNode[]): HTMLElement | null => { return null; }; -export function useSlotFirstElement() { +export function useSlotFirstElement(): { setSlot: (nodes: VNode[] | undefined) => void; fistElement: Ref } { let children: VNode[] | null = null; const fistElement = ref(null); onMounted(() => { if (children) { fistElement.value = getFirstElement(children); - // console.log(fistElement.value); } }); return { setSlot(nodes: VNode[] | undefined) { if (nodes) { children = nodes; - // console.log(children); } }, fistElement, diff --git a/packages/opendesign/src/_utils/z-index.ts b/packages/opendesign/src/_utils/z-index.ts new file mode 100644 index 0000000000000000000000000000000000000000..cd3e44170e5b5696642f974e4d6480a0791f0438 --- /dev/null +++ b/packages/opendesign/src/_utils/z-index.ts @@ -0,0 +1,27 @@ +import { watchEffect } from 'vue'; +import { defaultZIndex } from './global'; + +let topZIndex = 100; + +watchEffect(() => { + topZIndex = defaultZIndex.value; +}); + +export function getZIndex() { + return topZIndex; +} + +export function createTopZIndex() { + topZIndex += 1; + return topZIndex; +} +/** + * 减少顶层值 + * @param current 当前zindex值，如果传入，则只有当topZIndex与current相等时，才减1 + */ +export function removeZIndex(current?: number) { + if (current === undefined || current === topZIndex) { + topZIndex -= 1; + } + return topZIndex; +} diff --git a/packages/opendesign/src/components/badge/OBadge.vue b/packages/opendesign/src/badge/OBadge.vue similarity index 95% rename from packages/opendesign/src/components/badge/OBadge.vue rename to packages/opendesign/src/badge/OBadge.vue index 23688fef897ccc93dba69437ec8e4db9965d3b05..f2179454c98f6937e1cf3e0e974406f1cfe5040e 100644 --- a/packages/opendesign/src/components/badge/OBadge.vue +++ b/packages/opendesign/src/badge/OBadge.vue @@ -2,7 +2,7 @@ import { computed } from 'vue'; import { badgeProps } from './types'; -import { isNumber } from '../_shared/is'; +import { isNumber } from '../_utils/is'; const props = defineProps(badgeProps); diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeBasic.vue b/packages/opendesign/src/badge/__demo__/BadgeBasic.vue similarity index 100% rename from packages/opendesign/src/components/badge/__demo__/BadgeBasic.vue rename to packages/opendesign/src/badge/__demo__/BadgeBasic.vue diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeColor.vue b/packages/opendesign/src/badge/__demo__/BadgeColor.vue similarity index 100% rename from packages/opendesign/src/components/badge/__demo__/BadgeColor.vue rename to packages/opendesign/src/badge/__demo__/BadgeColor.vue diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeDot.vue b/packages/opendesign/src/badge/__demo__/BadgeDot.vue similarity index 100% rename from packages/opendesign/src/components/badge/__demo__/BadgeDot.vue rename to packages/opendesign/src/badge/__demo__/BadgeDot.vue diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeOffset.vue b/packages/opendesign/src/badge/__demo__/BadgeOffset.vue similarity index 100% rename from packages/opendesign/src/components/badge/__demo__/BadgeOffset.vue rename to packages/opendesign/src/badge/__demo__/BadgeOffset.vue diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeOnly.vue b/packages/opendesign/src/badge/__demo__/BadgeOnly.vue similarity index 100% rename from packages/opendesign/src/components/badge/__demo__/BadgeOnly.vue rename to packages/opendesign/src/badge/__demo__/BadgeOnly.vue diff --git a/packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue b/packages/opendesign/src/badge/__demo__/BadgeSlot.vue similarity index 100% rename from packages/opendesign/src/components/badge/__demo__/BadgeSlot.vue rename to packages/opendesign/src/badge/__demo__/BadgeSlot.vue diff --git a/packages/opendesign/src/components/badge/__demo__/TheIndex.vue b/packages/opendesign/src/badge/__demo__/TheIndex.vue similarity index 100% rename from packages/opendesign/src/components/badge/__demo__/TheIndex.vue rename to packages/opendesign/src/badge/__demo__/TheIndex.vue diff --git a/packages/opendesign/src/components/badge/index.ts b/packages/opendesign/src/badge/index.ts similarity index 100% rename from packages/opendesign/src/components/badge/index.ts rename to packages/opendesign/src/badge/index.ts diff --git a/packages/opendesign/src/badge/style/index.scss b/packages/opendesign/src/badge/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..504d59c44eea7243e3faa4e454b7675ea8b98768 --- /dev/null +++ b/packages/opendesign/src/badge/style/index.scss @@ -0,0 +1,2 @@ +@use './style.scss' as *; +@use './media.scss' as *; diff --git a/packages/opendesign/src/components/checkbox-group/style/index.ts b/packages/opendesign/src/badge/style/index.ts similarity index 48% rename from packages/opendesign/src/components/checkbox-group/style/index.ts rename to packages/opendesign/src/badge/style/index.ts index 591b2fbd72dcd5e987362d645b561bd2fac42716..786fce9c52bcc5902ae5ad430cbd07f8ead8a699 100644 --- a/packages/opendesign/src/components/checkbox-group/style/index.ts +++ b/packages/opendesign/src/badge/style/index.ts @@ -1,2 +1,2 @@ -import '../../style'; +import '../../_styles'; import './index.scss'; diff --git a/packages/opendesign/src/components/badge/style/media.scss b/packages/opendesign/src/badge/style/media.scss similarity index 68% rename from packages/opendesign/src/components/badge/style/media.scss rename to packages/opendesign/src/badge/style/media.scss index 27cf7ce244722b2eeb386024b30aa9e4b7a4c0cd..ba4b4d4475afac3d16ded57870be35f3c9e8171a 100644 --- a/packages/opendesign/src/components/badge/style/media.scss +++ b/packages/opendesign/src/badge/style/media.scss @@ -1,4 +1,4 @@ -@use '../../style/mixin.scss' as *; +@use '../../_styles/mixin.scss' as *; @include respond-to('phone-pad') { .o-badge { --badge-dot-size: 6px; diff --git a/packages/opendesign/src/components/badge/style/index.scss b/packages/opendesign/src/badge/style/style.scss similarity index 94% rename from packages/opendesign/src/components/badge/style/index.scss rename to packages/opendesign/src/badge/style/style.scss index ea4d5f9c46ea5f70cd919414b3ca0b821e73e98d..2ea3242a29cf537082ee823c4a00d66a502dcd41 100644 --- a/packages/opendesign/src/components/badge/style/index.scss +++ b/packages/opendesign/src/badge/style/style.scss @@ -1,4 +1,4 @@ -@use '../../style/mixin.scss' as *; +@use '../../_styles/mixin.scss' as *; @use './var.scss'; .o-badge { @@ -24,6 +24,7 @@ display: flex; align-items: center; justify-content: center; + height: var(--badge-height); } .o-badge-label { diff --git a/packages/opendesign/src/components/badge/style/var.scss b/packages/opendesign/src/badge/style/var.scss similarity index 96% rename from packages/opendesign/src/components/badge/style/var.scss rename to packages/opendesign/src/badge/style/var.scss index 41d6940fe9640232caf5f4a4414fbaec460aacc3..cac94d72e502d2d5b82f5d1db1a386f008ada2eb 100644 --- a/packages/opendesign/src/components/badge/style/var.scss +++ b/packages/opendesign/src/badge/style/var.scss @@ -9,6 +9,7 @@ --badge-min-width: 12px; --badge-dot-size: 4px; + --badge-height: 12px; } .o-badge-primary { diff --git a/packages/opendesign/src/components/badge/types.ts b/packages/opendesign/src/badge/types.ts similarity index 100% rename from packages/opendesign/src/components/badge/types.ts rename to packages/opendesign/src/badge/types.ts diff --git a/packages/opendesign/src/components/breadcrumb/OBreadcrumb.vue b/packages/opendesign/src/breadcrumb/OBreadcrumb.vue similarity index 100% rename from packages/opendesign/src/components/breadcrumb/OBreadcrumb.vue rename to packages/opendesign/src/breadcrumb/OBreadcrumb.vue diff --git a/packages/opendesign/src/components/breadcrumb/OBreadcrumbItem.vue b/packages/opendesign/src/breadcrumb/OBreadcrumbItem.vue similarity index 90% rename from packages/opendesign/src/components/breadcrumb/OBreadcrumbItem.vue rename to packages/opendesign/src/breadcrumb/OBreadcrumbItem.vue index 50d8f15a647afebd46961631028ee985776eb05c..723859d2cb61cd52ab7e13548f9177c2b9ea60ad 100644 --- a/packages/opendesign/src/components/breadcrumb/OBreadcrumbItem.vue +++ b/packages/opendesign/src/breadcrumb/OBreadcrumbItem.vue @@ -2,8 +2,8 @@ import { inject } from 'vue'; import { breadcrumbItemProps } from './types'; import { breadcrumbInjectKey } from './provide'; -import { IconChevronRight } from '../_shared/icons'; -import htmlTag from '../_shared/components/html-tag'; +import { IconChevronRight } from '../_utils/icons'; +import htmlTag from '../_components/html-tag'; const props = defineProps(breadcrumbItemProps); diff --git a/packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbBasic.vue b/packages/opendesign/src/breadcrumb/__demo__/BreadcrumbBasic.vue similarity index 100% rename from packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbBasic.vue rename to packages/opendesign/src/breadcrumb/__demo__/BreadcrumbBasic.vue diff --git a/packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbSeparator.vue b/packages/opendesign/src/breadcrumb/__demo__/BreadcrumbSeparator.vue similarity index 100% rename from packages/opendesign/src/components/breadcrumb/__demo__/BreadcrumbSeparator.vue rename to packages/opendesign/src/breadcrumb/__demo__/BreadcrumbSeparator.vue diff --git a/packages/opendesign/src/components/breadcrumb/__demo__/TheIndex.vue b/packages/opendesign/src/breadcrumb/__demo__/TheIndex.vue similarity index 100% rename from packages/opendesign/src/components/breadcrumb/__demo__/TheIndex.vue rename to packages/opendesign/src/breadcrumb/__demo__/TheIndex.vue diff --git a/packages/opendesign/src/components/breadcrumb/index.ts b/packages/opendesign/src/breadcrumb/index.ts similarity index 100% rename from packages/opendesign/src/components/breadcrumb/index.ts rename to packages/opendesign/src/breadcrumb/index.ts diff --git a/packages/opendesign/src/components/breadcrumb/provide.ts b/packages/opendesign/src/breadcrumb/provide.ts similarity index 100% rename from packages/opendesign/src/components/breadcrumb/provide.ts rename to packages/opendesign/src/breadcrumb/provide.ts diff --git a/packages/opendesign/src/breadcrumb/style/index.scss b/packages/opendesign/src/breadcrumb/style/index.scss new file mode 100644 index 0000000000000000000000000000000000000000..504d59c44eea7243e3faa4e454b7675ea8b98768 --- /dev/null +++ b/packages/opendesign/src/breadcrumb/style/index.scss @@ -0,0 +1,2 @@ +@use './style.scss' as *; +@use './media.scss' as *; diff --git a/packages/opendesign/src/components/checkbox/style/index.ts b/packages/opendesign/src/breadcrumb/style/index.ts similarity index 48% rename from packages/opendesign/src/components/checkbox/style/index.ts rename to packages/opendesign/src/breadcrumb/style/index.ts index 591b2fbd72dcd5e987362d645b561bd2fac42716..786fce9c52bcc5902ae5ad430cbd07f8ead8a699 100644 --- a/packages/opendesign/src/components/checkbox/style/index.ts +++ b/packages/opendesign/src/breadcrumb/style/index.ts @@ -1,2 +1,2 @@ -import '../../style'; +import '../../_styles'; import './index.scss'; diff --git a/packages/opendesign/src/components/breadcrumb/style/media.scss b/packages/opendesign/src/breadcrumb/style/media.scss similarity index 85% rename from packages/opendesign/src/components/breadcrumb/style/media.scss rename to packages/opendesign/src/breadcrumb/style/media.scss index 25f084dc45ec7f6740f0c7748e55ba4d8ef92298..3baeb07e65c80a743611dbcebb7fac6d9d89b06c 100644 --- a/packages/opendesign/src/components/breadcrumb/style/media.scss +++ b/packages/opendesign/src/breadcrumb/style/media.scss @@ -1,4 +1,5 @@ -@use '../../style/mixin.scss' as *; +@use '../../_styles/mixin.scss' as *; + @include respond-to('phone-pad') { .o-breadcrumb { --breadcrumb-text-size: var(--o-font_size-tip2); diff --git a/packages/opendesign/src/components/breadcrumb/style/index.scss b/packages/opendesign/src/breadcrumb/style/style.scss similarity index 97% rename from packages/opendesign/src/components/breadcrumb/style/index.scss rename to packages/opendesign/src/breadcrumb/style/style.scss index 5968242fbd1f8a9975eb9595d9580eccdc315700..bdc382f269f0e1a28659833cbb2fe6c35535e9a2 100644 --- a/packages/opendesign/src/components/breadcrumb/style/index.scss +++ b/packages/opendesign/src/breadcrumb/style/style.scss @@ -1,4 +1,4 @@ -@use '../../style/mixin.scss' as *; +@use '../../_styles/mixin.scss' as *; @use './var.scss'; .o-breadcrumb { diff --git a/packages/opendesign/src/components/breadcrumb/style/var.scss b/packages/opendesign/src/breadcrumb/style/var.scss similarity index 100% rename from packages/opendesign/src/components/breadcrumb/style/var.scss rename to packages/opendesign/src/breadcrumb/style/var.scss diff --git a/packages/opendesign/src/components/breadcrumb/types.ts b/packages/opendesign/src/breadcrumb/types.ts similarity index 100% rename from packages/opendesign/src/components/breadcrumb/types.ts rename to packages/opendesign/src/breadcrumb/types.ts diff --git a/packages/opendesign/src/components/button/OButton.vue b/packages/opendesign/src/button/OButton.vue similarity index 70% rename from packages/opendesign/src/components/button/OButton.vue rename to packages/opendesign/src/button/OButton.vue index 711b7040fadb07f7205769ca63c555de9cece775..cb7fc5e67c97056cb8d9c2fe0ed63566dae756ac 100644 --- a/packages/opendesign/src/components/button/OButton.vue +++ b/packages/opendesign/src/button/OButton.vue @@ -1,14 +1,25 @@