sprintify-ui 0.6.14 → 0.6.15

package/src/assets/main.css

@@ -1,5 +1,13 @@
-@import "./form.css";
+@import "./base-calendar.css";
+@import "./base-cropper.css";
+@import "./base-date-picker.css";
+@import "./base-rich-text.css";
+@import "./base-table.css";
+@import "./base-tabs.css";
+@import "./base-spinner.css";
 @import "./flatpickr.css";
+@import "./form.css";
+@import "./google-pac.css";
 
 [aria-label][role~="tooltip"]::after {
   white-space: pre-line;
@@ -8,7 +16,7 @@
 .btn-group {
   display: flex;
   align-items: center;
-  justify-content: start;
+  justify-content: flex-start;
   margin: 0 -0.5rem;
 
   & > *:not(:first-child) .btn,

package/src/components/BaseAddressForm.vue

@@ -323,32 +323,3 @@ function fillAddress() {
   });
 }
 </script>
-
-<style lang="postcss">
-.pac-container {
-  @apply rounded-lg border border-gray-200 font-sans shadow-md;
-
-  & .pac-item {
-    @apply flex cursor-pointer items-center py-2 pl-2;
-  }
-
-  & .pac-icon {
-    @apply m-0 mr-2;
-  }
-
-  & .pac-item,
-  & .pac-item-query,
-  & .pac-matched {
-    @apply text-base;
-  }
-
-  & .pac-matched {
-    @apply font-semibold;
-  }
-
-  &:after {
-    background-image: none !important;
-    @apply h-0 p-0;
-  }
-}
-</style>

package/src/components/BaseCalendar.vue

@@ -1,7 +1,7 @@
 <template>
   <FullCalendar
     ref="fullCalendar"
-    class="base-full-calendar"
+    class="base-calendar"
     :options="calendarOptions"
   >
     <template
@@ -185,32 +185,3 @@ function remove(payload: any) {
 }
 
 </script>
-<style lang="postcss">
-.base-full-calendar {
-  &.fc {
-    .fc-button-primary:disabled {
-      @apply btn btn-primary cursor-not-allowed;
-    }
-
-    .fc-button-primary {
-      @apply btn btn-primary;
-    }
-
-    .fc-button-primary:not(:disabled).fc-button-active {
-      @apply bg-primary-600 text-white border-primary-700
-    }
-
-    .fc-button-primary:not(:disabled):active {
-      @apply bg-primary-600 text-white border-primary-700
-    }
-
-    .fc-button-primary:hover {
-      @apply border-primary-700;
-    }
-
-    .fc-button-primary:focus {
-      @apply ring-4 ring-primary-200 !important;
-    }
-  }
-}
-</style>

package/src/components/BaseCropper.vue

@@ -21,8 +21,8 @@
           width: cropperConfiguration?.boundary?.width + 'px',
           height: cropperConfiguration?.showZoomer
             ? (cropperConfiguration?.boundary?.height ?? 0) +
-              ZOOMER_HEIGHT +
-              'px'
+            ZOOMER_HEIGHT +
+            'px'
             : cropperConfiguration?.boundary?.height + 'px',
         }"
       >
@@ -316,10 +316,10 @@ async function save(
 
   const resultConfig = result ??
     props.saveOptions ?? {
-      type: 'blob',
-      size: 'original',
-      circle: false,
-    };
+    type: 'blob',
+    size: 'original',
+    circle: false,
+  };
 
   const r = await cropper.result(resultConfig);
 
@@ -391,68 +391,3 @@ const shared = {
 
 defineExpose(shared);
 </script>
-
-<style lang="postcss">
-.base-cropper-wrapper {
-  .cr-slider-wrap {
-    margin-top: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:before {
-      content: '-';
-      flex-shrink: 0;
-      font-size: 20px;
-      font-weight: 400;
-      @apply text-slate-900;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 36px;
-      height: 24px;
-    }
-
-    &:after {
-      content: '+';
-      flex-shrink: 0;
-      font-size: 20px;
-      font-weight: 400;
-      @apply text-slate-900;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 36px;
-      height: 24px;
-    }
-  }
-  .cr-slider::-webkit-slider-runnable-track {
-    @apply bg-gray-300;
-    height: 5px;
-  }
-  .cr-slider::-moz-range-track {
-    @apply bg-gray-300;
-    height: 5px;
-  }
-  .cr-slider::-webkit-slider-thumb {
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-    position: relative;
-    top: -3px;
-    @apply bg-white;
-    @apply shadow-md;
-    @apply ring-0;
-  }
-  .cr-slider::-moz-range-thumb {
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-    position: relative;
-    top: -3px;
-    @apply bg-white;
-    @apply shadow-md;
-    @apply ring-0;
-  }
-}
-</style>

package/src/components/BaseDatePicker.vue

@@ -291,11 +291,3 @@ function clear() {
   emitUpdate(null);
 }
 </script>
-
-<style>
-.base-date-picker.hide-input {
-  .flatpickr-input {
-    display: none;
-  }
-}
-</style>

package/src/components/BaseProgressCircle.vue

@@ -11,17 +11,18 @@
       :r="normalizedRadius"
       :cx="radius"
       :cy="radius"
-    />
+      :style="circleStyle"
+    ></circle>
     <circle
       stroke="currentColor"
       :stroke-dasharray="`${circumference} ${circumference}`"
-      :style="{ strokeDashoffset: strokeDashoffset }"
+      :style="{ ...circleStyle, strokeDashoffset: strokeDashoffset }"
       :stroke-width="stroke"
       fill="transparent"
       :r="normalizedRadius"
       :cx="radius"
       :cy="radius"
-    />
+    ></circle>
     <text
       text-anchor="middle"
       alignment-baseline="middle"
@@ -67,14 +68,13 @@ export default defineComponent({
     fontSize(): number {
       return Math.min(30, this.radius / 2.7);
     },
+    circleStyle(): Record<string, string> {
+      return {
+        transition: 'stroke-dashoffset 0.35s',
+        transform: 'rotate(-90deg)',
+        transformOrigin: '50% 50%',
+      };
+    },
   },
 });
 </script>
-
-<style scoped>
-circle {
-  transition: stroke-dashoffset 0.35s;
-  transform: rotate(-90deg);
-  transform-origin: 50% 50%;
-}
-</style>

package/src/components/BaseRichText.vue

@@ -95,104 +95,3 @@ function updateChange(value: string | null): string | null {
   return '';
 }
 </script>
-
-<style lang="postcss">
-.base-rich-text {
-  .ql-toolbar.ql-snow {
-    @apply rounded-t border-slate-300 font-sans;
-  }
-
-  .ql-container.ql-snow {
-    @apply rounded-b border-slate-300 font-sans;
-  }
-
-  .ql-container {
-    @apply font-sans;
-  }
-
-  &.error {
-
-    & .ql-toolbar.ql-snow,
-    & .ql-container.ql-snow {
-      @apply border-red-500;
-    }
-  }
-
-  .ql-tooltip {
-    @apply z-menu;
-  }
-
-  .ql-container {
-    @apply text-slate-900;
-  }
-
-  .ql-editor.ql-blank::before {
-    @apply text-base text-slate-400 font-light not-italic;
-  }
-
-  /** Style Prose */
-  .ql-editor {
-    h1 {
-      @apply mt-0 mb-8 text-4xl font-bold leading-snug tracking-normal;
-    }
-
-    h2 {
-      @apply mt-6 mb-4 text-3xl font-bold leading-snug tracking-normal;
-    }
-
-    h3 {
-      @apply mt-5 mb-3 text-2xl font-bold leading-snug tracking-normal;
-    }
-
-    h4 {
-      @apply mt-4 mb-2 text-xl font-bold leading-snug tracking-normal;
-    }
-
-    p {
-      @apply my-5 text-base leading-relaxed;
-
-      &:first-child {
-        @apply mt-0;
-      }
-    }
-
-    ol,
-    ul {
-      padding-left: 2rem;
-
-      li {
-        @apply my-2 text-base leading-relaxed;
-        padding-left: 0.5rem;
-
-        &::before {
-          @apply text-slate-500;
-          width: 2em;
-          text-align: left;
-          position: absolute;
-          left: 3rem;
-        }
-      }
-    }
-
-    blockquote {
-      @apply my-5 text-base;
-    }
-
-    pre {
-      @apply my-5 p-4 text-sm;
-    }
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p {
-    &:first-child {
-      margin-top: 0;
-    }
-  }
-}
-</style>

package/src/components/BaseTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative w-full overflow-hidden"
+    class="base-table relative w-full overflow-hidden"
     :class="maxHeight ? 'base-table--has-max-height' : ''"
   >
     <div
@@ -884,21 +884,3 @@ defineExpose({
   scrollTop,
 });
 </script>
-
-<style lang="postcss" scoped>
-.th {
-  @apply relative z-[2];
-  @apply bg-slate-50;
-  @apply border-b border-slate-300;
-}
-
-.base-table--has-max-height .th {
-  @apply sticky;
-  @apply top-0;
-  @apply bg-opacity-75 backdrop-blur backdrop-filter;
-}
-
-tbody tr.item-row:hover td {
-  @apply bg-slate-50;
-}
-</style>

package/src/components/BaseTabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative">
+  <div class="base-tabs relative">
     <div class="absolute bottom-0 left-0 h-px w-full bg-slate-300" />
     <div
       ref="scrollable"
@@ -154,9 +154,3 @@ function animateLine(animate = true) {
 
 }
 </script>
-
-<style scoped>
-.scrollable::-webkit-scrollbar {
-  display: none;
-}
-</style>

package/src/svg/BaseSpinnerLarge.vue

@@ -1,6 +1,6 @@
 <template>
   <svg
-    class="spinner h-20 w-20"
+    class="base-spinner-large h-20 w-20"
     viewBox="0 0 66 66"
     xmlns="http://www.w3.org/2000/svg"
   >
@@ -12,23 +12,23 @@
       cy="33"
       r="30"
       stroke="url(#gradient)"
-    />
+    ></circle>
     <linearGradient id="gradient">
       <stop
         offset="50%"
         stop-color="#2563eb"
         stop-opacity="1"
-      />
+      ></stop>
       <stop
         offset="65%"
         stop-color="#2563eb"
         stop-opacity=".5"
-      />
+      ></stop>
       <stop
         offset="100%"
         stop-color="#2563eb"
         stop-opacity="0"
-      />
+      ></stop>
     </linearGradient>
   </svg>
 </template>
@@ -38,22 +38,3 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({});
 </script>
-
-<style scoped>
-.spinner {
-  animation: rotate 1s linear infinite;
-  -webkit-animation: rotate 1s linear infinite;
-  -moz-animation: rotate 1s linear infinite;
-}
-
-@keyframes rotate {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.path {
-  stroke-dasharray: 170;
-  stroke-dashoffset: 20;
-}
-</style>

package/src/svg/BaseSpinnerSmall.vue

@@ -6,10 +6,8 @@
     <path
       fill="currentColor"
       d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
-    />
+    ></path>
   </svg>
 </template>
 
 <script lang="ts" setup></script>
-
-<style scoped></style>