docs: add radio button (#260)

altai-ui · Mar 28, 2022 · ae3bfc2 · ae3bfc2
1 parent aa027ac
commit ae3bfc2
Show file tree

Hide file tree

Showing 10 changed files with 429 additions and 7 deletions.
diff --git a/src/qComponents/QRadio/src/QRadio.vue b/src/qComponents/QRadio/src/QRadio.vue
@@ -55,6 +55,9 @@ export default defineComponent({
      * binding value
      */
     value: { type: [String, Number, Boolean], default: null },
+    /**
+     * whether Radio is checked
+     */
     checked: { type: Boolean, default: false },
     /**
      * whether Radio is disabled

diff --git a/src/qComponents/QRadioGroup/src/QRadioGroup.vue b/src/qComponents/QRadioGroup/src/QRadioGroup.vue
@@ -40,6 +40,9 @@ export default defineComponent({
   componentName: 'QRadioGroup',
 
   props: {
+    /**
+     * the binding value
+     */
     modelValue: { type: [String, Number, Boolean], default: null },
     /**
      * whether Radio is disabled
@@ -49,6 +52,9 @@ export default defineComponent({
      * custom element tag
      */
     tag: { type: String, default: 'div' },
+    /**
+     * defines the direction, whether radio buttons are in the row or column.
+     */
     direction: {
       type: String as PropType<QRadioGroupPropDirection>,
       default: 'vertical',

diff --git a/vuepress-docs/docs/.vuepress/config.ts b/vuepress-docs/docs/.vuepress/config.ts
@@ -32,7 +32,8 @@ export default defineUserConfig<DefaultThemeOptions, ViteBundlerOptions>({
           '/components/QForm.md',
           '/components/QInput.md',
           '/components/QPagination.md',
-          '/components/QPopover.md'
+          '/components/QPopover.md',
+          '/components/QRadio.md'
         ]
       },
       // NavbarGroup
@@ -64,7 +65,8 @@ export default defineUserConfig<DefaultThemeOptions, ViteBundlerOptions>({
             '/components/QForm.md',
             '/components/QInput.md',
             '/components/QPagination.md',
-            '/components/QPopover.md'
+            '/components/QPopover.md',
+            '/components/QRadio.md'
           ]
         }
       ],

diff --git a/vuepress-docs/docs/.vuepress/public/QRadio/QRadioGroup.html b/vuepress-docs/docs/.vuepress/public/QRadio/QRadioGroup.html
@@ -0,0 +1,49 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <!-- import CSS -->
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/@qvant/qui-max/dist/style.css"
+    />
+  </head>
+
+  <body>
+    <div id="app">
+      <div class="block">
+        <q-radio-group v-model="value" @change="handleChange">
+          <q-radio :value="1" label="Option A"></q-radio>
+          <q-radio :value="2" label="Option B"></q-radio>
+          <q-radio :value="3" label="Option C"></q-radio>
+        </q-radio-group>
+      </div>
+    </div>
+  </body>
+  <!-- import Vue before Qui -->
+  <script src="https://unpkg.com/vue@latest"></script>
+  <!-- import JavaScript -->
+  <script src="https://unpkg.com/@qvant/qui-max@latest"></script>
+  <script>
+    const app = Vue.createApp({
+      setup() {
+        const value = Vue.ref(1);
+        const handleChange = newValue => {
+          console.log(newValue);
+        };
+        return { value, handleChange };
+      }
+    });
+
+    app.use(QuiMax.default);
+    app.mount('#app');
+  </script>
+  <style>
+    .block {
+      margin: 20px;
+    }
+
+    .label {
+      padding-bottom: 5px;
+    }
+  </style>
+</html>
diff --git a/vuepress-docs/docs/.vuepress/public/QRadio/QRadioGroup[direction].html b/vuepress-docs/docs/.vuepress/public/QRadio/QRadioGroup[direction].html
@@ -0,0 +1,67 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <!-- import CSS -->
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/@qvant/qui-max/dist/style.css"
+    />
+  </head>
+
+  <body>
+    <div id="app">
+      <div class="block">
+        <q-row>
+          <q-col cols="3">
+            <div class="label">vertical:</div>
+            <q-radio-group v-model="value" @change="handleChange">
+              <q-radio :value="1" label="Option A"></q-radio>
+              <q-radio :value="2" label="Option B"></q-radio>
+              <q-radio :value="3" label="Option C"></q-radio>
+            </q-radio-group>
+          </q-col>
+          <q-col cols="8">
+            <div class="label">horizontal:</div>
+            <q-radio-group
+              v-model="value2"
+              direction="horizontal"
+              @change="handleChange"
+            >
+              <q-radio :value="1" label="Option A"></q-radio>
+              <q-radio :value="2" label="Option B"></q-radio>
+              <q-radio :value="3" label="Option C"></q-radio>
+            </q-radio-group>
+          </q-col>
+        </q-row>
+      </div>
+    </div>
+  </body>
+  <!-- import Vue before Qui -->
+  <script src="https://unpkg.com/vue@latest"></script>
+  <!-- import JavaScript -->
+  <script src="https://unpkg.com/@qvant/qui-max@latest"></script>
+  <script>
+    const app = Vue.createApp({
+      setup() {
+        const value = Vue.ref(1);
+        const value2 = Vue.ref(1);
+        const handleChange = newValue => {
+          console.log(newValue);
+        };
+        return { value, value2, handleChange };
+      }
+    });
+
+    app.use(QuiMax.default);
+    app.mount('#app');
+  </script>
+  <style>
+    .block {
+      margin: 20px;
+    }
+
+    .label {
+      padding-bottom: 15px;
+    }
+  </style>
+</html>
diff --git a/vuepress-docs/docs/.vuepress/public/QRadio/main.html b/vuepress-docs/docs/.vuepress/public/QRadio/main.html
@@ -0,0 +1,54 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <!-- import CSS -->
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/@qvant/qui-max/dist/style.css"
+    />
+  </head>
+
+  <body>
+    <div id="app">
+      <div class="block">
+        <q-row>
+          <q-col class="wrapper" cols="2">
+            <div class="label">Default:</div>
+            <q-radio :checked="false" :value="1" label="Option" />
+          </q-col>
+          <q-col cols="2">
+            <div class="label">Checked:</div>
+            <q-radio :checked="true" :value="1" label="Option" />
+          </q-col>
+          <q-col cols="2">
+            <div class="label">Disabled:</div>
+            <q-radio :checked="false" :value="1" label="Option" disabled />
+          </q-col>
+          <q-col cols="3">
+            <div class="label">Checked & Disabled:</div>
+            <q-radio :checked="true" :value="1" label="Option" disabled />
+          </q-col>
+        </q-row>
+      </div>
+    </div>
+  </body>
+  <!-- import Vue before Qui -->
+  <script src="https://unpkg.com/vue@latest"></script>
+  <!-- import JavaScript -->
+  <script src="https://unpkg.com/@qvant/qui-max@latest"></script>
+  <script>
+    const app = Vue.createApp({});
+
+    app.use(QuiMax.default);
+    app.mount('#app');
+  </script>
+  <style>
+    .block {
+      margin: 20px;
+    }
+
+    .label {
+      padding-bottom: 5px;
+    }
+  </style>
+</html>
diff --git a/vuepress-docs/docs/.vuepress/public/QRadio/slot.html b/vuepress-docs/docs/.vuepress/public/QRadio/slot.html
@@ -0,0 +1,38 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <!-- import CSS -->
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/@qvant/qui-max/dist/style.css"
+    />
+  </head>
+
+  <body>
+    <div id="app">
+      <div class="block">
+        <div class="label">Default:</div>
+        <q-radio :checked="true" :value="1"><b>label from slot</b></q-radio>
+      </div>
+    </div>
+  </body>
+  <!-- import Vue before Qui -->
+  <script src="https://unpkg.com/vue@latest"></script>
+  <!-- import JavaScript -->
+  <script src="https://unpkg.com/@qvant/qui-max@latest"></script>
+  <script>
+    const app = Vue.createApp({});
+
+    app.use(QuiMax.default);
+    app.mount('#app');
+  </script>
+  <style>
+    .block {
+      margin: 20px;
+    }
+
+    .label {
+      padding-bottom: 5px;
+    }
+  </style>
+</html>
diff --git a/vuepress-docs/docs/components/Layout.md b/vuepress-docs/docs/components/Layout.md
@@ -54,10 +54,10 @@ const args = {
 ```vue
 <q-row class="block__row">
   <q-col
-      class="block__col"
-      :tag="args.tag"
-      :cols="args.cols"
-      :offset="args.offset"
+    class="block__col"
+    :tag="args.tag"
+    :cols="args.cols"
+    :offset="args.offset"
   >
     <div class="block__content">Lorem ipsum dolor</div>
   </q-col>

diff --git a/vuepress-docs/docs/components/QContextMenu.md b/vuepress-docs/docs/components/QContextMenu.md
@@ -103,7 +103,7 @@ The dropdown's position around the trigger button.
 - Type `String, HTMLElement`
 - Default: `null`
 
-Specifies a target element where QColorpicker will be moved from original layout place. (has to be a valid query selector, or an HTMLElement).
+Specifies a target element where `QContextMenu` will be moved from original layout place. (has to be a valid query selector, or an HTMLElement).
 
 <!-- prettier-ignore-start -->
 ```vue {4}