ral colors

components/calcValues.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import { ralClassicPallette } from '@/components/ral'
+
 const lamelles_count = useState('lamelles_count', () => 8)
 const fence_section = useState<number>('fence_section', () => 2000 * 0.001)
-const pillar_color = useState('pillar_color', () => '#828282')
+const pillar_color = useState('pillar_color', () => '1001')
-const lamelle_color = useState('lamelle_color', () => '#C2B078')
+const lamelle_color = useState('lamelle_color', () => '1002')
 const section_count = useState('section_count', () => 1)
 const extra_section = useState('section_count', () => 0)
 
@@ -113,8 +115,8 @@ const autoSectionWidth = () => {
     auto_section_width.value = !auto_section_width.value
 }
 
-const predefLamelleColors = ['#474B4E', '#705335', '#FDF4E3', '#2F4538']
+const predefLamelleColors = ['1000', '1001', '1002', '1003']
-const predefPillarColors = ['#474B4E', '#6A5D4D', '#F4F4F4', '#2F4538']
+const predefPillarColors = ['1011', '1012', '1013', '1014']
 
 watch(form_state, changeParametres, { deep: true })
 watch(form_state, changeParametres, { deep: true })
@@ -158,7 +160,7 @@ const toggleModal = () => {
                 <div class="form-row">
                     <div class="form-item">
                         <label for="lamelle_color">Цвет ламелей</label>
-                        <input id="lamelle_color" type="text" v-model="lamelle_color" disabled />
+                        <input id="lamelle_color" type="text" v-model="ralClassicPallette[lamelle_color].name" disabled />
                         <template v-for="item in predefLamelleColors">
                             <ColorPicker :color="item" :cb="setLamelleColor" :open="false"
                                 :active="lamelle_color == item" />
@@ -167,7 +169,7 @@ const toggleModal = () => {
                     </div>
                     <div class="form-item">
                         <label for="pillar_color">Цвет столба</label>
-                        <input id="pillar_color" type="text" v-model="pillar_color" disabled />
+                        <input id="pillar_color" type="text" v-model="ralClassicPallette[pillar_color].name" disabled />
                         <template v-for="item in predefPillarColors">
                             <ColorPicker :color="item" :cb="setPillarColor" :open="false"
                                 :active="pillar_color == item" />

components/colorPicker.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import converter from 'ral-hex-converter'
+import { ralClassicPallette } from '@/components/ral'
 
 const props = defineProps(['color', 'cb', 'open', 'active'])
 const open = props.open ?? true
@@ -30,13 +30,13 @@ onUnmounted(() => {
 <template>
     <div>
         <div class="color_picker" ref="picker">
-            <div class="color_picker-selected" :style="[{ backgroundColor: props.color }]"
+            <div class="color_picker-selected" @click="open ? toggleOpen(!isOpenPicker) : onClick(props.color)"
-                @click="open ? toggleOpen(!isOpenPicker) : onClick(props.color)"
+                :style="[{ backgroundColor: ralClassicPallette[props.color] ? ralClassicPallette[props.color].hex : '' }]"
                 :class="[{ 'color_picker-selected__active': active }]"></div>
             <div class="color_picker-changer flex flex-wrap" v-if="isOpenPicker">
-                <template v-for="col in converter.hex">
+                <template v-for="col in ralClassicPallette">
-                    <div class="color size-5" :class="[{ 'outline outline-primary': props.color == col }]"
+                    <div class="color size-5" :class="[{ 'outline outline-primary': props.color == col.hex }]"
-                        :style="[{ backgroundColor: col }]" @click="onClick(col)">
+                        :style="[{ backgroundColor: col.hex }]" @click="onClick(col.code)">
                     </div>
                 </template>
             </div>

components/model/fence.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ralClassicPallette } from '@/components/ral'
 const props = defineProps(['index', 'models'])
 
 const lamelles_count = useState<number>('lamelles_count')
@@ -40,56 +41,57 @@ watch(fence_section, () => {
     <TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`">
         <TresGroup name="pillar_one" v-if="show_pillar_one" :position-x="pillar_one_pos" :position-z="0">
             <TresGroup :position-y="(lSize * -0.5)" :scale="[1, 0.5, 1]">
-                <ModelItem :model="props.models.fence" :color="pillar_color" />
+                <ModelItem :model="props.models.fence" :color="ralClassicPallette[pillar_color].hex" />
             </TresGroup>
             <template v-for="(n, i) in lamelles_count">
                 <TresGroup :position-y="(lSize * i)">
-                    <ModelItem :model="props.models.fence" :color="pillar_color" />
+                    <ModelItem :model="props.models.fence" :color="ralClassicPallette[pillar_color].hex" />
                 </TresGroup>
             </template>
             <TresGroup :position-y="(lSize * lamelles_count)" :scale="[1, 0.5, 1]">
-                <ModelItem :model="props.models.fence" :color="pillar_color" />
+                <ModelItem :model="props.models.fence" :color="ralClassicPallette[pillar_color].hex" />
             </TresGroup>
         </TresGroup>
 
         <TresGroup name="pillar_two" v-if="show_pillar_two" :position-x="pillar_two_pos" :position-z="0">
             <TresGroup :position-y="(lSize * -0.5)" :scale="[-1, 0.5, 1]">
-                <ModelItem :model="props.models.fence" :color="pillar_color" />
+                <ModelItem :model="props.models.fence" :color="ralClassicPallette[pillar_color].hex" />
             </TresGroup>
             <template v-for="(n, i) in lamelles_count">
                 <TresGroup :position-y="(lSize * i)" :scale="[-1, 1, 1]">
-                    <ModelItem :model="props.models.fence" :color="pillar_color" />
+                    <ModelItem :model="props.models.fence" :color="ralClassicPallette[pillar_color].hex" />
                 </TresGroup>
             </template>
             <TresGroup :position-y="(lSize * lamelles_count)" :scale="[-1, 0.5, 1]">
-                <ModelItem :model="props.models.fence" :color="pillar_color" />
+                <ModelItem :model="props.models.fence" :color="ralClassicPallette[pillar_color].hex" />
             </TresGroup>
         </TresGroup>
 
         <TresGroup name="lamelles">
             <template v-for="(n, i) in lamelles_count">
                 <TresGroup :position="[pillar_size * 0.5, (lSize * i), 0.02]" :scale-x="fence_section * 10">
-                    <ModelItem :model="props.models.lamelle" :color="lamelle_color" />
+                    <ModelItem :model="props.models.lamelle" :color="ralClassicPallette[lamelle_color].hex" />
                 </TresGroup>
             </template>
         </TresGroup>
         <TresGroup name="lamelles_fastening_one">
             <template v-for="(n, i) in lamelles_count">
                 <TresGroup :position-y="(lSize * i)" :position-x="pillar_one_pos">
-                    <ModelItem :model="props.models.fastening" :color="pillar_color" />
+                    <ModelItem :model="props.models.fastening" :color="ralClassicPallette[pillar_color].hex" />
                 </TresGroup>
             </template>
         </TresGroup>
         <TresGroup name="lamelles_fastening_two">
             <template v-for="(n, i) in lamelles_count">
                 <TresGroup :position-y="(lSize * i)" :scale="[-1, 1, 1]" :position-x="pillar_two_pos">
-                    <ModelItem :model="props.models.fastening" :remove-pos="true" :color="pillar_color" />
+                    <ModelItem :model="props.models.fastening" :remove-pos="true"
+                        :color="ralClassicPallette[pillar_color].hex" />
                 </TresGroup>
             </template>
         </TresGroup>
         <TresGroup name="top_section" :scale-x="fence_section * 10"
             :position="[pillar_size * 0.5, lamelles_count * lSize, 0]">
-            <ModelItem :model="props.models.top" :color="pillar_color" />
+            <ModelItem :model="props.models.top" :color="ralClassicPallette[pillar_color].hex" />
         </TresGroup>
     </TresGroup>
 </template>