@livestorm/ui-vue 1.1.0 → 1.1.2

package/src/components/BaseButton/BaseButton.vue

@@ -0,0 +1,193 @@
+<template>
+  <component
+    :is="component.is"
+    v-bind="component.props"
+    :disabled="finalDisabled ? true : null"
+    :class="cssClass"
+    :aria-label="labelFinal"
+    class="base-button"
+    @click="onClick"
+    @mouseenter="$emit('mouseenter')"
+    @mouseleave="$emit('mouseleave')"
+  >
+    <div class="button-wrapper">
+      <!-- Loading animation -->
+      <span
+        v-if="loading"
+        class="button-loader"
+        :class="{ 'left-icon': hasLabel }"
+      >
+        <span
+          class="loader"
+        />
+      </span>
+
+      <!-- Content -->
+      <template
+        v-else-if="!hideLeftIcon"
+      >
+        <div
+          v-if="iconSlot"
+          :class="{ 'left-icon': hasLabel }"
+          class="button-icon"
+        >
+          <RenderSlot
+            :vnodes="iconSlot"
+          />
+        </div>
+        <div
+          v-else-if="imageSource"
+          :class="{ 'left-icon': hasLabel }"
+          class="button-icon"
+        >
+          <img :src="imageSource">
+        </div>
+        <div
+          v-else-if="icon"
+          :class="[
+            icon,
+            { 'left-icon': hasLabel },
+          ]"
+          class="button-icon"
+        />
+      </template>
+      <span
+        class="content truncate"
+      >
+        <RenderSlot
+          v-if="!hideLabel"
+          :vnodes="defaultSlot"
+        />
+      </span>
+      <div
+        v-if="iconRight"
+        :class="[
+          iconRight,
+          { 'right-icon': hasLabel },
+        ]"
+        class="button-icon"
+      />
+      <div
+        v-if="closable"
+        class="button-icon icon-close i-ls-x"
+        @click.stop.prevent="$emit('close')"
+      />
+    </div>
+  </component>
+</template>
+
+<script>
+import { computed } from 'vue'
+import { useSlotsAsComponents } from '../../utils/slot'
+import DynamicAction from '../../mixins/DynamicAction'
+
+export default {
+
+  mixins: [
+    DynamicAction,
+  ],
+
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    hideLabel: {
+      type: Boolean,
+      default: false,
+    },
+    hideLeftIcon: {
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      type: [String, Boolean],
+      default: null,
+    },
+    iconRight: {
+      type: [String, Boolean],
+      default: null,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: null,
+    },
+    imageSource: {
+      type: String,
+      default: null,
+    },
+    alignCenter: {
+      type: Boolean,
+      default: false,
+    },
+    closable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: [
+    'click',
+    'close',
+    'mouseenter',
+    'mouseleave',
+  ],
+
+  setup (props) {
+    const slots = useSlotsAsComponents()
+    const defaultSlot = computed(() => slots.default())
+    const iconSlot = computed(() => slots.icon())
+    const hasLabel = computed(() => !props.hideLabel && !!defaultSlot.value)
+
+    return {
+      defaultSlot,
+      iconSlot,
+      hasLabel,
+    }
+  },
+
+  computed: {
+    cssClass () {
+      return {
+        loading: this.loading,
+        'hide-label': this.hideLabel,
+        'base-button-square': !this.hasLabel && this.hasIcon,
+        'flex justify-center': this.alignCenter,
+        closable: this.closable,
+      }
+    },
+
+    finalDisabled () {
+      return this.disabled || this.loading
+    },
+
+    hasIcon () {
+      return this.icon || this.iconRight
+    },
+
+    isToggle () {
+      return this.iconRight?.includes('i-ls-chevron-down') && this.hasLabel
+    },
+
+    labelFinal () {
+      return !this.isToggle && (
+        ((this.$slots.default?.()[0].text) || this.label)?.trim() || undefined
+      )
+    },
+  },
+
+  methods: {
+    onClick (event) {
+      if (this.finalDisabled) {
+        event.preventDefault()
+      } else {
+        this.$emit('click', event)
+      }
+    },
+  },
+}
+</script>

package/src/components/BaseButton/__snapshots__/BaseButton.spec.js.snap

@@ -0,0 +1,37 @@
+// Vitest Snapshot v1
+
+exports[`BaseButton > snapshot: a 1`] = `
+"<a href=\\"https://google.com/\\" class=\\"base-button\\">
+  <div class=\\"button-wrapper\\">
+    <!-- Loading animation -->
+    <!-- Content -->
+    <!--v-if--><span class=\\"content truncate\\"><span>Google</span></span>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</a>"
+`;
+
+exports[`BaseButton > snapshot: button 1`] = `
+"<button type=\\"submit\\" class=\\"base-button\\">
+  <div class=\\"button-wrapper\\">
+    <!-- Loading animation -->
+    <!-- Content -->
+    <!--v-if--><span class=\\"content truncate\\"><span>Hello</span></span>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</button>"
+`;
+
+exports[`BaseButton > snapshot: router-link 1`] = `
+"<router-link to=\\"[object Object]\\" class=\\"base-button\\">
+  <div class=\\"button-wrapper\\">
+    <!-- Loading animation -->
+    <!-- Content -->
+    <!--v-if--><span class=\\"content truncate\\"><span>My Page</span></span>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</router-link>"
+`;

package/src/components/BaseButton/__snapshots__/BaseButton.spec.js.snap.old

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BaseButton snapshot: a 1`] = `
+<a href="https://google.com/" class="base-button">
+  <div class="button-wrapper">
+    <!----> <span class="content truncate"><span>Google</span></span>
+    <!---->
+    <!---->
+  </div>
+</a>
+`;
+
+exports[`BaseButton snapshot: button 1`] = `
+<button type="submit" class="base-button">
+  <div class="button-wrapper">
+    <!----> <span class="content truncate"><span>Hello</span></span>
+    <!---->
+    <!---->
+  </div>
+</button>
+`;
+
+exports[`BaseButton snapshot: router-link 1`] = `
+<router-link to="[object Object]" exact="true" class="base-button">
+  <div class="button-wrapper">
+    <!----> <span class="content truncate"><span>My Page</span></span>
+    <!---->
+    <!---->
+  </div>
+</router-link>
+`;

package/src/components/BaseCheckbox/BaseCheckbox.stories.js

@@ -0,0 +1,82 @@
+import BaseCheckbox from './BaseCheckbox.vue'
+import { action } from '@storybook/addon-actions'
+
+export default {
+  title: 'common/vue/components/BaseCheckbox',
+  component: BaseCheckbox,
+}
+
+const actions = {
+  onChange: action('change'),
+  onClick: action('click'),
+}
+
+const Template = (args) => ({
+  components: { BaseCheckbox },
+  setup: () => ({ args, ...actions }),
+  template: '<BaseCheckbox v-bind="args" @tooltip-clicked="onClick" @change="onChange" />',
+})
+
+export const Checked = Template.bind({})
+Checked.args = {
+  forId: 'my-checkbox',
+  label: 'This checkbox is checked',
+  value: true,
+}
+
+export const WithOtherIcon = Template.bind({})
+WithOtherIcon.args = {
+  forId: 'my-checkbox',
+  label: 'This checkbox is checked',
+  icon: 'i-ls-minus',
+  value: true,
+}
+
+export const Unchecked = Template.bind({})
+Unchecked.args = {
+  forId: 'my-checkbox',
+  label: 'This checkbox is unchecked',
+  value: false,
+}
+
+export const WithLabelClass = Template.bind({})
+WithLabelClass.args = {
+  forId: 'my-checkbox',
+  label: 'This checkbox has a label class',
+  labelClass: 'text-16-medium',
+}
+
+export const WithInputClass = Template.bind({})
+WithInputClass.args = {
+  forId: 'my-checkbox',
+  label: 'This checkbox has  an input class',
+  inputClass: 'error',
+}
+
+export const WithTooltip = Template.bind({})
+WithTooltip.args = {
+  forId: 'my-checkbox',
+  label: 'This checkbox has a tooltip',
+  tooltip: 'Checkbox tooltip',
+}
+
+export const Required = Template.bind({})
+Required.args = {
+  forId: 'my-checkbox',
+  label: 'This checkbox is required',
+  required: true,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  forId: 'my-checkbox',
+  label: 'This checkbox is disabled',
+  disabled: true,
+}
+
+export const IgnorePointerEvents = Template.bind({})
+IgnorePointerEvents.args = {
+  forId: 'my-checkbox',
+  label: 'This checkbox ignore pointer events',
+  disableChange: true,
+}

package/src/components/BaseCheckbox/BaseCheckbox.vue

@@ -0,0 +1,161 @@
+<template>
+  <div
+    class="base-checkbox"
+    :class="{
+      'base-checkbox-disabled': disabled,
+      'pointer-events-none': disableChange,
+      'base-checkbox-consent' : isConsent,
+    }"
+  >
+    <input
+      :id="forId"
+      ref="checkbox"
+      :checked="checked"
+      :disabled="disabled"
+      type="checkbox"
+      @change="onChange"
+    >
+    <label :for="forId">
+      <span
+        class="input-custom !mt-[1px]"
+        :class="inputClass"
+      >
+        <div
+          v-if="!disabled || checked"
+          :class="icon"
+          class="check-checkbox"
+        />
+      </span>
+      <span
+        v-if="label"
+        class="label-custom"
+      >
+        <span
+          :class="labelClass"
+          v-html="required ? `${label} *` : label"
+        />
+        <span
+          v-if="tooltip"
+          v-tooltip="tooltip"
+          data-testid="open-tooltip"
+          @click.stop.prevent="$emit('tooltip-clicked')"
+        />
+      </span>
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: {
+    BaseFormInputInjection: { default: null },
+  },
+
+  props: {
+    // eslint-disable-next-line
+    modelValue: {},
+
+    // eslint-disable-next-line
+    value: {
+      default: false,
+    },
+
+    label: {
+      type: String,
+      default: null,
+    },
+
+    labelClass: {
+      type: String,
+      default: null,
+    },
+
+    inputClass: {
+      type: String,
+      default: null,
+    },
+
+    forId: {
+      type: String,
+      required: true,
+    },
+
+    tooltip: {
+      type: String,
+      default: null,
+    },
+
+    required: {
+      type: Boolean,
+      default: false,
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    disableChange: {
+      type: Boolean,
+      default: false,
+    },
+
+    isConsent: {
+      type: Boolean,
+      default: false,
+    },
+
+    icon: {
+      type: String,
+      default: 'i-ls-check',
+    },
+  },
+
+  emits: [
+    'change',
+    'update:modelValue',
+    'tooltip-clicked',
+  ],
+
+  computed: {
+    baseFormInputValue () {
+      return this.BaseFormInputInjection && this.BaseFormInputInjection.childConfig.value
+    },
+
+    checked () {
+      if (this.modelValue !== undefined) {
+        return Array.isArray(this.modelValue)
+          ? this.modelValue.includes(this.value)
+          : this.modelValue === this.value
+      } else if (this.BaseFormInputInjection && !!this.baseFormInputValue) {
+        return Array.isArray(this.baseFormInputValue)
+          ? this.baseFormInputValue.includes(this.value)
+          : this.baseFormInputValue === this.value && this.value
+      }
+      return this.value
+    },
+  },
+
+  methods: {
+    onChange (event) {
+      let newValue = event.target.checked
+
+      if (this.modelValue !== undefined) {
+        newValue = [...this.modelValue]
+        if (event.target.checked) {
+          newValue.push(this.value)
+        } else {
+          newValue.splice(newValue.indexOf(this.value), 1)
+        }
+      }
+
+      this.$emit('update:modelValue', newValue)
+      this.$emit('change', newValue)
+
+      if (this.BaseFormInputInjection) {
+        this.BaseFormInputInjection.setInputModel(newValue)
+      }
+    },
+  },
+}
+</script>

package/src/components/BaseDropdownMenu/BaseDropdownMenu.stories.js

@@ -0,0 +1,84 @@
+import BaseDropdownMenu from './BaseDropdownMenu.vue'
+import { withDesign } from 'storybook-addon-designs'
+
+export default {
+  title: 'common/vue/components/BaseDropdownMenu',
+  component: BaseDropdownMenu,
+  decorators: [withDesign],
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/JY03TRyhauKw0jjoHFFtmMHV/2.-Design-system---Components?node-id=13845%3A172133&t=Ppfihth2ztZAaEVN-0',
+    },
+  },
+}
+
+const headerTemplate = (args) => ({
+  setup: () => ({ args }),
+  template: `
+    <BaseDropdownMenu v-bind="args" :shown="true">
+      <template #popper>
+        <BaseDropdownMenuItem
+          icon="i-ls-settings"
+          label="Access to the event"
+          secondary-label="Grab your popcorn"
+          additional-info="2"
+          secondary-icon="i-ls-external-link"
+        >
+          <template #additional-left-part>
+            <div
+              class="status rounded-full w-1 h-1 bg-green-600"
+            />
+          </template>
+        </BaseDropdownMenuItem>
+        <BaseDropdownMenuItem
+          label="Go to the settings page"
+          secondary-label="There are so much settings !"
+          disabled
+        />
+        <BaseDropdownMenuItem
+          label="A simple item"
+        />
+        <BaseDropdownMenuDivider/>
+        <BaseDropdownMenuTitle title="A nice title" />
+        <BaseDropdownMenuItem
+          label="Open chat"
+          active
+          secondary-icon="i-ls-chevron-right"
+        />
+        <BaseDropdownMenuItem
+          label="An item during loading..."
+          loading
+        />
+        <BaseDropdownMenuSearch class="mb-1" />
+        <BaseDropdownMenuItem
+          label="Go the the event page"
+          href="https://google.com"
+          secondary-icon="i-ls-external-link"
+        />
+        <BaseDropdownMenuItem
+          label="Delete user"
+          secondary-label="The user could not join the event"
+          icon="i-ls-trash text-red-700"
+          label-class="text-red-700"
+        />
+        <BaseDropdownMenuButton class="base-button-primary w-full my-2">Click on me</BaseDropdownMenuButton>
+      </template>
+    </BaseDropdownMenu>
+  `,
+})
+
+export const Common = headerTemplate.bind({})
+Common.args = {}
+
+export const WithBottomSearch = headerTemplate.bind({})
+WithBottomSearch.args = {
+  searchPosition: 'bottom',
+  searchEnabled: true,
+}
+
+export const WithTopSearch = headerTemplate.bind({})
+WithTopSearch.args = {
+  searchPosition: 'top',
+  searchEnabled: true,
+}