@proj-airi/ui 0.4.23

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-PRESENT Neko Ayaka
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/build.config.ts

@@ -0,0 +1,11 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: [
+    { builder: 'mkdist', input: './src/', outDir: './dist/', pattern: '**/*.vue', loaders: ['vue'] },
+    { builder: 'mkdist', input: './src/', outDir: './dist/', pattern: '**/*.ts', format: 'esm', loaders: ['js'] },
+  ],
+  declaration: true,
+  sourcemap: true,
+  clean: true,
+})

package/dist/components/Animations/TransitionVertical.vue

@@ -0,0 +1,95 @@
+<script setup>
+const props = defineProps({
+  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 }
+});
+const closed = "0px";
+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);
+}
+</script>
+
+<template>
+  <Transition :css="false" @enter="enterTransition" @leave="leaveTransition">
+    <slot />
+  </Transition>
+</template>

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

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

package/dist/components/Animations/index.mjs

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

package/dist/components/Form/Checkbox/Checkbox.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { SwitchRoot, SwitchThumb } from "reka-ui";
+const modelValue = defineModel({ type: 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/dist/components/Form/Checkbox/index.d.ts

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

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

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

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

@@ -0,0 +1,24 @@
+<script setup>
+import Checkbox from "../Checkbox/Checkbox.vue";
+const props = defineProps({
+  label: { type: String, required: false },
+  description: { type: String, required: false }
+});
+const modelValue = defineModel({ type: 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/dist/components/Form/Field/FieldInput.vue

@@ -0,0 +1,34 @@
+<script setup>
+import Input from "../Input/Input.vue";
+const props = defineProps({
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  placeholder: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  type: { type: String, required: false },
+  inputClass: { type: String, required: false }
+});
+const modelValue = defineModel({ type: 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>

package/dist/components/Form/Field/FieldKeyValues.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { ref, watch } from "vue";
+import InputKeyValue from "../Input/InputKeyValue.vue";
+const props = defineProps({
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  name: { type: String, required: false },
+  keyPlaceholder: { type: String, required: false },
+  valuePlaceholder: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  inputClass: { type: String, required: false }
+});
+const emit = defineEmits(["remove", "add"]);
+const keyValues = defineModel({ type: Array, ...{ required: true } });
+const inputKey = ref("");
+const inputValue = ref("");
+watch([inputKey, inputValue], () => {
+  emit("add", inputKey.value, inputValue.value);
+});
+</script>
+
+<template>
+  <div max-w-full>
+    <label flex="~ col gap-2">
+      <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>
+      <div v-auto-animate flex="~ col gap-2">
+        <div
+          v-for="(keyValue, index) in keyValues"
+          :key="index"
+          w-full flex items-center gap-2
+        >
+          <InputKeyValue
+            v-model:property-key="keyValue.key"
+            v-model:property-value="keyValue.value"
+            :key-placeholder="props.keyPlaceholder"
+            :value-placeholder="props.valuePlaceholder"
+            w-full
+          />
+          <button @click="emit('remove', index)">
+            <div i-solar:minus-circle-line-duotone size="6" />
+          </button>
+        </div>
+      </div>
+    </label>
+  </div>
+</template>

package/dist/components/Form/Field/FieldRange.vue

@@ -0,0 +1,37 @@
+<script setup>
+import Range from "../Range/Range.vue";
+const props = defineProps({
+  min: { type: Number, required: false },
+  max: { type: Number, required: false },
+  step: { type: Number, required: false },
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  formatValue: { type: Function, required: false }
+});
+const modelValue = defineModel({ type: Number, ...{ 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">
+          {{ label }}
+        </div>
+        <div class="text-xs text-neutral-500 dark:text-neutral-400">
+          {{ description }}
+        </div>
+      </div>
+      <span font-mono>{{ props.formatValue?.(modelValue) || modelValue }}</span>
+    </div>
+    <div flex="~ row" items-center gap-2>
+      <Range
+        v-model="modelValue"
+        :min="min || 0"
+        :max="max || 1"
+        :step="step || 0.01"
+        w-full
+      />
+    </div>
+  </label>
+</template>

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

@@ -0,0 +1,4 @@
+export { default as FieldCheckbox } from './FieldCheckbox.vue';
+export { default as FieldInput } from './FieldInput.vue';
+export { default as FieldKeyValues } from './FieldKeyValues.vue';
+export { default as FieldRange } from './FieldRange.vue';

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

@@ -0,0 +1,4 @@
+export { default as FieldCheckbox } from "./FieldCheckbox.vue";
+export { default as FieldInput } from "./FieldInput.vue";
+export { default as FieldKeyValues } from "./FieldKeyValues.vue";
+export { default as FieldRange } from "./FieldRange.vue";

package/dist/components/Form/Input/Input.vue

@@ -0,0 +1,20 @@
+<script setup>
+const props = defineProps({
+  type: { type: String, required: false }
+});
+const modelValue = defineModel({ type: String, ...{ required: true } });
+</script>
+
+<template>
+  <input
+    v-model="modelValue"
+    :type="props.type || 'text'"
+    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-2 py-1 text-nowrap text-sm outline-none
+    shadow="sm"
+    bg="neutral-50 dark:neutral-950 focus:neutral-50 dark:focus:neutral-900"
+  >
+</template>

package/dist/components/Form/Input/InputFile.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { useDebounce } from "@vueuse/core";
+import { ref } from "vue";
+defineProps({
+  accept: { type: String, required: false },
+  multiple: { type: Boolean, required: false }
+});
+const files = defineModel({ type: Array, ...{ required: false, default: () => [] } });
+const firstFile = ref();
+const isDragging = ref(false);
+const isDraggingDebounced = useDebounce(isDragging, 150);
+function handleFileChange(e) {
+  const input = e.target;
+  if (input.files && input.files.length > 0) {
+    firstFile.value = input.files[0];
+  }
+  files.value = Array.from(input.files || []);
+  isDragging.value = false;
+}
+</script>
+
+<template>
+  <label
+    relative
+    class="min-h-[120px] flex flex-col cursor-pointer items-center justify-center rounded-xl p-6"
+    :class="[
+      isDraggingDebounced ? 'border-primary-400 dark:border-primary-600 hover:border-primary-300 dark:hover:border-primary-700' : 'border-neutral-200 dark:border-neutral-700 hover:border-primary-300 dark:hover:border-primary-700',
+      isDraggingDebounced ? 'bg-primary-50/5 dark:bg-primary-900/5' : 'bg-white/60 dark:bg-black/30 hover:bg-white/80 dark:hover:bg-black/40',
+    ]"
+    border="dashed 2"
+    transition="all duration-300"
+    cursor-pointer opacity-95
+    hover="scale-100 opacity-100 shadow-md dark:shadow-lg"
+    @dragover="isDragging = true"
+    @dragleave="isDragging = false"
+  >
+    <input
+      type="file"
+      :accept="accept"
+      :multiple="multiple"
+      cursor-pointer
+      class="absolute inset-0 h-full w-full opacity-0"
+      @change="handleFileChange"
+    >
+    <slot :is-dragging="isDraggingDebounced" :first-file="firstFile" :files="files">
+      <div
+        class="flex flex-col items-center"
+        :class="[
+          isDraggingDebounced ? 'text-primary-500 dark:text-primary-400' : 'text-neutral-400 dark:text-neutral-500',
+        ]"
+      >
+        <div i-solar:upload-square-line-duotone mb-2 text-5xl />
+        <p font-medium text="center lg">
+          Upload
+        </p>
+        <p v-if="isDraggingDebounced" text="center" text-sm>
+          Release to upload
+        </p>
+        <p v-else text="center" text-sm>
+          Click or drag and drop a file here
+        </p>
+      </div>
+    </slot>
+  </label>
+</template>

package/dist/components/Form/Input/InputKeyValue.vue

@@ -0,0 +1,17 @@
+<script setup>
+import Input from "./Input.vue";
+const props = defineProps({
+  name: { type: String, required: false },
+  keyPlaceholder: { type: String, required: false },
+  valuePlaceholder: { type: String, required: false }
+});
+const key = defineModel("propertyKey", { type: String, ...{ required: true } });
+const value = defineModel("propertyValue", { type: String, ...{ required: true } });
+</script>
+
+<template>
+  <div flex="~ gap-2">
+    <Input v-model="key" :placeholder="props.keyPlaceholder" class="w-1/2" />
+    <Input v-model="value" :placeholder="props.valuePlaceholder" class="w-1/2" />
+  </div>
+</template>

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

@@ -0,0 +1,3 @@
+export { default as Input } from './Input.vue';
+export { default as InputFile } from './InputFile.vue';
+export { default as InputKeyValue } from './InputKeyValue.vue';

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

@@ -0,0 +1,3 @@
+export { default as Input } from "./Input.vue";
+export { default as InputFile } from "./InputFile.vue";
+export { default as InputKeyValue } from "./InputKeyValue.vue";

package/dist/components/Form/Radio/Radio.vue

@@ -0,0 +1,103 @@
+<script setup>
+defineProps({
+  id: { type: String, required: true },
+  name: { type: String, required: true },
+  value: { type: String, required: true },
+  title: { type: String, required: true },
+  deprecated: { type: Boolean, required: false, default: false }
+});
+const modelValue = defineModel({ type: String, ...{ required: true } });
+</script>
+
+<template>
+  <label
+    :key="id"
+    class="form_radio relative flex cursor-pointer items-start rounded-xl p-3 pr-[20px]"
+    transition="all duration-200 ease-in-out"
+    border="2 solid"
+    :class="[
+      modelValue === value
+        ? 'bg-primary-50 dark:bg-primary-900/20 border-primary-100 dark:border-primary-900 hover:border-primary-500/30 dark:hover:border-primary-400/30'
+        : 'bg-white dark:bg-neutral-900/20 border-neutral-100 dark:border-neutral-900 hover:border-primary-500/30 dark:hover:border-primary-400/30',
+      modelValue === value
+        ? 'form_radio-active'
+        : '',
+      deprecated ? 'opacity-60' : '',
+    ]"
+  >
+    <input
+      v-model="modelValue"
+      :checked="modelValue === value"
+      type="radio"
+      :name="name"
+      :value="value"
+      class="absolute opacity-0"
+    >
+    <div class="relative mr-3 mt-0.5 flex-shrink-0">
+      <div
+        class="size-5 border-2 rounded-full transition-colors duration-200"
+        :class="[
+          modelValue === value
+            ? 'border-primary-500 dark:border-primary-400'
+            : 'border-neutral-300 dark:border-neutral-600',
+        ]"
+      >
+        <div
+          class="absolute left-1/2 top-1/2 size-3 rounded-full transition-opacity duration-200 -translate-x-1/2 -translate-y-1/2"
+          :class="[
+            modelValue === value
+              ? 'opacity-100 bg-primary-500 dark:bg-primary-400'
+              : 'opacity-0',
+          ]"
+        />
+      </div>
+    </div>
+    <div class="w-full flex flex-col gap-2">
+      <div class="flex items-center">
+        <span
+          class="line-clamp-1 font-medium"
+          :class="[
+            modelValue === value
+              ? 'text-neutral-700 dark:text-neutral-300'
+              : 'text-neutral-700 dark:text-neutral-400',
+          ]"
+        >
+          {{ title }}
+        </span>
+      </div>
+    </div>
+  </label>
+</template>
+
+<style scoped>
+.form_radio {
+  position: relative;
+  overflow: hidden;
+}
+
+.form_radio::before {
+  --at-apply: 'bg-gradient-to-r from-primary-500/0 to-primary-500/0 dark:from-primary-400/0 dark:to-primary-400/0';
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  width: 25%;
+  height: 100%;
+  transition: all 0.35s ease-in-out;
+  mask-image: linear-gradient(120deg, white 100%);
+  opacity: 0;
+}
+
+.form_radio:hover::before,
+.form_radio._hover::before {
+  --at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent';
+  width: 85%;
+  opacity: 1;
+}
+
+.form_radio-active::before {
+  --at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent';
+  width: 85%;
+  opacity: 0.5;
+}
+</style>

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

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

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

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