@phelan/design 0.0.1

package/docs/examples/date-picker/default.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="demo-date-picker">
+    <div class="block">
+      <span class="demonstration">Emits Date object</span>
+      <div class="demonstration">Value: {{ value1 }}</div>
+      <m-date-picker
+        v-model="value1"
+        type="date"
+        placeholder="Pick a Date"
+        format="YYYY/MM/DD"
+      />
+    </div>
+    <div class="block">
+      <span class="demonstration">Use value-format</span>
+      <div class="demonstration">Value：{{ value2 }}</div>
+      <m-date-picker
+        v-model="value2"
+        type="date"
+        placeholder="Pick a Date"
+        format="YYYY/MM/DD"
+        value-format="YYYY-MM-DD"
+      />
+    </div>
+    <div class="block">
+      <span class="demonstration">Timestamp</span>
+      <div class="demonstration">Value：{{ value3 }}</div>
+      <m-date-picker
+        v-model="value3"
+        type="date"
+        placeholder="Pick a Date"
+        format="YYYY/MM/DD"
+        value-format="x"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value1 = ref('');
+const value2 = ref('');
+const value3 = ref('');
+</script>
+
+<style scoped>
+.demo-date-picker {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  flex-wrap: wrap;
+}
+
+.demo-date-picker .block {
+  padding: 1.5rem 0;
+  text-align: center;
+  border-right: solid 1px var(--m-border-color);
+  flex: 1;
+  min-width: 300px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.demo-date-picker .block:last-child {
+  border-right: none;
+}
+
+.demo-date-picker .demonstration {
+  display: block;
+  color: var(--m-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 1rem;
+  width: 100%;
+}
+
+@media screen and (max-width: 1200px) {
+  .demo-date-picker .block {
+    flex: 0 0 50%;
+    border-bottom: solid 1px var(--m-border-color);
+  }
+
+  .demo-date-picker .block:nth-child(2n) {
+    border-right: none;
+  }
+
+  .demo-date-picker .block:nth-last-child(-n + 2):nth-child(2n + 1),
+  .demo-date-picker .block:last-child {
+    border-bottom: none;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .demo-date-picker .block {
+    flex: 0 0 100%;
+    padding: 1rem 0;
+    min-width: auto;
+    border-right: none;
+    border-bottom: solid 1px var(--m-border-color);
+  }
+
+  .demo-date-picker .block:last-child {
+    border-bottom: none;
+  }
+}
+</style>

package/docs/examples/date-picker/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="demo-date-picker">
+    <div class="block">
+      <span class="demonstration">Default</span>
+      <m-date-picker
+        v-model="value1"
+        type="date"
+        placeholder="请选择日期"
+      />
+    </div>
+    <div class="block">
+      <span class="demonstration">Picker with quick options</span>
+      <m-date-picker
+        v-model="value2"
+        type="date"
+        placeholder="请选择日期"
+        :disabled-date="disabledDate"
+        :shortcuts="shortcuts"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value1 = ref('');
+const value2 = ref('');
+
+const shortcuts = [
+  {
+    text: 'Today',
+    value: new Date(),
+  },
+  {
+    text: 'Yesterday',
+    value: () => {
+      const date = new Date();
+      date.setTime(date.getTime() - 3600 * 1000 * 24);
+      return date;
+    },
+  },
+  {
+    text: 'A week ago',
+    value: () => {
+      const date = new Date();
+      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+      return date;
+    },
+  },
+];
+
+const disabledDate = (time: Date) => {
+  return time.getTime() > Date.now();
+};
+</script>
+
+<style scoped>
+.demo-date-picker {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  flex-wrap: wrap;
+}
+
+.demo-date-picker .block {
+  padding: 1.5rem 0;
+  text-align: center;
+  border-right: solid 1px var(--el-border-color);
+  flex: 1;
+  min-width: 300px;
+}
+
+.demo-date-picker .block:last-child {
+  border-right: none;
+}
+
+.demo-date-picker .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 1rem;
+}
+
+@media screen and (max-width: 768px) {
+  .demo-date-picker .block {
+    flex: 0 0 100%;
+    padding: 1rem 0;
+    min-width: auto;
+    border-right: none;
+    border-bottom: solid 1px var(--el-border-color);
+  }
+
+  .demo-date-picker .block:last-child {
+    border-bottom: none;
+  }
+}
+</style>

package/docs/examples/date-picker/otherUnits.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="demo-date-picker">
+    <div class="container">
+      <div class="block">
+        <span class="demonstration">Week</span>
+        <m-date-picker
+          v-model="value1"
+          type="week"
+          format="[Week] ww"
+          placeholder="Pick a week"
+        />
+      </div>
+      <div class="block">
+        <span class="demonstration">Dates</span>
+        <m-date-picker
+          v-model="value2"
+          type="dates"
+          placeholder="Pick one or more dates"
+        />
+      </div>
+    </div>
+    <div class="container">
+      <div class="block">
+        <span class="demonstration">Year</span>
+        <m-date-picker
+          v-model="value3"
+          type="year"
+          placeholder="Pick a year"
+        />
+      </div>
+      <div class="block">
+        <span class="demonstration">Years</span>
+        <m-date-picker
+          v-model="value4"
+          type="years"
+          placeholder="Pick one or more years"
+        />
+      </div>
+    </div>
+    <div class="container">
+      <div class="block">
+        <span class="demonstration">Month</span>
+        <m-date-picker
+          v-model="value5"
+          type="month"
+          placeholder="Pick a month"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value1 = ref('');
+const value2 = ref('');
+const value3 = ref('');
+const value4 = ref('');
+const value5 = ref('');
+const value6 = ref('');
+</script>
+
+<style scoped>
+.demo-date-picker {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  flex-wrap: wrap;
+}
+
+.demo-date-picker .container {
+  flex: 1;
+  min-width: 300px;
+  border-right: solid 1px var(--m-border-color);
+}
+
+.demo-date-picker .container:last-child {
+  border-right: none;
+}
+
+.demo-date-picker .block {
+  padding: 1.5rem 0;
+  text-align: center;
+}
+
+.demo-date-picker .container .block:last-child {
+  border-top: solid 1px var(--m-border-color);
+}
+
+.demo-date-picker .demonstration {
+  display: block;
+  color: var(--m-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 1rem;
+}
+
+@media screen and (max-width: 768px) {
+  .demo-date-picker .container {
+    flex: 0 0 100%;
+    min-width: auto;
+    border-right: none;
+    border-bottom: solid 1px var(--m-border-color);
+  }
+
+  .demo-date-picker .container:last-child {
+    border-bottom: none;
+  }
+
+  .demo-date-picker .block {
+    padding: 1rem 0;
+  }
+
+  .demo-date-picker .container .block:last-child {
+    border-top: solid 1px var(--m-border-color);
+  }
+}
+</style>

package/docs/examples/date-picker/periodTime.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="demo-date-picker">
+    <div class="block">
+      <span class="demonstration">Default</span>
+      <m-date-picker
+        v-model="value1"
+        type="daterange"
+        range-separator="-"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      />
+    </div>
+    <div class="block">
+      <span class="demonstration">With quick options</span>
+      <m-date-picker
+        v-model="value2"
+        type="daterange"
+        unlink-panels
+        range-separator="-"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        :shortcuts="shortcuts"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value1 = ref('');
+const value2 = ref('');
+
+const shortcuts = [
+  {
+    text: 'Last week',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      return [start, end];
+    },
+  },
+  {
+    text: 'Last month',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      return [start, end];
+    },
+  },
+  {
+    text: 'Last 3 months',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+      return [start, end];
+    },
+  },
+];
+</script>
+
+<style scoped>
+.demo-date-picker {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  flex-wrap: wrap;
+}
+
+.demo-date-picker .block {
+  padding: 1.5rem 0;
+  text-align: center;
+  border-right: solid 1px var(--m-border-color);
+  flex: 1;
+  min-width: 400px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.demo-date-picker .block:last-child {
+  border-right: none;
+}
+
+.demo-date-picker .demonstration {
+  display: block;
+  color: var(--m-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 1rem;
+}
+
+@media screen and (max-width: 1200px) {
+  .demo-date-picker .block {
+    flex: 0 0 100%;
+    padding: 1rem 0;
+    min-width: auto;
+    border-right: none;
+    border-bottom: solid 1px var(--m-border-color);
+  }
+
+  .demo-date-picker .block:last-child {
+    border-bottom: none;
+  }
+}
+</style>

package/docs/examples/date-time-picker/default.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="demo-datetime-picker">
+    <div class="block">
+      <span class="demonstration">Start and end date time 12:00:00</span>
+      <m-date-picker
+        v-model="value1"
+        type="datetimerange"
+        start-placeholder="Start Date"
+        end-placeholder="End Date"
+        :default-time="defaultTime1"
+      />
+    </div>
+    <div class="block">
+      <span class="demonstration"> Start date time 12:00:00, end date time 08:00:00 </span>
+      <m-date-picker
+        v-model="value2"
+        type="datetimerange"
+        start-placeholder="Start Date"
+        end-placeholder="End Date"
+        :default-time="defaultTime2"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value1 = ref('');
+const value2 = ref('');
+
+const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00'
+const defaultTime2: [Date, Date] = [new Date(2000, 1, 1, 12, 0, 0), new Date(2000, 2, 1, 8, 0, 0)]; // '12:00:00', '08:00:00'
+</script>
+
+<style scoped>
+.demo-datetime-picker {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  flex-wrap: wrap;
+}
+
+.block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px var(--el-border-color);
+  flex: 1;
+  min-width: 300px;
+}
+
+.block:last-child {
+  border-right: none;
+}
+
+.block .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+@media (max-width: 768px) {
+  .block {
+    flex: 100%;
+    border-right: none;
+    border-bottom: solid 1px var(--el-border-color);
+  }
+
+  .block:last-child {
+    border-bottom: none;
+  }
+
+  :deep(.el-date-editor.el-input) {
+    width: 100%;
+  }
+
+  :deep(.el-date-editor.el-input__wrapper) {
+    width: 100%;
+    max-width: 300px;
+  }
+}
+</style>

package/docs/examples/date-time-picker/format.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="demo-datetime-picker">
+    <div class="block">
+      <span class="demonstration">Emits Date object</span>
+      <div class="demonstration">Value: {{ value1 }}</div>
+      <m-date-picker
+        v-model="value1"
+        type="datetime"
+        placeholder="Pick a Date"
+        format="YYYY/MM/DD HH:mm:ss"
+      />
+    </div>
+    <div class="block">
+      <span class="demonstration">Use value-format</span>
+      <div class="demonstration">Value：{{ value2 }}</div>
+      <m-date-picker
+        v-model="value2"
+        type="datetime"
+        placeholder="Pick a Date"
+        format="YYYY/MM/DD hh:mm:ss"
+        value-format="YYYY-MM-DD h:m:s a"
+      />
+    </div>
+    <div class="block">
+      <span class="demonstration">Timestamp</span>
+      <div class="demonstration">Value：{{ value3 }}</div>
+      <m-date-picker
+        v-model="value3"
+        type="datetime"
+        placeholder="Pick a Date"
+        format="YYYY/MM/DD hh:mm:ss"
+        value-format="x"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value1 = ref('');
+const value2 = ref('');
+const value3 = ref('');
+</script>
+
+<style scoped>
+.demo-datetime-picker {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  flex-wrap: wrap;
+}
+.demo-datetime-picker .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px var(--el-border-color);
+  flex: 1;
+  min-width: 300px;
+}
+.demo-datetime-picker .block:last-child {
+  border-right: none;
+}
+.demo-datetime-picker .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+@media (max-width: 768px) {
+  .demo-datetime-picker .block {
+    flex: 100%;
+    border-right: none;
+    border-bottom: solid 1px var(--el-border-color);
+  }
+
+  .demo-datetime-picker .block:last-child {
+    border-bottom: none;
+  }
+
+  :deep(.el-date-editor.el-input) {
+    width: 100%;
+  }
+
+  :deep(.el-date-editor.el-input__wrapper) {
+    width: 100%;
+    max-width: 300px;
+  }
+}
+</style>

package/docs/examples/date-time-picker/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="demo-datetime-picker">
+    <div class="block">
+      <span class="demonstration">Default</span>
+      <m-date-picker
+        v-model="value1"
+        type="datetime"
+        placeholder="请选择日期"
+        :clearable="true"
+      />
+    </div>
+    <div class="block">
+      <span class="demonstration">With shortcuts</span>
+      <m-date-picker
+        v-model="value2"
+        type="datetime"
+        placeholder="请选择日期"
+        :shortcuts="shortcuts"
+        :arrow-control="true"
+      />
+    </div>
+    <div class="block">
+      <span class="demonstration">With default time</span>
+      <m-date-picker
+        v-model="value3"
+        type="datetime"
+        placeholder="请选择日期"
+        :default-time="defaultTime"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value1 = ref('');
+const value2 = ref('');
+const value3 = ref('');
+const defaultTime = new Date(2000, 1, 1, 12, 0, 0);
+
+const shortcuts = [
+  {
+    text: 'Today',
+    value: new Date(),
+  },
+  {
+    text: 'Yesterday',
+    value: () => {
+      const date = new Date();
+      date.setDate(date.getDate() - 1);
+      return date;
+    },
+  },
+  {
+    text: 'A week ago',
+    value: () => {
+      const date = new Date();
+      date.setDate(date.getDate() - 7);
+      return date;
+    },
+  },
+];
+</script>
+
+<style scoped>
+.demo-datetime-picker {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  flex-wrap: wrap;
+}
+.demo-datetime-picker .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px var(--el-border-color);
+  flex: 1;
+  min-width: 300px;
+}
+.demo-datetime-picker .block:last-child {
+  border-right: none;
+}
+.demo-datetime-picker .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+@media (max-width: 768px) {
+  .demo-datetime-picker .block {
+    flex: 100%;
+    border-right: none;
+    border-bottom: solid 1px var(--el-border-color);
+  }
+
+  .demo-datetime-picker .block:last-child {
+    border-bottom: none;
+  }
+
+  :deep(.el-date-editor.el-input) {
+    width: 100%;
+  }
+
+  :deep(.el-date-editor.el-input__wrapper) {
+    width: 100%;
+    max-width: 300px;
+  }
+}
+</style>