Merge pull request #181 from qianmoQ/feature-components

feat: support date picker

CHANGELOG.md

@@ -7,6 +7,7 @@ All notable changes to this project will be documented in this file. See [standa
 #### Core
 
 - add component documentation generation script
+- add publish ci
 
 #### QrCode
 
@@ -33,6 +34,14 @@ All notable changes to this project will be documented in this file. See [standa
 - feat: support quick times
 - feat: support format
 
+#### Color Picker
+
+- support disabled and readonly
+- support presetColors
+- support transparency
+- support hsl
+- support showPanel, showDropper, showTransparency, showFormat
+
 ### 2024.5.2 (2024-12-15)
 
 ### ✨ Features

configure/generate/component_doc.py

@@ -128,13 +128,14 @@ def parse_types_file(file_path: str) -> Tuple[List[Dict], List[Dict], List[Dict]
         for line in emits_content.split('\n'):
             line = line.strip()
             if line:
-                emit_match = re.match(r"\(e:\s*'([\w:-]+)'(?:\s*,\s*(\w+):\s*(\w+))?\):\s*void", line)
+                # 修改正则表达式以支持联合类型
+                emit_match = re.match(r"\(e:\s*'([\w:-]+)'(?:\s*,\s*(\w+):\s*([\w\[\],\s|]+))?\):\s*void", line)
                 if emit_match:
                     event_name = emit_match.group(1)
                     params = '-'
                     if emit_match.group(2) and emit_match.group(3):  # 如果有参数
                         param_name = emit_match.group(2)
-                        param_type = emit_match.group(3)
+                        param_type = emit_match.group(3).strip()  # 去除可能的空格
                         params = f'{param_name}: {param_type}'
 
                     emits.append({
@@ -357,7 +358,7 @@ def generate_markdown(component_name: str, props: List[Dict], emits: List[Dict],
         for p in props:
             default_value = "-" if p["default"].startswith("t(") and p["default"].endswith(")") or p["default"] == "undefined" else p["default"]
             description = p['description'].replace("'", "`")
-            row = f"        ['{p['name']}', '{description}', '{p['type']}', '{default_value}', '{p['list']}']"
+            row = f"        ['{p['name']}', '{description}', '{p['type']}', '{default_value.replace('\n}', '').replace('\'', '')}', '{p['list']}']"
             prop_rows.append(row)
 
         markdown += ",\n".join(prop_rows)

docs/.vitepress/config.js

@@ -223,7 +223,8 @@ export default {
                         {text: 'Input Tag', link: 'form/input-tag', icon: '/components/form/input-tag.svg', version: '2024.5.2'},
                         {text: 'Map', link: 'form/map', icon: '/components/form/map.svg', version: '2024.5.2'},
                         {text: 'Time Picker', link: 'form/time-picker', icon: '/components/form/time-picker.svg', version: '2024.5.3'},
-                        {text: 'Color Picker', link: 'form/color-picker', icon: '/components/form/color-picker.svg', version: '2024.5.3'}
+                        {text: 'Color Picker', link: 'form/color-picker', icon: '/components/form/color-picker.svg', version: '2024.5.3'},
+                        {text: 'Date Picker', link: 'form/date-picker', icon: '/components/form/date-picker.svg', version: '2024.5.3'}
                     ]
 
                     return {

docs/components/form/date-picker.md

@@ -0,0 +1,209 @@
+---
+title: Shadcn DatePicker
+---
+
+# Introduction
+
+This document describes the features and usage of the ShadcnDatePicker component.
+
+## Usage
+
+::: raw
+
+<CodeRunner title="Usage">
+    <ShadcnDatePicker v-model="value" />
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <ShadcnDatePicker v-model="value" />
+</template>
+```
+
+:::
+
+## Type
+
+::: raw
+
+<CodeRunner title="Type">
+    <ShadcnDatePicker v-model="value" type="date" />
+    <ShadcnDatePicker v-model="value" type="range" />
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <ShadcnDatePicker v-model="value" type="date" />
+    <ShadcnDatePicker v-model="value" type="range" />
+</template>
+```
+
+:::
+
+## Placeholder
+
+::: raw
+
+<CodeRunner title="Placeholder">
+    <ShadcnDatePicker v-model="value" placeholder="Enter string" />
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <ShadcnDatePicker v-model="value" placeholder="Enter string" />
+</template>
+```
+
+:::
+
+## Disabled
+
+::: raw
+
+<CodeRunner title="Disabled">
+    <ShadcnDatePicker v-model="value" disabled />
+    <ShadcnDatePicker v-model="value" :disabled="false" />
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <ShadcnDatePicker v-model="value" disabled />
+    <ShadcnDatePicker v-model="value" :disabled="false" />
+</template>
+```
+
+:::
+
+## Readonly
+
+::: raw
+
+<CodeRunner title="Readonly">
+    <ShadcnDatePicker v-model="value" readonly />
+    <ShadcnDatePicker v-model="value" :readonly="false" />
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <ShadcnDatePicker v-model="value" readonly />
+    <ShadcnDatePicker v-model="value" :readonly="false" />
+</template>
+```
+
+:::
+
+## Format
+
+::: raw
+
+<CodeRunner title="Format">
+    <ShadcnDatePicker v-model="value" format="YYYY-MM-DD" />
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <ShadcnDatePicker v-model="value" format="YYYY-MM-DD" />
+</template>
+```
+
+:::
+
+## Clearable
+
+::: raw
+
+<CodeRunner title="Clearable">
+    <ShadcnDatePicker v-model="value" clearable />
+    <ShadcnDatePicker v-model="value" :clearable="false" />
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <ShadcnDatePicker v-model="value" clearable />
+    <ShadcnDatePicker v-model="value" :clearable="false" />
+</template>
+```
+
+:::
+
+## Show shortcuts
+
+::: raw
+
+<CodeRunner title="Show shortcuts">
+    <ShadcnDatePicker v-model="value" showShortcuts />
+    <ShadcnDatePicker v-model="value" :showShortcuts="false" />
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <ShadcnDatePicker v-model="value" showShortcuts />
+    <ShadcnDatePicker v-model="value" :showShortcuts="false" />
+</template>
+```
+
+:::
+## DatePicker Props
+
+<ApiTable title="Props"
+    :headers="['Attribute', 'Description', 'Type', 'Default Value', 'List']"
+    :columns="[
+        ['modelValue', 'modelValue value', 'Date | string', '-', 'Date, string'],
+        ['type', 'type value', 'date | range', 'date', 'date, range'],
+        ['placeholder', 'placeholder value', 'string', '-', '-'],
+        ['disabled', 'disabled value', 'boolean', 'false', '-'],
+        ['readonly', 'readonly value', 'boolean', 'false', '-'],
+        ['format', 'format value', 'string', 'YYYY-MM-DD', '-'],
+        ['clearable', 'clearable value', 'boolean', 'true', '-'],
+        ['showShortcuts', 'showShortcuts value', 'boolean', 'true', '-']
+    ]">
+</ApiTable>
+
+## DatePicker Events
+
+<ApiTable title="Events"
+    :headers="['Event', 'Description', 'Callback Parameters']"
+    :columns="[
+        ['update:modelValue', 'Triggered when update:modelValue', 'value: string | [string, string]'],
+        ['on-change', 'Triggered when on change', 'value: string | [string, string]']
+    ]">
+</ApiTable>
+
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const value = ref('')
+</script>

packages/index.ts

@@ -95,6 +95,7 @@ import { ShadcnDataFilter, ShadcnHierarchicalDataFilter } from '@/ui/data-filter
 import ShadcnQrCode from '@/ui/qrcode/ShadcnQrCode.vue'
 import { ShadcnTimePicker } from '@/ui/time-picker'
 import { ShadcnColorPicker } from '@/ui/color-picker'
+import { ShadcnDatePicker } from '@/ui/date-picker'
 
 let components = [
     ShadcnButton,
@@ -186,7 +187,8 @@ let components = [
     ShadcnDataFilter, ShadcnHierarchicalDataFilter,
     ShadcnQrCode,
     ShadcnTimePicker,
-    ShadcnColorPicker
+    ShadcnColorPicker,
+    ShadcnDatePicker
 ]
 
 interface InstallOptions
@@ -314,6 +316,7 @@ export { ShadcnDataFilter, ShadcnHierarchicalDataFilter } from '@/ui/data-filter
 export { ShadcnQrCode } from '@/ui/qrcode'
 export { ShadcnTimePicker } from '@/ui/time-picker'
 export { ShadcnColorPicker } from '@/ui/color-picker'
+export { ShadcnDatePicker } from '@/ui/date-picker'
 
 // Export functions
 export { fnToString, fnToFunction } from '@/utils/formatter'

src/App.vue

@@ -1,18 +1,20 @@
 <template>
   <div class="space-y-4 p-12">
-    <div>Selected color: {{ selectedColor }}</div>
-    <ShadcnColorPicker v-model="selectedColor" color="#000000" @change="onColorChange"/>
-    <ShadcnColorPicker v-model="selectedColor" disabled/>
-    <ShadcnColorPicker v-model="selectedColor" readonly/>
-    <ShadcnColorPicker v-model="selectedColor" :preset-colors="['#ff0000', '#00ff00', '#0000ff']"/>
+    <div>Selected date: {{ selectDate }}</div>
+    <ShadcnDatePicker v-model="selectDate" @on-change="onChange"/>
+    <ShadcnDatePicker v-model="selectDate" disabled @on-change="onChange"/>
+    <ShadcnDatePicker v-model="selectDate" readonly @on-change="onChange"/>
+    <ShadcnDatePicker v-model="selectDate" format="YYYY/MM/DD" @on-change="onChange"/>
+    <ShadcnDatePicker v-model="selectDate" type="range" @on-change="onChange"/>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 
-const selectedColor = ref('#000000')
-const onColorChange = (color: string) => {
-  console.log('Selected color:', color)
+const selectDate = ref(null)
+
+const onChange = (value: string) => {
+  console.log('Selected date:', value)
 }
 </script>

src/locales/en-US.ts

@@ -197,5 +197,30 @@ export default {
             transparency: 'Transparency',
             format: 'Format'
         }
+    },
+    datePicker: {
+        text: {
+            sunday: 'Sun',
+            monday: 'Mon',
+            tuesday: 'Tue',
+            wednesday: 'Wed',
+            thursday: 'Thu',
+            friday: 'Fri',
+            saturday: 'Sat',
+            year: 'Year',
+            month: 'Month',
+            today: 'Today',
+            yesterday: 'Yesterday',
+            thisWeek: 'This week',
+            lastWeek: 'Last week',
+            thisMonth: 'This month',
+            lastMonth: 'Last month',
+            last3Months: 'Last 3 months',
+            thisYear: 'This year',
+            lastYear: 'Last year',
+        },
+        placeholder: {
+            date: 'Please select a date'
+        }
     }
-}
+}