@livestorm/ui-vue 1.1.3 → 2.0.0

package/src/components/BaseButton/BaseButton.vue

@@ -1,193 +0,0 @@
-<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

@@ -1,37 +0,0 @@
-// 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

@@ -1,31 +0,0 @@
-// 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

@@ -1,157 +0,0 @@
-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 WithDescription = Template.bind({})
-WithDescription.args = {
-  ...Checked.args,
-  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam diam leo, semper ut urna ut, tristique placerat dolor. Mauris hendrerit dolor tempus purus fringilla malesuada.',
-}
-
-export const CheckedNoText = Template.bind({})
-CheckedNoText.args = {
-  ...Checked.args,
-  label: null,
-}
-
-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,
-}
-
-const WithBorderTemplate = (args) => ({
-  components: { BaseCheckbox },
-  setup: () => ({ args, ...actions }),
-  template: '<BaseCheckbox class="base-choice" v-bind="args" @tooltip-clicked="onClick" @change="onChange" />',
-})
-
-export const CheckedWithBorder = WithBorderTemplate.bind({})
-CheckedWithBorder.args = Checked.args
-
-export const NotCheckedWithBorder = WithBorderTemplate.bind({})
-NotCheckedWithBorder.args = Unchecked.args
-
-export const WithDescriptionWithBorder = WithBorderTemplate.bind({})
-WithDescriptionWithBorder.args = WithDescription.args
-
-const WithBorderAndIconTemplate = (args) => ({
-  components: { BaseCheckbox },
-  setup: () => ({ args, ...actions }),
-  template: `<BaseCheckbox class="base-choice" v-bind="args" @tooltip-clicked="onClick" @change="onChange">
-    <template #icon>
-      <div class="i-ls-twitter-fill" />
-    </template>
-  </BaseCheckbox>`,
-})
-
-export const CheckedWithBorderAndImage = WithBorderAndIconTemplate.bind({})
-CheckedWithBorderAndImage.args = Checked.args
-
-export const CheckedWithBorderAndIconVertical = WithBorderAndIconTemplate.bind({})
-CheckedWithBorderAndIconVertical.args = {
-  ...Checked.args,
-  orientation: 'vertical',
-}
-
-export const CheckedWithBorderAndIconAndTooltip = WithBorderAndIconTemplate.bind({})
-CheckedWithBorderAndIconAndTooltip.args = {
-  ...Checked.args,
-  tooltip: 'Hello there !',
-}
-
-export const CheckedWithBorderAndIconAndTooltipVertical = WithBorderAndIconTemplate.bind({})
-CheckedWithBorderAndIconAndTooltipVertical.args = {
-  ...Checked.args,
-  tooltip: 'Hello there !',
-  orientation: 'vertical',
-}
-
-const WithBorderAndImageTemplate = (args) => ({
-  components: { BaseCheckbox },
-  setup: () => ({ args, ...actions }),
-  template: `<BaseCheckbox class="base-choice" v-bind="args" @tooltip-clicked="onClick" @change="onChange">
-    <template #icon>
-    <img src="/outlook.svg" />
-    </template>
-  </BaseCheckbox>`,
-})
-
-export const CheckedWithBorderAndImageVertical = WithBorderAndImageTemplate.bind({})
-CheckedWithBorderAndImageVertical.args = {
-  ...Checked.args,
-  orientation: 'vertical',
-}

package/src/components/BaseCheckbox/BaseCheckbox.vue

@@ -1,180 +0,0 @@
-<script setup lang="ts">
-import { useSlotsAsComponents } from '../../utils/slot'
-import { computed, inject } from 'vue'
-
-interface BaseFormInputInjectionType {
-  childConfig: { value: any } | undefined,
-  setInputModel: (value: any) => void,
-}
-
-const BaseFormInputInjection = inject<BaseFormInputInjectionType | undefined>('BaseFormInputInjection', undefined)
-
-const props = withDefaults(defineProps<{
-  modelValue?: any,
-  value?: any,
-  label?: string,
-  labelClass?: string,
-  description?: string,
-  inputClass?: string,
-  forId: string,
-  tooltip?: string,
-  required?: boolean,
-  disabled?: boolean,
-  disableChange?: boolean,
-  isConsent?: boolean,
-  icon?: string,
-  orientation?: 'horizontal' | 'vertical',
-}>(), {
-  value: false,
-  label: undefined,
-  labelClass: undefined,
-  description: undefined,
-  inputClass: undefined,
-  forId: undefined,
-  tooltip: undefined,
-  required: false,
-  disabled: false,
-  disableChange: false,
-  isConsent: false,
-  icon: 'i-ls-check',
-  orientation: 'horizontal',
-})
-
-const emit = defineEmits<{
-  (e: 'change', a: any): void,
-  (e: 'update:modelValue', a: any): void,
-  (e: 'tooltip-clicked'): void,
-}>()
-
-const slots = useSlotsAsComponents()
-const iconSlot = computed(() => slots.icon ? slots.icon() : null)
-
-const baseFormInputValue = computed(() => BaseFormInputInjection?.childConfig?.value)
-
-function isValueChecked (modelValue: any) {
-  if (Array.isArray(modelValue)) {
-    return modelValue.includes(props.value)
-  }
-  return modelValue === props.value
-}
-
-const checked = computed(() => {
-  if (props.modelValue !== undefined) {
-    return isValueChecked(props.modelValue)
-  } else if (BaseFormInputInjection && !!baseFormInputValue.value) {
-    return isValueChecked(baseFormInputValue.value) && props.value
-  }
-  return props.value
-})
-
-function onChange (event: Event) {
-  const target = event.target as HTMLInputElement
-  let newValue: any = target.checked
-
-  if (props.modelValue !== undefined) {
-    newValue = [...props.modelValue]
-    if (target.checked) {
-      newValue.push(props.value)
-    } else {
-      newValue.splice(newValue.indexOf(props.value), 1)
-    }
-  }
-
-  emit('update:modelValue', newValue)
-  emit('change', newValue)
-
-  if (BaseFormInputInjection) {
-    BaseFormInputInjection.setInputModel(newValue)
-  }
-}
-</script>
-
-<template>
-  <div
-    class="base-checkbox"
-    :class="{
-      'base-checkbox-disabled': disabled,
-      'pointer-events-none': disableChange,
-      'base-checkbox-consent' : isConsent,
-      'with-description': description,
-    }"
-  >
-    <input
-      :id="forId"
-      ref="checkbox"
-      :checked="checked"
-      :disabled="disabled"
-      type="checkbox"
-      @change="onChange"
-    >
-    <label
-      :for="forId"
-      :class="{
-        'flex flex-col vertical-padding-large': orientation === 'vertical',
-        'vertical-padding': description && orientation === 'horizontal',
-      }"
-    >
-      <div
-        v-if="iconSlot"
-        class="w-4 h-4 icon flex items-center justify-center"
-        :class="[orientation === 'vertical' ? 'mb-2' : 'mr-2']"
-      >
-        <RenderSlot
-          :vnodes="iconSlot"
-        />
-      </div>
-
-      <span
-        v-if="orientation === 'horizontal'"
-        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"
-        :class="{
-          'mb-2 !ml-0 text-center': orientation === 'vertical'
-        }"
-      >
-        <span
-          class="text-grey-700 label"
-          :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
-          v-if="description"
-          class="text-14-medium text-grey-600 description block"
-          :class="{
-            'text-center': orientation === 'vertical'
-          }"
-          v-html="description"
-        />
-      </span>
-
-      <span
-        v-if="orientation === 'vertical'"
-        class="input-custom"
-      >
-        <div
-          v-if="!disabled || checked"
-          :class="icon"
-          class="check-checkbox"
-        />
-      </span>
-    </label>
-  </div>
-</template>

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

@@ -1,84 +0,0 @@
-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,
-}