@oruga-ui/theme-oruga 0.0.1

package/src/components/Datepicker.vue

@@ -0,0 +1,285 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+
+const today = new Date();
+const thisMonth = today.getMonth();
+const thisYear = today.getFullYear();
+const events = [
+  new Date(thisYear, thisMonth, 2),
+  new Date(thisYear, thisMonth, 6),
+  {
+    date: new Date(thisYear, thisMonth, 6),
+    type: "info",
+  },
+  {
+    date: new Date(thisYear, thisMonth, 8),
+    type: "danger",
+  },
+  {
+    date: new Date(thisYear, thisMonth, 10),
+    type: "success",
+  },
+  {
+    date: new Date(thisYear, thisMonth, 10),
+    type: "link",
+  },
+  new Date(thisYear, thisMonth, 12),
+  {
+    date: new Date(thisYear, thisMonth, 12),
+    type: "warning",
+  },
+  {
+    date: new Date(thisYear, thisMonth, 16),
+    type: "danger",
+  },
+  new Date(thisYear, thisMonth, 20),
+  {
+    date: new Date(thisYear, thisMonth, 29),
+    type: "success",
+  },
+  {
+    date: new Date(thisYear, thisMonth, 29),
+    type: "warning",
+  },
+  {
+    date: new Date(thisYear, thisMonth, 29),
+    type: "info",
+  },
+];
+
+const months = [
+  { name: "January", value: 0 },
+  { name: "February", value: 1 },
+  { name: "March", value: 2 },
+  { name: "April", value: 3 },
+  { name: "May", value: 4 },
+  { name: "June", value: 5 },
+  { name: "July", value: 6 },
+  { name: "August", value: 7 },
+  { name: "September", value: 8 },
+  { name: "October", value: 9 },
+  { name: "November", value: 10 },
+  { name: "December", value: 11 },
+];
+
+const showWeekNumber = ref(false);
+const locale = ref(); // Browser locale
+
+const bars = ref(false);
+const indicators = computed((): string => (bars.value ? "bars" : "dots"));
+
+const selected = ref(new Date());
+const selectedString = computed(() =>
+  selected.value ? selected.value.toDateString() : "",
+);
+
+const date = ref<Date | null>(new Date());
+const multiple = ref([]);
+const range = ref([]);
+
+const minDate = new Date(
+  today.getFullYear(),
+  today.getMonth(),
+  today.getDate() - 7,
+);
+const maxDate = new Date(
+  today.getFullYear(),
+  today.getMonth(),
+  today.getDate() + 7,
+);
+
+const month = ref();
+
+function selectMonth(option: { name: string; value: number }) {
+  if (!option || !date.value) return;
+
+  date.value.setMonth(option.value);
+}
+
+onMounted(() => {
+  month.value = months.filter(
+    (item) => item.value == date.value?.getMonth(),
+  )[0].name;
+});
+const datepicker = ref<any>(null);
+</script>
+
+<template>
+  <section>
+    <h2>Datepicker Demo</h2>
+    <hr />
+  </section>
+
+  <section>
+    <h3>Base</h3>
+
+    <o-field grouped>
+      <o-field>
+        <o-select v-model="locale" placeholder="Locale">
+          <option :value="undefined"></option>
+          <option value="de-DE">de-DE</option>
+          <option value="en-CA">en-CA</option>
+          <option value="en-GB">en-GB</option>
+          <option value="en-US">en-US</option>
+          <option value="es-ES">es-ES</option>
+          <option value="es-MX">es-MX</option>
+          <option value="fr-CA">fr-CA</option>
+          <option value="fr-FR">fr-FR</option>
+          <option value="it-IT">it-IT</option>
+          <option value="ja-JP">ja-JP</option>
+          <option value="pt-BR">pt-BR</option>
+          <option value="ru-RU">ru-RU</option>
+        </o-select>
+      </o-field>
+      <o-field>
+        <o-switch v-model="showWeekNumber">Show week number</o-switch>
+      </o-field>
+    </o-field>
+
+    <o-field label="Select a date">
+      <o-datepicker
+        v-model="selected"
+        :show-week-number="showWeekNumber"
+        :locale="locale"
+        placeholder="Click to select..."
+        icon="calendar"
+        :events="events"
+        :indicators="indicators"
+        trap-focus>
+      </o-datepicker>
+    </o-field>
+    <p><b>Selected:</b> {{ selected }}</p>
+  </section>
+
+  <section>
+    <h3>Min/Max date</h3>
+
+    <o-field label="Select a date">
+      <o-datepicker
+        placeholder="Click to select..."
+        icon="calendar"
+        :min-date="minDate"
+        :max-date="maxDate" />
+    </o-field>
+  </section>
+
+  <section>
+    <h3>Range</h3>
+
+    <o-field label="Select a date">
+      <o-datepicker
+        v-model="range"
+        :show-week-number="showWeekNumber"
+        :locale="locale"
+        placeholder="Click to select..."
+        icon="calendar"
+        trap-focus
+        range>
+      </o-datepicker>
+    </o-field>
+    <p><b>Selected:</b> {{ range }}</p>
+  </section>
+
+  <section>
+    <h3>Multiple</h3>
+
+    <o-field label="Select a date">
+      <o-datepicker
+        v-model="multiple"
+        multiple
+        placeholder="Click to select..." />
+    </o-field>
+    <p><b>Selected:</b> {{ multiple }}</p>
+  </section>
+
+  <section>
+    <h3>Trigger</h3>
+
+    <o-field label="Select a date" grouped>
+      <o-datepicker v-model="selected">
+        <template #trigger>
+          <o-button icon-left="calendar" type="primary" />
+        </template>
+      </o-datepicker>
+      <o-input v-model="selectedString" readonly expanded />
+    </o-field>
+  </section>
+
+  <section>
+    <h3>Programmatically</h3>
+
+    <o-field>
+      <o-datepicker ref="datepicker" expanded placeholder="Select a date" />
+
+      <o-button
+        icon-left="calendar"
+        type="primary"
+        @click="datepicker?.toggle()" />
+    </o-field>
+  </section>
+
+  <section>
+    <h3>Slots</h3>
+
+    <o-field label="Select a date">
+      <o-datepicker
+        v-model="date"
+        :first-day-of-week="1"
+        placeholder="Click to select...">
+        <template #header>
+          <o-field>
+            <o-autocomplete
+              v-model="month"
+              root-class="flex-grow-1"
+              open-on-focus
+              readonly
+              :data="months"
+              field="name"
+              expanded
+              @select="selectMonth" />
+            <o-button disabled>{{ date?.getFullYear() }}</o-button>
+          </o-field>
+        </template>
+        <template #footer>
+          <div class="d-flex justify-content-end mt-2">
+            <o-button variant="primary" @click="date = new Date()">
+              <o-icon icon="calendar"></o-icon>
+              <span>Today</span>
+            </o-button>
+
+            <o-button variant="danger" @click="date = null">
+              <o-icon icon="times"></o-icon>
+              <span>Clear</span>
+            </o-button>
+          </div>
+        </template>
+      </o-datepicker>
+    </o-field>
+  </section>
+
+  <section>
+    <h3>Events</h3>
+
+    <o-field>
+      <o-switch v-model="bars">Bars</o-switch>
+    </o-field>
+
+    <o-datepicker
+      v-model="date"
+      inline
+      :events="events"
+      :indicators="indicators" />
+  </section>
+
+  <section>
+    <h3>Month picker</h3>
+
+    <o-field label="Select a month">
+      <o-datepicker
+        placeholder="Click to select..."
+        icon="calendar"
+        type="month">
+      </o-datepicker>
+    </o-field>
+  </section>
+</template>

package/src/components/Datetimepicker.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const showWeekNumber = ref(false);
+const enableSeconds = ref(false);
+const hourFormat = ref(); // Browser locale
+const locale = ref(); // Browser locale
+
+const datetime = ref<Date | null>(new Date());
+
+const minDatetime = ref(null);
+const maxDatetime = ref(null);
+</script>
+
+<template>
+  <section>
+    <h2>Datetimepicker Demo</h2>
+    <hr />
+  </section>
+
+  <section>
+    <h2>Base</h2>
+
+    <o-field grouped>
+      <o-field>
+        <o-switch v-model="showWeekNumber">Show week number</o-switch>
+      </o-field>
+      <o-field>
+        <o-switch v-model="enableSeconds">Enable seconds</o-switch>
+      </o-field>
+      <o-field label="Locale">
+        <o-select v-model="locale">
+          <option :value="undefined"></option>
+          <option value="de-DE">de-DE</option>
+          <option value="en-CA">en-CA</option>
+          <option value="en-GB">en-GB</option>
+          <option value="en-US">en-US</option>
+          <option value="es-ES">es-ES</option>
+          <option value="es-MX">es-MX</option>
+          <option value="fr-CA">fr-CA</option>
+          <option value="fr-FR">fr-FR</option>
+          <option value="it-IT">it-IT</option>
+          <option value="ja-JP">ja-JP</option>
+          <option value="pt-BR">pt-BR</option>
+          <option value="ru-RU">ru-RU</option>
+          <option value="zn-CN">zn-CN</option>
+        </o-select>
+      </o-field>
+      <o-field label="Hour format">
+        <o-select v-model="hourFormat">
+          <option :value="undefined"></option>
+          <option value="12">12</option>
+          <option value="24">24</option>
+        </o-select>
+      </o-field>
+    </o-field>
+
+    <o-field label="Select datetime">
+      <o-datetimepicker
+        rounded
+        placeholder="Click to select..."
+        icon="calendar"
+        :locale="locale"
+        :datepicker="{ showWeekNumber }"
+        :timepicker="{ enableSeconds, hourFormat }" />
+    </o-field>
+  </section>
+
+  <section>
+    <h3>Inline</h3>
+
+    <o-datetimepicker v-model="datetime" inline />
+  </section>
+
+  <section>
+    <h3>Footer</h3>
+
+    <o-field label="Select datetime">
+      <o-datetimepicker v-model="datetime" placeholder="Click to select...">
+        <template #footer>
+          <div class="d-flex justify-content-center mt-3">
+            <o-button variant="primary" @click="datetime = new Date()">
+              <o-icon icon="calendar"></o-icon>
+              <span>Today</span>
+            </o-button>
+            <o-button variant="danger" @click="datetime = null">
+              <o-icon icon="times"></o-icon>
+              <span>Clear</span>
+            </o-button>
+          </div>
+        </template>
+      </o-datetimepicker>
+    </o-field>
+  </section>
+
+  <section>
+    <h3>Min/Max Datetime</h3>
+
+    <o-field grouped>
+      <o-field label="Min Datetime">
+        <o-datetimepicker
+          v-model="minDatetime"
+          rounded
+          placeholder="Click to select..."
+          icon="calendar"
+          editable />
+      </o-field>
+      <o-field label="Max Datetime">
+        <o-datetimepicker
+          v-model="maxDatetime"
+          rounded
+          placeholder="Click to select..."
+          icon="calendar"
+          editable />
+      </o-field>
+    </o-field>
+
+    <o-field label="Select datetime">
+      <o-datetimepicker
+        rounded
+        placeholder="Click to select..."
+        icon="calendar"
+        :min-datetime="minDatetime"
+        :max-datetime="maxDatetime" />
+    </o-field>
+  </section>
+</template>

package/src/components/Dropdown.vue

@@ -0,0 +1,284 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const isScrollable = ref(true);
+const maxHeight = ref(200);
+const currentMenu = ref({ icon: "users", text: "People" });
+const menus = ref([
+  { icon: "users", text: "People" },
+  { icon: "box", text: "Orders" },
+  { icon: "credit-card", text: "Payments" },
+  { icon: "dolly", text: "Logistics" },
+  { icon: "business-time", text: "Jobs" },
+  { icon: "shopping-cart", text: "Cart" },
+  { icon: "cog", text: "Configuration" },
+]);
+const selectedOptions = ref([]);
+</script>
+
+<template>
+  <section>
+    <h2>Dropdown Demo</h2>
+    <hr />
+  </section>
+
+  <section>
+    <h3>Base</h3>
+
+    <div class="dropdown-example">
+      <o-dropdown aria-role="list">
+        <template #trigger>
+          <o-button
+            variant="primary"
+            class="dropdown-toggle"
+            label="Click me!" />
+        </template>
+
+        <o-dropdown-item aria-role="listitem">Action</o-dropdown-item>
+        <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
+        <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
+      </o-dropdown>
+    </div>
+
+    <div class="dropdown-example">
+      <o-dropdown :triggers="['hover']" aria-role="list">
+        <template #trigger>
+          <o-button variant="info" class="dropdown-toggle" label="Hover me!" />
+        </template>
+
+        <o-dropdown-item aria-role="listitem">Action</o-dropdown-item>
+        <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
+        <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
+      </o-dropdown>
+    </div>
+
+    <div class="dropdown-example">
+      <o-dropdown disabled aria-role="list">
+        <template #trigger>
+          <o-button class="dropdown-toggle" label="Disabled" disabled />
+        </template>
+
+        <o-dropdown-item aria-role="listitem">Action</o-dropdown-item>
+        <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
+        <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
+      </o-dropdown>
+    </div>
+
+    <div class="dropdown-example">
+      <o-dropdown aria-role="list">
+        <template #trigger="{ active }">
+          <span role="button">
+            Custom
+            <o-icon
+              variant="success"
+              :icon="active ? 'caret-up' : 'caret-down'" />
+          </span>
+        </template>
+
+        <o-dropdown-item aria-role="listitem">Action</o-dropdown-item>
+        <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
+        <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
+      </o-dropdown>
+    </div>
+
+    <div class="dropdown-example">
+      <o-dropdown :triggers="['contextmenu']" aria-role="list">
+        <template #trigger>
+          <o-button label="Right click" />
+        </template>
+
+        <o-dropdown-item aria-role="listitem">Action</o-dropdown-item>
+        <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
+        <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
+      </o-dropdown>
+    </div>
+  </section>
+
+  <section>
+    <h3>Inline</h3>
+
+    <div class="dropdown-example">
+      <o-dropdown inline aria-role="list">
+        <template #trigger>
+          <o-button label="Inline" />
+        </template>
+
+        <o-dropdown-item aria-role="listitem" value="1">
+          Action
+        </o-dropdown-item>
+        <o-dropdown-item aria-role="listitem" value="2">
+          Another action
+        </o-dropdown-item>
+        <o-dropdown-item aria-role="listitem" value="3">
+          Something else
+        </o-dropdown-item>
+      </o-dropdown>
+    </div>
+  </section>
+
+  <section>
+    <h3>Scrollable</h3>
+
+    <div>
+      <o-field>
+        <o-switch v-model="isScrollable">Scrollable</o-switch>
+      </o-field>
+    </div>
+
+    <o-dropdown
+      v-model="currentMenu"
+      :scrollable="isScrollable"
+      :max-height="maxHeight"
+      aria-role="list">
+      <template #trigger>
+        <o-button variant="primary" type="button" class="dropdown-toggle">
+          <o-icon :icon="currentMenu.icon" />
+          <span>{{ currentMenu.text }}</span>
+        </o-button>
+      </template>
+
+      <o-dropdown-item
+        v-for="(menu, index) in menus"
+        :key="index"
+        :value="menu"
+        aria-role="listitem">
+        <div class="media">
+          <o-icon class="media-left" :icon="menu.icon" />
+          <div class="media-content">
+            <span>{{ menu.text }}</span>
+          </div>
+        </div>
+      </o-dropdown-item>
+    </o-dropdown>
+  </section>
+
+  <section>
+    <h3>Multiple</h3>
+
+    <p><b>selected</b>: {{ selectedOptions }}</p>
+    <o-dropdown v-model="selectedOptions" multiple aria-role="list">
+      <template #trigger>
+        <o-button variant="primary" type="button" class="dropdown-toggle">
+          <span>Selected ({{ selectedOptions.length }})</span>
+        </o-button>
+      </template>
+
+      <o-dropdown-item value="option1" aria-role="listitem">
+        option 1
+      </o-dropdown-item>
+
+      <o-dropdown-item value="option2" aria-role="listitem">
+        Option 2
+      </o-dropdown-item>
+
+      <o-dropdown-item value="option3" aria-role="listitem">
+        Option 3
+      </o-dropdown-item>
+    </o-dropdown>
+  </section>
+
+  <section>
+    <h3>Positioning & Expanded</h3>
+
+    <div class="dropdown-example expanded">
+      <o-dropdown position="top-right" aria-role="list" expanded>
+        <template #trigger>
+          <o-button
+            class="dropdown-toggle"
+            variant="primary"
+            label="Position top right"
+            expanded />
+        </template>
+
+        <o-dropdown-item aria-role="listitem">Action</o-dropdown-item>
+        <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
+        <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
+      </o-dropdown>
+    </div>
+
+    <div class="dropdown-example expanded">
+      <o-dropdown position="top-left" aria-role="list" expanded>
+        <template #trigger>
+          <o-button
+            class="dropdown-toggle"
+            variant="primary"
+            label="Position top left"
+            expanded />
+        </template>
+
+        <o-dropdown-item aria-role="listitem">Action</o-dropdown-item>
+        <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
+        <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
+      </o-dropdown>
+    </div>
+
+    <div class="dropdown-example expanded">
+      <o-dropdown position="bottom-left" aria-role="list" expanded>
+        <template #trigger>
+          <o-button
+            class="dropdown-toggle"
+            variant="primary"
+            label="Position bottom left"
+            expanded />
+        </template>
+
+        <o-dropdown-item aria-role="listitem">Action</o-dropdown-item>
+        <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
+        <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
+      </o-dropdown>
+    </div>
+
+    <div class="dropdown-example expanded">
+      <o-dropdown position="bottom-right" aria-role="list" expanded>
+        <template #trigger>
+          <o-button
+            class="dropdown-toggle"
+            variant="primary"
+            label="Position bottom right"
+            expanded />
+        </template>
+
+        <o-dropdown-item aria-role="listitem">Action</o-dropdown-item>
+        <o-dropdown-item aria-role="listitem">Another action</o-dropdown-item>
+        <o-dropdown-item aria-role="listitem">Something else</o-dropdown-item>
+      </o-dropdown>
+    </div>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.dropdown-example {
+  display: inline-flex;
+  position: relative;
+  vertical-align: top;
+
+  &.expanded {
+    display: block;
+  }
+
+  &:not(:last-child) {
+    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+}
+
+.media {
+  align-items: flex-start;
+  display: flex;
+  text-align: left;
+  .media-content {
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+    text-align: left;
+    overflow-y: hidden;
+    overflow-x: auto;
+  }
+  .media-left {
+    margin-right: 1rem;
+    flex-basis: auto;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+}
+</style>