forked from opentiny/tiny-engine
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add capability of add custom metaComponents (opentiny#528)
* feat(metaComponent): add capability of add custom metaComponents * feat: metaComponents pass to init fun register * fix: refactor code by code review * feat: rename metaComponent to configurator * fix(configurator): add base info to package.json * feat: rename metaxxx to configurator * fix: rename metaxxx to configurators * fix: refactor code by review
- Loading branch information
1 parent
af7a853
commit a90420a
Showing
25 changed files
with
570 additions
and
151 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
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,63 @@ | ||
| <template> | ||
| <span>我是自定义的 input configurator</span> | ||
| <tiny-input v-model="value" :type="type" :placeholder="placeholder" :rows="rows" @update:modelValue="change"> | ||
| </tiny-input> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { ref } from 'vue' | ||
| import { Input } from '@opentiny/vue' | ||
| export default { | ||
| name: 'MyInputConfigurator', | ||
| components: { | ||
| TinyInput: Input | ||
| }, | ||
| props: { | ||
| modelValue: { | ||
| type: String | ||
| }, | ||
| type: { | ||
| type: String | ||
| }, | ||
| placeholder: { | ||
| type: String | ||
| }, | ||
| suffixIcons: { | ||
| type: Array, | ||
| default: () => [] | ||
| }, | ||
| dataType: { | ||
| type: String | ||
| }, | ||
| rows: { | ||
| type: Number, | ||
| default: 10 | ||
| } | ||
| }, | ||
| emits: ['update:modelValue'], | ||
| setup(props, { emit }) { | ||
| const value = ref(props.modelValue) | ||
| const change = (val) => { | ||
| emit('update:modelValue', props.dataType === 'Array' ? val.split(',') : val) | ||
| } | ||
| return { | ||
| value, | ||
| change | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="less" scoped> | ||
| .tiny-svg-size { | ||
| margin-left: 10px; | ||
| font-size: 16px; | ||
| &:hover { | ||
| cursor: pointer; | ||
| color: var(--ti-lowcode-dialog-font-color); | ||
| } | ||
| } | ||
| </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,11 @@ | ||
| import { InputConfigurator, SelectConfigurator } from '@opentiny/tiny-engine-configurator' | ||
| import MyInputConfigurator from './MyInputConfigurator.vue' | ||
|
|
||
| export const configurators = [ | ||
| { | ||
| name: 'MyInputConfigurator', | ||
| component: MyInputConfigurator | ||
| }, | ||
| InputConfigurator, | ||
| SelectConfigurator | ||
| ] |
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
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
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
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
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
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
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
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,3 @@ | ||
| # TinyEngine 的 configurator component 组件 | ||
|
|
||
| 右侧属性面板配置物料属性的组件。 |
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,40 @@ | ||
| { | ||
| "name": "@opentiny/tiny-engine-configurator", | ||
| "version": "1.0.0", | ||
| "description": "", | ||
| "main": "dist/index.js", | ||
| "module": "dist/index.js", | ||
| "type": "module", | ||
| "scripts": { | ||
| "build": "vite build", | ||
| "test": "echo \"Error: no test specified\" && exit 1" | ||
| }, | ||
| "keywords": [], | ||
| "author": "OpenTiny Team", | ||
| "license": "MIT", | ||
| "bugs": { | ||
| "url": "https://github.com/opentiny/tiny-engine/issues" | ||
| }, | ||
| "homepage": "https://opentiny.design/tiny-engine", | ||
| "devDependencies": { | ||
| "vite": "^4.3.7" | ||
| }, | ||
| "peerDependencies": { | ||
| "@opentiny/vue": "^3.14.0", | ||
| "vue": "^3.4.15" | ||
| }, | ||
| "dependencies": { | ||
| "@opentiny/tiny-engine-controller": "workspace:*" | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/opentiny/tiny-engine", | ||
| "directory": "packages/configurator" | ||
| }, | ||
| "files": [ | ||
| "dist" | ||
| ] | ||
| } |
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 @@ | ||
| export { default as InputConfigurator } from './input-configurator' | ||
| export { default as SelectConfigurator } from './select-configurator' |
72 changes: 72 additions & 0 deletions
72
packages/configurator/src/input-configurator/InputConfigurator.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,72 @@ | ||
| <template> | ||
| <tiny-input v-model="value" :type="type" :placeholder="placeholder" :rows="rows" @update:modelValue="change"> | ||
| <template #suffix> | ||
| <div v-for="item in suffixIcons" :key="item.icon"> | ||
| <svg-icon v-if="item.icon" :name="item.icon" class="tiny-svg-size" @click="item.onClick.action"></svg-icon> | ||
| </div> | ||
| </template> | ||
| </tiny-input> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { ref, watchEffect } from 'vue' | ||
| import { Input } from '@opentiny/vue' | ||
| import { useProperties } from '@opentiny/tiny-engine-controller' | ||
| export default { | ||
| name: 'InputConfigurator', | ||
| components: { | ||
| TinyInput: Input | ||
| }, | ||
| props: { | ||
| modelValue: { | ||
| type: String | ||
| }, | ||
| type: { | ||
| type: String | ||
| }, | ||
| placeholder: { | ||
| type: String | ||
| }, | ||
| suffixIcons: { | ||
| type: Array, | ||
| default: () => [] | ||
| }, | ||
| dataType: { | ||
| type: String | ||
| }, | ||
| rows: { | ||
| type: Number, | ||
| default: 10 | ||
| } | ||
| }, | ||
| emits: ['update:modelValue'], | ||
| setup(props, { emit }) { | ||
| const value = ref(props.modelValue) | ||
| const change = (val) => { | ||
| emit('update:modelValue', props.dataType === 'Array' ? val.split(',') : val) | ||
| } | ||
| watchEffect(() => { | ||
| value.value = useProperties().translateProp(props.modelValue) | ||
| }) | ||
| return { | ||
| value, | ||
| change | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="less" scoped> | ||
| .tiny-svg-size { | ||
| margin-left: 10px; | ||
| font-size: 16px; | ||
| &:hover { | ||
| cursor: pointer; | ||
| color: var(--ti-lowcode-dialog-font-color); | ||
| } | ||
| } | ||
| </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,6 @@ | ||
| import InputConfigurator from './InputConfigurator.vue' | ||
|
|
||
| export default { | ||
| name: 'InputConfigurator', | ||
| component: InputConfigurator | ||
| } |
Oops, something went wrong.