@proj-airi/ui 0.4.23

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

@@ -0,0 +1,313 @@
+<script setup>
+import { computed, onMounted, ref } from "vue";
+const props = defineProps({
+  min: { type: Number, required: false, default: 0 },
+  max: { type: Number, required: false, default: 100 },
+  step: { type: Number, required: false, default: 1 },
+  disabled: { type: Boolean, required: false, default: false },
+  thumbColor: { type: String, required: false, default: "#9090906e" },
+  trackColor: { type: String, required: false, default: "gray" },
+  trackValueColor: { type: String, required: false, default: "red" }
+});
+const modelValue = defineModel("modelValue", { type: Number, ...{ required: true } });
+const scaledMin = computed(() => props.min * 1e4);
+const scaledMax = computed(() => props.max * 1e4);
+const scaledStep = computed(() => props.step * 1e4);
+const sliderRef = ref();
+const sliderValue = computed({
+  get: () => modelValue.value * 1e4,
+  set: (value) => {
+    modelValue.value = value / 1e4;
+    updateTrackColor();
+  }
+});
+onMounted(() => {
+  updateTrackColor();
+});
+function updateTrackColor() {
+  if (!sliderRef.value)
+    return;
+  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);
+}
+</script>
+
+<template>
+  <input
+    ref="sliderRef"
+    v-model.number="sliderValue"
+    type="range"
+    :min="scaledMin"
+    :max="scaledMax"
+    :step="scaledStep"
+    class="slider-progress form_input-range"
+    @input="(e) => {
+      (e.target as HTMLInputElement).style.setProperty('--value', (e.target as HTMLInputElement).value)
+    }"
+  >
+</template>
+
+<style scoped>
+/*generated with Input range slider CSS style generator (version 20211225)
+https://toughengineer.github.io/demo/slider-styler*/
+.form_input-range {
+  --height: 2em;
+
+  min-height: var(--height);
+  appearance: none;
+  background: transparent;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+
+  --thumb-width: 4px;
+  --thumb-height: var(--height);
+  --thumb-box-shadow: 0 0 0px #e6e6e6;
+  --thumb-border: none;
+  --thumb-border-radius: 999px;
+  --thumb-background: oklch(80% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
+  --thumb-background-hover: oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
+  --thumb-background-active: oklch(70% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
+
+  --track-height: calc(var(--height) - var(--track-value-padding) * 2);
+  --track-box-shadow: none;
+  --track-border: solid 2px rgb(238, 238, 238);
+  --track-border-radius: 6px;
+  --track-background: rgb(238, 238, 238);
+  --track-background-hover: rgb(238, 238, 238);
+  --track-background-active: rgb(238, 238, 238);
+
+  --track-value-background: rgb(255, 255, 255);
+  --track-value-background-hover: rgb(255, 255, 255);
+  --track-value-background-active: rgb(255, 255, 255);
+  --track-value-padding: 2px;
+}
+
+.dark .form_input-range {
+  --thumb-background: oklch(70% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
+  --thumb-background-hover: oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
+  --thumb-background-active: oklch(80% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + 0));
+
+  --track-border: solid 2px rgb(44, 44, 44);
+  --track-background: rgb(44, 44, 44);
+  --track-background-hover: rgb(44, 44, 44);
+  --track-background-active: rgb(44, 44, 44);
+
+  --track-value-background: rgb(164, 164, 164);
+  --track-value-background-hover: rgb(164, 164, 164);
+  --track-value-background-active: rgb(164, 164, 164);
+}
+
+/*progress support*/
+.form_input-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-range:focus {
+  outline: none;
+}
+
+/*webkit*/
+.form_input-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: calc(var(--track-height) * 0.5 - var(--thumb-height) * 0.5 - 2px);
+  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 ease-in-out;
+}
+
+.form_input-range::-webkit-slider-runnable-track {
+  height: var(--track-height);
+  border: var(--track-border);
+  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;
+}
+
+.form_input-range::-webkit-slider-thumb:hover {
+  background: var(--thumb-background-hover);
+}
+
+.form_input-range:hover::-webkit-slider-runnable-track {
+  background: var(--track-background-hover);
+}
+
+.form_input-range::-webkit-slider-thumb:active {
+  background: var(--thumb-background-active);
+}
+
+.form_input-range:active::-webkit-slider-runnable-track {
+  background: var(--track-background-active);
+}
+
+.form_input-range.slider-progress::-webkit-slider-runnable-track {
+  /* margin-left: var(--track-value-padding); */
+  margin-right: calc(0 - var(--track-value-padding));
+  background:
+    linear-gradient(var(--track-value-background), var(--track-value-background)) 0 / var(--sx) 100% no-repeat,
+    var(--track-background);
+}
+
+.form_input-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);
+}
+
+.form_input-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*/
+.form_input-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));
+}
+
+.form_input-range::-moz-range-track {
+  height: var(--track-height);
+  border: var(--track-border);
+  border-radius: var(--track-border-radius);
+  background: var(--track-background);
+  box-shadow: var(--track-box-shadow);
+  cursor: col-resize;
+  /* Trim left and right paddings of track */
+  width: calc(100% - var(--track-value-padding) * 2);
+}
+
+.form_input-range::-moz-range-thumb:hover {
+  background: var(--thumb-background-hover);
+}
+
+.form_input-range:hover::-moz-range-track {
+  background: var(--track-background-hover);
+}
+
+.form_input-range::-moz-range-thumb:active {
+  background: var(--thumb-background-active);
+}
+
+.form_input-range:active::-moz-range-track {
+  background: var(--track-background-active);
+}
+
+.form_input-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);
+}
+
+.form_input-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);
+}
+
+.form_input-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*/
+.form_input-range::-ms-fill-upper {
+  background: transparent;
+  border-color: transparent;
+}
+
+.form_input-range::-ms-fill-lower {
+  background: transparent;
+  border-color: transparent;
+}
+
+.form_input-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);
+  /** Center thumb */
+  margin-top: 0;
+  /** Shift left thumb */
+  margin-left: calc(0 - var(--track-value-padding));
+  box-sizing: border-box;
+  cursor: col-resize;
+}
+
+.form_input-range::-ms-track {
+  height: var(--track-height);
+  border-radius: var(--track-border-radius);
+  background: var(--track-background);
+  border: var(--track-border);
+  box-shadow: var(--track-box-shadow);
+  box-sizing: border-box;
+  cursor: col-resize;
+}
+
+.form_input-range::-ms-thumb:hover {
+  background: var(--thumb-background-hover);
+}
+
+.form_input-range:hover::-ms-track {
+  background: var(--track-background-hover);
+}
+
+.form_input-range::-ms-thumb:active {
+  background: var(--thumb-background-active);
+}
+
+.form_input-range:active::-ms-track {
+  background: var(--track-background-active);
+}
+
+.form_input-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;
+  /** Shift left thumb */
+  margin-left: calc(var(--track-value-padding));
+  /** Shift right thumb */
+  margin-right: calc(0 - var(--track-value-padding));
+}
+
+.form_input-range.slider-progress:hover::-ms-fill-lower {
+  background: var(--track-value-background-hover);
+}
+
+.form_input-range.slider-progress:active::-ms-fill-lower {
+  background: var(--track-value-background-active);
+}
+</style>

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

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

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

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

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

@@ -0,0 +1,32 @@
+<script setup>
+import { ref, watch } from "vue";
+const events = defineEmits(["submit"]);
+const input = defineModel({ type: String, ...{
+  default: ""
+} });
+const textareaRef = ref();
+const textareaHeight = ref("auto");
+function onKeyDown(e) {
+  if (e.code === "Enter" && !e.shiftKey) {
+    e.preventDefault();
+    events("submit", input.value);
+  }
+}
+watch(input, () => {
+  textareaHeight.value = "auto";
+  requestAnimationFrame(() => {
+    if (!textareaRef.value)
+      return;
+    textareaHeight.value = `${textareaRef.value.scrollHeight}px`;
+  });
+}, { immediate: true });
+</script>
+
+<template>
+  <textarea
+    ref="textareaRef"
+    v-model="input"
+    :style="{ height: textareaHeight }"
+    @keydown="onKeyDown"
+  />
+</template>

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

@@ -0,0 +1,14 @@
+<script setup>
+import BasicTextarea from "./Basic.vue";
+const modelValue = defineModel({ type: String, ...{ default: "" } });
+</script>
+
+<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
+  />
+</template>

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

@@ -0,0 +1,2 @@
+export { default as BasicTextarea } from './Basic.vue';
+export { default as Textarea } from './Textarea.vue';

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

@@ -0,0 +1,2 @@
+export { default as BasicTextarea } from "./Basic.vue";
+export { default as Textarea } from "./Textarea.vue";

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

@@ -0,0 +1,6 @@
+export * from './Checkbox';
+export * from './Field';
+export * from './Input';
+export * from './Radio';
+export * from './Range';
+export * from './Textarea';

package/dist/components/Form/index.mjs

@@ -0,0 +1,6 @@
+export * from "./Checkbox/index.mjs";
+export * from "./Field/index.mjs";
+export * from "./Input/index.mjs";
+export * from "./Radio/index.mjs";
+export * from "./Range/index.mjs";
+export * from "./Textarea/index.mjs";

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/Animations';
+export * from './components/Form';

package/dist/index.mjs

@@ -0,0 +1,2 @@
+export * from "./components/Animations/index.mjs";
+export * from "./components/Form/index.mjs";

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@proj-airi/ui",
+  "type": "module",
+  "version": "0.4.23",
+  "description": "A collection of UI components that used by Project AIRI",
+  "author": {
+    "name": "Neko Ayaka",
+    "email": "neko@ayaka.moe",
+    "url": "https://github.com/nekomeowww"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/moeru-ai/airi.git",
+    "directory": "packages/ui"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    },
+    "./components/animations": {
+      "types": "./dist/components/Animations/index.d.ts",
+      "import": "./dist/components/Animations/index.mjs"
+    },
+    "./components/form": {
+      "types": "./dist/components/Form/index.d.ts",
+      "import": "./dist/components/Form/index.mjs"
+    }
+  },
+  "dependencies": {
+    "@vueuse/core": "^13.1.0",
+    "reka-ui": "^2.2.0",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@vue-macros/volar": "3.0.0-beta.8",
+    "vue-tsc": "^3.0.0-alpha.4"
+  },
+  "scripts": {
+    "dev": "pnpm run stub",
+    "stub": "unbuild --stub",
+    "build": "unbuild",
+    "typecheck": "vue-tsc --noEmit"
+  }
+}

package/src/components/Animations/TransitionVertical.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+// From: https://stackoverflow.com/a/71426342/22392721
+interface Props {
+  duration?: number
+  easingEnter?: string
+  easingLeave?: string
+  opacityClosed?: number
+  opacityOpened?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  duration: 250,
+  easingEnter: 'ease-in-out',
+  easingLeave: 'ease-in-out',
+  opacityClosed: 0,
+  opacityOpened: 1,
+})
+
+const closed = '0px'
+
+interface initialStyle {
+  height: string
+  width: string
+  position: string
+  visibility: string
+  overflow: string
+  paddingTop: string
+  paddingBottom: string
+  borderTopWidth: string
+  borderBottomWidth: string
+  marginTop: string
+  marginBottom: string
+}
+
+function getElementStyle(element: HTMLElement) {
+  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: HTMLElement, initialStyle: 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: HTMLElement,
+  initialStyle: initialStyle,
+  done: () => void,
+  keyframes: Keyframe[] | PropertyIndexedKeyframes | null,
+  options?: number | KeyframeAnimationOptions,
+) {
+  const animation = element.animate(keyframes, options)
+  // Set height to 'auto' to restore it after animation
+  element.style.height = initialStyle.height
+  animation.onfinish = () => {
+    element.style.overflow = initialStyle.overflow
+    done()
+  }
+}
+
+function getEnterKeyframes(height: string, initialStyle: 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: Element, done: () => void) {
+  const HTMLElement = element as HTMLElement
+  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: Element, done: () => void) {
+  const HTMLElement = element as HTMLElement
+  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)
+}
+</script>
+
+<template>
+  <Transition :css="false" @enter="enterTransition" @leave="leaveTransition">
+    <slot />
+  </Transition>
+</template>

package/src/components/Animations/index.ts

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

package/src/components/Form/Checkbox/Checkbox.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { SwitchRoot, SwitchThumb } from 'reka-ui'
+
+const modelValue = defineModel<boolean>({ required: true })
+</script>
+
+<template>
+  <SwitchRoot
+    v-model="modelValue"
+    transition="background duration-250 ease-in-out"
+    outline="focus-within:none"
+    flex="~"
+    border="neutral-300 dark:neutral-700 data-[state=checked]:primary-200 data-[state=unchecked]:neutral-300 focus-within:neutral-800"
+    bg="data-[state=checked]:primary-400 data-[state=unchecked]:neutral-300 data-[state=checked]:dark:primary-400/80 dark:data-[state=unchecked]:neutral-800"
+    relative h-7 w="12.5" rounded-full
+    shadow="sm focus-within:shadow-neutral-800 focus-within:[0_0_0_1px] "
+  >
+    <SwitchThumb
+      my-auto size-6
+      flex items-center justify-center
+      translate-x="0.5 data-[state=checked]:full"
+      rounded-full bg-white text-xs shadow-xl
+      transition="transform duration-250 ease-in-out"
+      will-change-transform
+    />
+  </SwitchRoot>
+</template>

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

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

package/src/components/Form/Field/FieldCheckbox.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import Checkbox from '../Checkbox/Checkbox.vue'
+
+const props = defineProps<{
+  label?: string
+  description?: string
+}>()
+
+const modelValue = defineModel<boolean>({ required: true })
+</script>
+
+<template>
+  <label flex="~ col gap-4">
+    <div flex="~ row" items-center gap-2>
+      <div flex="1">
+        <div class="flex items-center gap-1 text-sm font-medium">
+          {{ props.label }}
+        </div>
+        <div class="text-xs text-neutral-500 dark:text-neutral-400">
+          {{ props.description }}
+        </div>
+      </div>
+      <Checkbox v-model="modelValue" />
+    </div>
+  </label>
+</template>

package/src/components/Form/Field/FieldInput.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import Input from '../Input/Input.vue'
+
+const props = defineProps<{
+  label?: string
+  description?: string
+  placeholder?: string
+  required?: boolean
+  type?: string
+  inputClass?: string
+}>()
+
+const modelValue = defineModel<string>({ required: true })
+</script>
+
+<template>
+  <div max-w-full>
+    <label flex="~ col gap-4">
+      <div>
+        <div class="flex items-center gap-1 text-sm font-medium">
+          {{ props.label }}
+          <span v-if="props.required !== false" class="text-red-500">*</span>
+        </div>
+        <div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
+          {{ props.description }}
+        </div>
+      </div>
+      <Input
+        v-model="modelValue"
+        :type="props.type"
+        :placeholder="props.placeholder"
+        :class="props.inputClass"
+      />
+    </label>
+  </div>
+</template>