shared-ritm 1.0.87 → 1.0.88

package/dist/types/index.d.ts

@@ -1,14 +1,16 @@
 import AppButton from '@/common/app-button/AppButton.vue';
-import AppInputSearch from '@/common/app-input-search/AppInputSearch.vue';
+import AppCheckbox from '@/common/app-checkbox/AppCheckbox.vue';
+import AppDatePicker from '@/common/app-date-picker/AppDatePicker.vue';
 import AppInput from '@/common/app-input/AppInput.vue';
-import AppToggle from '@/common/app-toggle/index.vue';
+import AppInputSearch from '@/common/app-input-search/AppInputSearch.vue';
 import AppLayout from '@/common/app-layout/AppLayout.vue';
-import AppSelect from '@/common/app-select/AppSelect.vue';
-import AppWrapper from '@/common/app-wrapper/AppWrapper.vue';
-import AppSidebar from '@/common/app-sidebar/AppSidebar.vue';
 import AppLayoutHeader from '@/common/app-layout/components/AppLayoutHeader.vue';
 import AppLoader from '@/common/app-loader/index.vue';
+import AppSelect from '@/common/app-select/AppSelect.vue';
 import AppSheet from '@/common/app-sheet/AppSheet.vue';
+import AppSidebar from '@/common/app-sidebar/AppSidebar.vue';
+import AppToggle from '@/common/app-toggle/AppToggle.vue';
+import AppWrapper from '@/common/app-wrapper/AppWrapper.vue';
 import useGanttService from '@/api/services/GanttService';
 import useMetricsService from '@/api/services/MetricsService';
 import useProjectsService from '@/api/services/ProjectsService';
@@ -16,8 +18,8 @@ import useRepairsService from '@/api/services/RepairsService';
 import useTasksService from '@/api/services/TasksService';
 import useAuthService from '@/api/services/AuthService';
 import ApiService from '@/api/settings/ApiService';
-export { AppButton, AppInput, AppToggle, AppInputSearch, AppLayout, AppSelect, AppWrapper, AppSidebar, AppLayoutHeader, AppLoader, AppSheet, };
-export { ApiService, useGanttService, useMetricsService, useProjectsService, useRepairsService, useTasksService, useAuthService, };
+export { AppButton, AppCheckbox, AppDatePicker, AppInput, AppInputSearch, AppLayout, AppLayoutHeader, AppLoader, AppSelect, AppSheet, AppSidebar, AppToggle, AppWrapper, };
+export { ApiService, useAuthService, useGanttService, useMetricsService, useProjectsService, useRepairsService, useTasksService, };
 export * from '@/api/types/Api_Tasks';
 export * from '@/api/types/Api_Repairs';
 export * from '@/api/types/Api_Projects';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shared-ritm",
-  "version": "1.0.87",
+  "version": "1.0.88",
   "private": false,
   "files": [
     "dist",

package/src/common/app-button/AppButton.vue

@@ -75,9 +75,19 @@ interface Props extends QBtnProps {
   badgeColor?: string
   badgeInline?: boolean
   link?: boolean
+  borderColor?: string
+  borderRadius?: string
+  borderWidth?: string
+  width?: string
+  height?: string
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  borderRadius: '16px',
+  borderWidth: '1px',
+  width: 'auto',
+  height: 'auto',
+})
 
 const emit = defineEmits(['update:modelValue', 'click'])
 
@@ -117,14 +127,20 @@ const isDisabled = computed(() => {
 <style lang="scss" module>
 .wrapper {
   flex: 0 0 auto;
+  width: v-bind(width);
+  height: v-bind(height);
   &:global(.q-btn--rounded) {
-    border-radius: 14px;
+    border-radius: v-bind(borderRadius);
+  }
+  &:global(.q-btn--outline:before) {
+    border-width: v-bind(borderWidth);
   }
   &:global(.q-btn) {
     color: #0a1629;
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
+    font-family: NunitoSansFont, sans-serif;
   }
 
   &:global(.--loading) {

package/src/common/app-checkbox/AppCheckbox.vue

@@ -0,0 +1,26 @@
+<template>
+  <q-checkbox :class="$style['app-checkbox']" v-model="value" />
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  modelValue: any
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits(['update:modelValue', 'number'])
+
+const value = computed({
+  get: () => props.modelValue,
+  set: (newValue: any) => emit('update:modelValue', newValue),
+})
+</script>
+<style module lang="scss">
+.app-checkbox {
+  :global(.q-checkbox__bg) {
+    border-radius: 6px;
+    border-color: white;
+  }
+}
+</style>

package/src/common/app-date-picker/AppDatePicker.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="date-picker">
+    <app-button
+      class="button"
+      outline
+      size="20px"
+      padding="10px"
+      border-radius="8px"
+      border-width="2px"
+      rounded
+      text-color="primary"
+      icon="event"
+    >
+      <q-popup-proxy anchor="top left" self="top left" transition-show="scale-up" transition-hide="scale-down">
+        <q-date mask="YYYY-MM-DD" v-model="model" minimal />
+      </q-popup-proxy>
+    </app-button>
+    <div class="date-picker__content">
+      <p>{{ label }}<span> * </span></p>
+      <span>{{ model || 'Выберите дату' }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import AppButton from '@/common/app-button/AppButton.vue'
+
+interface Props {
+  label: string
+  modelValue: string
+}
+const emits = defineEmits(['update:modelValue'])
+const props = defineProps<Props>()
+
+const model = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value: string) {
+    emits('update:modelValue', value)
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.date-picker {
+  display: flex;
+  gap: 14px;
+  &__content {
+    color: #7d8592;
+    font-weight: 500;
+    p {
+      margin: 0;
+      font-weight: 700;
+      span {
+        color: red;
+      }
+    }
+    span {
+    }
+  }
+}
+.button {
+}
+</style>

package/src/common/app-input/AppInput.vue

@@ -1,7 +1,7 @@
 <template>
   <q-input
     v-model="value"
-    :class="inputClasses"
+    :class="[inputClasses, $style['app-input']]"
     standout
     outlined
     dense
@@ -91,6 +91,11 @@ interface AppInputProps extends AppQInputProps {
   withIcon?: boolean
   withButton?: boolean
   withArrow?: boolean
+  borderColor?: string
+  borderRadius?: string
+  borderWidth?: string
+  width?: string
+  height?: string
 }
 
 const props = withDefaults(defineProps<AppInputProps>(), {
@@ -98,6 +103,10 @@ const props = withDefaults(defineProps<AppInputProps>(), {
   outlined: true,
   error: undefined,
   modelValue: '',
+  borderRadius: '8px',
+  borderWidth: '1px',
+  width: 'auto',
+  height: 'auto',
 })
 
 const emit = defineEmits(['update:modelValue', 'button-click', 'clear', 'focus', 'blur', 'click'])
@@ -125,4 +134,10 @@ const inputClasses = computed(() => {
 })
 </script>
 
-<style scoped lang="scss"></style>
+<style module lang="scss">
+.app-input {
+  &:global(.q-field--dense .q-field__control) {
+    height: v-bind(height);
+  }
+}
+</style>

package/src/common/app-sheet/AppSheet.vue

@@ -1,89 +1,111 @@
-<template>
-  <q-dialog
-    ref="DialogRef"
-    :model-value="true"
-    :position="'right'"
-    :class="$style['sheet-dialog']"
-    full-height
-    full-width
-  >
-    <q-card>
-      <div class="wrapper">
-        <div class="sheet-header">
-          <h2>{{ title }}</h2>
-          <div class="close-button"></div>
-          <q-btn v-close-popup dense flat icon="close" />
-        </div>
-        <div v-if="loading" class="loader">
-          <q-spinner-audio v-if="loading" class="loader-spiner" size="md" :thickness="3" color="primary" />
-        </div>
-        <slot v-else />
-      </div>
-    </q-card>
-  </q-dialog>
-</template>
-
-<script setup lang="ts">
-import { computed, defineEmits, defineProps, withDefaults } from 'vue'
-
-interface DialogProps {
-  dialogRef: any
-  loading: boolean
-  title: string
-  width?: string
-}
-
-const props = withDefaults(defineProps<DialogProps>(), {
-  width: '976px',
-})
-
-const emit = defineEmits(['update:dialogRef'])
-
-const DialogRef = computed({
-  get() {
-    return props.dialogRef
-  },
-  set(value) {
-    emit('update:dialogRef', value)
-  },
-})
-</script>
-
-<style lang="scss" scoped>
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  width: v-bind(width);
-  height: 100vh;
-  min-height: 100vh;
-  position: relative;
-  padding: 2rem 2rem 4rem 2rem;
-  background-color: #7991ad32;
-  font-family: 'NunitoSansFont', sans-serif !important;
-}
-.sheet-header {
-  display: flex;
-  justify-content: space-between;
-  h2 {
-    font-size: 36px;
-  }
-}
-.loader {
-  min-width: 976px;
-  &-spiner {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    z-index: 4;
-  }
-}
-</style>
-
-<style lang="scss" module>
-.sheet-dialog {
-  :global(.q-dialog__inner--minimized) {
-    padding: 0;
-  }
-}
-</style>
+<template>
+  <q-dialog
+    ref="DialogRef"
+    :model-value="true"
+    :position="'right'"
+    :class="$style['sheet-dialog']"
+    full-height
+    full-width
+  >
+    <template v-if="type === 'details'">
+      <q-card>
+        <div class="wrapper">
+          <div class="sheet-header">
+            <h2>{{ title }}</h2>
+            <div class="close-button">
+              <q-btn v-close-popup dense flat icon="close" />
+            </div>
+          </div>
+          <div v-if="loading" class="loader">
+            <q-spinner-audio v-if="loading" class="loader-spinner" size="md" :thickness="3" color="primary" />
+          </div>
+          <slot v-else />
+        </div>
+      </q-card>
+    </template>
+    <template v-if="type === 'custom'">
+      <div class="custom-wrapper" v-if="loading">
+        <div class="loader">
+          <q-spinner-audio v-if="loading" class="loader-spinner" size="md" :thickness="3" color="primary" />
+        </div>
+      </div>
+      <slot v-else />
+    </template>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, ref, withDefaults } from 'vue'
+
+interface DialogProps {
+  dialogRef: any
+  loading?: boolean
+  title?: string
+  width?: string
+  type?: 'details' | 'custom'
+  tabs?: any[]
+  currentTabName?: string
+}
+
+const props = withDefaults(defineProps<DialogProps>(), {
+  width: '976px',
+  type: 'details',
+  loading: false,
+})
+
+const emit = defineEmits(['update:dialogRef', 'update:currentTabName'])
+
+const DialogRef = computed({
+  get() {
+    return props.dialogRef
+  },
+  set(value) {
+    emit('update:dialogRef', value)
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.custom-wrapper {
+  width: v-bind(width);
+  background-color: white;
+}
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: v-bind(width);
+  height: 100vh;
+  min-height: 100vh;
+  position: relative;
+  padding: 2rem 2rem 4rem 2rem;
+  background-color: #7991ad32;
+  font-family: 'NunitoSansFont', sans-serif;
+}
+
+.sheet-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  h2 {
+    font-size: 36px;
+  }
+}
+.loader {
+  min-width: 976px;
+  &-spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 4;
+  }
+}
+</style>
+
+<style lang="scss" module>
+.sheet-dialog {
+  :global(.q-dialog__inner--minimized) {
+    padding: 0;
+  }
+}
+</style>

package/src/index.ts

@@ -1,14 +1,16 @@
 import AppButton from '@/common/app-button/AppButton.vue'
-import AppInputSearch from '@/common/app-input-search/AppInputSearch.vue'
+import AppCheckbox from '@/common/app-checkbox/AppCheckbox.vue'
+import AppDatePicker from '@/common/app-date-picker/AppDatePicker.vue'
 import AppInput from '@/common/app-input/AppInput.vue'
-import AppToggle from '@/common/app-toggle/index.vue'
+import AppInputSearch from '@/common/app-input-search/AppInputSearch.vue'
 import AppLayout from '@/common/app-layout/AppLayout.vue'
-import AppSelect from '@/common/app-select/AppSelect.vue'
-import AppWrapper from '@/common/app-wrapper/AppWrapper.vue'
-import AppSidebar from '@/common/app-sidebar/AppSidebar.vue'
 import AppLayoutHeader from '@/common/app-layout/components/AppLayoutHeader.vue'
 import AppLoader from '@/common/app-loader/index.vue'
+import AppSelect from '@/common/app-select/AppSelect.vue'
 import AppSheet from '@/common/app-sheet/AppSheet.vue'
+import AppSidebar from '@/common/app-sidebar/AppSidebar.vue'
+import AppToggle from '@/common/app-toggle/AppToggle.vue'
+import AppWrapper from '@/common/app-wrapper/AppWrapper.vue'
 
 import useGanttService from '@/api/services/GanttService'
 import useMetricsService from '@/api/services/MetricsService'
@@ -20,26 +22,28 @@ import ApiService from '@/api/settings/ApiService'
 
 export {
   AppButton,
+  AppCheckbox,
+  AppDatePicker,
   AppInput,
-  AppToggle,
   AppInputSearch,
   AppLayout,
-  AppSelect,
-  AppWrapper,
-  AppSidebar,
   AppLayoutHeader,
   AppLoader,
+  AppSelect,
   AppSheet,
+  AppSidebar,
+  AppToggle,
+  AppWrapper,
 }
 
 export {
   ApiService,
+  useAuthService,
   useGanttService,
   useMetricsService,
   useProjectsService,
   useRepairsService,
   useTasksService,
-  useAuthService,
 }
 
 export * from '@/api/types/Api_Tasks'