wip

package.json

@@ -33,7 +33,8 @@
     "gsap": "^3.12.5",
     "postcss-cli": "^11.0.0",
     "sass": "^1.77.8",
-    "vite-svg-loader": "^5.1.0"
+    "vite-svg-loader": "^5.1.0",
+    "vue-select": "^4.0.0-beta.3"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",
@@ -49,6 +50,7 @@
     "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20.14.5",
+    "@types/vue-select": "^3.16.8",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",

src/components/Switch/WSwitch.spec.ts

@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import WSwitch from './WSwitch.vue'
+
+describe('WSwitch', () => {
+  it('renders properly', () => {
+    const wrapper = mount(WSwitch, {
+      emits: ['update:modelValue'],
+      props: {
+        modelValue: {
+          key: 'en',
+          label: 'English',
+          icon: null
+        },
+        'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+        options: [{
+            key: 'en',
+            label: 'English',
+            icon: null
+          },{
+            key: 'es',
+            label: 'Español',
+            icon: null,
+          }
+        ]
+      },
+    })
+
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

src/components/Switch/WSwitch.stories.ts

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import WSwitch from './WSwitch.vue'
+import { Option } from './WSwitch'
+import { ref, watch, markRaw } from 'vue'
+import 'vue-select/dist/vue-select.css'
+
+const meta: any = {
+  title: 'Example/WSwitch',
+  component: WSwitch,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {
+    options: [{
+    key: 'en',
+    label: 'English',
+    icon: null
+  },{
+    key: 'es',
+    label: 'Español',
+    icon: null,
+  }]}
+} satisfies Meta<typeof WSwitch>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args: any) => ({
+    components: { WSwitch },
+    setup() {
+      const model = ref({
+        key: 'en',
+        label: 'English',
+        icon: null
+      });
+
+      function update($event: any) {
+        model.value = $event
+      }
+
+      return { args, model, update };
+    },
+    template: `<WSwitch v-bind="args" v-model="model" @update:model-value="update" />`,
+    args: {
+      options: [{
+        key: 'en',
+        label: 'English',
+        icon: null
+      },{
+        key: 'es',
+        label: 'Español',
+        icon: null,
+      }]
+    }
+  })
+}

src/components/Switch/WSwitch.ts

@@ -0,0 +1 @@
+export type Option = {key: string, label: string, icon: string | null}