@livestorm/ui-vue 1.1.2 → 2.0.0

package/src/components/BaseRating/BaseRating.vue

@@ -1,119 +0,0 @@
-<script setup>
-import { ref, toRefs, computed } from 'vue'
-
-import { getUid } from '../../utils'
-
-const props = defineProps({
-  modelValue: {
-    type: Number,
-    default: 0,
-  },
-  name: {
-    type: String,
-    default: null,
-  },
-  length: {
-    type: Number,
-    validator: value => value > 0 && value < 100,
-    default: 5,
-  },
-  itemLabels: {
-    type: Array,
-    default: null,
-  },
-  hover: {
-    type: Boolean,
-    default: false,
-  },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-  itemLabelClass: {
-    type: String,
-    default: null,
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const { hover, modelValue, itemLabels, name, readonly } = toRefs(props)
-
-const uuid = getUid()
-
-const rating = ref(modelValue.value)
-const ratingHover = ref(0)
-const hoverModeIn = ref(false)
-
-const radioName = computed(() => name.value ?? `base-rating-${uuid}`)
-
-function highlighItem (item) {
-  return hover.value && hoverModeIn.value ? item <= ratingHover.value : item <= rating.value
-}
-
-function getItemLabel (item) {
-  return itemLabels.value?.[item - 1]
-}
-
-function onClick (item) {
-  if (readonly.value) return
-  rating.value = item
-  hoverModeIn.value = false
-  emit('update:modelValue', rating.value)
-}
-
-function onMouseenter (item) {
-  ratingHover.value = item
-  hoverModeIn.value = true
-}
-
-function onMouseleave (item) {
-  hoverModeIn.value = false
-}
-
-</script>
-
-<template>
-  <div
-    class="base-rating flex gap-3"
-    @mouseleave="onMouseleave"
-  >
-    <div
-      v-for="item in length"
-      :key="`${radioName}-${item}`"
-      class="item"
-      :class="{
-        active: highlighItem(item),
-        'pointer-events-none': readonly
-      }"
-      data-testid="base-rating-item"
-      @mouseenter="onMouseenter(item)"
-    >
-      <label
-        :for="`${radioName}-${item}`"
-        class="flex flex-col items-center h-full cursor-pointer"
-      >
-        <div
-          data-testid="base-rating-star-icon"
-          class="i-ls-star-fill w-8 h-8"
-          :class="[highlighItem(item) ? 'text-livestorm-700' : 'text-grey-300']"
-          :fill-color="highlighItem(item) ? 'currentColor' : null"
-        />
-        <span
-          v-if="getItemLabel(item)"
-          class="flex-1 flex items-center justify-center  min-w-[52px] text-11-regular text-center text-grey-700 mt-2"
-          :class="itemLabelClass"
-        >{{ getItemLabel(item) }}</span>
-      </label>
-      <input
-        :id="`${radioName}-${item}`"
-        class="hidden"
-        :name="radioName"
-        type="radio"
-        :value="item"
-        :readonly="readonly"
-        @click="onClick(item)"
-      >
-    </div>
-  </div>
-</template>

package/src/components/BaseSelect/BaseSelect.stories.js

@@ -1,177 +0,0 @@
-import BaseSelect from './BaseSelect.vue'
-import { icons } from '@/../../frontend/.storybook/icons'
-import { action } from '@storybook/addon-actions'
-import { withDesign } from 'storybook-addon-designs'
-
-const actions = {
-  onInput: action('input'),
-  onChange: action('change'),
-  onShow: action('show'),
-  onHide: action('hide'),
-}
-
-export default {
-  title: 'common/vue/components/BaseSelect',
-  component: BaseSelect,
-  argTypes: {
-    icon: {
-      control: {
-        type: 'select',
-      },
-      options: icons,
-    },
-    placement: {
-      control: {
-        type: 'select',
-      },
-      options: ['auto',
-        'auto-start',
-        'auto-end',
-        'top',
-        'top-start',
-        'top-end',
-        'right',
-        'right-start',
-        'right-end',
-        'bottom',
-        'bottom-start',
-        'bottom-end',
-        'left',
-        'left-start',
-        'left-end'],
-    },
-  },
-  decorators: [withDesign, () => ({
-    template: '<div style="height: calc(100vh - 40px); width: 100%; display: flex; align-items: center; justify-content: center;"><story/></div>',
-  })],
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/JY03TRyhauKw0jjoHFFtmMHV/2.-Design-system---Components?node-id=14451%3A175462&t=KIMktHECqTQ06AoK-0',
-    },
-  },
-}
-
-const Template = (args) => {
-  return {
-    setup () {
-      return {
-        args,
-        ...actions,
-      }
-    },
-    data: () => ({ currentValue: null }),
-    template: `
-      <BaseSelect
-        v-bind="args"
-        @input="onInput"
-        @change="onChange"
-        @show="onShow"
-        @hide="onHide"
-        v-model="currentValue"
-        :shown="true"
-      >
-        <BaseSelectOption
-          value="option1"
-          label="Option 1"
-        />
-        <BaseSelectOption
-          value="option2"
-          label="Option 2"
-        />
-        <BaseSelectOption
-          value="option3"
-          label="Option 3"
-        />
-        <BaseSelectOption
-          value="option4"
-          label="Option 4"
-        />
-        <BaseSelectOption
-          value="option5"
-          label="Option 5"
-        />
-        <BaseSelectOption
-          value="option6"
-          label="Option 6"
-        />
-        <BaseSelectOption
-          value="option7"
-          label="Option 7"
-        />
-        <BaseSelectOption
-          value="option8"
-          label="Option 8"
-        />
-        <BaseSelectOption
-          value="option9"
-          label="Option 9"
-        />
-        <BaseSelectOption
-          value="option10"
-          label="Option 10"
-        />
-      </BaseSelect>
-      `,
-  }
-}
-
-const TemplateLongOptions = (args) => {
-  return {
-    setup () {
-      return {
-        args,
-        ...actions,
-      }
-    },
-    data: () => ({ currentValue: null }),
-    template: `
-      <BaseSelect
-        v-bind="args"
-        @input="onInput"
-        @change="onChange"
-        @show="onShow"
-        @hide="onHide"
-        v-model="currentValue"
-        :shown="true"
-      >
-        <BaseSelectOption
-          value="lorem-ipsum-dolor-sit-amet-consetetur-sadipscing-1"
-          label="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat 1"
-        />
-        <BaseSelectOption
-          value="lorem-ipsum-dolor-sit-amet-consetetur-sadipscing-2"
-          label="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat 2"
-        />
-        <BaseSelectOption
-          value="lorem-ipsum-dolor-sit-amet-consetetur-sadipscing-3"
-          label="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat 3"
-        />
-      </BaseSelect>
-    `,
-  }
-}
-
-export const SingleChoice = Template.bind({})
-export const MultiChoices = Template.bind({})
-export const WithSearch = Template.bind({})
-export const LongOptions = TemplateLongOptions.bind({})
-
-SingleChoice.args = {
-  placeholder: 'Choose an option',
-}
-
-MultiChoices.args = {
-  placeholder: 'Choose options',
-  multi: true,
-}
-
-WithSearch.args = {
-  ...SingleChoice.args,
-  searchEnabled: true,
-  searchPlaceholder: 'Search an option',
-}
-
-LongOptions.args = {
-  ...SingleChoice.args,
-}