feat(stage-web|stage-tamagotchi): range & story

packages/stage-ui/histoire.config.ts

@@ -23,6 +23,10 @@ export default defineConfig({
         id: 'menu',
         title: 'Menu',
       },
+      {
+        id: 'data-gui',
+        title: 'Data GUI',
+      },
     ],
   },
 })

packages/stage-ui/src/components/DataGui/Range.story.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import Range from './Range.vue'
+
+const minValue = ref(0)
+const midValue = ref(50)
+const maxValue = ref(100)
+</script>
+
+<template>
+  <Story title="Radio Card (detail)" group="data-gui" :layout="{ type: 'grid', width: 500 }">
+    <template #controls>
+      <ThemeColorsHueControl />
+    </template>
+
+    <Variant id="default-min" title="Default (min)">
+      <Range v-model="minValue" w-full />
+    </Variant>
+
+    <Variant id="default-mid" title="Default (mid)">
+      <Range v-model="midValue" w-full />
+    </Variant>
+
+    <Variant id="default-max" title="Default (max)">
+      <Range v-model="maxValue" w-full />
+    </Variant>
+  </Story>
+</template>

packages/stage-ui/src/components/DataGui/Range.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onUnmounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 
 const props = withDefaults(defineProps<{
   modelValue: number
@@ -7,114 +7,309 @@ const props = withDefaults(defineProps<{
   max?: number
   step?: number
   disabled?: boolean
+  thumbColor?: string
+  trackColor?: string
+  trackValueColor?: string
 }>(), {
   min: 0,
   max: 100,
   step: 1,
   disabled: false,
+  thumbColor: '#9090906e',
+  trackColor: 'gray',
+  trackValueColor: 'red',
 })
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: number): void
-  (e: 'mousedown', event: MouseEvent): void
 }>()
 
-const sliderRef = ref<HTMLElement | null>(null)
+const scaledMin = computed(() => props.min * 10000)
+const scaledMax = computed(() => props.max * 10000)
+const scaledStep = computed(() => props.step * 10000)
 
-function clamp(value: number, min: number, max: number): number {
-  return Math.min(Math.max(value, min), max)
-}
+const sliderRef = ref<HTMLInputElement>()
+const sliderValue = ref(props.modelValue * 10000)
 
-function getStepPrecision(step: number): number {
-  const stepStr = step.toString()
-  if (stepStr.includes('e-')) {
-    return Number.parseInt(stepStr.split('e-')[1], 10)
-  }
-
-  const decimals = stepStr.includes('.') ? stepStr.split('.')[1].length : 0
-  return decimals
-}
-
-function roundToStep(value: number, step: number): number {
-  const precision = getStepPrecision(step)
-  const factor = 10 ** (precision + 3)
-  return Number.parseFloat((value * factor / factor).toFixed(precision))
-}
-
-const currentValue = computed(() => {
-  return roundToStep(clamp(props.modelValue, props.min, props.max), props.step)
+watch(sliderValue, (value) => {
+  emit('update:modelValue', value / 10000)
+  updateTrackColor()
 })
 
-const sliderStyle = computed(() => {
-  const percent = ((currentValue.value - props.min) / (props.max - props.min)) * 100
-  return {
-    width: `${percent}%`,
-    backgroundSize: `${percent}% 100%`,
-  }
+onMounted(() => {
+  updateTrackColor()
 })
 
-function getNewValue(event: MouseEvent) {
+function updateTrackColor() {
   if (!sliderRef.value)
-    return currentValue.value
-
-  const rect = sliderRef.value.getBoundingClientRect()
-  const x = event.clientX - rect.left
-  const percent = x / rect.width
-  const range = props.max - props.min
-  const value = props.min + (range * percent)
-
-  // Round to nearest step
-  const steps = Math.round(value / props.step) * props.step
-  return Math.min(Math.max(steps, props.min), props.max)
-}
-
-function handleMouseMove(event: MouseEvent) {
-  if (props.disabled)
     return
 
-  const newValue = getNewValue(event)
-  emit('update:modelValue', newValue)
+  sliderRef.value.style.setProperty('--value', sliderRef.value.value)
+  sliderRef.value.style.setProperty('--min', !sliderRef.value.min ? props.min.toString() : sliderRef.value.min)
+  sliderRef.value.style.setProperty('--max', !sliderRef.value.max ? props.max.toString() : sliderRef.value.max)
 }
-
-function handleMouseDown(event: MouseEvent) {
-  if (props.disabled)
-    return
-
-  event.preventDefault()
-
-  const newValue = getNewValue(event)
-  emit('update:modelValue', newValue)
-
-  window.addEventListener('mousemove', handleMouseMove)
-  window.addEventListener('mouseup', handleMouseUp)
-}
-
-function handleMouseUp(_: MouseEvent) {
-  window.removeEventListener('mousemove', handleMouseMove)
-  window.removeEventListener('mouseup', handleMouseUp)
-}
-
-// Lifecycle hooks
-onUnmounted(() => {
-  window.removeEventListener('mousemove', handleMouseMove)
-  window.removeEventListener('mouseup', handleMouseUp)
-})
 </script>
 
 <template>
-  <span
+  <input
     ref="sliderRef"
-    class="range-slider disabled:pointer-events-none disabled:cursor-default disabled:opacity-50"
-    :class="{ disabled }"
-    bg="[#e6e1fc] dark:[#676085]" touch-action-none relative inline-block w-full cursor-ew-resize rounded-sm
-    @mousedown="handleMouseDown"
+    v-model="sliderValue"
+    type="range"
+    :min="scaledMin"
+    :max="scaledMax"
+    :step="scaledStep"
+    class="data-gui-range slider-progress"
+    @input="(e) => {
+      (e.target as HTMLInputElement).style.setProperty('--value', (e.target as HTMLInputElement).value)
+    }"
   >
-    <span :style="sliderStyle" bg="[#cabeff] dark:[#4e34b9]" relative block rounded-sm h="[14px]" />
-    <span
-      role="slider"
-      class="slider-thumb"
-      :style="{ left: `${((currentValue - min) / (max - min)) * 100}%` }"
-      absolute rounded-sm w="[1px]" h="[14px]" bg="zinc-100 dark:zinc-400" top="50%" transform="translate-x-[50%] translate-y-[-50%]"
-    />
-  </span>
 </template>
+
+<style scoped>
+/*generated with Input range slider CSS style generator (version 20211225)
+https://toughengineer.github.io/demo/slider-styler*/
+.data-gui-range {
+  --total-height: 3em;
+
+  min-height: var(--total-height);
+  appearance: none;
+  background: transparent;
+  border-radius: 0.5em;
+  transition: background-color 0.2s ease;
+
+  --thumb-width: 4px;
+  --thumb-height: var(--total-height);
+  --thumb-box-shadow: 0 0 2px #8d8d8d;
+  --thumb-border: none;
+  --thumb-border-radius: 999px;
+  --thumb-background: #e2e2e2;
+  --thumb-background-hover: #ffffff;
+  --thumb-background-active: #d7d7d7;
+
+  --track-height: 2em;
+  --track-border-radius: 0.5em;
+  --track-box-shadow: none;
+  --track-background: rgb(144, 144, 144);
+  --track-background-hover: rgb(144, 144, 144);
+  --track-background-active: rgb(144, 144, 144);
+
+  --track-value-background: rgb(255, 255, 255);
+  --track-value-background-hover: rgb(255, 255, 255);
+  --track-value-background-active: rgb(255, 255, 255);
+}
+
+.dark .data-gui-range {
+  --thumb-background: #e2e2e2;
+  --thumb-background-hover: #ffffff;
+  --thumb-background-active: #d7d7d7;
+
+  --track-background: rgb(44, 44, 44);
+  --track-background-hover: rgb(44, 44, 44);
+  --track-background-active: rgb(44, 44, 44);
+
+  --track-value-background: rgb(219, 219, 219);
+  --track-value-background-hover: rgb(219, 219, 219);
+  --track-value-background-active: rgb(219, 219, 219);
+}
+
+/*progress support*/
+.data-gui-range.slider-progress {
+  --range: calc(var(--max) - var(--min));
+  --ratio: calc((var(--value) - var(--min)) / var(--range));
+  --sx: calc(0.5 * 0em + var(--ratio) * (100% - 0em));
+}
+
+.data-gui-range:focus {
+  outline: none;
+}
+
+/*webkit*/
+.data-gui-range::-webkit-slider-thumb {
+  appearance: none;
+  width: var(--thumb-width);
+  height: var(--thumb-height);
+  border-radius: var(--thumb-border-radius);
+  background: var(--thumb-background);
+  border: var(--thumb-border);
+  box-shadow: var(--thumb-box-shadow);
+  transform: translateY(calc(((var(--track-height)) - var(--thumb-height)) / 2));
+  cursor: col-resize;
+  transition:
+    background 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out,
+    border-color 0.2s ease-in-out,
+    transform 0.2s ease-in-out;
+}
+
+.data-gui-range::-webkit-slider-runnable-track {
+  height: var(--track-height);
+  border: none;
+  border-radius: var(--track-border-radius);
+  background: var(--track-background);
+  box-shadow: var(--track-box-shadow);
+  position: relative;
+  cursor: col-resize;
+  transition:
+    box-shadow 0.2s ease-in-out,
+    border-color 0.2s ease-in-out;
+}
+
+.data-gui-range::-webkit-slider-thumb:hover {
+  background: var(--thumb-background-hover);
+}
+
+.data-gui-range:hover::-webkit-slider-runnable-track {
+  background: var(--track-background-hover);
+}
+
+.data-gui-range::-webkit-slider-thumb:active {
+  background: var(--thumb-background-active);
+}
+
+.data-gui-range:active::-webkit-slider-runnable-track {
+  background: var(--track-background-active);
+}
+
+.data-gui-range.slider-progress::-webkit-slider-runnable-track {
+  background:
+    linear-gradient(var(--track-value-background), var(--track-value-background)) 0 / var(--sx) 100% no-repeat,
+    var(--track-background);
+}
+
+.data-gui-range.slider-progress:hover::-webkit-slider-runnable-track {
+  background:
+    linear-gradient(var(--track-value-background-hover), var(--track-value-background-hover)) 0 / var(--sx) 100%
+      no-repeat,
+    var(--track-background-hover);
+}
+
+.data-gui-range.slider-progress:active::-webkit-slider-runnable-track {
+  background:
+    linear-gradient(var(--track-value-background-active), var(--track-value-background-active)) 0 / var(--sx) 100%
+      no-repeat,
+    var(--track-background-active);
+}
+
+/*mozilla*/
+.data-gui-range::-moz-range-thumb {
+  width: var(--thumb-width);
+  height: var(--thumb-height);
+  border-radius: var(--thumb-border-radius);
+  background: var(--thumb-background);
+  border: none;
+  box-shadow: var(--thumb-box-shadow);
+  transform: translateY(calc(((var(--track-height)) - var(--thumb-height)) / 2));
+  cursor: col-resize;
+}
+
+.data-gui-range::-moz-range-track {
+  height: var(--track-height);
+  border: none;
+  border-radius: var(--track-border-radius);
+  background: var(--track-background);
+  box-shadow: var(--track-box-shadow);
+  cursor: col-resize;
+}
+
+.data-gui-range::-moz-range-thumb:hover {
+  background: var(--thumb-background-hover);
+}
+
+.data-gui-range:hover::-moz-range-track {
+  background: var(--track-background-hover);
+}
+
+.data-gui-range::-moz-range-thumb:active {
+  background: var(--thumb-background-active);
+}
+
+.data-gui-range:active::-moz-range-track {
+  background: var(--track-background-active);
+}
+
+.data-gui-range.slider-progress::-moz-range-track {
+  background:
+    linear-gradient(var(--track-value-background), var(--track-value-background)) 0 / var(--sx) 100% no-repeat,
+    var(--track-background);
+}
+
+.data-gui-range.slider-progress:hover::-moz-range-track {
+  background:
+    linear-gradient(var(--track-value-background-hover), var(--track-value-background-hover)) 0 / var(--sx) 100%
+      no-repeat,
+    var(--track-background-hover);
+}
+
+.data-gui-range.slider-progress:active::-moz-range-track {
+  background:
+    linear-gradient(var(--track-value-background-active), var(--track-value-background-active)) 0 / var(--sx) 100%
+      no-repeat,
+    var(--track-background-active);
+}
+
+/*ms*/
+.data-gui-range::-ms-fill-upper {
+  background: transparent;
+  border-color: transparent;
+}
+
+.data-gui-range::-ms-fill-lower {
+  background: transparent;
+  border-color: transparent;
+}
+
+.data-gui-range::-ms-thumb {
+  width: var(--thumb-width);
+  height: var(--thumb-height);
+  border-radius: var(--thumb-border-radius);
+  background: var(--thumb-background);
+  border: none;
+  box-shadow: var(--thumb-box-shadow);
+  transform: translateY(calc(((var(--track-height)) - var(--thumb-height)) / 2));
+  box-sizing: border-box;
+  cursor: col-resize;
+}
+
+.data-gui-range::-ms-track {
+  height: var(--track-height);
+  border-radius: var(--track-border-radius);
+  background: var(--track-background);
+  border: none;
+  box-shadow: var(--track-box-shadow);
+  box-sizing: border-box;
+  cursor: col-resize;
+}
+
+.data-gui-range::-ms-thumb:hover {
+  background: var(--thumb-background-hover);
+}
+
+.data-gui-range:hover::-ms-track {
+  background: var(--track-background-hover);
+}
+
+.data-gui-range::-ms-thumb:active {
+  background: var(--thumb-background-active);
+}
+
+.data-gui-range:active::-ms-track {
+  background: var(--track-background-active);
+}
+
+.data-gui-range.slider-progress::-ms-fill-lower {
+  height: var(--track-height);
+  border-radius: var(--track-border-radius) 0 0 var(--track-border-radius);
+  margin: 0;
+  background: var(--track-value-background);
+  border: none;
+  border-right-width: 0;
+}
+
+.data-gui-range.slider-progress:hover::-ms-fill-lower {
+  background: var(--track-value-background-hover);
+}
+
+.data-gui-range.slider-progress:active::-ms-fill-lower {
+  background: var(--track-value-background-active);
+}
+</style>

packages/stage-ui/src/components/Form/Radio/RadioCardDetail.story.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-import ThemeColorsHueControl from '../../../../stories/ThemeColorsHueControl.vue'
 import RadioCardDetail from './RadioCardDetail.vue'
 
 const modelValue = ref('test')

packages/stage-ui/src/components/Form/Radio/RadioCardSimple.story.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-import ThemeColorsHueControl from '../../../../stories/ThemeColorsHueControl.vue'
 import RadioCardSimple from './RadioCardSimple.vue'
 
 const modelValue = ref('test')

packages/stage-ui/src/components/Menu/IconItem.story.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import ThemeColorsHueControl from '../../../stories/ThemeColorsHueControl.vue'
 import IconItem from './IconItem.vue'
 </script>
 

packages/stage-ui/src/components/Menu/IconStatusItem.story.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import ThemeColorsHueControl from '../../../stories/ThemeColorsHueControl.vue'
 import IconStatusItem from './IconStatusItem.vue'
 </script>
 

packages/stage-ui/stories/setup.ts

@@ -1,3 +1,11 @@
+import { defineSetupVue3 } from '@histoire/plugin-vue'
+
+import ThemeColorsHueControl from './ThemeColorsHueControl.vue'
+
 import 'uno.css'
 import '@unocss/reset/tailwind.css'
 import './main.css'
+
+export const setupVue3 = defineSetupVue3(({ app }) => {
+  app.component('ThemeColorsHueControl', ThemeColorsHueControl)
+})