@jetlinks-web/components 1.0.4 → 2.0.0

package/src/Scrollbar/thumb.ts

@@ -0,0 +1,16 @@
+import type { ExtractPropTypes } from 'vue'
+import type Thumb from './Thumb.vue'
+
+export const thumbProps = {
+    vertical: Boolean,
+    size: String,
+    move: Number,
+    ratio: {
+        type: Number,
+        required: true,
+    },
+    always: Boolean,
+}
+export type ThumbProps = ExtractPropTypes<typeof thumbProps>
+
+export type ThumbInstance = InstanceType<typeof Thumb>

package/src/Scrollbar/util.ts

@@ -0,0 +1,38 @@
+import type { CSSProperties } from 'vue'
+import type { ThumbProps } from './thumb'
+
+export const GAP = 4 // top 2 + bottom 2 of bar instance
+
+export const BAR_MAP = {
+  vertical: {
+    offset: 'offsetHeight',
+    scroll: 'scrollTop',
+    scrollSize: 'scrollHeight',
+    size: 'height',
+    key: 'vertical',
+    axis: 'Y',
+    client: 'clientY',
+    direction: 'top',
+  },
+  horizontal: {
+    offset: 'offsetWidth',
+    scroll: 'scrollLeft',
+    scrollSize: 'scrollWidth',
+    size: 'width',
+    key: 'horizontal',
+    axis: 'X',
+    client: 'clientX',
+    direction: 'left',
+  },
+} as const
+
+export const renderThumbStyle = ({
+                                   move,
+                                   size,
+                                   bar,
+                                 }: Pick<ThumbProps, 'move' | 'size'> & {
+  bar: typeof BAR_MAP[keyof typeof BAR_MAP]
+}): CSSProperties => ({
+  [bar.size]: size,
+  transform: `translate${bar.axis}(${move}%)`,
+})

package/src/Search/Advanced/History.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="search-history-warp">
+    <FormItemRest>
+      <Button
+          class="search-history-button"
+          type="primary"
+          html-type="submit"
+      >
+        搜索
+      </Button>
+    </FormItemRest>
+    <Popover
+        placement="bottom"
+        trigger="click"
+        overlay-class-name="search-history-list-pop"
+        :visible="historyVisible"
+        @visibleChange="visibleChange"
+    >
+      <template #content>
+        <div v-if="!showEmpty" class="search-history-items">
+          <div
+              v-for="item in historyList"
+              :key="item.id"
+              class="search-history-item"
+          >
+            <div
+                class="history-item--title"
+                @click="itemClick(item.content)"
+            >
+              <Ellipsis style="width: 100%">{{
+                  item.name
+                }}
+              </Ellipsis>
+            </div>
+            <Popconfirm
+                title="确认删除吗？"
+                placement="top"
+                @confirm="deleteHistory(item)"
+            >
+                            <span class="delete">
+                                <AIcon type="DeleteOutlined"/>
+                            </span>
+            </Popconfirm>
+          </div>
+        </div>
+        <div v-else class="search-history-empty">
+          <Empty/>
+        </div>
+      </template>
+      <div
+          class="search-history-button-icon"
+          @click.stop="showHistoryList"
+      >
+        <AIcon type="DownOutlined"/>
+      </div>
+    </Popover>
+  </div>
+</template>
+
+<script setup lang="ts" name="SearchHistory">
+import type { SearchHistoryList } from '../typing';
+import { computed, ref } from 'vue';
+import type { PropType } from 'vue';
+import { isFunction } from 'lodash-es';
+import { AIcon, Empty, Ellipsis } from '../../../';
+import { Popconfirm, Button, FormItemRest, Popover, message } from 'ant-design-vue'
+
+type Emit = {
+  (event: 'click'): void;
+  (event: 'itemClick', data: string): void;
+};
+const emit = defineEmits<Emit>();
+
+const props = defineProps({
+  target: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  request: {
+    type: Function as PropType<(target: string) => Promise<any>>,
+    default: null,
+  },
+  deleteRequest: {
+    type: Function as PropType<(target: string, item: any) => Promise<any>>,
+    default: null,
+  },
+  deleteKey: {
+    type: String,
+    default: 'key',
+  },
+});
+
+const historyList = ref<SearchHistoryList[]>([]);
+const historyVisible = ref(false);
+const showEmpty = computed(() => {
+  return historyList.value.length === 0;
+});
+
+const showHistoryList = async () => {
+  if (props.request) {
+    const resp = await props.request(props.target);
+    if (resp.success && resp.result.length) {
+      historyList.value = resp.result.filter((item) => item.content);
+    } else {
+      historyList.value = [];
+    }
+  }
+};
+
+const visibleChange = async (v: boolean) => {
+  historyVisible.value = v;
+};
+
+const click = () => {
+  emit('click');
+};
+
+const itemClick = (content: string) => {
+  historyVisible.value = false;
+  emit('itemClick', content);
+};
+
+const deleteHistory = async (item: any) => {
+  if (props.deleteRequest && isFunction(props.deleteRequest)) {
+    const resp = await props.deleteRequest(
+        props.target,
+        item[props.deleteKey],
+    );
+    historyVisible.value = false;
+    if (resp.success || resp.status === 200 || resp.code === 200) {
+      message.success('操作成功');
+    } else {
+      message.error('操作失败');
+    }
+  }
+};
+</script>
+
+<style scoped lang="less"></style>

package/src/Search/Advanced/SaveHistory.vue

@@ -0,0 +1,108 @@
+<template>
+  <Popover
+      v-model:visible="visible"
+      title="搜索名称"
+      trigger="click"
+      placement="bottom"
+      @visibleChange="visibleChange"
+  >
+    <template #content>
+      <div v-if="visible" style="width: 240px">
+        <Form ref="formRef" :model="modelRef">
+          <FormItem
+              name="name"
+              :rules="[
+                            { required: true, message: '请输入名称' },
+                            { max: 64, message: '最多64个字符' },
+                        ]"
+          >
+                        <Textarea
+                            v-model:value="modelRef.name"
+                            :rows="3"
+                            :maxlength="200"
+                        />
+          </FormItem>
+        </Form>
+        <Button
+            :loading="saveHistoryLoading"
+            type="primary"
+            class="save-btn"
+            style="width: 100%"
+            @click="saveHistory"
+        >
+          保存
+        </Button>
+      </div>
+    </template>
+    <Button ghost type="primary"> 保存</Button>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import type { Terms } from '../typing';
+import type { PropType } from 'vue';
+import { ref, reactive } from 'vue';
+import { Form, Button, FormItem, Popover, Textarea, message } from 'ant-design-vue'
+import { isFunction } from 'lodash-es';
+
+const props = defineProps({
+  terms: {
+    type: Object as PropType<Terms>,
+    default: () => ({}),
+  },
+  target: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  request: {
+    type: Function as PropType<(data: any, target: string) => Promise<any>>,
+    default: null,
+  },
+});
+
+const saveHistoryLoading = ref(false);
+
+const visible = ref(false);
+
+const formRef = ref();
+
+const modelRef = reactive({
+  name: undefined,
+});
+
+const visibleChange = (e: boolean) => {
+  visible.value = e;
+  if (!e) {
+    setTimeout(() => {
+      modelRef.name = undefined;
+    }, 100);
+  }
+};
+
+/**
+ * 保存当前查询条件
+ */
+const saveHistory = async () => {
+  // 获取当前查询条件并转化为字符串
+  const formData = await formRef.value.validate();
+  if (formData && props.request && isFunction(props.request)) {
+    formData.content = JSON.stringify(props.terms);
+    saveHistoryLoading.value = true;
+    const resp = await props.request(formData, props.target);
+    saveHistoryLoading.value = false;
+    if (resp.success || resp.status === 200 || resp.code === 200) {
+      message.success('操作成功');
+      visibleChange(false);
+    } else {
+      message.error('操作失败');
+    }
+  }
+};
+</script>
+
+<style scoped lang="less">
+.save-btn {
+  width: 100%;
+}
+</style>