feat(组件): 移植组件 button与icon

packages/components/audio/index.ts

@@ -1,6 +1,6 @@
 import { withInstall } from '@kankan/utils';
 import Audio from './src/audio.vue';
 
-export const KKAudio = withInstall(Audio);
+export const UIAudio = withInstall(Audio);
 
-export default KKAudio;
+export default UIAudio;

packages/components/audio/src/audio.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { defineProps, ref, watchEffect, defineExpose } from 'vue';
+  import { defineProps, ref, watchEffect } from 'vue';
   defineProps({
     src: String,
   });

packages/components/button/index.ts

@@ -0,0 +1,6 @@
+import { withInstall } from '@kankan/utils';
+import Button from './src/button.vue';
+
+export const UIButton = withInstall(Button);
+
+export default UIButton;

packages/components/button/src/index.vue

@@ -7,8 +7,8 @@
 
 <script setup>
   import { defineProps, computed } from 'vue';
-  import { normalizeUnitToStyle } from '../../utils/index';
-  import UIIcon from '../icon';
+  import { normalizeUnitToStyle } from '@kankan/utils';
+  import UIIcon from '../../icon/src/icon.vue';
 
   const props = defineProps({
     type: {
@@ -40,7 +40,3 @@
     return style;
   });
 </script>
-
-<script>
-  export default { name: 'UiButton' };
-</script>

packages/components/icon/index.ts

@@ -0,0 +1,9 @@
+import { withInstall } from '@kankan/utils';
+
+import Icon from './src/icon.vue';
+
+export const UIIcon = withInstall(Icon);
+
+export default UIIcon;
+
+export * from './src/icon';

packages/components/icon/src/icon.ts

@@ -0,0 +1,7 @@
+import type { ExtractPropTypes } from 'vue';
+import type Icon from './icon.vue';
+import { iconProps } from './props';
+
+export type IconProps = ExtractPropTypes<typeof iconProps>;
+
+export type IconInstance = InstanceType<typeof Icon>;

packages/components/icon/src/index.vue

@@ -13,27 +13,9 @@
 
 <script setup>
   import { defineProps, computed, defineEmits } from 'vue';
-  import { normalizeUnitToStyle, os } from '../../utils';
-
-  const props = defineProps({
-    type: { type: String },
-    size: { type: [Number, String] },
-    color: { type: String },
-    small: { type: Boolean },
-    ctrl: { type: Boolean },
-    medium: { type: Boolean },
-    big: { type: Boolean },
-    disabled: { type: Boolean },
-    tip: { type: String },
-    tipH: {
-      type: String,
-      default: 'center',
-    },
-    tipV: {
-      type: String,
-      default: 'bottom',
-    },
-  });
+  import { normalizeUnitToStyle, os } from '@kankan/utils';
+  import { iconProps } from './props';
+  const props = defineProps(iconProps);
 
   const style = computed(() => ({
     'font-size': normalizeUnitToStyle(props.size),
@@ -61,10 +43,6 @@
 
   const emit = defineEmits(['click']);
 </script>
-
-<script>
-  export default { name: 'UiIcon' };
-</script>
 <style>
   /* @import url('./iconfont/iconfont.css'); */
 </style>

packages/components/icon/src/props.ts

@@ -0,0 +1,23 @@
+import { buildProps, definePropType } from '@kankan/utils';
+
+export const iconProps = buildProps({
+  type: { type: String },
+  size: {
+    type: definePropType<number | string>([Number, String]),
+  },
+  color: { type: String },
+  small: { type: Boolean },
+  ctrl: { type: Boolean },
+  medium: { type: Boolean },
+  big: { type: Boolean },
+  disabled: { type: Boolean },
+  tip: { type: String },
+  tipH: {
+    type: String,
+    default: 'center',
+  },
+  tipV: {
+    type: String,
+    default: 'bottom',
+  },
+});

packages/components/index.ts

@@ -1 +1,3 @@
 export * from './audio';
+export * from './icon';
+export * from './button';

packages/utils/dom.ts

@@ -0,0 +1,40 @@
+export const toRawType = (value) => toTypeString(value).slice(8, -1);
+
+export const normalizeUnitToStyle = (unit) => {
+  if (unit === void 0) {
+    return unit;
+  } else if (toRawType(unit) === 'Number') {
+    return unit ? ((unit <= 1) & (unit >= 0) ? 100 * unit + '%' : unit + 'px') : void 0;
+  } else if (unit.includes('px')) {
+    return normalizeUnitToStyle(parseFloat(unit));
+  } else if (unit.includes('%')) {
+    return normalizeUnitToStyle(parseFloat(unit) / 100);
+  } else {
+    return unit;
+  }
+};
+
+export const os = (function () {
+  const ua = navigator.userAgent;
+  const isWindowsPhone = /(?:Windows Phone)/.test(ua);
+  const isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone;
+  const isAndroid = /(?:Android)/.test(ua);
+  const isFireFox = /(?:Firefox)/.test(ua);
+  // const isChrome = /(?:Chrome|CriOS)/.test(ua);
+  const isTablet =
+    /(?:iPad|PlayBook)/.test(ua) ||
+    (isAndroid && !/(?:Mobile)/.test(ua)) ||
+    (isFireFox && /(?:Tablet)/.test(ua));
+  const isPhone = /(?:iPhone)/.test(ua) && !isTablet;
+  const isPc = !isPhone && !isAndroid && !isSymbian;
+
+  if (isPc && navigator.maxTouchPoints > 1) {
+    isTablet = true;
+  }
+  return {
+    isTablet: isTablet,
+    isPhone: isPhone,
+    isAndroid: isAndroid,
+    isPc: isPc,
+  };
+})();

packages/utils/index.ts

@@ -1 +1,2 @@
 export * from './vue';
+export * from './dom';

playground/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@kankan/components": "workspace:^1.0.0",
     "@kankan/sdk": "4.3.0-alpha.10",
+    "@kankan/utils": "workspace:^1.0.0",
     "vue": "^3.2.37"
   },
   "devDependencies": {

playground/src/App.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-  import { onMounted } from 'vue';
-  import { KKAudio } from '@kankan/components';
+  import { onMounted, VNode } from 'vue';
+  import { UIAudio, UIIcon } from '@kankan/components';
+  // import { buildProps } from '@kankan/utils';
   // import { h } from 'vue';
   // import * as KanKanSDK from '@kankan/sdk';
-  // console.log('KKAudio', KanKanSDK);
+  console.log('UI', UIAudio, UIIcon);
 
   onMounted(async () => {
     const KanKan = (window as any).KanKan;
@@ -19,22 +20,26 @@
     // });
     // app.use(KKAudio);
 
-    console.log(app);
-
     // console.log('kankan', KKAudio);
     // const res = await kankan.use(KKAudio.render());
     // console.log('11', res);
-    // app.use('TagEditor');
+    app.use('TagEditor');
 
     const TagView = await app.use('TagView', {
-      render: (data) => {
+      render: (data: VNode) => {
         console.log('data', data.type);
       },
     });
-    TagView.on('click', (event) => {
+
+    TagView.on('click', (event: Event) => {
       console.log('event', event);
-      debugger;
+      // debugger;
     });
+    console.log('1app', app);
+
+    const TagEditor = await app.TagManager.editor.promise();
+    console.log('TagEditor', TagEditor);
+    // TagEditor.enter();
 
     console.log('TagView', TagView);
     // .then(function () {

pnpm-lock.yaml

@@ -124,6 +124,7 @@ importers:
     specifiers:
       '@kankan/components': workspace:^1.0.0
       '@kankan/sdk': 4.3.0-alpha.10
+      '@kankan/utils': workspace:^1.0.0
       '@vitejs/plugin-vue': ^3.1.0
       typescript: ^4.6.4
       vite: ^3.1.0
@@ -132,6 +133,7 @@ importers:
     dependencies:
       '@kankan/components': link:../packages/components
       '@kankan/sdk': 4.3.0-alpha.10
+      '@kankan/utils': link:../packages/utils
       vue: 3.2.39
     devDependencies:
       '@vitejs/plugin-vue': 3.1.0_vite@3.1.3+vue@3.2.39