@proj-airi/ui 0.4.23

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

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+import InputKeyValue from '../Input/InputKeyValue.vue'
+
+const props = defineProps<{
+  label?: string
+  description?: string
+  name?: string
+  keyPlaceholder?: string
+  valuePlaceholder?: string
+  required?: boolean
+  inputClass?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'remove', index: number): void
+  (e: 'add', key: string, value: string): void
+}>()
+
+const keyValues = defineModel<{ key: string, value: string }[]>({ 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/src/components/Form/Field/FieldRange.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import Range from '../Range/Range.vue'
+
+const props = defineProps<{
+  min?: number
+  max?: number
+  step?: number
+  label?: string
+  description?: string
+  formatValue?: (value: number) => string
+}>()
+
+const modelValue = defineModel<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/src/components/Form/Field/index.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/src/components/Form/Input/Input.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const props = defineProps<{
+  type?: string
+}>()
+
+const modelValue = defineModel<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/src/components/Form/Input/InputFile.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { useDebounce } from '@vueuse/core'
+import { ref } from 'vue'
+
+defineProps<{
+  accept?: string
+  multiple?: boolean
+}>()
+
+const files = defineModel<File[]>({ required: false, default: () => [] })
+const firstFile = ref<File>()
+
+const isDragging = ref(false)
+const isDraggingDebounced = useDebounce(isDragging, 150)
+
+function handleFileChange(e: Event) {
+  const input = e.target as HTMLInputElement
+
+  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/src/components/Form/Input/InputKeyValue.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import Input from './Input.vue'
+
+const props = defineProps<{
+  name?: string
+  keyPlaceholder?: string
+  valuePlaceholder?: string
+}>()
+
+const key = defineModel<string>('propertyKey', { required: true })
+const value = defineModel<string>('propertyValue', { 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/src/components/Form/Input/index.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/src/components/Form/Radio/Radio.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  id: string
+  name: string
+  value: string
+  title: string
+  deprecated?: boolean
+}>(), {
+  deprecated: false,
+})
+
+const modelValue = defineModel<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/src/components/Form/Radio/index.ts

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

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

@@ -0,0 +1,328 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+const props = withDefaults(defineProps<{
+  min?: number
+  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 modelValue = defineModel<number>('modelValue', { 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()
+})
+
+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/src/components/Form/Range/index.ts

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