@globalbrain/sefirot 2.0.0 → 2.1.0

package/lib/components/SButton.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import SIcon from './SIcon.vue'
-import SIconPreloader from './icons/SIconPreloader.vue'
+import SSpinner from './SSpinner.vue'
 
 export type Size = 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
 
@@ -68,7 +68,7 @@ function handleClick(): void {
 
     <transition name="fade">
       <span v-if="loading" key="loading" class="loader">
-        <SIconPreloader class="loader-icon" />
+        <SSpinner class="loader-icon" />
       </span>
     </transition>
   </component>
@@ -96,7 +96,7 @@ function handleClick(): void {
     &:hover  { background-color: var(--button-fill-bg-hover); }
     &:active { background-color: var(--button-fill-bg-focus); }
 
-    & .loader-icon :deep(.bar) { fill: var(--c-white); }
+    & .loader-icon { color: var(--c-text-inverse-1); }
   }
 
   &.white {
@@ -106,7 +106,7 @@ function handleClick(): void {
     &:hover  { background-color: var(--c-gray-light-3); }
     &:active { background-color: var(--c-gray-light-1); }
 
-    & .loader-icon :deep(.bar) { fill: var(--c-white); }
+    & .loader-icon { color: var(--c-white); }
   }
 
   &.black {
@@ -116,7 +116,7 @@ function handleClick(): void {
     &:hover  { background-color: var(--c-gray-dark-4); }
     &:active { background-color: var(--c-gray-dark-3); }
 
-    & .loader-icon :deep(.bar) { fill: var(--c-white); }
+    & .loader-icon { color: var(--c-white); }
   }
 
   &.info {
@@ -126,7 +126,7 @@ function handleClick(): void {
     &:hover  { background-color: var(--c-info-dark); }
     &:active { background-color: var(--c-info-darker); }
 
-    & .loader-icon :deep(.bar) { fill: var(--c-white); }
+    & .loader-icon { color: var(--c-white); }
   }
 
   &.success {
@@ -136,7 +136,7 @@ function handleClick(): void {
     &:hover  { background-color: var(--c-success-dark); }
     &:active { background-color: var(--c-success-darker); }
 
-    & .loader-icon :deep(.bar) { fill: var(--c-white); }
+    & .loader-icon { color: var(--c-white); }
   }
 
   &.warning {
@@ -146,7 +146,7 @@ function handleClick(): void {
     &:hover  { background-color: var(--c-warning-dark); }
     &:active { background-color: var(--c-warning-darker); }
 
-    & .loader-icon :deep(.bar) { fill: var(--c-white); }
+    & .loader-icon { color: var(--c-white); }
   }
 
   &.danger {
@@ -156,7 +156,7 @@ function handleClick(): void {
     &:hover  { background-color: var(--c-danger-dark); }
     &:active { background-color: var(--c-danger-darker); }
 
-    & .loader-icon :deep(.bar) { fill: var(--c-white); }
+    & .loader-icon { color: var(--c-white); }
   }
 
   &.mute {
@@ -167,7 +167,7 @@ function handleClick(): void {
     &:hover  { border-color: var(--c-divider); background-color: var(--c-gray-light-4); }
     &:active { background-color: var(--c-bg-soft); }
 
-    & .loader-icon :deep(.bar) { fill: var(--c-black); }
+    & .loader-icon { color: var(--c-black); }
 
     .dark & {
       border-color: var(--c-divider-light);
@@ -176,7 +176,7 @@ function handleClick(): void {
       &:hover  { border-color: var(--c-divider); background-color: var(--c-gray-dark-5); }
       &:active { background-color: var(--c-bg-soft); }
 
-      & .loader-icon :deep(.bar) { fill: var(--c-white); }
+      & .loader-icon { color: var(--c-white); }
     }
   }
 
@@ -348,8 +348,8 @@ function handleClick(): void {
   font-size: 12px;
 
   .icon-svg {
-    width: 14px;
-    height: 14px;
+    width: 16px;
+    height: 16px;
   }
 
   &.mini.rounded {
@@ -379,8 +379,8 @@ function handleClick(): void {
   font-size: 12px;
 
   .icon-svg {
-    width: 14px;
-    height: 14px;
+    width: 18px;
+    height: 18px;
   }
 
   &.small.rounded {
@@ -410,8 +410,8 @@ function handleClick(): void {
   font-size: 14px;
 
   .icon-svg {
-    width: 16px;
-    height: 16px;
+    width: 20px;
+    height: 20px;
   }
 
   &.medium.rounded {
@@ -441,8 +441,8 @@ function handleClick(): void {
   font-size: 14px;
 
   .icon-svg {
-    width: 18px;
-    height: 18px;
+    width: 20px;
+    height: 20px;
   }
 
   &.large.rounded {
@@ -608,7 +608,8 @@ function handleClick(): void {
 
 .icon-svg {
   fill: currentColor;
-  transition: fill 0.25s;
+  transition-property: color, fill;
+  transition-duration: 0.25s;
 }
 
 .loader {
@@ -701,9 +702,7 @@ function handleClick(): void {
     }
   }
 
-  & .loader-icon :deep(.bar) {
-    fill: var(--c-text-inverse-1);
-  }
+  & .loader-icon { color: var(--c-text-inverse-1); }
 }
 
 .SButton.secondary {

package/lib/components/SDropdownSectionFilter.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
+import IconCheck from '@iconify-icons/ph/check'
 import type { MaybeRef } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import { ref, computed, unref, onMounted } from 'vue'
 import { DropdownSectionFilterSelectedValue, DropdownSectionFilterOption } from '../composables/Dropdown'
 import { isArray } from '../support/Utils'
 import SDropdownSectionFilterItem from './SDropdownSectionFilterItem.vue'
-import SIconCheck from './icons/SIconCheck.vue'
+import SIcon from './SIcon.vue'
 
 const props = defineProps<{
   search?: boolean
@@ -71,7 +72,7 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
         >
           <span class="checkbox">
             <span class="checkbox-box">
-              <SIconCheck class="checkbox-icon" />
+              <SIcon :icon="IconCheck" class="checkbox-icon" />
             </span>
           </span>
           <span class="option-item">
@@ -167,7 +168,7 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
   display: block;
   width: 10px;
   height: 10px;
-  fill: var(--c-white);
+  color: var(--c-white);
   opacity: 0;
   transition: opacity 0.25s;
 

package/lib/components/SInputCheckbox.vue

@@ -11,7 +11,7 @@
       <div class="input" :class="{ on: modelValue }" role="button" @click="emitChange">
         <div class="box">
           <div class="check">
-            <SIconCheck class="check-icon" />
+            <SIcon :icon="IconCheck" class="check-icon" />
           </div>
         </div>
 
@@ -22,10 +22,11 @@
 </template>
 
 <script setup lang="ts">
+import IconCheck from '@iconify-icons/ph/check'
 import { PropType } from 'vue'
 import { Validatable } from '../composables/Validation'
+import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
-import SIconCheck from './icons/SIconCheck.vue'
 
 type Size = 'mini' | 'small' | 'medium'
 
@@ -101,7 +102,7 @@ function emitChange() {
 .check-icon {
   width: 10px;
   height: 10px;
-  fill: var(--c-white);
+  color: var(--c-white);
 }
 
 .text {

package/lib/components/SInputDropdown.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import IconCaretDown from '@iconify-icons/ph/caret-down'
+import IconCaretUp from '@iconify-icons/ph/caret-up'
 import xor from 'lodash-es/xor'
 import { computed } from 'vue'
 import type { DropdownSectionFilter } from '../composables/Dropdown'
@@ -6,10 +8,9 @@ import { useFlyout } from '../composables/Flyout'
 import { Validatable } from '../composables/Validation'
 import { isArray } from '../support/Utils'
 import SDropdown from './SDropdown.vue'
+import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
 import SInputDropdownItem from './SInputDropdownItem.vue'
-import SIconChevronDown from './icons/SIconChevronDown.vue'
-import SIconChevronUp from './icons/SIconChevronUp.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
 export type PrimitiveValue = string | number | boolean | null
@@ -144,8 +145,8 @@ function handleArray(value: OptionValue) {
         </div>
 
         <div class="box-icon">
-          <SIconChevronUp class="box-icon-svg up" />
-          <SIconChevronDown class="box-icon-svg down" />
+          <SIcon :icon="IconCaretUp" class="box-icon-svg up" />
+          <SIcon :icon="IconCaretDown" class="box-icon-svg down" />
         </div>
       </div>
 
@@ -277,7 +278,7 @@ function handleArray(value: OptionValue) {
   display: block;
   width: 14px;
   height: 14px;
-  fill: var(--c-text-2);
+  color: var(--c-text-2);
 }
 
 .box-icon-svg.up {

package/lib/components/SInputDropdownItemAvatar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import IconX from '@iconify-icons/ph/x'
 import SAvatar from './SAvatar.vue'
-import SIconX from './icons/SIconX.vue'
+import SIcon from './SIcon.vue'
 
 defineProps<{
   label: string
@@ -25,7 +26,7 @@ defineEmits<{
 
     <div v-if="!disabled" class="remove" role="button" @click="$emit('remove', value)">
       <div class="remove-box">
-        <SIconX class="remove-icon" />
+        <SIcon :icon="IconX" class="remove-icon" />
       </div>
     </div>
   </div>
@@ -94,6 +95,5 @@ defineEmits<{
 .remove-icon {
   width: 12px;
   height: 12px;
-  fill: currentColor;
 }
 </style>

package/lib/components/SInputDropdownItemText.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import SIconX from './icons/SIconX.vue'
+import IconX from '@iconify-icons/ph/x'
+import SIcon from './SIcon.vue'
 
 defineProps<{
   label: string
@@ -18,7 +19,7 @@ defineEmits<{
 
     <div v-if="!disabled" class="remove" role="button" @click.stop="$emit('remove', value)">
       <div class="remove-box">
-        <SIconX class="remove-icon" />
+        <SIcon :icon="IconX" class="remove-icon" />
       </div>
     </div>
   </div>
@@ -86,6 +87,5 @@ defineEmits<{
 .remove-icon {
   width: 12px;
   height: 12px;
-  fill: currentColor;
 }
 </style>

package/lib/components/SInputFile.vue

@@ -201,6 +201,7 @@ function handleChange(e: Event): void {
   text-overflow: ellipsis;
 }
 
+.file-name,
 .placeholder {
   color: var(--c-text-2);
 }

package/lib/components/SInputSelect.vue

@@ -38,19 +38,20 @@
       </select>
 
       <div class="icon" role="button">
-        <SIconChevronUp class="icon-svg up" />
-        <SIconChevronDown class="icon-svg down" />
+        <SIcon :icon="IconCaretUp" class="icon-svg up" />
+        <SIcon :icon="IconCaretDown" class="icon-svg down" />
       </div>
     </div>
   </SInputBase>
 </template>
 
 <script setup lang="ts">
+import IconCaretDown from '@iconify-icons/ph/caret-down'
+import IconCaretUp from '@iconify-icons/ph/caret-up'
 import { PropType, ref, computed } from 'vue'
 import { Validatable } from '../composables/Validation'
+import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
-import SIconChevronDown from './icons/SIconChevronDown.vue'
-import SIconChevronUp from './icons/SIconChevronUp.vue'
 
 type Size = 'mini' | 'small' | 'medium'
 
@@ -226,7 +227,7 @@ function emitChange(e: any): void {
   display: block;
   width: 14px;
   height: 14px;
-  fill: var(--input-placeholder);
+  color: var(--input-placeholder);
 }
 
 .icon-svg.up {

package/lib/components/SInputText.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { Validatable } from '../composables/Validation'
+import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
@@ -93,7 +94,7 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   >
     <div class="box" :class="{ focus: isFocused }" @click="focus">
       <div v-if="icon" class="icon">
-        <component :is="icon" class="icon-svg" />
+        <SIcon :icon="icon" class="icon-svg" />
       </div>
 
       <div class="value">

package/lib/components/SModal.vue

@@ -1,22 +1,36 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+
 export interface Props {
   open: boolean
   closable?: boolean
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   closable: true
 })
 
-defineEmits<{
+const emit = defineEmits<{
   (e: 'close'): void
 }>()
+
+const el = ref<any>(null)
+
+function onClick(e: any) {
+  if (!props.closable) {
+    return
+  }
+
+  if (e.target === el.value) {
+    emit('close')
+  }
+}
 </script>
 
 <template>
   <Teleport to="#sefirot-modals">
     <transition name="fade">
-      <div v-if="open" class="SModal" @click="closable && $emit('close')">
+      <div v-if="open" class="SModal" ref="el" @click="onClick">
         <slot />
       </div>
     </transition>

package/lib/components/SSheet.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import SIconX from 'sefirot/components/icons/SIconX.vue'
+import IconX from '@iconify-icons/ph/x'
+import SIcon from './SIcon.vue'
+import SMount from './SMount.vue'
 
 export interface Props {
   size?: 'small' | 'medium' | 'large'
@@ -11,19 +13,19 @@ withDefaults(defineProps<Props>(), {
   closable: true
 })
 
-defineEmits<{
+const emit = defineEmits<{
   (e: 'close'): void
 }>()
 </script>
 
 <template>
-  <FMount class="SSheet" :class="[size]" @click.stop>
+  <SMount class="SSheet" :class="[size]">
     <button v-if="closable ?? true" class="close" @click="$emit('close')">
-      <SIconX class="icon" />
+      <SIcon :icon="IconX" class="icon" />
     </button>
 
     <slot />
-  </FMount>
+  </SMount>
 </template>
 
 <style scoped lang="postcss">
@@ -81,6 +83,5 @@ defineEmits<{
 .icon {
   width: 24px;
   height: 24px;
-  fill: currentColor;
 }
 </style>

package/lib/components/SSnackbar.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import IconX from '@iconify-icons/ph/x'
 import { SnackbarAction, useSnackbars } from '../stores/Snackbars'
 import SButton from './SButton.vue'
-import SIconX from './icons/SIconX.vue'
+import SIcon from './SIcon.vue'
 
 const props = defineProps<{
   id: number
@@ -20,7 +21,7 @@ function close() {
 <template>
   <div class="SSnackbar" :class="[mode ?? 'neutral']">
     <button class="close" @click="close">
-      <SIconX class="close-icon" />
+      <SIcon :icon="IconX" class="close-icon" />
     </button>
 
     <p class="content">
@@ -78,7 +79,7 @@ function close() {
 
   &:hover {
     .close-icon {
-      fill: var(--c-text-1);
+      color: var(--c-text-1);
     }
   }
 }
@@ -86,8 +87,8 @@ function close() {
 .close-icon {
   width: 16px;
   height: 16px;
-  fill: var(--c-text-3);
-  transition: fill .25s;
+  color: var(--c-text-3);
+  transition: color .25s;
 }
 
 .content {

package/lib/components/{icons/SIconPreloader.vue → SSpinner.vue}

@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+  <svg class="SSpinner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
     <g transform="rotate(0 50 50)">
       <rect
         class="bar"
@@ -228,12 +228,13 @@
           repeatCount="indefinite"
         />
       </rect>
-    </g></svg>
+    </g>
+  </svg>
 </template>
 
 <style lang="postcss" scoped>
 .bar {
-  fill: var(--preloader-color);
-  transition: fill .5s;
+  fill: currentColor;
+  transition: fill 0.5s;
 }
 </style>

package/lib/components/SStep.vue

@@ -4,8 +4,8 @@
       <div class="bar" :class="[barLeft]" />
       <div class="point">
         <div v-if="status === 'active'" class="inner-dot" />
-        <SIconCheck v-else-if="status === 'done'" class="icon" />
-        <SIconX v-else-if="status === 'failed'" class="icon" />
+        <SIcon v-else-if="status === 'done'" :icon="IconCheck" class="icon" />
+        <SIcon v-else-if="status === 'failed'" :icon="IconX" class="icon" />
       </div>
       <div class="bar" :class="[barRight]" />
     </div>
@@ -15,10 +15,11 @@
 </template>
 
 <script setup lang="ts">
+import IconCheck from '@iconify-icons/ph/check'
+import IconX from '@iconify-icons/ph/x'
 import { PropType } from 'vue'
 import { StepStatus, BarMode } from '../composables/Step'
-import SIconCheck from './icons/SIconCheck.vue'
-import SIconX from './icons/SIconX.vue'
+import SIcon from './SIcon.vue'
 
 defineProps({
   status: { type: String as PropType<StepStatus>, required: true },
@@ -83,7 +84,7 @@ defineProps({
 .icon {
   width: 10px;
   height: 10px;
-  fill: var(--c-white);
+  color: var(--c-white);
 }
 
 .bar {

package/lib/components/STable.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { reactive, ref, computed, watch, toRefs } from 'vue'
 import { Table } from '../composables/Table'
+import SSpinner from './SSpinner.vue'
 import STableCell from './STableCell.vue'
 import STableColumn from './STableColumn.vue'
 import STableFooter from './STableFooter.vue'
 import STableHeader from './STableHeader.vue'
 import STableItem from './STableItem.vue'
-import SIconPreloader from './icons/SIconPreloader.vue'
 
 const props = defineProps<{
   options: Table
@@ -146,7 +146,7 @@ function updateColWidth(key: string, value: string) {
 
       <div v-if="loading" class="loading">
         <div class="loading-icon">
-          <SIconPreloader class="loading-svg" />
+          <SSpinner class="loading-svg" />
         </div>
       </div>
 
@@ -237,5 +237,6 @@ function updateColWidth(key: string, value: string) {
 .loading-svg {
   width: 48px;
   height: 48px;
+  color: var(--c-text-1);
 }
 </style>

package/lib/components/STableCellText.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import SIcon from './SIcon.vue'
 import SLink from './SLink.vue'
 
 const props = defineProps<{
@@ -27,7 +28,7 @@ const _value = computed(() => {
   <div class="STableCellText" :class="[{ link }, color ?? 'neutral']">
     <SLink v-if="_value" class="container" :href="link?.(value, record)">
       <div v-if="icon" class="icon" :class="[iconColor ?? color ?? 'neutral']">
-        <component class="svg" :is="icon" />
+        <SIcon :icon="icon" class="svg" />
       </div>
       <div class="text" :class="[color ?? 'neutral']">
         {{ _value }}
@@ -95,8 +96,8 @@ const _value = computed(() => {
 }
 
 .svg {
-  width: 16px;
-  height: 16px;
+  width: 18px;
+  height: 18px;
   fill: currentColor;
 }
 </style>

package/lib/components/STableColumn.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
+import IconDotsThree from '@iconify-icons/ph/dots-three'
 import { ref, computed, unref, watch, nextTick } from 'vue'
 import { DropdownSection } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
 import { isArray } from '../support/Utils'
 import SDropdown from './SDropdown.vue'
-import SIconMoreHorizontal from './icons/SIconMoreHorizontal.vue'
+import SIcon from './SIcon.vue'
 
 const props = defineProps<{
   name: string
@@ -113,7 +114,7 @@ function stopDialogPositionListener() {
 
       <div v-if="dropdown" class="action" ref="container">
         <button class="button" :class="{ active: buttonActive }" @click="toggle">
-          <SIconMoreHorizontal class="icon" />
+          <SIcon :icon="IconDotsThree" class="icon" />
         </button>
 
         <transition name="fade">
@@ -198,9 +199,8 @@ function stopDialogPositionListener() {
 }
 
 .icon {
-  width: 16px;
-  height: 16px;
-  fill: currentColor;
+  width: 20px;
+  height: 20px;
 }
 
 .dialog {

package/lib/components/STableFooter.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import IconCaretLeft from '@iconify-icons/ph/caret-left-bold'
+import IconCaretRight from '@iconify-icons/ph/caret-right-bold'
 import { computed } from 'vue'
 import { format } from '../support/Num'
-import SIconChevronLeft from './icons/SIconChevronLeft.vue'
-import SIconChevronRight from './icons/SIconChevronRight.vue'
+import SIcon from './SIcon.vue'
 
 const props = defineProps<{
   total?: number
@@ -43,10 +44,10 @@ const hasNext = computed(() => {
 
       <div class="actions">
         <button class="button prev" :class="{ active: hasPrev }" @click="onPrev">
-          <SIconChevronLeft class="icon" />
+          <SIcon :icon="IconCaretLeft" class="icon" />
         </button>
         <button class="button next" :class="{ active: hasNext }" @click="onNext">
-          <SIconChevronRight class="icon" />
+          <SIcon :icon="IconCaretRight" class="icon" />
         </button>
       </div>
     </div>
@@ -110,6 +111,5 @@ const hasNext = computed(() => {
 .icon {
   width: 16px;
   height: 16px;
-  fill: currentColor;
 }
 </style>