Shouldn't there be a clear for DateElement

[jadrake75]

I noticed there does not appear to be a way to clear a Date using the Date Element. I will work around this for now buy adding a control that will modify the model value to an undefined/null value but this seems like an oversight. Is this worth requesting via the Issues on Vueform? Or am I just missing a setting with this control.

Note I did file #223 in relation to the popup. I see it is using flickr under the covers (which I have used before in other projects)

[jadrake75]

So I wrapped the component in a component and added my icons to a addons. It is not perfect but works for me.... I added a click listener to the form-bg-addon and that determines which icon was clicked and invokes the action (not ideal but serves the purpose and I can always rip it out later if the DateElement adds controls for clear and also a selection icon.

const handleClick = (evt: PointerEvent) => {
    const clz: string = (evt.target as HTMLElement).className
    if (clz.includes('sw-icon-calendar')) {
      openDatePicker()
    } else if (clz.includes('sw-icon-cancel')) {
      clearValue()
    }
  }

  onBeforeUnmount(() => {
    $datePicker?.value.$el
      ?.querySelector('.form-bg-addon')
      ?.removeEventListener('click', handleClick)
  })

  onMounted(async () => {
    await nextTick()
    $datePicker?.value.$el?.querySelector('.form-bg-addon')?.addEventListener('click', handleClick)
  })```

[adamberecz]

Thanks for the suggestion and for the example.

[jadrake75]

If you are going to add it as a feature, you could integrate it much cleaner I suspect than the above approach. This was just "what was available to me" via the addons without building a "X" action and moving it on the DOM. It isn't perfect... for example I am currently showing the "X" even when there is no value (I could likely manipulate the element with a watch)

[jadrake75]

One issue I found (which I only found after pushing to my server) is the addons must be doing something with either a .html( ) or eval( ) since it triggers the CSP unsafe-eval rule on script-src

I don't think it is the listeners I added above (I will test this next with the icons present) - the icons are pretty simple so I don't think it is my HTML causing the issue...

:addons="{
      after: {
        template: ` <i class='sw-icon-cancel cursor-pointer text-gray-300 hover:text-current pb-0.5 px-0.5 scale-110'></i>
 <i class='cursor-pointer sw-icon-calendar text-gray-600 hover:text-black pb-0.5 pl-0.5 scale-110'></i>`
      }
    }"

[jadrake75]

I can confirm it is the use of the template using the vite build command. This inserts the template with a new Function( ) - so I either need to allow unsafe-eval (not ideal) or I need to see how I can precompile that template.

So to round this out... using the identified slot I was able to get this to work without declaring unsafe-eval. Here is my template code in my SFC. Note I think this better anyways since I can delcare the @click actions direction on the elements vs. goofy add/remove listener junk

<DateElement
    :label="$props.label || ''"
    :name="$props.name || ''"
    ref="$datePicker"
    size="sm"
    v-model="model"
    :add-Classes="{
      DatepickerWrapper: {
        calendarContainer: 'max-w-56 w-56'
      }
    }"
    :columns="$props.columns || ''"
    ><template #addon-after="">
      <i
        @click="clearValue"
        class="sw-icon-cancel cursor-pointer text-gray-300 hover:text-current pb-0.5 px-0.5 scale-110"
      ></i>
      <i
        @click="openDatePicker"
        class="cursor-pointer sw-icon-calendar text-gray-600 hover:text-black pb-0.5 pl-0.5 scale-110"
      ></i> </template
  ></DateElement>

[jadrake75]

@adamberecz I got this by looking at https://vueform.com/reference/date-element#slot-addon-after

What is the "scope" after the $addon-after do? This was flagged in my IDE with eslint.... removing it didn't seem to hurt me but what is this value supposed to be?

[adamberecz]

With scoped slots, I can pass variables from the original component to the slot implemenation. This way you could reach properties and methods of the element via el$ for this specific slot.

Btw if you were ever need to define a slot via schema (instead of inline) you could do it like this:
https://vueform.com/reference/select-element#slot-option (Schema tab)

The example is for SelectElement but applies to all other slots.