Skip to content

Commit 9c3bd75

Browse files
zzcrzzcr
authored
feat: add @opentiny/utils package (#2661)
1 parent 8dd880d commit 9c3bd75

File tree

229 files changed

+2241
-738
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

229 files changed

+2241
-738
lines changed

‎examples/docs/newsrc/pc.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -249,9 +249,11 @@ export default {
249249
await _switchDemo()
250250
}
251251
async function _switchDemo() {
252+
if (!state.currDemo) {
253+
return
254+
}
252255
modeState.demoId = state.currDemo.demoId
253256
const path = `../../sites/demos/pc/app/${getPath(modeState.pathName)}/${state.currDemo?.codeFiles[0]}`
254-
255257
// 查找源码 查找组件
256258
state.currDemoSrc = await demoStr[path]()
257259
const comp = await demoVue[path]()

‎examples/sites/demos/apis/select.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -657,6 +657,30 @@ export default {
657657
},
658658
mode: ['pc'],
659659
pcDemo: 'init-label'
660+
},
661+
{
662+
name: 'display-only',
663+
type: 'boolean',
664+
defaultValue: 'false',
665+
desc: {
666+
'zh-CN': '设置组件只显示文字。在Form中使用时，会默认继承上级的<code>display-only</code>的值。',
667+
'en-US':
668+
'Sets the widget to display only text.When used in a form, the value of <code>display-only</code> is inherited by default.'
669+
},
670+
mode: ['pc'],
671+
pcDemo: 'multiple-mix'
672+
},
673+
{
674+
name: 'hover-expand',
675+
type: 'boolean',
676+
defaultValue: 'false',
677+
desc: {
678+
'zh-CN': '多选时，鼠标移入触发标签的自动展开',
679+
'en-US':
680+
'When multiple selections are selected, move the cursor to trigger the automatic expansion of the label.'
681+
},
682+
mode: ['pc'],
683+
pcDemo: 'multiple-mix'
660684
}
661685
],
662686
events: [

‎examples/sites/demos/pc/app/query-builder/advanced-mode.vue

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
<template>
2+
<div>
3+
<tiny-query-builder
4+
:query="modelValue"
5+
:config="queryBuildConfig"
6+
:onQueryChange="formChange"
7+
ref="queryBuildRef"
8+
/>
9+
<div class="view">
10+
<div class="preview">
11+
<pre>{{ JSON.stringify(modelValue, null, 2) }}</pre>
12+
</div>
13+
<div class="preview">
14+
<pre>{{ JSON.stringify(queryBuildConfig, null, 2) }}</pre>
15+
</div>
16+
</div>
17+
</div>
18+
</template>
19+
20+
<script lang="ts">
21+
import {
22+
TinyQueryBuilder,
23+
TinyAmount,
24+
TinyIpAddress,
25+
TinyRate,
26+
TinyDatePicker,
27+
TinySlider,
28+
TinyNumeric,
29+
TinyTimeSelect
30+
} from '@opentiny/vue'
31+
32+
function toJson() {
33+
return this.name
34+
}
35+
TinyAmount.toJSON = toJson
36+
TinyIpAddress.toJSON = toJson
37+
TinyRate.toJSON = toJson
38+
TinyDatePicker.toJSON = toJson
39+
TinySlider.toJSON = toJson
40+
TinyNumeric.toJSON = toJson
41+
TinyTimeSelect.toJSON = toJson
42+
43+
const operators = [
44+
{ name: '=', label: '等于' },
45+
{ name: '!=', label: '不等于' },
46+
{ name: '<', label: '小于' },
47+
{ name: '>', label: '大于' },
48+
{ name: '<=', label: '小于等于' },
49+
{ name: '>=', label: '大于等于' },
50+
{ name: 'contains', label: '包含' },
51+
{ name: 'beginsWith', label: '开头为' },
52+
{ name: 'endsWith', label: '结束为' },
53+
{ name: 'doesNotContain', label: '不包含' },
54+
{ name: 'null', label: '为空' },
55+
{ name: 'notNull', label: '不为空' },
56+
{ name: 'between', label: '介于' },
57+
{ name: 'notBetween', label: 'not between' },
58+
{ name: 'doesNotBeginWith', label: 'does not begin with' },
59+
{ name: 'doesNotEndWith', label: 'does not end with' },
60+
{ name: 'in', label: 'in' },
61+
{ name: 'notIn', label: 'not in' }
62+
]
63+
64+
export default {
65+
components: {
66+
TinyQueryBuilder
67+
},
68+
data: () => {
69+
return {
70+
modelValue: {
71+
'combinator': 'and',
72+
'not': false,
73+
'rules': [
74+
{
75+
'id': 'b0b0d636-3063-400a-99b0-f0ac87cc722f',
76+
'field': 'amount',
77+
'operator': '=',
78+
'valueSource': 'value',
79+
'value': {
80+
'amount': 23,
81+
'currency': 'CNY'
82+
}
83+
},
84+
{
85+
'id': 'a2f35cc3-49e1-413f-bf14-c7c5626d62d3',
86+
'rules': [
87+
{
88+
'id': '646ad890-caa0-46e2-a81b-d1045bd30ac7',
89+
'field': 'silder',
90+
'operator': '=',
91+
'valueSource': 'value',
92+
'value': 33
93+
},
94+
{
95+
'id': '3a34d067-3bd8-4b9c-909e-3bee219ee7d4',
96+
'field': 'number',
97+
'operator': '>',
98+
'valueSource': 'value',
99+
'value': 5656
100+
}
101+
],
102+
'combinator': 'and',
103+
'not': false
104+
}
105+
]
106+
},
107+
queryBuildConfig: {
108+
operators,
109+
showLockButtons: false,
110+
addRuleToNewGroups: true,
111+
showCloneButtons: true,
112+
showNotToggle: true,
113+
validateQuery: true,
114+
combinators: [
115+
{
116+
name: 'and',
117+
label: '且'
118+
},
119+
{
120+
name: 'or',
121+
label: '或'
122+
}
123+
],
124+
fields: [
125+
{
126+
name: 'amount',
127+
label: '金额',
128+
valueEditorType: 'custom',
129+
component: TinyAmount
130+
},
131+
{
132+
name: 'ip',
133+
label: 'IP',
134+
valueEditorType: 'custom',
135+
component: TinyIpAddress
136+
},
137+
{
138+
name: 'rate',
139+
label: '评分',
140+
valueEditorType: 'custom',
141+
component: TinyRate
142+
},
143+
{
144+
name: 'lastName2',
145+
label: 'Last Name2',
146+
placeholder: 'Enter last name'
147+
},
148+
{
149+
name: 'date',
150+
label: '日期',
151+
valueEditorType: 'custom',
152+
component: TinyDatePicker,
153+
props: {
154+
type: 'month'
155+
}
156+
},
157+
{
158+
name: 'silder',
159+
label: '滑块',
160+
valueEditorType: 'custom',
161+
component: TinySlider
162+
},
163+
{
164+
name: 'number',
165+
label: '数字',
166+
valueEditorType: 'custom',
167+
component: TinyNumeric
168+
},
169+
{
170+
name: 'time',
171+
label: '时间',
172+
valueEditorType: 'custom',
173+
component: TinyTimeSelect
174+
}
175+
]
176+
}
177+
}
178+
},
179+
methods: {
180+
formChange(value: any) {
181+
console.log(value)
182+
}
183+
}
184+
}
185+
</script>
186+
187+
<style scoped>
188+
.view {
189+
display: flex;
190+
width: 100%;
191+
}
192+
.preview {
193+
width: 50%;
194+
border: 1px solid black;
195+
margin: 5px;
196+
}
197+
</style>

‎examples/sites/demos/pc/app/query-builder/webdoc/query-builder.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,19 @@ export default {
6464
'en-US': ' '
6565
},
6666
codeFiles: ['sub-component-param.vue']
67+
},
68+
{
69+
demoId: 'advanced-mode',
70+
name: {
71+
'zh-CN': '高级模式',
72+
'en-US': 'Advanced Mode'
73+
},
74+
desc: {
75+
'zh-CN':
76+
'高级模式，用法详见示例:<br> \n 自定义组件必须实现:<strong> value</strong>属性和<strong>change</strong>事件,<br> \n <strong>自定义组件的其他额外属性：</strong><br> \n data-id: string,数据ID <br> \n operator: string, 操作符<br> \n filed-name: string, 字段名 <br> \n path: Array<number> 字段在queryBuilder中的父子路径, <br> \n key: to| from',
77+
'en-US': ' '
78+
},
79+
codeFiles: ['advanced-mode.vue']
6780
}
6881
]
6982
}

‎examples/sites/demos/pc/app/select/multiple-mix-composition-api.vue

Lines changed: 9 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,21 @@
11
<template>
22
<div class="demo-box">
3-
<tiny-button @click="displayOnly = !displayOnly">display-only/{{ displayOnly }}</tiny-button>
4-
<br />
5-
<br />
6-
<p>边框为表单范围</p>
7-
<br />
8-
<tiny-form class="custom-form" :inline="inline" label-position="top" :display-only="displayOnly">
9-
<tiny-form-item label="label 垂直布局">
10-
<div>
11-
<tiny-select v-model="formData.select1" multiple hover-expand>
12-
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
13-
</tiny-option>
14-
</tiny-select>
15-
<br />
16-
<br />
17-
<tiny-select v-model="formData.select1" multiple hover-expand>
18-
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
19-
</tiny-option>
20-
</tiny-select>
21-
</div>
22-
</tiny-form-item>
23-
<p>&nbsp;</p>
24-
</tiny-form>
25-
<br />
26-
<br />
27-
<tiny-form class="custom-form" :inline="inline" :display-only="displayOnly">
28-
<tiny-form-item label="form 超出隐藏">
29-
<tiny-select v-model="formData.select1" multiple hover-expand>
30-
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
31-
</tiny-select>
32-
</tiny-form-item>
33-
</tiny-form>
34-
<br />
35-
<tiny-form class="custom-form visible-form" :inline="inline" :display-only="displayOnly">
36-
<tiny-form-item label="自定义-超出显示">
37-
<tiny-select v-model="formData.select1" multiple hover-expand>
38-
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
39-
</tiny-select>
40-
</tiny-form-item>
41-
</tiny-form>
42-
<br />
43-
<tiny-form class="custom-form" :inline="inline" :display-only="displayOnly">
44-
<tiny-form-item label="默认尺寸">
45-
<tiny-select v-model="formData.select1" multiple hover-expand>
46-
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
47-
</tiny-select>
48-
</tiny-form-item>
49-
<p>&nbsp;</p>
50-
</tiny-form>
51-
<br />
52-
<br />
53-
54-
<tiny-form class="custom-form" size="mini" :inline="inline" :display-only="displayOnly">
55-
<tiny-form-item label="mini" size="mini">
56-
<tiny-select v-model="formData.select1" size="mini" multiple hover-expand>
57-
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
58-
</tiny-select>
59-
</tiny-form-item>
60-
<p>&nbsp;</p>
61-
</tiny-form>
62-
<br />
63-
<br />
3+
<tiny-button @click="displayOnly = !displayOnly">{{ displayOnly ? '解除' : '设置' }} 只读</tiny-button>
644

65-
<tiny-form class="custom-form" size="small" :inline="inline" :display-only="displayOnly">
66-
<tiny-form-item label="small" size="small">
67-
<tiny-select v-model="formData.select1" size="small" multiple hover-expand>
68-
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
69-
</tiny-select>
5+
<tiny-form class="custom-form" :inline="inline" label-position="top" :display-only="displayOnly">
6+
<tiny-form-item label="单选只读">
7+
<tiny-select v-model="formData.value" :options="options"> </tiny-select>
708
</tiny-form-item>
71-
<p>&nbsp;</p>
72-
</tiny-form>
73-
<br />
74-
<br />
75-
76-
<tiny-form class="custom-form" size="medium" :inline="inline" :display-only="displayOnly">
77-
<tiny-form-item label="medium" size="medium">
78-
<tiny-select v-model="formData.select1" size="medium" multiple hover-expand>
79-
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
80-
</tiny-select>
9+
<tiny-form-item label="多选只读">
10+
<tiny-select v-model="formData.select1" multiple :options="options" hover-expand> </tiny-select>
8111
</tiny-form-item>
82-
<p>&nbsp;</p>
8312
</tiny-form>
8413
</div>
8514
</template>
8615

8716
<script setup>
8817
import { ref, reactive } from 'vue'
89-
import { TinySelect, TinyOption, TinyForm, TinyFormItem, TinyButton } from '@opentiny/vue'
18+
import { TinySelect, TinyForm, TinyFormItem, TinyButton } from '@opentiny/vue'
9019
9120
const options = ref([
9221
{
@@ -120,10 +49,9 @@ const options = ref([
12049
])
12150
12251
const displayOnly = ref(true)
123-
const top = ref(false)
124-
const inline = ref(false)
125-
const size = ref('')
52+
12653
const formData = reactive({
54+
value: '选项1',
12755
select1: ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7']
12856
})
12957
</script>

0 commit comments

Comments
 (0)