feat(light): Add ant theme

Make `ant` the new default theme. The old styles can be enabled with `theme="legacy"`

Author: abichinger

light/src/App.vue

@@ -5,8 +5,9 @@
       v-model:period="period"
       format="crontab"
       :locale="locale"
-      :key="locale"
+      :key="locale + theme"
       @error="error = $event"
+      :theme="theme"
     >
     </cron-light>
     <div>
@@ -15,11 +16,12 @@
     </div>
     <br />
     Error: {{ error }}
-    <div style="margin-top: 1em">
+    <div style="margin-top: 2em">
       <button @click="toggleDarkMode" class="cl-btn">
         Switch to {{ isDark ? 'Light' : 'Dark' }} Mode
       </button>
       <button @click="switchLocale" class="cl-btn">Locale: {{ locale }}</button>
+      <button @click="switchTheme" class="cl-btn">Theme: {{ theme }}</button>
     </div>
   </div>
 </template>
@@ -28,11 +30,15 @@
 import CronLight from '@/components/cron-light.vue'
 import { ref, watch } from 'vue'
 
+const themes = ['ant', 'legacy'] as const
+type Theme = (typeof themes)[number]
+
 const value = ref(undefined)
 const period = ref('month')
 const error = ref('')
 const isDark = ref(false)
 const locale = ref('en')
+const theme = ref<Theme>('ant')
 
 watch(value, (value) => {
   console.log('value changed: ' + value)
@@ -55,6 +61,11 @@ function switchLocale() {
   const i = (locales.indexOf(locale.value) + 1) % locales.length
   locale.value = locales[i]
 }
+
+function switchTheme() {
+  const i = (themes.indexOf(theme.value) + 1) % themes.length
+  theme.value = themes[i]
+}
 </script>
 
 <style>

light/src/components/cron-light.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="cron-light">
+  <span class="cron-light" :class="theme">
     <span class="cl-prefix">{{ period.prefix.value }}</span>
     <custom-select
       :model-value="period.selected.value.id"
@@ -30,11 +30,16 @@
 
 <script lang="ts">
 import CustomSelect from '@/components/select.vue'
+import '@/theme/ant.css'
 import { cronCoreProps, setupCron } from '@vue-js-cron/core'
-import { defineComponent, type ExtractPropTypes } from 'vue'
+import { defineComponent, type ExtractPropTypes, type PropType } from 'vue'
 
 export const cronLightProps = () => ({
   ...cronCoreProps(),
+  theme: {
+    type: String as PropType<'ant' | 'legacy'>,
+    default: 'ant',
+  },
 })
 
 /**

light/src/components/select.vue

@@ -2,17 +2,19 @@
   <div class="cl-select">
     <span
       class="cl-btn"
-      :class="{ disabled: disabled }"
+      :class="{ disabled: disabled, active: menu }"
       @click="
         () => {
           if (!disabled) toggleMenu()
         }
       "
       ref="btn"
     >
-      {{ selection ?? selectedStr }}
-
-      <span v-if="clearable && !isEmpty" class="cl-btn-clear" @click="clear">&#x2715;</span>
+      <span class="cl-btn-selection">{{ selection ?? selectedStr }}</span>
+      <span :class="{ clearable: clearable && !isEmpty }" class="cl-btn-suffix" @click="clear">
+        <CloseCircleFilled v-if="clearable && !isEmpty" />
+        <DownOutlined v-else />
+      </span>
     </span>
 
     <div :style="floatingStyles" ref="floating">
@@ -37,12 +39,18 @@
 </template>
 
 <script lang="ts">
+import CloseCircleFilled from '@/icons/CloseOutlined.vue'
+import DownOutlined from '@/icons/DownOutlined.vue'
 import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue'
 import { selectProps, setupSelect } from '@vue-js-cron/core'
 import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
   name: 'CustomSelect',
+  components: {
+    CloseCircleFilled,
+    DownOutlined,
+  },
   props: {
     ...selectProps(),
   },
@@ -105,6 +113,7 @@ export default defineComponent({
   padding: 0.1em 0.5em;
   user-select: none;
   min-height: 1.2em;
+  position: relative;
 }
 
 .cl-btn.disabled {
@@ -113,14 +122,34 @@ export default defineComponent({
 }
 
 .cl-btn:not(.disabled):hover {
-  /* border: 1px solid #ccc; */
+  border: var(--cl-btn-hover-border, 1px solid #ddd);
   background-color: var(--cl-hover-bg-color, #d6d6d6);
 }
 
-.cl-btn-clear {
-  font-size: 1.2em;
-  margin-left: 3px;
+.cl-btn.active {
+  border: var(--cl-btn-hover-border, 1px solid #ddd);
+  background-color: var(--cl-hover-bg-color, #d6d6d6);
+}
+
+.cl-btn-suffix {
+  margin-left: 0.4em;
+}
+
+.cl-btn-suffix svg {
+  display: inline-block;
+  width: 0.8em;
+  height: 0.8em;
   line-height: 1;
+  opacity: 0.6;
+}
+
+.cl-btn-suffix.clearable svg:hover {
+  opacity: 0.9;
+}
+
+.legacy .cl-btn-suffix:not(.clearable) {
+  margin-left: 0;
+  display: none;
 }
 
 .cl-menu {

light/src/icons/CloseOutlined.vue

@@ -0,0 +1,10 @@
+<template>
+  <!-- https://icon-sets.iconify.design/ant-design/page-2.html?icon-filter=close-outlined&keyword=ant -->
+  <svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
+    <path
+      fill="currentColor"
+      fill-rule="evenodd"
+      d="M799.855 166.312c.023.007.043.018.084.059l57.69 57.69c.041.041.052.06.059.084a.1.1 0 0 1 0 .069c-.007.023-.018.042-.059.083L569.926 512l287.703 287.703c.041.04.052.06.059.083a.12.12 0 0 1 0 .07c-.007.022-.018.042-.059.083l-57.69 57.69c-.041.041-.06.052-.084.059a.1.1 0 0 1-.069 0c-.023-.007-.042-.018-.083-.059L512 569.926L224.297 857.629c-.04.041-.06.052-.083.059a.12.12 0 0 1-.07 0c-.022-.007-.042-.018-.083-.059l-57.69-57.69c-.041-.041-.052-.06-.059-.084a.1.1 0 0 1 0-.069c.007-.023.018-.042.059-.083L454.073 512L166.371 224.297c-.041-.04-.052-.06-.059-.083a.12.12 0 0 1 0-.07c.007-.022.018-.042.059-.083l57.69-57.69c.041-.041.06-.052.084-.059a.1.1 0 0 1 .069 0c.023.007.042.018.083.059L512 454.073l287.703-287.702c.04-.041.06-.052.083-.059a.12.12 0 0 1 .07 0Z"
+    />
+  </svg>
+</template>

light/src/icons/DownOutlined.vue

@@ -0,0 +1,9 @@
+<template>
+  <!-- https://icon-sets.iconify.design/ant-design/page-2.html?icon-filter=down-outlined&keyword=ant -->
+  <svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
+    <path
+      fill="currentColor"
+      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2L227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7"
+    />
+  </svg>
+</template>

light/src/theme/ant.css

@@ -0,0 +1,64 @@
+/* Inspired by https://antdv.com/ */
+
+.ant {
+  --cl-bg-color: none;
+  --cl-btn-hover-border: 1px solid #1677ff;
+  --cl-selected-bg-color: #e6f4ff;
+  --cl-selected-text-color: #000;
+}
+
+.ant .cl-btn {
+  --cl-hover-bg-color: none;
+  border-radius: 6px;
+}
+
+.ant .cl-btn-selection {
+  line-height: 1.7;
+}
+
+.ant .cl-btn-suffix {
+  margin-left: 0.5em;
+  line-height: 1;
+}
+
+.ant .cl-menu {
+  --cl-bg-color: #fff;
+  --cl-hover-bg-color: rgba(0, 0, 0, 0.04);
+  border-radius: 8px;
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  padding: 4px;
+}
+
+.ant .cl-col {
+  padding: 5px 10px;
+}
+
+.ant .cl-row > .cl-col:first-child {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.ant .cl-row > .cl-col:last-child {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.ant .cl-col.selected,
+.ant .cl-col.selected:hover {
+  font-weight: bold;
+}
+
+/* Dark mode styles */
+.dark .ant {
+  --cl-text-color: inherit;
+  --cl-border: 1px solid rgba(255, 255, 255, 0.6);
+  --cl-selected-bg-color: #111b26;
+  --cl-selected-text-color:  #3497f3;
+}
+
+.dark .ant .cl-menu {
+  --cl-bg-color: #1f1f1f;
+  --cl-hover-bg-color: #ffffff14;
+  --cl-border: none;
+  box-shadow: 0 3px 6px -4px #0000007a,0 6px 16px #00000052,0 9px 28px 8px #0003;
+}