@uxda/appkit 1.2.72 → 4.0.0

package/src/components/dd-notice-bar/index.vue

@@ -1,78 +1,78 @@
-<script setup lang="ts">
-const props = defineProps<{
-  text?: string
-  style?: {} | string
-  showClose?: boolean
-}>()
-
-const emit = defineEmits(['close', 'txtClick'])
-function close() {
-  emit('close')
-}
-function txtClick() {
-  emit('txtClick')
-}
-</script>
-
-<template>
-  <div class="dd-notice-bar" :class="{ close: showClose }" :style="style">
-    <div class="dd-notice-bar__txt" name="text" @click="txtClick">
-      <span v-if="text">{{ text }}</span>
-      <slot></slot>
-    </div>
-    <div v-if="showClose" class="dd-notice-bar__close" @click="close">
-      <img
-        src="https://cdn.ddjf.com/static/images/wechat-yunservice/close-icon.png"
-        class="dd-notice-bar__close-img"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-.dd-notice-bar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  font-size: 13px;
-  color: #ea5959;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-height: 30px;
-  line-height: 18px;
-  padding: 6px 18px;
-  background: #ffe8d8;
-  box-sizing: border-box;
-  &__close {
-    width: 22px;
-    height: 22px;
-    display: flex;
-    margin-right: -6px;
-    margin-left: 6px;
-    justify-content: center;
-    align-items: center;
-    &-img {
-      width: 10px;
-      height: 10px;
-    }
-  }
-  &.close {
-    justify-content: space-between;
-    color: #fb970c;
-    background: #fff2d8;
-    .dd-notice-bar__txt {
-      text-align: left;
-    }
-  }
-  &__txt {
-    flex: 1;
-    text-align: center;
-    opacity: 0.8;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>
+<script setup lang="ts">
+const props = defineProps<{
+  text?: string
+  style?: {} | string
+  showClose?: boolean
+}>()
+
+const emit = defineEmits(['close', 'txtClick'])
+function close() {
+  emit('close')
+}
+function txtClick() {
+  emit('txtClick')
+}
+</script>
+
+<template>
+  <div class="dd-notice-bar" :class="{ close: showClose }" :style="style">
+    <div class="dd-notice-bar__txt" name="text" @click="txtClick">
+      <span v-if="text">{{ text }}</span>
+      <slot></slot>
+    </div>
+    <div v-if="showClose" class="dd-notice-bar__close" @click="close">
+      <img
+        src="https://cdn.ddjf.com/static/images/wechat-yunservice/close-icon.png"
+        class="dd-notice-bar__close-img"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.dd-notice-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  font-size: 13px;
+  color: #ea5959;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 30px;
+  line-height: 18px;
+  padding: 6px 18px;
+  background: #ffe8d8;
+  box-sizing: border-box;
+  &__close {
+    width: 22px;
+    height: 22px;
+    display: flex;
+    margin-right: -6px;
+    margin-left: 6px;
+    justify-content: center;
+    align-items: center;
+    &-img {
+      width: 10px;
+      height: 10px;
+    }
+  }
+  &.close {
+    justify-content: space-between;
+    color: #fb970c;
+    background: #fff2d8;
+    .dd-notice-bar__txt {
+      text-align: left;
+    }
+  }
+  &__txt {
+    flex: 1;
+    text-align: center;
+    opacity: 0.8;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

package/src/components/dd-search/doc.md

@@ -1,34 +1,34 @@
-# ddSearch 搜索框
-
-#
-## 使用
-
-``` javascript
-import ddSearch from '~/components/ddSearch/index.vue'
-```
-``` html
-<dd-search
-  :bordered="false"
-  :inNavbar="true"
-  :value="searchStr"
-  placeholder="输入客户姓名"
-  @search="onSearch"
-  @focus="onSearchFocus" />
-```
-
-## Prop
-
-| 字段       | 说明        | 类型    | 默认值   |
-|-----------|-------------|---------|----------|
-| disabled   | 是否禁用    | boolean | false    |
-| placeholder | 输入框placeholder  | string  | '请输入'   |
-| value    | 绑定值    | string  | ''     |
-| bordered   | 是否显示底部边框   | boolean  | true     |
-| inNavbar   | 是否在导航栏中   | boolean  | false     |
-
-## Events
-
-| 事件名    | 说明           | 回调参数            |
-|----------|----------------|--------------------|
-| search   | 点击搜索时    |   value, 搜索参数     |
-| focus    | 输入框focus   |   event             |
+# ddSearch 搜索框
+
+#
+## 使用
+
+``` javascript
+import ddSearch from '~/components/ddSearch/index.vue'
+```
+``` html
+<dd-search
+  :bordered="false"
+  :inNavbar="true"
+  :value="searchStr"
+  placeholder="输入客户姓名"
+  @search="onSearch"
+  @focus="onSearchFocus" />
+```
+
+## Prop
+
+| 字段       | 说明        | 类型    | 默认值   |
+|-----------|-------------|---------|----------|
+| disabled   | 是否禁用    | boolean | false    |
+| placeholder | 输入框placeholder  | string  | '请输入'   |
+| value    | 绑定值    | string  | ''     |
+| bordered   | 是否显示底部边框   | boolean  | true     |
+| inNavbar   | 是否在导航栏中   | boolean  | false     |
+
+## Events
+
+| 事件名    | 说明           | 回调参数            |
+|----------|----------------|--------------------|
+| search   | 点击搜索时    |   value, 搜索参数     |
+| focus    | 输入框focus   |   event             |

package/src/components/dd-search/index.vue

@@ -1,168 +1,168 @@
-<script setup lang="ts">
-import { computed, ref, watchPostEffect } from 'vue'
-
-interface SearchType {
-  disabled?: boolean
-  placeholder?: string
-  value?: string
-  bordered?: boolean
-  inNavbar?: boolean
-  focus?: boolean
-}
-const props = withDefaults(defineProps<SearchType>(), {
-  disabled: false,
-  placeholder: '',
-  bordered: true,
-  inNavbar: false,
-  focus: true,
-})
-
-watchPostEffect(() => {
-  key.value = props.value || ''
-})
-
-const emit = defineEmits(['search', 'focus', 'clear'])
-
-const ph = computed(() => {
-  return props.placeholder || '请输入'
-})
-
-const key = ref('')
-const showClear = computed(() => {
-  return !!key.value.trim()
-})
-function onClear() {
-  key.value = ''
-  emit('clear', '')
-}
-function onConfirm() {
-  if (props.disabled) return
-  // if (key.value.trim()) {
-  key.value = key.value.trim()
-  emit('search', key.value)
-  // }
-}
-function onFoucs(e) {
-  isFoucs.value = true
-  emit('focus', e)
-}
-function onBlur() {
-  isFoucs.value = false
-}
-const isFoucs = ref(props.focus)
-</script>
-
-<template>
-  <div
-    class="dd-search"
-    :class="{
-      disabled: props.disabled,
-      bordered: props.bordered,
-      inNavbar: props.inNavbar,
-      focus: !props.disabled && isFoucs,
-    }"
-  >
-    <div class="dd-search__form">
-      <div class="dd-search__prefix">
-        <image
-          class="full-img"
-          src="https://cdn.ddjf.com/static/images/wx-yunservice/search-icon.png"
-        />
-      </div>
-      <div class="dd-search__control">
-        <input
-          class="dd-search__input"
-          type="text"
-          :disabled="props.disabled"
-          :placeholder="ph"
-          v-model="key"
-          :focus="props.focus"
-          placeholder-class="dd-search__placeholder"
-          cursor-spacing="50"
-          confirm-type="search"
-          @confirm="onConfirm"
-          @focus="onFoucs"
-          @blur="onBlur"
-        />
-      </div>
-      <div class="dd-search__suffix" v-show="showClear" @tap="onClear">
-        <image
-          class="full-img"
-          src="https://cdn.ddjf.com/static/images/wx-yunservice/clear-icon.png"
-        />
-      </div>
-    </div>
-    <div v-if="!props.inNavbar" class="dd-search__btn" @click.stop="onConfirm">搜索</div>
-  </div>
-</template>
-
-<style lang="scss">
-.dd-search {
-  padding: 8px 12px;
-  display: flex;
-  align-items: center;
-  background: #fefefe;
-  &.bordered {
-    border-bottom: 1px solid #ddd;
-  }
-  &.inNavbar {
-    padding: 0;
-    width: 235px;
-    z-index: 10;
-    position: absolute;
-    left: 40px;
-    background: transparent;
-    .dd-search__form {
-      background: #f1f3f5;
-      border-color: transparent;
-    }
-  }
-  &.focus {
-    .dd-search__form {
-      border-color: #017fff;
-    }
-  }
-  &__placeholder {
-    color: #b4b4b4;
-  }
-  &__form {
-    flex: 1;
-    box-sizing: border-box;
-    height: 36px;
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-    padding: 0 10px;
-    background-color: #f1f3f5;
-  }
-  &__control {
-    font-size: 13px;
-    flex: 1;
-  }
-  &__input {
-    width: 100%;
-    box-sizing: border-box;
-    padding: 0 10px;
-    caret-color: #017fff;
-  }
-  &__prefix,
-  &__suffix {
-    width: 15px !important;
-    height: 15px !important;
-  }
-  &__btn {
-    height: 33px;
-    line-height: 33px;
-    padding: 0 10px;
-    font-size: 16px;
-    color: #017fff;
-  }
-  &.disabled &__suffix {
-    display: none;
-  }
-  &.disabled &__control {
-    flex: 1;
-    width: fit-content;
-  }
-}
-</style>
+<script setup lang="ts">
+import { computed, ref, watchPostEffect } from 'vue'
+
+interface SearchType {
+  disabled?: boolean
+  placeholder?: string
+  value?: string
+  bordered?: boolean
+  inNavbar?: boolean
+  focus?: boolean
+}
+const props = withDefaults(defineProps<SearchType>(), {
+  disabled: false,
+  placeholder: '',
+  bordered: true,
+  inNavbar: false,
+  focus: true,
+})
+
+watchPostEffect(() => {
+  key.value = props.value || ''
+})
+
+const emit = defineEmits(['search', 'focus', 'clear'])
+
+const ph = computed(() => {
+  return props.placeholder || '请输入'
+})
+
+const key = ref('')
+const showClear = computed(() => {
+  return !!key.value.trim()
+})
+function onClear() {
+  key.value = ''
+  emit('clear', '')
+}
+function onConfirm() {
+  if (props.disabled) return
+  // if (key.value.trim()) {
+  key.value = key.value.trim()
+  emit('search', key.value)
+  // }
+}
+function onFoucs(e) {
+  isFoucs.value = true
+  emit('focus', e)
+}
+function onBlur() {
+  isFoucs.value = false
+}
+const isFoucs = ref(props.focus)
+</script>
+
+<template>
+  <div
+    class="dd-search"
+    :class="{
+      disabled: props.disabled,
+      bordered: props.bordered,
+      inNavbar: props.inNavbar,
+      focus: !props.disabled && isFoucs,
+    }"
+  >
+    <div class="dd-search__form">
+      <div class="dd-search__prefix">
+        <image
+          class="full-img"
+          src="https://cdn.ddjf.com/static/images/wx-yunservice/search-icon.png"
+        />
+      </div>
+      <div class="dd-search__control">
+        <input
+          class="dd-search__input"
+          type="text"
+          :disabled="props.disabled"
+          :placeholder="ph"
+          v-model="key"
+          :focus="props.focus"
+          placeholder-class="dd-search__placeholder"
+          cursor-spacing="50"
+          confirm-type="search"
+          @confirm="onConfirm"
+          @focus="onFoucs"
+          @blur="onBlur"
+        />
+      </div>
+      <div class="dd-search__suffix" v-show="showClear" @tap="onClear">
+        <image
+          class="full-img"
+          src="https://cdn.ddjf.com/static/images/wx-yunservice/clear-icon.png"
+        />
+      </div>
+    </div>
+    <div v-if="!props.inNavbar" class="dd-search__btn" @click.stop="onConfirm">搜索</div>
+  </div>
+</template>
+
+<style lang="scss">
+.dd-search {
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  background: #fefefe;
+  &.bordered {
+    border-bottom: 1px solid #ddd;
+  }
+  &.inNavbar {
+    padding: 0;
+    width: 235px;
+    z-index: 10;
+    position: absolute;
+    left: 40px;
+    background: transparent;
+    .dd-search__form {
+      background: #f1f3f5;
+      border-color: transparent;
+    }
+  }
+  &.focus {
+    .dd-search__form {
+      border-color: #017fff;
+    }
+  }
+  &__placeholder {
+    color: #b4b4b4;
+  }
+  &__form {
+    flex: 1;
+    box-sizing: border-box;
+    height: 36px;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    background-color: #f1f3f5;
+  }
+  &__control {
+    font-size: 13px;
+    flex: 1;
+  }
+  &__input {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 10px;
+    caret-color: #017fff;
+  }
+  &__prefix,
+  &__suffix {
+    width: 15px !important;
+    height: 15px !important;
+  }
+  &__btn {
+    height: 33px;
+    line-height: 33px;
+    padding: 0 10px;
+    font-size: 16px;
+    color: #017fff;
+  }
+  &.disabled &__suffix {
+    display: none;
+  }
+  &.disabled &__control {
+    flex: 1;
+    width: fit-content;
+  }
+}
+</style>