design-system-next 1.0.21

package/src/components/radio/use-radio.ts

@@ -0,0 +1,65 @@
+import { computed, ref, ComputedRef } from "vue";
+import { useElementHover } from "@vueuse/core";
+import classNames from "classnames";
+import type { RadioPropTypes } from "./radio";
+
+export const useRadioButton = (props: RadioPropTypes) => {
+  const radioRef = ref<HTMLInputElement | null>(null);
+  const isHovered = useElementHover(radioRef);
+
+  const radioClasses: ComputedRef<string> = computed(() => {
+    const baseClasses = "tw-sr-only tw-peer";
+
+    if (props.disabled) {
+      return classNames(baseClasses, "tw-cursor-default");
+    }
+
+    return baseClasses;
+  });
+
+  const indicatorClasses: ComputedRef<string> = computed(() => {
+    console.log(props.disabled);
+    const baseClasses =
+      "tw-inline-block tw-w-4 tw-h-4 tw-rounded-full tw-border-2 tw-border-solid tw-mr-2";
+
+    if (props.disabled) {
+      return classNames(
+        baseClasses,
+        props.modelValue === props.value
+          ? "tw-border-color-disabled tw-background-color-disabled tw-shadow-[inset_0px_0px_0px_2.5px_#fff] tw-cursor-default"
+          : "tw-border-color-disabled tw-background-color tw-cursor-default"
+      );
+    }
+
+    if (props.modelValue === props.value) {
+      return classNames(
+        baseClasses,
+        "tw-border-color-brand-base tw-background-color-brand-base tw-shadow-[inset_0px_0px_0px_2.5px_#fff]"
+      );
+    }
+
+    if (isHovered.value) {
+      return classNames(
+        baseClasses,
+        "tw-background-color-base tw-border-2 tw-border-color-supporting tw-shadow-[inset_0px_0px_0px_2.5px_#fff]"
+      );
+    }
+
+    return classNames(baseClasses, "tw-border-color-supporting tw-shadow-[inset_0px_0px_0px_2.5px_#fff]");
+  });
+
+  const radioLabelClasses: ComputedRef<string> = computed(() => {
+    if (props.disabled) {
+      return "tw-text-color-disabled tw-cursor-default";
+    }
+
+    return "tw-text-color-strong tw-cursor-pointer";
+  });
+
+  return {
+    radioRef,
+    radioClasses,
+    indicatorClasses,
+    radioLabelClasses,
+  };
+};

package/src/components/sidenav/sidenav.ts

@@ -0,0 +1,43 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const sidenavPropTypes = {
+  /**
+   * @description Sidenav has quick actions
+   */
+  hasQuickActions: {
+    type: Boolean,
+    validator: (value: unknown) => typeof value === 'boolean',
+    default: false,
+  },
+  /**
+   * @description Sidenav has search
+   */
+  hasSearch: {
+    type: Boolean,
+    validator: (value: unknown) => typeof value === 'boolean',
+    default: false,
+  },
+  /**
+   * @description Sidenav active navigation
+   */
+  activeNav: {
+    type: Object as PropType<{ parentNav: string; menu: string; submenu: string }>,
+    validator: (value: unknown) => typeof value === 'object',
+    default: () => ({ parentNav: '', menu: '', submenu: '' }),
+  },
+  /**
+   * @description Sidenav navlinks
+   */
+  navLinks: {
+    type: Array as PropType<Array<{ parentLinks: Array<unknown> }>>,
+    validator: (value: unknown) => Array.isArray(value),
+    default: () => [],
+  },
+};
+
+export const sidenavEmitTypes = {
+  'route-push': String,
+};
+
+export type SidenavPropTypes = ExtractPropTypes<typeof sidenavPropTypes>;
+export type SidenavEmitTypes = typeof sidenavEmitTypes;

package/src/components/sidenav/sidenav.vue

@@ -0,0 +1,235 @@
+<template>
+  <div
+    :class="[
+      'tw-hidden-scrolls tw-fixed tw-bottom-0 tw-left-0 tw-top-0',
+      'tw-background-color tw-w-auto tw-overflow-y-auto tw-overflow-x-hidden',
+      'tw-border-color-weak tw-border-b-0 tw-border-l-0 tw-border-r tw-border-t-0 tw-border-solid',
+      'tw-transition tw-duration-150 tw-ease-in-out',
+    ]"
+  >
+    <div class="tw-grid tw-h-full tw-grid-rows-[auto_1fr] tw-px-[12px]">
+      <div class="tw-hidden-scrolls tw-mt-[16px] tw-overflow-auto">
+        <!-- #region - Logo -->
+        <div
+          :class="[
+            {
+              'tw tw-grid tw-justify-center': true,
+              '[&>img]:tw-mx-auto [&>img]:tw-h-[24px] [&>img]:tw-w-[24px]': true,
+              'tw-pb-[16px]': !props.hasQuickActions && !props.hasSearch && !props.navLinks,
+            },
+          ]"
+        >
+          <slot name="logo-image" />
+        </div>
+        <!-- #endregion - Logo -->
+
+        <div class="tw-grid tw-justify-center tw-gap-[8px] tw-pb-[16px] tw-pt-[16px]">
+          <!-- #region - Quick Actions -->
+          <div
+            v-if="props.hasQuickActions"
+            :class="[
+              'tw-text-color-brand-base tw-mx-auto tw-h-[32px] tw-cursor-pointer tw-text-[28px] tw-transition tw-duration-150 tw-ease-in-out',
+              'hover:tw-text-color-success-hover',
+              'active:tw-text-color-success-pressed active:tw-scale-90',
+            ]"
+          >
+            <IconPlusCircleFill />
+          </div>
+          <!-- #endregion - Quick Actions -->
+
+          <!-- #region - Search -->
+          <div
+            v-if="props.hasSearch"
+            :class="[
+              'justify-center tw-flex tw-cursor-pointer tw-items-center tw-rounded-[8px] tw-p-[8px] tw-transition tw-duration-150 tw-ease-in-out',
+              'hover:tw-background-color-hover',
+              'active:tw-background-color-single-active active:tw-scale-90',
+            ]"
+          >
+            <IconMagnifyingGlass />
+          </div>
+          <!-- #endregion - Search -->
+
+          <!-- #region - Grouped Nav Links -->
+          <template v-for="(navLink, navLinkIndex) in props.navLinks" :key="navLinkIndex">
+            <template v-for="(parentLink, parentLinkIndex) in navLink.parentLinks" :key="parentLinkIndex">
+              <!-- #region - Parent link with menu links -->
+              <template v-if="parentLink.menuLinks && parentLink.menuLinks.length > 0">
+                <Menu
+                  aria-id="sidenav-menu-wrapper"
+                  distance="18"
+                  placement="right"
+                  :triggers="['click', 'hover']"
+                  instant-move
+                >
+                  <div
+                    :class="[
+                      {
+                        'justify-center tw-flex tw-cursor-pointer tw-items-center tw-rounded-[8px] tw-p-[8px] tw-transition tw-duration-150 tw-ease-in-out': true,
+                        'tw-background-color-single-active tw-border-color-brand-base tw-border-[1.5px] tw-border-solid active:tw-scale-90':
+                          props.activeNav.parentNav === parentLink.title,
+                        'hover:tw-background-color-hover': props.activeNav.parentNav != parentLink.title,
+                        'active:tw-background-color-single-active active:tw-scale-90': true,
+                      },
+                    ]"
+                  >
+                    <component :is="parentLink.icon" v-if="parentLink.icon" class="tw-h-[1.25em] tw-w-[1.25em]" />
+                    <IconGlobe v-else />
+                  </div>
+
+                  <template #popper>
+                    <div
+                      class="tw-border-color-weak tw-border-x-0 tw-border-b tw-border-t-0 tw-border-solid tw-p-[8px]"
+                    >
+                      <h3 class="tw-body-sm-regular-medium tw-m-0">
+                        {{ parentLink.title }}
+                      </h3>
+                    </div>
+
+                    <template v-for="(menuLink, menuLinkIndex) in parentLink.menuLinks" :key="menuLinkIndex">
+                      <!-- #region - Menu link with submenu links -->
+                      <template v-if="menuLink.submenuLinks && menuLink.submenuLinks.length > 0">
+                        <Menu
+                          aria-id="sidenav-submenu-wrapper"
+                          distance="4"
+                          placement="right-start"
+                          :triggers="['click', 'hover']"
+                          instant-move
+                        >
+                          <div
+                            :class="[
+                              {
+                                'tw-body-sm-regular tw-relative tw-m-0 tw-flex tw-cursor-pointer tw-justify-between tw-px-[8px] tw-py-[6px] tw-align-middle tw-duration-150 tw-ease-in-out': true,
+                                'tw-background-color-single-active': props.activeNav.menu === menuLink.title,
+                                'hover:tw-background-color-hover': props.activeNav.menu !== menuLink.title,
+                                'active:tw-background-color-pressed': true,
+                              },
+                            ]"
+                          >
+                            <div
+                              v-if="props.activeNav.menu === menuLink.title"
+                              class="tw-background-color-brand-base tw-absolute tw-left-0 tw-top-0 tw-h-full tw-w-[2px]"
+                            ></div>
+                            <span>{{ menuLink.title }}</span>
+                            <IconCaretRight
+                              :class="[
+                                'tw-h-[16px] tw-w-[16px] tw-transform tw-font-normal tw-transition-transform tw-duration-300',
+                                props.activeNav.menu === menuLink.title ? '-tw-rotate-90' : 'hover:-tw-rotate-90',
+                              ]"
+                            />
+                          </div>
+
+                          <template #popper>
+                            <template
+                              v-for="(submenuLink, submenuLinkIndex) in menuLink.submenuLinks"
+                              :key="submenuLinkIndex"
+                            >
+                              <Menu aria-id="sidenav-sub-submenu-wrapper" :triggers="['click', 'hover']" instant-move>
+                                <div
+                                  :class="[
+                                    {
+                                      'tw-body-sm-regular tw-relative tw-m-0 tw-flex tw-cursor-pointer tw-justify-between tw-px-[8px] tw-py-[6px] tw-align-middle tw-duration-150 tw-ease-in-out': true,
+                                      'tw-background-color-single-active':
+                                        props.activeNav.submenu === submenuLink.title,
+                                      'hover:tw-background-color-hover': props.activeNav.submenu !== submenuLink.title,
+                                      'active:tw-background-color-pressed': true,
+                                    },
+                                  ]"
+                                  @click="handleRedirect($event, submenuLink.redirect)"
+                                >
+                                  <div
+                                    v-show="props.activeNav.submenu === submenuLink.title"
+                                    class="tw-background-color-brand-base tw-absolute tw-left-0 tw-top-0 tw-h-full tw-w-[2px]"
+                                  ></div>
+                                  <span>{{ submenuLink.title }}</span>
+                                </div>
+                              </Menu>
+                            </template>
+                          </template>
+                        </Menu>
+                      </template>
+                      <!-- #endregion - Menu link with submenu links -->
+
+                      <!-- #region - Menu link only -->
+                      <template v-else>
+                        <div
+                          :class="[
+                            'tw-body-sm-regular tw-m-0 tw-flex tw-cursor-pointer tw-justify-between tw-px-[8px] tw-py-[6px] tw-align-middle tw-duration-300 tw-ease-in-out',
+                            'hover:tw-background-color-hover',
+                            'active:tw-background-color-pressed',
+                            'last:tw-rounded-b-[12px]',
+                          ]"
+                          @click="handleRedirect($event, menuLink.redirect)"
+                        >
+                          <span>{{ menuLink.title }}</span>
+                        </div>
+                      </template>
+                      <!-- #endregion - Menu link only -->
+                    </template>
+                  </template>
+                </Menu>
+              </template>
+              <!-- #endregion - Parent link with menu links -->
+
+              <!-- #region - Parent link only  -->
+              <template v-else>
+                <Tooltip aria-id="default-tooltip" placement="right" distance="18" :triggers="['click']">
+                  <template #popper>
+                    <span class="tw-label-xs-medium">{{ parentLink.title }}</span>
+                  </template>
+                  <div
+                    :class="[
+                      'justify-center tw-flex tw-cursor-pointer tw-items-center tw-rounded-[8px] tw-p-[8px] tw-transition tw-duration-150 tw-ease-in-out',
+                      'hover:tw-background-color-hover',
+                      'active:tw-background-color-single-active active:tw-scale-90',
+                    ]"
+                    @click="handleRedirect($event, parentLink.redirect)"
+                  >
+                    <component :is="parentLink.icon" v-if="parentLink.icon" class="tw-h-[1.25em] tw-w-[1.25em]" />
+                    <IconGlobe v-else />
+                  </div>
+                </Tooltip>
+              </template>
+              <!-- #endregion - Parent link only -->
+            </template>
+            <div
+              v-if="navLinks.length > 0 && navLinkIndex < navLinks.length - 1"
+              class="tw-background-color-hover tw-h-[2px] tw-w-full"
+            ></div>
+          </template>
+          <!-- #endregion - Grouped Nav Links -->
+        </div>
+      </div>
+
+      <!-- #region - Avatar -->
+      <div
+        :class="[
+          'tw tw-grid tw-items-end tw-justify-center tw-pb-[16px]',
+          '[&>img]:tw-mx-auto [&>img]:tw-h-[24px] [&>img]:tw-w-[24px] [&>img]:tw-rounded-full',
+        ]"
+      >
+        <slot name="avatar-image" />
+      </div>
+      <!-- #endregion - Avatar -->
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { sidenavPropTypes, sidenavEmitTypes } from './sidenav';
+import { useSidenav } from './use-sidenav';
+
+import { Menu, Tooltip } from 'floating-vue';
+
+import IconPlusCircleFill from '~icons/ph/plus-circle-fill';
+import IconMagnifyingGlass from '~icons/ph/magnifying-glass';
+import IconGlobe from '~icons/ph/globe';
+import IconCaretRight from '~icons/ph/caret-right';
+
+import 'floating-vue/dist/style.css';
+
+const props = defineProps(sidenavPropTypes);
+const emit = defineEmits(sidenavEmitTypes);
+
+const { handleRedirect } = useSidenav(props, emit);
+</script>

package/src/components/sidenav/use-sidenav.ts

@@ -0,0 +1,31 @@
+import type { SetupContext } from 'vue';
+
+import type { SidenavPropTypes, SidenavEmitTypes } from './sidenav';
+
+interface MouseEventWithCtrl extends MouseEvent {
+  ctrlKey: boolean;
+}
+
+interface Redirect {
+  openInNewTab: boolean;
+  isAbsoluteURL: boolean;
+  link: string;
+}
+
+export const useSidenav = (props: SidenavPropTypes, emit: SetupContext<SidenavEmitTypes>['emit']) => {
+  const handleRedirect = (e: MouseEventWithCtrl, redirect: Redirect) => {
+    if (redirect) {
+      if (redirect.openInNewTab) {
+        window.open(redirect.link, '_blank');
+      } else if (redirect.isAbsoluteURL) {
+        location.href = redirect.link;
+      } else {
+        emit('route-push', redirect.link);
+      }
+    }
+  };
+
+  return {
+    handleRedirect,
+  };
+};

package/src/components/switch/switch.ts

@@ -0,0 +1,35 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+const SWITCH_STATES = ['default', 'hover', 'pressed', 'disabled'] as const;
+
+export const switchPropTypes = {
+  /**
+   * @description Switch UI state when hovered, pressed, disabled
+   */
+  state: {
+    type: String as PropType<(typeof SWITCH_STATES)[number]>,
+    validator: (value: (typeof SWITCH_STATES)[number]) => SWITCH_STATES.includes(value),
+    default: 'default',
+  },
+  /**
+   * @description Switch input state when disabled
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * @description Required prop value for v-model
+   */
+  modelValue: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+};
+
+export const switchEmitTypes = ['update:modelValue'];
+
+export type SwitchPropTypes = ExtractPropTypes<typeof switchPropTypes>;
+export type SwitchEmitTypes = typeof switchEmitTypes;

package/src/components/switch/switch.vue

@@ -0,0 +1,106 @@
+<template>
+  <div v-bind="switchProps" :class="['switch', switchTextClass]">
+    <label class="switch_text switch_left-text">
+      <slot name="leftText">
+        <slot></slot>
+      </slot>
+    </label>
+    <div ref="switchWrapperRef" class="switch_wrapper" >
+      <input 
+        ref="switchRef" 
+        v-model="proxyValue" 
+        type="checkbox" 
+        name="checkbox" 
+        :class="['switch_input', switchInputClass]"
+        :disabled="props.disabled"
+      >
+      <span :class="['switch_mark', switchMarkClass]"></span>
+    </div>
+    <label class="switch_text switch_right-text">
+      <slot name="rightText"></slot>
+    </label>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { switchEmitTypes, switchPropTypes } from './switch';
+import { useSwitch } from './use-switch';
+import { useVModel } from '@vueuse/core';
+
+const props = defineProps(switchPropTypes);
+const emit = defineEmits(switchEmitTypes);
+
+const proxyValue = useVModel(props, "modelValue", emit);
+
+const { 
+  switchWrapperRef, 
+  switchRef,
+  switchProps,
+  switchMarkClass,
+  switchTextClass,
+  switchInputClass,
+} = useSwitch(props);
+</script>
+
+<style lang="scss" scoped>
+.switch {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+
+  &_left-text {
+    margin-right: 8px;
+  }
+
+  &_right-text {
+    margin-left: 8px;
+  }
+
+  &_wrapper{
+    position: relative;
+    display: inline;
+    height: 24px;
+  }
+
+  &_input{
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    z-index: 1;
+    width: 48px;
+    height: 24px;
+    margin: 0;
+
+    &:checked ~ .switch_mark:before{
+      left: 28px;
+    }
+  }
+
+  &_mark{
+    display: inline-block;
+    position: relative;
+    box-sizing: border-box;
+    border-radius: 40px;
+    width: 48px;
+    height: 24px;
+    padding: 4px;
+
+    &:before,
+    &:after{
+      content: "";
+      position: absolute;
+    }
+
+    &:before{
+      @apply tw-bg-white-50;
+
+      top: 4px;
+      left: 4px;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+    }
+  }
+}
+</style>

package/src/components/switch/use-switch.ts

@@ -0,0 +1,106 @@
+import { computed, ref, ComputedRef } from 'vue';
+import { useElementHover, useMousePressed } from '@vueuse/core';
+import classNames from 'classnames';
+import type { SwitchPropTypes } from './switch';
+
+export const useSwitch = (props: SwitchPropTypes) => {
+  const switchWrapperRef = ref<HTMLDivElement | null>(null);
+  const switchRef = ref<HTMLInputElement | null>(null);
+  const isHovered = useElementHover(switchWrapperRef);
+  const { pressed } = useMousePressed({ target: switchRef });
+  const { disabled, state, modelValue } = props;
+
+  const switchProps: ComputedRef<Record<string, unknown>> = computed(() => {
+    return {
+      ...(disabled && { ariaDisabled: true }),
+      disabled: disabled,
+      autofocus: state === 'hover',
+      modelValue: modelValue,
+    };
+  });
+
+  // #region - Background CSS Class
+  const switchBackgroundCssClass: ComputedRef<string> = computed(() => {
+    if (props.disabled) {
+      return getDisabledBackground()
+    }
+    if (pressed.value) {
+      return getPressedBackground();
+    }
+    if (isHovered.value) {
+      return getHoveredBackground();
+    }
+
+    return getDefaultBackground();
+  });
+
+  function getDefaultBackground(): string {
+    return props.modelValue ? 
+      'tw-background-color-success-base' : 
+      'tw-switch-background-default';
+  }
+
+  function getHoveredBackground(): string {
+    return props.modelValue ? 
+      'tw-background-color-success-hover' :
+      'tw-switch-background-hover';
+  }
+
+  function getPressedBackground(): string {
+    return props.modelValue ? 
+      'tw-background-color-success-pressed' :
+      'tw-switch-background-pressed';
+  }
+
+  function getDisabledBackground(): string {
+    return classNames(
+      { 
+        'tw-background-color-success-base' : props.modelValue,
+        'tw-switch-background-default' : !props.modelValue
+      },
+      'tw-opacity-60',
+    );
+  }
+  // #endregion - Background CSS Class
+
+  const switchTextClass: ComputedRef<string> = computed(() => {
+    if (props.disabled) {
+      return 'tw-text-color-disabled';
+    }
+
+    return 'tw-text-color-strong';
+  });
+
+  const switchAnimationCssClass: ComputedRef<string> = computed(() => {
+    return classNames(
+      'tw-transition-colors',
+      'before:tw-transition-all',
+      'before:tw-duration-150',
+      'after:tw-transition-all',
+      'after:tw-duration-150',
+    );
+  });
+
+  const switchMarkClass: ComputedRef<string> = computed(() => {
+    return classNames(
+      switchBackgroundCssClass.value,
+      switchAnimationCssClass.value
+    );
+  });
+
+  const switchInputClass: ComputedRef<string> = computed(() => {
+    return classNames({
+      'tw-cursor-not-allowed': props.disabled,
+      'tw-cursor-pointer': !props.disabled,
+    });
+  });
+
+  return {
+    switchWrapperRef,
+    switchRef,
+    switchProps,
+    switchMarkClass,
+    switchTextClass,
+    switchInputClass
+  };
+};

package/src/main.ts

@@ -0,0 +1,13 @@
+import { createApp } from 'vue';
+
+import App from '@/App.vue';
+
+import '@/assets/styles/tailwind.css';
+
+import FloatingVue from 'floating-vue';
+
+const app = createApp(App);
+
+app.use(FloatingVue);
+
+app.mount('#app');