feat: button

jaskang · Sep 29, 2023 · 18451a2 · 18451a2
1 parent c0e084a
commit 18451a2
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 28 deletions.
diff --git a/docs/components/flex.md b/docs/components/flex.md
@@ -33,31 +33,31 @@ align 值为 `start` | `end` | `center` | `baseline` | `stretch`
 ```vue preview
 <template>
   <h4>start</h4>
-  <ZFlex align="start" gap="1rem">
+  <ZFlex alignItems="start" gap="1rem">
     <ZFlexItem flex="1" class="py-4">01</ZFlexItem>
     <ZFlexItem flex="1" class="py-12">02</ZFlexItem>
     <ZFlexItem flex="1" class="py-8">03</ZFlexItem>
   </ZFlex>
   <h4>end</h4>
-  <ZFlex align="end" gap="1rem">
+  <ZFlex alignItems="end" gap="1rem">
     <ZFlexItem flex="1" class="py-4">01</ZFlexItem>
     <ZFlexItem flex="1" class="py-12">02</ZFlexItem>
     <ZFlexItem flex="1" class="py-8">03</ZFlexItem>
   </ZFlex>
   <h4>center</h4>
-  <ZFlex align="center" gap="1rem">
+  <ZFlex alignItems="center" gap="1rem">
     <ZFlexItem flex="1" class="py-4">01</ZFlexItem>
     <ZFlexItem flex="1" class="py-12">02</ZFlexItem>
     <ZFlexItem flex="1" class="py-8">03</ZFlexItem>
   </ZFlex>
   <h4>baseline</h4>
-  <ZFlex align="baseline" gap="1rem">
+  <ZFlex alignItems="baseline" gap="1rem">
     <ZFlexItem flex="1" class="pb-6 pt-2">01</ZFlexItem>
     <ZFlexItem flex="1" class="pb-12 pt-8">02</ZFlexItem>
     <ZFlexItem flex="1" class="pb-4 pt-12">03</ZFlexItem>
   </ZFlex>
   <h4>stretch</h4>
-  <ZFlex align="stretch" gap="1rem">
+  <ZFlex alignItems="stretch" gap="1rem">
     <ZFlexItem flex="1" class="py-4">01</ZFlexItem>
     <ZFlexItem flex="1" class="py-12">02</ZFlexItem>
     <ZFlexItem flex="1" class="py-8">03</ZFlexItem>

diff --git a/packages/vue/src/components/Button/style.ts b/packages/vue/src/components/Button/style.ts
@@ -12,7 +12,7 @@ const css = tw(
         default: ['shadow-sm border', ''],
         solid: ['shadow-sm ', ''],
         soft: ['shadow-sm ', ''],
-        outline: ['shadow-sm ring-[--z-btn-outline] ring-1 ring-inset border', ''],
+        outline: ['shadow-sm border', ''],
         ghost: ['', ''],
         link: ['decoration-2 underline-offset-2 enabled:hover:underline', ''],
       },
@@ -71,8 +71,7 @@ export const style = (props: ButtonInnerProps) => {
           text: `${props.color}.600`,
           bg: 'transparent',
           border: `${props.color}.500`,
-          text_hover: 'white',
-          bg_hover: `${props.color}.500`,
+          bg_hover: `${props.color}.200`,
         }
       case 'ghost':
         return {

diff --git a/packages/vue/src/components/Flex/Flex.tsx b/packages/vue/src/components/Flex/Flex.tsx
@@ -1,28 +1,18 @@
-import {
-  defineComponent,
-  type ExtractPropTypes,
-  type ExtractPublicPropTypes,
-  type PropType,
-} from 'vue'
+import { defineComponent, type ExtractPublicPropTypes, type PropType } from 'vue'
 
 import { getSpace, type SizeType } from '@/theme/space'
 
 const props = {
   alignItems: {
-    type: String as PropType<'baseline' | 'start' | 'end' | 'center' | 'stretch'>,
-    default: 'baseline',
+    type: String as PropType<'start' | 'end' | 'center' | 'baseline' | 'stretch'>,
   },
   justifyContent: {
     type: String as PropType<
       'normal' | 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch'
     >,
-    default: 'normal',
   },
   wrap: Boolean,
-  gap: {
-    type: String as PropType<SizeType>,
-    default: '0',
-  },
+  gap: String as PropType<SizeType>,
 }
 
 export type FlexProps = ExtractPublicPropTypes<typeof props>
@@ -33,12 +23,32 @@ export const Flex = defineComponent({
   setup(props, { slots }) {
     return () => (
       <div
-        class={['flex', props.wrap ? 'flex-wrap' : 'flex-nowrap']}
+        class={[
+          'z-flex',
+          'flex',
+          props.wrap ? 'flex-wrap' : 'flex-nowrap',
+          props.alignItems &&
+            {
+              start: 'items-start',
+              end: 'items-end',
+              center: 'items-center',
+              baseline: 'items-baseline',
+              stretch: 'items-stretch',
+            }[props.alignItems],
+          props.justifyContent &&
+            {
+              normal: 'justify-normal',
+              start: 'justify-start',
+              end: 'justify-end',
+              center: 'justify-center',
+              between: 'justify-between',
+              around: 'justify-around',
+              evenly: 'justify-evenly',
+              stretch: 'justify-stretch',
+            }[props.justifyContent],
+        ]}
         style={{
-          '--z-flex-gap': getSpace(props.gap),
-          'align-items': props.alignItems,
-          'justify-content': props.justifyContent,
-          'flex-wrap': props.wrap ? 'wrap' : 'nowrap',
+          gap: props.gap ? getSpace(props.gap) : undefined,
         }}
       >
         {slots.default?.()}

diff --git a/packages/vue/src/components/Tag/index.tsx b/packages/vue/src/components/Tag/index.tsx
@@ -72,7 +72,7 @@ export const Tag = defineComponent({
       <div style={cssVars.value} class={`${cls.value} group`}>
         {props.dot && (
           <svg
-            class="h-[0.5em] w-[0.5em] mr-1.5 fill-[--z-tag-dot]"
+            class="mr-1.5 h-[0.5em] w-[0.5em] fill-[--z-tag-dot]"
             viewBox="0 0 6 6"
             aria-hidden="true"
           >
@@ -84,7 +84,7 @@ export const Tag = defineComponent({
           <button
             type="button"
             class={[
-              'relative ml-0.5 -mr-1 h-4 w-4 ',
+              'relative -mr-1 ml-0.5 h-4 w-4 ',
               outlineDot.value ? 'hover:bg-gray-200' : 'hover:bg-[--z-tag-close]',
               props.pill ? 'rounded-full' : 'rounded-sm',
             ]}