@a2simcode/ui 0.0.257 → 0.0.258

package/docs/examples/data-panel/basic.vue

@@ -1,110 +1,110 @@
-<template>
-  <div class="data-panel-demo">
-    <div class="demo-item">
-      <p>基础用法 - 带标题的面板:</p>
-      <j-data-panel title="数据面板">
-        <div style="padding: 16px">
-          <p>这是一个数据展示面板</p>
-          <p>可以在其中放置任何内容</p>
-        </div>
-      </j-data-panel>
-    </div>
-
-    <div class="demo-item">
-      <p>无标题面板:</p>
-      <j-data-panel>
-        <div style="padding: 16px">
-          <p>没有标题的面板</p>
-        </div>
-      </j-data-panel>
-    </div>
-
-    <div class="demo-item">
-      <p>带标题右侧内容:</p>
-      <j-data-panel title="用户数据">
-        <template #titleRight>
-          <j-button icon="mdi:refresh"></j-button>
-        </template>
-        <div style="padding: 16px">
-          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px">
-            <div>
-              <div style="color: var(--j-color-text-2); font-size: 12px; margin-bottom: 4px">
-                用户总数
-              </div>
-              <div style="font-size: 24px; font-weight: bold; color: var(--j-color-primary)">
-                1,234
-              </div>
-            </div>
-            <div>
-              <div style="color: var(--j-color-text-2); font-size: 12px; margin-bottom: 4px">
-                活跃用户
-              </div>
-              <div style="font-size: 24px; font-weight: bold; color: var(--j-color-success)">
-                856
-              </div>
-            </div>
-            <div>
-              <div style="color: var(--j-color-text-2); font-size: 12px; margin-bottom: 4px">
-                待审核
-              </div>
-              <div style="font-size: 24px; font-weight: bold; color: var(--j-color-warning)">
-                45
-              </div>
-            </div>
-            <div>
-              <div style="color: var(--j-color-text-2); font-size: 12px; margin-bottom: 4px">
-                异常
-              </div>
-              <div style="font-size: 24px; font-weight: bold; color: var(--j-color-danger)">12</div>
-            </div>
-          </div>
-        </div>
-      </j-data-panel>
-    </div>
-
-    <div class="demo-item">
-      <p>多个面板并排显示:</p>
-      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px">
-        <j-data-panel title="收入统计">
-          <div style="padding: 16px">
-            <div style="font-size: 20px; font-weight: bold; color: var(--j-color-primary)">
-              ¥ 128,500
-            </div>
-            <div style="color: var(--j-color-text-2); font-size: 12px; margin-top: 8px">
-              本月收入
-            </div>
-          </div>
-        </j-data-panel>
-        <j-data-panel title="支出统计">
-          <div style="padding: 16px">
-            <div style="font-size: 20px; font-weight: bold; color: var(--j-color-danger)">
-              ¥ 32,100
-            </div>
-            <div style="color: var(--j-color-text-2); font-size: 12px; margin-top: 8px">
-              本月支出
-            </div>
-          </div>
-        </j-data-panel>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-// 示例代码无需额外逻辑
-</script>
-
-<style scoped>
-.data-panel-demo {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.demo-item p {
-  margin-bottom: 12px;
-  font-size: 14px;
-  color: var(--j-color-text-2);
-  font-weight: 500;
-}
-</style>
+<template>
+  <div class="data-panel-demo">
+    <div class="demo-item">
+      <p>基础用法 - 带标题的面板:</p>
+      <j-data-panel title="数据面板">
+        <div style="padding: 16px">
+          <p>这是一个数据展示面板</p>
+          <p>可以在其中放置任何内容</p>
+        </div>
+      </j-data-panel>
+    </div>
+
+    <div class="demo-item">
+      <p>无标题面板:</p>
+      <j-data-panel>
+        <div style="padding: 16px">
+          <p>没有标题的面板</p>
+        </div>
+      </j-data-panel>
+    </div>
+
+    <div class="demo-item">
+      <p>带标题右侧内容:</p>
+      <j-data-panel title="用户数据">
+        <template #titleRight>
+          <j-button icon="mdi:refresh"></j-button>
+        </template>
+        <div style="padding: 16px">
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px">
+            <div>
+              <div style="color: var(--j-color-text-2); font-size: 12px; margin-bottom: 4px">
+                用户总数
+              </div>
+              <div style="font-size: 24px; font-weight: bold; color: var(--j-color-primary)">
+                1,234
+              </div>
+            </div>
+            <div>
+              <div style="color: var(--j-color-text-2); font-size: 12px; margin-bottom: 4px">
+                活跃用户
+              </div>
+              <div style="font-size: 24px; font-weight: bold; color: var(--j-color-success)">
+                856
+              </div>
+            </div>
+            <div>
+              <div style="color: var(--j-color-text-2); font-size: 12px; margin-bottom: 4px">
+                待审核
+              </div>
+              <div style="font-size: 24px; font-weight: bold; color: var(--j-color-warning)">
+                45
+              </div>
+            </div>
+            <div>
+              <div style="color: var(--j-color-text-2); font-size: 12px; margin-bottom: 4px">
+                异常
+              </div>
+              <div style="font-size: 24px; font-weight: bold; color: var(--j-color-danger)">12</div>
+            </div>
+          </div>
+        </div>
+      </j-data-panel>
+    </div>
+
+    <div class="demo-item">
+      <p>多个面板并排显示:</p>
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px">
+        <j-data-panel title="收入统计">
+          <div style="padding: 16px">
+            <div style="font-size: 20px; font-weight: bold; color: var(--j-color-primary)">
+              ¥ 128,500
+            </div>
+            <div style="color: var(--j-color-text-2); font-size: 12px; margin-top: 8px">
+              本月收入
+            </div>
+          </div>
+        </j-data-panel>
+        <j-data-panel title="支出统计">
+          <div style="padding: 16px">
+            <div style="font-size: 20px; font-weight: bold; color: var(--j-color-danger)">
+              ¥ 32,100
+            </div>
+            <div style="color: var(--j-color-text-2); font-size: 12px; margin-top: 8px">
+              本月支出
+            </div>
+          </div>
+        </j-data-panel>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 示例代码无需额外逻辑
+</script>
+
+<style scoped>
+.data-panel-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.demo-item p {
+  margin-bottom: 12px;
+  font-size: 14px;
+  color: var(--j-color-text-2);
+  font-weight: 500;
+}
+</style>

package/docs/examples/date/basic.vue

@@ -1,73 +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>
+<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

@@ -1,59 +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>
+<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

@@ -1,75 +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>
+<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>