feat(其它变更): 临时保存修改

docs/examples/button/basic.vue

@@ -1,42 +1,19 @@
 <template>
     <el-row class="mb-4">
-        <el-button>Default</el-button>
+        <!-- <el-button>Default</el-button>
         <el-button type="primary">Primary</el-button>
         <el-button type="success">Success</el-button>
         <el-button type="info">Info</el-button>
         <el-button type="warning">Warning</el-button>
-        <el-button type="danger">Danger</el-button>
-    </el-row>
-
-    <el-row class="mb-4">
-        <el-button plain>Plain</el-button>
-        <el-button type="primary" plain>Primary</el-button>
-        <el-button type="success" plain>Success</el-button>
-        <el-button type="info" plain>Info</el-button>
-        <el-button type="warning" plain>Warning</el-button>
-        <el-button type="danger" plain>Danger</el-button>
-    </el-row>
-
-    <el-row class="mb-4">
-        <el-button round>Round</el-button>
-        <el-button type="primary" round>Primary</el-button>
-        <el-button type="success" round>Success</el-button>
-        <el-button type="info" round>Info</el-button>
-        <el-button type="warning" round>Warning</el-button>
-        <el-button type="danger" round>Danger</el-button>
-    </el-row>
+        <el-button type="danger">Danger</el-button> -->
 
-    <el-row>
-        <el-button :icon="Search" circle />
-        <el-button type="primary" :icon="Edit" circle />
-        <el-button type="success" :icon="Check" circle />
-        <el-button type="info" :icon="Message" circle />
-        <el-button type="warning" :icon="Star" circle />
-        <el-button type="danger" :icon="Delete" circle />
+        <UIButton>button1 </UIButton>
+        <UIButton :width="100">button2</UIButton>
     </el-row>
 </template>
 
 <script lang="ts" setup>
-import { Check, Delete, Edit, Message, Search, Star } from '@element-plus/icons-vue'
-// import { UIButton } from '@kankan-components/components'
+// import { Check, Delete, Edit, Message, Search, Star } from '@element-plus/icons-vue'
+import { UIButton } from '@kankan-components/components'
+import '@kankan-components/theme-chalk/dist/index.css'
 </script>

packages/components/basic/button/src/button.vue

@@ -22,7 +22,7 @@ const className = computed(() => (props.color ? custom : props.type))
 
 const style = computed(() => {
     const style = {
-        width: props.width ? normalizeUnitToStyle(props.width) : 0,
+        width: props.width ? normalizeUnitToStyle(props.width) : 'auto',
         '--color': '',
     }
 

packages/components/basic/cropper/src/cropper.vue

@@ -124,9 +124,10 @@ const clickHandler = async (status: string) => {
         if (props.showSize) {
             data.push(sizeType.value)
         }
-        props.cb && props.cb('', data)
+        props.cb?.('', data)
+        // props.cb && props.cb('', data)
     } else {
-        props.cb && props.cb()
+        props.cb?.()
     }
 }
 </script>

packages/components/basic/floating/src/floating.vue

@@ -36,7 +36,7 @@ const emit = defineEmits(['leave', 'enter'])
 // 确定方向
 const dires = computed(() => {
     const dire = props.dire || `${Vertical.bottom}${Divide}${Horizontal.left}`
-    const isPreset = (preset, val) => Object.keys(preset).some(key => preset[key] === val)
+    const isPreset = (preset: { [x: string]: any; center?: string; right?: string; left?: string; top?: string; bottom?: string }, val: string) => Object.keys(preset).some(key => preset[key] === val)
 
     let [horizontal, vertical] = dire.split(Divide)
 

packages/components/basic/gate/constant.ts

@@ -1 +0,0 @@
-export const Relation = Symbol('relation')

packages/components/basic/gate/index.ts

@@ -1,4 +0,0 @@
-import Gate from './layer.vue'
-import GateContent from './content.vue'
-
-export { Gate, GateContent }

packages/components/basic/gate/src/constant.ts

@@ -0,0 +1,5 @@
+import type { InjectionKey, Ref } from 'vue'
+export interface RelationValue {
+    value: Ref<boolean>[]
+}
+export const Relation: InjectionKey<RelationValue> = Symbol('relation')

packages/components/basic/gate/src/gate.vue

@@ -0,0 +1,51 @@
+<template>
+    <div
+        class="ui-gate-layer"
+        :style="{
+            height: height ? normalizeUnitToStyle(height) : 'auto',
+            '--len': contentInstances.length,
+            '--current': slideIndex,
+        }"
+    >
+        <div class="ui-gate-slides">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+// watchEffect
+import { computed, defineProps, provide, ref, watch } from 'vue'
+import { normalizeUnitToStyle } from '@kankan-components/utils'
+import { Relation } from './constant'
+
+defineOptions({
+    name: 'UIGate',
+})
+
+const contentInstances = ref([])
+const props = defineProps({
+    index: {
+        type: [Number, String],
+        default: 0,
+    },
+    height: {
+        type: [Number, String],
+    },
+})
+
+const slideIndex = computed(() => (props.index > contentInstances.value.length - 1 ? contentInstances.value.length - 1 : props.index < 0 ? 0 : props.index))
+
+watch([contentInstances, slideIndex], () => {
+    for (let i = 0; i < contentInstances.value.length; i++) {
+        const instance = contentInstances.value[i]
+        instance.value = i === slideIndex.value
+    }
+})
+
+provide(Relation, contentInstances)
+</script>
+
+<!-- <script>
+export default { name: 'UiGate' }
+</script> -->

packages/components/basic/gate/src/index.ts

@@ -0,0 +1,4 @@
+// import Gate from '../layer.vue'
+// import GateContent from './gateCotent.vue'
+
+// export { Gate, GateContent }

packages/components/basic/gateContent/src/constant.ts

@@ -0,0 +1,5 @@
+import type { InjectionKey, Ref } from 'vue'
+export interface RelationValue {
+    value: Ref<boolean>[]
+}
+export const Relation: InjectionKey<RelationValue> = Symbol('relation')

packages/components/basic/gate/content.vue

@@ -14,14 +14,14 @@ defineOptions({
 })
 
 const active = ref(false)
-const brotherInstances = inject(Relation).value
+const brotherInstances = inject(Relation)
 
 if (brotherInstances) {
-    onBeforeMount(() => brotherInstances.push(active))
+    onBeforeMount(() => brotherInstances.value.push(active))
     onUnmounted(() => {
-        const index = brotherInstances.indexOf(active)
+        const index = brotherInstances.value.indexOf(active)
         if (~index) {
-            brotherInstances.splice(index, 1)
+            brotherInstances.value.splice(index, 1)
         }
     })
 }

packages/components/basic/gateContent/src/index.ts

@@ -0,0 +1,4 @@
+import Gate from '../layer.vue'
+import GateContent from './content.vue'
+
+export { Gate, GateContent }

packages/components/basic/slide/index.vue

@@ -16,7 +16,7 @@
 <script lang="ts" setup>
 import { defineProps, ref, watchEffect } from 'vue'
 import UIIcon from '@kankan-components/components/basic/icon'
-import { Gate, GateContent } from '../gate'
+import { Gate, GateContent } from '../gate/src/src'
 
 defineOptions({
     name: 'UISlide',

packages/hooks/use-namespace/index.ts

@@ -0,0 +1,80 @@
+import { useGlobalConfig } from '../use-global-config'
+
+export const defaultNamespace = 'el'
+const statePrefix = 'is-'
+
+const _bem = (namespace: string, block: string, blockSuffix: string, element: string, modifier: string) => {
+    let cls = `${namespace}-${block}`
+    if (blockSuffix) {
+        cls += `-${blockSuffix}`
+    }
+    if (element) {
+        cls += `__${element}`
+    }
+    if (modifier) {
+        cls += `--${modifier}`
+    }
+    return cls
+}
+
+export const useNamespace = (block: string) => {
+    const namespace = useGlobalConfig('namespace', defaultNamespace)
+    const b = (blockSuffix = '') => _bem(namespace.value, block, blockSuffix, '', '')
+    const e = (element?: string) => (element ? _bem(namespace.value, block, '', element, '') : '')
+    const m = (modifier?: string) => (modifier ? _bem(namespace.value, block, '', '', modifier) : '')
+    const be = (blockSuffix?: string, element?: string) => (blockSuffix && element ? _bem(namespace.value, block, blockSuffix, element, '') : '')
+    const em = (element?: string, modifier?: string) => (element && modifier ? _bem(namespace.value, block, '', element, modifier) : '')
+    const bm = (blockSuffix?: string, modifier?: string) => (blockSuffix && modifier ? _bem(namespace.value, block, blockSuffix, '', modifier) : '')
+    const bem = (blockSuffix?: string, element?: string, modifier?: string) => (blockSuffix && element && modifier ? _bem(namespace.value, block, blockSuffix, element, modifier) : '')
+    const is: {
+        (name: string, state: boolean | undefined): string
+        (name: string): string
+    } = (name: string, ...args: [boolean | undefined] | []) => {
+        const state = args.length >= 1 ? args[0]! : true
+        return name && state ? `${statePrefix}${name}` : ''
+    }
+
+    // for css var
+    // --el-xxx: value;
+    const cssVar = (object: Record<string, string>) => {
+        const styles: Record<string, string> = {}
+        for (const key in object) {
+            if (object[key]) {
+                styles[`--${namespace.value}-${key}`] = object[key]
+            }
+        }
+        return styles
+    }
+    // with block
+    const cssVarBlock = (object: Record<string, string>) => {
+        const styles: Record<string, string> = {}
+        for (const key in object) {
+            if (object[key]) {
+                styles[`--${namespace.value}-${block}-${key}`] = object[key]
+            }
+        }
+        return styles
+    }
+
+    const cssVarName = (name: string) => `--${namespace.value}-${name}`
+    const cssVarBlockName = (name: string) => `--${namespace.value}-${block}-${name}`
+
+    return {
+        namespace,
+        b,
+        e,
+        m,
+        be,
+        em,
+        bm,
+        bem,
+        is,
+        // css
+        cssVar,
+        cssVarName,
+        cssVarBlock,
+        cssVarBlockName,
+    }
+}
+
+export type UseNamespaceReturn = ReturnType<typeof useNamespace>