diff --git a/src/components/Application/index.ts b/src/components/Application/index.ts index eafb280..1dfffc1 100644 --- a/src/components/Application/index.ts +++ b/src/components/Application/index.ts @@ -1,15 +1,14 @@ -import { withInstall } from '../util'; import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import AppLogo from './src/AppLogo.vue'; +import AppProvider from './src/AppProvider.vue'; +import { withInstall } from '../util'; export const AppLocalePicker = createAsyncComponent(() => import('./src/AppLocalePicker.vue')); -export const AppProvider = createAsyncComponent(() => import('./src/AppProvider.vue')); export const AppSearch = createAsyncComponent(() => import('./src/search/AppSearch.vue'), { loading: true, }); -// export const AppLogo = createAsyncComponent(() => import('./src/AppLogo.vue')); - -withInstall(AppLocalePicker, AppLogo, AppProvider, AppSearch); export { useAppProviderContext } from './src/useAppContext'; -export { AppLogo }; +export { AppLogo, AppProvider }; + +withInstall(AppLogo, AppProvider); diff --git a/src/components/Authority/index.ts b/src/components/Authority/index.ts index ecdf807..9c2412e 100644 --- a/src/components/Authority/index.ts +++ b/src/components/Authority/index.ts @@ -1,6 +1,7 @@ import { withInstall } from '../util'; -import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; -export const Authority = createAsyncComponent(() => import('./src/index.vue')); +import Authority from './src/index.vue'; withInstall(Authority); + +export { Authority }; diff --git a/src/components/Basic/index.ts b/src/components/Basic/index.ts index d6cf643..73fed74 100644 --- a/src/components/Basic/index.ts +++ b/src/components/Basic/index.ts @@ -1,8 +1,5 @@ -import { withInstall } from '../util'; import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; export const BasicArrow = createAsyncComponent(() => import('./src/BasicArrow.vue')); export const BasicHelp = createAsyncComponent(() => import('./src/BasicHelp.vue')); export const BasicTitle = createAsyncComponent(() => import('./src/BasicTitle.vue')); - -withInstall(BasicArrow, BasicHelp, BasicTitle); diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts index 57223d3..86ceebd 100644 --- a/src/components/Button/index.ts +++ b/src/components/Button/index.ts @@ -2,5 +2,4 @@ import Button from './src/BasicButton.vue'; import { withInstall } from '../util'; withInstall(Button); - export { Button }; diff --git a/src/components/ClickOutSide/index.ts b/src/components/ClickOutSide/index.ts index e84e8e0..cb88bc5 100644 --- a/src/components/ClickOutSide/index.ts +++ b/src/components/ClickOutSide/index.ts @@ -1,6 +1,7 @@ import { withInstall } from '../util'; -import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; -export const ClickOutSide = createAsyncComponent(() => import('./src/index.vue')); +import ClickOutSide from './src/index.vue'; withInstall(ClickOutSide); + +export { ClickOutSide }; diff --git a/src/components/Container/index.ts b/src/components/Container/index.ts index eb708d4..ab3bd2e 100644 --- a/src/components/Container/index.ts +++ b/src/components/Container/index.ts @@ -1,14 +1,8 @@ import { withInstall } from '../util'; import CollapseContainer from './src/collapse/CollapseContainer.vue'; -import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; -export const ScrollContainer = createAsyncComponent(() => import('./src/ScrollContainer.vue')); - -// export const CollapseContainer = createAsyncComponent( -// () => import('./src/collapse/CollapseContainer.vue') -// ); -export const LazyContainer = createAsyncComponent(() => import('./src/LazyContainer.vue')); +import ScrollContainer from './src/ScrollContainer.vue'; +import LazyContainer from './src/LazyContainer.vue'; withInstall(ScrollContainer, CollapseContainer, LazyContainer); - -export { CollapseContainer }; +export { CollapseContainer, ScrollContainer, LazyContainer }; export * from './src/types'; diff --git a/src/components/CountTo/index.ts b/src/components/CountTo/index.ts index 24f9e64..6ecc8aa 100644 --- a/src/components/CountTo/index.ts +++ b/src/components/CountTo/index.ts @@ -1,8 +1,4 @@ // Transform vue-count-to to support vue3 version -import { withInstall } from '../util'; - import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; export const CountTo = createAsyncComponent(() => import('./src/index.vue')); - -withInstall(CountTo); diff --git a/src/components/Description/index.ts b/src/components/Description/index.ts index 9d60038..359dcbb 100644 --- a/src/components/Description/index.ts +++ b/src/components/Description/index.ts @@ -1,9 +1,5 @@ -import { withInstall } from '../util'; - import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; export const Description = createAsyncComponent(() => import('./src/index')); -withInstall(Description); - export * from './src/types'; export { useDescription } from './src/useDescription'; diff --git a/src/components/Drawer/index.ts b/src/components/Drawer/index.ts index 28ab6eb..e8e1052 100644 --- a/src/components/Drawer/index.ts +++ b/src/components/Drawer/index.ts @@ -1,8 +1,9 @@ import { withInstall } from '../util'; -import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; -export const BasicDrawer = createAsyncComponent(() => import('./src/BasicDrawer')); +import BasicDrawer from './src/BasicDrawer'; -withInstall(BasicDrawer); +export { BasicDrawer }; export * from './src/types'; export { useDrawer, useDrawerInner } from './src/useDrawer'; + +withInstall(BasicDrawer); diff --git a/src/components/Dropdown/index.ts b/src/components/Dropdown/index.ts index d229a7f..0e71f02 100644 --- a/src/components/Dropdown/index.ts +++ b/src/components/Dropdown/index.ts @@ -1,6 +1,6 @@ import { withInstall } from '../util'; -import Dropdown from './src/Dropdown'; +import Dropdown from './src/Dropdown.vue'; withInstall(Dropdown); export * from './src/types'; diff --git a/src/components/Dropdown/src/Dropdown.tsx b/src/components/Dropdown/src/Dropdown.tsx deleted file mode 100644 index f00c59d..0000000 --- a/src/components/Dropdown/src/Dropdown.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import type { Trigger } from './types'; - -import { defineComponent, computed, unref } from 'vue'; -import { Dropdown, Menu } from 'ant-design-vue'; -import Icon from '/@/components/Icon/index'; - -import { basicDropdownProps } from './props'; -import { getSlot } from '/@/utils/helper/tsxHelper'; - -export default defineComponent({ - name: 'Dropdown', - props: basicDropdownProps, - emits: ['menuEvent'], - setup(props, { slots, emit, attrs }) { - const getMenuList = computed(() => props.dropMenuList); - - function handleClickMenu({ key }: any) { - const menu = unref(getMenuList).find((item) => `${item.event}` === `${key}`); - emit('menuEvent', menu); - } - - function renderMenus() { - return ( - <Menu onClick={handleClickMenu} selectedKeys={props.selectedKeys}> - {() => ( - <> - {unref(getMenuList).map((item) => { - const { disabled, icon, text, divider, event } = item; - return [ - <Menu.Item key={`${event}`} disabled={disabled}> - {() => ( - <> - {icon && <Icon icon={icon} />} - <span class="ml-1">{text}</span> - </> - )} - </Menu.Item>, - // @ts-ignore - divider && <Menu.Divider key={`d-${event}`} />, - ]; - })} - </> - )} - </Menu> - ); - } - - return () => ( - <Dropdown trigger={props.trigger as Trigger[]} {...attrs}> - {{ - default: () => <span>{getSlot(slots)}</span>, - overlay: () => renderMenus(), - }} - </Dropdown> - ); - }, -}); diff --git a/src/components/Dropdown/src/Dropdown.vue b/src/components/Dropdown/src/Dropdown.vue new file mode 100644 index 0000000..3b26a8f --- /dev/null +++ b/src/components/Dropdown/src/Dropdown.vue @@ -0,0 +1,70 @@ +<template> + <a-dropdown :trigger="trigger" v-bind="$attrs"> + <span> + <slot /> + </span> + <template #overlay> + <a-menu :selectedKeys="selectedKeys"> + <template v-for="item in getMenuList" :key="`${item.event}`"> + <a-menu-item @click="handleClickMenu({ key: item.event })" :disabled="item.disabled"> + <Icon :icon="item.icon" v-if="item.icon" /> + <span class="ml-1">{{ item.text }}</span> + </a-menu-item> + <a-menu-divider v-if="item.divider" :key="`d-${item.event}`" /> + </template> + </a-menu> + </template> + </a-dropdown> +</template> + +<script lang="ts"> + import type { PropType } from 'vue'; + import type { DropMenu } from './types'; + + import { defineComponent, computed, unref } from 'vue'; + import { Dropdown, Menu } from 'ant-design-vue'; + import Icon from '/@/components/Icon/index'; + + export default defineComponent({ + name: 'BasicDropdown', + components: { + [Dropdown.name]: Dropdown, + [Menu.name]: Menu, + [Menu.Item.name]: Menu.Item, + [Menu.Divider.name]: Menu.Divider, + Icon, + }, + props: { + /** + * the trigger mode which executes the drop-down action + * @default ['hover'] + * @type string[] + */ + trigger: { + type: [Array] as PropType<string[]>, + default: () => { + return ['contextmenu']; + }, + }, + dropMenuList: { + type: Array as PropType<DropMenu[]>, + default: () => [], + }, + selectedKeys: { + type: Array as PropType<string[]>, + default: () => [], + }, + }, + emits: ['menuEvent'], + setup(props, { emit }) { + const getMenuList = computed(() => props.dropMenuList); + + function handleClickMenu({ key }: { key: string }) { + const menu = unref(getMenuList).find((item) => `${item.event}` === `${key}`); + emit('menuEvent', menu); + } + + return { handleClickMenu, getMenuList }; + }, + }); +</script> diff --git a/src/components/Dropdown/src/props.ts b/src/components/Dropdown/src/props.ts deleted file mode 100644 index cd298ef..0000000 --- a/src/components/Dropdown/src/props.ts +++ /dev/null @@ -1,26 +0,0 @@ -import type { PropType } from 'vue'; -import type { DropMenu } from './types'; - -export const dropdownProps = { - /** - * the trigger mode which executes the drop-down action - * @default ['hover'] - * @type string[] - */ - trigger: { - type: [Array] as PropType<string[]>, - default: () => { - return ['contextmenu']; - }, - }, -}; -export const basicDropdownProps = Object.assign({}, dropdownProps, { - dropMenuList: { - type: Array as PropType<DropMenu[]>, - default: () => [], - }, - selectedKeys: { - type: Array as PropType<string[]>, - default: () => [], - }, -}); diff --git a/src/components/Dropdown/src/types.ts b/src/components/Dropdown/src/types.ts index 11139fa..0dbf70a 100644 --- a/src/components/Dropdown/src/types.ts +++ b/src/components/Dropdown/src/types.ts @@ -7,4 +7,4 @@ export interface DropMenu { divider?: boolean; } -export type Trigger = 'click' | 'hover' | 'contextMenu'; +// export type Trigger = 'click' | 'hover' | 'contextMenu'; diff --git a/src/components/Excel/index.ts b/src/components/Excel/index.ts index ac36ff8..e5977f0 100644 --- a/src/components/Excel/index.ts +++ b/src/components/Excel/index.ts @@ -1,12 +1,8 @@ import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; -import { withInstall } from '../util'; - export const ImpExcel = createAsyncComponent(() => import('./src/ImportExcel.vue')); export const ExpExcelModel = createAsyncComponent(() => import('./src/ExportExcelModel.vue')); -withInstall(ImpExcel, ExpExcelModel); - export * from './src/types'; export { jsonToSheetXlsx, aoaToSheetXlsx } from './src/Export2Excel'; diff --git a/src/components/Icon/index.less b/src/components/Icon/index.less deleted file mode 100644 index 9e443e3..0000000 --- a/src/components/Icon/index.less +++ /dev/null @@ -1,14 +0,0 @@ -@import (reference) '../../design/index.less'; - -.app-iconify { - display: inline-block; - vertical-align: middle; -} - -span.iconify { - display: block; - min-width: 1em; - min-height: 1em; - background: @iconify-bg-color; - border-radius: 100%; -} diff --git a/src/components/Icon/index.ts b/src/components/Icon/index.ts new file mode 100644 index 0000000..d7993f0 --- /dev/null +++ b/src/components/Icon/index.ts @@ -0,0 +1,7 @@ +import { withInstall } from '../util'; +import Icon from './src/index.vue'; + +withInstall(Icon); + +export { Icon }; +export default Icon; diff --git a/src/components/Icon/index.tsx b/src/components/Icon/src/index.vue index ca2949b..f26503a 100644 --- a/src/components/Icon/index.tsx +++ b/src/components/Icon/src/index.vue @@ -1,83 +1,100 @@ -import './index.less'; - -import type { PropType } from 'vue'; -import { - defineComponent, - ref, - watch, - onMounted, - nextTick, - unref, - computed, - CSSProperties, -} from 'vue'; -import Iconify from '@purge-icons/generated'; -import { isString } from '/@/utils/is'; -import { propTypes } from '/@/utils/propTypes'; -export default defineComponent({ - name: 'GIcon', - props: { - // icon name - icon: propTypes.string, - // icon color - color: propTypes.string, - // icon size - size: { - type: [String, Number] as PropType<string | number>, - default: 16, +<template> + <span ref="elRef" :class="[$attrs.class, 'app-iconify anticon']" :style="getWrapStyle" /> +</template> +<script lang="ts"> + import type { PropType } from 'vue'; + import { + defineComponent, + ref, + watch, + onMounted, + nextTick, + unref, + computed, + CSSProperties, + } from 'vue'; + import Iconify from '@purge-icons/generated'; + import { isString } from '/@/utils/is'; + import { propTypes } from '/@/utils/propTypes'; + export default defineComponent({ + name: 'GIcon', + props: { + // icon name + icon: propTypes.string, + // icon color + color: propTypes.string, + // icon size + size: { + type: [String, Number] as PropType<string | number>, + default: 16, + }, + prefix: propTypes.string.def(''), }, - prefix: propTypes.string.def(''), - }, - setup(props, { attrs }) { - const elRef = ref<ElRef>(null); + setup(props) { + const elRef = ref<ElRef>(null); - const getIconRef = computed(() => { - const { icon, prefix } = props; - return `${prefix ? prefix + ':' : ''}${icon}`; - }); + const getIconRef = computed(() => { + const { icon, prefix } = props; + return `${prefix ? prefix + ':' : ''}${icon}`; + }); - const update = async () => { - const el = unref(elRef); - if (el) { - await nextTick(); - const icon = unref(getIconRef); + const update = async () => { + const el = unref(elRef); + if (el) { + await nextTick(); + const icon = unref(getIconRef); - const svg = Iconify.renderSVG(icon, {}); + const svg = Iconify.renderSVG(icon, {}); - if (svg) { - el.textContent = ''; - el.appendChild(svg); - } else { - const span = document.createElement('span'); - span.className = 'iconify'; - span.dataset.icon = icon; - el.textContent = ''; - el.appendChild(span); + if (svg) { + el.textContent = ''; + el.appendChild(svg); + } else { + const span = document.createElement('span'); + span.className = 'iconify'; + span.dataset.icon = icon; + el.textContent = ''; + el.appendChild(span); + } } - } - }; + }; - const wrapStyleRef = computed( - (): CSSProperties => { - const { size, color } = props; - let fs = size; - if (isString(size)) { - fs = parseInt(size, 10); + const getWrapStyle = computed( + (): CSSProperties => { + const { size, color } = props; + let fs = size; + if (isString(size)) { + fs = parseInt(size, 10); + } + return { + fontSize: `${fs}px`, + color, + display: 'inline-flex', + }; } - return { - fontSize: `${fs}px`, - color, - display: 'inline-flex', - }; - } - ); + ); + + watch(() => props.icon, update, { flush: 'post' }); - watch(() => props.icon, update, { flush: 'post' }); + onMounted(update); + + return { elRef, getWrapStyle }; + }, + }); +</script> +<style lang="less"> + @import (reference) '../../../design/index.less'; - onMounted(update); + .app-iconify { + display: inline-block; + vertical-align: middle; + } - return () => ( - <span ref={elRef} class={[attrs.class, 'app-iconify anticon']} style={unref(wrapStyleRef)} /> - ); - }, -}); + span.iconify { + display: block; + min-width: 1em; + min-height: 1em; + background: @iconify-bg-color; + border-radius: 100%; + } +</style> diff --git a/src/components/Loading/index.ts b/src/components/Loading/index.ts index d2b30e9..2e65df7 100644 --- a/src/components/Loading/index.ts +++ b/src/components/Loading/index.ts @@ -1,9 +1,5 @@ -import './src/indicator'; -import { withInstall } from '../util'; - import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; export const Loading = createAsyncComponent(() => import('./src/index.vue')); -withInstall(Loading); export { useLoading } from './src/useLoading'; export { createLoading } from './src/createLoading'; diff --git a/src/components/Loading/src/indicator.tsx b/src/components/Loading/src/indicator.tsx deleted file mode 100644 index f74bc0e..0000000 --- a/src/components/Loading/src/indicator.tsx +++ /dev/null @@ -1,9 +0,0 @@ -// If you need to modify the default icon, you can open the comment and modify it here - -// import { Spin } from 'ant-design-vue'; -// import { LoadingOutlined } from '@ant-design/icons-vue'; -// Spin.setDefaultIndicator({ -// indicator: () => { -// return <LoadingOutlined spin />; -// }, -// }); diff --git a/src/components/Loading/src/useLoading.ts b/src/components/Loading/src/useLoading.ts index 10f8e31..04d3084 100644 --- a/src/components/Loading/src/useLoading.ts +++ b/src/components/Loading/src/useLoading.ts @@ -8,6 +8,10 @@ export interface UseLoadingOptions { props?: Partial<LoadingProps>; } +interface Fn { + (): void; +} + export function useLoading(props: Partial<LoadingProps>): [Fn, Fn]; export function useLoading(opt: Partial<UseLoadingOptions>): [Fn, Fn]; diff --git a/src/components/Markdown/index.ts b/src/components/Markdown/index.ts index 1ad8a72..1e59bba 100644 --- a/src/components/Markdown/index.ts +++ b/src/components/Markdown/index.ts @@ -1,8 +1,4 @@ -import { withInstall } from '../util'; - import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; export const MarkDown = createAsyncComponent(() => import('./src/index.vue')); -withInstall(MarkDown); - export * from './src/types'; diff --git a/src/components/Markdown/src/index.vue b/src/components/Markdown/src/index.vue index 29af7fe..21e0113 100644 --- a/src/components/Markdown/src/index.vue +++ b/src/components/Markdown/src/index.vue @@ -1,17 +1,8 @@ <template> - <div class="markdown" ref="wrapRef" /> + <div ref="wrapRef" /> </template> <script lang="ts"> - import { - defineComponent, - ref, - onMounted, - unref, - onUnmounted, - nextTick, - // watch, - computed, - } from 'vue'; + import { defineComponent, ref, onMounted, unref, onUnmounted, nextTick, computed } from 'vue'; import Vditor from 'vditor'; import 'vditor/dist/index.css'; @@ -75,21 +66,6 @@ initedRef.value = true; } - // watch( - // () => props.value, - // () => { - // nextTick(() => { - // const vditor = unref(vditorRef); - // if (unref(initedRef) && props.value && vditor) { - // vditor.setValue(props.value); - // } - // }); - // }, - // { - // immediate: true, - // } - // ); - onMounted(() => { nextTick(() => { init(); diff --git a/src/components/Menu/index.ts b/src/components/Menu/index.ts index 1e2fa32..c68b797 100644 --- a/src/components/Menu/index.ts +++ b/src/components/Menu/index.ts @@ -1,13 +1,5 @@ -import { withInstall } from '../util'; - import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; -export const BasicMenu = createAsyncComponent(() => import('./src/BasicMenu.vue'), { - loading: false, -}); - -export const MenuTag = createAsyncComponent(() => import('./src/components/MenuItemTag.vue'), { - loading: false, -}); +export const BasicMenu = createAsyncComponent(() => import('./src/BasicMenu.vue')); -withInstall(BasicMenu); +export const MenuTag = createAsyncComponent(() => import('./src/components/MenuItemTag.vue')); diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts index 8b96e64..812549c 100644 --- a/src/components/Modal/index.ts +++ b/src/components/Modal/index.ts @@ -1,11 +1,10 @@ import './src/index.less'; import { withInstall } from '../util'; -import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; - -export const BasicModal = createAsyncComponent(() => import('./src/BasicModal')); +import BasicModal from './src/BasicModal'; withInstall(BasicModal); +export { BasicModal }; export { useModalContext } from './src/useModalContext'; export { useModal, useModalInner } from './src/useModal'; export * from './src/types'; diff --git a/src/components/Page/index.ts b/src/components/Page/index.ts index 9ceda93..ae205ec 100644 --- a/src/components/Page/index.ts +++ b/src/components/Page/index.ts @@ -1,6 +1,2 @@ -import { withInstall } from '../util'; - import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; export const PageFooter = createAsyncComponent(() => import('./src/PageFooter.vue')); - -withInstall(PageFooter); diff --git a/src/components/Qrcode/index.ts b/src/components/Qrcode/index.ts index 6f6ed7f..df76226 100644 --- a/src/components/Qrcode/index.ts +++ b/src/components/Qrcode/index.ts @@ -1,7 +1,4 @@ -import { withInstall } from '../util'; - import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; export const QrCode = createAsyncComponent(() => import('./src/index.vue')); -withInstall(QrCode); export * from './src/types'; diff --git a/src/components/Scrollbar/index.ts b/src/components/Scrollbar/index.ts index b8c734f..d89a4ca 100644 --- a/src/components/Scrollbar/index.ts +++ b/src/components/Scrollbar/index.ts @@ -3,10 +3,9 @@ */ import { withInstall } from '../util'; - -import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; -export const Scrollbar = createAsyncComponent(() => import('./src/index.vue')); +import Scrollbar from './src/index.vue'; withInstall(Scrollbar); +export { Scrollbar }; export type { ScrollbarType } from './src/types'; diff --git a/src/components/StrengthMeter/index.ts b/src/components/StrengthMeter/index.ts new file mode 100644 index 0000000..28bcfff --- /dev/null +++ b/src/components/StrengthMeter/index.ts @@ -0,0 +1,3 @@ +import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; + +export const StrengthMeter = createAsyncComponent(() => import('./src/index.vue')); diff --git a/src/components/StrengthMeter/index.tsx b/src/components/StrengthMeter/index.tsx deleted file mode 100644 index e55f67e..0000000 --- a/src/components/StrengthMeter/index.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { withInstall } from '../util'; - -import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; - -export const StrengthMeter = createAsyncComponent(() => import('./src/index')); - -withInstall(StrengthMeter); diff --git a/src/components/StrengthMeter/src/index.tsx b/src/components/StrengthMeter/src/index.tsx deleted file mode 100644 index 2d23bf2..0000000 --- a/src/components/StrengthMeter/src/index.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import './index.less'; - -import { PropType } from 'vue'; - -import { defineComponent, computed, ref, watch, unref, watchEffect } from 'vue'; - -import { Input } from 'ant-design-vue'; - -import zxcvbn from 'zxcvbn'; -import { extendSlots } from '/@/utils/helper/tsxHelper'; -import { propTypes } from '/@/utils/propTypes'; - -const prefixCls = 'strength-meter'; -export default defineComponent({ - name: 'StrengthMeter', - props: { - value: propTypes.string, - - userInputs: { - type: Array as PropType<string[]>, - default: () => [], - }, - - showInput: propTypes.bool.def(true), - disabled: propTypes.bool, - }, - emits: ['score-change', 'change'], - setup(props, { emit, attrs, slots }) { - const innerValueRef = ref(''); - const getPasswordStrength = computed(() => { - const { userInputs, disabled } = props; - if (disabled) return null; - const innerValue = unref(innerValueRef); - const score = innerValue - ? zxcvbn(unref(innerValueRef), (userInputs as string[]) || null).score - : null; - emit('score-change', score); - return score; - }); - - function handleChange(e: ChangeEvent) { - innerValueRef.value = e.target.value; - } - - watchEffect(() => { - innerValueRef.value = props.value || ''; - }); - watch( - () => unref(innerValueRef), - (val) => { - emit('change', val); - } - ); - - return () => { - const { showInput, disabled } = props; - return ( - <div class={prefixCls}> - {showInput && ( - <Input.Password - {...attrs} - allowClear={true} - value={unref(innerValueRef)} - onChange={handleChange} - disabled={disabled} - > - {extendSlots(slots)} - </Input.Password> - )} - <div class={`${prefixCls}-bar`}> - <div class={`${prefixCls}-bar__fill`} data-score={unref(getPasswordStrength)}></div> - </div> - </div> - ); - }; - }, -}); diff --git a/src/components/StrengthMeter/src/index.less b/src/components/StrengthMeter/src/index.vue index 6175ca2..75b313c 100644 --- a/src/components/StrengthMeter/src/index.less +++ b/src/components/StrengthMeter/src/index.vue @@ -1,69 +1,156 @@ -@import (reference) '../../../design/index.less'; +<template> + <div :class="prefixCls"> + <InputPassword + v-if="showInput" + v-bind="$attrs" + allowClear + :value="innerValueRef" + @change="handleChange" + :disabled="disabled" + > + <template #[item]="data" v-for="item in Object.keys($slots)"> + <slot :name="item" v-bind="data" /> + </template> + </InputPassword> + <div :class="`${prefixCls}-bar`"> + <div :class="`${prefixCls}-bar--fill`" :data-score="getPasswordStrength"></div> + </div> + </div> +</template> -.strength-meter { - position: relative; +<script lang="ts"> + import { PropType } from 'vue'; - &-bar { - position: relative; - height: 4px; - margin: 10px auto 6px; - background: @disabled-color; - border-radius: 3px; - - &::before, - &::after { - position: absolute; - z-index: 10; - display: block; - width: 20%; - height: inherit; - background: transparent; - border-color: @white; - border-style: solid; - border-width: 0 5px 0 5px; - content: ''; - } + import { defineComponent, computed, ref, watch, unref, watchEffect } from 'vue'; - &::before { - left: 20%; - } + import { Input } from 'ant-design-vue'; - &::after { - right: 20%; - } + import zxcvbn from 'zxcvbn'; + import { propTypes } from '/@/utils/propTypes'; + import { useDesign } from '/@/hooks/web/useDesign'; - &__fill { - position: absolute; - width: 0; - height: inherit; - background: transparent; - border-radius: inherit; - transition: width 0.5s ease-in-out, background 0.25s; + export default defineComponent({ + name: 'StrengthMeter', + components: { InputPassword: Input.Password }, + props: { + value: propTypes.string, - &[data-score='0'] { - width: 20%; - background: darken(@error-color, 10%); + userInputs: { + type: Array as PropType<string[]>, + default: () => [], + }, + + showInput: propTypes.bool.def(true), + disabled: propTypes.bool, + }, + emits: ['score-change', 'change'], + setup(props, { emit }) { + const innerValueRef = ref(''); + const { prefixCls } = useDesign('strength-meter'); + + const getPasswordStrength = computed(() => { + const { userInputs, disabled } = props; + if (disabled) return null; + const innerValue = unref(innerValueRef); + const score = innerValue + ? zxcvbn(unref(innerValueRef), (userInputs as string[]) || null).score + : null; + emit('score-change', score); + return score; + }); + + function handleChange(e: ChangeEvent) { + innerValueRef.value = e.target.value; } - &[data-score='1'] { - width: 40%; - background: @error-color; + watchEffect(() => { + innerValueRef.value = props.value || ''; + }); + watch( + () => unref(innerValueRef), + (val) => { + emit('change', val); + } + ); + + return { + getPasswordStrength, + handleChange, + prefixCls, + innerValueRef, + }; + }, + }); +</script> +<style lang="less" scoped> + @import (reference) '../../../design/index.less'; + @prefix-cls: ~'@{namespace}-strength-meter'; + + .@{prefix-cls} { + position: relative; + + &-bar { + position: relative; + height: 4px; + margin: 10px auto 6px; + background: @disabled-color; + border-radius: 3px; + + &::before, + &::after { + position: absolute; + z-index: 10; + display: block; + width: 20%; + height: inherit; + background: transparent; + border-color: @white; + border-style: solid; + border-width: 0 5px 0 5px; + content: ''; } - &[data-score='2'] { - width: 60%; - background: @warning-color; + &::before { + left: 20%; } - &[data-score='3'] { - width: 80%; - background: fade(@success-color, 50%); + &::after { + right: 20%; } - &[data-score='4'] { - width: 100%; - background: @success-color; + &--fill { + position: absolute; + width: 0; + height: inherit; + background: transparent; + border-radius: inherit; + transition: width 0.5s ease-in-out, background 0.25s; + + &[data-score='0'] { + width: 20%; + background: darken(@error-color, 10%); + } + + &[data-score='1'] { + width: 40%; + background: @error-color; + } + + &[data-score='2'] { + width: 60%; + background: @warning-color; + } + + &[data-score='3'] { + width: 80%; + background: fade(@success-color, 50%); + } + + &[data-score='4'] { + width: 100%; + background: @success-color; + } } } } -} +</style> diff --git a/src/components/Tinymce/index.ts b/src/components/Tinymce/index.ts index 0a31c55..e4633e8 100644 --- a/src/components/Tinymce/index.ts +++ b/src/components/Tinymce/index.ts @@ -1,6 +1,2 @@ -import { withInstall } from '../util'; - import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; export const Tinymce = createAsyncComponent(() => import('./src/Editor.vue')); - -withInstall(Tinymce); diff --git a/src/components/Tree/index.ts b/src/components/Tree/index.ts index 9445da6..61eb3e8 100644 --- a/src/components/Tree/index.ts +++ b/src/components/Tree/index.ts @@ -1,9 +1,6 @@ import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; -import { withInstall } from '../util'; export const BasicTree = createAsyncComponent(() => import('./src/BasicTree')); -withInstall(BasicTree); - export type { ContextMenuItem } from '/@/hooks/web/useContextMenu'; export * from './src/types'; diff --git a/src/components/Upload/index.ts b/src/components/Upload/index.ts index a923c2f..af98052 100644 --- a/src/components/Upload/index.ts +++ b/src/components/Upload/index.ts @@ -1,6 +1,2 @@ -import { withInstall } from '../util'; - import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; export const BasicUpload = createAsyncComponent(() => import('./src/BasicUpload.vue')); - -withInstall(BasicUpload); diff --git a/src/components/Verify/index.ts b/src/components/Verify/index.ts index c26ffd3..720d405 100644 --- a/src/components/Verify/index.ts +++ b/src/components/Verify/index.ts @@ -1,10 +1,6 @@ -import { withInstall } from '../util'; - import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; export const BasicDragVerify = createAsyncComponent(() => import('./src/DragVerify')); export const RotateDragVerify = createAsyncComponent(() => import('./src/ImgRotate')); -withInstall(BasicDragVerify, RotateDragVerify); - export * from './src/types'; diff --git a/src/components/VirtualScroll/index.ts b/src/components/VirtualScroll/index.ts index d894c76..2875a53 100644 --- a/src/components/VirtualScroll/index.ts +++ b/src/components/VirtualScroll/index.ts @@ -1,7 +1,3 @@ -import { withInstall } from '../util'; - import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; export const VScroll = createAsyncComponent(() => import('./src/index')); - -withInstall(VScroll); diff --git a/src/layouts/default/header/index.vue b/src/layouts/default/header/index.vue index dfdbdac..000ab0a 100644 --- a/src/layouts/default/header/index.vue +++ b/src/layouts/default/header/index.vue @@ -84,6 +84,7 @@ } from './components'; import { useAppInject } from '/@/hooks/web/useAppInject'; import { useDesign } from '/@/hooks/web/useDesign'; + import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; export default defineComponent({ name: 'LayoutHeader',