gi-component 0.0.49 → 0.0.51

package/packages/components/grid/src/utils/responsive-observe.ts

@@ -1,135 +0,0 @@
-// https://github.com/ant-design/ant-design/blob/master/components/_util/responsiveObserve.ts
-
-export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-export type BreakpointMap = Partial<Record<Breakpoint, string>>
-export type ScreenMap = Partial<Record<Breakpoint, boolean>>
-
-export const responsiveArray: Breakpoint[] = [
-  'xxl',
-  'xl',
-  'lg',
-  'md',
-  'sm',
-  'xs'
-]
-
-export const responsiveMap: BreakpointMap = {
-  xs: '(max-width: 575px)',
-  sm: '(min-width: 576px)',
-  md: '(min-width: 768px)',
-  lg: '(min-width: 992px)',
-  xl: '(min-width: 1200px)',
-  xxl: '(min-width: 1600px)'
-}
-
-type SubscribeFunc = (
-  screens: ScreenMap,
-  breakpointChecked: Breakpoint
-) => void
-
-interface MediaQueryResult {
-  matches: boolean
-}
-
-type MediaQueryListener = (matches: MediaQueryResult) => void
-
-let subscribers: Array<{
-  token: string
-  func: SubscribeFunc
-}> = []
-let subUid = -1
-let screens = {}
-
-const responsiveObserve: {
-  matchHandlers: {
-    [key: string]: {
-      mql: MediaQueryList
-      listener: MediaQueryListener
-    }
-  }
-  dispatch: (pointMap: ScreenMap, breakpointChecked: Breakpoint) => boolean
-  subscribe: (func: SubscribeFunc) => string
-  unsubscribe: (token: string) => void
-  unregister: () => void
-  register: () => void
-} = {
-  matchHandlers: {},
-  dispatch(pointMap: ScreenMap, breakpointChecked: Breakpoint) {
-    screens = pointMap
-    if (subscribers.length < 1) {
-      return false
-    }
-
-    subscribers.forEach((item) => {
-      item.func(screens, breakpointChecked)
-    })
-
-    return true
-  },
-  subscribe(func: SubscribeFunc) {
-    if (subscribers.length === 0) {
-      this.register()
-    }
-    const token = (++subUid).toString()
-    subscribers.push({
-      token,
-      func
-    })
-    func(screens, null as unknown as Breakpoint)
-    return token
-  },
-  unsubscribe(token: string) {
-    subscribers = subscribers.filter((item) => item.token !== token)
-    if (subscribers.length === 0) {
-      this.unregister()
-    }
-  },
-  unregister() {
-    (Object.keys(responsiveMap) as Breakpoint[]).forEach(
-      (screen: Breakpoint) => {
-        const matchMediaQuery = responsiveMap[screen]
-        if (!matchMediaQuery) return
-        const handler = this.matchHandlers[matchMediaQuery]
-        if (handler && handler.mql && handler.listener) {
-          if (handler.mql.removeEventListener) {
-            handler.mql.removeEventListener('change', handler.listener)
-          } else {
-            handler.mql.removeListener(handler.listener)
-          }
-        }
-      }
-    )
-  },
-  register() {
-    (Object.keys(responsiveMap) as Breakpoint[]).forEach(
-      (screen: Breakpoint) => {
-        const matchMediaQuery = responsiveMap[screen]
-        if (!matchMediaQuery) return
-        const listener = ({ matches }: MediaQueryResult) => {
-          this.dispatch(
-            {
-              ...screens,
-              [screen]: matches
-            },
-            screen
-          )
-        }
-        const mql = window.matchMedia(matchMediaQuery)
-        if (mql.addEventListener) {
-          mql.addEventListener('change', listener)
-        } else {
-          mql.addListener(listener)
-        }
-
-        this.matchHandlers[matchMediaQuery] = {
-          mql,
-          listener
-        }
-
-        listener(mql)
-      }
-    )
-  }
-}
-
-export default responsiveObserve

package/packages/components/input-group/index.ts

@@ -1,5 +0,0 @@
-import InputGroup from './src/input-group.vue'
-
-export type InputGroupInstance = InstanceType<typeof InputGroup>
-export * from './src/type'
-export default InputGroup

package/packages/components/input-group/src/input-group.vue

@@ -1,79 +0,0 @@
-<template>
-  <div :class="b('input-group')">
-    <slot></slot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useBemClass } from '../../../hooks'
-
-const { b } = useBemClass()
-</script>
-
-<style lang="scss" scoped>
-@use '../../../styles/var.scss' as a;
-
-:deep(.el-button + .el-button) {
-  margin-left: 0;
-}
-
-.#{a.$prefix}-input-group {
-  display: flex;
-
-  > :deep(*:not(:last-child)) {
-    margin-right: -1px;
-  }
-
-  > :deep(*:first-child:last-child) {
-    border-radius: var(--el-border-radius-base);
-
-    .el-input__wrapper,
-    .el-select__wrapper {
-      border-radius: var(--el-border-radius-base);
-    }
-  }
-
-  > :deep(*:not(:first-child):not(:last-child)) {
-    border-radius: 0;
-
-    .el-input__wrapper,
-    .el-select__wrapper {
-      border-radius: 0;
-    }
-  }
-
-  > :deep(*:first-child) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-
-    .el-input__wrapper,
-    .el-select__wrapper {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-
-  > :deep(*:last-child) {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-
-    .el-input__wrapper,
-    .el-select__wrapper {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-  }
-
-  > :deep(*:hover, *:focus, *:active) {
-    z-index: 1;
-  }
-
-  > :deep(*) {
-
-    .el-input__wrapper.is-focus,
-    .el-select__wrapper.is-focused {
-      z-index: 2;
-    }
-  }
-}
-</style>

package/packages/components/input-group/src/type.ts

@@ -1 +0,0 @@
-export interface InputGroupProps {}

package/packages/components/input-search/index.ts

@@ -1,5 +0,0 @@
-import InputSearch from './src/input-search.vue'
-
-export type InputSearchInstance = InstanceType<typeof InputSearch>
-export * from './src/type'
-export default InputSearch

package/packages/components/input-search/src/input-search.vue

@@ -1,48 +0,0 @@
-<template>
-  <InputGroup :class="b('input-search')">
-    <ElInput v-model="model" :disabled="props.disabled" :readonly="!props.disabled" :placeholder="props.placeholder">
-    </ElInput>
-    <ElButton v-if="showButton" :icon="Search" :disabled="props.disabled" @click="emit('search')"></ElButton>
-    <ElButton v-if="showButton" :icon="Close" :disabled="props.disabled" @click="emit('clear')"></ElButton>
-  </InputGroup>
-</template>
-
-<script setup lang="ts">
-import type { InputSearchProps } from './type'
-import { Close, Search } from '@element-plus/icons-vue'
-import { ElButton, ElInput } from 'element-plus'
-import { computed } from 'vue'
-import { useBemClass } from '../../../hooks'
-import InputGroup from '../../input-group/src/input-group.vue'
-
-const model = defineModel({ type: String })
-
-const props = withDefaults(defineProps<InputSearchProps>(), {
-  disabled: false,
-  readonly: false,
-  placeholder: '请选择',
-  disabledHideButton: false
-})
-
-const emit = defineEmits<{
-  (e: 'search'): void
-  (e: 'clear'): void
-}>()
-
-const { b } = useBemClass()
-
-const showButton = computed(() => {
-  if (props.readonly) return false
-  if (props.disabled) {
-    return !props.disabledHideButton
-  }
-  return true
-})
-</script>
-
-<style lang="scss" scoped>
-:deep(.el-button) {
-  padding-right: 12px;
-  padding-left: 12px;
-}
-</style>

package/packages/components/input-search/src/type.ts

@@ -1,6 +0,0 @@
-export interface InputSearchProps {
-  disabled?: boolean
-  readonly?: boolean
-  placeholder?: string
-  disabledHideButton?: boolean // 禁用的时候隐藏按钮
-}

package/packages/components/nav-tabs/index.ts

@@ -1,8 +0,0 @@
-import type { DefineComponent } from 'vue'
-import type { NavTabBase, NavTabsProps } from './src/type'
-import NavTabs from './src/nav-tabs.vue'
-
-export type NavTabsInstance<T extends NavTabBase = NavTabBase> = DefineComponent<NavTabsProps<T>>
-
-export * from './src/type'
-export default NavTabs

package/packages/components/nav-tabs/src/nav-tabs.vue

@@ -1,235 +0,0 @@
-<template>
-  <div ref="rootRef" :class="[b('nav-tabs'), { [b('nav-tabs--custom')]: props.custom }]">
-    <div v-if="slots['left-extra']" :class="b('nav-tabs__left')">
-      <slot name="left-extra" />
-    </div>
-    <div :class="b('nav-tabs__scroll-wrap')">
-      <button ref="leftBtnRef" type="button" :class="[b('nav-tabs__nav-btn'), b('nav-tabs__nav-btn--prev')]">
-        <ElIcon>
-          <ArrowLeft />
-        </ElIcon>
-      </button>
-      <div ref="scrollRef" :class="b('nav-tabs__scroll')">
-        <div v-for="item in props.data" :key="item.value" :class="[
-          b('nav-tabs-item'),
-          props.custom
-            ? b('nav-tabs-item--custom')
-            : {
-              [b('nav-tabs-item--active')]: model === item.value,
-              [b('nav-tabs-item--disabled')]: item.disabled,
-            },
-        ]" :data-value="item.value" @click="handleItemClick(item)">
-          <slot :item="item" :active="model === item.value" :disabled="!!item.disabled">
-            {{ item.label }}
-          </slot>
-        </div>
-      </div>
-      <button ref="rightBtnRef" type="button" :class="[b('nav-tabs__nav-btn'), b('nav-tabs__nav-btn--next')]">
-        <ElIcon>
-          <ArrowRight />
-        </ElIcon>
-      </button>
-    </div>
-    <div v-if="slots['right-extra']" :class="b('nav-tabs__right')">
-      <slot name="right-extra" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup generic="T extends NavTabBase">
-import type { NavTabBase, NavTabSlotProps, NavTabsProps } from './type.ts'
-import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
-import { ElIcon } from 'element-plus'
-import { ref, useSlots } from 'vue'
-import { useBemClass, useNavTabs } from '../../../hooks'
-
-const model = defineModel<string | number>()
-
-const props = withDefaults(defineProps<NavTabsProps<T>>(), {
-  data: () => [],
-  wheelSpeed: 1,
-  custom: false
-})
-
-const emits = defineEmits<{
-  (e: 'change', value: string | number): void
-}>()
-
-defineSlots<{
-  'default': (props: NavTabSlotProps<T>) => void
-  'left-extra': () => void
-  'right-extra': () => void
-}>()
-
-const slots = useSlots()
-const { b } = useBemClass()
-
-const rootRef = ref<HTMLElement | null>(null)
-const scrollRef = ref<HTMLElement | null>(null)
-const leftBtnRef = ref<HTMLElement | null>(null)
-const rightBtnRef = ref<HTMLElement | null>(null)
-
-const tabItemClassName = b('nav-tabs-item')
-
-useNavTabs({
-  tabEl: rootRef,
-  tabScrollEl: scrollRef,
-  tabItemClassName,
-  activeValue: model,
-  wheelSpeed: props.wheelSpeed,
-  tabLeftScrollBtnEl: leftBtnRef,
-  tabRightScrollBtnEl: rightBtnRef,
-  navBtnDisabledClassName: b('nav-tabs__nav-btn--disabled')
-})
-
-function handleItemClick(item: T) {
-  if (item.disabled) {
-    return
-  }
-  model.value = item.value
-  emits('change', item.value)
-}
-</script>
-
-<style lang="scss" scoped>
-@use '../../../styles/var.scss' as a;
-
-.#{a.$prefix}-nav-tabs {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 40px;
-  box-sizing: border-box;
-
-  &__left {
-    flex-shrink: 0;
-    // margin-right: 8px;
-  }
-
-  &__right {
-    flex-shrink: 0;
-    //margin-left: 8px;
-  }
-
-  &__scroll-wrap {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    min-width: 0;
-    overflow: hidden;
-    height: 100%;
-  }
-
-  &__scroll {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    overflow-x: auto;
-    overflow-y: hidden;
-    scrollbar-width: none;
-    height: 100%;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  &__nav-btn {
-    flex-shrink: 0;
-    display: none;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    padding: 0;
-    border: none;
-    background: transparent;
-    color: var(--el-text-color-secondary);
-    cursor: pointer;
-    outline: none;
-    margin: 0 4px;
-
-    &--prev {
-      margin-left: 6px;
-    }
-
-    &--next {
-      margin-right: 6px;
-    }
-
-    &:hover {
-      color: var(--el-color-primary);
-      background-color: var(--el-fill-color-light);
-    }
-
-    &:active {
-      background-color: var(--el-fill-color);
-    }
-
-    &--disabled {
-      color: var(--el-text-color-disabled);
-      cursor: not-allowed;
-      pointer-events: none;
-
-      &:hover,
-      &:active {
-        color: var(--el-text-color-disabled);
-        background-color: transparent;
-      }
-    }
-  }
-
-  &:not(.#{a.$prefix}-nav-tabs--custom) {
-    .#{a.$prefix}-nav-tabs-item {
-      padding: 0 16px;
-      color: var(--el-text-color-regular);
-      position: relative;
-      font-size: 14px;
-    }
-
-    .#{a.$prefix}-nav-tabs-item--active {
-      color: var(--el-color-primary);
-      font-weight: 500;
-
-      &::after {
-        content: '';
-        position: absolute;
-        left: 16px;
-        right: 16px;
-        bottom: 0;
-        height: 2px;
-        background: var(--el-color-primary);
-      }
-    }
-
-    .#{a.$prefix}-nav-tabs-item--disabled {
-      color: var(--el-text-color-disabled);
-      cursor: not-allowed;
-    }
-  }
-}
-
-.#{a.$prefix}-nav-tabs--custom {
-  .#{a.$prefix}-nav-tabs__scroll {
-    gap: 8px;
-  }
-
-  .#{a.$prefix}-nav-tabs-item {
-    padding: 0;
-    height: auto;
-    line-height: inherit;
-  }
-}
-
-.#{a.$prefix}-nav-tabs-item {
-  flex-shrink: 0;
-  cursor: pointer;
-  user-select: none;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-</style>

package/packages/components/nav-tabs/src/type.ts

@@ -1,24 +0,0 @@
-/** 页签项基础字段（必填 + 可选 disabled） */
-export interface NavTabBase {
-  label: string
-  value: string | number
-  disabled?: boolean
-}
-
-/** 兼容旧用法：无扩展字段时的默认项类型 */
-export type NavTabItem = NavTabBase
-
-/** 组件 Props，T 由 data 数组元素类型推导 */
-export interface NavTabsProps<T extends NavTabBase = NavTabBase> {
-  data?: T[]
-  wheelSpeed?: number
-  /** 自定义项样式：无 padding，不应用 --active / --disabled 修饰类 */
-  custom?: boolean
-}
-
-/** 默认插槽作用域 */
-export type NavTabSlotProps<T extends NavTabBase = NavTabBase> = {
-  item: T
-  active: boolean
-  disabled: boolean
-}

package/packages/components/page-layout/index.ts

@@ -1,5 +0,0 @@
-import PageLayout from './src/page-layout.vue'
-
-export type PageLayoutInstance = InstanceType<typeof PageLayout>
-export * from './src/type'
-export default PageLayout