fix(core): add collapsible-container

.eslintrc.json

@@ -9,7 +9,6 @@
     "@nuxtjs",
     "plugin:nuxt/recommended",
     "plugin:security/recommended",
-    "plugin:sonarjs/recommended",
     "plugin:no-unsanitized/DOM"
   ],
   "plugins": [
@@ -45,7 +44,6 @@
         "ignores": []
       }
     ],
-    "sonarjs/no-duplicate-string": 0,
     "no-multiple-empty-lines": [
       "error",
       {
@@ -59,6 +57,7 @@
     ],
     "no-debugger": 1,
     "no-console": 1,
-    "no-empty-function": "error"
+    "no-empty-function": "error",
+    "vue/multi-word-component-names": "off"
   }
 }

.stylelintrc

@@ -5,6 +5,7 @@
     "stylelint-config-css-modules",
     "stylelint-config-lost"
   ],
+  "customSyntax": "postcss-html",
   "ignoreFiles": [
     "./**/*.js"
   ],

package.json

@@ -13,41 +13,34 @@
     "lint:css": "stylelint \"packages/**/*.vue\""
   },
   "devDependencies": {
-    "@babel/eslint-parser": "7.15.7",
-    "@commitlint/cli": "13.1.0",
-    "@commitlint/config-conventional": "13.1.0",
+    "@babel/eslint-parser": "7.16.3",
+    "@commitlint/cli": "15.0.0",
+    "@commitlint/config-conventional": "15.0.0",
+    "@nuxtjs/eslint-config": "^7.0.0",
     "@mapbox/stylelint-processor-arbitrary-tags": "0.4.0",
     "babel-preset-vue": "2.0.2",
     "branch-name-lint": "2.1.1",
-    "commitlint": "13.1.0",
-    "eslint": "7.32.0",
+    "commitlint": "15.0.0",
+    "eslint": "8.3.0",
     "eslint-formatter-json-relative": "0.1.0",
     "eslint-plugin-html": "6.2.0",
     "eslint-plugin-json": "3.1.0",
     "eslint-plugin-no-secrets": "0.8.9",
-    "eslint-plugin-no-unsanitized": "3.1.5",
-    "eslint-plugin-nuxt": "2.0.0",
-    "eslint-plugin-promise": "5.1.0",
+    "eslint-plugin-no-unsanitized": "4.0.0",
+    "eslint-plugin-nuxt": "3.0.0",
     "eslint-plugin-security": "1.4.0",
-    "eslint-plugin-sonarjs": "0.10.0",
-    "eslint-plugin-vue": "7.12.1",
+    "eslint-plugin-vue": "8.1.1",
     "eslint-plugin-xss": "0.1.11",
-    "husky": "7.0.2",
-    "lint-staged": "11.1.2",
-    "standard": "16.0.3",
-    "stylelint": "13.13.1",
-    "stylelint-config-css-modules": "2.2.0",
+    "husky": "7.0.4",
+    "lint-staged": "12.1.2",
+    "standard": "16.0.4",
+    "stylelint": "14.1.0",
+    "stylelint-config-css-modules": "2.3.0",
     "stylelint-config-lost": "0.0.3",
-    "stylelint-config-recess-order": "2.5.0",
-    "stylelint-config-standard": "22.0.0"
+    "stylelint-config-recess-order": "3.0.0",
+    "stylelint-config-standard": "24.0.0"
   },
   "workspaces": [
     "./packages/*"
-  ],
-  "optionalDependencies": {
-    "postcss": "8.3.7"
-  },
-  "dependencies": {
-    "@nuxtjs/eslint-config": "^6.0.1"
-  }
+  ]
 }

packages/core/Button/default.vue

@@ -0,0 +1,20 @@
+<template>
+  <base-button>Label</base-button>
+</template>
+
+<script>
+import BaseButton from '@foundation/core/Button';
+export default {
+  components: {
+    BaseButton
+  }
+};
+</script>
+
+<style lang="postcss" scoped>
+>>> .button {
+  color: #333;
+  background: #eee;
+  border: solid #ccc 1px;
+}
+</style>

packages/core/Button/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <button :aria-label="label" v-on="$listeners">
+  <button class="button" v-on="$listeners">
     <slot>{{ label }}</slot>
   </button>
 </template>

packages/core/CollapsibleContainer/classes/Dataset.js

@@ -0,0 +1,24 @@
+export default class Dataset {
+  #options = null;
+  #model = null;
+
+  constructor (options, model) {
+    this.#options = options;
+    this.#model = model;
+  }
+
+  get options () {
+    return this.#options;
+  }
+
+  get model () {
+    return this.#model;
+  }
+
+  toJSON () {
+    return {
+      options: this.#options,
+      model: this.#model.toJSON()
+    };
+  }
+}

packages/core/CollapsibleContainer/classes/Model.js

@@ -0,0 +1,19 @@
+export default class Model {
+  #name = null;
+
+  constructor (name, value) {
+    this.#name = name;
+    this.value = value;
+  }
+
+  get name () {
+    return this.#name;
+  }
+
+  toJSON () {
+    return {
+      name: this.#name,
+      value: this.value
+    };
+  }
+}

packages/core/CollapsibleContainer/classes/Option.js

@@ -0,0 +1,37 @@
+import { cyrb53 } from '../../utils/hash';
+
+export default class Option {
+  #label = null;
+  #value = null;
+  #content = null;
+
+  constructor (label, value, content) {
+    this.#label = label;
+    this.#value = value;
+    this.#content = content;
+  }
+
+  get key () {
+    return `${cyrb53(JSON.stringify(this.toJSON()))}`;
+  }
+
+  get label () {
+    return this.#label;
+  }
+
+  get value () {
+    return this.#value;
+  }
+
+  get content () {
+    return this.#content;
+  }
+
+  toJSON () {
+    return {
+      label: this.#label,
+      value: this.#value,
+      content: this.#content
+    };
+  }
+}

packages/core/CollapsibleContainer/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <section class="collapsible-container">
+    <base-select
+      v-for="(option) in options"
+      :id="`${model.name}-${option.key}`"
+      :key="`${model.name}-${option.key}`"
+      v-model="model.value"
+      v-bind="$attrs"
+      :name="model.name"
+      :option="option.value"
+      :unselectable="collapsible"
+    >
+      <template #label>
+        <slot name="label" :option="option">
+          {{ option.label }}
+        </slot>
+      </template>
+      <template #extend>
+        <slot name="content" :option="option" :show="show(option, model)">
+          <div v-if="show(option, model)">
+            {{ option.content }}
+          </div>
+        </slot>
+      </template>
+    </base-select>
+  </section>
+</template>
+
+<script>
+import BaseSelect from '../Select';
+import Dataset from './classes/Dataset';
+
+export default {
+  components: {
+    BaseSelect
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    dataset: {
+      type: Dataset,
+      required: true
+    },
+
+    collapsible: {
+      type: Boolean,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      name: this.dataset.name,
+      model: this.dataset.model,
+      options: this.dataset.options
+    };
+  },
+
+  methods: {
+    show (option, model) {
+      return option.value === model.value || process.server;
+    }
+  }
+};
+</script>
+
+<style lang="postcss" scoped>
+.collapsible-container {
+  & >>> input {
+    & + label + section {
+      height: 0;
+      overflow: hidden;
+    }
+
+    &:checked + label + section {
+      height: auto;
+    }
+  }
+}
+</style>

packages/core/CollapsibleContainer/mutation/Accordeon/default.vue

@@ -0,0 +1,102 @@
+<template>
+  <accordeon
+    class="design-default"
+    v-bind="$attrs"
+    :dataset="dataset"
+    v-on="$listeners"
+  >
+    <template #label="{option}">
+      {{ option.label }}
+      <icon size="small">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </svg>
+      </icon>
+    </template>
+    <template #content="{show, option}">
+      <accordeon-transition-expand>
+        <section v-show="show">
+          <slot name="content" :option="option">
+            {{ option.content }}
+          </slot>
+        </section>
+      </accordeon-transition-expand>
+    </template>
+  </accordeon>
+</template>
+
+<script>
+
+import Icon from '../../../Icon';
+import AccordeonTransitionExpand from '../../transition/expand';
+import Dataset from '../../classes/Dataset';
+import Model from '../../classes/Model';
+import Option from '../../classes/Option';
+import Accordeon from './index';
+
+export default {
+  components: {
+    Accordeon,
+    AccordeonTransitionExpand,
+    Icon
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    dataset: {
+      type: Dataset,
+      default () {
+        const model = new Model(`default-${Math.random()}`, 'b');
+        const options = [
+          { label: 'LABEL A', value: 'a', content: 'CONTENT A CONTENT A CONTENT A CONTENT A CONTENT A CONTENT A CONTENT A CONTENT A CONTENT A CONTENT A CONTENT A CONTENT A CONTENT A CONTENT A CONTENT A CONTENT A CONTENT A CONTENT A CONTENT A CONTENT A CONTENT A CONTENT A ' },
+          { label: 'LABEL B', value: 'b', content: 'CONTENT B' },
+          { label: 'LABEL C', value: 'c', content: 'CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C CONTENT C ' }
+        ].map(({ label, value, content }) => {
+          return new Option(label, value, content);
+        });
+        return new Dataset(options, model);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="postcss" scoped>
+.accordeon.design-default {
+  display: flex;
+  flex-wrap: wrap;
+
+  & >>> {
+    & label {
+      display: block;
+      width: 100%;
+
+      & .icon svg {
+        width: 48px;
+      }
+    }
+  }
+
+  & > section {
+    /* display: block !important; */
+    width: 100%;
+  }
+}
+</style>
+
+<style lang="postcss" type="design" scoped>
+.design-default {
+  & >>> {
+    & input {
+      &:focus + label {
+        box-shadow: 0 0 5px #2196f3;
+      }
+
+      &:checked + label > .icon svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
+</style>