Add option class

app/controllers/base-controller.php

@@ -2,7 +2,7 @@
 
 namespace  Sakura\Controllers;
 
-use Sakura\Lib\BaseClass;
+use WP_REST_Controller;
 
 /**
  * The controller abstract base
@@ -10,8 +10,11 @@ use Sakura\Lib\BaseClass;
  * @license GPLv3
  * @author mashirozx <moezhx@outlook.com>
  */
-class BaseController extends BaseClass
+class BaseController extends WP_REST_Controller
 {
+  public static $version = SAKURA_VERSION;
+  public static $text_domain = SAKURA_TEXT_DOMAIN;
+
   /**
    * The rest API request parameters
    * @since 0.0.1

app/controllers/configuration-controller.php

@@ -0,0 +1,120 @@
+<?php
+
+namespace Sakura\Controllers;
+
+use WP_REST_Server;
+use WP_REST_Request;
+use WP_Error;
+use Sakura\Models\OptionModel;
+
+class ConfigurationController extends BaseController
+{
+  /**
+   * Constructor.
+   *
+   * @since 5.0.0
+   */
+  public function __construct()
+  {
+    $this->namespace = 'sakura/v1';
+    $this->rest_base = 'config';
+  }
+
+  /**
+   * Registers the routes for comments.
+   *
+   * @since 4.7.0
+   *
+   * @see register_rest_route()
+   */
+  public function register_routes()
+  {
+    register_rest_route(
+      $this->namespace,
+      '/' . $this->rest_base,
+      array(
+        array(
+          'methods'             => WP_REST_Server::READABLE,
+          'callback'            => array($this, 'get_config'),
+          'permission_callback' => array($this, 'get_config_permissions_check'),
+          // 'args'                => $this->get_collection_params(),
+        ),
+        array(
+          'methods'             => WP_REST_Server::CREATABLE,
+          'callback'            => array($this, 'create_config'),
+          'permission_callback' => array($this, 'create_config_permissions_check'),
+          // 'args'                => $this->get_endpoint_args_for_item_schema(WP_REST_Server::CREATABLE),
+        ),
+        array(
+          'methods'             => WP_REST_Server::EDITABLE,
+          'callback'            => array($this, 'update_config'),
+          'permission_callback' => array($this, 'update_config_permissions_check'),
+          // 'args'                => $this->get_endpoint_args_for_item_schema(WP_REST_Server::CREATABLE),
+        ),
+        // 'schema' => array($this, 'get_public_item_schema'),
+      )
+    );
+  }
+
+  public function get_config(WP_REST_Request $request)
+  {
+    $config = (array) OptionModel::get($this->rest_base);
+    if (!$config) {
+      return new WP_Error(
+        'no_such_option',
+        __('Maybe you should save the configuration bufore using it.', self::$text_domain),
+        array('status' => 500)
+      );
+    } else {
+      return $config;
+    }
+  }
+
+  public function get_config_permissions_check(WP_REST_Request $request)
+  {
+    return true;
+  }
+
+  public function create_config(WP_REST_Request $request)
+  {
+    $original = (array) $this->get_config($request);
+    $json = (array) self::json_validate($request->get_body());
+    if (empty(array_diff($original, $json))) {
+      return $original;
+    }
+
+    $config = OptionModel::create($this->rest_base, $json);
+    $config = $config ? $config : OptionModel::update($this->rest_base, $json);
+    if (!$config) {
+      return new WP_Error(
+        'save_config_failure',
+        __('Unable to save configuration.', self::$text_domain),
+        array('status' => 500)
+      );
+    } else {
+      return $this->get_config($request);
+    }
+  }
+
+  public function create_config_permissions_check(WP_REST_Request $request)
+  {
+    return true;
+  }
+
+  public function update_config(WP_REST_Request $request)
+  {
+    return $this->create_config($request);
+  }
+
+  public function update_config_permissions_check(WP_REST_Request $request)
+  {
+    return true;
+  }
+
+  public static function json_validate(string $string)
+  {
+    $json = json_decode($string);
+
+    return $json;
+  }
+}

app/functions.php

@@ -5,7 +5,7 @@
 define('SAKURA_VERSION', wp_get_theme()->get('Version'));
 define('SAKURA_TEXT_DOMAIN', wp_get_theme()->get('TextDomain'));
 
-define('SAKURA_DEVEPLOMENT', false);
+define('SAKURA_DEVEPLOMENT', true);
 define('SAKURA_DEVEPLOMENT_HOST', 'http://127.0.0.1:9000');
 
 // PHP loaders

app/helpers/vite-helper.php

@@ -63,7 +63,9 @@ class ViteHelper extends BaseClass
   {
     wp_enqueue_style('style.css', get_template_directory_uri() . '/style.css');
 
-    wp_enqueue_style('fontawesome-free', 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css');
+    wp_enqueue_style('fontawesome-free.css', 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css');
+
+    wp_enqueue_style('normalize.css', 'https://cdn.jsdelivr.net/npm/normalize.css/normalize.css');
 
     // TODO: don't use vue.js as handler
     // wp_enqueue_script('vue.js', 'https://unpkg.com/vue@next', array(), false, false);

app/models/option-model.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace Sakura\Models;
+
+class OptionModel extends BaseModel
+{
+  public static $namespace = 'sakura_options';
+
+  public static function the_key(string $key)
+  {
+    return self::$namespace . "_{$key}";
+  }
+
+  public static function create(string $key,  $value)
+  {
+    return add_option(self::the_key($key), $value);
+  }
+
+  public static function get(string $key)
+  {
+    return get_option(self::the_key($key));
+  }
+
+  public static function update(string $key, $value)
+  {
+    return update_option(self::the_key($key), $value);
+  }
+
+  public static function delete(string $key)
+  {
+    return delete_option(self::the_key($key));
+  }
+}

app/routers/admin-router.php

@@ -1,21 +0,0 @@
-<?php
-
-namespace Sakura\Routers;
-
-use Sakura\Helpers\TemplateHelper;
-
-class AdminRouter
-{
-  public function __construct()
-  {
-    add_action('admin_menu', [$this, 'add_theme_page']);
-  }
-
-  public function add_theme_page()
-  {
-    add_theme_page('page_title', 'menu-title', 'edit_theme_options', 'menu-slug', function () {
-      $template = new TemplateHelper();
-      echo $template->load('admin-rouer.twig')->renderBlock('admin_app', []);
-    });
-  }
-}

app/routers/api-router.php

@@ -4,6 +4,7 @@ namespace Sakura\Routers;
 
 use WP_REST_Controller;
 use WP_REST_Server;
+use Sakura\Controllers\ConfigurationController;
 use Sakura\Controllers\InitStateController;
 use Sakura\Controllers\MenuController;
 use Sakura\Controllers\PostController;
@@ -32,6 +33,7 @@ class ApiRouter extends WP_REST_Controller
    */
   public function register_rest_routes()
   {
+    add_action('rest_api_init', [new ConfigurationController(), 'register_routes']);
     add_action('rest_api_init', function () {
       // theme's initial states
       register_rest_route(

app/style.css

@@ -3,6 +3,10 @@ Theme Name:  sakura-next
 Author:      Mashiro
 Author URI:  https://github.com/mashirozx
 Description: Next generation Sakura theme.
-Version:     0.0.1
+Version:     5.0.0
 Text Domain: sakura-next
-*/
+*/
+
+.grecaptcha-badge {
+  opacity: 0;
+}

package.json

@@ -36,6 +36,7 @@
     "@material/list": "^12.0.0-canary.068fd5028.0",
     "@material/menu": "^12.0.0-canary.068fd5028.0",
     "@material/ripple": "^12.0.0-canary.068fd5028.0",
+    "@material/tab-bar": "^12.0.0-canary.22d29cbb4.0",
     "@material/textfield": "^12.0.0-canary.068fd5028.0",
     "@material/theme": "^12.0.0-canary.068fd5028.0",
     "@material/typography": "^12.0.0-canary.068fd5028.0",

src/App.vue

@@ -21,6 +21,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import 'normalize.css/normalize.css';
+@use '@/styles/index';
-@import '@/styles/index.scss';
 </style>

src/admin/App.vue

@@ -14,11 +14,12 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+@use './styles/index';
 .sakura-options-page__app {
   width: calc(100% - 20px);
   padding: 20px 20px 20px 0;
   > .app__wrapper {
-    background: yellowgreen;
+    width: 100%;
   }
 }
 </style>

src/admin/Layout.vue

@@ -1,26 +1,36 @@
 <template>
-  <div class="layout">
+  <div class="layout mdc-card mdc-card--outlined">
-    <div class="wrapper">
+    <div class="tab-bar__wrapper">
-      <Image
+      <TabBar></TabBar>
-        src="https://view.moezx.cc/images/2021/07/08/121a00d4db8142384418382abf529364.gif"
-      ></Image>
     </div>
+    <br /><br /><br /><br /><br /><br /><br />
+    <br /><br /><br /><br /><br /><br /><br />
+    <br /><br /><br /><br /><br /><br /><br />
+    <br /><br /><br /><br /><br /><br /><br />
+    <br /><br /><br /><br /><br /><br /><br />
+    <br /><br /><br /><br /><br /><br /><br />
+    <br /><br /><br /><br /><br /><br /><br />
+    <br /><br /><br /><br /><br /><br /><br />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import Image from '@/components/image/Image.vue'
+import TabBar from '@/components/tabBar/TabBar.vue'
 
 export default defineComponent({
-  components: { Image },
+  components: { TabBar },
   setup() {},
 })
 </script>
 
 <style lang="scss" scoped>
-.wrapper {
+.layout {
-  width: 200px;
+  width: 100%;
-  height: 200px;
+  overflow: hidden;
+  > .tab-bar__wrapper {
+    width: 100%;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  }
 }
 </style>

src/admin/api/index.ts

@@ -0,0 +1,11 @@
+import request from '@/utils/http'
+
+export default {
+  postConfigJson(config: any): Promise<any> {
+    return request({
+      url: '/sakura/v1/config',
+      method: 'POST',
+      data: config,
+    })
+  },
+}

src/admin/main.ts

@@ -5,9 +5,13 @@ import App from './App.vue'
 import { storeProviderPlugin } from '@/hooks/store'
 // import { auth, init, posts, comments } from './store'
 import { intlPlugin } from '../locales'
+import UiIcon from '@/components/icon/UiIcon.vue'
+import Image from '@/components/image/Image.vue'
 
 const app = createApp(App)
 // app.use(storeProviderPlugin, [auth, init, posts, comments])
 app.use(intlPlugin)
 app.use(VueSvgIconPlugin, { tagName: 'svg-icon' })
+app.component('UiIcon', UiIcon)
+app.component('Image', Image)
 app.mount('#app')

src/admin/styles/index.scss

@@ -0,0 +1,13 @@
+@use '@material/ripple/mdc-ripple';
+@use '@material/elevation/mdc-elevation';
+@use '@material/button/mdc-button';
+@use "@material/textfield/mdc-text-field";
+@use '@material/chips/deprecated/mdc-chips';
+@use '@material/list/mdc-list';
+@use '@material/card/mdc-card';
+
+// local only
+@use "@material/tab-bar/mdc-tab-bar";
+@use "@material/tab-scroller/mdc-tab-scroller";
+@use "@material/tab-indicator/mdc-tab-indicator";
+@use "@material/tab/mdc-tab";

src/components/tabBar/TabBar.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="mdc-tab-bar" role="tablist" :ref="setTabBarRef">
+    <div class="mdc-tab-scroller">
+      <div class="mdc-tab-scroller__scroll-area">
+        <div class="mdc-tab-scroller__scroll-content">
+          <!-- :class="['mdc-tab', { 'mdc-tab--active': current === index }]" -->
+          <button
+            v-for="(item, index) in $props.items"
+            :key="index"
+            class="mdc-tab"
+            role="tab"
+            aria-selected="true"
+            tabindex="index"
+            @click="handleChangeIndexEvent(index)"
+          >
+            <span class="mdc-tab__content">
+              <i :class="['mdc-tab__icon', item.icon]" aria-hidden="true"></i>
+              <span class="mdc-tab__text-label">{{ item.context }}</span>
+            </span>
+            <!-- :class="['mdc-tab-indicator', { 'mdc-tab-indicator--active': current === index }]" -->
+            <span class="mdc-tab-indicator">
+              <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+            </span>
+            <span class="mdc-tab__ripple"></span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, watch } from 'vue'
+import { useState } from '@/hooks'
+import { MD5 } from 'crypto-js'
+import { useElementRef, useMDCTabBar } from '@/hooks'
+
+export default defineComponent({
+  props: {
+    items: {
+      type: Array,
+      default: () => [
+        { context: 'Tab 1', icon: 'fab fa-app-store-ios' },
+        { context: 'Tab 2', icon: 'fab fa-app-store-ios' },
+        { context: 'Tab 3', icon: 'fab fa-app-store-ios' },
+      ],
+    },
+    current: { type: Number, default: 0 },
+  },
+  emits: ['update:current'],
+  setup(props, { emit }) {
+    const [tabBarRef, setTabBarRef] = useElementRef()
+    const MDCTabBar = useMDCTabBar(tabBarRef)
+
+    const [current, setCurrent] = useState(props.current)
+
+    watch(current, (value) => emit('update:current', value))
+    watch(
+      () => props.current,
+      (value) => setCurrent(value)
+    )
+
+    const handleChangeIndexEvent = (index: number) => {
+      setCurrent(index)
+      MDCTabBar.value?.scrollIntoView(index)
+      MDCTabBar.value?.activateTab(index)
+    }
+
+    onMounted(() => {
+      MDCTabBar.value?.scrollIntoView(props.current)
+      MDCTabBar.value?.activateTab(props.current)
+    })
+
+    return { current, handleChangeIndexEvent, setTabBarRef }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.tab-bar__container {
+  width: 100%;
+}
+</style>

src/hooks/index.ts

@@ -4,10 +4,10 @@ import { useProvider, useProviders, useInjector } from './store'
 import { useIntlProvider, useIntl } from './intl'
 import useWindowResize from './useWindowResize'
 import useResizeObserver from './useResizeObserver'
-import { useMDCRipple, useMDCDialog, useMDCTextField } from './mdc'
 import useReachElementSide from './useReachElementSide'
 import { useElementRef, useElementRefs } from './useElementRef'
 import useOffsetDistance from './useOffsetDistance'
+import { useMDCRipple, useMDCDialog, useMDCTextField, useMDCTabBar } from './mdc'
 
 export {
   useState,
@@ -24,6 +24,7 @@ export {
   useMDCRipple,
   useMDCDialog,
   useMDCTextField,
+  useMDCTabBar,
   useReachElementSide,
   useElementRef,
   useElementRefs,

src/hooks/mdc.ts

@@ -2,6 +2,7 @@ import { ref, Ref, watch, onBeforeUnmount } from 'vue'
 import { MDCRipple } from '@material/ripple'
 import { MDCDialog } from '@material/dialog'
 import { MDCTextField } from '@material/textfield'
+import { MDCTabBar } from '@material/tab-bar'
 
 export const useMDCRipple = <El>(
   elementRef: El extends Element ? Element : Ref<Element | null>,
@@ -70,3 +71,25 @@ export const useMDCTextField = <El>(
 
   return textFieldRef
 }
+
+export const useMDCTabBar = <El>(
+  elementRef: El extends Element ? Element : Ref<Element | null>
+) => {
+  const tabBarRef: Ref<MDCTabBar | null> = ref(null)
+
+  if (elementRef instanceof Element) {
+    tabBarRef.value = new MDCTabBar(elementRef)
+  } else {
+    watch(elementRef, (element) => {
+      if (element) {
+        tabBarRef.value = new MDCTabBar(element)
+      }
+    })
+  }
+
+  onBeforeUnmount(() => {
+    tabBarRef.value?.destroy()
+  })
+
+  return tabBarRef
+}

src/main.ts

@@ -6,8 +6,8 @@ import router from './router'
 import { storeProviderPlugin } from './hooks/store'
 import { auth, init, posts, comments } from './store'
 import { intlPlugin } from './locales'
-import UiIcon from './components/icon/UiIcon.vue'
+import UiIcon from '@/components/icon/UiIcon.vue'
-import Image from './components/image/Image.vue'
+import Image from '@/components/image/Image.vue'
 
 const theWindow = window as any
 theWindow.router = router

src/styles/index.scss

@@ -1,16 +1 @@
-@use "@material/textfield/mdc-text-field";
+@use 'mdc';
-@import 'normalize.css/normalize.css';
-@import '@material/elevation/styles';
-@import '@material/button/styles';
-@import '@material/chips/styles';
-@import '@material/chips/deprecated/mdc-chips';
-@import '@material/list/mdc-list';
-@import '@material/card/mdc-card';
-// @import '@material/textfield/mdc-text-field';
-// @import '@material/dialog/mdc-dialog';
-// @import '@material/typography/styles';
-@import '@material/ripple/styles';
-
-.grecaptcha-badge {
-  opacity: 0;
-}

src/styles/mdc.scss

@@ -0,0 +1,10 @@
+@use '@material/ripple/mdc-ripple';
+@use '@material/elevation/mdc-elevation';
+@use '@material/button/mdc-button';
+@use "@material/textfield/mdc-text-field";
+@use '@material/chips/deprecated/mdc-chips';
+@use '@material/list/mdc-list';
+@use '@material/card/mdc-card';
+// @import '@material/textfield/mdc-text-field';
+// @import '@material/dialog/mdc-dialog';
+// @import '@material/typography/styles';

yarn.lock

@@ -678,6 +678,13 @@
   dependencies:
     tslib "^2.1.0"
 
+"@material/animation@12.0.0-canary.22d29cbb4.0":
+  version "12.0.0-canary.22d29cbb4.0"
+  resolved "https://registry.nlark.com/@material/animation/download/@material/animation-12.0.0-canary.22d29cbb4.0.tgz#662314409f968aa14156a87284d1f49a098880be"
+  integrity sha1-ZiMUQJ+WiqFBVqhyhNH0mgmIgL4=
+  dependencies:
+    tslib "^2.1.0"
+
 "@material/base@12.0.0-canary.068fd5028.0":
   version "12.0.0-canary.068fd5028.0"
   resolved "https://registry.nlark.com/@material/base/download/@material/base-12.0.0-canary.068fd5028.0.tgz#ba4403e153550bfd44c6f4d74af27c43be94b23b"
@@ -685,6 +692,13 @@
   dependencies:
     tslib "^2.1.0"
 
+"@material/base@12.0.0-canary.22d29cbb4.0":
+  version "12.0.0-canary.22d29cbb4.0"
+  resolved "https://registry.nlark.com/@material/base/download/@material/base-12.0.0-canary.22d29cbb4.0.tgz#a1d54c0605278ce68a323e60f097f0a0a66e6a88"
+  integrity sha1-odVMBgUnjOaKMj5g8JfwoKZuaog=
+  dependencies:
+    tslib "^2.1.0"
+
 "@material/button@12.0.0-canary.068fd5028.0", "@material/button@^12.0.0-canary.068fd5028.0":
   version "12.0.0-canary.068fd5028.0"
   resolved "https://registry.nlark.com/@material/button/download/@material/button-12.0.0-canary.068fd5028.0.tgz#dea53b2914e4bd48c94fd8d6c3915c377ff6a326"
@@ -758,6 +772,13 @@
   dependencies:
     tslib "^2.1.0"
 
+"@material/density@12.0.0-canary.22d29cbb4.0":
+  version "12.0.0-canary.22d29cbb4.0"
+  resolved "https://registry.nlark.com/@material/density/download/@material/density-12.0.0-canary.22d29cbb4.0.tgz#2fce30a88ad93ddf4376e7a9bb481119c954965d"
+  integrity sha1-L84wqIrZPd9Dduepu0gRGclUll0=
+  dependencies:
+    tslib "^2.1.0"
+
 "@material/dialog@^12.0.0-canary.068fd5028.0":
   version "12.0.0-canary.068fd5028.0"
   resolved "https://registry.nlark.com/@material/dialog/download/@material/dialog-12.0.0-canary.068fd5028.0.tgz#ad0990c32b4c3538ce469297ca2b7f1f71abc84a"
@@ -786,6 +807,14 @@
     "@material/feature-targeting" "12.0.0-canary.068fd5028.0"
     tslib "^2.1.0"
 
+"@material/dom@12.0.0-canary.22d29cbb4.0":
+  version "12.0.0-canary.22d29cbb4.0"
+  resolved "https://registry.nlark.com/@material/dom/download/@material/dom-12.0.0-canary.22d29cbb4.0.tgz#c9926d9fbeb5c165142dcadee934e228726412b1"
+  integrity sha1-yZJtn761wWUULcre6TTiKHJkErE=
+  dependencies:
+    "@material/feature-targeting" "12.0.0-canary.22d29cbb4.0"
+    tslib "^2.1.0"
+
 "@material/elevation@12.0.0-canary.068fd5028.0", "@material/elevation@^12.0.0-canary.068fd5028.0":
   version "12.0.0-canary.068fd5028.0"
   resolved "https://registry.nlark.com/@material/elevation/download/@material/elevation-12.0.0-canary.068fd5028.0.tgz#0c670ae52c8f83491b06e31c95917c7ea37ca9ea"
@@ -797,6 +826,17 @@
     "@material/theme" "12.0.0-canary.068fd5028.0"
     tslib "^2.1.0"
 
+"@material/elevation@12.0.0-canary.22d29cbb4.0":
+  version "12.0.0-canary.22d29cbb4.0"
+  resolved "https://registry.nlark.com/@material/elevation/download/@material/elevation-12.0.0-canary.22d29cbb4.0.tgz#40c8757e9c40ae2cb8df227786cc877017ee17a0"
+  integrity sha1-QMh1fpxAriy43yJ3hsyHcBfuF6A=
+  dependencies:
+    "@material/animation" "12.0.0-canary.22d29cbb4.0"
+    "@material/base" "12.0.0-canary.22d29cbb4.0"
+    "@material/feature-targeting" "12.0.0-canary.22d29cbb4.0"
+    "@material/theme" "12.0.0-canary.22d29cbb4.0"
+    tslib "^2.1.0"
+
 "@material/feature-targeting@12.0.0-canary.068fd5028.0":
   version "12.0.0-canary.068fd5028.0"
   resolved "https://registry.nlark.com/@material/feature-targeting/download/@material/feature-targeting-12.0.0-canary.068fd5028.0.tgz#e043d1f549bfd1a6e647486a354dcb7b04c7afb3"
@@ -804,6 +844,13 @@
   dependencies:
     tslib "^2.1.0"
 
+"@material/feature-targeting@12.0.0-canary.22d29cbb4.0":
+  version "12.0.0-canary.22d29cbb4.0"
+  resolved "https://registry.nlark.com/@material/feature-targeting/download/@material/feature-targeting-12.0.0-canary.22d29cbb4.0.tgz#68db5b8a16b673a1eb0c4c74de4954caab334e2e"
+  integrity sha1-aNtbiha2c6HrDEx03klUyqszTi4=
+  dependencies:
+    tslib "^2.1.0"
+
 "@material/floating-label@12.0.0-canary.068fd5028.0":
   version "12.0.0-canary.068fd5028.0"
   resolved "https://registry.nlark.com/@material/floating-label/download/@material/floating-label-12.0.0-canary.068fd5028.0.tgz#db76cda2d1de4482ddca5df854e1c1e5efe73ac5"
@@ -914,6 +961,18 @@
     "@material/theme" "12.0.0-canary.068fd5028.0"
     tslib "^2.1.0"
 
+"@material/ripple@12.0.0-canary.22d29cbb4.0":
+  version "12.0.0-canary.22d29cbb4.0"
+  resolved "https://registry.nlark.com/@material/ripple/download/@material/ripple-12.0.0-canary.22d29cbb4.0.tgz#9cc50929c66841691e35ac603168a83ef176af6e"
+  integrity sha1-nMUJKcZoQWkeNaxgMWioPvF2r24=
+  dependencies:
+    "@material/animation" "12.0.0-canary.22d29cbb4.0"
+    "@material/base" "12.0.0-canary.22d29cbb4.0"
+    "@material/dom" "12.0.0-canary.22d29cbb4.0"
+    "@material/feature-targeting" "12.0.0-canary.22d29cbb4.0"
+    "@material/theme" "12.0.0-canary.22d29cbb4.0"
+    tslib "^2.1.0"
+
 "@material/rtl@12.0.0-canary.068fd5028.0":
   version "12.0.0-canary.068fd5028.0"
   resolved "https://registry.nlark.com/@material/rtl/download/@material/rtl-12.0.0-canary.068fd5028.0.tgz#e7a24ffdc7ef2419433a29c9fed4a0bd79e9086b"
@@ -922,6 +981,14 @@
     "@material/theme" "12.0.0-canary.068fd5028.0"
     tslib "^2.1.0"
 
+"@material/rtl@12.0.0-canary.22d29cbb4.0":
+  version "12.0.0-canary.22d29cbb4.0"
+  resolved "https://registry.nlark.com/@material/rtl/download/@material/rtl-12.0.0-canary.22d29cbb4.0.tgz#589593c59ca384caf2ac16892d55a9e19d7759ea"
+  integrity sha1-WJWTxZyjhMryrBaJLVWp4Z13Weo=
+  dependencies:
+    "@material/theme" "12.0.0-canary.22d29cbb4.0"
+    tslib "^2.1.0"
+
 "@material/shape@12.0.0-canary.068fd5028.0":
   version "12.0.0-canary.068fd5028.0"
   resolved "https://registry.nlark.com/@material/shape/download/@material/shape-12.0.0-canary.068fd5028.0.tgz#e68f58979314a23a3486105a8f91482b8c8e9130"
@@ -932,6 +999,61 @@
     "@material/theme" "12.0.0-canary.068fd5028.0"
     tslib "^2.1.0"
 
+"@material/tab-bar@^12.0.0-canary.22d29cbb4.0":
+  version "12.0.0-canary.22d29cbb4.0"
+  resolved "https://registry.nlark.com/@material/tab-bar/download/@material/tab-bar-12.0.0-canary.22d29cbb4.0.tgz#294a67f387e80cccade1700ab15ae79d9faee394"
+  integrity sha1-KUpn84foDMyt4XAKsVrnnZ+u45Q=
+  dependencies:
+    "@material/animation" "12.0.0-canary.22d29cbb4.0"
+    "@material/base" "12.0.0-canary.22d29cbb4.0"
+    "@material/density" "12.0.0-canary.22d29cbb4.0"
+    "@material/elevation" "12.0.0-canary.22d29cbb4.0"
+    "@material/feature-targeting" "12.0.0-canary.22d29cbb4.0"
+    "@material/tab" "12.0.0-canary.22d29cbb4.0"
+    "@material/tab-indicator" "12.0.0-canary.22d29cbb4.0"
+    "@material/tab-scroller" "12.0.0-canary.22d29cbb4.0"
+    "@material/theme" "12.0.0-canary.22d29cbb4.0"
+    "@material/typography" "12.0.0-canary.22d29cbb4.0"
+    tslib "^2.1.0"
+
+"@material/tab-indicator@12.0.0-canary.22d29cbb4.0":
+  version "12.0.0-canary.22d29cbb4.0"
+  resolved "https://registry.nlark.com/@material/tab-indicator/download/@material/tab-indicator-12.0.0-canary.22d29cbb4.0.tgz#a068a64f5ebc4fa7b4fb036aec0a24b47b7c406d"
+  integrity sha1-oGimT168T6e0+wNq7AoktHt8QG0=
+  dependencies:
+    "@material/animation" "12.0.0-canary.22d29cbb4.0"
+    "@material/base" "12.0.0-canary.22d29cbb4.0"
+    "@material/feature-targeting" "12.0.0-canary.22d29cbb4.0"
+    "@material/theme" "12.0.0-canary.22d29cbb4.0"
+    tslib "^2.1.0"
+
+"@material/tab-scroller@12.0.0-canary.22d29cbb4.0":
+  version "12.0.0-canary.22d29cbb4.0"
+  resolved "https://registry.nlark.com/@material/tab-scroller/download/@material/tab-scroller-12.0.0-canary.22d29cbb4.0.tgz#44d9c07300dc5c7468523d950d45daf2164ff3e5"
+  integrity sha1-RNnAcwDcXHRoUj2VDUXa8hZP8+U=
+  dependencies:
+    "@material/animation" "12.0.0-canary.22d29cbb4.0"
+    "@material/base" "12.0.0-canary.22d29cbb4.0"
+    "@material/dom" "12.0.0-canary.22d29cbb4.0"
+    "@material/feature-targeting" "12.0.0-canary.22d29cbb4.0"
+    "@material/tab" "12.0.0-canary.22d29cbb4.0"
+    tslib "^2.1.0"
+
+"@material/tab@12.0.0-canary.22d29cbb4.0":
+  version "12.0.0-canary.22d29cbb4.0"
+  resolved "https://registry.nlark.com/@material/tab/download/@material/tab-12.0.0-canary.22d29cbb4.0.tgz#3eea5275d9b85a1e37e4a25dc159327e45e7af9e"
+  integrity sha1-PupSddm4Wh435KJdwVkyfkXnr54=
+  dependencies:
+    "@material/base" "12.0.0-canary.22d29cbb4.0"
+    "@material/elevation" "12.0.0-canary.22d29cbb4.0"
+    "@material/feature-targeting" "12.0.0-canary.22d29cbb4.0"
+    "@material/ripple" "12.0.0-canary.22d29cbb4.0"
+    "@material/rtl" "12.0.0-canary.22d29cbb4.0"
+    "@material/tab-indicator" "12.0.0-canary.22d29cbb4.0"
+    "@material/theme" "12.0.0-canary.22d29cbb4.0"
+    "@material/typography" "12.0.0-canary.22d29cbb4.0"
+    tslib "^2.1.0"
+
 "@material/textfield@^12.0.0-canary.068fd5028.0":
   version "12.0.0-canary.068fd5028.0"
   resolved "https://registry.nlark.com/@material/textfield/download/@material/textfield-12.0.0-canary.068fd5028.0.tgz#68ca83ade769f66521c2e5d22d5dfa64f40c5e43"
@@ -960,6 +1082,14 @@
     "@material/feature-targeting" "12.0.0-canary.068fd5028.0"
     tslib "^2.1.0"
 
+"@material/theme@12.0.0-canary.22d29cbb4.0":
+  version "12.0.0-canary.22d29cbb4.0"
+  resolved "https://registry.nlark.com/@material/theme/download/@material/theme-12.0.0-canary.22d29cbb4.0.tgz#a99ff4e33ffb72ec1ac616de31533da02881d278"
+  integrity sha1-qZ/04z/7cuwaxhbeMVM9oCiB0ng=
+  dependencies:
+    "@material/feature-targeting" "12.0.0-canary.22d29cbb4.0"
+    tslib "^2.1.0"
+
 "@material/touch-target@12.0.0-canary.068fd5028.0":
   version "12.0.0-canary.068fd5028.0"
   resolved "https://registry.nlark.com/@material/touch-target/download/@material/touch-target-12.0.0-canary.068fd5028.0.tgz#542c3fa5e729fe542c21a8668a5fdd820b05e415"
@@ -978,6 +1108,15 @@
     "@material/theme" "12.0.0-canary.068fd5028.0"
     tslib "^2.1.0"
 
+"@material/typography@12.0.0-canary.22d29cbb4.0":
+  version "12.0.0-canary.22d29cbb4.0"
+  resolved "https://registry.nlark.com/@material/typography/download/@material/typography-12.0.0-canary.22d29cbb4.0.tgz#cb858a4cca6dcb12111f9e77a3f6711b30f3a4d3"
+  integrity sha1-y4WKTMptyxIRH553o/ZxGzDzpNM=
+  dependencies:
+    "@material/feature-targeting" "12.0.0-canary.22d29cbb4.0"
+    "@material/theme" "12.0.0-canary.22d29cbb4.0"
+    tslib "^2.1.0"
+
 "@nodelib/fs.scandir@2.1.4":
   version "2.1.4"
   resolved "https://registry.npm.taobao.org/@nodelib/fs.scandir/download/@nodelib/fs.scandir-2.1.4.tgz?cache=0&sync_timestamp=1609074618762&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40nodelib%2Ffs.scandir%2Fdownload%2F%40nodelib%2Ffs.scandir-2.1.4.tgz"