fix(VsRadio,VsRadioSet): create vs-radio-node and fix radio checked b…

…ug (#152)
pubg · Apr 4, 2024 · 0a195c8 · 0a195c8
1 parent 3baff8e
commit 0a195c8
Show file tree

Hide file tree

Showing 30 changed files with 876 additions and 497 deletions.
diff --git a/packages/vlossom/src/components/vs-checkbox-set/VsCheckboxSet.scss b/packages/vlossom/src/components/vs-checkbox-set/VsCheckboxSet.scss
@@ -8,6 +8,6 @@
     }
 
     .vs-checkbox-item:not(:last-child) {
-        margin-right: var(--vs-checkbox-set-checkboxMargin, 2rem);
+        margin-right: var(--vs-checkbox-set-checkboxGap, 2rem);
     }
 }
diff --git a/packages/vlossom/src/components/vs-checkbox-set/VsCheckboxSet.vue b/packages/vlossom/src/components/vs-checkbox-set/VsCheckboxSet.vue
@@ -16,22 +16,21 @@
             </template>
 
             <div :class="['vs-checkbox-set', { vertical }]" :style="checkboxSetStyleSet">
-                <vs-check-node
+                <vs-checkbox-node
                     v-for="(option, index) in options"
                     :key="getOptionValue(option)"
                     class="vs-checkbox-item"
-                    type="checkbox"
-                    :id="`${id}-${optionIds[index]}`"
                     :color-scheme="computedColorScheme"
                     :style-set="checkboxStyleSet"
                     :checked="isChecked(option)"
                     :disabled="disabled"
+                    :id="`${id}-${optionIds[index]}`"
+                    :label="getOptionLabel(option)"
                     :name="name"
                     :readonly="readonly"
                     :required="required"
                     :state="state"
                     :value="getOptionValue(option)"
-                    :label="getOptionLabel(option)"
                     @toggle="onToggle(option, $event)"
                     @focus="onFocus(option, $event)"
                     @blur="onBlur(option, $event)"
@@ -44,7 +43,7 @@
                             :label="getOptionLabel(option)"
                         />
                     </template>
-                </vs-check-node>
+                </vs-checkbox-node>
             </div>
 
             <template #messages v-if="!noMessage">
@@ -69,7 +68,7 @@ import { VsComponent, type ColorScheme } from '@/declaration';
 import { utils } from '@/utils';
 import VsInputWrapper from '@/components/vs-input-wrapper/VsInputWrapper.vue';
 import VsWrapper from '@/components/vs-wrapper/VsWrapper.vue';
-import { VsCheckNode } from '@/nodes';
+import { VsCheckboxNode } from '@/nodes';
 
 import type { VsCheckboxSetStyleSet } from './types';
 import { VsCheckboxStyleSet } from '../vs-checkbox/types';
@@ -78,7 +77,7 @@ const name = VsComponent.VsCheckboxSet;
 
 export default defineComponent({
     name,
-    components: { VsInputWrapper, VsWrapper, VsCheckNode },
+    components: { VsInputWrapper, VsWrapper, VsCheckboxNode },
     props: {
         ...getInputProps<any[], ['placeholder', 'noClear']>('placeholder', 'noClear'),
         ...getInputOptionProps(),

diff --git a/packages/vlossom/src/components/vs-checkbox-set/stories/VsCheckboxSet.stories.ts b/packages/vlossom/src/components/vs-checkbox-set/stories/VsCheckboxSet.stories.ts
@@ -1,5 +1,6 @@
 import { chromaticParameters, colorScheme, getMetaArguments, state, getStateTemplate } from '@/storybook';
 import { UIState } from '@/declaration';
+import { useVlossom } from '@/vlossom-framework';
 import VsContainer from '@/components/vs-container/VsContainer.vue';
 import VsCheckboxSet from '../VsCheckboxSet.vue';
 
@@ -105,6 +106,15 @@ export const Vertical: Story = {
     },
 };
 
+export const BeforeChange: Story = {
+    args: {
+        beforeChange: async () => {
+            const $vs = useVlossom();
+            return await $vs.confirm.open('Are you sure?');
+        },
+    },
+};
+
 export const Width: Story = {
     render: (args: any) => ({
         components: { VsCheckboxSet, VsContainer },
@@ -144,11 +154,13 @@ export const Grid: Story = {
 export const StyleSet: Story = {
     args: {
         styleSet: {
-            backgroundColor: '#81c798',
-            border: '3px solid #81c798',
             borderRadius: '0.8rem',
             focusBoxShadow: '0 0 0 3px #81c798',
-            checkboxMargin: '3rem',
+            labelFontColor: '#a0b0b9',
+            labelFontSize: '0.8rem',
+            checkboxColor: '#81c798',
+            checkboxSize: '4rem',
+            checkboxGap: '3rem',
         },
     },
 };

diff --git a/packages/vlossom/src/components/vs-checkbox-set/types.ts b/packages/vlossom/src/components/vs-checkbox-set/types.ts
@@ -1,5 +1,5 @@
-import type { VsCheckboxStyleSet } from './../vs-checkbox/types';
+import type { VsCheckboxNodeStyleSet } from '@/nodes';
 
-export interface VsCheckboxSetStyleSet extends VsCheckboxStyleSet {
-    checkboxMargin?: string;
+export interface VsCheckboxSetStyleSet extends VsCheckboxNodeStyleSet {
+    checkboxGap?: string;
 }
diff --git a/packages/vlossom/src/components/vs-checkbox/VsCheckbox.vue b/packages/vlossom/src/components/vs-checkbox/VsCheckbox.vue
@@ -15,15 +15,14 @@
                 <slot name="label" />
             </template>
 
-            <vs-check-node
-                type="checkbox"
-                :id="id"
+            <vs-checkbox-node
                 :color-scheme="computedColorScheme"
                 :style-set="computedStyleSet"
                 :checked="isChecked"
+                :disabled="disabled"
+                :id="id"
                 :indeterminate="indeterminate"
                 :label="checkLabel"
-                :disabled="disabled"
                 :name="name"
                 :readonly="readonly"
                 :required="required"
@@ -36,7 +35,7 @@
                 <template #label v-if="$slots['check-label']">
                     <slot name="check-label" />
                 </template>
-            </vs-check-node>
+            </vs-checkbox-node>
 
             <template #messages v-if="!noMessage">
                 <slot name="messages" />
@@ -58,14 +57,14 @@ import {
 import { VsComponent, type ColorScheme } from '@/declaration';
 import VsInputWrapper from '@/components/vs-input-wrapper/VsInputWrapper.vue';
 import VsWrapper from '@/components/vs-wrapper/VsWrapper.vue';
-import { VsCheckNode } from '@/nodes';
+import { VsCheckboxNode } from '@/nodes';
 
 import type { VsCheckboxStyleSet } from './types';
 
 const name = VsComponent.VsCheckbox;
 export default defineComponent({
     name,
-    components: { VsInputWrapper, VsWrapper, VsCheckNode },
+    components: { VsInputWrapper, VsWrapper, VsCheckboxNode },
     props: {
         ...getInputProps<any, ['placeholder', 'noClear']>('placeholder', 'noClear'),
         ...getResponsiveProps(),
@@ -75,6 +74,7 @@ export default defineComponent({
             type: Function as PropType<(value: any) => Promise<boolean> | null>,
             default: null,
         },
+        checked: { type: Boolean, default: false },
         checkLabel: { type: String, default: '' },
         indeterminate: { type: Boolean, default: false },
         multiple: { type: Boolean, default: false },
@@ -87,8 +87,9 @@ export default defineComponent({
     expose: ['clear', 'validate'],
     setup(props, context) {
         const {
+            beforeChange,
+            checked,
             colorScheme,
-            styleSet,
             label,
             modelValue,
             messages,
@@ -97,7 +98,7 @@ export default defineComponent({
             trueValue,
             falseValue,
             multiple,
-            beforeChange,
+            styleSet,
         } = toRefs(props);
 
         const { emit } = context;
@@ -126,15 +127,19 @@ export default defineComponent({
             rules: allRules,
             callbacks: {
                 onMounted: () => {
-                    inputValue.value = getInitialValue();
+                    if (checked.value) {
+                        inputValue.value = getUpdatedValue(true, inputValue.value);
+                    } else {
+                        inputValue.value = getInitialValue();
+                    }
                 },
                 onClear: () => {
                     inputValue.value = getClearedValue();
                 },
             },
         });
 
-        async function onToggle(checked: boolean) {
+        async function onToggle(c: boolean) {
             const beforeChangeFn = beforeChange.value;
             if (beforeChangeFn) {
                 const result = await beforeChangeFn(inputValue.value);
@@ -143,7 +148,7 @@ export default defineComponent({
                 }
             }
 
-            inputValue.value = getUpdatedValue(checked, inputValue.value);
+            inputValue.value = getUpdatedValue(c, inputValue.value);
         }
 
         function onFocus(e: FocusEvent) {

diff --git a/packages/vlossom/src/components/vs-checkbox/stories/VsCheckbox.stories.ts b/packages/vlossom/src/components/vs-checkbox/stories/VsCheckbox.stories.ts
@@ -8,6 +8,7 @@ import {
 } from '@/storybook';
 import { computed, ref } from 'vue';
 import { UIState } from '@/declaration';
+import { useVlossom } from '@/vlossom-framework';
 import VsContainer from '@/components/vs-container/VsContainer.vue';
 import VsCheckbox from '../VsCheckbox.vue';
 
@@ -165,6 +166,15 @@ export const Indeterminate: Story = {
     }),
 };
 
+export const BeforeChange: Story = {
+    args: {
+        beforeChange: async () => {
+            const $vs = useVlossom();
+            return await $vs.confirm.open('Are you sure?');
+        },
+    },
+};
+
 export const Width: Story = {
     render: (args: any) => ({
         components: { VsCheckbox, VsContainer },
@@ -204,10 +214,12 @@ export const Grid: Story = {
 export const StyleSet: Story = {
     args: {
         styleSet: {
-            backgroundColor: '#81c798',
-            border: '3px solid #81c798',
-            borderRadius: '0.8rem',
+            borderRadius: '1.3rem',
             focusBoxShadow: '0 0 0 3px #81c798',
+            labelFontColor: '#a0b0b9',
+            labelFontSize: '0.8rem',
+            checkboxColor: '#81c798',
+            checkboxSize: '4rem',
         },
     },
 };

diff --git a/packages/vlossom/src/components/vs-checkbox/types.ts b/packages/vlossom/src/components/vs-checkbox/types.ts
@@ -1,11 +1,3 @@
-export interface VsCheckboxStyleSet {
-    backgroundColor?: string;
-    border?: string;
-    borderRadius?: string;
-    checkLabelFontColor?: string;
-    focusBoxShadow?: string;
-    fontSize?: string;
-    height?: string;
-    iconColor?: string;
-    width?: string;
-}
+import type { VsCheckboxNodeStyleSet } from '@/nodes';
+
+export interface VsCheckboxStyleSet extends VsCheckboxNodeStyleSet {}
diff --git a/packages/vlossom/src/components/vs-radio-set/VsRadioSet.scss b/packages/vlossom/src/components/vs-radio-set/VsRadioSet.scss
@@ -8,6 +8,6 @@
     }
 
     .vs-radio-item:not(:last-child) {
-        margin-right: var(--vs-radio-set-radioMargin, 2rem);
+        margin-right: var(--vs-radio-set-radioGap, 2rem);
     }
 }
diff --git a/packages/vlossom/src/components/vs-radio-set/VsRadioSet.vue b/packages/vlossom/src/components/vs-radio-set/VsRadioSet.vue
@@ -16,22 +16,21 @@
             </template>
 
             <div :class="['vs-radio-set', { vertical }]" :style="radioSetStyleSet">
-                <vs-check-node
+                <vs-radio-node
                     v-for="(option, index) in options"
                     :key="getOptionValue(option)"
                     class="vs-radio-item"
-                    type="radio"
-                    :id="`${id}-${optionIds[index]}`"
                     :color-scheme="computedColorScheme"
                     :style-set="radioStyleSet"
                     :checked="isChecked(option)"
                     :disabled="disabled"
+                    :id="`${id}-${optionIds[index]}`"
+                    :label="getOptionLabel(option)"
                     :name="name"
                     :readonly="readonly"
                     :required="required"
                     :state="state"
                     :value="getOptionValue(option)"
-                    :label="getOptionLabel(option)"
                     @toggle="onToggle(option)"
                     @focus="onFocus(option, $event)"
                     @blur="onBlur(option, $event)"
@@ -44,7 +43,7 @@
                             :label="getOptionLabel(option)"
                         />
                     </template>
-                </vs-check-node>
+                </vs-radio-node>
             </div>
 
             <template #messages v-if="!noMessage">
@@ -69,15 +68,14 @@ import { VsComponent, type ColorScheme } from '@/declaration';
 import { utils } from '@/utils';
 import VsInputWrapper from '@/components/vs-input-wrapper/VsInputWrapper.vue';
 import VsWrapper from '@/components/vs-wrapper/VsWrapper.vue';
-import { VsCheckNode } from '@/nodes';
+import { VsRadioNode } from '@/nodes';
 
 import type { VsRadioSetStyleSet } from './types';
 import type { VsRadioStyleSet } from './../vs-radio/types';
 
-const name = VsComponent.VsRadioSet;
 export default defineComponent({
-    name,
-    components: { VsInputWrapper, VsWrapper, VsCheckNode },
+    name: VsComponent.VsRadioSet,
+    components: { VsInputWrapper, VsWrapper, VsRadioNode },
     props: {
         ...getInputProps<any[], ['placeholder', 'noClear']>('placeholder', 'noClear'),
         ...getInputOptionProps(),
@@ -104,6 +102,7 @@ export default defineComponent({
             label,
             modelValue,
             messages,
+            name,
             options,
             optionLabel,
             optionValue,
@@ -114,7 +113,7 @@ export default defineComponent({
 
         const { emit } = context;
 
-        const { computedColorScheme } = useColorScheme(name, colorScheme);
+        const { computedColorScheme } = useColorScheme(VsComponent.VsRadioSet, colorScheme);
 
         const { computedStyleSet: radioStyleSet } = useStyleSet<VsRadioStyleSet>(VsComponent.VsRadio, styleSet);
         const { computedStyleSet: radioSetStyleSet } = useStyleSet<VsRadioSetStyleSet>(
@@ -132,8 +131,12 @@ export default defineComponent({
         const { getOptionLabel, getOptionValue } = useInputOption(inputValue, options, optionLabel, optionValue);
 
         function requiredCheck() {
-            const hasChecked = options.value.some((option) => isChecked(option));
-            return required.value && !hasChecked ? 'required' : '';
+            if (!required.value) {
+                return '';
+            }
+
+            const checkedRadioElement = document.querySelector(`input[name="${name.value}"]:checked`);
+            return !checkedRadioElement ? 'required' : '';
         }
 
         function isChecked(option: any) {