feat: Ebutton

src/EButton.vue → src/EButton/EButton.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computedCls } from './_utils'
+import { computedCls } from '../_utils'
 import type { PropType } from 'vue'
 
 const props = defineProps({
@@ -16,7 +16,7 @@ const props = defineProps({
   disabled: Boolean,
 })
 
-const cls = computedCls('e-button', props, ['type', 'color', 'size'])
+const cls = computedCls('e-button', props, ['type', 'color', 'size', 'disabled'])
 </script>
 <template>
   <button :class="cls" type="button" :disabled="disabled">

src/ECheckBox.vue → src/ECheckBox/ECheckBox.vue

@@ -8,7 +8,9 @@ const props = defineProps({
   value: [String, Number],
 })
 
-const emits = defineEmits(['onUpdate:checked'])
+const emit = defineEmits(['onUpdate:checked', 'focus', 'blur'])
+
+const focus = ref(false)
 
 const innerChecked = ref(props.checked)
 
@@ -24,9 +26,34 @@ const onClick = (e: Event) => {
     return false
   }
 }
+const onFocus = (e: Event) => {
+  if (props.disabled) {
+    e.preventDefault()
+    return false
+  } else {
+    focus.value = true
+    emit('focus', e)
+  }
+}
+const onBlur = (e: Event) => {
+  if (props.disabled) {
+    e.preventDefault()
+    return false
+  } else {
+    focus.value = false
+    emit('blur', e)
+  }
+}
 </script>
 <template>
-  <label :class="['e-checkbox', innerChecked && 'is-checked', disabled && 'is-disabled']">
+  <label
+    :class="[
+      'e-checkbox',
+      innerChecked && 'is-checked',
+      disabled && 'is-disabled',
+      focus && 'focus',
+    ]"
+  >
     <span class="e-checkbox__input">
       <input
         type="checkbox"
@@ -35,8 +62,8 @@ const onClick = (e: Event) => {
         :name="name"
         :disabled="disabled"
         :checked="innerChecked"
-        @focus=""
-        @blur=""
+        @focus="onFocus"
+        @blur="onBlur"
         @input="onInput"
         @click="onClick"
       />

src/_styles/index.scss

@@ -5,8 +5,8 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
-@import '../EButton.scss';
-@import '../EButtonGroup.scss';
-@import '../ECheckBox.scss';
-@import '../EInput.scss';
-@import '../ERadio.scss';
+@import '../EButton/EButton.scss';
+@import '../EButtonGroup/EButtonGroup.scss';
+@import '../ECheckBox/ECheckBox.scss';
+@import '../EInput/EInput.scss';
+@import '../ERadio/ERadio.scss';

src/_utils/classNames.ts

@@ -51,11 +51,13 @@ export const computedCls = <T extends Record<string, any>>(
     const cls = [b]
     for (const key of keys) {
       const val = toRef(props, key)
-      if (val.value) {
+      if (typeof val.value === 'boolean' && val.value) {
+        cls.push(`is-${key as string}`)
+      } else if (val.value) {
         cls.push(b + '--' + val.value)
       }
     }
-    return cls
+    return cls.join(' ')
   })
   return cls
 }

src/hooks/use-controllable.ts

@@ -0,0 +1,22 @@
+import { computed, type ComputedRef, type UnwrapRef, ref } from 'vue'
+
+export function useControllable<T>(
+  controlledValue: ComputedRef<T | undefined>,
+  onChange?: (value: T) => void,
+  defaultValue?: ComputedRef<T>
+) {
+  const internalValue = ref(defaultValue?.value)
+  const isControlled = computed(() => controlledValue.value !== undefined)
+
+  return [
+    computed(() => (isControlled.value ? controlledValue.value : internalValue.value)),
+    function (value: unknown) {
+      if (isControlled.value) {
+        return onChange?.(value as T)
+      } else {
+        internalValue.value = value as UnwrapRef<T>
+        return onChange?.(value as T)
+      }
+    },
+  ] as const
+}

src/index.ts

@@ -1,11 +1,11 @@
 import './_styles/index.scss'
 import type { Plugin } from 'vue'
 
-import EButton from './EButton.vue'
-import EButtonGroup from './EButtonGroup.vue'
-import ERadio from './ERadio.vue'
-import ECheckbox from './ECheckBox.vue'
-import EInput from './EInput.vue'
+import EButton from './EButton/EButton.vue'
+import EButtonGroup from './EButtonGroup/EButtonGroup.vue'
+import ERadio from './ERadio/ERadio.vue'
+import ECheckbox from './ECheckBox/ECheckBox.vue'
+import EInput from './EInput/EInput.vue'
 
 export { EButton, EButtonGroup, ECheckbox, ERadio }