wui-components-v2 1.1.69 → 1.1.70

package/components/custom-date-picker/custom-date-picker.vue

@@ -1,106 +1,106 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import dayjs from 'dayjs/esm/index'
-
-defineOptions({
-  name: 'CustomDatePicker',
-})
-const props = defineProps({
-  modelValue: String,
-  placeholder: String,
-  columns: {
-    type: Array as PropType<SelectOption[]>,
-    default: () => [],
-  },
-  labelKey: { type: String, default: 'label' },
-  valueKey: { type: String, default: 'value' },
-  type: { type: String, default: 'date' },
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string | number]
-}>()
-
-interface SelectOption {
-  label: string
-  value: string | number
-  [key: string]: any
-}
-const open = ref(false)
-const currentValue = ref<any>(props.modelValue)
-function clear() {
-  currentValue.value = ''
-}
-
-watch(
-  () => props.modelValue,
-  val => {
-    currentValue.value = val
-  }
-)
-
-watch(currentValue, val => {
-  const newVal = props.type === 'year' ? dayjs(val).format('YYYY') : val
-  emit('update:modelValue', newVal)
-})
-
-const labelText = computed(() => {
-  const formatMap: {
-    date: string
-    datetime: string
-    [key: string]: string // 索引签名：允许任意字符串作为键
-  } = {
-    date: 'YYYY-MM-DD',
-    datetime: 'YYYY-MM-DD HH:mm',
-    year: 'YYYY',
-  }
-
-  if (['date', 'datetime', 'year'].includes(props.type)) {
-    return currentValue.value ? dayjs(currentValue.value).format(formatMap[props.type] as string) : ''
-  } else {
-    return currentValue.value || ''
-  }
-})
-</script>
-
-<template>
-  <div class="flex items-center justify-between">
-    <wd-input v-model="labelText" readonly :placeholder="placeholder" class="flex-1" @click="open = true" />
-    <wd-icon v-if="labelText" name="close-circle" size="16px" @click="clear" />
-    <wd-icon v-else name="right" size="16px" @click="clear" />
-  </div>
-
-  <wd-calendar
-    v-if="['date', 'datetime'].includes(type)"
-    v-model="currentValue"
-    v-model:visible="open"
-    label-key="label"
-    value-key="value"
-    class="custom-date-picker"
-    :type="type as any"
-  />
-  <wd-datetime-picker
-    v-else
-    v-model="currentValue"
-    v-model:visible="open"
-    label-key="label"
-    value-key="value"
-    class="custom-date-picker"
-    :type="type as any"
-  />
-</template>
-
-<style scoped lang="scss">
-.custom-date-picker {
-  width: 100%;
-  :deep(.wd-calendar__wrapper) {
-    padding: 0 20px;
-    overflow: auto;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-  :deep(.uni-scroll-view) {
-    scrollbar-width: none;
-  }
-}
-</style>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import dayjs from 'dayjs/esm/index'
+
+defineOptions({
+  name: 'CustomDatePicker',
+})
+const props = defineProps({
+  modelValue: String,
+  placeholder: String,
+  columns: {
+    type: Array as PropType<SelectOption[]>,
+    default: () => [],
+  },
+  labelKey: { type: String, default: 'label' },
+  valueKey: { type: String, default: 'value' },
+  type: { type: String, default: 'date' },
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+}>()
+
+interface SelectOption {
+  label: string
+  value: string | number
+  [key: string]: any
+}
+const open = ref(false)
+const currentValue = ref<any>(props.modelValue)
+function clear() {
+  currentValue.value = ''
+}
+
+watch(
+  () => props.modelValue,
+  val => {
+    currentValue.value = val
+  }
+)
+
+watch(currentValue, val => {
+  const newVal = props.type === 'year' ? dayjs(val).format('YYYY') : val
+  emit('update:modelValue', newVal)
+})
+
+const labelText = computed(() => {
+  const formatMap: {
+    date: string
+    datetime: string
+    [key: string]: string // 索引签名：允许任意字符串作为键
+  } = {
+    date: 'YYYY-MM-DD',
+    datetime: 'YYYY-MM-DD HH:mm',
+    year: 'YYYY',
+  }
+
+  if (['date', 'datetime', 'year'].includes(props.type)) {
+    return currentValue.value ? dayjs(currentValue.value).format(formatMap[props.type] as string) : ''
+  } else {
+    return currentValue.value || ''
+  }
+})
+</script>
+
+<template>
+  <div class="flex items-center justify-between">
+    <wd-input v-model="labelText" readonly :placeholder="placeholder" class="flex-1" @click="open = true" />
+    <wd-icon v-if="labelText" name="close-circle" size="16px" @click="clear" />
+    <wd-icon v-else name="right" size="16px" @click="clear" />
+  </div>
+
+  <wd-calendar
+    v-if="['date', 'datetime'].includes(type)"
+    v-model="currentValue"
+    v-model:visible="open"
+    label-key="label"
+    value-key="value"
+    class="custom-date-picker"
+    :type="type as any"
+  />
+  <wd-datetime-picker
+    v-else
+    v-model="currentValue"
+    v-model:visible="open"
+    label-key="label"
+    value-key="value"
+    class="custom-date-picker"
+    :type="type as any"
+  />
+</template>
+
+<style scoped lang="scss">
+.custom-date-picker {
+  width: 100%;
+  :deep(.wd-calendar__wrapper) {
+    padding: 0 20px;
+    overflow: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  :deep(.uni-scroll-view) {
+    scrollbar-width: none;
+  }
+}
+</style>

package/components/custom-select-picker/custom-select-picker.vue

@@ -1,95 +1,95 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-
-defineOptions({
-  name: 'CustomSelectPicker',
-})
-const props = defineProps({
-  modelValue: [String, Array],
-  placeholder: String,
-  columns: {
-    type: Array as PropType<SelectOption[]>,
-    default: () => [],
-  },
-  labelKey: { type: String, default: 'label' },
-  valueKey: { type: String, default: 'value' },
-  type: { type: String, default: 'radio' },
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string | number]
-}>()
-
-interface SelectOption {
-  label: string
-  value: string | number
-  [key: string]: any
-}
-
-const open = ref(false)
-const currentValue = ref<any>(props.modelValue)
-function clear() {
-  currentValue.value = ''
-}
-
-watch(
-  () => props.modelValue,
-  val => {
-    console.log('val', val, Array.isArray(val))
-    currentValue.value = val
-  }
-)
-
-watch(currentValue, val => {
-  emit('update:modelValue', val)
-})
-
-const labelText = computed(() => {
-  // 多选情况：currentValue 是数组
-  if (Array.isArray(currentValue.value)) {
-    const labels = currentValue.value
-      .map(val => {
-        const item = props.columns.find(item => item[props.valueKey] === val)
-        return item ? item[props.labelKey] : ''
-      })
-      .filter(Boolean)
-    return labels.join(', ')
-  }
-  // 单选情况：currentValue 是单个值
-  const item = props.columns.find(item => item[props.valueKey] === currentValue.value)
-  return item ? item[props.labelKey] : ''
-})
-</script>
-
-<template>
-  <div class="flex items-center justify-between">
-    <wd-input v-model="labelText" readonly :placeholder="placeholder" class="flex-1" @click="open = true" />
-    <wd-icon v-if="labelText" name="close-circle" size="16px" @click="clear" />
-    <wd-icon v-else name="right" size="16px" @click="clear" />
-  </div>
-
-  <wd-select-picker
-    v-model="currentValue"
-    v-model:visible="open"
-    :columns="columns"
-    label-key="label"
-    value-key="value"
-    class="custom-select-picker"
-    :type="type as any"
-  />
-</template>
-
-<style scoped lang="scss">
-.custom-select-picker {
-  width: 100%;
-  :deep(.wd-select-picker__wrapper) {
-    padding: 0 20px;
-    overflow: auto;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-  :deep(.uni-scroll-view) {
-    scrollbar-width: none;
-  }
-}
-</style>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+defineOptions({
+  name: 'CustomSelectPicker',
+})
+const props = defineProps({
+  modelValue: [String, Array],
+  placeholder: String,
+  columns: {
+    type: Array as PropType<SelectOption[]>,
+    default: () => [],
+  },
+  labelKey: { type: String, default: 'label' },
+  valueKey: { type: String, default: 'value' },
+  type: { type: String, default: 'radio' },
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+}>()
+
+interface SelectOption {
+  label: string
+  value: string | number
+  [key: string]: any
+}
+
+const open = ref(false)
+const currentValue = ref<any>(props.modelValue)
+function clear() {
+  currentValue.value = ''
+}
+
+watch(
+  () => props.modelValue,
+  val => {
+    console.log('val', val, Array.isArray(val))
+    currentValue.value = val
+  }
+)
+
+watch(currentValue, val => {
+  emit('update:modelValue', val)
+})
+
+const labelText = computed(() => {
+  // 多选情况：currentValue 是数组
+  if (Array.isArray(currentValue.value)) {
+    const labels = currentValue.value
+      .map(val => {
+        const item = props.columns.find(item => item[props.valueKey] === val)
+        return item ? item[props.labelKey] : ''
+      })
+      .filter(Boolean)
+    return labels.join(', ')
+  }
+  // 单选情况：currentValue 是单个值
+  const item = props.columns.find(item => item[props.valueKey] === currentValue.value)
+  return item ? item[props.labelKey] : ''
+})
+</script>
+
+<template>
+  <div class="flex items-center justify-between">
+    <wd-input v-model="labelText" readonly :placeholder="placeholder" class="flex-1" @click="open = true" />
+    <wd-icon v-if="labelText" name="close-circle" size="16px" @click="clear" />
+    <wd-icon v-else name="right" size="16px" @click="clear" />
+  </div>
+
+  <wd-select-picker
+    v-model="currentValue"
+    v-model:visible="open"
+    :columns="columns"
+    label-key="label"
+    value-key="value"
+    class="custom-select-picker"
+    :type="type as any"
+  />
+</template>
+
+<style scoped lang="scss">
+.custom-select-picker {
+  width: 100%;
+  :deep(.wd-select-picker__wrapper) {
+    padding: 0 20px;
+    overflow: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  :deep(.uni-scroll-view) {
+    scrollbar-width: none;
+  }
+}
+</style>

package/components/demo-block/demo-block.vue

@@ -1,63 +1,63 @@
-<script lang="ts" setup>
-import { computed, defineOptions, defineProps } from 'vue'
-
-defineOptions({
-  name: 'DemoBlock',
-})
-
-const props = defineProps({
-  // 标题
-  title: {
-    type: String,
-    default: '',
-  },
-  // 自定义类名
-  customClass: {
-    type: String,
-    default: '',
-  },
-  // 垂直间距
-  ver: {
-    type: [Number, String],
-    default: 10,
-  },
-  // 水平间距
-  hor: {
-    type: [Number, String],
-    default: 15,
-  },
-  // 是否透明
-  transparent: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const style = computed(() => {
-  return `margin: 0 ${props.hor}px;padding:${props.ver}px 0;`
-})
-</script>
-
-<script lang="ts">
-export default {
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: 'shared',
-  },
-}
-</script>
-
-<template>
-  <view
-    class="mb-3 box-border w-full px-3 text-gray-500 last:mb-0 dark:text-gray-300"
-    :class="[transparent ? '' : 'bg-white dark:bg-[var(--wot-dark-background2)]', customClass]"
-  >
-    <view v-if="title" class="px-4 py-3 text-26rpx dark:text-gray-200">
-      {{ title }}
-    </view>
-    <view :style="transparent ? '' : style">
-      <slot />
-    </view>
-  </view>
-</template>
+<script lang="ts" setup>
+import { computed, defineOptions, defineProps } from 'vue'
+
+defineOptions({
+  name: 'DemoBlock',
+})
+
+const props = defineProps({
+  // 标题
+  title: {
+    type: String,
+    default: '',
+  },
+  // 自定义类名
+  customClass: {
+    type: String,
+    default: '',
+  },
+  // 垂直间距
+  ver: {
+    type: [Number, String],
+    default: 10,
+  },
+  // 水平间距
+  hor: {
+    type: [Number, String],
+    default: 15,
+  },
+  // 是否透明
+  transparent: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const style = computed(() => {
+  return `margin: 0 ${props.hor}px;padding:${props.ver}px 0;`
+})
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<template>
+  <view
+    class="mb-3 box-border w-full px-3 text-gray-500 last:mb-0 dark:text-gray-300"
+    :class="[transparent ? '' : 'bg-white dark:bg-[var(--wot-dark-background2)]', customClass]"
+  >
+    <view v-if="title" class="px-4 py-3 text-26rpx dark:text-gray-200">
+      {{ title }}
+    </view>
+    <view :style="transparent ? '' : style">
+      <slot />
+    </view>
+  </view>
+</template>