@1001-digital/components 0.0.4 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1001-digital/components",
-  "version": "0.0.4",
+  "version": "1.0.0",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -13,12 +13,16 @@
     "src"
   ],
   "peerDependencies": {
+    "@wagmi/core": ">=3.0.0",
     "@wagmi/vue": ">=0.5.0",
     "viem": ">=2.0.0",
     "vue": "^3.5.0",
-    "@1001-digital/styles": "^0.0.2"
+    "@1001-digital/styles": "^1.0.0"
   },
   "peerDependenciesMeta": {
+    "@wagmi/core": {
+      "optional": true
+    },
     "@wagmi/vue": {
       "optional": true
     },
@@ -28,6 +32,8 @@
   },
   "dependencies": {
     "@iconify/vue": "^5.0.0",
+    "@internationalized/date": "^3.8.0",
+    "@visualizevalue/opepicons": "^0.1.0",
     "@vueuse/core": "^14.2.0",
     "luxon": "^3.7.0",
     "qrcode": "^1.5.4",
@@ -36,6 +42,9 @@
   "devDependencies": {
     "@types/luxon": "^3.7.0",
     "@types/qrcode": "^1.5.6",
+    "@wagmi/core": "^3.4.0",
+    "@wagmi/vue": "^0.5.0",
+    "viem": "^2.45.0",
     "vue": "^3.5.0"
   }
 }

package/src/base/components/Button.vue

@@ -78,7 +78,7 @@ const linkProps = computed(() => {
       transition: color var(--speed);
     }
 
-    &:has(> .icon:first-child) {
+    &:has(> :is(.icon, img):first-child) {
       padding-inline-start: calc(var(--ui-padding-inline) - var(--size-1));
 
       &.small {
@@ -86,7 +86,7 @@ const linkProps = computed(() => {
       }
     }
 
-    &:has(> .icon:first-child:last-child) {
+    &:has(> :is(.icon, img):first-child:last-child) {
       padding: var(--ui-padding-block);
       aspect-ratio: 1;
 

package/src/base/components/Calendar.vue

@@ -0,0 +1,227 @@
+<template>
+  <CalendarRoot
+    v-model="model"
+    v-model:placeholder="placeholderValue"
+    v-slot="{ grid, weekDays }"
+    :disabled="disabled"
+    :readonly="readonly"
+    :multiple="multiple"
+    :locale="locale"
+    :week-starts-on="weekStartsOn"
+    :min-value="minValue"
+    :max-value="maxValue"
+    :is-date-disabled="isDateDisabled"
+    :is-date-unavailable="isDateUnavailable"
+    :number-of-months="numberOfMonths"
+    :fixed-weeks="fixedWeeks"
+    class="calendar"
+  >
+    <CalendarHeader class="calendar-header">
+      <CalendarPrev class="calendar-nav">
+        <Icon type="chevron-left" />
+      </CalendarPrev>
+      <CalendarHeading class="calendar-heading" />
+      <CalendarNext class="calendar-nav">
+        <Icon type="chevron-right" />
+      </CalendarNext>
+    </CalendarHeader>
+
+    <div class="calendar-grids">
+      <CalendarGrid
+        v-for="month in grid"
+        :key="month.value.toString()"
+        :value="month"
+        class="calendar-grid"
+      >
+        <CalendarGridHead>
+          <CalendarGridRow class="calendar-grid-row">
+            <CalendarHeadCell
+              v-for="day in weekDays"
+              :key="day"
+              class="calendar-head-cell"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+
+        <CalendarGridBody>
+          <CalendarGridRow
+            v-for="(row, i) in month.rows"
+            :key="i"
+            class="calendar-grid-row"
+          >
+            <CalendarCell
+              v-for="date in row"
+              :key="date.toString()"
+              :date="date"
+              class="calendar-cell"
+            >
+              <CalendarCellTrigger
+                :day="date"
+                :month="month.value"
+                class="calendar-cell-trigger"
+              />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { DateValue } from '@internationalized/date'
+import {
+  CalendarCell,
+  CalendarCellTrigger,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHead,
+  CalendarGridRow,
+  CalendarHeadCell,
+  CalendarHeader,
+  CalendarHeading,
+  CalendarNext,
+  CalendarPrev,
+  CalendarRoot,
+} from 'reka-ui'
+import Icon from './Icon.vue'
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+    readonly?: boolean
+    multiple?: boolean
+    locale?: string
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
+    minValue?: DateValue
+    maxValue?: DateValue
+    isDateDisabled?: (date: DateValue) => boolean
+    isDateUnavailable?: (date: DateValue) => boolean
+    numberOfMonths?: number
+    fixedWeeks?: boolean
+    placeholder?: DateValue
+  }>(),
+  {
+    locale: 'en',
+    numberOfMonths: 1,
+  },
+)
+
+const model = defineModel<DateValue | DateValue[] | undefined>()
+const placeholderValue = ref(props.placeholder) as ReturnType<typeof ref<DateValue | undefined>>
+</script>
+
+<style scoped>
+@layer components {
+  .calendar {
+    display: grid;
+    gap: var(--spacer-sm);
+  }
+
+  .calendar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacer-sm);
+  }
+
+  .calendar-heading {
+    font-family: var(--font-family);
+    font-size: var(--ui-font-size);
+    text-transform: var(--ui-text-transform);
+    font-weight: 500;
+  }
+
+  .calendar-nav {
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    block-size: var(--calendar-nav-size);
+    inline-size: var(--calendar-nav-size);
+    border-radius: var(--calendar-cell-border-radius);
+
+    &:hover {
+      background: var(--calendar-hover-background);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .calendar-grids {
+    display: flex;
+    gap: var(--spacer);
+  }
+
+  .calendar-grid {
+    border-collapse: collapse;
+  }
+
+  .calendar-grid-row {
+    display: flex;
+  }
+
+  .calendar-head-cell {
+    font-family: var(--font-family);
+    font-size: var(--font-xs);
+    text-transform: var(--ui-text-transform);
+    color: var(--muted);
+    inline-size: var(--calendar-cell-size);
+    block-size: var(--calendar-cell-size);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .calendar-cell {
+    padding: 1px;
+  }
+
+  .calendar-cell-trigger {
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--calendar-cell-size);
+    block-size: var(--calendar-cell-size);
+    border-radius: var(--calendar-cell-border-radius);
+    font-size: var(--font-sm);
+    cursor: pointer;
+
+    &:hover {
+      background: var(--calendar-hover-background);
+    }
+
+    &[data-selected] {
+      background: var(--calendar-selected-background);
+      color: var(--calendar-selected-color);
+    }
+
+    &[data-today]:not([data-selected]) {
+      border: var(--calendar-today-border);
+    }
+
+    &[data-outside-month] {
+      opacity: 0.3;
+    }
+
+    &[data-unavailable] {
+      opacity: 0.3;
+      text-decoration: line-through;
+      cursor: not-allowed;
+    }
+
+    &[data-disabled] {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+  }
+}
+</style>

package/src/base/components/Combobox.vue

@@ -0,0 +1,241 @@
+<template>
+  <ComboboxRoot
+    v-model="model"
+    v-model:open="open"
+    class="combobox-root"
+    :multiple="multiple"
+    :disabled="disabled"
+    :name="name"
+    :reset-search-term-on-blur="resetSearchTermOnBlur"
+    :reset-search-term-on-select="resetSearchTermOnSelect"
+  >
+    <ComboboxAnchor class="combobox-anchor">
+      <ComboboxInput
+        class="combobox-input"
+        :placeholder="placeholder"
+        :display-value="resolveDisplayValue"
+        :disabled="disabled"
+      />
+      <ComboboxTrigger class="combobox-trigger">
+        <Icon type="chevron-down" />
+      </ComboboxTrigger>
+    </ComboboxAnchor>
+
+    <ComboboxPortal>
+      <ComboboxContent
+        position="popper"
+        :side-offset="4"
+        class="combobox-content"
+      >
+        <ComboboxViewport class="combobox-viewport">
+          <ComboboxEmpty class="combobox-empty">
+            {{ emptyText }}
+          </ComboboxEmpty>
+          <ComboboxItem
+            v-for="option in options"
+            :key="option[valueKey]"
+            :value="option[valueKey]"
+            class="combobox-item"
+          >
+            {{ option[labelKey] }}
+            <ComboboxItemIndicator class="combobox-indicator">
+              <Icon type="check" />
+            </ComboboxItemIndicator>
+          </ComboboxItem>
+        </ComboboxViewport>
+      </ComboboxContent>
+    </ComboboxPortal>
+  </ComboboxRoot>
+</template>
+
+<script setup lang="ts">
+import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxPortal,
+  ComboboxRoot,
+  ComboboxTrigger,
+  ComboboxViewport,
+} from 'reka-ui'
+import Icon from './Icon.vue'
+
+const model = defineModel<string | string[]>()
+const open = defineModel<boolean>('open', { default: false })
+
+const props = withDefaults(
+  defineProps<{
+    options?: Record<string, any>[]
+    placeholder?: string
+    multiple?: boolean
+    disabled?: boolean
+    valueKey?: string
+    labelKey?: string
+    name?: string
+    emptyText?: string
+    resetSearchTermOnBlur?: boolean
+    resetSearchTermOnSelect?: boolean
+  }>(),
+  {
+    options: () => [],
+    placeholder: 'Search...',
+    valueKey: 'value',
+    labelKey: 'label',
+    emptyText: 'No results found.',
+    resetSearchTermOnBlur: true,
+    resetSearchTermOnSelect: true,
+  },
+)
+
+const resolveLabel = (v: any) => {
+  const option = props.options.find(o => o[props.valueKey] === v)
+  return option ? String(option[props.labelKey]) : String(v)
+}
+
+const resolveDisplayValue = (val: any) => {
+  if (Array.isArray(val)) return val.map(resolveLabel).join(', ')
+  return resolveLabel(val)
+}
+</script>
+
+<style>
+@layer components {
+  .combobox-root {
+    inline-size: 100%;
+  }
+
+  .combobox-anchor {
+    display: flex;
+    align-items: center;
+    gap: var(--size-1);
+    background: var(--combobox-background);
+    border-radius: var(--combobox-border-radius);
+    box-shadow: var(--border-shadow);
+    padding-inline-end: var(--size-2);
+    transition: box-shadow var(--speed);
+
+    &:focus-within {
+      box-shadow: var(--border-shadow-highlight);
+    }
+
+    &[data-disabled] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .combobox-input {
+    all: unset;
+    flex: 1;
+    padding: var(--size-2) var(--size-3);
+    font-family: var(--font-family);
+    font-size: var(--ui-font-size);
+    color: var(--color);
+    min-inline-size: 0;
+
+    &::placeholder {
+      color: var(--muted);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  .combobox-trigger {
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--muted);
+    cursor: pointer;
+    transition: transform var(--speed);
+
+    [data-state='open'] > & {
+      transform: rotate(180deg);
+    }
+
+    &[data-disabled] {
+      cursor: not-allowed;
+    }
+  }
+
+  .combobox-content {
+    background: var(--combobox-background);
+    border: var(--combobox-border);
+    border-radius: var(--combobox-border-radius);
+    box-shadow: var(--shadow-lg);
+    z-index: var(--z-index-dropdown);
+    min-inline-size: var(--reka-combobox-trigger-width);
+    max-block-size: var(--reka-combobox-content-available-height);
+    overflow: hidden;
+
+    /* Entry/exit animations */
+    opacity: 1;
+    scale: 1;
+    transition:
+      opacity var(--speed) ease,
+      scale var(--speed) ease;
+
+    @starting-style {
+      opacity: 0;
+      scale: 0.95;
+    }
+
+    &[data-state='closed'] {
+      opacity: 0;
+      scale: 0.95;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .combobox-viewport {
+    padding: var(--combobox-padding);
+  }
+
+  .combobox-empty {
+    padding: var(--size-2) var(--size-3);
+    color: var(--muted);
+    font-family: var(--font-family);
+    font-size: var(--ui-font-size);
+    user-select: none;
+  }
+
+  .combobox-item {
+    padding: var(--size-2) var(--size-3);
+    border-radius: calc(var(--combobox-border-radius) / 2);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--size-2);
+    cursor: pointer;
+    outline: none;
+    user-select: none;
+    font-family: var(--font-family);
+    font-size: var(--ui-font-size);
+
+    &[data-highlighted] {
+      background: var(--button-background-highlight);
+    }
+
+    &[data-state='checked'] {
+      font-weight: 500;
+    }
+
+    &[data-disabled] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .combobox-indicator {
+    color: var(--accent);
+  }
+}
+</style>

package/src/base/components/ConfirmDialog.vue

@@ -0,0 +1,33 @@
+<template>
+  <Dialog
+    v-model:open="open"
+    :title="state?.title"
+    :closable="false"
+    :click-outside="false"
+  >
+    <p v-if="state?.description">{{ state.description }}</p>
+
+    <template #footer>
+      <Button class="tertiary" @click="resolve(false)">
+        {{ state?.cancelText || 'Cancel' }}
+      </Button>
+      <Button @click="resolve(true)">
+        {{ state?.okText || 'OK' }}
+      </Button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import Dialog from './Dialog.vue'
+import Button from './Button.vue'
+import { useConfirm } from '../composables/confirm'
+
+const { state, resolve } = useConfirm()
+
+const open = computed({
+  get: () => !!state.value,
+  set: () => resolve(false),
+})
+</script>

package/src/base/components/Dialog.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onBeforeUnmount } from 'vue'
 import Icon from './Icon.vue'
 
 const dialog = ref<HTMLDialogElement | null>(null)
@@ -123,6 +123,12 @@ const onClickOutside = () => {
     open.value = false
   }
 }
+
+onBeforeUnmount(() => {
+  if (!props.compat && dialog.value) {
+    dialog.value.close()
+  }
+})
 </script>
 
 <style>

package/src/base/components/FormDateField.vue

@@ -0,0 +1,111 @@
+<template>
+  <DateFieldRoot
+    v-model="model"
+    v-model:placeholder="placeholderValue"
+    v-slot="{ segments }"
+    :disabled="disabled"
+    :readonly="readonly"
+    :granularity="granularity"
+    :locale="locale"
+    :min-value="minValue"
+    :max-value="maxValue"
+    :is-date-unavailable="isDateUnavailable"
+    :hour-cycle="hourCycle"
+    :name="name"
+    :required="required"
+    class="form-date-field"
+  >
+    <template
+      v-for="segment in segments"
+      :key="segment.part"
+    >
+      <DateFieldInput
+        v-if="segment.part === 'literal'"
+        :part="segment.part"
+        class="form-date-field-literal"
+      >
+        {{ segment.value }}
+      </DateFieldInput>
+      <DateFieldInput
+        v-else
+        :part="segment.part"
+        class="form-date-field-segment"
+      >
+        {{ segment.value }}
+      </DateFieldInput>
+    </template>
+  </DateFieldRoot>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { DateValue } from '@internationalized/date'
+import {
+  DateFieldInput,
+  DateFieldRoot,
+} from 'reka-ui'
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+    readonly?: boolean
+    granularity?: 'day' | 'hour' | 'minute' | 'second'
+    locale?: string
+    minValue?: DateValue
+    maxValue?: DateValue
+    isDateUnavailable?: (date: DateValue) => boolean
+    hourCycle?: 12 | 24
+    name?: string
+    required?: boolean
+    placeholder?: DateValue
+  }>(),
+  {
+    locale: 'en',
+    granularity: 'day',
+  },
+)
+
+const model = defineModel<DateValue | undefined>()
+const placeholderValue = ref(props.placeholder) as ReturnType<typeof ref<DateValue | undefined>>
+</script>
+
+<style scoped>
+@layer components {
+  .form-date-field {
+    display: inline-flex;
+    align-items: center;
+    background: var(--date-field-background);
+    block-size: var(--form-item-height);
+    padding-inline: var(--ui-padding-inline);
+    box-shadow: var(--border-shadow);
+    border-radius: var(--border-radius);
+    font-size: var(--font-sm);
+
+    &[data-disabled] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .form-date-field-literal {
+    color: var(--muted);
+    padding: 0 1px;
+  }
+
+  .form-date-field-segment {
+    padding: var(--date-field-segment-padding);
+    border-radius: var(--date-field-segment-border-radius);
+    outline: none;
+    color: var(--color);
+
+    &[data-placeholder] {
+      color: var(--muted);
+    }
+
+    &:focus {
+      background: var(--date-field-segment-focus-background);
+      color: var(--date-field-segment-focus-color);
+    }
+  }
+}
+</style>