sprintify-ui 0.0.28 → 0.0.30

package/dist/style.css

@@ -1,4 +1,4 @@
-@charset "UTF-8";.spinner[data-v-945515f9]{animation:rotate-945515f9 1s linear infinite;-webkit-animation:rotate-945515f9 1s linear infinite;-moz-animation:rotate-945515f9 1s linear infinite}@keyframes rotate-945515f9{to{transform:rotate(360deg)}}.path[data-v-945515f9]{stroke-dasharray:170;stroke-dashoffset:20}.th[data-v-6e5812c9]{background-color:rgb(248 250 252 / var(--tw-bg-opacity));position:sticky;top:0px;z-index:1;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));--tw-bg-opacity: .75;--tw-backdrop-blur: blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}circle[data-v-b63fac0e]{transition:stroke-dashoffset .35s;transform:rotate(-90deg);transform-origin:50% 50%}/*!
+@charset "UTF-8";.spinner[data-v-945515f9]{animation:rotate-945515f9 1s linear infinite;-webkit-animation:rotate-945515f9 1s linear infinite;-moz-animation:rotate-945515f9 1s linear infinite}@keyframes rotate-945515f9{to{transform:rotate(360deg)}}.path[data-v-945515f9]{stroke-dasharray:170;stroke-dashoffset:20}.th[data-v-6e5812c9]{background-color:rgb(248 250 252 / var(--tw-bg-opacity));position:sticky;top:0px;z-index:1;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));--tw-bg-opacity: .75;--tw-backdrop-blur: blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}circle[data-v-e5ae83e3]{transition:stroke-dashoffset .35s;transform:rotate(-90deg);transform-origin:50% 50%}/*!
  * Pikaday
  * Copyright © 2014 David Bushell | BSD & MIT license | https://dbushell.com/
  */.pika-single{z-index:9999;display:block;position:relative;color:#333;background:#fff;border:1px solid #ccc;border-bottom-color:#bbb;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.pika-single:before,.pika-single:after{content:" ";display:table}.pika-single:after{clear:both}.pika-single.is-hidden{display:none}.pika-single.is-bound{position:absolute;box-shadow:0 5px 15px -5px #00000080}.pika-lendar{float:left;width:240px;margin:8px}.pika-title{position:relative;text-align:center}.pika-label{display:inline-block;position:relative;z-index:9999;overflow:hidden;margin:0;padding:5px 3px;font-size:14px;line-height:20px;font-weight:700;background-color:#fff}.pika-title select{cursor:pointer;position:absolute;z-index:9998;margin:0;left:0;top:5px;opacity:0}.pika-prev,.pika-next{display:block;cursor:pointer;position:relative;outline:none;border:0;padding:0;width:20px;height:30px;text-indent:20px;white-space:nowrap;overflow:hidden;background-color:transparent;background-position:center center;background-repeat:no-repeat;background-size:75% 75%;opacity:.5}.pika-prev:hover,.pika-next:hover{opacity:1}.pika-prev,.is-rtl .pika-next{float:left;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==)}.pika-next,.is-rtl .pika-prev{float:right;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=)}.pika-select{display:inline-block}.pika-table{width:100%;border-collapse:collapse;border-spacing:0;border:0}.pika-table th,.pika-table td{width:14.285714285714286%;padding:0}.pika-table th{color:#999;font-size:12px;line-height:25px;font-weight:700;text-align:center}.pika-button{cursor:pointer;display:block;box-sizing:border-box;-moz-box-sizing:border-box;outline:none;border:0;margin:0;width:100%;padding:5px;color:#666;font-size:12px;line-height:15px;text-align:right;background:#f5f5f5;height:initial}.pika-week{font-size:11px;color:#999}.is-today .pika-button{color:#3af;font-weight:700}.is-selected .pika-button,.has-event .pika-button{color:#fff;font-weight:700;background:#33aaff;box-shadow:inset 0 1px 3px #178fe5;border-radius:3px}.has-event .pika-button{background:#005da9;box-shadow:inset 0 1px 3px #0076c9}.is-disabled .pika-button,.is-inrange .pika-button{background:#D5E9F7}.is-startrange .pika-button{color:#fff;background:#6CB31D;box-shadow:none;border-radius:3px}.is-endrange .pika-button{color:#fff;background:#33aaff;box-shadow:none;border-radius:3px}.is-disabled .pika-button{pointer-events:none;cursor:default;color:#999;opacity:.3}.is-outside-current-month .pika-button{color:#999;opacity:.3}.is-selection-disabled{pointer-events:none;cursor:default}.pika-button:hover,.pika-row.pick-whole-week:hover .pika-button{color:#fff;background:#ff8000;box-shadow:none;border-radius:3px}.pika-table abbr{border-bottom:none;cursor:help}.pikaday-white{--backgroundColor: #ffffff;--textColor: #718096;--currentDateTextColor: #3182ce;--selectedDateBackgroundColor: #3182ce;--selectedDateTextColor: #ffffff;--labelTextColor: #4a5568;--weekDaysTextColor: #a0aec0;font-family:inherit;background-color:var(--backgroundColor);padding:.5rem;z-index:2000;margin:6px 0 0;--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);border-radius:.5rem}.pikaday-white .pika-title{width:100%;text-align:center;display:flex;justify-content:flex-start;margin-bottom:5px}.pikaday-white .pika-prev,.pikaday-white .pika-next{position:absolute;outline:none;padding:0;width:26px;height:26px;top:-1px;display:inline-block;margin-top:0;cursor:pointer;text-indent:-9999px;white-space:nowrap;overflow:hidden;background-color:transparent;background-position:center center;background-repeat:no-repeat;opacity:.7}.pikaday-white .pika-prev:hover,.pikaday-white .pika-next:hover{opacity:1}.pikaday-white .pika-prev{right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'%3E%3C/path%3E%3C/svg%3E")}.pikaday-white .pika-next{right:2px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'%3E%3C/path%3E%3C/svg%3E")}.pika-prev.is-disabled,.pika-next.is-disabled{cursor:default;opacity:.2}.pikaday-white .pika-label{margin-right:.375rem;border-radius:.25rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));padding:.25rem .5rem;font-size:14px;font-weight:500;line-height:1}.pikaday-white .pika-label{position:relative}.pikaday-white .pika-select-month,.pikaday-white .pika-select-year{width:100%;cursor:pointer;position:absolute;z-index:9998;margin:0;left:0;top:0;opacity:0;padding:0}.pikaday-white table{width:100%;border-collapse:collapse}.pikaday-white table th{width:2em;height:2em;font-weight:400;color:var(--weekDaysTextColor);text-align:center}.pikaday-white table th abbr{text-decoration:none}.pikaday-white table td{padding:1px}.pikaday-white table td button{width:2em;height:2em;text-align:center;border-radius:9999px;background-color:var(--backgroundColor)}.pikaday-white table td button:hover{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity))}.pikaday-white table td.is-today button{color:var(--currentDateTextColor)}.pikaday-white table td.is-selected button{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity));font-weight:400}.pikaday-white table td button{color:var(--textColor)}input::-moz-placeholder,textarea::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(148 163 184 / var(--tw-placeholder-opacity))}input::placeholder,textarea::placeholder{--tw-placeholder-opacity: 1;color:rgb(148 163 184 / var(--tw-placeholder-opacity))}

package/dist/types/src/components/BaseBadge.vue.d.ts

@@ -7,11 +7,11 @@ declare const _default: {
             color: "gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
             icon: string | undefined;
             size: "base" | "lg";
-            contrast: "low" | "high";
+            contrast: "high" | "low";
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             contrast: {
                 default: string;
-                type: PropType<"low" | "high">;
+                type: PropType<"high" | "low">;
             };
             color: {
                 default: string;
@@ -42,7 +42,7 @@ declare const _default: {
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             contrast: {
                 default: string;
-                type: PropType<"low" | "high">;
+                type: PropType<"high" | "low">;
             };
             color: {
                 default: string;
@@ -60,7 +60,7 @@ declare const _default: {
             color: "gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
             icon: string | undefined;
             size: "base" | "lg";
-            contrast: "low" | "high";
+            contrast: "high" | "low";
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -84,7 +84,7 @@ declare const _default: {
     } & Readonly<import("vue").ExtractPropTypes<{
         contrast: {
             default: string;
-            type: PropType<"low" | "high">;
+            type: PropType<"high" | "low">;
         };
         color: {
             default: string;
@@ -105,7 +105,7 @@ declare const _default: {
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
     contrast: {
         default: string;
-        type: PropType<"low" | "high">;
+        type: PropType<"high" | "low">;
     };
     color: {
         default: string;
@@ -123,7 +123,7 @@ declare const _default: {
     color: "gray" | "red" | "orange" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink";
     icon: string | undefined;
     size: "base" | "lg";
-    contrast: "low" | "high";
+    contrast: "high" | "low";
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         default: (_: {}) => any;

package/dist/types/src/components/{BaseProcessRing.vue.d.ts → BaseProgressCircle.vue.d.ts}

@@ -15,6 +15,7 @@ declare const _default: import("vue").DefineComponent<{
     normalizedRadius(): number;
     circumference(): number;
     strokeDashoffset(): number;
+    fontSize(): number;
 }, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     radius: {
         default: number;

package/dist/types/src/components/index.d.ts

@@ -44,7 +44,7 @@ import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
 import BasePagination from './BasePagination.vue';
 import BasePanel from './BasePanel.vue';
 import BasePassword from './BasePassword.vue';
-import BaseProcessRing from './BaseProcessRing.vue';
+import BaseProgressCircle from './BaseProgressCircle.vue';
 import BaseReadMore from './BaseReadMore.vue';
 import BaseSelect from './BaseSelect.vue';
 import BaseSideNavigation from './BaseSideNavigation.vue';
@@ -64,4 +64,4 @@ import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProcessRing, BaseReadMore, BaseSelect, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseReadMore, BaseSelect, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseBadge.vue

@@ -14,7 +14,7 @@ import { BaseIcon } from '.';
 
 const props = defineProps({
   contrast: {
-    default: 'low',
+    default: 'high',
     type: String as PropType<'low' | 'high'>,
   },
   color: {

package/src/components/{BaseProcessRing.stories.js → BaseProgressCircle.stories.js}

@@ -1,8 +1,8 @@
-import BaseProcessRing from './BaseProcessRing.vue';
+import BaseProgressCircle from './BaseProgressCircle.vue';
 
 export default {
-  title: 'Components/BaseProcessRing',
-  component: BaseProcessRing,
+  title: 'Components/BaseProgressCircle',
+  component: BaseProgressCircle,
   args: {
     class: 'text-primary-500',
     radius: 100,
@@ -13,13 +13,13 @@ export default {
 
 const Template = (args) => ({
   components: {
-    BaseProcessRing,
+    BaseProgressCircle,
   },
   setup() {
     return { args };
   },
   template: `
-    <BaseProcessRing v-bind="args"></BaseProcessRing>
+    <BaseProgressCircle v-bind="args"></BaseProgressCircle>
   `,
 });
 

package/src/components/{BaseProcessRing.vue → BaseProgressCircle.vue}

@@ -1,5 +1,14 @@
 <template>
   <svg :height="radius * 2" :width="radius * 2">
+    <circle
+      stroke="currentColor"
+      class="text-slate-200"
+      :stroke-width="stroke"
+      fill="transparent"
+      :r="normalizedRadius"
+      :cx="radius"
+      :cy="radius"
+    />
     <circle
       stroke="currentColor"
       :stroke-dasharray="`${circumference} ${circumference}`"
@@ -10,6 +19,15 @@
       :cx="radius"
       :cy="radius"
     />
+    <text
+      text-anchor="middle"
+      alignment-baseline="middle"
+      :x="radius"
+      :y="radius + fontSize / 10"
+      :style="{ fontSize: fontSize + 'px', fontWeight: 600 }"
+    >
+      {{ Math.round(progress * 100) }}%
+    </text>
   </svg>
 </template>
 
@@ -43,6 +61,9 @@ export default defineComponent({
         this.circumference - Math.min(1, this.progress) * this.circumference;
       return offset;
     },
+    fontSize(): number {
+      return Math.min(30, this.radius / 2.7);
+    },
   },
 });
 </script>

package/src/components/index.ts

@@ -44,7 +44,7 @@ import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
 import BasePagination from './BasePagination.vue';
 import BasePanel from './BasePanel.vue';
 import BasePassword from './BasePassword.vue';
-import BaseProcessRing from './BaseProcessRing.vue';
+import BaseProgressCircle from './BaseProgressCircle.vue';
 import BaseReadMore from './BaseReadMore.vue';
 import BaseSelect from './BaseSelect.vue';
 import BaseSideNavigation from './BaseSideNavigation.vue';
@@ -113,7 +113,7 @@ export {
   BasePagination,
   BasePanel,
   BasePassword,
-  BaseProcessRing,
+  BaseProgressCircle,
   BaseReadMore,
   BaseSelect,
   BaseSideNavigation,