forked from opentiny/tiny-vue
update docs and fix bug (#659)
* docs: update release notes (#397) * fix Playground Page (#399) * fix(sites): 切换 sites 引用 @opentiny/vue-repl包 * fix(sites): fix Playground Page * fix(sites): fix (#400) * feat(release): delete color-picker * feat(release): delete color-picker * feat(release): fix grid tips contentMethod * fix(playground): fix process.env \ changeVersion \sortablejs bugs (#422) * fix(sites): fix grid demo api link jump error url (#421) * fix(form-demo): add form validateField api demo (#424) * fix: fix demo import vue-modal; fix playground share (#428) * fix(playground): fix process.env \ changeVersion \sortablejs bugs * fix: fix demo import vue-modal; fix playground share * fix: import Modal (#430) * fix(select): Fix label not displaying correctly when using optimization attribute in select component (#438) * fix(search): the enter bug of the search component is fixed (#439) * feat(release): fix grid watch data * feat(grid): fix grid custom tooltip * fix: fix grid pager events * docs: fix the problem of missing container component style (#453) * docs(container): fix container composition demos fix #425 (#441) * docs: remove :::warning * fix(checkbox): fix checkbox selected icon bug close #450 (#451) * fix: fix input attrs id * fix(slider): fix slider range demo bug * fix: fix when datetime component in dialog-box, the popper scroll away; fix dialog-box (#455) * fix(mobile-tabbar): fixed a tabbar component switchover issue on the mobile client (#458) * fix(slider): fix upload destory bug * fix(smb-theme): smb theme change fix (#469) * fix(checkbox): fix checkbox group wrap (#467) * fix(dropdown): Fix the issue of incorrect theme icons for Dropdown components. (#468) * fix(dropdown-item): (#472) Fix DropdownItem component clicking to disable menu items but triggering item-click event * fix(button): button smb theme change fix (#470) * fix(button): button smb theme change fix * fix(checkbox-button): smb theme change fix * fix(playground): fix jump to incorrect demo (#466) * fix(link): smb theme change fix (#474) * fix(theme): smb theme change fix (#480) * fix(grid): fix grid checkbox radio x-design theme * chore(ts): change code style for import ts type (#511) * fix(Cascader, DropDown, Popeditor): fixed Cascader component panel not closing when clicked elsewhere (#513) * fix(popper): fix popper element offset error in micro-app (#570) * chore(popper): stop bubbling when parent is fixed * fix(popper): fix popper element in micro-app * feat: update code * Merge branch 'dev' of github.com:opentiny/tiny-vue into release * fix(docs): add support vue2.7 docs (#630) * fix(docs): add support vue2.7 docs * fix: fix version * fix: fix color-picker error * docs: update changelog v3.11.0 (#629) * fix: update site version * feat(site): add pnpm importPlugin docs * fix(dialog-box): recover dialog-box's css (#633) * docs(calendar-view): add calendar-view composition api demos (#635) * Release recover css (#637) * fix(dialog-box): recover dialog-box's css * fix(dialog-box): recover dialog-box's css * feat: add divider composition-api demo * fix(layout): fix layout styles * fix(checkbox): fix checkbox style (#640) * feat(playground): optimize the playground UI style (#638) * fix(rich-text-editor): Change the display of event triggered Demo, fix style issues, and fix component errors (#639) * Fix rich-text-edtior functionality and style issues * fix(Rich Text Editor): Fix bugs in the Rich Text Editor * fix(rich-text-editor): Change the display of event triggered Demo, fix style issues, and fix component errors * fix(rich-text-editor): remove Collaboration function, remove the depe… (#641) * fix(rich-text-editor): remove Collaboration function, remove the dependence and avoid the sideEffects * fix(rich-text-editor): fix * Fix bugs of dialog-box, tabbar and tree-menu (#643) * fix(Dialog-box): Fix the issue of blocked headers in dialogBox components * fix(dialog-box): Eliminate unnecessary scrollbars on the body inside the dialog-box * fix(treemenu): The content is too crowded * fix(tabbar): running exception of tabbar * fix(rich-text-editor): Enable History Mode；Fix Console Warning (#651) * Hyl fixbug 2310 (#654) * fix(Dialog-box): Fix the issue of blocked headers in dialogBox components * fix(dialog-box): Eliminate unnecessary scrollbars on the body inside the dialog-box * fix(treemenu): The content is too crowded * fix(tabbar): Tabbar item click event not responding * fix(dialog-box): fix the right dialog-box's layout to flex layout (#653) * feat(site): update docs --------- Co-authored-by: Kagol <kagol@sina.com> Co-authored-by: 申君健 <40288193@qq.com> Co-authored-by: gimmyhehe <975402925@qq.com> Co-authored-by: MomoPoppy <125256456+MomoPoppy@users.noreply.github.com> Co-authored-by: chenxi-20 <76168465+chenxi-20@users.noreply.github.com> Co-authored-by: yoyo <104079404+yoyo201626@users.noreply.github.com> Co-authored-by: shonen7 <145949377+shonen7@users.noreply.github.com> Co-authored-by: 黄怡林 <48042709+Huangyilin19@users.noreply.github.com>
This commit is contained in:
ajaxzheng
GitHub
parent
c510f5c054
commit
b2827a601e
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<tiny-calendar-view :events="eventslist" :year="2023" :month="5"></tiny-calendar-view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { CalendarView as TinyCalendarView } from '@opentiny/vue'
|
||||
|
||||
const eventslist = ref([
|
||||
{
|
||||
title: '前端周会1',
|
||||
start: '2023-05-15 8:30:00',
|
||||
end: '2023-05-15 9:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '前端周会2',
|
||||
start: '2023-05-15 10:00:00',
|
||||
end: '2023-05-15 12:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'green'
|
||||
},
|
||||
{
|
||||
title: '前端周会2-1',
|
||||
start: '2023-05-15 13:00:00',
|
||||
end: '2023-05-15 15:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'red'
|
||||
},
|
||||
{
|
||||
title: '前端周会3',
|
||||
start: '2023-05-16 9:00:00',
|
||||
end: '2023-05-16 10:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'yellow'
|
||||
},
|
||||
{
|
||||
title: '前端周会4',
|
||||
start: '2023-05-16 11:00:00',
|
||||
end: '2023-05-16 14:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'purple'
|
||||
},
|
||||
{
|
||||
title: '前端周会5',
|
||||
start: '2023-05-25 8:00:00',
|
||||
end: '2023-05-25 9:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'cyan'
|
||||
},
|
||||
{
|
||||
title: '前端周会6',
|
||||
start: '2023-05-26 8:00:00',
|
||||
end: '2023-05-26 11:30:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '前端周会7',
|
||||
start: '2023-05-27 8:30:00',
|
||||
end: '2023-05-27 9:30:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '节假日25-28',
|
||||
start: '2023-05-25 10:30:00',
|
||||
end: '2023-05-28 03:30:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'green'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<template>
|
||||
<tiny-calendar-view
|
||||
:events="eventslist"
|
||||
:year="2023"
|
||||
:month="5"
|
||||
mode="timeline"
|
||||
:show-mark="showMark"
|
||||
mark-color="red"
|
||||
>
|
||||
</tiny-calendar-view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { CalendarView as TinyCalendarView } from '@opentiny/vue'
|
||||
|
||||
const eventslist = ref([])
|
||||
|
||||
const showMark = (date) => {
|
||||
return date.split('-')[2] < 10
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<tiny-calendar-view :events="eventslist" :year="2023" :month="5" :disabled="disabled"></tiny-calendar-view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { CalendarView as TinyCalendarView } from '@opentiny/vue'
|
||||
|
||||
const eventslist = ref([])
|
||||
|
||||
const disabled = (date) => {
|
||||
return date.split('-')[2] < 5
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<tiny-calendar-view
|
||||
:events="eventslist"
|
||||
:year="2023"
|
||||
:month="5"
|
||||
@prev-week-click="prevWeekClick"
|
||||
@next-week-click="nextWeekClick"
|
||||
@week-change="weekChange"
|
||||
@year-change="yearChange"
|
||||
@month-change="monthChange"
|
||||
>
|
||||
</tiny-calendar-view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { CalendarView as TinyCalendarView } from '@opentiny/vue'
|
||||
|
||||
const eventslist = ref([])
|
||||
|
||||
const prevWeekClick = (date) => {
|
||||
console.log(date)
|
||||
}
|
||||
|
||||
const nextWeekClick = (date) => {
|
||||
console.log(date)
|
||||
}
|
||||
|
||||
const weekChange = (oldVal, newVal) => {
|
||||
console.log(oldVal, newVal)
|
||||
}
|
||||
|
||||
const yearChange = (oldVal, newVal) => {
|
||||
console.log(oldVal, newVal)
|
||||
}
|
||||
|
||||
const monthChange = (oldVal, newVal) => {
|
||||
console.log(oldVal, newVal)
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<tiny-calendar-view :events="eventslist" :year="2023" :month="6" :modes="['month', 'timeline', 'schedule']">
|
||||
</tiny-calendar-view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { CalendarView as TinyCalendarView } from '@opentiny/vue'
|
||||
|
||||
const eventslist = ref([])
|
||||
</script>
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<template>
|
||||
<tiny-calendar-view
|
||||
:events="eventslist"
|
||||
mode="schedule"
|
||||
:modes="['schedule', 'timeline']"
|
||||
:year="2023"
|
||||
:month="5"
|
||||
:show-new-schedule="showNewSchedule"
|
||||
@new-schedule="newSchedule"
|
||||
>
|
||||
<template #weekday1="{ slotScope }">
|
||||
<div v-for="(event, index) in slotScope.events" :key="index" class="event">
|
||||
<p class="title">{{ event.title }}</p>
|
||||
<p class="content">{{ event.content }}</p>
|
||||
</div>
|
||||
</template>
|
||||
<template #weekday2="{ slotScope }">
|
||||
<div v-for="(event, index) in slotScope.events" :key="index" class="event">
|
||||
<p class="title">{{ event.title }}</p>
|
||||
<p class="content">{{ event.content }}</p>
|
||||
</div>
|
||||
</template>
|
||||
</tiny-calendar-view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { CalendarView as TinyCalendarView } from '@opentiny/vue'
|
||||
|
||||
const eventslist = ref([
|
||||
{
|
||||
title: '前端周会1',
|
||||
start: '2023-05-15 8:30:00',
|
||||
end: '2023-05-15 9:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '前端周会2',
|
||||
start: '2023-05-15 10:00:00',
|
||||
end: '2023-05-15 12:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'green'
|
||||
},
|
||||
{
|
||||
title: '前端周会2-1',
|
||||
start: '2023-05-15 13:00:00',
|
||||
end: '2023-05-15 15:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'red'
|
||||
},
|
||||
{
|
||||
title: '前端周会3',
|
||||
start: '2023-05-16 9:00:00',
|
||||
end: '2023-05-16 10:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'yellow'
|
||||
},
|
||||
{
|
||||
title: '前端周会4',
|
||||
start: '2023-05-16 11:00:00',
|
||||
end: '2023-05-16 14:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'purple'
|
||||
},
|
||||
{
|
||||
title: '前端周会5',
|
||||
start: '2023-05-25 8:00:00',
|
||||
end: '2023-05-25 9:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'cyan'
|
||||
},
|
||||
{
|
||||
title: '前端周会6',
|
||||
start: '2023-05-26 8:00:00',
|
||||
end: '2023-05-26 11:30:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '前端周会7',
|
||||
start: '2023-05-27 8:30:00',
|
||||
end: '2023-05-27 9:30:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '节假日25-28',
|
||||
start: '2023-05-25 10:30:00',
|
||||
end: '2023-05-28 03:30:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'green'
|
||||
}
|
||||
])
|
||||
|
||||
const showNewSchedule = (date) => {
|
||||
return true
|
||||
}
|
||||
|
||||
const newSchedule = (date) => {
|
||||
const event = {
|
||||
title: '新增事件' + date,
|
||||
start: date + ' 10:30:00',
|
||||
end: date + ' 12:30:00',
|
||||
content: '新增事件随机事件 新增事件随机事件 新增事件随机事件 新增事件随机事件 ',
|
||||
theme: 'blue'
|
||||
}
|
||||
|
||||
eventslist.value.push(event)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.event .title {
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.event .content {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<tiny-calendar-view :events="eventslist" mode="timeline" :modes="[]" :year="2023" :month="5" :day-times="[10, 20]">
|
||||
</tiny-calendar-view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { CalendarView as TinyCalendarView } from '@opentiny/vue'
|
||||
|
||||
const eventslist = ref([
|
||||
{
|
||||
title: '前端周会1',
|
||||
start: '2023-05-15 8:30:00',
|
||||
end: '2023-05-15 9:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '前端周会2',
|
||||
start: '2023-05-15 10:00:00',
|
||||
end: '2023-05-15 12:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'green'
|
||||
},
|
||||
{
|
||||
title: '前端周会2-1',
|
||||
start: '2023-05-15 13:00:00',
|
||||
end: '2023-05-15 15:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'red'
|
||||
},
|
||||
{
|
||||
title: '前端周会3',
|
||||
start: '2023-05-16 9:00:00',
|
||||
end: '2023-05-16 10:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'yellow'
|
||||
},
|
||||
{
|
||||
title: '前端周会4',
|
||||
start: '2023-05-16 11:00:00',
|
||||
end: '2023-05-16 14:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'purple'
|
||||
},
|
||||
{
|
||||
title: '前端周会5',
|
||||
start: '2023-05-25 8:00:00',
|
||||
end: '2023-05-25 9:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'cyan'
|
||||
},
|
||||
{
|
||||
title: '前端周会6',
|
||||
start: '2023-05-26 8:00:00',
|
||||
end: '2023-05-26 11:30:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '前端周会7',
|
||||
start: '2023-05-27 8:30:00',
|
||||
end: '2023-05-27 9:30:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '节假日25-28',
|
||||
start: '2023-05-25 10:30:00',
|
||||
end: '2023-05-28 03:30:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'green'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
<template>
|
||||
<tiny-calendar-view :events="eventslist" :year="2023" :month="5">
|
||||
<template #timeline1="{ slotScope }">
|
||||
<div
|
||||
class="text-color-success bg-color-success-subtler border-l-2 border-color-success mt-10"
|
||||
v-for="(event, index) in slotScope.events"
|
||||
:key="index"
|
||||
>
|
||||
<p class="text-sm mb-1">{{ event.title }}</p>
|
||||
<p class="text-xs">{{ event.content }}</p>
|
||||
</div>
|
||||
</template>
|
||||
<template #timeline2="{ slotScope }">
|
||||
<div
|
||||
class="text-color-success bg-color-success-subtler border-l-2 border-color-success mt-10"
|
||||
v-for="(event, index) in slotScope.events"
|
||||
:key="index"
|
||||
>
|
||||
<p class="text-sm mb-1">{{ event.title }}</p>
|
||||
<p class="text-xs">{{ event.content }}</p>
|
||||
</div>
|
||||
</template>
|
||||
</tiny-calendar-view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { CalendarView as TinyCalendarView } from '@opentiny/vue'
|
||||
|
||||
const eventslist = ref([
|
||||
{
|
||||
title: '前端周会1',
|
||||
start: '2023-05-15 8:30:00',
|
||||
end: '2023-05-15 9:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '前端周会2',
|
||||
start: '2023-05-15 10:00:00',
|
||||
end: '2023-05-15 12:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'green'
|
||||
},
|
||||
{
|
||||
title: '前端周会2-1',
|
||||
start: '2023-05-15 13:00:00',
|
||||
end: '2023-05-15 15:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'red'
|
||||
},
|
||||
{
|
||||
title: '前端周会3',
|
||||
start: '2023-05-16 9:00:00',
|
||||
end: '2023-05-16 10:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'yellow'
|
||||
},
|
||||
{
|
||||
title: '前端周会4',
|
||||
start: '2023-05-16 11:00:00',
|
||||
end: '2023-05-16 14:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'purple'
|
||||
},
|
||||
{
|
||||
title: '前端周会5',
|
||||
start: '2023-05-25 8:00:00',
|
||||
end: '2023-05-25 9:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'cyan'
|
||||
},
|
||||
{
|
||||
title: '前端周会6',
|
||||
start: '2023-05-26 8:00:00',
|
||||
end: '2023-05-26 11:30:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '前端周会6-1',
|
||||
start: '2023-05-26 12:00:00',
|
||||
end: '2023-05-26 13:30:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'cyan'
|
||||
},
|
||||
{
|
||||
title: '前端周会7',
|
||||
start: '2023-05-27 8:30:00',
|
||||
end: '2023-05-27 9:30:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '节假日25-28',
|
||||
start: '2023-05-25 10:30:00',
|
||||
end: '2023-05-28 03:30:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'green'
|
||||
},
|
||||
{
|
||||
title: '前端周会8',
|
||||
start: '2023-06-26 8:00:00',
|
||||
end: '2023-06-26 11:30:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '前端周会9',
|
||||
start: '2023-07-26 8:00:00',
|
||||
end: '2023-07-26 11:30:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '前端周会10',
|
||||
start: '2023-08-26 8:00:00',
|
||||
end: '2023-08-26 11:30:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '前端周会11',
|
||||
start: '2023-09-26 8:00:00',
|
||||
end: '2023-09-26 11:30:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '前端周会12',
|
||||
start: '2023-10-26 8:00:00',
|
||||
end: '2023-10-26 11:30:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<tiny-calendar-view>
|
||||
<template #tool>
|
||||
<p>此处为自定义工具栏插槽</p>
|
||||
</template>
|
||||
</tiny-calendar-view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CalendarView as TinyCalendarView } from '@opentiny/vue'
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<tiny-calendar-view :events="eventslist" :year="2023" :month="5" :set-day-bg-color="setDayBgColor">
|
||||
</tiny-calendar-view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { CalendarView as TinyCalendarView } from '@opentiny/vue'
|
||||
|
||||
const eventslist = ref([])
|
||||
|
||||
const setDayBgColor = (date) => {
|
||||
if (date.split('-')[2] === '10') {
|
||||
return 'red'
|
||||
}
|
||||
return ''
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<template>
|
||||
<tiny-calendar-view :events="eventslist" :year="2023" :month="5">
|
||||
<template #header="{ slotScope }">
|
||||
<p>{{ slotScope.date }} {{ slotScope.weekDay }}</p>
|
||||
</template>
|
||||
</tiny-calendar-view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { CalendarView as TinyCalendarView } from '@opentiny/vue'
|
||||
|
||||
const eventslist = ref([
|
||||
{
|
||||
title: '前端周会1',
|
||||
start: '2023-05-15 8:00:00',
|
||||
end: '2023-05-15 9:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '前端周会2',
|
||||
start: '2023-05-15 10:00:00',
|
||||
end: '2023-05-15 12:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '前端周会2-1',
|
||||
start: '2023-05-15 13:00:00',
|
||||
end: '2023-05-15 15:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '前端周会3',
|
||||
start: '2023-05-16 9:00:00',
|
||||
end: '2023-05-16 10:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '前端周会4',
|
||||
start: '2023-05-16 11:00:00',
|
||||
end: '2023-05-16 14:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '前端周会5',
|
||||
start: '2023-05-25 8:00:00',
|
||||
end: '2023-05-25 9:00:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '前端周会6',
|
||||
start: '2023-05-26 8:00:00',
|
||||
end: '2023-05-26 11:30:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '前端周会7',
|
||||
start: '2023-05-27 8:30:00',
|
||||
end: '2023-05-27 9:30:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'blue'
|
||||
},
|
||||
{
|
||||
title: '节假日25-28',
|
||||
start: '2023-05-25 10:30:00',
|
||||
end: '2023-05-28 03:30:00',
|
||||
content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
|
||||
theme: 'green'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<tiny-calendar-view :modes="[]"></tiny-calendar-view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CalendarView as TinyCalendarView } from '@opentiny/vue'
|
||||
</script>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<tiny-calendar-view :modes="['timeline', 'schedule']" mode="timeline"></tiny-calendar-view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CalendarView as TinyCalendarView } from '@opentiny/vue'
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<tiny-calendar-view
|
||||
:events="eventslist"
|
||||
:year="2023"
|
||||
:month="5"
|
||||
:multi-select="true"
|
||||
mode="month"
|
||||
:modes="[]"
|
||||
@selected-date-change="selectedDateChange"
|
||||
>
|
||||
</tiny-calendar-view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { CalendarView as TinyCalendarView, Modal } from '@opentiny/vue'
|
||||
|
||||
const eventslist = ref([])
|
||||
|
||||
const selectedDateChange = (date) => {
|
||||
Modal.message(`当前选择${JSON.stringify(date)}`)
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<tiny-calendar-view
|
||||
ref="calendar"
|
||||
:multi-select="true"
|
||||
:year="2023"
|
||||
:month="5"
|
||||
:modes="[]"
|
||||
:set-day-bg-color="setDayBgColor"
|
||||
@selected-date-change="selectedDateChange"
|
||||
>
|
||||
<template #tool>
|
||||
<tiny-button type="primary" @click="setDays('workingDays')" class="mr-2">工作日</tiny-button>
|
||||
<tiny-button type="success" @click="setDays('offDays')" class="mr-2">休息日</tiny-button>
|
||||
<tiny-button type="warning" @click="setDays('holidays')">节假日</tiny-button>
|
||||
</template>
|
||||
</tiny-calendar-view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
CalendarView as TinyCalendarView,
|
||||
Button as TinyButton,
|
||||
Modal
|
||||
} from '@opentiny/vue'
|
||||
|
||||
const workingDays = ref([])
|
||||
const offDays = ref([])
|
||||
const holidays = ref([])
|
||||
const selectedDate = ref([])
|
||||
|
||||
const map = {
|
||||
workingDays,
|
||||
offDays,
|
||||
holidays
|
||||
}
|
||||
|
||||
const setDays = (type) => {
|
||||
if (!selectedDate.value.length) {
|
||||
Modal.message('请选择日期')
|
||||
return
|
||||
}
|
||||
map[type].value.push(...selectedDate.value)
|
||||
selectedDate.value = []
|
||||
}
|
||||
|
||||
const setDayBgColor = (date) => {
|
||||
if (workingDays.value.includes(date)) {
|
||||
return 'blue'
|
||||
}
|
||||
if (offDays.value.includes(date)) {
|
||||
return 'green'
|
||||
}
|
||||
if (holidays.value.includes(date)) {
|
||||
return 'yellow'
|
||||
}
|
||||
|
||||
return ''
|
||||
}
|
||||
|
||||
const selectedDateChange = (date) => {
|
||||
selectedDate.value = date
|
||||
}
|
||||
</script>
|
||||
|
|
@ -39,7 +39,6 @@ export default {
|
|||
return
|
||||
}
|
||||
this[type].push(...this.selectedDate)
|
||||
this.$refs.calendar.$children[0].state.selectedDates = []
|
||||
this.selectedDate = []
|
||||
},
|
||||
setDayBgColor(date) {
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@ export default {
|
|||
'demoId': 'calendar-mode',
|
||||
'name': { 'zh-CN': '显示模式', 'en-US': 'Display mode' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>mode</code> 属性指定以年的形式显示，将展示当年的每个月份。可选值有 year、month。</p>\n',
|
||||
'zh-CN': '<p>通过 <code>mode</code> 属性指定以年的形式显示，将展示当年的每个月份。可选值有 <code>month</code> / <code>timeline</code> / <code>schedule</code>。</p>\n',
|
||||
'en-US':
|
||||
'<p>The <code>mode</code> attribute specifies that each month of the current year is displayed. The options are year and month. </p>\n'
|
||||
'<p>The <code>mode</code> attribute specifies that each month of the current year is displayed. The options are <code>month</code> / <code>timeline</code> / <code>schedule</code>. </p>\n'
|
||||
},
|
||||
'codeFiles': ['calendar-mode.vue']
|
||||
},
|
||||
|
|
@ -49,7 +49,7 @@ export default {
|
|||
'codeFiles': ['calendar-timeline-slot.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'calendar-timeline-rang',
|
||||
'demoId': 'calendar-timeline-range',
|
||||
'name': { 'zh-CN': '时间线范围配置', 'en-US': '' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过dayTimes属性配置时间线模式下所展示的时间范围，默认为[8,18]，可配范围[0,23]。</p>\n',
|
||||
|
|
@ -137,7 +137,7 @@ export default {
|
|||
'zh-CN': '配置时间线模式下所展示的时间范围，默认为[8,18]，可配范围[0,23]。',
|
||||
'en-US': ''
|
||||
},
|
||||
'demoId': 'basic-usage'
|
||||
'demoId': 'calendar-timeline-range'
|
||||
},
|
||||
{
|
||||
'name': 'disabled',
|
||||
|
|
@ -167,7 +167,7 @@ export default {
|
|||
'zh-CN': '日历高度',
|
||||
'en-US': ''
|
||||
},
|
||||
'demoId': 'basic-usage'
|
||||
'demoId': ''
|
||||
},
|
||||
{
|
||||
'name': 'mark-color',
|
||||
|
|
@ -275,7 +275,7 @@ export default {
|
|||
'zh-CN': '新增日程按钮点击事件',
|
||||
'en-US': ''
|
||||
},
|
||||
'demoId': 'calendar-event'
|
||||
'demoId': 'calendar-schedule-slot'
|
||||
},
|
||||
{
|
||||
'name': 'next-week-click',
|
||||
|
|
@ -299,7 +299,7 @@ export default {
|
|||
'zh-CN': '选中日期改变事件',
|
||||
'en-US': ''
|
||||
},
|
||||
'demoId': 'calendar-event'
|
||||
'demoId': 'multi-select'
|
||||
},
|
||||
{
|
||||
'name': 'week-change',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<tiny-divider></tiny-divider>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Divider as TinyDivider } from '@opentiny/vue'
|
||||
</script>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<tiny-divider></tiny-divider>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Divider } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
<template>
|
||||
<p>文案在左侧</p>
|
||||
<tiny-divider content-position="left">文案</tiny-divider>
|
||||
<p>文案在中间</p>
|
||||
<tiny-divider content-position="center">文案</tiny-divider>
|
||||
<p>文案在右侧</p>
|
||||
<tiny-divider content-position="right">文案</tiny-divider>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Divider as TinyDivider } from '@opentiny/vue'
|
||||
</script>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<tiny-divider content-position="right">文案</tiny-divider>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Divider } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<p>自定义分隔线颜色</p>
|
||||
<tiny-divider color="#7693f5"></tiny-divider>
|
||||
<p>自定义分隔线的样式</p>
|
||||
<tiny-divider border-style="dashed"></tiny-divider>
|
||||
<p>自定义文案的颜色</p>
|
||||
<tiny-divider content-color="#7693f5">文案</tiny-divider>
|
||||
<p>文案的背景颜色</p>
|
||||
<tiny-divider content-color="#ffffff" content-background-color="#7693f5">文案</tiny-divider>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Divider as TinyDivider } from '@opentiny/vue'
|
||||
</script>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<tiny-divider content-color="#ffffff" content-background-color="#7693f5">文案</tiny-divider>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Divider } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<span>分隔线</span>
|
||||
<tiny-divider direction="vertical"></tiny-divider>
|
||||
<span>分隔线</span>
|
||||
<tiny-divider direction="vertical"></tiny-divider>
|
||||
<span>分隔线</span>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Divider as TinyDivider } from '@opentiny/vue'
|
||||
</script>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<span>分隔线</span>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Divider } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }">
|
||||
<tiny-grid-column type="index" width="60"></tiny-grid-column>
|
||||
<tiny-grid-column field="name" title="插槽自定义列编辑" :editor="{ component: 'input', autoselect: true }">
|
||||
<template #edit="data">
|
||||
<tiny-input v-model="data.row.name" placeholder="请输入内容"></tiny-input>
|
||||
</template>
|
||||
</tiny-grid-column>
|
||||
<tiny-grid-column field="employees" title="员工人数"></tiny-grid-column>
|
||||
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
|
||||
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
|
||||
<tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { Grid as TinyGrid, GridColumn as TinyGridColumn, Input as TinyInput } from '@opentiny/vue'
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: 'GFD科技YX公司',
|
||||
area: '华东区',
|
||||
address: '福州',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'WWW科技YX公司',
|
||||
area: '华南区',
|
||||
address: '深圳福田区',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'RFV有限责任公司',
|
||||
area: '华南区',
|
||||
address: '中山市',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'TGB科技YX公司',
|
||||
area: '华东区',
|
||||
address: '龙岩',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'YHN科技YX公司',
|
||||
area: '华南区',
|
||||
address: '韶关',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'WSX科技YX公司',
|
||||
area: '华中区',
|
||||
address: '黄冈',
|
||||
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
|
@ -93,11 +93,31 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tiny-row .last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tiny-col .col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.tiny-col:nth-child(even) .col {
|
||||
background: #73d0fc;
|
||||
}
|
||||
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
|
|
|
|||
|
|
@ -38,6 +38,28 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content .tiny-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.content .tiny-row .last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.content .tiny-col .col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.content .tiny-col:nth-child(even) .col {
|
||||
background: #73d0fc;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Layout, Row, Col } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -70,4 +70,4 @@ export default {
|
|||
.content .tiny-col:nth-child(even) .col {
|
||||
background: #73d0fc;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,3 +22,13 @@
|
|||
<script setup lang="jsx">
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Layout, Row, Col } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -39,4 +39,4 @@ export default {
|
|||
background: #1f9ed8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol, Button as TinyButton } from '@opentiny/vue'
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Layout, Row, Col, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -18,6 +18,16 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,28 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tiny-row .last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tiny-col .col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.tiny-col:nth-child(even) .col {
|
||||
background: #73d0fc;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Layout, Row, Col } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -49,4 +49,4 @@ export default {
|
|||
.tiny-col:nth-child(even) .col {
|
||||
background: #73d0fc;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,11 +19,36 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tiny-row .last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tiny-col .col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.tiny-col:nth-child(even) .col {
|
||||
background: #73d0fc;
|
||||
}
|
||||
|
||||
.row-bg {
|
||||
padding: 10px 0;
|
||||
background-color: #f9fafc;
|
||||
}
|
||||
|
||||
.align {
|
||||
height: 120px;
|
||||
}
|
||||
|
|
@ -39,4 +64,28 @@ import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/
|
|||
.sm {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 70px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background: #46c096;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 20px;
|
||||
margin-top: 20px;
|
||||
line-height: 30px;
|
||||
height: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 100px;
|
||||
box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3);
|
||||
min-height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Layout, Row, Col } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -96,4 +96,4 @@ export default {
|
|||
box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3);
|
||||
min-height: 200px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -41,3 +41,25 @@ function toggleOrder() {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tiny-row .last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tiny-col .col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.tiny-col:nth-child(even) .col {
|
||||
background: #73d0fc;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Layout, Row, Col, Button } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -76,4 +76,4 @@ export default {
|
|||
.tiny-col:nth-child(even) .col {
|
||||
background: #73d0fc;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,11 +19,31 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tiny-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tiny-row .last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tiny-col .col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.tiny-col:nth-child(even) .col {
|
||||
background: #73d0fc;
|
||||
}
|
||||
|
||||
.lg {
|
||||
height: 80px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Layout, Row, Col } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -36,11 +36,23 @@
|
|||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.margin-bottom10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.lg {
|
||||
height: 120px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,6 +36,20 @@
|
|||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.margin-bottom10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Layout, Row, Col } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -60,4 +60,4 @@ export default {
|
|||
background: #1f9ed8;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -58,6 +58,20 @@
|
|||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.margin-bottom10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -31,6 +31,20 @@
|
|||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.margin-bottom10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Layout, Row, Col } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -55,4 +55,4 @@ export default {
|
|||
background: #1f9ed8;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,16 @@
|
|||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
<script setup>
|
||||
import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Layout, Row, Col } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -34,4 +34,4 @@ export default {
|
|||
background: #1f9ed8;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
<template>
|
||||
<tiny-rich-text-editor></tiny-rich-text-editor>
|
||||
</template>
|
||||
<script setup lang="jsx">
|
||||
import { RichTextEditor as TinyRichTextEditor } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
|
|
@ -7,67 +7,27 @@
|
|||
<script setup lang="jsx">
|
||||
import { RichTextEditor as TinyRichTextEditor, Notify } from '@opentiny/vue'
|
||||
const beforeCreate = function (editor) {
|
||||
Notify({
|
||||
type: 'info',
|
||||
message: 'beforeCreate',
|
||||
position: 'top',
|
||||
duration: 3000,
|
||||
})
|
||||
console.log('beforeCreate')
|
||||
}
|
||||
const create = function (editor) {
|
||||
Notify({
|
||||
type: 'info',
|
||||
message: 'create',
|
||||
position: 'top',
|
||||
duration: 3000,
|
||||
})
|
||||
console.log('create')
|
||||
}
|
||||
const focus = function (editor) {
|
||||
Notify({
|
||||
type: 'info',
|
||||
message: 'focus',
|
||||
position: 'top',
|
||||
duration: 3000,
|
||||
})
|
||||
console.log('focus')
|
||||
}
|
||||
const blur = function (editor) {
|
||||
Notify({
|
||||
type: 'info',
|
||||
message: 'blur',
|
||||
position: 'top',
|
||||
duration: 3000,
|
||||
})
|
||||
console.log('blur')
|
||||
}
|
||||
const selectionUpdate = function (editor) {
|
||||
Notify({
|
||||
type: 'info',
|
||||
message: 'selectionUpdate',
|
||||
position: 'top',
|
||||
duration: 3000,
|
||||
})
|
||||
console.log('selectionUpdate')
|
||||
}
|
||||
const transaction = function (editor) {
|
||||
Notify({
|
||||
type: 'info',
|
||||
message: 'transaction',
|
||||
position: 'top',
|
||||
duration: 3000,
|
||||
})
|
||||
console.log('transaction')
|
||||
}
|
||||
const destroy = function (editor) {
|
||||
Notify({
|
||||
type: 'info',
|
||||
message: 'destroy',
|
||||
position: 'top',
|
||||
duration: 3000,
|
||||
})
|
||||
console.log('destroy')
|
||||
}
|
||||
const update = function (editor) {
|
||||
Notify({
|
||||
type: 'info',
|
||||
message: 'update',
|
||||
position: 'top',
|
||||
duration: 3000,
|
||||
})
|
||||
console.log('update')
|
||||
}
|
||||
</script>
|
||||
|
|
@ -13,68 +13,28 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
beforeCreate(editor) {
|
||||
Notify({
|
||||
type: 'info',
|
||||
message: 'beforeCreate',
|
||||
position: 'top',
|
||||
duration: 3000,
|
||||
})
|
||||
console.log('beforeCreate')
|
||||
},
|
||||
create(editor) {
|
||||
Notify({
|
||||
type: 'info',
|
||||
message: 'create',
|
||||
position: 'top',
|
||||
duration: 3000,
|
||||
})
|
||||
console.log('create')
|
||||
},
|
||||
focus(editor) {
|
||||
Notify({
|
||||
type: 'info',
|
||||
message: 'focus',
|
||||
position: 'top',
|
||||
duration: 3000,
|
||||
})
|
||||
console.log('focus')
|
||||
},
|
||||
blur(editor) {
|
||||
Notify({
|
||||
type: 'info',
|
||||
message: 'blur',
|
||||
position: 'top',
|
||||
duration: 3000,
|
||||
})
|
||||
console.log('blur')
|
||||
},
|
||||
selectionUpdate(editor) {
|
||||
Notify({
|
||||
type: 'info',
|
||||
message: 'selectionUpdate',
|
||||
position: 'top',
|
||||
duration: 3000,
|
||||
})
|
||||
console.log('selectionUpdate')
|
||||
},
|
||||
transaction(editor) {
|
||||
Notify({
|
||||
type: 'info',
|
||||
message: 'transaction',
|
||||
position: 'top',
|
||||
duration: 3000,
|
||||
})
|
||||
console.log('transaction')
|
||||
},
|
||||
destroy(editor) {
|
||||
Notify({
|
||||
type: 'info',
|
||||
message: 'destroy',
|
||||
position: 'top',
|
||||
duration: 3000,
|
||||
})
|
||||
console.log('destroy')
|
||||
},
|
||||
update(editor) {
|
||||
Notify({
|
||||
type: 'info',
|
||||
message: 'update',
|
||||
position: 'top',
|
||||
duration: 3000,
|
||||
})
|
||||
console.log('update')
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@ export default {
|
|||
},
|
||||
{
|
||||
'demoId': 'size-medium',
|
||||
'name': { 'zh-CN': 'select', 'en-US': 'small' },
|
||||
'name': { 'zh-CN': '尺寸', 'en-US': 'small' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>size</code> 属性定义输入框尺寸，可选项有 medium、small、mini 。\n通过 <code>options</code> 配置 Select 数据项，使用后不需要再配置 tiny-option。</p>\n',
|
||||
|
|
|
|||
|
|
@ -73,6 +73,23 @@ export default {
|
|||
}
|
||||
```
|
||||
|
||||
#### 温馨提示：
|
||||
|
||||
在 `pnpm` 工程使用该插件时需要在 `package.json` 文件中逐个声明用到的每一个 `TinyVue` 组件依赖，因为 `pnpm` 特点就是用到的依赖就需要提前声明，防止幽灵依赖。
|
||||
|
||||
依赖声明可以参考一下配置
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@opentiny/vue-button": "~3.x.x",
|
||||
"@opentiny/vue-alert": "~3.x.x",
|
||||
"@opentiny/vue-input": "~3.x.x",
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 单组件引入
|
||||
|
||||
`TinyVue` 每个组件都可以独立安装、独立使用，即只安装单个组件的依赖并单独引用该组件。
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@opentiny/vue-docs",
|
||||
"version": "2.1.1",
|
||||
"version": "2.1.5",
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"start:saas": "vite --mode saas",
|
||||
|
|
@ -13,7 +13,8 @@
|
|||
"build:inner:prod": "vite build --mode innerprod",
|
||||
"build:open": "vite build --mode open",
|
||||
"prettier": "npx prettier --write ./**/*.{ts,tsx,css,less,scss,vue}",
|
||||
"stylelint": "npx stylelint ./src/**/*.scss ./src/**/*.less ./src/**/*.css --fix"
|
||||
"stylelint": "npx stylelint ./src/**/*.scss ./src/**/*.less ./src/**/*.css --fix",
|
||||
"pub": "pnpm publish --no-git-checks --access=public"
|
||||
},
|
||||
"dependencies": {
|
||||
"@opentiny/vue": "workspace:~",
|
||||
|
|
|
|||
|
|
@ -9,8 +9,6 @@ import { staticDemoPath, getWebdocPath } from '@/views/components/cmpConfig'
|
|||
import { fetchDemosFile } from '@/tools/utils'
|
||||
import logoUrl from './assets/opentiny-logo.svg?url'
|
||||
import GitHub from './icons/Github.vue'
|
||||
import Sun from './icons/Sun.vue'
|
||||
import Moon from './icons/Moon.vue'
|
||||
import Share from './icons/Share.vue'
|
||||
|
||||
const versions = ['3.11', '3.10', '3.9', '3.8']
|
||||
|
|
@ -67,13 +65,6 @@ const store = new useStore({
|
|||
}
|
||||
})
|
||||
|
||||
// 切换主题
|
||||
const dark = ref(false)
|
||||
|
||||
const toggleTheme = (theme) => {
|
||||
dark.value = theme
|
||||
}
|
||||
|
||||
const state = reactive({
|
||||
// repl 属性
|
||||
layout: 'horizon',
|
||||
|
|
@ -194,20 +185,13 @@ function share() {
|
|||
<tiny-button-group :data="state.layoutOptions" v-model="state.layout"></tiny-button-group>
|
||||
</span>
|
||||
<span class="ml20">
|
||||
版本:
|
||||
OpenTiny Vue 版本:
|
||||
<tiny-select v-model="state.selectVersion" @change="versionChange" style="width: 150px">
|
||||
<tiny-option
|
||||
v-for="item in state.versions"
|
||||
:key="item.value"
|
||||
:label="'opentiny/vue@' + item.value"
|
||||
:value="item.value"
|
||||
>
|
||||
<tiny-option v-for="item in state.versions" :key="item.value" :label="item.value" :value="item.value">
|
||||
</tiny-option>
|
||||
</tiny-select>
|
||||
</span>
|
||||
<Share @click="share" title="分享" class="share" />
|
||||
<Sun v-if="!dark" @click="toggleTheme(true)" class="light" />
|
||||
<Moon v-else @click="toggleTheme(false)" class="dark" />
|
||||
<a style="display: flex" href="https://github.com/opentiny/tiny-vue" target="_blank">
|
||||
<GitHub class="github" />
|
||||
</a>
|
||||
|
|
@ -216,7 +200,6 @@ function share() {
|
|||
<Repl
|
||||
:editor="Editor"
|
||||
:store="store"
|
||||
:theme="dark ? 'dark' : 'light'"
|
||||
:preview-options="state.previewOptions"
|
||||
:clear-console="false"
|
||||
:layout="state.layout"
|
||||
|
|
@ -265,8 +248,6 @@ function share() {
|
|||
height: calc(100vh - 36px - 16px) !important;
|
||||
}
|
||||
|
||||
.light,
|
||||
.dark,
|
||||
.github,
|
||||
.share {
|
||||
width: 20px;
|
||||
|
|
|
|||
|
|
@ -32,10 +32,6 @@ export const renderless = (
|
|||
{ vm, emit, parent },
|
||||
{
|
||||
Editor,
|
||||
Collaboration,
|
||||
CodehighComp,
|
||||
Y,
|
||||
WebrtcProvider,
|
||||
StarterKit,
|
||||
Table,
|
||||
TableCell,
|
||||
|
|
@ -57,9 +53,10 @@ export const renderless = (
|
|||
CodeBlockLowlight,
|
||||
lowlight,
|
||||
VueNodeViewRenderer,
|
||||
NodeViewContent,
|
||||
nodeViewProps,
|
||||
NodeViewWrapper,
|
||||
// CodehighComp,
|
||||
// NodeViewContent,
|
||||
// nodeViewProps,
|
||||
// NodeViewWrapper,
|
||||
Placeholder,
|
||||
codeHighlight
|
||||
}
|
||||
|
|
@ -98,8 +95,6 @@ export const renderless = (
|
|||
if (props.customToolBar) {
|
||||
toolBar = props.customToolBar
|
||||
}
|
||||
let ydoc = null
|
||||
let provider = null
|
||||
// 自定义图片
|
||||
const CustomImage = Image.extend({
|
||||
addAttributes() {
|
||||
|
|
@ -140,9 +135,9 @@ export const renderless = (
|
|||
return {
|
||||
setP:
|
||||
(attributes) =>
|
||||
({ commands }) => {
|
||||
return commands.setNode(this.name, attributes)
|
||||
}
|
||||
({ commands }) => {
|
||||
return commands.setNode(this.name, attributes)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -168,9 +163,9 @@ export const renderless = (
|
|||
return {
|
||||
setSize:
|
||||
(attributes) =>
|
||||
({ commands }) => {
|
||||
return commands.setNode(this.name, attributes)
|
||||
}
|
||||
({ commands }) => {
|
||||
return commands.setNode(this.name, attributes)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -179,24 +174,24 @@ export const renderless = (
|
|||
return {
|
||||
bgColor: {
|
||||
default: null,
|
||||
renderHTML: attributes => {
|
||||
renderHTML: (attributes) => {
|
||||
if (!attributes.bgColor) {
|
||||
return {}
|
||||
}
|
||||
return {
|
||||
style: `background: ${attributes.bgColor}`,
|
||||
style: `background: ${attributes.bgColor}`
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
addCommands() {
|
||||
return {
|
||||
setBackColor:
|
||||
attributes =>
|
||||
({ commands }) => {
|
||||
return commands.setMark(this.name, attributes)
|
||||
}
|
||||
(attributes) =>
|
||||
({ commands }) => {
|
||||
return commands.setMark(this.name, attributes)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -204,7 +199,7 @@ export const renderless = (
|
|||
extensions: [
|
||||
StarterKit?.configure({
|
||||
// 开启多人协作功能要关闭默认的history模式
|
||||
history: false
|
||||
history: true
|
||||
}),
|
||||
Table.configure({
|
||||
resizable: true
|
||||
|
|
@ -281,19 +276,9 @@ export const renderless = (
|
|||
},
|
||||
...props.options
|
||||
}
|
||||
if (props.Collaboration) {
|
||||
if (!window._yDoc) {
|
||||
window._yDoc = new Y.Doc()
|
||||
}
|
||||
ydoc = window._yDoc
|
||||
provider = new WebrtcProvider('tiny-examsple-document', ydoc)
|
||||
defaultOptions.extensions.push(
|
||||
Collaboration?.configure({
|
||||
document: ydoc
|
||||
}),
|
||||
)
|
||||
}
|
||||
const editor = new Editor(props.options ? props.options : defaultOptions)
|
||||
|
||||
let options = props.options ? Object.assign(defaultOptions, props.options) : defaultOptions
|
||||
const editor = new Editor(options)
|
||||
|
||||
const box = ref(null)
|
||||
const fontSize = ref('16px')
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
// 按钮形式复选框字号
|
||||
--ti-checkbox-button-font-size: var(--ti-common-font-size-base);
|
||||
// 按钮形式复选框未选中项悬浮文本色
|
||||
--ti-checkbox-button-hover-text-color: var(--ti-common-color-text-primary);
|
||||
--ti-checkbox-button-hover-text-color: var(--ti-common-color-text-white);
|
||||
// 按钮形式选中项边框色
|
||||
--ti-checkbox-button-checked-border-color: var(--ti-common-color-line-active);
|
||||
// 按钮形式复选框禁用文本色
|
||||
|
|
@ -33,6 +33,8 @@
|
|||
--ti-checkbox-button-checked-text-color: var(--ti-common-color-text-white);
|
||||
// 按钮形式复选框选中项背景色
|
||||
--ti-checkbox-button-checked-bg-color: var(--ti-common-color-bg-emphasize);
|
||||
// 按钮形式复选框悬浮背景色
|
||||
--ti-checkbox-button-bg-color-hover: var(--ti-common-color-bg-hover);
|
||||
// 按钮形式复选框边框色
|
||||
--ti-checkbox-button-border-color: #e9edfa;
|
||||
// 按钮形式复选框悬浮默认边框色
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
export const tinyCheckboxGroupAuroraTheme = {
|
||||
'ti-checkbox-group-1st-child-border-radius': '2px 2px 0 0',
|
||||
'ti-checkbox-group-last-child-border-radius': '0 0 2px 2px',
|
||||
}
|
||||
|
|
@ -43,13 +43,14 @@
|
|||
|
||||
.@{checkbox-button-prefix-cls} {
|
||||
display: block;
|
||||
width: min-content;
|
||||
|
||||
&:first-child .@{checkbox-button-prefix-cls}__inner {
|
||||
border-radius: 2px 2px 0 0;
|
||||
border-radius: var(--ti-checkbox-group-1st-child-border-radius);
|
||||
}
|
||||
|
||||
&:last-child .@{checkbox-button-prefix-cls}__inner {
|
||||
border-radius: 0 0 2px 2px;
|
||||
border-radius: var(--ti-checkbox-group-last-child-border-radius);
|
||||
}
|
||||
|
||||
&.is-checked .@{checkbox-button-prefix-cls}__inner {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
export const tinyCheckboxGroupSmbTheme = {
|
||||
'ti-checkbox-group-margin-bottom': '16px',
|
||||
'ti-checkbox-group-flex-wrap': 'wrap'
|
||||
'ti-checkbox-group-flex-wrap': 'wrap',
|
||||
'ti-checkbox-group-1st-child-border-radius': '6px',
|
||||
'ti-checkbox-group-last-child-border-radius': '6px',
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,8 +13,12 @@
|
|||
.component-css-vars-checkbox-group() {
|
||||
// 垂直复选框和行间距(hide)
|
||||
--ti-checkbox-group-margin-bottom: var(--ti-common-space-2x);
|
||||
// 默认不换行
|
||||
--ti-checkbox-group-flex-wrap: nowrap;
|
||||
// 默认换行
|
||||
--ti-checkbox-group-flex-wrap: wrap;
|
||||
// 按钮组按钮外边距
|
||||
--ti-checkbox-group-margin-top: var(--ti-common-space-0);
|
||||
// 垂直按钮组第一个子元素边框圆角
|
||||
--ti-checkbox-group-1st-child-border-radius: var(--ti-common-space-0);
|
||||
// 垂直按钮组最后一个子元素边框圆角
|
||||
--ti-checkbox-group-last-child-border-radius: var(--ti-common-space-0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -127,7 +127,6 @@
|
|||
margin-bottom: var(--ti-dialog-box-body-margin-bottom);
|
||||
color: var(--ti-dialog-box-body-text-color);
|
||||
font-size: var(--ti-dialog-box-body-font-size);
|
||||
overflow: auto;
|
||||
|
||||
.@{css-prefix}upload {
|
||||
overflow: hidden;
|
||||
|
|
@ -166,6 +165,9 @@
|
|||
min-width: var(--ti-dialog-box-drawer-min-width);
|
||||
max-width: var(--ti-dialog-box-drawer-max-width);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.@{dialog-box-prefix-cls}__header,
|
||||
.@{dialog-box-prefix-cls}__body,
|
||||
.@{dialog-box-prefix-cls}__footer {
|
||||
|
|
@ -188,13 +190,13 @@
|
|||
}
|
||||
|
||||
.@{dialog-box-prefix-cls}__body {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: var(--ti-dialog-box-drawer-body-padding-top) var(--ti-dialog-box-drawer-body-padding-right)
|
||||
var(--ti-dialog-box-drawer-body-padding-bottom) var(--ti-dialog-box-drawer-body-padding-left);
|
||||
}
|
||||
|
||||
.@{dialog-box-prefix-cls}__footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding: var(--ti-dialog-box-drawer-footer-padding-top) var(--ti-dialog-box-drawer-footer-padding-right)
|
||||
var(--ti-dialog-box-drawer-footer-padding-bottom) var(--ti-dialog-box-drawer-footer-padding-left);
|
||||
border-top: 1px solid var(--ti-dialog-box-drawer-divider-border-color);
|
||||
|
|
|
|||
|
|
@ -70,6 +70,10 @@
|
|||
background: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
svg, input {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:not(:disabled):hover,
|
||||
&.is-active {
|
||||
background-color: #d2e4ff;
|
||||
|
|
@ -101,6 +105,20 @@
|
|||
overflow: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tippy-box {
|
||||
.tippy-content {
|
||||
.bubble-menu {
|
||||
button {
|
||||
border-width: 1px;
|
||||
border-left: none;
|
||||
}
|
||||
&:nth-child(1) {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// p-h1~6
|
||||
|
|
@ -353,7 +371,7 @@
|
|||
// 富文本编辑器的主题区域，需要对高度进行调整，达到融为一体
|
||||
.tiny-rich-text-editor__container {
|
||||
overflow: auto;
|
||||
padding: 0 10px;
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
border: 1px solid var(--ti-rich-text-editor-box-outline-color);
|
||||
border-top: 0;
|
||||
|
|
@ -401,6 +419,27 @@
|
|||
line-height: 1.1;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
|
||||
&[level='1'] {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&[level='1.5'] {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&[level='2'] {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
&[level='2.5'] {
|
||||
line-height: 2.5;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: rgba(#616161, 0.1);
|
||||
color: #616161;
|
||||
|
|
|
|||
|
|
@ -126,6 +126,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.@{tree-node-prefix-cls}__content-left {
|
||||
position: relative;
|
||||
padding-left: var(--tree-menu-node-vertical-line-margin-right);
|
||||
}
|
||||
|
||||
&.is-current {
|
||||
& > .@{tree-node-prefix-cls}__content {
|
||||
background-color: var(--ti-tree-menu-node-selected-bg-color);
|
||||
|
|
@ -135,19 +140,15 @@
|
|||
color: var(--ti-tree-menu-node-current-text-color);
|
||||
}
|
||||
|
||||
.@{tree-node-prefix-cls}__content-box {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: 50%;
|
||||
display: inline-block;
|
||||
height: 18px;
|
||||
transform: translateY(-50%);
|
||||
border-left: 2px solid var(--ti-tree-menu-square-left-border-color);
|
||||
}
|
||||
.@{tree-node-prefix-cls}__content-left::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 50%;
|
||||
display: inline-block;
|
||||
height: 18px;
|
||||
transform: translateY(-50%);
|
||||
border-left: 2px solid var(--ti-tree-menu-square-left-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,4 +37,6 @@
|
|||
--ti-tree-menu-collapse-icon-margin-right: var(--ti-common-size-2x);
|
||||
// 节点序号字号
|
||||
--tree-menu-node-number-font-size: var(--ti-common-font-size-base);
|
||||
// 活跃节点竖线与文本的间距
|
||||
--tree-menu-node-vertical-line-margin-right: var(--ti-common-size-5x);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,9 +40,6 @@
|
|||
"@tiptap/vue-2": "^2.1.10",
|
||||
"@tiptap/vue-3": "^2.0.4",
|
||||
"highlight.js": "^11.8.0",
|
||||
"lowlight": "^2.9.0",
|
||||
"y-prosemirror": "^1.2.1",
|
||||
"y-webrtc": "^10.2.5",
|
||||
"yjs": "^13.6.7"
|
||||
"lowlight": "^2.9.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +0,0 @@
|
|||
export default function (NodeViewContent, nodeViewProps, NodeViewWrapper) {
|
||||
return {
|
||||
name: 'CodeHighlight',
|
||||
components: {
|
||||
NodeViewWrapper,
|
||||
NodeViewContent,
|
||||
},
|
||||
props: nodeViewProps,
|
||||
data() {
|
||||
return {
|
||||
languages: this.extension.options.lowlight.listLanguages(),
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedLanguage: {
|
||||
get() {
|
||||
return this.node.attrs.language
|
||||
},
|
||||
set(language) {
|
||||
this.updateAttributes({ language })
|
||||
},
|
||||
},
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<NodeViewWrapper class="code-block">
|
||||
<select contenteditable="false" v-model={this.selectedLanguage}>
|
||||
<option value="null">
|
||||
auto
|
||||
</option>
|
||||
<option disabled>
|
||||
—
|
||||
</option>
|
||||
{this.languages.map((item, index) => <option value={item} key={index}> {item} </option>)}
|
||||
</select>
|
||||
<pre><code><NodeViewContent /></code></pre>
|
||||
</NodeViewWrapper>
|
||||
)
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -82,7 +82,6 @@
|
|||
id="tiny-color"
|
||||
type="color"
|
||||
@input="state.editor.chain().focus().setColor($event.target.value).run()"
|
||||
:value="state.editor?.getAttributes('textStyle').color"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
|
|
@ -287,10 +286,10 @@ import {
|
|||
Editor,
|
||||
EditorContent,
|
||||
BubbleMenu,
|
||||
VueNodeViewRenderer,
|
||||
NodeViewContent,
|
||||
nodeViewProps,
|
||||
NodeViewWrapper
|
||||
VueNodeViewRenderer
|
||||
// NodeViewContent,
|
||||
// nodeViewProps,
|
||||
// NodeViewWrapper
|
||||
} from '@tiptap/vue'
|
||||
import StarterKit from '@tiptap/starter-kit'
|
||||
// 段落包
|
||||
|
|
@ -327,21 +326,23 @@ import js from 'highlight.js/lib/languages/javascript'
|
|||
import ts from 'highlight.js/lib/languages/typescript'
|
||||
import html from 'highlight.js/lib/languages/xml'
|
||||
import { lowlight } from 'lowlight'
|
||||
lowlight.registerLanguage('html', html)
|
||||
lowlight.registerLanguage('css', css)
|
||||
lowlight.registerLanguage('js', js)
|
||||
lowlight.registerLanguage('ts', ts)
|
||||
|
||||
function initLowLight() {
|
||||
lowlight.registerLanguage('html', html)
|
||||
lowlight.registerLanguage('css', css)
|
||||
lowlight.registerLanguage('js', js)
|
||||
lowlight.registerLanguage('ts', ts)
|
||||
}
|
||||
/* @__PURE__ */
|
||||
initLowLight()
|
||||
|
||||
// Placeholder
|
||||
import Placeholder from '@tiptap/extension-placeholder'
|
||||
// collaboration 包
|
||||
import Collaboration from '@tiptap/extension-collaboration'
|
||||
import * as Y from 'yjs'
|
||||
import { WebrtcProvider } from 'y-webrtc'
|
||||
|
||||
import { props, setup, defineComponent, $prefix } from '@opentiny/vue-common'
|
||||
import { t } from '@opentiny/vue-locale'
|
||||
import '@opentiny/vue-theme/rich-text-editor/index.less'
|
||||
import Codehighlight from './code-highlight'
|
||||
// import Codehighlight from './code-highlight.vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: $prefix + 'RichTextEditor',
|
||||
|
|
@ -417,10 +418,7 @@ export default defineComponent({
|
|||
mono: true,
|
||||
extendOptions: {
|
||||
Editor,
|
||||
Collaboration,
|
||||
StarterKit,
|
||||
Y,
|
||||
WebrtcProvider,
|
||||
Table,
|
||||
TableCell,
|
||||
TableHeader,
|
||||
|
|
@ -441,10 +439,10 @@ export default defineComponent({
|
|||
CodeBlockLowlight,
|
||||
lowlight,
|
||||
VueNodeViewRenderer,
|
||||
CodehighComp: VueNodeViewRenderer(Codehighlight(NodeViewContent, nodeViewProps, NodeViewWrapper)),
|
||||
NodeViewContent,
|
||||
nodeViewProps,
|
||||
NodeViewWrapper,
|
||||
// CodehighComp: VueNodeViewRenderer(Codehighlight(NodeViewContent, nodeViewProps, NodeViewWrapper)),
|
||||
// NodeViewContent,
|
||||
// nodeViewProps,
|
||||
// NodeViewWrapper,
|
||||
Placeholder,
|
||||
codeHighlight
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,10 @@
|
|||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
-->
|
||||
<template>
|
||||
<template>
|
||||
<div :class="{ 'tiny-mobile-tabbar-placeholder': placeholder }" :style="{ height: state.height }">
|
||||
<div
|
||||
ref="tabbar"
|
||||
class="tiny-mobile-tabbar"
|
||||
:class="[{ 'is-border': border }, { unfit: !state.fit, 'tiny-mobile-tabbar--fixed': fixed }]"
|
||||
>
|
||||
|
|
@ -27,6 +28,7 @@ import '@opentiny/vue-theme-mobile/tabbar/index.less'
|
|||
|
||||
export default defineComponent({
|
||||
name: $prefix + 'Tabbar',
|
||||
componentName: 'Tabbar',
|
||||
props: {
|
||||
activeColor: String,
|
||||
border: {
|
||||
|
|
@ -51,7 +53,7 @@ export default defineComponent({
|
|||
zIndex: [Number, String]
|
||||
},
|
||||
setup(props, context) {
|
||||
return setup({ props, context, renderless, api })
|
||||
return setup({ props, context, renderless, api, mono: true })
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue