@a2simcode/ui 0.0.153 → 0.0.155

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>

package/docs/examples/date/range.vue

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

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

package/docs/examples/decorated-title/basic.vue

@@ -1,31 +1,31 @@
-<template>
-  <div>
-    <h3>默认样式 (无 `titleType`)</h3>
-    <j-decorated-title title="默认标题"  background-color="#409eff" />
-
-    <h3>Title Type 2</h3>
-    <j-decorated-title title="标题二" content="这是 titleType 为 'title2' 的装饰标题" title-type="title2" background-color="#67c23a" />
-
-    <h3>Title Type 3</h3>
-    <j-decorated-title title="标题三" content="这是 titleType 为 'title3' 的装饰标题" title-type="title3" background-color="#e6a23c" />
-
-    <h3>Title Type 4</h3>
-    <j-decorated-title title="标题四" content="这是 titleType 为 'title4' 的装饰标题" title-type="title4" background-color="#f56c6c" />
-
-    <h3>Title Type 5</h3>
-    <j-decorated-title title="标题五" content="这是 titleType 为 'title5' 的装饰标题" title-type="title5" background-color="#f56c6c" />
-
-    <h3>Title Type 6</h3>
-    <j-decorated-title title="标题六" content="这是 titleType 为 'title6' 的装饰标题" title-type="title6" background-color="#909399" />
-
-    <h3>Title Type 7</h3>
-    <j-decorated-title title="标题七" content="这是 titleType 为 'title7' 的装饰标题" title-type="title7" background-color="#67c23a" />
-
-    <h3>Title Type 8</h3>
-    <j-decorated-title title="标题八" content="这是 titleType 为 'title8' 的装饰标题" title-type="title8" background-color="#409eff" />
-
-    <h3>Title Type 9</h3>
-    <j-decorated-title title="标题九" content="这是 titleType 为 'title9' 的装饰标题" title-type="title9" background-color="#e6a23c" />
-  </div>
-</template>
-
+<template>
+  <div>
+    <h3>默认样式 (无 `titleType`)</h3>
+    <j-decorated-title title="默认标题"  background-color="#409eff" />
+
+    <h3>Title Type 2</h3>
+    <j-decorated-title title="标题二" content="这是 titleType 为 'title2' 的装饰标题" title-type="title2" background-color="#67c23a" />
+
+    <h3>Title Type 3</h3>
+    <j-decorated-title title="标题三" content="这是 titleType 为 'title3' 的装饰标题" title-type="title3" background-color="#e6a23c" />
+
+    <h3>Title Type 4</h3>
+    <j-decorated-title title="标题四" content="这是 titleType 为 'title4' 的装饰标题" title-type="title4" background-color="#f56c6c" />
+
+    <h3>Title Type 5</h3>
+    <j-decorated-title title="标题五" content="这是 titleType 为 'title5' 的装饰标题" title-type="title5" background-color="#f56c6c" />
+
+    <h3>Title Type 6</h3>
+    <j-decorated-title title="标题六" content="这是 titleType 为 'title6' 的装饰标题" title-type="title6" background-color="#909399" />
+
+    <h3>Title Type 7</h3>
+    <j-decorated-title title="标题七" content="这是 titleType 为 'title7' 的装饰标题" title-type="title7" background-color="#67c23a" />
+
+    <h3>Title Type 8</h3>
+    <j-decorated-title title="标题八" content="这是 titleType 为 'title8' 的装饰标题" title-type="title8" background-color="#409eff" />
+
+    <h3>Title Type 9</h3>
+    <j-decorated-title title="标题九" content="这是 titleType 为 'title9' 的装饰标题" title-type="title9" background-color="#e6a23c" />
+  </div>
+</template>
+

package/docs/examples/dialog/basic.vue

@@ -1,36 +1,36 @@
-<template>
-  <div>
-    <j-button label="打开弹窗" @click="visible = true" />
-    <j-dialog
-      v-model:visible="visible"
-      title="基础弹窗"
-      :width="600"
-      :height="400"
-      @ok="handleOk"
-      @cancel="handleCancel"
-    >
-      <div style="padding: 16px">
-        <p>这是一个基础的弹窗示例。</p>
-        <p>弹窗支持拖拽、缩放等功能。</p>
-      </div>
-    </j-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const visible = ref(false)
-
-const handleOk = (showLoading: any, hideLoading: any) => {
-  showLoading('保存中...')
-  setTimeout(() => {
-    hideLoading()
-    visible.value = false
-  }, 1000)
-}
-
-const handleCancel = () => {
-  visible.value = false
-}
-</script>
+<template>
+  <div>
+    <j-button label="打开弹窗" @click="visible = true" />
+    <j-dialog
+      v-model:visible="visible"
+      title="基础弹窗"
+      :width="600"
+      :height="400"
+      @ok="handleOk"
+      @cancel="handleCancel"
+    >
+      <div style="padding: 16px">
+        <p>这是一个基础的弹窗示例。</p>
+        <p>弹窗支持拖拽、缩放等功能。</p>
+      </div>
+    </j-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const visible = ref(false)
+
+const handleOk = (showLoading: any, hideLoading: any) => {
+  showLoading('保存中...')
+  setTimeout(() => {
+    hideLoading()
+    visible.value = false
+  }, 1000)
+}
+
+const handleCancel = () => {
+  visible.value = false
+}
+</script>

package/docs/examples/dialog/custom-buttons.vue

@@ -1,44 +1,44 @@
-<template>
-  <div>
-    <j-button label="自定义按钮" @click="visible = true" />
-    <j-dialog
-      v-model:visible="visible"
-      title="自定义按钮弹窗"
-      :width="600"
-      :height="400"
-      :has-save-btn="false"
-      :buttons="buttons"
-    >
-      <div style="padding: 16px">
-        <p>这个弹窗使用了自定义按钮配置。</p>
-      </div>
-    </j-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { ElMessage } from 'element-plus'
-
-const visible = ref(false)
-
-const buttons = [
-  {
-    prop: 'confirm',
-    label: '确认',
-    type: 'primary',
-    click: () => {
-      ElMessage.success('点击了确认按钮')
-      visible.value = false
-    },
-  },
-  {
-    prop: 'delete',
-    label: '删除',
-    danger: true,
-    click: () => {
-      ElMessage.warning('点击了删除按钮')
-    },
-  },
-]
-</script>
+<template>
+  <div>
+    <j-button label="自定义按钮" @click="visible = true" />
+    <j-dialog
+      v-model:visible="visible"
+      title="自定义按钮弹窗"
+      :width="600"
+      :height="400"
+      :has-save-btn="false"
+      :buttons="buttons"
+    >
+      <div style="padding: 16px">
+        <p>这个弹窗使用了自定义按钮配置。</p>
+      </div>
+    </j-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const visible = ref(false)
+
+const buttons = [
+  {
+    prop: 'confirm',
+    label: '确认',
+    type: 'primary',
+    click: () => {
+      ElMessage.success('点击了确认按钮')
+      visible.value = false
+    },
+  },
+  {
+    prop: 'delete',
+    label: '删除',
+    danger: true,
+    click: () => {
+      ElMessage.warning('点击了删除按钮')
+    },
+  },
+]
+</script>