sprintify-ui 0.6.3 → 0.6.4

package/dist/types/src/components/BaseSwitch.vue.d.ts

@@ -24,6 +24,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    disabled: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
     checkedIcon: {
         default: string;
         type: StringConstructor;
@@ -59,6 +63,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    disabled: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
     checkedIcon: {
         default: string;
         type: StringConstructor;
@@ -74,6 +82,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     name: string;
     color: "dark" | "light" | "danger" | "success" | "warning" | "primary" | "info";
     modelValue: string | number | boolean | null | undefined;
+    disabled: boolean;
     hasError: boolean;
     size: "base" | "xs" | "sm" | "lg" | "xl";
     checkedIcon: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseSwitch.stories.js

@@ -45,6 +45,11 @@ const Template = (args) => ({
 export const Demo = Template.bind({});
 Demo.args = {};
 
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
+
 const colors = [
   'primary',
   'info',

package/src/components/BaseSwitch.vue

@@ -5,7 +5,8 @@
         :model-value="normalizedModelValue"
         :class="[
           modelValue ? bg : 'bg-slate-200',
-          'relative inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 ',
+          'relative inline-flex shrink-0 items-center rounded-full transition-colors duration-200 ease-in-out',
+          disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2',
           focus,
         ]"
         :style="{
@@ -32,7 +33,9 @@
       </Switch>
       <SwitchLabel
         v-if="$slots.default"
-        class="cursor-pointer"
+        :class="[
+          disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+        ]"
       >
         <slot />
       </SwitchLabel>
@@ -75,6 +78,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
   checkedIcon: {
     default: '',
     type: String,
@@ -210,6 +217,10 @@ const icon = computed(() => {
 });
 
 function update(payload: any) {
+  if (props.disabled) {
+    return;
+  }
+
   emitUpdate(payload);
 }
 </script>