@vuesimple/vs-switch 3.1.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Ashwin Shenoy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,260 @@
+# Vue Simple Switch
+
+#### 🎚 A simple vue switch component. Toggle switch alternative to the checkbox.
+
+A light weight vue plugin built from the ground up
+
+[![npm](https://img.shields.io/npm/v/@vuesimple/vs-switch.svg)](https://www.npmjs.com/package/@vuesimple/vs-switch)
+[![npm](https://img.shields.io/npm/dt/@vuesimple/vs-switch.svg)](https://img.shields.io/npm/dt/@vuesimple/vs-switch.svg)
+<br />
+
+![forthebadge](https://forthebadge.com/images/badges/made-with-vue.svg)
+![forthebadge](https://forthebadge.com/images/badges/made-with-javascript.svg)
+![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)
+![forthebadge](https://forthebadge.com/images/badges/built-with-swag.svg)
+![forthebadge](https://forthebadge.com/images/badges/check-it-out.svg)
+
+<br />
+
+### 📺 Live Demo
+
+Demo: [Link](https://vuesimple.netlify.app)
+
+<br />
+
+### 🛠 Install
+
+```bash
+npm i @vuesimple/vs-switch
+```
+
+<br />
+
+### 🚀 Usage
+
+```html
+<template>
+  <vs-switch v-model="isEnabled" />
+</template>
+
+<script>
+  import VsSwitch from '@vuesimple/vs-switch';
+
+  export default {
+    components: {
+      VsSwitch,
+    },
+    data() {
+      return {
+        isEnabled: false,
+      };
+    },
+  };
+</script>
+```
+
+<br />
+
+### 🌎 CDN
+
+```html
+<script src="https://unpkg.com/@vuesimple/vs-switch@<version>/dist/index.min.js"></script>
+```
+
+```javascript
+// Main/Entry file
+app.use(VsSwitch.plugin);
+```
+
+```html
+<template>
+  <vs-switch v-model="isEnabled" />
+</template>
+```
+
+<br />
+
+<h3> 
+  <img src="https://i.imgur.com/MWynQNa.png" width="20px"> Nuxt.js
+</h3>
+
+Nuxt Code Snippet
+
+After installation,
+
+- Create a file `/plugins/vs-switch.js`
+
+  ```javascript
+  import Vue from 'vue';
+  import VsSwitch from '@vuesimple/vs-switch';
+
+  Vue.component('vs-switch', VsSwitch);
+  ```
+
+- Update `nuxt.config.js`
+  ```javascript
+  module.exports = {
+    ...
+    plugins: [
+      { src: '~plugins/vs-switch', mode: 'client' }
+      ...
+    ]
+  }
+  ```
+- In the page/ component
+
+  ```html
+  <template>
+    <vs-switch v-model="isEnabled" />
+  </template>
+  ```
+
+**Note**
+
+- For older Nuxt versions, use `<no-ssr>...</no-ssr>` tag.
+- You can also do
+  `import VsSwitch from '@vuesimple/vs-switch'`
+  & add in `component:{VsSwitch}` and use it within component, without globally installing in plugin folder.
+
+<br />
+
+### ⚙ Props
+
+| Name           | Type    | Default   | Description                                                 |
+| -------------- | ------- | --------- | ----------------------------------------------------------- |
+| modelValue     | Boolean | `false`   | The checked state (supports v-model)                        |
+| size           | String  | `medium`  | Size of switch. (`small`, `medium`, `large`)                |
+| variant        | String  | `classic` | Visual variant. (`classic`, `surface`, `soft`)              |
+| color          | String  | `primary` | Color theme of the switch when checked                      |
+| highContrast   | Boolean | `false`   | High contrast mode for better visibility                    |
+| radius         | String  | `full`    | Border radius. (`none`, `small`, `medium`, `large`, `full`) |
+| disabled       | Boolean | `false`   | Disable the switch                                          |
+| ariaLabel      | String  | -         | Aria label for accessibility                                |
+| checkedBgColor | String  | -         | Custom background color when checked (hex/rgb/text color)   |
+
+<br />
+
+### 🔥 Events
+
+| Name    | Description                                    |
+| ------- | ---------------------------------------------- |
+| v-model | Emitted when the switch state changes          |
+| change  | Emitted when the switch state changes (detail) |
+
+<br />
+
+### 📎 Slots
+
+Currently, the switch component does not have slots. It renders as a simple toggle button.
+
+<br />
+
+### 🎨 Color Options
+
+The switch supports various color themes when checked:
+
+- `primary` (default blue)
+- `success` (green)
+- `danger` (red)
+- `warning` (orange)
+- `secondary` (dark gray)
+- `indigo`
+- `cyan`
+- `orange`
+- `crimson`
+- `gray`
+
+<br />
+
+### 📝 Examples
+
+#### Basic Switch
+
+```html
+<vs-switch v-model="isEnabled" />
+```
+
+#### Switch with Label
+
+```html
+<label>
+  <vs-switch v-model="isEnabled" />
+  Enable notifications
+</label>
+```
+
+#### Different Sizes
+
+```html
+<vs-switch v-model="isEnabled" size="small" />
+<vs-switch v-model="isEnabled" size="medium" />
+<vs-switch v-model="isEnabled" size="large" />
+```
+
+#### Different Variants
+
+```html
+<vs-switch v-model="isEnabled" variant="classic" />
+<vs-switch v-model="isEnabled" variant="surface" />
+<vs-switch v-model="isEnabled" variant="soft" />
+```
+
+#### Different Colors
+
+```html
+<vs-switch v-model="isEnabled" color="primary" />
+<vs-switch v-model="isEnabled" color="success" />
+<vs-switch v-model="isEnabled" color="danger" />
+<vs-switch v-model="isEnabled" color="indigo" />
+```
+
+#### Disabled State
+
+```html
+<vs-switch v-model="isEnabled" disabled />
+```
+
+#### High Contrast
+
+```html
+<vs-switch v-model="isEnabled" highContrast color="indigo" />
+```
+
+#### Custom Color for Checked State
+
+```html
+<vs-switch v-model="isEnabled" checkedBgColor="#ff6b6b" />
+```
+
+<br />
+
+### 🔔 Events Handling
+
+```html
+<template>
+  <vs-switch v-model="isEnabled" @change="handleChange" />
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        isEnabled: false,
+      };
+    },
+    methods: {
+      handleChange(newValue) {
+        console.log('Switch is now:', newValue);
+      },
+    },
+  };
+</script>
+```
+
+<br />
+
+---
+
+### License
+
+MIT

package/build/rollup.config.js

@@ -0,0 +1,30 @@
+import vue from '@vitejs/plugin-vue';
+import { defineConfig } from 'rollup';
+
+export default defineConfig({
+  input: 'src/index.js',
+  output: [
+    {
+      file: 'dist/index.esm.js',
+      format: 'es',
+    },
+    {
+      file: 'dist/index.umd.js',
+      format: 'umd',
+      name: 'VsSwitch',
+      globals: {
+        vue: 'Vue',
+      },
+    },
+    {
+      file: 'dist/index.min.js',
+      format: 'iife',
+      name: 'VsSwitch',
+      globals: {
+        vue: 'Vue',
+      },
+    },
+  ],
+  external: ['vue'],
+  plugins: [vue()],
+});

package/build/vite.config.js

@@ -0,0 +1,33 @@
+import vue from '@vitejs/plugin-vue';
+import VitePluginStyleInject from 'vite-plugin-style-inject';
+
+export default {
+  plugins: [vue(), VitePluginStyleInject()],
+  build: {
+    // separate css file or not
+    cssCodeSplit: false,
+    lib: {
+      entry: './src/index.js',
+      formats: ['es', 'umd', 'iife'],
+      name: 'VsSwitch',
+      fileName: format => {
+        if (format === 'es') {
+          return 'index.esm.js';
+        }
+        if (format === 'umd') {
+          return 'index.umd.js';
+        }
+        return 'index.min.js';
+      },
+    },
+    rollupOptions: {
+      // Not to bundle vue core in this plugin
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@vuesimple/vs-switch",
+  "version": "3.1.3",
+  "description": "A simple vue switch component. Toggle switch alternative to the checkbox.",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.esm.js",
+  "unpkg": "dist/index.min.js",
+  "jsdelivr": "dist/index.min.js",
+  "scripts": {
+    "build": "rm -rfv dist && vite build --config build/vite.config.js"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^3.0.1",
+    "sass": "^1.54.4",
+    "vite": "^3.0.5",
+    "vite-plugin-style-inject": "0.0.1",
+    "vue": "^3.2.37"
+  },
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ashwinkshenoy/vue-simple.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "keywords": [
+    "vue",
+    "vuejs",
+    "switch",
+    "toggle",
+    "checkbox",
+    "form",
+    "front-end",
+    "web",
+    "vue-js",
+    "vue-js-switch",
+    "vue-switch",
+    "vs-switch"
+  ],
+  "author": "Ashwin Shenoy <ashwinkshenoy@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ashwinkshenoy/vue-simple/issues"
+  },
+  "homepage": "https://github.com/ashwinkshenoy/vue-simple",
+  "gitHead": "dbda7c423a550ef9aa42b3f82f92bb38d76a6948"
+}

package/src/index.js

@@ -0,0 +1,10 @@
+import VsSwitch from './vs-switch.vue';
+
+const plugin = {
+  install(Vue) {
+    Vue.component('VsSwitch', VsSwitch);
+  },
+};
+
+export default VsSwitch;
+export { plugin };

package/src/vs-switch.vue

@@ -0,0 +1,376 @@
+<template>
+  <button
+    :class="['vs-switch', classList]"
+    :style="isCssVars"
+    :aria-checked="isChecked"
+    :aria-label="ariaLabel"
+    role="switch"
+    type="button"
+    :disabled="disabled"
+    @click="toggle"
+  >
+    <span class="vs-switch__thumb"></span>
+  </button>
+</template>
+
+<script>
+  export default {
+    name: 'VsSwitch',
+
+    props: {
+      // v-model support
+      modelValue: {
+        type: Boolean,
+        default: false,
+      },
+      // `small`, `medium`, `large`
+      size: {
+        type: String,
+        default: 'medium',
+        validator: val => ['small', 'medium', 'large'].includes(val),
+      },
+      // `classic`, `surface`, `soft`
+      variant: {
+        type: String,
+        default: 'classic',
+        validator: val => ['classic', 'surface', 'soft'].includes(val),
+      },
+      // Color theme
+      color: {
+        type: String,
+        default: 'primary',
+      },
+      // High contrast mode
+      highContrast: {
+        type: Boolean,
+        default: false,
+      },
+      // // Border radius: `none`, `small`, `medium`, `large`, `full`
+      // radius: {
+      //   type: String,
+      //   default: 'full',
+      //   validator: val => ['none', 'small', 'medium', 'large', 'full'].includes(val),
+      // },
+      // Disabled state
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      // Aria label for accessibility
+      ariaLabel: {
+        type: String,
+      },
+      // Custom background color for checked state
+      checkedBgColor: {
+        type: String,
+      },
+    },
+
+    emits: ['update:modelValue', 'change'],
+
+    computed: {
+      isChecked() {
+        return this.modelValue;
+      },
+
+      classList() {
+        return [
+          `vs-switch__size-${this.size}`,
+          `vs-switch__variant-${this.variant}`,
+          `vs-switch__color-${this.color}`,
+          `vs-switch__radius-${this.radius}`,
+          {
+            'vs-switch--checked': this.isChecked,
+            'vs-switch--disabled': this.disabled,
+            'vs-switch--high-contrast': this.highContrast,
+          },
+        ];
+      },
+
+      cssVars() {
+        return {
+          '--vs-switch-checked-bg-color': this.checkedBgColor,
+        };
+      },
+
+      isCssVars() {
+        return this.checkedBgColor ? this.cssVars : '';
+      },
+    },
+
+    methods: {
+      toggle() {
+        if (!this.disabled) {
+          const newValue = !this.isChecked;
+          this.$emit('update:modelValue', newValue);
+          this.$emit('change', newValue);
+        }
+      },
+    },
+  };
+</script>
+
+<style lang="scss">
+  $el: '.vs-switch';
+
+  // Dark mode styles are handled globally
+  [data-theme='dark'],
+  .dark {
+    #{$el} {
+      --vs-switch-bg-unchecked: #3a3a3a;
+      --vs-switch-bg-checked: #1f73b7;
+      --vs-switch-thumb: #ffffff;
+      --vs-switch-border: #555555;
+    }
+  }
+
+  #{$el} {
+    --vs-switch-bg-unchecked: #e9ebed;
+    --vs-switch-bg-checked: #1f73b7;
+    --vs-switch-thumb: #ffffff;
+    --vs-switch-border: #d1d5db;
+    --vs-switch-primary: #1f73b7;
+    --vs-switch-success: #186146;
+    --vs-switch-danger: #cc3340;
+    --vs-switch-warning: #ffb057;
+    --vs-switch-secondary: #3a3a3a;
+    --vs-switch-indigo: #4f46e5;
+    --vs-switch-cyan: #06b6d4;
+    --vs-switch-orange: #f97316;
+    --vs-switch-crimson: #dc2626;
+    --vs-switch-gray: #6b7280;
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    cursor: pointer;
+    border: none;
+    padding: 0;
+    background: none;
+    transition: all 0.2s ease;
+    border-radius: var(--vs-switch-border-radius);
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--vs-switch-bg-checked);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    // Sizes
+    &__size-small {
+      width: 36px;
+      height: 20px;
+      --vs-switch-border-radius: 10px;
+
+      .vs-switch__thumb {
+        width: 16px;
+        height: 16px;
+      }
+
+      &.vs-switch--checked .vs-switch__thumb {
+        transform: translateX(16px);
+      }
+    }
+
+    &__size-medium {
+      width: 44px;
+      height: 24px;
+      --vs-switch-border-radius: 12px;
+
+      .vs-switch__thumb {
+        width: 20px;
+        height: 20px;
+      }
+
+      &.vs-switch--checked .vs-switch__thumb {
+        transform: translateX(20px);
+      }
+    }
+
+    &__size-large {
+      width: 52px;
+      height: 28px;
+      --vs-switch-border-radius: 14px;
+
+      .vs-switch__thumb {
+        width: 24px;
+        height: 24px;
+      }
+
+      &.vs-switch--checked .vs-switch__thumb {
+        transform: translateX(24px);
+      }
+    }
+
+    // Radius
+    &__radius-none {
+      --vs-switch-border-radius: 0;
+    }
+
+    &__radius-small {
+      --vs-switch-border-radius: 4px;
+    }
+
+    &__radius-medium {
+      --vs-switch-border-radius: 6px;
+    }
+
+    &__radius-large {
+      --vs-switch-border-radius: 8px;
+    }
+
+    &__radius-full {
+      --vs-switch-border-radius: 100px;
+    }
+
+    // Variants - classic (default, outlined)
+    &__variant-classic {
+      background: var(--vs-switch-bg-unchecked);
+      border: 1px solid var(--vs-switch-border);
+
+      &.vs-switch--checked {
+        background: var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked));
+        border-color: var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked));
+      }
+    }
+
+    // Variant - surface (filled background)
+    &__variant-surface {
+      background: #f0f1f3;
+      border: 1px solid transparent;
+
+      &.vs-switch--checked {
+        background: var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked));
+      }
+
+      [data-theme='dark'] &,
+      .dark & {
+        background: #4a5568;
+
+        &.vs-switch--checked {
+          background: var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked));
+        }
+      }
+    }
+
+    // Variant - soft (subtle background)
+    &__variant-soft {
+      background: rgba(31, 115, 183, 0.1);
+      border: 1px solid transparent;
+
+      &.vs-switch--checked {
+        background: var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked));
+      }
+
+      [data-theme='dark'] &,
+      .dark & {
+        background: rgba(31, 115, 183, 0.2);
+
+        &.vs-switch--checked {
+          background: var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked));
+        }
+      }
+    }
+
+    // Colors
+    &__color-primary.vs-switch--checked {
+      background: var(--vs-switch-checked-bg-color, #1f73b7);
+    }
+
+    &__color-success.vs-switch--checked {
+      background: var(--vs-switch-checked-bg-color, #186146);
+    }
+
+    &__color-danger.vs-switch--checked {
+      background: var(--vs-switch-checked-bg-color, #cc3340);
+    }
+
+    &__color-warning.vs-switch--checked {
+      background: var(--vs-switch-checked-bg-color, #ffb057);
+
+      .vs-switch__thumb {
+        background: #703815;
+      }
+    }
+
+    &__color-secondary.vs-switch--checked {
+      background: var(--vs-switch-checked-bg-color, #3a3a3a);
+    }
+
+    &__color-indigo.vs-switch--checked {
+      background: var(--vs-switch-checked-bg-color, #4f46e5);
+    }
+
+    &__color-cyan.vs-switch--checked {
+      background: var(--vs-switch-checked-bg-color, #06b6d4);
+    }
+
+    &__color-orange.vs-switch--checked {
+      background: var(--vs-switch-checked-bg-color, #f97316);
+    }
+
+    &__color-crimson.vs-switch--checked {
+      background: var(--vs-switch-checked-bg-color, #dc2626);
+    }
+
+    &__color-gray.vs-switch--checked {
+      background: var(--vs-switch-checked-bg-color, #6b7280);
+    }
+
+    // High contrast mode
+    &--high-contrast {
+      &.vs-switch__color-primary.vs-switch--checked {
+        background: var(--vs-switch-checked-bg-color, #0d47a1);
+      }
+
+      &.vs-switch__color-indigo.vs-switch--checked {
+        background: var(--vs-switch-checked-bg-color, #3730a3);
+      }
+
+      &.vs-switch__color-cyan.vs-switch--checked {
+        background: var(--vs-switch-checked-bg-color, #0369a1);
+      }
+
+      &.vs-switch__color-orange.vs-switch--checked {
+        background: var(--vs-switch-checked-bg-color, #c2410c);
+      }
+
+      &.vs-switch__color-crimson.vs-switch--checked {
+        background: var(--vs-switch-checked-bg-color, #7f1d1d);
+      }
+
+      &.vs-switch__color-gray.vs-switch--checked {
+        background: var(--vs-switch-checked-bg-color, #374151);
+      }
+    }
+
+    // Thumb styling
+    &__thumb {
+      position: absolute;
+      left: 2px;
+      width: 20px;
+      height: 20px;
+      background: var(--vs-switch-thumb);
+      border-radius: 50%;
+      transition: transform 0.2s ease;
+      pointer-events: none;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    }
+
+    // Checked state
+    &--checked {
+      background: var(--vs-switch-checked-bg-color, var(--vs-switch-bg-checked));
+    }
+
+    // Disabled state
+    &--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+</style>