@a2simcode/ui 0.0.70 → 0.0.71

package/docs/components/meta/date.ts

@@ -0,0 +1,275 @@
+export default {
+  "props": [
+    {
+      "name": "modelValue",
+      "description": "绑定值",
+      "type": "string | number | Date | Array<string | number | Date>"
+    },
+    {
+      "name": "selectType",
+      "description": "显示类型",
+      "type": "'year' | 'month' | 'date' | 'dates' | 'week' | 'datetime' | 'datetimerange' | 'daterange' | 'monthrange'",
+      "default": "'date'"
+    },
+    {
+      "name": "readonly",
+      "description": "是否只读",
+      "type": "boolean",
+      "default": "false"
+    },
+    {
+      "name": "disabled",
+      "description": "是否禁用",
+      "type": "boolean",
+      "default": "false"
+    },
+    {
+      "name": "editable",
+      "description": "文本框可输入",
+      "type": "boolean",
+      "default": "true"
+    },
+    {
+      "name": "clearable",
+      "description": "是否显示清除按钮",
+      "type": "boolean",
+      "default": "true"
+    },
+    {
+      "name": "size",
+      "description": "输入框尺寸",
+      "type": "'large' | 'default' | 'small'",
+      "default": "'default'"
+    },
+    {
+      "name": "placeholder",
+      "description": "非范围选择时的占位内容",
+      "type": "string",
+      "default": "''"
+    },
+    {
+      "name": "startPlaceholder",
+      "description": "范围选择时开始日期的占位内容",
+      "type": "string",
+      "default": "''"
+    },
+    {
+      "name": "endPlaceholder",
+      "description": "范围选择时结束日期的占位内容",
+      "type": "string",
+      "default": "''"
+    },
+    {
+      "name": "format",
+      "description": "显示在输入框中的格式",
+      "type": "string"
+    },
+    {
+      "name": "valueFormat",
+      "description": "绑定值的格式。 不指定则绑定值为 Date 对象",
+      "type": "string"
+    },
+    {
+      "name": "rangeSeparator",
+      "description": "选择范围时的分隔符",
+      "type": "string"
+    },
+    {
+      "name": "defaultValue",
+      "description": "可选，选择器打开时默认显示的时间",
+      "type": "Date | Array<Date>"
+    },
+    {
+      "name": "defaultTime",
+      "description": "范围选择时选中日期所使用的当日内具体时刻",
+      "type": "Date | Array<Date>"
+    },
+    {
+      "name": "shortcuts",
+      "description": "设置快捷选项，需要传入数组对象",
+      "type": "Array<{ text: string; value: Date | Function }>"
+    },
+    {
+      "name": "disabledDate",
+      "description": "一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值",
+      "type": "(date: Date) => boolean"
+    },
+    {
+      "name": "teleported",
+      "description": "是否将 date-picker 的下拉列表插入至 body 元素",
+      "type": "boolean",
+      "default": "true"
+    },
+    {
+      "name": "prefixIcon",
+      "description": "自定义头部图标",
+      "type": "string | Component"
+    },
+    {
+      "name": "clearIcon",
+      "description": "自定义清空图标",
+      "type": "string | Component"
+    }
+  ],
+  "events": [
+    {
+      "name": "update:modelValue",
+      "description": "绑定值更新时触发",
+      "type": "(val: string | number | Date | Array<string | number | Date>) => void"
+    },
+    {
+      "name": "change",
+      "description": "用户确认选定的值时触发",
+      "type": "(val: string | number | Date | Array<string | number | Date>) => void"
+    },
+    {
+      "name": "blur",
+      "description": "在组件 Input 失去焦点时触发",
+      "type": "(e: FocusEvent) => void"
+    },
+    {
+      "name": "focus",
+      "description": "在组件 Input 获得焦点时触发",
+      "type": "(e: FocusEvent) => void"
+    },
+    {
+      "name": "calendar-change",
+      "description": "在日历所选日期更改时触发",
+      "type": "(val: [Date, Date | null]) => void"
+    },
+    {
+      "name": "panel-change",
+      "description": "当日期面板改变时触发",
+      "type": "(date: Date, mode: string, view: string) => void"
+    },
+    {
+      "name": "visible-change",
+      "description": "当 DatePicker 的下拉列表出现/消失时触发",
+      "type": "(visibility: boolean) => void"
+    }
+  ],
+  "slots": [
+    {
+      "name": "default",
+      "description": "自定义内容"
+    },
+    {
+      "name": "range-separator",
+      "description": "自定义范围分隔符内容"
+    }
+  ],
+  "methods": [
+    {
+      "name": "ref",
+      "description": "获取 el-date-picker 实例",
+      "type": "() => any"
+    }
+  ],
+  "types": [
+    {
+      "name": "DateProps",
+      "properties": [
+        {
+          "name": "modelValue",
+          "type": "string | number | Date | Array<string | number | Date>",
+          "description": "绑定值"
+        },
+        {
+          "name": "selectType",
+          "type": "'year' | 'month' | 'date' | 'dates' | 'week' | 'datetime' | 'datetimerange' | 'daterange' | 'monthrange'",
+          "description": "显示类型"
+        },
+        {
+          "name": "readonly",
+          "type": "boolean",
+          "description": "是否只读"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "description": "是否禁用"
+        },
+        {
+          "name": "editable",
+          "type": "boolean",
+          "description": "文本框可输入"
+        },
+        {
+          "name": "clearable",
+          "type": "boolean",
+          "description": "是否显示清除按钮"
+        },
+        {
+          "name": "size",
+          "type": "'large' | 'default' | 'small'",
+          "description": "输入框尺寸"
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "description": "非范围选择时的占位内容"
+        },
+        {
+          "name": "startPlaceholder",
+          "type": "string",
+          "description": "范围选择时开始日期的占位内容"
+        },
+        {
+          "name": "endPlaceholder",
+          "type": "string",
+          "description": "范围选择时结束日期的占位内容"
+        },
+        {
+          "name": "format",
+          "type": "string",
+          "description": "显示在输入框中的格式"
+        },
+        {
+          "name": "valueFormat",
+          "type": "string",
+          "description": "绑定值的格式。 不指定则绑定值为 Date 对象"
+        },
+        {
+          "name": "rangeSeparator",
+          "type": "string",
+          "description": "选择范围时的分隔符"
+        },
+        {
+          "name": "defaultValue",
+          "type": "Date | Array<Date>",
+          "description": "可选，选择器打开时默认显示的时间"
+        },
+        {
+          "name": "defaultTime",
+          "type": "Date | Array<Date>",
+          "description": "范围选择时选中日期所使用的当日内具体时刻"
+        },
+        {
+          "name": "shortcuts",
+          "type": "Array<{ text: string; value: Date | Function }>",
+          "description": "设置快捷选项，需要传入数组对象"
+        },
+        {
+          "name": "disabledDate",
+          "type": "(date: Date) => boolean",
+          "description": "一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值"
+        },
+        {
+          "name": "teleported",
+          "type": "boolean",
+          "description": "是否将 date-picker 的下拉列表插入至 body 元素"
+        },
+        {
+          "name": "prefixIcon",
+          "type": "string | Component",
+          "description": "自定义头部图标"
+        },
+        {
+          "name": "clearIcon",
+          "type": "string | Component",
+          "description": "自定义清空图标"
+        }
+      ]
+    }
+  ]
+}

package/docs/examples/date/basic.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="demo-date-basic">
+    <div class="block">
+      <span class="demonstration">Default</span>
+      <j-date v-model="value1" placeholder="Pick a day" />
+    </div>
+    <div class="block">
+      <span class="demonstration">Picker with quick options</span>
+      <j-date
+        v-model="value2"
+        placeholder="Pick a day"
+        :disabled-date="disabledDate"
+        :shortcuts="shortcuts"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+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-basic {
+  display: flex;
+  flex-wrap: wrap;
+}
+.demo-date-basic .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px var(--el-border-color);
+  flex: 1;
+}
+.demo-date-basic .block:last-child {
+  border-right: none;
+}
+.demo-date-basic .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+</style>

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

@@ -0,0 +1,59 @@
+<template>
+  <div class="demo-date-default">
+    <div class="block">
+      <span class="demonstration">Default Value</span>
+      <j-date
+        v-model="value1"
+        select-type="date"
+        placeholder="Pick a day"
+        :default-value="new Date(2010, 9, 1)"
+      />
+    </div>
+    <div class="block">
+      <span class="demonstration">Default Time for Range</span>
+      <j-date
+        v-model="value2"
+        select-type="datetimerange"
+        start-placeholder="Start Date"
+        end-placeholder="End Date"
+        :default-time="defaultTime"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('')
+const value2 = ref('')
+
+const defaultTime = [
+  new Date(2000, 1, 1, 12, 0, 0),
+  new Date(2000, 2, 1, 8, 0, 0),
+]
+</script>
+
+<style scoped>
+.demo-date-default {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+.demo-date-default .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px var(--el-border-color);
+  flex: 1;
+  min-width: 300px;
+}
+.demo-date-default .block:last-child {
+  border-right: none;
+}
+.demo-date-default .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+</style>

package/docs/examples/date/format.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="demo-date-format">
+    <div class="block">
+      <span class="demonstration">Format</span>
+      <div class="demonstration-value">Value: {{ value1 }}</div>
+      <j-date
+        v-model="value1"
+        select-type="date"
+        placeholder="Pick a day"
+        format="YYYY/MM/DD"
+        value-format="YYYY-MM-DD"
+      />
+    </div>
+    <div class="block">
+      <span class="demonstration">Timestamp</span>
+      <div class="demonstration-value">Value: {{ value2 }}</div>
+      <j-date
+        v-model="value2"
+        select-type="date"
+        placeholder="Pick a day"
+        format="YYYY/MM/DD"
+        value-format="x"
+      />
+    </div>
+    <div class="block">
+      <span class="demonstration">Month Format</span>
+      <div class="demonstration-value">Value: {{ value3 }}</div>
+      <j-date
+        v-model="value3"
+        select-type="month"
+        placeholder="Pick a month"
+        format="MMM"
+        value-format="M"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('')
+const value2 = ref('')
+const value3 = ref('')
+</script>
+
+<style scoped>
+.demo-date-format {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+.demo-date-format .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px var(--el-border-color);
+  flex: 1;
+  min-width: 300px;
+}
+.demo-date-format .block:last-child {
+  border-right: none;
+}
+.demo-date-format .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+.demo-date-format .demonstration-value {
+  display: block;
+  color: var(--el-text-color-primary);
+  font-size: 12px;
+  margin-bottom: 10px;
+}
+</style>

package/docs/examples/date/range.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="demo-date-range">
+    <div class="block">
+      <span class="demonstration">Date Range</span>
+      <j-date
+        v-model="value1"
+        select-type="daterange"
+        range-separator="To"
+        start-placeholder="Start date"
+        end-placeholder="End date"
+      />
+    </div>
+    <div class="block">
+      <span class="demonstration">Datetime Range</span>
+      <j-date
+        v-model="value2"
+        select-type="datetimerange"
+        range-separator="To"
+        start-placeholder="Start date"
+        end-placeholder="End date"
+      />
+    </div>
+    <div class="block">
+      <span class="demonstration">Month Range</span>
+      <j-date
+        v-model="value3"
+        select-type="monthrange"
+        range-separator="To"
+        start-placeholder="Start month"
+        end-placeholder="End month"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('')
+const value2 = ref('')
+const value3 = ref('')
+</script>
+
+<style scoped>
+.demo-date-range {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+.demo-date-range .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px var(--el-border-color);
+  flex: 1;
+  min-width: 300px;
+}
+.demo-date-range .block:last-child {
+  border-right: none;
+}
+.demo-date-range .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+</style>

package/docs/examples/date/types.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="demo-date-types">
+    <div class="block">
+      <span class="demonstration">Week</span>
+      <j-date
+        v-model="value1"
+        select-type="week"
+        format="[Week] ww"
+        placeholder="Pick a week"
+      />
+    </div>
+    <div class="block">
+      <span class="demonstration">Month</span>
+      <j-date
+        v-model="value2"
+        select-type="month"
+        placeholder="Pick a month"
+      />
+    </div>
+    <div class="block">
+      <span class="demonstration">Year</span>
+      <j-date
+        v-model="value3"
+        select-type="year"
+        placeholder="Pick a year"
+      />
+    </div>
+    <div class="block">
+      <span class="demonstration">Dates</span>
+      <j-date
+        v-model="value4"
+        select-type="dates"
+        placeholder="Pick one or more dates"
+      />
+    </div>
+    <div class="block">
+      <span class="demonstration">Datetime</span>
+      <j-date
+        v-model="value5"
+        select-type="datetime"
+        placeholder="Select date and time"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value1 = ref('')
+const value2 = ref('')
+const value3 = ref('')
+const value4 = ref('')
+const value5 = ref('')
+</script>
+
+<style scoped>
+.demo-date-types {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+.demo-date-types .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px var(--el-border-color);
+  flex: 1;
+  min-width: 300px;
+}
+.demo-date-types .block:last-child {
+  border-right: none;
+}
+.demo-date-types .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+</style>