NaiveUI Support

[dogukanoksuz]

I have integrated the core version to Naive UI

I hope this helps.

<script setup lang="ts">
import { computed } from "vue"

const props = defineProps<{
  cron: string
}>()

const emit = defineEmits<{
  (event: "update:cron", arg: string): void
}>()

const val = computed({
  get() {
    return props.cron
  },
  set(value) {
    emit("update:cron", value)
  },
})
</script>

<template>
  <cron-core v-model="val" v-slot="{ fields, period }">
    <n-space align="center">
      <!-- period selection -->
      {{ period.prefix }}
      <n-space>
        <n-select
          :options="period.items"
          :value="period.attrs.modelValue"
          label-field="text"
          value-field="id"
          @update:value="(_: any, $value: typeof period) => period.events['update:model-value']($value.id)"
          style="width: 200px"
        />
      </n-space>
      {{ period.suffix }}

      <!-- cron expression fields -->
      <template v-for="f in fields" :key="f.id">
        {{ f.prefix }}
        <n-space>
          <n-select
            :options="f.items"
            :value="f.attrs.modelValue"
            label-field="text"
            value-field="value"
            multiple
            @update:value="($e: typeof f) => f.events['update:model-value']($e)"
            style="width: 200px"
            :placeholder="f.selectedStr"
          />
        </n-space>
        {{ f.suffix }}
      </template>
    </n-space>
  </cron-core>
</template>

[abichinger]

Hey, haven't been aware of Naive UI. Thanks!

Usually I use a button combined with a popover for each field, because the select component of most ui frameworks can't display the options in a grid.

[abichinger]

@vue-js-cron/naive-ui is now availabe on npm