edit switch

mdl95r · Feb 25, 2024 · a94d9a9 · a94d9a9
1 parent 8a416cd
commit a94d9a9
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 14 deletions.
diff --git a/src/components/Switch/Switch.scss b/src/components/Switch/Switch.scss
@@ -7,12 +7,6 @@
   --switch-size-width: 40px;
   --switch-size-height: 24px;
 
-  &__checkbox,
-  &__marker {
-    width: var(--switch-size-width);
-    height: var(--switch-size-height);
-  }
-
   // .ui-switch__checkbox
   &__checkbox {
     opacity: 0;
@@ -24,9 +18,9 @@
     cursor: pointer;
 
     &:disabled {
-      cursor: not-allowed;
-
       ~.ui-switch__marker {
+        cursor: not-allowed;
+
         &:after {
           background: var(--switch-disabled-marker, rgba(1, 1, 1, .20));
         }
@@ -46,7 +40,9 @@
 
   // .ui-switch__marker
   &__marker {
-    pointer-events: none;
+    width: var(--switch-size-width);
+    height: var(--switch-size-height);
+    cursor: pointer;
     flex-shrink: 0;
 
     &:after {

diff --git a/src/components/Switch/Switch.vue b/src/components/Switch/Switch.vue
@@ -1,15 +1,16 @@
 <template>
   <div class="ui-switch">
     <input 
-      type="checkbox" 
+      id="ui-switch" 
+      type="checkbox"
       :checked="modelValue"
       :disabled="disabled"
       class="ui-switch__checkbox"
       data-testid="switch-input"
       @change="switchHandler"
     >
 
-    <div class="ui-switch__marker"></div>
+    <label class="ui-switch__marker" for="ui-switch" data-test-id="switch"></label>
 
     <div v-if="$slots.default" class="ui-switch__text">
       <slot />
@@ -25,16 +26,19 @@ defineProps({
     default: false
   },
 
+  /**
+  * Делает switch неактивным
+  */
   disabled: {
     type: Boolean,
     default: false,
   }
 })
 
-const emit = defineEmits(['onUpdate:modelValue']);
+const emit = defineEmits(['update:modelValue']);
 
 const switchHandler = ($event) => {
-  emit('onUpdate:modelValue', $event.target.checked);
+  emit('update:modelValue', $event.target.checked);
 }
 </script>
 

diff --git a/stories/Switch.stories.js b/stories/Switch.stories.js
@@ -1,4 +1,5 @@
 import UiSwitch from "../src/components/Switch";
+import './assets/main.scss';
 
 export default {
   title: 'Elements/Switch',
@@ -35,7 +36,8 @@ export const WithText = {
       };
     },
     template: `
-        <UiSwitch v-bind="args" v-model="checked">Text</UiSwitch>
+        <UiSwitch v-bind="args" v-model="checked">
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit molestias ex natus eligendi nulla tempora id illo a enim, sapiente officia corporis incidunt asperiores modi quibusdam ut et repellat neque! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit molestias ex natus eligendi nulla tempora id illo a enim, sapiente officia corporis incidunt asperiores modi quibusdam ut et repellat neque!</UiSwitch>
     `,
   }),
 };

diff --git a/tests/Switch.test.js b/tests/Switch.test.js
@@ -7,4 +7,18 @@ describe('Switch', () => {
   it('Switch render', () => {
 		expect(wrapper.exists()).toBe(true);
 	})
+
+  it('Switch emitting update:modelValue', async () => {
+    const wrapper = mount(Switch, {
+      attachTo: document.body,
+      props: {
+        modelValue: false,
+        'update:modelValue': (e) => wrapper.setProps({ modelValue: e })
+      }
+    })
+
+    await wrapper.find('[data-test-id="switch"]').trigger('click');
+
+    expect(wrapper.emitted()).toHaveProperty('update:modelValue')
+	})
 });