@proj-airi/ui 0.6.1 → 0.7.0-alpha.1

package/src/components/Form/Range/RoundRange.vue

@@ -0,0 +1,277 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+
+const props = withDefaults(defineProps<{
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+}>(), {
+  min: 0,
+  max: 100,
+  step: 1,
+  disabled: false,
+})
+
+const modelValue = defineModel<number>({ required: true })
+
+const scaledMin = computed(() => props.min * 10000)
+const scaledMax = computed(() => props.max * 10000)
+const scaledStep = computed(() => props.step * 10000)
+
+const sliderRef = ref<HTMLInputElement>()
+const sliderValue = computed({
+  get: () => modelValue.value * 10000,
+  set: (value: number) => {
+    modelValue.value = value / 10000
+    updateTrackColor()
+  },
+})
+
+onMounted(() => updateTrackColor())
+watch(sliderValue, () => updateTrackColor(), { immediate: true })
+watch([scaledMin, scaledMax, scaledStep], () => updateTrackColor(), { immediate: true })
+
+function updateTrackColor() {
+  if (!sliderRef.value) {
+    return
+  }
+
+  sliderRef.value.style.setProperty('--value', sliderValue.value.toString())
+  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 handleInput(e: Event) {
+  const target = e.target as HTMLInputElement
+  target.style.setProperty('--value', target.value)
+}
+</script>
+
+<template>
+  <input
+    ref="sliderRef"
+    v-model.number="sliderValue"
+    type="range"
+    :min="scaledMin"
+    :max="scaledMax"
+    :step="scaledStep"
+    class="slider-progress form_input-round-range"
+    @input="handleInput"
+  >
+</template>
+
+<style scoped>
+/*generated with Input range slider CSS style generator (version 20211225)
+https://toughengineer.github.io/demo/slider-styler*/
+.form_input-round-range {
+  --height: 2em;
+
+  min-height: var(--height);
+  appearance: none;
+  background: transparent;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+
+  --thumb-width: var(--height);
+  --thumb-height: 0px;
+  --thumb-box-shadow: none;
+  --thumb-border: none;
+  --thumb-border-radius: 0px;
+  --thumb-background: rgb(255, 255, 255);
+
+  --track-height: calc(var(--height) - var(--track-value-padding) * 2);
+  --track-box-shadow: 0 0 12px -2px rgb(0 0 0 / 22%);
+  --track-border: none;
+  --track-border-radius: 10px;
+  --track-background: rgba(0, 0, 0, 0.4);
+
+  --track-value-background: rgb(255, 255, 255);
+  --track-value-padding: 0px;
+}
+
+[data-direction="vertical"].form_input-round-range {
+  transform: rotate(180deg);
+}
+
+.dark .form_input-round-range {
+  --thumb-background: rgb(238, 238, 238);
+
+  --track-border: none;
+  --track-background: rgba(99, 99, 99, 0.7);
+  --track-box-shadow: 0 0 12px -2px rgb(0 0 0 / 22%);
+
+  --track-value-background: rgb(238, 238, 238);
+}
+
+/*progress support*/
+.form_input-round-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));
+}
+
+.form_input-round-range:focus {
+  outline: none;
+}
+
+/*webkit*/
+.form_input-round-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);
+  margin-top: 0px;
+  margin-left: calc(0 - var(--track-value-padding));
+  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 cubic-bezier(0.165, 0.84, 0.44, 1),
+    width 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+[data-direction="vertical"]::-webkit-slider-thumb {
+  cursor: ns-resize;
+}
+
+.form_input-round-range::-webkit-slider-runnable-track {
+  height: var(--track-height);
+  border: var(--track-border);
+  border-radius: var(--track-border-radius);
+  background: var(--track-background);
+  backdrop-filter: blur(4px);
+  box-shadow: var(--track-box-shadow);
+  position: relative;
+  cursor: col-resize;
+  overflow: hidden;
+  transition:
+    box-shadow 0.2s ease-in-out,
+    border-color 0.2s ease-in-out;
+}
+
+[data-direction="vertical"]::-webkit-slider-runnable-track {
+  cursor: ns-resize;
+}
+
+.form_input-round-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-direction="vertical"].form_input-round-range.slider-progress::-webkit-slider-runnable-track {
+  background: linear-gradient(var(--track-value-background) var(--sx), var(--track-background) var(--sx)) no-repeat;
+}
+
+/*mozilla*/
+.form_input-round-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);
+  cursor: col-resize;
+  margin-left: calc(0 - var(--track-value-padding));
+  transition:
+    background 0.2s ease-in-out,
+    box-shadow 0.2s ease-in-out,
+    border-color 0.2s ease-in-out,
+    transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1),
+    width 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+[data-direction="vertical"]::-moz-range-thumb {
+  cursor: ns-resize;
+}
+
+.form_input-round-range::-moz-range-track {
+  height: var(--track-height);
+  border: var(--track-border);
+  border-radius: var(--track-border-radius);
+  background: var(--track-background);
+  backdrop-filter: blur(4px);
+  box-shadow: var(--track-box-shadow);
+  cursor: col-resize;
+  overflow: hidden;
+  /* Trim left and right paddings of track */
+  width: calc(100% - var(--track-value-padding) * 2);
+}
+
+[data-direction="vertical"]::-moz-range-track {
+  cursor: ns-resize;
+}
+
+.form_input-round-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-direction="vertical"].form_input-round-range.slider-progress::-moz-range-track {
+  background: linear-gradient(var(--track-value-background) var(--sx), var(--track-background) var(--sx)) no-repeat;
+}
+
+/*ms*/
+.form_input-round-range::-ms-fill-upper {
+  background: transparent;
+  border-color: transparent;
+}
+
+.form_input-round-range::-ms-fill-lower {
+  background: transparent;
+  border-color: transparent;
+}
+
+.form_input-round-range::-ms-thumb {
+  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);
+  box-sizing: border-box;
+  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 cubic-bezier(0.165, 0.84, 0.44, 1),
+    width 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+[data-direction="vertical"]::-ms-thumb {
+  cursor: ns-resize;
+}
+
+.form_input-round-range::-ms-track {
+  height: var(--track-height);
+  border-radius: var(--track-border-radius);
+  background: var(--track-background);
+  backdrop-filter: blur(4px);
+  border: var(--track-border);
+  box-shadow: var(--track-box-shadow);
+  box-sizing: border-box;
+  cursor: col-resize;
+  overflow: hidden;
+}
+
+[data-direction="vertical"]::-ms-track {
+  cursor: ns-resize;
+}
+
+.form_input-round-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;
+}
+</style>

package/src/components/Form/Range/index.ts

@@ -1,2 +1,3 @@
 export { default as ColorHueRange } from './ColorHueRange.vue'
 export { default as Range } from './Range.vue'
+export { default as RoundRange } from './RoundRange.vue'

package/src/components/Form/Select/Option.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+
+const props = defineProps<{
+  value: string | number
+  label?: string
+  active?: boolean
+}>()
+
+const selectOption = inject('selectOption') as (value: string | number) => void
+const hide = inject('hide') as () => void
+</script>
+
+<template>
+  <div
+    v-bind="{ ...$attrs, class: null, style: null }"
+    class="cursor-pointer rounded px-2 py-1 text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800"
+    line-clamp-1 overflow-hidden text-ellipsis whitespace-pre-wrap text="xs sm:sm" transition-colors duration-150 ease-in-out will-change-background-color will-change-color
+    :class="{ 'bg-neutral-100 dark:bg-neutral-800': props.active }"
+    @click="() => {
+      selectOption(props.value)
+      hide()
+    }"
+  >
+    <slot>
+      {{ props.label }}
+    </slot>
+  </div>
+</template>

package/src/components/Form/Select/Select.vue

@@ -1,57 +1,76 @@
 <script setup lang="ts">
 import { Dropdown as VDropdown } from 'floating-vue'
-import { computed } from 'vue'
+import { provide, ref } from 'vue'
+
+import UIOption from './Option.vue'
 
 const props = defineProps<{
-  options: { label: string, value: string | number }[]
+  options?: { label: string, value: string | number }[]
   placeholder?: string
   disabled?: boolean
   title?: string
+  layout?: 'horizontal' | 'vertical'
 }>()
 
-const modelValue = defineModel<string | number>({ required: true })
-
-const selectedLabel = computed(() => {
-  const selected = props.options.find(opt => opt.value === modelValue.value)
-  return selected ? selected.label : props.placeholder
-})
+const show = ref(false)
+const modelValue = defineModel<string | number>({ required: false })
 
 function selectOption(value: string | number) {
   modelValue.value = value
 }
+
+function handleHide() {
+  show.value = false
+}
+
+provide('selectOption', selectOption)
+provide('hide', handleHide)
 </script>
 
 <template>
   <VDropdown
     auto-size
     auto-boundary-max-size
+    w-full
   >
     <div
-      class="min-w-[160px] flex cursor-pointer items-center justify-between gap-2 border rounded-lg bg-white p-2.5 text-xs text-neutral-700 shadow-sm outline-none transition-colors disabled:cursor-not-allowed dark:border-neutral-800 dark:bg-neutral-900 disabled:bg-neutral-100 hover:bg-neutral-50 dark:text-neutral-200 disabled:text-neutral-400 focus:ring-2 focus:ring-black/10 dark:disabled:bg-neutral-800 dark:hover:bg-neutral-800 dark:disabled:text-neutral-600"
-      :class="{ 'pointer-events-none': props.disabled }"
+      min-w="[160px]" p="2.5" w-full
+      class="focus:ring-2 focus:ring-black/10"
+      border="neutral-300 dark:neutral-800 solid 2 focus:neutral-400 dark:focus:neutral-600"
+      text="xs sm:sm dark:neutral-200 disabled:neutral-400 dark:disabled:neutral-600 neutral-700"
+      bg="white dark:neutral-900 disabled:neutral-100 hover:neutral-50 dark:disabled:neutral-900 dark:hover:neutral-800 "
+      cursor="disabled:not-allowed pointer"
+      flex items-center gap-2 rounded-lg shadow-sm outline-none transition-colors duration-200 ease-in-out
+      :class="[
+        props.disabled ? 'pointer-events-none' : '',
+      ]"
     >
       <div class="flex-1 truncate">
-        <slot :label="selectedLabel">
-          {{ selectedLabel }}
+        <slot :value="modelValue">
+          {{ props.options?.find(item => item.value === modelValue)?.label || modelValue }}
         </slot>
       </div>
-      <div i-solar:alt-arrow-down-bold-duotone class="h-3.5 w-3.5 text-neutral-500 dark:text-neutral-400" />
+      <div i-solar:alt-arrow-down-linear class="h-3.5 w-3.5 text-neutral-500 dark:text-neutral-400" />
     </div>
 
     <template #popper="{ hide }">
-      <div class="min-w-[160px] flex flex-col gap-0.5 border border-neutral-200 rounded-lg bg-white p-1 shadow-lg dark:border-neutral-800 dark:bg-neutral-900">
-        <div
-          v-for="option of props.options"
-          v-bind="{ ...$attrs, class: null, style: null }"
-          :key="option.value"
-          class="cursor-pointer rounded px-2 py-1.5 text-sm text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800"
-          :class="{
-            'bg-neutral-100 dark:bg-neutral-800': modelValue === option.value,
-          }"
-          @click="selectOption(option.value); hide()"
-        >
-          {{ option.label }}
-        </div>
+      <div class="min-w-[160px] flex flex-col gap-0.5 border border-neutral-200 rounded-lg bg-white p-1 shadow-lg dark:border-neutral-800 dark:bg-neutral-900 dark:bg-neutral-900">
+        <slot name="options" :hide="hide">
+          <template v-if="props.options && props.options.length">
+            <UIOption
+              v-for="option of props.options"
+              :key="option.value"
+              :value="option.value"
+              :label="option.label"
+              :active="modelValue === option.value"
+              @click="selectOption(option.value); hide()"
+            />
+          </template>
+
+          <p v-else class="my-3 text-center text-neutral-500 dark:text-neutral-400">
+            No data
+          </p>
+        </slot>
       </div>
     </template>
   </VDropdown>

package/src/components/Form/Select/index.ts

@@ -1 +1,2 @@
+export { default as Option } from './Option.vue'
 export { default as Select } from './Select.vue'

package/src/components/Form/Textarea/Basic.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
+const props = defineProps<{
+  defaultHeight?: string
+}>()
+
 const events = defineEmits<{
   (event: 'submit', message: string): void
 }>()
@@ -26,6 +30,10 @@ watch(input, () => {
   requestAnimationFrame(() => {
     if (!textareaRef.value)
       return
+    if (input.value === '') {
+      textareaHeight.value = props.defaultHeight || 'fit-content'
+      return
+    }
 
     textareaHeight.value = `${textareaRef.value.scrollHeight}px`
   })

package/dist/Animations-DeJoVt_I.mjs

@@ -1,153 +0,0 @@
-import { export_helper_default } from "./export-helper-WDd986Km.mjs";
-import { Transition, createBlock, defineComponent, openBlock, renderSlot, withCtx } from "vue";
-
-//#region src/components/Animations/TransitionVertical.vue?vue&type=script&setup=true&lang.ts
-const closed = "0px";
-var TransitionVertical_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	__name: "TransitionVertical",
-	props: {
-		duration: {
-			type: Number,
-			required: false,
-			default: 250
-		},
-		easingEnter: {
-			type: String,
-			required: false,
-			default: "ease-in-out"
-		},
-		easingLeave: {
-			type: String,
-			required: false,
-			default: "ease-in-out"
-		},
-		opacityClosed: {
-			type: Number,
-			required: false,
-			default: 0
-		},
-		opacityOpened: {
-			type: Number,
-			required: false,
-			default: 1
-		}
-	},
-	setup(__props, { expose: __expose }) {
-		__expose();
-		const props = __props;
-		function getElementStyle(element) {
-			return {
-				height: element.style.height,
-				width: element.style.width,
-				position: element.style.position,
-				visibility: element.style.visibility,
-				overflow: element.style.overflow,
-				paddingTop: element.style.paddingTop,
-				paddingBottom: element.style.paddingBottom,
-				borderTopWidth: element.style.borderTopWidth,
-				borderBottomWidth: element.style.borderBottomWidth,
-				marginTop: element.style.marginTop,
-				marginBottom: element.style.marginBottom
-			};
-		}
-		function prepareElement(element, initialStyle) {
-			const { width } = getComputedStyle(element);
-			element.style.width = width;
-			element.style.position = "absolute";
-			element.style.visibility = "hidden";
-			element.style.height = "";
-			const { height } = getComputedStyle(element);
-			element.style.width = initialStyle.width;
-			element.style.position = initialStyle.position;
-			element.style.visibility = initialStyle.visibility;
-			element.style.height = closed;
-			element.style.overflow = "hidden";
-			return initialStyle.height && initialStyle.height !== closed ? initialStyle.height : height;
-		}
-		function animateTransition(element, initialStyle, done, keyframes, options) {
-			const animation = element.animate(keyframes, options);
-			element.style.height = initialStyle.height;
-			animation.onfinish = () => {
-				element.style.overflow = initialStyle.overflow;
-				done();
-			};
-		}
-		function getEnterKeyframes(height, initialStyle) {
-			return [{
-				height: closed,
-				opacity: props.opacityClosed,
-				paddingTop: closed,
-				paddingBottom: closed,
-				borderTopWidth: closed,
-				borderBottomWidth: closed,
-				marginTop: closed,
-				marginBottom: closed
-			}, {
-				height,
-				opacity: props.opacityOpened,
-				paddingTop: initialStyle.paddingTop,
-				paddingBottom: initialStyle.paddingBottom,
-				borderTopWidth: initialStyle.borderTopWidth,
-				borderBottomWidth: initialStyle.borderBottomWidth,
-				marginTop: initialStyle.marginTop,
-				marginBottom: initialStyle.marginBottom
-			}];
-		}
-		function enterTransition(element, done) {
-			const HTMLElement = element;
-			const initialStyle = getElementStyle(HTMLElement);
-			const height = prepareElement(HTMLElement, initialStyle);
-			const keyframes = getEnterKeyframes(height, initialStyle);
-			const options = {
-				duration: props.duration,
-				easing: props.easingEnter
-			};
-			animateTransition(HTMLElement, initialStyle, done, keyframes, options);
-		}
-		function leaveTransition(element, done) {
-			const HTMLElement = element;
-			const initialStyle = getElementStyle(HTMLElement);
-			const { height } = getComputedStyle(HTMLElement);
-			HTMLElement.style.height = height;
-			HTMLElement.style.overflow = "hidden";
-			const keyframes = getEnterKeyframes(height, initialStyle).reverse();
-			const options = {
-				duration: props.duration,
-				easing: props.easingLeave
-			};
-			animateTransition(HTMLElement, initialStyle, done, keyframes, options);
-		}
-		const __returned__ = {
-			props,
-			closed,
-			getElementStyle,
-			prepareElement,
-			animateTransition,
-			getEnterKeyframes,
-			enterTransition,
-			leaveTransition
-		};
-		Object.defineProperty(__returned__, "__isScriptSetup", {
-			enumerable: false,
-			value: true
-		});
-		return __returned__;
-	}
-});
-
-//#endregion
-//#region src/components/Animations/TransitionVertical.vue
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-	return openBlock(), createBlock(Transition, {
-		css: false,
-		onEnter: $setup.enterTransition,
-		onLeave: $setup.leaveTransition
-	}, {
-		default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-		_: 3
-	});
-}
-var TransitionVertical_default = /* @__PURE__ */ export_helper_default(TransitionVertical_vue_vue_type_script_setup_true_lang_default, [["render", _sfc_render], ["__file", "/home/runner/work/airi/airi/packages/ui/src/components/Animations/TransitionVertical.vue"]]);
-
-//#endregion
-export { TransitionVertical_default };