design-system-next 2.11.6 → 2.11.7

package/dist/package.json.d.ts

@@ -1,7 +1,7 @@
 declare const _default: {
   "name": "design-system-next",
   "private": false,
-  "version": "2.11.6",
+  "version": "2.11.7",
   "main": "./dist/design-system-next.umd.js",
   "module": "./dist/design-system-next.es.js",
   "repository": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "design-system-next",
   "private": false,
-  "version": "2.11.6",
+  "version": "2.11.7",
   "main": "./dist/design-system-next.umd.js",
   "module": "./dist/design-system-next.es.js",
   "repository": {

package/src/App.vue

@@ -1,46 +1,3 @@
 <template>
-  <spr-button tone="success" @click="isSidepanelOpen = true">Open Sidepanel</spr-button>
-  <spr-sidepanel :is-open="isSidepanelOpen" header-title="Sidepanel Example" @close="isSidepanelOpen = false">
-    <div class="p-4">Sidepanel Content</div>
-    <template #footer>
-      <div class="spr-flex spr-justify-end spr-gap-2 spr-px-2">
-        <spr-button>Cancel</spr-button>
-        <spr-button-dropdown
-          v-model="wew"
-          dropdown-id="example1"
-          :menu-list="menuList"
-          placement="top-end"
-          popper-inner-width="200px"
-        >
-          Button Dropdown
-        </spr-button-dropdown>
-      </div>
-    </template>
-  </spr-sidepanel>
+  <div>Test Component Here</div>
 </template>
-<script setup>
-import { ref } from 'vue';
-
-import SprButton from './components/button/button.vue';
-import SprButtonDropdown from './components/button/button-dropdown/button-dropdown.vue';
-import SprSidepanel from './components/sidepanel/sidepanel.vue';
-
-const isSidepanelOpen = ref(true);
-
-const wew = ref();
-
-const menuList = ref([
-  {
-    text: 'Option 1',
-    value: 'option1',
-    icon: 'ph:check',
-    iconColor: 'spr-text-color-brand-base',
-  },
-  {
-    text: 'Option 2',
-    value: 'option2',
-    icon: 'ph:check',
-    iconColor: 'spr-text-color-brand-base',
-  },
-]);
-</script>

package/src/components/calendar-cell/calendar-cell.ts

@@ -11,9 +11,11 @@ export const calendarCellPropTypes = {
   },
   title: {
     type: String,
+    default: '',
   },
   description: {
     type: String,
+    default: '',
   },
   status: {
     type: String,
@@ -49,6 +51,10 @@ export const calendarCellPropTypes = {
     type: Boolean,
     default: false,
   },
+  customColor: {
+    type: String,
+    default: '',
+  },
 };
 
 export type CalendarCellPropTypes = ExtractPropTypes<typeof calendarCellPropTypes>;

package/src/components/calendar-cell/calendar-cell.vue

@@ -1,5 +1,10 @@
 <template>
-  <div v-if="!props.loading" :class="getCalendarCellClassess.getMainClasses" @click="handleClick">
+  <div
+    v-if="!props.loading"
+    :class="getCalendarCellClassess.getMainClasses"
+    :style="props.customColor ? getCustomColorStyles : {}"
+    @click="handleClick"
+  >
     <slot name="prefix">
       <Icon v-if="hasIconStatus" :icon="getCellIcon" />
     </slot>
@@ -19,7 +24,7 @@
     </slot>
   </div>
 
-  <div v-else :class="getCalendarCellClassess.getMainClasses" />
+  <div v-else :class="getCalendarCellClassess.getMainClasses" :style="props.customColor ? getCustomColorStyles : {}" />
 </template>
 
 <script setup lang="ts">
@@ -33,6 +38,14 @@ import SprStatus from '@/components/status/status.vue';
 const props = defineProps(calendarCellPropTypes);
 const emit = defineEmits(calendarCellEmitTypes);
 
-const { getCalendarCellClassess, getShiftLabel, getCellIcon, hasIconStatus, isError, hasContent, handleClick } =
-  useCalendarCell(props, emit);
+const {
+  getCalendarCellClassess,
+  getShiftLabel,
+  getCellIcon,
+  hasIconStatus,
+  isError,
+  hasContent,
+  handleClick,
+  getCustomColorStyles,
+} = useCalendarCell(props, emit);
 </script>

package/src/components/calendar-cell/use-calendar-cell.ts

@@ -1,9 +1,11 @@
-import { computed, SetupContext } from 'vue';
+import { computed, SetupContext, toRefs } from 'vue';
 import classNames from 'classnames';
 
 import type { CalendarCellPropTypes, CalendarCellEmitTypes } from './calendar-cell';
 
 export const useCalendarCell = (props: CalendarCellPropTypes, emit: SetupContext<CalendarCellEmitTypes>['emit']) => {
+  const { title, description, type, status, subDescription, icon, fullwidth, viewOnly, loading, customColor } =
+    toRefs(props);
   const offlineStatus = ['restday', 'vacation', 'holiday', 'exempt', 'sick', 'emergency'];
   const shiftLabels: Record<string, string> = {
     standard: 'Standard Day Shift',
@@ -48,50 +50,61 @@ export const useCalendarCell = (props: CalendarCellPropTypes, emit: SetupContext
     'fixed-flexible': 'spr-border-[#C771A6] spr-bg-[#FFF2FA]',
   };
 
-  const hasContent = computed(() => props.title || props.description || getShiftLabel.value);
-  const hasIconStatus = computed(() => offlineStatus.includes(props.type) && props.status != 'error');
-  const isError = computed(() => props.status === 'error');
+  const hasContent = computed(() => title.value || description.value || getShiftLabel.value);
+  const hasIconStatus = computed(() => offlineStatus.includes(type.value) && status.value != 'error');
+  const isError = computed(() => status.value === 'error');
 
   const getShiftLabel = computed((): string => {
-    return props.subDescription || shiftLabels[props.type];
+    return subDescription.value || shiftLabels[type.value];
   });
 
   const getCellIcon = computed((): string => {
-    return props.icon || iconMap[props.type];
+    return icon.value || iconMap[type.value];
   });
 
   const getCellClasses = computed((): string => {
-    return typeClasses[props.type] || 'spr-border-color-supporting spr-background-color-surface';
+    return typeClasses[type.value] || 'spr-border-kangkong-700 spr-bg-kangkong-50';
+  });
+
+  const getCustomColorStyles = computed(() => {
+    if (!customColor.value || !customColor.value.startsWith('#')) return {};
+
+    const opacity = '20'; // 20 in hex = 12.5% opacity
+
+    return {
+      borderColor: customColor.value,
+      backgroundColor: customColor.value.startsWith('#') ? `${customColor.value}${opacity}` : customColor.value,
+    };
   });
 
   const getCalendarCellClassess = computed(() => {
     const calendarCellWrapper = classNames(
       'spr-flex spr-items-center spr-p-size-spacing-3xs spr-gap-size-spacing-3xs spr-relative spr-rounded-lg spr-border-2 spr-transition-all sm:spr-flex-col spr-overflow-hidden',
       {
-        'spr-w-full': props.fullwidth,
-        'spr-max-w-[217px]': !props.fullwidth,
-        'hover:spr-drop-shadow-sm spr-cursor-pointer': !props.viewOnly,
-        'spr-h-[80px] spr-skeletal-loader': props.loading,
+        'spr-w-full': fullwidth.value,
+        'spr-max-w-[217px]': !fullwidth.value,
+        'hover:spr-drop-shadow-sm spr-cursor-pointer': !viewOnly.value,
+        'spr-h-[80px] spr-skeletal-loader': loading.value,
       },
     );
 
     const statusCellClasses = classNames({
-      'spr-border-dashed': props.status === 'pending',
-      'spr-border-solid spr-border-color-danger-base': props.status === 'error',
-      'spr-border-solid': !props.status || (props.status !== 'pending' && props.status !== 'error'),
+      'spr-border-dashed': status.value === 'pending',
+      'spr-border-solid spr-border-color-danger-base': status.value === 'error',
+      'spr-border-solid': !status.value || (status.value !== 'pending' && status.value !== 'error'),
     });
 
     const titleClasses = classNames('spr-text-color-strong spr-body-sm-regular-medium', {
-      'spr-text-color-danger-base': props.status === 'error',
+      'spr-text-color-danger-base': status.value === 'error',
     });
 
     const descriptionClasses = classNames('spr-text-color-strong spr-body-sm-regular', {
-      'spr-text-color-danger-base': props.status === 'error',
+      'spr-text-color-danger-base': status.value === 'error',
     });
 
     const getTypeLabelClassess = classNames('spr-text-color-strong spr-body-sm-regular', {
-      'spr-text-color-danger-base': props.status === 'error',
-      'spr-text-color-strong spr-body-sm-regular-medium': offlineStatus.includes(props.type),
+      'spr-text-color-danger-base': status.value === 'error',
+      'spr-text-color-strong spr-body-sm-regular-medium': offlineStatus.includes(type.value),
     });
 
     const getMainClasses = classNames(calendarCellWrapper, getCellClasses.value, statusCellClasses);
@@ -106,7 +119,7 @@ export const useCalendarCell = (props: CalendarCellPropTypes, emit: SetupContext
   });
 
   const handleClick = (evt: MouseEvent) => {
-    if (props.viewOnly) {
+    if (viewOnly.value) {
       evt.stopPropagation();
 
       return;
@@ -123,5 +136,6 @@ export const useCalendarCell = (props: CalendarCellPropTypes, emit: SetupContext
     isError,
     hasContent,
     handleClick,
+    getCustomColorStyles,
   };
 };