bge-ui 1.4.0 → 1.4.2

package/dist/style.css

@@ -1741,6 +1741,32 @@ to {
 }
 .bge-datepicker .bge-datepicker__input.inputed:hover .bge-datepicker__icon[data-v-a163f1fb] {
   display: none;
+}.bge-switch[data-v-e973c7de] {
+  width: 38px;
+  height: 20px;
+  border-radius: 999px;
+  background-color: var(--separator-separator);
+  transition: background-color 0.3s;
+  position: relative;
+  cursor: pointer;
+}
+.bge-switch[data-v-e973c7de]::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  border-radius: 100%;
+  transition: all 0.3s;
+  width: 16px;
+  height: 16px;
+  background-color: var(--tc-secondary);
+}
+.bge-switch.checked[data-v-e973c7de] {
+  background: var(--tc-theme);
+}
+.bge-switch.checked[data-v-e973c7de]::after {
+  left: 20px;
+  background-color: var(--tc-icon-opposite);
 }.dp__input_wrap {
   position: relative;
   width: 100%;

package/dist/switch/index.vue.d.ts

@@ -0,0 +1,47 @@
+declare const _default: import("vue").DefineComponent<{
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: () => never[];
+    };
+    trueValue: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+    falseValue: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: () => never[];
+    };
+    trueValue: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+    falseValue: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: boolean;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    size: string;
+    modelValue: string | number | boolean;
+    trueValue: string | number | boolean;
+    falseValue: string | number | boolean;
+}, {}>;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bge-ui",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "",
   "type": "module",
   "main": "./src/index.ts",

package/src/checkbox/index.vue

@@ -25,7 +25,7 @@
   </label>
 </template>
 <script lang="ts" setup>
-import { ref, watch, inject } from 'vue'
+import { ref, watch, inject, onMounted } from 'vue'
 defineOptions({
   name: 'CheckBox',
 })
@@ -92,8 +92,23 @@ watch(() => props.modelValue, (val) => {
     }
   }
   formItemContext && formItemContext.validate && formItemContext.validate().catch((err: any) => (err))
-}, {
-  immediate: true
+})
+
+onMounted(() => { 
+  if (typeof val === 'number' || typeof val === 'string' || typeof val === 'boolean') {
+    input.value = true
+    if (val === props.trueValue) {
+      input.value = true
+    } else {
+      input.value = false
+    }
+  } else {
+    if (val.includes(props.trueValue)) {
+      input.value = true
+    } else {
+      input.value = false
+    }
+  }
 })
 
 function getLabeledValue(isChecked: boolean) {

package/src/index.ts

@@ -16,6 +16,7 @@ import UiSlider from "./slider/index.vue"
 import UiSelect from "./select/index.vue"
 import UiOption from "./select/option.vue"
 import UiDatePicker from "./datePicker/index.vue"
+import UiSwitch from "./switch/index.vue"
 import "./datePicker/style/main.scss"
 const components: any = {
   UiButton,
@@ -32,7 +33,8 @@ const components: any = {
   UiSlider,
   UiSelect,
   UiOption,
-  UiDatePicker
+  UiDatePicker,
+  UiSwitch
 }
 
 export * from './icons/index.ts'
@@ -53,7 +55,8 @@ export {
   UiSlider,
   UiSelect,
   UiOption,
-  UiDatePicker
+  UiDatePicker,
+  UiSwitch
 }
 
 export default {

package/src/radio/index.vue

@@ -24,7 +24,7 @@
   </label>
 </template>
 <script lang="ts" setup>
-import { ref, watch, inject, nextTick } from 'vue'
+import { ref, watch, inject, nextTick, onMounted } from 'vue'
 defineOptions({
   name: 'Radio',
 })
@@ -92,6 +92,14 @@ function getLabeledValue(isChecked: boolean) {
   }
 }
 
+onMounted(() => { 
+  if (props.modelValue === props.trueValue) {
+    input.value = true
+  } else {
+    input.value = false
+  }
+})
+
 function handleChange (e: Event) {
   nextTick(() => {
     const target = e.target as HTMLInputElement

package/src/switch/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="bge-switch" :class="{checked: isChecked}" @click="isChecked = !isChecked">
+  </div>
+</template>
+<script lang="ts" setup>
+import {ref, watch} from 'vue'
+const isChecked = ref(false)
+
+const emit = defineEmits([
+  'change',
+  'update:modelValue'
+])
+
+const props = defineProps({
+  size: {
+    type: String,
+    default: 'default'
+  },
+  modelValue: {
+    type: [String, Number, Boolean],
+    default: () => []
+  },
+  trueValue: {
+    type: [Boolean, String, Number],
+    default: true
+  },
+  falseValue: {
+    type: [Boolean, String, Number],
+    default: false
+  }
+})
+
+watch(() => props.modelValue, (val) => {
+  isChecked.value = val === props.trueValue
+}, {
+  immediate: true
+})
+
+watch(isChecked, (val) => {
+  if (val) {
+    emit('update:modelValue', props.trueValue)
+    emit('change', props.trueValue)
+  } else {
+    emit('update:modelValue', props.falseValue)
+    emit('change', props.falseValue)
+  }
+})
+</script>
+<style lang="scss" scoped>
+.bge-switch {
+  width: 38px;
+  height: 20px;
+  border-radius: 999px;
+  background-color: var(--separator-separator);
+  transition: background-color .3s;
+  position: relative;
+  cursor: pointer;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    border-radius: 100%;
+    transition: all .3s;
+    width: 16px;
+    height: 16px;
+    background-color: var(--tc-secondary);
+  }
+
+  &.checked {
+    background: var(--tc-theme);
+
+    &::after {
+      left: 20px;
+      background-color: var(--tc-icon-opposite);
+    }
+  }
+}
+</style>