@livestorm/ui-vue 1.1.0 → 1.1.2

package/src/components/BaseRating/BaseRating.vue

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

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