master < dev

README.md

@@ -3,39 +3,37 @@
 This repo provides a basic setup for developing component libraries in Vite with Vue 3 typescript and TailwindCss
 
 ## Features
+
 - Create a component library using Vue3 Vite and typescript
 - Tailwind CSS
 - Automatically export and register all components in `./src/components`
 
 ## Components
+
 - [x] LcBadge
 - [x] LcButton
-- [x] LcCheckbox
-- [x] LcForm
 - [x] LcIcon
-- [x] LcInput
 - [x] LcModal
-- [x] LcMultiselect
 - [x] LcPagination
-- [x] LcRadioGroup & LcRadio
 - [x] LcTable
-- [x] LcTextarea
 - [x] LcTooltip
 
 ## Commands
+
 ```bash
 yarn dev # Will run the demos app so you can see your components
 yarn build # Will build your components into a library and generate types
 ```
 
 ## Publish on NPM
+
 ### Generate build
 
 Upgrade version package :
 
 - Patch releases: 1.0 or 1.0.x or ~1.0.4
 - Minor releases: 1 or 1.x or ^1.0.4
-- Major releases: * or x
+- Major releases: \* or x
 
 ```
 $ yarn build

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lc-component-library",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "license": "MIT",
   "files": [
     "dist"
@@ -29,23 +29,18 @@
   "dependencies": {
     "@babel/preset-env": "^7.14.2",
     "@babel/preset-typescript": "^7.13.0",
-    "@vee-validate/i18n": "^4.1.20",
-    "@vee-validate/rules": "^4.1.20",
-    "@vueform/multiselect": "^2.0.1",
     "esno": "0.4.4",
-    "maska": "^1.4.4",
-    "vee-validate": "4.4.4",
     "vue": "3.2.3"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.4.3",
     "@babel/core": "^7.13.14",
-    "@storybook/addon-a11y": "^6.3.6",
-    "@storybook/addon-actions": "^6.3.6",
-    "@storybook/addon-essentials": "^6.3.6",
-    "@storybook/addon-links": "^6.3.6",
+    "@storybook/addon-a11y": "^6.3.7",
+    "@storybook/addon-actions": "^6.3.7",
+    "@storybook/addon-essentials": "^6.3.7",
+    "@storybook/addon-links": "^6.3.7",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/vue3": "^6.3.6",
+    "@storybook/vue3": "^6.3.7",
     "@tailwindcss/postcss7-compat": "^2.1.0",
     "@types/jest": "^26.0.23",
     "@typescript-eslint/eslint-plugin": "4.21.0",

src/components/LcAccordion/LcAccordion.stories.ts

@@ -0,0 +1,106 @@
+import LcButton from '../LcButton'
+import LcAccordion from './LcAccordion'
+
+export default {
+  title: 'Example/LcAccordion',
+  component: LcAccordion,
+}
+
+const Template = (args: any) => ({
+  components: { LcAccordion, LcButton },
+  setup() {
+    return { args }
+  },
+  data() {
+    return { open: args.modelValue }
+  },
+  template: `
+    <lc-accordion v-bind="args" v-model="open">
+      <template #body>
+        My content
+      </template>
+    </lc-accordion>
+  `,
+})
+
+const TemplateSlotActionsAfter = (args: any) => ({
+  components: { LcAccordion, LcButton },
+  setup() {
+    return { args }
+  },
+  data() {
+    return { open: args.modelValue }
+  },
+  template: `
+    <lc-accordion v-bind="args" v-model="open">
+      <template #content-after>
+        <lc-button>button after</lc-button>
+      </template>
+      <template #body>
+        My content
+      </template>
+    </lc-accordion>
+  `,
+})
+
+const TemplateSlotActionsBefore = (args: any) => ({
+  components: { LcAccordion, LcButton },
+  setup() {
+    return { args }
+  },
+  data() {
+    return { open: args.modelValue }
+  },
+  template: `
+    <lc-accordion v-bind="args" v-model="open">
+      <template #content-before>
+        <lc-button>button before</lc-button>
+      </template>
+      <template #body>
+        My content
+      </template>
+    </lc-accordion>
+  `,
+})
+
+export const Base = Template.bind({}) as any
+Base.args = {
+  title: '1. House information',
+  modelValue: true,
+}
+
+export const HaveToogle = Template.bind({}) as any
+HaveToogle.args = {
+  ...Base.args,
+  haveToggle: true,
+}
+
+export const HaveToogleButClose = Template.bind({}) as any
+HaveToogleButClose.args = {
+  ...HaveToogle.args,
+  modelValue: false,
+}
+
+export const HaveButtonRight = TemplateSlotActionsAfter.bind({}) as any
+HaveButtonRight.args = {
+  title: '1. House information',
+  modelValue: true,
+}
+
+export const HaveButtonRightAndToggle = TemplateSlotActionsAfter.bind({}) as any
+HaveButtonRightAndToggle.args = {
+  ...HaveButtonRight.args,
+  haveToggle: true,
+}
+
+export const HaveButtonLeft = TemplateSlotActionsBefore.bind({}) as any
+HaveButtonLeft.args = {
+  title: '1. House information',
+  modelValue: true,
+}
+
+export const HaveButtonLeftAndToggle = TemplateSlotActionsBefore.bind({}) as any
+HaveButtonLeftAndToggle.args = {
+  ...HaveButtonLeft.args,
+  haveToggle: true,
+}

src/components/LcAccordion/LcAccordion.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="lc-accordion">
+    <div
+      class="lc-accordion-header"
+      data-testid="lc-accordion-header"
+    >
+      <div>
+        <span
+          v-if="title"
+          class="lc-accordion-header-title"
+          data-testid="lc-accordion-header-title"
+        >
+          {{ title }}
+        </span>
+        <slot name="content-before" />
+      </div>
+      <div
+        v-if="$slots['content-after'] || haveToggle"
+        class="lc-accordion-header-right"
+      >
+        <slot name="content-after" />
+        <lc-button
+          v-if="haveToggle"
+          class="lc-accordion-header-toggle-button"
+          data-testid="lc-accordion-header-toggle-button"
+          variant="icon"
+          size="xs"
+          @click="toggle"
+        >
+          <slot name="button-toggle-icon">
+            <lc-icon
+              class="lc-accordion-header-toggle-button-icon"
+              :name="modelValue ? 'bottom-chevron' : 'top-chevron'"
+              size="xxs"
+            />
+          </slot>
+        </lc-button>
+      </div>
+    </div>
+
+    <transition
+      @enter="onEnter"
+      @after-enter="onAfterEnter"
+      @before-leave="onBeforeLeave"
+      @leave="onLeave"
+    >
+      <div
+        v-show="modelValue"
+        ref="lc-accordion-body"
+        class="lc-accordion-body"
+        data-testid="lc-accordion-body"
+        :style="containerStyle"
+      >
+        <div ref="wrapper" class="lc-accordion-body-wrapper">
+          <slot name="body" />
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+import LcButton from '../LcButton'
+import LcIcon from '../LcIcon'
+
+export default defineComponent({
+  components: {
+    LcButton,
+    LcIcon,
+  },
+  props: {
+    duration: {
+      type: Number,
+      default: 250,
+    },
+    haveToggle: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: Boolean,
+      default: true,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    containerStyle() {
+      return {
+        transitionDuration: `${this.duration}ms`,
+      }
+    },
+  },
+  mounted() {
+    if (this.modelValue) {
+      const el = this.$refs['lc-accordion-body']
+      this.setContainerHeight('auto', el)
+    }
+  },
+  methods: {
+    getContentHeight() {
+      const wrapper = this.$refs.wrapper
+      return wrapper?.getBoundingClientRect().height || 0
+    },
+    onEnter(el) {
+      this.setContainerHeight(this.getContentHeight(), el)
+    },
+    onAfterEnter(el) {
+      this.setContainerHeight('auto', el)
+    },
+    onBeforeLeave(el) {
+      this.setContainerHeight(this.getContentHeight(), el)
+    },
+    onLeave(el) {
+      this.setContainerHeight(0, el)
+    },
+    setContainerHeight(height, el) {
+      el.style.height = typeof height === 'number' ? `${height}px` : height
+    },
+    toggle() {
+      this.$emit('update:modelValue', !this.modelValue)
+    },
+  },
+})
+</script>
+
+<style>
+.lc-accordion {
+  @apply bg-white shadow-md;
+}
+
+.lc-accordion-header {
+  @apply px-9 py-4 border-b border-gray-300 flex items-center justify-between;
+}
+.lc-accordion-header-title {
+  @apply text-xl font-medium mr-4;
+}
+.lc-accordion-header-toggle-button {
+  @apply ml-4;
+}
+.lc-accordion-header-toggle-button-icon {
+  @apply text-white;
+}
+.lc-accordion-header-right {
+  @apply flex items-center;
+}
+
+.lc-accordion-body {
+   @apply overflow-hidden h-0 ease-in-out transition-height;
+}
+.lc-accordion-body-wrapper {
+  @apply px-9 py-5 w-full;
+}
+</style>