feature: implement switch component

packages/ui-vue/components/switch/src/switch.component.tsx

@@ -0,0 +1,94 @@
+import { computed, defineComponent, ref, SetupContext } from 'vue';
+import { switchProps, SwitchProps, SwitchType } from './switch.props';
+
+export default defineComponent({
+    name: 'FSwitch',
+    props: switchProps,
+    emits: [],
+    setup(props: SwitchProps, context: SetupContext) {
+        const checked = ref(false);
+
+        const disable = ref(false);
+
+        const editable = ref(false);
+
+        const squire = ref(false);
+
+        const size = ref(props.size);
+
+        const checkedLabel = ref('');
+
+        const uncheckedLabel = ref('');
+
+        function getColor(flag = '') {
+            if (flag === 'borderColor') {
+                return this.defaultBoColor;
+            }
+            if (flag === 'switchColor') {
+                if (this.reverse) {
+                    return !this.checked ? this.switchColor : this.switchOffColor || this.switchColor;
+                }
+                return this.checked ? this.switchColor : this.switchOffColor || this.switchColor;
+            }
+            if (this.reverse) {
+                return !this.checked ? this.color : this.defaultBgColor;
+            }
+            return this.checked ? this.color : this.defaultBgColor;
+        }
+
+        function getBackgroundColor() {
+            return '';
+        }
+
+        function getBorderColor() {
+            return '';
+        }
+
+        function getSwitchColor() {
+            return '';
+        }
+
+        const switchContainerClass = computed(() => ({
+            switch: true,
+            'f-cmp-switch': true,
+            checked: checked.value,
+            disabled: disable.value || !editable.value,
+            squire: squire.value,
+            'switch-large': size.value === 'large',
+            'switch-medium': size.value === 'medium',
+            'switch-small': size.value === 'small',
+        }));
+
+        const switchContainerStyle = computed(() => ({
+            outline: 'none',
+            'backgroud-color': getBackgroundColor(),
+            'border-color': getBorderColor(),
+        }));
+
+        const smallStyle = computed(() => ({
+            background: getSwitchColor(),
+        }));
+
+        const shouldShowSwitch = computed(() => {
+            // checkedLabel || uncheckedLabel
+            return checkedLabel.value || uncheckedLabel.value;
+        });
+
+        return () => {
+            return (
+                <>
+                    <span tabindex="0" role="button" class={switchContainerClass.value} style={switchContainerStyle.value}>
+                        {shouldShowSwitch.value && (
+                            <span class="switch-pane">
+                                <span class="switch-label-checked">{checkedLabel.value}</span>
+                                <span class="switch-label-unchecked">{uncheckedLabel.value}</span>
+                            </span>
+                        )}
+
+                        <small style={smallStyle.value}>{context.slots.default && context.slots.default()}</small>
+                    </span>
+                </>
+            );
+        };
+    },
+});

packages/ui-vue/components/switch/src/switch.props.ts

@@ -1,4 +1,22 @@
-import { ExtractPropTypes } from 'vue';
+import { ExtractPropTypes, PropType } from 'vue';
 
-export const switchProps = {};
-export type SwtichProps = ExtractPropTypes<typeof switchProps>;
+export type SwitchType = 'small' | 'medium' | 'large';
+
+export const switchProps = {
+    square: { type: Boolean, default: false },
+    size: { type: String as PropType<SwitchType>, default: 'medium' },
+    switchOffColor: { type: String },
+    switchColor: { type: String },
+    defaultBackgroundColor: { type: String },
+    defaultBorderColor: { type: String },
+    checkedLabel: { type: String },
+    uncheckedLabel: { type: String },
+    checked: { type: Boolean },
+    readonly: { type: Boolean },
+    disable: { type: Boolean },
+    editable: { type: Boolean, default: true },
+    reverse: { type: Boolean },
+    trueValue: { type: Object, default: true },
+    falseValue: { type: Object, default: false },
+};
+export type SwitchProps = ExtractPropTypes<typeof switchProps>;