feat: 🎸 add shadow and mask (#113)

Co-authored-by: maxuelong <maxuelong@baidu.com>

packages/module/mask-widget/components.d.ts

@@ -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 { }

packages/module/mask-widget/index.ts

@@ -0,0 +1,7 @@
+import root from './src/mask-widget.vue';
+import MaskService from './src/service/mask.service';
+
+export default {
+    root,
+    providers: [ MaskService ],
+};

packages/module/mask-widget/package.json

@@ -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": {
+    }
+}

packages/module/mask-widget/src/component/content.vue

@@ -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>

packages/module/mask-widget/src/mask-widget.vue

@@ -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>
+

packages/module/mask-widget/src/service/mask.service.ts

@@ -0,0 +1 @@
+export default class {}

packages/module/mask-widget/vite.config.js

@@ -0,0 +1,2 @@
+import { genConfig } from '../vite.config';
+export default genConfig(__dirname);

packages/module/shadow-widget/components.d.ts

@@ -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 { }

packages/module/shadow-widget/index.ts

@@ -0,0 +1,7 @@
+import root from './src/shadow-widget.vue';
+import ShadowService from './src/service/shadow.service';
+
+export default {
+    root,
+    providers: [ShadowService],
+};

packages/module/shadow-widget/package.json

@@ -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": {
+    }
+}

packages/module/shadow-widget/src/component/content.vue

@@ -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>