@proj-airi/ui 0.4.23 → 0.4.26-beta.1

package/dist/components/Form/Range/Range.vue

@@ -31,6 +31,10 @@ function updateTrackColor() {
   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) {
+  const target = e.target;
+  target.style.setProperty("--value", target.value);
+}
 </script>
 
 <template>
@@ -42,9 +46,7 @@ function updateTrackColor() {
     :max="scaledMax"
     :step="scaledStep"
     class="slider-progress form_input-range"
-    @input="(e) => {
-      (e.target as HTMLInputElement).style.setProperty('--value', (e.target as HTMLInputElement).value)
-    }"
+    @input="handleInput"
   >
 </template>
 

package/dist/components/Form/Select/Select.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { Dropdown as VDropdown } from "floating-vue";
+import { computed } from "vue";
+const props = defineProps({
+  options: { type: Array, required: true },
+  placeholder: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  title: { type: String, required: false }
+});
+const modelValue = defineModel({ type: [String, Number], ...{ required: true } });
+const selectedLabel = computed(() => {
+  const selected = props.options.find((opt) => opt.value === modelValue.value);
+  return selected ? selected.label : props.placeholder;
+});
+function selectOption(value) {
+  modelValue.value = value;
+}
+</script>
+
+<template>
+  <VDropdown
+    auto-size
+    auto-boundary-max-size
+  >
+    <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 }"
+    >
+      <div class="flex-1 truncate">
+        <slot :label="selectedLabel">
+          {{ selectedLabel }}
+        </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>
+
+    <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>
+    </template>
+  </VDropdown>
+</template>
+
+<style>
+.resize-observer[data-v-b329ee4c] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: transparent;
+  pointer-events: none;
+  display: block;
+  overflow: hidden;
+  opacity: 0;
+}
+
+.resize-observer[data-v-b329ee4c] object {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.v-popper__popper {
+  z-index: 10000;
+  top: 0;
+  left: 0;
+  outline: none;
+}
+
+.v-popper__arrow-container {
+  display: none;
+}
+
+.v-popper__inner {
+  border: none !important;
+}
+</style>

package/dist/components/Form/Select/index.d.ts

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

package/dist/components/Form/Select/index.mjs

@@ -0,0 +1 @@
+export { default as Select } from "./Select.vue";

package/dist/components/Form/Textarea/Textarea.vue

@@ -6,9 +6,12 @@ const modelValue = defineModel({ type: String, ...{ default: "" } });
 <template>
   <BasicTextarea
     v-model="modelValue"
-    border="neutral-100 dark:neutral-800 solid 2 focus:neutral-200 dark:focus:neutral-700"
-    transition="all duration-250 ease-in-out"
-    bg="neutral-100 dark:neutral-800 focus:neutral-50 dark:focus:neutral-900"
-    rounded-lg px-3 py-2 text-sm outline-none
+    border="focus:primary-300 dark:focus:primary-400/50 2 solid neutral-100 dark:neutral-900"
+    transition="all duration-200 ease-in-out"
+    text="disabled:neutral-400 dark:disabled:neutral-600"
+    cursor="disabled:not-allowed"
+    w-full rounded-lg px-3 py-2 text-sm outline-none
+    shadow="sm"
+    bg="neutral-50 dark:neutral-950 focus:neutral-50 dark:focus:neutral-900"
   />
 </template>

package/dist/components/Form/index.d.ts

@@ -3,4 +3,5 @@ export * from './Field';
 export * from './Input';
 export * from './Radio';
 export * from './Range';
+export * from './Select';
 export * from './Textarea';

package/dist/components/Form/index.mjs

@@ -3,4 +3,5 @@ export * from "./Field/index.mjs";
 export * from "./Input/index.mjs";
 export * from "./Radio/index.mjs";
 export * from "./Range/index.mjs";
+export * from "./Select/index.mjs";
 export * from "./Textarea/index.mjs";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@proj-airi/ui",
   "type": "module",
-  "version": "0.4.23",
+  "version": "0.4.26-beta.1",
   "description": "A collection of UI components that used by Project AIRI",
   "author": {
     "name": "Neko Ayaka",
@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^13.1.0",
+    "floating-vue": "^5.2.2",
     "reka-ui": "^2.2.0",
     "vue": "^3.5.13"
   },

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

@@ -46,6 +46,11 @@ function updateTrackColor() {
   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>
@@ -57,9 +62,7 @@ function updateTrackColor() {
     :max="scaledMax"
     :step="scaledStep"
     class="slider-progress form_input-range"
-    @input="(e) => {
-      (e.target as HTMLInputElement).style.setProperty('--value', (e.target as HTMLInputElement).value)
-    }"
+    @input="handleInput"
   >
 </template>
 

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

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { Dropdown as VDropdown } from 'floating-vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  options: { label: string, value: string | number }[]
+  placeholder?: string
+  disabled?: boolean
+  title?: string
+}>()
+
+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
+})
+
+function selectOption(value: string | number) {
+  modelValue.value = value
+}
+</script>
+
+<template>
+  <VDropdown
+    auto-size
+    auto-boundary-max-size
+  >
+    <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 }"
+    >
+      <div class="flex-1 truncate">
+        <slot :label="selectedLabel">
+          {{ selectedLabel }}
+        </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>
+
+    <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>
+    </template>
+  </VDropdown>
+</template>
+
+<style>
+.resize-observer[data-v-b329ee4c] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: transparent;
+  pointer-events: none;
+  display: block;
+  overflow: hidden;
+  opacity: 0;
+}
+
+.resize-observer[data-v-b329ee4c] object {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.v-popper__popper {
+  z-index: 10000;
+  top: 0;
+  left: 0;
+  outline: none;
+}
+
+.v-popper__arrow-container {
+  display: none;
+}
+
+.v-popper__inner {
+  border: none !important;
+}
+</style>

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

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

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

@@ -7,9 +7,12 @@ const modelValue = defineModel<string>({ default: '' })
 <template>
   <BasicTextarea
     v-model="modelValue"
-    border="neutral-100 dark:neutral-800 solid 2 focus:neutral-200 dark:focus:neutral-700"
-    transition="all duration-250 ease-in-out"
-    bg="neutral-100 dark:neutral-800 focus:neutral-50 dark:focus:neutral-900"
-    rounded-lg px-3 py-2 text-sm outline-none
+    border="focus:primary-300 dark:focus:primary-400/50 2 solid neutral-100 dark:neutral-900"
+    transition="all duration-200 ease-in-out"
+    text="disabled:neutral-400 dark:disabled:neutral-600"
+    cursor="disabled:not-allowed"
+    w-full rounded-lg px-3 py-2 text-sm outline-none
+    shadow="sm"
+    bg="neutral-50 dark:neutral-950 focus:neutral-50 dark:focus:neutral-900"
   />
 </template>

package/src/components/Form/index.ts

@@ -3,4 +3,5 @@ export * from './Field'
 export * from './Input'
 export * from './Radio'
 export * from './Range'
+export * from './Select'
 export * from './Textarea'