feat: taro

packages/nutui-taro-demo/src/dentry/pages/calendarcard/customRange.vue

@@ -0,0 +1,12 @@
+<template>
+  <nut-calendar-card v-model="value" :start-date="startDate" :end-date="endDate" @change="onChange"></nut-calendar-card>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(null);
+const startDate = new Date(Date.now() - 90 * 24 * 3600 * 1000);
+const endDate = new Date(Date.now() + 90 * 24 * 3600 * 1000);
+const onChange = (val: Date) => {
+  console.log(val);
+};
+</script>

packages/nutui-taro-demo/src/dentry/pages/calendarcard/disable.vue

@@ -0,0 +1,14 @@
+<template>
+  <nut-calendar-card v-model="value" :disable-day="disableDay" @change="onChange"></nut-calendar-card>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(null);
+const onChange = (val: Date) => {
+  console.log(val);
+};
+const disableDay = (day: any) => {
+  const d = new Date(`${day.year}-${day.month}-${day.date}`).getDay();
+  return d === 1 || d === 3;
+};
+</script>

packages/nutui-taro-demo/src/dentry/pages/calendarcard/first.vue

@@ -0,0 +1,10 @@
+<template>
+  <nut-calendar-card v-model="value" :first-day-of-week="1" @change="onChange"></nut-calendar-card>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(null);
+const onChange = (val: Date) => {
+  console.log(val);
+};
+</script>

packages/nutui-taro-demo/src/dentry/pages/calendarcard/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'CalendarCard'
+};

packages/nutui-taro-demo/src/dentry/pages/calendarcard/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <Demo>
+    <h2>{{ t('single') }}</h2>
+    <custom-wrapper>
+      <Single />
+    </custom-wrapper>
+
+    <h2>{{ t('multiple') }}</h2>
+    <custom-wrapper>
+      <Multiple />
+    </custom-wrapper>
+
+    <h2>{{ t('range') }}</h2>
+    <custom-wrapper>
+      <Range />
+    </custom-wrapper>
+
+    <h2>{{ t('week') }}</h2>
+    <custom-wrapper>
+      <Week />
+    </custom-wrapper>
+
+    <h2>{{ t('info') }}</h2>
+    <custom-wrapper>
+      <Info />
+    </custom-wrapper>
+
+    <h2>{{ t('first') }}</h2>
+    <custom-wrapper>
+      <First />
+    </custom-wrapper>
+
+    <h2>{{ t('customRange') }}</h2>
+    <custom-wrapper>
+      <CustomRange />
+    </custom-wrapper>
+
+    <h2>{{ t('disable') }}</h2>
+    <custom-wrapper>
+      <Disable />
+    </custom-wrapper>
+
+    <h2>{{ t('popup') }}</h2>
+    <custom-wrapper>
+      <Popup />
+    </custom-wrapper>
+
+    <h2>{{ t('ref') }}</h2>
+    <custom-wrapper>
+      <Ref />
+    </custom-wrapper>
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '../../../utils';
+import Single from './single.vue';
+import Multiple from './multiple.vue';
+import Range from './range.vue';
+import Week from './week.vue';
+import Info from './info.vue';
+import First from './first.vue';
+import CustomRange from './customRange.vue';
+import Disable from './disable.vue';
+import Popup from './popup.vue';
+import Ref from './ref.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    single: '选择单个日期',
+    multiple: '选择多个日期',
+    range: '选择范围',
+    week: '选择周',
+    info: '自定义日期信息（插槽）',
+    first: '自定义周起始日',
+    customRange: '自定义选择范围',
+    disable: '自定义禁止选择日期',
+    popup: '搭配 Popup 使用',
+    ref: '使用 Ref'
+  },
+  'en-US': {
+    single: 'Select a single date',
+    multiple: 'Select multiple dates',
+    range: 'Select a range',
+    week: 'Select a week',
+    info: 'Custom day info(slot)',
+    first: 'Custom week start day',
+    customRange: 'Custom selection range',
+    disable: 'Custom prohibition date selection',
+    popup: 'Use with Popup',
+    ref: 'Use Ref'
+  }
+});
+</script>

packages/nutui-taro-demo/src/dentry/pages/calendarcard/info.vue

@@ -0,0 +1,20 @@
+<template>
+  <nut-calendar-card v-model="value" @change="onChange">
+    <template #top="{ day }">
+      {{ day.date === 8 ? '☺' : '' }}
+    </template>
+    <template #default="{ day }">
+      {{ day.date <= 9 ? `0${day.date}` : day.date }}
+    </template>
+    <template #bottom="{ day }">
+      {{ day.date === 8 ? '节日' : '' }}
+    </template>
+  </nut-calendar-card>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(null);
+const onChange = (val: Date) => {
+  console.log(val);
+};
+</script>

packages/nutui-taro-demo/src/dentry/pages/calendarcard/multiple.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <nut-tag v-for="d in value" :key="d.getTime()" type="success">
+      {{ `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}` }}
+    </nut-tag>
+  </div>
+  <nut-calendar-card v-model="value" type="multiple" @change="onChange"></nut-calendar-card>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref([new Date('2023-01-01'), new Date('2023-01-03')]);
+const onChange = (val: Date) => {
+  console.log(val);
+};
+</script>

packages/nutui-taro-demo/src/dentry/pages/calendarcard/popup.vue

@@ -0,0 +1,16 @@
+<template>
+  <nut-cell @click="show = true">{{ value || 'null' }}</nut-cell>
+  <nut-popup v-model:visible="show" position="bottom">
+    <nut-calendar-card v-model="value" @change="onChange"></nut-calendar-card>
+    <nut-button block type="primary" @click="show = false">确认</nut-button>
+  </nut-popup>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const show = ref(false);
+const value = ref(null);
+const onChange = (val: Date) => {
+  console.log(val);
+};
+</script>

packages/nutui-taro-demo/src/dentry/pages/calendarcard/range.vue

@@ -0,0 +1,10 @@
+<template>
+  <nut-calendar-card v-model="value" type="range" @change="onChange"></nut-calendar-card>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref([]);
+const onChange = (val: Date) => {
+  console.log(val);
+};
+</script>

packages/nutui-taro-demo/src/dentry/pages/calendarcard/ref.vue

@@ -0,0 +1,17 @@
+<template>
+  <nut-space>
+    <nut-button @click="() => calendarCardRef.jump(1)">+ 1</nut-button>
+    <nut-button @click="() => calendarCardRef.jump(12)"> + 12 </nut-button>
+    <nut-button @click="() => calendarCardRef.jump(-12)"> - 12 </nut-button>
+    <nut-button @click="() => calendarCardRef.jumpTo(2023, 1)"> 2023 01 </nut-button>
+  </nut-space>
+  <nut-calendar-card ref="calendarCardRef" v-model="value" @change="onChange" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const calendarCardRef = ref();
+const value = ref(null);
+const onChange = (val: Date) => {
+  console.log(val);
+};
+</script>

packages/nutui-taro-demo/src/dentry/pages/calendarcard/single.vue

@@ -0,0 +1,10 @@
+<template>
+  <nut-calendar-card v-model="value" @change="onChange"></nut-calendar-card>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(new Date('2023-01-01'));
+const onChange = (val: Date) => {
+  console.log(val);
+};
+</script>

packages/nutui-taro-demo/src/dentry/pages/calendarcard/week.vue

@@ -0,0 +1,10 @@
+<template>
+  <nut-calendar-card v-model="value" type="week" @change="onChange"></nut-calendar-card>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref([]);
+const onChange = (val: Date) => {
+  console.log(val);
+};
+</script>

src/packages/__VUE/calendarcard/icon.taro.ts

@@ -0,0 +1,42 @@
+import { h } from 'vue';
+
+const left =
+  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNNi42MDUgOS40OWEuNzcxLjc3MSAwIDAgMSAwLS45OGwzLjYtNC4zNzJhLjc3MS43NzEgMCAwIDEgMS4xOS45ODFMOC4yIDlsMy4xOTcgMy44ODFhLjc3MS43NzEgMCAxIDEtMS4xOTEuOThsLTMuNi00LjM3eiIvPjwvc3ZnPg==';
+
+const right =
+  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTEuMzk2IDkuNDlhLjc3MS43NzEgMCAwIDAgMC0uOThsLTMuNi00LjM3MmEuNzcxLjc3MSAwIDAgMC0xLjE5MS45ODFMOS44IDlsLTMuMTk2IDMuODgxYS43NzEuNzcxIDAgMCAwIDEuMTkuOThsMy42LTQuMzd6Ii8+PC9zdmc+';
+
+const doubleLeft =
+  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTMuODUzIDQuMDI2YS43NzEuNzcxIDAgMCAxIC4xMiAxLjA4NUwxMC44NjQgOWwzLjExIDMuODg5YS43NzEuNzcxIDAgMSAxLTEuMjA0Ljk2M2wtMy40OTgtNC4zN2EuNzcxLjc3MSAwIDAgMSAwLS45NjRsMy40OTctNC4zNzFhLjc3MS43NzEgMCAwIDEgMS4wODQtLjEyem0tNS4yNDUgMGEuNzcxLjc3MSAwIDAgMSAuMTIgMS4wODVMNS42MTcgOWwzLjExMSAzLjg4OWEuNzcxLjc3MSAwIDAgMS0xLjIwNS45NjNsLTMuNDk3LTQuMzdhLjc3MS43NzEgMCAwIDEgMC0uOTY0bDMuNDk3LTQuMzcxYS43NzEuNzcxIDAgMCAxIDEuMDg1LS4xMnoiLz48L3N2Zz4=';
+
+const doubleRight =
+  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNNC4xNDcgMTMuOTc0YS43NzEuNzcxIDAgMCAxLS4xMi0xLjA4NUw3LjEzNiA5IDQuMDI4IDUuMTFhLjc3MS43NzEgMCAxIDEgMS4yMDQtLjk2M2wzLjQ5NyA0LjM3MWEuNzcxLjc3MSAwIDAgMSAwIC45NjRsLTMuNDk3IDQuMzcxYS43NzEuNzcxIDAgMCAxLTEuMDg0LjEyem01LjI0NSAwYS43NzEuNzcxIDAgMCAxLS4xMi0xLjA4NUwxMi4zODMgOSA5LjI3MiA1LjExYS43NzEuNzcxIDAgMSAxIDEuMjA1LS45NjNsMy40OTcgNC4zNzFhLjc3MS43NzEgMCAwIDEgMCAuOTY0bC0zLjQ5NyA0LjM3MWEuNzcxLjc3MSAwIDAgMS0xLjA4NS4xMnoiLz48L3N2Zz4=';
+
+const Icon = (url: string) => {
+  const style = {
+    background: `url('${url}') no-repeat center`,
+    backgroundSize: '100% 100%',
+    width: '18px',
+    height: '18px',
+    display: 'block'
+  };
+  return h('view', {
+    style
+  });
+};
+
+export const Left = () => {
+  return Icon(left);
+};
+
+export const Right = () => {
+  return Icon(right);
+};
+
+export const DoubleLeft = () => {
+  return Icon(doubleLeft);
+};
+
+export const DoubleRight = () => {
+  return Icon(doubleRight);
+};

src/packages/__VUE/calendarcard/icon.ts

@@ -0,0 +1,69 @@
+import { h } from 'vue';
+
+export const Left = () => {
+  return h(
+    'svg',
+    {
+      xmlns: 'http://www.w3.org/2000/svg',
+      width: '18',
+      height: '18',
+      viewBox: '0 0 18 18'
+    },
+    [
+      h('path', {
+        d: 'M6.605 9.49a.771.771 0 0 1 0-.98l3.6-4.372a.771.771 0 0 1 1.19.981L8.2 9l3.197 3.881a.771.771 0 1 1-1.191.98l-3.6-4.37Z'
+      })
+    ]
+  );
+};
+
+export const Right = () => {
+  return h(
+    'svg',
+    {
+      xmlns: 'http://www.w3.org/2000/svg',
+      width: '18',
+      height: '18',
+      viewBox: '0 0 18 18'
+    },
+    [
+      h('path', {
+        d: 'M11.396 9.49a.771.771 0 0 0 0-.98l-3.6-4.372a.771.771 0 0 0-1.191.981L9.8 9l-3.196 3.881a.771.771 0 0 0 1.19.98l3.6-4.37Z'
+      })
+    ]
+  );
+};
+
+export const DoubleLeft = () => {
+  return h(
+    'svg',
+    {
+      xmlns: 'http://www.w3.org/2000/svg',
+      width: '18',
+      height: '18',
+      viewBox: '0 0 18 18'
+    },
+    [
+      h('path', {
+        d: 'M13.853 4.026a.771.771 0 0 1 .12 1.085L10.864 9l3.11 3.889a.771.771 0 1 1-1.204.963L9.272 9.482a.771.771 0 0 1 0-.964l3.497-4.371a.771.771 0 0 1 1.084-.12Zm-5.245 0a.771.771 0 0 1 .12 1.085L5.617 9l3.111 3.889a.771.771 0 0 1-1.205.963L4.026 9.482a.771.771 0 0 1 0-.964l3.497-4.371a.771.771 0 0 1 1.085-.12Z'
+      })
+    ]
+  );
+};
+
+export const DoubleRight = () => {
+  return h(
+    'svg',
+    {
+      xmlns: 'http://www.w3.org/2000/svg',
+      width: '18',
+      height: '18',
+      viewBox: '0 0 18 18'
+    },
+    [
+      h('path', {
+        d: 'M4.147 13.974a.771.771 0 0 1-.12-1.085L7.136 9 4.028 5.11a.771.771 0 1 1 1.204-.963l3.497 4.371a.771.771 0 0 1 0 .964l-3.497 4.371a.771.771 0 0 1-1.084.12Zm5.245 0a.771.771 0 0 1-.12-1.085L12.383 9 9.272 5.11a.771.771 0 1 1 1.205-.963l3.497 4.371a.771.771 0 0 1 0 .964l-3.497 4.371a.771.771 0 0 1-1.085.12Z'
+      })
+    ]
+  );
+};