feat(Carousel): init carousel

components.d.ts

@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
     'Button.story': typeof import('./src/components/Basic/Button/button.story.vue')['default']
     'Calendar.story': typeof import('./src/components/Data/Calendar/calendar.story.vue')['default']
     'Card.story': typeof import('./src/components/Data/card.story.vue')['default']
+    'Carousel.story': typeof import('./src/components/Data/Carousel/carousel.story.vue')['default']
     'Cascader.story': typeof import('./src/components/Form/cascader.story.vue')['default']
     'Checkbox.story': typeof import('./src/components/Form/checkbox.story.vue')['default']
     'Color.story': typeof import('./src/components/Basic/Color/color.story.vue')['default']
@@ -33,6 +34,8 @@ declare module '@vue/runtime-core' {
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCalendar: typeof import('element-plus/es')['ElCalendar']
     ElCard: typeof import('element-plus/es')['ElCard']
+    ElCarousel: typeof import('element-plus/es')['ElCarousel']
+    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
     ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCascaderPanel: typeof import('element-plus/es')['ElCascaderPanel']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']

src/components/Data/Carousel/carousel.story.md

@@ -0,0 +1 @@
+## Carousel Attributes

src/components/Data/Carousel/carousel.story.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { isAttribute } from '@/utils'
+
+const basicUsage = reactive({
+  trigger: 'hover',
+  interval: 3000,
+  height: 150,
+  autoplay: true,
+  arrow: 'hover',
+  indicatorPosition: '',
+  type: '',
+  loop: true,
+  direction: 'horizontal',
+  pauseOnHover: true,
+})
+
+const isCardType = computed({
+  get: () => basicUsage.type === 'card',
+  set: (flag) => {
+    basicUsage.type = flag ? 'card' : ''
+  },
+})
+
+const CarouselBasicSource = computed(() => {
+  return `<el-carousel
+  height="${basicUsage.height}px"${
+  isAttribute(
+basicUsage.trigger === 'click',
+'trigger="click"')}${
+  isAttribute(
+basicUsage.direction === 'vertical',
+'direction="vertical"')}${
+  isAttribute(
+!basicUsage.autoplay,
+'autoplay="false"')}${
+  isAttribute(
+basicUsage.autoplay && basicUsage.interval !== 3000,
+`interval="${basicUsage.interval}"`)}${
+  isAttribute(
+basicUsage.arrow !== 'hover',
+`arrow="${basicUsage.arrow}"`)}${
+  isAttribute(
+basicUsage.indicatorPosition !== '',
+`indicator-position="${basicUsage.indicatorPosition}"`)}${
+  isAttribute(
+isCardType.value,
+'type="card"')}${
+  isAttribute(
+!basicUsage.loop,
+'loop="false"')}${
+  isAttribute(
+!basicUsage.pauseOnHover && basicUsage.autoplay,
+'pause-on-hover="false"')}
+>
+  <el-carousel-item
+    v-for="item in 3"
+    :key="item"
+  >
+    <h3>{{ item }}</h3>
+  </el-carousel-item>
+</el-carousel>`
+})
+</script>
+
+<template>
+  <Story
+    title="Data/Carousel"
+    icon="material-symbols:view-carousel-outline-rounded"
+    :layout="{
+      type: 'grid',
+      width: 400,
+    }"
+  >
+    <Variant
+      title="Basic Usage"
+      :source="CarouselBasicSource"
+    >
+      <el-carousel
+        :height="`${basicUsage.height}px`"
+        :trigger="basicUsage.trigger"
+        :autoplay="basicUsage.autoplay"
+        :interval="basicUsage.interval"
+        :indicator-position="basicUsage.indicatorPosition"
+        :arrow="basicUsage.arrow"
+        :type="basicUsage.type"
+        :loop="basicUsage.loop"
+        :direction="basicUsage.direction"
+        :pause-on-hover="basicUsage.pauseOnHover"
+      >
+        <el-carousel-item v-for="item in 3" :key="item">
+          <h3
+            class="small justify-center"
+            text="2xl"
+            :style="{ lineHeight: `${basicUsage.height}px` }"
+          >
+            {{ item }}
+          </h3>
+        </el-carousel-item>
+      </el-carousel>
+      <template #controls>
+        <HstButtonGroup
+          v-model="basicUsage.trigger"
+          title="Trigger"
+          :options="[
+            { label: 'click', value: 'click' },
+            { label: 'hover', value: 'hover' },
+          ]"
+        />
+        <HstButtonGroup
+          v-model="basicUsage.direction"
+          title="Direction"
+          :options="[
+            { label: 'horizontal', value: 'horizontal' },
+            { label: 'vertical', value: 'vertical' },
+          ]"
+        />
+        <HstCheckbox v-model="basicUsage.autoplay" title="Autoplay" />
+        <HstCheckbox
+          v-model="basicUsage.pauseOnHover"
+          title="Pause On Hover"
+        />
+        <HstSlider
+          v-model="basicUsage.interval"
+          title="Interval"
+          :min="0"
+          :max="10000"
+        />
+        <HstNumber
+          v-model="basicUsage.height"
+          title="Height"
+        />
+        <HstButtonGroup
+          v-model="basicUsage.arrow"
+          title="Arrow"
+          :options="[
+            { label: 'always', value: 'always' },
+            { label: 'hover', value: 'hover' },
+            { label: 'never', value: 'never' },
+          ]"
+        />
+        <HstButtonGroup
+          v-model="basicUsage.indicatorPosition"
+          title="Indicator Position"
+          :options="[
+            { label: 'default', value: '' },
+            { label: 'outside', value: 'outside' },
+            { label: 'none', value: 'none' },
+          ]"
+        />
+        <HstCheckbox v-model="isCardType" title="Card Type" />
+        <HstCheckbox v-model="basicUsage.loop" title="Loop" />
+      </template>
+    </Variant>
+  </Story>
+</template>
+
+<style scoped>
+.demonstration {
+  color: var(--el-text-color-secondary);
+}
+
+.el-carousel__item h3 {
+  color: #475669;
+  opacity: 0.75;
+  line-height: 150px;
+  margin: 0;
+  text-align: center;
+}
+
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n + 1) {
+  background-color: #d3dce6;
+}
+</style>

src/controls-components/HstColor.vue

@@ -30,24 +30,42 @@ const predefineColors = ref([
   '#00ced1',
   '#1e90ff',
   '#c71585',
-  'rgba(255, 69, 0, 0.68)',
   'rgb(255, 120, 0)',
   'hsv(51, 100, 98)',
-  'hsva(120, 40, 94, 0.5)',
   'hsl(181, 100%, 37%)',
-  'hsla(209, 100%, 56%, 0.73)',
-  '#c7158577',
 ])
 </script>
 
 <template>
-  <span style="padding: 0 8px; font-size: 14px; margin-right: 68px;">
-    {{ title }}
-  </span>
-  <el-color-picker
-    v-model="colorModel"
-    size="small"
-    show-alpha
-    :predefine="predefineColors"
-  />
+  <label class="container">
+    <span
+      class="title"
+    >
+      {{ title }}
+    </span>
+    <el-color-picker
+      v-model="colorModel"
+      size="small"
+      show-alpha
+      :predefine="predefineColors"
+    />
+  </label>
 </template>
+
+<style scoped>
+.container {
+  padding: 0.5rem;
+  gap: 0.5rem;
+  align-items: center;
+  flex-wrap: wrap;
+  cursor: pointer;
+  display: flex;
+}
+.title {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  flex-shrink: 0;
+  width: 7rem;
+}
+</style>