@opentiny/vue-docs 2.1.2 → 2.1.3

package/demos/pc/app/calendar-view/basic-usage-composition-api.vue

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

package/demos/pc/app/calendar-view/calendar-day-mark-composition-api.vue

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

package/demos/pc/app/calendar-view/calendar-disabled-day-composition-api.vue

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

package/demos/pc/app/calendar-view/calendar-event-composition-api.vue

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

package/demos/pc/app/calendar-view/calendar-mode-composition-api.vue

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

package/demos/pc/app/calendar-view/calendar-schedule-slot-composition-api.vue

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

package/demos/pc/app/calendar-view/calendar-timeline-range-composition-api.vue

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

package/demos/pc/app/calendar-view/calendar-timeline-slot-composition-api.vue

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

package/demos/pc/app/calendar-view/custom-calendar-toolbar-composition-api.vue

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

package/demos/pc/app/calendar-view/custom-day-bg-color-composition-api.vue

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

package/demos/pc/app/calendar-view/custom-header-composition-api.vue

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

package/demos/pc/app/calendar-view/hide-mode-composition-api.vue

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

package/demos/pc/app/calendar-view/mode-combination-composition-api.vue

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

package/demos/pc/app/calendar-view/multi-select-composition-api.vue

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