-
-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: maxuelong <maxuelong@baidu.com>
- Loading branch information
Showing
20 changed files
with
1,327 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
// generated by unplugin-vue-components | ||
// We suggest you to commit this file into source control | ||
// Read more: https://github.com/vuejs/vue-next/pull/3399 | ||
|
||
declare module 'vue' { | ||
export interface GlobalComponents { | ||
ICosmicGridOutline: typeof import('~icons/cosmic/grid-outline')['default'] | ||
ICosmicMinus: typeof import('~icons/cosmic/minus')['default'] | ||
ICosmicPlus: typeof import('~icons/cosmic/plus')['default'] | ||
ICosmicSun: typeof import('~icons/cosmic/sun')['default'] | ||
} | ||
} | ||
|
||
export { } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import root from './src/mask-widget.vue'; | ||
import MaskService from './src/service/mask.service'; | ||
|
||
export default { | ||
root, | ||
providers: [ MaskService ], | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
{ | ||
"name": "@cosmic-module/mask-widget", | ||
"version": "0.0.1", | ||
"main": "./dist/index.cjs", | ||
"module": "./dist/index.mjs", | ||
"scripts": { | ||
"build": "vite build", | ||
"clean": "rimraf dist" | ||
}, | ||
"devDependencies": { | ||
}, | ||
"dependencies": { | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<script lang="ts" setup> | ||
import {MTitle, MColor} from '@cosmic/core/browser'; | ||
</script> | ||
|
||
<template> | ||
<MTitle title="颜色"> | ||
<div | ||
class="flex justify-between items-center" | ||
> | ||
<i-cosmic-sun /> | ||
<i-cosmic-grid-outline /> | ||
</div> | ||
</MTitle> | ||
<MColor /> | ||
</template> | ||
|
||
<style module></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
<script lang="ts" setup> | ||
import {ref} from 'vue'; | ||
import {MTitle} from '@cosmic/core/browser'; | ||
import Content from './component/content.vue'; | ||
const open = ref(false); | ||
const clickHandler = () => { | ||
open.value = !open.value; | ||
}; | ||
</script> | ||
|
||
<template> | ||
<MTitle title="蒙层"> | ||
<i-cosmic-plus | ||
v-if="!open" | ||
@click="clickHandler" | ||
/> | ||
<i-cosmic-minus | ||
v-else | ||
@click="clickHandler" | ||
/> | ||
</MTitle> | ||
<Content v-if="open" /> | ||
</template> | ||
|
||
<style scoped></style> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export default class {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
import { genConfig } from '../vite.config'; | ||
export default genConfig(__dirname); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
// generated by unplugin-vue-components | ||
// We suggest you to commit this file into source control | ||
// Read more: https://github.com/vuejs/vue-next/pull/3399 | ||
|
||
declare module 'vue' { | ||
export interface GlobalComponents { | ||
ICosmicArrow: typeof import('~icons/cosmic/arrow')['default'] | ||
ICosmicArrowDown: typeof import('~icons/cosmic/arrow-down')['default'] | ||
ICosmicCaution: typeof import('~icons/cosmic/caution')['default'] | ||
ICosmicFuzzy: typeof import('~icons/cosmic/fuzzy')['default'] | ||
ICosmicGridOutline: typeof import('~icons/cosmic/grid-outline')['default'] | ||
ICosmicLock: typeof import('~icons/cosmic/lock')['default'] | ||
ICosmicMinus: typeof import('~icons/cosmic/minus')['default'] | ||
ICosmicMore: typeof import('~icons/cosmic/more')['default'] | ||
ICosmicPlus: typeof import('~icons/cosmic/plus')['default'] | ||
ICosmicSun: typeof import('~icons/cosmic/sun')['default'] | ||
ICosmicVerticalHeight: typeof import('~icons/cosmic/vertical-height')['default'] | ||
} | ||
} | ||
|
||
export { } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import root from './src/shadow-widget.vue'; | ||
import ShadowService from './src/service/shadow.service'; | ||
|
||
export default { | ||
root, | ||
providers: [ShadowService], | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
{ | ||
"name": "@cosmic-module/shadow-widget", | ||
"version": "0.0.1", | ||
"main": "./dist/index.cjs", | ||
"module": "./dist/index.mjs", | ||
"scripts": { | ||
"build": "vite build", | ||
"clean": "rimraf dist" | ||
}, | ||
"devDependencies": { | ||
}, | ||
"dependencies": { | ||
} | ||
} |
254 changes: 254 additions & 0 deletions
254
packages/module/shadow-widget/src/component/content.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,254 @@ | ||
<script lang="ts" setup> | ||
import {ref, reactive} from 'vue'; | ||
import Preview from './preview.vue'; | ||
import Edit from './edit.vue'; | ||
import InputText from './input-text.vue'; | ||
import EffectItem from './effect-item.vue'; | ||
import {MTitle, MColor} from '@cosmic/core/browser'; | ||
const props = defineProps({ | ||
insetTitle: { | ||
type: String, | ||
default: '', | ||
}, | ||
isOpen: { | ||
type: Boolean, | ||
default: true, | ||
}, | ||
offsetX: { | ||
type: [Number, String], | ||
default: 2, | ||
}, | ||
offsetY: { | ||
type: [Number, String], | ||
default: 2, | ||
}, | ||
blurRadius: { | ||
type: [Number, String], | ||
default: 5, | ||
}, | ||
spreadRadius: { | ||
type: [Number, String], | ||
default: 5, | ||
}, | ||
color: { | ||
type: String, | ||
default: '', | ||
}, | ||
// 是否内阴影 | ||
isInset: { | ||
type: Boolean, | ||
default: true, | ||
}, | ||
}); | ||
// const isOpen = ref<boolean>(props.isOpen ? props.isOpen : false); | ||
const offsetX = ref<number | string>(props.offsetX ? props.offsetX : 0); | ||
const offsetY = ref<number | string>(props.offsetY ? props.offsetY : 0); | ||
const blurRadius = ref<number | string>(props.blurRadius ? props.blurRadius : 0); | ||
const spreadRadius = ref<number | string>(props.spreadRadius ? props.spreadRadius : 0); | ||
// const color = ref<string>(props.color); | ||
// const boxShadow = ref(`${offsetX.value}px ${offsetY.value}px ${blurRadius.value}px ${spreadRadius.value}px ${color.value}${props.isInset ? ' inset' : ''}`); | ||
// const selecteData = reactive( | ||
// [ | ||
// { | ||
// val: '1', | ||
// label: '标题' | ||
// }, | ||
// { | ||
// val: '2', | ||
// label: '描述' | ||
// }, | ||
// { | ||
// val: '3', | ||
// label: '编码' | ||
// } | ||
// ] | ||
// ); | ||
const previewData = reactive( | ||
[ | ||
{ | ||
title: '阴影一', | ||
desc: '一图模板', | ||
code: 'SHADOW-001', | ||
boxShadow: '0px 20px 20px 10px fuchsia', | ||
}, | ||
{ | ||
title: '阴影二', | ||
desc: '二图模板', | ||
code: 'SHADOW-002', | ||
boxShadow: '0px 20px 20px 10px cyan', | ||
}, | ||
{ | ||
title: '阴影三', | ||
desc: '三图模板', | ||
boxShadow: '0px 20px 20px 10px inset fuchsia', | ||
}, | ||
], | ||
); | ||
const showPreview = ref(true); | ||
const previewDataIndex = ref(-1); | ||
// 是否展示编辑框 | ||
const showEditData = ref(false); | ||
let editData = reactive({}); | ||
editData = previewData[0]; | ||
// 是否展示 效果 | ||
const showEffect = ref(true); | ||
const emits = defineEmits(['onInput', 'onOpen', 'onOperate']); | ||
const addEffect = () => { | ||
showPreview.value = true; | ||
}; | ||
const onInput = (data) => { | ||
console.log('input', data, offsetX.value); | ||
offsetX.value = data.offsetX || offsetX.value; | ||
offsetY.value = data.offsetY || offsetY.value; | ||
blurRadius.value = data.blurRadius || blurRadius.value; | ||
spreadRadius.value = data.spreadRadius || spreadRadius.value; | ||
console.log('onInput', data, offsetX.value, offsetY.value, blurRadius.value, spreadRadius.value); | ||
emits('onInput'); | ||
}; | ||
// const onAdd = () => { | ||
// | ||
// }; | ||
const editBoxShadow = ({data, index}) => { | ||
// showEditData.value = true; | ||
showPreview.value = false; | ||
previewDataIndex.value = index; | ||
showEffect.value = false; | ||
editData = data; | ||
console.log('editBoxShadow', data, index, previewData, editData); | ||
}; | ||
const onConfirm = () => { | ||
showEditData.value = false; | ||
}; | ||
const onCancel = () => { | ||
showEditData.value = false; | ||
}; | ||
const onEdit = () => { | ||
showEditData.value = true; | ||
showEffect.value = true; | ||
}; | ||
const onUnlock = () => { | ||
showEffect.value = true; | ||
}; | ||
</script> | ||
|
||
<template> | ||
<div v-if="showEffect"> | ||
<MTitle title="效果"> | ||
<i-cosmic-grid-outline @click="addEffect" /> | ||
</MTitle> | ||
<div :class="[$style['input-list']]"> | ||
<div :class="[$style['item']]"> | ||
<InputText | ||
id="offsetX" | ||
:class="[$style['input']]" | ||
type="percent" | ||
model="offsetX" | ||
:value="offsetX" | ||
@onInput="onInput" | ||
> | ||
<i-cosmic-fuzzy :class="[$style['icon']]" /> | ||
</InputText> | ||
</div> | ||
<div :class="[$style['item']]"> | ||
<InputText | ||
id="offsetY" | ||
:class="[$style['input']]" | ||
type="number" | ||
model="offsetY" | ||
:value="offsetY" | ||
@onInput="onInput" | ||
> | ||
<i-cosmic-fuzzy :class="[$style['icon']]" /> | ||
</InputText> | ||
</div> | ||
|
||
<div :class="[$style['item']]"> | ||
<InputText | ||
id="blurRadius" | ||
:class="[$style['input']]" | ||
type="number" | ||
model="blurRadius" | ||
:value="blurRadius" | ||
@onInput="onInput" | ||
> | ||
<i-cosmic-fuzzy :class="[$style['icon']]" /> | ||
</InputText> | ||
</div> | ||
<div :class="[$style['item']]"> | ||
<InputText | ||
id="spreadRadius" | ||
v-model="spreadRadius" | ||
:class="[$style['input']]" | ||
type="number" | ||
model="spreadRadius" | ||
:value="spreadRadius" | ||
@onInput="onInput" | ||
> | ||
<i-cosmic-vertical-height :class="[$style['icon']]" /> | ||
</InputText> | ||
</div> | ||
</div> | ||
</div> | ||
<div v-else> | ||
<EffectItem | ||
:item="editData" | ||
@onEdit="onEdit" | ||
@onUnlock="onUnlock" | ||
/> | ||
</div> | ||
|
||
<Preview | ||
v-if="showPreview" | ||
:current="previewDataIndex" | ||
:data-ll="previewDataIndex" | ||
:title="insetTitle + '规范'" | ||
:data-list="previewData" | ||
@onAdd="onAdd" | ||
@onEdit="editBoxShadow" | ||
/> | ||
<Edit | ||
v-if="showEditData" | ||
:title="'编辑' + insetTitle + '规范'" | ||
:item="editData" | ||
@onCancel="onCancel" | ||
@onConfirm="onConfirm" | ||
/> | ||
<div> | ||
<MTitle title="颜色"> | ||
<div class="flex justify-between items-center"> | ||
<i-cosmic-sun /> | ||
<i-cosmic-grid-outline /> | ||
</div> | ||
</MTitle> | ||
<MColor /> | ||
</div> | ||
</template> | ||
|
||
<style module> | ||
.input-list { | ||
padding: 0 var(--spacing-14); | ||
} | ||
.item { | ||
display: inline-block; | ||
margin: 0 var(--spacing-6) var(--spacing-6) 0; | ||
} | ||
.item .icon { | ||
position: absolute; | ||
top: 50%; | ||
left: var(--spacing-6); | ||
transform: translateY(-50%); | ||
} | ||
</style> |
Oops, something went wrong.