docs: QCheckbox doc (#213)

altai-ui · Jan 19, 2022 · 2d5cefc · 2d5cefc
1 parent a46acfa
commit 2d5cefc
Show file tree

Hide file tree

Showing 19 changed files with 926 additions and 15 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -23,12 +23,15 @@ jobs:
           node-version: '16.x'
 
       # cache node_modules
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
       - name: Cache dependencies
         uses: actions/cache@v2
         id: yarn-cache
         with:
-          path: |
-            **/node_modules
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-

diff --git a/.github/workflows/netlify.yml b/.github/workflows/netlify.yml
@@ -24,13 +24,18 @@ jobs:
         with:
           node-version: '16.x'
 
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
       - name: Cache dependencies
         uses: actions/cache@v2
+        id: yarn-cache
         with:
-          path: ~/.npm
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-node-
+            ${{ runner.os }}-yarn-
 
       - run: yarn --frozen-lockfile
       - run: yarn build-storybook

diff --git a/.lintstagedrc b/.lintstagedrc
@@ -1,7 +1,7 @@
 {
   "*.{js,ts}": ["eslint --fix", "prettier --write"],
   "*.scss": ["stylelint --fix", "prettier --write"],
-  "*.vue": ["stylelint --fix", "prettier --write", "eslint --fix"],
+  "*.{vue,html}": ["stylelint --fix", "prettier --write", "eslint --fix"],
   "{*.json,.*rc}": ["prettier --parser json --write"],
   "*.{yaml,yml}": ["prettier --parser yaml --write"]
 }
diff --git a/.prettierignore b/.prettierignore
@@ -2,3 +2,5 @@
 /public
 /dist
 /stories/intro.stories.mdx
+/docs/.vuepress/.temp
+/docs/.vuepress/.cache
diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
@@ -18,14 +18,10 @@ export default defineUserConfig<DefaultThemeOptions, ViteBundlerOptions>({
         text: 'Components',
         link: '/components/',
         children: [
-          {
-            text: 'QButton',
-            link: '/components/QButton'
-          },
-          {
-            text: 'QBreadcrumbs',
-            link: '/components/QBreadcrumbs'
-          }
+          '/components/QButton.md',
+          '/components/QBreadcrumbs.md',
+          '/components/QCheckbox.md',
+          '/components/QCheckboxGroup.md'
         ]
       },
       // NavbarGroup

diff --git a/docs/.vuepress/public/QCheckbox/QCheckbox.html b/docs/.vuepress/public/QCheckbox/QCheckbox.html
@@ -0,0 +1,54 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <!-- import CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/@qvant/qui/dist/qui.css" />
+  </head>
+
+  <body>
+    <div id="app">
+      <div class="block">
+        <q-checkbox :model-value="false" label="Default" />
+      </div>
+      <div class="block">
+        <q-checkbox :model-value="true" label="Selected" />
+      </div>
+      <div class="block">
+        <q-checkbox :model-value="false" label="Indeterminate" indeterminate />
+      </div>
+      <div class="block">
+        <q-checkbox :model-value="false" label="Default Disabled" disabled />
+      </div>
+      <div class="block">
+        <q-checkbox :model-value="true" label="Selected Disabled" disabled />
+      </div>
+      <div class="block">
+        <q-checkbox
+          :model-value="false"
+          label="Indeterminate Disabled"
+          disabled
+          indeterminate
+        />
+      </div>
+    </div>
+  </body>
+  <!-- import Vue before Qui -->
+  <script src="https://unpkg.com/vue@next"></script>
+  <!-- import JavaScript -->
+  <script src="https://unpkg.com/@qvant/qui-max@latest"></script>
+  <script>
+    const app = Vue.createApp({});
+    const Qui = window.QuiMax.default;
+    app.use(Qui);
+    app.mount('#app');
+  </script>
+  <style>
+    #app {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 20px;
+      align-items: center;
+      padding: 25px;
+    }
+  </style>
+</html>
diff --git a/docs/.vuepress/public/QCheckbox/disabled.html b/docs/.vuepress/public/QCheckbox/disabled.html
@@ -0,0 +1,31 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <!-- import CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/@qvant/qui/dist/qui.css" />
+  </head>
+
+  <body>
+    <div id="app">
+      <q-checkbox label="Disabled" disabled />
+    </div>
+  </body>
+  <!-- import Vue before Qui -->
+  <script src="https://unpkg.com/vue@next"></script>
+  <!-- import JavaScript -->
+  <script src="https://unpkg.com/@qvant/qui-max@latest"></script>
+  <script>
+    const app = Vue.createApp({});
+    const Qui = window.QuiMax.default;
+    app.use(Qui);
+    app.mount('#app');
+  </script>
+  <style>
+    #app {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 25px;
+    }
+  </style>
+</html>
diff --git a/docs/.vuepress/public/QCheckbox/indeterminate.html b/docs/.vuepress/public/QCheckbox/indeterminate.html
@@ -0,0 +1,38 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <!-- import CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/@qvant/qui/dist/qui.css" />
+  </head>
+
+  <body>
+    <div id="app">
+      <q-checkbox v-model="model" label="Indeterminate" indeterminate />
+    </div>
+  </body>
+  <!-- import Vue before Qui -->
+  <script src="https://unpkg.com/vue@next"></script>
+  <!-- import JavaScript -->
+  <script src="https://unpkg.com/@qvant/qui-max@latest"></script>
+  <script>
+    const App = {
+      data() {
+        const { ref } = Vue;
+
+        const model = ref(true);
+
+        return { model };
+      }
+    };
+
+    const app = Vue.createApp(App);
+    const Qui = window.QuiMax.default;
+    app.use(Qui);
+    app.mount('#app');
+  </script>
+  <style>
+    #app {
+      padding: 25px;
+    }
+  </style>
+</html>
diff --git a/docs/.vuepress/public/QCheckbox/label.html b/docs/.vuepress/public/QCheckbox/label.html
@@ -0,0 +1,38 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <!-- import CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/@qvant/qui/dist/qui.css" />
+  </head>
+
+  <body>
+    <div id="app">
+      <q-checkbox v-model="model" label="Label" />
+    </div>
+  </body>
+  <!-- import Vue before Qui -->
+  <script src="https://unpkg.com/vue@next"></script>
+  <!-- import JavaScript -->
+  <script src="https://unpkg.com/@qvant/qui-max@latest"></script>
+  <script>
+    const App = {
+      data() {
+        const { ref } = Vue;
+
+        const model = ref(true);
+
+        return { model };
+      }
+    };
+
+    const app = Vue.createApp(App);
+    const Qui = window.QuiMax.default;
+    app.use(Qui);
+    app.mount('#app');
+  </script>
+  <style>
+    #app {
+      padding: 25px;
+    }
+  </style>
+</html>
diff --git a/docs/.vuepress/public/QCheckbox/model.html b/docs/.vuepress/public/QCheckbox/model.html
@@ -0,0 +1,38 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <!-- import CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/@qvant/qui/dist/qui.css" />
+  </head>
+
+  <body>
+    <div id="app">
+      <q-checkbox v-model="model" :label="`modelValue = ${model}`" />
+    </div>
+  </body>
+  <!-- import Vue before Qui -->
+  <script src="https://unpkg.com/vue@next"></script>
+  <!-- import JavaScript -->
+  <script src="https://unpkg.com/@qvant/qui-max@latest"></script>
+  <script>
+    const App = {
+      data() {
+        const { ref } = Vue;
+
+        const model = ref(true);
+
+        return { model };
+      }
+    };
+
+    const app = Vue.createApp(App);
+    const Qui = window.QuiMax.default;
+    app.use(Qui);
+    app.mount('#app');
+  </script>
+  <style>
+    #app {
+      padding: 25px;
+    }
+  </style>
+</html>
diff --git a/docs/.vuepress/public/QCheckbox/validate.html b/docs/.vuepress/public/QCheckbox/validate.html
@@ -0,0 +1,55 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <!-- import CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/@qvant/qui/dist/qui.css" />
+  </head>
+
+  <body>
+    <div id="app">
+      <q-form :model="model" :rules="rules">
+        <q-form-item prop="checkbox">
+          <q-checkbox
+            v-model="model.checkbox"
+            label="Required checkbox"
+            validate-event
+          />
+        </q-form-item>
+      </q-form>
+    </div>
+  </body>
+  <!-- import Vue before Qui -->
+  <script src="https://unpkg.com/vue@next"></script>
+  <!-- import Qui-Max -->
+  <script src="https://unpkg.com/@qvant/qui-max@latest"></script>
+  <script>
+    const { createApp, reactive } = Vue;
+    const App = {
+      data() {
+        const rules = {
+          checkbox: {
+            required: true,
+            type: 'enum',
+            enum: [true],
+            message: 'Please select checkbox',
+            trigger: 'change'
+          }
+        };
+
+        const model = reactive({ checkbox: true });
+
+        return { model, rules };
+      }
+    };
+
+    const app = createApp(App);
+    const Qui = window.QuiMax.default;
+    app.use(Qui);
+    app.mount('#app');
+  </script>
+  <style>
+    .q-form {
+      padding: 25px;
+    }
+  </style>
+</html>
diff --git a/docs/.vuepress/public/QCheckboxGroup/QCheckboxGroup.html b/docs/.vuepress/public/QCheckboxGroup/QCheckboxGroup.html
@@ -0,0 +1,47 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <!-- import CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/@qvant/qui/dist/qui.css" />
+  </head>
+
+  <body>
+    <div id="app">
+      <q-checkbox-group v-model="checkedCities">
+        <q-checkbox v-for="city in cities" :key="city" :label="city" />
+      </q-checkbox-group>
+    </div>
+  </body>
+  <!-- import Vue before Qui -->
+  <script src="https://unpkg.com/vue@next"></script>
+  <!-- import JavaScript -->
+  <script src="https://unpkg.com/@qvant/qui-max@latest"></script>
+  <script>
+    const App = {
+      data() {
+        const checkedCities = Vue.ref(['Shanghai', 'Beijing']);
+        const cities = Vue.ref([
+          'Shanghai',
+          'Beijing',
+          'Guangzhou',
+          'Shenzhen'
+        ]);
+
+        return { checkedCities, cities };
+      }
+    };
+
+    const app = Vue.createApp(App);
+    const Qui = window.QuiMax.default;
+    app.use(Qui);
+    app.mount('#app');
+  </script>
+  <style>
+    #app {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 25px;
+    }
+  </style>
+</html>