Toggle component

packages/chusho/.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    '@typescript-eslint/no-non-null-assertion': 0,
   },
   overrides: [
     {

packages/chusho/config/jest/setup.js

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import VueCompositionApi from '@vue/composition-api';
+
+Vue.use(VueCompositionApi);

packages/chusho/config/storybook/preview.js

@@ -12,6 +12,7 @@ import { Heading } from '@storybook/addon-docs/blocks';
 import React from 'react';
 import toReact from '@egoist/vue-to-react';
 import Vue from 'vue';
+import VueCompositionApi from '@vue/composition-api';
 import Chusho from '@/main.ts';
 
 import '@/assets/tailwind.css';
@@ -44,6 +45,7 @@ addParameters({
  * Configure Vue global behavior within Storybook
  */
 
+Vue.use(VueCompositionApi);
 Vue.use(Chusho, {
   components: {
     btn: {
@@ -73,5 +75,10 @@ Vue.use(Chusho, {
       height: 48,
       class: 'inline-block align-middle pointer-events-none fill-current',
     },
+    toggle: {
+      transition: {
+        name: 'fade',
+      },
+    },
   },
 });

packages/chusho/jest.config.js

@@ -4,6 +4,7 @@ module.exports = {
     '^.+\\.stories\\.js$': '@storybook/addon-storyshots/injectFileName',
   },
   testMatch: ['<rootDir>src/**/?(*.)+(spec).[jt]s?(x)'],
+  setupFiles: ['<rootDir>config/jest/setup.js'],
   // Workaround that can be removed once we upgrade to Storybook 6
   // See https://github.com/storybookjs/storybook/issues/9279
   transformIgnorePatterns: ['node_modules/(?!react-syntax-highlighter)'],

packages/chusho/package.json

@@ -29,6 +29,7 @@
     "validate": "vue-cli-service lint --no-fix",
     "test:unit": "vue-cli-service test:unit",
     "test:unit:dev": "vue-cli-service test:unit --watch",
+    "test:unit:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand",
     "test": "npm run validate && npm run test:unit",
     "build": "vue-cli-service build --target lib --name chusho ./src/main.ts"
   },
@@ -46,6 +47,7 @@
     "@vue/cli-plugin-typescript": "~4.2.3",
     "@vue/cli-plugin-unit-jest": "~4.2.3",
     "@vue/cli-service": "~4.2.3",
+    "@vue/composition-api": "^0.4.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^5.0.2",
     "@vue/test-utils": "1.0.0-beta.31",

packages/chusho/src/assets/tailwind.css

@@ -1,3 +1,16 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/*
+ * Transitions
+ */
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.25s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}

packages/chusho/src/components/CToggle/CToggle.stories.js

@@ -0,0 +1,56 @@
+import CToggle from './CToggle';
+import CToggleBtn from './CToggleBtn';
+import CToggleContent from './CToggleContent';
+
+export default {
+  title: 'Components|Toggle',
+  component: CToggle,
+  subcomponents: { CToggleBtn, CToggleContent },
+  parameters: {
+    componentSubtitle: 'Conditionnaly display some content.',
+    options: {
+      componentConfig: [
+        {
+          name: 'transition',
+          type: { summary: 'object' },
+          description:
+            'Apply a common transition to all Toggles. The object can contain any Vue built-in [transition component props](https://vuejs.org/v2/api/#transition).\n\nFor example: `{ name: "fade", mode: "out-in" }`',
+        },
+      ],
+    },
+  },
+};
+
+export const Default = () => ({
+  components: { CToggle, CToggleBtn, CToggleContent },
+  template: `<CToggle>
+    <CToggleBtn variant="primary">Toggle</CToggleBtn>
+    <CToggleContent class="bg-gray-200 px-4 py-3 rounded mt-2">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam in, iste id nobis dolor excepturi dolore expedita vero quae. Nobis fuga cupiditate suscipit blanditiis, aliquid minima harum molestias pariatur tempora ab, libero quo maiores sapiente doloribus nihil commodi eaque accusantium praesentium! Nobis natus qui voluptate inventore molestias quisquam, consequuntur harum?
+    </CToggleContent>
+  </CToggle>`,
+});
+
+export const UsingVModel = () => ({
+  components: { CToggle, CToggleBtn, CToggleContent },
+  data() {
+    return {
+      toggleOpen: true,
+    };
+  },
+  template: `<CToggle v-model="toggleOpen">
+    <CToggleBtn variant="primary">{{ toggleOpen ? 'Close' : 'Open' }}</CToggleBtn>
+    <CToggleContent class="bg-gray-200 px-4 py-3 rounded mt-2">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam in, iste id nobis dolor excepturi dolore expedita vero quae. Nobis fuga cupiditate suscipit blanditiis, aliquid minima harum molestias pariatur tempora ab, libero quo maiores sapiente doloribus nihil commodi eaque accusantium praesentium! Nobis natus qui voluptate inventore molestias quisquam, consequuntur harum?
+    </CToggleContent>
+  </CToggle>`,
+});
+
+UsingVModel.story = {
+  parameters: {
+    docs: {
+      storyDescription:
+        'You can bind the Toggle status with the `v-model` directive, for example to make it open by default or to programatically change its state.',
+    },
+  },
+};

packages/chusho/src/components/CToggle/CToggle.ts

@@ -0,0 +1,62 @@
+import {
+  ref,
+  provide,
+  computed,
+  InjectionKey,
+  defineComponent,
+  createElement,
+  watch,
+  Ref,
+} from '@vue/composition-api';
+
+export const ToggleSymbol: InjectionKey<object> = Symbol();
+
+export interface UseToggle {
+  open: Readonly<Ref<boolean>>;
+  toggle: Function;
+}
+
+export default defineComponent({
+  name: 'CToggle',
+
+  model: {
+    prop: 'open',
+    event: 'toggle',
+  },
+
+  props: {
+    /**
+     * Optionally bind the Toggle state with the parent component.
+     */
+    open: {
+      type: Boolean,
+      default: undefined,
+    },
+  },
+
+  setup(props, { slots, emit }) {
+    const open = ref(false);
+
+    function toggle(): void {
+      open.value = !open.value;
+      // Update potential parent v-model value
+      emit('toggle', open.value);
+    }
+
+    // Provide api to sub-components
+    const api: UseToggle = {
+      open: computed(() => open.value),
+      toggle,
+    };
+    provide(ToggleSymbol, api);
+
+    // Watch potential parent v-model value changes and update state accordingly
+    watch(() => {
+      if (typeof props.open === 'boolean') {
+        open.value = props.open;
+      }
+    });
+
+    return () => createElement('div', slots.default && slots.default());
+  },
+});

packages/chusho/src/components/CToggle/CToggleBtn.ts

@@ -0,0 +1,29 @@
+import CBtn from '../CBtn';
+import { VNodeData } from 'vue/types/umd';
+import { inject, defineComponent, createElement } from '@vue/composition-api';
+import { ToggleSymbol } from './CToggle';
+import { UseToggle } from './CToggle';
+
+export default defineComponent({
+  name: 'CToggleBtn',
+
+  setup(props, { attrs, slots, listeners }) {
+    const toggle = inject(ToggleSymbol) as UseToggle;
+
+    return () => {
+      const componentData: VNodeData = {
+        attrs: {
+          ...attrs,
+          'aria-expanded': `${toggle.open.value}`,
+        },
+        on: {
+          ...listeners,
+          click: () => {
+            toggle.toggle();
+          },
+        },
+      };
+      return createElement(CBtn, componentData, slots.default());
+    };
+  },
+});

packages/chusho/src/components/CToggle/CToggleContent.ts

@@ -0,0 +1,49 @@
+import { VNode } from 'vue/types/umd';
+import { inject, createElement, defineComponent } from '@vue/composition-api';
+import { ToggleSymbol } from './CToggle';
+import { UseToggle } from './CToggle';
+import { isPlainObject } from '@/utils/objects';
+
+export default defineComponent({
+  name: 'CToggleContent',
+
+  props: {
+    /**
+     * The object can contain any Vue built-in [transition component props](https://vuejs.org/v2/api/#transition).
+     *
+     * For example: `{ name: "fade", mode: "out-in" }`.
+     *
+     * If you defined a default transition in the config and want to disable it, use `false`.
+     */
+    transition: {
+      type: [Object, Boolean],
+      default: null,
+    },
+  },
+
+  setup(props, { slots, parent }) {
+    const toggleConfig = parent!.$chusho?.options?.components?.toggle;
+    const toggle = inject(ToggleSymbol) as UseToggle;
+    let transition: object;
+
+    if (isPlainObject(props.transition)) {
+      transition = props.transition;
+    } else if (toggleConfig && toggleConfig.transition) {
+      transition = toggleConfig.transition;
+    }
+
+    function renderContent(): VNode | null {
+      if (toggle.open.value) {
+        return createElement('div', {}, slots.default());
+      }
+      return null;
+    }
+
+    return () => {
+      if (!transition) return renderContent();
+      return createElement('transition', { props: transition }, [
+        renderContent(),
+      ]);
+    };
+  },
+});

packages/chusho/src/components/CToggle/__snapshots__/CToggle.stories.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Components|Toggle Default 1`] = `
+<div>
+  <button
+    aria-expanded="false"
+    class="inline-block py-2 px-4 bg-green-200 text-green-900 rounded bg-blue-200 text-blue-900"
+    type="button"
+    variant="primary"
+  >
+    Toggle
+  </button>
+
+  <!---->
+</div>
+`;
+
+exports[`Storyshots Components|Toggle Using V Model 1`] = `
+<div>
+  <button
+    aria-expanded="false"
+    class="inline-block py-2 px-4 bg-green-200 text-green-900 rounded bg-blue-200 text-blue-900"
+    type="button"
+    variant="primary"
+  >
+    Close
+  </button>
+
+  <!---->
+</div>
+`;

packages/chusho/src/components/CToggle/index.ts

@@ -0,0 +1,6 @@
+import CToggle from './CToggle';
+import CToggleBtn from './CToggleBtn';
+import CToggleContent from './CToggleContent';
+
+export { CToggle, CToggleBtn, CToggleContent };
+export default CToggle;

packages/chusho/src/components/index.ts

@@ -1,9 +1,13 @@
 import CBtn from './CBtn';
 import CStack from './CStack';
 import CIcon from './CIcon';
+import { CToggle, CToggleBtn, CToggleContent } from './CToggle';
 
 export default {
   CBtn,
   CStack,
   CIcon,
+  CToggle,
+  CToggleBtn,
+  CToggleContent,
 };

packages/chusho/src/types/globals.d.ts

@@ -10,6 +10,24 @@ declare module 'vue/types/vue' {
   }
 }
 
+export interface VueTransitionProps {
+  name?: string;
+  appear?: boolean;
+  css?: boolean;
+  mode?: string;
+  type?: string;
+  enterClass?: string;
+  leaveClass?: string;
+  enterToClass?: string;
+  leaveToClass?: string;
+  enterActiveClass?: string;
+  leaveActiveClass?: string;
+  appearClass?: string;
+  appearActiveClass?: string;
+  appearToClass?: string;
+  duration?: [number, string, object];
+}
+
 export interface ChushoOptions {
   components: {
     btn?: {
@@ -33,5 +51,8 @@ export interface ChushoOptions {
       height?: number;
       class?: string;
     };
+    toggle?: {
+      transition?: VueTransitionProps | null;
+    };
   };
 }