chore: style

docs/.vitepress/config.ts

@@ -10,7 +10,11 @@ export default defineConfig({
   description: 'Vite & Vue powered static site generator.',
   lastUpdated: true,
   vite: {
-    plugins: [vueJsx(), Inspect(), MarkdownPreview()],
+    plugins: [
+      vueJsx(),
+      // Inspect(),
+      MarkdownPreview(),
+    ],
     ssr: { noExternal: ['vite-plugin-markdown-preview'] },
   },
   themeConfig: {

docs/components/button.md

@@ -26,6 +26,13 @@
   <EButton color="warning">warning</EButton>
   <EButton color="error">error</EButton>
   <EButton disabled>默认</EButton>
+  <br /><br />
+  <EButton secondary>你测sd试好</EButton>
+  <EButton secondary color="primary">primary</EButton>
+  <EButton secondary color="success">success</EButton>
+  <EButton secondary color="warning">warning</EButton>
+  <EButton secondary color="error">error</EButton>
+  <EButton secondary disabled>默认</EButton>
 </template>
 ```
 
@@ -93,6 +100,7 @@
   <EButton type="round" disabled>圆角按钮-禁用状态</EButton>
   <EButton type="circle" disabled>D</EButton>
   <EButton type="link" disabled>链接按钮-禁用状态</EButton>
+  <EButton color="primary" disabled>primary</EButton>
 </template>
 ```
 

docs/components/input.md

@@ -26,3 +26,24 @@
   </EInput>
 </template>
 ```
+
+## 禁用
+
+```vue preview
+<template>
+  <EInput disabled />
+  <EInput disabled prefix="prefix" />
+  <EInput disabled suffix="suffix" />
+  <EInput disabled prefix="prefix" suffix="suffix" />
+  <EInput disabled>
+    <template #before>before</template>
+    <template #after>after</template>
+  </EInput>
+  <EInput disabled>
+    <template #after>after</template>
+  </EInput>
+  <EInput disabled>
+    <template #before>after</template>
+  </EInput>
+</template>
+```

src/button/index.css

@@ -15,6 +15,25 @@
     @apply px-6 py-3 text-base;
   }
 
+  &.is-secondary {
+    @apply border-transparent bg-gray-100 text-gray-700 hover:bg-gray-200;
+    &.e-button--primary {
+      @apply bg-indigo-100 text-indigo-700 hover:bg-indigo-200;
+    }
+
+    &.e-button--success {
+      @apply bg-green-100 text-green-700 hover:bg-green-200;
+    }
+
+    &.e-button--warning {
+      @apply bg-amber-100 text-amber-700 hover:bg-amber-200;
+    }
+
+    &.e-button--error {
+      @apply bg-red-100 text-red-700 hover:bg-red-200;
+    }
+  }
+
   &--primary {
     @apply border-transparent bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500;
   }
@@ -72,9 +91,10 @@
     }
   }
 
+  &:disabled,
   &.is-disabled {
-    @apply cursor-not-allowed border border-slate-300 bg-slate-50 
-    text-slate-400 focus:ring-0;
+    /* border text-slate-400  border-slate-300 bg-slate-50  */
+    @apply cursor-not-allowed opacity-40 hover:bg-inherit focus:ring-0;
   }
 }
 

src/button/index.tsx

@@ -7,17 +7,18 @@ export const EButton = defineComponent({
     type: String as PropType<'round' | 'circle' | 'link'>,
     color: String as PropType<'primary' | 'success' | 'warning' | 'error'>,
     size: String as PropType<'xs' | 'sm' | 'lg' | 'xl'>,
-    round: Boolean,
     disabled: Boolean,
+    secondary: Boolean,
   },
   setup(props, { slots }) {
     const cls = computed(() =>
       classNames(
         'e-button',
-        `e-button--${props.color || 'default'}`,
+        props.color && `e-button--${props.color}`,
         props.type && `e-button--${props.type}`,
         props.size && `e-button--${props.size}`,
-        props.disabled && `is-disabled`
+        props.disabled && `is-disabled`,
+        props.secondary && `is-secondary`
       )
     )
     return () => (

src/input/index.css

@@ -1,7 +1,7 @@
 .e-input {
   @apply inline-flex w-full items-stretch rounded-md  text-sm shadow-sm;
   &__input {
-    @apply flex w-full flex-1 items-center border border-solid border-gray-300 px-3 transition-all;
+    @apply flex w-full flex-1 items-center border border-solid border-gray-300 bg-white px-3 transition-all;
     &.is-focused {
       @apply z-10 border-indigo-500 ring-1 ring-indigo-500;
     }
@@ -16,8 +16,9 @@
     @apply flex-initial pr-2;
   }
   &__input-inner {
-    @apply flex-1 px-0 text-sm;
+    @apply flex-1 bg-transparent px-0 text-sm;
     box-shadow: none !important;
+    cursor: inherit;
   }
   &__suffix {
     @apply flex-initial pl-2;
@@ -33,4 +34,10 @@
   &__after {
     @apply rounded-r-md border-l-0  pl-2 pr-3;
   }
+
+  &.is-disabled {
+    .e-input__input {
+      @apply cursor-not-allowed border-gray-200 bg-gray-50 text-gray-500;
+    }
+  }
 }

src/input/index.vue

@@ -7,6 +7,7 @@ export default defineComponent({
     after: String,
     prefix: String,
     suffix: String,
+    disabled: Boolean,
   },
   setup(props, { emit }) {
     const focused = ref(false)
@@ -17,14 +18,15 @@ export default defineComponent({
 })
 </script>
 <template>
-  <div class="e-input">
+  <div :class="['e-input', disabled && 'is-disabled']">
     <span class="e-input__before" v-if="$slots.before"><slot name="before" /></span>
     <span :class="['e-input__input', focused && 'is-focused']">
       <span class="e-input__prefix" v-if="prefix">{{ prefix }}</span>
       <input
         type="text"
         @focus="focused = true"
         @blur="focused = false"
+        :disabled="disabled"
         class="e-input__input-inner"
       />
       <span class="e-input__suffix" v-if="suffix">{{ suffix }}</span>